/* ═══════════════════════════════════════════════════════════════════════
   SYSTÈME — une seule source pour les couleurs, l'échelle et les rythmes
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Profondeur : trois plans, du fond atmosphérique au contenu */
  --fond:#05070C;
  --plan-1:#080C13;
  --plan-2:#0E141F;
  --plan-3:#141C2A;
  --trait:#1E293B;
  --trait-vif:#2B3A52;

  /* Texte — contrastes calculés, tous > 7:1 sur leur fond */
  --encre:#E8EDF5;        /* 17,1:1 sur --fond */
  --encre-douce:#A7B3C6;  /* 8,7:1 sur --plan-2 */
  --encre-tue:#7A8799;    /*  5,1:1 sur --plan-2 */

  /* Signature : cyan glacé, la lumière de la page */
  --signature:#5EE7FF;    /* 12,6:1 sur --plan-2 */
  --signature-sourde:#2E7A8C;

  /* Verdicts */
  --haut:#3DDC97;         /* 10,5:1 */
  --bas:#FF7A7A;          /*  7,0:1 */
  --garde:#F0B429;        /*  9,9:1 */

  /* Typographie : trois rôles distincts, trois familles distinctes,
     aucune ressource distante — la page ne peut pas perdre ses polices. */
  --titre:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --texte:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --chiffre:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --large:min(1180px,92vw);
  --r:14px;
  --lent:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--texte);font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.68;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

/* ── Le fond atmosphérique : trois couches de profondeur ────────────── */
.ciel{position:fixed;inset:0;z-index:0;pointer-events:none}
#nappe{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.ciel::before{ /* source de lumière, haute et froide */
  content:"";position:absolute;left:50%;top:-28vh;transform:translateX(-50%);
  width:min(1500px,150vw);height:88vh;
  background:radial-gradient(60% 55% at 50% 40%,rgba(94,231,255,.16),rgba(94,231,255,.05) 42%,transparent 72%);
  filter:blur(24px);
}
.ciel::after{ /* grain : de la matière, pas une surface plate */
  content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}

/* ── Accès clavier ──────────────────────────────────────────────────── */
.saut{position:absolute;left:12px;top:-64px;z-index:99;background:var(--signature);color:#04222B;
  padding:.7rem 1.1rem;border-radius:10px;font-weight:650;text-decoration:none;transition:top .18s}
.saut:focus{top:12px}
:focus-visible{outline:2.5px solid var(--signature);outline-offset:3px;border-radius:6px}
.lu-seul{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* Controle d'ambiance. WCAG 2.2.2 exige un moyen d'ARRETER tout mouvement qui dure
   plus de 5 s ; ce critere est DISTINCT de prefers-reduced-motion, qui ne couvre que
   l'utilisateur ayant deja regle une preference systeme. Le bouton n'apparait que si
   du mouvement existe reellement : sans JS il n'y en a pas, en calme non plus. */
.ctrl{display:none;align-items:center;gap:.5rem;margin-left:auto;
  background:var(--plan-2);color:var(--encre-douce);border:1px solid var(--trait-vif);
  border-radius:99px;padding:.5rem 1.1rem;min-height:44px;font-family:var(--chiffre);font-size:.78rem;
  letter-spacing:.04em;cursor:pointer;transition:border-color .2s,color .2s}
.js .ctrl{display:inline-flex}
.ctrl:hover{border-color:var(--signature);color:var(--encre)}
.ctrl-p{width:9px;height:9px;border-radius:50%;background:var(--signature);flex:0 0 auto}
html.fige .ctrl-p{background:var(--encre-tue)}

/* ── Trame ──────────────────────────────────────────────────────────── */
.large{width:var(--large);margin-inline:auto}

/* ── SOMMAIRE ─────────────────────────────────────────────────────────
   Deux colonnes qui deviennent une seule sous 620 px. La borne est posee en
   `minmax(0,1fr)` et non en `1fr` : une colonne de grille a une largeur minimale
   implicite egale a son contenu, et c'est exactement ce qui a affame une colonne
   voisine ailleurs dans ce fichier le meme jour. Meme cause, corrigee d'avance. */
.sommaire{margin-block:1.6rem 3.4rem;padding:1.5rem 1.7rem;border:1px solid var(--trait);
  border-radius:.9rem;background:var(--plan-2)}
.sommaire h2{font-family:var(--titre);font-size:1.05rem;font-weight:600;color:var(--encre-douce);
  margin:0 0 1rem;letter-spacing:.01em}
.sommaire ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));counter-reset:som}
.sommaire li{counter-increment:som}
.sommaire a{display:flex;gap:.7rem;align-items:center;min-height:44px;padding:.6rem .55rem;border-radius:.4rem;
  color:var(--encre-douce);text-decoration:none;font-size:.93rem;
  transition:background .2s var(--lent),color .2s var(--lent)}
