/* =========================================================
   FOOD PARK — THEME PREMIUM (FINAL)
   ========================================================= */

/* =========================================================
   VARIABLES
   ========================================================= */
:root{
  --street:  #fbb040;
  --dessert: #FF3EA5;
  --bg: #0B0B0B;
  --border: rgba(255,255,255,.10);
}

/* =========================================================
   BASE
   ========================================================= */
body{
  background: var(--bg);
  color: #fff;
}
#mobileMenu {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(11, 11, 11, 0.95); /* Pour être sûr qu'il soit lisible */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Style du burger pour voir s'il réagit */
#navToggle[aria-expanded="true"] span {
    background: var(--street);
}
/* Halos & grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10;
  background:
    radial-gradient(1200px 600px at 70% 10%, rgba(255,62,165,.025), transparent 60%),
    radial-gradient(1000px 800px at 10% 90%, rgba(251,176,64,.025), transparent 60%);
  mix-blend-mode:screen;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:11;
  opacity:.14;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 40 40'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 .06 .12 .06 0 0 0'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") repeat;
}
@media (max-width:640px){
  body::after{ display:none; }
}

/* =========================================================
   TYPOGRAPHIE
   ========================================================= */
h1,h2,h3{
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* =========================================================
   HEADER
   ========================================================= */
.header-glass{
  background:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,.38));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* =========================================================
   NAVIGATION (COULEURS RESTAURÉES)
   ========================================================= */
.nav-link{
  position:relative;
  padding:10px 0;
  color:rgba(255,255,255,.78);
  font-weight:500;
  transition:color .25s ease;
}
.nav-link:hover{
  color:#fff;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--street),var(--dessert));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav-link[aria-current="page"]{
  color:#fff;
}
.nav-link[aria-current="page"]::after{
  transform:scaleX(1);
}

/* =========================================================
   MEGA MENU
   ========================================================= */
