/* ============================================================
   AVANT D'Y CROIRE — design system « papier & surligneur »
   Direction artistique : une page d'entraînement annotée à la main.
   Papier crème teinté · encre bleu nuit · jaune surligneur ·
   soulignés ondulés · tampons · ombres dures façon impression.
   Zéro dépendance. Propriétés logiques (RTL-ready). Mobile-first.
   ============================================================ */

/* ---------- Polices embarquées (OFL) ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin-900-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin-600-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext-900-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens — thémables (clair / nuit d'encre / auto) ---------- */
:root {
  /* Papier & encre — neutres teintés chauds, jamais de gris pur */
  --paper: #faf5ea;
  --paper-deep: #f2ead8;
  --paper-edge: #e6dcc3;
  --ink: #22304a;
  --ink-soft: #4a5570;
  --ink-faint: #6c6959;
  --line: #d8cdb2;

  /* Le surligneur */
  --hl: #ffd84d;
  --hl-soft: #ffe994;
  --on-hl: #22304a;              /* texte posé sur du jaune, quel que soit le thème */
  --mark-a: #ffd84d;             /* trait de surligneur dans le texte */
  --mark-b: #ffe994;

  /* Action (encre chaude) */
  --act: #d95f2b;
  --act-deep: #b34a1d;

  /* Verdicts du quiz — jamais dominants */
  --ok: #2b7656;
  --ok-paper: #e4f0e6;
  --ko: #b0432f;
  --ko-paper: #f7e6dd;

  /* Surfaces sémantiques */
  --bar-bg: #22304a;             /* bandeau de langues */
  --bar-fg: #faf5ea;
  --foot-bg: #22304a;            /* pied de page */
  --foot-fg: #faf5ea;
  --grain: rgba(34, 48, 74, 0.025);
  --shadow-ink: rgba(34, 48, 74, 0.14);
  --shadow-ink-strong: rgba(34, 48, 74, 0.18);
  --note-hl-bg: #fdf0e7;
  color-scheme: light;

  /* Typo par défaut (latin) — surchargée par langue plus bas */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  /* Échelle fluide (ratio ~1.25) */
  --t-xs: clamp(0.8rem, 0.78rem + 0.12vw, 0.875rem);
  --t-s: clamp(0.94rem, 0.9rem + 0.2vw, 1.05rem);
  --t-base: clamp(1.06rem, 1rem + 0.3vw, 1.19rem);
  --t-l: clamp(1.3rem, 1.2rem + 0.5vw, 1.55rem);
  --t-xl: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --t-2xl: clamp(2rem, 1.7rem + 1.7vw, 2.9rem);
  --t-3xl: clamp(2.5rem, 2rem + 2.8vw, 4rem);

  /* Espacement strict 4/8/12/16/24/32/48/64/96 */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem;

  --radius: 4px;
  --shadow-hard: 5px 5px 0 var(--shadow-ink);
  --shadow-hard-hover: 7px 7px 0 var(--shadow-ink-strong);
  --speed: 180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Le souligné ondulé — LA signature */
  --squiggle-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 5.5 Q 3.5 1.5 7 5.5 T 14 5.5 T 21 5.5 T 28 5.5' fill='none' stroke='%2322304a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --squiggle-hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 5.5 Q 3.5 1.5 7 5.5 T 14 5.5 T 21 5.5 T 28 5.5' fill='none' stroke='%23ffd84d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --squiggle-act: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 5.5 Q 3.5 1.5 7 5.5 T 14 5.5 T 21 5.5 T 28 5.5' fill='none' stroke='%23d95f2b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Thème « nuit d'encre » ----------
   Même papier, éteint : bleus nuit teintés chauds, jamais de gris pur ni de violet.
   Le jaune surligneur reste la signature. Deux points d'entrée :
   choix explicite [data-theme="dark"], ou réglage système en mode auto. */
[data-theme="dark"] {
  --paper: #1a2130;
  --paper-deep: #222a3d;
  --paper-edge: #2c3448;
  --ink: #ece4d0;
  --ink-soft: #bcb49e;
  --ink-faint: #9b937d;
  --line: #3a4258;
  --hl: #f5c832;
  --hl-soft: rgba(245, 200, 50, 0.24);
  --on-hl: #1a2130;
  --mark-a: rgba(245, 200, 50, 0.42);
  --mark-b: rgba(245, 200, 50, 0.28);
  --act: #f08050;
  --act-deep: #ffa47e;
  --ok: #74c29c;
  --ok-paper: #21382e;
  --ko: #e2907a;
  --ko-paper: #3d2823;
  --bar-bg: #10151f;
  --bar-fg: #ece4d0;
  --foot-bg: #10151f;
  --foot-fg: #ece4d0;
  --grain: rgba(236, 228, 208, 0.03);
  --shadow-ink: rgba(0, 0, 0, 0.4);
  --shadow-ink-strong: rgba(0, 0, 0, 0.5);
  --note-hl-bg: #33271f;
  color-scheme: dark;
  --squiggle-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 5.5 Q 3.5 1.5 7 5.5 T 14 5.5 T 21 5.5 T 28 5.5' fill='none' stroke='%23ece4d0' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --squiggle-hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 5.5 Q 3.5 1.5 7 5.5 T 14 5.5 T 21 5.5 T 28 5.5' fill='none' stroke='%23f5c832' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --squiggle-act: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 5.5 Q 3.5 1.5 7 5.5 T 14 5.5 T 21 5.5 T 28 5.5' fill='none' stroke='%23f08050' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --paper: #1a2130;
    --paper-deep: #222a3d;
    --paper-edge: #2c3448;
    --ink: #ece4d0;
    --ink-soft: #bcb49e;
    --ink-faint: #9b937d;
    --line: #3a4258;
    --hl: #f5c832;
    --hl-soft: rgba(245, 200, 50, 0.24);
    --on-hl: #1a2130;
    --mark-a: rgba(245, 200, 50, 0.42);
    --mark-b: rgba(245, 200, 50, 0.28);
    --act: #f08050;
    --act-deep: #ffa47e;
    --ok: #74c29c;
    --ok-paper: #21382e;
    --ko: #e2907a;
    --ko-paper: #3d2823;
    --bar-bg: #10151f;
    --bar-fg: #ece4d0;
    --foot-bg: #10151f;
    --foot-fg: #ece4d0;
    --grain: rgba(236, 228, 208, 0.03);
    --shadow-ink: rgba(0, 0, 0, 0.4);
    --shadow-ink-strong: rgba(0, 0, 0, 0.5);
    --note-hl-bg: #33271f;
    color-scheme: dark;
    --squiggle-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 5.5 Q 3.5 1.5 7 5.5 T 14 5.5 T 21 5.5 T 28 5.5' fill='none' stroke='%23ece4d0' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    --squiggle-hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 5.5 Q 3.5 1.5 7 5.5 T 14 5.5 T 21 5.5 T 28 5.5' fill='none' stroke='%23f5c832' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --squiggle-act: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 5.5 Q 3.5 1.5 7 5.5 T 14 5.5 T 21 5.5 T 28 5.5' fill='none' stroke='%23f08050' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* ---------- Contraste élevé (réglage du pupitre) ---------- */
[data-contrast="high"] {
  --ink: #000000;
  --ink-soft: #1c1c1c;
  --ink-faint: #3d3a30;
  --paper: #ffffff;
  --paper-deep: #f4f0e4;
  --line: #55503f;
  --act: #a83c0f;
  --act-deep: #7c2c0a;
  --ok: #135c3d;
  --ko: #8f2c1a;
  --bar-bg: #000000;
  --foot-bg: #000000;
  --shadow-ink: rgba(0, 0, 0, 0.3);
}
[data-theme="dark"][data-contrast="high"] {
  --ink: #ffffff;
  --ink-soft: #efe9da;
  --ink-faint: #cfc8b4;
  --paper: #000000;
  --paper-deep: #14181f;
  --line: #8b8672;
  --act: #ffa477;
  --act-deep: #ffc4a6;
  --ok: #8fe0b8;
  --ko: #ffb49e;
  --bar-bg: #14181f;
  --foot-bg: #14181f;
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:not([data-theme="light"]):not([data-theme="dark"]) {
    --ink: #ffffff;
    --ink-soft: #efe9da;
    --ink-faint: #cfc8b4;
    --paper: #000000;
    --paper-deep: #14181f;
    --line: #8b8672;
    --act: #ffa477;
    --act-deep: #ffc4a6;
    --ok: #8fe0b8;
    --ko: #ffb49e;
    --bar-bg: #14181f;
    --foot-bg: #14181f;
  }
}

/* Stacks par script — les 7 langues. Le latin garde l'identité embarquée,
   les autres scripts reçoivent les meilleures familles natives du système. */
:lang(ar) {
  --font-display: "Segoe UI", "Noto Naskh Arabic", "Geeza Pro", "Amiri", serif;
  --font-body: "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}
:lang(zh) {
  --font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
:lang(hi) {
  --font-display: "Nirmala UI", "Noto Sans Devanagari", "Mangal", sans-serif;
  --font-body: "Nirmala UI", "Noto Sans Devanagari", "Mangal", sans-serif;
}
:lang(bn) {
  --font-display: "Nirmala UI", "Noto Sans Bengali", "Vrinda", sans-serif;
  --font-body: "Nirmala UI", "Noto Sans Bengali", "Vrinda", sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  /* Grain de papier discret */
  background-image: radial-gradient(var(--grain) 1px, transparent 1px);
  background-size: 22px 22px;
}

::selection { background: var(--hl); color: var(--on-hl); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-l); }

p, ul, ol { margin: 0 0 var(--s-4); }
li { margin-block-end: var(--s-2); }

a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--act);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
a:hover { color: var(--act-deep); text-decoration-color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--act);
  outline-offset: 2px;
  border-radius: 2px;
}

img, svg { max-width: 100%; height: auto; }

hr {
  border: none;
  height: 8px;
  background: var(--squiggle-ink) repeat-x center / 28px 8px;
  opacity: 0.35;
  margin: var(--s-8) 0;
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  background: var(--paper-deep);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}

/* Lisibilité : longueur de ligne maîtrisée */
.prose { max-width: 68ch; }
.prose h2 { margin-block-start: var(--s-12); }
.prose h3 { margin-block-start: var(--s-8); }

/* ---------- Signatures graphiques ---------- */

/* Souligné ondulé sous un titre */
.squiggle {
  display: block;
  width: 112px;
  height: 8px;
  background: var(--squiggle-act) repeat-x center / 28px 8px;
  border: none;
  opacity: 1;
  margin: var(--s-3) 0 var(--s-6);
}

/* Surlignage au marqueur */
.mark, mark {
  background: transparent;
  background-image: linear-gradient(100deg, transparent 2%, var(--mark-a) 3%, var(--mark-b) 97%, transparent 98%);
  background-size: 100% 62%;
  background-position: 0 68%;
  background-repeat: no-repeat;
  padding: 0 0.15em;
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Tampon */
.stamp {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 3px solid currentColor;
  border-radius: 6px;
  padding: 0.15em 0.6em;
  transform: rotate(-2.5deg);
  color: var(--ink);
}
.stamp--ok { color: var(--ok); }
.stamp--ko { color: var(--ko); }
.stamp--hl { color: var(--act-deep); }

/* Numéro de réflexe — gros chiffre au pochoir */
.bignum {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 2rem + 3vw, 4.4rem);
  line-height: 1;
  color: var(--paper);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--hl);
}

