/* ══════════════════════════════════════════════════════════════════════════
   CODEX — feuille de style.

   Les jetons viennent d'ORBITE (orbite.css, 30.07.2026) et gardent sa règle :
   de NUIT c'est la LUMIÈRE qui porte l'information, de JOUR c'est l'ÉPAISSEUR
   et la DENSITÉ D'ENCRE. Le thème clair n'est pas le sombre inversé.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --o-lourd: cubic-bezier(.22,.61,.16,1);
  --o-tres-lourd: cubic-bezier(.16,.84,.12,1);
  --o-court:320ms; --o-moyen:560ms; --o-long:880ms;
  --o-mono: ui-monospace,"JetBrains Mono",Menlo,monospace;
  --o-sans: -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;
  --tete:56px;
}

/* 08.08.2026 — recalé sur ORBITE/TYPOLOGIE.md (échelle N = L* ÷ 10).
   Le fond était à N0,16 : quasiment le noir absolu, donc plus rien de possible
   en dessous — aucune ombre, aucun creux, et la lueur devenait le seul relief.
   L'encre forte était à N9,57, soit 17:1 : trois fois ce qu'il faut pour lire.
   Fond → N1,5, encre forte → N8,5 (10,3:1, toujours AAA). Valeurs produites
   par `niveauVersHexa(n, {h:212, c:.16})` — ne pas les retoucher à l'œil. */
[data-orbite="nuit"]{
  --fond:#24262a; --fond2:#2e3036; --fond3:#34373d;   /* N1,5 · N2,0 · N2,3 */
  --encre:#c3ccda; --encre-fort:#cad5ec; --encre-faible:#8a91a1;  /* N8,2 · N8,5 · N6,0 */
  --trait:rgba(143,212,255,.22); --trait-fort:rgba(143,212,255,.42);
  --accent:#8fd4ff; --vide:rgba(143,212,255,.16);
  --lueur:drop-shadow(0 0 6px rgba(143,212,255,.65));
  --lueur-forte:drop-shadow(0 0 14px rgba(143,212,255,.95));
  --voile:rgba(2,4,8,.80);              /* le fond n'est plus noir : plus d'alpha */
  --ep-vide:1px; --ep-plein:1.5px;
  --al-allie:#7fe3c0; --al-neutre:#7f8b9c; --al-friction:#e8b76a; --al-hostile:#e8756a; --al-inconnu:#5c6774;
  --grain:.055;
  --carte:rgba(143,212,255,.05);
  --carte-on:rgba(143,212,255,.10);
  /* NAPPE — n2 à 3,9 et non 5 : dans CODEX le texte du seuil et des dossiers
     pose DIRECTEMENT sur le fond, sans surface opaque pour l'en protéger.
     Au-delà de N3,92, l'encre N8,5 tombe sous 4,5:1 (mesuré, _test_nappe.mjs). */
  --o-nappe-n1:3; --o-nappe-n2:3.9;
  --o-nappe-couv:.65; --o-nappe-teinte:212; --o-nappe-chroma:.16;
}

[data-orbite="jour"]{
  --fond:#efeeea; --fond2:#f7f6f3; --fond3:#fbfaf7;   /* N10 → N9,8 : pas de blanc absolu */
  --encre:#15171a; --encre-fort:#232326; --encre-faible:#7c8288;  /* N0 → N1,4 */
  /* De jour la nappe s'inverse : sur du papier un banc est plus SOMBRE que la
     page. Une tache blanche sur du blanc n'existe pas. */
  --o-nappe-n1:8.6; --o-nappe-n2:8;
  --o-nappe-couv:.65; --o-nappe-teinte:212; --o-nappe-chroma:.05;
  --trait:#d6d4ce; --trait-fort:#a8a49b;
  --accent:#15171a; --vide:#d6d4ce;
  --lueur:none; --lueur-forte:none;
  --voile:rgba(20,22,26,.34);
  --ep-vide:1.5px; --ep-plein:4px;
  --al-allie:#0f7a5c; --al-neutre:#6b7280; --al-friction:#9a6a12; --al-hostile:#a5342a; --al-inconnu:#b3b0a8;
  --grain:.028;
  --carte:rgba(0,0,0,.022);
  --carte-on:rgba(0,0,0,.055);
}

*{box-sizing:border-box}
/* `#panneau{display:flex}` bat l'attribut `hidden` de la feuille UA : sans ce
   garde-fou, le panneau reste affiché en permanence. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font:400 14px/1.55 var(--o-sans);
  overflow:hidden;
  transition:background var(--o-moyen) var(--o-lourd), color var(--o-moyen) var(--o-lourd);
}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--fond)}

/* ── ambiance ──────────────────────────────────────────────────────────── */
#poussiere{position:fixed;inset:0;z-index:0;pointer-events:none}
#grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain);
  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");
  mix-blend-mode:overlay;
  transition:opacity var(--o-long) var(--o-lourd);
}
body::after{ /* vignette : le cadre se ferme, façon visée */
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,transparent 42%,rgba(0,0,0,.55) 100%);
}
[data-orbite="jour"] body::after{background:radial-gradient(120% 90% at 50% 42%,transparent 55%,rgba(60,58,52,.18) 100%)}

/* ══ SEUIL ══════════════════════════════════════════════════════════════ */
#seuil{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:var(--fond);
  transition:opacity var(--o-long) var(--o-lourd), clip-path 1s var(--o-tres-lourd);
  clip-path:circle(150% at 50% 50%);
}
#seuil.parti{opacity:0;pointer-events:none;clip-path:circle(0% at 50% 46%)}
.seuil-in{display:grid;justify-items:center;gap:26px;text-align:center;padding:24px}
.seuil-glyphe{filter:var(--lueur)}
#seuilSigil{opacity:0;animation:sigilIn 1.6s var(--o-tres-lourd) .15s forwards}
@keyframes sigilIn{from{opacity:0;transform:scale(.86) rotate(-8deg)}to{opacity:1;transform:none}}
.seuil-sur{margin:0 0 4px;font:500 10px/1 var(--o-mono);letter-spacing:.32em;text-transform:uppercase;color:var(--encre-faible)}
#seuil h1{
  margin:0;font:300 clamp(48px,11vw,104px)/1 var(--o-sans);letter-spacing:.26em;
  text-indent:.26em;color:var(--encre-fort);
}
#seuil h1 span{display:inline-block;opacity:0;transform:translateY(.4em);animation:lettre .9s var(--o-tres-lourd) forwards}
@keyframes lettre{to{opacity:1;transform:none}}
.seuil-sous{margin:10px 0 0;font:400 12px/1.6 var(--o-mono);color:var(--encre-faible);letter-spacing:.06em;
  opacity:0;animation:fadeUp .9s var(--o-lourd) .9s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.seuil-go{
  position:relative;margin-top:12px;padding:13px 34px;font:500 11px/1 var(--o-mono);
  letter-spacing:.3em;color:var(--encre-fort);border:1px solid var(--trait-fort);
  opacity:0;animation:fadeUp .9s var(--o-lourd) 1.25s forwards;overflow:hidden;
}
.seuil-go i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--o-moyen) var(--o-tres-lourd)}
.seuil-go span{position:relative;z-index:1;transition:color var(--o-court)}
.seuil-go:hover i{transform:scaleX(1)}
.seuil-go:hover span{color:var(--fond)}
/* La sortie du seuil. Discrète, mais jamais absente : ce qui s'ouvre se
   ferme d'un geste évident. Le mot s'ouvre en chasse au survol — même geste
   que le retour des pages légales du site, une seule idée aux deux bouts. */
.seuil-retour{display:inline-block;margin-top:22px;font:400 10.5px/1 var(--o-mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--encre-faible);
  text-decoration:none;transition:color var(--o-court),letter-spacing var(--o-court)}
.seuil-retour:hover,.seuil-retour:focus-visible{color:var(--encre-fort);letter-spacing:.3em;outline:none}

/* ══ TÊTE ═══════════════════════════════════════════════════════════════ */
#tete{
  position:fixed;top:0;left:0;right:0;height:var(--tete);z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 14px;border-bottom:1px solid var(--trait);
  background:color-mix(in srgb,var(--fond) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
}
/* La tête a une hauteur fixe (le calage de #scene en dépend) : elle ne doit
   JAMAIS passer à la ligne. C'est la zone gauche qui se comprime. */
.tete-g{flex:1 1 auto;overflow:hidden}
.tete-d{flex:0 0 auto}
.tete-g,.tete-d{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap}
#marque{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 6px;font:500 12px/1 var(--o-mono);
  letter-spacing:.24em;color:var(--encre-fort)}
#marque canvas{filter:var(--lueur);transition:transform var(--o-moyen) var(--o-tres-lourd)}
#marque:hover canvas{transform:rotate(120deg)}

#factions{display:flex;gap:2px;margin-left:10px;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;min-width:0}
#factions::-webkit-scrollbar{display:none}
#factions button{flex:0 0 auto}
#marque{flex:0 0 auto}
/* en édition trois boutons de plus arrivent : la recherche cède la place */
body.edit #cherche{width:clamp(120px,14vw,190px)}
#factions button{
  position:relative;padding:7px 11px;font:500 10px/1 var(--o-mono);letter-spacing:.15em;
  color:var(--encre-faible);border:1px solid transparent;transition:color var(--o-court)
}
#factions button b{font-weight:500;opacity:.5;margin-left:6px}
#factions button::after{content:'';position:absolute;left:11px;right:11px;bottom:4px;height:var(--ep-vide);
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--o-court) var(--o-tres-lourd)}
#factions button:hover{color:var(--encre)}
#factions button.on{color:var(--encre-fort)}
#factions button.on::after{transform:scaleX(1);height:var(--ep-plein)}

#chercheWrap{position:relative;display:flex;align-items:center}
#cherche{
  width:clamp(150px,22vw,320px);padding:8px 40px 8px 12px;background:var(--carte);
  border:1px solid var(--trait);color:var(--encre);font:400 12px/1 var(--o-mono);
  outline:none;transition:border-color var(--o-court),width var(--o-moyen) var(--o-lourd)
}
#cherche:focus{border-color:var(--trait-fort);width:clamp(220px,30vw,420px)}
#cherche::placeholder{color:var(--encre-faible)}
.cherche-n{position:absolute;right:10px;font:500 10px/1 var(--o-mono);color:var(--accent);pointer-events:none}

.ic{
  display:flex;align-items:center;gap:7px;padding:8px 11px;font:500 10px/1 var(--o-mono);
  letter-spacing:.16em;color:var(--encre-faible);border:1px solid var(--trait);
  transition:color var(--o-court),border-color var(--o-court),background var(--o-court)
}
.ic:hover{color:var(--encre-fort);border-color:var(--trait-fort)}
.ic-edit.on{color:var(--fond);background:var(--accent);border-color:var(--accent)}
[data-orbite="jour"] .ic-edit.on{color:#f1f1f1}

/* ══ SCÈNE ══════════════════════════════════════════════════════════════ */
#scene{
  position:fixed;inset:var(--tete) 0 0 0;z-index:5;
  display:grid;grid-template-columns:minmax(280px,var(--col,360px)) 1fr;
  transition:grid-template-columns var(--o-long) var(--o-tres-lourd);
}
body.ouvert #scene{--col:300px}

/* ── ROSTER ─────────────────────────────────────────────────────────────── */
#roster{border-right:1px solid var(--trait);display:flex;flex-direction:column;min-height:0}
/* Deux rangées, pas une. Six tris ne tiennent pas sur une ligne à côté du
   compteur dans une colonne de 300 px : ils débordaient sous le panneau
   dossier — invisibles. La rangée du bas s'enroule si besoin, et la jauge
   d'accent VOYAGE d'un tri à l'autre au lieu de sauter : le déplacement dit
   d'où on vient. */
