/* ============================================================
   ACCUEIL EN CHEMIN (2026-09) : temps, frise epinglee, sequences.
   Les gestes se jouent par ETATS : un observateur (accueil-etats.js)
   pose `data-etat` / `data-vu` / `data-jalon` quand une affirmation
   franchit la ligne de lecture, et la feuille les transitionne a leur
   propre rythme, a l'aller comme au retour. Les etats de repos
   (opacite 0, translations) n'existent que sous `.js-etats` : sans
   script, la page est entiere, dessins a l'etat final.
   Un accent d'ambre par sequence. Courbe : cubic-bezier(.16,1,.3,1).
   ============================================================ */

/* La meme ambre a 28 % que la ligne de lecture. */
::selection { background:rgba(245,166,35,.28); color:var(--ink); }

/* ---------- Temps 1 · Le constat ---------- */
/* Le hero ne charge plus accueil.css : ses trois regles vivent ici (copie de 2026-09-06). */
.a-h1 { font-family:var(--font-serif); font-weight:500; font-size:clamp(34px, 4.8vw, 58px); line-height:1.12; letter-spacing:-0.015em; text-wrap:balance; max-width:26ch; margin:0; }
.a-sub { font-size:17px; line-height:1.55; color:var(--ink-muted); max-width:56ch; margin:22px 0 0; }
.a-hero-ctas { display:flex; align-items:center; gap:28px; margin-top:34px; flex-wrap:wrap; }
@media (max-width:600px) {
  .a-h1 { font-size:34px; }
  .a-sub { font-size:16px; margin-top:18px; }
  .a-hero-ctas { flex-direction:column; align-items:stretch; gap:16px; margin-top:28px; }
  .a-hero-ctas .d-cta { display:flex; justify-content:center; text-align:center; }
}

/* Rembourrage vertical seul : la section porte .container, dont les 64 px de
   gouttiere doivent survivre (le raccourci padding les remettait a zero et
   collait le titre au bord de l'ecran). */
.c-constat { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(360px, 1fr); gap:64px; align-items:center; min-height:calc(100vh - 72px); padding-top:48px; padding-bottom:56px; }
.c-constat .a-h1 { max-width:22ch; }
.c-constat-feuille { width:min(100%, 420px); justify-self:end; }
/* La feuille dessinee : dimensionnee par son ratio meme sans prise en charge
   du cadrage automatique, et son ombre portee non rognee. */
.c-constat-feuille > svg { display:block; width:100%; height:auto; overflow:visible; }
.c-constat-legende { font-size:13px; color:var(--ink-soft); margin:10px 0 0; }
.c-constat-cue { display:inline-flex; align-items:center; margin-top:40px; font-size:15px; color:var(--ink-soft); transition:color .15s; }
.c-constat-cue:hover { color:var(--ink); }
/* Le chevron du rappel est dessine, pas tape : un caractere flechant vers le bas
   se lisait a voix haute avec le libelle du lien. */
.c-constat-cue::before { content:""; display:inline-block; width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin:0 12px 3px 2px; }

/* Le moment d'ouverture. La feuille est a l'ecran des le chargement : une chronologie
   de defilement ne peut pas la jouer (sa plage entry est deja consommee). C'est la
   seule animation temporelle de la page : une fois, au chargement, meme courbe, meme
   ordre (la feuille se pose, les barres poussent, les liens se tracent, la cote, puis
   l'ambre). Des keyframes `from` seules : l'etat final est l'etat de base, donc rien a
   reinitialiser en mouvement reduit ni sans prise en charge. */
@media (prefers-reduced-motion: no-preference) {
  .c-constat-feuille .obj.feuille { animation:c-pose-t .7s cubic-bezier(.16,1,.3,1) both; }
  @keyframes c-pose-t { from { opacity:0; transform:translateY(22px); } }
  .c-constat-feuille .pousse { transform-box:fill-box; transform-origin:bottom; animation:c-pousse-t .6s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(.5s + var(--k) * .18s); }
  @keyframes c-pousse-t { from { transform:scaleY(0); } }
  .c-constat-feuille .lien { animation:c-trace-t .5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(.85s + var(--k) * .18s); }
  .c-constat-feuille .cote { animation:c-trace-t .5s cubic-bezier(.16,1,.3,1) both; animation-delay:1.35s; }
  @keyframes c-trace-t { from { stroke-dashoffset:1; } }
  .c-constat-feuille .ambre { animation:c-fondu-t .4s linear both; animation-delay:1.7s; }
  @keyframes c-fondu-t { from { opacity:0; } }
}

/* ---------- Temps 2 a 6 : la frise dans la marge, les temps dans le cadre ---------- */
/* Les temps 2 a 6 vivent dans le cadre de 1180 px du site, comme le hero et la
   frise finale : leur colonne commence au x du logo et s'arrete au bord droit du
   cadre, la frise verticale vit dans la marge gauche. Cinq colonnes, sans
   rembourrage ni ecart, pour que les 50 % se mesurent sur toute la largeur :
   50 % - 526 px est le bord du cadre ((100 % - 1180 px) / 2 + 64 px des que la
   page depasse 1180 px), la marge lui retire la frise (96 px) et sa gouttiere
   (40 px) et se plante a 24 px au plancher. L'alignement est exact des 1372 px ;
   en dessous, la marge est au plancher et le texte commence a 160 px du bord, a
   droite du logo. */
.c-chemin-wrap { display:grid; grid-template-columns:max(24px, calc(50% - 662px)) 96px 40px minmax(0, 1fr) max(64px, calc(50% - 526px)); --gouttiere:max(64px, calc(50% - 526px)); }
.c-frise-col { position:relative; grid-column:2; }
.c-temps-col { grid-column:4; }
.c-frise { position:sticky; top:calc(50vh - 120px); width:96px; height:240px; }
.c-frise svg { overflow:visible; }
.c-frise text { font-family:var(--font-serif); font-size:13px; fill:var(--ink-soft); }
/* La frise est une table des matieres : chaque jalon mene au debut de sa section. La cible
   est un rectangle transparent pose dans le dessin (100 x 44 unites, donc 100 x 44 px), et
   `overflow:visible` ci-dessus laisse paraitre l'anneau de focus du premier jalon, qui
   deborde de deux unites en haut du viewBox. */
.c-frise a { cursor:pointer; }
.c-frise a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Le survol et le focus ramenent le libelle a l'encre. `!important` ET un identifiant dans
   le selecteur : les libelles sont peints par une animation (qui bat une declaration simple),
   et l'etat empile plus bas les fixe avec `!important` sur leur identifiant. */
