/* ==========================================================================
   onePlace Food Market — Rungis
   Design system + shared components
   ========================================================================== */

:root {
  --ink: #12100d;
  --ink-2: #1b1814;
  --ink-3: #2a2520;
  --paper: #f6f1e8;
  --paper-2: #efe7da;
  --cream: #fbf8f2;
  --line: rgba(18, 16, 13, 0.14);
  --line-inv: rgba(246, 241, 232, 0.16);
  --muted: #6d655a;
  --muted-inv: #b3a998;
  --focus: var(--ink);      /* focus ring (outer); switched to the tone tint (--t-2) on dark surfaces */
  --ember: #e2562b;

  --f-display: "Instrument Serif", "Times New Roman", serif;
  --f-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --radius: 22px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --header-h: 76px;
  --svh: 1vh;               /* 1% of the SMALL viewport (toolbars shown) where supported, see below */
}
@supports (height: 1svh) { :root { --svh: 1svh; } }

/* ==========================================================================
   Tones — each section carries its own accent colour (replaces the old global gold).
   --t    vivid accent: text/lines on dark surfaces (>= 6:1 on ink), button/band backgrounds
   --t-2  light tint: large text / highlights on dark (>= 9:1 on ink), focus halo
   --t-ink accent for text on light surfaces (>= 4.5:1 on paper, cream, paper-2)
   --t-on text colour on a --t background (>= 6:1)
   Usage: <section data-tone="chef"> … </section>. The legacy --gold* tokens are re-mapped onto the
   tone on every tone scope, so existing components follow automatically.
   ========================================================================== */
:root, [data-tone="brand"] { --t: #F1E6D2; --t-2: #FFF8EC; --t-ink: #12100D; --t-on: #12100D; }   /* onePlace — ivoire / encre ; la couleur vient du spectre des univers */
[data-tone="chef"]         { --t: #5B8DF6; --t-2: #A9C4FB; --t-ink: #2F58C4; --t-on: #070F24; }   /* le chef — bleu toque / France */
[data-tone="equerre"]      { --t: #A58BFF; --t-2: #D2C5FF; --t-ink: #6242D6; --t-on: #120A2E; }   /* L'Équerre — lounge de nuit */
[data-tone="afterwork"]    { --t: #FF7EA1; --t-2: #FFC2D2; --t-ink: #B8325A; --t-on: #2A0612; }   /* AfterWork — cocktail */
[data-tone="cocotte"]      { --t: #3FB3A3; --t-2: #9EE0D6; --t-ink: #1B6B61; --t-on: #03201C; }   /* Cocotte — vert du logo */
[data-tone="temporalite"]  { --t: #E07A93; --t-2: #F4BCC9; --t-ink: #A8354F; --t-on: #23070E; }   /* Temporalité — table du chef, saisons */
[data-tone="mad"]          { --t: #E9A04B; --t-2: #F6CD93; --t-ink: #94520F; --t-on: #1F1103; }   /* Rhum M.A.D — ambre */
[data-tone="entreprises"]  { --t: #3DC08F; --t-2: #9FE6CB; --t-ink: #157556; --t-on: #04211A; }   /* Entreprises — émeraude */
[data-tone="traiteur"]     { --t: #F28C28; --t-2: #F8C28C; --t-ink: #98500B; --t-on: #201003; }   /* La Table de Grégory — orange du logo */
[data-tone="togo"]         { --t: #F2C230; --t-2: #F8DE8A; --t-ink: #7A5A00; --t-on: #1F1800; }   /* Livraison & ToGo — jaune ToGo */
/* univers pages: tone comes from the univers theme (inline vars set by theme_vars) */
.u-page { --t: var(--u-accent); --t-2: var(--u-soft); --t-ink: var(--u-accent-text, var(--u-deep)); --t-on: var(--u-on-accent); }

/* legacy gold tokens follow the tone of the nearest scope */
:root, [data-tone], .u-page {
  --gold: var(--t); --gold-2: var(--t-2); --gold-ink: var(--t-ink); --gold-text: var(--t-ink); --gold-on: var(--t-on);
  --gold-em: var(--t-ink); --focus-halo: var(--t-2);
  --t-fill: var(--t); --em-paint: none; --em-paint-dark: none; --em-fill: currentColor;
}
/* onePlace brand = « le spectre des univers » : Yalah → Mademoiselle Chang → Lily → Bella Gigi.
   Used on headline italics, main buttons, the ticker band and the footer word; small details stay ivory/ink. */
:root, [data-tone="brand"] {
  --spectrum: linear-gradient(100deg, #F5A25A 0%, #FF6F6F 25%, #A6D98A 50%, #45C7B6 75%, #F5A25A 100%);      /* on dark, >= 7:1 on ink; ink text on it >= 7:1 */
  --spectrum-ink: linear-gradient(100deg, #A34A0C 0%, #B01E26 25%, #3E6A30 50%, #0B6A60 75%, #A34A0C 100%); /* on light, >= 4.8:1 */
  --t-fill: var(--spectrum); --em-paint: var(--spectrum-ink); --em-paint-dark: var(--spectrum); --em-fill: transparent;
}
@keyframes spectrum { to { background-position: -200% 50%; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--gold); color: var(--gold-on); }
/* Two-tone focus ring: ink outline + tone halo on light surfaces, tone outline on dark ones (>= 3:1 everywhere) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-halo); border-radius: 4px; }
.dark, .footer, .mnav, .hero, .uni, .et-tp, [data-hero-dark], .loader,
.header:not(.is-solid):not(.header--ink), .menu-open .header, .nav__drop, .map__card { --focus: var(--gold-2); --focus-halo: var(--ink); --gold-em: var(--gold); --em-paint: var(--em-paint-dark); }
:is(.dark, .footer, .mnav, .hero, .uni, .et-tp, [data-hero-dark], .loader) :is([data-tone], .u-page) { --focus: var(--t-2); --focus-halo: var(--ink); --gold-em: var(--t); --em-paint: var(--em-paint-dark); }
.uni__panel { --focus: var(--fg); --focus-halo: var(--bg); }
.u-page main, .u-hero { --focus: var(--u-fg); --focus-halo: var(--u-soft); } /* fg ring + soft halo: one of them always contrasts */
.next-u { --focus: var(--n-fg); --focus-halo: transparent; }
/* components that already draw an inset box-shadow keep it and add the halo */
.btn--ghost:focus-visible { box-shadow: inset 0 0 0 1px currentColor, 0 0 0 2px var(--focus-halo); }
.press-card:focus-visible { box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 2px var(--focus-halo); }
/* programmatic focus targets (main, sections) never show a ring */
:is(main, section, article, div, h1, h2, h3)[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 999; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; transition: top .2s; }
.skip:focus { top: 12px; }
.skip { --focus: var(--ink); --focus-halo: var(--paper); } /* always an ink pill: paper halo hugs it, ink ring outside — visible on every surface */

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(80px, 12vw, 180px); position: relative; }
.section--tight { padding-block: clamp(56px, 8vw, 110px); }
.dark { background: var(--ink); color: var(--paper); }
.dark .muted, .dark .lead { color: var(--muted-inv); }
.grid { display: grid; gap: clamp(16px, 2vw, 28px); }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.eyebrow--plain::before { display: none; }
.display {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3rem, 8.4vw, 9.5rem); line-height: .9; letter-spacing: -.02em;
}
.h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.8rem, 6.6vw, 7rem); line-height: .95; letter-spacing: -.015em; }
.h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.3rem, 5vw, 5rem); line-height: 1; letter-spacing: -.01em; }
.h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 1.05; }
.h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.005em; }
em, .it { font-style: italic; }
.display em, .h1 em, .h2 em, .h3 em { font-style: italic; color: var(--accent-em, var(--gold-em)); }
.display em, .h1 em, .h2 em, .h3 em, .manifesto em, .hero__title em, .loader__word em, .footer__word em {
  background-image: var(--em-paint); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: var(--em-fill); animation: spectrum 14s linear infinite; padding-right: .06em; /* italic overhang stays painted */
}
.hero__title em, .loader__word em, .footer__word em { background-image: var(--em-paint-dark); }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.5; color: var(--muted); max-width: 38em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  --b-bg: var(--ink); --b-fg: var(--paper);
  position: relative; display: inline-flex; align-items: center; gap: .75em;
  height: 54px; padding: 0 26px; border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg);
  font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: transform .5s var(--ease), color .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--b-hover, var(--gold)); transform: translateY(101%); transition: transform .55s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--b-hover-fg, var(--gold-on)); } /* default hover fill is the tone: its own dark text colour */
