/* ==========================================================================
   CHENZU — CUISINE JAPONAISE CONTEMPORAINE
   Feuille de style principale — 間 (ma) : l'intervalle
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Reset raisonné
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: auto;                /* pas de lissage : les snaps sont immédiats */
}

img, video, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   1. Tokens — palette, typographies, échelle, temps
   -------------------------------------------------------------------------- */
:root {
  /* Palette — six valeurs, deux dominantes                                  */
  --kinu:   #F4EFE7;   /* soie écrue — fond dominant                          */
  --sumi:   #1C1917;   /* encre — texte, boutons principaux                   */
  --hinoki: #E3D6C3;   /* bois clair — second fond, blocs de menu             */
  --kin:    #A8762E;   /* ocre doré — accent unique                           */
  --ai:     #2C3A4E;   /* indigo shibori — une seule section                  */
  --hai:    #6B6259;   /* cendre — texte secondaire, légendes                 */

  --sumi-12: rgba(28, 25, 23, .12);  /* filet                                 */
  --sumi-35: rgba(28, 25, 23, .35);  /* voile sur image                       */
  --sumi-06: rgba(28, 25, 23, .06);
  --kinu-70: rgba(244, 239, 231, .70);

  /* Typographies                                                            */
  --font-title: "Marcellus", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-text:  "Karla", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Grille                                                                  */
  --grid-max:    1360px;
  --grid-gap:    24px;
  --page-pad:    96px;   /* marges latérales desktop                          */
  --header-pad-y: 9px;  /* Géométrie commune, référence Privatisation. */
  --header-pad-x: 6.1464vw;
  --page-pad-mb: 24px;   /* marges mobile                                     */

  /* Rythme vertical (base 8)                                                */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  56px;
  --sp-7:  80px;
  --sp-8:  120px;
  --sp-9:  200px;

  /* Courbes et durées uniques                                                */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-ui:      300ms;
  --t-reveal:  600ms;
  --t-open:    900ms;

  /* Trait ocre signature                                                    */
  --rule-w: 48px;
  --rule-h: 2px;
}

/* --------------------------------------------------------------------------
   2. Base — fond, texte, focus
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--sumi);
  background: var(--kinu);
  /* Grain papier 2 % — SVG feTurbulence en data-uri, 220 px de tuile.       */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.098  0 0 0 0 0.09  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/></svg>");
  overflow-x: hidden;
}

/* Anneau de focus ocre, 2 px, visible.                                     */
:focus-visible {
  outline: 2px solid var(--kin);
  outline-offset: 3px;
}
::selection { background: var(--sumi); color: var(--kinu); }

/* Sélections utiles                                                        */
main { display: block; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   3. Grille + conteneur
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--grid-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--sp-4);
}

/* --------------------------------------------------------------------------
   4. Typographie — hiérarchie
   -------------------------------------------------------------------------- */
.t-display {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(44px, 7.2vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: inherit;
}

.t-h2 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.t-lede {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.5;
  max-width: 30em;
  color: var(--sumi);
}

.t-body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  max-width: 34em; /* ~62 caractères */
  color: var(--sumi);
}

.t-label {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sumi);
}
.t-label--hai { color: var(--hai); }
.t-label--kin { color: var(--kin); }
.t-label--kinu { color: var(--kinu); }

.t-dishname {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--sumi);
}
.t-dishname__jp {
  display: block;
  margin-top: 4px;
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--hai);
}

.t-caption {
  font-family: var(--font-text);
  font-weight: 300;
  font-style: italic;
  font-size: 13px;
  color: var(--hai);
  line-height: 1.5;
}

/* Mobile — abaisser lede/body/dishname                                     */
@media (max-width: 767px) {
  .t-lede { font-size: 19px; }
  .t-body { font-size: 16px; }
  .t-dishname { font-size: 19px; }
  .t-caption { font-size: 12px; }
  .t-label { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   5. Éléments graphiques signature — trait ocre, numéro, filets
   -------------------------------------------------------------------------- */
.rule {
  display: block;
  width: var(--rule-w);
  height: var(--rule-h);
  background: var(--kin);
  transform-origin: left center;
}
.rule--kinu { background: var(--kinu); }

.section-num {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hai);
  margin-bottom: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.section-num::before {
  content: "";
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: .6;
  display: inline-block;
}

.hr-thin {
  height: 1px;
  background: var(--sumi-12);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. Boutons — trois niveaux
   -------------------------------------------------------------------------- */
.btn {
  --btn-fg: var(--kinu);
  --btn-bg: var(--sumi);
  --btn-hover: var(--kin);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 34px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-ui) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 100% 0 -100% 0;   /* commence en bas, hors du bouton */
  background: var(--btn-hover);
  transition: transform 400ms var(--ease);
  transform: translateY(0);
  z-index: -1;
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(-100%); }

.btn--on-ai { --btn-bg: var(--kinu); --btn-fg: var(--sumi); --btn-hover: var(--kin); }
.btn--on-sumi { --btn-bg: var(--kinu); --btn-fg: var(--sumi); }

/* Secondaire — texte souligné qui s'étend                                  */
.link-underline {
  position: relative;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sumi);
  padding-bottom: 6px;
  display: inline-block;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 300ms var(--ease);
}
.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(0);
  transform-origin: left;
}
/* Variante inversée : trait qui se dessine gauche→droite                   */
.link-underline--draw::after {
  transform: scaleX(0);
  transform-origin: left;
}
.link-underline--draw:hover::after,
.link-underline--draw:focus-visible::after {
  transform: scaleX(1);
}
.link-underline--kinu { color: var(--kinu); }

/* Tertiaire — libellé + flèche                                             */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sumi);
}
.link-arrow .arrow {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: transform 300ms var(--ease);
}
.link-arrow .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  transform-origin: right center;
}
.link-arrow:hover .arrow,
.link-arrow:focus-visible .arrow { transform: translateX(6px); }
.link-arrow--kinu { color: var(--kinu); }

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 95; /* Au-dessus du volet de page (90), sous l’intro (100). */
  padding: var(--header-pad-y) var(--header-pad-x);
  min-height: 63px;
  line-height: 1.65;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color var(--t-ui) var(--ease),
              border-color var(--t-ui) var(--ease);
  border-bottom: 1px solid transparent;
  color: var(--sumi);
  background: transparent;
}
.nav--kinu-fg { color: var(--kinu); }
.nav.is-scrolled {
  background: var(--kinu);
  color: var(--sumi);
  border-bottom-color: var(--sumi-12);
}
.nav__brand {
  font-family: var(--font-title);
  font-size: 26px;
  letter-spacing: 0.02em;
  line-height: 1;
  color: inherit;
}
.nav__list {
  display: flex;
  gap: 44px;
}
.nav__list a {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  position: relative;
  padding: 4px 0;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease);
}
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }

.nav__right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__lang {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: inherit;
}
.nav__lang span { opacity: .5; }
.nav__lang span.is-active { opacity: 1; }

/* Toggle mobile                                                            */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1px;
  background: currentColor;
  transition: transform var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
}
.nav__toggle span:first-child { top: 17px; }
.nav__toggle span:last-child { top: 27px; }
.is-menu-open .nav__toggle span:first-child { transform: translateY(5px) rotate(45deg); }
.is-menu-open .nav__toggle span:last-child { transform: translateY(-5px) rotate(-45deg); }

