/* Street Shakers — En-tête : logo, menu, bouton « Nous réserver », menu mobile */
/* ---------- HEADER ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:var(--noir); color:var(--ecru);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(246,246,242,0.14);
  padding-top:env(safe-area-inset-top,0px);
}
.navrow{ display:flex; align-items:center; justify-content:space-between; padding:10px 24px; max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:52px; height:52px; object-fit:contain; padding:0; background:var(--ecru); border:2px solid var(--jaune); border-radius:50%; transition:transform .35s ease; }
.brand:hover img{ transform:rotate(-8deg) scale(1.06); }
nav.links{ display:flex; gap:34px; font-size:0.86rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
nav.links a{ text-decoration:none; position:relative; padding:6px 0; }
/* liséré jaune autour des lettres du menu, décollé de 2 px (anneau noir de 2 px puis anneau jaune) */
nav.links a, .mobile-panel a:not(.nav-cta){
  text-shadow:
    1px 0px 0 var(--noir), 0.87px 0.5px 0 var(--noir), 0.5px 0.87px 0 var(--noir), 0px 1px 0 var(--noir),
    -0.5px 0.87px 0 var(--noir), -0.87px 0.5px 0 var(--noir), -1px 0px 0 var(--noir), -0.87px -0.5px 0 var(--noir),
    -0.5px -0.87px 0 var(--noir), -0px -1px 0 var(--noir), 0.5px -0.87px 0 var(--noir), 0.87px -0.5px 0 var(--noir),
    2px 0px 0 var(--noir), 1.85px 0.77px 0 var(--noir), 1.41px 1.41px 0 var(--noir), 0.77px 1.85px 0 var(--noir),
    0px 2px 0 var(--noir), -0.77px 1.85px 0 var(--noir), -1.41px 1.41px 0 var(--noir), -1.85px 0.77px 0 var(--noir),
    -2px 0px 0 var(--noir), -1.85px -0.77px 0 var(--noir), -1.41px -1.41px 0 var(--noir), -0.77px -1.85px 0 var(--noir),
    -0px -2px 0 var(--noir), 0.77px -1.85px 0 var(--noir), 1.41px -1.41px 0 var(--noir), 1.85px -0.77px 0 var(--noir),
    3px 0px 0 var(--jaune), 2.9px 0.78px 0 var(--jaune), 2.6px 1.5px 0 var(--jaune), 2.12px 2.12px 0 var(--jaune),
    1.5px 2.6px 0 var(--jaune), 0.78px 2.9px 0 var(--jaune), 0px 3px 0 var(--jaune), -0.78px 2.9px 0 var(--jaune),
    -1.5px 2.6px 0 var(--jaune), -2.12px 2.12px 0 var(--jaune), -2.6px 1.5px 0 var(--jaune), -2.9px 0.78px 0 var(--jaune),
    -3px 0px 0 var(--jaune), -2.9px -0.78px 0 var(--jaune), -2.6px -1.5px 0 var(--jaune), -2.12px -2.12px 0 var(--jaune),
    -1.5px -2.6px 0 var(--jaune), -0.78px -2.9px 0 var(--jaune), -0px -3px 0 var(--jaune), 0.78px -2.9px 0 var(--jaune),
    1.5px -2.6px 0 var(--jaune), 2.12px -2.12px 0 var(--jaune), 2.6px -1.5px 0 var(--jaune), 2.9px -0.78px 0 var(--jaune);
}
nav.links a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--rouge); transition:width .28s ease; }
nav.links a:hover::after, nav.links a:focus-visible::after{ width:100%; }
.nav-cta{
  background:var(--rouge); color:var(--ecru); padding:10px 22px; border-radius:999px;
  text-decoration:none; font-weight:700; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
  box-shadow:0 4px 0 #8f140f; transition:transform .18s ease, box-shadow .18s ease;
}
.nav-cta:hover{ transform:translateY(2px); box-shadow:0 2px 0 #8f140f; }
.burger{
  display:none; width:42px; height:42px; border-radius:50%; border:1px solid rgba(246,246,242,0.3);
  background:none; cursor:pointer; position:relative;
}
.burger span, .burger span::before, .burger span::after{
  content:""; position:absolute; left:11px; width:20px; height:2px; background:var(--ecru); transition:transform .25s ease, opacity .25s ease;
}
.burger span{ top:20px; }
.burger span::before{ top:-6px; left:0; }
.burger span::after{ top:6px; left:0; }
header.site:has(.mobile-panel:popover-open) .burger span{ background:transparent; }
header.site:has(.mobile-panel:popover-open) .burger span::before{ transform:translateY(6px) rotate(45deg); }
header.site:has(.mobile-panel:popover-open) .burger span::after{ transform:translateY(-6px) rotate(-45deg); }
.mobile-panel{
  display:none; flex-direction:column; gap:2px; border-top:1px solid rgba(246,246,242,0.14);
  background:var(--noir); color:var(--ecru);
}
.mobile-panel a{
  padding:16px 24px; text-decoration:none; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid rgba(246,246,242,0.14);
}
.mobile-panel a.nav-cta{ display:block; margin:14px 24px; text-align:center; border-bottom:none; }
.mobile-panel{ /* menu mobile : popover natif (s'ouvre/se ferme avec le bouton ☰, Échap ou un clic à côté) */
  position:fixed; inset:calc(72px + env(safe-area-inset-top,0px)) 0 auto 0; width:100%; max-width:none; margin:0; padding:0;
  border:0; border-top:1px solid rgba(246,246,242,0.14);
}
.mobile-panel:popover-open{ display:flex; }
.mobile-panel::backdrop{ background:rgba(10,10,10,0.35); }