.btn .arrow { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--light { --b-bg: var(--paper); --b-fg: var(--ink); }
.btn--gold { --b-bg: var(--t-fill); --b-fg: var(--gold-on); background-size: 200% 100%; animation: spectrum 14s linear infinite; --b-hover: var(--paper); --b-hover-fg: var(--ink); } /* tone button (name kept) */
.btn--ghost { --b-bg: transparent; --b-fg: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.btn--ghost:hover { --b-hover-fg: var(--gold-on); }
.btn--sm { height: 42px; padding: 0 18px; font-size: 14px; }

.link {
  position: relative; display: inline-flex; align-items: center; gap: .5em; font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ease); padding-bottom: 2px;
}
.link:hover { background-size: 100% 1px; }
.link::after { content: ""; position: absolute; inset: -9px -4px; } /* ~44px tap area, no layout change */
:is(.form-note, .form-ok, .legal__txt) .link::after { content: none; } /* inline links in running text: an enlarged box would spill over wrapped lines */
.link .arrow { width: 16px; height: 16px; transition: transform .5s var(--ease); }
.link:hover .arrow { transform: translateX(3px); }

.chip {
  display: inline-flex; align-items: center; gap: .5em; padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; box-shadow: inset 0 0 0 1px currentColor; white-space: nowrap;
}

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  color: var(--paper); transition: color .4s var(--ease), transform .6s var(--ease);
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line); transition: opacity .4s var(--ease);
}
.header.is-solid { color: var(--ink); }
.header.is-solid::before { opacity: 1; }
.header.is-hidden { transform: translateY(-100%); }
.header.is-hidden:focus-within { transform: none; } /* keyboard focus inside the header brings it back */
.header.is-dark::before { opacity: 1; background: color-mix(in srgb, var(--ink) 72%, transparent); border-bottom-color: var(--line-inv); }
.header--ink { color: var(--ink); }
.header__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-height: 44px; } /* 44px tap area, same look */
.brand img { height: 30px; width: auto; transition: filter .4s var(--ease); }
.header:not(.is-solid):not(.header--ink) .brand img { filter: brightness(0) invert(1); }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); font-size: 14.5px; font-weight: 500; }
.nav > li { position: relative; }
.nav a { position: relative; padding: 8px 0; opacity: .88; transition: opacity .3s; }
.nav a:hover, .nav a[aria-current] { opacity: 1; }
.nav > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav > li > a:hover::after, .nav > li > a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav__drop {
  position: absolute; top: calc(100% + 14px); left: -22px; min-width: 250px; padding: 12px;
  background: var(--ink); color: var(--paper); border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .35s var(--ease);
}
.nav__drop::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.nav > li:hover .nav__drop, .nav > li:focus-within .nav__drop { opacity: 1; visibility: visible; transform: none; }
.nav__drop a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.nav__drop a:hover { background: var(--ink-3); }
.nav__drop small { color: var(--muted-inv); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.header__actions { display: flex; align-items: center; gap: 12px; }
.status {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); white-space: nowrap;
}
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: #9a9186; position: relative; }
.status.is-open .status__dot { background: #37c26b; }
.status.is-open .status__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #37c26b; opacity: 0; animation: ping 2s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(.5); opacity: .9 } 100% { transform: scale(1.6); opacity: 0 } }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); position: relative; }
.burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), opacity .3s; }
.burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { top: 26px; }
.menu-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile menu */
.mnav {
  position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--paper);
  padding: calc(var(--header-h) + 24px) var(--gutter) 32px; display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; transition: clip-path .8s var(--ease-in-out), visibility 0s linear .8s; /* closed menu: links not focusable */
}
.menu-open .mnav { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s var(--ease-in-out), visibility 0s; }
.mnav a[aria-current], .nav__drop a[aria-current="page"] { color: var(--gold); }
html.menu-lock { overflow: hidden; }
.menu-open .header { color: var(--paper) !important; }
.menu-open .header::before { opacity: 0 !important; }
.menu-open .header .brand img { filter: brightness(0) invert(1) !important; }
.mnav__links a { display: block; font-family: var(--f-display); font-size: clamp(2.4rem, 10vw, 4rem); line-height: 1.1; padding: 4px 0; }
.mnav__sub { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.mnav__sub a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-sans); font-size: 14px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-inv); }
.mnav__foot { display: grid; gap: 0; color: var(--muted-inv); font-size: 14px; margin-top: 32px; }
.mnav__foot a:not(.btn) { padding-block: 10px; width: fit-content; } /* >= 42px tap targets */

