/* filter-bar.css — STRUCTURE COMMUNE des barres de filtres (agenda + annuaire).
 *
 * DEUX paliers, même squelette des deux côtés. Seuls les TYPES de filtres
 * diffèrent (agenda : ville + artistes · annuaire : ville + types).
 *
 *   DESKTOP (≥ 1221px) — la barre reste en place, sur UNE ligne :
 *     [Pays ▾] [groupe défilant] [recherche] [Réinitialiser] [Soumettre]
 *
 *   MOYEN + MOBILE (≤ 1220px) — la barre QUITTE le haut de l'écran :
 *     · deux pastilles flottantes : « Filtres » en bas à GAUCHE,
 *       soumission (+) en bas à DROITE ;
 *     · au clic, la barre monte du bas en panneau :
 *         ligne 0 : Filtres · Réinitialiser · Voir les résultats
 *         ligne 1 : [Pays ▾] [Ville ▾] [Artistes ▾ | Types ▾]
 *         ligne 2 : recherche pleine largeur
 *       tout le reste est masqué (puces, régions, dates, groupes défilants).
 *
 * Les couleurs viennent des tokens de CHAQUE page (les deux jeux ne sont pas
 * identiques : d'où les replis en cascade dans var()).
 */

/* ——— Éléments propres à cette structure, masqués par défaut ——— */
.fbar-sel{display:none;}
/* ⚠️ L'en-tête du panneau est mobile-only. Cette règle vivait dans le CSS de
   l'agenda seul → elle s'affichait en clair sur le desktop de l'annuaire. */
#filterbar .mob-filter-head{display:none;}
.fbar-break{display:none;}
.fbar-fab,.fbar-filters-fab{display:none;}
.fbar-scrim{display:none;}

/* ═══════════ DESKTOP : tout sur une ligne ═══════════ */
@media(min-width:1221px){
 /* Offset UNIQUE, mesuré sur la nav réelle par filter-bar.js (--fbar-top).
    !important : chaque page déclarait son propre top en dur (62/68px) → filet
    de contenu visible dans l'interstice ou chevauchement selon le palier. */
 #filterbar{position:sticky!important;top:var(--fbar-top,63px)!important;}
 #filterbar{flex-wrap:nowrap!important;}
 /* ⚠️ nowrap sur la barre ne suffit PAS : un groupe de puces en flex-wrap:wrap
    se comprime et wrappe EN INTERNE (10 puces de Type = 834px : il faudrait
    1326px pour une vraie ligne unique). Le groupe devient donc défilant
    horizontalement — même solution que .filter-scroll côté agenda. */
 #filterbar .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
 #filterbar .chips::-webkit-scrollbar{display:none;}
 #filterbar .chips .chip{flex-shrink:0;white-space:nowrap;}
 /* Le groupe défilant DOIT pouvoir se réduire, sinon son contenu déborde
    par-dessus la recherche (chevauchement constaté sur l'agenda). */
 #filterbar .filter-scroll-wrap{min-width:0;flex:1 1 auto;overflow:hidden;}
 #filterbar .filter-scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
 #filterbar .filter-scroll::-webkit-scrollbar{display:none;}
 /* ⚠️ PAS de flex-shrink:0 sur TOUS les enfants : les deux champs date héritent
    d'un width:100% des styles de formulaire de la page — empêchés de se réduire,
    ils occupaient toute la barre et poussaient le reste hors du wrapper clippé
    (« champ date géant »). On fixe donc leur largeur, et on ne bloque la
    réduction que sur ce qui doit rester lisible : les puces et les libellés. */
 #filterbar .filter-scroll .chip,
 #filterbar .filter-scroll .chip-artist,
 #filterbar .filter-scroll .chip-group-label,
 #filterbar .filter-scroll .chip-group-sep{flex-shrink:0;}
 #filterbar .filter-date-input{flex:0 0 auto;width:8.6rem;min-width:0;box-sizing:border-box;}
 /* La recherche cède la place avant les boutons d'action. */
 #filterbar .search-wrap{flex-shrink:1;min-width:0;}
 #filterbar .chip-reset,
 #filterbar .submit-top,
 #filterbar .submit-bar-btn{flex-shrink:0;}
 /* Respiration : les selects ajoutés et les boutons de fin de barre se
    retrouvaient collés à leur voisin — le `gap` de la barre ne suffit pas quand
    un libellé de groupe suit immédiatement un select, ni entre les deux boutons
    d'action. */
 #filterbar .pays-select,
 #filterbar .fbar-sel{margin-right:.6rem;}
 #filterbar .chip-reset,
 #filterbar #filterResetBtn{margin-left:.35rem;margin-right:.65rem;}
}

