@charset "utf-8";
/* ==========================================================================
   ICHOR  ::  LA COLONNE DE SEUIL
   --------------------------------------------------------------------------
   THESE : une note de marche ne publie pas un avis, elle publie une DISTANCE a
   un seuil enregistre. Les pages partagent une seule echelle bornee par les
   deux seuils du releve, et ce que le lecteur retient d'une semaine, c'est de
   combien on est reste en deca de la ligne qui autoriserait un pari.

   SIGNATURE PORTANTE, dimensionnee par la donnee et jamais reservee d'avance :
   `.piste` est une grille de 16 demi-points en `repeat(16, minmax(0, var(--pas)))`.
   Une piste `minmax(0, X)` sans contenu vaut ZERO : la largeur de la colonne de
   seuil est donc la somme des cotes reellement posees. Retirer les `.cote` du
   document fait tomber la piste a 0, elargit la colonne de nom et raccourcit le
   document. Les graduations sont peintes en fond et en pseudo-elements : elles
   ne tiennent aucune piste, sans quoi la portance serait truquee par le decor.

   LUMIERE : froide, zenithale, ATTACHEE AU DOCUMENT (`background-attachment:
   scroll`). La these est en pleine lumiere, l'annexe dans l'ombre ; la profondeur
   d'extinction `--fin-lumiere` est ecrite par le generateur depuis le plus fort
   ecart de la semaine, donc une autre semaine rend une autre lumiere.

   TROIS PORTEURS SEMANTIQUES, jamais decoratifs, et aucun ne code le sens :
     soufre  #F2D23A  le SEUIL enregistre, et l'heure ou l'on saura
     iris    #D673F0  ce qui RESTE A TOMBER dans la semaine
     gris    #8E99A3  le MESURE NON DISTINGUABLE DU HASARD
   Le sens hausse ou baisse est une FORME (chevron plein, contour, pointille),
   jamais une teinte.

   MATIERE : reglure de 16 filets de 1 px par piste, graduations aux deux seuils
   du releve, hachures 45 degres pour tout ce qui n'est pas mesure, grain
   feTurbulence en data-URI borne en tuile, planche claire en rupture.
   ZERO image bitmap, ZERO ombre portee, ZERO police distante, ZERO filtre
   d'arriere-plan, ZERO script dont le contenu depende.

   MOUVEMENT : ce qui bouge est un CACHE, jamais la mesure. Au repos, sans script,
   sans support et en mouvement reduit, la cote est deja dessinee a sa longueur
   exacte. Le retard de chaque revelation vaut `var(--n) * 22ms` : l'ordre de
   revelation EST le classement des ecarts. Aucun `:nth-child` en dur.
   ========================================================================== */

