/*
 * Pastilles de pagination d'une bande défilante.
 *
 * Maquette : 8px de diamètre, inactive primary-300, active primary-main. L'écart vient de la
 * zone cliquable (voir plus bas), pas d'un gap.
 */

.scroll-dots {
    display: flex;
    /* Aucun écart : c'est la zone cliquable de chaque pastille qui donne l'espacement, voir
       plus bas. Un gap ici rouvrirait des trous morts entre les cases. */
    gap: 0;
}

.scroll-dots[hidden] {
    /* display:flex l'emporterait sur la règle [hidden] du navigateur. */
    display: none;
}

/*
 * LA CASE CLIQUABLE EST LE BOUTON, LA PASTILLE N'EST QUE SON DESSIN.
 *
 * Version précédente : un bouton de 8px et une zone de 44px en position absolue par-dessus. Une
 * zone en position absolue n'espace rien, elle RECOUVRE : les zones se chevauchaient sur 33px et
 * la dernière, dessinée au-dessus, avalait les clics de toutes les autres. C'est exactement le
 * défaut constaté — « je clique et ça part sur la dernière ».
 *
 * Le bouton fait donc lui-même 24 x 44 (24 est le minimum de WCAG 2.5.8) et les boutons se
 * touchent sans se superposer : un clic va toujours à la pastille la plus proche. La pastille
 * visible reste un rond de 8px, dessiné en pseudo-élément au centre de la case.
 *
 * Contrepartie assumée : l'écart visuel entre pastilles passe de 3 à 16px. C'est le prix d'une
 * cible atteignable ; la maquette dessinait une grappe injouable à la souris comme au doigt.
 */
.scroll-dots__dot {
    position: relative;
    /* La case, pas le dessin. */
    width: 24px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.scroll-dots__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* Le rond de 8px de la maquette. */
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-300);
    transform: translate(-50%, -50%);
    transition: background-color var(--hover-dur) var(--hover-ease);
}

.scroll-dots__dot.is-active::before {
    background-color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
    /* Le défilement animé est demandé par le script, qui coupe déjà de son côté. */
    .scroll-dots__dot {
        transition: none;
    }
}