/* ============================================================
   PISTE C — « Atelier » : artisanal et complice.
   Young Serif + Work Sans + Caveat (annotations). Papier crème,
   kraft, encre bleue, rouge tomate. Collage, scotch, tampons,
   polaroïds, fiches bristol ; ton chaleureux et familier.
   ============================================================ */
:root {
    --paper: #fbf6ea; --paper-2: #f3e9d3; --surface-1: #fffdf7;
    --kraft: #e7d6b6;
    --line: #e2d4b8; --line-strong: #c9b48d;
    --ink-strong: #1b2f55; --ink: #2b2622; --ink-muted: #433a33; --ink-dim: #5f5448;
    --accent: #b23a22; --accent-hover: #942e19; --accent-soft: #f7ddd3; --on-accent: #fffaf0;
    --bleu: #1f3a6b;
    --saffron: #d9442b; --saffron-soft: #f7ddd3; --saffron-ink: #b23a22;
    --sage: #3c6b3f; --sage-soft: #e1ecd9;
    --font-display: 'Young Serif', Georgia, serif;
    --font-body: 'Work Sans', system-ui, sans-serif;
    --font-main: 'Caveat', 'Comic Sans MS', cursive;
    --radius-lg: 6px; --radius-xl: 8px;
    --slate-deep: #1b2f55;
}
:root[data-theme="dark"] {
    --paper: #16181f; --paper-2: #1c1f28; --surface-1: #22252f; --kraft: #2a2a2c; --line: #333745; --line-strong: #484d60;
    --ink-strong: #f6ecd8; --ink: #ebe1cf; --ink-muted: #d6ccba; --ink-dim: #aaa08f;
    --accent: #f08a73; --accent-hover: #f5a390; --on-accent: #1b1413; --saffron-ink: #f08a73; --sage: #9cc79e;
}
body.piste-c { background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.piste-c h1, .piste-c h2, .piste-c h3 { font-weight: 400; color: var(--ink-strong); letter-spacing: -0.01em; }
.piste-c .btn { border-radius: 10px; font-weight: 700; }
.piste-c .btn-primary { box-shadow: 3px 3px 0 var(--ink-strong); }
.piste-c .btn-primary:hover { box-shadow: 5px 5px 0 var(--ink-strong); transform: translate(-1px, -1px); }
.piste-c .btn-secondary { --btn-bg: var(--bleu); --btn-bd: var(--bleu); --btn-fg: #fffaf0; }
.c-note { font-family: var(--font-main); font-size: 1.5rem; line-height: 1.1; color: var(--accent); font-weight: 700; }

.piste-c .site-header { background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom: 2px dashed var(--line-strong); }
.logo--c { gap: .55rem; }
.logo--c .logo-word { font-family: var(--font-display); font-style: normal; font-size: 1.3rem; color: var(--ink-strong); }
.logo--c .logo-word em { font-style: normal; color: var(--accent); }
.piste-c .nav-link { font-weight: 600; }
.piste-c .nav-link::after { height: 3px; border-radius: 3px; background: var(--saffron); transform-origin: center; }

/* Héros collage */
.c-hero { padding: 3rem 0 5rem; overflow: hidden; }
.c-hero__grille { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.c-note--haut { transform: rotate(-3deg); margin-bottom: .6rem; }
.c-hero h1 { font-size: clamp(2.8rem, 5.6vw, 4.8rem); line-height: 1.02; margin-bottom: 1.4rem; }
.c-souligne { position: relative; color: var(--accent); white-space: nowrap; }
.c-souligne::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.08em; height: .28em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 4, 80 18, 120 8 S 180 6, 197 11' fill='none' stroke='%231f3a6b' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.c-lead { font-size: 1.12rem; line-height: 1.7; color: var(--ink-muted); max-width: 33rem; margin-bottom: 1.8rem; }
.c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-bottom: 2.2rem; }
.c-lien { font-family: var(--font-main); font-size: 1.45rem; font-weight: 700; color: var(--bleu); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.c-tampons { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.c-tampon { width: 88px; height: 88px; border-radius: 50%; border: 3px double var(--accent); color: var(--accent); display: grid; place-items: center; text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; line-height: 1.2; transform: rotate(-9deg); opacity: .92; }
.c-tampon b { font-size: .95rem; font-weight: 800; letter-spacing: .02em; }
.c-tampon--bleu { border-color: var(--bleu); color: var(--bleu); transform: rotate(6deg); }
.c-hero__collage { position: relative; transform: rotate(1.2deg); }
.c-hero__collage .demo { border-radius: 4px; background: var(--surface-1); border: 1px solid var(--line-strong); box-shadow: 0 30px 60px -30px rgba(43, 38, 34, .55), 0 2px 0 var(--line); }
.c-hero__collage .demo::before { display: none; }
.c-scotch { position: absolute; z-index: 5; width: 120px; height: 30px; background: rgba(217, 68, 43, .32); mix-blend-mode: multiply; }
.c-scotch--1 { top: -12px; left: 28px; transform: rotate(-8deg); }
.c-scotch--2 { bottom: 40px; right: -26px; transform: rotate(72deg); background: rgba(31, 58, 107, .28); }
.c-note--demo { position: absolute; left: -6px; bottom: -44px; transform: rotate(-2deg); }
.piste-c .demo-modeles button[aria-checked="true"] { background: var(--bleu); border-color: var(--bleu); }

/* Sections */
.c-section { padding: 5rem 0; }
.c-section--kraft { background: var(--kraft); border-top: 2px dashed var(--line-strong); border-bottom: 2px dashed var(--line-strong); }
.c-section--papier { background: var(--paper-2); }
.c-titre { font-size: clamp(2rem, 3.8vw, 3rem); margin-bottom: 2.4rem; }
.c-titre .c-note { font-size: 1.6rem; margin-left: .3rem; white-space: nowrap; }
.c-titre--centre { text-align: center; }
.c-fiches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.c-fiche { position: relative; background: var(--surface-1); padding: 2.2rem 1.7rem 1.8rem; border-radius: 3px; box-shadow: 0 14px 30px -18px rgba(43, 38, 34, .5); background-image: repeating-linear-gradient(transparent 0 31px, rgba(31, 58, 107, .09) 31px 32px); transition: transform .25s; }
.c-fiche:nth-child(1) { transform: rotate(-1.4deg); } .c-fiche:nth-child(2) { transform: rotate(.9deg); } .c-fiche:nth-child(3) { transform: rotate(-.6deg); }
.c-fiche:hover { transform: rotate(0) translateY(-4px); }
.c-fiche::before { content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--saffron); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .18); }
.c-fiche__num { font-family: var(--font-main); font-size: 2.6rem; color: var(--accent); font-weight: 700; line-height: 1; }
.c-fiche h3 { font-size: 1.6rem; margin: .3rem 0 .6rem; }
.c-fiche p { color: var(--ink-muted); line-height: 1.7; }
.c-vivante { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3.5rem; align-items: center; }
.c-texte { color: var(--ink-muted); font-size: 1.08rem; line-height: 1.75; margin-bottom: 1.6rem; }
.c-ardoise { background: #2b3530; color: #efe9dc; border: 12px solid #8a6a45; border-radius: 6px; padding: 1.8rem 1.9rem; font-family: var(--font-main); font-size: 1.7rem; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .6); transform: rotate(-1.5deg); }
.c-ardoise p { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .3rem; }
.c-ardoise__titre { justify-content: center !important; font-size: 2.2rem; text-decoration: underline; text-underline-offset: 6px; }
.c-ardoise .is-barre { text-decoration: line-through; text-decoration-thickness: 3px; color: #b7b1a4; }
.c-ardoise__mot { color: #f7c4b4; justify-content: flex-end !important; font-size: 1.4rem; transform: rotate(-4deg); }
.c-mur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem 1.6rem; margin-bottom: 2.6rem; }
.c-polaroid { background: #fff; padding: 10px 10px 14px; box-shadow: 0 12px 26px -14px rgba(43, 38, 34, .55); transform: rotate(var(--r)); transition: transform .25s; color: var(--ink); text-align: center; }
.c-polaroid:hover { transform: rotate(0) scale(1.03); z-index: 2; color: var(--ink); }
.c-polaroid span { display: block; margin-top: .6rem; font-family: var(--font-main); font-size: 1.45rem; font-weight: 700; color: #2b2622; }
.c-centre { text-align: center; }
.piste-c .offre { border-radius: 6px; border: 1.5px solid var(--line-strong); box-shadow: 0 10px 24px -16px rgba(43, 38, 34, .4); }
.piste-c .offre--pro { border: 2px solid var(--bleu); transform: rotate(-.6deg); box-shadow: 6px 6px 0 var(--bleu); }
.piste-c .offre-ruban { background: var(--bleu); color: #fffaf0; border-radius: 4px; transform: rotate(-3deg); }
.piste-c .offre-nom { font-family: var(--font-main); font-size: 1.8rem; font-weight: 700; color: var(--accent); }
.c-carnet { background: var(--surface-1); border-radius: 4px; padding: .6rem 1.6rem; box-shadow: 0 16px 34px -22px rgba(43, 38, 34, .5); border-left: 3px solid rgba(217, 68, 43, .5); }
.c-q { border-bottom: 1px solid rgba(31, 58, 107, .15); padding: 1rem 0; }
.c-q:last-child { border-bottom: 0; }
.c-q summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--ink-strong); display: flex; justify-content: space-between; gap: 1rem; }
.c-q summary::-webkit-details-marker { display: none; }
.c-q summary::after { content: "+"; font-family: var(--font-main); font-size: 1.6rem; color: var(--accent); line-height: .8; }
.c-q[open] summary::after { content: "–"; }
.c-q p { margin-top: .6rem; color: var(--ink-muted); line-height: 1.7; }
.c-final { padding: 5rem 0 6rem; text-align: center; }
.c-final h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin: .4rem auto 1.8rem; max-width: 20ch; }
.c-final .c-note { font-size: 1.8rem; }
.piste-c .site-footer { background: var(--bleu); }

/* Éditeur : le panneau latéral a sa feuille, editor-panneau.css */
.piste-c .editor-logo--piste .logo-word { color: #fffaf0; font-size: 1.05rem !important; font-style: normal; }
.piste-c .editor-logo--piste .logo-word em { color: #f4a28c; }
.piste-c .editor-panel-title { font-family: var(--font-display); }
.piste-c .editor-preview-area { background: var(--kraft); }

@media (max-width: 1024px) {
    .c-hero__grille, .c-vivante { grid-template-columns: 1fr; }
    .c-mur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c-hero__collage { margin-bottom: 3rem; }
}
@media (max-width: 720px) {
    .c-fiches { grid-template-columns: 1fr; }
    .c-hero { padding-top: 2rem; }
    .c-scotch--2 { display: none; }
    .c-titre .c-note { display: block; margin: .3rem 0 0; white-space: normal; }
    .c-ardoise { font-size: 1.4rem; }
    .logo--c .logo-word { font-size: 1.05rem; }
    .c-tampon { width: 76px; height: 76px; }
}
.c-tampon { width: 100px; height: 100px; font-size: .6rem; letter-spacing: .04em; padding: 6px; }
.c-tampon b { font-size: .78rem; letter-spacing: 0; }
.piste-c .editor-panel-title { color: var(--sb-ink); }
.piste-c .site-footer .logo-word { color: #fffaf0; }
.piste-c .site-footer .logo-word em { color: #f4a28c; }
@media (max-width: 720px) { .c-tampon { width: 86px; height: 86px; } .c-tampon b { font-size: .7rem; } }

/* Section « modèle par IA » et petits textes */
.c-ia { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; align-items: center; }
.c-ia .btn { margin-top: .4rem; }
.c-petit { margin-top: .8rem; font-size: .85rem; color: var(--ink-dim); }
.c-ia__exemples { display: grid; gap: .9rem; }
.c-ia__exemples li { background: var(--surface-1); border: 1px solid var(--line-strong); padding: .9rem 1.1rem; box-shadow: 3px 3px 0 var(--line-strong); font-family: var(--font-main); font-size: 1.35rem; font-weight: 700; color: var(--bleu); transform: rotate(-1deg); }
.c-ia__exemples li:nth-child(2) { transform: rotate(1.2deg); margin-left: 1.5rem; color: var(--accent); }
.c-ia__exemples li:nth-child(3) { transform: rotate(-.6deg); }
:root[data-theme="dark"] .c-ia__exemples li { color: var(--ink-strong); }
@media (max-width: 860px) { .c-ia { grid-template-columns: 1fr; gap: 1.8rem; } .c-ia__exemples li:nth-child(2) { margin-left: 0; } }

/* Thème sombre : l'encre bleue s'éclaircit (AA sur #16181f), le texte sur aplat bleu devient sombre. */
:root[data-theme="dark"] { --bleu: #9db8ea; }
:root[data-theme="dark"] .piste-c .btn-secondary, :root[data-theme="dark"] .btn-secondary { --btn-fg: #16181f; }
:root[data-theme="dark"] .c-tampon--bleu { border-color: var(--bleu); color: var(--bleu); }

/* Thème sombre : --bleu s'éclaircit pour servir d'ENCRE ; là où il servait de FOND
   sous un texte crème (pied de page, ruban, puce active), le texte tombait à 1,1:1.
   Ces aplats gardent un bleu nuit, ou passent au texte sombre. */
:root[data-theme="dark"] .piste-c .site-footer { background: #111a2e; }
:root[data-theme="dark"] .piste-c .offre-ruban { color: #16181f; }
:root[data-theme="dark"] .piste-c .demo-modeles button[aria-checked="true"] { color: #16181f; }

/* Contrastes mesurés (audit du 26/09) : bord de champ ≥ 3:1 sur toutes les surfaces
   (--line-strong ne faisait que 2:1), focus visible en trait plein, et focus clair
   sur les fonds bleu nuit où le rouge tomate tombait à 1,9:1. */
:root { --field-border: #8a7a66; }
:root[data-theme="dark"] { --field-border: #7d8398; }
.form-input, .form-select, .form-textarea { border-color: var(--field-border); }
.form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible,
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; border-color: var(--accent); }
.piste-c .site-footer :focus-visible { outline-color: #f4a28c; }
.final-boite :focus-visible { outline-color: #f2b75a; }
.piste-c .site-header .logo-word em { color: var(--accent-hover); }
:root[data-theme="dark"] .piste-c .site-header .logo-word em { color: var(--accent); }