/* =========================================================================
   Chalet Gaïla — feuille de style
   Palette et typographies reprises de la première version du site (2026).
   Crème · Sable · Sapin · Vert nuit · Mousse · Doré
   ========================================================================= */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-300-italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --creme: #faf8f4;
  --sable: #f2ede4;
  --sapin: #2d3d2e;
  --nuit: #1a1f1a;
  --nuit-profond: #0e1410;
  --mousse: #7a6a4f;
  --dore: #c9a96e;
  --beige: #e8d7b0;

  --ink: #1a1a1a;
  --ink-2: #3a3a3a;
  --ink-3: #6b6b78;
  --line: rgba(26, 26, 26, 0.1);
  --line-fine: rgba(26, 26, 26, 0.06);

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 56px);
  --measure: 60ch;
  --nav-h: 72px;
  --wrap: 1280px;
  --section-y: clamp(2.8rem, 5.5vw, 5rem);
  --shadow: 0 30px 60px -25px rgba(26, 26, 26, 0.22);
  --shadow-deep: 0 50px 90px -35px rgba(14, 20, 16, 0.5);
  /* Ombre des photos : longue et franchement froide, pour poser l'image sur la page */
  --shadow-photo: 0 22px 36px -18px rgba(28, 50, 66, 0.36), 0 7px 14px -8px rgba(28, 50, 66, 0.22);
  --shadow-photo-hover: 0 38px 58px -22px rgba(28, 50, 66, 0.48), 0 12px 22px -10px rgba(28, 50, 66, 0.3);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--creme); color: var(--ink-2);
  font-family: var(--font-text); font-size: 1rem; line-height: 1.8; font-weight: 300;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
picture { display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; line-height: 1.1; margin: 0 0 0.5em; letter-spacing: -0.01em; color: var(--ink); }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--sapin); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--mousse); }
button { font: inherit; color: inherit; }
strong { font-weight: 600; }
.muted { color: var(--ink-3); }
.small { font-size: 0.85rem; }
.visually-hidden, .hidden-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--sapin); outline-offset: 3px; }
.on-dark :focus-visible, .hero :focus-visible { outline-color: var(--beige); }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--sapin); color: #fff; padding: 0.7em 1.2em; }
.skip-link:focus { top: 8px; }
.trema { color: var(--dore); }
.nav .trema, .footer .trema { color: inherit; }
.icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
a .icon { width: 0.8em; height: 0.8em; margin-left: 0.35em; vertical-align: -0.02em; display: inline-block; }

/* ------------------------------------------- libellés et titres de section */
.label {
  display: flex; align-items: center; gap: 0.85em;
  font-family: var(--font-text); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--mousse);
  margin: 0 0 1.4em; max-width: none;
}
.label::before { content: ""; width: 2rem; height: 1px; background: currentColor; flex: 0 0 auto; }
.label--center { justify-content: center; }
.on-dark .label { color: var(--dore); }

.title { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); line-height: 1.1; margin-bottom: 0; }
.title em { font-style: italic; color: var(--mousse); display: block; }
.on-dark .title, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .title em { color: var(--beige); }

.section { padding: var(--section-y) var(--gutter); max-width: var(--wrap); margin: 0 auto; scroll-margin-top: var(--nav-h); }
.section__head { max-width: 40rem; margin-bottom: clamp(1.8rem, 3.2vw, 2.6rem); }
/* Les paragraphes gardent leur largeur de lecture, mais celle-ci est centrée à son tour */
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head--center p, .carou__head p, .page__head p { margin-inline: auto; }
.section__intro { margin-top: 1.5em; color: var(--ink-2); }
.on-dark .section__intro { color: rgba(255, 255, 255, 0.72); }

/* ------------------------------------------------------------ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8em;
  min-height: 52px; padding: 0.9em 2.2em; border: 1px solid transparent;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.btn--primary { background: var(--sapin); color: #fff; border-color: var(--sapin); }
.btn--primary:hover { background: var(--nuit); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(26, 26, 26, 0.28); }
.btn--ghost:hover { background: var(--sapin); border-color: var(--sapin); color: #fff; }
.on-dark .btn--ghost, .hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.on-dark .btn--ghost:hover, .hero .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: var(--beige); color: var(--ink); border-color: var(--beige); }
.btn .icon { width: 0.85em; height: 0.85em; margin: 0; }

/* ------------------------------------------------------------ nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--gutter); color: #fff; background: transparent;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.is-past-hero .nav, .page--sub .nav {
  color: var(--ink); background: rgba(250, 248, 244, 0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line-fine);
}
/* Voile sous la barre quand elle est posée sur la photo du hero : sans lui,
   le menu blanc devient illisible sur un ciel clair. */
.nav__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 20, 16, 0.5) 0%, rgba(14, 20, 16, 0.22) 60%, rgba(14, 20, 16, 0) 100%);
  transition: opacity 0.5s var(--ease); }
.is-past-hero .nav__scrim, .page--sub .nav__scrim { opacity: 0; }

.nav__brand { display: flex; align-items: center; gap: 0.9rem; color: inherit; text-decoration: none; }
/* Le logo garde son fond crème : il disparaît dans la barre claire et forme
   une petite plaque nette quand la barre est posée sur la photo du hero. */
.logo { flex: 0 0 auto; }
.logo img { display: block; width: 100%; height: auto; }
.logo--mark { width: 74px; border-radius: 4px; overflow: hidden; }
.logo--full { width: clamp(150px, 16vw, 190px); border-radius: 6px; overflow: hidden; }
.nav__name { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 599px) { .logo--mark { width: 58px; } .nav__name { font-size: 0.62rem; letter-spacing: 0.22em; } }
.nav__menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1.2rem, 2.4vw, 2.5rem); align-items: center; }
.nav__menu a { color: inherit; text-decoration: none; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; position: relative; }
.nav__menu a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: currentColor; transition: width 0.5s var(--ease); }
.nav__menu a:hover::after { width: 100%; }
/* Bouton Contact : chaque état fixe explicitement fond ET texte, sinon l'un des deux
   hérite d'une autre règle et le libellé disparaît au survol. */
