/* ==========================================================================
   LA DEMEURE ENCHANTÉE — Feuille de style unique
   Cabane perchée · La Bresse, Vosges
   --------------------------------------------------------------------------
   1.  Jetons & remise à zéro     13. Espaces (les contes)
   2.  Typographie & révélations  14. Équipements
   3.  Préchargeur & volets       15. Galerie
   4.  Curseur                    16. Visionneuse
   5.  Navigation & menu          17. Manifeste & chiffres
   6.  Boutons & liens            18. FAQ
   7.  Hero                       19. Bande d'appel
   8.  Bandeau défilant           20. Pied de page
   9.  Sections & lueurs          21. Page cabane & pages internes
   10. Cartes                     22. Tunnel de réservation
   11. Portrait animé             23. Pages légales, 404, repères
   12. Déroulé (chronologie)      24. RESPONSIVE   25. Mouvement réduit
   --------------------------------------------------------------------------
   ORDRE DE LA CASCADE : les media queries responsive (24) restent APRÈS tous
   les blocs de composants, et le mouvement réduit (25) ferme le fichier.
   ========================================================================== */


/* ==================== 1. JETONS & REMISE À ZÉRO ========================== */

/* Couleurs animables : sans @property, une transition sur une variable de
   couleur ne s'interpole pas — elle saute d'une valeur à l'autre. */
@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #c8a24a;
}
@property --accent-2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #e6c87e;
}

:root {
  /* Nuit sous les arbres — un noir très légèrement vert */
  --nuit: #060907;
  --nuit-2: #0a0e0c;
  --nuit-3: #101613;
  --nuit-4: #18211c;

  /* Matières */
  --ecorce: #2b211a;
  --bois: #3d2c1e;
  --mousse: #3f5c46;
  --bordeaux: #6d2230;
  --givre: #7fb0b8;

  /* Lumières */
  --parchemin: #efe7d8;
  --doux: rgba(239, 231, 216, 0.62);
  --pale: rgba(239, 231, 216, 0.38);
  --filet: rgba(239, 231, 216, 0.1);
  --filet-fort: rgba(239, 231, 216, 0.21);

  /* Accent — mué au fil du défilement (voir [data-accent]) */
  --accent: #c8a24a;
  --accent-2: #e6c87e;
  --lueur: 200, 162, 74;

  /* Typographie */
  /* ── TYPOGRAPHIE MÉDIÉVALE ──────────────────────────────────────────────
     --display  les titres. MedievalSharp est franchement médiévale tout en
                restant lisible, y compris en capitales.
     --gothique le gothique pur, réservé aux très grands titres : au-delà de
                trois mots il devient pénible, et en capitales, illisible.
     --serif    le texte courant. EB Garamond est un caractère de la
                Renaissance — d'époque, et lisible à petite taille.

     POUR TOUT PASSER EN GOTHIQUE : donner var(--gothique) à --display. */
  --display: 'MedievalSharp', 'UnifrakturMaguntia', Georgia, serif;
  --gothique: 'UnifrakturMaguntia', 'MedievalSharp', Georgia, serif;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'EB Garamond', Georgia, 'Times New Roman', serif;

  /* Rythme */
  --gouttiere: clamp(1.15rem, 4vw, 3.5rem);
  --coque: 1300px;
  --section-y: clamp(4.5rem, 11vh, 9rem);

  /* Courbes */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --rayon: 3px;

  color-scheme: dark;
}

/* Les quatre ambiances chromatiques du site */
[data-accent='or'] {
  --accent: #c8a24a;
  --accent-2: #e6c87e;
  --lueur: 200, 162, 74;
}
[data-accent='foret'] {
  --accent: #77a173;
  --accent-2: #c8a24a;
  --lueur: 119, 161, 115;
}
[data-accent='contes'] {
  --accent: #b8566b;
  --accent-2: #e0a95f;
  --lueur: 184, 86, 107;
}
[data-accent='nordique'] {
  --accent: #6fb3c0;
  --accent-2: #a9d7d0;
  --lueur: 111, 179, 192;
}
[data-accent='astres'] {
  --accent: #8fa2ee;
  --accent-2: #d9d0f5;
  --lueur: 143, 162, 238;
}

html {
  /* la mue chromatique, section après section */
  transition: --accent 1.2s var(--ease), --accent-2 1.2s var(--ease);
}

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

* {
  margin: 0;
  padding: 0;
}

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

body {
  position: relative;
  background: var(--nuit);
  color: var(--parchemin);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.est-bloque {
  overflow: hidden;
}

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

img {
  height: auto;
}

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

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

ul,
ol {
  list-style: none;
}

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

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

/* Vignettage : les bords de l'écran s'assombrissent, l'œil va au centre. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  background: radial-gradient(
    118% 82% at 50% 44%,
    transparent 42%,
    rgba(3, 5, 4, 0.34) 78%,
    rgba(3, 5, 4, 0.66) 100%
  );
}

/* Grain de film : la texture qui empêche les dégradés de « bander ». */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
  will-change: transform;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  16% { transform: translate(-2%, -3%); }
  33% { transform: translate(3%, -2%); }
  50% { transform: translate(-1%, 2%); }
  66% { transform: translate(2%, 3%); }
  83% { transform: translate(-3%, 1%); }
}

/* Poussière dorée & étincelles du curseur — une seule toile pour tout.
   Au-dessus du contenu, sous la barre de navigation. */
.poussiere {
  position: fixed;
  inset: 0;
  z-index: 880;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* Les ancres (#reserver, #espaces…) ne doivent jamais atterrir sous la
   barre de navigation fixe. */
[id] {
  scroll-margin-top: 6rem;
}

.shell {
  width: 100%;
  max-width: var(--coque);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.shell--etroit {
  max-width: 860px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 1rem 1.5rem;
  background: var(--accent);
  color: #14100a;
}
.skip-link:focus {
  left: 0;
}


/* ===================== 2. TYPOGRAPHIE & RÉVÉLATIONS ====================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.005em;
}

.titre-xl { font-size: clamp(2.35rem, 6.6vw, 5.6rem); line-height: 1.04; }
.titre-l  { font-size: clamp(2rem, 5vw, 4.1rem); }
.titre-m  { font-size: clamp(1.65rem, 3.5vw, 2.9rem); }
.titre-s  { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }

/* L'italique du site : Cormorant, plus ronde et plus chaude que Cinzel. */
em,
.italique {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
}

h1 em, h2 em, h3 em {
  font-size: 1.1em;
  color: var(--accent-2);
}

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--pale);
}

.surtitre::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.9;
}

.surtitre--centre::after {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.9;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.6vw, 1.42rem);
  line-height: 1.62;
  color: var(--doux);
  max-width: 60ch;
}

.tete-section {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: clamp(2.2rem, 5.5vw, 4rem);
}

.tete-section--centre {
  align-items: center;
  text-align: center;
}

.accent { color: var(--accent); }

.filet-h {
  height: 1px;
  background: var(--filet);
  border: 0;
}

/* --- Révélations au défilement ------------------------------------------
   Tous les états « masqués » sont conditionnés à la classe .js posée par un
   script inline en fin de <head>. Sans JavaScript — ou si le script casse —
   la page s'affiche entièrement au lieu de rester blanche. */

.reveal {
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
}
.js .reveal.est-la {
  opacity: 1;
  transform: none;
}

/* Volet qui se lève sur un visuel.
   ⚠️ PIÈGE MAJEUR : le clip-path est posé sur les ENFANTS, jamais sur
   l'élément observé. Un élément clippé à 0 % de hauteur a un rectangle
   d'intersection nul : l'IntersectionObserver ne le verrait jamais entrer
   dans l'écran et le contenu resterait invisible à vie. */
