/* =========================================================
   POLINE — Brasserie parisienne contemporaine
   Direction artistique : ANDMORE
   Palette bordeaux / crème, un seul accent rouge fil.
   ========================================================= */

:root {
  /* Palette */
  --wine-950: #2a0c0f;
  --wine-900: #3a1013;
  --wine-850: #431216;
  --wine-800: #4a1519;   /* fond signature du logo */
  --wine-700: #5a1c20;
  --wine-600: #6d262a;
  --cream:    #f2e7c7;
  --cream-2:  #efe1bf;
  /* Accent = le laiton de l'identité (dorure des cartes, sceaux, monogramme).
     Deux valeurs, parce qu'un seul or ne peut pas être lisible sur les deux fonds :
       --accent      #c6a15b  sur bordeaux  → 6,12:1  (AA)
       --accent-ink  #776137  sur crème     → 4,80:1  (AA)
     Le laiton clair tombe à 1,97:1 sur crème : il n'y sert qu'au décor (filets, ornements). */
  --accent:      #c6a15b;
  --accent-ink:  #776137;   /* 4,80:1 sur la crème */
  --accent-soft: #b69454;   /* survol du bouton plein */
  --brass:       #c6a15b;   /* alias historique */
  --green:       #2b3a31;   /* vert marbre (bar) */

  /* Ancien accent orange-rouge, écarté : hors identité, et 3,25:1 sur crème (échec AA).
     Conservé pour mémoire, plus utilisé nulle part. */
  --rouge-legacy: #db5227;

  --cream-90: rgba(242, 231, 199, 0.90);
  --cream-70: rgba(242, 231, 199, 0.70);
  --cream-52: rgba(242, 231, 199, 0.52);
  --cream-38: rgba(242, 231, 199, 0.38);
  --line:     rgba(242, 231, 199, 0.16);
  --line-2:   rgba(242, 231, 199, 0.28);

  /* Type */
  --serif: "Bodoni Moda", "Times New Roman", serif;
  --sans:  "Manrope", system-ui, -apple-system, sans-serif;

  /* Rythme */
  --wrap: 1240px;
  --gutter: clamp(22px, 5vw, 72px);

  /* Échelle de rayons — 8 valeurs ad hoc traînaient dans la feuille.
     Serré à l'intérieur, plus doux sur les conteneurs. */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 999px;
  --radius: var(--r-xs);          /* alias historique */

  /* Échelle de profondeur — remplace les z-index posés au jugé. */
  --z-base:     1;
  --z-raised:  10;
  --z-bookbar: 60;   /* barre « Réserver » fixe en bas, sur mobile */
  --z-mobmenu: 65;
  --z-nav:     70;
  --z-peek:    80;   /* aperçu de plat qui suit le curseur */
  --z-cursor:  85;   /* le curseur passe au-dessus de l'aperçu */
  --z-grain:   90;   /* le grain passe au-dessus du contenu, sous les couches modales */
  --z-modal:  100;
  --z-loader: 200;

  /* Courbes. Une seule easing pour tout donnait un mouvement plat. */
  /* Longueur des fondus entre sections — le seul réglage à toucher.
       35vh  = transition courte, on devine la limite
       62vh  = réglage actuel, la couleur glisse sans qu'on la voie changer
       85vh  = très étalé, presque un écran entier */
  --blend-default: clamp(340px, 62vh, 820px);
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);   /* sortie douce, entrées */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* léger rebond, micro-interactions */
  --ease-io:     cubic-bezier(0.65, 0, 0.35, 1);  /* symétrique, déplacements */

  --t-fast: 0.16s;
  --t:      0.28s;
  --t-mid:  0.5s;
  --t-slow: 0.9s;

  /* Ombres teintées du fond bordeaux plutôt que du noir pur. */
  --shadow-sm: 0 2px 10px rgba(20, 6, 8, 0.22);
  --shadow-md: 0 14px 38px rgba(20, 6, 8, 0.34);
  --shadow-lg: 0 34px 80px rgba(20, 6, 8, 0.46);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--wine-900);
  color: var(--cream);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
select, input { font-family: inherit; color: inherit; }
h1, h2, h3, h4, h5 { font-weight: 500; line-height: 1.02; }

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

/* ---------- Grain overlay ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(42, 12, 15, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Le lettrage composé en Bodoni est remplacé par le vrai logo (CI/Logo).
   Ratio 2,73:1 — on le pilote par la hauteur. */
.nav__logo-mark {
  display: block;
  height: clamp(26px, 2.6vw, 34px);
  width: auto;
  transition: height 0.4s var(--ease);
}
.is-scrolled .nav__logo-mark { height: clamp(22px, 2.2vw, 28px); }
.nav__links {
  display: flex;
  gap: clamp(18px, 2.4vw, 38px);
  margin-left: auto;
  margin-right: clamp(18px, 2.4vw, 38px);
}
.nav__links a {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--cream-70);
  position: relative;
  padding: 6px 0;
  transition: color 0.3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover { color: var(--cream); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 16px; }

.lang {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--cream-52);
}
.lang__opt { transition: color 0.3s var(--ease); }
.lang__opt.is-active { color: var(--cream); }
.lang__sep { opacity: 0.4; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 13px 26px;
  border-radius: 999px;
  transition: transform 0.25s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:active { transform: scale(0.97); }

.btn--solid { background: var(--accent); color: var(--wine-950); box-shadow: 0 10px 30px rgba(198,161,91,0.26); }
.btn--solid:hover { background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(198,161,91,0.34); }

.btn--book {
  border: 1px solid var(--accent);
  color: var(--cream);
  padding: 11px 24px;
}
.btn--book:hover { border-color: var(--accent); background: var(--accent); color: var(--wine-950); }

.btn--outline {
  border: 1px solid var(--line-2);
  color: var(--cream);
}
.btn--outline:hover { border-color: var(--cream); }

.btn--outline-dark {
  border: 1px solid rgba(74,21,25,0.35);
  color: var(--wine-800);
}
.btn--outline-dark:hover { background: var(--wine-800); color: var(--cream); border-color: var(--wine-800); }

/* Les barres sont maintenant dans .nav__burger-bars, à côté du libellé « Menu ».
   Le sélecteur descendant d'origine attrapait aussi le libellé et le posait
   en absolu par-dessus les traits. */
.nav__burger { display: none; }
.nav__burger-bars span {
  background: var(--cream);
  transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
}

/* ---------- Mobile menu ---------- */
.mobilemenu {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobmenu);
  background: var(--wine-950);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
body.menu-open .mobilemenu { opacity: 1; visibility: visible; }
.mobilemenu__links {
  display: flex;
  flex-direction: column;
  gap: 26px;
  text-align: center;
}
.mobilemenu__links a {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--cream-70);
}
.mobilemenu__links a.is-accent { color: var(--accent); font-style: italic; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px var(--gutter) 90px;
  background:
    radial-gradient(120% 90% at 50% 8%, var(--wine-700) 0%, var(--wine-850) 42%, var(--wine-950) 100%);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02) brightness(0.86);
  transform: scale(1.06);
  animation: heroZoom 22s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.16) translateY(-1.5%); }
}
/* Voile nettement allégé : chez les références, la photo n'est pas noyée, elle
   respire et la typo se pose dessus. On garde juste assez de densité en haut
   pour la nav et en bas pour la barre de réservation. La lueur chaude passe de
   l'ancien orange au laiton de la marque. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(65% 50% at 80% 86%, rgba(198,161,91,0.16) 0%, transparent 58%),
    linear-gradient(to bottom,
      rgba(42,12,15,0.55) 0%,
      rgba(42,12,15,0.10) 34%,
      rgba(42,12,15,0.08) 55%,
      rgba(42,12,15,0.72) 100%);
}
.hero__echo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(9rem, 34vw, 34rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 231, 199, 0.10);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.hero__inner {
  position: relative;
  z-index: 3;
  max-width: none;
  margin-inline: auto;
  width: 100%;
  text-align: center;
}
.hero__word { text-shadow: 0 2px 40px rgba(20,6,8,0.5); }
.hero__eyebrow {
  font-size: clamp(0.68rem, 1.3vw, 0.8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-52);
  margin-bottom: clamp(24px, 5vh, 46px);
}
.hero__word {
  font-family: var(--serif);
  font-weight: 600;
  margin-bottom: 0.12em;
}
.hero__sub {
  font-size: clamp(1rem, 1.8vw, 1.32rem);
  color: var(--cream-90);
  max-width: 46ch;
  margin: 0 auto clamp(34px, 6vh, 54px);
  font-weight: 300;
}

/* ---------- Quick-bar ---------- */
.qbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: rgba(242, 231, 199, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 10px 10px 22px;
  max-width: 720px;
  margin-inline: auto;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.qbar__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  flex: 1;
  min-width: 0;
}
.qbar__field label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-52);
  padding-left: 2px;
}
.qbar__field select,
.qbar__field input {
  background: transparent;
  border: none;
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 2px;
  width: 100%;
  cursor: pointer;
}
.qbar__field select:focus,
.qbar__field input:focus { outline: none; }
.qbar__field select option { background: var(--wine-800); color: var(--cream); }
.qbar__field + .qbar__field { border-left: 1px solid var(--line); padding-left: 18px; }
.qbar__go { flex: 0 0 auto; }

/* date input color scheme */
input[type="date"] { color-scheme: dark; }
::-webkit-calendar-picker-indicator { filter: invert(0.8) sepia(0.3); cursor: pointer; }

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--cream-52), transparent);
  z-index: 2;
}
.hero__cue::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 46px;
  background: var(--cream);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* =========================================================
   SECTIONS — commun
   ========================================================= */
.section { padding: clamp(90px, 14vh, 170px) 0; position: relative; }

.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-52);
  margin-bottom: clamp(28px, 5vw, 52px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--accent);
}
.kicker--dark { color: rgba(74,21,25,0.6); }
.kicker--dark::before { background: var(--accent-ink); }

.h-display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 6.2vw, 5.1rem);
  line-height: 1.1;            /* place pour les accents et les jambages */
  letter-spacing: -0.005em;
}
.lead {
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--cream-90);
  max-width: 40ch;
}
.body {
  font-size: 1.02rem;
  color: var(--cream-70);
  max-width: 54ch;
  font-weight: 300;
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   HISTOIRE
   ========================================================= */
.histoire__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.histoire__lead .h-display { margin-bottom: 0.5em; }
.histoire__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  font-family: var(--serif);
  padding: clamp(30px, 4vw, 50px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(242,231,199,0.02);
}
.drop__word {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cream-52);
}
.drop__u {
  display: inline-block;
  color: var(--accent);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), max-width 0.6s var(--ease);
}
.histoire__drop.is-in .drop__u {
  opacity: 0;
  transform: translateY(-10px) rotate(-8deg);
}
.drop__word--final {
  color: var(--cream);
  opacity: 0.35;
  transform: translateY(6px);
  transition: opacity 0.7s 0.4s var(--ease), transform 0.7s 0.4s var(--ease);
}
.histoire__drop.is-in .drop__word--final { opacity: 1; transform: none; }
.drop__arrow { width: 1px; height: 30px; background: var(--line-2); }

.pull {
  margin-top: clamp(60px, 9vw, 120px);
  max-width: 32ch;
  margin-inline: auto;
  text-align: center;
}
.pull p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.7rem);
  line-height: 1.28;
  color: var(--cream);
}

/* =========================================================
   CONCEPT
   ========================================================= */
.concept__grid {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: end;
}
.concept__text .h-display { margin: 0.35em 0 0.6em; max-width: 19ch; }
.concept__text .lead { margin-bottom: 1.2em; }

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--wine-850);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
  filter: saturate(0.92) brightness(0.94);
}
.media:hover img { transform: scale(1.04); }
.media--tall { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 16 / 8; margin-top: clamp(40px, 6vw, 80px); }
.media figcaption {
  position: absolute;
  left: 16px; bottom: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  z-index: 2;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
/* Fallback quand la photo n'est pas encore fournie */
.media--empty { background: linear-gradient(135deg, var(--wine-700), var(--wine-950)); }
.media--empty img { display: none; }
.media--empty::after {
  content: "Photo à venir";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cream-38);
}
/* Sur le hero, le repli reste muet : le wordmark occupe déjà le centre. */
.hero__media.media--empty::after { content: none; }
.hero__media.media--empty { background: linear-gradient(135deg, var(--wine-700), var(--wine-950)); }

/* =========================================================
   BON & BEAU
   ========================================================= */
