/* Rail — brique « tuiles défilantes », manuel seul (v0, 2026-09-12).
   Sans JavaScript : un rail qui se fait glisser (doigt, molette, flèches
   clavier) avec accroche sur chaque tuile. Avec JavaScript : flèches et points
   de position en plus. Aucun défilement automatique — un contenu qui bouge
   seul doit pouvoir être mis en pause (WCAG 2.2.2) ; on n'ouvre pas la porte.
   Variables surchargeables par le thème : --rail-gap, --rail-visibles,
   --rail-accent, --rail-muted. */
.rail {
  display: flex;
  gap: var(--rail-gap, 18px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  padding: 4px 4px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--rail-muted, #bbb) transparent;
  -webkit-overflow-scrolling: touch;
}
.rail > * {
  flex: 0 0 calc((100% - (var(--rail-visibles, 3) - 1) * var(--rail-gap, 18px)) / var(--rail-visibles, 3));
  scroll-snap-align: start;
}
.rail:focus-visible { outline: 3px solid var(--rail-accent, currentColor); outline-offset: 4px; }
@media (max-width: 1000px) { .rail { --rail-visibles: 2; } }
@media (max-width: 640px)  { .rail { --rail-visibles: 1; } }
@media (prefers-reduced-motion: no-preference) { .rail { scroll-behavior: smooth; } }

.rail-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.rail-nav button {
  appearance: none; border: 2px solid var(--rail-accent, currentColor); background: transparent;
  color: var(--rail-accent, currentColor); font: inherit; font-size: 1.3rem; line-height: 1;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
}
.rail-nav button:disabled { opacity: .35; cursor: default; }
.rail-nav button:focus-visible { outline: 3px solid var(--rail-accent, currentColor); outline-offset: 3px; }
.rail-points { display: flex; gap: 8px; }
.rail-points i { width: 9px; height: 9px; border-radius: 50%; background: var(--rail-muted, #bbb); transition: background .2s; }
.rail-points i.actif { background: var(--rail-accent, currentColor); }