/* ==========================================================================
   GLAM'APPART SPA — Feuille de style principale
   Dijon (x2) · Reims — appartements-spas privatifs
   --------------------------------------------------------------------------
   1.  Tokens & reset          9.  Suites (showcase)      17. FAQ
   2.  Typographie             10. Expérience             18. Bande CTA
   3.  Préloader               11. Déroulé (timeline)     19. Footer
   4.  Curseur                 12. Occasions              20. Page suite
   5.  Navigation              13. Adresses / carte       21. Pages ville
   6.  Boutons                 14. Galerie                22. Pages légales
   7.  Hero                    15. Lightbox               23. Responsive
   8.  Bandeau défilant        16. Manifeste / chiffres   24. Reduced motion
   ========================================================================== */

/* ============================ 1. TOKENS & RESET ========================== */

@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #e0245e;
}
@property --accent-2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #c9a86a;
}

:root {
  /* Encres */
  --ink: #07060a;
  --ink-2: #0c0a11;
  --ink-3: #131019;
  --ink-4: #1b1724;

  /* Lumières */
  --chalk: #f5f2ef;
  --muted: rgba(245, 242, 239, 0.6);
  --faint: rgba(245, 242, 239, 0.38);
  --line: rgba(245, 242, 239, 0.11);
  --line-strong: rgba(245, 242, 239, 0.22);

  /* Accent — mué au scroll (voir [data-accent]) */
  --accent: #e0245e;
  --accent-2: #c9a86a;
  --glow: 224, 36, 94;

  /* Typo */
  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rythme */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --shell: 1320px;
  --section-y: clamp(5rem, 12vh, 9.5rem);

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

  --radius: 2px;

  color-scheme: dark;
}

/* Identités chromatiques des trois suites */
[data-accent='design'] {
  --accent: #b14bff;
  --accent-2: #ff2f8e;
  --glow: 177, 75, 255;
}
[data-accent='chalet'] {
  --accent: #e0a441;
  --accent-2: #14a897;
  --glow: 224, 164, 65;
}
[data-accent='newyork'] {
  --accent: #4d84ff;
  --accent-2: #8f5cff;
  --glow: 77, 132, 255;
}
[data-accent='brand'] {
  --accent: #e0245e;
  --accent-2: #c9a86a;
  --glow: 224, 36, 94;
}

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

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

* {
  margin: 0;
  padding: 0;
}

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

body {
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  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: #fff;
}

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

/* Grain global — la texture qui fait « film » */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.035;
  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.85' 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%); }
}

/* Les ancres (#reserver, #suites…) ne doivent pas atterrir sous la barre fixe. */
[id] {
  scroll-margin-top: 5.5rem;
}

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

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

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

/* ============================ 2. TYPOGRAPHIE ============================= */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.display-xl {
  font-size: clamp(2.9rem, 8.4vw, 7.6rem);
}
.display-l {
  font-size: clamp(2.5rem, 6.4vw, 5.6rem);
}
.display-m {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
}
.display-s {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

em,
.serif-italic {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--faint);
}

.eyebrow::before {
  content: '';
  width: 2.2rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.85;
}

.eyebrow--center::after {
  content: '';
  width: 2.2rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.85;
}

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  color: var(--muted);
  max-width: 62ch;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.section-head--center {
  align-items: center;
  text-align: center;
}

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

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* Révélations au scroll.
   Tous les états « masqués » sont conditionnés à la classe .js posée par le
   script en fin de <head>. Sans JavaScript — ou si le script casse — le
   contenu s'affiche normalement au lieu de rester invisible. */
.reveal {
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Volet qui se lève.
   ATTENTION : le clip-path est posé sur les ENFANTS, jamais sur l'élément
   observé lui-même. Un élément clippé à 0 % de hauteur a un rectangle
   d'intersection nul : l'IntersectionObserver ne le verrait jamais entrer
   dans le viewport et la révélation ne se déclencherait pas. */
.reveal-mask > * {
  transition: clip-path 1.2s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal-mask > * {
  clip-path: inset(0 0 100% 0);
}
.js .reveal-mask.is-in > * {
  clip-path: inset(0 0 0 0);
}

/* Titre ligne à ligne */
.split-line {
  display: block;
  overflow: hidden;
}
.split-line > span {
  display: inline-block;
  transition: transform 1.15s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .split-line > span {
  transform: translateY(110%);
}
.js .is-in .split-line > span,
.js .split-line.is-in > span {
  transform: none;
}

/* Sans JS : ni préchargeur, ni rideau — ils resteraient bloqués à l'écran. */
html:not(.js) .preloader,
html:not(.js) .curtain,
html:not(.js) .cursor {
  display: none;
}

/* ============================= 3. PRÉLOADER ============================== */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

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

.preloader.is-done .preloader__inner {
  opacity: 0;
  transform: translateY(-14px);
}

.preloader__mark {
  width: 92px;
  height: 92px;
}

.preloader__mark path,
.preloader__mark circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: draw 2.1s var(--ease) forwards;
}
.preloader__mark circle {
  stroke: var(--line-strong);
  animation-delay: 0.15s;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.preloader__word {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--chalk);
}

.preloader__bar {
  position: relative;
  width: min(240px, 46vw);
  height: 1px;
  background: var(--line);
  overflow: hidden;
}

.preloader__bar span {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: right 0.25s linear;
}

.preloader__pct {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* Rideau d'ouverture */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.curtain span {
  background: var(--ink);
  transform-origin: top;
  transform: scaleY(1);
}
.curtain.is-open span {
  transition: transform 1.05s var(--ease);
  transform: scaleY(0);
}
.curtain.is-open span:nth-child(2) { transition-delay: 0.07s; }
.curtain.is-open span:nth-child(3) { transition-delay: 0.14s; }
.curtain.is-open span:nth-child(4) { transition-delay: 0.21s; }
.curtain.is-open span:nth-child(5) { transition-delay: 0.28s; }
.curtain.is-gone { display: none; }

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

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9996;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.3s;
}
.cursor.is-active {
  opacity: 1;
}

.cursor__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.cursor__ring {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 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;
}

.cursor.is-hover .cursor__ring {
  width: 74px;
  height: 74px;
  background: rgba(255, 255, 255, 0.12);
  border-color: transparent;
}

.cursor__label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}
.cursor.is-labelled .cursor__label {
  opacity: 1;
}

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

