/* ═══════════════════════════════════════════════
   TICKETDESK — DESIGN SYSTEM v2
   Dark mode, clean, premium feel
═══════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Fonds plus sombres avec nuances bleutées (comme Linear/Notion dark) */
  --bg:#0a0e13;
  --bg2:#12171f;
  --bg3:#1a2028;
  --bg4:#242b36;
  --border:#252d38;
  --border2:#3a4250;
  /* Texte avec meilleure hiérarchie */
  --text:#eef2f6;
  --text2:#9ba3b0;
  --text3:#6a7280;
  /* Accent plus vibrant */
  --accent:#4c8dff;
  --accent2:#3f7de8;
  --accent-bg:rgba(76,141,255,.12);
  --accent-text:#8fb4ff;
  /* Couleurs plus saturées mais élégantes */
  --green:#3fb950;
  --green-bg:rgba(63,185,80,.14);
  --green-text:#56d364;
  --red:#ff5c5c;
  --red-bg:rgba(255,92,92,.14);
  --red-text:#ff8080;
  --amber:#e3ac2b;
  --amber-bg:rgba(227,172,43,.14);
  --amber-text:#f0c14e;
  --purple:#c48cff;
  --purple-bg:rgba(196,140,255,.14);
  --purple-text:#d9b3ff;
  --blue-bg:rgba(76,141,255,.12);
  --blue-text:#8fb4ff;
  /* Radius + ombres modernes */
  --radius:10px;--radius-lg:14px;--radius-xl:18px;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
  --shadow-lg:0 4px 16px rgba(0,0,0,.4), 0 8px 32px rgba(0,0,0,.3);
  --shadow-glow:0 0 0 1px rgba(76,141,255,.15), 0 4px 16px rgba(76,141,255,.1);
  --transition:all .18s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════
   ☀️ THÈME CLAIR — Smoobu-inspired coloré
   Activé via : body.theme-clair
   Fond teinté vert très léger, vert émeraude plus vif en accent,
   badges/pastilles colorés pour rendre l'interface vivante.
═══════════════════════════════════════════════ */
body.theme-clair{
  --bg:#eaf4ef;
  --bg2:#ffffff;
  --bg3:#dcebe3;
  --bg4:#cadfd2;
  --border:#c5d9cd;
  --border2:#a8c4b5;
  --text:#12251d;
  --text2:#3d5048;
  --text3:#6b7f76;
  --accent:#10b981;
  --accent2:#059669;
  --accent-bg:rgba(16,185,129,.15);
  --accent-text:#047857;
  --green:#10b981;
  --green-bg:rgba(16,185,129,.16);
  --green-text:#047857;
  --red:#ef4444;
  --red-bg:rgba(239,68,68,.14);
  --red-text:#b91c1c;
  --amber:#f59e0b;
  --amber-bg:rgba(245,158,11,.16);
  --amber-text:#92400e;
  --purple:#8b5cf6;
  --purple-bg:rgba(139,92,246,.14);
  --purple-text:#6d28d9;
  --blue-bg:rgba(59,130,246,.14);
  --blue-text:#1d4ed8;
  --shadow:0 1px 2px rgba(15,35,25,.05), 0 2px 8px rgba(15,35,25,.06);
  --shadow-lg:0 4px 14px rgba(15,35,25,.08), 0 10px 28px rgba(15,35,25,.07);
  --shadow-glow:0 0 0 1px rgba(16,185,129,.3), 0 4px 18px rgba(16,185,129,.15);
}

/* Le thème clair adapte le body global */
body.theme-clair{
  background:var(--bg);
  color:var(--text);
}

/* Titres en clair — texte bien contrasté */
body.theme-clair .page-title{
  color:var(--text);
}

/* Inputs/textareas/selects en clair */
body.theme-clair input,
body.theme-clair textarea,
body.theme-clair select{
  background:var(--bg2) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
body.theme-clair input:focus,
body.theme-clair textarea:focus,
body.theme-clair select:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-bg);
}

/* Tables : alternance pour lisibilité */
body.theme-clair table tr:nth-child(even){
  background:var(--bg3);
}

/* Scrollbar adaptée */
body.theme-clair ::-webkit-scrollbar-thumb{
  background:var(--border2);
}
body.theme-clair ::-webkit-scrollbar-track{
  background:var(--bg3);
}

