/* ============================================================
   Tagliato Fine — stylesheet
   "Bottega at night": dark coffee tones over a photo of the room.
   The photo stays sharp in the centre; its sides and corners blur
   and melt into the espresso background. Cormorant Garamond + Jost
   (self-hosted, OFL). Mobile first.
   Two themes (data-theme on <html>, set by js/hours.js): dark ember (burnt
   orange) by default, cream when the visitor picks it with the header button.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-400-Italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Palette: dark theme (client palette) */
  /* 2026-10-16: a little lighter and redder, a misty burgundy-orange (was #1a0d07 / #24120a / #2f170c) */
  --night: #2b1513;            /* page: smoky burgundy-brown */
  --umber: #361a17;            /* bands */
  --ember-brown: #43211c;      /* cards */
  --espresso: #1a0d07;         /* dark text on orange buttons and badges (keeps 4.9:1 on vermilion) */
  --crema: #fdf1e6;            /* text */
  --coral: #fb874f;            /* logo, prices, focus, buttons (with vermilion) */
  --vermilion: #dc5634;        /* decorative rules and markers */
  --clay: #cc6c44;             /* badge, dividers */
  --mocha: #b47a66;            /* dimmed menu categories (3.3:1 on the lightest veil) */
  --apricot-glow: #f4ac5c;     /* small orange text */
  --apricot-pale: #f8c68f;     /* hover on light orange */
  --tan: #e8c4ae;              /* mocha lightened, for muted text */
  /* light theme (client palette) */
  --cream: #fcf4e4;
  --sand: #d8c8bc;
  --rose: #d2aaa7;
  --apricot: #fcac63;
  --toffee: #a47352;
  --toffee-deep: #6e4630;      /* toffee darkened for small text on cream and sand */

  /* Roles: dark (default) */
  --scrim: 43, 21, 19;         /* rgb of the shade laid over the room photo (= --night) */
  --page: var(--night);
  --bg: var(--night);
  --bg-2: var(--umber);
  --card: var(--ember-brown);
  --ink: var(--crema);
  --muted: var(--tan);
  --dim: var(--mocha);         /* menu categories not selected (large text only) */
  --line: rgba(204, 108, 68, 0.3);
  --line-strong: rgba(204, 108, 68, 0.6);
  --accent: var(--apricot-glow);  /* small orange text */
  --accent-hover: var(--apricot-pale);
  --on-accent: var(--espresso);
  --tint: rgba(251, 135, 79, 0.16);
  /* hover glow of the plates, both themes: the golden crust of well-baked bread */
  --glow: 201, 140, 66;        /* #c98c42 */
  --glow-ring: rgba(var(--glow), 0.5);
  --glow-halo: rgba(var(--glow), 0.38);
  --glow-fill: rgba(var(--glow), 0.13);
  --glow-drop: rgba(0, 0, 0, 0.75);
  --ok: #a9c79a;
  --on-ok: var(--espresso);
  --closed: var(--vermilion);
  --focus: var(--coral);
  --brand: var(--coral);       /* logo and wordmark */
  --mark: var(--vermilion);    /* decorative rules and markers */
  --price: var(--coral);
  --btn-fill: linear-gradient(135deg, var(--coral), var(--vermilion));
  --btn-fill-hover: linear-gradient(135deg, #fc9c6b, #e66a48);
  --btn-ink: var(--espresso);
  --badge-bg: var(--clay);
  --badge-ink: var(--espresso);
  --tag-bg: var(--tint);

  --room-light: 1;
  --haze: 255, 190, 160;       /* matte warm haze on the sides of the photo */
  --mist-warm: 232, 98, 58;    /* orange mist, top left */
  --mist-deep: 128, 26, 38;    /* burgundy mist, bottom right */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E");
  --header-shade: 0.8;
  --head-shade: 0.76;
  --head-shade-2: 0.82;
  --veil: rgba(var(--scrim), 0.87);
  --veil-alt: rgba(54, 26, 23, 0.92);

  --radius: 6px;
  --radius-lg: 14px;
  --header-h: 64px;
  --max: 1200px;
  --gutter: 1.1rem;
  --fast: 150ms ease;
  color-scheme: dark;
}

/* Light theme: milky cream, picked by the visitor */
:root[data-theme="light"] {
  --scrim: 252, 244, 228;
  --page: var(--cream);
  --bg: var(--cream);
  --bg-2: var(--sand);
  --card: #fffaf2;
  --ink: #241811;
  --muted: #5e4a3c;
  --dim: #75604f;
  --line: rgba(164, 115, 82, 0.24);
  --line-strong: rgba(164, 115, 82, 0.5);
  --accent: var(--toffee-deep);
  --accent-hover: #4e3020;
  --on-accent: #fffaf2;
  --tint: rgba(252, 172, 99, 0.22);
  /* same golden hover glow as the dark theme; only the drop shadow is softer on cream */
  --glow-drop: rgba(110, 70, 48, 0.2);
  --ok: #3f6b3a;
  --on-ok: #ffffff;
  --closed: var(--toffee-deep);
  --focus: var(--toffee-deep);
  --brand: var(--toffee);
  --mark: var(--toffee);
  --price: var(--toffee);      /* prices are large bold text: 3:1 is enough */
  --btn-fill: var(--apricot);
  --btn-fill-hover: #f39a48;
  --haze: 255, 250, 240;
  --mist-warm: 252, 244, 228;  /* no mist on cream: same colour as the page */
  --mist-deep: 252, 244, 228;
  --btn-ink: #241811;
  --badge-bg: var(--rose);
  --badge-ink: #241811;
  --tag-bg: rgba(210, 170, 167, 0.4);
  --veil: rgba(252, 244, 228, 0.93);
  --veil-alt: rgba(216, 200, 188, 0.95);
  /* cream has its own daylight photo of the room (interieur-clair.webp), so the shades can stay lighter */
  --header-shade: 0.9;
  --head-shade: 0.72;
  --head-shade-2: 0.84;
  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  transition: background-color 0.6s ease, color 0.6s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.1; color: var(--ink); }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