@media (max-width: 1080px) {
  .nav, .header__actions .btn { display: none; }
  .burger { display: block; }
}
@media (max-width: 560px) { .header .status { display: none; } }
@media (min-width: 1081px) { .mnav { display: none; } }

/* ---------- Page transition + loader ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 200; background: var(--ink); pointer-events: none;
  transform: translateY(100%);
}
.curtain.is-in { transition: transform .7s var(--ease-in-out); transform: translateY(0); pointer-events: all; }
.is-arriving .curtain { transform: translateY(0); }
.curtain.is-out { transition: transform .9s var(--ease-in-out); transform: translateY(-100%); }
.is-arriving .loader { display: none; }
.loader {
  position: fixed; inset: 0; z-index: 210; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; transition: clip-path 1.1s var(--ease-in-out);
  clip-path: inset(0 0 0 0);
}
.loader.is-done { clip-path: inset(0 0 100% 0); }
.loader__word { font-family: var(--f-display); font-size: clamp(3.5rem, 12vw, 10rem); line-height: 1; display: flex; overflow: hidden; }
.loader__word span { display: inline-block; transform: translateY(110%); animation: rise .9s var(--ease) forwards; }
.loader__word em { color: var(--gold); }
.loader__meta { position: absolute; bottom: 28px; left: 0; right: 0; display: flex; justify-content: space-between; padding-inline: var(--gutter); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-inv); }
@keyframes rise { to { transform: translateY(0); } }
.no-loader .loader { display: none; }
/* fail-safe (html.reveal-all set by a timer if scripts never run): show everything */
.reveal-all [data-reveal], .reveal-all [data-split] .split-line > span, .reveal-all .img-reveal[data-reveal] img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.reveal-all .curtain { transform: translateY(-100%) !important; }
.is-qa *, .is-qa *::before, .is-qa *::after { transition: none !important; animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }

/* ---------- Cursor companion: tiny onePlace mark, food icon of the univers under the pointer ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none;
  width: 28px; height: 28px; opacity: 0; transition: opacity .25s, width .3s var(--ease), height .3s var(--ease);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .28));
}
.cursor.is-visible { opacity: 1; }
.cursor img { display: block; width: 100%; height: 100%; }
.cursor:not(.is-default) { width: 34px; height: 34px; padding: 5px; border-radius: 50%; background: #fffdf8; filter: none; box-shadow: 0 0 0 1px rgba(18, 16, 13, .08), 0 6px 14px -4px rgba(0, 0, 0, .35); }
.cursor.is-default { width: 18px; height: 18px; }
.cursor.is-default img { border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }
.cursor.is-pop img { animation: cursorPop .45s var(--ease); }
@keyframes cursorPop { 0% { transform: scale(.3) rotate(-25deg); } 70% { transform: scale(1.12) rotate(4deg); } 100% { transform: none; } }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Table booking: Zenchef widget (SDK iframe, opened by [data-reserve] triggers — main.js) ---------- */
/* Closed, the SDK only fades its iframe out: hide it for real so the invisible form leaves the Tab order */
iframe[class*="zc-iframe"][class*="__closed"] { visibility: hidden; }
[data-reserve][aria-busy="true"] { cursor: progress; }

/* ---------- Reveal animations ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(.94); }
/* mask with generous room for accents (À), descenders (g, p) and italic tails (j) — the padding is cancelled by the negative margin */
.split-line { display: block; overflow: hidden; padding: .14em .12em .24em; margin: -.14em -.12em -.24em; }
.split-line > span { display: block; }
.js [data-split] .split-line > span { transform: translateY(calc(105% + .4em)); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * .09s + var(--d, 0s)); }
.js [data-split].is-in .split-line > span { transform: none; }
.img-reveal { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.img-reveal img { width: 100%; height: 100%; object-fit: cover; }
/* clip the <img>, not the observed box: IntersectionObserver treats a fully clipped target as invisible */
.js .img-reveal[data-reveal] { opacity: 1; transform: none; background: transparent; }
.js .img-reveal[data-reveal] img { clip-path: inset(100% 0 0 0); transform: scale(1.25); transition: clip-path 1.4s var(--ease-in-out), transform 1.8s var(--ease); }
.js .img-reveal[data-reveal].is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee__track { animation: none !important; }
  .js [data-reveal], .js [data-reveal] img, .js [data-split] .split-line > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; user-select: none; }