/* ═══════════ MOYEN + MOBILE : panneau escamotable ═══════════ */
@media(max-width:1220px){
 /* La barre n'occupe plus le haut de l'écran : elle devient un panneau qui
    monte du bas. ⚠️ !important nécessaire : les deux pages déclarent
    position:sticky;top:… dans leur propre CSS. */
 #filterbar{
  position:fixed!important;left:0;right:0;bottom:0;top:auto!important;
  z-index:301;   /* > #privacyBanner (200) : cf. filter-bar.js */
  display:flex!important;flex-wrap:wrap!important;align-items:center;
  row-gap:.5rem;column-gap:.5rem;
  margin:0!important;
  padding:.85rem .9rem calc(.9rem + env(safe-area-inset-bottom) + var(--fbar-lift,0px))!important;
  max-height:82vh;overflow-y:auto;
  border-radius:18px 18px 0 0;
  border:none!important;border-top:1px solid var(--border,rgba(0,0,0,.12))!important;
  box-shadow:0 -10px 34px rgba(42,26,10,.22);
  transform:translateY(105%);
  visibility:hidden;
 }
 #filterbar.mob-open{transform:none;visibility:visible;}
 @media(prefers-reduced-motion:no-preference){
  #filterbar{transition:transform .24s cubic-bezier(.22,.61,.36,1),visibility .24s;}
 }

 /* — Ligne 0 : en-tête du panneau — */
 #filterbar .mob-filter-head{
  display:flex!important;order:0;flex:0 0 100%;width:100%;
  align-items:center;justify-content:space-between;gap:.5rem;
  padding-bottom:.2rem;
 }

 /* — Ligne 1 : les trois menus déroulants, sur UNE ligne — */
 #filterbar .pays-select{order:1;}
 #filterbar #villeSelect{order:2;}
 #filterbar #typeSelect{order:3;}
 /* Filtrer par artiste n'a pas de sens dans un panneau mobile (liste longue,
    libellé tronqué) : sous 1220px on ne garde que Pays, Ville et la recherche
    (la recherche couvre déjà le nom d'artiste). */
 #filterbar #artisteSelect{display:none!important;}
 #filterbar .pays-select,
 #filterbar .fbar-sel{
  display:inline-block;
  flex:1 1 0;min-width:0;max-width:none;width:auto;
  text-overflow:ellipsis;
 }

 /* — Rupture de ligne — */
 #filterbar .fbar-break2{display:block;order:4;flex:0 0 100%;height:0;margin:0;}

 /* — Ligne 2 : recherche pleine largeur —
    Spécificité : #filterbar .mob-filter-row (0,1,1,0) écrase #mobSearchRow seul
    (0,1,0,0) → il faut le même niveau de spécificité. */
 #filterbar #mobSearchRow{display:flex!important;order:5;flex:0 0 100%;width:100%;}
 #filterbar #mobSearchRow .search-wrap{width:100%;max-width:100%;flex:1 1 100%;}
 /* ⚠️ Cibler l'INPUT du conteneur, pas la classe : l'input mobile de
    annuaire.html n'a pas .search-input (il restait à 160px). */
 #filterbar #mobSearchRow input{
  width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0;
  padding:.5rem .85rem;
  border:1px solid var(--border2,rgba(0,0,0,.2));
  border-radius:10px;
  background:var(--cream,var(--bg2,var(--surface,#fff)));
  color:var(--text,#2A1A0A);
 }
 #filterbar #mobSearchRow input::placeholder{color:var(--muted,#8A7A6A);opacity:1;}
 #filterbar #mobSearchRow input:focus{outline:none;border-color:var(--violet,#7C3AED);}
 #filterbar .search-input{width:100%;box-sizing:border-box;}

 /* — Tout le reste est masqué : le panneau ne montre QUE les 3 menus + la
      recherche (consigne : « les autres filtres sont masqués »). — */
 #filterbar .fbar-break:not(.fbar-break2),
 #filterbar .chips,
 #filterbar .filter-scroll-wrap,
 #filterbar #dateSelect,
 #filterbar #mobTypeRow,
 #filterbar #mobLocRow,
 #filterbar #mobArtistRow,
 #filterbar #mobCityRow,
 #filterbar > .search-wrap,
 #filterbar .filter-label,
 #filterbar .chip-group-label,
 #filterbar .nav-credit,
 #filterbar .chip-reset,
 #filterbar .submit-top,
 #filterbar .submit-bar-btn,
 #filterbar .filter-toggle-btn,
 #mobFilterFab,#mobFab{display:none!important;}

 /* — Les deux pastilles flottantes — */
 .fbar-fab{display:flex;}
 .fbar-filters-fab{display:inline-flex;}
 /* Quand le panneau est ouvert, les pastilles s'effacent (le panneau a ses
    propres actions : Réinitialiser / Voir les résultats). */
 body.filters-open .fbar-fab,
 body.filters-open .fbar-filters-fab{opacity:0;pointer-events:none;}
 body.filters-open .fbar-scrim{display:block;}
}

/* ——— Typo UNIFORME de tous les contrôles de la barre ———
 * Les deux pages avaient des tailles différentes (agenda plus gros) et, au sein
 * d'une même barre, selects et champs ne s'alignaient pas. Une seule règle fait
 * foi pour les deux pages et tous les contrôles.
 */
#filterbar .pays-select,
#filterbar .fbar-sel,
#filterbar .search-input,
#filterbar #mobSearchRow input{
 font-family:inherit;font-size:.74rem;font-weight:600;line-height:1.2;
}
#filterbar .chip-group-label{font-size:.6rem;}

/* ——— Menus déroulants (Ville / Types / Artistes) : même dessin que le pays ——— */
.fbar-sel{
 appearance:none;
 background-color:var(--card-bg,var(--surface,#fff));
 border:1px solid var(--border2,rgba(0,0,0,.2));
 color:var(--text2,#5C4033);
 border-radius:100px;
 padding:.3rem 1.6rem .3rem .7rem;
 font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;
 background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                  linear-gradient(135deg,currentColor 50%,transparent 50%);
 background-position:calc(100% - 14px) calc(50% - 1px),calc(100% - 9px) calc(50% - 1px);
 background-size:5px 5px,5px 5px;
 background-repeat:no-repeat;
}
.fbar-sel:hover{border-color:var(--violet,#7C3AED);color:var(--violet,#7C3AED);}
.fbar-sel.on{
 background-color:var(--violet,#7C3AED);
 border-color:var(--violet,#7C3AED);
 color:#fff;
}

/* ——— Pastilles flottantes ——— */
.fbar-fab,.fbar-filters-fab{
 position:fixed;bottom:1.1rem;
 bottom:calc(1.1rem + env(safe-area-inset-bottom) + var(--fbar-lift,0px));
 z-index:290;   /* > #privacyBanner (200) */
 align-items:center;justify-content:center;
 border:none;cursor:pointer;font-family:inherit;
 box-shadow:0 6px 22px rgba(42,26,10,.3);
 padding:0;
}
@media(prefers-reduced-motion:no-preference){
 .fbar-fab,.fbar-filters-fab{transition:transform .15s ease,box-shadow .2s ease,opacity .18s ease;}
}
.fbar-fab:active,.fbar-filters-fab:active{transform:scale(.94);}

/* Soumission : cercle, bas à droite */
.fbar-fab{
 right:1.1rem;width:56px;height:56px;border-radius:50%;
 background:linear-gradient(135deg,var(--violet,#7C3AED),var(--rose,#EC4899));
 color:#fff;font-size:1.5rem;line-height:1;
}
.fbar-fab span{display:block;margin-top:-2px;}

/* Filtres : pilule, bas à gauche */
.fbar-filters-fab{
 left:1.1rem;height:44px;border-radius:100px;
 gap:.4rem;padding:0 1rem 0 .85rem;
 background:var(--card-bg,var(--surface,#fff));
 color:var(--text,#2A1A0A);
 border:1.5px solid var(--border,rgba(0,0,0,.14))!important;
 font-size:.82rem;font-weight:700;
}
.fbar-filters-fab svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}
.fbar-filters-fab .fff-badge{
 display:none;min-width:18px;height:18px;border-radius:100px;
 background:var(--violet,#7C3AED);color:#fff;
 font-size:.66rem;font-weight:800;line-height:18px;text-align:center;padding:0 4px;
}
.fbar-filters-fab .fff-badge.on{display:inline-block;}

/* Voile derrière le panneau */
.fbar-scrim{
 position:fixed;inset:0;z-index:300;
 background:rgba(20,10,4,.42);
 border:none;padding:0;
}

@media(max-width:640px){
 #filterbar .pays-select,
 #filterbar .fbar-sel{font-size:.68rem;padding:.28rem 1.3rem .28rem .55rem;background-position:calc(100% - 12px) calc(50% - 1px),calc(100% - 7px) calc(50% - 1px);}
}

/* ——— En-tête du panneau (ligne 0), dessin commun aux deux pages ——— */
#filterbar .mfh-title{font-weight:800;font-size:.95rem;color:var(--text,#2A1A0A);}
#filterbar .mfh-actions{display:flex;align-items:center;gap:.45rem;}
#filterbar .mfh-reset{
 background:none;border:1px solid var(--border,rgba(0,0,0,.15));
 border-radius:100px;padding:.28rem .6rem;
 font-family:inherit;font-size:.7rem;font-weight:600;
 color:var(--muted,#8A7A6A);cursor:pointer;
}
#filterbar .mfh-apply{
 background:linear-gradient(135deg,var(--violet,#7C3AED),var(--rose,#EC4899));
 color:#fff;border:none;border-radius:100px;
 padding:.35rem .85rem;font-family:inherit;font-size:.74rem;font-weight:700;cursor:pointer;
}

/* ——— Champ Ville avec autocomplétion (datalist) ———
 * Beaucoup de villes (149 sur l'annuaire) : un menu déroulant natif devient
 * illisible. Un champ + <datalist> donne la suggestion au fil de la frappe, et
 * le placeholder dit à quoi sert le contrôle quand il est vide (« Ville »),
 * ce qu'un « Toutes les villes » replié ne faisait pas.
 */
input.fbar-sel{
 background-image:none;
 padding:.3rem .7rem;
 cursor:text;
 min-width:0;
}
input.fbar-sel::placeholder{color:var(--muted,#8A7A6A);font-weight:600;opacity:1;}
input.fbar-sel.on{color:#fff;}
input.fbar-sel.on::placeholder{color:rgba(255,255,255,.75);}
@media(max-width:1220px){
 /* Le champ Ville prend un peu plus de place que les deux menus : c'est celui
    dans lequel on écrit. */
 #filterbar input.fbar-sel{flex:1.3 1 0;}
}

/* ═══════════ HOMOGÉNÉITÉ FINE DES DEUX BARRES ═══════════
 * Les deux pages n'ont ni les mêmes tokens ni les mêmes styles de formulaire :
 * en héritant (`font-family:inherit`, hauteurs implicites), le panneau sortait
 * différent de chaque côté — typo, corps, hauteur de champ, dégradé du bouton.
 * Ici tout est POSÉ explicitement, une seule fois, pour les deux pages.
 */
@media(max-width:1220px){
 /* — Typo : le sans du site pour les contrôles, le serif pour le seul titre — */
 #filterbar .mfh-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:.92rem;font-weight:700;letter-spacing:-.01em;
 }
 /* Typo resserrée : à .78rem les libellés des menus étaient tronqués
    (« Pays · tous » coupé, « Artiste · to… ») → l'ensemble faisait brouillon. */
 #filterbar .pays-select,
 #filterbar .fbar-sel,
 #filterbar #mobSearchRow input,
 #filterbar .mfh-reset,
 #filterbar .mfh-apply{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.7rem!important;font-weight:600!important;letter-spacing:0;
 }
 /* ⚠️ AGENDA vs ANNUAIRE : agenda.html pose `.search-wrap svg{position:absolute;
    left:.8rem}` + `.search-input{padding-left:2.25rem}`. Dans le panneau mobile on
    remet l'input à padding 0 → la loupe absolue se superposait au texte du
    placeholder (« ⊕itre, artiste… »). Ici la loupe redevient un enfant flex
    NORMAL, comme sur l'annuaire : rendu identique des deux côtés. */
 #filterbar #mobSearchRow .search-wrap svg{
  position:static!important;left:auto!important;top:auto!important;transform:none!important;
 }
 /* Tailles verrouillées : les deux pages déclarent leurs propres font-size sur
    .pays-select / .search-input → sans !important l'agenda repassait plus gros. */
 #filterbar #mobSearchRow input,
 #filterbar #mobSearchRow .search-input{font-size:.7rem!important;}
 /* Les menus ne débordent plus : ellipse propre au lieu d'un texte coupé. */
 #filterbar .pays-select,
 #filterbar .fbar-sel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 /* Même largeur pour chaque menu, comme sur l'annuaire (sinon « Pays · tous »
    prend toute la place et « Ville » se retrouve minuscule). */
 #filterbar .pays-select,
 #filterbar .fbar-sel{flex:1 1 0!important;min-width:0!important;max-width:none!important;}
 /* — Hauteurs : une seule pour la ligne de filtres, une pour la recherche — */
 #filterbar .pays-select,
 #filterbar .fbar-sel{height:32px;padding:0 1.4rem 0 .65rem;line-height:32px;}
 #filterbar input.fbar-sel{padding:0 .7rem;}
 /* La recherche : l'agenda l'enveloppe dans .search-wrap (avec une loupe),
    l'annuaire non — donc deux rendus. Le CADRE est porté par le wrap quand il
    existe, par l'input sinon, avec la MÊME hauteur et la même typo. */
 #filterbar #mobSearchRow .search-wrap{
  width:auto!important;max-width:100%!important;flex:1 1 auto!important;min-width:0!important;
  height:38px;box-sizing:border-box;display:flex;align-items:center;gap:.45rem;
  padding:0 .85rem;
  border:1px solid var(--border2,rgba(0,0,0,.2));border-radius:10px;
  background:var(--cream,var(--bg2,var(--surface,#fff)));
 }
 #filterbar #mobSearchRow .search-wrap svg{flex-shrink:0;opacity:.5;}
 /* ⚠️ width:auto, JAMAIS 100% : agenda.html pose `#mobSearchRow .search-input
    {width:100%}`. La loupe étant devenue un enfant flex normal, 100% de la
    largeur du cadre + la loupe + le gap = plus large que le panneau → débord
    hors de la fenêtre, donc zoom au tap sur iOS. `flex:1 1 auto;min-width:0`
    laisse l'input occuper exactement la place restante (rendu de l'annuaire). */
 #filterbar #mobSearchRow .search-wrap input{
  height:100%;border:none!important;background:none!important;padding:0;border-radius:0;
  width:auto!important;max-width:100%;flex:1 1 auto;min-width:0;
 }
 /* Filet de sécurité : rien dans le panneau ne peut dépasser la fenêtre. */
 /* La ligne de recherche ne peut ni déborder ni défiler : agenda.html met
    `overflow-x:auto` sur .mob-filter-row (utile pour les puces, néfaste ici) et
    `flex-shrink:0` sur .search-wrap → le champ sortait de la fenêtre. */
 #filterbar #mobSearchRow{
  overflow-x:hidden!important;flex-wrap:nowrap!important;
  padding-left:0!important;padding-right:0!important;column-gap:0!important;
 }
 #filterbar,#filterbar #mobSearchRow{max-width:100vw;overflow-x:hidden;}
 #filterbar #mobSearchRow > input{height:38px;padding:0 .85rem;}
 #filterbar #mobSearchRow input{font-weight:500;}
 #filterbar #mobSearchRow .search-wrap:focus-within{border-color:var(--violet,#7C3AED);}
 #filterbar .mfh-reset,
 #filterbar .mfh-apply{height:30px;padding:0 .8rem;display:inline-flex;align-items:center;}
 #filterbar .mfh-apply{font-weight:700;}

 /* — Le bouton Réinitialiser ne s'affiche QUE si un filtre est actif — */
 #filterbar .mfh-reset{display:none;}
 #filterbar.has-filters .mfh-reset{display:inline-flex;}
}
/* — Dégradé identique des deux côtés : les tokens --rose des deux pages ne sont
     pas la même couleur (l'un tire vers le magenta). On le fixe ici. — */
#filterbar .mfh-apply,.fbar-fab{background:linear-gradient(135deg,#7C3AED,#EC4899);}