/* ============================================================
   PHUKET360 — hebergements-carte.css
   Carte legere dediee a la page liste (/hebergements/). Reprend le style
   visuel des marqueurs et clusters de la grande carte interactive (carte.css)
   sous des noms de classes distincts (prefixe hcarte-), copie autonome sans
   dependance a carte.css ni carte.js. Mobile d'abord : bascule liste/carte
   par bouton en dessous de 1024px, cote a cote au-dela.
   ============================================================ */

/* ---- Boutons de bascule liste/carte (mobile et tablette) ---- */
.hebergements-btn-voir-carte {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 16px;
  padding: 11px;
  border: none;
  border-radius: var(--radius);
  background: var(--ocean);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.hebergements-btn-voir-carte:hover { background: var(--ocean-deep); }
.hebergements-btn-voir-carte svg { width: 16px; height: 16px; }

.hebergements-btn-voir-liste {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #dde1e7;
  border-radius: 20px;
  background: #fff;
  color: var(--ocean-deep);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  appearance: none;
  -webkit-appearance: none;
}
.hebergements-btn-voir-liste svg { width: 16px; height: 16px; }

/* ---- Layout : bloc unique mobile, carte masquee par defaut ---- */
.hebergements-layout {
  display: block;
}

.hebergements-carte-wrap {
  display: none;
}

/* Barre de sortie mobile : masquee par defaut (non affichee tant que la carte
   n'est pas en plein ecran, et jamais affichee sur ordinateur, cf plus bas). */
.hebergements-carte-topbar {
  display: none;
}

.hebergements-carte-body {
  position: relative;
  width: 100%;
  height: 100%;
}

@media (max-width: 1023px) {
  .hebergements-carte-wrap.est-visible {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--mobile-nav-h);
    z-index: 850;
    background: var(--sable);
  }

  /* Vraie barre en flux normal (pas un bouton flottant colle au bord) : hauteur
     reelle, fond plein, rembourrage haut qui inclut la zone sure de l'ecran
     (encoche / barre de gestes). Ne peut jamais passer sous les commandes du
     navigateur puisqu'elle occupe sa propre place au sommet, pousse la carte
     en dessous, et n'est jamais superposee a rien d'autre. */
  .hebergements-carte-wrap.est-visible .hebergements-carte-topbar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px 16px;
    background: var(--sable);
    border-bottom: 1px solid rgba(13, 27, 42, 0.08);
  }

  .hebergements-carte-wrap.est-visible .hebergements-carte-body {
    flex: 1 1 auto;
    min-height: 0;
  }
}

#hebergements-carte {
  width: 100%;
  height: 100%;
}

/* ---- Etat vide (aucun hebergement filtre n'a de coordonnees) : couvre
   uniquement la zone carte, jamais la barre de sortie mobile. ---- */
.hebergements-carte-vide {
  position: absolute;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(253, 246, 236, 0.94);
  text-align: center;
  padding: 20px;
  color: var(--text-light);
}
.hebergements-carte-vide[hidden] { display: none; }
.hebergements-carte-vide svg { width: 32px; height: 32px; }

/* ---- Mise en avant reciproque grille / carte ---- */
.hebergements-grille .hub-card.hebergement-card-actif {
  box-shadow: 0 0 0 2px var(--ocean), var(--shadow-md);
}

/* ---- Marqueurs (copie autonome de .p360-marker-icon / .p360-marker-actif) ---- */
.hcarte-marker-icon {
  width: 36px;
  height: 36px;
  background: var(--ocean);
  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);
}
.hcarte-marker-icon > svg { transform: rotate(45deg); }
.hcarte-marker-actif {
  width: 44px;
  height: 44px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
  border-width: 3px;
}

