/* ═══════════════════════════════════════════════════════════════════════
   ICHOR V3 · LA SALLE DES MACHINES · feuille COMMUNE aux pages du site
   ───────────────────────────────────────────────────────────────────────
   CETTE FEUILLE NE SE MODIFIE PAS quand on batit une page. Elle porte le
   systeme entier : variables, ossature, navigation, bandeau de fiabilite,
   machines et chaines, tuiles, pupitre, capots, schemas, planche claire,
   routes, pied, impression, couleurs forcees, mouvement reduit.

   POUR BATIR UNE PAGE :
     <link rel="stylesheet" href="assets/ichor-v3.css">
   puis, si la page a besoin de regles qui dependent de SES PROPRES
   identifiants (un filtre de pupitre, par exemple), les mettre dans un
   bloc <style> de la page, jamais ici.

   DEUX REGLES DE TENUE, mesurees et non negociables :
   1. Le bloc @media print et le bloc @media (forced-colors: active) sont
      les DEUX DERNIERS de la feuille. Toute regle ajoutee se place AVANT
      le marqueur « @GREFFES@ ». Un bloc de couleurs forcees place ailleurs
      qu'en fin de feuille est ecrase et ne protege plus personne.
   2. Aucun contenu ne depend d'un declencheur. Les animations d'entree
      sont interdites ici : elles ont ete mesurees defaillantes et retirees.
      Les transitions ne portent que des etats, jamais du contenu.

   LES DEUX ACCENTS ONT UN SENS, et il se double d'une FORME :
   le cuivre dit la hausse et ce qui est revendique, l'acier dit la baisse
   et ce qui se tait. La couleur ne porte jamais seule : un chevron, un
   contour ou un pointille redit la meme chose (critere 1.4.1).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   LA SALLE DES MACHINES  ·  Ichor S36  ·  direction V3
   Une probabilite publiee n'est pas une opinion : c'est la sortie d'une
   machine auditable. La page montre la chaine de production de chaque
   chiffre, et le lecteur peut inspecter chaque etage.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* graphite froid */
  --fond:      #121519;
  --panneau:   #171B21;
  --creux:     #0D1014;
  --releve:    #1D232A;

  /* encres */
  --craie:     #E9EDF1;
  --gris:      #A7B2BD;
  --sourd:     #7E8996;

  /* les deux accents, et ils ont un sens */
  --cuivre:    #E0A468;   /* hausse, action, ce qui est revendique */
  --acier:     #9FB8CE;   /* baisse, controle, ce qui se tait */
  --cuivre-vif:#F0BC8A;
  --acier-vif: #C3D6E6;

  /* filets */
  --filet:      #262C34;
  --filet-fort: #3A434E;
  --filet-vif:  #4E5A67;

  /* la planche claire, seule rupture de fond de la page */
  --clair:       #E4E8EC;
  --clair-creux: #D3D9DF;
  --encre:       #10141A;
  --encre-2:     #3A434E;
  --cuivre-grave:#6E4410;
  --acier-grave: #2E4457;

  /* geometrie */
  --marge: clamp(1.1rem, 3.4vw, 3.4rem);
  --colonne: 72ch;
  --r: 2px;
  --r-g: 3px;

  /* la suite de durees de cette direction */
  --d1: 70ms;
  --d2: 140ms;
  --d3: 280ms;
  --d4: 460ms;
  --d5: 720ms;
  --courbe: cubic-bezier(.22,.72,.24,1);

  /* piles systeme Windows, aucune police reseau */
  --titre: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", Tahoma, sans-serif;
  --prose: Verdana, "Segoe UI", Geneva, sans-serif;
  --mono:  "Cascadia Mono", Consolas, "Lucida Console", monospace;
}

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

html{
  background:var(--fond);
  color:var(--craie);
  font-family:var(--prose);
  font-size:100%;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background-color:var(--fond);
  /* LA LUMIERE : un puits zenithal etroit, fixe. Le faisceau descend du haut
     et ne bouge pas quand la page defile : on lit sous une lampe d'atelier. */
  background-image:
    linear-gradient(180deg, rgba(224,164,104,.13) 0%, rgba(224,164,104,.05) 26%, rgba(224,164,104,0) 62%),
    linear-gradient(90deg,
      rgba(233,237,241,0) 0%,
      rgba(233,237,241,0) 34%,
      rgba(233,237,241,.055) 44%,
      rgba(233,237,241,.075) 50%,
      rgba(233,237,241,.055) 56%,
      rgba(233,237,241,0) 66%,
      rgba(233,237,241,0) 100%),
    repeating-linear-gradient(90deg,
      rgba(233,237,241,.028) 0 1px,
      rgba(233,237,241,0) 1px 44px);
  background-attachment:fixed, fixed, fixed;
  background-repeat:no-repeat, no-repeat, repeat;
  background-size:100% 78vh, 100% 100%, 44px 100%;
  color:var(--craie);
  font-size:clamp(1rem, .94rem + .22vw, 1.06rem);
  line-height:1.72;
  margin:0;
  overflow-x:hidden;
}

/* ─────────── typographie ─────────── */
h1,h2,h3,h4{ font-family:var(--titre); font-weight:800; line-height:1.06; margin:0; letter-spacing:-.012em }
h1{ font-size:clamp(2.3rem, 1.1rem + 5.2vw, 5rem); letter-spacing:-.028em }
h2{ font-size:clamp(1.65rem, 1.05rem + 2.5vw, 2.85rem); letter-spacing:-.02em }
h3{ font-size:clamp(1.22rem, 1rem + .95vw, 1.7rem) }
h4{ font-size:clamp(.95rem, .9rem + .3vw, 1.08rem); font-weight:700; letter-spacing:.01em }
p{ margin:0 0 1.05em }
a{ color:var(--acier-vif); text-underline-offset:.22em; text-decoration-thickness:1px }
a:hover{ color:var(--craie) }
b,strong{ font-weight:700; color:var(--craie) }
em,i{ font-style:italic }
abbr{ text-decoration:none }

.num{ font-family:var(--mono); font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.01em }

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

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

.evite{
  position:absolute; left:.6rem; top:-8rem; z-index:60;
  background:var(--cuivre); color:#141013; font-weight:700;
  padding:.85rem 1.2rem; border:1px solid var(--cuivre-vif); border-radius:var(--r);
  transition:top var(--d2) var(--courbe);
}
.evite:focus{ top:.6rem }