.marquee__track { display: inline-flex; animation: marquee var(--speed, 40s) linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
/* site-wide "pause animations" switch (html.is-paused, toggled by [data-motion-toggle]) */
.is-paused .marquee__track, .is-paused .u-badge svg, .is-paused .hero__badge svg, .is-paused .hero__scroll i::after, .is-paused .status__dot::after { animation-play-state: paused !important; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ticker { background: var(--t-fill); background-size: 200% 100%; animation: spectrum 14s linear infinite; color: var(--gold-on); padding-block: 18px; font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1; }
.ticker .marquee__track > span { display: inline-flex; align-items: center; gap: .6em; padding-right: .6em; }
.ticker i { font-style: normal; font-size: .55em; opacity: .85; }

/* ---------- Hero (home) ---------- */
.hero { position: relative; height: 175vh; background: var(--ink); }
.hero__stage {
  position: sticky; top: 0; height: 100vh; height: calc(100 * var(--svh)); min-height: 620px; overflow: hidden;
  /* Title + building geometry, shared so the building can never cover a letter.
     Building image 2600x1123 (h = w * .4319); its highest point (the tower) sits 5.2% below the image top.
     Line-2 baseline = title top + 1.69 * font-size (line-height .86 + .06em gap); 1.72 keeps a small safety margin.
     Heights use svh (small viewport) so the CTAs are never under the mobile browser toolbars. */
  --hero-fs: min(10.4vw, calc(21 * var(--svh)));
  --hero-top: clamp(92px, calc(12.5 * var(--svh)), 150px);
  --hero-bw: max(100vw, 1100px);
  --hero-bottom: calc(-7 * var(--svh));
}
.hero__sky, .hero__tint, .hero__building, .hero__fade { position: absolute; inset: 0; }
.hero__sky { background: url("../img/lieu/ciel.webp") center 30% / cover no-repeat; transform-origin: 50% 100%; }
.hero__tint {
  background: linear-gradient(180deg, #0c0b0a 0%, #2a1d18 34%, #7a4a3a 64%, #e9a07f 92%); /* sunset on the brand ember, no gold */
  mix-blend-mode: multiply; opacity: .96;
}
.hero__glow { position: absolute; left: 50%; bottom: 14%; width: 110vw; height: calc(60 * var(--svh)); transform: translateX(-50%); background: radial-gradient(closest-side, rgba(247, 168, 130, .32), transparent 72%); }
.hero__title {
  position: absolute; left: 0; right: 0; top: var(--hero-top); z-index: 2; text-align: center; color: var(--paper);
  font-family: var(--f-display); font-weight: 400; font-size: var(--hero-fs); line-height: .86; letter-spacing: -.03em;
  pointer-events: none;
}
.hero__title .line { display: block; overflow: visible; } /* no reveal here: keep the "g" of Rungis whole */
.hero__title .line + .line { margin-top: .06em; } /* the "g" of Rungis must not touch the "b" of table */
.hero__title .line > span { display: inline-block; }
.hero__title em { color: var(--gold-2); }
/* The building stays in front of the title (depth), but on wide / 16:9 screens it is lowered just enough for the
   tower tip to stop under the baseline of "se met à table." — it may only cover the empty descender area. */
.hero__building {
  z-index: 3; top: auto; left: 50%; width: max(100%, 1100px); max-width: none; height: auto; transform: translateX(-50%);
  bottom: min(var(--hero-bottom), calc(100% - var(--hero-bw) * .4103 - var(--hero-top) - var(--hero-fs) * 1.72));
  transform-origin: 50% 100%; filter: saturate(1.05) contrast(1.04) brightness(.93);
}
.hero__fade { z-index: 4; top: auto; height: calc(34 * var(--svh)); background: linear-gradient(180deg, transparent, rgba(12, 11, 10, .75) 70%, var(--ink)); }
.hero__meta {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 28px; color: var(--paper);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.hero__intro { max-width: 460px; font-size: clamp(14px, 1.1vw, 16px); color: rgba(246, 241, 232, .82); }
.hero__intro strong { color: var(--paper); font-weight: 600; }
.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero__scroll { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(246, 241, 232, .7); }
.hero__scroll i { width: 1px; height: 46px; background: rgba(246, 241, 232, .3); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--paper); animation: drip 2.2s var(--ease-in-out) infinite; }
@keyframes drip { to { top: 100%; } }
.hero__badge {
  position: absolute; z-index: 5; right: var(--gutter); top: calc(var(--header-h) + 24px); width: 128px; height: 128px; color: var(--paper);
}
.hero__badge svg { width: 100%; height: 100%; animation: spin 22s linear infinite; }
.hero__badge b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 34px; font-weight: 400; color: var(--gold-2); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .hero { height: 150vh; height: calc(150 * var(--svh)); }
  .hero__meta { flex-direction: column; align-items: flex-start; }
  .hero__scroll, .hero__badge { display: none; }
  .hero__stage { --hero-fs: min(15.5vw, calc(21 * var(--svh))); --hero-top: calc(var(--header-h) + 7 * var(--svh)); --hero-bw: 240vw; --hero-bottom: calc(17 * var(--svh)); }
  .hero__building { width: 240%; left: 56%; }
  .hero__fade { height: calc(42 * var(--svh)); background: linear-gradient(180deg, transparent, rgba(12, 11, 10, .85) 45%, var(--ink)); }
  .hero__glow { bottom: 30%; }
  .hero__cta .btn { height: 48px; padding: 0 20px; font-size: 14px; }
}

/* ---------- Intro / manifesto ---------- */
.manifesto { font-family: var(--f-display); font-size: clamp(2rem, 4.4vw, 4.6rem); line-height: 1.18; letter-spacing: -.01em; max-width: 17em; }
/* 1.18: below that, Instrument Serif capital accents (É, À) touch the descenders of the line above ("Grégory" / "Éditions") */
.manifesto .w { opacity: .16; transition: opacity .3s; }
.manifesto .w.on { opacity: 1; }
.manifesto em { color: var(--accent-em, var(--gold-em)); }
.manifesto .pill-img { display: inline-block; width: 1.9em; height: .9em; border-radius: 999px; overflow: hidden; vertical-align: -.08em; margin: 0 .08em; }
.manifesto .pill-img img { width: 100%; height: 100%; object-fit: cover; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); margin-top: clamp(56px, 8vw, 110px); }
.stat { padding: 28px 24px 0 0; border-right: 1px solid var(--line); }
.stat + .stat { padding-left: 24px; }
.stat:last-child { border-right: 0; }
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stat b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1; letter-spacing: -.02em; }
.stat b, .num[data-count] { white-space: nowrap; } /* "1 000 m²", "+3 000", "~700 000" never split */
.stat span { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); max-width: 14em; }
@media (min-width: 901px) and (max-width: 1200px) {
  #bienvenue .stat b { font-size: 4.3vw; } /* home, 5 columns: "1 000 m²" stays on one line in its cell */
  #bienvenue .stat { padding-right: 16px; }
  #bienvenue .stat + .stat { padding-left: 16px; }
}
.dark .stats, .dark .stat { border-color: var(--line-inv); }
.dark .stat span { color: var(--muted-inv); }
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat, .stat + .stat { padding: 22px 12px 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat:last-child, .stat:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .dark .stat, .dark .stat + .stat, .dark .stat:nth-child(even) { border-color: var(--line-inv); }
}

.intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 110px); align-items: end; margin-top: clamp(56px, 8vw, 100px); }
.intro-grid .img-reveal { aspect-ratio: 4 / 5; }
.intro-grid .img-reveal.wide { aspect-ratio: 16 / 10; }
.intro-copy { display: grid; gap: 22px; align-content: start; }
/* the facade is a cut-out on pure white: multiply melts the white into the section paper (no empty white card) */
.intro-copy .img-reveal img { mix-blend-mode: multiply; }
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } }

/* ---------- Univers horizontal showcase ---------- */
.uni { position: relative; background: var(--ink); color: var(--paper); }
.uni__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; overflow: clip; }
.uni__track { display: flex; height: 100%; will-change: transform; }
.uni__panel {
  --bg: var(--ink); --fg: var(--paper); --accent: var(--gold);
  flex: 0 0 auto; width: min(92vw, 1320px); height: 100%; background: var(--bg); color: var(--fg);
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 64px);
  padding: calc(var(--header-h) + 28px) clamp(24px, 4vw, 64px) 40px; position: relative; overflow: hidden;
}
.uni__panel--intro { width: min(70vw, 900px); grid-template-columns: 1fr; align-content: center; background: var(--ink); }
.uni__panel--intro .h1 { max-width: 8em; }
.uni__num { position: absolute; z-index: 2; pointer-events: none; right: clamp(20px, 3vw, 44px); top: calc(var(--header-h) + 14px); font-family: var(--f-display); font-size: clamp(5rem, 11vw, 12rem); line-height: 1; color: var(--accent); opacity: .9; }
.uni__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 0; position: relative; z-index: 1; }
.uni__logo { height: clamp(70px, 10vh, 120px); width: auto; max-width: 70%; object-fit: contain; object-position: left center; }
.uni__logo--white { filter: brightness(0) invert(1); }
.lily-logo { font-family: var(--f-display); font-size: clamp(2.6rem, 4.4vw, 4.2rem); line-height: .9; display: inline-flex; align-items: center; gap: .25em; }
.lily-logo svg { width: .8em; height: .8em; color: var(--accent); }
.uni__copy .lily-logo { display: flex; width: fit-content; } /* the eyebrow below then starts on its own line */
.uni__tag { color: var(--accent-text, var(--accent)); } /* 12px label: text-safe accent (>= 4.5:1 on the panel) */
.uni__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 4.2vw, 4.4rem); line-height: .98; letter-spacing: -.015em; max-width: 9em; }
.uni__desc { max-width: 30em; opacity: .82; }
.uni__dishes { display: flex; gap: 10px; flex-wrap: wrap; }
.uni__dishes span { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 30%, transparent); }
.uni__media { position: relative; min-height: 0; }
.uni__photo { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; }
.uni__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.uni__panel:hover .uni__photo img { transform: scale(1.02); }
.uni__thumb { position: absolute; width: 36%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); border: 6px solid var(--bg); }
.uni__thumb img { width: 100%; height: 100%; object-fit: cover; }
.uni__thumb--a { left: -9%; bottom: 8%; transform: rotate(-6deg); }
.uni__cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.uni__cta .btn { --b-bg: var(--accent); --b-fg: var(--on-accent, var(--ink)); --b-hover: var(--fg); --b-hover-fg: var(--bg); }
.uni__progress { position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); bottom: 18px; height: 2px; background: var(--line-inv); border-radius: 2px; overflow: hidden; mix-blend-mode: difference; }
.uni__progress i { display: block; height: 100%; width: 100%; background: var(--paper); transform-origin: left; transform: scaleX(0); }
@media (max-width: 900px) {
  .uni { height: auto !important; }
  .uni__pin { position: relative; height: auto; overflow: visible; }
  .uni__track { flex-direction: column; transform: none !important; }
  .uni__panel, .uni__panel--intro { width: 100%; height: auto; grid-template-columns: 1fr; padding: 72px var(--gutter) 56px; }
  .uni__panel--intro { padding-block: 100px 40px; }
  .uni__media { aspect-ratio: 4 / 3.4; }
  .uni__num { top: 40px; font-size: 5rem; }
  .uni__progress { display: none; }
  .uni__thumb--a { left: auto; right: 4%; bottom: -8%; width: 34%; }
}

/* ---------- Dish wall ---------- */
.dishwall { overflow: hidden; }
.dishwall .marquee + .marquee { margin-top: 18px; }
.dish-card { flex: 0 0 auto; width: clamp(200px, 20vw, 290px); margin-right: 18px; }
.dish-card figure { aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--paper-2); }
.dish-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.dish-card:hover img { transform: scale(1.07); }
.dish-card figcaption, .dish-card .cap { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 14px; white-space: normal; }
.dish-card .cap b { font-weight: 600; }
.dish-card .cap small { color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; flex-shrink: 0; padding-top: 2px; }
/* Cards under ~250px wide: name then universe label, stacked, so "MADEMOISELLE CHANG" never runs into the next card
   (side by side it overflows a 200-230px card by up to 29px) */
