/* ===== BARRE LATÉRALE PARTAGÉE ===== */
:root { --sb-w: 210px; }

#sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sb-w);
  background: #060d18;
  border-right: 1px solid #1e3a5f;
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow: hidden;
}

/* Logo */
#sb-logo {
  padding: 18px 16px 14px;
  border-bottom: 1px solid #1e3a5f;
}
#sb-logo a {
  font-size: 17px; font-weight: 800;
  color: #e2e8f0; text-decoration: none;
  display: flex; align-items: center; gap: 10px;
}
#sb-logo .sb-logo-text {
  background: linear-gradient(135deg, #22c55e, #60a5fa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Navigation */
#sb-nav {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.sb-sep {
  font-size: 10px; font-weight: 700;
  color: #334155; text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 10px 4px;
}

.sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #94a3b8; text-decoration: none;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  position: relative;
  user-select: none;
}
.sb-link:hover:not(.disabled) {
  background: #0f1f35; color: #e2e8f0;
}
.sb-link.actif {
  background: rgba(34,197,94,0.08);
  color: #22c55e; font-weight: 600;
}
.sb-link.actif::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: #22c55e;
  border-radius: 0 3px 3px 0;
}
.sb-link.disabled {
  opacity: 0.38; cursor: default;
}
.sb-icon { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
.sb-label { flex: 1; }
.sb-badge {
  font-size: 9px; font-weight: 700;
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 4px; padding: 1px 5px;
  text-transform: uppercase; letter-spacing: 0.3px;
}

/* Version */
#sb-footer {
  padding: 12px 16px;
  border-top: 1px solid #1e3a5f;
  font-size: 11px; color: #334155;
}

/* ===== DÉCALAGE DU CONTENU ===== */
body.avec-sidebar {
  padding-left: var(--sb-w);
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  :root { --sb-w: 0px; }
  #sidebar {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; height: 56px;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid #1e3a5f;
  }
  #sb-logo { padding: 0 14px; border-bottom: none; border-right: 1px solid #1e3a5f; display: flex; align-items: center; }
  #sb-logo .sb-logo-text { display: none; }
  #sb-nav {
    flex-direction: row; padding: 0 4px;
    gap: 0; overflow-x: auto; align-items: center;
    flex: 1;
  }
  .sb-sep, #sb-footer { display: none; }
  .sb-link { padding: 6px 8px; flex-direction: column; gap: 1px; font-size: 9px; border-radius: 8px; flex-shrink: 0; }
  .sb-link.actif::before { display: none; }
  .sb-badge { display: none; }
  .sb-icon { font-size: 18px; width: auto; }
  .sb-label { white-space: nowrap; text-align: center; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
  body.avec-sidebar { padding-left: 0; padding-bottom: 56px; }
}