/* ═══════════════════════════════════════════════════════════════
   BUNGALOW'S PLAZA — Kribi, Cameroun
   ───────────────────────────────────────────────────────────────
   Reprise fidèle du site que la direction connaît et aime.

   Rien n'est inventé ici : la palette est relevée dans la feuille de
   style de l'ancien site (#132430, #A3543C, #F0ECDF, #DBD6C8, #CCC8BC,
   #FFFEED), l'enchaînement des sections est le sien, et les titres
   restent EN MINUSCULES — c'est sa signature, et ce serait la première
   chose qu'elle remarquerait si elle disparaissait.

   Ses polices d'origine, Sprat et Aeonik, sont payantes. Bodoni Moda
   en reprend le contraste marqué ; Inter était déjà déclaré en repli
   dans son propre code.

   Ce qui change : les images ont un rapport unique, elles sont
   allégées, et rien ne bouge en boucle.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --sable:      #F0ECDF;   /* le fond de son site */
  --sable-2:    #DBD6C8;
  --beige:      #CCC8BC;
  --ivoire:     #FFFEED;
  --nuit:       #132430;   /* ses blocs sombres */
  --terre:      #A3543C;   /* son accent */
  --terre-clair:#C6805F;

  --encre:      #1B2229;
  --encre-2:    #4E5A63;
  --encre-3:    #7C868D;
  --filet:      #D8D2C2;

  --titre: 'Bodoni Moda', 'Didot', Georgia, serif;
  --texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --marge:   clamp(1.25rem, 5vw, 5rem);
  --souffle: clamp(4rem, 10vw, 8.5rem);
  --mesure:  38rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sable);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px; font-weight: 400; line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--terre); color: var(--ivoire); }

/* ─────────── typographie ───────────
   Les titres sont en minuscules, comme sur son site. « text-transform:
   lowercase » plutôt que de retaper le texte : le contenu reste lisible
   dans le code source et dans les résultats de recherche. */
h1, h2, h3, h4 {
  font-family: var(--titre); font-weight: 400; margin: 0;
  text-transform: lowercase; text-wrap: balance; letter-spacing: -.01em;
}
h1 { font-size: clamp(2.6rem, 7.5vw, 5.4rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 4.8vw, 3.4rem); line-height: 1.1; }
h3 { font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.2; }
h4 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.25; }
/* Les titres sont en minuscules — c'est la signature de son site d'origine.
   Mais un nom propre en minuscules ressemble à une faute, et la direction a
   demandé la capitale sur les noms de ses bungalows. On l'exempte lui seul :
   la phrase reste en minuscules, le nom retrouve sa majuscule. */
.nom-propre { text-transform: none; }
/* Les titres de cartes et de pied de page sont des h3 : sauter de h2 a h4
   desoriente un lecteur d'ecran, qui annonce les niveaux. Ils gardent la
   taille d'un h4 — le rang dans le document et la taille a l'ecran sont
   deux choses differentes. */
.bungalow h3, .carte h3, .pied h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.25; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.sur-titre {
  display: block; font-size: .7rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--terre); margin: 0 0 1.3rem;
}
.chapo {
  font-size: clamp(1.02rem, 1.8vw, 1.15rem); line-height: 1.8;
  color: var(--encre-2); max-width: var(--mesure);
}
.filet { width: 3rem; height: 1px; background: var(--terre); border: 0; margin: 1.7rem 0; }
.centre { text-align: center; }
.centre .chapo, .centre .filet { margin-inline: auto; }

section { padding: var(--souffle) var(--marge); position: relative; }
.contenu { max-width: 76rem; margin: 0 auto; }
.nuit { background: var(--nuit); color: var(--ivoire); }
.nuit .sur-titre { color: var(--terre-clair); }
.nuit .chapo { color: rgba(255,254,237,.76); }
.nuit .filet { background: var(--terre-clair); }
.creme { background: var(--sable-2); }

/* ─────────── apparition au défilement ───────────
   Le contenu est VISIBLE par défaut : c'est le script qui le masque,
   et seulement s'il tourne. Script absent = page entière lisible. */
.paraitre { transition: opacity .8s ease, transform .8s ease; }
html.anim .paraitre { opacity: 0; transform: translateY(22px); }
html.anim .paraitre.vu { opacity: 1; transform: none; }

