/* Zihma — recherche : commandes de resultats, panneau de filtres, etats.
   Chargee EN PLUS de app.css, dont elle reprend les jetons (--vert, --fond,
   --brun, --e1..--e9, --r-carte, --tactile). Aucune couleur en dur ici. */

/* ------------------------------------------------------------------
   Sans JavaScript, chips, outils et pagination ne peuvent rien faire :
   on ne les montre pas plutot que de laisser des commandes inertes
   (AUDIT F04). La liste complete et la barre de recherche, elles,
   restent servies par le serveur et fonctionnent sans script.
   ------------------------------------------------------------------ */
.resultats[data-js="non"] .chips,
.resultats[data-js="non"] .outils,
.resultats[data-js="non"] .resultats__plus,
.resultats[data-js="non"] .resultats__bilan{display:none}

/* ==================================================================
   Gabarit des pages de resultats (planche WEB, groupe « RECHERCHE ET
   RESULTAT »). Ces regles vivaient dans app.css ; elles rejoignent la
   feuille de la recherche, qui est le seul endroit ou elles servent.
   Valeurs mesurees sur les planches, inchangees.
   ================================================================== */
/* Les resultats sont sur LE MEME AXE que l'en-tete, la recherche et la barre
   des univers : le container partage (`--page-max-width` / `--page-gutter`,
   app.css). Ils portaient 31 px a gauche et rien a droite, et leurs enfants
   corrigeaient ce desequilibre par des `margin-right:31px` un par un. */
.resultats{width:100%;max-width:var(--page-max-width);margin-left:auto;margin-right:auto;
  padding:0 var(--page-gutter)}
.resultats__titre{margin:8px 0 0;font-size:var(--t13);line-height:1.2;font-weight:700;
  letter-spacing:-.01em}
.resultats__soustitre{margin:12px 0 0;font-size:var(--t5);color:var(--gris-fort)}

/* Barre de champs : elle vit dans la coque (ui.coque), sur l'accueil comme
   sur les pages de resultats — app.css la borne et la replie, cette feuille
   dessine les champs. */
/* FORME (consigne client du 20/09) : la barre et ses segments sont des
   CAPSULES. `border-radius:50%` sur un rectangle donne une ellipse — c'est la
   valeur haute du jeton `--search-rayon` qui produit le demi-cercle attendu a
   chaque extremite. La structure de la barre, elle, ne change pas. */
.barre{margin:0;background:var(--surface);border-radius:var(--search-rayon);
  min-height:72px;padding:8px;
  display:flex;align-items:center;gap:6px}
/* Les trois champs de la barre suivent le format commun des champs du site.
   Ils divergeaient entre eux : deux portaient `--plein` (fond gris, coins en
   pilule a 999 px) et le troisieme rien du tout — fond transparent, coins a
   angle droit — dans la MEME barre. Et aucun des trois ne ressemblait au
   champ de recherche de l'accueil, arrondi a --r-champ. */
.barre__champ{flex:1;display:flex;align-items:center;gap:12px;min-height:56px;
  padding:0 24px;min-width:0;
  background:var(--gris-champ);border-radius:var(--search-rayon)}
/* `--plein` ne porte plus de format a elle : tous les champs sont pleins.
   La classe reste dans le HTML, elle ne fabrique plus de difference.
   Les champs se distinguent par leur etiquette et leur espacement, plus par
   un filet vertical entre chacun. */
.barre__icone{width:22px;height:22px;flex:0 0 auto;opacity:.8}
.barre__bloc{min-width:0;flex:1}
.barre__etiquette{display:block;font-size:var(--t1);color:var(--gris-texte);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre__valeur{display:block;font-size:var(--t5);font-weight:500;min-width:0}
/* « Du … au … » (§5.6) : deux dates dans un seul champ de la barre. */
.barre__periode{display:flex;align-items:center;gap:6px;min-width:0}
.barre__periode input{flex:1 1 0;min-width:0;width:auto}
.barre__periode-sep{flex:0 0 auto;color:var(--gris-faible)}
/* Deux dates et une heure dans un champ : il lui faut plus du double d'un
   champ simple, sinon les saisies natives se tronquent (« mm/dd/y »). */
.barre__champ--periode{flex:2.4 1 0}
.barre__champ--moment{flex:1.5 1 0}
/* Les controles natifs se fondent dans le champ : la maquette dessine du texte
   pose sur la pilule, pas une boite dans une boite. Le focus reste visible,
   c'est la regle :focus-visible globale qui le porte. */
.barre__valeur input,.barre__valeur select{border:0;background:none;font:inherit;
  color:inherit;width:100%;min-width:0;padding:0;height:24px}
.barre__loupe{flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:var(--vert);display:grid;place-items:center;margin-left:10px}
.barre__loupe .ic{width:22px;height:22px}

/* variante B (Mobilite) : contour simple, meme capsule */
.barre--contour{background:none;box-shadow:none;border:1px solid var(--bord);
  border-radius:var(--search-rayon);padding:8px 8px 8px 4px}


/* La barre d'outils des resultats est UNE grille ; ses deux groupes
   (`.resultats__outils`, `.resultats__bilan`) ne sont que des enveloppes
   (display:contents), les colonnes decident de la composition :
     bureau     [sous-categories …]        [Filtres] [Carte]
                N offres · filtres actifs         Trier par
     ≤ 1239 px  [sous-categories …]
                N offres   [Filtres] [Carte]     Trier par
     ≤ 767 px   [liste des types]
                [Filtres] [Carte]                Trier par
                N offres
   `dense` : chaque element prend la premiere case libre de sa colonne. */
.resultats__toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-auto-flow:row dense;
  align-items:center;gap:var(--e3) var(--e4);margin:var(--e4) 0 0;padding:var(--e4);
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-carte);box-shadow:var(--ombre-1)}
.resultats__outils,.resultats__bilan{display:contents}
/* Category filters wrap on larger screens so every option remains visible.
   Narrow screens switch to a single touch-friendly rail below. */
