/*
 * Rail horizontal (mise en scène « rail » des pages de service). L'accueil
 * présente désormais ses offres en anneau (sections/anneau.css).
 *
 * Les cartes défilent dans un cadre à défilement natif : flèches au clic,
 * doigt ou pavé tactile. La section n'est pas épinglée.
 */

.rail {
    padding-block: var(--section-y);
    display: grid;
    gap: clamp(1rem, 3vh, 2rem);
}

.rail__entete {
    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 {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    -webkit-overflow-scrolling: touch;
    padding-block: 1rem;
    /* Les flèches remplacent la barre de défilement. */
    scrollbar-width: none;
}

.rail__cadre::-webkit-scrollbar {
    display: none;
}

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

.rail__piste > * {
    scroll-snap-align: start;
}

.rail__commandes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rail__jauge {
    flex: 1;
    block-size: 2px;
    margin-inline-end: 0.75rem;
    background: var(--trait);
}

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

.rail__fleche {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 3rem;
    block-size: 3rem;
    padding: 0;
    border: 1px solid var(--trait-fort);
    border-radius: 50%;
    background: transparent;
    color: var(--texte);
    cursor: pointer;
    transition: border-color 0.3s var(--ease-sortie), color 0.3s var(--ease-sortie), background-color 0.3s var(--ease-sortie), opacity 0.3s var(--ease-sortie);
}

.rail__fleche:hover:not(:disabled),
.rail__fleche:focus-visible {
    border-color: var(--cyan);
    color: var(--cyan);
    background-color: rgb(46 163 242 / 0.1);
}

.rail__fleche:disabled {
    opacity: 0.3;
    cursor: default;
}

.rail__fleche svg {
    inline-size: 1.2rem;
    block-size: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tout tient dans l'écran : ni flèches ni jauge. */
.rail--immobile .rail__commandes {
    display: none;
}