/* ══════════════════════════════════════════════════════════════════
   K1-MathInfo — Design System Premium v2.0
   Université de Ngaoundéré • DMI
   ══════════════════════════════════════════════════════════════════ */

@import url('vendor/fonts/local-fonts.css');

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-main:       #070b16;
  --bg-sidebar:    #090e1a;
  --bg-card:       #0c1322;
  --bg-card-hover: #111a2e;
  --bg-input:      #080d1a;
  --bg-glass:      rgba(255, 255, 255, 0.03);

  /* Borders */
  --border:        rgba(255, 255, 255, 0.07);
  --border-bright: rgba(255, 255, 255, 0.13);
  --border-blue:   rgba(59, 130, 246, 0.35);
  --border-green:  rgba(16, 185, 129, 0.35);

  /* Brand Colors */
  --blue:          #3b82f6;
  --blue-light:    #60a5fa;
  --blue-glow:     rgba(59, 130, 246, 0.35);
  --indigo:        #0ea5e9;
  --green:         #10b981;
  --green-glow:    rgba(16, 185, 129, 0.35);
  --amber:         #f59e0b;
  --purple:        #0284c7;
  --purple-dark:   #0369a1;
  --red:           #ef4444;
  --cyan:          #06b6d4;

  /* Text */
  --text:          #f0f4ff;
  --text-muted:    #8899b8;
  --text-dim:      #4f6080;
  --text-code:     #7dd3fc;

  /* Fonts */
  --ff-head:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-body:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono:  ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, monospace;

  /* Radii & Shadows */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-full: 999px;

  --shadow-sm:  0 2px 10px rgba(0,0,0,0.3);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 24px var(--blue-glow);
}

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--ff-body);
  background: #080c14;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  letter-spacing: -0.012em;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  /* Pas de margin/padding — l'app touche les bords de l'écran */
}

/* ── SCROLLBAR PREMIUM ULTRA-VISIBLE & ILLUMINÉE AU SURVOL (DMI) ──── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.5) rgba(15, 23, 42, 0.7);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.75);
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.45), rgba(59, 130, 246, 0.55));
  border-radius: 99px;
  border: 2px solid rgba(15, 23, 42, 0.85);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
  transition: all 0.25s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #38bdf8, #60a5fa);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.9), 0 0 8px #38bdf8;
  border-color: rgba(15, 23, 42, 0.4);
}

::-webkit-scrollbar-thumb:active {
  background: #38bdf8;
  box-shadow: 0 0 24px rgba(56, 189, 248, 1);
}

/* ── AMBIENT BACKGROUND CANVAS ──────────────────────────────────── */
/* Canvas d'animation fluide inspiré Spline — plein écran, derrière tout */
.ambient-bg-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 0.16;
  filter: blur(2.5px);
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════════ */
.sidebar {
  width: 290px;
  min-width: 290px;
  max-width: 290px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 20;
  position: relative;
  box-shadow: 2px 0 30px rgba(0,0,0,0.4);
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
}

.logo-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080c16;
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.logo-glow-halo {
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, rgba(56, 189, 248, 0.15) 50%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  position: relative;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand:hover .logo-icon-wrapper {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(56, 189, 248, 0.45), 0 0 15px rgba(56, 189, 248, 0.3);
  border-color: rgba(56, 189, 248, 0.8);
}

.brand:hover .brand-logo-img {
  transform: scale(1.06);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.brand-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-name-k1 {
  font-family: var(--ff-head);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #38bdf8 0%, #38bdf8 50%, #7dd3fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-name-sub {
  font-family: var(--ff-head);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #f8fafc;
}

.brand-badge-v {
  font-size: 9.5px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.brand-subtext {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

/* Nav */
.nav-menu { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.nav-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--ff-body); font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.nav-item i { font-size: 15px; width: 18px; flex-shrink: 0; transition: transform 0.22s ease, color 0.22s ease; }

.nav-item::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3.5px; height: 0;
  background: linear-gradient(180deg, var(--blue-light), var(--indigo));
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px var(--blue-glow);
  transition: height 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  letter-spacing: -0.012em;
  border-color: rgba(255,255,255,0.06);
  transform: translateX(3px);
}
.nav-item:hover i { transform: scale(1.15); color: var(--blue-light); }
.nav-item:hover::before { height: 60%; }

.nav-item:active {
  transform: translateX(2px) scale(0.98);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(59,130,246,0.22) 0%, rgba(2,132,199,0.10) 100%);
  color: #fff;
  border-color: rgba(59,130,246,0.3);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,0.25), 0 4px 16px rgba(59,130,246,0.15);
}
.nav-item.active::before { height: 75%; }
.nav-item.active i { color: var(--blue-light); transform: scale(1.1); }

/* Sovereign Badge */
.sovereign-badge {
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(6,182,212,0.06));
  border: 1px solid rgba(16,185,129,0.25);
  padding: 10px 13px;
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 10px;
}
.badge-icon { color: var(--green); font-size: 17px; }
.badge-info strong { display: block; font-size: 11.5px; color: #a7f3d0; font-weight: 700; }
.badge-info span { font-size: 10px; color: var(--text-dim); }

/* Status */
.system-status {
  padding: 10px 13px;
  background: rgba(0,0,0,0.25);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: 11px;
}
.status-indicator {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.2), 0 0 10px var(--green-glow);
  animation: statusPulse 2.5s infinite;
}
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.2), 0 0 10px var(--green-glow); }
  50%       { box-shadow: 0 0 0 6px rgba(16,185,129,0.05), 0 0 16px var(--green-glow); }
}
.status-title { display: block; font-size: 11.5px; font-weight: 700; color: #c8d8f0; }
.status-sub   { font-size: 10px; color: var(--text-dim); }

/* ══════════════════════════════════════════════════════════════════
   MAIN CONTENT — Fond sombre solide et net
   ══════════════════════════════════════════════════════════════════ */
.main-content {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-width: 0;
  position: relative;
  z-index: 1;
  background: #080d1a;
}

/* Dégradé subtil sans masquer le canvas d'arrière-plan */
.main-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

/* Top Bar */
.top-bar {
  position: relative;
  z-index: 10;
  padding: 10px 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #080c16;
  flex-shrink: 0;
  min-height: auto;
}

.brand-institutional-header {
  flex: 1 1 auto;
  min-width: 280px;
  display: flex;
  align-items: center;
}

.page-title {
  min-width: 0;
  flex: 1;
}

.page-title h1 {
  font-family: var(--ff-head);
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: #f8fafc; white-space: normal; line-height: 1.25; margin: 2px 0; word-break: break-word; } /*
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25; */ .dummy-closed {
}

.page-title p {
  font-size: 11.5px; color: var(--text-muted); margin-top: 2px; font-weight: 400; white-space: normal; line-height: 1.35; } .old-p-junk {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stats Pills Responsive */
@media (max-width: 1440px) {
  #stat-nodes-pill, #stat-rels-pill { display: none !important; }
}

/* Stats Pills */
.stats-pills {
  flex-shrink: 1 !important;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pill {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 11px 4px 9px;
  border-radius: var(--r-full);
  display: inline-flex; align-items: center; gap: 7px;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}
.pill:hover { border-color: var(--border-blue); background: rgba(30, 41, 59, 0.9); }
.pill-val { font-family: var(--ff-head); font-weight: 800; font-size: 13.5px; color: var(--blue-light); }
.pill-val.highlight { color: #38bdf8; }
.pill-lbl { font-size: 10px; color: var(--text-dim); font-weight: 600; white-space: nowrap; }

/* ── TAB PANES ──────────────────────────────────────────────────────── */
.tab-pane { 
  display: none; 
  flex: 1 1 0% !important; 
  min-height: 0 !important; 
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important; 
  padding: 18px 24px 90px 24px !important; 
}
.tab-pane.active { 
  display: flex !important; 
  flex-direction: column !important; 
}

/* Scroll maîtrisé et isolation des onglets interactifs */
#chat-tab.tab-pane.active {
  overflow: hidden !important;
  padding: 14px 24px 14px 24px !important;
  height: 100% !important;
  min-height: 0 !important;
}

#chefdmi-tab.tab-pane.active {
  padding: 0 !important;
}

#graph-tab.tab-pane.active {
  overflow: hidden !important;
  padding: 12px 20px !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Mode Plein Écran Graphe Neo4j (Démonstration devant le Jury) */
#graph-tab.graph-fullscreen-mode {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #080d1a !important;
  padding: 14px 20px !important;
}
#graph-tab.graph-fullscreen-mode .graph-stage {
  height: calc(100vh - 80px) !important;
}

/* Fil d'Ariane Dynamique (Breadcrumb) */
.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 4px;
  font-family: var(--ff-body);
}
.breadcrumb-trail .crumb-home {
  cursor: pointer;
  color: #38bdf8;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.breadcrumb-trail .crumb-home:hover {
  color: #7dd3fc;
  text-decoration: underline;
}
.breadcrumb-trail .crumb-active {
  color: #f8fafc;
  font-weight: 700;
}

/* Spécifique au tab Chat pour garantir un scroll propre et l'ancrage de la barre de saisie */
#chat-tab.tab-pane {
  overflow: hidden;
  padding: 14px 24px 14px 24px;
  height: 100%;
  min-height: 0;
}

/* ══════════════════════════════════════════════════════════════════
   TAB 1 — CHAT
   ══════════════════════════════════════════════════════════════════ */
.chat-container {
  flex: 1; display: flex; flex-direction: column;
  width: 100%; height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 12px 24px 8px;
  display: flex; flex-direction: column; gap: 16px;
  scroll-behavior: smooth;
}
.chat-messages > .message {
  flex-shrink: 0 !important;
}

.message { display: flex; gap: 14px; max-width: 90%; flex-shrink: 0 !important; min-height: min-content; }
.message.assistant { align-self: flex-start; }
.message.user { align-self: flex-end; flex-direction: row-reverse; }

.avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.message.assistant .avatar {
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  color: #fff;
  box-shadow: 0 4px 12px var(--blue-glow);
}
.message.user .avatar { background: #1e2d45; color: #94a3b8; }

.msg-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 14px 18px;
  border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg);
  font-size: 13.5px; line-height: 1.65;
  backdrop-filter: blur(8px);
  position: relative;
}
.message.assistant .msg-content { border-top-left-radius: 2px; }
.message.user .msg-content {
  background: linear-gradient(135deg, rgba(30,58,138,0.9), rgba(30,64,175,0.8));
  border-color: rgba(59,130,246,0.3);
  border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg);
}

.audit-card {
  margin-top: 12px; padding: 10px 13px;
  background: rgba(0,0,0,0.35);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--blue);
  font-size: 11.5px; color: #cbd5e1; line-height: 1.5;
  font-family: var(--ff-mono);
}
.audit-card strong { color: #93c5fd; }

.quick-questions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.quick-btn {
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-size: 11.5px; cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--ff-body);
  display: inline-flex; align-items: center; gap: 5px;
  backdrop-filter: blur(6px);
}
.quick-btn:hover {
  background: rgba(59, 130, 246, 0.22);
  color: #fff;
  border-color: rgba(56, 189, 248, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2);
}
.quick-btn.strategic {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.75) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #f0f9ff;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.quick-btn.strategic:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(2, 132, 199, 0.25));
  border-color: rgba(56, 189, 248, 0.8);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.35);
  transform: translateY(-2px);
}
.starter-container {
  width: 100%;
  margin-top: 14px;
}
.starter-section-title {
  width: 100%;
  font-size: 11.5px;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.starter-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  .starter-cards-grid {
    grid-template-columns: 1fr;
  }
}
.starter-card {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.starter-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.starter-card:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(56, 189, 248, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 16px rgba(56, 189, 248, 0.18);
}
.starter-card:hover::before {
  opacity: 1;
}
.starter-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.starter-card-icon {
  font-size: 15px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.starter-card-title {
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
}
.starter-card-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.45;
}
.quick-questions-header {
  width: 100%;
  font-size: 11.5px;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.quick-btn-toggle {
  background: rgba(2, 132, 199, 0.15);
  border: 1px solid rgba(2, 132, 199, 0.35);
  color: #7dd3fc;
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
  font-family: var(--ff-body);
  display: inline-flex; align-items: center; gap: 5px;
  transition: all 0.2s ease;
}
.quick-btn-toggle:hover {
  background: rgba(2, 132, 199, 0.28);
  color: #fff;
  border-color: rgba(2, 132, 199, 0.6);
}

/* SOTA Floating Island Input Capsule */
.chat-input-bar {
  display: flex; gap: 8px;
  background: rgba(13, 19, 36, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.28);
  padding: 6px 10px 6px 14px;
  border-radius: var(--r-full);
  align-items: center;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 16px rgba(56, 189, 248, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 10px;
  flex-shrink: 0;
  z-index: 10;
}
.chat-input-bar:focus-within {
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(56, 189, 248, 0.22);
  background: rgba(15, 23, 42, 0.98);
}
.chat-input-bar input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  letter-spacing: -0.012em; font-size: 13.5px; font-family: var(--ff-body);
}
.chat-input-bar input::placeholder { color: var(--text-dim); }

/* ── CRAFT AUDIO DICTATION BUTTON (Emil Kowalski Physics & Ripple Engine) ── */
.voice-btn-craft {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(15, 23, 42, 0.85);
  color: #94a3b8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 14px;
  position: relative;
  will-change: transform, box-shadow;
  user-select: none;
  -webkit-user-select: none;
}
.voice-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 14px;
  position: relative;
}
.voice-btn:hover {
  background: rgba(239,68,68,0.22);
  color: #f87171;
  border-color: rgba(239,68,68,0.35);
  transform: scale(1.08);
  box-shadow: 0 0 14px rgba(239,68,68,0.25);
}
.voice-btn:active { transform: scale(0.94); }
.voice-btn.recording {
  background: #ef4444; color: #fff;
  border-color: #f87171;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  border-color: #f87171 !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
  animation: k1-voice-core-pulse 1.4s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
}

.voice-btn.recording::before,
.voice-btn.recording::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  border: 1.5px solid rgba(239, 68, 68, 0.85);
  will-change: transform, opacity;
}

.voice-btn.recording::before {
  animation: k1-voice-ripple 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.voice-btn.recording::after {
  animation: k1-voice-ripple 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s infinite;
}

.voice-btn.recording i {
  animation: k1-mic-throb 1.2s ease-in-out infinite;
}

@keyframes k1-voice-ripple {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(2.1); opacity: 0; }
}

@keyframes k1-voice-core-pulse {
  0%, 100% { transform: scale(1.05) translateZ(0); box-shadow: 0 0 16px rgba(239, 68, 68, 0.7); }
  50% { transform: scale(0.97) translateZ(0); box-shadow: 0 0 26px rgba(239, 68, 68, 0.95); }
}

@keyframes k1-mic-throb {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

.legacy-voicePulse {
}
@keyframes voicePulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
  70%  { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

#send-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  box-shadow: 0 4px 14px var(--blue-glow);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
#send-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
#send-btn:hover {
  transform: scale(1.10) translateY(-1px);
  box-shadow: 0 6px 22px rgba(59,130,246,0.55);
}
#send-btn:hover::after { opacity: 1; }
#send-btn:hover i { transform: translateX(1.5px); }
#send-btn:active { transform: scale(0.94); }
#send-btn i { transition: transform 0.2s ease; }

#stop-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  animation: stopPulse 1.6s infinite ease-in-out;
}
#stop-btn:hover {
  transform: scale(1.10) translateY(-1px);
  background: linear-gradient(135deg, #f87171, #ef4444);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.65);
}
#stop-btn:active { transform: scale(0.94); }
#stop-btn.hidden { display: none !important; }

@keyframes stopPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5), 0 4px 14px rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0), 0 4px 18px rgba(239, 68, 68, 0.7);
  }
}

/* Typing dots */
.typing-dots { display: flex; gap: 4px; align-items: center; padding: 6px 2px; }
.typing-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-dim); animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-6px); }
}

/* ══════════════════════════════════════════════════════════════════
   TAB 2 — RECHERCHE
   ══════════════════════════════════════════════════════════════════ */
.search-panel { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 120px); min-height: 0; overflow: hidden; }
.search-inputs {
  display: flex; flex-direction: column; gap: 8px;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 8px 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.search-main {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  padding: 6px 12px;
  border-radius: var(--r-lg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-main:focus-within {
  border-color: var(--border-blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.search-main i { color: var(--text-dim); font-size: 15px; }
.search-main input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  letter-spacing: -0.012em; font-size: 13.5px; font-family: var(--ff-body);
}
.search-main input::placeholder { color: var(--text-dim); }

.search-collapsible-filters {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  animation: slideDown 0.25s ease;
}

.filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-row input, .filter-row select {
  flex: 1; min-width: 140px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  letter-spacing: -0.012em; outline: none;
  font-size: 12.5px; font-family: var(--ff-body);
  transition: border-color 0.2s;
}
.filter-row input:focus, .filter-row select:focus { border-color: var(--border-blue); }
.filter-row select option { background: #0e1628; }

/* Results */
.search-results-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.results-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  padding: 8px 16px;
  flex-shrink: 0;
}
.results-header h2 { font-family: var(--ff-head); font-size: 14px; color: var(--text-muted); margin-block: 1em; }
.export-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.btn-export.compact {
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  gap: 5px;
}

.btn-export {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  letter-spacing: -0.012em;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--ff-body);
}
.btn-export {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-bright);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  letter-spacing: -0.012em;
  padding: 8px 15px;
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; align-items: center; gap: 7px;
  font-family: var(--ff-body);
  position: relative;
  overflow: hidden;
}
.btn-export::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}
.btn-export:hover {
  background: rgba(59,130,246,0.16);
  border-color: var(--border-blue);
  color: var(--blue-light);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 16px rgba(59,130,246,0.22);
}
.btn-export:hover::after { transform: translateX(100%); }
.btn-export:hover i { transform: scale(1.15); }
.btn-export:active { transform: translateY(0) scale(0.97); }
.btn-export i { transition: transform 0.2s ease; }

.btn-card {
  flex: 1; padding: 7px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted); font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--ff-body);
}
.btn-card:hover {
  background: rgba(59,130,246,0.18);
  border-color: var(--border-blue);
  color: #fff;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.2);
}
.btn-card:hover i { transform: scale(1.2); color: var(--blue-light); }
.btn-card.green:hover {
  background: rgba(16,185,129,0.18);
  border-color: var(--border-green);
  color: #a7f3d0;
  box-shadow: 0 4px 12px rgba(16,185,129,0.2);
}
.btn-card.green:hover i { color: var(--green); }
.btn-card:active { transform: translateY(0) scale(0.97); }
.btn-card i { transition: transform 0.2s ease, color 0.2s ease; }

/* Global Buttons — Hiérarchie Sémantique de Pertinence K1 */