:root{
  /* ---- fond, surfaces, filets ---- */
  --fond:        #0D0F12;
  --surface-1:   #14171B;
  --surface-2:   #1A1E23;
  --filet:       #262B31;
  --filet-2:     #343B43;

  /* ---- encres ---- */
  --craie:       #E9ECEF;
  --encre-2:     #A2ACB5;
  --encre-3:     #8E99A3;

  /* ---- les trois porteurs semantiques ---- */
  --soufre:      #F2D23A;
  /* M2 · LE JETON FANTOME. `--force-b` etait lu huit fois et ecrit nulle part : la
     pastille mise en avant perdait son fond et gardait son encre tres sombre, soit
     1,02:1 mesure sur la seule chaine que la page demande de lire. Il porte la teinte
     du soufre, celle qui dit deja « voici ce qui compte » sur toutes les figures.
     Contraste de #150803 sur #F2D23A : bien au-dessus de 4,5:1, mesure au banc. */
  --force-b:     #F2D23A;
  --soufre-bas:  #6B5E1C;
  --iris:        #D673F0;
  --iris-bas:    #5D2A78;
  --gris-mesure: #8E99A3;

  /* ---- rupture claire ---- */
  --planche:        #E7E4DC;
  --planche-encre:  #15181C;
  --planche-encre2: #3E444B;
  --planche-filet:  #B9B4A6;
  --planche-soufre: #5A5340;
  --planche-iris:   #5D2A78;

  /* ---- typographie : pile systeme nommee, aucune police distante ---- */
  --f-titre: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --f-prose: "Segoe UI", system-ui, sans-serif;
  --f-nombre: Consolas, "Cascadia Mono", "Courier New", monospace;

  /* ---- echelle d'espacement : six pas, aucune autre valeur dans la feuille ---- */
  --e-1: 0.375rem;
  --e-2: 0.75rem;
  --e-3: 1.5rem;
  --e-4: 2.25rem;
  --e-5: 3.75rem;
  --e-6: 6rem;
  --filet-w: 1px;

  /* ---- echelle typographique : sept pas fluides.
         ESPACES DES DEUX COTES DE CHAQUE OPERATEUR : sans eux la declaration est
         invalide, font-size retombe sur l'heritage et toute la page rend a 16 px,
         sans erreur console et tous les controles au vert. ---- */
  --t-0: clamp(0.78rem, 0.755rem + 0.11vw, 0.86rem);
  --t-1: clamp(0.95rem, 0.92rem + 0.14vw, 1.05rem);
  --t-2: clamp(1.08rem, 1.02rem + 0.26vw, 1.26rem);
  --t-3: clamp(1.32rem, 1.18rem + 0.6vw, 1.72rem);
  --t-4: clamp(1.72rem, 1.4rem + 1.4vw, 2.7rem);
  --t-5: clamp(2.3rem, 1.6rem + 3vw, 4.4rem);
  --t-6: clamp(3.4rem, 1.7rem + 7.2vw, 8.6rem);

  /* ---- largeurs de conteneur, trois ---- */
  --l-lecture: 64ch;
  --l-prose:   50rem;
  --l-note:    78rem;
  --l-large:   96rem;
  --gouttiere: clamp(1.25rem, 0.8rem + 2.2vw, 3.5rem);

  /* ---- la piste de seuil : 16 demi-points, un pas fluide ---- */
  /* M1 · LE PAS EST DIVISE PAR DEUX PARCE QUE L'ECHELLE A DOUBLE. Elle allait de
     zero au seuil de pari, seize demi-points ; elle va desormais de MOINS le seuil
     de pari a PLUS le seuil de pari, trente-deux demi-points, parce qu'une barre
     signee a besoin des deux cotes. A pas constant la piste doublait de largeur et
     debordait : mesure du 08/09, 1 638 px de document pour 1 440 px de vue sur une
     fiche. La largeur physique de la signature est donc conservee, et c'est la
     PORTEE de l'echelle qui double, pas son encombrement. */
  /* Second reglage, apres mesure de presence. Divise par deux, le pas rendait 3,32 %
     de contour sur l'accueil contre 5,54 % avant la passe : la signature est la figure
     la plus dense du site, et la retrecir de moitie coute exactement la ou le plancher
     se paie. Borne calculee pour que trente-deux demi-points tiennent dans la colonne de
     lecture a 768, 1024, 1440 et 1920 px, la ou seize en occupaient la moitie. */
  --pas: clamp(0.38rem, 0.15rem + 1.9vw, 2rem);
  --h-cote: clamp(0.75rem, 0.6rem + 0.5vw, 1.05rem);

  /* ---- rayons : zero partout, sans exception. Une cote est une distance ; elle
         se dessine par un trait qui commence et finit, et un trait a bouts
         arrondis ment sur ses bornes. ---- */
  --r: 0;

  /* ---- durees et courbes, jamais la meme aux deux bouts ---- */
  --d-1:  80ms;
  --d-2: 150ms;
  --d-3: 260ms;
  --d-4: 420ms;
  --d-5: 700ms;
  --c-entree: cubic-bezier(0.18, 0.76, 0.26, 1);
  --c-sortie: cubic-bezier(0.42, 0, 0.82, 0.28);

  /* ---- la lumiere : profondeur d'extinction ecrite par le generateur ---- */
  --fin-lumiere: 62rem;

  /* ---- matiere : grain en tuile bornee, jamais en nappe plein cadre ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.09'/%3E%3C/svg%3E");
  --hachures: repeating-linear-gradient(45deg, var(--filet-2) 0 2px, transparent 2px 6px);

  color-scheme: dark;
}

/* ==========================================================================
   1 · SOCLE
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth }

body{
  /* Le raccourci `margin` est proscrit par le brief : il ecrit quatre cotes d'un coup,
     donc il ecrase en silence une valeur logique posee ailleurs. Deux proprietes
     logiques disent la meme chose sans rien ecraser. */
  margin-block: 0; margin-inline: 0;
  background-color: var(--fond);
  color: var(--craie);
  background-image:
    var(--grain),
    radial-gradient(92% 34% at 16% 0, rgba(206, 218, 234, 0.12), transparent 72%),
    radial-gradient(52% 22% at 84% 0, rgba(214, 115, 240, 0.055), transparent 76%),
    linear-gradient(180deg, #1B1F26 0, #14181E 24rem, var(--fond) var(--fin-lumiere), #090A0D 100%);
  background-attachment: scroll;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 180px 180px, 100% 100%, 100% 100%, 100% 100%;
  font-family: var(--f-prose);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  line-height: 1.62;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: break-word;
}

svg{ max-width: 100% }
img{ max-width: 100% }
a{ color: inherit }
b, strong{ font-weight: 600 }
:focus-visible{ outline: 3px solid var(--soufre); outline-offset: 2px }

h1, h2, h3, h4{
  font-family: var(--f-titre);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin-block: 0 var(--e-2);
  margin-inline: 0;
  text-wrap: balance;
}
h1{ font-size: var(--t-5); letter-spacing: -0.03em; line-height: 1.02 }
h2{ font-size: var(--t-4); letter-spacing: -0.022em }
h3{ font-size: var(--t-3) }
h4{ font-size: var(--t-2) }

p, ul, ol, dl, figure, table, blockquote{ margin-block: 0 var(--e-3); margin-inline: 0 }
p:last-child, ul:last-child, ol:last-child, dl:last-child{ margin-block-end: 0 }
p{ max-inline-size: var(--l-lecture) }
li{ margin-block: 0 var(--e-1) }
figure{ max-inline-size: 100% }

/* tous les nombres en chiffres tabulaires, declares deux fois partout ou des
   colonnes se comparent : sans cela une colonne de valeurs ondule. */
.n, .q, .v, .val, .pt, .gros, .pdev, .bp, .b-val, .hh, .fr, .cpt b, .k b, time{
  font-family: var(--f-nombre);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.vh{
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin-block: -1px; margin-inline: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saut{
  position: absolute; inset-block-start: -100vh; inset-inline-start: 0;
  background: var(--soufre); color: #14120A; z-index: 40; font-weight: 600;
  padding-block: var(--e-2); padding-inline: var(--e-3);
}
.saut:focus{ inset-block-start: 0 }

/* ==========================================================================
   2 · L'ENVELOPPE UNIQUE  ·  section > .wrap
   --------------------------------------------------------------------------
   Une seule regle porte la gouttiere et le centrage, et rien ne la reinitialise :
   aucun enfant de section ne porte de padding-inline ni de margin-inline, et la
   feuille n'ecrit AUCUN margin en raccourci. C'est ce qui ferme les rails gauches
   concurrents et le decalage mesure a 1920.
   ========================================================================== */

main{ display: block }

section{
  padding-block: var(--e-5);
  padding-inline: 0;
  position: relative;
}
section + section{ border-block-start: var(--filet-w) solid var(--filet) }

.wrap{
  inline-size: 100%;
  max-inline-size: var(--l-note);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.wrap.large{ max-inline-size: var(--l-large) }
/* UNE COLONNE A LA MESURE DE SON TEXTE. Voir `classe_enveloppe` : une section qui ne
   porte aucune figure large recoit cette enveloppe, et la bande morte de ses pages
   tombe de 674 px a la seule difference entre la colonne et la ligne. */
.wrap.lecture{ max-inline-size: var(--l-prose) }
.wrap.lecture p, .wrap.lecture dd, .wrap.lecture li{ max-inline-size: 72ch }

@media (min-width: 1024px){ section{ padding-block: var(--e-6) } }
@media (max-width: 560px){ section{ padding-block: var(--e-4) } }

/* ==========================================================================
   3 · EN-TETE A HAUTEUR CONSTANTE
   --------------------------------------------------------------------------
   Une seule rangee a TOUTE largeur : la barre ne se replie jamais, donc le
   `scroll-margin-block-start` des ancres reste juste a toutes les largeurs.
   ========================================================================== */

.tete{
  position: sticky; inset-block-start: 0; z-index: 30;
  background: var(--fond);
  border-block-end: var(--filet-w) solid var(--filet);
}
.tete-in{
  max-inline-size: var(--l-large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  display: flex; align-items: center; gap: var(--e-3);
  block-size: 3.5rem;
}
:target{ scroll-margin-block-start: 4.5rem }
.marque{
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-1);
  letter-spacing: 0.14em; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--e-2); color: var(--craie);
}
.mk{
  inline-size: 0.85rem; block-size: 0.85rem; display: inline-block;
  background: var(--soufre);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 62%);
}
.mk-c{ background: var(--iris) }

.nav{ display: flex; gap: var(--e-3); flex: 1 1 auto; min-inline-size: 0; overflow: hidden }
.nav a{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--encre-2); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; block-size: 3.4rem;
  border-block-end: 2px solid transparent;
}
.nav a:hover{ color: var(--craie); border-block-end-color: var(--filet-2) }
.nav a[aria-current]{ color: var(--soufre); border-block-end-color: var(--soufre) }
.tete .menu{ display: none }
.stamp{
  margin-block: 0; margin-inline-start: auto;
  font-size: var(--t-0); color: var(--encre-3); white-space: nowrap;
  flex: 0 1 auto; min-inline-size: 0; overflow: hidden;
}
.stamp b{ color: var(--craie); font-family: var(--f-nombre) }
.long{ display: none }
@media (min-width: 1660px){ .long{ display: inline } }

@media (max-width: 900px){
  .tete-in > .nav{ display: none }
  .tete .menu{ display: block; margin-inline-start: auto }
  .tete .menu > summary{
    font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.08em;
    cursor: pointer; color: var(--encre-2); list-style: none;
    display: flex; align-items: center; block-size: 3.4rem;
  }
  .tete .menu > summary::-webkit-details-marker{ display: none }
  /* UN DEPLIANT FERME GARDE SA MISE EN PAGE : les liens du menu restaient une rangee
     flexible de 1 081 px et gonflaient le document a 417 px pour 375 de vue. Un
     `overflow: hidden` cache l'image, il ne retire pas la boite. On retire la boite. */
  .tete .menu:not([open]) > .nav{ display: none }
  .tete .menu[open] > .nav{
    position: absolute; inset-inline: 0; inset-block-start: 3.5rem;
    background: var(--surface-1);
    border-block-end: var(--filet-w) solid var(--filet);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: var(--gouttiere);
    /* V5L · P1 · LE PANNEAU NE DEPASSE JAMAIS LA FENETRE, ET IL DEFILE LUI-MEME.
       Mesure du 08/09 a 375 x 780 : le panneau faisait 905 px dans 780, son
       `scrollHeight` valait son `clientHeight` (904 = 904), donc AUCUN defilement
       propre, et il est absolu sous un en-tete collant, donc le defilement de la page
       ne le remonte pas. Le lien USDCAD restait a y = 848 quoi qu'on demande et le clic
       echouait sur « element hors de la fenetre » : neuf paires sur vingt-neuf etaient
       inatteignables au telephone, dont trois des quatre du membre.
       `overflow: visible` laissait deborder au lieu de contenir : on borne la hauteur a
       la fenetre moins l'en-tete (3,5rem, la hauteur de `.tete-in`) et on rend le
       defilement au panneau. `100vh` d'abord, `100dvh` ensuite : sur un telephone la
       barre d'adresse mange la fenetre et `dvh` suit ce retrait, mais il ne se declare
       qu'en second pour que le repli reste lisible la ou `dvh` n'existe pas. */
    max-block-size: calc(100vh - 3.5rem);
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    padding-block-end: var(--e-2);
  }
  @supports (max-block-size: 100dvh){
    .tete .menu[open] > .nav{ max-block-size: calc(100dvh - 3.5rem) }
  }
  .tete .menu[open] > .nav a{ block-size: 2.75rem }
  /* V5K · P6 · LA LIGNE ALPHABETIQUE TIENT LES DEUX COLONNES DU PANNEAU. Posee
     en enfant direct du depliant, elle restait dans les 40 px du bouton et se
     dressait sur 1 786 px : la sonde d'etranglement l'a refusee sur 94 vues. Elle
     entre donc DANS le panneau, qui est deja absolu et large, et y prend ses deux
     colonnes. */
  .tete .menu[open] > .nav > .sur-menu,
  .tete .menu[open] > .nav > .somm-menu{ grid-column: 1 / -1 }
  .tete .menu[open] > .nav > .somm-menu a{ block-size: 2.75rem }
  .stamp{ display: none }
}

/* ==========================================================================
   4 · LA SIGNATURE  ·  LA COLONNE DE SEUIL
   ========================================================================== */

/* la grille des figures heritees : 200 colonnes, une position par donnee. Le
   mandat demande de garder ce CALCUL ; seul le dessin change. */
.piste{
  display: grid;
  grid-template-columns: repeat(var(--cols, 200), minmax(0, 1fr));
  align-items: center;
  position: relative;
  min-block-size: var(--h-cote);
}
/* V5L · P2 · LA FIGURE DU PONT CONSOMME ENFIN SES TROIS VALEURS.
   Le HTML emet `--cmin`, `--cmax` et `--c` sur 58 declarations, et AUCUNE regle de
   cette feuille ne les lisait : `var(--cmin)`, `var(--cmax)` et `var(--c)` comptaient
   zero occurrence. Les deux enfants tombaient donc dans la premiere colonne d'une
   grille de deux cents, soit 1,5 px a 1440 et 1,2 px a 375, et la MEME image vide se
   publiait sur les 31 pages : AUD/CAD (34 a 78) et CAD/JPY (34 a 188) etaient
   indiscernables. Trois consequences reparees ici, et aucun nombre nouveau : les
   valeurs restent celles que le generateur emet deja.
     1. `.pont` prend sa travee de la borne basse a la borne haute ;
     2. `.tk` se pose sur sa colonne et se centre dessus ;
     3. le chevron du marqueur retrouve la taille de celui de la legende (1,1rem,
        mesure a 17,6 px) : `svg{ max-width: 100% }`, declare en tete de feuille, le
        rabotait a la largeur de sa colonne, d'ou le 1,5 px sur 15 px releve par la
        passe 10. `max-inline-size: none` leve ce rabot, et `overflow: visible` sur la
        case laisse le chevron deborder d'une piste large d'un deux-centieme.
   Le fond du pont etait transparent : une boite bien placee qui ne peint rien reste
   une figure vide, d'ou la matiere posee ici, reprise du degrade de `.tige`. */
.piste > .pont{
  grid-row: 1;
  grid-column: var(--cmin, 100) / var(--cmax, 101);
  block-size: 0.5rem;
  background-image: linear-gradient(90deg, var(--soufre-bas) 0, var(--soufre) 100%);
  border-radius: 999px;
}
.piste > .tk{
  grid-row: 1;
  grid-column: var(--c, 100);
  justify-self: center; align-self: center;
  inline-size: 1.1rem; block-size: 1.1rem;
  overflow: visible; z-index: 1;
}
.piste > .tk > .chev{
  inline-size: 1.1rem; block-size: 1.1rem; max-inline-size: none;
}

/* LA SIGNATURE : 16 demi-points, de 0,0 au seuil de pari enregistre. */
.seuil{
  justify-self: start;
  max-inline-size: 100%;
  display: grid;
  /* M1 : DEUX DEMI-PISTES ET UN ZERO. La gauche est reservee par `--negn`, le plus
     grand ecart negatif pose dans CETTE figure ; la droite se dimensionne par ce
     qu'on y pose. Le zero tombe donc au meme x sur toutes les rangees d'une meme
     figure, ce qui est la condition pour que deux signes opposes se lisent comme
     opposes. */
  grid-template-columns:
    [neg] calc(var(--negn, 0) * var(--pas))
    [zero] 2px
    [pos] minmax(0, max-content);
  align-items: center;
  position: relative;
  /* AUCUN PLANCHER, ni en largeur ni en hauteur. Deux planchers ont ete retires ici
     apres relecture : `min-inline-size: calc(var(--pas) * 2)` et `min-block-size`.
     Tous deux tenaient la piste ouverte SANS aucune cote, ce qui contredisait la
     regle ecrite trois lignes plus bas sur les pseudo-elements et, surtout, truquait
     la mesure de portance : la piste retombait a deux pas au lieu de zero, et la
     hauteur du document ne bougeait pas du tout. La piste ne doit exister que par ce
     qu'on y pose. */
  background-image:
    repeating-linear-gradient(90deg, var(--filet) 0 1px, transparent 1px var(--pas));
  background-position-x: calc(var(--negn, 0) * var(--pas));
}
/* les deux graduations sont des PSEUDO-ELEMENTS : un noeud tiendrait la piste
   ouverte sans aucune cote et truquerait la mesure de portance.
   `::before` est desormais L'AXE ZERO, et c'est le repere que le membre cherchait :
   il tombe a la frontiere des deux demi-pistes, il est plus clair que les filets, et
   il est plus haut qu'eux pour se voir sur une rangee. */
.seuil::before, .seuil::after{
  content: ""; position: absolute; pointer-events: none;
}
.seuil::before{
  inset-block: -0.45rem; inline-size: 2px;
  inset-inline-start: calc(var(--negn, 0) * var(--pas));
  background: var(--craie); opacity: 0.85;
}
.seuil::after{
  inset-block: -0.3rem; inline-size: 1px;
  inset-inline-end: -1px; background: var(--soufre); opacity: 0.7;
}

.seuil > .cote{
  grid-column: pos; justify-self: start;
  min-inline-size: calc(var(--n, 1) * var(--pas));
  block-size: var(--h-cote);
  background-image: linear-gradient(90deg, var(--soufre-bas) 0, var(--soufre) 100%);
  position: relative; z-index: 1;
}
/* M1 · LA BARRE NEGATIVE PART DU ZERO VERS LA GAUCHE. Le degrade est retourne pour
   que l'extremite claire reste la POINTE dans les deux sens : c'est la pointe qui
   dit la distance, et elle doit se voir du meme cote de l'oeil a gauche et a droite.
   `.neg` est INDEPENDANTE de `.d-neg`, qui dit tout autre chose (une valeur sortie
   de son couloir) et qui a longtemps porte un nom pretant a confusion. */
.seuil > .cote.neg{
  grid-column: neg; justify-self: end;
  background-image: linear-gradient(90deg, var(--soufre) 0, var(--soufre-bas) 100%);
}
.seuil > .cote.d-neg{ background-image: linear-gradient(90deg, var(--iris-bas) 0, var(--iris) 100%) }
.seuil > .cote.d-neg.neg{ background-image: linear-gradient(90deg, var(--iris) 0, var(--iris-bas) 100%) }
.seuil > .cote.neutre{ background-image: linear-gradient(90deg, #333A42 0, var(--gris-mesure) 100%) }
.seuil > .cote.neutre.neg{ background-image: linear-gradient(90deg, var(--gris-mesure) 0, #333A42 100%) }
.seuil > .cote.hach{ background-image: var(--hachures) }

/* DEUX SILENCES QUI NE SE RESSEMBLENT PAS, et c'est tout l'enjeu de la piste.
   `.hach` : la valeur MANQUE. Les hachures occupent un demi-point pour se voir, et
   ce demi-point ne se lit pas comme une distance puisque le motif dit l'absence.
   `.zero` : la valeur VAUT ZERO, et c'est une mesure. Elle se rend par un repere
   d'origine de largeur FIXE, hors echelle, jamais par un demi-point : une cote d'un
   demi-point sur une valeur nulle affirmerait une distance que le releve refuse. */
.seuil > .cote.zero{
  grid-column: zero;
  min-inline-size: 0;
  inline-size: 3px;
  background-image: none;
  background: var(--craie);
}

.rang-seuil{
  display: grid;
  grid-template-columns: [nom] minmax(5rem, 11ch) [seuil] minmax(0, max-content) [val] minmax(3.5rem, max-content);
  align-items: center;
  gap: var(--e-2);
  padding-block: var(--e-1);
  border-block-end: var(--filet-w) solid var(--filet);
  text-decoration: none;
}
.rang-seuil:last-child{ border-block-end: 0 }
.rang-seuil:hover{ background: var(--surface-1) }
.rang-seuil .dev{
  font-family: var(--f-nombre); font-size: var(--t-0); letter-spacing: 0.04em;
  color: var(--craie); white-space: nowrap;
}
.rang-seuil .q{ font-size: var(--t-0); color: var(--encre-2); text-align: end; white-space: nowrap }
.seuil-tete{
  display: grid;
  grid-template-columns: [nom] minmax(5rem, 11ch) [seuil] max-content [val] minmax(3.5rem, max-content);
  gap: var(--e-2);
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-3);
  padding-block: 0 var(--e-1);
  border-block-end: var(--filet-w) solid var(--filet-2);
}
/* sous 720 px la piste devient une RANGEE sous le nom : meme signature, deux
   formes, jamais un remplacement. */
@media (max-width: 720px){
  /* LE PAS SE CALCULE SUR CE QUI RESTE, pas sur la vue entiere : la gouttiere de page,
     la bordure de la piste et la colonne de valeur se retranchent d'abord, sinon les
     seize pas depassent le conteneur (mesure : document a 417 px pour 375 de vue).
     Et l'en-tete redevient une simple ligne de texte : une colonne `max-content` ne
     peut pas replier une legende longue, elle la pousse hors du cadre. */
  .rang-seuil{ grid-template-columns: [nom] minmax(0, 1fr) [val] max-content; row-gap: var(--e-1) }
  /* LA PISTE CESSE DE SE MESURER SUR LA VUE. Le calcul precedent partait de `100vw`,
     qui INCLUT la barre de defilement classique : sur un poste a barre non flottante,
     seize pas depassaient de la largeur de cette barre, et aucun controle ne pouvait
     le voir puisque Playwright rend la barre en surimpression. Ici les seize pas se
     partagent la piste elle-meme en `1fr`, le fond se gradue en 6,25 % (un seizieme),
     et la cote perd son plancher en `--pas` : le depassement devient impossible par
     construction plutot que juste par arithmetique. */
  .rang-seuil .seuil{
    grid-column: 1 / -1;
    inline-size: 100%;
    /* M1 replie : seize demi-points a gauche, le zero, seize a droite. En `1fr`, donc
       le depassement est impossible par construction et non par arithmetique. */
    grid-template-columns: repeat(16, minmax(0, 1fr)) 2px repeat(16, minmax(0, 1fr));
    background-image:
      repeating-linear-gradient(90deg, var(--filet) 0 1px, transparent 1px 3.125%);
    background-position-x: 0;
  }
  .rang-seuil .seuil::before{ inset-inline-start: 50% }
  .rang-seuil .seuil > .cote{
    min-inline-size: 0; inline-size: auto; grid-column: 18 / span var(--n, 1);
  }
  .rang-seuil .seuil > .cote.neg{ grid-column: span var(--n, 1) / 17 }
  .rang-seuil .seuil > .cote.zero{ grid-column: 17 / 18; inline-size: 3px }
  .planche .rang-seuil .seuil{
    background-image:
      repeating-linear-gradient(90deg, var(--planche-filet) 0 1px, transparent 1px 6.25%);
  }
  .seuil-tete{ display: block }
  .seuil-tete > span{ display: inline; margin-inline-end: var(--e-2) }
}

/* ==========================================================================
   5 · LA MANCHETTE
   ========================================================================== */

.heros{ padding-block-start: var(--e-5) }
.sur{
  font-family: var(--f-nombre); font-size: var(--t-0);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--soufre); margin-block: 0 var(--e-2);
  display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap;
}
.sur .n{ color: var(--encre-3) }
.verdict{
  font-family: var(--f-titre); font-size: var(--t-4); font-weight: 600;
  line-height: 1.16; letter-spacing: -0.02em;
  max-inline-size: 34ch; margin-block: 0 var(--e-3); text-wrap: balance;
}
.verdict-f{ color: var(--soufre) }
.chapo{
  font-size: var(--t-2); color: var(--encre-2); line-height: 1.6;
  max-inline-size: var(--l-lecture); margin-block: 0 var(--e-3);
}
.chapo b{ color: var(--craie) }
.aveu{
  font-size: var(--t-0); color: var(--encre-3);
  border-inline-start: 2px solid var(--filet-2);
  padding-inline-start: var(--e-2); max-inline-size: 66ch; margin-block: 0 var(--e-3);
}
.gros{
  font-size: var(--t-6); line-height: 0.86; letter-spacing: -0.04em;
  color: var(--soufre); display: block; margin-block: 0;
  font-family: var(--f-nombre); font-weight: 600;
}
.gros .u{ font-size: var(--t-3); color: var(--encre-2); letter-spacing: 0 }
.heros-grille{
  display: grid; gap: var(--e-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px){
  .heros-grille{ grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr) }
}

/* le bandeau de synthese d'une fiche : trois colonnes, le libelle TOUJOURS
   au-dessus de sa valeur. Un banc du projet mesure exactement cette structure. */
.heros .grille{
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: var(--filet-w) solid var(--filet);
  padding-block: var(--e-3);
}
@media (max-width: 560px){
  .heros .grille{ grid-template-columns: minmax(0, 1fr); grid-template-rows: none }
}
/* LES TROIS COLONNES PARTAGENT LEURS DEUX RANGEES, et c'est une correction mesuree :
   un libelle sur deux lignes faisait descendre SA valeur au niveau du libelle voisin.
   Le banc du projet compte cela comme « un libelle sur la ligne d'une autre valeur » et
   il en trouvait deux par fiche a 768 et a 1024, dans les deux moteurs. Une sous-grille
   de rangees aligne les trois libelles entre eux et les trois valeurs entre elles, quelle
   que soit la longueur du texte. Sans support, on retombe sur le comportement d'avant :
   correct en pile, seul l'alignement se perd.

   TROIS RANGEES, PAS DEUX, et c'est une correction de la correction. Le premier jet
   en posait deux (`grid-template-rows: auto auto`, `grid-row: span 2`) alors
   que la carte porte TROIS enfants : le libelle, le nombre, la phrase de dessous. Le
   troisieme tombait dans une rangee implicite de hauteur nulle et s'ecrivait PAR-DESSUS
   le nombre. Mesure : 111 cartes sur 37 pages sur 47, texte illisible, et aucun des huit
   controles ni le banc M9 ne le voyaient, puisque la page ne debordait pas et que les
   libelles restaient bien alignes entre eux. Une carte a deux enfants laisse simplement
   sa troisieme rangee vide. */
.heros .grille{ grid-template-rows: auto auto auto }
.heros .grille > .bloc{
  display: grid; gap: var(--e-1); align-content: start;
  padding: 0; border: 0; background: none;
}
@supports (grid-template-rows: subgrid){
  @media (min-width: 561px){
    .heros .grille > .bloc{ grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--e-1) }
  }
}
.heros .grille .lab{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-3); margin-block: 0;
}
.heros .grille .cote{
  grid-column: auto; min-inline-size: 0; block-size: auto;
  background-image: none;
  font-family: var(--f-nombre); font-size: var(--t-3); color: var(--craie);
  line-height: 1.1;
}

/* ==========================================================================
   6 · LE MODULE  ·  un seul gabarit de carte
   ========================================================================== */

.bloc{
  background: var(--surface-1);
  border: var(--filet-w) solid var(--filet);
  padding: var(--e-3);
  display: grid; align-content: start; gap: var(--e-2);
}
.bloc:hover{ border-color: var(--filet-2) }
.lab{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-3); margin-block: 0;
}
.sous{ font-size: var(--t-1); color: var(--encre-2); margin-block: 0 }
.note{
  font-size: var(--t-0); color: var(--encre-3); line-height: 1.5;
  max-inline-size: 76ch; margin-block: var(--e-2) 0;
}
.note-bruit{ border-inline-start: 2px solid var(--filet-2); padding-inline-start: var(--e-2) }
.orig, .source-ligne, .parution, .m-t, .t0, .t-c, .t-l, .t-mi, .t-deb, .t-fin, .pt-o{
  font-size: var(--t-0); color: var(--encre-3);
}
.avert{
  border: var(--filet-w) solid var(--soufre-bas);
  background: rgba(242, 210, 58, 0.06);
  padding: var(--e-3); font-size: var(--t-1); margin-block: 0 var(--e-3);
}
.honnete{
  border-block-start: 2px solid var(--iris-bas);
  padding-block-start: var(--e-2); font-size: var(--t-1); color: var(--encre-2);
}
.hors-semaine{ opacity: 0.74 }
.retrait{ padding-inline-start: var(--e-3) }
/* `.sep` EST UN BLOC DE TEXTE, PAS UN TRAIT, et l'avoir cru a coute la page des
   scenarios. La feuille refaite lui donnait `block-size: var(--filet-w)`, soit UN PIXEL
   de haut, en la prenant pour un separateur graphique. Or le generateur ne s'en sert
   nulle part comme trait : ses 29 occurrences portent toutes du texte (« Comment
   reagir. Alleger, attendre, sortir... »). Le texte debordait donc de 57 px hors d'un
   bloc haut d'un pixel, et, de proche en proche, `.pan-defaut`, `.panneaux`, `.wrap` et
   la section entiere se retrouvaient sous-dimensionnes : tout le contenu suivant
   s'ecrivait par-dessus. Aucun des huit controles ne pouvait le voir, la page ne
   debordant qu'en hauteur. Un separateur, ici, c'est `hr`. */
