/* ==========================================================================
   LOST LEVEL — système graphique
   Ivoire technique / charbon / acide / orange brûlé / gris-vert LCD
   Archivo (axe de largeur 62–125) · IBM Plex Mono · DSEG7 (afficheur)
   ========================================================================== */

@font-face {
  font-family: "DSEG7";
  src: url("https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ivory: #E9E4D8;
  --ivory-2: #DCD6C8;      /* face ombrée, fonds secondaires */
  --ivory-3: #C9C2B2;
  --ink: #24241F;
  --ink-2: #33332D;
  --acid: #D6FF38;
  --orange: #FF5A33;       /* toujours en aplat, jamais en dégradé ; texte charbon dessus (5:1) */
  --lcd: #82928A;

  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-lcd: "DSEG7", var(--f-mono);

  /* échelle — volontairement courte : 4 tailles d'affichage, 2 de lecture, 1 mono, 3 d'afficheur */
  --t-xl: clamp(3.4rem, 9vw, 9.5rem);    /* titres de niveau */
  --t-l: clamp(2.2rem, 3.6vw, 3.8rem);   /* noms de salles, accroches */
  --t-m: clamp(1.5rem, 2.1vw, 2.1rem);   /* gros texte de panneau */
  --t-lead: 1.25rem;                     /* chapeau */
  --t-body: 1.0625rem;                   /* lecture */
  --t-ui: .8125rem;                      /* boutons, navigation */
  --t-mono: .6875rem;                    /* repères techniques, une seule taille */
  --lcd-s: 14px; --lcd-m: 22px; --lcd-l: 40px;

  --bar-h: 64px;
  --rail: 0px;
  --gut: clamp(16px, 2.2vw, 32px);
  --hair: 1px solid var(--ink);

  --ease-mech: cubic-bezier(.7, 0, .2, 1);    /* départ sec, arrêt amorti */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-fast: .18s;
  --t-mid: .45s;
  --t-slow: .9s;
}

@media (min-width: 1200px) { :root { --rail: 64px; } }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background-color: var(--ivory);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: var(--t-body);
  line-height: 1.5;
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }

a { color: inherit; }
p, h1, h2, h3, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
address { font-style: normal; }

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.35;
  text-transform: uppercase;
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 8px; top: 8px; z-index: 100;
  padding: 12px 16px; background: var(--acid); color: var(--ink);
  font-weight: 700; text-decoration: none; border: var(--hair);
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.spirit :focus-visible, .foot :focus-visible, .hero__stage :focus-visible { outline-color: var(--acid); }

/* afficheur à segments : chiffres allumés + segments éteints */
.lcd, .lcd-ghost { font-family: var(--f-lcd); font-weight: 700; font-style: normal; letter-spacing: .04em; }
.lcd-ghost { position: absolute; inset: auto 0 auto auto; opacity: .13; pointer-events: none; }
.lcd-ghost::before { content: attr(data-g); }
.lcd { position: relative; }
.lcd--off { opacity: .45; }
.lcd-win {
  position: relative; display: inline-flex; justify-content: flex-end;
  background: var(--ink); color: var(--orange);
  padding: .35em .45em .3em; line-height: 1;
}

/* --------------------------------------------------------------------------
   Boutons et liens
   -------------------------------------------------------------------------- */
.btn {
  --h: 48px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: stretch;
  min-height: var(--h);
  border: var(--hair);
  background: transparent; color: var(--ink);
  font-family: var(--f-display); font-weight: 800; font-stretch: 100%;
  font-size: var(--t-ui); letter-spacing: .07em; line-height: 1.1; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  overflow: hidden;
}
.btn > span:last-child { display: flex; align-items: center; padding: .7em 1.15em; }
.btn__icon {
  display: grid; place-items: center; flex: none;
  width: var(--h); border-right: var(--hair);
  font-size: 1.15em; font-weight: 600;
  transition: background-color var(--t-fast), color var(--t-fast);
}
/* panneau qui coulisse sous le libellé */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease-mech);
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover { color: var(--acid); }
.btn:hover .btn__icon { border-color: var(--acid); }
.btn--acid { background: var(--acid); }
.btn--line:hover { color: var(--ivory); }
.btn--line:hover .btn__icon { border-color: var(--ivory); }
.btn--ink { background: var(--ink); color: var(--acid); }
.btn--ink .btn__icon { border-color: var(--acid); }
.btn--ink::before { background: var(--ivory); }
.btn--ink:hover { color: var(--ink); }
.btn--ink:hover .btn__icon { border-color: var(--ink); }
.btn--lg { --h: 56px; }
.btn--xl { --h: 84px; font-size: var(--t-body); }
.btn--xl .btn__icon { font-size: 1.6em; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; font-size: var(--t-ui); letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size var(--t-mid) var(--ease-mech);
}
.link-arrow [aria-hidden] { display: inline-block; transition: transform var(--t-mid) var(--ease-mech); }
.link-arrow:hover { background-size: 0 1px; background-position: right bottom; }
.link-arrow:hover [aria-hidden] { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  /* deux côtés égaux : le menu tombe au centre exact de la barre */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  height: var(--bar-h);
  background: var(--ivory);
  border-bottom: var(--hair);
}
.bar__logo {
  justify-self: start; align-self: stretch;
  display: flex; align-items: center;
  padding: 0 18px;
  text-decoration: none;
}
.bar__nav ul { display: flex; height: 100%; border-left: var(--hair); }
.bar__nav li { display: flex; }
.bar__nav a {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 0 clamp(14px, 1.6vw, 26px);
  border-right: var(--hair);
  font-weight: 800; font-size: var(--t-ui); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
}
/* numéros de niveau : sur la jauge (ordinateur) ou dans le menu mobile, pas dans la barre */
.bar__nav a .mono { display: none; }
.bar__out { font-weight: 600; }
.bar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease-mech);
}
.bar__nav a:hover::after, .bar__nav a[aria-current="true"]::after { transform: scaleX(1); }
.bar__cta { justify-self: end; height: 100%; border: 0; border-left: var(--hair); --h: calc(var(--bar-h) - 1px); }
.bar__menu { display: none; }

/* à l'accueil, la barre ne montre que le menu ; le logo et Réserver s'y rangent ensuite */
.bar__logo > *, .bar__cta { transition: transform var(--t-mid) var(--ease-mech), visibility 0s; }
.js .bar:not(.is-docked) .bar__logo { visibility: hidden; transition: visibility 0s linear var(--t-mid); }
.js .bar:not(.is-docked) .bar__logo > * { transform: translateY(-140%); }
.js .bar:not(.is-docked) .bar__cta { transform: translateY(-101%); visibility: hidden; transition: transform var(--t-mid) var(--ease-mech), visibility 0s linear var(--t-mid); }

@media (max-width: 1100px) {
  .bar__nav a { padding: 0 12px; }
}
@media (max-width: 899px) {
  :root { --bar-h: 56px; }
  .bar { grid-template-columns: auto 1fr auto; }
  .bar__logo { border-right: 0; }
  /* mobile : la barre de réservation du bas fait ce travail */
  .bar__cta { display: none; }
  .bar__menu {
    grid-column: 3;
    display: grid; place-items: center;
    width: var(--bar-h); height: 100%;
    background: transparent; border: 0; border-left: var(--hair); cursor: pointer;
  }
  .bar__menu-lines, .bar__menu-lines::before, .bar__menu-lines::after {
    display: block; width: 22px; height: 2px; background: var(--ink);
    transition: transform var(--t-mid) var(--ease-mech), opacity var(--t-fast);
  }
  .bar__menu-lines { position: relative; }
  .bar__menu-lines::before, .bar__menu-lines::after { content: ""; position: absolute; left: 0; }
  .bar__menu-lines::before { top: -7px; }
  .bar__menu-lines::after { top: 7px; }
  .bar__menu[aria-expanded="true"] .bar__menu-lines { background: transparent; }
  .bar__menu[aria-expanded="true"] .bar__menu-lines::before { transform: translateY(7px) rotate(45deg); }
  .bar__menu[aria-expanded="true"] .bar__menu-lines::after { transform: translateY(-7px) rotate(-45deg); }

  .bar__nav {
    position: fixed; left: 0; right: 0; top: var(--bar-h);
    background: var(--ivory); border-bottom: var(--hair);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path var(--t-mid) var(--ease-mech), visibility 0s linear var(--t-mid);
  }
  .bar__nav.is-open {
    clip-path: inset(0 0 -100vh 0); visibility: visible;
    box-shadow: 0 0 0 100vmax rgba(36, 36, 31, .45);
    transition: clip-path var(--t-mid) var(--ease-mech);
  }
  .bar__nav ul { flex-direction: column; height: auto; }
  .bar__nav a {
    flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 14px; width: 100%;
    padding: 18px var(--gut); border-right: 0; border-top: var(--hair);
    font-size: var(--t-m); font-stretch: 62%; font-weight: 900;
  }
  .bar__nav ul { border-left: 0; }
  .bar__nav a .mono { display: inline-block; min-width: 3.2ch; }
  .bar__out { display: none; }
  .bar__nav li { display: block; }
  .bar__nav a::after { display: none; }
  /* sans JS : la navigation reste dépliée sous la barre, qui n'est plus collante */
  .no-js .bar { position: relative; height: auto; grid-template-rows: var(--bar-h) auto; }
  .no-js .bar__menu { display: none; }
  .no-js .bar__nav { position: static; grid-row: 2; grid-column: 1 / -1; clip-path: none; visibility: visible; border-bottom: 0; }
  .no-js .bar__nav a { font-size: var(--t-body); padding: 12px var(--gut); }
}

/* --------------------------------------------------------------------------
   Jauge de niveau (rail gauche, écrans larges)
   -------------------------------------------------------------------------- */
.gauge { display: none; }
@media (min-width: 1200px) {
  main, .foot { margin-left: var(--rail); }
  .gauge {
    position: fixed; z-index: 40; left: 0; top: var(--bar-h); bottom: 0;
    width: var(--rail);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 18px 0;
    background: var(--ivory); border-right: var(--hair);
  }
  .gauge__label { font-size: var(--t-mono); }
  .gauge__lcd {
    position: relative; font-size: var(--lcd-s);
    background: var(--ink); color: var(--orange); padding: 7px 5px 6px; line-height: 1;
  }
  .gauge__lcd .lcd-ghost { right: 5px; }
  .gauge ol { display: flex; flex-direction: column; gap: 0; margin-top: 18px; }
  .gauge a {
    display: grid; grid-template-columns: 14px auto; align-items: center; gap: 6px;
    padding: 9px 4px; text-decoration: none;
    font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 500;
    color: color-mix(in srgb, var(--ink) 72%, transparent);
  }
  .gauge a i {
    display: block; width: 14px; height: 14px; border: var(--hair);
    transition: background-color var(--t-mid) var(--ease-mech), transform var(--t-mid) var(--ease-mech);
  }
  .gauge a:hover { color: var(--ink); }
  .gauge a:hover i { background: var(--ivory-3); }
  .gauge a[aria-current="true"] { color: var(--ink); font-weight: 600; }
  .gauge a[aria-current="true"] i { background: var(--acid); transform: rotate(45deg) scale(.8); }
  /* tableau de bord : le niveau en haut, le temps en bas */
  .gauge__chrono { margin-top: auto; display: grid; justify-items: center; gap: 6px; }
  .gauge__chrono .chrono { font-size: var(--lcd-s); padding: 5px 4px 4px; }
  .gauge__chrono .lcd-ghost { right: 4px; top: 5px; }
}

