/* ════════════════════════════════════════════════════════════════════════
   TARIFS — « Configure ton plan »
   ════════════════════════════════════════════════════════════════════════

   ── LA MÉCANIQUE DE POSES, TRANSPOSÉE ──
   Ce qui vient de POSES (réplique au pixel figée au tag
   `tarifs-poses-reference`, avec ses scripts de mesure) : la mécanique —
   deux vues, trois axes, colonnes par durée d'engagement, carrousel, fondu
   croisé des pilules. Ce qui vient des maquettes validées par Corentin le
   26 septembre 2026 : l'habillage — haut de page vidéo, barre de choix qui
   le chevauche, cartes crème au grand prix bordeaux, filet à losange.
   Contraste vérifié par `tests/contraste-tarifs.mjs`.

   ── AUCUN SLUG DANS CETTE FEUILLE ──
   Les boutons radio portent le RANG de ce qu'ils commandent (`cp-exp-2`),
   les blocs aussi (`.exp--2`). Une pratique ajoutée en wp-admin fonctionne,
   dans la limite de quatre.

   ── CE QUI A ÉTÉ RETIRÉ DE POSES ──
   Crédits, « partageable », « payable 3x » : absents chez Chez Paulette. La
   hauteur des cartes n'est donc plus fixée à leurs 489 et 575px : elle suit
   le contenu, et les cartes d'une rangée s'égalisent entre elles.
   ════════════════════════════════════════════════════════════════════════ */

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════
   L'ÉTAT VIDE — aucune formule publiée
   ════════════════════════════════════════════════════════════════════════ */

.config {
  background-color: color-mix(in oklch, var(--linen-deep) 18%, var(--bg));
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
}
.config__vide { max-width: 46ch; margin-inline: auto; text-align: center; padding-block: 3rem; }
.config__eyebrow {
  font-family: var(--font-body); font-size: .8125rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--vin-700); margin: 0 0 1rem;
}
.config__vide-titre {
  font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15; color: var(--vin-700); margin: 0 0 .75rem;
}
.config__vide-corps { color: var(--ink-2); line-height: 1.65; margin: 0; }


/* ════════════════════════════════════════════════════════════════════════
   LE CONFIGURATEUR
   ════════════════════════════════════════════════════════════════════════ */

.plans,.plans *{box-sizing:border-box}
/* Déclaré ICI, avant le haut de page : son bloc mobile rend ce fond
   transparent, et une règle de base placée après l'écraserait. */
.plans{background:var(--bg)}
/* `#tarifs` est la cible du bouton du bloc vidéo (studio-reel). La marge
   additionne l'en-tête collant ET le chevauchement : la barre de choix
   remonte de --chevauchement au-dessus de #tarifs, et passait sous l'en-tête
   (mesuré le 30 septembre 2026 : 31 px du haut en PC, 55 px en mobile). */
#tarifs{scroll-margin-top:calc(var(--sq-header-h,83px) + var(--chevauchement,64px) + 12px)}

/* Le haut de page (.thero, --chevauchement) vit dans thero.css, partagé avec
   la page Réserver. Ici, seulement ce qui tient au panneau des cartes :
   en mobile, il laisse voir la photo du haut de page qui déborde dessous. */
@media (max-width:767px){
  .plans{position:relative;z-index:1;background:transparent}
}

/* ── LES COMMUTATEURS ──────────────────────────────────────────────────────
   Zéro JavaScript : des boutons radio et `:checked ~`. Les deux vues sont
   deux SECTIONS distinctes. */
/* ⚠ `fixed`, PAS `absolute`. Toucher une pilule donne le focus à son bouton
   radio ; posé en haut du bloc, le navigateur faisait défiler jusqu'à lui :
   la page remontait de 186 à 373px à chaque choix, en mobile (mesuré le
   26 septembre 2026). Fixé dans l'écran, le bouton est toujours visible :
   le focus ne fait plus rien défiler, et la pilule reste sous le doigt —
   0px, comme chez POSES. */
.cmd{position:fixed;top:0;left:0;opacity:0;width:1px;height:1px;pointer-events:none}