blockquote { margin: 0; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.mt-lg { margin-top: 1.5rem; }

/* ---------- The room behind the whole site ---------- */
/* The evening render of the room (04_photos-sources/12-salle-nouvelle-fond.jpg, 3:2 crop by outils/grade_fond.py),
   lamps and all: two fixed layers that drift together very slowly while the light breathes. Nothing is cut out,
   lit or swung (client decision, late 2026-10-17); the earlier variants are in 99_archives/sauvegardes/. */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  transform-origin: 50% 40%;
  filter: brightness(var(--room-light));
  animation: room-drift 48s ease-in-out infinite alternate, room-light 14s ease-in-out infinite alternate;
}
/* sharp photo, covering the viewport, anchored on the pendant lamps (24 % from the left, 30 % from the top) so
   they stay on screen and in focus on a phone too; a fine grain keeps the dark gradients smooth (no banding) */
body::before {
  z-index: -2;
  background:
    var(--grain) 0 0 / 180px 180px repeat,
    var(--page) url("../img/hero/interieur.webp?v=202610200900") 24% 30% / cover no-repeat;
}
/* soft focus on the sides and corners: blurred, a little desaturated (matte)
   and veiled with a light warm haze, melting into the page colour */
body::after {
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 48% at 12% 8%, rgba(var(--mist-warm), 0.16), transparent 70%),
    radial-gradient(ellipse 70% 55% at 92% 96%, rgba(var(--mist-deep), 0.3), transparent 72%),
    linear-gradient(90deg, rgba(var(--haze), 0.13) 0%, rgba(var(--haze), 0.05) 16%, rgba(var(--haze), 0) 30%, rgba(var(--haze), 0) 70%, rgba(var(--haze), 0.05) 84%, rgba(var(--haze), 0.13) 100%),
    radial-gradient(ellipse 84% 78% at 36% 36%, transparent 50%, rgba(var(--scrim), 0.35) 70%, rgba(var(--scrim), 0.55) 86%, rgba(var(--scrim), 0.72) 100%),
    url("../img/hero/interieur-flou.webp?v=202610200900") 24% 30% / cover no-repeat;
  filter: brightness(var(--room-light)) saturate(0.78);
  animation-name: room-drift, room-light-soft;
  -webkit-mask-image: radial-gradient(ellipse 80% 74% at 36% 36%, transparent 42%, rgba(0, 0, 0, 0.55) 64%, #000 86%);
          mask-image: radial-gradient(ellipse 80% 74% at 36% 36%, transparent 42%, rgba(0, 0, 0, 0.55) 64%, #000 86%);
}
/* Cream theme: the same evening photo, graded to daylight cream (04_photos-sources/outils/grade_fond.py),
   so the room and its table cards stay visible under the cream veils (client request, 2026-10-17) */
:root[data-theme="light"] body::before {
  background:
    var(--grain) 0 0 / 180px 180px repeat,
    var(--page) url("../img/hero/interieur-clair.webp?v=202610200900") 24% 30% / cover no-repeat;
}
:root[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 84% 78% at 36% 36%, transparent 55%, rgba(var(--scrim), 0.18) 72%, rgba(var(--scrim), 0.3) 88%, rgba(var(--scrim), 0.42) 100%),
    url("../img/hero/interieur-clair-flou.webp?v=202610200900") 24% 30% / cover no-repeat;
}
/* Phones and other tall screens: the wide photo would be enlarged until only one lamp fits, so they take a tall
   crop of the same render (the three lamps, the wall, the banquette; grade_fond.py PORTRAIT) and a gentler drift */
@media (max-aspect-ratio: 4/5) {
  body::before {
    background:
      var(--grain) 0 0 / 180px 180px repeat,
      var(--page) url("../img/hero/interieur-portrait.webp?v=202610202125") 30% 20% / cover no-repeat;
  }
  body::after { background-image: none; }
  :root[data-theme="light"] body::before {
    background:
      var(--grain) 0 0 / 180px 180px repeat,
      var(--page) url("../img/hero/interieur-portrait-clair.webp?v=202610202125") 30% 20% / cover no-repeat;
  }
  :root[data-theme="light"] body::after { background-image: none; }
  body::before, body::after { animation-name: room-drift-soft, room-light; }
  /* the lamps hang in the top third: keep it light there; the hero text keeps its own shade (.hero-copy::before) */
  .hero {
    background:
      var(--grain) 0 0 / 180px 180px repeat,
      linear-gradient(180deg, rgba(var(--scrim), 0.06) 0%, rgba(var(--scrim), 0.1) 24%, rgba(var(--scrim), 0.5) 34%, rgba(var(--scrim), 0.85) 44%, rgba(var(--scrim), 0.9) 100%);
  }
}
@keyframes room-drift-soft {
  from { scale: 1; translate: 0 0; }
  to { scale: 1.03; translate: -0.6% 0.4%; }
}
/* The room breathes (client requests, 2026-10-17): both layers drift together, very slowly, and the light rises
   and falls gently. Pure CSS, off with reduced motion. */