.bonbeau__pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
.bonbeau__col { max-width: 30ch; }
.bb-word {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 9vw, 7rem);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.3em;
}
.bonbeau__col:nth-child(3) .bb-word { font-style: italic; }
.bonbeau__col p { font-size: 1.06rem; color: var(--cream-70); font-weight: 300; }
.bonbeau__amp {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  color: var(--accent);
  align-self: center;
  opacity: 0.85;
}

/* =========================================================
   CARTE — inversion crème
   ========================================================= */
.carte {
  background: var(--cream);
  color: var(--wine-900);
}
.carte__head { text-align: center; margin-bottom: clamp(50px, 8vw, 90px); }
.carte__head .kicker { justify-content: center; }
.carte__head .h-display { color: var(--wine-900); margin-bottom: 0.4em; }
.carte__note {
  color: rgba(74,21,25,0.7);
  max-width: 44ch;
  margin: 0 auto;
  font-weight: 300;
}

.carte__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 5vw, 70px);
}
.menu-group__title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--wine-800);
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(74,21,25,0.22);
}
.menu-list { list-style: none; display: flex; flex-direction: column; gap: 26px; }
.menu-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  align-items: baseline;
}
.menu-list__name {
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--wine-900);
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}
.dots { flex: 1; border-bottom: 1px dotted rgba(74,21,25,0.35); transform: translateY(-4px); }
.menu-list__price {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-ink);
}
.menu-list__price::after { content: " €"; font-size: 0.72em; opacity: 0.7; }
.menu-list__desc {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  color: rgba(74,21,25,0.62);
  font-weight: 300;
  margin-top: 4px;
}

.carte__lunch {
  margin-top: clamp(50px, 8vw, 90px);
  padding: clamp(28px, 4vw, 44px);
  background: var(--wine-800);
  color: var(--cream);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.carte__lunch h4 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin-bottom: 8px; }
.carte__lunch p { color: var(--cream-70); font-weight: 300; max-width: 46ch; }
.carte__lunch .btn--outline-dark { border-color: rgba(242,231,199,0.4); color: var(--cream); }
.carte__lunch .btn--outline-dark:hover { background: var(--cream); color: var(--wine-800); border-color: var(--cream); }

/* =========================================================
   LIEU
   ========================================================= */
.lieu .h-display { margin-bottom: clamp(40px, 6vw, 70px); }
.lieu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  margin-bottom: clamp(50px, 8vw, 90px);
}
.lieu__temps { border-top: 1px solid var(--line-2); padding-top: 26px; }
.lieu__time {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--cream);
  display: block;
  margin-bottom: 16px;
}
.lieu__temps p { color: var(--cream-70); font-weight: 300; max-width: 40ch; }

.lieu__info {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: stretch;
}
.lieu__coords {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 34px 24px;
  align-content: center;
}
.lieu__block h4 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-52);
  margin-bottom: 12px;
}
.lieu__block p { font-size: 1.02rem; color: var(--cream-90); font-weight: 300; line-height: 1.75; }
.lieu__block .muted { color: var(--cream-52); }
.link-underline {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.link-underline:hover { color: var(--accent); }
.lieu__block a.link-underline { margin-top: 0; }

.lieu__map {
  position: relative;
  min-height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  filter: saturate(0.75);
  background: repeating-linear-gradient(45deg, var(--wine-850), var(--wine-850) 22px, var(--wine-800) 22px, var(--wine-800) 44px);
}
.lieu__map::before {
  content: "Route d'Arlon · Luxembourg";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cream-52);
  z-index: 0;
}
.lieu__map iframe { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }
.lieu__map-btn {
  position: relative;
  z-index: 2;
  align-self: center;
  margin: auto;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(42,12,15,0.6);
  color: var(--cream);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lieu__map { display: flex; align-items: center; justify-content: center; }
.lieu__map-btn:hover { background: var(--cream); color: var(--wine-900); border-color: var(--cream); }

/* =========================================================
   RESERVER
   ========================================================= */
.reserver {
  background:
    radial-gradient(90% 120% at 50% 100%, var(--wine-700) 0%, var(--wine-900) 50%, var(--wine-950) 100%);
  text-align: center;
  overflow: hidden;
}
.reserver__echo {
  position: absolute;
  bottom: -0.18em; left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(4rem, 15vw, 15rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242,231,199,0.06);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.reserver__inner { position: relative; z-index: 2; max-width: 780px; }
.reserver__title { margin-bottom: 0.35em; }
.reserver__sub {
  font-size: clamp(1rem, 1.9vw, 1.28rem);
  color: var(--cream-70);
  font-weight: 300;
  max-width: 40ch;
  margin: 0 auto clamp(38px, 6vw, 56px);
}

.bigform {
  background: rgba(242,231,199,0.05);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 32px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.bigform__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.bigform__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: rgba(42,12,15,0.35);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  transition: border-color 0.3s var(--ease);
}
.bigform__field:focus-within { border-color: var(--cream-52); }
.bigform__field label {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-52);
}
.bigform__field select,
.bigform__field input {
  background: transparent;
  border: none;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--cream);
  cursor: pointer;
}
.bigform__field select:focus,
.bigform__field input:focus { outline: none; }
.bigform__field select option { background: var(--wine-800); }
.bigform__go { width: 100%; padding: 16px; font-size: 0.9rem; }

.reserver__alt {
  margin-top: 28px;
  font-size: 0.95rem;
  color: var(--cream-52);
  font-weight: 300;
}
.reserver__alt .link-underline { margin-left: 6px; margin-top: 0; color: var(--cream); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--wine-950);
  border-top: 1px solid var(--line);
  padding: clamp(60px, 8vw, 90px) 0 40px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr 1fr auto;
  gap: 40px;
  align-items: start;
}
.footer__word { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; display: block; }
.footer__tag {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--cream-52);
  padding-left: 4px;
}
.footer__col h5 {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-52);
  margin-bottom: 14px;
  font-weight: 600;
}
.footer__col p { font-size: 0.92rem; color: var(--cream-70); font-weight: 300; line-height: 1.9; }
.footer__col a { transition: color 0.3s var(--ease); }
.footer__col a:hover { color: var(--cream); }
.footer__base {
  margin-top: clamp(50px, 7vw, 80px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--cream-52);
  letter-spacing: 0.03em;
}

/* =========================================================
   STICKY MOBILE BOOK BAR
   ========================================================= */
.bookbar {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: var(--z-bookbar);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px 12px 20px;
  background: rgba(42,12,15,0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  transform: translateY(150%);
  transition: transform 0.5s var(--ease);
}
.bookbar.is-visible { transform: none; }
.bookbar__text { display: flex; flex-direction: column; line-height: 1.3; }
.bookbar__text strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.bookbar__text span { font-size: 0.68rem; color: var(--cream-52); }
.bookbar .btn { padding: 11px 22px; }

/* =========================================================
   MODAL RESERVATION (Zenchef)
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 6, 8, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal__panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  height: min(720px, 88vh);
  background: var(--wine-850);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.4s var(--ease);
  box-shadow: 0 40px 120px rgba(0,0,0,0.5);
}
.modal.is-open .modal__panel { transform: none; }
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.modal__brand { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.modal__close { width: 34px; height: 34px; position: relative; border-radius: 50%; transition: background 0.3s var(--ease); }
.modal__close:hover { background: rgba(242,231,199,0.08); }
.modal__close span {
  position: absolute; top: 50%; left: 50%;
  width: 15px; height: 1.5px; background: var(--cream);
}
.modal__close span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.modal__close span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.modal__body { flex: 1; position: relative; overflow: hidden; }
.modal__body iframe { width: 100%; height: 100%; border: 0; display: block; }

.modal__loading,
.modal__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 30px;
  text-align: center;
  color: var(--cream-70);
}
.modal__fallback p { max-width: 34ch; font-weight: 300; }
.modal__fallback-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.spinner {
  width: 30px; height: 30px;
  border: 2px solid var(--line-2);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--wine-950);
  padding: 22px 0;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 34s linear infinite;
}
.marquee__track span {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-style: italic;
  color: var(--cream-70);
}
.marquee__dot { color: var(--accent); font-style: normal !important; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   REVEAL CLIP (images) + parallax
   ========================================================= */
.reveal-clip {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 1.1s var(--ease), opacity 0.6s var(--ease);
}
.reveal-clip.is-in { clip-path: inset(0 0 0 0); opacity: 1; }

/* Parallax : les images sont sur-dimensionnées pour glisser sans laisser de vide.
   Le mouvement est piloté en JS (propriété CSS `translate`, universelle). */
.gmedia img,
.media--tall img {
  position: absolute;
  top: -16%; left: 0;
  width: 100%; height: 132%;
  object-fit: cover;
  will-change: translate;
}
.media--tall { position: relative; }

/* Décalé (stagger) à l'apparition de la galerie */
.gmedia--b { transition-delay: 0.12s; }

/* CSS officiel Lenis (smooth-scroll) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* =========================================================
   GALERIE
   ========================================================= */
.gallery { background: var(--wine-850); }
.gallery__intro { max-width: min(760px, 92%); margin-bottom: clamp(34px, 5vw, 60px); }
.gallery__intro .h-display { max-width: 20ch; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Les tuiles étaient à hauteur zéro : leurs images sont en position absolue,
   elles ne poussaient donc pas la ligne, et `grid-row: span 2` portait sur des
   lignes explicites en `auto`. Un `aspect-ratio` donne une hauteur à la tuile,
   quoi qu'il arrive. */
.gmedia { box-shadow: 0 24px 60px rgba(20,6,8,0.4); position: relative; }
.gmedia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Mosaïque irrégulière : cinq tuiles de formats différents, pas une grille
   sage de vignettes égales. */
.gmedia--a { grid-column: span 3; aspect-ratio: 4 / 5; }
.gmedia--b { grid-column: span 3; aspect-ratio: 1 / 1;  margin-top: clamp(30px, 7vh, 90px); }
.gmedia--c { grid-column: span 2; aspect-ratio: 3 / 4; }
.gmedia--d { grid-column: span 4; aspect-ratio: 16 / 10; }
.gmedia--e { grid-column: span 2; aspect-ratio: 3 / 4;  margin-top: clamp(-60px, -4vw, -20px); }
@media (max-width: 760px) {
  .gmedia--a, .gmedia--b, .gmedia--c, .gmedia--d, .gmedia--e {
    grid-column: span 6; margin-top: 0; aspect-ratio: 4 / 3;
  }
}

/* =========================================================
   AMBIANCE (pleine largeur, parallax)
   ========================================================= */
.ambiance {
  position: relative;
  min-height: clamp(520px, 82vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.ambiance__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ambiance__img { position: absolute; top: -14%; left: 0; width: 100%; height: 128%; object-fit: cover; filter: saturate(0.85) brightness(0.66); will-change: translate; }
.ambiance__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(42,12,15,0.96) 2%, rgba(42,12,15,0.55) 40%, rgba(42,12,15,0.35) 100%),
    linear-gradient(to right, rgba(42,12,15,0.7), transparent 60%);
}
.ambiance__content {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin-inline: auto;
  width: 100%;
  padding: clamp(50px, 8vw, 100px) var(--gutter);
}
.ambiance__content .kicker { color: var(--brass); }
.ambiance__content .kicker::before { background: var(--brass); }
.ambiance__content .h-display { max-width: 22ch; margin-bottom: 0.5em; }
.ambiance__text {
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  font-weight: 300;
  color: var(--cream-90);
  max-width: 46ch;
}

/* =========================================================
   PRÉCHARGEUR
   ========================================================= */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: var(--wine-950);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { display: grid; place-items: center; }

/* Le monogramme tourne pendant le chargement.
   Deux mouvements superposés : une rotation continue, et une respiration
   d'échelle plus lente — sinon ça tourne comme une roue de chargement. */
.loader__mark {
  /* Boîte carrée + contain : le centre de rotation coïncide exactement avec
     le centre optique du monogramme, quel que soit son rapport de forme. */
  width: clamp(72px, 10vw, 120px);
  height: clamp(72px, 10vw, 120px);
  object-fit: contain;
  transform-origin: 50% 50%;
  animation: monoSpin 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes monoSpin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .loader__mark { animation: none; }
}

.loader__tag {
  font-size: 0.72rem; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--cream-52); display: block; margin-top: 12px;
  opacity: 0; animation: loadWord 0.9s var(--ease) forwards 0.35s;
}
.loader__bar {
  display: block; width: 120px; height: 1px; margin: 28px auto 0;
  background: var(--line-2); overflow: hidden; position: relative;
}
.loader__bar i {
  position: absolute; inset: 0; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  animation: loadBar 1.15s var(--ease) forwards 0.2s;
}
@keyframes loadWord { to { opacity: 1; transform: none; } }
@keyframes loadBar { to { transform: scaleX(1); } }

/* Entrée du hero (jouée pendant que le préchargeur se lève).
   Le mot n'est plus dans cette liste : il a sa propre cascade lettre à lettre,
   et les deux se marchaient dessus — le fondu du bloc masquait les lettres
   pendant qu'elles montaient.
   `.hero__sub` a disparu de la page, et `.qbar` vit maintenant dans la barre
   de réservation en bas : elle n'a plus à dépendre de l'entrée du hero. */
@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow { opacity: 0; animation: heroIn 0.9s var(--ease) forwards 0.9s; }
}
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* =========================================================
   RÉVÉLATION MOT-À-MOT (titres)
   ========================================================= */