.nav__menu .nav__cta { border: 1px solid currentColor; padding: 0.85em 1.6em; letter-spacing: 0.2em; transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); }
.nav__menu .nav__cta::after { display: none; }
.nav__menu .nav__cta:hover { background: #fff; border-color: #fff; color: var(--ink); }
.is-past-hero .nav__menu .nav__cta, .page--sub .nav__menu .nav__cta { background: var(--sapin); border-color: var(--sapin); color: #fff; }
.is-past-hero .nav__menu .nav__cta:hover, .page--sub .nav__menu .nav__cta:hover { background: var(--nuit); border-color: var(--nuit); color: #fff; }
/* Bascule de langue */
.nav__lang { display: flex; align-items: center; gap: 0.1em; font-size: 0.68rem; letter-spacing: 0.14em; }
.nav__lang > * { padding: 0.4em 0.55em; color: inherit; text-decoration: none; opacity: 0.55; }
.nav__lang > a:hover { opacity: 1; }
.nav__lang > a::after { display: none; }
.nav__lang [aria-current] { opacity: 1; font-weight: 600; border-bottom: 1px solid currentColor; }
@media (max-width: 979px) { .nav__lang { justify-content: center; gap: 1rem; margin-top: 1.5rem; font-size: 0.9rem; } .nav__lang > * { padding: 0.5em 0.8em; } }

.nav__burger { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.nav__burger-bar, .nav__burger-bar::before, .nav__burger-bar::after { content: ""; position: absolute; left: 10px; width: 24px; height: 1px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav__burger-bar { top: 21px; }
.nav__burger-bar::before { top: -7px; left: 0; }
.nav__burger-bar::after { top: 7px; left: 0; }
.nav.is-open .nav__burger-bar { background: transparent; }
.nav.is-open .nav__burger-bar::before { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger-bar::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 979px) {
  .nav__burger { display: block; }
  .nav.is-open { color: #fff; background: var(--nuit); }
  .nav__menu { position: fixed; inset: var(--nav-h) 0 auto 0; padding: 1.5rem var(--gutter) 2.5rem; background: var(--nuit); color: #fff; display: none; height: calc(100dvh - var(--nav-h)); overflow-y: auto; }
  .nav.is-open .nav__menu { display: block; }
  .nav__menu ul { flex-direction: column; align-items: center; gap: 1.6rem; padding-top: 2rem; }
  .nav__menu a { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.18em; text-transform: uppercase; }
  .nav__menu .nav__cta { font-family: var(--font-text); font-size: 0.75rem; margin-top: 1rem; }
  .is-past-hero .nav__menu .nav__cta { background: transparent; border-color: #fff; color: #fff; }
}

/* ------------------------------------------------------------ hero */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; color: #fff; background: var(--nuit); }
/* Débords en pixels et non en pourcentage : la parallaxe déplace la photo de quelques
   dizaines de pixels, un pourcentage ne suffirait pas sur un écran étroit et laisserait
   apparaître le fond de section sur le côté. */
.hero__photo { position: absolute; inset: -10% -60px -2px -60px; z-index: 0; will-change: transform; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 20, 16, 0.5) 0%, rgba(14, 20, 16, 0.12) 32%), linear-gradient(0deg, rgba(14, 20, 16, 0.78) 0%, rgba(14, 20, 16, 0.35) 38%, rgba(14, 20, 16, 0) 66%); }
.hero__snow { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__mist { position: absolute; left: -20%; right: -20%; bottom: 8%; height: 34%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(250, 248, 244, 0.14) 30%, rgba(250, 248, 244, 0.04) 50%, rgba(250, 248, 244, 0.16) 72%, transparent 100%);
  filter: blur(26px); animation: mist 40s ease-in-out infinite alternate; will-change: transform; }
@keyframes mist { from { translate: -4% 0; } to { translate: 4% 0; } }
.hero__content { position: relative; z-index: 4; padding: calc(var(--nav-h) + 3rem) var(--gutter) 2rem; max-width: min(78rem, 100%); align-self: end; will-change: transform; }
.hero__label { display: block; font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); margin-bottom: 1.8em; }
.hero__title { font-size: clamp(3.2rem, 2rem + 6.5vw, 6.8rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.015em; margin: 0; color: #fff; }
.hero__tagline { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem); line-height: 1.2; color: var(--beige); margin: 0.15em 0 0; max-width: 32ch; }
.hero__intro { margin: 2rem 0 0; max-width: 68ch; color: rgba(255, 255, 255, 0.86); font-size: 1.02rem; line-height: 1.8; }
.hero__badge { display: inline-flex; align-items: center; gap: 0.7em; margin: 1.6rem 0 0; padding: 0.5em 1.1em;
  border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 999px;
  background: rgba(14, 20, 16, 0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; max-width: none; }
.hero__stars { display: inline-flex; gap: 2px; color: var(--dore); }
.hero__stars .icon { width: 13px; height: 13px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }

.hero__content { padding-bottom: clamp(5rem, 14vw, 10rem); }

/* Transition entre sections : un fondu long, sans motif. Si une photo est posée dans
   la bande (voir `treeline.image` dans photos.json), elle s'affiche sous le fondu. */
.treeline { position: absolute; left: 0; right: 0; pointer-events: none; overflow: hidden; }
.treeline__img { width: 100%; height: 100%; }
.treeline__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.treeline::after { content: ""; position: absolute; inset: 0; }

.hero__ridge { bottom: -1px; z-index: 5; height: clamp(140px, 20vw, 280px); }
.hero__ridge::after { background: linear-gradient(180deg, transparent 0%, rgba(250, 248, 244, 0.28) 42%, rgba(250, 248, 244, 0.78) 76%, var(--creme) 99%); }

.dots { display: inline-block; width: 14px; height: 6px; background: radial-gradient(circle at 3px 3px, var(--dore) 2.6px, transparent 3px), radial-gradient(circle at 11px 3px, var(--dore) 2.6px, transparent 3px); }

/* ----------------------------------------------------- présentation */
.presentation { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; padding: var(--section-y) var(--gutter); max-width: var(--wrap); margin: 0 auto; scroll-margin-top: var(--nav-h); }
@media (min-width: 980px) { .presentation { grid-template-columns: 5fr 7fr; } }
.presentation__text p { color: var(--ink-2); }
.presentation__text .title { margin-bottom: 1.2rem; }
.presentation__figures { display: flex; gap: clamp(2rem, 4vw, 3.5rem); margin-top: 2.5rem; flex-wrap: wrap; }
.presentation__figure { display: block; }
.presentation__figure b { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; line-height: 1; color: var(--sapin); }
.presentation__figure span { display: block; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-top: 0.6em; }
/* Les deux photos ont exactement le même format : c'est le cadre qui porte la
   proportion, pas l'image. Sans `align-items: start`, la seconde s'étirerait jusqu'au
   bas de la rangée et se retrouverait plus courte que la première de tout son décalage. */
.presentation__photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem, 1.6vw, 1.4rem); align-items: start; }
.presentation__photos picture { overflow: hidden; aspect-ratio: 3 / 4; }
.presentation__photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.presentation__photos picture:hover img { transform: scale(1.05); }
/* La seconde descend d'un cran : le décalage est décoratif, il ne change pas sa taille. */
.presentation__photos picture:nth-child(2) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }

/* ---------------------------------------------------------- galerie */
/* overflow-x: clip et non hidden : hidden créerait un conteneur de défilement
   qui casserait l'adhérence (position: sticky) du sommaire latéral. */
.gallery { position: relative; background: var(--sable); overflow-x: clip; }
/* Motif : de petits sapins clairsemés, à peine plus soutenus que le sable du fond */
.gallery__pattern { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gallery__pattern .firs { width: 100%; height: 100%; }
.gallery__pattern path { fill: #e3dac8; }
.gallery__pattern::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sable) 0%, rgba(242, 237, 228, 0.25) 8%, rgba(242, 237, 228, 0.25) 92%, var(--sable) 100%); }

/* Variante photo, si `galleryBackground` désigne une image dans photos.json */
.gallery__forest { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gallery__forest-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.gallery__bg { width: 100%; height: 100%; }
/* La photo est un portrait : on n'en montre qu'une portion, cadrée en haut,
   plutôt que de l'étirer sur toute la largeur. */
.gallery__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  filter: grayscale(1) sepia(0.46) saturate(1.15) brightness(1.12) contrast(0.76); }
@media (min-width: 900px) { .gallery__bg img { object-position: center 14%; } }
/* Repli : la forêt dessinée, si aucune photo n'est désignée dans photos.json */
.forest { --fog: #f2ede4; width: 100%; height: 100%; }
/* Voile crème par-dessus : le décor reste un fond, les photos du chalet priment */
.gallery__forest::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sable) 0%, rgba(242, 237, 228, 0.72) 9%, rgba(242, 237, 228, 0.72) 91%, var(--sable) 100%); }
.gallery__inner { position: relative; z-index: 1; padding: var(--section-y) var(--gutter); max-width: 1440px; margin: 0 auto; }
.gallery__head { max-width: 40rem; margin-bottom: clamp(1.8rem, 3.2vw, 2.6rem); }
.gallery__head .section__intro { margin-top: 1.2em; }

.gallery__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start; }
@media (min-width: 1024px) { .gallery__layout { grid-template-columns: 230px minmax(0, 1fr); } }