/* Sidebar en clair : dégradé bleu → vert (vivant sans être chargé) */
body.theme-clair .sidebar{
  background:linear-gradient(180deg, #dbeafe 0%, #e5f1ea 100%);
  border-right:1px solid var(--border);
}
body.theme-clair .nav-item{
  color:var(--text2);
}
body.theme-clair .nav-item:hover{
  background:rgba(59,130,246,.1);
  color:#1d4ed8;
}
body.theme-clair .nav-item.active{
  background:linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
  color:#ffffff;
  font-weight:600;
  box-shadow:0 2px 8px rgba(16,185,129,.25);
}
body.theme-clair .nav-section-label{
  color:#1d4ed8;
  font-weight:700;
}

/* Blocs de menu en thème clair : fonds colorés bien visibles sur fond clair.
   Les !important contrent les style inline des div (rgba faibles adaptés au dark). */
body.theme-clair #nav-block-conciergerie-label{
  background:linear-gradient(90deg, #bfdbfe 0%, rgba(191,219,254,.3) 100%) !important;
  color:#1e40af !important;
}
body.theme-clair #nav-block-assistance-label{
  background:linear-gradient(90deg, #fecdd3 0%, rgba(254,205,211,.3) 100%) !important;
  color:#9f1239 !important;
}
body.theme-clair #nav-block-marketing-label{
  background:linear-gradient(90deg, #a7f3d0 0%, rgba(167,243,208,.3) 100%) !important;
  color:#047857 !important;
}
body.theme-clair #nav-block-rh-label{
  background:linear-gradient(90deg, #fed7aa 0%, rgba(254,215,170,.3) 100%) !important;
  color:#9a3412 !important;
}
body.theme-clair #nav-block-alex-label{
  background:linear-gradient(90deg, #ddd6fe 0%, rgba(221,214,254,.3) 100%) !important;
  color:#6d28d9 !important;
}

/* Cartes/blocks : ombre discrète, fond blanc */
body.theme-clair [class*="card"],
body.theme-clair .stat,
body.theme-clair .kpi{
  box-shadow:var(--shadow);
}

/* Boutons non-accent : hover bleu (secondaire, plus "info") */
body.theme-clair .btn{
  background:var(--bg2);
  color:var(--text);
  border:1px solid var(--border);
  transition:all .15s ease;
}
body.theme-clair .btn:hover{
  background:#eff6ff;
  border-color:#3b82f6;
  color:#1d4ed8;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(59,130,246,.15);
}
body.theme-clair .btn-accent{
  background:linear-gradient(135deg, #10b981 0%, #059669 100%);
  color:#ffffff;
  border:none;
  font-weight:600;
  box-shadow:0 2px 8px rgba(16,185,129,.25);
}
body.theme-clair .btn-accent:hover{
  background:linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow:0 4px 12px rgba(16,185,129,.4);
  transform:translateY(-1px);
}
body.theme-clair .btn-danger{
  background:#ef4444;
  color:#ffffff;
  border:none;
  font-weight:600;
}
body.theme-clair .btn-danger:hover{
  background:#dc2626;
}

/* Page titles : gradient vert → bleu (signature visuelle) */
body.theme-clair .page-title{
  color:var(--text);
  background:linear-gradient(90deg, #047857 0%, #10b981 50%, #3b82f6 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Sous-titres de pages : bleu discret */
body.theme-clair .page-sub{
  color:#475569;
}

/* Liens inline : bleu classique */
body.theme-clair a{
  color:#2563eb;
}
body.theme-clair a:hover{
  color:#1d4ed8;
  text-decoration:underline;
}

/* Cards avec légère teinte au hover : bordure gauche bleue */
body.theme-clair [class*="card"]:hover,
body.theme-clair .stat:hover,
body.theme-clair .kpi:hover{
  box-shadow:var(--shadow-lg);
  border-color:#3b82f6;
}

/* Badges et tags en clair */
body.theme-clair [style*="background:var(--bg3)"]{
  background:var(--bg3) !important;
}

/* Toasts colorés en clair — vert pour success, bleu pour info, rouge pour erreur */
body.theme-clair .toast-success{
  background:linear-gradient(135deg, #10b981 0%, #059669 100%);
  color:#ffffff;
}
body.theme-clair .toast-error{
  background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color:#ffffff;
}
body.theme-clair .toast-info{
  background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color:#ffffff;
}

/* Onglets actifs : gradient vert→bleu (équilibré, signature du thème) */
body.theme-clair .active-tab,
body.theme-clair .param-tab.active-tab{
  background:linear-gradient(90deg, #10b981 0%, #3b82f6 100%) !important;
  color:#ffffff !important;
  border-color:transparent !important;
  font-weight:600;
  box-shadow:0 2px 6px rgba(16,185,129,.2);
}

/* Hero / Dashboard widgets : bordure gauche alternée (vert principal, bleu secondaire) */
body.theme-clair .hero,
body.theme-clair .dashboard-widget{
  background:#ffffff;
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
}

/* Hover sur sous-onglets : bleu léger */
body.theme-clair .res-subtab:hover,
body.theme-clair .leads-sub-tab:hover{
  background:rgba(59,130,246,.08);
  color:#1d4ed8;
}

/* ═══════════════════════════════════════════════
   🎖️ MODE TACTICAL — Thème complet style Ops / HUD
   Activé via : body.tactical-mode
   Désactivé automatiquement sur écrans < 640px (perf mobile)
═══════════════════════════════════════════════ */
body.tactical-mode{
  /* Fonds : noir profond avec nuances cyan à peine perceptibles */
  --bg:#030608;
  --bg2:#0a1117;
  --bg3:#0f1822;
  --bg4:#152030;
  --border:rgba(0,212,255,.18);
  --border2:rgba(0,212,255,.35);
  /* Texte avec teinte cyan pâle */
  --text:#d8ecf5;
  --text2:#8ab4c8;
  --text3:#5a7988;
  /* Accent cyan lumineux */
  --accent:#00d4ff;
  --accent2:#0099cc;
  --accent-bg:rgba(0,212,255,.1);
  --accent-text:#00d4ff;
  /* Sémantiques adaptées pour rester lisibles */
  --green:#00ff9d;
  --green-bg:rgba(0,255,157,.1);
  --green-text:#00ff9d;
  --red:#ff4757;
  --red-bg:rgba(255,71,87,.12);
  --red-text:#ff6b6b;
  --amber:#ffa502;
  --amber-bg:rgba(255,165,2,.12);
  --amber-text:#ffb84d;
  --purple:#c48cff;
  --purple-bg:rgba(196,140,255,.12);
  --purple-text:#d9b3ff;
  --blue-bg:rgba(0,212,255,.1);
  --blue-text:#00d4ff;
  /* Radius plus angulaires (style militaire) */
  --radius:3px;--radius-lg:4px;--radius-xl:6px;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --shadow-lg:0 4px 16px rgba(0,0,0,.6), 0 8px 32px rgba(0,0,0,.4);
  --shadow-glow:0 0 0 1px rgba(0,212,255,.25), 0 0 20px rgba(0,212,255,.08);
}
/* Tactical : body avec léger grain/scan */
body.tactical-mode{
  background:
    radial-gradient(ellipse at top, rgba(0,212,255,.03) 0%, transparent 60%),
    var(--bg);
}
/* Tactical : bordures des cartes avec glow cyan discret */
/* 🔧 V3.101+V3.102 : exclusion .trello-card du halo cyan
   ([class*="card"] matchait aussi trello-card → halo "casques bleus" autour des cartes Trello,
   ce qui rendait l'affichage moins propre que dans les autres thèmes) */
body.tactical-mode [class*="card"]:not(.trello-card),
body.tactical-mode .stat,
body.tactical-mode .kpi,
body.tactical-mode [id^="tab-"] > div[style*="background:var(--bg2)"]{
  box-shadow:0 0 0 1px rgba(0,212,255,.1), inset 0 0 0 1px rgba(0,212,255,.03);
}
/* 🔧 V3.102 : reset absolu des cartes Trello en mode tactical pour qu'elles s'affichent
   exactement comme en thème clair/sombre. !important pour vaincre toute autre règle tactical. */
body.tactical-mode .trello-card,
body.tactical-mode .trello-card *{
  box-shadow:none !important;
  border-color:transparent !important;
}
body.tactical-mode .trello-card{
  background:#22272e !important;
  border:none !important;
  outline:none !important;
}
body.tactical-mode .trello-card:hover{
  background:#2a3039 !important;
  box-shadow:0 4px 10px rgba(0,0,0,.3) !important;
}
/* Tactical : boutons avec style angulaire et hover cyan */
body.tactical-mode .btn{
  border-radius:3px;
  letter-spacing:.03em;
  transition:all .15s;
}
body.tactical-mode .btn:hover{
  box-shadow:0 0 10px rgba(0,212,255,.25);
}
body.tactical-mode .btn-accent{
  background:linear-gradient(180deg, rgba(0,212,255,.18), rgba(0,212,255,.08));
  border:1px solid rgba(0,212,255,.5);
  color:#00d4ff;
}
body.tactical-mode .btn-accent:hover{
  background:linear-gradient(180deg, rgba(0,212,255,.28), rgba(0,212,255,.12));
  box-shadow:0 0 15px rgba(0,212,255,.4);
}
/* Tactical : inputs avec look terminal */
body.tactical-mode input,
body.tactical-mode select,
body.tactical-mode textarea{
  background:rgba(0,0,0,.4) !important;
  border-color:rgba(0,212,255,.25) !important;
  color:#d8ecf5 !important;
}
body.tactical-mode input:focus,
body.tactical-mode select:focus,
body.tactical-mode textarea:focus{
  border-color:#00d4ff !important;
  box-shadow:0 0 0 2px rgba(0,212,255,.15) !important;
  outline:none !important;
}
/* Tactical : sidebar avec bordure latérale cyan */
body.tactical-mode .sidebar{
  border-right:1px solid rgba(0,212,255,.18);
  background:linear-gradient(180deg, #030608 0%, #050a10 100%);
}
body.tactical-mode .nav-item:hover{
  background:rgba(0,212,255,.08);
  border-left:2px solid #00d4ff;
}
body.tactical-mode .nav-item.active{
  background:rgba(0,212,255,.12);
  border-left:2px solid #00d4ff;
  color:#00d4ff;
}
/* Tactical : titres de pages en monospace + letter-spacing */
body.tactical-mode .page-title{
  font-family:'SF Mono','Monaco','Consolas',monospace;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#00d4ff;
  text-shadow:0 0 10px rgba(0,212,255,.3);
}
body.tactical-mode .page-sub{
  font-family:'SF Mono',monospace;
  font-size:11px;
  color:#5a7988;
  letter-spacing:.1em;
}
/* Tactical : section-lbl en monospace */
body.tactical-mode .section-lbl{
  font-family:'SF Mono',monospace;
  letter-spacing:.2em;
  color:#00d4ff;
}
/* Tactical : badges plus angulaires */
body.tactical-mode .badge{
  border-radius:2px;
  font-family:'SF Mono',monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:9px;
}
/* Tactical : KPIs avec coins HUD */
body.tactical-mode .stat{
  background:rgba(0,0,0,.3) !important;
  border:1px solid rgba(0,212,255,.2) !important;
  border-radius:3px !important;
  position:relative;
}
body.tactical-mode .stat-val{
  color:#00d4ff !important;
  font-family:'SF Mono',monospace;
  text-shadow:0 0 8px rgba(0,212,255,.3);
}
body.tactical-mode .stat-label{
  font-family:'SF Mono',monospace;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#5a7988 !important;
}
/* Tactical : tables avec bordures cyan */
body.tactical-mode table th{
  font-family:'SF Mono',monospace;
  letter-spacing:.1em;
  color:#00d4ff;
  border-bottom:1px solid rgba(0,212,255,.3);
  text-transform:uppercase;
  font-size:11px;
}
body.tactical-mode table td{
  border-bottom:1px solid rgba(0,212,255,.08);
}
body.tactical-mode table tr:hover td{
  background:rgba(0,212,255,.04);
}
/* Tactical : toasts avec style alert HUD */
body.tactical-mode .toast{
  background:rgba(0,0,0,.9) !important;
  border:1px solid #00d4ff !important;
  box-shadow:0 0 20px rgba(0,212,255,.3) !important;
  font-family:'SF Mono',monospace;
  letter-spacing:.05em;
}
/* Tactical : alertes urgentes en rouge HUD pulsant */
body.tactical-mode .alert-urgent,
body.tactical-mode [class*="urgent"],
body.tactical-mode .b-urgent{
  animation:tacticalAlert 1.5s ease-in-out infinite;
}
@keyframes tacticalAlert{
  0%,100%{box-shadow:0 0 0 1px rgba(255,71,87,.3), 0 0 10px rgba(255,71,87,.2)}
  50%{box-shadow:0 0 0 1px rgba(255,71,87,.8), 0 0 20px rgba(255,71,87,.5)}
}
/* Tactical : scrollbar cyan */
body.tactical-mode ::-webkit-scrollbar-thumb{
  background:rgba(0,212,255,.3);
  border-radius:2px;
}
body.tactical-mode ::-webkit-scrollbar-thumb:hover{
  background:rgba(0,212,255,.5);
}
body.tactical-mode ::-webkit-scrollbar-track{
  background:rgba(0,0,0,.5);
}

/* Auto-désactivation sur mobile (< 640px) pour préserver les perfs */
@media (max-width:640px){
  body.tactical-mode{
    /* Garde les couleurs mais désactive les effets coûteux */
    background:var(--bg) !important;
  }
  body.tactical-mode [class*="card"],
  body.tactical-mode .stat,
  body.tactical-mode .kpi{
    box-shadow:none !important;
  }
  body.tactical-mode .alert-urgent,
  body.tactical-mode [class*="urgent"],
  body.tactical-mode .b-urgent{
    animation:none !important;
  }
}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.005em;
}

/* Fond avec léger gradient pour casser la monotonie */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(76,141,255,.06), transparent 70%),
             radial-gradient(ellipse 60% 40% at 80% 100%, rgba(196,140,255,.04), transparent 60%);
  pointer-events:none;
}

/* ── SIDEBAR ─────────────────────────────────── */
.app{display:flex;min-height:100vh}
.sidebar{
  width:232px;
  background:linear-gradient(180deg, rgba(18,23,31,.95) 0%, rgba(10,14,19,.95) 100%);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;z-index:10;
}
.sidebar-logo{padding:20px 18px 16px}
.logo-mark{
  width:36px;height:36px;
  background:linear-gradient(135deg, var(--accent) 0%, #6ba5ff 100%);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
  box-shadow:0 4px 12px rgba(76,141,255,.3);
}
.logo-mark svg{width:20px;height:20px;fill:#fff}
.logo-name{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.logo-sub{font-size:11px;color:var(--text3);margin-top:2px;letter-spacing:.01em}
.sidebar-nav{padding:12px 10px;flex:1;overflow-y:auto}
.sidebar-nav::-webkit-scrollbar{width:0}
#nav-block-conciergerie, #nav-block-assistance, #nav-block-alex{
  transition:max-height .25s ease, opacity .2s ease;
}
.nav-section-label{
  font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.1em;
  padding:12px 10px 6px;
}
.nav-collapsible{
  display:flex;align-items:center;gap:6px;
  cursor:pointer;user-select:none;
  transition:color .15s;
}
.nav-collapsible:hover{color:var(--text2)}
.nav-chevron{
  font-size:10px;color:var(--text3);
  transition:transform .2s ease;
  display:inline-block;
  width:10px;
}
.nav-collapsible.collapsed .nav-chevron{transform:rotate(-90deg)}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 11px;border-radius:8px;cursor:pointer;
  font-size:13px;color:var(--text2);
  margin-bottom:2px;border:1px solid transparent;
  transition:var(--transition);font-weight:500;
  position:relative;
}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{
  background:var(--accent-bg);color:var(--accent-text);
  border-color:rgba(76,141,255,.25);
  box-shadow:0 0 0 1px rgba(76,141,255,.1) inset;
}
.nav-item svg{width:15px;height:15px;flex-shrink:0;opacity:.8}
.nav-item.active svg{opacity:1}
.nav-badge{
  margin-left:auto;background:var(--red);color:#fff;
  font-size:10px;padding:2px 7px;border-radius:10px;
  font-weight:700;min-width:18px;text-align:center;
  box-shadow:0 2px 4px rgba(255,92,92,.4);
}
.save-info{padding:0;font-size:11px;color:var(--text3)}

/* ── CONTENT ─────────────────────────────────── */
.content{margin-left:232px;padding:28px 32px;flex:1;min-height:100vh}
.toprow{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.page-title{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.025em}
.page-sub{font-size:12.5px;color:var(--text3);margin-top:3px}

/* ── BUTTONS ─────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;padding:8px 16px;
  border-radius:8px;cursor:pointer;
  border:1px solid var(--border2);
  background:var(--bg3);color:var(--text2);
  font-weight:500;white-space:nowrap;
  transition:var(--transition);line-height:1.4;
  user-select:none;
}
.btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-accent{
  background:linear-gradient(135deg, var(--accent) 0%, #3f7de8 100%);
  color:#fff;border-color:transparent;font-weight:600;
  box-shadow:0 2px 8px rgba(76,141,255,.25);
}
.btn-accent:hover{
  background:linear-gradient(135deg, #5b99ff 0%, var(--accent) 100%);
  color:#fff;box-shadow:0 4px 12px rgba(76,141,255,.35);
}
.btn-sm{font-size:11px;padding:4px 10px;border-radius:6px}
.btn-danger{color:var(--red-text);border-color:rgba(255,92,92,.3);background:transparent}
.btn-danger:hover{background:var(--red-bg);color:var(--red-text);border-color:rgba(255,92,92,.5)}

/* ── STATS CARDS ─────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}
.stat{
  background:linear-gradient(135deg, var(--bg2) 0%, rgba(26,32,40,.6) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
.stat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}
.stat:hover{
  border-color:var(--border2);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}
.stat-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;font-weight:600}
.stat-val{font-size:26px;font-weight:700;color:var(--text);letter-spacing:-.025em}

/* ── FILTERS ─────────────────────────────────── */
.filters{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.filters input,.filters select,
.r-filter{
  font-size:12.5px;padding:8px 12px;
  border:1px solid var(--border);border-radius:8px;
  background:var(--bg2);color:var(--text);
  height:36px;outline:none;transition:var(--transition);
}
.filters input:focus,.filters select:focus,.r-filter:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(76,141,255,.15);
  background:var(--bg3);
}
.filters input{flex:1;min-width:160px}
.filters input::placeholder{color:var(--text3)}
.filters select option,.r-filter option{background:var(--bg2)}

/* ── TABLE ───────────────────────────────────── */
.tbl-wrap{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{
  text-align:left;padding:11px 16px;
  color:var(--text3);
  border-bottom:1px solid var(--border);
  font-weight:700;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.08em;
  background:linear-gradient(180deg, var(--bg3) 0%, rgba(26,32,40,.8) 100%);
}
td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
tr:last-child td{border-bottom:none}
tr{transition:background .15s}
tr:hover td{background:rgba(36,43,54,.5)}

/* ── BADGES ──────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:6px;
  font-size:11px;font-weight:700;
  letter-spacing:.02em;white-space:nowrap;
}
.b-open{background:var(--blue-bg);color:var(--blue-text)}
.b-closed{background:var(--green-bg);color:var(--green-text)}
.b-urgent{background:var(--red-bg);color:var(--red-text);box-shadow:0 0 0 1px rgba(255,92,92,.2) inset}
.b-normal{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.b-incident{background:var(--amber-bg);color:var(--amber-text)}
.b-demande{background:var(--purple-bg);color:var(--purple-text)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:4px;flex-shrink:0}

/* ── MODALS ──────────────────────────────────── */
.overlay{
  display:none;position:fixed;inset:0;
  background:rgba(5,8,12,.75);z-index:200;
  align-items:center;justify-content:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:fadeIn .18s ease;
}
.overlay.show{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  border:1px solid var(--border2);
  border-radius:16px;
  padding:28px;width:520px;max-width:96vw;max-height:92vh;
  overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
  animation:modalIn .22s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.modal-title-txt{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.015em}
.modal-close{
  background:none;border:none;cursor:pointer;
  color:var(--text3);font-size:20px;line-height:1;
  padding:6px 10px;border-radius:8px;
  transition:var(--transition);
}
.modal-close:hover{background:var(--bg4);color:var(--text)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

/* ── FORM FIELDS ─────────────────────────────── */
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.field input,.field select,.field textarea,
.ts-select{
  width:100%;font-size:13px;padding:9px 12px;
  border:1px solid var(--border);border-radius:8px;
  background:var(--bg3);color:var(--text);
  outline:none;transition:var(--transition);
  font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus,.ts-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(76,141,255,.15);
  background:var(--bg4);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text3)}
.field select option,.ts-select option{background:var(--bg2)}
.field textarea{resize:vertical;height:80px;line-height:1.55}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.section-lbl{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em}

/* ── TICKET PAGE ─────────────────────────────── */
.ticket-page{display:none;position:fixed;inset:0 0 0 232px;background:var(--bg);z-index:50;overflow-y:auto}
.ticket-page.show{display:flex;flex-direction:column}
.ticket-topbar{display:flex;align-items:center;gap:12px;padding:14px 28px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}
.ticket-topbar-back{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text2);cursor:pointer;padding:7px 12px;border-radius:8px;border:1px solid var(--border);transition:var(--transition)}
.ticket-topbar-back:hover{color:var(--text);background:var(--bg3)}
.ticket-topbar-title{font-size:14px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-topbar-id{font-size:12px;color:var(--text3)}
.ticket-body{display:flex;flex:1}
.ticket-sidebar{width:256px;background:var(--bg2);border-right:1px solid var(--border);padding:20px 16px;flex-shrink:0;overflow-y:auto}
.ticket-main{flex:1;padding:24px 28px;overflow-y:auto;display:flex;flex-direction:column}
.ts-section{margin-bottom:18px}
.ts-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.ts-divider{border:none;border-top:1px solid var(--border);margin:16px 0}

/* ── COMMENT FEED ────────────────────────────── */
.comment-feed{flex:1;display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.cf-item{display:flex;gap:12px}
.cf-avatar{width:32px;height:32px;border-radius:50%;background:var(--blue-bg);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--blue-text);flex-shrink:0;margin-top:2px}
.cf-bubble{flex:1}
.cf-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cf-author{font-size:12.5px;font-weight:700}
.cf-date{font-size:11px;color:var(--text3)}
.cf-tag{font-size:10px;padding:1px 6px;border-radius:4px;background:var(--bg3);color:var(--text2);border:1px solid var(--border);font-weight:600}
.cf-text{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;font-size:13px;line-height:1.7;color:var(--text2);white-space:pre-wrap;word-break:break-word}
.cf-desc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;font-size:13px;line-height:1.7;color:var(--text2);margin-bottom:16px;white-space:pre-wrap;word-break:break-word}
.reply-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition)}
.reply-box:focus-within{border-color:var(--accent)}
.reply-box-header{padding:8px 14px;border-bottom:1px solid var(--border);font-size:11.5px;color:var(--text3);display:flex;align-items:center;gap:7px;background:var(--bg3)}
.reply-textarea{width:100%;background:transparent;border:none;outline:none;color:var(--text);font-size:13px;padding:12px 14px;resize:none;min-height:80px;font-family:inherit;line-height:1.6}
.reply-textarea::placeholder{color:var(--text3)}
.reply-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 14px;border-top:1px solid var(--border);background:var(--bg3)}

/* ── LOGEMENT CARDS ──────────────────────────── */
.empty-state{padding:48px;text-align:center;color:var(--text3);font-size:13px}

/* ── RAPPORT ─────────────────────────────────── */
.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px}
.rstat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px}
.rstat-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-weight:500}
.rstat-val{font-size:22px;font-weight:700;letter-spacing:-.02em}
.agent-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:10px;transition:var(--transition)}
.agent-card:hover{border-color:var(--border2)}
.agent-card-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.agent-av-lg{width:38px;height:38px;border-radius:50%;background:var(--blue-bg);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--blue-text);flex-shrink:0}
.agent-name-txt{font-weight:700;font-size:14px}
.agent-sub-txt{font-size:11px;color:var(--text3);margin-top:2px}
.agent-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.am{background:var(--bg3);border-radius:var(--radius);padding:10px 11px;text-align:center}
.am-label{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-weight:600}
.am-val{font-size:17px;font-weight:700}
.bar-wrap{margin-top:4px}
.bar-label{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-bottom:4px;font-weight:500}
.bar-bg{background:var(--bg3);border-radius:4px;height:6px;overflow:hidden}
.bar-fill{height:6px;border-radius:4px;background:var(--accent);transition:width .4s ease}
.rank-badge{font-size:10px;padding:2px 8px;border-radius:4px;font-weight:700}
.rank-1{background:var(--blue-bg);color:var(--blue-text)}
.rank-other{background:var(--bg3);color:var(--text3)}

