/* ============================================================================
   zz-carte-app.css — CARTE (version APP mobile) — portage FIDÈLE de la maquette
   « 06-carte-maquette-originale.png » (prototype CARTE_MOBILE_CODE_CLAUDE).
   ----------------------------------------------------------------------------
   • 100 % ADDITIF / RÉVERSIBLE. N'agit QUE sous html.apprefonte + body.page-carte
     + @media ≤768px. Bureau (>768px) et autres pages : JAMAIS touchés.
   • Ne touche NI au DOM PHP, NI au moteur JartMap (assets/js/map.js), NI aux API,
     NI au CSRF, NI aux permissions. Le chrome maquette est un CALQUE qui pilote
     les VRAIS contrôles existants (voir zz-carte-app.js).
   • GARDIEN (gardien-widget.php, .gw-*, .ai-*, .carte-gardien) : NON touché.
     ÉTINCELLES : absent de cette page.
   • Palette = tokens DS app (--ar-*) + couleurs de catégorie de la maquette
     (globals.css) UNIQUEMENT comme encodage des pastilles/pins. Rouge = 112 seul.
   • Se superpose au reskin visuel .page-carte-v2 (purement couleurs) et au lot
     carte-terrain.css (re-palettage) : ici on RESTRUCTURE le layout mobile.
   Chargé après carte-terrain.css (tri alpha), avant zz-polish.css.
   ============================================================================ */

/* Garde hors-mobile : le calque et ses éléments injectés restent invisibles >768px
   (le bureau ne doit JAMAIS voir le chrome maquette). Réactivés dans le @media ≤768. */
html.apprefonte .fdcmap,
html.apprefonte .fdcmap-count,
html.apprefonte .fdcmap-sheet-head { display: none; }

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {
html.apprefonte body.page-carte {

  /* Couleurs de catégorie (maquette globals.css) — encodage des pins/pastilles. */
  --m-blue:   #3fa7ff;   /* Aires */
  --m-cyan:   #25e4ed;   /* Eau / spot */
  --m-green:  #54db8d;   /* Camping / services */
  --m-orange: #ff9657;   /* Voyageurs */
  --m-yellow: #ffc437;   /* Énergie */
  --m-purple: #d67bf3;   /* Services (pastille fiche) */
  /* Barre de marque masquée → la carte part du haut (juste la zone sûre / notch). */
  --fdcmap-top: env(safe-area-inset-top, 0px);
  --fdcmap-bot: calc(var(--ar-navh) + var(--ar-safe-b));
}

/* ── App-shell : page verrouillée, carte plein écran entre topbar et nav ─────── */
html.apprefonte.fdcmap-lock { overflow: hidden !important; height: 100% !important; }
html.apprefonte body.page-carte { overflow: hidden !important; height: 100%; }

/* (maquette) La barre de marque en haut est masquée sur la Carte : la recherche
   devient la première rangée. La carte occupe TOUT l'écran (jusqu'en haut). */
html.apprefonte body.page-carte .pub-topbar { display: none !important; }
html.apprefonte body.page-carte .pub-content,
html.apprefonte body.page-carte main.container,
html.apprefonte body.page-carte .ppx-wrap {
  padding-bottom: 0 !important;
}

/* Le shell 3-colonnes devient un conteneur fixe plein écran (grille neutralisée). */
html.apprefonte body.page-carte .carte-shell,
html.apprefonte body.page-carte .carte-shell.page-carte-v2 {
  position: fixed !important;
  top: var(--fdcmap-top) !important;
  left: 0 !important; right: 0 !important;
  bottom: var(--fdcmap-bot) !important;
  width: auto !important; height: auto !important;
  min-height: 0 !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important;
  display: block !important;
  background: var(--ar-bg) !important;
  border: 0 !important; border-radius: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
  isolation: isolate;
}

/* La colonne carte remplit tout le shell. */
html.apprefonte body.page-carte .carte-map-wrap {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important; min-width: 0 !important; /* bat un max-width hérité qui inset la carte */
  margin: 0 !important; padding: 0 !important; border-radius: 0 !important;
}
html.apprefonte body.page-carte #map {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; border-radius: 0 !important;
}