.reveal-volet > * {
  transition: clip-path 1.25s var(--ease), transform 1.6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal-volet > * {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
}
.js .reveal-volet.est-la > * {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* Titre qui monte ligne à ligne */
.ligne-sc {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.ligne-sc > span {
  display: inline-block;
  transition: transform 1.2s var(--ease), opacity 1.2s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .ligne-sc > span {
  transform: translateY(108%);
  opacity: 0;
}
.js .est-la .ligne-sc > span,
.js .ligne-sc.est-la > span {
  transform: none;
  opacity: 1;
}

/* Écriture à la plume : le script découpe le texte en lettres et pose --n.
   Sans JavaScript, aucun découpage n'a lieu : le titre s'affiche tel quel. */
.plume i {
  font-style: inherit;
  display: inline-block;
  opacity: 0;
  transform: translateY(0.16em) rotate(-4deg);
  filter: blur(3px);
  transition: opacity 0.5s linear, transform 0.55s var(--ease), filter 0.5s linear;
  transition-delay: calc(var(--n, 0) * 26ms + var(--d, 0ms));
}
.plume.est-la i {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Le trait d'encre qui court sous le titre pendant l'écriture */
.plume {
  position: relative;
}
.plume::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.12em;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 1.6s var(--ease), opacity 0.8s;
}
.plume.est-la::after {
  transform: scaleX(1);
  opacity: 0.65;
}

/* Sans JS : ni préchargeur, ni volets, ni curseur — ils resteraient figés. */
html:not(.js) .preloader,
html:not(.js) .rideau,
html:not(.js) .curseur,
html:not(.js) .poussiere {
  display: none;
}


/* ==================== 3. PRÉCHARGEUR & VOLETS ============================ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(200, 162, 74, 0.07), transparent 70%),
    var(--nuit);
  transition: opacity 0.75s var(--ease), visibility 0.75s;
}

.preloader.est-fini {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  transition: opacity 0.5s var(--ease), transform 0.8s var(--ease);
}

.preloader.est-fini .preloader__inner {
  opacity: 0;
  transform: translateY(-16px);
}

/* La lanterne oscille très légèrement, comme suspendue à une branche. */
.lanterne-wrap {
  transform-origin: 50% 4%;
  animation: balance 5.2s ease-in-out infinite;
}
@keyframes balance {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

.lanterne {
  width: clamp(112px, 26vw, 148px);
  height: auto;
  overflow: visible;
}

.lanterne__crochet,
.lanterne__anse,
.lanterne__toit,
.lanterne__cage,
.lanterne__barreaux,
.lanterne__socle {
  fill: none;
  stroke: rgba(239, 231, 216, 0.4);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lanterne__toit,
.lanterne__socle {
  fill: rgba(43, 33, 26, 0.9);
  stroke: var(--accent);
  stroke-width: 1.6;
}
.lanterne__cage {
  fill: rgba(255, 180, 87, 0.05);
}
.lanterne__barreaux {
  stroke-width: 1.2;
  opacity: 0.55;
}

/* La flamme se lève, puis vacille sans fin */
.lanterne__flamme {
  fill: var(--accent-2);
  transform-origin: 60px 92px;
  transform-box: fill-box;
  animation: flammeLevee 1.1s var(--ease) forwards, flammeVacille 2.3s ease-in-out 1.1s infinite;
}
@keyframes flammeLevee {
  from { transform: scaleY(0.05); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
@keyframes flammeVacille {
  0%, 100% { transform: scale(1, 1) translateX(0); opacity: 1; }
  28%      { transform: scale(0.93, 1.07) translateX(-0.6px); opacity: 0.9; }
  55%      { transform: scale(1.05, 0.95) translateX(0.5px); opacity: 1; }
  78%      { transform: scale(0.97, 1.03) translateX(-0.3px); opacity: 0.94; }
}

.lanterne__halo {
  fill: var(--accent);
  opacity: 0;
  filter: blur(16px);
  animation: haloOuvre 1.6s var(--ease) 0.3s forwards, haloRespire 3.4s ease-in-out 1.9s infinite;
}
@keyframes haloOuvre {
  to { opacity: 0.3; }
}
@keyframes haloRespire {
  0%, 100% { opacity: 0.24; }
  50%      { opacity: 0.4; }
}

/* La jauge circulaire — remplie par le script (strokeDashoffset). */
.lanterne__jauge-fond,
.lanterne__jauge {
  fill: none;
  stroke-width: 1.4;
  transform: rotate(-90deg);
  transform-origin: 60px 92px;
}
.lanterne__jauge-fond {
  stroke: rgba(239, 231, 216, 0.09);
}
.lanterne__jauge {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 0.25s linear;
}

.preloader__mot {
  font-family: var(--display);
  font-size: clamp(0.95rem, 2.6vw, 1.32rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--parchemin);
  text-align: center;
}
.preloader__mot i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.06em;
  font-size: 1.24em;
  color: var(--accent-2);
}

.preloader__pct {
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  color: var(--pale);
  font-variant-numeric: tabular-nums;
}

/* --- Les deux volets de bois -------------------------------------------- */

.rideau {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.rideau span {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.16) 0 2px,
      transparent 2px 26px
    ),
    linear-gradient(180deg, var(--nuit-2), var(--nuit));
  transform: scaleX(1);
}
.rideau span:nth-child(1) { transform-origin: left; }
.rideau span:nth-child(2) { transform-origin: right; }
/* La couture lumineuse au centre */
.rideau i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: 0;
}
.rideau.est-ouvert span {
  transition: transform 1.15s var(--ease);
  transform: scaleX(0);
}
.rideau.est-ouvert i {
  animation: couture 0.9s var(--ease);
}
@keyframes couture {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}
.rideau.est-parti { display: none; }


/* ============================== 4. CURSEUR =============================== */

.curseur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9995;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.curseur.est-actif {
  opacity: 1;
}

.curseur__point {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px 2px rgba(var(--lueur), 0.85);
  transform: translate(-50%, -50%);
}

.curseur__anneau {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--lueur), 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.35s var(--ease), height 0.35s var(--ease),
    border-color 0.35s, background 0.35s;
}

.curseur.est-survol .curseur__anneau {
  width: 72px;
  height: 72px;
  background: rgba(var(--lueur), 0.1);
  border-color: rgba(var(--lueur), 0.25);
}

.curseur__mot {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-size: 0.54rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-2);
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}
.curseur.est-etiquete .curseur__mot {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .curseur { display: none; }
}


/* ======================= 5. NAVIGATION & MENU ============================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding-block: 1.25rem;
  border-bottom: 1px solid transparent;
  transition: padding 0.5s var(--ease), background 0.5s var(--ease),
    border-color 0.5s, backdrop-filter 0.5s;
}

.nav.est-collee {
  padding-block: 0.7rem;
  background: rgba(6, 9, 7, 0.78);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border-bottom-color: var(--filet);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.marque__blason {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  overflow: visible;
}
.blason__ecu {
  fill: rgba(200, 162, 74, 0.06);
  stroke: var(--filet-fort);
  stroke-width: 2;
}
/* La baguette de l'écu : fût effilé, poignée plus épaisse, étincelle à la
   pointe. Même vocabulaire que le curseur. */
.blason__baguette {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0.92;
}
.blason__poignee {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4.6;
  stroke-linecap: round;
  opacity: 0.75;
}
.blason__etincelle {
  fill: var(--accent-2);
}
.blason__astre {
  fill: var(--accent-2);
}

.marque__mot {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.marque__mot b {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marque__mot b i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 1.24em;
  color: var(--accent-2);
}
.marque__mot small {
  font-size: 0.48rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pale);
  margin-top: 0.34rem;
  white-space: nowrap;
}

.nav__liens {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.4rem);
}

.nav__lien {
  position: relative;
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--doux);
  padding-block: 0.4rem;
  transition: color 0.35s;
}

.nav__lien::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}

.nav__lien:hover,
.nav__lien[aria-current='page'] {
  color: var(--parchemin);
}
.nav__lien:hover::after,
.nav__lien[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__droite {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 1002;
}
.nav__burger span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1px;
  background: var(--parchemin);
  transition: transform 0.5s var(--ease), opacity 0.3s;
}
.nav__burger span:nth-child(1) { top: 18px; }
.nav__burger span:nth-child(2) { top: 25px; }
.nav__burger.est-ouvert span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__burger.est-ouvert span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* --- Menu plein écran --------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--nuit-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gouttiere) 3rem;
  clip-path: circle(0% at calc(100% - 3rem) 2.6rem);
  transition: clip-path 0.9s var(--ease);
  pointer-events: none;
}
.menu.est-ouvert {
  clip-path: circle(150% at calc(100% - 3rem) 2.6rem);
  pointer-events: auto;
}

/* Une voûte de lumière chaude, comme une lanterne posée dans un coin */
.menu__voute {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 46% at 82% 14%, rgba(var(--lueur), 0.2), transparent 72%),
    radial-gradient(70% 50% at 10% 96%, rgba(63, 92, 70, 0.16), transparent 74%);
  pointer-events: none;
}

.menu__liste {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  position: relative;
}

.menu__liste a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 7.5vw, 2.9rem);
  font-weight: 400;
  line-height: 1.34;
  color: var(--parchemin);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.3s;
}
.menu.est-ouvert .menu__liste a {
  opacity: 1;
  transform: none;
}
.menu__liste li:nth-child(1) a { transition-delay: 0.16s; }
.menu__liste li:nth-child(2) a { transition-delay: 0.22s; }
.menu__liste li:nth-child(3) a { transition-delay: 0.28s; }
.menu__liste li:nth-child(4) a { transition-delay: 0.34s; }
.menu__liste li:nth-child(5) a { transition-delay: 0.40s; }
.menu__liste a:hover { color: var(--accent-2); }

.menu__num {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--accent);
  opacity: 0.75;
}

.menu__pied {
  position: relative;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  font-size: 0.78rem;
  color: var(--doux);
}

/* --- Barre d'appel mobile ---------------------------------------------- */

.barre {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 890;
  display: none;
  padding: 0.65rem var(--gouttiere) calc(0.65rem + env(safe-area-inset-bottom));
  background: rgba(6, 9, 7, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--filet);
  transform: translateY(110%);
  transition: transform 0.55s var(--ease);
}
.barre.est-montee {
  transform: none;
}
.barre .btn {
  width: 100%;
  justify-content: center;
}


/* ========================== 6. BOUTONS & LIENS =========================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem 1.9rem;
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchemin);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
  white-space: nowrap;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(118deg, var(--accent), var(--accent-2));
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}

.btn:hover::before { transform: none; }
.btn:hover {
  color: #14100a;
  border-color: transparent;
}

.btn__fleche {
  width: 14px;
  height: 9px;
  flex-shrink: 0;
  transition: transform 0.45s var(--ease);
}
.btn:hover .btn__fleche { transform: translateX(5px); }

.btn--or {
  border-color: transparent;
  color: #14100a;
}
.btn--or::before { transform: none; }
.btn--or:hover::before { transform: none; filter: brightness(1.12); }
.btn--or:hover { color: #14100a; }

.btn--fantome { border-color: var(--filet-fort); }

.btn--petit {
  padding: 0.72rem 1.25rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
}

.btn--large { width: 100%; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchemin);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--filet-fort);
  transition: border-color 0.4s, color 0.4s, gap 0.4s var(--ease);
}
.lien-fleche:hover {
  color: var(--accent-2);
  border-color: var(--accent);
  gap: 1.1rem;
}


/* ================================ 7. HERO ================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 8rem clamp(2.5rem, 7vh, 4.2rem);
  overflow: hidden;
  isolation: isolate;
}

/* La toile du ciel étoilé — derrière tout le reste du hero. */
.hero__ciel {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
}

/* Le visuel d'ouverture, en fondu sous le ciel. */
.hero__cadre {
  position: absolute;
  inset: -6% 0 0;
  z-index: -2;
  opacity: 0.5;
}
.hero__cadre img {
  width: 100%;
  height: 106%;
  object-fit: cover;
  will-change: transform;
}

