/* ============================================================
 * Widget de filtre multi-sélection partagé (menu déroulant à
 * cases à cocher + comptes à facettes).
 *
 * SOURCE UNIQUE : utilisé par la page Archives (funambules-archives)
 * ET par la grille-horaire (funambules-grille-v2). Ce plugin est
 * autonome — ne PAS redupliquer ces règles ailleurs. Scopé par les
 * classes `.arch-filter*` (préfixe choisi pour éviter tout conflit
 * avec Font Awesome ou les query vars WP, voir project_funambules memory).
 * ============================================================ */

.arch-filter {
    position: relative;
}

/* Sélecteur composé (.funambules-archives / .grid-filters) : le thème parent
   (michelle/assets/css/global.css) applique un style par défaut à TOUT
   <button> du site (fond via variable, bordures gauche/droite de 2em) ;
   il faut au moins 2 classes de spécificité pour le battre de façon fiable
   (pas de !important ici : la spécificité seule suffit, et .arch-filter.is-active
   .arch-filter__toggle plus bas a besoin de rester prioritaire pour la bordure). */
.funambules-archives .arch-filter__toggle,
.grid-filters .arch-filter__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 160px;
    height: 2.5rem;
    box-sizing: border-box;
    background-color: #ededf2;
    color: #000;
    font-weight: lighter;
    border: 1px solid transparent;
    padding: 0 0.75rem;
    border-radius: 6px;
    cursor: pointer;
}

/* Formats et Éditions : libellés courts → boutons plus étroits. */
.arch-filter[data-group="format"] .arch-filter__toggle,
.arch-filter[data-group="edition"] .arch-filter__toggle {
    min-width: 110px;
}

.arch-filter.is-active .arch-filter__toggle {
    border-color: var(--site-accent-color, #91B2AC);
    font-weight: normal;
}

.arch-filter__selcount[hidden] {
    display: none;
}

.arch-filter__selcount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3em;
    height: 1.3em;
    padding: 0 0.35em;
    border-radius: 999px;
    background-color: var(--site-accent-color, #91B2AC);
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
}

.arch-filter__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    width: 300px;
    max-width: 90vw;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
}

/* Formats et Éditions : noms courts → panneau plus étroit. */
.arch-filter[data-group="format"] .arch-filter__panel,
.arch-filter[data-group="edition"] .arch-filter__panel {
    width: 200px;
}

.arch-filter__search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    background-color: #ededf2;
    border: none;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font-weight: lighter;
}

.arch-filter__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.arch-filter__item.arch-zero,
.arch-filter__item.arch-searchhide {
    display: none;
}

.arch-filter__item label {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.3rem 0.25rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.92rem;
    line-height: 1.25;
}

.arch-filter__item label:hover {
    background-color: #f3f3f7;
}

.arch-filter__item input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
    align-self: center;
}

.arch-filter__name {
    flex: 1 1 auto;
}

.arch-filter__count {
    flex: 0 0 auto;
    color: #888;
    font-size: 0.82rem;
}

/* ----- Bouton réinitialiser : fond = couleur d'accent du site. -----
   Même remarque que .arch-filter__toggle : sélecteur composé pour battre de
   façon fiable le bouton par défaut du thème (fond jaune + bordures 2em de
   chaque côté), border-width mis explicitement à 0 en plus du short-hand. */