.sommaire a::before{content:counter(som,decimal-leading-zero);font-family:var(--chiffre);
  font-size:.78rem;color:var(--encre-tue);flex:none}
.sommaire a:hover,.sommaire a:focus-visible{background:var(--plan-3);color:var(--encre)}
.sommaire a:hover::before,.sommaire a:focus-visible::before{color:var(--signature)}
.sommaire-note{margin:1.1rem 0 0;font-size:.85rem;color:var(--encre-tue);max-width:78ch}
@media (forced-colors:active){
  .sommaire{border:1px solid CanvasText !important}
  .sommaire a:hover,.sommaire a:focus-visible{background:Highlight;color:HighlightText}
}
section{padding-block:clamp(3.2rem,6vw,5.6rem)}
section + section{border-top:1px solid var(--trait)}

h1,h2,h3{font-family:var(--titre);font-weight:600;line-height:1.14;letter-spacing:-.018em;margin:0}
h2{font-size:clamp(1.65rem,3.2vw,2.5rem);margin-bottom:.5rem}
h3{font-size:clamp(1.12rem,1.7vw,1.35rem)}
p{margin:0 0 1rem}
.chapo{color:var(--encre-douce);font-size:1.03rem;max-width:66ch;margin-bottom:2.4rem}

.oeil{ /* sur-titre : la seule majuscule espacée de la page */
  font-family:var(--chiffre);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signature);margin-bottom:.85rem;display:block;
}
.num{font-family:var(--chiffre);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ═══ EN-TÊTE ═══════════════════════════════════════════════════════ */
.tete{padding-block:clamp(2.4rem,5vw,3.6rem) 0}
.bandeau{display:flex;flex-wrap:wrap;gap:.75rem 1.6rem;align-items:baseline;
  padding-bottom:1.6rem;border-bottom:1px solid var(--trait)}
.marque{font-family:var(--titre);font-size:1.35rem;letter-spacing:.02em;color:var(--encre)}
.marque b{color:var(--signature);font-weight:600}
.periode{font-family:var(--chiffre);font-size:.78rem;color:var(--encre-tue);letter-spacing:.05em}

.fiabilite{display:flex;gap:.65rem;align-items:flex-start;margin-top:1.5rem;padding:.85rem 1.05rem;
  background:linear-gradient(180deg,rgba(240,180,41,.07),transparent);
  border:1px solid rgba(240,180,41,.24);border-radius:11px;font-size:.87rem;color:var(--encre-douce)}
.fiabilite svg{flex:0 0 auto;width:17px;height:17px;margin-top:.18rem}
.fiabilite p{min-width:0}
.fiabilite b{color:var(--garde);font-weight:620}

/* ═══ VERDICT — le moment mémorable ═════════════════════════════════ */
.verdict{margin-top:2.6rem;position:relative}
.halo{position:absolute;left:-8%;top:-14%;width:56%;height:130%;pointer-events:none;opacity:.8;
  background:radial-gradient(50% 50% at 50% 50%,rgba(94,231,255,.13),transparent 70%);
  filter:blur(30px)}
@keyframes respire{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes trace{to{stroke-dashoffset:0}}

h1{font-size:clamp(2.1rem,5.6vw,4rem);max-width:26ch}
h1 em{font-style:normal;color:var(--signature)}
.sous-verdict{margin-top:1.2rem;font-size:clamp(1rem,1.5vw,1.15rem);color:var(--encre-douce);max-width:60ch}

.regimes{display:grid;gap:1px;margin-top:2.4rem;background:var(--trait);
  border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.regime{background:var(--plan-2);padding:1.15rem 1.25rem;position:relative}
.regime::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,231,255,.5),transparent)}
.regime dt{font-family:var(--chiffre);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-tue);margin-bottom:.5rem}
.regime dd{margin:0;font-size:1.06rem;font-weight:600;color:var(--encre)}
.regime dd span{display:block;font-size:.8rem;font-weight:400;color:var(--encre-douce);margin-top:.28rem;line-height:1.5}