.sep{
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block-start: var(--e-2);
  margin-block: var(--e-3) 0;
  font-size: var(--t-1); color: var(--encre-2);
}
.sep > b{ color: var(--craie); font-weight: 400 }
hr.sep{
  block-size: var(--filet-w); background: var(--filet);
  border: 0; padding: 0; margin-block: var(--e-3);
}

/* une seule grille de contenu, jamais `auto-fit` : le generateur ecrit le nombre
   de colonnes, donc aucune rangee orpheline ne se fabrique toute seule. */
.grille, .tuiles, .fenetres, .metriques, .faits, .codes, .routes, .ponts, .compar{
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(var(--col, 3), minmax(0, 1fr));
}
@media (max-width: 900px){
  .grille, .tuiles, .fenetres, .metriques, .faits, .codes, .routes, .ponts, .compar{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  .grille, .tuiles, .fenetres, .metriques, .faits, .codes, .routes, .ponts, .compar{
    grid-template-columns: minmax(0, 1fr);
  }
}
/* UNE RANGEE ORPHELINE EST UNE BANDE MORTE, ET ON NE LA FERME PAS EN CSS.
   Mesure du 08/09 : 22 tuiles de couloir dans trois colonnes laissent la
   vingt-deuxieme SEULE sur sa rangee, 357 px occupes dans 1 248, sur 374 px de
   hauteur -- la totalite des 891 px de bande morte de la page des couloirs, et le
   meme defaut valait 878 px sur la page du score.

   ⛔ MON PREMIER MONTAGE FAISAIT PRENDRE AU DERNIER ELEMENT LA LARGEUR QUI RESTAIT,
      ET C'ETAIT UN JEU SUR LA MESURE. La bande morte tombait a 270 px ; la capture
      montrait une tuile de 1 120 px dont le contenu tenait sur la moitie gauche.
      Ce que la sonde comptait comme « occupe », c'etait la BORDURE de la boite. Le
      chiffre s'ameliorait parce que la boite grandissait, pas parce que la page etait
      mieux cadree (`_preuves-generateur-v5d/captures/AVANT-ch-provenance-1440.png`
      contre `ch-provenance-1440.png`). La regle a ete retiree.

   Le nombre de colonnes se choisit donc la ou le commentaire ci-dessus a toujours dit
   qu'il se choisissait : DANS LE GENERATEUR, par `col_sans_orpheline()`. Vingt-deux
   tuiles se rangent en deux colonnes, onze rangees pleines, et chaque tuile est deux
   fois plus large pour porter ses cinq blocs de texte. Quand aucun diviseur ne tombe
   juste (sept ponts sur l'accueil, un seul sur une fiche), l'orpheline reste : elle
   est la verite de la page, et le rapport la nomme au lieu de la gonfler. */
/* LA LISTE DES FAITS, et c'est la capture qui l'a montree, pas un controle : les huit
   contrôles etaient verts pendant que « Classement annonce » et son explication se
   lisaient « Classement annoncede la plus forte », et la valeur collait au libelle
   (« revendiquesune direction »). Un `<i>` et un `<b>` sont des elements EN LIGNE :
   sans regle, ils se soudent au mot precedent. On les passe en bloc, on separe les
   trois roles (etiquette, explication, valeur) et on retire les puces. */
.faits{ list-style: none; padding: 0; margin-block: var(--e-3) 0 }
.faits > li{
  display: grid; gap: var(--e-1); align-content: start;
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block: var(--e-2); margin-block: 0;
}
.faits .k{
  display: grid; gap: var(--e-1);
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--encre-3);
}
.faits .k i, .metriques .k i, .fenetre .k i{
  display: block; font-style: normal; text-transform: none; letter-spacing: 0;
  color: var(--encre-3); font-size: var(--t-0); line-height: 1.45;
  max-inline-size: 62ch;
}
.faits .v{
  font-family: var(--f-nombre); font-size: var(--t-3); color: var(--craie); line-height: 1.1;
}
.classement{
  display: grid; gap: 0; padding: 0; margin-block: var(--e-1) 0;
  grid-template-columns: minmax(0, 1fr);
}
.classement > li{
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) max-content;
  gap: var(--e-2); align-items: baseline; margin-block: 0;
  padding-block: var(--e-1);
  border-block-end: var(--filet-w) solid var(--filet);
  font-family: var(--f-nombre); font-size: var(--t-1);
}
.classement > li:last-child{ border-block-end: 0 }
.classement > li > b{ color: var(--encre-3); font-weight: 400 }
.classement > li > span{ color: var(--craie); letter-spacing: 0.04em }
.classement > li > em{ font-style: normal; color: var(--soufre); text-align: end }

