@charset "utf-8";
/* =============================================================================
   ICHOR — SYSTEME DE DESIGN, SOURCE UNIQUE
   Ligne de registre : `ichor-semaine` — « Voie du temps » (FRONTEND.md §2).
   -----------------------------------------------------------------------------
   These    : une semaine de marche n'est pas une direction a deviner, c'est un
              calendrier de moments ou l'on saura.
   Signature PORTANTE : `grid-template-columns: [voie] min-content [corps] 1fr`.
              La voie EST la premiere colonne de grille. La retirer du DOM fait
              tomber la premiere piste a 0 px et tous les jetons perdent leur
              ancre. Aucun `position: fixed`, aucun calque echangeable.
   Lumiere  : froide, rasante MONTANTE depuis le bas du viewport, FIXE.
   Rayons   : 0 partout, 2px sur les jetons uniquement.
   Durees   : 80 · 130 · 200 · 320 · 520 ms.
   Polices  : piles systeme Windows. Aucune requete reseau, aucun CDN (§5).
   -----------------------------------------------------------------------------
   ORDRE DE LA FEUILLE, et il n'est pas negociable (§6.3 : une media query
   n'ajoute AUCUNE specificite) :
     §0 tokens · §1 base · §2 coquille · §3 signature · §4 composants ·
     §5 les quatre fonctions · §6 revelation · §7 responsive ·
     §8 impression · §9 mouvement reduit · §10 COULEURS FORCEES — EN DERNIER.
   -----------------------------------------------------------------------------
   Deux regles de redaction qui ont coute une session chacune :
     §6.1 — dans clamp()/calc(), `+` et `-` prennent un espace DES DEUX COTES.
            « 1.35rem+5.6vw » fait retomber TOUTE la page a 16 px, sans erreur.
     §6.2 — les valeurs de base se portent par HERITAGE (body, tbody), jamais
            par selecteur direct : toute declaration directe bat l'heritage,
            donc les variantes n'ont aucun jeu de specificite a gagner.
     §6.12 — `overflow-x` n'est pose NI sur html NI sur body : les deux ensemble
            aveuglent la gate de debordement.
   ========================================================================== */

/* ============================ §0 · LES TOKENS ============================= */

:root {
  /* --- fond & encre — ratios mesures PAR CANVAS, jamais lus dans la chaine -- */
  --fond:       #0A0E11;   /* fond de page                                     */
  --pan:        #121A1E;   /* panneau, cellule, jeton                          */
  --encre:      #E8EDEF;   /* 16,42:1 sur --fond                               */
  --encre-2:    #A6B2B8;   /*  8,95:1 sur --fond — jamais sous 18 px de prose  */
  --filet:      rgba(232, 237, 239, .16);
  --filet-fort: rgba(232, 237, 239, .34);

  /* --- deux accents, deux ROLES semantiques, jamais decoratifs ------------- */
  --jade:       #6FE0C0;   /* 12,09:1 — ce qui PORTE la these                  */
  /* Corail : #FF7A6B rendait 7,61:1 sur la couleur DECLAREE mais 4,47:1 sous
     la lumiere reellement peinte. Corriger la couleur, jamais le seuil.       */
  --corail:     #FF8B7D;   /*  8,53:1 — ce qui la CASSE                        */

  /* --- rupture de registre : l'ecran clair (§9, monnaie n°1) --------------- */
  --clair-f:    #E9EBE6;
  --clair-e:    #0E1214;   /* 15,68:1 sur --clair-f                            */
  --clair-2:    #3B4448;
  --clair-jade: #0F6B52;
  --clair-cor:  #B03A2C;
  --clair-filet: rgba(14, 18, 20, .22);

  /* --- geometrie ---------------------------------------------------------- */
  --voie-w:     clamp(9rem, 5.9rem + 5.4vw, 13rem);
  --gout:       clamp(1.1rem, 0.6rem + 1.4vw, 2rem);
  --rail:       1.35rem;
  --largeur:    78rem;
  --marge:      clamp(1.1rem, 0.4rem + 2.2vw, 3.2rem);
  --pas-filet:  33px;
  --tete-h:     3.25rem;
  --cible:      44px;      /* AAA 2.5.5 — la valeur qu'on CONSTRUIT (§6.10)    */

  /* --- echelle typographique ---------------------------------------------- */
  --t-1:  .72rem;
  --t-2:  .78rem;
  --t-3:  .88rem;
  --t-4:  clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  --t-5:  clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  --t-6:  clamp(1.55rem, 1.05rem + 1.9vw, 2.6rem);
  --t-7:  clamp(2.5rem, 1.2rem + 5.4vw, 5.4rem);
  --t-8:  clamp(5.5rem, 2rem + 15vw, 13.5rem);   /* §9, monnaie n°2 : l'echelle */

  /* --- rayons : 0 PARTOUT, sauf le jeton (un objet pose) ------------------- */
  --r-0: 0;
  --r-jeton: 2px;

  /* --- durees -------------------------------------------------------------- */
  --d1: 80ms; --d2: 130ms; --d3: 200ms; --d4: 320ms; --d5: 520ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* --- piles typographiques ------------------------------------------------ */
  --f-titre: "Segoe UI", "Franklin Gothic", Arial, sans-serif;
  --f-prose: Constantia, "Iowan Old Style", Georgia, serif;
  --f-mono:  Consolas, "Cascadia Mono", ui-monospace, monospace;
}

/* ============================== §1 · BASE ================================= */

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

html {
  scroll-behavior: smooth;
  /* ⛔ `--tete-h` ne mesure QUE la barre du haut — la navigation, elle, ajoute
     une rangee de 44 px minimum, et deux ou trois sur un telephone. Une
     reserve calee sur `--tete-h` seul faisait atterrir chaque saut d'ancre
     SOUS la navigation collante : le titre vise etait la, invisible. La
     reserve porte donc les deux etages.                                      */
  scroll-padding-block-start: calc(var(--tete-h) + var(--cible) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* HERITAGE (§6.2) : couleur, fonte, corps et interligne descendent d'ici.   */
  color: var(--encre);
  font-family: var(--f-prose);
  font-size: var(--t-4);
  line-height: 1.62;
  /* ⛔ CHIFFRES ALIGNES, et c'est la CAPTURE qui l'a impose, pas une preference.
     Constantia sort des chiffres elzeviriens par defaut : dans « le centile 0 »
     le zero descend sous la ligne et se lit « o ». Elegant dans une phrase,
     illisible quand le chiffre EST le propos — et ce projet ecrit pour des
     debutants. Aucun gate du §5 ne voit ce defaut : il se lit a l'oeil.       */
  font-variant-numeric: lining-nums;
  background-color: var(--fond);
  /* LUMIERE : froide, rasante, MONTANTE depuis le bas du viewport, FIXE.
     La page est eclairee comme un ecran pose a plat sur un bureau.            */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(232, 237, 239, .045) 0 1px, rgba(0, 0, 0, 0) 1px var(--pas-filet)),
    linear-gradient(to top,
      rgba(111, 224, 192, .075) 0%,
      rgba(126, 174, 200, .042) 14%,
      rgba(0, 0, 0, 0) 44%),
    radial-gradient(128% 58% at 50% 116%,
      rgba(150, 202, 226, .13), rgba(0, 0, 0, 0) 72%);
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%;
}

h1, h2, h3, h4,
.dix__v, .chiffre__n, .rang, .jeton__h, .pastille, .triple__n, .marque {
  font-family: var(--f-titre);
}

h1, h2 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.012em;
  line-height: .96;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
h1 { font-size: var(--t-7); }
h2 { font-size: var(--t-6); }
h3 {
  font-weight: 900; text-transform: uppercase;
  font-size: 1.02rem; letter-spacing: .01em;
  margin: 2.2rem 0 .9rem;
  padding-block-end: .45rem;
  border-block-end: 1px solid var(--filet-fort);
}
h4 {
  font-weight: 700; text-transform: uppercase;
  font-size: var(--t-2); letter-spacing: .09em;
  margin: 1.5rem 0 .5rem;
}

p { margin: 0 0 1.05em; }
b, strong { font-weight: 700; }
em { font-style: italic; }
sup { font-size: .7em; }
a { color: var(--jade); }

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

.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Controle natif rendu invisible mais FOCALISABLE : son etiquette est la cible
   reelle, et c'est elle qui porte les 44 px. Le banc mesure les DEUX et le dit
   — masquer un controle puis se vanter de sa cible serait un vert fabrique.   */
.ctrl {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: 0; padding: 0; border: 0;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

.cadre { inline-size: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; }

/* ============================ §2 · LA COQUILLE ============================ */

.evite {
  position: absolute; inset-block-start: -100%; inset-inline-start: 0;
  z-index: 40;
  display: inline-flex; align-items: center;
  min-block-size: var(--cible); min-inline-size: var(--cible);
  padding-inline: 1rem;
  background: var(--jade); color: #06110D;
  font-family: var(--f-titre); font-weight: 700; text-decoration: none;
  transition: inset-block-start var(--d2) var(--ease);
}
.evite:focus { inset-block-start: 0; }

.tete {
  position: sticky; inset-block-start: 0; z-index: 12;
  background: var(--fond);
  border-block-end: 1px solid var(--filet-fort);
}
.tete__in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem 1.2rem;
  min-block-size: var(--tete-h);
  padding-block: .3rem;
}
.marque {
  font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  font-size: 1.15rem; line-height: 1;
  color: var(--encre); text-decoration: none;
  display: inline-flex; align-items: center;
  min-block-size: var(--cible); min-inline-size: var(--cible);
}
.marque:hover { color: var(--jade); }
.tete__s {
  margin: 0; flex: 1 1 12rem;
  font-family: var(--f-mono); font-size: var(--t-1);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--encre-2);
}

/* --- l'interrupteur de mode de lecture (fonction 2) ---------------------- */
.bascule {
  display: inline-flex; align-items: center; gap: .55rem;
  min-block-size: var(--cible); min-inline-size: var(--cible);
  padding-inline: .7rem;
  border: 1px solid var(--filet-fort);
  background: var(--fond);
  font-family: var(--f-titre); font-weight: 700;
  font-size: var(--t-1); letter-spacing: .07em; text-transform: uppercase;
  color: var(--encre);
  cursor: pointer;
  transition: border-color var(--d2) var(--ease), color var(--d2) var(--ease);
}
.bascule:hover { border-color: var(--jade); color: var(--jade); }
.bascule__t { inline-size: 2rem; block-size: 1rem; border: 1px solid currentColor; position: relative; flex: none; }
.bascule__t::before {
  content: ""; position: absolute; inset-block: 1px; inset-inline-start: 1px;
  inline-size: .75rem; background: currentColor;
  transition: inset-inline-start var(--d2) var(--ease);
}
#mode-bref:checked ~ .bascule { border-color: var(--jade); color: var(--jade); }
#mode-bref:checked ~ .bascule .bascule__t::before { inset-inline-start: calc(100% - .85rem); }
#mode-bref:focus-visible ~ .bascule { outline: 2px solid var(--jade); outline-offset: 3px; }
.bascule__e { font-family: var(--f-mono); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--encre-2); }

