/* ============================================================
   SECTIONS — Nos Villas (frame Figma 1078:3991, 1440×5147)
   ============================================================ */

/* ================= HÉRO PHOTO ================= */
.nv-hero {
  position: relative;
  height: 750px;
  background: var(--c-ink);
  overflow: hidden;
}
.nv-hero > picture,
.nv-hero > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.nv-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 1;
}

/* Bouton lecture centré */
.nv-play {
  position: absolute;
  z-index: 2;
  top: 409px;
  left: 50%;
  transform: translateX(-50%);
  width: 73px;
  height: 73px;
  padding: 16px 17px;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  display: grid;
  place-content: center;
  transition: transform 0.25s ease;
}
.nv-play:hover { transform: translateX(-50%) scale(1.05); }
.nv-play img { width: 37px; height: 37px; }

/* Barre de navigation photos */
.nv-slider-bar {
  position: absolute;
  z-index: 2;
  top: 672px;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--w-container), calc(100% - 48px));
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nv-arrow {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 200px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-content: center;
  transition: background 0.2s ease;
}
.nv-arrow:hover { background: var(--c-white); }
.nv-arrow img { width: 9px; height: 15px; }
.nv-arrow--prev img { transform: rotate(180deg); }
.nv-count {
  height: 36px;
  padding: 8px 16px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 16px;
  line-height: 20.2px;
  font-weight: 500;
  color: var(--c-primary);
}

/* Prise en main de la galerie : la grande photo se balaie au doigt comme à la
   souris. `pan-y` laisse la page défiler verticalement mais réserve le geste
   horizontal au diaporama, et `user-select` évite qu'un glissé sélectionne le
   texte de la barre de comptage. */
.nv-hero {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
.nv-hero:active { cursor: grabbing; }
.nv-hero .nv-arrow, .nv-hero .nv-play { cursor: pointer; }
.nv-hero picture img { -webkit-user-drag: none; user-select: none; }
/* Court fondu au changement de photo (posé par le script, jamais au chargement
   pour ne pas retarder l'affichage de la photo de tête). */
.nv-hero picture img.is-swap { animation: nv-swap 0.3s ease; }
@keyframes nv-swap { from { opacity: 0.25; } to { opacity: 1; } }

/* ================= BANDE DE MINIATURES ================= */
/* La bande porte désormais toutes les photos de l'annonce (6 à 9 selon le
   bien) : à `flex: 1` elles se seraient écrasées à moins de 150 px. Elle
   défile donc horizontalement, chaque vignette gardant une largeur lisible. */
.nv-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nv-thumbs::-webkit-scrollbar { display: none; }
/* La bande se tire à la souris ; pendant le glissé on coupe l'accroche pour
   que le défilement suive le curseur au pixel. */
.nv-thumbs { cursor: grab; }
.nv-thumbs.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.nv-thumbs.is-dragging .nv-thumb-btn { cursor: grabbing; }
.nv-thumb {
  position: relative;
  flex: 0 0 clamp(220px, 19%, 300px);
  scroll-snap-align: start;
  height: 252px;
  overflow: hidden;
}
/* La bande est la galerie : chaque vue est un bouton qui remplit sa case. */
.nv-thumb-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.nv-thumb-btn:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: -3px;
}
.nv-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nv-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;   /* le clic revient au bouton placé dessous */
  transition: background 0.2s ease;
}
.nv-thumb:not(.is-active):hover::after { background: rgba(0, 0, 0, 0.2); }
.nv-thumb.is-active::after {
  background: transparent;
  box-shadow: inset 0 0 24px 0 rgba(0, 0, 0, 0.56);
}

/* ================= DÉTAIL DE LA VILLA ================= */
.nv-detail { margin-top: 64px; }
.nv-detail-in {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.nv-main {
  width: 780px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* --- Intro (titre, caractéristiques, description) --- */
.nv-intro { display: flex; flex-direction: column; gap: 24px; }
.nv-intro-top { display: flex; flex-direction: column; gap: 24px; }
.nv-intro .section-head h1 { min-height: 124.8px; }
.nv-specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}
.nv-specs li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-primary);
  white-space: nowrap;
}
.nv-specs img { flex: none; }
.nv-desc { display: flex; flex-direction: column; gap: 24px; }
.nv-desc p {
  font-size: 16px;
  line-height: 25.6px;
  font-weight: 300;
  color: #454240;
}
/* Figma coupe la description à 5 lignes (130 px) et pose un « Voir plus ».
   La coupe est ici, le bouton la lève (main.js) ; sans elle, le bouton
   n'aurait rien à révéler et l'encart perdrait la hauteur de la maquette. */