/* LE MEME DEFAUT QUE `.faits`, LA MEME CAUSE, ET IL AVAIT ETE MANQUE. La correction
   precedente n'avait couvert que la liste des faits ; `.metriques` et `.fenetre`
   posent elles aussi un libelle et une valeur en ELEMENTS EN LIGNE, donc soudes. La
   capture rendait « REFERENCE DE DEPART1,35170 », sur les 29 fiches de paire, avec les
   huit controles au vert. On leur donne la mise en page des faits : une pile, le
   libelle au-dessus, la valeur dessous, l'unite sous la valeur, aucune puce. */
.metriques{ list-style: none; padding: 0; margin-block: var(--e-3) 0 }
.metriques > li{
  display: grid; gap: var(--e-1); align-content: start;
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block: var(--e-2); margin-block: 0;
}
.metriques .k, .fenetre .k{
  display: grid; gap: var(--e-1);
  font-size: var(--t-0); color: var(--encre-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.metriques .v, .fenetre .v{
  display: grid; gap: var(--e-1);
  font-family: var(--f-nombre); font-size: var(--t-3); color: var(--craie); line-height: 1.1;
}
.metriques .u, .fenetre .u{
  display: block;
  font-family: var(--f-prose); letter-spacing: 0;
  font-size: var(--t-0); color: var(--encre-3);
}

/* le module de queue : un reste de rangee porte la provenance, jamais du vide */
.queue{
  grid-column: 1 / -1;
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block-start: var(--e-2);
  font-size: var(--t-0); color: var(--encre-3);
}

/* ==========================================================================
   7 · LES FIGURES PILOTEES PAR LA DONNEE
   ========================================================================== */

/* `display: block` N'EST PAS DECORATIF ICI. Le generateur ecrit la jauge en `<span>`,
   donc en element DE LIGNE : sans cette declaration, `block-size` est ignore, le `<i>`
   de remplissage fabrique une boite anonyme, et la jauge occupait 980 px de haut au
   lieu de 22, poussant tout le panneau des scenarios hors de sa boite. */
.jauge{
  display: block;
  block-size: var(--h-cote); background: var(--surface-2);
  border: var(--filet-w) solid var(--filet); position: relative; overflow: hidden;
  margin-block: var(--e-2);
}
.jauge > i{
  display: block; block-size: 100%;
  inline-size: calc(var(--p, 0) * 1%);
  background-image: linear-gradient(90deg, var(--soufre-bas) 0, var(--soufre) 100%);
}
.jauge.creuse > i{ background-image: var(--hachures) }
.jauge-lab{ font-family: var(--f-nombre); font-size: var(--t-0); color: var(--encre-2) }

/* le couloir : AUCUNE ligne de bord. Opacite pleine au centre, nulle sur au moins
   un quart de la demi-largeur : un bord net fabrique « dedans = sur, dehors =
   impossible » chez un debutant, alors que 32 semaines sur 100 en sortent. */
/* LA GEOMETRIE DE CETTE FIGURE VIENT DU GENERATEUR, PAS DE LA FEUILLE, et l'avoir
   oublie l'a cassee sur les 29 fiches de paire. Le HTML pose `--kp` sur le couloir et
   `--c1`, `--c2`, `--v` sur les bandes : ce sont des POURCENTAGES DE PRIX, pas des
   numeros de colonne. Ils se convertissent en colonnes par `100 +/- valeur * --kp` sur
   une grille de `--cols` colonnes centree sur la 100e. La feuille refaite les avait pris
   pour des numeros de colonne (`grid-column: var(--c1, 40) / var(--c2, 160)`) et avait
   deplace la grille sur `.couloir` en laissant `.bandes` en bloc : la bande tombait dans
   UNE colonne de 3,5 px, son etiquette s'y empilait sur 1 000 px de haut, et la figure
   ne montrait plus rien. La geometrie ci-dessous est celle d'origine ; seules les
   couleurs sont celles de la refonte. */
.couloir{ position: relative; margin-block: var(--e-3) var(--e-2) }
.bandes{
  display: grid; grid-template-columns: repeat(var(--cols, 200), minmax(0, 1fr));
  align-items: center; min-block-size: 5.2rem; position: relative;
  background: var(--surface-2);
}
.b-large{
  grid-column: calc(100 - var(--c2) * var(--kp)) / calc(100 + var(--c2) * var(--kp));
  grid-row: 1; block-size: 4.4rem;
  background-image: linear-gradient(90deg,
    rgba(214, 115, 240, 0) 0,
    rgba(214, 115, 240, 0.34) 26%,
    rgba(214, 115, 240, 0.34) 74%,
    rgba(214, 115, 240, 0) 100%);
}
.b-median{
  grid-column: calc(100 - var(--c1) * var(--kp)) / calc(100 + var(--c1) * var(--kp));
  grid-row: 1; block-size: 2.9rem;
  border-inline: var(--filet-w) solid var(--iris);
  background-image: repeating-linear-gradient(45deg,
    rgba(214, 115, 240, 0.30) 0 2px, transparent 2px 7px);
}
.b-val{
  grid-column: calc(100 + var(--v) * var(--kp)) / span 1; grid-row: 1;
  justify-self: center; position: relative;
  block-size: 5.2rem; inline-size: 2px; background: var(--craie);
}
.b-val > b{
  position: absolute; inset-block-start: -0.15rem; inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--craie); color: var(--fond);
  padding: 0.12rem 0.4rem; font-size: var(--t-0);
  font-family: var(--f-nombre); font-weight: 400; white-space: nowrap;
}
/* une etiquette centree sur un trait proche du bord sortirait du cadre : pres du bord
   gauche elle part du trait vers la droite, pres du bord droit elle finit dessus. */
.b-val.b-deb > b{ inset-inline-start: 0; transform: none }
.b-val.b-fin > b{ inset-inline-start: auto; inset-inline-end: 0; transform: none }
.b-froid > b{ background: var(--gris-mesure) }
.regle-p{
  display: grid; grid-template-columns: repeat(var(--cols, 200), minmax(0, 1fr));
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block-end: 1.4rem; margin-block-start: -1px;
}
.regle-p .t{
  grid-column: var(--g) / span 1; justify-self: center;
  inline-size: 1px; block-size: 0.5rem; background: var(--filet-2);
  position: relative; display: block;
}
.regle-p .t.t0{ background: var(--encre-3); block-size: 0.8rem }
.regle-p .t > b{
  position: absolute; inset-block-start: calc(100% + 0.2rem); inset-inline-start: 50%;
  transform: translateX(-50%);
  font-family: var(--f-nombre); font-size: var(--t-0); font-weight: 400;
  color: var(--encre-3); white-space: nowrap;
}
.regle-p .t.t-deb > b{ inset-inline-start: 0; transform: none }
.regle-p .t.t-fin > b{ inset-inline-start: auto; inset-inline-end: 0; transform: none }
/* SEPT ETIQUETTES NE TIENNENT PAS SUR 375 px, mesure : elles se chevauchaient deux a
   deux sur 29 fiches, 473 px2 de recouvrement a chaque fois. Sous 560 px on ne garde
   donc que les trois reperes qui portent la lecture, les deux bords et le zero. Les
   TRAITS restent tous : la graduation ne perd pas une division, seuls les nombres
   intermediaires s'effacent, et ils se relisent des que la place existe. */
@media (max-width: 560px){
  .regle-p .t:not(.t0):not(.t-deb):not(.t-fin) > b{ display: none }
}
.f-couloir, .f-contour, .fig-cadre, .anat, .anat-fig,
.demo-piste, .demo-barre, .demo-formes, .hex-demo{
  border: var(--filet-w) solid var(--filet);
  padding: var(--e-3); background: var(--surface-1);
  display: grid; gap: var(--e-2);
}
/* V5L · P3 · LES NEUF COMMANDES NATIVES DU FILTRE SORTENT DE L'IMAGE, PAS DE L'ARBRE.
   Sur `calendrier.html`, neuf `input type=radio` de 13 px sur 13 etaient peints juste
   au-dessus du filtre par devise : `elementFromPoint` au centre de chacun rendait
   l'`input` lui-meme aux deux largeurs, ils etaient donc bien l'element du dessus, et
   la capture de la passe 10 les montre a l'oeil. Ils ne servent a rien : ce sont les
   pastilles qui pilotent, par `#f-X:checked ~ .filtre label`.
   JAMAIS `display: none` : la commande disparaitrait de l'ordre de tabulation et le
   filtre cesserait d'etre pilotable au clavier, ce que la porte des couleurs forcees
   et le focus visible exigent. Masquage accessible, donc : la boite reste dans l'arbre,
   focusable, cochable aux fleches, et son focus reste VU parce que l'anneau est deja
   porte par l'etiquette (`#f-X:focus-visible ~ .filtre label{outline:3px}`). */
.f-r{
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* la barre de partition : une seule barre empilee, branche residuelle jamais
   masquee, largeurs prises telles quelles dans le releve. */
/* TROISIEME COLLISION DE NOM, et la derniere : `.bande` designe deja la bande de jours
   du calendrier sur l'accueil, une LISTE. Lui donner la barre de partition la mettait
   en ligne et poussait le document a 417 px pour 375 de vue. La barre de partition
   prend donc son propre nom, `.partition`, et la bande reste une liste. */
.bande{
  display: grid; gap: var(--e-2); padding: 0; list-style: none;
  grid-template-columns: minmax(0, 1fr); margin-block: var(--e-3) 0;
}
@media (min-width: 900px){
  .bande{ grid-template-columns: repeat(5, minmax(0, 1fr)) }
}
.bande > li{
  display: grid; gap: var(--e-1); margin-block: 0;
  border-block-start: 2px solid var(--filet-2); padding-block-start: var(--e-2);
}
.bande .j, .bande > li > .j{
  font-size: var(--t-1); border-block-end: 0; padding-block-end: 0;
}
.bande ul{ display: grid; gap: var(--e-1); padding: 0; list-style: none; margin-block: 0 }
.bande ul li{ font-size: var(--t-0); color: var(--encre-3); margin-block: 0 }

.partition{
  display: flex; block-size: 1.35rem; overflow: hidden;
  border: var(--filet-w) solid var(--filet); background: var(--surface-2);
}
.partition > span{
  display: block; flex: 0 0 calc(var(--p, 0) * 1%);
  background: var(--soufre); opacity: 0.92;
  border-inline-end: var(--filet-w) solid var(--fond);
}
.partition > span.b2{ background: var(--iris) }
.partition > span.b3{ background: var(--gris-mesure) }
.partition > span.b4{ background-image: var(--hachures); background-color: var(--surface-2) }

.tige{ block-size: var(--h-cote); background-image: linear-gradient(90deg, var(--soufre-bas) 0, var(--soufre) 100%) }
.jeton{ inline-size: 0.8rem; block-size: 0.8rem; background: var(--craie); display: inline-block }
.bruit{ background-image: var(--hachures); block-size: var(--h-cote); opacity: 0.7 }
.hach{ background-image: var(--hachures) }
.chev{ inline-size: 0.9em; block-size: 0.9em; vertical-align: -0.08em }
.fort{ color: var(--soufre) }
.faible{ color: var(--gris-mesure) }
.neutre{ color: var(--encre-2) }
.vise{ outline: 2px solid var(--iris); outline-offset: 2px }
.axe, .pont, .piste-pont, .poles, .bnom-axe{ display: grid }

/* ==========================================================================
   8 · LES BRANCHES  ·  charpente a sous-titres constants
   --------------------------------------------------------------------------
   Un seul bloc `.branches`, une seule intention : la double declaration qui
   ecrasait l'espacement des scenarios sur toutes les fiches est fermee ici.
   ========================================================================== */

.branches{
  display: grid; gap: var(--e-3);
  grid-template-columns: minmax(0, 1fr);
  margin-block: var(--e-3) 0; padding: 0; list-style: none;
}
@media (min-width: 900px){ .branches{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.branche{
  border: var(--filet-w) solid var(--filet);
  border-inline-start: 3px solid var(--soufre-bas);
  background: var(--surface-1); padding: var(--e-3);
  display: grid; gap: var(--e-2); align-content: start;
}
.branche.br-t{ border-inline-start-color: var(--iris-bas) }
.branche.br-n{ border-inline-start-color: var(--filet-2) }
.btete{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) }
.bp{ font-family: var(--f-nombre); font-size: var(--t-3); color: var(--soufre); line-height: 1 }
.bnom{ font-family: var(--f-titre); font-weight: 600; font-size: var(--t-2); margin-block: 0 }
.br-p, .br-n-lab{ font-size: var(--t-0); color: var(--encre-3) }
.branche dt{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-3); margin-block: var(--e-2) 0;
}
.branche dd{ margin-inline: 0; margin-block: 0; font-size: var(--t-1) }
.branche .quand, .quand{ color: var(--soufre); font-family: var(--f-nombre); font-size: var(--t-0) }

/* ==========================================================================
   8 quater · LA FICHE EN DEUX COLONNES  ·  rail de reperes, prose a mesure
   --------------------------------------------------------------------------
   LE DEFAUT QU'ELLE FERME. Sur une fiche de paire a 1 440 px, le contenu tenait
   dans les 900 premiers pixels et la moitie droite restait vide sur toute la
   hauteur du bandeau de tete : 1 084 px perdus, mesures avant cette passe.
   « Mal cadre mal centre », et c'etait exact.
   LE REMEDE N'EST PAS D'ELARGIR LA PROSE. Un paragraphe de 1 100 px se lit mal :
   l'oeil perd sa ligne au retour. On donne donc la largeur perdue a un RAIL qui
   porte ce qui ne doit pas se perdre en trois ecrans de lecture -- la cote,
   l'heure, les devises, l'invalidation -- et la prose garde sa mesure.
   ⛔ LE COLLANT NE SE POSE PAS SUR L'ENFANT DIRECT DE LA GRILLE. Un enfant de
      grille est etire a la hauteur de sa rangee par `align-self: stretch`, et
      `position: sticky` n'a alors plus rien contre quoi coller : le rail resterait
      en haut et creuserait un vide de la hauteur de la rangee. Le rail recoit
      `align-self: start`, et c'est son CORPS `.rail-in` qui colle.
   ========================================================================== */

.rail{
  border: var(--filet-w) solid var(--filet);
  background: var(--surface-1);
  padding: var(--e-3);
  margin-block: var(--e-3) 0;
}
/* P7 (v5i) · LE LIBELLE DU RAIL PASSE DE `--encre-3` A `--encre-2`, ET LA NOTE AVEC.
   « Les six moments » mesurait 3,99:1 sur les pixels REELLEMENT peints de scenarios.html
   (banc `contraste-matiere.mjs`, 70 mesures sur cinq pages), sous le 4,50:1 que le site
   s'impose pour du texte courant : 13,66 px, graisse 400, ce n'est pas du grand texte.
   ⛔ AUCUNE COULEUR N'EST CREEE NI MODIFIEE : `--encre-2` (#A2ACB5) existait deja et sert
      deja a `.rail-l span`. La palette est une question de direction, on n'y touche pas ;
      on change QUEL jeton porte le libelle. `.rail-n` suit parce qu'elle porte la MEME
      encre a la MEME taille sur la MEME matiere : la laisser serait fermer le symptome
      echantillonne par le banc au lieu de la classe. */
.rail-t{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-2); margin-block: var(--e-3) var(--e-1);
}
.rail-t:first-child{ margin-block-start: 0 }
.rail-v{ font-family: var(--f-nombre); font-size: var(--t-1); color: var(--craie); margin-block: 0 }
.rail-n{ font-size: var(--t-0); color: var(--encre-2); margin-block: var(--e-1) 0 }
.rail-l{ list-style: none; padding: 0; margin-block: 0; display: grid; gap: var(--e-1) }
.rail-l > li{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) }
/* P8 (v5i) · UN ELEMENT QUI NE PORTE QU'UN NOMBRE NE SE COUPE PAS. `.rail-l b` est le
   porteur des nombres seuls du rail. L'insecable pose dans `finir` couvre deja le nombre
   lui-meme ; cette declaration ferme le cas ou le nombre est suivi de son unite.
   ⛔ ELLE NE SE PROPAGE PAS A `.rail-v`, `.bp`, `.compteurs b` NI `.chiffre`, ET C'EST
      DELIBERE : ces quatre-la portent `overflow-wrap: anywhere`, pose exprès contre le
      debordement horizontal a 375 que le controle `largeurs` refuse. Un `nowrap` les
      ferait deborder. L'espace insecable les couvre sans ce risque. */