/* ─────────── ossature ─────────── */
.cadre{ width:min(100% - 2*var(--marge), 78rem); margin-inline:auto }
.cadre--etroit{ width:min(100% - 2*var(--marge), 58rem); margin-inline:auto }
.poste{ padding-block:clamp(3rem, 6vw, 6.4rem); position:relative }
.poste + .poste{ border-top:1px solid var(--filet) }
.prose{ max-width:var(--colonne) }

.plaque{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sourd); margin:0 0 .9rem; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
}
.plaque::before{ content:""; width:2.2rem; height:1px; background:var(--filet-vif); flex:none }

/* ═══════════ L'ENTREE : plaque signaletique de la page ═══════════ */
.tete{
  border-bottom:1px solid var(--filet);
  background:linear-gradient(180deg, rgba(13,16,20,.86), rgba(13,16,20,.55));
  position:relative; z-index:5;
}
.tete__in{ display:flex; flex-wrap:wrap; gap:.9rem 1.6rem; align-items:baseline; padding-block:1.05rem }
.marque{
  font-family:var(--titre); font-weight:800; font-size:1.32rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--craie); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
}
.marque:hover{ color:var(--cuivre-vif) }
.tete__s{ margin:0; font-family:var(--mono); font-size:.78rem; color:var(--gris); letter-spacing:.04em }

.nav{ border-top:1px solid var(--filet) }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0 }
.nav a{
  display:flex; align-items:center; min-height:44px; padding:.5rem 1rem;
  font-family:var(--mono); font-size:.79rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gris); text-decoration:none; border-right:1px solid var(--filet);
  transition:color var(--d1) var(--courbe), background-color var(--d1) var(--courbe);
}
.nav a:hover{ color:var(--craie); background:var(--releve) }
.nav a[aria-current="page"]{ color:var(--cuivre); box-shadow:inset 0 -2px 0 0 var(--cuivre) }

/* ═══════════ TITRE ═══════════ */
.entree{ padding-block:clamp(2.6rem, 5.5vw, 5.6rem) }
.entree__grille{ display:grid; gap:clamp(1.6rem,3vw,3rem); grid-template-columns:1fr }
@media (min-width:62rem){ .entree__grille{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:start } }
h1 span{ display:block; color:var(--cuivre); font-size:.44em; letter-spacing:-.01em; margin-top:.5em; font-weight:700 }
.chapo{ font-size:clamp(1.02rem,.96rem + .34vw,1.18rem); color:var(--gris); max-width:60ch; margin-top:1.4rem }
.chapo b{ color:var(--craie) }

.releve{ list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--filet); border:1px solid var(--filet) }
@media (min-width:44rem){ .releve{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.releve li{ background:var(--panneau); padding:1.05rem 1rem }
.releve__n{ font-family:var(--mono); font-size:clamp(2rem,1.4rem + 2vw,2.9rem); font-weight:700; line-height:1; margin:0 0 .35rem; color:var(--cuivre) }
.releve li:nth-child(n+3) .releve__n{ color:var(--acier) }
.releve__l{ margin:0; font-size:.79rem; line-height:1.35; color:var(--gris) }

/* ═══════════ LE TABLEAU DE BORD (lecture en 5 secondes) ═══════════ */
.pupitre{
  margin:0 0 1.8rem; border:1px solid var(--filet-fort); background:var(--creux);
  padding:.9rem 1rem 1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.1rem;
}
.pupitre legend{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sourd); padding:0 .4rem }
.pupitre__l{ display:flex; flex-wrap:wrap; gap:.5rem }
.pupitre input{ position:absolute; opacity:0; width:1px; height:1px }
.pupitre label{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.4rem .95rem;
  border:1px solid var(--filet-fort); background:var(--panneau); color:var(--gris);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; cursor:pointer; border-radius:var(--r);
  transition:color var(--d1) var(--courbe), border-color var(--d1) var(--courbe), background-color var(--d1) var(--courbe);
}
.pupitre label::before{ content:""; width:9px; height:9px; border:1px solid var(--filet-vif); background:transparent; flex:none }
.pupitre label:hover{ color:var(--craie); border-color:var(--filet-vif) }
.pupitre input:checked + label{ color:var(--craie); border-color:var(--cuivre); background:var(--releve) }
.pupitre input:checked + label::before{ background:var(--cuivre); border-color:var(--cuivre) }
.pupitre input:focus-visible + label{ outline:2px solid var(--cuivre-vif); outline-offset:3px }
.pupitre__n{ font-family:var(--mono); font-size:.74rem; color:var(--sourd); margin:0 }

.mur{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1px; background:var(--filet); border:1px solid var(--filet) }
/* Chaque li est une grille a un enfant : le lien s'etire dans les deux axes, et
   les tuiles d'une meme rangee partagent leur hauteur. flex-basis 40% = deux par
   rangee ; les creneaux plus larges reposent la base plus bas dans la feuille. */
.mur li{ display:grid; grid-template-columns:minmax(0,1fr); min-width:0; flex:1 1 40% }
.mur a{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; gap:.15rem .6rem;
  align-items:center; background:var(--panneau); padding:.85rem .9rem; min-height:5.6rem;
  text-decoration:none; color:var(--craie); position:relative;
  transition:background-color var(--d2) var(--courbe), transform var(--d2) var(--courbe);
}
.mur a::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--filet-vif) }
.mur a:hover{ background:var(--releve) }
.mur__m{ grid-column:1/-1; font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; color:var(--gris) }
.mur__p{ font-family:var(--mono); font-size:1.68rem; font-weight:700; line-height:1; color:var(--craie) }
.mur__s{ font-size:.72rem; line-height:1.25; color:var(--sourd) }
.mur__j{ grid-column:1/-1; height:4px; background:var(--creux); border:1px solid var(--filet); margin-top:.35rem; position:relative; overflow:hidden }
.mur__j i{ position:absolute; inset:0 auto 0 0; display:block; background:var(--filet-vif) }
.mur__j u{ position:absolute; inset:0 auto 0 0; display:block; text-decoration:none; background:var(--acier) }
.mur li[data-etat="pari-haut"] a::before{ background:var(--cuivre) }
.mur li[data-etat="pari-haut"] .mur__p{ color:var(--cuivre) }
.mur li[data-etat="pari-haut"] .mur__j u{ background:var(--cuivre) }
.mur li[data-etat="pari-bas"] a::before{ background:var(--acier) }
.mur li[data-etat="pari-bas"] .mur__p{ color:var(--acier) }
.mur li[data-etat="veille"] a::before{
  background:repeating-linear-gradient(45deg, var(--acier) 0 2px, transparent 2px 5px);
}
.legende-mur{ margin:1.1rem 0 0; font-size:.86rem; color:var(--gris); max-width:78ch }