/* Boutons de Pertinence Maximale (Action Stratégique / Souveraine) */
.btn-pertinent, .btn-primary {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-pertinent:hover, .btn-primary:hover {
  transform: translateY(-2px) scale(1.018) !important;
  box-shadow: 0 8px 26px var(--blue-glow), 0 0 18px rgba(56, 189, 248, 0.5) !important;
  border-color: rgba(56, 189, 248, 0.7) !important;
  filter: brightness(1.06) !important;
}

/* Boutons de Pertinence Neutre / Secondaire (Navigation / Filtres) */
.btn-neutral, .btn-secondary {
  transition: all 0.18s ease !important;
}
.btn-neutral:hover, .btn-secondary:hover {
  transform: translateY(-1px) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  filter: none !important;
}

/* Boutons Non-Pertinents / Réinitialisation / Action Destructive Passive */
.btn-non-pertinent, .btn-reset, .btn-muted {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #64748b !important;
  transition: all 0.15s ease !important;
}
.btn-non-pertinent:hover, .btn-reset:hover, .btn-muted:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #94a3b8 !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, var(--indigo) 100%);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  padding: 10px 22px; border-radius: var(--r-sm);
  font-family: var(--ff-body); font-size: 13.5px; font-weight: 700;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,0.2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--blue-glow), 0 0 12px rgba(2,132,199,0.4);
}
.btn-primary:hover::after { transform: translateX(100%); }
.btn-primary:hover i { transform: translateX(2px); }
.btn-primary:active { transform: translateY(0) scale(0.97); }
.btn-primary i { transition: transform 0.2s ease; }

.btn-secondary {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-bright);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  letter-spacing: -0.012em; padding: 10px 18px;
  border-radius: var(--r-sm);
  font-family: var(--ff-body); font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--border-blue);
  transform: translateY(-1.5px);
  color: var(--blue-light);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.btn-secondary:hover i { transform: scale(1.15); }
.btn-secondary:active { transform: translateY(0) scale(0.97); }
.btn-secondary i { transition: transform 0.2s ease; }

/* ══════════════════════════════════════════════════════════════════
   TAB 3 — GRAPHE
   ══════════════════════════════════════════════════════════════════ */
#graph-tab.tab-pane.active { overflow: hidden; padding: 14px 24px 10px; }

.graph-toolbar {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.graph-toolbar-top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: 8px 14px;
}

.graph-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-muted);
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.dot.green  { background: #10b981; }
.dot.blue   { background: #3b82f6; }
.dot.orange { background: #f59e0b; }
.dot.purple { background: #38bdf8; }

/* Mode Bar */
.graph-mode-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  background: #080d18;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  padding: 6px 10px;
}

.graph-mode-btn {
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--ff-body);
  background: #0f172a;
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.graph-mode-btn:hover {
  background: #1e293b;
  color: #f8fafc;
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}
.graph-mode-btn:active {
  transform: translateY(0) scale(0.97);
}
.graph-mode-btn.active {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.25) !important;
  transform: translateY(-1px);
}

/* Dropdown Plus de vues (Ergonomie Toolbar Graphe) */
.graph-more-views-dropdown { position: relative; display: inline-flex; }
.graph-more-views-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 100; min-width: 210px; background: #0f172a; border: 1px solid rgba(56, 189, 248, 0.35); border-radius: 10px; padding: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65); display: flex; flex-direction: column; gap: 3px; }
.graph-dropdown-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 6px; background: transparent; border: none; color: #cbd5e1; font-size: 11.5px; font-weight: 500; text-align: left; cursor: pointer; transition: all 0.18s ease; font-family: var(--ff-body); }
.graph-dropdown-item:hover { background: rgba(56, 189, 248, 0.15); color: #38bdf8; transform: translateX(2px); }
.graph-dropdown-item.active { background: rgba(56, 189, 248, 0.22); color: #7dd3fc; font-weight: 700; }

.graph-toolbar-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: 8px 12px;
}

.graph-actions { display: flex; gap: 6px; align-items: center; }
.graph-actions input {
  background: var(--bg-input); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: var(--r-full);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  letter-spacing: -0.012em; font-size: 11.5px; outline: none;
  width: 190px; transition: border-color 0.2s;
  font-family: var(--ff-body);
}
.graph-actions input:focus { border-color: var(--border-blue); }

#graph-meta-stats {
  display: flex; gap: 18px;
  font-size: 11.5px; color: var(--text-dim);
}
#graph-meta-stats span { display: flex; align-items: center; gap: 6px; }
#graph-meta-stats strong { color: var(--text-muted); font-weight: 700; }

/* Graph Stage */
.graph-stage {
  position: relative; flex: 1;
  display: flex; min-height: 0;
}

#vis-network-container {
  flex: 1; width: 100%; height: 100%;
  background: #060a14 !important;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow: inset 0 2px 24px rgba(0, 0, 0, 0.7);
}

/* ══════════════════════════════════════════════════════════════════
   FLOATING COPILOT — Redimensionné et Parfaitement Intégré
   ══════════════════════════════════════════════════════════════════ */
.graph-copilot-floating {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 390px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  background: rgba(9, 15, 30, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(59, 130, 246, 0.45);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 25px rgba(59, 130, 246, 0.25);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 50;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.graph-copilot-floating:hover {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(56, 189, 248, 0.3);
}

.graph-copilot-floating.collapsed {
  width: auto;
  min-width: 210px;
  max-width: 280px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(8, 14, 28, 0.94);
  border: 1.5px solid rgba(56, 189, 248, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(56, 189, 248, 0.3);
  bottom: 16px;
  right: 16px;
  cursor: pointer;
}

.graph-copilot-floating.collapsed .copilot-content-collapsible {
  display: flex;
}

.graph-copilot-floating.collapsed .copilot-title-text .copilot-subtext {
  display: none;
}

.copilot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.copilot-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.copilot-icon-halo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  font-size: 13px;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
  flex-shrink: 0;
}

.copilot-title-text {
  display: flex;
  flex-direction: column;
}

.copilot-title-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.2px;
}

.copilot-subtext {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
}

.copilot-badge {
  font-size: 9.5px;
  padding: 2px 7px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-radius: var(--r-full);
  border: 1px solid rgba(16, 185, 129, 0.28);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  margin-right: 4px;
  animation: statusPulse 1.5s infinite;
}

.copilot-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.copilot-toggle-btn:hover {
  background: rgba(59, 130, 246, 0.35);
  color: #ffffff;
  border-color: #38bdf8;
  transform: scale(1.08);
}

.copilot-content-collapsible {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  min-height: 0;
  padding-right: 2px;
}

/* Custom scrollbar pour le contenu du copilot */
.copilot-content-collapsible::-webkit-scrollbar {
  width: 4px;
}
.copilot-content-collapsible::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.3);
  border-radius: 4px;
}

/* Barre de recherche d'instruction prioritaire */
.copilot-input-bar {
  display: flex;
  gap: 8px;
  background: rgba(15, 23, 42, 0.9);
  border: 1.5px solid rgba(59, 130, 246, 0.45);
  padding: 6px 8px 6px 12px;
  border-radius: var(--r-full);
  align-items: center;
  transition: all 0.22s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.copilot-input-bar:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.copilot-input-icon {
  color: #60a5fa;
  font-size: 12px;
  flex-shrink: 0;
}

.copilot-input-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #f8fafc;
  font-size: 12px;
  font-family: var(--ff-body);
  min-width: 0;
}

.copilot-input-bar input::placeholder {
  color: #64748b;
  font-size: 11.5px;
}

.copilot-input-bar button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #3b82f6, #0ea5e9);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
  flex-shrink: 0;
}

.copilot-input-bar button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.65);
}

/* Suggestions rapides / Pills */
.copilot-pills-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.copilot-pills-label {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.copilot-pills-label i {
  color: #fbbf24;
}

.copilot-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 80px;
  overflow-y: auto;
  padding-right: 2px;
}

.copilot-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: var(--ff-body);
  white-space: nowrap;
}

.copilot-pill:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(56, 189, 248, 0.5);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Zone Réponse / Statut */
.copilot-body {
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 11.5px;
  line-height: 1.45;
  max-height: 110px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #c8d8f0;
  flex-shrink: 0;
}

.copilot-hint {
  color: #94a3b8;
  font-style: italic;
  font-size: 11px;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   TAB 4 — INGESTION
   ══════════════════════════════════════════════════════════════════ */
.ingest-wrapper {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px; height: 100%;
}

.upload-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
}

.upload-dropzone {
  border: 2px dashed rgba(59,130,246,0.3);
  background: #080d18;
  border-radius: var(--r-lg); margin: 18px;
  padding: 40px 20px; text-align: center;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  height: calc(100% - 36px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.upload-dropzone:hover {
  border-color: var(--blue-light);
  background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(2,132,199,0.08));
  box-shadow: 0 8px 30px rgba(59,130,246,0.15), inset 0 0 20px rgba(59,130,246,0.05);
  transform: translateY(-2px);
}
.upload-dropzone:hover .drop-icon {
  transform: scale(1.12) translateY(-4px);
  color: var(--blue-light);
}

.drop-icon { font-size: 44px; color: var(--blue); opacity: 0.85; transition: transform 0.25s ease, color 0.25s ease; }
.upload-dropzone h3 { font-family: var(--ff-head); font-size: 16px; font-weight: 700; }
.upload-dropzone p { font-size: 12px; color: var(--text-muted); max-width: 280px; }
.ingest-buttons { display: flex; flex-direction: column; gap: 10px; width: 85%; }

.ingest-log-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.ingest-log-card h3 { font-family: var(--ff-head); font-size: 15px; font-weight: 700; }

.log-stream {
  flex: 1; background: #020509; border-radius: var(--r-md);
  padding: 14px; font-family: var(--ff-mono); font-size: 12px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid rgba(255,255,255,0.05);
}
.log-entry { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.log-entry::before { content: '▸'; flex-shrink: 0; margin-top: 1px; }
.log-entry.info    { color: #38bdf8; }
.log-entry.info::before { color: #38bdf8; }
.log-entry.success { color: #4ade80; }
.log-entry.success::before { content: '✓'; color: #4ade80; }
.log-entry.warn    { color: #fbbf24; }
.log-entry.error   { color: #f87171; }
.log-entry.error::before { content: '✗'; color: #f87171; }

/* Progress bar dans ingestion */
.ingest-progress {
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-full); height: 4px; overflow: hidden;
}
.ingest-progress-fill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width 0.4s ease;
}

/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS GLOBALES
   ══════════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.thesis-card, .message { animation: fadeInUp 0.25s ease both; }

/* ── THESIS CARD (résultats de recherche) ─────────────────────── */
.thesis-card {
  background: #0b1325;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
  cursor: default;
}
.thesis-card:hover {
  background: #0e1830;
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(56, 189, 248, 0.2);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.thesis-title {
  font-family: var(--ff-head); font-size: 14.5px; font-weight: 700;
  color: #f8fafc; line-height: 1.45; letter-spacing: -0.1px;
}
.thesis-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
.thesis-meta span { display: flex; align-items: flex-start; gap: 5px; }
.thesis-meta i { color: var(--blue-light); flex-shrink: 0; margin-top: 1px; }
.card-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px;
}

/* Badges type (Master, PhD, Projet) */
.badge {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px;
  border-radius: var(--r-full); display: inline-flex; align-items: center; gap: 4px;
}
.badge.master { background: rgba(59,130,246,0.16); color: #93c5fd; border: 1px solid rgba(59,130,246,0.35); }
.badge.phd    { background: rgba(56,189,248,0.16); color: #7dd3fc; border: 1px solid rgba(56,189,248,0.35); }
.badge.project{ background: rgba(16,185,129,0.16); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.35); }

/* Conteneur scrollable des résultats — couche sombre solide */
#search-results-container, .results-grid {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  background: #070c18;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  padding: 14px;
  min-height: 0;
  box-shadow: inset 0 2px 16px rgba(0, 0, 0, 0.5);
}

.search-results-area {
  flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0;
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.loading-shimmer {
  background: linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.04) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ══════════════════════════════════════════════════════════════════
   SCORE BADGE (Similarité dans les résultats)
   ══════════════════════════════════════════════════════════════════ */
.score-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; font-family: var(--ff-head);
  padding: 2px 8px; border-radius: var(--r-full);
}
.score-badge.high   { background: rgba(16,185,129,0.15); color: #34d399; }
.score-badge.medium { background: rgba(59,130,246,0.15); color: #60a5fa; }
.score-badge.low    { background: rgba(255,255,255,0.06); color: var(--text-muted); }

/* Tag algo/concept */
.algo-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(56,189,248,0.14); color: #7dd3fc;
  border: 1px solid rgba(56,189,248,0.3);
  font-size: 11px; font-weight: 600; padding: 4px 10px;
  border-radius: var(--r-full); white-space: normal; line-height: 1.35;
}
.task-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(239,68,68,0.12); color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.3);
  font-size: 11px; font-weight: 600; padding: 4px 10px;
  border-radius: var(--r-full); white-space: normal; line-height: 1.35;
}

/* ── CONCEPT & TOPIC CHIPS (Recherche & Advisor Matcher) ── */
.search-concept-chips, .advisor-topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.concept-chip, .topic-chip {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-body);
  user-select: none;
}

.concept-chip:hover, .topic-chip:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.45);
  color: #93c5fd;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.concept-chip:active, .topic-chip:active {
  transform: translateY(0) scale(0.97);
}

.concept-chip.active, .topic-chip.active {
  background: rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.35);
}

.concept-chip.reset-chip {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

.concept-chip.reset-chip:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fef2f2;
}

.badge.lab-badge {
  background: rgba(6, 182, 212, 0.14);
  color: #67e8f9;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

/* Empty state */
.empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--text-dim); display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
.empty-state i { font-size: 40px; opacity: 0.3; }
.empty-state p { font-size: 14px; max-width: 300px; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════
   MODAL : FICHE CHERCHEUR & BIBLIOGRAPHIE
   ══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(4, 9, 20, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: 20px; animation: fadeIn 0.2s ease;
}
.modal-overlay.active { display: flex; }

.modal-card {
  background: #090f1d;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--r-lg);
  width: 100%; max-width: 680px; max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(59, 130, 246, 0.15);
  animation: fadeInUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.modal-header {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: flex-start;
  background: linear-gradient(180deg, rgba(59,130,246,0.08) 0%, transparent 100%);
}
.modal-title-wrap h2 {
  font-family: var(--ff-head); font-size: 20px; font-weight: 800;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  letter-spacing: -0.012em; margin-top: 6px; letter-spacing: -0.3px;
}
.modal-rank-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-full);
  background: rgba(16, 185, 129, 0.18); color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.modal-lab {
  font-size: 12.5px; color: #38bdf8; margin-top: 4px;
  display: flex; align-items: center; gap: 6px; font-weight: 600;
}
.modal-close-btn {
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--text-muted); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 14px;
  transition: all 0.2s;
}
.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.2); color: #ef4444; border-color: #ef4444;
}

.modal-body {
  padding: 20px 26px 26px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 20px;
}
.modal-section h3,
.modal-section h4 {
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.modal-section h3 { margin-top: 1.33em; }  /* marge haute par défaut de l'ancien h4 */
.modal-section h4 i, .modal-section h3 i { color: var(--blue); }

.modal-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-tag {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  padding: 4px 12px; border-radius: var(--r-full);
  font-size: 12px; color: var(--text); font-weight: 500;
}
.modal-tag.role {
  background: rgba(245, 158, 11, 0.12); color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

.modal-list { display: flex; flex-direction: column; gap: 8px; }
.modal-item {
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  padding: 10px 14px; border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 4px;
}
.modal-item-title { font-size: 13px; font-weight: 600; color: var(--text); }
.modal-item-meta { font-size: 11.5px; color: var(--text-muted); display: flex; gap: 12px; }
.modal-item-meta span { display: flex; align-items: center; gap: 4px; }
.modal-item-meta .journal-badge {
  background: rgba(59, 130, 246, 0.15); color: #60a5fa;
  padding: 1px 7px; border-radius: var(--r-full); font-weight: 700; font-size: 10.5px;
}

/* ══════════════════════════════════════════════════════════════════
   VOLET AUDIO TTS & SYNCHRONISATION VOCALE (AGENT K1)
   ══════════════════════════════════════════════════════════════════ */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.2); }
  100% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.55); }
}

.tts-active-sentence {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.25), rgba(2, 132, 199, 0.25)) !important;
  color: #bfdbfe !important;
  border-radius: 4px;
  padding: 2px 5px;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
  transition: all 0.25s ease-in-out;
  display: inline;
}


/* ══════════════════════════════════════════════════════════════════
   K1-MathInfo v2.5 — 4 Piliers State-of-the-Art
   ══════════════════════════════════════════════════════════════════ */

/* ── PILIER 1 : DEEP RESEARCH PANEL ─────────────────────────────── */
.deep-research-panel {
    background: rgba(12, 20, 38, 0.95);
    border: 1px solid rgba(2, 132, 199, 0.3);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    animation: slideDown 0.3s ease;
    backdrop-filter: blur(12px);
}

