/* JMP.net — V1, la feuille de LECTURE.
   Ce n'est PAS l'identité définitive : c'est une colonne de lecture calme,
   suffisante pour prouver la chaîne (Phase 1). Le langage visuel du site —
   tokens, typographie, galaxie — vient de l'inventaire de shadoks.css en
   Phase 2. Ce qui est déjà tenu ici, et qui restera : AUCUNE couleur hors de
   :root, AUCUNE taille hors des jetons --t-*, AUCUN px brut d'espacement —
   le lint (moteur/lint_design.py) le fait respecter. */
:root{
  --paper:#f4f1ea; --paper-deep:#ebe6dc; --ink:#1e2320; --ink-soft:#5a6360;
  --accent:#8a5a2b; --line:rgba(30,35,32,.16); --line-strong:rgba(30,35,32,.34);
  --white:#ffffff; --alerte:#7d2b21; --alerte-fond:#fdecea;
  --s0:2px; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --t-hero:clamp(2.4rem,5.5vw,4rem);
  --t-thesis:clamp(1.8rem,3.4vw,2.6rem);
  --t-h1:clamp(1.9rem,3.6vw,2.7rem);
  --t-h2:clamp(1.45rem,2.6vw,1.9rem);
  --t-h3:clamp(1.2rem,2vw,1.45rem);
  --t-h4:clamp(1.05rem,1.5vw,1.25rem);
  --t-lead:clamp(1.15rem,1.7vw,1.35rem);
  --t-body:1.0625rem; --t-small:.875rem;
  --t-kicker:clamp(.72rem,1vw,.85rem); --t-kicker-display:.95rem;
  --lh-corps:1.65; --lh-titres:1.12;
  --ls-tight:-.02em; --ls-wide:.14em;
  --max:1120px; --lecture:68ch;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* — la nuit de la galaxie (grammaire JustAMoment, tokenisée) — */
  --nuit:#0e2a52; --nuit-fond:#12365e; --nuit-mi:#1b4f8a; --nuit-haut:#3579b0; --nuit-clair:#6db8de;
  --nuit-profonde:#0e2130; --creme:#f4ece0; --creme-72:rgba(244,236,224,.72); --creme-40:rgba(244,236,224,.4);
  --or:#ffd27a; --or-clair:#ffe3a0; --braise:#e8703a; --ombre-nuit:rgba(6,24,46,.5);
  --planete-a:#2f7f92; --planete-b:#d9642f; --planete-c:#8fb3d9;
  /* — la profondeur de la scène (Phase 3A.1) : des niveaux nommés, jamais un z-index épars — */
  --z-acteur-derriere:0; --z-scene:1; --z-acteur:2; --z-recit:4; --z-avant-plan:5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:var(--t-body);line-height:var(--lh-corps);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration-thickness:from-font;text-underline-offset:.12em}
a:hover{color:var(--ink)}
img{max-width:100%;height:auto;display:block}
.site-shell{min-height:100vh;display:flex;flex-direction:column}
.container{width:min(calc(100% - var(--s5)),var(--max));margin:0 auto}
@media (max-width:640px){.container{width:min(calc(100% - var(--s3)),var(--max))}}

/* — l'en-tête — */
.site-header{border-bottom:1px solid var(--line);background:var(--paper)}
.site-header .inner{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0}
.brand{font-family:var(--sans);font-weight:600;font-size:var(--t-small);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink);text-decoration:none}
.site-header nav{display:flex;gap:var(--s3)}
.site-header nav a{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft);text-decoration:none}
.site-header nav a:hover,.site-header nav a[aria-current]{color:var(--ink)}

/* — les blocs de texte — */
.kicker{font-family:var(--sans);font-weight:600;font-size:var(--t-kicker);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s2)}
h1{font-weight:400;font-size:var(--t-h1);line-height:var(--lh-titres);letter-spacing:var(--ls-tight);margin:0 0 var(--s3);text-wrap:balance}
h2{font-weight:400;font-size:var(--t-h2);line-height:var(--lh-titres);letter-spacing:var(--ls-tight);margin:var(--s5) 0 var(--s2)}
h3{font-weight:400;font-size:var(--t-h3);line-height:var(--lh-titres);margin:var(--s4) 0 var(--s2)}
.lead{font-size:var(--t-lead);line-height:1.4;color:var(--ink-soft);margin:0 0 var(--s4);text-wrap:pretty}
p{margin:0 0 var(--s3)}
blockquote{margin:var(--s4) 0;padding:0 0 0 var(--s3);border-left:2px solid var(--line-strong);font-style:italic;color:var(--ink-soft)}
ul{margin:0 0 var(--s3);padding-left:var(--s3)}
li{margin:0 0 var(--s1)}
code{font-family:var(--mono);font-size:var(--t-small);background:var(--paper-deep);padding:0 var(--s1)}

