/* ============================================================
   MaGi'c SnacK — design system
   noir profond + jaune électrique, typo Anton (display) / Inter (corps)
   ============================================================ */

:root{
  --black:#0a0a0a;
  --black-2:#111111;
  --card-bg:#16160f;
  --card-border:rgba(255,255,255,.08);
  --yellow:#FFD400;
  --yellow-soft:rgba(255,212,0,.16);
  --white:#f5f5f5;
  --gray:#a3a39a;
  --gray-dim:#6f6f68;
  --red:#e23b2e;
  --font-display:'Anton', sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --container:1240px;
  --radius:20px;
  --radius-sm:12px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:400; }
::selection{ background:var(--yellow); color:var(--black); }

.container{ max-width:var(--container); margin:0 auto; padding:0 clamp(20px,5vw,48px); }

/* ============ HEADER ============ */
/* Barre persistante "aujourd'hui on est à ..." au-dessus du header — le
   header est donc décalé de sa hauteur (36px), reporté sur toutes les
   marges/HUD calées pour ne pas passer sous le header (voir plus bas). */
.today-bar{
  position:fixed; top:0; left:0; right:0; z-index:101;
  height:36px;
  display:flex; align-items:center; justify-content:center;
  background:#000; border-bottom:1px solid var(--card-border);
}
.today-bar a{
  display:flex; align-items:center; gap:6px;
  font-size:.76rem; color:var(--gray); letter-spacing:.02em; text-align:center;
  transition:color .2s ease;
}
.today-bar a:hover{ color:var(--yellow); }
.today-bar strong{ color:var(--yellow); font-weight:700; }

.site-header{
  position:fixed; top:36px; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,48px);
  background:transparent;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled{
  background:rgba(10,10,10,.82);
  backdrop-filter:blur(10px);
  padding-top:14px; padding-bottom:14px;
  box-shadow:0 1px 0 var(--card-border);
}
.header-logo{
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:.02em;
  color:var(--white);
}
.header-logo span{ color:var(--yellow); margin-left:.35em; }
.header-nav{ display:flex; align-items:center; gap:32px; }
.header-nav a{
  font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--white); opacity:.85; transition:opacity .2s, color .2s;
}
.header-nav a:hover{ opacity:1; color:var(--yellow); }
.header-insta{ display:flex; align-items:center; opacity:1; color:var(--white); }
.header-insta:hover{ color:var(--yellow); }

.header-call{
  display:flex; align-items:center; gap:8px;
  background:var(--yellow); color:var(--black) !important;
  padding:9px 16px; border-radius:100px;
  font-size:.8rem; font-weight:800; letter-spacing:.02em;
  opacity:1;
  transition:transform .2s ease, box-shadow .2s ease;
}
.header-call:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(255,212,0,.55); color:var(--black); }

@media (max-width:640px){
  .header-nav a:not(.header-insta):not(.header-call){ display:none; }
  .header-nav{ gap:14px; }
  .header-call{ padding:9px; }
  .header-call-text{ display:none; }
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display);
  font-size:.95rem; letter-spacing:.04em; text-transform:uppercase;
  padding:16px 30px; border-radius:100px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  will-change:transform;
}
.btn-primary{ background:var(--yellow); color:var(--black); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 10px 30px -8px var(--yellow-soft), 0 0 0 1px var(--yellow); }
.btn-ghost{ border:1.5px solid rgba(245,245,245,.35); color:var(--white); }
.btn-ghost:hover{ border-color:var(--yellow); color:var(--yellow); transform:translateY(-3px); }

/* ============ SÉQUENCE D'OUVERTURE — 3 ACTES ============ */
.story{ position:relative; background:#020403; }
.act{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:166px 20px 90px;
  overflow:hidden;
  /* Noir uni : les frames/vidéos du burger ont elles-mêmes un fond noir
     plein (pas de dégradé chaud ici), pour que rien ne se distingue entre
     l'image et la section — c'est ce qui les fait vraiment se fondre. */
  background:#020403;
}
.act-bg{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 90px);
  mask-image:radial-gradient(ellipse at 50% 40%, black 0%, transparent 72%);
  pointer-events:none;
}
.act-title{
  font-family:var(--font-display); color:var(--white);
  font-size:clamp(2rem,4vw,3rem); line-height:1; margin:14px 0 24px;
}