.rail-l b{ font-family: var(--f-nombre); color: var(--soufre); white-space: nowrap }
.rail-l span{ font-size: var(--t-0); color: var(--encre-2) }
.echelle-1{ margin-block: 0 }
.rail .rang-seuil{ grid-template-columns: [nom] minmax(0, 1fr) [val] max-content; row-gap: var(--e-1) }
/* P2 · UN SEUL DESSIN, PARTAGE. Ces declarations etaient reservees au rail ; elles
   deviennent une classe pour que la manchette de la fiche porte EXACTEMENT le meme
   dessin que l'accueil et que le rail, zero visible au centre, signe porte par le
   cote. Un troisieme dessin aurait ete un empilement de plus. */
.rail .rang-seuil .seuil, .seuil-c{
  grid-column: 1 / -1; inline-size: 100%;
  grid-template-columns: repeat(16, minmax(0, 1fr)) 2px repeat(16, minmax(0, 1fr));
  background-image: repeating-linear-gradient(90deg, var(--filet) 0 1px, transparent 1px 3.125%);
  background-position-x: 0;
}
.rail .rang-seuil .seuil::before, .seuil-c::before{ inset-inline-start: 50% }
.rail .rang-seuil .seuil > .cote, .seuil-c > .cote{
  /* `justify-self: start` vient de la regle de base et fait retomber la cote sur la
     largeur de son CONTENU, qui est vide : le trait mesurait 0 px alors que sa zone de
     grille en mesurait cinq. Le defaut vivait deja dans le rail, ou il n'avait jamais
     ete mesure en geometrie. La cote occupe sa zone. */
  min-inline-size: 0; inline-size: auto; justify-self: stretch;
  grid-column: 18 / span var(--n, 1);
}
.rail .rang-seuil .seuil > .cote.neg, .seuil-c > .cote.neg{
  /* `justify-self: end` de la regle de base l'emporte par specificite et recolle la
     cote negative sur la largeur de son contenu, donc sur zero. Mesure : trait de
     0 px sur EURUSD et CADJPY quand la zone de grille en mesurait cinq. */
  grid-column: span var(--n, 1) / 17; justify-self: stretch;
}
.rail .rang-seuil .seuil > .cote.zero, .seuil-c > .cote.zero{
  grid-column: 17 / 18; inline-size: 3px;
}
/* LA REGLURE DU VERDICT : la meme piste, a la hauteur de la manchette. */
.reglure-v{ max-inline-size: var(--l-note); margin-block: 0 }
.seuil-v{ --h-cote: 0.9rem }
.seuil-v > .cote.zero{ inline-size: 4px }
.graduations .g-z{ inset-inline-start: 50%; transform: translateX(-50%) }

@media (min-width: 1024px){
  .fiche-col{
    display: grid;
    /* La colonne de lecture est BORNEE, pas etiree : au-dela de 78rem le rail
       s'eloignerait de la prose sans rien y gagner. */
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: var(--e-5);
    max-inline-size: var(--l-note);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
    align-items: start;
  }
  .rail{
    align-self: start;
    border: 0; border-inline-end: var(--filet-w) solid var(--filet);
    background: none; padding: 0; margin-block: 0;
  }
  .rail-in{
    position: sticky; inset-block-start: 4.5rem;
    padding-block: var(--e-5) var(--e-4);
    padding-inline-end: var(--e-4);
  }
  /* Les sections de la colonne de prose gardent leur enveloppe, mais elle ne
     centre plus rien : c'est la grille qui cadre desormais. */
  .fiche-prose > section > .wrap{ padding-inline: 0; max-inline-size: none }
  .fiche-prose p, .fiche-prose dd, .fiche-prose li{ max-inline-size: 72ch }
  .fiche-prose .chapo, .fiche-prose .note{ max-inline-size: 72ch }
}
@media (min-width: 1280px){
  .fiche-col{ grid-template-columns: 19rem minmax(0, 1fr) }
}

/* ==========================================================================
   8 bis · LA MANCHETTE  ·  le premier ecran de la direction A
   --------------------------------------------------------------------------
   Une une de journal, pas un tableau de bord : le rang, la phrase de la
   semaine, le grand nombre en soufre pose sur sa reglure graduee. La reglure
   n'est pas un ornement -- elle porte la position du plus grand ecart sur
   l'echelle des deux seuils, et c'est de la MATIERE CONSTRUITE, la seule qui
   paie le plancher de contour du controle `presence` (le grain, lui, ne le
   paie pas : mesure de la passe v5).
   ========================================================================== */

.manchette .sur{ margin-block-end: var(--e-2) }
.manchette h1{
  max-inline-size: 22ch;
  margin-block: 0 var(--e-4);
  text-wrap: balance;
}
.grand-nombre{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-2);
  margin-block: 0 var(--e-1); max-inline-size: none;
}
/* UN NOMBRE PLUS LONG QUE PREVU NE DOIT PAS POUSSER LA PAGE HORS DU CADRE. La porte de
   contenu extreme a mesure 46 px de debordement a 375 px en injectant douze chiffres
   dans le grand nombre : la police de titre y fait 8,6 rem, et rien ne bornait le mot.
   Le releve S37 ne porte que trois caracteres, mais un garde ne se regle pas sur la
   semaine qu il voit. */
