.filter-bar {
  position: sticky;

  top: 82px;
  z-index: var(--z-elevated);
  padding: var(--sp-3) 0;

  background: var(--c-bg);
}
@media (max-width: 879px) {
  /* Sur mobile la barre s'empile en colonne (~430px de haut) : en sticky
     elle restait collée et masquait les résultats pendant le scroll.
     On la laisse défiler normalement. */
  .filter-bar { position: static; }
}
/* Le drawer et son overlay vivent DANS .filter-bar : son z-index (10) crée
   un contexte d'empilement qui les coince SOUS le header (z 100). Quand le
   drawer est ouvert, on élève toute la barre au niveau modal pour que le
   panneau et l'overlay recouvrent bien le header (régression DRY). */
.filter-bar:has(.filter-drawer.open) { z-index: var(--z-modal); }

.filter-form {
  background: var(--c-card-bg);
  border: var(--border-thin) solid var(--c-card-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: var(--sp-4) var(--sp-5);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-4);
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 130px;
}

/* Très petits écrans en portrait (téléphones pliables repliés, ~320-380px) */
@media (max-width: 380px) {
  .filter-form {
    padding: var(--sp-3);
  }
  .filter-row {
    gap: var(--sp-2) var(--sp-3);
  }
  .filter-field {
    min-width: 100%;
  }
}
.filter-field-grow { flex: 1 1 180px; }
.filter-field-grow input { width: 100%; min-width: 180px; }
/* Dans le drawer, les champs suivent la grille (pas la largeur compacte de la barre) */
.filter-drawer input { width: 100%; }
.filter-field .form-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
}

.filter-form select,
.filter-form input {
  /* Largeur bornée : un <input type="number"> garde sinon sa largeur
     intrinsèque (~196px) au lieu de suivre .filter-field (min-width 130px),
     et les boutons d'action passent à la ligne (régression DRY). */
  width: 130px;
  height: var(--input-h-sm);
  padding: 0 var(--sp-3);
  border: var(--border-thin) solid var(--c-input-border);
  border-radius: var(--r-md);
  background: var(--c-input-bg);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.filter-form select:focus,
.filter-form input:focus {
  border-color: var(--c-input-focus);
  box-shadow: var(--shadow-glow);
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

/* ── Barre de filtres : design assorti au drawer « Affiner ma recherche »
   (pills arrondies, fond doux, accents dorés) - même emplacement,
   mêmes classes HTML, uniquement des overrides de style. ── */

/* Segment Acheter/Louer → chips pill, actif aux couleurs de la marque */
.filter-bar .filter-segment {
  background: transparent;
  border: none;
  padding: 0;
  gap: var(--sp-2);
}
.filter-bar .seg-btn {
  height: var(--input-h-sm);
  padding: 0 var(--sp-5);
  border: var(--border-thin) solid var(--c-input-border);
  border-radius: var(--r-full);
  background: var(--c-bg-subtle);
}
.filter-bar .seg-btn:hover { border-color: var(--c-accent); color: var(--c-brand); }
.filter-bar .seg-btn.is-active {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-text-on-brand);
}

/* Labels : petites capitales dorées, signature des titres du drawer */
.filter-bar .filter-field .form-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  font-weight: var(--fw-semibold);
  color: var(--c-accent-dark-contrast);
}

/* Champs : pill au fond doux, cadre visible seulement au focus (doré) */
.filter-bar .filter-form input,
.filter-bar .custom-select-toggle {
  background: var(--c-bg-subtle);
  border-color: transparent;
  border-radius: var(--r-full);
  padding: 0 var(--sp-4);
}
.filter-bar .filter-form input:hover,
.filter-bar .custom-select-toggle:hover { border-color: var(--c-accent); }
.filter-bar .filter-form input:focus,
.filter-bar .custom-select.open .custom-select-toggle {
  background: var(--c-input-bg);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-tint);
}
.filter-bar .custom-select-caret { color: var(--c-accent-dark-contrast); }

/* Boutons d'action en pill, cohérents avec les champs */
.filter-bar .filter-actions .btn { border-radius: var(--r-full); }

/* Quand la barre s'empile (mobile), chaque champ remplit sa colonne */
@media (max-width: 560px) {
  .filter-bar .filter-form input { width: 100%; }
}

