/* ==========================================================================
   BS FOOD – design system v2
   Palette stricte : vert / noir / blanc (+ opacités).
   --color-brand-green : vert néon de la marque (#7CFF3A).
   ========================================================================== */
:root {
  --color-black: #0a0a0a;
  --color-black-2: #0d0d0d;
  --color-white: #ffffff;
  --color-brand-green: #7cff3a;
  --color-text: rgb(255 255 255 / .96);
  --color-muted: rgb(255 255 255 / .7);
  --color-glass: rgb(255 255 255 / .06);
  --color-border: rgb(255 255 255 / .14);

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 12px;
  --radius-card: 24px;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 50px rgb(0 0 0 / .45);
  --blur: blur(20px) saturate(180%);

  --ease: cubic-bezier(.22, .8, .24, 1);
  --t-fast: .2s;

  --space-section: clamp(4.5rem, 10vw, 8rem);
  --container: 1160px;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-black); color: var(--color-text);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a, button, [role="tab"] { -webkit-tap-highlight-color: transparent; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, blockquote, address { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-brand-green); outline-offset: 3px; border-radius: 6px; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--color-brand-green); color: var(--color-black);
  padding: .6rem 1rem; border-radius: var(--radius-sm); font-weight: 700; transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }

/* Barre de progression de lecture */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--color-brand-green); transform-origin: left; transform: scaleX(var(--p, 0)); box-shadow: 0 0 12px rgb(124 255 58 / .7); }

/* ---------- Liquid Glass ---------- */
.glass {
  position: relative;
  background: linear-gradient(160deg, rgb(255 255 255 / .12), rgb(255 255 255 / .03) 60%), var(--color-glass);
  border: 1px solid var(--color-border);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -1px 0 rgb(255 255 255 / .05), inset 1px 0 0 rgb(255 255 255 / .06), var(--shadow-soft);
}
/* reflet fixe en haut à gauche */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgb(255 255 255 / .18), transparent 36%); opacity: .5;
}
/* reflet qui suit le pointeur (alimenté par main.js) */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / .2), transparent 62%);
  transition: opacity .4s;
}
.glass:hover::after { opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(24 24 24 / .94); }
}

/* ---------- Typo ---------- */
h1, h2, h3 { font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
h1 { font-size: clamp(2.05rem, 4.1vw, 3.7rem); line-height: 1.08; }
h2 { font-size: clamp(2rem, 4.8vw, 3.4rem); }
h2, h3 { text-wrap: balance; }
h3 { font-size: 1.2rem; letter-spacing: -.015em; line-height: 1.2; }
.accent { color: var(--color-brand-green); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-brand-green);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

/* Titres animés mot par mot (main.js découpe le texte) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .03em .16em; margin: -.1em -.03em -.16em; }
.wi { display: inline-block; }
.js [data-split]:not(h1) .wi { transform: translateY(112%); transition: transform .95s var(--ease); transition-delay: calc(var(--k, 0) * 55ms); }
.js .reveal.is-visible [data-split] .wi, .js [data-split].is-visible .wi { transform: none; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .85rem 1.6rem;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 1rem; line-height: 1; white-space: nowrap;
  translate: var(--tx, 0) var(--ty, 0); /* effet magnétique */
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), translate .25s ease-out;
}
.btn:active { transform: scale(.97); }
.btn--sm { min-height: 44px; padding: .65rem 1.2rem; font-size: .95rem; }
.btn--lg { min-height: 58px; padding: 1rem 1.9rem; font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; }
.btn--primary { background: var(--color-brand-green); color: var(--color-black); box-shadow: 0 8px 28px rgb(124 255 58 / .28), inset 0 1px 0 rgb(255 255 255 / .35); }
.btn--primary:hover { background: #a0ff6b; transform: translateY(-2px); box-shadow: 0 14px 38px rgb(124 255 58 / .42), inset 0 1px 0 rgb(255 255 255 / .4); }
.btn--glass {
  background: linear-gradient(160deg, rgb(255 255 255 / .14), rgb(255 255 255 / .04)); border-color: var(--color-border); color: var(--color-white);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25);
}
.btn--glass:hover { background: rgb(255 255 255 / .16); transform: translateY(-2px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .btn--glass { background: rgb(36 36 36 / .95); } }

/* ---------- Navigation ---------- */
.site-header { position: fixed; inset: 14px 0 auto; z-index: 50; pointer-events: none; }
.nav {
  pointer-events: auto; width: min(100% - 1.5rem, 980px); margin-inline: auto;
  height: var(--nav-h); padding: 0 .6rem 0 1.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: var(--radius-pill); background-color: rgb(10 10 10 / .35);
  transition: background-color .5s var(--ease);
}
.site-header.is-scrolled .nav { background-color: rgb(8 8 8 / .72); }
.nav > * { position: relative; z-index: 1; }

.brand { display: inline-flex; align-items: center; gap: .65rem; line-height: 1; }
.brand__name { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--color-white); white-space: nowrap; }
.brand__logo { width: 46px; height: 46px; border-radius: 50%; transition: transform .35s var(--ease); }
.brand:hover .brand__logo { transform: rotate(-6deg) scale(1.06); }
.footer .brand__logo { width: 72px; height: 72px; }
.footer .brand__name { font-size: 1.5rem; }