.chips{grid-column:1;align-self:start;display:flex;flex-wrap:wrap;gap:8px;margin:0;min-width:0;
  overflow:visible;padding:2px}
.chips::-webkit-scrollbar{display:none}
.chips .chip{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
.outils__droite{grid-column:2;align-self:start;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0}
.compte{grid-column:1;justify-self:start}
.outils__tri{grid-column:2;justify-self:end}
.pastilles[data-pastilles],.resultats__mention{grid-column:1 / -1}
/* Recherche globale : aucune seconde navigation d'univers. La toolbar remonte
   naturellement et garde la composition compteur / actions / tri. */
.resultats__toolbar--sans-categories .compte{grid-column:1;grid-row:1}
.resultats__toolbar--sans-categories .outils__droite{grid-column:2;grid-row:1}
.resultats__toolbar--sans-categories .outils__tri{grid-column:2;grid-row:2}
@media (max-width:1239px){
  .resultats__toolbar{grid-template-columns:minmax(0,1fr) auto auto}
  .chips{grid-column:1 / -1;grid-row:1}
  /* sous-categories, puis compteur · Filtres · Carte · tri */
  .compte{grid-column:1}
  .outils__droite{grid-column:2;align-self:center}
  .outils__tri{grid-column:3}
  .resultats__toolbar--sans-categories .compte{grid-column:1;grid-row:1}
  .resultats__toolbar--sans-categories .outils__droite{grid-column:2;grid-row:1}
  .resultats__toolbar--sans-categories .outils__tri{grid-column:3;grid-row:1}
}
@media (max-width:767px){
  .resultats__toolbar{grid-template-columns:minmax(0,1fr) auto}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
    margin-inline:calc(var(--e4) * -1);padding:2px var(--e4);scroll-padding-left:var(--e4)}
  .chips-compactes{grid-column:1 / -1;grid-row:1}
  .outils__droite{grid-column:1;justify-self:start}
  .outils__tri{grid-column:2}
  .compte{grid-column:1 / -1}
  .resultats__toolbar--sans-categories .outils__droite{grid-column:1;grid-row:1}
  .resultats__toolbar--sans-categories .outils__tri{grid-column:2;grid-row:1}
  .resultats__toolbar--sans-categories .compte{grid-column:1 / -1;grid-row:2}
}
/* A 320 px, Filtres, Carte et le tri ne tiennent pas sur 288 px : le tri
   prend sa rangee. */
@media (max-width:480px){
  .resultats__toolbar{padding:var(--e3);gap:var(--e3)}
  .chips{margin-inline:calc(var(--e3) * -1);padding-inline:var(--e3);scroll-padding-left:var(--e3)}
  /* Filtres · Carte sur leur rangee ; le compteur et le tri partagent la
     suivante, face a face. */
  .outils__droite{grid-column:1 / -1;grid-row:3}
  .compte{grid-column:1;grid-row:4;align-self:center}
  .outils__tri{grid-column:2;grid-row:4;justify-self:end}
  .resultats__toolbar--sans-categories .outils__droite{grid-column:1 / -1;grid-row:1}
  .resultats__toolbar--sans-categories .compte{grid-column:1;grid-row:2}
  .resultats__toolbar--sans-categories .outils__tri{grid-column:2;grid-row:2}
}
/* Pied du panneau : le bouton d'application annonce le nombre de resultats
   (RF-050). A zero il reste ACTIF mais passe en style secondaire — on doit
   pouvoir constater le resultat vide, pas buter sur une commande morte. */
.filtres__actions[data-vide="oui"] .filtres__action--valider{
  background:var(--gris-champ);color:var(--gris-fort);border:1px solid var(--bord)}

/* RF-052 : fermer avec un brouillon non applique le signale ICI, en pied de
   panneau — pas dans une modale par-dessus la modale. */
.filtres__brouillon{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e3);
  margin:var(--e3) 0 0;padding:var(--e3) var(--e4);border-radius:var(--r-champ);
  background:var(--menthe);color:var(--vert-encre);font-size:var(--t4)}
/* Geometrie : la regle de format (taille compacte). Le rayon a 14 px faisait
   de ces deux mini-actions les seuls boutons a angles doux de la page. */
.filtres__mini{--b-haut:var(--b-haut-petit);--b-marge:var(--b-marge-petit);
  --b-texte:var(--b-texte-petit);color:var(--vert);background:var(--surface)}
.filtres__mini:hover{background:var(--gris-champ)}

/* §8.3 : les reprises de l'etat vide. Chacune ne retire qu'UN critere et
   annonce ce qu'elle ramene ; elles sont ordonnees par ce gain. */
.etat__reprises{list-style:none;margin:var(--e3) 0 var(--e4);padding:0;
  display:flex;flex-wrap:wrap;gap:var(--e2);justify-content:center}
.etat__reprise{--b-haut:var(--b-haut-petit);--b-marge:var(--b-marge-petit);
  --b-texte:var(--b-texte-petit);border:1.5px solid var(--vert);
  background:var(--surface);color:var(--vert)}
.etat__reprise:hover{background:var(--menthe)}
/* Le selecteur double : la regle pleine de `.etat__action`, ecrite plus bas,
   repeignait la variante pale en vert — deux boutons pleins cote a cote. */