/* — un billet — */
.page-billet,.page-journal,.page-accueil,.page-generique{flex:1;padding:var(--s6) 0 var(--s7)}
.billet-wrap,.page-wrap,.accueil-wrap,.journal-wrap{max-width:var(--lecture)}
.billet-date{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft);margin:0 0 var(--s4)}
.billet-corps p,.billet-corps li{text-wrap:pretty}
.billet-fort{font-weight:600}
.billet-chute{font-style:italic;color:var(--ink-soft)}
.billet-figure{margin:var(--s4) 0}
.billet-figure img{border:1px solid var(--line)}
.billet-figure figcaption,.billet-entete figcaption{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft);margin-top:var(--s1)}
.billet-figure.est-manquante{padding:var(--s3);border:1px dashed var(--line-strong);color:var(--ink-soft);font-family:var(--sans);font-size:var(--t-small)}
.billet-embed{padding:var(--s2) var(--s3);border:1px solid var(--line);background:var(--white)}
.billet-embed-note{display:block;font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft);margin-top:var(--s1)}
.billet-retour{margin-top:var(--s6);font-family:var(--sans);font-size:var(--t-small)}
.billet-brouillon{background:var(--alerte-fond);color:var(--alerte);font-family:var(--sans);font-size:var(--t-small);padding:var(--s2) 0;text-align:center}

/* — le Journal et l'accueil — */
.journal-compte{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft)}
.journal-an{font-family:var(--sans);font-weight:600;font-size:var(--t-kicker-display);letter-spacing:var(--ls-wide);color:var(--ink-soft);border-top:1px solid var(--line);padding-top:var(--s2)}
.billet-vignette{display:block;padding:var(--s2) 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.billet-vignette:hover .billet-vtitre{color:var(--accent)}
.billet-meta{display:block;font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft)}
.billet-vtitre{display:block;font-size:var(--t-h3);line-height:1.25;margin-top:var(--s1)}
.billet-vlead{display:block;color:var(--ink-soft);margin-top:var(--s1)}
.accueil-titre{font-size:var(--t-thesis)}
.accueil-journal{margin-top:var(--s6)}
.journal-tout{font-family:var(--sans);font-size:var(--t-small);margin-top:var(--s3)}

/* — le pied — */
.site-footer{border-top:1px solid var(--line);padding:var(--s4) 0 var(--s5);font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft)}
.footer-triptych{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s3)}
.tri-un{display:flex;flex-direction:column}
.tri-nom{color:var(--ink);text-decoration:none;font-weight:600}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:baseline}
.footer-links a{margin-right:var(--s2)}
.footer-build{margin-left:auto;font-family:var(--mono);color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ═══════════════════════════════════════════════════════════════════════════
   LA GALAXIE (Phase 2 · mise en scène 2B) — la grammaire visuelle de
   JustAMoment, sans le Shadok. L'inventaire : docs/INVENTAIRE-SHADOKS-CSS.md.
   2B : la galaxie est le SUJET (cadre serré, pleine largeur) ; les jalons
   perdent leurs boîtes et gagnent une hiérarchie ; les mondes ont leur propre
   langage (disque lumineux, halo, orbite, nom en italique) ; la sélection
   fait RACONTER la scène ; les flèches s'allègent ; trois mises en scène.
   ═══════════════════════════════════════════════════════════════════════════ */
/* — le ciel — */
.galaxie-ciel{position:relative;overflow:hidden;color:var(--creme);
  background:radial-gradient(120% 100% at 32% 24%,var(--nuit-clair) 0%,var(--nuit-haut) 36%,var(--nuit-mi) 66%,var(--nuit) 100%)}
.galaxie-ciel a{color:var(--or)} .galaxie-ciel a:hover{color:var(--or-clair)}
@keyframes gScintille{0%,100%{opacity:.95}50%{opacity:.25}}
.g-etoile{position:absolute;color:var(--creme);font-family:var(--serif);font-size:var(--t-h3);animation:gScintille 3.4s ease-in-out infinite;pointer-events:none}
.g-etoile-1{left:52%;top:9%} .g-etoile-2{left:91%;top:9%;animation-delay:.9s} .g-etoile-3{left:74%;top:18%;animation-delay:1.7s} .g-etoile-4{left:30%;top:54%;animation-delay:.5s;font-size:var(--t-small)} .g-etoile-5{left:62%;top:5%;animation-delay:2.3s;font-size:var(--t-small)}
/* — la signature (arbitrage 2B) : seule dans la scène, en coin ; une phrase courte pourra suivre (.g-lead) — */
.g-tete{position:relative;z-index:2;width:min(calc(100% - var(--s5)),var(--max));margin:0 auto;padding:var(--s3) 0 0}
.g-signature{font-family:var(--sans);font-weight:600;font-size:var(--t-kicker-display);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--or);margin:0}
.g-lead{font-size:var(--t-small);font-style:italic;color:var(--creme-72);max-width:36ch;margin:var(--s1) 0 0}
/* — la scène : PLEINE LARGEUR, cadrée sur ce qui est dessiné (aspect-ratio généré) — */
.galaxie-scene{position:relative;width:100%;max-height:calc(100vh - 8rem);margin:0 auto}
.g-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;font-family:var(--mono);z-index:var(--z-scene)}
.g-svg a{outline:none}
.g-svg a:focus-visible .g-cible{stroke:var(--or);stroke-width:2.5;stroke-dasharray:4 4}
/* le trait : pointillé qui avance (KEEP dashMv) */
@keyframes gAvance{to{stroke-dashoffset:-54}}
.g-trace{fill:none;stroke:var(--creme);stroke-width:4.2;stroke-dasharray:13 11;stroke-linecap:round;stroke-linejoin:round;opacity:.78;animation:gAvance 4s linear infinite}
.g-masque{fill:none;stroke:var(--white);stroke-width:22;stroke-linecap:round;stroke-linejoin:round}
.g-futur{fill:none;stroke:var(--creme);stroke-width:3.5;stroke-dasharray:3 13;stroke-linecap:round;opacity:.32}
.g-aujourdhui{fill:var(--or)}
.g-branche{fill:none;stroke:var(--creme);stroke-width:3.4;stroke-dasharray:13 11;stroke-linecap:round;opacity:.72;animation:gAvance 4s linear infinite}
/* — les jalons : hiérarchie par importance, aucune boîte — */
.g-guide{stroke:var(--creme);stroke-width:1;opacity:.5}
.g-guide--1{opacity:.28} .g-guide--3{opacity:.55}
.g-point{fill:var(--creme)} .g-point--1{opacity:.7} .g-point--monde{fill:var(--or)}
.g-cible{fill:transparent}
.g-jalon text{fill:var(--creme);filter:drop-shadow(0 1px 6px var(--ombre-nuit))}
.g-jalon-nom{font-weight:600} .g-jalon-annees{opacity:.72}
.g-jalon--1 text{opacity:.62} .g-jalon--1 .g-jalon-nom{font-weight:500}
.g-jalon--3 .g-jalon-annees{fill:var(--or);opacity:1}
.g-jalon:hover text,.g-jalon:focus-visible text,.g-jalon.est-choisi text{opacity:1;fill:var(--or-clair)}
.g-jalon:hover .g-cible,.g-jalon.est-choisi .g-cible{fill:rgba(255,210,122,.12)}
/* — les mondes : disque lumineux, halo, orbite, satellite, nom en italique — */
.g-halo-stop{stop-color:var(--planete-a);stop-opacity:.55} .g-halo-fin{stop-color:var(--planete-a);stop-opacity:0}
.g-halo-stop--planete-b{stop-color:var(--planete-b)} .g-halo-stop--planete-c{stop-color:var(--planete-c)}
.g-halo{opacity:.9}
/* LE TRAIT À LA MAIN (17 septembre 2026) : l'astre n'est plus un <circle> mais
   un chemin tremblé, tiré d'un trait et jamais refermé tout à fait. Encre crème,
   bouts ronds — une plume, pas un compas. La couleur reste le remplissage : le
   geste change, pas la grammaire. */