/* ---------- Layout ---------- */
.wrap {
  width: min(100% - 2 * var(--s-4), 72rem);
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2 * var(--s-4), 46rem); }

.section { padding-block: var(--s-12); }
.section--deep {
  background: var(--paper-deep);
  border-block: 2px solid var(--line);
}

/* Skip link */
.skip {
  position: absolute;
  inset-inline-start: var(--s-2);
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius);
  transition: top var(--speed) var(--ease);
}
.skip:focus { top: var(--s-2); }

/* ---------- Header ---------- */
.site-head {
  border-block-end: 2px solid var(--ink);
  background: var(--paper);
  position: relative;
}
.site-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  flex-wrap: wrap;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-l);
  line-height: 1;
  letter-spacing: -0.01em;
}
.logo:hover { color: var(--ink); }
.logo svg { flex: none; }
.logo__word {
  background: var(--squiggle-hl) repeat-x left bottom / 28px 8px;
  padding-block-end: 8px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-wrap: wrap;
}
.nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-s);
  color: var(--ink);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background var(--speed) var(--ease);
}
.nav a:hover { background: var(--paper-deep); }
.nav a[aria-current="page"] {
  background: var(--squiggle-act) repeat-x left bottom / 28px 8px;
  border-radius: 0;
}
.nav a.nav__cta {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--hl);
  margin-inline-start: var(--s-2);
}
.nav a.nav__cta:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--hl);
}