/* Le masque doit laisser respirer les accents (É) et les jambages (g, p, j).
   On ajoute du padding, compensé par une marge négative pour ne pas décaler la mise en page. */
.split .word {
  display: inline-block;
  white-space: nowrap;       /* le mot ne se coupe pas entre deux lettres */
  vertical-align: top;
  padding: 0.12em 0.02em 0.20em;
  margin: -0.12em -0.02em -0.20em;
}
/* Chaque lettre a son masque : c'est le masque qui coupe, pas le mot,
   sinon les jambages descendants sont rognés. */
.split .char {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0 0.20em;
  margin: -0.12em 0 -0.20em;
}
.split .char > i {
  display: inline-block; font-style: inherit;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.6s var(--ease);
}
.split.is-in .char > i { transform: none; opacity: 1; }

/* =========================================================
   APERÇU DE PLAT AU SURVOL
   ========================================================= */
.dishpeek {
  position: fixed; top: 0; left: 0; z-index: var(--z-peek);
  width: 220px; height: 280px;
  pointer-events: none; opacity: 0;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(20,6,8,0.55);
  transition: opacity 0.3s var(--ease);
  will-change: transform;
}
.dishpeek img { width: 100%; height: 100%; object-fit: cover; }
.dishpeek.is-on { opacity: 1; }

.menu-list li { transition: transform 0.35s var(--ease); }
.menu-list li:hover { transform: translateX(8px); }
.menu-list__name { transition: color 0.3s var(--ease); }
.menu-list li:hover .menu-list__name { color: var(--accent-ink); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__book { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .btn--book { display: none; }
  .nav__burger { display: block; }

  .histoire__grid { grid-template-columns: 1fr; gap: 44px; }
  .histoire__drop { order: -1; }
  .concept__grid { grid-template-columns: 1fr; gap: 40px; }
  .concept__media { max-width: 440px; }
  .bonbeau__pair { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .bonbeau__col { max-width: none; margin-inline: auto; }
  .bonbeau__amp { display: none; }
  .carte__cols { grid-template-columns: 1fr; gap: 44px; }
  .lieu__grid { grid-template-columns: 1fr; gap: 34px; }
  .lieu__info { grid-template-columns: 1fr; }
  .lieu__map { min-height: 340px; order: -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  /* Galerie : les 2 tuiles s'empilent */
  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: clamp(200px, 44vw, 300px); }
  .gmedia--a { grid-column: 1; grid-row: span 2; }
  .gmedia--b { grid-column: 1; grid-row: span 2; }

  .bookbar { display: flex; }
  body { padding-bottom: 84px; }
  .dishpeek { display: none; }
  .menu-list li:hover { transform: none; }
}

@media (max-width: 620px) {
  :root { --gutter: 22px; }
  .qbar {
    flex-direction: column;
    align-items: stretch;
    border-radius: 20px;
    padding: 16px;
    gap: 14px;
  }
  .qbar__field { padding: 10px 14px; background: rgba(42,12,15,0.3); border: 1px solid var(--line); border-radius: 10px; }
  .qbar__field + .qbar__field { border-left: 1px solid var(--line); padding-left: 14px; }
  .qbar__go { width: 100%; padding: 15px; }
  .hero__sub { font-size: 1.08rem; }

  .bigform__row { grid-template-columns: 1fr; }
  .carte__lunch { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; }
  .modal { padding: 0; }
  .modal__panel { max-width: none; height: 100dvh; border-radius: 0; border: none; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal-clip { opacity: 1; clip-path: none; transition: none; }
  .split .word > i { transform: none; transition: none; }
  .loader__word, .loader__tag, .loader__bar i { animation: none !important; opacity: 1; }
  .hero__cue::after,
  .spinner,
  .hero__img,
  .marquee__track { animation: none !important; }
  .media img { transition: none; }
  .drop__u, .drop__word--final { transition: none; }
  * { scroll-behavior: auto !important; }
}


/* ---------- Logo dans le hero ---------- */
/* Le <h1> reste un <h1> (SEO, lecteurs d'écran) ; il porte l'image du logo. */
.hero__word img {
  display: block;
  width: min(88vw, 1180px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 2px 40px rgba(20, 6, 8, 0.5));
}

/* ---------- Monogramme ---------- */
/* Sceau de la marque : discret, en filigrane doré. */
.monogram {
  display: block;
  width: clamp(46px, 5vw, 68px);
  height: auto;
  margin-inline: auto;
  opacity: 0.9;
}
.monogram--watermark {
  position: absolute;
  right: clamp(-40px, -3vw, -10px);
  bottom: clamp(-30px, -2vw, -8px);
  width: clamp(180px, 26vw, 380px);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

/* Sceau au-dessus du dernier appel à réserver : le monogramme est le geste
   récurrent de l'identité (cire, dorure sur cartes et serviettes). */
.reserver__seal { margin-bottom: clamp(18px, 3vh, 30px); }


/* =========================================================
   MODERNISATION — états, typographie, surfaces
   ========================================================= */

/* ---------- Focus clavier ----------
   Il n'y en avait aucun sur tout le site : on ne pouvait pas naviguer au clavier
   sans perdre de vue où on était. Anneau laiton, visible sur les deux fonds. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.section--light :where(a, button, input, select):focus-visible,
.carte :where(a, button, input, select):focus-visible {
  outline-color: var(--accent-ink);
}

/* ---------- Retour au clic ----------
   Sans état :active, l'interface ne répond pas sous le doigt. */
.btn:active,
.nav__links a:active,
.link-underline:active { transform: translateY(1px) scale(0.985); }
.btn { transition: background var(--t) var(--ease), color var(--t) var(--ease),
                   border-color var(--t) var(--ease), transform var(--t-fast) var(--ease-spring),
                   box-shadow var(--t) var(--ease); }

/* ---------- Lien d'évitement ----------
   Obligatoire pour la navigation au clavier. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-loader);
  background: var(--cream); color: var(--wine-900);
  padding: 12px 18px; border-radius: var(--r-sm);
  font-family: var(--sans); font-weight: 600; font-size: 0.85rem;
  transition: top var(--t) var(--ease);
}
.skip:focus-visible { top: 12px; }

/* ---------- Typographie ----------
   Titres : plus d'orphelins en fin de ligne. Paragraphes : coupures plus justes. */
h1, h2, h3, .h-display, .hero__sub, .reserver__title { text-wrap: balance; }
p, .menu-list__desc, .histoire__text { text-wrap: pretty; }

/* Les prix s'alignent verticalement : chiffres à chasse fixe. */
.menu-list__price, .bigform time, .formule__price { font-variant-numeric: tabular-nums; }

/* ---------- Nav en verre ----------
   backdrop-filter seul donne un flou plat. Un filet clair en haut et une ombre
   interne simulent la réfraction sur l'arête — c'est ce qui fait « vitre ». */
.nav.is-scrolled {
  box-shadow: inset 0 1px 0 rgba(242, 231, 199, 0.14),
              inset 0 -1px 0 rgba(20, 6, 8, 0.30),
              var(--shadow-sm);
}

/* ---------- Cascade ----------
   Tout apparaissait d'un bloc : une section entière surgissait d'un coup.
   main.js pose --i sur les enfants ; le retard se calcule ici. */
.reveal { transition-delay: calc(var(--i, 0) * 70ms); }
.reveal { transition-duration: var(--t-slow); }

/* Course plus courte et flou qui se dissipe : l'élément se pose au lieu de monter en bloc. */
.reveal { transform: translateY(18px); filter: blur(6px); }
.reveal.is-in { filter: blur(0); }

/* ---------- Parallaxe pilotée par le scroll ----------
   CSS natif, sans une ligne de JS ni d'écouteur : l'animation est liée à la
   position de l'élément dans le viewport. Ignorée par les navigateurs qui ne
   la connaissent pas — le site reste identique pour eux. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ambiance__img,
    .gallery__grid img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes drift {
      from { transform: scale(1.12) translateY(-2.5%); }
      to   { transform: scale(1.12) translateY(2.5%); }
    }

    /* Le filet des kickers se trace à mesure que la section entre. */
    .kicker::before {
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
      transform-origin: left center;
    }
    @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* ---------- Micro-interactions ----------
   Ressort léger sur ce qu'on touche, pas sur ce qu'on lit. */
.menu-list li { transition: transform var(--t) var(--ease-spring); }
.menu-list li:hover { transform: translateX(10px); }

/* Le filet de la ligne de carte se colore et se tend au survol. */
.menu-list li { position: relative; }
.menu-list li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent-ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease-io); opacity: 0.55;
}
.menu-list li:hover::after { transform: scaleX(1); }

/* Bouton : l'ombre suit le soulèvement, sinon il flotte sans poids. */
.btn--solid:hover { box-shadow: var(--shadow-md); }
.btn--solid:active { box-shadow: var(--shadow-sm); }

/* ---------- Lien d'évitement : transform plutôt que top ---------- */
.skip { top: 12px; transform: translateY(-140%); transition: transform var(--t) var(--ease); }
.skip:focus-visible { transform: none; }

/* ---------- Axe optique de Bodoni Moda ----------
   La police porte un axe opsz : ses empattements s'affinent en grand et
   s'épaississent en petit. Sans ça on affiche un seul dessin à toutes les
   tailles, et les grands titres paraissent lourds. */
.h-display, .hero__word, h1, h2 { font-optical-sizing: auto; }
.h-display, .hero__word { font-variation-settings: "opsz" 96; }
.kicker, .menu-list__price, .footer__credit { font-variation-settings: "opsz" 8; }

/* ---------- Dérive horizontale au scroll ----------
   Reprise du geste des références : un léger décalage latéral pendant que la
   section traverse l'écran. Desktop seulement, comme chez eux. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .gallery__intro, .bonbeau__amp, .carte__head {
      animation: slide-x linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes slide-x {
      from { transform: translateX(38px); }
      to   { transform: translateX(-38px); }
    }
  }
}

/* =========================================================
   COMPOSITION — d'après Onyx et Zimmerl
   Le wordmark est le sujet du hero. La nav se réduit à un sceau, une
   langue et une action ; les rubriques passent dans un panneau.
   ========================================================= */

/* ---------- Sceau circulaire dans la nav ----------
   Le monogramme cerclé, comme le Z de Zimmerl : plus tenu qu'un lettrage
   répété deux fois sur la même page. */
.nav__seal {
  display: grid; place-items: center;
  width: clamp(52px, 5vw, 66px); aspect-ratio: 1;
  border: 1px solid rgba(198, 161, 91, 0.55);
  border-radius: 50%;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-spring),
              background var(--t) var(--ease);
}
.nav__seal img { width: 46%; height: auto; display: block; }
.nav__seal:hover { border-color: var(--accent); background: rgba(198, 161, 91, 0.08); transform: scale(1.04); }
.is-scrolled .nav__seal { width: clamp(44px, 4.2vw, 54px); }

/* ---------- Bouton « Menu » ---------- */
.nav__burger { display: inline-flex; align-items: center; gap: 0.7em; }
.nav__burger-label {
  font-family: var(--sans); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-90);
}
.nav__burger-bars { display: inline-flex; flex-direction: column; gap: 5px; width: 26px; }
.nav__burger-bars span {
  display: block; height: 1px; width: 100%; background: var(--cream);
  transition: transform var(--t) var(--ease-io), opacity var(--t) var(--ease);
}
body.menu-open .nav__burger-bars span:first-child { transform: translateY(3px) rotate(45deg); }
body.menu-open .nav__burger-bars span:last-child  { transform: translateY(-3px) rotate(-45deg); }
/* Le panneau devient la navigation principale, y compris sur grand écran. */
@media (min-width: 900px) { .nav__burger { display: inline-flex; } }