.g-astre{fill:var(--planete-a);stroke:var(--creme);stroke-width:1.9;
  stroke-linejoin:round;stroke-linecap:round;paint-order:fill stroke}
.g-planete--planete-b .g-astre{fill:var(--planete-b)} .g-planete--planete-c .g-astre{fill:var(--planete-c)}
.g-orbite{fill:none;stroke:var(--creme);stroke-width:.9;stroke-dasharray:2 5;
  stroke-linecap:round;opacity:.55}
.g-satellite{fill:var(--creme)}
.g-planete-nom{fill:var(--creme);font-family:var(--serif);font-style:italic;font-weight:400;filter:drop-shadow(0 1px 8px var(--ombre-nuit))}
.g-planete-annees{fill:var(--creme);opacity:.7}
.g-planete:hover .g-orbite,.g-planete:focus-visible .g-orbite,.g-planete.est-lie .g-orbite{stroke:var(--or);opacity:1;stroke-width:1.2}
.g-planete:hover .g-halo,.g-planete.est-lie .g-halo{opacity:1}
.g-planete:hover .g-planete-nom,.g-planete.est-lie .g-planete-nom{fill:var(--or-clair)}
/* — les flèches : la mécanique reste, l'importance baisse ; pleine sous sélection — */
.g-fleche{opacity:.42;transition:opacity .25s ease}
.g-fleche line{stroke:var(--creme);stroke-width:1.5} .g-fleche polygon{fill:var(--creme);stroke:var(--nuit-profonde);stroke-width:.6}
.g-fleche.est-lie{opacity:1}
.g-centre-trait{fill:var(--creme);stroke:var(--creme);stroke-width:1.6;stroke-linejoin:round;
  stroke-linecap:round;filter:drop-shadow(0 12px 26px var(--ombre-nuit))}
.g-centre text{fill:var(--nuit);font-family:var(--mono)}
/* — la sélection : la scène raconte, le reste s'efface — */
.g-selection .g-jalon:not(.est-choisi),.g-selection .g-point:not(.est-choisi):not(.g-point--monde),.g-selection .g-guide:not(.est-choisi){opacity:.3;transition:opacity .3s ease}
.g-selection .g-planete:not(.est-lie){opacity:.45;transition:opacity .3s ease}
.g-selection .g-fleche:not(.est-lie){opacity:.2}
.g-raconte .g-tete,.g-raconte .g-aide{opacity:.18;transition:opacity .3s ease}
.g-recit{position:absolute;z-index:var(--z-recit);width:280px;max-width:46vw;padding:var(--s3) var(--s3) var(--s2);color:var(--creme);font-family:var(--serif);
  background:radial-gradient(closest-side,rgba(14,33,48,.8),rgba(14,33,48,.55) 62%,rgba(14,33,48,0));border-radius:50% / 44%;
  transform:translate(0,-50%)}
