/* ============================================================================
   CLIC PAR CLIC : main.css
   Archétype D « service public numérique » composé chaleureux.
   Palette verrouillée (fiche technique §5.1), échelle d'espacement multiple
   de 8, ombres FRANCHES décalées, jamais molles. Corps en Atkinson
   Hyperlegible (police conçue pour la basse vision), titres en Unbounded 800.
   Zéro dépendance : polices locales, aucune requête vers un tiers.
   ========================================================================== */

/* ------------------------------------------------------------------ POLICES */
@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+0304, U+0308, U+0329, U+2000-206F, 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-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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-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+0304, U+0308, U+0329, U+2000-206F, 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-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* La display du projet : Unbounded (SIL OFL), expanded et arrondie. Le geste
   rassurant d'une lettre ronde, l'aplomb d'une graisse 800. Sous-ensemble
   latin seulement : le français y est entier (accents compris). */
@font-face {
  font-family: "Unbounded";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/unbounded-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/unbounded-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------- JETONS */
:root {
  --blanc: #FFFFFF;
  --glacier: #F4F6FA;
  --nuit: #14213D;
  --encre: #16233F;
  --encre-2: #3D4A66;
  --encre-3: #66718A;
  --filet: #D9DEE9;
  --accent: #0E8A5F;
  --accent-h: #0A6B4A;
  --accent-fond: #E8F5EF;
  /* Le vert du contrat sert les SURFACES, les filets, les icônes et les
     chiffres géants (ratio 4,36:1, au-dessus des 3:1 exigés pour eux).
     Tout TEXTE courant en vert prend la nuance foncée : 6,60:1, AA large. */
  --accent-txt: #0A6B4A;
  --rate: #C2410C;
  --rate-fond: #FBEFE9;

  --fond: var(--blanc);
  --fond-2: var(--glacier);
  --texte: var(--encre);
  --texte-2: var(--encre-2);
  --texte-3: var(--encre-3);
  --bord: var(--filet);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;
  --s6: 48px; --s7: 64px; --s8: 80px; --s9: 96px; --s10: 128px;

  --wrap: 1160px;
  --gout: 24px;
  --mesure: 68ch;
  --r: 6px;
  --r-appareil: 22px;
  --trait: 2px;
  --ombre: 5px 5px 0 var(--encre);
  --ombre-accent: 5px 5px 0 var(--accent);
  --ombre-courte: 3px 3px 0 var(--encre);

  --corps: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --display: "Unbounded", "Trebuchet MS", system-ui, sans-serif;
  --duree: 180ms;
}

/* thème sombre : choix explicite, ou système quand le thème est « auto » */
:root[data-theme="sombre"], :root[data-theme="auto"] {
  color-scheme: dark;
}
:root[data-theme="sombre"] {
  --fond: #0E1729; --fond-2: #16223B; --texte: #E8EDF6; --texte-2: #B9C4D8;
  --texte-3: #8E9BB4; --bord: #2C3A57; --nuit: #0A1120;
  --accent: #2FB584; --accent-h: #4CC79B; --accent-fond: #16302A; --accent-txt: #4CC79B;
  --rate: #F08A54; --rate-fond: #33211A;
  --ombre: 5px 5px 0 #000; --ombre-courte: 3px 3px 0 #000;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --fond: #0E1729; --fond-2: #16223B; --texte: #E8EDF6; --texte-2: #B9C4D8;
    --texte-3: #8E9BB4; --bord: #2C3A57; --nuit: #0A1120;
    --accent: #2FB584; --accent-h: #4CC79B; --accent-fond: #16302A; --accent-txt: #4CC79B;
    --rate: #F08A54; --rate-fond: #33211A;
    --ombre: 5px 5px 0 #000; --ombre-courte: 3px 3px 0 #000;
  }
}
:root[data-contraste="haut"] {
  --texte: #000B1F; --texte-2: #101C33; --texte-3: #23324C; --bord: #7C89A3;
  --accent: #0A6B4A; --accent-txt: #085038; --trait: 3px;
}
:root[data-contraste="haut"][data-theme="sombre"] {
  --texte: #FFFFFF; --texte-2: #E6ECF7; --texte-3: #C6D0E2; --bord: #93A2BD; --accent: #55D3A3;
}
:root[data-taille="l"] { font-size: 112.5%; }
:root[data-taille="xl"] { font-size: 125%; }
:root[data-espacement="large"] { --mesure: 60ch; }
:root[data-espacement="large"] body { line-height: 1.85; letter-spacing: .012em; }
:root[data-espacement="large"] p + p { margin-block-start: var(--s4); }
:root[data-liens="marques"] a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------- SOCLE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: clamp(1.125rem, 1.06rem + .28vw, 1.1875rem);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:root[data-animation="reduite"] * { transition: none !important; animation: none !important; }
:root[data-animation="reduite"] html { scroll-behavior: auto; }

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

/* Titres : Unbounded 800. Elle est large et ronde, donc les corps descendent
   et l'interlettrage reste presque neutre (la resserrer casserait ses formes). */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1.14;
  margin: 0 0 var(--s2);
  text-wrap: balance;
}
h1 { font-size: clamp(1.8rem, 1.1rem + 2.9vw, 2.9rem); line-height: 1.1; }
h2 { font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.1rem); }
h3 { font-size: clamp(1.05rem, 1rem + .38vw, 1.22rem); letter-spacing: -.005em; line-height: 1.25; }
h4 { font-size: 1rem; letter-spacing: 0; }
p { margin: 0 0 var(--s3); max-width: var(--mesure); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s3); padding-inline-start: var(--s3); }
strong { font-weight: 700; }
small { font-size: .875rem; }