/* ---------- Hero ---------- */
.hero__eyebrow { color: var(--cream-70); }
/* Le wordmark porte une ombre douce plutôt qu'un voile sur toute la photo. */
.hero__word img { filter: drop-shadow(0 6px 44px rgba(20, 6, 8, 0.55)); }
/* L'écho typographique en fond devient plus discret : il ne doit pas doubler
   le wordmark maintenant que celui-ci traverse l'écran. */
.hero__echo { -webkit-text-stroke-color: rgba(242, 231, 199, 0.05); }

/* ---------- Barre de réservation ancrée ----------
   Sortie du hero. Verre teinté, filet laiton, collée en bas de l'écran :
   la conversion reste à portée sans encombrer la première image. */
.dock {
  position: sticky; bottom: 0; z-index: var(--z-bookbar);
  background: rgba(42, 12, 15, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(198, 161, 91, 0.28),
              inset 0 -1px 0 rgba(20, 6, 8, 0.4),
              var(--shadow-md);
}
.dock__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(12px, 1.6vw, 18px) var(--gutter);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap; justify-content: center;
}
.dock__label {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem); color: var(--cream-90);
  margin: 0; white-space: nowrap;
}
.dock .qbar { margin: 0; }
@media (max-width: 720px) { .dock__label { display: none; } }


/* Le champ date a besoin de sa largeur : rogné, il affiche « 24/08/20… ». */
.dock .qbar__field { flex: 0 1 auto; }
.dock .qbar__field:nth-child(2) { min-width: 8.5rem; }
.dock .qbar__field select,
.dock .qbar__field input { width: 100%; }

/* =========================================================
   CONTENU — sections « La maison » et marqueurs de carte
   ========================================================= */

/* ---------- La maison ----------
   Remplace l'ancien « Bon & Beau », qui ne disait rien. Deux colonnes :
   l'affirmation à gauche, les faits à droite. */
.maison__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 900px) {
  .maison__grid { grid-template-columns: 1.05fr 1fr; }
}
.maison__lead h2 { max-width: 14ch; }
.maison__text p {
  color: var(--cream-70);
  max-width: 56ch;
}
.maison__text p + p { margin-top: 1.1em; }
/* Note de travail : visible en interne, à retirer avant mise en ligne. */
.maison__note {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--accent);
  border: 1px dashed rgba(198, 161, 91, 0.45);
  border-radius: var(--r-sm);
  padding: 0.7em 1em;
  margin-top: 1.6em;
}

/* ---------- Marqueur « Signature » sur la carte ----------
   Repris d'Onyx, qui distingue ses plats permanents. Petite capitale
   laiton, pas une pastille : la carte reste une carte, pas une interface. */
.menu-list__sig {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  vertical-align: 0.25em;
  margin-left: 0.5em;
  white-space: nowrap;
}

/* =========================================================
   IMAGE FIGÉE / CONTENU DÉFILANT
   Repris d'Onyx : `.sticky { position: sticky; top: 0; align-self: flex-start }`
   sur une colonne de grille. L'image reste à l'écran pendant que le texte
   défile devant. En dessous de 900px la grille retombe en une colonne et le
   collant est désactivé : sur téléphone, une image figée mange tout l'écran.
   ========================================================= */
.pinned {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 900px) {
  .pinned { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 110px); }
  .pinned__media {
    position: sticky;
    top: clamp(84px, 12vh, 132px);   /* sous la nav fixe */
    align-self: start;
  }
}
.pinned__media .media { margin: 0; }

/* Le flux de droite : des blocs séparés par un filet, comme une fiche
   technique. Chaque bloc a de l'air pour que le défilement se sente. */
.flow__block {
  padding-block: clamp(26px, 4vh, 48px);
  border-top: 1px solid var(--line);
  max-width: 46ch;
}
.flow__block:first-of-type { border-top: none; padding-top: clamp(18px, 2.5vh, 30px); }
.flow__block h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9em;
}
.flow__block p { color: var(--cream-70); }

/* ---------- Accueil ---------- */
.intro__grid > .h-display { max-width: 22ch; margin-bottom: clamp(28px, 4vw, 52px); }
.intro__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 48px);
}
@media (min-width: 820px) { .intro__cols { grid-template-columns: 1.1fr 1fr; } }
.intro__cols p { max-width: 52ch; }

/* =========================================================
   SOUS-PAGES
   La page d'accueil garde le hero plein écran ; les pages internes
   ouvrent sur un en-tête sobre, sous la nav fixe.
   ========================================================= */
.pagehead {
  padding-top: clamp(140px, 22vh, 220px);
  padding-bottom: clamp(36px, 6vh, 72px);
}
.pagehead h1 {
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  max-width: 20ch;
  margin-top: 0.4em;
}
/* Lien actif dans le panneau : on doit savoir où l'on est. */
.mobilemenu__links a.is-current { color: var(--accent); }
.mobilemenu__links a.is-current::after { content: " —"; }

/* ---------- Contact ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 700px) { .contact__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .contact__grid { grid-template-columns: repeat(4, 1fr); } }
.contact__value { color: var(--cream-90); line-height: 1.7; margin-bottom: 0.6em; }

/* ---------- Pages légales ---------- */
.prose { max-width: 68ch; }
.prose h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0.7em;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--cream-70); margin-bottom: 1em; }
.prose strong { color: var(--cream); }
.prose .todo {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--accent);
  border: 1px dashed rgba(198, 161, 91, 0.45);
  border-radius: var(--r-sm);
  padding: 0.8em 1em;
}

/* =========================================================
   GRILLE CASSÉE — sortir du centre
   Tout était aligné sur un axe central de 1240px. On décale, on déborde,
   on superpose. Règle de sécurité : `overflow-x: clip` sur les sections
   qui débordent, et tous les débords annulés sous 900px — sinon on
   fabrique une barre de défilement horizontale sur téléphone.
   ========================================================= */
.section, .hero, .pagehead { overflow-x: clip; }

/* ---------- Le mot déborde ----------
   Le wordmark sort des deux côtés : on n'en voit pas les extrémités,
   ce qui donne l'échelle. Comme une enseigne trop grande pour la façade. */
/* Ampleur du mot dans le hero. C'est le seul réglage à toucher :
     17vw  = le mot tient dans l'écran
     20vw  = réglage actuel, les extrémités frôlent les bords
     23vw  = le mot déborde franchement */
:root { --hero-size: 20vw; }
@media (min-width: 900px) {
  .hero__inner { text-align: left; padding-left: clamp(24px, 6vw, 96px); }
  .hero__eyebrow { margin-left: 2px; }
}

/* ---------- Les titres sortent à gauche ----------
   Le titre déborde de la colonne de texte : l'œil accroche le premier mot
   avant la marge, et la page cesse d'être un rectangle bien rangé. */
@media (min-width: 1000px) {
  .pagehead h1,
  .intro__grid > .h-display,
  .maison__lead h2 {
    margin-left: clamp(-140px, -7vw, -40px);
    max-width: 26ch;
  }
}

/* ---------- L'image épinglée sort du cadre ---------- */
@media (min-width: 1000px) {
  .pinned__media {
    margin-left: clamp(-180px, -9vw, -60px);
    width: calc(100% + clamp(60px, 9vw, 180px));
  }
  .pinned__media .media img { height: clamp(420px, 62vh, 720px); object-fit: cover; }
  /* Le flux de droite descend : il démarre plus bas que l'image, en décalé. */
  .pinned__flow { padding-top: clamp(60px, 12vh, 140px); }
}

/* ---------- Galerie décalée ----------
   Deux tuiles de tailles différentes, l'une plus basse que l'autre,
   la seconde sortant par la droite. */
@media (min-width: 900px) {
  .gallery__grid { align-items: start; }
  .gallery__grid > *:nth-child(1) { transform: translateY(clamp(20px, 5vh, 70px)); }
  .gallery__grid > *:nth-child(2) {
    margin-right: clamp(-160px, -8vw, -50px);
    width: calc(100% + clamp(50px, 8vw, 160px));
  }
}

/* ---------- La carte respire en asymétrie ----------
   Trois colonnes égales, c'est la mise en page la plus attendue.
   On décale la colonne du milieu vers le bas. */
@media (min-width: 1000px) {
  .carte__cols > *:nth-child(2) { transform: translateY(clamp(28px, 5vh, 64px)); }
  .carte__head { text-align: left; padding-left: clamp(0px, 4vw, 60px); }
}

/* ---------- Le monogramme en filigrane, hors cadre ----------
   Grand, coupé par le bord, très peu opaque : une matière, pas un motif. */
.section--mark { position: relative; }
.section--mark::after {
  content: "";
  position: absolute;
  right: clamp(-120px, -6vw, -40px);
  bottom: clamp(-90px, -5vw, -30px);
  width: clamp(220px, 30vw, 460px);
  aspect-ratio: 1;
  background: url("assets/logo-monogram-gold.svg") center / contain no-repeat;
  opacity: 0.055;
  pointer-events: none;
}
@media (max-width: 899px) { .section--mark::after { display: none; } }

/* =========================================================
   FONDUS ENTRE SECTIONS
   Les sections étaient des aplats posés bout à bout : on passait du bordeaux
   à la crème d'un seul coup, comme deux boîtes empilées. Chaque section pose
   maintenant un dégradé en haut, qui part de la couleur de la précédente et
   se dissout dans la sienne. Aucune ligne, aucune arête.
   ========================================================= */
.section { position: relative; }
.section::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  /* Hauteur du fondu. C'était 360px au maximum : sur un écran de 900px on
     voyait donc une bande, pas une transition. On passe à près d'un écran
     entier, le changement de couleur devient imperceptible. */
  height: var(--blend-h, var(--blend-default));
  /* Un dégradé linéaire laisse une arête visible en haut, là où l'alpha part
     de 1. Ces paliers approchent une courbe d'atténuation : le départ est
     franc, la queue s'étire longuement. */
  background: linear-gradient(to bottom,
    var(--blend-from, transparent) 0%,
    color-mix(in srgb, var(--blend-from, transparent) 88%, transparent) 12%,
    color-mix(in srgb, var(--blend-from, transparent) 66%, transparent) 28%,
    color-mix(in srgb, var(--blend-from, transparent) 40%, transparent) 46%,
    color-mix(in srgb, var(--blend-from, transparent) 18%, transparent) 66%,
    color-mix(in srgb, var(--blend-from, transparent) 6%, transparent)  82%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Les deux plus gros écarts de couleur — l'entrée et la sortie de la carte,
   seule zone claire du site — ont droit à une transition encore plus longue. */
#carte  { --blend-h: clamp(420px, 85vh, 1100px); }
#maison { --blend-h: clamp(420px, 85vh, 1100px); }
/* Le contenu repasse au-dessus du fondu. */
.section > * { position: relative; z-index: 1; }

/* Parcours de couleur : on reste dans la famille bordeaux, du plus sombre au
   plus profond. Pas de virage vers le doré ni vers le rouge vif — l'or reste
   un accent (filets, monogramme, prix), jamais une surface. */
#intro      { --blend-from: var(--wine-950); }
#concept    { --blend-from: var(--wine-800); background: var(--wine-850); }
#gallery    { --blend-from: var(--wine-850); }
#carte      { background: var(--cream); --blend-from: var(--wine-850); }
#maison     { background: var(--wine-900); --blend-from: var(--cream); }
#ambiance   { --blend-from: var(--wine-900); }
#lieu       { --blend-from: var(--wine-800); }
#reserver   { --blend-from: var(--wine-900); }
#contact, #legal, #privacy { --blend-from: var(--wine-950); }

/* La seule zone claire du site reste la carte : texte bordeaux dessus. */
#carte, #carte .h-display { color: var(--wine-900); }

/* ---------- Images ajoutées dans « La maison » et « Le lieu » ---------- */
.maison__media { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .maison__grid { grid-template-columns: 0.9fr 1.1fr; }
  .maison__media { grid-row: span 2; margin-left: clamp(-140px, -7vw, -40px); }
}
.maison__media img, .lieu__media img { width: 100%; height: 100%; object-fit: cover; }
.lieu__media-wrap { margin-bottom: clamp(34px, 6vw, 72px); }
.lieu__media { aspect-ratio: 21 / 9; }


/* =========================================================
   LE MOT DU HERO — composé en typo, plus une image
   Bodoni Moda porte un axe optique : à cette taille on pousse opsz au
   maximum, les empattements s'affinent et le contraste s'ouvre. C'est
   exactement ce pour quoi ce dessin existe.
   ========================================================= */
.hero__word {
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 96;
  font-size: clamp(3.4rem, var(--hero-size), 15rem);
  line-height: 0.9;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
  text-shadow: 0 6px 44px rgba(20, 6, 8, 0.5);
  white-space: nowrap;
}

/* Chaque lettre a son masque : elle monte de sous la ligne, en cascade. */
.hero__word .char {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 0 0.2em;
  margin: -0.1em 0 -0.2em;
}
/* Par défaut la lettre est VISIBLE. L'état caché n'est posé que lorsque le JS
   a confirmé qu'il prend la main (.is-armed). Si le script échoue, si la police
   n'arrive pas, si l'animation ne part pas : le mot reste lisible. Le contraire
   — cacher par défaut et compter sur le JS — laisse un hero vide au moindre
   grain de sable, ce qui s'est produit ici. */
.hero__word .char > i {
  display: inline-block;
  font-style: inherit;
  transition: transform 1s var(--ease), opacity 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.hero__word.is-armed .char > i { transform: translateY(112%) rotate(4deg); opacity: 0; }
.hero__word.is-armed.is-in .char > i { transform: none; opacity: 1; }

/* Un filet laiton se tire sous le mot une fois les lettres posées. */
.hero__word::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 1.1s var(--ease-io) 0.75s;
  margin-top: clamp(14px, 2vh, 26px);
  max-width: 42ch;
}
.hero__word.is-armed::after { transform: scaleX(0); }
.hero__word.is-armed.is-in::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .hero__word .char > i { transform: none; opacity: 1; transition: none; }
  .hero__word::after { transform: scaleX(1); transition: none; }
}