.mega{
  background:#121212;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}

/* Badges */
.badge-street{
  background:linear-gradient(180deg,#ffd08a,var(--street));
  color:#111;
  font-weight:700;
  border-radius:9999px;
  padding:.25rem .6rem;
  box-shadow:0 4px 14px rgba(251,176,64,.35);
}
.badge-dessert{
  background:linear-gradient(180deg,#ff9dd7,var(--dessert));
  color:#fff;
  font-weight:700;
  border-radius:9999px;
  padding:.25rem .6rem;
  box-shadow:0 4px 16px rgba(255,62,165,.35);
}
.badge-neutral{
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  color:#fff;
  border-radius:9999px;
  padding:.25rem .6rem;
}

/* =========================================================
   BOUTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.25rem;
  border-radius:9999px;
  font-weight:600;
  letter-spacing:.3px;
  transition:all .25s ease;
  box-shadow:
    0 8px 18px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.10);
}
.btn-prem:hover{
  transform:translateY(-1px);
}
.btn-street{
  color:#0B0B0B;
  background:linear-gradient(180deg,#ffd28c,var(--street));
  box-shadow:0 10px 22px rgba(251,176,64,.25);
}
.btn-dessert{
  color:#fff;
  background:linear-gradient(180deg,#ff85ca,var(--dessert));
  box-shadow:0 10px 22px rgba(255,62,165,.22);
}
.btn-ghost{
  color:#fff;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
}

/* =========================================================
   CARDS
   ========================================================= */
.card{
  border-radius:1.25rem;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  position:relative;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes fadeUp{
  0%{opacity:0;transform:translateY(30px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  0%{opacity:0}
  100%{opacity:1}
}
.hero-animate{ animation:fadeUp 1s ease-out forwards }
.hero-animate-delay1{ animation:fadeUp 1s ease-out .2s forwards; opacity:0 }
.hero-animate-delay2{ animation:fadeUp 1s ease-out .4s forwards; opacity:0 }
.hero-fade-bg{ animation:fadeIn 1.5s ease-out }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* =========================================================
   CAROUSEL
   ========================================================= */
.slide{ opacity:0; z-index:1 }
.dot{ background: rgba(255,255,255,.32); }

/* =========================================================
   STICKY MOBILE BAR
   ========================================================= */
.stickybar{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:50;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding-bottom:calc(.5rem + env(safe-area-inset-bottom));
}

/* =========================================================
   PRESENTATION
   ========================================================= */
.section-presentation{ position:relative; }
.section-presentation::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 400px at 75% 35%, rgba(251,176,64,.06), transparent 60%),
    radial-gradient(700px 380px at 85% 70%, rgba(255,62,165,.05), transparent 60%);
}

/* =========================================================
   GLASS CARDS
   ========================================================= */
.glass-card{
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  transition:.25s ease;
}
.glass-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 50px rgba(0,0,0,.55);
}

/* =========================================================
   ICONS
   ========================================================= */
.icon-premium{
  height:44px;
  width:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
}
.icon-street{
  background:linear-gradient(180deg,#ffe1a8,var(--street));
  color:#141414;
}
.icon-dessert{
  background:linear-gradient(180deg,#ffb5e2,var(--dessert));
  color:#fff;
}
.icon-neutral{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
  color:#fff;
}

/* =========================================================
   TEXT HELPERS
   ========================================================= */
.text-soft{ color:rgba(255,255,255,.92); }
.text-muted{ color:rgba(255,255,255,.74); }
.glow-street{
  color:var(--street);
  text-shadow:0 0 12px rgba(251,176,64,.35);
}
.glow-dessert{
  color:var(--dessert);
  text-shadow:0 0 14px rgba(255,62,165,.4);
}

/* =========================================================
   MODAL
   ========================================================= */
#signatureModal.hidden{ display:none }
#signatureModal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
}
.modal-panel{
  width:min(92vw,720px);
  border-radius:18px;
  background:#0f0f0f;
  border:1px solid var(--border);
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.modal-title{
  font-weight:800;
  font-size:1.5rem;
}
.modal-desc{
  color:#cfcfcf;
}
  /* Gallery cards */
    .gallery-card{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:#0f0f0f}
    .gallery-media{ position:relative; padding-top:66%; }
    .gallery-media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s ease, filter .6s ease; }
    .gallery-card:hover .gallery-media > img{ transform: scale(1.03); filter: saturate(1.05) contrast(1.05); }
    .badge{position:absolute; top:10px; left:10px; font-size:12px; font-weight:700; letter-spacing:.04em; padding:.35rem .6rem; border-radius:9999px; border:1px solid transparent; z-index:2;}
    .badge-street{ color:var(--street); background:color-mix(in oklab, var(--street) 18%, transparent); border-color:color-mix(in oklab, var(--street) 40%, transparent) }
    .badge-dessert{ color:var(--dessert); background:color-mix(in oklab, var(--dessert) 18%, transparent); border-color:color-mix(in oklab, var(--dessert) 40%, transparent) }
    .badge-amb{ color:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.20) }

    .shine::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);transform:translateX(-120%);transition:transform .8s ease}
    .gallery-card:hover.shine::after{transform:translateX(120%)}

    .caption{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.8rem 1rem; border-top:1px solid var(--border) }
    .caption-title{ font-weight:600 }
    .caption-sub{ font-size:12px; color:#cfcfcf }

    /* Lightbox modal */
    #lightbox.hidden{ display:none }
    #lightbox{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
    .lb-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.82); backdrop-filter:blur(6px) }
    .lb-panel{
      position:relative; width:min(94vw,1100px); border-radius:18px; overflow:hidden;
      background:#0f0f0f; border:1px solid var(--border); box-shadow:0 28px 100px rgba(0,0,0,.7);
    }
    .lb-media{ position:relative; background:#000; }
    .lb-media img{ width:100%; height:auto; display:block; max-height:72vh; object-fit:contain; }
    .lb-badge{ position:absolute; top:12px; left:12px }
    .lb-caption{ padding:14px 16px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
    .lb-title{ font-weight:800; font-size:1.1rem }
    .lb-title.street{ color:var(--street); text-shadow:0 0 8px rgba(251,176,64,.22) }
    .lb-title.dessert{ color:var(--dessert); text-shadow:0 0 10px rgba(255,62,165,.28) }
    .lb-close{ position:absolute; top:10px; right:10px; height:40px; width:40px; border-radius:9999px; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid var(--border) }
    .lb-nav{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none }
    .lb-arrow{ height:100%; width:24%; max-width:220px; pointer-events:auto; display:flex; align-items:center; justify-content:center; }
    .lb-arrow > button{ height:56px; width:56px; border-radius:9999px; background:rgba(255,255,255,.10); border:1px solid var(--border); display:grid; place-items:center }
    @media (max-width:640px){ .lb-arrow > button{ height:48px; width:48px } }