/* =========================================================
   SÜPER BERLINES KEBAB — Jetons de conception du site public
   (L'administration garde tokens.css : ce fichier ne la touche pas.)

   Tout vient du logo : un disque anthracite, un trait vert citron
   dessiné à la main (la broche, le chef, l'assiette), des lettres
   blanches — « SÜPER » épais et rond, « BERLINES » fin et espacé.

   Direction : l'Imbiss berlinois de nuit. Fond anthracite, un seul
   accent vert, des ombres franches comme des autocollants posés sur
   un comptoir, et les deux points du Ü en motif récurrent.
   ========================================================= */
/* Polices hébergées sur le site (licence SIL OFL) : aucune requête vers
   Google, donc aucune adresse IP transmise sans consentement (RGPD). */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/assets/fonts/unbounded-latin-ext-300-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/assets/fonts/unbounded-latin-300-normal.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: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/unbounded-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/unbounded-latin-700-normal.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: 'Unbounded'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/assets/fonts/unbounded-latin-ext-900-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/assets/fonts/unbounded-latin-900-normal.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: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/manrope-latin-400-normal.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: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/manrope-latin-600-normal.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: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/assets/fonts/manrope-latin-800-normal.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: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/fraunces-latin-600-normal.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: 'Fraunces'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext-600-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/fraunces-latin-600-italic.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: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext-400-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/fraunces-latin-400-italic.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 relevée sur le logo ---- */
  --c-nuit:        #15120F;   /* le fond de la rue, la nuit */
  --c-anthracite:  #1F1B17;   /* le disque du logo */
  --c-graphite:    #2B2621;
  --c-graphite-2:  #383129;
  --c-lime:        #8CC130;   /* le trait du chef et de la broche */
  --c-lime-hi:     #A5D94B;
  --c-lime-lo:     #4E7A12;   /* lisible sur fond clair (AA) */
  --c-blanc:       #FFFFFF;   /* les lettres SÜPER */
  --c-feta:        #F6EFE3;   /* papier du menu */
  --c-kraft:       #EADCC5;
  --c-braise-org:  #E07A3A;   /* la lueur du grill */   /* fonds clairs : le papier du comptoir */
  --c-paprika:     #E85A2C;   /* piquant, promo */
  --c-gruen:       #3FA34D;   /* végétarien */

  /* ---- Sémantique : sombre par défaut ---- */
  --bg:          var(--c-nuit);
  --bg-alt:      var(--c-anthracite);
  --bg-raise:    var(--c-graphite);
  --bg-invert:   var(--c-feta);
  --text:        #F7F2EA;
  --text-mute:   #B5ACA0;
  --text-invert: var(--c-nuit);
  --line:        rgba(255,255,255,.11);
  --line-strong: rgba(255,255,255,.26);
  --accent:      var(--c-lime);
  --accent-text: var(--c-lime);            /* accent posé en texte */
  --accent-ink:  var(--c-nuit);            /* texte posé sur le vert */
  --ok:     var(--c-gruen);
  --warn:   var(--c-lime);
  --danger: var(--c-paprika);

  --grad-lime:  linear-gradient(100deg, var(--c-lime-hi), var(--c-lime) 60%, #78AA22);
  --grad-nuit:  linear-gradient(180deg, var(--c-anthracite) 0%, var(--c-nuit) 100%);
  --grad-veil:  linear-gradient(180deg, rgba(17,18,20,.1) 0%, rgba(17,18,20,.55) 55%, rgba(17,18,20,.94) 100%);

  --glass-bg:   rgba(29,30,32,.86);
  --glass-brd:  rgba(255,255,255,.14);
  --glass-blur: saturate(140%) blur(14px);

  /* ---- Typographie
     Unbounded : les capitales rondes et larges de « SÜPER ». En graisse
     300, espacée, elle redevient le « BERLINES » fin du logo.
     Manrope pour le texte : nette à 14 px sur téléphone. ---- */
  --font-display: 'Unbounded', 'Arial Black', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;

  --t-xs:   clamp(.78rem, .76rem + .10vw, .84rem);
  --t-sm:   clamp(.88rem, .85rem + .14vw, .96rem);
  --t-base: clamp(1.00rem, .97rem + .18vw, 1.08rem);
  --t-lg:   clamp(1.10rem, 1.03rem + .36vw, 1.30rem);
  --t-xl:   clamp(1.30rem, 1.12rem + .90vw, 1.80rem);
  --t-2xl:  clamp(1.65rem, 1.25rem + 1.90vw, 2.70rem);
  --t-3xl:  clamp(2.05rem, 1.35rem + 3.30vw, 3.90rem);
  --t-4xl:  clamp(2.60rem, 1.40rem + 5.60vw, 6.00rem);
  --lh-tight: 1.0;
  --lh-snug:  1.12;
  --lh-body:  1.62;

  /* ---- Espacement ---- */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
  --s-9: 6rem;   --s-10: 8rem;
  --section-y: clamp(3.5rem, 2.2rem + 6vw, 7.5rem);
  --gutter:    clamp(1rem, .6rem + 2.4vw, 3rem);
  --maxw:      1260px;
  --maxw-text: 64ch;

  /* ---- Rayons : le disque du logo pour les pastilles, des angles
     adoucis pour les cartes. ---- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-full: 999px;

  /* ---- Ombres : franches, décalées, comme un autocollant ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.3);
  --sh-2: 0 12px 30px rgba(0,0,0,.5);
  --sh-3: 0 26px 64px rgba(0,0,0,.6);
  --sh-stick: 0 14px 34px rgba(0,0,0,.38);
  --sh-stick-ink: 0 14px 34px rgba(0,0,0,.38);
  --ring: 0 0 0 2px var(--c-lime);

  /* ---- Mouvement ---- */
  --e-out:   cubic-bezier(.16, 1, .3, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --e-back:  cubic-bezier(.34, 1.56, .64, 1);
  --d-fast: 150ms; --d-mid: 280ms; --d-slow: 640ms;

  /* ---- Couches ---- */
  --z-base: 1; --z-sticky: 100; --z-header: 200;
  --z-drawer: 300; --z-modal: 400; --z-toast: 500;
  --header-h: 78px;

  /* ---- Alias attendus par les feuilles structurelles (panier, fiche
     plat, filtres) et par l'administration partagée. ---- */
  --c-noir: var(--c-nuit); --c-charbon: var(--c-anthracite);
  --c-charbon-2: var(--c-graphite); --c-charbon-3: var(--c-graphite-2);
  --c-couronne: var(--c-lime); --c-couronne-hi: var(--c-lime-hi); --c-couronne-lo: var(--c-lime-lo);
  --c-piment: var(--c-paprika); --c-coriandre: var(--c-gruen);
  --c-red: var(--c-lime);  --c-red-deep: var(--c-lime-lo);
  --c-gold: var(--c-lime); --c-orange: var(--c-lime);
  --c-braise: var(--c-lime); --c-braise-hi: var(--c-lime-hi); --c-braise-lo: var(--c-lime-lo);
  --c-citron: var(--c-lime);
  --c-green: var(--c-gruen); --c-vert: var(--c-gruen); --c-basilic: var(--c-gruen);
  --c-flamme: var(--c-paprika); --c-tomate: var(--c-paprika);
  --c-ink: var(--c-nuit); --c-ink-soft: var(--c-graphite);
  --c-nuit-2: var(--c-anthracite); --c-nuit-3: var(--c-graphite); --c-nuit-4: var(--c-graphite-2);
  --c-light: var(--c-blanc); --c-white: var(--c-blanc); --c-creme: var(--c-feta);
  --grad-heat: var(--grad-lime); --grad-gold: var(--grad-lime);
  --grad-braise: var(--grad-lime); --grad-citron: var(--grad-lime);
  --grad-basil: var(--grad-lime); --grad-ink: var(--grad-nuit);
  --grad-couronne: var(--grad-lime);
  --sh-red: var(--ring); --sh-gold: var(--ring);
  --glow-braise: var(--ring); --glow-citron: var(--ring);

  color-scheme: dark;
}

/* ---------- Mode clair : le comptoir en plein midi ---------- */
[data-theme="light"] {
  --bg:          #FBF7F0;
  --bg-alt:      var(--c-feta);
  --bg-raise:    #FFFFFF;
  --bg-invert:   var(--c-nuit);
  --text:        #1E1915;
  --text-mute:   #62574B;
  --text-invert: #FFFFFF;
  --line:        rgba(20,21,23,.12);
  --line-strong: rgba(20,21,23,.30);
  --accent-text: var(--c-lime-lo);
  --glass-bg:    rgba(255,255,255,.92);
  --glass-brd:   rgba(0,0,0,.10);
  --sh-1: 0 1px 2px rgba(0,0,0,.06), 0 2px 10px rgba(0,0,0,.06);
  --sh-2: 0 10px 28px rgba(0,0,0,.10);
  --sh-3: 0 24px 60px rgba(0,0,0,.16);
  --sh-stick: 0 14px 34px rgba(60,40,20,.16);
  --ring: 0 0 0 2px var(--c-nuit);
  color-scheme: light;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--t-base);
  line-height: var(--lh-body); font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 700;
  line-height: var(--lh-snug); letter-spacing: -.01em; text-wrap: balance;
}
h1, h2 { line-height: var(--lh-tight); font-weight: 900; letter-spacing: -.02em; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--c-lime); outline-offset: 3px; border-radius: 4px; }
[data-theme="light"] :focus-visible { outline-color: var(--c-nuit); }
::selection { background: var(--c-lime); color: var(--c-nuit); }
.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;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: var(--z-toast);
  background: var(--c-lime); color: var(--c-nuit); font-weight: 800;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-full);
  transition: top var(--d-fast) var(--e-out);
}
.skip-link:focus { top: var(--s-4); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}