/* ═══════════════════════════════════════════════════════════════════════
   LEXIBOT IA — Design System v9.0  « DEEP SPACE »
   Cockpit spatial · Étoiles animées · Nébuleuses dynamiques · Genspark style
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ─── Variables cosmos ───────────────────────────────────────────────── */
:root {
  /* Fond espace profond */
  --bg:          #020510;
  --bg2:         #050c1e;
  --bg3:         #081428;
  --bg4:         #0b1c38;
  --bg5:         #0e2245;

  /* Bleu néon électrique */
  --blue:        #1a9fff;
  --blue2:       #38cfff;
  --blue-soft:   #60b4ff;
  --blue-bg:     rgba(26,159,255,0.10);
  --blue-border: rgba(26,159,255,0.28);
  --blue-glow:   0 0 20px rgba(26,159,255,0.40);

  /* Violet nébuleuse */
  --purple:      #9d5cff;
  --purple2:     #bf8bff;
  --purple-bg:   rgba(157,92,255,0.10);
  --purple-border:rgba(157,92,255,0.30);

  /* Cyan électrique */
  --cyan:        #00e5ff;
  --cyan2:       #40ffea;
  --cyan-bg:     rgba(0,229,255,0.08);
  --cyan-glow:   0 0 16px rgba(0,229,255,0.35);

  /* Vert émeraude */
  --green:       #00e676;
  --green-bg:    rgba(0,230,118,0.08);
  --green-border:rgba(0,230,118,0.28);

  /* Ambre stellaire */
  --amber:       #ffca28;
  --amber-bg:    rgba(255,202,40,0.08);
  --amber-border:rgba(255,202,40,0.28);

  /* Rouge nova */
  --red:         #ff4757;
  --red-bg:      rgba(255,71,87,0.08);
  --red-border:  rgba(255,71,87,0.28);

  /* Texte lumineux */
  --txt:         #eaf3ff;
  --txt2:        #b0cce8;
  --txt3:        #6e9bc0;
  --txt4:        #3d6080;

  /* Bordures subtiles */
  --border:      rgba(26,159,255,0.16);
  --border2:     rgba(26,159,255,0.30);
  --border3:     rgba(26,159,255,0.50);

  /* Ombres profondes */
  --sh1: 0 2px 14px rgba(0,0,0,.7);
  --sh2: 0 6px 32px rgba(0,0,0,.8);
  --sh3: 0 0 28px rgba(26,159,255,0.22);
  --sh4: 0 0 56px rgba(26,159,255,0.28);
  --sh5: 0 0 20px rgba(157,92,255,0.22);

  --r1: 10px; --r2: 14px; --r3: 18px; --r4: 24px; --r5: 32px;
  --t: .18s cubic-bezier(.4,0,.2,1);
}

/* ─── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

/* ══════════════════════════════════════════════════════════════════════
   CANVAS COSMOS — fond animé multi-couches
   ══════════════════════════════════════════════════════════════════════ */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Couche 1 — nébuleuses colorées flottantes */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: nebulaeDrift 30s ease-in-out infinite alternate;
  background:
    radial-gradient(ellipse 70% 55% at 8%  25%, rgba(26,159,255,0.09)  0%, transparent 70%),
    radial-gradient(ellipse 55% 65% at 92% 55%, rgba(157,92,255,0.09)  0%, transparent 70%),
    radial-gradient(ellipse 45% 40% at 50%  5%, rgba(0,229,255,0.06)   0%, transparent 70%),
    radial-gradient(ellipse 35% 30% at 25% 85%, rgba(0,230,118,0.05)   0%, transparent 70%),
    radial-gradient(ellipse 30% 25% at 78% 90%, rgba(255,202,40,0.04)  0%, transparent 70%);
}