/* --------------------------------------------------------------------------
   NIV. 00 — Accueil
   -------------------------------------------------------------------------- */
.hero { position: relative; border-bottom: var(--hair); }
/* l'aplat noir porte le logo : centré, avec de l'air autour */
.hero__stage { background: var(--ink); color: var(--ivory); }
.hero__tag {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px var(--gut); color: var(--lcd);
}
.hero__tag span:first-child { padding-left: 10px; border-left: 4px solid var(--orange); }
.hero__stage { position: relative; }
.hero__brand {
  display: grid; justify-content: center; justify-items: stretch; row-gap: clamp(20px, 3.4vh, 36px);
  padding: clamp(80px, 18vh, 220px) var(--gut) clamp(96px, 20vh, 248px);
  container-type: inline-size; overflow: hidden;
}
/* sous le logo, à sa largeur exacte : ESCAPE GAME — ANGERS (le titre de la page) */
.hero__cote {
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px);
  color: var(--ivory);
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 3.2rem); line-height: 1; letter-spacing: .01em;
}
.hero__cote > span { white-space: nowrap; }
.hero__sep { color: var(--orange); }
.hero__cote i { position: relative; flex: 1; min-width: 24px; height: 1px; background: var(--lcd); }
.hero__cote i::before { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--lcd); }
.hero__cote i:first-child::before { left: 0; }
.hero__cote i:last-child::before { right: 0; }
/* dans un coin, en petit */
.hero__where { position: absolute; right: var(--gut); bottom: 16px; color: var(--lcd); }

.hero__hint { display: none; }

/* entrée dans la porte (main.js ajoute .is-zoom) : le cadre reste collé pendant le défilement */
.hero.is-zoom { height: calc(100svh - var(--bar-h) + 140svh); border-bottom: 0; }
.hero.is-zoom .hero__pin { position: sticky; top: var(--bar-h); height: calc(100svh - var(--bar-h)); overflow: hidden; background: var(--ink); }
.hero.is-zoom .hero__stage { position: absolute; inset: 0; display: grid; align-content: center; overflow: hidden; }
.hero.is-zoom .hero__tag { position: absolute; top: 0; left: 0; right: 0; z-index: 3; }
.hero.is-zoom .hero__brand { padding-top: 56px; padding-bottom: calc(var(--keys-h, 170px) + 56px); }
.hero.is-zoom .hero__where { z-index: 3; bottom: calc(var(--keys-h, 170px) + 16px); }
.hero.is-zoom .hero__hint {
  position: absolute; left: 50%; bottom: calc(var(--keys-h, 170px) + 14px); z-index: 3;
  display: flex; align-items: center; gap: 8px; translate: -50% 0;
  color: var(--ivory);
}
.hero.is-zoom .hero__hint i { font-style: normal; color: var(--orange); }
.hero.is-zoom .hero__main { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-top: var(--hair); }
/* passé la porte : lettres et vantail masqués ; le H1 (.hero__cote) est déjà à opacité 0 et reste lisible par les lecteurs d'écran */
.hero.is-through .lockup__w, .hero.is-through .lockup__leaf { visibility: hidden; }

/* dessous : les deux actions, en touches */
.hero__main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* touches : de grands blocs cliquables ; au survol un volet charbon monte, comme une touche enfoncée */
.key {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; gap: 14px;
  min-height: 100%; padding: 20px clamp(18px, 2vw, 28px) 22px;
  border-left: var(--hair);
  color: var(--ink); text-decoration: none;
}
.key--go { background-color: var(--acid); }
.key--see { background-color: var(--ivory); }
.hero__main .key:first-child { border-left: 0; }
.key::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t-mid) var(--ease-mech);
}
.key:hover::before, .key:focus-visible::before { transform: scaleY(1); }
.key:hover, .key:focus-visible { color: var(--ivory); }
.key--go:hover, .key--go:focus-visible { color: var(--acid); }
.key:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.key--go:focus-visible { outline-color: var(--acid); }
.key__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.key__arrow {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid currentColor; font-size: 1.15rem;
  transition: transform var(--t-mid) var(--ease-mech);
}
.key--go:hover .key__arrow { transform: translate(4px, -4px); }
.key--see:hover .key__arrow { transform: translateY(5px); }
.key__label {
  align-self: end;
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(1.9rem, 2.7vw, 3rem); line-height: .88; letter-spacing: -.004em;
}
/* deux lignes réservées : les titres des deux touches restent alignés */
.key__note { opacity: .8; min-height: calc(2 * 1.35em); }

/* textes justifiés par la taille (main.js) : mesurés sur leur largeur réelle */
[data-fit] { width: max-content; max-width: none; }

/* --------------------------------------------------------------------------
   Logo LOST [porte] LEVEL — un seul composant : en-tête, accueil, pied de page.
   La porte a la hauteur des capitales ; son vantail prend la couleur des lettres.
   -------------------------------------------------------------------------- */
.lockup {
  --knob: var(--ivory);
  display: inline-flex; align-items: baseline; gap: .07em;
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  line-height: .78; letter-spacing: -.012em; white-space: nowrap;
}
.lockup__w { display: inline-block; }
.lockup__door {
  position: relative; flex: none; display: inline-block;
  width: .34em; height: .69em;
  background: var(--orange);
  outline: 1px solid currentColor; outline-offset: .04em;
}
.lockup__leaf {
  position: absolute; inset: 0; background: currentColor;
  transform-origin: left center;
  transition: transform 1s var(--ease-mech);
}
.lockup__leaf::after {
  content: ""; position: absolute; right: 14%; top: 50%; width: 9%; aspect-ratio: 1;
  border-radius: 50%; background: var(--knob);
}
.lockup.is-open .lockup__leaf, .no-js .lockup__leaf { transform: scaleX(.16) skewY(-12deg); }
.lockup--hero { --knob: var(--ink); font-size: min(calc(100cqi * .84 / 4.55), 36svh); } /* ≈ taille calée : pas de saut au chargement */
/* accueil : derrière la porte, le couloir (tools/tunnel.mjs) ; le vantail pivote en perspective */
.lockup--hero .lockup__door { perspective: 1.3em; }
.tunnel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tunnel line { stroke-width: var(--lw, 1.2); vector-effect: non-scaling-stroke; }
.tunnel text { font-family: var(--f-mono); font-weight: 600; letter-spacing: .02em; }
.lockup--hero .lockup__leaf {
  transform-origin: 0 50%; backface-visibility: hidden;
  transition: transform 1.5s cubic-bezier(.55, 0, .15, 1), background-color 1.5s;
}
.lockup--hero.is-open .lockup__leaf, .no-js .lockup--hero .lockup__leaf { transform: rotateY(-74deg); background-color: var(--ivory-3); }
.lockup--mini { font-size: 22px; gap: 2px; }
.lockup--mini .lockup__door { width: .3em; outline: 0; }

/* dessins isométriques — trait commun */
.iso { width: 100%; height: auto; overflow: visible; }
.iso polygon, .iso polyline, .iso line, .iso circle {
  stroke: var(--ink); stroke-width: 1.15; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.iso .f-t { fill: var(--ivory); }
.iso .f-l { fill: var(--ivory-2); }
.iso .f-r { fill: var(--ivory-3); }
.iso .f-rust { fill: var(--orange); }
.iso .f-rust-dk { fill: var(--ink); }
.iso .f-ink { fill: var(--ink); }
.iso .door { fill: var(--orange); }
.iso .door--glow { fill: var(--orange); }
.iso .door--dark { fill: var(--ink); }
.iso .door--void { fill: var(--orange); }
.iso .c { fill: none; stroke: var(--ivory); opacity: .5; }
.iso .c.dash { stroke-dasharray: 3 4; opacity: .7; }
.iso .c.ground { stroke: var(--lcd); opacity: .6; }
.iso .c.axis { stroke: var(--orange); stroke-dasharray: 2 6; opacity: .9; }
.iso .c.handle { stroke: var(--orange); stroke-width: 4; opacity: 1; }
.iso .c.keyhole { fill: var(--ink); stroke: none; opacity: 1; }

@media (max-width: 899px) {
  .key { min-height: 168px; }
}
@media (max-width: 699px) {
  .hero__tag > span:last-child { display: none; }
  .hero__brand { justify-content: start; padding: 72px var(--gut) 40px; }
  /* mobile : LOST [porte] / LEVEL — une grille : la porte reste à droite de LOST */
  .lockup--hero {
    --nofit: 1; width: auto;
    display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline;
    column-gap: .07em; row-gap: .05em;
    font-size: calc((100vw - 2 * var(--gut)) / 2.4);
  }
  .lockup--hero .lockup__w--b { grid-column: 1 / -1; }
  .hero__cote { font-size: 1.5rem; }
  .hero__where { position: static; padding: 0 var(--gut) 40px; }
  .hero.is-zoom .hero__where { position: absolute; left: var(--gut); right: auto; padding: 0; }
  .hero.is-zoom .hero__hint { left: auto; right: var(--gut); translate: none; }
  .key { min-height: 150px; padding: 16px 14px 18px; }
  .key__label { font-size: 1.6rem; }
  .key__arrow { width: 34px; height: 34px; }
}

/* --------------------------------------------------------------------------
   Titres de section
   -------------------------------------------------------------------------- */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  border-bottom: var(--hair);
}
:root { --head-pad: clamp(32px, 4vw, 60px); } /* air au-dessus et au-dessous des titres de section */
.sec-head__title {
  padding: var(--head-pad) var(--gut);
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: var(--t-xl); line-height: .82; letter-spacing: -.008em;
}
.sec-head__note {
  align-self: stretch; display: flex; align-items: flex-end;
  padding: 18px var(--gut) var(--head-pad); border-left: var(--hair); font-size: var(--t-mono);
}
.sec-head__ctrl { display: flex; align-self: stretch; border-left: var(--hair); }
.arrow {
  display: grid; place-items: center; width: clamp(56px, 6vw, 88px);
  background: transparent; border: 0; border-left: var(--hair); cursor: pointer;
  font-size: 1.6rem;
  transition: background-color var(--t-fast);
}
.arrow:first-child { border-left: 0; }
.arrow--acid { background: var(--acid); }
.arrow:hover { background: var(--ink); color: var(--acid); }
.arrow:disabled { opacity: .3; cursor: default; background: transparent; color: var(--ink); }
.sec-head__ctrl.is-static { display: none; }

