/* ================= LES RANGÉES DE MARQUE (25/08/2026) =================
   Ligne de gril, mot de marque en fond, bouton soude a ses fleches. La CARD n est pas ici :
   c est celle de la vitrine (`ds-vitrine.css`), reutilisee telle quelle — meme balisage,
   memes classes `vt-*`. Il n y avait aucune raison d en maintenir deux.

   Le `.rail` et le carrousel viennent de `ds-home.css` et `ds-home.js` : le theme en a deja
   un, generique, avec le clavier et `prefers-reduced-motion`. On ne le refait pas. */

/* ---------- CE QU IL NE FAUT PAS FAIRE, ET POURQUOI ----------
   J avais pose `main.wrap:has(.rg){overflow-x:clip}` pour absorber 4 px de debord. C ETAIT
   FAUX ET ÇA A CASSE LA VITRINE : `clip` cree un contexte de rognage qui coupe TOUS les
   enfants en pleine largeur, pas seulement le mien. A 1920 la vitrine, qui s echappait tres
   bien par `width:100vw`, se retrouvait rognee sur le conteneur de 1240 px et ses cards
   sortaient coupees des deux cotes.

   Aucune mesure ne l a montre — la geometrie repondait « x=0, pleine largeur » parce que
   `getBoundingClientRect` ignore le rognage d un ancetre. C est la CAPTURE qui l a montre,
   et l owner avant moi.

   Les 4 px sont donc laisses tels quels, et la regle est supprimee. S il faut les traiter,
   ce sera sur la rangee seule, jamais sur le conteneur commun. */


.rg{margin-top:clamp(30px,4vw,54px)}

/* ---------- LA LIGNE DE GRIL ----------
   Une ligne sur le fond de page, pas un bandeau. Le pourcentage entre DANS le titre. */
.rg-gril{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:0 0 14px}
.rg-t{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,3.4vw,42px);
  line-height:.98;margin:0;letter-spacing:.004em;color:var(--ink);text-wrap:balance}
.rg-s{font-size:14px;color:var(--ash);margin:5px 0 0;max-width:62ch}
.rg-eco{color:var(--ink);font-weight:700;
  box-shadow:inset 0 -.42em 0 color-mix(in srgb, var(--volt) 70%, transparent)}
.rg-a{flex:none}

/* ---------- LA PASTILLE « JUSQU’À −X % » ----------
   Le volt ne porte du texte que sur du sombre : 16,3:1 sur l encre, 1,7:1 sur l os. L encre
   n est donc pas une decoration, c est ce qui rend le chiffre lisible.
   Le mot est DEHORS de la pastille : « jusqu a » est une nuance de langue, pas une donnee,
   et la pastille ne doit contenir que ce que les etiquettes des cards contiennent — un
   pourcentage. Il est en Satoshi et non en Clash : dans la meme fonte que le nombre, il
   ferait une quatrieme voix dans le titre. */
.rg-jq{white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  display:inline-block;line-height:1}
.rg-jq .m{font-family:var(--body);font-weight:700;font-size:.3em;text-transform:uppercase;
  letter-spacing:.15em;vertical-align:.62em;color:var(--ash);margin-right:.34em}
.rg-jq .n{font-family:var(--display);background:var(--ink);color:var(--volt);
  border-radius:9px;padding:.06em .34em .12em;display:inline-block}
.rg-jq i{font-style:normal;font-size:.5em;margin-left:2px}

/* ---------- LE BOUTON SOUDÉ À SES FLÈCHES ----------
   Un contour, un refend pointille : le lien et les deux fleches sont UN objet, pas trois
   choses posees cote a cote. Le bouton lui-meme vient de `ds_bouton_sortie()`. */
.rg-grp{display:inline-flex;align-items:stretch;flex:none;overflow:hidden;
  background:var(--ink);border-radius:10px}
.rg-grp .ds-sortie{border-radius:0}
.rg-sep{width:1px;background:none;border-left:1px dashed #3a3a3a;flex:none;margin:9px 0}
.rg-grp .rvbtn{width:48px;min-height:48px;flex:none;background:none;border:0;
  color:var(--bone);display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),opacity .18s var(--ease)}