@keyframes room-drift {
  from { scale: 1.04; translate: 0 0; }
  to { scale: 1.09; translate: -1.31% 0.87%; }
}
@keyframes room-light {
  from { filter: brightness(0.86); }
  to { filter: brightness(1); }
}
/* cream theme (client, 2026-10-20): the daylight photo with more contrast and colour, so the room reads clearly */
:root[data-theme="light"] body::before { animation-name: room-drift, room-light-clair; }
:root[data-theme="light"] body::after {
  animation-name: room-drift, room-light-clair;
  -webkit-mask-image: radial-gradient(ellipse 96% 90% at 40% 40%, transparent 58%, rgba(0, 0, 0, 0.5) 80%, #000 100%);
          mask-image: radial-gradient(ellipse 96% 90% at 40% 40%, transparent 58%, rgba(0, 0, 0, 0.5) 80%, #000 100%);
}
@media (max-aspect-ratio: 4/5) {
  :root[data-theme="light"] body::before, :root[data-theme="light"] body::after { animation-name: room-drift-soft, room-light-clair; }
}
@keyframes room-light-clair {
  from { filter: brightness(0.94) contrast(1.16) saturate(1.15); }
  to { filter: brightness(1) contrast(1.16) saturate(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] body::before, :root[data-theme="light"] body::after { filter: contrast(1.16) saturate(1.15); }
}
@media (min-width: 900px) {
  /* the cream veil stays behind the text and leaves the right half of the room clear */
  :root[data-theme="light"] .hero {
    background:
      var(--grain) 0 0 / 180px 180px repeat,
      /* the veil follows the text column: on wide screens the room shows on both sides of it */
      linear-gradient(90deg,
        rgba(var(--scrim), 0.3) 0,
        rgba(var(--scrim), 0.9) max(0px, calc((100% - var(--max)) / 2 + 2rem)),
        rgba(var(--scrim), 0.86) calc(max(0px, (100% - var(--max)) / 2) + min(100%, var(--max)) * 0.42),
        rgba(var(--scrim), 0.5) calc(max(0px, (100% - var(--max)) / 2) + min(100%, var(--max)) * 0.54),
        rgba(var(--scrim), 0) calc(max(0px, (100% - var(--max)) / 2) + min(100%, var(--max)) * 0.7));
  }
}
@keyframes room-light-soft {
  from { filter: brightness(0.86) saturate(0.78); }
  to { filter: brightness(1) saturate(0.78); }
}
/* The lamps live (client request, 2026-10-20): the bright parts of the room (lamps, LED strip, table cards,
   04_photos-sources/outils: interieur-lampes.webp) glow on their own slow, uneven rhythm over the drifting room.
   Dark theme only; off with reduced motion like the rest. */
html::after {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1;
  pointer-events: none; transform-origin: 50% 40%;
  background: url("../img/hero/interieur-lampes.webp?v=202610202330") 24% 30% / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.35;
  animation: room-drift 48s ease-in-out infinite alternate, lamp-glow 9s ease-in-out infinite;
}
:root[data-theme="light"]::after, :root[data-theme="light"]::before { display: none; }
/* the evening room slowly turns towards milky cream and back (client, 2026-10-20): the cream grade of the same
   photo fades in and out over it, same geometry and drift, between the sharp photo and the soft edges */
html::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1;
  pointer-events: none; transform-origin: 50% 40%;
  background: url("../img/hero/interieur-clair.webp?v=202610200900") 24% 30% / cover no-repeat;
  opacity: 0;
  animation: room-drift 48s ease-in-out infinite alternate, room-cream 26s ease-in-out infinite;
}
@media (max-aspect-ratio: 4/5) {
  html::before {
    background-image: url("../img/hero/interieur-portrait-clair.webp?v=202610202125");
    background-position: 30% 20%;
    animation-name: room-drift-soft, room-cream;
  }
}
/* the living room video (js/reveal.js playRoomVideo, 04_photos-sources/outils/lampes_video.py): the background photo
   itself with its lamps lighting up and its plants swaying. Same frame, anchor, drift and breathing light as the photo
   layer it covers, so the soft edges (body::after) and the cream wash (html::before) stay aligned over it */
.room-video {
  position: fixed; top: 0; left: 0; z-index: -2;
  width: 100%; height: 100vh; height: 100lvh;
  object-fit: cover; object-position: 24% 30%;
  pointer-events: none; transform-origin: 50% 40%;
  opacity: 0; transition: opacity 1.2s ease;
  animation: room-drift 48s ease-in-out infinite alternate, room-light 14s ease-in-out infinite alternate;
}
@media (max-aspect-ratio: 4/5) {
  .room-video { object-position: 30% 20%; animation-name: room-drift-soft, room-light; }
}
.has-room-video .room-video { opacity: 1; }
:root[data-theme="light"] .room-video { display: none; }
/* the video lights its own lamps: the static glow steps aside */
:root.has-room-video:not([data-theme="light"])::after { display: none; }
@keyframes room-cream {
  0%, 100% { opacity: 0; }
  45%, 60% { opacity: 0.32; }
}
@media (max-aspect-ratio: 4/5) {
  html::after {
    background-image: url("../img/hero/interieur-portrait-lampes.webp?v=202610202330");
    background-position: 30% 20%;
    animation-name: room-drift-soft, lamp-glow;
  }
}
@keyframes lamp-glow {
  0%, 100% { opacity: 0.25; }
  22% { opacity: 0.6; }
  31% { opacity: 0.42; }
  55% { opacity: 0.72; }
  70% { opacity: 0.35; }
  84% { opacity: 0.6; }
}
@supports not (translate: 0) {
  body::before, body::after, html::before, html::after { animation-name: none; }
}

/* ---------- Type ---------- */
.display {
  font-size: clamp(3rem, 9vw, 6.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-wrap: balance;
}
.section-title {
  font-size: clamp(2.3rem, 5.5vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-wrap: balance;
}
.lead { font-size: 1.15rem; color: var(--muted); max-width: 36rem; }
.eyebrow {
  display: block;
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--accent);
}
.section-head { max-width: 46rem; margin: 0 0 2.5rem; }
.section-head .lead { margin: 1rem 0 0; }

/* ---------- Buttons & chips ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  background: transparent;
  transition: background-color var(--fast), color var(--fast), border-color var(--fast);
}
.btn-primary { background: var(--btn-fill); border-color: transparent; color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-fill-hover); }
.btn-secondary { color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { min-height: 44px; padding: 0.5rem 1.15rem; font-size: 0.92rem; }
.chip {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent);
}
.chip-now { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.badge {
  display: inline-block;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-ink);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

/* ---------- Header ---------- */
.skip-link {
  position: absolute; top: -100px; inset-inline-start: 1rem; z-index: 1000;
  padding: 0.7rem 1rem; background: var(--btn-fill); color: var(--btn-ink); border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { top: 0; }
.header {
  position: sticky; top: 0; z-index: 100;
  min-height: var(--header-h);
  background: rgba(var(--scrim), 0.94);
  border-bottom: 1px solid var(--line);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header {
    background: rgba(var(--scrim), var(--header-shade));
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
  }
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px; color: var(--brand); }
.brand-mark {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  font-family: var(--serif); font-weight: 600; font-size: 0.9rem;
}
.brand-mark span { transform: rotate(-45deg); }
.brand-emblem { flex: none; width: 44px; height: 44px; object-fit: contain; }
.footer-emblem { display: block; width: 72px; height: 72px; margin-bottom: 0.6rem; }
:root[data-theme="light"] .brand-emblem, :root[data-theme="light"] .footer-emblem { filter: brightness(0.62) saturate(1.2); }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; }
.nav { display: none; gap: 1.8rem; font-size: 0.98rem; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted);
  text-decoration: underline 1px transparent;
  text-underline-offset: 6px;
  transition: color var(--fast), text-decoration-color var(--fast);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration-color: var(--accent); }
.header-tools { display: flex; align-items: center; gap: 0.6rem; }
.lang-switcher { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; }
.lang-link {
  display: inline-grid; place-items: center;
  min-width: 34px; min-height: 36px; padding: 0 0.55rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; color: var(--muted);
}
.lang-link:hover { color: var(--ink); }
.lang-link.active { background: var(--btn-fill); color: var(--btn-ink); }
.theme-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--fast);
}
.theme-btn:hover, .theme-btn[aria-pressed="true"] { background: var(--tint); }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:root:not([data-theme="light"]) .icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: none; }
.status-pill.header-status { display: none; }