@media (max-width: 899px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .sec-head__note { grid-column: 1 / -1; border-left: 0; border-top: var(--hair); padding: 12px var(--gut); }
  .sec-head__ctrl { grid-column: 1 / -1; border-left: 0; border-top: var(--hair); justify-content: flex-end; }
  .arrow { height: 52px; border-left: var(--hair); }
  .arrow:first-child { border-left: var(--hair); }
}

/* --------------------------------------------------------------------------
   NIV. −01 — Les salles
   -------------------------------------------------------------------------- */
.rooms__rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2px) / 3);
  gap: 1px; background: var(--ink);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-bottom: var(--hair);
}
.rooms__rail::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) { .rooms__rail { grid-auto-columns: 46%; } }
/* mobile : pas de carrousel, les trois salles l'une sous l'autre */
@media (max-width: 699px) {
  .rooms__rail { grid-auto-flow: row; grid-template-columns: 1fr; grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; }
}

.room {
  position: relative;
  display: grid; grid-template-rows: auto auto auto 1fr auto auto;
  background: var(--ivory);
  scroll-snap-align: start;
  min-width: 0;
}
.room__rail {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-bottom: var(--hair); font-size: var(--t-mono);
}
.room__rail span:first-child { font-weight: 600; }
.barcode {
  margin-left: auto; width: 70px; height: 14px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 3px, var(--ink) 3px 5px, transparent 5px 6px, var(--ink) 6px 7px, transparent 7px 10px);
}
.room__head { padding: 18px 18px 14px; display: grid; gap: 10px; align-content: start; }
.room__title {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: var(--t-l); line-height: .84; letter-spacing: -.005em;
}
.room__title a { text-decoration: none; display: block; }
.room__title a > span { display: block; transition: letter-spacing var(--t-mid) var(--ease-mech), transform var(--t-mid) var(--ease-mech); }
.room__title a:hover > span { letter-spacing: .09em; }
.room__title a:hover > span:nth-child(2) { transform: translateX(.18em); }
.room__title a:hover > span:nth-child(3) { transform: translateX(.36em); }
.room__kicker { justify-self: start; font-size: var(--t-mono); font-weight: 600; padding: 3px 7px; background: var(--orange); }

.room__art {
  position: relative;
  margin: 0 18px; aspect-ratio: 704 / 560;
  border: var(--hair);
  overflow: hidden;
  background: var(--ivory-2);
}
.room__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.room__art figcaption {
  position: absolute; left: 0; top: 0; z-index: 1;
  padding: 4px 8px; background: var(--ivory); border-bottom: var(--hair); border-right: var(--hair);
}
/* l'image mène à la page de la salle (même lien que « Voir la salle », caché aux lecteurs d'écran
   et hors tabulation pour ne pas le répéter) ; au survol, une étiquette l'annonce */
.room__artlink { position: absolute; inset: 0; z-index: 3; }
.room__artlink::after {
  content: "Voir la salle ↗"; position: absolute; left: 0; bottom: 0;
  padding: 6px 12px 5px; background: var(--acid); color: var(--ink);
  border-top: var(--hair); border-right: var(--hair);
  font: 800 var(--t-ui)/1.1 var(--f-display); letter-spacing: .07em; text-transform: uppercase;
  opacity: 0; transform: translateY(100%); transition: transform var(--t-mid) var(--ease-mech), opacity .2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .room__art:hover .room__artlink::after { opacity: 1; transform: none; }
}
/* pause : les vidéos bouclent, l'utilisateur doit pouvoir les arrêter */
.vid-toggle {
  position: absolute; right: 0; bottom: 0; z-index: 4;
  min-width: 64px; min-height: 30px; padding: 4px 10px;
  background: var(--ivory); border: 0; border-top: var(--hair); border-left: var(--hair);
  cursor: pointer;
}
.vid-toggle:hover { background: var(--ink); color: var(--acid); }
/* souris : la vidéo s'anime au survol, pas besoin de bouton ; la légende l'indique */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .vid-toggle { display: none; }
  .room__art figcaption::after { content: " · ▶ au survol"; }
  [data-room].is-playing .room__art figcaption::after { content: " · ● lecture"; }
}
/* sans JavaScript : le navigateur affiche ses propres commandes vidéo ; le bouton et « au survol » n'ont plus de sens */
.no-js .vid-toggle { display: none; }
.no-js .room__art figcaption::after { content: none; }

.room__text { padding: 16px 18px 18px; font-size: var(--t-body); line-height: 1.5; }
.room__text strong { font-weight: 800; }
.plate {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--hair);
}
.plate > div { padding: 10px 12px 12px 18px; border-right: var(--hair); display: grid; gap: 4px; align-content: start; }
.plate > div + div { padding-left: 12px; }
.plate > div:last-child { border-right: 0; }
.plate dt { font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase; }
.plate dd { font-weight: 800; font-size: var(--t-body); line-height: 1.1; }
.plate__rec dd {
  position: relative; justify-self: start;
  font-size: var(--lcd-s); font-weight: 700; line-height: 1;
  background: var(--ink); color: var(--orange); padding: 5px 6px 4px;
}
.plate__rec .lcd-ghost { right: 6px; }
/* taux de réussite : une ligne, une jauge à dix segments (un par tranche de 10 %), le pourcentage.
   Accueil (fiches) et pages de salles (bandeau) ; la jauge se remplit en arrivant à l'écran. */