/* ── Masquage de l'ancien chrome empilé (fonctions relocalisées dans le calque) ─ */
/* Panneau gauche : caché par défaut ; réaffiché en FEUILLE quand on l'ouvre (JS). */
html.apprefonte body.page-carte .carte-left {
  display: none !important;
}
/* Barre d'actions mobile .carte-mact (Filtres/Distance/Zone/Ma position/Ajouter)
   = doublon des fonctions relocalisées → masquée (NON supprimée du DOM). */
html.apprefonte body.page-carte .carte-gardien--bar,
html.apprefonte body.page-carte .carte-mact,
html.apprefonte body.page-carte .carte-drawer-bar,
html.apprefonte body.page-carte .carte-legend,
html.apprefonte body.page-carte #mapResults {
  display: none !important;
}
/* Contrôle zoom Leaflet natif : masqué (remplacé par les contrôles maquette à droite). */
html.apprefonte body.page-carte .leaflet-control-zoom { display: none !important; }
html.apprefonte body.page-carte .leaflet-control-attribution {
  font-size: 9px !important; background: rgba(6,20,32,.55) !important; color: var(--ar-ink-soft) !important;
}

/* ── Carte BLEU NUIT (maquette) : filtre sombre sur les tuiles OSM réelles ─────
   On garde le VRAI moteur/tuiles ; on ne fait que re-teinter en sombre. Le filtre
   ne s'applique QU'aux tuiles (pas aux marqueurs/contrôles → couleurs préservées). */
html.apprefonte body.page-carte #map,
html.apprefonte body.page-carte .leaflet-container { background: #071626 !important; }
/* Teinte BLEU NUIT sur les tuiles « dark » (CartoDB Dark Matter, déjà sombres avec
   routes/tracés CLAIRS). On NE ré-assombrit PAS (sinon les tracés blancs disparaissent) :
   sepia+hue-rotate = teinte bleue ; brightness léger = garder les tracés visibles. */
html.apprefonte body.page-carte .leaflet-tile-pane {
  filter: sepia(1) hue-rotate(184deg) saturate(1.45) brightness(1.02) contrast(1.03);
}

/* ── Point « ma position » = pastille bleue lumineuse (comme la maquette) ─────── */
html.apprefonte body.page-carte .jart-me-marker > div { font-size: 0 !important; position: relative; filter: none !important; }
html.apprefonte body.page-carte .jart-me-marker > div::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: #2f9bff; border: 3px solid #fff;
  box-shadow: 0 0 0 8px rgba(47,155,255,.26), 0 0 0 16px rgba(47,155,255,.12);
}

/* ── Marqueurs de lieux : ombre douce lisible sur fond sombre ──────────────────*/
html.apprefonte body.page-carte .jart-marker > div { box-shadow: 0 3px 10px rgba(0,0,0,.5) !important; }

/* ═══════════ CALQUE MAQUETTE (injecté par zz-carte-app.js) ═══════════════════ */
/* Conteneur transparent : laisse passer les gestes carte ; enfants interactifs. */
html.apprefonte body.page-carte .fdcmap {
  display: block;
  position: absolute !important; inset: 0 !important;
  z-index: 500; pointer-events: none;
}
html.apprefonte body.page-carte .fdcmap > * { pointer-events: auto; }