.rg-grp .rvbtn:not([disabled]):hover{background:var(--ink2);color:var(--volt)}
.rg-grp .rvbtn[disabled]{opacity:.28;cursor:default}
/* Pas de fleches si le rail ne deborde pas : une commande qui ne commande rien promet une
   suite qui n existe pas. L etat est pose par `ds-home.js`, qui seul connait la largeur. */
.railwrap[data-fixe="oui"] .rvbtn,
.railwrap[data-fixe="oui"] .rg-sep{display:none}

/* ---------- LE MOT DE MARQUE, TON SUR TON ----------
   A 8 % il n ajoute aucune famille de teinte face aux aplats des cards, la ou un bandeau
   sombre en ajoutait une. `left:0` et non la marge du conteneur : `.rg-geant` vit dans
   `main.wrap`, deja rentre — le calcul l appliquait deux fois et le mot demarrait 13 px
   trop a droite, coupe de 5 px a 402 et de 47 a 360. */
/* LA TAILLE EST PORTEE PAR `.rg-geant`, PAS PAR LE SPAN. Un `em` pose sur le parent
   se resout sur la taille HERITEE (16 px), pas sur les 190 px du mot : en la remontant
   d un cran, `em` devient utilisable pour caler l encre. Le span suit en `1em`.
   LA BANDE FAIT LA HAUTEUR DE L ENCRE, pas une valeur choisie a l oeil. Avant, le mot
   faisait 131 px pour un creneau visible de 60 : il etait coupe de 19 px en haut ET de
   52 en bas, et le remonter n aurait fait que deplacer la coupe. `.72em` de haut et
   `bottom:-.074em` posent le bas des capitales sur le bas de la boite ; le rail suit
   sans marge negative et lui laisse ses 4 px de reserve.
   Le .074 est MESURE sur un clone hors ecran a fond opaque, pas deduit : la boite d une
   ligne en `line-height:.8` ne dit rien de la ou les capitales s arretent vraiment. */
/* `.vt-geant` PARTAGE CES REGLES, il ne les recopie pas. Le .0736 vient d une mesure au
   pixel sur un clone hors ecran ; ecrit une deuxieme fois ailleurs il derive au premier
   ajustement et le mot se remet a etre coupe, en silence. La vitrine pose son propre
   retrait lateral dans sa feuille, c est la seule chose qui differe. */
.rg-geant,.vt-geant{position:relative;overflow:hidden;height:.72em;pointer-events:none;
  font-size:clamp(62px,13vw,190px);margin-bottom:0}
.rg-geant span,.vt-geant span{position:absolute;left:0;bottom:-.074em;
  font-family:var(--display);text-transform:uppercase;font-size:1em;
  line-height:.8;letter-spacing:-.02em;white-space:nowrap;
  color:color-mix(in srgb, var(--ink) 8%, transparent)}

/* ---------- LE RAIL ---------- */
/* `overflow-x:clip` EST POSE ICI, SUR LA RANGEE SEULE — jamais sur `main.wrap`.
   Le rail porte `margin-inline:-4px` (la reserve de l anneau de focus du theme) : il fait
   donc 8 px de plus que l ecran et deborde de 4 px a droite, assez pour faire apparaitre
   une barre de defilement horizontale.
   Je l avais d abord pose sur `main.wrap` : `clip` cree un contexte de rognage qui coupe
   TOUS les enfants en pleine largeur, et la VITRINE s est retrouvee rognee sur 1240 px, ses
   cards coupees des deux cotes a 1920. Aucune mesure ne l a vu — `getBoundingClientRect`
   ignore le rognage d un ancetre et repondait « pleine largeur ». Seule la capture, et
   l owner, l ont vu. Le pixel rendu aux deux bords est desormais le controle. */
.rg-rang{width:100vw;margin-inline:calc(50% - 50vw);overflow-x:clip}
/* `scroll-padding-inline` EST OBLIGATOIRE, pas decoratif. `scroll-snap-type: x mandatory`
   (herite de `ds-home.css`) cale le conteneur sur le premier point d ancrage, qui est
   DERRIERE le `padding-inline` : au repos le rail etait deja defile de 128 px et la premiere
   card sortait a x=-4. `scroll-padding` deplace les points d ancrage au lieu du contenu.
   Le meme defaut avait ete trouve en maquette ; le correctif n avait pas suivi jusqu ici. */
