/* ============================================================================
   PRESTIGE ROOMS — FEUILLE DE STYLE UNIQUE
   ----------------------------------------------------------------------------
   Le site entier tient sur une seule couleur d'accent, `--accent`, et sur les
   quelques variables qui l'accompagnent. Quand le visiteur choisit une bulle
   sur la page d'accueil, on change `data-theme` sur <html> : toutes les
   variables basculent, et comme elles sont déclarées avec @property, la
   bascule s'anime au lieu de sauter.

   Sommaire
     1.  Variables et thèmes
     2.  Réinitialisation et bases
     3.  Décors d'ambiance (grain, halo, particules, fond photo)
     4.  Préchargeur
     5.  En-tête et navigation
     6.  Boutons et petits composants
     7.  Accueil — le hall des bulles
     8.  Accueil — la fiche du logement sélectionné
     9.  Sections communes
     10. Page logement
     11. Galerie et visionneuse
     12. Questions fréquentes
     13. Pied de page
     14. Pages de texte (légal, contact, 404)
     15. Révélations au défilement
     16. Adaptations mobiles
     17. Mouvement réduit et impression
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. VARIABLES ET THÈMES
   ------------------------------------------------------------------------ */

@property --accent   { syntax: '<color>'; inherits: true; initial-value: #d9b26a; }
@property --accent2  { syntax: '<color>'; inherits: true; initial-value: #f0dcb4; }
@property --fond     { syntax: '<color>'; inherits: true; initial-value: #07060a; }
@property --texte    { syntax: '<color>'; inherits: true; initial-value: #f3ede3; }
@property --voile    { syntax: '<color>'; inherits: true; initial-value: rgba(217, 178, 106, .35); }

:root {
  /* Thème neutre — avant tout choix, la maison est en or et en nuit. */
  --accent:  #d9b26a;
  --accent2: #f0dcb4;
  --fond:    #07060a;
  --texte:   #f3ede3;
  --voile:   rgba(217, 178, 106, .35);

  --nuit:    #050408;
  --encre:   rgba(255, 255, 255, .06);
  --trait:   rgba(255, 255, 255, .12);
  --doux:    rgba(255, 255, 255, .60);
  --tres-doux: rgba(255, 255, 255, .38);

  /* Bodoni Moda : le didone du logo — hampes pleines, déliés en cheveu,
     empattements plats. Sa taille optique variable épaissit les traits fins
     dans les petits corps, sinon ils disparaîtraient à l'écran. */
  --display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --lent:    1.1s cubic-bezier(.22, 1, .36, 1);
  --moyen:   .55s cubic-bezier(.22, 1, .36, 1);
  --vif:     .25s cubic-bezier(.4, 0, .2, 1);

  --marge:   clamp(1.25rem, 5vw, 5rem);
  --large:   1280px;
  --lisible: 68ch;

  --rayon:   18px;
}

html[data-theme='eden'] {
  --accent:  #00e39c;
  --accent2: #ff35b8;
  --fond:    #02120d;
  --texte:   #dff6ec;
  --voile:   rgba(0, 227, 156, .42);
}

html[data-theme='romantique'] {
  --accent:  #c34dff;
  --accent2: #ff3fd0;
  --fond:    #0e0620;
  --texte:   #efe2ff;
  --voile:   rgba(195, 77, 255, .42);
}

html[data-theme='suite'] {
  --accent:  #ff2f52;
  --accent2: #ff9d5c;
  --fond:    #150207;
  --texte:   #ffe3e6;
  --voile:   rgba(255, 47, 82, .42);
}

/* ---------------------------------------------------------------------------
   2. RÉINITIALISATION ET BASES
   ------------------------------------------------------------------------ */

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

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .005em;
  /* `clip` et non `hidden` : `hidden` ferait du body un conteneur de
     défilement, ce qui casse silencieusement tous les `position: sticky`
     de la page — panneau de réservation, colonne de visite, photo du
     dossier. `clip` coupe le débord sans créer ce conteneur. */
  overflow-x: clip;
  transition: color var(--lent);
}

/* Le fond profond suit le thème, en plus sombre que la couleur elle-même. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--fond) 0%, var(--nuit) 70%),
    var(--nuit);
  transition: background var(--lent);
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -.005em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); }
h2 { font-size: clamp(2.1rem, 5vw, 3.9rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }

p { text-wrap: pretty; }

::selection { background: var(--accent); color: #06050a; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .8rem 1.4rem;
  background: var(--accent);
  color: #06050a;
  border-radius: 0 0 10px 0;
}
.saut-contenu:focus { left: 0; }

.invisible {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.enveloppe {
  width: min(100% - 2 * var(--marge), var(--large));
  margin-inline: auto;
}

/* Marqueur de contenu à fournir — visible exprès, il doit gêner. */
.marqueur {
  display: inline;
  padding: .1em .5em;
  border-radius: 5px;
  background: rgba(255, 196, 0, .16);
  outline: 1px dashed rgba(255, 196, 0, .55);
  color: #ffd873;
  font-size: .92em;
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   3. DÉCORS D'AMBIANCE
   ------------------------------------------------------------------------ */

/* Photo de fond, en deux couches qui se relaient pour un fondu propre. */
.ambiance {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.ambiance__couche {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s ease, transform 9s ease-out;
  will-change: opacity, transform;
}

.ambiance__couche.est-visible {
  opacity: .34;
  transform: scale(1);
}

/* Voile coloré par-dessus la photo : c'est lui qui « teinte » la page. */
.ambiance::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 60% at 50% 8%, var(--voile) 0%, transparent 62%),
    linear-gradient(to bottom, rgba(5, 4, 8, .55) 0%, rgba(5, 4, 8, .82) 55%, var(--nuit) 100%);
  transition: background var(--lent);
}

/* Grain argentique, pour casser les aplats. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
}

/* Poussière lumineuse — dessinée par script.js dans la couleur du thème. */
.particules {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
}

/* Halo qui suit le curseur, sur grand écran seulement. */
.halo {
  position: fixed;
  z-index: 0;
  width: 34rem;
  height: 34rem;
  margin: -17rem 0 0 -17rem;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, var(--voile) 0%, transparent 62%);
  filter: blur(46px);
  transition: opacity .8s ease;
}

@media (hover: hover) and (pointer: fine) {
  .halo.est-visible { opacity: .55; }
}

/* ---------------------------------------------------------------------------
   4. PRÉCHARGEUR
   ------------------------------------------------------------------------ */

.prechargeur {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.2rem;
  background: var(--nuit);
  transition: opacity .9s ease, visibility .9s;
}

.prechargeur.est-parti {
  opacity: 0;
  visibility: hidden;
}

.prechargeur__logo {
  width: clamp(11rem, 34vw, 17rem);
  aspect-ratio: 538 / 494;
  background-image: url('assets/logo.webp');
  filter: drop-shadow(0 0 30px var(--voile));
  opacity: 0;
  animation: apparait 1.1s ease .1s forwards;
}

.prechargeur__points {
  display: flex;
  gap: 1.1rem;
}

.prechargeur__point {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: currentColor;
  opacity: .2;
  animation: pulse-point 1.7s ease-in-out infinite;
}

.prechargeur__point:nth-child(1) { color: #00e39c; animation-delay: 0s; }
.prechargeur__point:nth-child(2) { color: #c34dff; animation-delay: .28s; }
.prechargeur__point:nth-child(3) { color: #ff2f52; animation-delay: .56s; }

@keyframes pulse-point {
  0%, 100% { opacity: .18; transform: scale(1); box-shadow: none; }
  45%      { opacity: 1;   transform: scale(1.5); box-shadow: 0 0 22px currentColor; }
}

@keyframes apparait { to { opacity: 1; } }

/* ---------------------------------------------------------------------------
   5. EN-TÊTE ET NAVIGATION
   ------------------------------------------------------------------------ */

.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem var(--marge);
  transition: background var(--moyen), backdrop-filter var(--moyen), padding var(--moyen),
              border-color var(--moyen);
  border-bottom: 1px solid transparent;
}

.entete.est-posee {
  padding-block: .85rem;
  background: rgba(5, 4, 8, .72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--trait);
}

.marque {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--display);
  font-size: 1.28rem;
  letter-spacing: .26em;
  text-indent: .26em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   LE LOGO, TEINTÉ PAR LE THÈME
   ----------------------------------------------------------------------------
   Le fichier fourni est un PNG doré : on ne peut pas le recolorer en changeant
   une variable. On se sert donc de sa couche alpha comme MASQUE, et c'est le
   fond de l'élément qu'on peint — un dégradé construit sur `--accent`, qui
   suit donc la room choisie.

   Le dégradé (clair → accent → sombre) rend le métal du logo d'origine : un
   aplat uni aurait perdu ce que l'or apportait.

   Sans prise en charge des masques, l'image d'origine s'affiche telle quelle,
   en doré. C'est le repli, et il est correct.
   ------------------------------------------------------------------------ */

.marque__symbole,
.prechargeur__logo {
  display: block;
  flex: none;
  background: center / contain no-repeat;
}

.marque__symbole {
  height: clamp(1.7rem, 3.4vw, 2.15rem);
  aspect-ratio: 400 / 242;
  background-image: url('assets/logo-symbole.webp');
  filter: drop-shadow(0 0 12px var(--voile));
  transition: filter var(--lent);
}

@supports (mask-image: url('assets/logo-symbole.webp')) or
          (-webkit-mask-image: url('assets/logo-symbole.webp')) {
  .marque__symbole,
  .prechargeur__logo {
    background-image: linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 45%, #fff) 0%,
      var(--accent) 42%,
      color-mix(in srgb, var(--accent) 70%, #000) 100%);
    background-size: 100% 100%;
    transition: background-image var(--lent), filter var(--lent);
  }

  .marque__symbole {
    -webkit-mask: url('assets/logo-symbole.webp') center / contain no-repeat;
    mask: url('assets/logo-symbole.webp') center / contain no-repeat;
  }

  .prechargeur__logo {
    -webkit-mask: url('assets/logo.webp') center / contain no-repeat;
    mask: url('assets/logo.webp') center / contain no-repeat;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.2rem);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nav a {
  position: relative;
  padding-block: .3rem;
  color: var(--doux);
  transition: color var(--vif);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--moyen), background var(--lent);
}

.nav a:hover,
.nav a[aria-current='page'] { color: var(--texte); }
.nav a:hover::after,
.nav a[aria-current='page']::after { transform: scaleX(1); }

.burger {
  display: none;
  width: 44px; height: 44px;
  place-content: center;
  border-radius: 50%;
  border: 1px solid var(--trait);
}

.burger span {
  display: block;
  width: 19px; height: 1.5px;
  background: currentColor;
  transition: transform var(--vif), opacity var(--vif);
}
.burger span + span { margin-top: 5px; }

.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   6. BOUTONS ET PETITS COMPOSANTS
   ------------------------------------------------------------------------ */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--vif), background var(--lent), color var(--lent),
              border-color var(--lent), box-shadow var(--moyen);
}

.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }

.bouton--plein {
  background: var(--accent);
  color: #06050a;
  box-shadow: 0 10px 34px -12px var(--accent);
}
.bouton--plein:hover { box-shadow: 0 16px 44px -10px var(--accent); }

.bouton--trait {
  border: 1px solid var(--trait);
  color: var(--texte);
  backdrop-filter: blur(8px);
}
.bouton--trait:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.bouton__fleche { transition: transform var(--vif); }
.bouton:hover .bouton__fleche { transform: translateX(4px); }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--doux);
  backdrop-filter: blur(6px);
}