/* =========================================================
   PASSE MOUVEMENT — septembre 2026
   Règles : ce qu'on voit souvent va vite ; les sorties sont plus rapides
   que les entrées ; pas de rebond sur ce qu'on survole ; aucun survol
   qui déplace sur écran tactile.
   ========================================================= */
:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);    /* réponse immédiate, UI */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* déplacements à l'écran */
}

/* ---------- Préchargeur ----------
   Une fois par session. À chaque changement de page, il devient une attente
   de 1,5 s — le script dans <head> pose .is-return avant le premier rendu. */
.is-return .loader { display: none; }
.loader { transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s; }

/* ---------- Survol sur tactile ----------
   Un doigt déclenche :hover et le laisse collé : le bouton reste soulevé,
   la ligne de carte reste décalée. On neutralise les déplacements.
   Placé AVANT l'état :active, sinon il l'écraserait à spécificité égale. */
@media (hover: none), (pointer: coarse) {
  .btn--solid:hover,
  .nav__seal:hover,
  .menu-list li:hover,
  .media:hover img { transform: none; }
  .menu-list li:hover::after,
  .nav__links a:hover::after { transform: scaleX(0); }
}

/* ---------- Appui ----------
   Deux règles :active se contredisaient (scale 0.97 puis translate + 0.985).
   Une seule, et sans rebond : --ease-spring dépassait puis revenait,
   le bouton « tremblait » sous le doigt. */
.btn:active { transform: scale(0.97); }
.btn {
  transition: background var(--t) ease, color var(--t) ease,
              border-color var(--t) ease, box-shadow var(--t) ease,
              transform 160ms var(--ease-out);
}
.nav__seal {
  transition: border-color var(--t) ease, background var(--t) ease,
              transform 160ms var(--ease-out);
}
.nav__seal:active { transform: scale(0.95); }
.lang__opt:active { opacity: 0.6; }

/* ---------- Lignes de carte ----------
   Survolées des dizaines de fois : course courte, sans ressort. */
.menu-list li { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .menu-list li:hover { transform: translateX(6px); }
}

/* ---------- Panneau de navigation ----------
   Il apparaissait d'un bloc, en 0,4 s dans les deux sens. Maintenant : les
   rubriques montent en cascade à l'ouverture, tout s'efface vite à la fermeture. */
.mobilemenu {
  transition: opacity 180ms var(--ease-out), visibility 0s linear 180ms;
}
body.menu-open .mobilemenu {
  transition: opacity 320ms var(--ease-out), visibility 0s;
}
.mobilemenu__links a {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 120ms ease, transform 120ms var(--ease-out), color 200ms ease;
}
body.menu-open .mobilemenu__links a {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out), color 200ms ease;
  transition-delay: calc(80ms + var(--i, 0) * 45ms);
}
@media (hover: hover) and (pointer: fine) {
  .mobilemenu__links a:not(.is-accent):not(.is-current):hover { color: var(--cream); }
}

/* ---------- Modale de réservation ----------
   Entrée posée, sortie franche. Le panneau part de 0.97 avec l'opacité —
   rien n'apparaît de nulle part. Reste centré : une modale n'a pas de déclencheur. */
.modal {
  transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
}
.modal.is-open {
  transition: opacity 280ms var(--ease-out), visibility 0s;
}
.modal__panel {
  transform: translateY(12px) scale(0.97);
  transition: transform 200ms var(--ease-out);
}
.modal.is-open .modal__panel {
  transform: none;
  transition-duration: 340ms;
}

/* ---------- Cascade plafonnée ----------
   Sur une carte de 15 plats, le dernier attendait plus d'une seconde.
   Au-delà du 6e, tout arrive ensemble. */
.reveal { transition-delay: calc(min(var(--i, 0), 6) * 60ms); }

/* ---------- Mouvement réduit ----------
   La règle « .reveal { translateY + flou } » plus haut passait après le bloc
   reduced-motion et le réactivait. Moins de mouvement, pas zéro : on garde
   un fondu court, sans déplacement ni flou. */
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; filter: none; transition: opacity 200ms ease; }
  .mobilemenu__links a,
  body.menu-open .mobilemenu__links a { transform: none; transition: opacity 200ms ease; transition-delay: 0s; }
  .modal__panel, .modal.is-open .modal__panel { transform: none; }
  .btn:active, .nav__seal:active { transform: none; }
}

/* ---------- Attribut hidden ----------
   « display: flex » sur ces deux blocs l'emportait sur [hidden] : le spinner
   restait affiché par-dessus le message de repli. */
.modal__loading[hidden],
.modal__fallback[hidden] { display: none; }

/* ---------- Révélation des photos ----------
   Le masque était posé sur la <figure> elle-même. Chrome compte clip-path
   dans le calcul de visibilité : une figure rognée à 0 % de hauteur n'est
   jamais « visible à 18 % », donc jamais révélée — la galerie « À table »,
   la photo de « La maison » et celle du « Lieu » restaient vides.
   Le cadre reste mesurable ; c'est l'image dedans qui se dévoile. */
.reveal-clip { clip-path: none; transition: opacity 0.6s var(--ease-out); }
.reveal-clip > img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-in-out), transform 1.2s var(--ease);
  transition-delay: inherit;
}
.reveal-clip.is-in > img { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-clip > img { clip-path: none; transition: none; }
}

/* =========================================================
   FOOTER — aligné sur La Table et Le Fin Gourmand
   Même charpente que les deux maisons : marque + réseaux, rubriques,
   visite ; puis « Nos autres maisons » avec les logos, et la ligne légale
   signée Andmore. Filet laiton en tête, comme chez Le Fin Gourmand.
   ========================================================= */
.footer {
  background: linear-gradient(170deg, var(--wine-900) 0%, var(--wine-950) 70%);
  border-top: 1px solid rgba(198, 161, 91, 0.45);
}
.footer__grid {
  grid-template-columns: 1.5fr 1fr 1.2fr auto;
  gap: clamp(32px, 4vw, 56px);
}
.footer__logo { display: block; width: clamp(150px, 14vw, 190px); height: auto; }
.footer__tagline {
  margin-top: 1.2rem; max-width: 34ch;
  font-size: 0.92rem; font-weight: 300; line-height: 1.7; color: var(--cream-70);
}
.footer__col h5 { color: var(--accent); letter-spacing: 0.18em; }
.footer__col a,
.footer__col p {
  display: block; padding-block: 0.3rem;
  font-size: 0.92rem; font-weight: 300; line-height: 1.6; color: var(--cream-70);
  transition: color 200ms ease;
}
.footer__hours { margin-top: 0.6rem; }
.footer__muted { color: var(--cream-52); }

/* Réseaux en pilules, comme chez les deux maisons. */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }
.pill {
  font-family: var(--sans); font-weight: 500; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream);
  border: 1px solid var(--line-2); padding: 0.6em 1.15em; border-radius: var(--r-pill);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease,
              transform 160ms var(--ease-out);
}
.pill:active { transform: scale(0.97); }