/* ── PANNEAU LATÉRAL DE FILTRES (drawer) - remplace l'ancien bloc
   .filter-more qui se dépliait sous la barre et poussait la page. ── */
.filter-drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-overlay);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.filter-drawer-overlay.open { opacity: 1; }
.filter-drawer-overlay[hidden] { display: none; }

.filter-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 460px;
  max-width: calc(100vw - var(--sp-8));
  background: var(--c-bg);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease-out);
}
.filter-drawer.open { transform: translateX(0); }
.filter-drawer[hidden] { display: none; }

.filter-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: var(--border-thin) solid var(--c-border);
  flex-shrink: 0;
}
.filter-drawer__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-brand-darker);
  margin: 0;
}
.filter-drawer__close {
  width: var(--tap-min);
  height: var(--tap-min);
  border: none;
  background: var(--c-bg-subtle);
  border-radius: var(--r-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand-dark);
  transition: background var(--t-fast), color var(--t-fast);
}
.filter-drawer__close:hover,
.filter-drawer__close:focus-visible { background: var(--c-brand); color: white; }
.filter-drawer__close svg { width: 20px; height: 20px; }

.filter-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-6);
  scrollbar-width: thin;
  scrollbar-color: var(--c-brand-tint-2) transparent;
}
.filter-drawer__section {
  padding: var(--sp-5) 0;
  border-bottom: var(--border-thin) solid var(--c-border);
}
.filter-drawer__section:first-child { padding-top: 0; }
.filter-drawer__section:last-child { border-bottom: none; }
.filter-drawer__section > h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-brand-darker);
  margin: 0 0 var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
/* Filet doré après le titre de section, signature du site */
.filter-drawer .filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-4);
}
.filter-drawer .filter-field { min-width: 0; }
.filter-drawer .custom-select { min-width: 0; width: 100%; }

.filter-drawer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-top: var(--border-thin) solid var(--c-border);
  background: var(--c-bg);
  flex-shrink: 0;
}
.filter-drawer__reset {
  color: var(--c-text-muted);
  text-decoration: underline;
  font-size: var(--fs-sm);
}
.filter-drawer__reset:hover { color: var(--c-brand); }
#filter-drawer-submit { min-width: 180px; }

@media (max-width: 560px) {
  .filter-drawer { width: 100%; max-width: none; }
  .filter-drawer .filter-grid { grid-template-columns: 1fr; }
}

/* ── Chips des filtres actifs (au-dessus des résultats) ───────── */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.active-filters[hidden] { display: none; }
.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-tint-2);
  border-radius: var(--r-full);
  color: var(--c-brand-dark);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.active-filter-chip i {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--c-brand);
}
.active-filter-chip:hover,
.active-filter-chip:focus-visible {
  background: var(--c-brand-tint-2);
  border-color: var(--c-brand-light);
}
.active-filter-clear {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  text-decoration: underline;
  margin-left: var(--sp-2);
}
.active-filter-clear:hover { color: var(--c-brand); }

/* ── Outils des résultats (tri + vues) ────────────────────────── */
.search-results-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.tri-select {
  height: var(--input-h-sm);
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-input-border);
  border-radius: var(--r-sm);
  background: var(--c-input-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.tri-select:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
}

.filter-field[hidden],
.filter-check-group[hidden],
.filter-check[hidden] { display: none !important; }

.custom-select {
  position: relative;
  min-width: 170px;
}
.custom-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  height: var(--input-h-sm);
  padding: 0 var(--sp-3);
  background: var(--c-input-bg);
  border: var(--border-thin) solid var(--c-input-border);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.custom-select-toggle:hover { border-color: var(--c-brand-light); }
.custom-select.open .custom-select-toggle {
  border-color: var(--c-input-focus);
  box-shadow: var(--shadow-glow);
}
.custom-select-caret {
  width: 16px;
  height: 16px;
  color: var(--c-brand);
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease-out);
}
.custom-select.open .custom-select-caret { transform: rotate(180deg); }