/* ---- HUD "caméra de tournage", réutilisé sur les 3 actes ---- */
/* Le header du site est fixed par-dessus (~80px de haut) : tout le HUD du
   haut est décalé sous cette barre pour ne jamais s'y superposer. */
.hud{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.hud-corner{ position:absolute; width:26px; height:26px; border:1.5px solid rgba(255,255,255,.32); }
.hud-corner-tl{ top:132px; left:26px; border-right:none; border-bottom:none; }
.hud-corner-tr{ top:132px; right:26px; border-left:none; border-bottom:none; }
.hud-corner-bl{ bottom:96px; left:26px; border-right:none; border-top:none; }
.hud-corner-br{ bottom:96px; right:26px; border-left:none; border-top:none; }
.hud-rec{
  position:absolute; top:132px; left:66px;
  display:flex; align-items:center; gap:8px;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75);
  font-variant-numeric:tabular-nums;
}
.hud-rec-dot{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 8px rgba(226,59,46,.8); animation:recBlink 1.4s ease-in-out infinite;
}
@keyframes recBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.hud-camspecs{
  position:absolute; top:132px; right:66px;
  font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.hud-vertical{
  position:absolute; top:50%; right:10px; transform:translateY(-50%) rotate(90deg);
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.3);
  white-space:nowrap;
}
.hud-scrubbar{ position:absolute; left:26px; right:26px; bottom:26px; display:flex; flex-direction:column; gap:8px; }
.hud-scrubbar-track{ position:relative; height:2px; background:rgba(255,255,255,.15); }
.hud-scrubbar-fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--yellow); box-shadow:0 0 8px rgba(255,212,0,.6);
}
.hud-meta{
  display:flex; gap:20px; flex-wrap:wrap;
  font-size:.63rem; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.4);
  font-variant-numeric:tabular-nums;
}
@media (max-width:900px){
  .hud-camspecs, .hud-vertical, .hud-corner{ display:none; }
  .hud-rec{ top:106px; left:20px; }
  .hud-scrubbar{ left:16px; right:16px; bottom:16px; }
}

/* ---- colonne texte (gauche) ---- */
.hero-text{ text-align:left; position:relative; z-index:2; }
.hero-kicker{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:20px;
}
.hero-title{
  font-size:clamp(3.2rem, 6.6vw, 6.2rem);
  line-height:.94;
  letter-spacing:.01em;
  color:var(--yellow);
  text-shadow:0 0 50px rgba(255,212,0,.35);
  margin:0 0 22px;
}
.hero-title .title-line{ display:block; overflow:hidden; }
.hero-title .char{ display:inline-block; will-change:transform,opacity; }
.hero-title .char.is-space{ width:.28em; }

.hero-subtitle{
  font-size:clamp(1.05rem,1.6vw,1.4rem);
  color:var(--gray);
  max-width:38ch;
  margin:0 0 38px;
}
.hero-cta-row{ display:flex; gap:18px; flex-wrap:wrap; }

/* ---- pile visuelle : une image dont la source est échangée frame par
   frame (Images/hero-frames/) selon le scroll ---- */
.hero-grid{
  position:relative; z-index:2;
  width:100%; max-width:1320px;
  display:grid; grid-template-columns:1fr 1.05fr;
  align-items:center; gap:clamp(24px,5vw,60px);
}
.frame-stage-wrap{ position:relative; z-index:2; width:100%; display:flex; justify-content:center; }
.frame-stage{
  position:relative;
  width:min(100%, 640px);
  aspect-ratio:900/675;
}
.frame-stage img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  /* Les images/vidéos ont un fond noir uni : un dégradé radial en masque
     estompe les coins du cadre (toujours du noir plein, jamais le burger,
     qui reste centré) vers la transparence, pour laisser voir le fond du
     hero en dessous au lieu d'un rectangle net. (mix-blend-mode ne peut
     pas être utilisé ici : GSAP anime .frame-stage via `transform`, ce qui
     crée un nouveau contexte d'empilement et coupe le mélange avec le fond
     de la page — un masque, lui, s'applique sans ce problème.) */
  mask-image: radial-gradient(ellipse 62% 98% at 50% 50%, black 42%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 62% 98% at 50% 50%, black 42%, transparent 100%);
}