/* ---------- Nos autres maisons ---------- */
.footer__sisters {
  margin-top: clamp(50px, 7vw, 80px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.footer__eyebrow {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream-52);
}
.sisters {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: clamp(2.5rem, 7vw, 5rem); margin-top: 1.4rem;
}
.sisters a {
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  opacity: 0.8;
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.sisters img { width: auto; display: block; }
/* Les deux logos n'ont pas le même rapport : on égalise la masse visuelle,
   pas la hauteur. */
.sisters__fg { height: clamp(46px, 5.4vw, 60px); }
.sisters__lt { height: clamp(56px, 6.4vw, 72px); }
.sisters span {
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cream-52);
  transition: color 200ms ease;
}
.sisters a:active { transform: scale(0.97); }

/* ---------- Ligne légale ---------- */
.footer__base { margin-top: clamp(32px, 4vw, 48px); align-items: center; }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.footer__legal a { transition: color 200ms ease; }
.footer__credit { display: inline-flex; align-items: center; gap: 0.55em; }
.footer__credit img { height: 1.05em; width: auto; display: block; opacity: 0.8; transition: opacity 200ms ease; }

@media (hover: hover) and (pointer: fine) {
  .footer__col a:hover,
  .footer__legal a:hover { color: var(--cream); }
  .pill:hover { border-color: var(--accent); color: var(--accent); background: rgba(198, 161, 91, 0.06); }
  .sisters a:hover { opacity: 1; transform: translateY(-3px); }
  .sisters a:hover span { color: var(--accent); }
  .footer__credit:hover img { opacity: 1; }
}

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand, .footer__book { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   TYPOGRAPHIE DE L'IDENTITÉ
   Neigh (Dharmas Studio) pour les titres, en capitales. Inter pour le texte.
   --serif et --sans gardent leur nom pour ne pas réécrire toute la feuille :
   ce sont désormais les rôles « titre » et « texte ».
   ========================================================= */
:root {
  --serif: "Neigh", "Helvetica Neue", Arial, sans-serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --logo-serif: "Bodoni Moda", "Times New Roman", serif;
}
/* Neigh n'a pas d'italique : sans ça, le navigateur penche la romaine
   (« faux italique ») partout où la feuille demandait de l'italique. */
body { font-synthesis: none; }

/* Le grand mot du hero reprend le lettrage du logo : il reste en Bodoni. */
.hero__word { font-family: var(--logo-serif); }

/* Titres en capitales. Les capitales prennent plus de place que la casse
   mixte : on réduit un peu le corps et on ouvre l'interlettrage. */
h1, h2, h3, .h-display, .reserver__title {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.h-display {
  font-size: clamp(2.1rem, 5.2vw, 4.4rem);
  line-height: 1.02;
}
.pagehead h1 { font-size: clamp(2rem, 5.2vw, 3.9rem); }

/* Inter est plus large et plus sombre que Manrope à graisse égale. */
body { font-feature-settings: "cv11", "ss01"; }
.lead { letter-spacing: -0.005em; }

/* ---------- Carte : noms et prix ----------
   Le nom se cassait mot par mot (« Le Ris / de / Veau ») : dans une colonne
   étroite, le libellé, la mention Signature et les points se disputaient la
   ligne. On autorise le retour à la ligne des éléments, pas des mots.
   Le prix était doublé (« 32 € » dans le HTML + « € » ajouté en CSS).
   Les chiffres de Neigh sont décoratifs : les prix passent en Inter à chasse fixe. */
.menu-list__name { flex-wrap: wrap; row-gap: 2px; overflow: visible; }
.menu-list__name .dots { flex: 1 0 16px; }
.menu-list__price {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.menu-list__price::after { content: none; }

/* Neigh est dessinée pour les capitales : en bas de casse, ses approches
   se décousent (« dé jeuner »). Tout ce qui est composé en Neigh passe
   donc en capitales, pas seulement les grands titres. */
h4, h5,
.mobilemenu__links a,
.menu-group__title,
.lieu__time,
.marquee__track span,
.dock__label,
.modal__brand,
.bookbar__text strong,
.bb-word,
.carte__lunch h4,
.prose h2 {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dock__label { font-size: clamp(0.85rem, 1.2vw, 1rem); }

/* =========================================================
   ALIGNEMENT — retour à une seule grille (25/09/2026)
   La « grille cassée » plus haut (titres sortis dans la marge, image
   épinglée qui déborde, galerie décalée, colonne de carte abaissée,
   dérive latérale au scroll) donnait une page où rien ne tombait
   sur le même bord. Tout repart du bord du contenu (.wrap).
   Le monogramme en filigrane reste : c'est une matière, pas du contenu.
   ========================================================= */
@media (min-width: 1000px) {
  /* Titres : plus de débord à gauche. */
  .pagehead h1,
  .intro__grid > .h-display,
  .maison__lead h2 { margin-left: 0; }

  /* Image épinglée : dans le cadre, et le texte démarre à sa hauteur. */
  .pinned__media { margin-left: 0; width: 100%; }
  .pinned__flow { padding-top: 0; }

  /* Carte : trois colonnes sur la même ligne de départ, en-tête au bord. */
  .carte__cols > *:nth-child(2) { transform: none; }
  .carte__head { padding-left: 0; }
}

@media (min-width: 900px) {
  /* Galerie : dans la largeur du contenu, tuiles alignées par rangée. */
  .gallery__grid > *:nth-child(1) { transform: none; }
  .gallery__grid > *:nth-child(2) { margin-right: 0; width: auto; }
}
.gallery__grid { max-width: var(--wrap); }
.gmedia--b, .gmedia--e { margin-top: 0; }
/* Rangée 1 : deux tuiles de même hauteur. Rangée 2 : idem. */
.gmedia--a, .gmedia--b { aspect-ratio: 5 / 4; }
.gmedia--c, .gmedia--d, .gmedia--e { aspect-ratio: auto; height: clamp(260px, 30vw, 420px); }
@media (max-width: 760px) {
  .gmedia--a, .gmedia--b, .gmedia--c, .gmedia--d, .gmedia--e { aspect-ratio: 4 / 3; height: auto; }
}

/* Plus de dérive latérale au scroll : un titre qui glisse n'est jamais aligné. */
.gallery__intro, .bonbeau__amp, .carte__head { animation: none !important; transform: none; }
/* La 5e tuile tombait seule sur une troisième rangée : 2 + 4 + 2 > 6 colonnes.
   Rangée 2 = trois tuiles égales. */
@media (min-width: 761px) { .gmedia--d { grid-column: span 2; } }

/* La maison : la photo était tirée sous le titre (marge négative), et en
   capitales Neigh « LUXEMBOURG » dépassait la colonne. */
@media (min-width: 900px) {
  .maison__media { margin-left: 0; }
  .maison__lead h2 { max-width: none; font-size: clamp(2rem, 3.6vw, 3.4rem); }
}
/* Le texte suit le titre au lieu de flotter au milieu de la hauteur de la photo. */
@media (min-width: 900px) { .maison__grid { grid-template-rows: auto 1fr; } }

/* =========================================================
   CARTE D'OUVERTURE — octobre 2026
   Quatre rubriques et 27 plats : deux colonnes, plus lisibles que trois
   colonnes étroites pour des intitulés longs.
   ========================================================= */
.carte__cols--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(48px, 7vw, 120px);
  row-gap: clamp(56px, 7vw, 96px);
}
@media (max-width: 760px) { .carte__cols--4 { grid-template-columns: 1fr; } }
.carte__cols--4 .menu-list { gap: 22px; }
/* Plats sans description (Pata Negra, desserts) : même rythme que les autres. */
.carte__cols--4 .menu-list li:not(:has(.menu-list__desc)) { padding-bottom: 2px; }
.carte__head .h-display { max-width: none; }
/* Le retrait par défaut des listes (40px) décalait les plats sous le titre de rubrique. */
.menu-list { padding-left: 0; margin: 0; }
/* Sur la page « La carte », l'en-tête de page dit déjà « La carte » :
   l'en-tête de section ferait doublon. Il reste sur l'accueil. */
.pagehead ~ .carte .carte__head { display: none; }

/* =========================================================
   MOBILE — barre de réservation réduite à un bouton
   Les trois champs empilés occupaient 340 px sur 812 : 42 % de l'écran,
   en permanence, sur toutes les pages. Sur téléphone on garde le geste
   (un bouton qui ouvre Zenchef) ; couverts et date se choisissent dans Zenchef.
   ========================================================= */

/* Cibles tactiles : FR/EN et Menu faisaient 17 px de haut (minimum conseillé : 44). */
@media (pointer: coarse) {
  .lang__opt, .nav__burger { position: relative; }
  .lang__opt::after, .nav__burger::after {
    content: ""; position: absolute; inset: -14px -8px;
  }
}

/* Le sur-titre du hero est devenu le <h1> (« Brasserie parisienne à Strassen ») :
   on neutralise la taille par défaut d'un h1, son style reste celui du sur-titre. */
h1.hero__eyebrow { font-family: var(--sans); font-weight: 500; line-height: 1.5; }

/* =========================================================
   TÉLÉPHONE — cibles tactiles et lisibilité (contrôle du 8 oct.)
   Minimum 44 px de haut pour tout ce qu'on touche du doigt,
   11 px minimum pour les petits libellés.
   ========================================================= */
@media (max-width: 720px) {
  .footer__col a { padding-block: 0.7rem; }
  .footer__legal a, .footer__credit { padding-block: 0.6rem; }
  .pill { padding: 0.95em 1.4em; }
  .sisters a { padding: 0.4rem; }
  .link-underline { display: inline-block; padding-block: 0.55rem; }
  .bigform select, .bigform input,
  .qbar__field select, .qbar__field input { min-height: 44px; }
  h1.hero__eyebrow { font-size: 0.75rem; }
  .bigform label, .qbar__field label, .footer__eyebrow, .pill { font-size: 0.72rem; }
  .sisters span { font-size: 0.7rem; }
}

/* =========================================================
   RÉSERVATION — module Zenchef officiel (8 oct.)
   Les champs couverts / date / service ont disparu : le module Zenchef
   ne les reçoit pas, le client les aurait saisis deux fois.
   ========================================================= */
.dock__go { min-width: 15rem; }
.reserver__go { display: flex; width: 100%; max-width: 26rem; margin: clamp(24px, 4vw, 36px) auto 0; padding: 18px 28px; font-size: 0.95rem; }
@media (max-width: 720px) {
  .dock__inner { padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); }
  .dock__go { width: 100%; min-height: 48px; }
}

/* =========================================================
   BANNIÈRE COOKIES
   Discrète, en bas à gauche sur grand écran, pleine largeur sur téléphone.
   « Refuser » et « Accepter » ont exactement le même poids visuel (CNPD).
   ========================================================= */
.cookiebar {
  position: fixed; z-index: var(--z-modal);
  left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px);
  width: min(420px, calc(100vw - 24px));
  padding: 20px 22px 18px;
  background: rgba(42, 12, 15, 0.94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(20, 6, 8, 0.5);
  color: var(--cream);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(12px); }
}
.cookiebar[hidden] { display: none; }
.cookiebar__title {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 1rem; margin-bottom: 0.4rem;
}
.cookiebar__text { font-size: 0.85rem; line-height: 1.55; color: var(--cream-70); }
.cookiebar__text a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.cookiebar__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.cookiebar__btn {
  min-height: 44px; border: 1px solid var(--line-2); color: var(--cream);
  background: rgba(242, 231, 199, 0.06);
}
@media (hover: hover) and (pointer: fine) {
  .cookiebar__btn:hover { border-color: var(--accent); color: var(--accent); }
}
@media (max-width: 720px) {
  .cookiebar { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom)); }
}
.footer__cookies {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .footer__cookies:hover { color: var(--cream); } }
@media (max-width: 720px) { .footer__cookies { padding-block: 0.6rem; } }

/* =========================================================
   GALERIE SUR TÉLÉPHONE ET TABLETTE (correctif du 12 oct.)
   Sous 860 px la grille passe à une colonne, mais les tuiles gardaient
   leurs « span » de la version ordinateur : la grille recréait 6 colonnes
   dont 5 à 0 px, les deux premières photos étaient trop étroites et les
   trois suivantes (248 px) débordaient de leurs rangées de 200 px,
   donc se chevauchaient. Ici : une colonne, une photo par rangée,
   la hauteur vient de la photo.
   ========================================================= */
@media (max-width: 860px) {
  .gallery__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
  }
  .gallery__grid > .gmedia {
    grid-column: 1 / -1;
    grid-row: auto;
    width: auto; height: auto; margin: 0;
    aspect-ratio: 4 / 3;
    transform: none;
  }
  /* Ancienne barre « bookbar » supprimée : son espace réservé laissait
     84 px de vide sous le pied de page. */
  body { padding-bottom: 0; }
}
/* Tablette : une grande photo, puis deux rangées de deux. */
@media (min-width: 600px) and (max-width: 860px) {
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__grid > .gmedia { grid-column: auto; }
  .gallery__grid > .gmedia:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* =========================================================
   MENU LUNCH DE LA SEMAINE (12 oct.)
   Une carte crème sur fond bordeaux : c'est l'offre du midi, elle doit se
   lire d'un coup d'œil — trois temps, deux prix, ce qui est compris.
   ========================================================= */
#lunch { background: var(--wine-900); --blend-from: var(--wine-800); }
#lunch + #concept { --blend-from: var(--wine-900); }
#lunch + #carte   { --blend-from: var(--wine-900); }
.pagehead + #lunch { --blend-from: var(--wine-950); padding-top: clamp(40px, 6vh, 80px); }

.lunch__head { margin-bottom: clamp(32px, 5vw, 56px); }
.lunch__head .h-display { margin: 0.35em 0 0.3em; }
.lunch__when {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}

.lunch__card {
  background: var(--cream); color: var(--wine-900);
  border-radius: var(--r-md);
  padding: clamp(26px, 4.5vw, 60px);
  box-shadow: 0 30px 80px rgba(20, 6, 8, 0.45);
}
.lunch__courses {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.lunch__course h3 {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; color: var(--accent-ink);
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(74, 21, 25, 0.22);
}
.lunch__course p { font-size: 1.02rem; line-height: 1.5; font-weight: 500; color: var(--wine-900); }
.lunch__or {
  display: block; margin: 10px 0;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(74, 21, 25, 0.55);
}

.lunch__prices {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px;
  margin-top: clamp(28px, 4vw, 48px);
}
.lunch__price {
  display: flex; flex-direction: column; gap: 4px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(74, 21, 25, 0.25); border-radius: var(--r-sm);
}
.lunch__price--main { background: var(--wine-800); color: var(--cream); border-color: var(--wine-800); }
.lunch__amount {
  font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; letter-spacing: -0.02em;
}
.lunch__label { font-weight: 600; font-size: 0.98rem; margin-top: 6px; }
.lunch__detail { font-size: 0.85rem; font-weight: 300; opacity: 0.8; }

.lunch__facts {
  list-style: none; padding: 0; margin: clamp(22px, 3vw, 32px) 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.lunch__facts li {
  font-size: 0.8rem; font-weight: 500;
  padding: 0.55em 1em; border-radius: var(--r-pill);
  border: 1px solid rgba(74, 21, 25, 0.28); color: var(--wine-800);
}
.lunch__promise {
  margin-top: 16px; font-weight: 600; font-size: 1rem; color: var(--wine-900);
}
.lunch__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  margin-top: clamp(22px, 3vw, 34px); padding-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid rgba(74, 21, 25, 0.18);
}
.lunch__last { font-size: 0.85rem; color: rgba(74, 21, 25, 0.75); }
.lunch__card .btn--solid { background: var(--wine-800); color: var(--cream); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .lunch__card .btn--solid:hover { background: var(--wine-900); }
}
.lunch__card :where(a, button):focus-visible { outline-color: var(--accent-ink); }

@media (max-width: 860px) {
  .lunch__courses { grid-template-columns: 1fr; gap: 28px; }
  .lunch__prices { grid-template-columns: 1fr; }
  .lunch__actions .btn { width: 100%; min-height: 48px; }
}

/* =========================================================
   VRAIES PHOTOS DU LIEU (12 oct.)
   Photos de nuit, déjà denses et chaudes : on ne les assombrit plus,
   et on redonne de l'appui aux textes posés sur le hero.
   ========================================================= */
.media img { filter: none; }
.hero__img { filter: brightness(0.8); object-position: 50% 42%; }
.hero__scrim {
  background:
    linear-gradient(to bottom,
      rgba(42,12,15,0.62) 0%,
      rgba(42,12,15,0.30) 30%,
      rgba(42,12,15,0.34) 58%,
      rgba(42,12,15,0.82) 100%);
}
h1.hero__eyebrow {
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(20,6,8,0.9), 0 0 24px rgba(20,6,8,0.75);
}
.hero__word { text-shadow: 0 4px 44px rgba(20,6,8,0.6); }
/* Téléphone : la photo est verticale, on cadre sur les lustres et la salle. */
@media (max-width: 720px) { .hero__img { object-position: 50% 50%; } }
/* Le bandeau du lieu est déjà recadré en 21:9. */
.lieu__media img { object-position: 50% 50%; }
/* La photo épinglée de « La cuisine » ne remplissait pas son cadre : une règle
   fixait sa hauteur (62vh) alors que le cadre est en 3:4 — il restait un vide
   sous la photo, où flottait la légende. */
@media (min-width: 1000px) {
  .pinned__media .media--tall img { height: 132%; }
}
/* Galerie, rangée du bas : on cadre sur le sujet (abat-jour, lustre, logo). */
.gmedia--c img { object-position: 50% 30%; }
.gmedia--e img { object-position: 50% 62%; }
/* Hero : <picture> remplit le cadre comme l'image seule le faisait. */
.hero__media picture { display: block; width: 100%; height: 100%; }
/* Le zoom lent agrandissait la photo jusqu'à 116 % : avec des fichiers de
   1086 px de large, c'est ce qui la rendait pixellisée. Mouvement très léger. */
.hero__img { transform: scale(1.01); animation: heroZoomSoft 26s ease-in-out infinite alternate; }
@keyframes heroZoomSoft { from { transform: scale(1.01); } to { transform: scale(1.045); } }
@media (min-width: 721px) { .hero__img { object-position: 50% 50%; } }
@media (prefers-reduced-motion: reduce) { .hero__img { animation: none; } }
/* Atmosphère : parallaxe sans sur-agrandissement. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ambiance__img { animation-name: driftSoft; }
    @keyframes driftSoft { from { transform: scale(1.04) translateY(-2%); } to { transform: scale(1.04) translateY(2%); } }
  }
}

/* =========================================================
   ACTUALITÉS — liste, carte d'article, article (12 oct.)
   ========================================================= */
#news, #actualites { --blend-from: var(--wine-950); }
#actualites { background: var(--wine-900); --blend-from: var(--wine-900); }
#article { --blend-from: var(--wine-950); padding-top: clamp(30px, 5vh, 60px); }
.news__head { margin-bottom: clamp(30px, 5vw, 56px); }
.news__list { display: grid; gap: clamp(28px, 4vw, 48px); }
.news__all { margin-top: clamp(24px, 3vw, 36px); }

.newscard {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(22px, 4vw, 56px); align-items: center;
}
.newscard__media { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-sm); }
.newscard__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform 600ms var(--ease-out); }
.newscard__meta {
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.9em;
}
.newscard__title {
  font-family: var(--serif); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.12; margin-bottom: 0.6em;
}
.newscard__title a { color: var(--cream); transition: color 200ms ease; }
.newscard__text { color: var(--cream-70); font-weight: 300; max-width: 52ch; margin-bottom: 1em; }
@media (hover: hover) and (pointer: fine) {
  .newscard:hover .newscard__media img { transform: scale(1.03); }
  .newscard__title a:hover { color: var(--accent); }
}
@media (max-width: 760px) { .newscard { grid-template-columns: 1fr; } }