/* Menu mobile */
.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
}
@media (max-width: 52rem) {
  .nav-toggle { display: inline-flex; align-items: center; gap: var(--s-2); }
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-block: var(--s-3);
    border-block-start: 1px dashed var(--line);
  }
  .nav.is-open { display: flex; }
  .nav a { min-height: 48px; }
  .nav a.nav__cta { margin-inline-start: 0; justify-content: center; }
}
/* Sans JS : le menu reste visible */
.no-js .nav { display: flex !important; }
.no-js .nav-toggle { display: none !important; }

/* Bandeau langue */
.langbar {
  background: var(--bar-bg);
  color: var(--bar-fg);
  font-size: var(--t-xs);
}
.langbar__in {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  padding-block: var(--s-1);
  flex-wrap: wrap;
}
.langbar a {
  color: var(--bar-fg);
  text-decoration: none;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius);
  opacity: 0.75;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.langbar a:hover { opacity: 1; background: rgba(250, 245, 234, 0.12); }
.langbar a[aria-current="true"] {
  opacity: 1;
  font-weight: 700;
  background: var(--hl);
  color: var(--on-hl);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  font: 700 var(--t-base) var(--font-body);
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard-hover); color: var(--paper); }
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--shadow-ink); }
.btn--hl {
  background: var(--hl);
  color: var(--ink);
  border-color: var(--ink);
}
.btn--hl:hover { color: var(--ink); background: var(--hl-soft); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--paper-deep); box-shadow: none; }
.btn--big { font-size: var(--t-l); padding: var(--s-4) var(--s-8); }

