/* B-FOOD — landing. Variante « Crème claire » du design figée dans :root.
   Pour changer d'ambiance, ne toucher qu'au bloc de variables --bf-* ci-dessous. */

:root{
  /* ---- Ambiance (thème « Crème claire ») ---- */
  --bf-bg:#fff7ec;
  --bf-bg-alt:#f7ecd9;
  --bf-panel:#ffffff;
  --bf-tile:#f2e5d2;
  --bf-chip:#f7ecd9;
  --bf-ink:#1c1917;
  --bf-muted:#6b625a;
  --bf-heroword:#f2e5d2;
  --bf-panel-rule:1px solid #e3ded8;

  --bf-accent:#ffc629;        /* stickers */
  --bf-accent-fg:#1c1917;
  --bf-accent2:#ffc629;       /* offre, aplats moutarde */
  --bf-accent2-fg:#1c1917;
  --bf-accent2-text:#1c1917;  /* texte accent lisible sur le fond */
  --bf-cta:#e23d28;
  --bf-cta-hover:#c22f1d;
  --bf-cta-fg:#ffffff;

  /* ---- Style ---- */
  --bf-radius-card:14px;
  --bf-radius-panel:20px;
  --bf-radius-btn:12px;
  --bf-radius-sticker:0px;
  --bf-tilt:4deg;
  --bf-hard-shadow:10px 10px 0 #000;
  --bf-hard-shadow-sm:6px 6px 0 #000;
  --bf-header-rule:2px solid #000;

  --bf-label-bg:#000000;
  --bf-label-fg:#ffffff;
  --bf-label-rule:none;

  --bf-ticket-bg:#ffffff;
  --bf-ticket-fg:#1c1917;
  --bf-ticket-shadow:0 8px 20px rgba(0,0,0,.35);

  /* ---- Carte ---- */
  --bf-col:250px;       /* largeur mini d'une carte burger */
  --bf-col-sm:230px;    /* largeur mini d'une carte plat */
  --bf-aspect:1;
  --bf-aspect-sm:1;

  /* ---- Layout ---- */
  --bf-container:1100px;
  --bf-gutter:clamp(16px,4vw,24px);
  --bf-footer-pad:110px; /* laisse la place à la barre mobile fixe */
  --bf-wave-h:clamp(56px,7vw,110px);

  /* ---- Photos ---- */
  --bf-img-scale:1;      /* zoom de base par défaut ; chaque .dish peut le surcharger via --dish-scale */
  --bf-photo-zoom:1.15;  /* zoom supplémentaire au survol */
}