.etat__action.etat__action--pale{background:none;color:var(--vert);font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
.etat__action.etat__action--pale:hover{color:var(--vert-sombre);background:none}

/* RF-030 : le message d'incoherence est ancre au champ fautif, jamais une
   alerte modale qui masque ce qu'on essaie de corriger. */
.barre__erreur{display:block;margin-top:4px;font-size:var(--t1);
  color:var(--erreur);max-width:24ch}
.barre__champ:has([aria-invalid="true"]){box-shadow:inset 0 0 0 1px var(--erreur)}

/* RF-113 : le resume compact de la recherche est celui de la coque (app.css,
   `.resume`) : il vit dans l'en-tete, sur l'accueil comme ici. */

/* Quatre commandes, quatre visages (consigne du 16/09, revue du 20/09) :
   - SOUS-CATEGORIES : puces a filet fin sur fond clair ; la courante est
     TEINTEE vert clair (fond menthe, texte vert profond, filet menthe) ;
   - FILTRES RAPIDES : pilules blanches a filet, cochees en menthe avec une
     coche — c'est un critere que l'on pose ou retire ;
   - FILTRES et CARTE : boutons a contour vert epais, avec icone — des
     commandes qui ouvrent quelque chose ;
   - TRIER PAR : un choix en texte, sans cadre — il n'ouvre ni ne filtre.

   SOUS-CATEGORIE ACTIVE, la regle : fond vert TRES CLAIR, texte vert fonce,
   filet vert leger. Jamais vert fonce + texte blanc, qui etait le traitement
   des categories principales : les deux navigations se ressemblaient alors
   que l'une choisit un univers et l'autre un type a l'interieur. Desormais
     categorie principale active -> soulignement vert (app.css) ;
     sous-categorie active       -> puce teintee vert clair (ici).
   Les jetons `--souscat-*` d'app.css portent cette distinction. */
.chip{border:1px solid var(--souscat-bord);background:var(--souscat-fond)}
.chips--type .chip{background:var(--souscat-fond);border-color:var(--souscat-bord);color:var(--encre)}
.chips--type .chip:hover{background:var(--souscat-survol);border-color:var(--souscat-sel-bord)}
/* La graisse vient de la regle de format (--b-graisse) : ce qui distingue la
   puce courante est sa TEINTE, pas une typographie de plus. */
.chip[aria-pressed="true"]{background:var(--souscat-sel-fond);border-color:var(--souscat-sel-bord);
  color:var(--souscat-sel-texte)}
.chip[aria-pressed="true"]:hover{background:var(--souscat-sel-fond);border-color:var(--vert)}

/* Categorie qu'aucune offre n'occupe. Elle reste VISIBLE et CLIQUABLE : on
   doit pouvoir constater soi-meme le resultat vide plutot que de se demander ou
   la categorie est passee. Le contour pointille et le texte secondaire le
   disent — sans ecrire un chiffre devant chaque libelle, qui faisait de la
   rangee une comptabilite plutot qu'une navigation. */
.chip[data-vide="oui"]{border-style:dashed;color:var(--gris-texte)}
.chip[data-vide="oui"]:hover{border-color:var(--bord-fort);background:var(--gris-champ)}
/* Selectionnee mais vide : la MEME teinte douce que les autres, en gris —
   l'aplat gris fonce a texte blanc etait la derniere puce pleine de la barre. */
.chip[data-vide="oui"][aria-pressed="true"]{background:var(--gris-champ);
  border-color:var(--bord-fort);border-style:solid;color:var(--gris-fort)}

/* « Filtres » est le FilterButton partage (app.css .bouton--filtre). */
.outils__tri{display:flex;align-items:center;gap:6px;font-size:var(--t4);color:var(--gris-texte)}
.outils__tri-eti{white-space:nowrap}
/* Le tri est une liste habillee par socle.js (.champ-select, app.css) : la
   boite porte le cadre de 44 px, le chevron et le halo de focus ; ici ne
   restent que la graisse et la couleur au survol. Il etait un texte
   souligne a fleche native, seule liste du site dessinee ainsi. */
.outils__tri select{font-weight:600}
.outils__tri select:hover{color:var(--vert)}

.compte{display:inline-flex;align-items:center;min-height:36px;padding:0 20px;
  background:var(--gris-pilule);border-radius:var(--r-pilule);font-size:var(--t4)}

/* La grille suit `--colonnes` (app.css) : le nombre de colonnes est fixe par
   palier, jamais par le nombre de resultats. */
.resultats .grille{margin:24px 0 0}
.resultats__plus{display:flex;justify-content:center;margin:44px 0 0}

/* Sous 1024 px quatre champs et leurs icones ne tiennent plus sur une ligne
   (165 px par champ a 990 : l'etiquette passait sur trois lignes) : deux par
   rangee, sans icone. */
@media (max-width:1023px){
  /* La barre se replie sur deux rangees : ses angles restent des capsules,
     mais le conteneur repasse a un grand rayon de bloc — une capsule de
     160 px de haut mangerait ses propres coins. */
  .barre{flex-wrap:wrap;border-radius:var(--r-hero);padding:8px}
  .barre__champ{flex:1 1 38%;padding:0 20px}
  .barre__champ--periode{flex:2 1 48%}
  .barre__icone{display:none}
  .barre__loupe{margin-left:auto}
}
@media (max-width:640px){
  .barre__champ,.barre__champ--periode{flex:1 1 100%}
}
@media (max-width:640px){
  .resultats__titre{font-size:var(--t10)}
}
/* Rien a corriger a 480 px : le container partage porte deja la gouttiere
   mobile (`--page-gutter` = 16 px), a gauche comme a droite. */

/* --------------------------------------------------------- fil d'Ariane */
.fil__zone{margin:18px 0 0}
.fil{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;
  font-size:var(--t2);color:var(--gris-texte)}
.fil li + li::before{content:"/";margin-right:8px;color:var(--bord)}
/* Un maillon de 16 px de haut n'est pas une cible : 44 px, comme le fil des fiches. */
.fil a{display:inline-flex;align-items:center;min-height:var(--tactile)}
.fil a:hover{color:var(--vert)}
.fil [aria-current="page"]{color:var(--encre);font-weight:600}

/* ------------------------------------------------------- barre de champs */
/* Les faux menus deroulants sont devenus de vrais controles : ils doivent
   remplir leur bloc et rester lisibles a 320 px. */
/* spinners des nombres : masques par la regle unique d'app.css */
.barre__champ--plein .barre__valeur select{cursor:pointer}

/* ------------------------------------------- SearchPopover : contenus */
/* Ce que le panneau partage (`.popover`, app.css) porte sous la barre :
   la liste des lieux (« Ou ? ») et les compteurs (« Voyageurs », Convives,
   Participants, Capacite). Rangees de 44 px entierement cliquables ; l'option
   suivie au clavier (`aria-selected`) et celle sous la souris partagent le
   meme aplat. Les compteurs sont le composant partage d'app.css (.compteur). */
.popover__liste{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.popover__groupe{margin:var(--e2) 0 2px;padding:0 var(--e3);font-size:var(--t1);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gris-texte)}
.popover__groupe:first-child{margin-top:2px}
.popover__option{display:flex;align-items:center;gap:var(--e2);min-height:var(--tactile);
  padding:0 var(--e3);border-radius:var(--r2);cursor:pointer;font-size:var(--t4);color:var(--encre)}
.popover__option .ic{width:18px;height:18px;flex:0 0 18px;color:var(--gris-faible)}
.popover__option:hover{background:var(--gris-champ)}
.popover__option[aria-selected="true"]{background:var(--menthe);color:var(--vert);font-weight:600}
.popover__option[aria-selected="true"] .ic{color:var(--vert)}
.popover__option mark{background:none;color:inherit;font-weight:700}
.popover__vide{margin:0;padding:var(--e3);font-size:var(--t3);color:var(--gris-texte)}
.popover__ligne{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  min-height:var(--tactile);padding:var(--e1) var(--e2)}
.popover__ligne + .popover__ligne{border-top:1px solid var(--bord)}
.popover__ligne b{font-weight:600;font-size:var(--t4)}
.popover__ligne small{display:block;font-size:var(--t2);color:var(--gris-texte);font-weight:400}
.popover--compteur{min-width:280px}
.popover .compteur__v{width:52px}
/* Le champ dont le panneau est ouvert le dit — le halo suit la capsule. */
.barre__champ:has([aria-expanded="true"]){background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--vert)}
/* Les listes deroulantes de la barre (sous-type, transaction) ne recoivent PAS
   de boite propre : `.barre__valeur` est declaree dans socle.js > BOITES, donc
   le <select> reste nu dans le segment deja en capsule. Deux arrondis
   imbriques dessineraient une boite dans une boite. */