/* ═══════════ LA SIGNATURE : LA CHAINE DE PRODUCTION ═══════════
   Chaque carte est une grille a deux rangees declarees. La premiere,
   [chaine], porte les cinq etages du calcul. Elle n'est pas un decor
   repete : la largeur de l'etage HISTOIRE vaut log10 de l'effectif reel,
   celle de l'etage VERROU vaut la racine de la marge de Wilson reelle.
   Deux marches aux effectifs differents rendent donc deux chaines de
   geometrie differente. La retirer du DOM vide la rangee.              */

.machine{
  display:grid;
  grid-template-rows:[chaine] auto [corps] auto;
  border:1px solid var(--filet-fort);
  background:var(--panneau);
  margin:0 0 1.6rem;
  position:relative;
}
.machine::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, var(--filet-vif), transparent 70%);
}

.chaine{
  grid-row:chaine;
  display:grid;
  grid-template-columns:
    minmax(6rem, calc(3.1rem + var(--fr-h) * 2.7rem))
    minmax(6rem, 1fr)
    minmax(6rem, 1fr)
    minmax(6.6rem, calc(3.1rem + var(--fr-v) * 2.7rem))
    minmax(7rem, 1.15fr);
  gap:1px;
  background:var(--filet);
  border-bottom:1px solid var(--filet-fort);
  list-style:none; margin:0; padding:0;
}
.etage{
  background:var(--creux);
  padding:.72rem .8rem .8rem;
  display:flex; flex-direction:column; gap:.25rem;
  position:relative; min-width:0;
  transition:background-color var(--d2) var(--courbe);
}
.etage:hover, .etage:focus-within{ background:var(--releve) }
.etage__n{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sourd); margin:0; display:flex; align-items:center; gap:.4rem;
}
.etage__n b{ color:var(--filet-vif); font-weight:700 }
.etage__v{ font-family:var(--mono); font-size:clamp(.98rem,.9rem + .4vw,1.2rem); font-weight:700; color:var(--craie); margin:0; line-height:1.15; overflow-wrap:anywhere }
.etage__d{ font-size:.7rem; line-height:1.32; color:var(--gris); margin:0 }
.etage--publie{ background:#191E25 }
.etage--publie .etage__v{ font-size:clamp(1.35rem,1.05rem + 1.1vw,1.85rem) }
.machine[data-sens="haut"] .etage--publie .etage__v{ color:var(--cuivre) }
.machine[data-sens="bas"]  .etage--publie .etage__v{ color:var(--acier) }
.machine[data-etat="calibration"] .etage--publie .etage__v,
.machine[data-etat="table"] .etage--publie .etage__v{ color:var(--craie) }

/* l'etage VERROU porte la comparaison, a echelle partagee de 0 a 14 points */
.verrou{ margin:.2rem 0 0; display:grid; grid-template-columns:auto 1fr auto; gap:.15rem .4rem; align-items:center }
.verrou__l{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; color:var(--sourd) }
.verrou__b{ height:6px; background:var(--creux); border:1px solid var(--filet); position:relative; overflow:hidden }
.verrou__b i{ position:absolute; inset:0 auto 0 0; display:block; width:calc(var(--v) / 14 * 100%) }
.verrou__b--marge i{ background:var(--filet-vif) }
.verrou__b--ecart i{ background:var(--acier) }
.machine[data-etat="pari"] .verrou__b--ecart i{ background:var(--cuivre) }
/* l'accent porte le SENS, jamais l'intensite : un pari a la baisse garde
   l'acier jusque dans sa barre d'ecart et dans le cadre de son verrou. */
.machine[data-etat="pari"][data-sens="bas"] .verrou__b--ecart i{ background:var(--acier) }
.machine[data-sens="bas"] .etage--verrou[data-verdict="franchi"]{ box-shadow:inset 0 0 0 1px var(--acier) }
.machine[data-sens="bas"] .etage--verrou[data-verdict="franchi"] .verdict{ color:var(--acier); border-color:var(--acier) }
.verrou__n{ font-family:var(--mono); font-size:.7rem; color:var(--craie) }
.etage--verrou[data-verdict="franchi"]{ box-shadow:inset 0 0 0 1px var(--cuivre) }
.etage--verrou[data-verdict="approx"] { box-shadow:inset 0 0 0 1px var(--filet-vif) }
.verdict{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  margin:.35rem 0 0; padding:.15rem .4rem; border:1px solid var(--filet-fort); color:var(--gris);
  align-self:flex-start;
}
.etage--verrou[data-verdict="franchi"] .verdict{ color:var(--cuivre); border-color:var(--cuivre) }
.etage--verrou[data-verdict="approx"] .verdict{
  color:var(--gris);
  border-style:dashed;
}

/* le corps de la machine */
.machine__corps{ grid-row:corps; display:grid; grid-template-columns:1fr; gap:0 clamp(1.4rem,2.4vw,2.6rem); padding:clamp(1.1rem,2vw,1.8rem) }
@media (min-width:60rem){
  .machine__corps{ grid-template-columns:minmax(0,1fr) minmax(0,15rem) }
  .machine__aside{ border-left:1px solid var(--filet); padding-left:clamp(1.1rem,1.8vw,1.6rem) }
}
.machine__sur{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sourd); margin:0 0 .5rem }
.machine__corps h3{ margin:0 0 .6rem; max-width:34ch }
.machine__ech{ font-family:var(--mono); font-size:.76rem; color:var(--acier); margin:0 0 1rem }
.machine__corps p{ max-width:62ch }
.machine__corps > div > p:last-child{ margin-bottom:0 }

.etiq{
  display:inline-flex; align-items:center; gap:.45rem; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  padding:.28rem .6rem; border:1px solid var(--filet-fort); color:var(--gris); margin:0 0 .8rem;
}
.machine[data-etat="pari"][data-sens="haut"] .etiq{ color:var(--cuivre); border-color:var(--cuivre) }
.machine[data-etat="pari"][data-sens="bas"] .etiq{ color:var(--acier); border-color:var(--acier) }
.machine[data-etat="veille"] .etiq{ border-style:dashed }

.amer{
  border:1px solid var(--filet-fort); background:var(--creux); padding:.85rem .95rem; margin:1.2rem 0 0;
  font-size:.88rem; max-width:62ch;
  background-image:repeating-linear-gradient(45deg, rgba(159,184,206,.07) 0 3px, transparent 3px 8px);
}
.amer__t{ display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--acier); margin-bottom:.3rem }

