/* ==========================================================================
   onePlace — Univers pages (Yalah, Bella Gigi, Mademoiselle Chang, Shmatz, Lily and the Moon)
   Builds on main.css (.u-page, .u-hero, .tabs, .menu-grid, .u-gallery, .u-strip, .next-u…).
   Theme tokens on <body>: --u-bg --u-fg --u-accent --u-soft --u-deep --u-on-accent
   + page tokens: --u-light (readable on --u-deep), --u-eyebrow, --u-em-deep,
     --u-accent-text (accent tone that stays readable as text on the univers' own backgrounds),
     --u-on-dark / --u-on-dark-2 / --u-on-dark-on (the accent on the site's ink surfaces, see below).
   Tone: the page tone IS the univers (main.css maps --t/--gold* onto --u-accent on .u-page); the only
   section on another tone is the Menu Découverte card (multi-univers offer, data-tone="brand").
   ========================================================================== */

/* Headline <em> in main use the text-safe accent (dark enough for the light univers backgrounds). */
.u-page main { color: var(--u-fg); --accent-em: var(--u-accent-text, var(--u-accent)); }
/* Shared ink surfaces (footer, mobile menu, nav dropdown, transparent header over the dark Chang/Shmatz heroes):
   the univers tone as it reads on ink — accent >= 6:1 (Bella's teal and Lily's sage lifted a step, same hue),
   light tint for the focus ring, dark text on accent fills (Réserver buttons, ghost-button hover). */
.u-page :is(.footer, .mnav, .nav__drop),
.u-page .header:not(.is-solid):not(.header--ink),
.u-page.menu-open .header {
  --t: var(--u-on-dark); --t-2: var(--u-on-dark-2); --t-on: var(--u-on-dark-on);
  --gold: var(--t); --gold-2: var(--t-2); --gold-on: var(--t-on); --gold-em: var(--t);
  --accent-em: var(--t); --focus: var(--t-2); --focus-halo: var(--ink);
}
.u-page main .lead,
.u-page main .menu-note,
.u-page main .hours__row .d { color: color-mix(in srgb, currentColor 72%, transparent); }
.u-page main .eyebrow { color: var(--u-eyebrow); }
.u-page main .stats,
.u-page main .stat,
.u-page main .hours,
.u-page main .hours__row { border-color: color-mix(in srgb, currentColor 18%, transparent); }
.u-page main .stat span { color: color-mix(in srgb, currentColor 70%, transparent); }
/* Secondary text on dark heroes and on the red Mademoiselle Chang theme: 70% does not hold 4.5:1 */
.u-page [data-hero-dark] .lead,
.u--chang main .lead,
.u--chang main .stat span,
.u--chang main .hours__row .d,
.u--chang main .menu-note,
.u--chang .u-hours-note,
.u--chang .u-crumbs li:not([aria-current]) { color: color-mix(in srgb, currentColor 90%, transparent); }
.u--chang .nav a { opacity: 1; }
.u-page .u-btn { --b-bg: var(--u-fg); --b-fg: var(--u-soft); --b-hover: var(--u-accent); --b-hover-fg: var(--u-on-accent); }

/* ---------- Hero ---------- */
.u-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; margin-bottom: clamp(24px, 4vw, 48px); }
.u-crumbs li { display: inline-flex; align-items: center; gap: 10px; color: color-mix(in srgb, var(--u-fg) 70%, transparent); }
.u-crumbs li + li::before { content: "/"; opacity: .45; }
/* 40px-tall hit area; the negative margin keeps the visual rhythm unchanged. */
.u-crumbs a { display: inline-block; padding-block: 10px; margin-block: -10px; transition: color .3s; }
.u-crumbs a:hover { color: var(--u-fg); }
.u-crumbs [aria-current] { color: var(--u-fg); font-weight: 500; }

.u-hero { isolation: isolate; }
.u-hero__num { z-index: -1; color: var(--u-fg); letter-spacing: -.04em; }
.u-page .u-hero .eyebrow { color: var(--u-eyebrow); }
.u-hero__grid { align-items: center; }
.u-hero__copy { position: relative; z-index: 1; }
.u-hero__brand { line-height: 1; }
.u-hero__brand .lily-logo { color: var(--u-fg); }
.u-hero h1 { max-width: 11em; }
.u-hero h1 .split-line { padding-bottom: .1em; margin-bottom: -.1em; }
.u-page .u-hero h1 em { color: var(--u-accent-text, var(--u-accent)); }
.u-hero p.lead { max-width: 34em; }
.u-hero__facts .chip { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--u-fg) 32%, transparent); }
.u-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.u-hero .btn--ghost:hover { --b-hover-fg: var(--u-bg); }