/* ── LE CHANGEMENT DE TYPE : une vue à la fois, qui apparaît en fondu ──
   Seule la vue choisie est dans la page : la page s'arrête après SA
   dernière carte. Les deux vues étaient superposées (fondu croisé) ; le
   bloc prenait alors la hauteur de la plus haute, et une seule carte
   d'abonnement laissait 927px de vide sous elle en mobile, depuis que les
   cartes s'empilent (vu par Corentin, 29 septembre 2026).
   Le FOND de la vue arrive tout de suite, et seul son contenu apparaît en
   fondu : si la vue entière partait de l'opacité zéro, on apercevait un
   instant, à travers, la photo du haut de page. Les cartes ne sautent
   pas : les deux vues commencent au même niveau sous la barre de choix. */
/* ⚠ `minmax(0,1fr)`, pas la colonne implicite `auto` : celle-ci s'élargit
   au contenu le plus large, et la scène montait à 1180px sur un écran de
   390 (mesuré le 26 septembre 2026). */
.plans{display:grid;grid-template-columns:minmax(0,1fr)}
.plan{grid-area:2/1;display:none;color:var(--ink);font-family:var(--font-body)}
#cp-mode-abo:checked  ~ .plan--abo,
#cp-mode-pack:checked ~ .plan--pack{display:block}
#cp-mode-abo:checked  ~ .plan--abo  > .scene,
#cp-mode-pack:checked ~ .plan--pack > .scene{animation:cp-fondu .34s var(--ease-out-expo) both}
@keyframes cp-fondu{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  #cp-mode-abo:checked ~ .plan--abo > .scene,#cp-mode-pack:checked ~ .plan--pack > .scene{animation:none}
}

/* ── DEUX FONDS CLAIRS, UN PAR VUE ──────────────────────────────────────
   Retenus par Corentin le 26 septembre 2026 (Impeccable live, puis « même
   traitement, une autre couleur légère ») : sans arche, fond clair, et le
   bordeaux ne sert plus qu'à DÉSIGNER le choix recommandé. Les deux fonds
   ont la MÊME luminosité (L* 91,7 et 91,2) et diffèrent par la teinte —
   beige contre rosé, ΔE 6,9 — comme le jaune et le lavande de POSES (7,6).
   Le rose s'arrête à 70 % : au-delà, le taupe posé dessus passe sous AA. */
.plan--abo {background:color-mix(in oklab,var(--linen-deep) 60%,var(--bg))}
.plan--pack{background:color-mix(in oklab,var(--rose-pastille) 70%,var(--bg))}
/* Le fond de la pratique choisie, sous un voile blanc chaud : plus dense en
   haut, où il porte les titres, il laisse le sol apparaître en bas. Sans
   image, `var()` échoue et le fond reste uni. */
.plans{--voile:linear-gradient(rgb(251 248 244 / .86),rgb(251 248 244 / .72) 60%,rgb(251 248 244 / .58))}
#cp-exp-1:checked ~ .plan{background-image:var(--voile),var(--fond-1)}
#cp-exp-2:checked ~ .plan{background-image:var(--voile),var(--fond-2)}
#cp-exp-3:checked ~ .plan{background-image:var(--voile),var(--fond-3)}
#cp-exp-4:checked ~ .plan{background-image:var(--voile),var(--fond-4)}
.plan{background-size:cover;background-position:center bottom}

.scene{max-width:1280px;margin:0 auto;padding:40px 32px 64px;text-align:center}

/* Le titre d'une vue, au-dessus des cartes (« 3 chemins pour ta pratique »),
   comme la maquette : un sur-titre précédé d'un trait, un titre Marcellus en
   bas de casse, une phrase. */
.vue__tete{margin:8px 0 6px}
.vue__surtitre{display:inline-flex;align-items:center;gap:14px;margin:0;
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--vin-700)}
.vue__surtitre::before{content:"";width:32px;height:1px;background:currentColor;opacity:.5}
.vue__titre:first-child{margin-top:0}
.vue__titre{margin:12px 0 0;font-family:var(--font-display);font-size:clamp(30px,3.2vw,42px);font-weight:400;line-height:1.1;color:var(--vin-800)}
.vue__sous{margin:10px 0 0;font-size:18px;line-height:1.5;color:var(--vin-800);text-wrap:balance}
/* Les mots entre astérisques du champ (« quand tu veux ») : la manuscrite du
   haut de page (thero.css), mais droite, sur la ligne (penchée, elle jurait
   dans la phrase ; demande de Corentin). Elle pend sous sa ligne de base : le
   léger retrait vers le haut la remet au niveau. */