.roster-tete{
  display:flex;flex-direction:column;gap:7px;
  padding:9px 12px 0;border-bottom:1px solid var(--trait);
  font:500 10px/1 var(--o-mono);letter-spacing:.14em;color:var(--encre-faible);flex:0 0 auto
}
.rt-haut{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
#rosterN{flex:0 0 auto}
/* la phrase qui dit ce que le tri fait — le mot seul ne se comprend pas */
#triDit{
  flex:1 1 auto;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 9px/1.3 var(--o-mono);letter-spacing:.04em;color:var(--encre-faible);opacity:.72;
  transition:opacity var(--o-court)
}
#triDit.mue{opacity:0}
.tri{position:relative;display:flex;flex-wrap:wrap;gap:0 2px;padding-bottom:var(--ep-plein)}
.tri button{padding:5px 6px 6px;font:500 9px/1 var(--o-mono);letter-spacing:.1em;color:var(--encre-faible);
  transition:color var(--o-court)}
.tri button:hover{color:var(--encre-fort)}
.tri button.on{color:var(--encre-fort)}
.tri-jauge{
  position:absolute;left:0;top:0;width:var(--jw,0);height:var(--ep-plein);background:var(--accent);
  transform:translate(var(--jx,0px),var(--jy,0px));pointer-events:none;opacity:var(--jo,0);
  transition:transform var(--o-moyen) var(--o-tres-lourd),width var(--o-moyen) var(--o-tres-lourd),opacity var(--o-court)
}
@media (prefers-reduced-motion:reduce){.tri-jauge{transition:none}}

#cartes{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:8px;
  display:flex;flex-direction:column;gap:5px;flex:1 1 auto}
#cartes::-webkit-scrollbar{width:8px}
#cartes::-webkit-scrollbar-thumb{background:var(--trait)}

.carte{
  position:relative;display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;
  padding:9px 11px;background:var(--carte);border:1px solid transparent;text-align:left;
  transition:background var(--o-court),border-color var(--o-court),transform var(--o-court) var(--o-lourd);
  cursor:pointer;
}
.carte::before{ /* le liseré d'alignement — la seule couleur de la liste */
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--al);
  opacity:.55;transition:opacity var(--o-court),width var(--o-court) var(--o-lourd)
}
.carte:hover{background:var(--carte-on)}
.carte:hover::before{opacity:1;width:3px}
.carte.on{background:var(--carte-on);border-color:var(--trait-fort)}
.carte.on::before{opacity:1;width:4px}
.carte.moi{border-left:0}
.carte.moi .cn::after{content:'MOI';margin-left:8px;font-size:8px;letter-spacing:.2em;color:var(--accent);vertical-align:2px}
.carte.masque{display:none}

.cs{width:44px;height:44px;display:block;opacity:.85;transition:opacity var(--o-court),filter var(--o-court)}
.carte:hover .cs,.carte.on .cs{opacity:1;filter:var(--lueur)}
/* les deux lignes sont des <span> : sans display:block, ni l'ellipsis ni le
   min-width:0 du parent ne mordent, et la carte pousse la colonne. */
.cm{min-width:0;display:block}
.cn{display:block;font:500 13px/1.2 var(--o-sans);letter-spacing:.04em;color:var(--encre-fort);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp{display:block;font:400 10px/1.3 var(--o-mono);color:var(--encre-faible);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}

/* la ligne de stats compacte : 7 traits verticaux. Vide = trait fin gris. */
.cbars{display:flex;align-items:flex-end;gap:2px;height:26px}
.cbars i{width:3px;background:var(--vide);height:100%;position:relative;overflow:hidden}
.cbars i b{position:absolute;left:0;right:0;bottom:0;background:var(--accent);
  transition:height var(--o-long) var(--o-tres-lourd)}
.carte:hover .cbars i b,.carte.on .cbars i b{filter:var(--lueur)}
.cbars.nul i{background:transparent;border-bottom:1px dotted var(--encre-faible);height:1px;align-self:center}
.cx{font:500 9px/1 var(--o-mono);color:var(--encre-faible);letter-spacing:.08em;text-align:right}

.ajout-perso{margin:6px 8px 12px;padding:11px;font:500 10px/1 var(--o-mono);letter-spacing:.2em;
  color:var(--accent);border:1px dashed var(--trait-fort);transition:background var(--o-court)}
.ajout-perso:hover{background:var(--carte-on)}

/* ── DOSSIER ───────────────────────────────────────────────────────────── */
#dossier{position:relative;overflow-y:auto;overscroll-behavior:contain;min-height:0}
#dossier::-webkit-scrollbar{width:10px}
#dossier::-webkit-scrollbar-thumb{background:var(--trait)}
.dossier-vide{
  position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:14px;
  padding:40px;text-align:center;transition:opacity var(--o-moyen)
}
.dossier-vide p{margin:0;font:400 13px/1.7 var(--o-mono);letter-spacing:.1em;color:var(--encre-faible);max-width:560px}
.dossier-vide .dv-sub{font:400 12px/1.8 var(--o-sans);letter-spacing:0}
#dossier:not([data-vide]) .dossier-vide{opacity:0;pointer-events:none}

#fiche{padding:26px 30px 90px;max-width:1080px}

/* — l'entrée directionnelle : le contenu arrive du côté d'où l'on vient — */
@keyframes entreBas{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes entreHaut{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
#fiche.dir-bas > *{animation:entreBas var(--o-long) var(--o-tres-lourd) both}
#fiche.dir-haut > *{animation:entreHaut var(--o-long) var(--o-tres-lourd) both}
#fiche > *:nth-child(1){animation-delay:0ms}
#fiche > *:nth-child(2){animation-delay:45ms}
#fiche > *:nth-child(3){animation-delay:90ms}
#fiche > *:nth-child(4){animation-delay:135ms}
#fiche > *:nth-child(5){animation-delay:180ms}
#fiche > *:nth-child(6){animation-delay:225ms}
#fiche > *:nth-child(7){animation-delay:270ms}

.f-tete{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:start;
  padding-bottom:20px;border-bottom:1px solid var(--trait);margin-bottom:24px}
.f-portrait{position:relative;width:104px;height:104px;border:1px solid var(--trait);
  display:grid;place-items:center;background:var(--carte);overflow:hidden}
/* le sigil est dessiné en 180 px pour rester net, on le réduit en CSS */
.f-portrait canvas{width:100px;height:100px;filter:var(--lueur)}
.f-portrait img{width:100%;height:100%;object-fit:cover}
.f-portrait::after{content:'';position:absolute;left:0;right:0;height:1px;background:var(--accent);
  opacity:.35;top:-2px;animation:scan 5.5s linear infinite}
@keyframes scan{to{top:104%}}
[data-orbite="jour"] .f-portrait::after{opacity:.18}
.f-portrait .vide-lab{position:absolute;bottom:4px;left:0;right:0;text-align:center;
  font:500 7px/1 var(--o-mono);letter-spacing:.18em;color:var(--encre-faible)}

.f-id h2{margin:0;font:300 clamp(28px,3.6vw,44px)/1.05 var(--o-sans);letter-spacing:.05em;color:var(--encre-fort)}
.f-id .alias{font:500 11px/1 var(--o-mono);letter-spacing:.22em;color:var(--encre-faible);margin-top:8px}
.f-id .poste{margin:9px 0 0;font:400 13px/1.5 var(--o-sans);color:var(--encre)}
.f-id .ment{margin:5px 0 0;font:400 11px/1.5 var(--o-mono);color:var(--encre-faible);letter-spacing:.03em}
.f-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.tag{padding:4px 9px;font:500 9px/1 var(--o-mono);letter-spacing:.13em;border:1px solid var(--trait);
  color:var(--encre-faible)}
.tag.al{color:var(--al);border-color:color-mix(in srgb,var(--al) 45%,transparent)}
.tag.warn{color:var(--al-friction);border-color:color-mix(in srgb,var(--al-friction) 45%,transparent)}

/* ATTACHE — le présent contre le passé (règle du 23/08, révision R-05).
   L'ex-attache est un fantôme : trait pointillé, pas de fond, elle ne doit
   jamais peser autant que la faction actuelle posée juste avant. « PARTI »,
   lui, est une alarme froide — c'est la seule des trois qui dit que la
   ligne du dessus (le poste) décrit un travail que la personne ne fait plus. */
.tag.ex{border-style:dashed;opacity:.6;letter-spacing:.1em}
.tag.sorti{color:var(--al-hostile);border-color:color-mix(in srgb,var(--al-hostile) 45%,transparent)}
.cex{font-style:normal;margin-right:6px;padding:1px 4px;font-size:9px;letter-spacing:.1em;
  color:var(--al-hostile);border:1px solid color-mix(in srgb,var(--al-hostile) 38%,transparent)}

/* ALIGNEMENT — fenêtre fermée (23/08/2026). Même doctrine que .tag.ex : la
   valeur ne se barre pas, elle se DÉSATURE. Un alignement périmé reste vrai
   pour sa période — le rayer laisserait croire qu'il n'a jamais valu. Le
   pointillé dit « ne t'appuie pas là-dessus pour aujourd'hui », rien de plus. */
.tag.al-clos{border-style:dashed;filter:saturate(.35);letter-spacing:.09em}
.al-fen{display:inline-block;margin-top:7px;font-style:normal;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-faible);opacity:.7}
.al-fen.clos{color:var(--al-friction);opacity:1;letter-spacing:.1em;text-transform:none;
  font-size:10px;border-left:2px solid color-mix(in srgb,var(--al-friction) 55%,transparent);padding-left:8px}

/* la frise : une colonne, un trait qui descend, l'attache d'aujourd'hui en
   pleine encre tout en bas. On lit le sens de la trajectoire, pas une liste. */
.att-frise{list-style:none;margin:6px 0 0;padding:0 0 0 15px;position:relative;display:grid;gap:11px}
.att-frise::before{content:'';position:absolute;left:2px;top:5px;bottom:7px;width:1px;background:var(--trait)}
.att-frise li{position:relative;font:400 11px/1.5 var(--o-sans);color:var(--encre-faible)}
.att-frise li::before{content:'';position:absolute;left:-17px;top:5px;width:5px;height:5px;
  border:1px solid var(--trait);background:var(--fond)}
.att-frise li b{color:var(--encre);font:500 10px/1 var(--o-mono);letter-spacing:.1em}
.att-frise li i{font-style:normal;opacity:.55;font:400 10px/1 var(--o-mono)}
.att-fin{display:inline-block;margin-top:2px;opacity:.5!important;font:400 10px/1.5 var(--o-sans)!important}
.att-now b{color:var(--encre-fort)}
.att-now::before{background:var(--encre-fort)!important;border-color:var(--encre-fort)!important}

/* — radar — */
.f-radar{display:grid;justify-items:center;gap:8px}
.f-radar canvas{display:block}
/* les cibles de survol du radar — invisibles, mais elles existent pour la
   souris, le clavier et le lecteur d'écran. Le sigle peint sur la toile ne
   pouvait rien faire de tout ça. */
.r-toile{position:relative}
.r-cibles{position:absolute;inset:0;pointer-events:auto}
.r-cible{position:absolute;width:36px;height:18px;margin:-9px 0 0 -18px;padding:0;
  border:0;background:none;border-radius:3px;cursor:help;-webkit-appearance:none}
.r-cible:focus-visible{outline:1px solid var(--accent);outline-offset:0}
/* la lecture en place — largeur figée sur celle du radar pour que le survol
   ne fasse pas respirer la colonne */
.rlec{width:230px;display:grid;gap:5px;cursor:help;
  border-top:1px solid var(--trait);padding-top:8px;margin-top:2px}
.rlec .rl-t{font:500 9px/1.35 var(--o-mono);letter-spacing:.1em;color:var(--encre-faible);text-align:center}
.rlec .rl-t b{color:var(--accent);font-weight:700}
.rlec .rl-t em{font-style:normal;color:var(--encre-fort);font-weight:700}
.rlec .rl-t em.nul{color:var(--encre-faible);font-weight:500}
.rlec .rl-b{position:relative;height:9px}
.rlec .rl-b i{position:absolute;left:0;right:0;top:4px;height:1px;background:var(--trait)}
.rlec .rl-b b{position:absolute;top:1px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:var(--accent);transition:left .28s cubic-bezier(.22,1,.36,1)}
.rlec .rl-p{display:flex;justify-content:space-between;font:500 8px/1 var(--o-mono);
  letter-spacing:.08em;color:var(--encre-faible);text-transform:uppercase}
.rlec[data-vide] .rl-b,.rlec[data-vide] .rl-p{opacity:0}
.rlec[data-vide]{border-top-color:transparent}
.f-radar .rlab,.f-radar .rmoy{cursor:help}
.f-radar .rlab:focus-visible,.f-radar .rmoy:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.f-radar .rlab{font:500 9px/1 var(--o-mono);letter-spacing:.16em;color:var(--encre-faible)}
.f-radar .rmoy{font:300 26px/1 var(--o-sans);color:var(--encre-fort);letter-spacing:.04em}
.f-radar .rmoy small{font:500 10px/1 var(--o-mono);color:var(--encre-faible)}

/* — onglets — */
.f-nav{display:flex;gap:1px;border-bottom:1px solid var(--trait);margin-bottom:22px;flex-wrap:wrap}
.f-nav button{position:relative;padding:10px 15px;font:500 10px/1 var(--o-mono);letter-spacing:.17em;
  color:var(--encre-faible);transition:color var(--o-court)}
.f-nav button b{font-weight:500;margin-left:7px;opacity:.45}
.f-nav button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:var(--ep-vide);
  background:var(--accent);transform:scaleX(0);transition:transform var(--o-court) var(--o-tres-lourd)}
.f-nav button:hover{color:var(--encre)}
.f-nav button.on{color:var(--encre-fort)}
.f-nav button.on::after{transform:scaleX(1);height:var(--ep-plein)}

/* — l'onglet change → le contenu glisse latéralement du côté de l'onglet — */
@keyframes ongletD{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes ongletG{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.f-corps.vd{animation:ongletD var(--o-moyen) var(--o-tres-lourd) both}
.f-corps.vg{animation:ongletG var(--o-moyen) var(--o-tres-lourd) both}

/* — blocs — */
.bloc{margin-bottom:26px}
.bloc > h3{margin:0 0 12px;font:500 10px/1 var(--o-mono);letter-spacing:.24em;color:var(--encre-faible);
  display:flex;align-items:center;gap:11px}
.bloc > h3::after{content:'';flex:1;height:1px;background:var(--trait)}
.para{margin:0 0 13px;font:400 14px/1.72 var(--o-sans);max-width:74ch;color:var(--encre)}
.vide-note{font:400 11px/1.6 var(--o-mono);color:var(--encre-faible);letter-spacing:.06em}

/* stats détail */
.axes,.axe-h{max-width:720px}
.axes{display:grid;gap:10px}
.axe,.axe-h{display:grid;grid-template-columns:42px 118px 1fr 34px;gap:14px;align-items:center}
.axe .ac{font:500 10px/1 var(--o-mono);letter-spacing:.14em;color:var(--encre-fort)}
.axe .an{font:400 12px/1.25 var(--o-sans);color:var(--encre-faible)}
.axe .aj{position:relative;height:14px;display:flex;gap:3px;align-items:center}
.axe .aj i{flex:1;height:var(--ep-vide);background:var(--vide)}
.axe .aj i.p{height:var(--ep-plein);background:var(--accent);filter:var(--lueur)}
.axe .av{font:500 13px/1 var(--o-mono);color:var(--encre-fort);text-align:right}
.axe .av.nul{color:var(--encre-faible);font-size:9px;letter-spacing:.1em}
.axe-h{font:500 9px/1 var(--o-mono);letter-spacing:.14em;color:var(--encre-faible);
  margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--trait)}
.axe-h span:last-child{text-align:right}

/* chronologie */
.chrono{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait)}
.ev{background:var(--fond);padding:15px 17px;display:grid;gap:9px;position:relative}
.ev-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.ev-date{font:500 10px/1 var(--o-mono);letter-spacing:.14em;color:var(--accent)}
.ev-qui{font:500 10px/1 var(--o-mono);letter-spacing:.1em;color:var(--encre-faible)}
.ev-code{margin-left:auto;font:500 9px/1 var(--o-mono);letter-spacing:.1em;color:var(--al-friction);
  border:1px solid color-mix(in srgb,var(--al-friction) 40%,transparent);padding:3px 7px}
.ev-fait{margin:0;font:400 13.5px/1.68 var(--o-sans);max-width:78ch}
.ev-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  padding-top:10px;border-top:1px dashed var(--trait)}
.ev-cell h4{margin:0 0 4px;font:500 8.5px/1 var(--o-mono);letter-spacing:.2em;color:var(--encre-faible)}
.ev-cell p{margin:0;font:400 12px/1.6 var(--o-sans);color:var(--encre)}

/* le détail caché : on maintient / on tape pour révéler. Balayage, pas fondu. */
.ev.scelle .ev-fait,.ev.scelle .ev-grille,.ev.scelle .ev-pieces{
  filter:blur(5px) saturate(.2);opacity:.4;user-select:none;
  transition:filter var(--o-moyen) var(--o-lourd),opacity var(--o-moyen)
}
/* Le flou ne suffit pas sur une PIÈCE SONORE : un lecteur audio flouté reste
   cliquable, et une voix ne se floute pas. Le scellé doit donc aussi couper
   l'accès — `pointer-events` rendu au moment où le maintien aboutit. */
.ev.scelle .ev-pieces{pointer-events:none}
.ev.scelle.ouvert .ev-pieces{pointer-events:auto}
.ev.scelle::after{
  content:'⊘ MAINTENIR POUR OUVRIR';position:absolute;inset:44px 0 auto 0;
  text-align:center;font:500 9px/1 var(--o-mono);letter-spacing:.26em;color:var(--accent);
  pointer-events:none;transition:opacity var(--o-court)
}
/* 44 px = padding haut 15 + la ligne `.ev-h` + gap 9. Le repère doit tomber SUR
   le bloc flouté : `.ev` contient aussi la lecture (300 à 900 px de haut), donc
   l'ancien `bottom:50%` le posait 400 à 600 px SOUS ce qu'il décrit. */
.ev.scelle.ouvre{cursor:progress}
.ev.scelle.ouvre::after{content:'OUVERTURE…'}
.ev.ouvert::after{opacity:0}
.ev.ouvert .ev-fait,.ev.ouvert .ev-grille,.ev.ouvert .ev-pieces{filter:none;opacity:1}

/* ── PIÈCES JOINTES (29/08/2026) — la seule couche du codex qui ne soit ni
   du texte ni un chiffre. Elle se lit comme une cellule de la grille (même
   h4 mono, même rythme), pas comme un widget : un lecteur audio de navigateur
   posé nu au milieu d'une fiche casse la densité de la page. D'où le cadre
   pointillé — le vocabulaire visuel de « document versé au dossier ». */
.ev-pieces{margin-top:12px;padding:11px 13px 9px;border:1px dashed var(--trait);
  border-radius:3px;background:color-mix(in srgb,var(--accent) 4%,transparent)}
.ev-pieces>h4{margin:0 0 8px;font:500 8.5px/1 var(--o-mono);letter-spacing:.2em;color:var(--accent)}
.ev-piece{margin:0 0 8px;display:flex;flex-direction:column;gap:4px}
.ev-piece:last-of-type{margin-bottom:6px}
.ev-piece figcaption{font:500 9.5px/1 var(--o-mono);letter-spacing:.13em;color:var(--encre-faible)}
.ev-piece audio{width:100%;max-width:420px;height:32px;filter:saturate(.35) contrast(.95)}
[data-orbite="nuit"] .ev-piece audio{filter:invert(1) hue-rotate(180deg) saturate(.3) contrast(.9)}
.ev-piece-n{margin:0;font:400 10.5px/1.55 var(--o-sans);color:var(--encre-faible);max-width:64ch}
.ev .jauge{position:absolute;left:0;bottom:0;height:var(--ep-plein);background:var(--accent);
  width:0;filter:var(--lueur)}

/* rôle : fait / ne fait pas */
.role2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--trait);border:1px solid var(--trait)}
.role2 > div{background:var(--fond);padding:16px 18px}
.role2 h4{margin:0 0 11px;font:500 9px/1 var(--o-mono);letter-spacing:.22em}
.role2 .oui h4{color:var(--al-allie)} .role2 .non h4{color:var(--al-hostile)}
.role2 ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.role2 li{font:400 13px/1.5 var(--o-sans);padding-left:16px;position:relative}
.role2 li::before{position:absolute;left:0;top:0;font:500 11px/1.6 var(--o-mono)}
.role2 .oui li::before{content:'+';color:var(--al-allie)}
.role2 .non li::before{content:'–';color:var(--al-hostile)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;max-width:660px}
.kv dt{font:500 9.5px/1.7 var(--o-mono);letter-spacing:.16em;color:var(--encre-faible)}
.kv dd{margin:0;font:400 13px/1.7 var(--o-sans)}

.src{margin-top:30px;padding-top:14px;border-top:1px solid var(--trait);
  font:400 10px/1.7 var(--o-mono);color:var(--encre-faible);letter-spacing:.05em}
.src b{color:var(--encre);font-weight:500}

/* ══ PANNEAU (org / influence) ══════════════════════════════════════════ */
#voile{position:fixed;inset:0;z-index:40;background:var(--voile);backdrop-filter:blur(3px);
  animation:fade var(--o-moyen) var(--o-lourd)}
@keyframes fade{from{opacity:0}to{opacity:1}}
#panneau{
  position:fixed;top:0;right:0;bottom:0;width:min(720px,94vw);z-index:41;
  background:var(--fond2);border-left:1px solid var(--trait-fort);
  display:flex;flex-direction:column;
  animation:glisse var(--o-long) var(--o-tres-lourd)
}
@keyframes glisse{from{transform:translateX(100%)}to{transform:none}}
#panneau header{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--trait)}
#panneau h2{margin:0;font:400 15px/1.3 var(--o-sans);letter-spacing:.12em;color:var(--encre-fort)}
#panneauX{font-size:16px;color:var(--encre-faible);padding:6px 10px}
#panneauX:hover{color:var(--encre-fort)}
#panneauC{overflow-y:auto;padding:22px 24px 60px}

/* carte d'influence — un tornado : 2024 pousse à gauche, 2025 à droite,
   le delta au centre. Une seule grille, sinon rien ne s'aligne. */
.infl{margin:8px 0 26px}
.irow{display:grid;grid-template-columns:42px 1fr 46px 1fr 42px 108px;gap:0 10px;
  align-items:center;padding:7px 0;border-bottom:1px solid var(--trait)}
.irow.ientete{border-bottom:1px solid var(--trait-fort);padding-bottom:9px}
.ian{font:500 9px/1 var(--o-mono);letter-spacing:.22em;color:var(--encre-faible);text-align:center}
.iv{font:500 11px/1 var(--o-mono);color:var(--encre-fort);text-align:center}
.iv.z{color:var(--encre-faible);opacity:.4}
.ibar{display:block;height:var(--ep-plein);background:var(--vide);position:relative}
.ibar i{position:absolute;top:0;bottom:0;background:var(--accent);filter:var(--lueur);display:block}
.ibar.g i{right:0} .ibar.d i{left:0}
.delta{font:500 10px/1 var(--o-mono);text-align:center;padding:4px 0;
  border:1px solid var(--trait);color:var(--encre-faible)}
.delta.up{color:var(--al-allie);border-color:color-mix(in srgb,var(--al-allie) 45%,transparent)}
.delta.dn{color:var(--al-hostile);border-color:color-mix(in srgb,var(--al-hostile) 45%,transparent)}
.inom{font:500 11px/1 var(--o-mono);letter-spacing:.12em;color:var(--encre)}

.flux{display:grid;gap:0;margin:4px 0 22px}
.flux div{padding:11px 15px;border:1px solid var(--trait);border-bottom:0;font:400 12.5px/1.5 var(--o-sans);
  background:var(--carte)}
.flux div:last-child{border-bottom:1px solid var(--trait)}
.flux div span{font:500 10px/1 var(--o-mono);color:var(--accent);margin-right:10px;letter-spacing:.1em}

ol.liste{margin:0;padding-left:20px;display:grid;gap:9px}
ol.liste li{font:400 13px/1.65 var(--o-sans)}
ul.puces{margin:0;padding-left:18px;display:grid;gap:7px}
ul.puces li{font:400 12.5px/1.6 var(--o-sans)}

/* ══ ÉDITION ════════════════════════════════════════════════════════════ */
body.edit [data-ed]{
  outline:1px dashed color-mix(in srgb,var(--accent) 42%,transparent);
  outline-offset:3px;border-radius:1px;transition:outline-color var(--o-court),background var(--o-court)
}
body.edit [data-ed]:hover{outline-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
body.edit [data-ed]:focus{outline:1px solid var(--accent);outline-offset:3px;
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
body.edit [data-ed]:empty::before{content:attr(data-vide-txt);color:var(--encre-faible);font-style:italic}
.ed-only{display:none}
body.edit .ed-only{display:inline-flex}
body.edit #tete{box-shadow:inset 0 -2px 0 var(--accent)}
.ed-btn{padding:5px 9px;font:500 9px/1 var(--o-mono);letter-spacing:.14em;color:var(--encre-faible);
  border:1px dashed var(--trait-fort);margin-right:6px;transition:color var(--o-court)}
.ed-btn:hover{color:var(--accent);border-color:var(--accent)}
.ed-sup{color:var(--al-hostile)}
.ed-barre{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
/* Cette rangée est une barre d'ÉDITION : `.ed-barre` et `.ed-only` ont la même
   spécificité, et `.ed-barre{display:flex}` est écrite plus bas — elle gagnait
   donc contre `.ed-only{display:none}`, et « + AJOUTER UN FAIT », « + LIGNE »,
   « COMMENCER LA LECTURE »… restaient à l'écran hors édition ET en démo. Le
   bouton n'était pas seulement visible, il était CÂBLÉ : un clic écrivait un
   fait vide sur le disque, dans une fiche où les champs ne sont pas ouverts et
   où la corbeille est cachée — impossible à remplir, impossible à retirer, et
   le compteur de faits faux d'un cran. Deux sélecteurs doubles, pour que la
   règle qui cache passe devant celle qui mesure la rangée. */
.ed-barre.ed-only{display:none}
body.edit .ed-barre.ed-only{display:flex}

/* ── la plaque : ce qui pilote les jetons du haut de fiche ─────────────── */
.ed-plaque{display:none;margin-top:14px;padding:12px 14px;border:1px solid var(--trait);
  background:color-mix(in srgb,var(--accent) 4%,transparent);gap:14px;flex-wrap:wrap;align-items:flex-end}
body.edit .ed-plaque{display:flex}
.pl-c{display:grid;gap:5px}
.pl-c>span{font:500 8.5px/1 var(--o-mono);letter-spacing:.2em;color:var(--encre-faible)}
.pl-c select,.pl-c input{background:var(--carte);border:1px solid var(--trait);color:var(--encre);
  padding:5px 8px;font:400 12px/1.2 var(--o-mono);min-width:96px}
.pl-c select:focus,.pl-c input:focus{outline:1px solid var(--accent);outline-offset:1px}
.pl-l input{min-width:190px}
.pl-n{flex:1 1 100%;margin:2px 0 0;font:400 11px/1.62 var(--o-sans);color:var(--encre-faible);max-width:76ch}
.pl-n b{color:var(--encre)}

/* ── carte d'influence : matrice personnes × années ────────────────────── */
.infl2{display:grid;gap:1px;margin-top:20px}
.irow2{display:grid;grid-template-columns:132px repeat(var(--n),1fr) 42px;align-items:end;
  gap:5px;padding:5px 6px;cursor:pointer;transition:background var(--o-court)}
.irow2[data-va-id]:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.irow2.moi{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.irow2.moi .inom2{color:var(--accent)}
.ientete2{cursor:default;border-bottom:1px solid var(--trait);padding-bottom:7px}
.ientete2:hover{background:none}
.ian2{font:500 9px/1 var(--o-mono);letter-spacing:.1em;color:var(--encre-faible);text-align:center}
.inom2{font:500 10px/1.2 var(--o-mono);letter-spacing:.1em;color:var(--encre);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ic-v{position:relative;height:34px;display:block;
  background:linear-gradient(to top,color-mix(in srgb,var(--encre-faible) 12%,transparent) 0 1px,transparent 1px)}
.ic-v i{position:absolute;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--accent) 34%,transparent)}
.ic-v b{position:absolute;inset:auto 0 2px 0;text-align:center;font:500 8.5px/1 var(--o-mono);
  color:var(--encre);mix-blend-mode:normal}
.ic-mot::after{content:'';position:absolute;left:50%;bottom:-5px;width:3px;height:3px;
  transform:translateX(-50%);background:var(--accent);border-radius:50%}
.ic-nul{height:34px;display:block;
  background:repeating-linear-gradient(45deg,transparent 0 3px,color-mix(in srgb,var(--encre-faible) 9%,transparent) 3px 4px)}
.idelta{font:500 10px/1 var(--o-mono);text-align:right;color:var(--encre-faible);padding-bottom:2px}
.idelta.up{color:var(--al-allie)} .idelta.dn{color:var(--al-hostile)}

/* ── trajectoire d'influence ───────────────────────────────────────────── */
.itl{display:flex;align-items:flex-end;gap:8px;margin:18px 0 0;padding:0 2px 2px;overflow-x:auto}
.itl-cut{flex:0 0 1px;align-self:stretch;margin:0 6px;background:repeating-linear-gradient(
  to bottom,var(--accent) 0 3px,transparent 3px 8px);opacity:.55}
.itc{flex:1 1 0;min-width:46px;display:grid;gap:6px;justify-items:center;position:relative;
  cursor:pointer;padding-top:4px}
.itc-v{font:500 10px/1 var(--o-mono);letter-spacing:.06em;color:var(--encre-faible);transition:color var(--o-court)}
.itc-v small{font-size:7.5px;opacity:.6}
.itc-b{width:100%;height:88px;position:relative;background:linear-gradient(
  to top,color-mix(in srgb,var(--encre-faible) 14%,transparent) 0 1px,transparent 1px)}
.itc-b i{position:absolute;left:0;right:0;bottom:0;display:block;
  background:color-mix(in srgb,var(--encre-faible) 26%,transparent);
  transition:height var(--o-moyen) var(--o-lourd),background var(--o-court)}
.itc-a{font:500 9.5px/1 var(--o-mono);letter-spacing:.1em;color:var(--encre-faible)}
.itc-o{font:500 7.5px/1 var(--o-mono);letter-spacing:.14em;color:var(--encre-faible);opacity:.42}
.itc.a-mot .itc-a::after{content:'·';margin-left:3px;color:var(--accent)}
.itc:hover .itc-b i{background:color-mix(in srgb,var(--accent) 38%,transparent)}
.itc:hover .itc-v{color:var(--encre)}
.itc.on .itc-b i{background:var(--accent);filter:var(--lueur)}
.itc.on .itc-v,.itc.on .itc-a{color:var(--accent)}
.itc-x{position:absolute;top:-4px;right:0;width:16px;height:16px;padding:0;line-height:1;
  background:var(--carte);border:1px solid var(--trait);color:var(--encre-faible);cursor:pointer;
  font:500 11px/1 var(--o-mono);opacity:0;transition:opacity var(--o-court)}
.itc:hover .itc-x{opacity:1}
.itc-x:hover{color:var(--al-hostile);border-color:var(--al-hostile)}
body.edit .itc-b{cursor:ns-resize}
.itl-mot{margin-top:16px;border-left:2px solid var(--accent);padding-left:14px;min-height:44px}
.itl-an{font:500 9px/1 var(--o-mono);letter-spacing:.2em;color:var(--accent)}
.itl-mot .para{margin:7px 0 0;max-width:78ch}
.ev-sup{position:absolute;top:8px;right:8px;font:500 9px/1 var(--o-mono);color:var(--al-hostile);
  padding:4px 7px;border:1px dashed color-mix(in srgb,var(--al-hostile) 45%,transparent);display:none}
body.edit .ev-sup{display:block}
/* en édition, plus rien n'est scellé : on ne peut pas corriger ce qu'on ne voit pas */
/* En édition, un scellé n'a plus de raison d'être : on ne se cache pas de
   soi-même. Le `user-select:none` de la règle de base doit être ANNULÉ ici —
   sans ça le texte est bien lisible mais le curseur ne peut pas s'y poser,
   donc contenteditable ne sert à rien. C'était le bug. */
body.edit .ev.scelle .ev-fait,body.edit .ev.scelle .ev-grille{
  filter:none;opacity:1;user-select:text;-webkit-user-select:text}
body.edit .ev.scelle::after{display:none}
body.edit .ev.scelle{cursor:auto}
/* les notes deviennent des curseurs */
.axe .aj i{cursor:default}
body.edit .axe .aj{cursor:ew-resize}
body.edit .axe .aj i{cursor:ew-resize}
body.edit .axe .aj:hover i{background:color-mix(in srgb,var(--accent) 35%,var(--vide))}

/* ══ TOAST ══════════════════════════════════════════════════════════════ */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:70;
  padding:11px 20px;background:var(--fond3);border:1px solid var(--trait-fort);
  font:500 10px/1 var(--o-mono);letter-spacing:.16em;color:var(--encre-fort);
  opacity:0;pointer-events:none;transition:opacity var(--o-court),transform var(--o-court) var(--o-lourd)}
#toast.on{opacity:1;transform:translateX(-50%)}

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width:920px){
  #scene{grid-template-columns:1fr}
  #roster{border-right:0;border-bottom:1px solid var(--trait);max-height:38vh}
  .f-tete{grid-template-columns:1fr;gap:16px}
  .role2{grid-template-columns:1fr}
  #fiche{padding:20px 16px 80px}
  #factions{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   LE SYSTÈME — profil, charge, moteurs, matrice.
   Même doctrine que le reste : de nuit la lumière porte l'information, de
   jour c'est l'épaisseur. Aucun élément n'a de couleur « bonne » ou
   « mauvaise » sur les traits — le vert n'existe que sur la charge, où il y
   a réellement un sens de gravité.
   ══════════════════════════════════════════════════════════════════════════ */

.ic.mot{letter-spacing:.14em}
.ic.mot.on{color:var(--fond);background:var(--accent);border-color:var(--accent)}
[data-orbite="jour"] .ic.mot.on{color:#f1f1f1}

/* ── TRAITS — barre bipolaire ─────────────────────────────────────────────
   Rien ne se « remplit » : un curseur se pose sur un axe. C'est le point de
   tout le modèle — il n'y a pas de bon côté, donc pas de jauge pleine.     */
.traits{max-width:820px;display:grid;gap:2px}
.tr{
  display:grid;grid-template-columns:34px 82px 1fr 82px 28px;align-items:center;gap:12px;
  padding:7px 8px;border:1px solid transparent;border-radius:2px;
  transition:background var(--o-court) var(--o-lourd),border-color var(--o-court) var(--o-lourd);
}
.tr:hover{background:var(--carte);border-color:var(--trait)}
.tr-c{font:500 9.5px/1 var(--o-mono);letter-spacing:.14em;color:var(--accent)}
.tr-g,.tr-d{font:400 10px/1 var(--o-mono);letter-spacing:.05em;color:var(--encre-faible)}
.tr-d{text-align:right}
.tr-b{position:relative;height:20px;display:block}
body.edit .tr-b{cursor:ew-resize}
.tr-axe{position:absolute;left:0;right:0;top:9px;height:1px;background:var(--vide)}
/* la trace du curseur vers le centre : une ombre, pas un remplissage */
.tr-om{position:absolute;left:0;top:9px;height:1px;background:var(--trait-fort);
  transition:width var(--o-moyen) var(--o-tres-lourd)}
.tr-cur{
  position:absolute;top:3px;width:2px;height:14px;margin-left:-1px;background:var(--accent);
  filter:var(--lueur);transition:left var(--o-moyen) var(--o-tres-lourd)
}
[data-orbite="jour"] .tr-cur{width:var(--ep-plein)}
.tr-nul{position:absolute;left:0;right:0;top:8px;height:3px;
  background:repeating-linear-gradient(90deg,var(--vide) 0 3px,transparent 3px 8px)}
.tr-v{font:500 12px/1 var(--o-mono);text-align:right;color:var(--encre-fort)}
.tr-v.nul{color:var(--encre-faible);font-weight:400}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.duo-c h4{margin:0 0 10px;font:500 9.5px/1 var(--o-mono);letter-spacing:.2em;color:var(--encre-faible)}
.chip{display:inline-block;padding:5px 11px;border:1px solid var(--trait-fort);border-radius:2px;
  font:500 10px/1 var(--o-mono);letter-spacing:.16em;color:var(--encre-fort);margin-bottom:10px}
.chip.gros{padding:8px 14px;font-size:11px;filter:var(--lueur)}
[data-orbite="jour"] .chip.gros{border-width:var(--ep-plein)}

/* ── CHARGE — ici, et seulement ici, la couleur a un sens de gravité ────── */
.jauges{display:grid;gap:14px;max-width:820px}
.jg{display:grid;grid-template-columns:150px 1fr 30px;align-items:center;gap:14px}
.jg-n{font:500 10px/1.3 var(--o-mono);letter-spacing:.1em;color:var(--encre)}
.jg-b{position:relative;height:6px;background:var(--vide);border-radius:1px;overflow:hidden}
/* en édition la jauge devient une poignée : plus haute, donc attrapable */
body.edit .jg-b{height:12px;cursor:ew-resize}
body.edit .jg-b:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.jg-b i{position:absolute;inset:0 auto 0 0;background:var(--al-neutre);
  transition:width var(--o-long) var(--o-tres-lourd)}
.jg.bas  .jg-b i{background:var(--al-allie)}
.jg.moy  .jg-b i{background:var(--al-neutre)}
.jg.haut .jg-b i{background:var(--al-friction)}
.jg.crit .jg-b i{background:var(--al-hostile);filter:var(--lueur)}
.jg-v{font:500 12px/1 var(--o-mono);text-align:right}
.jg.crit .jg-v{color:var(--al-hostile)}
.jg.haut .jg-v{color:var(--al-friction)}
.jg-d{grid-column:1/-1;margin:0;font:400 11px/1.6 var(--o-mono);color:var(--encre-faible);
  opacity:0;max-height:0;transition:opacity var(--o-court) var(--o-lourd),max-height var(--o-court) var(--o-lourd)}
.jg:hover .jg-d{opacity:1;max-height:60px}
.ind{display:flex;align-items:baseline;gap:12px;margin-top:22px;padding-top:14px;border-top:1px solid var(--trait)}
.ind span{font:500 9.5px/1 var(--o-mono);letter-spacing:.22em;color:var(--encre-faible)}
.ind b{font:300 30px/1 var(--o-mono);color:var(--encre-fort)}
.ind small{font:400 11px/1 var(--o-mono);color:var(--encre-faible)}

/* ── LISTES DE MOTEUR ─────────────────────────────────────────────────── */
.lst{display:grid;gap:1px;max-width:900px}
.lst-l{
  display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:start;
  padding:13px 14px;border:1px solid var(--trait);
  transition:background var(--o-court) var(--o-lourd),border-color var(--o-court) var(--o-lourd)
}
.lst-l:hover{background:var(--carte);border-color:var(--trait-fort)}
.lst-l b{display:block;font:500 13px/1.45 var(--o-sans);color:var(--encre-fort);margin-bottom:4px}
.lst-l p{margin:0 0 6px;font:400 12.5px/1.65 var(--o-sans);max-width:70ch}
.et{font:500 9px/1 var(--o-mono);letter-spacing:.13em;padding:5px 0;color:var(--encre-faible)}
.et.ok{color:var(--al-allie)} .et.mid{color:var(--al-friction)} .et.todo{color:var(--accent)}
.et.tient{color:var(--al-allie)} .et.limite{color:var(--al-friction)}
.et.casse{color:var(--al-hostile)} .et.inconnu{color:var(--al-inconnu)}
/* ── LA GRILLE — quatre axes hiérarchisés (data/systeme.js §8) ─────────
   Le seul geste porteur d'information de ce bloc : les quatre lignes
   arrivent DANS L'ORDRE (90 ms d'écart), et quand l'axe 1 est rouge les
   trois suivantes s'éteignent. On voit la hiérarchie avant de la lire. */
.gr .lst-l{animation:fadeUp var(--o-moyen) var(--o-lourd) both;animation-delay:calc(var(--gr-i,0)*90ms)}
.gr-tete{display:flex;flex-direction:column;gap:7px}
.gr-rang{font:300 26px/1 var(--o-mono);font-style:normal;color:var(--encre-faible)}
.gr-pole{font:400 10px/1 var(--o-mono);font-style:normal;letter-spacing:.1em;
  color:var(--encre-faible);margin-left:10px;text-transform:none}
.gr-base{border-left:2px solid var(--trait-fort);padding-left:12px;margin-bottom:9px !important}
.gr-plus{margin-top:4px}
.gr-plus summary{font:500 9px/1 var(--o-mono);letter-spacing:.13em;color:var(--encre-faible);
  cursor:pointer;padding:4px 0;list-style:none;transition:color var(--o-court) var(--o-lourd)}
.gr-plus summary::-webkit-details-marker{display:none}
.gr-plus summary::before{content:'+ ';opacity:.7}
.gr-plus[open] summary::before{content:'− '}
.gr-plus summary:hover{color:var(--encre-fort)}
.gr-plus .vide-note{display:block;margin:8px 0 0;max-width:74ch}
.gr-eteint{filter:grayscale(1) opacity(.32)}
.gr-eteint:hover{filter:grayscale(.35) opacity(.72)}
.gr-verdict{display:flex;align-items:baseline;gap:14px;margin-top:24px;padding-top:14px;
  border-top:1px solid var(--trait);max-width:900px}
.gr-verdict span{font:500 9.5px/1 var(--o-mono);letter-spacing:.22em;color:var(--encre-faible)}
.gr-verdict b{font:300 21px/1.25 var(--o-mono);letter-spacing:.04em;color:var(--encre-fort)}
.gr-verdict.tient b{color:var(--al-allie)} .gr-verdict.limite b{color:var(--al-friction)}
.gr-verdict.casse b{color:var(--al-hostile)} .gr-verdict.inconnu b{color:var(--al-inconnu)}

.gr-mot{display:block;margin:9px 0 0;max-width:74ch;padding-left:12px;
  border-left:2px solid var(--al-friction);font:400 11.5px/1.65 var(--o-sans);
  color:var(--encre-moyen,var(--encre-fort));opacity:.9}

/* ── §10 · LES MESURES — les trois chiffres, sous les quatre axes ──────
   Ils sont VOLONTAIREMENT sans barre de progression et sans total : une
   jauge invite l'œil à comparer trois grandeurs qui ne se comparent pas,
   et un total ferait la moyenne que la grille refuse. Le nombre est gros,
   ce qui compose le RESTE est juste en dessous — c'est le reste qui porte
   le mécanisme, jamais le score. Fenêtre fermée → tout le bloc perd un
   peu de saturation : un chiffre périmé doit se voir périmé, pas se lire
   comme une mesure d'aujourd'hui.                                       */
.mz{max-width:900px;margin:26px 0 4px;padding:16px 0 2px;border-top:1px solid var(--trait);
  animation:fadeUp var(--o-moyen) var(--o-lourd) both;animation-delay:420ms}
.mz-perime{filter:saturate(.55)}
.mz-tete{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mz-t{font:500 9.5px/1 var(--o-mono);letter-spacing:.22em;color:var(--encre-faible)}
.mz-tete b{font:300 15px/1.3 var(--o-mono);letter-spacing:.03em;color:var(--encre-fort)}
.mz-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:16px}
.mz-c{position:relative;padding-left:14px;border-left:1px solid var(--trait)}
.mz-n{display:block;font:200 38px/1 var(--o-mono);letter-spacing:-.02em;color:var(--encre-fort)}
.mz-n i{font:400 13px/1 var(--o-mono);font-style:normal;margin-left:2px;opacity:.55}
.mz-n.tient{color:var(--al-allie)} .mz-n.limite{color:var(--al-friction)} .mz-n.casse{color:var(--al-hostile)}
.mz-c b{display:block;margin-top:7px;font:500 11px/1.3 var(--o-mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--encre-fort)}
.mz-r{margin:9px 0 0;font:400 11.5px/1.65 var(--o-sans);color:var(--encre-fort);opacity:.86}
.mz-p{margin-top:18px !important}

/* ── LE BANDEAU DE TÊTE — l'axe 1 sous le profil (29/08/2026) ──────────
   Même contenu que le flash de l'onglet, deux crans plus haut et deux
   crans plus gros. Il tient la largeur de la fiche, sous le trait de
   `.f-tete` : le regard descend nom → friction → verdict, sans détour.
   Le rail de gauche porte la couleur ; le fond n'est qu'un souffle de
   cette couleur qui s'éteint avant le tiers de la largeur — assez pour
   teinter la zone, jamais assez pour faire un encadré d'alerte.        */
.bnd{--bc:var(--al-inconnu);
  position:relative;display:grid;grid-template-columns:1fr auto;column-gap:24px;
  align-items:end;padding:20px 22px 18px 26px;margin:0 0 24px;cursor:pointer;
  border:1px solid var(--trait);border-left:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bc) 9%,transparent),transparent 58%);
  animation:bndIn var(--o-moyen) var(--o-lourd) both}
.bnd.tient{--bc:var(--al-allie)}
.bnd.limite{--bc:var(--al-friction)}
.bnd.casse{--bc:var(--al-hostile)}
.bnd::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--bc);
  transform-origin:top;animation:flTrait 420ms var(--o-lourd) both;
  transition:width var(--o-court) var(--o-lourd)}
.bnd:hover::before,.bnd:focus-visible::before{width:7px}
.bnd:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

.bnd-tete{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;
  gap:10px 20px;flex-wrap:wrap;margin-bottom:6px}
.bnd-l{font:500 9px/1 var(--o-mono);letter-spacing:.24em;color:var(--encre-faible)}
.bnd-l i{font:400 10px/1 var(--o-sans);font-style:italic;letter-spacing:0;margin-left:12px;
  color:var(--encre-faible);opacity:.72}
.bnd-v{font:500 9.5px/1 var(--o-mono);letter-spacing:.18em;color:var(--bc);
  border:1px solid color-mix(in srgb,var(--bc) 45%,transparent);padding:5px 9px}

/* le chiffre le plus gros de la fiche, et ce n'est pas une note : c'est le
   seul état qui décide si le reste se lit. */
.bnd-t{grid-column:1;display:flex;align-items:baseline;gap:.34em;
  font:300 clamp(32px,5.6vw,58px)/1.02 var(--o-mono);letter-spacing:.05em;color:var(--bc)}
.bnd-t em{font-style:normal;display:inline-block;
  animation:flMonte var(--o-moyen) var(--o-lourd) both}
.bnd-t em:nth-of-type(1){animation-delay:140ms}
.bnd-t em:nth-of-type(2){animation-delay:340ms}
.bnd-t s{text-decoration:none;opacity:.42;font-size:.58em;animation:flIn var(--o-moyen) 240ms both}

.bnd-pips{grid-column:2;grid-row:2;display:flex;gap:5px;align-self:center}
.bnd-p{display:grid;place-items:center;width:24px;height:24px;font:500 10px/1 var(--o-mono);
  font-style:normal;border:1px solid var(--trait-fort);color:var(--encre-faible);cursor:help}
.bnd-p.p-tient{border-color:var(--al-allie);color:var(--al-allie)}
.bnd-p.p-limite{border-color:var(--al-friction);color:var(--al-friction)}
.bnd-p.p-casse{border-color:var(--al-hostile);color:var(--al-hostile);
  background:color-mix(in srgb,var(--al-hostile) 12%,transparent)}
.bnd-p.p-off{opacity:.26}

.bnd-d{grid-column:1/-1;margin:14px 0 0;font:400 13.5px/1.6 var(--o-sans);
  color:var(--encre-fort);max-width:66ch}
.bnd-s{grid-column:1/-1;margin:7px 0 0;font:400 11.5px/1.65 var(--o-mono);
  color:var(--encre-faible);letter-spacing:.015em;max-width:76ch}
.bnd-go{grid-column:1/-1;justify-self:end;margin-top:12px;font:500 9px/1 var(--o-mono);
  letter-spacing:.2em;color:var(--encre-faible);
  transition:color var(--o-court) var(--o-lourd),transform var(--o-court) var(--o-lourd)}
.bnd:hover .bnd-go,.bnd:focus-visible .bnd-go{color:var(--accent);transform:translateX(4px)}

/* NON LU — une ligne, pas un bloc. Elle existe pour dire qu'il manque une
   lecture, pas pour crier. */
.bnd-nu{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;
  padding:11px 18px 11px 20px;background:none}
.bnd-nu::before{width:2px;opacity:.5}
.bnd-nu:hover::before,.bnd-nu:focus-visible::before{width:4px}
.bnd-nut{font:500 11px/1 var(--o-mono);letter-spacing:.2em;color:var(--al-inconnu)}
.bnd-nud{flex:1 1 320px;font:400 11.5px/1.55 var(--o-sans);color:var(--encre-faible)}
.bnd-nu .bnd-pips{grid-column:auto;grid-row:auto}
.bnd-nu .bnd-p{width:20px;height:20px;font-size:9px}
.bnd-nu .bnd-go{grid-column:auto;margin-top:0}
@keyframes bndIn{from{opacity:0}to{opacity:1}}
@media (max-width:640px){
  .bnd{grid-template-columns:1fr}
  .bnd-pips{grid-column:1;grid-row:auto;align-self:start;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){
  .bnd,.bnd::before,.bnd-t em,.bnd-t s{animation:none}
}

/* ── LES ANIMATIONS DU BANDEAU (ex-FLASH) ─────────────────────────────
   Ces trois images-clés servaient le flash de l'onglet LES 4 AXES, posé le
   23/08/2026. Le flash a déménagé en tête de fiche le 29/08 (`.bnd` plus
   haut) — les règles `.fl*` sont parties avec lui, les keyframes restent :
   c'est le même geste, le trait qui se déploie de la gauche puis le tag qui
   monte. L'ordre d'apparition EST la hiérarchie — on voit l'axe 1 seul un
   instant, littéralement, avant que les trois autres n'existent.        */
@keyframes flTrait{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes flIn{from{opacity:0}to{opacity:1}}
@keyframes flMonte{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* le flash n'est plus dans l'onglet (il est en tête de fiche) : la cascade
   des axes n'a plus à l'attendre, elle part tout de suite. */
.gr .lst-l{animation-delay:calc(var(--gr-i,0)*90ms)}

/* ── LES RÉVISIONS — ce qui est mort sous un dossier (§9) ──────────────
   La valeur morte est barrée, pas retirée : l'œil doit voir qu'il y avait
   quelque chose là. Les lectures tombées sont en retrait et barrées elles
   aussi — c'est la partie du bloc qui sert vraiment, parce que le dégât
   d'une donnée fausse n'est jamais dans la donnée, il est dans ce qui
   s'est empilé dessus.                                                  */
.rv .lst-l{grid-template-columns:132px 1fr;animation:fadeUp var(--o-moyen) var(--o-lourd) both;
  animation-delay:calc(var(--gr-i,0)*80ms)}
.rv-tete{display:flex;flex-direction:column;gap:7px}
.rv-id{font:300 17px/1 var(--o-mono);font-style:normal;color:var(--encre-faible);letter-spacing:.06em}
.rv-ch{font:400 9px/1.4 var(--o-mono);font-style:normal;letter-spacing:.1em;
  color:var(--encre-faible);cursor:help}
.rv-kv{display:grid;grid-template-columns:64px 1fr;gap:5px 14px;margin:8px 0 10px}
.rv-kv dt{font:500 8.5px/1.5 var(--o-mono);letter-spacing:.16em;color:var(--encre-faible)}
.rv-kv dd{margin:0;font:400 12.5px/1.6 var(--o-sans)}
.rv-mort{text-decoration:line-through;text-decoration-thickness:1px;color:var(--encre-faible);
  text-decoration-color:var(--al-hostile)}
.rv-vif{color:var(--encre-fort)}
/* a changé / précisé : l'ancienne valeur reste vraie pour sa période — grisée,
   jamais barrée. Le liseré rappelle qu'elle est datée, pas annulée. */
.rv-pass{color:var(--encre-faible);border-left:1px solid var(--trait-fort);padding-left:9px}
.rv-t{font:500 9px/1 var(--o-mono) !important;letter-spacing:.16em;color:var(--al-hostile) !important;
  margin:10px 0 6px !important}
.rv-ul{margin:0 0 10px;padding-left:16px;list-style:none}
.rv-ul li{position:relative;font:400 12px/1.6 var(--o-sans);color:var(--encre-faible);
  margin-bottom:5px;text-decoration:line-through;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--al-hostile) 55%,transparent)}
.rv-ul li::before{content:'×';position:absolute;left:-16px;color:var(--al-hostile);
  text-decoration:none;font:400 11px/1.6 var(--o-mono)}
/* CE QUI RESTE OUVERT — l'inverse de `tombe`, et surtout PAS barré : une
   question qu'on n'a pas tranchée ne doit jamais avoir l'air réglée. Même
   liste, autre puce (?) et la couleur « inconnu » du codex. */
.rv-o{color:var(--encre-faible) !important}
.rv-ul-o li{text-decoration:none;color:var(--encre)}
.rv-ul-o li::before{content:'?';color:var(--accent)}

.pr-inconnu{border-left:2px solid var(--al-inconnu)}
@media (prefers-reduced-motion:reduce){
  .rv .lst-l{animation:none}
  .gr .lst-l{animation:none}
}
@media (prefers-reduced-motion:reduce){.gr .lst-l{animation:none}}
.pr-casse{border-left:2px solid var(--al-hostile)}
.pr-limite{border-left:2px solid var(--al-friction)}
.pr-tient{border-left:2px solid var(--al-allie)}
.pr-m{font:400 11.5px/1.65 var(--o-mono);color:var(--al-friction) !important;letter-spacing:.02em}
.pr-r{font:400 11.5px/1.65 var(--o-mono);color:var(--accent) !important;letter-spacing:.02em}
.pr-m b,.pr-r b{display:inline !important;color:inherit !important;font-weight:600}

.aff{padding:14px 0;border-bottom:1px solid var(--trait)}
.aff-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.aff-h b{font:500 13.5px/1.4 var(--o-sans);color:var(--encre-fort)}
.aff-s{font:500 13px/1 var(--o-mono);color:var(--accent)}

.rang{display:grid;gap:1px}
.rg{display:grid;grid-template-columns:22px 110px 1fr 42px;align-items:center;gap:12px;
  padding:8px 10px;border:1px solid transparent}
.rg.top{border-color:var(--trait-fort);background:var(--carte)}
.rg-i{font:500 10px/1 var(--o-mono);color:var(--encre-faible)}
.rg-n{font:500 11.5px/1 var(--o-mono);letter-spacing:.08em;color:var(--encre-fort)}
.rg-b{position:relative;height:4px;background:var(--vide)}
.rg-b i{position:absolute;inset:0 auto 0 0;background:var(--accent);transition:width var(--o-long) var(--o-tres-lourd)}
.rg-v{font:500 11px/1 var(--o-mono);text-align:right;color:var(--encre)}
.rg-e{grid-column:2/-1;font:400 10.5px/1.5 var(--o-mono);color:var(--encre-faible)}

/* ── LA CHAÎNE ────────────────────────────────────────────────────────── */
.bloc.ch{border:1px solid var(--trait);padding:16px;margin-bottom:14px}
.ch-l p{margin:0 0 4px;font:400 13px/1.6 var(--o-sans)}
.ch-t{display:block;font:500 9px/1 var(--o-mono);letter-spacing:.2em;color:var(--encre-faible);margin-bottom:6px}
.ch-f{font:400 14px/1 var(--o-mono);color:var(--trait-fort);margin:8px 0 8px 2px}
.ch-trou{border-left:2px solid var(--al-friction);padding-left:12px}
.ch-rep{border-left:2px solid var(--accent);padding-left:12px}
.ch-rep b{color:var(--encre-fort)}

/* ══ MATRICE ══════════════════════════════════════════════════════════════
   Tout le monde à l'écran en même temps. Le mouvement n'est pas décoratif :
   quand on change d'axe, chaque dossier VOYAGE vers sa nouvelle position, et
   celui qui traverse l'écran est celui dont la lecture dépend de l'angle.
   ═══════════════════════════════════════════════════════════════════════ */
#matrice{
  position:fixed;inset:var(--tete) 0 0 0;z-index:6;display:none;
  flex-direction:column;background:var(--fond);
  animation:matIn var(--o-long) var(--o-tres-lourd) both;
}
body.mat #matrice{display:flex}
@keyframes matIn{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:none}}

.mat-tete{display:flex;align-items:center;gap:26px;padding:10px 20px;border-bottom:1px solid var(--trait);flex:0 0 auto;flex-wrap:wrap}
.mat-ax{display:flex;align-items:center;gap:3px}
.mat-lab{font:500 9px/1 var(--o-mono);letter-spacing:.2em;color:var(--encre-faible);margin-right:8px}
.mat-ax button{
  padding:5px 8px;border:1px solid var(--trait);font:500 9.5px/1 var(--o-mono);letter-spacing:.1em;
  color:var(--encre-faible);transition:all var(--o-court) var(--o-lourd)
}
.mat-ax button:hover:not(:disabled){color:var(--encre-fort);border-color:var(--trait-fort)}
.mat-ax button.on{color:var(--fond);background:var(--accent);border-color:var(--accent)}
[data-orbite="jour"] .mat-ax button.on{color:#f1f1f1}
.mat-ax button:disabled{opacity:.25;cursor:default}
.mat-n{margin-left:auto;font:500 9.5px/1 var(--o-mono);letter-spacing:.14em;color:var(--encre-faible)}

.mat-plan{position:relative;flex:1 1 auto;margin:52px 64px 46px;min-height:0}
.mat-plan::before,.mat-plan::after{content:'';position:absolute;background:var(--vide)}
.mat-plan::before{left:0;right:0;top:50%;height:1px}
.mat-plan::after{top:0;bottom:0;left:50%;width:1px}
.mat-liens{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.mat-liens line{stroke:var(--accent);stroke-width:1;opacity:.3;filter:var(--lueur)}

.mat-ejt{position:absolute;font:400 10px/1 var(--o-mono);letter-spacing:.14em;color:var(--encre-faible);text-transform:uppercase}
.mat-ejt-g{left:0;bottom:-26px} .mat-ejt-d{right:0;bottom:-26px}
.mat-ejt-h{left:-52px;top:0;writing-mode:vertical-rl} .mat-ejt-b{left:-52px;bottom:0;writing-mode:vertical-rl}
.mat-axn{position:absolute;font:500 9.5px/1 var(--o-mono);letter-spacing:.22em;color:var(--encre-faible);opacity:.8}
.mat-axn-x{left:50%;transform:translateX(-50%);bottom:-26px}
.mat-axn-y{left:-52px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl}

.mat-noeuds{position:absolute;inset:0;z-index:2}
.nd{
  position:absolute;left:var(--x);top:var(--y);width:0;height:0;
  transition:left 1100ms var(--o-tres-lourd),top 1100ms var(--o-tres-lourd),opacity var(--o-court) var(--o-lourd);
}
.nd-o,.nd-p,.nd-ch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.nd-p{width:7px;height:7px;background:var(--al);filter:var(--lueur)}
.nd-o{width:15px;height:15px;border:1px solid var(--al);opacity:.35;
  transition:width var(--o-moyen) var(--o-lourd),height var(--o-moyen) var(--o-lourd),opacity var(--o-moyen) var(--o-lourd)}
/* le halo = l'indice de friction. Plus la charge est haute, plus il déborde */
.nd-ch{width:calc(16px + var(--ch));height:calc(16px + var(--ch));
  border:1px solid var(--al-hostile);opacity:.14}
.nd-n{
  position:absolute;left:14px;top:-7px;white-space:nowrap;
  font:500 9.5px/1 var(--o-mono);letter-spacing:.1em;color:var(--encre-faible);
  transition:color var(--o-court) var(--o-lourd),opacity var(--o-court) var(--o-lourd)
}
.nd::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%}   /* cible de pointage */
.nd:hover .nd-o,.nd.vise .nd-o{width:26px;height:26px;opacity:1}
.nd:hover .nd-n,.nd.vise .nd-n{color:var(--encre-fort)}
.nd.sel .nd-p{width:10px;height:10px;filter:var(--lueur-forte)}
.nd.sel .nd-n{color:var(--accent)}
/* survol : on n'éclaire pas le nœud, on éclaire sa FAMILLE (même levier) */
#matrice.focus .nd{opacity:.16}
#matrice.focus .nd.fam,#matrice.focus .nd.vise{opacity:1}
/* ce qui traverse l'écran laisse une traînée — l'œil retient qui a bougé */
.nd.voyage .nd-p{animation:trainee 1100ms var(--o-tres-lourd)}
@keyframes trainee{
  0%{box-shadow:0 0 0 0 var(--al)}
  40%{box-shadow:0 0 22px 3px var(--al)}
  100%{box-shadow:0 0 0 0 var(--al)}
}

.mat-pied{flex:0 0 auto;padding:12px 20px 18px;border-top:1px solid var(--trait)}
.mat-nonlus > div{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 10px}
.nl{
  padding:4px 9px;border:1px dashed var(--trait-fort);font:500 9.5px/1 var(--o-mono);
  letter-spacing:.1em;color:var(--encre-faible);transition:all var(--o-court) var(--o-lourd)
}
.nl:hover{color:var(--fond);background:var(--accent);border-color:var(--accent);border-style:solid}
[data-orbite="jour"] .nl:hover{color:#f1f1f1}

@media (max-width:900px){
  .duo{grid-template-columns:1fr}
  .tr{grid-template-columns:30px 1fr 26px}
  .tr-g,.tr-d{display:none}
  .mat-plan{margin:44px 34px 40px}
  .mat-ejt-h,.mat-ejt-b,.mat-axn-y{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nd{transition:none}
  .nd.voyage .nd-p{animation:none}
  #matrice{animation:none}
}

/* ── correction de tête : quatre boutons de moteur en plus ────────────────
   La tête ne doit jamais passer à la ligne (le calage de #scene en dépend).
   Les moteurs sont compacts et la recherche cède la place avant les
   factions — c'est la barre de navigation qui doit rester lisible.        */
.ic.mot{padding:8px 8px;letter-spacing:.1em}
#cherche{width:clamp(120px,15vw,240px)}
#cherche:focus{width:clamp(200px,26vw,380px)}
body.edit #cherche{width:clamp(90px,10vw,140px)}
@media (max-width:1180px){
  .ic.mot{padding:8px 6px;font-size:9px}
  #cherche{width:clamp(90px,11vw,150px)}
}

/* ── lisibilité des étiquettes de la matrice ──────────────────────────────
   Les noms se croisent quand deux dossiers sont proches. On ne déplace pas
   les nœuds (leur position EST la donnée) : on découpe le nom sur le fond
   et on remonte celui qu'on vise.                                         */
.nd-n{text-shadow:0 0 5px var(--fond),0 0 5px var(--fond),0 0 9px var(--fond)}
.nd{z-index:2}
.nd:hover,.nd.vise,.nd.sel{z-index:5}
#matrice.focus .nd:not(.fam):not(.vise) .nd-n{opacity:0}

/* le chiffre de tête n'est plus une note mais un indice de friction */
.rmoy.haut{color:var(--al-friction)}
.rmoy.crit{color:var(--al-hostile)}

/* carte de roster : le trait non lu est creux, pas à zéro */
.cbars i.creux{background:repeating-linear-gradient(0deg,var(--vide) 0 2px,transparent 2px 5px)}
.cfr{font-variant-numeric:tabular-nums}
.cfr.haut{color:var(--al-friction)}
.cfr.crit{color:var(--al-hostile)}

/* ══════════════════════════════════════════════════════════════════════════
   LE GUIDE — habillage de la carte de démonstration (module DEMO d'ORBITE).
   Le module déclare ses jetons sur :root pour qu'une règle de l'hôte gagne
   toujours (une valeur héritée perd contre une règle qui matche, quel que
   soit l'ordre des feuilles). On les relaie donc ici sur .demo-carte.
   ══════════════════════════════════════════════════════════════════════════ */
.demo-carte{
  --demo-boite: color-mix(in srgb, var(--fond2) 92%, transparent);
  --demo-encre: var(--encre-fort);
  --demo-faible: var(--encre-faible);
  --demo-trait: var(--trait-fort);
  --demo-accent: var(--accent);
  --demo-mono: var(--o-mono);
  backdrop-filter: blur(14px) saturate(1.1);
  border-radius: 3px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px var(--trait) inset;
}
[data-orbite="jour"] .demo-carte{
  --demo-boite:#f9f9f9;
  box-shadow: 0 14px 34px rgba(20,22,26,.16), 0 0 0 1px var(--trait) inset;
}

/* ── L'APPEL ────────────────────────────────────────────────────────────
   Un sigle survolable qui ne se signale pas ne sera jamais survolé : c'est
   toute la raison pour laquelle des abréviations restent opaques pendant des
   mois. On souligne d'un pointillé — assez discret pour ne pas salir la
   page, assez net pour dire « il y a quelque chose dessous ».             */
body.a-guide .tr-c,
body.a-guide .axe .ac,
body.a-guide .jg .jg-n,
body.a-guide .prov{
  border-bottom: 1px dotted var(--trait-fort);
  cursor: help;
  transition: border-color var(--o-court) var(--o-lourd), color var(--o-court) var(--o-lourd);
}
body.a-guide .tr:hover .tr-c,
body.a-guide .axe:hover .ac,
body.a-guide .jg:hover .jg-n,
body.a-guide .prov:hover{
  border-bottom-color: var(--accent);
  color: var(--encre-fort);
}
body.a-guide .prov{ color: var(--encre); font-style: normal; }
body.a-guide .chip.gros[data-guide]{ cursor: help; }

/* les sigles de l'en-tête : le trait apparaît sous le mot, pas sous le bouton */
body.a-guide #tete .ic.mot{ position: relative; }
body.a-guide #tete .ic.mot::after{
  content:''; position:absolute; left:26%; right:26%; bottom:6px; height:1px;
  background: currentColor; opacity:0; transform: scaleX(.4);
  transition: opacity var(--o-court) var(--o-lourd), transform var(--o-court) var(--o-tres-lourd);
}
body.a-guide #tete .ic.mot:hover::after{ opacity:.5; transform: scaleX(1); }

/* ══ PARCOURS · TECHNIQUES · MASSE SALARIALE (08.08) ══════════════════════
   Trois tableaux, une seule règle de lecture : la colonne de gauche est un
   REPÈRE (période, numéro, nom), la colonne de droite est la RAISON. Le
   chiffre est au milieu, jamais au bout — on ne finit pas une ligne sur un
   montant, on la finit sur pourquoi il a bougé.                            */
.carr{ display:grid; gap:0; margin:4px 0 0; }
.carr-l{
  display:grid; grid-template-columns:88px minmax(0,1.05fr) 118px 96px minmax(0,1.7fr);
  gap:0 16px; align-items:baseline; padding:12px 2px;
  border-top:1px solid var(--trait);
}
.carr-l:last-child{ border-bottom:1px solid var(--trait); }
.carr-p{ font:500 10px/1.5 var(--o-mono); letter-spacing:.1em; color:var(--encre-faible); }
.carr-t{ font:400 12.5px/1.5 var(--o-sans); color:var(--encre); }
.carr-t b{ display:block; font:500 9.5px/1.6 var(--o-mono); letter-spacing:.14em; color:var(--accent); }
.carr-n{ font:500 13px/1.4 var(--o-mono); color:var(--encre-fort); letter-spacing:.02em; text-align:right; }
.carr-n small,.carr-x small{ display:block; font:400 9.5px/1.6 var(--o-mono); color:var(--encre-faible); letter-spacing:.04em; }
.carr-x{ font:500 11px/1.4 var(--o-mono); color:var(--encre-faible); text-align:right; letter-spacing:.06em; }
.carr-s{ font:400 12px/1.65 var(--o-sans); color:var(--encre-faible); }
.carr-s em{ display:block; margin-top:6px; font-style:italic; opacity:.85; }
.carr-ech .carr-p{ color:var(--encre); letter-spacing:.14em; }
@media (max-width:760px){
  .carr-l{ grid-template-columns:1fr auto; gap:4px 12px; }
  .carr-t,.carr-s{ grid-column:1/-1; }
  .carr-n,.carr-x{ text-align:left; }
}

.tek{ display:grid; gap:0; }
.tek-l{
  display:grid; grid-template-columns:34px 1fr; gap:0 14px;
  padding:14px 2px; border-top:1px solid var(--trait);
}
.tek-l:last-child{ border-bottom:1px solid var(--trait); }
.tek-n{ font:500 10px/1.6 var(--o-mono); color:var(--accent); letter-spacing:.06em; }
.tek-l h4{ margin:0 0 6px; font:500 10px/1.5 var(--o-mono); letter-spacing:.2em; color:var(--encre-fort); }
.tek-l p{ margin:0; font:400 12.5px/1.7 var(--o-sans); color:var(--encre-faible); }
.tek-ex{ margin-top:7px !important; font-style:italic; opacity:.8; }
.tek-r{ margin-top:7px !important; color:var(--encre) !important; }

.ms{ display:grid; gap:0; }
.ms-l{
  display:grid; grid-template-columns:minmax(0,1.35fr) 62px 78px minmax(0,.95fr) 82px minmax(0,1.25fr);
  gap:0 14px; align-items:baseline; padding:9px 4px; border-top:1px solid var(--trait);
  transition:background var(--o-court) var(--o-lourd);
}
.ms-l:last-child{ border-bottom:1px solid var(--trait); }
.ms-l[data-va-id]{ cursor:pointer; }
.ms-l[data-va-id]:hover{ background:var(--carte-on); }
.ms-tete span{ font:500 9px/1.6 var(--o-mono); letter-spacing:.18em; color:var(--encre-faible); }
.ms-tete{ border-top:0; }
.ms-q{ font:400 12.5px/1.5 var(--o-sans); color:var(--encre); }
.ms-q i{ display:block; font:400 9.5px/1.6 var(--o-mono); font-style:normal; letter-spacing:.14em; color:var(--al-inconnu); }
.ms-a,.ms-v{ font:400 10px/1.6 var(--o-mono); color:var(--encre-faible); letter-spacing:.04em; }
.ms-b{ font:400 11.5px/1.5 var(--o-mono); color:var(--encre-faible); text-align:right; }
.ms-t{ font:500 12.5px/1.5 var(--o-mono); color:var(--encre-fort); text-align:right; }
.ms-d{ font:400 10px/1.6 var(--o-mono); color:var(--encre-faible); letter-spacing:.03em; }
.ms-l.vide .ms-q,.ms-l.vide .ms-t{ color:var(--encre-faible); }
.ms-l.vide{ background:linear-gradient(90deg,transparent,transparent 6px,var(--fond2) 6px); }
@media (max-width:760px){
  .ms-l{ grid-template-columns:1fr auto; gap:3px 10px; }
  .ms-v,.ms-d{ grid-column:1/-1; }
  .ms-b,.ms-t{ text-align:left; }
}

/* ══════════════════════════════════════════════════════════════════════════
   L'ANALYSE (10.08) — la chronologie lue, la preuve sous le radar, le R&D.
   Règle de dessin tenue partout ici : la LECTURE ne doit jamais avoir l'air
   d'être le fait. Le fait garde son corps de texte plein ; tout ce qui est
   déduit s'écarte du bord gauche derrière un filet, et se lit d'un cran plus
   bas en contraste. On voit la hiérarchie avant de lire un mot.
   ══════════════════════════════════════════════════════════════════════════ */

/* — la catégorie : une pastille, pas un badge coloré. La couleur ne dit pas
     « grave », elle dit de quelle famille de relation il s'agit.          */
.cat-pastille{
  margin-left:auto; font:500 9px/1 var(--o-mono); letter-spacing:.12em;
  padding:4px 8px; border:1px solid color-mix(in srgb,var(--ct) 42%,transparent);
  color:var(--ct); white-space:nowrap;
}
.ct-hostile{ --ct:var(--al-hostile) } .ct-friction{ --ct:var(--al-friction) }
.ct-allie{ --ct:var(--al-allie) }     .ct-neutre{ --ct:var(--al-neutre) }
.ev-poids{ font:500 8.5px/1 var(--o-mono); letter-spacing:.18em; color:var(--encre-faible) }
.ev-poids.p3{ color:var(--encre-fort) }
.cat-pastille + .ev-poids{ margin-left:0 }

/* — le filtre : un masque, pas un tri. La chronologie garde son ordre.    */
.cat-filtre{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px }
.cat-filtre button{
  font:500 9px/1 var(--o-mono); letter-spacing:.14em; padding:6px 9px;
  border:1px solid var(--trait); background:transparent; color:var(--encre-faible);
  cursor:pointer; display:flex; align-items:center; gap:6px;
  transition:color var(--o-court),border-color var(--o-court),background var(--o-court);
}
.cat-filtre button b{ font:500 9px/1 var(--o-mono); color:var(--encre-faible); opacity:.7 }
.cat-filtre button:hover{ border-color:var(--trait-fort); color:var(--encre) }
.cat-filtre button.on{ border-color:var(--accent); color:var(--encre-fort); background:var(--carte) }
.cat-filtre button.on b{ color:var(--accent); opacity:1 }
.cat-filtre .cf-hostile.on{ border-color:var(--al-hostile) }
.cat-filtre .cf-friction.on{ border-color:var(--al-friction) }
.cat-filtre .cf-allie.on{ border-color:var(--al-allie) }

/* — LA LECTURE. Filet à gauche : tout ce qui est là-dedans est déduit.    */
.lec{
  display:grid; gap:14px; margin-top:2px; padding:13px 0 2px 15px;
  border-left:var(--ep-plein) solid color-mix(in srgb,var(--accent) 34%,transparent);
}
.lec-l h4{
  margin:0 0 5px; font:500 8.5px/1 var(--o-mono); letter-spacing:.2em; color:var(--encre-faible);
  display:flex; align-items:baseline; gap:9px;
}
.lec-l h4 em{ font:400 9px/1 var(--o-mono); font-style:normal; letter-spacing:.1em; color:var(--al-inconnu) }
.lec-l > p{ margin:0; font:400 12.5px/1.68 var(--o-sans); color:var(--encre); max-width:78ch }
.lec-do > p{ color:var(--encre-fort) }
.lec-no{ margin:7px 0 0 !important; font:400 11.5px/1.6 var(--o-sans) !important; color:var(--encre-faible) !important }
.lec-no b{ font:500 9px/1 var(--o-mono); letter-spacing:.14em; color:var(--al-hostile) }
.lec-rd > p b{ color:var(--encre-fort) }
.lec-doc{
  margin:2px 0 0; padding-top:11px; border-top:1px dashed var(--trait);
  font:400 11.5px/1.65 var(--o-sans); color:var(--encre-faible); max-width:80ch;
}
.lec-doc b{ font:500 9px/1 var(--o-mono); letter-spacing:.14em; color:var(--encre) }
.lec-trou{ display:block; margin-top:5px; font:400 11px/1.6 var(--o-mono); color:var(--al-friction) }

/* — CE QUE ÇA TOUCHE : le sigle, sa valeur actuelle, et le sens.          */
.touche{ display:flex; flex-wrap:wrap; gap:7px }
.tc{
  display:inline-flex; align-items:baseline; gap:7px; padding:5px 9px;
  border:1px solid var(--trait); background:var(--fond2,transparent);
}
.tc b{ font:500 10px/1 var(--o-mono); letter-spacing:.1em; color:var(--encre-fort) }
.tc em{ font:500 12px/1 var(--o-mono); font-style:normal; color:var(--encre) }
.tc em.nul{ font-size:9px; letter-spacing:.1em; color:var(--encre-faible) }
.tc i{ font:400 9px/1 var(--o-mono); font-style:normal; letter-spacing:.12em; color:var(--encre-faible) }
.tc.plus{ border-color:color-mix(in srgb,var(--al-allie) 45%,transparent) }
.tc.plus i{ color:var(--al-allie) }
.tc.moins{ border-color:color-mix(in srgb,var(--al-friction) 50%,transparent) }
.tc.moins i{ color:var(--al-friction) }
.tc.chg{ border-color:color-mix(in srgb,var(--al-hostile) 32%,transparent) }
.tc.chg i{ color:var(--al-hostile) }

/* — les deux états d'absence. Ils ne se ressemblent pas exprès : l'un est
     une tâche ouverte, l'autre une erreur de synchronisation.             */
.ev-nonlu{
  margin:2px 0 0; padding:10px 13px; border:1px dashed var(--trait-fort);
  font:400 11.5px/1.65 var(--o-sans); color:var(--encre-faible); max-width:80ch;
}
.ev-desync{
  margin:2px 0 0; padding:10px 13px; color:var(--al-hostile);
  border:1px solid color-mix(in srgb,var(--al-hostile) 45%,transparent);
  font:400 11.5px/1.65 var(--o-sans); max-width:80ch;
}
.ev.vise{ box-shadow:inset var(--ep-plein) 0 0 var(--accent) }

/* — LA PREUVE SOUS LE RADAR ─────────────────────────────────────────────*/
.apx{ display:grid; gap:1px; background:var(--trait); border:1px solid var(--trait) }
.apx-l{
  background:var(--fond); display:grid; align-items:baseline; gap:4px 14px;
  grid-template-columns:34px 1fr 30px minmax(150px,auto); padding:9px 13px;
}
.apx-l[data-axe-appui]{ cursor:default }
.apx-l.ok[data-axe-appui],.apx-l.contra[data-axe-appui]{ cursor:pointer }
.apx-l.ok[data-axe-appui]:hover,.apx-l.contra[data-axe-appui]:hover{ background:var(--carte) }
.apx-c{ font:500 10px/1 var(--o-mono); letter-spacing:.1em; color:var(--encre-fort) }
.apx-n{ font:400 12px/1.4 var(--o-sans); color:var(--encre) }
.apx-v{ font:500 13px/1 var(--o-mono); color:var(--encre-fort); text-align:right }
.apx-v.nul{ font-size:9px; color:var(--encre-faible) }
.apx-p i{ font:500 9px/1.5 var(--o-mono); font-style:normal; letter-spacing:.1em; margin-right:9px }
.apx-p i.plus{ color:var(--al-allie) }
.apx-p i.moins{ color:var(--al-friction) }
.apx-p i.nul{ color:var(--encre-faible); letter-spacing:.06em }
.apx-d{ grid-column:2/-1; font:400 9.5px/1.5 var(--o-mono); color:var(--al-inconnu); letter-spacing:.06em }
.apx-l.nul .apx-n{ color:var(--encre-faible) }
.apx-tension{
  margin-top:16px; padding:13px 15px; border-left:var(--ep-plein) solid var(--al-friction);
  background:var(--carte); font:400 12px/1.7 var(--o-sans); color:var(--encre);
}
.apx-tension > b{ font:500 9px/1 var(--o-mono); letter-spacing:.18em; color:var(--al-friction) }
.apx-tension span{ display:block; margin-top:5px }

/* — LE CORPUS (panneau R&D) ─────────────────────────────────────────────*/
.corpus{ display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:1px;
  background:var(--trait); border:1px solid var(--trait) }
.corpus > div{ background:var(--fond); padding:14px 15px; display:grid; gap:5px }
.corpus b{ font:500 25px/1 var(--o-mono); color:var(--encre-fort) }
.corpus span{ font:500 9px/1.4 var(--o-mono); letter-spacing:.14em; color:var(--encre-faible) }

@media (max-width:760px){
  .apx-l{ grid-template-columns:30px 1fr 28px; }
  .apx-p{ grid-column:1/-1 }
  .cat-pastille{ margin-left:0 }
}

/* ══ PIÈCES JOINTES — l'onglet et l'index central (29/08/2026) ══════════
   Phil : « la plupart du temps les gens n'ont pas le temps, ils regardent
   la donnée texte puis les pièces jointes ». Donc ici la HIÉRARCHIE est
   inversée par rapport à la chronologie : le lecteur d'abord, le texte du
   fait après et en gris. Dans la chronologie c'est le fait qui compte et
   la pièce qui l'appuie ; ici c'est la pièce qu'on est venu chercher.  */
.pj-l{display:grid;gap:14px}
.pj-c{margin:0;padding:13px 15px 12px;border:1px solid var(--trait);background:var(--carte);
  display:flex;flex-direction:column;gap:9px}
.pj-c.pj-sens{border-left:2px solid var(--al-hostile)}
.pj-h{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap}
.pj-t{font:500 8.5px/1 var(--o-mono);letter-spacing:.2em;color:var(--accent)}
.pj-d{font:500 10px/1 var(--o-mono);letter-spacing:.1em;color:var(--encre-fort)}
.pj-qui{margin-left:auto;font:500 9px/1 var(--o-mono);letter-spacing:.16em;
  color:var(--encre-faible);border:1px solid var(--trait);padding:5px 9px;
  transition:color var(--o-court),border-color var(--o-court)}
.pj-qui:hover{color:var(--accent);border-color:var(--accent)}
.pj-c audio{width:100%;max-width:520px;height:34px;filter:saturate(.35) contrast(.95)}
[data-orbite="nuit"] .pj-c audio{filter:invert(1) hue-rotate(180deg) saturate(.3) contrast(.9)}
.pj-img img{max-width:100%;display:block;border:1px solid var(--trait)}
.pj-dl{font:500 9.5px/1 var(--o-mono);letter-spacing:.14em;color:var(--accent)}
.pj-f{margin:0;font:400 12.5px/1.6 var(--o-sans);color:var(--encre-faible);max-width:78ch}
.pj-w{margin:0;font:500 9px/1 var(--o-mono);letter-spacing:.16em;color:var(--encre-faible);opacity:.7}
/* Le SCELLÉ, version index : le texte du fait sensible reste couvert, le
   lecteur non. Pas de maintien de 520 ms ici — on est déjà dans un écran
   qui ne s'ouvre que volontairement, et redemander l'appui à chaque carte
   serait un péage. Un survol suffit à découvrir. */
.pj-scelle{filter:blur(4.5px);opacity:.5;transition:filter var(--o-moyen) var(--o-lourd),opacity var(--o-moyen) var(--o-lourd)}
.pj-c:hover .pj-scelle,.pj-c:focus-within .pj-scelle{filter:none;opacity:1}
.pj-lien{font:500 9.5px/1 var(--o-mono);letter-spacing:.16em;color:var(--accent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding-bottom:2px}
.pj-lien:hover{border-bottom-color:var(--accent)}
/* le compteur du bouton PJ de la barre — même rôle que le <b> des onglets */
#btnPieces .ic-n{font-style:normal;font-size:9px;opacity:.55;margin-left:1px}
@media (prefers-reduced-motion:reduce){.pj-scelle{transition:none}}

/* ══ PAGER DE CHRONOLOGIE (29/08/2026) ══════════════════════════════════
   Phil : « ça ne doit pas recharger ni sauter, je veux pouvoir spammer ‹ et
   › pour aller vite. » Deux décisions de mise en page en découlent, et ce
   sont elles qui font tout le travail :
     · le pager est AU-DESSUS de la liste. En dessous, il se déplace à
       chaque page (les faits n'ont pas la même hauteur) et le curseur n'est
       plus sur le bouton au clic suivant. Au-dessus, il ne bouge pas.
     · rien ne s'anime au changement de page. Une transition, même de
       120 ms, se voit comme un scintillement quand on clique dix fois de
       suite — et c'est exactement ce qu'il veut pouvoir faire. Les `.ev`,
       elles, gardent leur cascade : elles arrivent d'un rendu, pas d'un
       clic de flèche.
   Les flèches sont de vraies cibles (34 px) : on clique vite, pas juste.  */
.chr-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;
  padding-bottom:11px;border-bottom:1px solid var(--trait)}
.chr-b{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--trait);
  font:400 15px/1 var(--o-mono);color:var(--encre-faible);
  transition:color var(--o-court),border-color var(--o-court)}
.chr-b:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}
.chr-b:disabled{opacity:.24;cursor:default}
.chr-b:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.chr-p{font:400 13px/1 var(--o-mono);color:var(--encre-faible);letter-spacing:.06em;
  min-width:52px;text-align:center}
.chr-p b{font-weight:500;color:var(--encre-fort);font-size:15px}
.chr-p i{font-style:normal}
.chr-x{font:500 9px/1.5 var(--o-mono);letter-spacing:.14em;color:var(--encre-faible)}
.chr-x b{color:var(--accent)}
.chr-raz{margin-left:auto;font:500 9px/1 var(--o-mono);letter-spacing:.16em;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:7px 10px}
.chr-raz:hover{border-color:var(--accent)}