/* Menu plein écran mobile                                                  */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: var(--kinu);
  padding: 96px var(--page-pad-mb) 96px;
  /* PERF : retiré du rendu au-delà de 767 px. Le déclencheur (.nav__toggle)
     n'apparaît qu'en mobile, donc en desktop ce calque `fixed` plein écran
     (980 964 px²) restait dans l'arbre de composition sans jamais servir.
     `opacity: 0` ne suffit pas : le calque est conservé.
     Réactivé en `flex` dans la media query mobile ci-dessous. */
  display: none;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.is-menu-open .mobile-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mobile-menu__list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--sumi-12);
  padding: 20px 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.is-menu-open .mobile-menu__list li { opacity: 1; transform: none; }
.is-menu-open .mobile-menu__list li:nth-child(1) { transition-delay: 60ms; }
.is-menu-open .mobile-menu__list li:nth-child(2) { transition-delay: 120ms; }
.is-menu-open .mobile-menu__list li:nth-child(3) { transition-delay: 180ms; }
.is-menu-open .mobile-menu__list li:nth-child(4) { transition-delay: 240ms; }
.is-menu-open .mobile-menu__list li:nth-child(5) { transition-delay: 300ms; }
.mobile-menu__num {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--hai);
}
.mobile-menu__link {
  font-family: var(--font-title);
  font-size: 32px;
  color: var(--sumi);
  line-height: 1;
}
.mobile-menu__foot { display: flex; justify-content: space-between; align-items: center; }

/* Barre de réservation ancrée en bas (mobile)                              */
.mobile-book-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  height: 64px;
  background: var(--kinu);
  border-top: 1px solid var(--sumi-12);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  transform: translateY(100%);
  transition: transform 500ms var(--ease);
}
.mobile-book-bar.is-visible { transform: none; }
.mobile-book-bar a { font-family: var(--font-text); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.mobile-book-bar .book-tel { color: var(--sumi); padding: 12px 8px; }
.mobile-book-bar .book-cta {
  background: var(--sumi); color: var(--kinu); height: 44px; padding: 0 22px;
  display: inline-flex; align-items: center;
}

/* --------------------------------------------------------------------------
   8. Voile d'ouverture (transition de page)
   -------------------------------------------------------------------------- */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--kinu);
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform var(--t-open) var(--ease);
  pointer-events: none;
}
.is-loaded .page-veil { transform: scaleY(0); }
.page-veil--out {  /* activé lors d'une transition sortante */
  transform-origin: top;
  transform: scaleY(0);
}
.is-leaving .page-veil--out { transform: scaleY(1); }

/* --------------------------------------------------------------------------
   9. Curseur personnalisé (desktop uniquement)
   -------------------------------------------------------------------------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sumi);
  pointer-events: none;
  z-index: 100;
  transform: translate3d(-50%, -50%, 0);
  transition: width var(--t-ui) var(--ease),
              height var(--t-ui) var(--ease),
              background-color var(--t-ui) var(--ease),
              border var(--t-ui) var(--ease);
  mix-blend-mode: normal;
}
.cursor.is-drag {
  width: 56px; height: 56px;
  background: transparent;
  border: 1px solid var(--kin);
  color: var(--kin);
}
.cursor.is-drag::after {
  content: "glisser";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kin);
}
.cursor.is-image {
  width: 44px; height: 44px;
  background: var(--kinu);
  mix-blend-mode: difference;
}
@media (hover: none) { .cursor { display: none; } }

/* --------------------------------------------------------------------------
   10. Photos + placeholders — réserves grises annotées
       (à remplacer par les prises de vue réelles)
   -------------------------------------------------------------------------- */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--hinoki);
  color: var(--hai);
}
.photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: saturate(0.9) contrast(1.02);
}
/* Léger voile chaud pour la cohérence chromatique (étalonnage DA).
   PERF : `mix-blend-mode: multiply` retiré — il forçait une relecture du
   backdrop par le compositeur à chaque frame (≈ 2,9 M px physiques dans le
   menu horizontal animé, 3,9 M dans le hero en parallaxe).
   Les alphas sont recalculés pour un rendu équivalent en blend normal :
     multiply α=0.05 → facteur 0.9555 ≈ normal α=0.07
     multiply α=0.15 → facteur 0.8665 ≈ normal α=0.20
   (équivalence calée sur les tons moyens, là où l'œil est le plus sensible ;
   l'écart résiduel dans les noirs profonds est < 0,5 % de luminance) */
.photo > img + .photo__grade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(28,25,23,0.07), rgba(28,25,23,0.20));
}
/* Quand une img est présente on masque les annotations */
.photo:has(> img) .photo__label { display: none; }
.photo:has(> img) .photo__ratio { display: none; }
.photo:has(> img)::before,
.photo:has(> img)::after { display: none; }
.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(28,25,23,0.05), rgba(28,25,23,0)),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(28,25,23,0.02) 2px, rgba(28,25,23,0.02) 3px);
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.098  0 0 0 0 0.09  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/></svg>");
  pointer-events: none;
}
.photo__label {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.photo__label small {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hai);
}
.photo__label b {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--sumi);
}
.photo__label em {
  font-family: var(--font-text);
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  color: var(--hai);
}
.photo__ratio { position: absolute; top: 18px; right: 20px; }
.photo--dark { background: #2a2724; color: rgba(244,239,231,.6); }
.photo--dark .photo__label small { color: rgba(244,239,231,.55); }
.photo--dark .photo__label b { color: var(--kinu); }
.photo--dark .photo__label em { color: rgba(244,239,231,.5); }

/* Ratios utilitaires                                                       */
.ratio-4x5  { aspect-ratio: 4 / 5; }
.ratio-3x4  { aspect-ratio: 3 / 4; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-3x2  { aspect-ratio: 3 / 2; }
.ratio-5x7  { aspect-ratio: 5 / 7; }

/* Masque de révélation — un voile écru qui se retire du bas vers le haut   */
.mask-reveal { position: relative; overflow: hidden; }
.mask-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kinu);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 700ms var(--ease);
  z-index: 3;
}
.mask-reveal.is-inview::before { transform: scaleY(0); }
.mask-reveal--dark::before { background: var(--sumi); }

/* Contenu qui monte et fond enchaîné                                        */
/* ==========================================================================
   GRAMMAIRE DE MOTION UNIFIÉE
   Toutes les révélations partagent la même courbe (--ease = cubic-bezier(0.22,1,0.36,1))
   et la même hiérarchie de durée/amplitude :
     - Label (section-num)   : 320 ms · y 6 px  · discret
     - Titre (.t-h2 / t-disp): 520 ms · y 14 px · éditorial
     - Corps (.t-body)       : 480 ms · y 8 px  · subtil
     - Numéros / éléments forts : 560 ms · y 16 px · plus assumé
   -------------------------------------------------------------------------- */