/* ============================= 5. NAVIGATION ============================= */

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

.nav.is-stuck {
  padding-block: 0.75rem;
  background: rgba(7, 6, 10, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}

/* La barre ne se masque plus au défilement (CTA toujours accessible).
   Classe conservée au cas où l'on voudrait rétablir le comportement. */
.nav.is-hidden {
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.brand__mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.brand__mark path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
}
.brand__mark circle {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
}

.brand__word {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand__word b {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.brand__word small {
  font-size: 0.5rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 0.28rem;
}

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

.nav__link {
  position: relative;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: 0.4rem;
  transition: color 0.35s;
}

.nav__link::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__link:hover,
.nav__link[aria-current='page'] {
  color: var(--chalk);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.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(--chalk);
  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.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Menu plein écran (mobile) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  clip-path: circle(0% at calc(100% - 3rem) 2.6rem);
  transition: clip-path 0.85s var(--ease);
  pointer-events: none;
}
.menu.is-open {
  clip-path: circle(150% at calc(100% - 3rem) 2.6rem);
  pointer-events: auto;
}

.menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 80% 15%, rgba(var(--glow), 0.16), transparent 70%);
  pointer-events: none;
}

.menu__list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: relative;
}

.menu__list a {
  font-family: var(--display);
  font-size: clamp(2.1rem, 9vw, 3.4rem);
  line-height: 1.28;
  color: var(--chalk);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.3s;
}
.menu.is-open .menu__list a {
  opacity: 1;
  transform: none;
}
.menu__list li:nth-child(1) a { transition-delay: 0.16s; }
.menu__list li:nth-child(2) a { transition-delay: 0.22s; }
.menu__list li:nth-child(3) a { transition-delay: 0.28s; }
.menu__list li:nth-child(4) a { transition-delay: 0.34s; }
.menu__list li:nth-child(5) a { transition-delay: 0.40s; }
.menu__list li:nth-child(6) a { transition-delay: 0.46s; }
.menu__list a:hover { color: var(--accent); }

.menu__foot {
  position: relative;
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* CTA sticky mobile */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 890;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(7, 6, 10, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.55s var(--ease);
}
.dock.is-up {
  transform: none;
}
.dock .btn {
  flex: 1;
  justify-content: center;
}

/* ============================== 6. BOUTONS =============================== */

.btn {
  --btn-fg: var(--chalk);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 2rem;
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--btn-fg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  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(120deg, var(--accent), var(--accent-2));
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}

.btn:hover::before {
  transform: none;
}

.btn:hover {
  color: #fff;
  border-color: transparent;
}

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

.btn--solid {
  border-color: transparent;
  color: #fff;
}
.btn--solid::before {
  transform: none;
}
.btn--solid:hover::before {
  transform: none;
  filter: brightness(1.14);
}

.btn--ghost {
  border-color: var(--line-strong);
}

.btn--small {
  padding: 0.8rem 1.4rem;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
}

.btn--wide {
  width: 100%;
  justify-content: center;
}

/* Lien fléché discret */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chalk);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.4s, color 0.4s, gap 0.4s var(--ease);
}
.link-arrow:hover {
  color: var(--accent);
  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.5rem);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s var(--ease-io);
}
.hero__slide.is-on {
  opacity: 1;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 8.5s linear;
}
.hero__slide.is-on img {
  transform: scale(1);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 6, 10, 0.82) 0%, rgba(7, 6, 10, 0.25) 32%, rgba(7, 6, 10, 0.72) 72%, var(--ink) 100%),
    radial-gradient(85% 60% at 50% 100%, rgba(var(--glow), 0.22), transparent 70%);
}

.hero__inner {
  position: relative;
  width: 100%;
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.8rem);
}

.hero h1 {
  max-width: 15ch;
}

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

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

.hero__facts {
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero__facts li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.hero__facts li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* Indicateur de défilement : colonne verticale sur le bord droit,
   au-dessus de la pagination — la zone est libre, aucun chevauchement. */
.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: 11rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--faint);
}
.hero__cue span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.hero__cue i {
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--accent), transparent);
  animation: cue 2.4s var(--ease-io) infinite;
  transform-origin: top;
}

