/* ============================================================================
   Clairière · site.css
   Tokens (le jour), tokens (la nuit), puis la page. Le moteur n'est pas touché.
   ========================================================================== */

:root {
  /* le jour : papier os, encre noir chaud, un accent mousse */
  --sc-canvas:      #F3EEE4;
  --sc-surface:     #EAE4D8;
  --sc-ink:         #1E1B16;
  --sc-ink-soft:    #6A6357;
  --sc-accent:      #3B5A44;
  --sc-accent-ink:  #F3EEE4;

  --sc-font-display: "Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;
  --sc-font-text:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono:    "Geist", system-ui, sans-serif;

  /* Garamond n'aime pas les crénages serrés du moteur */
  --sc-track-tight:  -0.012em;
  --sc-track-snug:   -0.006em;
  --sc-leading-none: 1.0;

  /* rayons : un seul, presque carré, tenu partout */
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px; --sc-r-pill: 2px;

  /* ombres teintées au papier, alphas divisés par deux (fond clair) */
  --sc-shadow-color: 35 18% 18%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.10), 0 10px 22px -6px hsl(var(--sc-shadow-color) / 0.16);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.10), 0 24px 48px -12px hsl(var(--sc-shadow-color) / 0.22);
  --sc-edge: inset 0 1px 0 rgba(255,255,255,0.6);

  --bar-h: 3.5rem;
  /* la colonne de contenu commence à droite de la règle des heures */
  --col-left: calc(var(--sc-gutter) + 11.5rem);
  --lx: 0; --ly: 0;
}
@media (min-width: 861px) {
  .sc-wrap { padding-inline: var(--col-left) var(--sc-gutter); }
}

/* la nuit : noir forêt, os, sauge pâle. Même teinte d'accent, autre clarté. */
html.is-night {
  --sc-canvas:      #0F1412;
  --sc-surface:     #171D19;
  --sc-ink:         #EFE9DD;
  --sc-ink-soft:    #A69F92;
  --sc-accent:      #B8CDB9;
  --sc-accent-ink:  #0F1412;
  --sc-shadow-color: 150 12% 3%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22), 0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38);
  --sc-edge: inset 0 1px 0 rgba(255,255,255,0.07);
  color: var(--sc-ink);
}

body {
  transition: background-color 720ms var(--sc-ease-out), color 720ms var(--sc-ease-out);
}
.sc-grain { opacity: 0.032; mix-blend-mode: multiply; }
html.is-night .sc-grain { opacity: 0.05; mix-blend-mode: normal; }

/* Garamond : régulier, pas demi-gras, et un peu plus d'interlignage */
.sc-display { font-weight: 400; }
.sc-display em { font-style: italic; font-weight: 300; }
.sc-body { font-weight: 400; }
.sc-lede { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.3; letter-spacing: 0; }

/* le texte clair sur fond sombre compense sur trois axes */
html.is-night .sc-body { line-height: 1.68; letter-spacing: 0.004em; }

/* ------------------------------------------------------------- skip link -- */
.skip {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 100;
  padding: 0.6rem 0.9rem; background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: var(--sc-t-sm); text-decoration: none;
  transform: translateY(-140%); transition: transform 160ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

/* ------------------------------------------------------------------ bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--sc-gutter);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark {
  font-family: var(--sc-font-display); font-size: 1.5rem; font-weight: 500;
  letter-spacing: 0.01em; text-decoration: none; color: var(--sc-ink);
  transition: color 720ms var(--sc-ease-out);
}
.bar__cta {
  font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; color: var(--sc-ink);
  padding: 0.55rem 0; border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 45%, transparent);
  transition: color 720ms var(--sc-ease-out), border-color 720ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bar__cta:hover { border-bottom-color: var(--sc-ink); }
}

/* ---------------------------------------------------------- la règle des heures -- */
.hours {
  position: fixed; left: var(--sc-gutter); top: 50%; z-index: var(--sc-z-chrome);
  transform: translateY(-50%);
  display: grid; gap: var(--sc-5);
  color: var(--sc-ink);
  isolation: isolate;
  transition: color 720ms var(--sc-ease-out), opacity 480ms var(--sc-ease-out), visibility 0s 0s;
}
/* le hero est le seul acte sans chrome : la règle arrive avec la maison.
   visibility, pas seulement opacity : un lien invisible ne doit pas prendre le focus */
html.is-hero .hours {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: color 720ms var(--sc-ease-out), opacity 480ms var(--sc-ease-out), visibility 0s 480ms;
}
/* un voile du fond derrière la règle : ce qui glisse dessous (le rail) s'efface */
.hours::before {
  content: ""; position: absolute; z-index: -1;
  inset: -2.5rem -3.5rem -2.5rem -2rem;
  background: radial-gradient(ellipse at 40% 50%,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 80%, transparent) 42%,
    transparent 74%);
  transition: opacity 720ms var(--sc-ease-out);
}
.hours__now { margin: 0; display: grid; gap: 0.15rem; }
.hours__h {
  font-family: var(--sc-font-display); font-size: 2rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hours__label {
  font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.hours__list {
  list-style: none; margin: 0; padding: 0 0 0 0.35rem;
  display: grid; gap: 0.7rem;
  border-left: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent);
}
.hours__list li { position: relative; padding-left: 0.9rem; }
.hours__list li::before {
  content: ""; position: absolute; left: -0.35rem; top: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: color-mix(in oklab, var(--sc-ink) 32%, transparent);
  transition: background-color 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out);
}
.hours__list li.is-active::before { background: var(--sc-accent); transform: scale(1.5); }
.hours__list a {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: none;
  transition: color 200ms var(--sc-ease-out);
}
.hours__list a span { font-family: var(--sc-font-display); font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--sc-ink); }
.hours__list li.is-active a, .hours__list a:hover { color: var(--sc-ink); }