.vue__main{display:inline-block;margin:0 .2em;font-family:"Homemade Apple",cursive;font-size:1.05em;line-height:1;
  color:var(--vin-700);transform:translateY(-.12em)}

/* ── LA BARRE DE CHOIX : une carte qui chevauche le haut de page ───────
   Maquette validée le 26 septembre 2026. Elle remonte de --chevauchement
   sur le haut de page qui la précède ; les trois choix tiennent sur une
   ligne en PC, séparés d'un filet, la question au-dessus de son rail. */
.barre{grid-row:1;position:relative;z-index:3;width:min(100% - 32px,1120px);
  margin:calc(-1 * var(--chevauchement)) auto 0;padding:18px 28px;border-radius:20px;
  background:color-mix(in oklab,var(--bg),white 40%);border:1px solid var(--gray-200);
  box-shadow:0 1px 2px rgb(94 32 40 / .06),0 16px 40px rgb(94 32 40 / .12)}
.axes{display:flex;justify-content:center;align-items:stretch;gap:0}
.axe{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 28px}
.axe + .axe{border-left:1px solid var(--gray-200)}
.axe__label{margin:0;font-size:14px;font-weight:500;line-height:1;color:var(--ink)}

/* Rail crème cerclé ; les pilules ne servent QU'À choisir. */
.rail{display:flex;align-items:center;height:44px;padding:3px;border-radius:999px;
  background:var(--bg);box-shadow:0 0 0 1px color-mix(in oklab,var(--vin-700) 28%,transparent)}
.pilule{display:flex;align-items:center;justify-content:center;
  height:38px;padding:0 18px;border-radius:999px;white-space:nowrap;cursor:pointer;
  font-size:14px;font-weight:600;line-height:1;letter-spacing:.02em;color:var(--ink);user-select:none;
  /* ── LE FONDU CROISÉ DE POSES ────────────────────────────────────────
     Les pilules NE BOUGENT PAS : l'opacité du fond se croise, `0.3s
     linear`, les deux alphas sommant à 1. Fond au repos à ALPHA ZÉRO sur
     la même teinte, pour que l'interpolation ne passe pas par du gris. */
  background-color:rgb(from var(--vin-700) r g b / 0);
  transition:.3s linear}
.pilule:hover{color:var(--vin-700)}
/* Pas de flash bleu au toucher en mobile : la pilule a déjà son fondu
   croisé, le surlignage par défaut du navigateur s'y superposait. */
.pilule{-webkit-tap-highlight-color:transparent}

@media (prefers-reduced-motion: reduce){ .pilule{transition:none} }

/* ── L'ÉTAT ACTIF, PAR RANG ─────────────────────────────────────────────── */
#cp-mode-abo:checked  ~ .barre .pil-mode-abo,
#cp-mode-pack:checked ~ .barre .pil-mode-pack,
#cp-exp-1:checked ~ .barre .pil-exp-1,
#cp-exp-2:checked ~ .barre .pil-exp-2,
#cp-exp-3:checked ~ .barre .pil-exp-3,
#cp-exp-4:checked ~ .barre .pil-exp-4{background-color:var(--vin-700);color:var(--davos)}

/* Le focus clavier vit sur le rail, puisque les boutons radio sont masqués. */
.plans:has(.cmd[name="cp-mode"]:focus-visible) .rail--type,
.plans:has(.cmd[name="cp-exp"]:focus-visible) .rail--exp{outline:2px solid var(--vin-700);outline-offset:4px}

/* ── LE CROISEMENT, PAR RANG ────────────────────────────────────────────── */
.exp{display:none}
/* UN seul groupe de pratique pour les deux vues : le choix survit au
   changement de type (arbitré le 26 septembre 2026). */
#cp-exp-1:checked ~ .plan .exp--1,
#cp-exp-2:checked ~ .plan .exp--2,
#cp-exp-3:checked ~ .plan .exp--3,
#cp-exp-4:checked ~ .plan .exp--4{display:block}

/* ── LA CARTE, commune aux deux vues ─────────────────────────────────────── */
/* La maquette du 26 septembre 2026 : une carte crème plus claire que le
   fond, sans trait, portée par une ombre bordeaux très douce. */