.nav__links { display: flex; gap: .2rem; }
.nav__links a {
  position: relative; display: block; padding: .55rem .95rem; border-radius: var(--radius-pill);
  font-weight: 600; font-size: .95rem; color: var(--color-muted); transition: color var(--t-fast), background-color var(--t-fast);
}
.nav__links a:hover { color: var(--color-white); background: rgb(255 255 255 / .08); }
.nav__links a.is-active { color: var(--color-white); background: rgb(255 255 255 / .12); }
.nav__links a.is-active::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 16px; height: 2px; margin-left: -8px; background: var(--color-brand-green); border-radius: 2px; }

.nav__toggle { display: none; width: 48px; height: 48px; border-radius: 50%; background: transparent; border: 1px solid var(--color-border); }
.nav__bars { position: relative; display: block; width: 18px; height: 12px; margin: auto; }
.nav__bars i { position: absolute; left: 0; width: 100%; height: 2px; background: var(--color-white); border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.nav__bars i:first-child { top: 1px; }
.nav__bars i:last-child { top: 9px; }
.nav__toggle[aria-expanded="true"] .nav__bars i:first-child { top: 5px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars i:last-child { top: 5px; transform: rotate(-45deg); }

@media (max-width: 860px) {
  :root { --blur: blur(14px) saturate(160%); }
  .nav { padding-left: .8rem; }
  .nav__toggle { display: block; }
  .nav__cta { margin-left: auto; }
  .nav__links {
    position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    flex-direction: column; gap: .15rem; padding: .7rem;
    background: rgb(10 10 10 / .96); border: 1px solid var(--color-border); border-radius: var(--radius-card);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-soft);
    opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top; visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
  }
  .nav__links.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .nav__links a { padding: .95rem 1rem; font-size: 1.05rem; }
  .nav__links a.is-active::after { display: none; }
  .nav__links a.is-active { box-shadow: inset 3px 0 0 var(--color-brand-green); border-radius: 12px; }
}
@media (max-width: 380px) { .nav__cta span { display: none; } .nav__cta { padding: .65rem .8rem; } }

/* ---------- Accueil ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + 2.6rem) 0 4.2rem; overflow: hidden; }
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 56% at 50% 52%, rgb(124 255 58 / .2), transparent 70%),
    radial-gradient(40% 40% at 8% 100%, rgb(124 255 58 / .09), transparent 70%);
}
/* halo vert qui suit le pointeur */
.hero__halo {
  position: absolute; left: 0; top: 0; width: 560px; height: 560px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(124 255 58 / .2), transparent 66%);
  translate: calc(var(--hx, 1000) * 1px - 280px) calc(var(--hy, 380) * 1px - 280px);
}

.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero__copy { display: grid; gap: 1.5rem; justify-items: center; text-align: center; }
.hero__title { font-size: clamp(2.7rem, 6.2vw, 6.2rem); line-height: .94; letter-spacing: -.045em; text-transform: uppercase; }
/* ordinateur : le titre se pose sur deux rangées, « Le goût  qui claque / à chaque  bouchée » */
@media (min-width: 861px) {
  .hero__title { display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: .26em; }
  .hero__title .hero__line { white-space: nowrap; }
  .hero__title .hero__line:nth-child(even) { justify-self: end; }   /* 1er enfant = texte réservé aux lecteurs d'écran */
  .hero__title .hero__line:nth-child(odd):not(.sr-only) { justify-self: start; }
}
.hero__line { display: block; }
.hero__word { display: inline-block; }
.hero__word--hot { color: var(--color-brand-green); text-shadow: 0 0 46px rgb(124 255 58 / .4); }
.hero__lead { text-wrap: balance; max-width: 50ch; color: var(--color-muted); font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.hero__fact { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: rgb(255 255 255 / .05); font-size: .95rem; color: var(--color-muted); }
.hero__fact strong { color: var(--color-white); font-weight: 800; }
.hero__fact svg { flex: none; color: var(--color-brand-green); }

/* éléments néon : ambiance autour du titre */
.hero__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.deco { position: absolute; display: block; }
.deco--glow { left: 12%; right: 12%; top: 14%; bottom: 4%; border-radius: 50%; background: radial-gradient(closest-side, rgb(124 255 58 / .2), transparent 70%); }
.deco--ring { width: min(40vw, 560px); aspect-ratio: 1; right: -12vw; top: 9%; border-radius: 50%; border: 2px dashed rgb(124 255 58 / .5); }
.deco--dot { width: 14px; height: 14px; border-radius: 50%; background: var(--color-brand-green); box-shadow: 0 0 24px 4px rgb(124 255 58 / .6); }
.deco--dot-a { left: 7%; top: 26%; }
.deco--dot-b { width: 9px; height: 9px; right: 11%; bottom: 20%; }
/* parallaxe légère : ordinateur avec souris uniquement */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .deco--ring { translate: calc(var(--sx, 0) * 18px) calc(var(--sy, 0) * 14px); }
  .deco--dot-a { translate: calc(var(--sx, 0) * -26px) calc(var(--sy, 0) * -18px); }
  .deco--dot-b { translate: calc(var(--sx, 0) * 22px) calc(var(--sy, 0) * 16px); }
}