/* --- la navigation : UN SEUL fragment, injecte a la generation ------------ */
.nav { border-block-start: 1px solid var(--filet); }
.nav__l {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--filet);
}
.nav__l li { flex: 1 1 auto; display: flex; }
.nav a {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: var(--cible); min-inline-size: var(--cible);
  padding: .4rem .9rem;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  text-align: center;
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease);
}
.nav a:hover { background: var(--jade); color: #06110D; }
.nav a[aria-current="page"] { color: var(--jade); box-shadow: inset 0 -3px 0 var(--jade); }
.nav a[aria-current="page"]:hover { color: #06110D; }

/* --- le pied : les sources ET leur date ---------------------------------- */
.pied {
  padding-block: clamp(2.2rem, 1.2rem + 2.6vw, 4rem);
  border-block-start: 1px solid var(--filet-fort);
}
.pied__t { font-size: clamp(1.2rem, .9rem + 1vw, 1.6rem); margin-block-end: 1.2rem; }
.pied__l {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  display: grid; gap: 1px;
  /* `min(19rem, 100%)` : une piste de 304 px ne rentre pas dans la marge utile
     d'un ecran de 320 px, ni dans les ~187 px que rend un zoom navigateur a
     200 %. Mesure du 2026-08-16 : 18 px de debordement horizontal, dix lignes
     de sources fautives. Le defaut ne se voit a AUCUNE des cinq largeurs
     obligatoires — c'est le zoom qui le revele, et lui seul.                */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  background: var(--filet);
  border: 1px solid var(--filet);
  font-family: var(--f-mono); font-size: var(--t-2); line-height: 1.5;
  color: var(--encre-2);
}
.pied__l li { background: var(--fond); padding: .55rem .7rem; }
.pied__l b { color: var(--encre); font-family: var(--f-titre); letter-spacing: .04em; }
.pied__d { color: var(--jade); font-style: normal; }
.pied__n { max-inline-size: 62ch; font-size: var(--t-3); color: var(--encre-2); margin: 0; }

/* ===================== §3 · LA SIGNATURE : LA VOIE DU TEMPS =============== */
/* La piste EST la grille ; la voie en est la PREMIERE COLONNE, en min-content.
   Retirer `.voie` du DOM fait tomber cette piste a 0 px et prive les jetons de
   leur ancre : la mise en page change, donc la signature est PORTANTE (§4).  */

.piste {
  display: grid;
  grid-template-columns: [voie] min-content [corps] minmax(0, 1fr);
  column-gap: var(--gout);
  inline-size: min(100% - 2 * var(--marge), var(--largeur));
  margin-inline: auto;
  padding-block: clamp(2.6rem, 1.4rem + 3.4vw, 5rem);
  border-block-end: 1px solid var(--filet);
}

.voie {
  grid-column: voie;
  position: relative;
  inline-size: var(--voie-w);
  min-block-size: var(--voie-h, 34rem);
  border-inline-start: 1px solid var(--filet-fort);
}
.corps { grid-column: corps; min-inline-size: 0; }

/* AJOUT — une section SANS voie du temps. `page/404.html` n'a rien a dater : ni
   jour, ni jeton, ni echeance. Poser une voie vide y serait du decor, et une
   voie remplie serait une invention. Ce modificateur supprime la colonne du
   rail plutot que de la laisser vide -- sinon le `column-gap` de la grille
   subsiste et decale tout le corps vers la droite d'une gouttiere fantome.
   Aucun jeton de style n'est touche : c'est une declaration en plus.          */
.piste--seule { grid-template-columns: minmax(0, 1fr); }
/* `grid-column: corps` viserait une ligne nommee qui n'existe plus dans cette
   grille-la ; les navigateurs la resolvent alors en ligne 1, ce qui est bien le
   resultat voulu -- mais par un CHEMIN DE RATTRAPAGE, pas par une regle. On
   l'ecrit donc explicitement, plutot que de dependre d'un repli.              */
.piste--seule .corps { grid-column: 1; }

.voie__echelle { position: absolute; inset: 0; }

/* Le libelle de jour vit dans la gouttiere du rail, grave verticalement :
   aucun jeton n'y entre jamais, donc aucun libelle ne peut etre recouvert.
   PROPRIETES PHYSIQUES obligatoires — en `vertical-rl`, `inset-block-start`
   devient horizontal et les cinq jours s'empilent cote a cote.              */
.ech__jour {
  position: absolute;
  left: 0;
  top: calc(var(--t) * 1%);
  z-index: 3;
  writing-mode: vertical-rl;
  padding-block: .4rem .2rem;
  background: var(--fond);
  font-family: var(--f-mono); font-size: var(--t-1); letter-spacing: .1em;
  color: var(--encre-2);
}
.ech__jour::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: calc(var(--voie-w) - 1px);
  border-top: 1px solid var(--filet);
}

.bande {
  position: absolute;
  inset-inline-start: 0;
  inline-size: 5px;
  inset-block-start: calc(var(--t0) * 1%);
  block-size: calc((var(--t1) - var(--t0)) * 1%);
  margin: 0;
}
.bande--casse { background: var(--corail); }
.bande--porte { background: var(--jade); }
.bande--pic   { background: var(--encre); }

.tic {
  position: absolute;
  inset-inline-start: 0;
  inline-size: .55rem;
  inset-block-start: calc(var(--t) * 1%);
  border-block-start: 1px solid var(--filet-fort);
}

.voie__jetons { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; }

.jeton {
  position: absolute;
  inset-inline: var(--rail) 0;
  inset-block-start: calc(var(--t) * 1%);
  translate: 0 var(--pousse, 0rem);
  padding: .32rem .42rem .38rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-jeton);        /* le SEUL rayon du systeme */
  background: var(--pan);
  color: var(--encre);
  transition: border-color var(--d2) var(--ease), background-color var(--d2) var(--ease);
}
.jeton::before {
  content: ""; position: absolute;
  inset-inline-start: calc(-1 * var(--rail));
  inline-size: var(--rail);
  /* le -1px annule la bordure : `top` d'un enfant absolu se resout contre la
     boite de REMPLISSAGE. Sans lui, 2,08 px de derive systematique mesuree.  */
  inset-block-start: calc(-1px - var(--pousse, 0rem));
  border-block-start: 1px solid currentColor;
}
.jeton--fin { translate: 0 calc(-100% + var(--pousse, 0rem)); }
.jeton--fin::before { inset-block-start: calc(100% + 1px - var(--pousse, 0rem)); }
.jeton--porte { border-color: var(--jade); color: var(--jade); }
.jeton--casse { border-color: var(--corail); color: var(--corail); }
.jeton__h { display: block; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .04em; color: inherit; }
.jeton__q {
  display: block; font-family: var(--f-prose); font-size: .79rem; line-height: 1.26;
  color: var(--encre-2); margin-block-start: .14rem;
}
.jeton--porte .jeton__q, .jeton--casse .jeton__q { color: var(--encre); }

/* =========================== §4 · LES COMPOSANTS ========================= */

.rang {
  font-family: var(--f-titre); font-weight: 700;
  font-size: var(--t-2); letter-spacing: .16em; text-transform: uppercase;
  color: var(--jade);
  margin-block-end: .55rem;
}
.corps > p, .corps li { max-inline-size: 62ch; }
.these { max-inline-size: 46ch; font-size: var(--t-5); margin-block: 1.6rem 2.6rem; }

.sur {
  font-family: var(--f-mono); font-size: var(--t-2);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--encre-2);
  margin-block-end: 1.4rem; padding-block-end: .8rem;
  border-block-end: 1px solid var(--filet);
  max-inline-size: none;
}
.h1-b { color: var(--jade); }

.src {
  font-family: var(--f-mono); font-size: var(--t-2); line-height: 1.5;
  color: var(--encre-2);
  margin-block: -.3rem 1.6rem;
  padding-inline-start: .7rem;
  border-inline-start: 1px solid var(--filet);
}
.src .d { color: var(--jade); }

.dix {
  list-style: none; margin: 0 0 2.2rem; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  background: var(--filet);
  border: 1px solid var(--filet);
}
.dix__c { background: var(--pan); padding: 1.25rem 1.25rem 1.1rem; max-inline-size: none; }
.dix__t {
  font-family: var(--f-mono); font-size: var(--t-1); letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-2); margin-block-end: .5rem;
}
.dix__v {
  font-weight: 900; text-transform: uppercase; line-height: .95;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
  color: var(--jade); margin-block-end: .7rem;
}
.dix__d { font-size: var(--t-3); margin-block-end: .6rem; }
.dix__d b { font-family: var(--f-mono); font-weight: 700; letter-spacing: -.01em; }

.chute { border-inline-start: 3px solid var(--jade); padding: .1rem 0 .1rem 1rem; margin-block-start: 1.8rem; }
.alerte {
  border: 1px solid var(--corail); border-inline-start-width: 5px;
  padding: .85rem 1rem; background: var(--pan);
  font-size: var(--t-3); max-inline-size: none;
}
.alerte b { color: var(--corail); }

/* --- densite n°1 : les tableaux serres (§9, monnaie n°3) ----------------- */
.tableau-enveloppe { overflow-x: auto; margin-block-end: 1rem; }
.tb { inline-size: 100%; border-collapse: collapse; font-size: var(--t-3); }
.tb caption {
  text-align: start; font-family: var(--f-mono); font-size: .76rem;
  letter-spacing: .04em; color: var(--encre-2); padding-block-end: .5rem;
}
.tb thead th {
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: var(--t-1); letter-spacing: .09em; text-align: end;
  padding: .42rem .5rem;
  border-block-end: 1px solid var(--filet-fort);
  color: var(--encre);
}
.tb thead th:first-child { text-align: start; }
/* HERITAGE (§6.2) : la couleur de base des cellules descend de tbody.        */
.tb tbody { color: var(--encre); font-family: var(--f-mono); }
.tb tbody th, .tb tbody td {
  padding: .42rem .5rem;
  border-block-end: 1px solid var(--filet);
  text-align: end; font-weight: 400; overflow-wrap: anywhere;
}
.tb tbody th { text-align: start; font-family: var(--f-titre); font-weight: 700; letter-spacing: .02em; }
.tb tbody tr { transition: background-color var(--d3) var(--ease); }
.tb tbody tr:hover { background: var(--pan); }
.tb .bas { color: var(--corail); }
.tb .haut { color: var(--jade); }
.tb .nd { color: var(--encre-2); }