a { color: var(--accent-txt); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent-txt); text-decoration: underline; }
::selection { background: var(--accent); color: #fff; }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saut {
  position: absolute; inset-inline-start: var(--s2); inset-block-start: -100px;
  z-index: 60; background: var(--accent); color: #fff; padding: var(--s2) var(--s3);
  font-weight: 700; border-radius: var(--r);
}
.saut:focus { inset-block-start: var(--s2); color: #fff; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gout); }
@media (max-width: 34rem) { :root { --gout: 16px; } }
/* colonne de lecture étroite, alignée à gauche sur la grille de la page */
.texte-large > * { max-width: 46rem; }
.wrap > * { min-width: 0; }

.ic { flex: 0 0 auto; vertical-align: -.18em; }
.ic--s { width: 18px; height: 18px; }
.ic--picto { width: 40px; height: 40px; stroke-width: 2; }
.ic--menu { width: 20px; height: 20px; }

/* ------------------------------------------------------- BARRE D'UTILITÉ */
.utilite {
  background: var(--nuit);
  color: #C9D3E6;
  font-size: .875rem;
  border-block-end: var(--trait) solid var(--accent);
}
.utilite__in { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; justify-content: space-between; min-height: 44px; }
.utilite__liens { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.utilite a { color: #DCE4F1; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding-block: 10px; }
.utilite a:hover { color: #fff; text-decoration: underline; }
.utilite__langue { display: flex; align-items: center; gap: 8px; margin: 0; color: #A9B7D0; }

/* ------------------------------------------------- SÉLECTEUR DE LANGUE
   En haut à droite de la barre d'utilité, à côté de la langue courante :
   l'unique retouche de DA autorisée (ordre de Mael). Aucun hex nouveau, les
   jetons GELÉS et rien d'autre : le bleu nuit de la barre, le vert de l'accent
   pour l'ouvert et le survol, les coins à 6 px, l'ombre FRANCHE décalée.
   C'est un <details> natif : il s'ouvre au clavier, il vit sans JavaScript. */
.langues { position: relative; font-size: .875rem; }
.langues__b {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  color: #DCE4F1; padding: 10px var(--s1); border-radius: var(--r);
  border: var(--trait) solid transparent; list-style: none; min-height: 44px;
}
.langues__b::-webkit-details-marker { display: none; }
.langues__b:hover { color: #fff; border-color: var(--accent); }
.langues[open] > .langues__b { color: #fff; border-color: var(--accent); }
.langues__chev { transition: transform var(--duree) ease; }
.langues[open] .langues__chev { transform: rotate(180deg); }
.langues__liste {
  position: absolute; z-index: 50; inset-inline-end: 0; inset-block-start: calc(100% + 4px);
  list-style: none; margin: 0; padding: 6px; min-width: 12rem;
  background: var(--fond); color: var(--texte);
  border: var(--trait) solid var(--encre); border-radius: var(--r);
  box-shadow: var(--ombre-courte);
}
.langues__liste a {
  display: block; padding: 10px var(--s2); min-height: 44px; border-radius: var(--r);
  color: var(--texte); text-decoration: none; font-weight: 700;
}
.langues__liste a:hover { background: var(--accent-fond); color: var(--accent-txt); text-decoration: none; }
.langues__liste a[aria-current="true"] { color: var(--accent-txt); }
.langues__liste a[aria-current="true"]::before { content: "\2713"; margin-inline-end: 8px; }
/* En petit écran le menu reste posé PAR-DESSUS : la barre ne change pas de
   hauteur en s'ouvrant, donc rien ne saute sous le doigt. Il se contente de ne
   jamais dépasser la vue. */
.langues__liste { max-width: calc(100vw - 2 * var(--gout)); }
/* Le panneau latéral relaie le même choix, en clair (le sélecteur du header
   disparaît en mode lecture, la langue reste donc toujours atteignable). */
.pupitre__langues { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pupitre__langues a {
  display: block; padding: 11px var(--s1); min-height: 48px; border-radius: var(--r);
  border: var(--trait) solid transparent; color: var(--texte); text-decoration: none; font-weight: 700;
}
.pupitre__langues a:hover { border-color: var(--accent); background: var(--accent-fond); color: var(--texte); }
.pupitre__langues a[aria-current="true"] { color: var(--accent-txt); }
.pupitre__langues a[aria-current="true"]::before { content: "\2713"; margin-inline-end: 8px; }

/* ------------------------------------------------------------------ EN-TÊTE */
.tete { background: var(--fond); border-block-end: 1px solid var(--bord); }
.tete__in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s2);
}
.wordmark { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--texte); }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark__nom { font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; }
.wordmark__sous { font-size: .8125rem; color: var(--texte-3); letter-spacing: .01em; }
.wordmark:hover .wordmark__nom { color: var(--accent-h); }
.wordmark--sombre { color: #fff; }
.wordmark--sombre .wordmark__sous { color: #A9B7D0; }
.marque { flex: 0 0 auto; }

.nav ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); list-style: none; margin: 0; padding: 0; justify-content: center; }
.nav a {
  color: var(--texte); text-decoration: none; font-weight: 700;
  padding: 10px 2px; display: inline-block; border-block-end: 3px solid transparent;
}
.nav a:hover { color: var(--accent-h); border-color: var(--accent); }
.nav a[aria-current="page"] { border-color: var(--accent); }
.tete__bascule { display: none; }

.chercher { display: flex; align-items: stretch; }
.chercher input {
  font: inherit; font-size: .9375rem; color: var(--texte); background: var(--fond);
  border: var(--trait) solid var(--bord); border-inline-end: 0;
  border-radius: var(--r) 0 0 var(--r); padding: 10px var(--s2); min-width: 11rem; min-height: 46px;
}
.chercher input::placeholder { color: var(--texte-3); }
.chercher input:focus { border-color: var(--accent); outline: none; }
.chercher button {
  font: inherit; cursor: pointer; background: var(--accent); color: #fff;
  border: var(--trait) solid var(--accent); border-radius: 0 var(--r) var(--r) 0;
  padding-inline: var(--s2); min-height: 46px; min-width: 48px;
  display: inline-flex; align-items: center; justify-content: center;
}
.chercher button:hover { background: var(--accent-h); border-color: var(--accent-h); }

/* largeurs intermédiaires : la recherche se replie sur son bouton, la
   navigation garde une seule ligne (jamais de menu qui se casse en deux) */
@media (min-width: 62.01rem) and (max-width: 79.99rem) {
  .wordmark__sous { display: none; }
  .nav a { font-size: .9375rem; }
  .chercher input { display: none; }
  .chercher button { border-radius: var(--r); }
}
@media (max-width: 62rem) {
  .tete__in { grid-template-columns: 1fr auto; }
  .tete__bascule {
    display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700;
    background: var(--fond); color: var(--texte); border: var(--trait) solid var(--texte);
    border-radius: var(--r); padding: 10px var(--s2); min-height: 48px; cursor: pointer;
  }
  .nav, .chercher { grid-column: 1 / -1; }
  .nav { display: none; }
  .nav.est-ouvert { display: block; }
  .nav ul { flex-direction: column; gap: 0; justify-content: flex-start; }
  .nav li + li { border-block-start: 1px solid var(--bord); }
  .nav a { display: block; padding: 14px 0; border: 0; }
  .chercher input { min-width: 0; flex: 1; }
}

/* ------------------------------------------------------ BANDEAU D'IDENTITÉ */
.bandeau { background: var(--fond-2); border-block-end: 1px solid var(--bord); font-size: .9375rem; }
.bandeau__in { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: baseline; padding-block: var(--s2); }
.bandeau__nom {
  font-family: var(--display); font-weight: 800; font-size: .875rem; letter-spacing: -.005em;
  color: var(--texte); border-inline-start: 4px solid var(--accent); padding-inline-start: var(--s2);
}
.bandeau__fait { color: var(--texte-2); }

/* --------------------------------------------------------------- SECTIONS */
.sec { padding-block: clamp(var(--s7), 5vw, var(--s10)); }
.sec--clair { background: var(--fond-2); }
.sec--serre { padding-block: clamp(var(--s6), 4vw, var(--s8)); }
.sec--filet { border-block: 1px solid var(--bord); padding-block: var(--s7); }
.sec--nuit { background: var(--nuit); color: #EAEFF8; }
.sec--nuit h2, .sec--nuit h3 { color: #fff; }
.sec--nuit .chapo, .sec--nuit p { color: #C9D3E6; }
.sec--nuit .surtitre { color: #8FE3C0; }
.sec--nuit a:not(.btn) { color: #8FE3C0; }
.sec--nuit .cadre-photo { border-color: #fff; box-shadow: 5px 5px 0 var(--accent); }

.sec__tete { max-width: 44rem; margin-inline: auto; text-align: center; margin-block-end: var(--s7); }
.sec__tete--gauche { margin-inline: 0; text-align: start; margin-block-end: var(--s6); }
.surtitre {
  font-family: var(--display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .045em; text-transform: uppercase; color: var(--accent-txt);
  margin: 0 0 var(--s2); display: flex; align-items: center; gap: 8px;
}
.sec__tete .surtitre { justify-content: center; }
.sec__tete--gauche .surtitre { justify-content: flex-start; }
.chapo { font-size: 1.0625em; color: var(--texte-2); }

.sec__duo { display: grid; gap: clamp(var(--s5), 4vw, var(--s8)); align-items: center; }
@media (min-width: 62rem) {
  .sec__duo { grid-template-columns: 1.05fr .95fr; }
  .sec__duo--inverse { grid-template-columns: .95fr 1.05fr; }
  .sec__img--premier { order: -1; }
}
.sec__duo + .cartes, .sec__duo + .reflexes { margin-block-start: clamp(var(--s6), 4vw, var(--s8)); }

/* ------------------------------------------------------------------ BOUTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--corps); font-weight: 700; font-size: 1.1875rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  padding: 14px var(--s3); min-height: 56px;
  border: var(--trait) solid var(--accent); border-radius: var(--r);
  background: var(--accent); color: #fff;
  transition: background var(--duree) ease, transform var(--duree) ease, box-shadow var(--duree) ease;
}
.btn:hover { background: var(--accent-h); border-color: var(--accent-h); color: #fff; }
.btn:active { transform: translate(2px, 2px); }
.btn .ic { width: 20px; height: 20px; }
.btn--accent { box-shadow: var(--ombre-courte); }
.btn--accent:hover { box-shadow: 1px 1px 0 var(--encre); }
.btn--fantome { background: transparent; color: var(--texte); border-color: var(--texte); }
.btn--fantome:hover { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.btn--sombre { color: #fff; border-color: #fff; background: transparent; }
.btn--sombre:hover { background: #fff; color: var(--nuit); border-color: #fff; }
.btn--petit { min-height: 48px; padding: 11px var(--s2); font-size: 1rem; }
/* Accessibilité AA : le vert du contrat donne 4,36:1 avec un libellé blanc, ce qui
   suffit au GRAND texte au sens WCAG (14 pt gras = 18,66 px) mais pas au texte
   courant. Le petit bouton garde donc son gabarit serré et sa hauteur de 48 px,
   mais son libellé reste à 19 px gras dès qu'il est plein accent. Aucun hex du
   contrat visuel ne change, aucune hauteur ne bouge (min-height gouverne). */
.btn--petit.btn--accent { font-size: 1.1875rem; }

/* --------------------------------------------------------------- HERO */
.hero { background: var(--nuit); color: #EAEFF8; padding-block: clamp(var(--s7), 6vw, var(--s10)); }
.hero__in { display: grid; gap: clamp(var(--s5), 4vw, var(--s8)); align-items: center; }
@media (min-width: 62rem) { .hero__in { grid-template-columns: 1.1fr .9fr; } }
.hero h1 { color: #fff; max-width: 30ch; }
.hero .surtitre { color: #8FE3C0; }
.hero .chapo { color: #C9D3E6; max-width: 46ch; }
.hero__actes { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block: var(--s5) var(--s4); }
.hero .btn--accent { box-shadow: 5px 5px 0 rgba(255, 255, 255, .22); }
.hero .btn--accent:hover { box-shadow: 2px 2px 0 rgba(255, 255, 255, .22); }
.garanties { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); list-style: none; margin: 0; padding: 0; font-size: .9375rem; color: #C9D3E6; }
.garanties li { display: flex; align-items: center; gap: 8px; }
.garanties .ic { color: #8FE3C0; }
.hero__img .figure { margin: 0; }
.hero .figure figcaption { color: #A9B7D0; }

/* ------------------------------------------------- PHOTOS : cadre à ombre franche */
.figure { margin: 0; }
.cadre-photo {
  border: var(--trait) solid var(--encre);
  border-radius: var(--r);
  box-shadow: var(--ombre-accent);
  overflow: hidden;
  background: var(--fond-2);
}
.figure figcaption {
  margin-block-start: var(--s3);
  font-size: .875rem; color: var(--texte-3);
  border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s2);
  max-width: 34rem;
}
.sec--nuit .figure figcaption { color: #A9B7D0; }
:root[data-theme="sombre"] .cadre-photo { border-color: var(--bord); }

/* --------------------------------------- FRISE D'ÉTAPES : la signature du site */
.frise { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); counter-reset: pas; }
.frise--trois { gap: var(--s5); }
@media (min-width: 56rem) { .frise--trois { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }
.frise__pas { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; align-content: start; }
.frise--trois .frise__pas { grid-template-columns: 1fr; gap: var(--s2); }
.frise__num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.9rem, 1.9rem + 4.4vw, 4.5rem);
  line-height: .9; letter-spacing: -.02em;
  color: var(--accent);
  -webkit-text-stroke: 0;
  display: block;
}
.frise--trois .frise__num { color: var(--bord); }
.sec--nuit .frise__num { color: rgba(255, 255, 255, .32); }
.frise__txt h3 { margin-block-end: var(--s1); }
.frise__consigne { color: var(--texte); }
.frise__consigne strong { color: var(--accent-txt); text-transform: uppercase; font-size: .8125rem; letter-spacing: .08em; }
.frise__quoi { color: var(--texte-2); }
.frise__pas + .frise__pas { border-block-start: 1px solid var(--bord); padding-block-start: var(--s6); }
.frise--trois .frise__pas + .frise__pas { border: 0; padding: 0; }

/* ------------------------------------------------------------------- CARTES */
.cartes { display: grid; gap: var(--s3); }
@media (min-width: 46rem) { .cartes { grid-template-columns: repeat(6, 1fr); } }
.carte {
  grid-column: span 2;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: var(--s4);
  transition: transform var(--duree) ease, box-shadow var(--duree) ease, border-color var(--duree) ease;
}
.carte--large { grid-column: span 3; }
@media (max-width: 46rem) { .carte, .carte--large { grid-column: auto; } }
.carte:hover { transform: translate(-3px, -3px); box-shadow: var(--ombre-accent); border-color: var(--encre); }
.carte__picto { display: inline-flex; color: var(--accent); margin-block-end: var(--s2); }
.carte__resume { color: var(--texte); font-weight: 700; }
.carte__detail { color: var(--texte-2); font-size: .9375em; }
.carte__gestes { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.carte__gestes li { border-block-start: 1px solid var(--bord); }
.carte__gestes a { display: block; padding-block: 12px; font-weight: 700; text-decoration: none; }
.carte__gestes a:hover { text-decoration: underline; }
.pastille {
  display: inline-block; margin: var(--s2) 0 0;
  background: var(--accent-fond); color: var(--accent-h);
  border: 1px solid var(--accent); border-radius: 4px;
  font-size: .8125rem; font-weight: 700; padding: 5px 10px;
}
:root[data-theme="sombre"] .pastille { color: var(--accent); }

/* ---------------------------------------------------------------- RÉFLEXES */
.reflexes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
@media (min-width: 52rem) { .reflexes { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s7); } }
.reflexe { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; }
.reflexe__num {
  font-family: var(--display); font-weight: 800; font-size: 2.1rem; line-height: 1;
  letter-spacing: -.02em; color: rgba(255, 255, 255, .34); min-width: 1.7ch;
}
.reflexes--clair .reflexe__num { color: var(--bord); }
.reflexe h3 { margin-block-end: 6px; }
.reflexe p { font-size: .9375em; margin: 0; }

/* -------------------------------------------------------- LISTES ET ENCARTS */
.liste-coches { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.liste-coches li { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: start; }
.liste-coches .ic { color: var(--accent); margin-block-start: .3em; }
.sec--nuit .liste-coches .ic { color: #8FE3C0; }
.liste-coches--grande li { font-size: 1.0625em; }
.encarts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.encart {
  background: var(--fond-2); border-inline-start: 4px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0; padding: var(--s3);
}
.encart h3 { font-size: 1.0625rem; margin-block-end: 6px; }
.encart p { margin: 0; color: var(--texte-2); }
.encart--conseil { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: start; margin-block-start: var(--s4); }
.encart--conseil .ic { color: var(--accent); }
.encart--sombre { background: rgba(255, 255, 255, .07); border-color: #8FE3C0; margin-block: var(--s4); }
.encart--sombre p { color: #C9D3E6; }
.preuve__duo { display: grid; gap: var(--s6); }
@media (min-width: 58rem) { .preuve__duo { grid-template-columns: 1fr 1fr; gap: var(--s8); } }

/* -------------------------------------------------------------- À PROPOS */
.apropos { max-width: 52rem; }
.apropos__liens { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.apropos__liens a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }

/* --------------------------------------------------------------- PRÉ-PIED */
.prefoot { background: var(--accent-fond); border-block: var(--trait) solid var(--accent); padding-block: var(--s7); }
:root[data-theme="sombre"] .prefoot { background: var(--accent-fond); }
.prefoot__in { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 56rem) { .prefoot__in { grid-template-columns: 1fr auto; gap: var(--s8); } }
.prefoot h2 { color: var(--texte); }
.prefoot p { color: var(--texte-2); }
.carte-geste {
  display: grid; gap: 6px; text-decoration: none; color: var(--texte);
  background: var(--fond); border: var(--trait) solid var(--encre); border-radius: var(--r);
  box-shadow: var(--ombre); padding: var(--s3); min-width: min(20rem, 100%);
  transition: transform var(--duree) ease, box-shadow var(--duree) ease;
}
.carte-geste:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--encre); color: var(--texte); }
.carte-geste__famille { font-family: var(--display); font-weight: 700; font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; color: var(--accent-txt); }
.carte-geste__titre { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.008em; line-height: 1.25; }
.carte-geste__meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: .875rem; color: var(--texte-3); align-items: center; }
.carte-geste__meta .ic { color: var(--texte-3); }
.carte-geste__acte { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent-txt); margin-block-start: var(--s1); }
:root[data-theme="sombre"] .carte-geste { border-color: var(--bord); }

/* ------------------------------------------------------------- PIED DE PAGE */
.pied { background: var(--nuit); color: #C9D3E6; padding-block: var(--s8) var(--s5); border-block-start: var(--trait) solid var(--accent); }
.pied__grille { display: grid; gap: var(--s6); }
@media (min-width: 52rem) { .pied__grille { grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s5); } }
.pied h2 { font-size: .8125rem; letter-spacing: .045em; text-transform: uppercase; color: #fff; margin-block-end: var(--s2); font-family: var(--display); font-weight: 700; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-block-end: 10px; }
.pied a { color: #DCE4F1; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__nom { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: #fff; margin: var(--s2) 0 6px; }
.pied__marque p { font-size: .9375rem; color: #A9B7D0; margin-block-end: var(--s2); max-width: 34ch; }
.pied__contact { display: grid; gap: 2px; }
.pied__contact span { color: #8996B0; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; margin-block-start: 6px; }
.pied__bas {
  margin-block-start: var(--s7); padding-block-start: var(--s4);
  border-block-start: 1px solid rgba(255, 255, 255, .16);
  display: grid; gap: var(--s1); font-size: .875rem; color: #A9B7D0;
}
.pied__bas p { max-width: none; margin: 0; }

/* ------------------------------------------------------------ FIL D'ARIANE */
.ariane { background: var(--fond-2); border-block-end: 1px solid var(--bord); font-size: .875rem; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px var(--s2); margin: 0; padding: var(--s2) 0; }
.ariane li + li::before { content: "›"; color: var(--texte-3); margin-inline-end: var(--s2); }
.ariane a { color: var(--texte-2); text-decoration: none; }
.ariane a:hover { color: var(--accent-h); text-decoration: underline; }
.ariane [aria-current] { color: var(--texte); font-weight: 700; }

/* ------------------------------------------------------------ TÊTE DE GESTE */
.geste-tete { background: var(--fond); padding-block: var(--s7) var(--s6); border-block-end: 1px solid var(--bord); }
.geste-tete__in { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 62rem) { .geste-tete__in { grid-template-columns: 1.35fr .65fr; gap: var(--s8); } }
.geste-tete h1 { max-width: 24ch; }
.geste-tete__promesse {
  font-size: 1.125em; background: var(--accent-fond); color: var(--texte);
  border-inline-start: 4px solid var(--accent); padding: var(--s3);
  border-radius: 0 var(--r) var(--r) 0; max-width: 52ch;
}
.geste-tete__promesse strong { display: block; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-h); margin-block-end: 6px; }
:root[data-theme="sombre"] .geste-tete__promesse strong { color: var(--accent); }
.geste-tete__meta { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: .9375rem; color: var(--texte-2); }
.geste-tete__meta li { display: flex; align-items: center; gap: 8px; }
.geste-tete__meta .ic { color: var(--accent); }

/* ============================================================================
   LE SIMULATEUR
   ========================================================================== */
.sans-js-note { display: none; }
.sans-js .sans-js-note {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s2);
  background: var(--fond); border: var(--trait) solid var(--bord); border-radius: var(--r);
  padding: var(--s3); max-width: 46rem;
}
.simu:empty { display: none; }
.simu { display: grid; gap: var(--s5); }
@media (min-width: 62rem) { .simu { grid-template-columns: 1fr 380px; gap: var(--s8); align-items: start; } }

/* la frise de progression de l'exercice */
.simu__frise { grid-column: 1 / -1; list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.simu__pas {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.01em;
  color: var(--texte-3); background: var(--fond); border: var(--trait) solid var(--bord);
  border-radius: var(--r); padding: 6px 14px; min-height: 48px; min-width: 56px;
  justify-content: center; align-items: center;
}
.simu__pas .ic { width: 20px; height: 20px; }
.simu__pas--encours { color: var(--accent-h); border-color: var(--accent); box-shadow: var(--ombre-courte); }
.simu__pas--faite { color: #fff; background: var(--accent); border-color: var(--accent); }
:root[data-theme="sombre"] .simu__pas--faite { color: #06170F; }

.simu__consigne { background: var(--fond); border: var(--trait) solid var(--encre); border-radius: var(--r); padding: var(--s4); box-shadow: var(--ombre); }
:root[data-theme="sombre"] .simu__consigne { border-color: var(--bord); }
.simu__etiquette { font-family: var(--display); font-weight: 700; font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; color: var(--accent-txt); margin: 0 0 var(--s1); }
.simu__consigne h3 { margin-block-end: var(--s2); }
.simu__ordre { font-size: 1.0625em; font-weight: 700; }
.simu__aide { margin-block-start: var(--s3); font-size: .9375rem; }
.simu__aide summary { cursor: pointer; color: var(--accent-txt); font-weight: 700; padding-block: 8px; }
.simu__aide[open] summary { margin-block-end: var(--s1); }
.simu__aide p { color: var(--texte-2); margin: 0; }
.simu__modes { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s4); }

/* le retour : vert réussi, terracotta raté, jamais culpabilisant */
.simu__retour { margin-block-start: var(--s4); }
.retour { border-inline-start: 4px solid; border-radius: 0 var(--r) var(--r) 0; padding: var(--s3); }
.retour__titre { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: .95rem; margin: 0 0 var(--s1); letter-spacing: -.005em; }
.retour p { margin: 0; }
.retour--reussi { background: var(--accent-fond); border-color: var(--accent); }
.retour--reussi .retour__titre { color: var(--accent-h); }
.retour--rate { background: var(--rate-fond); border-color: var(--rate); }
.retour--rate .retour__titre { color: var(--rate); }
.retour--montre { background: var(--fond-2); border-color: var(--encre-3); }
.retour__actes { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s3); }
:root[data-theme="sombre"] .retour--reussi .retour__titre { color: var(--accent); }

/* la mise en situation : une phrase de vie réelle avant que l'écran arrive */
.situation, .simu__situation {
  display: grid; gap: 4px; max-width: 46rem;
  background: var(--fond); border-inline-start: 4px solid var(--encre-3);
  border-radius: 0 var(--r) var(--r) 0; padding: var(--s3);
  margin-block-end: var(--s5);
}
.simu__situation { margin-block-end: var(--s4); padding: var(--s2) var(--s3); background: var(--fond-2); }
.situation__label {
  font-family: var(--display); font-weight: 700; font-size: .7rem;
  letter-spacing: .045em; text-transform: uppercase; color: var(--texte-3);
}
.situation__txt { font-size: 1.0625em; font-weight: 700; }

/* l'appareil : cadre neutre, ombre franche décalée (grand écran) */
.appareil { margin-inline: auto; width: 100%; max-width: 360px; }
.appareil__cadre {
  background: var(--nuit); border: var(--trait) solid var(--encre);
  border-radius: var(--r-appareil); padding: 12px 10px;
  box-shadow: 6px 6px 0 var(--accent);
}
:root[data-theme="sombre"] .appareil__cadre { border-color: var(--bord); }
.appareil--ordinateur { max-width: 620px; }
.appareil--ordinateur .appareil__cadre { border-radius: var(--r); padding: 10px 10px 22px; }
.appareil__ecran { background: #fff; border-radius: 14px; overflow: hidden; color: var(--encre); }
.appareil--ordinateur .appareil__ecran { border-radius: 4px; }
.appareil__legende { margin-block-start: var(--s2); font-size: .8125rem; color: var(--texte-3); text-align: center; }

/* le bandeau d'honnêteté : présent dans les deux rendus, jamais masqué */
.ecran__banniere {
  margin: 0; padding: 7px 14px; background: var(--accent-fond); color: #0A5C40;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-block-end: 1px solid #C9E3D8; text-align: center;
}

/* MOBILE : l'écran simulé prend toute la largeur, sans cadre d'appareil.
   Pas de faux téléphone dans le téléphone : l'exercice se vit en vrai. */
@media (max-width: 46rem) {
  .appareil { max-width: none; margin-inline: calc(-1 * var(--gout)); }
  .appareil__cadre { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
  .appareil__ecran { border-radius: 0; border-block: var(--trait) solid var(--encre); }
  .ecran__corps { min-height: 58vh; padding-inline: var(--gout); }
  .ecran__statut, .ecran__appli { padding-inline: var(--gout); }
  .ecran__banniere { position: sticky; inset-block-start: 0; z-index: 2; }
  .appareil__legende { display: none; }
}

.ecran__statut { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: #6B7690; padding: 8px 14px 2px; font-variant-numeric: tabular-nums; }
.ecran__statut span { display: inline-flex; gap: 4px; align-items: center; }
.ecran__appli { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-block-end: 1px solid #E4E8F0; font-weight: 700; font-size: .9375rem; }
.ecran__appli::before { content: "‹"; font-size: 1.4rem; line-height: 1; color: #6B7690; }
.ecran__corps { padding: var(--s2) 14px var(--s4); display: grid; gap: var(--s2); min-height: 320px; align-content: start; }

/* blocs d'écran génériques */
.bloc__entete { display: grid; gap: 2px; text-align: start; }
.bloc__exp { font-weight: 700; font-size: .9375rem; }
.bloc__meta { font-size: .75rem; color: #6B7690; }
.bulle { background: #EEF1F7; border-radius: 4px 14px 14px 14px; padding: 12px; display: grid; gap: 8px; font-size: .9375rem; line-height: 1.5; }
.bulle__seg { text-align: start; }
.bulle__seg--lien { color: #1B4FA0; word-break: break-all; text-decoration: underline; }
.bloc__texte { font-size: .9375rem; font-weight: 700; }
.bloc__adresse { border: 1px dashed #A9B4C8; border-radius: 6px; padding: 10px; display: grid; gap: 6px; }
.bloc__adresse-intro { font-size: .75rem; color: #6B7690; text-transform: uppercase; letter-spacing: .06em; }
.bloc__morceaux { display: flex; flex-wrap: wrap; gap: 4px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8125rem; }
.bloc__liste { display: grid; gap: 8px; }
.bloc__item { display: grid; gap: 2px; text-align: start; }
.bloc__item-libelle { font-weight: 700; font-size: .9375rem; }
.bloc__item-detail { font-size: .8125rem; color: #6B7690; }

/* les cibles : tout ce qui se touche se VOIT (public débutant : rien d'ambigu),
   avec de l'air autour et 48 px de haut au minimum */
.cible {
  font: inherit; color: inherit; cursor: pointer;
  background: #fff; border: var(--trait) solid #C7D1E2; border-radius: 6px;
  padding: 10px; width: 100%; text-align: start; min-height: 48px;
  transition: border-color var(--duree) ease, background var(--duree) ease;
}
.cible:hover { border-color: var(--accent); background: var(--accent-fond); }
.cible:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cible--seg { width: auto; display: inline-block; padding: 4px 8px; min-height: 0; }
.bulle .cible { background: #FFFFFF; }
.bulle .cible:hover { background: var(--accent-fond); }
.cible--reussi { border-color: var(--accent) !important; background: var(--accent-fond) !important; }
.cible--rate { border-color: var(--rate) !important; background: var(--rate-fond) !important; }
.cible--montre { border-color: var(--accent) !important; background: var(--accent-fond) !important; box-shadow: 0 0 0 4px rgba(14, 138, 95, .18); }
.appareil--fige .cible { cursor: default; }

/* fin d'exercice */
.simu__fin { grid-column: 1 / -1; background: var(--accent-fond); border: var(--trait) solid var(--accent); border-radius: var(--r); padding: var(--s4); }
.simu__fin h3 { display: flex; align-items: center; gap: 10px; color: var(--accent-h); }
.simu__fin .ic { color: var(--accent); }
:root[data-theme="sombre"] .simu__fin h3 { color: var(--accent); }
.simu__fin-actes { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s3); }

/* ---------------------------------------------------------------- QUIZ */
.quiz { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); counter-reset: q; }
.question { background: var(--fond); border: var(--trait) solid var(--bord); border-radius: var(--r); padding: var(--s4); }
.question h3 { margin-block-end: var(--s3); }
.options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.option {
  border: var(--trait) solid var(--bord); border-radius: var(--r); padding: 14px var(--s2);
  min-height: 52px; display: flex; align-items: center; gap: var(--s2);
}
.js .option { cursor: pointer; transition: border-color var(--duree) ease, background var(--duree) ease; }
.js .option:hover { border-color: var(--accent); background: var(--accent-fond); }
.option--bonne { border-color: var(--accent); background: var(--accent-fond); }
.option--mauvaise { border-color: var(--rate); background: var(--rate-fond); }
.option[aria-disabled="true"] { cursor: default; }
.reponse { margin-block-start: var(--s3); }
.reponse summary { cursor: pointer; font-weight: 700; color: var(--accent-txt); padding-block: 8px; }
.js .reponse[data-cachee] { display: none; }
.quiz__retour { margin-block-start: var(--s3); }

/* ---------------------------------------------------------- PROGRESSION */
.fait { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 52rem) { .fait { grid-template-columns: 1fr auto; gap: var(--s8); } }
.fait__note { font-size: .875rem; color: var(--texte-3); }
[data-fait][aria-pressed="true"] { background: var(--accent-h); border-color: var(--accent-h); }

/* ------------------------------------------------------------- MAILLAGE */
.maillage { background: var(--fond-2); border-block-start: 1px solid var(--bord); padding-block: var(--s6); }
.maillage ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
@media (min-width: 56rem) { .maillage ul { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.maillage a { font-weight: 700; display: inline-flex; gap: 8px; }
.maillage a::before { content: "→"; color: var(--accent); }

/* ======================================================= PANNEAU LATÉRAL */
.pupitre-fab {
  position: fixed; inset-inline-end: 0; inset-block-start: 42vh; z-index: 40;
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer;
  background: var(--accent-h); color: #fff; border: var(--trait) solid var(--accent-h);
  border-inline-end: 0; border-radius: var(--r) 0 0 var(--r);
  padding: var(--s2) 10px; box-shadow: -3px 3px 0 var(--encre);
}
.pupitre-fab:hover { box-shadow: -1px 1px 0 var(--encre); }
.pupitre-fab__txt { writing-mode: vertical-rl; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 46rem) {
  .pupitre-fab { inset-block-start: auto; inset-block-end: var(--s3); padding: 12px 10px; }
  .pupitre-fab__txt { display: none; }
}
@media print { .pupitre-fab { display: none; } }

.pupitre-voile { position: fixed; inset: 0; background: rgba(20, 33, 61, .6); z-index: 44; display: none; }
.pupitre-voile.est-ouvert { display: block; }
.pupitre {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 45;
  width: min(24rem, 100%); background: var(--fond); color: var(--texte);
  border-inline-start: var(--trait) solid var(--encre);
  display: flex; flex-direction: column;
  transform: translateX(101%); transition: transform var(--duree) ease;
  visibility: hidden;
}
.pupitre.est-ouvert { transform: none; visibility: visible; }
.pupitre__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3); border-block-end: 1px solid var(--bord); }
.pupitre__tete h2 { font-size: 1.125rem; margin: 0; }
.pupitre__fermer { font: inherit; cursor: pointer; background: transparent; border: var(--trait) solid var(--bord); border-radius: var(--r); color: var(--texte); padding: 8px; min-width: 44px; min-height: 44px; }
.pupitre__fermer:hover { border-color: var(--texte); }
.pupitre__corps { overflow-y: auto; padding: var(--s3); display: grid; gap: var(--s5); }
.pupitre__bloc h3 { font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; color: var(--texte-3); font-family: var(--display); font-weight: 700; margin-block-end: var(--s2); }
.pupitre__ligne { display: grid; gap: 6px; margin-block-end: var(--s2); }
.pupitre__label { font-size: .9375rem; font-weight: 700; }
.pupitre__note { font-size: .875rem; color: var(--texte-3); display: flex; align-items: center; gap: 8px; margin: 0; }
.pupitre__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pupitre__liste a, .pupitre__liste button {
  font: inherit; font-size: .9375rem; text-align: start; width: 100%; cursor: pointer;
  display: flex; align-items: center; gap: var(--s2); color: var(--texte); text-decoration: none;
  background: transparent; border: var(--trait) solid transparent; border-radius: var(--r);
  padding: 11px var(--s1); min-height: 48px;
}
.pupitre__liste a:hover, .pupitre__liste button:hover { border-color: var(--accent); background: var(--accent-fond); color: var(--texte); }
.pupitre__liste .ic { color: var(--accent); }
.pupitre__danger { color: var(--rate) !important; }
.pupitre__danger:hover { border-color: var(--rate) !important; background: var(--rate-fond) !important; }
.pupitre__danger .ic { color: var(--rate); }
.pupitre__pied { margin: 0; padding: var(--s3); border-block-start: 1px solid var(--bord); font-size: .8125rem; color: var(--texte-3); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; }
.seg__b {
  font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer;
  background: var(--fond); color: var(--texte); border: var(--trait) solid var(--bord);
  padding: 10px var(--s2); min-height: 46px; min-width: 48px;
}
.seg__b + .seg__b { border-inline-start: 0; }
.seg__b:first-child { border-radius: var(--r) 0 0 var(--r); }
.seg__b:last-child { border-radius: 0 var(--r) var(--r) 0; }
.seg__b:only-child { border-radius: var(--r); }
.seg__b:hover { border-color: var(--accent); color: var(--accent-h); }
/* Accessibilité AA : le libellé d'un segment fait 15 px, donc du texte COURANT au
   sens WCAG (seuil 4,5:1). Blanc sur le vert clair du contrat ne donne que 4,36:1 ;
   l'état sélectionné prend donc le vert foncé du contrat (6,53:1). Aucun hex ajouté,
   aucun décalage de mise en page entre les deux états, et le survol reste distinct
   (il ne touche que le filet et la couleur du texte). */
.seg__b[aria-pressed="true"] { background: var(--accent-h); border-color: var(--accent-h); color: #fff; }
.aide-dialog { border: var(--trait) solid var(--encre); border-radius: var(--r); padding: var(--s4); max-width: 32rem; color: var(--texte); background: var(--fond); box-shadow: var(--ombre); }
.aide-dialog::backdrop { background: rgba(20, 33, 61, .6); }
.aide-dialog dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s3); margin-block-end: var(--s4); }
.aide-dialog dt { margin: 0; }
.aide-dialog dd { margin: 0; color: var(--texte-2); }
kbd { font: inherit; font-size: .875rem; border: 1px solid var(--bord); border-block-end-width: 3px; border-radius: 4px; padding: 2px 8px; background: var(--fond-2); }

/* mode lecture : on épure, on resserre la mesure */
:root[data-lecture="on"] .utilite,
:root[data-lecture="on"] .bandeau,
:root[data-lecture="on"] .figure,
:root[data-lecture="on"] .maillage,
:root[data-lecture="on"] .prefoot,
:root[data-lecture="on"] .hero__img { display: none; }
:root[data-lecture="on"] .wrap { max-width: 44rem; }
:root[data-lecture="on"] .hero__in, :root[data-lecture="on"] .sec__duo, :root[data-lecture="on"] .simu { grid-template-columns: 1fr; }

/* ============================================================================
   LES PAGES DU PLAN
   Jetons de la DA INCHANGÉS (couleurs, typo, espacements, ombres) : ici on ne
   fait que composer. Chaque page a son anatomie propre : barre de filtres,
   zigzag, escalier, sommaire collant, accordéon, bandeau de compteurs,
   tableaux, fiches, journal.
   ========================================================================== */

/* ------------------------------------------------------- tête de page */
.page-tete { padding-block: var(--s8) var(--s7); border-block-end: 1px solid var(--bord); }
.page-tete--serre { padding-block: var(--s7) var(--s6); }
.page-tete__in { display: grid; gap: clamp(var(--s5), 4vw, var(--s7)); align-items: center; }
@media (min-width: 62rem) {
  .page-tete__in:has(.page-tete__img) { grid-template-columns: 1.25fr .75fr; }
}
.page-tete h1 { max-width: 26ch; }
.page-tete .chapo { max-width: 56ch; }
.page-tete--serre h1 { max-width: 34ch; }

/* ------------------------------------------------ barre de filtres (catalogue) */
.filtres {
  position: sticky; inset-block-start: 0; z-index: 20;
  background: var(--fond); border-block: var(--trait) solid var(--encre);
}
:root[data-theme="sombre"] .filtres { border-color: var(--bord); }
.filtres__in { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; justify-content: space-between; padding-block: var(--s2); }
.filtres__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.filtres__label { font-family: var(--display); font-weight: 700; font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; color: var(--texte-3); }
.filtres__groupe .seg__b { border-radius: var(--r); }
.filtres__groupe .seg__b + .seg__b { border-inline-start-width: var(--trait); }
.filtres__familles { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.filtres__familles a { font-weight: 700; text-decoration: none; }
.filtres__familles a:hover { text-decoration: underline; }
@media print { .filtres { display: none !important; } }

/* ------------------------------------------------------- sections de famille */
.famille { padding-block: clamp(var(--s6), 4vw, var(--s8)); }
.famille:nth-of-type(even) { background: var(--fond-2); }
.famille__tete { display: grid; gap: var(--s3); align-items: start; margin-block-end: var(--s5); }
@media (min-width: 52rem) { .famille__tete { grid-template-columns: auto 1fr auto; } }
.famille__picto { display: inline-flex; color: var(--accent); }
.famille__resume { font-weight: 700; max-width: 58ch; }
.famille__detail { color: var(--texte-2); max-width: 62ch; font-size: .9375em; }
.etat-vide { color: var(--texte-3); font-style: italic; }

/* --------------------------------------------------------- carte d'un geste */
.gestes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 46rem) { .gestes-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 76rem) { .gestes-liste { grid-template-columns: repeat(3, 1fr); } }
.geste-carte {
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--fond); border: 1px solid var(--bord); border-radius: var(--r);
  padding: var(--s3);
  transition: transform var(--duree) ease, box-shadow var(--duree) ease, border-color var(--duree) ease;
}
.geste-carte:hover { transform: translate(-3px, -3px); box-shadow: var(--ombre-accent); border-color: var(--encre); }
.geste-carte__lien { display: grid; gap: 6px; text-decoration: none; color: var(--texte); }
.geste-carte__famille { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .045em; text-transform: uppercase; color: var(--accent-txt); }
.geste-carte__titre { font-family: var(--display); font-weight: 800; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.008em; }
.geste-carte__lien:hover .geste-carte__titre { color: var(--accent-txt); }
.geste-carte__promesse { color: var(--texte-2); font-size: .9375rem; }
.geste-carte__meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: .8125rem; color: var(--texte-3); align-items: center; }
.pills { list-style: none; margin: auto 0 0; padding: var(--s2) 0 0; border-block-start: 1px solid var(--bord); display: flex; flex-wrap: wrap; gap: 6px; }
.pills a {
  display: inline-block; font-size: .75rem; font-weight: 700; text-decoration: none;
  color: var(--texte-2); background: var(--fond-2); border: 1px solid var(--bord);
  border-radius: 4px; padding: 4px 8px;
}
.pills a:hover { border-color: var(--accent); color: var(--accent-txt); background: var(--accent-fond); }

/* ------------------------------------------------- réflexes : zigzag numéroté */
.reflexe-bloc { padding-block: clamp(var(--s6), 4vw, var(--s8)); border-block-end: 1px solid var(--bord); }
.reflexe-bloc--alt { background: var(--fond-2); }
.reflexe-bloc__in { display: grid; gap: var(--s3) var(--s5); align-items: start; }
@media (min-width: 52rem) {
  .reflexe-bloc__in { grid-template-columns: auto 1fr; }
  .reflexe-bloc--alt .reflexe-bloc__in { grid-template-columns: 1fr auto; }
  .reflexe-bloc--alt .reflexe-bloc__num { order: 2; }
  .reflexe-bloc--alt .reflexe-bloc__txt { order: 1; }
}
.reflexe-bloc__num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(3.2rem, 2rem + 5vw, 5.5rem); line-height: .9; letter-spacing: -.02em;
  color: var(--bord); margin: 0; min-width: 2.2ch; text-align: center;
}
.reflexe-bloc__txt h2 { max-width: 30ch; }
.reflexe-bloc__gestes { margin-block-start: var(--s4); }
.reflexe-bloc__gestes h3 { font-size: .8125rem; letter-spacing: .045em; text-transform: uppercase; color: var(--texte-3); font-family: var(--display); font-weight: 700; }
.reflexe-bloc__gestes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.reflexe-bloc__gestes a { font-weight: 700; }
.reflexe-bloc__vide { color: var(--texte-3); font-size: .9375rem; margin-block-start: var(--s3); }

/* ------------------------------------------------ par où commencer : escalier */
.escalier { list-style: none; margin: 0; padding: 0; counter-reset: marche; }
.marche { display: grid; grid-template-columns: auto 1fr; gap: var(--s3) var(--s4); align-items: start; }
.marche + .marche { margin-block-start: var(--s5); }
.marche__num {
  font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.4rem);
  line-height: 1; color: var(--accent); min-width: 2ch; text-align: center;
}
.marche__corps {
  background: var(--fond); border: var(--trait) solid var(--encre); border-radius: var(--r);
  box-shadow: var(--ombre-courte); padding: var(--s4);
}
:root[data-theme="sombre"] .marche__corps { border-color: var(--bord); }
.marche__corps h2 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); margin-block-end: var(--s1); }
.marche__corps h2 a { text-decoration: none; color: var(--texte); }
.marche__corps h2 a:hover { color: var(--accent-txt); text-decoration: underline; }
.marche__famille { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .045em; text-transform: uppercase; color: var(--accent-txt); margin: 0 0 var(--s1); }
.marche__promesse { color: var(--texte-2); }
.marche__pourquoi { background: var(--fond-2); border-inline-start: 3px solid var(--accent); padding: var(--s2) var(--s3); border-radius: 0 var(--r) var(--r) 0; }
.marche__pourquoi strong { display: block; font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; color: var(--accent-txt); font-family: var(--display); }
.marche__meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: center; font-size: .8125rem; color: var(--texte-3); margin: var(--s2) 0 0; }
.apres { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 52rem) { .apres { grid-template-columns: 1fr auto; gap: var(--s7); } }

/* --------------------------------------------- aidants : sommaire collant */
.avec-sommaire { display: grid; gap: var(--s6); }
@media (min-width: 62rem) { .avec-sommaire { grid-template-columns: 17rem 1fr; gap: var(--s8); align-items: start; } }
.sommaire {
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--r);
  padding: var(--s3);
}
@media (min-width: 62rem) { .sommaire { position: sticky; inset-block-start: var(--s3); } }
.sommaire h2 { font-size: .8125rem; letter-spacing: .045em; text-transform: uppercase; color: var(--texte-3); }
.sommaire ol { margin: 0; padding-inline-start: var(--s3); display: grid; gap: 6px; font-size: .9375rem; }
.sommaire a { font-weight: 700; text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }
.bloc-ancre { scroll-margin-block-start: var(--s5); }
.bloc-ancre + .bloc-ancre { margin-block-start: var(--s8); padding-block-start: var(--s6); border-block-start: 1px solid var(--bord); }
.bloc-ancre h2 { max-width: 34ch; }
.bloc-ancre p { max-width: 62ch; }
.bloc-ancre__actes { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s4); }
@media print { .sommaire { display: none !important; } }

/* ------------------------------------------------------------- tableaux */
.table-wrap { overflow-x: auto; border: 1px solid var(--bord); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.faits th, .faits td, .tableau th, .tableau td { text-align: start; padding: 12px var(--s2); vertical-align: top; border-block-end: 1px solid var(--bord); }
.faits th { width: 32%; font-family: var(--display); font-weight: 700; font-size: .8125rem; letter-spacing: .02em; }
.tableau thead th { background: var(--fond-2); font-family: var(--display); font-weight: 700; font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; }
.faits tr:last-child th, .faits tr:last-child td, .tableau tbody tr:last-child td { border-block-end: 0; }
.credits__vignette { border-radius: 4px; border: 1px solid var(--bord); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .875em; background: var(--fond-2); border: 1px solid var(--bord); border-radius: 4px; padding: 1px 6px; }

/* ----------------------------------------------------------- FAQ : accordéon */
.faq-groupe { padding-block: clamp(var(--s6), 4vw, var(--s8)); }
.faq-groupe--alt { background: var(--fond-2); }
.faq-groupe__in { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 62rem) { .faq-groupe__in { grid-template-columns: 15rem 1fr; gap: var(--s8); } }
.faq-groupe__titre { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem); }
.accordeon { display: grid; gap: var(--s2); }
.accordeon details {
  background: var(--fond); border: var(--trait) solid var(--bord); border-radius: var(--r);
  transition: border-color var(--duree) ease;
}
.accordeon details[open] { border-color: var(--accent); }
.accordeon summary {
  cursor: pointer; font-weight: 700; padding: var(--s3);
  display: flex; align-items: baseline; gap: var(--s2); min-height: 56px;
  list-style: none;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::before { content: "+"; font-family: var(--display); font-weight: 800; color: var(--accent-txt); font-size: 1.25rem; line-height: 1; }
.accordeon details[open] summary::before { content: "–"; }
.accordeon summary:hover { color: var(--accent-txt); }
.accordeon details > div { padding: 0 var(--s3) var(--s3) calc(var(--s3) + 1.4rem); color: var(--texte-2); max-width: 68ch; }

/* ------------------------------------------------- impact : compteurs géants */
.compteurs { background: var(--nuit); color: #EAEFF8; padding-block: var(--s8); }
.compteurs .surtitre { color: #8FE3C0; }
.compteurs__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
@media (min-width: 46rem) { .compteurs__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .compteurs__liste { grid-template-columns: repeat(3, 1fr); } }
.compteurs__liste li { display: grid; gap: 4px; border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s3); }
.compteurs__nb { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem); line-height: 1; color: #fff; letter-spacing: -.02em; }
.compteurs__label { font-weight: 700; color: #fff; }
.compteurs__detail { color: #C9D3E6; font-size: .9375rem; }

/* --------------------------------------------- presse, licence : citations */
.citation { margin: 0; padding: var(--s4); background: var(--fond-2); border-inline-start: 4px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; }
.citation p { margin: 0; }
.citation--grande p { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); line-height: 1.4; letter-spacing: -.01em; }
.copie-bloc { display: grid; gap: var(--s2); background: rgba(255, 255, 255, .07); border: var(--trait) dashed #8FE3C0; border-radius: var(--r); padding: var(--s3); margin-block: var(--s4); }
.copie-bloc__txt { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9375rem; color: #fff; margin: 0; }
.fichiers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
@media (min-width: 52rem) { .fichiers { grid-template-columns: 1fr 1fr; } }
.fichiers a {
  display: flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--texte);
  background: var(--fond); border: var(--trait) solid var(--bord); border-radius: var(--r);
  padding: var(--s3); min-height: 64px;
}
.fichiers a:hover { border-color: var(--accent); background: var(--accent-fond); }
.fichiers .ic { color: var(--accent); }
.fichiers span { display: grid; gap: 2px; }
.fichiers code { justify-self: start; }
.fiches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 52rem) { .fiches { grid-template-columns: 1fr 1fr; } }
.fiche { background: var(--fond); border: 1px solid var(--bord); border-radius: var(--r); padding: var(--s4); }
.fiche__meta { font-size: .875rem; margin-block-start: var(--s2); }
.liste-tirets { padding-inline-start: var(--s3); display: grid; gap: var(--s2); max-width: 66ch; }

/* ------------------------------------------------------ contact : les portes */
.portes { display: grid; gap: var(--s4); }
@media (min-width: 52rem) { .portes { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.porte {
  background: var(--fond); border: var(--trait) solid var(--encre); border-radius: var(--r);
  box-shadow: var(--ombre); padding: var(--s5);
}
:root[data-theme="sombre"] .porte { border-color: var(--bord); }
.porte h2 { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); }
.porte__adresse { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1rem; word-break: break-all; }

/* --------------------------------------------------------- plan du site */
.plan-grille { display: grid; gap: var(--s5); }
@media (min-width: 52rem) { .plan-grille { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s6); } }
.plan-grille h2, .plan-grille h3 { font-size: .9375rem; letter-spacing: .045em; text-transform: uppercase; color: var(--texte-3); font-family: var(--display); font-weight: 700; }
.plan-grille ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.plan-grille a { font-weight: 700; }

/* ------------------------------------------------------------- recherche */
.recherche-form { margin-block-start: var(--s5); display: grid; gap: var(--s2); max-width: 40rem; }
.recherche-form label { font-weight: 700; }
.recherche-form__ligne { display: flex; flex-wrap: wrap; gap: var(--s2); }
.recherche-form input {
  flex: 1 1 14rem; font: inherit; color: var(--texte); background: var(--fond);
  border: var(--trait) solid var(--encre); border-radius: var(--r);
  padding: 12px var(--s2); min-height: 56px; min-width: 0;
}
:root[data-theme="sombre"] .recherche-form input { border-color: var(--bord); }
.recherche-form input:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.recherche-etat { font-weight: 700; color: var(--texte-2); margin-block-start: var(--s3); }
#recherche-resultats:empty { display: none; }
#recherche-resultats { margin-block-start: var(--s4); }

/* ------------------------------------------------------ quoi de neuf : journal */
.journal { list-style: none; margin: 0; padding: 0; }
.journal__entree { display: grid; gap: var(--s2) var(--s5); align-items: start; padding-block-end: var(--s6); }
@media (min-width: 52rem) { .journal__entree { grid-template-columns: 12rem 1fr; } }
.journal__entree + .journal__entree { border-block-start: 1px solid var(--bord); padding-block-start: var(--s6); }
.journal time { font-family: var(--display); font-weight: 700; font-size: .875rem; letter-spacing: .02em; color: var(--accent-txt); }
.journal h2 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }

/* ------------------------------------------------------------------- 404 */
.portes-404 { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); max-width: 46rem; }
.portes-404 li {
  display: grid; gap: 4px; background: var(--fond-2); border-inline-start: 4px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0; padding: var(--s3);
}
.portes-404 a { font-family: var(--display); font-weight: 800; font-size: 1.05rem; text-decoration: none; }
.portes-404 a:hover { text-decoration: underline; }
.portes-404 span { color: var(--texte-2); font-size: .9375rem; }

/* ---------------------------------------------- impression des pages du plan */
@media print {
  .page-tete__img, .filtres, .sommaire, .recherche-form, .recherche-etat,
  #recherche-resultats, .pills, .compteurs__detail { display: none !important; }
  .page-tete, .famille, .reflexe-bloc, .faq-groupe, .compteurs { padding-block: 0 6mm; background: #fff !important; color: #000 !important; border: 0; }
  .compteurs__nb, .compteurs__label { color: #000 !important; }
  .compteurs__liste li { border-inline-start-color: #000; }
  .accordeon details { border: 0; }
  .accordeon details > *:not(summary) { display: block !important; }
  .accordeon summary { padding: 0; min-height: 0; }
  .accordeon details > div { padding: 0 0 3mm; }
  .geste-carte, .marche__corps, .porte, .fiche { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
  .reflexe-bloc__num, .marche__num { color: #000; }
}

/* ============================================================================
   ÉCRITURE DE DROITE À GAUCHE (dir="rtl", arabe)
   La feuille entière est écrite en propriétés LOGIQUES (margin-inline,
   padding-inline, inset-inline, border-inline, text-align: start) : zéro
   left/right physique dans tout le fichier. La mise en page se retourne donc
   toute seule. Restent trois familles de choses qui portent un SENS et que le
   navigateur ne peut pas deviner : les ombres décalées, les déplacements au
   survol, et les pictos fléchés. C'est tout ce que corrige ce bloc.
   ========================================================================== */
[dir="rtl"] {
  /* les ombres FRANCHES du contrat partent de l'autre côté, même décalage */
  --ombre: -5px 5px 0 var(--encre);
  --ombre-accent: -5px 5px 0 var(--accent);
  --ombre-courte: -3px 3px 0 var(--encre);
}
[dir="rtl"][data-theme="sombre"] { --ombre: -5px 5px 0 #000; --ombre-courte: -3px 3px 0 #000; }
@media (prefers-color-scheme: dark) {
  [dir="rtl"][data-theme="auto"] { --ombre: -5px 5px 0 #000; --ombre-courte: -3px 3px 0 #000; }
}
/* ombres écrites en dur dans un composant : mêmes valeurs, sens retourné */
[dir="rtl"] .sec--nuit .cadre-photo { box-shadow: -5px 5px 0 var(--accent); }
[dir="rtl"] .btn--accent:hover { box-shadow: -1px 1px 0 var(--encre); }
[dir="rtl"] .hero .btn--accent { box-shadow: -5px 5px 0 rgba(255, 255, 255, .22); }
[dir="rtl"] .hero .btn--accent:hover { box-shadow: -2px 2px 0 rgba(255, 255, 255, .22); }
[dir="rtl"] .carte-geste:hover { box-shadow: -8px 8px 0 var(--encre); }
[dir="rtl"] .appareil__cadre { box-shadow: -6px 6px 0 var(--accent); }
[dir="rtl"] .pupitre-fab { box-shadow: 3px 3px 0 var(--encre); }
[dir="rtl"] .pupitre-fab:hover { box-shadow: 1px 1px 0 var(--encre); }
/* le geste « la carte se soulève » va vers le texte, donc vers la droite */
[dir="rtl"] .btn:active { transform: translate(-2px, 2px); }
[dir="rtl"] .carte:hover,
[dir="rtl"] .carte-geste:hover,
[dir="rtl"] .geste-carte:hover { transform: translate(3px, -3px); }
/* le panneau latéral arrive du bord opposé */
[dir="rtl"] .pupitre { transform: translateX(-101%); }
[dir="rtl"] .pupitre.est-ouvert { transform: none; }
/* les pictos qui montrent une DIRECTION se retournent ; le wordmark, non
   (une marque ne se reflète pas), les pictos neutres non plus */
[dir="rtl"] .ic--miroir { transform: scaleX(-1); }
[dir="rtl"] .langues[open] .langues__chev { transform: rotate(-180deg); }
[dir="rtl"] .maillage a::before { content: "\2190"; }
/* le bandeau de statut de l'écran simulé garde son heure au bon bord */
[dir="rtl"] .pupitre-fab__txt { writing-mode: vertical-lr; }

/* ============================================================= IMPRESSION
   Ce qui s'imprime : la fiche pas-à-pas et le récapitulatif. Rien d'autre. */
@media print {
  @page { margin: 14mm; }
  :root { --fond: #fff; --texte: #000; --texte-2: #222; --texte-3: #444; --bord: #999; }
  body { font-size: 11.5pt; line-height: 1.45; background: #fff; color: #000; }
  /* La fiche papier tient l'essentiel : le titre, la promesse, le pas-à-pas
     écrit, le récapitulatif et les réflexes. Le reste ne s'imprime pas. */
  .utilite, .bandeau, .nav, .chercher, .tete__bascule, .pupitre, .pupitre-fab, .pupitre-voile,
  .hero__img, .hero__actes, .garanties, .simu, .sans-js-note, .maillage, .prefoot, .pied__grille,
  .figure, .sec--nuit .figure, .fait, .ariane, .quiz .reponse summary,
  #quiz, .situation, .encart--conseil, .sec--serre .chapo, .simu__modes { display: none !important; }
  .sec, .geste-tete { padding-block: 0 8mm; border: 0; background: #fff !important; color: #000 !important; }
  .sec--nuit, .sec--clair, .prefoot { background: #fff !important; color: #000 !important; }
  .sec--nuit h2, .sec--nuit h3, .sec--nuit p { color: #000 !important; }
  h1 { font-size: 22pt; }
  h2 { font-size: 15pt; margin-block-start: 6mm; }
  h3 { font-size: 12pt; }
  .frise__num { font-size: 26pt; color: #000; }
  .frise__pas { break-inside: avoid; page-break-inside: avoid; grid-template-columns: auto 1fr; }
  .frise__pas + .frise__pas { border: 0; padding-block-start: 4mm; }
  .geste-tete__promesse { border-inline-start: 3pt solid #000; background: #fff; }
  .liste-coches li, .question { break-inside: avoid; }
  .quiz .reponse { display: block; }
  .quiz .reponse[data-cachee] { display: block !important; }
  .pied { background: #fff !important; color: #000 !important; border: 0; padding-block: 4mm 0; }
  .pied__bas { border-block-start: 1px solid #999; color: #000; }
  a { color: #000; text-decoration: none; }
  .encart, .option { border: 1px solid #999 !important; background: #fff !important; }
  main::after {
    content: "clicparclic.odersa.org · un site de l’ODERSA · contenus sous licence CC BY 4.0";
    display: block; margin-block-start: 6mm; padding-block-start: 3mm;
    border-block-start: 1px solid #999; font-size: 9pt; color: #333;
  }
}