/* ==========================================================================
   RAIL - horizontal scrolling list with prev/next buttons and a progress bar.
   Rendered by paragraph--slidertext.html.twig when slider type = "grid".
   Variants (set with field_class on the paragraph):
     rail-numbered : big gold number + label ("Nos accompagnements")
     rail-steps    : coloured cards with round number ("Shift Model")
   Numbers come from a CSS counter, so editors only write the text.
   ========================================================================== */
.rail { position: relative; }
.rail__track {
  display: flex; gap: var(--space-4);
  margin: 0; padding: 0 0 var(--space-4); list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; counter-reset: rail;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track:focus-visible { outline-offset: 4px; }
.rail__item { flex: 0 0 clamp(230px, 21vw, 290px); scroll-snap-align: start; counter-increment: rail; min-width: 0; }
.rail__item > :first-child { margin-top: 0; }
.rail__item > :last-child { margin-bottom: 0; }

.rail__controls { display: flex; align-items: center; gap: clamp(var(--space-4), 2vw, var(--space-6)); margin-top: clamp(var(--space-5), 2.6vw, var(--space-6)); }
.rail__bar { position: relative; flex: 1 1 auto; height: 2px; overflow: hidden; border-radius: 2px; background: var(--epsa-line); }
.rail__bar-fill { position: absolute; inset: 0 auto 0 0; width: 34%; background: var(--epsa-gold); border-radius: 2px; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rail__controls .btn-circle { width: 2.75rem; height: 2.75rem; }

/* Variant 1: numbered */
.rail-numbered .rail__item {
  display: flex; flex-direction: column; min-height: clamp(190px, 17vw, 230px);
  padding: var(--space-5) var(--space-5) var(--space-5);
  border-left: 1px solid var(--epsa-line);
}
.rail-numbered .rail__item::before {
  content: counter(rail, decimal-leading-zero);
  font-size: clamp(var(--font-size-3xl), 3.4vw, var(--font-size-4xl)); font-weight: 300; line-height: var(--lh-none); letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums; color: var(--epsa-gold);
}
.rail-numbered .rail__item > * { margin-top: clamp(var(--space-6), 4vw, var(--space-8)); font-size: clamp(var(--font-size-base), 1.5vw, var(--font-size-xl)); font-weight: 500; line-height: var(--lh-snug); color: var(--epsa-ink); }
.rail-numbered .rail__item > * ~ * { margin-top: var(--space-2); }

/* Variant 2: steps (coloured cards) */
.rail-steps .rail__item {
  --step: var(--epsa-step-1); --step-ink: var(--epsa-ink);
  flex-basis: clamp(260px, 26vw, 320px);
  display: flex; flex-direction: column;
  min-height: clamp(320px, 30vw, 380px);
  padding: var(--space-5);
  border-radius: var(--epsa-radius-card);
  background: var(--step); color: var(--step-ink);
}
.rail-steps .rail__item:nth-child(7n+1) { --step: var(--epsa-step-1); }
.rail-steps .rail__item:nth-child(7n+2) { --step: var(--epsa-step-2); }
.rail-steps .rail__item:nth-child(7n+3) { --step: var(--epsa-step-3); }
.rail-steps .rail__item:nth-child(7n+4) { --step: var(--epsa-step-4); }
.rail-steps .rail__item:nth-child(7n+5) { --step: var(--epsa-step-5); --step-ink: var(--epsa-navy); }
.rail-steps .rail__item:nth-child(7n+6) { --step: var(--epsa-step-6); }
.rail-steps .rail__item:nth-child(7n+7) { --step: var(--epsa-step-7); }
.rail-steps .rail__item::before {
  content: counter(rail, decimal-leading-zero);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 2.875rem; height: 2.875rem; border-radius: 50%;
  background: var(--step-ink); color: var(--step);
  font-weight: 700; font-size: var(--font-size-m);
}
.rail-steps .rail__item :is(h2, h3, h4, p, strong) { color: var(--step-ink); }
.rail-steps .rail__item :is(h2, h3, h4) { margin: var(--space-6) 0 0; font-size: clamp(var(--font-size-base), 1.5vw, var(--font-size-xl)); font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: var(--lh-tight); }
.rail-steps .rail__item :is(h2, h3, h4)::after { content: ''; display: block; width: 2.5rem; height: 2px; margin: var(--space-3) 0; background: currentColor; opacity: 0.55; }
.rail-steps .rail__item p { margin: 0; font-size: var(--font-size-base); line-height: var(--lh-normal); font-weight: 500; }