/* --- densite n°2 : les barres -------------------------------------------- */
.barres { list-style: none; margin: 0 0 1rem; padding: 0; max-inline-size: none; }
.barres li {
  display: grid; grid-template-columns: 7.4rem minmax(0, 1fr) 5.4rem;
  align-items: center; gap: .6rem;
  padding-block: .3rem; border-block-end: 1px solid var(--filet);
  max-inline-size: none;
}
.barres__n { font-family: var(--f-titre); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.barres__b { block-size: .55rem; inline-size: calc(var(--w) * 1%); min-inline-size: 1px; background: var(--jade); }
/* « non releve » n'est pas une valeur : un filet pointille de 1 px se lit
   comme un axe, une barre pleine se lisait comme « plus que mercredi ».     */
.barres__b--nd { background: repeating-linear-gradient(90deg, var(--filet) 0 2px, transparent 2px 6px); inline-size: 100%; block-size: 1px; }
.barres__v { font-family: var(--f-mono); font-size: .82rem; text-align: end; }
.barres__v.nd { color: var(--encre-2); font-size: var(--t-1); }

/* --- l'echelle : le tres grand chiffre (§9, monnaie n°2) ----------------- */
.chiffre {
  margin: 2rem 0 1.6rem; padding: 1.4rem 0 0;
  border-block-start: 1px solid var(--filet-fort);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, .4rem + 2vw, 2.4rem);
  align-items: start;
}
.chiffre__quoi {
  grid-column: 1 / -1;
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-2); margin-block-end: .4rem;
}
.chiffre__n {
  grid-column: 1; grid-row: 2 / span 2;
  font-weight: 900; font-size: var(--t-8); line-height: .78;
  color: var(--corail); margin: 0; letter-spacing: -.05em;
}
.chiffre__u {
  grid-column: 2; grid-row: 2; align-self: end;
  font-family: var(--f-mono); font-size: .86rem; line-height: 1.4;
  color: var(--encre-2); padding-block-end: .35rem;
  border-block-end: 1px solid var(--filet-fort);
}
.chiffre__d { grid-column: 2; grid-row: 3; font-size: var(--t-3); margin-block-start: .8rem; }
.chiffre__u, .chiffre__d { max-inline-size: 46ch; }
.chiffre .src { grid-column: 1 / -1; margin-block: .4rem 0; max-inline-size: 62ch; }

/* --- le fleau : peser la confluence (greffe de la direction II) ---------- */
.fleau { margin: 1.6rem 0; max-inline-size: none; }
.fleau__b {
  display: grid; grid-template-columns: repeat(100, 1fr);
  block-size: 1.5rem; align-items: stretch;
  border: 1px solid var(--filet-fort); background: var(--pan);
}
.fleau__p { grid-column: 1 / span var(--porte); background: var(--jade); }
.fleau__c { grid-column: span var(--casse) / -1; background: var(--corail); }
.fleau__l {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--f-mono); font-size: var(--t-1); letter-spacing: .06em;
  text-transform: uppercase; margin-block-start: .35rem;
}
.fleau__l .p { color: var(--jade); }
.fleau__l .c { color: var(--corail); }

/* --- verdicts ------------------------------------------------------------ */
.verdicts { list-style: none; margin: 0 0 1rem; padding: 0; }
.verdicts > li { border-block-start: 1px solid var(--filet-fort); padding-block: 1.1rem; max-inline-size: none; }
.verdicts__q { font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; font-size: 1rem; margin-block-end: .6rem; }
.verdicts__p, .verdicts__c { font-size: var(--t-3); margin-block-end: .55rem; max-inline-size: 66ch; }
.pastille {
  display: inline-block; font-size: .68rem; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .12rem .45rem; margin-inline-end: .45rem;
  border: 1px solid currentColor; vertical-align: .08em;
}
.pastille--porte { color: var(--jade); }
.pastille--casse { color: var(--corail); }

/* --- LA FIGURE : un schema qui repond a une QUESTION ecrite a cote de lui - */
/* AJOUT du 2026-08-16, pour la page « La lecture au banc d'essai ». AUCUN
   token n'a ete touche : ce bloc n'assemble que ceux qui existent deja.
   Trois decisions, et leur raison :
     1. le SVG est INLINE (jamais une image externe) et son texte reste TRES
        court. A 375 px le dessin se reduit d'environ 15 % : une phrase mise
        dedans y devient illisible et reste invisible pour un lecteur d'ecran.
        Les phrases vivent donc dans `.fig__l`, en HTML.
     2. les formes portent les DEUX MEMES ROLES semantiques que le reste du
        systeme — jade porte, corail casse — par des CLASSES et jamais par un
        attribut `fill=` en dur, sans quoi le bloc §10 ne pourrait pas les
        reprendre en couleurs forcees.
     3. `.fig` est declaree AVANT le pont `.clair` ci-dessous, qui la reteinte
        pour l'ecran clair : meme discipline que `.src`, et pour la meme
        raison — le composant est juste, c'est le FOND qui change sous lui.  */
.fig {
  /* `margin-inline: 0` n'est PAS decoratif : la feuille du navigateur pose
     `margin: 1em 40px` sur <figure>. Mesure du 2026-08-16 a 375 px : le SVG
     tombait a 214 px de large au lieu de 311, donc a 0,59 d'echelle, donc a
     7,7 px de texte rendu. Un defaut de LISIBILITE cause par une marge par
     defaut jamais ecrite nulle part.                                        */
  margin: 1.5rem 0 1.8rem;
  border: 1px solid var(--filet-fort);
  background: var(--pan);
  max-inline-size: none;
}
.fig__q {
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: 1rem; line-height: 1.16; letter-spacing: .01em;
  margin: 0; padding: .85rem .9rem .55rem;
}
.fig svg {
  display: block;
  inline-size: min(100% - 1.8rem, 27rem);
  block-size: auto;
  margin-inline: .9rem;
}
.fig__l { font-size: var(--t-3); margin: .75rem 0 0; padding: 0 .9rem .9rem; max-inline-size: 62ch; }
.fig__l b { font-family: var(--f-mono); font-weight: 700; }
.fig .src { margin: 0 .9rem .9rem; }
.fig .s-t { fill: none; stroke: var(--filet-fort); stroke-width: 1; }
.fig .s-n { fill: none; stroke: var(--encre-2); stroke-width: 2; }
.fig .s-p { fill: none; stroke: var(--jade); stroke-width: 2; }
.fig .s-c { fill: none; stroke: var(--corail); stroke-width: 2; }
.fig .s-nf { fill: var(--encre-2); stroke: none; }
.fig .s-pf { fill: var(--jade); stroke: none; }
.fig .s-cf { fill: var(--corail); stroke: none; }
/* 16 et 14 unites, pas 15 et 13 : a 375 px le dessin rend a ~0,86 d'echelle,
   donc ces valeurs valent 13,8 et 12,0 px reels. Un texte de SVG se dimensionne
   contre son ECHELLE DE RENDU la plus defavorable, jamais contre le confort du
   grand ecran ou on le dessine.                                             */
.fig .s-x  { fill: var(--encre); stroke: none; font-family: var(--f-mono); font-size: 16px; }
.fig .s-x2 { fill: var(--encre-2); stroke: none; font-family: var(--f-mono); font-size: 14px; }
.fig .s-xp { fill: var(--jade); }
.fig .s-xc { fill: var(--corail); }
.fig .s-xg { font-family: var(--f-titre); font-weight: 900; font-size: 21px; }
/* La bande de fond d'un schema — la ZONE dans laquelle une valeur ne dit rien.
   AJOUT du 2026-08-16, page « Les actifs ». Elle passe par une CLASSE et non
   par un `fill="var(--pan)"` en dur : le bloc §10 doit pouvoir la reprendre,
   et `--pan` y resterait sombre sur un fond Canvas clair.                    */
.fig .s-bande { fill: rgba(232, 237, 239, .07); stroke: none; }

/* --- LE GRAPHIQUE D'ACTIF : le SVG produit par scripts/graphiques_semaine.py,
   INLINE et jamais en <img>. AJOUT du 2026-08-16, page « Les actifs ».
   Deux raisons de ne pas le laisser tomber dans `.fig svg` tel quel :
     1. il est dessine dans un viewBox de 720 x 340 ; a 27rem il rendrait a
        0,6 d'echelle et ses etiquettes de prix, ecrites en 11 unites,
        tomberaient a 6,6 px reels. Il lui faut SA largeur.
     2. ses couleurs viennent de `var(--haut, #3fb984)`, `var(--bas, #d9605f)`,
        `var(--trait-vif, ...)` et `var(--encre-tue, ...)` — quatre variables
        que ce systeme ne declarait NULLE PART. Les huit fichiers rendaient
        donc leur valeur de REPLI : un vert et un rouge etrangers a la palette,
        et surtout inertes en couleurs forcees. On les declare ici, sur le
        conteneur, ce qui les rend reprenables au §10 — une couleur ecrite en
        dur dans un attribut `fill=` ne l'aurait pas ete.                     */
.fig--graf {
  --haut:      var(--jade);
  --bas:       var(--corail);
  --trait-vif: var(--filet-fort);
  --encre-tue: var(--encre-2);
}
/* ⛔ LE PLANCHER DE LARGEUR, ET IL VIENT D'UNE MESURE, PAS D'UN CONFORT.
   Laisse a lui seul, ce SVG se met a la largeur disponible. Mesure du
   2026-08-16 : a 375 px il rend a 309 px, soit 0,429 d'echelle, donc ses
   etiquettes de prix — ecrites en 11 unites par le generateur — tombent a
   **4,72 px reels**. Ce n'est pas « petit », c'est du bruit qu'un lecteur va
   essayer de lire. A 768 px : 8,04 px, pas mieux.
   La reponse est celle que le fragment produit par le generateur declarait
   deja : une ZONE DEFILABLE. Le SVG garde un plancher de 34rem et la boite
   defile horizontalement — ce qui ne cree AUCUN debordement de page, la boite
   clippant pour son propre compte. Elle est `tabindex="0"` parce qu'une zone
   defilable non focalisable est inatteignable au clavier (WCAG 2.1.1), et
   `role="group"` + `aria-label` parce qu'un element focalisable sans nom
   accessible est un arret de tabulation muet.                              */
.graf__d {
  overflow-x: auto;
  margin-inline: .9rem;
  max-inline-size: 44rem;
}
.graf__d:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.fig--graf .graf__d svg {
  display: block;
  inline-size: 100%;
  min-inline-size: 34rem;
  block-size: auto;
  margin-inline: 0;
}

/* --- LE GLOSSAIRE DE METHODE : un terme, une phrase ---------------------- */
/* Meme AJOUT, meme date. Une grille de cartes plutot qu'une liste : un terme
   se cherche du regard, il ne se lit pas en continu — et c'est un point dense
   de plus dans la page (FRONTEND.md §9, monnaie n°3).                       */
