/* ============================================================
   Directions graphiques comparables (sélecteur de maquette).
   « expedition » = tokens par défaut (css/tokens.css).
   Chaque direction redéfinit couleurs, polices, formes, ombres et atmosphère ;
   contrastes vérifiés AA (boutons ≥ 4,8:1 sous texte blanc, texte secondaire ≥ 6:1).
   ============================================================ */

/* ---------- Affiche : risographie, cobalt / tomate / soleil ---------- */
:root[data-theme="riso"] {
  --color-paper: #fff6e9;
  --color-paper-2: #fbe9cf;
  --color-card: #fffdf8;
  --color-note: #fff1c2;
  --color-line: #eadcc3;
  --color-line-strong: #b9b2c9;
  --color-ink: #1b1d3a;
  --color-ink-soft: #4a4c66;
  --color-ink-mute: #5d5f78;
  --color-green: #2742d6;
  --color-green-deep: #141c66;
  --color-green-soft: #4b62e6;
  --color-green-wash: #e4e8ff;
  --color-accent: #d23a22;
  --color-accent-hover: #b52d18;
  --color-accent-text: #c0331c;
  --color-accent-soft: #ffc93c;
  --color-accent-wash: #ffe9a8;
  --color-on-dark: #fff6e9;
  --color-tape: rgba(255, 201, 60, 0.85);
  --color-info-wash: #e9ecff;
  --color-info-line: #c5ccf5;
  --brand-sun: #e2422b;

  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-hand: "Shantell Sans", "Comic Sans MS", cursive;
  --weight-display: 700;
  --text-hero: clamp(2rem, 1.15rem + 3.9vw, 3.9rem);
  --text-h2: clamp(1.5rem, 1.15rem + 1.7vw, 2.3rem);
  --text-q: clamp(1.4rem, 1.1rem + 1.5vw, 2.05rem);

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-btn: 10px;
  --shadow-sm: 2px 2px 0 var(--color-ink);
  --shadow-md: 5px 5px 0 var(--color-ink);
  --shadow-paper: 4px 4px 0 var(--color-ink);
  --shadow-btn: 3px 3px 0 var(--color-ink);
  --shadow-btn-active: 0 0 0 var(--color-ink);
  --bg-atmosphere: radial-gradient(color-mix(in srgb, var(--color-accent-soft) 38%, transparent) 1px, transparent 1.7px);
}
[data-theme="riso"] body { background-size: 16px 16px; }
[data-theme="riso"] h1, [data-theme="riso"] h2 { letter-spacing: -0.03em; }
[data-theme="riso"] .hand, [data-theme="riso"] .eyebrow { font-weight: 700; }
[data-theme="riso"] .eyebrow { font-size: 1.15rem; }
[data-theme="riso"] .hero__accent {
  font-style: normal;
  color: var(--color-ink);
  background: linear-gradient(transparent 58%, var(--color-accent-soft) 58% 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-theme="riso"] .btn--primary { border-color: var(--color-ink); }
[data-theme="riso"] .btn--primary:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-ink); }
[data-theme="riso"] :is(.card-opt, .cap-card, .recap, .recap-more, .participant fieldset, .live__paper, .polaroid, .carnet, .why__example, .uni, .mission, .row-opt, .consent__label, .privacy) {
  border-color: var(--color-ink);
}
[data-theme="riso"] :is(.uni, .card-opt, .mission, .row-opt) { border-width: 2px; border-style: solid; }
[data-theme="riso"] .uni:has(input:checked) { box-shadow: 4px 4px 0 var(--color-ink); }
[data-theme="riso"] .carnet { border-left-color: var(--color-accent); }
[data-theme="riso"] .live__paper { border-left-color: var(--color-accent); }
[data-theme="riso"] .how__num { border-style: solid; border-color: var(--color-ink); background: var(--color-accent-soft); color: var(--color-ink); }
[data-theme="riso"] .how__step:last-child .how__num { background: var(--color-accent); border-color: var(--color-ink); color: #fff; }
[data-theme="riso"] .step--spotlight .spot-tag { background: var(--color-accent-soft); color: var(--color-ink); }

/* ---------- Lagune : verre de mer, sarcelle / corail ---------- */
:root[data-theme="lagune"] {
  --color-paper: #eef5f1;
  --color-paper-2: #dfece6;
  --color-card: #fbfdfc;
  --color-note: #fff4ec;
  --color-line: #cfe0d8;
  --color-line-strong: #9fbdb3;
  --color-ink: #17302d;
  --color-ink-soft: #3f5753;
  --color-ink-mute: #4f6662;
  --color-green: #0d5953;
  --color-green-deep: #073b38;
  --color-green-soft: #24786f;
  --color-green-wash: #d6ece6;
  --color-accent: #c4402b;
  --color-accent-hover: #a8321f;
  --color-accent-text: #b03722;
  --color-accent-soft: #ff9a7f;
  --color-accent-wash: #ffe3da;
  --color-on-dark: #eef8f4;
  --color-tape: rgba(255, 154, 127, 0.55);
  --color-info-wash: #e2f1ec;
  --color-info-line: #b9d8cd;
  --brand-sun: #ff7a5c;

  --font-display: "Young Serif", Georgia, serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-hand: "Caveat Brush", "Segoe Script", cursive;
  --weight-display: 400;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(7, 59, 56, 0.08);
  --shadow-md: 0 18px 40px -12px rgba(7, 59, 56, 0.25);
  --shadow-paper: 0 14px 34px -16px rgba(7, 59, 56, 0.35);
  --shadow-btn: 0 10px 24px -10px rgba(196, 64, 43, 0.6);
  --bg-atmosphere:
    radial-gradient(120% 60% at 100% 0%, rgba(36, 120, 111, 0.13), transparent 60%),
    radial-gradient(80% 50% at 0% 100%, rgba(255, 154, 127, 0.18), transparent 60%);
}
[data-theme="lagune"] { font-synthesis-weight: none; }
[data-theme="lagune"] h1, [data-theme="lagune"] h2 { letter-spacing: -0.01em; }
[data-theme="lagune"] .hero__accent { font-style: normal; color: var(--color-accent-text); }
[data-theme="lagune"] .eyebrow { font-weight: 400; font-size: 1.5rem; }
[data-theme="lagune"] .polaroid { border-radius: 6px; }
[data-theme="lagune"] .how__num { border-style: solid; border-width: 0; background: var(--color-accent-wash); }

/* ---------- Crépuscule : éditorial, prune / grenadine / abricot ---------- */
:root[data-theme="crepuscule"] {
  --color-paper: #f8f1ec;
  --color-paper-2: #f0e3dc;
  --color-card: #fffaf7;
  --color-note: #fdeee3;
  --color-line: #e9d9d0;
  --color-line-strong: #c9b2b8;
  --color-ink: #2a1f2d;
  --color-ink-soft: #5a4b5d;
  --color-ink-mute: #685a6b;
  --color-green: #4d1f53;
  --color-green-deep: #2b1130;
  --color-green-soft: #7b4381;
  --color-green-wash: #f1e4f1;
  --color-accent: #b8235a;
  --color-accent-hover: #9b1a4a;
  --color-accent-text: #a51f51;
  --color-accent-soft: #f6a472;
  --color-accent-wash: #fde3d3;
  --color-on-dark: #fbf1ea;
  --color-tape: rgba(246, 164, 114, 0.55);
  --color-info-wash: #f3e9f3;
  --color-info-line: #dcc7dd;
  --brand-sun: #f6a472;

  --font-display: "Gloock", "Times New Roman", serif;
  --font-body: "Albert Sans", system-ui, sans-serif;
  --font-hand: "Kalam", "Segoe Script", cursive;
  --weight-display: 400;
  --text-hero: clamp(2.5rem, 1.3rem + 5vw, 5rem);

  --radius-sm: 2px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-btn: 4px;
  --shadow-sm: 0 1px 0 var(--color-line);
  --shadow-md: 0 24px 48px -24px rgba(43, 17, 48, 0.35);
  --shadow-paper: 0 1px 0 var(--color-line-strong), 0 20px 40px -24px rgba(43, 17, 48, 0.4);
  --shadow-btn: 0 8px 20px -10px rgba(184, 35, 90, 0.7);
  --bg-atmosphere:
    radial-gradient(circle at 85% -10%, rgba(246, 164, 114, 0.3), transparent 45%),
    radial-gradient(circle at -10% 90%, rgba(123, 67, 129, 0.12), transparent 45%);
}
[data-theme="crepuscule"] { font-synthesis-weight: none; }
[data-theme="crepuscule"] h1 { letter-spacing: -0.015em; line-height: 1.02; }
[data-theme="crepuscule"] .hero__accent { font-style: normal; color: var(--color-accent-text); }
[data-theme="crepuscule"] .eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid currentColor;
}
[data-theme="crepuscule"] .how__num { border: 1px solid var(--color-green); border-radius: 0; transform: none; color: var(--color-green); background: transparent; }
[data-theme="crepuscule"] .how__step:last-child .how__num { background: var(--color-green); color: var(--color-on-dark); }
[data-theme="crepuscule"] .why__list { border-top-width: 3px; }

/* Unbounded est très large : marque et titres resserrés sur petit écran */
[data-theme="riso"] .brand__name { font-size: 1.02rem; letter-spacing: -0.02em; }
@media (max-width: 520px) { [data-theme="riso"] .brand__name { font-size: 0.92rem; } }
[data-theme="riso"] h1, [data-theme="riso"] h2, [data-theme="riso"] .step__title { overflow-wrap: break-word; hyphens: auto; }