/**
 * Composant PARTAGÉ de filtres — LA FEUILLE DE STYLE COMPLÈTE depuis la
 * sous-étape 10c, et non plus la seule règle d'état actif du bouton.
 *
 * ⚠️ TROIS écrans la partagent désormais, tous sous le même vocabulaire
 * `.citivo-filters-*` : la carte publique des signalements, celle des
 * découvertes, et le tableau de bord mairie (sous-étape 10d). ⚠️ Ce fichier
 * ne connaissait au départ QU'UNE règle, parce que le reste était dupliqué
 * dans trois feuilles — c'est cette duplication que le chantier a supprimée.
 *
 * ⚠️ Le tableau de bord mairie portait un vocabulaire distinct
 * (`.citivo-ms-filters-*`), présenté comme une duplication assumée. Il a
 * disparu en 10d, sa seule différence RÉELLE — le panneau dans le flux plutôt
 * que flottant — étant conservée sous la variante `.citivo-filters--bloc`.
 *
 * ── Ce qui suit est le diagnostic d'origine de la règle d'état actif ────────
 *
 * ⚠️ CORRECTIF (cette étape) — bug diagnostiqué : bouton « Filtrer » actif
 * illisible, fond bleu + texte vert. Présent IDENTIQUEMENT sur les deux
 * pages, même cause, même correctif.
 *
 * CAUSE EXACTE : la règle d'état actif, dupliquée à l'identique dans
 * citivo-carte-publique.css ET citivo-mairie.css, ne fixait QUE
 * `border-color`/`color` (vert, #28a745/#1e7e34) — jamais `background`, en
 * partant de l'hypothèse que le fond blanc de la règle de base
 * (`.citivo-*-filters-toggle { background: #ffffff; }`) suffirait à
 * s'appliquer aussi à l'état actif. Ce n'est pas le cas : un `<button>`
 * conserve le focus du navigateur après un clic (tant qu'il n'est pas
 * déplacé ailleurs), et une règle de thème/navigateur ciblant cet état
 * (type `button` + pseudo-classe `:focus`) a une spécificité RÉELLE
 * supérieure à un simple sélecteur de classe — elle l'emporte donc sur le
 * fond blanc de notre règle de base, tandis que notre `color` vert (classe +
 * attribut, plus spécifique que `button:focus`) continue lui de s'appliquer
 * par-dessus. Résultat : fond bleu HÉRITÉ (thème/navigateur) + texte vert
 * FORCÉ (nous) = contraste illisible.
 *
 * CORRECTION : la règle ci-dessous fixe désormais `background` ET `color`
 * ENSEMBLE, dans la MÊME règle — plus aucune propriété laissée à la charge
 * d'un fond hérité imprévisible. Bleu réutilisé depuis la palette déjà
 * établie du projet (#2980b9 — même teinte que .citivo-pin-badge--en-cours/
 * .citivo-ms-badge--en-cours/.citivo-ms-filter-status-dot--en-cours, jamais
 * une nouvelle couleur inventée pour l'occasion), texte blanc pour un
 * contraste large (WCAG AA très largement dépassé sur ce bleu). L'icône SVG
 * du bouton (`stroke="currentColor"`, voir
 * Citivo_Carte_Publique::filter_icon()/Citivo_Mairie::filter_icon()) hérite
 * automatiquement de `color` : aucune règle SVG séparée nécessaire, le blanc
 * s'applique aussi à l'icône par la cascade normale de `currentColor`.
 *
 * ⚠️ Spécificité CLASSE + ATTRIBUT (`.citivo-filters-toggle[aria-expanded="true"]`)
 * déjà suffisante pour battre `button:focus` du thème SANS !important — voir
 * le garde-fou du projet sur !important (exception Leaflet mise à part,
 * sans rapport ici).
 *
 * ⚠️ État INACTIF non touché — INCHANGÉ dans citivo-carte-publique.css /
 * citivo-mairie.css (fond blanc, texte gris foncé #333333, déjà lisible,
 * vérifié). Cette règle ne s'applique QUE sur [aria-expanded="true"].
 *
 * Chargé en DÉPENDANCE par les deux handles CSS existants
 * ('citivo-carte-publique' et 'citivo-mairie') — voir
 * Citivo_Carte_Publique::render()/Citivo_Mairie::enqueue_assets().
 *
 * @package Citivo
 */

.citivo-filters-toggle[aria-expanded="true"] {
	background:   #2980b9;
	border-color: #2980b9;
	color:        #ffffff;
}