/* ------------------------------------------------------------ outils */

/* ------------------------------------------- compteur et filtres actifs */

.compte{margin:0}
.pastilles[data-pastilles]{margin:0;padding:0;list-style:none}
.pastilles[hidden]{display:none}
/* Chaque filtre actif est retirable d'un clic : c'est la seule facon de savoir
   ce qui reduit la liste, et de revenir en arriere sans rouvrir le panneau. */
.pastille--retirer{gap:10px;cursor:pointer}
.pastille__x{font-size:var(--t5);line-height:1;color:var(--gris-faible)}
.pastille--retirer:hover .pastille__x{color:var(--vert)}
.resultats__mention{margin:0;max-width:62ch;font-size:var(--t2);color:var(--gris-texte)}
.resultats__mention[hidden]{display:none}

/* --------------------------------------------------------------- etats */
.resultats__zone .etat{display:none}
.resultats__zone[data-etat="chargement"] .etat--chargement,
.resultats__zone[data-etat="vide"] .etat--vide,
.resultats__zone[data-etat="erreur"] .etat--erreur{display:block}
.resultats__zone[data-etat="vide"] .grille,
.resultats__zone[data-etat="erreur"] .grille{display:none}
.resultats__zone[data-etat="chargement"] .grille{opacity:.45}

/* Le FORMAT des etats est monte dans app.css : l'espace Client et l'espace
   Prestataire posent le meme triptyque et ne chargent pas cette feuille. Ne
   reste ici que ce qui appartient a la page de resultats : la marge relevee
   sur la planche, et la mecanique de visibilite par `data-etat` ci-dessus. */
.resultats__zone .etat{margin:44px 31px 0 0}
.etat__titre{margin:0;font-size:var(--t7);font-weight:600;color:var(--encre)}
.etat__texte{margin:var(--e2) 0 var(--e5)}
.etat__action{background:var(--vert);color:var(--texte-inverse)}
.etat__action:hover{background:var(--vert-sombre)}

/* La carte ecartee par un filtre ou par la pagination reste dans le document
   (elle garde ce que app.js lui a branche) mais sort de la grille et du
   parcours clavier : `hidden` fait les deux. */
.grille .carte[hidden]{display:none}

/* ------------------------------------------------------- afficher plus */
.resultats__bouton{background:var(--surface);border:1px solid var(--bord);color:var(--brun)}
.resultats__bouton:hover:not(:disabled){background:var(--fond-creux);border-color:var(--bord)}
.resultats__bouton:disabled{opacity:.5;cursor:default;color:var(--gris-faible)}
.resultats__plus[hidden]{display:none}
/* Chargement au defilement : la boite reste une sentinelle discrete (aucun
   bouton), assez haute pour etre vue venir. */
.resultats__plus[data-auto="oui"]{min-height:48px;margin-top:var(--e4)}

/* --------------------------------------------------- panneau de filtres */
/* Tiroir a droite sur bureau, feuille basse sous 640 px : la liste reste
   visible derriere, on voit ce que l'on filtre. Les filtres actifs sont
   rappeles sous la liste (pastilles retirables) et « Tout effacer » les
   vide d'un coup. */