.grand-nombre .chiffre, .chiffre{ max-inline-size: 100%; overflow-wrap: anywhere }
.compteurs b, .bp, .rail-v{ overflow-wrap: anywhere; min-inline-size: 0 }
.grand-nombre .chiffre{
  font-family: var(--f-nombre); font-size: var(--t-6); line-height: 0.86;
  color: var(--soufre); font-variant-numeric: tabular-nums;
}
.grand-nombre .surseuil{
  font-family: var(--f-nombre); font-size: var(--t-2); color: var(--encre-2);
}
/* LA REGLURE : seize filets, un par demi-point, et un trait qui s'arrete ou le
   releve s'arrete. La largeur du trait vaut `--n` seiziemes, jamais une valeur
   ecrite : `--n` est pose par le generateur depuis `differentiel_pts`. */
.reglure{
  position: relative;
  block-size: 0.9rem;
  max-inline-size: var(--l-note);
  margin-block: 0;
  background-image: repeating-linear-gradient(90deg, var(--filet) 0 1px, transparent 1px 6.25%);
  border-block-end: var(--filet-w) solid var(--filet-2);
  border-inline-end: 2px solid var(--soufre);
}
.reglure > .tr{
  display: block; block-size: 100%;
  inline-size: calc(var(--n, 0) * 6.25%);
  background: var(--soufre);
}
/* P11 (v5j) · LA GRADUATION NE TOUCHE PLUS LE PARAGRAPHE SUIVANT, ET LA CAUSE N'ETAIT
   PAS UNE MARGE. Mesure par rectangles sur USD/CAD a 375 px : le bas de la boite tombait
   a 0 px du haut du verdict, et le bas du dernier GLYPHE a -6,3 px, c'est-a-dire DANS le
   paragraphe. Les cinq chiffres sont positionnes en absolu a `inset-block-start: 0.2rem`
   dans une boite de 1,35rem : ils en depassaient par le bas, et la marge basse ne pouvait
   rien y faire puisqu'elle part du bas de la BOITE, pas du bas des glyphes. La boite est
   donc portee a la hauteur qu'elle contient vraiment, et le jeton d'espacement demande
   vient par-dessus. */
.graduations{
  position: relative; block-size: 2.25rem; margin-block: 0 var(--e-3);
  max-inline-size: var(--l-note); font-family: var(--f-nombre);
  font-size: var(--t-0); color: var(--encre-3);
}
.graduations .g{ position: absolute; inset-block-start: 0.2rem; white-space: nowrap }
.graduations .g-0{ inset-inline-start: 0 }
.graduations .g-i{ inset-inline-start: calc(var(--gi, 50) * 1%); transform: translateX(-50%) }
.graduations .g-p{ inset-inline-end: 0; color: var(--soufre) }
.manchette .verdict{ font-size: var(--t-2); max-inline-size: var(--l-lecture) }
.compteurs{
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; padding: 0; margin-block: var(--e-4) var(--e-3);
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block-start: var(--e-3);
}
@media (min-width: 900px){ .compteurs{ grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.compteurs > li{ display: grid; gap: 0.15rem; justify-items: start }
.compteurs b{
  font-family: var(--f-nombre); font-size: var(--t-4); line-height: 1; color: var(--craie);
}
.compteurs span{ font-size: var(--t-0); color: var(--encre-2) }
.compteurs .c-actif b{ color: var(--soufre) }

/* ==========================================================================
   8 ter · LE RENDEZ-VOUS  ·  l'enveloppe de la charpente de branche
   --------------------------------------------------------------------------
   Les branches se lisent PAR RENDEZ-VOUS, parce qu'un rendez-vous est ce qui
   se prepare : une heure, des devises, et des branches qui font cent ensemble.
   ========================================================================== */

.rdv{
  margin-block: var(--e-4) 0;
  padding-block-start: var(--e-3);
  border-block-start: var(--filet-w) solid var(--filet);
}
.rdv-tete{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2);
  margin-block: 0; font-size: var(--t-2);
}
.rdv-tete .hh{ font-family: var(--f-nombre); color: var(--soufre) }
.rdv-tete .dv{
  font-family: var(--f-nombre); font-size: var(--t-0); color: var(--encre-2);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.rdv .evts{
  font-size: var(--t-0); color: var(--encre-3); margin-block: var(--e-1) 0;
  max-inline-size: var(--l-lecture);
}
/* LE SENS PAR DEVISE : une pastille par devise, le sens porte par la FORME du
   chevron et jamais par la seule teinte -- c'est la regle du site, et elle vaut
   ici comme ailleurs. */
.bsens{
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  margin-block: 0; max-inline-size: none; font-size: var(--t-0);
}
.bsens .d{
  display: inline-flex; align-items: baseline; gap: 0.4ch;
  border: var(--filet-w) solid var(--filet-2);
  padding: 0.15rem 0.5rem; color: var(--encre-2);
}
.bsens .d b{ font-family: var(--f-nombre); color: var(--craie) }
.bsens .d::before{
  content: ""; inline-size: 0.5rem; block-size: 0.5rem; flex: 0 0 auto;
  align-self: center; background: currentColor;
}
.bsens .s-monte{ color: var(--craie) }
.bsens .s-monte::before{ clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.bsens .s-baisse{ color: var(--craie) }
.bsens .s-baisse::before{ clip-path: polygon(0 0, 100% 0, 50% 100%) }
.bsens .s-plat{ color: var(--encre-3) }
.bsens .s-plat::before{ clip-path: inset(42% 0 42% 0) }
.bstruct{ margin-block: 0 }
/* DEUX CARTES NE SE POSENT PAS DANS UNE GRILLE DE TROIS : le tiers restant
   devient une bande morte de la hauteur de la carte. */
.grille.g-2{ grid-template-columns: minmax(0, 1fr) }
@media (min-width: 720px){ .grille.g-2{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.bsur{ font-size: var(--t-0); color: var(--encre-3); font-family: var(--f-nombre) }
/* UNE BRANCHE PORTE DESORMAIS CINQ BLOCS, DONC ELLE EST HAUTE : deux colonnes de
   branches a 900 px feraient deux colonnes de texte de 30 caracteres. La charpente
   ne passe a deux colonnes qu'au-dela de 1 280 px, ou chaque colonne garde une
   mesure de lecture. */
@media (min-width: 900px) and (max-width: 1279px){
  .branches{ grid-template-columns: minmax(0, 1fr) }
}
.branche dd{ max-inline-size: var(--l-lecture) }
/* UNE GRILLE NE CONNAIT PAS LA LARGEUR DE SON PARENT, ET C'EST LE PIEGE. `.branches`
   passe a deux colonnes au-dela de 1 280 px de VUE ; dans la colonne de prose de la
   fiche, large de 795 px a 1 440, cela faisait deux colonnes de 380 px pour des cartes
   qui portent cinq blocs de texte. Vu a l'oeil sur la capture, jamais par une porte.
   Dans la colonne de prose, les branches restent sur une colonne. */
.fiche-prose .branches{ grid-template-columns: minmax(0, 1fr) }

.pq, .b-deb, .pour-deb{ font-size: var(--t-1); color: var(--encre-2) }
.r-h, .r-b, .r-n{
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em; color: var(--encre-3);
}

/* les reactions par devise : le SENS est une forme, jamais une teinte */
.reactions{
  display: grid; gap: var(--e-1);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
  margin-block: var(--e-2) 0; padding: 0; list-style: none;
}
/* MEME SOUDURE QUE `.faits` ET `.metriques`, TROISIEME OCCURRENCE. La rangee porte
   trois elements DE LIGNE (le code, la reaction, la precision) et aucune regle ne les
   separait : la capture rendait « USDbaisseenviron 0,25 du couloir habituel ». Trois
   listes ont eu ce defaut pour la meme raison ; la sonde `bancs/soudure.mjs` cherche
   desormais la classe entiere plutot que chaque cas. */
.reactions > li{
  display: grid; gap: 0.15rem; align-content: start;
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block: var(--e-1);
}
.reactions > li > span{ font-size: var(--t-0); color: var(--encre-2) }
.reactions > li > span.fr{ color: var(--encre-3) }

/* LES CINQ DERNIERES SOUDURES, TROUVEES PAR LA SONDE ET NON PAR L'OEIL. Meme cause
   partout : le generateur ecrit deux balises DE LIGNE sans blanc entre elles, et sans
   regle de mise en page le navigateur les colle. La sonde `bancs/soudure.mjs` les
   compte en exigeant qu'aucun blanc ne separe les balises dans le balisage, faute de
   quoi deux mots ordinaires seraient signales. Elle en a rendu 506 sur 94 vues. */
.mur .t{ display: grid; gap: 0.15rem }
.mur .t > .q{ font-size: var(--t-0); color: var(--encre-3) }
.pt-tete{
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3);
  font-size: var(--t-0); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--encre-3); margin-block: var(--e-2) 0;
}
.evt .n, .mur .n{ display: grid; gap: 0.15rem; justify-items: start }
.t-tete{ display: flex; align-items: baseline; gap: var(--e-1); flex-wrap: wrap }
summary > b + span{ margin-inline-start: 0.6ch }
.t-l{
  display: flex; justify-content: space-between; gap: var(--e-2);
  font-size: var(--t-0); color: var(--encre-3);
  padding-block: 0.15rem;
}
.t-l > b{ color: var(--craie); font-weight: 400; font-family: var(--f-nombre) }
.r{
  display: flex; align-items: baseline; gap: var(--e-1);
  font-size: var(--t-0); font-family: var(--f-nombre);
  border: var(--filet-w) solid var(--filet);
  padding-block: var(--e-1); padding-inline: var(--e-2);
  background: var(--surface-2);
}
.r .code, .r .dev-tag{ color: var(--craie); font-weight: 600 }
.r .fr{ color: var(--encre-3); margin-inline-start: auto }
.c-chaud, .c-froid, .p-chaud, .p-froid, .v-froid, .b-froid{ color: var(--encre-2) }

/* ==========================================================================
   9 · LES MURS ET LES LISTES
   ========================================================================== */

.mur{ display: grid; margin-block: var(--e-3) 0; padding: 0; list-style: none }
.mur > li{
  display: grid; gap: var(--e-1);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--e-2);
  border-block-end: var(--filet-w) solid var(--filet);
}
@media (min-width: 900px){
  .mur > li{ grid-template-columns: minmax(9rem, 15ch) minmax(0, 1fr); gap: var(--e-3) }
}
.mur > li:last-child{ border-block-end: 0 }
.mur .t, .t-tete{
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t-1);
  color: var(--craie); margin-block: 0;
}
/* `block` ne separe pas un texte de son enfant EN LIGNE : la precision de regroupement
   se soudait au nom du rendez-vous (« Prelim UoM Consumer Sentiment (…)regroupe avec le
   moment de vendredi »). La grille l'empile. Cette regle est la SEULE sur `.mur .r` :
   une seconde, ecrite plus haut, a ete retiree plutot que laissee en doublon. */
.mur .r{
  border: 0; background: none; padding: 0;
  display: grid; gap: 0.15rem; justify-items: start;
  font-family: var(--f-prose); font-size: var(--t-1); color: var(--encre-2);
}
.mur .r > .g{ font-size: var(--t-0); color: var(--encre-3) }
.mur .q{ font-family: var(--f-nombre); color: var(--craie) }
.mur-court > li{ grid-template-columns: minmax(0, 1fr) }
.fait-liste{ list-style: none; padding: 0 }
.lire, .pt-lire{ display: grid; gap: var(--e-1) }
.pt-lire dt{
  font-size: var(--t-0); color: var(--encre-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pt-lire dd{ margin-inline: 0; margin-block: 0 var(--e-2); font-size: var(--t-1) }
.lex dt{
  font-family: var(--f-titre); font-weight: 600; color: var(--craie);
  margin-block: var(--e-3) 0;
}
.lex dd{ margin-inline: 0; margin-block: 0 var(--e-2); color: var(--encre-2) }

/* ==========================================================================
   10 · LE CALENDRIER
   ========================================================================== */

.jours{ display: grid; gap: var(--e-4); margin-block: var(--e-3) 0; padding: 0; list-style: none }
.jour{ display: grid; gap: var(--e-2) }
.j{
  font-family: var(--f-titre); font-size: var(--t-3); color: var(--craie);
  border-block-end: var(--filet-w) solid var(--filet-2);
  padding-block-end: var(--e-1); margin-block: 0;
}
.evts{ display: grid; padding: 0; list-style: none; margin-block: 0 }
.evt{
  display: grid; gap: var(--e-1);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--e-2); padding-inline-start: var(--e-3);
  border-block-end: var(--filet-w) solid var(--filet);
  border-inline-start: 3px solid var(--filet-2);
}
@media (min-width: 900px){
  .evt{ grid-template-columns: 5.5rem 3.5rem minmax(0, 1fr); gap: var(--e-3); align-items: baseline }
}
@media (min-width: 900px){
  .evt > *{ grid-column: 3 }
  /* `.h` ET `.hh` : DEUX classes pour la meme chose, et la regle n'en visait qu'une.
     Le mur du calendrier ecrit l'heure en `.h`, la bande de l'accueil en `.hh`. La
     colonne 1 n'etait donc jamais attribuee dans le mur : l'heure retombait en colonne
     3 avec le reste et la premiere colonne restait vide sur toute la page. */
  .evt > .h, .evt > .hh{ grid-column: 1 }
  .evt > .code, .evt > .dev{ grid-column: 2 }
}
.evt .h, .evt .hh{
  font-family: var(--f-nombre); color: var(--craie); font-size: var(--t-1);
  display: grid; gap: 0.1rem; justify-items: start;
}
/* la precision d'heure est un enfant, pas un frere : sans mise en page elle se soudait
   au texte du parent (« toute la journeeaucune heure de publication »). */
.evt .h > span, .evt .hh > span, .pt-c .hh > span{
  font-family: var(--f-prose); font-size: var(--t-0); color: var(--encre-3);
}
/* `block` ne suffisait pas : le nom de la devise, le titre du rendez-vous et sa source
   sont TROIS elements de ligne dans ce bloc, donc colles entre eux. La grille les
   empile. La regle de soudure plus haut porte le meme correctif pour les autres
   listes ; celle-ci doit rester ici, apres elle, sinon la declaration `block` gagne. */
.evt .n{ font-family: var(--f-prose); display: grid; gap: 0.15rem; justify-items: start }
.evt .code, .evt .dev{ font-family: var(--f-nombre); color: var(--encre-2); font-size: var(--t-0) }
.evt .t{ font-size: var(--t-1); color: var(--craie); margin-block: 0 }
.evt .r{
  border: 0; background: none; padding: 0; display: block;
  font-size: var(--t-0); color: var(--encre-3); font-family: var(--f-prose);
}
/* trois natures, trois canaux : l'intensite sur une echelle a deux marches, la
   provenance sur une FORME, le ferie sur un troisieme signe hors echelle. */
.evt-high{ border-inline-start-color: var(--soufre) }
.evt-med{ border-inline-start-color: var(--soufre-bas) }
.evt-cite{ border-inline-start-style: dashed }
.evt-hol{ border-inline-start-color: var(--filet); background-image: var(--hachures); background-size: 8px 8px }
/* MATIERE DU CALENDRIER, et c'est une correction mesuree, pas un ornement : la page
   rendait 2,99 % de pixels de contour pour un plancher a 3,00. Ce qui paie ce plancher,
   ce sont les FILETS et les graduations, jamais le grain (§8.1). On grave donc la
   reglure des heures : un rail continu par jour, et une graduation par rendez-vous,
   posee du cote du rail. Elle porte une information reelle (le rang de l'heure dans la
   journee), elle ne remplit pas du vide. */
.evts{
  border-inline-start: var(--filet-w) solid var(--filet);
  padding-inline-start: var(--e-2);
  /* V5L · P6 · LE JETON D'ESPACEMENT QUI ABSORBE LA COURSE DE L'ANIMATION D'ENTREE.
     La passe 9 puis la passe 10 ont relevé six lignes par vue dont le bas mord de 3 px
     sur le bloc « Ce qui peut se passer » qui suit, aux deux largeurs et sur les deux
     moteurs. Ce n'est PAS un defaut d'espacement au repos : `li.evt` porte l'animation
     d'entree `monter`, dont l'etat de depart est `translateY(9px)`, et les six lignes
     concernees sont celles qui ne sont pas encore entrees dans le champ -- leur boite
     est donc mesuree 9 px plus bas que sa place, pour 6 px de marge basse, soit -3.
     Mesure du 08/09 : `transform: matrix(1, 0, 0, 1, 0, 9)`, inchangee 2,5 s apres le
     chargement. Le mouvement ne se touche pas (il est hors de ce mandat) : c'est
     l'espacement qui doit couvrir la course, donc une gouttiere de rangee qui porte
     l'ecart au-dela des 9 px de la translation. */
  row-gap: var(--e-2);
}
.evt{ position: relative }
.evt::before{
  content: ""; position: absolute;
  inset-inline-start: calc(var(--e-2) * -1 - var(--e-3) - 1px);
  inset-block-start: 1.05em;
  inline-size: var(--e-2); block-size: 1px; background: var(--filet-2);
}
.evt-high::before{ background: var(--soufre); inline-size: var(--e-3) }
.jour{ border-inline-start: 0 }
.j{ border-block-start: 2px solid var(--filet-2); padding-block-start: var(--e-2) }

.moment, .grp-moment{ display: grid; gap: var(--e-2) }
.somm, .sommaire-seuils, .codes, .legende-axe, .rangee-paires, .filtre, .routes{
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  margin-block: var(--e-3); padding: 0; list-style: none;
}
.somm a, .sommaire-seuils a, .codes a, .filtre a, .filtre label,
.legende-axe a, .rangee-paires a, .routes a{
  display: inline-flex; align-items: center; min-block-size: 44px;
  padding-inline: var(--e-2); font-size: var(--t-0); font-family: var(--f-nombre);
  border: var(--filet-w) solid var(--filet); color: var(--encre-2); text-decoration: none;
}
.somm a:hover, .sommaire-seuils a:hover, .codes a:hover, .filtre a:hover, .filtre label:hover,
.legende-axe a:hover, .rangee-paires a:hover, .routes a:hover{
  border-color: var(--soufre); color: var(--craie);
}
.ici{ color: var(--soufre); border-color: var(--soufre) }
/* UNE PHRASE N'EST PAS UNE LISTE. `.chapo-cpt` porte un paragraphe continu : le mettre
   en flex separait chaque fragment et laissait ses virgules orphelines en plein milieu
   (« 0 pari revendique , 7 inclinaisons notees , »). Vu a la capture, invisible aux huit
   controles. Seules les vraies listes de comptage passent en flex. */
.cpt, .cpt-ligne, .bande-calendrier{
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  font-size: var(--t-0); color: var(--encre-3);
  margin-block: var(--e-3) 0; padding: 0; list-style: none;
}
.cpt > li, .cpt-ligne > li{
  display: flex; align-items: baseline; gap: var(--e-1); margin-block: 0;
}
.cpt b{ color: var(--soufre); font-size: var(--t-2); margin-inline-end: var(--e-1) }
.chapo-cpt{ display: block; font-size: var(--t-2); color: var(--encre-2) }
.chapo-cpt b{ color: var(--craie) }

/* ==========================================================================
   11 · LES PANNEAUX  ·  un seul mecanisme, dans la feuille partagee
   ========================================================================== */

/* M3 · UNE GRILLE, PAS UN FLUX SOUPLE, ET C'EST UNE CORRECTION DE MA PROPRE PASSE.
   Premier montage : `.choix` restait en flux souple et le titre de moment recevait
   `flex: 0 0 100%`. Le banc a mesure 6 pastilles encore posees sur la ligne d'un titre,
   et la valeur calculee expliquait pourquoi : `flex-basis: 100%` etait bien lu, et le
   titre faisait quand meme 480 px pour 1 159 px de conteneur. Un pourcentage de base
   souple se resout contre une taille principale qui n'est pas definie quand le
   conteneur vit lui-meme dans une piste dimensionnee par son contenu : il retombe sur
   la largeur du texte. Une grille n'a pas cette ambiguite -- `grid-column: 1 / -1`
   traverse toutes les colonnes quelle que soit la facon dont le parent est mesure --
   et c'est exactement la forme que le mandat demande : une grille par moment, le titre
   au-dessus de ses seules branches. */
.choix{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--e-1); align-items: start;
  margin-block: var(--e-3); padding: 0; list-style: none;
}
.choix > .sur, .choix > .grp-moment{ grid-column: 1 / -1 }
.choix > .grp-moment{
  margin-block: var(--e-2) 0;
  font-family: var(--f-nombre); font-size: var(--t-0);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--soufre);
  border-block-start: var(--filet-w) solid var(--filet); padding-block-start: var(--e-2);
}
.choix > .grp-moment:first-child{ margin-block-start: 0; border-block-start: 0; padding-block-start: 0 }
.choix a{
  display: flex; align-items: center; min-block-size: 44px;
  padding-inline: var(--e-2); padding-block: var(--e-1);
  font-size: var(--t-0); border: var(--filet-w) solid var(--filet);
  color: var(--encre-2); text-decoration: none; background: var(--surface-1);
  max-inline-size: 100%;
}
.choix a:hover{ border-color: var(--soufre); color: var(--craie) }
@media screen{
  .panneaux .pan{ display: none }
  .panneaux .pan-defaut{ display: grid }
  .panneaux .pan:target{ display: grid }
  .panneaux .pan:target ~ .pan-defaut{ display: none }
}
.panneaux{ display: grid }
.pan{ gap: var(--e-3); scroll-margin-block-start: 4.5rem }
.pan-r{ font-size: var(--t-0); color: var(--encre-3) }
.col{ display: grid; gap: var(--e-2) }