@keyframes cue {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}

.hero__pager {
  position: absolute;
  right: var(--gutter);
  bottom: 4.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.hero__pager button {
  width: 26px;
  height: 2px;
  background: var(--line-strong);
  transition: background 0.4s;
}
.hero__pager button.is-on {
  background: var(--accent);
}

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

.marquee {
  position: relative;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink-2);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: slide 46s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  padding-right: 2.4rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.3vw, 1.9rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.marquee__track span::after {
  content: '✦';
  color: var(--accent);
  font-size: 0.6em;
}

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

/* ==================== 9. LES TROIS SUITES (SHOWCASE) ===================== */

.suites {
  position: relative;
  padding-block: var(--section-y);
  background:
    radial-gradient(70% 45% at 15% 0%, rgba(var(--glow), 0.1), transparent 65%),
    var(--ink);
  transition: background 1.1s var(--ease);
}

.suite {
  position: relative;
  padding-block: clamp(3rem, 9vh, 6.5rem);
  border-top: 1px solid var(--line);
}

.suite:first-of-type {
  border-top: 0;
}

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

.suite:nth-child(even) .suite__figure {
  order: 2;
}

.suite__figure {
  position: relative;
  aspect-ratio: 4 / 5;
}

.suite__figure img {
  position: absolute;
  object-fit: cover;
  border-radius: var(--radius);
}

.suite__img-main {
  inset: 0 12% 8% 0;
  width: 88%;
  height: 92%;
  z-index: 1;
}

.suite__img-sub {
  right: 0;
  bottom: 0;
  width: 46%;
  height: 42%;
  z-index: 2;
  border: 6px solid var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.suite__num {
  position: absolute;
  top: -0.35em;
  left: -0.12em;
  z-index: 3;
  font-family: var(--display);
  font-size: clamp(5rem, 13vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 242, 239, 0.28);
  pointer-events: none;
}

.suite__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

.suite__city {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.64rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}

.suite__title {
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
}

.suite__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.9rem;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: border-color 0.4s, color 0.4s;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--chalk);
}
.chip svg {
  width: 13px;
  height: 13px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.4;
}

.suite__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  width: 100%;
}

.price {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.price b {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}
.price small {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}

/* =============================== 10. EXPÉRIENCE ========================== */

.xp {
  padding-block: var(--section-y);
  background: var(--ink-2);
  border-block: 1px solid var(--line);
}

.xp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.xp__card {
  position: relative;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--ink-2);
  overflow: hidden;
  transition: background 0.5s var(--ease);
}

.xp__card::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.xp__card:hover::before {
  transform: scaleX(1);
}
.xp__card:hover {
  background: var(--ink-3);
}

.xp__icon {
  width: 30px;
  height: 30px;
  margin-bottom: 1.4rem;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.xp__card h3 {
  font-size: 1.32rem;
  margin-bottom: 0.6rem;
}

.xp__card p {
  font-size: 0.88rem;
  color: var(--muted);
}

/* ========================== 11. DÉROULÉ (TIMELINE) ======================= */

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

.flow__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.flow__sticky {
  position: sticky;
  top: 18vh;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-items: flex-start;
}

.flow__visual {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
}
.flow__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s var(--ease), transform 1.6s var(--ease);
}
.flow__visual img.is-on {
  opacity: 1;
  transform: none;
}

.flow__steps {
  position: relative;
  padding-left: 3.2rem;
}

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

.flow__step {
  position: relative;
  padding-block: clamp(1.6rem, 4vh, 2.6rem);
}

.flow__step::before {
  content: '';
  position: absolute;
  left: -3.2rem;
  top: calc(clamp(1.6rem, 4vh, 2.6rem) + 0.55rem);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--ink);
  transform: translateX(1.5px);
  transition: border-color 0.5s, background 0.5s, box-shadow 0.5s;
}

.flow__step.is-in::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(var(--glow), 0.16);
}

.flow__time {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.flow__step h3 {
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
}

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

/* ============================= 12. OCCASIONS ============================= */

.occasions {
  padding-block: var(--section-y);
  background: var(--ink-2);
  border-block: 1px solid var(--line);
}

.occasions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}

.occ {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
}

.occ img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), filter 1s var(--ease);
  filter: saturate(0.75) brightness(0.62);
}

.occ:hover img {
  transform: scale(1.07);
  filter: saturate(1) brightness(0.78);
}

.occ::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(7, 6, 10, 0.9) 100%);
}

.occ__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 1.6rem;
}

.occ__body h3 {
  font-size: 1.5rem;
  margin-bottom: 0.35rem;
}

.occ__body p {
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.occ:hover .occ__body p {
  opacity: 1;
  transform: none;
}

/* ========================= 13. ADRESSES / CARTE ========================== */

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

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

.places__list {
  display: flex;
  flex-direction: column;
}

.place {
  display: flex;
  gap: 1.4rem;
  padding-block: 1.7rem;
  border-top: 1px solid var(--line);
  transition: padding-left 0.5s var(--ease);
}
.place:last-child {
  border-bottom: 1px solid var(--line);
}
.place:hover {
  padding-left: 0.8rem;
}

.place__idx {
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--accent);
  padding-top: 0.35rem;
  min-width: 1.6rem;
}