/* Tiroir : colle au bord droit, toute la hauteur (haut ET bas a 0, pas une
   hauteur calculee qui varie avec la barre du navigateur), angles gauches
   arrondis comme les panneaux du site. */
.filtres{border:0;padding:0;background:none;color:inherit;
  position:fixed;top:0;right:0;bottom:0;left:auto;margin:0;height:auto;max-height:none;
  width:min(440px,100vw);max-width:none;border-radius:var(--r-hero) 0 0 var(--r-hero);
  overflow:hidden;box-shadow:var(--ombre-3)}
.filtres::backdrop{background:rgba(14,14,14,.45)}
.filtres[open]{animation:filtres-tiroir var(--mvt-lent)}
@keyframes filtres-tiroir{from{transform:translateX(24px);opacity:0}}
.filtres__form{margin:0;background:var(--surface);border-radius:var(--r-hero) 0 0 var(--r-hero);height:100%;overflow:auto;
  padding:var(--e5);display:flex;flex-direction:column;gap:var(--e5)}
.filtres__tete{display:flex;align-items:center;justify-content:space-between;gap:var(--e3)}
.filtres__titre{display:flex;align-items:center;gap:var(--e2)}
.filtres__titre{margin:0;font-size:var(--t8);font-weight:700}
.filtres__x{display:grid;place-items:center;width:var(--tactile);height:var(--tactile);border-radius:50%;
  color:var(--gris-texte);transition:background var(--mvt),color var(--mvt)}
.filtres__x:hover{background:var(--gris-champ);color:var(--encre)}
.filtres__duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3)}
.filtres__duo .filtres__ligne{margin:0}
.filtres__corps{display:flex;flex-direction:column;gap:var(--e4)}
.filtres__ligne{margin:0;display:flex;flex-direction:column;gap:6px}
.filtres__etiquette{font-size:var(--t2);font-weight:600;color:var(--gris-texte)}
.filtres__champ{width:100%;height:var(--tactile);padding:0 14px;font:inherit;
  color:inherit;background:var(--gris-champ);border:1px solid var(--bord);
  border-radius:var(--r-champ)}
.filtres__champ:hover{border-color:var(--brun-clair)}
/* L'action principale prend la largeur, les deux secondaires se partagent
   la rangee suivante : le CTA est evident, rien ne se replie de travers. */
.filtres__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  position:sticky;bottom:0;margin:auto calc(var(--e5) * -1) calc(var(--e5) * -1);
  padding:var(--e3) var(--e5) var(--e5);background:var(--surface);border-top:1px solid var(--bord)}
.filtres__action--valider{grid-column:1 / -1}
.filtres__action{border:1px solid var(--bord);background:var(--surface)}
.filtres__action:hover{background:var(--fond-creux)}
.filtres__action--valider{background:var(--vert);border-color:var(--vert);color:var(--texte-inverse);
  font-weight:600}
.filtres__action--valider:hover{background:var(--vert-sombre)}

/* ---- FilterPanel generique (Lot new2) : sections, puces cochables,
   compteurs, interrupteurs, unite du budget, pied « Reinitialiser | Voir N ». */
.filtres__univers{color:var(--vert);font-weight:600}
.filtres__section{display:flex;flex-direction:column;gap:var(--e3);padding-bottom:var(--e4);
  border-bottom:1px solid var(--bord)}
.filtres__section:last-child{border-bottom:0}
.filtres__section-titre{margin:0;font-size:var(--t5);font-weight:700}
.filtres__famille{display:flex;flex-direction:column;gap:8px}
.filtres__famille--ligne{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--e3)}
.filtres__famille .filtres__etiquette{margin:0}
.filtres__aide-inline{font-weight:400;color:var(--gris-faible)}
.filtres__note{margin:0;font-size:var(--t2);color:var(--gris-texte);line-height:1.5}
.filtres__saisie{display:flex;align-items:center;gap:8px}
.filtres__saisie .filtres__champ{flex:1 1 auto;min-width:0}
.filtres__unite{font-size:var(--t2);color:var(--gris-texte);white-space:nowrap}
/* .fchips / .fchip : la FilterChip partagee vit dans app.css (21/09/2026) ;
   ici ne restent que le repli « Afficher N de plus » du tiroir. */
@media (max-width:480px){.filtres__duo{grid-template-columns:minmax(0,1fr)}}
.fchips__suite{display:contents}
.fchips__suite summary{list-style:none;display:inline-flex;align-items:center;min-height:40px;padding:0 4px;
  font-size:var(--t2);font-weight:600;color:var(--vert);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fchips__suite summary::-webkit-details-marker{display:none}
.fchips__suite[open] summary{display:none}
.fchips__suite > .fchips{display:contents}
/* Les compteurs « au moins » du panneau sont le composant partage d'app.css (.compteur). */
.finterrupteur{padding:4px 0}
.filtres__actions{grid-template-columns:auto minmax(0,1fr);align-items:center}
.filtres__actions .filtres__action--valider{grid-column:auto}
.filtres__reinit{justify-self:start;min-height:var(--tactile);padding:0 var(--e2);border:0;background:none;
  font:inherit;font-size:var(--t3);font-weight:600;color:var(--gris-fort);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;border-radius:var(--r2)}
.filtres__reinit:hover{color:var(--vert)}
.resultats__nr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2)}
.resultats__nr-b{min-height:36px;padding:0 var(--e3);border:1px solid var(--vert);border-radius:var(--r-pilule);
  background:var(--surface);color:var(--vert);font:inherit;font-size:var(--t2);font-weight:600;cursor:pointer}
.resultats__nr-b:hover{background:var(--menthe)}

/* Sous 640 px : feuille basse, arrondie en haut, qui laisse voir la liste
   derriere ; les trois actions restent au bas, « Appliquer » d'abord. */
