/* ============================================================
   PHUKET360 — carte.css
   Carte interactive : layout, markers, panneau, filtres
   DM Sans (corps), Barlow Condensed (titres)
   ============================================================ */

/* ---- Page plein écran ---- */
.carte-seo-h1 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.page-carte body,
body.page-carte {
  overflow: hidden;
}

body.page-carte {
  padding-bottom: 0 !important;
}

/* Le grand footer marketing n'a pas sa place sur la carte plein écran */
body.page-carte #site-footer {
  display: none;
}

/* Attribution Leaflet/OSM/CARTO : conservee (licence), mais discrete */
body.page-carte .leaflet-control-attribution {
  font-size: 0.6rem;
  color: #aaa;
  background: rgba(255, 255, 255, 0.55);
  padding: 1px 5px;
  line-height: 1.4;
}
body.page-carte .leaflet-control-attribution a {
  color: #999;
}

/* Bottom nav compacte sur la page carte (mobile) */
@media (max-width: 767px) {
  body.page-carte #mobile-bottom-nav {
    height: 48px !important;
  }
  body.page-carte .mobile-nav-icon,
  body.page-carte .mobile-nav-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  body.page-carte .mobile-nav-label {
    font-size: 10px !important;
  }
}

/* Wrapper global : la carte occupe toute la hauteur, les controles flottent dessus */
.p360-carte-wrapper {
  position: relative;
  width: 100%;
  height: calc(100vh - 140px);
  min-height: 400px;
}

/* ---- Carte Leaflet : plein cadre, derriere les controles flottants ---- */
.p360-carte-body {
  position: absolute;
  inset: 0;
  z-index: 1;
}
#p360-map {
  width: 100%;
  height: 100%;
}

/* ---- Controles flottants (verre depoli) : topbar + chips + subchips ---- */
.p360-controls-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 15;
}

/* Décale le zoom Leaflet sous les controles flottants (topbar + une seule rangee de
   chips, subchips inclus, ~105px) pour qu'il reste accessible. */
.leaflet-top.leaflet-left {
  margin-top: 110px;
}

/* ---- Barre de filtres ---- */
#p360-topbar {
  position: relative;
  z-index: 20;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(232, 234, 237, 0.8);
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 48px;
  overflow: hidden;
}

/* Wrapper : prend la place flex et porte le dégradé sur mobile */
.p360-filtres-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 767px) {
  .p360-filtres-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, #fff);
    pointer-events: none;
    z-index: 1;
  }
}

#p360-map_filtres {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
}
#p360-map_filtres::-webkit-scrollbar { display: none; }

.p360-filtre-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 5px 12px;
  border: 1.5px solid #d0d5dd;
  border-radius: 20px;
  background: #fff;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.p360-filtre-btn:hover {
  border-color: var(--ocean);
  color: var(--ocean);
}
.p360-filtre-btn.tout {
  background: var(--emeraude);
  color: #fff;
  border-color: var(--emeraude);
}
.p360-filtre-btn.actif > span {
  color: #fff !important;
}
.p360-filtre-btn.actif svg {
  stroke: #fff !important;
}

/* Outils (géoloc + recherche) */
.p360-topbar-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  flex-shrink: 0;
  border-left: 1px solid #e8eaed;
}

.p360-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: none;
  border: 1.5px solid #d0d5dd;
  border-radius: 20px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.p360-tool-btn:hover,
.p360-tool-btn.actif {
  border-color: var(--ocean);
  color: var(--ocean);
}
.p360-tool-btn svg { flex-shrink: 0; }

/* Recherche */
#p360-map_search_wrapper {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid #e8eaed;
  padding: 8px 12px;
}
#p360-map_search_wrapper.p360-search-collapsed { display: none; }
#p360-map_search_wrapper.p360-search-open { display: flex; align-items: center; gap: 6px; }

/* Bouton fermer recherche (desktop uniquement) */
.p360-search-close {
  display: none;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-light);
  border-radius: 4px;
  transition: color 0.15s;
  line-height: 0;
}
.p360-search-close:hover { color: var(--text); }
#p360-map_search_wrapper.p360-search-open .p360-search-close { display: flex; align-items: center; }

.p360-search-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 8px 14px;
  border: 1.5px solid #d0d5dd;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  outline: none;
  background: #fff;
}
.p360-search-input:focus { border-color: var(--ocean); }

.p360-search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  list-style: none;
  padding: 0; margin: 0;
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  display: none;
  max-height: 260px;
  overflow-y: auto;
}
.p360-search-suggestions.open { display: block; }

.p360-search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.12s;
}
.p360-search-suggestion-item:hover,
.p360-search-suggestion-item.actif { background: var(--sable); }