.place__body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
}

.place__body h3 {
  font-size: 1.42rem;
}

.place__body address {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--muted);
  width: 100%;
}

.place__links {
  display: flex;
  gap: 1.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.place__links a {
  color: var(--faint);
  border-bottom: 1px solid transparent;
  transition: color 0.35s, border-color 0.35s;
}
.place__links a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.map {
  position: relative;
  aspect-ratio: 1 / 1.05;
}

.map svg {
  width: 100%;
  height: 100%;
}

.map__shape {
  fill: rgba(245, 242, 239, 0.035);
  stroke: var(--line-strong);
  stroke-width: 0.9;
}

.map__pin circle.halo {
  fill: rgba(var(--glow), 0.35);
  transform-origin: center;
  animation: ping 2.8s var(--ease-io) infinite;
}
.map__pin:nth-of-type(2) circle.halo { animation-delay: 0.7s; }
.map__pin:nth-of-type(3) circle.halo { animation-delay: 1.4s; }

.map__pin circle.core {
  fill: var(--accent);
}

.map__pin text {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@keyframes ping {
  0% { transform: scale(0.5); opacity: 0.85; }
  70% { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* =============================== 14. GALERIE ============================= */

.gallery {
  padding-block: var(--section-y);
  overflow: hidden;
}

.gallery__rail {
  display: flex;
  gap: 1rem;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.gallery__rail::-webkit-scrollbar {
  display: none;
}
.gallery__rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.gallery__item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 34vw, 460px);
  aspect-ratio: 3 / 4;
  scroll-snap-align: center;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-3);
}

.gallery__item:nth-child(even) {
  align-self: flex-end;
  aspect-ratio: 4 / 3;
  width: clamp(280px, 42vw, 580px);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter 0.8s;
  filter: brightness(0.85);
}

.gallery__item:hover img {
  transform: scale(1.05);
  filter: brightness(1);
}

/* Grille de galerie (pages suites) */
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.5rem, 1vw, 1rem);
}

.grid-gallery figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-3);
  cursor: pointer;
}

.grid-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 0.7s;
  filter: brightness(0.88);
}

.grid-gallery figure:hover img {
  transform: scale(1.06);
  filter: brightness(1.04);
}

.grid-gallery figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color 0.45s;
}
.grid-gallery figure:hover::after {
  border-color: rgba(var(--glow), 0.5);
}

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

/* ============================== 15. LIGHTBOX ============================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  background: rgba(4, 3, 6, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__stage {
  position: relative;
  width: min(94vw, 1400px);
  height: min(84svh, 900px);
  display: grid;
  place-items: center;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  transform: scale(0.965);
  opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.45s var(--ease);
}
.lightbox.is-open .lightbox__img.is-ready {
  transform: none;
  opacity: 1;
}

.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2.2rem);
  right: clamp(1rem, 3vw, 2.2rem);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background 0.4s, border-color 0.4s, transform 0.4s;
}
.lightbox__close:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(90deg);
}
.lightbox__close svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.4;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background 0.4s, border-color 0.4s;
}
.lightbox__nav:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.lightbox__nav svg {
  width: 16px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__nav--prev svg { transform: rotate(180deg); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 2rem); }

.lightbox__count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ====================== 16. MANIFESTE / CHIFFRES ========================= */

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

.manifesto__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.manifesto__text {
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
  align-items: flex-start;
}

.manifesto__text p {
  color: var(--muted);
  max-width: 52ch;
}

.manifesto__text p strong {
  color: var(--chalk);
  font-weight: 400;
}

.manifesto__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
}
.manifesto__figure img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  will-change: transform;
}

.manifesto__figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(var(--glow), 0.22), transparent 55%);
  mix-blend-mode: screen;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  margin-top: clamp(3rem, 7vw, 5rem);
}

.stat {
  background: var(--ink);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1rem, 2vw, 1.6rem);
  text-align: center;
}

.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 300;
  line-height: 1;
  background: linear-gradient(140deg, var(--chalk), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat small {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ================================ 17. FAQ ================================ */

.faq {
  padding-block: var(--section-y);
  background: var(--ink-2);
  border-block: 1px solid var(--line);
}

.faq__list {
  border-top: 1px solid var(--line);
}

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

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(1.2rem, 3vw, 1.8rem);
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 300;
  color: var(--chalk);
  transition: color 0.4s;
}
.faq__q:hover {
  color: var(--accent);
}

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

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

.faq__a > div {
  padding-bottom: 1.8rem;
  padding-right: clamp(0, 8vw, 5rem);
  color: var(--muted);
  font-size: 0.95rem;
}

.faq__a a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
}

/* ============================= 18. BANDE CTA ============================= */

.cta-band {
  position: relative;
  min-height: 78svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(4rem, 12vh, 8rem);
  overflow: hidden;
}

.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cta-band__bg img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  will-change: transform;
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(7, 6, 10, 0.7) 30%, rgba(7, 6, 10, 0.78) 70%, var(--ink) 100%),
    radial-gradient(60% 60% at 50% 50%, rgba(var(--glow), 0.2), transparent 70%);
}