/* ═══ CLASSEMENT ════════════════════════════════════════════════════ */
.podium{display:grid;gap:1.1rem;margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.rang{position:relative;background:linear-gradient(165deg,var(--plan-3),var(--plan-2) 55%);
  border:1px solid var(--trait-vif);border-radius:var(--r);padding:1.5rem 1.35rem 1.35rem;overflow:hidden}
.rang::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,transparent,var(--signature),transparent);opacity:.85}
.rang:first-child::before{opacity:1;height:3px}
.rang .place{font-family:var(--chiffre);font-size:.78rem;letter-spacing:.16em;color:var(--signature);text-transform:uppercase}
.rang .actif{font-family:var(--titre);font-size:1.75rem;margin:.45rem 0 .1rem;letter-spacing:-.01em}
.rang .sens{font-size:.92rem;font-weight:650;letter-spacing:.03em}
.rang .pourquoi{font-size:.9rem;color:var(--encre-douce);margin-top:.85rem;line-height:1.6}
.sens.h{color:var(--haut)}.sens.b{color:var(--bas)}.sens.n{color:var(--garde)}
.cote{display:flex;gap:1.4rem;margin-top:1.05rem;padding-top:.95rem;border-top:1px solid var(--trait)}
.cote div{font-size:.78rem;color:var(--encre-douce);font-family:var(--chiffre);letter-spacing:.04em}
.cote b{display:block;font-size:1.22rem;color:var(--encre);margin-top:.15rem;letter-spacing:-.02em}

/* ═══ GRAPHIQUES ════════════════════════════════════════════════════ */
figure{margin:0}
figcaption{font-size:.82rem;color:var(--encre-tue);margin-top:1rem;line-height:1.6;max-width:74ch}
.cadre{background:var(--plan-1);border:1px solid var(--trait);border-radius:var(--r);
  padding:1.5rem 1.25rem;overflow-x:auto}
/* Seuls les GRAPHIQUES remplissent leur cadre. Une regle `svg{width:100%}` globale
   ecrasait l'attribut width des icones : une icone de 17 px se rendait a 1 144 px. */
figure svg{display:block;width:100%;height:auto;overflow:visible;forced-color-adjust:none}
/* Sous cette largeur, l'echelle rendrait les etiquettes illisibles (5 px effectifs) :
   on garde une largeur minimale lisible et le graphique defile horizontalement. */
@media (max-width:720px){ figure svg{min-width:800px} }
.astuce{display:none;color:var(--signature);font-family:var(--chiffre);font-size:.78rem;margin-bottom:.5rem}
/* La mention accompagne TOUJOURS la couleur : une information portee par la seule couleur
   est invisible pour qui ne la distingue pas, et disparait en contraste force. */
.souscrit{display:block;font-size:.78rem;letter-spacing:.02em;text-transform:none;opacity:.85}
.mono{font-family:var(--chiffre);font-size:max(12px,.95em);color:var(--encre-douce);word-break:break-all}
@media (max-width:720px){ .astuce{display:block} }
.axe{stroke:var(--trait-vif);stroke-width:1}
.etiq{font-family:var(--chiffre);font-size:15px;fill:var(--encre-douce);font-variant-numeric:tabular-nums}
.etiq-fort{fill:var(--encre);font-weight:600}
.etiq-menu{font-family:var(--chiffre);font-size:13.5px;fill:var(--encre-tue)}