/* ─────────── en-tête ─────────── */
/* Hors écran, jamais masqué : il reste dans l'ordre de tabulation et revient
   dès qu'il reçoit le focus. */
.evitement {
  position: fixed; top: -5rem; left: 1rem; z-index: 200;
  background: var(--nuit); color: var(--ivoire);
  padding: .75rem 1.15rem; text-decoration: none;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  transition: top .2s ease;
}
.evitement:focus { top: 1rem; }

/* Le lien WhatsApp proposé sous la confirmation d'envoi. */
.message-lien {
  display: inline-block; margin-top: .7rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: inherit; text-decoration: none;
  padding-bottom: .25rem; border-bottom: 1px solid currentColor; opacity: .8;
}
.message-lien:hover { opacity: 1; }

.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.1rem var(--marge);
  transition: background .45s ease, box-shadow .45s ease, padding .45s ease;
}
.entete.pose {
  background: rgba(240,236,223,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--filet); padding-block: .8rem;
}
.marque {
  text-decoration: none; line-height: 1.05;
  display: flex; align-items: center; gap: clamp(.55rem, 1.4vw, .85rem);
}
.marque-mots { display: block; }
.marque b {
  display: block; font-family: var(--titre); font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem); text-transform: lowercase;
  letter-spacing: .01em; color: var(--ivoire); transition: color .45s ease;
}
.marque-lieu {
  display: block; font-size: .55rem; letter-spacing: .32em;
  text-transform: uppercase; color: rgba(255,254,237,.66);
  margin-top: .3rem; transition: color .45s ease;
}
.entete.pose .marque b { color: var(--nuit); }
.entete.pose .marque-lieu { color: var(--terre); }

.pied-logo { display: block; height: 5.5rem; width: auto; margin-bottom: 1.4rem; }

/* ─────────── sélecteur de langue ─────────── */
.langues { display: flex; align-items: center; gap: .3rem; margin-left: .4rem; }
.menu .langues a {
  border-bottom: 0; padding: 0; font-size: .68rem; letter-spacing: .14em;
  opacity: .55; transition: opacity .3s ease, color .3s ease;
}
.menu .langues a:hover { opacity: 1; border-bottom-color: transparent; }
.menu .langues a.langue-active { opacity: 1; color: var(--terre-clair); }
.entete.pose .menu .langues a.langue-active { color: var(--terre); }
.langues-trait { font-size: .68rem; opacity: .3; color: currentColor; }

/* L'emblème, en deux teintes du même dessin : on montre celle qui contraste
   avec le fond du moment. La hauteur est fixée, la largeur suit. */
.marque-logo { height: clamp(2rem, 4.4vw, 2.6rem); width: auto; display: block; flex: 0 0 auto; }
.marque-sombre { display: none; }
.entete.pose .marque-clair { display: none; }
.entete.pose .marque-sombre { display: block; }

.menu { display: flex; align-items: center; gap: clamp(.9rem, 2.3vw, 2.1rem); }
.menu a {
  font-size: .73rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(255,254,237,.9); padding-bottom: .25rem;
  border-bottom: 1px solid transparent;
  transition: color .35s ease, border-color .35s ease;
}
.entete.pose .menu a { color: var(--encre-2); }
.menu a:hover { border-bottom-color: var(--terre-clair); color: var(--ivoire); }
.entete.pose .menu a:hover { color: var(--terre); border-bottom-color: var(--terre); }
.menu a.ici { border-bottom-color: var(--terre-clair); color: var(--ivoire); }
.entete.pose .menu a.ici { color: var(--terre); border-bottom-color: var(--terre); }

.burger {
  display: none; width: 2.4rem; height: 2.4rem; background: none; border: 0;
  cursor: pointer; padding: .55rem; flex-direction: column; justify-content: space-between;
}
.burger span { display: block; height: 1px; background: var(--ivoire); transition: background .45s ease; }
.entete.pose .burger span { background: var(--nuit); }