.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}

.cta-band h2 {
  max-width: 16ch;
}

/* =============================== 19. FOOTER ============================== */

.footer {
  padding-block: clamp(3.5rem, 8vw, 5.5rem) 2rem;
  border-top: 1px solid var(--line);
  background: var(--ink);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.footer__brand p {
  margin-top: 1.3rem;
  font-size: 0.86rem;
  color: var(--muted);
  max-width: 34ch;
}

.footer h4 {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.3rem;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__col a {
  font-size: 0.88rem;
  color: var(--muted);
  transition: color 0.35s, padding-left 0.35s var(--ease);
}
.footer__col a:hover {
  color: var(--accent);
  padding-left: 0.4rem;
}

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

.footer__bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.footer__bottom a:hover {
  color: var(--accent);
}

.footer__secure {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.62rem;
}
.footer__secure svg {
  width: 13px;
  height: 13px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.5;
}

.footer__note {
  margin-top: 0.9rem;
  font-size: 0.76rem;
  color: var(--faint);
  line-height: 1.5;
}

/* ============================ 20. PAGE SUITE ============================= */

.suite-hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  padding-block: 9rem clamp(2.5rem, 6vh, 4rem);
  overflow: hidden;
}

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

.suite-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 6, 10, 0.86) 0%, rgba(7, 6, 10, 0.2) 40%, rgba(7, 6, 10, 0.85) 85%, var(--ink) 100%),
    radial-gradient(70% 50% at 20% 90%, rgba(var(--glow), 0.28), transparent 70%);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.6rem;
}
.crumbs a:hover {
  color: var(--accent);
}
.crumbs li + li::before {
  content: '/';
  margin-right: 0.6rem;
  opacity: 0.5;
}
.crumbs ol,
.crumbs {
  display: flex;
}

.suite-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.6rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.fact b {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
}
.fact small {
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Corps + rail de réservation */
.suite-main {
  padding-block: var(--section-y);
}

.suite-main__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.prose h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  margin-top: 1.4rem;
}
.prose h3 {
  font-size: 1.4rem;
  margin-top: 1rem;
}
.prose p {
  color: var(--muted);
  max-width: 68ch;
}
.prose strong {
  color: var(--chalk);
  font-weight: 400;
}
.prose ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--muted);
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

.booking {
  position: sticky;
  top: 6.5rem;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.booking::before {
  content: '';
  display: block;
  height: 2px;
  margin: -1.6rem -1.6rem 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.booking__price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.booking__price b {
  font-family: var(--display);
  font-size: 2.9rem;
  font-weight: 300;
  line-height: 1;
}
.booking__price span {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.booking__rates {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-block: 1.1rem;
  border-block: 1px solid var(--line);
}
.booking__rates div {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--muted);
}
.booking__rates div b {
  font-weight: 400;
  color: var(--chalk);
}

.booking__meta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.booking__meta div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.booking__note {
  font-size: 0.68rem;
  color: var(--faint);
  text-align: center;
  line-height: 1.55;
}

.amenities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem 1.6rem;
  margin-top: 0.6rem;
}

.amenity {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}
.amenity svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Autres suites */
.others {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
}

.others__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}

.other-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
}
.other-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62);
  transition: transform 1.3s var(--ease), filter 0.8s;
}
.other-card:hover img {
  transform: scale(1.06);
  filter: brightness(0.8);
}
.other-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem;
  background: linear-gradient(transparent, rgba(7, 6, 10, 0.92));
}
.other-card__body small {
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.other-card__body h3 {
  font-size: 1.4rem;
  margin-top: 0.4rem;
}

/* ============================ 21. PAGES VILLE ============================ */

.page-hero {
  position: relative;
  padding-block: 11rem clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 70% at 15% 0%, rgba(var(--glow), 0.16), transparent 65%);
}

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

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.4rem;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  transition: border-color 0.5s, transform 0.6s var(--ease);
}
.card:hover {
  border-color: rgba(var(--glow), 0.45);
  transform: translateY(-5px);
}