/* états de départ des animations d'entrée (retirés si le mouvement est réduit
   ou si les animations ne démarrent pas : voir le <head> et js/motion-fx.js) */
/* titre : entrée en CSS pur. Pas de style écrit par script : une fois l'animation finie, le mot est simplement à sa place. */
@keyframes word-in { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: translateY(0); } }
.js:not(.rm) .hero__word { animation: word-in .8s cubic-bezier(.22, .8, .24, 1) backwards; animation-delay: calc(.05s + var(--i, 0) * .07s); }
.js:not(.rm):not(.m-off) :is([data-fx-in], .cats__item) { opacity: 0; }

.scroll-cue { position: absolute; bottom: 1.4rem; left: 50%; width: 26px; height: 42px; margin-left: -13px; border: 1.5px solid var(--color-border); border-radius: 14px; z-index: 1; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; background: var(--color-brand-green); border-radius: 2px; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

@media (max-width: 860px) {
  .hero { padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 3rem; }
  .hero__copy { justify-items: start; text-align: left; }
  .hero__title { font-size: clamp(2.5rem, 12.5vw, 4.4rem); }
  .hero__actions { justify-content: flex-start; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__facts { justify-content: flex-start; }
  .deco--ring { width: 78vw; right: -34vw; top: 2%; }
  .deco--dot-a { left: 80%; top: 24%; }
  .deco--dot-b { right: 8%; bottom: 12%; }
  .hero__halo { display: none; }
  .scroll-cue { display: none; }
}

/* ---------- Bande de transition ---------- */
.marquee { overflow: hidden; padding: 1.5rem 0; border-block: 1px solid rgb(255 255 255 / .07); background: var(--color-black); }
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; will-change: transform; }
.marquee.is-js .marquee__track { animation: none; }
.marquee__set { display: flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem; }
.marquee__set span { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: transparent; -webkit-text-stroke: 1.2px rgb(255 255 255 / .38); }
.marquee__set span:nth-of-type(even) { color: var(--color-white); -webkit-text-stroke: 0; }
.marquee__set span.is-hot { color: var(--color-brand-green); -webkit-text-stroke: 0; }
.marquee__set i { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--color-brand-green); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: var(--space-section) 0; position: relative; overflow-x: clip; }
.section--alt { background: linear-gradient(180deg, var(--color-black-2), var(--color-black)); border-block: 1px solid rgb(255 255 255 / .05); }
.section > .container { position: relative; }
.glow-l::before, .glow-r::before {
  content: ""; position: absolute; top: 8%; width: 60%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, rgb(124 255 58 / .13), transparent 65%);
}
.glow-l::before { left: -22%; }
.glow-r::before { right: -22%; }
.section__head { display: grid; gap: 1rem; max-width: 640px; margin-bottom: 2.4rem; }
.section__sub { color: var(--color-muted); }

/* ---------- Menu ---------- */
.tabs { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 2rem; }
.tab {
  min-height: 44px; padding: .55rem 1rem; border-radius: var(--radius-pill);
  background: var(--color-glass); border: 1px solid var(--color-border); color: var(--color-muted); font-weight: 600; font-size: .93rem;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease), border-color var(--t-fast);
}
.tab:hover { color: var(--color-white); border-color: rgb(255 255 255 / .3); }
.tab:active { transform: scale(.96); }
.tab.is-active { background: transparent; border-color: transparent; color: var(--color-black); }