.p360-search-suggestion-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.p360-search-suggestion-nom {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ocean-deep);
}
.p360-search-suggestion-type {
  display: block;
  font-size: 0.75rem;
  color: var(--text-light);
}
.p360-search-aucun {
  padding: 12px 14px;
  color: var(--text-light);
  font-size: 0.85rem;
}

/* ---- Sélecteur rayon ---- */
.p360-rayon-wrapper {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  /* Au-dessus du panneau lieu (z-index 300) : sur mobile, le panneau "Autour de moi"
     est un bottom sheet qui recouvre entierement cette zone ; le selecteur doit flotter
     par-dessus pour rester visible et cliquable pendant la consultation. */
  z-index: 310;
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 24px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.p360-rayon-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-light);
}
.p360-rayon-btn {
  padding: 4px 10px;
  border: 1.5px solid #d0d5dd;
  border-radius: 14px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.p360-rayon-btn.actif {
  background: var(--ocean);
  color: #fff;
  border-color: var(--ocean);
}

/* ---- Markers ---- */
.p360-marker-icon {
  width: 36px; height: 36px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  border: 2px solid rgba(255,255,255,0.9);
}
.p360-marker-icon > * {
  transform: rotate(45deg);
  display: flex; align-items: center; justify-content: center;
}
.p360-marker-icon svg { transform: rotate(45deg); }
.p360-marker-actif {
  width: 44px; height: 44px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.35);
  border-width: 3px;
}
.p360-marker-premium {
  width: 44px; height: 44px;
  border-color: var(--soleil);
  box-shadow: 0 0 0 2px rgba(240,180,41,.55), 0 3px 10px rgba(0,0,0,.35);
}
.p360-marker-actif.p360-marker-premium {
  width: 52px; height: 52px;
  box-shadow: 0 0 0 3px rgba(240,180,41,.6), 0 3px 14px rgba(0,0,0,.4);
}

/* Marqueur d'exception : lieu ouvert hors du filtre actif ("A proximite" / recherche).
   Halo bleu discret pour signaler qu'il sort du filtre courant, sans toucher au filtre
   lui-meme. Double anneau si le lieu est aussi incontournable (halo dore + halo bleu). */
.p360-marker-exception {
  box-shadow: 0 0 0 3px rgba(46,134,193,.6), 0 3px 14px rgba(0,0,0,.35);
}
.p360-marker-exception.p360-marker-premium {
  box-shadow: 0 0 0 2px rgba(240,180,41,.55), 0 0 0 5px rgba(46,134,193,.6), 0 3px 10px rgba(0,0,0,.35);
}

/* ---- Clusters avec icône catégorie dominante ---- */
.p360-cluster {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  border: 3px solid rgba(255,255,255,0.85);
  position: relative;
}
.p360-cluster-icon {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
}
.p360-cluster-icon svg { width: 20px; height: 20px; }
.p360-cluster-count {
  position: absolute;
  top: -5px; right: -5px;
  background: #fff;
  color: #0D1B2A;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  line-height: 1;
}

/* ---- Bouton Partager ---- */
.p360-btn-partager {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 16px;
  border: 1.5px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s, color 0.15s;
}
.p360-btn-partager:hover { border-color: var(--ocean); color: var(--ocean); }
.p360-btn-partager svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---- Overlay panneau ----
   Purement visuel (pointer-events: none) : la carte reste cliquable et zoomable
   meme quand l'overlay assombrit (etat complet). Fermeture = tap sur la carte. */
.p360-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.p360-overlay.open {
  display: block;
  opacity: 1;
}

/* ---- Panneau lieu — mobile (bottom sheet) ----
   48px = hauteur reelle de la nav mobile compacte sur cette page (cf body.page-carte
   #mobile-bottom-nav plus haut). max-height en 100dvh (pas 100vh, qui se base sur le
   plus grand viewport possible et ignore la barre d'adresse mobile reelle) : le panneau
   ne peut plus jamais depasser l'ecran visible ni laisser un vide au-dessus de la nav.
   Le contenu scrolle a l'interieur (.p360-panel-content), le panneau lui ne grandit pas. */
#p360-panel {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(48px + env(safe-area-inset-bottom));
  height: 65vh;
  max-height: calc(100dvh - 48px - env(safe-area-inset-bottom) - 16px);
  background: #fff;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}
#p360-panel.open {
  transform: translateY(0);
}
/* État agrandi ("Lire la suite") : remplit tout l'espace disponible sous les 16px de
   marge haute, jamais au-dela — c'est le contenu qui scrolle, pas le panneau qui grandit.
   bottom repasse a la seule safe-area (pas les 48px de la nav mobile) : en plein ecran,
   setPanelState() masque la nav (display:none), donc plus rien a reserver pour elle en
   bas. Sans ca, la place de la nav restait vide une fois celle-ci masquee. */