.termes {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  background: var(--filet); border: 1px solid var(--filet);
  max-inline-size: none;
}
.termes li { background: var(--pan); padding: .9rem 1rem 1rem; max-inline-size: none; }
.termes dfn {
  display: block;
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: var(--t-3); letter-spacing: .04em; line-height: 1.2;
  color: var(--jade); border-block-end: 0; margin-block-end: .4rem;
}
.termes p { font-size: var(--t-3); margin: 0; max-inline-size: none; }
.termes p b { font-family: var(--f-mono); font-weight: 700; }

/* --- la rupture de registre : l'ecran clair ------------------------------ */
.clair {
  background-color: var(--clair-f);
  background-image: repeating-linear-gradient(90deg,
    rgba(14, 18, 20, .05) 0 1px, rgba(0, 0, 0, 0) 1px var(--pas-filet));
  color: var(--clair-e);
  padding-block: clamp(2.6rem, 1.4rem + 3.4vw, 5rem);
  border-block: 1px solid var(--clair-filet);
}
.clair__grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.4rem, .6rem + 2.4vw, 3rem); align-items: start;
}
.rang--clair { color: var(--clair-jade); }
.q-titre { font-size: clamp(1.5rem, 1rem + 1.9vw, 2.5rem); }
.q-titre em { color: var(--clair-cor); font-style: italic; }
.clair p { max-inline-size: 52ch; }
.clair__nb { border-inline-start: 3px solid var(--clair-cor); padding: .1rem 0 .1rem 1rem; font-size: var(--t-3); }
.clair__nb b { color: var(--clair-cor); }
.clair__fc {
  font-family: var(--f-mono); font-size: var(--t-2); line-height: 1.5;
  color: var(--clair-2); margin-block-start: .8rem;
  padding-inline-start: .7rem; border-inline-start: 1px solid var(--clair-filet);
}
/* ⛔ LE PONT ENTRE LES DEUX REGISTRES, et il a ete mesure ROUGE avant d'etre
   ecrit. La rupture de registre inverse le fond ; tout composant du registre
   sombre qui atterrit dans `.clair` y arrive avec sa couleur d'encre claire.
   Mesure du 2026-08-16, chromium ET webkit : `.src` rendait 1,81:1 et son
   `.d` en jade 1,34:1 sur `rgb(233,235,230)`. Le composant etait juste, le
   FOND avait change sous lui. On reteinte donc au niveau de la SECTION, pas
   au cas par cas dans le HTML : une prochaine `.src` posee la sera couverte
   d'avance, alors qu'un correctif ecrit dans le gabarit n'aurait protege que
   la ligne qu'on venait de voir.                                            */
.clair .src { color: var(--clair-2); border-inline-start-color: var(--clair-filet); }
.clair .src .d, .clair a, .clair dfn { color: var(--clair-jade); }
.clair dfn { border-block-end-color: var(--clair-jade); }
.clair .terme { color: var(--clair-jade); border-color: var(--clair-jade); }
.clair .terme::after { color: var(--clair-2); }
.clair .terme:hover { background: rgba(15, 107, 82, .14); border-style: solid; }
.clair .alerte { background: var(--clair-f); border-color: var(--clair-cor); }
.clair .alerte b { color: var(--clair-cor); }
.clair .pastille--porte { color: var(--clair-jade); }
.clair .pastille--casse { color: var(--clair-cor); }
.clair :focus-visible { outline-color: var(--clair-jade); }
/* La figure traverse le pont elle aussi : jade et corail sont illisibles sur
   `--clair-f` (mesure du 2026-08-16 sur `.src` : 1,34:1). On reteinte au
   niveau de la SECTION, donc une prochaine `.fig` posee ici est couverte
   d'avance — c'est la seule difference entre un correctif et une regle.    */
.clair .fig { background: var(--clair-f); border-color: var(--clair-filet); }
.clair .fig .s-t { stroke: var(--clair-filet); }
.clair .fig .s-n { stroke: var(--clair-2); }
.clair .fig .s-p { stroke: var(--clair-jade); }
.clair .fig .s-c { stroke: var(--clair-cor); }
.clair .fig .s-nf { fill: var(--clair-2); }
.clair .fig .s-pf { fill: var(--clair-jade); }
.clair .fig .s-cf { fill: var(--clair-cor); }
.clair .fig .s-x  { fill: var(--clair-e); }
.clair .fig .s-x2 { fill: var(--clair-2); }
.clair .fig .s-xp { fill: var(--clair-jade); }
.clair .fig .s-xc { fill: var(--clair-cor); }
/* LA MATRICE — greffe de la direction III, en FIGURE explicative et non en
   squelette de page (c'est la raison meme pour laquelle III a ete ecartee).
   ⛔ Sa premiere version tenait 8 x 8 cases de 50 px sans un seul libelle : la
   capture la donnait a lire comme un emplacement d'image manquant, et le texte
   qui l'accompagnait parlait de « cases sombres » quand elles etaient claires.
   Une figure sans axes n'est pas une figure, c'est une texture.               */
.mx {
  display: grid;
  grid-template-columns: auto repeat(8, minmax(0, 1fr));
  gap: 2px; margin: .2rem 0 .8rem;
  max-inline-size: 22rem;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .02em;
}
.mx__h, .mx__r { color: var(--clair-2); display: flex; align-items: center; justify-content: center; }
.mx__r { justify-content: flex-end; padding-inline-end: .35rem; }
.mx i { aspect-ratio: 1; display: block; background: rgba(14, 18, 20, .07); border: 1px solid var(--clair-filet); }
.mx i.mx__f { background: var(--clair-jade); border-color: var(--clair-jade); }
.mx i.mx__m { background: rgba(15, 107, 82, .34); border-color: var(--clair-jade); }
.mx i.mx__d { background: repeating-linear-gradient(45deg, var(--clair-filet) 0 1px, transparent 1px 4px); }
.mx-f { margin: 0; }
.mx-l { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .25rem; font-size: var(--t-2); }
.mx-l li { display: flex; align-items: center; gap: .5rem; max-inline-size: none; }
.mx-l i { inline-size: .9rem; block-size: .9rem; flex: none; display: block; background: rgba(14, 18, 20, .07); border: 1px solid var(--clair-filet); }
.mx-l i.mx__f { background: var(--clair-jade); border-color: var(--clair-jade); }
.mx-l i.mx__m { background: rgba(15, 107, 82, .34); border-color: var(--clair-jade); }
.mx-l i.mx__d { background: repeating-linear-gradient(45deg, var(--clair-filet) 0 1px, transparent 1px 4px); }

/* --- le lexique : une entree = un TERME, une ancre stable ---------------- */
/* Page « Les mots ». Quatre champs par entree, et jamais moins : ce qu'est le
   mot, A QUOI IL SERT dans une decision, un exemple CHIFFRE de la semaine avec
   sa source, et le piege. Ce sont des CLASSES et non une convention de
   redaction, parce qu'un champ manquant se voit alors dans le balisage.
   Un glossaire qui definit sans dire a quoi ca sert n'apprend rien.
   ⚠️ CE N'EST PAS un doublon de `.termes` ci-dessus, et la distinction se dit
   pour qu'elle ne derive pas : `.termes` porte une GLOSE — un terme, une
   phrase, posee dans la page qui l'emploie ; `.lex` porte l'ENTREE COMPLETE du
   lexique, avec son usage, son chiffre source et son piege. Un terme glose
   ailleurs renvoie ici par son ancre ; il ne recopie pas l'entree.
   La FIGURE, elle, n'a pas ete redupliquee : `.fig` existe deja plus haut,
   avec son pont vers l'ecran clair et sa reprise en couleurs forcees — une
   seconde definition aurait diverge des la premiere retouche.               */
.lex {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: grid; gap: 1px;
  /* `min(21rem, 100%)` et non `21rem` : a 200 % de zoom navigateur la fenetre
     de mise en page tombe vers 187 px CSS, et une piste de 336 px deborderait
     horizontalement — echec de reflow WCAG 1.4.10 que les cinq largeurs ne
     voient PAS, puisqu'elles redimensionnent la fenetre au lieu de zoomer.  */
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  background: var(--filet);
  border: 1px solid var(--filet);
  max-inline-size: none;
}
.lex > li { background: var(--pan); padding: 1.1rem 1.15rem 1.05rem; max-inline-size: none; }
.lex__t {
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: 1.02rem; letter-spacing: .02em; line-height: 1.15;
  color: var(--jade);
  margin: 0 0 .15rem; padding-block-end: 0;
  border-block-end: 0;
}
.lex__s {
  display: block;
  font-family: var(--f-mono); font-weight: 400; font-size: var(--t-1);
  letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2);
  margin-block-end: .6rem;
}
.lex__d { font-size: var(--t-3); margin-block-end: .7rem; }
.lex__r { font-size: var(--t-3); margin-block-end: .7rem; color: var(--encre); }
.lex__r b, .lex__x b, .lex__p b {
  font-family: var(--f-titre); text-transform: uppercase;
  font-size: var(--t-1); letter-spacing: .09em;
}
.lex__x {
  border-inline-start: 3px solid var(--jade);
  padding: .1rem 0 .1rem .85rem;
  font-size: var(--t-3); margin-block-end: .7rem;
}
.lex__x b { color: var(--jade); }
.lex__x .n { font-family: var(--f-mono); font-weight: 700; letter-spacing: -.01em; }
.lex__p {
  border-inline-start: 3px solid var(--corail);
  padding: .1rem 0 .1rem .85rem;
  font-size: var(--t-3); margin-block-end: 0;
}
.lex__p b { color: var(--corail); }
.lex > li .src { margin-block: 0 .7rem; }

/* --- l'index par famille : des LIENS, aucun repli, aucun JavaScript ------ */
.idx {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  background: var(--filet);
  border: 1px solid var(--filet);
  max-inline-size: none;
}
.idx > li { background: var(--pan); padding: .85rem .95rem .9rem; max-inline-size: none; }
.idx__n {
  font-family: var(--f-mono); font-size: var(--t-1); letter-spacing: .12em;
  text-transform: uppercase; color: var(--encre-2); margin: 0 0 .3rem;
}
.idx__t {
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: .92rem; letter-spacing: .02em; line-height: 1.2; margin: 0 0 .2rem;
}
/* Ce lien n'est PAS un lien de prose : c'est un titre de carte, donc une cible
   de navigation. Mesure du 2026-08-16 : il rendait 21 px de haut, sous les
   44 px du §6.10. L'exception « lien en ligne dans un paragraphe » ne le
   couvre pas — il est seul dans son bloc.                                   */
