/* carte.css — page /carte (carte interactive + liste synchronisée) */
.carte-page { padding: 24px var(--container-padding) 60px; }
.carte-page__head { margin-bottom: 16px; }

.carte-filters {
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--bordure); border-radius: 14px; padding: 14px 18px; margin-bottom: 18px;
}
.carte-filter { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; font-weight: 800; color: var(--vert-primaire); }
.carte-filter select {
  border: 1.5px solid var(--bordure-input); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 15.5px;
  color: var(--texte-principal); background: #fff; min-width: 160px;
}
.carte-filter__list-link {
  margin-left: auto; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15.5px;
  color: var(--vert-primaire); text-decoration: none;
}
.carte-filter__list-link:hover { text-decoration: underline; }

.carte-layout { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.carte-map {
  height: 640px; border-radius: 16px; overflow: hidden; border: 1px solid var(--bordure);
  box-shadow: var(--shadow-card);
}
.carte-results {
  background: #fff; border: 1px solid var(--bordure); border-radius: 16px; padding: 14px;
  height: 640px; display: flex; flex-direction: column;
}
.carte-results__count { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--texte-secondaire); }
.carte-results__list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.carte-result-card {
  display: flex; gap: 16px; align-items: center; padding: 10px; border-radius: 12px;
  text-decoration: none; color: inherit; border: 1px solid transparent;
}
.carte-result-card:hover { background: var(--vert-pale); border-color: var(--bordure); }
.carte-result-card__img { width: 156px; height: 130px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; background: var(--beige-fond); }
.carte-result-card__img--ph { display: flex; align-items: center; justify-content: center; }
.carte-result-card__img--ph i, .carte-result-card__img--ph svg { width: 18px; height: 18px; color: var(--texte-gris-clair); }
.carte-result-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carte-result-card__body strong { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-result-card__stars { font-size: 13px; color: var(--orange); letter-spacing: 1px; }
.carte-result-card__city { font-size: 14px; color: var(--texte-secondaire); }
.carte-result-card__meta { font-size: 14px; color: var(--texte-secondaire); font-weight: 600; }
.carte-result-card__meta strong { color: var(--vert-fonce); }
.carte-result-card__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.carte-result-card__body { flex: 1 1 auto; }
.carte-result-card__cta {
  flex: 0 0 auto; align-self: center; margin-left: 12px; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--vert-primaire);
  color: var(--vert-primaire); font-weight: 700; font-size: 14px; transition: .15s;
}
.carte-result-card:hover .carte-result-card__cta { background: var(--vert-primaire); color: #fff; }
@media (max-width: 640px) { .carte-result-card__cta { display: none; } }
.carte-result-card__chip { padding: 2px 8px; font-size: 12.5px; }

.carte-popup { min-width: 160px; }
.cmc-marker { background: transparent; border: none; }
/* 1 doigt = scroll la page, 2 doigts = deplace la carte (mobile) */
.carte-map.leaflet-container, .map-embed-block.leaflet-container { touch-action: pan-y !important; }

/* Indice "Ctrl + molette pour zoomer" (carte accueil : la molette seule doit scroller la page). */
.carte-map__hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%) translateY(-6px);
  background: rgba(31, 41, 33, .82); color: #fff; font-size: 14.5px; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s; z-index: 500;
}
.carte-map__hint.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .carte-layout { grid-template-columns: 1fr; }
  .carte-map { height: 420px; }
  .carte-results { height: 360px; }
}

/* ── Étape 1 : sélection de région (réutilise .regions-layout/.france-map/.region-chip de main.css) ── */
#carte-region-picker { margin-bottom: 8px; }

/* ── Étape 2 : entête (région choisie + retour) ── */
.carte-explore__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.carte-back-btn {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--bordure-input);
  border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 15px; font-weight: 700;
  color: var(--vert-primaire); cursor: pointer;
}
.carte-back-btn:hover { border-color: var(--vert-primaire); background: var(--vert-pale); }
.carte-back-btn svg, .carte-back-btn i { width: 15px; height: 15px; }
.carte-current-region { font-size: 22px; font-weight: 800; font-family: 'Bitter', serif; color: var(--vert-fonce); }