.src{ font-family:var(--mono); font-size:.7rem; color:var(--sourd); margin:1rem 0 0; line-height:1.5 }

/* le depliant d'approfondissement : le contenu est complet sans JavaScript */
.plus{ margin:1.2rem 0 0; border:1px solid var(--filet); background:var(--creux) }
.plus > summary{
  cursor:pointer; list-style:none; padding:.7rem .9rem; min-height:44px; display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--acier);
}
.plus > summary::-webkit-details-marker{ display:none }
.plus > summary::before{ content:"+"; font-weight:700; width:1.1rem; text-align:center; color:var(--cuivre) }
.plus[open] > summary::before{ content:"\2212" }
.plus > summary:hover{ color:var(--craie); background:var(--releve) }
.plus__in{ padding:.2rem .95rem 1rem; border-top:1px solid var(--filet) }
.plus__in h4{ margin:1.1rem 0 .35rem; color:var(--cuivre-vif) }
.plus__in h4:first-child{ margin-top:.9rem }
.plus__in p{ font-size:.92rem; max-width:64ch; margin-bottom:.7rem }

/* La seconde forme declaree de la signature. Sous 62rem la chaine passe de
   cinq colonnes a cinq rangees, et la geometrie reste pilotee par les deux
   memes nombres reels : la jauge de l'etage 01 vaut log10 de l'effectif,
   celle de l'etage 04 vaut la racine de la marge. Meme signature, pas un
   remplacement. */
@media (max-width:61.99rem){
  .chaine{ grid-template-columns:minmax(0,1fr) }
  .etage{ padding:.7rem .85rem }
  .etage::after{
    content:""; display:block; height:3px; background:var(--filet-vif);
    width:calc(var(--fr-h) / 3.8 * 100%); max-width:100%; margin-top:.45rem;
  }
  .etage--verrou::after{ width:calc(var(--fr-v) / 3.8 * 100%); background:var(--cuivre) }
  .machine[data-sens="bas"] .etage--verrou::after{ background:var(--acier) }
  .etage:not(:first-child):not(.etage--verrou)::after{ display:none }
  .etage--publie{ border-top:1px solid var(--filet-fort) }
}

/* ═══════════ SCHEMAS ═══════════ */
.figure{ margin:2.2rem 0 0 }
.figure__env{ overflow-x:auto; border:1px solid var(--filet-fort); background:var(--creux); padding:1rem }
.figure__env:focus-visible{ outline:2px solid var(--cuivre-vif); outline-offset:2px }
.figure svg{ display:block; height:auto; max-width:100% }
figcaption{ margin-top:.9rem; font-size:.88rem; color:var(--gris); max-width:80ch }
figcaption b{ color:var(--craie) }
.astuce{ display:block; font-family:var(--mono); font-size:.7rem; color:var(--sourd); margin-bottom:.4rem }

/* ═══════════ LES VENTS ═══════════ */
/* Flex-wrap et non grille auto-fill : 9 vents sur 4 colonnes laissaient trois
   cellules du fond-filet a nu en bout de rangee (mesure 2026-08-31, contexte a
   1440). L'orpheline s'etire, la rangee est toujours pleine. */
.vents{ list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:1px; background:var(--filet); border:1px solid var(--filet) }
.vents li{ flex:1 1 17rem; min-width:0; background:var(--panneau); padding:1.1rem 1.15rem }
.vents__t{ font-family:var(--titre); font-weight:800; font-size:1.05rem; margin:0 }
.vents__v{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cuivre); margin:.15rem 0 .7rem }
.vents__d{ font-size:.88rem; margin:0 }
.vents .src{ margin-top:.7rem }