.panel { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.2rem); align-items: start; }
.panel[hidden] { display: none; }
.panel.is-entering { animation: pop .55s var(--ease) both; }
@keyframes pop { from { opacity: 0; translate: 0 14px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }
.panel--solo { grid-template-columns: minmax(0, 1fr); }

.panel__content { display: grid; gap: 1.4rem; min-width: 0; }
.panel__content.glass-solid { padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--color-black-2); border: 1px solid rgb(255 255 255 / .08); border-radius: var(--radius-card); }
.panel__title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.panel__intro { color: var(--color-muted); margin-top: -.6rem; }
.items { display: grid; gap: 0 2.6rem; }
.items:not(.items--cols) { max-width: 760px; }
.items--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid rgb(255 255 255 / .09); }
.item__name { font-weight: 700; font-size: 1.08rem; }
.item__price { font-weight: 800; color: var(--color-brand-green); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.item__prices { display: grid; gap: .1rem; text-align: right; font-weight: 800; color: var(--color-brand-green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item__prices small { color: var(--color-muted); font-weight: 500; font-size: .8rem; margin-right: .3rem; }
.item__desc { grid-column: 1 / -1; color: var(--color-muted); font-size: .92rem; line-height: 1.45; }
.meta { display: grid; gap: .7rem; }
.meta h4 { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-brand-green); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li { padding: .4rem .85rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: rgb(255 255 255 / .04); font-size: .9rem; color: var(--color-text); }
.chips b { color: var(--color-brand-green); font-weight: 800; margin-left: .2rem; font-variant-numeric: tabular-nums; }
.promo { padding: 1.2rem 1.4rem; border-radius: 20px; background: linear-gradient(155deg, rgb(124 255 58 / .14), rgb(255 255 255 / .02)); border: 1px solid rgb(124 255 58 / .3); }
.promo .item:last-of-type { border-bottom: 0; }
.panel__note { color: var(--color-muted); font-size: .92rem; }

.menu-note { margin-top: 1.6rem; font-size: .92rem; color: var(--color-muted); text-wrap: pretty; }
.menu-note a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-brand-green); }

@media (max-width: 960px) { .panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .items--cols { grid-template-columns: minmax(0, 1fr); }
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1.25rem; padding-inline: 1.25rem; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
}

/* ---------- Présentation ---------- */
.about { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about__media { position: relative; width: min(100%, 360px); justify-self: center; aspect-ratio: 258 / 336; }
.about__layer { position: absolute; translate: 0 calc(var(--py, 0) * 1px); }
.about__layer img { width: 100%; height: 100%; object-fit: cover; }
.about__layer--main { inset: 0; }
.about__layer { overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); }
.about__layer--main { border-radius: 32px; }
.about__layer--second { right: -16%; bottom: -9%; width: 50%; aspect-ratio: 258 / 336; z-index: 2; }
.about__layer--second { border-radius: 24px; border: 3px solid var(--color-black); outline: 1px solid var(--color-border); }
.chip--float { left: -14px; bottom: 28px; z-index: 3; }
.about__copy { display: grid; gap: 1.2rem; justify-items: start; }
.statement { font-size: clamp(1.3rem, 2.5vw, 1.85rem); line-height: 1.38; letter-spacing: -.015em; font-weight: 600; color: var(--color-white); max-width: 32ch; }
.sw { opacity: .22; }
.about__note { color: var(--color-muted); max-width: 52ch; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; width: 100%; margin-top: .8rem; }
.facts li { display: grid; gap: .2rem; padding: 1.1rem 1.2rem; border-radius: 20px; }
.facts li > * { position: relative; z-index: 1; }
.facts strong { font-size: 1.05rem; color: var(--color-white); }
.facts span { font-size: .85rem; color: var(--color-muted); line-height: 1.35; }
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: 6rem; }
  .about__media { width: min(100%, 290px); }
  .about__layer--second { right: -9%; }
  .chip--float { left: 50%; translate: -50% 0; bottom: -40px; }
}
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* ---------- Avis ---------- */
.reviews { display: grid; grid-template-columns: 330px 1fr; gap: 1.4rem; align-items: start; }
.score { position: sticky; top: 110px; display: grid; gap: .5rem; justify-items: start; padding: 2rem; border-radius: var(--radius-card); }
.score > * { position: relative; z-index: 1; }
.score__num { font-size: 5rem; font-weight: 800; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.score__max { font-size: 1.4rem; color: var(--color-muted); letter-spacing: 0; margin-left: .15rem; }
.score__stars { color: var(--color-brand-green); letter-spacing: .15em; font-size: 1.25rem; }
.score__meta { font-weight: 700; }
.score__src { font-size: .85rem; color: var(--color-muted); margin-bottom: .6rem; }
.quotes { display: grid; gap: 1rem; }
.quote { padding: 1.5rem 1.7rem; background: var(--color-black-2); border: 1px solid rgb(255 255 255 / .08); border-radius: var(--radius-card); display: grid; gap: 1rem; }
.quote blockquote p { font-size: 1.05rem; line-height: 1.6; }
.quote__by { font-size: .88rem; color: var(--color-muted); }
.quote__by strong { color: var(--color-white); }
.quote--feature { padding: 2rem 2.2rem; background: linear-gradient(155deg, rgb(124 255 58 / .16), var(--color-black-2) 62%); border-color: rgb(124 255 58 / .3); }
.quote--feature blockquote p { font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.45; letter-spacing: -.012em; font-weight: 600; }
@media (min-width: 861px) {
  .quote:nth-child(2) { margin-left: 2.5rem; }
  .quote:nth-child(3) { margin-left: 5rem; }
}
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } .score { position: static; padding: 1.6rem; } }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.contact__info { position: relative; z-index: 2; display: grid; gap: 1.2rem; justify-items: start; }
.contact__card { display: grid; gap: .8rem; width: 100%; padding: 1.8rem; border-radius: var(--radius-card); font-size: 1.1rem; }
.contact__card > * { position: relative; z-index: 1; }
.contact__name { font-size: 1.4rem; letter-spacing: -.02em; }
.contact__phone { font-size: 1.6rem; font-weight: 800; color: var(--color-brand-green); letter-spacing: -.01em; width: fit-content; }
.contact__phone:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem; }
.contact__map { overflow: hidden; border-radius: var(--radius-card); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); background: var(--color-black-2); min-height: 440px; }
.contact__map iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; filter: grayscale(1) invert(.92) contrast(.9); }
.contact__photo { grid-column: 1 / -1; margin-top: clamp(.5rem, 2vw, 1.5rem); overflow: hidden; border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-black-2); box-shadow: var(--shadow-soft), 0 0 80px rgb(124 255 58 / .14); }
.contact__photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 42%; }
@media (min-width: 861px) { .contact__card { margin-right: -5rem; } }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .contact__photo img { aspect-ratio: 4 / 3; object-position: 55% 45%; } .contact__map, .contact__map iframe { min-height: 300px; } .contact__actions .btn { flex: 1 1 140px; } }