.card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.card:hover .card__media img {
  transform: scale(1.06);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.6rem;
  flex: 1;
}
.card__body h3 {
  font-size: 1.5rem;
}
.card__body p {
  font-size: 0.88rem;
  color: var(--muted);
  flex: 1;
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* ===================== 20 bis. 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. */

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

.bk__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.bk__month {
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}

.bk__nav {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  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(--glow), 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--prev svg {
  transform: rotate(180deg);
}

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

.bk__dows {
  margin-bottom: 4px;
}
.bk__dows span {
  text-align: center;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 0.35rem;
}

.bk__day {
  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: 6px;
  font-size: 0.8rem;
  color: var(--chalk);
  background: rgba(245, 242, 239, 0.035);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.bk__day em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.5rem;
  color: var(--faint);
  line-height: 1;
}

.bk__day:hover:not(:disabled):not(.is-off) {
  border-color: var(--accent);
}

.bk__day.is-off,
.bk__day:disabled {
  color: var(--faint);
  background: none;
  cursor: not-allowed;
  opacity: 0.4;
}

/* Jour occupé : barré, jamais cliquable */
.bk__day.is-busy {
  opacity: 0.42;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--accent);
}
.bk__day.is-busy em {
  visibility: hidden;
}

.bk__day.is-empty {
  background: none;
  border: 0;
  pointer-events: none;
}

.bk__day.is-today {
  border-color: var(--line-strong);
}

.bk__day.is-range {
  background: rgba(var(--glow), 0.16);
  border-radius: 0;
}

.bk__day.is-start,
.bk__day.is-end {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: transparent;
  font-weight: 500;
}
.bk__day.is-start em,
.bk__day.is-end em {
  color: rgba(255, 255, 255, 0.75);
}
.bk__day.is-start {
  border-radius: 6px 0 0 6px;
}
.bk__day.is-end {
  border-radius: 0 6px 6px 0;
}
.bk__day.is-start.is-end {
  border-radius: 6px;
}

/* Les deux champs de dates */
.bk__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.bk__date {
  padding: 0.7rem 0.85rem;
  background: var(--ink-2);
}
.bk__date small {
  display: block;
  font-size: 0.54rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.25rem;
}
.bk__date b {
  font-size: 0.88rem;
  font-weight: 400;
}
.bk__date.is-active {
  background: rgba(var(--glow), 0.1);
}

.bk__hint {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}
.bk__hint.is-error {
  color: #ff6b8a;
}

/* Options */
.bk__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bk__opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.35s, color 0.35s, background 0.35s;
}
.bk__opt:hover {
  border-color: var(--line-strong);
  color: var(--chalk);
}
.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(--chalk);
}
.bk__opt:has(input:checked) {
  border-color: var(--accent);
  background: rgba(var(--glow), 0.08);
  color: var(--chalk);
}

/* Récapitulatif */
.bk__recap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--muted);
}
.bk__recap div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.bk__recap .bk__total {
  padding-top: 0.6rem;
  margin-top: 0.2rem;
  border-top: 1px solid var(--line);
  color: var(--chalk);
  font-size: 1rem;
}
.bk__recap .bk__total b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
}

/* Coordonnées */
.bk__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.bk__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.bk__field--full {
  grid-column: span 2;
}
.bk__field label {
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.bk__field input,
.bk__field textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--chalk);
  background: rgba(245, 242, 239, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s, background 0.3s;
}
.bk__field textarea {
  resize: vertical;
  min-height: 68px;
}
.bk__field input:focus,
.bk__field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(245, 242, 239, 0.07);
}
.bk__field input::placeholder,
.bk__field textarea::placeholder {
  color: rgba(245, 242, 239, 0.28);
}

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

.bk__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.66rem;
  color: var(--faint);
}
.bk__secure svg {
  width: 12px;
  height: 12px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.5;
}

/* Chargement */
.bk.is-loading .bk__grid {
  opacity: 0.35;
  pointer-events: none;
}


/* ---------------------- Mise en scène du tunnel ---------------------- */

/* Le rail respire : halo d'accent qui pulse très lentement derrière la carte */
.booking {
  position: sticky;
  isolation: isolate;
}
.booking::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 60% at 50% 0%, rgba(var(--glow), 0.28), transparent 70%);
  opacity: 0.55;
  animation: bkHalo 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bkHalo {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.75; }
}

/* Chaque jour entre en scène, en cascade */
.bk__day {
  animation: bkDayIn 0.5s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 11ms);
  will-change: transform, opacity;
}
@keyframes bkDayIn {
  from { opacity: 0; transform: translateY(9px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Survol : la case se soulève et s'auréole */
.bk__day:not(:disabled):not(.is-empty):hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(var(--glow), 0.14);
  box-shadow: 0 6px 18px rgba(var(--glow), 0.22);
}

/* Le prix ne se révèle qu'au survol : la grille reste lisible au repos */
.bk__day em {
  opacity: 0.55;
  transition: opacity 0.3s, transform 0.3s var(--ease);
}
.bk__day:not(:disabled):hover em {
  opacity: 1;
  transform: translateY(-1px);
}

/* Extrémités de la plage : léger relief */
.bk__day.is-start,
.bk__day.is-end {
  box-shadow: 0 4px 16px rgba(var(--glow), 0.4);
  transform: scale(1.02);
}

/* Glissement du mois */
.bk__grid.is-swap-next { animation: bkSwapNext 0.42s var(--ease); }
.bk__grid.is-swap-prev { animation: bkSwapPrev 0.42s var(--ease); }
@keyframes bkSwapNext {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bkSwapPrev {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}
.bk__month {
  transition: opacity 0.28s var(--ease);
}
.bk__month.is-swapping { opacity: 0; }

/* Le total change : bref éclat */
.bk__total b {
  display: inline-block;
  transition: transform 0.4s var(--ease);
}
.bk__total.is-bump b {
  animation: bkBump 0.5s var(--ease);
}
@keyframes bkBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.11); }
  100% { transform: scale(1); }
}