.etiquette--accent {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}

.note {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .88rem;
  color: var(--doux);
}
.note strong {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--texte);
}

.surtitre {
  display: block;
  margin-bottom: 1.1rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--lent);
}

/* ---------------------------------------------------------------------------
   7. ACCUEIL — LE HALL DES BULLES
   ------------------------------------------------------------------------ */

.hall {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(6rem, 12vh, 8rem) var(--marge) clamp(2rem, 5vh, 3.5rem);
  text-align: center;
}

/* Le titre reprend le lockup du logo : PRESTIGE en capitales pleines, ROOMS
   dessous en lettres espacées, encadré de deux filets qui s'estompent. */
.hall__titre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.5rem, 1.4vh, .9rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hall__titre span:first-child {
  font-size: clamp(2.3rem, 6.6vw, 5.1rem);
  letter-spacing: .015em;
}

.hall__titre em {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 2vw, 1.5rem);
  width: 100%;
  font-style: normal;
  font-size: clamp(.82rem, 1.9vw, 1.45rem);
  letter-spacing: .46em;
  text-indent: .46em;
  color: var(--accent);
  transition: color var(--lent);
}

.hall__titre em::before,
.hall__titre em::after {
  content: '';
  height: 1px;
  width: clamp(1.4rem, 5vw, 4.5rem);
  background: currentColor;
  opacity: .8;
}
.hall__titre em::before { mask-image: linear-gradient(to right, transparent, #000); }
.hall__titre em::after  { mask-image: linear-gradient(to left,  transparent, #000); }

.hall__baseline {
  max-width: 58ch;
  margin: 1.1rem auto 0;
  color: var(--doux);
  font-size: clamp(.96rem, 1.3vw, 1.08rem);
  line-height: 1.6;
}

.hall__invite {
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tres-doux);
}

/* ---------------------------------------------------------------------------
   L'INTRO DU HALL
   ----------------------------------------------------------------------------
   Le titre, la baseline puis les bulles se révèlent dans l'ordre, comme si une
   main dorée les écrivait. Des paillettes accompagnent le tracé.

   Tout est conditionné à `.hall--anime`, que seul le script pose : sans JS,
   aucune de ces règles ne s'applique et le hall s'affiche normalement. Les
   animations ne démarrent qu'avec `.est-entree`, ajoutée quand le préchargeur
   s'efface — sinon elles se joueraient derrière lui.
   ------------------------------------------------------------------------ */

.hall--anime .lettre,
.hall--anime .mot,
.hall--anime .hall__invite,
.hall--anime .bulle__bouton,
.hall--anime .bulle__nom {
  opacity: 0;
}

.hall--anime .hall__titre em::before,
.hall--anime .hall__titre em::after { transform: scaleX(0); }

/* Une fois l'intro jouée, la visibilité ne doit plus dépendre du `fill-mode`
   des animations : toute animation posée ensuite sur ces éléments — la
   bascule de room, par exemple — remplacerait la propriété `animation` et
   ferait retomber l'opacité à zéro. La bulle disparaîtrait au clic. */
.hall.intro-finie .lettre,
.hall.intro-finie .mot,
.hall.intro-finie .hall__invite,
.hall.intro-finie .bulle__bouton,
.hall.intro-finie .bulle__nom { opacity: 1; }

.hall.intro-finie .hall__titre em::before,
.hall.intro-finie .hall__titre em::after { transform: scaleX(1); }

.lettre, .mot { display: inline-block; white-space: pre; }

.hall--anime.est-entree .lettre {
  animation: ecrit .85s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i) * .052s);
}

/* La lettre arrive floue et dorée, puis se pose et reprend sa couleur : c'est
   ce passage par l'or qui donne l'impression qu'on vient de l'écrire. */
@keyframes ecrit {
  0% {
    opacity: 0;
    translate: 0 .28em;
    filter: blur(9px);
    color: var(--accent);
    text-shadow: 0 0 26px var(--accent);
  }
  55% { opacity: 1; filter: blur(0); color: var(--accent); text-shadow: 0 0 18px var(--accent); }
  100% { opacity: 1; translate: 0 0; filter: blur(0); text-shadow: none; }
}

.hall--anime.est-entree .hall__titre em::before,
.hall--anime.est-entree .hall__titre em::after {
  animation: trace .7s cubic-bezier(.22, 1, .36, 1) 1.05s both;
}

@keyframes trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hall--anime.est-entree .mot {
  animation: souffle .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(1.35s + var(--i) * .035s);
}

@keyframes souffle {
  from { opacity: 0; translate: 0 .5em; filter: blur(5px); }
  to   { opacity: 1; translate: 0 0;    filter: blur(0); }
}

.hall--anime.est-entree .hall__invite {
  animation: souffle .8s cubic-bezier(.22, 1, .36, 1) 1.95s both;
}

.hall--anime.est-entree .bulle__bouton {
  animation: emerge 1s cubic-bezier(.34, 1.4, .5, 1) both;
  animation-delay: calc(2.15s + var(--i) * .17s);
}

/* `scale` et non `transform` : le survol utilise déjà `transform`, les deux se
   composent au lieu de s'écraser. */
@keyframes emerge {
  from { opacity: 0; scale: .58; filter: blur(6px) brightness(2.2); }
  60%  { opacity: 1; filter: blur(0) brightness(1.3); }
  to   { opacity: 1; scale: 1; filter: none; }
}

.hall--anime.est-entree .bulle__nom {
  animation: souffle .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(2.45s + var(--i) * .17s);
}

/* --- Les paillettes ----------------------------------------------------- */

/* Le conteneur des paillettes se cale sur l'enveloppe du hall. */
.hall .enveloppe { position: relative; }

.paillettes {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

/* « Rooms » se pose juste après le tracé des deux filets. */
.hall--anime.est-entree .mot--rooms { animation-delay: 1.15s; }

.paillette {
  position: absolute;
  width: var(--t, 14px);
  aspect-ratio: 1;
  background: radial-gradient(circle, #fff 0%, var(--accent) 40%, transparent 72%);
  clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%);
  opacity: 0;
  animation: scintille 1.5s ease-out var(--d, 0s) forwards;
}

@keyframes scintille {
  0%   { opacity: 0; scale: 0;   rotate: -60deg; }
  35%  { opacity: 1; scale: 1.1; }
  60%  { opacity: .9; scale: .9; }
  100% { opacity: 0; scale: 0;   rotate: 60deg; }
}

/* ---------------------------------------------------------------------------
   L'ONDE DE BASCULE
   ----------------------------------------------------------------------------
   Au clic sur une bulle, une onde part de la bulle elle-même et balaie tout
   l'écran dans la couleur de la room. Trois couches : un anneau net qui file
   devant, un disque coloré qui inonde derrière, un voile bref qui donne le
   coup de flash. Le script crée l'élément puis le retire : rien ne reste.
   ------------------------------------------------------------------------ */

.onde {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
  --x: 50vw;
  --y: 50vh;
}

.onde span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
  translate: -50% -50%;
  will-change: transform, opacity;
}

/* 1. Le disque : la couleur qui envahit la page. */
.onde__disque {
  width: 12px;
  aspect-ratio: 1;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--teinte) 78%, transparent) 0%,
    color-mix(in srgb, var(--teinte) 30%, transparent) 45%,
    transparent 72%);
  animation: onde-disque 1.15s cubic-bezier(.16, .84, .3, 1) forwards;
}