/* ═══════════ LA PLANCHE CLAIRE : rupture de registre ═══════════ */
.poste--clair{
  background:var(--clair);
  background-image:repeating-linear-gradient(90deg, rgba(16,20,26,.045) 0 1px, transparent 1px 44px);
  color:var(--encre);
  border-top:3px solid var(--cuivre);
}
.poste--clair h2,.poste--clair h3,.poste--clair h4{ color:var(--encre) }
.poste--clair .plaque{ color:var(--encre-2) }
.poste--clair .plaque::before{ background:var(--encre-2) }
.poste--clair p{ color:#242A32 }
.poste--clair b,.poste--clair strong{ color:var(--encre) }
.poste--clair a{ color:var(--acier-grave) }
.poste--clair .figure__env{ background:#EEF1F4; border-color:#B9C2CB }
.poste--clair figcaption{ color:#242A32 }
.poste--clair .astuce{ color:var(--encre-2) }

.registre-env{ overflow-x:auto; margin-top:1.8rem; border:1px solid #B9C2CB; background:#EEF1F4 }
.registre{ border-collapse:collapse; width:100%; min-width:52rem; font-size:.84rem }
.registre caption{ text-align:left; padding:.9rem 1rem; font-size:.84rem; color:#242A32; border-bottom:1px solid #B9C2CB }
.registre th,.registre td{ padding:.55rem .8rem; border-bottom:1px solid #C8D0D8; text-align:left; vertical-align:top }
.registre thead th{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--encre); border-bottom:1px solid #98A3AE; background:#DFE4E9; position:sticky; top:0;
}
.registre tbody th{ font-weight:700; color:var(--encre) }
.registre td.n{ font-family:var(--mono); font-variant-numeric:lining-nums tabular-nums; text-align:right; white-space:nowrap }
.registre tbody tr:hover{ background:#E1E6EB }
/* cibles tactiles : tout lien qui n'est PAS en ligne dans une phrase porte
   44px de hauteur utile (critere 2.5.5, niveau AAA, la valeur qu'on construit
   ici ; le plancher AA 2.5.8 est a 24px). Les liens en ligne dans un
   paragraphe relevent de l'exception « inline » et ne sont pas retailles. */
.registre tbody th a{ display:inline-flex; align-items:center; min-height:44px }
.registre .t-pari{ color:var(--cuivre-grave); font-weight:700 }
.registre .t-bas{ color:var(--acier-grave); font-weight:700 }
.registre .t-neutre{ color:#4A545F }
.marq{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid #98A3AE; padding:.1rem .4rem; white-space:nowrap; display:inline-block;
}
.marq--pari{ border-color:var(--cuivre-grave); color:var(--cuivre-grave) }
.marq--bas{ border-color:var(--acier-grave); color:var(--acier-grave) }
.marq--veille{ border-style:dashed }

/* ═══════════ ROUTES ET PIED ═══════════ */
.routes{ list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:1px; background:var(--filet); border:1px solid var(--filet) }
.routes li{ flex:1 1 15rem; background:var(--panneau); padding:1.15rem }
.routes__n{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sourd); margin:0 0 .3rem }
.routes__t{ font-family:var(--titre); font-weight:800; font-size:1.14rem; margin:0 0 .5rem }
.routes__t a{ text-decoration:none; color:var(--craie); display:inline-flex; align-items:center; min-height:44px }
.routes__t a:hover{ color:var(--cuivre-vif) }
.routes li p:last-child{ font-size:.88rem; color:var(--gris); margin:0 }

.pied{ border-top:1px solid var(--filet-fort); background:var(--creux); padding-block:2.6rem }
.pied h2{ font-size:1.1rem; margin:0 0 1rem }
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem 2rem; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)) }
.pied li{ font-size:.82rem; color:var(--gris); border-left:1px solid var(--filet-fort); padding-left:.8rem }
.pied code{ font-family:var(--mono); font-size:.78rem; color:var(--acier) }
.pied__note{ margin:1.6rem 0 0; font-size:.82rem; color:var(--sourd); max-width:78ch }

.encart{ border:1px solid var(--filet-fort); border-left:3px solid var(--cuivre); background:var(--creux); padding:1.1rem 1.2rem; margin:2rem 0 0 }
.encart p{ max-width:70ch; margin-bottom:.8rem }
.encart p:last-child{ margin-bottom:0 }
.chute{ margin-top:2rem; font-size:1.02rem; color:var(--acier); max-width:66ch }

/* ═══════════ MOUVEMENT ═══════════
   Aucun contenu ne depend d'un declencheur. L'entree est une animation CSS
   pure, jouee au chargement, sans script et sans observateur : il n'existe
   donc aucun chemin (defilement fusionne, impression, onglet en arriere-plan,
   lien d'ancrage) qui puisse laisser un bloc invisible. C'est un retrait, pas
   un correctif de plus : la classe de defauts est fermee a la source.        */
/* MESURE, puis RETRAIT. Une premiere version portait une animation d'entree
   en opacite (`from{opacity:0}` avec `fill-mode: both`). Mesuree au banc :
   opacite minimale 1 a 375, 768 et 1024, mais **0 a 1440 et 1920**. Cause :
   une animation d'opacite est composee, et Chrome ne la demarre pas tant que
   l'element n'a jamais ete peint ; le mode `both` applique alors l'etat de
   depart, invisible, indefiniment. La visibilite dependait donc encore d'un
   declencheur, ce que le §6.6 interdit.
   Le mouvement est la plus faible des cinq monnaies du §9 et il ne se voit sur
   aucune capture. Aucune quatrieme rustine : l'animation est ENLEVEE, pas
   corrigee, et la classe de defauts est fermee. Ne pas la reintroduire.
   Il ne reste que des transitions d'etat, qui ne portent aucun contenu.       */

/* Les trois durees longues de la sequence, employees sur trois etats reels et
   graduees par la taille de l'organe : plus la surface qui bouge est grande,
   plus elle met de temps. Aucune ne porte de contenu, la regle du contenu
   present sans script reste tenue : au repos, tout est deja lisible. */
.machine{ transition:border-color var(--d3) var(--courbe) }
.machine:focus-within{ border-color:var(--filet-vif) }
.figure__env{ box-shadow:inset 0 0 0 0 rgba(0,0,0,0); transition:box-shadow var(--d4) var(--courbe) }
.figure__env:focus-within{ box-shadow:inset 0 0 0 2px var(--filet-vif) }
.chaine{ transition:background-color var(--d5) var(--courbe) }
.machine:has(.plus[open]) .chaine{ background-color:var(--filet-fort) }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:1ms !important; transition-duration:1ms !important }
}

/* le seul organe que le script ajoute : sans lui, il n'existe pas, et rien ne manque */
.capots{ margin:0 0 1.4rem; display:flex; gap:.6rem; flex-wrap:wrap }
.capots button{
  min-height:44px; padding:.5rem 1rem; cursor:pointer; border:1px solid var(--filet-fort);
  background:var(--panneau); color:var(--gris); font-family:var(--mono); font-size:.78rem;
  letter-spacing:.06em; border-radius:var(--r);
}
.capots button:hover{ color:var(--craie); border-color:var(--cuivre) }


/* ═══════════ LE BANDEAU DE FIABILITE (commun, repris du socle tel quel) ═══════════
   Le balisage vient du socle et ne se modifie pas : les pages du site doivent
   toutes porter la meme empreinte de bandeau. Seul l'habillage est refait ici. */
.bandeau-fiab{ padding-top:1.5rem }
.fiabilite{
  border:1px solid var(--filet-fort); border-left:3px solid var(--acier);
  background:var(--creux); position:relative;
}
.fiabilite > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:.7rem;
  min-height:44px; padding:.7rem .95rem; color:var(--acier);
  font-family:var(--mono); font-size:.79rem; letter-spacing:.05em;
}
.fiabilite > summary::-webkit-details-marker{ display:none }
.fiabilite > summary::before{
  content:"i"; flex:none; width:1.15rem; height:1.15rem; line-height:1.05rem; text-align:center;
  border:1px solid var(--acier); font-weight:700; font-size:.72rem;
}
.fiabilite > summary b{ color:var(--acier); font-weight:700 }
.fiabilite > summary:hover{ background:var(--releve) }
.fiabilite > summary:hover b{ color:var(--acier-vif) }
.fiabilite[open] > summary{ border-bottom:1px solid var(--filet) }
.fiabilite p{ margin:.8rem .95rem; font-size:.88rem; max-width:82ch; color:var(--gris) }
.fiabilite p strong,.fiabilite p em{ color:var(--craie) }
.fiabilite .src{ margin:.8rem .95rem; font-size:.72rem }

/* ═══════════ LE CARTOUCHE DE FEUILLE ═══════════
   Ce que porte un plan technique avant son dessin : de quoi il s'agit, sur
   quelle periode, combien de cotes, a quelle echelle, etabli quand. */
.cartouche{
  margin:0; display:grid; gap:1px; background:var(--filet);
  border:1px solid var(--filet-fort); grid-template-columns:repeat(2,minmax(0,1fr));
}
/* En petite largeur le cartouche precede le titre : il doit donc rester court,
   sinon on repousse le titre hors du premier ecran, ce qui est le defaut qu'on
   vient de corriger sur la navigation. Deux colonnes serrees, trois rangees. */