.c-frise a:is(:hover, :focus-visible) :is(#f-t1, #f-t2, #f-t3, #f-t4) { fill:var(--ink) !important; }
.c-temps, .c-seq, .c-creux { scroll-margin-top:88px; }
.c-temps { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:48px 0; }
.c-temps h2 { font-family:var(--font-serif); font-weight:500; font-size:38px; line-height:1.15; letter-spacing:-.015em; text-wrap:balance; margin:0; max-width:18ch; }
.c-engagements { margin-top:34px; max-width:600px; }
.c-eng { border-top:1px solid var(--rule); padding:14px 0 12px; }
.c-eng b { font-family:var(--font-serif); font-weight:500; font-size:19px; display:block; }
.c-eng span { font-size:15px; color:var(--ink-muted); }
/* L'interlude : l'annonce du chemin, une page a elle entre les engagements et le premier jalon
   (planche 6, mise en page L2) : un trait, la phrase en serif 30, un chevron qui invite a descendre. */
.c-interlude { min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:48px 0; scroll-margin-top:88px; }
.c-interlude-trait { display:block; width:48px; height:1px; background:var(--ink); margin-bottom:28px; }
.c-interlude p { font-family:var(--font-serif); font-weight:500; font-size:30px; line-height:1.25; color:var(--ink); max-width:26ch; margin:0; text-wrap:balance; }
.c-interlude-chevron { display:block; width:9px; height:9px; border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft); transform:rotate(45deg); margin-top:32px; }
/* Le seul lien vers le bareme depuis l'accueil : il vit dans une phrase, donc il
   garde son souligne (doctrine des liens secondaires : la prose garde le souligne). */
.c-eng a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.c-eng a:hover { color:var(--ink); }

/* ---------- Une sequence : texte qui descend, scene epinglee ---------- */
.c-seq { display:grid; grid-template-columns:minmax(320px, 1fr) minmax(420px, 640px); column-gap:40px; position:relative; }
/* Le jalon creux est une pause : du blanc au-dessus et au-dessous, pour que la
   phrase se lise seule a l'ecran entre deux sequences. */
.c-creux { min-height:50vh; padding-block:14vh; display:flex; align-items:center; }
.c-creux p { font-family:var(--font-serif); font-size:27px; line-height:1.25; color:var(--ink-muted); text-wrap:balance; margin:0; max-width:34ch; }
.c-step { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:0 24px 0 0; }
.c-step h2 { font-family:var(--font-serif); font-weight:500; font-size:34px; line-height:1.15; letter-spacing:-.015em; text-wrap:balance; max-width:18ch; margin:0; }
.c-step p { color:var(--ink-muted); font-size:17px; line-height:1.55; margin:16px 0 0; max-width:44ch; }
.c-step .lien-fleche { display:inline-block; margin-top:22px; font-size:15px; color:var(--ink-muted); }
/* Ces liens sortent du cadre de home.css (ils ne sont ni .d-cta ni lien de prose) : leur anneau de focus se pose ici, avec les autres liens nus de la page. */
.c-step .lien-fleche:focus-visible, .c-constat-cue:focus-visible, .c-fin-source a:focus-visible, .c-eng a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.c-scene-col { position:relative; }
.c-scene { position:sticky; top:72px; height:calc(100vh - 72px); display:flex; align-items:center; justify-content:center; }
.c-carte { position:relative; width:min(100%, 78vh); aspect-ratio:1; }
/* Le monde finit la sequence en scale(3.2) : sans rognage, les pastilles de
   metiers voilees se peignent hors de la scene et hantent le jalon creux qui
   suit. On rogne le SVG a son carre (la fiche et la legende vivent en absolu
   hors du SVG : elles ne sont pas touchees). Un masque radial adoucit ce bord
   net pendant le zoom : il vit sous @supports, avec l'animation qui le referme,
   donc sans chronologie de defilement la carte n'est jamais masquee. */
.c-seq.t3 .c-carte > svg { overflow:clip; }
/* Les jetons de metier et la legende des formes se relaient au meme endroit, CENTRES sous
   la carte (decision Hugues du 8 septembre 2026, planche 9) : les cinq metiers a l'ecran
   des criteres, les trois formes a l'ecran de la liste. Meme ancrage, fondu croise, jamais
   les deux ensemble. La largeur des jetons suit la carte (48 %, la proportion de la planche
   7) : a 300 px de large ils mangeaient la moitie d'une carte de 369 px sur un ecran etroit.
   Le centrage se fait sans `transform` : l'etat empile remet toutes les transformations a
   zero, et il decentrerait la legende, qui y reste visible. Les jetons sont centres par
   marges automatiques entre left:0 et right:0 ; la legende, qui n'a pas de largeur propre,
   l'est par `justify-content` de sa boite flex, qui survit a `position:static`. */
.c-jetons { position:absolute; left:0; right:0; bottom:-34px; width:48%; margin:0 auto; }
.c-legende { position:absolute; left:0; right:0; bottom:-34px; display:flex; justify-content:center; gap:22px; font-size:13px; color:var(--ink-soft); }
.c-legende span { display:inline-flex; align-items:center; gap:8px; }
.c-legende i { display:inline-block; width:7px; height:7px; background:var(--ink); }
.c-legende i.c { border-radius:50%; } .c-legende i.d { transform:rotate(45deg); width:6px; height:6px; }
.c-scene .c-feuille { width:min(100%, 440px); }
/* Les feuilles de la liasse et du rapport tenaient dans 440 px au milieu d'une
   scene haute d'un ecran : elles se lisaient petites. La colonne de scene vaut
   minmax(420px, 640px) au-dela de 1200 px, elles peuvent aller a 600 ; entre 1001
   et 1200 px, min(100%) les ramene a la largeur de la colonne. Reserve a la mise
   en page a deux colonnes : sous 1001 px, la scene devient une bande collee qui
   rogne (overflow:clip), et 600 px de large y passaient au-dessus de la bande sur
   un ecran court. */
@media (min-width:1001px) { .c-seq.tc .c-feuille, .c-seq.t5 .c-feuille { width:min(100%, 600px); } }
/* La liasse est la seule feuille plus haute que large (520 x 600) : a 600 px elle
   ferait 692 px de haut et sortirait de la scene sur un ecran court. On la borne en
   hauteur, la largeur suit. */
@media (min-width:1001px) { .c-seq.tc .c-feuille > svg { max-height:calc(100vh - 200px); width:auto; max-width:100%; margin:0 auto; } }

/* ---------- Le bureau n'a plus d'aimant natif ---------- */
/* Il en a eu un du 08 au 08 septembre 2026 (un aimant de defilement obligatoire sur tout
   l'ordinateur), retire le soir meme : il se battait avec la molette. Depuis la lecture
   centree du 10 septembre, le defilement reste natif (voir la fin de la feuille).
   Ce commentaire a ete tronque par la passe du 10 septembre qui retirait les declarations
   d'aimant : il avalait la regle de la cloture, restee sans centrage jusqu'au 23 septembre. */

/* ---------- Temps 7 · La cloture du chemin ---------- */
/* Disposition L2 de la planche 8 (decision Hugues du 2026-09-08 : « L2 clairement »).
   Le titre « Quatre moments, une seule facon de decider » disparait : la cloture est
   le chiffre du marche mis a l'echelle d'un titre, sa source, un trait, l'ambition,
   l'action. Centree sur un ecran entier, comme l'interlude qui ouvre le chemin : la
   page se ferme sur la figure qu'elle a ouverte. Les valeurs sont celles de la
   planche, portees telles quelles (42 / 13 / trait 48 a 40 px de blanc / 27 / 40). */
.c-fin { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top:96px; padding-bottom:96px; }
/* Le chiffre est une phrase mise a l'echelle, jamais un compteur detache de sa
   phrase : serif, chasse alignee (lining-nums), deux lignes forcees pour que les
   deux nombres se repondent d'une ligne a l'autre. 42 px et non 48 : la premiere
   ligne fait 50 signes, la colonne de lecture en mesure 1052 (cadre 1180 moins les
   deux gouttieres de 64), et a 48 elle se coupait en trois lignes. */