/* Couche 2 — étoiles fixes multiples (dense comme l'espace) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* grande constellation — blanches */
    radial-gradient(1.8px 1.8px at  5%  8%, rgba(255,255,255,.85) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255,255,255,.60) 0%, transparent 100%),
    radial-gradient(2.2px 2.2px at 19% 55%, rgba(255,255,255,.90) 0%, transparent 100%),
    radial-gradient(1.0px 1.0px at 27%  3%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 38%, rgba(255,255,255,.70) 0%, transparent 100%),
    radial-gradient(1.0px 1.0px at 42% 17%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 48% 70%, rgba(255,255,255,.95) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 55% 44%, rgba(255,255,255,.60) 0%, transparent 100%),
    radial-gradient(1.8px 1.8px at 62% 12%, rgba(255,255,255,.80) 0%, transparent 100%),
    radial-gradient(1.0px 1.0px at 70% 62%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 77% 28%, rgba(255,255,255,.70) 0%, transparent 100%),
    radial-gradient(1.0px 1.0px at 83% 82%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(2.0px 2.0px at 88%  5%, rgba(255,255,255,.88) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 93% 48%, rgba(255,255,255,.62) 0%, transparent 100%),
    radial-gradient(1.0px 1.0px at 97% 75%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at  3% 68%, rgba(255,255,255,.65) 0%, transparent 100%),
    radial-gradient(1.0px 1.0px at  9% 90%, rgba(255,255,255,.48) 0%, transparent 100%),
    radial-gradient(1.8px 1.8px at 16% 78%, rgba(255,255,255,.75) 0%, transparent 100%),
    radial-gradient(1.0px 1.0px at 23% 42%, rgba(255,255,255,.52) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 31% 95%, rgba(255,255,255,.58) 0%, transparent 100%),
    radial-gradient(1.0px 1.0px at 38% 60%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(2.0px 2.0px at 45% 85%, rgba(255,255,255,.80) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 52% 32%, rgba(255,255,255,.58) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 55%, rgba(255,255,255,.68) 0%, transparent 100%),
    radial-gradient(1.0px 1.0px at 65% 92%, rgba(255,255,255,.48) 0%, transparent 100%),
    radial-gradient(1.8px 1.8px at 72% 15%, rgba(255,255,255,.78) 0%, transparent 100%),
    radial-gradient(1.0px 1.0px at 80% 48%, rgba(255,255,255,.52) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 87% 68%, rgba(255,255,255,.62) 0%, transparent 100%),
    radial-gradient(2.2px 2.2px at 95% 22%, rgba(255,255,255,.90) 0%, transparent 100%),
    radial-gradient(1.0px 1.0px at  1% 35%, rgba(255,255,255,.48) 0%, transparent 100%),
    /* étoiles bleues */
    radial-gradient(2.0px 2.0px at 14% 14%, rgba(56,207,255,.80)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 33% 25%, rgba(26,159,255,.70)  0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 56% 78%, rgba(0,229,255,.65)   0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 76%  8%, rgba(96,180,255,.85)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 60%, rgba(56,207,255,.60)  0%, transparent 100%),
    /* étoiles violettes */
    radial-gradient(2.0px 2.0px at  7% 42%, rgba(157,92,255,.70)  0%, transparent 100%),
    radial-gradient(1.8px 1.8px at 44% 10%, rgba(191,139,255,.65) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 69% 35%, rgba(157,92,255,.55)  0%, transparent 100%),
    radial-gradient(2.2px 2.2px at 85% 88%, rgba(191,139,255,.75) 0%, transparent 100%),
    /* étoiles vertes/ambre rares */
    radial-gradient(1.8px 1.8px at 29% 72%, rgba(0,230,118,.55)   0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 61% 18%, rgba(255,202,40,.50)  0%, transparent 100%),
    radial-gradient(2.0px 2.0px at 98% 42%, rgba(0,230,118,.60)   0%, transparent 100%);
}

/* ─── Étoiles animées (scintillement) ───────────────────────────────── */
#star-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ─── Sidebar ────────────────────────────────────────────────────────── */
.sidebar {
  width: 265px; min-width: 265px;
  background: linear-gradient(180deg,
    rgba(2,5,16,0.97) 0%,
    rgba(5,12,30,0.97) 60%,
    rgba(8,20,40,0.97) 100%);
  border-right: 1px solid rgba(26,159,255,0.18);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  box-shadow: 4px 0 40px rgba(0,0,0,0.6), inset -1px 0 0 rgba(26,159,255,0.08);
}

/* Halo latéral sidebar */
.sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(26,159,255,0.5) 30%,
    rgba(0,229,255,0.8) 50%,
    rgba(26,159,255,0.5) 70%,
    transparent 100%);
  pointer-events: none;
}