@media (max-width:43.99rem){
  .cartouche > div{ padding:.5rem .6rem }
  .cartouche > div:nth-child(5){ grid-column:span 2 }
  .cartouche dt{ font-size:.57rem; letter-spacing:.14em; margin-bottom:.15rem }
  .cartouche dd{ font-size:.74rem; line-height:1.32 }
  .bandeau-fiab{ padding-top:1rem }
  .fiabilite > summary{ font-size:.72rem; padding:.6rem .75rem }
}
@media (min-width:68rem){ .cartouche{ grid-template-columns:repeat(5,minmax(0,1fr)) } }
.cartouche > div{ background:var(--creux); padding:.7rem .85rem; min-width:0 }
.cartouche dt{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sourd); margin:0 0 .3rem;
}
.cartouche dd{ margin:0; font-size:.82rem; line-height:1.4; color:var(--craie) }

/* ═══════════ LE SENS EST UNE FORME, PAS UNE TEINTE ═══════════
   Critere 1.4.1 : la couleur ne doit jamais porter seule une information.
   Le cuivre dit la hausse, mais un chevron plein la dit aussi ; l'acier dit
   la baisse, mais un chevron renverse la dit aussi ; la surveillance porte
   un contour pointille en plus de son trait hachure. Retirez toute la
   couleur de cette page et l'information reste lisible. */
.ico{ width:1em; height:1em; flex:none; fill:currentColor }
.etiq .ico{ margin-right:.1rem }

/* le verdict ne se contente plus d'un mot : il dit ce que le mot implique */
.verdict__d{
  margin:.4rem 0 0; font-size:.72rem; line-height:1.42; color:var(--gris); max-width:34ch;
}
.etage--verrou[data-verdict="franchi"] .verdict__d{ color:var(--craie) }

/* les schemas qui expliquent l'instrument prennent toute la largeur utile */
.figure--large{ margin-top:2.6rem }
.figure--large .figure__env{ padding:1.2rem }

/* le tableau des cas, sur fond sombre : le registre de base est regle pour la
   planche claire, il lui faut donc sa variante ici, sinon il devient illisible */
.registre-env--sombre{ border-color:var(--filet-fort); background:var(--creux); margin-top:1.6rem }
.registre--sombre{ min-width:44rem }
.registre--sombre caption{ color:var(--gris); border-bottom-color:var(--filet-fort) }
.registre--sombre thead th{ color:var(--craie); background:var(--releve); border-bottom-color:var(--filet-vif) }
.registre--sombre th,.registre--sombre td{ border-bottom-color:var(--filet) }
.registre--sombre tbody th{ color:var(--craie) }
.registre--sombre tbody th a{ color:var(--acier-vif) }
.registre--sombre td{ color:var(--gris) }
.registre--sombre tbody tr:hover{ background:var(--releve) }
.registre--sombre .marq{ border-color:var(--filet-fort); color:var(--gris) }
.registre--sombre .marq--pari{ border-color:var(--cuivre); color:var(--cuivre) }
.registre--sombre .marq--veille{ border-color:var(--acier); color:var(--acier); border-style:dashed }

/* ═══════════ NOTE DE CONSTRUCTION 1 : LES TUILES S'ALIGNENT ═══════════
   Deux defauts mesures sur la premiere version : le grand chiffre descendait
   d'une ligne quand le titre en prenait deux, et la derniere rangee laissait
   deux tuiles seules sur six colonnes. Le titre recoit donc une hauteur de
   deux lignes garantie, et le nombre de colonnes est choisi parmi les
   DIVISEURS de quatorze ou complete par une extension explicite. */
/* La hauteur du titre doit valoir DEUX LIGNES EXACTEMENT, sinon le grand
   chiffre descend d'un cran sur les tuiles au titre long, et la rangee perd
   son alignement. La hauteur de ligne est donc fixee ici, et la hauteur
   minimale calculee depuis elle : les deux valeurs ne peuvent plus diverger. */
.mur__m{ line-height:1.3; min-height:2.6em; display:flex; align-items:flex-start }
/* Le grand chiffre etait centre dans sa rangee : sur les tuiles au sous-titre
   long, la rangee grandissait et le chiffre descendait avec elle. Mesure au
   banc : jusqu'a 21,6 px d'ecart entre chiffres d'une meme rangee. Ils
   s'alignent donc par le HAUT, ce qui ne depend plus de la longueur du texte. */
.mur a{ align-items:start }
.mur__p{ align-self:start }
/* Le mur est en flex-wrap, pas en grille : une rangee incomplete s'etire au lieu
   de laisser des cellules du fond-filet a nu. Mesure du 2026-08-31 (sonde case
   fantome, 9 pages x 2 largeurs) : la grille a colonnes figees laissait une case
   vide a droite de la 5e famille de mots a 375, et trois a droite des 4 tuiles
   du gabarit a 1440 -- le patch nth-child(13/14) ne couvrait que le mur a 14.
   Bases par creneau (gap 1px, marge d'arrondi comprise) :
   40% -> 2 par rangee · 22% -> 4 par rangee · 13% -> 7 par rangee. */
@media (min-width:40rem){ .mur li{ flex-basis:22% } }
@media (min-width:62rem){ .mur li{ flex-basis:13% } }

/* ═══════════ NOTE DE CONSTRUCTION 2 : LA NAVIGATION TIENT SUR UNE LIGNE ═══════════
   A 375 px elle prenait trois lignes avant le titre. Elle defile maintenant
   dans son propre conteneur : la page, elle, ne deborde pas. */
@media (max-width:47.99rem){
  .nav ul{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin }
  .nav a{ white-space:nowrap; padding:.5rem .7rem; font-size:.72rem; letter-spacing:.06em }
  .tete__in{ padding-block:.8rem }
  .tete__s{ font-size:.72rem }
}

/* Le filet, pour les pages a venir : une machine sans colonne de lecture ne
   doit pas ouvrir une colonne de grille vide. Le defaut a ete mesure ici
   (sept cartes, environ 350 px de vide chacune) ; la regle le ferme pour
   toutes les pages, pas seulement pour celle-ci. */
@media (min-width:60rem){
  .machine__corps:not(:has(.machine__aside)){ grid-template-columns:minmax(0,1fr) }
}

/* ═══════════ TERMES CLIQUABLES : les bulles de definition ═══════════
   Contrat de scripts/termes_cliquables.py : il pose <button class="terme"
   popovertarget> + <span popover class="def-bulle">. Transpose d'ichor.css le
   2026-08-31, en tokens v3 : vingt popovers etaient nes SANS une seule regle
   dans la feuille que les pages chargent (boutons au chrome natif du systeme,
   bulle blanche de l'agent utilisateur sur site graphite) -- la meme classe que
   le repli des tableaux, ratee dans le composant voisin.
   Repli sans API Popover : l'attribut est ignore, le span s'affiche EN LIGNE ;
   le style de base doit donc rester lisible pose dans la prose. */
