/**
 * Styles – Module Classement Finale Régionale
 *
 * Les classes de base du classement (.classement_container, .classement_single,
 * .first-three, .controls, etc.) sont déjà définies dans bda-epreuves-public.css
 * et s'appliquent automatiquement. Ce fichier n'ajoute que les nouveaux composants.
 */

/* ─── Filtre par région ───────────────────────────────────────────────────── */

.region-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    margin: 0 0 24px;
    border-top: 1px solid #ece9e9;
    border-bottom: 1px solid #ece9e9;
}

.region-filter-label {
    font-weight: 700;
    color: #560002;
    font-size: 13px;
    white-space: nowrap;
    margin-right: 6px;
}

.region-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.region-filter-btn {
    display: inline-block;
    padding: 4px 13px;
    border-radius: 50px;
    border: 1.5px solid #ee7654;
    color: #ee7654;
    background: transparent;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.region-filter-btn:hover {
    background: rgba(238, 118, 84, 0.1);
    text-decoration: none;
    color: #ee7654;
}

.region-filter-btn.active {
    background: #ee7654;
    border-color: #ee7654;
    color: #fff;
}

@media screen and (max-width: 900px) {
    .region-filter {
        padding: 12px 16px;
    }
}

/* ─── État de chargement AJAX ────────────────────────────────────────────── */

.classement-results {
    transition: opacity 0.2s ease;
}

.classement-results.classement-loading {
    opacity: 0.35;
    pointer-events: none;
}

/* ─── Badge région dans le label ─────────────────────────────────────────── */

.residence-region {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 10px;
    background: #560002;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
    white-space: nowrap;
}

/* ─── Message "aucun résultat" ────────────────────────────────────────────── */

.classement-no-data {
    padding: 20px;
    text-align: center;
    color: #888;
    font-style: italic;
    font-size: 15px;
}