/* ── Barre supérieure : recherche (pilule) ─────────────────────────────────── */
html.apprefonte .fdcmap-top {
  position: absolute; top: calc(10px + env(safe-area-inset-top,0px)); left: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
html.apprefonte .fdcmap-searchrow { display: flex; align-items: center; gap: 10px; }
/* Avatar membre (JU) à droite de la recherche — comme la maquette. */
html.apprefonte .fdcmap-avatar {
  width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
  border: 1px solid rgba(85,190,255,.72); border-radius: 50%;
  background: linear-gradient(145deg,#2489e8,#35aaff); color: #fff;
  font: 750 15px/1 'Inter',system-ui,sans-serif; text-decoration: none;
  box-shadow: 0 0 20px rgba(34,158,255,.22);
}
html.apprefonte .fdcmap-search {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-r-pill);
  background: rgba(9,26,42,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--ar-sh-card);
}
html.apprefonte .fdcmap-search svg.fdcmap-search-ico { width: 20px; height: 20px; flex: 0 0 auto; color: var(--ar-ink-soft); }
html.apprefonte .fdcmap-search input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  color: var(--ar-ink); font-size: 16px; /* ≥16 = pas de zoom iOS */
}
html.apprefonte .fdcmap-search input::placeholder { color: var(--ar-ink-soft); opacity: 1; }
html.apprefonte .fdcmap-search:focus-within { border-color: var(--ar-cyan); box-shadow: 0 0 0 2px var(--ar-cyan-40); }
html.apprefonte .fdcmap-clear {
  width: 30px; height: 30px; flex: 0 0 auto; display: none;
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ar-ink-soft); cursor: pointer;
}
html.apprefonte .fdcmap-clear.is-on { display: inline-flex; }
html.apprefonte .fdcmap-clear svg { width: 18px; height: 18px; }