@media (max-width: 900px) {
  .burger { display: flex; }
  .menu {
    position: fixed; inset: 0; background: var(--nuit);
    flex-direction: column; justify-content: center; gap: 1.7rem;
    transform: translateY(-100%); transition: transform .5s cubic-bezier(.22,1,.36,1);
  }
  .menu.ouvert { transform: none; }
  .menu a, .entete.pose .menu a { color: var(--ivoire); font-size: 1rem; letter-spacing: .18em; }
  .menu a.ici, .entete.pose .menu a.ici {
    color: var(--terre-clair); border-bottom-color: var(--terre-clair);
  }
}

/* ─────────── hero ───────────
   PAS de « overflow: hidden » ici : rien ne doit y être coupé. Ce sont
   les photographies qui sont rognées, dans leur propre calque. */
.hero {
  position: relative; min-height: 100svh; z-index: 2;
  display: flex; align-items: center;
  padding: 7rem var(--marge) 5rem;
  isolation: isolate; color: var(--ivoire); text-align: center;
}
.hero-fonds { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

/* La première photo du hero, posée en CSS pour qu'elle existe sans JavaScript.
   En dessous de 900 px on sert la version 900 px : 188 Ko au lieu de 666, pour
   une image qui ne sera de toute façon affichée que sur 375 px de large. */
.hero-fond-1 { background-image: url('/img/bungalows-jour-vue.jpg'); }
@media (min-width: 900px) {
  .hero-fond-1 { background-image: url('/img/bungalows-jour.jpg'); }
}

/* La vidéo d'accueil — celle de son site d'origine, récupérée.
   Elle est posée SOUS le diaporama : tant qu'elle n'est pas prête, ou si le
   visiteur est sur un forfait limité, ce sont les photographies qui tiennent
   l'écran. Personne ne voit jamais un rectangle noir. */
#video-accueil {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.6s ease;
}
#video-accueil.vue { opacity: 1; }
/* La vidéo prend la main : les photographies s'effacent derrière elle. */
.hero-fonds.avec-video .hero-fond { opacity: 0; animation: none; }
/* Le diaporama doit se regarder comme un film, pas comme un fondu entre
   trois cartes postales : chaque photographie avance lentement pendant
   qu'elle est à l'écran. Le mouvement est long et faible — 14 s pour 6 %
   d'agrandissement — pour qu'on le ressente sans le voir. */
.hero-fond {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 2.2s ease;
  transform: scale(1.06);
}
/* Une ANIMATION, pas une transition. Une transition déclenchée dans la même
   image que le premier rendu est parfois ignorée par le navigateur — l'image
   resterait alors immobile. Une animation part toujours. */
.hero-fond.vue { opacity: 1; animation: avancer 14s linear forwards; }
@keyframes avancer { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(19,36,48,.52) 0%, rgba(19,36,48,.28) 45%, rgba(19,36,48,.78) 100%);
}
.hero .contenu { width: 100%; }
.hero h1 { max-width: 18ch; margin-inline: auto; }
.hero .logo-hero {
  /* height fixée + width auto : le rapport vient des attributs du HTML, la
     place est donc réservée avant même que l'image n'arrive. */
  display: block; margin: 0 auto 2rem; width: auto;
  height: clamp(6rem, 13vw, 9.5rem);
}
.hero .suite {
  display: inline-flex; align-items: center; gap: .7rem; margin-top: 2.4rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ivoire); text-decoration: none;
  padding-bottom: .4rem; border-bottom: 1px solid rgba(255,254,237,.45);
  transition: gap .35s ease, border-color .35s ease;
}
.hero .suite:hover { gap: 1.2rem; border-bottom-color: var(--terre-clair); }

/* ─────────── boutons ─────────── */
.bouton, .lien-fleche {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease, gap .35s ease;
}
.bouton {
  padding: 1.05rem 2.3rem; background: var(--terre); color: var(--ivoire);
  border: 1px solid var(--terre); font-family: var(--texte);
}
.bouton:hover { background: transparent; color: var(--terre); }
.nuit .bouton:hover { color: var(--ivoire); border-color: var(--ivoire); }
.lien-fleche {
  color: var(--terre); padding-bottom: .35rem;
  border-bottom: 1px solid var(--terre); background: none;
}
.lien-fleche:hover { gap: 1.2rem; }
.nuit .lien-fleche { color: var(--terre-clair); border-bottom-color: var(--terre-clair); }