/* ------------------------------------------------------------------ cta -- */
.cta {
  display: inline-block;
  padding: 0.9rem 1.5rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e1);
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: color-mix(in oklab, var(--sc-accent) 88%, var(--sc-ink)); box-shadow: var(--sc-e2); }
}
.cta:active { transform: scale(0.97); }
.cta--big { padding: 1.05rem 1.9rem; font-size: var(--sc-t-base); }

/* ---------------------------------------------------------------- hero -- */
.hero { background: var(--sc-canvas); }
.hero__plane { position: absolute; will-change: transform; }
.hero__plane img { max-width: none; }

.hero__far { inset: -6% -4% -3% -4%; }
.hero__far img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  scale: calc(1.02 + var(--sc-p, 0) * 0.07);
  translate: calc(var(--lx) * -12px) calc(var(--ly) * -8px);
  transform-origin: 50% 65%;
}

.hero__mist { left: -12%; right: -12%; top: 36%; height: 40%; mix-blend-mode: screen; opacity: 0.62; pointer-events: none; }
.hero__mist img {
  width: 100%; height: 100%; object-fit: cover;
  translate: calc(var(--lx) * 18px) calc(var(--ly) * 6px);
  animation: hero-drift 11s ease-in-out infinite alternate;
}
@keyframes hero-drift { from { transform: translateX(-2.2%) scaleY(1); } to { transform: translateX(2.2%) scaleY(1.06); } }

.hero__near { bottom: -5%; width: clamp(15rem, 40vw, 44rem); pointer-events: none; }
.hero__near--l { left: -6%; }
.hero__near--r { right: -7%; width: clamp(15rem, 42vw, 46rem); }
.hero__near img {
  width: 100%; height: auto;
  scale: calc(1 + var(--sc-p, 0) * 0.12);
  filter: drop-shadow(0 18px 24px rgba(20, 24, 16, 0.22));
}
.hero__near--l img { translate: calc(var(--lx) * 26px) calc(var(--ly) * 16px); transform-origin: 0% 100%; }
.hero__near--r img { translate: calc(var(--lx) * 32px) calc(var(--ly) * 20px); transform-origin: 100% 100%; }

/* un voile de papier, frère de la copie, seulement sous elle : la brume monte
   dans le ciel, l'encre reste lisible sur la cime des arbres */
.hero__wash {
  position: absolute; z-index: 6; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 52%, transparent) 45%, transparent 100%);
}
.hero__wash--1 {
  left: 50%; top: 4vh; width: min(72rem, 120vw); height: 76vh; translate: -50% 0;
  opacity: clamp(0, 1 - (var(--sc-p, 0) - 0.36) * 4.5, 1);
}
.hero__wash--2 {
  left: var(--col-left); top: 0; width: min(52rem, 100vw); height: 62vh; translate: -18% 0;
  opacity: clamp(0, (var(--sc-p, 0) - 0.55) * 6, 1);
}
.hero__copy {
  position: absolute; z-index: var(--sc-z-copy);
  left: 50%; top: 16vh; width: min(64rem, 92vw);
  translate: -50% 0;
  text-align: center;
  display: grid; justify-items: center; gap: var(--sc-5);
}
.hero__title { max-width: 24ch; font-size: clamp(3rem, 1.2rem + 5.6vw, 6.4rem); }
.hero__sub { margin: 0; max-width: 34ch; font-size: var(--sc-t-lg); color: var(--sc-ink); line-height: 1.4; text-wrap: balance; }