@media (max-width:640px){
  .filtres{top:auto;right:0;bottom:0;left:0;width:100%;height:auto;max-height:92dvh;
    border-radius:var(--r-hero) var(--r-hero) 0 0;overflow:hidden}
  .filtres[open]{animation:filtres-feuille var(--mvt-lent)}
  @keyframes filtres-feuille{from{transform:translateY(24px);opacity:0}}
  .filtres__form{max-height:92dvh;border-radius:var(--r-hero) var(--r-hero) 0 0;padding:var(--e4) var(--e4) var(--e5)}
  .filtres__corps{flex:1 1 auto}
  .filtres__actions{margin:auto calc(var(--e4) * -1) calc(var(--e5) * -1);padding:var(--e3) var(--e4) var(--e4)}

}

@media (max-width:480px){
  .fil__zone,.resultats__bilan,.etat{margin-right:20px}
  .etat{padding:var(--e5) var(--e4)}
}

/* Exploration géographique : même catalogue et mêmes filtres que la liste.
   Décision client 17/09 (« La carte Zihma ») : le panneau reprend le dessin
   des cartes de biens (ivoire, vert profond, or, rayons), le fond OSM est
   assourdi par filtre, les marqueurs sont des capsules de prix et l'aperçu
   au survol est une L.popup dont l'habillage Leaflet est neutralisé. Les
   règles partagées de app.css (.leaflet-container …) ne sont pas touchées :
   tout est surchargé sous #carte-interactive. */
/* Geometrie : la regle de format. Elle est la soeur de `.outils__bouton`
   (Filtres) et portait pourtant sa propre hauteur et sa propre taille de
   texte, cote a cote dans la meme barre d'outils. */
.carte-recherche__bascule {font:inherit;border:1.5px solid var(--vert);background:var(--surface);color:var(--vert);cursor:pointer}
.carte-recherche__bascule:hover {background:var(--menthe)}
.carte-recherche__bascule[aria-expanded="true"] {background:var(--vert);color:var(--texte-inverse)}
.carte-recherche {min-width:0;padding:var(--e5);border:1px solid var(--bord);border-radius:var(--r5);background:var(--surface);box-shadow:var(--ombre-carte);align-self:start}
.carte-recherche__intro {display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--e1) var(--e3);margin-bottom:var(--e4)}
.carte-recherche__titre {display:inline-flex;align-items:center;gap:8px;font-size:var(--t6);margin:0;color:var(--vert-encre)}
.carte-recherche__titre .ic {width:18px;height:18px;flex:0 0 18px;color:var(--vert)}
.carte-recherche__intro p {font-size:var(--t1);line-height:1.4;margin:0;color:var(--gris-texte)}
/* Les commandes de zone flottent sur la carte, en haut au centre. */
.carte-recherche__carte {position:relative;border-radius:var(--r4);overflow:hidden;isolation:isolate;border:1px solid var(--bord)}
.carte-recherche__commandes {position:absolute;top:var(--e3);left:50%;transform:translateX(-50%);z-index:500;display:flex;gap:8px;pointer-events:none;max-width:calc(100% - 120px)}
.carte-recherche__commandes button {pointer-events:auto;background:var(--surface);border:1px solid var(--bord);border-radius:var(--r-pilule);padding:8px 14px;min-height:40px;font:inherit;font-size:var(--t2);font-weight:600;color:var(--vert);cursor:pointer;box-shadow:var(--ombre-2);white-space:nowrap;transition:background var(--mvt),color var(--mvt)}
.carte-recherche__commandes button:hover {background:var(--vert);color:var(--texte-inverse);border-color:var(--vert)}
#carte-interactive {height:clamp(420px,52vh,520px);width:100%;background:var(--fond-creux);z-index:0;outline:none}
#carte-interactive:focus-visible {box-shadow:inset 0 0 0 3px var(--vert)}
/* Fond : terre ivoire, routes gris-beige, eau bleu-vert discret. Le contenu
   Zihma reste plus visible que la cartographie. */