/* ─────────── duo texte + image ─────────── */
.duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.duo.inverse .duo-texte { order: 2; }
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
  .duo.inverse .duo-texte { order: 0; }
}
/* Le rapport est posé ICI, pas laissé au fichier : c'est ce qui garantit
   qu'aucune image ne s'étire, quelle que soit la photo qu'on y mettra.
   « height: auto » est obligatoire dès qu'on fixe « aspect-ratio » à côté
   d'attributs width/height en HTML — sans lui, l'image s'effondre. */
.duo-image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* Deux vignettes sous l'image principale. Deux éléments sur deux colonnes :
   il ne peut pas rester de case vide en fin de ligne. */
.duo-appoint {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(.4rem, 1vw, .8rem); margin-top: clamp(.4rem, 1vw, .8rem);
}

/* ─────────── les bungalows ─────────── */
.bungalows {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: clamp(2.6rem, 5vw, 4rem);
}
@media (max-width: 780px) { .bungalows { grid-template-columns: 1fr; } }
.bungalow {
  background: var(--ivoire); border: 1px solid var(--filet);
  display: flex; flex-direction: column;
  transition: border-color .4s ease, transform .4s ease;
}
.bungalow:hover { border-color: var(--terre-clair); transform: translateY(-3px); }
.bungalow img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.bungalow-corps { padding: clamp(1.5rem, 3vw, 2.2rem); display: flex; flex-direction: column; flex: 1; }
.bungalow .prix-haut {
  font-size: .7rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--terre); margin-bottom: .7rem;
}
.bungalow h3 { margin-bottom: .9rem; }
.bungalow p { color: var(--encre-2); font-size: .97rem; margin-bottom: 1.7rem; }
.bungalow .lien-fleche { margin-top: auto; align-self: flex-start; }

/* ─────────── ce que l'ancien site appelait ses équipements ─────────── */
/* Colonnes FIXES, jamais « auto-fit ». Auto-fit choisit le nombre de colonnes
   selon la place disponible, sans jamais savoir combien d'éléments il y a :
   il en posait quatre pour six cartes, et les deux cases vides se voyaient,
   puisque ce bloc dessine un cadre avec ses séparateurs.
   Six se divise par trois et par deux : 3 → 2 → 1, chaque rangée est pleine. */
.cartes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(255,254,237,.16);
  border: 1px solid rgba(255,254,237,.16); margin-top: clamp(2.6rem, 5vw, 3.5rem);
}
@media (max-width: 980px) { .cartes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cartes { grid-template-columns: 1fr; } }
.carte { background: var(--nuit); padding: clamp(1.6rem, 3vw, 2.2rem); }
.carte h3 { margin-bottom: .6rem; }
.carte p { font-size: .93rem; color: rgba(255,254,237,.72); }

/* ─────────── où sommes-nous ─────────── */
.ou {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 820px) { .ou { grid-template-columns: 1fr; } }
.ou-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.ou-actions .bouton { width: auto; }

/* ─────────── la grille des tarifs ─────────── */
.tarifs { margin-top: clamp(2.6rem, 5vw, 3.6rem); text-align: center; }
.tarifs-titre {
  font-family: var(--titre); text-transform: lowercase;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem); margin-bottom: 1.5rem;
}
.tarifs-grille {
  list-style: none; margin: 0 auto; padding: 0; max-width: 54rem;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 1.4vw, 1.1rem);
}
@media (max-width: 640px) { .tarifs-grille { grid-template-columns: repeat(2, 1fr); } }
.tarifs-grille li {
  background: rgba(255,255,255,.5); border: 1px solid var(--filet);
  padding: 1.15rem .6rem;
}
.tarifs-grille b {
  display: block; font-family: var(--titre); font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.05; color: var(--terre);
}
.tarifs-grille span {
  display: block; margin-top: .4rem; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--encre-2);
}
.tarifs-note { margin-top: 1.3rem; font-size: .8rem; color: var(--encre-3); }

/* ─────────── galerie : le défilé ───────────
   Une rangée, pas une grille. Une rangée n'a pas de dernière ligne : le trou
   de fin de grille, qui apparaît dès que le nombre d'images ne divise pas le
   nombre de colonnes, ne peut structurellement pas se produire ici. */
.defile-cadre { margin-top: clamp(2.6rem, 5vw, 3.5rem); }

