/* ═══════════════════════════════════════════════════════════════════════════════════════
   Cabestian — le socle : `cab-` figé, ses modules défilent.
   ───────────────────────────────────────────────────────────────────────────────────────
   Le préfixe des crates tient lieu de mot figé, et ce qui défile sont les suffixes : chaque
   arrêt se recompose en nom réel — cab-rag, cab-agent, cab-events. Sous la liste, ce que
   fait la brique, en clair.

   CETTE SECTION EST UNE BANDE COMME LES AUTRES. Un premier jet en faisait un bloc autonome :
   son propre fond, son propre rail, ses propres tokens de couleur, un surtitre posé en
   absolu. Il fonctionnait, mais il était rapporté — visiblement collé sur la page plutôt
   qu'écrit avec elle. Ici, rien n'est réinventé de ce que la page sait déjà faire :
     · `band band-dark` pour le fond et les marges verticales,
     · `band-inner` pour le rail, et le même plafond de 1180 px que .model, .cards ou .cmp,
     · `.lbl` pour le surtitre, comme « Le problème » ou « Fonctions »,
     · les tokens du site — cashmere, stalactite, soft-titanium, hair — et aucun autre.
   Ne restent en propre que les règles que rien d'existant ne couvre : la fenêtre de
   lecture, le dégradé de profondeur, la réserve de hauteur pour la description.

   L'aplat plutôt que le dégradé de .band-dark : les fondus haut et bas de la liste sont
   peints d'une couleur fixe, qui n'est juste qu'à une seule hauteur sur un dégradé —
   ailleurs, le fondu se voit comme une bande. Même raison que pour .band-paper.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.band.socle{
  background:var(--navy2);
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
/* le rail du socle est celui de toute la page : mêmes 1180 px, bornés à gauche, que la
   liste git↔planning, les cartes et le tableau comparatif */
.socle .band-inner{max-width:1180px;margin-right:auto;width:100%}

/* aucun écart entre le préfixe et la liste : « cab- » et « rag » forment UN nom. L'espace
   qui les séparait faisait lire un titre d'un côté et un mot de l'autre. */
.socle-rangee{display:flex;align-items:center;gap:0}
.socle-prefixe{
  flex:0 0 auto;font-family:var(--fm);font-weight:500;
  font-size:var(--t-t1);letter-spacing:-.02em;line-height:1.18;
  color:rgba(165,184,208,.4);
}

/* overflow ICI, et pas seulement sur la section : la piste fait dix-huit lignes, la fenêtre
   en montre trois. Sans la coupe, les autres se peignaient par-dessus la description. */
.socle-liste{
  flex:1 1 0;min-width:0;position:relative;overflow:hidden;isolation:isolate;
  height:clamp(280px,42vh,380px);
}
.socle-piste{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.socle-ligne{
  font-family:var(--fm);font-weight:500;font-size:var(--t-t1);letter-spacing:-.02em;
  line-height:1.18;white-space:nowrap;color:var(--stalactite);padding:5px 0;
  will-change:opacity,transform;
}
/* Toutes les lignes sont de la MÊME encre : c'est l'opacité qui dit laquelle on lit, posée
   à chaque image d'après la distance au centre (cf. socle.js). Pas de classe ni de
   transition CSS — une transition rejouerait une durée fixe pendant que le défilement en
   impose une autre, et un état binaire net/pâle ferait sauter la liste d'un cran à l'autre. */

.socle-liste::before,.socle-liste::after{
  content:'';position:absolute;left:0;right:0;height:22%;z-index:2;pointer-events:none;
}
.socle-liste::before{top:0;background:linear-gradient(180deg,var(--navy2),rgba(12,24,37,0))}
.socle-liste::after{bottom:0;background:linear-gradient(0deg,var(--navy2),rgba(12,24,37,0))}

/* ce que fait la brique : même corps et même gris que les autres paragraphes de bande
   sombre. La hauteur est réservée pour que le bloc ne saute pas d'un module à l'autre. */
.socle-desc{
  margin-top:clamp(16px,3vh,30px);max-width:54ch;min-height:5.4em;
  font-size:var(--t-large);line-height:1.52;color:var(--soft-titanium);
  transition:opacity .28s ease;
}
.socle-desc.change{opacity:0}
.socle-desc b{color:var(--stalactite);font-weight:600}

@media (max-width:860px){
  /* Le corps suit la largeur du mot le plus long, « cab-reconstitution » : 18 signes en
     chasse fixe, soit 10,44 em avec l'approche de -0,02 em, dans un rail de 86 vw (la
     gouttière vaut 7 vw de chaque côté sous 1444 px). 7,9 vw garde une marge de 5 %. À
     390 px, le corps passait de 34 à 30,8 px et le « n » final restait hors écran (audit
     du 23/09, M5). Au-dessus de 660 px, min() rend la main à --t-t1 : rien ne change. */
  .socle-prefixe,.socle-ligne{font-size:min(var(--t-t1),7.9vw)}
  .socle-liste{height:clamp(210px,32vh,290px)}
  .socle-desc{font-size:var(--t-base);min-height:7.5em}
}

/* Mouvement réduit : la bande redevient une bande ordinaire et la liste se déroule en
   entier, chaque module suivi de sa description. Rien n'est masqué, rien ne bouge —
   c'est le principe de toutes les scènes de ces pages. */
@media (prefers-reduced-motion:reduce){
  .band.socle{min-height:0;display:block}
  .socle-desc{transition:none}
}