.custom-select-menu {
  /* position:absolute est OBLIGATOIRE ici : la base partagée de
     global/header.css ne fournit que l'apparence (opacity/visibility) -
     sans lui, le menu masqué reste dans le flux et crée un espace vide
     sous chaque champ (régression du refactor DRY 2026-07-10). */
  position: absolute;
  top: calc(100% + var(--sp-1));
  left: 0;
  right: 0;
  min-width: 200px;
  z-index: var(--z-overlay);
  transform: translateY(-6px);
}
.custom-select.open .custom-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.custom-select-option {
  text-align: left;
  background: transparent;
  border: none;
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--c-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.custom-select-option:hover {
  background: var(--c-brand-tint);
  color: var(--c-brand-dark);
}
.custom-select-option.is-selected {
  color: var(--c-brand-dark);
  font-weight: var(--fw-semibold);
  background: var(--c-brand-tint);
}

.custom-multi .custom-select-option { gap: var(--sp-2); }
.custom-multi .opt-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: var(--border-thick) solid var(--c-input-border);
  border-radius: var(--r-xs);
  flex-shrink: 0;
}
.custom-multi .custom-select-option.is-selected .opt-check {
  background: var(--c-brand);
  border-color: var(--c-brand);
}
.custom-multi .custom-select-option.is-selected .opt-check::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-4);
  width: 100%;
}
.filter-block {
  width: 100%;
  margin-top: var(--sp-2);
}
.filter-block > .form-label {
  display: block;
  margin-bottom: var(--sp-2);
}

.dpe-a { background: var(--c-dpe-A); }
.dpe-b { background: var(--c-dpe-B); }
.dpe-c { background: var(--c-dpe-C); color: var(--c-text); }
.dpe-d { background: var(--c-dpe-D); color: var(--c-text); }
.dpe-e { background: var(--c-dpe-E); }
.dpe-f { background: var(--c-dpe-F); }
.dpe-g { background: var(--c-dpe-G); }

.ges-a { background: var(--c-ges-A); color: var(--c-text); }
.ges-b { background: var(--c-ges-B); color: var(--c-text); }
.ges-c { background: var(--c-ges-C); }
.ges-d { background: var(--c-ges-D); }
.ges-e { background: var(--c-ges-E); }
.ges-f { background: var(--c-ges-F); }
.ges-g { background: var(--c-ges-G); }

.energy-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  width: 100%;
  margin-top: var(--sp-2);
}
.energy-row .filter-block { width: auto; margin-top: 0; }

.search-page {
  padding: var(--sp-6) 0 var(--sp-16);
}

.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.search-results-header h2 {
  font-size: var(--fs-xl);
  margin: 0;
}

/* ── Toggle Liste | Carte (segmenté, actif sombre) ───────────── */
.mode-toggle {
  display: inline-flex;
  background: var(--c-card-bg);
  border: var(--border-thin) solid var(--c-input-border);
  border-radius: var(--r-full);
  padding: var(--sp-1);
  gap: var(--sp-1);
}
.mode-toggle button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 36px;
  padding: 0 var(--sp-4);
  border: none;
  background: transparent;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.mode-toggle button svg { width: 18px; height: 18px; }
.mode-toggle button.active {
  background: var(--c-brand);
  color: var(--c-text-on-brand);
}