/* ── Bande de filtres (Aires · Eau · Services · Voyageurs · Filtres) ────────── */
html.apprefonte .fdcmap-chips {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px; -webkit-overflow-scrolling: touch;
}
html.apprefonte .fdcmap-chips::-webkit-scrollbar { display: none; }
html.apprefonte .fdcmap-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; min-height: 44px; padding: 0 12px; /* cible tactile ≥44px */
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-r-pill);
  background: rgba(6,28,46,.90);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ar-ink-soft); font: 650 12.5px/1 'Inter',system-ui,sans-serif;
  white-space: nowrap; cursor: pointer; opacity: .82; transition: 150ms ease;
}
html.apprefonte .fdcmap-chip svg { width: 17px; height: 17px; flex: 0 0 auto; }
html.apprefonte .fdcmap-chip.is-on { opacity: 1; }
/* Encodage couleur par catégorie (maquette). */
html.apprefonte .fdcmap-chip[data-k="aire"]     svg { color: var(--m-blue); }
html.apprefonte .fdcmap-chip[data-k="eau"]      svg { color: var(--m-cyan); }
html.apprefonte .fdcmap-chip[data-k="services"] svg { color: var(--m-green); }
html.apprefonte .fdcmap-chip[data-k="members"]  svg { color: var(--m-orange); }
html.apprefonte .fdcmap-chip[data-k="aire"].is-on     { border-color: rgba(63,167,255,.55); color: #cfe7ff; }
html.apprefonte .fdcmap-chip[data-k="eau"].is-on      { border-color: rgba(37,228,237,.55); color: #b7f8fb; }
html.apprefonte .fdcmap-chip[data-k="services"].is-on { border-color: rgba(84,219,141,.5); color: #c3f6d8; }
html.apprefonte .fdcmap-chip[data-k="members"].is-on  { border-color: rgba(255,150,87,.5); color: #ffcfb2; }
html.apprefonte .fdcmap-chip.fdcmap-chip-more { color: var(--ar-ink); opacity: 1; }
html.apprefonte .fdcmap-chip.fdcmap-chip-more svg { color: var(--ar-ink); }
/* pastille « filtres actifs » sur le bouton Filtres */
html.apprefonte .fdcmap-chip-more .fdcmap-badge {
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--ar-cyan); color: var(--ar-on-accent);
  font: 700 10px/1 'Inter',system-ui,sans-serif;
}

/* ── Pilule rayon (haut-gauche, sous les chips) ────────────────────────────── */
html.apprefonte .fdcmap-radius {
  position: absolute; top: calc(10px + 46px + 8px + 44px + 10px); left: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--ar-cyan); border-radius: var(--ar-r-pill);
  background: rgba(4,29,45,.92); color: var(--ar-cyan);
  box-shadow: var(--ar-sh-card); font: 600 13px/1 'Inter',system-ui,sans-serif; cursor: pointer;
}
html.apprefonte .fdcmap-radius svg { width: 18px; height: 18px; }

/* ── Contrôles droite : localiser + zoom ───────────────────────────────────── */
html.apprefonte .fdcmap-side {
  position: absolute; right: 10px; bottom: 206px; /* au-dessus du bouton Ajouter + feuille repliée */
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
html.apprefonte .fdcmap-side button {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--ar-border); color: var(--ar-ink);
  background: rgba(9,20,32,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--ar-sh-card); cursor: pointer;
}
html.apprefonte .fdcmap-locate { border-radius: 50% !important; }
html.apprefonte .fdcmap-side svg { width: 22px; height: 22px; }
html.apprefonte .fdcmap-zoom { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ar-r-md); border: 1px solid var(--ar-border); }
html.apprefonte .fdcmap-zoom button { border: 0 !important; border-radius: 0 !important; }
html.apprefonte .fdcmap-zoom button + button { border-top: 1px solid var(--ar-hairline) !important; }

/* ── Bouton principal « Ajouter un lieu » (au-dessus de la feuille) ─────────── */
html.apprefonte .fdcmap-add {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 146px; /* juste au-dessus de la feuille résultats repliée (132px) */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; min-width: 172px; padding: 0 22px;
  border: 1px solid #4dd9ff; border-radius: var(--ar-r-pill);
  color: #fff; background: linear-gradient(180deg,#2fb8ff,#238eeb);
  box-shadow: 0 12px 28px rgba(20,132,224,.32);
  font: 750 14.5px/1 'Inter',system-ui,sans-serif; cursor: pointer;
}
html.apprefonte .fdcmap-add svg { width: 21px; height: 21px; }

/* Petit statut éphémère (repris de map.js .carte-status) — discret, centré haut. */
html.apprefonte body.page-carte .carte-status {
  position: absolute; z-index: 520; left: 50%; top: calc(10px + 46px + 8px + 44px + 56px);
  transform: translateX(-50%); max-width: 82%;
  margin: 0; padding: 6px 12px; border-radius: var(--ar-r-pill);
  border: 1px solid var(--ar-hairline); background: rgba(4,24,39,.85);
  color: var(--ar-ink-soft); font-size: 11px; text-align: center; pointer-events: none;
}
html.apprefonte body.page-carte .carte-status:empty { display: none; }
html.apprefonte body.page-carte .carte-status.err { color: #ffd0cc; border-color: var(--ar-danger); }
html.apprefonte body.page-carte .carte-status.ok  { color: #b9f6e6; border-color: var(--ar-cyan-40); }

/* ═══════════ FEUILLE RÉSULTATS = #carteRight restylé en bottom-sheet ════════ */
html.apprefonte body.page-carte .carte-right {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  top: auto !important;
  width: 100% !important; max-width: 100% !important;
  height: 46vh !important; max-height: 46vh !important;
  transform: none !important;
  display: flex !important; flex-direction: column !important;
  background: linear-gradient(180deg, rgba(13,34,51,.99), rgba(9,26,42,.99)) !important;
  border: 0 !important; border-top: 1px solid var(--ar-cyan-40) !important;
  border-radius: var(--ar-r-lg) var(--ar-r-lg) 0 0 !important;
  box-shadow: var(--ar-sh-sheet) !important;
  z-index: 510 !important;
  transition: height 240ms var(--ar-ease) !important;
  overflow: hidden !important;
}
/* Feuille réduite : n'affiche que la poignée + le compteur + la 1re fiche. */
html.apprefonte body.page-carte .carte-right.is-min {
  height: 132px !important; max-height: 132px !important;
}
/* SURCHARGE de l'ancien comportement « pastille fiche » mobile (carte.php l.942) :
   quand une fiche est ouverte + réduite, on GARDE la bottom-sheet (jamais une pastille
   flottante). Sélecteur avec :has(#…) pour battre la spécificité de la règle d'origine. */
html.apprefonte body.page-carte .carte-right.is-min:has(#carteDetail.is-open) {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100% !important; max-width: 100% !important; height: 132px !important; max-height: 132px !important;
  padding: 0 !important; overflow: hidden !important; z-index: 510 !important;
  border: 0 !important; border-top: 1px solid var(--ar-cyan-40) !important;
  border-radius: var(--ar-r-lg) var(--ar-r-lg) 0 0 !important;
  background: linear-gradient(180deg, rgba(13,34,51,.99), rgba(9,26,42,.99)) !important;
  box-shadow: var(--ar-sh-sheet) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* Ré-affiche la fiche + compteur (l'ancienne règle masquait tout sauf la poignée). */
html.apprefonte body.page-carte .carte-right.is-min:has(#carteDetail.is-open) > #carteDetail { display: block !important; }
html.apprefonte body.page-carte .carte-right.is-min:has(#carteDetail.is-open) > #fdcmapCount { display: block !important; }
/* La poignée reprend le style barre (annule le pill « Voir la fiche »). */
html.apprefonte body.page-carte .carte-right.is-min:has(#carteDetail.is-open) > .carte-right-grabber {
  position: relative !important; display: flex !important; flex-direction: row !important;
  width: 100% !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
html.apprefonte body.page-carte .carte-right.is-min:has(#carteDetail.is-open) > .carte-right-grabber .crg-bar { display: block !important; }
html.apprefonte body.page-carte .carte-right.is-min:has(#carteDetail.is-open) > .carte-right-grabber .crg-lbl { display: none !important; }
/* Poignée (drag) — barre cyan maquette. */
html.apprefonte body.page-carte .carte-right-grabber {
  flex: 0 0 auto !important; position: relative !important;
  display: flex !important; align-items: center; justify-content: center;
  height: 26px !important; padding: 0 !important; margin: 0 !important;
  background: transparent !important; border: 0 !important; cursor: pointer;
}
html.apprefonte body.page-carte .carte-right-grabber .crg-bar {
  width: 40px; height: 4px; border-radius: 999px; background: var(--ar-ink-soft) !important; box-shadow: none !important;
}
html.apprefonte body.page-carte .carte-right-grabber .crg-lbl { display: none !important; }
/* La zone de contenu défile sous la poignée. */
html.apprefonte body.page-carte #carteRightEmpty,
html.apprefonte body.page-carte #carteRightList,
html.apprefonte body.page-carte #carteDetail {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
html.apprefonte body.page-carte #carteRightEmpty { padding: 18px 16px !important; color: var(--ar-ink-soft) !important; text-align: center; }
/* Bandeau compteur « N lieux trouvés » injecté en tête de feuille (JS). */
html.apprefonte .fdcmap-count {
  display: block;
  flex: 0 0 auto; padding: 2px 16px 8px; margin: 0;
  color: var(--ar-ink-soft); font: 400 12.5px/1.2 'Inter',system-ui,sans-serif;
}
html.apprefonte .fdcmap-count strong { color: var(--ar-cyan); font-weight: 700; }

/* ═══════════ FEUILLE « FILTRES / DISTANCE » = #carteLeft en overlay ═════════ */
/* Quand JS ajoute .fdcmap-sheet-open sur body, on montre #carteLeft en feuille basse. */
html.apprefonte body.page-carte.fdcmap-left-open .carte-left {
  display: block !important;
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100% !important; max-width: 100% !important;
  max-height: 78vh !important; height: auto !important;
  overflow-y: auto !important;
  margin: 0 !important;
  background: var(--ar-surface) !important;
  border: 0 !important; border-top: 1px solid var(--ar-cyan-40) !important;
  border-radius: var(--ar-r-lg) var(--ar-r-lg) 0 0 !important;
  box-shadow: var(--ar-sh-sheet) !important;
  z-index: 1150 !important;
  padding: 8px 14px calc(20px + var(--ar-safe-b)) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Voile derrière la feuille filtres. */
html.apprefonte body.page-carte.fdcmap-left-open .fdcmap-scrim {
  position: fixed; inset: 0; z-index: 1140; background: rgba(0,7,13,.6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
html.apprefonte body.page-carte .fdcmap-scrim { display: none; }
/* En feuille : masquer la recherche interne (déjà relocalisée) et la barre pastilles. */
html.apprefonte body.page-carte.fdcmap-left-open .carte-left .carte-searchbar,
html.apprefonte body.page-carte.fdcmap-left-open .carte-left .carte-past,
html.apprefonte body.page-carte.fdcmap-left-open .carte-left .carte-drawer-close { display: none !important; }
/* Titre + bouton fermer de la feuille (injecté). */
html.apprefonte .fdcmap-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 2px 10px; position: sticky; top: 0; background: var(--ar-surface); z-index: 2;
}
html.apprefonte .fdcmap-sheet-head h2 { margin: 0; font: 700 18px/1.15 'Inter',system-ui,sans-serif; color: var(--ar-ink); }
html.apprefonte .fdcmap-sheet-close {
  width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--ar-border); border-radius: 50%; background: var(--ar-surface-2); color: var(--ar-ink); cursor: pointer;
}
html.apprefonte .fdcmap-sheet-close svg { width: 18px; height: 18px; }
/* Force l'ouverture des accordéons filtres+distance dans la feuille (déplie tout). */
html.apprefonte body.page-carte.fdcmap-left-open .carte-left .carte-acc-body { display: block !important; }

} /* fin @media ≤768px */

/* ═══════════════════════════════════════════════════════════════════════════════
   (17/09/2026, demande de Julien : « regarde cette carte, tout est illisible,
   remets bien comme la maquette ») — LE HAUT DE LA CARTE REDEVIENT LISIBLE.

   TROIS DÉFAUTS MESURÉS dans un cadre de 426 px (elementsFromPoint + rectangles) :

   1. LA BANNIÈRE PUBLICITAIRE ÉTAIT PAR-DESSUS LA RECHERCHE ET LES PASTILLES.
      Cause : plus haut dans ce fichier, .carte-shell passe en position:fixed. Le
      <main class="pub-content container"> ne fait alors plus que ~141 px de haut,
      et l'emplacement « carte.bottom » (carte.php, appelé en FIN de page, enfant
      DIRECT de ce <main>) se retrouve TOUT EN HAUT de l'écran. Ses enfants
      .ad-banner-body / .ad-cta portent z-index:1 : à égalité avec .carte-shell,
      l'ordre du document tranche, et l'annonce est écrite après → elle gagne.
      Mesuré : en (150,50) le titre de l'annonce est AU-DESSUS du champ de
      recherche ; en (150,95) son texte est AU-DESSUS des pastilles.
      ⚠ Le défaut n'est PAS propre à la publicité : TOUT enfant resté dans le flux
      de ce <main> atterrit au même pixel (aperçu admin des pubs, bandeau
      d'annonces du site, message de confirmation). On traite donc le <main>
      lui-même, pas le seul enfant du jour.

   2. LA BARRE DE RECHERCHE ÉTAIT TRONQUÉE. Le bouton « Retour » (fixed, en haut à
      gauche) et le menu ☰ (fixed, en haut à droite) partagent la ligne de la
      recherche : 58 px lui sont retirés à gauche (poussée automatique de
      includes/bouton-retour.php, qui évite de recouvrir un titre) et 64 px à
      droite (zzzzz-menu-fab-fix.css). Sur 426 px, il ne restait que 191 px de
      champ : « Rechercher une aire, une ville… » ne tenait pas.

   3. LES PASTILLES DE FILTRES ÉTAIENT ILLISIBLES ET FONT DOUBLON.
      Mesuré : une pastille non choisie cumule un fond à 90 % et une opacité de
      0,82 → 26 % de la carte transparaît au travers, et le nom d'une ville écrit
      sur la carte se mélangeait au texte de la pastille (« Nantes » derrière
      « Eau »). Elles débordaient aussi de 108 px.
      ⇒ DÉCISION DE JULIEN, 17/09 : « c'est la barre de recherche qui trouve
      tout » — la rangée entière est RETIRÉE. La carte gagne toute cette place.
      ⛔ Rien n'est supprimé : la rangée est seulement masquée, le script qui la
      construit et les filtres qu'elle commandait sont intacts. Retour arrière =
      supprimer la seule ligne « .fdcmap-chips { display:none } ».
      🔴 CE QUE ÇA EMPORTE, signalé à Julien : le bouton « Filtres » de cette
      rangée était la SEULE porte vers le panneau des filtres, de la distance et
      des zones sur téléphone (zz-carte-app.js, ligne 469 : openLeft n'est appelé
      que là). « Ajouter un lieu » et « Coup de propre » gardent leurs boutons.

   4. LE BOUTON « RETOUR » EST RETIRÉ DE LA CARTE (décision de Julien, 17/09 :
      « enlève »). Masqué sur cette page seulement — il reste entier partout
      ailleurs. On revient par la barre du bas et par le menu ☰.

   CORRECTIF : le haut de l'écran garde deux rangées — ligne 1 : le ☰ seul ·
   ligne 2 : la recherche sur TOUTE la largeur. Le bouton Retour parti, la
   poussée automatique des 58 px cesse d'elle-même (rien à désactiver).
   Et la publicité descend dans une bande qui lui est RÉSERVÉE, entre le bas de
   la carte et la barre de navigation : elle est enfin lisible, et elle ne peut
   plus rien recouvrir.

   MESURÉ APRÈS (cadre 426×896) : champ de recherche 191 → 313 px · pilule
   « 50 km » remontée juste sous la recherche · 0 px² de recouvrement entre la
   publicité, la feuille du bas, le bouton « Ajouter un lieu », les contrôles de
   droite, la recherche, le bouton Retour et le menu.

   ⚠ CE QUE CE BLOC NE FAIT PAS, et qui reste à décider : rendre le titre
   « Feu de camp numérique » et son logo en haut, poser la carte dans un cadre
   arrondi, ajouter la boussole « N ».

   100 % ADDITIF. Retour arrière = supprimer ce bloc. Même enveloppe d'écran que
   le reste du fichier : là où la carte passe en plein écran, et nulle part
   ailleurs. Ne touche NI le moteur de la carte, NI les lieux, NI les droits,
   NI le Gardien, NI le choix des annonces.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* ── 0) Le bouton « Retour » est retiré de la carte (décision de Julien,
         17/09 : « enlève »). Masqué ici SEULEMENT, sur la carte : il reste
         entier partout ailleurs, et son script cesse alors de pousser la
         barre de recherche. On revient par la barre du bas et par le menu.
         Retour arrière = supprimer cette seule ligne. ───────────────────────── */
  html.apprefonte body.page-carte .fdcn-retour { display: none !important; }

  /* ── 1) LA BARRE DE RECHERCHE REMONTE TOUT EN HAUT (Julien, 17/09 : « enlève
         le bouton ON et remonte la barre de recherche »).
         Elle partage de nouveau la ligne du ☰, et c'est possible parce que DEUX
         choses lui ont rendu de la place : le bouton « Retour » est retiré, et
         le rond « ON » aussi. Compté : 406 px de large, moins 64 réservés au ☰,
         il reste 342 px pour la pilule, donc ~284 px de champ — le texte
         « Rechercher une aire, une ville… » en demande 243. Il tient. ──────── */
  html.apprefonte body.page-carte .fdcmap-top {
    top: calc(10px + env(safe-area-inset-top, 0px));
  }
  /* On garde la place du ☰ à droite : il est de nouveau sur cette ligne. */
  html.apprefonte body.page-carte .fdcmap-searchrow { padding-right: 64px !important; }

  /* Le rond « ON » (le raccourci vers le passeport) est retiré de la carte :
     il mangeait 44 px sur la ligne de la recherche. ⛔ Masqué ici seulement — le
     passeport reste accessible par le menu, et rien n'est supprimé. */
  html.apprefonte body.page-carte .fdcmap-avatar { display: none !important; }

  /* ── 2) La rangée de pastilles est retirée (décision de Julien du 17/09). ── */
  html.apprefonte body.page-carte .fdcmap-chips { display: none !important; }

  /* Les deux repères ancrés en haut se recalent sous la seule recherche. */
  html.apprefonte body.page-carte .fdcmap-radius {
    top: calc(10px + 46px + 10px + env(safe-area-inset-top, 0px));
    background: #07293f !important;   /* plus de carte au travers */
  }
  html.apprefonte body.page-carte .carte-status {
    top: calc(10px + 46px + 10px + 44px + 12px + env(safe-area-inset-top, 0px));
  }

  /* La barre de recherche devient franchement opaque, pour la même raison. */
  html.apprefonte body.page-carte .fdcmap-search {
    background: #0a2136 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* ── (17/09, demande de Julien : « je veux plus du carré qui s'affiche quand on
        écrit ») PLUS DE CADRE CARRÉ PENDANT LA SAISIE.
        Dans l'application Android, dès que le clavier s'ouvre, le système dessine
        son propre cadre de focus autour du champ : un rectangle À ANGLES DROITS
        qui déborde de la pilule arrondie, et qui n'est pas joli.
        ⚠ Il ne vient PAS du site : mesuré dans un navigateur, tous les contours
        valent déjà « none ». On le neutralise donc largement, sur la barre de
        recherche de la carte SEULEMENT.
        ⛔ On ne supprime pas le repère de focus pour autant : la pilule s'éclaire
        en cyan quand on écrit dedans (règle :focus-within du lot), et ce repère-là
        est arrondi, propre, et suffit pour savoir où l'on tape. ───────────────── */
  html.apprefonte body.page-carte .fdcmap-searchrow,
  html.apprefonte body.page-carte .fdcmap-searchrow *,
  html.apprefonte body.page-carte .fdcmap-search,
  html.apprefonte body.page-carte .fdcmap-search * {
    outline: none !important;
    outline-offset: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  html.apprefonte body.page-carte .fdcmap-search input:focus,
  html.apprefonte body.page-carte .fdcmap-search input:focus-visible,
  html.apprefonte body.page-carte .fdcmap-search input:-webkit-direct-focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* ── 3) Une bande réservée sous la carte pour ce qui reste dans le flux ──── */

  /* Un seul nombre commande la réserve. 136 px couvrent les deux façons de
     dessiner une annonce : la bannière (117 px mesurés) et l'encart de régie
     (120 px annoncés + son cadre). */
  html.apprefonte body.page-carte { --fdcmap-adh: 136px; }

  /* Le contenu de page se pose en bas, au-dessus de la barre de navigation.
     z-index:0 : il reste TOUJOURS sous la carte (z-index:1) — si une annonce
     dépassait un jour la bande, elle glisserait DERRIÈRE la feuille du bas au
     lieu de la recouvrir. C'est aussi ce qui enferme les enfants en z-index:1
     de l'annonce, qui étaient la cause du défaut. */
  html.apprefonte body.page-carte main.pub-content {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: auto !important;
    bottom: calc(var(--ar-navh) + var(--ar-safe-b)) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 10px 8px !important;
    box-sizing: border-box !important;
    z-index: 0 !important;
  }
  html.apprefonte body.page-carte main.pub-content > .ad-slot-wrap { margin: 0 !important; }

  /* La carte ne se raccourcit QUE s'il y a vraiment quelque chose à montrer.
     Emplacement éteint ou vide → la page ne rend rien → la carte garde toute sa
     hauteur d'avant. Les quatre cas : la publicité, l'aperçu admin des publicités
     (?adpreview=1, qui emboîte le bloc dans .adprev-anchor), le bandeau
     d'annonces du site, et un message de confirmation. */
  html.apprefonte body.page-carte:has(main.pub-content > .ad-slot-wrap),
  html.apprefonte body.page-carte:has(main.pub-content > .adprev-anchor),
  html.apprefonte body.page-carte:has(main.pub-content > .ann-banner-wrap),
  html.apprefonte body.page-carte:has(main.pub-content > .flash) {
    --fdcmap-bot: calc(var(--ar-navh) + var(--ar-safe-b) + var(--fdcmap-adh));
  }
}