.deep-research-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(2, 132, 199, 0.15);
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── PILIER 2 : MODAL MERMAID ────────────────────────────────────── */
.mermaid-render-area {
    min-height: 200px;
    background: rgba(8, 13, 25, 0.8);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.mermaid-render-area svg {
    max-width: 100%;
    height: auto;
}

/* ── PILIER 3 : ADVISOR MATCHER ──────────────────────────────────── */
/* ── PILIER 3 : ADVISOR MATCHER (SPLIT TWO-COLUMN LAYOUT) ────────── */
.advisor-layout-grid {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 16px;
    height: calc(100vh - 120px);
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 1080px) {
    .advisor-layout-grid {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
}

.advisor-left-col {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
    padding-right: 2px;
}

.advisor-right-col {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
    min-height: 0;
    padding-right: 4px;
}

.advisor-form-card.compact {
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.advisor-form-header.compact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.advisor-form-icon.sm {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0ea5e9, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

.advisor-form-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.advisor-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.advisor-field label {
    font-size: 11.5px;
    font-weight: 600;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.advisor-field label i { color: #0ea5e9; }

.advisor-field textarea,
.advisor-field input[type="text"],
.advisor-field select {
    background: rgba(8, 13, 25, 0.8);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: #e2e8f0;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
}

.advisor-field textarea:focus,
.advisor-field input[type="text"]:focus,
.advisor-field select:focus {
    border-color: rgba(2, 132, 199, 0.5);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.advisor-field-compact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn-advisor-match {
    background: linear-gradient(135deg, var(--indigo) 0%, var(--blue) 50%, var(--cyan) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 11px 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    position: relative;
    overflow: hidden;
}

.btn-advisor-match::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.btn-advisor-match:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.5), 0 0 16px rgba(6, 182, 212, 0.3);
}

.btn-advisor-match:hover::after {
    transform: translateX(100%);
}

.btn-advisor-match:hover i {
    transform: rotate(15deg) scale(1.15);
}

.btn-advisor-match:active {
    transform: translateY(0) scale(0.97);
}

.btn-advisor-match i {
    transition: transform 0.25s ease;
}

.btn-advisor-match:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Accordéon de suggestions de sujets types DMI */
.advisor-suggestions-accordion {
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 10px;
}

.advisor-suggestions-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    cursor: pointer;
    font-size: 11.5px;
    color: #cbd5e1;
    transition: background 0.2s, border-color 0.2s;
    user-select: none;
}

.advisor-suggestions-head:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.advisor-topic-chips {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    animation: fadeIn 0.2s ease;
}

/* État initial explicatif (Hero Placeholder) */
.advisor-empty-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 380px;
    padding: 40px 24px;
    background: #090e1a;
    border: 1px dashed rgba(56, 189, 248, 0.25);
    border-radius: 16px;
    animation: fadeIn 0.3s ease;
}

.hero-icon-ring {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(59,130,246,0.1);
    border: 2px solid rgba(59,130,246,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #60a5fa;
    margin-bottom: 16px;
    box-shadow: 0 0 25px rgba(59,130,246,0.2);
}

.advisor-empty-hero h3 {
    font-size: 18px;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 8px;
}

.advisor-empty-hero p {
    font-size: 13px;
    color: #94a3b8;
    max-width: 440px;
    margin: 0 0 20px;
    line-height: 1.5;
}

.advisor-features-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.advisor-features-pills span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #93c5fd;
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.25);
    padding: 5px 12px;
    border-radius: 20px;
}

/* Résultats advisor */
.advisor-results-area {
    animation: slideDown 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.advisor-results-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #0b1220;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    flex-wrap: wrap;
}

.advisor-results-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 4px;
}

.advisor-topic-badge {
    background: rgba(2, 132, 199, 0.12);
    border: 1px solid rgba(2, 132, 199, 0.3);
    color: #7dd3fc;
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 11.5px;
    font-style: italic;
    display: inline-block;
    max-width: 480px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.advisor-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
}

/* Loading spinner */
.advisor-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 0;
    height: 100%;
    color: #64748b;
    animation: fadeIn 0.25s ease;
}

.advisor-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(2, 132, 199, 0.15);
    border-top-color: #0ea5e9;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── PILIER 4 : VOICE WAVE ANIMATION ──────────────────────────────── */
@keyframes pulse {
    from { transform: scaleY(0.6); opacity: 0.6; }
    to   { transform: scaleY(1.3); opacity: 1; }
}

/* Modal backdrop générique */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-box {
    background: rgba(12, 20, 38, 0.97);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(59, 130, 246, 0.15);
    animation: modalSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

@keyframes modalSlide {
    from { opacity: 0; transform: scale(0.94) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Modal Close Button & Interactions */
.modal-close-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.35);
    transform: rotate(90deg) scale(1.1);
}
.modal-close-btn:active {
    transform: rotate(90deg) scale(0.92);
}

.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(4, 7, 15, 0.82);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
    animation: fadeIn 0.22s ease;
}

.modal-card {
    background: rgba(12, 20, 38, 0.98);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 20px;
    max-width: 780px; width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8), 0 0 30px rgba(59, 130, 246, 0.15);
    animation: modalSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════════════════════════════════
   OKF v0.2 — BADGES DE CONFIANCE AGENTIQUE (Trust Tiers)
   Spécification : google.com/blog/open-knowledge-format-v02
   ══════════════════════════════════════════════════════════════════ */

.okf-trust-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 10px;
    margin: 10px 0 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--ff-head);
    border: 1px solid transparent;
    transition: all 0.25s ease;
    animation: okfFadeIn 0.4s ease;
}

@keyframes okfFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 🛡️ Human-Reviewed — Vert Émeraude */
.okf-badge-human {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.35);
    color: #34d399;
}
.okf-badge-human:hover {
    background: rgba(16, 185, 129, 0.18);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

/* ⚙️ Machine-Confirmed — Bleu Cobalt */
.okf-badge-machine {
    background: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.35);
    color: #60a5fa;
}
.okf-badge-machine:hover {
    background: rgba(59, 130, 246, 0.18);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

/* ⚠️ Unverified — Ambre */
.okf-badge-unverified {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}
.okf-badge-unverified:hover {
    background: rgba(245, 158, 11, 0.18);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.okf-badge-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.okf-badge-label {
    flex: 1;
    letter-spacing: 0.1px;
}

.okf-badge-spec {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0.65;
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid currentColor;
    flex-shrink: 0;
}

/* ── OKF Attestation Receipt Card ────────────────────────────────── */
.okf-receipt-card {
    background: rgba(8, 13, 25, 0.85);
    border: 1px solid rgba(2, 132, 199, 0.25);
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 10px;
    font-size: 12px;
    font-family: var(--ff-mono);
    color: #e0f2fe;
    animation: okfFadeIn 0.35s ease;
}

.okf-receipt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12.5px;
    font-family: var(--ff-head);
    font-weight: 700;
    color: #7dd3fc;
}

.okf-receipt-verdict {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.okf-receipt-verdict.ok {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.okf-receipt-verdict.fail {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.okf-receipt-hash {
    color: #64748b;
    font-size: 10.5px;
    word-break: break-all;
    margin-top: 6px;
}

/* ── Bouton déclencheur interactif du Reçu SHA-256 ── */
.okf-receipt-trigger-btn {
    margin-left: auto;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    font-size: 11px;
    font-family: var(--ff-mono);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.okf-receipt-trigger-btn:hover {
    background: rgba(16, 185, 129, 0.28);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

/* ── Modal Reçu Cryptographique SHA-256 OKF v0.2 ── */
.okf-hash-box {
    background: #090d16;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}
.okf-hash-box code {
    font-family: var(--ff-mono);
    font-size: 12.5px;
    color: #34d399;
    word-break: break-all;
    letter-spacing: 0.5px;
}
.okf-cypher-box {
    background: #090d16;
    border: 1px solid rgba(2, 132, 199, 0.25);
    border-radius: 8px;
    padding: 14px;
    font-family: var(--ff-mono);
    font-size: 12px;
    color: #93c5fd;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
}
.okf-concept-tag-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(2, 132, 199, 0.25);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ══════════════════════════════════════════════════════════════════
   PILIER 5 : VISUALISEUR D'INGESTION TEMPS RÉEL (SSE Stepper v3.0)
   ══════════════════════════════════════════════════════════════════ */

.ingest-stepper-card {
    background: rgba(13, 20, 36, 0.95);
    border: 1px solid rgba(2, 132, 199, 0.35);
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 20px rgba(2, 132, 199, 0.15);
    animation: okfFadeIn 0.35s ease;
}

.stepper-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px 4px;
    position: relative;
    overflow-x: auto;
}

.stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-width: 110px;
    flex: 1;
}

.step-bubble {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.step-bubble.pending {
    background: rgba(30, 41, 59, 0.8);
    border: 2px solid rgba(100, 116, 139, 0.4);
    color: #64748b;
}

.step-bubble.running {
    background: rgba(245, 158, 11, 0.15);
    border: 2px solid #f59e0b;
    color: #fbbf24;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
    animation: pulseRing 1.5s infinite;
}

.step-bubble.done {
    background: rgba(16, 185, 129, 0.15);
    border: 2px solid #10b981;
    color: #34d399;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

.step-bubble.error {
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid #ef4444;
    color: #f87171;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
}

@keyframes pulseRing {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.stepper-connector {
    flex: 1;
    height: 3px;
    background: rgba(51, 65, 85, 0.6);
    margin: 0 4px 28px;
    border-radius: 2px;
    transition: all 0.4s ease;
}

.stepper-connector.active {
    background: linear-gradient(90deg, #10b981, #0ea5e9);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.step-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #f1f5f9;
}

.step-detail {
    font-size: 11px;
    color: #94a3b8;
    max-width: 140px;
    line-height: 1.3;
}

/* Panneau Entités Extraites */
.entities-panel {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(2, 132, 199, 0.25);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}

.entities-panel h4 {
    margin: 0 0 12px;
    font-size: 13px;
    color: #7dd3fc;
    display: flex;
    align-items: center;
    gap: 8px;
}

.entities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.entity-card {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.entity-label {
    color: #94a3b8;
    font-weight: 600;
    margin-right: 4px;
}

.entity-value {
    color: #f8fafc;
    font-weight: 500;
    word-break: break-word;
}

/* Console de Logs Collapsible */
.log-console-wrapper {
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    margin-bottom: 18px;
    overflow: hidden;
}

.log-console-wrapper summary {
    background: rgba(22, 27, 34, 0.95);
    padding: 10px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #c9d1d9;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.log-console-wrapper summary:hover {
    background: rgba(33, 38, 45, 0.95);
}

.log-console {
    padding: 12px 14px;
    font-family: 'JetBrains Mono', monospace, Consolas, Courier;
    font-size: 11.5px;
    line-height: 1.5;
    max-height: 220px;
    overflow-y: auto;
    background: #090d13;
    color: #8b949e;
}

.log-line {
    margin-bottom: 4px;
    word-break: break-all;
}

.log-line.dim { color: #484f58; }
.log-line.info { color: #58a6ff; }
.log-line.success { color: #3fb950; }
.log-line.warn { color: #e3b341; }
.log-line.error { color: #f85149; }

/* Rapport Final Card */
.final-report-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(2, 132, 199, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 12px;
    padding: 18px;
    animation: okfFadeIn 0.4s ease;
}

.final-report-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.final-badge {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    font-size: 11.5px;
    font-weight: 700;
}

.final-report-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}

.final-stat {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: #94a3b8;
}

.final-stat-val {
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 2px;
}

.final-sha {
    font-size: 11px;
    color: #64748b;
    font-family: var(--ff-mono);
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.25);
    padding: 6px 10px;
    border-radius: 6px;
}

/* ── Fiche Aperçu Fichier Sélectionné & Bouton Lancer ── */
.selected-file-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(2, 132, 199, 0.4);
    border-radius: 14px;
    padding: 16px 20px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    animation: okfFadeIn 0.3s ease;
}

.selected-file-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.file-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f87171;
    font-size: 20px;
}

.file-details .file-name {
    font-size: 14px;
    font-weight: 700;
    color: #f8fafc;
    word-break: break-all;
}

.file-details .file-meta {
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 2px;
}

.selected-file-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-launch {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35) !important;
}

.btn-launch:hover {
    background: linear-gradient(135deg, #34d399, #10b981) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
}

.btn-abort {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-abort:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════════════
   RENDU MATHÉMATIQUE KATEX & ANTI-DUPLICATION COPIER/COLLER
   ══════════════════════════════════════════════════════════════════════════ */
.katex-mathml {
    display: flex;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.katex {
    font-size: 1.05em;
    color: #93c5fd;
    text-rendering: auto;
}

.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 12px;
    margin: 10px 0 !important;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   COCKPIT DEVOPS, OBSERVABILITÉ & CONTRAT D'API UNIFIÉ
   ══════════════════════════════════════════════════════════════════════════ */
.devops-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: calc(100vh - 130px);
    width: 100%;
}

.devops-sovereign-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 18px;
    background: #091624;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.devops-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 18px;
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.devops-subnav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.devops-subbtn {
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0f172a;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.devops-subbtn:hover {
    color: #f8fafc;
    background: #1e293b;
    border-color: rgba(56, 189, 248, 0.3);
}

.devops-subbtn.active {
    background: rgba(56, 189, 248, 0.16);
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.2);
}

.devops-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.devops-frame-wrap {
    flex: 1;
    min-height: 580px;
    background: #080d1a;
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5), 0 8px 30px rgba(0, 0, 0, 0.4);
}

.devops-frame {
    width: 100%;
    height: 100%;
    min-height: 580px;
    border: none;
    display: block;
    background: transparent;
}

/* ══════════════════════════════════════════════════════════════════
   NOTEBOOKLM STYLE ENHANCEMENTS : CITATIONS & TABLEAUX COMPARATIFS
   ══════════════════════════════════════════════════════════════════ */

/* ── Citations Granulaires Inline & Infobulles Flottantes ── */
.cite-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0 2px;
    vertical-align: baseline;
    cursor: pointer;
    user-select: none;
}

.cite-num {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 4px;
    padding: 0 5px;
    line-height: 1.45;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cite-pill:hover .cite-num,
.cite-pill:focus .cite-num {
    background: rgba(56, 189, 248, 0.32);
    color: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.45);
    transform: translateY(-1px);
}

.bib-pill-num {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 4px;
    padding: 1px 6px;
    margin-right: 6px;
}

.cite-tooltip {
    display: none;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 295px;
    background: rgba(10, 16, 32, 0.97);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), 0 0 18px rgba(56, 189, 248, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 9999;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
    flex-direction: column;
    gap: 4px;
    font-family: var(--ff-body, 'Plus Jakarta Sans', sans-serif);
    text-align: left;
    user-select: none;
    -webkit-user-select: none;
}

.cite-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(10, 16, 32, 0.97);
}

.cite-pill:hover .cite-tooltip,
.cite-pill:focus .cite-tooltip {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.cite-tt-head {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 4px;
}

.cite-tt-title {
    font-size: 12px;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cite-tt-meta {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
}

.cite-tt-meta strong {
    color: #cbd5e1;
}

/* ── Tableaux Comparatifs Académiques Markdown ── */
.table-container {
    overflow-x: auto;
    margin: 14px 0;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.25);
    background: rgba(10, 16, 32, 0.85);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.academic-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    text-align: left;
}

.academic-table thead tr {
    background: rgba(59, 130, 246, 0.18);
    border-bottom: 1px solid rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}

.academic-table th {
    padding: 10px 14px;
    font-weight: 700;
    font-family: var(--ff-head, 'Outfit', sans-serif);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.academic-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.academic-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.academic-table tbody tr:nth-child(odd) {
    background: rgba(59, 130, 246, 0.04);
}

.academic-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.14) !important;
}

.academic-table td {
    padding: 9px 14px;
    color: #e2e8f0;
    line-height: 1.5;
}

/* ── Citations et Blockquotes Spécifiques ── */
.k1-blockquote {
    margin: 10px 0;
    padding: 8px 14px;
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid #60a5fa;
    border-radius: 0 8px 8px 0;
    color: #cbd5e1;
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION (Accessibilité P0 & Zéro Charge CPU/GPU)
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #ambient-canvas {
    display: block !important;
    animation: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   BANDEAU D'HONNÊTETÉ SCIENTIFIQUE (Contrat P0 - Item 6)
   ══════════════════════════════════════════════════════════════════ */
.honesty-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 18px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.94));
  border-bottom: 1px solid rgba(56, 189, 248, 0.25);
  font-size: 11.5px;
  color: #cbd5e1;
  position: relative;
  z-index: 15;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.honesty-banner .honesty-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.honesty-banner .honesty-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.honesty-banner .honesty-details {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.honesty-banner .honesty-divider {
  color: #475569;
}

.honesty-banner .honesty-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.honesty-banner .honesty-link-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #f0f9ff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

/* ══════════════════════════════════════════════════════════════════
   COCKPIT EXÉCUTIF DU CHEF DE DÉPARTEMENT (DMI) — STYLES PRESTIGE
   ══════════════════════════════════════════════════════════════════ */
#chefdmi-tab.tab-pane {
  padding: 0;
  overflow-y: auto !important;
  height: 100% !important;
  max-height: 100%;
}

/* Flux de page naturel : le défilement est porté par #chefdmi-tab uniquement (pas de double conteneur). */
.chefdmi-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 24px 90px 24px;
  width: 100%;
  max-width: 1400px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 100%;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.chefdmi-wrapper > * {
  min-width: 0;
  max-width: 100%;
}

.chefdmi-banner {
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  flex-wrap: wrap;
}

.chefdmi-banner-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 340px;
  min-width: 0;
}

.chefdmi-seal-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chefdmi-title-line {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  line-height: 1.4;
}

.chefdmi-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.2px;
}

.chefdmi-badge-cames {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chefdmi-badge-session {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chefdmi-subtitle {
  margin: 2px 0 0 0;
  font-size: 11.5px;
  color: #64748b;
}

.chefdmi-banner-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 100%;
}

.chefdmi-banner-actions button,
.chefdmi-banner-actions .chefdmi-session-picker-box {
  white-space: nowrap;
}

.chefdmi-banner-actions .chefdmi-session-picker-box {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 100%;
}

.chefdmi-banner-actions .chefdmi-session-picker-box select {
  min-width: 0;
}

.btn-subtle-primary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
  font-weight: 600;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-subtle-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.btn-subtle-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-weight: 600;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-subtle-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}

/* 4 KPIs Grid (Grille 4 Colonnes SOTA Symétrique) */
.chefdmi-kpis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1100px) {
  .chefdmi-kpis-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .chefdmi-kpis-grid {
    grid-template-columns: 1fr;
  }
}

.chefdmi-kpi-card {
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.chefdmi-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
}

.kpi-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.kpi-top-row .kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.kpi-top-row i {
  font-size: 14px;
}

.chefdmi-kpi-card .kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: #f8fafc;
  font-family: var(--ff-head);
  line-height: 1.2;
  margin-top: 10px;
}

.chefdmi-kpi-card .kpi-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}

.chefdmi-session-picker-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  padding: 4px 10px;
}

.chefdmi-session-picker-box label {
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.chefdmi-session-picker-box select {
  background: transparent;
  border: none;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  max-width: 280px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chefdmi-session-picker-box select option {
  background: #0f172a;
  color: #f8fafc;
}

/* Subnav Bar (Segmented Control SOTA - Non Chevauchant) */
.chefdmi-subnav-bar {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 5px 6px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.3) transparent;
}

.chefdmi-subnav-bar::-webkit-scrollbar {
  height: 4px;
}

.chefdmi-subnav-bar::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.3);
  border-radius: 4px;
}

.chefdmi-subnav-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  width: max-content;
}

.chefdmi-subbtn {
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chefdmi-subbtn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f8fafc;
  transform: translateY(-1px);
}

.chefdmi-subbtn.active {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.35);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════════════════════════
   WAREHOUSE HUB DU CHEF DMI — STYLES SOTA
   ══════════════════════════════════════════════════════════════════ */
.warehouse-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1100px) {
  .warehouse-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .warehouse-pillars-grid {
    grid-template-columns: 1fr;
  }
}

.warehouse-pillar-card {
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.warehouse-pillar-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(56, 189, 248, 0.15);
}

.pillar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pillar-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pillar-tag.tag-phd {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.pillar-tag.tag-master {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.pillar-tag.tag-pro {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.pillar-tag.tag-sessions {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.pillar-count {
  font-size: 20px;
  font-weight: 800;
  color: #f8fafc;
  font-family: var(--ff-head);
}

.pillar-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
  margin: 4px 0 2px 0;
}

.pillar-sub {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}

.pillar-footer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #64748b;
}

.pillar-footer span:first-child {
  color: #38bdf8;
  font-weight: 600;
}

.pillar-badge-accent {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
}

.warehouse-labs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.lab-pill-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #070b16;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.lab-pill-item:hover {
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(15, 23, 42, 0.8);
}

.warehouse-years-ribbon {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 2px;
  scrollbar-width: thin;
}

.year-chip-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.year-chip-btn strong {
  color: #f8fafc;
}

.year-chip-btn small {
  font-size: 10.5px;
  color: #94a3b8;
}

.year-chip-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.year-chip-btn.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════
   ANALYTICS & OBSERVATOIRE — STYLES SOTA
   ══════════════════════════════════════════════════════════════════ */
.chefdmi-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1024px) {
  .chefdmi-analytics-grid {
    grid-template-columns: 1fr;
  }
}

.analytics-ratio-bar {
  display: flex;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  margin: 8px 0;
}

