/**
 * Module Sélection (« Faites vos 26 ») : uniquement ce que les classes Tailwind ne couvrent pas
 * (états pilotés par aria-pressed, jauges, garde-fou de largeur). Couleurs du thème du site
 * seulement : var(--color-mif-blue) et la gamme de gris Tailwind.
 */

/* ── Pleine largeur ───────────────────────────────────────────────────────── */

/* Les pages gardent la structure du site (.page-principal > section.page-section#mif_limited) :
   la régie reconnaît la pression publicitaire réduite comme sur le GOAT, et la règle
   « .page-section article { max-width: 100% } » protège les cartes d'article en mobile.
   Seule la largeur change : la section prend toute la page, sans colonne de droite.
   overflow-x: clip remplace le hidden de .page-section, qui bloquerait position: sticky (page de résultat). */
.page-section[data-selection-page] {
    overflow-x: clip;
}

@media (min-width: 64rem) {
    .page-section[data-selection-page] {
        width: 100%;
        flex-shrink: 1;
    }
}

/* ── Carte joueur : état sélectionné ──────────────────────────────────────── */

.selection-card {
    -webkit-tap-highlight-color: transparent;
}

.selection-card[aria-pressed="true"] {
    border-color: var(--color-mif-blue);
    box-shadow: inset 0 0 0 1px var(--color-mif-blue);
}

.selection-card[aria-pressed="true"] .selection-card__photo {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-mif-blue);
}

.selection-card--hors {
    opacity: 0.4;
}

@media (hover: hover) {
    .selection-card:hover {
        border-color: var(--color-gray-300);
    }

    .selection-card[aria-pressed="true"]:hover {
        border-color: var(--color-mif-blue);
    }
}

/* Pastille numérotée : l'ordre de sélection. */
.selection-card__rank {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: var(--color-mif-blue);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 22px;
}

.selection-card[aria-pressed="true"] .selection-card__rank {
    display: block;
}

/* ── Bouton suivant désactivé tant que le quota n'est pas atteint ─────────── */

.selection-cta--disabled,
.selection-suivant:disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Jauges du classement ─────────────────────────────────────────────────── */

.selection-jauge {
    width: 0;
    transition: width 0.5s ease;
}