.up {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.up.is-inview { opacity: 1; transform: none; }
/* Stagger — réduit pour un ressenti plus resserré, plus cohérent */
.up.d-1 { transition-delay: 70ms;  }
.up.d-2 { transition-delay: 140ms; }
.up.d-3 { transition-delay: 210ms; }
.up.d-4 { transition-delay: 280ms; }
.up.d-5 { transition-delay: 350ms; }

/* Variantes fines — pilotées par le sélecteur, pas de nouvelle classe HTML */
.t-body.up             { transform: translateY(8px); transition-duration: 480ms; }
.house__quote.up       { transform: translateY(10px); transition-duration: 540ms; }
.room__facts__num,
.private__stat__num,
.book__step__num,
.room__facts__lead {
  /* Ces éléments héritent du fade parent (.up sur leur wrapper) et
     reçoivent en plus un léger déplacement propre pour un reveal masqué. */
  transition: transform 620ms var(--ease), opacity 620ms var(--ease);
}

/* Labels de section — reveal court et discret, indépendant de .up */
.section-num {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.section-num.is-inview { opacity: 1; transform: none; }

/* Étapes du formulaire — reveal cohérent avec la grammaire */
.book__step {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.book__step.is-inview { opacity: 1; transform: none; }
.book__step + .book__step { transition-delay: 100ms; }

/* Trait ocre animé                                                          */
.rule.is-anim { transform: scaleX(0); transition: transform 500ms var(--ease); }
.rule.is-anim.is-inview { transform: scaleX(1); }

/* ==========================================================================
   10bis. INTRO — 00 · Overlay fixe au-dessus du document
   Le document ne scroll PAS pendant l'intro. Le JS convertit les gestes
   utilisateur en progression virtuelle (--intro-p). À 100 % l'overlay
   disparaît en laissant le hero — déjà à sa place — parfaitement immobile.
   Aucun scrollTo, aucune correction de scrollY, aucun conflit.
   ========================================================================== */
:root {
  --intro-p: 0;
  --intro-scale: 1;
  --intro-facade-op: 1;
  --intro-nav-op: 0;
  --intro-cue-op: 1;
}

/* --- Verrou de scroll durant l'intro --- */
html.is-intro, body.is-intro {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* --- Overlay ---
   AUCUN background sombre : le hero est DÉJÀ derrière, visible dès le premier
   paint. L'opacité de l'overlay entier suit --intro-facade-op : quand la
   façade fond, l'overlay entier disparaît en même temps → le hero est révélé
   directement, aucune frame noire possible. */
.intro {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  z-index: 100;                         /* au-dessus de la nav et de tout */
  overflow: hidden;
  isolation: isolate;
  background: transparent;              /* explicite : PAS de fond */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: opacity;
  opacity: var(--intro-facade-op, 1);   /* pilote unique de la disparition */
}
/* Une fois le geste absorbé (introDone), l'overlay est retiré entièrement
   du hit-testing pour que le prochain wheel/touch soit reçu tout de suite
   par le document, sans nécessiter un mousemove pour redéclencher la
   ré-évaluation du navigateur. */
body:not(.is-intro) .intro {
  display: none;
}

/* --- Façade ---
   Plus d'opacité propre : c'est le parent qui gère le fondu, on garde
   uniquement le zoom. Aucune superposition d'opacités. */
.intro__facade-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}
.intro__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 46%;
  transform-origin: 42% 46%;
  will-change: transform;
  filter: saturate(0.95) contrast(1.03) brightness(0.98);
  transform: scale(var(--intro-scale, 1));
  backface-visibility: hidden;
}

/* Scroll natif sans lissage global — pas de conflit avec les gestes. */
html { scroll-behavior: auto; }
/* Indice discret : « Entrer » + trait qui pulse (disparaît vite au scroll) */
.intro__cue {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(244,239,231,0.72);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  z-index: 3;
  opacity: var(--intro-cue-op, 1);
  pointer-events: none;
}
.intro__cue__tick {
  width: 1px;
  height: 40px;
  background: rgba(244,239,231,0.65);
  transform-origin: top center;
  animation: introTick 2400ms cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes introTick {
  0%   { transform: scaleY(0.25); opacity: 0.35; }
  50%  { transform: scaleY(1);    opacity: 1; }
  100% { transform: scaleY(0.25); opacity: 0.35; }
}

/* Nav — position fixe dès le chargement (aucun changement de layout).
   Pendant l'intro : opacité pilotée par --intro-nav-op. Après l'intro :
   transition douce vers 1. Aucun transform, aucun reflow. */
body.is-intro .nav {
  opacity: var(--intro-nav-op, 0);
  pointer-events: none;
  transition: none;
}
body:not(.is-intro) .nav {
  transition: opacity 320ms var(--ease);
}

/* Mobile — l'overlay reste 100dvh, seul le cue est ajusté */
@media (max-width: 767px) {
  .intro__cue { bottom: 32px; font-size: 10px; }
}

/* Reduced motion — pas d'intro du tout, hero directement */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* ==========================================================================
   11. HERO — 01 · Ouverture
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--kinu);
  background: #100e0d;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media .photo {
  width: 100%;
  height: 100%;
  background: #14100e;
}
.hero__media .photo > img {
  object-fit: cover;
  object-position: 50% 55%;
  filter: saturate(0.9) contrast(1.02);
}
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Voile encre dégressif — assoupli d'environ 10 % pour gagner en lisibilité
     sans altérer l'ambiance sombre : les zones extrêmes (bas et bord gauche)
     restent solides, mais les valeurs médianes s'éclaircissent. */
  background:
    linear-gradient(180deg, rgba(11,9,8,0.15) 0%, rgba(11,9,8,0.28) 55%, rgba(11,9,8,0.75) 100%),
    linear-gradient(90deg, rgba(11,9,8,0.65) 0%, rgba(11,9,8,0.25) 45%, rgba(11,9,8,0.06) 70%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-top: 96px;
}
.hero__meta {
  padding: 40px var(--page-pad) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--kinu);
}
.hero__meta .t-label { color: rgba(244,239,231,0.75); }
.hero__body {
  padding: 0 var(--page-pad) 88px;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
}
.hero__title {
  color: var(--kinu);
  max-width: 14ch;
}
.hero__actions {
  display: flex;
  gap: 32px;
  align-items: center;
}
.hero__scroll {
  position: absolute;
  right: var(--page-pad);
  bottom: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(244,239,231,0.72);
}
.hero__scroll .tick {
  width: 1px;
  height: 40px;
  background: rgba(244,239,231,0.6);
  animation: pulseLine 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes pulseLine {
  0%, 100% { transform: scaleY(1); opacity: .7; }
  50% { transform: scaleY(0.6); opacity: 1; }
}

/* Titre lettre-à-lettre                                                    */
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--t-open) var(--ease);
}
.is-loaded .hero__title .line > span { transform: none; }
.hero__title .line:nth-child(2) > span { transition-delay: 90ms; }
.hero__title .line:nth-child(3) > span { transition-delay: 180ms; }

/* ==========================================================================
   12. MANIFESTE — 02 · Vide
   ========================================================================== */
.manifesto {
  padding: var(--sp-7) var(--page-pad);   /* -10 % supplémentaires */
  min-height: 46svh;                       /* -12 % supplémentaires */
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--kinu);
}
.manifesto__inner { max-width: 780px; }
.manifesto p {
  font-family: var(--font-title);
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.35;
  color: var(--sumi);
  letter-spacing: -0.005em;
}
.manifesto .rule { margin: 0 auto 40px; }

/* ==========================================================================
   13. LA MAISON — 03 · Tenue (image débordante)
   ========================================================================== */
.house {
  position: relative;
  padding: 60px 0 var(--sp-9);
  min-height: 90svh;
  overflow: hidden;
}
.house__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 96px;
  align-items: start;
  padding-right: var(--page-pad);
}
.house__media {
  position: relative;
  margin-left: 0;
  padding-left: 0;
}
.house__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 720px;
}
.house__caption {
  margin-top: 14px;
  padding-right: 8px;
  text-align: right;
}
.house__text {
  padding-top: 80px;
  padding-right: 0;
  max-width: 480px;
}
.house__text .t-h2 { margin: 18px 0 32px; }
.house__quote {
  margin-top: 40px;
  padding-left: 20px;
  border-left: 1px solid var(--kin);
  font-family: var(--font-title);
  font-size: 20px;
  line-height: 1.45;
  color: var(--sumi);
}
.house__quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hai);
  font-style: normal;
}
.house__cta { margin-top: 48px; }

