/* =========================================================
   Chupito – Header, Réseaux, Footer (hf.css)
   ========================================================= */

:root{
  --bg: #fff7ef;             /* fond crème */
  --text: #1c1b1a;           /* noir doux */
  --charcoal: #121212;       /* noir charbon */
  --muted: #6b6b6b;
  --accent: #6e2b8d;         /* aubergine (secondaire) */
  --green: #2F8A49;          /* vert basilic (logo) */
  --red: #D84444;            /* rouge tomate (logo) */
  --stroke: rgba(0,0,0,.08);
  --radius: 16px;
  --container: 1200px;
}

/* Utils */
.container{ width: min(var(--container), calc(100% - 2rem)); margin-inline:auto; }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:1rem; top:1rem; background:#000; color:#fff; padding:.5rem .75rem; z-index:9999; border-radius:8px; }

/* ===== HEADER ===== */
.site-header{
  position: sticky; top:0; z-index:1000;
  background: var(--bg);
  border-bottom: 1px solid var(--stroke);
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  backdrop-filter: saturate(1.05);
}
.has-sticky-header .site-main{ scroll-margin-top: 88px; }

.head-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:88px; gap:1rem;
}

/* Logo */
.brand, .site-logo{ display:flex; align-items:center; gap:.75rem; }
.site-logo img{
  height: 90px;
  width: auto; display:block; transition:transform .2s ease;
  margin: 4px 0;
}
.site-logo img:hover{ transform:scale(1.05); }

/* Nav desktop */
.main-nav{ display:flex; align-items:center; gap:1.25rem; }
.main-nav .menu{ list-style:none; display:flex; gap:1.25rem; margin:0; padding:0; }
.main-nav .menu a{
  text-decoration:none; color:var(--text); font-weight:700; position:relative;
  padding:.4rem .1rem; line-height:1.2;
}
.main-nav .menu a:after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--green); /* 🟢 vert du logo */
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.main-nav .menu a:hover:after,
.main-nav .menu .current-menu-item > a:after{
  transform:scaleX(1);
}

/* CTA Réserver (rouge du logo) */
.btn-reserver{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.15rem; border-radius:999px; font-weight:800; text-decoration:none;
  background: var(--red); color:#fff;            /* 🔴 rouge du logo */
  border:1px solid color-mix(in oklab, var(--red), black 8%);
  box-shadow: 0 6px 14px rgba(216,68,68,.22);
}
.btn-reserver:hover{ filter:brightness(1.06); }

/* Burger */
.burger{
  display:none; width:42px; height:42px; border-radius:10px;
  border:1px solid var(--stroke); background:#fff; position:relative; cursor:pointer;
}
.burger span{
  position:absolute; left:10px; right:10px; height:2px; background:var(--text);
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.burger span:nth-child(1){ top:12px; }
.burger span:nth-child(2){ top:20px; }
.burger span:nth-child(3){ top:28px; }
.burger.is-open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* Menu mobile */
.mobile-nav{ display:none; border-top:1px solid var(--stroke); background:var(--bg); }
.mobile-nav.is-open{ display:block; }
.menu-mobile{
  list-style:none; padding:.5rem 1rem 1rem; margin:0; display:flex; flex-direction:column; gap:.25rem;
}
.menu-mobile a{
  display:block; padding:.9rem 0; text-decoration:none; color:var(--text);
  border-bottom:1px dashed var(--stroke);
}
.btn-reserver.mobile{ margin:.75rem 1rem 1rem; display:flex; }

/* ===== SECTION SUIVEZ-NOUS ===== */
.reseaux{
  background: var(--charcoal);
  color: #e9e9e9;
  padding: 28px 0;
  margin-bottom: 0;
}
.reseaux h2{
  color:#e9e9e9;
  margin: 0 0 18px;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
}

/* Icônes */
.social-icons{
  display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap;
}
.social-icons a{
  width:64px; height:64px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#1f1f1f; border-radius:16px; text-decoration:none;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.social-icons a img,
.social-icons a svg{
  max-width:36px; max-height:36px;
  width:auto; height:auto; display:block; object-fit:contain;
}
.social-icons a[href*="deliveroo"] img,
.social-icons a[href*="deliveroo"] svg{
  max-width:40px; max-height:40px;
}

/* ===== FOOTER COMPACT ===== */
.site-footer{
  background: var(--charcoal); color:#e9e9e9;
  border-top: 0; margin-top: 0;
}
.site-footer .foot-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem 0;
}
.site-footer .logo-mini img{
  height:68px;
  width:auto; display:block; filter:brightness(1.06) contrast(1.06);
}
.site-footer .menu-footer{ display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
.site-footer .menu-footer a{ color:#e9e9e9; text-decoration:none; opacity:.9; font-size:.95rem; }
.site-footer .menu-footer a:hover{ opacity:1; text-decoration:underline; }
.site-footer .copy{ color:#bdbdbd; margin-left:1rem; font-size:.9rem; }

/* Masque d’anciens layouts si présents */
.site-footer .foot-grid, .site-footer .livraison, .site-footer .social{ display:none !important; }

/* ===== Responsive ===== */
@media (max-width:1024px){
  .main-nav{ display:none; }
  .burger{ display:block; }
  .site-logo img{ height:70px; }
  .site-footer .foot-row{ flex-direction:column; align-items:flex-start; gap:.5rem; }
}
@media (max-width:768px){
  .site-logo img{ height:60px; }
  .site-footer .logo-mini img{ height:56px; }
  .social-icons a{ width:56px; height:56px; border-radius:14px; }
  .social-icons a img, .social-icons a svg{ max-width:32px; max-height:32px; }
}