.rate {
  --rate-line: var(--ink); --rate-gap: var(--ivory);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
}
.rate__label { white-space: nowrap; }
.rate__bar { position: relative; height: 12px; border: 1px solid var(--rate-line); }
.rate__bar i {
  position: absolute; inset: 1px auto 1px 1px; width: calc((100% - 2px) * var(--r) / 100);
  background: var(--orange); transform-origin: left center;
  transition: transform 1.1s var(--ease-mech) .45s;
}
.rate__bar::after {
  content: ""; position: absolute; inset: 1px; z-index: 1;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--rate-gap) calc(10% - 2px) 10%);
}
.rate__val { font-weight: 800; font-size: var(--t-body); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.js .rate:not(.is-in) .rate__bar i { transform: scaleX(0); } /* se remplit quand la ligne arrive à l'écran */
.room .rate { border-top: var(--hair); padding: 10px 18px 11px; }
.rhero .rate { --rate-line: rgba(233, 228, 216, .45); --rate-gap: var(--ink); width: 100%; max-width: 560px; color: var(--ivory); }
.rhero .rate__label { color: var(--lcd); }
.room__links { display: flex; align-items: stretch; border-top: var(--hair); }
.room__links .btn { flex: 1; border: 0; border-right: var(--hair); }
.room__links .link-arrow { padding: 0 18px; background: none; }
.room__links .link-arrow:hover { background: var(--ivory-2); }


.rooms__all {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 18px var(--gut);
}
.rooms__all .mono { font-size: var(--t-mono); color: color-mix(in srgb, var(--ink) 75%, transparent); }

@media (max-width: 420px) {
  .plate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate > div:nth-child(2) { border-right: 0; }
  .plate > div:nth-child(n+3) { border-top: var(--hair); }
  .plate > div:nth-child(3) { padding-left: 18px; }
}

/* --------------------------------------------------------------------------
   NIV. −02 — Plus qu'un escape game
   -------------------------------------------------------------------------- */
.spirit {
  --line: rgba(233, 228, 216, .2);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  background: var(--ink); color: var(--ivory);
}
.spirit__head {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
.spirit__title {
  padding: var(--head-pad) var(--gut);
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: var(--t-xl); line-height: .82; letter-spacing: -.008em;
}
.spirit__title .ghost-word { color: transparent; -webkit-text-stroke: 1.5px var(--ivory); }
.spirit__diagram {
  grid-column: 1 / span 5;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: clamp(32px, 5vw, 72px) var(--gut);
  border-right: 1px solid var(--line);
}
.spirit__diagram .iso { max-height: 520px; width: auto; justify-self: center; overflow: visible; }
.spirit__diagram .iso .f-t { fill: var(--ivory); }
.spirit__diagram .iso .f-l { fill: #D3CDBF; }
.spirit__diagram .iso .f-r { fill: #B4AE9F; }
.xp { --t: 0; transform: translate(calc(var(--t) * var(--n) * 30px), calc(var(--t) * var(--n) * 17px)); }
.spirit__callouts { display: grid; gap: 14px; font-size: var(--t-mono); color: var(--lcd); }
.spirit__callouts li { display: flex; gap: 8px; align-items: baseline; }
.spirit__callouts span { color: var(--orange); }
.spirit__diagram figcaption {
  grid-column: 1 / -1; font-size: var(--t-mono); color: var(--lcd);
  padding-top: 10px; border-top: 1px solid var(--line);
}

.spirit__statement {
  grid-column: 6 / -1;
  display: grid; align-content: center; gap: 22px;
  padding: clamp(32px, 5vw, 72px) var(--gut) clamp(32px, 5vw, 72px) clamp(24px, 5vw, 88px);
  max-width: 60rem;
}
.spirit__lead {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: var(--t-l); line-height: .9; letter-spacing: -.005em;
}
.spirit__lead em { font-style: normal; color: var(--acid); }
.spirit__statement p:not(.spirit__lead) { max-width: 52ch; font-size: var(--t-lead); line-height: 1.45; color: #D7D2C6; }
.spirit__statement .link-arrow { justify-self: start; color: var(--acid); }

.spirit__specs {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.spirit__specs li {
  display: grid; gap: 8px; align-content: start;
  padding: 22px var(--gut) 26px;
  border-right: 1px solid var(--line);
}
.spirit__specs li:last-child { border-right: 0; }
.spirit__specs .mono { color: var(--orange); font-size: var(--t-mono); }
.spirit__specs strong { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: var(--t-m); line-height: .95; }
.spirit__specs li > span:last-child { color: #CFCABE; font-size: var(--t-body); line-height: 1.4; }

.spirit__quote {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 40px;
  padding: 26px var(--gut) 30px;
  border-top: 1px solid var(--line);
}
.spirit__quote blockquote p {
  font-weight: 600;
  font-size: var(--t-lead); line-height: 1.4; max-width: 52ch;
}
.spirit__quote figcaption { font-size: var(--t-mono); color: var(--lcd); }

@media (max-width: 1100px) {
  .spirit__diagram { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); }
  .spirit__diagram .iso { max-height: 380px; }
  .spirit__statement { grid-column: 1 / -1; padding-left: var(--gut); }
  .spirit__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spirit__specs li:nth-child(2) { border-right: 0; }
  .spirit__specs li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 699px) {
  .spirit__diagram .iso { max-height: 300px; }
  .spirit__specs { grid-template-columns: 1fr; }
  .spirit__specs li { border-right: 0; border-top: 1px solid var(--line); }
  .spirit__specs li:first-child { border-top: 0; }
  .spirit__quote { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   NIV. −03 — Réservation
   -------------------------------------------------------------------------- */
.book {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  background: var(--acid);
  border-bottom: var(--hair);
}
.book__rail {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 12px var(--gut); border-bottom: var(--hair); font-size: var(--t-mono);
}
.book__rail span:last-child { margin-left: auto; }
.book__led { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--acid), 0 0 0 4px var(--ink); }
.book__title {
  grid-column: 1 / span 7;
  display: grid; align-content: end;
  padding: clamp(40px, 5vw, 72px) var(--gut) clamp(18px, 2.4vw, 32px);
  container-type: inline-size;
  border-right: var(--hair);
  overflow: hidden;
}
.book__big {
  display: block; justify-self: start;
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: calc(100cqi / 4.3); line-height: .8; letter-spacing: -.012em;
  white-space: nowrap;
  transform-origin: left bottom;
}
.book__wide {
  display: block; justify-self: start; margin-top: .14em;
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: calc(100cqi / 7); line-height: .9; letter-spacing: -.008em;
  text-shadow: .045em .045em 0 var(--ivory);
  white-space: nowrap;
}
.book__steps {
  grid-column: 8 / -1;
  display: grid; align-content: stretch;
}
.book__steps li {
  display: flex; align-items: center; gap: 16px;
  padding: 16px var(--gut);
  border-bottom: var(--hair);
  font-weight: 700; font-size: var(--t-body); line-height: 1.3;
}
.book__steps li:last-child { border-bottom: 0; }
.book__steps .mono {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border: var(--hair); font-size: var(--t-mono);
}
.book__console {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  border-top: var(--hair);
}
.calc {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 14px clamp(16px, 3vw, 44px);
  padding: 22px var(--gut);
  border-right: var(--hair);
}
.calc__label { grid-column: 1 / -1; font-size: var(--t-mono); }
.calc__row { display: flex; align-items: stretch; border: var(--hair); background: var(--ivory); }
.calc__btn {
  width: 56px; background: transparent; border: 0; cursor: pointer;
  font-size: 1.6rem; font-weight: 500; line-height: 1;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.calc__btn:hover:not(:disabled) { background: var(--ink); color: var(--acid); }
.calc__btn:disabled { opacity: .3; cursor: default; }
.calc__n {
  position: relative; display: grid; place-items: center;
  min-width: 72px; padding: 10px 14px 8px;
  border-left: var(--hair); border-right: var(--hair);
  background: var(--ink); color: var(--orange); font-size: var(--lcd-l); line-height: 1;
}
.calc__n .lcd-ghost { right: 14px; top: 10px; }
.calc__out { display: flex; gap: clamp(16px, 2.6vw, 40px); }
.calc__out p { display: grid; gap: 6px; }
.calc__out .mono { font-size: var(--t-mono); }
.calc__lcd {
  position: relative; display: inline-flex; justify-content: flex-end; justify-self: start;
  font-size: var(--lcd-l); line-height: 1;
  padding: 8px 10px 6px; background: var(--ink); color: var(--orange);
}
.calc__lcd .lcd-ghost { right: 10px; top: 8px; }
.calc__lcd { overflow: hidden; }
.calc__lcd .lcd.is-tick { animation: roll .36s steps(4) 1; }
@keyframes roll { 0% { transform: translateY(-110%); } 60% { transform: translateY(12%); } 100% { transform: none; } }
.calc__note { grid-column: 1 / -1; font-size: var(--t-mono); }
.book__go { display: grid; align-content: center; gap: 14px; padding: 22px var(--gut); }
.book__go .btn { width: 100%; }
.book__alt { font-size: var(--t-body); }
.book__alt a { font-weight: 700; }
.book__facts {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap;
  border-top: var(--hair);
}
.book__facts li { flex: 1 1 auto; padding: 12px var(--gut); border-right: var(--hair); font-size: var(--t-mono); }
.book__facts li:last-child { border-right: 0; }
.book__facts li::before { content: "■ "; }

@media (max-width: 1100px) {
  .book__title { grid-column: 1 / -1; border-right: 0; border-bottom: var(--hair); }
  .book__steps { grid-column: 1 / -1; }
  .book__console { grid-template-columns: 1fr; }
  .calc { border-right: 0; border-bottom: var(--hair); }
}
@media (max-width: 699px) {
  .calc { grid-template-columns: auto minmax(0, 1fr); }
  .calc__out { grid-column: 1 / -1; }
  .book__rail span:last-child { margin-left: 0; }
  .book__facts li { flex-basis: 100%; border-right: 0; border-top: var(--hair); }
  .book__facts li:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   NIV. −04 — Infos pratiques
   -------------------------------------------------------------------------- */
.panels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "where where hours price" "contact gift faq faq";
  gap: 1px; background: var(--ink);
  border-bottom: var(--hair);
}
.panel { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px var(--gut) 26px; background: var(--ivory); }
.panel--where { grid-area: where; }
.panel--hours { grid-area: hours; }
.panel--price { grid-area: price; }
.panel--contact { grid-area: contact; }
.panel--gift { grid-area: gift; background: var(--ivory-2); }
.panel--faq { grid-area: faq; }
.panel__label { display: flex; align-items: center; gap: 10px; font-size: var(--t-mono); font-weight: 600; }
.panel__label span { display: grid; place-items: center; width: 22px; height: 22px; background: var(--ink); color: var(--ivory); }
.panel__big {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: var(--t-m); line-height: .92; letter-spacing: -.004em;
}
.panel__big a { text-decoration: none; }
.panel__big a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.panel--where .panel__big { font-size: var(--t-l); }
.panel__note { font-size: var(--t-mono); margin-top: auto; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.panel p:not([class]) { font-size: var(--t-body); }
.panel__map { width: 100%; max-width: 420px; }
.panel__map .track { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.panel__map .ink { fill: var(--ink); }
.panel__map .rust { fill: var(--orange); }
.panel__map text { font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 500; fill: var(--ink); }

.hours { width: 100%; border-collapse: collapse; font-size: var(--t-mono); }
.hours th, .hours td { padding: 9px 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent); text-align: left; font-weight: 500; }
.hours td { text-align: right; font-weight: 600; }
.hours tr:first-child th, .hours tr:first-child td { border-top: var(--hair); }
.hours .is-off td, .hours .is-off th { background: var(--orange); }
.hours .is-off th { padding-left: 6px; }
.hours .is-off td { padding-right: 6px; }

.price-bars { width: 100%; border-collapse: collapse; }
.price-bars tr { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; padding: 3px 0; }
.price-bars th { font-size: var(--t-mono); text-align: left; font-weight: 500; }
.price-bars td { display: flex; align-items: center; gap: 8px; }
.price-bars i {
  display: block; height: 16px;
  width: calc((var(--p) - 18) / 20 * 70%);
  background: var(--ink); transform-origin: left;
  transition: transform var(--t-slow) var(--ease-mech);
}
.price-bars tr:last-child i { background: var(--orange); }
.price-bars span { font-weight: 800; font-size: var(--t-body); white-space: nowrap; }

.faq { width: 100%; border-top: var(--hair); }
.faq details { border-bottom: var(--hair); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 13px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: var(--t-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border: var(--hair);
  font-family: var(--f-mono); font-size: 16px; line-height: 1;
  transition: transform var(--t-mid) var(--ease-mech), background-color var(--t-fast);
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--acid); }
.faq summary:hover::after { background: var(--acid); }
.faq details p { padding: 0 0 16px; max-width: 62ch; font-size: var(--t-body); }

@media (max-width: 1100px) {
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "where where" "hours price" "contact gift" "faq faq"; }
}
@media (max-width: 699px) {
  .panels { grid-template-columns: 1fr; grid-template-areas: "where" "hours" "price" "contact" "gift" "faq"; }
}

/* --------------------------------------------------------------------------
   Footer — dernière composition
   -------------------------------------------------------------------------- */
.foot { background: var(--ink); color: var(--ivory); padding-bottom: 8px; }
.foot__end {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px var(--gut); border-bottom: 1px solid rgba(233, 228, 216, .2);
  font-size: var(--t-mono); color: var(--lcd);
}
/* plan du site : l'architecture en coupe, chaque porte est une page */
.plan { position: relative; padding: 14px var(--gut) clamp(28px, 4vw, 56px); border-bottom: 1px solid rgba(233, 228, 216, .2); }
.plan__head { display: flex; justify-content: space-between; gap: 16px; color: var(--lcd); }
/* le dessin est plus haut que large : sa taille suit la hauteur de l'écran */
.plan__stage { position: relative; width: min(100%, calc(74svh * var(--ar, 1))); margin: 12px auto 0; }
.plan__stage .iso { width: 100%; height: auto; display: block; }
.plan .lead polyline { fill: none; stroke: var(--lcd); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.plan .lead circle { fill: var(--orange); stroke: var(--ink); stroke-width: 1.5; }
.plan .lead--primary polyline { stroke: var(--acid); }
.plan .lead--primary circle { fill: var(--acid); }
.plan .lead.is-hot polyline { stroke: var(--ivory); stroke-width: 2; }
.plan .lead.is-hot circle { fill: var(--ivory); }
/* numéro au bout du trait : seulement quand les liens passent en liste */
.plan .lead text { display: none; fill: var(--orange); font: 500 24px var(--f-mono); }
.plan__links { position: absolute; inset: 0; pointer-events: none; }
.plan__item { position: absolute; left: var(--x); top: var(--y); pointer-events: auto; }
.plan__item--l { transform: translate(-100%, -50%); text-align: right; }
.plan__item--r { transform: translate(0, -50%); }
.plan__item a {
  display: grid; gap: 3px; padding: 4px 10px;
  text-decoration: none; color: var(--ivory);
}
.plan__item--l a { justify-items: end; }
.plan__n { color: var(--orange); }
.plan__label {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: var(--t-m); line-height: .9; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat;
  transition: background-size var(--t-mid) var(--ease-mech);
}
.plan__item a:hover .plan__label, .plan__item a:focus-visible .plan__label { background-size: 100% 2px; }
.plan__note { color: var(--lcd); }
.plan__item--primary .plan__label { color: var(--acid); }
/* étroit : le dessin reste au-dessus, les portes deviennent une liste numérotée */
@media (max-width: 899px) {
  .plan__stage { width: min(100%, 520px); }
  .plan .lead text { display: block; }
  .plan__links { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 18px; border-top: 1px solid rgba(233, 228, 216, .2); }
  .plan__item { position: static; transform: none; text-align: left; border-bottom: 1px solid rgba(233, 228, 216, .2); }
  .plan__item:nth-child(odd) { border-right: 1px solid rgba(233, 228, 216, .2); }
  .plan__item--l a { justify-items: start; }
  .plan__item a { padding: 14px 12px; }
  .plan__label { white-space: normal; }
}
@media (max-width: 420px) {
  .plan__links { grid-template-columns: 1fr; }
  .plan__item:nth-child(odd) { border-right: 0; }
}

.foot__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid rgba(233, 228, 216, .2);
}
.foot__col { display: grid; align-content: start; gap: 12px; padding: 22px var(--gut) 26px; border-right: 1px solid rgba(233, 228, 216, .2); font-size: var(--t-body); }
.foot__col:last-child { border-right: 0; }
.foot__col .btn { justify-self: start; color: var(--ink); }
.foot__col .btn:hover { color: var(--acid); }
.foot__label { font-size: var(--t-mono); color: var(--lcd); }
.foot__col ul { display: grid; gap: 6px; }
.foot__col a { text-decoration-color: rgba(233, 228, 216, .4); text-underline-offset: 3px; }
.foot__col a:hover { text-decoration-color: var(--acid); }
.foot__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 14px var(--gut) calc(14px + env(safe-area-inset-bottom));
  font-size: var(--t-mono); color: var(--lcd);
}
@media (max-width: 899px) {
  .foot__grid { grid-template-columns: 1fr; }
  .foot__col { border-right: 0; }
  .foot__col + .foot__col { border-top: 1px solid rgba(233, 228, 216, .2); }
}
@media (max-width: 699px) {
  .foot { padding-bottom: 84px; }
  .foot__end { flex-direction: column; }
}

/* barre de réservation mobile */
.dock { display: none; }
@media (max-width: 899px) {
  .dock {
    position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; --h: 54px;
    box-shadow: 4px 4px 0 var(--ink);
    transform: translateY(calc(100% + 24px));
    transition: transform var(--t-mid) var(--ease-mech);
  }
  .dock span:last-child { flex: 1; justify-content: center; }
  .dock.is-on { transform: none; }
  .no-js .dock { transform: none; }
}

/* --------------------------------------------------------------------------
   Chronomètre de session (bas de la jauge)
   -------------------------------------------------------------------------- */
.chrono {
  position: relative; display: inline-flex; justify-content: flex-end; align-self: flex-start;
  font-size: var(--lcd-m); line-height: 1; padding: 5px 7px 4px;
  background: var(--ink); color: var(--orange);
  font-family: var(--f-lcd); font-weight: 700; white-space: nowrap;
}
.chrono .lcd-ghost { right: 7px; top: 5px; }
.chrono__colon { transition: opacity .08s steps(1); }
.is-blink .chrono__colon { opacity: .12; }
.gauge__chrono.is-low .chrono { background: var(--orange); color: var(--ink); }
.gauge__chrono.is-stopped .chrono { background: var(--acid); color: var(--ink); }
.chrono--sm { font-size: var(--lcd-s); padding: 3px 5px 2px; vertical-align: middle; margin-left: 6px; outline: 1px solid rgba(233, 228, 216, .3); }
.chrono--sm .lcd-ghost { right: 5px; top: 3px; }

/* jauge : profondeur et temps intermédiaires */
@media (min-width: 1200px) {
  .gauge__depth { position: absolute; right: -1px; top: 0; bottom: 0; width: 3px; }
  .gauge__depth i { display: block; height: 100%; background: var(--orange); transform-origin: top; transform: scaleY(var(--d, 0)); }
  .gauge a { grid-template-rows: auto auto; row-gap: 2px; }
  .lap { grid-column: 1 / -1; font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: .02em; opacity: .6; }
  .lap.is-set { opacity: 1; background: var(--ink); color: var(--ivory); padding: 1px 3px; justify-self: start; }
}
.lap { display: none; }
@media (min-width: 1200px) { .lap { display: block; } }

/* --------------------------------------------------------------------------
   Sas entre deux niveaux : verrou, puis deux vantaux
   --b = verrou (1 tiré → 0 engagé), --o = ouverture des vantaux (0 → 1)
   Sans JS : ouvert.
   -------------------------------------------------------------------------- */
.sas {
  --b: 1; --o: 1;
  position: relative; overflow: hidden;
  height: clamp(150px, 24vh, 240px);
  background: var(--ink); color: var(--ivory);
  border-bottom: var(--hair);
}
.sas__bay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gut);
}
.sas__name { position: absolute; right: var(--gut); bottom: 14px; }
.sas__check { position: absolute; left: var(--gut); bottom: 14px; display: flex; align-items: center; gap: 4px; color: var(--lcd); }
.sas--dark .sas__check { color: var(--ink); }
.sas__num { color: var(--orange); font-weight: 900; font-stretch: 62%; font-size: var(--t-xl); line-height: .82; }
.sas__name { font-size: var(--t-mono); color: var(--lcd); text-align: right; }
.sas__leaf {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px var(--gut);
  background: var(--ivory); color: var(--ink);
  border: var(--hair);
  will-change: transform;
}
.sas__leaf--l { left: 0; align-items: flex-start; transform: translateX(calc(var(--o) * -101%)); }
.sas__leaf--r { right: 0; align-items: flex-end; transform: translateX(calc(var(--o) * 101%)); }
.sas__tag { font-size: var(--t-mono); }
.sas__grip { position: absolute; right: 26px; top: 50%; width: 10px; height: 38%; translate: 0 -50%; background: var(--ink); }
.sas__state { display: flex; align-items: center; gap: 8px; font-size: var(--t-mono); }
.sas__state i { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--ivory), 0 0 0 3px var(--ink); }
.sas.is-unlocked .sas__state i { background: var(--acid); }
.sas__bolt {
  position: absolute; left: -46px; top: 50%; width: 92px; height: 18px; translate: 0 -50%;
  background: var(--orange); border: var(--hair); z-index: 2;
  transform: translateX(calc(var(--b) * 56px));
}
.sas--dark { background: var(--orange); color: var(--ink); }
.sas--dark .sas__num, .sas--dark .sas__name { color: var(--ink); }
.sas--dark .sas__leaf { background: var(--ink); color: var(--ivory); border-color: rgba(233, 228, 216, .3); }
.sas--dark .sas__grip { background: var(--ivory); }
.sas--dark .sas__state i { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--ivory); }
.sas--dark .sas--dark .sas__bolt { border-color: var(--ivory); }

/* --------------------------------------------------------------------------
   Trappes des salles : deux vantaux sur chaque visuel (ouverts sans JS)
   -------------------------------------------------------------------------- */
.hatch { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hatch i {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: var(--ink);
  transition: transform .75s var(--ease-mech) .22s;
}
.hatch i:first-of-type { left: 0; transform: translateX(-101%); border-right: 3px solid var(--orange); }
.hatch i:last-of-type { right: 0; transform: translateX(101%); }
.hatch i:first-of-type::after {
  content: "LL — TRAPPE"; position: absolute; left: 12px; top: 10px;
  font: 500 var(--t-mono)/1 var(--f-mono); letter-spacing: .06em; color: var(--lcd);
}
.hatch b {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 14px; translate: -50% -50%;
  background: var(--orange); border: 1px solid var(--ivory);
  transform: translateX(80px); opacity: 0;
  transition: transform .22s var(--ease-mech), opacity 0s linear .22s;
}
.js [data-room]:not(.is-open) .hatch i { transform: none; transition-delay: .05s; }
.js [data-room]:not(.is-open) .hatch b { transform: none; opacity: 1; transition: transform .22s var(--ease-mech) .7s, opacity 0s linear .7s; }

/* --------------------------------------------------------------------------
   Grain d'impression — uniquement sur les aplats (charbon, orange, acide),
   jamais sur l'ivoire. Texture générée par tools/grain.mjs.
   -------------------------------------------------------------------------- */
.hero__stage, .key--go, .rhero, .rcal__panel, .gopt--a, .lhero, .sas, .sas--dark .sas__leaf, .spirit, .book, .foot, .ck__door, .l4,
.hatch i, .btn--acid, .btn--ink, .bar__cta, .dock {
  background-image: url("../img/grain.png");
  background-size: 256px 256px;
}
/* volets de survol : charbon grainé comme les aplats */
.key::before, .btn::before { background-image: url("../img/grain.png"); background-size: 256px 256px; }
.btn--ink::before { background-image: none; } /* volet ivoire : jamais de grain sur l'ivoire */
@media (min-resolution: 2dppx) { .key::before, .btn::before { background-size: 192px 192px; } }
@media (min-resolution: 2dppx) {
  .hero__stage, .key--go, .rhero, .rcal__panel, .gopt--a, .lhero, .sas, .sas--dark .sas__leaf, .spirit, .book, .foot, .ck__door, .l4,
  .hatch i, .btn--acid, .btn--ink, .bar__cta, .dock { background-size: 192px 192px; }
}

/* ==========================================================================
   PAGES DE SALLE (générées par tools/pages.mjs)
   Plus sobres que l'accueil : pas de niveaux ni de jauge. Trois blocs —
   la salle, l'histoire, le calendrier — et un lien vers les autres salles.
   ========================================================================== */
@media (min-width: 1200px) { .page-room main, .page-room .foot { margin-left: 0; } }

/* — la salle — */
.rhero { background: var(--ink); color: var(--ivory); border-bottom: var(--hair); }
.crumbs { padding: 14px var(--gut); border-bottom: 1px solid rgba(233, 228, 216, .2); color: var(--lcd); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a { color: var(--ivory); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--orange); }
.rhero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(32px, 5vw, 88px);
  max-width: 1440px; margin: 0 auto;
  padding: clamp(40px, 7vh, 88px) var(--gut) clamp(48px, 8vh, 96px);
}
.rhero__text { display: grid; gap: clamp(18px, 2.6vh, 28px); justify-items: start; min-width: 0; }
.rhero .room__kicker { color: var(--ink); }
.rhero__title {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(3.4rem, 7vw, 8rem); line-height: .84; letter-spacing: -.008em;
}
.rhero__title > span:not(.sr-only) { display: block; }
.rhero__lede { font-size: var(--t-lead); line-height: 1.4; color: #D7D2C6; }
/* les détails utiles, une seule fois */
.rhero__facts {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
  width: 100%; margin: 4px 0;
  border-top: 1px solid rgba(233, 228, 216, .25); border-bottom: 1px solid rgba(233, 228, 216, .25);
}
.rhero__facts > div { display: grid; gap: 6px; align-content: start; padding: 14px clamp(16px, 2vw, 28px) 14px 0; }
.rhero__facts > div + div { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid rgba(233, 228, 216, .25); }
.rhero__facts dt { color: var(--lcd); }
.rhero__facts dd { font-weight: 800; font-size: var(--t-body); white-space: nowrap; }
.rhero__rec dd { justify-self: start; }
.rhero__rec .lcd-ghost, .rhero__rec .lcd { font-size: var(--lcd-s); }
.rhero__rec dd:has(.lcd) { position: relative; background: #0F0F0C; color: var(--orange); padding: 4px 6px 3px; }
.rhero__rec .lcd-ghost { right: 6px; top: 4px; }
.rhero__none { font-weight: 500; color: var(--lcd); }
.rhero__art { margin: 0; color: var(--ink); border-color: rgba(233, 228, 216, .5); }

/* — l'histoire à gauche, le calendrier à droite — */
.rbody {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr); align-items: start;
  column-gap: clamp(32px, 5vw, 88px); row-gap: 48px;
  max-width: 1440px; margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--gut);
}
.rstory { display: grid; gap: clamp(24px, 3vw, 40px); min-width: 0; }
/* la colonne la plus courte accompagne le défilement : pas de trou à côté du calendrier */
.rbody > * { position: sticky; top: calc(var(--bar-h) + 24px); }
.rbody > .is-tall { position: static; }
.rstory__head { display: grid; gap: 14px; align-content: start; }
.rstory__head > .mono:first-child, .rcal__head > .mono:first-child { justify-self: start; padding-left: 10px; border-left: 4px solid var(--orange); }
.rstory__title, .rcal__title {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: var(--t-l); line-height: .9;
}
.rstory__genre { color: color-mix(in srgb, var(--ink) 75%, transparent); }
.rstory__text { display: grid; gap: 22px; align-content: start; max-width: 66ch; }
.rstory__text > p { font-size: var(--t-lead); line-height: 1.55; }
.rstory__mission { display: grid; gap: 8px; padding: 2px 0 2px 18px; border-left: 4px solid var(--orange); }
.rstory__mission-text { font-size: var(--t-lead); line-height: 1.5; font-weight: 700; }
.rstory__end { font-size: var(--t-lead); line-height: 1.4; font-weight: 800; }

/* le calendrier : l'outil 4escape existant, intégré tel quel */
.rcal { display: grid; gap: clamp(20px, 2.4vw, 32px); min-width: 0; }
.rcal__head { display: grid; gap: 14px; }
.rcal__panel { display: grid; gap: 14px; padding: clamp(12px, 1.6vw, 20px); background-color: var(--ink); color: var(--ivory); }
.cal { position: relative; min-height: 480px; }
.cal iframe { display: block; width: 100% !important; }
.cal__wait, .cal__state { display: flex; align-items: center; gap: 10px; color: var(--lcd); }
.cal.is-ready .cal__wait { display: none; }
.cal__led { width: 9px; height: 9px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--lcd); }
.cal__alt { color: var(--lcd); }
.cal__alt a { color: var(--ivory); text-underline-offset: 3px; }
.cal--closed { display: grid; align-content: center; justify-items: start; gap: 20px; min-height: 360px; padding: clamp(8px, 1.6vw, 20px); }
.cal--closed .cal__led { background: var(--orange); }
.cal__big { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: var(--t-m); line-height: .9; }
.cal--closed p:not([class]) { max-width: 44ch; color: #D7D2C6; }
.cal .tbc { outline-color: var(--orange); }

/* — les autres salles : cartes illustrées — */
.rothers { border-top: var(--hair); }
.rothers__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
  max-width: 1440px; margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) var(--gut) clamp(20px, 3vw, 32px);
}
.rothers__title { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: var(--t-l); line-height: .9; }
.others__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--ink); border-top: var(--hair); border-bottom: var(--hair); }
.other {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--ivory); color: var(--ink); text-decoration: none;
  transition: background-color var(--t-fast);
}
.other img { width: 100%; height: 100%; aspect-ratio: 704 / 560; object-fit: cover; border-right: var(--hair); }
.other__body { display: grid; align-content: end; gap: 10px; padding: 22px clamp(18px, 2vw, 28px) 24px; }
.other__n, .other__meta { color: color-mix(in srgb, var(--ink) 78%, transparent); }
.other__title {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: var(--t-l); line-height: .86;
  transition: letter-spacing var(--t-mid) var(--ease-mech);
}
.other__go { justify-self: start; font-weight: 700; font-size: var(--t-ui); letter-spacing: .07em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.other__go [aria-hidden] { display: inline-block; transition: transform var(--t-mid) var(--ease-mech); }
.other:hover { background: var(--ivory-2); }
.other:hover .other__title { letter-spacing: .03em; }
.other:hover .other__go [aria-hidden] { transform: translateX(6px); }
.other:focus-visible { outline-offset: -6px; }

@media (max-width: 899px) {
  .rhero__grid { grid-template-columns: 1fr; }
  .rbody { grid-template-columns: 1fr; }
  .rbody > * { position: static; }
  .others__grid { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
  .rhero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rhero__facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .rhero__facts > div:nth-child(n+3) { border-top: 1px solid rgba(233, 228, 216, .25); }
  .rhero .btn { width: 100%; }
  .other { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .other__title { font-size: var(--t-m); }
  .cal { min-height: 360px; }
}

/* ==========================================================================
   PAGE CARTE CADEAU (générée par tools/pages.mjs)
   ========================================================================== */
/* titre : la porte du logo, ouverte à l'arrivée, se referme derrière « Enfermez » */
.gtitle {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(3.6rem, 7.6vw, 8.8rem); line-height: .84; letter-spacing: -.008em;
}
.gtitle__l { display: block; white-space: nowrap; }
.gtitle .lockup__door { --knob: var(--ink); margin: 0 .04em; vertical-align: baseline; }
.gtitle .lockup__leaf { transform: scaleX(.16) skewY(-12deg); }
.gtitle.is-open .lockup__leaf, .no-js .gtitle .lockup__leaf { transform: none; transition-delay: .7s; }
.gtitle .lockup__leaf::after { background: var(--ink); }

/* scène : la vidéo, et la carte posée devant, de travers */
.gstage { position: relative; padding: 0 0 clamp(56px, 7vw, 96px) clamp(40px, 6vw, 96px); }
.gstage__art { margin: 0; color: var(--ink); border-color: rgba(233, 228, 216, .5); }
.gcard {
  --tilt: -8deg;
  position: absolute; left: 0; bottom: 0; z-index: 4;
  width: min(62%, 380px); aspect-ratio: 1.586;
  display: grid; grid-template-rows: auto 1fr auto; gap: 8px;
  padding: 16px 18px 14px;
  background: var(--ivory); color: var(--ink);
  border: var(--hair);
  box-shadow: 10px 10px 0 var(--orange);
  transform: rotate(var(--tilt)); transform-origin: 30% 80%;
  transition: transform .6s var(--ease-mech), box-shadow .6s var(--ease-mech);
}
.gcard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: var(--hair); }
.gcard__top .lockup--mini { font-size: 18px; }
.gcard__big {
  align-self: center; padding-right: 30%;
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: .88;
}
.gcard__bot { display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.gcard__bars {
  width: 42%; height: 22px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px);
}
/* la porte de la carte : à la hauteur du texte, côté droit */
.gcard__door {
  position: absolute; right: 18px; top: 50px; bottom: 44px; width: 22%;
  background: var(--orange); outline: 1px solid var(--ink); outline-offset: 3px;
  overflow: hidden;
}
.gcard__door .lockup__leaf { background: var(--ink); }
.gcard__door .lockup__leaf::after { background: var(--orange); }
/* survol : la carte se redresse, sa porte s'ouvre */
.gstage:hover .gcard { transform: rotate(0deg) translate(-6px, -10px); box-shadow: 16px 16px 0 var(--orange); }
.gstage:hover .gcard__door .lockup__leaf { transform: scaleX(.16) skewY(-12deg); }

/* écrans tactiles (pas de survol) : la carte se redresse et s'ouvre quand la scène arrive à l'écran */
@media (hover: none) {
  .ghero.is-open .gcard { transform: rotate(-3deg); transition-delay: .6s; }
  .ghero.is-open .gcard__door .lockup__leaf { transform: scaleX(.16) skewY(-12deg); transition-delay: 1s; }
}

/* formules + étapes (colonne de gauche) */
.gform { display: grid; gap: clamp(24px, 3vw, 40px); align-content: start; min-width: 0; }
.gform__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--hair); }
.gopt { display: grid; gap: 10px; align-content: start; padding: 22px 22px 26px; }
.gopt + .gopt { border-left: var(--hair); }
.gopt--a { background-color: var(--orange); }
.gopt__title {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: var(--t-m); line-height: .9;
}
.gopt p:not(.mono) { font-size: var(--t-body); }
.gsteps { border-top: var(--hair); }
.gsteps li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent);
  font-size: var(--t-lead); line-height: 1.35;
}
.gsteps .mono { display: grid; place-items: center; width: 40px; height: 40px; border: var(--hair); }

