/* Cette feuille ne sert que l accueil, reconstruit a l identique de la
   proposition validee. Elle apporte sa propre grille .page, donc elle annule
   le decalage de rail que style.css applique aux pages interieures. */
body{padding:0}
header{position:static;width:auto;background:none;box-shadow:none;border-radius:0}

/* MONDE : os-et-jaune-acide, ré-ancré sur une encre bleue (continuité avec la
   vidéo de Guy). Le fond #0A1A34 est échantillonné sur le portrait lui-même,
   ce qui rend le bord de l'image invisible et donne une vraie découpe.

   STAGINGS COMPOSÉS (la première passe n'en utilisait aucun) :
   - figure-breaks-the-word : le portrait passe devant le mot d'affichage
   - two-registers-no-middle : 12px partout, un seul élément à taille d'affiche
   - trace-de-releve         : les 4 briques reliées par un tracé qui se dessine
   - cartes-empilees-a-onglet : le rail de gauche, présent toute la visite         */
:root{
  --encre:#0A1A34; --encre-2:#112544; --encre-3:#1A3358;
  --papier:#EDE6D9; --papier-2:#E2D9C8;
  --marque:#2D6CDF; --marque-clair:#4180EE; --ambre:#E9A13C; --craie:#F6F3EC; --estompe:#8FA0B8;
  --rail:330px; --fil-w:46px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;position:relative;background:var(--encre);color:var(--craie);
  font-family:Archivo,system-ui,sans-serif;font-size:13px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
/* La colonne de droite reserve a gauche la bande ou passe le fil de la page. */
main{padding-left:var(--fil-w)}
a{color:inherit}
.dis{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;
  letter-spacing:-.035em;line-height:.9}
/* Deux registres, rien entre les deux : tout ce qui n'est pas l'affichage
   reste à taille d'annotation. */
.lab{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--estompe)}

.page{display:grid;grid-template-columns:var(--rail) 1fr;gap:38px;
  max-width:1500px;margin:0 auto;padding:24px}

/* ---- Le rail : une seule carte dense, pas trois rectangles empilés ----
   La première version faisait « document Word » parce que chaque bloc avait
   exactement le même traitement. Ici un seul objet, avec des registres qui
   se distinguent : identité, chiffres sur filets, navigation à icônes, contact. */
.rail{position:sticky;top:24px;align-self:start;
  max-height:calc(100vh - 48px);overflow:hidden auto;overscroll-behavior:contain}
.bloc{background:var(--encre-2);border-radius:16px;padding:0;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(246,243,236,.06)}
.rail-tete{padding:18px 18px 16px;display:flex;gap:12px;align-items:flex-start}
.rail-tete svg{flex:none}
.marque{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:19px;
  line-height:1.08;letter-spacing:-.02em;margin:0}
.marque span{display:block;margin-top:4px;font-family:Archivo;font-weight:500;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--estompe)}
.rail-pitch{margin:0;padding:0 18px 16px;color:var(--estompe);line-height:1.5;font-size:13px}
/* Les chiffres sont sur filets, pas dans une boîte : autre registre, même carte. */
.duo{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(246,243,236,.08)}
.duo div{padding:14px 18px}
.duo div+div{border-left:1px solid rgba(246,243,236,.08)}
.duo b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:24px;
  line-height:1;color:var(--craie)}