/* Small phones: the sign stacks on two lines, the diamond steps aside */
@media (max-width: 479px) {
  .brand-mark { display: none; }
  .brand-emblem { width: 38px; height: 38px; }
  .brand-name { width: min-content; font-size: 1rem; letter-spacing: 0.12em; line-height: 1.05; }
  .header-tools { gap: 0.4rem; }
  .lang-link { min-width: 32px; padding: 0 0.4rem; }
}
@media (min-width: 760px) {
  .nav { display: flex; }
}
@media (min-width: 1100px) {
  .status-pill.header-status { display: inline-flex; }
}

/* ---------- Status pill ---------- */
.status-pill {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.55rem;
  padding: 0.45rem 0.95rem; border-radius: 999px;
  background: rgba(var(--scrim), 0.55); border: 1px solid var(--line-strong);
  font-size: 0.92rem; font-weight: 500;
}
.status-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ok); }
.status-pill.is-closed .status-dot { background: var(--closed); }
.status-sep { color: var(--muted); }
.status-today { color: var(--muted); font-weight: 400; }

/* ---------- Sections: coffee veils over the room ---------- */
.section { padding: clamp(4rem, 9vw, 7rem) 0; background: var(--veil); transition: background-color 1.5s ease; }
.section-alt { background: var(--veil-alt); }
main > .container + .section { padding-top: 1rem; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Inner pages: the room shows above the title, then the veil closes */
body:not([data-page="home"]) main {
  background: linear-gradient(180deg, rgba(var(--scrim), var(--head-shade)) 0, rgba(var(--scrim), var(--head-shade-2)) 10rem, var(--veil) 17rem);
}

/* ---------- Hero: the room, lit ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: 7rem 0 clamp(3rem, 9vh, 6rem);
  color: var(--ink);
  /* text sits low: the scrim darkens the lower part, the lamps stay visible above */
  background:
    var(--grain) 0 0 / 180px 180px repeat,
    linear-gradient(180deg, rgba(var(--scrim), 0.2) 0%, rgba(var(--scrim), 0.42) 14%, rgba(var(--scrim), 0.62) 22%, rgba(var(--scrim), 0.78) 29%, rgba(var(--scrim), 0.87) 36%, rgba(var(--scrim), 0.9) 100%);
}
.hero::after {
  /* soft hand-over to the first veiled section */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9rem;
  background: linear-gradient(180deg, transparent, var(--veil));
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--veil) 45%, transparent) 50%, var(--veil) 100%);
  pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; width: 100%; }