.terme{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  /* 2.75rem = 44px, la cible tactile qu'on construit -- dans les DEUX axes,
     comme la v2 (min-inline-size avait ete perdu a la transposition) */
  min-block-size:2.75rem; min-inline-size:2.75rem; padding:.15rem .6rem;
  border:1px dotted var(--cuivre); background:transparent; color:var(--cuivre-vif);
  font-family:inherit; font-size:.95em; font-weight:700; cursor:pointer;
  transition:background-color var(--d2) var(--courbe);
}
.terme::after{ content:"?"; font-family:var(--mono); font-size:.7em; color:var(--sourd) }
.terme:hover{ background:rgba(224,164,104,.14); border-style:solid }
.terme:focus-visible{ outline:2px solid var(--cuivre-vif); outline-offset:3px }
.def-bulle{
  inline-size:min(30rem, calc(100vw - 2rem));
  padding:1rem 1.1rem 1.1rem;
  border:1px solid var(--cuivre); background:var(--releve); color:var(--craie);
  font-size:.95rem; line-height:1.55;
}
.def-bulle::backdrop{ background:rgba(13,16,20,.74) }
.def-bulle > b:first-child{
  /* EN LIGNE, pas en bloc : le corps est « <b>mot</b> : definition », un bloc
     laisserait le deux-points orphelin en tete de ligne (vu a la capture) */
  font-family:var(--mono); font-weight:700; text-transform:uppercase;
  font-size:.8rem; letter-spacing:.09em; color:var(--cuivre);
}
.def-fermer{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:2.75rem; padding-inline:.8rem; margin-block-start:.6rem;
  border:1px solid var(--filet-fort); background:var(--panneau); color:var(--craie);
  font-family:var(--mono); font-size:.78rem; cursor:pointer;
}
.def-fermer:hover{ border-color:var(--cuivre) }
/* en PLANCHE CLAIRE, le bouton suit le registre comme les liens (.poste--clair a) :
   cuivre-vif y rend 1,51:1 -- mesure du 2026-08-31, le jour meme de la
   transposition : la v2 n'avait jamais pose un terme sur fond clair, la v3 oui.
   cuivre-grave : 7,42:1 au repos, 6,79:1 sur le fond de survol ; le « ? » passe
   en encre-2 (8,85:1), --sourd n'y rend que 3,14:1. La bulle, elle, vit dans le
   top-layer avec son propre fond sombre : rien a changer. */
.poste--clair .terme{ color:var(--cuivre-grave); border-color:var(--cuivre-grave) }
.poste--clair .terme::after{ color:var(--encre-2) }
.poste--clair .terme:focus-visible{ outline-color:var(--cuivre-grave) }
/* REPLI sans API Popover : l'attribut est ignore, le span reste un inline nu
   (inline-size et padding vertical n'y font rien, la bordure se fragmente aux
   retours a la ligne). Ce bloc lui donne une vraie boite ; il ne peut PAS
   s'appliquer sans garde : hors @supports, display sur [popover] battrait le
   display:none de l'agent utilisateur et montrerait toutes les bulles fermees. */
@supports not selector(:popover-open){
  .def-bulle{ display:block; margin-block:.6rem }
  .def-fermer{ display:none }  /* sans mecanisme, ce bouton serait inerte */
}

/* ═══════════ REPLI MOBILE DES TABLEAUX ═══════════
   Contrat de scripts/verifier_mobile.py : chaque <table> declare data-mobile="<nom>"
   et le nom correspond a une regle REELLE de la feuille que la page charge. Les pages
   v3 ne chargent plus ichor.css, ou vivait le mecanisme : transpose ici le 2026-08-31,
   fonds alignes sur les deux registres de cette feuille (clair et sombre). */
: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:#EEF1F4;                  /* le fond de .registre-env, registre clair */
  box-shadow:1px 0 0 #B9C2CB;
}
/* l'angle : la cellule vit DANS l'en-tete, son fond opaque est celui de
   l'en-tete (#DFE4E9, .registre thead th), pas celui du corps -- sinon un
   carre plus pale trahit le collage des qu'on defile */