/* ══════════════════════════════════════════════════════════════════════════
   SOUS-ÉTAPE 10c — TOUT LE STYLE DU COMPOSANT DE FILTRES VIT DÉSORMAIS ICI.

   ⚠️ Ce bloc vient de citivo-carte-publique.css, où il était nommé
   `.citivo-carte-filters-*`. Deux raisons de le déplacer, pas une :

   1. LE NOM MENTAIT. Ce composant n'appartient pas à la carte — le tableau de
      bord mairie en affiche une copie depuis toujours. Un nom qui désigne un
      seul de ses trois usages est ce qui fait qu'on le recopie au lieu de le
      réutiliser.

   2. ⚠️⚠️ SANS CE DÉPLACEMENT, LA 10d EST IMPOSSIBLE. Le tableau de bord
      mairie ne charge PAS citivo-carte-publique.css — il ne charge que cette
      feuille-ci. Tant que le style du composant vivait là-bas, y faire passer
      la mairie l'aurait laissée sans aucune mise en forme.

   ⚠️ Ce qui est RESTÉ dans citivo-carte-publique.css, et à raison :
   `.citivo-carte-filters-empty` (le message « aucun résultat », qui appartient
   à la carte et pas au panneau) et `.citivo-carte-filters-slot` (la rangée
   d'en-tête de la 9a). Leur nom parle bien de la carte, lui.

   ⚠️ Les IDENTIFIANTS ne sont pas renommés (`citivo-carte-filters-toggle`,
   `citivo-carte-dec-filters-toggle`) : eux désignent QUEL bloc de filtres, et
   l'appartenance à la carte y est légitime. Seules les classes changent.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Filtres Objet/Dégradation ─────────────────────────────────────────
   La carte reste l'élément principal : la barre d'outils (bouton
   « Filtrer » + « Effacer ») occupe une hauteur fixe et minime en
   flux normal, le panneau lui-même est en position absolute — il survole
   le haut de la carte quand ouvert, sans jamais redimensionner le
   conteneur Leaflet (qui garde sa hauteur 70vh/60vh telle quelle). ────── */

.citivo-filters {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.citivo-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid #cccccc;
	border-radius: 20px;
	background: #ffffff;
	color: #333333;
	font-size: var( --citivo-fs-texte );
	font-weight: 600;
	cursor: pointer;
}

/* ⚠️ CORRECTIF « contraste bouton Filtrer actif » : la règle d'état actif
   vivait ICI (border-color/color vert, JAMAIS de background — bug), elle
   est désormais dans citivo-filters-shared.css (chargée en dépendance,
   voir Citivo_Carte_Publique::render()) — RÈGLE UNIQUE partagée avec
   .citivo-ms-filters-toggle (Citivo_Mairie), voir son docblock pour le
   diagnostic complet (fond bleu hérité du thème/navigateur au focus +
   texte vert forcé = contraste illisible). */

.citivo-filters-icon {
	flex-shrink: 0;
}

.citivo-filters-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: #28a745;
	color: #ffffff;
	font-size: var( --citivo-fs-pastille );
	font-weight: 700;
	line-height: 1;
}

.citivo-filters-badge[hidden] {
	display: none;
}

.citivo-filters-reset {
	min-height: 40px;
	padding: 8px 6px;
	border: none;
	background: transparent;
	color: #555555;
	font-size: var( --citivo-fs-secondaire );
	text-decoration: underline;
	cursor: pointer;
}

.citivo-filters-reset[hidden] {
	display: none;
}

