/* ============================================================
   PHUKET360 — hebergement.css
   Fiche publique d'un hebergement (/hebergement/[slug]/).
   Mobile d'abord, raffinements desktop en fin de fichier.
   ============================================================ */

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

/* Empilement naturel mobile (entete, recap, corps dans l'ordre du DOM) ; passe
   en deux colonnes a partir de 1024px, cf media query dediee en fin de fichier. */
.hebergement-layout { display: block; }

/* Galerie photo : carrousel reutilise (article.css), plein largeur
   sur mobile, contenue avec coins arrondis sur desktop. */
.hebergement-galerie { margin: 16px -16px 20px; }
.hebergement-galerie .bloc-carousel { margin: 0; border-radius: 0; }
/* height:auto est indispensable ici : sans lui, l'aspect-ratio calcule la
   LARGEUR a partir de la hauteur fixe heritee d'article.css (220px x 4/3),
   ce qui retrecissait la piste au lieu de l'etirer d'un bord a l'autre —
   c'etait la cause exacte de la marge laterale. Avec height:auto, c'est la
   largeur (pleine largeur d'ecran) qui determine la hauteur, comme voulu. */
.hebergement-galerie .carousel-track { height: auto; aspect-ratio: 4 / 3; }
.hebergement-galerie .carousel-slide img { height: 100%; object-fit: cover; }

/* Mosaique : reservee a l'ordinateur, jamais affichee sous 1024px ou le
   carrousel tactile reste la bonne interaction (cf media query dediee en fin
   de fichier). Le balisage est present dans les deux cas, seul l'affichage
   change : c'est ce qui permet a la mosaique de deleguer l'ouverture plein
   ecran aux slides du carrousel. */
.hebergement-mosaique { display: none; }

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

/* Sur la fiche, ce badge est un lien (vers /a-propos/, cf templates/hebergement.php)
   qui explique au visiteur ce que signifie la mention : neutralise le style de
   lien global (couleur, soulignement) pour garder l'apparence d'un badge. */
.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: 6px 14px;
  text-decoration: none;
  transition: background var(--transition);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.hebergement-badge-visite svg { width: 16px; height: 16px; }
.hebergement-badge-visite:hover {
  background: rgba(23, 165, 137, 0.2);
  color: var(--emeraude);
  text-decoration: none;
}

.hebergement-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}
.hebergement-info-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 0.92rem;
}
.hebergement-info-item svg { width: 17px; height: 17px; color: var(--ocean); flex-shrink: 0; }

/* Caracteristiques chiffrees, sous le titre et le badge : deux colonnes sur
   mobile, en ligne a partir de 768px (cf media query en fin de fichier).
   Une tuile par valeur renseignee, aucun bloc si les quatre sont vides
   (cf templates/hebergement.php). */
.hebergement-caracs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.hebergement-carac {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  background: var(--sable);
  border-radius: var(--radius);
}
.hebergement-carac svg { width: 20px; height: 20px; color: var(--ocean); flex-shrink: 0; }
.hebergement-carac-valeur {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ocean-deep);
}
.hebergement-carac-libelle {
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--text);
}

.hebergement-prix {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ocean-deep);
  margin-bottom: 4px;
}
/* Second montant, toujours affiche a cote du prix : indicatif, donc volontairement
   discret sous le montant reellement facture (cf includes/hebergements-format.php). */
.hebergement-prix-equivalent {
  font-size: 0.86rem;
  color: var(--text-light);
  margin-bottom: 18px;
}
.hebergement-prix--absent {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 20px;
}

/* Charges : precision discrete sous le prix et son equivalent, avant la duree
   minimum. Rien n'est rendu si le champ est vide cote admin. */
.hebergement-charges {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-light);
  margin-bottom: 16px;
}

/* Duree minimum de location, juste sous le prix. Rien n'est rendu si le champ
   est vide cote admin (cf templates/hebergement.php). */
.hebergement-duree-min {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 18px;
  background: rgba(240, 180, 41, 0.14);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text);
}
.hebergement-duree-min svg { width: 17px; height: 17px; color: var(--soleil); flex-shrink: 0; }
.hebergement-duree-min strong { font-weight: 700; color: var(--ocean-deep); }