@keyframes onde-disque {
  from { scale: 1;   opacity: 1; }
  to   { scale: 340; opacity: 0; }
}

/* 2. L'anneau : le front de l'onde, plus rapide et plus net. */
.onde__anneau {
  width: 12px;
  aspect-ratio: 1;
  border: 2px solid var(--teinte);
  box-shadow: 0 0 32px var(--teinte), inset 0 0 22px var(--teinte);
  animation: onde-anneau .95s cubic-bezier(.12, .8, .25, 1) forwards;
}

@keyframes onde-anneau {
  from { scale: 1;   opacity: .95; }
  60%  { opacity: .55; }
  to   { scale: 300; opacity: 0; }
}

/* 3. Le voile : un flash bref sur toute la surface. */
.onde__voile {
  left: 0; top: 0;
  width: 100%; height: 100%;
  translate: 0 0;
  border-radius: 0;
  background: var(--teinte);
  mix-blend-mode: screen;
  animation: onde-voile .7s ease-out forwards;
}

@keyframes onde-voile {
  0%   { opacity: 0; }
  18%  { opacity: .17; }
  100% { opacity: 0; }
}

/* La bulle choisie encaisse le coup : elle enfle, s'illumine, puis revient. */
.bulle.vient-de-basculer .bulle__bouton {
  animation: coup-de-bulle .9s cubic-bezier(.22, 1.5, .4, 1);
}

@keyframes coup-de-bulle {
  0%   { scale: 1; opacity: 1; }
  22%  { scale: 1.28; opacity: 1; filter: brightness(2.1) saturate(1.4); }
  100% { scale: 1; opacity: 1; filter: none; }
}

/* L'aurore : les trois couleurs qui respirent, tant qu'aucune room n'est
   choisie. Dès qu'on clique sur une bulle, elle s'efface. */
/* `overflow: hidden` est indispensable : sans lui, les halos débordent à
   droite et créent une barre de défilement horizontale sur mobile. */
.aurore {
  position: absolute;
  inset: -10% -5%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: .55;
  transition: opacity 1.2s ease;
}

html[data-theme] .aurore { opacity: 0; }

.aurore span {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  animation: derive 22s ease-in-out infinite alternate;
}

.aurore span:nth-child(1) {
  left: 4%;  top: 18%;
  background: radial-gradient(circle, rgba(217, 178, 106, .30) 0%, transparent 66%);
}
.aurore span:nth-child(2) {
  left: 30%; top: 4%;
  background: radial-gradient(circle, rgba(240, 220, 180, .26) 0%, transparent 66%);
  animation-delay: -7s;
}
.aurore span:nth-child(3) {
  right: 2%; top: 24%;
  background: radial-gradient(circle, rgba(196, 150, 74, .30) 0%, transparent 66%);
  animation-delay: -14s;
}

@keyframes derive {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, 5vh, 0) scale(1.16); }
}

/* --- Les trois bulles --------------------------------------------------- */

.bulles {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.2rem, 5vw, 4.5rem);
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  list-style: none;
}

.bulle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  animation: flotte 7s ease-in-out infinite;
}

.bulle:nth-child(2) { animation-delay: -2.4s; }
.bulle:nth-child(3) { animation-delay: -4.6s; }

@keyframes flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.bulle__bouton {
  position: relative;
  width: clamp(6rem, 13.5vw, 10.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  isolation: isolate;
  transition: transform var(--moyen);
}

.bulle__bouton:hover { transform: scale(1.06); }

/* La photo, enfermée dans la bulle. */
.bulle__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: saturate(1.15) contrast(1.05);
  transition: filter var(--moyen), transform 1.6s ease;
}

.bulle__bouton:hover .bulle__photo { transform: scale(1.08); }

/* Le reflet du haut : ce qui fait « bulle de savon ». */
.bulle__bouton::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, .06) 26%, transparent 46%),
    radial-gradient(circle at 72% 82%, rgba(255, 255, 255, .12) 0%, transparent 34%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* L'anneau irisé, teinté par le logement. */
.bulle__bouton::after {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--teinte) 0deg,
    var(--teinte2) 110deg,
    transparent 190deg,
    var(--teinte) 320deg,
    var(--teinte) 360deg);
  opacity: .55;
  filter: blur(9px);
  animation: tourne 14s linear infinite;
  transition: opacity var(--moyen), filter var(--moyen);
}

@keyframes tourne { to { transform: rotate(1turn); } }

.bulle__bouton:hover::after,
.bulle.est-choisie .bulle__bouton::after {
  opacity: 1;
  filter: blur(14px);
}