.carte-filter--equip { flex: 1 1 auto; }
.carte-filter__equip-list { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.check--sm { margin-bottom: 0; font-size: 14.5px; font-weight: 600; }
.check--sm .check__box { width: 15px; height: 15px; }
.check--sm .check__box svg { width: 9px; height: 9px; }

/* ── Filtre région = carte de France cliquable, dans la sidebar de /campings ── */
.france-map-wrap--filter { padding: 10px; margin-bottom: 8px; }
.france-map-wrap--filter .france-map { max-height: 200px; }
.france-map-wrap--filter .france-map-hint { font-size: 12px; padding: 3px 8px; bottom: 8px; right: 10px; }
.fr-region.is-selected path { fill: var(--orange); }
.region-selected-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.region-chip-mini {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700;
  color: var(--vert-primaire); background: var(--vert-pale); border-radius: 999px; padding: 5px 10px;
}
.region-chip-mini svg, .region-chip-mini i { width: 12px; height: 12px; flex: 0 0 auto; }
.region-chip-mini__x {
  border: none; background: none; cursor: pointer; color: var(--texte-secondaire);
  font-size: 14px; line-height: 1; padding: 0; margin-left: 2px;
}
.region-chip-mini__x:hover { color: #b3261e; }

/* ── Carte embarquée dans la grille de résultats de /campings (2 premières places) ── */
.map-embed-block .leaflet-popup-content-wrapper { border-radius: 10px; }
/* Isole le contexte d'empilement : les calques internes de Leaflet (z-index jusqu'à 1000)
   ne doivent pas passer par-dessus le header sticky du site (z-index 30). */
.map-embed-block, .carte-map { position: relative; z-index: 1; isolation: isolate; }

/* ── Variante page d'accueil : carte + liste sous "Campings à la une", pleine largeur ── */
.section--edge { max-width: none; padding-left: 0; padding-right: 0; }
.carte-layout--home {
  grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
  max-width: none; margin: 0;
}
.carte-map--home, .carte-results--home { height: 760px; min-height: 760px; border-radius: 0; box-shadow: none; }
.carte-results--home { border: none; border-right: 1px solid var(--bordure); padding: 18px var(--container-padding) 18px min(calc((100vw / var(--ui-zoom) - var(--container-max)) / 2 + var(--container-padding)), 56px); }
.carte-map--home { border: none; }
@media (max-width: 1180px) {
  .carte-results--home { padding-left: var(--container-padding); }
}
@media (max-width: 900px) {
  /* Mobile : la liste passait AVANT la carte dans une zone de 420px a defilement interne
     (deux ascenseurs imbriques, la carte annoncee par le titre n'apparaissait qu'apres).
     On remonte la carte, et la liste coule dans la page, limitee aux 4 premieres fiches
     (le lien "Carte plein ecran" de l'entete donne acces a la totalite). */
  .carte-layout--home { grid-template-columns: 1fr; }
  .carte-map--home { order: -1; height: 340px; min-height: 340px; }
  .carte-results--home {
    height: auto; min-height: 0; border-right: none; border-top: 1px solid var(--bordure);
    padding: 14px var(--container-padding) 4px;
  }
  .carte-results--home .carte-results__list { overflow: visible; }
  .carte-results--home .carte-result-card:nth-child(n+5) { display: none; }
  .carte-result-card__img { width: 116px; height: 96px; }
}

/* Traits blancs entre tuiles OpenStreetMap : Leaflet applique lui-même mix-blend-mode:
   plus-lighter sur les tuiles (correctif pour un bug Chrome ailleurs) qui, sur ce fond de
   carte clair, fait ressortir des liserés blancs aux jonctions. On le neutralise. */
.leaflet-container img.leaflet-tile { mix-blend-mode: normal !important; }

/* Vignette des resultats : porte le badge region (meme principe que les cartes de la home). */
.carte-result-card__media { position: relative; flex: 0 0 auto; display: block; line-height: 0; }
.carte-result-card__media .badge--region { top: 8px; left: 8px; font-size: 11px; padding: 3px 8px; line-height: 1.3; }


/* Liseres blancs restants aux jonctions de tuiles (deja presents avant le passage du site a
   80 %) : le navigateur arrondit les positions sous-pixel des tuiles et laisse un trait d'un
   pixel entre elles. On les fait legerement se chevaucher — leurs positions ne changent pas. */
.leaflet-container img.leaflet-tile { width: 258px !important; height: 258px !important; }

/* Carte interactive integree au listing /campings : bloc a part entiere de la grille de
   mise en page (cf. .listing-layout dans forms.css). */
.map-embed-block { height: 340px; min-height: 340px; border-radius: 16px; overflow: hidden; border: 1px solid #ECEAE2; background: #EEF4EF; }

/* Bouton de renvoi vers le listing complet sous la liste de la carte. */
.carte-results__all { margin-top: 14px; }

/* Carte du listing (MapLibre) : bulle facon Airbnb, coins arrondis, sans marge */
#carte-embed-map .maplibregl-popup-content { padding: 0; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.18); overflow: hidden; }
#carte-embed-map .maplibregl-popup-close-button { font-size: 18px; width: 26px; height: 26px; background: #fff; border-radius: 50%; top: 6px; right: 6px; }