.funambules-archives .arch-filter-reset,
.grid-filters .arch-filter-reset {
    height: 2.5rem;
    padding: 0 0.75rem;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 0.9rem;
    vertical-align: middle;
    line-height: normal;
    background: var(--site-accent-color, #91B2AC) !important;
    color: #fff !important;
    border: none !important;
    border-width: 0 !important;
    font-weight: 600;
    cursor: pointer;
}

.funambules-archives .arch-filter-reset:hover,
.grid-filters .arch-filter-reset:hover {
    filter: brightness(0.92);
    color: #fff !important;
}

/* Entrée « Toutes » (utilisée par le groupe éditions sur Archives). */
.arch-filter__allitem {
    list-style: none;
}
.funambules-archives .arch-filter__all,
.grid-filters .arch-filter__all {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
    border-radius: 6px;
}
.funambules-archives .arch-filter__all:hover,
.funambules-archives .arch-filter__all.is-active,
.grid-filters .arch-filter__all:hover,
.grid-filters .arch-filter__all.is-active {
    background: rgba(0, 0, 0, 0.06);
}
.funambules-archives .arch-filter__all.is-active,
.grid-filters .arch-filter__all.is-active {
    font-weight: 500;
}

/* ============================================================
 * Chrome partagé du reste de la barre de filtres (.grid-filters, rendu par
 * funambules-grille-v2/views/FiltersView.php) : bascule mobile + coins
 * arrondis + badge "Groupe (Valeur)" au-dessus des <select> Type/Genre/Lieu.
 * Consolidé ICI le 2026-07-08 (venait d'être dispersé entre
 * funambules-grille-v2/style.css et le thème michelle-child/css/temp.css)
 * — ce plugin est la source unique pour le style des filtres partagés,
 * qu'ils soient rendus en cases à cocher (.arch-filter* ci-dessus) ou en
 * <select> natif (ci-dessous). CSE ET CAC.
 *
 * Type/Genre/Lieu restent des <select> à choix UNIQUE (pas des
 * .arch-filter) — Nicolas a précisé que seul le LOOK devait s'inspirer du
 * widget cases à cocher, pas le mécanisme : passer en multi-sélection
 * cassait PartnersView (nom/adresse/logo du lieu, qui écoute le 'change'
 * natif du <select> par ID). Le <select> est superposé en transparent sur
 * .fnmb-select-badge (bouton unifié : nom du groupe + pastille), pour que
 * cliquer n'importe où dans le rectangle ouvre le vrai menu déroulant
 * natif. Demande de Nicolas, 2026-07-08.
 * ============================================================ */

/* Recherche par titre : coins arrondis + hauteur alignée sur les boutons
   Genre/Type/Lieu (.fnmb-select-badge, height:2.5rem) — sans hauteur/
   box-sizing explicites, le <input> se dimensionne selon padding/line-height
   du thème et rendait plus haut que les boutons juste à côté dans la même
   rangée. !important : le thème (michelle-child) définit déjà
   .grid-filters input SANS arrondi ; selon l'environnement (staging vs
   prod) le CSS du thème réellement servi diverge (voir mémoire
   project_staging_css_enqueue) — passer par ce plugin évite ce piège,
   chargé de façon fiable partout. */
.grid-filters input[type="text"] {
    border-radius: 6px !important;
    height: 2.5rem !important;
    box-sizing: border-box !important;
    padding: 0 0.75rem !important;
}

/* ── Bascule "Options de recherche" (mobile) ──────────────────────────────
   Sur téléphone, la barre de filtres (.grid-filters) prend beaucoup de
   place : masquée par défaut derrière ce bouton, dépliée au clic. Aucun
   effet sur desktop. CSE grille-horaire ET CAC (les deux passent par
   FiltersView). Demande de Nicolas, 2026-07-08.
   Sélecteur composé (.grid-filters .grid-filters__toggle) : le thème
   (michelle/assets/css/global.css) cible aussi `[type=button]` sur TOUT
   bouton du site — même spécificité (0,1,0) qu'une classe seule, donc à
   égalité c'est l'ordre de chargement qui gagne (le thème, en pratique) —
   fond jaune, angles carrés, ET affiché en permanence (le display:none
   perdait pareillement sur desktop). Même piège déjà documenté pour
   .arch-filter__toggle/.arch-filter-reset plus haut dans ce fichier. */
.grid-filters .grid-filters__toggle {
    display: none;
}
.grid-filters__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
@media (max-width: 768px) {
    .grid-filters .grid-filters__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        box-sizing: border-box;
        background-color: #ededf2;
        border: 1px solid transparent;
        border-radius: 6px;
        padding: 0.6rem 0.9rem;
        font-weight: 500;
        cursor: pointer;
        margin-bottom: 0.5rem;
    }
    .grid-filters .grid-filters__toggle::after {
        content: "\25BE";
        transition: transform 0.2s ease;
    }
    .grid-filters .grid-filters__toggle.is-active::after {
        transform: rotate(180deg);
    }
    .grid-filters__controls {
        display: none;
    }
    .grid-filters__controls.is-open {
        display: flex;
    }
}

/* ── Type/Genre/Lieu : MÊMES valeurs CSS que .arch-filter__toggle/
   .arch-filter__selcount ci-dessus (pas juste "inspiré de" — copié), pour
   un look identique aux boutons Thématique/Cinéaste. Aucune contrainte de
   largeur/troncature (comme .arch-filter__toggle) : le bouton grandit avec
   son contenu, jamais de "..." ni de gras superflu. Le <select> natif est
   superposé en transparent sur TOUT le bloc (position absolute, opacity 0)
   : clic n'importe où dans le rectangle = ouvre le vrai menu déroulant
   natif (choix UNIQUE — pas un widget cases à cocher, pour ne pas casser
   PartnersView qui écoute le 'change' natif du <select> par ID). CSE ET
   CAC. Demande de Nicolas, 2026-07-08 — corrige un 1er essai qui avait mis
   font-weight:500 sur le titre (au lieu de lighter) et un max-width/ellipsis
   sur la pastille (au lieu de laisser grandir comme .arch-filter__selcount). */
.fnmb-select-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 160px;
    height: 2.5rem;
    box-sizing: border-box;
    background-color: #ededf2;
    color: #000;
    font-weight: lighter;
    border: 1px solid transparent;
    padding: 0 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    /* .arch-filter__toggle est un vrai <button> : il hérite sans le
       redéclarer le style de bouton par défaut du thème (michelle/assets/
       css/global.css) — font-size:0.75em, majuscules, interligne, etc.
       .fnmb-select-badge est un <div> (pas un bouton), donc rien de tout
       ça ne s'applique sans le redéclarer explicitement ici. */
    font-size: 0.75em;
    line-height: 1.6666666667;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: var(--letter_spacing);
    text-decoration: none;
}
.fnmb-select-badge__caption {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 1.3em;
    height: 1.3em;
    padding: 0 0.35em;
    border-radius: 999px;
    background-color: var(--site-accent-color, #91B2AC);
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
}
.fnmb-select-badge select {
    /* !important : funambules-grille-cac-v2/style.css a une règle plus
       spécifique (.funambules-cac-fullwidth .grid-filters select) qui fixe
       height/padding — sans ça, le select invisible ne couvrirait pas tout
       le bloc et une partie du clic ne l'ouvrirait pas. */
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0;
    cursor: pointer;
}