.scroll-indicator{
  position:absolute; bottom:64px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  z-index:2;
}
.scroll-line{
  width:1px; height:46px;
  background:linear-gradient(to bottom, var(--yellow), transparent);
  position:relative; overflow:hidden;
}
.scroll-line::after{
  content:""; position:absolute; left:0; top:-40%; width:100%; height:40%;
  background:var(--yellow);
  animation:scrollDrip 1.8s ease-in-out infinite;
}
@keyframes scrollDrip{
  0%{ top:-40%; } 100%{ top:100%; }
}
.scroll-text{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gray-dim);
}

@media (max-width:900px){
  /* justify-content:flex-start plutôt que center : sur mobile, le contenu
     (surtout actes 2/3) peut dépasser 100svh — centré, le haut se ferait
     recadrer sous le header ; aligné en haut avec le padding, il reste visible. */
  .act{ padding-top:146px; padding-bottom:50px; justify-content:flex-start; }
  .hero-grid{ grid-template-columns:1fr; text-align:center; gap:14px; }
  .hero-text{ text-align:center; order:2; }
  .hero-kicker{ margin-bottom:10px; }
  .hero-subtitle{ margin-bottom:20px; }
  .hero-cta-row{ justify-content:center; }
  .frame-stage-wrap{ order:1; margin-bottom:12px; }
  .frame-stage{ width:min(62vw, 260px); }
}
@media (max-width:480px){
  .act[data-act="1"]{ padding-top:128px; }
  .hero-title{ margin-bottom:14px; }
}

/* ============ ACTE 2 — SPECS ============ */
.specs-grid{
  position:relative; z-index:2;
  width:100%; max-width:1320px;
  display:grid; grid-template-columns:1.05fr .95fr;
  align-items:center; gap:clamp(24px,5vw,60px);
}
.specs-text{ text-align:left; }
.specs-counter{
  font-family:var(--font-display); color:var(--yellow);
  font-size:clamp(3.4rem,7vw,5.6rem); line-height:1;
  margin-bottom:30px;
  text-shadow:0 0 40px rgba(255,212,0,.3);
}
.specs-list{ display:flex; flex-direction:column; border-top:1px solid var(--card-border); max-width:440px; }
.specs-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:14px 2px; border-bottom:1px solid var(--card-border); font-size:.92rem;
}
.specs-list li span{ color:var(--gray-dim); text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; }
.specs-list li strong{ color:var(--white); font-weight:600; text-align:right; }

/* steack-cuisson.mp4 est carrée (800×800), contrairement aux frames du hero */
#act-specs .frame-stage{ width:min(100%, 560px); aspect-ratio:1/1; }

@media (max-width:900px){
  /* Le contenu de l'acte 2 est plus long que les autres (titre + compteur +
     5 lignes de specs + image) : resserré pour ne pas dépasser la hauteur
     réellement dispo sur un vrai mobile (barre d'adresse + barre système en
     plus de la fenêtre CSS) — un test en fenêtre de navigateur seule ne
     suffit pas à repérer ce dépassement, il faut resserrer avec une bonne
     marge de sécurité. */
  .act[data-act="2"]{ padding-top:120px; padding-bottom:10px; }
  .specs-grid{ grid-template-columns:1fr; text-align:center; gap:8px; }
  .specs-text{ text-align:center; }
  #act-specs .hero-kicker{ margin-bottom:6px; }
  #act-specs .act-title{ margin:4px 0 6px; }
  .specs-counter{ margin-bottom:4px; }
  .specs-list{ margin:0 auto; text-align:left; }
  .specs-list li{ padding:2px 2px; }
  #act-specs .frame-stage{ width:min(55vw, 210px); }
}