.u-hero__visual { position: relative; }
.u-hero__media { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .45); background: var(--u-deep); }
.u-hero__media img { transform-origin: 50% 60%; animation: u-zoom 2s var(--ease) both; }
@keyframes u-zoom { from { transform: scale(1.14); } }

.u-hero__thumb {
  position: absolute; z-index: 2; left: -7%; bottom: 7%; width: 34%;
  background: var(--u-soft); color: var(--u-fg); border-radius: 18px; padding: 8px 8px 12px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45); transform: rotate(-5deg);
  animation: u-float 1.4s .5s var(--ease) both;
}
.u-hero__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.u-hero__thumb figcaption { margin-top: 10px; padding-inline: 4px; font-family: var(--f-display); font-size: clamp(1rem, 1.3vw, 1.3rem); line-height: 1.05; }
.u-hero__thumb small { display: block; margin-bottom: 4px; font-family: var(--f-sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--u-eyebrow); }
@keyframes u-float { from { transform: translateY(36px) rotate(0deg); } }

.u-badge { position: absolute; z-index: 2; right: -18px; top: -18px; width: 124px; height: 124px; border-radius: 50%; background: var(--u-accent); color: var(--u-on-accent); display: grid; place-items: center; }
.u-badge svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); animation: spin 24s linear infinite; }
.u-badge i { font-style: normal; font-size: 22px; }

@media (max-width: 900px) {
  .u-hero__grid { gap: 40px; }
  .u-hero__thumb { left: 12px; bottom: -28px; width: 38%; }
  .u-hero__visual { margin-bottom: 28px; }
  .u-badge { width: 96px; height: 96px; right: 10px; top: -30px; }
}

/* ---------- Ticker ---------- */
.u-page .u-ticker { background: var(--u-accent); color: var(--u-on-accent); }

/* ---------- Edito ---------- */
.u-edito__txt { font-size: clamp(1.9rem, 3.7vw, 3.9rem); max-width: 19em; }
.u-page .manifesto em { color: var(--u-accent-text, var(--u-accent)); }
.u-stats { grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 6vw, 80px); }
.u-stats .stat b { font-size: clamp(2.4rem, 4.4vw, 4.4rem); }
.u-stats .stat span { max-width: 18em; }
@media (max-width: 900px) {
  .u-stats { grid-template-columns: 1fr; }
  .u-stats .stat, .u-stats .stat + .stat { padding: 20px 0; border-left: 0; }
  .u-stats .stat:nth-child(even) { padding-left: 0; border-left: 0; }
  .u-stats .stat:last-child { border-bottom: 0; }
}

/* ---------- La carte ---------- */
.u-carte { background: var(--u-soft); padding-top: clamp(64px, 8vw, 120px); }
.u-carte__lead { max-width: 24em; }
.u-carte .tabs { margin-top: clamp(28px, 4vw, 44px); }
.menu-grid .dish-card .cap { flex-direction: column; gap: 6px; }
.menu-grid .dish-card .cap small { color: color-mix(in srgb, currentColor 80%, transparent); padding-top: 0; }
.u-carte .tab sup { opacity: .8; }
.menu-grid .dish-card figure { background: color-mix(in srgb, var(--u-fg) 7%, transparent); }
.menu-grid .dish-card figure { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.menu-grid .dish-card:hover figure { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .5); }
@media (max-width: 600px) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; margin-top: 28px; }
  .menu-grid .dish-card figure { border-radius: 14px; }
  .menu-grid .dish-card .cap { margin-top: 10px; }
  .menu-grid .dish-card .cap b { font-size: 1.12rem; }
  .menu-grid .dish-card .cap small { font-size: 11px; letter-spacing: .08em; line-height: 1.35; }
  /* One scrolling row: fade the right edge so hidden categories read as "more to scroll";
     the end padding lets the last chip scroll clear of the fade. */
  .tabs {
    flex-wrap: nowrap; margin-inline: calc(var(--gutter) * -1); border-radius: 0; padding-inline: var(--gutter) 44px; width: auto; max-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
  .tab { height: 42px; padding: 0 14px; font-size: 13px; }
}

/* ---------- Gallery band ---------- */
.u-gal { background: var(--u-deep); color: var(--u-light); --accent-em: var(--u-em-deep); }
.u-page .u-gal .eyebrow { color: color-mix(in srgb, var(--u-light) 80%, transparent); }
.u-gal .img-reveal { background: color-mix(in srgb, var(--u-light) 10%, transparent); }
.u-gallery figcaption {
  position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 7px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--u-soft) 88%, transparent); color: var(--u-fg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
}

