/* =====================================================================
   MOUNTAIN BURGER — Prototype maquette
   Reproduction fidèle de la maquette (à intégrer ensuite dans Django)
   ===================================================================== */

:root{
  --cream:        #F1EADB;
  --cream-2:      #E9E0CD;
  --orange:       #C87A2C;
  --orange-hi:    #D5842F;
  --ink:          #1A1714;
  --ink-2:        #232019;
  --white:        #FFFFFF;
  --line:         rgba(26,23,20,.22);
  --line-light:   rgba(255,255,255,.18);

  --shadow:       0 18px 40px -18px rgba(0,0,0,.45);

  --wrap:         1360px;
  --gutter:       clamp(18px, 4vw, 48px);

  --f-display:    "Bebas Neue", "Anton", system-ui, sans-serif;
  --f-cond:       "Bebas Neue", "Barlow Condensed", system-ui, sans-serif;
  --f-body:       "Barlow", system-ui, sans-serif;
}

@font-face{
  font-family:"Bebas Neue";
  src:url("../fonts/BebasNeue-Regular.9ab0544da4ed.woff2") format("woff2"),
      url("../fonts/BebasNeue-Regular.afeaf6797b62.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:82px; font-size:109.5%; }

body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline:auto; }

/* ---------- Boutons ---------- */
.btn{
  --bg:var(--orange); --fg:#fff; --bd:var(--orange);
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-cond); font-weight:400; text-transform:uppercase;
  letter-spacing:.06em; font-size:.95rem; line-height:1;
  padding:.85em 1.35em; border:2px solid var(--bd);
  background:var(--bg); color:var(--fg);
  cursor:pointer; transition:transform .15s ease, background .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--ink); }
.btn--ghost:hover{ --bg:var(--ink); --fg:#fff; }
.btn--ghost-light{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.7); }
.btn--ghost-light:hover{ --bg:#fff; --fg:var(--ink); }
.btn--dark{ --bg:var(--ink); --fg:#fff; --bd:var(--ink); }
.btn--dark:hover{ --bg:var(--ink-2); }
.btn--light{ --bg:var(--cream); --fg:var(--ink); --bd:var(--cream); }
.btn--light:hover{ --bg:#fff; }
.btn--lg{ font-size:1.25rem; padding:1em 1.6em; }

.eyebrow{
  font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.14em;
  font-weight:400; font-size:.95rem; color:var(--orange);
}

/* ---------- Logo (fichier fourni par le client) ---------- */
.nav__logo{ display:inline-flex; align-items:center; height:34px; }
.nav__logo img{ display:block; height:100%; width:auto; }

.splash__logo img{ display:block; height:clamp(72px, 12vw, 148px); width:auto; margin-inline:auto; }

.logo-mark{ display:inline-flex; align-items:center; }
.logo-mark img{ display:block; height:44px; width:auto; }
.footer .logo-mark{ align-self:center; }

/* =====================================================================
   1. SPLASH — plein écran (background photo/vidéo)
   ===================================================================== */
.splash{
  position:relative; min-height:100svh;
  display:grid; grid-template-rows:1fr auto auto auto 1fr;
  place-items:center; text-align:center; color:#fff;
  padding:var(--gutter);
  background:radial-gradient(120% 90% at 70% 20%, #6b4b2e, #241a12 70%);
  overflow:hidden;
}
.splash::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,8,6,.55), rgba(10,8,6,.35) 40%, rgba(10,8,6,.75));
}
.splash__media{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.splash__logo{ grid-row:2; position:relative; z-index:2; }
.splash__tag{
  grid-row:3; font-family:var(--f-cond); text-transform:uppercase;
  letter-spacing:.12em; font-weight:400; margin:1.2rem 0 0;
  font-size:clamp(2rem,2.4vw,2.26em); color:rgba(255,255,255,.95);
  position:relative; z-index:2;
}
.splash__enter{ grid-row:4; margin-top:1.6rem; display:flex; flex-direction:column; align-items:center; gap:.4rem; position:relative; z-index:2; }
.splash__enter .cursor{ font-size:1.4rem; animation:bob 1.8s ease-in-out infinite; }
.splash__meta{
  grid-row:5; font-family:var(--f-cond);
  text-transform:uppercase; letter-spacing:.18em; font-size:1.25rem;
  color:rgba(255,255,255,.85);
  position:relative; z-index:2;
}
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* =====================================================================
   2. NAV (sticky)
   ===================================================================== */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--cream); border-bottom:1px solid var(--line);
}
.nav__inner{
  display:flex; align-items:center; gap:1.5rem;
  padding-block:.7rem; min-height:72px;
}
.nav__links{
  display:flex; gap:1.6rem; margin-left:1rem;
  font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.08em;
  font-weight:400; font-size:1.02rem;
}
.nav__links a{ color:var(--ink); padding-block:.3em; border-bottom:2px solid transparent; margin-left:1.5rem; margin-right:1.5rem;}
.nav__links a:hover{ color:var(--orange); }
.nav__links a.is-active{ color:var(--orange); }
.nav__cta{ margin-left:auto; display:flex; gap:.6rem; }
.nav__toggle{ display:none; }

