/* ═══════════════════════════════════════════════════════════════
   SENVIRTUEL — NAV SYSTEM v1
   Système de navigation global — Premium Dark Marketplace
   Couvre : header desktop, mobile drawer, bottom nav, admin sidebar
   ═══════════════════════════════════════════════════════════════ */

/* ══ RESET & BASE HEADER ══════════════════════════════════════ */

/* Header unifié */
#mainHeader {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: 64px;
  background: rgba(8, 13, 29, 0.88) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .3s, box-shadow .3s, height .25s;
}
#mainHeader.scrolled,
#mainHeader.compact {
  background: rgba(5, 8, 22, 0.97) !important;
  box-shadow: 0 2px 32px rgba(0,0,0,.4);
}

/* Wrapper interne 3 colonnes */
.nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 16px;
}

/* Cache la barre de recherche dans le header (gardée en DOM pour compatibilité JS) */
.header-search { display: none !important; }

/* Cache le WA button ajouté par sv-patch.js */
.header-wa-btn { display: none !important; }

/* ══ LOGO ══════════════════════════════════════════════════════ */

.sv-logo-wrapper,
.sv-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}
.sv-brand-mark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--indigo,#5B3DF5), var(--violet,#8A5CFF)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -1px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 14px rgba(91,61,245,.35) !important;
}
.sv-brand-name {
  font-family: var(--font-display,'Space Grotesk',sans-serif) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--txt1,#F5F7FF) !important;
  letter-spacing: -.3px !important;
}
.sv-brand-name span {
  background: linear-gradient(135deg, var(--cyan,#00D1FF), var(--indigo,#5B3DF5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══ NAV CENTRE (liens principaux) ══════════════════════════════ */

.nav-links,
#svDesktopNav {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Item générique */
.nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 8px 13px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--txt2,#A7B0C4) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: color .2s, background .2s !important;
  white-space: nowrap !important;
  position: relative !important;
  user-select: none !important;
  border: none !important;
  background: none !important;
  font-family: inherit !important;
}
.nav-item:hover {
  color: var(--txt1,#F5F7FF) !important;
  background: rgba(255,255,255,.06) !important;
}
.nav-item.active {
  color: var(--txt1,#F5F7FF) !important;
  background: rgba(91,61,245,.12) !important;
}
.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 5px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--indigo,#5B3DF5), var(--violet,#8A5CFF));
}
.nav-item svg { flex-shrink: 0; opacity: .75; }
.nav-item:hover svg, .nav-item.active svg { opacity: 1; }

/* Boutique — item highlight avec mega menu */
.nav-item.nav-item-cta {
  color: var(--txt1,#F5F7FF) !important;
  background: rgba(91,61,245,.1) !important;
  border: 1px solid rgba(91,61,245,.2) !important;
}
.nav-item.nav-item-cta:hover,
.nav-item.nav-item-cta.active {
  background: rgba(91,61,245,.2) !important;
  border-color: rgba(91,61,245,.35) !important;
}

/* SUPPRIMER visuellement les anciens éléments search et WA */
.nav-item-search,
.nav-item-wa { display: none !important; }

/* ══ MEGA MENU ════════════════════════════════════════════════ */

.sv-mega-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 560px;
  background: var(--bg2,#0E1324);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  z-index: 600;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .2s, transform .2s;
}
.nav-item-cta:hover .sv-mega-menu,
.nav-item-cta:focus-within .sv-mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.sv-mega-menu-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--txt3,#6F7890);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  padding: 0 4px;
}
.sv-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.sv-mega-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s;
  text-align: center;
}
.sv-mega-item:hover {
  background: rgba(91,61,245,.1);
}
.sv-mega-ico { font-size: 22px; }
.sv-mega-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--txt1,#F5F7FF);
}
.sv-mega-count {
  font-size: 10px;
  color: var(--txt3,#6F7890);
}
.sv-mega-footer {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.sv-mega-footer-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt2,#A7B0C4);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.sv-mega-footer-link:hover {
  background: rgba(255,255,255,.06);
  color: var(--txt1,#F5F7FF);
}

/* ══ SECTION DROITE (auth + cart) ══════════════════════════════ */

.header-end,
.sv-nav-auth,
#navAuthBtns {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Bouton panier */
.svnav-cart-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: var(--txt1,#F5F7FF) !important;
  cursor: pointer !important;
  transition: background .2s, border-color .2s !important;
  font-size: 0 !important;
}
.svnav-cart-btn:hover {
  background: rgba(91,61,245,.15) !important;
  border-color: rgba(91,61,245,.3) !important;
}
.svnav-cart-badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, var(--indigo,#5B3DF5), var(--violet,#8A5CFF)) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--bg0,#050816) !important;
  font-family: var(--font-mono,'JetBrains Mono',monospace) !important;
}

/* Bouton ghost (Connexion) */
.sv-nav-btn-ghost {
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(255,255,255,.14) !important;
  background: transparent !important;
  color: var(--txt1,#F5F7FF) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: border-color .2s, background .2s !important;
  white-space: nowrap !important;
  font-family: inherit !important;
}
.sv-nav-btn-ghost:hover {
  border-color: rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.05) !important;
}

/* Bouton primary (Créer un compte) */
.sv-nav-btn-primary {
  padding: 8px 16px !important;
  border-radius: 10px !important;
  border: none !important;
  background: linear-gradient(135deg, var(--indigo,#5B3DF5), var(--violet,#8A5CFF)) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: opacity .2s, box-shadow .2s !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  box-shadow: 0 4px 14px rgba(91,61,245,.3) !important;
}
.sv-nav-btn-primary:hover {
  opacity: .92 !important;
  box-shadow: 0 6px 20px rgba(91,61,245,.45) !important;
}

/* Bouton compte connecté */
.sv-nav-btn-account {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px 6px 6px !important;
  border-radius: 50px !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--txt1,#F5F7FF) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: border-color .2s, background .2s !important;
  font-family: inherit !important;
}
.sv-nav-btn-account:hover {
  border-color: rgba(91,61,245,.4) !important;
  background: rgba(91,61,245,.1) !important;
}
.sv-nav-avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--indigo,#5B3DF5), var(--violet,#8A5CFF)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}

/* Hamburger mobile */
.svnav-hamburger,
.mobile-menu-btn,
.hamburger {
  display: none !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  cursor: pointer !important;
  transition: background .2s !important;
  flex-shrink: 0 !important;
}
.svnav-hamburger:hover,
.mobile-menu-btn:hover,
.hamburger:hover {
  background: rgba(255,255,255,.1) !important;
}
/* Lignes du hamburger */
.svnav-hamburger span,
.ham-line,
.hamburger span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--txt1,#F5F7FF) !important;
  transition: transform .3s cubic-bezier(.25,.46,.45,.94), opacity .3s !important;
  pointer-events: none !important;
}
/* Animation → X quand ouvert (la JS ajoute .is-open) */
.hamburger.is-open span:nth-child(1),
.mobile-menu-btn.is-open .ham-line:nth-child(1),
.mobile-menu-btn.open .ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.hamburger.is-open span:nth-child(2),
.mobile-menu-btn.is-open .ham-line:nth-child(2),
.mobile-menu-btn.open .ham-line:nth-child(2) { opacity: 0 !important; }
.hamburger.is-open span:nth-child(3),
.mobile-menu-btn.is-open .ham-line:nth-child(3),
.mobile-menu-btn.open .ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* ══ THEME TOGGLE ═════════════════════════════════════════════ */
.theme-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  cursor: pointer !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s !important;
}
.theme-toggle:hover { background: rgba(255,255,255,.1) !important; }

/* Ancien cart dot — maintenu pour compatibilité */
.cart-dot.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ══ RESPONSIVE DESKTOP → MOBILE ════════════════════════════ */

@media (max-width: 1024px) {
  .sv-mega-grid { grid-template-columns: repeat(3, 1fr); }
  .sv-mega-menu { min-width: 420px; }
}

@media (max-width: 820px) {
  .nav-links, #svDesktopNav { display: none !important; }
  .svnav-hamburger, .mobile-menu-btn, .hamburger { display: flex !important; }
  .sv-nav-btn-ghost { display: none !important; }
  .sv-nav-btn-primary { display: none !important; }
  .sv-nav-btn-account { display: none !important; }
  .nav-inner { padding: 0 16px; }
}

@media (max-width: 480px) {
  #mainHeader { height: 56px !important; }
}
@media (max-width: 340px) {
  .sv-brand-name { display: none !important; }
}

/* ══ CAT BAR ══════════════════════════════════════════════════ */
.cat-bar {
  position: fixed !important;
  top: 64px !important;
  left: 0; right: 0;
  z-index: 499;
  background: rgba(8,13,29,.95) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  display: none;
}
.cat-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 20px;
  max-width: 1280px;
  margin: 0 auto;
}
.cat-inner::-webkit-scrollbar { display: none; }
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt2,#A7B0C4);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.cat-pill:hover {
  background: rgba(91,61,245,.1);
  border-color: rgba(91,61,245,.25);
  color: var(--txt1,#F5F7FF);
}
.cat-pill.active {
  background: rgba(91,61,245,.18);
  border-color: rgba(91,61,245,.4);
  color: var(--txt1,#F5F7FF);
  font-weight: 700;
}

/* ══ MOBILE DRAWER PREMIUM ════════════════════════════════════ */

#mobileDrawerOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1199 !important;
  background: rgba(5,8,22,.8) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .3s !important;
  backdrop-filter: blur(4px) !important;
}
#mobileDrawerOverlay.open {
  opacity: 1 !important;
  pointer-events: all !important;
}

#mobileDrawer {
  position: fixed !important;
  top: 0 !important; left: 0 !important; bottom: 0 !important;
  width: min(300px, 86vw) !important;
  z-index: 1200 !important;
  background: var(--bg1,#080D1D) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  transform: translateX(-100%) !important;
  transition: transform .32s cubic-bezier(.22,.68,0,1.1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
#mobileDrawer.open {
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* Header du drawer */
.svnav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.svnav-drawer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.svnav-drawer-brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--indigo,#5B3DF5), var(--violet,#8A5CFF));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff;
}
.svnav-drawer-brand-name {
  font-size: 15px; font-weight: 800;
  color: var(--txt1,#F5F7FF);
  font-family: var(--font-display,'Space Grotesk',sans-serif);
}
.svnav-drawer-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; color: var(--txt2,#A7B0C4);
  transition: background .2s;
}
.svnav-drawer-close:hover { background: rgba(255,255,255,.1); color: var(--txt1,#F5F7FF); }

/* Corps scrollable */
.svnav-drawer-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 12px 0;
}
.svnav-drawer-body::-webkit-scrollbar { display: none; }

/* Section label */
.svnav-drawer-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--txt3,#6F7890);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 20px 5px;
}

/* Lien de navigation */
.svnav-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt2,#A7B0C4);
  cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none;
}
.svnav-drawer-link:hover,
.svnav-drawer-link.active {
  background: rgba(91,61,245,.08);
  color: var(--txt1,#F5F7FF);
}
.svnav-drawer-link.active { color: var(--cyan,#00D1FF); }
.svnav-drawer-link-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.svnav-drawer-link.active .svnav-drawer-link-ico {
  background: rgba(0,209,255,.12);
}

/* Grille catégories */
.svnav-drawer-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px 16px 10px;
}
.svnav-drawer-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  cursor: pointer;
  transition: all .2s;
}
.svnav-drawer-cat:hover {
  background: rgba(91,61,245,.1);
  border-color: rgba(91,61,245,.25);
}
.svnav-drawer-cat-ico { font-size: 18px; }
.svnav-drawer-cat-name { font-size: 12px; font-weight: 700; color: var(--txt1,#F5F7FF); }

/* Divider */
.svnav-drawer-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 8px 16px;
}

/* Footer drawer */
.svnav-drawer-footer {
  padding: 14px 16px 20px;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.svnav-drawer-wa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37,211,102,.14), rgba(18,140,62,.08));
  border: 1px solid rgba(37,211,102,.25);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
}
.svnav-drawer-wa:hover {
  background: linear-gradient(135deg, rgba(37,211,102,.22), rgba(18,140,62,.14));
  border-color: rgba(37,211,102,.45);
}
.svnav-drawer-wa-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.svnav-drawer-wa-text { flex: 1; }
.svnav-drawer-wa-name {
  font-size: 13px; font-weight: 800;
  color: var(--txt1,#F5F7FF);
}
.svnav-drawer-wa-sub {
  font-size: 11px; color: rgba(37,211,102,.85);
  margin-top: 1px;
}

/* ══ BOTTOM NAV MOBILE ════════════════════════════════════════ */

/* Ancien #bottomNav (panier.html) */
#bottomNav {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 490 !important;
  background: rgba(8,13,29,.97) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  padding: 6px 0 env(safe-area-inset-bottom, 0px) !important;
}

/* Nouveau #svBottomNav (index.html) */
#svBottomNav, .sv-bottom-nav {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 490 !important;
  background: rgba(8,13,29,.97) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  padding: 6px 0 env(safe-area-inset-bottom, 0px) !important;
}

.bnav-item, .sv-bn-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 6px 4px !important;
  cursor: pointer !important;
  transition: color .2s !important;
  user-select: none !important;
  position: relative !important;
}
.bnav-item .bnav-ico-wrap,
.sv-bn-item .sv-bn-icon { opacity: .5; transition: opacity .2s; }
.bnav-item.active .bnav-ico-wrap,
.sv-bn-item.active .sv-bn-icon { opacity: 1; }
.bnav-item .bnav-lbl,
.sv-bn-item .sv-bn-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--txt3,#6F7890) !important;
  transition: color .2s !important;
}
.bnav-item.active .bnav-lbl,
.sv-bn-item.active .sv-bn-label {
  color: var(--cyan,#00D1FF) !important;
}
.bnav-badge {
  position: absolute !important;
  top: 2px !important; right: 20% !important;
  min-width: 16px !important; height: 16px !important;
  padding: 0 3px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--indigo,#5B3DF5), var(--violet,#8A5CFF)) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-mono,'JetBrains Mono',monospace) !important;
}

/* Cacher bottom nav sur desktop */
@media (min-width: 821px) {
  #bottomNav, #svBottomNav, .sv-bottom-nav { display: none !important; }
}

/* ══ ADMIN SIDEBAR PREMIUM ═══════════════════════════════════ */

.admin-layout {
  display: flex !important;
  min-height: 100vh !important;
  padding-top: 64px !important;
}

.admin-sidebar {
  width: 230px !important;
  flex-shrink: 0 !important;
  background: var(--bg1,#080D1D) !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  position: sticky !important;
  top: 64px !important;
  height: calc(100vh - 64px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  padding: 16px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.admin-sidebar::-webkit-scrollbar { width: 3px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* Section label sidebar */
.admin-sidebar-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--txt3,#6F7890) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 10px 10px 5px !important;
  display: block !important;
}

.admin-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--txt2,#A7B0C4) !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
  user-select: none !important;
  position: relative !important;
}
.admin-nav-item:hover {
  background: rgba(255,255,255,.06) !important;
  color: var(--txt1,#F5F7FF) !important;
}
.admin-nav-item.active {
  background: rgba(91,61,245,.15) !important;
  color: var(--txt1,#F5F7FF) !important;
  font-weight: 700 !important;
}
.admin-nav-item.active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important; height: 20px !important;
  border-radius: 0 2px 2px 0 !important;
  background: linear-gradient(180deg, var(--indigo,#5B3DF5), var(--violet,#8A5CFF)) !important;
}
.admin-nav-icon { font-size: 16px !important; flex-shrink: 0 !important; }
.nav-label { flex: 1 !important; }
.admin-nav-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border-radius: 10px !important;
  background: var(--red,#FF5277) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.admin-main {
  flex: 1 !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

/* Admin topbar */
.admin-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  background: var(--bg1,#080D1D) !important;
  position: sticky !important;
  top: 64px !important;
  z-index: 10 !important;
}
.admin-topbar-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--txt1,#F5F7FF) !important;
  font-family: var(--font-display,'Space Grotesk',sans-serif) !important;
}

/* ══ COMPTE (user dashboard) NAV TABS ════════════════════════ */

.account-tabs-nav {
  display: flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: var(--bg2,#0E1324) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.account-tabs-nav::-webkit-scrollbar { display: none !important; }
.account-tab-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 16px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--txt2,#A7B0C4) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .2s, color .2s !important;
  border: none !important;
  background: none !important;
  font-family: inherit !important;
}
.account-tab-item:hover { color: var(--txt1,#F5F7FF) !important; background: rgba(255,255,255,.05) !important; }
.account-tab-item.active {
  background: rgba(91,61,245,.2) !important;
  color: var(--txt1,#F5F7FF) !important;
  box-shadow: 0 2px 10px rgba(91,61,245,.2) !important;
}

/* ══ SCROLL PADDING ════════════════════════════════════════════ */
html {
  scroll-padding-top: 80px;
}
body {
  padding-top: 0;
}
#app {
  min-height: calc(100vh - 64px);
}

/* ══ PROMO BAR ════════════════════════════════════════════════ */
.promo-bandeau {
  position: fixed !important;
  top: 64px !important;
  z-index: 498 !important;
}
#referralBanner {
  position: fixed !important;
  top: 64px !important;
  z-index: 499 !important;
}

/* ══ ANIMATIONS NAVIGATION ════════════════════════════════════ */
@keyframes navSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-item { animation: navSlideIn .3s ease both; }
.nav-item:nth-child(1) { animation-delay: .03s; }
.nav-item:nth-child(2) { animation-delay: .06s; }
.nav-item:nth-child(3) { animation-delay: .09s; }
.nav-item:nth-child(4) { animation-delay: .12s; }
.nav-item:nth-child(5) { animation-delay: .15s; }

/* Focus accessibility */
.nav-item:focus-visible,
.sv-nav-btn-ghost:focus-visible,
.sv-nav-btn-primary:focus-visible,
.svnav-cart-btn:focus-visible,
.sv-nav-cart:focus-visible,
.hamburger:focus-visible {
  outline: 2px solid var(--cyan,#00D1FF) !important;
  outline-offset: 2px !important;
}

/* ══ ALIAS CART BUTTON (sv-nav-cart = alias de svnav-cart-btn) ═ */
.sv-nav-cart,
.nav-actions button.sv-nav-cart {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: var(--txt1,#F5F7FF) !important;
  cursor: pointer !important;
  transition: background .2s, border-color .2s !important;
  flex-shrink: 0 !important;
}
.sv-nav-cart:hover { background: rgba(91,61,245,.15) !important; border-color: rgba(91,61,245,.3) !important; }
.sv-nav-cart .cart-badge {
  position: absolute !important;
  top: -6px !important; right: -6px !important;
  min-width: 18px !important; height: 18px !important;
  padding: 0 4px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, var(--indigo,#5B3DF5), var(--violet,#8A5CFF)) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--bg0,#050816) !important;
}
.sv-nav-cart .cart-badge.show,
.sv-nav-cart .cart-badge[style*="flex"],
.sv-nav-cart .cart-badge:not([style*="none"]) { display: flex !important; }

/* ══ NAV ACTIONS (conteneur droite header) ════════════════════ */
.nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* ══ BADGES STATUTS ÉTENDUS (nouveaux statuts v2) ════════════ */
.status-verifying   { background: rgba(96,170,255,.12)  !important; color: #60aaff  !important; }
.status-delivering  { background: rgba(138,92,255,.12)  !important; color: #8A5CFF  !important; }
.status-done        { background: rgba(34,230,168,.12)  !important; color: #22E6A8  !important; }
.status-dispute     { background: rgba(255,82,119,.12)  !important; color: #FF5277  !important; }

/* ══ TRANSITIONS BOTTOM NAV ═══════════════════════════════════ */
.bnav-item { transition: color .2s !important; }
.bnav-item.active .bnav-ico { color: var(--cyan,#00D1FF) !important; }
.bnav-item.active .bnav-ico svg { stroke: var(--cyan,#00D1FF) !important; }
.bnav-badge.show { display: flex !important; }

/* ══ ACTIVE INDICATOR NAV — barre collée au bas ═══════════════ */
.nav-item.active::after {
  bottom: 0 !important;
}

/* ══ SKIP LINK ACCESSIBILITÉ ══════════════════════════════════ */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 16px;
  background: var(--indigo,#5B3DF5);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-size: 13px;
  font-weight: 700;
  z-index: 9999;
  transition: top .2s;
}
.skip-to-content:focus { top: 0; }