.main-content {
  margin-left: 265px;
  flex: 1;
  background: transparent;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

/* ─── Nav labels ─────────────────────────────────────────────────────── */
.nav-section-label {
  font-size: 10px; font-weight: 800;
  color: var(--txt4);
  text-transform: uppercase; letter-spacing: 2px;
  padding: 14px 16px 5px;
  display: flex; align-items: center; gap: 6px;
}

/* ─── Nav items ──────────────────────────────────────────────────────── */
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border-radius: var(--r1);
  cursor: pointer;
  font-size: 14.5px; font-weight: 500;
  color: var(--txt3);
  transition: all var(--t);
  margin: 2px 6px;
  position: relative;
}
.nav-item:hover {
  background: rgba(26,159,255,0.12);
  color: var(--txt2);
  border-radius: var(--r1);
}
.nav-item.active {
  background: linear-gradient(135deg, rgba(26,159,255,0.18) 0%, rgba(0,229,255,0.10) 100%);
  color: var(--cyan);
  font-weight: 700;
  border-left: 2px solid var(--blue2);
  padding-left: 12px;
  box-shadow: inset 0 0 16px rgba(26,159,255,0.08), 0 0 12px rgba(26,159,255,0.05);
}
.nav-item.active::after {
  content: '';
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

/* ─── Cartes ─────────────────────────────────────────────────────────── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  transition: border-color var(--t), box-shadow var(--t);
  position: relative; overflow: hidden;
}
.card:hover { border-color: rgba(26,159,255,0.40); box-shadow: var(--sh3); }

/* ─── Module cards (style Genspark — grille agents) ──────────────────── */
.module-card {
  background: linear-gradient(135deg, rgba(5,12,30,0.9) 0%, rgba(8,20,40,0.85) 100%);
  border: 1px solid rgba(26,159,255,0.20);
  border-radius: var(--r3);
  padding: 20px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t);
  backdrop-filter: blur(8px);
}
.module-card:hover {
  border-color: rgba(26,159,255,0.55);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), var(--sh3);
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(8,20,45,0.95) 0%, rgba(12,28,60,0.90) 100%);
}
/* Ligne lumineuse en haut */
.module-card::after {
  content: '';
  position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,159,255,0.6), transparent);
  border-radius: 1px;
}
/* Étoile scintillante */
.module-card::before {
  content: '✦';
  position: absolute; top: 10px; right: 12px;
  font-size: 9px; color: rgba(56,207,255,0.35);
  animation: twinkle 3.2s ease-in-out infinite;
  pointer-events: none;
}
.module-card:nth-child(2n)::before  { color: rgba(157,92,255,0.35); animation-delay:1.4s; }
.module-card:nth-child(3n)::before  { color: rgba(0,230,118,0.30); animation-delay:2.5s; }
.module-card:nth-child(4n)::before  { color: rgba(255,202,40,0.28); animation-delay:0.8s; }
.module-card:nth-child(5n)::before  { color: rgba(0,229,255,0.40); animation-delay:1.9s; }