/* ==========================================================================
   14. MENU DU MOMENT — 04 · Pleine (scroll horizontal)
   ========================================================================== */
.menu-mo {
  background: var(--hinoki);
  position: relative;
  padding: var(--sp-9) 0 0;
}
.menu-mo__head {
  padding: 0 var(--page-pad) 60px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
}
.menu-mo__meta {
  display: flex;
  gap: 48px;
  align-items: baseline;
}
.menu-mo__meta div { display: flex; flex-direction: column; gap: 6px; }
.menu-mo__meta strong {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 32px;
  color: var(--sumi);
  letter-spacing: -0.01em;
}
.menu-mo__stage {
  position: relative;
  padding-bottom: 120px;
  /* Fallback natif si le JS ne pilote pas le scroll horizontal */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.menu-mo__stage::-webkit-scrollbar { display: none; }
.menu-mo__stage { scrollbar-width: none; }
/* Quand le JS a pris le contrôle, on retire l'overflow natif */
.menu-mo__stage.js-piloted { overflow: visible; scroll-snap-type: none; }
.menu-mo__track {
  display: flex;
  gap: 48px;
  padding: 0 var(--page-pad);
  /* PERF : `will-change: transform` retiré du CSS statique — il réservait
     819 668 px² × DPR² ≈ 3,3 M px de texture GPU en permanence, alors que
     le track n'est animé que sur ~15 % du scroll de la page.
     Il est désormais posé par le JS au démarrage de l'interpolation et
     retiré dès qu'elle se termine (voir main.js, hTick/updateHorizontal). */
}
.menu-mo__panel { scroll-snap-align: center; }
.menu-mo__panel {
  flex: 0 0 70vw;
  max-width: 900px;
  position: relative;
  min-height: 74vh;
  padding: 40px 40px 40px 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: end;
}
.menu-mo__panel .photo {
  aspect-ratio: 3 / 4;
  height: 74vh;
  max-height: 720px;
  width: 100%;
}
.menu-mo__big-num {
  position: absolute;
  top: -30px;
  left: -20px;
  font-family: var(--font-title);
  font-size: clamp(120px, 16vw, 220px);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px var(--kin);
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.03em;
  /* Base subtile ; le panneau actif fait légèrement remonter l'opacité
     et un très léger scale — signalement discret, jamais gadget. */
  opacity: 0.32;
  transform: scale(1);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.menu-mo__panel.is-active .menu-mo__big-num {
  opacity: 0.85;
  transform: scale(1.03);
}

/* Métadonnées du menu — stagger 70 ms conforme à la grammaire */
.menu-mo__meta > div {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.menu-mo__meta.is-inview > div        { opacity: 1; transform: none; }
.menu-mo__meta.is-inview > div:nth-child(2) { transition-delay: 70ms;  }
.menu-mo__meta.is-inview > div:nth-child(3) { transition-delay: 140ms; }
.menu-mo__panel__body {
  padding-bottom: 20px;
  position: relative;
  z-index: 2;
}
.menu-mo__panel__body .t-label { margin-bottom: 18px; }
.menu-mo__panel__body .t-dishname { margin-bottom: 12px; }
.menu-mo__panel__body .t-body { margin-bottom: 24px; max-width: 36ch; }

.menu-mo__foot {
  padding: 40px var(--page-pad) 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--sumi-12);
  margin-top: 40px;
}

/* ==========================================================================
   15. LA SALLE — 05 · Tenue (diptyque déséquilibré)
   ========================================================================== */
.room {
  padding: var(--sp-9) var(--page-pad);
  min-height: 80svh;
  position: relative;
}
.room__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
}
.room__a {
  grid-column: 1 / span 6;
  aspect-ratio: 4 / 5;
  max-height: 78vh;
}
.room__b {
  grid-column: 8 / span 5;
  aspect-ratio: 3 / 4;
  max-height: 52vh;
  align-self: end;
  margin-top: 140px;
}
.room__text {
  grid-column: 8 / span 5;
  padding-top: 40px;
}

/* --------------------------------------------------------------------------
   05 · La salle — structure éditoriale miroir de La Maison
   Texte à gauche (~44%), composition de 3 images à droite (~56%).
   Ordre visuel : TEXTE | PHOTO 1 (grande) | PHOTO 2 / PHOTO 3 (empilées)
   -------------------------------------------------------------------------- */
.room--v3 {
  padding: var(--sp-9) 0;
}
.room--v3 .room__grid {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  column-gap: 88px;
  padding-left: var(--page-pad);
  padding-right: 0;                     /* la colonne images file jusqu'au bord */
  align-items: start;
}

/* Colonne texte — même hauteur de départ que la colonne image */
.room--v3 .room__text {
  grid-column: 1;                       /* force la 1re colonne (annule les héritages) */
  padding-top: 8px;                     /* aligne visuellement avec le haut des images */
  max-width: 520px;
}
.room--v3 .room__text .t-h2 { margin: 18px 0 24px; }
.room--v3 .room__text .t-body { max-width: 62ch; }

/* Bloc d'informations — intégré au récit éditorial */
.room__facts { margin-top: 44px; }
.room__facts__lead {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sumi-12);
}
.room__facts__num {
  font-family: var(--font-title);
  font-size: 64px;
  line-height: 1;
  color: var(--sumi);
  letter-spacing: -0.01em;
}
.room__facts__label {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hai);
}
.room__facts__list { margin-top: 12px; }
.room__facts__list > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--sumi-12);
}
.room__facts__list dt {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hai);
}
.room__facts__list dd {
  font-family: var(--font-title);
  font-size: 17px;
  line-height: 1.3;
  color: var(--sumi);
}

/* Colonne images — main à gauche, deux petites empilées à droite */
.room--v3 .room__media {
  grid-column: 2;                       /* force la 2e colonne */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 24px;
  padding-top: 68px;                    /* aligne le haut des images sur la barre ocre */
  padding-right: var(--page-pad);
}
.room--v3 .room__media__main {
  grid-column: 1;
  grid-row: 1 / span 2;
  aspect-ratio: 3 / 4;
  max-height: 78vh;
  align-self: start;
}
.room--v3 .room__media__a {
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 4 / 3;
  max-height: 28vh;
  align-self: start;
}
.room--v3 .room__media__b {
  grid-column: 2;
  grid-row: 2;
  aspect-ratio: 4 / 3;
  max-height: 26vh;
  margin-top: 40px;                      /* décalage bas — asymétrie éditoriale */
  align-self: start;
}
.room__text ul { margin-top: 24px; }
.room__text li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--sumi-12);
  font-family: var(--font-text);
  font-size: 14px;
}
.room__text li span:first-child {
  color: var(--hai);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
}
.room__text li span:last-child {
  font-family: var(--font-title);
  font-size: 17px;
  color: var(--sumi);
}

/* ==========================================================================
   16. PRIVATISATION — 06 · Vide (bloc indigo)
   ========================================================================== */
.private {
  background: var(--ai);
  color: var(--kinu);
  padding: 0;
  min-height: 78svh;
  position: relative;
  overflow: hidden;
}
.private::before {  /* Balayage vertical d'entrée                          */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: var(--kinu);
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 600ms var(--ease);
  z-index: 5;
  pointer-events: none;
}
.private.is-inview::before { transform: scaleY(0); }

