/*
  Bloc: locatif-hero (header hébergement)
  Extrait de : themes/Nature&Residence/single-hebergements.php
               (bloc HERO-REFONTE-START ... HERO-REFONTE-END, lignes 60-126)

  Remarque : les règles .texte-image.img-droite présentes dans le <style>
  d'origine n'ont pas été reprises ici. Elles ciblent une section plus bas
  dans la page (hors de ce bloc) et sont de toute façon masquées par
  ".texte-image.img-droite{display:none!important;}" dès que le hero est
  actif (bloc EQUIP-REFONTE) — elles semblent avoir été collées là par erreur.

  Les règles de la lightbox (#nrl-lightbox) sont reprises ici aussi car
  la galerie de ce bloc en dépend pour fonctionner de façon autonome.
*/

/* Masque l'ancien header/bandeau de page quand ce hero est actif */
#banner.banner-hebergement { display: none !important; }
.attributs.greybg { display: none !important; }
#header { box-shadow: 0 6px 18px rgba(0, 0, 0, .09) !important; }

.locatif-hero {
  max-width: 1850px;
  margin: 0 auto;
  padding: 120px 20px 0;
  box-sizing: border-box;
}
.locatif-hero__head { text-align: center; }
.locatif-hero__sur {
  font-size: 30px;
  font-weight: 400;
  color: #383838;
  margin: 0;
  line-height: 1.2;
}
.locatif-hero__title {
  font-size: 30px;
  font-weight: 700;
  color: #383838;
  margin: 4px 0 0;
  line-height: 1.2;
}
.locatif-hero__atouts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
  margin: 24px 0 0;
}
.locatif-hero__atout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 300;
  color: #383838;
  text-align: center;
}
.locatif-hero__atout img {
  height: 42px;
  width: auto;
  object-fit: contain;
}
.locatif-hero__cta { text-align: center; margin: 24px 0 0; }
.locatif-hero__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  background: #ff912c;
  color: #fff;
  border-radius: 1000px;
  padding: 14px 42px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.locatif-hero__bc { font-size: 12px; color: #383838; margin: 26px 0 8px; }
.locatif-hero__bc a { color: #383838; text-decoration: none; }

.locatif-hero__gallery {
  position: relative;
  display: grid;
  gap: 14px;
  height: 520px;
  grid-auto-flow: row dense;
}
.locatif-hero__gallery.g-count-2 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.locatif-hero__gallery.g-count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.locatif-hero__gallery.g-count-4 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }
.locatif-hero__gallery.g-count-5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.locatif-hero__gallery .g { overflow: hidden; border-radius: 10px; }
.locatif-hero__gallery .g img { width: 100%; height: 100%; object-fit: cover; display: block; }
.locatif-hero__gallery .g.big { grid-column: 1; grid-row: 1 / -1; }
.locatif-hero__voir {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fdf8f4;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 15px;
  color: #383838;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

@media (max-width: 900px) {
  .locatif-hero__gallery {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: none !important;
    height: auto !important;
    gap: 8px;
  }
  .locatif-hero__voir { top: auto; bottom: 12px; left: auto; right: 12px; }
  .locatif-hero__gallery .g.big {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: 382 / 240;
  }
  .locatif-hero__gallery .g { aspect-ratio: 1; }
  .locatif-hero__sur, .locatif-hero__title { font-size: 23px; }
  .locatif-hero__atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 6px; }
  .locatif-hero { padding: 84px 16px 0; }
}

/* Lightbox (dépendance de la galerie ci-dessus) */
#nrl-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
#nrl-lightbox.open { display: flex; }
#nrl-lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 8px; }
#nrl-lightbox .nrl-lb__close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 42px;
  cursor: pointer;
  line-height: 1;
}
#nrl-lightbox .nrl-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 46px;
  cursor: pointer;
  padding: 0 22px;
  user-select: none;
}
#nrl-lightbox .nrl-lb__prev { left: 4px; }
#nrl-lightbox .nrl-lb__next { right: 4px; }