/* Les silhouettes de sapins, en parallaxe lente */
.hero__couvert {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -2%;
  z-index: -1;
  height: 46%;
  opacity: 0.9;
  will-change: transform;
}
.hero__couvert svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero__couvert path {
  fill: #040605;
}

.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 9, 7, 0.86) 0%, rgba(6, 9, 7, 0.18) 34%, rgba(6, 9, 7, 0.74) 74%, var(--nuit) 100%),
    radial-gradient(80% 52% at 50% 100%, rgba(var(--lueur), 0.17), transparent 72%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  width: 100%;
  display: grid;
  gap: clamp(1.3rem, 3.4vw, 2.4rem);
}

/* 16ch était taillé pour « Dormir une nuit » (15 signes). « Expérience
   immersive » en compte 20, et la gothique est large : la ligne se coupait en
   deux, le titre passait à trois lignes et poussait « Réserver » sous le bas
   d'un écran 1440×900. 21ch la laisse tenir sur une ligne. */
.hero h1 {
  max-width: 21ch;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.hero__faits {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 2.6vw, 2.4rem);
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--pale);
}
.hero__faits li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero__faits li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Invitation à défiler — colonne verticale sur le bord droit */
.hero__indice {
  position: absolute;
  right: var(--gouttiere);
  bottom: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--display);
  font-size: 0.53rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pale);
}
.hero__indice span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.hero__indice i {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--accent), transparent);
  animation: indice 2.4s var(--ease-io) infinite;
  transform-origin: top;
}
@keyframes indice {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(44px); opacity: 0; }
}


/* ======================= 8. BANDEAU DÉFILANT ============================= */

.incant {
  position: relative;
  padding-block: 1.25rem;
  border-block: 1px solid var(--filet);
  overflow: hidden;
  background: var(--nuit-2);
}

.incant__voie {
  display: flex;
  width: max-content;
  animation: defile 52s linear infinite;
}

.incant:hover .incant__voie {
  animation-play-state: paused;
}

.incant__voie span {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  padding-right: 2.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  letter-spacing: 0.05em;
  color: var(--doux);
  white-space: nowrap;
}

.incant__voie span::after {
  content: '✦';
  font-style: normal;
  color: var(--accent);
  font-size: 0.58em;
}

@keyframes defile {
  to { transform: translateX(-50%); }
}


/* ====================== 9. SECTIONS & LUEURS ============================= */

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--sombre { background: var(--nuit-2); }
.section--filet { border-block: 1px solid var(--filet); }

/* Halo de lanterne posé derrière une section */
.section__lueur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(52% 44% at var(--lx, 22%) var(--ly, 18%), rgba(var(--lueur), 0.13), transparent 72%);
}

/* Bougie / lanterne animée : un halo qui vacille, sans image. */
.lueur-bougie {
  position: absolute;
  width: clamp(150px, 22vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 180, 87, 0.3), rgba(255, 180, 87, 0.07) 46%, transparent 70%);
  filter: blur(14px);
  animation: vacille 4.1s ease-in-out infinite;
  will-change: opacity, transform;
}
.lueur-bougie--2 { animation-duration: 5.7s; animation-delay: -1.4s; }
.lueur-bougie--3 { animation-duration: 3.3s; animation-delay: -2.6s; }

@keyframes vacille {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  22%      { opacity: 0.82; transform: scale(1.045); }
  46%      { opacity: 0.46; transform: scale(0.975); }
  71%      { opacity: 0.74; transform: scale(1.025); }
}

/* Colonne de texte longue */
.prose > * + * { margin-top: 1.1rem; }
.prose h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-top: 2.6rem;
  margin-bottom: 0.2rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin-top: 2rem;
}
.prose p { color: var(--doux); }
.prose strong { color: var(--parchemin); font-weight: 500; }
.prose ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  color: var(--doux);
}
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
}
.prose ul li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: -0.06em;
  color: var(--accent);
  font-size: 0.72em;
}
.prose a {
  color: var(--accent-2);
  border-bottom: 1px solid rgba(var(--lueur), 0.45);
  transition: border-color 0.3s;
}
.prose a:hover { border-bottom-color: var(--accent-2); }

/* Deux colonnes texte + visuel */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5.5vw, 5.5rem);
  align-items: center;
}
.duo--inverse .duo__figure { order: -1; }

.duo__texte {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: flex-start;
}
.duo__texte p { color: var(--doux); max-width: 52ch; }

.duo__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--rayon);
  border: 1px solid var(--filet);
}
.duo__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =============================== 10. CARTES ============================== */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--nuit-3);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.carte:hover {
  border-color: rgba(var(--lueur), 0.45);
  transform: translateY(-4px);
}

.carte__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.carte__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.carte:hover .carte__media img { transform: scale(1.06); }

.carte__etiquette {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  padding: 0.28rem 0.6rem;
  font-family: var(--display);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchemin);
  background: rgba(6, 9, 7, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--filet);
  border-radius: 2px;
}

.carte__corps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.3rem 1.3rem 1.5rem;
  flex: 1;
}
.carte__corps h3 { font-size: 1.35rem; }
.carte__corps p {
  font-size: 0.9rem;
  color: var(--doux);
  flex: 1;
}
.carte__couchage {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--accent-2);
}
.carte__couchage .ic {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}


/* =========================== 11. PORTRAIT ANIMÉ ========================== */
/* Une image qui s'anime au survol : zoom très lent + grain propre à la
   vignette. Sur mobile (pointeur grossier) l'animation ne se déclenche pas. */

.portrait {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
  border: 1px solid var(--filet);
  isolation: isolate;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 7s linear, filter 1.2s var(--ease);
  filter: saturate(0.86) contrast(1.04);
}

.portrait::after {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");
  transition: opacity 0.7s;
  animation: grain 5s steps(5) infinite;
}

/* Un lent balayage de lumière, comme une lanterne qu'on passe devant */
.portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgba(255, 214, 150, 0.14) 50%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 1.3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .portrait:hover img {
    transform: scale(1.085);
    filter: saturate(1) contrast(1.08);
  }
  .portrait:hover::after { opacity: 0.09; }
  .portrait:hover::before { transform: translateX(120%); }
}

.portrait__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 2.6rem 1.2rem 1rem;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchemin);
  background: linear-gradient(transparent, rgba(6, 9, 7, 0.88));
}


/* ====================== 12. DÉROULÉ (CHRONOLOGIE) ======================== */

.deroule__inner {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2rem, 5.5vw, 5.5rem);
  align-items: start;
}

.deroule__colle {
  position: sticky;
  top: 17vh;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  align-items: flex-start;
}

.deroule__visuel {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
  border-radius: var(--rayon);
  border: 1px solid var(--filet);
}
.deroule__visuel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1s var(--ease), transform 1.7s var(--ease);
}
.deroule__visuel img.est-active {
  opacity: 1;
  transform: none;
}

.deroule__etapes {
  position: relative;
  padding-left: 3rem;
}

.deroule__fil {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--filet);
}
.deroule__fil i {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: linear-gradient(var(--accent), var(--accent-2));
  transition: height 0.15s linear;
}

.deroule__etape {
  position: relative;
  padding-block: clamp(1.4rem, 3.6vh, 2.4rem);
}

.deroule__etape::before {
  content: '';
  position: absolute;
  left: -3rem;
  top: calc(clamp(1.4rem, 3.6vh, 2.4rem) + 0.5rem);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--filet-fort);
  background: var(--nuit);
  transform: translateX(1.5px);
  transition: border-color 0.5s, background 0.5s, box-shadow 0.5s;
}

.deroule__etape.est-la::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(var(--lueur), 0.16);
}

.deroule__heure {
  display: block;
  font-family: var(--display);
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
}

.deroule__etape h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  margin-bottom: 0.5rem;
}

.deroule__etape p {
  color: var(--doux);
  font-size: 0.94rem;
  max-width: 46ch;
}


/* ============================ 13. ESPACES ================================ */
/* Les cinq espaces nommés, en bandes alternées.                            */

.espace {
  position: relative;
  padding-block: clamp(3rem, 8vh, 6rem);
  border-top: 1px solid var(--filet);
}

.espace__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.8rem, 5vw, 5rem);
  align-items: center;
}

.espace:nth-child(even) .espace__figure { order: -1; }

.espace__figure {
  aspect-ratio: 4 / 3;
}

.espace__texte {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.espace__niveau {
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

.espace__num {
  position: absolute;
  top: clamp(1.5rem, 4vh, 3rem);
  right: var(--gouttiere);
  font-family: var(--display);
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 1;
  color: rgba(239, 231, 216, 0.045);
  pointer-events: none;
  user-select: none;
}

.espace__texte p { color: var(--doux); max-width: 52ch; }

.espace__points {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.3rem;
}
.espace__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.88rem;
  color: var(--doux);
}
.espace__points li::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--accent);
}


/* ========================== 14. ÉQUIPEMENTS ============================== */

.equip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
}

.equip__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1.1rem;
  background: var(--nuit-2);
  font-size: 0.85rem;
  color: var(--doux);
  transition: background 0.4s, color 0.4s;
}
.equip__item:hover {
  background: var(--nuit-3);
  color: var(--parchemin);
}

.equip__item .ic {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s;
}
.equip__item:hover .ic { stroke: var(--accent-2); }


/* ============================= 15. GALERIE =============================== */

.galerie__grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

.galerie__grille figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
  border: 1px solid var(--filet);
  cursor: pointer;
  background: var(--nuit-3);
}
.galerie__grille figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease), filter 0.6s;
  filter: saturate(0.9);
}
.galerie__grille figure:hover img {
  transform: scale(1.055);
  filter: saturate(1);
}
.galerie__grille figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, rgba(6, 9, 7, 0.5));
  opacity: 0;
  transition: opacity 0.5s;
}
.galerie__grille figure:hover::after { opacity: 1; }