/* Sommaire « plan de la maison » : rail collant sur desktop, barre repliable sur mobile */
.toc { min-width: 0; max-width: 100%; }
.toc__eyebrow { margin: 0; font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--mousse); }
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__item > a { display: flex; align-items: center; gap: 0.75em; padding: 0.62em 0; text-decoration: none; color: var(--ink-2); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; transition: color 0.3s var(--ease); }
.toc__mark { width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid rgba(26, 26, 26, 0.28); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.toc__name { flex: 1 1 auto; }
.toc__n { font-size: 0.66rem; letter-spacing: 0.06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.toc__item > a:hover { color: var(--ink); }
.toc__item > a:hover .toc__mark { border-color: var(--sapin); }
.toc__item > a.is-active { color: var(--sapin); }
.toc__item > a.is-active .toc__mark { background: var(--sapin); border-color: var(--sapin); }
/* Les chambres ne se déplient qu'une fois dans la section */
.toc__rooms { list-style: none; margin: 0 0 0 3px; padding: 0; overflow: hidden; max-height: 0; opacity: 0;
  border-left: 1px solid rgba(26, 26, 26, 0.14); transition: max-height 0.45s var(--ease), opacity 0.3s var(--ease); }
.toc__item.is-open .toc__rooms { max-height: 18rem; opacity: 1; }
.toc__rooms a { display: block; padding: 0.18em 0 0.18em 1rem; font-family: var(--font-display); font-size: 1.06rem; color: var(--ink-2); text-decoration: none; }
.toc__rooms a:hover, .toc__rooms a.is-active { color: var(--sapin); }
.toc__chevron { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease); }

@media (min-width: 1024px) {
  .toc { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
  .toc__toggle { display: none; }
  .toc__eyebrow--desk { padding-bottom: 0.9rem; border-bottom: 1px solid rgba(26, 26, 26, 0.18); margin-bottom: 0.5rem; }
}
@media (max-width: 1023px) {
  .toc { position: sticky; top: var(--nav-h); z-index: 14; margin: 0 calc(-1 * var(--gutter)); }
  .toc__eyebrow--desk { display: none; }
  .toc__toggle { width: 100%; display: flex; align-items: center; gap: 0.9em; padding: 0.8rem var(--gutter); border: 0; border-bottom: 1px solid var(--line); background: rgba(242, 237, 228, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; text-align: left; color: var(--ink); }
  .toc__toggle .toc__eyebrow { flex: 0 0 auto; }
  .toc__current { flex: 1 1 auto; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
  .toc__toggle[aria-expanded="true"] .toc__chevron { transform: rotate(180deg); }
  .toc__panel { display: none; padding: 0.4rem var(--gutter) 1.4rem; background: var(--creme); border-bottom: 1px solid var(--line); max-height: 62vh; overflow-y: auto; }
  .toc.is-open .toc__panel { display: block; }
  .toc__item > a { padding: 0.85em 0; border-bottom: 1px solid var(--line-fine); }
  .toc__item.is-open .toc__rooms { max-height: 22rem; }
  .toc__rooms a { padding: 0.5em 0 0.5em 1rem; }
}

.gallery__section { scroll-margin-top: calc(var(--nav-h) + 5rem); margin-bottom: clamp(2rem, 3.6vw, 3rem); }
.gallery__section-head { margin-bottom: 1.4rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(26, 26, 26, 0.14); }
.gallery__section-title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin: 0; }
/* Le chapeau d'une section court sur toute la largeur de la mosaïque qu'il annonce :
   borné à une largeur de lecture, il s'arrêtait au milieu et laissait un grand vide
   à sa droite. La règle de base `p { max-width: var(--measure) }` s'applique ici
   aussi, d'où le `none` explicite. */
.gallery__section-intro { margin: 0.7em 0 0; font-size: 0.95rem; color: var(--ink-2); max-width: none; }
.gallery__room { scroll-margin-top: calc(var(--nav-h) + 5rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.gallery__room-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 1em; margin-bottom: 0.8em; }
.gallery__room-name { font-size: 1.6rem; position: relative; padding-left: 1.1em; }
.gallery__room-name::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 0.7em; height: 1px; background: var(--dore); }
.gallery__room-meta { font-family: var(--font-text); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

/* Mosaïque éditoriale : chaque photo reçoit une emprise (xl, l, t, s) définie dans photos.json.
   `dense` comble les trous laissés par les grandes cases avec les petites qui suivent. */
/* Deux ou quatre colonnes, jamais trois : les emprises sont calculées pour que le
   total des cases tombe sur un multiple de quatre, et une grille à trois colonnes
   laisse alors une case vide en fin de bloc.
   La hauteur de rangée suit la largeur de colonne, pour qu'une petite case reste
   proche du 4/3 des photos : sinon la mosaïque les rogne d'un cinquième en hauteur. */
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-auto-flow: dense; perspective: 1200px;
  grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(104px, calc(33.7vw - 4px), 345px); }
@media (min-width: 600px) { .grid { gap: 10px; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 188px; gap: 12px; } }
.grid__item { min-width: 0; min-height: 0; }
.grid__item.is-xl, .grid__item.is-xlr { grid-column: span 2; grid-row: span 2; }
/* `xlr` : grande case calée à droite. Le placement explicite est nécessaire, le flux
   dense remplit toujours depuis la gauche. En dessous de quatre colonnes elle se
   comporte comme une grande case ordinaire. */
@media (min-width: 1024px) { .grid__item.is-xlr { grid-column: 3 / span 2; } }
.grid__item.is-l { grid-column: span 2; }
.grid__item.is-t { grid-row: span 2; }
.thumb { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in; overflow: hidden; background: #e5ded2;
  border-radius: 7px; box-shadow: var(--shadow-photo);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.2s ease-out, box-shadow 0.5s var(--ease); }
.thumb picture, .thumb img { width: 100%; height: 100%; }
.thumb img { object-fit: cover; transition: transform 1.4s var(--ease); }
.thumb:hover { box-shadow: var(--shadow-photo-hover); z-index: 2; }
.thumb:hover img { transform: scale(1.08); }
.thumb__veil { position: absolute; inset: 0; pointer-events: none; background: rgba(14, 20, 16, 0); transition: background-color 0.5s var(--ease); }
.thumb:hover .thumb__veil { background: rgba(14, 20, 16, 0.18); }
.thumb__glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.06) 32%, transparent 62%); mix-blend-mode: screen; transition: opacity 0.3s; }
.thumb:hover .thumb__glare { opacity: 1; }
.thumb__see { position: absolute; right: 14px; bottom: 12px; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(6px); transition: all 0.5s var(--ease); }
.thumb:hover .thumb__see { opacity: 1; transform: none; }
.thumb:focus-visible { outline-offset: -3px; }