.g-recit[data-cote="droite"]{transform:translate(var(--s4),-50%)}
.g-recit[data-cote="gauche"]{transform:translate(calc(-100% - var(--s4)),-50%)}
.g-recit p{margin:0}
.g-recit-nom{font-family:var(--mono);font-weight:600;font-size:var(--t-small);letter-spacing:var(--ls-wide);color:var(--or)}
.g-recit-periode{font-family:var(--mono);font-size:var(--t-kicker);color:var(--creme-72);margin:0 0 var(--s1)}
.g-recit-texte{font-style:italic;font-size:var(--t-small);line-height:1.5;text-wrap:pretty}
.g-recit-liens{margin-top:var(--s2);font-family:var(--sans);font-size:var(--t-small);display:flex;flex-direction:column;gap:var(--s1)}
.g-recit-monde{font-family:var(--serif);font-style:italic;font-size:var(--t-body)}
.g-recit-lies{color:var(--creme-72)}
.g-recit-fermer{margin-top:var(--s2);border:0;background:none;color:var(--creme-72);font-family:var(--sans);font-size:var(--t-kicker);letter-spacing:var(--ls-wide);text-transform:uppercase;cursor:pointer;padding:0}
.g-recit-fermer:hover{color:var(--or)}
.g-passer{position:absolute;right:var(--s3);bottom:var(--s2);z-index:var(--z-avant-plan);border:1px solid var(--creme-40);background:none;color:var(--creme);font-family:var(--sans);font-size:var(--t-small);padding:var(--s1) var(--s2);cursor:pointer}
.g-aide{position:relative;z-index:2;width:min(calc(100% - var(--s5)),var(--max));margin:0 auto;padding:var(--s2) 0 var(--s3);font-family:var(--serif);font-style:italic;font-size:var(--t-small);color:var(--creme-72)}
/* ═══ NALA — l'acteur de scène (Phase 3B, renderer screen-break) ══════════════
   LES WORLDS HABITENT LA GALAXIE. NALA HABITE LES COUCHES DU SITE.
   Les couches, de l'arrière vers l'avant : la page derrière (nala-sb-fond) ·
   Nala derrière la surface (nala-sb-peek, clippée par le masque du kit) · le
   bord déchiré, DEVANT elle (nala-sb-bord, du kit) · le commentaire.
   Les états (data-etat) : intact → fissure → dechire → ouvert (+ nala--passe).
   Timings et easing : animation-spec.json (crack 180 · tear 240 · peek 420 ·
   retreat 380 · close 260 · cubic-bezier(.22,.61,.36,1)). Aucune boucle. */
.nala{position:absolute;z-index:var(--z-acteur);pointer-events:none}
.nala--screen-break{width:var(--nala-boite,360px);height:var(--nala-boite,360px);transform:translate(-50%,-50%)}
.nala-corps,.nala-sb{display:block;width:100%;height:100%;overflow:visible}
.nala-sb-fond{fill:var(--nuit-profonde);fill-opacity:.36}
/* la fissure : un instant, puis elle devient l'accroc */
.nala-sb-fissure{opacity:0;transition:opacity .18s cubic-bezier(.22,.61,.36,1)}
.nala[data-etat="fissure"] .nala-sb-fissure{opacity:1}
/* l'accroc : petit (dechire), puis ouvert — une échelle, jamais un pop */
.nala-sb-trou{transform-box:view-box;transform-origin:256px 256px;transform:scale(.45);opacity:0;
  transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .2s cubic-bezier(.22,.61,.36,1)}
.nala[data-etat="dechire"] .nala-sb-trou{transform:scale(.62);opacity:1}
.nala[data-etat="ouvert"] .nala-sb-trou{transform:scale(1);opacity:1;transition-duration:.42s,.24s}
/* Nala : derrière la surface ; elle monte un peu en apparaissant (maxHeadTravelPx), redescend en se retirant */
.nala-sb-peek{opacity:0;transform:translateY(40px);transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .32s cubic-bezier(.22,.61,.36,1)}
.nala--passe .nala-sb-peek{opacity:1;transform:translateY(0)}
.nala:not(.nala--passe) .nala-sb-peek{transition-duration:.38s,.3s}
.nala--vite .nala-sb-trou,.nala--vite .nala-sb-peek,.nala--vite .nala-sb-fissure{transition-duration:.14s}
/* le commentaire : Nala + sa phrase — ni bulle, ni filet, ni boîte, ni fil ; une poche de ciel libre (data-poche) */
.nala-parole{position:absolute;width:max-content;max-width:min(19ch,34vw);margin:0;padding:0;
  color:var(--creme);font-family:var(--serif);font-style:italic;font-size:var(--t-small);line-height:1.4;text-wrap:pretty;
  text-shadow:0 1px 8px var(--ombre-nuit);opacity:0;transition:opacity .35s ease}