.duo small{display:block;margin-top:3px;font-size:10.5px;color:var(--estompe);line-height:1.3}
.rail nav{display:grid;padding:8px;border-top:1px solid rgba(246,243,236,.08)}
.rail nav a{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:14.5px;
  padding:10px 13px;border-radius:8px;color:#C6D0DE;position:relative}
.rail nav a svg{flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.rail nav a:hover{background:var(--encre-3);color:var(--craie)}
/* La page courante ne change pas de fond : elle porte un jalon ambre, comme
   les étapes du tunnel. Un seul vocabulaire pour « vous êtes ici ». */
.rail nav a[aria-current]{color:var(--craie);font-weight:600}
.rail nav a[aria-current]:before{content:"";position:absolute;left:-8px;top:50%;
  width:3px;height:17px;border-radius:0 3px 3px 0;background:var(--ambre);transform:translateY(-50%)}
.rail nav a[aria-current] svg{opacity:1;color:var(--ambre)}
/* Le prix du pack est une information, pas un signal : ni bleu (ce qui engage)
   ni ambre (la position), sinon les deux couleurs ne voudraient plus rien dire. */
.rail nav a .tarif{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--craie);background:var(--encre-3);border-radius:6px;padding:2px 7px;flex:none}
.rail nav a:hover .tarif{background:var(--encre)}
.rail-pied{padding:14px 18px 16px;border-top:1px solid rgba(246,243,236,.08)}
.rail-pied .cta{width:100%}
.rail-pied p{margin:10px 0 0;font-size:11px;color:var(--estompe);text-align:center}
.cta{display:inline-block;text-align:center;background:var(--marque);color:#fff;
  text-decoration:none;padding:13px 24px;border-radius:12px;font-family:Archivo;font-weight:600;
  font-size:14px;border:0;cursor:pointer}
.cta:hover{background:var(--marque-clair)}
.cta.plein{display:block;width:100%}
.cta.creux{background:transparent;color:var(--craie);box-shadow:inset 0 0 0 1.5px var(--encre-3)}
.cta.creux:hover{box-shadow:inset 0 0 0 1.5px var(--ambre);color:var(--ambre)}

/* ---- Hero : le portrait passe devant le mot ---- */
.hero{position:relative;padding:8px 0 0;min-height:672px;overflow:hidden}
/* L'occlusion doit rester reconstituable : le portrait mange la fin des lignes,
   jamais le mot entier. Sans cette limite de largeur, « vendez » disparaissait. */
.mot{position:relative;z-index:1;font-size:clamp(44px,6.6vw,100px);margin:14px 0 0;
  max-width:10.5ch}
.mot .l2{display:block;margin-left:.04em}
.mot em{font-style:normal;color:var(--marque-clair)}
/* Le relief est rendu par un mot fantôme, pas par le titre : la silhouette
   découpe des lettres qui ne portent aucune information, donc les plans se
   lisent sans qu'on perde un seul mot utile. */
.fantome{position:absolute;z-index:0;right:2%;top:50%;transform:translateY(-56%);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:clamp(150px,21vw,320px);line-height:.78;letter-spacing:-.055em;
  color:rgba(246,243,236,.055);white-space:nowrap;pointer-events:none;user-select:none}
/* ---- Le tunnel : c'est lui l'objet du hero, plus une photo ----
   Pas de visage : le sujet du site est un parcours, pas une personne, et une
   personne générée sur un site qui promet l'honnêteté est une preuve fabriquée. */
.tunnel{position:absolute;z-index:2;right:0;top:50%;transform:translateY(-50%);
  width:min(42%,470px);pointer-events:none}
.tunnel svg{display:block;width:100%;height:auto;overflow:visible}
.tunnel .tr{fill:none;stroke:rgba(198,208,222,.5);stroke-width:1.6;stroke-linecap:round}
.tunnel .pt{fill:rgba(198,208,222,.42)}
.tunnel .jal{fill:var(--encre);stroke:var(--ambre);stroke-width:2}
.tunnel .sortie{fill:var(--marque);stroke:none}
/* Tout se dessine du haut vers le bas : l'entonnoir se construit, puis livre. */
.tunnel .tr{--len:1400;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.5s cubic-bezier(.25,.6,.3,1)}
.tunnel.trace-ok .tr{stroke-dashoffset:0}
.tunnel .tr{transition-delay:var(--d,0s)}
.tunnel .pt,.tunnel .jal,.tunnel .sortie{opacity:0;transition:opacity .55s ease}
.tunnel.trace-ok .pt,.tunnel.trace-ok .jal,.tunnel.trace-ok .sortie{opacity:1}
.tunnel .jal{transition-delay:1.5s}
.tunnel .sortie{transition-delay:2.1s}

/* Ce qui traverse le tunnel. Ne démarre qu'une fois le tracé terminé : la classe
   .livre est posée après coup, sinon les billes tomberaient dans un tunnel qui
   n'existe pas encore. Elles convergent vers l'axe en descendant, comme la paroi. */
.chute{fill:rgba(198,208,222,.62);opacity:0;
  offset-path:path('M32.0 -40.0 L32.0 84.0 L34.6 81.6 L39.8 79.2 L47.5 77.1 L57.7 75.2 L70.2 73.6 L84.8 72.3 L101.3 71.4 L119.5 71.0 L139.1 71.1 L160.0 71.6 L181.8 72.7 L204.3 74.3 L227.2 76.4 L250.3 79.1 L273.2 82.4 L295.6 86.2 L317.4 90.5 L338.3 95.4 L358.0 100.7 L376.3 106.4 L393.0 112.6 L407.9 119.1 L420.9 125.9 L431.8 133.0 L440.6 140.3 L447.1 147.8 L451.3 155.3 L453.2 162.9 L452.8 170.6 L450.1 178.1 L445.2 185.5 L438.1 192.8 L429.1 199.8 L418.1 206.5 L405.4 213.0 L391.2 219.1 L375.5 224.8 L358.7 230.2 L341.0 235.1 L322.6 239.5 L303.6 243.5 L284.4 247.0 L265.2 250.1 L246.1 252.7 L227.5 254.8 L209.5 256.5 L192.4 257.8 L176.4 258.7 L161.5 259.3 L148.0 259.5 L136.1 259.4 L125.8 259.1 L117.2 258.6 L110.5 257.9 L105.6 257.1 L102.7 256.3 L101.6 255.4 L102.5 254.5 L105.2 253.7 L109.7 253.0 L115.9 252.5 L123.7 252.2 L133.1 252.1 L143.8 252.3 L155.7 252.8 L168.6 253.5 L182.4 254.7 L197.0 256.2 L212.0 258.0 L227.3 260.2 L242.8 262.9 L258.2 265.8 L273.4 269.2 L288.2 272.9 L302.3 277.0 L315.7 281.4 L328.3 286.1 L339.7 291.1 L350.1 296.3 L359.1 301.7 L366.8 307.3 L373.1 313.1 L378.0 319.0 L381.3 325.0 L383.1 330.9 L383.4 336.9 L382.3 342.9 L379.7 348.8 L375.7 354.6 L370.5 360.2 L364.0 365.7 L356.4 370.9 L347.8 376.0 L338.3 380.8 L328.2 385.4 L317.4 389.6 L306.1 393.6 L294.6 397.3 L282.9 400.7 L271.1 403.9 L259.6 406.7 L248.2 409.2 L237.3 411.5 L226.9 413.6 L217.2 415.3 L208.2 416.9 L200.0 418.3 L192.7 419.5 L186.5 420.5 L181.3 421.4 L177.1 422.3 L174.1 423.0 L172.2 423.8 L171.3 424.5 L171.6 425.2 L172.9 426.0 L175.3 426.9 L178.6 427.9 L182.8 428.9 L187.8 430.1 L193.5 431.5 L199.9 433.1 L206.8 434.8 L214.2 436.7 L221.8 438.8 L229.7 441.2 L237.8 443.7 L245.8 446.5 L253.7 449.4 L261.5 452.6 L268.9 456.0 L276.0 459.5 L282.7 463.2 L288.8 467.0 L294.4 471.0 L299.3 475.1 L303.6 479.3 L307.1 483.6 L310.0 488.0 L312.1 492.4 L313.4 496.8 L314.1 501.2 L314.0 505.6 L313.3 509.9 L311.9 514.2 L309.9 518.5 L307.4 522.6 L304.4 526.7 L301.0 530.6 L297.2 534.5 L260.0 560.0 L260.0 596.0');offset-rotate:0deg;offset-distance:0%}
.tunnel.livre .chute{animation:roule 6.4s linear var(--dl,0s) infinite}
@keyframes roule{
  0%   {offset-distance:0%;   opacity:0; r:4.5px}
  4%   {opacity:.85}
  92%  {opacity:.85}
  97%  {offset-distance:100%; opacity:0; r:3px}
  100% {offset-distance:100%; opacity:0; r:3px}
}
.dessous{position:relative;z-index:3;max-width:52ch;margin:34px 0 0}
.dessous p.chapeau{font-size:15.5px;color:#C6D0DE;margin:0 0 24px;line-height:1.66}
form{display:flex;gap:9px;flex-wrap:nowrap;max-width:520px}
.cta{white-space:nowrap}
input[type=email]{flex:1;min-width:210px;padding:13px 16px;border:0;border-radius:12px;
  background:var(--encre-2);color:var(--craie);font:inherit;font-size:16px}
input[type=email]::placeholder{color:var(--estompe)}
input[type=email]:focus{outline:2px solid var(--marque);outline-offset:1px}
.rassure{margin:14px 0 0;color:var(--estompe);white-space:nowrap}

/* ---- Sections ---- */
section{margin-top:120px}
h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.03em;
  line-height:.98;font-size:clamp(30px,4.4vw,60px);margin:10px 0 16px;max-width:17ch}
.intro{font-size:15.5px;color:#C6D0DE;max-width:56ch;margin:0 0 40px;line-height:1.66}

/* Le tracé : les 4 briques reliées par une ligne qui se dessine au scroll.
   Il occupe SA propre bande au-dessus des étapes. En superposition, les jalons
   tombaient sur les numéros et les titres et les rendaient illisibles. */
.trace{position:relative}
.frise{position:relative;height:104px;margin:0 0 4px}
.trace svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.trace svg path{fill:none;stroke:var(--encre-3);stroke-width:2;stroke-linecap:round;
  --len:2600;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1)}
.trace.vu svg path{stroke-dashoffset:0}
.trace svg circle{fill:var(--encre);stroke:var(--ambre);stroke-width:2;
  opacity:0;transition:opacity .5s ease}
.trace.vu svg circle{opacity:1}
.trace svg circle:nth-of-type(2){transition-delay:.35s}
.trace svg circle:nth-of-type(3){transition-delay:.7s}
.trace svg circle:nth-of-type(4){transition-delay:1.05s}
.etapes{position:relative;z-index:1;display:grid;gap:26px;grid-template-columns:repeat(4,1fr)}
.etape{padding-top:0}
.etape b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:15px;color:var(--ambre);margin:0 0 8px}
.etape h3{margin:0 0 6px;font-size:16px;font-weight:600;font-family:Archivo}
.etape p{margin:0;color:var(--estompe);line-height:1.55}