@media (max-width: 1240px) {
  .dish-card figcaption, .dish-card .cap { flex-direction: column; gap: 4px; }
  .dish-card .cap small { padding-top: 0; }
}

/* Randomizer */
.randomizer { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.rand-card {
  --bg: var(--ink); --fg: var(--paper); --accent: var(--gold);
  position: relative; background: var(--bg); color: var(--fg); border-radius: 28px; padding: 18px; display: grid; grid-template-columns: 1fr; gap: 16px;
  transition: background .6s var(--ease), color .6s var(--ease); min-height: 100%;
}
.rand-card figure { aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; }
.rand-card img { width: 100%; height: 100%; object-fit: cover; }
.rand-card .meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 4px 8px 8px; }
.rand-card .meta h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; }
.rand-card .meta small { color: var(--accent-text, var(--accent)); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.rand-card.is-spinning figure img { animation: blurspin .12s linear infinite; }
@keyframes blurspin { 50% { filter: blur(3px); transform: scale(1.03); } }
@media (max-width: 900px) { .randomizer { grid-template-columns: 1fr; } }

/* ---------- L'étage ---------- */
.floor-list { display: grid; gap: 0; margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line-inv); }
.floor-item {
  display: grid; grid-template-columns: 80px 1.2fr 1fr 170px; align-items: center; gap: clamp(16px, 3vw, 48px);
  padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line-inv); position: relative;
}
.floor-item__n { font-family: var(--f-display); font-size: 1.4rem; color: var(--gold); }
.floor-item__name { font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1; transition: transform .6s var(--ease), color .4s; }
.floor-item:hover .floor-item__name { transform: translateX(16px); color: var(--gold-2); }
.floor-item__desc { color: var(--muted-inv); max-width: 30em; }
.floor-item__logo { height: 64px; width: auto; max-width: 170px; object-fit: contain; filter: brightness(0) invert(1); opacity: .8; justify-self: end; }
.floor-float {
  position: fixed; z-index: 50; left: 0; top: 0; width: 340px; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.floor-float.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* not rendered until the pointer is over its section: its loading="lazy" images are only fetched on hover */
.floor-float { display: none; }
@media (hover: hover) and (pointer: fine) { section:hover > .floor-float, .floor-float.is-on { display: block; } }
.floor-float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.floor-float img.is-on { opacity: 1; }
@media (max-width: 900px) {
  .floor-item { grid-template-columns: 1fr; gap: 10px; }
  .floor-item__logo { justify-self: start; height: 48px; }
  .floor-float { display: none; }
}

/* Big band */
.band { position: relative; overflow: hidden; background: var(--gold); color: var(--gold-on); padding-block: clamp(70px, 10vw, 150px); }
.band__big { font-family: var(--f-display); font-size: clamp(5rem, 21vw, 22rem); line-height: .8; letter-spacing: -.04em; white-space: nowrap; }
.band__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 40px); }
.band__when { font-family: var(--f-display); font-size: clamp(1.8rem, 3.4vw, 3.4rem); line-height: 1; }
.band .btn { --b-bg: var(--ink); --b-fg: var(--paper); --b-hover: var(--paper); --b-hover-fg: var(--ink); }

/* ---------- Chef teaser ---------- */
.chef { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 110px); align-items: center; }
.chef__img { position: relative; aspect-ratio: 4 / 5; }
.chef__img .img-reveal { position: absolute; inset: 0; }
/* ink signature kept on the white jacket (the white logo vanished on the jacket and on the paper page) */
.chef__sig { position: absolute; z-index: 2; right: 4%; bottom: 6%; width: 62%; filter: brightness(0) drop-shadow(0 2px 10px rgba(255, 255, 255, .45)); }
.chef__quote { font-family: var(--f-display); font-size: clamp(1.8rem, 3.2vw, 3.2rem); line-height: 1.08; }
.chef__quote::before { content: "“"; display: block; font-size: 2.4em; line-height: .6; color: var(--gold-em); margin-bottom: .1em; }
.media-row { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dark .media-row { color: var(--muted-inv); }
@media (max-width: 900px) { .chef { grid-template-columns: 1fr; } .chef__sig { right: 4%; } }

/* ---------- Offer cards (entreprises) ---------- */
.offers { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: clamp(40px, 5vw, 70px); }
.offer {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; color: var(--paper); isolation: isolate;
}
.offers > .offer { grid-column: span 4; }
.offers > .offer--wide { grid-column: span 8; }
.offer > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.offer:hover > img { transform: scale(1.06); }
.offer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,9,8,0) 30%, rgba(10,9,8,.85)); }
.offer__price { position: absolute; top: 22px; right: 22px; background: var(--t-fill); background-size: 200% 100%; color: var(--gold-on); border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 14px; }
.offer h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.9rem, 2.8vw, 2.8rem); line-height: 1; margin-bottom: 10px; }
.offer p { color: rgba(246, 241, 232, .82); max-width: 32em; }
.offer .link { margin-top: 16px; }
.offer[data-tone] .link { color: var(--t-2); } /* each offer signs with its own tone (light tint: >= 7:1 on the dark scrim) */
.offer--plain { background: var(--ink); }
.offer--plain::after { display: none; }
@media (max-width: 900px) { .offers > .offer, .offers > .offer--wide { grid-column: 1 / -1; } .offer { min-height: 380px; } }

/* ---------- Delivery ---------- */
.togo { --accent-em: var(--t-on); background: var(--t); color: var(--t-on); overflow: hidden; } /* used under data-tone="togo" (home #livraison, livraison page) */
.togo__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.togo__img { position: relative; }
.togo__img img { width: 118%; max-width: none; margin-left: -4%; }
.togo .btn { --b-hover: var(--paper); }
.togo-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 26px 0 34px; }
.togo-list li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.togo-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
@media (max-width: 900px) { .togo__grid { grid-template-columns: 1fr; } .togo__img img { width: 100%; margin: 0; } }