.defile {
  display: flex; align-items: flex-end;
  gap: clamp(.5rem, 1.2vw, 1rem);
  /* Le rail sort des marges de la section pour filer d'un bord à l'autre. */
  margin-inline: calc(var(--marge) * -1);
  padding-inline: var(--marge);
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--marge);
  scrollbar-width: none;          /* remplacée par notre propre barre, sous le rail */
  cursor: grab;
  /* Pas de scroll-behavior: smooth ici — le glissement doux est demandé au cas
     par cas par le script, pour que les sauts au clavier restent instantanés. */
}
.defile::-webkit-scrollbar { display: none; }
.defile.tire { cursor: grabbing; scroll-snap-type: none; }
/* Suspend l'accrochage le temps du clin d'œil : une position intermédiaire de
   quelques dizaines de pixels n'est pas un point d'accroche, et serait ramenée
   à zéro avant même d'être vue. */
.defile.sans-accroche { scroll-snap-type: none; }
.defile:focus-visible { outline: 2px solid var(--terre); outline-offset: 6px; }

.defile-vue {
  /* Calage à gauche, pas au centre : l'image de tête s'aligne sur la marge du
     texte, et au repos c'est bien la première qui est « courante ». */
  flex: 0 0 auto; scroll-snap-align: start;
  padding: 0; border: 0; background: none; cursor: pointer;
  display: block; overflow: hidden; line-height: 0;
}
/* Hauteur imposée, largeur libre : à hauteur égale un portrait est simplement
   plus étroit qu'un paysage. Aucun recadrage à inventer, aucune déformation.
   Le plafond de 32,5rem (520 px) reste SOUS les 600 px des images tirées du
   film : aucune n'est jamais affichée au-delà de sa définition réelle. */
.defile-vue img {
  height: 13rem; width: auto; max-width: none; display: block;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
  -webkit-user-drag: none; user-select: none;
}
@media (min-width: 560px)  { .defile-vue img { height: 17rem; } }
@media (min-width: 900px)  { .defile-vue img { height: min(52vh, 26rem); } }
@media (min-width: 1280px) { .defile-vue img { height: min(58vh, 32.5rem); } }
.defile-vue:hover img { transform: scale(1.04); }

.defile-pied {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; margin-top: 1.7rem;
}
.defile-legende {
  margin: 0; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--nuit); opacity: .7;
}
.defile-commandes { display: flex; align-items: center; gap: .8rem; flex: 0 0 auto; }
.defile-fleche {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid rgba(19,36,48,.22); background: none; color: var(--nuit);
  font-size: .95rem; line-height: 1; cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.defile-fleche:hover:not(:disabled) { border-color: var(--terre); color: var(--terre); }
.defile-fleche:disabled { opacity: .26; cursor: default; }
.defile-compte {
  margin: 0 0 0 .4rem; font-size: .76rem; letter-spacing: .18em;
  color: var(--nuit); opacity: .55;
  font-variant-numeric: tabular-nums; min-width: 4.6rem; text-align: right;
}
.defile-rail { height: 1px; background: rgba(19,36,48,.13); margin-top: 1.2rem; position: relative; }
.defile-rail span {
  position: absolute; left: 0; top: -1px; height: 3px; width: 0;
  background: var(--terre); transition: width .3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .defile-vue img, .defile-rail span { transition: none; }
}

/* ─────────── la visite en vidéo ─────────── */
.visite { max-width: 60rem; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0; }
.visite-cadre {
  /* Le rapport est posé sur le cadre, pas sur la vidéo : l'emplacement est
     donc réservé dès le premier rendu, avant même que l'affiche n'arrive,
     et la page ne sursaute pas au chargement. */
  aspect-ratio: 16 / 9; background: #000; overflow: hidden;
  box-shadow: 0 22px 55px rgba(0,0,0,.35);
}
.visite-cadre video { width: 100%; height: 100%; display: block; }
.visite-note {
  margin-top: 1.2rem; text-align: center;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,254,237,.5);
}