/* ============ ACTE 3 — INGRÉDIENTS ============ */
/* Padding réduit + burger dimensionné en hauteur de viewport (et non en
   largeur fixe) : sur une fenêtre de navigateur réelle (barre d'adresse,
   onglets, barre des tâches ⇒ moins de hauteur utile qu'un plein écran de
   test), le burger complet + les étiquettes doivent tenir dans un seul
   écran dès l'arrivée sur la section, sans avoir à scroller pour le voir
   en entier — le scroll ne sert qu'à faire apparaître les étiquettes. */
#act-callouts{ padding-top:136px; padding-bottom:60px; }
.callouts-head{ position:relative; z-index:2; text-align:center; max-width:640px; margin:0 auto 24px; }
#act-callouts .act-title{ margin:10px 0 0; }
.callouts-stage{ position:relative; }
/* le-magic-detail.png est en portrait (556×887), contrairement au 4/3 du
   hero : aspect-ratio dédiée, toujours dimensionnée en hauteur de viewport. */
#act-callouts .frame-stage{
  width:auto;
  height:min(50vh, 460px);
  aspect-ratio:556/887;
}
.callout{
  position:absolute;
  display:flex; align-items:center; gap:10px;
  opacity:0;
}
/* Ancré par le bord opposé à l'étiquette (right pour callout-left, left
   pour callout-right) : le point reste collé à 2% du bord de l'image et
   toute la ligne + le texte poussent VERS L'EXTÉRIEUR (hors de l'image,
   dans la marge noire) au lieu de s'étaler par-dessus le burger. */
.callout-left{ right:98%; }
.callout-right{ left:98%; }
.callout-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--yellow); box-shadow:0 0 8px rgba(255,212,0,.7);
}
.callout-line{ display:block; height:1px; width:56px; background:rgba(255,255,255,.35); }
.callout-label{
  font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--white);
  white-space:nowrap; text-shadow:0 2px 10px rgba(0,0,0,.85);
}
@media (max-width:900px){
  /* Plus large sur mobile : la pile a plus de hauteur, donc plus d'espace
     vertical entre les étiquettes (positionnées en %), moins de risque de
     chevauchement entre deux lignes voisines. */
  #act-callouts .frame-stage{ width:auto; height:min(40vh, 380px); }
  .callout-line{ width:18px; }
  .callout-label{ font-size:.62rem; }
}
@media (max-width:480px){
  /* Sur très petit écran, l'image reste plus étroite que ce qu'il faut
     pour loger les étiquettes les plus longues à côté sans déborder de la
     fenêtre : on réduit encore l'image, le trait et le texte, et les
     libellés peuvent revenir à la ligne plutôt que dépasser de l'écran. */
  #act-callouts{ padding-left:6px; padding-right:6px; }
  #act-callouts .frame-stage{ height:min(30vh, 260px); }
  .callout-line{ width:8px; }
  .callout-label{ font-size:.56rem; white-space:normal; max-width:22vw; line-height:1.2; }
  .callout-left .callout-label{ text-align:right; }
  .callout-right .callout-label{ text-align:left; }
}

/* ============ SECTIONS (shared) ============ */
.section{ position:relative; padding:110px clamp(20px,5vw,48px); max-width:var(--container); margin:0 auto; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.section-kicker{
  display:inline-block; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:14px; font-weight:700;
}
.section-title{ font-size:clamp(2.2rem,5vw,3.4rem); color:var(--white); line-height:1; }
@media (max-width:640px){
  /* Les 110px de marge haut/bas sont pensés pour desktop : sur mobile, ça
     laisse de gros blocs vides entre chaque section. Resserré. */
  .section{ padding:60px 20px; }
  .section-head{ margin-bottom:36px; }
}
.section-note{ color:var(--gray); margin-top:14px; font-size:.98rem; }
.section-note span{ color:var(--yellow); }

.reveal-up{ opacity:0; transform:translateY(44px); }

/* ============ BURGERS GRID ============ */
.burgers-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px,1fr));
  gap:26px;
}
/* Carte plein cadre : la photo occupe toute la carte, le texte flotte sur
   un dégradé sombre en bas — le burger reste l'élément principal, visible
   en entier, au lieu d'être écrasé dans une vignette 4/3 coupée. */