/* ---------- Infos ---------- */
.u-infos { background: var(--u-bg); }
.u-infos__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 100px); align-items: stretch; }
.u-hours-note { margin-top: 18px; font-size: 14px; color: color-mix(in srgb, currentColor 72%, transparent); }
.u-deal { grid-column: auto; min-height: 520px; height: 100%; }
.u-page main .u-deal .u-deal__kicker { color: var(--t-2); margin-bottom: 10px; } /* brand tone (data-tone), on the photo's dark fade */
/* Deeper fade than the default .offer scrim: the copy sits over the bright part of the photo (>= 4.5:1 at every pixel) */
.u-deal::after { background: linear-gradient(180deg, rgba(10, 9, 8, 0) 12%, rgba(10, 9, 8, .8) 46%, rgba(10, 9, 8, .9)); }
.u-deal p:not(.eyebrow) { font-size: 15.5px; }
@media (max-width: 900px) {
  .u-infos__grid { grid-template-columns: 1fr; }
  .u-deal { min-height: 440px; }
}

/* ---------- Other univers + next ---------- */
.u-others { background: var(--u-soft); }
.u-strip--4 { grid-template-columns: repeat(4, 1fr); }
.u-strip a span { display: block; }
@media (max-width: 900px) { .u-strip--4 { grid-template-columns: repeat(2, 1fr); } }
.next-u small { display: block; margin-bottom: 18px; opacity: .9; } /* .7 gave 4.05:1 on the red Chang band */
.next-u .big { flex-wrap: wrap; }
.next-u__tag { display: block; margin-top: 18px; font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 2vw, 2rem); color: var(--n-accent-text, var(--n-accent)); }
.next-u .wrap { position: relative; }

/* ==========================================================================
   Per-univers art direction
   ========================================================================== */

/* Yalah — a rising sun: arched hero picture, echoing the logo's rainbow arcs */
.u--yalah .u-hero__media { border-radius: 999px 999px var(--radius) var(--radius); }
.u--yalah .u-hero__media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--u-accent) 55%, transparent);
}

/* Bella Gigi — trattoria warmth: soft green and teal, pill-shaped CTA badge */
.u--bella .u-hero__media { border-radius: var(--radius) var(--radius) 160px var(--radius); }

/* Mademoiselle Chang — red & black drama */
.u--chang .u-hero { background: radial-gradient(120% 80% at 80% 10%, #c21d25 0%, var(--u-bg) 55%, #7c0d13 100%); }
.u--chang .u-hero__media { box-shadow: 0 0 0 1px color-mix(in srgb, var(--u-accent) 35%, transparent), 0 60px 120px -40px rgba(0, 0, 0, .7); }
.u--chang .u-carte {
  --u-soft: #120708; --u-fg: #fff1e8;
  background: radial-gradient(90% 60% at 50% -10%, rgba(165, 20, 28, .55), transparent 70%), #120708;
}
.u--chang .u-carte .tab[aria-selected="true"] { background: var(--u-accent); color: var(--u-on-accent); }
.u--chang .u-carte .menu-grid .dish-card .cap small { color: var(--u-accent); }
.u--chang .u-carte .dish-card figure { box-shadow: 0 0 0 1px color-mix(in srgb, var(--u-accent) 16%, transparent); }
.u--chang .u-strip a::after { background: linear-gradient(180deg, transparent 35%, rgba(40, 4, 6, .85)); }

/* Shmatz — dark deli: signage type on the ticker, warm amber glow */
.u--shmatz .u-ticker { font-family: var(--f-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.1rem, 2.1vw, 2rem); padding-block: 16px; }
.u--shmatz .u-hero { background: radial-gradient(90% 70% at 85% 0%, color-mix(in srgb, var(--u-accent) 18%, transparent), transparent 60%), var(--u-bg); }
.u--shmatz .u-hero__media { border-radius: 10px; }
.u--shmatz .u-hero__thumb { border-radius: 10px; }
.u--shmatz .u-hero__thumb img { border-radius: 6px; }
.u--shmatz .u-carte { background: var(--u-bg); }
.u--shmatz .u-carte .tabs { background: color-mix(in srgb, var(--u-bg) 86%, transparent); }

/* Lily and the Moon — light & airy: a full-moon picture, pale bands */
.u--lily .u-hero__media { border-radius: 50%; box-shadow: 0 40px 80px -40px rgba(31, 51, 35, .35); }
.u--lily .u-hero__media::before {
  content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .22), transparent 55%);
}
.u--lily .u-hero__thumb { left: -4%; bottom: 0; }
.u--lily .u-gal { background: var(--u-bg); color: var(--u-fg); --accent-em: var(--u-accent-text, var(--u-accent)); }
.u--lily .u-gal .eyebrow { color: var(--u-eyebrow); }
.u--lily .u-gal .img-reveal { background: var(--u-soft); }
.u--lily .u-infos { background: var(--u-soft); }
.u--lily .u-others { background: var(--u-bg); }