/* ─── Agent cards (style icônes circulaires Genspark) ────────────────── */
.agent-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 20px 12px;
  background: linear-gradient(135deg, rgba(5,12,30,0.9) 0%, rgba(8,20,40,0.85) 100%);
  border: 1px solid rgba(26,159,255,0.18);
  border-radius: var(--r3);
  cursor: pointer; text-align: center;
  transition: all var(--t);
  position: relative; overflow: hidden;
}
.agent-card:hover {
  border-color: rgba(26,159,255,0.50);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), var(--sh3);
  transform: translateY(-4px);
}
.agent-icon-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.agent-icon-circle::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(26,159,255,0.8) 0deg,
    rgba(0,229,255,0.6) 120deg,
    rgba(157,92,255,0.6) 240deg,
    rgba(26,159,255,0.8) 360deg
  );
  z-index: -1;
  opacity: 0;
  transition: opacity var(--t);
  animation: rotateBorder 4s linear infinite;
}
.agent-card:hover .agent-icon-circle::after { opacity: 0.7; }

.agent-label {
  font-size: 13px; font-weight: 600; color: var(--txt2);
  line-height: 1.3; text-align: center;
}
.agent-badge {
  position: absolute; top: 8px; right: 8px;
  background: linear-gradient(135deg,#ff4757,#ff6b81);
  color: #fff; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* ─── Stat / KPI ─────────────────────────────────────────────────────── */
.stat-card-v2, .kpi-chip {
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.stat-card-v2:hover, .kpi-chip:hover {
  border-color: rgba(26,159,255,0.45);
  box-shadow: var(--sh3);
  transform: translateY(-1px);
}

/* ─── Boutons ────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px;
  background: linear-gradient(135deg, #0d5cd4 0%, #1a9fff 60%, #00ccff 100%);
  color: #fff;
  border: 1px solid rgba(26,159,255,0.50);
  border-radius: var(--r2);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap; text-decoration: none;
  box-shadow: 0 0 20px rgba(26,159,255,0.30), inset 0 1px 0 rgba(255,255,255,0.12);
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1565d8 0%, #25b0ff 60%, #00e5ff 100%);
  box-shadow: 0 0 35px rgba(26,159,255,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(-2px);
}

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: rgba(26,159,255,0.10);
  color: var(--blue2);
  border: 1px solid var(--blue-border);
  border-radius: var(--r2);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap; text-decoration: none;
}
.btn-secondary:hover {
  background: rgba(26,159,255,0.20);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 18px rgba(0,229,255,0.18);
  transform: translateY(-1px);
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: transparent;
  color: var(--txt3);
  border: 1px solid var(--border);
  border-radius: var(--r1);
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all var(--t);
  white-space: nowrap;
}
.btn-ghost:hover {
  background: rgba(26,159,255,0.08);
  color: var(--txt2);
  border-color: rgba(26,159,255,0.35);
}

/* ─── Hero dashboard ─────────────────────────────────────────────────── */
.hero-dashboard {
  background: linear-gradient(135deg, #060f28 0%, #0a1a42 40%, #061535 100%);
  border: 1px solid rgba(26,159,255,0.30);
  border-radius: var(--r4);
  padding: 28px 32px;
  color: var(--txt);
  margin-bottom: 24px;
  position: relative; overflow: hidden;
  box-shadow: 0 0 80px rgba(0,0,0,0.5),
              inset 0 1px 0 rgba(26,159,255,0.15),
              0 0 0 1px rgba(26,159,255,0.05);
}
.hero-dashboard::before {
  content: '';
  position: absolute; top: -100px; right: -100px;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(0,229,255,0.10) 0%, transparent 70%);
  pointer-events: none;
  animation: cosmicFloat 6s ease-in-out infinite;
}
.hero-dashboard::after {
  content: '';
  position: absolute; bottom: -80px; left: -60px;
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(157,92,255,0.08) 0%, transparent 70%);
  pointer-events: none;
  animation: cosmicFloat 8s ease-in-out infinite reverse;
}

/* ─── Formulaires ────────────────────────────────────────────────────── */
.form-input {
  width: 100%;
  padding: 13px 16px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  font-size: 15px;
  color: var(--txt);
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
}
.form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,159,255,0.15), var(--blue-glow);
}
.form-input::placeholder { color: var(--txt4); }