/* ═══ FICHES ════════════════════════════════════════════════════════ */
.fiches{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.fiche{background:var(--plan-2);border:1px solid var(--trait);border-radius:var(--r);
  padding:1.35rem 1.3rem;position:relative;overflow:hidden;container-type:inline-size}
.fiche::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--trait-vif) 30%,var(--trait-vif) 70%,transparent)}
.fiche.retenue{border-color:var(--signature-sourde)}
.fiche.retenue::before{background:linear-gradient(90deg,transparent,var(--signature),transparent);height:2px}
.fiche-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.35rem}
.fiche h3{letter-spacing:-.005em}
.puce{font-family:var(--chiffre);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:99px;white-space:nowrap;border:1px solid currentColor}
.puce.h{color:var(--haut)}.puce.b{color:var(--bas)}.puce.n{color:var(--garde)}
.conv{display:flex;align-items:baseline;gap:.55rem;margin:.75rem 0 .2rem}
.conv .p{font-family:var(--chiffre);font-size:2.1rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.conv .br{font-size:.82rem;color:var(--encre-tue);font-family:var(--chiffre)}
/* Pas d'`overflow:hidden` ici : le repere de reference (`u`) deborde volontairement
   de 3 px en haut et en bas. Clippe, il se confondait avec le bord du remplissage —
   or la comparaison conviction / reference est ce que toute la page sert a montrer. */
.jauge{height:5px;border-radius:99px;background:var(--plan-3);margin:.85rem 0 1.05rem;position:relative}
.jauge i{position:absolute;inset-block:0;left:0;border-radius:99px;display:block}
.jauge u{position:absolute;inset-block:-3px;width:2px;background:var(--encre-douce);text-decoration:none}
.meca{font-size:.9rem;color:var(--encre-douce);line-height:1.62;margin:0 0 .95rem}
.meca b{color:var(--encre);font-weight:600}
.detail{border-top:1px solid var(--trait);padding-top:.85rem;display:grid;gap:.5rem}
.ligne{display:grid;grid-template-columns:8.4rem 1fr;gap:.7rem;font-size:.83rem;align-items:start}
.ligne dt{font-family:var(--chiffre);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--encre-tue);padding-top:.1rem}
.ligne dd{margin:0;color:var(--encre-douce)}
.ligne dd .num{color:var(--encre)}
/* La colonne de valeurs tombait a ~25 caracteres par ligne quand la fiche est
   etroite. On interroge la largeur de la FICHE, pas celle de l'ecran : a 1440 px
   une fiche ne fait que 380 px, donc aucune requete de viewport ne pouvait le voir. */
@container (max-width:430px){ .ligne{grid-template-columns:1fr;gap:.15rem} }
@media (max-width:420px){.ligne{grid-template-columns:1fr;gap:.15rem}}

/* ═══ CALENDRIER ════════════════════════════════════════════════════ */
.jours{display:grid;gap:0;border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
.jour{display:grid;grid-template-columns:8.6rem 1fr;gap:1.2rem;padding:1.15rem 1.3rem;background:var(--plan-2);
  border-top:1px solid var(--trait)}
.jour:first-child{border-top:0}
.jour.pivot{background:linear-gradient(100deg,rgba(94,231,255,.09),var(--plan-2) 46%);position:relative}
.jour.pivot::before{content:"";position:absolute;left:0;inset-block:0;width:3px;background:var(--signature)}
.jour-quand{font-family:var(--chiffre);font-size:.82rem;color:var(--encre-douce);letter-spacing:.02em}
.jour-quand b{display:block;color:var(--encre);font-size:.95rem;letter-spacing:-.01em;margin-bottom:.15rem}
.evt{margin-bottom:.75rem}
.evt:last-child{margin-bottom:0}
.evt-titre{font-weight:600;font-size:.94rem}
.evt-chiffres{font-family:var(--chiffre);font-size:.8rem;color:var(--encre-douce);margin-top:.2rem}
.evt-jeu{font-size:.85rem;color:var(--encre-tue);margin-top:.3rem;line-height:1.55}
@media (max-width:560px){.jour{grid-template-columns:1fr;gap:.5rem}}

/* ═══ RISQUE ════════════════════════════════════════════════════════ */
.tableau{width:100%;border-collapse:collapse;font-size:.9rem}
.tableau caption{text-align:left;color:var(--encre-tue);font-size:.84rem;padding-bottom:.85rem;line-height:1.55}
.tableau th,.tableau td{padding:.78rem .9rem;text-align:left;border-bottom:1px solid var(--trait);vertical-align:top}
.tableau thead th{font-family:var(--chiffre);font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--encre-tue);font-weight:500;white-space:nowrap}
/* En-tete de LIGNE : sans lui, un lecteur d'ecran annonce « +0,929 » avec sa colonne
   mais sans dire de quelle paire d'actifs il s'agit. */