#carte-interactive .leaflet-tile-pane {filter:saturate(.3) sepia(.22) brightness(1.03) contrast(.92)}
#carte-interactive .leaflet-control-attribution {margin:0;padding:2px 8px;font-size:var(--t1);line-height:1.5;color:var(--gris-texte);background:var(--voile-blanc);border-radius:8px 0 0 0}
#carte-interactive .leaflet-control-attribution a {color:var(--gris-texte)}
/* Commandes + / − : un seul bloc vertical, cases de 44 px, glyphes vert encre. */
#carte-interactive .leaflet-control-zoom {margin:12px}
#carte-interactive .leaflet-bar {border:1px solid var(--bord);border-radius:12px;box-shadow:var(--ombre-1);background:var(--surface);overflow:hidden}
#carte-interactive .leaflet-bar a {display:block;width:44px;height:44px;line-height:44px;font:600 22px/44px var(--police);color:var(--vert-encre);background:var(--surface);border:0;border-bottom:1px solid var(--bord);border-radius:0;transition:background var(--mvt)}
#carte-interactive .leaflet-bar a:last-child {border-bottom:0}
#carte-interactive .leaflet-bar a:hover,#carte-interactive .leaflet-bar a:focus-visible {background:var(--menthe);color:var(--vert)}
#carte-interactive .leaflet-bar a.leaflet-disabled {color:var(--gris-faible);background:var(--gris-champ)}
#carte-interactive .carte-apercu--gmaps {width:240px;background:var(--surface);border-radius:16px;box-shadow:var(--ombre-2);overflow:hidden;pointer-events:auto}
#carte-interactive .gm-bundled-control {margin:12px !important}
/* Aucun résultat : le cadre le dit, sur ivoire, plutôt qu'un pays vide. */
.carte-recherche__vide {position:absolute;inset:0;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--e3);padding:var(--e5);text-align:center;background:var(--fond-creux)}
.carte-recherche__vide-titre {margin:0;font-size:var(--t4);font-weight:600;color:var(--vert-encre)}
.carte-recherche__vide button,.carte-recherche__pied button {display:inline-flex;align-items:center;gap:6px;min-height:var(--tactile);padding:8px 16px;border:1px solid var(--vert);border-radius:var(--r-pilule);background:var(--surface);color:var(--vert);font:600 var(--t2)/1.2 var(--police);cursor:pointer;transition:background var(--mvt),color var(--mvt)}
.carte-recherche__vide button:hover,.carte-recherche__pied button:hover {background:var(--vert);color:var(--texte-inverse)}
.carte-recherche__pied button .ic {width:16px;height:16px;flex:0 0 16px}
.carte-recherche__pied button:disabled {opacity:.5;cursor:default}
.carte-recherche__pied {display:flex;align-items:center;justify-content:space-between;gap:var(--e3);margin-top:var(--e3)}
.carte-recherche__pied p {margin:0;font-size:var(--t2);color:var(--gris-texte)}
.carte-recherche label {display:block;font-size:var(--t2);font-weight:600;color:var(--vert-encre);margin:var(--e4) 0 6px}
.carte-recherche select {width:100%;min-height:44px;font:inherit;font-size:var(--t2)}
.carte-recherche .champ-select {width:100%}
.carte-recherche > p {font-size:var(--t1);line-height:1.5;margin:10px 0}
.carte-recherche__externe {display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:var(--e2);font-size:var(--t1);color:var(--gris-texte);text-decoration:none}
.carte-recherche__externe span {text-decoration:underline;text-underline-offset:2px}
.carte-recherche__externe:hover {color:var(--vert)}
.carte-recherche__externe .ic {width:14px;height:14px}
.carte-recherche[hidden],.carte-recherche__bascule[hidden],.carte-recherche [hidden] {display:none}
.resultats--carte .resultats__exploration {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.resultats--carte .resultats__liste .grille {--colonnes:2;gap:16px}
/* Capsules de prix. La boîte Leaflet (200 × 40) est transparente et laisse
   passer le pointeur ; seule la pilule réagit. */
.carte-prix {display:flex;align-items:center;justify-content:center;pointer-events:none;outline:none}
.carte-prix > span {display:inline-block;max-width:190px;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;background:var(--surface);color:var(--vert);border:1px solid var(--bord);border-radius:var(--r-pilule);padding:0 14px;height:36px;font:700 13px/34px var(--police);white-space:nowrap;box-shadow:var(--ombre-1);cursor:pointer;transition:background var(--mvt),color var(--mvt),box-shadow var(--mvt),transform var(--mvt)}
.carte-prix small {font-size:var(--t1);font-weight:600;color:var(--gris-fort)}
.carte-prix--groupe > span {background:var(--vert);color:var(--texte-inverse);border-color:var(--vert);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--or),var(--ombre-1)}
.carte-prix--groupe small {color:var(--or-sur-vert)}
.carte-prix:hover > span,.carte-prix--active > span,.carte-prix:focus-visible > span {background:var(--vert);color:var(--texte-inverse);border-color:var(--vert);box-shadow:var(--ombre-2);transform:translateY(-1px)}
.carte-prix:hover small,.carte-prix--active small,.carte-prix:focus-visible small {color:var(--or-sur-vert)}
.carte-prix--groupe:hover > span,.carte-prix--groupe.carte-prix--active > span {background:var(--vert-sombre);border-color:var(--vert-sombre)}
/* Aperçu au survol : l'habillage Leaflet est neutralisé, la boîte Zihma prend sa place. */
.carte-apercu .leaflet-popup-content-wrapper {background:transparent;box-shadow:none;padding:0;border-radius:0}
/* #carte-interactive : experience.css pose une marge de 12 px sur toute popup de ce cadre */
#carte-interactive .carte-apercu .leaflet-popup-content {margin:0;width:240px !important;line-height:1.4}
.carte-apercu .leaflet-popup-tip-container {display:none}
.carte-apercu__boite {width:240px;background:var(--surface);border:1px solid var(--bord);border-radius:var(--r4);box-shadow:var(--ombre-2);overflow:hidden;font:400 var(--t2)/1.4 var(--police);color:var(--encre)}
/* #carte-interactive : `.leaflet-container a` (0,1,1) l'emporterait sur la classe seule */
#carte-interactive .carte-apercu__lien {display:block;color:inherit;text-decoration:none}
.carte-apercu__lien:hover .carte-apercu__titre {color:var(--vert)}
/* hauteur fixe (16:9 de 240 px) : une grille a aspect-ratio grandirait a la taille intrinseque de la photo une fois chargee */
.carte-apercu__photo {height:135px;overflow:hidden;background:var(--fond-creux);display:grid;place-items:center;color:var(--vert)}
.carte-apercu__photo img {display:block;width:100%;height:100%;object-fit:cover}
.carte-apercu__photo .ic {width:36px;height:36px;color:var(--vert)}
.carte-apercu__corps {display:grid;gap:4px;padding:10px 12px 12px}
.carte-apercu__titre {font-size:var(--t4);font-weight:700;line-height:1.3;color:var(--vert-encre);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.carte-apercu__lieu {display:inline-flex;align-items:center;gap:4px;font-size:var(--t1);color:var(--gris-texte)}
.carte-apercu__lieu .ic {width:12px;height:12px;flex:0 0 12px}
.carte-apercu__bas {display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:2px}
.carte-apercu__note {display:inline-flex;align-items:center;gap:4px;font-size:var(--t1);font-weight:600;color:var(--gris-fort)}
.carte-apercu__note .ic {width:13px;height:13px;color:var(--or);fill:currentColor}
.carte-apercu__note .carte__avis {font-weight:500;color:var(--gris-texte)}
.carte-apercu__prix {font-size:var(--t3);font-weight:700;color:var(--vert);white-space:nowrap}
.carte-apercu__prix small {font-size:var(--t1);font-weight:500;color:var(--gris-fort)}
.carte-apercu__selection {display:inline-flex;align-items:center;gap:6px;font-size:var(--t1);font-weight:600;color:var(--vert)}
.carte-apercu__selection::before {content:"";width:7px;height:7px;border-radius:50%;background:var(--or)}
.carte-apercu__autres {list-style:none;margin:0;padding:4px 12px 6px;border-top:1px solid var(--bord);max-height:106px;overflow:auto;overscroll-behavior:contain}
.carte-apercu__autres a {display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;font-size:var(--t1);color:var(--encre);text-decoration:none}
.carte-apercu__autres a span {flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carte-apercu__autres a b {flex:0 0 auto;font-size:var(--t1);color:var(--vert)}
.carte-apercu__autres a:hover span {color:var(--vert);text-decoration:underline}
.carte--situee {outline:2px solid var(--vert);outline-offset:4px;border-radius:var(--r-carte)}
@media (min-width:1024px) {
 /* La colonne carte reste visible pendant le défilement de la liste ;
    --haut-coque est la hauteur utile publiée par shell.js. */
 .carte-recherche {position:sticky;top:calc(var(--haut-coque,128px) + 16px)}
 /* Le panneau collant doit tenir dans le viewport (1440x768 : le selecteur
    etait coupe) : 350 px = intro + pied + label + select + lien + marges. */
 #carte-interactive {height:clamp(320px,calc(100vh - var(--haut-coque,128px) - 350px),520px)}
}
@media(max-width:1023px) {
 /* 768-1023 : a parts egales la carte ne faisait que 296 px (une seule capsule,
    apercu coupe) ; la colonne large va a la carte, le montant seul sur la capsule. */
 .resultats--carte .resultats__exploration {grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
 .carte-prix__unite {display:none}
}
@media (prefers-reduced-motion:reduce) {
 .carte-prix > span,.carte-recherche__commandes button,.carte-recherche__pied button,#carte-interactive .leaflet-bar a {transition:none}
 .carte-prix:hover > span,.carte-prix--active > span {transform:none}
 #carte-interactive .leaflet-popup {transition:none}
}
@media(max-width:1100px) and (min-width:768px) {.resultats--carte .resultats__liste .grille {grid-template-columns:minmax(0,1fr)}}
@media(max-width:767px) {
 .resultats--carte .resultats__exploration {display:block}
 .resultats--carte .resultats__liste {display:none}
 .carte-recherche {padding:12px;border-radius:var(--r4)}
 #carte-interactive {height:360px;max-height:52dvh}
 .carte-recherche__pied {flex-wrap:wrap}
 /* cadre de 360 px : l'apercu (photo + corps + 2 autres offres) doit y tenir entier */
 .carte-apercu__autres {max-height:66px}
}

/* ======================================================================
   FILTRES / CARTE FLOTTANTS (20/09/2026)
   Les deux commandes quittaient l'ecran des la premiere rangee d'offres : il
   fallait remonter en haut de page pour filtrer. Elles reviennent en bandeau
   flottant des que la barre d'outils d'origine sort du champ.

   Le dessin est volontairement CELUI D'UNE BARRE D'OUTILS, pas celui d'une
   puce de sous-categorie (consigne §5) : fond encre, groupe, sureleve,
   au-dessus de la page. Les sous-categories, elles, restent des puces claires
   a contour fin. Aucune confusion possible entre « je choisis un type de
   bien » et « j'ouvre les filtres ».
   ====================================================================== */
.flottants{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;
  /* La barre ne doit pas manger le bas de la liste ni s'asseoir sur la barre
     systeme d'un telephone : marge propre + zone sure. */
  padding:0 var(--page-gutter) calc(var(--e4) + env(safe-area-inset-bottom,0px));
  pointer-events:none}
.flottants[hidden]{display:none}
.flottants__barre{pointer-events:auto;display:inline-flex;align-items:center;gap:var(--e1);
  padding:6px;background:var(--encre);border-radius:var(--r-pilule);box-shadow:var(--ombre-3);
  max-width:100%}
.flottants__b{display:inline-flex;align-items:center;gap:var(--e2);height:var(--b-haut-petit);
  padding:0 var(--e4);border:0;border-radius:var(--r-pilule);background:none;
  color:var(--texte-inverse);font:inherit;font-size:var(--t3);font-weight:600;
  white-space:nowrap;cursor:pointer;transition:background var(--mvt-d) ease}
.flottants__b .ic{color:currentColor}
.flottants__b:hover{background:rgba(255,255,255,.14)}
.flottants__b:focus-visible{outline:2px solid var(--texte-inverse);outline-offset:2px}
/* Carte ouverte : la commande dit qu'elle l'est (le libelle passe a « Liste »,
   pose par recherche.js) et se remplit en vert Zihma. */
.flottants__b[aria-pressed="true"]{background:var(--vert)}
.flottants__b[aria-pressed="true"]:hover{background:var(--vert-sombre)}
.flottants__sep{width:1px;align-self:stretch;margin:var(--e1) 0;background:rgba(255,255,255,.22)}
/* Le compte de filtres actifs : un jeton clair sur l'encre, pas une puce. */
.flottants__nombre{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-pilule);background:var(--texte-inverse);color:var(--encre);
  font-size:var(--t1);font-weight:700}
.flottants__nombre[hidden]{display:none}
@media (max-width:767px){
  /* Pleine largeur au doigt : les deux commandes se partagent la barre. */
  .flottants{padding-left:var(--e4);padding-right:var(--e4)}
  .flottants__barre{width:100%;justify-content:center}
  .flottants__b{flex:1 1 0;justify-content:center;height:var(--tactile)}
}
@media (prefers-reduced-motion:reduce){
  .flottants__b{transition:none}
}