/* --- Minimal utilities used by header/menu (no Tailwind required) --- */
.hidden{display:none}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}
.gap-6{gap:1.5rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:.5rem}
.rounded-md{border-radius:.375rem}
.border{border:1px solid #e5e7eb}
.border-neutral-300{border-color:#d1d5db}
.px-3{padding-left:.75rem;padding-right:.75rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.bg-white{background:#fff}
.bg-black{background:#000}
.text-white{color:#fff}
.text-neutral-900{color:#0a0a0a}
.max-w-7xl{max-width:80rem}
.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}

/* responsive visibility used by your markup */
.sm\:inline-flex{display:none}
.md\:flex{display:none}
.md\:hidden{display:block}
/* force the responsive overrides to win even if another CSS re-applies .hidden later */
@media (min-width:640px){.sm\:inline-flex{display:inline-flex !important}}
@media (min-width:768px){.md\:flex{display:flex !important}.md\:hidden{display:none !important}}

/* --- Header structure/look --- */
header.fixed{position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid rgba(23,23,23,.14);
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px)
}
header > .mx-auto{display:flex;align-items:center;justify-content:space-between}
@media (min-width:1024px){header > .mx-auto{padding-left:2rem;padding-right:2rem}}
/* Logo square */
header a .rounded-md{display:grid;place-content:center;width:1.5rem;height:1.5rem;overflow:hidden}

/* Desktop nav */
header nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem}
header nav a{color:#0a0a0a;text-decoration:none;font-size:.9rem}
header nav a:hover{opacity:.8}

/* Header cart button */
.header-cart{
  align-items:center;gap:8px;border:1px solid #e5e7eb;border-radius:9999px;
  padding:6px 10px;background:#fff;color:#0a0a0a;font-size:14px;font-weight:500;
  text-decoration:none
}
.header-cart:hover{background:#f7f7f7}
.header-cart svg{width:16px;height:16px}
.header-cart .badge{
  min-width:20px;height:20px;padding:0 6px;border-radius:9999px;display:inline-grid;
  place-content:center;background:#0a0a0a;color:#fff;font-weight:700;font-size:12px
}
.header-cart .badge[aria-hidden="true"]{display:none}

/* Mobile bottom sheet */
#msMobile{position:fixed;inset:0;z-index:55}
#msMobile.hidden{display:none}
#msMobile .scrim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
#msSheet{
  position:absolute;left:0;right:0;bottom:0;transform:translateY(100%);
  border-top-left-radius:16px;border-top-right-radius:16px;background:#fff;
  box-shadow:0 -8px 30px rgba(0,0,0,.12);transition:transform .3s ease;
  will-change:transform
}
#msSheet .ms-menu{list-style:none;margin:0;padding:0}
#msSheet .ms-menu li{list-style:none}
#msSheet .ms-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;
  text-decoration:none;color:#0a0a0a
}
#msSheet .ms-menu a:hover{background:#f5f5f5}
#msSheet .ms-menu a::after{content:"›";opacity:.45}

/* “Bientôt” badge */
header nav ul li.menu-coming-soon > a{position:relative;padding-right:10px}
header nav ul li.menu-coming-soon > a::after{
  content:"Bientôt";position:absolute;top:-14px;right:-16px;height:18px;line-height:18px;
  padding:0 8px;border-radius:9999px;background:#111;color:#fff;border:1px solid #111;
  font-size:10px;font-weight:600;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.12);
  pointer-events:none
}
#msSheet .ms-menu li.menu-coming-soon > a{position:relative}
#msSheet .ms-menu li.menu-coming-soon > a::before{
  content:"Bientôt";position:absolute;right:36px;top:50%;transform:translateY(-50%);
  display:inline-grid;place-content:center;height:22px;padding:0 9px;border-radius:9999px;
  border:1px solid #111;background:#111;color:#fff;font-size:11px;font-weight:600;
  line-height:1;box-shadow:0 6px 18px rgba(0,0,0,.12)
}

/* --- Header fixes --- */
/* Force the desktop nav to show even if .hidden sticks on some pages */
@media (min-width:768px){
  header nav.hidden{display:flex !important;}
  header nav.hidden ul{display:flex; gap:1.5rem;}
}

/* Make sure the mobile sheet becomes visible when "hidden" is removed */
#msMobile{display:block}
#msMobile.hidden{display:none}

/* === Header-scoped visibility overrides (win against later .hidden rules) === */
@media (min-width:640px){
  /* account / login buttons: class="hidden sm:inline-flex ..." */
  header .sm\:inline-flex{display:inline-flex !important;}
  header .hidden.sm\:inline-flex{display:inline-flex !important;}
}

@media (min-width:768px){
  /* primary nav: class="hidden md:flex" */
  header .md\:flex{display:flex !important;}         /* generic md:flex inside header */
  header nav.hidden{display:flex !important;}        /* specifically the nav when it has .hidden */
}

/* ===== Mobile sheet open state & scroll lock ===== */
#msMobile.is-open #msSheet { transform: translateY(0); }
body.menu-open { overflow: hidden; }

/* Reduce flicker when we hide after transition */
#msMobile[aria-hidden="true"] #msSheet { transform: translateY(100%); }

/* Make sure clicks on the dark scrim can close the menu */
#msMobile .scrim { cursor: pointer; }

/* Extra belt-and-suspenders: desktop nav must show on md+ even if something adds .hidden */
@media (min-width:768px){
  header nav.hidden{display:flex !important;}
  header nav ul{display:flex !important; gap:1.5rem !important;}
}