.hero-copy { position: relative; max-width: 44rem; }
/* phones: a soft shade that travels with the text, whatever the screen height */
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -4rem calc(-1 * var(--gutter)) -2rem;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--scrim), 0) 0, rgba(var(--scrim), 0.8) 4rem, rgba(var(--scrim), 0.86) 100%);
  pointer-events: none;
}
.hero-copy .eyebrow { margin-bottom: 1.1rem; }
/* tablets: the shade is narrower than the screen, so its right and bottom edges melt away instead of ending sharp */
@media (min-width: 700px) and (max-width: 899px) {
  .hero-copy::before {
    -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%), linear-gradient(180deg, #000 calc(100% - 3rem), transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, #000 62%, transparent 100%), linear-gradient(180deg, #000 calc(100% - 3rem), transparent 100%);
            mask-composite: intersect;
  }
}
.hero-copy .lead { margin: 1.4rem 0 1.5rem; color: var(--ink); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.delivery-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1rem 0 0; }
.delivery-label { color: var(--muted); font-size: 0.92rem; margin-inline-end: 0.2rem; }
@media (min-width: 900px) {
  .hero-copy::before { display: none; }
  .hero {
    align-items: center;
    background:
      var(--grain) 0 0 / 180px 180px repeat,
      linear-gradient(90deg, rgba(var(--scrim), 0.92) 0%, rgba(var(--scrim), 0.86) 42%, rgba(var(--scrim), 0.72) 52%, rgba(var(--scrim), 0.5) 62%, rgba(var(--scrim), 0.26) 73%, rgba(var(--scrim), 0.06) 84%);
  }
}

/* ---------- La maison (about) ---------- */
.about { display: grid; gap: 1.5rem 4rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.about-text { max-width: 40rem; }
.about-text p { color: var(--muted); font-size: 1.08rem; line-height: 1.75; }
.about-text p:first-child { color: var(--ink); font-size: 1.2rem; }
.about-feature {
  margin-top: 2rem;
  padding-block: 0.25rem;
  padding-inline-start: 1.4rem;
  border-inline-start: 2px solid var(--mark);
}
.about-feature h3 { font-size: 1.8rem; margin-bottom: 0.6rem; }
.about-feature p { margin: 0; }
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
}

/* ---------- Formules ---------- */
.formulas-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.formula-card { padding: 1.6rem 1.45rem; display: flex; flex-direction: column; gap: 0.6rem; }
.formula-card-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.formula-card-name { font-size: 1.7rem; }
.formula-card-description { color: var(--muted); font-size: 0.96rem; margin: 0; flex: 1; }
.formula-card-price { font-family: var(--serif); font-weight: 700; font-size: 1.85rem; color: var(--price); }
.formula-card-label { font-weight: 500; color: var(--accent); }

/* ---------- Menu: the category list ---------- */
/* On the home page: intro on the left, the list on the right, the chosen category below */
@media (min-width: 900px) {
  #carte .container:has(> .section-head) {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    column-gap: 4rem;
    align-items: start;
  }
  #carte .container:has(> .section-head) > * { grid-column: 1 / -1; }
  #carte .container:has(> .section-head) > .section-head { grid-column: 1; }
  #carte .container:has(> .section-head) > .menu-tabs { grid-column: 2; grid-row: 1; }
}
.menu-tabs {
  display: flex;
  flex-direction: column;
  margin: 0 0 3rem;
  border-top: 1px dashed var(--line-strong);
}
.menu-tab {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  width: 100%;
  /* same height with or without a thumbnail (3:4 photo + padding), so the list stays even */
  min-height: calc(clamp(52px, 7vw, 84px) * 4 / 3 + 1.8rem);
  padding: 0.9rem 0;
  border: 0;
  border-bottom: 1px dashed var(--line-strong);
  background: none;
  color: var(--dim);
  text-align: start;
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 6vw, 3.7rem);
  line-height: 1;
  letter-spacing: -0.015em;
  transition: color var(--fast);
}
.menu-tab-num {
  align-self: start;
  padding-top: 0.45rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.menu-tab-label { overflow-wrap: anywhere; }
.menu-tab-thumb {
  width: clamp(52px, 7vw, 84px);
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  opacity: 0.5;
  transition: opacity var(--fast);
}
.menu-tab:hover { color: var(--ink); }
.menu-tab[aria-selected="true"] { color: var(--ink); }
.menu-tab[aria-selected="true"] .menu-tab-num { color: var(--accent); }
.menu-tab:hover .menu-tab-thumb, .menu-tab[aria-selected="true"] .menu-tab-thumb { opacity: 1; }
.menu-tab:focus-visible { outline-offset: -2px; }

/* ---------- Menu: the chosen category ---------- */
.menu-panel-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.5vw, 2.8rem); line-height: 1.05; margin: 0 0 0.6rem; }
.menu-panel-note { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.4rem; }
.menu-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.menu-card { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.menu-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-2); }
.menu-card-media img { width: 100%; height: 100%; object-fit: cover; }
.menu-card-media .badge { position: absolute; top: 0.9rem; inset-inline-start: 0.9rem; }
.menu-card-body { padding: 1.2rem 1.3rem 1.35rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.menu-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; }
.menu-card-name { font-size: 1.6rem; line-height: 1.12; }
.menu-card-description { color: var(--muted); font-size: 0.96rem; margin: 0; flex: 1; }
.menu-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.price { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--price); white-space: nowrap; }
.price-sizes { display: inline-flex; gap: 1rem; flex-wrap: wrap; }
.price-size { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--price); white-space: nowrap; }
.price-size .size-label { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; color: var(--muted); margin-inline-end: 0.3rem; }
.price-label { font-weight: 500; color: var(--accent); }
.tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tag {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px;
  background: var(--tag-bg); color: var(--ink);
  font-family: var(--sans); font-size: 0.78rem; font-weight: 500;
}
.menu-list { padding: 0.35rem 0.6rem; }
.menu-row {
  display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; align-items: start;
  padding: 1rem 0.8rem; border-bottom: 1px dashed var(--line); border-radius: var(--radius);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.menu-row:last-child { border-bottom: none; }
/* each line becomes a small plate under the pointer, or for a moment when tapped (js/menu.js adds .is-lit) */
.menu-row .price { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); transform-origin: right center; }
.menu-row.is-lit { background: var(--glow-fill); box-shadow: 0 0 0 1px var(--glow-ring), 0 10px 26px -12px var(--glow-halo); transform: translateY(-2px); border-bottom-color: transparent; }
.menu-row.is-lit .price { transform: scale(1.08); }
@media (hover: hover) {
  .menu-row:hover { background: var(--glow-fill); box-shadow: 0 0 0 1px var(--glow-ring), 0 10px 26px -12px var(--glow-halo); transform: translateY(-2px); border-bottom-color: transparent; }
  .menu-row:hover .price { transform: scale(1.08); }
}
.menu-row.has-thumb { grid-template-columns: 64px 1fr auto; }
.menu-row-thumb { width: 64px; height: 64px; border-radius: var(--radius); object-fit: cover; grid-row: span 2; }
.menu-row-name { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; line-height: 1.2; }
.menu-row-name .tag { vertical-align: middle; margin-inline-start: 0.4rem; }
.menu-row-description { grid-column: 1 / -1; color: var(--muted); font-size: 0.92rem; margin: 0; }
.menu-row.has-thumb .menu-row-description { grid-column: 2 / -1; }
.menu-row .price, .menu-row .price-sizes { align-self: center; }
.menu-extras { margin-top: 1.5rem; padding: 1.1rem 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; }
.menu-extras-title { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin: 0; }
.menu-extras-item { color: var(--muted); font-size: 0.95rem; }
.menu-extras-item strong { color: var(--accent); font-weight: 600; }
.alcohol-notice, .allergen-note { margin-top: 1.5rem; font-size: 0.88rem; color: var(--muted); }
.menu-error { padding: 1.6rem; text-align: center; }
.menu-error a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; grid-auto-flow: dense; }
.gallery-item { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid rgba(201, 140, 66, 0.75); }   /* a thin gold frame, like the table cards */
.gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.03); }
.gallery-item.tall { grid-row: span 2; }
/* two-column galleries ("La maison", contact): a masonry in which every tile takes the shape of its own photo,
   so a photo is never cropped, whatever its format; a photo the owners upload fits by itself */