/* Bandes papier */
.papier{background:var(--papier);color:#12202F;border-radius:26px;padding:66px 56px;overflow:hidden}
.papier h2,.papier .lab{color:#12202F}
.papier .lab{color:#4A5A6C}
.papier .intro{color:#4A5A6C}
.duo-large{display:grid;gap:44px;grid-template-columns:1.05fr .95fr;align-items:center}
.cadre{border-radius:18px;overflow:hidden;line-height:0}
.cadre img{width:100%;height:100%;object-fit:cover;display:block}
.cartes{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.mini{background:rgba(18,32,47,.055);border-radius:14px;padding:18px}
.mini h3{margin:0 0 4px;font-size:15px;font-weight:600;font-family:Archivo;color:#12202F}
.mini p{margin:0;color:#4A5A6C;line-height:1.5}

/* Recommandation, sur matière */
.reco{position:relative;border-radius:26px;overflow:hidden;padding:66px 56px;isolation:isolate}
.reco .fond{position:absolute;inset:0;z-index:-1}
.reco .fond img{width:100%;height:100%;object-fit:cover;display:block;opacity:.16}
.reco:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--encre) 22%,rgba(10,26,52,.72))}
.reco ul{list-style:none;margin:0 0 30px;padding:0;max-width:52ch}
.reco li{padding:13px 0 13px 26px;position:relative;font-size:15.5px;border-bottom:1px solid var(--encre-3)}
.reco li:before{content:"";position:absolute;left:0;top:21px;width:10px;height:10px;background:var(--ambre)}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:34px 0 0;max-width:560px}
.chiffres div{border-top:2px solid var(--ambre);padding-top:12px}
.chiffres b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:34px;line-height:1}
.chiffres small{color:var(--estompe);font-size:12px}

/* Blog */
.arts{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.art{background:var(--encre-2);border-radius:18px;overflow:hidden;display:block;text-decoration:none}
.art .vign{aspect-ratio:16/10;overflow:hidden;line-height:0}
.art .vign img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.art:hover .vign img{transform:scale(1.045)}
.art .txt{padding:20px}
.art h3{margin:8px 0 6px;font-size:16.5px;font-weight:600;font-family:Archivo;line-height:1.3}
.art p{margin:0;color:var(--estompe);line-height:1.55}

/* Capture finale */
.final{background:var(--marque);color:#fff;border-radius:26px;padding:64px 56px;text-align:center}
.final h2,.final .lab{color:#fff}
.final .lab{opacity:.62}
.final .intro{color:#fff;margin-left:auto;margin-right:auto}
.final h2{margin-left:auto;margin-right:auto}
.final form{margin:0 auto;justify-content:center}
.final input[type=email]{background:rgba(255,255,255,.16);color:#fff}
.final input[type=email]::placeholder{color:#B9CEF6}
.final .cta{background:#fff;color:var(--marque)}
/* Sur le bleu de marque, un texte pâle plafonne à 3,3:1. */
.final .mention{margin:16px 0 0;color:#fff;opacity:.92}

footer{margin-top:96px;padding-top:24px;border-top:1px solid var(--encre-3);color:var(--estompe)}
footer a{text-decoration:none;color:var(--craie)}
.affil{max-width:76ch;line-height:1.55;margin-top:10px;font-size:12px}

/* Révélations douces */
.rev{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.rev.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .trace svg path{stroke-dashoffset:0;transition:none}
  .trace svg circle{opacity:1;transition:none}
  .tunnel .tr{stroke-dashoffset:0;transition:none}
  .tunnel .jal,.tunnel .sortie{opacity:1;transition:none}
  .tunnel.livre .chute{animation:none;opacity:0}
  html{scroll-behavior:auto}
}
@media(max-width:1080px){
  /* minmax(0,1fr) et non 1fr : une piste « 1fr » ne descend jamais sous la
     largeur minimale de son contenu, et le formulaire de capture (champ à
     210px + bouton insécable) imposait 459px au main sur un écran de 375px.
     Le formulaire passe donc à la ligne dès qu'il ne tient plus, et la ligne
     de réassurance se plie au lieu d'être coupée par le débord du hero. */
  .page{grid-template-columns:minmax(0,1fr);gap:22px}
  form{flex-wrap:wrap}
  .rassure{white-space:normal}
  main{padding-left:0}
  .rail{position:static}
  .rail nav{grid-template-columns:repeat(3,1fr)}
  .mot{white-space:normal}
  .portrait{position:static;width:min(70%,420px);margin:22px 0 0}
  .etapes{grid-template-columns:1fr 1fr}
  .trace svg{display:none}
  .duo-large{grid-template-columns:1fr}
  .arts{grid-template-columns:1fr}
  .papier,.reco,.final{padding:44px 26px}
}
/* Sous 414px de fenêtre, les trois colonnes du rail ne tiennent plus dans la
   carte et « Premier Tunnel » se faisait rogner par son overflow:hidden. Deux
   colonnes, comme la même navigation sur les pages intérieures (style.css). */
@media(max-width:560px){
  .rail nav{grid-template-columns:repeat(2,1fr)}
}

/* --- Bandeau de consentement, repris de la feuille partagee --------------- */
.cookie-banner{position:fixed;right:24px;bottom:24px;z-index:40;max-width:420px;
  background:var(--encre-2);border-radius:16px;padding:20px;
  box-shadow:inset 0 0 0 1px rgba(246,243,236,.08),0 18px 40px rgba(0,0,0,.35);
  font-size:13.5px;color:var(--craie)}
.cookie-banner a{color:#5A90F0;text-decoration:underline}
.cookie-actions{display:flex;gap:9px;margin:14px 0 0}
.cookie-actions .cta,.cookie-actions button{padding:10px 18px;font-size:13.5px}
.consent{font-size:12.5px;color:var(--estompe)}
/* Le piege a robots reste hors ecran, jamais masque par display:none. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.legal-mini{font-size:12.5px;color:var(--estompe);margin:14px 0 0}

/* Le bandeau reutilise la classe .btn de la feuille partagee, qui n est plus
   chargee ici : on la redefinit avec la meme grammaire que .cta. */
.btn{display:inline-block;text-align:center;background:var(--marque);color:#fff;
  text-decoration:none;padding:10px 18px;border-radius:12px;font-family:Archivo;
  font-weight:600;font-size:13.5px;border:0;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--marque-clair)}
.btn.ghost{background:transparent;color:var(--craie);box-shadow:inset 0 0 0 1.5px var(--encre-3)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ambre);color:var(--ambre)}

/* --- Le rail remonte d'un cran (voir style.css pour la même règle) --------- */
.marque{font-size:19px}
.marque span{font-size:10.5px}
.rail-tete{padding:20px 20px 15px}
.rail-pitch{font-size:13px;padding:0 20px 16px}
.duo div{padding:15px 20px}
.duo b{font-size:24px}
.duo small{font-size:11px}
.rail nav{padding:9px}
.rail nav a{font-size:14.5px;padding:10px 13px;gap:11px}
.rail nav a svg{width:17px;height:17px}
.rail nav a[aria-current]:before{height:19px}
.rail-pied{padding:16px 20px 18px}
.rail-pied .cta{padding:14px 24px;font-size:15px}
.rail-pied p{font-size:11.5px}

/* ===========================================================================
   LE FIL DE LA PAGE (meme systeme que la feuille partagee)
   Le tunnel vu de profil, dans la marge : deux parois qui se resserrent du haut
   de la page jusqu a l action, un jalon ambre par section reelle, un point bleu
   a la fin. Il se dessine a mesure qu on descend et sert de sommaire cliquable.
   =========================================================================== */
.fil{position:absolute;width:var(--fil-w);z-index:2;pointer-events:none}
.fil svg{display:block;width:100%;height:100%;overflow:visible}
.fil .paroi{fill:none;stroke:rgba(198,208,222,.38);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:var(--len,2600);stroke-dashoffset:var(--off,2600)}
.fil .jal{position:absolute;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  pointer-events:auto;display:block;border-radius:50%;text-decoration:none}
.fil .jal:before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--encre);
  box-shadow:inset 0 0 0 1.5px rgba(198,208,222,.32);
  transition:box-shadow .35s ease,background .35s ease,transform .35s ease}
.fil .jal.passe:before{box-shadow:inset 0 0 0 1.5px var(--ambre)}
.fil .jal.ici:before{background:var(--ambre);box-shadow:inset 0 0 0 1.5px var(--ambre);transform:scale(1.25)}
.fil .jal.fin:before{background:var(--marque);box-shadow:inset 0 0 0 1.5px var(--marque)}
.fil .jal:focus-visible{outline:2px solid var(--marque);outline-offset:1px}
.fil .paroi.sombre{stroke:rgba(18,32,47,.34)}
/* Sur une bande papier, la pastille inverse son fond et garde un contour foncé :
   l'ambre seul sur du crème ne se verrait pas. */
.fil .jal.sur-papier:before{background:var(--papier);box-shadow:inset 0 0 0 1.5px rgba(18,32,47,.3)}
.fil .jal.sur-papier.passe:before{box-shadow:inset 0 0 0 1.5px var(--ambre),0 0 0 1px rgba(18,32,47,.35)}
.fil .jal.sur-papier.ici:before{background:var(--ambre);box-shadow:inset 0 0 0 1.5px rgba(18,32,47,.5)}
.fil .jal.sur-papier.fin:before{background:var(--marque);box-shadow:inset 0 0 0 1.5px var(--marque)}
.fil .jal span{position:absolute;left:26px;top:50%;transform:translateY(-50%) translateX(-4px);
  white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  color:var(--craie);background:var(--encre-2);border-radius:7px;padding:5px 10px;
  box-shadow:inset 0 0 0 1px var(--encre-3);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.fil .jal:hover span,.fil .jal:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)}
/* Quand la marge de gauche est assez large, l'étiquette part de ce côté :
   à droite elle recouvrirait le titre qu'elle nomme. */
.fil.etq-gauche .jal span{left:auto;right:26px;transform:translateY(-50%) translateX(4px)}
.fil.etq-gauche .jal:hover span,
.fil.etq-gauche .jal:focus-visible span{transform:translateY(-50%) translateX(0)}
@media(max-width:1080px){ .fil{display:none} }
@media(prefers-reduced-motion:reduce){
  .fil .paroi{stroke-dashoffset:0}
  .fil .jal:before,.fil .jal span{transition:none}
}