/* ═══════════════════════════════════════════════════════════════════════
   Structure de l'application
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: .5px solid var(--border);
  padding: 28px 18px;
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  overflow-y: auto; overscroll-behavior: contain;
}

.logo {
  display: flex; align-items: center; gap: 11px;
  padding: 0 10px 24px;
  border-bottom: .5px solid var(--border);
  margin-bottom: 22px;
}
.logo-mark {
  width: 32px; height: 32px; background: var(--accent);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.logo:hover .logo-mark { transform: scale(1.06) rotate(-4deg); box-shadow: var(--shadow-accent); }
.logo-mark svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 1.7; }
.logo-text { font-size: 15px; font-weight: 500; color: var(--text-dark); letter-spacing: -.3px; line-height: 1.15; }
.logo-sub { font-size: 10.5px; color: var(--text-light); letter-spacing: .4px; }

.nav { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text-mid); cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  position: relative;
}
.nav-item:hover { background: var(--gray-100); color: var(--text-dark); transform: translateX(2px); }
.nav-item.active {
  background: var(--bg-card); color: var(--text-dark); font-weight: 500;
  box-shadow: var(--shadow-nav);
}
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; background: var(--accent); border-radius: 0 3px 3px 0;
  animation: fadeIn .3s ease both;
}
.nav-item svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; }
.nav-count {
  margin-left: auto; font-size: 11px; font-weight: 500;
  background: var(--gray-100); color: var(--text-mid);
  padding: 1px 7px; border-radius: 999px; transition: all .2s;
}
.nav-item.active .nav-count { background: var(--accent-light); color: var(--accent-text); }
.nav-count.is-alert { background: var(--alert-bg); color: var(--alert-text); }

.nav-section-label {
  font-size: 11px; font-weight: 500; color: var(--text-light);
  text-transform: uppercase; letter-spacing: .7px; padding: 20px 13px 8px;
}

.sidebar-footer {
  margin-top: auto; padding: 16px 10px 0; border-top: .5px solid var(--border);
  display: flex; align-items: center; gap: 11px;
  transition: opacity .2s;
}
.sidebar-footer:hover { opacity: .78; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; color: var(--accent-dark); flex-shrink: 0;
}
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.avatar.xs { width: 22px; height: 22px; font-size: 9px; }
.avatar-name { font-size: 13.5px; font-weight: 500; color: var(--text-dark); }
.avatar-role { font-size: 11.5px; color: var(--text-light); }

/* ── Zone principale ─────────────────────────────────────────── */
.main { margin-left: var(--sidebar-w); flex: 1; padding: 30px 36px 56px; min-height: 100vh; min-width: 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-bottom: 26px;
  animation: fadeSlideUp .5s var(--ease-out) both;
}
.topbar h1 { font-size: 22px; font-weight: 500; letter-spacing: -.4px; }
.topbar-sub { font-size: 13px; color: var(--text-light); margin-top: 3px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-light); margin-bottom: 7px; }
.breadcrumb a { transition: color .15s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ── Grilles ─────────────────────────────────────────────────── */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 22px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 22px; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; margin-bottom: 22px; }
.grid-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; margin-bottom: 22px; }

/* ── Mise en page à deux colonnes avec panneau collant ───────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.split-aside { position: sticky; top: 30px; display: flex; flex-direction: column; gap: 14px; }

/* Sans min-width: 0, un item de grille ne peut pas rétrécir sous son
   contenu et fait déborder la page quand un tableau est large. */
.grid-4 > *, .grid-3 > *, .grid-2 > *, .grid-2-1 > *,
.grid-1-2 > *, .grid-3-2 > *, .split > * { min-width: 0; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split-aside { position: static; }
}
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); transition: transform .3s var(--ease-out); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-pop); }
  .main { margin-left: 0; padding: 22px 18px 48px; }
  .grid-3, .grid-2, .grid-2-1, .grid-1-2, .grid-3-2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grid-4 { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; align-items: flex-start; }
}