/* ---------- Footer ---------- */
.footer { padding: 4rem 0 1.5rem; border-top: 1px solid rgb(255 255 255 / .08); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer__tag { margin-top: 1rem; color: var(--color-muted); max-width: 30ch; }
.footer ul { display: grid; gap: .5rem; }
.footer a:not(.brand) { color: var(--color-muted); transition: color var(--t-fast); }
.footer a:not(.brand):hover { color: var(--color-brand-green); }
.footer__contact { display: grid; gap: .8rem; color: var(--color-muted); }
.footer__bar { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgb(255 255 255 / .08); font-size: .85rem; color: var(--color-muted); }
@media (max-width: 700px) { .footer__grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- Animations d'entrée ---------- */

.js .reveal { opacity: 0; translate: 0 22px; transition: opacity .8s var(--ease), translate .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.is-visible { opacity: 1; translate: 0 0; }
.js .card.reveal { transition: opacity .8s var(--ease), translate .8s var(--ease), transform .25s ease-out, border-color .3s; transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; translate: none; }
  .js .wi { transform: none !important; }
  .sw { opacity: 1 !important; }
  .chip, .about__layer { translate: none !important; }
  .card { transform: none !important; }
}


/* ==========================================================================
   v8 – COUCHE D'ANIMATIONS
   ========================================================================== */

/* ---------- Grain de pellicule (statique) ---------- */
.grain {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Accueil : aurore, étincelles, badge ---------- */
.hero__aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__aurora i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
/* Halos en dégradé radial : même rendu qu'un flou, sans filtre coûteux à animer */
.hero__aurora i:nth-child(1) { width: 62vw; height: 62vw; left: -22vw; top: -24vw; background: radial-gradient(closest-side, rgb(124 255 58 / .26), rgb(124 255 58 / .1) 55%, transparent 100%); animation: drift-a 19s ease-in-out infinite alternate; }
.hero__aurora i:nth-child(2) { width: 50vw; height: 50vw; right: -16vw; top: -4vh; background: radial-gradient(closest-side, rgb(124 255 58 / .28), rgb(124 255 58 / .1) 55%, transparent 100%); animation: drift-b 23s ease-in-out infinite alternate; }
.hero.is-offscreen .hero__aurora i { animation-play-state: paused; }
@keyframes drift-a { to { transform: translate3d(9vw, 6vw, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-8vw, 9vh, 0) scale(.88); } }
.hero__sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Curseur ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cursor.is-on { opacity: 1; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; will-change: transform; }
.cursor__dot::before { content: ""; position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--color-brand-green); box-shadow: 0 0 12px var(--color-brand-green); }
.cursor__ring::before { content: ""; position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .45);
  transition: transform .4s var(--ease), background-color .3s, border-color .3s; }
.cursor.is-hover .cursor__ring::before { transform: scale(1.75); background: rgb(124 255 58 / .16); border-color: var(--color-brand-green); }
.cursor.is-down .cursor__ring::before { transform: scale(.75); }

/* ---------- Navigation : barre qui se cache, pastille qui glisse ---------- */
.site-header { transition: transform .55s var(--ease); }
.site-header.is-hidden { transform: translateY(-140%); }
.nav__pill { display: none; }
@media (min-width: 861px) {
  .nav__links { position: relative; }
  .nav__pill { display: block; position: absolute; left: 0; top: 0; border-radius: var(--radius-pill); background: rgb(255 255 255 / .13); pointer-events: none; opacity: 0;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
    transition: transform .5s cubic-bezier(.34, 1.35, .5, 1), width .5s var(--ease), height .5s var(--ease), opacity .3s; }
  .nav__pill.is-on { opacity: 1; }
  .nav__links.has-pill a:hover, .nav__links.has-pill a.is-active { background: transparent; }
}

/* ---------- Boutons : reflet qui passe, ondulation au clic ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / .42) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .9s var(--ease);
}
.btn:hover::before { transform: translateX(130%); }
.ripple { position: absolute; z-index: -1; border-radius: 50%; background: rgb(255 255 255 / .38); pointer-events: none; transform: scale(0); animation: ripple .7s ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Bande défilante : légèrement inclinée par la vitesse ---------- */
.marquee__track { backface-visibility: hidden; }

/* ---------- Carte : pastille glissante, lignes en cascade, prix qui défilent ---------- */
.tabs { position: relative; }
.tab { position: relative; z-index: 1; }
.tabs__pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--radius-pill); background: var(--color-brand-green); pointer-events: none;
  box-shadow: 0 8px 26px rgb(124 255 58 / .38), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform .55s cubic-bezier(.34, 1.4, .5, 1), width .5s var(--ease), height .5s var(--ease); }