/* Le liseré net, au bord de la bulle. */
.bulle__anneau {
  position: absolute;
  inset: -3px;
  z-index: 3;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--teinte) 60%, transparent);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .55);
  pointer-events: none;
  transition: border-color var(--moyen), box-shadow var(--moyen);
}

.bulle.est-choisie .bulle__anneau {
  border-width: 2px;
  border-color: var(--teinte);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .35), 0 0 40px var(--teinte);
}

.bulle.est-choisie .bulle__bouton { transform: scale(1.08); }
.bulle.est-choisie { animation-play-state: paused; }

/* Le nom sous la bulle. */
.bulle__nom {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.1vw, 1.65rem);
  letter-spacing: .06em;
  transition: color var(--moyen);
}

.bulle__genre {
  display: block;
  margin-top: .2rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tres-doux);
  transition: color var(--moyen);
}

/* Le prix sous la bulle : c'est ce qui rend le premier écran concret. Sans
   lui, un visiteur voit trois ronds et aucune information d'achat. */
.bulle__prix {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  padding: .28rem .7rem;
  border: 1px solid color-mix(in srgb, var(--teinte) 40%, var(--trait));
  border-radius: 999px;
  background: rgba(6, 5, 10, .45);
  backdrop-filter: blur(8px);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--texte);
  transition: border-color var(--moyen), background var(--moyen);
}
.bulle__prix i { font-style: normal; opacity: .4; }

.bulle:hover .bulle__prix,
.bulle.est-choisie .bulle__prix {
  border-color: var(--teinte);
  background: color-mix(in srgb, var(--teinte) 16%, rgba(6, 5, 10, .5));
}

.bulle.est-choisie .bulle__nom { color: var(--teinte); }
.bulle.est-choisie .bulle__genre { color: var(--doux); }

/* La prochaine nuit libre — calculée sur les disponibilités réelles. C'est de
   la rareté honnête : le chiffre vient du calendrier, pas d'un compteur. */
.fiche__dispo,
.panneau__dispo {
  display: block;
  /* Ni majuscules ni `nowrap` : la phrase est longue et vit à côté d'éléments
     qui portent les deux. */
  text-transform: none;
  white-space: normal;
  margin-top: 1rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--accent);
  transition: color var(--lent);
}

.fiche__dispo::before,
.panneau__dispo::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: .5rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
  animation: bat-dispo 2.2s ease-in-out infinite;
}

@keyframes bat-dispo {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

.panneau__dispo {
  margin-top: .8rem;
  padding: .6rem .85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--trait));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---------------------------------------------------------------------------
   8. ACCUEIL — LA FICHE DU LOGEMENT SÉLECTIONNÉ
   ------------------------------------------------------------------------ */

/* Tant qu'aucune room n'est choisie, la fiche ne prend aucune place : la
   grille à `0fr` fait tomber sa hauteur à zéro, et l'animation reste fluide. */
.fiche {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: 0fr;
  width: min(100% - 2 * var(--marge), 62rem);
  margin-inline: auto;
  transition: grid-template-rows var(--moyen);
}

.fiche.est-ouverte { grid-template-rows: 1fr; }

.fiche__cadre {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--moyen) .1s, transform var(--moyen) .1s;
}

.fiche.est-ouverte .fiche__cadre { opacity: 1; transform: none; }

.fiche__interieur {
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  padding: clamp(1.4rem, 2.8vw, 2.2rem);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--trait));
  border-radius: var(--rayon);
  background: rgba(10, 8, 14, .58);
  backdrop-filter: blur(22px) saturate(130%);
  text-align: left;
  transition: border-color var(--lent);
}

.fiche__grille {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  grid-template-columns: 1fr auto;
  align-items: start;
}

.fiche__titre {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1;
}

.fiche__soustitre {
  margin-top: .5rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--lent);
}

.fiche__accroche {
  margin-top: 1.1rem;
  max-width: 46ch;
  color: var(--doux);
}

.fiche__signes {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.4rem;
  list-style: none;
}

.fiche__prix {
  text-align: right;
  white-space: nowrap;
}

.fiche__prix span {
  display: block;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tres-doux);
}

.fiche__prix strong {
  display: block;
  margin-top: .3rem;
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.2vw, 3.1rem);
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  transition: color var(--lent);
}

.fiche__prix small {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--doux);
}

.fiche__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--trait);
}

.fiche__meta {
  margin-left: auto;
  align-self: center;
}

/* ---------------------------------------------------------------------------
   9. SECTIONS COMMUNES
   ------------------------------------------------------------------------ */

.section {
  position: relative;
  z-index: 2;
  padding-block: clamp(4.5rem, 12vh, 9rem);
}

.section--serree { padding-block: clamp(3rem, 8vh, 6rem); }

.section__entete {
  max-width: var(--lisible);
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

.section__entete--centre {
  margin-inline: auto;
  text-align: center;
}

.section__chapo {
  margin-top: 1.2rem;
  color: var(--doux);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}

/* Trois piliers — l'expérience. */
.piliers {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  list-style: none;
}

.pilier {
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .022);
  transition: border-color var(--moyen), background var(--moyen), transform var(--moyen);
}

.pilier:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--trait));
  background: rgba(255, 255, 255, .04);
}

.pilier__numero {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  transition: color var(--lent);
}

.pilier h3 { margin: .9rem 0 .7rem; font-size: 1.35rem; }
.pilier p { color: var(--doux); font-size: .96rem; }

/* Cartes des trois rooms, plus bas dans la page. */
.rooms {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 1.9rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  list-style: none;
}

.room {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .022);
  transition: transform var(--moyen), border-color var(--moyen), box-shadow var(--moyen);
}

.room:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--teinte) 55%, transparent);
  box-shadow: 0 26px 60px -30px var(--teinte);
}

.room__cadre {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.room__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.22, 1, .36, 1);
}

.room:hover .room__photo { transform: scale(1.07); }

.room__cadre::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 4, 8, .9) 0%, transparent 55%),
              linear-gradient(to top, var(--teinte-voile) 0%, transparent 40%);
}

.room__coup-de-coeur {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  background: rgba(5, 4, 8, .7);
  border-color: color-mix(in srgb, var(--teinte) 60%, transparent);
  color: var(--teinte);
}

.room__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .85rem;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
}

.room__nom {
  font-size: 1.85rem;
  color: var(--teinte);
}

.room__accroche { color: var(--doux); font-size: .96rem; }

.room__signes {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tres-doux);
}

.room__signes li::after { content: ' ·'; margin-left: .45rem; color: var(--teinte); }
.room__signes li:last-child::after { content: ''; }

.room__pied {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--trait);
}

.room__prix {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--texte);
}
.room__prix span {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tres-doux);
}
.room__prix small {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--doux);
}

.room__lien {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teinte);
}
.room__lien::after { content: ' →'; transition: none; }

/* La carte entière est cliquable, sans piéger le clavier. */
.room__couverture { position: absolute; inset: 0; z-index: 1; }

/* Dans une carte, les boutons prennent la couleur de la room, pas celle du
   thème général : les trois univers restent lisibles côte à côte. */
.room .bouton { position: relative; z-index: 2; }

.room .bouton--plein {
  background: var(--teinte, var(--accent));
  box-shadow: 0 10px 34px -12px var(--teinte, var(--accent));
}
.room .bouton--plein:hover { box-shadow: 0 16px 44px -10px var(--teinte, var(--accent)); }

.room .bouton--trait:hover {
  border-color: var(--teinte, var(--accent));
  color: var(--teinte, var(--accent));
}

.room .grille-tarifs { margin-block: .4rem 1.2rem; }

/* Badge « Sélection Luvia ». Généreusement dégagé : les règles d'usage du
   badge demandent un espace libre autour, et il n'est pas retouché. */
.luvia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .018);
  text-align: left;
}