.ratio-fill.info { background: #3987e5; }
.ratio-fill.maths { background: #d95926; margin-left: 2px; }

.analytics-legend-row {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: #94a3b8;
  flex-wrap: wrap;
  margin-top: 6px;
}

.analytics-legend-row .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.analytics-legend-row .dot.info { background: #38bdf8; }
.analytics-legend-row .dot.maths { background: #38bdf8; }

.analytics-stats-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.duo-item {
  background: #070b16;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}

.duo-title { font-size: 11px; color: #94a3b8; font-weight: 700; text-transform: uppercase; }
.duo-number { font-size: 20px; font-weight: 800; color: #f8fafc; margin-top: 2px; }
.duo-number small { font-size: 11px; color: #64748b; font-weight: normal; margin-left: 4px; }
.duo-sub { font-size: 10.5px; color: #64748b; margin-top: 2px; }

.teacher-load-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.teacher-load-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: #070b16;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 12px;
  color: #e2e8f0;
}

.load-badge {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}

.fin-breakdown-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.fin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #cbd5e1;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fin-row.total {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  font-weight: 700;
  padding-top: 8px;
  font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════
   COPILOT FLOTTANT DU CHEF DE DÉPARTEMENT (DMI) — STYLES SOTA
   ══════════════════════════════════════════════════════════════════ */
.chefdmi-copilot-container {
  position: fixed;
  bottom: 88px;
  right: 24px;
  z-index: 990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Onglet Chat : la zone de saisie reste au-dessus de la pastille Copilot */
body:has(#chat-tab.active) .chefdmi-copilot-container {
  bottom: 92px !important;
}

/* Pastille compacte 44 px avec halo discret : ne recouvre jamais le contenu utile */
.chefdmi-copilot-trigger {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1e293b, #0b1120);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.08), 0 8px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.chefdmi-copilot-trigger:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.8);
  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.12), 0 12px 26px rgba(0, 0, 0, 0.55);
}

.chefdmi-copilot-trigger[aria-expanded="true"] {
  border-color: #38bdf8;
}

.chefdmi-copilot-backdrop {
  position: fixed;
  inset: 0;
  z-index: 980;
  background: rgba(9, 13, 22, 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.chefdmi-copilot-backdrop[hidden] { display: none; }

.copilot-pulse-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  display: inline-block;
  animation: copilotPulse 2s infinite ease-in-out;
}

@keyframes copilotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

.chefdmi-copilot-panel {
  width: 500px;
  min-width: 380px;
  max-width: calc(100vw - 32px);
  /* Hauteur ajustée au contenu : pas de blanc sous la barre de séparation ; plafonnée à l'écran. */
  height: auto;
  min-height: 0;
  max-height: min(620px, calc(100vh - 90px));
  background: rgba(11, 17, 32, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  animation: copilotIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.chefdmi-copilot-panel.expanded {
  width: min(920px, calc(100vw - 40px)) !important;
  height: min(780px, calc(100vh - 70px)) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   TABLEAUX SOTA DU COPILOT CHEF DMI (ESTHÉTIQUES, LISIBLES, SOUVERAINS)
   ═════════════════════════════════════════════════════════════════════════ */
.copilot-msg.bot {
  max-width: 98% !important;
}

.copilot-table-container {
  overflow-x: auto;
  margin: 10px 0;
  border-radius: 8px;
}

.copilot-msg table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 10px 0;
  font-size: 11.5px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(15, 23, 42, 0.85);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.copilot-msg th {
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  font-weight: 700;
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(56, 189, 248, 0.3);
  font-size: 11px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.copilot-msg td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  vertical-align: middle;
}

.copilot-msg tr:last-child td {
  border-bottom: none;
}

.copilot-msg tr:hover td {
  background: rgba(56, 189, 248, 0.06);
}

.copilot-msg table code {
  background: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  font-family: monospace;
}

.chefdmi-copilot-panel .copilot-header {
  flex-shrink: 0;
}

@keyframes copilotIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.copilot-header {
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.copilot-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.copilot-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.copilot-title-text {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 6px;
}

.copilot-tag {
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  font-weight: 700;
}

.copilot-subtext {
  font-size: 10.5px;
  color: #94a3b8;
}

.copilot-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.copilot-icon-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.15s;
}

.copilot-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}

.copilot-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12.5px;
}

.chefdmi-copilot-panel .copilot-body {
  flex: 0 1 auto;
  min-height: 0;
  padding: 12px 14px;
}

.chefdmi-copilot-panel .copilot-chips-bar {
  flex: 0 0 auto;
  flex-wrap: wrap;
  overflow-x: visible;
  padding: 6px 12px;
}

.chefdmi-copilot-panel .copilot-footer {
  flex: 0 0 auto;
}

.copilot-msg {
  max-width: 90%;
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.5;
}

.copilot-msg.bot {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  align-self: flex-start;
}

.copilot-msg.user {
  background: #0284c7;
  color: #ffffff;
  align-self: flex-end;
  font-weight: 500;
}

.copilot-chips-bar {
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.copilot-action-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.copilot-action-chip:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.copilot-footer {
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 17, 32, 0.95);
}

.copilot-footer input {
  flex: 1;
  background: #070b16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  color: #f8fafc;
  font-size: 12px;
  outline: none;
  font-family: inherit;
}

.copilot-footer input:focus {
  border-color: #38bdf8;
}

.copilot-footer button {
  background: #0284c7;
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.15s;
}

.copilot-footer button:hover {
  background: #0369a1;
}

.copilot-voice-btn {
  background: rgba(56, 189, 248, 0.14) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.2s ease;
}

.copilot-voice-btn:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: scale(1.05);
}

.copilot-voice-btn.recording {
  background: rgba(239, 68, 68, 0.25) !important;
  border: 1px solid #ef4444 !important;
  color: #ef4444 !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: 1px solid #f87171 !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
  animation: k1-copilot-voice-pulse 1.3s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
  position: relative;
}

.copilot-voice-btn.recording::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  border: 1.5px solid rgba(239, 68, 68, 0.9);
  animation: k1-voice-ripple 1.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.copilot-voice-btn.recording i {
  animation: k1-mic-throb 1.2s ease-in-out infinite;
}

@keyframes k1-copilot-voice-pulse {
  0%, 100% { transform: scale(1.06) translateZ(0); box-shadow: 0 0 14px rgba(239, 68, 68, 0.7); }
  50% { transform: scale(0.96) translateZ(0); box-shadow: 0 0 24px rgba(239, 68, 68, 0.95); }
}

.legacy-copilot-pulse {
}

@keyframes copilot-pulse-record {
  0% {
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.85);
    transform: scale(1.08);
  }
}

/* Subview Panels */
.chefdmi-subview-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chefdmi-card {
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.card-header-styled {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.header-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

/* Studio Grid */
.chefdmi-studio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 1024px) {
  .chefdmi-studio-grid {
    grid-template-columns: 1fr;
  }
}

.studio-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-group-custom {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group-custom label {
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-group-custom select,
.form-group-custom input,
.form-group-custom textarea {
  background: #070b16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f8fafc;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}

.form-group-custom select:focus,
.form-group-custom input:focus,
.form-group-custom textarea:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.form-row-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mention-badge-pill {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.btn-gold-generate {
  background: linear-gradient(135deg, #0284c7 0%, #0f172a 100%);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #f8fafc;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.25);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-gold-generate:hover {
  background: linear-gradient(135deg, #0369a1 0%, #1e293b 100%);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(56, 189, 248, 0.35);
}

/* Candidate Preview Box */
.candidate-preview-box {
  background: #070b16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.empty-state-hint {
  text-align: center;
  color: #64748b;
  font-size: 13px;
  padding: 24px;
}

.cand-preview-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}

.cand-preview-detail .cand-name-title {
  font-size: 15px;
  font-weight: 800;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cand-preview-detail .cand-topic {
  color: #f1f5f9;
  font-style: italic;
  line-height: 1.4;
  border-left: 3px solid #38bdf8;
  padding-left: 10px;
  margin: 4px 0;
}

.cand-preview-jury-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.jury-role-pill {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
}

.jury-role-pill strong {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.4px;
}

/* PV Result Box */
.pv-result-box {
  margin-top: 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pv-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pv-sha-hash {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: #34d399;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 10px;
  border-radius: 6px;
  word-break: break-all;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.btn-download-pv {
  background: #10b981;
  color: #ffffff;
  border: none;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  transition: all 0.2s ease;
}

.btn-download-pv:hover {
  background: #059669;
  transform: translateY(-1px);
}

/* Planning Toolbar */
.planning-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-pills-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.planning-filter-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.planning-filter-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.planning-filter-chip.active {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  font-weight: 700;
}

.search-box-mini {
  display: flex;
  align-items: center;
  background: #070b16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 12px;
  gap: 8px;
  min-width: 240px;
}

.search-box-mini input {
  background: transparent;
  border: none;
  color: #f8fafc;
  font-size: 12.5px;
  outline: none;
  width: 100%;
}

/* Tables */
.table-responsive-box {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.chefdmi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.chefdmi-table th {
  background: rgba(15, 23, 42, 0.95);
  color: #94a3b8;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.chefdmi-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  vertical-align: middle;
}

.chefdmi-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.cames-badge-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-block;
  white-space: nowrap;
}

.cames-badge-tag.pt {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.cames-badge-tag.mc {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.cames-badge-tag.cc {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.cames-badge-tag.as {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* CAMES Banner Box */
.cames-banner-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cames-badge-status {
  background: #10b981;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
}

/* Financial Header & Cards */
.financial-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.financial-totals-badge {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.financial-totals-badge strong {
  font-size: 16px;
  color: #fbbf24;
}

.financial-cards-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

.fin-stat-box {
  background: #070b16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.fin-stat-lbl {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fin-stat-val {
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
  margin-top: 4px;
}

.fin-stat-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* Table Action Buttons & Badges (Chef DMI SOTA - Non Chevauchant) */
.btn-table-action {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.btn-table-action:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.btn-secondary-glow {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.btn-secondary-glow:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.25);
}

.status-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}



/* Ergonomie & Aération du Cockpit Décisionnel Chef DMI */
#chefdmi-tab.tab-pane {
  padding: 0;
  overflow-y: auto !important;
  height: 100% !important;
  max-height: 100%;
}

.chefdmi-wrapper {
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 100px;
  min-height: 100%;
  height: auto !important;
  overflow-y: visible !important;
}

.chefdmi-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.8) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.chefdmi-kpis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.chefdmi-subnav-bar {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 6px;
  overflow-x: auto;
}

.chefdmi-subnav-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.chefdmi-subbtn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #94a3b8;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chefdmi-subbtn:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.05);
}

.chefdmi-subbtn.active {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.15);
}


/* ══════════════════════════════════════════════════════════════════
   VERROUILLAGE SOUVERAIN : ERGONOMIE, SCROLLING & AÉRATION COCKPIT CHEF DMI
   ══════════════════════════════════════════════════════════════════ */
#chefdmi-tab.tab-pane {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
}

.chefdmi-wrapper {
  max-width: 1560px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  padding: 16px 24px 140px 24px !important;
  /* #chefdmi-tab est une colonne de hauteur fixe : sans ceci, le contenu est écrasé et déborde sur la suite. */
  flex: 0 0 auto !important;
  min-height: 100% !important;
  height: auto !important;
  overflow-y: visible !important;
}

/* Subnav Bar : Multi-lignes 2x4 propre, 100% visible, aucun bouton masqué */
.chefdmi-subnav-bar {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 14px !important;
  padding: 8px 10px !important;
  width: 100% !important;
  overflow: visible !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

.chefdmi-subnav-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
}

.chefdmi-subbtn {
  flex: 1 1 calc(25% - 8px) !important;
  min-width: 175px !important;
  justify-content: center !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(15, 23, 42, 0.65) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.chefdmi-subbtn:hover {
  color: #f8fafc !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  transform: translateY(-1px) !important;
}

.chefdmi-subbtn.active {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35) !important;
  font-weight: 700 !important;
}

/* Grille 4 Piliers responsive (2x2 sur écrans portables <= 1300px) */
.warehouse-pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

@media (max-width: 1300px) {
  .warehouse-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .warehouse-pillars-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   INGÉNIERIE IHM / UI-UX : RAFFINEMENT EXÉCUTIF PRESTIGE (v4.3)
   ══════════════════════════════════════════════════════════════════ */

/* 1. Résolution de la troncature du titre dans la Top-Bar */
@media (max-width: 1400px) {
  .stats-pills .pill:nth-child(3),
  .stats-pills .pill:nth-child(4) {
    display: flex;
  }
}
@media (max-width: 1150px) {
  .stats-pills .pill:nth-child(2) {
    display: flex;
  }
}
.page-title h1 {
  font-size: 16px !important;
}

/* 2. Compactage raffiné des 4 KPI Cards (Moins d'encombrement vertical) */
.chefdmi-kpis-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

.chefdmi-kpi-card {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 14px 16px !important;
  background: rgba(11, 18, 32, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

.chefdmi-kpi-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 12px rgba(56, 189, 248, 0.15) !important;
}

.kpi-top-row .kpi-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #94a3b8 !important;
}

.chefdmi-kpi-card .kpi-value {
  font-size: clamp(18px, 1.8vw, 22px) !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  word-break: break-word;
  line-height: 1.2 !important;
  margin: 4px 0 !important;
}

.chefdmi-kpi-card .kpi-sub {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
  white-space: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* 3. Bannière Institutionnelle du Cabinet allégée */
.chefdmi-banner {
  padding: 12px 18px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 41, 59, 0.82) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  border-radius: 12px !important;
}

.chefdmi-title {
  font-size: 15px !important;
}

.chefdmi-subtitle {
  font-size: 11px !important;
}

/* 4. Segmented Control des 8 Sous-Vues (Rendu Haut de Gamme) */
.chefdmi-subnav-bar {
  background: rgba(11, 18, 32, 0.9) !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  border-radius: 12px !important;
  padding: 6px !important;
}

.chefdmi-subbtn {
  padding: 8px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.chefdmi-subbtn.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(2, 132, 199, 0.2)) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  color: #f0f9ff !important;
  box-shadow: 0 2px 12px rgba(56, 189, 248, 0.25) !important;
}

/* 5. Cartes des 4 Piliers de l'Entrepôt */
.warehouse-pillar-card {
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: rgba(11, 18, 32, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.warehouse-pillar-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(56, 189, 248, 0.15) !important;
}

.pillar-count {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
}

.pillar-title {
  font-size: 13px !important;
  font-weight: 700 !important;
}

.pillar-sub {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}


/* ══════════════════════════════════════════════════════════════════
   6. AMÉLIORATIONS ERGONOMIE & NORMES IHM (Pr. Paul DAYANG / ISO 9241 / WCAG AA)
   ══════════════════════════════════════════════════════════════════ */

/* 6.1. WCAG 2.1 AA : Focus Visible Universel (Opérabilité Clavier) */
:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
}

/* 6.2. Touches de Raccourcis Clavier <kbd> (Nielsen H7 - Efficience) */
.k1-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  font-size: 10.5px;
  font-family: var(--ff-mono);
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  vertical-align: middle;
  line-height: 1.2;
}

/* 6.3. Prévention de la Cécité au Changement (Change Blindness - Q5 & Gestalt) */
@keyframes k1-pulse-update {
  0% {
    background-color: rgba(56, 189, 248, 0.28);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

.k1-data-refreshed {
  animation: k1-pulse-update 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* 6.4. Loi de Fitts : Cibles Larges & Rétroaction Immédiate (Q12 & TD 1.1) */
.tab-return-pill,
.btn-return-home,
.chefdmi-quick-btn {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
}

.tab-return-pill:hover,
.btn-return-home:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.35) !important;
  border-color: rgba(56, 189, 248, 0.55) !important;
  color: #f8fafc !important;
}

.tab-return-pill:active,
.btn-return-home:active {
  transform: translateY(0) scale(0.98) !important;
  filter: brightness(0.92) !important;
}

/* 6.5. Double Encodage & Daltonisme (WCAG 1.4.1 & Q4 - Icône + Texte + Couleur) */
.status-badge-verified {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.status-badge-alert {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.status-badge-warn {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* 6.6. Banner Humanisée de Remédiation d'Erreur (Nielsen H9 & TD 2.1) */
.k1-error-card {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(15, 23, 42, 0.85)) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  border-left: 4px solid #ef4444 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin: 12px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.k1-error-card .error-title {
  color: #fca5a5 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.k1-error-card .error-desc {
  color: #e2e8f0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.k1-error-card .error-action {
  color: #38bdf8 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  background: rgba(56, 189, 248, 0.1) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  width: fit-content !important;
}


/* Surlignage dynamique des résultats de recherche dans le Patrimoine & Cockpit DMI */
mark.dmi-search-highlight {
  background: rgba(245, 158, 11, 0.28) !important;
  color: #fde68a !important;
  font-weight: 700 !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  display: inline !important;
}

/* ══════════════════════════════════════════════════════════════════
   7. CRAFT UI & MICRO-INTERACTIONS (Emil Kowalski Physics Engine)
   ══════════════════════════════════════════════════════════════════ */

/* Micro-interaction Sceau Administratif & Attestation Cryptographique SHA-256 */
@keyframes k1-seal-stamp {
  0% {
    transform: scale(1.25) rotate(-3.5deg) translateZ(0);
    opacity: 0;
    filter: drop-shadow(0 20px 30px rgba(16, 185, 129, 0));
  }
  50% {
    transform: scale(0.96) rotate(1deg) translateZ(0);
    opacity: 1;
    filter: drop-shadow(0 0 25px rgba(16, 185, 129, 0.8));
  }
  75% {
    transform: scale(1.02) rotate(-0.5deg) translateZ(0);
  }
  100% {
    transform: scale(1.0) rotate(0deg) translateZ(0);
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(16, 185, 129, 0.4));
  }
}

.k1-sealed-effect {
  animation: k1-seal-stamp 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  will-change: transform, opacity, filter;
}

/* Modales & Panneaux Fluides (< 250ms & cubic-bezier Apple/Linear) */
.modal-backdrop, .modal-overlay {
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-box, .modal-card {
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, opacity;
}

/* Boutons d'Action & Chips Tactiles */
.copilot-action-chip, .quick-btn, .btn-subtle-primary {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

.copilot-action-chip:active, .quick-btn:active, .btn-subtle-primary:active {
  transform: scale(0.95) translateZ(0) !important;
  transition-duration: 0.08s !important;
}

/* Cartes des Communautés Microsoft GraphRAG */
.graphrag-community-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.75) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  padding: 16px 18px;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.graphrag-community-card:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 18px rgba(56, 189, 248, 0.25);
}

.graphrag-badge-faithfulness {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   GRAPHRAG TRI-MODE SEARCH CAPSULE (Inspiré de wade1010/graphrag-ui)
   Design System Emil Kowalski : Spring physics, subtle glow, craft polish
═══════════════════════════════════════════════════════════════ */
.graphrag-mode-capsule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px;
  margin-bottom: 8px;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 9999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.graphrag-mode-capsule:hover {
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 12px rgba(56, 189, 248, 0.15);
}

.mode-capsule-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.mode-capsule-label i {
  color: #38bdf8;
  font-size: 12px;
}

.mode-pills-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(8, 12, 22, 0.8);
  padding: 3px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.mode-pill {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  outline: none;
  user-select: none;
}

.mode-pill:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}

.mode-pill.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.45), 0 0 8px rgba(56, 189, 248, 0.3);
  transform: scale(1.02);
}

.mode-pill:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}

#mode-pill-local.active {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.45);
}

#mode-pill-global.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.45);
}


/* ══════════════════════════════════════════════════════════════════
   EXPANSION IMMERSIVE AU SCROLL (EMIL KOWALSKI CRAFT & MAXIMUM VIEWPORT)
   « Lorsque deux pages/sections sont superposées, le défilement vers le bas
   fait sortir la première section pendant que la seconde monte pour agrandir
   l'espace de visualisation à 100% de la hauteur d'écran. »
   ══════════════════════════════════════════════════════════════════ */

/* 1. Sortie fluide de la Top-Bar globale vers le haut */
.top-bar {
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.28s ease, 
              margin-top 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, opacity;
}

body.immersive-scroll-active .top-bar { /* stabilisé */

  /* Stabilise */
  opacity: 1;
  pointer-events: auto !important;
}

/* 2. Transition de la première section (Top-Section) qui sort de l'écran */
.immersive-page-top,
.chefdmi-kpis-wrapper,
.search-hero-banner,
.filters-collapsible-header,
.chefdmi-kpis-grid {
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease,
              max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-origin: top center;
  will-change: transform, opacity, max-height;
}

body.immersive-scroll-active .immersive-page-top,
body.immersive-scroll-active .chefdmi-kpis-wrapper,
body.immersive-scroll-active .search-hero-banner,
body.immersive-scroll-active .filters-collapsible-header,
body.immersive-scroll-active .chefdmi-kpis-grid {
  transform: none;
  opacity: 1;
  max-height: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

/* 3. Élévation et expansion automatique de la page/section du bas pour agrandir la visualisation */
.immersive-page-bottom,
.chefdmi-workspace-card,
#chefdmi-planning-subview,
#chefdmi-cames-subview,
#chefdmi-finances-subview,
#chefdmi-heritage-subview,
#chefdmi-pv-subview,
.search-results-section,
.graph-canvas-wrapper {
  transition: all 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: min-height, transform;
}

body.immersive-scroll-active .immersive-page-bottom,
body.immersive-scroll-active .chefdmi-workspace-card,
body.immersive-scroll-active #chefdmi-planning-subview,
body.immersive-scroll-active #chefdmi-cames-subview,
body.immersive-scroll-active #chefdmi-finances-subview,
body.immersive-scroll-active #chefdmi-heritage-subview,
body.immersive-scroll-active #chefdmi-pv-subview,
body.immersive-scroll-active .search-results-section,
body.immersive-scroll-active .graph-canvas-wrapper {
  min-height: calc(100vh - 35px) !important;
  transform: translateY(0) !important;
}

/* 4. Bouton flottant Indicateur & Commutateur Plein Écran (Craft Emil Kowalski) */
.immersive-scroll-toggle-pill {
  position: fixed;
  bottom: 22px;
  right: 28px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 16px rgba(56, 189, 248, 0.2);
  color: #f8fafc;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.85;
}

.immersive-scroll-toggle-pill:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.03);
  border-color: #38bdf8;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 24px rgba(56, 189, 248, 0.4);
}

.immersive-scroll-toggle-pill i {
  color: #38bdf8;
  transition: transform 0.3s ease;
}

body.immersive-scroll-active .immersive-scroll-toggle-pill i {
  transform: rotate(180deg);
}


/* ══════════════════════════════════════════════════════════════════
   FLUIDITÉ TOTALE & ANTI-CLIGNOTEMENT DU SCROLL HORIZONTAL (CRAFT EMIL KOWALSKI)
   Supprime le rebond violent, le blocage et le clignotement lors du défilement
   horizontal à la roulette de souris sur les barres d'outils et tableaux.
   ══════════════════════════════════════════════════════════════════ */

.stats-pills,
.planning-filter-chips,
.chefdmi-quick-actions,
.copilot-chips-row,
.copilot-action-chips,
.table-responsive,
.warehouse-pillars-grid,
.filters-bar,
.horizontal-scroll-container {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: auto !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  /* Stabilisation matérielle GPU anti-flicker */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: scroll-position;
}

/* Scrollbar ultra-fine et discrète pour les barres horizontales */
.stats-pills::-webkit-scrollbar,
.planning-filter-chips::-webkit-scrollbar,
.chefdmi-quick-actions::-webkit-scrollbar,
.copilot-chips-row::-webkit-scrollbar {
  height: 4px !important;
}

.stats-pills::-webkit-scrollbar-thumb,
.planning-filter-chips::-webkit-scrollbar-thumb,
.chefdmi-quick-actions::-webkit-scrollbar-thumb,
.copilot-chips-row::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.4) !important;
  border-radius: 999px !important;
}


/* ══════════════════════════════════════════════════════════════════
   SYSTÈME DE DIFFÉRENCIATION DE PERTINENCE DES BOUTONS (CRAFT 2026)
   - Haute Pertinence (Primaire) : Élévation spring + halo néon cyan/bleu
   - Prestige Exécutif (Chef DMI) : Élévation + halo or souverain
   - Moyenne Pertinence (Secondaire) : Élévation douce 1px + verre fumé
   - Basse Pertinence / Utilitaire : Zéro élévation, stabilité au sol, éclaircissement doux
   ══════════════════════════════════════════════════════════════════ */

/* 1. Haute Pertinence — Boutons d'Action Clés */
.btn-primary,
.btn-relevant-high,
#send-btn,
.btn-search-primary {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #4f46e5 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

.btn-primary:hover,
.btn-relevant-high:hover,
#send-btn:hover,
.btn-search-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 26px rgba(56, 189, 248, 0.5), 0 0 14px rgba(59, 130, 246, 0.4) !important;
  border-color: #38bdf8 !important;
}

.btn-primary:hover i,
.btn-relevant-high:hover i,
#send-btn:hover i,
.btn-search-primary:hover i {
  transform: scale(1.12) translateX(1px);
  color: #f0f9ff;
  transition: transform 0.2s ease;
}

.btn-primary:active,
.btn-relevant-high:active,
#send-btn:active {
  transform: translateY(0) scale(0.97) !important;
}

/* 2. Prestige Exécutif — Actes Officiels Chef DMI */
.btn-executive-gold,
.btn-download-pv {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

.btn-executive-gold:hover,
.btn-download-pv:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 26px rgba(245, 158, 11, 0.5), 0 0 14px rgba(251, 191, 36, 0.35) !important;
  border-color: #fbbf24 !important;
}

.btn-executive-gold:hover i,
.btn-download-pv:hover i {
  transform: scale(1.12);
  color: #fffbeb;
  transition: transform 0.2s ease;
}

/* 3. Moyenne Pertinence — Actions Complémentaires */
.btn-subtle-primary,
.btn-secondary,
.btn-relevant-mid {
  background: rgba(30, 41, 59, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

.btn-subtle-primary:hover,
.btn-secondary:hover,
.btn-relevant-mid:hover {
  transform: translateY(-1px) !important; /* Élévation modérée */
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* 4. Basse Pertinence / Utilitaire Passif — Reste ancré au sol sans mouvement */
.btn-export,
.btn-subtle-secondary,
.btn-relevant-low,
.btn-ghost-util {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  cursor: pointer;
}

.btn-export:hover,
.btn-subtle-secondary:hover,
.btn-relevant-low:hover,
.btn-ghost-util:hover {
  transform: none !important; /* AUCUN mouvement vers le haut — reste au sol */
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   HARMONISATION DES CHIPS D'ACTION (REMPLACEMENT DES EMOJIS DISPARATES)
   ══════════════════════════════════════════════════════════════════ */
.copilot-action-chip {
  padding: 6px 13px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(15, 23, 42, 0.75) !important;
  color: #cbd5e1 !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

.copilot-action-chip i {
  font-size: 11px !important;
  transition: transform 0.2s ease !important;
}

.copilot-action-chip:hover {
  transform: translateY(-1px) scale(1.01) !important;
  color: #ffffff !important;
}

.copilot-action-chip:hover i {
  transform: scale(1.15) !important;
}

/* Déclinaisons thématiques unifiées */
.copilot-action-chip.chip-cyan {
  border-color: rgba(56, 189, 248, 0.3) !important;
  background: rgba(56, 189, 248, 0.08) !important;
  color: #7dd3fc !important;
}
.copilot-action-chip.chip-cyan:hover {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.18) !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25) !important;
}

.copilot-action-chip.chip-emerald {
  border-color: rgba(16, 185, 129, 0.3) !important;
  background: rgba(16, 185, 129, 0.08) !important;
  color: #6ee7b7 !important;
}
.copilot-action-chip.chip-emerald:hover {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.18) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
}

.copilot-action-chip.chip-gold {
  border-color: rgba(245, 158, 11, 0.3) !important;
  background: rgba(245, 158, 11, 0.08) !important;
  color: #fde68a !important;
}
.copilot-action-chip.chip-gold:hover {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.18) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25) !important;
}

.copilot-action-chip.chip-danger {
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: #fca5a5 !important;
}
.copilot-action-chip.chip-danger:hover {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.18) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25) !important;
}

.copilot-action-chip.chip-purple, .copilot-action-chip.chip-cyan {
  border-color: rgba(56, 189, 248, 0.3) !important;
  background: rgba(56, 189, 248, 0.08) !important;
  color: #7dd3fc !important;
}
.copilot-action-chip.chip-purple, .copilot-action-chip.chip-cyan:hover {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.18) !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25) !important;
}

.copilot-action-chip.chip-blue {
  border-color: rgba(59, 130, 246, 0.3) !important;
  background: rgba(59, 130, 246, 0.08) !important;
  color: #93c5fd !important;
}
.copilot-action-chip.chip-blue:hover {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.18) !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   HARMONISATION UX : HIÉRARCHIE VISUELLE ET PERTINENCE DES BOUTONS (K1)
   ══════════════════════════════════════════════════════════════════════ */

/* Rendre le titre du top-bar et les badges parfaitement lisibles */
.page-title {
  min-width: 260px;
  flex: 1;
}

.page-title h1 {
  font-size: 16px !important;
  letter-spacing: -0.2px;
  color: #f8fafc;
}

@media (max-width: 1440px) {
  #stat-nodes-pill, #stat-rels-pill {
    display: flex;
  }
}

.stats-pills .pill {
  padding: 4px 8px !important;
  gap: 5px !important;
}
.stats-pills .pill-val {
  font-size: 12.5px !important;
}

/* 1. BOUTONS MAJEURS / HAUTE PERTINENCE (Action Principale de l'onglet) */
/* Exemple : Rechercher, Envoyer Chat, Émettre PV, Ingestion */
.btn-primary,
.btn-pertinent-high {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: 1px solid rgba(96, 165, 250, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.35) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.2s ease, 
              border-color 0.2s ease !important;
}
.btn-primary:hover,
.btn-pertinent-high:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.55), 0 0 12px rgba(96, 165, 250, 0.35) !important;
  border-color: #93c5fd !important;
  color: #ffffff !important;
}

/* 2. BOUTONS SECONDAIRES / PERTINENCE MOYENNE (Actions Métier / Navigation) */
/* Exemple : Deep Research, Revenir au Chat, Filtres & Suggestions, Audit P0 */
.btn-secondary,
.btn-pertinent-med,
.btn-export[onclick*="DeepResearch"],
.btn-export[onclick*="switchToChatTab"] {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #e2e8f0 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, 
              background 0.18s ease, 
              border-color 0.18s ease, 
              box-shadow 0.18s ease !important;
}
.btn-secondary:hover,
.btn-pertinent-med:hover,
.btn-export[onclick*="DeepResearch"]:hover,
.btn-export[onclick*="switchToChatTab"]:hover {
  transform: translateY(-1.5px) !important;
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.3) !important;
}