#p360-panel.fullscreen {
  bottom: env(safe-area-inset-bottom);
  height: calc(100dvh - env(safe-area-inset-bottom) - 16px);
}

/* Handle iOS-style */
.p360-panel-handle {
  width: 40px; height: 4px;
  background: #d0d5dd;
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

.p360-panel-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f2f4f7;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}
.p360-panel-close.visible { opacity: 1; }
.p360-panel-close:hover { background: #e8eaed; }

.p360-panel-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Contenu panneau ---- */
.p360-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
/* Pas de photo : le corps démarre directement, un peu plus d'air en haut
   pour laisser la place au bouton fermer. Ne s'applique plus quand le repli
   neutre d'un hébergement est present : .p360-body n'est alors plus le
   premier enfant, ce repli occupe deja l'espace visuel du haut. */
.p360-body:first-child {
  padding-top: 40px;
}

/* Repli neutre d'un hébergement sans photo (cf m.est_hebergement dans
   assets/js/carte.js) : jamais pour un lieu touristique. */
.p360-photo-absente {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef1f4;
}
.p360-photo-absente svg {
  width: 40px;
  height: 40px;
  color: #b7c0cb;
}

.p360-body {
  padding: 16px 16px 32px;
}
.p360-header,
.p360-header-compact {
  margin-bottom: 8px;
}
.p360-titre {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ocean-deep);
  margin: 0;
  line-height: 1.2;
}
/* Extrait description (compact uniquement) : tronqué à 2 lignes, cliquable (ouvre le detail) */
.p360-desc-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
  margin: 6px 0 0;
  cursor: pointer;
}
#p360-panel.fullscreen .p360-desc-excerpt { display: none; }

/* Prix et badge d'un marqueur hébergement (cf m.est_hebergement dans
   assets/js/carte.js), juste sous la zone/type. Jamais presents pour un lieu
   touristique : m.prix_texte/m.visite_sur_place ne sont fournis que par le
   bloc hébergements de api/lieux.php. */
.p360-hebergement-prix {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ocean-deep);
  margin: 8px 0 0;
}
/* Second montant indicatif, sous le prix reellement facture */
.p360-hebergement-prix-equivalent {
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 2px 0 0;
}
.p360-hebergement-prix--absent {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-light);
}
.p360-hebergement-badge-visite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(23, 165, 137, 0.12);
  color: var(--emeraude);
  border: 1.5px solid var(--emeraude);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  margin: 8px 0 0;
  white-space: nowrap;
}
.p360-hebergement-badge-visite svg { width: 14px; height: 14px; }

.p360-infos-compact { margin: 10px 0 0; }
#p360-panel.fullscreen .p360-infos-compact { display: none; }
.p360-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
}
.p360-tags-row > * { flex-shrink: 0; }
.p360-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.p360-badge-ouvert {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  background: #d4edda;
  color: #155724;
  font-size: 0.72rem;
  font-weight: 700;
}
.p360-badge-ferme {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  background: #f8d7da;
  color: #721c24;
  font-size: 0.72rem;
  font-weight: 700;
}
.p360-desc {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 16px;
}

/* Description longue d'un hébergement (cf m.est_hebergement dans
   assets/js/carte.js), entre la ligne zone/type et "À proximité". Coupure
   propre a 4 lignes, le bouton "Voir le logement" menant a la fiche complete
   pour lire la suite. Jamais presente pour un lieu touristique. */
.p360-hebergement-description {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 16px;
}

/* Mini semaine */
.p360-semaine {
  display: flex;
  gap: 5px;
  margin: 10px 0 14px;
}
.p360-semaine-jour {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--emeraude);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.p360-semaine-jour.ferme {
  background: #fee2e2;
  color: #dc2626;
}

/* Chips */
.p360-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.p360-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--sable);
  color: var(--text);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
}
.p360-info-chip i, .p360-info-chip svg { flex-shrink: 0; }

/* Badge affluence */
.p360-badge-foule {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
}
.p360-foule-row { margin: 0 0 16px; }

/* Bloc horaires */
.p360-horaires-bloc { margin-bottom: 16px; }
.p360-horaires-today {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 6px;
}

/* Saison */
.p360-saison { margin-bottom: 16px; }
.p360-saison-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0;
  margin-bottom: 7px;
}
.p360-saison-mois { display: flex; flex-wrap: wrap; gap: 5px; }
.p360-saison-chip {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #f2f4f7;
  color: var(--text-light);
}
.p360-saison-chip.reco { background: var(--emeraude); color: #fff; }

/* Transport */
.p360-transport {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--sable);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 14px;
}