/* ---------------------------------------------------------- lightbox */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: rgba(14, 20, 16, 0.97); color: #fff; }
.lightbox::backdrop { background: rgba(14, 20, 16, 0.7); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure { margin: 0; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; }
.lightbox__stage { display: grid; place-items: center; min-height: 0; padding: 3.5rem 3.5rem 0.5rem; }
.lightbox__stage picture, .lightbox__stage img { max-width: 100%; max-height: calc(100vh - 7.5rem); width: auto; height: auto; object-fit: contain; }
.lightbox__caption { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.8rem 3.5rem 1.2rem; font-size: 0.9rem; }
.lightbox__text { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--beige); }
.lightbox__counter { font-size: 0.68rem; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.lightbox__btn { position: absolute; z-index: 2; width: 50px; height: 50px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: rgba(250, 248, 244, 0.1); color: #fff; cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 0.4s, border-color 0.4s; }
.lightbox__btn:hover { background: rgba(250, 248, 244, 0.22); border-color: var(--dore); }
.lightbox__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 599px) {
  .lightbox__stage { padding: 4rem 0.5rem 0.5rem; }
  .lightbox__caption { padding: 0.5rem 1rem 5rem; flex-direction: column; gap: 0.3rem; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 1rem; transform: none; }
}

/* ------------------------------------------------------- carrousel */
.carou { padding: var(--section-y) 0; overflow: hidden; }
.carou__head { max-width: 44rem; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); padding: 0 var(--gutter); text-align: center; }
.carou__head .label { justify-content: center; }
.carou__stage { position: relative; }
/* Défilement en bande : toutes les photos à la même hauteur, largeur libre selon leur
   format. Les voisines se suivent sans intervalle et débordent sur les côtés. */
.carou__track {
  list-style: none; margin: 0; padding-inline: 46vw;
  display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.4rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carou__track::-webkit-scrollbar { display: none; }
.carou__slide { flex: 0 0 auto; scroll-snap-align: center; scroll-snap-stop: always; }
.carou__slide figure { margin: 0; }
/* La photo active reprend sa taille pleine, les voisines reculent d'un cran.
   La transformation ne change pas la mise en page : les écarts restent constants. */
.carou__slide picture { display: block; overflow: hidden; border-radius: 16px; box-shadow: var(--shadow-photo);
  transform: scale(0.9); opacity: 0.42; transform-origin: center;
  transition: transform 0.55s var(--ease), opacity 0.55s var(--ease), box-shadow 0.55s var(--ease); }
.carou__slide.is-current picture { transform: scale(1); opacity: 1; box-shadow: var(--shadow-photo-hover); }
.carou__slide img { display: block; height: min(56vh, 500px); width: auto; max-width: 88vw; }
.carou__slide figcaption { margin-top: 1rem; font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--ink-2); text-align: center; opacity: 0; transition: opacity 0.55s var(--ease); }
.carou__slide.is-current figcaption { opacity: 1; }
.carou__btn { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 52px; height: 52px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(26, 26, 26, 0.12); border-radius: 999px; background: rgba(250, 248, 244, 0.82); color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow);
  transition: background-color 0.4s var(--ease), opacity 0.3s; }
.carou__btn:hover { background: #fff; }
.carou__btn[disabled] { opacity: 0.25; pointer-events: none; }
.carou__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.carou__btn--prev { left: clamp(0.5rem, 3vw, 2rem); }
.carou__btn--next { right: clamp(0.5rem, 3vw, 2rem); }
.carou__dots { list-style: none; margin: clamp(1.5rem, 3vw, 2.2rem) 0 0; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.carou__dots button { width: 26px; height: 2px; padding: 0; border: 0; cursor: pointer; background: rgba(26, 26, 26, 0.18); transition: background-color 0.4s var(--ease); }
.carou__dots button:hover { background: rgba(26, 26, 26, 0.4); }
.carou__dots button[aria-current="true"] { background: var(--sapin); }
@media (max-width: 767px) { .carou__btn { display: none; } .carou__slide img { height: min(46vh, 380px); max-width: 86vw; } }

/* Plans officiels du domaine : liens seulement, ces documents appartiennent
   à l'office de tourisme et à Méribel Alpina et sont tenus à jour par eux. */
.plans { max-width: 60rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: 0 var(--gutter); text-align: center; }
.plans__title { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); margin-bottom: 0.4em; }
.plans__intro { margin: 0 auto 1.8rem; font-size: 0.92rem; color: var(--ink-3); }
.plans__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.6rem, 1.2vw, 0.9rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .plans__list { grid-template-columns: repeat(3, 1fr); } }
.plans__list a { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35em; height: 100%;
  padding: 1.1rem 1.3rem; background: #fff; border: 1px solid var(--line-fine); border-radius: 10px;
  text-decoration: none; color: var(--ink); text-align: left; font-size: 0.92rem;
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.plans__list a:hover { box-shadow: var(--shadow); transform: translateY(-2px); color: var(--sapin); }
.plans__note { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.plans__list .icon { align-self: flex-end; margin: -1.4em 0 0; width: 0.8em; height: 0.8em; color: var(--ink-3); }

/* ------------------------------------------------------- équipements */
/* Essentiels posés sur une photo très éclaircie : les six groupes deviennent
   des panneaux flottants, pour rester lisibles sans écraser l'image. */
.equip { position: relative; overflow: hidden; background: var(--creme); scroll-margin-top: var(--nav-h); }
.equip__photo { position: absolute; inset: -80px 0; z-index: 0; will-change: transform; }
.equip__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
/* Deux voiles superposés plutôt qu'un dégradé unique : mélanger du crème et du vert nuit
   dans une même rampe passe forcément par une zone grise. Ici le premier voile s'efface,
   le second assombrit la photo jusqu'au vert de la section suivante. */
.equip__veil { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--creme) 0%, rgba(250, 248, 244, 0.85) 13%, rgba(250, 248, 244, 0.85) 62%, rgba(250, 248, 244, 0.3) 84%, rgba(250, 248, 244, 0) 100%); }
.equip__dusk { position: absolute; inset: auto 0 0 0; z-index: 1; height: clamp(150px, 19vw, 240px);
  background: linear-gradient(180deg, rgba(26, 31, 26, 0) 0%, rgba(26, 31, 26, 0.4) 46%, rgba(26, 31, 26, 0.86) 80%, var(--nuit) 100%); }