.idx__t a {
  display: inline-flex; align-items: center;
  min-block-size: var(--cible); min-inline-size: var(--cible);
  color: var(--encre); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--jade);
}
.idx__t a:hover { color: var(--jade); }
/* SEULE classe ajoutee pour la page « Aujourd'hui » — AJOUT du 2026-08-16.
   La carte d'index n'avait pas de PHRASE : elle portait un titre-lien et des
   jetons, ce qui suffit a un lexique ou l'entree se nomme elle-meme. Une carte
   de ROUTE doit dire ce qu'on trouve derriere le lien et a qui ca sert, sinon
   le lecteur clique pour le decouvrir — six fois. Le corps descend a --t-3 et
   NON la couleur : `--encre-2` est declaree « jamais sous 18 px de prose », et
   .88rem est sous ce plancher. On baisse la taille, pas le contraste.        */
.idx__d { font-size: var(--t-3); margin: .1rem 0 0; max-inline-size: none; }
.idx__m { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
/* AJOUT — la carte d'index en PROSE. `.idx__m` liste des jetons cliquables ; il
   manquait le cas ou la carte porte une phrase qui dit ce que la page apporte
   (`page/404.html`). Meme graisse d'encre secondaire que le reste des cartes.  */
.idx__p { font-size: var(--t-3); line-height: 1.5; color: var(--encre-2); margin: 0; max-inline-size: none; }
/* `max-inline-size: 100%` sur les DEUX niveaux, et c'est une correction, pas
   une precaution. Mesure du 2026-08-16 a 320 px : « rejet de creation de
   nouveau plus haut » ne rentre pas sur une ligne, et un `inline-flex` se
   dimensionne en `max-content` — 18 px de debordement horizontal, six jetons
   fautifs. Un `inline-flex` borne, lui, laisse son texte revenir a la ligne. */
.idx__m li { display: flex; max-inline-size: 100%; }
.idx__m a {
  display: inline-flex; align-items: center; justify-content: center;
  /* `min-inline-size` autant que `min-block-size` : « VIX », « ATR », « EMA »
     et « pip » rendaient 40,2 px de large — la cible se corrige sur le
     COMPOSANT, jamais par une retouche des quatre elements nommes (§6.10). */
  min-block-size: var(--cible); min-inline-size: var(--cible);
  max-inline-size: 100%;
  padding: .2rem .55rem;
  border: 1px solid var(--filet-fort);
  color: var(--encre); text-decoration: none; text-align: center;
  font-family: var(--f-mono); font-size: var(--t-2); line-height: 1.25;
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease);
}
.idx__m a:hover { background: var(--jade); color: #06110D; }

/* ================== §5 · LES QUATRE FONCTIONS, TOUTES NATIVES ============= */

/* ---- 5.1 · SIMULATEUR DE SCENARIO D'ANNONCE ----------------------------- */
/* Trois radios, trois panneaux, reveles par « :checked ~ » en CSS pur. Les
   radios sont les PREMIERS enfants de `.sim` : le combinateur `~` ne regarde
   que les freres SUIVANTS. Aucun JavaScript n'intervient nulle part.
   Etat par defaut : « conforme » coche dans le HTML — du contenu d'emblee.  */
.sim { border: 1px solid var(--filet-fort); background: var(--pan); margin-block: 1.4rem 1.8rem; max-inline-size: none; }
.sim__e {
  font-family: var(--f-mono); font-size: var(--t-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-2);
  padding: .7rem .9rem .1rem; margin: 0;
}
.sim__t { font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; font-size: 1rem; margin: 0; padding: 0 .9rem .7rem; }
.sim__choix { display: flex; flex-wrap: wrap; gap: 1px; background: var(--filet); border-block: 1px solid var(--filet); }
.sim__b {
  flex: 1 1 10rem;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-block-size: var(--cible); min-inline-size: var(--cible);
  padding: .5rem .8rem;
  background: var(--fond); color: var(--encre);
  font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2);
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease);
}
.sim__b:hover { background: var(--pan); color: var(--jade); }
.sim__p { display: none; padding: .9rem; }
.sim__p > :last-child { margin-block-end: 0; }
.sim__r { }
.sim__r--haut:checked ~ .sim__choix .sim__b--haut,
.sim__r--conf:checked ~ .sim__choix .sim__b--conf,
.sim__r--bas:checked  ~ .sim__choix .sim__b--bas { background: var(--jade); color: #06110D; }
.sim__r--haut:focus-visible ~ .sim__choix .sim__b--haut,
.sim__r--conf:focus-visible ~ .sim__choix .sim__b--conf,
.sim__r--bas:focus-visible  ~ .sim__choix .sim__b--bas { outline: 2px solid var(--jade); outline-offset: -4px; }
.sim__r--haut:checked ~ .sim__p--haut,
.sim__r--conf:checked ~ .sim__p--conf,
.sim__r--bas:checked  ~ .sim__p--bas { display: block; }
.sim__impact { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: 1px; background: var(--filet); border: 1px solid var(--filet); }
.sim__impact li { background: var(--pan); padding: .45rem .6rem; display: flex; flex-wrap: wrap; gap: .2rem .7rem; max-inline-size: none; font-size: var(--t-3); }
.sim__a { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2); letter-spacing: .05em; text-transform: uppercase; min-inline-size: 7rem; }
.sim__s { font-family: var(--f-mono); font-size: var(--t-2); }
.sim__s--h { color: var(--jade); }
.sim__s--b { color: var(--corail); }
.sim__meca { font-size: var(--t-3); margin-block-end: .7rem; }
.sim__inv { border-inline-start: 3px solid var(--corail); padding: .1rem 0 .1rem .9rem; font-size: var(--t-3); }
.sim__inv b { color: var(--corail); }

/* --- LE BANDEAU PERMANENT DU SIMULATEUR — AJOUT du 2026-08-16 ------------ */
/* SEULE classe ajoutee pour la page « Le contexte », et elle repond a un
   defaut de structure, pas a un gout : les trois `.sim__p` sont en
   `display: none` tant que leur radio n'est pas coche. Une reserve ecrite
   DANS un panneau ne s'afficherait donc que dans un cas sur trois — et le cas
   ou elle manque est precisement celui que le lecteur regarde. Une reserve
   affichee deux fois sur trois n'est pas une reserve, c'est une decoration.
   Ce bandeau est un FRERE des panneaux, jamais leur enfant : aucune regle de
   `:checked ~` ne le touche, donc il ne peut pas disparaitre.
   Aucun token nouveau : filet corail, panneau, corps `--t-3`, comme `.alerte`.
   Il n'est PAS un doublon d'`.alerte` : `.alerte` est un bloc autonome de la
   colonne de texte, avec ses marges propres ; celui-ci est le dernier etage
   d'un composant encadre et se colle a son bord.                            */
.sim__garde {
  margin: 0;
  padding: .8rem .9rem .85rem;
  border-block-start: 1px solid var(--corail);
  background: var(--pan);
  font-size: var(--t-3);
  max-inline-size: none;
}
.sim__garde b { color: var(--corail); }

/* ---- 5.2 · DOUBLE MODE DE LECTURE 30 SECONDES / UNE HEURE --------------- */
/* L'etat PAR DEFAUT est « tout visible ». Le mode bref RETIRE, il n'ajoute
   jamais : sans JavaScript et sans :has(), le lecteur a TOUT. Une degradation
   ne peut donc jamais cacher du contenu.                                    */
body:has(#mode-bref:checked) .en-plus { display: none; }
.en-plus--bloc { display: block; }

/* ---- 5.3 · COMPARATEUR D'ACTIFS COTE A COTE ---------------------------- */
/* Le tableau des huit actifs est TOUJOURS rendu. Les cases a cocher ne font
   qu'ATTENUER les lignes non retenues, par un changement de COULEUR (jamais
   par `opacity` : §6.9 interdit qu'un etat degrade ce que le repos tenait).
   Sans :has() : le tableau complet reste lisible, entier.                   */
.cmp { inline-size: 100%; border-collapse: collapse; font-size: var(--t-3); }
.cmp caption { text-align: start; font-family: var(--f-mono); font-size: .76rem; color: var(--encre-2); padding-block-end: .5rem; }
.cmp thead th {
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: var(--t-1); letter-spacing: .08em; text-align: end;
  padding: .42rem .5rem; border-block-end: 1px solid var(--filet-fort); color: var(--encre);
}
.cmp thead th:first-child { text-align: start; }
.cmp tbody { color: var(--encre); font-family: var(--f-mono); }   /* HERITAGE */
.cmp tbody th, .cmp tbody td {
  padding: .3rem .5rem; border-block-end: 1px solid var(--filet);
  text-align: end; font-weight: 400; overflow-wrap: anywhere;
}
.cmp tbody th { text-align: start; padding: 0; }
.cmp__e {
  display: flex; align-items: center; gap: .5rem;
  min-block-size: var(--cible); min-inline-size: var(--cible);
  padding: .2rem .5rem;
  font-family: var(--f-titre); font-weight: 700; letter-spacing: .03em;
  cursor: pointer;
}
.cmp__case { inline-size: 1rem; block-size: 1rem; border: 1px solid var(--filet-fort); flex: none; position: relative; }
.cmp__case::before { content: ""; position: absolute; inset: 2px; background: transparent; }
.cmp__c:checked + .cmp__e .cmp__case { border-color: var(--jade); }
.cmp__c:checked + .cmp__e .cmp__case::before { background: var(--jade); }
.cmp__c:focus-visible + .cmp__e { outline: 2px solid var(--jade); outline-offset: -2px; }
.cmp tbody tr:has(.cmp__c:checked) { background: var(--pan); }
.cmp tbody tr:has(.cmp__c:checked) .cmp__e { color: var(--jade); }
.cmp tbody:has(.cmp__c:checked) tr:not(:has(.cmp__c:checked)) td,
.cmp tbody:has(.cmp__c:checked) tr:not(:has(.cmp__c:checked)) th { color: var(--encre-2); }
.cmp .haut { color: var(--jade); }
.cmp .bas { color: var(--corail); }
.cmp__i { display: none; }               /* l'intitule par cellule, mobile */

/* VARIANTE PROSE du comparateur — AJOUT du 2026-08-16. Les cellules portent
   des PHRASES, pas des nombres : l'alignement a droite et la mono, justes
   pour des chiffres, sont faux pour du texte. Rien d'autre ne change — et
   c'est exactement pour ce qui NE change pas qu'on reprend `.cmp` : la mise
   en cartes sous 768 px est deja ecrite, prouvee, et n'a pas a l'etre deux
   fois. Un second tableau maison serait une divergence programmee.         */
.cmp--prose tbody { font-family: var(--f-prose); }
.cmp--prose thead th, .cmp--prose tbody td { text-align: start; }
.cmp--prose tbody td { vertical-align: top; padding-block: .6rem; }
.cmp--prose tbody td b { font-family: var(--f-mono); font-weight: 700; }
.cmp--prose tbody th { padding-block: .3rem; }

/* ---- 5.4 · GLOSSAIRE VIVANT (API Popover native, zero JavaScript) ------- */
/* `[popover]` sans support du navigateur = un bloc ordinaire : la definition
   ET son lien vers mots.html restent lisibles. On ne declare donc JAMAIS
   `display` sur `.pop`, sinon on ecraserait la regle de la feuille du moteur
   et on casserait l'un des deux mondes.                                     */
.gloses { list-style: none; margin: .2rem 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; max-inline-size: none; }
.gloses li { max-inline-size: none; display: flex; }
.gloses__t { font-family: var(--f-mono); font-size: var(--t-1); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); align-self: center; margin-inline-end: .3rem; }
.terme {
  display: inline-flex; align-items: center; gap: .4rem;
  min-block-size: var(--cible); min-inline-size: var(--cible);
  padding: .2rem .8rem;
  border: 1px dotted var(--jade);
  background: transparent; color: var(--jade);
  font-family: var(--f-prose); font-size: var(--t-3); font-weight: 700;
  cursor: pointer;
  transition: background-color var(--d2) var(--ease), color var(--d2) var(--ease);
}
.terme::after { content: "?"; font-family: var(--f-mono); font-size: .7em; color: var(--encre-2); }
/* ⛔ CE SURVOL ETAIT UNE INVERSION (fond jade, texte #06110D), et la mesure l'a
   pris en defaut : pendant les 130 ms du fondu de SORTIE, le texte jade et le
   fond a demi jade se croisent — 1,81:1 mesure sur rgb(70,142,121) contre
   rgb(50,97,86), sous le seuil du texte courant. Un etat statique conforme aux
   deux bouts peut donc traverser un etat non conforme : le critere WCAG ne
   parle que des bouts, mais le lecteur, lui, voit le milieu.
   La classe se ferme en supprimant l'inversion, pas en raccourcissant la duree :
   une TEINTE ne fait traverser aucun point bas — l'encre ne bouge plus, et le
   pire couple du fondu vaut 9,64:1. Le trait pointille devient plein, ce qui
   dit « ouvrable » aussi bien que le pave plein le disait.                   */