/* ── Grille : 2 biens par ligne sur grand écran, 1 sur téléphone ─ */
@media (min-width: 900px) {
  .property-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Carte de bien enrichie (variante recherche) ─────────────── */
.pc-badges {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.pc-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.pc-badge-new { background: var(--c-brand); color: var(--c-text-on-brand); }
.pc-badge-dpe {
  width: 28px;
  height: 24px;
  justify-content: center;
  padding: 0;
  border-radius: var(--r-sm);
  color: #fff;
}
.pc-badge-tx {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
}
.pc-prix-suffixe {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
}
.pc-prix-m2 {
  margin-left: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
}
.pc-type {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin: var(--sp-1) 0 var(--sp-2);
}
.pc-caracts {
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  margin-bottom: var(--sp-1);
}
.pc-lieu {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* ── Mode carte : liste à gauche, carte pleine hauteur à droite ─ */
/* En mode carte, la page ne défile plus : la carte est STATIQUE (taille de
   la fenêtre) et seule la colonne d'annonces a son propre ascenseur -
   molette sur la carte = zoom, molette sur la liste = défilement. */
body.map-mode-lock { overflow: hidden; }
/* Dev uniquement : la toolbar de debug Symfony recouvrait le bouton
   flottant « Liste » sur mobile (inexistante en prod). */
body.map-mode-lock .sf-toolbar { display: none; }
.search-page.map-mode {
  display: grid;
  /* Style portail : annonces en liste à gauche, la carte occupe tout le
     reste de l'ÉCRAN (on sort du .container avec la marge négative). */
  grid-template-columns: 480px 1fr;
  gap: var(--sp-4);
  align-items: stretch;
  width: calc(100vw - 2 * var(--sp-5));
  margin-left: calc(50% - 50vw + var(--sp-5));
  /* --map-top est posé par recherche.js (position réelle sous la barre) */
  height: calc(100vh - var(--map-top, 240px) - var(--sp-3));
}
.search-page.map-mode .property-grid.cols-2 { grid-template-columns: 1fr; }
.search-page.map-mode .search-results {
  height: 100%;
  overflow-y: auto;
  padding-right: var(--sp-2);
  scrollbar-width: thin;
  scrollbar-color: var(--c-brand-tint-2) transparent;
}
.search-map-pane {
  position: relative;
  height: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.search-map-pane[hidden] { display: none; }
#search-map { position: absolute; inset: 0; }

/* Marqueur d'un bien : bulle prix + point violet (couleur marque) */
.map-bien-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  cursor: pointer;
}
.map-bien-prix {
  background: var(--c-brand);
  color: var(--c-text-on-brand);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease-out);
}
.map-bien-pin:hover .map-bien-prix,
.map-bien-pin:focus-visible .map-bien-prix {
  transform: scale(1.08);
  background: var(--c-brand-dark);
}
.map-bien-point {
  width: 12px;
  height: 12px;
  background: var(--c-brand);
  border: 2px solid #fff;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
}

/* Panneau « Filtrer l'environnement » : pilule repliée par défaut,
   qui se déplie en panneau au clic. */
.map-layers {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  max-width: 300px;
  background: var(--c-card-bg);
  border: var(--border-thin) solid var(--c-card-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  z-index: 2;
  overflow: hidden;
}
.map-layers__pill {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: var(--sp-2) var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-brand-dark);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.map-layers__pill::after {
  content: ' ▾';
  color: var(--c-brand);
}
.map-layers__pill[aria-expanded="true"]::after { content: ' ▴'; }
.map-layers__pill:hover { background: var(--c-brand-tint); }
.map-layers__corps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-3);
}
.map-layers__corps[hidden] { display: none; }
.map-layer-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.map-layers__groupe {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
}
.poi-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  border: 1.5px solid #fff;
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}
/* Palette Okabe-Ito (sûre pour les daltoniens) - synchronisée avec POI
   dans recherche.js : toute modification doit se faire aux deux endroits. */
.poi-dot--rer            { background: #000000; }
.poi-dot--metro          { background: #0072B2; }
.poi-dot--tram           { background: #009E73; }
.poi-dot--bus            { background: #E69F00; }
.poi-dot--ecole          { background: #CC79A7; }
.poi-dot--grande_surface { background: #D55E00; }
.poi-dot--epicerie       { background: #56B4E9; }
.poi-dot--alimentation   { background: #F0E442; }
.map-layers__hint {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.map-layers__hint[hidden] { display: none; }

/* Bouton flottant « Liste » (mobile uniquement) */
.map-retour-liste { display: none; }

@media (max-width: 899px) {
  /* Mode carte plein écran sur téléphone : la carte est un calque fixe
     (un doigt = déplacer la carte, pincer = zoomer - la page en dessous
     ne bouge pas), bouton flottant « Liste » pour revenir. */
  .search-page.map-mode {
    display: block;
    width: auto;
    margin-left: 0;
    height: auto;
  }
  .search-page.map-mode .search-results { display: none; }
  .search-map-pane {
    position: fixed;
    inset: 0; /* PLEIN écran : sinon la bande au-dessus laissait voir la
                 page en dessous selon la position de défilement */
    height: auto;
    border-radius: 0;
    z-index: var(--z-modal);
  }
  .map-retour-liste {
    display: inline-flex;
    position: absolute;
    /* Marge de sécurité (encoche/barre système iOS-Android, toolbar de
       debug en dev) + au-dessus de tout overlay éventuel */
    bottom: calc(var(--sp-12) + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    min-height: var(--tap-min);
    padding: 0 var(--sp-6);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-lg);
  }
  /* La pilule des filtres ne doit pas chevaucher les boutons +/- */
  .map-layers { max-width: calc(100vw - 90px); }
}