/* =====================================================================
   3. HERO — photo en fond de section (comme la maquette)
   ===================================================================== */
.hero{
  position:relative; overflow:hidden;
  min-height:clamp(460px, 58vw, 880px);
  display:flex; align-items:center;
  padding-block:clamp(3rem,7vw,5rem);
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:72% center;
}
.hero__inner{ position:relative; z-index:2; }
.hero__content{ max-width:36rem; }
.hero__title{
  font-family:var(--f-display); font-weight:400; line-height:.92;
  font-size:clamp(3rem,7.5vw,5.8rem); text-transform:uppercase; margin:0;
}
.hero__title .accent{ color:var(--orange); display:block; }
.hero__text{ max-width:36ch; margin:1.4rem 0 1.8rem; color:#3a342c; font-size:1.08rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__actions .btn:hover{ --bg:var(--ink); --fg:#fff; --bd:var(--ink); }

.hero__features{
  position:absolute; z-index:2; right:48%; bottom:14%;
  background:var(--ink); color:#fff; padding:1.4rem 1.6rem;
  font-family:var(--f-cond); max-width:330px; box-shadow:var(--shadow);
}
.hero__features li{ list-style:none; margin-bottom:1rem; }
.hero__features li:last-child{ margin-bottom:0; }
.hero__features b{ display:block; font-weight:400; text-transform:uppercase; letter-spacing:.05em; font-size:1.25rem; color:#fff; }
.hero__features span{ font-size:1.1rem; color:rgba(255,255,255,.85); }
.hero__features ul{ margin:0; padding:0; }

/* =====================================================================
   4. Bandeau infos (dark)
   ===================================================================== */
.infobar{ background:var(--ink); color:#fff; }
.infobar__inner{
  display:grid; grid-template-columns:repeat(3,1fr) auto; gap:1.5rem; padding-block:clamp(2.2rem,5vw,3.2rem);
}
.info-col b{
  display:block; font-family:var(--f-cond); font-weight:400; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.4rem; color:var(--orange-hi); margin-bottom:.35rem;
}
.info-col{ font-family:var(--f-cond); font-size:1.08rem; line-height:1.5; color:rgba(255,255,255,.85); }

/* =====================================================================
   5. Menu — DES BURGERS DE CARACTÈRE (slider)
   ===================================================================== */
.menu{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.menu__grid{ display:grid; grid-template-columns:.62fr 1.38fr; gap:clamp(1.5rem,4vw,2.5rem); align-items:center; }
.menu__title{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  line-height:.92; font-size:clamp(2.4rem,5.5vw,3.8rem); margin:.6rem 0 1.2rem;
}
.menu__title .accent{ color:var(--orange); }
.menu__text{ max-width:38ch; color:#3a342c; margin-bottom:1.6rem; font-size:1.05rem; }

.slider{ position:relative; min-width:0; }
.slider__track{ display:flex; gap:1.2rem; overflow:hidden; scroll-behavior:smooth; }
.card{
  flex:0 0 calc((100% - 2.4rem)/3); min-width:290px;
  background:#fff; border:1px solid var(--line); padding:.85rem;
}
.card__photo{
  aspect-ratio:1/1; margin-bottom:.9rem; overflow:hidden;
  background:radial-gradient(70% 70% at 50% 40%, #7a5a3c, #35251a);
  display:grid; place-items:center; color:rgba(255,255,255,.6);
  font-family:var(--f-cond); letter-spacing:.1em; font-size:.7rem; text-transform:uppercase;
  width:100%; border:0; padding:0; margin-top:0; cursor:zoom-in;
}
.card__photo img{ width:100%; height:100%; object-fit:cover; }
.card b{ font-family:var(--f-cond); font-weight:400; text-transform:uppercase; letter-spacing:.05em; font-size:1.12rem; }
.card p{ font-size:.92rem; line-height:1.5; color:#5a5348; margin:.4rem 0 0; }

.slider__btn{
  position:absolute; top:38%; z-index:3;
  width:42px; height:48px; border:1px solid var(--line); background:var(--cream);
  display:grid; place-items:center; cursor:pointer; font-size:1.1rem;
  transition:background .2s ease, color .2s ease;
}
.slider__btn:hover{ background:var(--ink); color:#fff; }
.slider__btn--prev{ left:-19px; }
.slider__btn--next{ right:-19px; }

/* =====================================================================
   6. À propos — PLUS QU'UN BURGER. UNE HISTOIRE.
   ===================================================================== */
.story{ display:grid; grid-template-columns:1fr 1.15fr .9fr; }
.story__panel{
  background:var(--ink); color:#fff;
  padding-block:clamp(2rem,4vw,3rem);
  padding-right:clamp(2rem,4vw,3rem);
  /* Même position que le contenu dans .wrap (aligné avec "@Mountain.Burger" / "Contact") */
  padding-left:max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  display:flex; align-items:center; justify-content:flex-start;
}
.story__panel h2{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  line-height:.95; font-size:clamp(4rem,4vw,6rem); margin:0;
  text-align:left;
}
.story__panel .accent{ color:var(--orange); }
.story__text{
  background:var(--orange); color:#fff; padding:clamp(2rem,4vw,3rem);
  font-size:1.08rem; line-height:1.65; display:flex; align-items:center;
}
.story__text b{ color:#fff; }
.story__photo{ min-height:220px; overflow:hidden; }
.story__photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* =====================================================================
   6bis. Bon cadeau / Rabais à l'emporter
   ===================================================================== */
.promo{
  display:flex; flex-wrap:wrap;
  min-height:clamp(320px, 32vw, 480px);
  margin-top:32px;
}
.promo__panel{
  position:relative; flex:1 1 380px; overflow:hidden;
  display:flex; align-items:center;
  padding-block:clamp(2rem,4vw,3rem);
  padding-right:clamp(1.5rem,3vw,2.5rem);
}
.promo__panel--gift{
  background:var(--orange); color:#fff;
  /* Même position que le contenu dans .wrap (aligné avec "@Mountain.Burger" / "Contact") */
  padding-left:max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
.promo__panel--takeaway{
  background:var(--cream-2); color:var(--ink);
  padding-left:clamp(1.5rem,3vw,2.5rem);
}
/* Le texte reste au-dessus (z-index) et l'image déborde derrière, en partie sous le texte. */
.promo__text{ position:relative; z-index:2; max-width:62%; }
.promo__title{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  line-height:.95; font-size:clamp(5.5rem,3.2vw,7rem); margin:0 0 1.4rem;
}
.promo__panel--gift .promo__title{ color:#fff; }
.promo__panel--gift .promo__title .accentink{ color:var(--ink); }
.promo__panel--takeaway .promo__title .accent{ color:var(--orange); }
.promo__image{
  position:absolute; z-index:1; top:50%; right:2%;
  transform:translateY(-50%);
  width:46%; height:auto; max-height:88%;
  object-fit:contain;
}
.promo .btn:hover{ --bg:var(--ink); --fg:#fff; --bd:var(--ink); }

/* =====================================================================
   7. Social — @MOUNTAIN.BURGER
   ===================================================================== */
.social{ padding-block:clamp(2.5rem,6vw,4rem); }
.social__head{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.social__title{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.8rem,4.5vw,2.8rem); margin:0;
}
.social__title .accent{ color:var(--orange); }
.social__follow{ font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.1em; color:#5a5348; }
.social__icons{ display:flex; gap:.5rem; }
.social__icons a{
  width:34px; height:34px; background:var(--ink); color:#fff;
  display:grid; place-items:center; border-radius:6px; font-size:.9rem;
}
.gallery{ position:relative; }
.gallery__track{ display:flex; gap:.7rem; overflow:hidden; }
.gallery__item{
  flex:0 0 calc((100% - (5 * .7rem))/6); min-width:120px; aspect-ratio:1; overflow:hidden;
  background:linear-gradient(150deg,#4a4038,#241d18);
  display:block; border:0; padding:0; cursor:zoom-in;
}
.gallery__item img{ width:100%; height:100%; object-fit:cover; }
.gallery .slider__btn--prev{ left:-19px; top:calc(50% - 22px); }
.gallery .slider__btn--next{ right:-19px; top:calc(50% - 22px); }

/* =====================================================================
   8. Footer / Contact
   ===================================================================== */
.footer{ background:var(--ink); color:#fff; padding-block:clamp(2.5rem,5vw,3.5rem); }
.footer__grid{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:2rem 3rem;
  align-items:start;
}
.footer__title{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  color:var(--orange); font-size:clamp(2.4rem,5vw,3.4rem); margin:0; line-height:1;
}
.footer__col{ font-family:var(--f-cond); font-size:1.08rem; line-height:1.55; color:rgba(255,255,255,.85); }
.footer__col b{ color:#fff; display:block; font-weight:400; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.3rem; }

.footer__legal{
  margin-top:clamp(2rem,4vw,3rem); padding:1.2rem var(--gutter) 0;
  border-top:1px solid var(--line-light);
  text-align:center;
}
.footer__legal p{
  margin:0; font-family:var(--f-body); font-size:.85rem;
  color:rgba(255,255,255,.55);
}
.footer__legal a{ color:rgba(255,255,255,.8); text-decoration:underline; }
.footer__legal a:hover{ color:var(--orange-hi); }

/* Formulaire de contact */
.contact-form{
  grid-column:1 / -1; margin-top:1.5rem; padding-top:1.5rem;
  border-top:1px solid var(--line-light);
  display:grid; grid-template-columns:1fr 1fr; gap:.8rem; align-items:start;
}
.contact-form h3{
  grid-column:1 / -1; margin:0 0 .3rem;
  font-family:var(--f-cond); font-weight:400; text-transform:uppercase; letter-spacing:.1em;
  font-size:1.1rem; color:var(--orange-hi);
}
.contact-form input, .contact-form textarea{
  width:100%; padding:.7em .8em; background:#2c281f; border:1px solid var(--line-light);
  color:#fff; font-family:var(--f-body); font-size:1.02rem;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:rgba(255,255,255,.45); }
.contact-form textarea{ grid-column:1 / -1; min-height:96px; resize:vertical; }
.contact-form .btn{ grid-column:1 / -1; justify-self:start; }

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

.form-msg{
  grid-column:1 / -1; margin:0 0 .8rem; padding:.7em .9em;
  font-family:var(--f-cond); font-size:.85rem; letter-spacing:.03em;
  border-left:3px solid transparent;
}
.form-msg--success{ background:rgba(93,168,102,.15); border-color:#5da866; color:#cdeed1; }
.form-msg--error{ background:rgba(200,90,60,.18); border-color:var(--orange-hi); color:#f1c3b3; }

.form-errors{
  grid-column:1 / -1; margin:0 0 .8rem; padding:.7em .9em; list-style:none;
  background:rgba(200,90,60,.18); border-left:3px solid var(--orange-hi);
  font-family:var(--f-cond); font-size:.82rem; color:#f1c3b3;
}
.form-errors li{ margin:.15em 0; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:960px){
  .menu__grid{ grid-template-columns:1fr; }
  .infobar__inner{ grid-template-columns:1fr 1fr; }
  .story{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }

  .promo__panel{
    flex-direction:column; align-items:flex-start; text-align:left;
    padding-right:clamp(1.5rem,3vw,2.5rem);
  }
  .promo__panel--takeaway{
    padding-left:max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  }
  .promo__text{ max-width:none; }
  .promo__image{
    position:static; z-index:auto; transform:none;
    width:auto; max-width:60%; max-height:220px; margin-top:1.2rem; align-self:center;
  }

  .hero{ display:block; min-height:0; }
  .hero::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, var(--cream) 0%, rgba(241,234,219,.9) 2%, rgba(241,234,219,.3) 70%);
  }
  .hero__content{ max-width:none; }
  .hero__features{ position:static; margin-top:1.5rem; max-width:none; }
  .btn--ghost{
    --bg: var(--orange);
    --fg: #fff;
    --bd: var(--orange);}
}
@media (max-width:720px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:inline-flex; margin-left:auto; order:2; }
  .nav__logo{ order:1; }
  /* Flux normal (pas de position:absolute) : la nav s'agrandit pour contenir
     liens + boutons empilés, quelle que soit leur hauteur réelle. */
  .nav.is-open .nav__inner{ flex-wrap:wrap; row-gap:.8rem; }
  .nav.is-open .nav__links{
    order:3; width:100%;
    display:flex; flex-direction:column; gap:.8rem;
    padding-top:1rem; border-top:1px solid var(--line);
  }
  .nav.is-open .nav__cta{
    order:4; width:100%;
    display:flex; flex-direction:column; gap:.6rem;
    padding-bottom:.5rem;
  }
  .infobar__inner{ grid-template-columns:1fr; }
  .infobar .logo-mark{ display:none; }
  .footer__grid{ grid-template-columns:1fr; }
  .contact-form{ grid-template-columns:1fr; }
  .card{ flex:0 0 calc((100% - 1rem)/2); }
  .gallery__item{ flex:0 0 calc((100% - .7rem)/2); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
}

/* =====================================================================
   Lightbox (agrandissement des photos burgers / galerie)
   ===================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  background:rgba(10,8,6,.92); padding:var(--gutter);
}
.lightbox.is-open{ display:flex; }
.lightbox__img{
  max-width:min(92vw,1100px); max-height:88vh; width:auto; height:auto;
  box-shadow:var(--shadow);
}
.lightbox__close{
  position:absolute; top:1.2rem; right:1.2rem; z-index:1;
  width:44px; height:44px; border:1px solid rgba(255,255,255,.4); background:transparent;
  color:#fff; font-size:1.6rem; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:background .2s ease;
}
.lightbox__close:hover{ background:rgba(255,255,255,.15); }
body.lightbox-open{ overflow:hidden; }