/* ---------- Press & clients ---------- */
.press { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; }
.press-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 300px; padding: 28px; border-radius: var(--radius);
  background: var(--cream); box-shadow: inset 0 0 0 1px var(--line); transition: transform .6s var(--ease), box-shadow .6s var(--ease), background .4s;
}
.press-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--ink), 0 30px 60px -30px rgba(0,0,0,.3); }
.press-card img { height: 40px; width: auto; max-width: 150px; object-fit: contain; object-position: left; mix-blend-mode: multiply; }
.press-card h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.06; }
.press-card .foot svg { width: 22px; height: 22px; transition: transform .5s var(--ease); }
.press-card:hover .foot svg { transform: translate(3px, -3px); }
.press-card .foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.logos-row { display: flex; align-items: center; gap: clamp(28px, 6vw, 90px); flex-wrap: wrap; }
.logos-row img { height: 46px; width: auto; filter: grayscale(1) contrast(1.2); opacity: .7; transition: filter .4s, opacity .4s; mix-blend-mode: multiply; }
.logos-row img:hover { filter: none; opacity: 1; }
@media (max-width: 900px) { .press { grid-template-columns: 1fr; } .press-card { min-height: 220px; } }

/* ---------- Infos pratiques ---------- */
.infos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); }
.hours { display: grid; border-top: 1px solid var(--line); }
.hours__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.hours__row h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1; display: flex; align-items: center; gap: 14px; }
.hours__row .t { font-family: var(--f-display); font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.hours__row .d { color: var(--muted); font-size: 14px; }
.hours__row .live { display: none; font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: #37c26b; color: #06240f; padding: 5px 9px; border-radius: 999px; }
.hours__row.is-live .live { display: inline-block; }
.dark .hours, .dark .hours__row { border-color: var(--line-inv); }
.dark .hours__row .d { color: var(--muted-inv); }
.map { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 420px; background: var(--paper-2); display: grid; grid-template-rows: 1fr auto; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05) sepia(.18); }
/* consent sits in the free row above the address card (grid), its photo still fills the whole map */
.map__consent { grid-row: 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 32px 24px 20px; text-align: center; color: var(--paper); isolation: isolate; }
.map__consent img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) brightness(.4); } /* .4: brightest hall highlight (white) -> #666, note stays >= 4.5:1 */
.map__consent .small { color: var(--paper); max-width: 26em; }
.map__card { position: relative; grid-row: 2; margin: 0 16px 16px; max-width: 430px; background: var(--ink); color: var(--paper); border-radius: 18px; padding: 20px 22px; display: grid; gap: 12px; }
.contact-list { display: grid; gap: 14px; margin-top: 28px; }
.contact-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1; transition: padding .5s var(--ease), color .3s; }
.contact-list a:hover { padding-left: 12px; color: var(--gold-em); } /* tone ink on light, tone on .dark */
.contact-list a small { font-family: var(--f-sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .infos { grid-template-columns: 1fr; } }
@media (min-width: 901px) { #infos .map { position: sticky; top: calc(var(--header-h) + 24px); min-height: 480px; } }
@media (max-width: 560px) { .map { min-height: 480px; } }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding-top: clamp(70px, 9vw, 130px); overflow: hidden; position: relative; }
.footer__cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding-bottom: clamp(50px, 7vw, 100px); border-bottom: 1px solid var(--line-inv); }
.footer__cta .h1 { max-width: 9em; }
.footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-block: 56px; }
.footer__cols h3, .footer__cols h4 { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-inv); font-weight: 600; margin-bottom: 18px; }
.footer__cols li + li { margin-top: 8px; }
.footer__cols a { opacity: .9; transition: color .3s, opacity .3s; }
.footer__cols a:hover { color: var(--gold); opacity: 1; }
.footer__word { font-family: var(--f-display); font-size: 25.5vw; line-height: .74; letter-spacing: -.05em; text-align: center; white-space: nowrap; color: var(--ink-3); margin-bottom: -.06em; user-select: none; }
.footer__word em { color: var(--gold); opacity: .9; }
.footer__legal { display: flex; justify-content: space-between; align-items: baseline; gap: 0 16px; flex-wrap: wrap; padding-block: 10px; border-top: 1px solid var(--line-inv); font-size: 13px; color: var(--muted-inv); }
.footer__legal a, .footer__legal [data-motion-toggle] { display: inline-block; padding-block: 12px; } /* 40px+ tap targets; band height unchanged */
.footer__legal a:hover { color: var(--paper); }
[data-motion-toggle] { font-size: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
[data-motion-toggle]:hover { color: var(--paper); }
.footer__legal .credit a { color: var(--paper); font-weight: 600; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; background-origin: content-box; transition: background-size .5s var(--ease), color .3s; }
.footer__legal .credit a:hover { color: var(--gold); background-size: 100% 1px; }
@media (max-width: 900px) {
  .footer__cols { grid-template-columns: 1fr 1fr; } .footer__cols > :first-child, .footer__cols > :last-child { grid-column: 1 / -1; }
  .footer__cols h3, .footer__cols h4 { margin-bottom: 8px; }
  .footer__cols li + li { margin-top: 0; }
  .footer__cols li a { display: inline-block; padding-block: 10px; } /* >= 40px tap targets on phones */
}

/* ---------- Page hero (inner pages) ---------- */
.phero { position: relative; padding: calc(var(--header-h) + clamp(60px, 10vw, 140px)) 0 clamp(50px, 7vw, 100px); }
.phero__crumbs { display: flex; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.phero__crumbs a { position: relative; }
.phero__crumbs a::after { content: ""; position: absolute; inset: -12px -8px; } /* 44px tap area, no layout change */
.phero__crumbs a:hover { color: var(--ink); }
.dark .phero__crumbs { color: var(--muted-inv); }

/* ---------- Univers page ---------- */
.u-page { --accent-em: var(--u-accent-text, var(--u-accent)); background: var(--u-soft); }
.u-page main { color: var(--u-fg); }
.u-hero { position: relative; background: var(--u-bg); color: var(--u-fg); padding-top: calc(var(--header-h) + clamp(30px, 5vw, 70px)); overflow: hidden; }
.u-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end; padding-bottom: clamp(40px, 6vw, 90px); }
.u-hero__logo { height: clamp(90px, 13vw, 170px); width: auto; max-width: 100%; object-fit: contain; object-position: left; margin-bottom: clamp(20px, 3vw, 40px); }
.u-hero__logo.is-white { filter: brightness(0) invert(1); }
.u-hero .lily-logo { font-size: clamp(3.4rem, 7vw, 6.4rem); margin-bottom: 24px; }
.u-hero .eyebrow { color: var(--u-accent); }
.u-hero h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.8rem, 6vw, 6.2rem); line-height: .95; letter-spacing: -.02em; margin: 16px 0 24px; }
.u-hero h1 em { color: var(--u-accent-text, var(--u-accent)); }
.u-hero p.lead { color: color-mix(in srgb, var(--u-fg) 78%, transparent); }
.u-hero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.u-hero__media { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }
.u-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.u-hero__num { position: absolute; right: var(--gutter); top: calc(var(--header-h) + 20px); font-family: var(--f-display); font-size: clamp(6rem, 16vw, 16rem); line-height: 1; opacity: .12; pointer-events: none; }
.u-hero .btn { --b-bg: var(--u-accent); --b-fg: var(--u-on-accent); --b-hover: var(--u-fg); --b-hover-fg: var(--u-bg); }
.u-hero .btn--ghost { --b-bg: transparent; --b-fg: var(--u-fg); }
@media (max-width: 900px) { .u-hero__grid { grid-template-columns: 1fr; } }