.nala-parole[data-poche="droite"]{left:75%;top:44%}
.nala-parole[data-poche="haut-droite"]{left:62%;bottom:72%}
.nala-parole[data-poche="gauche"]{right:75%;top:44%;text-align:right}
.nala-parole[data-poche="haut"]{left:24%;bottom:74%}
.nala-parole.est-dite{opacity:1}
/* iPhone : la carte s'est déchirée — le même accroc dans la surface éditoriale, en flux, l'état final directement */
.chrono-nala{position:static;display:flex;align-items:center;gap:0;list-style:none;margin:var(--s2) 0 var(--s3) calc(-1 * var(--s4));padding:0}
.chrono-nala::before{content:none}
.chrono-nala-figure{flex:0 0 auto;width:var(--nala-boite,250px);height:var(--nala-boite,250px);margin:calc(-1 * var(--s4)) 0}
.chrono-nala .nala-sb{display:block;width:100%;height:100%;overflow:visible}
.chrono-nala .nala-sb-fissure{opacity:0}
.chrono-nala .nala-sb-trou{transform:scale(1);opacity:1;transition:none}
.chrono-nala .nala-sb-peek{opacity:1;transform:none;transition:none}
.chrono-nala-texte{margin:0 0 0 calc(-1 * var(--s4));padding:0;max-width:26ch;font-family:var(--serif);font-style:italic;font-size:var(--t-small);line-height:1.4;color:var(--ink-soft,var(--ink))}
@media (prefers-reduced-motion:reduce){
  .nala .nala-sb-fissure,.nala[data-etat] .nala-sb-trou,.nala .nala-sb-peek,.nala:not(.nala--passe) .nala-sb-peek,.nala .nala-parole{transition:none}
}
/* — la composition canonique (arbitrage 2B) : B — la galaxie prend l'écran en paysage,
   la signature en coin ; en portrait (iPad), la signature au-dessus et la scène contrainte — */
@media (min-aspect-ratio:5/4){
.galaxie-ciel{min-height:calc(100vh - 4rem);display:flex;flex-direction:column;justify-content:center}
.g-tete{position:absolute;top:var(--s4);left:var(--s5);width:auto;max-width:30ch;padding:0}
.galaxie-scene{max-height:calc(100vh - 7rem)}
.g-aide{position:absolute;bottom:0;left:0;right:0;width:auto;padding:0 var(--s5) var(--s2)}
}
@media (max-aspect-ratio:5/4) and (min-width:761px){
.galaxie-scene{max-height:calc(100vh - 12rem)}
}
/* la révélation : coupée une fois vue, ou sous reduced-motion — l'état final, tout de suite */
.g-revelee .g-svg *,.g-revelee .g-centre{animation:none!important}
/* L'ÉTAT FINAL S'ÉCRIT, il ne se déduit pas de l'animation : `g-revelee` coupe
   toute animation, et un élément qui portait son propre `stroke-dashoffset` (le
   masque du tracé, la ligne d'une lignée) redevenait alors invisible. Trouvé en
   navigateur : la ligne d'Oléane se traçait, puis disparaïssait à la fin. */