.nv-desc-p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.nv-desc-p.is-open {
  display: block;
  overflow: visible;
}
.nv-more {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  color: var(--c-primary);
  cursor: pointer;
  transition: color 0.2s ease;
}
.nv-more[hidden] { display: none; }
.nv-more:hover { color: var(--c-primary-dark); text-decoration: underline; }

/* --- Blocs « Ce que propose ce logement » / « Emplacement » --- */
.nv-block { display: flex; flex-direction: column; gap: 32px; }
.nv-block > h2 {
  font-size: 26px;
  line-height: 33.8px;
  font-weight: 500;
}
.nv-amenities {
  /* Hauteur de la maquette : un logement à 8 équipements (3 lignes) donnerait
     sinon une carte 48 px plus courte que celle d'un logement à 10. */
  min-height: 264px;
  display: flex;
  justify-content: space-between;
  gap: 47px;
  padding: 48px;
  background: var(--bg-soft);
  border-radius: 32px;
}
.nv-am-col { display: flex; flex-direction: column; gap: 24px; }
/* Largeurs Figma en plancher, pas en plafond : la maquette range « Espace de
   travail dédié » (199 px) dans la 1re colonne, nos biens le rangent parfois
   dans la 2e (193 px) — le libellé passait alors à la ligne et creusait la
   carte de 24 px. `space-between` garde la 1re et la 3e colonne à leur x. */
.nv-am-col--1 { min-width: 199px; }
.nv-am-col--2 { min-width: 193px; }
.nv-am-col--3 { min-width: 164px; }
.nv-am-col li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 24px;
  white-space: nowrap;
  font-size: 16px;
  line-height: 20.2px;
  font-weight: 500;
  color: #454240;
}
.nv-am-col img { width: 24px; height: 24px; flex: none; }
.nv-map img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 26px;
}

/* --- Avis voyageurs --- */
.nv-reviews { display: flex; flex-direction: column; gap: 48px; }
.nv-rv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nv-rv-txt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 585px;
}
.nv-rv-txt h2 {
  font-size: 26px;
  line-height: 33.8px;
  font-weight: 500;
}
.nv-rv-txt p {
  max-width: 490px;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-body);
}
.nv-rating {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 25px 9px 9px;
  background: var(--bg-soft);
  border-radius: 97px;
}
.nv-rating .nr-logo {
  width: 48px;
  height: 48px;
  flex: none;
  border: 0.45px solid rgba(255, 56, 92, 0.2);
  border-radius: 90px;
  display: grid;
  place-content: center;
}
.nv-rating .nr-logo img { width: 26px; height: 29px; }
.nv-rating .nr-txt { width: 96px; display: flex; flex-direction: column; gap: 4px; }   /* FIXED en Figma */
.nv-rating .nr-score {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-head);
  font-size: 16.3px;
  line-height: 19.1px;
  font-weight: 600;
  color: #171414;
}
.nv-rating .nr-score img { width: 14px; height: 13px; }
.nv-rating .nr-count {
  font-family: var(--f-manrope);
  font-size: 11.6px;
  line-height: 17.5px;
  color: var(--c-body);
}
.nv-rv-body { display: flex; flex-direction: column; gap: 32px; }