/* Conseil terrain */
.p360-conseil {
  background: #fffbeb;
  border-left: 3px solid var(--soleil);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
}
.p360-conseil-photo {
  background: #f0f7ff;
  border-left-color: var(--ocean-light);
}
.p360-conseil-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--ocean-deep);
  font-size: 0.8rem;
  margin-bottom: 5px;
}

/* Site web */
.p360-website-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--ocean);
  text-decoration: none;
  font-weight: 600;
  margin: 4px 0 16px;
}
.p360-website-link:hover { text-decoration: underline; }

/* Boutons actions — style unifié */
.p360-btns-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.p360-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.81rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.p360-btn-action:hover { border-color: var(--ocean); color: var(--ocean); text-decoration: none; }
/* Favori : discret par defaut, ne concurrence pas Itineraire */
.p360-btn-favori {
  border-color: #e8eaed;
  color: var(--text-light);
  background: transparent;
}
.p360-btn-favori:hover { border-color: var(--ocean); color: var(--ocean); }
.p360-btn-action.p360-btn-favori.actif {
  border-color: #E63946;
  color: #E63946;
}

/* Itinéraire = action principale, mais sobre : contour couleur du site, pas d'aplat */
.p360-btn-maps {
  flex: 1;
  justify-content: center;
  background: transparent;
  border-color: var(--ocean);
  color: var(--ocean);
}
.p360-btn-maps:hover {
  background: var(--sable);
  border-color: var(--ocean-deep);
  color: var(--ocean-deep);
}

/* Réserver = action principale quand un lien de réservation existe : seul
   aplat de la ligne, pour se distinguer d'Itinéraire resté en contour.
   Ligne dédiée pleine largeur, Itinéraire et Favori gardent la leur. */
.p360-btn-reserver {
  width: 100%;
  justify-content: center;
  background: var(--emeraude);
  border-color: var(--emeraude);
  color: #fff;
}
.p360-btn-reserver:hover {
  background: color-mix(in srgb, var(--emeraude) 85%, #000);
  border-color: color-mix(in srgb, var(--emeraude) 85%, #000);
  color: #fff;
}
/* Écart resserré sous Réserver : les deux rangées se lisent comme un seul
   bloc d'actions, pas comme deux groupes sans rapport. */
.p360-btns-row--reserver { margin-bottom: 6px; }

/* Rangée « Lire l'article » + « Itinéraire » : les deux boutons partagent la
   largeur à parts égales. Le libellé passe sur deux lignes plutôt que d'être
   coupé sur les écrans les plus étroits. Seul dans la rangée, Itinéraire
   retrouve exactement le flex:1 défini plus haut. */
.p360-btns-row--duo > .p360-btn-action {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

/* Barre "Voir tout le detail" (compact <-> complet), pleine largeur, discrète */
.p360-btn-voir-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 0;
  margin-top: 10px;
  border: none;
  border-radius: 10px;
  background: var(--sable);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.p360-btn-voir-detail:hover { color: var(--ocean); }
.p360-btn-voir-detail svg { transition: transform 0.2s; }
.p360-btn-voir-detail.ouvert svg { transform: rotate(180deg); }

/* ---- Panneau : compact (toujours visible) / complet (fullscreen uniquement) ---- */
.p360-more { display: none; }
#p360-panel.fullscreen .p360-more { display: block; }

/* Respiration régulière entre les grands blocs (éditorial, pratique, proximité, boutons) */
.p360-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #eef0f2;
}
.p360-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Desktop : ouverture directe en complet, l'extrait et la barre ne servent à rien */
@media (min-width: 768px) {
  .p360-desc-excerpt,
  .p360-infos-compact,
  .p360-btn-voir-detail { display: none; }
}

/* Signaler une info obsolète */
.p360-btn-signaler {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--text-light);
  text-decoration: underline;
}
.p360-btn-signaler:hover { color: var(--text); }

/* Proximité */
.p360-proximite {
  margin-top: 0;
}
.p360-proximite-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.p360-proximite-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
  margin-bottom: 4px;
}
.p360-proximite-item:hover { background: var(--sable); }
.p360-proximite-item-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.p360-proximite-item-nom {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ocean-deep);
}
.p360-proximite-item-dist {
  display: block;
  font-size: 0.72rem;
  color: var(--text-light);
}
.p360-proximite-premier {
  border-radius: 8px;
}