/* ─── Badges ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: 20px;
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase;
}
.badge-blue   { background: var(--blue-bg);   color: var(--blue2);  border: 1px solid var(--blue-border); }
.badge-green  { background: var(--green-bg);  color: var(--green);  border: 1px solid var(--green-border); }
.badge-amber  { background: var(--amber-bg);  color: var(--amber);  border: 1px solid var(--amber-border); }
.badge-red    { background: var(--red-bg);    color: var(--red);    border: 1px solid var(--red-border); }
.badge-purple { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border); }
.badge-new {
  background: linear-gradient(135deg,#ff4757,#ff6b81);
  color: #fff; border: none;
  box-shadow: 0 2px 8px rgba(255,71,87,0.35);
}

/* ══════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════════════ */
@keyframes nebulaeDrift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 3% 5%; }
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
@keyframes pulseDot {
  0%,100% { opacity:1; }
  50%     { opacity:.3; }
}
@keyframes cosmicFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  33%     { transform:translateY(-8px) rotate(1deg); }
  66%     { transform:translateY(4px) rotate(-1deg); }
}
@keyframes loadingOrbit {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes moonPulse {
  0%,100% { transform:scale(1); box-shadow:0 0 22px rgba(26,159,255,.40); }
  50%     { transform:scale(1.07); box-shadow:0 0 44px rgba(0,229,255,.65); }
}
@keyframes twinkle {
  0%,100% { opacity:.4; transform:scale(1); }
  50%     { opacity:1.0; transform:scale(1.5); }
}
@keyframes neonPulse {
  0%,100% { box-shadow:0 0 8px rgba(26,159,255,.3); }
  50%     { box-shadow:0 0 24px rgba(26,159,255,.8); }
}
@keyframes rotateBorder {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes starBlink {
  0%, 95%, 100% { opacity:1; }
  97%  { opacity:0.1; }
}
@keyframes orbitFloat {
  0%,100% { transform:translate(0,0) rotate(0deg); }
  25%     { transform:translate(3px,-4px) rotate(1deg); }
  50%     { transform:translate(-2px,3px) rotate(-0.5deg); }
  75%     { transform:translate(4px,2px) rotate(0.8deg); }
}

.fade-in       { animation: fadeIn  .35s cubic-bezier(.4,0,.2,1) both; }
.slide-up      { animation: slideUp .4s  cubic-bezier(.4,0,.2,1) both; }
.cosmic-float  { animation: cosmicFloat 4s ease-in-out infinite; }
.orbit-float   { animation: orbitFloat 7s ease-in-out infinite; }
.badge-live    { animation: pulseDot 2s ease infinite; }
.neon-pulse    { animation: neonPulse 2.5s ease infinite; }

.shimmer {
  background: linear-gradient(90deg, #050c1e 25%, #0a1a3a 50%, #050c1e 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--r2);
}

/* ─── Chat ───────────────────────────────────────────────────────────── */
.chat-bubble-user {
  background: linear-gradient(135deg, #0d5cd4, #1a9fff);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  padding: 13px 18px; font-size: 15px; max-width: 72%;
  align-self: flex-end; line-height: 1.65;
  box-shadow: 0 2px 16px rgba(26,159,255,0.35);
}
.chat-bubble-ai {
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg4) 100%);
  border: 1px solid var(--border);
  color: var(--txt);
  border-radius: 18px 18px 18px 4px;
  padding: 15px 20px; font-size: 15px; max-width: 88%;
  align-self: flex-start; line-height: 1.75;
  box-shadow: var(--sh1);
}

/* ─── Prose AI ───────────────────────────────────────────────────────── */
.prose-ai { color: var(--txt); font-size: 15.5px; line-height: 1.8; }
.prose-ai h1 { font-size: 22px; font-weight: 800; color: var(--txt); margin: 1.2em 0 .5em; }
.prose-ai h2 { font-size: 19px; font-weight: 700; color: var(--txt2); margin: 1em 0 .4em; }
.prose-ai h3 { font-size: 16px; font-weight: 600; color: var(--txt3); margin: .8em 0 .3em; }
.prose-ai p  { margin: .6em 0; color: var(--txt2); }
.prose-ai ul, .prose-ai ol { padding-left: 22px; margin: .6em 0; }
.prose-ai li { margin: .4em 0; color: var(--txt2); font-size: 15px; }
.prose-ai strong { color: var(--txt); font-weight: 700; }
.prose-ai em { color: var(--txt3); }
.prose-ai code {
  background: rgba(26,159,255,0.12); border: 1px solid var(--blue-border);
  padding: 3px 8px; border-radius: 6px;
  font-size: 13px; color: var(--cyan); font-family: monospace;
}
.prose-ai blockquote {
  border-left: 3px solid var(--blue2);
  padding: 12px 18px; color: var(--txt3);
  background: var(--blue-bg); border-radius: 0 8px 8px 0; margin: .8em 0;
}
.prose-ai hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
.prose-ai table { width: 100%; border-collapse: collapse; margin: .8em 0; font-size: 14px; }
.prose-ai th { background: var(--bg3); font-weight: 700; color: var(--txt2); padding: 11px 14px; border: 1px solid var(--border); }
.prose-ai td { padding: 11px 14px; border: 1px solid var(--border); color: var(--txt2); }
.prose-ai tr:hover td { background: var(--bg4); }
.prose-ai a { color: var(--cyan); text-decoration: underline; }

/* ─── Legal doc ──────────────────────────────────────────────────────── */
.legal-doc {
  font-family: 'Georgia', serif; font-size: 15px; line-height: 2;
  color: var(--txt); background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--r2);
  padding: 48px 56px; max-width: 860px; margin: 0 auto;
}
.legal-doc h1 { font-size: 15px; font-weight: 700; text-align: center; color: var(--txt); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.legal-doc h2 { font-size: 14px; font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: 2px; margin-top: 36px; margin-bottom: 14px; border-left: 3px solid var(--blue); padding-left: 12px; }
.legal-doc h3 { font-size: 14px; font-weight: 600; color: var(--txt2); margin: 22px 0 10px; }
.legal-doc p  { margin-bottom: 18px; text-align: justify; color: var(--txt2); }
.legal-doc strong { color: var(--txt); }
.legal-doc blockquote { border-left: 3px solid var(--blue2); padding: 12px 20px; color: var(--txt3); background: var(--blue-bg); border-radius: 0 8px 8px 0; margin: 18px 0; }
.legal-doc hr { border: none; border-top: 1px solid var(--border); margin: 30px 0; }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal-doc th { background: var(--bg3); color: var(--txt2); padding: 10px 14px; border: 1px solid var(--border); font-weight: 700; }
.legal-doc td { padding: 10px 14px; border: 1px solid var(--border); color: var(--txt2); }
.legal-doc tr:hover td { background: var(--bg4); }

/* ─── Modal ──────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(1,3,12,.88);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
  backdrop-filter: blur(12px);
}
.modal {
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  border: 1px solid var(--border2);
  border-radius: var(--r4);
  padding: 32px; width: 100%; max-width: 620px;
  animation: fadeIn .28s ease both;
  box-shadow: var(--sh4), inset 0 1px 0 rgba(26,159,255,0.12);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 18px; font-weight: 800; color: var(--txt); }

/* ─── Notifications ──────────────────────────────────────────────────── */
#notification-container {
  position: fixed; top: 20px; right: 20px;
  z-index: 2000; display: flex; flex-direction: column; gap: 10px;
}
.notification {
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  border: 1px solid var(--border);
  border-radius: var(--r2); padding: 14px 18px;
  font-size: 15px; font-weight: 500; color: var(--txt);
  min-width: 300px; max-width: 420px;
  animation: fadeIn .25s ease both;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--sh2);
  backdrop-filter: blur(12px);
}
.notification.success { border-left: 3px solid var(--green); }
.notification.error   { border-left: 3px solid var(--red);   }
.notification.info    { border-left: 3px solid var(--blue);  }

