/*******************
  RAIL DE CARTES DÉFILANTES (refonte, 14/10/2026)
  Composant commun : « Pour qui » de l'accueil, puis presse, avis, fiche produit.
  Défilement natif (scroll-snap) ; rail.js ajoute les flèches, les tirets et leur état.
  Flèches au-dessus à droite (maquette desktop), tirets dessous (maquette mobile).
  Bascule flèches → tirets à 760 px, comme le hero (seuil à valider par Antoine).
*******************/

.rail {
  --rail-gap: clamp(12px, 9.6px + 0.6vw, 22px);
  --rail-pad: var(--page-edge); /* même bord de page que le hero */
  position: relative;
}
.rail-nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(10px, 0.9vw, 16px);
  padding: 0 var(--rail-pad) var(--sp-m);
}
.rail-arrow {
  display: block;
  width: clamp(28px, 24.6px + 0.6vw, 34px);
  height: clamp(28px, 24.6px + 0.6vw, 34px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
  transition: opacity 0.2s, color 0.2s;
}
.rail-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
.rail-arrow:hover:not(:disabled) {
  color: var(--c-accent);
}
.rail-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
/* Rien à faire défiler : les flèches gardent leur place (rythme vertical de la maquette). */
.rail.is-static .rail-arrow {
  visibility: hidden;
}
.rail-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rail-track {
  display: flex;
  gap: var(--rail-gap);
  margin: 0;
  padding: 0 var(--rail-pad);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-pad);
  scrollbar-width: none;
}
.rail-track::-webkit-scrollbar {
  display: none;
}
.rail-track > * {
  scroll-snap-align: start;
  margin: 0;
}

/* Tirets cliquables : le bouton fait 24 px de haut pour le doigt, le tiret 3 px. */
.rail-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  padding-top: max(0px, var(--sp-m) - 10px);
}
.rail-dots button {
  position: relative;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.rail-dots button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--c-line);
  transition: background-color 0.2s;
}
.rail-dots button.is-active::before {
  background: var(--c-accent);
}

@media (max-width: 760px) {
  .rail-nav {
    display: none;
  }
  .rail-dots {
    display: flex;
  }
  .rail.is-static .rail-dots {
    display: none;
  }
}
/* Rail automatique (« Pour qui » de l'accueil, Antoine 03/11) : tirets à toute largeur, et en desktop les
   flèches aussi, en turquoise. */
.rail-auto .rail-arrow {
  color: var(--c-accent);
  opacity: 1;
}
.rail-auto .rail-arrow:hover:not(:disabled) {
  color: var(--c-ink);
}
.rail-auto .rail-dots {
  display: flex;
}
.rail-auto.is-static .rail-dots {
  display: none;
}