.g-revelee .g-masque,.g-revelee .g-lignee{stroke-dashoffset:0!important}
.g-revelee .g-trace,.g-revelee .g-branche{animation:gAvance 4s linear infinite!important}
.g-revelee .g-fleche{opacity:.42}
@media (prefers-reduced-motion:reduce){
  .g-svg *,.g-centre,.g-etoile{animation:none!important}
  .g-masque{stroke-dashoffset:0!important}
  .g-passer{display:none}
  .g-fleche{opacity:.42}
}
/* — la chronologie, en clair (validée) — */
.chrono-section{padding:var(--s6) 0}
.chrono-wrap{max-width:var(--lecture)}
.chrono{list-style:none;margin:0;padding:0}
.chrono-item{position:relative;padding:var(--s3) 0 var(--s3) var(--s5);border-left:2px solid var(--line)}
.chrono-item::before{content:"";position:absolute;left:-7px;top:calc(var(--s3) + .5em);width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--ink-soft)}
.chrono-item[data-importance="1"]::before{width:8px;height:8px;left:-5px;border-width:1.5px}
.chrono-item--monde::before{background:var(--or);border-color:var(--ink)}
.chrono-item--centre::before{background:var(--ink);border-color:var(--ink)}
.chrono-item[data-decennie]::after{content:attr(data-decennie);position:absolute;left:var(--s5);top:0;font-family:var(--mono);font-size:var(--t-kicker);letter-spacing:var(--ls-wide);color:var(--ink-soft)}
.chrono-item.est-cible{background:var(--paper-deep)}
.chrono-annees{display:block;font-family:var(--mono);font-size:var(--t-small);color:var(--ink-soft)}
.chrono-titre{margin:var(--s1) 0 var(--s1);font-family:var(--mono);font-weight:600;font-size:var(--t-h4);letter-spacing:var(--ls-wide)}
.chrono-item[data-importance="1"] .chrono-titre{font-weight:500;color:var(--ink-soft)}
.chrono-lead{margin:0;color:var(--ink-soft);text-wrap:pretty}
.chrono-liens{margin:var(--s2) 0 0;font-family:var(--sans);font-size:var(--t-small);display:flex;flex-direction:column;gap:var(--s1)}
.chrono-monde{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s2) var(--s1) var(--s1);background:var(--nuit);color:var(--creme);text-decoration:none;border-radius:2px;font-family:var(--serif)}
.chrono-monde em{font-style:italic;color:var(--or)}
.chrono-monde:hover{color:var(--or-clair)}
.chrono-monde-glyphe{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--planete-a) 0 45%,transparent 46%),radial-gradient(circle,rgba(244,236,224,.35),transparent 70%)}
.chrono-monde--planete-b .chrono-monde-glyphe{background:radial-gradient(circle at 40% 35%,var(--planete-b) 0 45%,transparent 46%),radial-gradient(circle,rgba(244,236,224,.35),transparent 70%)}
.chrono-monde--planete-c .chrono-monde-glyphe{background:radial-gradient(circle at 40% 35%,var(--planete-c) 0 45%,transparent 46%),radial-gradient(circle,rgba(244,236,224,.35),transparent 70%)}
/* — la projection ÉTROITE : une vraie expérience, pas un repli (validée, densifiée en 2B) — */
@media (max-width:760px){
  .galaxie-scene,.g-aide,.g-recits,.g-etoile{display:none}
  .galaxie-ciel{padding:var(--s3) 0}
  .g-tete{position:static;max-width:none;width:min(calc(100% - var(--s3)),var(--max));padding:0}
  .g-lead{font-size:var(--t-body);max-width:none}
  .chrono-section{padding:var(--s5) 0 var(--s6)}
  .chrono-item{padding:var(--s3) 0 var(--s4) var(--s4);border-left-color:var(--line-strong)}
  .chrono-item[data-decennie]{margin-top:var(--s4)}
  .chrono-item[data-decennie]::after{left:var(--s4);top:calc(-1 * var(--s3));font-size:var(--t-small);color:var(--ink)}
  .chrono-titre{font-size:var(--t-h3)}
  .chrono-lead{font-size:var(--t-body);color:var(--ink)}
  .chrono-item[data-importance="1"] .chrono-lead{color:var(--ink-soft)}
  .chrono-item--monde{background:var(--nuit);color:var(--creme);border-left-color:var(--or);padding:var(--s3) var(--s3) var(--s3) var(--s4);margin:var(--s2) 0 var(--s2) calc(-1 * var(--s3));border-radius:0 6px 6px 0}
  .chrono-item--monde .chrono-titre{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;font-size:var(--t-h2);color:var(--creme)}
  .chrono-item--monde .chrono-annees,.chrono-item--monde .chrono-lead{color:var(--creme-72)}
  .chrono-item--monde::before{left:calc(var(--s3) - 7px)}
  .chrono-item--monde .chrono-billet{color:var(--or)}
  .chrono-monde{display:flex;padding:var(--s2);font-size:var(--t-body);background:var(--nuit-profonde)}
}
/* — un monde : le même vocabulaire pour tous — */
.page-monde{flex:1}
.monde-origine{background:radial-gradient(120% 100% at 32% 24%,var(--nuit-haut) 0%,var(--nuit-mi) 50%,var(--nuit) 100%);color:var(--creme);padding:var(--s5) 0 var(--s4);overflow:hidden}
.monde-origine a{color:var(--or)}
.monde-origine-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s5);align-items:center}
.monde-carte{width:100%;height:auto;overflow:visible;font-family:var(--mono)}
.monde-carte .g-trace--carte{opacity:.45;stroke-width:4}
.monde-carte .g-branche--carte{opacity:1;stroke-width:5}
.monde-carte .g-orbite--carte{opacity:.8;stroke-width:1.2;stroke-dasharray:3 6}
.monde-carte .g-fleche{opacity:.8}
.g-trace--carte,.g-branche--carte{animation:gAvance 4s linear infinite}
.monde-nom{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--t-hero);color:var(--creme);margin:0 0 var(--s1)}
.monde-periode{font-family:var(--mono);font-size:var(--t-small);letter-spacing:var(--ls-wide);color:var(--or);margin:0 0 var(--s3)}
.monde-naissance,.monde-retour{font-family:var(--sans);font-size:var(--t-small);color:var(--creme-72);margin:0 0 var(--s1)}
.monde-wrap{max-width:var(--lecture);padding:var(--s6) 0 var(--s7)}
.monde-note{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft)}
.monde-liste{list-style:none;padding:0} .monde-liste li{padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.monde-liste time{font-family:var(--mono);font-size:var(--t-small);color:var(--ink-soft);margin-right:var(--s2)}
.billet-mondes{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft);margin:0 0 var(--s3)}
.billet-monde{display:inline-block;padding:0 var(--s1);background:var(--nuit);color:var(--creme);text-decoration:none;border-radius:2px}
@media (max-width:760px){.monde-origine-inner{grid-template-columns:1fr}.monde-carte{max-width:420px;margin:0 auto}.monde-nom{font-size:var(--t-h1)}}
@media (prefers-reduced-motion:reduce){.g-trace,.g-branche,.g-trace--carte,.g-branche--carte{animation:none!important}}

/* ── LES MOTS-CLÉS (décision JMP, 17 septembre 2026) ───────────────────────
   Un `#mot` est un fil, pas une décoration : dans le texte il garde la ligne
   de base et le rythme de la phrase, il ne se souligne qu'au survol. Un mot
   qui mène à une planète ou à un jalon le dit par sa couleur — l'accent du
   site pour un mot, la braise pour un monde, l'or pour un jalon. */