/* Panneau : survole la carte, jamais un redimensionnement du conteneur. */
.citivo-filters-panel {
	position: absolute;
	top: calc( 100% + 6px );
	left: 0;

	/* ⚠️⚠️ CORRECTIF 0.85.1 — LARGEUR PRISE SUR LE CONTENU, plus sur l'ancre.
	   C'était `left: 0; right: 0`, donc exactement la largeur de
	   `.citivo-filters`. Tant que ce bloc occupait toute la colonne de la
	   carte, le panneau était large. Depuis la 9a il vit dans une rangée flex et
	   se réduit à la largeur de son bouton — le panneau se retrouvait donc plus
	   étroit que les pastilles qu'il contient. **Régression de la 9a**, pas un
	   défaut préexistant.

	   ⚠️ Et c'est ce qui expliquait le symptôme le plus déroutant : cliquer un
	   filtre fait apparaître le compteur et le bouton « Réinitialiser », l'ancre
	   s'élargit, et le panneau s'élargissait avec elle. Il ne se « corrigeait »
	   pas, il suivait simplement une ancre devenue plus large.

	   ⚠️ `max-content` + plafond : le panneau prend la largeur de ses pastilles,
	   sans jamais déborder de l'écran sur mobile.

	   ⚠️⚠️ 0.85.3 — L'ANCRE A CHANGÉ : sur la carte publique, `left: 0` se lit
	   désormais sur la rangée d'en-tête entière (voir citivo-carte-decouverte.css)
	   et non plus sur le bouton, qui avait glissé à droite en 9a et faisait sortir
	   le panneau de l'écran. Le plafond suit : `100%` est la largeur réelle de
	   cette ancre, donc de la colonne de contenu — plus juste que `100vw - 32px`,
	   qui ignorait les marges propres de la page.
	   ⚠️ SOUS-ÉTAPE 10d : ce panneau sert désormais AUSSI au tableau de bord
	   mairie, qui avait son propre jeu de classes. ⚠️ Mais lui n'est pas ancré :
	   la variante `.citivo-filters--bloc` le remet dans le flux, où `top` et
	   `left` ne s'appliquent plus. Tout ce qui précède ne concerne donc que les
	   deux cartes. */
	right: auto;
	width: max-content;
	max-width: min( 420px, 100% );

	z-index: 500;
	max-height: 60vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 14px;
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.18 );
}

.citivo-filters-panel[hidden] {
	display: none;
}

.citivo-filters-group + .citivo-filters-group {
	margin-top: 14px;
}

.citivo-filters-group-title {
	margin: 0 0 8px;
	font-size: var( --citivo-fs-pastille );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #777777;
}

.citivo-filters-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Pastilles/chips togglables — avis assumé (voir le rapport de livraison) :
   plus compactes que des cases à cocher pour 9+12 termes sur mobile. */
.citivo-filters-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 12px;
	border: 1.5px solid #dddddd;
	border-radius: 18px;
	background: #ffffff;
	color: #333333;
	font-size: var( --citivo-fs-secondaire );
	cursor: pointer;
}

/* ⚠️ Chantier graphisme (icônes filtres/pins) : l'ancienne pastille de
   couleur (::before, cercle plein via --chip-color) est RETIRÉE — remplacée
   par l'icône SVG de l'objet elle-même, déjà colorée (voir
   Citivo_Carte_Publique::render_filter_group(), Citivo_Objet_Icons::svg()).
   Chips Dégradation : pas de .citivo-filters-chip-icon dans leur
   balisage (show_icons=false côté PHP), donc rien à masquer ici — le
   comportement « pas d'icône » vient du HTML absent, pas d'une règle CSS. */
.citivo-filters-chip-icon {
	display:      inline-flex;
	flex-shrink:  0;
	margin-right: 6px;
}

.citivo-filters-chip-icon svg {
	display: block;
}

/* ⚠️⚠️ CORRECTIF 0.85.2 — L'ÉTAT ACTIF SE LIT SUR `aria-pressed`, PLUS SUR UNE
   CLASSE. Les pastilles de filtres des DÉCOUVERTES n'avaient aucun style actif :
   la règle visait `.is-active`, or seul le JS des signalements posait cette
   classe — celui des découvertes ne pose que `aria-pressed`. Même état, deux
   façons de l'écrire, et un seul des deux modes stylé.

   ⚠️ On garde `aria-pressed` et on abandonne la classe, pas l'inverse : cet
   attribut est OBLIGATOIRE pour l'accessibilité (il annonce l'état aux lecteurs
   d'écran) et les deux modes le posaient déjà. La classe, elle, ne servait qu'au
   style et n'existait que d'un côté — c'était la duplication, pas la source de
   vérité.

   ⚠️ Le `classList` devenu inutile est retiré de citivo-carte-publique.js dans
   le même correctif : laisser deux expressions d'un même état, c'est garantir
   qu'elles divergeront — c'est très exactement ce qui vient de se produire.

   ⚠️⚠️ LE VERT EST VOULU ET N'EST PAS UNE EXCEPTION À LA COULEUR UNIQUE BLEU
   #2c7bb6 — arbitrage d'Olivier du 08/08/2026, à ne pas réinterpréter. La règle
   de la 7b dit que vert et rouge subsistent LÀ OÙ ILS PORTENT UN SENS, jamais
   comme identité. Un filtre actif est un ÉTAT SIGNALÉ, comme le vote posé ou
   l'astérisque obligatoire : le vert y dit « ce filtre est actif », il n'habille
   rien. C'est donc une APPLICATION de la règle, pas une entorse.
   ⚠️ NE PAS REPEINDRE CES PASTILLES EN BLEU au prochain passage sur ce fichier. */