/* Les lignes du récapitulatif se déplient */
.bk__recap > div {
  animation: bkRow 0.45s var(--ease) backwards;
  animation-delay: calc(var(--r, 0) * 55ms);
}
@keyframes bkRow {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Bouton de paiement : reflet qui balaie en continu tant qu'il est actif */
.bk__pay:not([disabled])::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: bkShine 3.6s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes bkShine {
  0%   { transform: translateX(-130%); }
  55%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* Option cochée : la case s'illumine */
.bk__opt {
  position: relative;
  overflow: hidden;
}
.bk__opt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(var(--glow), 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.bk__opt:has(input:checked)::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bk__day,
  .bk__recap > div { animation: none; }
  .booking::after,
  .bk__pay:not([disabled])::after { animation: none; }
  .bk__day em { opacity: 1; }
}

/* ====================== 21 bis. PAGE DE RÉSERVATION ======================
   Page de transition : le visiteur arrive avec l'intention de réserver, il
   n'a plus qu'à choisir laquelle des trois. Zéro distraction, un CTA par
   carte, chaque carte portant sa propre identité chromatique. */

.reserve-hero {
  position: relative;
  padding-block: 9.5rem clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
  overflow: hidden;
}

.reserve-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(65% 80% at 50% 0%, rgba(var(--glow), 0.18), transparent 68%);
}

.reserve-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}

.rcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.rcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  overflow: hidden;
  transition: border-color 0.5s, transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.rcard:hover {
  border-color: rgba(var(--glow), 0.55);
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}

.rcard__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.rcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease);
}
.rcard:hover .rcard__media img {
  transform: scale(1.06);
}
.rcard__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(7, 6, 10, 0.75) 100%);
}

.rcard__tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 1;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
}

.rcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  flex: 1;
}

.rcard__from {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.rcard__from strong {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chalk);
  margin-inline: 0.15rem;
}

.rcard__name {
  font-size: clamp(1.5rem, 2.3vw, 1.9rem);
}

.rcard__loc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.rcard__loc::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.rcard__feats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block: 0.2rem 0.4rem;
}
.rcard__feats li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.rcard__cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.rcard__more {
  align-self: center;
  font-size: 0.64rem;
}

.rcard__note {
  font-size: 0.66rem;
  color: var(--faint);
  text-align: center;
}

/* Libellés courts réservés au format compact */
.rcard__cta-short {
  display: none;
}

/* Bandeau de réassurance */
.reassure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.reassure div {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.3rem clamp(1rem, 2vw, 1.6rem);
  background: var(--ink);
  font-size: 0.82rem;
  color: var(--muted);
}
.reassure svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========================== 22. PAGES LÉGALES ============================ */

.legal {
  padding-block: 10rem var(--section-y);
}

.legal .prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.legal .prose h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.legal .prose a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
}

/* ============================= 23. RESPONSIVE ============================ */

