/* =====================================================================
   responsive.css : portables, tablettes, smartphones
   ===================================================================== */

@media (max-width: 1520px) {
  .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  .g-4.kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .g-main, .g-main-r { grid-template-columns: minmax(0, 1fr); }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2 { grid-column: auto; }
  .chat-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .chat-side { display: none; }
  .chat-main { height: calc(100vh - var(--top-h) - 120px); min-height: 480px; }
}

/* Tablette : barre latérale en tiroir */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); width: var(--side-w) !important; box-shadow: var(--shadow-lg); }
  .side-open .sidebar { transform: none; }
  .main, .side-collapsed .main { margin-left: 0; }
  .side-collapsed .side-brand span, .side-collapsed .nav-title, .side-collapsed .nav-link span,
  .side-collapsed .nav-link .nav-badge, .side-collapsed .nav-link .nav-tag { display: revert; }
  .side-collapsed .nav-link { justify-content: flex-start; padding: 7px 10px; }
  .side-collapse { display: none !important; }
  .topbar .top-burger { display: inline-flex; }
  .scrim { position: fixed; inset: 0; z-index: 35; background: rgba(10,13,28,.4); display: none; }
  .side-open .scrim { display: block; }
  .topbar { padding: 0 14px; }
  .page-wrap { padding: 18px 16px 34px; }
  .space-strip { padding: 6px 16px; }
  .hide-md { display: none !important; }
}

/* Smartphone */
@media (max-width: 640px) {
  body { font-size: 13.5px; }
  h1 { font-size: 19px; }
  .g-2, .g-3, .g-4, .g-6 { grid-template-columns: minmax(0, 1fr); }
  .g-6.kpis, .g-4.kpis, .g-4.kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 12px 10px; }
  .kpi-val { font-size: 20px; }
  .kpi-spark { display: none; }
  .top-search span, .top-search .kbd { display: none; }
  .space-switch a { padding: 0 9px; }
  .space-switch a span { display: none; }
  .space-strip { padding: 6px 14px; font-size: 11.5px; }
  .top-search { flex: 0 0 36px; width: 36px; padding: 0; justify-content: center; }
  .hide-sm { display: none !important; }
  .demo-badge { font-size: 9.5px; padding: 3px 7px; letter-spacing: .03em; }
  .demo-badge::before { display: none; }
  .page-head { align-items: flex-start; }
  .page-actions { width: 100%; }
  .page-actions .seg { overflow-x: auto; max-width: 100%; }
  .chart-box { height: 230px; }
  .chart-box.lg { height: 260px; }
  .wf-row { grid-template-columns: 110px 1fr 80px; font-size: 12px; }

  /* Tableaux → cartes empilées */
  .tbl.stackable thead { display: none; }
  .tbl.stackable, .tbl.stackable tbody, .tbl.stackable tr, .tbl.stackable td { display: block; width: 100%; }
  .tbl.stackable tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .tbl.stackable td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; white-space: normal; text-align: right; }
  .tbl.stackable td::before { content: attr(data-label); color: var(--muted); font-size: 11.5px; font-weight: 600; text-align: left; }
  .tbl.stackable td.first { display: block; text-align: left; padding-bottom: 6px; }
  .tbl.stackable td.first::before { display: none; }
  .tbl.stackable td.minor { display: none; }
  .tbl.stackable tfoot { display: none; }
  .notif-panel { width: calc(100vw - 24px); }
  .dd-menu { right: -8px; }
  .modal { max-height: 86vh; }
  .overlay { padding-top: 6vh; }
  .btn, .chip, .seg button { min-height: 36px; }
}

/* Très petits écrans : la barre du haut (sélecteur d'espace + badge démo) doit tenir sans défilement horizontal */
@media (max-width: 480px) {
  .topbar { padding: 0 8px; gap: 5px; }
  .space-switch a { padding: 0 7px; }
  .mkt-btn { padding: 0 7px; gap: 4px; }
  .mkt-btn .ic:last-child { display: none; }
  .topbar .btn.icon { width: 32px; }
  .lifecycle .lc + .lc { margin-left: 6px; }
  .lifecycle .lc + .lc::before { display: none; }
}