@charset "utf-8";
/* ============================================================================
   DE PLEIN DROIT / BY RIGHT — main.css
   DA « LE DOSSIER RETOURNÉ » (fiche §5). Un seul fichier, en jetons.
   Papier administratif, encre bleu-noir, UN accent bleu Europe, et le rouge
   tampon réservé au REFUSÉ. Coins droits (≤ 3 px), filets francs, zéro ombre
   molle, zéro dégradé décoratif.

   Toutes les marges et positions sont en propriétés LOGIQUES
   (margin-inline, padding-inline, inset-inline, text-align: start) : le jour où
   une langue de droite à gauche arrive, la mise en page se retourne seule.
   ========================================================================== */

/* ------------------------------------------------------------------ polices
   Le choix (liberté du designer, fiche §5) :
   · ARCHIVO (Omnibus-Type, SIL OFL) — la grotesque de caractère. Elle est
     étroite d'appui sans être une condensée, ses terminaisons sont coupées à
     l'équerre, et ses CHIFFRES sont larges et carrés : c'est ce qui permet de
     traiter 250 €, 400 €, 600 €, 14 jours en héros typographiques. Une vraie
     condensée aurait maigri les montants, c'est-à-dire l'inverse du contrat.
   · ARCHIVO BLACK (même dessin, un seul poids très gras) — LES TAMPONS. Un
     tampon encreur est un poids, pas un style : Archivo Black en capitales
     très interlettrées donne l'aplomb administratif sans une once de fantaisie.
   · IBM PLEX SANS (IBM, SIL OFL) — l'humaniste du corps. Registre de document
     technique, excellente à 18 px, chiffres tabulaires nets.
   Aucune n'est utilisée par un autre projet de la flotte (Unbounded, Big
   Shoulders Display, Fraunces, Atkinson Hyperlegible, Source Sans, Source Serif). */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("../fonts/archivo-black-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------- jetons */
:root {
  /* LE PAPIER (fiche §5.1) */
  --papier: #F6F3EB;
  --papier-2: #EFEAE0;
  --papier-3: #FBFAF5;
  --sombre: #141A28;
  --sombre-2: #1E2739;

  /* L'ENCRE */
  --encre: #171D2B;
  --encre-2: #3C4356;
  --encre-3: #6A7183;
  /* Dérivé d'ACCESSIBILITÉ, pas de goût : #6A7183 est à 4,40:1 sur le papier,
     donc il sert les FILETS, les pictos et les intitulés en grand corps, jamais
     un texte courant. Tout petit texte discret prend celui-ci (5,32:1, AA). */
  --encre-3-txt: #5D6478;
  --filet: #D8D2C4;
  --filet-fort: #BFB7A5;

  /* L'ACCENT UNIQUE : bleu Europe profond. Réservé aux ACTES. */
  --accent: #1B4FA8;
  --accent-h: #153E86;
  --accent-fond: #EEF3FB;
  /* sur le bloc sombre, le bleu du contrat tombe à 2,26:1 : ce dérivé (8,03:1)
     porte les liens et les états actifs dans la nuit, sans ajouter de teinte. */
  --accent-clair: #8FB2E8;

  /* LE ROUGE TAMPON : encre FONCTIONNELLE du REFUSÉ. Jamais un décor, jamais
     un lien, jamais une nappe. */
  --rouge: #B3261E;
  --rouge-fond: #FBEDEC;
  --rouge-clair: #F08A82;

  /* le vert n'existe pas dans cette DA : un droit ACCORDÉ se tamponne en bleu. */

  --gouttiere: 24px;
  --rayon: 3px;
  --pas: 8px;
  --large: 1240px;
  --mince: 74ch;
  --corps: 1.0625rem;
  --interligne: 1.62;

  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --tamponnage: "Archivo Black", "Archivo", "Arial Black", sans-serif;
  --texte: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  /* LA TEXTURE PAPIER, cuite dans UNE tuile SVG en ligne (DA v2).
     Deux couches dans la même tuile : le RELIEF éclairé par feDiffuseLighting
     (la surface du papier sous la lampe, lumière du haut-gauche) puis le bruit
     fin par-dessus (les fibres). Le filtre est rasterisé UNE fois par le
     navigateur puis répété comme une image : aucun filtre vivant sur la page,
     donc aucun coût au défilement sur mobile (un feDiffuseLighting live
     retombe sur le CPU). stitchTiles='stitch' fait la tuile SANS couture.
     Calibrage PROUVÉ à l'œil (test 4 forces, texte-témoin #5D6478) : .16 rend
     la matière sans manger le couple de contraste le plus serré du site. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.032' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='1.7'%3E%3CfeDistantLight azimuth='225' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)'/%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.45'/%3E%3C/svg%3E");
  --grain-force: .16;

  /* LES OMBRES DE DOSSIER (DA v2) : des ombres DURES, jamais un halo flou.
     Une feuille posée sur une autre fait une ligne d'ombre franche à son bord :
     c'est cette ligne-là, et rien d'autre. Le contrat « zéro ombre molle »
     tient : blur 0 partout, l'ombre est une TRANCHE, pas une brume. */
  --tranche: 0 1px 0 rgba(23, 29, 43, .10);
  --pile: 0 1px 0 rgba(23, 29, 43, .09), 0 2px 0 rgba(255, 255, 255, .55) inset;
  --pile-2: 0 2px 0 -1px var(--papier-3), 0 3px 0 -1px var(--filet-fort),
            0 5px 0 -2px var(--papier-3), 0 6px 0 -2px var(--filet-fort);

  /* L'ENCRE PRESSÉE (letterpress) : le papier remonte d'un fil sous la lettre.
     Un seul text-shadow, blanc cassé, sous la ligne : c'est la lumière qui
     accroche le bord du foulage, pas une ombre décorative. */
  --foulage: 0 1px 0 rgba(255, 255, 255, .5);
}

/* thème sombre : le dossier passé sous la lampe. Même grammaire, encre et
   papier échangés, aucun jeton nouveau qui ne soit un dérivé de contraste. */
:root[data-theme="sombre"] {
  --papier: #141A28;
  --papier-2: #1B2233;
  --papier-3: #1E2739;
  --sombre: #0D121C;
  --sombre-2: #171E2C;
  --encre: #EDE9DE;
  --encre-2: #C3BFB4;
  --encre-3: #9AA1B2;
  --encre-3-txt: #A8AFC0;
  --filet: #333B4E;
  --filet-fort: #47516A;
  --accent: #8FB2E8;
  --accent-h: #B4CBF1;
  --accent-fond: #1C2740;
  --accent-clair: #8FB2E8;
  --rouge: #F08A82;
  --rouge-fond: #2C1A1A;
  --rouge-clair: #F08A82;
  --grain-force: .10;
  /* la tuile de NUIT : même relief, mais la lampe est basse et bleutée : en
     fusion screen, seules les bosses du papier accrochent un peu de lumière. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.032' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23808FB0' surfaceScale='1.7'%3E%3CfeDistantLight azimuth='225' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)'/%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.45'/%3E%3C/svg%3E");
  /* la nuit, une feuille ne porte pas d'ombre : elle accroche la lampe par sa
     tranche haute. Même grammaire d'ombres dures, lumière inversée. */
  --tranche: 0 1px 0 rgba(0, 0, 0, .42);
  --pile: 0 1px 0 rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .05) inset;
  --foulage: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --papier: #141A28; --papier-2: #1B2233; --papier-3: #1E2739;
    --sombre: #0D121C; --sombre-2: #171E2C;
    --encre: #EDE9DE; --encre-2: #C3BFB4; --encre-3: #9AA1B2; --encre-3-txt: #A8AFC0;
    --filet: #333B4E; --filet-fort: #47516A;
    --accent: #8FB2E8; --accent-h: #B4CBF1; --accent-fond: #1C2740;
    --rouge: #F08A82; --rouge-fond: #2C1A1A;
    --grain-force: .10;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.032' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23808FB0' surfaceScale='1.7'%3E%3CfeDistantLight azimuth='225' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)'/%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.45'/%3E%3C/svg%3E");
    --tranche: 0 1px 0 rgba(0, 0, 0, .42);
    --pile: 0 1px 0 rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .05) inset;
    --foulage: none;
  }
}

:root[data-taille="l"] { --corps: 1.1875rem; }
:root[data-taille="xl"] { --corps: 1.3125rem; }
:root[data-aeration="large"] { --interligne: 1.86; --pas: 11px; }
:root[data-contraste="haut"] {
  --encre-2: var(--encre); --encre-3: var(--encre); --encre-3-txt: var(--encre);
  --filet: var(--encre); --filet-fort: var(--encre); --grain-force: 0;
  /* contraste renforcé = zéro bruit visuel : ni foulage, ni tranches d'ombre. */
  --foulage: none; --tranche: none; --pile: none;
}
:root[data-liens="marques"] a { text-decoration: underline; text-underline-offset: .18em; }