/* ---- Reset & base ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--bf-bg);
  color:var(--bf-ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:clip;
}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
a:active{transform:scale(var(--press-scale))}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--bf-ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.container{max-width:var(--bf-container);margin:0 auto}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Logo mark : pastille rouge + trois barres (burger) ---- */
.bf-mark{
  --mark-size:30px;
  width:var(--mark-size);height:var(--mark-size);flex:none;
  border-radius:var(--radius-full);
  background:var(--bf-cta);
  display:flex;flex-direction:column;justify-content:center;
  gap:calc(var(--mark-size) * .07);
  padding:calc(var(--mark-size) * .235);
}
.bf-mark span{display:block;border-radius:1px}
.bf-mark span:nth-child(1){height:calc(var(--mark-size) * .17);border-radius:999px 999px 1px 1px;background:#fff}
.bf-mark span:nth-child(2){height:calc(var(--mark-size) * .1);background:var(--bf-accent2)}
.bf-mark span:nth-child(3){height:calc(var(--mark-size) * .135);border-radius:1px 1px 999px 999px;background:#fff}

.bf-wordmark{font-weight:700;letter-spacing:-0.04em;color:var(--bf-ink)}

/* ---- Header ---- */
.site-header{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:12px clamp(14px,4vw,24px);
  background:var(--bf-panel);
  border-bottom:var(--bf-header-rule);
}
.site-header__brand{display:flex;align-items:center;gap:10px}
.site-header__brand .bf-wordmark{font-size:20px}
.site-nav{display:flex;align-items:center;gap:clamp(8px,2.5vw,14px);flex-wrap:wrap;justify-content:flex-end}
.site-nav__link{font-size:14px;font-weight:500;color:var(--bf-muted);padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
.site-nav__link:hover{color:var(--bf-cta)}

/* ---- Boutons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
  padding:11px 16px;min-height:44px;
  border-radius:var(--bf-radius-btn);
}
.btn--cta{background:var(--bf-cta);color:var(--bf-cta-fg)}
.btn--cta:hover{background:var(--bf-cta-hover);color:var(--bf-cta-fg)}
.btn--accent{background:var(--moutarde-500);color:var(--bf-accent2-fg)}
.btn--accent:hover{background:var(--moutarde-600);color:var(--bf-accent2-fg)}

/* ---- Hero ---- */
/* Le hero est une « piste » de 260vh : l'écran reste collé (sticky) pendant qu'on la
   parcourt, et la vidéo avance proportionnellement au scroll. */
.hero{
  position:relative;
  height:260vh;height:260svh;
  background:var(--bf-bg);
}
.hero__sticky{
  position:sticky;top:var(--bf-header-h,0px);
  height:100vh;height:100svh;height:calc(100svh - var(--bf-header-h,0px));
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  padding:72px 20px;
}
.hero__hint{
  position:absolute;left:0;right:0;bottom:calc(var(--bf-wave-h) + 12px);z-index:2;
  text-align:center;
  font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--bf-muted);
  transition:opacity var(--dur-slow) var(--ease-standard);
}
.hero.is-scrolled .hero__hint{opacity:0}
.hero__word{
  position:absolute;inset:0;
  display:none; /* mot géant en fond — désactivé dans le design retenu (showHeroWord=false) */
  align-items:center;justify-content:center;
  font-size:28vw;font-weight:700;line-height:1;letter-spacing:-0.05em;
  color:var(--bf-heroword);
  user-select:none;pointer-events:none;
  animation:bfDrift 14s ease-in-out infinite alternate;
}
/* Vidéo de fond : le burger s'éclate et libère le centre. Fond blanc de la vidéo fondu
   dans la crème via multiply. Lue une seule fois, figée sur la dernière image. */
.hero__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.hero__inner{
  position:relative;z-index:2;text-align:center;padding:0 20px;
  opacity:0;transform:scale(.92);
  transition:opacity var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-standard);
}
.hero.is-revealed .hero__inner{opacity:1;transform:none}
/* Sans JS ou mouvement réduit : logo visible d'emblée */
.no-js .hero__inner{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
  .hero__inner{opacity:1;transform:none}
}
.hero__brand{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,20px)}
.hero__brand .bf-mark{--mark-size:clamp(40px,6vw,72px)}
.hero__title{
  font-size:clamp(34px,6vw,72px);font-weight:700;white-space:nowrap;
  letter-spacing:-0.04em;line-height:1;
  color:var(--bf-ink);
}
.hero__tagline{
  margin-top:14px;
  font-size:12px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--bf-accent2-text);
}

/* Vague de transition entre deux bandes */
.wave{
  position:absolute;left:0;right:0;bottom:-1px;
  width:100%;height:var(--bf-wave-h);
  display:block;pointer-events:none;
}

/* ---- Étiquettes (bloc noir) ---- */
.label{
  display:inline-block;
  background:var(--bf-label-bg);color:var(--bf-label-fg);
  padding:6px 16px;
  transform:rotate(calc(var(--bf-tilt) * -0.75));
  border-bottom:var(--bf-label-rule);
}
.label--eyebrow{font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase}
.label--title{padding:6px 18px;font-size:clamp(26px,4vw,38px);font-weight:700;letter-spacing:-0.03em;line-height:1.2}
.label--flat{transform:none;padding:5px 14px}

/* ---- Concept ---- */
.concept{
  position:relative;overflow:hidden;
  padding:clamp(48px,9vw,72px) var(--bf-gutter) calc(clamp(48px,9vw,72px) + var(--bf-wave-h));
  background:var(--bf-bg-alt);
}
.concept__title{
  margin-top:22px;
  font-size:clamp(30px,5.5vw,56px);font-weight:700;
  letter-spacing:-1.6px;line-height:1.02;
  white-space:pre-line;color:var(--bf-ink);
}
.concept__lead{margin-top:18px;max-width:620px;font-size:17px;line-height:1.6;color:var(--bf-muted)}
.steps{
  list-style:none;padding:0;
  margin:44px 0 0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
}
.step{
  background:var(--bf-panel);
  border-radius:var(--bf-radius-card);
  padding:clamp(20px,4.5vw,26px);
  border:var(--bf-panel-rule);
}
.step__num{font-size:13px;font-weight:700;color:var(--bf-accent2-text)}
.step__title{font-size:26px;font-weight:700;margin-top:6px;letter-spacing:-0.5px}
.step__text{margin-top:8px;color:var(--bf-muted);font-size:15px;line-height:1.55}