.menu-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 36px; position: sticky; top: calc(var(--header-h) + 10px); transition: top .6s var(--ease); z-index: 20; padding: 8px; border-radius: 999px; background: color-mix(in srgb, var(--u-soft) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
/* the header slides away when scrolling down: the sticky bar then moves up to the top edge */
body:has(.header.is-hidden) .tabs, .hdr-hidden .tabs { top: 10px; }
.tab { height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--u-fg, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--u-fg, var(--ink)) 22%, transparent); transition: background .3s, color .3s; }
.tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--u-fg, var(--ink)); color: var(--u-soft, var(--paper)); box-shadow: none; }
.tab sup { font-size: 10px; opacity: .8; margin-left: 4px; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 20px; margin-top: 40px; }
.menu-grid .dish-card { width: auto; margin: 0; }
.menu-grid .dish-card .cap b { font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; line-height: 1.05; }
.menu-grid .dish-card[hidden] { display: none; }
.menu-grid .dish-card { animation: pop .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes pop { from { opacity: 0; transform: translateY(24px); } }
.menu-note { margin-top: 40px; font-size: 13px; color: var(--muted); }

.u-gallery { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
.u-gallery .img-reveal { aspect-ratio: 4 / 5; }
.u-gallery .img-reveal:first-child { aspect-ratio: auto; grid-row: span 1; }
@media (max-width: 900px) { .u-gallery { grid-template-columns: 1fr 1fr; } .u-gallery .img-reveal:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } }

.next-u { display: block; position: relative; overflow: hidden; background: var(--n-bg); color: var(--n-fg); padding-block: clamp(60px, 9vw, 130px); }
.next-u small { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.next-u .big { font-family: var(--f-display); font-size: clamp(3.4rem, 11vw, 11rem); line-height: .9; letter-spacing: -.03em; display: flex; align-items: center; gap: .2em; transition: transform .8s var(--ease); }
.next-u:hover .big { transform: translateX(2vw); }
.next-u .big svg { width: .5em; height: .5em; color: var(--n-accent); }

/* Other univers strip */
.u-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.u-strip a { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; padding: 16px; isolation: isolate; }
.u-strip a img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.u-strip a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7)); }
.u-strip a:hover img { transform: scale(1.08); }
.u-strip b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.3rem, 1.8vw, 1.8rem); line-height: 1; }
.u-strip small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }
@media (max-width: 900px) { .u-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Forms ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .full { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: max(16px, 1em); /* >= 16px: no iOS zoom on focus */
  color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 12px 0; border-radius: 0; outline: none; transition: border-color .3s, box-shadow .3s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: currentColor; box-shadow: 0 1px 0 currentColor; } /* 2px line, no layout shift */
.segmented { display: flex; gap: 8px; flex-wrap: wrap; }
.segmented { position: relative; }
.segmented input { position: absolute; width: 1px !important; height: 1px; opacity: 0; pointer-events: none; }
.segmented label { cursor: pointer; height: 44px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: inherit; transition: all .3s; }
.segmented input:checked + label { background: var(--ink); color: var(--paper); box-shadow: none; }
.segmented input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px var(--focus-halo); }
.dark .field label { color: var(--muted-inv); }
.dark .field input, .dark .field textarea, .dark .field select { border-color: var(--line-inv); }
.dark .segmented label { box-shadow: inset 0 0 0 1px var(--line-inv); }
.dark .segmented input:checked + label { background: var(--gold); color: var(--gold-on); }
.form-note { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* ---------- Utilities ---------- */
.row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 64px; }
.center { text-align: center; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: end; }
@media (max-width: 900px) { .split-2 { grid-template-columns: 1fr; } }
.rounded { border-radius: var(--radius); overflow: hidden; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.dark .divider { background: var(--line-inv); }

/* ---------- Itinéraire : Google Maps · Waze · Plans ---------- */
.dirs { display: grid; gap: 10px; }
.dirs__label { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.dirs__row { display: flex; flex-wrap: wrap; gap: 8px; }
.dirs__btn { gap: .5em; }
.dirs__ico { width: 17px; height: 17px; flex: none; }
.map__card .dirs__label { color: var(--muted-inv); }
.dirs-inline { white-space: normal; }
@media (max-width: 420px) { .dirs__row { gap: 6px; } .dirs__row .btn { padding: 0 12px; font-size: 13px; gap: .4em; } .dirs__ico { width: 15px; height: 15px; } .dirs__long { display: none; } }