/* ─────────── loupe ─────────── */
#loupe {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(19,36,48,.97);
}
#loupe.ouverte { display: flex; }
#loupe img { max-width: 94vw; max-height: 86vh; width: auto; height: auto; }
#loupe button {
  position: absolute; background: transparent; border: 1px solid rgba(255,254,237,.4);
  color: var(--ivoire); width: 3rem; height: 3rem; cursor: pointer;
  font-size: 1.1rem; line-height: 1; transition: background .3s ease;
}
#loupe button:hover { background: rgba(255,254,237,.14); }
#loupe .fermer { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); }
#loupe .avant { left: clamp(.6rem,2vw,2rem); top: 50%; transform: translateY(-50%); }
#loupe .apres { right: clamp(.6rem,2vw,2rem); top: 50%; transform: translateY(-50%); }

/* ─────────── avis ───────────
   Une affiche unique qui change d'état, pas une grille de cartes. Cinq avis
   dans une grille de trois laissent un trou en bas — et surtout, un avis
   d'une ligne à côté d'un avis de cinq lignes ne se compare pas.

   La hauteur est FIXE : sans elle, la page sauterait à chaque changement,
   « Merci pour l'agréable séjour » ne faisant pas la taille du témoignage
   de Félix. C'est tout le sens du mot « affiche ». */
.temoignages {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem); align-items: stretch;
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  background: var(--ivoire); border: 1px solid var(--filet);
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
@media (max-width: 820px) { .temoignages { grid-template-columns: 1fr; } }

/* La note Google, vérifiable, tient la colonne de gauche. */
.note-google {
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding-right: clamp(1.8rem, 4vw, 3.5rem);
  border-right: 1px solid var(--filet); min-width: 11rem;
}
@media (max-width: 820px) {
  .note-google {
    border-right: 0; border-bottom: 1px solid var(--filet);
    padding-right: 0; padding-bottom: 1.8rem;
  }
}
.note-google .chiffre {
  font-family: var(--titre); font-size: clamp(3rem, 7vw, 4.4rem);
  line-height: 1; color: var(--nuit);
}
.note-google .etoiles { color: var(--terre); letter-spacing: .18em; margin-top: .5rem; font-size: 1rem; }
.note-google .source {
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--encre-3); margin-top: .8rem;
}

.affiche {
  position: relative; display: flex; flex-direction: column;
  /* La réserve de hauteur : calée sur le plus long des avis. */
  min-height: 15rem;
}
@media (max-width: 560px) { .affiche { min-height: 19rem; } }
.affiche blockquote {
  margin: 0; position: absolute; inset: 0 0 3.4rem 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .55s ease;
}
.affiche blockquote.vu { opacity: 1; visibility: visible; }
.affiche blockquote p {
  font-family: var(--titre); font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.65; color: var(--encre); margin: 0;
}
.affiche blockquote cite {
  display: block; margin-top: 1.3rem; font-style: normal;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--terre);
}
/* Les commandes, posées en bas de l'affiche : elles ne bougent jamais. */
.affiche-pied {
  margin-top: auto; display: flex; align-items: center; gap: 1.2rem;
  padding-top: 1.4rem; border-top: 1px solid var(--filet);
}
.affiche-points { display: flex; gap: .55rem; flex: 1; }
.affiche-points button {
  width: 2rem; height: 2px; padding: 0; border: 0; cursor: pointer;
  background: var(--filet); transition: background .3s ease;
}
.affiche-points button[aria-current="true"] { background: var(--terre); }
.affiche-fleches { display: flex; gap: .5rem; }
.affiche-fleches button {
  width: 2.4rem; height: 2.4rem; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--filet); color: var(--encre-2);
  font-size: 1rem; line-height: 1; transition: border-color .3s ease, color .3s ease;
}
.affiche-fleches button:hover { border-color: var(--terre); color: var(--terre); }

/* ─────────── réservation ───────────
   Une photographie pleine hauteur d'un côté, le formulaire de l'autre, sur
   le bleu nuit de la maison. C'est la disposition des grandes maisons : la
   demande de réservation n'est pas un formulaire administratif posé au bas
   d'une page, c'est le dernier tableau du site. */
.reserver-duo {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 0; margin-top: clamp(2.6rem, 5vw, 3.6rem);
  border: 1px solid rgba(255,254,237,.16);
}
@media (max-width: 940px) { .reserver-duo { grid-template-columns: 1fr; } }
.reserver-image { position: relative; overflow: hidden; min-height: 22rem; }
.reserver-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 940px) {
  .reserver-image { min-height: 0; }
  .reserver-image img { height: auto; aspect-ratio: 3 / 2; }
}