.sp-3 { grid-column: span 3; aspect-ratio: 1 / 1; }
.sp-4 { grid-column: span 4; aspect-ratio: 4 / 3; }
.sp-6 { grid-column: span 6; aspect-ratio: 3 / 2; }
.sp-8 { grid-column: span 8; aspect-ratio: 16 / 9; }
.sp-12 { grid-column: span 12; aspect-ratio: 21 / 9; }


/* =========================== 16. VISIONNEUSE ============================= */

.visio {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 6, 5, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.visio.est-ouverte {
  opacity: 1;
  visibility: visible;
}

.visio__scene {
  flex: 1;
  height: 100%;
  display: grid;
  place-items: center;
  min-width: 0;
}

.visio__img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--rayon);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.55s var(--ease), transform 0.7s var(--ease);
}
.visio__img.est-prete {
  opacity: 1;
  transform: none;
}

.visio__fermer,
.visio__nav {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--filet-fort);
  border-radius: 50%;
  color: var(--parchemin);
  transition: border-color 0.35s, background 0.35s, color 0.35s;
}
.visio__fermer:hover,
.visio__nav:hover {
  border-color: var(--accent);
  background: rgba(var(--lueur), 0.14);
  color: var(--accent-2);
}
.visio__fermer svg { width: 14px; height: 14px; fill: none; }
.visio__nav svg { width: 17px; height: 12px; fill: none; }
.visio__nav--prec svg { transform: rotate(180deg); }

.visio__fermer {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 2;
}

.visio__compte,
.visio__legende {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pale);
}
.visio__compte { top: clamp(1.4rem, 3.4vw, 2.3rem); }
.visio__legende {
  bottom: clamp(1rem, 3vw, 2rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--doux);
  padding-inline: 4rem;
}


/* ==================== 17. MANIFESTE & CHIFFRES =========================== */

.manifeste__inner {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.manifeste__texte {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-start;
}
.manifeste__texte p { color: var(--doux); max-width: 50ch; }

.chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--filet);
  border-block: 1px solid var(--filet);
  margin-top: 0.6rem;
  width: 100%;
}

.chiffre {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.4rem 0.8rem;
  background: var(--nuit);
  text-align: center;
}
.chiffre b {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 400;
  line-height: 1;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.chiffre small {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--pale);
  line-height: 1.45;
}

.manifeste__figure { aspect-ratio: 3 / 4; }


/* ================================ 18. FAQ ================================ */

.faq__liste {
  border-top: 1px solid var(--filet);
}

.faq__item {
  border-bottom: 1px solid var(--filet);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding-block: clamp(1.1rem, 2.6vw, 1.6rem);
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1.02rem, 2vw, 1.36rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--parchemin);
  transition: color 0.4s;
}
.faq__q:hover { color: var(--accent-2); }

.faq__signe {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.faq__signe::before,
.faq__signe::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--accent);
  transition: transform 0.45s var(--ease);
}
.faq__signe::after { transform: rotate(90deg); }
.faq__item.est-ouvert .faq__signe::after { transform: rotate(0deg); }

.faq__r {
  overflow: hidden;
  height: 0;
  transition: height 0.55s var(--ease);
}

.faq__r > div {
  padding-bottom: 1.7rem;
  padding-right: clamp(0px, 7vw, 4.5rem);
  color: var(--doux);
  font-size: 0.94rem;
}
.faq__r strong { color: var(--parchemin); font-weight: 500; }
.faq__r a {
  color: var(--accent-2);
  border-bottom: 1px solid currentColor;
}


/* ========================== 19. BANDE D'APPEL ============================ */

.bande {
  position: relative;
  min-height: 74svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(3.5rem, 11vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}

.bande__fond {
  position: absolute;
  inset: -8% 0 0;
  z-index: -2;
}
.bande__fond img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  opacity: 0.55;
  will-change: transform;
}

.bande::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--nuit) 0%, rgba(6, 9, 7, 0.7) 32%, rgba(6, 9, 7, 0.8) 70%, var(--nuit) 100%),
    radial-gradient(56% 56% at 50% 52%, rgba(var(--lueur), 0.19), transparent 72%);
}

.bande__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.bande h2 { max-width: 17ch; }
.bande .lede { text-align: center; }


/* =========================== 20. PIED DE PAGE ============================ */

.pied {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem) 2rem;
  background: var(--nuit-2);
  border-top: 1px solid var(--filet);
  overflow: hidden;
}

.pied__ciel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 12% 0%, rgba(var(--lueur), 0.1), transparent 70%),
    radial-gradient(50% 60% at 88% 100%, rgba(63, 92, 70, 0.13), transparent 72%);
}

.pied .shell { position: relative; }

.pied__haut {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.2rem);
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--filet);
}

.pied__marque {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.pied__marque p {
  font-size: 0.88rem;
  color: var(--doux);
  max-width: 40ch;
}

.pied__col h4 {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.pied__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pied__col a {
  font-size: 0.87rem;
  color: var(--doux);
  transition: color 0.3s;
}
.pied__col a:hover { color: var(--parchemin); }

.pied__note {
  margin-top: 1rem;
  font-size: 0.76rem;
  color: var(--pale);
  line-height: 1.5;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.6rem;
  font-size: 0.74rem;
  color: var(--pale);
}

.pied__sur {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.pied__sur svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
}


/* ================ 21. PAGE CABANE & PAGES INTERNES ======================= */

.page-hero {
  position: relative;
  padding-block: clamp(7.5rem, 17vh, 11rem) clamp(2.5rem, 6vh, 4rem);
  overflow: hidden;
  isolation: isolate;
}

.page-hero__fond {
  position: absolute;
  inset: -8% 0 0;
  z-index: -2;
}
.page-hero__fond img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  opacity: 0.4;
  will-change: transform;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 9, 7, 0.9) 0%, rgba(6, 9, 7, 0.62) 45%, var(--nuit) 100%),
    radial-gradient(70% 60% at 50% 100%, rgba(var(--lueur), 0.14), transparent 72%);
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-start;
}

/* Fil d'Ariane */
.fil {
  margin-bottom: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--pale);
}
.fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.fil li + li::before {
  content: '/';
  margin-right: 0.55rem;
  opacity: 0.55;
}
.fil a { transition: color 0.3s; }
.fil a:hover { color: var(--accent-2); }

/* Bandeau de faits sous le titre */
.faits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  width: 100%;
  margin-top: 0.8rem;
  overflow: hidden;
}
.fait {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.95rem 1rem;
  background: rgba(10, 14, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fait b {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--parchemin);
}
.fait small {
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pale);
}

/* Corps de la page cabane : texte + tunnel */
.page-corps {
  padding-block: var(--section-y);
}
.page-corps__grille {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}


/* ==================== 22. TUNNEL DE RÉSERVATION ==========================
   Calendrier, récapitulatif et coordonnées : tout se passe sur la page.
   Le visiteur ne quitte le site que pour la page de paiement Stripe.        */

.resa {
  position: sticky;
  top: 6.5rem;
  padding: 1.35rem;
  background: var(--nuit-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  isolation: isolate;
}

/* Le halo d'accent qui respire derrière la carte */
.resa::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 58% at 50% 0%, rgba(var(--lueur), 0.26), transparent 70%);
  opacity: 0.5;
  animation: resaHalo 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes resaHalo {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.72; }
}

.resa__prix {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--filet);
}
.resa__prix b {
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--parchemin);
}
.resa__prix span {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--pale);
}

.resa__avis {
  margin-bottom: 0.9rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--doux);
  background: rgba(var(--lueur), 0.07);
  border: 1px solid rgba(var(--lueur), 0.22);
  border-radius: var(--rayon);
}
.resa__avis b { color: var(--accent-2); font-weight: 500; }

.bk {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bk__cal-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.bk__mois {
  font-family: var(--display);
  font-size: 0.98rem;
  text-transform: capitalize;
  letter-spacing: 0.04em;
  transition: opacity 0.28s var(--ease);
}
.bk__mois.est-change { opacity: 0; }

.bk__nav {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--filet);
  border-radius: 50%;
  transition: border-color 0.35s, background 0.35s, opacity 0.3s;
}
.bk__nav:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(var(--lueur), 0.12);
}
.bk__nav:disabled { opacity: 0.25; cursor: not-allowed; }
.bk__nav svg {
  width: 11px;
  height: 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.bk__nav--prec svg { transform: rotate(180deg); }

.bk__jours,
.bk__grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.bk__jours { margin-bottom: 4px; }
.bk__jours span {
  text-align: center;
  font-family: var(--display);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pale);
  padding-bottom: 0.3rem;
}

.bk__jour {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 0.78rem;
  color: var(--parchemin);
  background: rgba(239, 231, 216, 0.035);
  transition: background 0.25s, color 0.25s, border-color 0.25s,
    transform 0.25s var(--ease), box-shadow 0.25s;
  animation: bkJourEntre 0.5s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 10ms);
}
@keyframes bkJourEntre {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.bk__jour em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.48rem;
  color: var(--pale);
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.3s, transform 0.3s var(--ease);
}

.bk__jour:not(:disabled):not(.est-vide):hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(var(--lueur), 0.14);
  box-shadow: 0 6px 18px rgba(var(--lueur), 0.2);
}
.bk__jour:not(:disabled):hover em { opacity: 1; transform: translateY(-1px); }

.bk__jour.est-passe,
.bk__jour:disabled {
  color: var(--pale);
  background: none;
  cursor: not-allowed;
  opacity: 0.38;
}

/* Nuit déjà prise : barrée, jamais cliquable */
.bk__jour.est-prise {
  opacity: 0.42;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--accent);
}
.bk__jour.est-prise em { visibility: hidden; }

.bk__jour.est-vide {
  background: none;
  border: 0;
  pointer-events: none;
  animation: none;
}

.bk__jour.est-aujourdhui { border-color: var(--filet-fort); }