.luvia__badge {
  display: block;
  flex: none;
  transition: transform var(--moyen);
}
.luvia__badge:hover { transform: translateY(-3px); }

.luvia__badge img {
  width: clamp(15rem, 26vw, 20rem);
  height: auto;
}

.luvia__mot {
  max-width: 34ch;
  color: var(--doux);
  font-size: .95rem;
}
.luvia__mot strong { color: var(--texte); font-weight: 500; }

@media (max-width: 620px) {
  .luvia { flex-direction: column; text-align: center; }
  .luvia__mot { max-width: 40ch; }
}

/* Le lieu. */
.lieu {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
}

.lieu__texte p { color: var(--doux); }

.reperes {
  margin-top: 2rem;
  list-style: none;
  border-top: 1px solid var(--trait);
}

.reperes li {
  display: flex;
  gap: 1.2rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--trait);
  font-size: .96rem;
}

.reperes strong {
  flex: none;
  width: 11rem;
  font-weight: 500;
  color: var(--texte);
}

.reperes span { color: var(--doux); }

.carte {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .02);
}

.carte iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg);
}

.carte__note {
  position: absolute;
  inset: auto 0 0;
  padding: .8rem 1rem;
  background: rgba(5, 4, 8, .82);
  backdrop-filter: blur(10px);
  font-size: .78rem;
  color: var(--doux);
}

/* Bandeau d'appel. */
.appel {
  position: relative;
  z-index: 2;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background:
    radial-gradient(120% 140% at 50% 0%, var(--voile) 0%, transparent 62%),
    rgba(255, 255, 255, .022);
  text-align: center;
  transition: background var(--lent), border-color var(--lent);
}

.appel h2 { margin-bottom: 1.1rem; }
.appel p { max-width: 52ch; margin: 0 auto 2.2rem; color: var(--doux); }

.appel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   10. PAGE LOGEMENT
   ------------------------------------------------------------------------ */

.couverture {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 92svh;
  padding: clamp(7rem, 14vh, 10rem) var(--marge) clamp(3rem, 8vh, 4.5rem);
}

.couverture__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: respire 26s ease-in-out infinite alternate;
}

@keyframes respire {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

.couverture::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--nuit) 2%, rgba(5, 4, 8, .35) 48%, rgba(5, 4, 8, .7) 100%),
    radial-gradient(80% 60% at 50% 100%, var(--voile) 0%, transparent 62%);
}

.couverture__contenu { width: min(100%, var(--large)); margin-inline: auto; }

.couverture__fil {
  margin-bottom: 1.4rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tres-doux);
}
.couverture__fil a:hover { color: var(--accent); }

.couverture__titre { font-size: clamp(3rem, 10vw, 7.5rem); font-weight: 400; }

.couverture__soustitre {
  margin-top: .6rem;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  font-style: italic;
  color: var(--accent);
  transition: color var(--lent);
}

.couverture__resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 2rem;
}

/* Barre de faits, juste sous la couverture. */
.faits {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-block: 1px solid var(--trait);
}

.faits div {
  padding: 1.6rem 1.2rem;
  border-left: 1px solid var(--trait);
}
.faits div:first-child { border-left: 0; }

.faits dt {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tres-doux);
}

.faits dd {
  margin-top: .5rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.25;
  text-wrap: balance;
}

/* Deux colonnes : le récit et le panneau de réservation. */
.logement {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) 22rem;
  align-items: start;
}

.recit p { margin-bottom: 1.3rem; color: var(--doux); }
.recit p:first-of-type {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.72rem);
  line-height: 1.42;
  color: var(--texte);
}
.recit .chute {
  margin-top: 2rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--accent);
  transition: color var(--lent);
}

.plus {
  margin-top: 2.4rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--trait);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  background: rgba(255, 255, 255, .022);
  transition: border-color var(--lent);
}

.plus h3 { font-size: 1.25rem; margin-bottom: .9rem; }

.plus ul { list-style: none; display: grid; gap: .55rem; }
.plus li { display: flex; gap: .7rem; color: var(--doux); font-size: .96rem; }
.plus li::before { content: '✦'; color: var(--accent); transition: color var(--lent); }

/* Panneau collant. */
.panneau {
  position: sticky;
  top: 6.5rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: rgba(10, 8, 14, .6);
  backdrop-filter: blur(20px);
  transition: border-color var(--lent);
}

.panneau__prix {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--display);
  font-size: 2.9rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  transition: color var(--lent);
}
.panneau__prix span {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 400;
  color: var(--doux);
}

.panneau__mention {
  margin-top: .6rem;
  font-size: .82rem;
  color: var(--tres-doux);
}

/* --- Calendrier de sélection des dates ---------------------------------- */

.calendrier {
  margin: 1.4rem 0 1.1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--trait);
}

.calendrier__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .9rem;
}

.calendrier__mois {
  font-family: var(--display);
  font-size: 1.12rem;
  text-transform: capitalize;
}

.calendrier__nav {
  width: 30px; height: 30px;
  display: grid;
  place-content: center;
  border: 1px solid var(--trait);
  border-radius: 50%;
  font-size: 1rem;
  color: var(--doux);
  transition: color var(--vif), border-color var(--vif), opacity var(--vif);
}
.calendrier__nav:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.calendrier__nav:disabled { opacity: .25; cursor: default; }

.calendrier__entetes,
.calendrier__jours {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.calendrier__entetes {
  margin-bottom: .4rem;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-align: center;
  color: var(--tres-doux);
}

.calendrier__jour {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border-radius: 8px;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  color: var(--texte);
  transition: background var(--vif), color var(--vif), box-shadow var(--vif);
}

.calendrier__jour:hover:not(:disabled) { background: rgba(255, 255, 255, .09); }

/* Une nuit déjà prise : barrée, jamais cliquable. */
.calendrier__jour:disabled {
  color: var(--tres-doux);
  cursor: default;
}
.calendrier__jour.est-prise::after {
  content: '';
  position: absolute;
  left: 22%; right: 22%;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: .55;
  rotate: -18deg;
}

.calendrier__jour.est-vide { visibility: hidden; }

/* La sélection : bornes pleines, nuits intermédiaires en aplat léger. */
.calendrier__jour.est-entre { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.calendrier__jour.est-borne {
  background: var(--accent);
  color: #06050a;
  font-weight: 600;
  box-shadow: 0 4px 14px -6px var(--accent);
}

/* --- Devis ------------------------------------------------------------- */

.devis {
  margin-bottom: 1.1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
}

.devis__vide { font-size: .84rem; color: var(--tres-doux); }

.devis__detail div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .88rem;
}
.devis__detail div + div {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--trait);
}
.devis__detail dt { color: var(--doux); }
.devis__detail dd { font-weight: 600; white-space: nowrap; }
.devis__total {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--accent);
  transition: color var(--lent);
}

.calendrier__tension {
  margin-top: .8rem;
  font-size: .78rem;
  color: var(--accent);
  transition: color var(--lent);
}
.calendrier__tension:empty { display: none; }

.panneau__rassurance {
  margin-top: .8rem;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--tres-doux);
}

.grille-tarifs {
  margin: 1.5rem 0;
  border-top: 1px solid var(--trait);
}
.grille-tarifs div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--trait);
  font-size: .92rem;
}
.grille-tarifs dt { color: var(--doux); }
.grille-tarifs dd { font-weight: 500; }

.panneau .bouton { width: 100%; justify-content: center; }
.panneau .bouton + .bouton { margin-top: .7rem; }

.panneau__contact {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--trait);
  font-size: .88rem;
  color: var(--doux);
}
.panneau__contact a { color: var(--accent); transition: color var(--lent); }
.panneau__contact a:hover { text-decoration: underline; }

/* Équipements. */
.equipements {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.equipements section h3 {
  padding-bottom: .7rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--trait);
  font-size: 1.15rem;
  color: var(--accent);
  transition: color var(--lent);
}