/* Filtres Autour de moi */
.p360-autour-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 14px;
}
.p360-autour-filtre-btn {
  padding: 4px 12px;
  border: 1.5px solid #d0d5dd;
  border-radius: 16px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.p360-autour-filtre-btn.actif {
  border-color: var(--ocean);
  color: var(--ocean);
}

/* Favoris */
.p360-fav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f4f7;
}
.p360-fav-suppr {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 8px;
  border-radius: 4px;
}
.p360-fav-suppr:hover { color: #C0392B; background: #fdf2f2; }

/* ============================================================
   DESKTOP (>= 768px)
   ============================================================ */
@media (min-width: 768px) {
  /* Seule la barre du haut du site (header-height) doit etre reservee :
     l'ancien -120px incluait 56px pour le footer, maintenant masque sur cette page. */
  .p360-carte-wrapper {
    height: calc(100vh - var(--header-height));
  }

  /* Panneau latéral plein hauteur, collé en haut / bas / droite de la zone carte
     (positionné par rapport à .p360-carte-wrapper, son ancêtre positionné). */
  #p360-panel {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    width: 380px;
    height: auto;
    max-height: none;
    /* Coins droits côté bord (haut-droite, bas-droite), arrondis côté intérieur uniquement */
    border-radius: 16px 0 0 16px;
    transform: translateX(120%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -6px 0 24px rgba(0,0,0,0.15);
  }
  #p360-panel.open {
    transform: translateX(0);
  }

  .p360-panel-handle { display: none; }

  .p360-panel-close {
    opacity: 1;
    background: none;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
  }
  .p360-panel-close.visible { opacity: 1; }

  .p360-photo { height: 220px; }

  /* Recherche toujours visible, inline, 220px à droite */
  #p360-map_search_wrapper,
  #p360-map_search_wrapper.p360-search-collapsed {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: 220px;
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1.5px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
  }
  #p360-map_search_wrapper:focus-within { border-color: var(--ocean); }

  #p360-topbar {
    overflow: visible !important;
  }

  #p360-map_search_toggle { display: none; }
  .p360-search-close      { display: none !important; }

  .p360-filtre-btn { font-size: 0.8rem; }

  .p360-rayon-wrapper {
    bottom: 90px;
  }
}

/* ============================================================
   MOBILE — Hauteur wrapper carte
   Pas de header site sur mobile (display:none), seule la nav du bas
   (compactée a 48px sur cette page) doit être réservée.
   ============================================================ */
@media (max-width: 767px) {
  body.page-carte .p360-carte-wrapper {
    height: calc(100vh - 48px);
  }
}

/* ============================================================
   MOBILE — Topbar refonte + panel states
   ============================================================ */

/* Topbar mobile : caché sur desktop */
#p360-topbar-mobile { display: none; }

@media (max-width: 767px) {
  /* Masquer les éléments desktop dans la topbar */
  .p360-filtres-wrap,
  .p360-topbar-tools,
  #p360-map_search_wrapper,
  #p360-btn-filtres-sheet { display: none !important; }

  /* Topbar overflow visible pour les suggestions */
  #p360-topbar { overflow: visible; }

  /* Topbar mobile : 3 éléments sur une ligne */
  #p360-topbar-mobile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    width: 100%;
    height: 48px;
    position: relative;
    overflow: visible;
  }

  /* Bouton Filtres */
  .p360-mobile-filtres-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1.5px solid #d0d5dd;
    border-radius: 20px;
    background: #fff;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s;
  }
  .p360-mobile-filtres-btn:hover { border-color: var(--ocean); color: var(--ocean); }

  /* Zone de recherche flex:1 */
  #p360-mobile-search-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
  }
  #p360-mobile-search-wrap .p360-search-input {
    width: 100%;
    font-size: 0.82rem;
    padding: 6px 10px;
    height: 34px;
  }
  #p360-mobile-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0; right: 0;
    z-index: 9999;
    margin: 0;
    border-radius: 0 0 8px 8px;
  }

  /* Bouton géoloc rond 36x36 */
  .p360-mobile-geoloc-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid #d0d5dd;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text);
    transition: border-color 0.15s, color 0.15s;
  }
  .p360-mobile-geoloc-btn:hover,
  .p360-mobile-geoloc-btn.actif { border-color: var(--ocean); color: var(--ocean); }

  /* Panel états partial / fullscreen. bottom explicite : la regle .fullscreen mobile
     (meme specificite, cf plus haut) doit etre re-annulee ici, sinon elle l'emporterait
     aussi sur desktop (specificite egale a #p360-panel seul, qui met deja bottom:0). */
  #p360-panel.fullscreen { height: 95vh; bottom: 0; }
  .p360-panel-handle { cursor: pointer; }
}

/* Bouton "Filtres" injecté par JS — caché par défaut (remplacé par topbar mobile) */
#p360-btn-filtres-sheet { display: none; }