/* Carrousel partagé (piste + points) */
.slider-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > * { scroll-snap-align: start; }
.slider-dots {
  height: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.slider-dots button {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: #652A2A;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
.slider-dots button.is-active {
  opacity: 1;
  background: var(--c-primary-deep);
  outline: 0.64px solid rgba(138, 70, 45, 0.6);
  outline-offset: 3px;
}
.slider-dots--gold button { background: #A86B08; }
.slider-dots--gold button.is-active {
  background: var(--c-gold);
  outline-color: rgba(252, 193, 99, 0.6);
}

/* Carte d'avis — variante large de cette page */
.nv-rv-body .review-card {
  width: 780px;
  height: 260px;          /* hauteur FIXED de la maquette */
  background: var(--bg-soft);
  overflow: hidden;
}
.nv-rv-body .review-card .rv-stars { gap: 6px; }
.nv-rv-body .review-card blockquote {
  font-size: 16px;
  line-height: 25.6px;
}

/* --- Encart de réservation --- */
.nv-booking { width: 372px; flex: none; }

/* Le formulaire suit le scroll sur desktop : la colonne de gauche (.nv-main)
   est bien plus haute que l'encart, qui resterait sinon perdu en haut de page.
   Borné à >= 1101 px : sous ce seuil .nv-detail-in passe en colonne et un
   élément sticky pleine largeur masquerait le contenu.
   .nv-detail-in est déjà en `align-items: flex-start`, indispensable pour que
   l'aside garde sa hauteur de contenu et puisse coulisser dans le flex.
   Pas d'`overflow` ici : la carte plafonne à ~560 px une fois les champs de
   contact dépliés (elle tient dans tous les écrans >= 1101 px), et un
   `overflow: auto` rognerait l'ombre portée de `.nb-card`. */
@media (min-width: 1101px) {
  .nv-booking {
    position: sticky;
    top: 32px;
    align-self: flex-start;
  }
}
.nb-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 24px;
  border: 0.8px solid var(--l-card);
  border-radius: 32px;
  box-shadow: 0 6px 21px 0 rgba(0, 0, 0, 0.08);
}
.nb-card h2 {
  font-size: 22px;
  line-height: 33px;
  font-weight: 500;
}
/* La boîte des champs rogne son contenu pour ses coins arrondis : le panneau
   déroulant des voyageurs doit donc vivre en dehors d'elle, dans une zone qui
   sert d'ancrage sans rien rogner. */
.nb-fields-zone { position: relative; }
.nb-fields {
  background: var(--c-white);
  border: 0.8px solid #DDDDDD;
  border-radius: var(--r-input);
  overflow: hidden;
}
.nb-row { display: flex; }
.nb-cell {
  position: relative;
  flex: 1;
  height: 56px;
  padding: 26px 12px 10px;
}
.nb-cell + .nb-cell { border-left: 1px solid #DDDDDD; }
.nb-guests {
  position: relative;
  height: 60px;
  padding: 29px 44px 11px 16px;
  border-top: 0.8px solid #DDDDDD;
}
.nb-label {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--f-head);
  font-size: 10px;
  line-height: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #6C3623;
}
.nb-guests .nb-label { left: 12px; }

/* ---- Sélecteur de voyageurs, façon Airbnb ----
   Un <select> ne permettait qu'un nombre global, plafonné à la capacité :
   impossible de distinguer adultes, enfants et bébés, ni de demander une
   villa pour un groupe plus grand. Le champ devient un bouton qui déplie
   quatre compteurs ; le résumé et les champs cachés restent la seule chose
   que le formulaire envoie. */
.nb-guests { padding: 0; }
.nb-guests-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 29px 44px 11px 16px;
  text-align: left;
  background: transparent;
}
.nb-guests-resume {
  display: block;
  font-size: 14px;
  line-height: 17.6px;
  color: #6C6C6C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nb-guests-btn[aria-expanded="true"] .nb-chev { transform: translateY(-50%) rotate(180deg); }

.nb-guests-panneau {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 8px 16px;
  background: var(--c-white);
  border: 0.8px solid #DDDDDD;
  border-radius: var(--r-input);
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
}
.nb-guests-panneau[hidden] { display: none; }
.nb-g-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}
.nb-g-ligne + .nb-g-ligne { border-top: 0.8px solid #EEEEEE; }
.nb-g-txt { display: flex; flex-direction: column; gap: 2px; }
.nb-g-txt strong {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--c-ink);
}
.nb-g-txt small { font-size: 12px; line-height: 16px; color: #8A8A8A; }
.nb-g-step {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.nb-g-step button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.8px solid #C9C9C9;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  color: #5A5A5A;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nb-g-step button:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
.nb-g-step button:disabled { opacity: 0.35; cursor: not-allowed; }
.nb-g-n {
  min-width: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  color: var(--c-ink);
}
.nb-g-note {
  margin: 4px 0 10px;
  font-size: 12px;
  line-height: 16px;
  color: var(--c-primary);
}
.nb-g-note:empty { display: none; }
/* En-tête et bouton de validation : ils n'ont de sens que dans l'étape mobile,
   où le panneau occupe toute la feuille. Sur desktop c'est un simple menu. */
.nb-g-titre, .nb-g-ok { display: none; }
.nb-value {
  display: block;
  font-size: 14px;
  line-height: 17.6px;
  color: #6C6C6C;
}
/* Toute la cellule doit ouvrir le champ. En flux, le contrôle ne couvrait que
   26 % de la cellule « Voyageurs » et 41 % des cellules de dates (mesuré au
   sondage) : cliquer sur le libellé ou dans le vide ne faisait rien.
   Le contrôle est donc étalé sur la cellule et reprend son padding — les
   cellules ont une hauteur fixe et leurs seuls enfants sont déjà en absolu,
   l'aspect ne bouge pas d'un pixel. */
.nb-cell .nb-value {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 26px 12px 10px;
  background: transparent;
}
.nb-chev {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 9px;
  height: 5px;
}
.nb-card .btn {
  width: 100%;
  height: 46px;
  padding: 13px 28px;
}
/* Les cellules sont devenues des <label> et les valeurs de vrais champs :
   on neutralise l'habillage natif pour garder la présentation de la maquette. */
.nb-cell, .nb-guests { display: block; cursor: pointer; }
input.nb-value, select.nb-value {
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 17.6px;
  color: #6C6C6C;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
input.nb-value::-webkit-calendar-picker-indicator { margin: 0; padding: 0; cursor: pointer; }
/* Anneau de focus des champs de l'encart : réservé au clavier (voir main.js),
   et dessiné à l'INTÉRIEUR de la cellule — en `outline-offset` positif il
   débordait sur la cellule voisine et sur le bord de la carte. */
input.nb-value:focus-visible, select.nb-value:focus-visible { outline: none; }
body.nav-clavier input.nb-value:focus-visible,
body.nav-clavier select.nb-value:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}
.nb-guests .nb-chev { pointer-events: none; }

/* Identité du voyageur : révélée au premier clic sur « Réservez maintenant »,
   pour que l'encart garde au chargement la hauteur exacte de la maquette. */
.nb-contact { display: flex; flex-direction: column; gap: 12px; }
.nb-contact[hidden] { display: none; }
.nb-input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 0.8px solid #DDDDDD;
  border-radius: var(--r-input);
  background: var(--c-white);
  font-family: inherit;
  font-size: 14px;
  line-height: 17.6px;
  color: var(--c-ink);
}
.nb-input::placeholder { color: #6C6C6C; }
/* Prix du séjour : masqué tant que les dates ne sont pas choisies, l'encart
   garde donc sa hauteur de maquette au chargement. */
.nb-prix {
  margin: 0;
  font-family: var(--f-head);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--c-ink);
}
.nb-prix[hidden] { display: none; }
.nb-prix--indispo { color: var(--c-err); }
.nb-card .form-status { margin-top: 0; }
.nb-card .btn[disabled] { opacity: 0.6; cursor: progress; }

/* ================= AUTRES VILLAS ================= */
.nv-others { margin-top: 104px; }
.nv-others-head { max-width: 888px; }
.nv-others-cards {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.nv-others-cards .villa-card { flex: none; }

/* ================= GALERIE ================= */
.gallery { margin-top: 64px; margin-bottom: 104px; }
.gallery-row { margin-top: 48px; display: flex; gap: 24px; }
.gallery-item {
  position: relative;
  flex: 1;
  height: 422px;
  border-radius: var(--r-img);
  overflow: hidden;
}
.gallery-item picture,
.gallery-item picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-gallery);
  z-index: 1;
}
/* Le pictogramme « lecture » a été retiré de la galerie : les visuels sont des
   photos, pas des vidéos, et le bouton ne menait nulle part. Le dégradé
   `.gallery-item::after` et la légende restent, eux, inchangés. */
.gallery-item figcaption {
  position: absolute;
  z-index: 2;
  left: 8px;
  right: 8px;
  bottom: 23px;
  text-align: center;
  font-family: var(--f-head);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--c-white);
}
.gallery-social {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 32px;
}
.social-card {
  width: 253px;
  padding: 16px 44px;
  background: #FEFEFE;
  border: 0.88px solid rgba(84, 58, 48, 0.08);
  border-radius: var(--r-box);
  box-shadow: var(--sh-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 0.2s ease;
}
.social-card:hover { transform: translateY(-2px); }
.social-card img { width: 41px; height: 41px; }
.social-card span {
  font-size: 18px;
  line-height: 22.7px;
  font-weight: 300;
  color: var(--c-handle);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1240px) {
  .nv-detail-in { gap: 32px; }
  .nv-main { width: auto; flex: 1; min-width: 0; }
  .nv-booking { width: 340px; }
  .nv-rv-body .review-card { width: 100%; height: auto; min-height: 260px; overflow: visible; }
  .nv-amenities { gap: 24px; padding: 32px; }
  .nv-am-col { width: auto; min-width: 0; flex: 1; }
  .nv-am-col li { white-space: normal; height: auto; }
  .nv-others-cards .villa-card { width: 320px; }
  .gallery-item { height: 380px; }
}

/* ============================================================
   BARRE DE RÉSERVATION MOBILE
   ------------------------------------------------------------
   Sous 1100 px l'encart passait en bas de la colonne : le visiteur devait
   remonter toute la fiche pour réserver. Il devient une barre fixe en pied
   d'écran (prix + « Réserver ») qui déplie le formulaire par-dessus la page.
   Un seul formulaire dans le DOM — la barre et le panneau enveloppent celui
   qui existe déjà, donc rien à dupliquer ni à resynchroniser.
   ============================================================ */
.nb-bar { display: none; }

@media (max-width: 1100px) {
  .nv-booking {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    z-index: 150;              /* au-dessus du header (100), sous la pop-up (300) */
  }
  /* L'encart porte `reveal-right` : fixé en bas de l'écran il peut ne jamais
     croiser l'observateur et resterait à `opacity: 0`. Il faut deux classes
     pour repasser devant `animations.css`, chargé après cette feuille. */
  .page-fiche .nv-booking {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--c-white);
    border-top: 0.8px solid var(--l-card);
    box-shadow: 0 -6px 21px 0 rgba(0, 0, 0, 0.1);
    text-align: left;
  }
  .nb-bar-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .nb-bar-txt strong {
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: var(--c-ink);
  }
  .nb-bar-txt small {
    font-size: 12px;
    line-height: 16px;
    color: #6C6C6C;
  }
  .nb-bar-cta {
    flex: none;
    padding: 12px 24px;
    border-radius: var(--r-pill);
    background: var(--c-primary);
    color: var(--c-white);
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
  }

  /* Panneau déplié */
  /* Le panneau reçoit le focus à l'ouverture pour ancrer la tabulation ;
     il ne doit pas pour autant afficher d'anneau, il n'est pas actionnable. */
  .nb-panneau:focus { outline: none; }
  .nb-panneau {
    display: none;
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    background: var(--c-white);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 28px 0 rgba(0, 0, 0, 0.18);
  }
  .nv-booking.is-open .nb-panneau { display: block; }
  .nv-booking.is-open .nb-bar { display: none; }
  /* Voile : posé dans le contexte d'empilement de l'encart, donc sous le
     panneau mais au-dessus de toute la page. */
  .nv-booking.is-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.45);
  }
  .nb-panneau .nb-card {
    border: 0;
    box-shadow: none;
    padding: 16px 8px 8px;
  }
  .nb-fermer {
    display: block;
    margin-left: auto;
    width: 36px;
    height: 36px;
    font-size: 26px;
    line-height: 1;
    color: var(--c-ink);
  }
  /* La barre masque le bas de la page : on rend la hauteur au document. */
  .page-fiche { padding-bottom: 84px; }
  /* ---- Étape « Voyageurs » (mobile) ----
     Le panneau déroulant ne tenait pas dans la feuille : seul le premier
     compteur était visible, il fallait deviner qu'on pouvait faire défiler.
     Comme sur Airbnb, le choix des voyageurs devient donc une étape à part :
     le reste du formulaire s'efface, le panneau prend toute la largeur et se
     valide par « Terminé ». Rien n'est dupliqué — c'est le même panneau, sorti
     de son positionnement absolu. */
  .nb-card.etape-voyageurs > *:not(.nb-fields-zone) { display: none; }
  .nb-card.etape-voyageurs .nb-fields { display: none; }
  .nb-card.etape-voyageurs .nb-guests-panneau {
    position: static;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .nb-card.etape-voyageurs .nb-g-titre {
    display: block;
    margin-bottom: 4px;
    font-size: 22px;
    line-height: 33px;
    font-weight: 500;
    color: var(--c-ink);
  }
  .nb-card.etape-voyageurs .nb-g-ok {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: 12px;
    border-radius: var(--r-pill);
    background: var(--c-primary);
    color: var(--c-white);
    font-size: 14px;
    font-weight: 500;
  }

  /* Arrière-plan figé pendant que le panneau est ouvert. `overflow: hidden`
     sur le body conserve la position de défilement, contrairement à un
     `position: fixed` qui la remettrait à zéro. */
  body.nb-fige { overflow: hidden; }
}

