/* ── LE PIVOT (SPEOS) ────────────────────────────────────────────────
   Deux rangées qui se répondent. En haut, la voie qu'on n'a pas
   prise : cinq tuiles mortes, isolées, en surface éteinte — cinq
   améliorations locales qui n'auraient jamais fait un service. En
   bas, le pivot : un seul fil cuivre, continu, qui porte les cinq
   temps du parcours. La figure dit une chose et une seule : la ligne
   du bas est continue, celles du haut n'existent pas.

   Figure en flux : chaque rangée prend toute la largeur, la hauteur
   vient du contenu. */

.spp-rang{ grid-column:1 / -1; }

.spp-lab{ font-size:1.3cqw; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-mate); margin-bottom:2.4cqw; }
.spp-lab b{ font-weight:700; color:var(--fg-encre); letter-spacing:.02em; }

/* ── AVANT : les tuiles mortes ──
   La même grille de cinq que la figure des accès, mais éteinte :
   surface morte, texte mat, aucun lien entre elles — c'est l'absence
   de ligne qui est le propos. */
.spp-morts{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:2.4cqw; }
.spp-morts span{ display:block; padding:1.6cqw 1.4cqw;
  background:var(--fg-plaque-2); border-radius:.7cqw;
  outline:1px solid var(--fg-ligne); outline-offset:-1px;
  font-size:1.35cqw; font-weight:600; color:var(--fg-mate);
  text-align:center; }

/* ── APRÈS : le fil continu ──
   Un seul trait cuivre sous les cinq temps, sans une seule coupure.
   Les points d'étape sont posés SUR le fil : le parcours passe à
   travers eux, il ne s'arrête pas devant. */
.spp-apres{ position:relative; padding:2cqw 1.8cqw 2.2cqw;
  background:var(--fg-plaque); border-radius:.7cqw;
  outline:1px solid var(--fg-ligne); outline-offset:-1px;
  box-shadow:var(--fg-om); }

.spp-temps{ position:relative; margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:2.4cqw; }
/* Le fil : derrière les points, du premier au dernier — il ne dépasse
   jamais le dernier temps, un parcours a une fin. */
.spp-temps::before{ content:""; position:absolute;
  left:calc((100% - 9.6cqw)/10); right:calc((100% - 9.6cqw)/10);
  top:.62cqw; height:.32cqw; border-radius:.2cqw;
  background:var(--fg-accent); opacity:.9; }
.spp-fil{ display:none; }

/* Le point est au centre de son temps, et le libelle sous le point. Ferres a
   gauche, les cinq temps se lisaient comme cinq colonnes independantes ; le
   fil passait derriere leurs debuts au lieu de passer par leurs centres. */
.spp-temps li{ position:relative; padding-top:2.6cqw; text-align:center; }
.spp-temps li i{ position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:1.55cqw; height:1.55cqw; border-radius:50%;
  background:var(--fg-accent);
  box-shadow:0 0 0 .38cqw color-mix(in srgb, var(--fg-accent) 22%, transparent); }
.spp-temps li b{ display:block; font-size:1.5cqw; font-weight:700;
  line-height:1.25; color:var(--fg-encre); }
.spp-temps li span{ display:block; margin-top:.4cqw; font-size:1.18cqw;
  font-weight:500; line-height:1.35; color:var(--fg-mate); }

/* En colonne étroite, les deux rangées s'empilent proprement :
   les tuiles mortes passent en deux colonnes, le parcours en liste. */
@container (max-width:560px){
  .spp-lab{ font-size:2.6cqw; }
  .spp-morts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.6cqw; }
  .spp-morts span{ font-size:2.7cqw; padding:2.6cqw 2cqw; }
  .spp-apres{ padding:3.4cqw 3cqw; }
  .spp-temps{ grid-template-columns:1fr; gap:2.8cqw; }
  .spp-temps::before{ left:1.05cqw; right:auto; top:1cqw; bottom:1cqw;
    width:.4cqw; height:auto; }
  .spp-temps li{ padding-top:0; padding-left:3.6cqw; }
  .spp-temps li i{ width:2.5cqw; height:2.5cqw; }
  .spp-temps li b{ font-size:2.9cqw; }
  .spp-temps li span{ font-size:2.4cqw; }
}