/* shared-ui.css — briques d'interface MUTUALISÉES entre agenda.html et annuaire.html.
 *
 * Chaque page pose son accent : agenda `--df-accent: var(--violet)`,
 * annuaire `--df-accent: var(--or)`. Aucune couleur de page en dur ici.
 *
 * 1. Cartes de filtre rapide sous le hero (.qf-*) — structure commune ; l'agenda
 *    garde ses couleurs par [data-f] dans son <style> local (sélecteurs plus
 *    spécifiques, donc gagnants), l'annuaire suit l'accent.
 * 2. Barre de recherche au-dessus des listes (.df-search) — sortie de la barre de
 *    filtres : loupe à gauche, champ peu arrondi qui s'efface vers la droite.
 */

#quickFilters{background:var(--bg2,var(--cream2));border-bottom:1px solid var(--border);padding:1.25rem 2.5rem;position:relative;z-index:1;}
.qf-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;}
.qf-card{background:var(--surface,var(--card-bg));border:1.5px solid var(--border);border-radius:14px;padding:.9rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;cursor:pointer;transition:all .22s;font-family:'DM Sans',sans-serif;box-shadow:var(--shadow);}
.qf-card:hover{border-color:var(--df-accent);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.qf-card.active{border-color:var(--df-accent);background:color-mix(in oklab,var(--df-accent) 7%,transparent);}
.qf-icon{font-size:1.5rem;line-height:1;color:var(--df-accent);}
.qf-icon svg{width:28px;height:28px;stroke:currentColor;}
.qf-icon-img{display:block;width:30px;height:30px;background:no-repeat center/contain;}
.qf-label{font-size:.78rem;font-weight:600;color:var(--text);letter-spacing:.02em;}
.qf-count{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--text2,var(--muted));font-weight:400;background:none;border:0;border-radius:0;padding:0;margin-top:.15rem;}

.qf-card.active .qf-count{background:none;color:var(--text);font-weight:600;}
@media(max-width:600px){#quickFilters{padding:.9rem 1rem;}.qf-grid{grid-template-columns:repeat(2,1fr);gap:.6rem;}.qf-icon{font-size:1.2rem;}.qf-icon-img{width:24px;height:24px;}.qf-label{font-size:.72rem;}}

.df-search{position:relative;width:100%;max-width:520px;margin:0 0 1.1rem;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%);}
.df-search svg{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--df-accent);fill:none;stroke-width:2.4;stroke-linecap:round;opacity:.85;pointer-events:none;}
.df-search input{width:100%;box-sizing:border-box;border:0;border-bottom:0;border-radius:6px;background:var(--surface,var(--card-bg));box-shadow:inset 0 0 0 1px var(--border);padding:.6rem 1.5rem .6rem 2.2rem;font-family:'DM Sans',sans-serif;font-size:.88rem;color:var(--text);outline:none;transition:border-color .2s;}
.df-search input::placeholder{color:var(--muted);}
.df-search input:focus{box-shadow:inset 0 0 0 1px var(--border2);}
@media(max-width:900px){.df-search{max-width:none;}.df-search input{font-size:16px;}}

/* Bandeau de filtres réduit : pays · recherche · soumission. Les autres contrôles
   sont MASQUÉS (pas supprimés) pour ne casser aucun handler existant. */
#filterbar > *{display:none!important;}
#filterbar > #paysSelect,#filterbar > .df-search,#filterbar > #agendaSubmitBtn,#filterbar > .submit-top{display:block!important;}
#filterbar{gap:.75rem;justify-content:flex-start;background:var(--surface,var(--card-bg))!important;padding:.85rem 2.5rem!important;min-height:0!important;}
#filterbar > .df-search{margin:0;flex:1 1 44vw;min-width:44vw;max-width:none;}
#filterbar > .df-search input{position:relative;z-index:1;}
/* La loupe doit rester AU-DESSUS de l'input : celui-ci est en z-index:1 avec un
   fond opaque, il masquait le svg (agenda + annuaire). */