.mot{font-family:var(--sans);font-size:.94em;color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent}
.mot:hover,.mot:focus-visible{border-bottom-color:currentColor}
.mot--monde{color:var(--planete-b)}
.mot--evenement{color:var(--accent)}
.billet-mots{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);margin:var(--s4) 0 0;
  padding-top:var(--s3);border-top:1px solid var(--line)}
.billet-parents{margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid var(--line)}
.parents-titre{font-family:var(--sans);font-weight:600;font-size:var(--t-kicker);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s2)}
.billet-parents ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.billet-parents li{display:flex;flex-direction:column}
.billet-parents a{font-family:var(--serif);font-size:var(--t-h4);color:var(--ink);text-decoration:none}
.billet-parents a:hover{text-decoration:underline}
.parent-fils{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft)}
.page-mot .mot-titre,.page-mots h1{font-family:var(--sans);letter-spacing:var(--ls-tight)}
.mot-billets,.mots-tous{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s3)}
.mot-billet time{display:block;font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft)}
.mot-billet a{font-family:var(--serif);font-size:var(--t-h3);color:var(--ink);text-decoration:none}
.mot-billet a:hover{text-decoration:underline}
.mot-lead{margin:var(--s1) 0 0;color:var(--ink-soft);max-width:var(--lecture)}
.mots-tous{gap:var(--s2)}
.mots-tous li{display:flex;align-items:baseline;gap:var(--s2)}
.mot-note{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft)}
.mot-voisins{margin:var(--s5) 0 0;padding-top:var(--s3);border-top:1px solid var(--line)}
.mot-voisins h2{font-family:var(--sans);font-weight:600;font-size:var(--t-kicker);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s2)}
.mot-voisins a{margin-right:var(--s2)}

/* ── LA PLANÈTE-MÈRE : « JMP World » (décision JMP, 17 septembre 2026) ─────
   Elle n'est pas un monde de plus, donc elle ne se dessine pas comme eux :
   deux orbites croisées au lieu d'une, un disque plus large, un nom plus haut
   dans la hiérarchie. Le trait qui y mène est la trajectoire elle-même qui
   continue — même pointillé, un souffle plus appuyé. */
.g-branche--mere{stroke-width:3.4;opacity:.9}
.g-orbite--mere{stroke-dasharray:2 7;opacity:.55}
.g-orbite--mere2{stroke-dasharray:2 9;opacity:.35}
.g-astre--mere{filter:none}
.g-planete-nom--mere{font-style:italic;letter-spacing:var(--ls-tight)}
.g-planete--mere .g-satellite{opacity:.9}

/* ── LES LUNES D'UN MONDE : ce qui vit DEDANS (17 septembre 2026) ─────────
   France Telecom n'est pas un jalon de la trajectoire, c'est la suite d'Oléane.
   Donc un astre plus petit que le monde, posé sur SON orbite, nommé dans la
   même mono que les jalons — la voix du temps — et non dans l'italique serif
   des mondes : il n'a pas sa propre existence, il a celle de son monde. */
.g-lune{fill:var(--creme);opacity:.9}
.g-lune-nom{font-family:var(--mono);font-weight:500;fill:var(--creme);opacity:.7}

/* ── LA LIGNÉE D'UN MONDE : ce qu'il est DEVENU (17 septembre 2026) ───────
   Oléane → France Telecom → Orange. La ligne prolonge la fuite du monde — même
   pointillé que les branches, un cran plus appuyé parce qu'elle porte plus gros
   — et chaque maillon grandit. Les noms grossissent avec eux : la hiérarchie
   est dans la taille, pas dans une couleur de plus. */
.g-lignee{fill:none;stroke:var(--creme-40);stroke-width:3;stroke-dasharray:13 11;
  stroke-linecap:round}
.g-planete--suite .g-astre{opacity:.96}
.g-planete-nom--suite{font-style:italic}

/* ── LA PORTE DU JOURNAL (18 septembre 2026) ────────────────────────────────
   « Quand on clique sur Journal, il faut proposer le mode d'exploration que
   l'on veut. » Quatre portes, chacune avec ses VRAIS comptes et son époque —
   un axe qui cacherait sa couverture promettrait ce qu'il ne tient pas. La
   bande de temps ne quitte jamais l'écran : les axes se croisent, et les
   trous de cinq ans se voient. */