/* Photo de fond — présente sur toute la section, très diffuse */
.private__bg {
  position: absolute;
  inset: 0;                              /* couvre l'ensemble */
  z-index: 0;
  overflow: hidden;
  opacity: 0.16;
  mix-blend-mode: screen;
  filter: saturate(0.35) contrast(1.02) brightness(1.05);
  /* Double masque : bande verticale douce + halo elliptique
     — l'image devient une matière du fond, pas une photo à droite */
  -webkit-mask-image:
    radial-gradient(120% 80% at 72% 45%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 45%, rgba(0,0,0,0.55) 100%);
  -webkit-mask-composite: source-over;
          mask-image:
    radial-gradient(120% 80% at 72% 45%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 45%, rgba(0,0,0,0.55) 100%);
          mask-composite: add;
}
.private__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 55% 55%;
}

.private__inner {
  position: relative;
  z-index: 2;
  padding: var(--sp-9) var(--page-pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  row-gap: 120px;
  align-items: start;
}

/* Colonne texte — angle haut gauche, légèrement redescendu */
.private__head {
  grid-column: 2 / span 6;
  padding-top: 40px;                     /* équilibre vertical */
}
.private__head .rule { background: var(--kin); }
.private__title {
  font-family: var(--font-title);
  font-size: clamp(37px, 4vw, 62px);      /* ~8 % plus petit */
  line-height: 1.06;
  color: var(--kinu);
  letter-spacing: -0.01em;
  margin: 20px 0 24px;
  max-width: 14ch;
}
.private__lede {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: rgba(244,239,231,0.85);
  margin-bottom: 44px;
  max-width: 42ch;
}

/* CTA — filet ocre qui s'étire, flèche qui se décale */
.private__cta {
  display: inline-grid;
  grid-template-columns: auto 80px auto;
  align-items: center;
  gap: 18px;
  color: var(--kinu);
  text-decoration: none;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 0 10px;
  transition: color 500ms var(--ease);
}
.private__cta__label {
  line-height: 1;
  transition: transform 700ms var(--ease);
}
.private__cta__line {
  display: block;
  height: 1px;
  background: rgba(244,239,231,0.35);
  position: relative;
  overflow: hidden;
  transition: width 700ms var(--ease);
}
.private__cta__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kin);
  transform: translateX(-100%);
  transition: transform 700ms var(--ease);
}
.private__cta__arrow {
  width: 22px; height: 1px;
  background: currentColor;
  position: relative;
  transition: transform 600ms var(--ease);
}
.private__cta__arrow::before,
.private__cta__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  width: 8px; height: 1px;
  background: currentColor;
}
.private__cta__arrow::before { transform: rotate(35deg); top: -3px; right: 0; }
.private__cta__arrow::after  { transform: rotate(-35deg); top: 3px; right: 0; }

/* Hover — filet ocre s'étend, flèche avance, libellé recule légèrement */
.private__cta:hover .private__cta__line::after { transform: translateX(0); }
.private__cta:hover .private__cta__arrow      { transform: translateX(10px); }
.private__cta:hover .private__cta__label      { transform: translateX(-2px); }

/* Constellation — 3 chiffres asymétriques reliés par un filet */
.private__constellation {
  grid-column: 2 / -2;
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.9fr;
  align-items: end;
  min-height: 220px;
  padding-top: 80px;
}
.private__constellation__line {
  position: absolute;
  left: 0; right: 0;
  bottom: 96px;
  height: 1.5px;                         /* trait un peu plus assumé */
  background: linear-gradient(90deg,
    rgba(244,239,231,0) 0%,
    rgba(244,239,231,0.55) 8%,
    rgba(244,239,231,0.55) 92%,
    rgba(244,239,231,0) 100%);           /* couverture presque complète */
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1100ms 200ms var(--ease);
}
.private.is-inview .private__constellation__line { transform: scaleX(1); }

/* Chaque node relié au filet par un point ocre */
.private__stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 40px;                 /* espace pour la pastille */
}
.private__stat::after {
  content: "";
  position: absolute;
  bottom: 92px;                          /* aligne sur le filet (96 - 4) */
  left: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kin);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 500ms 500ms var(--ease), transform 500ms 500ms var(--ease);
}
.private.is-inview .private__stat::after { opacity: 1; transform: scale(1); }
.private__stat__num {
  font-family: var(--font-title);
  font-weight: 400;
  color: var(--kinu);
  letter-spacing: -0.03em;
  line-height: 0.92;
}
.private__stat__num em {
  font-style: normal;
  font-size: 0.44em;
  margin-left: 6px;
  color: rgba(244,239,231,0.65);
  letter-spacing: 0;
}
.private__stat__label {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,239,231,0.62);
}
.private__stat__hint {
  font-family: var(--font-text);
  font-weight: 300;
  font-style: italic;
  font-size: 13px;
  color: var(--kin);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  pointer-events: none;
}
.private__stat:hover .private__stat__hint { opacity: 1; transform: translateY(0); }

/* Tailles différentes — rythme éditorial */
.private__stat--1 .private__stat__num { font-size: clamp(80px, 8vw, 132px); }
.private__stat--2 .private__stat__num { font-size: clamp(64px, 6.4vw, 108px); }
.private__stat--3 .private__stat__num { font-size: clamp(52px, 5.2vw, 88px); }

/* Décalages verticaux pour asymétrie */
.private__stat--1 { transform: translateY(0); }
.private__stat--2 { transform: translateY(-40px); }
.private__stat--3 { transform: translateY(28px); }

/* ==========================================================================
   17. RÉSERVER & VENIR — 07 · Tenue
   ========================================================================== */
.book {
  padding: var(--sp-9) var(--page-pad);
  min-height: 70svh;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 96px;
  align-items: start;
  position: relative;
  /* Texture papier très légère — évite le rendu plat */
  background:
    radial-gradient(1200px 800px at 100% 0%, rgba(168,118,46,0.03) 0%, transparent 60%),
    var(--kinu);
}
.book__head { margin-bottom: 56px; }
.book__head .t-h2 { margin: 18px 0 20px; }

/* Formulaire en 2 étapes éditoriales                                       */
.book__form { display: flex; flex-direction: column; gap: 72px; }

/* En-tête d'étape : gros numéro + titre + sous-titre                        */
.book__step__head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 32px;
  align-items: baseline;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sumi-12);
  margin-bottom: 36px;
}
.book__step__num {
  font-family: var(--font-title);
  font-size: clamp(48px, 5vw, 80px);
  line-height: 1;
  color: var(--kin);
  letter-spacing: -0.02em;
}
.book__step__title h3 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 24px;
  color: var(--sumi);
  line-height: 1.1;
}
.book__step__title p {
  margin-top: 6px;
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--hai);
  letter-spacing: 0.01em;
}
.book__step__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 48px;
}

/* Champs — plus d'air, mouvement du label plus expressif                    */
.book__field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  position: relative;
}
.book__field label {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hai);
  transform-origin: left center;
  transition: color 400ms var(--ease),
              letter-spacing 400ms var(--ease),
              transform 400ms var(--ease);
}
.book__field label em {
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: rgba(107,98,89,0.6);
  margin-left: 8px;
  text-transform: none;
  font-size: 10px;
}
.book__field input,
.book__field select,
.book__field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sumi-12);
  padding: 14px 0 12px;
  font-family: var(--font-text);
  font-size: 17px;
  color: var(--sumi);
  transition: border-color 400ms var(--ease), color 400ms var(--ease);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
/* Filet ocre qui glisse sous le champ au focus — courbe éditée pour un
   dessin plus lent en début et plus doux en fin */