.hero__copy2 {
  position: absolute; z-index: var(--sc-z-copy);
  left: calc(var(--col-left) + 2.5rem); top: 13vh; width: min(30rem, 80vw);
  display: grid; gap: var(--sc-4);
}
.hero__line { max-width: 16ch; }
.hero__sub2 { margin: 0; max-width: 36ch; font-size: var(--sc-t-base); line-height: 1.5; color: var(--sc-ink); }

.hero__floor {
  position: absolute; inset: auto 0 0 0; height: 26%; z-index: 5; pointer-events: none;
  background: linear-gradient(to top, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 40%, transparent 100%);
}

/* ---------------------------------------------------------- la maison -- */
.maison { padding-top: clamp(3rem, 6vw, 6rem); }
.maison__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 6vw, 7rem); row-gap: var(--sc-7);
  align-items: start; position: relative;
}
.maison__text { padding-top: clamp(0rem, 6vh, 6rem); max-width: 40ch; }
.maison__text .sc-display { font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.9rem); max-width: 18ch; }
.maison__media { position: relative; padding-bottom: clamp(5rem, 9vw, 8rem); }
.maison__fig { margin: 0; position: relative; }
.maison__fig img { width: 100%; height: auto; box-shadow: var(--sc-e2); }
.maison__fig figcaption { text-align: right; }
figcaption {
  margin-top: var(--sc-3);
  font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft);
}
/* le cèdre chevauche le coin bas gauche de la grande image, jamais le texte */
.maison__macro {
  margin: 0; position: absolute; left: clamp(-4rem, -5vw, -2rem); bottom: 0;
  width: clamp(9rem, 15vw, 14rem); z-index: 2;
}
.maison__macro img { width: 100%; height: auto; box-shadow: var(--sc-e3); }