.p360-filtres-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ocean);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
}

/* ============================================================
   MOBILE — Bottom sheet filtres
   ============================================================ */
#p360-sheet-filtres {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 600;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#p360-sheet-filtres.open { transform: translateY(0); }

.p360-sheet-handle {
  width: 40px; height: 4px;
  background: #d0d5dd;
  border-radius: 2px;
  margin: 12px auto 0;
}
.p360-sheet-header {
  padding: 12px 20px 8px;
  border-bottom: 1px solid #f2f4f7;
}
.p360-sheet-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ocean-deep);
}
.p360-sheet-body { padding: 16px; }

.p360-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.p360-sheet-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  border: 1.5px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: center;
  color: var(--text);
}
.p360-sheet-cat-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
}
.p360-sheet-cat-ico svg { width: 20px; height: 20px; }
.p360-sheet-cat-lbl { line-height: 1.2; }

.p360-sheet-wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  margin-bottom: 10px;
}
.p360-sheet-wide svg { width: 16px; height: 16px; flex-shrink: 0; }

.p360-sheet-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px 28px;
  border-top: 1px solid #f2f4f7;
}
.p360-sheet-reset {
  flex: 1;
  padding: 12px;
  border: 1.5px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s;
}
.p360-sheet-reset:hover { border-color: var(--ocean); }
.p360-sheet-apply {
  flex: 2;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--ocean);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.p360-sheet-apply:hover { opacity: 0.88; }

#p360-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 590;
  opacity: 0;
  transition: opacity 0.3s;
}
#p360-sheet-overlay.open {
  display: block;
  opacity: 1;
}

/* ============================================================
   REFONTE FILTRES — Barre parents + Bottom sheet par parent
   + Sidebar desktop
   ============================================================ */

/* ---- Barre de chips (mobile : toujours visible, scroll horizontal) ---- */
#p360-parents-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(232, 234, 237, 0.8);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
#p360-parents-bar::-webkit-scrollbar { display: none; }
#p360-parents-bar::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 30px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7));
  pointer-events: none;
  z-index: 1;
}

.p360-chip {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  border: 1.5px solid #d0d5dd;
  border-radius: 18px;
  background: #fff;
  color: var(--chip-c, var(--text));
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.p360-chip:active { transform: scale(0.97); }
.p360-chip-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.p360-chip-ico svg { display: block; width: 16px; height: 16px; stroke: currentColor; }
.p360-chip-lbl { white-space: nowrap; line-height: 1; }
.p360-chip-count {
  font-size: 0.66rem;
  font-weight: 700;
  background: rgba(13,27,42,0.08);
  border-radius: 9px;
  padding: 1px 6px;
}
.p360-chip-count:empty { display: none; }

.p360-chip.actif {
  background: var(--chip-c, var(--ocean-deep));
  border-color: var(--chip-c, var(--ocean-deep));
  color: #fff;
}
.p360-chip.actif .p360-chip-count { background: rgba(255,255,255,0.22); }

.p360-chip-premium { border-color: rgba(240,180,41,.55); }
.p360-chip-premium.actif { color: var(--ocean-deep); }
.p360-chip-premium.actif .p360-chip-count { background: rgba(13,27,42,0.12); }

/* Croix de fermeture sur le chip de categorie actif (remplace l'ancienne bulle flottante
   "X filtres actifs") : visible uniquement quand ce chip est actif, retire le filtre. */
.p360-chip-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  margin-left: -2px;
}
.p360-chip.actif .p360-chip-close { display: flex; }
.p360-chip-close svg { display: block; width: 9px; height: 9px; stroke: currentColor; }

/* ---- Rangee 2 : sous-categories du parent actif ----
   Rangee dediee SOUS la barre des categories principales (et non plus des chips
   inseres dans cette barre) : fond legerement teinte, chips plus petits, libelle du
   parent en tete de ligne. N'existe que lorsqu'une categorie parente est active
   (classe .visible posee par carte.js) : sinon elle ne mange aucun pixel de carte. */
#p360-sous-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(236, 241, 246, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(232, 234, 237, 0.8);
  position: relative;
  z-index: 9;
}
#p360-sous-bar.visible { display: flex; }

/* Libelle de tete non cliquable : rappelle le parent, reste visible pendant que les
   chips defilent (hors du conteneur scrollable). */
#p360-sous-bar-label {
  flex: 0 0 auto;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.69rem;
  font-weight: 700;
  color: #5a6572;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  user-select: none;
}

#p360-sous-bar-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#p360-sous-bar-chips::-webkit-scrollbar { display: none; }

/* Sous-chips : plus petits que les chips du niveau principal, convention plein/contour.
   Selectionne = fond a la couleur du parent, texte et icone blancs.
   Non selectionne = fond transparent, bordure fine, texte sombre. */