.tableau tbody th,.tableau tfoot th{font-weight:600;color:var(--encre);text-align:left}
.tableau td:last-child,.tableau th:last-child{text-align:right}
.tableau tbody tr:last-child td{border-bottom:0}
.tableau tfoot td{border-top:1px solid var(--trait-vif);border-bottom:0;font-weight:650;color:var(--encre);padding-top:.9rem}
.rouleau{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ═══ NOTES & LEXIQUE ═══════════════════════════════════════════════ */
.note{border-left:2px solid var(--signature-sourde);padding:.15rem 0 .15rem 1.15rem;
  color:var(--encre-douce);font-size:.93rem;margin:1.6rem 0;max-width:74ch}
.note b{color:var(--encre)}
.note.garde{border-color:var(--garde)}

.lexique{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);
  border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.mot{background:var(--plan-2);padding:1.15rem 1.25rem}
.mot dt{font-weight:650;color:var(--signature);margin-bottom:.35rem;font-size:.95rem}
.mot dd{margin:0;font-size:.88rem;color:var(--encre-douce);line-height:1.6}

.veille{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
/* La colonne de gauche est BORNEE, et elle l'est a toutes les largeurs.
   Defaut mesure le 2026-08-10 a 768 px : ecrite `auto 1fr` avec un libelle en `nowrap`, la
   premiere colonne prend la largeur de son texte. Un intitule long a donc pris 692 px des 707
   disponibles, laissant 15 px au paragraphe -- qui s'est empile a UN CARACTERE PAR LIGNE.
   Le correctif existait deja... sous `max-width:620px` uniquement, avec ce commentaire :
   « sinon le prochain intitule un peu long rouvrirait le meme defaut ». Il l'a rouvert, un
   point de rupture plus haut. La lecon : un correctif portee par une media query ne ferme pas
   une classe de defauts, il la deplace. La borne est desormais inconditionnelle. */
.veille li{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:.95rem;align-items:start;
  font-size:.94rem;color:var(--encre-douce)}
/* `> b` et non `b` : cette regle habille le LIBELLE de la colonne de gauche, qui est un
   enfant direct du `li`. Ecrite sur la balise nue, elle attrapait aussi les `<b>` d'emphase
   places dans le texte et leur interdisait de se couper -- une phrase entiere en `nowrap`
   deborde de 500 px des qu'elle est un peu longue. Cibler le ROLE, jamais la balise. */
.veille li > b{color:var(--encre);font-family:var(--chiffre);font-size:.83rem;padding-top:.12rem;
  text-wrap:balance}
.veille li > span{min-width:0}
/* La colonne de gauche est en `auto` et son libellé en `nowrap` : un intitulé un peu
   long y poussait tout le texte hors de l'écran. On empile plutôt que de raccourcir
   le libellé — sinon le prochain intitulé un peu long rouvrirait le même défaut. */
@media (max-width:620px){
  .veille li{grid-template-columns:1fr;gap:.25rem}
  .veille li > b{white-space:normal}
}

.maj{border:1px dashed var(--trait-vif);border-radius:var(--r);padding:1.6rem 1.4rem;
  color:var(--encre-tue);font-size:.92rem;text-align:center}

/* ═══ Le bloc du jour — il ouvre la page parce que c'est ce qui a changé ═══ */
.jour-bloc{background:linear-gradient(180deg,var(--plan-2),var(--plan-1));
  border:1px solid var(--trait-vif);border-radius:var(--r);padding:1.7rem 1.5rem;margin:0 0 2.2rem}
.jour-bloc .quand{font-family:var(--chiffre);font-size:.77rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signature);display:block;margin-bottom:.9rem}
.jour-bloc h2,.jour-bloc h3{font-family:var(--titre);font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:600;
  letter-spacing:-.01em;line-height:1.24;margin:0 0 .9rem;color:var(--encre)}
.jour-bloc p{margin:0 0 .9rem;color:var(--encre-douce);max-width:74ch}
.jour-bloc p:last-child{margin-bottom:0}
.jour-bloc b{color:var(--encre)}
.surveille{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.7rem}
.surveille li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  padding:.75rem .9rem;background:var(--plan-1);border:1px solid var(--trait);border-radius:10px}
.surveille li > b{color:var(--signature);font-family:var(--chiffre);font-size:.8rem;
  white-space:nowrap;padding-top:.16rem}