.carte{position:relative;display:flex;flex-direction:column;width:258px;
  border-radius:12px;background:color-mix(in oklab,var(--bg),white 45%);text-align:center;color:var(--ink);
  border:1.5px solid transparent;
  box-shadow:0 1px 2px rgb(94 32 40 / .05),0 14px 34px rgb(94 32 40 / .09)}
.carte--complet{opacity:.6}
/* La recommandée : même fond, même taille, même contour que ses voisines
   (demandé par Corentin : plus de trait bordeaux autour). Sa place (au
   centre en PC, en tête en mobile), son onglet et son bouton plein la
   distinguent. */
/* Le ruban : un ONGLET logé dans le coin haut droit, qui en épouse l'arrondi
   (celui de la carte en haut à droite, le même en bas à gauche). Il ne
   déborde pas de la carte et parle en Marcellus, en bas de casse : pas de
   petites capitales espacées, que le titre de la carte porte déjà juste
   en dessous. */
.ruban{--ruban-fond:color-mix(in oklab,var(--vin-700) 82%,var(--vin-500));
  position:absolute;top:-1.5px;right:-1.5px;z-index:2;margin:0;
  display:flex;align-items:center;gap:8px;padding:9px 16px 10px 14px;
  border-radius:0 12px 0 12px;
  background:var(--ruban-fond);color:var(--davos);
  font-family:var(--font-display);font-size:15px;line-height:1;letter-spacing:.01em;white-space:nowrap}
.ruban__etoile{flex:none;width:12px;height:12px}
/* L'onglet occupe le coin où commence le titre de la carte : TOUTES les
   cartes de la rangée descendent leur contenu d'autant, pour garder la même
   hauteur (demandé par Corentin : la conseillée n'est pas plus grande). */
:is(.rangee,.piste):has(.carte--vedette) .carte__corps{padding-top:58px}

.carte__corps{display:flex;flex-direction:column;flex:1;padding:34px 22px 18px}
/* Petites capitales très espacées. En Manrope : Marcellus ne descend jamais
   sous 24px (DESIGN.md), et la maquette les veut petites. */
.carte__titre{margin:0;font-size:14px;font-weight:500;line-height:1.55;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
/* LE prix : grand, en Marcellus, en bordeaux ; son unité juste dessous. */
.carte__prix{display:flex;justify-content:center;align-items:baseline;margin:16px 0 0}
.carte__prix b{font-family:var(--font-display);font-size:54px;font-weight:400;line-height:1;letter-spacing:-.01em;color:var(--vin-800)}
.carte__unite{margin:6px 0 0;font-size:16px;line-height:1.3;color:var(--ink-2)}
/* Le rythme et le prix du mois, sous un filet. */
.carte__details{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--linen-deep)}
.carte__details p{margin:0;font-size:15px;line-height:1.75;color:var(--ink-2)}
.losange{display:block;position:relative;height:1px;margin:18px 34px 0;
  background:linear-gradient(90deg,transparent,var(--linen-deep) 30%,var(--linen-deep) 70%,transparent)}
.losange::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--vin-700)}

/* La condition de l'abonnement, en petit sous le bouton (comme JETSET) :
   une mention, pas un argument. */
.carte__mention{margin:12px 0 4px;font-size:13px;line-height:1.45;color:var(--ink-2)}

.liste{list-style:none;margin:18px 0 14px;padding:0 0 0 16px;text-align:left}
.liste li{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;font-size:15px;font-weight:500;line-height:21px;color:var(--ink)}
.liste li svg{flex:none;width:15px;height:15px;margin-top:3px;color:var(--ink)}

/* Le bouton du thème, en bloc et non en pilule : la pilule veut dire
   « choisis », le bouton veut dire « achète ». */
.carte__cta{display:flex;width:100%;height:50px;margin-top:14px;padding-block:0;border-radius:6px;
  background:var(--vin-800);border-color:var(--vin-800);font-size:14px;letter-spacing:.1em;line-height:1}
/* Sans engagement, quand la piste a sa carte recommandée, son bouton est le
   SEUL plein : les autres passent en contour (relevé chez ClickFunnels).
   Les abonnements, eux, ont TOUS le bouton plein : en contour, « Je
   m'abonne » se voyait beaucoup moins, et l'onglet suffit à désigner la
   recommandée (Corentin, 29 septembre 2026). */
.piste:has(.carte--vedette) .carte:not(.carte--vedette) .carte__cta:not(.is-disabled){
  background:transparent;color:var(--vin-800);border-color:var(--vin-800)}
