.railwrap{position:relative}


.rail{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;padding:0 18px 10px;
  scroll-snap-type:x proximity;scroll-padding-inline:18px;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline:3px solid var(--gold,#FFC233);outline-offset:-3px}
.rail.tire{scroll-behavior:auto;scroll-snap-type:none;cursor:grabbing;user-select:none}
.rail.tire a{pointer-events:none}
.rnav{position:absolute;top:38%;transform:translateY(-50%);z-index:2;width:48px;height:48px;
  border-radius:50%;border:1px solid var(--rail-bord,rgba(255,255,255,.28));background:var(--rail-btn,rgba(16,16,20,.72));
  color:var(--rail-btn-t,#fff);font-size:var(--t-xl,20px);line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;backdrop-filter:blur(6px);transition:opacity .2s,background .2s}
.rnav:hover{background:var(--rail-btn-h,rgba(16,16,20,.95))}
.rnav[disabled]{opacity:0;pointer-events:none}
.rnav.pre{left:clamp(10px,1.2vw,22px)}
.rnav.suiv{right:clamp(10px,1.2vw,22px)}
@media (hover:none){.rnav{display:none}}
.railbar{margin:26px var(--gut) 0;height:3px;border-radius:20px;position:relative;
  background:var(--rail-piste,rgba(255,255,255,.15));cursor:pointer;touch-action:none}
.railbar i{position:absolute;top:-2px;height:7px;border-radius:20px;background:var(--rail-curseur,#fff);
  width:22%;left:0;transition:height .2s,top .2s}
.railbar:hover i,.railbar.grab i{height:11px;top:-4px}
.railhint{margin:11px var(--gut) 0;display:flex;justify-content:space-between;font-size:var(--t-xxs,11px);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-aide,rgba(255,255,255,.62))}