.gallery.two-up { display: block; columns: 2; column-gap: 0.9rem; }
.gallery.two-up > .gallery-item { break-inside: avoid; margin: 0 0 0.9rem; }
.gallery.two-up > .gallery-item img { height: auto; }
/* one large photo that fills the grid: tall beside the slate on phones, two columns wide from tablets */
.gallery-item.feature { grid-row: span 2; }
/* the room under the "La maison" grid: its own band in the photo's 3:2 format, so it is never cropped or padded */
.gallery-band { margin-top: 0.9rem; aspect-ratio: 1200 / 885; }
/* "La maison" (client layout, 2026-10-21): the charcuterie wide on top, then the photos two by two at equal height */
.gallery.collage { grid-auto-rows: auto; grid-auto-flow: row; }
.gallery.collage > .gallery-item { aspect-ratio: 1 / 1; }
.gallery.collage > .gallery-item:nth-child(n + 4) { aspect-ratio: 4 / 5; }
.gallery.collage > .gallery-item.wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 760px) { .gallery.collage { grid-template-columns: repeat(2, 1fr); } }
.gallery-item figcaption {
  position: absolute; inset-inline-start: 0.8rem; bottom: 0.8rem; max-width: calc(100% - 1.6rem);
  padding: 0.35rem 0.75rem; border-radius: 999px;
  background: rgba(26, 13, 7, 0.82); color: var(--crema); font-size: 0.8rem; font-weight: 500;
}
/* phones: small tiles, so the caption is a slim label that leaves the photo visible */
@media (max-width: 559px) {
  .gallery-item figcaption { inset-inline-start: 0.45rem; bottom: 0.45rem; max-width: calc(100% - 0.9rem); padding: 0.18rem 0.5rem; font-size: 0.68rem; line-height: 1.3; }
}
.gallery .gallery-item[role="button"], .gallery-band[role="button"] { cursor: zoom-in; }
.gallery .gallery-item[role="button"]:focus-visible, .gallery-band[role="button"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* the photo brought forward */
.zoom { position: fixed; inset: 0; max-width: none; max-height: none; width: 100%; height: 100%; -webkit-tap-highlight-color: transparent; margin: 0; padding: 1rem; border: 0; background: transparent; cursor: zoom-out; }
.zoom[open] { display: grid; place-items: center; }
.zoom::backdrop { background: rgba(20, 10, 6, 0.92); }   /* dark in both themes: the photo comes forward out of the dark */
.zoom figure { margin: 0; display: grid; justify-items: center; gap: 0.7rem; }
.zoom img { max-width: min(100%, 1100px); max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); width: auto; height: auto; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 40px -8px var(--glow-halo); }
.zoom figcaption { color: var(--crema); font-family: var(--serif); font-size: 1.2rem; text-align: center; }
.zoom-close { position: fixed; top: 0.8rem; inset-inline-end: 0.8rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(253, 241, 230, 0.4); background: rgba(26, 13, 7, 0.82); color: var(--crema); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.zoom-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .zoom[open] img { animation: zoom-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  @keyframes zoom-in { from { opacity: 0; transform: translateY(16px); } }
}
@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 1.1rem; }
  .gallery.two-up { column-gap: 1.1rem; }
  .gallery.two-up > .gallery-item { margin-bottom: 1.1rem; }
  .gallery-item.feature { grid-row: auto; grid-column: span 2; }
  .gallery-item.feature img { object-position: 50% 78%; }   /* keeps the table card in the wide frame */
  .gallery-band { margin-top: 1.1rem; }
}