.citivo-filters-chip[aria-pressed="true"] {
	border-color: #28a745;
	background: #f0fff4;
	color: #1e7e34;
	font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════════
   VARIANTE « BLOC » — SOUS-ÉTAPE 10d, étape 1.

   Le panneau reste DANS LE FLUX et pousse le contenu vers le bas, au lieu de
   flotter au-dessus. C'est la présentation du tableau de bord mairie.

   ⚠️⚠️ CE N'EST PAS UNE DIVERGENCE À RÉSORBER, c'est une adaptation LÉGITIME
   au contexte — la distinction posée par l'audit de la phase 7, et elle vaut
   ici. Sur une carte, un panneau qui pousse le contenu ferait sauter la carte
   sous le doigt : il doit donc flotter, et rester étroit. Sur un tableau de
   bord, il y a la place, et la mairie a TROIS axes et vingt-huit pastilles —
   les tasser dans un panneau flottant de 420 px donnerait une colonne étroite
   et très haute, moins lisible qu'aujourd'hui. Décision d'Olivier, sur
   captures d'écran à l'appui.

   ⚠️ Les valeurs reprennent EXACTEMENT celles de `.citivo-ms-filters-panel`
   (marge de 4px, ombre plus douce, marge basse de 12px sur l'enveloppe) : le
   but de la 10d est que l'écran de la mairie ne bouge pas, pas qu'il
   s'améliore au passage.

   ⚠️ Ombre volontairement plus légère que celle du panneau flottant : une
   ombre marquée sert à décoller un élément de ce qu'il recouvre. Un bloc dans
   le flux ne recouvre rien — la même ombre y paraîtrait lourde.
   ══════════════════════════════════════════════════════════════════════════ */

.citivo-filters--bloc {
	margin-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   0.99.237 — VARIANTE « LIEN » : « FILTRER » SANS BORDURE NI FOND.

   Demande d'Olivier (0.99.236 pour la carte publique, étendue en 0.99.237 aux
   deux écrans de gestion, par homogénéité) : gris foncé au repos, BLEU au
   survol et quand le panneau est ouvert. Posée par l'hôte via l'option
   `modifier` de `Citivo_Filters::render()` — une seule écriture pour tous les
   écrans qui la demandent (elle vivait d'abord, en 0.99.236, dans la feuille
   de la carte seule).

   ⚠️ Spécificité (0,2,0) comme l'état ouvert partagé plus haut
   (`[aria-expanded="true"]`, qui pose un aplat bleu) : c'est l'ORDRE qui
   tranche, et ce bloc vient après. Ne pas le remonter dans la feuille.
   ⚠️ `background` et `color` re-déclarés sur CHAQUE état : le thème colore
   les boutons au survol et au focus (leçon de R5a).
   ══════════════════════════════════════════════════════════════════════════ */

.citivo-filters--lien .citivo-filters-toggle {
	padding: 8px 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #333333;
	box-shadow: none;
}

.citivo-filters--lien .citivo-filters-toggle:hover,
.citivo-filters--lien .citivo-filters-toggle:focus,
.citivo-filters--lien .citivo-filters-toggle[aria-expanded="true"] {
	border: 0;
	background: transparent;
	color: #315ba3;
}

.citivo-filters--lien .citivo-filters-toggle:focus-visible {
	outline: 2px solid #315ba3;
	outline-offset: 2px;
}

.citivo-filters--bloc .citivo-filters-panel {
	/* ⚠️ `static` annule l'ancrage : sans lui, `top` et `left` continueraient
	   de s'appliquer et le panneau resterait flottant. */
	position: static;
	width: 100%;
	max-width: none;
	z-index: auto;

	margin-top: 4px;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.12 );

	/* ⚠️ Le panneau a 14px de rembourrage : sans cette ligne, sa largeur de
	   100% s'y ajouterait et il dépasserait de son conteneur. Le panneau
	   flottant n'en a pas besoin, sa largeur étant calculée sur son contenu. */
	box-sizing: border-box;
}