.burger-card{
  position:relative;
  aspect-ratio:3/4;
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  overflow:hidden;
  background:#000;
  cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.burger-card:hover,
.burger-card:focus-visible{
  transform:translateY(-8px);
  border-color:rgba(255,212,0,.55);
  box-shadow:0 28px 60px -18px rgba(255,212,0,.32);
}
.burger-card:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }
.burger-card-expand{
  position:absolute; z-index:2; top:16px; right:16px;
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--black); background:var(--yellow);
  padding:7px 13px; border-radius:100px;
  opacity:0; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.burger-card:hover .burger-card-expand,
.burger-card:focus-visible .burger-card-expand{ opacity:1; transform:translateY(0); }
.burger-card-media{ position:absolute; inset:0; z-index:0; }
.burger-card-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  transition:transform .7s ease;
}
.burger-card:hover .burger-card-media img{ transform:scale(1.08); }
/* le-salentino-detail.png porte une fine bande de couleur parasite sur son
   bord droit (artefact de génération) : on zoome depuis la gauche pour la
   sortir du cadre. */
.burger-card-media img.crop-right-edge{ transform:scale(1.08); transform-origin:0% 50%; }
.burger-card:hover .burger-card-media img.crop-right-edge{ transform:scale(1.15); transform-origin:0% 50%; }
.burger-card-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(8,8,6,.98) 0%,
    rgba(8,8,6,.92) 16%,
    rgba(8,8,6,.55) 38%,
    rgba(8,8,6,0) 65%);
  pointer-events:none;
}
.burger-card-body{
  position:relative; z-index:1;
  height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px 22px 24px;
}
.burger-card-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.burger-card-top h3{ font-size:1.4rem; color:var(--white); letter-spacing:.01em; text-shadow:0 2px 12px rgba(0,0,0,.8); }
.burger-price{ text-align:right; white-space:nowrap; }
.burger-price span{ font-family:var(--font-display); color:var(--yellow); font-size:1.2rem; text-shadow:0 2px 12px rgba(0,0,0,.8); }
.burger-price small{ display:block; color:var(--gray-dim); font-size:.68rem; letter-spacing:.03em; }
.burger-desc{ color:var(--gray); font-size:.86rem; line-height:1.55; margin:0; }

/* ============ GARNITURES & SAUCES ============ */
/* Fond texturé discret (même motif que le hero) + halo jaune, pour que la
   section ne soit pas juste un mur de pastilles sur fond plat. */
.garnitures-section::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 90px);
  mask-image:radial-gradient(ellipse at 50% 30%, black 0%, transparent 70%);
  pointer-events:none;
}
.garnitures-section::after{
  content:"";
  position:absolute; left:50%; top:38%; width:min(60vw,640px); height:min(60vw,640px);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,212,0,.10) 0%, rgba(255,212,0,0) 70%);
  filter:blur(20px);
  pointer-events:none; z-index:0;
}
.garnitures-section .section-head,
.garnitures-section .garnitures-grid{ position:relative; z-index:1; }
.garnitures-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.garniture-col h3{
  font-size:1.1rem; text-transform:uppercase; letter-spacing:.08em; color:var(--yellow);
  margin-bottom:20px; font-family:var(--font-body); font-weight:800;
}
.pill-list{ display:flex; flex-wrap:wrap; gap:12px; }
.pill-list li{
  padding:11px 20px; border-radius:100px; border:1px solid var(--card-border);
  background:var(--card-bg); font-size:.9rem; color:var(--white);
  display:flex; align-items:center; gap:9px;
  transition:transform .2s ease, border-color .2s ease;
}
.pill-list li:hover{ transform:translateY(-2px); border-color:rgba(255,212,0,.4); }
.pill-icon{ font-size:1rem; line-height:1; }
.pill-list li.badge-maison{ border-color:var(--yellow); background:var(--yellow-soft); font-weight:700; }
.pill-list li.badge-maison .maison-tag{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--black);
  background:var(--yellow); padding:3px 8px; border-radius:100px; font-weight:800;
}