/* ═══ V3.135 — RAPPORT GAMING (podium + animations) ═══ */
@keyframes podiumRise{from{transform:translateY(60px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes podiumGlow{0%,100%{box-shadow:0 0 30px rgba(255,215,0,.5),0 0 60px rgba(255,215,0,.3)}50%{box-shadow:0 0 50px rgba(255,215,0,.8),0 0 90px rgba(255,215,0,.5)}}
@keyframes scoreCount{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes barFill{from{width:0!important}}
@keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes pulseRed{0%,100%{box-shadow:0 0 0 0 rgba(255,80,80,.6)}70%{box-shadow:0 0 0 8px rgba(255,80,80,0)}}
@keyframes confetti{from{transform:translateY(0) rotate(0deg);opacity:1}to{transform:translateY(-200px) rotate(720deg);opacity:0}}

/* ── PODIUM 3D ─────────────────────────────── */
.gaming-podium-wrap{display:flex;justify-content:center;align-items:flex-end;gap:14px;padding:30px 16px 16px;background:linear-gradient(180deg,rgba(99,102,241,.12) 0%,transparent 70%);border-radius:14px;margin-bottom:16px;position:relative;overflow-x:auto;overflow-y:hidden;min-height:280px;scrollbar-width:thin}
.gaming-podium-wrap::-webkit-scrollbar{height:6px}
.gaming-podium-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.gaming-podium-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center top,rgba(255,215,0,.08) 0%,transparent 60%);pointer-events:none}
.podium-spot{display:flex;flex-direction:column;align-items:center;animation:podiumRise .7s cubic-bezier(.34,1.56,.64,1) backwards;cursor:pointer;transition:transform .2s}
.podium-spot:hover{transform:translateY(-4px) scale(1.02)}
.podium-spot.spot-1{animation-delay:.4s}
.podium-spot.spot-2{animation-delay:.2s}
.podium-spot.spot-3{animation-delay:0s}
.podium-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;border:3px solid;margin-bottom:8px;background:var(--bg);box-shadow:0 8px 20px rgba(0,0,0,.3);position:relative}
.spot-1 .podium-avatar{width:84px;height:84px;border-color:#FFD700;border-width:4px;font-size:26px;color:#FFD700;animation:podiumGlow 2.5s ease-in-out infinite}
.spot-2 .podium-avatar{border-color:#C0C0C0;color:#C0C0C0}
.spot-3 .podium-avatar{border-color:#CD7F32;color:#CD7F32}
.podium-medal{position:absolute;top:-12px;right:-12px;font-size:32px;animation:floatBadge 2s ease-in-out infinite;text-shadow:0 4px 12px rgba(0,0,0,.4);z-index:2}
.podium-name{font-size:13px;font-weight:700;text-align:center;margin-top:4px;color:var(--text);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spot-1 .podium-name{font-size:14px;color:#FFD700}
.podium-score{font-size:11px;color:var(--text3);font-weight:600;margin-top:2px}
.spot-1 .podium-score{font-size:13px;color:#FFD700;font-weight:800}
.podium-block{margin-top:12px;width:90px;border-radius:10px 10px 0 0;background:linear-gradient(180deg,var(--bg2) 0%,var(--bg3) 100%);border:1px solid var(--border2);border-bottom:none;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900;color:var(--text2);position:relative;overflow:hidden;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.podium-block::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);background-size:1000px 100%;animation:shimmer 4s linear infinite}
.spot-1 .podium-block{height:140px;background:linear-gradient(180deg,#FFD700 0%,#B8860B 100%);color:#fff;border-color:#FFD700;box-shadow:0 -4px 30px rgba(255,215,0,.4),inset 0 -3px 0 rgba(0,0,0,.3)}
/* V3.137 : .spot-2 et .spot-3 ne sont plus utilisés (styles appliqués inline pour rang dynamique) */

/* ── KPIs HEADER ANIMÉS ────────────────────── */
.gaming-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px}
.gaming-kpi{background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%);border:1px solid var(--border);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;animation:podiumRise .5s ease backwards}
.gaming-kpi:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.gaming-kpi:nth-child(1){animation-delay:0s}
.gaming-kpi:nth-child(2){animation-delay:.08s}
.gaming-kpi:nth-child(3){animation-delay:.16s}
.gaming-kpi:nth-child(4){animation-delay:.24s}
.gaming-kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kpi-color,var(--accent))}
.gaming-kpi-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-weight:600;display:flex;align-items:center;gap:6px}
.gaming-kpi-icon{font-size:14px}
.gaming-kpi-val{font-size:28px;font-weight:900;letter-spacing:-.03em;margin-top:6px;color:var(--kpi-color,var(--text));animation:scoreCount .5s ease}
.gaming-kpi-sub{font-size:10.5px;color:var(--text3);margin-top:2px}

/* ── AGENT GAMING CARD ────────────────────── */
.gaming-agent-card{background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px;transition:transform .2s,box-shadow .2s,border-color .2s;animation:podiumRise .4s ease backwards;position:relative;overflow:hidden}
.gaming-agent-card:hover{transform:translateX(4px);box-shadow:0 6px 20px rgba(0,0,0,.15);border-color:var(--accent)}
.gaming-agent-card.is-leader{border-color:#FFD700;background:linear-gradient(135deg,rgba(255,215,0,.05) 0%,var(--bg2) 50%)}
.gaming-agent-card::after{content:attr(data-rank);position:absolute;top:-10px;right:14px;font-size:64px;font-weight:900;color:var(--bg3);opacity:.3;line-height:1;pointer-events:none;font-family:system-ui;letter-spacing:-3px}
.gaming-agent-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;position:relative;z-index:1}
.gaming-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;border:2px solid;flex-shrink:0;background:var(--bg)}
.gaming-name{font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px}
.gaming-tag-medal{font-size:18px;animation:floatBadge 2.2s ease-in-out infinite}
.gaming-sub{font-size:11.5px;color:var(--text3);margin-top:2px;font-weight:500}
.gaming-score-box{margin-left:auto;text-align:right;flex-shrink:0;padding-left:10px}
.gaming-score-num{font-size:32px;font-weight:900;line-height:1;letter-spacing:-.04em;animation:scoreCount .6s ease}
.gaming-score-out{font-size:11px;color:var(--text3);font-weight:500}
.gaming-score-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:10px;display:inline-block;margin-top:4px}
.gaming-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.gaming-stat{background:var(--bg);border-radius:8px;padding:10px 8px;text-align:center;border:1px solid var(--border);transition:background .2s}
.gaming-stat:hover{background:var(--bg2)}
.gaming-stat-lbl{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:3px}
.gaming-stat-val{font-size:16px;font-weight:800}
.gaming-progress{position:relative;height:10px;background:var(--bg3);border-radius:5px;overflow:hidden;margin-bottom:6px}
.gaming-progress-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--prog-color,var(--accent)) 0%,var(--prog-color2,var(--accent)) 100%);position:relative;animation:barFill 1.2s cubic-bezier(.34,1.56,.64,1)}
.gaming-progress-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);background-size:200% 100%;animation:shimmer 2s linear infinite}
.gaming-progress-label{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);font-weight:500}
.gaming-alert{margin-top:10px;padding:8px 12px;background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.3);border-radius:8px;font-size:11.5px;color:#ff8080;display:flex;align-items:center;gap:8px;animation:pulseRed 2s infinite}

/* ── DONUT + BAR PANELS GAMING ────────────── */
.gaming-chart-panel{background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%);border:1px solid var(--border);border-radius:14px;padding:18px;animation:podiumRise .5s ease backwards}
.gaming-chart-title{font-size:11.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px}

/* ── RESPONSIVE ────────────────────────────── */
@media(max-width:600px){
  .gaming-podium-wrap{gap:6px;padding:24px 8px 8px}
  .gaming-stats-row{grid-template-columns:repeat(2,1fr)}
}

/* ── AGENT AVATAR ────────────────────────────── */
.agent-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text2)}
.agent-av{width:22px;height:22px;border-radius:50%;background:var(--blue-bg);border:1px solid var(--border2);display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--blue-text)}

/* ═══ V3.141 — NOTIFICATIONS POPUP & CLOCHE ═══ */
@keyframes notifsBellShake{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(-12deg)}20%,40%{transform:rotate(12deg)}50%{transform:rotate(0)}}
#notifs-bell.has-unread svg{animation:notifsBellShake .8s ease 0s 1}
#notifs-bell.has-unread{border-color:#ef4444!important;color:#ef4444!important}
.notifs-popup{position:fixed;top:60px;right:20px;width:360px;max-width:calc(100vw - 30px);max-height:70vh;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.4);z-index:9999;overflow:hidden;display:flex;flex-direction:column;animation:notifsPopIn .25s ease}
@keyframes notifsPopIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.notifs-popup-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--bg3);font-size:13px}
.notifs-popup-body{flex:1;overflow-y:auto;padding:6px}
.notifs-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .15s;position:relative;border:1px solid transparent}
.notifs-item:hover{background:var(--bg3);border-color:var(--border)}
.notifs-item.seen{opacity:.55}
.notifs-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;flex-shrink:0;margin-top:6px;box-shadow:0 0 6px rgba(239,68,68,.6)}

/* ── PARAM TABS ──────────────────────────────── */
.param-tab{font-size:12px;padding:6px 14px;border-radius:var(--radius);border:none;background:transparent;color:var(--text2);cursor:pointer;font-weight:500;transition:var(--transition)}
.param-tab:hover{color:var(--text);background:var(--bg2)}
.active-tab{background:var(--bg2)!important;color:var(--text)!important;font-weight:600}