/* --------------------------------------------------------------- socle */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:root[data-animations="off"] html, :root[data-animations="off"] body { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: var(--corps)/var(--interligne) var(--texte);
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}
/* le grain de papier, posé une fois, devant rien : il ne capte aucun clic. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); opacity: var(--grain-force); mix-blend-mode: multiply;
}
:root[data-theme="sombre"] body::before,
:root:not([data-theme="clair"]) body::before { mix-blend-mode: screen; }
@media (prefers-color-scheme: light) { :root:not([data-theme="sombre"]) body::before { mix-blend-mode: multiply; } }
body > * { position: relative; z-index: 1; }

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

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 700;
  line-height: 1.08; letter-spacing: -.012em; margin: 0 0 calc(var(--pas) * 1.5);
  text-wrap: balance;
  /* l'encre PRESSÉE dans le papier : un fil de lumière sous la lettre (foulage
     d'imprimerie). Sur fond sombre le jeton vaut none : rien ne bave. */
  text-shadow: var(--foulage);
}
.section--encre h1, .section--encre h2, .section--encre h3,
.tete-page h1, .pied h2, .chiffres h2 { text-shadow: none; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 3.3vw, 2.1rem); }
h3 { font-size: clamp(1.14rem, 2vw, 1.32rem); }
p, ul, ol, dl, table { margin: 0 0 calc(var(--pas) * 1.75); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }

a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .16em; }
a:hover { color: var(--accent-h); }
:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 1px;
}
/* Le moteur donne le focus au TITRE de chaque écran pour qu'un lecteur d'écran
   annonce le changement. Un élément en tabindex="-1" n'est jamais atteint par la
   tabulation : personne n'a besoin de son anneau, et l'anneau se lisait comme un
   cadre décoratif autour du titre (vu à l'œil sur une capture). */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saut {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: #fff; padding: 12px 20px; font-weight: 600;
}
.saut:focus { inset-inline-start: 0; }

.wrap { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--gouttiere); }
.wrap--mince { max-width: 82ch; }

/* le FILET de dossier : le séparateur de la maison, franc, jamais une ombre. */
.filet { border: 0; border-top: 1px solid var(--filet); margin: calc(var(--pas) * 5) 0; }

/* ------------------------------------------------------------ mots-outils */
.surtitre {
  font-family: var(--display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--encre-3-txt);
  margin: 0 0 calc(var(--pas) * 1.25);
}
.ref {
  font-family: var(--display); font-weight: 600; font-size: .75rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--encre-3-txt);
}
.chapeau { font-size: 1.1875rem; color: var(--encre-2); max-width: 68ch; }
.note-p { font-size: .9375rem; color: var(--encre-3-txt); }

/* LE MONTANT EN HÉROS : la promesse typographique du contrat visuel. */
.montant {
  font-family: var(--tamponnage); font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: .92; letter-spacing: -.02em; color: var(--accent);
  display: block; font-variant-numeric: tabular-nums;
  text-shadow: var(--foulage);
}
.montant--fil { display: inline; font-size: 1.18em; letter-spacing: -.01em; vertical-align: -.02em; }

/* -------------------------------------------- LE CACHET DATEUR (DA v2)
   L'horodatage du droit (fiche §8), porté en cachet de greffe : double filet
   d'encre, capitales espacées, la date en corps de tampon, un degré de
   rotation. Un élément de CONFIANCE, jamais une ligne grise. Tout est en
   currentColor : la variante ne décide que l'encre. */
.cachet-date {
  display: inline-block; margin: 0; position: relative;
  border: 2px solid currentColor; border-radius: 2px;
  padding: 9px 18px 10px; transform: rotate(-1.2deg);
  font-family: var(--display); text-transform: uppercase;
  color: var(--encre-2); text-align: center;
}
.cachet-date::before {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  border: 1px solid currentColor; opacity: .5; border-radius: 1px;
}
.cachet-date__l { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .13em; }
.cachet-date__d {
  display: block; font-family: var(--tamponnage); font-weight: 400;
  font-size: 1.05rem; letter-spacing: .05em; margin-top: 3px;
}
.cachet-date--fiche { color: var(--accent); }
.cachet-date--pied { color: var(--accent-clair); }
/* dans une grille ou une colonne flex, le cachet garde sa taille de tampon :
   un tampon ne s'étire pas à la largeur de la page. */
.pied__bas .cachet-date { justify-self: start; margin-block: 4px 6px; }

/* la tête de fiche et le pied de chemise qui portent le cachet */
.fiche__tete-in { display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: space-between; align-items: flex-start; }
.fiche__tete-in > div:first-child { flex: 1 1 34ch; }
.fiche__tete-in > .cachet-date { flex: none; margin-top: 6px; }
.chemise__pied {
  display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between;
  align-items: center; margin-top: 22px;
}

/* -------------------------------------------------------------- les icônes */
.ic { width: 1.35em; height: 1.35em; flex: none; vertical-align: -.28em; }
.ic--s { width: 1.05em; height: 1.05em; vertical-align: -.18em; }
.ic--g { width: 1.7em; height: 1.7em; }
.ic--miroir:dir(rtl) { transform: scaleX(-1); }

/* ------------------------------------------------------------- LES TAMPONS
   Le tampon est une ENCRE posée sur du papier : il se multiplie sur le fond,
   il est pivoté, et son tracé est troué par le filtre SVG du gabarit.
   `currentColor` porte la couleur : c'est la variante qui la décide. */
.tampon {
  --tp-op: .92;
  display: inline-block; line-height: 0; width: min(300px, 78%);
  transform: rotate(var(--tp-rot, -2.5deg));
  mix-blend-mode: multiply; opacity: var(--tp-op);
}
:root[data-theme="sombre"] .tampon { --tp-op: 1; mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .tampon { --tp-op: 1; mix-blend-mode: screen; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) .tampon { --tp-op: .92; mix-blend-mode: multiply; }
}
.tampon svg { width: 100%; height: auto; display: block; overflow: visible; }
.tampon--accorde { color: var(--accent); }
.tampon--refuse { color: var(--rouge); }
.tampon--note { color: var(--encre-2); }

/* LE TAMPONNAGE v2 (DA v2) : le geste signature du site, en quatre temps.
     1. LA CHUTE (0 → 17 %, ~130 ms) : le tampon tombe en accélérant (ease-in),
        gros et pâle d'abord, ÉTIRÉ dans le sens du mouvement (squash & stretch,
        principe n° 1 de l'animation) ; son OMBRE grandit sur le papier à mesure
        qu'il approche.
     2. LE GEL (17 → 29 %, ~90 ms) : à l'impact, TOUT S'ARRÊTE, écrasé en
        largeur (.97, .90). C'est le « hit-stop » des jeux d'action : le
        cerveau lit la pause comme le poids du coup.
     3. LA DÉTENTE (29 → 55 %) : le caoutchouc se relève, dépasse d'un fil
        (1.015), se pose à 1.
     4. LE SÉCHAGE (55 → 100 %) : l'encre boit le papier, l'opacité descend
        doucement vers son état de repos.
   Une seule animation, 760 ms, jamais en boucle, état final = état de repos
   exact : en animations réduites, l'état posé est identique. */
.tampon { position: relative; }
.tampon--anime { animation: abattre .76s linear both; }
@keyframes abattre {
  0%   { transform: rotate(var(--tp-rot, -2.5deg)) scale(2.5, 2.72); opacity: 0;
         animation-timing-function: cubic-bezier(.55, 0, .85, .36); }
  17%  { transform: rotate(var(--tp-rot, -2.5deg)) scale(.97, .90); opacity: 1; }
  29%  { transform: rotate(var(--tp-rot, -2.5deg)) scale(.97, .90); opacity: 1;
         animation-timing-function: cubic-bezier(.2, .9, .35, 1.1); }
  42%  { transform: rotate(var(--tp-rot, -2.5deg)) scale(1.015); opacity: 1; }
  55%  { transform: rotate(var(--tp-rot, -2.5deg)) scale(1); opacity: .98; }
  100% { transform: rotate(var(--tp-rot, -2.5deg)) scale(1); opacity: var(--tp-op); }
}
/* l'OMBRE D'APPROCHE : un aplat d'encre SOUS le tampon (aucun flou : une
   plaque, pas une brume) qui s'affirme pendant la chute et disparaît à
   l'impact — l'encre pressée ne porte pas d'ombre. N'existe qu'animée. */