/* ---- Clusters (copie autonome de .p360-cluster) ---- */
.hcarte-cluster {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ocean);
  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;
}
.hcarte-cluster-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.hcarte-cluster-icon svg { width: 20px; height: 20px; }
.hcarte-cluster-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #fff;
  color: var(--ocean-deep);
  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 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* ---- Apercu cliquable (popup Leaflet, restyle pour ne pas ressembler a un
   popup Leaflet par defaut : pointe masquee, ombre propre, bouton de
   fermeture redessine). Uniquement sur ordinateur, cf hebergements-carte.js
   (sur mobile le toucher d'un point mene directement a la fiche). ---- */
.leaflet-popup.hcarte-popup-wrap {
  margin-bottom: 16px;
}
.leaflet-popup.hcarte-popup-wrap .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(13, 27, 42, 0.25);
}
.leaflet-popup.hcarte-popup-wrap .leaflet-popup-content {
  margin: 0;
  width: 240px !important;
}
.leaflet-popup.hcarte-popup-wrap .leaflet-popup-tip-container {
  display: none;
}
.leaflet-popup.hcarte-popup-wrap .leaflet-popup-close-button {
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: var(--ocean-deep);
  font-size: 16px;
  font-weight: 700;
}
.hcarte-popup {
  display: block;
  color: inherit;
  text-decoration: none;
}
.hcarte-popup-img {
  position: relative;
}
.hcarte-popup img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.hcarte-popup-sans-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
  background: #eef1f4;
}
.hcarte-popup-sans-photo svg {
  width: 30px;
  height: 30px;
  color: #b7c0cb;
}
/* Le badge "Visite sur place" reutilise .hub-card-badge/.hebergement-badge-visite
   (deja charges via hub.css et hebergements-liste.css) : memes valeurs, meme
   habillage que sur les cartes de la grille, .hcarte-popup-img fournit juste le
   contexte de positionnement (position:relative) dont ce badge a besoin. */

.hcarte-popup-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
}
.hcarte-popup-titre {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ocean-deep);
}
/* La ligne zone/type (.hub-card-meta/.hub-meta-item) et le prix
   (.hebergement-card-prix/--absent) reutilisent aussi tels quels les styles
   de la grille, sans recalcul ni redefinition locale. */
.hcarte-popup-body .hub-card-meta {
  margin-top: 0;
  padding-top: 0;
}
.hcarte-popup-body .hebergement-card-prix,
.hcarte-popup-body .hebergement-card-prix-equivalent,
.hcarte-popup-body .hebergement-card-prix--absent {
  margin-top: 0;
}

/* Titre de la carte en presentation empilee (moins de 6 logements) : masque
   partout ailleurs (mobile, ou presentation cote a cote ou la carte fait
   deja clairement partie de la meme unite visuelle que la liste). */
.hebergements-carte-titre-section {
  display: none;
}

/* ============================================================
   DESKTOP (>= 1024px) : deux presentations selon le nombre de logements
   affiches (seuil calcule cote serveur, cf templates/hebergements.php).

   - hebergements-layout--cote-a-cote (6 logements ou plus) : liste a gauche
     qui defile, carte collante a droite. Repartition 55 / 45 (flex-grow
     proportionnel, flex-basis a 0) : la liste reste la part la plus large,
     la carte occupe une bonne moitie, aucune des deux n'est ecrasee. La
     grille repasse a 2 colonnes (au lieu des 3 pensees pour la pleine
     largeur dans hub.css) tant que sa part de l'espace ne le permet pas
     confortablement ; 3 colonnes seulement a partir d'un tres grand ecran.

   - sans ce modificateur (moins de 6 logements) : la carte cote a cote sur
     une colonne pleine hauteur laisserait un grand vide sous une liste trop
     courte pour la remplir. La grille garde sa pleine largeur et ses propres
     seuils de colonnes (hub.css, inchange), la carte suit en dessous en
     pleine largeur dans un bloc de hauteur fixe raisonnable.
   ============================================================ */
@media (min-width: 1024px) {
  .hebergements-btn-voir-carte { display: none; }

  .hebergements-carte-wrap {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  .hebergements-carte-body {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Sur ordinateur la carte reste affichee en permanence (a cote ou en
     dessous de la liste) : aucune bascule, donc jamais de barre de sortie. */
  .hebergements-carte-topbar { display: none; }
  .hebergements-btn-voir-liste { display: none; }

  /* ---- Cote a cote (6 logements ou plus) ---- */
  .hebergements-layout--cote-a-cote {
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }
  .hebergements-layout--cote-a-cote .hebergements-grille {
    flex: 11 1 0;
    min-width: 0;
    grid-template-columns: repeat(2, 1fr);
  }
  .hebergements-layout--cote-a-cote .hebergements-carte-wrap {
    position: sticky;
    top: 80px;
    flex: 9 1 0;
    min-width: 340px;
    height: calc(100vh - 100px);
  }

  /* ---- Empile (moins de 6 logements) ---- */
  .hebergements-layout:not(.hebergements-layout--cote-a-cote) .hebergements-carte-titre-section {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ocean-deep);
    margin: 32px 0 12px;
  }
  .hebergements-layout:not(.hebergements-layout--cote-a-cote) .hebergements-carte-wrap {
    width: 100%;
    height: 420px;
  }
}

@media (min-width: 1440px) {
  .hebergements-layout--cote-a-cote .hebergements-grille {
    grid-template-columns: repeat(3, 1fr);
  }
}