/* ---------- Article ---------- */
.article__wrap {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
}
.article__cover { aspect-ratio: 3 / 4; border-radius: var(--r-sm); position: sticky; top: 110px; }
.article__cover img, .article__figure img { width: 100%; height: 100%; object-fit: cover; }
.article__body { max-width: 66ch; }
.article__lede { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.55; color: var(--cream) !important; font-weight: 300; }
.article__body h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; margin: 2em 0 0.6em; color: var(--cream); }
.article__body h3 {
  font-family: var(--sans); text-transform: none; letter-spacing: 0;
  font-size: 1.02rem; font-weight: 600; color: var(--cream); margin: 1.4em 0 0.35em;
}
.article__body p { line-height: 1.75; }
.article__body .link-underline { color: var(--cream); }
.article__figure { aspect-ratio: 16 / 10; border-radius: var(--r-sm); margin: 2em 0 0; }
.article__figure img { object-position: 50% 60%; }
.article__facts { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.article__facts li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  color: var(--cream-70); line-height: 1.6;
}
.article__facts strong {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 600; padding-top: 0.25em;
}
.article__facts a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.article__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.4em; }
@media (max-width: 900px) {
  .article__wrap { grid-template-columns: 1fr; }
  .article__cover { position: static; aspect-ratio: 4 / 3; }
  .article__facts li { grid-template-columns: 1fr; gap: 2px; }
  .article__actions .btn { flex: 1 1 100%; min-height: 48px; }
}
/* Le titre d'un article est une phrase : plus petit que les titres de page. */
.pagehead:has(+ #article) h1 { font-size: clamp(1.7rem, 3.8vw, 3rem); max-width: 24ch; }

/* =========================================================
   RETOURS DU 13 OCTOBRE
   ========================================================= */

/* ---------- Monogramme de la nav : sans cercle, plus grand ---------- */
.nav__seal {
  border: 0; border-radius: 0; background: none;
  width: clamp(46px, 4.4vw, 60px); aspect-ratio: 423 / 450;
}
.nav__seal img { width: 100%; height: auto; }
.is-scrolled .nav__seal { width: clamp(38px, 3.6vw, 48px); }
@media (hover: hover) and (pointer: fine) {
  .nav__seal:hover { background: none; border: 0; transform: scale(1.05); }
}

/* ---------- Le mot POLINE du hero : la typo des titres (Neigh) ---------- */
.hero__word {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-variation-settings: normal;
  font-size: clamp(3.4rem, 19vw, 16rem);
}

/* ---------- Pages sans bandeau de titre : la première section porte le H1 ---------- */
.section--top { padding-top: clamp(140px, 22vh, 220px); }
.section--top::before { display: none; }
.section--top h1.h-display { font-size: clamp(2.1rem, 5.2vw, 4.4rem); }
/* Le bandeau de titre et la section qui suit forment un seul bloc. */
.pagehead { padding-bottom: clamp(20px, 3vh, 36px); }
.pagehead + .section { padding-top: clamp(24px, 4vh, 48px); }
.pagehead + .section::before { display: none; }

/* ---------- Menu lunch : composé comme un menu imprimé ---------- */
#lunch { background: var(--wine-900); --blend-from: var(--wine-800); }
.lunch__head { text-align: center; margin-bottom: clamp(26px, 4vw, 44px); }
.lunch__head .kicker { justify-content: center; }
.section--top .lunch__head { margin-bottom: clamp(20px, 3vw, 32px); }
.lunchmenu {
  max-width: 34rem; margin-inline: auto; text-align: center;
  padding: clamp(28px, 4vw, 44px) 0 0;
  border-top: 1px solid rgba(198, 161, 91, 0.45);
}
.lunchmenu__when {
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
  margin-bottom: clamp(26px, 4vw, 40px);
}
.lunchmenu__dish {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.5; color: var(--cream); font-weight: 400;
  text-wrap: balance;
}
.lunchmenu__dish--soft { color: var(--cream-70); font-weight: 300; }
.lunchmenu__or {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.8rem; color: var(--accent); margin: 0.7em 0;
}
.lunchmenu__rule {
  display: block; width: 54px; height: 1px; background: rgba(198, 161, 91, 0.6);
  margin: clamp(22px, 3vw, 32px) auto;
}
.lunchmenu__price {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  max-width: 24rem; margin: 0 auto; padding: 0.35em 0;
  font-size: 1.05rem; color: var(--cream);
}
.lunchmenu__price strong { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.25rem; color: var(--accent); }
.lunchmenu__note { margin: 1.4em auto 0; max-width: 30rem; font-size: 0.92rem; color: var(--cream-70); font-weight: 300; }
.lunchmenu__go { margin-top: clamp(24px, 3vw, 34px); min-height: 48px; }
.lunchmenu__last { margin-top: 1em; font-size: 0.8rem; color: var(--cream-52); letter-spacing: 0.04em; }

/* ---------- La carte : fond rouge, et une carte de menu arrondie ---------- */
#carte { background: var(--wine-850); --blend-from: var(--wine-850); color: var(--wine-900); }
#maison { --blend-from: var(--wine-850); }
.section--top#maison { --blend-from: transparent; }
.menucard {
  background: var(--cream); color: var(--wine-900);
  border-radius: clamp(18px, 2.4vw, 30px);
  padding: clamp(28px, 5vw, 72px);
  box-shadow: 0 40px 100px rgba(20, 6, 8, 0.5), 0 4px 14px rgba(20, 6, 8, 0.25);
}
.menucard__head { text-align: center; margin-bottom: clamp(30px, 5vw, 56px); padding-left: 0 !important; }
.menucard__head .kicker { justify-content: center; }
.menucard__head .h-display { color: var(--wine-900); font-size: clamp(1.7rem, 3.6vw, 3rem); max-width: none; margin: 0.3em 0 0; }
.menucard__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 26px) clamp(40px, 6vw, 96px); }
.menucard__cols .menu-list { gap: 22px; }
.menucard__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px;
  margin-top: clamp(30px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(74, 21, 25, 0.18);
}
.btn--wine { background: var(--wine-800); color: var(--cream); }
.link-underline--dark { color: var(--wine-900); border-bottom-color: var(--accent-ink); margin-top: 0; }
@media (hover: hover) and (pointer: fine) {
  .btn--wine:hover { background: var(--wine-900); }
  .link-underline--dark:hover { color: var(--accent-ink); }
}
.menucard :where(a, button):focus-visible { outline-color: var(--accent-ink); }
@media (max-width: 760px) { .menucard__cols { grid-template-columns: 1fr; } }
/* la carte complète garde ses quatre rubriques en deux colonnes, dans la carte */
.carte--full .carte__cols--4 { row-gap: clamp(44px, 6vw, 72px); }

/* ---------- Plats : mosaïque de photos avec légende ---------- */
.plats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin: clamp(36px, 6vw, 72px) 0; }
.plat { position: relative; border-radius: var(--r-sm); min-height: 0; }
.plat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plat figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 44px 18px 14px;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream);
  background: linear-gradient(to top, rgba(20, 6, 8, 0.78), transparent);
}
.plats > .plat:nth-child(1) { grid-column: span 4; aspect-ratio: 3 / 4; }
.plats > .plat:nth-child(2) { grid-column: span 4; aspect-ratio: 3 / 4; }
.plats > .plat:nth-child(3) { grid-column: span 4; aspect-ratio: 3 / 4; }
.plats--two > .plat:nth-child(1) { grid-column: span 8; aspect-ratio: 16 / 10; }
.plats--two > .plat:nth-child(2) { grid-column: span 4; aspect-ratio: auto; }
.plats--home { margin-bottom: 0; }
.plats--home > .plat:nth-child(1), .plats--home > .plat:nth-child(3) { aspect-ratio: 4 / 5; }
.plats--home > .plat:nth-child(2) { aspect-ratio: 4 / 5; margin-top: clamp(0px, 4vw, 56px); }
@media (max-width: 760px) {
  .plats { grid-template-columns: 1fr; gap: 12px; }
  .plats > .plat, .plats--two > .plat, .plats--home > .plat { grid-column: 1 / -1 !important; aspect-ratio: 4 / 3 !important; margin-top: 0 !important; }
}

/* ---------- Accueil : aperçu de la cuisine ---------- */
.cuisinehome { background: var(--wine-850); --blend-from: var(--wine-900); }
#gallery { --blend-from: var(--wine-850); }
.cuisinehome__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; }
.cuisinehome__head .h-display { max-width: 14ch; margin-top: 0.35em; }
.cuisinehome__text p { color: var(--cream-70); font-weight: 300; font-size: 1.05rem; line-height: 1.7; margin-bottom: 0.6em; }
@media (max-width: 860px) { .cuisinehome__head { grid-template-columns: 1fr; } }