.bk__jour.est-entre {
  background: rgba(var(--lueur), 0.16);
  border-radius: 0;
}

.bk__jour.est-debut,
.bk__jour.est-fin {
  background: linear-gradient(118deg, var(--accent), var(--accent-2));
  color: #14100a;
  border-color: transparent;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(var(--lueur), 0.36);
  transform: scale(1.02);
}
.bk__jour.est-debut em,
.bk__jour.est-fin em { color: rgba(20, 16, 10, 0.7); opacity: 1; }
.bk__jour.est-debut { border-radius: 5px 0 0 5px; }
.bk__jour.est-fin { border-radius: 0 5px 5px 0; }
.bk__jour.est-debut.est-fin { border-radius: 5px; }

/* Glissement latéral du mois */
.bk__grille.est-suiv { animation: bkSuiv 0.42s var(--ease); }
.bk__grille.est-prec { animation: bkPrec 0.42s var(--ease); }
@keyframes bkSuiv {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bkPrec {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}

/* Les deux champs de dates */
.bk__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
}
.bk__date {
  padding: 0.65rem 0.8rem;
  background: var(--nuit-3);
  transition: background 0.35s;
}
.bk__date small {
  display: block;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pale);
  margin-bottom: 0.22rem;
}
.bk__date b { font-size: 0.86rem; font-weight: 400; }
.bk__date.est-active { background: rgba(var(--lueur), 0.1); }

.bk__aide {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--doux);
  text-align: center;
}
.bk__aide.est-erreur { color: #f08a7d; }

/* Options */
.bk__options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.bk__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.58rem 0.7rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  font-size: 0.79rem;
  color: var(--doux);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.35s, color 0.35s, background 0.35s;
}
.bk__opt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(var(--lueur), 0.18), transparent 62%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.bk__opt:has(input:checked)::before { opacity: 1; }
.bk__opt:hover { border-color: var(--filet-fort); color: var(--parchemin); }
.bk__opt input {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.bk__opt span { flex: 1; }
.bk__opt b { font-weight: 400; color: var(--parchemin); white-space: nowrap; }
.bk__opt:has(input:checked) {
  border-color: var(--accent);
  color: var(--parchemin);
}

/* Récapitulatif */
.bk__recap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--filet);
  font-size: 0.83rem;
  color: var(--doux);
}
.bk__recap > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  animation: bkLigne 0.45s var(--ease) backwards;
  animation-delay: calc(var(--r, 0) * 55ms);
}
@keyframes bkLigne {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.bk__recap .bk__total {
  padding-top: 0.55rem;
  margin-top: 0.15rem;
  border-top: 1px solid var(--filet);
  color: var(--parchemin);
  font-size: 0.96rem;
}
.bk__recap .bk__total b {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 500;
  display: inline-block;
}
.bk__total.est-anime b { animation: bkPulse 0.5s var(--ease); }
@keyframes bkPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Coordonnées */
.bk__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.bk__champ {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.bk__champ--plein { grid-column: span 2; }
.bk__champ label {
  font-family: var(--display);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pale);
}
.bk__champ input,
.bk__champ textarea {
  width: 100%;
  padding: 0.62rem 0.75rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--parchemin);
  background: rgba(239, 231, 216, 0.04);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  transition: border-color 0.3s, background 0.3s;
}
.bk__champ textarea { resize: vertical; min-height: 66px; }
.bk__champ input:focus,
.bk__champ textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(239, 231, 216, 0.07);
}
.bk__champ input::placeholder,
.bk__champ textarea::placeholder { color: rgba(239, 231, 216, 0.26); }

.bk__payer[disabled] { opacity: 0.4; cursor: not-allowed; }
.bk__payer[disabled]::before { transform: translateY(101%); }

/* Reflet qui balaie le bouton tant qu'il est actif */
.bk__payer:not([disabled])::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: bkReflet 3.6s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes bkReflet {
  0%   { transform: translateX(-130%); }
  55%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

.bk__sur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.64rem;
  line-height: 1.4;
  text-align: center;
  color: var(--pale);
}
.bk__sur svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.5;
}

.bk.est-chargement .bk__grille {
  opacity: 0.35;
  pointer-events: none;
}

/* Colonne « ce qui est compris » de la page Réserver */
.compris {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  padding: 1.5rem;
  background: var(--nuit-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.compris h3 {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.compris ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.87rem;
  color: var(--doux);
}
.compris li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.compris li::before {
  content: '✦';
  color: var(--accent);
  font-size: 0.7em;
  line-height: 1.9;
}
.compris--non li::before { content: '·'; font-size: 1.4em; line-height: 1.1; }


/* ============= 23. PAGES LÉGALES, 404 & REPÈRES DE CHANTIER ============== */

.legal {
  padding-block: clamp(7.5rem, 17vh, 10.5rem) var(--section-y);
}
.legal .prose { font-size: 0.94rem; }

/* Repères d'information manquante — volontairement voyants. */
.todo {
  display: inline;
  padding: 0.05em 0.4em;
  border-radius: 2px;
  background: rgba(200, 162, 74, 0.2);
  border-bottom: 1px dashed rgba(200, 162, 74, 0.7);
  color: #f6dfa8;
  font-family: var(--sans);
  font-size: 0.88em;
  font-style: normal;
  letter-spacing: 0.02em;
}
.todo--check {
  background: rgba(184, 86, 107, 0.2);
  border-bottom-color: rgba(184, 86, 107, 0.75);
  color: #f4c2cd;
}

/* Note de chantier discrète sous un bloc provisoire */
.note-chantier {
  margin-top: 0.7rem;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--pale);
  font-style: italic;
}

/* Page 404 */
.perdu {
  min-height: 84svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 8rem 4rem;
}
.perdu__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

/* Page de confirmation */
.merci {
  min-height: 62svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 8rem 3rem;
}
.merci__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}
.merci__ref {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--accent-2);
}


/* ======================= 23 ter. BADGE SÉLECTION LUVIA =================== */
/* Repris de Glam'Appart Spa, recalé sur les jetons d'ici. Le SVG est déjà
   sombre et doré : il se pose sur le fond du site sans cartouche blanche.   */

.section-luvia {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--nuit-2);
}
.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(--filet);
  border-radius: var(--rayon);
  background:
    radial-gradient(80% 140% at 0% 50%, rgba(var(--lueur), 0.08), transparent 60%),
    rgba(239, 231, 216, 0.02);
  text-align: left;
}
.luvia__badge {
  display: block;
  flex: none;
  transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
}
.luvia__badge:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 24px rgba(var(--lueur), 0.22));
}
/* Taille imposée : la règle globale met les images à 100 % de leur parent. */
.luvia__badge img {
  width: clamp(15rem, 26vw, 20rem);
  height: auto;
}
.luvia__mot {
  max-width: 34ch;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--doux);
}
.luvia__mot strong { color: var(--parchemin); font-weight: 500; }

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


/* ============================ 23 bis. BON CADEAU ========================= */

/* ---- La carte : un parchemin sombre, filet d'or, phénix en filigrane ---- */
.carte-bon {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1.58 / 1;
  padding: 0.55rem;
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--lueur), 0.22), transparent 62%),
    linear-gradient(160deg, #1d1712 0%, #0d0b09 58%, #17120d 100%);
  box-shadow:
    0 30px 60px -28px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(var(--lueur), 0.35),
    0 0 42px -12px rgba(var(--lueur), 0.35);
  color: var(--parchemin);
  overflow: hidden;
  isolation: isolate;
}
/* Reflet lent qui traverse la carte */
.carte-bon::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 236, 190, 0.1) 50%, transparent 58%);
  transform: translateX(-60%);
  animation: carteReflet 6.5s ease-in-out 1.5s infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes carteReflet {
  0%, 20% { transform: translateX(-60%); }
  60%, 100% { transform: translateX(60%); }
}
.carte-bon__cadre {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.9rem 1.1rem;
  text-align: center;
  border: 1px solid rgba(var(--lueur), 0.45);
  border-radius: 6px;
}
/* Coins ornés */
.carte-bon__cadre::before,
.carte-bon__cadre::after {
  content: '✦';
  position: absolute;
  top: 0.35rem;
  left: 0.5rem;
  font-size: 0.6rem;
  color: var(--accent);
  opacity: 0.8;
}
.carte-bon__cadre::after { left: auto; right: 0.5rem; }
.carte-bon__phenix {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.09;
  z-index: -1;
  filter: saturate(0.6);
}
.carte-bon__type {
  font-family: var(--display);
  font-size: 0.56rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
}
.carte-bon__maison {
  font-family: var(--display);
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  line-height: 1.1;
}
.carte-bon__maison em { font-style: normal; color: var(--accent-2); }
.carte-bon__montant {
  margin-block: 0.15rem 0.05rem;
  font-family: var(--display);
  font-size: clamp(2.1rem, 7vw, 2.9rem);
  line-height: 1;
  background: linear-gradient(180deg, #f6e2a6, var(--accent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(var(--lueur), 0.25);
}
.carte-bon__pour { font-size: 0.86rem; color: var(--doux); }
.carte-bon__pour b { font-weight: 500; color: var(--parchemin); }
.carte-bon__mot {
  max-width: 34ch;
  font-size: 0.74rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--doux);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.carte-bon__code {
  margin-top: 0.35rem;
  padding: 0.2rem 0.7rem;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  border: 1px dashed rgba(var(--lueur), 0.5);
  border-radius: 3px;
}
.carte-bon__validite {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--pale);
}
.carte-bon [hidden] { display: none !important; }