.equip__inner { position: relative; z-index: 2; padding: var(--section-y) var(--gutter); max-width: var(--wrap); margin: 0 auto;
  padding-bottom: clamp(11rem, 24vw, 17rem); }
.equip__grid { display: grid; grid-template-columns: 1fr; gap: clamp(0.7rem, 1.4vw, 1rem); }
@media (min-width: 620px) { .equip__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .equip__grid { grid-template-columns: repeat(3, 1fr); } }
.equip__group { background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 12px; box-shadow: 0 16px 30px -20px rgba(28, 50, 66, 0.3);
  padding: clamp(1.6rem, 3vw, 2.3rem); transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.equip__group:hover { background: #fff; box-shadow: 0 26px 44px -24px rgba(28, 50, 66, 0.4); }
.equip__title { display: flex; align-items: baseline; gap: 0.6em; font-size: 1.45rem; margin-bottom: 0.9em; }
.equip__title .icon { color: var(--sapin); width: 1.35em; height: 1.35em; align-self: center; }
.equip__list { list-style: none; margin: 0; padding: 0; }
.equip__list li { position: relative; padding-left: 1.3em; margin-bottom: 0.6em; font-size: 0.92rem; line-height: 1.65; color: var(--ink-2); }
.equip__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--dore); }
/* Élément mis en avant dans un groupe */
.equip__list li.is-key { font-weight: 600; color: var(--sapin); }
.equip__list li.is-key::before { width: 7px; height: 7px; top: 0.66em; left: -1px; background: var(--sapin); }
.equip__extra { margin-top: 2rem; }
.equip__note { display: flex; gap: clamp(1rem, 2.5vw, 1.8rem); align-items: flex-start; margin-top: clamp(0.7rem, 1.4vw, 1rem); padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: 12px;
  background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7); border-left: 2px solid var(--sapin); box-shadow: 0 16px 30px -20px rgba(28, 50, 66, 0.3); }
.equip__note .icon { width: 2rem; height: 2rem; color: var(--sapin); flex: 0 0 auto; }
.equip__note h3 { font-size: 1.35rem; margin-bottom: 0.35em; }
.equip__note p { margin: 0; font-size: 0.95rem; color: var(--ink-2); max-width: 70ch; }

/* ------------------------------------------------------------ accès */
/* Aucune marge au-dessus : la section sombre enchaîne directement sur le crépuscule
   dessiné au bas des Essentiels, sinon un liseré de fond s'intercale entre les deux. */
.acces { position: relative; overflow-x: clip; background: var(--nuit); color: rgba(255, 255, 255, 0.8); scroll-margin-top: var(--nav-h); }
.acces__inner { max-width: var(--wrap); margin: 0 auto; padding: clamp(1.5rem, 3vw, 3rem) var(--gutter) var(--section-y); }
.acces__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 980px) { .acces__grid { grid-template-columns: 1fr 1.15fr; } }
.acces__text { max-width: 34rem; }
.acces a { color: #fff; }
.acces a:hover { color: var(--dore); }

/* Carte sobre : pas de cadre épais, un filet clair et une ombre, format contenu */
.map-frame { margin: 0; }
.map-frame__inner { position: relative; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: var(--shadow-deep); }
.map { height: clamp(300px, 42vh, 420px); background: #e8e4dc; overflow: hidden; }
.map noscript p { padding: 2rem; color: var(--ink); }
.map .leaflet-tile-pane { filter: saturate(0.72) contrast(1.02); }
.map .leaflet-control-attribution { font-size: 10px; background: rgba(250, 248, 244, 0.88); }
.map .leaflet-control-zoom a { color: var(--sapin); border-radius: 0; }
.map .leaflet-tooltip.zone-label {
  background: var(--sapin); color: #fff; border: 0; border-radius: 0; box-shadow: var(--shadow);
  font-family: var(--font-text); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.45em 0.8em;
}
.map .leaflet-tooltip.zone-label::before { border-bottom-color: var(--sapin); }
/* Voile tant que la carte n'est pas déverrouillée : évite de capturer le scroll de la page */
.map__unlock {
  position: absolute; inset: 0; z-index: 500; display: grid; place-items: end center;
  padding: 0 0 2.1rem; border: 0; background: rgba(14, 20, 16, 0.14); color: #fff; cursor: pointer;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(14, 20, 16, 0.9);
  transition: background-color 0.4s var(--ease);
}
.map__unlock:hover { background: rgba(14, 20, 16, 0.04); }
.map__unlock[hidden] { display: none; }
.map .leaflet-popup-content-wrapper { border-radius: 0; font-family: var(--font-text); color: var(--ink); box-shadow: var(--shadow); }
.map .leaflet-popup-content { margin: 14px 16px; font-size: 0.85rem; line-height: 1.5; }
.map .leaflet-popup-content strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; display: block; margin-bottom: 0.2em; }
.map .leaflet-popup-content em { display: block; color: var(--mousse); font-style: normal; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.5em; }
.poi__pin { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--creme); color: var(--sapin); border: 1px solid var(--sapin); box-shadow: 0 6px 14px -4px rgba(14, 20, 16, 0.7); }
.poi__pin .icon { width: 19px; height: 19px; }
.map__note { font-size: 0.72rem; line-height: 1.6; color: rgba(255, 255, 255, 0.45); margin: 0; padding: 0.8rem 0 0; max-width: none; }
.moving { list-style: none; margin: 2rem 0 0; padding: 0; }
.moving li { display: flex; align-items: center; gap: 0.9em; padding: 0.85rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.9rem; color: rgba(255, 255, 255, 0.88); }
.moving .icon { color: var(--dore); width: 1.5em; height: 1.5em; }
.routes { display: grid; gap: 1px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.route { background: var(--nuit); padding: 1.6rem; transition: background-color 0.5s var(--ease); }
.route:hover { background: #212a21; }
.route__title { display: flex; align-items: center; gap: 0.6em; font-size: 1.15rem; margin-bottom: 0.6em; }
.route__title .icon { color: var(--dore); width: 1.3em; height: 1.3em; }
.route p { color: rgba(255, 255, 255, 0.72); font-size: 0.88rem; line-height: 1.7; margin-bottom: 0.5em; }
.route__links { list-style: none; padding: 0; margin: 0; font-size: 0.78rem; letter-spacing: 0.1em; }

/* ------------------------------------------------------------- avis */
/* Avis sur fond photo : le voile est volontairement dense, la lisibilité prime sur l'image */
.avis { position: relative; overflow: hidden; background: var(--nuit); scroll-margin-top: var(--nav-h); }
.avis__photo { position: absolute; inset: -80px 0; z-index: 0; will-change: transform; }
.avis__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* Liaison : le haut part de la couleur exacte de la section précédente et le bas rejoint
   celle de la suivante, pour qu'aucune arête ne coupe la page. */
.avis__shade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    var(--nuit) 0%, rgba(26, 31, 26, 0.82) 7%, rgba(14, 20, 16, 0.55) 22%,
    rgba(14, 20, 16, 0.5) 62%, rgba(14, 20, 16, 0.7) 88%,
    rgba(166, 164, 155, 0.72) 97%, var(--creme) 100%); }