/* ---------- Page Cuisine & carte ---------- */
.cuisine { --blend-from: var(--wine-950); }
.cuisine__intro { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; }
.cuisine__lede { font-size: clamp(1.2rem, 2.1vw, 1.7rem); line-height: 1.5; font-weight: 300; color: var(--cream); }
.cuisine__aside { color: var(--cream-70); font-weight: 300; padding-left: 20px; border-left: 1px solid rgba(198, 161, 91, 0.55); }
.cuisine__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 4vw, 56px) clamp(36px, 6vw, 96px); }
.cuisine__block h2 {
  font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.2; color: var(--cream);
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.cuisine__block p { color: var(--cream-70); font-weight: 300; line-height: 1.75; }
.lunchlink {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  margin-top: clamp(40px, 6vw, 72px); padding: clamp(22px, 3vw, 34px) 0;
  border-top: 1px solid rgba(198, 161, 91, 0.45); border-bottom: 1px solid rgba(198, 161, 91, 0.45);
}
.lunchlink__kicker { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.lunchlink__title { font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(1.2rem, 2.2vw, 1.8rem); color: var(--cream); }
@media (max-width: 860px) {
  .cuisine__intro, .cuisine__cols { grid-template-columns: 1fr; }
  .lunchlink .btn { width: 100%; min-height: 48px; }
}
/* sur cette page, la carte suit le texte : même fond, pas de fondu */
.cuisine + #carte::before { display: none; }
.cuisine + #carte { padding-top: 0; }

/* ---------- La maison : texte complémentaire ---------- */
.maisonplus { background: var(--wine-900); --blend-from: var(--wine-900); padding-top: 0; }
.maisonplus::before { display: none; }
.maisonplus__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.maisonplus__block h2 {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.25; color: var(--cream);
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(198, 161, 91, 0.45);
}
.maisonplus__block p { color: var(--cream-70); font-weight: 300; line-height: 1.75; }
@media (max-width: 900px) { .maisonplus__grid { grid-template-columns: 1fr; } }

/* ---------- Contact : carte + photos de l'extérieur ---------- */
.contact__visit {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px;
  margin-top: clamp(40px, 6vw, 80px); align-items: stretch;
}
.contact__map { min-height: clamp(320px, 42vw, 520px); border-radius: var(--r-sm); filter: none; }
.contact__map iframe, .lieu__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lieu__map::before { content: "30, route d'Arlon · Strassen"; }
.lieu__map:has(iframe)::before { display: none; }
.contact__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact__photo { position: relative; border-radius: var(--r-sm); min-height: 260px; }
.contact__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact__photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 14px 12px;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream);
  background: linear-gradient(to top, rgba(20, 6, 8, 0.8), transparent);
}
@media (max-width: 900px) {
  .contact__visit { grid-template-columns: 1fr; }
  .contact__photo { min-height: 0; aspect-ratio: 3 / 4; }
}

/* ---------- Menu : deux boutons en bas ---------- */
.mobilemenu { flex-direction: column; gap: clamp(26px, 5vh, 56px); padding: 96px var(--gutter) clamp(20px, 4vh, 40px); overflow-y: auto; }
.mobilemenu__links { gap: clamp(14px, 2.6vh, 26px); margin-block: auto 0; }
.mobilemenu__links a { font-size: clamp(1.5rem, 4.2vh, 2rem); }
.mobilemenu__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  width: min(640px, 100%); margin-block: 0 auto;
  opacity: 0; transform: translateY(14px);
  transition: opacity 120ms ease, transform 120ms var(--ease-out);
}
body.menu-open .mobilemenu__actions {
  opacity: 1; transform: none;
  transition: opacity 400ms var(--ease-out) 380ms, transform 500ms var(--ease-out) 380ms;
}
.mobilemenu__box {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left;
  padding: 18px 20px; min-height: 84px; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: rgba(242, 231, 199, 0.04);
  transition: border-color 200ms ease, background 200ms ease, transform 160ms var(--ease-out);
}
.mobilemenu__box--book { background: var(--accent); border-color: var(--accent); color: var(--wine-950); }
.mobilemenu__box-label { font-size: 0.72rem; letter-spacing: 0.08em; opacity: 0.75; }
.mobilemenu__box-title { font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1rem, 2.4vw, 1.25rem); }
.mobilemenu__box:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .mobilemenu__box:hover { border-color: var(--accent); }
  .mobilemenu__box--book:hover { background: var(--accent-soft); }
}
@media (max-width: 520px) { .mobilemenu__actions { grid-template-columns: 1fr; } .mobilemenu__box { min-height: 68px; padding: 14px 18px; } }
@media (prefers-reduced-motion: reduce) { .mobilemenu__actions { transform: none; } }

/* ---------- Barre de réservation : flottante, elle s'efface en bas de page ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0;
  transition: transform 320ms var(--ease-out), opacity 220ms ease;
}
.dock.is-away { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .dock { transition: opacity 200ms ease; } .dock.is-away { transform: none; } }
/* « Réservez votre table » : la dernière section, le pied de page vient juste après. */
#reserver { padding-bottom: clamp(70px, 10vh, 120px); }

/* ---------- Les images apparaissent au défilement ---------- */
.reveal-clip { opacity: 1; transition: none; }
.reveal-clip > img, .reveal-clip > picture > img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.14);
  transition: clip-path 1.2s var(--ease-in-out), transform 1.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal-clip.is-in > img { clip-path: inset(0 0 0 0); transform: scale(1); }
.plats > .plat:nth-child(2), .gallery__grid > :nth-child(2), .contact__photos > :nth-child(2) { --i: 1; }
.plats > .plat:nth-child(3), .gallery__grid > :nth-child(3) { --i: 2; }
.gallery__grid > :nth-child(4) { --i: 1; }
.gallery__grid > :nth-child(5) { --i: 2; }
@media (prefers-reduced-motion: reduce) {
  .reveal-clip > img { clip-path: none; transform: none; transition: none; }
}
/* Intertitres des textes : la typo des titres (Neigh), comme partout. */
.cuisine__block h2, .maisonplus__block h2 { font-family: var(--serif); font-weight: 500; letter-spacing: 0.03em; }
/* L'en-tête de la carte complète s'affiche de nouveau (il n'est plus collé au titre de page). */
.pagehead ~ .carte .menucard__head { display: block; }
/* Contact : photos en vrai format portrait, la carte prend la même hauteur. */
.contact__visit { grid-template-columns: 1.1fr 1fr; }
.contact__photo { min-height: 0; aspect-ratio: 3 / 4; }
.contact__map { min-height: 0; }
@media (max-width: 900px) { .contact__visit { grid-template-columns: 1fr; } .contact__map { min-height: 320px; } }
.prose__lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--cream) !important; font-weight: 300; margin-bottom: 2.2em !important; }
.prose h2:first-child, .prose__lede + h2 { margin-top: 0; }
/* Contact en mobile : la carte a sa propre hauteur, les photos suivent sans se toucher. */
@media (max-width: 900px) {
  .contact__visit { row-gap: 14px; }
  .contact__map { min-height: 0; height: clamp(280px, 70vw, 420px); }
  .contact__photos { align-self: start; }
}

/* =========================================================
   RETOURS DU 13 OCTOBRE (suite)
   ========================================================= */

/* ---------- Hero : nouvelle photo (paysage, 2000 px) ---------- */
.hero__img { object-position: 62% 50%; filter: brightness(0.74); }
@media (max-width: 720px) { .hero__img { object-position: 64% 50%; } }

/* ---------- Le mot POLINE : entrée lettre à lettre, puis vie au défilement ---------- */
.hero__word.is-armed .char > i {
  transform: translateY(110%) rotate(6deg); opacity: 0; filter: blur(8px);
  transition: transform 1.2s var(--ease-out), opacity 0.9s var(--ease-out), filter 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 95ms);
}
.hero__word.is-armed.is-in .char > i { transform: none; opacity: 1; filter: blur(0); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* en descendant, le mot s'élargit, remonte et s'efface doucement */
    .hero__word {
      animation: heroWordAway linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    @keyframes heroWordAway {
      to { letter-spacing: 0.14em; transform: translateY(-14vh); opacity: 0.15; }
    }
    .hero__eyebrow { animation: heroIn 0.9s var(--ease) forwards 0.5s, heroEyebrowAway linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 70vh; }
    @keyframes heroEyebrowAway { to { transform: translateY(-8vh); opacity: 0; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__word.is-armed .char > i { transform: none; opacity: 1; filter: none; transition: none; }
}

/* ---------- Monogramme : plus loin du bord, et il tourne en continu ---------- */
.nav__inner { height: 92px; padding-inline: clamp(26px, 5.5vw, 84px); }
.is-scrolled .nav__inner { height: 76px; }
.nav__inner { transition: height 0.4s var(--ease); }
.nav__seal img { animation: sealSpin 28s linear infinite; transform-origin: 50% 50%; }
@keyframes sealSpin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .nav__seal img { animation: none; } }

/* ---------- Moins d'espace entre « Actualités » et « Réservez votre table » ---------- */
#actualites { padding-bottom: clamp(30px, 4vh, 56px); }
#reserver { padding-top: clamp(40px, 6vh, 80px); --blend-h: clamp(120px, 20vh, 240px); }

/* ---------- Galerie à six photos : deux grandes, puis quatre ---------- */
@media (min-width: 861px) {
  .gallery__grid--six { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gallery__grid--six > .gmedia { grid-column: span 3; aspect-ratio: auto; height: clamp(240px, 26vw, 380px); }
  .gallery__grid--six > .gmedia--a, .gallery__grid--six > .gmedia--b { grid-column: span 6; height: clamp(320px, 36vw, 520px); }
}
.gallery__grid--six .gmedia--b img { object-position: 50% 28%; }
.gallery__grid--six .gmedia--d img { object-position: 50% 30%; }
.gallery__grid--six .gmedia--f img { object-position: 50% 62%; }
.gallery__grid > :nth-child(6) { --i: 3; }
@media (min-width: 600px) and (max-width: 860px) {
  .gallery__grid--six > .gmedia:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
}

/* ---------- Page Cuisine : le chef, et trois plats ---------- */
.chef {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 6vw, 96px); align-items: center;
  margin-top: clamp(40px, 6vw, 80px);
}
.chef__photo { aspect-ratio: 4 / 5; border-radius: var(--r-sm); position: relative; }
.chef__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.chef__text h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.1; margin-bottom: 0.6em; }
.chef__text p { color: var(--cream-70); font-weight: 300; font-size: 1.08rem; line-height: 1.75; margin-bottom: 1em; max-width: 46ch; }
@media (max-width: 860px) { .chef { grid-template-columns: 1fr; } .chef__photo { aspect-ratio: 4 / 5; max-width: 420px; } }
.plats--three > .plat:nth-child(1), .plats--three > .plat:nth-child(2) { grid-column: span 4; aspect-ratio: 4 / 5; }
.plats--three > .plat:nth-child(3) { grid-column: span 4; aspect-ratio: 4 / 5; }
@media (max-width: 760px) { .plats--three > .plat { grid-column: 1 / -1 !important; aspect-ratio: 4 / 3 !important; } }
/* Encore moins d'espace entre « Actualités » et « Réservez votre table ». */
#actualites { padding-bottom: clamp(10px, 2vh, 24px); }
#reserver { padding-top: clamp(10px, 2vh, 28px); }
#reserver::before { display: none; }
/* Monogramme : un peu d'air en haut aussi. */
.nav__inner { padding-top: 8px; }
/* Atmosphère : nouvelle photo (la grande salle, 2000 px), un peu moins assombrie. */
.ambiance__img { filter: saturate(0.95) brightness(0.72); object-position: 50% 50%; }
.ambiance__img { filter: saturate(1) brightness(0.9); }
/* Le voile ne couvre plus toute la photo : sombre à gauche sous le texte, clair à droite. */
.ambiance__scrim {
  background:
    linear-gradient(to right, rgba(42,12,15,0.86) 0%, rgba(42,12,15,0.62) 34%, rgba(42,12,15,0.12) 68%, rgba(42,12,15,0) 100%),
    linear-gradient(to bottom, rgba(42,12,15,0.35) 0%, rgba(42,12,15,0) 22%, rgba(42,12,15,0) 78%, rgba(42,12,15,0.45) 100%);
}
@media (max-width: 760px) {
  .ambiance__scrim { background: linear-gradient(to bottom, rgba(42,12,15,0.55) 0%, rgba(42,12,15,0.72) 100%); }
}

/* Mention discrète tout en bas du pied de page (images réalisées avec l'IA) */
.footer__note { margin-top: 0.9rem; font-size: 0.68rem; line-height: 1.5; letter-spacing: 0.02em; opacity: 0.45; }