/* =========================================================
   Délices de Sihean — site styles
   Source of truth: design.md (direction « L'Arche »)
   All colors OKLCH. Hex in comments = source references.
   ========================================================= */

/* ---------- fonts: self-hosted variable WOFF2, latin subset (SIL OFL 1.1; see assets/fonts/OFL-*.txt) ---------- */
@font-face{ font-family:"Playfair Display"; font-style:normal; font-weight:400 500; font-display:swap; src:url("../fonts/playfair-display-var.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face{ font-family:"Playfair Display"; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/playfair-display-italic-var.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face{ font-family:"Literata"; font-style:normal; font-weight:400 500; font-display:swap; src:url("../fonts/literata-var.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face{ font-family:"Literata"; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/literata-italic-var.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face{ font-family:"Jost"; font-style:normal; font-weight:400 500; font-display:swap; src:url("../fonts/jost-var.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }

:root{
  /* palette — design.md §3 */
  --ivoire: oklch(0.943 0.026 90.1);          /* #F3ECD9 */
  --lin: oklch(0.902 0.034 88.1);             /* #E8DEC6 */
  --bordeaux: oklch(0.281 0.044 22.4);        /* #3C201F */
  --bordeaux-raised: oklch(0.333 0.052 23.8); /* #4E2B29 */
  --cacao: oklch(0.415 0.045 29);             /* #62423E — Step 5: deepened from #6E4F49 (7.5:1 on Ivoire) */
  --vin: oklch(0.487 0.157 23.1);             /* #A62D32 */
  --vin-press: oklch(0.42 0.15 23.1);
  --vin-ink: oklch(0.445 0.152 23.5);         /* #962228 — Vin for text: prices, links, badges (7.0:1 on Ivoire, 6.2:1 on Lin) */
  --ivoire-voile: oklch(0.812 0.028 72.7);    /* #CDBFAE */
  --line: oklch(0.281 0.044 22.4 / 0.2);
  --line-on-dark: oklch(0.943 0.026 90.1 / 0.2);

  /* type — design.md §4 */
  --display: "Playfair Display", Georgia, serif;
  --body: "Literata", Georgia, serif;
  --utility: "Jost", system-ui, sans-serif;
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); /* 14–15px: smallest running text */
  --label: 0.8125rem;                          /* 13px: absolute floor for tags and badges */
  --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1: clamp(1.20rem, 1.12rem + 0.40vw, 1.40rem);
  --step-2: clamp(1.44rem, 1.30rem + 0.70vw, 1.75rem);
  --step-3: clamp(1.73rem, 1.50rem + 1.15vw, 2.20rem);
  --step-4: clamp(2.07rem, 1.70rem + 1.85vw, 2.75rem);
  --step-5: clamp(2.49rem, 1.90rem + 2.90vw, 3.45rem);

  /* space & layout — design.md §5 */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;
  --gutter: clamp(1.25rem, 5vw, 1.85rem);
  --content: 72rem;
  --measure: 34em;
  --section: clamp(4rem, 3rem + 4vw, 6rem);
  --header-h: 4.5rem;
  --radius: 4px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (min-width:600px){ :root{ --gutter: clamp(2rem, 5vw, 3rem); } }
@media (min-width:1024px){ :root{ --gutter: clamp(2.5rem, 5.5vw, 4.5rem); } }
@media (min-width:1440px){ :root{ --gutter: clamp(3.5rem, 6.5vw, 6rem); } }

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; background:var(--ivoire); scroll-padding-top:calc(var(--header-h) + 1rem) }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth } }
body{
  margin:0; background:var(--ivoire); color:var(--bordeaux);
  font:400 var(--step-0)/1.65 var(--body);
  overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto }
h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.12; margin:0; text-wrap:balance }
p{ margin:0 0 var(--s4) }
.section-lede, .hero-lede, .about-lede, .traiteur-lede{ text-wrap:pretty } /* only short ledes: pretty is costly on long text */
p:last-child{ margin-bottom:0 }
ul,ol{ margin:0; padding:0; list-style:none }
a{ color:var(--vin-ink); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }
a:hover{ text-decoration-thickness:2px }
:focus-visible{ outline:3px solid var(--vin); outline-offset:3px; border-radius:2px }
.wrap{ width:100%; max-width:calc(var(--content) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding-block:var(--section) }

.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:100;
  background:var(--bordeaux); color:var(--ivoire); padding:.75rem 1rem; border-radius:var(--radius);
  font:500 1rem/1 var(--utility); text-decoration:none;
}
.skip:focus{ top:.75rem }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:0 1.4rem; border-radius:var(--radius);
  font:500 1rem/1.1 var(--utility); text-decoration:none; text-align:center;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-primary{ background:var(--vin); color:var(--ivoire) }
.btn-primary:hover{ background:var(--vin-press) }
.btn-secondary{ background:transparent; color:var(--bordeaux); border-color:var(--bordeaux) }
.btn-secondary:hover{ background:var(--bordeaux); color:var(--ivoire) }
.btn-light{ background:var(--ivoire); color:var(--bordeaux) }
.btn-light:hover{ background:var(--lin) }
.btn-block{ width:100% }
.actions{ display:flex; flex-wrap:wrap; gap:var(--s3) }

.badge{
  display:inline-block; vertical-align:middle;
  font:500 var(--label)/1 var(--utility); color:var(--vin-ink);
  border:1px solid var(--vin-ink); border-radius:2px; padding:.2rem .4rem .25rem;
}
.price{ font-family:var(--utility); font-weight:500; color:var(--vin-ink); font-variant-numeric:tabular-nums; white-space:nowrap }

/* ---------- placeholders (design.md §5, Steps 2–3) ---------- */
.ph{
  margin:0; display:grid; place-content:center; justify-items:center; gap:.35rem;
  padding:var(--s4); text-align:center;
  background:var(--lin); color:var(--cacao);
  border:1px dashed var(--cacao);
  font:400 var(--step--1)/1.35 var(--utility);
}
.ph figcaption{ display:grid; gap:.25rem }
.ph-tag{ font:500 .78rem/1 var(--utility); color:var(--bordeaux); border:1px solid var(--line); padding:.3rem .5rem; border-radius:2px; background:var(--ivoire) }
.ph-title{ font:400 1rem/1.25 var(--display); color:var(--bordeaux) }
.ph-file{ font-size:.78rem; color:var(--cacao) }
.ph-dark{ background:var(--bordeaux-raised); color:var(--ivoire-voile); border-color:oklch(0.943 0.026 90.1 / .4) }
.ph-dark .ph-tag{ background:var(--bordeaux); color:var(--ivoire); border-color:var(--line-on-dark) }
.ph-dark .ph-title{ color:var(--ivoire) }
.ph-dark .ph-file{ color:var(--ivoire-voile) }

/* ---------- signature arch (design.md §6) ---------- */
.arch{
  position:relative; padding:8px; /* 7px gap + 1px inner line, drawn by ::before */
  border-radius:999px 999px 6px 6px;
}
.arch::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid var(--bordeaux); border-radius:inherit;
}
.arch::after{
  content:""; position:absolute; inset:-7px; pointer-events:none;
  border:1px solid var(--vin); border-radius:999px 999px 10px 10px;
}
.arch-clip{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:999px 999px 3px 3px; background:var(--lin) }
.arch-on-dark .arch-clip{ background:var(--bordeaux-raised) }
.arch-clip > .ph-fill, .arch-clip > .arch-img{ position:absolute; inset:0; border-radius:inherit }
.arch-img{ display:block }
.arch-img img{ width:100%; height:100%; object-fit:cover; object-position:50% 50% }
.arch-clip > [data-parallax]{ inset:-48px 0; border:0; will-change:transform }
.arch-on-dark::before{ border-color:oklch(0.943 0.026 90.1 / .7) }
.arch-on-dark::after{ border-color:var(--ivoire-voile) }

/* ================= A. HEADER / NAV ================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250, 246, 240, 0.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(44,24,16,0.06); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:clamp(0.75rem, 2vw, 1.5rem); min-height:var(--header-h) }
.brand{ display:flex; align-items:center; flex:none; margin-right:auto; padding:.25rem 0 }
.brand img{ width:54px; height:auto; display:block; object-fit:contain; }
.header-actions{ display:flex; align-items:center; gap:0.6rem; flex-shrink:0; }
.header-cta{ min-height:40px; padding:0.4rem 1.15rem; font-size:0.875rem; border-radius:999px; white-space:nowrap; }

.nav-toggle{
  display:inline-flex; align-items:center; gap:.5rem; min-height:40px; padding:0 .65rem;
  background:none; border:1px solid var(--line); border-radius:var(--radius); color:var(--bordeaux); font:500 0.9rem/1 var(--utility); cursor:pointer;
  transition:all 0.2s var(--ease);
}
.nav-toggle:hover{ background:var(--lin); border-color:var(--bordeaux); }
.nav-toggle-bars, .nav-toggle-bars::before{
  display:block; width:18px; height:1.5px; background:currentColor; position:relative;
  transition:transform .2s var(--ease);
}
.nav-toggle-bars{ background:transparent; height:8px; border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor }
.nav-toggle-bars::before{ content:none }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{ border-bottom-color:transparent; transform:translateY(3px) }

.nav-links a{
  display:block; color:var(--bordeaux); text-decoration:none;
  font:400 var(--step-1)/1.2 var(--display); padding:.9rem 0; border-bottom:1px solid var(--line);
}
.nav-links a:hover, .nav-links a[aria-current="true"]{ color:var(--vin-ink) }

@media (max-width:640px){
  .header-inner{ gap:0.5rem; }
  .brand img{ width:44px; height:auto; }
  .header-actions{ gap:0.45rem; }
  .header-cta{ min-height:36px; padding:0.35rem 0.8rem; font-size:0.82rem; }
  .lang-switch-btn{ padding:0.25rem 0.55rem; font-size:0.8rem; min-height:36px; }
  .nav-toggle{ min-height:36px; padding:0 0.55rem; }
  .nav-toggle-label{ display:none; }
}
@media (max-width:440px){
  .header-cta{ display:none; }
}

/* mobile panel (outside header, 100% viewport fixed, unaffected by header backdrop) */
.nav-panel{
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:9999;
  background:var(--ivoire); padding:var(--s6) var(--gutter) var(--s8);
  overflow-y:auto; border-top:1px solid var(--line);
  box-shadow:0 16px 40px rgba(44,24,16,0.18);
  visibility:hidden; opacity:0; transform:translateY(-10px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.nav-panel.is-open{ visibility:visible; opacity:1; transform:none; transition-delay:0s }
html.nav-open{ overflow:hidden }

.nav-panel .nav-links{
  display:flex;
  flex-direction:column;
  gap:0;
  list-style:none;
  padding:0;
  margin:0;
}
.nav-panel .nav-links li{
  border-bottom:1px solid var(--line);
}
.nav-panel .nav-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.15rem 0;
  font:500 1.25rem/1.2 var(--display);
  color:var(--bordeaux);
  text-decoration:none;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.nav-panel .nav-links a::after{
  content:"→";
  font-family:var(--body);
  font-size:1.1rem;
  color:var(--or-chaud);
  opacity:0.6;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-panel .nav-links a:hover,
.nav-panel .nav-links a:focus{
  color:var(--vin);
  padding-left:0.35rem;
}
.nav-panel .nav-links a:hover::after,
.nav-panel .nav-links a:focus::after{
  opacity:1;
  transform:translateX(4px);
}

.nav-desktop{ display:none }

@media (min-width:1024px){
  .brand img{ width:64px }
  .nav-desktop{ display:block; order:1; margin-left:var(--s5); margin-right:auto }
  .nav-toggle{ display:none }
  .nav-panel{ display:none !important }
  .nav-links{ display:flex; gap:1.6rem }
  .nav-links a{
    font:400 .98rem/1 var(--utility); padding:.5rem 0; border:0;
    border-bottom:2px solid transparent;
  }
  .nav-links a[aria-current="true"]{ border-bottom-color:var(--vin) }
  .header-actions{ order:2 }
}

/* ================= B. HERO ================= */
.hero{ padding-block:var(--s6) var(--s8); position:relative; }
.hero-grid{ display:grid; gap:var(--s6); justify-items:center; text-align:center }
.hero-text{ max-width:38rem }
.hero-brand{
  display:inline-flex; align-items:center; gap:0.45rem;
  font:600 0.82rem/1 var(--utility);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--vin);
  background:rgba(139,30,30,0.06); border:1px solid rgba(139,30,30,0.2);
  padding:0.4rem 0.95rem; border-radius:999px; margin-bottom:var(--s4);
}
.hero h1{
  font-family:var(--display);
  font-size:clamp(2.1rem, 5.6vw, 3.8rem);
  line-height:1.12; letter-spacing:-0.015em; color:var(--bordeaux);
  margin-bottom:var(--s4);
  max-width:22ch; margin-inline:auto;
}
.hero-lede{
  margin:0 auto var(--s6); max-width:32rem;
  font-size:clamp(0.98rem, 2.1vw, 1.15rem); line-height:1.68; color:var(--cacao);
}
.hero .actions{ display:flex; flex-wrap:wrap; gap:0.75rem; justify-content:center }
.hero .actions .btn-primary{
  border-radius:999px; padding:0.8rem 1.6rem;
  box-shadow:0 4px 18px rgba(139,30,30,0.26);
  transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.hero .actions .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(139,30,30,0.36);
}
.hero .actions .btn-secondary{
  border-radius:999px; padding:0.8rem 1.5rem;
  border:1.5px solid var(--vin); color:var(--vin);
  transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.hero .actions .btn-secondary:hover{
  background:var(--vin); color:#fff;
  transform:translateY(-2px);
}
.hero-visual{
  width:min(72vw, 380px); padding:7px;
  filter:drop-shadow(0 18px 38px rgba(44,24,16,0.18));
}
@media (min-width:900px){
  .hero{ padding-top:var(--s8) }
  .hero-grid{ grid-template-columns:1.15fr .85fr; align-items:center; justify-items:start; text-align:left; gap:var(--s8) }
  .hero-lede{ margin-inline:0 }
  .hero .actions{ justify-content:flex-start }
  .hero-visual{ width:min(100%, 420px); justify-self:end }
}

/* ================= shared section heads ================= */
.section-head{ margin-bottom:var(--s7); max-width:40rem }
.section-head h2{ font-size:var(--step-4) }
.section-head.center{ text-align:center; margin-inline:auto }
.section-lede{ margin-top:var(--s4); color:var(--cacao); max-width:var(--measure) }

/* ================= C. PLAT DU JOUR ================= */
.today-date{ margin:var(--s3) 0 0; font:500 var(--step-1)/1.2 var(--utility); color:var(--bordeaux) }
.menu-note{
  margin:var(--s5) auto 0; max-width:var(--measure);
  font-size:var(--step--1); line-height:1.55; color:var(--cacao);
}
.menu-note[hidden]{ display:none }
.menu-note .badge{ margin-right:.15rem }
.menu-note strong{ color:var(--vin-ink); font-weight:500 }

.dish-featured{
  display:grid; gap:var(--s6); max-width:62rem; margin-inline:auto;
  background:var(--ivoire); border:1px solid var(--line); border-radius:8px;
  padding:var(--s6) var(--s5) var(--s7);
  box-shadow:0 18px 48px -20px oklch(0.281 0.044 22.4 / 0.16);
}
.dish-visual{ width:min(80%, 320px); justify-self:center; padding:7px }
.arch-dish::after{ border-color:var(--vin) }
.dish-kicker{ font:500 var(--label)/1 var(--utility); letter-spacing:.08em; text-transform:uppercase; color:var(--bordeaux); display:flex; align-items:center; gap:.5rem; margin-bottom:var(--s2) }
.dish-name{ font-size:var(--step-4); line-height:1.15; color:var(--bordeaux); margin-bottom:var(--s2) }
.dish-desc{ margin-top:var(--s2); color:var(--cacao); font-size:var(--step-0); line-height:1.45 }

/* Modern Headline: Hero Price + Meta Pills (Cutoff countdown & availability) */
.dish-headline{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s3) var(--s4); margin:var(--s4) 0 var(--s5);
  padding:var(--s3) var(--s4); background:var(--lin); border-radius:6px;
  border:1px solid var(--line);
}
.dish-price-block{ margin:0; display:flex; align-items:baseline; gap:0.5rem }
.dish-price-lbl{ font:500 var(--label)/1 var(--utility); text-transform:uppercase; letter-spacing:0.06em; color:var(--cacao) }
.dish-price{ font:600 var(--step-3)/1 var(--utility); color:var(--bordeaux); font-variant-numeric:tabular-nums }
.dish-meta{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem }
.meta-pill{
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.35rem 0.85rem; border-radius:999px;
  background:var(--ivoire); border:1px solid var(--line);
  font:500 var(--step--1)/1.2 var(--utility); color:var(--vin-ink);
}
.meta-pill-cutoff{
  background:oklch(0.97 0.015 85);
  border-color:rgba(139,30,30,0.25);
  color:var(--bordeaux);
}
.meta-ico{ flex:none; stroke:currentColor; stroke-width:2; fill:none }

.dish-facts{ display:none }

.options{ border:0; padding:0; margin:0 0 var(--s5); display:flex; flex-wrap:wrap; gap:.5rem }
.options legend{ font:500 var(--step--1)/1.3 var(--utility); color:var(--cacao); margin-bottom:.5rem; padding:0; width:100% }
.chip{ position:relative; display:inline-flex; cursor:pointer }
.chip input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
.chip span{
  display:inline-flex; align-items:center; min-height:42px; padding:0 1.25rem;
  border:1px solid var(--line); border-radius:999px;
  font:500 .92rem/1 var(--utility); color:var(--bordeaux); background:var(--lin);
  transition:all .2s var(--ease);
}
.chip:hover span{ background:var(--ivoire); border-color:var(--bordeaux) }
.chip input:checked + span{
  background:var(--bordeaux); color:var(--ivoire); border-color:var(--bordeaux);
  box-shadow:0 3px 12px rgba(60,32,31,0.22);
}
.chip input:focus-visible + span{ outline:3px solid var(--vin); outline-offset:3px }

.qty-row{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; gap:var(--s4); margin-bottom:var(--s5) }
.qty-label{ display:block; font:500 var(--step--1)/1.3 var(--utility); color:var(--cacao); margin-bottom:.5rem }
.qty-control{ display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:999px; background:var(--lin); overflow:hidden }
.qty-btn{
  width:44px; min-height:44px; border:0; background:none; color:var(--bordeaux); cursor:pointer;
  font:400 1.3rem/1 var(--utility); transition:background-color .15s var(--ease);
}
.qty-btn:hover{ background:var(--ivoire) }
.qty-btn:disabled{ color:oklch(0.459 0.043 31.1 / .45); cursor:not-allowed; background:none }
.qty-control input{
  width:3rem; border:0; border-inline:1px solid var(--line); background:var(--ivoire); text-align:center;
  font:600 1.05rem/1 var(--utility); color:var(--bordeaux); font-variant-numeric:tabular-nums;
  -moz-appearance:textfield; appearance:textfield;
}
.qty-control input::-webkit-outer-spin-button, .qty-control input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.subtotal{ margin:0; text-align:right; font:400 var(--step--1)/1.3 var(--utility); color:var(--cacao) }
.subtotal strong{ display:block; font:600 var(--step-2)/1.2 var(--utility); color:var(--bordeaux); font-variant-numeric:tabular-nums; margin-top:.2rem; text-align:right }
.form-status{ margin:var(--s3) 0 0; font:500 var(--step--1)/1.45 var(--utility); color:var(--vin-ink); min-height:1.45em }
.form-status:empty{ min-height:0; margin:0 }

@media (min-width:900px){
  .dish-featured{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:var(--s8); padding:var(--s7) var(--s7) var(--s7) var(--s8) }
  .dish-visual{ width:100%; max-width:320px }
}

.dish-compact{
  max-width:60rem; margin:var(--s5) auto 0;
  display:grid; grid-template-columns:64px 1fr; gap:var(--s4); align-items:start;
  padding:var(--s5) 0; border-bottom:1px solid var(--line);
}
.ph-square{ width:64px; aspect-ratio:1; padding:.25rem }
.ph-square .ph-tag{ font-size:.65rem; padding:.2rem .3rem }
.dish-name-sm{ font-size:var(--step-1) }
.dish-compact .dish-desc{ margin:.25rem 0 0; font-size:var(--step--1) }
.dish-compact-side{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap }
.dish-compact-side .price{ margin:0; font-size:var(--step-1) }
.dish-compact-side .form-status{ flex-basis:100% }
@media (min-width:600px){
  .dish-compact{ grid-template-columns:88px 1fr auto; align-items:center; padding-inline:var(--s5) }
  .ph-square{ width:88px }
  .dish-compact-side{ grid-column:auto; flex-direction:column; align-items:flex-end; gap:var(--s3) }
  .dish-compact-side .form-status{ text-align:right; max-width:16rem }
}

/* ================= D. SEMAINE ================= */
.week{ background:var(--lin) }
.week-list{ border-top:1px solid var(--line) }
.day{
  display:grid; gap:var(--s2) var(--s5); padding:var(--s4) var(--s4);
  border-bottom:1px solid var(--line); border-left:3px solid transparent;
}
.day-label{ margin:0; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap }
.day-name{ font:400 var(--step-1)/1.2 var(--display) }
.day-date{ font:400 var(--step--1)/1 var(--utility); color:var(--cacao); font-variant-numeric:tabular-nums }
.today-tag{ font:500 var(--label)/1 var(--utility); color:var(--ivoire); background:var(--vin); padding:.25rem .45rem; border-radius:2px }
.day-empty{ margin:0; font-style:italic; color:var(--cacao); align-self:center }
.day.is-today{ background:var(--ivoire); border-left-color:var(--vin) }
.day[hidden]{ display:none }
.day-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2) var(--s4); flex-wrap:wrap }
.day-badge[hidden], .tab-badge[hidden]{ display:none }
.week-note{ margin-top:var(--s5); font:400 var(--step--1)/1.5 var(--utility); color:var(--cacao) }

/* --- day planner: Lun–Sam tab strip (site.js adds .is-tabbed; without it every day is listed) ---
   Badge tone comes from site.js as data-tone="today | open | soon | past" on .tab-badge / .day-badge.
   The text always carries the meaning; tone only reinforces it (design.md §13). */
.week-day-tabs{ display:none }
.week-planner.is-tabbed .week-day-tabs{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(4.75rem, 1fr); gap:var(--s2);
  margin:0 calc(-1 * var(--gutter)) var(--s4); padding:var(--s1) var(--gutter) var(--s2);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter); scrollbar-width:none;
}
.week-planner.is-tabbed .week-day-tabs::-webkit-scrollbar{ display:none }
.week-day-tab{
  position:relative; display:grid; justify-items:center; align-content:center; gap:.25rem;
  min-height:84px; padding:.75rem .5rem .8rem; scroll-snap-align:start;
  background:var(--lin); color:var(--bordeaux); cursor:pointer;
  border:1px solid var(--line); border-radius:8px;
  font:inherit; text-align:center; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:all .2s var(--ease);
}
.week-day-tab:hover{ background:var(--ivoire); border-color:var(--bordeaux); transform:translateY(-2px) }
.week-day-tab[aria-selected="true"]{
  background:var(--bordeaux); border-color:var(--bordeaux); color:var(--ivoire);
  box-shadow:0 8px 24px rgba(60,32,31,0.22);
}
.tab-day{ font:600 .85rem/1 var(--utility); letter-spacing:.06em; text-transform:uppercase; color:var(--cacao) }
.tab-date{ display:flex; flex-direction:column; align-items:center; margin:.15rem 0 }
.tab-num{ font:600 1.35rem/1 var(--utility); color:var(--bordeaux); font-variant-numeric:tabular-nums }
.tab-mon{ font:500 .7rem/1 var(--utility); text-transform:uppercase; letter-spacing:.05em; color:var(--cacao) }
.week-day-tab[aria-selected="true"] .tab-day,
.week-day-tab[aria-selected="true"] .tab-num,
.week-day-tab[aria-selected="true"] .tab-mon{ color:var(--ivoire) }

.tab-badge, .day-badge{
  display:inline-block; white-space:nowrap;
  font:600 var(--label)/1 var(--utility); color:var(--cacao);
  border:1px solid var(--line); border-radius:999px; padding:.25rem .55rem;
  letter-spacing:.04em;
}
.week-day-tab[aria-selected="true"] .tab-badge{
  background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.3); color:var(--ivoire);
}
.tab-badge[data-tone="today"], .day-badge[data-tone="today"]{ background:var(--vin); border-color:var(--vin); color:var(--ivoire) }
.tab-badge[data-tone="open"], .day-badge[data-tone="open"]{ border-color:var(--vin-ink); color:var(--vin-ink) }
.tab-badge[data-tone="past"], .day-badge[data-tone="past"]{ border-color:transparent; padding-inline:0 }
.week-day-tab:has(.tab-badge[data-tone="past"]) .tab-day{ color:var(--cacao) }
@media (min-width:600px){
  .week-planner.is-tabbed .week-day-tabs{
    grid-auto-flow:row; grid-template-columns:repeat(6, minmax(0,1fr)); gap:var(--s3);
    margin-inline:0; padding-inline:0; overflow:visible;
  }
}
/* tabbed: one day at a time, set on an Ivoire page like the today row */
.week-planner.is-tabbed .week-list{ border-top:0 }
.week-planner.is-tabbed .day{
  gap:var(--s5); padding:var(--s5) var(--s4) var(--s6);
  background:var(--ivoire); border:1px solid var(--line); border-radius:var(--radius);
}
.week-planner.is-tabbed .day.is-today{ border-left:3px solid var(--vin) }

/* --- dishes of one day: a balanced grid; cards never shrink below 17rem --- */
.day-dishes-grid{
  display:grid; gap:var(--s4);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.day-dishes-grid:empty{ display:none }
.day-dishes-grid:not(:empty) ~ .day-empty{ display:none }
@media (min-width:900px){ .day-dishes-grid{ gap:var(--s5) } }

.day-dish{
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background:var(--ivoire); border:1px solid var(--line); border-radius:var(--radius);
}
.week-planner.is-tabbed .day-dish{ background:var(--lin); border-color:transparent }
.day-dish-media{ position:relative; aspect-ratio:4/3; background:var(--lin); overflow:hidden }
.day-dish-media > .ph-thumb,
.day-dish-media > .dish-thumb,
.day-dish-media picture{ position:absolute; inset:0; width:100%; height:100%; padding:0 }
.day-dish-media > .ph-thumb{ border:0; border-bottom:1px dashed var(--cacao) }
.day-dish-media img{ width:100%; height:100%; aspect-ratio:auto; object-fit:cover; border-radius:0 }
.day-dish-body{ flex:1; display:flex; flex-direction:column; gap:var(--s2); padding:var(--s4) var(--s4) var(--s5) }
.day-dish-name{ margin:0; font:400 var(--step-1)/1.25 var(--display); color:var(--bordeaux); text-wrap:balance; overflow-wrap:anywhere }
.day-dish-meta{ margin:0; font-size:var(--step--1); line-height:1.5; color:var(--cacao) }
.day-dish-meta:empty{ display:none }
.day-dish-prices{ margin:var(--s2) 0 0; border-top:1px solid var(--line) }
.day-dish-prices > div{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); padding:.55rem 0; border-bottom:1px solid var(--line) }
.day-dish-prices dt{ min-width:0; font:400 var(--step--1)/1.3 var(--utility); color:var(--cacao) }
.day-dish-prices dd{ margin:0; flex:none; font:500 var(--step-1)/1.1 var(--utility); color:var(--vin-ink); font-variant-numeric:tabular-nums; white-space:nowrap }
.day-dish-action{ margin-top:auto; padding-top:var(--s4); display:grid; gap:var(--s2) } /* pins the button to the card foot so a row of cards lines up */
.day-dish-action .btn-order{ white-space:normal }
.day-dish-action .btn-order[hidden]{ display:none }
.day-status{ margin:0; font:400 var(--step--1)/1.4 var(--utility); color:var(--cacao) }
.day-status:empty{ display:none }

/* a day with a single dish: set it as one wide card, photo beside the text */
@media (min-width:600px){
  .day-dishes-grid:has(> .day-dish:only-child){ grid-template-columns:minmax(0, 46rem) }
  .day-dish:only-child{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) }
  .day-dish:only-child .day-dish-media{ aspect-ratio:auto; min-height:15rem }
  .day-dish:only-child .day-dish-body{ padding:var(--s5) var(--s5) var(--s5) }
}
@media (min-width:768px){
  .week-planner:not(.is-tabbed) .day{ padding:var(--s5) }
  .week-planner.is-tabbed .day{ padding:var(--s6) var(--s6) var(--s7) }
}

/* ================= E. TRAITEUR ================= */
.traiteur{ background:var(--bordeaux); color:var(--ivoire) }
.traiteur ::selection{ background:var(--ivoire); color:var(--bordeaux) }
.traiteur :focus-visible{ outline-color:var(--ivoire) }
.traiteur-grid{ display:grid; gap:var(--s8) }
.traiteur-visual{ width:min(78vw, 400px); justify-self:center; padding:7px }
.traiteur-logo{ width:84px; margin-bottom:var(--s5) }
.traiteur h2{ font-size:var(--step-4) }
.traiteur-lede{ font-size:var(--step-1); line-height:1.5; margin:var(--s5) 0 var(--s4) }
.traiteur-text > p{ color:var(--ivoire-voile); max-width:var(--measure) }
.traiteur-text > .traiteur-lede{ color:var(--ivoire) }
.occasions-title{ font:500 1rem/1.3 var(--utility); margin:var(--s7) 0 var(--s3); color:var(--ivoire-voile) }
.occasions{ border-top:1px solid var(--line-on-dark) }
.occasions li{ display:grid; gap:.2rem; padding:var(--s4) 0; border-bottom:1px solid var(--line-on-dark) }
.occasions span{ font:400 var(--step-2)/1.2 var(--display) }
.occasions small{ font-size:var(--step--1); color:var(--ivoire-voile) }
.traiteur-note{ font:400 var(--step--1)/1.4 var(--utility); margin:var(--s3) 0 var(--s6) }
@media (min-width:900px){
  .traiteur-grid{ grid-template-columns:.9fr 1.1fr; align-items:center }
  .traiteur-visual{ width:100%; max-width:420px; justify-self:start }
  .occasions li{ grid-template-columns:1fr 1fr; align-items:baseline; gap:var(--s5) }
}

/* ================= F. GALERIE ================= */
.gallery{ border-top:1px solid var(--line); padding-block:var(--section) }

/* Category filter pill bar */
.gallery-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--s2) var(--s3);
  margin-bottom:var(--s6);
}
.gallery-filter-pill{
  background:var(--lin);
  border:1px solid var(--line);
  color:var(--bordeaux);
  font:500 0.88rem/1 var(--utility);
  padding:0.6rem 1.25rem;
  border-radius:999px;
  cursor:pointer;
  touch-action:manipulation;
  transition:all 0.22s var(--ease);
}
.gallery-filter-pill:hover{
  background:var(--ivoire);
  border-color:var(--bordeaux);
  transform:translateY(-1px);
}
.gallery-filter-pill:focus-visible{
  outline:3px solid var(--vin);
  outline-offset:3px;
}
.gallery-filter-pill[aria-pressed="true"]{
  background:var(--bordeaux);
  color:var(--ivoire);
  border-color:var(--bordeaux);
  box-shadow:0 4px 14px rgba(60,32,31,0.22);
}

/* Luxurious editorial gallery layout designed by Claude Code */
.gallery-grid{
  display:grid;
  gap:var(--s3);
  grid-template-columns:1fr;
  transition:opacity 0.18s var(--ease);
}
.gallery-grid.is-switching{
  opacity:0;
}
@media (min-width:640px){
  .gallery-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s4);
  }
}
@media (min-width:1024px){
  .gallery-grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
    grid-auto-flow:dense;
    gap:var(--s4);
  }
  .g--lead{
    grid-column:span 4;
    grid-row:span 2;
  }
  .g--lead.g--flip{
    grid-column:3 / span 4;
  }
  .g--small{
    grid-column:span 2;
    grid-row:span 1;
  }
  .g--pair{
    grid-column:span 3;
    grid-row:span 1;
  }
}

.g{
  min-width:0;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--lin);
  box-shadow:0 4px 16px rgba(44,24,16,0.04);
  transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.g:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(44,24,16,0.09);
  border-color:rgba(139,30,30,0.25);
}
.g[hidden]{ display:none !important }
.g.is-entering{
  animation:gal-fade .35s var(--ease) both;
}
@keyframes gal-fade{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.g-open{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  padding:0;
  border:0;
  background:var(--lin);
  cursor:zoom-in;
  overflow:hidden;
  text-align:left;
}
@media (min-width:1024px){
  .g-open{ aspect-ratio:unset; height:100%; }
  .g--lead .g-open{ min-height:480px; }
  .g--small .g-open{ min-height:228px; }
  .g--pair .g-open{ min-height:280px; }
}
.g-open picture{ display:block; width:100%; height:100%; }
.g-open img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
html.motion .g-open:hover img,
html.motion .g-open:focus-visible img{
  transform:scale(1.06);
}

/* Editorial caption card overlay */
.g-info{
  position:absolute;
  inset:auto 0 0 0;
  padding:var(--s5) var(--s4) var(--s3);
  background:linear-gradient(to top, rgba(44,24,16,0.88) 0%, rgba(44,24,16,0.45) 60%, transparent 100%);
  color:var(--ivoire);
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  pointer-events:none;
  transform:translateY(4px);
  opacity:0.92;
  transition:all 0.25s var(--ease);
}
.g-open:hover .g-info,
.g-open:focus-visible .g-info{
  transform:translateY(0);
  opacity:1;
}
.g-tag{
  font:600 0.72rem/1 var(--utility);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#f3ecd9;
  opacity:0.85;
}
.g-title{
  font:500 1.05rem/1.25 var(--display);
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.3);
}

/* ================= G. À PROPOS ================= */
.about-grid{ display:grid; gap:var(--s7) }
.about h2{ font-size:var(--step-4) }
.about-lede{ font:400 var(--step-2)/1.35 var(--display); margin:var(--s5) 0; max-width:24ch }
.about-text > p:not(.about-lede){ color:var(--cacao); max-width:var(--measure) }
/* « Une cuisine, deux tables » as a diptych: daily plate | reception platter.
   Two 4:5 panels, the second dropped half a step so they read as a spread,
   not a grid of cards. Hairline + a single low warm shadow, 4px radius (§5). */
.about-diptych{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); align-items:start }
.about-panel{ margin:0; display:grid; gap:var(--s3) }
.about-panel picture{
  display:block; background:var(--lin); overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 14px 30px -22px oklch(0.281 0.044 22.4 / 0.4);
}
.about-panel img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover }
.about-panel--daily img{ object-position:50% 50% }
.about-panel--event img{ object-position:42% 55% }
.about-panel--event{ margin-top:var(--s6) }
.about-panel figcaption{
  display:flex; align-items:baseline; gap:var(--s2);
  font:500 var(--label)/1.35 var(--utility); letter-spacing:.08em; text-transform:uppercase;
  color:var(--cacao); text-wrap:balance;
}
.about-panel figcaption::before{
  content:""; flex:none; width:1.25rem; height:1px; background:var(--vin-ink);
  transform:translateY(-.3em);
}
@media (min-width:640px){
  .about-diptych{ gap:var(--s4); max-width:600px }
  .about-panel--event{ margin-top:var(--s7) }
}
@media (min-width:900px){
  .about-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--s8) }
  .about-diptych{ justify-self:end; width:100%; max-width:560px }
}

/* ================= H. NOUS JOINDRE — « finale » =================
   The back cover of the menu card: contact and footer form one burgundy
   closing section. Signature: the arch draws itself around a real catering
   photo (.arch-draw, design.md §7). Actions are menu-card rows, not cards. */
.finale{
  background:var(--bordeaux); color:var(--ivoire); border-top:0;
  padding-block:clamp(4.5rem, 3rem + 5vw, 7.5rem);
}
.finale ::selection{ background:var(--ivoire); color:var(--bordeaux) }
.finale-grid{ display:grid; gap:clamp(3rem, 2rem + 4vw, 5rem); align-items:center }
@media (min-width:960px){
  .finale-grid{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(3rem, 6vw, 6.5rem) }
}
.finale .finale-eyebrow{ color:var(--ivoire-voile) } /* beats the generic .eyebrow colour defined later */
.finale-title{
  margin:0; max-width:13ch;
  font:400 clamp(2.5rem, 1.55rem + 3.9vw, 4.4rem)/1.02 var(--display);
  letter-spacing:-.018em; color:var(--ivoire); text-wrap:balance;
}
.finale-lede{
  margin:var(--s5) 0 var(--s7); max-width:40ch;
  font:400 clamp(1.05rem, 1rem + .25vw, 1.2rem)/1.6 var(--body); color:var(--ivoire-voile);
}

.finale-actions{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-on-dark) }
.finale-actions li{ border-bottom:1px solid var(--line-on-dark) }
.finale-action{
  position:relative; display:grid; grid-template-columns:2.75rem minmax(0,1fr) auto; align-items:center;
  gap:var(--s4); width:100%; padding:1.15rem .75rem; margin:0;
  background:transparent; border:0; border-radius:4px; color:inherit; font:inherit; text-align:left;
  text-decoration:none; cursor:pointer;
  transition:background-color .25s var(--ease);
}
.finale-action:hover{ background:oklch(0.333 0.052 23.8 / .7) }
.finale-action:focus-visible{ outline:3px solid var(--ivoire); outline-offset:2px }
.finale-icon{
  display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:50%;
  border:1px solid oklch(0.943 0.026 90.1 / .35); color:var(--ivoire);
}
.finale-icon-wa{ background:oklch(0.76 0.17 150); border-color:transparent; color:var(--bordeaux) } /* WhatsApp green, icon only */
.finale-action-text{ display:grid; gap:.3rem; min-width:0; transition:transform .25s var(--ease) }
.finale-action:hover .finale-action-text{ transform:translateX(3px) }
.finale-action-label{ font:500 .9rem/1.3 var(--utility); color:var(--ivoire-voile) }
.finale-action-main{ font:400 clamp(1.3rem, 1.1rem + .8vw, 1.7rem)/1.15 var(--display); color:var(--ivoire); overflow-wrap:anywhere }
.finale-num{ font-family:var(--utility); font-weight:500; font-size:clamp(1.25rem, 1.05rem + .9vw, 1.75rem); font-variant-numeric:tabular-nums; letter-spacing:.01em }
.finale-go{
  display:inline-flex; align-items:center; gap:.4rem; min-height:40px; padding:0 .95rem;
  border:1px solid oklch(0.943 0.026 90.1 / .4); border-radius:999px;
  font:500 .9rem/1 var(--utility); color:var(--ivoire); white-space:nowrap;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.finale-action:hover .finale-go, .finale-action:focus-visible .finale-go{ background:var(--ivoire); color:var(--bordeaux); border-color:var(--ivoire) }
@media (max-width:519px){
  .finale-action{ grid-template-columns:2.5rem minmax(0,1fr) auto; gap:.85rem; padding-inline:.25rem }
  .finale-icon{ width:2.5rem; height:2.5rem }
  .finale-go{ width:40px; padding:0; justify-content:center }
  .finale-go > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
}

.finale-facts{
  list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 2rem; margin:var(--s6) 0 0; padding:0;
  font:500 .95rem/1.3 var(--utility); color:var(--ivoire-voile);
}
.finale-facts li{ display:inline-flex; align-items:center; gap:.55rem }
.finale-facts svg{ color:var(--ivoire); flex:none }

.finale-visual{ margin:0; justify-self:center; width:min(64vw, 360px); padding:8px }
@media (min-width:960px){ .finale-visual{ justify-self:end; width:100%; max-width:400px } }
.finale-caption{ margin:var(--s5) 0 0; text-align:center; font:italic 400 var(--step--1)/1.45 var(--display); color:var(--ivoire-voile) }

/* Floating WhatsApp Quick Action Button (Pure circle icon button, non-intrusive) */
.floating-wa-btn{
  position:fixed;
  bottom:clamp(1.2rem, 3.5vw, 2.2rem);
  right:clamp(1.2rem, 3.5vw, 2.2rem);
  z-index:90;
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25D366;
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:0 6px 20px rgba(37,211,102,0.4), 0 2px 6px rgba(0,0,0,0.12);
  transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
  cursor:pointer;
}
.floating-wa-btn:hover{
  background:#20ba5a;
  transform:translateY(-2px) scale(1.08);
  box-shadow:0 10px 28px rgba(37,211,102,0.52), 0 4px 10px rgba(0,0,0,0.15);
}
.floating-wa-btn svg{
  width:28px;
  height:28px;
  fill:currentColor;
}

/* ================= I. FOOTER — continues the finale ================= */
.site-footer{
  background:oklch(0.237 0.037 22.9); /* #2E1716, one step deeper than the contact band */
  color:var(--ivoire-voile); padding-top:clamp(3.5rem, 2.5rem + 3vw, 5rem); border-top:0;
}
.site-footer :focus-visible{ outline-color:var(--ivoire) }
.footer-top{ display:grid; gap:var(--s7) }
@media (min-width:860px){ .footer-top{ grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); align-items:start } }
.footer-brand img{ width:96px; height:auto }
.site-footer .footer-tagline{ margin:var(--s4) 0 0; max-width:18ch; font:italic 400 1.2rem/1.4 var(--display); color:var(--ivoire) }
.footer-nav{ display:grid; gap:var(--s6) var(--s5); grid-template-columns:repeat(2, minmax(0,1fr)) }
.footer-nav .footer-col:last-child{ grid-column:1 / -1 }
@media (min-width:640px){
  .footer-nav{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .footer-nav .footer-col:last-child{ grid-column:auto }
}
.site-footer .footer-title{ margin:0 0 var(--s3); font:500 .875rem/1.3 var(--utility); letter-spacing:.02em; color:var(--ivoire-voile) }
.site-footer .footer-links{ list-style:none; display:grid; gap:.1rem; margin:0; padding:0 }
.site-footer .footer-links a{
  display:inline-block; min-height:24px; padding:.4rem 0; color:var(--ivoire); text-decoration:none;
  font:400 1rem/1.35 var(--body); text-underline-offset:.25em;
}
.site-footer .footer-links a:hover{ text-decoration:underline; text-decoration-thickness:1px }
.footer-plain{ margin:0; padding:.4rem 0; font:400 1rem/1.35 var(--body); color:var(--ivoire-voile) }
.footer-social{ list-style:none; display:flex; flex-wrap:wrap; gap:.75rem; margin:.2rem 0 var(--s3); padding:0 }
.footer-social-btn{
  display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  border:1px solid oklch(0.943 0.026 90.1 / .4); color:var(--ivoire); text-decoration:none;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.footer-social-btn:hover{ background:var(--ivoire); color:var(--bordeaux); border-color:var(--ivoire); transform:translateY(-2px) }
.footer-social-wa:hover{ background:oklch(0.76 0.17 150); border-color:oklch(0.76 0.17 150); color:var(--bordeaux) } /* WhatsApp green, on hover only */
.footer-social-btn:focus-visible{ outline:3px solid var(--ivoire); outline-offset:3px }
@media (prefers-reduced-motion: reduce){ .footer-social-btn{ transition:none } .footer-social-btn:hover{ transform:none } }
.site-footer .footer-base{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--s3) var(--s5);
  position:relative; margin-top:clamp(3rem, 2rem + 3vw, 4.5rem); padding-block:var(--s5);
  font:400 .875rem/1.45 var(--utility); color:var(--ivoire-voile);
}
.site-footer .footer-base::before{ content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter); border-top:1px solid var(--line-on-dark) } /* divider aligned with the content, not the gutters */
.site-footer .footer-base p{ margin:0 }
.back-to-top{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:0 1rem;
  border:1px solid oklch(0.943 0.026 90.1 / .4); border-radius:999px; background:transparent;
  color:var(--ivoire); text-decoration:none !important; font:500 .9rem/1 var(--utility); cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.back-to-top:hover{ background:var(--ivoire); color:var(--bordeaux) !important; border-color:var(--ivoire) }

/* floating WhatsApp steps aside while the finale (which has its own WhatsApp row) is on screen */
.floating-wa-btn.is-tucked{ opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; visibility:hidden;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s }
.floating-wa-btn{ transition:opacity .25s var(--ease), transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s ease, background-color .25s ease, visibility 0s }

@media (prefers-reduced-motion: reduce){
  .finale-action, .finale-action-text, .finale-go, .back-to-top, .floating-wa-btn{ transition:none !important }
  .finale-action:hover .finale-action-text{ transform:none }
}

/* ================= STEP 3 COPY SUPPORT ================= */
/* eyebrow: sentence case, quiet utility type, never all caps (design.md §4) */
.eyebrow{ margin:0 0 var(--s3); font:500 var(--step--1)/1.3 var(--utility); letter-spacing:.02em; color:var(--cacao) }
.traiteur .eyebrow{ color:var(--ivoire-voile); margin-bottom:var(--s3) }
.today-lede{ margin-inline:auto; margin-top:var(--s3) }
.qty-hint{ margin:.4rem 0 0; font:400 var(--label)/1.3 var(--utility); color:var(--cacao) }
.footer-tagline{ margin:var(--s4) 0 0; font:italic 400 var(--step--1)/1.45 var(--display); color:var(--cacao); max-width:20ch }
.footer-title-next{ margin-top:var(--s5) }

/* Without JavaScript neither the order form nor a live menu can work (design.md §12),
   so they are hidden and the noscript message below replaces them. */
html:not(.js) .order-form,
html:not(.js) [data-order],
html:not(.js) .today-dishes,
html:not(.js) .today-state[data-when="loading"],
html:not(.js) .week-list{ display:none }
.menu-noscript{ display:block }

/* today's-meal states (design.md §12). `data-state` is written by site.js from the
   database answer: loading / published / soon / closed / unavailable / empty / error */
.today-state, .dish-state, .dish-state-inline{ display:none }
.state-title{ font:400 var(--step-2)/1.25 var(--display); color:var(--bordeaux); margin-bottom:var(--s3) }
.today-state{ max-width:40rem; margin-inline:auto; padding:var(--s7) var(--s5); background:var(--lin); border-radius:8px; text-align:center }
.today-state p:not(.state-title){ color:var(--cacao); margin-bottom:var(--s5) }
.today-state > p:last-child{ margin-bottom:0 }

/* Dedicated luxury styling for the empty/in-prep state */
.today-announce{
  max-width:38rem; margin-inline:auto; padding:var(--s7) var(--s6);
  background:var(--ivoire); border:1px solid var(--line); border-radius:8px;
  text-align:center; box-shadow:0 16px 40px -20px oklch(0.281 0.044 22.4 / 0.16);
}
.announce-logo{ margin:0 auto var(--s4); display:block; filter:drop-shadow(0 4px 12px rgba(44,24,16,0.08)) }
.announce-eyebrow{
  font:600 var(--label)/1 var(--utility); letter-spacing:.12em; text-transform:uppercase;
  color:var(--bordeaux); margin-bottom:var(--s3); opacity:0.85;
}
.today-announce .state-title{ font:400 var(--step-3)/1.2 var(--display); color:var(--bordeaux); margin-bottom:var(--s3) }
.today-announce p:not(.state-title):not(.announce-eyebrow){ color:var(--cacao); margin-bottom:var(--s5); max-width:36ch; margin-inline:auto; font-size:var(--step-0); line-height:1.5 }
.today-announce .btn{ margin-top:var(--s2) }
.dish-state{ padding-top:var(--s4); border-top:1px solid var(--line) }
.dish-state p:not(.state-title){ color:var(--cacao) }
.dish-state-inline{ margin:0; font:500 var(--label)/1.3 var(--utility); color:var(--cacao) }
.today-dishes{ display:grid; gap:var(--s6) }
.dish-availability{ margin:.15rem 0 0; font:400 var(--step--1)/1.35 var(--utility); color:var(--cacao) }
/* Gate F: the checkout control can never fire while real ordering is disabled */
.btn[disabled], .btn[aria-disabled="true"]{ cursor:not-allowed; opacity:.6 }
.btn-primary[disabled], .btn-primary[aria-disabled="true"]{ background:var(--bordeaux) }
/* states with no dish to show keep the container empty */
.today[data-state="loading"] .today-dishes,
.today[data-state="empty"] .today-dishes,
.today[data-state="error"] .today-dishes{ display:none }
.today[data-state="loading"] .today-state[data-when="loading"],
.today[data-state="empty"] .today-state[data-when="empty"],
.today[data-state="error"] .today-state[data-when="error"]{ display:block }
/* ordering not open: the dish stays visible for information, the form does not */
.today[data-state="closed"] .order-form,
.today[data-state="soon"] .order-form,
.today[data-state="unavailable"] .order-form,
.dish[data-soldout="true"] .order-form{ display:none }
.today[data-state="closed"] [data-when="closed"],
.dish[data-soldout="true"] [data-when="unavailable"]{ display:block }
/* the weekly preview cannot be fetched: never claim "not published" (see site.js) */
.week-list[data-state="unavailable"] .day-empty{ visibility:hidden }
.week-offline, .carte-offline{ margin:var(--s4) 0 0; font:500 var(--step--1)/1.4 var(--utility); color:var(--bordeaux) }
.week-offline[hidden], .carte-offline[hidden]{ display:none }

/* ================= STEP 4: LIGHTBOX & UTILITIES ================= */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
html.lb-open{ overflow:hidden }
.lightbox{
  width:100%; height:100%; max-width:none; max-height:none; margin:0; border:0;
  padding:var(--s4) var(--gutter) var(--s5);
  background:oklch(0.237 0.037 22.9); color:var(--ivoire);
}
.lightbox[open]{ display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:var(--s4) }
.lightbox::backdrop{ background:oklch(0.237 0.037 22.9 / .6) }
.lightbox :focus-visible{ outline-color:var(--ivoire) }
.lb-bar{ display:flex; justify-content:space-between; align-items:center; gap:var(--s4) }
.lb-count{ margin:0; font:400 var(--step--1)/1.3 var(--utility); color:var(--ivoire-voile); font-variant-numeric:tabular-nums }
.lb-figure{ margin:0; min-height:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--s3); touch-action:pan-y pinch-zoom }
.lb-img{ max-width:100%; max-height:calc(100vh - 13rem); max-height:calc(100dvh - 13rem); width:auto; height:auto; object-fit:contain; border-radius:2px; user-select:none; -webkit-user-drag:none }
.lb-caption{ font:italic 400 var(--step-1)/1.3 var(--display); text-align:center; max-width:40ch }
.lb-nav{ display:flex; justify-content:center; gap:var(--s3); flex-wrap:wrap }
.lb-btn{
  min-height:44px; padding:0 1.1rem; border:1px solid oklch(0.943 0.026 90.1 / .5); border-radius:var(--radius);
  background:transparent; color:var(--ivoire); font:500 .95rem/1 var(--utility); cursor:pointer;
  transition:background-color .15s var(--ease);
}
.lb-btn:hover{ background:oklch(0.943 0.026 90.1 / .1) }

/* ================= STEP 4: DISH ILLUSTRATIONS & CARTE ================= */
.dish-visual{ position:relative }
.illus-tag{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  font:500 var(--label)/1 var(--utility); color:var(--bordeaux); white-space:nowrap;
  background:oklch(0.943 0.026 90.1 / .92); border:1px solid var(--line); border-radius:2px; padding:.3rem .55rem;
}
.illus-tag[hidden]{ display:none }
.illus-caption{ margin:var(--s4) auto 0; max-width:30ch; text-align:center; font:italic 400 var(--step--1)/1.45 var(--body); color:var(--cacao) }
.illus-caption[hidden]{ display:none }
.chip span small{ margin-left:.5rem; font-size:var(--label); font-weight:500; color:var(--cacao); font-variant-numeric:tabular-nums }
.chip input:checked + span small{ color:var(--ivoire-voile) }

.dish-thumb{ display:block; flex:none }
.dish-thumb img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:2px; background:var(--lin) }
.dish-compact .dish-thumb{ width:64px }
@media (min-width:600px){ .dish-compact .dish-thumb{ width:88px } }

.carte{ margin-top:var(--s8) }
.carte-title{ font-size:var(--step-3); color:var(--bordeaux) }
.carte-lede{ margin:var(--s3) 0 var(--s5); color:var(--cacao); max-width:var(--measure) }
.carte-list{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); border-top:0 }
.carte-item{
  display:grid; grid-template-columns:88px minmax(0,1fr); gap:var(--s3) var(--s4); align-items:start;
  padding:var(--s4); background:var(--ivoire); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 4px 16px rgba(44,24,16,0.04); transition:all 0.2s var(--ease);
}
.carte-item:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(44,24,16,0.08); border-color:rgba(139,30,30,0.3); }
.carte-item > .dish-thumb{ grid-row:1 / span 2; width:88px; border-radius:6px; overflow:hidden }
.carte-item > .dish-thumb img{ border-radius:6px }
.carte-name{ margin:0; font:500 var(--step-1)/1.2 var(--display); color:var(--bordeaux) }
.carte-meta{ margin:.25rem 0 0; font-size:var(--step--1); color:var(--cacao) }
.carte-prices{ margin:var(--s2) 0 0; display:flex; flex-wrap:wrap; gap:0.4rem var(--s3); grid-column:2 }
.carte-prices div{ display:inline-flex; align-items:baseline; gap:.4rem; background:var(--lin); padding:0.25rem 0.55rem; border-radius:4px }
.carte-prices dt{ font:500 0.72rem/1 var(--utility); text-transform:uppercase; color:var(--cacao) }
.carte-prices dd{ margin:0; font:600 var(--step--1)/1 var(--utility); color:var(--bordeaux) }
.illus-note{ margin-top:var(--s5); font:italic 400 var(--step--1)/1.45 var(--body); color:var(--cacao) }

/* ================= MOTION (design.md §7, « Smooth & premium ») =================
   Only applied when JS adds html.motion (i.e. no reduced-motion preference). */
@keyframes rise{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
/* Signature: the arch draws itself (design.md §7, Step 5 addendum).
   A conic mask sweeps from the bottom-left, up the side, over the arc and down the other side,
   tracing the inner burgundy line, then the outer wine line; then the photo settles inside.
   Runs once per arch, only when motion is allowed. Without @property support the lines simply appear. */
@property --sweep{ syntax:"<angle>"; inherits:false; initial-value:360deg }
@keyframes trace{ from{ --sweep:0deg } to{ --sweep:360deg } }
html.motion .arch-draw::before,
html.motion .arch-draw::after{
  --sweep:0deg;
  -webkit-mask-image:conic-gradient(from 200deg at 50% 37.5%, #000 var(--sweep), transparent var(--sweep));
          mask-image:conic-gradient(from 200deg at 50% 37.5%, #000 var(--sweep), transparent var(--sweep));
}
html.motion .arch-draw.is-drawn::before{ animation:trace 1.05s cubic-bezier(.65,0,.35,1) forwards }
html.motion .arch-draw.is-drawn::after{ animation:trace 1.05s cubic-bezier(.65,0,.35,1) .22s forwards }
html.motion .arch-draw .arch-clip{ opacity:0; transition:opacity .7s var(--ease) .6s }
html.motion .arch-draw .arch-clip img{ transform:scale(1.06); transition:transform 1.3s var(--ease) .6s }
html.motion .arch-draw.is-drawn .arch-clip{ opacity:1 }
html.motion .arch-draw.is-drawn .arch-clip img{ transform:none }
@keyframes lb-in{ from{ opacity:0 } to{ opacity:1 } }
html.motion .lightbox[open]{ animation:lb-in .2s var(--ease) }

/* ================= ORDER MODAL (GeniusPay) ================= */
.order-modal{
  position:fixed; inset:0; margin:auto; padding:0; border:0;
  background:transparent; max-width:92vw; width:30rem;
  z-index:90; overflow:visible;
}
.order-modal::backdrop{ background:oklch(0.237 0.037 22.9 / .6); backdrop-filter:blur(4px) }
.order-modal-box{
  background:var(--ivoire); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s5) var(--s5) var(--s6); box-shadow:0 12px 32px rgba(0,0,0,0.25);
  max-height:90vh; overflow-y:auto;
}
.order-modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s4); border-bottom:1px solid var(--line); padding-bottom:var(--s3) }
.order-modal-head h3{ font:400 1.35rem/1.2 var(--display); color:var(--vin); margin:0 }
.order-modal-close{
  border:none; background:transparent; font-size:1.25rem; cursor:pointer; color:var(--cacao);
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
}
.order-modal-close:hover{ background:var(--lin) }
.order-modal-summary{
  background:var(--lin); border-radius:var(--radius); padding:var(--s3) var(--s4);
  margin-bottom:var(--s4); font:400 .9rem/1.4 var(--utility); color:var(--cacao);
}
.order-modal-summary strong{ color:var(--vin); font-weight:600 }
.order-field{ margin-bottom:var(--s3); display:grid; gap:.25rem }
.order-field label{ font:500 .85rem/1.2 var(--utility); color:var(--cacao) }
.order-field input, .order-field textarea{
  width:100%; padding:.6rem .8rem; font:400 .95rem/1.4 var(--utility);
  border:1px solid var(--line); border-radius:calc(var(--radius) - 2px); background:#fff; color:var(--cacao);
}
.order-field input:focus, .order-field textarea:focus{ outline:2px solid var(--vin); outline-offset:1px }
.order-hint{ font-size:.78rem; color:var(--cacao-light); margin:0 }
.order-modal-trust{ text-align:center; font-size:.78rem; color:var(--cacao-light); margin-top:var(--s3) }
.order-error{ background:var(--warn-wash); color:var(--warn-ink); border:1px solid oklch(0.47 0.095 68 / .4); padding:.6rem .8rem; border-radius:var(--radius); font-size:.85rem; margin-bottom:var(--s3) }
/* --- delivery location: link, coordinates or address, with an optional GPS fill ---
   The button exposes aria-busy="true" while locating; the status line takes
   data-state="ok | error" from site.js and always says what happened in words. */
.order-location{
  gap:var(--s2); margin-bottom:var(--s4); padding:var(--s4);
  background:var(--lin); border:1px solid var(--line); border-radius:var(--radius);
}
.order-location-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2) var(--s3); flex-wrap:wrap }
.order-location-head label{ color:var(--bordeaux) }
.order-location-tag{
  font:500 var(--label)/1 var(--utility); color:var(--cacao); white-space:nowrap;
  border:1px solid var(--line); border-radius:2px; padding:.2rem .4rem .25rem; background:var(--ivoire);
}
.order-location input{ min-height:48px; background:var(--ivoire); border-color:var(--line); color:var(--bordeaux) }
.order-location input::placeholder{ color:var(--cacao); opacity:.8 }
.btn-pinpoint-gps{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  width:100%; min-height:48px; padding:0 1.1rem;
  background:var(--ivoire); color:var(--bordeaux); cursor:pointer;
  border:1px solid var(--bordeaux); border-radius:var(--radius);
  font:500 .95rem/1.15 var(--utility); text-align:center; touch-action:manipulation;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-pinpoint-gps svg{ flex:none; color:var(--vin); transition:color .2s var(--ease), transform .2s var(--ease) }
.btn-pinpoint-gps:hover{ background:var(--bordeaux); color:var(--ivoire) }
.btn-pinpoint-gps:hover svg{ color:var(--ivoire) }
.btn-pinpoint-gps:focus-visible{ outline:3px solid var(--vin); outline-offset:3px }
.btn-pinpoint-gps[aria-busy="true"]{ cursor:progress; background:var(--ivoire); color:var(--bordeaux) }
.btn-pinpoint-gps[aria-busy="true"] svg{ color:var(--vin); animation:pinpoint-seek 1s var(--ease) infinite alternate }
.btn-pinpoint-gps:disabled:not([aria-busy="true"]){ cursor:not-allowed; opacity:.6 }
@keyframes pinpoint-seek{ from{ transform:translateY(0) } to{ transform:translateY(-3px) } }
@media (min-width:480px){ .btn-pinpoint-gps{ width:auto; justify-self:start } }
.order-location-hint{ font:400 var(--label)/1.45 var(--utility); color:var(--cacao) }
.order-location-status{ margin:0; font:500 var(--label)/1.4 var(--utility); color:var(--cacao) }
.order-location-status:empty{ display:none }
.order-location-status[data-state="ok"]{ color:var(--bordeaux) }
.order-location-status[data-state="error"]{ color:var(--vin-ink); padding-left:.6rem; border-left:2px solid var(--vin) }

.order-success-banner{
  background:oklch(0.92 0.05 145); border:1px solid oklch(0.65 0.12 145); color:oklch(0.25 0.08 145);
  border-radius:var(--radius); padding:var(--s4); margin-bottom:var(--s5); font:500 .95rem/1.4 var(--utility);
}

/* ================= RECEIPT MODAL (Matches mockup) ================= */
.receipt-modal{
  border:none; border-radius:var(--radius-lg, 24px); padding:0; background:transparent;
  max-width:28rem; width:92vw; margin:auto; box-shadow:0 24px 60px rgba(45, 17, 24, 0.35);
}
.receipt-modal::backdrop{
  background:rgba(45, 17, 24, 0.6); backdrop-filter:blur(4px);
}
.receipt-card{
  background:#fff; border-radius:var(--radius-lg, 24px); padding:var(--s5) var(--s5) var(--s4);
  position:relative; color:var(--cacao); display:flex; flex-direction:column; align-items:center; text-align:center;
}
.receipt-close{
  position:absolute; top:1rem; right:1rem; border:none; background:var(--lin);
  width:32px; height:32px; border-radius:50%; font-size:1.1rem; cursor:pointer;
  display:grid; place-items:center; color:var(--cacao); transition:background 0.2s;
}
.receipt-close:hover{ background:var(--line); }
.receipt-celebration{
  position:relative; width:80px; height:80px; display:flex; align-items:center; justify-content:center;
  margin-top:var(--s2); margin-bottom:var(--s3);
}
.receipt-icon-circle{
  width:64px; height:64px; border-radius:50%; background:oklch(0.92 0.1 145);
  color:oklch(0.48 0.18 145); display:flex; align-items:center; justify-content:center;
  border:4px solid oklch(0.85 0.14 145);
  box-shadow:0 0 20px rgba(34, 197, 94, 0.25);
  animation:receipt-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes receipt-pop{
  0%{ transform:scale(0.5); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.receipt-confetti{ position:absolute; inset:0; pointer-events:none; }
.c-dot{ position:absolute; width:6px; height:6px; border-radius:50%; }
.c-1{ top:0; left:20%; background:#f59e0b; }
.c-2{ top:10%; right:15%; background:#3b82f6; }
.c-3{ bottom:10%; left:10%; background:#ec4899; }
.c-4{ bottom:5%; right:20%; background:#10b981; }
.c-5{ top:40%; left:-5%; background:#8b5cf6; }
.c-6{ top:35%; right:-5%; background:#ef4444; }

.receipt-heading{
  font:400 var(--step-3, 1.6rem)/1.2 var(--display, var(--serif));
  color:var(--vin, #5d1828); margin:0 0 var(--s2);
}
.receipt-sub{
  font:400 0.9rem/1.4 var(--utility); color:var(--cacao); margin:0 0 var(--s4);
}
.receipt-brand-note{ color:var(--cacao-light, #7c685b); font-size:0.82rem; }
.receipt-details{
  width:100%; background:var(--lin, #f7f3ef); border-radius:var(--radius, 12px);
  padding:var(--s4); margin-bottom:var(--s4); text-align:left;
  border:1px dashed var(--line, #e2d9cf);
}
.receipt-details-header{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s3);
}
.receipt-details-title{
  font:600 0.82rem/1.2 var(--utility); text-transform:uppercase; letter-spacing:0.04em; color:var(--cacao-light);
}
.receipt-status-pill{
  background:oklch(0.92 0.08 145); color:oklch(0.35 0.12 145);
  font:600 0.75rem/1 var(--utility); padding:0.25rem 0.5rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:0.25rem;
}
.status-dot{ font-size:0.6rem; color:oklch(0.48 0.18 145); }
.receipt-rows{ display:grid; gap:0.5rem; font:400 0.85rem/1.3 var(--utility); }
.receipt-row{ display:flex; justify-content:space-between; align-items:baseline; gap:0.5rem; }
.r-label{ color:var(--cacao-light); font-size:0.8rem; }
.r-val{ color:var(--cacao); font-weight:500; text-align:right; }
.receipt-divider{ border-top:1px dashed var(--line, #e2d9cf); margin:var(--s3) 0; }
.receipt-total-row{ display:flex; justify-content:space-between; align-items:baseline; }
.r-total-label{ font:600 0.95rem/1.2 var(--utility); color:var(--cacao); }
.r-total-val{ font:700 1.25rem/1.2 var(--display, var(--serif)); color:var(--vin, #5d1828); }
.receipt-actions{ width:100%; display:grid; gap:var(--s2); }

/* Language Switcher */
.lang-switch-btn{
  border:1px solid var(--vin); background:transparent; color:var(--vin);
  border-radius:999px; padding:0.35rem 0.65rem; font:600 0.8rem/1 var(--utility);
  cursor:pointer; display:inline-flex; align-items:center; gap:0.25rem;
  transition:all 0.2s ease;
}
.lang-switch-btn:hover{ background:var(--lin); }
.lang-switch-btn .lang-sep{ opacity:0.4; font-weight:normal; }
.lang-switch-btn.is-fr .lang-fr{ color:var(--vin); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.lang-switch-btn.is-fr .lang-en{ opacity:0.6; }
.lang-switch-btn.is-en .lang-en{ color:var(--vin); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.lang-switch-btn.is-en .lang-fr{ opacity:0.6; }

@media print{
  body > *:not(#receipt-modal){ display:none !important; }
  #receipt-modal{
    display:block !important;
    position:relative !important;
    box-shadow:none !important;
    border:none !important;
    background:#fff !important;
    width:100% !important;
    max-width:520px !important;
    margin:1.5rem auto !important;
    padding:1.5rem !important;
  }
  .receipt-card{
    box-shadow:none !important;
    border:1px solid #e0d5c8 !important;
    padding:2rem !important;
    background:#fff !important;
  }
  .receipt-close, .receipt-actions{ display:none !important; }
}

html.motion [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
html.motion [data-reveal].is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
  [data-parallax]{ transform:none !important }
}