/* ---- Page /offrir/ ---- */
.offrir {
  padding-block: clamp(7.5rem, 17vh, 10.5rem) var(--section-y);
}
.offrir__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.2rem, 6vw, 5.5rem);
  align-items: start;
}
.offrir__intro {
  position: sticky;
  top: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.offrir__intro .carte-bon { margin-top: 0.6rem; }

.offrir__form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  background: var(--nuit-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.offrir__bloc {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 0 0 1.1rem;
  border: 0;
  border-bottom: 1px solid var(--filet);
  min-width: 0;
}
.offrir__bloc legend {
  float: left;
  width: 100%;
  margin-bottom: 0.7rem;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.offrir__bloc legend + * { clear: both; }

.offrir__montants {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.offrir__montant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.75rem 0.4rem;
  font: inherit;
  color: var(--doux);
  background: rgba(239, 231, 216, 0.03);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.offrir__montant b {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--parchemin);
}
.offrir__montant small { font-size: 0.7rem; }
.offrir__montant:hover { border-color: var(--filet-fort); transform: translateY(-2px); }
.offrir__montant.est-choisi {
  border-color: var(--accent);
  background: rgba(var(--lueur), 0.12);
  color: var(--parchemin);
}

.offrir__champ {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--doux);
}
.offrir__champ i { font-style: normal; color: var(--pale); }
.offrir__champ input,
.offrir__champ textarea {
  width: 100%;
  padding: 0.66rem 0.8rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--parchemin);
  background: rgba(239, 231, 216, 0.04);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  transition: border-color 0.3s, background 0.3s;
}
.offrir__champ textarea { resize: vertical; min-height: 78px; }
.offrir__champ input:focus,
.offrir__champ textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(239, 231, 216, 0.07);
}
.offrir__champ input::placeholder,
.offrir__champ textarea::placeholder { color: rgba(239, 231, 216, 0.26); }
.offrir__champ input.est-invalide { border-color: #f08a7d; }
.offrir__champ[hidden] { display: none; }
.offrir__euro {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 11rem;
  color: var(--parchemin);
}
.offrir__compte { align-self: flex-end; font-size: 0.66rem; color: var(--pale); }

.offrir__choix,
.offrir__accord {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--doux);
  cursor: pointer;
}
.offrir__choix input,
.offrir__accord input {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 0.2rem;
  accent-color: var(--accent);
}
.offrir__choix:has(input:checked) { color: var(--parchemin); }
.offrir__accord a { color: var(--accent-2); border-bottom: 1px solid rgba(var(--lueur), 0.4); }

.offrir__payer { width: 100%; justify-content: center; }
.offrir__payer[disabled] { opacity: 0.55; cursor: progress; }
.offrir__aide {
  min-height: 1.2em;
  font-size: 0.78rem;
  text-align: center;
  color: var(--doux);
}
.offrir__aide:empty { display: none; }
.offrir__aide.est-erreur { color: #f08a7d; }
.offrir__secu { font-size: 0.68rem; text-align: center; color: var(--pale); }

.offrir__etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin: clamp(2rem, 5vh, 3.2rem) 0 0;
  padding: 0;
  list-style: none;
}
.offrir__etapes li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.4rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.offrir__num {
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--accent);
}
.offrir__etapes h3 { font-size: 1.1rem; font-weight: 500; }
.offrir__etapes p { font-size: 0.9rem; line-height: 1.55; color: var(--doux); }
.offrir__conditions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 2rem;
  max-width: 900px;
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--doux);
}
.offrir__conditions li { display: flex; gap: 0.6rem; }
.offrir__conditions li::before { content: '✦'; color: var(--accent); font-size: 0.7em; line-height: 1.9; }

/* ---- Page /offrir/merci/ ---- */
.merci--bon { min-height: 72svh; }
.merci__bon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  margin-top: 0.6rem;
  animation: bkLigne 0.8s var(--ease) backwards;
}
.merci__bon[hidden] { display: none; }
.merci__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

/* ---- Champ « bon cadeau » du tunnel de réservation ---- */
.bk__bon-ligne { display: flex; gap: 0.4rem; }
.bk__bon-ligne input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bk__bon-ligne input::placeholder { text-transform: none; letter-spacing: 0.06em; }
.bk__bon-ligne input[readonly] { border-color: var(--accent); color: var(--accent-2); }
.bk__bon-appliquer {
  flex-shrink: 0;
  padding: 0 0.9rem;
  font-family: var(--display);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchemin);
  background: rgba(var(--lueur), 0.12);
  border: 1px solid rgba(var(--lueur), 0.5);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.bk__bon-appliquer:hover { background: rgba(var(--lueur), 0.24); border-color: var(--accent); }