.avis__inner { position: relative; z-index: 2; padding: var(--section-y) var(--gutter); max-width: var(--wrap); margin: 0 auto; }
/* Sélecteurs préfixés : ils doivent l'emporter sur les règles de base plus bas dans le fichier */
.avis.on-dark .section__intro { color: rgba(255, 255, 255, 0.78); }
.avis.on-dark .avis__score { color: rgba(255, 255, 255, 0.86); }
.avis.on-dark .avis__score strong { color: #fff; }
.avis.on-dark .avis__count { color: rgba(255, 255, 255, 0.62); }
.avis.on-dark .avis__highlights li { color: rgba(255, 255, 255, 0.78); }
.avis.on-dark .avis__highlights .icon { color: var(--dore); }
.dev-warning { display: flex; gap: 0.8em; align-items: center; padding: 1rem 1.3rem; margin: 0 auto 2rem; max-width: 60rem; background: #fdf3d8; border: 1px solid var(--dore); color: #6b4f12; font-size: 0.88rem; }
.dev-warning .icon { color: #9a7320; }
.avis__summary { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.avis__score { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.3em 0.7em; font-size: 0.92rem; color: var(--ink-2); }
.avis__score strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--ink); line-height: 1; }
.avis__count { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.avis__score .review__stars { margin: 0; }
.avis__highlights { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.4rem; }
.avis__highlights li { display: flex; align-items: center; gap: 0.4em; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.avis__highlights .icon { width: 1em; height: 1em; color: var(--sapin); }

/* Colonnes plutôt que grille : les avis ont des longueurs très inégales,
   une grille laisserait de grands vides sous les plus courts. */
.avis__grid { list-style: none; margin: 0 0 2.5rem; padding: 0; columns: 1; column-gap: clamp(1.2rem, 2.4vw, 2rem); }
@media (min-width: 700px) { .avis__grid { columns: 2; } }
@media (min-width: 1100px) { .avis__grid { columns: 3; } }
.review { break-inside: avoid; margin-bottom: clamp(1.2rem, 2.4vw, 2rem); background: #fff; border: 1px solid var(--line-fine); border-radius: 12px; padding: clamp(1.8rem, 3vw, 2.4rem); transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease); }
.review:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.review.is-placeholder { background: repeating-linear-gradient(-45deg, #fff 0 14px, #fdf3d8 14px 16px); border-color: var(--dore); }
/* Avis long : replié derrière un bouton, pour garder un rythme régulier */
.review.is-long .review__body { position: relative; max-height: 11.5em; overflow: hidden; transition: max-height 0.5s var(--ease); }
.review.is-long .review__body::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3.5em; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); transition: opacity 0.3s; }
.review.is-open .review__body { max-height: 60em; }
.review.is-open .review__body::after { opacity: 0; }
.review__more { display: inline-flex; align-items: center; gap: 0.4em; margin: 0.3rem 0 1.2rem; padding: 0; border: 0; background: none; cursor: pointer; color: var(--sapin); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
.review__more:hover { color: var(--mousse); }
.review__stars { display: inline-flex; gap: 3px; color: var(--dore); margin-bottom: 1.2rem; }
.review__text { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; line-height: 1.55; color: var(--ink-2); margin-bottom: 1.6rem; }
.review__meta { font-size: 0.85rem; color: var(--ink); }
.review__meta span { display: block; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-top: 0.4em; }
/* max-width: none, sinon la largeur de lecture héritée de `p` décale le bouton à gauche */
.avis__more { text-align: center; max-width: none; }

/* ------------------------------------------------------------ tarifs */
.rates { background: var(--creme); }
.rates__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.8rem, 1.6vw, 1.2rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .rates__grid { grid-template-columns: repeat(3, 1fr); } }
.rate { display: flex; flex-direction: column; padding: clamp(1.8rem, 3vw, 2.4rem); background: #fff; border: 1px solid var(--line-fine); border-radius: 12px;
  transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease); }
.rate:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.rate__name { display: flex; align-items: center; gap: 0.55em; margin: 0 0 1.1rem; font-family: var(--font-text); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mousse); }
.rate__name .icon { width: 1.5em; height: 1.5em; color: var(--sapin); }
.rate__price { margin: 0 0 0.9rem; font-family: var(--font-display); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); font-weight: 300; line-height: 1.1; color: var(--ink); max-width: none; }
.rate__unit { display: block; margin-top: 0.4em; font-family: var(--font-text); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.rate__note { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--line-fine); font-size: 0.88rem; line-height: 1.65; color: var(--ink-2); max-width: none; }
.rates__foot { margin: clamp(1.5rem, 3vw, 2.2rem) auto 0; text-align: center; font-size: 0.9rem; color: var(--ink-3); }
.rates__cta { margin: 1.4rem 0 0; text-align: center; max-width: none; }

/* -------------------------------------------------------------- FAQ */
.faq { background: var(--sable); }
.faq__inner { padding: var(--section-y) var(--gutter); max-width: var(--wrap); margin: 0 auto; }
.faq__list { max-width: 52rem; margin: 0 auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 1.6rem 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); font-weight: 400; color: var(--ink); transition: color 0.3s; }
.faq__q:hover { color: var(--mousse); }
.faq__sign { position: relative; width: 18px; height: 18px; flex: 0 0 auto; margin-top: 0.4em; }
.faq__sign::before, .faq__sign::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--sapin); transition: transform 0.4s var(--ease); }
.faq__sign::before { width: 16px; height: 1px; transform: translate(-50%, -50%); }
.faq__sign::after { width: 1px; height: 16px; transform: translate(-50%, -50%); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__a { overflow: hidden; }
.faq__a[hidden] { display: none; }
.faq__a p { padding: 0 3rem 1.8rem 0; margin: 0; font-size: 0.95rem; color: var(--ink-2); max-width: 58ch; }

/* ----------------------------------------------------------- finale */
.finale { position: relative; min-height: clamp(480px, 76vh, 700px); display: grid; place-items: center; overflow: hidden; text-align: center; color: #fff; background: var(--nuit); }
.finale__photo { position: absolute; inset: -90px 0; z-index: 0; will-change: transform; }
.finale__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.finale__shade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    var(--sable) 0%, rgba(242, 237, 228, 0.96) 4%, rgba(188, 186, 178, 0.84) 9%,
    rgba(90, 92, 86, 0.66) 17%, rgba(14, 20, 16, 0.5) 32%,
    rgba(14, 20, 16, 0.42) 58%, rgba(14, 20, 16, 0.6) 86%,
    rgba(170, 168, 158, 0.7) 97%, var(--creme) 100%); }