.equipements ul { list-style: none; display: grid; gap: .5rem; }
.equipements li { color: var(--doux); font-size: .94rem; }

.absents {
  margin-top: 2rem;
  padding: 1.1rem 1.4rem;
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  font-size: .9rem;
  color: var(--tres-doux);
}
.absents strong { color: var(--doux); font-weight: 500; }

/* Séjour : règles, arrivée, sécurité. */
.sejour {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.sejour article {
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .022);
}

.sejour h3 { font-size: 1.2rem; margin-bottom: .9rem; }
.sejour ul { list-style: none; display: grid; gap: .5rem; }
.sejour li { display: flex; gap: .65rem; color: var(--doux); font-size: .93rem; }
.sejour li::before { content: '—'; color: var(--accent); flex: none; transition: color var(--lent); }
.sejour p { color: var(--doux); font-size: .93rem; }

/* Navigation entre les rooms, en bas de page. */
.voisines {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.voisine {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 13rem;
  padding: 1.4rem;
  overflow: hidden;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  transition: border-color var(--moyen);
}

.voisine img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.22, 1, .36, 1);
}

.voisine::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(5, 4, 8, .92), rgba(5, 4, 8, .3)),
              linear-gradient(to top, var(--teinte-voile), transparent 60%);
}

.voisine:hover { border-color: var(--teinte); }
.voisine:hover img { transform: scale(1.07); }

.voisine strong {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--teinte);
}
.voisine span { font-size: .82rem; color: var(--doux); }

/* ---------------------------------------------------------------------------
   10 ter. GABARIT « FICHE » — dossier de présentation
   ----------------------------------------------------------------------------
   La photo tient à gauche pendant que le dossier défile à droite. Elle change
   au fil des chapitres : le lecteur voit toujours ce dont on lui parle.
   ------------------------------------------------------------------------ */

.dossier-section { padding-top: clamp(7rem, 16vh, 11rem); }

.dossier {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.dossier__media { position: sticky; top: 6.5rem; }

.dossier__cadre {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: rgba(255, 255, 255, .02);
}

.dossier__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .8s ease, transform 1.6s ease;
}

.dossier__photo.est-visible { opacity: 1; transform: none; }

/* --- Carrousel de vignettes, en bas à droite de la photo ---------------- */

.carrousel {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  left: .7rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
}

.carrousel__piste {
  display: flex;
  gap: .4rem;
  max-width: calc(100% - 3rem);
  padding: .35rem;
  border-radius: 12px;
  background: rgba(6, 5, 10, .55);
  backdrop-filter: blur(14px);
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carrousel__piste::-webkit-scrollbar { display: none; }

.carrousel__vignette {
  display: block;
  flex: none;
  width: 3.1rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  outline: 1px solid rgba(255, 255, 255, .18);
  outline-offset: -1px;
  transition: outline-color var(--vif), transform var(--vif);
}

.carrousel__vignette img { width: 100%; height: 100%; object-fit: cover; }

.carrousel__vignette:hover {
  transform: translateY(-2px);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.carrousel__fleche {
  flex: none;
  width: 2.2rem; height: 2.2rem;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: rgba(6, 5, 10, .62);
  backdrop-filter: blur(14px);
  border: 1px solid var(--trait);
  font-size: 1.1rem;
  color: var(--texte);
  transition: background var(--vif), color var(--vif), border-color var(--vif);
}
.carrousel__fleche:hover { background: var(--accent); color: #06050a; border-color: var(--accent); }

/* La pastille du haut ouvre la visionneuse sur la première photo. */
.carrousel__compte {
  position: absolute;
  top: .8rem; right: .8rem;
  z-index: 2;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: rgba(6, 5, 10, .62);
  backdrop-filter: blur(14px);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte);
  transition: background var(--vif), color var(--vif), border-color var(--vif);
}
.carrousel__compte:hover { background: var(--accent); color: #06050a; border-color: var(--accent); }
.carrousel__compte::before { content: '⛶ '; opacity: .7; }

.dossier__entete { margin-bottom: 2.2rem; }
.dossier__entete .couverture__titre { font-size: clamp(2.6rem, 6vw, 4.4rem); }

.dossier__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0 1.5rem;
  margin-bottom: 2.6rem;
  border-top: 1px solid var(--trait);
}

.dossier__specs div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--trait);
}

.dossier__specs dt {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tres-doux);
}
.dossier__specs dd { font-family: var(--display); font-size: 1.02rem; text-align: right; }

/* Une surface sous la colonne de lecture.
   L'éclair est déjà plus bas dans l'empilement que le texte, mais sans fond
   il le traverse visuellement et rend les paragraphes illisibles. Ce voile
   sombre le fait passer DERRIÈRE quelque chose : c'est ce qui crée la
   profondeur. Les bords sont estompés pour éviter l'effet « boîte ». */
.dossier__colonne,
.article__texte { position: relative; }

.dossier__colonne::before,
.article__texte::before {
  content: '';
  position: absolute;
  inset: -1.6rem -1.9rem;
  z-index: -1;
  border-radius: var(--rayon);
  background: rgba(5, 4, 8, .74);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 3.5rem, #000 calc(100% - 3.5rem), transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 3.5rem, #000 calc(100% - 3.5rem), transparent 100%);
}

.dossier__bloc {
  padding-top: 2.2rem;
  margin-top: 2.2rem;
  border-top: 1px solid var(--trait);
  scroll-margin-top: 7rem;
}

.dossier__bloc > h2 {
  margin-bottom: 1.2rem;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--accent);
  transition: color var(--lent);
}

.dossier__bloc h3 {
  margin: 1.6rem 0 .7rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tres-doux);
}

.dossier__bloc p { margin-bottom: 1rem; color: var(--doux); }
.dossier__bloc .chute {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--accent);
  transition: color var(--lent);
}

.fiche-liste {
  display: grid;
  gap: .45rem;
  list-style: none;
  margin-bottom: 1rem;
}
.fiche-liste li {
  display: flex;
  gap: .7rem;
  color: var(--doux);
  font-size: .95rem;
}
.fiche-liste li::before { content: '·'; color: var(--accent); flex: none; }

.dossier__panneau {
  position: static;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
}
.dossier__panneau .panneau__prix { display: none; }

/* ---------------------------------------------------------------------------
   11. GALERIE ET VISIONNEUSE
   ------------------------------------------------------------------------ */

/* Colonnes plutôt que grille : les photos gardent leur cadrage d'origine —
   portraits et paysages mêlés — et aucune case ne reste vide en fin de série. */
.galerie {
  --ecart: clamp(.5rem, 1vw, .85rem);
  columns: 3 19rem;
  column-gap: var(--ecart);
}

.galerie__vignette {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0 0 var(--ecart);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  break-inside: avoid;
  cursor: zoom-in;
}

.galerie__vignette img {
  width: 100%;
  height: auto;
  transition: transform 1s cubic-bezier(.22, 1, .36, 1), filter var(--moyen);
}

.galerie__vignette:hover img { transform: scale(1.06); filter: brightness(1.08); }

.galerie__legende {
  position: absolute;
  inset: auto 0 0;
  padding: 2.4rem .9rem .8rem;
  background: linear-gradient(to top, rgba(5, 4, 8, .88), transparent);
  font-size: .8rem;
  color: var(--texte);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--moyen), transform var(--moyen);
}

.galerie__vignette:hover .galerie__legende { opacity: 1; transform: translateY(0); }

/* Visionneuse plein écran. */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(3, 2, 5, .96);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--moyen), visibility var(--moyen);
}

.visionneuse.est-ouverte { opacity: 1; visibility: visible; }

.visionneuse__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem var(--marge);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--doux);
}

.visionneuse__scene {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 clamp(1rem, 6vw, 5rem);
  overflow: hidden;
}