/* ─── Scrollbars cosmos ──────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: rgba(26,159,255,0.28); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,229,255,0.55); }
.sidebar::-webkit-scrollbar  { width: 3px; }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform .3s ease; }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .module-card  { padding: 14px; }
  .agent-card   { padding: 14px 8px; }
  .btn-primary, .btn-secondary { font-size: 14px; padding: 10px 16px; }
  .hero-dashboard { padding: 18px 16px; }
  .agent-icon-circle { width: 52px; height: 52px; font-size: 22px; }
}

/* ─── Page ───────────────────────────────────────────────────────────── */
.page-content { padding: 28px 32px; max-width: 1320px; margin: 0 auto; }
@media (max-width: 768px) { .page-content { padding: 16px 12px; } }

/* ─── Tables ─────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.data-table th {
  background: var(--bg3); font-size: 11px; font-weight: 800;
  color: var(--txt4); text-transform: uppercase; letter-spacing: 1px;
  padding: 11px 14px; border-bottom: 1px solid var(--border2); text-align: left;
}
.data-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--txt2); vertical-align: middle; }
.data-table tr:hover td { background: rgba(26,159,255,0.05); }

/* ─── Strategy agents ─────────────────────────────────────────────────── */
.strategy-agent {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2);
  padding: 14px 16px; margin-bottom: 10px;
  transition: border-color var(--t), box-shadow var(--t);
}
.strategy-agent:hover { border-color: rgba(26,159,255,0.45); box-shadow: var(--sh3); }
.agent-score-bar  { height: 6px; background: var(--bg3); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.agent-score-fill { height: 100%; border-radius: 4px; transition: width .8s cubic-bezier(.4,0,.2,1); }

/* ═══════════════════════════════════════════════════════════════════════
   MOON-IA
   ═══════════════════════════════════════════════════════════════════════ */
.moon-ia-modal {
  position: fixed; inset: 0;
  background: rgba(1,3,12,.90);
  display: flex; align-items: center; justify-content: center;
  z-index: 3000; padding: 20px;
  animation: fadeIn .4s ease both;
  backdrop-filter: blur(14px);
}
.moon-ia-card {
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  border: 1px solid rgba(26,159,255,0.42);
  border-radius: var(--r5); max-width: 680px; width: 100%;
  overflow: hidden;
  animation: slideUp .4s cubic-bezier(.4,0,.2,1) both;
  box-shadow: 0 0 100px rgba(26,159,255,0.20), var(--sh2);
}
.moon-ia-header {
  background: linear-gradient(135deg, #06103a 0%, #0a1e50 60%, #060f2e 100%);
  border-bottom: 1px solid rgba(26,159,255,0.30);
  padding: 26px 30px; display: flex; align-items: center; gap: 18px;
  position: relative; overflow: hidden;
}
.moon-ia-header::after {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,229,255,.12) 0%, transparent 70%);
  pointer-events: none;
  animation: cosmicFloat 5s ease-in-out infinite;
}
.moon-ia-header::before {
  content: '';
  position: absolute; bottom: -40px; left: 20%;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(157,92,255,.08) 0%, transparent 70%);
  pointer-events: none;
}
.moon-ia-avatar {
  width: 72px; height: 72px; flex-shrink: 0;
  background: linear-gradient(135deg, #0d5cd4, #1a9fff, #00e5ff);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 34px;
  border: 2px solid rgba(0,229,255,0.40);
  animation: moonPulse 3s ease-in-out infinite;
  box-shadow: 0 0 32px rgba(26,159,255,0.45);
  position: relative; z-index: 1;
}
.moon-ia-title    { font-size: 22px; font-weight: 900; color: var(--txt); line-height: 1.2; margin-bottom: 4px; }
.moon-ia-subtitle { font-size: 14px; color: var(--txt3); font-weight: 500; }
.moon-ia-body     { padding: 26px 30px; }
.moon-ia-video-area {
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r3);
  margin-bottom: 22px; overflow: hidden; position: relative;
  aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
}
.moon-ia-step {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 15px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r2); margin-bottom: 10px;
  transition: border-color var(--t), background var(--t);
}
.moon-ia-step:hover { border-color: var(--blue2); background: var(--blue-bg); }
.moon-ia-step-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r1); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.moon-ia-step-text h4 { font-size: 15px; font-weight: 700; color: var(--txt); margin-bottom: 2px; }
.moon-ia-step-text p  { font-size: 13px; color: var(--txt3); line-height: 1.5; }
.moon-ia-footer   { padding: 0 30px 26px; display: flex; justify-content: flex-end; gap: 12px; }