/* 3. BOUTONS UTILITAIRES / BASSE PERTINENCE (Données Brutes & Exports) */
/* Exemple : BibTeX, RIS, CSV, OAI-PMH, Reset */
.btn-export.compact,
.btn-subtle-primary,
.btn-pertinent-low,
.btn-utility {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, 
              border-color 0.15s ease, 
              color 0.15s ease !important;
}
/* Différence subtile : AUCUN saut vertical, AUCUN halo lumineux agressif */
.btn-export.compact:hover,
.btn-subtle-primary:hover,
.btn-pertinent-low:hover,
.btn-utility:hover {
  transform: none !important;
  box-shadow: none !important;
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #f1f5f9 !important;
}

/* 4. BOUTON INACTIF / NON PERTINENT DANS LE CONTEXTE ACTUEL */
button:disabled,
.btn-disabled,
.btn-not-relevant {
  opacity: 0.4 !important;
  filter: grayscale(40%) !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
  transform: none !important;
  box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════════════════
   DESIGN ENGINEERING POLISH LAYER (CRAFT EMIL KOWALSKI)
   Fluid Spring Physics, Tactile Depth, Micro-Interactions & CLS = 0
   ══════════════════════════════════════════════════════════════════════ */

/* 1. TACTILE PHYSICAL FEEDBACK (PRESS FEEL SUR TOUS LES ÉLÉMENTS INTERACTIFS) */
button:not(:disabled):active,
.btn-primary:not(:disabled):active,
.btn-secondary:not(:disabled):active,
.btn-card:not(:disabled):active,
.graph-mode-btn:not(:disabled):active,
.nav-item:not(:disabled):active,
.planning-filter-chip:not(:disabled):active,
.graph-dropdown-item:not(:disabled):active,
.badge[onclick]:active,
.stats-pills .pill:active,
.btn-export:not(:disabled):active {
  transform: scale(0.968) translateY(0.5px) !important;
  transition: transform 0.07s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. COURBES D'AMORTISSEMENT FLUIDES TYPE FRAMER / SPRING (0.16, 1, 0.3, 1) */
button,
.btn-primary,
.btn-secondary,
.btn-card,
.graph-mode-btn,
.nav-item,
.planning-filter-chip,
.thesis-card,
.copilot-action-chip,
.stats-pills .pill,
.badge[onclick] {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.18s ease,
              border-color 0.18s ease,
              color 0.15s ease !important;
  will-change: transform;
}

/* 3. MENU DÉROULANT ET POPOVERS : ENTRÉE NATURELLE AVEC AMORTI */
.graph-more-views-menu,
.dropdown-menu,
.modal-content,
.card-detail-drawer {
  animation: deMenuEnter 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  transform-origin: top center !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

@keyframes deMenuEnter {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.975);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 4. PROFONDEUR MATÉRIELLE : DOUBLE BORDURE & REFLET SUPÉRIEUR SUBTIL */
.thesis-card,
.stat-card,
.copilot-card,
.dashboard-card,
.graph-more-views-menu,
.card-detail-drawer,
.planning-header-row {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
              0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

/* 5. FOCUS-VISIBLE LUMINESCENT ZÉRO-CLS (AUCUN SAUT VISUEL AU CLIC/FOCUS) */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18),
              inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* 6. TOAST NOTIFICATIONS AVEC AMORTISSEUR RESSORT (SPRING) */
.k1-toast,
#toast-container > div {
  animation: deToastSpring 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
              0 12px 36px rgba(0, 0, 0, 0.55),
              0 0 20px rgba(56, 189, 248, 0.2) !important;
}

@keyframes deToastSpring {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 7. ÉLÉVATION TACTILE AU SURVOL DES CARTES DU CATALOGUE */
.thesis-card:hover {
  transform: translateY(-2.5px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 10px 28px rgba(0, 0, 0, 0.45),
              0 0 16px rgba(56, 189, 248, 0.12) !important;
}

/* 8. MICRO-POLISSAGE DES ITEMS DU MENU GRAPHE & ONGLETS ACTIFS */
.graph-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.graph-dropdown-item:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #ffffff !important;
  transform: translateX(3px) !important;
}

.planning-filter-chip.active,
.search-chip.active,
.graph-mode-btn.active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
              0 0 14px rgba(56, 189, 248, 0.35) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   HIGH-END LUXURY TYPOGRAPHY LAYER (DASTUDY & LINEAR INSPIRATION)
   Plus Jakarta Sans (Headings) + Inter (Body) + JetBrains Mono (Finance)
   ══════════════════════════════════════════════════════════════════════ */

/* 1. TITRES ÉDITORIAUX HAUTE PRÉCISION (TIGHT LUXURY TRACKING) */
h1, h2, h3, h4,
.brand-name-k1,
.brand-name-sub,
.page-title h1,
.section-title,
.modal-header h3,
.dashboard-header h2 {
  font-family: var(--ff-head) !important;
  letter-spacing: -0.028em !important;
  text-rendering: optimizeLegibility !important;
}

/* 2. TITRES DES MÉMOIRES ET THÈSES (CONFORT DE LECTURE & HIÉRARCHIE) */
.thesis-title {
  font-family: var(--ff-head) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.018em !important;
  color: #f8fafc !important;
  transition: color 0.15s ease !important;
}
.thesis-title:hover {
  color: #38bdf8 !important;
}

/* 3. CORPS DE TEXTE & MESSAGES COPILOT (INTER AVEC OPENTYPE CV02/CV11) */
body, p,
.chat-message-text,
.copilot-bubble,
.card-detail-drawer,
.thesis-meta,
.planning-text,
input, textarea, select {
  font-family: var(--ff-body) !important;
  font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1, "ss01" 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.chat-message-text,
.copilot-bubble {
  font-size: 13.8px !important;
  line-height: 1.64 !important;
  letter-spacing: -0.011em !important;
  color: #cbd5e1 !important;
}

/* 4. DONNÉES FINANCIÈRES, VACATIONS & EMPREINTES SHA-256 (CHIFFRES TABULAIRES) */
.stat-val,
.pill-val,
.kpi-card-value,
.planning-cell,
.financial-amount,
.quota-badge,
.score-badge,
.doc-hash,
code, pre,
.mono-val {
  font-family: var(--ff-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
  letter-spacing: -0.012em !important;
}

/* 5. MICRO-TYPOGRAPHIE SUISSE (PUCES, BADGES & STATUTS STATUTAIRES) */
.badge,
.algo-tag,
.task-tag,
.score-badge,
.planning-filter-chip,
.brand-badge-v,
.status-pill {
  font-family: var(--ff-head) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.022em !important;
}


/* ══════════════════════════════════════════════════════════════════
   K1 PRESTIGE DESIGN ENGINEERING UPGRADE (World-Class SaaS Standards)
   ══════════════════════════════════════════════════════════════════ */

/* 1. MASKING COMPLET DE LA BANNIÈRE AUDIT P0 & STABILITÉ DU SCROLL */
#honesty-banner,
.honesty-banner {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* 2. SÉCURITÉ KATEX & TRONCATURE DES STATS */
.katex-mathml {
  display: none !important;
}

@media (max-width: 1400px) {
  .stats-pills .pill:nth-child(3),
  .stats-pills .pill:nth-child(4) {
    display: none !important;
  }
}
@media (max-width: 1150px) {
  .stats-pills .pill:nth-child(2) {
    display: none !important;
  }
}

/* 3. SUPPORT OPTIMAL FONTAWESOME CDN (ZERO MASQUE TRANSPARENT) */
html.fa-loaded i[class*="fa-"] {
  background-color: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  width: auto !important;
  height: auto !important;
  line-height: inherit !important;
  vertical-align: middle !important;
}

/* 4. AVATARS IA & ASSISTANT ROBOT HAUTE COUTURE */
.message.assistant .avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #0ea5e9 100%) !important;
  border: 1px solid rgba(147, 197, 253, 0.35) !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.message.assistant .avatar::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  background: #10b981;
  border-radius: 50%;
  border: 2px solid #080d1a;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
}

/* 5. BARRE DE SAISIE VOCALE & ENVOI CHAT K1 */
.chat-input-bar {
  background: rgba(11, 18, 32, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  padding: 8px 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

.chat-input-bar:focus-within {
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 16px rgba(56, 189, 248, 0.2) !important;
}

.voice-btn,
#tts-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #cbd5e1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

.voice-btn:hover,
#tts-btn:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
  transform: translateY(-1px) scale(1.05) !important;
}

#send-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#send-btn:hover {
  background: linear-gradient(135deg, #3b82f6, #0ea5e9) !important;
  transform: translateY(-1px) scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.55) !important;
}

/* 6. CARTES DE THÈMES RECOMMANDÉS & SQUIRCLES STANDARD MONDIAL (Linear / Claude standard) */
.starter-container {
  margin-top: 18px !important;
}

.starter-section-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 12px !important;
}

.starter-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 900px) {
  .starter-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

.starter-card {
  position: relative !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.75) 0%, rgba(11, 18, 32, 0.85) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.starter-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.starter-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  background: linear-gradient(145deg, rgba(20, 31, 56, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 14px rgba(56, 189, 248, 0.12) !important;
}

.starter-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.starter-card-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.starter-card:hover .starter-card-icon {
  transform: scale(1.08) !important;
}

.starter-card-title {
  font-family: var(--ff-head) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  letter-spacing: -0.01em !important;
}

.starter-card-desc {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  line-height: 1.5 !important;
}

/* 7. SQUIRCLES DANS COCKPIT CHEF DMI & COPILOT HALO */
.header-icon-box,
.chefdmi-seal-icon,
.copilot-icon-halo {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.2s ease !important;
}

.header-icon-box:hover,
.copilot-icon-halo:hover {
  transform: scale(1.06) !important;
}


/* ══════════════════════════════════════════════════════════════════
   SIDEBAR FIX — DÉFILEMENT & VISIBILITÉ TOTALE DES ONGLETS
   ══════════════════════════════════════════════════════════════════ */
.sidebar {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 12px 24px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(56, 189, 248, 0.25) transparent !important;
}

.sidebar::-webkit-scrollbar {
  width: 5px !important;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.25) !important;
  border-radius: 4px !important;
}

.sidebar .nav-item {
  padding: 9.5px 12px !important;
  font-size: 13px !important;
}

.institutional-logos-badge {
  margin: 6px 4px 12px 4px !important;
  padding: 6px 10px !important;
}

/* ══════════════════════════════════════════════════════════════════
   REGROUPEMENT EXÉCUTIF SUB-NAV COCKPIT CHEF DMI
   ══════════════════════════════════════════════════════════════════ */
.chefdmi-subnav-buttons {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
}

.chefdmi-subnav-dropdown-wrapper {
  position: relative !important;
  display: inline-block !important;
}

.chefdmi-subnav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 235px;
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(56, 189, 248, 0.15);
  padding: 6px;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.chefdmi-subnav-dropdown-menu.show {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  animation: fadeInGovDropdown 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInGovDropdown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.chefdmi-subnav-dropdown-menu .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
  width: 100% !important;
}

.chefdmi-subnav-dropdown-menu .dropdown-item:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #f8fafc !important;
  transform: translateX(3px) !important;
}

.chefdmi-subnav-dropdown-menu .dropdown-item.active {
  background: rgba(56, 189, 248, 0.2) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}


/* ══════════════════════════════════════════════════════════════════
   BRAND SUBLIME GLASSMORPHISM & LUXURY DESIGN (Effet Waouh)
   ══════════════════════════════════════════════════════════════════ */
.brand-luxury {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  margin: 0 0 14px 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(8, 12, 22, 0.85));
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: visible;
}

.brand-luxury::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.08), transparent);
  transition: left 0.75s ease;
  pointer-events: none;
}