.visionneuse__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 40px 120px -40px #000;
  animation: entre-image .5s cubic-bezier(.22, 1, .36, 1);
}

@keyframes entre-image {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

.visionneuse__legende {
  padding: 1.2rem var(--marge) 2rem;
  text-align: center;
  color: var(--doux);
  font-size: .92rem;
}

.visionneuse__fleche,
.visionneuse__fermer {
  display: grid;
  place-content: center;
  width: 3rem; height: 3rem;
  border: 1px solid var(--trait);
  border-radius: 50%;
  color: var(--texte);
  background: rgba(255, 255, 255, .04);
  transition: background var(--vif), border-color var(--vif), transform var(--vif);
}

.visionneuse__fleche:hover,
.visionneuse__fermer:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #06050a;
}

.visionneuse__fleche {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
}
.visionneuse__fleche--avant { left: clamp(.5rem, 2vw, 1.6rem); }
.visionneuse__fleche--apres { right: clamp(.5rem, 2vw, 1.6rem); }

/* ---------------------------------------------------------------------------
   11 bis. APPEL À L'ACTION FLOTTANT
   ----------------------------------------------------------------------------
   Le seul élément de la page qui ne bouge jamais. Il reste au pouce sur mobile,
   sous l'œil sur ordinateur, et n'est qu'à un clic du calendrier.
   ------------------------------------------------------------------------ */

.cta {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .8rem;
  pointer-events: none;
}

.cta > * { pointer-events: auto; }

/* --- Le bouton ---------------------------------------------------------- */

.cta__bouton {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.4rem .95rem 1.15rem;
  border-radius: 999px;
  background: var(--accent);
  color: #06050a;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 14px 40px -12px var(--accent), 0 2px 10px rgba(0, 0, 0, .5);
  transition: transform var(--vif), box-shadow var(--moyen), background var(--lent);
}

.cta__bouton:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 52px -12px var(--accent), 0 2px 10px rgba(0, 0, 0, .5);
}

/* Le point qui bat : il attire l'œil sans jamais bouger la mise en page. */
.cta__pouls {
  position: relative;
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #06050a;
}

.cta__pouls::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #06050a;
  animation: bat 2.4s ease-out infinite;
}

@keyframes bat {
  0%        { transform: scale(.6); opacity: .9; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}

.cta__badge {
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(6, 5, 10, .16);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
}

/* --- Le panneau des trois suites ---------------------------------------- */

.cta__panneau {
  position: relative;
  width: min(23rem, calc(100vw - 2 * clamp(1rem, 2.5vw, 2rem)));
  padding: 1.4rem 1.3rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--trait));
  border-radius: var(--rayon);
  background: rgba(9, 7, 13, .94);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 30px 70px -25px #000;
  transform-origin: bottom right;
  animation: deplie-cta .35s cubic-bezier(.22, 1, .36, 1);
}

@keyframes deplie-cta {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.cta__fermer {
  position: absolute;
  top: .7rem; right: .7rem;
  width: 28px; height: 28px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  color: var(--tres-doux);
  font-size: .8rem;
  transition: color var(--vif), background var(--vif);
}
.cta__fermer:hover { color: var(--texte); background: rgba(255, 255, 255, .08); }

.cta__titre {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.1;
  padding-right: 1.8rem;
}

.cta__sous {
  margin-top: .35rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--tres-doux);
}

.cta__liste {
  display: grid;
  gap: .5rem;
  margin: 1.1rem 0 1rem;
  list-style: none;
}

.cta__suite {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .55rem .7rem .55rem .55rem;
  border: 1px solid var(--trait);
  border-radius: 12px;
  transition: border-color var(--vif), background var(--vif), transform var(--vif);
}

.cta__suite:hover {
  transform: translateX(2px);
  border-color: var(--teinte);
  background: color-mix(in srgb, var(--teinte) 10%, transparent);
}

.cta__suite img {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 9px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--teinte) 45%, transparent);
}

.cta__suite-nom {
  font-family: var(--display);
  font-size: 1.08rem;
  line-height: 1.15;
  color: var(--teinte);
}
.cta__suite-nom small {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tres-doux);
}

.cta__suite-prix {
  text-align: right;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
}
.cta__suite-prix small {
  display: block;
  font-size: .66rem;
  font-weight: 400;
  color: var(--tres-doux);
}

.cta__suite.est-ici {
  border-color: color-mix(in srgb, var(--teinte) 55%, transparent);
  background: color-mix(in srgb, var(--teinte) 8%, transparent);
}

.cta__preuve {
  padding-top: .9rem;
  border-top: 1px solid var(--trait);
  font-size: .76rem;
  color: var(--doux);
}
.cta__preuve strong { color: var(--texte); font-weight: 600; }
.cta__preuve span {
  display: block;
  margin-top: .2rem;
  font-size: .72rem;
  color: var(--tres-doux);
}

/* Le CTA s'efface quand la visionneuse prend l'écran. */
.visionneuse.est-ouverte ~ .cta,
body:has(.visionneuse.est-ouverte) .cta { opacity: 0; visibility: hidden; }

/* … et, sur une page logement, quand le calendrier est déjà sous les yeux. */
.cta--room {
  transition: opacity var(--moyen), transform var(--moyen), visibility var(--moyen);
}
.cta--room.est-effacee {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

@media (max-width: 560px) {
  .cta { left: clamp(1rem, 2.5vw, 2rem); align-items: stretch; }
  .cta__bouton { justify-content: center; }
  .cta__libelle { letter-spacing: .08em; }
}

/* ---------------------------------------------------------------------------
   11 ter. LE JOURNAL
   ------------------------------------------------------------------------ */

.billets {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 1.9rem);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  list-style: none;
}

.billet__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .022);
  transition: transform var(--moyen), border-color var(--moyen);
}

.billet__lien:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--trait));
}

.billet__cadre { aspect-ratio: 16 / 10; overflow: hidden; }
.billet__cadre img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.billet__lien:hover .billet__cadre img { transform: scale(1.06); }

.billet__corps {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.billet__categorie,
.billet__meta {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tres-doux);
}
.billet__categorie { color: var(--accent); transition: color var(--lent); }
.billet__meta { margin-top: auto; padding-top: .6rem; }

.billet__titre { font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.2; }
.billet__chapo { color: var(--doux); font-size: .93rem; }

/* --- L'article ---------------------------------------------------------- */

.article__entete {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  min-height: 62svh;
  padding: clamp(7rem, 14vh, 10rem) 0 clamp(2.5rem, 6vh, 4rem);
}

.article__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
}

.article__entete::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--nuit) 3%, rgba(5, 4, 8, .5) 55%, rgba(5, 4, 8, .78) 100%),
    radial-gradient(80% 60% at 50% 100%, var(--voile) 0%, transparent 62%);
}

.article__entete h1 {
  max-width: 22ch;
  margin-top: .6rem;
  font-size: clamp(2.2rem, 5.6vw, 4.2rem);
}

.article__chapo {
  max-width: 58ch;
  margin-top: 1.2rem;
  color: var(--doux);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.article__meta {
  margin-top: 1.4rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tres-doux);
}

.article__corps {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
  padding-block: clamp(3rem, 8vh, 5rem);
}

.article__texte { max-width: 70ch; }

.article__sommaire {
  margin-bottom: 2.6rem;
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--trait);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  background: rgba(255, 255, 255, .022);
  transition: border-color var(--lent);
}

.article__sommaire p {
  margin-bottom: .7rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tres-doux);
}

.article__sommaire ol { padding-left: 1.1rem; display: grid; gap: .35rem; }
.article__sommaire li { color: var(--doux); font-size: .93rem; }
.article__sommaire a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.article__section { scroll-margin-top: 7rem; }
.article__section + .article__section { margin-top: 2.8rem; }