.js .panel.pre .item, .js .panel.pre .chips li, .js .panel.pre .panel__title, .js .panel.pre .panel__intro { opacity: 0; }
.panel.is-entering .panel__title, .panel.is-entering .panel__intro { animation: item-in .6s var(--ease) both; }
.panel.is-entering .item { animation: item-in .65s var(--ease) both; animation-delay: calc(.08s + var(--n, 0) * 60ms); }
.panel.is-entering .chips li { animation: chip-in .55s var(--ease) both; animation-delay: calc(.25s + var(--n, 0) * 22ms); }
@keyframes item-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes chip-in { from { opacity: 0; transform: translateY(10px) scale(.86); } to { opacity: 1; transform: none; } }
.item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--color-brand-green); box-shadow: 0 0 10px var(--color-brand-green); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.item:hover::after { transform: scaleX(1); }
.item { position: relative; }
.item__name { transition: transform .45s var(--ease); }
.item:hover .item__name { transform: translateX(9px); }
.item__price { transition: transform .45s var(--ease); transform-origin: right center; }
.item:hover .item__price { transform: scale(1.13); }
.chips li { transition: transform .35s var(--ease), border-color .3s, background-color .3s; }
.chips li:hover { transform: translateY(-3px); border-color: var(--color-brand-green); background: rgb(124 255 58 / .12); }

/* ---------- Photos qui se dévoilent ---------- */
.js .reveal-img .about__layer img { clip-path: inset(0 0 100% 0); transform: scale(1.22);
  transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1) .15s, transform 2s var(--ease) .15s; }
.js .reveal-img .about__layer--second img { transition-delay: .5s; }
.js .reveal-img.is-visible .about__layer img { clip-path: inset(0 0 0 0); transform: none; }

/* ---------- Avis : arrivée latérale, étoiles ---------- */
.js .quote.reveal { translate: -64px 0; }
.js .quote.reveal:nth-child(even) { translate: 64px 0; }
.js .quote.reveal.is-visible { translate: 0 0; }
.quote--feature { position: relative; overflow: hidden; }
.quote--feature::before { content: "“"; position: absolute; right: 1.2rem; top: -.2em; font-size: 9rem; font-weight: 800; line-height: 1; color: var(--color-brand-green); opacity: .16; pointer-events: none; }
.js .score__stars span { display: inline-block; opacity: 0; transform: scale(0) rotate(-90deg); }
.js .score.is-visible .score__stars span { animation: star-pop .65s cubic-bezier(.34, 1.6, .5, 1) forwards; animation-delay: calc(.55s + var(--k, 0) * 110ms); }
@keyframes star-pop { to { opacity: 1; transform: none; } }

/* ---------- Pied de page : grand logotype qui se remplit ---------- */
.footer { position: relative; overflow: hidden; }
.footer__giant {
  margin-top: 2rem; text-align: center; white-space: nowrap; user-select: none; font-weight: 800; letter-spacing: -.06em; line-height: .8;
  font-size: clamp(4.5rem, 21vw, 19rem); padding-bottom: .1em;
  background: linear-gradient(90deg, var(--color-brand-green) calc(var(--fill, 0) * 1%), rgb(255 255 255 / .07) calc(var(--fill, 0) * 1%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .cursor, .hero__sparks, .grain { display: none !important; }
  .hero__word, [data-fx-in], .cats__item { opacity: 1 !important; transform: none !important; }
  .hero__word { animation: none !important; }
  .js .score__stars span { opacity: 1; transform: none; }
  .js .reveal-img .about__layer img { clip-path: none; transform: none; }
  .js .quote.reveal, .js .quote.reveal:nth-child(even) { translate: none; }
  .js .panel.pre .item, .js .panel.pre .chips li, .js .panel.pre .panel__title, .js .panel.pre .panel__intro { opacity: 1; }
}


/* ==========================================================================
   v9 – SECTION PLEIN ÉCRAN : la photo grandit pendant le défilement
   --p = progression 0→1 dans la section, --e = ouverture de la photo (lissée).
   Sans JavaScript ou en mouvement réduit : valeurs par défaut = état final.
   ========================================================================== */
.showcase { position: relative; background: var(--color-black); }
.js .showcase { height: 290vh; }
.showcase__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.showcase__frame {
  --ix: 21vw; --iy: 15svh;
  position: absolute; inset: 0; overflow: hidden; background: var(--color-black-2);
  clip-path: inset(calc((1 - var(--e, 1)) * var(--iy)) calc((1 - var(--e, 1)) * var(--ix)) round calc((1 - var(--e, 1)) * 38px));
}
.showcase__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 38% center; transform: scale(calc(1.2 - var(--e, 1) * .2)); will-change: transform; }
.showcase__shade { position: absolute; inset: 0; opacity: var(--e, 1);
  background: linear-gradient(90deg, rgb(10 10 10 / .86) 0%, rgb(10 10 10 / .6) 46%, rgb(10 10 10 / .2) 100%), linear-gradient(180deg, rgb(10 10 10 / .25), rgb(10 10 10 / .55)); }
.showcase__text { position: relative; z-index: 2; display: grid; align-content: center; justify-items: start; gap: 1.4rem; width: min(100% - 2.5rem, var(--container)); }
.showcase__title { font-size: clamp(2.7rem, min(9.4vw, 13.5svh), 8rem); line-height: .98; letter-spacing: -.045em; display: grid; }
.showcase__line {
  --a: clamp(0, calc((var(--p, 1) - var(--s, 0)) * 9), 1);
  --b: clamp(0, calc((var(--p, 1) - var(--n, 9)) * 9), 1);
  display: block; opacity: calc(var(--a) * (1 - .38 * var(--b)));
  translate: 0 calc((1 - var(--a)) * 46px);
  text-shadow: 0 4px 40px rgb(0 0 0 / .45);
}
.showcase__line--accent { --b: 0; color: var(--color-brand-green); }
.showcase__lead { font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: -.01em; max-width: 30ch; text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / .6);
  --a: clamp(0, calc((var(--p, 1) - var(--s, 0)) * 9), 1); opacity: var(--a); translate: 0 calc((1 - var(--a)) * 24px); }