/* ==========================================================================
   12 · LA RUPTURE  ·  planche claire, accents inverses
   --------------------------------------------------------------------------
   Les accents de nuit rendent environ 1,1:1 sur la planche : sans inversion,
   aucun banc mesurant un aplat nominal ne l'aurait vu.
   ========================================================================== */

.planche{
  background: var(--planche);
  color: var(--planche-encre);
  border-block: var(--filet-w) solid var(--planche-filet);
}
.planche h1, .planche h2, .planche h3, .planche h4{ color: var(--planche-encre) }
.planche .chapo, .planche .note, .planche .sous, .planche .orig, .planche .aveu,
.planche .lab, .planche .f-r{ color: var(--planche-encre2) }
.planche .sur, .planche .gros, .planche .verdict-f, .planche .fort, .planche .cpt b,
.planche .bp, .planche .quand{ color: var(--planche-soufre) }
.planche .bloc, .planche .f-couloir, .planche .fig-cadre, .planche .anat,
.planche .anat-fig, .planche .demo-piste, .planche .demo-barre, .planche .demo-formes{
  background: rgba(21, 24, 28, 0.05); border-color: var(--planche-filet);
}
.planche .cote{ background-image: linear-gradient(90deg, #A2965C 0, var(--planche-soufre) 100%) }
.planche .seuil > .cote.d-neg{ background-image: linear-gradient(90deg, #9A79B0 0, var(--planche-iris) 100%) }
.planche .seuil{ background-image: repeating-linear-gradient(90deg, var(--planche-filet) 0 1px, transparent 1px var(--pas)) }
.planche .seuil::before{ background: var(--planche-filet) }
.planche .seuil::after{ background: var(--planche-soufre) }
.planche .rang-seuil, .planche .seuil-tete, .planche .mur > li, .planche .evt,
.planche .branche, .planche .r{ border-color: var(--planche-filet) }
.planche .jauge{ background: rgba(21, 24, 28, 0.08); border-color: var(--planche-filet) }
.planche .jauge > i{ background-image: linear-gradient(90deg, #A2965C 0, var(--planche-soufre) 100%) }
.planche a{ color: var(--planche-iris) }
.planche :focus-visible{ outline-color: var(--planche-iris) }
.planche .faible, .planche .neutre{ color: var(--planche-encre2) }

/* ==========================================================================
   13 · PIED
   ========================================================================== */

.pied{
  border-block-start: var(--filet-w) solid var(--filet);
  padding-block: var(--e-5);
  background-image: linear-gradient(180deg, transparent 0, rgba(9, 10, 13, 0.6) 100%);
}
.pied p{ font-size: var(--t-0); color: var(--encre-3); max-inline-size: 78ch }
.pied h2{ font-size: var(--t-3) }
.pied a{ color: var(--encre-2) }
.pied a:hover{ color: var(--soufre) }

/* ==========================================================================
   14 · LIENS DE PROSE, JETONS, BOUTONS
   --------------------------------------------------------------------------
   Un lien de prose ne porte AUCUN remplissage vertical : deux liens sur des
   lignes voisines verraient leurs boites tactiles se recouvrir, et un banc du
   projet le mesure. La cible de 44 px se paie sur les objets de navigation.
   ========================================================================== */

main p a, .pied p a, .note a, .chapo a{
  color: var(--soufre); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  padding-block: 0;
}
main p a:hover, .pied p a:hover, .note a:hover, .chapo a:hover{ color: var(--craie) }
.planche p a, .planche .note a{ color: var(--planche-iris) }

.verrou{
  display: inline-grid; gap: var(--e-1);
  border: var(--filet-w) solid var(--iris-bas);
  background: rgba(214, 115, 240, 0.07);
  padding-block: var(--e-2); padding-inline: var(--e-3);
}
.verrou .lab{ color: var(--iris) }
.verrou .q{ font-size: var(--t-2); color: var(--craie) }
.bouton{
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-block-size: 44px; padding-inline: var(--e-3); padding-block: var(--e-2);
  background: var(--soufre); color: #14120A; font-weight: 600;
  font-size: var(--t-1); text-decoration: none;
  border: var(--filet-w) solid var(--soufre);
}
.bouton:hover{ background: var(--craie); border-color: var(--craie) }
.bouton:active{ transform: scale(0.97) }
.bouton-2{ background: none; color: var(--iris); border-color: var(--iris-bas) }
.bouton-2:hover{ background: rgba(214, 115, 240, 0.12); color: var(--craie); border-color: var(--iris) }
.appels{ display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin-block: var(--e-3) 0 }

.tk, .pt-tete, .pt-mot, .pt-h, .pt-m, .pt-c, .fam, .conteste, .regles,
.regle-p, .g, .h, .rg, .sj, .tt, .fenetre, .bnom-2, .pt-nom{ font-size: var(--t-1) }
/* le rang est un ENFANT du nom, pas un frere : sans separation il se soude au code de
   la paire et la capture rend « GBPUSD01 ». Vu a l'oeil d'abord, puis compte par la
   sonde sur 29 fiches et l'accueil. */
.pt-nom > .rg{
  margin-inline-start: 0.6ch;
  font-size: var(--t-0); color: var(--encre-3); letter-spacing: 0.06em;
}
.fenetre{ display: grid; gap: var(--e-1) }
.c-actif{ font-family: var(--f-nombre); color: var(--craie) }
.pli-seuil{ color: var(--soufre) }
/* VINGT-NEUF LIGNES REPLIEES QUI N'OCCUPENT QU'UN QUART DE LEUR COLONNE. Mesure du
   08/09 sur `seuils.html` : `<b>AUDJPY</b><span>2 seuils ecrits d'avance</span>`
   peint x=159..409 dans une enveloppe de 1 248, et vingt-neuf de ces lignes empilees
   font durer la perte sur 1 300 px : 992 px de bande morte, le pire chiffre du site.
   La ligne devient une RANGEE : le code a gauche, le compte cale a droite, et les
   vingt-neuf comptes s'alignent enfin en colonne. Le marqueur natif disparait des
   qu'on quitte `display: list-item` -- il est donc redessine, et il tourne a
   l'ouverture, sinon le repli perd son affordance. */
.pli-seuil > summary{
  display: flex; align-items: baseline; gap: var(--e-2);
  padding-block: var(--e-1); cursor: pointer;
}
.pli-seuil > summary::-webkit-details-marker{ display: none }
.pli-seuil > summary::before{
  content: ""; flex: 0 0 auto; inline-size: 0; block-size: 0;
  border-block-start: 0.32em solid transparent;
  border-block-end: 0.32em solid transparent;
  border-inline-start: 0.46em solid currentColor;
  transition: transform 120ms linear;
}
.pli-seuil[open] > summary::before{ transform: rotate(90deg) }
.pli-seuil > summary > span{
  margin-inline-start: auto; text-align: end;
  color: var(--encre-3); font-size: var(--t-0);
}
@media (prefers-reduced-motion: reduce){
  .pli-seuil > summary::before{ transition: none }
}
.d-neg{ color: var(--iris) }


/* -------------------------------------------------- les blocs neufs de la passe v5c */

/* M9 : la legende de forme porte sa figure. Le chevron est a la taille du texte et prend
   sa couleur, donc il reste juste en couleurs forcees comme en mouvement reduit. */
.forme-lg{ display: flex; align-items: center; gap: var(--e-2) }
.forme-lg > .chev{ inline-size: 1.1rem; block-size: 1.1rem; flex: 0 0 auto }

/* C11 : la branche en forme courte de l'accueil. UNE ligne, un seul paragraphe :
   sur un telephone, ce qui coute n'est pas le nombre de mots mais le nombre de blocs,
   parce que chacun repart a la ligne et paie sa marge. */
.br-courte{ padding-block: var(--e-1); gap: 0 }
.br-courte .bl1{
  margin-block: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e-1) var(--e-2); font-size: var(--t-0);
}
.br-courte .bp{ font-family: var(--f-nombre); font-size: var(--t-1); color: var(--soufre) }
.br-courte .bsur{ color: var(--encre-3) }
/* PAS DE JAUGE ICI, ET C'EST UNE MESURE QUI L'A DECIDE. J'en avais ajoute une par
   branche pour rendre a l'accueil la matiere que la forme courte lui retire. Mesure :
   la presence est passee de 3,31 % a 3,11 % et la page de 28 972 px a 29 334 px a 375.
   Les DEUX cibles ont empire. La raison que j'avais donnee pour l'ajout etait donc
   fausse, et un ajout dont la raison est fausse se retire. « Ne pas ajouter pour
   empiler, mais faire une structure meilleure. » */
.br-courte .bnom{ color: var(--craie) }
.br-courte .d{ color: var(--encre-2) }
.br-courte .quand{ font-family: var(--f-nombre); color: var(--encre-3) }

/* M6 : la grandeur du grand nombre, ecrite sous lui. Un nombre geant sans son unite
   laisse le lecteur choisir l'echelle, et il en choisit une fausse. */
.grandeur{
  font-family: var(--f-nombre); font-size: var(--t-0);
  text-transform: uppercase; letter-spacing: 0.09em;
  /* Ce libelle etait en encre-3 : le banc de contraste sur matiere l a mesure a 4,32:1
     sur le grain de la tete de fiche, sous le seuil AA de 4,50. Il nomme la grandeur du
     plus grand nombre de la page, donc c est exactement le texte qui ne peut pas etre
     faible. Encre-2, remesure a la passe suivante. */
  color: var(--encre-2); margin-block: var(--e-1) var(--e-2);
}

/* M5 : les six verrous de la semaine, le premier en tete. Il n'y a plus de « prochain »
   verrou : la page est etablie une fois par semaine et ne peut rien promettre entre
   deux publications. */
.verrous{
  list-style: none; padding: 0; margin-block: var(--e-2) 0;
  display: grid; gap: var(--e-1);
}
.verrous > li{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2);
  padding-block: var(--e-1);
  border-block-end: var(--filet-w) solid var(--filet);
}
.verrous > li:last-child{ border-block-end: 0 }
.verrous .q{ font-family: var(--f-nombre); color: var(--craie) }
.verrous .dv{ font-size: var(--t-0); color: var(--encre-3) }
.verrous > .v-1 .q{ color: var(--soufre) }
.verrous > .v-1{ border-inline-start: 3px solid var(--soufre); padding-inline-start: var(--e-2) }

/* M4 : la pastille de branche porte desormais son sens et sa fraction de couloir, donc
   elle cesse d'etre une ligne et devient un bloc. */
.choix a{ display: grid; gap: var(--e-1); align-content: start; text-align: start }
.choix a .ch-t{ font-family: var(--f-nombre); color: var(--craie) }
.choix a .ch-p{ font-size: var(--t-0); color: var(--soufre) }
.choix a .bsens{ margin-block: 0 }
.choix a .bsens .d{ font-size: var(--t-0) }
@media (min-width: 900px){ .choix a{ max-inline-size: 22rem } }

/* M4, cote calendrier : le sens sous le titre de branche, jamais derriere un clic. */
.moment .branches .bsens{ margin-block: var(--e-1) 0 }

/* ==========================================================================
   15 · MOUVEMENT  ·  le cache, et le retard qui vient de la donnee
   --------------------------------------------------------------------------
   Trois couches de repli. 1. Sans script et sans animation, la mise en page est
   complete et la valeur finale est deja la : rien ne demarre a `opacity: 0`.
   2. `animation-timeline` est ecrite APRES le raccourci `animation`, sous
   `@supports`. 3. En mouvement reduit, aucune animation.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference){
  .nav a, .rang-seuil, .bloc, .choix a, .bouton, .somm a, .branche{
    transition: color var(--d-1) var(--c-entree),
                border-color var(--d-2) var(--c-entree),
                background-color var(--d-2) var(--c-entree);
  }
  @supports (animation-timeline: view()){
    .seuil .cote{
      animation: decouvrir var(--d-5) var(--c-entree) both;
      animation-timeline: view();
      animation-range: entry calc(6% + var(--n, 1) * 1.4%) cover 24%;
    }
    @keyframes decouvrir{
      from{ clip-path: inset(0 100% 0 0) }
      to{ clip-path: inset(0 0 0 0) }
    }
    .bloc, .branche, .evt{
      animation: monter var(--d-4) var(--c-entree) both;
      animation-timeline: view();
      animation-range: entry 2% cover 16%;
    }
    @keyframes monter{
      from{ transform: translateY(9px) }
      to{ transform: none }
    }
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto }
  .seuil .cote, .bloc, .branche, .evt{ animation: none }
  .nav a, .rang-seuil, .bloc, .choix a, .bouton, .somm a, .branche{ transition-duration: 50ms }
}

/* ==========================================================================
   16 · IMPRESSION  ·  rien ne reste cache sur papier
   ========================================================================== */

@media print{
  body{ background: #FFFFFF; color: #000000; background-image: none }
  .tete, .saut, .filtre{ display: none }
  .panneaux .pan{ display: grid }
}

/* ==========================================================================
   17 · COULEURS FORCEES  ·  EN FIN DE FEUILLE, et c'est la raison de sa place
   --------------------------------------------------------------------------
   Une media query n'ajoute aucune specificite : placee en tete, elle perdrait
   l'arbitrage par ordre source contre les regles equivalentes ecrites plus bas.
   Et `border-color: CanvasText` seul est un no-op : on ecrit la bordure entiere.
   ========================================================================== */

@media (forced-colors: active){
  .seuil > .cote, .tige, .jauge > i, .partition > span, .b-large, .b-median{
    forced-color-adjust: none;
    background: Highlight; background-image: none;
    border: 1px solid CanvasText;
  }
  .seuil > .cote.hach, .bruit, .hach, .evt-hol, .jauge.creuse > i{
    forced-color-adjust: none; background: Canvas; background-image: none;
    border: 1px dashed CanvasText;
  }
  /* le repere d'origine reste un TRAIT PLEIN : la bordure de la regle generale
     mangerait ses 3 px et le zero mesure disparaitrait du releve. */
  .seuil > .cote.zero{
    forced-color-adjust: none; background: CanvasText; background-image: none;
    border: 0; inline-size: 3px;
  }
  .bloc, .branche, .rang-seuil, .seuil-tete, .mur > li, .evt, .seuil, .jauge,
  .choix a, .somm a, .verrou, .bouton, .f-couloir, .fig-cadre, .anat, .r{
    border: 1px solid CanvasText;
  }
  .seuil{ background-image: none }
  .planche{ background: Canvas; color: CanvasText }
  .gros, .sur, .verdict-f, .fort, .marque, .stamp b{ color: CanvasText }
  .bouton{ background: ButtonFace; color: ButtonText }
  body{ background-image: none }
}