.c-fin-chiffre { font-family:var(--font-serif); font-weight:500; font-size:clamp(34px, 3.4vw, 42px); line-height:1.2; letter-spacing:-.015em; color:var(--ink); font-variant-numeric:lining-nums; margin:0; }
.c-fin-chiffre span { display:block; }
/* La source au plancher de 13 px ; le lien vit dans une mention, il garde son
   souligne (doctrine des liens secondaires : la prose garde le souligne). */
.c-fin-source { font-size:13px; line-height:1.5; color:var(--ink-soft); margin:20px 0 0; }
.c-fin-source a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
/* Le meme trait que l'interlude, 48 x 1 px d'encre : la respiration entre le
   constat chiffre et ce que Diligeo en fait. */
.c-fin-trait { display:block; width:48px; height:1px; background:var(--ink); margin:40px 0; }
/* L'ambition, une phrase en serif entre le constat et l'action : la seconde voix
   de la meme famille, a l'echelle d'en dessous. */
.c-fin-ambition { font-family:var(--font-serif); font-weight:500; font-size:27px; line-height:1.3; color:var(--ink); max-width:40ch; margin:0; text-wrap:balance; }
.c-fin-action { margin-top:40px; }

/* ---------- Temps 8 · Les portes « Ou en etes-vous ? » ---------- */
/* Reprises de la version en production (accueil.css, choix Hugues du 2026-08-13),
   portees ici parce que cette page ne charge plus accueil.css. Des lignes a filet
   cliquables en entier, jamais des cartes ombrees ; deux colonnes, une seule sous
   1000 px comme le reste de la page. Rembourrage au rythme des sections (96 / 56). */
.a-routeur { padding-top:96px; padding-bottom:96px; }
.a-routeur-inner::before { content:""; display:block; height:1px; background:var(--rule); margin-bottom:84px; }
.a-routeur-titre { font-family:var(--font-serif); font-weight:500; font-size:38px; line-height:1.15; letter-spacing:-.015em; text-wrap:balance; margin:0; max-width:24ch; }
.a-routeur-liste { display:grid; grid-template-columns:1fr 1fr; gap:0 72px; margin-top:44px; }
.a-porte { display:block; position:relative; z-index:0; padding:22px 40px 22px 0; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit; }
/* Assiette de survol : le fond deborde de 24 px de part et d'autre du texte
   (essai « assiette qui respire »). Le filet et le texte restent alignes sur la
   grille, l'assiette flotte derriere. */
.a-porte::before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:-24px; right:-24px; border-radius:3px; background:transparent; transition:background-color .2s; }
.a-porte::after { content:"\2192"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:18px; color:var(--ink-faint); transition:transform .25s cubic-bezier(.22,1,.36,1), color .2s; }
.a-porte:hover::before, .a-porte:active::before { background:var(--paper); }
.a-porte:hover::after, .a-porte:active::after { transform:translate(4px, -50%); color:var(--ink); }
.a-porte:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.a-porte-titre { display:block; font-family:var(--font-serif); font-size:19px; font-weight:500; line-height:1.3; }
.a-porte-contexte { display:block; margin-top:6px; font-size:15px; line-height:1.5; color:var(--ink-muted); max-width:44ch; }
@media (max-width:1000px) {
  .a-routeur { padding-top:56px; padding-bottom:56px; }
  .a-routeur-inner::before { margin-bottom:56px; }
  .a-routeur-titre { font-size:28px; }
  .a-routeur-liste { grid-template-columns:1fr; gap:0; margin-top:32px; }
  .a-porte { padding:18px 36px 18px 0; }
  .a-porte::before { left:-16px; right:-16px; }
  .a-porte-titre { font-size:18px; }
}

/* ---------- Les gestes, par etats (pilotes par accueil-etats.js) ---------- */
/* Le dessin epingle change d'ETAT quand une affirmation franchit la ligne de
   lecture ; la transition se joue ensuite a son propre rythme, qu'on defile vite
   ou lentement, a l'aller comme au retour. Plus rien ne depend du defilement
   lui-meme : Firefox joue la page comme les autres.

   Trois attributs, poses par le script :
     `data-etat="0..n"` sur une sequence (n = son nombre d'affirmations) ;
     `data-vu="avant|ici|apres"` sur chaque affirmation ;
     `data-jalon` sur `.c-chemin-wrap`, dans l'ordre du chemin :
        chemin, reperage, approche, cadrage, analyse, fin.
   CSS ne compare pas deux valeurs d'attribut : un etat « atteint » s'ecrit en
   enumerant son jalon et ceux qui le suivent.

   Chaque element a un etat de REPOS (celui d'avant le geste) et une regle d'etat
   qui pose sa valeur d'arrivee ; la transition joue le retour toute seule. Les
   cascades vivent dans la regle d'etat, jamais au repos : ce qui parait en cascade
   a l'aller disparait d'un bloc au retour. Retard plus duree ne depassent jamais
   850 ms : c'est le budget d'un etat, qui doit etre complet 900 ms apres le
   passage de la ligne (mesure au navigateur, Chromium et Firefox). Un geste qui
   sort SOUS un autre (le compte, la legende, que le zoom emporte) sort plus vite
   qu'il n'entre : sa duree de sortie vit dans sa regle de repos. */
.js-etats { --c-arrivee:cubic-bezier(.16,1,.3,1); }

/* Le clic d'un libelle de frise se pose en douceur, et d'un coup en mouvement
   reduit (`scroll-behavior` est la seule facon d'adoucir une ancre sans script). */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }

/* ---- Temps 2 : la frise nait, puis avance de jalon en jalon ---- */
/* La ligne grise pousse depuis le haut. C'est une echelle et non une hauteur : la
   hauteur d'un rect n'est pas une propriete CSS partout, l'echelle si, et le rect
   est d'une seule encre (rien ne s'y deforme). */
.js-etats #f-ligne { transform-box:fill-box; transform-origin:top; transform:scaleY(0); transition:transform 800ms var(--c-arrivee); }
.js-etats .c-chemin-wrap[data-jalon] #f-ligne { transform:none; }
/* Les huit elements de la frise naissent avec elle, chacun a son rang (--k pose
   dans le HTML) : le point et le libelle paraissent quand la ligne les atteint. */