/* ---------- Reviews ---------- */
.reviews-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.review-card { padding: 1.75rem; display: flex; flex-direction: column; }
.stars { color: var(--accent); letter-spacing: 0.18em; font-size: 0.95rem; margin: 0; }
.review-text { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.45; margin: 0.9rem 0 1.1rem; flex: 1; }
.review-author { color: var(--muted); font-size: 0.92rem; font-weight: 500; margin: 0; }

/* ---------- Visit ---------- */
.visit-grid { display: grid; gap: 1.25rem; }
/* "Nous trouver": the terrace and the shop front, so the place is easy to recognise from the street */
.visit-gallery { margin-top: 1.25rem; grid-template-columns: 1fr; grid-auto-rows: 260px; }
@media (min-width: 768px) { .visit-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 340px; } }
.visit-card { padding: 1.75rem; }
.visit-block + .visit-block { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dashed var(--line-strong); }
.visit-label { font-size: 1.5rem; margin-bottom: 0.5rem; }
.visit-block p { margin: 0; color: var(--muted); }
.visit-block p strong { color: var(--ink); font-weight: 500; }
.visit-block a.inline {
  display: inline-block; padding: 0.3rem 0;
  color: var(--ink);
  text-decoration: underline 1px var(--accent);
  text-underline-offset: 4px;
}
.visit-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.hours-table th, .hours-table td { padding: 0.5rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 400; text-align: start; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: none; }
.hours-table td:last-child { text-align: end; white-space: nowrap; }
.hours-table tr.today th, .hours-table tr.today td { color: var(--ink); font-weight: 600; }
.hours-table tr.today th { box-shadow: inset 3px 0 var(--mark); padding-inline-start: 0.7rem; }
/* Hours file unreadable: a plain sentence instead of an empty table (wraps, unlike the time column) */
.hours-table td.hours-unavailable { text-align: start; white-space: normal; color: var(--ink); }
.special-hours { list-style: none; margin: 0.9rem 0 0; padding: 0; font-size: 0.95rem; }
.special-hours li { padding: 0.3rem 0; color: var(--accent); }
.map-card { position: relative; overflow: hidden; min-height: 320px; }
.map-link { display: block; height: 100%; }
.map-link img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.map-hint { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); white-space: nowrap; }
.map-caption {
  position: absolute; right: 0.5rem; top: 0.5rem; margin: 0;
  padding: 0.1rem 0.45rem; border-radius: 4px;
  background: rgba(255, 255, 255, 0.88); color: #333; font-size: 0.7rem;
}
@media (min-width: 900px) {
  .visit-grid { grid-template-columns: 0.95fr 1.05fr; align-items: stretch; }
  .map-card { min-height: 100%; }
}