/* --------------------------------------------------------- la chambre -- */
.chambre__stage { background: var(--sc-canvas); }
.rail {
  height: 100%; align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding-inline: var(--col-left) var(--sc-gutter);
  padding-top: var(--bar-h);
}
.rail__lead { flex: 0 0 auto; width: min(30rem, 70vw); display: grid; gap: var(--sc-5); }
.rail__item { flex: 0 0 auto; width: clamp(15rem, 22vw, 21rem); margin: 0; }
.rail__frame { box-shadow: var(--sc-e2); background: var(--sc-surface); }
.rail__frame img { width: 100%; height: auto; aspect-ratio: 880 / 1168; object-fit: cover; }
.rail__item figcaption { text-transform: none; letter-spacing: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.rail__item figcaption b { font-weight: 500; color: var(--sc-ink); }
.rail__end { flex: 0 0 auto; width: min(24rem, 70vw); padding-right: var(--sc-gutter); }
.rail__end .sc-lede { max-width: 18ch; }

/* les objets se posent l'un après l'autre, pilotés par --sc-p */
@media (prefers-reduced-motion: no-preference) {
  .rail__item {
    opacity: clamp(0.55, calc(0.55 + (var(--sc-p, 0) - var(--i) * 0.13) * 6), 1);
    translate: 0 calc(clamp(0, (var(--i) * 0.13 - var(--sc-p, 0)) * 6, 1) * 2.6rem);
  }
}

/* ------------------------------------------------------------ le soir -- */
.soir { min-height: 88vh; display: grid; place-items: center; }
.soir__line {
  margin: 0 auto; max-width: 30ch; text-align: center;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 300;
  font-size: var(--sc-t-xl); line-height: 1.32; text-wrap: balance;
}

/* ---------------------------------------------------------- les bains -- */
.bains__stage { background: var(--sc-canvas); transition: background-color 720ms var(--sc-ease-out); }

.breath {
  position: absolute; left: 50%; top: 50%; width: min(52vh, 62vw); aspect-ratio: 1;
  translate: -50% -50%;
  color: var(--sc-accent); z-index: 4; pointer-events: none;
  transition: opacity 400ms var(--sc-ease-out), color 720ms var(--sc-ease-out);
}
.breath__ring { width: 100%; height: 100%; overflow: visible; will-change: transform; }
.breath__word {
  position: absolute; left: 50%; top: 50%; margin: 0;
  translate: -50% -50%;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 300;
  font-size: var(--sc-t-xl); letter-spacing: 0.02em; z-index: 5;
  color: var(--sc-ink);
  transition: color 720ms var(--sc-ease-out);
}

.bains__scene { position: absolute; inset: 0; margin: 0; z-index: 2; overflow: clip; }
.bains__scene picture, .bains__scene > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bains__scene > picture > img { object-fit: cover; object-position: 50% 60%; }
.bains__steam {
  position: absolute; left: -10%; right: -10%; bottom: -14%; height: 78%;
  mix-blend-mode: screen; pointer-events: none;
  opacity: clamp(0, (var(--sc-p, 0) - 0.55) * 4, 0.55);
}
.bains__steam img {
  width: 100%; height: 100%; object-fit: cover; max-width: none;
  animation: steam-rise 14s ease-in-out infinite alternate;
}
@keyframes steam-rise { from { transform: translateY(1.5%) scale(1); } to { transform: translateY(-2.5%) scale(1.05); } }

/* densité sous la copie seulement : coin haut gauche, en frère de la copie */
.bains__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: clamp(0, (var(--sc-p, 0) - 0.62) * 5, 1);
  background: linear-gradient(to bottom right,
    color-mix(in oklab, #0F1412 82%, transparent) 0%,
    color-mix(in oklab, #0F1412 55%, transparent) 26%,
    color-mix(in oklab, #0F1412 20%, transparent) 46%,
    transparent 64%);
}
.bains__copy {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--col-left); top: calc(var(--bar-h) + 4vh);
  width: min(40rem, 84vw);
  display: grid; gap: var(--sc-5);
  color: #EFE9DD;
}
.bains__copy .sc-display { max-width: 16ch; }
.bains__lede { max-width: 30ch; color: #EFE9DD; font-size: var(--sc-t-lg); }

/* ------------------------------------------------------------ la nuit -- */
.nuit { padding-top: clamp(4rem, 8vw, 8rem); }
.nuit__head { max-width: 44ch; }
.nuit__grid {
  margin-top: clamp(3rem, 7vw, 7rem);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(2rem, 6vw, 7rem); row-gap: var(--sc-7);
  align-items: start;
}
.nuit__hours { margin: 0; display: grid; }
.nuit__hours > div {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: var(--sc-4); align-items: baseline;
  padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline);
}
.nuit__hours > div:last-child { border-bottom: 1px solid var(--sc-hairline); }
.nuit__hours dt { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.nuit__hours dd { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.nuit__fig { margin: 0; }
.nuit__fig img { width: 100%; height: auto; box-shadow: var(--sc-e2); }
.nuit__figs { position: relative; }
.nuit__fig--sauna { grid-column: 2; width: min(100%, 44rem); justify-self: end; }
.nuit__fig--tisane { grid-column: 2; width: min(58%, 26rem); margin-top: -3rem; position: relative; z-index: 2; }

/* ----------------------------------------------------------- le matin -- */
.matin__stage { background: var(--sc-canvas); display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); }
.matin__img {
  grid-column: 2; position: relative; height: 100%;
  mask-image: linear-gradient(to right, transparent 0%, #000 26%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%);
}
.matin__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.matin__col {
  grid-column: 1; grid-row: 1;
  display: grid; grid-template-rows: 1fr auto; height: 100%;
  padding: calc(var(--bar-h) + 3vh) 0 var(--sc-6) var(--col-left);
}
.matin__copy { align-self: center; display: grid; gap: var(--sc-5); max-width: 34rem; }
.matin__copy .sc-display { max-width: 16ch; }
.matin__action { margin: var(--sc-2) 0 0; }
.matin__infos {
  margin: var(--sc-4) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sc-3) var(--sc-6); max-width: 30rem;
}
.matin__infos > div { display: grid; gap: 0.1rem; padding-top: var(--sc-3); border-top: 1px solid var(--sc-hairline); }
.matin__infos dt { font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.matin__infos dd { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink); }

.foot { display: grid; gap: 0.25rem; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); max-width: 34rem; }
.foot p { margin: 0; }
.foot__mark { font-family: var(--sc-font-display); font-size: 1.35rem; }
.foot__line { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.foot__small { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .hero__mist img, .bains__steam img { animation: none; }
  .hero__far img, .hero__near img { scale: 1; translate: 0 0; }
  .hero__mist img { translate: 0 0; }
  .breath__ring { transform: none !important; }
  /* sans mouvement, l'iris est déjà ouvert : la scène de nuit arrive donc par
     l'opacité, après la respiration, pour ne pas passer sous les mots du jour */
  .bains__scene { opacity: clamp(0, (var(--sc-p, 0) - 0.48) * 6, 1); }
  .bains__steam { opacity: 0.45; }
  .bains__scrim { opacity: clamp(0, (var(--sc-p, 0) - 0.5) * 6, 1); }
  body, .bar__mark, .bar__cta, .hours, .bains__stage, .breath, .breath__word { transition-duration: 220ms; }
}

/* --------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  :root { --bar-h: 3.25rem; }
  .bar__mark { font-size: 1.3rem; }

  .hours { left: auto; right: var(--sc-gutter); top: auto; bottom: 1.1rem; transform: none; gap: 0; }
  .hours__list { display: none; }
  .hours__now { grid-auto-flow: column; align-items: baseline; gap: 0.5rem; }
  .hours__h { font-size: 1.35rem; }

  .hero__copy { top: 15vh; width: 88vw; gap: var(--sc-4); }
  .hero__title { font-size: var(--sc-t-2xl); max-width: 14ch; }
  .hero__sub { font-size: var(--sc-t-base); }
  /* la parallaxe pousse les plans proches de 100 px vers le bas au départ :
     sur un téléphone ils partent plus haut et plus larges pour rester visibles */
  .hero__near { width: 70vw; bottom: 5%; }
  .hero__near--l { left: -14%; }
  .hero__near--r { right: -18%; width: 74vw; bottom: 2%; }
  .hero__copy2 { left: var(--sc-gutter); top: 14vh; width: 84vw; }
  .hero__wash--2 { left: var(--sc-gutter); }
  .hero__mist { top: 30%; height: 34%; }

  .maison__grid { grid-template-columns: 1fr; }
  .maison__text { padding-top: 0; }
  .maison__media { padding-bottom: 4.5rem; }
  .maison__macro { left: auto; right: 0; bottom: 0; width: 8.5rem; }

  .rail { padding-inline: var(--sc-gutter); gap: var(--sc-5); padding-top: 0; }
  .rail__lead { width: 78vw; }
  .rail__item { width: 66vw; }
  .rail__end { width: 74vw; }

  .soir { min-height: 72vh; }

  .breath { width: min(60vw, 40vh); }
  .bains__copy { left: var(--sc-gutter); top: calc(var(--bar-h) + 2vh); width: calc(100vw - 2 * var(--sc-gutter)); }
  .bains__copy .sc-display { font-size: var(--sc-t-2xl); }
  .bains__scrim {
    background: linear-gradient(to bottom,
      color-mix(in oklab, #0F1412 84%, transparent) 0%,
      color-mix(in oklab, #0F1412 58%, transparent) 30%,
      color-mix(in oklab, #0F1412 20%, transparent) 50%,
      transparent 66%);
  }

  .nuit__grid { grid-template-columns: 1fr; }
  .nuit__fig--sauna, .nuit__fig--tisane { grid-column: 1; }
  .nuit__fig--tisane { width: 62%; margin-top: -2rem; margin-left: auto; }

  .matin__stage { grid-template-columns: 1fr; grid-template-rows: 38svh 1fr; }
  .matin__img {
    grid-column: 1; grid-row: 1;
    mask-image: linear-gradient(to top, transparent 0%, #000 34%);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 34%);
  }
  .matin__col { grid-column: 1; grid-row: 2; padding: 0 var(--sc-gutter) 3.2rem; grid-template-rows: auto auto; align-content: space-between; }
  .matin__copy { gap: var(--sc-3); }
  .matin__copy .sc-display { font-size: var(--sc-t-2xl); }
  .matin__copy .sc-body { font-size: var(--sc-t-sm); }
  .matin__infos { grid-template-columns: repeat(2, 1fr); gap: var(--sc-2) var(--sc-4); margin-top: var(--sc-2); }
  .matin__infos > div { padding-top: var(--sc-2); }
  .foot { padding-top: var(--sc-3); }
  .foot__small { display: none; }
  .cta--big { padding: 0.9rem 1.5rem; font-size: var(--sc-t-sm); }
}

@media (max-width: 400px) {
  .matin__stage { grid-template-rows: 32svh 1fr; }
  .matin__infos { display: none; }
}