table[data-mobile="colonne-collante"] thead th:first-child{ background:#DFE4E9 }
/* au survol, la rangee change de fond (.registre tbody tr:hover) : le libelle
   colle doit suivre, sinon il reste fige et la rangee semble coupee en deux */
table[data-mobile="colonne-collante"] tbody tr:hover th[scope="row"]{ background:#E1E6EB }
.registre-env--sombre table[data-mobile="colonne-collante"] tbody tr:hover th[scope="row"]{ background:var(--releve) }
.registre-env--sombre table[data-mobile="colonne-collante"] tbody th[scope="row"]{
  background:var(--creux); box-shadow:1px 0 0 var(--filet-fort);
}
.registre-env--sombre table[data-mobile="colonne-collante"] thead th:first-child{
  background:var(--releve); box-shadow:1px 0 0 var(--filet-fort);
}
table[data-mobile="colonne-collante"] thead th:first-child{ z-index:3 }
table[data-mobile="defilement"]{ min-inline-size:max-content }
/* la mention « faites glisser » posee par tableaux_mobiles.py (classe de son
   contrat, transposee de la v2 -- var(--faible) n'existe pas ici, --gris tient
   le meme role de texte secondaire dans cette feuille) */
.glisser{ font-size:.84rem; color:var(--gris); margin:.6rem 0 0 }
/* en border-collapse:separate, seules les bordures de RANGEE (tr) sont ignorees ;
   celles des CELLULES survivent -- or .registre th/td portent deja leur
   border-bottom (#C8D0D8). Une regle border-top ajoutee ici doublait donc le
   filet entre chaque rangee (retiree le 2026-08-31, constat de relecture). */

/* @GREFFES@  (toute regle ajoutee se place AU-DESSUS de cette ligne ; le
   marqueur a ete descendu ici le 2026-08-31, apres que deux commits l'ont
   enfreint en greffant EN DESSOUS -- il borne la zone de greffe juste avant
   les deux blocs qui doivent rester derniers, print puis couleurs forcees) */

/* ═══════════ IMPRESSION (piege 6.14 : rien ne declenche de defilement) ═══════════ */
@media print{
  html,body{ background:#fff !important; color:#000 !important; font-size:10.5pt }
  body{ background-image:none !important }
  .tete,.nav,.evite,.pupitre,.astuce,.capots,.glisser{ display:none !important }
  .revele{ animation:none !important; opacity:1 !important; transform:none !important }
  .machine,.mur,.vents,.routes,.releve,.registre-env,.figure__env,.amer,.plus,.encart{
    border:1px solid #000 !important; background:#fff !important; break-inside:avoid;
  }
  .etage,.mur a,.vents li,.routes li,.releve li,.machine__corps,.etage--publie{ background:#fff !important; color:#000 !important }
  .plus > summary{ color:#000 !important }
  .plus__in{ display:block !important }
  /* les organes greffes doivent s'imprimer aussi, sinon la feuille papier ment */
  .cartouche,.cartouche > div,.fiabilite,.registre-env--sombre,.registre--sombre,
  .registre--sombre thead th,.registre--sombre tbody tr{
    background:#fff !important; color:#000 !important; border-color:#000 !important;
  }
  .cartouche,.fiabilite,.registre-env--sombre{ border:1px solid #000 !important; break-inside:avoid }
  .cartouche dt,.cartouche dd,.verdict__d,.fiabilite p,.fiabilite summary,
  .fiabilite summary b,.registre--sombre th,.registre--sombre td,.registre--sombre caption{ color:#000 !important }
  .fiabilite p{ display:block !important }
  .ico{ fill:#000 !important }
  .marq{ border:1px solid #000 !important; color:#000 !important }
  h1,h2,h3,h4,p,b,strong,.etage__v,.mur__p,.releve__n,.machine__ech,.etiq,.verdict,.src,.plaque{ color:#000 !important }
  .js .revele,.js .revele.vu{ opacity:1 !important; transform:none !important }
  .machine:not([data-classe]),.machine,.mur li,.poste[data-groupe]{ display:revert !important }
  .amer{ background-image:none !important }
  .poste--clair{ border-top:2px solid #000 !important }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt }
  .figure__env{ overflow:visible !important }
  /* le bouton de terme redevient du texte ; la bulle fermee ([popover] non
     ouvert) ne s'imprime pas -- la definition vit au lexique (mots.html),
     imprimer chaque bulle en ligne doublerait la prose (choix documente) */
  .terme{
    /* display:inline et les DEUX min remis a zero : la remise a zero
       d'impression avait ete ecrite contre l'ancien jeu de proprietes, et le
       min-inline-size restaure (44px ~ 29pt a 10.5pt) aurait etire une boite
       centree au milieu d'une phrase (releve de la passe adversariale 3) */
    display:inline !important; border:none !important; background:none !important;
    padding:0 !important; min-block-size:0 !important; min-inline-size:0 !important;
    color:#000 !important; font-size:inherit !important;
  }
  .terme::after{ content:"" !important }
}

/* ═══════════ COULEURS FORCEES : EN FIN DE FEUILLE (piege 6.3) ═══════════ */
@media (forced-colors: active){
  html,body{ background:Canvas !important; color:CanvasText !important }
  body{ background-image:none !important; forced-color-adjust:none; background:Canvas !important }
  .machine,.chaine,.etage,.mur,.mur a,.vents,.vents li,.routes,.routes li,.releve,.releve li,
  .pupitre,.pupitre label,.amer,.plus,.encart,.figure__env,.registre-env,.etiq,.verdict,.marq,
  .verrou__b,.mur__j,.poste--clair,.pied li{
    background:Canvas !important; color:CanvasText !important; border:1px solid CanvasText !important;
    box-shadow:none !important; background-image:none !important;
  }
  .poste + .poste{ border-top:1px solid CanvasText !important }
  /* les organes greffes : bordure avec style EXPLICITE, jamais border-color
     seul, qui ne produit rien en couleurs forcees */
  .cartouche,.cartouche > div,.fiabilite,.registre-env--sombre,.registre--sombre thead th,
  .verdict__d,.marq{
    background:Canvas !important; color:CanvasText !important;
    border:1px solid CanvasText !important; box-shadow:none !important;
  }
  .cartouche dt,.cartouche dd,.fiabilite summary,.fiabilite summary b,.fiabilite p,
  .registre--sombre th,.registre--sombre td,.registre--sombre caption{ color:CanvasText !important }
  .ico{ fill:CanvasText !important; forced-color-adjust:none }
  a{ color:LinkText !important }
  .nav a[aria-current="page"]{ box-shadow:none !important; border:1px solid Highlight !important; color:Highlight !important }
  .pupitre input:checked + label{ border:2px solid Highlight !important; color:Highlight !important }
  .verrou__b i,.mur__j i,.mur__j u{ background:CanvasText !important; forced-color-adjust:none }
  .verrou__b--marge i{ background:GrayText !important }
  .mur a::before{ background:CanvasText !important; forced-color-adjust:none }
  :focus-visible{ outline:2px solid Highlight !important }
  .evite{ background:Canvas !important; color:CanvasText !important; border:1px solid CanvasText !important }
  /* body porte forced-color-adjust:none (heritee) : les fonds poses en dur sur
     les libelles colles des tableaux persisteraient en couleurs forcees */
  table[data-mobile="colonne-collante"] thead th:first-child,
  table[data-mobile="colonne-collante"] tbody th[scope="row"]{
    background:Canvas !important; color:CanvasText !important; box-shadow:none !important;
    border-inline-end:1px solid CanvasText !important;
  }
  /* le registre CLAIR entier suit (le bloc ne couvrait que --sombre : la
     colonne collee repeinte cotoyait des voisines aux fonds d'auteur) --
     BORDURES comprises : body{forced-color-adjust:none} est heritee, donc le
     filet #C8D0D8 d'auteur survivait et devenait quasi invisible sur un
     Canvas clair, le tableau perdait ses separateurs de rangee (releve de la
     passe adversariale 3 ; le style solid existe deja en base, on repeint) */
  .registre thead th,.registre tbody tr:hover{ background:Canvas !important }
  .registre th,.registre td,.registre caption{
    color:CanvasText !important; border-bottom:1px solid CanvasText !important;
  }
  table[data-mobile="colonne-collante"] tbody tr:hover th[scope="row"]{ background:Canvas !important }
  .terme,.def-fermer{ background:Canvas !important; color:ButtonText !important; border:1px solid ButtonText !important }
  .terme::after{ color:ButtonText !important }
  .def-bulle{ background:Canvas !important; color:CanvasText !important; border:1px solid CanvasText !important }
  .def-bulle > b:first-child{ color:CanvasText !important }
}