/* Sous-onglets Espace Client */
.ec-subtab{
  font-size:13px;padding:8px 16px;border:none;border-radius:7px;
  background:transparent;color:var(--text2);cursor:pointer;
  font-weight:500;transition:all .15s;flex:1;
}
.ec-subtab:hover{background:var(--bg3);color:var(--text)}
.ec-subtab.active{background:var(--bg3);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* ── CHART CARDS ─────────────────────────────── */
.chart-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px}
.chart-title{font-size:10.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px}

/* ── GLOBAL SEARCH ───────────────────────────── */
#global-search-results{border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* ── WIKI ────────────────────────────────────── */
#wiki-article-body h2{font-size:17px;font-weight:700;margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
#wiki-article-body h3{font-size:15px;font-weight:700;margin:16px 0 8px;color:var(--accent-text)}
#wiki-article-body strong{font-weight:700;color:var(--text)}
#wiki-article-body ul{list-style:none;padding-left:16px;margin:8px 0}

/* ── ANIMATIONS ──────────────────────────────── */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* 🆕 V3.178 : fond clair adapté au thème pour les images Nuki (transparentes blanches)
   En thème clair : pas de fond (le carré blanc dispara*it dans le fond clair).
   En thèmes sombres : petit fond clair pour faire ressortir les Nuki blancs. */
.nuki-img-wrapper{ background:transparent }
body.theme-dark .nuki-img-wrapper,
body.theme-tactical .nuki-img-wrapper{
  background:linear-gradient(135deg,#f5f5f5,#d8d8d8);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4),0 1px 3px rgba(0,0,0,.2);
}

/* ── SCROLLBAR ───────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* Badge qui pulse quand il y a des tâches à faire */
.nav-badge.pulse{
  animation:badgePulse 1.6s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,92,92,.7), 0 2px 4px rgba(255,92,92,.4)}
  50%{box-shadow:0 0 0 6px rgba(255,92,92,0), 0 2px 4px rgba(255,92,92,.4)}
}

/* ═══════════════════════════════════════════════
   🎩 ANIMATION INTRO FUTURISTE — HUD style (§26)
═══════════════════════════════════════════════ */
.jarvis-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:radial-gradient(ellipse at center, #050a15 0%, #000 100%);
  z-index:99999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;
  overflow:hidden;
  animation:jarvisFadeIn .4s ease-out;
}
.jarvis-overlay.out{animation:jarvisFadeOut .5s ease-in forwards;pointer-events:none;}
@keyframes jarvisFadeIn{from{opacity:0}to{opacity:1}}
@keyframes jarvisFadeOut{from{opacity:1}to{opacity:0}}

/* Grille de fond */
.jarvis-overlay::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,212,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.04) 1px, transparent 1px);
  background-size:40px 40px;
  animation:jarvisGridFade 2.5s ease-in forwards;
  opacity:0;
}
@keyframes jarvisGridFade{
  0%{opacity:0}
  30%{opacity:.8}
  100%{opacity:.3}
}