.brand-luxury:hover::before {
  left: 100%;
}

.brand-luxury:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 8px 30px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.logo-wrapper-luxury {
  width: 44px;
  height: 44px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-glow-aura {
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, rgba(56, 189, 248, 0.2) 60%, transparent 80%);
  filter: blur(8px);
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.brand-luxury:hover .logo-glow-aura {
  opacity: 1;
  transform: scale(1.1);
}

.logo-ring-bevel {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: #030712;
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 4px 14px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 2;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.brand-luxury:hover .logo-ring-bevel {
  border-color: #38bdf8;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.brand-title-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  width: 100%;
}

.brand-name-k1 {
  font-family: var(--ff-head);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.4px;
  line-height: 1.1;
  background: linear-gradient(135deg, #38bdf8 0%, #38bdf8 50%, #7dd3fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}

.brand-name-sub {
  font-family: var(--ff-head);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.1;
  color: #f8fafc;
  flex-shrink: 0;
}

.brand-badge-v-luxury {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #38bdf8;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(2, 132, 199, 0.1));
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 1.5px 6px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  line-height: 1.2;
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.v-pulse-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: vDotPulse 2s infinite ease-in-out;
}

@keyframes vDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

.brand-subtext-luxury {
  font-size: 8.5px;
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: visible;
  line-height: 1.2;
  margin-top: 1px;
}

.brand-subtext-luxury i {
  color: #fbbf24;
  font-size: 9px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   DATA WAREHOUSE & STAR SCHEMA MODAL STYLES
   ══════════════════════════════════════════════════════════════════ */
.warehouse-modal-nav .warehouse-nav-tab {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.warehouse-modal-nav .warehouse-nav-tab:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.05);
}
.warehouse-modal-nav .warehouse-nav-tab.active {
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.15);
}

.star-schema-canvas {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.star-center-fact {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.95));
  border: 2px solid rgba(56, 189, 248, 0.5);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 8px 32px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-align: center;
  position: relative;
}

.star-fact-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(56, 189, 248, 0.25);
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 20px;
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.star-fact-title {
  margin: 4px 0 12px;
  font-size: 22px;
  font-weight: 900;
  font-family: monospace;
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.star-fact-metrics {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.sf-metric-chip {
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11.5px;
  color: #e2e8f0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.star-fact-keys {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sf-key {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-family: monospace;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sf-pk {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.sf-fk {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
}

.star-dimensions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.star-dim-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.25s ease;
}

.star-dim-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.15);
}

.dim-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dim-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.dim-title {
  font-size: 13.5px;
  font-weight: 800;
  font-family: monospace;
  color: #f8fafc;
}

.dim-sub {
  font-size: 11px;
  color: #94a3b8;
}

.dim-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dim-attr {
  font-size: 11.5px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dim-attr code {
  color: #38bdf8;
  font-family: monospace;
  font-weight: 600;
}

.badge-pk {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
}

.wh-cube-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
}

.wh-cube-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.35);
}

.wh-cube-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.wh-cube-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.wh-cube-stats div strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

.wh-cube-stats div span {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
}