.piste:has(.carte--vedette) .carte:not(.carte--vedette) .carte__cta:not(.is-disabled):hover{
  background:var(--vin-800);color:var(--davos)}
.carte__cta.is-disabled{background:var(--gray-300);border-color:var(--gray-300);
  color:var(--ink);cursor:default;pointer-events:none;transform:none}

/* ── LA VUE ABONNEMENT : une colonne par durée d'engagement ────────────── */
.rangee{display:flex;justify-content:center;gap:12px;margin-top:34px}
.colonne{display:flex;flex-direction:column;align-items:center}
.colonne .carte{flex:1;width:100%}
/* Seule sur sa ligne, en PC, une carte s'élargit à 300px (≈ +20 % sur les
   258px d'une carte de pack), au lieu de flotter, étroite, au milieu. On
   élargit, on ne zoome pas : les textes gardent leur taille et leur netteté.
   Demandé par Corentin, 29 septembre 2026. */
@media (min-width:768px){
  /* Une base fixe, qui peut rétrécir : les réponses de « J'ai une
     question », ouvertes, n'élargissent pas la carte, et trois durées
     d'engagement tiendraient encore sur une tablette. */
  .rangee > .colonne{flex:0 1 340px;min-width:0}
  .rangee > .colonne:only-child{flex-basis:300px}
  .piste > .carte:only-child{flex-basis:300px}
}
/* La ligne au-dessus de la pile d'abonnements : mobile seulement (voir plus bas). */
.rythmes{display:none;text-align:center}
.rythmes__sous{margin:0;font-size:14px;line-height:1.4;color:var(--ink-2)}
/* ── LA VUE SANS ENGAGEMENT : la piste ─────────────────────────────────── */
/* 46px : en changeant de vue, les cartes ne sautent pas sous la barre de
   choix. */
.piste-zone{position:relative;margin-top:46px}
/* Une piste qui défile coupe tout ce qui dépasse d'elle. Garde basse de
   48px pour l'ombre des cartes, garde haute de 28px (l'onglet
   dépassait du bord ; il est désormais dans la carte, la garde est restée
   pour ne rien décaler). Compensées par la marge : rien ne bouge. */
.piste{display:flex;gap:12px;justify-content:center;padding:28px 0 48px;margin:-28px 0 -28px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;
  scroll-marker-group:after}
.piste::-webkit-scrollbar{display:none}
.piste > .carte{flex:0 0 258px;scroll-snap-align:start}
.piste:focus-visible{outline:2px solid var(--vin-700);outline-offset:4px}

/* Pagination : des cercles crème, le plein pour la carte en vue.
   ⚠ JAMAIS `max-content` NI `fit-content` sur le groupe : Chrome (154)
   calcule sa largeur SANS ses points et la pagination s'affiche vide. La
   largeur vient du nombre de cartes, posé par le pattern en `--n`. */
.piste::scroll-marker-group{display:flex;justify-content:center;align-items:center;gap:22px;
  width:calc(var(--n,2) * 32px);height:18px;margin:20px auto 0}
.piste > .carte::scroll-marker{content:'';width:12px;height:12px;border-radius:50%;cursor:pointer;
  background:transparent;border:1.5px solid color-mix(in oklab,var(--vin-700) 60%,transparent)}
.piste > .carte::scroll-marker:target-current{background:var(--vin-700);border-color:var(--vin-700)}
.piste > .carte::scroll-marker:focus-visible{outline:2px solid var(--vin-700);outline-offset:2px}

/* Quatre cartes tiennent de front sur desktop : rien ne défile, et Chrome
   allume alors le DERNIER point, ce qui ment. Les points ne reviennent
   qu'au-delà de quatre cartes. (En mobile, les cartes s'empilent.) */
@media (min-width:768px){
  .piste:not(:has(> :nth-child(5))){scroll-marker-group:none}
}

.famille__vide{margin:34px 0 0;font-style:italic;color:var(--ink-2)}

/* Les cartes d'une rangée ne s'étirent plus ensemble : celle dont on ouvre
   « J'ai une question » grandit seule (la pastille : patterns.css). */
.rangee{align-items:flex-start}

/* ── Le socle ─────────────────────────────────────────────────────────── */