@media (max-width:720px){
  .garnitures-grid{ grid-template-columns:1fr; gap:44px; }
}

/* ============ BOISSONS & FRITES ============ */
.boissons-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:32px; align-items:stretch; }
.frites-card{
  background:linear-gradient(155deg, var(--yellow) 0%, #e6bd00 100%);
  color:var(--black);
  border-radius:var(--radius);
  padding:34px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  position:relative; overflow:hidden;
  min-height:220px;
}
.frites-tag{
  position:absolute; top:24px; left:24px;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:800;
  background:rgba(10,10,10,.12); padding:6px 12px; border-radius:100px;
}
.frites-photo{
  position:absolute; top:-6px; right:-8px;
  width:min(58%, 230px); height:auto;
  transform:rotate(9deg);
  filter:drop-shadow(0 14px 20px rgba(10,10,10,.35));
  pointer-events:none;
}
.frites-card h3{ position:relative; font-size:1.5rem; font-family:var(--font-body); font-weight:800; }
.frites-price{ position:relative; font-family:var(--font-display); font-size:2.6rem; }

.boissons-grid{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--card-border); }
.boissons-grid li{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px; border-bottom:1px solid var(--card-border);
  font-size:.98rem;
}
.boissons-grid li > span{ display:flex; align-items:center; gap:11px; }
.boissons-grid li strong{ color:var(--yellow); font-family:var(--font-display); font-weight:400; font-size:1.1rem; }

@media (max-width:720px){
  .boissons-wrap{ grid-template-columns:1fr; }
}

/* ============ NOS PRODUITS FRAIS & LOCAUX ============ */
.produits-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:26px;
  margin-bottom:48px;
}
.produit-card{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius);
  overflow:hidden;
}
.produit-img-placeholder{
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px);
  border-bottom:1px dashed var(--card-border);
}
.produit-img-placeholder span{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-dim);
}
.produit-img-placeholder.produit-img-real{
  background:#000; border-bottom:1px solid var(--card-border); overflow:hidden;
}
.produit-img-real img{ width:100%; height:100%; object-fit:cover; }
.produit-body{ padding:24px 22px 28px; text-align:center; }
.produit-icon{ display:block; font-size:1.8rem; margin-bottom:14px; }
.produit-body h3{ font-size:1.1rem; color:var(--white); margin-bottom:6px; }
.produit-body p{ color:var(--gray); font-size:.88rem; margin:0; }

.contact-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius);
  padding:28px clamp(22px,4vw,40px);
}
.contact-info{ display:flex; flex-direction:column; gap:10px; }
.contact-line{ color:var(--white); font-size:1rem; transition:color .2s ease; }
.contact-line:hover{ color:var(--yellow); }
.contact-buttons{ display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width:640px){
  .contact-strip{ flex-direction:column; align-items:stretch; text-align:center; }
  .contact-info{ align-items:center; }
  .contact-buttons{ justify-content:center; }
}

/* ============ EMPLACEMENTS ============ */
.emplacements-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; margin-bottom:52px;
}
.jour-card{
  position:relative;
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-sm);
  padding:26px 18px 22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.jour-card:hover{
  border-color:rgba(255,212,0,.45);
  box-shadow:0 16px 34px -18px rgba(255,212,0,.3);
  transform:translateY(-3px);
}
.jour-pin{ font-size:1.4rem; margin-bottom:6px; will-change:transform; }
.jour-name{ font-family:var(--font-display); color:var(--white); font-size:1.05rem; letter-spacing:.02em; }
.jour-lieu{ color:var(--yellow); font-weight:700; font-size:.86rem; }
.jour-addr{ color:var(--gray-dim); font-size:.76rem; line-height:1.4; }

