/*
 * Rail horizontal (mise en scène « rail » des pages de service). L'accueil
 * présente désormais ses offres en anneau (sections/anneau.css).
 *
 * Rail horizontal. La section fait exactement une hauteur d'écran : c'est elle
 * qui est épinglée, donc tout ce qu'elle contient doit tenir sans défilement
 * vertical, sinon la fin des cartes devient inatteignable.
 */

.rail {
    block-size: var(--vh);
    padding-block: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-content: center;
    gap: clamp(1rem, 3vh, 2.5rem);
    overflow: clip;
}

.rail__entete {
    padding-block-start: calc(var(--entete-h) + 2rem);
    display: grid;
    gap: 0.75rem;
}

.rail__entete h2 {
    max-inline-size: 34ch;
}

.rail__entete h2 span {
    display: block;
    font-size: var(--t-md);
    font-family: var(--police-texte);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    margin-block-start: 0.6rem;
}

.rail__cadre {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.rail__piste {
    display: flex;
    align-items: stretch;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding-inline: var(--gouttiere);
    will-change: transform;
}

.rail__jauge {
    padding-block-end: 2rem;
}

.rail__jauge span {
    display: block;
    block-size: 2px;
    background: var(--cyan);
    box-shadow: 0 0 10px rgb(46 163 242 / 0.8);
    transform: scaleX(0);
    transform-origin: left center;
}

/*
 * Repli : sur petit écran et en mouvement réduit, on rend le rail à son
 * défilement natif. Le doigt fait déjà très bien ce que le pin ferait.
 */
.rail--natif {
    block-size: auto;
    padding-block: var(--section-y);
}

.rail--natif .rail__entete {
    padding-block-start: 0;
}

.rail--natif .rail__cadre {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-block: 1rem;
}

.rail--natif .rail__piste {
    transform: none !important;
    will-change: auto;
}

.rail--natif .rail-scene__carte {
    scroll-snap-align: center;
    opacity: 1 !important;
    transform: none !important;
    max-block-size: none;
}

.rail--natif .rail__jauge {
    display: none;
}