/* ── Dimensions globales ─────────────────────────────── */
:root {
  --header-h:  58px;
  --sidebar-w: 220px;
}

/* ── Shell de page ───────────────────────────────────── */
.page-shell {
  min-height: calc(100vh - var(--header-h));
  padding-bottom: 48px;
}

/* ─── Desktop ≥ 901px ────────────────────────────────── */
@media (min-width: 901px) {
  .page-shell {
    margin-left: var(--sidebar-w);
    padding: 24px 24px 48px;
    max-width: 1560px;
  }
}

/* ─── Tablet 601–900px ───────────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  :root { --sidebar-w: 60px; }
  .page-shell {
    margin-left: var(--sidebar-w);
    padding: 16px 16px 48px;
  }
}

/* ─── Mobile ≤ 600px ─────────────────────────────────── */
@media (max-width: 600px) {
  .page-shell {
    margin-left: 0;
    padding: 12px 12px 80px;
  }
}

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

@media (max-width: 900px) {
  .nd-grid-3 { grid-template-columns: 1fr 1fr; }
  .nd-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .nd-grid-2, .nd-grid-3, .nd-grid-4 { grid-template-columns: 1fr; }
}

/* ── Panel générique ──────────────────────────────────── */
.nd-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.nd-panel-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 14px;
}