.showcase__cta { --a: clamp(0, calc((var(--p, 1) - var(--s, 0)) * 9), 1); opacity: var(--a); }
@media (prefers-reduced-motion: no-preference) {
  .js .showcase__cta { visibility: hidden; }
  .js .showcase.is-end .showcase__cta { visibility: visible; }
}
@media (max-width: 860px) {
  .js .showcase { height: 260vh; }
  .showcase__frame { --ix: 7vw; --iy: 20svh; }
  .showcase__frame img { object-position: 30% center; }
  .showcase__title { font-size: clamp(2.5rem, 14.5vw, 4.4rem); }
  .showcase__shade { background: linear-gradient(180deg, rgb(10 10 10 / .5), rgb(10 10 10 / .74)); }
}
@media (prefers-reduced-motion: reduce) {
  .js .showcase { height: auto; }
  .showcase__pin { position: relative; height: auto; min-height: min(86svh, 760px); padding-block: 4rem; }
  .showcase__frame { clip-path: none; }
  .showcase__frame img { transform: none; }
  .showcase__line, .showcase__lead, .showcase__cta { opacity: 1; translate: none; visibility: visible; }
}

/* ==========================================================================
   v10 – CATÉGORIES, LIVRAISON, BARRE « COMMANDER » MOBILE
   ========================================================================== */

/* ---------- Catégories à la une ---------- */
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.7rem, 1.6vw, 1.1rem); margin-bottom: 2.2rem; }
.cat { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-black-2);
  transition: transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease); }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.cat__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(10 10 10 / .88)); }
.cat__body { position: absolute; left: 1rem; right: 1rem; bottom: .85rem; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.cat__name { font-weight: 800; font-size: clamp(1.1rem, 2.5vw, 1.7rem); letter-spacing: -.01em; text-transform: uppercase; }
.cat__price { color: var(--color-brand-green); font-weight: 800; font-size: .92rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .cat:hover { transform: translateY(-6px); border-color: rgb(124 255 58 / .6); box-shadow: 0 24px 50px rgb(0 0 0 / .5), 0 0 40px rgb(124 255 58 / .14); }
  .cat:hover img { transform: scale(1.06); }
}
@media (max-width: 640px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat__body { left: .8rem; right: .8rem; flex-direction: column; gap: 0; } }

/* ---------- Nouveauté : livraison bientôt disponible ---------- */
/* étiquette « Nouveau » réutilisée partout (accueil, bandeau, section, menu) */
.tag-new { display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .3rem .75rem; border-radius: var(--radius-pill); background: var(--color-brand-green); color: var(--color-black); font-size: .72rem; font-weight: 800; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; box-shadow: 0 0 22px rgb(124 255 58 / .45); }
.tag-new::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-black); animation: new-pulse 1.6s ease-in-out infinite; }
@keyframes new-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.5); opacity: .4; } }

/* bandeau d'annonce sous l'accueil */
.soon-band { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem .9rem; padding: .95rem 1.25rem; text-align: center; color: var(--color-white); font-size: clamp(.98rem, 2.4vw, 1.15rem);
  background: linear-gradient(90deg, rgb(124 255 58 / .1), rgb(124 255 58 / .24) 50%, rgb(124 255 58 / .1)); border-block: 1px solid rgb(124 255 58 / .4); }
.soon-band strong { font-weight: 800; }
.soon-band__text { color: var(--color-text); }
.soon-band__go { color: var(--color-brand-green); font-size: 1.3rem; font-weight: 800; line-height: 1; transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .soon-band:hover .soon-band__go { transform: translateX(6px); } .soon-band:hover { background: linear-gradient(90deg, rgb(124 255 58 / .16), rgb(124 255 58 / .32) 50%, rgb(124 255 58 / .16)); } }

