/* Les filtres — bascules et curseurs.
 *
 * Partagés par les palmarès et par Adopte : deux panneaux qui font la même
 * chose doivent se ressembler pour de bon, donc ils lisent la même feuille.
 * Le style ne dépend que des jetons du système, présents des deux côtés.
 */

/* — la paire qui commande le panneau : « Filtrer » et la carte —
   Les deux tiennent la largeur de ce qu'ils commandent : le bouton de filtre
   s'étire, celui de la carte garde son disque au bout de la rangée. Le bleu
   est celui des liens du système — c'est le geste principal, il n'a pas à se
   déguiser en contour discret.

   Cette paire a d'abord vécu dans les palmarès, dans leur propre feuille. Elle
   sert maintenant aussi à Adopte, qui ne charge pas la même : elle descend donc
   ici, où les deux la lisent. */
.fac-commandes {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: var(--space-2); margin: var(--space-4) 0;
}
.fac-ouvrir {
  flex: 1 1 auto; min-height: 46px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--color-accent);
  border: 2.5px solid var(--color-accent); border-radius: 999px; padding: 9px 22px;
}
/* Le dessin précède son libellé, et les deux se centrent ensemble : c'était
   un caractère de police — un losange creux — posé sur la ligne de base, qui
   pendait sous les capitales et changeait de forme d'un appareil à l'autre. */
.fac-ouvrir { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.fac-ouvrir .glyphe { display: flex; }
.fac-ouvrir .glyphe svg { width: 16px; height: 16px; display: block; }
/* Réservé à ce qui survole vraiment : au doigt, « :hover » se pose au toucher
   et NE PART PLUS avant qu'on touche ailleurs — le bouton restait au bleu
   foncé après qu'on ait refermé le panneau, comme s'il gardait un état qu'il
   n'avait plus. */
@media (hover: hover) {
  .fac-ouvrir:hover {
    background: var(--color-accent-600); border-color: var(--color-accent-600); color: #fff;
  }
}
/* « actif » ne dit pas que le panneau est ouvert, mais qu'un filtre est POSÉ —
   ce qu'on regarde n'est plus le tout. Il s'assombrit plutôt que de s'inverser :
   c'est l'état qui change, pas la nature du bouton. */
.fac-ouvrir.actif {
  background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff;
}
/* Le bouton de carte rangé dans cette paire reprend sa taille pleine, pour
   faire hauteur égale avec le filtre. */
.fac-commandes .carte-appel.en-ligne { width: 46px; height: 46px; }

/* — le panneau lui-même —
   Il était décrit deux fois, dans deux feuilles, et les deux descriptions
   avaient divergé : même contenu, 336 pixels d'un côté, 282 de l'autre. Un
   seul exemplaire, donc, et les deux panneaux se ressemblent pour de bon.
   Ne reste chez chacun que ce qui lui appartient vraiment : la marge qui le
   sépare de ce qui suit, et son état replié. */
.fac-panneau {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-100);
  border: 2.5px solid var(--color-text); border-radius: var(--radius-md);
  text-align: left;
}
/* Posés sur le papier du panneau, les champs remontent au blanc : sur la même
   teinte que leur cadre, ils s'y seraient fondus. */
.fac-panneau input[type=search] {
  width: 100%; box-sizing: border-box;
  background: #fff; color: var(--color-text);
  border: var(--rule-light); border-radius: var(--radius-sm);
  padding: 10px 13px; font-family: var(--font-body); font-size: 15px;
}
.fac-panneau .curseur-piste::before { background: var(--color-neutral-300); }

.fac-groupe { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.fac-texte { display: block; }
.fac-titre {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sourdine); white-space: nowrap;
}

/* — les bascules : le segmenté du système, en version à choix multiple. La
     case native reste dans le formulaire, hors de vue ; c'est l'étiquette qui
     se dessine.

     UNE COCHÉE EST NETTE, UNE AUTRE EST PÂLE. L'aplat d'encre des débuts
     disait bien « cochée », mais il fallait le savoir : entre une étiquette
     noire et une blanche, rien ne dit laquelle est allumée — les deux crient
     aussi fort. « Avec œuvre d'art » en noir pouvait tout aussi bien se lire
     « les ronds-points sans œuvre ».
     Le fond ne change donc plus : c'est la présence qui change. Une bascule
     éteinte s'efface à demi, une allumée est pleine et franche. On lit d'un
     coup d'œil ce qui filtre, sans avoir appris de code. — */
.bascule { display: inline-flex; cursor: pointer; }
.bascule input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.bascule span {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  border: 2.5px solid var(--color-text); background: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text);
  line-height: 1; user-select: none;
  opacity: .5; transition: opacity .12s ease;
}
/* Survolée, elle se rapproche sans atteindre l'allumée : la souris annonce le
   geste, elle ne le fait pas.
   Réservé à ce qui survole vraiment : au doigt, « :hover » se pose au toucher
   et ne part plus avant qu'on touche ailleurs — une bascule éteinte serait
   restée à mi-chemin, l'air à moitié allumée. */