.book__field::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--kin);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.book__field:focus-within::after { transform: scaleX(1); }
.book__field input:focus,
.book__field select:focus,
.book__field textarea:focus {
  outline: none;
}
/* Focus : label monte légèrement, se resserre en couleur et s'espace */
.book__field:focus-within label {
  color: var(--kin);
  letter-spacing: 0.28em;
  transform: translateY(-2px);
}
/* Focus : petit halo ocre discret sur le champ */
.book__field:focus-within {
  --field-glow: 6px 20px 60px -30px rgba(168,118,46,0.55);
}
.book__field:focus-within input,
.book__field:focus-within select,
.book__field:focus-within textarea {
  color: var(--sumi);
  box-shadow: var(--field-glow, none);
  transition: box-shadow 500ms var(--ease), color 400ms var(--ease);
}
/* Point ocre qui apparaît à gauche du label au focus */
.book__field label::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--kin);
  vertical-align: middle;
  margin-right: 10px;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.book__field:focus-within label::before {
  opacity: 1;
  transform: scale(1);
}
.book__field--full { grid-column: 1 / -1; }

/* Bloc CTA + réassurance                                                    */
.book__submit-block {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: 56px;
  row-gap: 24px;
  align-items: start;
}

/* CTA — bouton éditorial : libellé + filet ocre + flèche fine */
.book__cta {
  background: var(--sumi);
  color: var(--kinu);
  border: 0;
  cursor: pointer;
  padding: 22px 32px;
  display: inline-grid;
  grid-template-columns: auto 56px auto;
  align-items: center;
  gap: 20px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color 600ms var(--ease),
              letter-spacing 600ms var(--ease),
              transform 600ms var(--ease);
}
/* Fond ocre qui monte du bas — courbe en S plus douce */
.book__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kin);
  transform: translateY(101%);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.book__cta > * { position: relative; z-index: 1; }
.book__cta__label {
  line-height: 1;
  transition: transform 600ms var(--ease);
}
.book__cta__line {
  display: block;
  height: 1px;
  background: rgba(244,239,231,0.45);
  position: relative;
  overflow: hidden;
  transition: background 500ms var(--ease);
}
.book__cta__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kinu);
  transform: translateX(-100%);
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.book__cta__arrow {
  width: 22px; height: 1px;
  background: currentColor;
  position: relative;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.book__cta__arrow::before,
.book__cta__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  width: 8px; height: 1px;
  background: currentColor;
}
.book__cta__arrow::before { transform: rotate(35deg); top: -3px; }
.book__cta__arrow::after  { transform: rotate(-35deg); top: 3px; }

/* Hover — un ensemble raffiné, pas d'à-coups */
.book__cta:hover                          { letter-spacing: 0.26em; }
.book__cta:hover::before                  { transform: translateY(0); }
.book__cta:hover .book__cta__arrow        { transform: translateX(10px); }
.book__cta:hover .book__cta__label        { transform: translateX(-2px); }
.book__cta:hover .book__cta__line::after  { transform: translateX(0); }
.book__cta:active                         { transform: scale(0.985); transition-duration: 120ms; }
.book__cta:focus-visible                  { outline: 2px solid var(--kin); outline-offset: 3px; }

/* Réassurance — deux points discrets */
.book__reassure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sumi);
}
.book__reassure li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  align-items: center;
}
.book__reassure__dot {
  width: 6px;
  height: 6px;
  background: var(--kin);
  border-radius: 50%;
  justify-self: start;
  margin-left: 3px;
}

/* Petites conditions */
.book__terms {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 11px;
  color: var(--hai);
  line-height: 1.7;
  max-width: 60ch;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Colonne aside — Venir à Chenzu, plus éditoriale
   -------------------------------------------------------------------------- */
.book__aside {
  border-left: 1px solid var(--sumi-12);
  padding-left: 56px;
  display: flex;
  flex-direction: column;
}
.book__aside__eyebrow {
  color: var(--hai);
  margin-bottom: 24px;
}
.book__aside__title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(28px, 2.4vw, 36px);
  color: var(--sumi);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.book__aside__intro {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hai);
  margin-bottom: 40px;
  max-width: 32ch;
}
.book__aside__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 40px;
  border-top: 1px solid var(--sumi-12);
}
.book__aside__list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--sumi-12);
}
.book__aside__list li > span:first-child {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hai);
  padding-top: 4px;
}
.book__aside__list li > span:last-child {
  font-family: var(--font-title);
  font-size: 15px;
  line-height: 1.45;
  color: var(--sumi);
}
.book__aside__list a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--sumi-12); transition: border-color 300ms var(--ease); }
.book__aside__list a:hover { border-color: var(--kin); }

.book__map {
  aspect-ratio: 4 / 3;
  background: var(--hinoki);
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.book__map svg { width: 100%; height: 100%; display: block; }
.book__aside__cta { align-self: flex-start; margin-top: 6px; }

/* ==========================================================================
   18. Pied de page — nom géant Marcellus, coupé par le bas
   ========================================================================== */
.foot {
  background: var(--sumi);
  color: var(--kinu);
  position: relative;
  padding: 96px var(--page-pad) 0;
  min-height: 46svh;
  overflow: hidden;
}
.foot__top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 64px;                     /* respire davantage */
  row-gap: 32px;
  padding-bottom: 88px;
}
.foot__col h4 {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244,239,231,0.5);
  margin-bottom: 10px;                  /* resserré */
}
.foot__col p {
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--kinu);
  line-height: 1.55;
}
/* Liens : soulignement fin qui se dessine + léger décalage horizontal */
.foot__col a, .foot__col > .pending-link, .foot__col > .contact-pending {
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--kinu);
  line-height: 1.55;
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
  transition: transform 400ms var(--ease), color 400ms var(--ease);
}
.foot__col a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms var(--ease);
}
.foot__col a:hover { color: var(--kin); transform: translateX(4px); }
.foot__col a:hover::after { transform: scaleX(1); }

/* Classe utilitaire — lien "adresse Google Maps" qui doit rester
   visuellement identique à du texte simple (même typo, même couleur,
   pas de soulignement ni de translate au hover). Seule différence :
   un léger fondu au survol pour signaler l'interactivité. */
a.addr-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
  display: inline;
  padding: 0;
  margin: 0;
  transform: none;
  transition: opacity 260ms var(--ease), color 260ms var(--ease);
}
a.addr-link::after,
a.addr-link::before { content: none !important; display: none !important; }
a.addr-link:hover,
a.addr-link:focus-visible {
  color: inherit;
  transform: none;
  opacity: 0.72;
}
a.addr-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
  opacity: 1;
}

/* ============================================================
   Traduction japonaise — quand body[data-lang="ja"], on ajoute
   Noto Sans/Serif JP en fallback aux polices existantes pour
   que les caractères japonais s'affichent correctement.
   Aucun impact sur FR / EN qui utilisent Karla + Marcellus.
   ============================================================ */
body[data-lang="ja"] {
  font-family: "Karla", "Noto Sans JP", sans-serif;
}
body[data-lang="ja"] h1,
body[data-lang="ja"] h2,
body[data-lang="ja"] h3,
body[data-lang="ja"] .t-h2,
body[data-lang="ja"] .t-display,
body[data-lang="ja"] .t-title,
body[data-lang="ja"] .t-dishname,
body[data-lang="ja"] cite,
body[data-lang="ja"] blockquote {
  font-family: "Marcellus", "Noto Serif JP", serif;
}

/* Bloc "Joindre" (3ᵉ colonne) — téléphone + email empilés verticalement
   avec un petit espacement propre. Ne touche pas aux autres colonnes. */
.foot__top .foot__col:nth-child(3) :is(a, .contact-pending) {
  display: block;
  margin-top: 6px;
}
.foot__top .foot__col:nth-child(3) h4 + :is(a, .contact-pending) { margin-top: 0; }