/* ---------- Cartes ---------- */
.card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: var(--s-6);
}
a.card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
a.card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard-hover); }

.grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}

/* Liste des réflexes : rythme alterné, pas de cartes uniformes */
.reflex-list { list-style: none; padding: 0; margin: 0; }
.reflex-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4) var(--s-6);
  align-items: start;
  padding-block: var(--s-6);
  border-block-end: 1px dashed var(--line);
}
.reflex-item:nth-child(even) .bignum { text-shadow: 4px 4px 0 var(--act); }
.reflex-item h3 { margin-block-end: var(--s-2); }
.reflex-item p { margin-block-end: var(--s-2); color: var(--ink-soft); }

/* ---------- Hero ---------- */
.hero { padding-block: var(--s-16) var(--s-12); position: relative; overflow: hidden; }
.hero h1 { max-width: 22ch; }
.hero .lead {
  font-size: var(--t-l);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 44ch;
}
.hero__actions {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-block-start: var(--s-8);
}
.hero__note { font-size: var(--t-s); color: var(--ink-faint); margin-block-start: var(--s-3); }
.hero__art { margin-block-start: var(--s-8); }

/* Ticker de preuve (accueil) */
.proof-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-8);
  padding: var(--s-4) 0;
  border-block: 2px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-s);
}
.proof-line strong { font-weight: 900; font-size: var(--t-l); margin-inline-end: var(--s-2); }

/* ---------- Quiz ---------- */
.quiz-shell { max-width: 46rem; margin-inline: auto; }

.quiz-setup fieldset {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-6) var(--s-6);
  margin-block-end: var(--s-6);
  background: var(--paper);
}
.quiz-setup legend {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-l);
  padding-inline: var(--s-2);
}
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font: 700 var(--t-s) var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.chip:hover { transform: translateY(-1px); background: var(--paper-deep); }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.chip:has(input:checked), .chip.is-checked { background: var(--hl); color: var(--on-hl); box-shadow: 2px 2px 0 var(--shadow-ink); }
.chip:has(input:focus-visible) { outline: 3px solid var(--act); outline-offset: 2px; }

/* Progression : un fil ondulé qui se remplit */
.quiz-progress {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block-end: var(--s-6);
}
.quiz-progress__track {
  flex: 1;
  height: 10px;
  background: var(--squiggle-ink) repeat-x center / 28px 8px;
  opacity: 0.25;
  position: relative;
  border-radius: 5px;
}
.quiz-progress__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--squiggle-act) repeat-x center / 28px 8px;
  opacity: 1;
  transition: width 300ms var(--ease);
}
.quiz-progress__label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-base);
  white-space: nowrap;
}

.case-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: var(--s-6);
  position: relative;
}
.case-card__meta {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-block-end: var(--s-4);
  font-size: var(--t-xs);
}
.tag {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--ink-soft);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.15em 0.7em;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tag--level { border-style: dashed; }

.case-card__situation {
  font-size: var(--t-base);
  border-inline-start: 4px solid var(--hl);
  padding-inline-start: var(--s-4);
  margin-block-end: var(--s-6);
  white-space: pre-line;
}
.case-card__question {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-l);
  margin-block-end: var(--s-4);
}