#filterbar > .df-search svg{z-index:2;}
#filterbar{max-width:none;width:100%;box-sizing:border-box;}
@media(max-width:900px){#filterbar{padding:.7rem 1rem!important;}}
#filterbar > .df-search{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 70%,transparent 100%);}
#filterbar > .df-search input{background:var(--bg2,var(--cream2));}
#filterbar > #agendaSubmitBtn,#filterbar > .submit-top{margin-left:auto;}
#filterbar > .mob-filter-head,#filterbar > .mob-filter-row,#filterbar > #mobSearchRow,#filterbar > #mobTypeRow,#filterbar > #mobLocRow,#filterbar > #mobCityRow,#filterbar > #mobArtistRow,#filterbar > .fbar-break{display:none!important;}
/* les filtres avancés ayant disparu, les déclencheurs de panneau n'ont plus d'objet */
#filterToggleBtn,#mobFilterFab,.fbar-filters-fab,.fbar-scrim,.fbar-fab{display:none!important;}
#filterbar{flex-wrap:wrap;row-gap:.6rem;}
@media(max-width:900px){#filterbar{padding:.6rem 1rem;}#filterbar > #paysSelect{flex:0 0 auto;}#filterbar > .df-search{flex:1 1 160px;max-width:none;}#filterbar > #agendaSubmitBtn,#filterbar > .submit-top{margin-left:0;flex:1 1 100%;}}
/* sélecteur de pays remonté dans la barre de navigation, à gauche de la loupe */
.pays-nav{appearance:none;-webkit-appearance:none;box-sizing:border-box;height:34px;line-height:1;background:transparent;border:1px solid var(--border2);border-radius:6px;padding:0 1.5rem 0 .6rem;font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.04em;color:var(--df-accent);cursor:pointer;max-width:150px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 12px) 52%,calc(100% - 8px) 52%;background-size:4px 4px,4px 4px;background-repeat:no-repeat;}
.pays-nav:hover{border-color:var(--df-accent);}
#filterbar > #paysSelect{display:none!important;}

/* Le bandeau ne contient plus que recherche + soumission : il reste dans le flux à
   TOUTES les largeurs. Sans ça, la règle locale @media(max-width:1220px) le transforme
   en tiroir fixe hors écran, dont les déclencheurs (FAB/bouton Filtres) sont masqués. */
@media(max-width:1220px){#filterbar{position:static!important;transform:none!important;bottom:auto!important;left:auto!important;right:auto!important;max-height:none!important;overflow:visible!important;border-radius:0!important;box-shadow:none!important;z-index:auto!important;visibility:visible!important;pointer-events:auto!important;}#filterbar > .df-search,#filterbar > .df-search input,#filterbar > .submit-top,#filterbar > #agendaSubmitBtn{visibility:visible!important;pointer-events:auto!important;}}
@media(max-width:1220px){#filterbar{padding:.75rem 2.5rem!important;}}
@media(max-width:900px){#filterbar{padding:.7rem 1rem!important;}#filterbar > .submit-top,#filterbar > #agendaSubmitBtn{margin-left:0;}}
/* Parité stricte agenda / annuaire : mêmes métriques de hero et de cartes,
   seules les couleurs (--df-accent, --df-bullet) distinguent les deux pages. */
body:has(#quickFilters) .hero-h1{font-size:clamp(2.1rem,4.4vw,2.55rem)!important;line-height:1.05!important;}
body:has(#quickFilters) .hero-h1 em{line-height:inherit!important;padding-bottom:0!important;}
.qf-icon{display:flex!important;align-items:center;justify-content:center;height:32px;font-size:1.5rem;line-height:1;}
.qf-icon svg,.qf-icon-img{width:30px!important;height:30px!important;}
@media(max-width:600px){.qf-icon{height:26px;font-size:1.2rem;}.qf-icon svg,.qf-icon-img{width:24px!important;height:24px!important;}}
/* Mobile : sélecteur de pays discret, bouton de soumission plus épais que le filet
   d'origine (sans égaler la barre de recherche), FAB rond au défilement. */
@media(max-width:900px){.pays-nav{max-width:72px;font-size:.55rem;letter-spacing:.02em;padding:0 .85rem 0 .35rem;height:28px;background-position:calc(100% - 8px) 52%,calc(100% - 5px) 52%;}}
@media(max-width:900px){#filterbar > .submit-top,#filterbar > #agendaSubmitBtn,#filterbar > .submit-bar-btn{min-height:34px;padding-block:.5rem;display:inline-flex!important;align-items:center;justify-content:center;}}
.df-fab{position:fixed;right:1rem;bottom:1rem;z-index:295;width:52px;height:52px;border:0;border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;background:var(--df-accent);color:#fff;font-size:1.7rem;line-height:1;font-family:'DM Sans',sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.22);opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;}
.df-fab.show{opacity:1;transform:scale(1);}
@media(max-width:900px){.df-fab{display:flex;}}
/* Spécificité : le <style> de page vient APRÈS ce fichier, donc .pays-select
   battait .pays-nav à égalité. On qualifie le sélecteur et on force les métriques. */
.nav-right select.pays-nav{font-size:.7rem!important;height:34px!important;padding:0 1.4rem 0 .55rem!important;border-radius:6px!important;max-width:120px!important;text-transform:none!important;letter-spacing:.02em!important;font-weight:600!important;}
@media(max-width:900px){.nav-right select.pays-nav{font-size:.55rem!important;height:26px!important;padding:0 .8rem 0 .3rem!important;max-width:66px!important;}}
@media(max-width:900px){.nav-right select.pays-nav{max-width:46px!important;padding:0 .7rem 0 .3rem!important;font-size:.6rem!important;letter-spacing:.06em;}}
/* Mobile : pays / loupe / thème alignés en hauteur (28px) et resserrés. */
@media(max-width:900px){
 .nav-right{gap:.3rem!important;}
 .nav-right select.pays-nav,.nav-right .nav-search-btn,.nav-right .theme-toggle{height:28px!important;min-height:28px!important;box-sizing:border-box;}
 .nav-right .nav-search-btn,.nav-right .theme-toggle{width:28px!important;min-width:28px!important;padding:0!important;border-radius:6px!important;display:inline-flex!important;align-items:center;justify-content:center;}
 .nav-right .nav-search-btn svg,.nav-right .theme-toggle svg{width:15px!important;height:15px!important;}
}

/* Marque de la barre de nav : MÊMES métriques sur toutes les pages (le titre et le
   sous-titre divergeaient : 1.1 vs 1.05rem, .58 vs .6rem, vert vs doré, interlettrage
   .15 vs .18em). Le <style> de page vient après ce fichier -> !important.
   Le sous-titre est borné à ~20ch : il déborde à peine du titre et passe sur 2 lignes
   serrées au lieu de filer loin vers la droite. */
.nav-logo-name{font-family:'Playfair Display',Georgia,serif!important;font-size:1.05rem!important;font-weight:700!important;line-height:1.1!important;letter-spacing:0!important;}
.nav-logo-sub{font-size:.58rem!important;font-weight:600!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--nav-sub,var(--or))!important;margin-top:.1rem!important;line-height:1.2!important;max-width:none;white-space:nowrap!important;display:block!important;}
@media(max-width:900px){.nav-logo-name{font-size:.95rem!important;line-height:1.05!important;}.nav-logo-sub{font-size:.52rem!important;letter-spacing:.06em!important;max-width:26ch;white-space:normal!important;text-wrap:balance;}}
@media(max-width:600px){.nav-logo-sub{font-size:.5rem!important;letter-spacing:.05em!important;max-width:23ch;}}

/* --- ALIGNEMENT FOOTER : les 4 colonnes doivent donner l'impression d'être
   écrites sur un même trait. On aligne les PREMIÈRES LIGNES DE BASE de la
   grille (align-items:baseline) au lieu du haut des blocs : « Drag France »
   (1.4rem serif) et « Explorer / Contribuer / Le projet » (.6rem mono)
   partagent alors la même ligne, sans toucher aux typographies.
   Vaut AUSSI en 2 colonnes (mobile) : la grille aligne les lignes de base
   ligne par ligne, donc « Drag France »/« Explorer » puis « Contribuer »/« Le
   projet » restent chacun sur un même trait. */
.footer-inner{align-items:baseline!important;}

/* --- TUILES ARTISTES : DEUX TYPES (préparation, aucun changement visuel) ---------
   Chaque .artist-card de l'annuaire reçoit en plus, à la génération (renderCard),
   UNE de ces deux classes selon son contenu réel :
     .artiste-full   -> la fiche a une description (bio non vide)
     .artiste-simple -> pas de description
   Les blocs ci-dessous sont volontairement VIDES : ils existent pour accueillir les
   divergences de design à venir sans avoir à retoucher le JS. Ne rien mettre ici qui
   modifie l'aspect actuel tant que les deux directions ne sont pas arbitrées. */
.artist-card.artiste-full{}
.artist-card.artiste-full .card-photo,.artist-card.artiste-full .card-photo-ph{}
.artist-card.artiste-full .card-body{}
.artist-card.artiste-full .card-name{}
.artist-card.artiste-full .card-meta{}
.artist-card.artiste-full .card-bio{}
.artist-card.artiste-full .card-footer{}

/* Doré des bandeaux : à mi-chemin entre le doré standard (--or) et le beige de
   fond le plus foncé (--cream4). Un seul point de réglage pour les deux types. */
.artist-card.artiste-simple,.artist-card.artiste-full{--ac-band:color-mix(in oklab,var(--or) 50%,var(--cream4));}

/* ---- COMMUN AUX DEUX TYPES : mêmes champs, même typo ---- */
.artist-card.artiste-simple .ac-band,.artist-card.artiste-full .ac-band{background:var(--ac-band);display:flex;gap:.6rem;}
.artist-card.artiste-simple .ac-band .card-name,.artist-card.artiste-full .ac-band .card-name{color:#000;margin-bottom:0;}
.artist-card.artiste-simple .ac-pron,.artist-card.artiste-full .ac-pron{font-family:'DM Sans',system-ui,sans-serif;font-size:.62rem;font-style:italic;font-weight:400;color:#000;opacity:.75;}
.artist-card.artiste-simple .ac-type,.artist-card.artiste-full .ac-type{font-size:.75rem;font-style:italic;color:#000;white-space:nowrap;}
.artist-card.artiste-simple .card-body,.artist-card.artiste-full .card-body{padding:.5rem .8rem .7rem;color:#000;font-size:.8rem;line-height:1.45;}
/* ligne house + ville sur le beige du champ de recherche */
.artist-card.artiste-simple .ac-line,.artist-card.artiste-full .ac-line{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;background:var(--bg2,var(--cream2));padding:.25rem .8rem;margin:0 -.8rem;}
/* house entre crochets, en italique ; ville à la typo du titre « Localisation » du
   filtre latéral (.w-title : mono, petites capitales espacées). */
.artist-card.artiste-simple .ac-house,.artist-card.artiste-full .ac-house{font-family:'JetBrains Mono','Courier New',monospace;font-size:.62rem;letter-spacing:.02em;text-transform:none;font-weight:500;font-style:normal;}
.artist-card.artiste-simple .ac-city,.artist-card.artiste-full .ac-city{font-family:'JetBrains Mono','Courier New',monospace;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;font-weight:500;font-style:normal;white-space:nowrap;}
/* pas de clamp CSS (il imposait son ellipse « … ») : hauteur de 3 lignes, la troncature
   littérale « [...] » est posée par acFitBios(). */
.artist-card.artiste-simple .ac-bio,.artist-card.artiste-full .ac-bio{margin-top:.2rem;line-height:1.45;max-height:4.35em;overflow:hidden;}
.artist-card.artiste-simple .ac-block,.artist-card.artiste-full .ac-block{margin-top:.45rem;}
.artist-card.artiste-simple .ac-label,.artist-card.artiste-full .ac-label{font-weight:700;}
.artist-card.artiste-simple .ac-sub-lead,.artist-card.artiste-full .ac-sub-lead{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic;}
.artist-card.artiste-simple .ac-sub,.artist-card.artiste-full .ac-sub{display:flex;align-items:baseline;gap:.3rem;overflow:hidden;}
.artist-card.artiste-simple .ac-dots,.artist-card.artiste-full .ac-dots{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;opacity:.45;}
.artist-card.artiste-simple .ac-dots::before,.artist-card.artiste-full .ac-dots::before{content:"..............................................................................";}
.artist-card.artiste-simple .ac-sub-t,.artist-card.artiste-full .ac-sub-t{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.artist-card.artiste-simple .ac-sub-t a,.artist-card.artiste-full .ac-sub-t a{display:block;overflow:hidden;text-overflow:ellipsis;}
.artist-card.artiste-simple .ac-sub a,.artist-card.artiste-full .ac-sub a{color:#000;text-decoration:underline;text-underline-offset:2px;}
.artist-card.artiste-simple .card-photo,.artist-card.artiste-simple .card-photo-ph,.artist-card.artiste-simple .card-footer,
.artist-card.artiste-full .card-photo,.artist-card.artiste-full .card-photo-ph,.artist-card.artiste-full .card-footer{display:none;}
.artist-card.artiste-simple::before,.artist-card.artiste-full::before{display:none;}

/* ---- SIMPLE : bandeau horizontal, pas de fond, pas de contour ni d'ombre ---- */
.artists-grid .artist-card.artiste-simple,.letter-cols .artist-card.artiste-simple{background:transparent;border:0;box-shadow:none;border-radius:0!important;align-self:start;}
.artist-card.artiste-simple:hover{box-shadow:none;border-color:transparent;}
.artist-card.artiste-simple .ac-band{padding:.45rem .8rem;align-items:baseline;justify-content:space-between;}

/* ---- FULL : même contenu, bandeau VERTICAL à gauche (2/3 de l'épaisseur du bandeau
   simple ≈ 35px -> 23px) et fin filet noir autour de la tuile. ---- */
.artists-grid .artist-card.artiste-full,.letter-cols .artist-card.artiste-full{background:transparent;border:0;box-shadow:none;border-radius:0!important;align-self:start;display:flex;align-items:stretch;}
.artist-card.artiste-full:hover{box-shadow:none;border-color:transparent;}
/* FULL CONTACT (mail et/ou mobilité) : bandeau doré HORIZONTAL en haut + filet noir
   qui encadre la tuile. Le bandeau vertical disparaît (l'en-tête EST le bandeau). */
.artists-grid .artist-card.artiste-full.ac-contact,.letter-cols .artist-card.artiste-full.ac-contact{display:block;border:1px solid #000;}
.artist-card.artiste-full.ac-contact:hover{border-color:#000;}
.artist-card.artiste-full.ac-contact .ac-band{flex:none;width:auto;padding:.45rem .8rem;align-items:baseline;justify-content:space-between;}
.artist-card.artiste-full .ac-band{flex:0 0 23px;width:23px;align-self:stretch;padding:0;}
.artist-card.artiste-full .ac-main{flex:1 1 auto;min-width:0;}
/* en-tête au même gabarit que le bandeau horizontal des fiches simples, mais sans fond */
.artist-card.artiste-full .ac-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;padding:.45rem .8rem 0;}
.artist-card.artiste-full .ac-head .card-name{color:#000;margin-bottom:0;}

/* Puce noire devant le nom des artistes AVEC photo (photos/bullet_noir.svg).
   En background-image : si le fichier manque, rien ne casse. */
.artist-card.ac-haspic .card-name::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.4em;vertical-align:baseline;background:url("photos/bullet_noir.svg") no-repeat center/contain;}

/* ---- MOBILE : 2 colonnes -> typo des tuiles à 75 % (sélecteurs assez spécifiques
   pour battre les règles .artist-card.artiste-* ci-dessus). ---- */
@media(max-width:640px){
.letter-cols .artist-card .card-name{font-size:.82rem;}
.letter-cols .artist-card.artiste-simple .ac-pron,.letter-cols .artist-card.artiste-full .ac-pron{font-size:.47rem;}
.letter-cols .artist-card.artiste-simple .ac-type,.letter-cols .artist-card.artiste-full .ac-type{font-size:.56rem;}
.letter-cols .artist-card.artiste-simple .card-body,.letter-cols .artist-card.artiste-full .card-body{font-size:.6rem;padding:.38rem .5rem .5rem;}
.letter-cols .artist-card.artiste-simple .ac-house,.letter-cols .artist-card.artiste-full .ac-house,
.letter-cols .artist-card.artiste-simple .ac-city,.letter-cols .artist-card.artiste-full .ac-city{font-size:.47rem;}
.letter-cols .artist-card.artiste-simple .ac-line,.letter-cols .artist-card.artiste-full .ac-line{padding:.18rem .5rem;margin:0 -.5rem;}
.letter-cols .artist-card.artiste-simple .ac-band{padding:.34rem .5rem;}
.letter-cols .artist-card.artiste-full.ac-contact .ac-band{padding:.34rem .5rem;}
.letter-cols .artist-card.artiste-full .ac-head{padding:.34rem .5rem 0;}
.letter-cols .artist-card.artiste-full:not(.ac-contact) .ac-band{flex:0 0 16px;width:16px;padding:0;}
}

/* ligne pronoms + type sous le nom : mobile uniquement (desktop = dans le bandeau) */
.artist-card .ac-submeta{display:none;}
@media(max-width:640px){
/* pronoms + type sortent du bandeau doré et passent sous le nom */
.letter-cols .artist-card.artiste-simple .ac-band .ac-pron,.letter-cols .artist-card.artiste-full .ac-band .ac-pron,
.letter-cols .artist-card.artiste-simple .ac-band .ac-type,.letter-cols .artist-card.artiste-full .ac-band .ac-type,
.letter-cols .artist-card.artiste-full .ac-head .ac-pron,.letter-cols .artist-card.artiste-full .ac-head .ac-type{display:none;}
.letter-cols .artist-card .ac-submeta{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap;padding:.22rem .5rem 0;color:#000;}
.letter-cols .artist-card .ac-submeta .ac-pron{font-size:.47rem;opacity:.75;font-style:italic;}
.letter-cols .artist-card .ac-submeta .ac-type{font-size:.56rem;font-style:italic;}
/* libellés de contact abrégés (insta / tiktok / @) + valeur limitée à 50 % de la largeur */
.letter-cols .artist-card .ac-sub-lead[data-short]{font-size:0;}
.letter-cols .artist-card .ac-sub-lead[data-short]::before{content:attr(data-short);font-size:.6rem;font-style:italic;font-weight:400;}
.letter-cols .artist-card.artiste-simple .ac-sub-t,.letter-cols .artist-card.artiste-full .ac-sub-t{max-width:50%;}
}