:root{
  --bg-1: #0b0b0b;
  --bg-2: #000000;
  --card: #111215;
  --text: #f3f4f6;
  --muted:#b7bcc5;
  --accent:#F2B10E;         /* doré */
  --accent-ink:#0b0b0b;
  --ring: rgba(242,177,14,.35);
}

/* RESET MINIMAL */
*{box-sizing:border-box}
html,body{height:100%}
html,body,h1,h2,h3,p,figure{margin:0}
img{max-width:100%;display:block;height:auto}

/* FOND */
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 0%, #111 0%, transparent 60%),
    radial-gradient(1200px 600px at 80% 100%, #0f0f0f 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
}

/* CONTAINER */
.container{max-width:1100px;margin:0 auto;padding:0 18px}

/* HEADER */
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(150%) blur(8px);
  background:rgba(8,8,8,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 18px;
}

/* BRAND */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{height:28px;width:auto}
.brand-text{
  font-weight:800; letter-spacing:.02em; font-size:18px;
  display:inline-flex; align-items:center; gap:.45rem;
}
.brand-text::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px var(--ring);
}

/* NAV */
.nav-desktop{display:none;align-items:center;gap:10px}
.nav-link{
  color:var(--text); text-decoration:none; padding:8px 10px; border-radius:8px;
  opacity:.9;
}
.nav-link:hover{background:rgba(255,255,255,.06)}

/* Boutons — base unique (JAUNES par défaut) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.55rem;
  padding:.65rem 1rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;          /* évite les retours à la ligne */
  line-height:1;               /* hauteur stable */
  text-decoration:none;
  font-weight:800;

  background:var(--accent);
  color:var(--accent-ink);
  box-shadow:0 8px 24px rgba(242,177,14,.18), inset 0 -2px 0 rgba(0,0,0,.15);
}
.btn.ghost{
  background:transparent;color:var(--text);
  border:1px solid rgba(255,255,255,.2); box-shadow:none;
}
.btn.is-active{box-shadow:0 0 0 3px var(--ring)}
.btn:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* Spécifique header : mêmes dimensions/alignements */
.nav-desktop .btn,
.nav-desktop .nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:auto;
  padding:.65rem 1rem;
  border-radius:999px;
  font-size:16px;
}

/* ===== Bouton CONTACT blanc (mêmes dimensions, couleurs inversées) ===== */
/* Accepte .btn.contact ou .btn.btn-contact, sur desktop ET mobile */
.btn.contact,
.btn.btn-contact{
  background:#ffffff;
  color:#0b0b0b;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.18), inset 0 -2px 0 rgba(0,0,0,.15);
}
.btn.contact:hover,
.btn.btn-contact:hover{ background:#f3f3f3 }

/* BURGER */
.burger{
  width:44px;height:44px;display:grid;place-items:center;gap:3px;
  background:transparent;border:1px solid rgba(255,255,255,.18);
  border-radius:12px; cursor:pointer;
}
.burger span{display:block;width:20px;height:2px;background:var(--text);transition:transform .25s ease, opacity .25s ease}
.burger.open .b1{transform:translateY(6px) rotate(45deg)}
.burger.open .b2{opacity:0}
.burger.open .b3{transform:translateY(-6px) rotate(-45deg)}

/* NAV MOBILE */
.nav-mobile{display:none;flex-direction:column;gap:10px;padding:0 18px 12px}
.nav-mobile.open{display:flex}

/* Desktop rules */
@media (min-width: 900px){
  .nav-desktop{display:flex}
  .burger{display:none}
  .nav-mobile{display:none !important}
}

/* ================= HERO ================= */
.hero{ position:relative; }
.hero-media{
  overflow:hidden;
  border-radius:0 0 24px 24px;
  background:#000;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.hero-media img{
  width:auto; max-width:100%;
  height:clamp(260px, 45vh, 520px);
  object-fit:contain; object-position:center center; display:block;
}

/* Mobile : full visible */
@media (max-width: 600px){
  .hero-media img{
    width:auto; max-width:100%;
    height:auto; max-height:60vh;
    object-fit:contain; object-position:center center;
  }
}

/* Desktop : un peu plus bas */
@media (min-width: 1024px){
  .hero-media img{
    height:clamp(280px, 42vh, 520px);
    object-fit:contain; object-position:center center;
  }
}

/* CTA sous la hero */
.hero-cta{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  padding:18px 0 28px;
}

/* ABOUT */
.about{padding:40px 0 10px}
.about h2{
  font-family:"Playfair Display", serif; font-size:clamp(28px,3.6vw,40px);
  margin-bottom:8px;
}
.about p{color:var(--muted);max-width:65ch}

/* CONTACT + MAP */
.contact{display:grid;gap:18px;grid-template-columns:1fr; padding:28px 0 64px}
.contact-card{
  background:linear-gradient(180deg, #121316, #0f1012);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:18px; box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.contact-card h3{font-size:20px;margin-bottom:8px}
.contact-card p{color:var(--muted);margin:.45rem 0}
.contact-card a{color:var(--text)}
.contact-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

.map{
  border-radius:16px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06);
}
.map iframe{display:block;width:100%;height:420px;border:0}

@media (min-width: 900px){
  .contact{grid-template-columns:1fr 1fr}
}

/* ================= MENU PAGE ================= */
.menu-page{padding:32px 0 64px}
.menu-page h1{
  font-family:"Playfair Display", serif;
  font-size:clamp(24px,3vw,36px); margin:12px 0 16px;
}
.menu-figure{
  border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, #0f1013, #0a0b0d);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.menu-figure img{
  width:100%; height:auto; display:block; object-fit:contain;
}
.menu-fallback{
  margin-top:12px; color:var(--muted);
  background:#0f1013;border:1px dashed rgba(255,255,255,.15);
  border-radius:12px;padding:12px 14px;
}

/* ================= GALERIE ================= */
.gallery-wrap{ padding:24px 0 64px; }
.gallery-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
}
.gallery-grid figure{
  position:relative;
  aspect-ratio: 4 / 3;
  margin:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:#0f1013;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.gallery-grid figure > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
@media (min-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* FOOTER */
.footer{border-top:1px solid rgba(255,255,255,.08); padding:18px 0 28px; margin-top:24px}
.footer .container{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer small{color:#9aa0aa}

/* PETITS ÉCRANS */
@media (max-width: 480px){
  .brand img{ height:24px }
  .brand-text{ font-size:16px }
  .btn{ padding:.55rem .85rem }
}

/* --- Sécurité : CONTACT toujours blanc, même si la classe .contact manque --- */
.nav-desktop a[href*="#contact"],
.nav-mobile  a[href*="#contact"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.65rem 1rem;
  border-radius:999px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;

  background:#ffffff;
  color:#0b0b0b;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.18), inset 0 -2px 0 rgba(0,0,0,.15);
}

/* ====== MENU : 6 images empilées (image entière visible) ====== */
.menu-images{
  display:grid;
  grid-template-columns: 1fr;   /* 1 colonne */
  gap:18px;
  margin-top:12px;
}

.menu-images figure{
  margin:0;
  overflow:hidden;              /* garde les coins arrondis si l’image déborde un peu */
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:#0f1013;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}

/* L'image garde ses proportions et s'affiche en entier */
.menu-images figure > img{
  display:block;
  width:100%;
  height:auto;                  /* >>> clé pour ne rien couper */
}