.bk__bon-appliquer[disabled] { opacity: 0.5; cursor: progress; }
.bk__bon-etat { font-size: 0.7rem; line-height: 1.45; color: var(--doux); }
.bk__bon-etat:empty { display: none; }
.bk__bon-etat.est-erreur { color: #f08a7d; }
.bk__bon-etat.est-ok { color: var(--accent-2); }
.bk__recap .bk__ligne-bon { color: var(--accent-2); }

@media (max-width: 900px) {
  .offrir__grille { grid-template-columns: 1fr; }
  .offrir__intro { position: static; }
  .offrir__intro .carte-bon { margin-inline: auto; }
  .offrir__etapes { grid-template-columns: 1fr; }
  .offrir__conditions { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .offrir__montant b { font-size: 1.05rem; }
  .offrir__montant small { font-size: 0.62rem; }
  .carte-bon { aspect-ratio: auto; min-height: 250px; }
}

/* ---- Impression : le bon, rien que le bon ---- */
@media print {
  @page { margin: 12mm; }
  html:has(body.page-bon-imprime) { background: #fff !important; }
  body.page-bon-imprime { background: #fff !important; padding: 0 !important; }
  body.page-bon-imprime::before,
  body.page-bon-imprime::after { display: none !important; }
  /* Une animation d'apparition figée à son début imprimerait un bon transparent. */
  body.page-bon-imprime main,
  body.page-bon-imprime main * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  body.page-bon-imprime .carte-bon__phenix { opacity: 0.12 !important; }
  body.page-bon-imprime > *:not(main),
  body.page-bon-imprime .merci__inner > *:not(#zone-bon),
  body.page-bon-imprime .merci__actions { display: none !important; }
  body.page-bon-imprime .merci {
    display: block;
    min-height: 0;
    padding: 0;
  }
  body.page-bon-imprime #bon-final {
    width: 150mm;
    max-width: none;
    margin: 8mm auto 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: 0 0 0 1px #c8a24a;
  }
  body.page-bon-imprime #bon-final::after { display: none; }
}


/* ============================ 24. RESPONSIVE ============================= */
/* ⚠️ Ce bloc doit rester APRÈS tous les composants ci-dessus.              */

@media (max-width: 1100px) {
  .page-corps__grille { grid-template-columns: 1fr; }
  .resa {
    position: static;
    order: -1;
    max-width: 560px;
  }
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .manifeste__inner { grid-template-columns: 1fr; }
  .manifeste__figure { max-width: 420px; }
}

@media (max-width: 900px) {
  .nav__liens { display: none; }
  .nav__burger { display: block; }
  .nav__droite .btn { display: none; }
  .barre { display: block; }

  /* La barre fixe recouvre ~4.4rem : on dégage le bas des pages. */
  body { padding-bottom: 4.4rem; }
  .hero { padding-bottom: calc(clamp(2.5rem, 7vh, 4.2rem) + 4.4rem); }
  .hero__indice { display: none; }

  .duo,
  .espace__inner,
  .deroule__inner { grid-template-columns: 1fr; }
  .duo--inverse .duo__figure,
  .espace:nth-child(even) .espace__figure { order: 0; }
  .duo__figure { aspect-ratio: 4 / 3.2; }
  .deroule__colle { position: static; }
  .deroule__visuel { aspect-ratio: 16 / 10; }

  .compris { grid-template-columns: 1fr; }
  .resa { max-width: none; }

  .sp-3, .sp-4, .sp-6, .sp-8 { grid-column: span 6; }
  .sp-3 { aspect-ratio: 1 / 1; }
}

@media (max-width: 640px) {
  .marque__mot small { display: none; }
  .hero__meta { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .pied__haut { grid-template-columns: 1fr; gap: 2rem; }
  .pied__bas { flex-direction: column; align-items: flex-start; }

  .galerie__grille { grid-template-columns: repeat(2, 1fr); }
  .sp-3, .sp-4, .sp-6, .sp-8 { grid-column: span 1; aspect-ratio: 1 / 1; }
  .sp-12 { grid-column: span 2; aspect-ratio: 3 / 2; }

  .chiffres { grid-template-columns: 1fr; }
  .chiffre { flex-direction: row; align-items: baseline; gap: 0.8rem; text-align: left; }

  .visio { gap: 0.4rem; padding: 3.4rem 0.7rem 3.6rem; }
  .visio__fermer, .visio__nav { width: 40px; height: 40px; }
  .visio__legende { padding-inline: 1rem; font-size: 0.78rem; }

  .espace__num { font-size: 3rem; }
  .deroule__etapes { padding-left: 2.4rem; }
  .deroule__etape::before { left: -2.4rem; }
}

/* Très petits téléphones (360 px et moins) : on resserre ce qui déborde. */
@media (max-width: 380px) {
  :root { --gouttiere: 1rem; }
  .marque__mot b { font-size: 0.86rem; letter-spacing: 0.12em; }
  .marque__blason { width: 28px; height: 28px; }
  .btn { padding: 0.9rem 1.2rem; letter-spacing: 0.16em; }
  .btn--petit { padding: 0.66rem 0.95rem; font-size: 0.55rem; }
  .resa { padding: 1rem; }
  .bk__jour { font-size: 0.7rem; }
  .bk__jour em { font-size: 0.42rem; }
  .bk__form { grid-template-columns: 1fr; }
  .bk__champ--plein { grid-column: span 1; }
  .faits { grid-template-columns: 1fr 1fr; }
}


/* ========================= 25. MOUVEMENT RÉDUIT ========================== */
/* Tout est neutralisé : plus aucune animation, aucun décalage, aucun
   masquage. La page est immédiatement complète et immobile.                 */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  body::after { animation: none; }

  .js .reveal,
  .js .reveal-volet > *,
  .js .ligne-sc > span,
  .js .plume i {
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
  }
  .js .plume::after { transform: scaleX(1); opacity: 0.5; }

  .lanterne-wrap,
  .lueur-bougie,
  .incant__voie,
  .resa::after,
  .bk__payer:not([disabled])::after,
  .hero__indice i {
    animation: none !important;
  }
  .incant__voie { transform: none; }
  .lanterne__flamme,
  .lanterne__halo { animation: none; opacity: 1; }
  .lanterne__halo { opacity: 0.3; }

  .bk__jour,
  .bk__recap > div { animation: none; }
  .bk__jour em { opacity: 1; }

  .portrait img { transform: none; }
  .carte:hover .carte__media img,
  .galerie__grille figure:hover img { transform: none; }

  /* Les toiles animées sont coupées par le script ; on les efface aussi. */
  .poussiere { display: none; }
}

/* ====================== TRANSITION « VOL DE CORBEAUX » ====================
   Voile plein écran posé au-dessus de tout, activé le temps de la
   déflagration. Le canvas porte la fumée ; le fond du voile ne s'assombrit
   qu'une fois l'écran couvert, pour masquer le changement de page. */

.explosion {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s linear;
}

.explosion.est-actif {
  opacity: 1;
  visibility: visible;
}

.explosion canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Signature en pied de page */
.pied__signature {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brume, rgba(245, 242, 239, 0.45));
  transition: color 0.35s;
}
.pied__signature strong {
  font-weight: 500;
  color: var(--accent);
}
.pied__signature:hover {
  color: var(--craie, #f5f2ef);
}

@media (prefers-reduced-motion: reduce) {
  .explosion { display: none; }
}

/* ==========================================================================
   SORTILÈGES — vocabulaire d'apparition et de disparition
   --------------------------------------------------------------------------
   Cinq gestes, chacun réservé à un usage précis :
     .plume    (1) l'encre du Maraudeur — les titres s'écrivent
     .reveal   (2) Lumos / Nox — la lumière découvre, puis ravale
     .sable    (3) le sable du Retourneur — les chiffres se forment
     .cape     (5) la cape d'invisibilité — le voile glisse sur une photo
     .braises  (6) les braises du phénix — l'image naît de la cendre
   Tous sont neutralisés sous prefers-reduced-motion, en fin de bloc.
   ========================================================================== */

@property --sort-p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* -------------------------------------- (1) L'ENCRE DU MARAUDEUR -------- */
/* La lettre ne surgit pas : son trait se dessine de gauche à droite, avec
   une bavure d'encre qui se résorbe, comme une plume sur du parchemin. */

.plume i {
  font-style: inherit;
  display: inline-block;
  opacity: 0;
  clip-path: inset(0 100% -0.35em 0);
  filter: blur(2.4px);
  transform: translateY(0.05em);
  transition:
    opacity 0.18s linear,
    clip-path 0.42s cubic-bezier(0.34, 0.8, 0.36, 1),
    filter 0.5s ease-out,
    transform 0.5s var(--ease);
  transition-delay: calc(var(--n, 0) * 34ms + var(--d, 0ms));
}

.plume.est-la i {
  opacity: 1;
  clip-path: inset(0 -0.12em -0.35em 0);
  filter: none;
  transform: none;
}

/* La pointe de la plume : un éclat ambré qui court le long du titre */
.plume::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.06em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 200, 126, 0.85), transparent 68%);
  opacity: 0;
  pointer-events: none;
}
.plume.est-la::after {
  animation: plumePointe 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes plumePointe {
  0%   { opacity: 0;   left: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.7; left: 100%; }
  100% { opacity: 0;   left: 100%; }
}

/* ------------------------------------------- (2) LUMOS / NOX ------------ */
/* Une flaque de lumière s'ouvre depuis la gauche du bloc et le découvre.
   Le masque est doublé d'une lueur chaude qui s'attarde une demi-seconde. */

.js .reveal {
  opacity: 0;
  --sort-p: 0%;
  -webkit-mask-image: radial-gradient(
    120% 320% at 6% 52%,
    #000 0%,
    #000 var(--sort-p),
    rgba(0, 0, 0, 0.35) calc(var(--sort-p) + 9%),
    transparent calc(var(--sort-p) + 22%)
  );
  mask-image: radial-gradient(
    120% 320% at 6% 52%,
    #000 0%,
    #000 var(--sort-p),
    rgba(0, 0, 0, 0.35) calc(var(--sort-p) + 9%),
    transparent calc(var(--sort-p) + 22%)
  );
  transition:
    opacity 0.5s ease-out,
    --sort-p 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}

.js .reveal.est-la {
  opacity: 1;
  --sort-p: 100%;
}

/* Nox : la lumière se rétracte et ravale le bloc. */
.js .reveal.est-eteint {
  opacity: 0;
  --sort-p: 0%;
  transition-delay: 0ms;
}

/* Le halo qui accompagne l'ouverture */
.reveal.est-la > :first-child {
  animation: lumosHalo 1.1s ease-out;
  animation-delay: var(--d, 0ms);
}
@keyframes lumosHalo {
  0%   { text-shadow: 0 0 22px rgba(230, 200, 126, 0.55); }
  100% { text-shadow: none; }
}

/* ---------------------------------- (3) LE SABLE DU RETOURNEUR ---------- */
/* Le chiffre se remplit d'or par le bas, comme du sable qui s'accumule,
   pendant que le compteur défile. Quelques grains tombent au-dessus. */

.sable {
  position: relative;
  display: inline-block;
  --sort-p: 0%;
  background-image: linear-gradient(
    to top,
    var(--accent-2) 0%,
    var(--accent) calc(var(--sort-p) * 0.75),
    rgba(245, 241, 232, 0.22) var(--sort-p),
    rgba(245, 241, 232, 0.14) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: --sort-p 1.6s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.sable.est-la { --sort-p: 118%; }

/* Les grains qui tombent pendant le remplissage */
.sable::before,
.sable::after {
  content: '';
  position: absolute;
  top: -0.5em;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--accent-2);
  opacity: 0;
  pointer-events: none;
}
.sable::before { left: 28%; }
.sable::after  { left: 64%; }
.sable.est-la::before { animation: grainSable 1.25s ease-in 0.1s 2; }
.sable.est-la::after  { animation: grainSable 1.4s  ease-in 0.35s 2; }
@keyframes grainSable {
  0%   { opacity: 0;   transform: translateY(0); }
  15%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translateY(1.5em); }
}

/* ------------------------------- (5) LA CAPE D'INVISIBILITÉ ------------- */
/* Un pan de soie traverse le cadre ; derrière lui, la photo est apparue. */

.cape {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cape > img {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.5s ease-out 0.35s, transform 1.5s var(--ease);
}
.cape.est-la > img {
  opacity: 1;
  transform: none;
}

/* Le pan de tissu : un bandeau flou et miroitant, incliné, qui balaie */
.cape::after {
  content: '';
  position: absolute;
  inset: -20% -60%;
  z-index: 2;
  background: linear-gradient(
    104deg,
    transparent 34%,
    rgba(214, 226, 240, 0.10) 42%,
    rgba(236, 244, 255, 0.30) 50%,
    rgba(214, 226, 240, 0.10) 58%,
    transparent 66%
  );
  backdrop-filter: blur(9px) brightness(1.15);
  -webkit-backdrop-filter: blur(9px) brightness(1.15);
  transform: translateX(-115%);
  opacity: 0;
  pointer-events: none;
}
.cape.est-la::after {
  animation: capeGlisse 1.55s cubic-bezier(0.45, 0.05, 0.3, 1) forwards;
}
@keyframes capeGlisse {
  0%   { transform: translateX(-115%); opacity: 0; }
  12%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateX(115%);  opacity: 0; }
}

/* -------------------------------- (6) LES BRAISES DU PHÉNIX ------------- */
/* L'image ne se dévoile pas d'un bloc : elle remonte depuis la cendre, par
   un front irrégulier. Le grain vient d'un bruit SVG, le front d'un dégradé ;
   les deux masques se croisent. */

.braises {
  position: relative;
  isolation: isolate;
}
.braises > img {
  --sort-p: 0%;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23b)'/%3E%3C/svg%3E"),
    linear-gradient(to top, #000 0%, #000 var(--sort-p), transparent calc(var(--sort-p) + 26%));
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23b)'/%3E%3C/svg%3E"),
    linear-gradient(to top, #000 0%, #000 var(--sort-p), transparent calc(var(--sort-p) + 26%));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: 260px 260px, 100% 100%;
  mask-size: 260px 260px, 100% 100%;
  transition: --sort-p 1.9s cubic-bezier(0.32, 0.72, 0.3, 1);
}
.braises.est-la > img { --sort-p: 135%; }

/* La ligne de combustion : un liseré chaud qui monte avec le front */
.braises::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    transparent 0%,
    rgba(224, 122, 40, 0.35) 46%,
    rgba(255, 196, 92, 0.55) 50%,
    transparent 56%
  );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.braises.est-la::before {
  animation: braiseFront 1.9s cubic-bezier(0.32, 0.72, 0.3, 1) forwards;
}
@keyframes braiseFront {
  0%   { opacity: 0;    transform: translateY(52%); }
  14%  { opacity: 0.85; }
  82%  { opacity: 0.5; }
  100% { opacity: 0;    transform: translateY(-58%); }
}

/* Les escarbilles qui s'échappent pendant la combustion */
.braises .escarbille {
  position: absolute;
  bottom: 0;
  z-index: 3;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd08a, rgba(224, 122, 40, 0) 70%);
  opacity: 0;
  pointer-events: none;
}
.braises.est-la .escarbille {
  animation: escarbille 2.1s ease-out forwards;
  animation-delay: calc(var(--e, 0) * 130ms);
}
@keyframes escarbille {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.6); }
  18%  { opacity: 1; }
  100% { opacity: 0;   transform: translate(var(--dx, 12px), -160px) scale(1.3); }
}