/* Cubes OLAP calculés à la demande */
.wh-cubes-intro {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.5;
}
.wh-cubes-intro code { color: #7dd3fc; }
.wh-cubes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.wh-cube-action {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.wh-cube-action:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.wh-cube-action.is-active { border-color: rgba(56, 189, 248, 0.7); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35), 0 4px 20px rgba(0, 0, 0, 0.35); }
.wh-cube-action .wh-cube-header i { color: #38bdf8; font-size: 20px; }
.wh-cube-action .wh-cube-header strong { display: block; color: #f8fafc; font-size: 14px; }
.wh-cube-action .wh-cube-header small { display: block; color: #94a3b8; font-size: 11px; margin-top: 2px; }
.wh-cube-action .wh-cube-stats > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wh-cube-action .wh-cube-stats strong { color: #e2e8f0; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wh-cube-action .wh-cube-stats small { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.02em; }
.wh-cube-cta {
  margin-top: 12px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: #7dd3fc;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.wh-cube-result {
  margin-top: 16px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px 16px;
}
.wh-cube-result-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
}
.wh-cube-result-head h4 { margin: 0; color: #f8fafc; font-size: 14px; }
.wh-cube-result-head p { margin: 4px 0 0; color: #94a3b8; font-size: 12px; max-width: 70ch; }
.wh-cube-result-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.wh-cube-result-tools input {
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #e2e8f0;
  padding: 6px 10px;
  font-size: 12px;
  min-width: 180px;
}
.wh-cube-export {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #6ee7b7;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.wh-cube-table-wrap { max-height: 360px; overflow: auto; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.06); }
.wh-cube-table { width: 100%; border-collapse: collapse; font-size: 12px; color: #e2e8f0; }
.wh-cube-table thead th { position: sticky; top: 0; background: #0f172a; z-index: 1; text-align: left; }
.wh-cube-table th button {
  background: none; border: 0; color: #94a3b8; font: inherit; font-weight: 700;
  padding: 8px 10px; cursor: pointer; width: 100%; text-align: inherit;
}
.wh-cube-table th.num, .wh-cube-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.wh-cube-table td { padding: 7px 10px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.wh-cube-table tbody tr:hover { background: rgba(56, 189, 248, 0.06); }

.wh-pipeline-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wh-pipeline-step {
  display: flex;
  gap: 16px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  align-items: flex-start;
  transition: all 0.25s ease;
}

.wh-pipeline-step:hover {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(56, 189, 248, 0.3);
}

.pipe-step-num {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
}

.pipe-step-content h5 {
  margin: 0 0 4px;
  font-size: 14px;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pipe-step-content p {
  margin: 0 0 8px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
}

.pipe-step-tag {
  font-size: 10.5px;
  font-family: monospace;
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 8px;
  border-radius: 6px;
}


/* Empêcher formellement le Copilot flottant de masquer les boutons de fermeture des modales */
.modal-backdrop[style*="display: flex"] ~ .chefdmi-copilot-container,
.modal-backdrop[style*="display: block"] ~ .chefdmi-copilot-container,
body:has(#warehouse-schema-modal[style*="display: flex"]) .chefdmi-copilot-container,
body:has(#graphrag-communities-modal[style*="display: flex"]) .chefdmi-copilot-container {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}


/* ══════════════════════════════════════════════════════════════════
   MASQUAGE ABSOLU DU COPILOT LORSQU'UNE MODALE EST OUVERTE
   Empêche tout chevauchement ou masquage de boutons de fermeture / actions
   ══════════════════════════════════════════════════════════════════ */
body.modal-open #chefdmi-floating-copilot,
body.modal-open .chefdmi-copilot-container,
.modal-backdrop[style*="display: flex"] ~ #chefdmi-floating-copilot,
.modal-backdrop[style*="display: block"] ~ #chefdmi-floating-copilot,
body:has(.modal-backdrop[style*="display: flex"]) #chefdmi-floating-copilot,
body:has(.modal-backdrop[style*="display: block"]) #chefdmi-floating-copilot,
body:has(#warehouse-schema-modal[style*="display: flex"]) #chefdmi-floating-copilot,
body:has(#graphrag-communities-modal[style*="display: flex"]) #chefdmi-floating-copilot,
body:has(#hotspot-modal[style*="display: flex"]) #chefdmi-floating-copilot,
body:has(#admin-login-modal[style*="display: flex"]) #chefdmi-floating-copilot,
body:has(#defense-modal[style*="display: flex"]) #chefdmi-floating-copilot {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: translateY(20px) scale(0.95) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODERNISATION UX — lot 1 (palette de commande, focus, espace du Copilot)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Accessibilité : focus clavier visible sur tous les contrôles */
:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Le bouton Copilot Chef DMI est flottant : on réserve de l'espace en bas du cockpit
   pour que la dernière rangée de contrôles (années, pagination) reste accessible. */
#chefdmi-tab.tab-pane.active {
  padding-bottom: 120px !important;
}

/* Palette de commande (Ctrl/Cmd + K) */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(9, 13, 22, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cmd-palette[hidden] { display: none; }
.cmd-palette-box {
  width: min(560px, calc(100vw - 32px));
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
#cmd-palette-input {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  color: #f8fafc;
  font-size: 15px;
  outline: none;
}
#cmd-palette-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 52vh;
  overflow-y: auto;
}
.cmd-palette-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: #e2e8f0;
}
.cmd-palette-item.is-active { background: rgba(56, 189, 248, 0.14); color: #f8fafc; }
.cmd-palette-item-label { font-weight: 600; font-size: 14px; }
.cmd-palette-item-hint { font-size: 12px; color: #94a3b8; }
.cmd-palette-empty { padding: 14px 12px; color: #94a3b8; font-size: 13px; }
.cmd-palette-hint {
  padding: 10px 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  font-size: 12px;
  color: #94a3b8;
}
.cmd-palette-hint kbd {
  font-family: var(--ff-mono, monospace);
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 4px;
  color: #cbd5e1;
}

/* ── Lot 2 : en-tête du cockpit — fil d'Ariane sur une ligne, sans empilement ── */
.breadcrumb-trail {
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.breadcrumb-trail > * {
  flex-shrink: 0;
}
.breadcrumb-trail .crumb-active {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-title {
  min-width: 0;
}

/* ── Lot 2 : pastilles flottantes empilées en bas à droite, sans recouvrir le texte ── */
.immersive-scroll-toggle-pill {
  bottom: 144px !important;  /* au-dessus de la pastille Copilot */
  right: 24px !important;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  justify-content: center;
  border-radius: 50% !important;
}
.immersive-scroll-toggle-pill span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   LOT 3 — CHAT, CATALOGUE, GRAPHE, AFFECTATION
   ══════════════════════════════════════════════════════════════════ */

/* 1. Chat : marge basse pour que la dernière réponse et ses boutons
   (copier, écouter, sources) ne soient jamais collés à la barre de saisie. */
.chat-messages {
  padding-bottom: 24px !important;
  scroll-padding-bottom: 24px;
  scroll-behavior: smooth;
}
.chat-messages .msg-content { overflow: visible; }
.chat-input-bar { position: relative; z-index: 10; flex-shrink: 0 !important; }
.cite-tooltip { max-width: min(420px, 90vw); }

/* 2. Catalogue : le volet de filtres ne doit ni écraser la recherche ni le compteur. */
.search-main { flex-shrink: 0; }
.search-collapsible-filters { margin-top: 8px; position: relative; z-index: 1; }
.search-results-section { overflow: visible; }

/* 3. Graphe : barres d'action sur une ligne propre, canvas sans barre parasite. */
.graph-toolbar-top,
.graph-toolbar-bottom { flex-wrap: wrap; row-gap: 8px; }
.graph-toolbar-top .btn-fullscreen-toggle,
.graph-toolbar-bottom button { white-space: nowrap; }
.graph-canvas-wrapper,
.graph-stage { overflow: hidden !important; }
.graph-stage .vis-network,
.graph-stage canvas { max-width: 100%; }
/* Widget Copilot Graphe : replié, il ne masque jamais les contrôles du canvas. */
.graph-copilot-floating { z-index: 20; }
.graph-copilot-floating.collapsed { width: auto; }

/* Modales GraphRAG / Chercheur : centrées, hauteur bornée, défilement interne. */
#graphrag-communities-modal .modal-box,
#researcher-modal .modal-box,
.modal-backdrop .modal-box {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#graphrag-communities-modal .modal-body,
#graphrag-communities-modal-body {
  max-height: calc(85vh - 96px) !important;
  overflow-y: auto !important;
}

/* 4. Affectation : deux colonnes équilibrées sur grand écran, pile propre sur tablette. */
.advisor-layout-grid {
  grid-template-columns: minmax(330px, 2fr) minmax(0, 3fr) !important;
  gap: 20px;
}
.advisor-left-col,
.advisor-right-col { min-width: 0; }
.advisor-form-fields select,
.advisor-form-fields input,
.advisor-form-fields textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.advisor-form-fields > div:has(> .advisor-field) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
}
/* Cartes directeur : aucun texte tronqué. */
.advisor-match-card,
.advisor-match-card * {
  text-overflow: clip !important;
  overflow: visible;
}
.advisor-match-card { min-width: 0; }
.advisor-match-card p,
.advisor-match-card span,
.advisor-match-card div { white-space: normal; }

@media (max-width: 1080px) {
  .advisor-layout-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    overflow: visible !important;
  }
  .advisor-left-col { overflow: visible; height: auto; }
  .advisor-right-col { min-height: 360px; }
}
/* Widget Copilot Graphe replié : seul l'en-tête reste visible (le contenu est masqué). */
.graph-copilot-floating.collapsed .copilot-content-collapsible { display: none !important; }
.graph-copilot-floating.collapsed { width: auto; max-width: 280px; min-width: 210px; }
.graph-copilot-floating.collapsed { min-width: 240px; }
.graph-copilot-floating.collapsed .copilot-title,
.graph-copilot-floating.collapsed .copilot-title-text,
.graph-copilot-floating.collapsed .copilot-title-text * { white-space: nowrap; }
.graph-toolbar-bottom .graph-layout-label,
.graph-toolbar-bottom span { white-space: nowrap; }

/* ── LOT 4 : squelettes de chargement (ardoise, shimmer doux) ─────── */
@keyframes skeleton-shimmer {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
.skeleton {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.55) 0%, rgba(51, 65, 85, 0.6) 50%, rgba(30, 41, 59, 0.55) 100%);
  background-size: 240% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
.skeleton-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px; min-height: 176px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
}
.sk-row { display: flex; gap: 8px; align-items: center; }
.sk-pill { width: 96px; height: 20px; border-radius: 999px; }
.sk-pill.short { width: 64px; }
.sk-chip { width: 120px; height: 22px; border-radius: 999px; }
.sk-line { height: 12px; }
.sk-line.title { height: 18px; width: 88%; }
.sk-line.w-70 { width: 70%; }
.sk-line.w-60 { width: 60%; }
.sk-line.w-90 { width: 90%; }
.sk-btns { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sk-btns .skeleton { height: 32px; border-radius: 8px; }

.advisor-skeleton-stack {
  width: min(640px, 100%);
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 8px;
}
.skeleton-advisor {
  display: flex; gap: 16px; align-items: center;
  padding: 16px 18px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
}
.sk-gauge { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; }
.sk-advisor-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.sk-advisor-body .sk-row { flex-wrap: wrap; }

/* KPI du cockpit pendant le chargement : valeur remplacée par une pastille pulsante */
.kpi-skeleton {
  display: inline-block !important;
  min-width: 96px; min-height: 1em;
  color: transparent !important;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.55) 0%, rgba(51, 65, 85, 0.6) 50%, rgba(30, 41, 59, 0.55) 100%);
  background-size: 240% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
.skeleton-row td { padding: 12px 10px; }
.skeleton-row td .skeleton { height: 14px; border-radius: 6px; }

/* Formules KaTeX : jamais de débordement hors de la bulle ou de la carte */
.katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.msg-content .katex-display,
.results-grid .katex-display { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .skeleton, .kpi-skeleton { animation: none; }
}


/* ── Cockpit Chef DMI : composants sobres (ardoise, émeraude, ambre, bleu ardoise) ── */
.cdmi-radar,
.cdmi-card {
    background: #111827;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #e2e8f0;
}
.cdmi-radar { margin: 0 0 14px; }
.cdmi-radar-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; cursor: pointer; list-style: none; flex-wrap: wrap;
}
.cdmi-radar-summary::-webkit-details-marker { display: none; }
.cdmi-radar-title { font-size: 13px; font-weight: 700; color: #f8fafc; }
.cdmi-radar-body { padding: 0 14px 12px; border-top: 1px solid #1e293b; }
.cdmi-tools-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px; margin-bottom: 16px;
}
.cdmi-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.cdmi-card-head h3 { margin: 0 0 2px; font-size: 14px; color: #f8fafc; }
.cdmi-card-foot { display: flex; justify-content: flex-end; }
.cdmi-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.cdmi-form-grid > * { min-width: 0; }
.cdmi-form-grid select, .cdmi-form-grid input { width: 100%; min-width: 0; box-sizing: border-box; }

/* ── Périmètre des métriques (session filtrée vs entrepôt global) ── */
.chefdmi-scope-caption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.25);
  font-size: 12px; color: #cbd5e1;
}
.chefdmi-scope-kind {
  font-weight: 700; color: #93c5fd; text-transform: uppercase; letter-spacing: 0.4px; font-size: 10.5px;
}
.chefdmi-scope-text { min-width: 0; overflow-wrap: anywhere; }

/* ── État vide explicite (session sans PV scellé) ── */
.chefdmi-session-empty {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 14px 16px; border-radius: 12px;
  background: #0b1220; border: 1px dashed rgba(148, 163, 184, 0.35);
  color: #94a3b8; font-size: 12.5px;
}
.chefdmi-session-empty[hidden] { display: none; }

.chefdmi-access-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  color: #fde68a;
  font-size: 12.5px;
  line-height: 1.45;
}
.chefdmi-access-banner[hidden],
.chefdmi-scope-note[hidden],
#fin-chip-active[hidden] { display: none; }
.chefdmi-access-text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chefdmi-access-text strong { color: #fef3c7; font-size: 13px; }

.chefdmi-scope-note {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.4;
}
.chefdmi-session-empty strong { color: #e2e8f0; font-size: 13px; }
.chefdmi-session-empty span { flex: 1 1 280px; min-width: 0; }

/* ── Saisie manuelle hors liste (Studio Actes & PV) ── */
.chefdmi-manual-entry input { width: 100%; box-sizing: border-box; }
.chefdmi-manual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 12px; margin-top: 10px; }
.chefdmi-manual-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: #94a3b8; min-width: 0; }
.chefdmi-manual-grid input { width: 100%; box-sizing: border-box; }

.cdmi-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: #94a3b8; }
.cdmi-form-grid input,
.cdmi-form-grid select {
    background: #0b0f19; border: 1px solid #334155; border-radius: 6px;
    color: #e2e8f0; padding: 6px 8px; font-size: 12px;
}
.cdmi-muted { color: #94a3b8; font-size: 12px; }
.cdmi-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #e2e8f0; }
.cdmi-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cdmi-pill {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.cdmi-sev-red   { color: #fca5a5; background: #7f1d1d26; border-color: #7f1d1d80; }
.cdmi-sev-amber { color: #fcd34d; background: #451a0326; border-color: #92400e80; }
.cdmi-sev-green { color: #6ee7b7; background: #064e3b26; border-color: #06503380; }
.cdmi-sev-grey  { color: #94a3b8; background: #1e293b;     border-color: #33415580; }
.cdmi-alerts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cdmi-alert { font-size: 12px; line-height: 1.4; }
.cdmi-alert-detail { margin-top: 2px; padding-left: 2px; }
.cdmi-alerts-more summary { cursor: pointer; font-size: 12px; color: #94a3b8; margin-top: 8px; }
.cdmi-result { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.cdmi-issues { margin: 0; padding-left: 18px; color: #fcd34d; font-size: 12px; }
.cdmi-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 12px; }
.cdmi-kv dt { color: #94a3b8; }
.cdmi-kv dd { margin: 0; color: #e2e8f0; }
.cdmi-btn-primary {
    background: #2563eb; color: #f8fafc; border: 1px solid #1d4ed8;
    border-radius: 7px; padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.cdmi-btn-primary:hover { background: #1d4ed8; }
@media (max-width: 640px) { .cdmi-form-grid { grid-template-columns: 1fr; } }

/* ── Pastilles d'identité (couleur de série à côté d'un texte neutre) ── */
.k1-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.k1-swatch-info { background: #3987e5; }
.k1-swatch-math { background: #d95926; }
.k1-badge-neutral { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; font-variant-numeric: tabular-nums; }

.k1-delta { font-variant-numeric: tabular-nums; color: #cbd5e1; }
.k1-delta.up::before { content: "▲ "; color: #34d399; }
.k1-delta.down::before { content: "▼ "; color: #f87171; }

/* ── Infobulle des graphiques ── */
.k1-chart-tip {
    position: absolute; z-index: 5; pointer-events: none;
    display: flex; flex-direction: column; gap: 1px; min-width: 120px;
    padding: 7px 10px; border-radius: 8px; background: #0b1220; border: 1px solid #334155;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); font-size: 12px; color: #e2e8f0;
}
.k1-chart-tip[hidden] { display: none; }
.k1-chart-tip strong { font-size: 12.5px; color: #f8fafc; }
.k1-chart-tip-delta { color: #94a3b8; font-size: 11.5px; }
.k1-chart-tip-delta.up::before { content: "▲ "; color: #34d399; }
.k1-chart-tip-delta.down::before { content: "▼ "; color: #f87171; }
.chefdmi-curve-hit { cursor: crosshair; outline: none; }
.chefdmi-curve-hit:focus-visible { stroke: #38bdf8; stroke-width: 1; }

/* ── À traiter aujourd'hui & parcours de la session ── */
.cdmi-today {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px;
    margin: 0 0 14px;
}
.cdmi-today[hidden] { display: none; }
.cdmi-today-main, .cdmi-journey {
    background: #111827; border: 1px solid #334155; border-radius: 10px; padding: 14px 16px; min-width: 0;
}
.cdmi-today-head, .cdmi-journey-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.cdmi-today-head h3, .cdmi-journey-head h4 { margin: 0; font-size: 14px; font-weight: 700; color: #f8fafc; }
.cdmi-today-head h3 i { color: #38bdf8; margin-right: 6px; }
.cdmi-today-date { font-size: 12px; color: #94a3b8; text-transform: capitalize; }
.cdmi-today-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cdmi-today-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: 8px; background: #0f172a; border: 1px solid #1e293b;
    border-left: 3px solid #475569;
}
.cdmi-today-red { border-left-color: #ef4444; }
.cdmi-today-amber { border-left-color: #f59e0b; }
.cdmi-today-green { border-left-color: #10b981; }
.cdmi-today-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cdmi-today-text strong { font-size: 13px; color: #f1f5f9; }
.cdmi-today-text span { font-size: 12px; color: #94a3b8; line-height: 1.4; overflow-wrap: anywhere; }
.cdmi-btn-secondary {
    background: transparent; color: #93c5fd; border: 1px solid #1e40af;
    border-radius: 7px; padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.cdmi-btn-secondary:hover { background: #1e3a8a33; }
.cdmi-today-item .cdmi-btn-primary { white-space: nowrap; }
.cdmi-btn-link {
    background: none; border: 0; padding: 0; margin-top: 4px; color: #7dd3fc;
    font-size: 12px; font-weight: 600; cursor: pointer; text-align: left;
}
.cdmi-btn-link:hover { text-decoration: underline; }
.cdmi-btn-primary:focus-visible, .cdmi-btn-secondary:focus-visible, .cdmi-btn-link:focus-visible {
    outline: 2px solid #38bdf8; outline-offset: 2px;
}
.cdmi-journey-pct { font-size: 12px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.cdmi-journey-bar { height: 6px; border-radius: 999px; background: #1e293b; overflow: hidden; margin-bottom: 12px; }
.cdmi-journey-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2563eb, #10b981); transition: width .4s ease; }
.cdmi-journey-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.cdmi-step { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.cdmi-step-index {
    flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: 11px; font-weight: 700; background: #1e293b; color: #94a3b8; border: 1px solid #334155;
}
.cdmi-step-termine .cdmi-step-index { background: #064e3b; color: #6ee7b7; border-color: #047857; }
.cdmi-step-en_cours .cdmi-step-index { background: #451a03; color: #fcd34d; border-color: #92400e; }
.cdmi-step-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cdmi-step-label { font-size: 12.5px; font-weight: 700; color: #e2e8f0; }
.cdmi-step-count { font-size: 11.5px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.cdmi-step-termine .cdmi-step-count i { color: #34d399; }
.cdmi-step-en_cours .cdmi-step-count i { color: #fbbf24; }
.cdmi-step-detail { font-size: 11.5px; color: #64748b; line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .cdmi-today { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .cdmi-journey-steps { grid-template-columns: 1fr; }
    .cdmi-today-item { flex-direction: column; align-items: stretch; }
    .cdmi-today-item .cdmi-btn-primary, .cdmi-today-item .cdmi-btn-secondary { align-self: flex-start; }
}

/* ── Tiroir d'inspection (Graphe) — palette ardoise/navy, sobre ── */
.gdrawer {
    position: fixed; top: 0; right: 0; height: 100vh;
    width: min(400px, 92vw);
    background: #111827; color: #cbd5e1;
    border-left: 1px solid #334155;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
    transform: translateX(100%); transition: transform 0.2s ease;
    display: flex; flex-direction: column; z-index: 1200;
}
.gdrawer.is-open { transform: translateX(0); }
.gdrawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #334155; }
.gdrawer-head h3 { margin: 0; font-size: 0.95rem; color: #f8fafc; font-weight: 600; }
.gdrawer-close { background: none; border: 1px solid #334155; color: #94a3b8; border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.gdrawer-close:hover { color: #f8fafc; border-color: #475569; }
.gdrawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; font-size: 0.88rem; }
.gdrawer-foot { padding: 14px 20px; border-top: 1px solid #334155; }
.gdrawer-title { color: #f8fafc; font-size: 1rem; margin: 10px 0 12px; line-height: 1.35; }
.gdrawer-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.gdrawer-pill { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid #334155; color: #94a3b8; }
.gdrawer-pill-accent { color: #cbd5e1; border-color: #2563eb; }
.gdrawer-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 12px 0; }
.gdrawer-kv dt { color: #94a3b8; }
.gdrawer-kv dd { margin: 0; color: #f8fafc; }
.gdrawer-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid #1e293b; }
.gdrawer-section h5 { margin: 0 0 8px; color: #94a3b8; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.gdrawer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.gdrawer-muted { color: #94a3b8; }
.gdrawer-error { color: #d97706; }
.gdrawer-loading { color: #94a3b8; }
.gdrawer-primary { width: 100%; background: #2563eb; color: #f8fafc; border: none; border-radius: 6px; padding: 10px 14px; cursor: pointer; font-weight: 600; }
.gdrawer-primary:hover { background: #1d4ed8; }

/* ── Catalogue : suggestions repliées ── */
.search-suggestions { margin: 8px 0; }
.search-suggestions > summary { cursor: pointer; color: #94a3b8; font-size: 0.85rem; padding: 4px 0; list-style: none; }
.search-suggestions > summary::before { content: "▸ "; }
.search-suggestions[open] > summary::before { content: "▾ "; }
.search-suggestions-body { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }

/* ── Fiche récapitulative d'ingestion — sobre, ardoise/navy ── */
.ingest-sheet { background: #111827; border: 1px solid #334155; border-radius: 8px; padding: 18px 20px; color: #cbd5e1; }
.ingest-sheet-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 1px solid #1e293b; padding-bottom: 12px; }
.ingest-sheet-kicker { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; }
.ingest-sheet-title { margin: 4px 0 0; color: #f8fafc; font-size: 1rem; line-height: 1.35; }
.ingest-sheet-status { font-size: 0.78rem; padding: 4px 10px; border-radius: 999px; border: 1px solid #334155; white-space: nowrap; }
.ingest-sheet-status.is-ok { color: #34d399; border-color: #059669; }
.ingest-sheet-status.is-warn { color: #fbbf24; border-color: #d97706; }
.ingest-sheet-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 14px 0; font-size: 0.86rem; }
.ingest-sheet-grid dt { color: #94a3b8; }
.ingest-sheet-grid dd { margin: 0; color: #f8fafc; min-width: 0; overflow-wrap: anywhere; }
.ingest-sheet-hash { font-size: 0.75rem; }
.ingest-sheet-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ingest-sheet-primary { background: #2563eb; color: #f8fafc; border: none; border-radius: 6px; padding: 9px 14px; font-weight: 600; cursor: pointer; }
.ingest-sheet-primary:hover { background: #1d4ed8; }
.ingest-sheet-secondary { background: transparent; color: #cbd5e1; border: 1px solid #334155; border-radius: 6px; padding: 9px 14px; cursor: pointer; }
.ingest-sheet-secondary:hover { border-color: #475569; color: #f8fafc; }


/* ═════════════════════════════════════════════════
   ERGONOMIE COCKPIT CHEF DMI — Gouvernance & Graphe
   Surcharges finales : le menu des sous-vues ne doit
   pas être rogné ; bouton principal + chevron distinct ;
   sélecteur de disposition compact du graphe.
   ═════════════════════════════════════════════════ */
.chefdmi-subnav-bar {
  overflow: visible !important;
}

.chefdmi-subnav-buttons {
  overflow: visible !important;
  flex-wrap: wrap !important;
}

.chefdmi-subnav-dropdown-wrapper {
  display: inline-flex !important;
  align-items: stretch !important;
}

.chefdmi-subnav-dropdown-menu {
  z-index: 1050 !important;
}

.graph-layout-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  background: #111827;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 12px;
}

.graph-layout-select {
  background: transparent;
  border: none;
  outline: none;
  color: #cbd5e1;
  font: inherit;
  cursor: pointer;
}

.graph-layout-select option {
  background: #111827;
  color: #f8fafc;
}

/* ═════════════════════════════════════════════════
   BORDEREAU FINANCIER — PILOTAGE & AIDE À LA DÉCISION
   Charte sobre (ardoise / navy), chiffres monospace alignés.
   ═════════════════════════════════════════════════ */
.cdmi-fin-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.cdmi-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: #0f172a;
  color: #94a3b8;
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.cdmi-cert-badge i {
  color: #10b981;
}

.cdmi-btn-export-pdf {
  border-color: #334155 !important;
}

.cdmi-decision {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.cdmi-decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}

.cdmi-panel {
  background: #111827;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cdmi-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cdmi-mono {
  font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-variant-numeric: tabular-nums;
  color: #f8fafc;
}

.cdmi-gauge-track,
.cdmi-stack-track {
  display: flex;
  height: 14px;
  background: #0b0f19;
  border: 1px solid #334155;
  border-radius: 4px;
  overflow: hidden;
}

.cdmi-gauge-fill {
  height: 100%;
  background: #0284c7;
  transition: width 0.4s ease;
}

.cdmi-stack-enc {
  height: 100%;
  background: #0284c7;
  transition: width 0.4s ease;
}

.cdmi-stack-jury {
  height: 100%;
  background: #6366f1;
  transition: width 0.4s ease;
}

.cdmi-legend-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #94a3b8;
  font-size: 11.5px;
}

.cdmi-legend-row b {
  color: #f8fafc;
  margin-left: 4px;
}

.cdmi-sw {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}

.cdmi-sw-engaged,
.cdmi-sw-enc {
  background: #0284c7;
}

.cdmi-sw-jury {
  background: #6366f1;
}

.cdmi-sw-reserve {
  background: #334155;
  border: 1px solid #475569;
}

.cdmi-note {
  margin: 0;
  color: #94a3b8;
  font-size: 11.5px;
  line-height: 1.5;
}

.cdmi-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}

.cdmi-kpi {
  background: #111827;
  border: 1px solid #334155;
  border-left: 3px solid var(--kpi-accent, #334155);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cdmi-kpi-lbl {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cdmi-kpi-val {
  font-size: 18px;
  font-weight: 700;
}

.cdmi-kpi-sub {
  color: #94a3b8;
  font-size: 10.5px;
  line-height: 1.4;
}

/* ═════════════════════════════════════════════════
   FICHE DE RAYONNEMENT SCIENTIFIQUE (onglet Graphe)
   Palette ardoise / marine, sans dégradé ; chiffres monospace.
   ═════════════════════════════════════════════════ */
.dsm-header {
  background: #0f172a !important;
  border-bottom: 1px solid #334155 !important;
  flex-wrap: wrap;
  gap: 10px;
}

.dsm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 9px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: #1e293b;
  color: #cbd5e1;
  font-size: 11px;
}

.dsm-badge i {
  color: #94a3b8;
}

.dsm-loading {
  text-align: center;
  padding: 40px;
  color: #94a3b8;
}

.dsm-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: #94a3b8;
  font-size: 12px;
  margin-bottom: 16px;
}

.dsm-meta strong {
  color: #f8fafc;
  font-family: var(--ff-mono, ui-monospace, monospace);
}

.dsm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.dsm-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dsm-card-lbl {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.35;
}

.dsm-card-val {
  color: #f8fafc;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
}

.dsm-card-sub {
  color: #94a3b8;
  font-size: 10.5px;
  line-height: 1.4;
}

.dsm-section {
  margin-bottom: 22px;
}

.dsm-h {
  color: #f8fafc;
  font-size: 14px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #334155;
}

.dsm-table-wrap {
  border: 1px solid #334155;
  border-radius: 8px;
  overflow: hidden;
}

.dsm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  color: #cbd5e1;
}

.dsm-table th {
  background: #1e293b;
  color: #94a3b8;
  font-weight: 600;
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid #334155;
}

.dsm-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.6);
}

.dsm-row-alt {
  background: rgba(30, 41, 59, 0.45);
}

.dsm-num {
  text-align: right !important;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}

.dsm-strong {
  color: #f8fafc;
  font-weight: 600;
}

.dsm-score {
  color: #f8fafc;
  font-weight: 700;
}

.dsm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dsm-chip {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 7px 11px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: #cbd5e1;
}

.dsm-chip span {
  color: #94a3b8;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 11px;
}

.dsm-lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.dsm-lab {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px;
}

.dsm-lab-code {
  color: #f8fafc;
  font-weight: 700;
  font-size: 14px;
}

.dsm-lab-name {
  color: #94a3b8;
  font-size: 11.5px;
  margin: 2px 0 10px;
  line-height: 1.35;
}

.dsm-lab dl {
  margin: 0;
  display: grid;
  gap: 4px;
}

.dsm-lab dl > div {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.dsm-lab dt {
  color: #94a3b8;
}

.dsm-lab dd {
  margin: 0;
  color: #f8fafc;
  font-family: var(--ff-mono, ui-monospace, monospace);
}

.dsm-empty {
  color: #94a3b8;
  font-size: 12.5px;
  border: 1px dashed #334155;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0;
}

.dsm-foot {
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
  border-top: 1px solid #334155;
  padding-top: 12px;
}

@media print {
  body * {
    visibility: hidden !important;
  }
  #defense-summary-modal,
  #defense-summary-modal * {
    visibility: visible !important;
  }
  #defense-summary-modal {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background: #ffffff !important;
    padding: 0 !important;
  }
  #defense-summary-modal .modal-box {
    max-width: none !important;
    width: 100% !important;
    max-height: none !important;
    box-shadow: none !important;
    border: none !important;
    background: #ffffff !important;
    color: #0f172a !important;
  }
  #defense-summary-modal #defense-modal-content {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  #defense-summary-modal .dsm-noprint,
  #defense-summary-modal .modal-close-btn {
    display: none !important;
  }
  #defense-summary-modal .dsm-header,
  #defense-summary-modal .dsm-card,
  #defense-summary-modal .dsm-chip,
  #defense-summary-modal .dsm-lab,
  #defense-summary-modal .dsm-empty,
  #defense-summary-modal .dsm-badge {
    background: #ffffff !important;
    border-color: #94a3b8 !important;
  }
  #defense-summary-modal .dsm-card-val,
  #defense-summary-modal .dsm-h,
  #defense-summary-modal .dsm-strong,
  #defense-summary-modal .dsm-lab-code,
  #defense-summary-modal .dsm-table td {
    color: #0f172a !important;
  }
  #defense-summary-modal .dsm-table th,
  #defense-summary-modal .dsm-card-lbl,
  #defense-summary-modal .dsm-card-sub,
  #defense-summary-modal .dsm-meta,
  #defense-summary-modal .dsm-foot {
    color: #475569 !important;
  }
  #defense-summary-modal .dsm-row-alt {
    background: #f1f5f9 !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SPRINT UI/UX — tokens d'alias, saisie, recherche, cockpit, copie
   ═════════════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces élevées (alias des fonds existants --bg-*) */
  --surface-1: #0c1424;
  --surface-2: #111b2f;
  --surface-3: #17243c;
  --border-subtle: rgba(255, 255, 255, 0.08);
  /* Couleurs de marque */
  --primary: #3b82f6;
  --accent: #10b981;
  /* Mouvement : 200–300 ms, courbe cubic-bezier standard */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
}

/* Transitions douces sur les contrôles interactifs (200–300 ms) */
.btn-export,
.btn-primary,
.btn-secondary-glow,
.quick-btn,
.cite-copy-btn {
  transition: background-color var(--dur-fast) var(--ease-smooth),
              border-color var(--dur-fast) var(--ease-smooth),
              color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-fast) var(--ease-smooth);
}

/* ── Chat : zone de saisie multiligne (150 px max) ── */
.chat-input-bar textarea.chat-input-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--text);
  font-size: 13.5px;
  font-family: var(--ff-body);
  letter-spacing: -0.012em;
  line-height: 1.45;
  max-height: 150px;
  min-height: 24px;
  padding: 6px 0;
  overflow-y: hidden;
}
.chat-input-bar textarea.chat-input-field::placeholder { color: var(--text-dim); }

/* ── Recherche : bouton d'effacement ── */
.search-clear-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-dim, #94a3b8);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color var(--dur-fast) var(--ease-smooth), background-color var(--dur-fast) var(--ease-smooth);
}
.search-clear-btn:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.06); }
.search-clear-btn[hidden] { display: none; }

/* ── Recherche : affichage grille (2 colonnes) ── */
#search-results-container.results-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
}

/* ── Cockpit : en-têtes triables ── */
.chefdmi-table th.sortable-th {
  cursor: pointer;
  user-select: none;
  transition: color var(--dur-fast) var(--ease-smooth);
}
.chefdmi-table th.sortable-th:hover,
.chefdmi-table th.sortable-th:focus-visible { color: #e2e8f0; outline: none; }
.chefdmi-table th.sortable-th .sort-ico { opacity: 0.45; margin-left: 4px; font-size: 10px; }
.chefdmi-table th.sortable-th[aria-sort="ascending"] .sort-ico,
.chefdmi-table th.sortable-th[aria-sort="descending"] .sort-ico { opacity: 1; color: #38bdf8; }

/* ── Cockpit : soutenance annulée (atténuée, badge neutre) ── */
.chefdmi-table tr.row-cancelled td { opacity: 0.55; }
.status-badge-cancelled {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.35);
  vertical-align: middle;
}

/* ── Badges laboratoires : couleur par laboratoire ── */
.lab-badge[data-lab*="LARI" i]  { color: #60a5fa; background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.4); }
.lab-badge[data-lab*="LAMAP" i] { color: #34d399; background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.4); }
.lab-badge[data-lab*="LAMEX" i] { color: #fbbf24; background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.4); }
.lab-badge[data-lab*="LASE" i]  { color: #c4b5fd; background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.4); }

/* ── Bouton copier (référence de citation) : coche verte temporaire ── */
.cite-copy-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  cursor: pointer;
}
.cite-copy-btn:hover { border-color: rgba(59, 130, 246, 0.5); color: #e2e8f0; }
.cite-copy-btn.is-copied,
.is-copied {
  color: var(--accent, #10b981) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
}

/* ── Respect de la préférence « réduire les animations » ── */
@media (prefers-reduced-motion: reduce) {
  .btn-export, .btn-primary, .btn-secondary-glow, .quick-btn, .cite-copy-btn,
  .search-clear-btn, .chefdmi-table th.sortable-th {
    transition: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SPRINT UNIFIÉ — Wizard Conseiller (3 étapes) et confirmation admin
   ═════════════════════════════════════════════════════════════════════ */
#advisor-initial-state { display: none !important; }  /* remplacé par le wizard */

.advisor-wizard {
  background: var(--surface-2, #111b2f);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.wizard-title { margin: 0; font-size: 16px; color: #f1f5f9; display: flex; gap: 8px; align-items: center; }
.wizard-sub, .wizard-hint { font-size: 12px; color: #94a3b8; margin: 4px 0 10px; }

.wizard-stepper {
  list-style: none; padding: 0; margin: 14px 0 16px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.wizard-step {
  display: flex; align-items: center; gap: 8px; flex: 1 1 200px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #64748b; font-size: 12.5px;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.wizard-badge {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; background: rgba(255, 255, 255, 0.06); color: #94a3b8;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.wizard-step.is-active { color: #e2e8f0; border-color: rgba(59, 130, 246, 0.6); background: rgba(59, 130, 246, 0.08); }
.wizard-step.is-active .wizard-badge { background: var(--primary, #3b82f6); color: #fff; }
.wizard-step.is-done { color: #a7f3d0; border-color: rgba(16, 185, 129, 0.45); }
.wizard-step.is-done .wizard-badge { background: var(--accent, #10b981); color: #fff; }

.wizard-body { min-height: 180px; }
.wizard-error { color: #fca5a5; font-size: 12.5px; }
.wizard-warn { display: block; font-size: 11.5px; color: #fcd34d; margin-top: 6px; }

.wizard-lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.wizard-lab-card {
  text-align: left; display: flex; flex-direction: column; gap: 4px;
  padding: 12px; border-radius: 12px; cursor: pointer;
  background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); color: #cbd5e1;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.wizard-lab-card:hover { border-color: rgba(59, 130, 246, 0.45); transform: translateY(-1px); }
.wizard-lab-card.is-selected { border-color: var(--primary, #3b82f6); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); }
.wizard-lab-name { font-size: 12.5px; color: #f1f5f9; }
.wizard-lab-pole, .wizard-lab-director { font-size: 11.5px; color: #94a3b8; }

.wizard-cloud { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.wizard-chip {
  border-radius: 999px; padding: 4px 11px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: #cbd5e1;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.wizard-chip:hover { border-color: rgba(59, 130, 246, 0.5); }
.wizard-chip.is-selected { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.55); color: #a7f3d0; }
.wizard-refine, .wizard-degree { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-size: 12px; color: #94a3b8; }
.wizard-refine input, .wizard-degree select {
  background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px; padding: 8px 10px; color: #e2e8f0; font-size: 13px;
}
.wizard-selected { font-size: 12.5px; color: #cbd5e1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.wizard-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.wizard-rec-card {
  background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.wizard-rec-card.is-chosen-lab { border-color: rgba(59, 130, 246, 0.45); }
.wizard-rec-card header { display: flex; flex-direction: column; gap: 2px; }
.wizard-rec-name { color: #f8fafc; font-size: 13.5px; }
.wizard-gauge { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.wizard-gauge span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--primary, #3b82f6);
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.wizard-quota { font-size: 11.5px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); color: #cbd5e1; }
.wizard-quota.gauge-disponible { border-color: rgba(16, 185, 129, 0.45); color: #a7f3d0; }
.wizard-quota.gauge-proche { border-color: rgba(245, 158, 11, 0.5); color: #fcd34d; }
.wizard-quota.gauge-sature { border-color: rgba(239, 68, 68, 0.5); color: #fca5a5; }
.wizard-quota.gauge-non_verifie { border-color: rgba(156, 163, 175, 0.45); color: #9ca3af; }
.wizard-works-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b; margin-top: 4px; }
.wizard-works { margin: 0; padding-left: 16px; font-size: 12px; color: #cbd5e1; display: flex; flex-direction: column; gap: 4px; }
.wizard-cite { color: #38bdf8; background: rgba(56, 189, 248, 0.12); padding: 1px 5px; border-radius: 4px; font-size: 11px; }

.wizard-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.wizard-nav button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Modale de confirmation admin ── */
.admin-confirm-box { border-color: rgba(239, 68, 68, 0.35); }
.admin-confirm-title { margin: 0 0 10px; color: #f8fafc; font-size: 16px; display: flex; gap: 8px; align-items: center; }
.admin-confirm-warning {
  font-size: 12.5px; color: #fecaca; background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
.admin-confirm-target { font-size: 12px; color: #94a3b8; margin-bottom: 10px; font-family: var(--ff-mono, monospace); }
.admin-confirm-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; color: #94a3b8; }
.admin-confirm-field input, .admin-confirm-field textarea {
  background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px; padding: 9px 11px; color: #e2e8f0; font-size: 13px; font-family: inherit;
}
.admin-confirm-field input:focus, .admin-confirm-field textarea:focus { outline: none; border-color: rgba(239, 68, 68, 0.6); }
.admin-confirm-error { color: #fca5a5; font-size: 12px; background: rgba(239, 68, 68, 0.1); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.admin-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.admin-confirm-submit { background: #dc2626 !important; border-color: #dc2626 !important; }
.admin-confirm-submit:disabled { opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
  .wizard-step, .wizard-badge, .wizard-lab-card, .wizard-chip, .wizard-rec-card, .wizard-gauge span { transition: none !important; }
}

/* Points de statut animés : animation désactivée (et non seulement raccourcie) si l'utilisateur réduit les mouvements */
@media (prefers-reduced-motion: reduce) {
  .status-indicator, .live-dot, .copilot-pulse-dot, .v-pulse-dot {
    animation: none !important;
  }
}

/* ── Analytique Chef DMI dynamique (donuts SVG, courbe 2010–2026) ─────────────── */
.analytics-chart-flex {
    background: var(--surface-2, #111b2f);
}
.analytics-scope-note {
    line-height: 1.5;
}
.chefdmi-donut-svg {
    display: block;
    margin: 0 auto;
    background: transparent;
}
.chefdmi-donut-seg {
    transition: stroke-width 0.2s ease;
}
.chefdmi-donut-seg:hover {
    stroke-width: 26;
}
.chefdmi-curve-point {
    cursor: default;
}
.lab-legend-row {
    font-size: 11.5px;
    color: #cbd5e1;
}

/* ── Menus « Exporter ▾ » (Word / PDF) ── */
.export-menu-wrap {
  position: relative;
  display: inline-flex;
}

.export-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: #111b2f;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  z-index: 1050;
}

.export-menu.show {
  display: flex;
}

.export-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.export-menu button:hover,
.export-menu button:focus-visible {
  background: rgba(59, 130, 246, 0.15);
  outline: none;
}

/* ── Copilote : actions contextuelles ── */
.copilot-chip-hidden {
  display: none !important;
}

.copilot-more-chip {
  align-self: center;
  padding: 5px 12px;
  background: transparent;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  border-radius: 999px;
  color: #94a3b8;
  font-size: 11.5px;
  cursor: pointer;
}

.copilot-more-chip:hover,
.copilot-more-chip:focus-visible {
  color: #e2e8f0;
  border-color: #3b82f6;
  outline: none;
}

/* ── Bordereau financier : filtres, recherche, audit repliable ── */
.fin-ledger-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.fin-seg-pills {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  flex-wrap: wrap;
}

.fin-seg-pill {
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.fin-seg-pill[aria-pressed="true"] {
  background: #3b82f6;
  color: #fff;
}

.fin-seg-pill:focus-visible,
.fin-ledger-search:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.fin-ledger-search {
  flex: 1;
  min-width: 240px;
  max-width: 380px;
  padding: 8px 12px;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 12.5px;
}

/* 4 cartes : passage direct de 4 à 2 colonnes, pour ne jamais laisser une carte seule sur sa ligne. */
@media (min-width: 721px) and (max-width: 1299px) {
  .chefdmi-kpis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 721px) and (max-width: 1439px) {
  .financial-cards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  .fin-seg-pills {
    flex: 1 1 100%;
    border-radius: 14px;
  }

  .fin-ledger-search {
    flex: 1 1 260px;
    max-width: none;
  }
}

.export-menu.wide {
  min-width: 300px;
}

.warehouse-year-select {
  min-width: 260px;
  padding: 7px 12px;
  background: #111b2f;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 12.5px;
}

.fin-ledger-count {
  margin-left: auto;
  font-size: 11.5px;
  color: #94a3b8;
}

.fin-audit-box {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid #334155;
  border-left: 3px solid #d97706;
  border-radius: 6px;
  background: #1e293b;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.5;

  font-weight: 600;
  cursor: pointer;
}

.warehouse-year-select:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   VOLET DE PROFIL ADMINISTRATEUR : 3 CARTES (IDENTITÉ · SÉCURITÉ · ACTIONS)
   ══════════════════════════════════════════════════════════════════ */
.admin-profile {
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  font-family: var(--ff-body);
  color: #f8fafc;
  overflow-wrap: anywhere;
}
#admin-login-modal .modal-body { overflow-y: auto; min-height: 0; }
.ap-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
}
.ap-card-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ap-muted { font-size: 12px; line-height: 1.45; color: #94a3b8; }
.ap-muted:empty { display: none; }
.ap-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ap-identity-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ap-name { font-size: 15px; font-weight: 700; line-height: 1.25; color: #f8fafc; }
.ap-avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0f172a;
  background: #94a3b8;
}
.ap-avatar[data-tone="cyan"] { background: #22d3ee; }
.ap-avatar[data-tone="amber"] { background: #fbbf24; }
.ap-avatar[data-tone="violet"] { background: #c4b5fd; }
.ap-avatar[data-tone="emerald"] { background: #34d399; }
.ap-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}
.ap-badge[data-tone="cyan"] { color: #67e8f9; background: rgba(34, 211, 238, 0.12); border-color: rgba(34, 211, 238, 0.4); }
.ap-badge[data-tone="amber"] { color: #fcd34d; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.4); }
.ap-badge[data-tone="violet"] { color: #c4b5fd; background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.4); }
.ap-badge[data-tone="emerald"] { color: #6ee7b7; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.4); }
.ap-network { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #cbd5e1; }
.ap-network[data-state="local"] { color: #6ee7b7; }
.ap-network[data-state="remote"] { color: #fcd34d; }
.ap-network-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ap-network[data-state="local"] .ap-network-dot { animation: ap-pulse 2s ease-out infinite; }
@keyframes ap-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ap-network[data-state="local"] .ap-network-dot { animation: none; }
}
.ap-score { display: flex; flex-direction: column; gap: 6px; }
.ap-score-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #94a3b8; }
.ap-score-head strong { color: #f8fafc; font-size: 13px; }
.ap-score-track { height: 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.2); overflow: hidden; }
.ap-score-fill { height: 100%; width: 0; border-radius: 999px; background: #94a3b8; transition: width 0.3s ease; }
.ap-score-fill[data-tone="amber"] { background: #fbbf24; }
.ap-score-fill[data-tone="emerald"] { background: #34d399; }
.ap-session { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: #cbd5e1; }
.ap-session .ap-link { margin-left: auto; }
.ap-link {
  background: none;
  border: 0;
  padding: 2px 0;
  color: #7dd3fc;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ap-link-block { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.ap-totp { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, 0.15); }
.ap-totp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.ap-subtitle { font-size: 12px; font-weight: 700; color: #f8fafc; }
.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.1);
  color: #f8fafc;
  font-family: var(--ff-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ap-btn:hover:not(:disabled) { background: rgba(148, 163, 184, 0.2); }
.ap-btn:focus-visible, .ap-link:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.ap-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ap-btn-cta { width: 100%; background: #0369a1; border-color: #38bdf8; }
.ap-btn-cta:hover:not(:disabled) { background: #0284c7; }
.ap-btn-danger { width: 100%; background: rgba(239, 68, 68, 0.18); border-color: rgba(248, 113, 113, 0.5); }
.ap-btn-danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.3); }
.ap-actions-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ap-danger {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #451a03;
  border: 1px solid rgba(251, 146, 60, 0.4);
  border-radius: 10px;
}
.ap-danger-title { font-size: 12px; font-weight: 700; color: #fed7aa; display: flex; align-items: center; gap: 6px; }
.ap-danger-note { font-size: 11.5px; line-height: 1.4; color: #fed7aa; }
.ap-danger .ap-link { color: #fde68a; }

/* La confirmation par mot de passe s'ouvre depuis le volet de profil : elle doit passer devant. */
#admin-confirm-action-modal { z-index: 100001 !important; }

.gdrawer-link {
  background: none;
  border: 0;
  padding: 0;
  color: #7dd3fc;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.gdrawer-link:hover { text-decoration: underline; }
.gdrawer-link:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }


/* ══════════════════════════════════════════════════════════════════
   NAVIGATION MOBILE ET TABLETTE (≤ 900 px) : barre latérale en tiroir
   ══════════════════════════════════════════════════════════════════ */
.k1-nav-toggle { display: none; }
.k1-nav-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.6); z-index: 55; }
.k1-nav-backdrop[hidden] { display: none; }
@media (max-width: 900px) {
  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(86vw, 300px) !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    z-index: 60 !important;
  }
  body.k1-nav-open .sidebar { transform: none; }
  .main-content { width: 100%; }
  .k1-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 40px; height: 40px; margin-right: 10px; border-radius: 10px;
    background: #111827; border: 1px solid #334155; color: #e2e8f0; font-size: 16px; cursor: pointer;
  }
  .k1-nav-toggle:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
  .top-bar { flex-wrap: wrap; gap: 8px; }
  .brand-institutional-header { min-width: 0; flex: 1 1 auto; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* Petits écrans : grilles fixes déclarées en ligne et barres d'outils qui débordaient */
@media (max-width: 640px) {
  main [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
  }
  .search-inputs, .search-main { flex-wrap: wrap !important; }
  .search-main > input, #search-query { flex: 1 1 100% !important; min-width: 0 !important; }
  .graph-actions { flex-wrap: wrap !important; width: 100% !important; gap: 6px !important; }
  .graph-actions > * { flex: 1 1 auto; }
}
@media (max-width: 900px) {
  .chefdmi-analytics-grid, .chefdmi-studio-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .chefdmi-analytics-grid > *, .chefdmi-studio-grid > *, .chefdmi-subview-panel .chefdmi-card { min-width: 0 !important; max-width: 100%; }
  .chefdmi-subview-panel .chefdmi-card { overflow-x: auto; }
}
@media (max-width: 900px) {
  .graph-actions { flex-wrap: wrap !important; width: 100% !important; gap: 6px !important; }
}