/* Mention sous le bouton de contact (partenaire local uniquement) */
.hebergement-cta-note {
  font-size: 0.8rem;
  color: var(--text-light);
  text-align: center;
  margin-bottom: 20px;
}

.hebergement-description {
  margin-bottom: 24px;
  line-height: 1.65;
  color: var(--text);
}

.hebergement-section { margin-bottom: 28px; }
.hebergement-section-titre {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ocean-deep);
  margin-bottom: 14px;
}

/* Note de confiance au-dessus du formulaire "Ce logement m'interesse" :
   reutilise .bloc-encart (article.css, deja charge sur cette page), juste
   un espace avant le formulaire qui suit puisqu'elle est hors du <form>. */
.hebergement-section .bloc-encart { margin-bottom: 20px; }

.hebergement-commodites-liste {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.hebergement-commodites-liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text);
}
.hebergement-commodites-liste svg { width: 18px; height: 18px; color: var(--emeraude); flex-shrink: 0; }

.hebergement-video { margin-bottom: 20px; }
.hebergement-video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.hebergement-video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
}
.hebergement-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(13, 27, 42, 0.75);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.hebergement-video-play svg { width: 26px; height: 26px; color: #fff; margin-left: 3px; }
.hebergement-video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.hebergement-video-legende {
  font-size: 0.84rem;
  color: var(--text-light);
  margin-top: 6px;
  font-style: italic;
}

/* Adresse reelle du logement, au-dessus de la mini-carte. Le bloc n'est rendu
   que si l'adresse est renseignee (cf. templates/hebergement.php) ; le lien
   Google Maps reste discret, en lien texte plutot qu'en bouton plein, pour ne
   pas concurrencer le CTA principal de la fiche. */
.hebergement-adresse { margin-bottom: 14px; }
.hebergement-adresse-texte {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}
.hebergement-adresse-texte svg {
  width: 18px;
  height: 18px;
  color: var(--ocean);
  flex-shrink: 0;
  margin-top: 2px;
}
.hebergement-adresse-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  margin-left: 26px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ocean);
  text-decoration: none;
}
.hebergement-adresse-lien svg { width: 15px; height: 15px; }
.hebergement-adresse-lien:hover { text-decoration: underline; }

.hebergement-minimap {
  height: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* Sous 768px, la barre d'action fixe assure deja l'action en permanence : le
   bouton integre au bloc recap serait un doublon, masque jusqu'a ce que la
   barre fixe elle-meme disparaisse (meme seuil, cf .hebergement-cta-fixe
   plus bas). A partir de 768px il redevient necessaire (pas de barre fixe). */
.hebergement-recap .hebergement-cta { display: none; }
.hebergement-cta { margin-top: 8px; margin-bottom: 24px; }
.hebergement-btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--ocean);
  color: #fff;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition);
}
.hebergement-btn-action:hover { background: var(--ocean-deep); text-decoration: none; color: #fff; }
.hebergement-btn-action svg { width: 19px; height: 19px; }

/* Barre d'action fixe, mobile uniquement : au-dessus de #mobile-bottom-nav
   (jamais superposee, meme principe que body.page-carte dans carte.css). */
.hebergement-cta-fixe {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(65px + env(safe-area-inset-bottom));
  z-index: 899;
  padding: 10px 16px;
  background: #fff;
  box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.12);
  transform: translateY(120%);
  transition: transform 0.25s ease;
}
.hebergement-cta-fixe.is-visible { transform: translateY(0); }
.hebergement-cta-fixe .hebergement-btn-action { margin: 0; }

/* Icone du marqueur de la mini-carte : meme motif que .p360-marker-icon de
   carte.css, copie ici pour ne pas charger toute la feuille de la carte. */
.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); }

/* ============================================================
   DESKTOP (>= 768px)
   ============================================================ */
