/* ------------------------------------------------------------------
   fig-acces.css — QUINZE ETAPES, CINQ, DEUX.

   Le redessin d'une planche de parcours devenue illisible. Trois rails
   horizontaux empiles, un par parcours, chacun precede de son compte en
   tres gros chiffre. La comparaison des trois longueurs est le message :
   le goulot d'etranglement n'etait pas dans le service, il etait devant.

   Sur le premier rail, deux accidents seulement ont le droit de parler :
   l'attente de un a trois jours, qui interrompt le trait, et le passage
   en agence, seule etape ecrite en rouge dans le document d'origine.
   Les autres pastilles restent muettes et numerotees : la lisibilite
   prime sur l'exhaustivite.

   Aucune couleur en dur hors des jetons --fg-* et --fa-*.
   Toutes les tailles en cqw.
-------------------------------------------------------------------*/

:root{
  --fa-trait:rgba(10,18,32,.26);   /* le rail neutre */
  --fa-accent-txt:var(--hl);         /* l'accent du folio, lisible en texte */
  --fa-accent-plein:var(--hl);       /* le meme accent, en aplat */
  --fa-rouge-txt:#C22C45;
  --fa-ambre-txt:#B4711E;
  --fa-sur-plein:#FFFFFF;          /* texte pose sur un aplat plein */
}
html:not(.theme-light){
  --fa-trait:rgba(242,235,219,.30);
  --fa-accent-txt:var(--hl);
  --fa-accent-plein:var(--hl);
  --fa-rouge-txt:#F0788C;
  --fa-ambre-txt:#E7A951;
}

/* ── Un rail ───────────────────────────────────────────────────── */
.fa-rail{ display:flex; align-items:flex-start; gap:1.8cqw;
  --fa-h:7cqw;   /* hauteur de la file, elle tient l'aureole du point rouge */
  --fa-e:1.5cqw; /* l'ecart entre deux pastilles, donc la longueur de la liaison */ }
.fa-rail--long{ --fa-h:11.4cqw; }
.fa-rail--court{ padding-right:5cqw; }

/* Le compte, en tres gros chiffre. Il est cale sur la ligne du rail,
   pas sur le haut du bloc : les trois chiffres et les trois traits
   forment deux colonnes qui se repondent. */
.fa-num{ flex:none; width:9.4cqw; text-align:right;
  padding-top:calc(2.4cqw + var(--fa-h) / 2 - 2.95cqw); }
.fa-num b{ display:block; font-family:var(--display); font-weight:800;
  font-size:7.1cqw; line-height:.83; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--fg-encre); }
.fa-rail--court .fa-num b{ color:var(--fa-accent-txt); }

/* Le nom court du parcours, pose au-dessus du depart du trait. */
.fa-nom{ height:2.4cqw; font-size:1.16cqw; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; line-height:1.35; color:var(--fg-mate); }

/* Le trait lui-meme : une file de pastilles, chacune tirant sa liaison
   vers la suivante. La liaison fait exactement la largeur de l'ecart :
   changer l'ecart suffit a changer le rail. */
.fa-body{ flex:0 0 auto; }
.fa-track{ display:flex; align-items:center; gap:var(--fa-e);
  min-height:var(--fa-h); }

.fa-et{ position:relative; flex:none; display:flex; align-items:center;
  justify-content:center; height:var(--fa-h); }
.fa-et > i{ font-style:normal; display:flex; align-items:center; justify-content:center;
  width:2.3cqw; height:2.3cqw; border-radius:50%; box-sizing:border-box;
  border:.16cqw solid var(--fa-trait); color:var(--fg-mate);
  font-size:.95cqw; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.fa-et::after{ content:""; position:absolute; left:100%; top:50%;
  width:var(--fa-e); height:.16cqw; margin-top:-.08cqw; background:var(--fa-trait); }
.fa-et--stop::after{ display:none; }

/* Le rail court : meme geometrie, autre encre. */
.fa-rail--court .fa-et > i{ border-color:var(--fa-accent-plein); color:var(--fa-accent-txt); }
.fa-rail--court .fa-et::after{ background:var(--fa-accent-plein); opacity:.85; }

/* Le point de douleur. Plus gros, plein, aureole : il saute aux yeux
   avant qu'on ait lu quoi que ce soit. */
.fa-et--mal > i{ width:4.4cqw; height:4.4cqw; font-size:1.55cqw;
  background:var(--fg-rouge); border-color:var(--fg-rouge);
  color:var(--fa-sur-plein);
  box-shadow:0 0 0 .95cqw color-mix(in srgb, var(--fg-rouge) 15%, transparent); }

/* ── Le decrochement : l'attente ───────────────────────────────────
   Le trait s'interrompt. Deux bornes, un pointille entre elles, et le
   delai ecrit au-dessus : le vide se lit comme un vide. */
.fa-att{ position:relative; flex:none; height:var(--fa-h);
  width:9.8cqw; margin:0 2cqw; display:flex; align-items:center;
  justify-content:space-between; }
.fa-att i{ display:block; width:.2cqw; height:4cqw; background:var(--fg-ambre); }
.fa-att::before{ content:""; position:absolute; left:.2cqw; right:.2cqw; top:50%;
  border-top:.18cqw dashed var(--fg-ambre); opacity:.9; }

.fa-att-t{ position:absolute; left:50%; bottom:calc(50% + 2.35cqw);
  transform:translateX(-50%); width:19cqw; text-align:center; }
.fa-att-t b{ display:block; font-size:1.12cqw; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--fa-ambre-txt); white-space:nowrap; }
.fa-att-t span{ display:block; margin-top:.3cqw; font-size:1.1cqw; font-weight:400;
  line-height:1.35; color:var(--fg-mate); }

/* ── L'arrivee ─────────────────────────────────────────────────── */
.fa-fin{ flex:none; display:flex; align-items:center; gap:.75cqw;
  height:var(--fa-h); font-size:1.28cqw; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--fa-accent-txt); white-space:nowrap; }
.fa-fin i{ display:block; width:1.7cqw; height:1.7cqw; border-radius:50%;
  background:var(--fa-accent-plein); }

/* ── Les etiquettes sous le rail ───────────────────────────────────
   Seul ce qui porte le sens est ecrit : le debut, le point de douleur,
   la fin. Le reste reste muet. */
.fa-lab{ position:absolute; top:calc(100% - 1.4cqw); width:15cqw;
  font-size:1.18cqw; font-weight:400; line-height:1.38; color:var(--fg-mate); }
.fa-lab b{ display:block; font-weight:700; color:var(--fg-encre); }
.fa-lab--g{ left:-.15cqw; width:20cqw; text-align:left; }
.fa-lab--c{ left:50%; transform:translateX(-50%); text-align:center; }
.fa-lab--mal{ width:15.5cqw; }
.fa-lab--mal b{ color:var(--fa-rouge-txt); }

/* La note d'un rail court : le parcours entier tient en une phrase,
   posee dans la place que le rail ne prend pas. */
.fa-note{ flex:1 1 0; min-width:0; align-self:center;
  margin-left:1.4cqw; padding-left:2.6cqw;
  border-left:1px solid var(--fg-ligne);
  font-size:1.35cqw; font-weight:400; line-height:1.45; color:var(--fg-mate); }
.fa-note b{ font-weight:700; color:var(--fa-accent-txt); }