/* ------------------------------------------------ Mouvement réduit ------ */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.est-la {
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 1;
  }
  .plume i { opacity: 1; clip-path: none; filter: none; transform: none; }
  .plume::after,
  .cape::after,
  .braises::before,
  .braises .escarbille,
  .sable::before,
  .sable::after { animation: none; opacity: 0; }
  .cape > img { opacity: 1; transform: none; }
  .braises > img { -webkit-mask-image: none; mask-image: none; }
  .sable { -webkit-text-fill-color: currentColor; background-image: none; }
  .reveal.est-la > :first-child { animation: none; }
}

/* -------------------------------------- La fumée du titre (fumee.js) ----
   La toile se place DERRIÈRE le texte : la fumée passe dans le dos des
   lettres et ne nuit jamais à la lecture. */
.titre-xl[data-fumee] {
  position: relative;
}
.fumee {
  position: absolute;
  left: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---------------------------------- La baguette (curseur personnalisé) ---
   La POINTE de la baguette est à l'origine du SVG (0,0) : en la plaçant sur
   la position du pointeur, les étincelles — déjà émises à cette position —
   jaillissent du bout de la baguette, et non de son milieu. */
.curseur__baguette {
  position: absolute;
  /* Taille imposée en dur : une règle globale met les SVG à 100 %, et le
     parent .curseur n'ayant aucune largeur, la baguette était écrasée à 0. */
  width: 72px !important;
  height: 72px !important;
  max-width: none;
  overflow: visible;
  transform-origin: 4px 4px;   /* la pointe du fût */
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
  transition: opacity 0.3s;
}

/* Au survol d'un élément cliquable, la baguette se redresse légèrement */
.curseur.est-survol .curseur__baguette {
  filter: drop-shadow(0 0 7px rgba(var(--lueur), 0.6)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

/* Le coup de baguette au clic */
.curseur.est-lancee .curseur__baguette {
  animation: coupDeBaguette 0.34s cubic-bezier(0.3, 1.6, 0.4, 1);
}
@keyframes coupDeBaguette {
  0%   { rotate: 0deg; }
  35%  { rotate: -26deg; }
  100% { rotate: 0deg; }
}

/* La pointe lumineuse posée au bout de la baguette */
.curseur__point {
  box-shadow: 0 0 12px 3px rgba(var(--lueur), 0.9), 0 0 26px 8px rgba(var(--lueur), 0.35);
}

/* Le curseur du système disparaît : c'est la baguette qui le remplace.
   On ne le fait QUE sur pointeur fin — au doigt, il n'y a rien à masquer. */
@media (hover: hover) and (pointer: fine) {
  html.js body,
  html.js body a,
  html.js body button,
  html.js body [role="button"] {
    cursor: none;
  }
  /* Sauf dans les champs : on veut le curseur de saisie, sinon on ne sait
     plus où l'on écrit. */
  html.js body input,
  html.js body textarea,
  html.js body select {
    cursor: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js body, html.js body a, html.js body button { cursor: auto; }
  .curseur__baguette { display: none; }
}

/* La fumée de cheminée monte DEVANT la photo — c'est tout l'intérêt —
   alors que celle du titre passe derrière les lettres. */
[data-fumee="cheminee"] {
  position: relative;
  overflow: visible;
}
.fumee--cheminee {
  z-index: 2;
}

/* ------------------------------------------ Typographie médiévale -------
   Le titre d'ouverture passe en gothique pure. On lui retire les capitales
   et on desserre l'interlettrage : une gothique en capitales serrées est
   illisible. */
.hero .titre-xl {
  font-family: var(--gothique);
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.18;
}

/* Le texte courant en Garamond : on remonte légèrement la taille et
   l'interligne, ce caractère ayant un œil plus petit que le précédent. */
body {
  font-size: 1.04rem;
  line-height: 1.7;
}

/* Les petites capitales d'interface (surtitres, boutons, étiquettes)
   restent en Garamond : en médiévale, elles deviendraient du bruit. */
.surtitre,
.btn,
.nav__lien,
.carte__etiquette,
.bk__jours span,
.pied__bas {
  font-family: var(--serif);
}

/* ==========================================================================
   LES AVIS
   --------------------------------------------------------------------------
   Trois cartes de parchemin. Les étoiles reprennent l'étoile à quatre
   branches du bandeau défilant : un seul vocabulaire graphique sur tout le
   site plutôt qu'une étoile générique importée pour l'occasion.
   ========================================================================== */

.avis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem);
}

.avis__carte {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  background: var(--nuit-3);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.avis__carte:hover {
  border-color: rgba(var(--lueur), 0.4);
  transform: translateY(-4px);
}

.avis__notes {
  display: flex;
  gap: 0.28rem;
}
/* L'étoile hérite d'une règle globale qui met les SVG à 100 % : sans taille
   imposée elle remplirait toute la carte. Même piège que la baguette. */
.avis__notes .etoile4 {
  width: 13px !important;
  height: 13px !important;
  fill: var(--accent-2);
  opacity: 0.9;
}

.avis__texte {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.66;
  color: var(--brume);
  font-style: italic;
}
.avis__texte::before { content: '« '; }
.avis__texte::after  { content: ' »'; }

.avis__nom {
  margin-top: auto;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.avis__nom::before {
  content: '';
  display: block;
  width: 26px;
  height: 1px;
  margin-bottom: 0.7rem;
  background: var(--filet-fort);
}

/* Une nuit occupée qui reste acceptable comme date de SORTIE : on ne dort
   pas la nuit du départ. À demi barrée, mais cliquable. */
.bk__jour.est-prise.est-depart-seul {
  opacity: 0.72;
  cursor: pointer;
  pointer-events: auto;
}
.bk__jour.est-prise.est-depart-seul:hover {
  opacity: 1;
  border-color: rgba(var(--lueur), 0.5);
}

/* ==========================================================================
   ACCUEIL — retours de Stéphane (2 septembre 2026)
   ========================================================================== */

/* « Deux appartements immersifs · Dijon & Bordeaux » en blanc : le gris
   d'origine se perdait sur la photo sombre du salon. */
.surtitre--clair {
  color: #fff;
  opacity: 1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.surtitre--clair::before {
  background: rgba(255, 255, 255, 0.7);
}

/* L'accroche : une phrase d'accueil mise en avant, puis deux paragraphes.
   Plus long que l'ancien texte — on resserre l'interligne et la largeur pour
   que les boutons restent visibles sans défiler sur un écran de portable. */
.hero__accroche {
  max-width: 58ch;
  margin-top: clamp(1rem, 2.2vw, 1.6rem);
}
.hero__bienvenue {
  margin: 0 0 0.7rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.35;
  color: var(--accent-2);
}
.hero__accroche .lede {
  margin: 0 0 0.55rem;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
}
.hero__accroche .lede:last-child { margin-bottom: 0; }

/* Bon cadeau et chèques vacances : deux pastilles discrètes sous les
   boutons, lisibles mais sans concurrencer « Réserver ». */
.hero__mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}
.hero__mentions a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(var(--lueur), 0.45);
  border-radius: 999px;
  background: rgba(5, 7, 10, 0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--serif);
  font-size: 0.92rem;
  text-decoration: none;
  transition: border-color 0.35s, background 0.35s, transform 0.35s;
}
.hero__mentions a:hover {
  border-color: var(--accent);
  background: rgba(var(--lueur), 0.14);
  transform: translateY(-2px);
}

/* Arrivée sur /faq/#cheques-vacances : la question est signalée, sinon on
   ne sait pas où regarder dans la liste. */
.faq__item:target {
  scroll-margin-top: 110px;
  border-color: var(--accent);
}

/* Écrans d'ordinateur peu hauts (1366×768, 1280×720…) : l'accroche de
   Stéphane, plus longue que l'ancien texte, poussait « Réserver une nuit »
   73 px sous la ligne de flottaison sur un portable courant. On resserre le
   hero — titre, écarts, interlignes — sans toucher au texte. */
@media (min-width: 900px) and (max-height: 860px) {
  .hero__inner { gap: 0.9rem; }
  .hero .titre-xl {
    font-size: clamp(2.3rem, 4.6vw, 3.9rem);
    line-height: 1.06;
  }
  .hero__accroche { margin-top: 0.2rem; }
  .hero__bienvenue {
    margin-bottom: 0.35rem;
    font-size: 1.12rem;
  }
  .hero__accroche .lede {
    margin-bottom: 0.3rem;
    font-size: 0.97rem;
    line-height: 1.5;
  }
  .hero__meta { padding-top: 0.6rem; gap: 1rem; }
  .hero__mentions { margin-top: 0.6rem; }
}

/* Le phénix à la place de l'écu. Taille imposée : une règle globale met les
   images à 100 % de leur parent. Monté de 34 à 48 px — une photo détourée
   se lit moins bien qu'un dessin au trait, il lui faut plus de place. */
.marque__blason--phenix {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(230, 90, 30, 0.35));
}
@media (max-width: 620px) {
  .marque__blason--phenix { width: 42px !important; height: 42px !important; }
}

/* ---- Préchargeur : le phénix à la place de la lanterne ------------------
   La lanterne se balançait depuis son crochet (origine en haut). Le phénix
   n'est suspendu à rien : il respire plutôt, en flottant légèrement tandis
   que son halo de braise s'intensifie et retombe. */
.lanterne-wrap--phenix {
  transform-origin: 50% 50%;
  animation: phenix-souffle 3.6s ease-in-out infinite;
}
@keyframes phenix-souffle {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 10px rgba(230, 90, 30, 0.22));
  }
  50% {
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 0 24px rgba(240, 110, 40, 0.5));
  }
}
@media (prefers-reduced-motion: reduce) {
  .lanterne-wrap--phenix { animation: none; }
}