@media (min-width: 768px) {
  .hebergement-cta-fixe { display: none; }
  .hebergement-recap .hebergement-cta { display: block; }

  .hebergement-galerie { margin: 24px 0 28px; }
  .hebergement-galerie .bloc-carousel { border-radius: var(--radius-lg); }
  /* height:auto est necessaire ici : sans lui, la hauteur fixe heritee de
     .carousel-track dans article.css l'emporte sur l'aspect-ratio, qui reste
     alors sans effet (une hauteur explicite n'est jamais recalculee par un
     aspect-ratio, qui ne comble qu'une dimension manquante). Plus haute et
     plus large qu'avant (le 16/9 d'origine restait ici aussi sans effet). */
  .hebergement-galerie .carousel-track { height: auto; aspect-ratio: 2 / 1; }

  .hebergement-titre { font-size: 2.2rem; }

  /* Tuiles en ligne, groupees a gauche : chacune ne prend que la largeur de son
     contenu (flex: 0 0 auto, pas d'etirement), l'espacement entre elles reste le
     meme quel que soit leur nombre. Etirees, deux tuiles se retrouvaient collees
     aux deux bords avec un grand vide au milieu. */
  .hebergement-caracs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .hebergement-carac { flex: 0 0 auto; }

  .hebergement-commodites-liste { grid-template-columns: repeat(2, 1fr); }

  .hebergement-btn-action { width: auto; padding: 14px 28px; }
}

/* ============================================================
   GRAND ECRAN (>= 1024px) : deux colonnes. Entete (titre + badge) et corps
   (description, commodites, videos, carte) forment la colonne de gauche,
   empiles dans l'ordre du DOM ; le bloc recapitulatif occupe la colonne de
   droite et couvre les deux lignes (meme nom de zone repete dans les deux
   lignes de grid-template-areas), ce qui le rend collant sur toute la
   hauteur du contenu de gauche plutot que sur une seule rangee.
   ============================================================ */
@media (min-width: 1024px) {
  /* ----------------------------------------------------------
     Mosaique photo : remplace le carrousel a partir d'ici. Grille de
     4 colonnes sur 2 rangees ; la premiere photo occupe la moitie gauche
     (2 colonnes) sur toute la hauteur, les suivantes se rangent d'elles-memes
     a droite en deux par deux. En dessous de 5 photos, les cases restantes
     sont etirees pour qu'aucune case ne reste vide (regles [data-cases]).
     ---------------------------------------------------------- */
  .hebergement-galerie .bloc-carousel { display: none; }

  .hebergement-mosaique {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    aspect-ratio: 2 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .hebergement-mosaique-case {
    position: relative;
    padding: 0;
    border: 0;
    background: #eef1f4;
    overflow: hidden;
    cursor: pointer;
    font-family: inherit;
  }
  .hebergement-mosaique-case img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
  }
  .hebergement-mosaique-case:hover img { transform: scale(1.04); }

  /* Grande photo a gauche, toujours */
  .hebergement-mosaique-case:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }

  /* Moins de cinq photos : aucun trou, aucune case vide */
  .hebergement-mosaique[data-cases="1"] .hebergement-mosaique-case:first-child { grid-column: 1 / 5; }
  .hebergement-mosaique[data-cases="2"] .hebergement-mosaique-case:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 3; }
  .hebergement-mosaique[data-cases="3"] .hebergement-mosaique-case:nth-child(2) { grid-column: 3 / 5; }
  .hebergement-mosaique[data-cases="3"] .hebergement-mosaique-case:nth-child(3) { grid-column: 3 / 5; }
  .hebergement-mosaique[data-cases="4"] .hebergement-mosaique-case:nth-child(4) { grid-column: 3 / 5; }

  /* Voile de la derniere case : compte reel de photos du logement */
  .hebergement-mosaique-voile {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    text-align: center;
    background: rgba(13, 27, 42, 0.55);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    transition: background var(--transition);
  }
  .hebergement-mosaique-voile svg { width: 18px; height: 18px; flex-shrink: 0; }
  .hebergement-mosaique-case:hover .hebergement-mosaique-voile { background: rgba(13, 27, 42, 0.68); }

  .hebergement-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    grid-template-areas:
      "entete recap"
      "corps  recap";
    column-gap: 40px;
    align-items: start;
  }

  .hebergement-entete { grid-area: entete; }
  .hebergement-corps  { grid-area: corps; }

  .hebergement-recap {
    grid-area: recap;
    position: sticky;
    top: 80px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px;
  }
  .hebergement-recap .hebergement-btn-action { width: 100%; }
}