.terme:hover { background: rgba(111, 224, 192, .16); border-style: solid; }
.pop {
  inline-size: min(30rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--jade);
  background: var(--pan);
  color: var(--encre);
  font-family: var(--f-prose); font-size: var(--t-3); line-height: 1.55;
}
.pop::backdrop { background: rgba(10, 14, 17, .74); }
.pop__t { font-family: var(--f-titre); font-weight: 900; text-transform: uppercase; font-size: var(--t-2); letter-spacing: .09em; color: var(--jade); margin: 0 0 .4rem; }
.pop__d { margin: 0 0 .8rem; }
.pop__a { display: flex; flex-wrap: wrap; gap: .5rem; }
.pop__l, .pop__f {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: var(--cible); min-inline-size: var(--cible);
  padding-inline: .8rem;
  border: 1px solid var(--filet-fort);
  background: var(--fond); color: var(--encre);
  font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2);
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
}
.pop__l:hover, .pop__f:hover { border-color: var(--jade); color: var(--jade); }

/* ---- 5.5 · LE VIS-A-VIS : DEUX ACTIFS SUR LES MEMES LIGNES -------------- */
/* AJOUT du 2026-08-16, page « Les actifs ». Fonction demandee explicitement :
   deux actifs affiches cote a cote, critere par critere. Deux groupes de huit
   boutons radio ; chaque cellule du tableau porte les HUIT variantes et une
   seule s'affiche. ZERO JavaScript.
   ⚠️ CE N'EST PAS un doublon de `.cmp` (5.3), et la distinction se dit pour
   qu'elle ne derive pas : `.cmp` montre les HUIT actifs en meme temps et se
   contente d'ATTENUER les lignes non cochees ; `.face` en montre DEUX,
   choisis, sur les memes lignes. L'un sert a balayer, l'autre a confronter.
   ⛔ LE SENS DE LA REGLE EST CHOISI, et c'est tout le sujet. Le masquage
   n'existe QUE sous `.face:has(.face__r:checked)`. Si `:has()` n'est pas
   compris, cette regle ne s'applique jamais et les seize variantes restent
   VISIBLES : la page perd une commodite, pas une donnee. L'inverse — cacher
   par defaut et revoiler par `:has()` — aurait vide le tableau en silence, ce
   que §6.6 interdit. Et les huit fiches completes vivent de toute facon plus
   haut dans la page : ce composant compare, il n'est la source de rien.     */
.face { border: 1px solid var(--filet-fort); background: var(--pan); margin-block: 1.5rem 1.2rem; max-inline-size: none; }
.face__l { border: 0; margin: 0; padding: .85rem .9rem .3rem; min-inline-size: 0; }
.face__l + .face__l { padding-block-start: .1rem; }
.face__t {
  font-family: var(--f-mono); font-size: var(--t-1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-2); padding: 0 0 .4rem;
}
.face__ch { display: flex; flex-wrap: wrap; gap: 1px; background: var(--filet); border: 1px solid var(--filet); }
.face__b {
  flex: 1 1 6rem;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-block-size: var(--cible); min-inline-size: var(--cible);
  padding: .35rem .5rem;
  background: var(--fond); color: var(--encre);
  font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2);
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease);
}
.face__b:hover { background: var(--pan); color: var(--jade); }
/* Le radio est le frere PRECEDENT immediat de son etiquette : `+` suffit, et
   il n'a besoin d'aucun `:has()` — l'etat coche se voit meme sans lui.      */