.answers { display: grid; gap: var(--s-3); list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.answer-btn {
  width: 100%;
  text-align: start;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  font: 400 var(--t-base) var(--font-body);
  color: var(--ink);
  cursor: pointer;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.answer-btn:hover:not(:disabled) { background: var(--hl-soft); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shadow-ink); }
.answer-btn:disabled { cursor: default; }
.answer-btn .answer-key {
  flex: none;
  font-family: var(--font-display);
  font-weight: 900;
  border: 2px solid currentColor;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.answer-btn.is-correct { background: var(--ok-paper); border-color: var(--ok); color: var(--ok); font-weight: 700; }
.answer-btn.is-wrong { background: var(--ko-paper); border-color: var(--ko); color: var(--ko); }
.answer-btn.is-faded { opacity: 0.45; }

.feedback {
  border: 2px dashed var(--ink);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-6);
  background: var(--paper-deep);
  animation: feedback-in 240ms var(--ease);
}
.feedback__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-3);
}
.feedback__reflex {
  margin-block-start: var(--s-3);
  font-size: var(--t-s);
}
.feedback__reflex a { font-weight: 700; }
@keyframes feedback-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.quiz-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  margin-block-start: var(--s-6);
  flex-wrap: wrap;
}

/* Résultat */
.result-card {
  text-align: center;
  padding: var(--s-12) var(--s-6);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-hard);
  position: relative;
  overflow: hidden;
}
.result-card .bignum { font-size: clamp(3.5rem, 3rem + 4vw, 6rem); }
.result-card h2 { margin-block-start: var(--s-4); }
.result-verdict { font-size: var(--t-l); color: var(--ink-soft); max-width: 38ch; margin-inline: auto; }
.result-actions {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-block-start: var(--s-8);
}
.result-detail { margin-block-start: var(--s-8); text-align: start; }

/* Confetti sobres (désactivés si reduced motion) */
.result-card .confetti {
  position: absolute;
  width: 10px; height: 14px;
  top: -20px;
  animation: confetti-fall 1600ms var(--ease) forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

/* ---------- Bibliothèque de cas (sans JS) ---------- */
.case-lib details {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 0;
  margin-block-end: var(--s-4);
  box-shadow: 3px 3px 0 var(--shadow-ink);
}
.case-lib summary {
  cursor: pointer;
  padding: var(--s-4) var(--s-6);
  font-weight: 700;
  list-style: none;
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
}
.case-lib summary::-webkit-details-marker { display: none; }
.case-lib summary::before {
  content: "+";
  font-family: var(--font-display);
  font-weight: 900;
  flex: none;
  color: var(--act);
}
.case-lib details[open] summary::before { content: "–"; }
.case-lib .case-lib__body { padding: 0 var(--s-6) var(--s-6); }

/* ---------- Recherche ---------- */
.search-box { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.search-box input[type="search"] {
  flex: 1;
  min-width: 14rem;
  min-height: 48px;
  font: 400 var(--t-base) var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-4);
}
.search-box input[type="search"]:focus-visible { outline-offset: 0; }
.search-results { list-style: none; padding: 0; margin-block-start: var(--s-6); }
.search-results li {
  padding: var(--s-4);
  border-block-end: 1px dashed var(--line);
}
.search-results .result-kind {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- FAQ ---------- */
.faq details {
  border-block-end: 1px dashed var(--line);
  padding-block: var(--s-3);
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-l);
  list-style: none;
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  padding-block: var(--s-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "?";
  font-weight: 900;
  color: var(--act);
  flex: none;
}
.faq details[open] summary::before { content: "!"; color: var(--ok); }
.faq .faq__body { padding-block: var(--s-2) var(--s-4); max-width: 68ch; }

/* ---------- Impact / chiffres ---------- */
.figures {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  margin-block: var(--s-8);
}
.figure {
  border-block-start: 6px solid var(--hl);
  padding-block-start: var(--s-3);
}
.figure strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-2xl);
  line-height: 1;
}
.figure span { color: var(--ink-soft); font-size: var(--t-s); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
th, td { border: 1px solid var(--line); padding: var(--s-2) var(--s-3); text-align: start; }
th { background: var(--paper-deep); font-family: var(--font-display); }

/* ---------- Encadrés ---------- */
.note {
  border: 2px dashed var(--ink-soft);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-6);
  background: var(--paper-deep);
  margin-block: var(--s-6);
}
.note--hl { border-color: var(--act); background: var(--note-hl-bg); }