/* ─── Titres section ─────────────────────────────────────────────────── */
.section-title {
  font-size: 18px; font-weight: 800; color: var(--txt);
  display: flex; align-items: center; gap: 10px;
}

/* ─── Activity ───────────────────────────────────────────────────────── */
.activity-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r1);
  cursor: pointer; transition: background var(--t);
  border: 1px solid transparent;
}
.activity-item:hover { background: var(--bg4); border-color: var(--border); }

/* ─── Domain pills ───────────────────────────────────────────────────── */
.domain-pill {
  padding: 8px 16px; border-radius: 24px; font-size: 14px;
  cursor: pointer; transition: all var(--t);
  border: 1px solid var(--border); color: var(--txt3);
  font-weight: 600; background: var(--bg2);
}
.domain-pill:hover { border-color: var(--blue2); color: var(--blue2); background: var(--blue-bg); }
.domain-pill.active {
  background: linear-gradient(135deg, #0d5cd4, #1a9fff);
  color: #fff; border-color: rgba(26,159,255,0.5);
  box-shadow: 0 0 18px rgba(26,159,255,0.38);
}

/* ─── Sector toggle (Pros / Particuliers) ────────────────────────────── */
.sector-toggle {
  display: flex; gap: 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r2); padding: 4px;
}
.sector-toggle-btn {
  flex: 1; padding: 10px 18px;
  border-radius: var(--r1); border: none;
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all var(--t);
  background: transparent; color: var(--txt3);
  white-space: nowrap;
}
.sector-toggle-btn.active {
  background: linear-gradient(135deg, #0d5cd4, #1a9fff);
  color: #fff;
  box-shadow: 0 0 18px rgba(26,159,255,0.30);
}
.sector-toggle-btn:not(.active):hover {
  background: rgba(26,159,255,0.10);
  color: var(--txt2);
}

/* ─── Tabs modernes ──────────────────────────────────────────────────── */
.tab-bar {
  display: flex; gap: 2px; overflow-x: auto;
  background: var(--bg3); border-radius: var(--r2);
  padding: 4px; border: 1px solid var(--border);
}
.tab-btn {
  padding: 9px 18px; border-radius: 10px; border: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: all var(--t);
  background: transparent; color: var(--txt3);
}
.tab-btn.active {
  background: linear-gradient(135deg, rgba(26,159,255,0.22), rgba(0,229,255,0.12));
  color: var(--cyan);
  border: 1px solid rgba(26,159,255,0.35);
  box-shadow: 0 0 12px rgba(26,159,255,0.15);
}
.tab-btn:not(.active):hover {
  background: rgba(26,159,255,0.08);
  color: var(--txt2);
}