/* ---- Carte (burgers / plats) ---- */
.menu{padding:clamp(52px,9vw,80px) var(--bf-gutter) 40px}
.menu--plats{padding:clamp(40px,8vw,60px) var(--bf-gutter) clamp(52px,9vw,80px)}
.menu__head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.menu__prices{font-size:14px;font-weight:600;color:var(--bf-muted);flex:0 1 auto}
.menu__grid{
  list-style:none;padding:0;
  display:grid;gap:26px;margin:40px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(var(--bf-col),100%),1fr));
}
.menu--plats .menu__grid{grid-template-columns:repeat(auto-fit,minmax(min(var(--bf-col-sm),100%),1fr))}

.dish{position:relative;transition:transform var(--dur-base) var(--ease-standard)}
.dish__frame{
  position:relative;
  aspect-ratio:var(--bf-aspect);
  border-radius:var(--bf-radius-card);
  overflow:hidden;background:#fff;
}
.menu--plats .dish__frame{aspect-ratio:var(--bf-aspect-sm)}
.dish__frame img{
  width:100%;height:100%;object-fit:contain;
  transform:scale(var(--dish-scale,var(--bf-img-scale)));
  transition:transform var(--dur-slow) var(--ease-standard);
}
/* Zoom de base par photo (valeurs validées sur maquette) */
.dish[data-zoom="burgers"]{--dish-scale:1.40}
.dish[data-zoom="bcrousty"]{--dish-scale:0.85}
.dish[data-zoom="pates-curry"]{--dish-scale:0.95}
.dish[data-zoom="riz-echalote"]{--dish-scale:1.55}
.dish[data-zoom="gratine"]{--dish-scale:1.15}
/* Placeholder tant que la photo n'est pas déposée dans images/ */
.dish__frame::after{
  content:attr(data-label);
  position:absolute;inset:0;
  display:none;align-items:center;justify-content:center;
  padding:16px;text-align:center;
  background:var(--bf-tile);color:var(--bf-muted);
  font-size:13px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
}
.dish__frame.is-missing img{visibility:hidden}
.dish__frame.is-missing::after{display:flex}