/* ---------- Inner pages ---------- */
.page-head { padding: clamp(3rem, 9vw, 6rem) 0 2rem; }
.page-title { font-size: clamp(2.8rem, 8vw, 5rem); letter-spacing: -0.02em; line-height: 0.98; }
.page-description { color: var(--muted); font-size: 1.12rem; margin: 0.8rem 0 0; max-width: 40rem; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; }
.panel h2 { font-size: 1.6rem; margin: 1.4rem 0 0.4rem; }
.panel h2:first-child { margin-top: 0; }
.panel p { color: var(--muted); }
.panel a { color: var(--ink); text-decoration: underline 1px var(--accent); text-underline-offset: 3px; }
.error-panel { padding: clamp(2rem, 6vw, 4rem) 1.5rem; }
.error-code { font-size: clamp(4rem, 14vw, 8rem); color: var(--accent); line-height: 1; }
.error-title { font-size: 2.2rem; margin-top: 0.5rem; }
.error-message { color: var(--muted); }
.error-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* ---------- Footer ---------- */
.footer {
  color: var(--ink);
  background: var(--bg-2);
  transition: background-color 0.6s ease;
  border-top: 1px dashed var(--line-strong);
  padding: 3.5rem 0 2rem;
}
.footer-grid { display: grid; gap: 1rem; text-align: center; justify-items: center; }
.footer-brand { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); }
.footer-tagline { color: var(--muted); margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 1.4rem; justify-content: center; font-size: 0.95rem; }
.footer-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted);
  text-decoration: underline 1px transparent;
  text-underline-offset: 5px;
}
.footer-link:hover { color: var(--ink); text-decoration-color: var(--accent); }
.footer-copyright { color: var(--muted); font-size: 0.85rem; margin: 0; }
/* Legal notice: a quiet link under the copyright, a short page of plain paragraphs */
.footer-legal { margin: -0.4rem 0 0; font-size: 0.75rem; }
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--ink); text-decoration: underline; }
.legal-short { max-width: 46rem; padding-top: clamp(2.5rem, 7vw, 4.5rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.legal-short .page-title { margin-bottom: 1.2rem; }
.legal-short p { color: var(--muted); margin: 0 0 0.7rem; font-size: 0.85rem; line-height: 1.55; }
.legal-short .legal-contact { color: var(--ink); font-size: 1.1rem; margin-bottom: 1.6rem; padding: 1rem 1.2rem; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); }
.legal-short strong { color: var(--ink); font-weight: 500; }
.legal-short a { color: var(--ink); text-decoration: underline 1px var(--accent); text-underline-offset: 3px; }

/* ---------- Plates: served onto the table (js/reveal.js), glow like embers, lift on hover ---------- */
/* Each plate comes up out of the mist: tilted back, a little small and soft, then it settles
   while a warm ember glow flares around it and fades (2026-10-16, client request). */
@keyframes plate-in {
  0% { opacity: 0; transform: perspective(900px) translateY(26px) rotateX(9deg) scale(0.965); filter: blur(5px); }
  55% { opacity: 1; filter: blur(0); box-shadow: 0 0 0 1px rgba(251, 135, 79, 0.45), 0 22px 48px -18px rgba(220, 86, 52, 0.55); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* hidden only once JavaScript has prepared the plate, so nothing disappears without JS */
.reveal:not(.is-visible) { opacity: 0; }
.reveal.is-visible {
  /* "backwards" fill: hidden during the stagger delay, then normal styles (and hover) take over */
  animation: plate-in 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--reveal-order, 0) * 90ms);
  transform-origin: 50% 100%;
}
@media (hover: hover) {
  .card, .gallery-item {
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  }
  /* long lists (drinks, coffee) stay put: lifting a whole list feels odd */
  .card:not(.menu-list):not(.menu-extras):hover, .gallery-item:hover {
    transform: translateY(-5px);
    border-color: var(--glow-ring);
    box-shadow: 0 20px 40px -22px var(--glow-drop), 0 0 0 1px var(--glow-ring), 0 0 30px -6px var(--glow-halo);
  }
  /* the whole photo comes forward a little, frame and all: nothing moves inside it */
  .gallery-item:hover {
    transform: scale(1.03); z-index: 1;
    border-color: rgba(232, 196, 120, 0.95);
    box-shadow: 0 22px 44px -22px var(--glow-drop), 0 0 0 1px rgba(232, 196, 120, 0.9), 0 0 34px -4px rgba(253, 230, 190, 0.5);
  }
}

/* ---------- Menu: switching category ---------- */
/* the chosen category slides in softly; the selected name steps aside and its photo comes forward */
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.menu-panel:not([hidden]) { animation: panel-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.menu-tab-label { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.menu-tab[aria-selected="true"] .menu-tab-label { transform: translateX(0.45rem); }
.menu-tab-thumb { transition: opacity var(--fast), transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.menu-tab[aria-selected="true"] .menu-tab-thumb { transform: scale(1.06) rotate(-2deg); }

/* ---------- Arabic (/ar/): right to left, system Arabic fonts (2026-10-17) ---------- */
/* Cormorant and Jost have no Arabic letters: Latin words (names, prices) keep them, Arabic falls through
   to the phone's own Arabic font (SF Arabic / Geeza Pro on iPhone, Noto on Android, Segoe UI on Windows). */
html:lang(ar) {
  --serif: "Cormorant Garamond", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
  --sans: "Jost", "SF Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
}
/* Arabic letters join: no letter spacing, no slanted fake italic; a little more size and line height */
:lang(ar) { letter-spacing: normal; font-style: normal; }
html:lang(ar) body { font-size: 1.125rem; line-height: 1.75; }
html:lang(ar) :is(.display, .section-title, .page-title, .menu-tab, .menu-panel-title, .error-title) { line-height: 1.3; }
html:lang(ar) .display { font-size: clamp(2.6rem, 8vw, 5.4rem); }
html:lang(ar) .eyebrow { font-size: 1.15rem; font-weight: 600; }
html:lang(ar) .menu-tab-label { padding-block: 0.15em; }
.lang-link:lang(ar) { font-size: 0.9rem; }
/* mirrored movements and shades */
[dir="rtl"] .menu-row .price { transform-origin: left center; }
[dir="rtl"] .menu-tab[aria-selected="true"] .menu-tab-label { transform: translateX(-0.45rem); }
[dir="rtl"] .menu-tab[aria-selected="true"] .menu-tab-thumb { transform: scale(1.06) rotate(2deg); }
[dir="rtl"] .hours-table tr.today th { box-shadow: inset -3px 0 var(--mark); }
@media (min-width: 900px) {
  /* the text sits on the right: the shade starts from the right */
  [dir="rtl"] .hero {
    background:
      var(--grain) 0 0 / 180px 180px repeat,
      linear-gradient(270deg, rgba(var(--scrim), 0.92) 0%, rgba(var(--scrim), 0.86) 42%, rgba(var(--scrim), 0.72) 52%, rgba(var(--scrim), 0.5) 62%, rgba(var(--scrim), 0.26) 73%, rgba(var(--scrim), 0.06) 84%);
  }
}

/* ---------- Accessibility & motion ---------- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.no-js .menu-tabs { display: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before, body::after, html::before, html::after { animation: none; transform: none; scale: none; translate: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
  body::before, body::after, .hero::after { display: none; }
  .header, .footer, .map-card, .theme-btn, .lang-switcher, .gallery { display: none !important; }
  :root { --ink: #000; --muted: #333; --accent: #000; --veil: #fff; --veil-alt: #fff; --card: #fff; --dim: #555; }
  body, .hero, main { background: #fff !important; color: #000; }
  .card, .panel { border-color: #ccc; }
  .menu-tabs { display: none; }
  .menu-panel[hidden] { display: block !important; }
  .reveal { opacity: 1 !important; animation: none !important; }
}