/* ═══════════════════════════════════════════════════════════════
   LYANE — Sidebar v2 (v313.29)
   Restyle de l'aside .sidebar sur les pages prescripteur.
   Override les styles existants sans modifier le HTML.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --sb2-sage:        #1d4a3d;
  --sb2-sage-deep:   #163828;
  --sb2-sage-light:  #2d6849;
  --sb2-gold:        #b8d142;
  --sb2-gold-dim:    #9ab81a;
  --sb2-white-soft:  rgba(255, 255, 255, 0.92);
  --sb2-white-faint: rgba(255, 255, 255, 0.55);
}

/* Container — fond + spacing aéré + width élargie pour labels longs */
:root {
  --sidebar-w: 305px !important;  /* v2 — 280px → 305px pour "Welcome to the Jungle" en entier */
}
.sidebar {
  background: var(--sb2-sage) !important;
  padding: 28px 18px 18px !important;
  border-radius: 0 22px 22px 0 !important;
  width: 305px !important;
  display: flex;
  flex-direction: column;
}
/* Décaler la zone main pour matcher la nouvelle width sidebar */
.main {
  margin-left: 305px !important;
}
@media (max-width: 768px) {
  .main { margin-left: 0 !important; }
}

/* ── Brand : transforme "L + LYANE" en "LYANE / BY BATILIAN" ── */
.sidebar-brand {
  padding: 0 8px 16px 8px !important;
  margin-bottom: 12px !important;          /* v3 — réduit 38px → 12px (était trop grand) */
  border-bottom: 1px solid rgba(255,255,255,.08) !important;  /* séparateur subtle */
  display: block !important;
}
.sidebar-brand svg {
  /* On masque le L circulaire actuel */
  display: none !important;
}
.sidebar-brand .brand-name {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  display: block;
}
.sidebar-brand .brand-name::after {
  content: 'BY BATILIAN';
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sb2-gold);
  letter-spacing: 0.22em;
  margin-top: 6px;
}

/* ── Section labels ── */
.sidebar-section {
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sb2-white-faint) !important;
  padding: 10px 16px 6px !important;       /* v3 — réduit 22px → 10px */
  font-weight: 600 !important;
  background: transparent !important;
}

/* ── Nav items — couleur blanche, padding aéré, label sans tronquage ── */
.nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 14px !important;
  margin: 2px 0 !important;
  border-radius: 10px !important;
  color: var(--sb2-white-soft) !important;
  text-decoration: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  transition: background 0.15s, color 0.15s !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  position: relative;
  white-space: nowrap !important;     /* v2 — pas de wrap */
  overflow: hidden !important;
  text-overflow: clip !important;     /* v2 — pas d'ellipsis "..." */
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
}
.nav-item .icon {
  width: 22px !important;
  height: 22px !important;
  color: var(--sb2-white-soft) !important;
  flex-shrink: 0 !important;
}

/* ── Item actif : card avec bordure et icône or ── */
.nav-item.active {
  background: var(--sb2-sage-deep) !important;
  border: 1px solid var(--sb2-sage-light) !important;
  padding: 14px 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
}
.nav-item.active .icon {
  color: var(--sb2-gold) !important;
}

/* ── Welcome to the Jungle : italic Playfair ── */
.nav-item-jungle .jungle-label,
.nav-item.italic .label {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 1rem !important;          /* v2 — 1.05rem → 1rem pour rentrer en entier */
  letter-spacing: 0.005em !important;
}

/* Badge notification (pastille rouge sur jungle) */
.nav-badge {
  width: 9px !important;
  height: 9px !important;
  background: #d63a3a !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-left: auto !important;
  box-shadow: 0 0 0 2px var(--sb2-sage) !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  min-width: 0 !important;
}

/* ── Sidebar footer : user card stylée ── */
.sidebar-footer {
  margin-top: auto !important;
  padding: 14px 14px !important;
  background: var(--sb2-sage-deep) !important;
  border-radius: 14px !important;
  border-top: none !important;
}
.sidebar-footer .user-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.sidebar-footer .user-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--sb2-gold) 0%, var(--sb2-gold-dim) 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--sb2-sage) !important;
  letter-spacing: 0.04em !important;
  flex-shrink: 0 !important;
  border: none !important;
}
.sidebar-footer .user-name {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 2px !important;
  line-height: 1.2 !important;
}
.sidebar-footer .user-rank {
  font-size: 0.72rem !important;
  color: var(--sb2-gold) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* Menu collapse au clic du footer (dropdown) — v3 fond sage profond + texte blanc */
/* Le menu peut apparaître en popup détaché OU collé — on force fond + couleurs sur les 2 cas */
.sidebar-menu,
.sidebar-footer .sidebar-menu {
  background: var(--sb2-sage-deep) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  margin-top: 12px !important;
}
.sidebar-menu-item,
.sidebar-footer .sidebar-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--sb2-white-soft) !important;
  background: transparent !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
}
.sidebar-menu-item svg,
.sidebar-footer .sidebar-menu-item svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--sb2-white-soft) !important;
  flex-shrink: 0 !important;
}
.sidebar-menu-item:hover,
.sidebar-footer .sidebar-menu-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}
.sidebar-menu-item.danger,
.sidebar-footer .sidebar-menu-item.danger {
  color: #ff9b9b !important;
}
.sidebar-menu-item.danger svg,
.sidebar-footer .sidebar-menu-item.danger svg {
  color: #ff9b9b !important;
}
.sidebar-menu-item.danger:hover,
.sidebar-footer .sidebar-menu-item.danger:hover {
  background: rgba(214, 58, 58, 0.18) !important;
  color: #ffb0b0 !important;
}
.sidebar-menu-sep,
.sidebar-footer .sidebar-menu-sep {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 6px 0 !important;
}

/* Chevron rotation on open */
.sidebar-footer .footer-chevron {
  transition: transform 0.2s !important;
}
.sidebar-footer.open .footer-chevron {
  transform: rotate(180deg) !important;
}

/* Mobile responsive : conserver pattern translateX existant */
@media (max-width: 768px) {
  .sidebar {
    border-radius: 0 !important;
    padding: 24px 14px 14px !important;
  }
}