.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: #fff; border: 1.5px solid var(--rule, #E5E7EB);
  border-radius: 10px; cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--paper, #FAFAFA); }
.nav-toggle svg { display: block; }

.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(16, 24, 40, 0.28);
  z-index: 90;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 85vw);
  background: #fff;
  z-index: 91;
  padding: 20px 18px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.nav-drawer.open { transform: translateX(0); box-shadow: -12px 0 32px rgba(16, 24, 40, 0.14); }

.nav-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.nav-drawer-title {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 15px; color: var(--ink, #14161A);
}
.nav-close {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 9px; cursor: pointer; color: var(--muted, #6B7280);
}
.nav-close:hover { background: var(--paper, #FAFAFA); }

.nav-list { display: flex; flex-direction: column; gap: 2px; }
.nav-list a, .nav-list button {
  display: block; width: 100%; text-align: left;
  padding: 12px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--ink, #14161A);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
}
.nav-list a:hover, .nav-list button:hover { background: var(--paper, #FAFAFA); }
.nav-list a.nav-current { color: var(--accent, #5B4FE9); background: var(--accent-tint, #F0EEFE); }
.nav-list a.nav-empty { color: var(--soft, #9CA3AF); }
.nav-list a.nav-empty::after { content: "Bientôt"; margin-left: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--soft, #9CA3AF); background: var(--paper, #FAFAFA); padding: 2px 6px; border-radius: 999px; }

.nav-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--soft, #9CA3AF); padding: 10px 12px 4px;
}

.nav-sep { height: 1px; background: var(--rule, #E5E7EB); margin: 12px 0; border: 0; }

.nav-top-btn {
  color: var(--accent, #5B4FE9) !important;
  display: flex !important; align-items: center; gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-overlay { transition: none; }
}