/* ---------- Footer ---------- */
.site-foot {
  margin-block-start: var(--s-16);
  border-block-start: 2px solid var(--ink);
  background: var(--foot-bg);
  color: var(--foot-fg);
  font-size: var(--t-s);
}
.site-foot a { color: var(--foot-fg); text-decoration-color: var(--hl); }
.site-foot a:hover { color: var(--hl); }
.site-foot__grid {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  padding-block: var(--s-12);
}
.site-foot h2 {
  font-size: var(--t-base);
  color: var(--hl);
  margin-block-end: var(--s-3);
}
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-block-end: var(--s-2); }
.site-foot__legal {
  border-block-start: 1px solid rgba(250, 245, 234, 0.25);
  padding-block: var(--s-4);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  opacity: 0.85;
}

/* ---------- 404 ---------- */
.lost { text-align: center; padding-block: var(--s-24); }
.lost .bignum { font-size: clamp(4rem, 3rem + 6vw, 8rem); }

/* ---------- Divers ---------- */
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--t-s); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.copy-ok { color: var(--ok); font-weight: 700; }

.toolbar {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-block: var(--s-6);
}

/* Pagination prev/next */
.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-start: var(--s-12);
  flex-wrap: wrap;
}
.pager a {
  flex: 1;
  min-width: 12rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  text-decoration: none;
  transition: background var(--speed) var(--ease);
}
.pager a:hover { background: var(--hl-soft); }
.pager .pager__dir { display: block; font-size: var(--t-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.pager .pager__next { text-align: end; }

/* ---------- RTL : ajustements fins ---------- */
[dir="rtl"] .stamp { transform: rotate(2.5deg); }
[dir="rtl"] .mark { background-image: linear-gradient(-100deg, transparent 2%, var(--mark-a) 3%, var(--mark-b) 97%, transparent 98%); }

/* ============================================================
   LE PUPITRE — panneau latéral universel de réglages
   ============================================================ */

/* Préférences de lecture (attributs posés sur <html> par le pupitre) */
[data-fontsize="l"] { font-size: 112.5%; }
[data-fontsize="xl"] { font-size: 125%; }

[data-spacing="wide"] body { line-height: 1.9; letter-spacing: 0.012em; word-spacing: 0.08em; }
[data-spacing="wide"] p, [data-spacing="wide"] ul, [data-spacing="wide"] ol { margin-block-end: var(--s-6); }
[data-spacing="wide"] li { margin-block-end: var(--s-3); }

[data-links="marked"] main a:not(.btn):not(.chip):not(.card),
[data-links="marked"] .site-foot a {
  background: var(--hl-soft);
  text-decoration-thickness: 3px;
  padding-inline: 2px;
}

[data-reading="on"] .deco,
[data-reading="on"] .hero__art,
[data-reading="on"] .proof-line { display: none !important; }
[data-reading="on"] main .wrap,
[data-reading="on"] main .wrap--narrow { width: min(100% - 2 * var(--s-4), 44rem); }
[data-reading="on"] main { font-size: 1.06em; }

[data-motion="reduce"] html { scroll-behavior: auto; }
[data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
[data-motion="reduce"] .result-card .confetti { display: none; }

/* L'onglet flottant — un marque-page qui dépasse du bord */
.pupitre-fab {
  position: fixed;
  inset-inline-end: 0;
  top: 55%;
  transform: translateY(-50%);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-inline-end: none;
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
  box-shadow: -3px 3px 0 var(--shadow-ink);
  cursor: pointer;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.pupitre-fab:hover {
  transform: translateY(-50%) translateX(-3px);
  box-shadow: -5px 5px 0 var(--shadow-ink-strong);
}
/* RTL : l'onglet passe sur le bord gauche — on miroite ombre et soulèvement */
[dir="rtl"] .pupitre-fab { box-shadow: 3px 3px 0 var(--shadow-ink); }
[dir="rtl"] .pupitre-fab:hover {
  transform: translateY(-50%) translateX(3px);
  box-shadow: 5px 5px 0 var(--shadow-ink-strong);
}
.pupitre-fab svg { width: 24px; height: 24px; }
.no-js .pupitre-fab { display: none; }

.pupitre-backdrop {
  position: fixed;
  inset: 0;
  z-index: 61;
  background: rgba(16, 21, 31, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease), visibility 0s linear 220ms;
}
.pupitre-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms var(--ease);
}

/* Le volet — une fiche cartonnée qui coulisse */
.pupitre {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 62;
  width: min(24rem, 94vw);
  background: var(--paper);
  border-inline-start: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 220ms var(--ease), visibility 0s linear 220ms;
}
[dir="rtl"] .pupitre { transform: translateX(-100%); }
.pupitre.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 220ms var(--ease);
}
.pupitre__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-block-end: 2px solid var(--ink);
  background: var(--paper-deep);
}
.pupitre__head h2 {
  font-size: var(--t-l);
  margin: 0;
  background: var(--squiggle-hl) repeat-x left bottom / 28px 8px;
  padding-block-end: 8px;
}
.pupitre__close {
  background: none;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  font: 900 var(--t-base) var(--font-display);
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: background var(--speed) var(--ease);
}
.pupitre__close:hover { background: var(--hl); color: var(--on-hl); }

.pupitre__body {
  overflow-y: auto;
  padding: var(--s-2) var(--s-6) var(--s-8);
  flex: 1;
  overscroll-behavior: contain;
}
.pupitre__section { padding-block: var(--s-4); border-block-end: 1px dashed var(--line); }
.pupitre__section:last-child { border-block-end: none; }
.pupitre__section > h3 {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  margin-block-end: var(--s-3);
}
.pupitre__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-2);
  flex-wrap: wrap;
}
.pupitre__row > .pupitre__label { font-weight: 700; font-size: var(--t-s); }