/* LES 4 px DE MARGE NEGATIVE DU THEME SONT DELIBERES : `.rail` porte `margin:0 -4px` avec
   `padding:20px 4px` pour que l anneau de focus d une card ne soit pas rogne par
   l `overflow`. Ma surcharge ecrasait le padding mais PAS la marge — la rangee sortait
   4 px trop a gauche. On COMPENSE au lieu de supprimer la reserve : padding = gouttiere + 4. */
/* PLEINE LARGEUR, comme la vitrine. J avais rentre le rail sur le conteneur de 1240 px
   pour aligner la premiere card sur la ligne de titre : a 1440 ça passait, mais a 1920 la
   rangee demarrait a 364 px avec des cards de 197 px entre deux grandes marges vides,
   pendant que la vitrine juste au-dessus allait bord a bord. Deux rangees de la meme page
   ne peuvent pas avoir deux largeurs.
   La LIGNE DE TITRE reste rentree sur 1240 : c est exactement ce que fait la vitrine —
   le texte dans le conteneur, la marchandise bord a bord.
   Les 4 px restants sont la reserve de l anneau de focus du theme (`margin:0 -4px`). */
.rg .rail{--pv:6;gap:2px;margin-inline:-4px;padding:4px;scroll-padding-inline:4px}
.rg .rail > *{flex:0 0 calc((100% - 5*2px)/6)}
@media (max-width:1100px){.rg .rail{--pv:3}.rg .rail > *{flex:0 0 calc((100% - 2*2px)/3)}}
.rg-prog{height:2px;background:var(--line);position:relative;overflow:hidden;
  margin:16px max(var(--gut),calc((100vw - 1240px)/2 + var(--gut))) 0}
.rg-prog .rvprog-fill{position:absolute;inset:0;background:var(--ink);
  transform-origin:left;transform:scaleX(0)}
@media (prefers-reduced-motion:no-preference){.rg-prog .rvprog-fill{transition:transform .25s var(--ease)}}

/* ---------- LA SORTIE EN FIN DE RAIL — téléphone seulement ----------
   Elle n existe qu au telephone : sur grand ecran le bandeau porte deja son bouton, deux
   sorties cote a cote diraient deux fois la meme chose.
   LE SELECTEUR EST CONTEXTUEL, `.rg .rail > .dsx` (0,3,0), et c est deliberé. Le composant
   se declare `flex` chez lui, dans sa propre feuille, et cette feuille peut charger apres :
   une classe simple serait a egalite et perdrait sur l ordre. C est exactement ce qui est
   arrive a la version precedente, qui partageait la classe `vt-bd` avec les cards de la
   vitrine et s affichait sur ordinateur. */
.rg .rail > .dsx{display:none}

/* ================= SOUS 700 px =================
   La ligne de titre ET le bouton disparaissent : entre le menu et la rangee il ne reste que
   le mot de marque. La premiere chaussure passe de 266 a 80 px sous le menu.

   LE TITRE RESTE POUR LES MACHINES. Le mot en fond est `aria-hidden` et a 14 % de contraste,
   decoratif par construction : `display:none` sur le titre le retirerait aussi de l arbre
   d accessibilite. On le masque a l oeil seulement. */
@media (max-width:700px){
  main.wrap:has(> .rg:first-child){padding-top:0}
  .rg:first-child{margin-top:0}
  .rg-t,.rg-s{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
    white-space:nowrap;margin:-1px;padding:0;border:0}
  .rg-gril{display:contents}
  .rg-a{display:none}
  /* `overflow:visible` et `line-height:1` : avec `.8` les capitales debordent leur boite de
     ligne des DEUX cotes. J avais corrige le bas et coupe le haut — la sonde ne mesurait
     qu un bord. */
  /* En mobile le span redevient statique : `bottom` ne s applique plus, c est la marge
     negative qui decide du recouvrement. Avec `line-height:1` l encre s arrete .1735em
     au-dessus du bas de la boite — au-dela, les cards mordent le mot (9 px avant). */
  .rg-geant,.vt-geant{height:auto;overflow:visible;margin-top:0;margin-bottom:-.16em}
  .rg-geant span,.vt-geant span{position:static;display:block;bottom:auto;line-height:1;
    color:color-mix(in srgb, var(--ink) 14%, transparent)}
  .rg .rail{--pv:1.6;gap:0;padding-inline:4px;scroll-padding-inline:4px}
  .rg .rail > *{flex:0 0 62vw}
  .rg .rail > .dsx{display:flex}

}