.face__r:checked + .face__b { background: var(--jade); color: #06110D; }
.face__r:focus-visible + .face__b { outline: 2px solid var(--jade); outline-offset: -4px; }

.face__g { inline-size: 100%; border-collapse: collapse; font-size: var(--t-3); }
.face__g caption { text-align: start; font-family: var(--f-mono); font-size: .76rem; color: var(--encre-2); padding: .6rem .9rem .5rem; }
.face__g caption .d { color: var(--jade); }
.face__g thead th {
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: var(--t-1); letter-spacing: .08em; text-align: start;
  padding: .45rem .6rem;
  border-block: 1px solid var(--filet-fort);
  color: var(--encre);
}
.face__g tbody { color: var(--encre); }        /* HERITAGE (§6.2) */
.face__g tbody th, .face__g tbody td {
  padding: .6rem; border-block-end: 1px solid var(--filet);
  text-align: start; font-weight: 400; vertical-align: top; overflow-wrap: anywhere;
}
.face__g tbody th {
  inline-size: 26%;
  font-family: var(--f-titre); font-weight: 700; font-size: var(--t-2);
  letter-spacing: .05em; text-transform: uppercase; color: var(--encre-2);
}
/* ⛔ L'ESPACEMENT SE POSE EN BAS, JAMAIS EN HAUT, et ce n'est pas un detail de
   gout : une regle `.face__v + .face__v { margin-block-start }` donne une
   marge haute a toute variante qui n'est pas la PREMIERE de sa cellule. Or la
   variante visible n'occupe presque jamais le meme rang a gauche et a droite.
   Mesure du 2026-08-16 sur la capture de bureau : EUR/USD (rang 1) contre
   S&P 500 (rang 7) : 7,2 px d'ecart de ligne de base entre les deux colonnes,
   sur TOUTES les lignes du tableau. Un comparateur dont les deux colonnes ne
   sont pas alignees ne compare plus rien — c'etait le seul defaut que le banc
   ne pouvait pas voir, et c'est la capture qui l'a montre.                  */
.face__v { margin: 0 0 .45rem; max-inline-size: none; }
.face__v:last-child { margin-block-end: 0; }
.face__v b { font-family: var(--f-mono); font-weight: 700; letter-spacing: -.01em; }
.face__n {
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .02em; line-height: 1.15; color: var(--jade);
}
.face:has(.face__r:checked) .face__v { display: none; }
.face:has(#f-g-1:checked) .face__v[data-f="g1"], .face:has(#f-d-1:checked) .face__v[data-f="d1"],
.face:has(#f-g-2:checked) .face__v[data-f="g2"], .face:has(#f-d-2:checked) .face__v[data-f="d2"],
.face:has(#f-g-3:checked) .face__v[data-f="g3"], .face:has(#f-d-3:checked) .face__v[data-f="d3"],
.face:has(#f-g-4:checked) .face__v[data-f="g4"], .face:has(#f-d-4:checked) .face__v[data-f="d4"],
.face:has(#f-g-5:checked) .face__v[data-f="g5"], .face:has(#f-d-5:checked) .face__v[data-f="d5"],
.face:has(#f-g-6:checked) .face__v[data-f="g6"], .face:has(#f-d-6:checked) .face__v[data-f="d6"],
.face:has(#f-g-7:checked) .face__v[data-f="g7"], .face:has(#f-d-7:checked) .face__v[data-f="d7"],
.face:has(#f-g-8:checked) .face__v[data-f="g8"], .face:has(#f-d-8:checked) .face__v[data-f="d8"] { display: block; }

dfn { font-style: normal; font-weight: 700; color: var(--jade); border-block-end: 1px dotted var(--jade); }
.def { color: var(--encre-2); }

/* ====================== §6 · LA REVELATION (decor seul) =================== */
/* L'etat par defaut du HTML est TOUT VISIBLE. Le masquage n'existe que sous
   `html.anim-ok`, classe posee par ichor.js EN DERNIER : toute exception
   au-dessus laisse la page entierement lisible. §6.6 : le decor peut echouer,
   le contenu jamais.                                                        */
.anim-ok .revele { opacity: 0; translate: 0 14px; transition: opacity var(--d5) var(--ease), translate var(--d5) var(--ease); }
.anim-ok .revele.vu { opacity: 1; translate: none; }

/* ============================ §7 · RESPONSIVE ============================= */
/* Sous 768 px la SIGNATURE CHANGE DE FORME, elle ne disparait pas : la voie
   devient une reglure HORIZONTALE collante sous l'en-tete, graduee des memes
   cinq jours ; les jetons deviennent des puces datees dans le flux.         */

@media (max-width: 767.98px) {
  /* ⛔ L'EN-TETE CESSE D'ETRE COLLANT, et c'est la capture a 375 px qui l'a
     tranche : avec la marque, la semaine, l'interrupteur et une navigation
     de sept entrees qui se replie sur TROIS rangees, la barre collante
     mangeait 185 px — 23 % d'un viewport de telephone — en permanence. Un
     en-tete collant qui vole un quart de l'ecran ne rend pas la navigation
     plus accessible : il rend la lecture impossible. Il remonte donc dans le
     flux, et c'est la reglure du temps qui garde le haut de l'ecran.
     Consequence portee jusqu'au bout : la reserve de saut d'ancre redescend,
     et la reglure colle a 0.                                                 */
  html { scroll-padding-block-start: 2.6rem; }
  .tete { position: static; }

  .piste { display: flex; flex-direction: column; }
  .voie { display: contents; }

  .voie__echelle {
    position: sticky; inset: auto;
    inset-block-start: 0;
    order: 0; z-index: 6;
    block-size: 2.1rem; margin-block-end: 1.4rem;
    background: var(--fond);
    border-block-end: 1px solid var(--filet-fort);
  }
  .ech__jour {
    left: calc(var(--t) * 1%); top: 0; bottom: auto;
    writing-mode: horizontal-tb;
    padding: .25rem 0 0 .32rem;
    border-inline-start: 1px solid var(--filet-fort);
    background: none; block-size: 100%;
  }
  .ech__jour::before { content: none; }
  .bande {
    inset-inline-start: calc(var(--t0) * 1%);
    inline-size: calc((var(--t1) - var(--t0)) * 1%);
    inset-block: 0 auto; block-size: 6px;
  }
  .tic {
    inset-inline-start: calc(var(--t) * 1%);
    inset-block: auto 0; inline-size: 0; block-size: .5rem;
    border-block-start: 0; border-inline-start: 1px solid var(--filet-fort);
  }
  .corps { order: 1; }
  .voie__jetons { position: static; order: 2; margin-block-start: 1.6rem; border-block-start: 1px solid var(--filet-fort); }
  .jeton {
    position: static; translate: none;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem;
    border-inline-width: 0; border-block-start-width: 0; border-radius: 0;
    padding: .55rem .1rem .6rem 1.1rem; background: none;
  }
  .jeton::before { inset-inline-start: 0; inset-block-start: 1.05rem; inline-size: .7rem; border-block-start-width: 2px; }
  .jeton--fin { translate: none; }
  .jeton--fin::before { inset-block-start: 1.05rem; }
  .jeton__q { font-size: .88rem; margin-block-start: 0; }

  .clair__grille, .chiffre { grid-template-columns: minmax(0, 1fr); }
  .chiffre__n, .chiffre__u, .chiffre__d { grid-column: 1; }
  .barres li { grid-template-columns: 5.6rem minmax(0, 1fr) 4.4rem; gap: .4rem; }
  .barres__n { font-size: var(--t-1); }
  .tb { font-size: .8rem; }
  .tb thead th, .tb tbody th, .tb tbody td { padding: .38rem .3rem; }
  .nav a { flex: 1 1 8rem; font-size: var(--t-1); padding-inline: .5rem; }

  /* --- le comparateur devient des CARTES : une par actif ----------------- */
  /* Plus de 4 colonnes est illisible sur un telephone. Chaque cellule porte
     alors son intitule ; l'en-tete de colonne, devenu un doublon exact,
     passe en `.sr-only` — il reste dans l'arbre d'accessibilite.           */
  .cmp, .cmp tbody, .cmp tr, .cmp tbody th, .cmp tbody td { display: block; inline-size: auto; }
  .cmp thead {
    position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .cmp tbody tr {
    border: 1px solid var(--filet-fort);
    margin-block-end: .8rem;
    background: var(--pan);
  }
  .cmp tbody tr:has(.cmp__c:checked) { border-color: var(--jade); }
  .cmp tbody th { border-block-end: 1px solid var(--filet-fort); }
  .cmp tbody td {
    display: flex; justify-content: space-between; gap: 1rem;
    text-align: end; border-block-end: 1px solid var(--filet);
  }
  .cmp tbody tr td:last-child { border-block-end: 0; }
  .cmp__i { display: inline; text-align: start; font-family: var(--f-titre); font-weight: 700; font-size: var(--t-1); letter-spacing: .07em; text-transform: uppercase; color: var(--encre-2); }
  .cmp tbody:has(.cmp__c:checked) tr:not(:has(.cmp__c:checked)) .cmp__i { color: var(--encre-2); }

  /* La carte en PROSE empile son intitule AU-DESSUS du texte : cote a cote,
     une phrase de quinze mots se retrouve sur une colonne de six caracteres.
     `text-align: start` est REPETE ici, et ce n'est pas une redondance : la
     regle `.cmp tbody td` de ce meme bloc a EXACTEMENT la meme specificite
     (0,1,2) et se trouve plus bas dans la feuille, donc elle gagnait par ordre
     source. Mesure du 2026-08-16 : neuf cartes de prose rendues alignees a
     droite sur telephone. Une specificite egale se tranche par la POSITION.  */
  .cmp--prose tbody td { display: block; text-align: start; }
  .cmp--prose .cmp__i { display: block; margin-block-end: .2rem; }

  /* --- le vis-a-vis reste un VIS-A-VIS sur telephone --------------------- */
  /* Trois colonnes, c'est sous le plafond de quatre : on ne le met donc PAS
     en cartes — ce serait perdre exactement ce que ce composant existe pour
     faire. Le critere passe en pleine largeur au-dessus, et les deux valeurs
     restent l'une a cote de l'autre. L'en-tete de colonne, devenu un doublon
     du bouton coche, part en `.sr-only` sans quitter l'arbre.               */
  .face__g, .face__g tbody, .face__g tbody th, .face__g tbody td { display: block; inline-size: auto; }
  .face__g thead {
    position: absolute; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .face__g tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: .7rem;
    border-block-end: 1px solid var(--filet-fort);
  }
  .face__g tbody th { grid-column: 1 / -1; inline-size: auto; border-block-end: 0; padding: .55rem .6rem .1rem; }
  .face__g tbody td { border-block-end: 0; padding: .1rem .6rem .6rem; }
  .face__b { flex: 1 1 4.4rem; font-size: var(--t-1); padding-inline: .3rem; }
  .face__n { font-size: .95rem; }
}

/* ================== §7-bis · LE CONTRAT DE REPLI DES TABLEAUX ==============
   ⛔ CES REGLES MANQUAIENT, ET LEUR ABSENCE ETAIT PIRE QU'UN OUBLI.
   `scripts/verifier_mobile.py` exige que chaque <table> declare son repli par
   `data-mobile="<nom>"` ET que le nom declare corresponde a une regle REELLE de
   cette feuille. Mesure du 2026-08-16 : la refonte a emporte les regles sans
   emporter le controle, donc les DIX tableaux des pages neuves sortaient rouges
   -- et `methode.html` declarait deja `colonne-collante` pendant qu'aucune regle
   ne le ciblait. Le controle le dit mieux que moi : « un repli declare et
   inexistant est PIRE qu'un repli absent : il rassure ».

   TROIS REGLES, ET CHACUNE FERME UNE MOITIE DU PROBLEME.
   ① L'ANCETRE QUI DEFILE. Sans lui, les deux replis ci-dessous ne font que de la
      mise en forme : le tableau est COUPE, et toute mention « faites glisser »
      decrit un geste impossible. La forme du selecteur est celle que le controle
      exige nommement.
   ② `colonne-collante` — le repli FORT, pour les tableaux dont les rangees
      portent un <th scope="row"> : le libelle de ligne reste a l'ecran pendant
      qu'on fait defiler les colonnes. Sans lui on perd de vue DE QUOI parle la
      cellule qu'on lit, ce qui est la seule chose qui rendait le tableau utile.
   ③ `defilement` — le repli FAIBLE, pour les tableaux sans en-tete de rangee. Le
      controle refuse qu'on le declare quand le fort est disponible : « declarer
      le repli le plus faible quand le plus fort est disponible, c'est perdre le
      libelle sans que rien ne le dise ».                                      */

:is(div, figure, section):has(> table[data-mobile]) { overflow-x: auto; }

table[data-mobile="colonne-collante"] { border-collapse: separate; border-spacing: 0; }
table[data-mobile="colonne-collante"] thead th:first-child,
table[data-mobile="colonne-collante"] tbody th[scope="row"] {
  position: sticky; inset-inline-start: 0; z-index: 2;
  background: var(--pan); /* opaque : sans fond, les cellules defilent DESSOUS */
  box-shadow: 1px 0 0 var(--trait);
}
table[data-mobile="colonne-collante"] thead th:first-child { z-index: 3; }

/* `defilement` ne fige rien -- il garantit seulement que le tableau garde sa
   largeur naturelle au lieu d'etre comprime en colonnes illisibles, donc qu'il
   defile REELLEMENT dans l'ancetre de la regle ①.                            */
table[data-mobile="defilement"] { min-inline-size: max-content; }

/* Le plancher de 34rem ne suffit pas seul : a 375 px il porte l'echelle de
   0,429 a 0,756, donc les 11 unites du generateur a 8,3 px — toujours sous le
   confort de lecture. On remonte le texte du SVG a 13 unites SOUS 1024 px
   seulement, ou l'echelle est defavorable ; au-dessus, 11 unites rendent deja
   ~10,8 px et y toucher deborderait la gouttiere de droite.
   13 et pas 15 : la plus longue etiquette du parc est « 154.7326 », 8 signes
   de chasse fixe ; a 13 elle occupe 62 unites pour 68 disponibles entre
   x = 652 et le bord du viewBox. A 15, elle sort du dessin.                */
@media (max-width: 1023.98px) {
  .fig--graf svg text { font-size: 13px; }
}

@media (max-width: 400px) {
  .tb { font-size: var(--t-1); }
  .sim__b { flex: 1 1 100%; }
}

/* ============================= §8 · IMPRESSION ============================ */
/* §6.14 : un Ctrl+P n'emet ni `scroll` ni intersection. Tout ce qui attendait
   d'etre revele sortirait en pages blanches. On remet donc TOUT a visible —
   y compris le contenu que le mode bref retire et les panneaux du
   simulateur, dont un seul est ouvert a l'ecran.                            */
@media print {
  body { background: #fff; color: #000; background-image: none; }
  .evite, .nav, .bascule, .terme, .tete { display: none; }
  .anim-ok .revele, .revele { opacity: 1 !important; translate: none !important; }
  body:has(#mode-bref:checked) .en-plus { display: revert; }
  .sim__p, .sim__r--haut ~ .sim__p, .sim__r--conf ~ .sim__p, .sim__r--bas ~ .sim__p { display: block; }
  .pop { display: block; border: 1px solid #999; background: none; color: #000; }
  .piste { display: block; border-block-end: 1px solid #999; }
  .voie { display: block; inline-size: auto; min-block-size: 0; border: 0; }
  .voie__echelle { position: static; block-size: auto; }
  .ech__jour { position: static; display: inline-block; margin-inline-end: 1rem; border: 0; writing-mode: horizontal-tb; background: none; }
  .ech__jour::before { content: none; }
  .bande { position: static; display: block; inline-size: auto; block-size: 2px; }
  .voie__jetons { position: static; }
  .jeton {
    position: static; translate: none; visibility: visible; opacity: 1;
    display: block; border: 0; border-block-start: 1px solid #999;
    border-radius: 0; background: none; color: #000;
  }
  .jeton::before, .tic { display: none; }
  .clair { background: #fff; color: #000; }
  .dix__c, .pied__l li, .alerte, .sim, .sim__garde, .cmp tbody tr, .fig, .termes li { background: #fff; }
  .sim__garde { border-block-start-color: #000; }
  .jeton__q, .src, .dix__t, .clair__fc { color: #333; }
  /* Le jade et le corail ne survivent pas au papier : le dessin passe en noir
     plutot que de sortir en gris pale. */
  .fig, .termes { border-color: #999; }
  .termes dfn { color: #000; }
  .fig .s-t, .fig .s-n, .fig .s-p, .fig .s-c { stroke: #000; }
  .fig .s-nf, .fig .s-pf, .fig .s-cf, .fig .s-x, .fig .s-x2, .fig .s-xp, .fig .s-xc { fill: #000; }
  /* Le lexique s'imprime : c'est la page qu'on garde a cote du clavier. Les
     deux filets de gauche restent, en noir — ils portent la difference entre
     la MESURE et le PIEGE, pas une decoration.                              */
  /* Le vis-a-vis s'imprime ENTIER : §6.14 vaut aussi pour lui. Un Ctrl+P ne
     coche rien, donc on remet les seize variantes a visible plutot que de
     sortir deux colonnes sur papier et six trous.                          */
  .face, .face__b, .face__g tbody tr { background: #fff; }
  .face, .face__ch, .face__b, .face__g thead th { border-color: #999; }
  .face:has(.face__r:checked) .face__v { display: block; }
  .face__t, .face__g tbody th, .face__g caption { color: #333; }
  .face__n, .face__g caption .d { color: #000; }
  /* Le jade et le corail ne survivent pas au papier : le graphique d'actif
     passe en noir et gris plutot que de sortir en pale sur pale.           */
  .fig--graf { --haut: #000; --bas: #666; --trait-vif: #999; --encre-tue: #333; }
  .fig .s-bande { fill: #eee; }

  .lex > li, .idx > li { background: #fff; }
  .lex, .idx, .idx__m a { border-color: #999; }
  .lex__t, .lex__x b, .lex__p b, .idx__t a { color: #000; }
  .lex__s, .idx__n { color: #333; }
  .lex__x, .lex__p { border-inline-start-color: #000; }
}

/* ========================== §9 · MOUVEMENT REDUIT ========================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .revele, .anim-ok .revele { opacity: 1 !important; translate: none !important; }
}

/* ============ §10 · COULEURS FORCEES — LE DERNIER BLOC DE LA FEUILLE ====== */
/* §6.3 : une media query n'ajoute AUCUNE specificite. Place en tete, ce bloc
   perdrait l'arbitrage par ordre source contre chaque regle definie plus bas
   — 34 declarations mortes deja constatees ainsi.
   §6.4 : `border-color` seul est un no-op sur un element sans `border-style`.
   On ecrit donc TOUJOURS la declaration `border` complete.                   */
@media (forced-colors: active) {
  body { background-image: none; forced-color-adjust: none; background-color: Canvas; color: CanvasText; }

  .dix__c, .pied__l li, .jeton, .alerte, .tete, .nav a, .voie__echelle,
  .sim, .sim__b, .sim__impact li, .sim__garde, .pop, .pop__l, .pop__f, .bascule,
  .cmp tbody tr, .terme { background: Canvas; color: CanvasText; }

  /* AJOUT du 2026-08-16 — le bandeau permanent du simulateur. Son seul trait
     est un filet corail SUPERIEUR : `border-color` seul y serait un no-op
     (§6.4), la declaration est donc ecrite entiere.                          */
  .sim__garde { border-block-start: 1px solid CanvasText; }
  .sim__garde b { color: CanvasText; }

  .dix, .nav__l, .pied__l, .alerte, .jeton, .tb thead th, .verdicts > li,
  h3, .chiffre, .tete, .piste, .pied, .sim, .sim__impact, .fleau__b,
  .pop, .pop__l, .pop__f, .bascule, .bascule__t, .cmp tbody tr, .terme,
  .cmp__case, .pastille { border: 1px solid CanvasText; }

  .chiffre__u { border-block-end: 1px solid CanvasText; }
  .tic { border-block-start: 1px solid CanvasText; }
  .voie { border-inline-start: 1px solid CanvasText; }
  .ech__jour { color: CanvasText; background: Canvas; }
  .ech__jour::before { border-block-start: 1px solid CanvasText; }
  .jeton::before { border-block-start: 1px solid CanvasText; }
  .tb tbody th, .tb tbody td, .cmp tbody th, .cmp tbody td { border-block-end: 1px solid CanvasText; }
  .barres li, .verdicts > li { border-block-end: 1px solid CanvasText; }

  .barres__b, .bande, .bande--casse, .bande--porte, .bande--pic,
  .fleau__p, .fleau__c, .bascule__t::before, .cmp__case::before,
  .mx i.mx__f, .mx i.mx__m, .mx-l i.mx__f, .mx-l i.mx__m {
    background: Highlight; forced-color-adjust: none; border: 1px solid CanvasText;
  }
  .barres__b--nd { background: Canvas; }
  .mx i, .mx-l i { background: Canvas; border: 1px solid CanvasText; }
  .mx__h, .mx__r { color: CanvasText; }

  .chute, .frictions li, .clair__nb, .sim__inv { border-inline-start: 3px solid CanvasText; }

  .src, .def, .jeton__q, .dix__t, .clair__fc, .pied__l, .pied__n, .tb .nd,
  .sim__e, .sim__s, .sim__s--h, .sim__s--b, .cmp__i, .gloses__t, .bascule__e,
  .tete__s, .barres__v.nd, .src .d, .pied__d { color: CanvasText; }

  h1 .h1-b, .rang, .rang--clair, .dix__v, .chiffre__n, .pastille, dfn,
  .q-titre em, .alerte b, .clair__nb b, .sim__inv b, .pop__t, .terme,
  .cmp .haut, .cmp .bas, .tb .haut, .tb .bas, .fleau__l .p, .fleau__l .c,
  .marque, .marque:hover, a { color: CanvasText; }

  dfn { border-block-end: 1px dotted CanvasText; }
  .terme { border: 1px dotted CanvasText; }
  .clair { background: Canvas; color: CanvasText; background-image: none; }
  .evite { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .nav a:hover, .terme:hover, .sim__b:hover { background: Highlight; color: HighlightText; }
  .nav a[aria-current="page"] { box-shadow: none; border: 2px solid CanvasText; }
  .cmp tbody tr:has(.cmp__c:checked) { background: Canvas; border: 2px solid CanvasText; }
  .cmp tbody:has(.cmp__c:checked) tr:not(:has(.cmp__c:checked)) td,
  .cmp tbody:has(.cmp__c:checked) tr:not(:has(.cmp__c:checked)) th { color: CanvasText; }
  .sim__r--haut:checked ~ .sim__choix .sim__b--haut,
  .sim__r--conf:checked ~ .sim__choix .sim__b--conf,
  .sim__r--bas:checked  ~ .sim__choix .sim__b--bas { background: Highlight; color: HighlightText; }
  :focus-visible { outline: 2px solid CanvasText; }

  /* AJOUT du 2026-08-16 — la figure et le glossaire de methode. Un SVG dont
     les couleurs viennent d'un attribut `fill=` ne serait PAS repris ici :
     c'est la raison pour laquelle elles viennent de classes. `.termes dfn`
     est nomme explicitement parce que sa regle de couleur porte une classe
     (0,1,1) et battrait le `dfn` nu (0,0,1) de la liste ci-dessus.         */
  .fig, .termes li { background: Canvas; color: CanvasText; }
  .fig, .termes { border: 1px solid CanvasText; }
  .termes dfn { color: CanvasText; }
  .fig .s-t, .fig .s-n, .fig .s-p, .fig .s-c { stroke: CanvasText; }
  .fig .s-nf, .fig .s-pf, .fig .s-cf { fill: CanvasText; }
  .fig .s-x, .fig .s-x2, .fig .s-xp, .fig .s-xc { fill: CanvasText; }
  .clair .fig .s-t, .clair .fig .s-n, .clair .fig .s-p, .clair .fig .s-c { stroke: CanvasText; }
  .clair .fig .s-nf, .clair .fig .s-pf, .clair .fig .s-cf,
  .clair .fig .s-x, .clair .fig .s-x2, .clair .fig .s-xp, .clair .fig .s-xc { fill: CanvasText; }

  /* AJOUT du 2026-08-16 — le lexique et son index, page « Les mots ».
     `.lex__t` et `.idx__t a` sont nommes explicitement : leur regle de couleur
     porte une classe (0,1,0) et battrait le `a` nu (0,0,1) de la liste plus
     haut. Les deux filets de gauche — jade pour l'exemple, corail pour le
     piege — deviennent des bords `CanvasText` : sans eux, les deux champs qui
     portent la MESURE et le PIEGE cesseraient de se distinguer du corps.    */
  .lex > li, .idx > li, .idx__m a { background: Canvas; color: CanvasText; }
  .lex, .idx, .idx__m a { border: 1px solid CanvasText; }
  .lex__x, .lex__p { border-inline-start: 3px solid CanvasText; }
  .lex__t, .lex__s, .lex__x b, .lex__p b, .lex__x .n,
  .idx__n, .idx__t a { color: CanvasText; }
  .idx__t a { border-block-end: 1px solid CanvasText; }
  .idx__m a:hover { background: Highlight; color: HighlightText; }

  /* AJOUT du 2026-08-16 — le vis-a-vis et le graphique d'actif, page « Les
     actifs ». Le graphique est le cas interessant : ses couleurs vivent dans
     des attributs `stroke=` et `fill=` du SVG, mais elles y sont ecrites
     `var(--haut, ...)`. Redefinir les QUATRE variables sur le conteneur
     suffit donc a le reprendre entierement ici — ce qu'aucune regle n'aurait
     pu faire si le generateur avait ecrit ses couleurs en dur.             */
  .face, .face__b, .face__g tbody tr { background: Canvas; color: CanvasText; }
  .face, .face__ch, .face__b { border: 1px solid CanvasText; }
  .face__g thead th { border-block: 1px solid CanvasText; }
  .face__g tbody th, .face__g tbody td { border-block-end: 1px solid CanvasText; }
  .face__t, .face__g caption, .face__g tbody th, .face__n, .face__g caption .d { color: CanvasText; }
  .face__r:checked + .face__b, .face__b:hover { background: Highlight; color: HighlightText; }
  .fig--graf { --haut: CanvasText; --bas: CanvasText; --trait-vif: CanvasText; --encre-tue: CanvasText; }
  .fig .s-bande { fill: Canvas; }
}