/* Contrôle segmenté */
.seg { display: inline-flex; gap: var(--s-1); flex-wrap: wrap; }
.seg__btn {
  min-height: 40px;
  min-width: 44px;
  padding: var(--s-1) var(--s-3);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 700 var(--t-xs) var(--font-body);
  cursor: pointer;
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.seg__btn:hover { background: var(--paper-deep); transform: translateY(-1px); }
.seg__btn[aria-pressed="true"], .seg__btn.is-on {
  background: var(--hl);
  color: var(--on-hl);
  box-shadow: 2px 2px 0 var(--shadow-ink);
}

/* Langues dans le pupitre */
.pupitre__langs { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.pupitre__langs a {
  text-decoration: none;
  font-size: var(--t-xs);
  font-weight: 700;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: var(--s-1) var(--s-3);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  transition: background var(--speed) var(--ease);
}
.pupitre__langs a:hover { background: var(--paper-deep); }
.pupitre__langs a[aria-current="true"] { background: var(--hl); color: var(--on-hl); border-color: var(--ink); }

/* Lecture audio */
.pupitre__speech-status {
  font-size: var(--t-xs);
  color: var(--ink-soft);
  min-height: 1.4em;
  margin-block-start: var(--s-2);
}

/* Liens d'action du pupitre */
.pupitre__list { list-style: none; padding: 0; margin: 0; }
.pupitre__list li { margin: 0; }
.pupitre__list a, .pupitre__list button {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-2);
  border: none;
  background: none;
  color: var(--ink);
  font: 400 var(--t-s) var(--font-body);
  text-align: start;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--speed) var(--ease);
}
.pupitre__list a:hover, .pupitre__list button:hover { background: var(--paper-deep); }
.pupitre__list svg { flex: none; width: 18px; height: 18px; opacity: 0.8; }

.pupitre__danger { color: var(--ko) !important; font-weight: 700 !important; }
.pupitre__danger:hover { background: var(--ko-paper) !important; }

.pupitre__foot {
  border-block-start: 2px solid var(--ink);
  padding: var(--s-3) var(--s-6);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  background: var(--paper-deep);
}

/* Dialog d'aide (raccourcis clavier) */
.help-dialog {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-8);
  max-width: min(30rem, 92vw);
}
.help-dialog::backdrop { background: rgba(16, 21, 31, 0.45); }
.help-dialog h2 { font-size: var(--t-l); }
.help-dialog table { margin-block-start: var(--s-4); }
kbd {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.85em;
  border: 1.5px solid var(--ink-soft);
  border-radius: 4px;
  padding: 0.1em 0.5em;
  box-shadow: 1px 2px 0 var(--shadow-ink);
  background: var(--paper-deep);
  white-space: nowrap;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .result-card .confetti { display: none; }
}

/* ---------- Print (global — le livret a sa feuille dédiée) ---------- */
@media print {
  .langbar, .site-head, .site-foot, .toolbar, .nav-toggle, .skip, .no-print,
  .pupitre, .pupitre-fab, .pupitre-backdrop, .help-dialog { display: none !important; }
  body { background: white; color: black; font-size: 11pt; }
  a { color: black; text-decoration: none; }
  .card, .case-card, .result-card { box-shadow: none; border-width: 1.5pt; break-inside: avoid; }
  .case-lib details { box-shadow: none; break-inside: avoid; }
  .case-lib details > .case-lib__body { display: block; }
  h1, h2, h3 { break-after: avoid; }
}

