/* ═══════════════════════════════════════════════════════════════
   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. Le nom de l'unité qu'elle
   loue, c'est « Bungalow Akouli » en entier, pas seulement « Akouli » : la
   capitale porte donc sur les deux mots. On exempte ce nom seul — le reste du
   titre, « (4 chambres) », garde les minuscules. Et cela ne déborde pas sur
   « bungalow's plaza » en tête de page, qui reste tel qu'elle l'avait. */
.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%; }
/* La signature est le SEUL titre du site que la feuille de style ne touche
   pas. Sa casse est celle que la direction a fixée : « your favorite place in
   Cameroon » — minuscule au début, capitale au nom du pays. Une règle
   « lowercase » écraserait la capitale de Cameroon : le texte porte donc sa
   casse dans le HTML, et aucune transformation ne s'y applique. */
.hero h1 { margin-inline: auto; text-transform: none; }
/* Le nom, en vrai texte sous l'emblème. Dans le logo il est dessiné petit et
   pâle sur la photographie ; ici il se lit. Bodoni interlettré plutôt que la
   sans du reste du site : c'est un nom d'établissement, pas une étiquette
   d'interface, et cela répond à la typographie de l'emblème.
   Le dernier interlettrage s'ajoute APRÈS la dernière lettre et décale le mot
   vers la gauche ; le retrait le remet au milieu. */
.hero-nom {
  display: block; font-family: var(--titre);
  font-size: clamp(.95rem, 2.1vw, 1.35rem); font-weight: 500; line-height: 1.3;
  letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  color: rgba(255,254,237,.9);
  margin-bottom: clamp(.9rem, 2.2vw, 1.5rem);
}
/* La mesure était posée sur le titre entier ; elle ne concerne que la
   signature, sinon elle casserait aussi le nom en deux lignes. */
.hero-signature { display: block; 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 clamp(1.1rem, 2.6vw, 1.7rem); 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);
  position: relative;
}
.visite-cadre video { width: 100%; height: 100%; display: block; }

/* La couverture : l'affiche du film, un voile léger au centre pour que le
   bouton se lise même sur un ciel clair, et le bouton de lecture.
   TOUT le cadre est cliquable, pas seulement le rond : sur un téléphone, on
   vise large. Le rond ne pulse pas et ne clignote pas — un bouton qui réclame
   l'attention est la signature des gabarits achetés. Il répond au survol,
   c'est tout. */
.visite-cadre.avec-couverture::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(19,36,48,.34) 0%, rgba(19,36,48,0) 62%);
  transition: opacity .45s ease;
}
.visite-cadre.en-lecture::after { opacity: 0; }
.visite-lecture {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
}
/* Sans cette ligne, « display: grid » ci-dessus l'emporterait sur l'attribut
   « hidden » du HTML, et le bouton s'afficherait même sans JavaScript. */
.visite-lecture[hidden] { display: none; }
.visite-lecture-rond {
  position: relative; display: block;
  width: clamp(4.4rem, 9vw, 6.2rem); aspect-ratio: 1; border-radius: 50%;
  font-size: clamp(.85rem, 1.5vw, 1.15rem);
  border: 1px solid rgba(255,254,237,.85);
  background: rgba(19,36,48,.38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
/* Le triangle est dessiné en CSS : aucune image à charger. Il est poussé un
   peu à droite du centre — un triangle centré au compas paraît décalé à
   l'œil, parce que sa masse est à gauche. */
.visite-lecture-rond::before {
  content: ''; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: .85em 0 .85em 1.4em;
  border-color: transparent transparent transparent var(--ivoire);
}
.visite-lecture:hover .visite-lecture-rond {
  background: var(--terre); border-color: var(--terre); transform: scale(1.05);
}
.visite-lecture:focus-visible { outline: none; }
.visite-lecture:focus-visible .visite-lecture-rond {
  outline: 2px solid var(--terre-clair); outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .visite-lecture-rond { transition: none; }
  .visite-lecture:hover .visite-lecture-rond { transform: none; }
}
.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.4rem; height: 3.4rem;
  display: none; align-items: center; justify-content: center;
  /* Rond, alors que tout le site est à angles vifs — et c'est voulu.
     Le bouton WhatsApp flottant est une convention que tout le monde
     reconnaît sans lire : pastille verte et ronde. Un carré vert oblige à
     regarder pour comprendre. Ce n'est pas un élément de composition, c'est
     une signalétique, et une signalétique se conforme à l'usage. */
  border-radius: 50%;
  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; }
}