@media (max-width: 1080px) {
  .suite-main__grid {
    grid-template-columns: 1fr;
  }
  .booking {
    position: static;
    order: -1;
  }
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .nav__links {
    display: none;
  }
  .nav__burger {
    display: block;
  }
  .nav__right .btn {
    display: none;
  }
  .dock {
    display: flex;
  }
  /* Les trois suites restent côte à côte quelle que soit la largeur : le
     visiteur doit pouvoir comparer d'un seul coup d'œil, sans défiler.
     La carte passe donc en version compacte. */
  .rcards {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .rcard__media {
    aspect-ratio: 1 / 1;
  }
  .rcard__tag {
    top: 0.4rem;
    left: 0.4rem;
    padding: 0.22rem 0.5rem;
    font-size: 0.46rem;
    letter-spacing: 0.12em;
  }
  .rcard__body {
    padding: 0.75rem 0.55rem 0.85rem;
    gap: 0.35rem;
  }
  .rcard__from {
    font-size: 0.46rem;
    letter-spacing: 0.06em;
    line-height: 1.3;
  }
  .rcard__from strong {
    display: block;
    margin: 0.05rem 0 0;
    font-size: 1.05rem;
    line-height: 1.1;
  }
  .rcard__name {
    font-size: 0.95rem;
    line-height: 1.15;
  }
  .rcard__loc {
    font-size: 0.58rem;
    line-height: 1.3;
  }
  .rcard__loc::before {
    display: none;
  }
  .rcard__feats,
  .rcard__note {
    display: none;
  }
  .rcard__cta {
    gap: 0.45rem;
    /* margin-top:auto conservé pour aligner les trois boutons sur la même
       ligne, quelle que soit la longueur des noms et des adresses. */
    padding-top: 0.6rem;
  }
  .rcard__cta .btn {
    padding: 0.65rem 0.35rem;
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    gap: 0.35rem;
  }
  .rcard__cta .btn__arrow {
    width: 10px;
  }
  .rcard__more {
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    padding-bottom: 0.2rem;
  }
  .rcard__cta-long {
    display: none;
  }
  .rcard__cta-short {
    display: inline;
  }
  /* Le hero est resserré pour que les trois cartes tiennent dans l'écran
     sans défilement, au-dessus de la barre de réservation fixe. */
  .reserve-hero {
    padding-block: 5.4rem 1.1rem;
  }
  .reserve-hero__inner {
    gap: 0.65rem;
  }
  .reserve-hero .lede {
    font-size: 0.82rem;
    line-height: 1.5;
  }
  .reserve-hero .crumbs {
    margin-bottom: 0;
  }
  /* La barre de réservation fixe recouvre 4.6rem : on dégage le bas des heros
     pleine hauteur pour que leurs boutons restent cliquables. */
  .hero,
  .suite-hero {
    padding-bottom: calc(clamp(2.5rem, 7vh, 4.5rem) + 4.6rem);
  }
  .suite__grid,
  .flow__inner,
  .places__inner,
  .manifesto__inner {
    grid-template-columns: 1fr;
  }
  .suite:nth-child(even) .suite__figure {
    order: 0;
  }
  /* En pleine largeur, un 4/5 dépasse la hauteur de l'écran : on aplatit. */
  .suite__figure {
    aspect-ratio: 4 / 3.4;
  }
  .manifesto__figure {
    aspect-ratio: 4 / 3.4;
  }
  .flow__sticky {
    position: static;
  }
  .flow__visual {
    aspect-ratio: 16 / 10;
  }
  .places__inner .map {
    order: -1;
    max-width: 380px;
    margin-inline: auto;
  }
  .g-6, .g-4, .g-3, .g-8 {
    grid-column: span 6;
  }
  .g-3 { aspect-ratio: 1 / 1; }
  body {
    padding-bottom: 4.6rem;
  }
}

/* Petits téléphones : on gagne les quelques dizaines de pixels qui manquent
   pour que les trois cartes restent entièrement au-dessus de la barre. */
@media (max-width: 400px) {
  .reserve-hero {
    padding-block: 4.9rem 0.8rem;
  }
  .reserve-hero .crumbs {
    display: none;
  }
  .reserve-hero .lede {
    font-size: 0.76rem;
  }
}

@media (max-width: 620px) {
  .hero__pager {
    display: none;
  }
  .hero__meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__top {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .grid-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .g-6, .g-4, .g-3, .g-8, .g-12 {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
  }
  .g-12 { grid-column: span 2; aspect-ratio: 3 / 2; }
  .lightbox__nav {
    width: 44px;
    height: 44px;
  }
  .suite__num {
    font-size: 4.5rem;
  }
}

/* ========================== 24. REDUCED MOTION =========================== */

@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;
  }
  body::after {
    animation: none;
  }
  .js .reveal,
  .js .reveal-mask > *,
  .js .split-line > span {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .hero__slide img {
    transform: none;
  }
}

/* ==========================================================================
   BADGE SÉLECTION LUVIA
   --------------------------------------------------------------------------
   Repris du site prestige-rooms, recalé sur les jetons de couleur d'ici.
   Le SVG est déjà sombre et doré : il se pose sur le fond du site sans
   cartouche blanche, contrairement à un logo importé brut.
   ========================================================================== */

.section-luvia {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.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(--line);
  border-radius: var(--radius, 18px);
  background: rgba(255, 255, 255, 0.018);
  text-align: left;
}

.luvia__badge {
  display: block;
  flex: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.luvia__badge:hover { transform: translateY(-3px); }

/* Taille imposée : une règle globale met les images à 100 % de leur parent,
   ce qui étirerait le badge sur toute la largeur du bloc. */
.luvia__badge img {
  width: clamp(15rem, 26vw, 20rem);
  height: auto;
}

.luvia__mot {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.luvia__mot strong { color: var(--chalk); font-weight: 500; }

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

/* Une nuit occupée qui reste acceptable comme date de SORTIE : on ne dort
   pas la nuit du départ. Elle se distingue des nuits vraiment fermées —
   à demi barrée, mais cliquable. */
.bk__day.is-busy.is-checkout-only {
  opacity: 0.72;
  cursor: pointer;
  pointer-events: auto;
}
.bk__day.is-busy.is-checkout-only::after {
  opacity: 0.45;
}
.bk__day.is-busy.is-checkout-only:hover {
  opacity: 1;
  border-color: rgba(var(--glow), 0.5);
}

/* Le logo en pied de page. Taille imposée : une règle globale met les images
   à 100 % de leur parent, ce qui l'étirerait sur toute la colonne. Il n'est
   lisible qu'à partir de 80 px — d'où les 120. */
.brand__logo {
  width: 120px !important;
  height: 120px !important;
  flex-shrink: 0;
  object-fit: contain;
}
.brand__word--muet {
  justify-content: center;
}
@media (max-width: 620px) {
  .brand__logo { width: 92px !important; height: 92px !important; }
}

/* ---- Le vrai logo à la place du sigle « S » -----------------------------
   Tailles imposées en dur : une règle globale met les images à 100 % de leur
   parent. Le logo est un médaillon dont le texte n'est lisible qu'à partir
   de 80 px — d'où l'en-tête remonté de 34 à 46 px, le maximum que la barre
   accepte sans grandir. */

.brand__mark--logo {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain;
}

.preloader__logo {
  width: 118px !important;
  height: 118px !important;
  object-fit: contain;
  /* Le sigle SVG se dessinait au trait ; un PNG ne sait pas. On garde du
     mouvement avec une apparition en fondu et un léger zoom. */
  animation: logo-entree 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes logo-entree {
  from { opacity: 0; transform: scale(0.86); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__logo { animation: none; }
}

@media (max-width: 620px) {
  .brand__mark--logo { width: 40px !important; height: 40px !important; }
  .preloader__logo { width: 96px !important; height: 96px !important; }
}