.surveille span{color:var(--encre-douce);font-size:.92rem}
@media (max-width:620px){
  .surveille li{grid-template-columns:1fr;gap:.3rem}
  .surveille li > b{white-space:normal}
}

/* ═══ Le glossaire d'entree ══════════════════════════════════════════
   Remonte EN TETE de page le 2026-08-11. Ces definitions vivaient au
   milieu de la section « duel », soit 200 lignes APRES la premiere
   occurrence des mots qu'elles definissent : le lecteur decrochait a la
   troisieme phrase de la page et ne le rattrapait jamais.
   `<details>` natif : replie sans JS, ouvert par defaut, donc rien n'est
   cache a qui lit en descendant. */
.mots-cles{background:var(--plan-1);border:1px solid var(--trait);
  border-radius:var(--r);padding:1.15rem 1.3rem;margin:1.5rem 0 0}
.mots-cles > summary{font-family:var(--titre);font-size:1.05rem;font-weight:600;
  color:var(--encre);cursor:pointer;line-height:1.5}
.mots-cles > summary:focus-visible{outline:2px solid var(--signature);outline-offset:3px;border-radius:4px}
.mots-cles dl{margin:1.1rem 0 0;display:grid;gap:.85rem}
.mots-cles dt{font-weight:600;color:var(--encre);font-size:.95rem}
.mots-cles dd{margin:.25rem 0 0;color:var(--encre-douce);font-size:.93rem;line-height:1.8}
.mots-cles dd b{color:var(--encre)}

/* ═══ Les trois marches de la decision ═══════════════════════════════
   REMPLACE le bloc `.duel` (retire le 2026-08-11). Deux colonnes face a
   face, l'une coloree en --garde et l'autre en --signature, METTAIENT EN
   SCENE deux camps -- pendant que le texte de la meme section depensait
   29 000 caracteres a expliquer qu'il n'y en a qu'un. La forme disait le
   contraire du fond, et c'est la forme qui gagne a la lecture. Ce qui la
   remplace ORDONNE au lieu d'opposer : trois marches numerotees, qu'on
   descend toujours dans le meme sens. Aucune information perdue -- les
   deux horizons sont passes dans les etiquettes du schema maree/vague. */
.marches{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:.75rem;counter-reset:m}
.marches li{counter-increment:m;position:relative;background:var(--plan-1);
  border:1px solid var(--trait);border-left:3px solid var(--signature);
  border-radius:var(--r);padding:.95rem 1.1rem .95rem 3.3rem;font-size:.94rem;
  color:var(--encre-douce);line-height:1.75}
.marches li::before{content:counter(m);position:absolute;left:1.15rem;top:.85rem;
  font-family:var(--chiffre);font-size:1.2rem;font-weight:600;color:var(--signature)}
.marches li b{color:var(--encre)}
.marches li:nth-child(2){border-left-color:var(--encre-douce)}
.marches li:nth-child(3){border-left-color:var(--garde)}
.marches li:nth-child(2)::before{color:var(--encre-douce)}
.marches li:nth-child(3)::before{color:var(--garde)}
/* Le decalage DIT la descente. Supprime sous 620 px : a cette largeur il
   mange la colonne de texte au lieu de l'ordonner. */