.finale__content { position: relative; z-index: 2; padding: var(--section-y) var(--gutter); max-width: 46rem; }
.finale .label { justify-content: center; color: var(--beige); }
.finale .title { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.4rem); }
.finale .title em { color: var(--beige); }
.finale .btn { margin-top: 3rem; }

/* ----------------------------------------------------------- contact */
.contact { background: var(--creme); }
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (min-width: 980px) { .contact__grid { grid-template-columns: 5fr 6fr; } }
.contact__ways { list-style: none; padding: 0; margin: 2rem 0 0; }
.contact__ways li { display: flex; align-items: center; gap: 0.9em; padding: 1rem 0; border-top: 1px solid var(--line); }
.contact__ways .icon { color: var(--sapin); width: 1.4em; height: 1.4em; }
.email-reveal.is-revealed { font-weight: 600; }
.form { padding: clamp(1.8rem, 3vw, 2.8rem); background: #fff; border: 1px solid var(--line-fine); box-shadow: var(--shadow); }
.form h3 { font-size: 1.7rem; margin-bottom: 1.4rem; }
.form__row { display: grid; gap: 0 1.2rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.form__field { margin-bottom: 1.2rem; }
.form label { display: block; font-size: 0.63rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.6em; }
.form input, .form textarea { width: 100%; padding: 0.85em 1em; border: 1px solid rgba(26, 26, 26, 0.15); background: var(--creme); font: inherit; font-size: 0.92rem; color: var(--ink); transition: border-color 0.3s, background-color 0.3s; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--sapin); background: #fff; box-shadow: 0 0 0 3px rgba(45, 61, 46, 0.12); }
.form input.is-invalid, .form textarea.is-invalid { border-color: #a8352b; }
.form__error { margin: 0.4em 0 0; font-size: 0.8rem; color: #a8352b; }
.form__summary { margin: 0 0 1.2rem; padding: 0.8rem 1.1rem; background: #fbeae8; color: #7a1c14; border: 1px solid #e8bdb7; font-size: 0.88rem; }
.form__privacy { margin: 1.2rem 0 0; }
.form .btn { width: 100%; }
.form__fallback { margin-top: 1.2rem; padding: 1rem 1.2rem; background: #fdf3d8; border: 1px solid var(--dore); }
.form__fallback p { margin: 0 0 0.8rem; font-size: 0.88rem; color: #5c4400; }
.form__addr { font-size: 1rem !important; font-weight: 600; user-select: all; }
.form__addr a { color: #5c4400; }
.form__fallback p:last-child { margin: 0; }
.form__fallback[hidden], .form__done[hidden] { display: none; }
.form__done { text-align: center; padding: 1.5rem 0; }
.form__done h4 { font-size: 1.7rem; margin-bottom: 0.4em; }
.form__done p { margin: 0 auto; color: var(--ink-2); }

/* ----------------------------------------------------- barre CTA mobile */
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; gap: 0.5rem; padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(250, 248, 244, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.cta-bar .btn { flex: 1; min-height: 46px; padding: 0.7em 1em; letter-spacing: 0.16em; }
@media (max-width: 767px) { .is-past-hero .cta-bar, .page--sub .cta-bar { display: flex; } main { padding-bottom: 74px; } }

/* ----------------------------------------------------------- footer */
.footer { background: var(--nuit-profond); color: rgba(255, 255, 255, 0.72); }
.footer__inner { padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2rem; max-width: var(--wrap); margin: 0 auto; }
.footer__grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 2fr 1fr 1.4fr; gap: 3rem; } }
.footer__brand { display: block; margin-bottom: 1.4rem; }
.footer p { font-size: 0.88rem; line-height: 1.8; max-width: 34ch; }
.footer__col h2 { font-size: 0.65rem; font-family: var(--font-text); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dore); margin-bottom: 1.4em; }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: 0.8em; font-size: 0.88rem; display: flex; gap: 0.7em; align-items: flex-start; }
.footer__col .icon { color: var(--dore); width: 1.1em; height: 1.1em; margin-top: 0.25em; }
.footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__legal { padding-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between; font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); }
.footer__legal p { max-width: none; margin: 0; font-size: inherit; }
@media (max-width: 767px) { .footer__inner { padding-bottom: calc(2rem + 74px); } }

/* ------------------------------------------------------ pages internes */
.page--sub main { padding-top: var(--nav-h); }
.page__body { max-width: 1080px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter); }
.page__head { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.page__head .title { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem); }
.page__intro { font-size: 1.05rem; color: var(--ink-2); margin-top: 1.5em; }
.page__toc ul { list-style: none; margin: 0 0 3rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.page__toc a { display: inline-block; padding: 0.7em 1.3em; border: 1px solid rgba(26, 26, 26, 0.15); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.page__toc a:hover { border-color: var(--sapin); color: var(--sapin); }
.acts__cat { margin-bottom: clamp(3rem, 6vw, 5rem); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.acts__banner { position: relative; overflow: hidden; margin-bottom: 2.5rem; }
.acts__banner img { width: 100%; height: clamp(140px, 22vw, 260px); object-fit: cover; }
.acts__banner h2 { position: absolute; left: clamp(1.2rem, 3vw, 2.5rem); bottom: clamp(0.8rem, 2vw, 1.6rem); margin: 0; color: #fff; font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem); text-shadow: 0 2px 20px rgba(14, 20, 16, 0.6); }
.acts__banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 20, 16, 0.7), rgba(14, 20, 16, 0.05) 65%); }
.acts__banner h2 { z-index: 2; }
.acts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.6rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.act { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.act__title { font-size: 1.35rem; margin-bottom: 0.5em; }
.act__where { font-family: var(--font-text); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mousse); }
.act p { font-size: 0.92rem; line-height: 1.75; color: var(--ink-2); margin-bottom: 0.6em; }
.act__link { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.tag { display: inline-block; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.35em 0.8em; background: #fdf3d8; color: #6b4f12; border: 1px solid var(--dore); }
.events { list-style: none; margin: 0; padding: 0; }
.event { display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.event__month { font-family: var(--font-display); font-size: 1.3rem; font-style: italic; color: var(--mousse); text-transform: lowercase; }
@media (max-width: 599px) { .event { grid-template-columns: 1fr; gap: 0.3rem; } }
.legal section { margin-bottom: 2.5rem; max-width: 60ch; }
.legal h2 { font-size: 1.5rem; }
.legal p { font-size: 0.95rem; }
.thanks { text-align: center; padding-top: clamp(4rem, 10vw, 8rem); }
.thanks .page__head { margin-left: auto; margin-right: auto; }
.thanks .label { justify-content: center; }
.thanks p { font-size: 1.1rem; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------- apparition au défilement
   Les images se dévoilent par un rideau qui s'ouvre vers le bas, pendant que la photo
   qu'elles contiennent revient d'un léger agrandissement. Les textes montent sans bouger
   la mise en page. Tout est piloté par la position dans le viewport, pas par une minuterie :
   l'effet suit le doigt ou la molette, dans les deux sens.
   Hors des navigateurs qui savent le faire, rien ne s'anime et la page reste complète. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Les fonds de section pleine photo sont exclus : ils se dévoileraient en laissant
       voir la couleur de la section dessous. */
    .grid__item, .carou__slide figure, .presentation__photos picture, .map-frame, .acts__banner, .finale__content {
      animation: curtain linear both; animation-timeline: view(); animation-range: entry 2% entry 46%;
    }
    /* L'état final déborde la boîte : sans cela le masque rognerait l'ombre portée. */
    @keyframes curtain {
      from { opacity: 0; clip-path: inset(0 0 100% 0); }
      to { opacity: 1; clip-path: inset(-40% -40% -40% -40%); }
    }
    /* `scale` et non `transform` : la vignette garde son inclinaison au survol */
    .thumb img, .carou__slide img, .presentation__photos img, .acts__banner img {
      animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 78%;
    }
    @keyframes settle { from { scale: 1.14; } to { scale: 1; } }

    .section__head, .gallery__head, .carou__head, .page__head, .equip__group, .review, .route, .act, .faq__item, .rate {
      animation: lift linear both; animation-timeline: view(); animation-range: entry 4% entry 42%;
    }
    @keyframes lift { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: none; } }
  }
}

/* ------------------------------------------------------ mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .thumb:hover img, .presentation__photos picture:hover img { transform: none; }
  .hero__mist { display: none; }
}

/* Total vivant sous les champs adultes et enfants : il confirme la somme à la saisie
   et signale le dépassement de capacité, que ni l'un ni l'autre champ ne peut voir seul. */
.form__total { align-self: end; margin: 0 0 1.2rem; font-size: 0.85rem; color: var(--ink-3); }
.form__total.is-over { color: #9d3b2f; font-weight: 500; }

/* Logo Cœur de Méribel, sous le titre de la section Le domaine. L'en-tête de cette
   section est centré : le logo l'est aussi. La règle de base p { max-width } le
   bornerait sinon à une largeur de lecture et le décalerait vers la gauche. */
/* Cœur de Méribel. Deux emplois : seul et centré dans l'en-tête du carrousel,
   et accompagné de sa mention sous le nom du chalet dans la première vue, où le
   dessin et le texte se lisent d'un trait à la suite du titre. */
.coeur-logo { display: flex; justify-content: center; margin: 1.2rem 0 0; max-width: none; }
.coeur-logo img { width: clamp(70px, 8.5vw, 96px); height: auto; }
.coeur-logo--hero { justify-content: flex-start; align-items: center; gap: 0.38em; margin: 0 0 0.3rem; flex-wrap: wrap; }
.coeur-logo--hero img { width: clamp(40px, 5vw, 78px); filter: drop-shadow(0 3px 10px rgba(14, 20, 16, 0.5)); }
/* Même police et même corps que le nom du chalet : les deux lignes se lisent
   d'un trait, « Chalet Gaïla, cœur des 3 Vallées ». */
.coeur-logo--hero span { font-family: var(--font-display); font-size: clamp(3.2rem, 2rem + 6.5vw, 6.8rem);
  font-weight: 300; line-height: 0.98; letter-spacing: -0.015em; color: var(--beige); }

/* ------------------------------------------- liaisons entre deux fonds clairs
   Le sable et le crème ne diffèrent que d'un ton, mais la frontière entre deux
   sections reste une ligne parfaitement droite, et c'est elle qu'on voit. Un
   dégradé de la couleur d'en face, posé sur le bord, la dissout.
   z-index 2 : au-dessus du décor de la galerie, qui est précisément ce qu'il
   faut faire disparaître. Les bandes ne couvrent que la marge des sections. */
.gallery, .faq { position: relative; }
.gallery::before, .gallery::after, .faq::before {
  content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  height: clamp(44px, 6vw, 96px);
}
.gallery::before { top: 0; background: linear-gradient(180deg, var(--creme) 0%, rgba(250, 248, 244, 0) 100%); }
.gallery::after { bottom: 0; background: linear-gradient(0deg, var(--creme) 0%, rgba(250, 248, 244, 0) 100%); }
.faq::before { top: 0; background: linear-gradient(180deg, var(--creme) 0%, rgba(250, 248, 244, 0) 100%); }

/* Sur un téléphone, « cœur des 3 Vallées » tient sur deux lignes et la disposition
   en ligne flexible reléguait le cœur seul au-dessus. Il redevient alors une image
   dans le texte, qui coule avec lui. */
@media (max-width: 599px) {
  .coeur-logo--hero { display: block; }
  .coeur-logo--hero img { display: inline-block; width: 34px; margin-right: 0.34em; vertical-align: -0.06em; }
}