.jour-card.is-today{
  border-color:var(--yellow);
  box-shadow:0 0 0 1px var(--yellow), 0 20px 40px -16px rgba(255,212,0,.35);
  transform:translateY(-4px);
}
.jour-card.is-today::after{
  content:"Aujourd'hui";
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--yellow); color:var(--black);
  font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 12px; border-radius:100px; white-space:nowrap;
}

@media (max-width:900px){
  .emplacements-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px){
  .emplacements-grid{ grid-template-columns:1fr; }
}

/* ============ AVIS CLIENTS ============ */
.avis-card{
  max-width:640px; margin:0 auto;
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius);
  padding:48px clamp(24px,5vw,56px);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.avis-stars{ display:flex; gap:6px; color:var(--yellow); }
.avis-text{ color:var(--gray); font-size:1.02rem; line-height:1.65; max-width:46ch; margin:0; }
.avis-btn{ display:inline-flex; align-items:center; gap:10px; }

/* ============ FOOTER ============ */
.site-footer{
  text-align:center;
  padding:90px 20px 46px;
  background:var(--black-2);
  border-top:1px solid var(--card-border);
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.footer-logo{ font-family:var(--font-display); font-size:1.6rem; color:var(--white); }
.footer-logo span{ color:var(--yellow); margin-left:.3em; }
.footer-tagline{ color:var(--gray); max-width:38ch; margin:0; }
.footer-insta{ margin-top:6px; }
.footer-copy{ color:var(--gray-dim); font-size:.78rem; margin-top:30px; }

/* ============ MODAL "VOIR EN DÉTAIL" ============ */
body.modal-open{ overflow:hidden; }
.burger-modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  visibility:hidden; opacity:0;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.burger-modal.is-open{
  visibility:visible; opacity:1;
  transition:opacity .3s ease, visibility 0s linear 0s;
}
.burger-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(6,6,5,.9);
  backdrop-filter:blur(8px);
}
.burger-modal-dialog{
  position:relative; z-index:1;
  width:100%; max-width:940px; max-height:88vh;
  display:grid; grid-template-columns:1.05fr 1fr;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:24px;
  overflow:hidden;
  will-change:transform,opacity;
}
.burger-modal-close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:var(--white);
  border:1px solid rgba(255,255,255,.16);
  font-size:1.6rem; line-height:1; cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .3s ease;
}
.burger-modal-close:hover{ background:var(--yellow); color:var(--black); transform:rotate(90deg); }
.burger-modal-media{
  position:relative;
  background:radial-gradient(ellipse at 50% 40%, #1a1712 0%, #000 70%);
  display:flex; align-items:center; justify-content:center;
  padding:32px;
  overflow:hidden;
  min-height:280px;
}
.burger-modal-media img{
  max-width:100%; max-height:min(60vh, 620px);
  width:auto; height:auto;
  object-fit:contain;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));
}
.burger-modal-info{
  padding:40px 40px 40px 8px;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  overflow-y:auto;
}
.burger-modal-info h3{ font-family:var(--font-display); font-size:2.1rem; color:var(--white); line-height:1; }
.burger-modal-price{ font-family:var(--font-display); color:var(--yellow); font-size:1.5rem; }
.burger-modal-price small{ display:inline-block; margin-left:.5em; color:var(--gray-dim); font-family:var(--font-body); font-size:.72rem; letter-spacing:.03em; }
.burger-modal-info p{ color:var(--gray); font-size:.98rem; line-height:1.6; margin:0; }

@media (max-width:760px){
  .burger-modal{ padding:14px; }
  .burger-modal-dialog{ grid-template-columns:1fr; max-height:92vh; overflow-y:auto; }
  .burger-modal-media{ padding:24px; min-height:220px; }
  .burger-modal-info{ padding:8px 24px 28px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}