@media (min-width:621px){
  .marches li:nth-child(2){margin-left:1.4rem}
  .marches li:nth-child(3){margin-left:2.8rem}
}

/* ═══ Le visuel d'ouverture — embarqué, aucune requête réseau ═══ */
.hero-visuel{position:relative;margin:2rem 0 0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--trait)}
.hero-visuel img{display:block;width:100%;height:auto;aspect-ratio:1376/768;object-fit:cover}
.hero-visuel figcaption{margin:0;padding:.85rem 1.1rem;background:var(--plan-1);
  border-top:1px solid var(--trait);max-width:none}

/* ═══ Schémas pédagogiques ═══ */
.sc-fond{fill:var(--plan-2)}
.sc-trait{stroke:var(--trait-vif);fill:none}
.sc-axe{stroke:var(--trait);fill:none;stroke-width:1}
.sc-prix{fill:none;stroke:var(--encre);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.sc-sig{stroke:var(--signature)}
.sc-h{stroke:var(--haut)}
.sc-b{stroke:var(--bas)}
.sc-zone{fill:var(--bas);opacity:.13}
main > section:not(:first-of-type){content-visibility:auto;contain-intrinsic-size:auto 900px}
.sc-course{fill:var(--signature);opacity:.42}
.sc-court{opacity:.20}
.sc-seuil{stroke:var(--garde);stroke-width:2.4;stroke-linecap:round}
.sc-groupe{fill:var(--signature);opacity:.10}
.sc-groupe-n{fill:var(--encre-tue);opacity:.10}
.sc-cadre-sig{fill:none;stroke:var(--signature);stroke-width:1.4;opacity:.6}
.sc-t{fill:var(--encre-douce);font-family:var(--texte);font-size:12.5px}
.sc-t-fort{fill:var(--encre);font-family:var(--texte);font-size:13px;font-weight:600}
.sc-t-num{fill:var(--encre-tue);font-family:var(--chiffre);font-size:11.5px}
.sc-t-sig{fill:var(--signature);font-family:var(--chiffre);font-size:11.5px;letter-spacing:.05em}
/* Ajoutes le 2026-08-11 pour les schemas maree/vague, nuage et calendrier. */
.sc-maree{fill:none;stroke:var(--encre-douce);stroke-width:3;stroke-linecap:round}
.sc-vague{fill:none;stroke:var(--signature);stroke-width:2.4;stroke-linecap:round}
.sc-bande{fill:var(--plan-2);opacity:.55}
.sc-pt{fill:var(--signature)}
.sc-pt-mort{fill:var(--garde)}
.sc-pt-nul{fill:var(--encre-tue)}
.sc-quad{stroke:var(--trait);stroke-width:1;stroke-dasharray:4 5;fill:none}
.sc-ev{stroke:var(--garde);stroke-width:1.6;stroke-dasharray:5 4}
.sc-vie{fill:var(--signature);opacity:.30}
.sc-vie-floue{fill:var(--signature);opacity:.13}
.sc-vie-morte{fill:var(--garde);opacity:.26}
.sc-t-mini{fill:var(--encre-tue);font-family:var(--texte);font-size:10.5px}
.sc-lien{stroke:var(--encre-tue);stroke-width:1}
@media (forced-colors:active){
  /* RETIRE le 2026-08-10. Ces quatre regles forcaient les couleurs du SVG a CanvasText,
     alors que `.cadre{forced-color-adjust:none}` (plus bas) garde deliberement le fond
     SOMBRE du cadre. Sous un theme de contraste eleve CLAIR, CanvasText vaut NOIR : on
     dessinait donc en noir sur un fond reste noir -- contraste mesure 1,07:1, les sept
     schemas devenaient vides. Le correctif du bas et celui du haut se contredisaient ;
     seul le bas est juste, parce que `forced-color-adjust` est HERITE et que les neuf
     schemas sont tous dans un `.cadre`. */
  .hero-visuel img{forced-color-adjust:none}
  .jour-bloc,.marches li,.surveille li{border:1px solid CanvasText !important}
}

footer{padding-block:2.8rem 3.6rem;border-top:1px solid var(--trait);
  color:var(--encre-tue);font-size:.83rem;line-height:1.7}
footer p{max-width:80ch}

/* ═══ MOUVEMENT ═══════════════════════════════════════════════════════
   Ecrit en `no-preference` et non en `reduce` : le mouvement n'EXISTE pas
   pour qui demande le calme, donc il n'y a rien a desactiver — et donc
   aucune regle d'annulation qu'une specificite plus forte pourrait ecraser.
   La revelation reste une amelioration : sans JS, tout est deja visible. */
@media (prefers-reduced-motion:no-preference){
  .halo{animation:respire 9s var(--lent) infinite}
  /* Le trace se DESSINE : la maree d'abord, la vague ensuite, dans l'ordre ou
     on lit le marche. Deux verrous, et le second a failli manquer :
     ① le bloc est en `no-preference`, donc en mode calme les courbes sont
       pleines des la premiere image -- rien a desactiver, rien d'ampute ;
     ② le selecteur exige `.js .revele.vu`. Sans lui, `stroke-dashoffset:1400`
       serait applique SANS l'animation qui le ramene a zero quand JS est
       absent : les deux courbes seraient INVISIBLES sur une page dont le
       contenu doit exister sans JS. La regle ne s'arme donc qu'au moment
       exact ou le JS revele le bloc. La longueur (1400) majore les deux chemins. */
  .js .revele.vu .sc-maree,.js .revele.vu .sc-vague{stroke-dasharray:1400;
    stroke-dashoffset:1400;animation:trace 1.9s var(--lent) forwards}
  .js .revele.vu .sc-vague{animation-delay:.85s}
  .js .revele{opacity:0;transform:translateY(18px)}
  .js .revele.vu{opacity:1;transform:none;transition:opacity .7s var(--lent),transform .7s var(--lent)}
  .js .revele.vu:nth-child(2){transition-delay:.06s}
  .js .revele.vu:nth-child(3){transition-delay:.12s}
  .js .revele.vu:nth-child(4){transition-delay:.18s}
}
/* Le bouton fige tout mouvement d'ambiance, y compris la nappe de particules. */
html.fige .halo{animation:none}
html.fige #nappe{display:none}
/* En mode calme il n'y a aucun mouvement : un controle de pause n'aurait rien a controler. */
@media (prefers-reduced-motion:reduce){ .js .ctrl{display:none} }

/* ═══ CONTRASTES FORCES (Windows contraste eleve) ══════════════════════
   Les lueurs et ombres sont supprimees par le systeme : les separations
   doivent alors venir de bordures reelles, pas de la lumiere.
   `!important` est ici DELIBERE, et c'est le seul endroit du fichier ou il apparait.
   Sans lui, `.fiche` (0,1,0) est ecrase par `.fiche.retenue` (0,2,0), `.note` par
   `.note.garde`, et `.jauge i` par son style en ligne : les bordures de secours ne
   s'appliqueraient JAMAIS, precisement dans le mode ou elles sont l'unique separation.
   Aligner les specificites une par une serait une enumeration ouverte — donc fragile ;
   ceci ferme la classe entiere, et reste confine au mode contraste eleve. */
@media (forced-colors:active){
  .ciel{display:none !important}
  .rang,.fiche,.regime,.jour,.cadre,.mot,.maj,.jours,.lexique,.regimes,.ctrl,
  .fiabilite,.note,.tableau td,.tableau th{border:1px solid CanvasText !important}
  /* Le cadre garde son fond sombre AVEC le graphique : sous un theme de contraste
     eleve CLAIR, forcer le fond en Canvas beige tout en laissant au SVG ses couleurs
     de theme sombre rendait les etiquettes illisibles (~1,5:1). Les deux vont ensemble. */
  .cadre{forced-color-adjust:none}
  .jauge{border:1px solid CanvasText !important;background:Canvas !important}
  .jauge i{background:Highlight !important;forced-color-adjust:none}
  .jauge u{background:CanvasText !important}
  :focus-visible{outline:3px solid Highlight !important;outline-offset:2px}
  .saut{border:2px solid CanvasText !important}
}
@media print{
  .ciel,.saut,.ctrl{display:none}
  body{background:#fff;color:#000}
}