/* Bloc "Suivre" (4ᵉ colonne) — 3 liens côte à côte avec un espacement
   horizontal élégant. Reste stack sur mobile puisque le col rétrécit. */
.foot__top .foot__col:nth-child(4) :is(a, .pending-link) + :is(a, .pending-link) { margin-left: 24px; }

/* Filet fin qui structure la partie légale */
.foot__eyebrow {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244,239,231,0.55);
  padding-bottom: 8px;
}
.foot__eyebrow__dot {
  width: 3px;
  height: 3px;
  background: var(--kin);
  border-radius: 50%;
  display: inline-block;
}

.foot__brand {
  font-family: var(--font-title);
  font-size: clamp(96px, 18vw, 220px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--kinu);
  padding-top: 20px;
  transform: translateY(6%);            /* remonté : bas du mot juste au-dessus du filet */
  margin-bottom: 84px;                  /* réserve l'espace du bloc légal — plus d'empiètement */
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.foot__legal {
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(244,239,231,0.14); /* filet fin de clôture */
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(244,239,231,0.5);
  text-transform: uppercase;
  z-index: 3;
}
.foot__legal a {
  color: inherit;
  position: relative;
  padding-bottom: 2px;
  transition: color 400ms var(--ease);
}
.foot__legal a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms var(--ease);
}
.foot__legal a:hover { color: var(--kin); }
.foot__legal a:hover::after { transform: scaleX(1); }

/* ==========================================================================
   19. Utilitaires internes
   ========================================================================== */
.only-mobile { display: none; }

/* --------------------------------------------------------------------------
   20. Responsive — tablette et mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  :root {
    --page-pad: 40px;
    --grid-gap: 20px;
    --sp-9: 140px;
    --sp-8: 96px;
  }
  .nav__list { display: none; }
  .nav__list--tablet { display: flex; gap: 28px; }
  .hero__meta { display: none; }
  .hero__body { grid-template-columns: 1fr; gap: 32px; padding-bottom: 60px; }
  .house__grid { grid-template-columns: 1fr; gap: 48px; padding: 0 var(--page-pad); }
  .house__media { padding-left: 0; }
  .house__text { padding-top: 20px; }
  .menu-mo__head { grid-template-columns: 1fr; }
  .menu-mo__panel { flex-basis: 80vw; grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
  .menu-mo__panel .photo { aspect-ratio: 4/5; height: auto; max-height: none; }
  .book { grid-template-columns: 1fr; gap: 48px; }
  .book__aside { border-left: 0; border-top: 1px solid var(--sumi-12); padding-left: 0; padding-top: 40px; }
  .private__head, .private__constellation { grid-column: 1 / -1; }
  .private__inner { row-gap: 64px; }
  .private__constellation { grid-template-columns: 1fr 1fr 1fr; padding-top: 40px; }
  .private__stat--2 { transform: translateY(-24px); }
  .private__stat--3 { transform: translateY(16px); }
  .room__a, .room__b, .room__text { grid-column: 1 / -1; }
  .room__b { margin-top: 24px; align-self: auto; }
  .room__text { padding-top: 24px; }
  /* Room v3 — tablette : texte plein largeur au-dessus, images en dessous */
  .room--v3 .room__grid { grid-template-columns: 1fr; row-gap: 64px; padding-right: var(--page-pad); }
  .room--v3 .room__text { max-width: 100%; padding-top: 0; }
  .room--v3 .room__media { padding-right: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .room--v3 .room__media__main { max-height: 62vh; }
  .room--v3 .room__media__a { margin-top: 32px; max-height: 24vh; }
  .room--v3 .room__media__b { margin-top: 48px; max-height: 22vh; }
}

@media (max-width: 767px) {
  :root {
    --page-pad: 24px;
    --grid-gap: 16px;
    --sp-9: 120px;
    --sp-8: 80px;
    --sp-7: 56px;
  }
  html { scroll-padding-top: 64px; }
  body { padding-bottom: 64px; }  /* place pour la barre de résa       */

  .only-desktop { display: none !important; }
  .only-mobile  { display: revert; }
  .only-mobile.mobile-book-bar { display: flex; }
  .only-mobile.nav__toggle { display: block; }
  /* Le menu plein écran n'existe qu'ici — comportement mobile inchangé. */
  .mobile-menu { display: flex; }

  .nav { padding: 16px 24px; }
  .nav__list--tablet { display: none; }
  .nav__toggle { display: block; }
  .nav__right .nav__cta { display: none; }
  .nav__lang { display: none; }

  .mobile-book-bar { display: flex; }

  /* Hero */
  .hero { min-height: 85svh; }
  .hero__inner { padding-top: 72px; }
  .hero__body { padding: 0 24px 40px; }
  .hero__title { max-width: 100%; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__scroll { display: none; }

  /* Manifeste */
  .manifesto { padding: 100px 24px; min-height: 45svh; text-align: left; }
  .manifesto__inner { max-width: 100%; }
  .manifesto p { font-size: 26px; text-align: left; }
  .manifesto .rule { margin-left: 0; }

  /* Maison */
  .house { padding: 60px 0 100px; }
  .house__caption { text-align: left; padding: 0 24px; }
  .house__photo { aspect-ratio: 4/5; max-height: 78vh; }
  .house__text { padding: 0 24px; }
  .house__quote { font-size: 18px; }

  /* Menu horizontal → empilé */
  .menu-mo { padding: 100px 0 60px; }
  .menu-mo__head { padding: 0 24px 40px; }
  .menu-mo__meta { flex-direction: column; gap: 16px; }
  .menu-mo__stage { padding-bottom: 40px; }
  .menu-mo__track {
    flex-direction: column;
    padding: 0 24px;
    gap: 60px;
    transform: none !important;   /* on abandonne le scroll piloté */
  }
  .menu-mo__panel { flex-basis: auto; min-height: auto; padding: 0; grid-template-columns: 1fr; }
  .menu-mo__panel .photo { aspect-ratio: 4/5; }
  .menu-mo__big-num { display: none; }
  .menu-mo__foot { padding: 24px 24px 40px; margin-top: 24px; flex-direction: column; gap: 20px; align-items: flex-start; }

  /* Salle */
  .room { padding: 100px 24px; }
  .room__grid { grid-template-columns: 1fr; row-gap: 24px; }
  .room__a { aspect-ratio: 4/5; }
  .room__b { aspect-ratio: 4/5; margin-top: 0; transform: translateX(24px); width: calc(100% - 24px); }
  .room__text { padding-top: 24px; }
  /* Room v3 — mobile : texte, puis 3 images empilées avec léger décalage */
  .room--v3 { padding: 100px 0; }
  .room--v3 .room__grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 40px; padding: 0 24px; }
  .room--v3 .room__text { padding-top: 0; max-width: 100%; }
  .room--v3 .room__facts__num { font-size: 52px; }
  .room--v3 .room__facts__list > div { grid-template-columns: 110px 1fr; gap: 16px; }
  .room--v3 .room__media { grid-template-columns: 1fr; row-gap: 16px; padding-right: 0; }
  .room--v3 .room__media__main { grid-column: 1; grid-row: auto; aspect-ratio: 9/12; max-height: none; align-self: auto; }
  .room--v3 .room__media__a { grid-column: 1; grid-row: auto; margin-top: 0; aspect-ratio: 4/3; max-height: none; transform: translateX(20px); width: calc(100% - 20px); }
  .room--v3 .room__media__b { grid-column: 1; grid-row: auto; margin-top: 0; aspect-ratio: 4/3; max-height: none; transform: none; width: 100%; }

  /* Privatisation — mobile : constellation empilée */
  .private { min-height: auto; }
  .private__inner { padding: 100px 24px; row-gap: 56px; }
  .private__head { grid-column: 1 / -1; }
  .private__title { font-size: 36px; margin: 16px 0 20px; }
  .private__lede { font-size: 17px; margin-bottom: 32px; }
  .private__constellation {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    padding-top: 32px;
    min-height: 0;
    row-gap: 32px;
  }
  .private__constellation__line { display: none; }
  .private__stat, .private__stat--1, .private__stat--2, .private__stat--3 {
    transform: none;
    padding: 20px 0;
    padding-left: 20px;
    border-left: 1px solid rgba(244,239,231,0.22);
    gap: 8px;
  }
  .private__stat::after { display: none; }
  .private__stat--1 .private__stat__num { font-size: 72px; }
  .private__stat--2 .private__stat__num { font-size: 58px; }
  .private__stat--3 .private__stat__num { font-size: 48px; }
  .private__stat__hint { opacity: 1; transform: none; margin-top: 6px; }
  .private__bg { inset: 0 0 0 30%; opacity: 0.09; }

  /* Réserver — mobile */
  .book { padding: 100px 24px; }
  .book__step__fields { grid-template-columns: 1fr; gap: 32px; }
  .book__step__head { column-gap: 20px; }
  .book__step__num { font-size: 48px; }
  .book__step__title h3 { font-size: 20px; }
  .book__field input, .book__field select, .book__field textarea { padding: 14px 0; font-size: 16px; }
  .book__submit-block { grid-template-columns: 1fr; row-gap: 20px; }
  .book__cta { width: 100%; justify-content: center; grid-template-columns: auto 40px auto; padding: 20px 24px; }
  .book__aside { padding-top: 32px; }
  .book__aside__list li { grid-template-columns: 80px 1fr; gap: 16px; padding: 14px 0; }
  .book__map { aspect-ratio: 4/3; }

  /* Foot */
  .foot { padding: 60px 24px 0; }
  .foot__top { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 32px; padding-bottom: 56px; }
  .foot__eyebrow { font-size: 10px; letter-spacing: 0.22em; gap: 10px; }
  .foot__brand { font-size: 22vw; transform: translateY(16%); }
  .foot__legal { position: static; padding: 16px 0 24px; flex-direction: column; gap: 8px; text-align: center; border-top: 1px solid rgba(244,239,231,0.14); }
}

