/**
 * ==========================================
 * Styles pour les badges GEO
 * ==========================================
 * Shortcode : [etv_geo_badge]
 * Mu-plugin : FasterTools - Helpers GEO Front
 * Version   : 1.3.3
 * Auteur    : FasterTools
 *
 * Changelog 1.3.3 (11/03/2026)
 * - [A11Y] .cs-bg-dark .etv-geo-pill — sections sombres Overflow — SPEC-CSS-05
 *
 * Changelog 1.3.2 (11/03/2026)
 * - [TECH] Version sync avec mu-plugin 35 (était bloquée à 1.2.0) — SPEC-CSS-01
 * - [DOC]  Classes hooks documentées dans header — SPEC-CSS-02
 * - [A11Y] Dark mode via prefers-color-scheme — SPEC-CSS-04
 *
 * Note compatibilité :
 * - gap en flexbox : Safari ≥ 14.1 (avril 2021), Chrome ≥ 84, Firefox ≥ 63
 * - Safari < 14.1 (~2% trafic 2026) : pills collées mais lisibles
 * - Dégradation gracieuse acceptée (KISS principle, standard CSS moderne)
 *
 * Dark mode — deux vecteurs couverts :
 * - @media prefers-color-scheme: dark (préférence OS)
 * - .cs-bg-dark (sections sombres Overflow via csco_light_or_dark())
 *
 * Accessibilité :
 * - Contraste WCAG AAA light : #111827 sur #f3f4f6 = 16.1:1
 * - Contraste WCAG AAA dark  : #f3f4f6 sur #374151 = 8.1:1
 * - Lisible sans interaction clavier (pas de focus nécessaire)
 *
 * Classes hooks (délégué au thème — pas de règles ici) :
 * - .etv-geo-duration : pill durée de visite  ([etv_geo_badge])
 * - .etv-geo-crowd    : pill niveau d'affluence ([etv_geo_badge])
 * - .etv-geo-zone     : pill zone géographique  ([etv_geo_badge])
 * - .etv-geo-summary  : bloc texte résumé       ([etv_geo_summary])
 * Le thème surcharge ces classes via son propre CSS.
 */

.etv-geo-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.etv-geo-pill {
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111827;
}

@media ( prefers-color-scheme: dark ) {
    .etv-geo-pill {
        background: #374151;
        color: #f3f4f6;
    }
}

/* Sections sombres du thème Overflow (.cs-bg-dark via csco_light_or_dark()) */
.cs-bg-dark .etv-geo-pill {
    background: #374151;
    color: #f3f4f6;
}