.p360-subchip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1.5px solid #c3ccd6;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.p360-subchip:active { transform: scale(0.97); }
.p360-subchip-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.p360-subchip-ico svg { display: block; width: 14px; height: 14px; }
.p360-subchip-lbl { line-height: 1; }
.p360-subchip .p360-chip-count { font-size: 0.62rem; padding: 1px 5px; }
.p360-subchip.actif {
  background: var(--sub-c, var(--ocean-deep));
  border-color: var(--sub-c, var(--ocean-deep));
  color: #fff;
}
.p360-subchip.actif .p360-chip-count { background: rgba(255, 255, 255, 0.22); }

/* ---- Barre d'etat : compte affiche + jetons de filtres actifs + "Tout afficher" ----
   Ligne fine collee sous les rangees de filtres. Hors du flux tant qu'aucun filtre
   n'est actif (display: none) : elle n'occupe alors aucune place. */
#p360-statut-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(232, 234, 237, 0.8);
  font-family: 'DM Sans', sans-serif;
  position: relative;
  z-index: 8;
}
#p360-statut-bar.visible { display: flex; }

/* Le compte : c'est lui qui explique pourquoi des marqueurs apparaissent ou
   disparaissent, il ne doit jamais etre tronque par le defilement des jetons. */
#p360-statut-count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ocean-deep);
  white-space: nowrap;
}

#p360-statut-jetons {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#p360-statut-jetons::-webkit-scrollbar { display: none; }

.p360-jeton {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 3px 0 8px;
  border-radius: 11px;
  background: var(--jeton-c, var(--ocean-deep));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}
.p360-jeton-lbl { line-height: 1; }
.p360-jeton-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
}
.p360-jeton-x svg { display: block; width: 8px; height: 8px; stroke: currentColor; }

#p360-statut-reset {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 10px;
  border: 1.5px solid #c3ccd6;
  border-radius: 12px;
  background: #fff;
  color: var(--ocean-deep);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
#p360-statut-reset:active { transform: scale(0.97); }

@media (min-width: 768px) {
  #p360-parents-bar { justify-content: center; }
  #p360-sous-bar    { justify-content: center; }
  #p360-statut-bar  { justify-content: center; }
  #p360-sous-bar-chips,
  #p360-statut-jetons { flex: 0 1 auto; }
}

/* ---- Bouton Voir plus (proximite) ---- */
.p360-voir-plus {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 7px 12px;
  background: none;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ocean);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
  font-family: 'DM Sans', sans-serif;
}
.p360-voir-plus:hover { background: #f0f7ff; border-color: var(--ocean); }

/* ---- Toast ----
   En haut, sous la barre de chips (topbar + chips + subchips) : le "top" exact est
   recalculé dynamiquement en JS (cf. toast(), reutilise hauteurBarresFlottantes())
   pour ne jamais recouvrir les controles flottants, quelle que soit leur hauteur
   courante (subchips affiches ou non, bandeau collection actif ou non). */
#p360-toast {
  position: fixed;
  left: 50%;
  top: 60px;
  transform: translateX(-50%) translateY(-10px);
  z-index: 900;
  max-width: 88vw;
  background: var(--ocean-deep);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  border-radius: 14px;
  padding: 11px 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
#p360-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   COLLECTIONS — FAB, sheet de choix, bandeau actif
   ============================================================ */

/* ---- Bandeau collection active (dans .p360-controls-top, en flux) ---- */
#p360-collection-bandeau {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  background: var(--ocean-deep);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#p360-collection-bandeau.visible { display: flex; }
#p360-collection-bandeau-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
#p360-collection-bandeau-icone svg { width: 16px; height: 16px; }
#p360-collection-bandeau-titre {
  flex: 1;
  min-width: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#p360-collection-bandeau-close {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.15s;
}
#p360-collection-bandeau-close:hover { background: rgba(255, 255, 255, 0.28); }

@media (min-width: 768px) {
  #p360-collection-bandeau { justify-content: center; }
}

/* ---- FAB Collections : bas-gauche, au-dessus de la nav mobile ---- */
#p360-fab-collections {
  display: none;
  position: fixed;
  left: 14px;
  bottom: calc(48px + 14px + env(safe-area-inset-bottom));
  /* z-index par defaut sous le panneau lieu (300) : quand un panneau lieu est ouvert
     (partial ou fullscreen), le FAB doit passer derriere son contenu, pas le recouvrir.
     Il ne repasse au-dessus (cf. .p360-fab-collections--elevated plus bas) que pendant
     un panneau "liste" (Autour de moi / Favoris) en etat partial, ou la carte et ses
     controles flottants restent volontairement accessibles. */
  z-index: 290;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 16px 0 14px;
  border: none;
  border-radius: 22px;
  background: var(--ocean-deep);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: opacity 0.15s;
}
#p360-fab-collections.visible { display: flex; }
#p360-fab-collections.p360-fab-collections--elevated { z-index: 310; }
#p360-fab-collections:hover { opacity: 0.88; }
#p360-fab-collections svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (min-width: 768px) {
  #p360-fab-collections {
    position: absolute;
    left: 24px;
    bottom: 24px;
  }
}

