/**
 * Guardian Horaires — sélecteur « horaires actuels / hors vacances scolaires »
 *
 * ⚠️ Ne cible QUE les classes du sélecteur. Aucune règle ne touche
 * .guardian-jour, .guardian-heure-*, .guardian-horaire-row ni le conteneur :
 * l'habillage des grilles est tenu ailleurs (CSS Elementor du pied de page,
 * plus le custom_css du widget sur la page Contact). Toucher à ces classes ici
 * restylerait le pied de page de tout le site.
 *
 * @package GuardianHoraires
 * @since 2.3.0
 */

/* ⚠️ INDISPENSABLE. L'attribut [hidden] ne pose qu'un display:none de feuille
   utilisateur (spécificité nulle) : le display:flex posé sur
   .guardian-horaires-grid par le CSS du thème l'écrase, et la grille masquée
   resterait à l'écran. On force donc le masquage ici. */
.guardian-horaires-container [data-jeu][hidden] {
    display: none !important;
}

/* Sans JS, le sélecteur ne fonctionnerait pas : il n'apparaît que si le script
   a pu poser .guardian-js sur le conteneur. */
.guardian-horaires-switch {
    display: none;
}

.guardian-js .guardian-horaires-switch {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 16px;
    padding: 3px;
    border-radius: 8px;
    background: rgba(127, 127, 127, .12);
    flex-wrap: wrap;
}

.guardian-switch-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    padding: 7px 14px;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.guardian-switch-btn:hover {
    background: rgba(127, 127, 127, .16);
}

.guardian-switch-btn.is-active {
    background: #F1A208;
    color: #0F005D;
}

.guardian-switch-btn:focus-visible {
    outline: 2px solid #F1A208;
    outline-offset: 2px;
}

.guardian-horaires-note {
    margin: 10px 0 0;
    font-size: 12px;
    font-style: italic;
    opacity: .75;
}

@media (max-width: 480px) {
    .guardian-switch-btn {
        padding: 7px 10px;
        font-size: 12px;
    }
}