/* ── LES CINQ ACCÈS (SPEOS) ──────────────────────────────────────────
   Cinq guichets côte à côte, chacun avec sa propre nomenclature — réf.
   de lot ici, job id là, n° d'envoi ailleurs. Dessous, le trajet d'une
   communication : une ligne pointillée qui se casse entre chaque
   plaque. Le rouge marque la rupture, jamais une marque : c'est un
   état de douleur, le seul de la figure.

   Figure en flux (.sc--flux) : la hauteur vient du contenu des fiches,
   la ligne de trajet reprend la même grille de cinq colonnes pour que
   ses cassures tombent exactement entre les plaques. */

/* La fiche d'un guichet. */
.spa{
  display:flex; flex-direction:column; gap:1.15cqw;
  padding:1.5cqw 1.4cqw 1.6cqw;
}
.spa-h{ display:flex; flex-direction:column; gap:.55cqw; }
.spa-h s{ text-decoration:none; font-family:var(--display);
  font-size:1.45cqw; font-weight:700; line-height:1; color:var(--fg-mate);
  font-variant-numeric:tabular-nums; }
.spa-h b{ font-size:1.5cqw; font-weight:700; line-height:1.3;
  color:var(--fg-encre); }

/* La nomenclature : deux lignes factices, et surtout DIFFÉRENTES d'un
   guichet à l'autre — c'est ce désaccord qui fait la figure. */
.spa-nom{ margin-top:auto; display:flex; flex-direction:column; gap:.5cqw;
  padding-top:1.05cqw; border-top:1px solid var(--fg-ligne); }
.spa-nom > div{ display:flex; align-items:baseline; justify-content:space-between;
  gap:.6cqw; }
.spa-nom dt{ font-size:1.08cqw; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--fg-mate); white-space:nowrap; }
.spa-nom dd{ font-size:1.14cqw; font-weight:600; line-height:1.3;
  color:var(--fg-encre); font-variant-numeric:tabular-nums;
  letter-spacing:.03em; opacity:.85; white-space:nowrap; }

/* ── LE TRAJET QUI SE CASSE ──────────────────────────────────────────
   Le rang du trajet prend toute la rangée et reprend la grille des
   cinq guichets : chaque segment pointillé court sous sa plaque, et
   la rupture — une croix rouge — tombe dans l'interstice. */
.spa-rw{ grid-column:1 / -1; }
.spa-tr{ display:flex; flex-direction:column; gap:1.7cqw;
  padding-top:1.1cqw; }

.spa-ligne{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:2.4cqw; }
.spa-ligne i{ position:relative; display:block; height:0;
  border-top:.26cqw dashed color-mix(in srgb, var(--fg-mate) 78%, transparent); }
/* Le point d'entrée dans chaque guichet. */
.spa-ligne i::before{ content:""; position:absolute; left:0; top:0;
  width:.85cqw; height:.85cqw; border-radius:50%;
  transform:translate(-15%,-50%); background:var(--fg-mate); }
/* La rupture, au centre de l'interstice. Un état de douleur : rouge. */
.spa-ligne i:not(:last-child)::after{ content:"×"; position:absolute;
  right:-1.2cqw; top:0; transform:translate(50%,-50%);
  font-size:2.1cqw; font-weight:700; line-height:1;
  color:var(--fg-rouge); }

/* La question du client — l'étiquette cuivre — et ce qu'il en reste. */
.spa-q{ display:flex; align-items:center; justify-content:space-between;
  gap:1.4cqw; flex-wrap:wrap; }
.spa-q b{ font-size:1.5cqw; font-weight:700; line-height:1.3;
  letter-spacing:.01em; color:#fff; background:var(--fg-accent);
  border-radius:2.4cqw; padding:.6cqw 1.35cqw; white-space:nowrap; }
.spa-q span{ font-size:1.4cqw; font-weight:400; line-height:1.4;
  color:var(--fg-mate); text-align:right; }
.spa-q em{ font-style:normal; font-weight:700; color:var(--fg-rouge); }

/* ── PETIT ÉCRAN ─────────────────────────────────────────────────────
   Sous 560 px les cinq fiches passent en colonne (règle du flux) ; la
   ligne de trajet reste horizontale et devient l'abrégé du parcours,
   cinq points et quatre cassures. On rend du corps aux textes fins. */
@container (max-width:560px){
  .spa{ padding:3cqw 3.2cqw 3.2cqw; gap:2.2cqw; }
  .spa-h{ flex-direction:row; align-items:baseline; gap:1.6cqw; }
  .spa-h s{ font-size:2.9cqw; }
  .spa-h b{ font-size:3.3cqw; }
  .spa-nom{ padding-top:2cqw; gap:1cqw; }
  .spa-nom dt{ font-size:2.3cqw; }
  .spa-nom dd{ font-size:2.5cqw; }
  .spa-tr{ gap:3.4cqw; padding-top:2cqw; }
  .spa-ligne{ gap:3.4cqw; }
  .spa-ligne i{ border-top-width:.5cqw; }
  .spa-ligne i::before{ width:1.7cqw; height:1.7cqw; }
  .spa-ligne i:not(:last-child)::after{ font-size:4.2cqw; right:-1.7cqw; }
  .spa-q{ gap:1.8cqw; }
  .spa-q b{ font-size:3.1cqw; border-radius:5cqw; padding:1.3cqw 2.8cqw; }
  .spa-q span{ font-size:2.9cqw; text-align:left; }
}