/* Cercles HUD concentriques (style Iron Man) */
.jarvis-hud{
  position:relative;
  width:260px;height:260px;
  margin-bottom:30px;
  display:flex;align-items:center;justify-content:center;
}
.jarvis-hud::before, .jarvis-hud::after,
.jarvis-hud .hud-ring{
  content:'';position:absolute;
  border:1px solid rgba(0,212,255,.5);
  border-radius:50%;
  box-shadow:0 0 20px rgba(0,212,255,.3), inset 0 0 20px rgba(0,212,255,.1);
}
.jarvis-hud::before{
  width:260px;height:260px;
  border-top-color:rgba(0,212,255,.9);
  border-right-color:transparent;
  border-bottom-color:rgba(0,212,255,.9);
  border-left-color:transparent;
  animation:jarvisSpin 4s linear infinite;
}
.jarvis-hud::after{
  width:200px;height:200px;
  border-top-color:transparent;
  border-right-color:rgba(0,212,255,.7);
  border-bottom-color:transparent;
  border-left-color:rgba(0,212,255,.7);
  animation:jarvisSpinReverse 6s linear infinite;
}
.jarvis-hud .hud-ring{
  width:140px;height:140px;
  border-style:dashed;
  border-color:rgba(0,212,255,.4);
  animation:jarvisSpin 10s linear infinite;
}
.jarvis-hud .hud-center{
  position:relative;
  font-size:72px;
  filter:drop-shadow(0 0 25px rgba(0,212,255,.8));
  animation:jarvisBatPulse 2s ease-in-out infinite;
  z-index:2;
}
@keyframes jarvisSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes jarvisSpinReverse{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes jarvisBatPulse{
  0%,100%{filter:drop-shadow(0 0 25px rgba(0,212,255,.5)) drop-shadow(0 0 10px rgba(0,212,255,.3));transform:scale(1)}
  50%{filter:drop-shadow(0 0 40px rgba(0,212,255,1)) drop-shadow(0 0 15px rgba(0,212,255,.6));transform:scale(1.05)}
}

/* Tick marks autour du cercle extérieur */
.jarvis-ticks{
  position:absolute;width:280px;height:280px;
  pointer-events:none;
}
.jarvis-ticks span{
  position:absolute;top:50%;left:50%;
  width:1px;height:10px;
  background:rgba(0,212,255,.6);
  transform-origin:center 140px;
}

/* Data readouts autour du HUD */
.jarvis-data{
  position:absolute;
  font-family:'SF Mono','Monaco','Consolas',monospace;
  font-size:10px;
  color:rgba(0,212,255,.7);
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:0;
  animation:jarvisDataIn .5s ease-out forwards;
}
.jarvis-data.tl{top:18%;left:18%;animation-delay:.3s;text-align:left}
.jarvis-data.tr{top:18%;right:18%;animation-delay:.5s;text-align:right}
.jarvis-data.bl{bottom:18%;left:18%;animation-delay:.7s;text-align:left}
.jarvis-data.br{bottom:18%;right:18%;animation-delay:.9s;text-align:right}
.jarvis-data div{margin:2px 0;line-height:1.4}
.jarvis-data .val{color:#00d4ff;font-weight:700}
@keyframes jarvisDataIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}

/* Lignes terminal */
.jarvis-lines{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-top:10px;
}
.jarvis-line{
  font-family:'SF Mono','Monaco',monospace;
  font-size:13px;color:#c8e8ff;
  letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;
  border-right:2px solid #00d4ff;
  width:0;
  animation:jarvisType 1s steps(40,end) forwards, jarvisCursor .7s step-end infinite;
}
.jarvis-line .prefix{color:rgba(0,212,255,.6)}
.jarvis-line.delay1{animation-delay:.8s, .8s;}
.jarvis-line.delay2{animation-delay:1.4s, 1.4s;}
.jarvis-line.delay3{animation-delay:2.0s, 2.0s;}
.jarvis-line.delay4{animation-delay:2.8s, 2.8s;}
.jarvis-line.delay5{animation-delay:3.5s, 3.5s;}
.jarvis-line.delay6{animation-delay:4.2s, 4.2s;}
@keyframes jarvisType{
  from{width:0}
  to{width:100%}
}
@keyframes jarvisCursor{
  from,to{border-color:transparent}
  50%{border-color:#00d4ff}
}

/* Scan lines horizontal + vertical */
.jarvis-scan-h{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#00d4ff 50%,transparent);
  box-shadow:0 0 20px #00d4ff;
  animation:jarvisScanH 3s linear infinite;
  pointer-events:none;
}
.jarvis-scan-v{
  position:absolute;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,#00d4ff 50%,transparent);
  box-shadow:0 0 20px #00d4ff;
  animation:jarvisScanV 4s linear infinite;
  animation-delay:.5s;
  pointer-events:none;
}
@keyframes jarvisScanH{
  0%{top:-5%}
  100%{top:105%}
}
@keyframes jarvisScanV{
  0%{left:-5%}
  100%{left:105%}
}

/* Corners brackets (style HUD) */
.jarvis-corner{
  position:absolute;width:40px;height:40px;
  border:2px solid #00d4ff;
  opacity:.6;
}
.jarvis-corner.tl{top:40px;left:40px;border-right:none;border-bottom:none}
.jarvis-corner.tr{top:40px;right:40px;border-left:none;border-bottom:none}
.jarvis-corner.bl{bottom:40px;left:40px;border-right:none;border-top:none}
.jarvis-corner.br{bottom:40px;right:40px;border-left:none;border-top:none}

.jarvis-skip{
  position:absolute;bottom:20px;right:20px;
  font-family:monospace;font-size:10px;color:rgba(255,255,255,.3);
  letter-spacing:.2em;text-transform:uppercase;
}

/* ═══════════════════════════════════════════════
   🎖️ ÉCRAN CONNEXION — Centre des opérations (HUD)
═══════════════════════════════════════════════ */
.ops-scan-h{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.8) 50%,transparent);
  box-shadow:0 0 20px #00d4ff;
  animation:jarvisScanH 4s linear infinite;
  pointer-events:none;z-index:1;
}
.ops-scan-v{
  position:absolute;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,rgba(0,212,255,.6) 50%,transparent);
  box-shadow:0 0 15px #00d4ff;
  animation:jarvisScanV 5s linear infinite;
  pointer-events:none;z-index:1;
}
.ops-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,212,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.05) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
.ops-corner{
  position:absolute;width:40px;height:40px;
  border:2px solid rgba(0,212,255,.6);
  pointer-events:none;
}
.ops-corner.tl{top:24px;left:24px;border-right:none;border-bottom:none}
.ops-corner.tr{top:24px;right:24px;border-left:none;border-bottom:none}
.ops-corner.bl{bottom:24px;left:24px;border-right:none;border-top:none}
.ops-corner.br{bottom:24px;right:24px;border-left:none;border-top:none}
.ops-readout{
  position:absolute;
  font-family:'SF Mono','Monaco','Consolas',monospace;
  font-size:10px;
  color:rgba(0,212,255,.7);
  letter-spacing:.15em;text-transform:uppercase;
  pointer-events:none;line-height:1.6;
}
.ops-readout.tl{top:46px;left:76px}
.ops-readout.tr{top:46px;right:76px;text-align:right}
.ops-readout .ok{color:#00ff9d;font-weight:700}
.ops-panel-bracket{
  position:absolute;width:18px;height:18px;
  border:2px solid #00d4ff;
}
.ops-panel-bracket.tl{top:-1px;left:-1px;border-right:none;border-bottom:none}
.ops-panel-bracket.tr{top:-1px;right:-1px;border-left:none;border-bottom:none}
.ops-panel-bracket.bl{bottom:-1px;left:-1px;border-right:none;border-top:none}
.ops-panel-bracket.br{bottom:-1px;right:-1px;border-left:none;border-top:none}

@keyframes opsLogoGlow{
  0%,100%{filter:drop-shadow(0 0 10px rgba(0,212,255,.4))}
  50%{filter:drop-shadow(0 0 20px rgba(0,212,255,.9))}
}

/* Cartes agent style militaire */
.ops-agent-btn{
  background:rgba(0,0,0,.3) !important;
  border:1px solid rgba(0,212,255,.25) !important;
  border-radius:3px !important;
  padding:10px 14px !important;
  font-family:'SF Mono','Monaco',monospace !important;
  font-size:13px !important;
  color:#c8e8ff !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  text-align:left !important;
  width:100% !important;
  transition:all .2s !important;
  letter-spacing:.05em !important;
  position:relative !important;
}
.ops-agent-btn:hover{
  background:rgba(0,212,255,.12) !important;
  border-color:#00d4ff !important;
  box-shadow:0 0 15px rgba(0,212,255,.3) !important;
  transform:translateX(3px);
}
.ops-agent-avatar{
  width:34px;height:34px;border-radius:3px;
  background:rgba(0,212,255,.1);
  border:1px solid rgba(0,212,255,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#00d4ff;
  flex-shrink:0;font-family:'SF Mono',monospace;
  letter-spacing:.05em;
}
.ops-agent-role{
  margin-left:auto;font-size:9px;
  padding:2px 8px;border-radius:2px;
  font-family:'SF Mono',monospace;
  letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;
}
.ops-role-superadmin{background:rgba(196,140,255,.15);color:#c48cff;border:1px solid rgba(196,140,255,.4)}
.ops-role-admin{background:rgba(0,212,255,.15);color:#00d4ff;border:1px solid rgba(0,212,255,.4)}
.ops-role-agent{background:rgba(0,255,157,.1);color:#00ff9d;border:1px solid rgba(0,255,157,.3)}
.ops-role-assistant{background:rgba(240,193,78,.12);color:#f0c14e;border:1px solid rgba(240,193,78,.3)}

/* Séparateur de groupe de rôles */
.ops-role-sep{
  font-family:'SF Mono',monospace;font-size:9px;
  color:rgba(0,212,255,.4);
  letter-spacing:.25em;text-transform:uppercase;
  margin:10px 0 4px 0;padding-left:4px;
}


/* Classes utilitaires (remplacent styles inline répétés) */
.form-input{width:100%;font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg3);color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(76,141,255,.15)}
.search-box{font-size:12px;padding:7px 11px;border:1px solid var(--border);border-radius:7px;background:var(--bg2);color:var(--text);height:34px;outline:none;transition:border-color .2s}
.search-box:focus{border-color:var(--accent)}

/* ═══════════════════════════════════════════════
   📱 MOBILE RESPONSIVE — Adaptation auto pour smartphones/tablettes
   -----------------------------------------------------------------
   IMPORTANT : ces règles ne s'activent QUE sur écrans < 900px.
   Sur PC/grand écran, l'affichage reste STRICTEMENT INCHANGÉ.
   -----------------------------------------------------------------
   - < 900px : mode mobile (réduit marges, pleine largeur, etc.)
   - < 640px : mode smartphone serré (sidebar collapsée, boutons XL)
═══════════════════════════════════════════════ */

/* ── TABLET / PETITS LAPTOPS (< 900px) ────────────── */
@media(max-width:900px){
  /* Sidebar en mode icônes seulement (pour gagner de la place) */
  .sidebar{width:52px}
  .sidebar .logo-name,.sidebar .logo-sub,.sidebar .nav-item span,.nav-section-label{display:none}
  .content{margin-left:52px;padding:12px}

  /* Titres et marges réduits */
  h1{font-size:20px!important}
  h2{font-size:17px!important}

  /* KPIs : passer en 2 colonnes au lieu de 4 */
  .kpis{grid-template-columns:repeat(2,1fr)!important;gap:8px}

  /* Les tableaux deviennent scrollables horizontalement */
  table{font-size:12px}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Modals prennent plus de place à l'écran */
  .modal{width:95vw;max-width:95vw;max-height:92vh}

  /* Kanban Trello : colonnes plus étroites */
  .trello-col{min-width:260px}
}

/* ── SMARTPHONE (< 640px) ────────────────────────── */
@media(max-width:640px){
  /* Boutons plus gros pour doigts (cible tactile min 44x44 recommandée) */
  .btn{min-height:44px;padding:10px 14px;font-size:14px}
  .btn-sm{min-height:36px;padding:7px 11px;font-size:13px}

  /* Inputs plus gros pour mobile (évite le zoom iOS sur focus) */
  input,select,textarea{font-size:16px!important;min-height:44px;padding:10px 12px}
  .search-box{font-size:16px!important;height:44px;padding:10px 12px}

  /* KPIs en 1 seule colonne sur petit écran */
  .kpis{grid-template-columns:1fr!important}

  /* Filtres en pile verticale */
  .filters-row{flex-direction:column;gap:8px}
  .filters-row > *{width:100%}

  /* Cartes plus espacées (plus faciles à taper) */
  .card{padding:14px!important}

  /* Zones tactiles : agrandir les petits boutons (✕, edit, etc.) */
  button{touch-action:manipulation}

  /* Fiches détail : bannière pleine largeur */
  .ticket-page{width:100vw;left:0}

  /* Boutons flottants plus gros et mieux placés */
  .fab{bottom:20px;right:20px;width:56px;height:56px;font-size:24px}

  /* Trello : 1 colonne à la fois pour pas forcer le scroll horizontal */
  .trello-col{min-width:calc(100vw - 80px)}

  /* Sidebar : ultra-compacte */
  .sidebar{width:44px}
  .content{margin-left:44px;padding:8px}
}

/* ── ORIENTATION PAYSAGE SMARTPHONE ───────────────── */
@media(max-width:900px) and (orientation:landscape){
  /* En paysage on a encore moins de hauteur, donc on rétrécit les headers */
  .app-header,.section-header{padding-top:8px;padding-bottom:8px}
}

/* ── RÈGLE 3 (fin du bloc mobile) ──────────────────── */

/* ═══════════════════════════════════════════════
   NIVEAU 1 — MICRO-INTERACTIONS & POLISH
═══════════════════════════════════════════════ */

/* Scrollbar custom élégante partout */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(139,148,158,.15);border-radius:4px;transition:background .2s}
*::-webkit-scrollbar-thumb:hover{background:rgba(139,148,158,.3)}

/* Animation de changement d'onglet */
[id^="tab-"]{animation:tabIn .28s cubic-bezier(.4,0,.2,1)}
@keyframes tabIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Hover plus vivant sur tr (tables) */
tr{cursor:default}
tbody tr{position:relative;transition:background .2s, transform .2s}
tbody tr:hover td{background:rgba(76,141,255,.06)}

/* Inputs avec focus plus doux */
input:not([type=color]):not([type=file]),textarea,select{
  transition:border-color .2s, box-shadow .2s, background .2s !important;
}

/* Active state sur nav-item plus marqué */
.nav-item.active::before{
  content:'';position:absolute;left:-11px;top:8px;bottom:8px;
  width:3px;background:var(--accent);border-radius:0 3px 3px 0;
  box-shadow:0 0 8px var(--accent);
}

/* Cartes/stat avec effet lueur au hover */
.stat::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(ellipse at var(--mx,50%) var(--my,50%), rgba(76,141,255,.08), transparent 40%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.stat:hover::after{opacity:1}

/* Empty states plus jolis */
.empty-state{
  padding:40px 20px;text-align:center;
  color:var(--text3);font-size:13px;
  background:rgba(26,32,40,.3);
  border-radius:12px;border:1px dashed var(--border);
}

/* ═══════════════════════════════════════════════
   NIVEAU 2 — IDENTITÉ VISUELLE
═══════════════════════════════════════════════ */

/* Logo Alfred — chapeau de majordome (remplace l'ancien logo bloc) */
.logo-mark{
  position:relative;
  background:linear-gradient(135deg, #4c8dff 0%, #c48cff 100%) !important;
  overflow:hidden;
}
.logo-mark::before{
  content:'🎩';
  font-size:18px;position:absolute;
  inset:0;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.logo-mark svg{display:none}

/* ═══════════════════════════════════════════════
   NIVEAU 3 — UX MODERNE (Cmd+K, Toasts)
═══════════════════════════════════════════════ */

/* COMMAND PALETTE (Cmd+K) */
.cmdk-overlay{
  display:none;position:fixed;inset:0;z-index:500;
  background:rgba(5,8,12,.7);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  align-items:flex-start;justify-content:center;
  padding-top:120px;
  animation:fadeIn .15s ease;
}
.cmdk-overlay.show{display:flex}
.cmdk-box{
  width:600px;max-width:92vw;
  background:linear-gradient(135deg, #1a2028 0%, #12171f 100%);
  border:1px solid #3a4250;
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
  overflow:hidden;
  animation:modalIn .22s cubic-bezier(.4,0,.2,1);
}
.cmdk-input-wrap{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.cmdk-input-wrap svg{width:18px;height:18px;color:var(--text3);flex-shrink:0}
.cmdk-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-size:16px;font-weight:500;
  letter-spacing:-.01em;
}
.cmdk-input::placeholder{color:var(--text3)}
.cmdk-shortcut{
  font-size:11px;color:var(--text3);
  padding:3px 8px;border:1px solid var(--border);
  border-radius:5px;background:var(--bg3);
  font-family:ui-monospace,monospace;
}
.cmdk-results{max-height:400px;overflow-y:auto;padding:8px}
.cmdk-section-label{
  font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.1em;
  padding:10px 12px 6px;
}
.cmdk-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:8px;cursor:pointer;
  color:var(--text);transition:background .12s;
}
.cmdk-item:hover,.cmdk-item.selected{
  background:var(--accent-bg);color:var(--accent-text);
}
.cmdk-item-icon{
  width:32px;height:32px;border-radius:8px;
  background:var(--bg3);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.cmdk-item.selected .cmdk-item-icon{background:rgba(76,141,255,.2)}
.cmdk-item-title{flex:1;font-size:13.5px;font-weight:500}
.cmdk-item-sub{font-size:11.5px;color:var(--text3);margin-top:2px}
.cmdk-empty{padding:40px 20px;text-align:center;color:var(--text3);font-size:13px}

/* TOASTS */
.toast-container{
  position:fixed;bottom:24px;right:24px;z-index:10000;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;min-width:260px;max-width:380px;
  background:linear-gradient(135deg, #1a2028 0%, #242b36 100%);
  border:1px solid #3a4250;border-radius:12px;
  color:var(--text);font-size:13.5px;font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
  pointer-events:auto;cursor:default;
  animation:toastIn .3s cubic-bezier(.4,0,.2,1);
}
.toast.hide{animation:toastOut .25s cubic-bezier(.4,0,.2,1) forwards}
.toast-icon{
  width:22px;height:22px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:12px;font-weight:700;
}
.toast-success .toast-icon{background:var(--green-bg);color:var(--green-text)}
.toast-error .toast-icon{background:var(--red-bg);color:var(--red-text)}
.toast-info .toast-icon{background:var(--accent-bg);color:var(--accent-text)}
.toast-warn .toast-icon{background:var(--amber-bg);color:var(--amber-text)}
.toast-text{flex:1;line-height:1.4}
.toast-close{
  background:none;border:none;color:var(--text3);cursor:pointer;
  padding:4px 6px;border-radius:4px;font-size:16px;line-height:1;
  transition:background .15s;
}
.toast-close:hover{background:var(--bg4);color:var(--text)}
@keyframes toastIn{
  from{opacity:0;transform:translateX(20px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes toastOut{
  to{opacity:0;transform:translateX(20px)}
}

/* ═══ TRELLO — Premium Dark ═══ */
#tab-trello{padding:0 4px}
#trello-board{gap:14px!important;padding:4px 4px 16px!important}

.trello-col{
  background:#101418;
  border:1px solid #30363d;
  border-radius:12px;
  width:300px;min-width:300px;
  display:flex;flex-direction:column;
  /* 🆕 Hauteur adaptative : la colonne prend la hauteur de son contenu
     (comme dans le vrai Trello). max-height = plafond pour ne pas dépasser l'écran.
     align-self:flex-start empêche le parent flex de l'étirer à la hauteur de la plus haute. */
  align-self: flex-start;
  max-height:calc(100vh - 180px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:border-color .2s;
}
/* Colonne teintée par la société dominante */
.trello-col.trello-col-tinted{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--col-tint) 55%, #0f131a) 0%, color-mix(in srgb, var(--col-tint) 28%, #0a0d12) 100%);
  border-color: color-mix(in srgb, var(--col-tint) 80%, #30363d);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--col-tint) 40%, transparent), 0 4px 20px color-mix(in srgb, var(--col-tint) 20%, transparent);
}
.trello-col:hover{border-color:#484f58}
.trello-col.trello-col-tinted:hover{
  border-color: color-mix(in srgb, var(--col-tint) 95%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--col-tint) 60%, transparent), 0 6px 28px color-mix(in srgb, var(--col-tint) 30%, transparent);
}

/* Tactical : glow plus prononcé */
body.theme-tactical .trello-col.trello-col-tinted{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--col-tint) 40%, #030610) 0%, color-mix(in srgb, var(--col-tint) 18%, #050914) 100%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--col-tint) 60%, transparent), 0 0 30px color-mix(in srgb, var(--col-tint) 35%, transparent) !important;
}

/* En thème clair : fond très clair + tint éclatant */
body.theme-clair .trello-col.trello-col-tinted{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--col-tint) 28%, #ffffff) 0%, color-mix(in srgb, var(--col-tint) 14%, #ffffff) 100%) !important;
  border-color: color-mix(in srgb, var(--col-tint) 85%, #e5e7eb) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--col-tint) 50%, transparent), 0 4px 18px color-mix(in srgb, var(--col-tint) 25%, transparent) !important;
}
body.theme-clair .trello-col.trello-col-tinted:hover{
  border-color: color-mix(in srgb, var(--col-tint) 100%, transparent) !important;
}

.trello-col-header{
  padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-bottom:1px solid rgba(48,54,61,.5);
}
.trello-col.trello-col-tinted .trello-col-header{
  border-bottom-color: color-mix(in srgb, var(--col-tint) 60%, rgba(48,54,61,.5));
}
body.theme-clair .trello-col.trello-col-tinted .trello-col-header{
  border-bottom-color: color-mix(in srgb, var(--col-tint) 60%, rgba(229,231,235,.8)) !important;
}
.trello-col-title{
  font-size:13.5px;font-weight:700;color:#e6edf3;
  flex:1;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.01em;
}
body.theme-clair .trello-col-title{color:#1a202c !important}
body.theme-clair .trello-col-title:hover{color:#2563eb !important}

.trello-col-count{
  font-size:10.5px;color:#8b949e;
  background:rgba(139,148,158,.15);
  padding:3px 9px;border-radius:10px;font-weight:700;
  letter-spacing:.02em;
}
body.theme-clair .trello-col-count{
  color:#4a5568 !important;
  background:rgba(0,0,0,.08) !important;
}

/* Petits boutons en header de colonne (+, ⋯) */
.trello-col-btn{
  background:transparent;
  border:none;
  color:#8b949e;
  font-size:16px;
  line-height:1;
  padding:4px 8px;
  border-radius:6px;
  cursor:pointer;
  transition:all .15s;
  font-weight:700;
}
.trello-col-btn:hover{
  background:rgba(139,148,158,.15);
  color:#e6edf3;
}
body.theme-clair .trello-col-btn{color:#4a5568 !important}
body.theme-clair .trello-col-btn:hover{
  background:rgba(0,0,0,.08) !important;
  color:#1a202c !important;
}

/* Titre cliquable pour renommer */
.trello-col-title{cursor:pointer;transition:color .15s}
.trello-col-title:hover{color:#8fb8f6}

/* Input d'édition de nom de colonne */
.trello-col-title-input{
  flex:1;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(74,147,255,.5);
  border-radius:6px;
  color:#e6edf3;
  font-size:13.5px;
  font-weight:700;
  padding:4px 8px;
  outline:none;
  letter-spacing:.01em;
}
body.theme-clair .trello-col-title-input{
  background:rgba(255,255,255,.9) !important;
  border-color:rgba(59,130,246,.6) !important;
  color:#1a202c !important;
}

/* Bouton "+ Ajouter une colonne" à la fin du board */
.trello-col-add{
  min-width:280px;
  width:280px;
  height:fit-content;
  background:rgba(255,255,255,.04);
  border:1px dashed rgba(139,148,158,.35);
  border-radius:12px;
  padding:14px 16px;
  color:#8b949e;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.trello-col-add:hover{
  background:rgba(74,147,255,.08);
  border-color:rgba(74,147,255,.35);
  color:#e6edf3;
}

/* Popover menu "..." de colonne */
.trello-col-menu{
  position:absolute;
  background:#1c2128;
  border:1px solid #30363d;
  border-radius:8px;
  padding:6px;
  min-width:200px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  z-index:9999;
}
.trello-col-menu-item{
  padding:8px 12px;
  font-size:13px;
  color:#e6edf3;
  border-radius:5px;
  cursor:pointer;
  transition:background .1s;
  display:flex;align-items:center;gap:8px;
}
.trello-col-menu-item:hover{background:rgba(74,147,255,.15)}
.trello-col-menu-item.danger{color:#ff7b72}
.trello-col-menu-item.danger:hover{background:rgba(248,81,73,.15)}
.trello-col-menu-sep{
  height:1px;background:#30363d;margin:4px 0;
}

/* Palette de couleurs dans le menu */
.trello-col-menu-colors{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:6px;
  padding:8px;
}
.trello-col-menu-color{
  width:28px;height:28px;
  border-radius:6px;
  cursor:pointer;
  border:2px solid transparent;
  transition:all .15s;
}
.trello-col-menu-color:hover{transform:scale(1.15)}
.trello-col-menu-color.active{border-color:#fff}
.trello-col-menu-color.none{
  background:linear-gradient(45deg, #30363d 0%, #30363d 49%, #ff7b72 49%, #ff7b72 51%, #30363d 51%, #30363d 100%);
}
.trello-col-body{
  /* 🆕 flex:0 1 auto (au lieu de flex:1) : le body prend sa taille naturelle (contenu),
     ne s'étire plus pour remplir toute la hauteur de la colonne.
     Les colonnes deviennent adaptatives comme dans le vrai Trello. */
  padding:8px 8px 4px;flex:0 1 auto;overflow-y:auto;min-height:60px;
  scrollbar-width:thin;scrollbar-color:#30363d transparent;
}
.trello-col-body::-webkit-scrollbar{width:6px}
.trello-col-body::-webkit-scrollbar-thumb{background:#30363d;border-radius:3px}
.trello-col-body.drag-over{background:rgba(47,129,247,.08);border-radius:8px}

/* ── CARTES (style Trello vrai) ── */
.trello-card{
  background:#22272e;
  border:none;
  outline:none;
  border-radius:8px;
  padding:10px 12px 9px;
  margin-bottom:8px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  position:relative;
  box-shadow:0 1px 1px rgba(0,0,0,.15);
  animation: trelloCardIn .22s ease-out;
  -webkit-tap-highlight-color:transparent;
}
.trello-card:focus,
.trello-card:focus-visible,
.trello-card:active{
  outline:none;
  box-shadow:0 1px 1px rgba(0,0,0,.15);
}
@keyframes trelloCardIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.trello-card:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.3);
  background:#2a3039;
}
.trello-card.dragging{opacity:.4;transform:rotate(1.5deg) scale(1.02);cursor:grabbing;box-shadow:0 12px 30px rgba(0,0,0,.5)}

/* Multi-bandeaux étiquettes (thin bars colorées en haut) */
.tr-bars{
  display:flex;
  gap:4px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.tr-bar{
  height:6px;
  width:40px;
  border-radius:2px;
  display:inline-block;
  transition:all .15s;
}
.trello-card:hover .tr-bar{height:7px}

/* Titre de carte */
.trello-card-title{
  font-size:13.5px;
  font-weight:600;
  color:#e6edf3;
  line-height:1.4;
  word-break:break-word;
}
/* Margin-bottom seulement si une rangée d'icônes suit */
.trello-card-title:has(+ .trello-card-icons){
  margin-bottom:6px;
}
/* Fallback pour navigateurs sans :has() (rare) */
.trello-card .trello-card-icons{margin-top:6px}

/* Icônes compactes en bas de carte */
.trello-card-icons{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.tr-icon{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  color:var(--text2);
  font-weight:600;
}
.tr-icon svg{opacity:1;width:13px;height:13px}
.tr-check-done{color:#3fb950;background:rgba(63,185,80,.12);padding:2px 6px;border-radius:4px;font-weight:700}
.tr-bell{color:#ef4444;background:rgba(239,68,68,.12);padding:2px 6px;border-radius:10px;font-weight:700;animation:tr-bell-pulse 2s ease-in-out infinite}
@keyframes tr-bell-pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* Badge date (compact, coloré selon urgence) */
.tr-due{
  padding:2px 7px;
  border-radius:4px;
  font-weight:700;
  font-size:10.5px;
}
.tr-due-late{background:rgba(248,81,73,.18);color:#ff7b72}
.tr-due-soon{background:rgba(227,172,43,.18);color:#e3b341}
.tr-due-ok{color:#8b949e}

/* Avatars ronds en bas à droite */
.tr-avatars{
  display:flex;
  align-items:center;
  margin-left:auto;
}
.tr-avatar{
  width:24px;height:24px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:#fff;
  border:2px solid #22272e;
  margin-left:-6px;
  letter-spacing:0;
  text-transform:uppercase;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.tr-avatar:first-child{margin-left:0}
.trello-card:hover .tr-avatar{border-color:#2a3039}

/* Bouton "+ Ajouter une carte" */
.trello-add-card{
  font-size:12.5px;color:#8b949e;
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  margin:4px 0;
  transition:all .15s;
  display:flex;align-items:center;gap:6px;
  font-weight:500;
}
.trello-add-card:hover{
  color:#e6edf3;
  background:rgba(255,255,255,.06);
}
.trello-col.trello-col-tinted .trello-add-card:hover{
  background:rgba(255,255,255,.08);
}
.trello-add-card::before{content:'+';font-size:18px;font-weight:400;opacity:.7;line-height:1}

/* Form d'ajout rapide */
.trello-add-form{
  background:#22272e;
  border:1px solid rgba(74,147,255,.4);
  border-radius:8px;
  padding:10px;
  margin:4px 0 8px;
  box-shadow:0 6px 18px rgba(0,0,0,.4), 0 0 0 3px rgba(74,147,255,.1);
  animation: trelloFormIn .18s ease-out;
}
@keyframes trelloFormIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.trello-add-form input{
  width:100%;background:transparent;border:none;outline:none;
  color:#e6edf3;font-size:13.5px;font-weight:500;
  padding:4px 6px;resize:none;min-height:38px;
  letter-spacing:.01em;
}
.trello-add-form input::placeholder{color:#6e7681;font-weight:400}
.trello-add-form-actions{display:flex;gap:8px;margin-top:10px;align-items:center}
.trello-add-form-actions .btn{padding:6px 14px;font-size:12px;font-weight:600;border-radius:6px}
.trello-add-form-hint{
  font-size:10.5px;color:#6e7681;
  margin-left:auto;font-style:italic;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE MOBILE — Adaptation écrans tactiles
   Breakpoints : 768px (tablette), 480px (mobile)
═══════════════════════════════════════════════ */

/* Bouton hamburger — visible uniquement sur mobile */
.mobile-menu-btn{
  display:none;
  position:fixed;
  top:14px;left:14px;
  z-index:100;
  width:40px;height:40px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.mobile-menu-btn svg{width:20px;height:20px;fill:var(--text)}
/* 🆕 V3.143 : badge notifs sur le bouton hamburger (mobile) */
.mobile-menu-btn .mobile-menu-notifs-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;
  background:#ef4444;color:#fff;
  font-size:10px;font-weight:800;
  align-items:center;justify-content:center;
  border:2px solid var(--bg);
  line-height:1;
  box-shadow:0 0 8px rgba(239,68,68,.6);
}
.mobile-menu-btn .mobile-menu-notifs-badge[style*="display:none"]{display:none !important}
.mobile-menu-btn .mobile-menu-notifs-badge:not([style*="display:none"]){display:flex}

/* Overlay qui s'affiche quand la sidebar mobile est ouverte */
.mobile-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  z-index:9;
}
.mobile-overlay.show{display:block}

@media (max-width: 900px){
  /* 🆕 V3.143 : Inputs à 16px sur mobile pour empêcher iOS de zoomer au focus.
     iOS Safari zoome automatiquement sur tout input < 16px → désoriente l'utilisateur.
     Cible tous les champs saisissables, sauf ceux explicitement plus petits. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea{
    font-size:16px !important;
  }
  /* Sidebar : transformée en drawer slide-in */
  .sidebar{
    transform:translateX(-100%);
    transition:transform .25s ease-out;
    width:260px;
    box-shadow:4px 0 20px rgba(0,0,0,.4);
  }
  .sidebar.mobile-open{
    transform:translateX(0);
  }

  /* Content : pleine largeur, plus de margin-left */
  .content{
    margin-left:0 !important;
    padding:60px 14px 20px !important;
  }

  /* Bouton hamburger visible */
  .mobile-menu-btn{display:flex}

  /* Toprow : empilable */
  .toprow{
    flex-wrap:wrap !important;
    gap:10px !important;
  }
  .toprow > div:first-child{flex:1;min-width:180px}

  /* Filtres : empilés verticalement */
  .filters{
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  .filters input,
  .filters select{
    min-width:0 !important;
    flex:1 1 130px !important;
    font-size:12px !important;
  }

  /* Tables : scrollables horizontalement */
  .tbl-wrap,
  .table-wrap{overflow-x:auto}
  table{font-size:11.5px !important}
  table th, table td{padding:7px 8px !important}

  /* KPIs : grille 2x2 au lieu de 4 colonnes */
  .stats,
  [style*="grid-template-columns:repeat(4"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  .stat-val{font-size:18px !important}
  .stat-label{font-size:10px !important}

  /* Modals : 95% largeur */
  [style*="max-width:520px"],
  [style*="max-width:620px"],
  [style*="max-width:600px"],
  [style*="max-width:960px"]{
    max-width:95vw !important;
    max-height:90vh !important;
  }

  /* Page titles : un peu plus petits */
  .page-title{font-size:18px !important}
  .page-sub{font-size:11.5px !important}

  /* Boutons : espacement réduit */
  .btn{padding:7px 12px !important;font-size:12px !important}
  .btn-sm{padding:5px 9px !important;font-size:11px !important}

  /* Espace Client : sous-onglets scrollable horizontalement */
  [style*="display:flex"] .ec-subtab{
    white-space:nowrap;
    min-width:auto;
    padding:7px 12px !important;
    font-size:11.5px !important;
  }

  /* Trello : scroll horizontal plus fluide */
  #trello-board{
    padding:4px 4px 14px !important;
    gap:10px !important;
  }
  .trello-col{width:270px !important;min-width:270px !important}

  /* Fiche logement : colonne unique sur mobile */
  [style*="grid-template-columns:1fr 320px"]{
    grid-template-columns:1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr"]:not(.filters){
    grid-template-columns:1fr !important;
  }
}

/* Mobile strict < 480px — encore plus resserré */
@media (max-width: 480px){
  .content{padding:56px 10px 16px !important}

  /* KPIs : 1 colonne */
  .stats{grid-template-columns:1fr !important}

  /* Page titles */
  .page-title{font-size:16px !important}

  /* Cacher certains badges secondaires pour gagner de la place */
  .nav-badge{font-size:9px !important;padding:1px 5px !important}

  /* Cards plus compactes */
  [class*="card"]{padding:12px !important}

  /* Sidebar label sections : plus petites */
  .nav-section-label{font-size:10px !important;padding:8px 10px 3px !important}
  .nav-item{font-size:12.5px !important;padding:8px 10px !important}
}

/* ═══════════ COCKPIT : animations + effets visuels ═══════════ */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pulseGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,0); }
  50%     { box-shadow:0 0 0 6px rgba(239,68,68,0.15); }
}
@keyframes skeletonShimmer {
  0%   { background-position:-200px 0; }
  100% { background-position:calc(200px + 100%) 0; }
}
@keyframes badgePulse {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.08); }
}
@keyframes itemSlide {
  from { opacity:0; transform:translateX(-6px); }
  to   { opacity:1; transform:translateX(0); }
}

/* Typography : stack système Inter-like + chiffres tabulaires */
#tab-cockpit {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI Variable','SF Pro Display','Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-feature-settings:'cv02','cv03','cv04','cv11','ss01';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#tab-cockpit .cockpit-big-num,
#tab-cockpit .cockpit-big-num-sm { font-variant-numeric:tabular-nums; letter-spacing:-0.03em; }

/* Halos selon gravité */
#tab-cockpit .card-halo-red    { box-shadow:0 0 0 1px rgba(239,68,68,.3),0 4px 20px rgba(239,68,68,.15); }
#tab-cockpit .card-halo-orange { box-shadow:0 0 0 1px rgba(249,115,22,.3),0 4px 16px rgba(249,115,22,.12); }
#tab-cockpit .card-halo-green  { box-shadow:0 0 0 1px rgba(34,197,94,.3),0 4px 20px rgba(34,197,94,.15); }
#tab-cockpit .card-halo-gold   { box-shadow:0 0 0 1px rgba(250,204,21,.3),0 4px 16px rgba(250,204,21,.12); }

/* Hover card élégant */
#tab-cockpit > div > div > div[id^="cockpit-card-"]:hover,
#tab-cockpit #cockpit-team-block:hover { transform:translateY(-2px); transition:transform .2s; }

/* Big numbers : pour les KPIs clés */
.cockpit-big-num { font-size:32px; font-weight:800; letter-spacing:-0.02em; line-height:1; }
.cockpit-big-num-sm { font-size:22px; font-weight:800; line-height:1; }

/* Dégradés sur big numbers */
.cockpit-big-num-green {
  background:linear-gradient(135deg,#10b981 0%,#34d399 50%,#a7f3d0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cockpit-big-num-red {
  background:linear-gradient(135deg,#dc2626 0%,#f87171 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cockpit-big-num-blue {
  background:linear-gradient(135deg,#3b82f6 0%,#60a5fa 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cockpit-big-num-amber {
  background:linear-gradient(135deg,#f59e0b 0%,#fbbf24 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Ligne stratégique : cards plus hautes (priorité visuelle) */
#tab-cockpit > div:nth-of-type(3) > div { min-height:160px; }

/* Dots de composition (cercles gravité) */
.cockpit-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* Sparkline mini */
.cockpit-sparkline { display:inline-block; height:24px; }

/* Pattern subtil de fond dans les cards principales */
#tab-cockpit [id^="cockpit-card-"],
#tab-cockpit #cockpit-team-block {
  background-image:
    radial-gradient(circle at 80% 10%, rgba(255,255,255,0.025) 0%, transparent 40%),
    radial-gradient(circle at 20% 90%, rgba(255,255,255,0.015) 0%, transparent 35%);
}
body.theme-clair #tab-cockpit [id^="cockpit-card-"],
body.theme-clair #tab-cockpit #cockpit-team-block {
  background-image:
    radial-gradient(circle at 80% 10%, rgba(0,0,0,0.02) 0%, transparent 40%),
    radial-gradient(circle at 20% 90%, rgba(0,0,0,0.015) 0%, transparent 35%);
}

/* Items : animation au hover (micro-glissement) */
#tab-cockpit [onclick]:not(button):hover {
  transform:translateX(2px); transition:all .15s ease;
}

/* Focus mode */
.cockpit-focus-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
  z-index:9998; opacity:0; animation:fadeInUp .2s forwards;
}
.cockpit-focus-card {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:90%; max-width:720px; max-height:85vh; overflow-y:auto;
  background:var(--bg2); border:1px solid var(--border); border-radius:16px;
  padding:28px; z-index:9999; box-shadow:0 20px 60px rgba(0,0,0,.5);
}

/* Avatar color pour productivité */
.cockpit-avatar {
  width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#fff; margin-right:6px;
}

/* ─── Separateurs de ligne (labels discrets) ─── */
.cockpit-row-label {
  display:flex; align-items:center; gap:12px;
  font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text3); margin:6px 0 12px;
}
.cockpit-row-label::before,
.cockpit-row-label::after {
  content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent);
}

/* ─── Blocs cockpit : hover subtil (style Finary) ─── */
.cockpit-block:hover {
  border-color:rgba(255,255,255,.12) !important;
  transform:translateY(-1px);
}
body.theme-clair .cockpit-block:hover {
  border-color:#cbd5e1 !important;
}

/* ─── Cartes Idées : hover subtil ─── */
.idee-card:hover {
  border-color:rgba(255,255,255,.15) !important;
  transform:translateY(-1px);
}
body.theme-clair .idee-card:hover {
  border-color:#cbd5e1 !important;
}

/* ─── Source pills (icônes contextuelles colorées) ─── */
.cockpit-source-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; border-radius:10px; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em;
}
.src-tickets    { background:rgba(239,68,68,.12);  color:#ef4444; }
.src-travaux    { background:rgba(249,115,22,.12); color:#f97316; }
.src-fiscal     { background:rgba(59,130,246,.12); color:#3b82f6; }
.src-menage     { background:rgba(20,184,166,.12); color:#14b8a6; }
.src-idees      { background:rgba(168,85,247,.12); color:#a855f7; }
.src-juridique  { background:rgba(217,70,239,.12); color:#d946ef; }
.src-sante      { background:rgba(236,72,153,.12); color:#ec4899; }
.src-trello     { background:rgba(99,102,241,.12); color:#6366f1; }
.src-rh         { background:rgba(245,158,11,.12); color:#f59e0b; }
.src-lead       { background:rgba(34,197,94,.12);  color:#22c55e; }
.src-logement   { background:rgba(6,182,212,.12);  color:#06b6d4; }

/* ─── Tendances (flèches ↗ ↘) ─── */
.cockpit-trend {
  display:inline-flex; align-items:center; gap:2px;
  padding:2px 6px; border-radius:8px; font-size:10px; font-weight:700;
  vertical-align:middle; margin-left:6px;
}
.cockpit-trend-up   { background:rgba(34,197,94,.15);  color:#22c55e; }
.cockpit-trend-down { background:rgba(239,68,68,.15);  color:#ef4444; }
.cockpit-trend-flat { background:rgba(156,163,175,.15); color:var(--text3); }

/* ─── Badges qui pulsent (sur items Grosse) ─── */
.cockpit-badge-grosse { animation:badgePulse 2s ease-in-out infinite; }

/* ─── Items : animation d'entrée en cascade ─── */
#tab-cockpit [id$="-list"] > div[onclick],
#tab-cockpit [id$="-list"] > div[style*="onclick"] {
  animation:itemSlide .3s ease-out backwards;
}

/* ─── Skeleton loader animé ─── */
.cockpit-skeleton {
  background:linear-gradient(90deg,
    rgba(120,120,120,0.08) 25%,
    rgba(180,180,180,0.15) 50%,
    rgba(120,120,120,0.08) 75%
  );
  background-size:200px 100%;
  background-repeat:no-repeat;
  border-radius:6px;
  animation:skeletonShimmer 1.4s infinite linear;
  display:block;
}
.cockpit-skeleton-line { height:14px; margin-bottom:8px; }
.cockpit-skeleton-bar  { height:40px; margin-bottom:8px; }

/* ─── Timestamp relatif stylé ─── */
.cockpit-ts {
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; font-variant-numeric:tabular-nums;
}
.cockpit-ts-fresh   { color:#22c55e; font-weight:600; }
.cockpit-ts-recent  { color:var(--text2); }
.cockpit-ts-old     { color:var(--text3); }

/* ═══ PATRIMOINE — Cartes catégories hover (compatible 2 thèmes) ═══ */
#tab-patrimoine .patr-cat-card {
  transition: all .2s ease;
}
#tab-patrimoine .patr-cat-card:hover {
  border-color: #374151 !important;
  transform: translateY(-1px);
}
body.theme-clair #tab-patrimoine .patr-cat-card:hover {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}
/* Carte Passifs (bordure rouge) - hover adapté */
#tab-patrimoine .patr-cat-card.patr-debt:hover {
  border-color: rgba(239,68,68,.45) !important;
}

body.theme-clair #tab-patrimoine {
  background: #f8fafc !important;
  color: #0f172a !important;
}
/* Fond principal */
body.theme-clair #tab-patrimoine[style*="#07090c"] {
  background: #f8fafc !important;
}
/* Gradients radiaux (atmospheric) - plus subtils en clair */
body.theme-clair #tab-patrimoine [style*="rgba(99,102,241,.15)"] {
  background: radial-gradient(circle,rgba(99,102,241,.08) 0%,transparent 70%) !important;
}
body.theme-clair #tab-patrimoine [style*="rgba(34,197,94,.1)"] {
  background: radial-gradient(circle,rgba(34,197,94,.06) 0%,transparent 70%) !important;
}
/* Hero glassmorphism */
body.theme-clair #tab-patrimoine [style*="rgba(15,19,24,.7)"],
body.theme-clair #tab-patrimoine [style*="rgba(15,19,24,.4)"] {
  background: linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.7) 100%) !important;
}
/* Cartes catégories + panneaux */
body.theme-clair #tab-patrimoine [style*="background:#0f1318"],
body.theme-clair #tab-patrimoine [style*="background: #0f1318"] {
  background: #ffffff !important;
}
/* Bordures sombres → bordures claires */
body.theme-clair #tab-patrimoine [style*="border:1px solid #1f2937"] {
  border: 1px solid #e2e8f0 !important;
}
body.theme-clair #tab-patrimoine [style*="border:1px solid rgba(255,255,255,.06)"] {
  border: 1px solid #e2e8f0 !important;
}
body.theme-clair #tab-patrimoine [style*="border-left:1px solid rgba(255,255,255,.06)"] {
  border-left: 1px solid #e2e8f0 !important;
}
/* Hover bordures */
body.theme-clair #tab-patrimoine [onmouseenter*="'#374151'"]:hover {
  border-color: #cbd5e1 !important;
}
/* Textes principaux */
body.theme-clair #tab-patrimoine [style*="color:#f9fafb"],
body.theme-clair #tab-patrimoine [style*="color: #f9fafb"] {
  color: #0f172a !important;
}
body.theme-clair #tab-patrimoine [style*="color:#e8ecf1"],
body.theme-clair #tab-patrimoine [style*="color: #e8ecf1"] {
  color: #1e293b !important;
}
body.theme-clair #tab-patrimoine [style*="color:#9ca3af"],
body.theme-clair #tab-patrimoine [style*="color: #9ca3af"] {
  color: #64748b !important;
}
body.theme-clair #tab-patrimoine [style*="color:#6b7280"],
body.theme-clair #tab-patrimoine [style*="color: #6b7280"] {
  color: #94a3b8 !important;
}
/* Boutons (période + ajouter) */
body.theme-clair #tab-patrimoine [style*="background:#0f1318"][style*="border:1px solid #1f2937"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
body.theme-clair #tab-patrimoine [style*="background:#1f2937"] {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
body.theme-clair #tab-patrimoine [style*="background: #1f2937"] {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
/* Bouton période actif */
body.theme-clair .patr-period-btn[style*="background:#1f2937"] {
  background: #0f172a !important;
  color: #ffffff !important;
}
/* Grille donut SVG texte central */
body.theme-clair #tab-patrimoine [style*="background:rgba(255,255,255,.02)"] {
  background: #f8fafc !important;
}
body.theme-clair #tab-patrimoine [style*="background:rgba(255,255,255,.04)"] {
  background: #f1f5f9 !important;
}
/* Dettes - garder rouge mais fond clair */
body.theme-clair #tab-patrimoine [style*="border:1px solid rgba(239,68,68,.2)"] {
  border: 1px solid rgba(239,68,68,.35) !important;
  background: #fefefe !important;
}

/* ═══════════════════════════════════════════════════════════
   FINARY-LIKE OVERRIDE — remappe les couleurs dorées "Batman"
   générées en JS (renderPatrimoine) vers un style fintech moderne
   et neutre inspiré de Finary. Opère en thème sombre uniquement.
   ═══════════════════════════════════════════════════════════ */
#tab-patrimoine [style*="color:#f0c14e"],
#tab-patrimoine [style*="color: #f0c14e"] {
  color:#f9fafb !important;
}
#tab-patrimoine [style*="color:#e6d08f"],
#tab-patrimoine [style*="color: #e6d08f"] {
  color:#e8ecf1 !important;
}
#tab-patrimoine [style*="color:#8a7a3a"],
#tab-patrimoine [style*="color: #8a7a3a"] {
  color:#9ca3af !important;
}
#tab-patrimoine [style*="color:#d97878"],
#tab-patrimoine [style*="color: #d97878"] {
  color:#ef4444 !important;
}
#tab-patrimoine [style*="color:#56d364"],
#tab-patrimoine [style*="color: #56d364"] {
  color:#22c55e !important;
}
#tab-patrimoine [style*="color:#4c8dff"],
#tab-patrimoine [style*="color: #4c8dff"] {
  color:#3b82f6 !important;
}
#tab-patrimoine [style*="color:#f7931a"],
#tab-patrimoine [style*="color: #f7931a"] {
  color:#f97316 !important;
}
#tab-patrimoine [style*="color:#c48cff"],
#tab-patrimoine [style*="color: #c48cff"] {
  color:#38bdf8 !important;
}
#tab-patrimoine [style*="background:rgba(240,193,78,.03)"],
#tab-patrimoine [style*="background:rgba(240,193,78,.04)"] {
  background:rgba(255,255,255,.02) !important;
}
#tab-patrimoine [style*="border:1px solid rgba(240,193,78,.1)"] {
  border:1px solid rgba(255,255,255,.06) !important;
}
#tab-patrimoine [style*="border-top:1px solid rgba(240,193,78,.08)"] {
  border-top:1px solid rgba(255,255,255,.05) !important;
}
#tab-patrimoine [style*="background:rgba(240,193,78,.08)"] {
  background:rgba(255,255,255,.04) !important;
}
#tab-patrimoine [style*="background:rgba(86,211,100,.04)"] {
  background:rgba(34,197,94,.04) !important;
}
#tab-patrimoine [style*="border:1px solid rgba(86,211,100,.1)"] {
  border:1px solid rgba(34,197,94,.15) !important;
}
#tab-patrimoine [style*="background:rgba(76,141,255,.04)"] {
  background:rgba(59,130,246,.04) !important;
}
#tab-patrimoine [style*="border:1px solid rgba(76,141,255,.1)"] {
  border:1px solid rgba(59,130,246,.15) !important;
}
#tab-patrimoine [style*="background:rgba(247,147,26,.04)"] {
  background:rgba(249,115,22,.04) !important;
}
#tab-patrimoine [style*="border:1px solid rgba(247,147,26,.1)"] {
  border:1px solid rgba(249,115,22,.15) !important;
}
#tab-patrimoine [style*="background:rgba(196,140,255,.04)"] {
  background:rgba(139,92,246,.04) !important;
}
#tab-patrimoine [style*="border:1px solid rgba(196,140,255,.1)"] {
  border:1px solid rgba(139,92,246,.15) !important;
}
#tab-patrimoine [style*="background:rgba(217,120,120,.04)"] {
  background:rgba(239,68,68,.04) !important;
}
#tab-patrimoine [style*="border:1px solid rgba(217,120,120,.1)"] {
  border:1px solid rgba(239,68,68,.15) !important;
}
/* Hover bordures */
#tab-patrimoine [onmouseenter*="rgba(240,193,78,.3)"]:hover,
#tab-patrimoine [onmouseenter*="rgba(86,211,100,.3)"]:hover,
#tab-patrimoine [onmouseenter*="rgba(76,141,255,.3)"]:hover,
#tab-patrimoine [onmouseenter*="rgba(247,147,26,.3)"]:hover,
#tab-patrimoine [onmouseenter*="rgba(196,140,255,.3)"]:hover,
#tab-patrimoine [onmouseenter*="rgba(217,120,120,.3)"]:hover {
  border-color:rgba(255,255,255,.15) !important;
}