/* lien Livraison du menu */
.nav__soon { margin-left: .25rem; padding: .1rem .45rem; border-radius: var(--radius-pill); background: var(--color-brand-green); color: var(--color-black); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: .08em; }
@media (min-width: 861px) and (max-width: 1100px) { .nav__soon { display: none; } }

/* section livraison */
.delivery { padding-block: clamp(3rem, 7vw, 5.5rem); }
.delivery__card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  padding: clamp(1.6rem, 4.5vw, 3.6rem); border-radius: 32px; border: 1.5px solid rgb(124 255 58 / .55);
  background: radial-gradient(70% 120% at 0% 0%, rgb(124 255 58 / .2), transparent 60%), linear-gradient(160deg, #121212, var(--color-black-2));
  box-shadow: var(--shadow-soft), 0 0 70px rgb(124 255 58 / .16); }
.delivery__aura { position: absolute; right: -12%; bottom: -35%; width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(124 255 58 / .26), transparent 70%); animation: aura 5s ease-in-out infinite alternate; }
@keyframes aura { from { opacity: .45; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }
.delivery__sticker { position: absolute; top: clamp(.9rem, 2.4vw, 1.6rem); right: clamp(.9rem, 2.4vw, 1.6rem); z-index: 2; display: grid; place-items: center; width: clamp(76px, 10vw, 104px); aspect-ratio: 1; border-radius: 50%;
  background: var(--color-brand-green); color: var(--color-black); font-size: clamp(.7rem, 1.4vw, .92rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 34px rgb(124 255 58 / .45); animation: sticker 3.4s ease-in-out infinite; }
@keyframes sticker { 0%, 100% { transform: rotate(10deg) scale(1); } 50% { transform: rotate(-8deg) scale(1.07); } }
.delivery__main { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.2rem); align-items: center; }
.delivery__icon { position: relative; width: clamp(150px, 21vw, 250px); color: var(--color-brand-green); }
.delivery__ripple { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid rgb(124 255 58 / .5); pointer-events: none; animation: ripple 2.8s ease-out infinite; }
@keyframes ripple { from { transform: scale(.55); opacity: .7; } to { transform: scale(1.3); opacity: 0; } }
.scooter { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 0 14px rgb(124 255 58 / .45)); }
.delivery__copy { display: grid; gap: 1.1rem; justify-items: start; padding-right: clamp(0rem, 7vw, 5rem); }
.delivery__kicker { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; }
.delivery__copy h2 { font-size: clamp(2.5rem, 7.2vw, 5.4rem); line-height: .94; letter-spacing: -.045em; text-transform: uppercase; }
.delivery__lead { max-width: 46ch; color: var(--color-muted); font-size: clamp(1.02rem, 1.8vw, 1.2rem); }
.delivery__lead strong { color: var(--color-white); }
.delivery__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.delivery .btn--lg { text-transform: none; letter-spacing: 0; white-space: normal; text-align: center; }
@media (max-width: 860px) { .delivery__main { grid-template-columns: minmax(0, 1fr); } .delivery__icon { width: 170px; } .delivery__copy { padding-right: 0; } .delivery__actions .btn { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .tag-new::before, .delivery__aura, .delivery__sticker, .delivery__ripple { animation: none !important; } .delivery__ripple { opacity: .35; transform: scale(.9); } }
.hero__fact--soon { border-color: rgb(124 255 58 / .6); background: rgb(124 255 58 / .12); box-shadow: 0 0 28px rgb(124 255 58 / .22); transition: background-color .3s, transform .3s var(--ease); }
.hero__fact--soon strong { color: var(--color-brand-green); }
@media (hover: hover) and (pointer: fine) { .hero__fact--soon:hover { background: rgb(124 255 58 / .22); transform: translateY(-2px); } }
@media (max-width: 520px) { .hero__fact--soon { gap: .5rem; padding-inline: .75rem; font-size: .88rem; } .hero__fact--soon .tag-new { padding: .26rem .6rem; font-size: .66rem; } .soon-band__go { display: none; } }
/* petits écrans : le numéro reste dans le lien, mais le bouton ne passe pas sur deux lignes */
@media (max-width: 520px) { .btn__num { display: none; } }


/* ---------- Barre « Commander » (mobile) ---------- */
.orderbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 56px; padding: .8rem 1.2rem; border-radius: var(--radius-pill); background: var(--color-brand-green); color: var(--color-black);
  font-weight: 800; letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 14px 40px rgb(0 0 0 / .55), 0 0 36px rgb(124 255 58 / .35); }
.orderbar b { font-weight: 800; letter-spacing: .01em; opacity: .78; text-transform: none; }
.orderbar[hidden] { display: none; }
@media (min-width: 861px) { .orderbar { display: none !important; } }
@media (max-width: 860px) {
  .m-ok .nav__links { transition: none; }
  .footer { padding-bottom: calc(1.5rem + 84px + env(safe-area-inset-bottom, 0px)); }
}