/* ---- Overlay + sheet de choix ---- */
#p360-coll-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 620;
  opacity: 0;
  transition: opacity 0.25s;
}
#p360-coll-overlay.visible { display: block; opacity: 1; }

#p360-coll-sheet {
  position: fixed;
  left: 0; right: 0;
  /* 48px = hauteur de la nav mobile compacte sur cette page (cf body.page-carte
     #mobile-bottom-nav plus haut) : la sheet doit s'arreter au-dessus, jamais
     dessous (la nav a un z-index superieur et la recouvrirait sinon). */
  bottom: 48px;
  z-index: 630;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.28);
  /* +100px (pas juste 105%) : la sheet est ancree a bottom:48px sur mobile et
     bottom:24px sur desktop (cf media query plus bas), un simple 105% de sa
     propre hauteur ne suffit pas a la faire sortir entierement de l'ecran une
     fois fermee. */
  transform: translateY(calc(100% + 100px));
  transition: transform 0.3s cubic-bezier(0.3, 0.9, 0.3, 1);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
}
#p360-coll-sheet.visible { transform: translateY(0); }

.p360-coll-sheet-handle {
  width: 40px; height: 4px;
  background: #d0d5dd;
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
  cursor: pointer;
}
.p360-coll-sheet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ocean-deep);
  border-bottom: 1px solid #f2f4f7;
  flex-shrink: 0;
}
.p360-coll-sheet-header svg { width: 18px; height: 18px; color: var(--sunset); flex-shrink: 0; }

#p360-coll-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
}

.p360-coll-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  margin-bottom: 9px;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.p360-coll-card:last-child { margin-bottom: 0; }
.p360-coll-card:hover, .p360-coll-card:active { background: var(--sable); border-color: #d0d5dd; }

.p360-coll-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.p360-coll-ico svg { width: 20px; height: 20px; }

.p360-coll-txt { min-width: 0; display: flex; flex-direction: column; }
.p360-coll-titre {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ocean-deep);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p360-coll-sous {
  font-size: 0.76rem;
  color: var(--text-light);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p360-coll-count {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 3px;
  font-weight: 600;
}

@media (min-width: 768px) {
  #p360-coll-sheet {
    left: 24px;
    right: auto;
    bottom: 24px;
    width: 360px;
    max-height: 70vh;
    border-radius: 16px;
  }
}

/* ============================================================
   ZONES "OU DORMIR" — cercles, etiquette, carte flottante
   ============================================================ */

/* ---- Etiquette du cercle de zone (tooltip Leaflet permanent) ---- */
.leaflet-tooltip.p360-zone-label {
  background: rgba(13, 27, 42, 0.85);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  padding: 4px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.leaflet-tooltip.p360-zone-label::before { display: none; }

/* ---- Carte flottante de zone ---- */
#p360-zone-card {
  display: none;
  position: fixed;
  left: 14px; right: 14px;
  /* Au-dessus du FAB Collections (bottom ~48+14+44px sur mobile) pour ne jamais
     l'empieter : meme logique deja appliquee au FAB et au selecteur de rayon
     pour cohabiter avec la nav du bas et le panneau lieu. */
  bottom: calc(48px + 14px + 44px + 14px + env(safe-area-inset-bottom));
  z-index: 320;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  padding: 16px 18px;
}
#p360-zone-card.visible { display: block; }

#p360-zone-card-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: #f2f4f7;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s;
}
#p360-zone-card-close:hover { background: #e8eaed; }

.p360-zone-card-titre {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ocean-deep);
  padding-right: 30px;
  margin-bottom: 6px;
}
.p360-zone-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 12px;
}
/* Masque par defaut via JS (style.display='none') quand lien_slug est vide ;
   visible par defaut ici (repris par JS via style.display='') sinon. */
.p360-zone-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ocean-light);
  text-decoration: none;
}
.p360-zone-card-btn:hover { text-decoration: underline; }
.p360-zone-card-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

@media (min-width: 768px) {
  #p360-zone-card {
    left: 24px; right: auto;
    bottom: calc(24px + 44px + 16px);
    width: 340px;
  }
}