/* Thème clair : items des listes (immo, cash, etc.) */
body.theme-clair #tab-patrimoine [style*="background:rgba(255,255,255,.02)"] {
  background: #f8fafc !important;
}
body.theme-clair #tab-patrimoine [style*="background:rgba(34,197,94,.04)"] {
  background: rgba(34,197,94,.06) !important;
}
body.theme-clair #tab-patrimoine [style*="background:rgba(59,130,246,.04)"] {
  background: rgba(59,130,246,.06) !important;
}
body.theme-clair #tab-patrimoine [style*="background:rgba(249,115,22,.04)"] {
  background: rgba(249,115,22,.06) !important;
}
body.theme-clair #tab-patrimoine [style*="background:rgba(139,92,246,.04)"] {
  background: rgba(139,92,246,.06) !important;
}
body.theme-clair #tab-patrimoine [style*="background:rgba(239,68,68,.04)"] {
  background: rgba(239,68,68,.06) !important;
}
/* Bordures items en clair */
body.theme-clair #tab-patrimoine [style*="border:1px solid rgba(255,255,255,.06)"] {
  border: 1px solid #e2e8f0 !important;
}
body.theme-clair #tab-patrimoine [style*="border:1px solid rgba(34,197,94,.15)"] {
  border: 1px solid rgba(34,197,94,.3) !important;
}
body.theme-clair #tab-patrimoine [style*="border:1px solid rgba(59,130,246,.15)"] {
  border: 1px solid rgba(59,130,246,.3) !important;
}
body.theme-clair #tab-patrimoine [style*="border:1px solid rgba(249,115,22,.15)"] {
  border: 1px solid rgba(249,115,22,.3) !important;
}
body.theme-clair #tab-patrimoine [style*="border:1px solid rgba(139,92,246,.15)"] {
  border: 1px solid rgba(139,92,246,.3) !important;
}
body.theme-clair #tab-patrimoine [style*="border:1px solid rgba(239,68,68,.15)"] {
  border: 1px solid rgba(239,68,68,.3) !important;
}