@media (min-width: 1101px) {
  .nb-panneau { display: block; }
  .nb-fermer { display: none; }
}

@media (max-width: 1100px) {
  .h-section { font-size: 40px; line-height: 1.3; }
  .nv-hero { height: 560px; }
  .nv-play { top: 280px; }
  .nv-slider-bar { top: 480px; }
  .nv-thumb { flex: 0 0 32%; height: 180px; }
  .nv-intro .section-head h1 { min-height: 0; }
  .nv-detail-in { flex-direction: column; }
  .nv-main { width: 100%; flex: none; gap: 48px; }
  .nv-booking { width: 100%; max-width: 480px; }
  .nv-amenities { flex-wrap: wrap; }
  .nv-am-col { width: calc(50% - 12px); min-width: 0; flex: none; }
  .nv-others { margin-top: 72px; }
  .gallery { margin-top: 48px; margin-bottom: 72px; }
  .gallery-row { flex-wrap: wrap; }
  .gallery-item { flex: 1 1 calc(50% - 12px); height: 340px; }
  .gallery-social { flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 640px) {
  .nv-hero { height: 420px; }
  .nv-play { top: 180px; width: 60px; height: 60px; }
  .nv-play img { width: 28px; height: 28px; }
  .nv-slider-bar { top: 350px; }
  .nv-thumb { flex: 0 0 46%; height: 120px; }
  .nv-specs { gap: 16px 20px; }
  .nv-rv-head { flex-direction: column; align-items: flex-start; }
  .nv-rating { align-self: flex-start; }
  .nv-amenities { flex-direction: column; padding: 24px; border-radius: 20px; }
  .nv-am-col { width: 100%; }
  .nv-map img { height: 260px; }
  .nv-block > h2, .nv-rv-txt h2 { font-size: 22px; line-height: 30px; }
  .nv-others-cards .villa-card { width: 280px; }
  .gallery-item { flex: 1 1 100%; height: 300px; }
  .social-card { width: 100%; padding: 16px 24px; }
}

/* Les puces du carrousel d'avis étaient alignées à gauche par parité Figma
   (nœud 1078:4176 @120) ; demande client : les centrer comme celles de
   « D'autres villas », à toutes les tailles. */
.nv-rv-body .slider-dots { justify-content: center; }
@media (max-width: 1240px) {
  .nv-amenities { min-height: 0; }
}

/* ============================================================
   BARRE DE NAVIGATION SUR PHOTO (variante Figma des fiches)
   ------------------------------------------------------------
   La maquette détache la barre de nav sur cette frame (1078:4000) :
   pastille translucide `rgba(255,255,255,0.1)` + filet à 30 %, logo et
   libellés blancs, bouton « Réserver » blanc à texte encre. Les autres
   pages gardent le composant blanc opaque (1087:66).
   Le logo blanc et la flèche encre sont posés dans le HTML : une icône
   blanche sur un bouton blanc serait invisible (piège déjà rencontré).
   ============================================================ */
.page-fiche .nav-pill {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.page-fiche .nav-links a { color: var(--c-white); }
.page-fiche .nav-links a:hover { color: var(--c-gold); }
.page-fiche .nav-links a[aria-current="page"] { color: var(--c-white); font-weight: 500; }
.page-fiche .nav-phone {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.25);
}
.page-fiche .nav-phone span { color: var(--c-white); }
.page-fiche .nav-book {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-ink);
}
.page-fiche .nav-book:hover { background: rgba(255, 255, 255, 0.85); }
@media (min-width: 1101px) {
  /* La capitalisation de chaque mot (`textCase: TITLE` en Figma) a ete
     retiree le 28.08.2026 : en francais un titre ne prend pas une majuscule
     a chaque mot, et les memes phrases s'affichaient en casse normale sur
     les pages qui n'avaient pas cette regle. */
}

/* Le panneau déroulant du menu mobile reste blanc : ses liens doivent
   redevenir sombres, sinon ils seraient blancs sur blanc. */
@media (max-width: 900px) {
  .page-fiche .nav-links a,
  .page-fiche .nav-links a[aria-current="page"] { color: var(--c-ink); }
  .page-fiche .nav-links a:hover { color: var(--c-primary); }
  .page-fiche .nav-burger { background: rgba(255, 255, 255, 0.25); }
  .page-fiche .nav-burger span { background: var(--c-white); }
}

/* Le fondu de la galerie suit le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  .nv-hero picture img.is-swap { animation: none; }
}