.tampon--anime::before {
  content: ""; position: absolute; inset: 8% 5%; z-index: -1; border-radius: 6px;
  background: var(--encre);
  opacity: 0; animation: ombre-approche .76s linear both;
}
@keyframes ombre-approche {
  0%   { opacity: 0; transform: scale(.55); }
  14%  { opacity: .15; transform: scale(1); }
  19%  { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
:root[data-animations="off"] .tampon--anime::before { animation: none; content: none; }
@media (prefers-reduced-motion: reduce) {
  .tampon--anime::before { animation: none; content: none; }
}

/* LES ÉCLATS D'ENCRE : six gouttes éjectées du cadre à l'impact. Elles vivent
   dans le SVG du tampon (groupe .tp-eclats, HORS du groupe filtré), chacune
   avec sa direction en variables --ex/--ey. Invisibles par défaut : sans
   animation, elles n'existent pas. */
.tp-eclats rect { opacity: 0; }
.tampon--anime .tp-eclats rect {
  animation: eclat .76s linear both;
  transform: translate(0, 0);
}
@keyframes eclat {
  0%, 16% { transform: translate(0, 0) scale(1); opacity: 0; }
  18%  { opacity: .85; }
  52%  { transform: translate(var(--ex, 20px), var(--ey, -14px)) scale(.35); opacity: 0; }
  100% { transform: translate(var(--ex, 20px), var(--ey, -14px)) scale(.35); opacity: 0; }
}

:root[data-animations="off"] .tampon--anime,
:root[data-animations="off"] .tp-eclats rect { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .tampon--anime, .tp-eclats rect { animation: none; }
}

/* ================================================== BARRE D'UTILITÉ + TÊTE */
.utilite {
  background: var(--sombre); color: #E9E5DA;
  font-size: .875rem; border-bottom: 3px solid var(--accent);
  /* ⚠ LE PLANCHER D'EMPILEMENT DE LA BARRE, et il est OBLIGATOIRE.
     `body > *` pose `z-index: 1` sur TOUTES les bandes de la page : chacune est
     un contexte d'empilement à la MÊME altitude, et à égalité c'est l'ordre du
     document qui gagne — `.tete` vient après `.utilite`, donc elle peint
     par-dessus. Le `z-index: 40` de la liste de langues ne pèse rien contre elle
     (il ne classe que DANS `.utilite`) : le sélecteur s'ouvrait sous la tête,
     invisible et inatteignable au clic (mesuré à la sonde CDP, 29/07).
     La barre monte donc TOUTE ENTIÈRE ; seuls le panneau latéral (46, 47, 48)
     et le lien d'évitement (99) restent au-dessus d'elle. */
  position: relative; z-index: 45;
}
.utilite__in { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; justify-content: space-between; min-height: 40px; padding-block: 6px; }
.utilite a { color: #E9E5DA; text-decoration: none; }
/* zone TACTILE des liens de la barre : le padding vertical d'un élément en
   ligne agrandit la surface cliquable SANS pousser la ligne (le layout ne
   bouge pas d'un pixel, la barre garde sa hauteur) — les liens passaient à
   23 px de haut, un pixel sous le minimum WCAG 2.5.8. */
.utilite__liens a { padding-block: 2px; }
.utilite a:hover { color: #fff; text-decoration: underline; }
.utilite__liens { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.utilite__langue { display: flex; align-items: center; gap: 7px; margin: 0; color: #CFCBC0; }

/* ⚠ Le sélecteur n'est PAS le conteneur de sa liste : la liste s'ancre à LA
   BARRE (déjà positionnée, z-index 45). Ancrée au <details>, elle suivait le
   bouton quand la barre passe en deux lignes sous ~540 px : le bouton file à
   GAUCHE et la liste (12rem alignée à son bord droit) sortait de l'écran de
   60 px — mesuré à la sonde de 320 à 500 px, invisible à la recette mobile
   (qui n'ouvre jamais le sélecteur) comme en desktop. Alignée au bord droit
   du CONTENU de la barre, elle ne peut plus sortir de l'écran à aucune
   largeur, dans aucune langue ; en desktop la position est identique au
   pixel (mesuré avant/après : liste [1044..1236] top 45 à 1280 px). */
.langues { position: static; }
.langues__b {
  display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  padding: 4px 9px; border: 1px solid #3A4356; border-radius: var(--rayon); color: #E9E5DA;
}
.langues__b::-webkit-details-marker { display: none; }
.langues__b:hover { border-color: var(--accent-clair); color: #fff; }
.langues[open] .langues__b { border-color: var(--accent-clair); }
.langues__chev { transition: transform .16s; }
.langues[open] .langues__chev { transform: rotate(180deg); }
.langues__liste {
  position: absolute;
  inset-inline-end: calc(max((100% - var(--large)) / 2, 0px) + var(--gouttiere));
  top: 100%; z-index: 40;
  margin: 0; padding: 5px; list-style: none; min-width: 12rem;
  background: var(--sombre-2); border: 1px solid #3A4356; border-radius: var(--rayon);
}
.langues__liste a { display: block; padding: 8px 12px; border-radius: 2px; }
.langues__liste a:hover { background: var(--accent); color: #fff; text-decoration: none; }
.langues__liste a[aria-current] { font-weight: 600; background: #26314A; }

.tete { background: var(--papier); border-bottom: 1px solid var(--filet); }
.tete__in {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 14px 24px; padding-block: 16px;
}
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--encre); }
.wordmark__txt { display: flex; flex-direction: column; }
.wordmark__nom {
  font-family: var(--display); font-weight: 700; font-size: 1.3125rem;
  letter-spacing: -.015em; line-height: 1.05;
}
.wordmark__sous { font-size: .75rem; color: var(--encre-3-txt); letter-spacing: .04em; }
.wordmark--sombre { color: #F1EEE4; }
.wordmark--sombre .wordmark__sous { color: #ACB3C2; }

.tete__bascule {
  display: none; align-items: center; gap: 8px; background: none; border: 1px solid var(--filet-fort);
  border-radius: var(--rayon); color: var(--encre); font: 600 .9375rem var(--texte); padding: 9px 13px; cursor: pointer;
}
.nav ul { display: flex; flex-wrap: wrap; gap: 2px 4px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 9px 11px; text-decoration: none; color: var(--encre);
  font-family: var(--display); font-weight: 600; font-size: .9375rem; border-radius: var(--rayon);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.nav a:hover { background: var(--accent-fond); color: var(--accent-h); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }

.chercher { display: flex; }
.chercher input {
  font: 400 .9375rem var(--texte); padding: 9px 12px; width: min(12.5rem, 30vw);
  border: 1px solid var(--filet-fort); border-inline-end: 0;
  border-radius: var(--rayon) 0 0 var(--rayon); background: var(--papier-3); color: var(--encre);
}
.chercher input::placeholder { color: var(--encre-3-txt); }
.chercher button {
  border: 0; background: var(--accent); color: #fff; padding-inline: 13px; cursor: pointer;
  border-radius: 0 var(--rayon) var(--rayon) 0; display: grid; place-items: center;
}
.chercher button:hover { background: var(--accent-h); }

/* le bandeau d'identité : qui parle, et le disclaimer, sur toutes les pages. */
.bandeau { background: var(--papier-2); border-bottom: 1px solid var(--filet); font-size: .875rem; }
.bandeau__in { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; padding-block: 9px; }
.bandeau__nom { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--encre-2); }
.bandeau__fait { color: var(--encre-3-txt); }

@media (max-width: 62rem) {
  .tete__in { grid-template-columns: 1fr auto; }
  .tete__bascule { display: inline-flex; }
  .nav { grid-column: 1 / -1; display: none; }
  .nav[data-ouvert="oui"] { display: block; }
  .nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--filet); }
  .nav li + li { border-top: 1px solid var(--filet); }
  .nav a { border-radius: 0; border-bottom: 0; border-inline-start: 3px solid transparent; padding: 13px; }
  .nav a[aria-current="page"] { border-inline-start-color: var(--accent); }
  .chercher { grid-column: 1 / -1; }
  .chercher input { width: 100%; }
}

/* ==================================================== BOUTONS ET SECTIONS */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  padding: 14px 22px; min-height: 48px; border-radius: var(--rayon); cursor: pointer;
  text-decoration: none; border: 2px solid var(--accent); background: var(--accent); color: #fff;
  transition: background .14s, border-color .14s, transform .1s, box-shadow .1s;
  /* le POIDS du bouton de guichet (DA v2) : une tranche d'ombre dure sous le
     bouton ; à l'appui, le bouton descend D'AUTANT et l'ombre s'écrase. Le
     doigt sent la course. Jamais un halo. */
  box-shadow: 0 2px 0 rgba(23, 29, 43, .28);
}
.btn:hover { background: var(--accent-h); border-color: var(--accent-h); color: #fff; }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(23, 29, 43, .28); }
.btn--gros { font-size: 1.1875rem; padding: 17px 28px; min-height: 56px; }
.btn--fantome { background: transparent; color: var(--accent); box-shadow: 0 2px 0 rgba(23, 29, 43, .14); }
.btn--fantome:hover { background: var(--accent-fond); color: var(--accent-h); }
.btn--encre { background: var(--sombre); border-color: var(--sombre); color: #F1EEE4; }
.btn--encre:hover { background: #0C1220; border-color: #0C1220; color: #fff; }
.btn--petit { font-size: .9375rem; padding: 10px 15px; min-height: 44px; }
:root[data-animations="off"] .btn { transition: none; }

.section { padding-block: clamp(44px, 7vw, 84px); }
.section--alt { background: var(--papier-2); border-block: 1px solid var(--filet); }
.section--encre { background: var(--sombre); color: #E9E5DA; }
.section--encre h1, .section--encre h2, .section--encre h3 { color: #F5F2E8; }
.section--encre .chapeau { color: #C8C4B8; }
.section--encre .surtitre, .section--encre .note-p { color: #A9B0BF; }
.section--encre a { color: var(--accent-clair); }
.section--encre .montant { color: var(--accent-clair); }
.section__tete { max-width: 70ch; margin-bottom: calc(var(--pas) * 4); }

/* L'ONGLET DE CHEMISE : le titre de section sort du dossier comme une languette
   cartonnée. Purement CSS, aucune image. */
.onglet {
  display: inline-block; background: var(--papier-2); border: 1px solid var(--filet-fort);
  border-bottom: 0; border-radius: var(--rayon) var(--rayon) 0 0;
  padding: 9px 20px 8px; margin-bottom: -1px;
  font-family: var(--display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--encre-2);
  position: relative;
}
.onglet::after {
  content: ""; position: absolute; inset-inline: 12px; bottom: 4px; height: 2px; background: var(--accent);
}
.onglet--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.onglet--accent::after { background: rgba(255, 255, 255, .55); }
.chemise { border: 1px solid var(--filet-fort); border-radius: 0 var(--rayon) var(--rayon) var(--rayon); background: var(--papier-3); box-shadow: var(--pile); }
.chemise__in { padding: clamp(20px, 3vw, 34px); }

/* ============================================================== L'ACCUEIL */
.hero { border-bottom: 1px solid var(--filet); position: relative; overflow: hidden; }
.hero__fond { position: absolute; inset: 0; z-index: 0; }
.hero__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; opacity: .62; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, var(--papier) 0 34%, rgba(246, 243, 235, .82) 58%, rgba(246, 243, 235, .5) 100%);
}
:root[data-theme="sombre"] .hero::after,
:root:not([data-theme="clair"]) .hero::after {
  background: linear-gradient(100deg, var(--papier) 0 34%, rgba(20, 26, 40, .84) 58%, rgba(20, 26, 40, .55) 100%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) .hero::after {
    background: linear-gradient(100deg, var(--papier) 0 34%, rgba(246, 243, 235, .82) 58%, rgba(246, 243, 235, .5) 100%);
  }
}
.hero__in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
  padding-block: clamp(40px, 6vw, 78px);
}
.hero h1 { letter-spacing: -.022em; }
.hero h1 .l { display: block; }
.hero h1 em { display: block; font-style: normal; color: var(--accent); }
.hero__chapeau { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--encre-2); max-width: 52ch; margin-block: calc(var(--pas) * 3); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__note { font-size: .9375rem; color: var(--encre-3-txt); margin-top: calc(var(--pas) * 2); max-width: 46ch; }

/* LA FICHE DE DOSSIER de la situation vedette, posée dans le hero.
   DA v2 : elle n'est plus seule — deux feuilles dépassent dessous, à peine
   tournées (le dossier est ÉPAIS), et sa tranche porte une ombre dure. */
.carte-dossier {
  background: var(--papier-3); border: 1px solid var(--filet-fort); border-radius: var(--rayon);
  border-top: 4px solid var(--accent); padding: clamp(20px, 2.6vw, 30px); position: relative;
  /* la place du TAMPON, réservée : il se pose dans la marge basse de la fiche,
     jamais par-dessus les étiquettes de métadonnées. */
  padding-bottom: 104px;
  box-shadow: var(--pile);
}
.carte-dossier::before, .carte-dossier::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--papier-3); border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
}
.carte-dossier::before { transform: rotate(.9deg) translateY(3px); }
.carte-dossier::after { transform: rotate(-.7deg) translateY(6px); background: var(--papier-2); }
.carte-dossier__ref {
  display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--filet); margin-bottom: 16px;
}
.carte-dossier h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.carte-dossier__meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 16px; }
.carte-dossier__meta span {
  font-family: var(--display); font-weight: 600; font-size: .8125rem; letter-spacing: .05em;
  text-transform: uppercase; border: 1px solid var(--filet-fort); border-radius: 2px;
  padding: 5px 9px; color: var(--encre-2);
}
.carte-dossier__tampon { position: absolute; inset-inline-end: 18px; bottom: 10px; width: 186px; }
/* le trombone agrafe la fiche : il chevauche le bord haut, penché. */
.carte-dossier__trombone {
  position: absolute; top: -19px; inset-inline-start: 24px;
  width: 38px; height: 38px; color: var(--encre-2); transform: rotate(9deg);
}
.carte-dossier__trombone .ic { width: 100%; height: 100%; }

/* la bande de chiffres comptés au build */
.chiffres { background: var(--sombre); color: #E9E5DA; border-block: 1px solid var(--filet); }
.chiffres__in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: var(--large); margin-inline: auto;
}
.chiffre { padding: clamp(22px, 3vw, 34px) var(--gouttiere); border-inline-start: 1px solid #2A3346; }
.chiffre:first-child { border-inline-start: 0; }
.chiffre b {
  display: block; font-family: var(--tamponnage); font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1; color: #F5F2E8; font-variant-numeric: tabular-nums;
}
.chiffre span { display: block; font-family: var(--display); font-weight: 700; font-size: .9375rem; letter-spacing: .05em; text-transform: uppercase; margin-top: 8px; color: var(--accent-clair); }
.chiffre small { display: block; font-size: .875rem; color: #A9B0BF; margin-top: 6px; }

/* LES 6 FAMILLES (DA v2) : le TIROIR DE DOSSIERS SUSPENDUS. Chaque famille est
   une chemise cartonnée dont l'ONGLET dépasse réellement du bord haut, et les
   onglets se DÉCALENT d'une chemise à l'autre (début, milieu, fin) comme dans
   un vrai tiroir : c'est le décalage qui fait l'armoire. Pur CSS, aucun aria :
   l'onglet est le premier contenu lu, rien ne change pour un lecteur d'écran. */
.familles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: calc(var(--gouttiere) + 12px) var(--gouttiere);
}
.famille {
  background: var(--papier-3); border: 1px solid var(--filet-fort); border-radius: var(--rayon);
  display: flex; flex-direction: column;
  position: relative; margin-top: 30px;
  box-shadow: var(--pile);
}
/* l'onglet : même carton, même filet, soudé à la chemise par son bord bas. */
.famille__onglet {
  position: absolute; bottom: 100%; inset-inline-start: 14px; margin: 0;
  max-width: calc(100% - 28px);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--papier-3); border: 1px solid var(--filet-fort); border-bottom: 0;
  border-radius: var(--rayon) var(--rayon) 0 0;
  padding: 7px 14px 6px;
  font-family: var(--display); font-weight: 700; font-size: .9375rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.famille__onglet::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px;
  background: var(--papier-3);
}
.famille__onglet .ic { color: var(--accent); flex: none; }
/* le DÉCALAGE du tiroir : 1er tiers, 2e tiers, 3e tiers, puis ça recommence. */
.famille:nth-child(3n + 2) .famille__onglet { inset-inline-start: 33%; }
.famille:nth-child(3n) .famille__onglet { inset-inline-start: auto; inset-inline-end: 14px; }
.famille__num { font-family: var(--tamponnage); font-size: .9375rem; color: var(--filet-fort); }
.famille__corps { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.famille__corps > p { color: var(--encre-2); font-size: .9375rem; margin: 0; }
.famille__liste { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.famille__liste li { padding: 7px 0 7px 0; border-top: 1px solid var(--filet); display: flex; gap: 9px; align-items: baseline; }
.famille__liste li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--filet-fort); margin-top: .5em; }
.famille__liste li[data-jouable="oui"] { font-weight: 600; }
.famille__liste li[data-jouable="oui"]::before { background: var(--accent); }
.famille__liste a { text-decoration: none; }
.famille__liste a:hover { text-decoration: underline; }
/* l'étiquette « pas encore écrite » : une mention de registre, pas un cri. */
.famille__liste .ref { font-size: .6875rem; letter-spacing: .09em; }
/* la situation déjà TERMINÉE sur cet appareil : sa puce devient une coche
   d'encre (app.js pose data-fait depuis la progression locale). */
.famille__liste li[data-fait="oui"]::before {
  background: var(--accent); width: 11px; height: 10px; margin-top: .42em;
  clip-path: polygon(12% 55%, 38% 82%, 88% 12%, 97% 24%, 39% 100%, 3% 66%);
}
.famille__socle {
  margin-top: auto; font-size: .8125rem; color: var(--encre-3-txt);
  border-top: 1px solid var(--filet); padding-top: 12px;
}
.famille__socle a { color: var(--encre-3-txt); }

/* les colonnes de preuve */
.preuves { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: var(--gouttiere); }
.preuve { border-top: 3px solid var(--accent); padding-top: 16px; }
.preuve h3 { margin-bottom: 8px; }
.preuve p { color: var(--encre-2); font-size: .9375rem; margin: 0; }

/* l'avertissement du projet : encadré, jamais un décor */
.avert {
  border: 2px solid var(--encre); border-radius: var(--rayon); background: var(--papier-3);
  padding: clamp(20px, 2.6vw, 30px);
}
.avert h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.avert__fort { font-weight: 600; }
.avert ul { margin-bottom: 0; padding-inline-start: 1.2em; }
.avert li { margin-bottom: 8px; }

/* la pièce de dossier (une photo encadrée) */
.piece { margin: 0; }
.piece__cadre { border: 1px solid var(--filet-fort); background: var(--papier-3); padding: 8px; border-radius: 2px; }
.piece__img { display: block; width: 100%; height: auto; }
.piece figcaption { font-size: .8125rem; color: var(--encre-3-txt); margin-top: 9px; }

.duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.duo--inverse > :first-child { order: 2; }

@media (max-width: 62rem) {
  .hero__in, .duo { grid-template-columns: 1fr; }
  .duo--inverse > :first-child { order: 0; }
  .carte-dossier__tampon { position: static; inset: auto; width: 168px; margin-top: 18px; }
}

/* ================================================ LA FICHE À IMPRIMER
   La marge perforée est la signature du document (DA v2) : une vraie COLONNE
   de trous de classeur sur toute la hauteur — une tuile SVG répétée, cuite en
   deux teintes (jour et lampe), plus le filet de marge. */
:root {
  --perfo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='64'%3E%3Ccircle cx='8' cy='32' r='6.2' fill='%23EFEAE0' stroke='%23BFB7A5' stroke-width='1.2'/%3E%3C/svg%3E");
}
:root[data-theme="sombre"] {
  --perfo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='64'%3E%3Ccircle cx='8' cy='32' r='6.2' fill='%23141A28' stroke='%2347516A' stroke-width='1.2'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --perfo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='64'%3E%3Ccircle cx='8' cy='32' r='6.2' fill='%23141A28' stroke='%2347516A' stroke-width='1.2'/%3E%3C/svg%3E");
  }
}
.fiche { background: var(--papier-3); border-block: 1px solid var(--filet-fort); }
.fiche__in {
  max-width: 96ch; margin-inline: auto; padding: clamp(30px, 5vw, 60px) var(--gouttiere);
  padding-inline-start: clamp(46px, 7vw, 86px); position: relative;
}
.fiche__in::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: clamp(22px, 3.4vw, 40px);
  width: 1px; background: var(--filet);
}
.fiche__in::after {
  content: ""; position: absolute; inset-block: 26px; inset-inline-start: clamp(6px, 1.6vw, 20px);
  width: 16px; background-image: var(--perfo); background-repeat: repeat-y;
}
.fiche__tete { border-bottom: 2px solid var(--encre); padding-bottom: 18px; margin-bottom: 28px; }
.regles { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.regle { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--filet); }
.regle:first-child { border-top: 0; padding-top: 0; }
.regle__n {
  font-family: var(--tamponnage); font-size: 1.05rem; line-height: 1;
  border: 2px solid var(--accent); color: var(--accent); border-radius: 2px;
  padding: 7px 9px; min-width: 2.4rem; text-align: center; height: fit-content;
}
.regle h3 { margin-bottom: 6px; }
/* sur SA page, un réflexe de fiche est une section : son titre monte en h2 et
   garde le calibre du h3 (la fiche reste une fiche, pas une suite de chapitres). */
.regle h2 { margin-bottom: 6px; font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.regle p { margin-bottom: 10px; }
.regle cite, .verbatim cite { display: block; font-style: normal; font-size: .875rem; color: var(--encre-3-txt); }
.regle cite a { color: var(--encre-3-txt); }
/* les <cite> de source affichent des ADRESSES OFFICIELLES en clair : une URL
   n'a pas d'espace, donc sans césure autorisée elle dépassait l'écran de
   80 à 180 px sous 400 px — et le overflow-x:hidden du socle la TRONQUAIT en
   silence (mesuré par check-mobile sur 230 couples page × largeur : fiches,
   sources, déroulés, droits). anywhere ne casse un mot QUE faute de place :
   au-delà de 500 px, rien ne change. */
cite, cite a { overflow-wrap: anywhere; }

/* LE VERBATIM ET SA TRADUCTION : la règle d'or éditoriale du projet.
   Le texte de loi à gauche de son barreau d'encre, la phrase humaine juste en
   dessous. Aucun verbatim ne s'affiche jamais seul. */
.verbatim {
  border-inline-start: 4px solid var(--accent); background: var(--accent-fond);
  padding: 16px 18px; border-radius: 0 var(--rayon) var(--rayon) 0; margin: 0 0 calc(var(--pas) * 2);
}
.verbatim blockquote { margin: 0 0 12px; font-size: .9375rem; color: var(--encre-2); }
.verbatim blockquote p { margin: 0 0 8px; }
.verbatim blockquote p:last-child { margin: 0; }
.verbatim__clair { font-weight: 600; margin: 0 0 8px; }
.verbatim__clair::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em;
  margin-inline-end: .45em;
  background: currentColor;
  clip-path: polygon(14% 52%, 38% 76%, 88% 20%, 96% 30%, 39% 92%, 6% 60%);
  color: var(--accent);
}
.verbatim--refuse { border-inline-start-color: var(--rouge); background: var(--rouge-fond); }
.verbatim--refuse .verbatim__clair::before {
  color: var(--rouge);
  /* pas de coche sur un refus : une coche rouge est un contresens. */
  clip-path: polygon(6% 12%, 94% 12%, 94% 88%, 6% 88%);
  transform: scale(.72);
}

/* ================================================= LE MOTEUR DE SITUATIONS */
.jeu {
  background: var(--papier-2); border-bottom: 1px solid var(--filet-fort);
  padding-block: clamp(24px, 3.4vw, 44px);
}
.jeu__in { max-width: 92ch; margin-inline: auto; padding-inline: var(--gouttiere); }

/* l'en-tête de dossier : la référence, l'avancement, les outils */
.jeu__tete {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
  border: 1px solid var(--filet-fort); border-radius: var(--rayon) var(--rayon) 0 0;
  background: var(--papier-3); padding: 12px 16px;
}
.jeu__ref { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.jeu__outils { display: flex; gap: 8px; }
.jeu__outils button {
  font: 600 .8125rem var(--display); letter-spacing: .06em; text-transform: uppercase;
  background: none; border: 1px solid var(--filet-fort); border-radius: 2px; color: var(--encre-2);
  padding: 7px 11px; cursor: pointer; min-height: 36px;
}
.jeu__outils button:hover { border-color: var(--accent); color: var(--accent); }
/* le son coupé se voit : la mention est RAYÉE du dossier. */
.jeu__outils button[aria-pressed="false"] { text-decoration: line-through; text-decoration-thickness: 2px; }

/* LA JAUGE (DA v2) : le BORDEREAU DE SUIVI du dossier. Chaque pièce est une
   case de formulaire : cochée d'encre bleue quand elle est passée, encadrée
   d'encre quand on y est, vide quand elle attend. */
.jauge { display: flex; gap: 6px; border: 1px solid var(--filet-fort); border-top: 0; background: var(--papier-3); padding: 10px 16px; }
.jauge__p {
  flex: 1; height: 13px; background: var(--papier);
  border: 1px solid var(--filet-fort); border-radius: 1px;
  position: relative;
}
.jauge__p[data-etat="fait"] { background: var(--accent); border-color: var(--accent); }
.jauge__p[data-etat="fait"]::after {
  content: ""; position: absolute; inset: 2px;
  background: #fff;
  clip-path: polygon(12% 55%, 38% 82%, 88% 12%, 97% 24%, 39% 100%, 3% 66%);
  opacity: .9;
}
.jauge__p[data-etat="ici"] { border-color: var(--encre); border-width: 2px; background: var(--papier-3); }

.jeu__corps {
  border: 1px solid var(--filet-fort); border-top: 0; border-radius: 0 0 var(--rayon) var(--rayon);
  background: var(--papier-3); padding: clamp(20px, 3vw, 36px);
  box-shadow: var(--pile);
}

.scene__titre { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-bottom: 16px; }
.scene__titre h2 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.scene p { color: var(--encre-2); }
.scene p:first-of-type { color: var(--encre); }

/* L'ÉTIQUETTE DE PIÈCE (DA v2) : « Pièce n° 1 » n'est plus un mot gris mais
   une vraie étiquette d'inventaire agrafée : bordure, fond papier, coin coupé. */
.scene__titre .ref {
  border: 1px solid var(--filet-fort); background: var(--papier-2);
  padding: 4px 10px 3px; border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  box-shadow: var(--tranche);
}
[dir="rtl"] .scene__titre .ref {
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}

/* LA FICHE POSÉE (DA v2) : chaque scène nouvelle arrive comme une pièce
   qu'on pose sur la pile du dossier — elle glisse d'un demi-doigt, à peine
   tournée, et s'aligne. Une seule animation courte, jamais en boucle. */
.scene--entre, .verdict--entre { animation: poser .26s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes poser {
  0% { transform: translateY(13px) rotate(.35deg); opacity: 0; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}
:root[data-animations="off"] .scene--entre,
:root[data-animations="off"] .verdict--entre { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .scene--entre, .verdict--entre { animation: none; }
}
/* le décor du dossier : un écran d'information, un courriel, un guichet.
   Aucune scénographie dessinée : c'est un DOCUMENT qu'on lit. */
.doc {
  border: 1px solid var(--filet-fort); border-radius: 2px; background: var(--papier);
  margin: calc(var(--pas) * 2.5) 0;
  position: relative; overflow: hidden;
  box-shadow: var(--pile);
}
/* le COIN CORNÉ (DA v2) : une pièce de dossier a vécu — son coin bas droit
   revient sur lui-même. Le triangle est le DOS de la feuille, un ton plus
   soutenu : l'œil lit le pli sans qu'on dessine une seule ligne. */
.doc::after {
  content: ""; position: absolute; inset-inline-end: 0; bottom: 0;
  width: 13px; height: 13px; background: var(--filet);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* un clip-path est PHYSIQUE : en écriture de droite à gauche, le coin corné
   change de côté (inset-inline-end) et le triangle doit se retourner avec. */
[dir="rtl"] .doc::after { clip-path: polygon(0 0, 0 100%, 100% 100%); }
.doc__tete {
  background: var(--sombre); color: #E9E5DA; padding: 9px 14px;
  font: 600 .8125rem var(--display); letter-spacing: .11em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between;
}
.doc__corps { padding: 14px 16px; font-size: .9375rem; }
.doc__corps p { margin: 0 0 10px; }
.doc__corps p:last-child { margin: 0; }
.doc__ligne { display: grid; grid-template-columns: 8.5rem 1fr; gap: 4px 14px; padding: 7px 0; border-top: 1px solid var(--filet); }
.doc__ligne:first-child { border-top: 0; }
.doc__ligne dt { font-family: var(--display); font-weight: 600; font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-3-txt); }
.doc__ligne dd { margin: 0; }
.doc__etat { font-family: var(--tamponnage); letter-spacing: .04em; color: var(--rouge); }
.doc--message .doc__corps { font-family: var(--texte); }
.doc__signature { margin-top: 12px; font-size: .875rem; color: var(--encre-3-txt); }

/* la question et les choix : trois lignes de dossier à cocher */
.question { font-family: var(--display); font-weight: 700; font-size: clamp(1.14rem, 2.2vw, 1.32rem); margin: calc(var(--pas) * 3) 0 calc(var(--pas) * 2); }
.choix { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.choix button {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; width: 100%;
  text-align: start; background: var(--papier); border: 1px solid var(--filet-fort);
  border-radius: var(--rayon); padding: 15px 17px; cursor: pointer;
  font: var(--corps)/1.45 var(--texte); color: var(--encre); min-height: 56px;
  transition: border-color .13s, background .13s, transform .09s, box-shadow .09s;
  box-shadow: var(--tranche);
}
.choix button:hover { border-color: var(--accent); background: var(--accent-fond); }
/* le choix S'APPUIE : il descend d'un pas sous le doigt, sa tranche s'écrase. */
.choix button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.choix button:disabled { cursor: default; opacity: .5; }
.choix__n {
  font-family: var(--tamponnage); font-size: .9375rem; line-height: 1; color: var(--encre-3-txt);
  border: 2px solid var(--filet-fort); border-radius: 2px; padding: 6px 8px; min-width: 2rem; text-align: center;
}
/* au survol, la case du numéro S'ENCRE : le doigt sait déjà où ça tamponne. */
.choix button:hover .choix__n { border-color: var(--accent); color: #fff; background: var(--accent); }
:root[data-animations="off"] .choix button { transition: none; }

/* LE VERDICT : le tampon s'abat sur la page. C'est le moment du projet. */
.verdict {
  --flash: var(--accent);
  border: 2px solid var(--accent); border-radius: var(--rayon); background: var(--accent-fond);
  padding: clamp(20px, 3vw, 32px); position: relative;
  box-shadow: var(--pile);
}
.verdict--refuse { --flash: var(--rouge); border-color: var(--rouge); background: var(--rouge-fond); }
/* le CODE DU DOSSIER REFUSÉ (DA v2) : la bande hachurée en tête de carte —
   le marquage administratif des zones barrées. Une hachure à arrêts durs est
   un SIGNAL d'état, pas un dégradé décoratif : deux encres qui alternent. */
.verdict--refuse::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--rouge) 0 7px, transparent 7px 14px);
  opacity: .55; pointer-events: none;
}
.verdict__tampon { width: min(280px, 66%); margin-bottom: 14px; }

/* L'IMPACT REÇU PAR LA PAGE (DA v2) : quand le tampon frappe, la carte du
   verdict ACCUSE LE COUP — une secousse brève et décroissante, jamais tout
   l'écran — et l'encre « claque » : un voile de la couleur du tampon flashe
   puis disparaît. Les jalons (17 %) sont ceux de l'animation du tampon :
   rien ne bouge avant l'impact. */
.verdict--impact { animation: verdict-secousse .76s linear both; }
@keyframes verdict-secousse {
  0%, 17% { transform: translate(0, 0) rotate(0); }
  21%  { transform: translate(2px, 1px) rotate(.16deg); }
  28%  { transform: translate(-2px, -1px) rotate(-.12deg); }
  38%  { transform: translate(1px, 1px) rotate(.07deg); }
  50%, 100% { transform: translate(0, 0) rotate(0); }
}
.verdict--impact::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--flash); opacity: 0;
  animation: encre-claque .76s linear both;
}
@keyframes encre-claque {
  0%, 16% { opacity: 0; }
  19% { opacity: .1; }
  40%, 100% { opacity: 0; }
}
:root[data-animations="off"] .verdict--impact { animation: none; }
:root[data-animations="off"] .verdict--impact::before { animation: none; content: none; }
@media (prefers-reduced-motion: reduce) {
  .verdict--impact { animation: none; }
  .verdict--impact::before { animation: none; content: none; }
}
.verdict h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-bottom: 10px; }
.verdict__msg { color: var(--encre); }
.verdict--refuse .verdict__msg { color: var(--encre); }
.verdict__source {
  margin-top: 18px; border-top: 1px solid var(--filet); padding-top: 14px; font-size: .9375rem;
}
.verdict__source cite { display: block; font-style: normal; color: var(--encre-3-txt); font-size: .875rem; margin-top: 6px; }
.verdict__suite { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* le récapitulatif final : la liste des droits invoqués, chacun tamponné */
.bilan { display: grid; gap: 14px; }
.bilan__l {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  border: 1px solid var(--filet-fort); border-radius: var(--rayon); background: var(--papier); padding: 15px 17px;
}
.bilan__l h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.bilan__l p { margin: 0; font-size: .9375rem; color: var(--encre-2); }
.bilan__l cite { display: block; font-style: normal; font-size: .8125rem; color: var(--encre-3-txt); margin-top: 8px; }
.bilan__marque { color: var(--accent); }
.bilan__l[data-etat="rate"] .bilan__marque { color: var(--rouge); }
.tampons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: calc(var(--pas) * 2.5) 0; }
.tampons .tampon { width: 176px; }
.tampons .tampon[data-obtenu="non"] { opacity: .22; }

/* LES PORTES reprises dans le bilan (architecture séparée, ordre Mael du 28/07).
   Le module vit dans le HTML servi de la page ; au verdict, le moteur le REPOSE
   ici tel quel. Il reçoit sa respiration et un filet de séparation, rien de
   plus : aucun jeton nouveau, aucune forme nouvelle. */
.jeu__portes {
  margin-top: calc(var(--pas) * 3); padding-top: calc(var(--pas) * 3);
  border-top: 1px solid var(--filet);
}
.jeu__portes .chemise { background: var(--papier); }
.jeu__portes .carte-lien { background: var(--papier-3); }
/* le cachet dateur posé dans la tête d'une page sœur */
.tete-page .cachet-date { margin-top: 26px; }

/* le recours officiel : un escalier de démarches, numéroté */
.recours { list-style: none; margin: 0; padding: 0; counter-reset: rc; }
.recours li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 18px 0;
  border-top: 1px solid var(--filet);
}
.recours li:first-child { border-top: 0; }
.recours li::before {
  counter-increment: rc; content: counter(rc);
  font-family: var(--tamponnage); font-size: 1rem; line-height: 1; color: #fff; background: var(--accent);
  border-radius: 2px; padding: 8px 10px; min-width: 2.3rem; text-align: center; height: fit-content;
}
.recours h3 { margin-bottom: 6px; }
/* sur SA page (architecture séparée), une marche de recours est une section de
   la page : son titre monte en h2 et garde exactement le calibre du h3. */
.recours h2 { margin-bottom: 6px; font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.recours p { margin-bottom: 8px; font-size: .9375rem; color: var(--encre-2); }
/* ⚠ LE DÉLAI N'EST PAS ROUGE, et c'est une correction du 29/07.
   Le contrat visuel (fiche §5) réserve le rouge tampon #B3261E au SEUL tampon
   « REFUSÉ » des mythes : « jamais en décor, jamais en lien, jamais en nappe ».
   Le délai d'une marche de recours est une mention de dossier, pas un refus. Il
   garde toute sa saillance par le CORPS et les CAPITALES, à l'encre pleine. */
.recours .delai {
  font-family: var(--display); font-weight: 700; font-size: .8125rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--encre);
}

/* ======================================================== TABLEAUX, DÉTAILS */
.tableau-hote { overflow-x: auto; border: 1px solid var(--filet-fort); border-radius: var(--rayon); }
.tableau { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: 0; }
.tableau th, .tableau td { padding: 11px 14px; text-align: start; border-top: 1px solid var(--filet); }
.tableau thead th {
  background: var(--sombre); color: #E9E5DA; border-top: 0;
  font-family: var(--display); font-weight: 700; font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase;
}
.tableau tbody tr:nth-child(even) { background: var(--papier-2); }
.tableau td b { font-family: var(--tamponnage); font-weight: 400; font-size: 1.15rem; color: var(--accent); }

details.qr { border-top: 1px solid var(--filet); }
details.qr summary { cursor: pointer; padding: 16px 0; list-style: none; display: flex; gap: 12px; align-items: baseline; }
details.qr summary::-webkit-details-marker { display: none; }
details.qr summary h3 { margin: 0; }
details.qr summary::before { content: "+"; font-family: var(--tamponnage); color: var(--accent); }
details.qr[open] summary::before { content: "–"; }
details.qr > div { padding-bottom: 18px; max-width: 78ch; }

.liste-p { padding-inline-start: 1.15em; }
.liste-p li { margin-bottom: 9px; }
.cartes-liens { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 14px; }
.carte-lien {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center;
  border: 1px solid var(--filet-fort); border-radius: var(--rayon); background: var(--papier-3);
  padding: 15px 17px; text-decoration: none; color: var(--encre);
}
.carte-lien:hover { border-color: var(--accent); background: var(--accent-fond); }
.carte-lien span { font-family: var(--display); font-weight: 700; }
.carte-lien small { grid-column: 1; color: var(--encre-3-txt); font-size: .875rem; }
.carte-lien .ic { color: var(--accent); grid-row: 1 / span 2; }

.encart {
  border: 1px solid var(--filet-fort); border-inline-start: 4px solid var(--encre);
  background: var(--papier-2); padding: 15px 18px; border-radius: 0 var(--rayon) var(--rayon) 0;
  display: flex; gap: 12px; align-items: baseline;
}
/* un tampon posé dans une page de blocs (la 404) */
.bloc-tampon { margin: 4px 0 8px; }
.bloc-tampon .tampon { width: min(280px, 70%); }
.plan-site { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: var(--gouttiere) 32px; }
.journal { list-style: none; margin: 0; padding: 0; }
.journal__e { display: grid; grid-template-columns: 11rem 1fr; gap: 8px 24px; padding: 24px 0; border-top: 1px solid var(--filet); }
.journal__d { font-family: var(--display); font-weight: 700; font-size: .875rem; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-3-txt); margin: 0; }
@media (max-width: 46rem) { .journal__e { grid-template-columns: 1fr; } }

/* la tête des pages intérieures : bloc d'encre, titre monumental.
   DA v2 : le FILIGRANE DE GREFFE — le surtitre répété en très grand corps de
   tampon, à peine plus clair que la nuit, pivoté, coupé par le bord. C'est le
   filigrane des registres administratifs, et il est aria-hidden : décor pur. */
.tete-page {
  background: var(--sombre); color: #E9E5DA; padding-block: clamp(34px, 5vw, 62px);
  position: relative; overflow: hidden;
}
.tete-page .wrap { position: relative; z-index: 1; }
.tete-page__filigrane {
  position: absolute; inset-inline-end: -14px; bottom: -18px; z-index: 0;
  font-family: var(--tamponnage); font-weight: 400;
  font-size: clamp(4rem, 13vw, 9rem); line-height: 1; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap; pointer-events: none;
  color: #F5F2E8; opacity: .055;
  transform: rotate(-3deg);
}
.tete-page h1 { color: #F5F2E8; }
.tete-page .surtitre { color: var(--accent-clair); }
.tete-page__chapeau { font-size: 1.1875rem; color: #C8C4B8; max-width: 68ch; margin: 0; }
/* la bande de dossier : une frise de traits d'encre, comme un dos de classeur */
.bande {
  height: 12px; background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 28px);
  border-bottom: 1px solid var(--filet);
}

/* ============================================================ LE PANNEAU */
/* ⚠ POSITIONNEMENT PHYSIQUE ASSUMÉ, et c'est la seule exception du fichier.
   `writing-mode: vertical-rl` FAIT TOURNER LES AXES LOGIQUES : l'axe inline
   devient vertical, si bien que `inset-inline-end: 0` ne veut plus dire « à
   droite » mais « en bas ». Combiné à `top: 42%`, l'onglet s'étirait sur 58 %
   de la hauteur de la fenêtre et se posait à GAUCHE, en travers du hero (vu à
   l'œil sur une capture, pas deviné). On positionne donc en physique, avec la
   symétrie RTL écrite juste en dessous. */
.panneau-b {
  position: fixed; right: 0; top: 42%; z-index: 46;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--sombre); color: #F1EEE4; border: 0; border-left: 3px solid var(--accent);
  border-radius: var(--rayon) 0 0 var(--rayon); padding: 13px 11px;
  font: 700 .8125rem var(--display); letter-spacing: .1em; text-transform: uppercase;
  writing-mode: vertical-rl; text-orientation: mixed;
}
[dir="rtl"] .panneau-b {
  right: auto; left: 0; border-left: 0; border-right: 3px solid var(--accent);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.panneau-b:hover { background: #0C1220; }
.panneau-b .ic { writing-mode: horizontal-tb; }
.panneau-voile {
  position: fixed; inset: 0; z-index: 47; background: rgba(20, 26, 40, .5);
  opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s;
  /* fermé, le voile ne capte plus AUCUN clic, même pendant sa transition de
     sortie : sans ça, il reste cliquable ~180 ms au-dessus du bouton du
     panneau et mange le clic de réouverture (mesuré à la sonde). */
  pointer-events: none;
}
.panneau-voile[data-ouvert="oui"] { opacity: 1; visibility: visible; pointer-events: auto; }
.panneau {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 48; width: min(28rem, 100%);
  background: var(--papier); border-inline-start: 3px solid var(--accent);
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(101%); visibility: hidden;
  /* la visibilité ne TRANSITIONNE qu'à la fermeture (délai = durée du
     glissement) : à l'ouverture elle est immédiate, sinon le focus posé sur la
     croix tombe dans un élément encore hidden (mesuré à la sonde clavier).
     Rendu identique au pixel : le glissement, lui, ne change pas. */
  transition: transform .2s ease, visibility 0s .2s;
}
.panneau:dir(rtl) { transform: translateX(-101%); }
.panneau[data-ouvert="oui"] { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
:root[data-animations="off"] .panneau, :root[data-animations="off"] .panneau-voile { transition: none; }
.panneau__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--filet); background: var(--papier-2);
  position: sticky; top: 0;
}
.panneau__tete h2 { margin: 0; font-size: 1.14rem; }
.panneau__x { background: none; border: 1px solid var(--filet-fort); border-radius: 2px; color: var(--encre); cursor: pointer; padding: 7px; min-width: 40px; min-height: 40px; display: grid; place-items: center; }
.panneau__x:hover { border-color: var(--accent); color: var(--accent); }
.panneau__corps { padding: 4px 20px 20px; flex: 1; }
.panneau__bloc { padding-block: 18px; border-bottom: 1px solid var(--filet); }
.panneau__bloc h3 { font-size: .8125rem; letter-spacing: .13em; text-transform: uppercase; color: var(--encre-3-txt); margin-bottom: 12px; }
.panneau__ligne { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.panneau__label { font-size: .9375rem; color: var(--encre-2); }
.panneau__liste { list-style: none; margin: 0; padding: 0; }
.panneau__liste li + li { margin-top: 4px; }
.panneau__liste a, .panneau__liste button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  background: none; border: 0; color: var(--encre); font: var(--corps)/1.4 var(--texte);
  padding: 10px 8px; border-radius: 2px; cursor: pointer; text-decoration: none; min-height: 44px;
}
.panneau__liste a:hover, .panneau__liste button:hover { background: var(--accent-fond); color: var(--accent-h); }
.panneau__liste .ic { color: var(--accent); }
.panneau__danger:hover { background: var(--rouge-fond) !important; color: var(--rouge) !important; }
.panneau__danger:hover .ic { color: var(--rouge); }
.panneau__langues { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.panneau__langues a {
  display: block; padding: 9px 14px; border: 1px solid var(--filet-fort); border-radius: 2px;
  text-decoration: none; color: var(--encre); min-height: 42px;
}
.panneau__langues a:hover { border-color: var(--accent); background: var(--accent-fond); }
.panneau__langues a[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.panneau__note, .panneau__pied { font-size: .875rem; color: var(--encre-3-txt); }
.panneau__pied { padding: 14px 20px; border-top: 1px solid var(--filet); background: var(--papier-2); margin: 0; }
.raccourcis { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: .9375rem; }
.raccourcis dt { margin: 0; }
.raccourcis dd { margin: 0; color: var(--encre-2); }
kbd {
  font: 600 .8125rem var(--display); border: 1px solid var(--filet-fort); border-bottom-width: 2px;
  border-radius: 2px; padding: 2px 6px; background: var(--papier-2);
}

.seg { display: inline-flex; border: 1px solid var(--filet-fort); border-radius: 2px; overflow: hidden; }
.seg__b {
  background: var(--papier-3); border: 0; color: var(--encre-2); cursor: pointer;
  font: 600 .9375rem var(--texte); padding: 9px 13px; min-height: 42px;
}
.seg__b + .seg__b { border-inline-start: 1px solid var(--filet-fort); }
.seg__b:hover { background: var(--accent-fond); color: var(--accent-h); }
/* l'état choisi prend le bleu FONCÉ : blanc sur --accent ne vaut que pour du
   grand texte au sens WCAG, et ces libellés sont à 15 px. */
.seg__b[aria-pressed="true"] { background: var(--accent-h); color: #fff; }

/* ============================================================ LE PIED */
.pied { background: var(--sombre); color: #C8C4B8; padding-block: clamp(38px, 5vw, 62px); border-top: 3px solid var(--accent); }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(4, minmax(0, 1fr)); gap: 30px var(--gouttiere); }
.pied h2 { font-size: .8125rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-clair); margin-bottom: 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.pied li { margin-bottom: 8px; }
.pied a { color: #DCD8CD; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__nom { font-family: var(--display); font-weight: 700; font-size: 1.14rem; color: #F5F2E8; margin: 12px 0 6px; }
.pied__marque p { font-size: .9375rem; }
.pied__contact { display: grid; gap: 2px; margin-top: 12px; }
.pied__contact span { font-size: .8125rem; color: #9AA1B2; text-transform: uppercase; letter-spacing: .08em; }
.pied__bas { border-top: 1px solid #2A3346; margin-top: 34px; padding-top: 22px; font-size: .875rem; display: grid; gap: 10px; }
.pied__avert { border: 1px solid #3A4356; border-inline-start: 3px solid var(--accent-clair); padding: 12px 15px; color: #DCD8CD; }
@media (max-width: 62rem) { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .pied__grille { grid-template-columns: 1fr; } }

/* ====================================== FEUILLETER LE DOSSIER (pages)
   Transitions entre pages du même site (View Transitions cross-document) :
   l'ancienne page s'efface, la nouvelle se POSE comme une fiche — le même
   geste que les scènes du jeu. Amélioration progressive pure : Chromium 126+
   seulement, les autres navigateurs naviguent comme avant, zéro JavaScript. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-part .14s ease-in both;
}
::view-transition-new(root) {
  animation: vt-pose .2s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes vt-part { to { opacity: 0; } }
@keyframes vt-pose {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
:root[data-animations="off"]::view-transition-old(root),
:root[data-animations="off"]::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ================================================== MODE LECTURE, MOBILE */
:root[data-lecture="oui"] .utilite, :root[data-lecture="oui"] .bandeau,
:root[data-lecture="oui"] .chercher, :root[data-lecture="oui"] .nav,
:root[data-lecture="oui"] .hero__fond, :root[data-lecture="oui"] .piece,
:root[data-lecture="oui"] .chiffres { display: none !important; }
:root[data-lecture="oui"] .hero::after { display: none; }
:root[data-lecture="oui"] body { --large: 82ch; }

@media (max-width: 34rem) {
  :root { --gouttiere: 16px; }
  .panneau-b { writing-mode: horizontal-tb; inset-inline: auto 12px; top: auto; bottom: 12px; border-radius: var(--rayon); }
  .jeu__outils { width: 100%; }
  .jeu__outils button { flex: 1; }
  .doc__ligne { grid-template-columns: 1fr; }
  .verdict__tampon, .tampon { width: min(240px, 92%); }
  .regle { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ==================================================== IMPRESSION
   Une fiche imprimée est le livrable du projet : elle sort à l'encre noire, la
   chrome disparaît, et chaque source reste lisible en clair. */
@media print {
  :root { --papier: #fff; --papier-2: #fff; --papier-3: #fff; --encre: #000; --encre-2: #222; --encre-3-txt: #444; --accent: #000; --rouge: #000; --filet: #999; --filet-fort: #666; --grain-force: 0;
    /* le papier imprimé est un VRAI papier : il n'a besoin ni d'ombres de
       pile, ni de foulage simulé, ni de perforations dessinées. */
    --pile: none; --tranche: none; --foulage: none; }
  .btn, .choix button { box-shadow: none; }
  .carte-dossier::before, .carte-dossier::after, .doc::after { display: none; }
  /* #portes : les portes sont de la navigation. Une fiche imprimée sort seule,
     sans la liste des autres pages du dossier (architecture séparée, 28/07). */
  body::before, .utilite, .tete, .bandeau, .panneau, .panneau-b, .panneau-voile,
  .pied__grille, .chiffres, .hero__fond, .jeu__outils, .jauge, .chercher,
  .saut, .bande, #portes, .jeu__portes { display: none !important; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .hero::after { display: none; }
  .tete-page { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
  .tete-page h1, .tete-page .surtitre, .tete-page__chapeau { color: #000 !important; }
  .section, .jeu { padding-block: 12pt; }
  .tampon { mix-blend-mode: normal; opacity: 1; }
  .fiche { border: 0; }
  .fiche__in { padding-inline-start: 0; }
  .fiche__in::before, .fiche__in::after { display: none; }
  a { color: #000; text-decoration: underline; }
  .verbatim { border-inline-start: 3pt solid #000; background: #f4f4f4; }
  .regle, .recours li, details.qr { break-inside: avoid; }
  /* la FICHE (les réflexes) tient ses pages ; les droits sourcés commencent sur
     une page neuve. On imprime la fiche seule pour la pochette du billet, ou
     tout, selon le besoin : le saut de page rend le choix possible. */
  #droits-acquis { break-before: page; }
  details.qr > div { display: block !important; }
  /* Chrome ≥ 131 ne masque plus le contenu d'un <details> fermé par display
     mais par content-visibility sur ::details-content : le display:block
     ci-dessus n'imprimait QUE la question ouverte (prouvé au print-to-pdf sur
     Chrome 150 : la FAQ entière sortait en 2 pages). Règle SÉPARÉE : un
     sélecteur inconnu jette sa règle, il ne doit emporter que lui. */
  details.qr:not([open])::details-content { content-visibility: visible; display: block; }
  .pied { background: #fff; color: #000; border-top: 1pt solid #000; padding-block: 10pt; }
  .pied__bas { border-top: 0; margin-top: 0; }
  .pied__avert { border: 1pt solid #000; color: #000; }
}