/* ══════════════════════════════════════════════════════════════════════════
   RECHERCHE ET RÉSULTATS GÉOLOCALISÉS — composant partagé
   Barre de recherche (+ autocomplétion de commune, rayon), en-tête de page
   compact, vue carte plein écran mobile, composant liste + carte (.cr-*).

   Sorti de style.css le 2026-09-11, SANS modification de règle : l'agenda
   de l'espace pro (/agenda?pro=1, gabarit base_artisan.html) ne charge pas
   style.css — depuis la création du composant partagé (2026-08-17), il
   s'affichait sans ses styles : bouton « Voir sur la carte » brut, carte
   écrasée sous la liste, vue Carte mobile inopérante.

   Chargé JUSTE APRÈS style.css par base.html (ordre de cascade identique à
   l'ancien fichier unique, vérifié par empreinte des styles calculés) et
   par agenda.html dans l'espace pro. Toute nouvelle règle du composant va
   ICI, jamais dans style.css : sinon l'agenda pro recasse en silence.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Barre de recherche (macro) ── */
.barre-rech { max-width: 680px; margin: 0 auto 2rem; padding: 0 1rem; }
.barre-rech-inner {
  display: flex;
  border: .5px solid var(--rule-mid);
  border-radius: var(--radius-lg);
  overflow: visible;
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(26,25,22,.07);
}
.barre-rech-quoi {
  flex: 3; display: flex; align-items: center; gap: .5rem;
  padding: .65rem .9rem;
  border-right: .5px solid var(--rule-mid);
}
.barre-rech-ou {
  flex: 2; display: flex; align-items: center; gap: .3rem;
  padding: .65rem .5rem;
  position: relative;
  border-right: .5px solid var(--rule-mid);
}
.barre-rech-btn {
  flex-shrink: 0; padding: .65rem 1.25rem;
  border: none; cursor: pointer;
  background: var(--accent-fonce); color: #fff;
  font-family: var(--sans); font-size: .82rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.barre-rech-btn:hover { opacity: .9; }
@media (max-width: 540px) {
  .barre-rech { padding: 0 .75rem; }
  .barre-rech-inner { flex-direction: column; }
  .barre-rech-quoi {
    flex: none; border-right: none;
    border-bottom: .5px solid var(--rule-mid);
    padding: .8rem .9rem; min-height: 48px;
  }
  .barre-rech-ou {
    flex: none; border-right: none;
    border-bottom: .5px solid var(--rule-mid);
    padding: .8rem .5rem; min-height: 48px;
  }
  .barre-rech-btn {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: .85rem 1.25rem; font-size: .9rem; min-height: 48px;
  }
}

/* ── Autocomplétion de commune ─────────────────────────────────────────────
   Partagée par les deux barres de recherche (macro _barre_recherche.html →
   /recherche, et le fil de découverte). Le style était recopié en inline dans
   les deux, à un pixel et une couleur de fond près.
   L'AFFICHAGE reste piloté en JS : brqVilles() pose display:block/none en
   inline, ce qui l'emporte sur le display:none de repos ci-dessous. */
.brq-suggestions {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 600;
  background: var(--surface);
  border: .5px solid var(--rule-mid);
  border-radius: var(--radius);
  list-style: none; margin: 0; padding: 0;
  max-height: 220px; overflow-y: auto;
  box-shadow: 0 6px 20px rgba(26,25,22,.12);
}
.brq-suggestion {
  padding: .55rem .9rem; cursor: pointer; font-size: .88rem;
  border-bottom: .5px solid var(--rule);
}
.brq-suggestion:last-child { border-bottom: 0; }
/* Ligne survolée ou atteinte au clavier (flèches) — posée par brqSelect(). */
.brq-suggestion.is-actif { background: var(--accent-pale); }

/* Bouton « autour de moi » commun aux deux barres. */
.brq-geo-btn {
  border: none; background: transparent; cursor: pointer;
  padding: .1rem .3rem; color: var(--accent);
  flex-shrink: 0; line-height: 1; display: flex; align-items: center;
}

/* ── Ligne « Dans un rayon de … » ──────────────────────────────────────────
   Partagée par la barre de la macro (_barre_recherche.html → /recherche) et
   par celle du fil de découverte (decouverte.html). Elle n'apparaît qu'une
   fois une commune posée : son `display` reste piloté en inline par
   brqSliderToggle(), tout le reste de sa présentation vit ici. */
.rayon-row {
  align-items: center; gap: .75rem; padding: .55rem .25rem 0;
  font-size: .8rem; color: var(--ink-mid);
}
.rayon-libelle { white-space: nowrap; flex-shrink: 0; }
.rayon-slider {
  flex: 1 1 4rem; min-width: 3.5rem;
  accent-color: var(--accent); cursor: pointer;
}
.rayon-valeur {
  white-space: nowrap; flex-shrink: 0; font-weight: 600;
  color: var(--ink); min-width: 4rem; text-align: right;
}
.rayon-france {
  display: flex; align-items: center; gap: .3rem; flex-shrink: 0;
  white-space: nowrap; cursor: pointer; font-size: .75rem; color: var(--ink-mid);
}
.rayon-france input { accent-color: var(--accent); cursor: pointer; }

/* Les quatre éléments ne tiennent pas sur les ~320 px utiles d'un écran de
   360 : la case « Toute la France » débordait à droite et se faisait rogner
   (invisible, le débordement étant coupé par html{overflow-x:clip}) — donc
   plus moyen de repasser en recherche nationale au doigt. Elle passe à la
   ligne au lieu de disparaître. */
@media (max-width: 768px) {
  .rayon-row    { flex-wrap: wrap; row-gap: .35rem; column-gap: .55rem; }
  .rayon-france { flex-basis: 100%; justify-content: flex-end; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EN-TÊTE DE PAGE COMPACT — motif partagé par l'annuaire, /decouvrir et
   /agenda (constat 2026-08-16 : sur mobile, l'empilement eyebrow + titre +
   sous-titre + barre de recherche pleine taille repoussait systématiquement
   la première carte hors écran). Desktop : aucune règle ici, tout vit dans
   les media queries — la mise en page desktop de chaque page ne bouge pas.

   Bloc titre : voir templates/_entete_page.html (macro entete_titre).
   Bloc recherche compacte : chaque page garde ses propres champs (ils
   diffèrent trop — texte+lieu, métier+lieu, période+lieu — pour un unique
   formulaire générique) mais partage ce mécanisme de repli : une case à
   cocher HORS du <form> (jamais dans la query string), un <label> qui la
   pilote pour déplier sans JavaScript, et :focus-within en filet de
   sécurité si le clavier/lecteur d'écran saute directement à un champ.
   Gabarit HTML attendu par page :
     <input type="checkbox" id="pg-search-open" class="pg-search-open" hidden>
     <form class="pg-search-form">
       <div class="pg-search-row">
         … champs, avec les moins prioritaires dans un wrapper
         `.pg-search-extra` (masqué replié) et un <label for="pg-search-open"
         class="pg-search-pin"> comme raccourci de dépliage …
       </div>
     </form>
   ══════════════════════════════════════════════════════════════════════════ */
.pg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pg-hero { text-align: center; margin: 1.5rem auto 1.25rem; padding: 0 1.5rem; max-width: 640px; }
.pg-eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .6rem;
}
.pg-titre {
  font-family: var(--display); font-weight: 400; line-height: 1.15;
  letter-spacing: -.01em; color: var(--ink);
  font-size: clamp(1.9rem, 5vw, 2.75rem);
}
.pg-titre em { font-style: italic; color: var(--accent); }
.pg-soustitre { font-size: .95rem; color: var(--ink-mid); margin-top: .6rem; line-height: 1.6; }

@media (max-width: 768px) {
  .pg-hero { margin: .85rem auto .6rem; padding: 0 1.1rem; }
  .pg-eyebrow { display: none; }
  .pg-titre {
    font-size: 1.32rem; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pg-soustitre { font-size: .82rem; margin-top: .3rem; }
  .pg-soustitre--desktop { display: none; }

  /* ── Recherche compacte : repliée = un seul bandeau ~48px, dépliée =
     les champs de la page. Basé sur le mécanisme déjà rodé de /decouvrir
     (case #v2-open) — étendu ici aux trois pages sous un nom partagé.
     État par défaut qualifié par :not(:checked) plutôt qu'un simple
     `.pg-search-extra { display:none }` : chaque page pose déjà sa PROPRE
     règle `display:flex` non conditionnelle sur ces mêmes éléments (ex.
     .ann-recherche-ou) — à spécificité CSS égale (une classe), la règle
     posée en dernier dans le document gagne, et la feuille partagée est
     TOUJOURS chargée avant le <style> de la page. Sans ce qualificatif,
     le bandeau replié affichait quand même les champs dépliés (constat
     2026-08-16). */
  .pg-search-open:not(:checked) ~ .pg-search-form:not(:focus-within) .pg-search-extra,
  .pg-search-open:not(:checked) ~ .pg-search-form:not(:focus-within) .pg-search-btns {
    display: none;
  }
  .pg-search-open:checked ~ .pg-search-form .pg-search-pin,
  .pg-search-form:focus-within .pg-search-pin { display: none; }
  .pg-search-row { min-height: 48px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VUE CARTE PLEIN ÉCRAN MOBILE — verrou de défilement partagé par l'annuaire
   (/artisans) et /agenda (constat 2026-08-16 : en mode Carte sur mobile,
   l'en-tête, les filtres et la recherche s'empilaient AU-DESSUS de la carte
   — il fallait scroller pour la voir). Posée par static/js/carte-mobile.js
   (WkCarteMobile.verrouillerScroll) sur <html>, jamais sur un élément propre
   à une page : la carte remplace alors toute la page visible (entre le
   header fixe et la tab bar), il n'y a donc plus rien à faire défiler — les
   gestes de pan/pinch DE LA CARTE elle-même restent gérés par Leaflet, ce
   verrou ne touche que le scroll du document.
   Chaque page pose ensuite ses propres classes de mise en page flottante
   (préfixe ann- pour l'annuaire, mk- pour l'agenda — trop différentes dans
   leurs contrôles pour un unique jeu de classes, comme .pg-search-* ci-
   dessus) ; ce bloc ne couvre que le mécanisme commun aux deux. ═══════════ */
@media (max-width: 820px) {
  html.wkc-scroll-lock,
  html.wkc-scroll-lock body { height: 100%; overflow: hidden; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPOSANT PARTAGÉ « RÉSULTATS GÉOLOCALISÉS » (liste + carte) — annuaire
   (/artisans?vue=carte) ET agenda (/agenda), unifiés le 2026-08-17. Avant :
   deux implémentations Leaflet distinctes (bascule serveur pour l'une, JS
   pour l'autre), une seule avec vues jumelles desktop, CSS de mise en page
   dupliquée. Ce bloc porte le MÉCANIQUE (grille, bascule, flottants mobile,
   légende repliable) ; contenu des cartes-résultat, couleurs de pins et
   filtres restent propres à chaque page (son propre <style>) — l'init
   Leaflet elle-même est dans static/js/carte-resultats.js.

   Contrat HTML attendu (racine .cr-shell, togglée .is-carte en JS) :
     <div class="cr-shell ...">
       <div class="cr-toggle-wrap"><button class="cr-toggle">…</button></div>
       <div class="cr-overlay">…recherche + filtres, mobile carte only…</div>
       <div class="cr-split">
         <div class="cr-listcol">…cartes-résultat…</div>
         <div class="cr-mapcol">
           <div class="cr-legende-wrap">…optionnelle…</div>
           <div class="cr-map" id="…"></div>
         </div>
       </div>
     </div>
   --cr-nav / --cr-tabbar à poser par la page (hauteurs réelles de son
   header/tab bar — l'agenda en espace pro diffère du site public) ;
   défauts ci-dessous pour le site public seul. ═══════════════════════════ */

.cr-shell { --cr-nav: calc(58px + env(safe-area-inset-top, 0px)); --cr-tabbar: calc(58px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 768px) { .cr-shell { --cr-nav: calc(56px + env(safe-area-inset-top, 0px)); } }

.cr-listcol, .cr-mapcol { min-width: 0; }
.cr-mapcol { display: none; }
.cr-shell.is-carte .cr-mapcol { display: block; }
.cr-shell.is-carte .cr-listcol { display: none; }

.cr-map {
  width: 100%; border-radius: var(--radius-lg); border: 0.5px solid var(--rule-mid);
  overflow: hidden; position: relative; background: var(--bg);
}
/* Le temps que Leaflet se télécharge (chargement différé, audit perf
   2026-09-03 étape 4) — sans ça, la carte reste une zone vide et floue le
   temps du chargement, plus visible encore sur un réseau lent. */
.cr-map-chargement {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: .85rem;
}
/* [hidden] doit rester prioritaire sur le display:flex ci-dessus : même
   spécificité (0,0,1,0) que le [hidden]{display:none} du navigateur, mais
   déclarée après. Sans cette ligne, le calque restait « affiché » en
   permanence — invisible à l'œil (peint derrière les tuiles Leaflet), mais
   toujours annoncé aux lecteurs d'écran, qui lisaient « Chargement de la
   carte… » sur l'agenda et l'annuaire même carte chargée (constat
   2026-09-12, balayage des composants repliables). */
.cr-map-chargement[hidden] { display: none; }

/* ── « Vous êtes ici » et clusters génériques : mécaniques, pas de charte
   propre à une page (violet Wesk, déjà la couleur utilisée par les deux
   pour ce marqueur précis). ── */
.cr-moi { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.cr-moi-dot {
  width: 14px; height: 14px; border-radius: 50%; background: #7C5375;
  border: 2px solid #fff; animation: cr-pulse 2s infinite;
}
@keyframes cr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,83,117,.45); }
  70%  { box-shadow: 0 0 0 12px rgba(124,83,117,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,83,117,0); }
}
.cr-cluster {
  border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px;
  font-family: var(--sans); display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
/* Transition douce du marqueur lors d'un zoom/déplié de cluster — générique
   (Leaflet), pas propre à une page. */
.leaflet-cluster-anim .leaflet-marker-icon { transition: transform .2s; }

/* ── Bascule Liste/Carte : bouton UNIQUE au libellé dynamique (constat
   2026-08-17 : l'agenda avait un contrôle à 2 segments, l'annuaire un
   bouton simple — unifié sur le plus simple des deux, celui qu'expose déjà
   la carte mobile plein écran). Desktop : masquée, les deux colonnes sont
   déjà côte à côte. ── */
.cr-toggle-wrap { display: flex; justify-content: flex-end; }
.cr-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .9rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  border: 0.5px solid var(--rule-mid); background: var(--surface); color: var(--ink);
  text-decoration: none; cursor: pointer; font-family: inherit;
  transition: border-color .12s, color .12s;
}
.cr-toggle:hover { border-color: var(--accent); color: var(--accent); }
.cr-toggle svg { flex-shrink: 0; }

/* ── Légende repliable : bouton + panneau, base commune aux deux tailles. ── */
.cr-legende-wrap { position: absolute; right: 10px; top: 10px; z-index: 500; }
.cr-legende {
  background: rgba(255,255,255,.94); border: .5px solid var(--rule-mid); border-radius: 10px;
  padding: 7px 10px; box-shadow: 0 4px 14px rgba(26,25,22,.12);
  display: flex; flex-direction: column; gap: 4px;
}
.cr-legende span {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-mid);
  line-height: 1.3; white-space: nowrap;
}
.cr-legende i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cr-legende-toggle {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.94); border: .5px solid var(--rule-mid);
  border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 600;
  color: var(--ink-mid); box-shadow: 0 4px 14px rgba(26,25,22,.12);
  cursor: pointer; font-family: inherit;
}

/* Bascule liste seule ↔ liste + carte (@media au seuil) : dans
   templates/_resultats_geo_bascule.html, inclus juste après ce fichier —
   le seuil diffère entre le site public et l'espace pro. */