.formulaire { padding: clamp(1.7rem, 4vw, 3.2rem); text-align: left; }
.rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
@media (max-width: 620px) { .rangee { grid-template-columns: 1fr; } }
.champ { margin-bottom: 1.5rem; min-width: 0; }
.champ label {
  display: block; font-size: .64rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,254,237,.5); margin-bottom: .55rem;
}
/* Champs sans caisson : un simple filet sous le texte, qui s'allume en
   terre cuite à la saisie. Le fond très légèrement voilé garde la zone
   cliquable évidente sans alourdir. */
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .75rem .2rem; font-family: var(--texte); font-size: 1.02rem;
  color: var(--ivoire); background: rgba(255,254,237,.04);
  border: 0; border-bottom: 1px solid rgba(255,254,237,.24);
  border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color .3s ease, background .3s ease;
}
.champ input::placeholder, .champ textarea::placeholder { color: rgba(255,254,237,.35); }
.champ input:hover, .champ select:hover, .champ textarea:hover {
  background: rgba(255,254,237,.07);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-bottom-color: var(--terre-clair);
  background: rgba(255,254,237,.08);
}
.champ textarea { resize: vertical; min-height: 4.5rem; }
/* La flèche par défaut d'un menu déroulant est laide et grise : on la
   redessine dans la couleur de la maison. */
.champ select {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C6805F' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .3rem center; background-size: .7rem;
}
.champ select option { background: var(--nuit); color: var(--ivoire); }
/* Le sélecteur de date affiche une icône sombre, invisible sur fond nuit. */
.champ input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.55); cursor: pointer;
}

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .bouton {
  width: 100%; justify-content: center; margin-top: .8rem;
  background: var(--terre-clair); border-color: var(--terre-clair); color: var(--nuit);
  font-weight: 500;
}
.formulaire .bouton:hover { background: transparent; color: var(--terre-clair); }
.message {
  display: none; padding: .9rem 1.1rem; margin-bottom: 1.4rem; font-size: .93rem;
  border-left: 2px solid var(--terre-clair); background: rgba(198,128,95,.14);
  color: var(--ivoire);
}
.message.vu { display: block; }
.message.reussi { border-left-color: #6FBF95; background: rgba(111,191,149,.14); }
.note-form {
  font-size: .8rem; color: rgba(255,254,237,.5); margin-top: 1.2rem; text-align: center;
}

/* ─────────── pied de page ─────────── */
.pied { background: var(--nuit); color: var(--ivoire); padding: var(--souffle) var(--marge) 2.5rem; }
.pied-grille {
  display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem); max-width: 76rem; margin: 0 auto;
}
@media (max-width: 1000px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pied-grille { grid-template-columns: 1fr; } }
.pied h3 {
  font-family: var(--texte); font-size: .68rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--terre-clair); margin-bottom: 1.1rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .6rem; font-size: .93rem; color: rgba(255,254,237,.78); }
.pied a { text-decoration: none; transition: color .3s ease; }
.pied a:hover { color: var(--terre-clair); }
/* La barre légale : discrète, mais présente. Un établissement qui prend des
   réservations doit pouvoir montrer ses mentions. */
.pied-liens {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  font-size: .78rem; color: rgba(255,254,237,.55);
}
.pied-liens a { color: inherit; }
.pied-bas {
  max-width: 76rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-top: 1.6rem; border-top: 1px solid rgba(255,254,237,.16);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: rgba(255,254,237,.55);
}

/* ─────────── bouton d'écriture ─────────── */
#ecrire {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80; width: 3.2rem; height: 3.2rem;
  display: none; align-items: center; justify-content: center;
  background: #25D366; border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 28px rgba(18,140,60,.34);
  opacity: 0; transform: translateY(.7rem);
  transition: opacity .5s ease, transform .5s ease;
}
#ecrire.vu { opacity: 1; transform: none; }
#ecrire svg { width: 1.7rem; height: 1.7rem; fill: #fff; }

/* ─────────── mouvement réduit ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .paraitre { opacity: 1 !important; transform: none !important; }
  #ecrire { opacity: 1; transform: none; }
}