/* boutique : le panneau 4escape reste à hauteur raisonnable */
.page-gift .cal { min-height: 640px; }

@media (max-width: 899px) {
  .gstage { padding: 0 0 72px 0; margin-top: 8px; }
  .gcard { left: 12px; width: min(78%, 360px); }
}
@media (max-width: 699px) {
  .gtitle { font-size: 15.5vw; }
  .gtitle__l { white-space: normal; } /* police de secours plus large : le titre peut passer à la ligne */
  .gform__opts { grid-template-columns: 1fr; }
  .gopt + .gopt { border-left: 0; border-top: var(--hair); }
  .gcard__big { font-size: 1.5rem; }
  .gsteps li { font-size: var(--t-body); }
}

/* ==========================================================================
   MENTIONS LÉGALES & CGV (générée par tools/pages.mjs) — sobre : en-tête noir
   compact, sommaire collant à gauche, texte en colonne de lecture.
   ========================================================================== */
.lhero { background: var(--ink); color: var(--ivory); border-bottom: var(--hair); }
.lhero__in {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px;
  max-width: 1440px; margin: 0 auto;
  padding: clamp(40px, 7vh, 80px) var(--gut) clamp(28px, 4vh, 44px);
}
.lhero__title {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: var(--t-xl); line-height: .84; letter-spacing: -.008em;
}
.lhero__title span { color: var(--orange); }
.lhero__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--lcd); }