.portes{margin:var(--s6) 0 var(--s7);border-top:1px solid var(--line);padding-top:var(--s4)}
.portes-titre{font-family:var(--sans);font-weight:600;font-size:var(--t-kicker);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s4)}
.porte{margin:0 0 var(--s5)}
.porte-titre{font-size:var(--t-h3);margin:0 0 var(--s1)}
.porte-quoi{color:var(--ink-soft);font-size:var(--t-small);margin:0 0 var(--s2);max-width:56ch}
.porte-liste{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.porte-liste li{margin:0;display:flex;align-items:baseline;gap:var(--s1)}
.porte-compte{font-family:var(--mono);font-size:var(--t-small);color:var(--ink-soft)}
.porte-epoque{font-family:var(--mono);font-size:var(--t-small);color:var(--ink-soft);opacity:.7}

/* la bande de temps : une barre par année, haute comme le nombre de billets */
.bande{list-style:none;padding:0;margin:0 0 var(--s3);display:flex;align-items:flex-end;
  gap:var(--s0);min-height:96px}
.bande-an{margin:0;flex:1 1 0;min-width:0}
.bande-an a{display:block;text-decoration:none;color:var(--ink-soft);text-align:center}
/* LA JAUGE tient sa propre hauteur. Quand la barre était un frère du libellé dans
   le même flex, le nom d'année en écriture verticale mangeait la place et toutes
   les barres se retrouvaient à la même taille : la bande était plate, et ne
   racontait plus rien. Mesuré en navigateur — le CSS généré, lui, était juste. */
.bande-jauge{display:flex;align-items:flex-end;height:96px;width:100%}
/* la hauteur de chaque barre est GÉNÉRÉE depuis le nombre de billets de l'année :
   aucune valeur écrite à la main, aucun style= en ligne. */
.bande-barre{display:block;width:100%;background:var(--line-strong);height:4%}
.bande-an a:hover .bande-barre,.bande-an a:focus-visible .bande-barre{background:var(--accent)}
.bande-chiffre{display:block;font-family:var(--mono);font-size:var(--t-small);opacity:0}
.bande-an a:hover .bande-chiffre,.bande-an a:focus-visible .bande-chiffre{opacity:1}
.bande-annee{display:inline-block;font-family:var(--mono);font-size:var(--t-small);opacity:.6;
  writing-mode:vertical-rl}
.axe-note{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft);
  border-left:2px solid var(--line-strong);padding-left:var(--s2);max-width:56ch}
@media (max-width:640px){
  .bande{min-height:72px} .bande-jauge{height:72px}
}

/* ── LA CONVERSATION sous un billet (18 septembre 2026) ─────────────────
   81 échanges repris de WordPress, en lecture. Ce ne sont pas des « avis » : la
   moitié sont des réponses de JMP, et la longueur médiane est de 414 signes. On
   les traite donc comme du texte, pas comme des vignettes : même colonne, même
   sérif, un filet à gauche pour dire le fil, et rien d'autre. */
.billet-conversation{margin-top:var(--s7);border-top:1px solid var(--line);padding-top:var(--s4)}
.conversation-titre{font-family:var(--sans);font-weight:600;font-size:var(--t-kicker);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s1)}
.conversation-note{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft);margin:0 0 var(--s4)}
.conversation{list-style:none;padding:0;margin:0}
.commentaire{margin:0 0 var(--s4);padding-left:var(--s2);border-left:2px solid var(--line)}
.commentaire--n1{margin-left:var(--s3)} .commentaire--n2{margin-left:var(--s5)}
.commentaire--n3{margin-left:var(--s6)}
.commentaire-qui{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft);margin:0 0 var(--s1)}
.commentaire-auteur{font-weight:600;color:var(--ink)}
.commentaire p:last-child{margin-bottom:0}

/* ── ÉCRIRE : le formulaire de commentaire (18 septembre 2026) ────────────
   Pas de captcha, pas de tiers, rien à charger. Le champ leurre est retiré à
   l'œil ET au lecteur d'écran (aria-hidden + hors flux), jamais par display:none
   seul — certains robots lisent le style. */
.ecrire{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.ecrire-titre{font-family:var(--sans);font-weight:600;font-size:var(--t-kicker);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s1)}
.ecrire-quoi{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft);
  max-width:56ch;margin:0 0 var(--s3)}
.ecrire-champ{margin:0 0 var(--s3);max-width:56ch}
.ecrire-champ label{display:block;font-family:var(--sans);font-size:var(--t-small);
  color:var(--ink-soft);margin-bottom:var(--s1)}
.ecrire input,.ecrire textarea{width:100%;font-family:var(--serif);font-size:var(--t-body);
  color:var(--ink);background:var(--white);border:1px solid var(--line-strong);
  padding:var(--s1) var(--s2);border-radius:0}
.ecrire textarea{line-height:var(--lh-corps);resize:vertical}
.ecrire input:focus,.ecrire textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.ecrire-leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ecrire-envoi{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:0}
.ecrire button{font-family:var(--sans);font-size:var(--t-small);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--paper);
  background:var(--ink);border:0;padding:var(--s2) var(--s3);cursor:pointer}
.ecrire button:disabled{opacity:.5;cursor:default}
.ecrire-dit{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft)}
.ecrire-sansjs{font-family:var(--sans);font-size:var(--t-small);color:var(--alerte);
  background:var(--alerte-fond);padding:var(--s2);max-width:56ch}

/* ── LE BANDEAU DE LANGUE : il propose, il ne redirige pas ─────────────── */
.bandeau-langue{background:var(--paper-deep);border-bottom:1px solid var(--line);
  padding:var(--s2) var(--s3);font-family:var(--sans);font-size:var(--t-small);
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline;justify-content:center}
.bandeau-langue p{margin:0;color:var(--ink-soft)}
.bandeau-langue .bandeau-oui{font-weight:600}
.bandeau-langue button{font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.nav-langue{font-family:var(--mono);font-size:var(--t-small);letter-spacing:var(--ls-wide)}