/* 🔧 V3.85 : Bloc CSS body.role-observateur supprimé (rôle observateur retiré). */

/* ═══════════════════════════════════════════════════════════════════════════════
 *   V3.144 — REFONTE RESPONSIVE MOBILE
 *   Tout < 900px : adaptation cohérente, pas de "dézoom forcé"
 *   Desktop > 900px : INTACT, rien ne change
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px){

  /* ── 1) LAYOUT GLOBAL ──────────────────────── */
  /* Plus de margin-left forcée (sidebar est en drawer) */
  .content{
    margin-left: 0 !important;
    padding: 64px 12px 18px !important;
  }

  /* Titres de pages plus compacts */
  .page-title{ font-size: 19px !important; line-height: 1.2 !important }
  .page-sub{ font-size: 12px !important; margin-top: 2px !important }

  /* Toprow : titre au-dessus, actions en dessous */
  .toprow{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .toprow > *{ width: 100% }

  /* ── 2) STATS / KPIs ─────────────────────── */
  /* TOUTES les grilles 3-6 colonnes → passent en 2 colonnes max */
  .stats,
  .gaming-kpi-grid,
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"]{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Si très petit écran (< 380px) : 1 colonne */
  @media (max-width: 380px){
    .stats, .gaming-kpi-grid{
      grid-template-columns: 1fr !important;
    }
  }
  .stat, .rstat, .gaming-kpi{ padding: 10px 12px !important }
  .stat-val, .rstat-val{ font-size: 17px !important }
  .stat-label, .rstat-label{ font-size: 10px !important }
  .gaming-kpi-val{ font-size: 22px !important }
  .gaming-kpi-label{ font-size: 10px !important }
  .gaming-kpi-sub{ font-size: 9.5px !important }

  /* ── 3) GRILLES 2 COLONNES → 1 ────────────── */
  /* Logements, fiches, dashboards split */
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns:1fr 400px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns:300px 1fr"],
  [style*="grid-template-columns:320px 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ── 4) FILTRES & SEARCH ────────────────── */
  .filters{
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .filters input,
  .filters select{
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }
  .filters input[type="search"],
  .filters input[type="text"]:first-child{
    flex: 1 1 100% !important;
  }

  /* ── 5) BOUTONS ─────────────────────────── */
  .btn{
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-height: 38px !important;  /* tactile-friendly Apple guideline */
  }
  .btn-sm{
    padding: 6px 10px !important;
    font-size: 12px !important;
    min-height: 32px !important;
  }

  /* ── 6) TABLEAUX ────────────────────────── */
  .tbl-wrap, .table-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  table{ font-size: 12px !important }
  table th, table td{
    padding: 8px 10px !important;
    white-space: nowrap;
  }

  /* ── 7) MODALS ─────────────────────────── */
  .overlay .modal,
  [class*="modal"][style*="width"]{
    max-width: 95vw !important;
    width: 95vw !important;
    max-height: 92vh !important;
    margin: 4vh auto !important;
  }
  .modal-header{ padding: 12px 14px !important }
  .modal-body, .modal-content{
    padding: 12px 14px !important;
  }

  /* ── 8) CARDS GÉNÉRIQUES ─────────────── */
  .card, [class*="-card"]:not(.modal-card){
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* ── 9) COCKPIT spécifique ──────────── */
  /* 🔧 V3.147 : neutralise le margin négatif conçu pour desktop (-28px -32px)
     qui décalait le contenu vers la gauche sur mobile. */
  #tab-cockpit{
    margin: 0 !important;
  }
  /* Score géant et blocs principaux */
  #tab-cockpit [style*="font-size:48px"],
  #tab-cockpit [style*="font-size:56px"],
  #tab-cockpit [style*="font-size:60px"]{
    font-size: 36px !important;
  }
  #tab-cockpit [style*="font-size:32px"]{ font-size: 24px !important }

  /* ── 10) RAPPORT GAMING ──────────── */
  /* Podium plus compact */
  .gaming-podium-wrap{
    padding: 18px 6px 10px !important;
    min-height: 220px !important;
    gap: 4px !important;
  }
  .podium-spot{ flex-shrink: 0 }

  /* Cartes agent : score géant un peu réduit */
  .gaming-score-num{ font-size: 26px !important }
  .gaming-name{ font-size: 14px !important }
  .gaming-stats-row{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .gaming-stat-val{ font-size: 14px !important }

  /* ── 11) RH (le plus dense) ────── */
  /* Planning & paie : tableaux scrollables */
  #tab-rh .tbl-wrap,
  #tab-paie .tbl-wrap,
  #tab-monespacesalarie .tbl-wrap{
    overflow-x: auto !important;
  }

  /* Cartes salariés : 1 colonne */
  #tab-rh [style*="grid-template-columns:repeat(auto-fit"],
  #tab-rh [style*="grid-template-columns:repeat(auto-fill"]{
    grid-template-columns: 1fr !important;
  }

  /* ── 12) TRELLO ──────────────── */
  #trello-board{
    padding: 4px !important;
    gap: 8px !important;
  }
  .trello-col{
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
  }
  .trello-card{ padding: 10px !important }

  /* ── 13) TICKETS detail ────── */
  #ticket-detail-modal .ticket-detail-grid,
  [class*="ticket-detail"]{
    grid-template-columns: 1fr !important;
  }

  /* ── 14) ESPACE CLIENT sub-tabs ─ */
  /* Onglets horizontaux scrollables */
  .ec-subtabs,
  [class*="-subtabs"]{
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .ec-subtab{
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* ── 15) PATRIMOINE ──────────── */
  /* Charts plus petits */
  #tab-patrimoine canvas{
    max-width: 100% !important;
    height: auto !important;
  }

  /* ── 16) WIKI / IDÉES éditeurs ─── */
  textarea{
    min-height: 120px !important;
  }

  /* ── 17) Notifs popup ────────── */
  .notifs-popup{
    width: calc(100vw - 20px) !important;
    max-width: 380px !important;
    right: 10px !important;
    left: auto !important;
  }

  /* ── 18) Sidebar quand ouverte : meilleur z-index, scroll ─ */
  .sidebar.mobile-open{
    box-shadow: 6px 0 30px rgba(0,0,0,.6);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 19) Safe area iPhone (encoche) ─ */
  body{
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* 🆕 V3.147 : Insta-style → status bar fondue dans le bg Alfred.
       Le body remplit jusqu'en haut, le contenu commence après la safe-area. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg) !important;
    min-height: 100vh;
    min-height: 100dvh; /* dvh = dynamic viewport height (mieux sur mobile) */
  }
  .mobile-menu-btn{
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  }

  /* ── 20) Anti-débordement global ─── */
  body, html{
    overflow-x: hidden;
  }
  *{ max-width: 100vw }
  .modal *{ max-width: none } /* exception : intérieur modals normal */
}

/* Très petit (< 380px) : derniers ajustements */
@media (max-width: 380px){
  .content{ padding: 60px 8px 14px !important }
  .btn{ padding: 7px 10px !important; font-size: 12px !important }
  .page-title{ font-size: 17px !important }
  .gaming-kpi-val{ font-size: 18px !important }
  .stat-val{ font-size: 15px !important }
}