.lbody {
  display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 9fr); align-items: start;
  column-gap: clamp(32px, 6vw, 112px);
  max-width: 1440px; margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) var(--gut) clamp(56px, 8vw, 120px);
}
.ltoc { position: sticky; top: calc(var(--bar-h) + 24px); display: grid; gap: 12px; }
.ltoc > .mono { justify-self: start; padding-left: 10px; border-left: 4px solid var(--orange); }
.ltoc ol { border-top: var(--hair); }
.ltoc a {
  display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent);
  font-size: .9375rem; line-height: 1.3; text-decoration: none;
}
.ltoc a .mono { color: color-mix(in srgb, var(--ink) 70%, transparent); }
.ltoc a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ltext { display: grid; gap: clamp(36px, 4vw, 56px); max-width: 72ch; min-width: 0; }
.lart { display: grid; gap: 16px; scroll-margin-top: calc(var(--bar-h) + 24px); }
.lart__title {
  display: grid; gap: 8px;
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: var(--t-m); line-height: .95;
  padding-top: 14px; border-top: var(--hair);
}
.lart__title .mono { justify-self: start; padding: 2px 7px; background: var(--orange); color: var(--ink); font-stretch: 100%; }
.lart p, .lart li { font-size: var(--t-body); line-height: 1.65; }
.lart a { text-underline-offset: 3px; }
.llist { display: grid; gap: 6px; padding-left: 1.4em; }
.lart ol.llist { list-style: decimal; }
.lart ul.llist { list-style: square; }
.ldl { border-top: var(--hair); }
.ldl > div { display: grid; grid-template-columns: minmax(140px, 14ch) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.ldl dt { font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding-top: 4px; }
.ldl dd { line-height: 1.55; }
.lprice { border-collapse: collapse; width: min(100%, 420px); font-family: var(--f-mono); font-size: .875rem; }
.lprice th, .lprice td { padding: 8px 12px 8px 0; text-align: left; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.lprice thead th { font-size: var(--t-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; border-bottom: var(--hair); }
.lprice tbody th { font-weight: 600; }

@media (max-width: 899px) {
  .lbody { grid-template-columns: 1fr; row-gap: 40px; }
  .ltoc { position: static; }
  .ltoc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
@media (max-width: 499px) {
  .ltoc ol { grid-template-columns: 1fr; }
  .ldl > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   PAGE RÉSERVATION (générée par tools/pages.mjs) — sobre : un titre, une
   phrase, puis l'addition et les cas particuliers à gauche, le calendrier
   4escape des trois salles à droite.
   ========================================================================== */
.bhero__grid { grid-template-columns: 1fr; padding-top: clamp(32px, 5vh, 64px); padding-bottom: clamp(32px, 5vh, 56px); }
.bhero__title {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(3.4rem, 7vw, 8rem); line-height: .84; letter-spacing: -.008em;
}
.bhero__l { display: block; }
.bhero__l--o { color: var(--orange); }
/* page de remerciement : l'adresse peut passer à la ligne */
.bhero .rhero__facts dd { white-space: normal; }

/* corps : infos à gauche, calendrier à droite (le calendrier vient d'abord dans le code) */
.rbody--book { grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr); padding-top: clamp(32px, 3.6vw, 56px); }
.rbody--book > .rcal { grid-column: 2; grid-row: 1; }
.rbody--book > .bside { grid-column: 1; grid-row: 1; }
.page-book .cal { min-height: 720px; }
.bside { display: grid; gap: clamp(24px, 3vw, 36px); align-content: start; min-width: 0; }
.bside__opts { display: grid; border: var(--hair); }
.bside__opts .gopt + .gopt { border-left: 0; border-top: var(--hair); }
/* le téléphone : un recours, pas la voie principale — encart en pointillé, sans aplat */
.bcall {
  display: grid; gap: 10px; justify-items: start;
  padding: 18px 20px 20px;
  border: 1px dashed color-mix(in srgb, var(--ink) 55%, transparent);
}
.bcall__title { padding: 2px 7px; border: var(--hair); }
.bcall__list { display: grid; gap: 4px; }
.bcall__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); }
.bcall__list li::before { content: "·"; font-weight: 900; }
.bcall__tel { font-weight: 800; font-size: var(--t-lead); text-underline-offset: 4px; }
.bcall__note { color: color-mix(in srgb, var(--ink) 78%, transparent); text-transform: none; letter-spacing: .02em; }
.bcall__note a { color: var(--ink); text-underline-offset: 3px; }

@media (max-width: 899px) {
  .rbody--book { grid-template-columns: 1fr; }
  .rbody--book > .rcal, .rbody--book > .bside { grid-column: auto; grid-row: auto; }
}
@media (max-width: 699px) {
  .bhero__title { font-size: 15vw; }
  .page-book .cal { min-height: 520px; }
}

/* page de remerciement : un bouton, des liens */
.lost__go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.lost__go .link-arrow { color: var(--ivory); }

/* ==========================================================================
   PAGE 404 — NIV. −404 : on est perdu, il faut trouver le code pour sortir.
   Le « 0 » est la porte du logo, verrouillée ; le digicode est une console
   (même famille que la console de tarif de l'accueil). Sorties de secours
   toujours visibles. Sans JS : pas de digicode. Animations réduites : pas
   de tremblement ni de rotation, la porte change d'état d'un coup.
   ========================================================================== */
.l4 {
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: calc(100svh - var(--bar-h));
  background-color: var(--ink); color: var(--ivory);
}
.l4__rail {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
  padding: 12px var(--gut); border-bottom: 1px solid rgba(233, 228, 216, .2); color: var(--lcd);
}
.l4__rail > span:first-child { padding-left: 10px; border-left: 4px solid var(--orange); color: var(--ivory); }
.l4__lost { display: inline-flex; align-items: center; gap: 2px; }
.l4__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: center;
  gap: clamp(32px, 5vw, 96px);
  width: 100%; max-width: 1440px; margin: 0 auto;
  padding: clamp(24px, 5vh, 64px) var(--gut);
}
.l4__main { display: grid; gap: clamp(16px, 2.4vh, 28px); justify-items: start; min-width: 0; }

/* « 4 ▮ 4 » : le logo, en énorme ; la porte est fermée à clé */
.lockup--404 { --knob: var(--ink); font-size: clamp(9rem, 31vw, 31rem); color: var(--ivory); }
.lockup--404 .lockup__door { background: var(--ink); perspective: 1.3em; overflow: visible; }
.l4__light { position: absolute; inset: 0; background: var(--acid); }
.lockup--404 .lockup__leaf {
  background: var(--orange); transform-origin: 0 50%; backface-visibility: hidden;
  transition: transform 1.4s cubic-bezier(.55, 0, .15, 1);
}
.lockup--404 .lockup__leaf::after { background: var(--ink); }
.l4__bolt {
  position: absolute; top: 46%; left: 72%; width: .16em; height: .05em; z-index: 2;
  background: var(--ivory); outline: 2px solid var(--ink);
  transition: transform .3s var(--ease-mech), opacity .2s linear .2s;
}
.l4.is-open .l4__bolt { transform: translateX(-60%); opacity: 0; }
.l4.is-open .lockup--404 .lockup__leaf { transform: rotateY(-78deg); transition-delay: .35s; }
.l4__title { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: var(--t-l); line-height: .9; max-width: 22ch; }
.l4__lede { font-size: var(--t-lead); line-height: 1.4; color: #D7D2C6; max-width: 46ch; }
.no-js .l4__js { display: none; }

/* la console du digicode */
.l4__console {
  display: grid; gap: 12px; padding: 16px;
  background: #0F0F0C; outline: 1px solid rgba(233, 228, 216, .3); outline-offset: 6px;
}
.no-js .l4__console { display: none; }
.l4__label { display: flex; justify-content: space-between; color: var(--lcd); }
.l4__label [data-kp-state] { color: var(--orange); }
.l4.is-open .l4__label [data-kp-state] { color: var(--acid); }
.l4__screen {
  position: relative; display: flex; justify-content: flex-end;
  padding: 10px 14px 8px; background: var(--ink); color: var(--orange);
  font-family: var(--f-lcd); font-size: var(--lcd-l); line-height: 1;
  outline: 1px solid rgba(233, 228, 216, .2);
}
.l4__screen .lcd-ghost { right: 14px; top: 10px; }
.l4.is-err .l4__screen { color: var(--ivory); }
.l4.is-open .l4__screen { color: var(--acid); }
.l4__hint { color: var(--ivory); min-height: 2.7em; text-transform: none; letter-spacing: .02em; }
.l4__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.l4__key {
  min-height: 52px; padding: 0; cursor: pointer;
  border: 1px solid rgba(233, 228, 216, .35); background: transparent; color: var(--ivory);
  font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-size: var(--t-m); line-height: 1;
  transition: background-color var(--t-fast), color var(--t-fast), transform .08s;
}
.l4__key:hover { background: var(--ivory); color: var(--ink); }
.l4__key:active { transform: translateY(2px); }
.l4__key:focus-visible { outline-color: var(--acid); }
.l4__key--fn { font-family: var(--f-mono); font-weight: 500; font-size: var(--t-lead); color: var(--lcd); }
.l4__key--ok { background: var(--acid); color: var(--ink); border-color: var(--acid); }
.l4__key--ok:hover { background: var(--ivory); border-color: var(--ivory); }
.l4__key:disabled { opacity: .35; cursor: default; }
.l4__tries { color: var(--lcd); }

/* sorties de secours */
.l4__exits {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  padding: 18px var(--gut) 22px; border-top: 1px solid rgba(233, 228, 216, .2);
}
.l4__exits > .mono { color: var(--lcd); flex-basis: 100%; }
.l4__exits .link-arrow { color: var(--ivory); }
.l4.is-open [data-kp-exit] { outline: 3px solid var(--acid); outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  /* mauvais code : la porte tremble, l'écran clignote */
  .l4.is-err .lockup--404 .lockup__leaf { animation: l4-shake .42s linear; }
  .l4.is-err .l4__screen .lcd { animation: l4-blink .9s steps(1, end); }
  @keyframes l4-shake { 0%, 100% { transform: none; } 20% { transform: rotateY(-9deg); } 40% { transform: rotateY(4deg); } 60% { transform: rotateY(-6deg); } 80% { transform: rotateY(2deg); } }
  @keyframes l4-blink { 0%, 40%, 80% { opacity: 1; } 20%, 60% { opacity: .15; } }
  /* bon code : la lumière déborde de la porte */
  .l4.is-open .l4__light { animation: l4-glow 1.6s ease-out .9s both; }
  @keyframes l4-glow { from { box-shadow: 0 0 0 0 rgba(214, 255, 56, .0); } to { box-shadow: 0 0 .5em .12em rgba(214, 255, 56, .55); } }
}

@media (max-width: 899px) {
  .l4__body { grid-template-columns: 1fr; }
  .l4__console { max-width: 420px; width: 100%; }
}
@media (max-width: 699px) {
  .lockup--404 { font-size: 46vw; }
  .l4__key { min-height: 48px; }
}

/* ==========================================================================
   BANDEAU COOKIES — « On frappe avant d'entrer. » (assets/js/main.js)
   Conforme CNIL : deux choix de même poids, rien de déposé sans « Accepter ».
   La porte toque à l'arrivée ; acceptée elle s'ouvre sur la lumière,
   refusée un verrou la ferme. Non bloquant : le site reste utilisable.
   ========================================================================== */
.ck {
  position: fixed; left: calc(var(--rail) + 16px); bottom: 16px; z-index: 80; /* à droite de la jauge (écrans larges) */
  width: min(580px, calc(100vw - var(--rail) - 32px));
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  background: var(--ivory); color: var(--ink);
  border: var(--hair); box-shadow: 10px 10px 0 var(--ink);
  transform: translateY(calc(100% + 48px));
  transition: transform .65s var(--ease-mech);
}
.ck.is-in { transform: none; }

/* la porte : cadre charbon, vantail orange, lumière acide derrière */
.ck__door { position: relative; overflow: hidden; background-color: var(--ink); border-right: var(--hair); perspective: 260px; }
.ck__light, .ck__leaf { position: absolute; left: 24%; right: 24%; top: 26%; bottom: 0; }
.ck__light { background: var(--acid); box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px rgba(233, 228, 216, .45); }
.ck__leaf { background: var(--orange); transform-origin: left center; transition: transform .75s var(--ease-mech); }
.ck__leaf i { position: absolute; right: 14%; top: 52%; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.ck.is-open .ck__leaf { transform: rotateY(-74deg); }
.ck__bolt {
  position: absolute; top: calc(26% + 34%); left: 64%; width: 30%; height: 9px;
  background: var(--ivory); border: 1px solid var(--ink);
  transform: translateX(110%); transition: transform .22s var(--ease-mech) .1s;
}
.ck.is-locked .ck__bolt { transform: none; }
.ck__knock { position: absolute; left: 10px; top: 9px; color: var(--lcd); line-height: 1.15; }

.ck__body { display: grid; gap: 10px; align-content: start; padding: 16px 18px; min-width: 0; }
.ck__tag { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; }
.ck__tag > span:first-child { padding-left: 8px; border-left: 4px solid var(--orange); }
.ck__state { display: inline-flex; align-items: center; gap: 7px; }
.ck__state i { width: 8px; height: 8px; border-radius: 50%; background: var(--lcd); box-shadow: 0 0 0 2px var(--ivory), 0 0 0 3px var(--ink); }
.ck.is-open .ck__state i { background: var(--acid); }
.ck.is-locked .ck__state i { background: var(--orange); }
.ck__title { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: var(--t-m); line-height: .9; }
.ck__title:focus { outline: none; }
.ck__text { font-size: var(--t-body); line-height: 1.45; }
.ck__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.ck__actions .btn { --h: 44px; width: 100%; }
.ck__actions .btn > span:last-child { flex: 1; justify-content: center; padding-inline: .6em; }
.ck__actions .btn:disabled { cursor: default; }
.ck__more { color: color-mix(in srgb, var(--ink) 78%, transparent); text-transform: none; letter-spacing: .02em; }
.ck__more a { color: var(--ink); text-underline-offset: 3px; }

/* la barre de réservation mobile attend la réponse */
.ck-open .dock-wrap { visibility: hidden; }

/* pied de page : rouvrir le bandeau */
.foot__ck { margin-left: 18px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot__ck:hover { color: var(--ivory); }
.no-js .foot__ck { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* toc toc : le vantail tremble deux fois, puis l'inscription s'éteint */
  .ck.is-in:not(.is-open):not(.is-locked) .ck__leaf { animation: ck-knock .9s ease-in-out .75s 2; }
  .ck.is-in .ck__knock { animation: ck-toc 2.6s steps(1, end) .7s both; }
  @keyframes ck-knock { 0%, 40%, 100% { transform: none; } 8%, 24% { transform: rotateY(-7deg); } 16%, 32% { transform: rotateY(2deg); } }
  @keyframes ck-toc { 0% { opacity: 0; } 8% { opacity: 1; } 30% { opacity: .2; } 38%, 85% { opacity: 1; } 100% { opacity: .35; } }
}

@media (max-width: 699px) {
  .ck {
    left: 0; bottom: 0; width: 100%;
    grid-template-columns: 68px minmax(0, 1fr);
    box-shadow: none; border-width: 1px 0 0;
    transform: translateY(105%);
  }
  .ck__body { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); gap: 8px; }
  .ck__knock { left: 7px; }
  .ck__text { line-height: 1.4; }
  .ck__actions .btn__icon { display: none; } /* deux boutons égaux, libellés entiers */
}

/* --------------------------------------------------------------------------
   Données à vérifier (brouillon) — retirer la classe .draft sur <html>
   -------------------------------------------------------------------------- */
.draft .tbc {
  position: relative;
  outline: 1.5px dashed var(--orange); outline-offset: 2px;
  cursor: help;
}
.draft .tbc::after {
  content: "À VÉRIFIER — " attr(data-a-verifier);
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 30;
  width: max-content; max-width: 260px;
  padding: 8px 10px; background: var(--orange); color: var(--ink);
  font: 500 var(--t-mono)/1.4 var(--f-mono); letter-spacing: .02em; text-transform: none;
  display: none; pointer-events: none;
}
.draft .tbc:hover::after, .draft .tbc:focus::after { display: block; }
.draft .plate .tbc::after, .draft .hours .tbc::after { left: auto; right: 0; }

/* ==========================================================================
   MOUVEMENT
   Règle : tout est composé sans JS. Les états initiaux d'animation n'existent
   que sous html.js, et disparaissent avec prefers-reduced-motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* — Accueil : les mots montent depuis la ligne de base, puis la porte s'ouvre — */
  .js .lockup--hero { clip-path: inset(-.3em -1em 0 -1em); }
  .js .hero.is-pre .lockup--hero .lockup__w, .js .hero.is-pre .lockup--hero .lockup__door { transform: translateY(105%); }
  .js .lockup--hero .lockup__w, .js .lockup--hero .lockup__door { transition: transform .8s var(--ease-mech); }
  .js .lockup--hero .lockup__door { transition-delay: .12s; }
  .js .lockup--hero .lockup__w--b { transition-delay: .2s; }
  .js .lockup--hero .lockup__leaf { transition-delay: .85s; }
  .js .hero.is-pre .hero__cote i { transform: scaleX(0); }
  .js .hero__cote i { transition: transform .9s var(--ease-mech) .9s; }
  .js .hero__cote i:first-child { transform-origin: right; }
  .js .hero__cote i:last-child { transform-origin: left; }
  .js .hero.is-pre .hero__cote span { opacity: 0; }
  .js .hero__cote span { transition: opacity .3s steps(3) 1.2s; }
  .js .hero.is-pre .key__label { transform: translateY(30%); opacity: 0; }
  .js .key__label { transition: transform .7s var(--ease-mech) .55s, opacity .3s linear .55s; }
  .js .key--see .key__label { transition-delay: .65s; }

  /* fin de l'intro : plus de masque autour du logo (le vantail déborde en s'ouvrant, puis on zoome) */
  .js .hero.is-live .lockup--hero { clip-path: none; }
  /* la porte du fond s'allume en grésillant, une fois le vantail ouvert */
  .js .tunnel__lit { animation: lit 1.6s steps(1, end) 2.1s both; }
  @keyframes lit { 0% { opacity: .1; } 12% { opacity: 1; } 18% { opacity: .2; } 30% { opacity: 1; } 36% { opacity: .35; } 46%, 100% { opacity: 1; } }
  /* l'invitation à entrer : trois petits rebonds, puis elle se tait */
  .js .hero__hint i { animation: nudge 1s ease-in-out 3s 3; }
  @keyframes nudge { 50% { transform: translateY(5px); } }

  /* — Titres découpés : chaque lettre remonte dans sa fente — */
  /* la fente laisse de la place au-dessus des capitales : accents (È, É, Ç) jamais coupés */
  .js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .22em 0 .04em; margin: -.22em 0 -.04em; }
  .js [data-split] .c { display: inline-block; transform: translateY(108%); transition: transform .7s var(--ease-mech); transition-delay: calc(var(--i) * 28ms); }
  .js [data-split].is-in .c { transform: none; }

  /* — Infos : les panneaux coulissent latéralement — */
  .js .panel::after {
    content: ""; position: absolute; inset: 0; z-index: 3; background: var(--ink);
    transform-origin: right; transition: transform .7s var(--ease-mech);
    transition-delay: calc(var(--k, 0) * 70ms);
    pointer-events: none;
  }
  .js .panel.is-in::after { transform: scaleX(0); }
  .js .panel:not(.is-in) .price-bars i { transform: scaleX(0); }
  .js .price-bars tr:nth-child(2) i { transition-delay: .08s; }
  .js .price-bars tr:nth-child(3) i { transition-delay: .16s; }
  .js .price-bars tr:nth-child(4) i { transition-delay: .24s; }
  .js .price-bars tr:nth-child(5) i { transition-delay: .32s; }

  /* — Réservation : RÉSERVEZ s'étire à l'entrée — */
  .js .book__big { transition: transform 1s var(--ease-mech); }
  .js .book:not(.is-in) .book__big { transform: scaleX(.62); }
  .js .book:not(.is-in) .book__wide { transform: translateX(-4%); opacity: 0; }
  .js .book__wide { transition: transform .9s var(--ease-mech) .15s, opacity .3s steps(3) .15s; }

  /* — Plan du site : les traits de cote se tracent, porte après porte — */
  .js .plan:not(.is-open) .lead polyline { stroke-dashoffset: 1; }
  .js .plan .lead polyline { transition: stroke-dashoffset .7s var(--ease-mech); transition-delay: calc(var(--k, 0) * 110ms); }
  .js .plan:not(.is-open) .lead circle { transform: scale(0); }
  .js .plan .lead circle { transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ease-mech); transition-delay: calc(var(--k, 0) * 110ms); }
  .js .plan:not(.is-open) .plan__item { opacity: 0; }
  .js .plan .plan__item { transition: opacity .25s steps(3); transition-delay: calc(.45s + var(--k, 0) * 110ms); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-room]:not(.is-open) .hatch i:first-of-type { transform: translateX(-101%); }
  .js [data-room]:not(.is-open) .hatch i:last-of-type { transform: translateX(101%); }
  .js [data-room]:not(.is-open) .hatch b { opacity: 0; }
  /* pas de transition du tout (une durée infime animerait toutes les propriétés, tailles comprises) */
  *, *::before, *::after { animation: none !important; transition: none !important; }
}