/* ============================================================
   VAGUE 2 (2026-07-22) — PHOTOS + MODULES ÉDITORIAUX + BLOG
   Photos libres de droits fondues dans la DA sans outil d'image :
   duotone par mix-blend-mode sur une base encre FIXE (rendu identique
   en clair comme en sombre : un parti pris « photo imprimée »).
   ============================================================ */

/* ---------- La photo : cadre imprimé + duotone encre/surligneur ---------- */
.photo {
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  position: relative;
  background: #22304a;            /* base encre fixe : socle du duotone */
  line-height: 0;
  isolation: isolate;
}
.photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.06) brightness(1.03);
  mix-blend-mode: luminosity;
  opacity: 0.92;
}
/* voile chaud (surligneur + encre chaude) : relie la photo au reste de la DA */
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(217, 95, 43, 0.5), rgba(255, 216, 77, 0.3) 62%, transparent);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Panneau : basculé comme une photo punaisée sur la page */
.photo--panel { transform: rotate(-1deg); }
[dir="rtl"] .photo--panel { transform: rotate(1deg); }

/* Bandeau large : hauteur maîtrisée, cadrage cover */
.photo--band { aspect-ratio: 16 / 9; margin-block: var(--s-8); }
.photo--band img { height: 100%; object-fit: cover; opacity: 0.9; }

/* Portrait : format vertical, largeur contenue */
.photo--portrait { max-width: 22rem; margin-inline: auto; }

/* ---------- Rangée image / texte (compositions alternées) ---------- */
.media-row { display: grid; gap: var(--s-6); align-items: center; margin-block: var(--s-8); }
.media-row__text > :first-child { margin-block-start: 0; }
@media (min-width: 46rem) {
  .media-row { grid-template-columns: 1fr 1fr; gap: var(--s-12); }
  .media-row--flip .photo { order: 2; }
  .media-row--portrait { grid-template-columns: 20rem 1fr; }
}

/* ---------- Cartes-conseils numérotées (enseignants) ---------- */
.tip-cards { display: grid; gap: var(--s-6); margin-block-start: var(--s-8); }
.tip-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3) var(--s-6);
  align-items: start;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
  padding: var(--s-6);
}
.tip-card .bignum { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); }
.tip-card:nth-child(even) .bignum { text-shadow: 4px 4px 0 var(--act); }
.tip-card__body h2 { font-size: var(--t-xl); margin-block: 0 var(--s-3); }
.tip-card__body ul { margin: 0; }

/* ---------- Crédits photo (page Crédits) ---------- */
.credit-list { font-size: var(--t-s); }
.credit-list li { margin-block-end: var(--s-3); }

/* ---------- Blog : liste + article ---------- */
.blog-list { display: grid; gap: var(--s-8); margin-block-start: var(--s-8); }
.blog-card {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
  overflow: hidden;
}
.blog-card__media { display: block; line-height: 0; }
.blog-card__media .photo { border: none; border-radius: 0; box-shadow: none; border-block-end: 2px solid var(--ink); margin: 0; transform: none; }
.blog-card__body { padding: var(--s-6); }
.blog-card__body h2 { font-size: var(--t-xl); margin-block: var(--s-1) var(--s-3); }
.blog-card__body h2 a { text-decoration: none; }
.blog-card__body h2 a:hover { text-decoration: underline; text-decoration-color: var(--act); }
.blog-card__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-4); }

/* Pull quote (blocs « quote » d'article) */
.pullquote {
  margin: var(--s-8) 0;
  padding-inline-start: var(--s-6);
  border-inline-start: 5px solid var(--hl);
  font-family: var(--font-display);
  font-size: var(--t-l);
  font-style: italic;
}
.pullquote p { margin: 0; }
.prose .photo--band { margin-inline: 0; }

/* ---------- Impression : photos nettes, sans traitement d'écran ---------- */
@media print {
  .photo { box-shadow: none; background: none; border-width: 1pt; transform: none; }
  .photo img { filter: none; mix-blend-mode: normal; opacity: 1; }
  .photo::after { display: none; }
  .photo--band { aspect-ratio: auto; }
  .photo--band img { height: auto; }
  .tip-card, .blog-card { box-shadow: none; break-inside: avoid; }
}