.article__section h2 {
  margin-bottom: 1.1rem;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.article__section h3 {
  margin: 1.9rem 0 .7rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--accent);
  transition: color var(--lent);
}

.article__section p { margin-bottom: 1.1rem; color: var(--doux); }

.article__liste { list-style: none; display: grid; gap: .6rem; margin-bottom: 1.3rem; }
.article__liste li { display: flex; gap: .8rem; color: var(--doux); }
.article__liste li::before { content: '—'; flex: none; color: var(--accent); transition: color var(--lent); }

.article__note {
  margin: 1.5rem 0;
  padding: 1.1rem 1.4rem;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--trait));
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.article__note p { margin: 0; color: var(--texte); font-size: .95rem; }

.article__tableau { margin: 1.5rem 0; overflow-x: auto; }
.article__tableau table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.article__tableau th,
.article__tableau td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--trait); }
.article__tableau th {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  transition: color var(--lent);
}
.article__tableau td { color: var(--doux); }
.article__tableau tbody tr:hover td { color: var(--texte); background: rgba(255, 255, 255, .03); }

.article__colonne { position: sticky; top: 6.5rem; }

.article__encart {
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: rgba(10, 8, 14, .55);
  backdrop-filter: blur(18px);
}

.article__rooms { list-style: none; display: grid; gap: .5rem; margin-top: 1rem; }

.article__rooms a {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: .8rem;
  padding: .5rem;
  border: 1px solid var(--trait);
  border-radius: 12px;
  transition: border-color var(--vif), background var(--vif);
}
.article__rooms a:hover {
  border-color: var(--teinte);
  background: color-mix(in srgb, var(--teinte) 10%, transparent);
}
.article__rooms img { width: 42px; height: 42px; object-fit: cover; border-radius: 9px; }
.article__rooms strong { display: block; font-family: var(--display); font-size: 1.02rem; color: var(--teinte); }
.article__rooms small { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tres-doux); }

@media (max-width: 1080px) {
  .article__corps { grid-template-columns: 1fr; }
  .article__colonne { position: static; }
}

/* ---------------------------------------------------------------------------
   12. QUESTIONS FRÉQUENTES
   ------------------------------------------------------------------------ */

.faq { max-width: 54rem; margin-inline: auto; }

.faq details {
  border-bottom: 1px solid var(--trait);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.12rem, 2vw, 1.42rem);
  transition: color var(--vif);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

.faq summary::after {
  content: '+';
  flex: none;
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 200;
  color: var(--accent);
  transition: transform var(--moyen), color var(--lent);
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p {
  padding: 0 0 1.5rem;
  max-width: 62ch;
  color: var(--doux);
  animation: deplie .4s ease;
}

@keyframes deplie {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------------
   13. PIED DE PAGE
   ------------------------------------------------------------------------ */

.pied {
  position: relative;
  z-index: 2;
  padding: clamp(3.5rem, 8vh, 6rem) 0 2.5rem;
  border-top: 1px solid var(--trait);
  background: rgba(3, 2, 5, .55);
}

.pied__grille {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(11rem, 1fr));
  margin-bottom: 3rem;
}

.pied h2 {
  font-size: 1.6rem;
  letter-spacing: .2em;
  margin-bottom: .9rem;
}

.pied p, .pied li, .pied address {
  color: var(--doux);
  font-size: .92rem;
  font-style: normal;
}

.pied h3 {
  margin-bottom: 1rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tres-doux);
}

.pied ul { list-style: none; display: grid; gap: .55rem; }
.pied a { transition: color var(--vif); }
.pied a:hover { color: var(--accent); }

.pied__signature a {
  color: var(--accent);
  transition: color var(--lent);
}
.pied__signature a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--trait);
  font-size: .8rem;
  color: var(--tres-doux);
}

/* ---------------------------------------------------------------------------
   14. PAGES DE TEXTE
   ------------------------------------------------------------------------ */

.texte {
  max-width: var(--lisible);
  margin-inline: auto;
}

.texte h2 { margin: 2.6rem 0 1rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.texte h3 { margin: 1.8rem 0 .7rem; font-size: 1.2rem; }
.texte p, .texte li { color: var(--doux); margin-bottom: .9rem; }
.texte ul, .texte ol { padding-left: 1.3rem; }
.texte a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.contact-liste {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 2rem 0;
  list-style: none;
  padding: 0;
}

.contact-liste li {
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  margin: 0;
}

.contact-liste strong {
  display: block;
  margin-bottom: .4rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tres-doux);
}

.contact-liste a { font-size: 1.1rem; color: var(--accent); text-decoration: none; }
.contact-liste a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   15. RÉVÉLATIONS AU DÉFILEMENT
   ------------------------------------------------------------------------ */

.revele {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .95s cubic-bezier(.22, 1, .36, 1),
              transform .95s cubic-bezier(.22, 1, .36, 1);
}

.revele.est-revele { opacity: 1; transform: none; }

.revele[data-retard='1'] { transition-delay: .1s; }
.revele[data-retard='2'] { transition-delay: .2s; }
.revele[data-retard='3'] { transition-delay: .3s; }
.revele[data-retard='4'] { transition-delay: .4s; }

/* ---------------------------------------------------------------------------
   16. ADAPTATIONS MOBILES
   ------------------------------------------------------------------------ */

@media (max-width: 1080px) {
  .logement { grid-template-columns: 1fr; }
  .panneau { position: static; }
  .lieu { grid-template-columns: 1fr; }
  .carte { aspect-ratio: 16 / 10; }

  /* Sur une colonne, la photo ne colle plus : elle passe au-dessus du dossier. */
  .dossier { grid-template-columns: 1fr; }
  .dossier__media { position: static; }
  .dossier__cadre { aspect-ratio: 16 / 11; }
  .dossier-section { padding-top: clamp(6rem, 12vh, 8rem); }
}

@media (max-width: 900px) {
  .burger { display: grid; }

  /* Le panneau du menu est positionné : sans ce rappel, il recouvrirait la
     marque et le bouton, qui sont ses frères dans l'en-tête. */
  .marque, .burger { position: relative; z-index: 2; }

  .nav {
    position: fixed;
    inset: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem var(--marge) 2rem;
    background: rgba(5, 4, 8, .96);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--trait);
    transform: translateY(-102%);
    transition: transform var(--moyen);
    font-size: .92rem;
  }

  .nav.est-ouverte { transform: translateY(0); }
  .nav a { padding: 1rem 0; border-bottom: 1px solid var(--trait); }
  .nav a::after { display: none; }

  .fiche__grille { grid-template-columns: 1fr; }
  .fiche__prix { text-align: left; }
  .fiche__meta { margin-left: 0; }

  .reperes li { flex-direction: column; gap: .2rem; }
  .reperes strong { width: auto; }

  .faits div { border-left: 0; border-top: 1px solid var(--trait); }
  .faits div:first-child { border-top: 0; }
}

@media (max-width: 640px) {
  .bulles { gap: .7rem; align-items: start; }
  .bulle { width: min(28vw, 7.5rem); }
  .bulle__bouton { width: 100%; }
  .bulle__nom { font-size: .98rem; line-height: 1.15; }
  .bulle__genre { font-size: .58rem; letter-spacing: .12em; }
  .bulle__prix { margin-top: .35rem; padding: .22rem .5rem; font-size: .63rem; gap: .3rem; }
  .hall { padding-top: 6.5rem; }
  .etiquette { padding: .3rem .7rem; font-size: .66rem; }
  .galerie { columns: 2 9rem; }
  .bouton { padding: .85rem 1.4rem; font-size: .76rem; }
  .pied__grille { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   17. MOUVEMENT RÉDUIT ET IMPRESSION
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .revele { opacity: 1; transform: none; }
  .grain, .particules, .halo { display: none; }
}

@media print {
  .entete, .pied, .prechargeur, .grain, .particules, .halo,
  .ambiance, .visionneuse, .bulles, .appel { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}