@media (hover: hover) {
  .bascule:hover span { opacity: .75; }
}
.bascule input:checked + span { opacity: 1; }
.bascule input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — les curseurs. Deux poignées quand l'attribut a deux bornes, une seule
     quand le filtre n'en lit qu'une. La lecture chiffrée est à droite du nom :
     un curseur sans son nombre ne dit rien de précis. — */
/* Trois colonnes plutôt que deux dès que la place le permet : à 240 px de
   large minimum, cinq curseurs faisaient trois rangées et le panneau enflait.
   À 200, ils en font deux — un curseur n'a besoin que de son nom, de sa valeur
   et d'une piste, et les noms les plus longs tiennent encore. */
.fac-curseurs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3) var(--space-6); margin: var(--space-1) 0;
}
.curseur { display: flex; flex-direction: column; gap: var(--space-1); }
.curseur-tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.curseur-val {
  font-size: 13px; font-weight: 700; color: var(--color-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.curseur-piste {
  position: relative; height: 22px; display: flex; align-items: center;
}
/* la piste elle-même, et la portion retenue par-dessus */
.curseur-piste::before {
  content: ""; position: absolute; left: 0; right: 0; height: 4px;
  background: var(--color-neutral-300); border-radius: 999px;
}
.curseur-plage {
  position: absolute; height: 4px; background: var(--color-accent); border-radius: 999px;
}
/* Les deux champs se superposent sur la même piste : seule la poignée reçoit
   le pointeur, sinon celui du dessus volerait tous les clics de l'autre. */
.curseur-piste input[type=range] {
  position: absolute; left: 0; width: 100%; margin: 0; height: 22px;
  background: none; appearance: none; -webkit-appearance: none; pointer-events: none;
}
.curseur-piste input[type=range]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%; cursor: grab;
  background: var(--color-surface); border: 2.5px solid var(--color-text);
  box-shadow: var(--shadow-sm);
}
.curseur-piste input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%; cursor: grab;
  background: var(--color-surface); border: 2.5px solid var(--color-text);
  box-shadow: var(--shadow-sm);
}
.curseur-piste input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; border-color: var(--color-accent); }
.curseur-piste input[type=range]:active::-moz-range-thumb { cursor: grabbing; border-color: var(--color-accent); }
.curseur-piste input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.curseur-piste input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.curseur-piste input[type=range]::-moz-range-track { background: none; }

.fac-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
#fac-vider, #cr-vider {
  background: none; border: none; padding: var(--space-1) 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) {
  #fac-vider:hover, #cr-vider:hover { color: var(--color-accent-600); }
}

#fac-vider:focus-visible, #cr-vider:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Les lieux retenus, en étiquettes : on en empile autant qu'on veut, et le
   défilé montre les carrefours de l'un OU de l'autre. */
.ou-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ou-tags[hidden] { display: none; }
/* Un lieu retenu est un filtre allumé : il porte donc la même livrée qu'une
   bascule cochée — fond blanc, encre pleine. Il était à l'encre sur fond
   d'encre, ce qui le faisait lire comme un contraire plutôt que comme un
   choix retenu. La croix dit qu'on peut le retirer ; le fond n'a pas à le
   redire. */
.ou-tags button {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: .04em; line-height: 1;
  color: var(--color-text); background: #fff;
  border: 1.5px solid var(--color-text); border-radius: 999px; padding: 7px 12px;
}
.ou-tags button::after { content: "✕"; font-size: 11px; opacity: .7; }
.ou-tags button:focus-visible::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .ou-tags button:hover::after { opacity: 1; }
}


/* Les lieux proposés pendant la frappe. Dans le flux et non en absolu : le
   panneau des critères n'a pas de hauteur fixe où ancrer un calque. */
.ou-suggestions { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.ou-suggestions[hidden] { display: none; }
.ou-suggestions button {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  font-family: var(--font-body); font-size: 14px; cursor: pointer;
  color: var(--color-text); background: var(--color-surface);
  border: 1.5px solid var(--color-divider); border-radius: 999px;
  padding: 7px 14px; line-height: 1.3;
}
/* Ce qui est visé — à la souris, au clavier, ou d'emblée à l'ouverture — porte
   la même marque : le contour à l'encre. « vise » est posée par
   « liste-clavier.js ». */
.ou-suggestions button:focus-visible, .ou-suggestions button.vise {
  border-color: var(--color-text); outline: none;
}
@media (hover: hover) and (pointer: fine) {
  .ou-suggestions button:hover {
    border-color: var(--color-text); outline: none;
  }
}

.ou-suggestions .quoi {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sourdine); flex: 0 0 auto;
}
.ou-suggestions .combien { margin-left: auto; color: var(--sourdine); font-size: 12.5px; flex: 0 0 auto; }