/* ============================================================
   PHUKET360 — hebergements-liste.css
   Liste publique des hebergements (/hebergements/).
   Reutilise .hub-grid/.hub-card (hub.css) pour la grille de cartes.
   Filtres sur le modele des sites de logement recents : une seule
   ligne (zone a gauche, bouton Filtres a droite), le reste (type,
   budget, duree) replie dans un panneau. Mobile d'abord, raffinements
   desktop en fin de fichier.

   ATTENTION - feuille partagee : templates/activites.php la charge aussi
   (avant assets/css/activites.css) pour reutiliser la grille, les puces de
   filtre, les cartes et l'etat vide plutot que de les redefinir. Toute
   modification de .hebergements-grille, .hebergements-chip(s),
   .hub-card-img.sans-photo ou .hebergements-vide se repercute donc sur
   /activites/ autant que sur /hebergements/ : verifier les deux pages.
   ============================================================ */

.hebergements-page { padding-bottom: 40px; }

.hebergements-titre {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ocean-deep);
  margin-bottom: 4px;
}

/* Bloc de presentation sous le titre (remplace l'ancien sous-titre) : photo
   au-dessus du texte sur mobile, cote a cote a partir de 600px. Volontairement
   compact pour ne pas repousser la grille de logements trop bas. */
.hebergements-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0 16px;
  padding: 14px;
  background: var(--sable);
  border-radius: var(--radius-lg);
}
.hebergements-intro-photo {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  flex-shrink: 0;
}
.hebergements-intro-texte p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
.hebergements-intro-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ocean);
  text-decoration: none;
}
.hebergements-intro-lien svg { width: 15px; height: 15px; }
.hebergements-intro-lien:hover { text-decoration: underline; }

@media (min-width: 600px) {
  .hebergements-intro {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
  }
  .hebergements-intro-photo { width: 112px; height: 112px; }
}

/* ============================================================
   BARRE DE FILTRES — une seule ligne : zone scrollable a gauche,
   bouton Filtres a droite (position: relative pour ancrer le panneau).
   ============================================================ */
.hebergements-barre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.hebergements-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hebergements-chips--scroll {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 1px;
}
.hebergements-chips--scroll::-webkit-scrollbar { display: none; }
.hebergements-chips--scroll::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 24px;
  background: linear-gradient(to right, transparent, var(--sable));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
/* Ajoutee en JS (verifierDebordementChips) seulement si la rangee deborde reellement */
.hebergements-chips--scroll.est-scrollable::after {
  opacity: 1;
}

.hebergements-chip {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  margin: 0;
  border-radius: 16px;
  border: 1px solid #dde1e7;
  background: #fff;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hebergements-chip:hover { border-color: var(--ocean); }
.hebergements-chip.is-active {
  background: var(--ocean);
  border-color: var(--ocean);
  color: #fff;
}

/* Bouton "Filtres" : declencheur du panneau, avec pastille de comptage */
.hebergements-filtres-wrap { position: relative; flex-shrink: 0; margin-left: auto; }

.hebergements-btn-filtres {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid #dde1e7;
  background: #fff;
  color: var(--ocean-deep);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
}
.hebergements-btn-filtres:hover { border-color: var(--ocean); }
.hebergements-btn-filtres svg { width: 15px; height: 15px; flex-shrink: 0; }

.hebergements-badge[hidden] { display: none; }
.hebergements-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ocean);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}

/* ============================================================
   PANNEAU DE FILTRES — feuille qui monte du bas sur mobile,
   petit volet ancre sous le bouton sur ordinateur (cf media query).
   ============================================================ */
.hebergements-panneau-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 42, 0.45);
  z-index: 998;
}
.hebergements-panneau-overlay.is-open { display: block; }

.hebergements-panneau {
  display: none;
  flex-direction: column;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 82vh;
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  z-index: 999;
  overflow: hidden;
}
.hebergements-panneau.is-open { display: flex; }

.hebergements-panneau-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #eef0f2;
  flex-shrink: 0;
}
.hebergements-panneau-titre {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ocean-deep);
}
.hebergements-panneau-fermer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #eef2f7;
  color: var(--text);
  cursor: pointer;
}
.hebergements-panneau-fermer svg { width: 16px; height: 16px; }

.hebergements-panneau-corps {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hebergements-panneau-groupe:last-child { margin-bottom: 0; }
.hebergements-panneau-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.hebergements-panneau-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid #eef0f2;
  flex-shrink: 0;
}
.hebergements-panneau-reinit {
  background: none;
  border: none;
  color: var(--ocean);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 4px;
  white-space: nowrap;
}
.hebergements-panneau-voir {
  flex: 1;
  background: var(--ocean);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
}
.hebergements-panneau-voir:hover { background: var(--ocean-deep); }

/* ============================================================
   GRILLE DE CARTES (structure .hub-grid/.hub-card reutilisee)
   Carte epuree : pas de bordure, ombre retiree au repos et remise
   discretement au survol (desktop) via les variables du site.
   ============================================================ */
.hebergements-grille { margin-top: 4px; }
.hebergements-grille .hub-card { box-shadow: none; }
.hebergements-grille .hub-card:hover { box-shadow: var(--shadow-sm); }

/* Image de repli : neutre, sans photo, plutot qu'un aplat sombre */
.hub-card-img.sans-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef1f4;
}
.hub-card-img.sans-photo svg {
  width: 34px;
  height: 34px;
  color: #b7c0cb;
}

/* Badge "Visite sur place" : reprend le badge de categorie du hub-card,
   couleur emeraude plutot que la couleur de categorie.
   nowrap : le libelle "Visite par Miu et Anthony" est plus long que l'ancien.
   Le cas le plus etroit est la popup de la carte (240px fixes, cf.
   hebergements-carte.css), ou ce badge est en position absolue : sans nowrap
   il passerait sur deux lignes et casserait la pastille arrondie. */
.hebergement-badge-visite {
  background: var(--emeraude) !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.hebergement-badge-visite svg { width: 13px; height: 13px; }

/* Ligne "3 chambres, 2 salles de bain" : volontairement discrete, juste sous
   la ligne zone/type, absente si aucune des deux valeurs n'est renseignee. */
.hebergement-card-caracs {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-top: 3px;
}

.hebergement-card-prix {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ocean-deep);
  margin-top: 4px;
}
/* Second montant indicatif, sous le prix reellement facture */
.hebergement-card-prix-equivalent {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 1px;
}
.hebergement-card-prix--absent {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-light);
}

/* Duree minimum sur les cartes : rien si le champ est vide cote admin */
.hebergement-card-duree {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 5px;
}
.hebergement-card-duree svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Etats vides (aucun hebergement publie / aucun resultat de filtre) */
.hebergements-vide {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-light);
}
.hebergements-vide svg {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  color: var(--text-light);
}
.hebergements-vide p { font-size: 0.95rem; }

/* ============================================================
   DESKTOP (>= 768px)
   ============================================================ */
@media (min-width: 768px) {
  .hebergements-titre { font-size: 2.1rem; }
  .hebergements-intro-texte p { font-size: 0.92rem; }

  /* Panneau : petit volet ancre sous le bouton, plus de feuille plein ecran.
     position: absolute (au lieu de fixed, herite de la regle mobile) pour
     que top/right se calculent par rapport a .hebergements-filtres-wrap
     (position: relative) et non par rapport a la fenetre du navigateur. */
  .hebergements-panneau-overlay { display: none !important; }
  .hebergements-panneau {
    position: absolute;
    left: auto;
    right: 0;
    bottom: auto;
    top: calc(100% + 8px);
    width: 360px;
    max-height: 480px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  }
}