.config__socle {
  padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(3.5rem, 9vw, 7rem);
  display: grid; gap: .875rem;
}
.config__socle p {
  font-family: var(--font-body); font-size: .9375rem; line-height: 1.6;
  color: var(--ink-2); margin: 0; max-width: 62ch;
}
.config__socle strong { color: var(--ink); font-weight: 600; }

@media (min-width: 720px) {
  .config__socle { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .config__socle p { font-size: .875rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE — les axes s'empilent,
   libellé au-dessus du rail ; les cartes défilent, une à la fois.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .scene{padding:28px 0 32px}
  /* Le fond en `cover` sur un panneau étroit et haut ne montrait qu'une
     bande de sol floue. Calé sur sa HAUTEUR et à gauche, il garde l'ombre
     des feuilles sur le mur et le parquet en bas. */
  .plan{background-size:100% 100%,auto 100%;background-position:0 0,4% 100%;background-repeat:no-repeat}
  .plans{--voile:linear-gradient(rgb(251 248 244 / .72),rgb(251 248 244 / .5) 55%,rgb(251 248 244 / .4))}
  /* ── LE PANNEAU QUI SE SOULÈVE (repris de Starfluide) ──
     Sur téléphone, la zone colorée des cartes devient un panneau à coins
     hauts arrondis, qui remonte DERRIÈRE la barre de choix (marge négative ;
     la barre reste au-dessus, z-index 3) : les coins se dessinent sur le fond
     clair du haut de page, l'ombre douce vers le haut fait le soulèvement.
     Sa garde haute rend la hauteur qu'il reprend. */
  .plan{margin-top:-28px;border-radius:36px 36px 0 0;
    box-shadow:0 -1px 0 rgb(94 32 40 / .10),0 -14px 30px rgb(94 32 40 / .10)}
  .plan .scene{padding-top:calc(28px + 20px)}
  /* La barre, plus étroite que l'écran, laisse émerger les coins du panneau
     de part et d'autre : c'est là que l'arrondi se lit. */
  .barre{width:calc(100% - 64px)}
  /* Sur téléphone, le sur-titre (« Nos abonnements ») se tait : le titre
     suffit, et la place revient aux cartes (demandé par Corentin). */
  .vue__tete{padding:0 20px}
  .vue__surtitre{display:none}
  .vue__titre{margin-top:0;font-size:28px}
  .vue__sous{font-size:16px}
  /* La barre : les deux choix empilés, séparés d'un filet horizontal. */
  .barre{padding:10px 14px}
  .axes{flex-direction:column;align-items:stretch}
  .axe{padding:8px 0 0;gap:6px}
  .axe:first-child{padding-top:0}
  .axe + .axe{border-left:0;border-top:1px solid var(--gray-200);margin-top:8px}
  .axe__label{font-size:13px}
  .rail{width:100%}
  .pilule{flex:1 1 0;min-width:0;padding:0 10px}

  /* ── LES CARTES S'EMPILENT (demandé par Corentin, 29 septembre 2026) ──
     Plus de carrousel : dans les deux vues, les cartes se posent les unes
     sous les autres, la recommandée en premier. Le HTML la met au CENTRE
     (l'ordre du PC) ; c'est `order:-1` qui la remonte ici, à l'affichage
     seulement. Ni défilement, ni points. L'écart laisse la place au titre
     « Engagement 6 mois » au-dessus de chaque abonnement. */
  .piste-zone{margin-top:12px}
  .rangee,.piste{flex-direction:column;align-items:center;gap:36px;
    overflow:visible;scroll-snap-type:none;scroll-marker-group:none;padding:14px 0 8px;margin:0}
  .colonne,.piste > .carte{width:min(100% - 48px,340px)}
  .piste > .carte{flex:none}
  .colonne:has(.carte--vedette),.piste > .carte--vedette{order:-1}
  /* Une ligne au-dessus de la pile : elle annonce qu'une autre formule
     attend plus bas. */
  .rythmes{display:block;margin:0 24px 2px}
  /* Empilées, les cartes n'ont pas à s'égaler : seule la conseillée, qui
     porte l'onglet, descend son contenu. */
  :is(.rangee,.piste):has(.carte--vedette) .carte:not(.carte--vedette) .carte__corps{padding-top:34px}
}

/* Cible tactile : 44px minimum (PRODUCT.md). */
@media (pointer: coarse){
  .rail{height:50px}
  .pilule{height:44px}
}