.sticker{
  position:absolute;top:14px;left:-8px;z-index:2;
  background:var(--bf-accent);color:var(--bf-accent-fg);
  padding:7px 14px;
  font-weight:700;font-size:17px;letter-spacing:-0.02em;line-height:1.25;
  max-width:calc(100% + 8px);
  transform:rotate(calc(var(--bf-tilt) * -1));
  box-shadow:var(--bf-hard-shadow-sm);
  border-radius:var(--bf-radius-sticker);
}
.menu--plats .sticker{top:12px;padding:6px 13px;font-size:clamp(13px,3.4vw,16px);letter-spacing:0}
.sticker--frais{background:var(--frais-500);color:#fff}
.sticker--moutarde{background:var(--moutarde-500);color:var(--ink-900)}

.ticket{
  position:relative;z-index:2;display:table;
  margin:-14px 10px 0 auto;
  background:var(--bf-ticket-bg);color:var(--bf-ticket-fg);
  padding:9px 15px;border-radius:8px;
  font-weight:700;font-size:14px;
  box-shadow:var(--bf-ticket-shadow);
  transition:transform var(--dur-base) var(--ease-standard);
}
.menu--plats .ticket{margin:-14px 8px 0 auto;padding:7px 13px;font-size:13px}
.dish__desc{margin-top:14px;font-size:14px;line-height:1.5;color:var(--bf-muted)}
.menu--plats .dish__desc{margin-top:12px}

/* Survol : lift de la carte + zoom photo + léger scale du ticket (souris uniquement) */
@media (hover:hover){
  .dish:hover{transform:translateY(-6px)}
  .dish:hover .dish__frame img{transform:scale(calc(var(--dish-scale,var(--bf-img-scale)) * var(--bf-photo-zoom)))}
  .dish:hover .ticket{transform:scale(1.04)}
}

/* ---- Offre ---- */
.offer{padding:0 var(--bf-gutter) clamp(52px,9vw,80px)}
.offer__panel{
  background:var(--bf-accent2);color:var(--bf-accent2-fg);
  border-radius:var(--bf-radius-panel);overflow:hidden;
  padding:clamp(28px,4vw,48px);
}
.offer__tag{
  display:inline-block;background:var(--ink-900);color:#fff;
  padding:5px 14px;font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
}
.offer__title{font-size:clamp(28px,4.4vw,40px);font-weight:700;line-height:1.1;margin-top:16px;letter-spacing:-1.2px}
.offer__title sup{font-size:0.45em;font-weight:600;line-height:0}
.offer__price{margin-top:14px;font-size:clamp(48px,8vw,72px);font-weight:700;line-height:1}
.offer__note{margin-top:14px;font-size:15px;line-height:1.55}

/* ---- Livraison ---- */
.delivery{padding:0 var(--bf-gutter) clamp(52px,9vw,80px)}
.delivery__grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.panel{
  background:var(--bf-panel);
  border-radius:var(--bf-radius-panel);
  padding:clamp(22px,5vw,36px);
  border:var(--bf-panel-rule);
}
.panel__eyebrow{font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--bf-muted)}
.panel__big{font-size:clamp(34px,5vw,46px);font-weight:700;letter-spacing:-1.4px;margin-top:10px;line-height:1.1}
.panel__sub{margin-top:4px;font-size:16px;color:var(--bf-muted)}
.chips{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.chip{
  background:var(--bf-chip);border-radius:var(--radius-full);
  padding:9px 15px;font-size:13px;font-weight:600;color:var(--bf-ink);
}

/* ---- Contact ---- */
.contact{padding:0 var(--bf-gutter) 40px}
.contact__panel{padding:clamp(30px,5vw,56px)}
.contact__title{
  margin-top:18px;
  font-size:clamp(28px,4.6vw,46px);font-weight:700;
  letter-spacing:-1.4px;line-height:1.05;color:var(--bf-ink);
}
.contact__actions{margin-top:30px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.contact-card{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  border-radius:var(--bf-radius-card);
  padding:clamp(20px,4.5vw,26px);min-height:44px;
}
.contact-card--tel{background:var(--bf-cta);color:var(--bf-cta-fg)}
.contact-card--tel:hover{background:var(--bf-cta-hover);color:var(--bf-cta-fg)}
.contact-card--snap{background:var(--moutarde-500);color:var(--bf-accent2-fg)}
.contact-card--snap:hover{background:var(--moutarde-600);color:var(--bf-accent2-fg)}
.contact-card__kicker{font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase}
.contact-card__value{font-size:clamp(22px,3.4vw,32px);font-weight:700;letter-spacing:-0.6px;line-height:1.15}
.contact__meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:20px;font-size:15px;color:var(--bf-muted)}

/* ---- Footer ---- */
.site-footer{padding:24px var(--bf-gutter) var(--bf-footer-pad)}
.site-footer__inner{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;color:var(--bf-muted)}
.site-footer__brand{display:flex;align-items:center;gap:9px}
.site-footer__brand .bf-mark{--mark-size:26px}

/* ---- Barre mobile fixe ---- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;gap:10px;
  padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--bf-panel);
  border-top:var(--bf-header-rule);
}
.mobile-bar .btn{flex:1;font-size:15px;padding:14px}
/* Sur desktop, le header porte déjà « Commander » : la barre disparaît. */
@media (min-width:744px){
  .mobile-bar{display:none}
  .site-footer{padding-bottom:48px}
}

/* ---- Mobile (< 744px) ---- */
@media (max-width:743px){
  /* Header sur une ligne : logo + liens. Le CTA vit dans la barre basse. */
  .site-header{flex-wrap:nowrap;padding:8px 16px}
  .site-nav{flex-wrap:nowrap;gap:2px}
  .site-nav__cta{display:none}
  .site-nav__link{padding:10px 8px}

  /* Piste de scroll plus courte sur mobile */
  .hero{height:220vh;height:220svh}
  .hero__sticky{padding:56px 20px}

  /* Carte : 2 colonnes, stickers et tickets réduits */
  .menu__grid,.menu--plats .menu__grid{grid-template-columns:repeat(2,1fr);gap:22px 14px;margin-top:28px}
  .sticker,.menu--plats .sticker{top:10px;left:-6px;padding:5px 10px;font-size:12px;letter-spacing:0;box-shadow:4px 4px 0 #000}
  .ticket,.menu--plats .ticket{margin:-12px 6px 0 auto;padding:6px 10px;font-size:12px}
  .dish__desc,.menu--plats .dish__desc{margin-top:10px;font-size:13px;line-height:1.45}
  .menu{padding-top:clamp(40px,9vw,80px)}
  .menu__head{gap:8px}
  .menu__prices{font-size:13px}

  /* Textes longs : un cran plus petit */
  .concept__title{font-size:clamp(26px,7.4vw,56px);letter-spacing:-1px}
  .concept__lead{font-size:16px}
  .offer__note{font-size:14px}
}

/* ---- Animations ---- */
@keyframes bfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes bfDrift{0%{transform:translateX(-3%)}100%{transform:translateX(3%)}}