.js-etats :is(#f-d1, #f-t1, #f-d2, #f-t2, #f-d3, #f-t3, #f-d4, #f-t4) { opacity:0; transition:opacity 600ms linear, fill 600ms linear, stroke 600ms linear; transition-delay:0ms; }
.js-etats .c-chemin-wrap[data-jalon] :is(#f-d1, #f-t1, #f-d2, #f-t2, #f-d3, #f-t3, #f-d4, #f-t4) { opacity:1; transition-delay:calc(var(--k) * 60ms); }
/* L'anneau du curseur et sa trace d'encre naissent au premier jalon et le suivent.
   L'anneau se deplace (cy 20, 86, 152, 218) ; la trace vise le bord de l'anneau
   (cy - 9), soit 8, 65, 131 puis 197 unites, en echelle de sa hauteur d'attribut. */
.js-etats #f-ring { opacity:0; transition:opacity 600ms linear, transform 700ms var(--c-arrivee); }
.js-etats #f-trace { opacity:0; transform-box:fill-box; transform-origin:top; transition:opacity 600ms linear, transform 700ms var(--c-arrivee); }
.js-etats .c-chemin-wrap:is([data-jalon="reperage"], [data-jalon="approche"], [data-jalon="cadrage"], [data-jalon="analyse"], [data-jalon="fin"]) :is(#f-ring, #f-trace) { opacity:1; }
.js-etats .c-chemin-wrap[data-jalon="approche"] #f-ring { transform:translateY(66px); }
.js-etats .c-chemin-wrap[data-jalon="cadrage"] #f-ring { transform:translateY(132px); }
.js-etats .c-chemin-wrap:is([data-jalon="analyse"], [data-jalon="fin"]) #f-ring { transform:translateY(198px); }
.js-etats .c-chemin-wrap[data-jalon="approche"] #f-trace { transform:scaleY(8.125); }
.js-etats .c-chemin-wrap[data-jalon="cadrage"] #f-trace { transform:scaleY(16.375); }
.js-etats .c-chemin-wrap:is([data-jalon="analyse"], [data-jalon="fin"]) #f-trace { transform:scaleY(24.625); }
/* Les jalons franchis se remplissent ; le creux (#f-d2) garde son pointille. */
.js-etats .c-chemin-wrap:is([data-jalon="reperage"], [data-jalon="approche"], [data-jalon="cadrage"], [data-jalon="analyse"], [data-jalon="fin"]) #f-d1 { fill:var(--ink); stroke:var(--ink); }
.js-etats .c-chemin-wrap:is([data-jalon="cadrage"], [data-jalon="analyse"], [data-jalon="fin"]) #f-d3 { fill:var(--ink); stroke:var(--ink); }
.js-etats .c-chemin-wrap:is([data-jalon="analyse"], [data-jalon="fin"]) #f-d4 { fill:var(--ink); stroke:var(--ink); }
.js-etats .c-chemin-wrap[data-jalon="reperage"] #f-t1 { fill:var(--ink); }
/* Reperer passe en retrait des qu'Approcher s'allume : il est fait. */
.js-etats .c-chemin-wrap:is([data-jalon="approche"], [data-jalon="cadrage"], [data-jalon="analyse"], [data-jalon="fin"]) #f-t1 { fill:var(--ink-muted); }
.js-etats .c-chemin-wrap:is([data-jalon="approche"], [data-jalon="cadrage"], [data-jalon="analyse"], [data-jalon="fin"]) #f-t2 { fill:var(--ink); }
.js-etats .c-chemin-wrap:is([data-jalon="cadrage"], [data-jalon="analyse"], [data-jalon="fin"]) #f-t3 { fill:var(--ink); }
.js-etats .c-chemin-wrap:is([data-jalon="analyse"], [data-jalon="fin"]) #f-t4 { fill:var(--ink); }

/* ---- Temps 3 : le reperage, quatre etats ---- */
/* 1 la carte entiere ; 2 la cible, le cercle des soixante kilometres, la France
   eteinte dehors, les cinq metiers en marge dont deux teintes ; 3 les societes
   nees puis les ecartees estompees, avec le compte et la legende des formes ;
   4 le zoom sur le voisinage de la cible, ses metiers nommes, l'anneau, la fiche.
   Le zoom vit a l'etat 4 et non a l'etat 3 : c'est la ou ses plages le mettaient
   deja (contain 74-88 %, entre le centre de l'ecran 3 et celui de l'ecran 4), et
   c'est la seule facon de garder le compte lisible, qui est peint DANS le monde
   zoome et y grossirait d'un facteur 3,2. L'ecran 3 dresse la liste et la compte ;
   l'ecran 4 la regarde de pres. */
.js-etats .c-seq.t3 #grille { clip-path:circle(0% at 50% 50%); transition:clip-path 800ms var(--c-arrivee), opacity 600ms linear; }
.js-etats .c-seq.t3:is([data-etat="1"], [data-etat="2"], [data-etat="3"], [data-etat="4"]) #grille { clip-path:circle(74% at 50% 50%); }
.js-etats .c-seq.t3[data-etat="4"] #grille { opacity:.28; transition-delay:0ms, 250ms; }

/* Etat 2 · les criteres. Le point de la cible se pose (il est une societe retenue,
   il devance donc les 47 autres), le cercle se trace autour de lui, la France
   s'eteint dehors, et cinq metiers montent sous la carte, dont deux se teignent. */
.js-etats .c-seq.t3:is([data-etat="2"], [data-etat="3"], [data-etat="4"]) #cible-point { opacity:1; transform:none; }
.js-etats .c-seq.t3 #cercle { stroke-dasharray:var(--circ); stroke-dashoffset:var(--circ); transition:stroke-dashoffset 800ms var(--c-arrivee), opacity 600ms linear; }
.js-etats .c-seq.t3:is([data-etat="2"], [data-etat="3"], [data-etat="4"]) #cercle { stroke-dashoffset:0; }
.js-etats .c-seq.t3[data-etat="4"] #cercle { opacity:0; }
.js-etats .c-seq.t3 #grille-dehors { transition:opacity 700ms linear; }
.js-etats .c-seq.t3:is([data-etat="2"], [data-etat="3"], [data-etat="4"]) #grille-dehors { opacity:.45; transition-delay:150ms; }
.js-etats .c-seq.t3 .jeton { opacity:0; transform:scale(.3); transition:opacity 600ms linear, transform 700ms var(--c-arrivee); transition-delay:0ms; }
.js-etats .c-seq.t3:is([data-etat="2"], [data-etat="3"], [data-etat="4"]) .jeton { opacity:1; transform:none; transition-delay:calc(var(--j) * 40ms); }
/* Les deux teintes s'inversent, face et pictogramme ensemble (--j vaut 0 et 3). */
.js-etats .c-seq.t3 :is(.jeton.teinte .face, .jeton.teinte .picto) { transition:fill 600ms linear, stroke 600ms linear; transition-delay:0ms; }
.js-etats .c-seq.t3:is([data-etat="2"], [data-etat="3"], [data-etat="4"]) .jeton.teinte .face { fill:var(--dessin-jeton-face-teinte); transition-delay:calc(150ms + var(--j) * 25ms); }
.js-etats .c-seq.t3:is([data-etat="2"], [data-etat="3"], [data-etat="4"]) .jeton.teinte .picto { stroke:var(--dessin-jeton-picto-teinte); transition-delay:calc(150ms + var(--j) * 25ms); }
/* La rangee s'efface a l'etat 3 : la legende des formes prend sa place. */
.js-etats .c-seq.t3 .c-jetons { transition:opacity 600ms linear; }
.js-etats .c-seq.t3:is([data-etat="3"], [data-etat="4"]) .c-jetons { opacity:0; }

/* Etat 3 · la liste. Les societes naissent dans l'ordre du dessin (--i), puis les
   ecartees perdent leur encre : deux temps sur deux proprietes, `opacity` pour la
   naissance et `fill-opacity` pour l'effacement, la seule facon de tenir un geste
   en deux temps dans une transition, qui n'a pas d'etape intermediaire. La legende
   nomme leurs formes, le compte dit ce que le rayon retient ; les deux s'effacent a
   l'etat 4, quand le zoom remplace les formes par des metiers. */
.js-etats .c-seq.t3 .soc { opacity:0; transform:scale(.3); transition:opacity 600ms linear, transform 700ms var(--c-arrivee), fill-opacity 600ms linear; transition-delay:0ms; }
.js-etats .c-seq.t3:is([data-etat="3"], [data-etat="4"]) .soc { opacity:1; transform:none; transition-delay:calc(var(--i) * 3ms); }
.js-etats .c-seq.t3:is([data-etat="3"], [data-etat="4"]) .soc:not(.ret) { transform:scale(.85); fill-opacity:.16; transition-delay:calc(var(--i) * 3ms), calc(var(--i) * 3ms), 250ms; }
/* Elles sortent plus vite qu'elles n'entrent : a l'etat 4 le monde grossit d'un facteur
   3,2 et les emporte avec lui ; a 600 ms le compte traversait la scene, agrandi. */
.js-etats .c-seq.t3 :is(.c-legende, #compte) { opacity:0; transition:opacity 250ms linear; }
.js-etats .c-seq.t3[data-etat="3"] :is(.c-legende, #compte) { opacity:1; transition:opacity 600ms linear 250ms; }

/* Etat 4 · le voisinage. Le monde grossit autour de la cible, les metiers retenus
   montent en carres, l'anneau d'ambre designe la cible, et la fiche se pose a
   droite et reste : c'est le dernier ecran du reperage. */
.js-etats .c-seq.t3 #monde { transform-box:view-box; transform-origin:var(--cx) var(--cy); transition:transform 650ms var(--c-arrivee); }
.js-etats .c-seq.t3[data-etat="4"] #monde { transform:translate(var(--dx), var(--dy)) scale(3.2); }
.js-etats .c-seq.t3 #cible-anneau { opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(2.4); transition:opacity 600ms linear, transform 600ms var(--c-arrivee); transition-delay:0ms; }
.js-etats .c-seq.t3[data-etat="4"] #cible-anneau { opacity:1; transform:none; transition-delay:250ms; }
.js-etats .c-seq.t3 .logo { opacity:0; transform:scale(.3); transition:opacity 600ms linear, transform 600ms var(--c-arrivee); transition-delay:0ms; }
.js-etats .c-seq.t3[data-etat="4"] .logo { opacity:1; transform:none; transition-delay:calc(200ms + var(--j) * 10ms); }
/* Le bord du rognage coupait les marqueurs en deux pendant le zoom. Le masque
   radial part ouvert (230 %, hors du carre : rien de masque) et se referme sur le
   carre avec lui ; les marqueurs de bord se fondent dans le creme au lieu d'etre
   tranches. Il ne vit que sous `.js-etats` : sans script, la carte est entiere. */
.js-etats .c-seq.t3 .c-carte > svg { mask-image:radial-gradient(closest-side, #000 72%, transparent 100%); mask-repeat:no-repeat; mask-position:center; mask-size:230% 230%; -webkit-mask-image:radial-gradient(closest-side, #000 72%, transparent 100%); -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:230% 230%; transition:mask-size 650ms var(--c-arrivee), -webkit-mask-size 650ms var(--c-arrivee); }
.js-etats .c-seq.t3[data-etat="4"] .c-carte > svg { mask-size:100% 100%; -webkit-mask-size:100% 100%; }
.js-etats .c-seq.t3 .c-fiche { opacity:0; transform:translate(36px, -50%); transition:opacity 600ms linear, transform 600ms var(--c-arrivee); transition-delay:0ms; }
.js-etats .c-seq.t3[data-etat="4"] .c-fiche { opacity:1; transform:translate(0, -50%); transition-delay:250ms; }

/* ---- Temps c : le cadrage, deux etats ---- */
/* 1 la liasse posee et la ligne de lecture qui la parcourt ; 2 les deux chiffres
   releves, le pont pousse, les liens, la cote, l'ambre de l'ecart en dernier. */
.js-etats .c-seq.tc .obj.feuille { opacity:0; transform:translateY(22px); transition:opacity 600ms linear, transform 700ms var(--c-arrivee); }
.js-etats .c-seq.tc:is([data-etat="1"], [data-etat="2"]) .obj.feuille { opacity:1; transform:none; }
/* La ligne descend rang par rang, six paliers de 26 unites du viewBox. Au repos
   elle est en haut, effacee, et la transformation ne revient au haut qu'une fois
   l'opacite tombee (duree nulle, retard de 600 ms) : la ligne ne remonte jamais a
   vue. L'etat 2 partage cet etat de repos, donc revenir a l'etat 1 rejoue la
   lecture, dans un sens comme dans l'autre. */
.js-etats .c-seq.tc .lecteur { opacity:0; transform:none; transition:opacity 600ms linear, transform 0ms linear 600ms; }
.js-etats .c-seq.tc[data-etat="1"] .lecteur { opacity:.28; transform:translateY(156px); transition:opacity 600ms linear, transform 600ms steps(6, end) 200ms; }
.js-etats .c-seq.tc .releve { opacity:0; transition:opacity 600ms linear; }
.js-etats .c-seq.tc[data-etat="2"] .releve { opacity:1; }
.js-etats .c-seq.tc .pousse { transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); transition:transform 700ms var(--c-arrivee); transition-delay:0ms; }
.js-etats .c-seq.tc[data-etat="2"] .pousse { transform:none; transition-delay:calc(var(--k) * 60ms); }
.js-etats .c-seq.tc .lien { stroke-dashoffset:1; transition:stroke-dashoffset 600ms var(--c-arrivee); transition-delay:0ms; }
.js-etats .c-seq.tc[data-etat="2"] .lien { stroke-dashoffset:0; transition-delay:calc(120ms + var(--k) * 60ms); }
.js-etats .c-seq.tc .cote { stroke-dashoffset:1; transition:stroke-dashoffset 600ms var(--c-arrivee); transition-delay:0ms; }
.js-etats .c-seq.tc[data-etat="2"] .cote { stroke-dashoffset:0; transition-delay:240ms; }
.js-etats .c-seq.tc .ambre:not(.releve) { opacity:0; transition:opacity 600ms linear; transition-delay:0ms; }
.js-etats .c-seq.tc[data-etat="2"] .ambre:not(.releve) { opacity:1; transition-delay:250ms; }

/* ---- Temps 5 : l'analyse, quatre etats ---- */
/* 1 la feuille de face se pose ; 2 les deux autres s'eventaillent depuis la pile ;
   3 le petit graphe pousse ; 4 l'ambre de la position, et le dessin ne bouge plus. */
.js-etats .c-seq.t5 .f-front { opacity:0; transform:translateY(22px); transition:opacity 600ms linear, transform 700ms var(--c-arrivee); }
.js-etats .c-seq.t5:is([data-etat="1"], [data-etat="2"], [data-etat="3"], [data-etat="4"]) .f-front { opacity:1; transform:none; }
.js-etats .c-seq.t5 :is(.f-gauche, .f-droite) { opacity:0; transform:translate(var(--fx), var(--fy)); transition:opacity 600ms linear, transform 700ms var(--c-arrivee); transition-delay:0ms; }
.js-etats .c-seq.t5:is([data-etat="2"], [data-etat="3"], [data-etat="4"]) :is(.f-gauche, .f-droite) { opacity:1; transform:none; }
.js-etats .c-seq.t5:is([data-etat="2"], [data-etat="3"], [data-etat="4"]) .f-droite { transition-delay:100ms; }
.js-etats .c-seq.t5 .pousse { transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); transition:transform 700ms var(--c-arrivee); transition-delay:0ms; }
.js-etats .c-seq.t5:is([data-etat="3"], [data-etat="4"]) .pousse { transform:none; transition-delay:calc(var(--k) * 60ms); }
.js-etats .c-seq.t5 .ambre { opacity:0; transition:opacity 600ms linear; }
.js-etats .c-seq.t5[data-etat="4"] .ambre { opacity:1; }

/* La cloture et les portes restent visibles dans le flux du document.
   La lecture centree ne pilote pas les anciens etats data-vu de ces sections. */

/* ---- Telephone : ce que la petite bande change aux gestes ---- */
@media (max-width:1000px) {
  /* Le masque radial de la carte ne se referme pas sur telephone : sa taille
     s'anime, donc il est recalcule et recompose a chaque image, sous une carte qui
     grossit deja d'un facteur 3,2 (test de Hugues du 07-09, « le scroll vers le bas
     n'est pas hyper fluide »). Le bord redevient net, et aucun marqueur ne s'y fait
     couper : le plus proche est a 42 px du bord a 390 x 844, a 29 px a 375 x 667. */
  .js-etats .c-seq.t3 .c-carte > svg { mask-image:none; -webkit-mask-image:none; transition:none; }
  /* La fiche entre par la droite, sans le centrage vertical du bureau. */
  .js-etats .c-seq.t3 .c-fiche { transform:translateX(36px); }
  .js-etats .c-seq.t3[data-etat="4"] .c-fiche { transform:none; }

}

/* ---------- Mouvement reduit : les memes etats, sans transition ---------- */
/* Celui qui a demande moins de mouvement recoit exactement la meme page, aux memes
   etats : ils se posent d'un coup, sans trajet. Rien n'est masque, rien n'attend.
   Le temps 1 (le constat) a sa propre garde `no-preference`, plus haut. */
@media (prefers-reduced-motion: reduce) {
  .js-etats .c-chemin-wrap, .js-etats .c-chemin-wrap *, .js-etats .c-fin > *, .js-etats .a-routeur-titre, .js-etats .a-porte { transition:none !important; }
}

/* ---------- Sans script : la page entiere, empilee ---------- */
/* Aucun etat de repos ne s'applique (ils vivent tous sous `.js-etats`) : les
   dessins sont a leur etat final sans qu'on ait rien a remettre a zero. Ne restent
   que ce qui n'a pas de valeur de repos dans le HTML (la frise, qui se dessine, la
   ligne de lecture, les societes ecartees, les jetons de l'ecran des criteres) et
   la mise en page, l'epinglage n'ayant plus de sequence a montrer. */
html:not(.js-etats) .lecteur { opacity:0; }
html:not(.js-etats) .soc:not(.ret) { opacity:.16; }
/* Les jetons de metier appartiennent a l'ecran des criteres : sans sequence, il n'y
   a pas d'ecran des criteres, et la legende des formes reste seule sous la carte. */
html:not(.js-etats) .c-jetons { display:none; }
/* La frise complete : la ligne grise entiere (son attribut la donne deja), la trace
   d'encre jusqu'au dernier jalon, les trois jalons franchis pleins (le creux garde
   son pointille), aucun curseur au repos. */
html:not(.js-etats) #f-trace { transform-box:fill-box; transform-origin:top; transform:scaleY(25.75); }
html:not(.js-etats) #f-ring { opacity:0; }
html:not(.js-etats) :is(#f-d1, #f-d3, #f-d4) { fill:var(--ink); stroke:var(--ink); }
html:not(.js-etats) :is(#f-t2, #f-t3, #f-t4) { fill:var(--ink); }
html:not(.js-etats) #f-t1 { fill:var(--ink-muted); }
/* Sans sequence, l'empilement remplace l'epinglage : la scene se deroule et les
   trois objets se lisent l'un sous l'autre, aucun ne recouvre l'autre. */
html:not(.js-etats) .c-seq.t3 .c-step { min-height:0; padding-bottom:34px; }
html:not(.js-etats) .c-seq.t3 .c-scene { position:static; height:auto; display:block; padding:24px 0; }
html:not(.js-etats) .c-seq.t3 .c-carte { width:min(100%, 560px); margin:0 auto; }
html:not(.js-etats) .c-seq.t3 .c-fiche { position:static; width:min(100%, 520px); margin:28px auto 0; transform:none; }
html:not(.js-etats) .c-seq.t3 .c-legende { position:static; margin-top:12px; }
/* Sur telephone, l'empilement ne remplace pas la bande collee : le bloc du telephone, en
   fin de feuille, la retablit (« Sans script, la bande tient aussi »). Ne reste ici que ce
   que la petite bande change. */
@media (max-width:1000px) {
  /* Les marqueurs du zoom nomment cinq metiers sur une carte qui, sans sequence,
     n'est jamais zoomee : a 266 px de carte ils encombrent au lieu de designer. */
  html:not(.js-etats) .c-seq.t3 .logo { display:none; }
  /* Les societes ecartees : a .16 elles disparaissent sur une carte de cette taille. */
  html:not(.js-etats) .soc:not(.ret) { opacity:.35; }
}

/* ---------- Largeur intermediaire : la scene rentre dans le cadre ---------- */
/* Entre 1001 et 1200 px, les 320 + 420 px des colonnes plus les 40 px de
   gouttiere depassent la largeur utile du cadre et la scene deborde a droite. */
@media (max-width:1200px) { .c-seq { grid-template-columns:minmax(260px, 1fr) minmax(340px, 1fr); } }
@media (max-width:900px) { .c-chemin-wrap { --gouttiere:40px; } }
@media (max-width:600px) { .c-chemin-wrap { --gouttiere:24px; } }

/* Plancher de cible tactile (home.css, resserrage 2026-08-02) : le rappel du
   chemin est un lien d'action autonome, pas un lien en pleine phrase. */
@media (pointer: coarse) {
  .c-fin-source a { display:inline-block; padding:14px 0; }
  .c-constat-cue { min-height:44px; margin-top:28px; }
  .c-step .lien-fleche { min-height:44px; display:inline-flex; align-items:center; }
}

/* ---------- Les interrupteurs d'essai (diagnostic, sans effet hors de l'adresse) ---------- */
/* Trois classes, posees par `accueil-etats.js` quand l'adresse le demande, et par rien
   d'autre : sans parametre aucune n'est posee et la page est exactement celle qu'elle serait
   sans ce bloc (verifie au pixel, vague 19). Elles servent a departager les couts de rendu
   d'une mesure a l'autre, et a laisser Hugues comparer de ses yeux. Le quatrieme
   interrupteur, `?aimant=0`, n'a pas de classe : le recalage vit dans le script.
     ?gestes=0  les transitions d'etat passent a 0 s (les etats se posent d'un coup) ;
     ?flou=0    les cinq flous gaussiens des ombres tombent (l'assise reste, son degrade part) ;
     ?zoom=0    le monde ne grossit plus a l'etat 4 ; les marqueurs de metier montent quand meme.
   Un selecteur de plus que la regle qu'il neutralise (`html` en tete) : c'est ce qui le fait
   passer devant sans un seul `!important`, sauf pour les durees, ou chaque regle d'etat pose
   la sienne. */
html.sans-gestes .c-chemin-wrap, html.sans-gestes .c-chemin-wrap *, html.sans-gestes .c-fin > *,
html.sans-gestes .a-routeur-titre, html.sans-gestes .a-porte { transition-duration:0s !important; }
html.sans-flou .ombre { filter:none; }
html.sans-zoom .c-seq.t3[data-etat="4"] #monde { transform:none; }

/* Lecture centree, validee le 10 septembre 2026 : le defilement reste natif. */
html { scroll-snap-type:none !important; scroll-padding-top:var(--p-top, 75px); }

.p-mode { --p-top:75px; --p-height:calc(100vh - var(--p-top)); }
.p-mode .c-seq { display:block; position:relative; min-height:0; height:calc(var(--p-count) * var(--p-height)); scroll-margin-top:0; }
.p-mode .p-layout { position:sticky; top:var(--p-top); height:var(--p-height); display:grid; grid-template-columns:minmax(320px, 1fr) minmax(420px, 640px); column-gap:40px; }
.p-mode .c-seq .c-steps { position:relative; display:grid; padding:0; min-width:0; height:100%; }
.p-mode .c-seq .c-steps > .c-step { grid-area:1/1; display:flex; position:relative; min-height:0; height:100%; margin:0; padding:0 24px 0 0; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 200ms ease, visibility 200ms; }
.p-mode .c-seq .c-steps > .c-step.p-active { opacity:1; visibility:visible; pointer-events:auto; transition:opacity 220ms ease; }
.p-mode .c-seq .c-scene-col { position:relative; top:auto; height:100%; min-width:0; }
.p-mode .c-seq .c-scene { position:static; top:auto; height:100%; }
.p-controls { position:absolute; left:0; bottom:32px; display:flex; align-items:center; gap:12px; font:11px/1.4 Inter,sans-serif; font-variant-numeric:tabular-nums; color:var(--ink-soft); z-index:1; }
.p-controls button { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--rule); background:transparent; color:var(--ink); border-radius:50%; cursor:pointer; font:16px/1 sans-serif; }
.p-controls button:disabled { opacity:.25; cursor:default; }
.p-controls button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.p-controls span { min-width:42px; text-align:center; }
.p-mode .p-solo { display:block; position:relative; height:calc(var(--p-height) * 1.45); min-height:0; padding-top:0; padding-bottom:0; scroll-margin-top:0; }
.p-mode .p-solo > .p-solo-stage { position:sticky; top:var(--p-top); height:var(--p-height); display:flex; flex-direction:column; justify-content:center; }
.p-mode :is(.c-interlude,.c-fin).p-solo > .p-solo-stage { align-items:center; }
.p-mode .c-creux.p-solo > .p-solo-stage { align-items:flex-start; }
/* A readable document when there is insufficient room, JS is absent, or motion is reduced. */
.p-mode .c-seq.p-static { height:auto; min-height:0; }
.p-mode .c-seq.p-static .p-layout { position:static; height:auto; }
.p-mode .c-seq.p-static .c-steps { display:block; height:auto; }
.p-mode .c-seq.p-static .c-steps > .c-step { opacity:1; visibility:visible; pointer-events:auto; height:auto; min-height:0; padding:36px 0; transition:none; }
.p-static .p-controls { display:none; }
.p-mode .p-solo.p-static { height:auto; }
.p-mode .p-solo.p-static > .p-solo-stage { position:static; height:auto; min-height:0; padding:64px 0; }
@media(max-width:1200px) { .p-mode .p-layout { grid-template-columns:minmax(260px,1fr) minmax(340px,1fr); } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto !important; }.p-mode * { transition:none !important; } }

/* La lecture centree garde elle-meme la place lue au resize : pas de recalage du navigateur. */
.p-mode { overflow-anchor:none; }
.p-read-all { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); }
.p-read-all:focus-visible { position:fixed; top:80px; left:16px; width:auto; height:auto; padding:12px; clip-path:none; z-index:20; background:var(--bg); color:var(--ink); }
@media print {
  .p-mode .c-seq, .p-mode .p-solo, .p-mode .p-layout, .p-mode .p-solo-stage { height:auto !important; min-height:0 !important; position:static !important; display:block !important; }
  .p-mode .c-seq .c-steps { display:block; height:auto; }
  .p-mode .c-seq .c-steps > .c-step { height:auto; min-height:0; visibility:visible; opacity:1; padding:20px 0; }
  .p-controls, .p-read-all { display:none; }
}

/* ---------- Telephone : le dessin se range, le texte suit le doigt ---------- */
/* Spec docs/superpowers/specs/2026-09-23-accueil-telephone-design.md (decisions de Hugues sur
   quatre series de planches, 23-09). Sous 1001 px la lecture centree reste au bureau : le script
   ne pose pas `p-mode`, ses enveloppes passent en `display:contents`, la page defile nativement.
   Chaque sequence se lit en colonne : la bande de dessin, collee sous la barre du site, puis ses
   textes dans le flux. Hauteurs en `svh` (repli `vh`) : quand Safari replie sa barre d'adresse,
   rien ne se recalcule et rien ne saute (la lecture centree recalculait toute la page). */
@media (max-width:1000px) {
  :root {
    --c-nav:72px;
    --c-vh:100vh;
    /* 35 % de l'ecran (planche D35), jamais sous 160 px, toujours 200 px au texte, 520 au plus. */
    --c-bande:clamp(160px, min(calc(var(--c-vh) * .35), calc(var(--c-vh) - var(--c-nav) - 200px)), 520px);
    /* La zone de lecture sous la bande ; un texte en reserve 600 px au plus (tablette). */
    --c-lecture:min(calc(var(--c-vh) - var(--c-nav) - var(--c-bande)), 600px);
    /* La carte, carree : la largeur utile (le trait de cote a sa marge dans le viewBox), la bande
       moins la legende, 460 px au plus. */
    --c-carte:min(calc(100vw - 16px), calc(var(--c-bande) - 44px), 460px);
    /* Planche B2 : le gris des points, fonce pour la petite taille. */
    --dessin-grille:#aab0b9;
  }
  html { scroll-padding-top:var(--c-nav); }

  /* ---- Ce que la lecture centree laisse au bureau ---- */
  .p-layout, .p-solo-stage { display:contents; }
  .p-controls, .p-read-all { display:none; }
  /* Pas de frise sur telephone (decision du 23-09) ; la verticale reste au bureau. */
  .c-frise-col { display:none; }

  /* ---- Le hero : seul, en grand, a l'arrivee (revue du 07-09) ---- */
  .c-constat { grid-template-columns:1fr; gap:0; min-height:calc(var(--c-vh) - var(--c-nav)); align-content:center; padding-top:32px; padding-bottom:40px; }
  .c-constat-feuille { display:none; }
  .c-chemin-wrap { display:block; padding:0 var(--gouttiere); }

  /* ---- Une sequence : la bande, puis les textes ---- */
  .c-seq { display:flex; flex-direction:column; scroll-margin-top:0; }
  .c-steps { order:1; padding:0 0 56px; }
  /* Collee par le navigateur, sans script. Le fond est un pseudo-element creme termine par un
     fondu de 18 px (pas de trait : decision du 23-09). La bande ne capte aucun toucher : le
     doigt pose sur le dessin fait defiler la page. `overflow-x:clip` : a l'entree le dessin
     deborde en hauteur, jamais en largeur, et `clip` ne cree pas de boite de defilement. */
  .c-scene-col { order:0; position:sticky; top:var(--c-nav); z-index:2; height:var(--c-bande); margin:0 calc(-1 * var(--gouttiere)); padding:0 var(--gouttiere); overflow-x:clip; pointer-events:none; }
  .c-scene-col::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, var(--bg) calc(100% - 18px), rgba(251,249,245,0)); }
  .c-seq .c-scene { position:static; height:100%; display:flex; align-items:center; justify-content:center; padding:10px 0; }
  .c-seq.t3 .c-scene { padding:8px 0 36px; }
  .c-seq.t3 .c-carte { width:var(--c-carte); margin:0 auto; flex:none; }
  .c-jetons { bottom:-24px; }
  .c-seq.t3 .c-legende { position:absolute; left:0; right:0; bottom:-23px; margin:0; gap:16px; }
  .c-seq.t3 .c-fiche { position:absolute; top:6px; right:0; left:auto; width:min(220px, 56%); margin:0; }
  .c-seq:is(.tc, .t5) .c-feuille { width:100%; }
  .c-seq:is(.tc, .t5) .c-feuille > svg { max-height:calc(var(--c-bande) - 20px); width:auto; max-width:100%; margin:0 auto; }

  /* ---- Un texte par ecran (planches T, decision du 23-09) ---- */
  /* Chaque texte reserve la zone de lecture et se cale sous le dessin : au repos, le dessin et
     un texte, rien d'autre. Pas de fondu : on lit la ou le texte arrive. */
  .c-seq .c-steps > .c-step { min-height:var(--c-lecture); display:flex; flex-direction:column; justify-content:flex-start; margin:0; padding:32px 0 0; }
  .c-step h2 { font-size:28px; }
  .c-step p { font-size:17px; max-width:none; }
  .c-step .lien-fleche { min-height:44px; display:inline-flex; align-items:center; }

  /* ---- Les temps sans dessin, dans le flux ---- */
  .c-temps { min-height:calc(var(--c-vh) - var(--c-nav)); padding:0; }
  /* L'interlude laisse paraitre le haut de la carte en bas d'ecran : c'est lui qui invite a
     descendre, le chevron ne fait que le confirmer. */
  .c-interlude { min-height:calc((var(--c-vh) - var(--c-nav)) * .78); padding:0; }
  .c-creux { min-height:calc((var(--c-vh) - var(--c-nav)) * .7); padding-block:0; }
  .c-temps h2 { font-size:28px; }
  .c-interlude p { font-size:24px; }
  .c-creux p { font-size:22px; max-width:none; }
  .c-fin { min-height:calc(var(--c-vh) - var(--c-nav)); padding-top:40px; padding-bottom:40px; }
  .c-fin-chiffre { font-size:clamp(28px, 6vw, 42px); }
  .c-fin-ambition { font-size:22px; }

  /* ---- La carte au format du telephone (planche B2) ---- */
  /* Les points grossissent par un trait de leur couleur (rayon effectif 2,1) : la geometrie
     partagee avec le bureau ne bouge pas. Les societes sont cernees d'un trait d'encre de 1,4 px
     d'ecran (le meme au zoom), estompe avec les ecartees ; le cercle se trace plus epais (ses
     tirets se mesurent dans le viewBox : pas de non-scaling). Le compte sort du dessin : a la
     taille de la bande il ne peut pas atteindre 13 px, et la description du dessin le dit. */
  #grille circle { stroke:var(--dessin-grille); stroke-width:1.4; }
  .c-seq.t3 .soc { stroke:var(--ink); stroke-width:1.4px; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
  .js-etats .c-seq.t3:is([data-etat="3"], [data-etat="4"]) .soc:not(.ret) { stroke-opacity:.16; }
  .c-seq.t3 #cercle { stroke-width:1.75; }
  .c-seq.t3 #compte { display:none; }
  /* Sans script, la bande tient aussi. Le repli du bureau empile la scene du reperage (la carte,
     puis la fiche et la legende dessous) : dans une bande de 35 % elle deborderait sur le premier
     texte. La carte garde sa taille rangee et la legende sa place sous elle ; la fiche, qui
     appartient au zoom de l'etat 4, n'a pas de place ici (sans script la carte n'est jamais
     zoomee, et le texte la decrit). */
  html:not(.js-etats) .c-seq.t3 .c-scene { display:flex; height:100%; padding:8px 0 36px; }
  html:not(.js-etats) .c-seq.t3 .c-carte { width:var(--c-carte); margin:0 auto; }
  html:not(.js-etats) .c-seq.t3 .c-fiche { display:none; }
  html:not(.js-etats) .c-seq.t3 .c-legende { position:absolute; margin:0; }

  /* ---- Le relais de la liasse au rapport (planche T1) ---- */
  /* Aucun texte entier ne separe les deux dessins : la bande d'Analyser monte vide en poussant
     celle de Cadrer, et le rapport parait quand elle s'accroche (`data-relais`, pose par
     accueil-etats.js). Jamais deux dessins a la fois. Sans script, le rapport est visible. */
  .js-etats .c-seq.t5 .c-scene { opacity:0; transition:opacity 150ms linear; }
  .js-etats .c-chemin-wrap[data-relais="1"] .c-seq.t5 .c-scene { opacity:1; transition:opacity 450ms linear; }

  /* ---- Ecran court : un cran de moins, jamais sous 13 px ---- */
  @media (max-height:700px) {
    .c-step h2, .c-temps h2 { font-size:26px; }
    .c-step p { font-size:16px; line-height:1.5; }
    .c-step .lien-fleche { margin-top:16px; }
    .c-interlude p { font-size:22px; }
    .c-creux p { font-size:20px; }
  }
}
@supports (height:100svh) { @media (max-width:1000px) { :root { --c-vh:100svh; } } }
/* La barre du site retombe a 68 px sous 381 px de large (home.css). */
@media (max-width:380px) { :root { --c-nav:68px; } }
/* Tablette en portrait : le hero, les engagements et la cloture cessent de grandir avec l'ecran. */
@media (max-width:1000px) and (min-height:900px) {
  .c-constat, .c-temps, .c-fin { min-height:min(760px, calc(var(--c-vh) - var(--c-nav))); }
}
/* ---- L'entree : le dessin part a la pleine largeur et se range (planche A2) ---- */
/* La seule chronologie de defilement de la feuille, et elle ne porte aucun geste : c'est une
   continuite d'espace. La section expose une chronologie de vue dont le haut est retire de la
   barre du site : 100 % de l'entree, c'est l'accrochage. Le dessin part de l'echelle
   --c-entree-echelle (pleine largeur / taille rangee) et revient a 1 ; les textes partent de
   --c-entree-decalage plus bas pour ne jamais passer sous lui (accueil-etats.js mesure les deux).
   Le rapport n'entre pas ainsi : il parait une fois en place (relais T1). */
@media (max-width:1000px) and (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline:view()) {
    .c-seq:is(.t3, .tc) { view-timeline-name:--c-entree; view-timeline-axis:block; view-timeline-inset:var(--c-nav) 0px; }
    .c-seq.t3 .c-scene > .c-carte, .c-seq.tc .c-feuille > svg { transform-origin:50% 0; animation:c-entree linear both; animation-timeline:--c-entree; animation-range:entry 12% entry 100%; }
    .c-seq:is(.t3, .tc) .c-steps { animation:c-entree-texte linear both; animation-timeline:--c-entree; animation-range:entry 12% entry 100%; }
  }
}
@keyframes c-entree { from { transform:scale(var(--c-entree-echelle, 1)); } to { transform:none; } }
@keyframes c-entree-texte { from { transform:translateY(var(--c-entree-decalage, 0px)); } to { transform:none; } }