/* --------------------------------------------------------------------------
   21. Respect prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mask-reveal::before { transform: scaleY(0); }
  .up { opacity: 1; transform: none; }
  .rule.is-anim { transform: scaleX(1); }
  .private::before { transform: scaleY(0); }
  .hero__title .line > span { transform: none; }
  .cursor { display: none; }
}

/* --------------------------------------------------------------------------
   22. Styles spécifiques pages secondaires (partagé)
   -------------------------------------------------------------------------- */
.page-hero {
  min-height: 60svh;
  padding: 200px var(--page-pad) 96px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  align-items: end;
  border-bottom: 1px solid var(--sumi-12);
}
.page-hero__title { grid-column: 2 / span 7; }
.page-hero__title .rule { margin-bottom: 24px; }
.page-hero__title .t-display { font-size: clamp(48px, 6.4vw, 88px); }
.page-hero__lede { grid-column: 9 / span 4; }
@media (max-width: 1023px) {
  .page-hero { padding: 140px var(--page-pad) 60px; grid-template-columns: 1fr; row-gap: 32px; }
  .page-hero__title, .page-hero__lede { grid-column: auto; }
}
@media (max-width: 767px) {
  .page-hero { padding-top: 120px; }
  .page-hero__title .t-display { font-size: 40px; }
}

/* Carte des menus                                                          */
.menu-page { padding: var(--sp-9) var(--page-pad); }
.menu-page__intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  margin-bottom: 80px;
}
.menu-page__intro .t-h2 { grid-column: 2 / span 6; }
.menu-page__intro .info {
  grid-column: 9 / span 4;
  border-top: 1px solid var(--sumi-12);
  padding-top: 24px;
}
.menu-page__intro .info dl { display: grid; grid-template-columns: 1fr auto; row-gap: 12px; font-size: 14px; }
.menu-page__intro .info dt { color: var(--hai); letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; font-weight: 500; }
.menu-page__intro .info dd { font-family: var(--font-title); font-size: 17px; color: var(--sumi); }

.menu-course {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  padding: 60px 0;
  border-top: 1px solid var(--sumi-12);
  align-items: start;
}
.menu-course:last-child { border-bottom: 1px solid var(--sumi-12); }
.menu-course__label { grid-column: 2 / span 2; padding-top: 6px; }
.menu-course__label small {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hai);
  display: block;
  margin-bottom: 6px;
}
.menu-course__label b {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 20px;
  color: var(--sumi);
  display: block;
}
.menu-course__list { grid-column: 5 / span 7; display: flex; flex-direction: column; gap: 40px; }
.menu-dish { display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: baseline; }
.menu-dish__name { }
.menu-dish__desc { grid-column: 1 / -1; color: var(--hai); font-size: 14px; line-height: 1.6; max-width: 60ch; }
.menu-dish__price { font-family: var(--font-title); font-size: 20px; color: var(--sumi); }

@media (max-width: 1023px) {
  .menu-page__intro { grid-template-columns: 1fr; row-gap: 32px; }
  .menu-page__intro .t-h2, .menu-page__intro .info { grid-column: auto; }
  .menu-course { grid-template-columns: 1fr; row-gap: 24px; padding: 40px 0; }
  .menu-course__label, .menu-course__list { grid-column: auto; }
}

/* Shared desktop footer — same dimensions as the Contact reference. */
@media (min-width:1100px) {
 .foot { min-height:0; padding:21px 6.42265vw 0; }
 .foot__top { padding-bottom:0; }
 .foot__col h4 { font-size:10px; margin-bottom:6px; }
 .foot__col p,.foot__col a, .foot__col > .pending-link, .foot__col > .contact-pending { font-size:13px; line-height:17px; }
 .foot__brand { font-family:Georgia,serif; font-size:68px; line-height:1; letter-spacing:-.045em; padding:0; transform:none; margin:0; }
 .foot__legal { position:static; padding:9px 0 14px; font-size:10px; }
}

/* Audit: keep hidden navigation out of keyboard focus, including on tablets. */
.mobile-menu { visibility:hidden; }
.is-menu-open .mobile-menu { visibility:visible; }
.is-menu-open :is(.cc-btn,.cc-panel) { visibility:hidden; pointer-events:none; }
@media (max-width:1099px) {
  .nav .nav__list, .nav .nav__list--tablet { display:none !important; }
  .nav__toggle.only-mobile { display:block; }
  .nav__right > .nav__lang { display:none; }
  .mobile-menu { display:flex; overflow-y:auto; overscroll-behavior:contain;
    padding-top:96px; padding-bottom:max(32px,env(safe-area-inset-bottom)); gap:32px; }
  .mobile-menu__foot { flex-shrink:0; gap:16px; }
  .mobile-menu__foot .nav__lang { display:block; white-space:nowrap; }
}
@media (max-width:767px) {
  body:not(:has(.mobile-book-bar)) { padding-bottom:0; }
  .cursor { display:none; }
}
/* Clip only the intentional horizontal overscan; do not create a scroll container. */
.menu-mo { overflow-x:clip; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }