/* =========================================================
   Restaurant Témoin — Menu tactile (démo commerciale G7 Design)
   Charte : chic Côte d'Azur · bleu canard + or chaud · sobre & animé
   Stack : HTML + CSS + JS vanilla, zéro build, mobile-first + tablette
   ========================================================= */

/* ---------- TOKENS (charte graphique) ---------- */
:root {
  /* PRIMAIRE · Bleu canard */
  --color-primary:        #0B2E6B;
  --color-primary-deep:   #071F47;
  --color-primary-700:    #0A2858;
  --color-primary-500:    #163E86;
  --color-primary-400:    #2B53A0;
  --color-primary-300:    #6F86C0;
  --color-primary-100:    #DCE3F0;
  --color-primary-050:    #EEF2F9;

  /* ACCENT · Or chaud / champagne */
  --color-accent:         #C99A4B;
  --color-accent-strong:  #B8862F;
  --color-accent-hover:   #E3B566;
  --color-accent-soft:    #F3E4C6;
  --color-accent-line:    #E8D3A6;

  /* NEUTRES */
  --color-bg:             #FBF8F3;
  --color-bg-alt:         #F4EFE7;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #FAF6EF;
  --color-overlay-dark:   rgba(7,31,71, 0.58);
  --color-overlay-scrim:  linear-gradient(180deg, rgba(7,31,71,0) 0%, rgba(7,31,71,0.62) 100%);

  /* BORDURES */
  --color-border:         #E7DECF;
  --color-border-strong:  #D8CBB2;
  --color-border-teal:    rgba(11,46,107, 0.18);

  /* TEXTE */
  --color-text:           #0D1B2A;
  --color-text-body:      #3A4A48;
  --color-text-muted:     #6B7A78;
  --color-text-on-dark:   #FBF8F3;
  --color-text-on-accent: #2A1E08;

  /* ALLERGÈNES (rouge) */
  --color-allergen:        #C0392B;
  --color-allergen-strong: #9B2D22;
  --color-allergen-bg:     #FBEAE7;
  --color-allergen-line:   #E2A39B;

  /* VÉGÉTARIEN (vert sauge) */
  --color-veg:        #4F7A46;
  --color-veg-strong: #3C5E36;
  --color-veg-bg:     #EBF1E6;
  --color-veg-line:   #BFD3B4;

  /* ÉTATS */
  --color-focus-ring:  rgba(201, 154, 75, 0.55);
  --color-shadow-teal: rgba(11,46,107, 0.16);

  /* POLICES */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* ÉCHELLE TYPO */
  --fs-hero:    clamp(2.6rem, 6vw, 4.25rem);
  --fs-h1:      clamp(2rem, 4.5vw, 3rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2rem);
  --fs-dish:    clamp(1.18rem, 2.4vw, 1.5rem);
  --fs-price:   clamp(1.15rem, 2.2vw, 1.45rem);
  --fs-lead:    1.0625rem;
  --fs-body:    0.975rem;
  --fs-label:   0.8125rem;
  --fs-meta:    0.75rem;
  --fs-micro:   0.6875rem;

  /* ESPACEMENTS */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --container-max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --grid-gap: clamp(16px, 2.5vw, 28px);
  --section-pad-y: clamp(48px, 8vw, 96px);

  /* RAYONS */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* OMBRES teintées canard */
  --shadow-xs: 0 1px 2px var(--color-shadow-teal);
  --shadow-sm: 0 2px 8px rgba(11,46,107,0.10);
  --shadow-md: 0 8px 24px rgba(11,46,107,0.12);
  --shadow-lg: 0 16px 40px rgba(11,46,107,0.18);
  --shadow-accent-glow: 0 6px 20px rgba(201,154,75,0.28);

  /* MOTION */
  --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-emphasis:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-mid:    420ms;
  --dur-slow:   600ms;
  --stagger:    60ms;

  --header-h: 64px;
}

/* ---------- RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.app { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* =========================================================
   ÉCRAN A — Token gate
   ========================================================= */
.access-denied #app,
.access-denied .lightbox { display: none !important; }
.access-denied { background: var(--color-bg); }

.gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(11,46,107,0.10), transparent 60%),
    var(--color-bg);
  text-align: center;
}
.gate__inner {
  max-width: 460px;
  animation: gateIn 640ms var(--ease-emphasis) both;
}
.gate__lock {
  color: var(--color-primary);
  opacity: 0.85;
  margin-bottom: var(--sp-6);
}
.gate__brand {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 600;
  color: var(--color-primary-deep);
  margin-bottom: var(--sp-2);
}
.gate__rule {
  display: block; width: 48px; height: 2px; margin: var(--sp-4) auto;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-line));
}
.gate h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--sp-3);
}
.gate p {
  color: var(--color-text-muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
}
.gate__en { margin-top: var(--sp-3); color: var(--color-text-muted); opacity: 0.72; font-size: 0.95rem; }
@keyframes gateIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* =========================================================
   HEADER (sticky, transparent → opaque)
   ========================================================= */
.header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--dur-base) var(--ease-in-out),
              box-shadow var(--dur-base) var(--ease-in-out);
  background: transparent;
}
.header.is-stuck {
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
.header__inner {
  width: 100%; max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.brand__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 600;
  color: var(--color-primary-deep);
  letter-spacing: 0.01em;
  transition: color var(--dur-base) var(--ease-in-out);
}
.hero-overlapping .brand__name { color: var(--color-text-on-dark); }
.header.is-stuck .brand__name { color: var(--color-primary-deep); }

.header__tools { display: inline-flex; align-items: center; gap: var(--sp-3); }

/* Toggle Avec / Sans photos (univers Restauration uniquement) */
.display-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 7px 13px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: var(--shadow-xs);
  font: 600 var(--fs-meta)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-muted); white-space: nowrap;
  transition: color var(--dur-base) var(--ease-in-out),
              background var(--dur-base) var(--ease-in-out),
              border-color var(--dur-base) var(--ease-in-out);
}
.display-toggle__ico { flex: 0 0 auto; color: var(--color-accent-strong); }
@media (hover: hover) {
  .display-toggle:hover { border-color: var(--color-primary-300); color: var(--color-primary-500); background: var(--color-primary-050); }
}
.display-toggle.is-classic { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-dark); }
.display-toggle.is-classic .display-toggle__ico { color: var(--color-accent-hover); }
/* Le toggle ne concerne que l'univers Restauration : masqué dans l'univers Boissons */
body.is-drinks .display-toggle { display: none; }

/* Sélecteur langue */
.lang {
  display: inline-flex; position: relative;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 3px;
  box-shadow: var(--shadow-xs);
}
.lang__opt {
  position: relative; z-index: 1;
  padding: 6px 14px; min-height: 36px; min-width: 44px;
  font: 600 var(--fs-meta)/1 var(--font-body);
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  transition: color var(--dur-base) var(--ease-in-out);
}
.lang__opt[aria-pressed="true"] { color: var(--color-primary); }
.lang__slider {
  position: absolute; top: 3px; bottom: 3px; z-index: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  transition: transform var(--dur-base) var(--ease-in-out),
              width var(--dur-base) var(--ease-in-out);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: clamp(420px, 68vh, 640px);
  display: flex; align-items: flex-end;
  padding: var(--sp-16) var(--gutter) var(--sp-12);
  overflow: hidden;
  isolation: isolate;
}
/* Carrousel : piste de slides en fondu enchaîné */
.hero__slides {
  position: absolute; inset: -6% 0 0 0; z-index: 0; overflow: hidden;
  will-change: transform;
}
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; z-index: 0;
  transition: opacity 1000ms var(--ease-out-soft);
}
/* La slide active monte en fondu PAR-DESSUS (z-index supérieur) ;
   les autres restent à opacity 0 dessous → crossfade propre, jamais de "creux". */
.hero__slide.is-active { opacity: 1; z-index: 1; }
.hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.04);
}
.hero__slide.is-active .hero__img {
  animation: heroKenBurns 6s var(--ease-out-soft) forwards;
}
@keyframes heroKenBurns { from { transform: scale(1.08); } to { transform: scale(1); } }

.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,31,71,0.40) 0%, rgba(7,31,71,0.18) 34%, rgba(7,31,71,0.30) 62%, rgba(7,31,71,0.82) 100%);
}

/* Indicateurs (dots) */
.hero__dots {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--sp-5);
  display: flex; justify-content: center; gap: var(--sp-3);
}
.hero__dot {
  position: relative;
  width: 10px; height: 10px; border-radius: 50%; padding: 0;
  background: rgba(251,248,243,0.45);
  border: 1px solid rgba(251,248,243,0.65);
  cursor: pointer; box-shadow: 0 1px 3px rgba(9,31,30,0.35);
  transition: background var(--dur-base) var(--ease-in-out),
              transform var(--dur-base) var(--ease-spring),
              width var(--dur-base) var(--ease-spring);
}
.hero__dot::before { content: ""; position: absolute; inset: -12px; } /* tap target ≥ 44px */
.hero__dot.is-active {
  width: 26px; border-radius: var(--radius-pill);
  background: var(--color-accent); border-color: var(--color-accent-hover);
}
.hero__dot:hover { background: var(--color-accent-soft); }

.hero__content { position: relative; z-index: 2; max-width: var(--container-max); margin: 0 auto; width: 100%; }
.hero__eyebrow {
  font: 600 var(--fs-label)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--color-accent-hover);
  margin-bottom: var(--sp-4);
  opacity: 0; transform: translateY(12px);
  animation: heroUp 700ms var(--ease-emphasis) 120ms both;
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero); font-weight: 600; line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--color-text-on-dark);
  opacity: 0; transform: translateY(16px);
  animation: heroUp 760ms var(--ease-emphasis) 220ms both;
  position: relative;
}
.hero__baseline {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.1rem, 2.6vw, 1.55rem);
  color: var(--color-text-on-dark);
  opacity: 0; transform: translateY(14px);
  margin-top: var(--sp-3);
  max-width: 36ch;
  animation: heroUp 760ms var(--ease-emphasis) 360ms both;
}
.hero__rule {
  display: block; height: 2px; width: 0;
  margin-top: var(--sp-6);
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  animation: ruleGrow 640ms var(--ease-out-soft) 520ms forwards;
}
@keyframes heroUp { to { opacity: 1; transform: none; } }
@keyframes ruleGrow { to { width: 88px; } }

/* =========================================================
   ONGLETS (sticky)
   ========================================================= */
.tabs {
  position: sticky; top: var(--header-h); z-index: 30;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-xs);
  border-bottom: 1px solid var(--color-border-teal);
}
.tabs__list {
  position: relative;
  display: flex; gap: var(--sp-2);
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--sp-3) var(--gutter);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tab {
  position: relative; z-index: 1;
  scroll-snap-align: center; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  padding: 11px 18px; min-height: 44px;
  font: 600 var(--fs-label)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted); white-space: nowrap;
  transition: color var(--dur-base) var(--ease-in-out),
              background var(--dur-base) var(--ease-in-out),
              opacity var(--dur-base) var(--ease-in-out);
}
.tab:hover { color: var(--color-primary-500); }
.tab[aria-selected="true"] { color: var(--color-primary); background: var(--color-primary-050); }
.tab.is-disabled { opacity: 0.34; pointer-events: none; }
.tabs__indicator {
  position: absolute; z-index: 0; bottom: 6px; left: 0;
  height: 2px; width: 0;
  background: var(--color-accent);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-in-out),
              width var(--dur-base) var(--ease-in-out),
              opacity var(--dur-base) var(--ease-in-out);
  opacity: 0;
}

/* =========================================================
   FILTRES
   ========================================================= */
.filters {
  max-width: var(--container-max); margin: var(--sp-8) auto 0;
  padding: 0 var(--gutter);
}
.filters__inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.filters__group { display: inline-flex; align-items: center; gap: var(--sp-3); }
.filters__legend {
  font: 600 var(--fs-micro)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.portion-group {
  display: inline-flex; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 3px;
}
.portion-chip {
  border-radius: var(--radius-pill); padding: 8px 14px; min-height: 40px;
  font: 600 var(--fs-micro)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted);
  transition: background var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out),
              box-shadow var(--dur-fast) var(--ease-in-out);
}
.portion-chip[aria-pressed="true"] {
  background: var(--color-primary); color: var(--color-text-on-dark);
  box-shadow: var(--shadow-accent-glow);
}

.veg-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 9px 16px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface);
  font: 600 var(--fs-label)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted);
  transition: background var(--dur-base) var(--ease-in-out),
              color var(--dur-base) var(--ease-in-out),
              border-color var(--dur-base) var(--ease-in-out);
}
.veg-chip__leaf { transition: transform var(--dur-base) var(--ease-spring); }
.veg-chip[aria-pressed="true"] {
  background: var(--color-veg); color: #fff; border-color: var(--color-veg);
}
.veg-chip[aria-pressed="true"] .veg-chip__leaf { transform: rotate(-8deg) scale(1.08); }

.allergen-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: 6px 8px 6px 6px;
}
.allergen-toggle__track {
  width: 48px; height: 28px; border-radius: var(--radius-pill);
  background: var(--color-border); position: relative; flex: 0 0 auto;
  transition: background var(--dur-base) var(--ease-in-out);
}
.allergen-toggle__knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-spring);
}
.allergen-toggle[aria-checked="true"] .allergen-toggle__track { background: var(--color-allergen); }
.allergen-toggle[aria-checked="true"] .allergen-toggle__knob { transform: translateX(20px); }
.allergen-toggle__label {
  font: 600 var(--fs-label)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text);
}

.reset-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; margin-left: auto;
  border-radius: var(--radius-pill);
  font: 600 var(--fs-micro)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-primary-500);
  border: 1px dashed var(--color-border-strong);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-in-out),
              border-color var(--dur-fast) var(--ease-in-out);
  animation: chipPop var(--dur-base) var(--ease-spring) both;
}
.reset-btn:hover { background: var(--color-primary-050); border-color: var(--color-primary-300); }
@keyframes chipPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

.filters__count {
  margin-top: var(--sp-3); padding-left: var(--sp-2);
  font: 500 var(--fs-meta)/1.4 var(--font-body);
  color: var(--color-text-muted);
}

/* =========================================================
   MENU / SECTIONS / GRILLE
   ========================================================= */
.menu {
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--sp-10) var(--gutter) var(--sp-20);
}
.cat-section { padding-top: var(--sp-12); scroll-margin-top: calc(var(--header-h) + 64px); }
.cat-section:first-child { padding-top: var(--sp-8); }
.cat-section.is-empty { display: none; }

.cat-section__head { text-align: center; margin-bottom: var(--sp-8); }
.cat-section__title {
  font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600;
  color: var(--color-text); line-height: 1.1;
}
.cat-section__title::after {
  content: ""; display: block; width: 0; height: 2px; margin: var(--sp-3) auto 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-line));
  transition: width var(--dur-mid) var(--ease-out-soft);
}
.cat-section.is-in .cat-section__title::after { width: 48px; }
.cat-section__lead {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--fs-lead); color: var(--color-text-muted);
  margin-top: var(--sp-3);
}

.dish-grid {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .dish-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dish-grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================
   CARTE DE PLAT
   ========================================================= */
.dish-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  /* reveal au scroll */
  opacity: 0; transform: translateY(24px);
  transition: transform var(--dur-mid) var(--ease-out-soft),
              opacity var(--dur-mid) var(--ease-out-soft),
              box-shadow var(--dur-mid) var(--ease-out-soft),
              border-color var(--dur-base) var(--ease-in-out);
  will-change: opacity, transform;
}
.dish-card.is-in { opacity: 1; transform: translateY(0); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.dish-card.is-filtered-out {
  opacity: 0 !important; transform: scale(0.96) !important;
  pointer-events: none; position: absolute; width: 1px; height: 1px; overflow: hidden;
  transition: opacity var(--dur-fast) var(--ease-in-out), transform var(--dur-fast) var(--ease-in-out);
}

.dish-card__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-050));
}
.dish-card__media-btn { display: block; width: 100%; height: 100%; padding: 0; }
.dish-card__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-soft);
}
.dish-card__media-btn:active .dish-card__img { transform: scale(1.02); }

/* Placeholder (photo null) */
.dish-card__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-300);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--color-primary-050), var(--color-primary-100));
}

/* Badges flottants sur photo */
.dish-card__badges {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  z-index: 2;
}
.badge-veg {
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--color-veg-bg) 92%, transparent);
  color: var(--color-veg-strong);
  border: 1px solid var(--color-veg-line);
  border-radius: var(--radius-sm); padding: 4px 9px;
  font: 600 var(--fs-micro)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.05em;
  backdrop-filter: blur(4px); box-shadow: var(--shadow-xs);
}

.dish-card__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  display: flex; flex-direction: column; flex: 1;
}
.dish-card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
}
.dish-card__name {
  font-family: var(--font-display); font-size: var(--fs-dish); font-weight: 600;
  color: var(--color-text); line-height: 1.15;
}
.dish-card__price {
  font-family: var(--font-display); font-size: var(--fs-price); font-weight: 600;
  color: var(--color-accent-strong);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.dish-card__desc {
  margin-top: var(--sp-2); font-size: var(--fs-body); line-height: 1.55;
  color: var(--color-text-body); flex: 1;
}

.dish-card__foot {
  margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.badge-portion {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-primary-050); color: var(--color-primary);
  border-radius: var(--radius-sm); padding: 4px 9px;
  font: 600 var(--fs-micro)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.badge-portion__dots { display: inline-flex; gap: 2px; }
.badge-portion__dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.35; }
.badge-portion__dots i.on { opacity: 1; }

/* Zone allergènes (visible quand toggle ON) */
.allergen-flag {
  display: none; align-items: flex-start; gap: 7px;
  background: var(--color-allergen-bg); color: var(--color-allergen-strong);
  font: 600 var(--fs-meta)/1.35 var(--font-body);
  border-radius: var(--radius-sm); padding: 7px 11px;
  margin-top: var(--sp-3); width: 100%;
}
.allergen-flag svg { flex: 0 0 auto; margin-top: 1px; }
.allergen-flag--safe {
  display: none; background: var(--color-primary-050); color: var(--color-primary-500);
}
.allergens-on .dish-card.is-allergen .allergen-flag { display: inline-flex; }
.allergens-on .dish-card:not(.is-allergen) .allergen-flag--safe { display: inline-flex; }

/* État surligné allergène */
.allergens-on .dish-card.is-allergen {
  border-color: var(--color-allergen-line);
  box-shadow: 0 0 0 2px var(--color-allergen-line) inset, var(--shadow-md);
}
@keyframes allergenPulse {
  0%   { box-shadow: 0 0 0 0 rgba(192,57,43,0); }
  35%  { box-shadow: 0 0 0 6px rgba(192,57,43,0.18); }
  100% { box-shadow: 0 0 0 2px var(--color-allergen-line) inset, var(--shadow-md); }
}
.dish-card.is-allergen.just-flagged { animation: allergenPulse 520ms var(--ease-out-soft) both; }

/* Hover / tap */
@media (hover: hover) {
  .dish-card:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-lg);
    border-color: var(--color-accent-line);
  }
  .dish-card:hover .dish-card__img { transform: scale(1.045); }
}
.dish-card__media-btn:active { transform: scale(0.99); transition: transform 90ms var(--ease-out-soft); }

/* =========================================================
   BADGE FAIT MAISON — PICTO SEUL (pas de libellé sur cartes/lignes)
   Pastille canard discrète, picto doré. Distinct du badge végé (vert).
   ========================================================= */
.badge-maison {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 auto;
  background: var(--color-primary-050);
  border: 1px solid var(--color-border-teal);
  border-radius: 50%; color: var(--color-accent-strong);
  cursor: default; vertical-align: middle;
  transition: background var(--dur-fast) var(--ease-in-out), transform var(--dur-fast) var(--ease-spring);
}
.badge-maison__ico { display: block; }
@media (hover: hover) {
  .badge-maison:hover { background: var(--color-accent-soft); transform: scale(1.08); }
}
.badge-maison:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

/* =========================================================
   SÉLECTEUR MAÎTRE — DEUX UNIVERS (Restauration / Boissons)
   ========================================================= */
.universe {
  display: flex; justify-content: center;
  padding: var(--sp-8) var(--gutter) var(--sp-4);
}
.universe__switch {
  position: relative; display: inline-flex;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 5px;
  box-shadow: var(--shadow-sm);
}
.universe__slider {
  position: absolute; top: 5px; bottom: 5px; left: 0; z-index: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  box-shadow: var(--shadow-accent-glow);
  transition: transform var(--dur-base) var(--ease-spring), width var(--dur-base) var(--ease-spring);
}
.universe__opt {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 10px clamp(18px, 4vw, 30px);
  border-radius: var(--radius-pill);
  font: 600 var(--fs-label)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted);
  transition: color var(--dur-base) var(--ease-in-out);
}
.universe__opt[aria-selected="true"] { color: var(--color-text-on-dark); }
.universe__opt svg { transition: transform var(--dur-base) var(--ease-spring); }
.universe__opt[aria-selected="true"] svg { transform: scale(1.05); }

/* Panneaux d'univers + animation d'entrée */
.universe-panel { animation: none; }
.panel-anim { animation: panelIn 460ms var(--ease-out-soft) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =========================================================
   UNIVERS BOISSONS — carte élégante
   ========================================================= */
.drinks-intro { text-align: center; padding: var(--sp-8) var(--gutter) var(--sp-2); }
.drinks-intro__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h1); color: var(--color-text); line-height: 1.08;
}
.drinks-intro__lead {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--fs-lead); color: var(--color-text-muted); margin-top: var(--sp-2);
}
.drinks-intro__rule {
  display: block; width: 56px; height: 2px; margin: var(--sp-5) auto 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-line));
}

/* Filtres par TYPE (chips sticky) */
.drink-types {
  position: sticky; top: var(--header-h); z-index: 30;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-xs);
  border-bottom: 1px solid var(--color-border-teal);
  margin-top: var(--sp-4);
}
.drink-types__list {
  display: flex; gap: var(--sp-2);
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--sp-3) var(--gutter);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.drink-types__list::-webkit-scrollbar { display: none; }
.type-chip {
  scroll-snap-align: center; flex: 0 0 auto;
  border-radius: var(--radius-pill); padding: 10px 16px; min-height: 44px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  font: 600 var(--fs-micro)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted); white-space: nowrap;
  transition: background var(--dur-base) var(--ease-in-out),
              color var(--dur-base) var(--ease-in-out),
              border-color var(--dur-base) var(--ease-in-out);
}
.type-chip:hover { border-color: var(--color-primary-300); color: var(--color-primary-500); }
.type-chip[aria-selected="true"] {
  background: var(--color-primary); color: var(--color-text-on-dark);
  border-color: var(--color-primary); box-shadow: var(--shadow-accent-glow);
}

/* Barre allergènes propre à l'univers boissons */
.drinks-filters {
  display: flex; justify-content: center;
  max-width: var(--container-max); margin: var(--sp-6) auto 0; padding: 0 var(--gutter);
}

/* Listing boissons */
.drinks {
  max-width: 820px; margin: var(--sp-8) auto 0;
  padding: 0 var(--gutter) var(--sp-20);
}
.drink-section {
  margin-top: var(--sp-12);
  scroll-margin-top: calc(var(--header-h) + 72px);
}
.drink-section.is-hidden { display: none; }
.drink-section__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--color-primary);
  text-align: center; letter-spacing: 0.01em;
}
.drink-section__title::after {
  content: ""; display: block; width: 42px; height: 2px; margin: var(--sp-3) auto var(--sp-6);
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-line));
}
.drink-list { list-style: none; padding: 0; margin: 0; }

.drink-item {
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--color-border-teal);
  transition: background var(--dur-base) var(--ease-in-out), box-shadow var(--dur-base) var(--ease-in-out);
}
.drink-item:last-child { border-bottom: none; }
.drink-item__line { display: flex; align-items: baseline; gap: var(--sp-2); }
.drink-item__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 2.3vw, 1.35rem); color: var(--color-text); line-height: 1.25;
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.drink-item__name .badge-maison { transform: translateY(-1px); }
.drink-item__desc { margin-top: 3px; font-size: 0.82rem; line-height: 1.35; color: var(--color-text-muted); }
.drink-item__leader {
  flex: 1 1 auto; align-self: flex-end; min-width: 20px; height: 0;
  margin: 0 6px 6px; border-bottom: 1px dotted var(--color-border-strong); opacity: 0.65;
}
.drink-item__prices {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 2.3vw, 1.35rem); color: var(--color-accent-strong);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.drink-item__unit { font-size: var(--fs-meta); color: var(--color-text-muted); font-weight: 500; letter-spacing: 0.02em; }

/* Nom + description en colonne à gauche ; prix alignés au nom à droite (comme en restauration) */
.drink-item__info { display: flex; flex-direction: column; min-width: 0; }
.drink-item--multi .drink-item__info { flex: 1 1 auto; }
.drink-item__prices--multi {
  flex: 0 1 auto; justify-content: flex-end; flex-wrap: wrap; gap: 6px 16px;
}
.drink-fmt {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 2px 0;
}
.drink-fmt__lbl {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-meta);
  letter-spacing: 0.02em; color: var(--color-text-muted); text-transform: none;
}
.drink-fmt__price { font-family: var(--font-display); font-weight: 600; color: var(--color-accent-strong); }

/* Allergènes (ligne révélée sous le nom quand toggle ON) */
.drink-item__allergens {
  display: none; align-items: center; gap: 6px;
  margin-top: 5px; padding-left: 2px;
  font: 500 var(--fs-meta)/1.3 var(--font-body); color: var(--color-allergen-strong);
}
.allergens-on .drink-item.is-allergen { background: var(--color-allergen-bg); box-shadow: inset 3px 0 0 var(--color-allergen); }
.allergens-on .drink-item.is-allergen .drink-item__allergens { display: flex; }
.allergens-on .drink-item.is-allergen .drink-item__name { color: var(--color-allergen-strong); }
@keyframes allergenPulseRow {
  0%   { box-shadow: inset 3px 0 0 var(--color-allergen), 0 0 0 0 rgba(192,57,43,0); }
  35%  { box-shadow: inset 3px 0 0 var(--color-allergen), 0 0 0 5px rgba(192,57,43,0.16); }
  100% { box-shadow: inset 3px 0 0 var(--color-allergen), 0 0 0 0 rgba(192,57,43,0); }
}
.drink-item.is-allergen.just-flagged { animation: allergenPulseRow 520ms var(--ease-out-soft) both; }

/* =========================================================
   MENU PLATS — MODE « SANS PHOTOS » (liste classique élégante)
   Réutilise .drink-list / .drink-item ; ajoute description + badge végé.
   ========================================================= */
.menu--classic {
  max-width: 820px;             /* même gabarit raffiné que la carte boissons */
  padding-top: var(--sp-4);
}
.menu--classic .cat-section { padding-top: var(--sp-12); }
.menu--classic .cat-section:first-child { padding-top: var(--sp-6); }

.dish-list { list-style: none; padding: 0; margin: 0; }

/* Item plat en liste : reveal doux (réutilise le pattern carte) */
.dish-item {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-mid) var(--ease-out-soft), transform var(--dur-mid) var(--ease-out-soft),
              background var(--dur-base) var(--ease-in-out), box-shadow var(--dur-base) var(--ease-in-out);
  will-change: opacity, transform;
}
.dish-item.is-in { opacity: 1; transform: none; }
.dish-item.is-filtered-out { display: none !important; }

/* Surlignage allergène en mode SANS PHOTOS : pas de barre latérale rouge, lignes aérées */
.allergens-on .menu--classic .dish-item.is-allergen {
  box-shadow: none;
  margin-bottom: 14px;
}
.menu--classic .dish-item.is-allergen.just-flagged { animation: none; }

.dish-item__desc {
  margin: 6px 0 0; padding-right: clamp(0px, 12vw, 110px);
  font-size: var(--fs-body); line-height: 1.5; color: var(--color-text-body);
}

/* Badge végétarien en version inline (liste) — distinct du picto maison */
.badge-veg--inline {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-veg-bg); color: var(--color-veg-strong);
  border: 1px solid var(--color-veg-line);
  border-radius: var(--radius-sm); padding: 2px 8px;
  font: 600 var(--fs-micro)/1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.04em;
  transform: translateY(-1px);
}

/* =========================================================
   LÉGENDE FAIT MAISON (footer) — seule explication textuelle
   ========================================================= */
.legend-maison {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 auto var(--sp-6);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(251,248,243,0.06);
  border: 1px solid rgba(232,211,166,0.28);
  border-radius: var(--radius-pill);
  font: 500 var(--fs-meta)/1.4 var(--font-body);
  color: var(--color-accent-soft);
  max-width: 580px; text-align: left;
}
.legend-maison__ico { flex: 0 0 auto; color: var(--color-accent-hover); display: inline-flex; }

/* =========================================================
   EMPTY STATE
   ========================================================= */
.empty-state {
  max-width: 520px; margin: 0 auto var(--sp-20);
  padding: var(--sp-12) var(--gutter); text-align: center;
  color: var(--color-text-muted);
}
.empty-state svg { color: var(--color-primary-300); margin-bottom: var(--sp-4); }
.empty-state p { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h2); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--color-primary-deep); color: var(--color-text-on-dark);
  padding: var(--sp-12) var(--gutter);
}
.footer__inner { max-width: var(--container-max); margin: 0 auto; text-align: center; }
.footer__sig {
  font-family: var(--font-display); font-size: var(--fs-lead);
  color: var(--color-accent-soft); margin-bottom: var(--sp-5);
}
.credits {
  font-size: var(--fs-meta); color: rgba(251,248,243,0.62);
  max-width: 640px; margin: 0 auto;
}
.credits summary {
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; font-size: var(--fs-micro);
  color: var(--color-accent-line); list-style: none; padding: var(--sp-2);
  transition: color var(--dur-fast) ease;
}
.credits summary::-webkit-details-marker { display: none; }
.credits summary:hover { color: var(--color-accent-hover); }
.credits__list { margin-top: var(--sp-3); line-height: 1.7; }
.credits__src { margin-top: var(--sp-2); opacity: 0.7; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
  background: rgba(9,31,30,0.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; animation: lbFade var(--dur-base) var(--ease-out-soft) forwards;
}
.lightbox.is-closing { animation: lbFadeOut var(--dur-fast) var(--ease-in-out) forwards; }
@keyframes lbFade { to { opacity: 1; } }
@keyframes lbFadeOut { to { opacity: 0; } }
.lightbox__close {
  position: absolute; top: max(var(--sp-4), env(safe-area-inset-top)); right: var(--sp-4);
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12); color: #fff;
  transition: background var(--dur-fast) ease;
}
.lightbox__close:hover { background: rgba(255,255,255,0.22); }
.lightbox__figure {
  max-width: min(960px, 100%); max-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  animation: lbZoom var(--dur-mid) var(--ease-emphasis) both;
}
@keyframes lbZoom { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.lightbox__img {
  max-width: 100%; max-height: 78vh; object-fit: contain;
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.lightbox__cap { margin-top: var(--sp-4); text-align: center; color: #fff; }
.lightbox__name { display: block; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; }
.lightbox__credit { display: block; margin-top: 4px; font-size: var(--fs-meta); color: rgba(255,255,255,0.6); }

/* =========================================================
   FEEDBACK TACTILE
   ========================================================= */
.tappable:active { transform: scale(0.97); transition: transform 90ms var(--ease-out-soft); }

/* Ripple doré */
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: var(--color-accent-soft); opacity: 0.5;
  transform: scale(0); animation: rippleGo 480ms var(--ease-out-soft) forwards;
}
@keyframes rippleGo { to { transform: scale(2.4); opacity: 0; } }

/* =========================================================
   CROSS-FADE LANGUE
   ========================================================= */
.lang-switching [data-i18n],
.lang-switching .dish-card__name,
.lang-switching .dish-card__desc { transition: opacity 120ms ease; }
.lang-switching.fade-out [data-i18n] { opacity: 0; }

/* =========================================================
   REVEAL générique (sections)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(24px); will-change: opacity, transform; }
.reveal.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-mid) var(--ease-out-soft),
              transform var(--dur-mid) var(--ease-out-soft);
}

/* =========================================================
   RESPONSIVE — affinages tablette / mobile
   ========================================================= */
@media (max-width: 600px) {
  .filters__inner { gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
  .filters__group { width: 100%; justify-content: space-between; }
  .portion-group { width: 100%; }
  .portion-chip { flex: 1; padding: 9px 8px; }
  .reset-btn { margin-left: 0; }
  .allergen-toggle__label, .veg-chip span { letter-spacing: 0.04em; }
}

/* =========================================================
   PREFERS-REDUCED-MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .reveal, .dish-card, .dish-item { opacity: 1 !important; transform: none !important; }
  .hero__img { animation: none !important; transform: none !important; }
  .hero__slides { transform: none !important; }
  /* Carrousel figé : seule la 1re image visible, pas d'auto-play */
  .hero__slide { opacity: 0 !important; z-index: 0 !important; }
  .hero__slide:first-child { opacity: 1 !important; z-index: 1 !important; }
  .hero__eyebrow, .hero__title, .hero__baseline { opacity: 1 !important; transform: none !important; }
  .hero__rule { width: 88px !important; animation: none; }
  .cat-section__title::after { width: 48px !important; }
}

/* note allergènes maquette */
.footer__note{font-size:var(--fs-meta);color:var(--color-text-muted);opacity:.85;margin-top:var(--sp-2);max-width:46ch;margin-left:auto;margin-right:auto}

/* --- logo resto (a la place du nom texte) + indice photo en mode liste --- */
.hero__title .brand-logo{height:clamp(54px,9vw,88px);width:auto;filter:brightness(0) invert(1)}
.brand__name .brand-logo{max-height:26px;width:auto;vertical-align:middle;filter:brightness(0) invert(1)}
.header.is-stuck .brand__name .brand-logo{filter:none}
.dish-item--photo{cursor:pointer}
.dish-item--photo .drink-item__name::after{content:" \01F50D";font-size:.78em;opacity:.5;margin-left:3px}

/* --- FAB bascule d'univers (Restauration <-> Boissons) --- */
.universe-fab{
  position:fixed; right:16px; bottom:16px; z-index:50;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border:none; border-radius:999px;
  background:var(--color-primary); color:#fff;
  font-family:inherit; font-weight:600; font-size:.95rem; line-height:1;
  box-shadow:0 12px 30px -10px rgba(7,31,71,.6);
  cursor:pointer; overflow:hidden; -webkit-tap-highlight-color:transparent;
  opacity:0; transform:translateY(16px) scale(.92); pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1), background .15s;
}
.universe-fab.is-shown{opacity:1; transform:none; pointer-events:auto}
.universe-fab:hover{background:var(--color-primary-700)}
.universe-fab:active{transform:scale(.96)}
.universe-fab svg{flex:0 0 auto}
.universe-fab__label{white-space:nowrap}
@supports (padding:max(0px)){
  .universe-fab{bottom:max(16px, env(safe-area-inset-bottom))}
}
@media (max-width:480px){
  .universe-fab{padding:11px 16px; font-size:.9rem}
}

/* --- lien crédit pied de page --- */
.footer__link{color:var(--color-accent-strong);text-decoration:none;font-weight:600}
.footer__link:hover,.footer__link:focus{text-decoration:underline}


/* --- Rupture (plat indisponible temporairement) + masquage --- */
.rupture-tag{ display:inline-block; vertical-align:middle; margin-left:6px; font-size:.6em; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--color-accent-strong); background:var(--color-accent-soft); border:1px solid var(--color-accent-line); border-radius:999px; padding:2px 8px; white-space:nowrap; }
.is-out{ opacity:.5; }
.is-out .dish-card__media, .is-out .dish-card__img{ filter:grayscale(.85); }
.is-out .drink-item__price, .is-out .dish-card__price{ text-decoration:line-through; opacity:.7; }

/* --- Bannière auto-MAJ du menu (sans rechargement) --- */
.menu-update-banner{ position:fixed; left:50%; bottom:18px; transform:translate(-50%,24px); z-index:70; display:inline-flex; align-items:center; gap:9px; max-width:92vw; padding:11px 18px; border-radius:999px; background:var(--color-primary); color:#fff; font-size:.92rem; font-weight:600; line-height:1.25; box-shadow:0 14px 34px -10px rgba(7,31,71,.6); opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.menu-update-banner.is-shown{ opacity:1; transform:translate(-50%,0); }
.menu-update-banner__ico{ display:inline-flex; animation:mub-spin 1.4s linear infinite; }
@keyframes mub-spin{ to{ transform:rotate(360deg); } }
@media print{ .menu-update-banner{ display:none !important; } }

/* Option « masquer les portions » (réglage par client) */
.no-portions .badge-portion,
.no-portions .filters__group--portions { display: none !important; }

/* Reveal/animations d entrée désactivés : tout est affiché par défaut (aucun risque de transparence au re-rendu) */
.reveal, .dish-card, .dish-item { opacity: 1 !important; transform: none !important; }

/* Mode tablette (?tablette=1) : lien crédit G7 Design inactif (le client ne quitte pas la carte) */
body.is-kiosk .footer__link { pointer-events: none; cursor: default; }