/* ================================================================
   SKLEUR — Design System v3
   European Venture Intelligence
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   1. TOKENS — Light Theme (default)
   ──────────────────────────────────────────────────────────────── */

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

:root {
  /* Surfaces */
  --paper:    #f7f7f8;
  --paper2:   #ffffff;
  --paper3:   #f0f0f2;
  --surface:  #ffffff;

  /* Ink */
  --ink:      #111113;
  --ink2:     #1e1e22;
  --muted:    #6b6b76;
  --muted2:   #9898a3;

  /* Accent — Rust (alerts, CTA) */
  --rust:     #e8162e;
  --rust2:    #c41228;
  --rust-bg:  rgba(232, 22, 46, 0.06);
  --rust-border: rgba(232, 22, 46, 0.18);

  /* Secondary — Teal ("Armor") */
  --teal:     #0a6640;
  --teal2:    #0e7d4e;
  --teal-bg:  rgba(10, 102, 64, 0.07);
  --teal-border: rgba(10, 102, 64, 0.18);

  /* Premium — Gold (LP) */
  --gold:     #9a6c10;
  --gold2:    #b07e18;
  --gold-bg:  rgba(154, 108, 16, 0.07);
  --gold-border: rgba(154, 108, 16, 0.18);

  /* Semantic */
  --positive: #16a34a;
  --positive-bg: rgba(22, 163, 74, 0.07);
  --negative: var(--rust);
  --negative-bg: var(--rust-bg);
  --warning:  #b45309;
  --warning-bg: rgba(180, 83, 9, 0.07);
  --warning-border: rgba(180, 83, 9, 0.18);
  --info:     var(--teal);
  --info-bg:  var(--teal-bg);

  /* Borders */
  --border:   rgba(17, 17, 19, 0.08);
  --border2:  rgba(17, 17, 19, 0.14);

  /* Typography */
  --font-display: 'Playfair Display', serif;
  --font-ui:      'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04);
}

/* ────────────────────────────────────────────────────────────────
   2. TOKENS — Dark Theme
   ──────────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  --paper:    #111113;
  --paper2:   #18181b;
  --paper3:   #222226;
  --surface:  #0d0d0f;

  --ink:      #f4f4f6;
  --ink2:     #e0e0e6;
  --muted:    #8888a0;
  --muted2:   #606070;

  --rust:     #f04050;
  --rust2:    #f85060;
  --rust-bg:  rgba(240, 64, 80, 0.10);
  --rust-border: rgba(240, 64, 80, 0.22);

  --teal:     #34c678;
  --teal2:    #4ad88a;
  --teal-bg:  rgba(52, 198, 120, 0.10);
  --teal-border: rgba(52, 198, 120, 0.22);

  --gold:     #d4a030;
  --gold2:    #e0b040;
  --gold-bg:  rgba(212, 160, 48, 0.10);
  --gold-border: rgba(212, 160, 48, 0.22);

  --positive: #34c678;
  --positive-bg: rgba(52, 198, 120, 0.10);
  --warning:  #f0a030;
  --warning-bg: rgba(240, 160, 48, 0.10);
  --warning-border: rgba(240, 160, 48, 0.22);

  --border:   rgba(244, 244, 246, 0.08);
  --border2:  rgba(244, 244, 246, 0.14);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.28), 0 0 0 0.5px rgba(255,255,255,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.36), 0 0 0 0.5px rgba(255,255,255,0.04);
}

/* ────────────────────────────────────────────────────────────────
   3. RESET + BODY
   ──────────────────────────────────────────────────────────────── */

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
h1, h2, h3, p { margin: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--radius-pill); }

/* ────────────────────────────────────────────────────────────────
   4. TYPOGRAPHY
   ──────────────────────────────────────────────────────────────── */

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
}

h3, .h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
}

.section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.mono { font-family: var(--font-mono); }
.text-muted { color: var(--muted); }
.text-rust { color: var(--rust); }
.text-teal { color: var(--teal); }
.text-gold { color: var(--gold); }
.text-positive { color: var(--positive); }
.text-warning { color: var(--warning); }

/* ────────────────────────────────────────────────────────────────
   5. LAYOUT
   ──────────────────────────────────────────────────────────────── */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px;
}

.dash-grid   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.dash-2col   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-3col   { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }

/* ────────────────────────────────────────────────────────────────
   6. NAVIGATION
   ──────────────────────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 56px;
  border-bottom: 0.5px solid var(--border);
  background: rgba(255,255,255,0.85);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-theme="dark"] .nav {
  background: rgba(17,17,19,0.85);
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-tabs { display: flex; gap: 2px; }

.nav-tab {
  padding: 6px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color 0.15s, background 0.15s;
}
.nav-tab:hover { color: var(--ink); background: var(--paper3); }
.nav-tab.active {
  color: var(--rust);
  background: var(--rust-bg);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper3);
  border: 0.5px solid var(--border2);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nav-search:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-bg);
}
.nav-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  width: 200px;
}
.nav-search input::placeholder { color: var(--muted2); }
.nav-search span { color: var(--muted); font-size: 12px; }

/* ────────────────────────────────────────────────────────────────
   7. THEME TOGGLE
   ──────────────────────────────────────────────────────────────── */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0.5px solid var(--border2);
  border-radius: var(--radius-md);
  background: var(--paper3);
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  transition: background 0.15s, color 0.15s;
}
.theme-toggle:hover {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--border2);
}

.nav-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0.5px solid var(--border2);
  border-radius: var(--radius-md);
  background: var(--paper3);
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-avatar:hover,
.nav-avatar[aria-expanded="true"] {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--teal);
}

.nav-avatar-wrap { position: relative; }
.nav-avatar-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--paper2);
  border: 0.5px solid var(--border2);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  overflow: hidden;
}
.nav-avatar-menu[hidden] { display: none; }
.nav-avatar-menu-item {
  display: block;
  padding: 9px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-avatar-menu-item:hover { background: var(--paper3); color: var(--teal); }
.nav-avatar-menu-item + .nav-avatar-menu-item { border-top: 0.5px solid var(--border); }

/* ────────────────────────────────────────────────────────────────
   8. CARDS
   ──────────────────────────────────────────────────────────────── */

.card {
  position: relative;
  background: var(--paper2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border2);
}

.card-sm {
  position: relative;
  background: var(--paper2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-xs);
}

/* ────────────────────────────────────────────────────────────────
   9. TICKER
   ──────────────────────────────────────────────────────────────── */

.ticker {
  background: var(--paper2);
  border-bottom: 0.5px solid var(--border);
  padding: 10px 32px;
  display: flex;
  gap: 32px;
  overflow-x: auto;
  white-space: nowrap;
}

.ticker-item { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ticker-label { font-size: 11px; color: var(--muted); }
.ticker-val { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.ticker-delta { font-size: 11px; }
.ticker-sep { width: 0.5px; height: 20px; background: var(--border2); flex-shrink: 0; }

.t-up   { color: var(--positive); }
.t-down { color: var(--rust); }

/* ────────────────────────────────────────────────────────────────
   10. PAGE TITLE
   ──────────────────────────────────────────────────────────────── */

.page-title { margin-bottom: 20px; }
.page-title h1 { font-size: 22px; }
.page-title p { font-size: 13px; color: var(--muted); margin-top: 3px; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--positive);
  border-radius: 50%;
  margin-right: 5px;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ────────────────────────────────────────────────────────────────
   11. KPI CARDS
   ──────────────────────────────────────────────────────────────── */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-card {
  background: var(--paper2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.15s;
}
.kpi-card:hover { box-shadow: var(--shadow-sm); }

.kpi-label {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 400;
}

.kpi-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

.kpi-delta { font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 3px; }
.kpi-delta--up   { color: var(--positive); }
.kpi-delta--down { color: var(--rust); }
.kpi-delta--flat { color: var(--warning); }

/* ────────────────────────────────────────────────────────────────
   12. ALERTS
   ──────────────────────────────────────────────────────────────── */

.alert-strip {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.alert-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-ui);
  border: 0.5px solid;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
}
.alert-chip:hover { opacity: 0.85; box-shadow: var(--shadow-xs); }

.alert-chip--danger  { background: var(--rust-bg);     border-color: var(--rust-border);     color: var(--rust); }
.alert-chip--warning { background: var(--warning-bg);   border-color: var(--warning-border);  color: var(--warning); }
.alert-chip--success { background: var(--positive-bg);  border-color: rgba(22, 163, 74, 0.2); color: var(--positive); }
.alert-chip--info    { background: var(--teal-bg);      border-color: var(--teal-border);      color: var(--teal); }

/* ────────────────────────────────────────────────────────────────
   13. FLUX (Activity Feed)
   ──────────────────────────────────────────────────────────────── */

.flux-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
}
.flux-item:last-child { border-bottom: none; }

.flux-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  margin-top: 5px;
  border-radius: 50%;
}
.flux-dot--positive { background: var(--positive); }
.flux-dot--danger   { background: var(--rust); }
.flux-dot--info     { background: var(--teal); }
.flux-dot--gold     { background: var(--gold); }
.flux-dot--warning  { background: var(--warning); }

.flux-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  margin-top: 2px;
}

.flux-content { flex: 1; }
.flux-title { font-size: 13px; color: var(--ink); font-weight: 500; margin-bottom: 2px; }
.flux-sub   { font-size: 12px; color: var(--muted); }

.flux-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-family: var(--font-mono);
  margin-left: 6px;
  border: 0.5px solid;
  border-radius: var(--radius-pill);
}
.flux-badge--positive { background: var(--positive-bg); border-color: rgba(22,163,74,0.15); color: var(--positive); }
.flux-badge--danger   { background: var(--rust-bg);     border-color: var(--rust-border);    color: var(--rust); }
.flux-badge--info     { background: var(--teal-bg);     border-color: var(--teal-border);    color: var(--teal); }
.flux-badge--gold     { background: var(--gold-bg);     border-color: var(--gold-border);    color: var(--gold); }
.flux-badge--warning  { background: var(--warning-bg);  border-color: var(--warning-border); color: var(--warning); }

/* ────────────────────────────────────────────────────────────────
   14. TOP LIST
   ──────────────────────────────────────────────────────────────── */

.top-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  transition: padding-left 0.12s;
}
.top-item:last-child { border-bottom: none; }
.top-item:hover { padding-left: 4px; }

.top-rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  width: 18px;
  flex-shrink: 0;
}

.top-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper3);
}

.top-name { flex: 1; font-size: 13px; color: var(--ink); font-weight: 500; }
.top-score { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.top-delta { font-size: 10px; margin-left: 4px; }

/* ────────────────────────────────────────────────────────────────
   15. FOND MINI CARDS
   ──────────────────────────────────────────────────────────────── */

.fond-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
}
.fond-mini:last-child { border-bottom: none; }

.fond-logo-sm {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper3);
}

.fond-nm   { font-size: 13px; font-weight: 500; color: var(--ink); }
.fond-stats { margin-left: auto; text-align: right; }
.fond-aum  { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.fond-perf { font-size: 11px; }

/* ────────────────────────────────────────────────────────────────
   16. DATA TABLE
   ──────────────────────────────────────────────────────────────── */

.data-table { width: 100%; border-collapse: collapse; }

.data-table th {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 0.5px solid var(--border2);
}

.data-table td {
  padding: 11px 12px;
  border-bottom: 0.5px solid var(--border);
  font-size: 13px;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--teal-bg); }

/* ────────────────────────────────────────────────────────────────
   17. TAGS
   ──────────────────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-ui);
  border: 0.5px solid;
  border-radius: var(--radius-pill);
}

.tag--positive { background: var(--positive-bg); border-color: rgba(22,163,74,0.2);  color: var(--positive); }
.tag--danger   { background: var(--rust-bg);     border-color: var(--rust-border);    color: var(--rust); }
.tag--warning  { background: var(--warning-bg);  border-color: var(--warning-border); color: var(--warning); }
.tag--teal     { background: var(--teal-bg);     border-color: var(--teal-border);    color: var(--teal); }
.tag--gold     { background: var(--gold-bg);     border-color: var(--gold-border);    color: var(--gold); }

/* ────────────────────────────────────────────────────────────────
   18. BUTTONS
   ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  border: 0.5px solid;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
  box-shadow: 0 1px 2px rgba(232,22,46,0.2);
}
.btn--primary:hover {
  background: var(--rust2);
  border-color: var(--rust2);
  box-shadow: 0 2px 6px rgba(232,22,46,0.28);
}

.btn--secondary {
  background: transparent;
  border-color: var(--border2);
  color: var(--ink);
}
.btn--secondary:hover {
  background: var(--paper3);
  border-color: var(--border2);
}

/* ────────────────────────────────────────────────────────────────
   19. PROGRESS BARS
   ──────────────────────────────────────────────────────────────── */

.bar-track {
  height: 6px;
  background: var(--paper3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
}

@keyframes growbar { from { width: 0; } }
.grow-bar { animation: growbar 0.8s ease-out forwards; }

/* ────────────────────────────────────────────────────────────────
   20. SEARCH
   ──────────────────────────────────────────────────────────────── */

.search-big {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper2);
  border: 0.5px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 11px 16px;
  margin-bottom: 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-xs);
}
.search-big:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-bg);
}
.search-big input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
}
.search-big input::placeholder { color: var(--muted2); }

/* ────────────────────────────────────────────────────────────────
   21. EMAIL WIDGET
   ──────────────────────────────────────────────────────────────── */

.email-widget {
  background: var(--teal-bg);
  border: 0.5px solid var(--teal-border);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.email-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.email-sub   { font-size: 12px; color: var(--muted); margin-bottom: 14px; }

.email-input { display: flex; gap: 8px; }
.email-input input {
  flex: 1;
  background: var(--paper2);
  border: 0.5px solid var(--border2);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.email-input input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-bg);
}

.email-btn {
  padding: 8px 16px;
  background: var(--rust);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background 0.15s, box-shadow 0.15s;
}
.email-btn:hover {
  background: var(--rust2);
  box-shadow: 0 2px 6px rgba(232,22,46,0.25);
}

/* ────────────────────────────────────────────────────────────────
   22. CHART HELPERS
   ──────────────────────────────────────────────────────────────── */

.chart-area { position: relative; }
.chart-svg  { width: 100%; overflow: visible; }
.chart-axis { font-family: var(--font-mono); font-size: 9px; fill: var(--muted); }

/* ────────────────────────────────────────────────────────────────
   23. SELECTS / FORM ELEMENTS
   ──────────────────────────────────────────────────────────────── */

.select {
  background: var(--paper2);
  border: 0.5px solid var(--border2);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  font-family: var(--font-ui);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-bg);
  color: var(--ink);
}

/* ────────────────────────────────────────────────────────────────
   24. STAT GRID
   ──────────────────────────────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.stat-box {
  background: var(--paper3);
  padding: 14px;
  text-align: center;
  border-radius: var(--radius-md);
}

.stat-val {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
}

.stat-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

/* ────────────────────────────────────────────────────────────────
   25. PRICING CARDS
   ──────────────────────────────────────────────────────────────── */

.pricing-item {
  padding: 12px;
  border: 0.5px solid;
  border-radius: var(--radius-md);
}

.pricing-item--teal    { background: var(--teal-bg);    border-color: var(--teal-border); }
.pricing-item--gold    { background: var(--gold-bg);    border-color: var(--gold-border); }
.pricing-item--warning { background: var(--warning-bg); border-color: var(--warning-border); }

.pricing-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.pricing-desc { font-size: 12px; color: var(--muted); }

/* ────────────────────────────────────────────────────────────────
   26. UTILITY HELPERS
   ──────────────────────────────────────────────────────────────── */

.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-xs  { gap: 4px; }
.gap-sm  { gap: 8px; }
.gap-md  { gap: 16px; }
.gap-lg  { gap: 24px; }
.mb-sm   { margin-bottom: 8px; }
.mb-md   { margin-bottom: 16px; }
.mt-md   { margin-top: 14px; }

.cell-flex {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar-sm {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  border: 0.5px solid var(--border);
  border-radius: 50%;
  background: var(--paper3);
}

/* ────────────────────────────────────────────────────────────────
   28. PAGE HEADERS (Startup, Fond)
   ──────────────────────────────────────────────────────────────── */

.entity-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 28px 32px;
  background: var(--paper2);
  border-bottom: 0.5px solid var(--border);
}

.entity-logo {
  width: 60px;
  height: 60px;
  background: var(--paper3);
  border: 0.5px solid var(--border2);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--teal);
}

.entity-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.entity-sub  { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.entity-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ────────────────────────────────────────────────────────────────
   29. HEALTH SCORE WIDGET
   ──────────────────────────────────────────────────────────────── */

.health-widget { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.health-score {
  font-family: var(--font-mono);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
}

.health-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.health-bar {
  width: 160px;
  height: 4px;
  background: var(--paper3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.health-bar-fill { height: 100%; background: var(--teal); border-radius: var(--radius-pill); }

/* ────────────────────────────────────────────────────────────────
   30. METRICS GRID
   ──────────────────────────────────────────────────────────────── */

.metrics-grid   { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
.metrics-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }

.metric-card {
  background: var(--paper2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.metric-card:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); }

.metric-label { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 400; }
.metric-value { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.metric-delta { font-size: 12px; }

/* ────────────────────────────────────────────────────────────────
   31. MAIN GRID (content + sidebar)
   ──────────────────────────────────────────────────────────────── */

.main-grid    { display: grid; grid-template-columns: 1fr 360px; gap: 24px; }
.main-grid-sm { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
.sidebar      { display: flex; flex-direction: column; gap: 16px; }

.section        { margin-bottom: 24px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-action { font-size: 12px; color: var(--muted); cursor: pointer; }
.section-action:hover { color: var(--ink); }

/* ────────────────────────────────────────────────────────────────
   32. TIMELINE
   ──────────────────────────────────────────────────────────────── */

.timeline { position: relative; }
.timeline-line {
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--teal), transparent);
}

.timeline-event {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
}

.timeline-dot {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  z-index: 1;
}
.dot-raise    { background: var(--positive-bg); border-color: rgba(22,163,74,0.3); }
.dot-gov      { background: var(--gold-bg);     border-color: var(--gold-border); }
.dot-press    { background: var(--teal-bg);     border-color: var(--teal-border); }
.dot-legal    { background: var(--rust-bg);     border-color: var(--rust-border); }
.dot-social   { background: var(--warning-bg);  border-color: var(--warning-border); }
.dot-invest   { background: var(--positive-bg); border-color: rgba(22,163,74,0.3); }
.dot-exit     { background: var(--teal-bg);     border-color: var(--teal-border); }
.dot-dead     { background: var(--rust-bg);     border-color: var(--rust-border); }

.event-card {
  background: var(--paper2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.event-card:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); }

.event-top   { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.event-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.event-date  { font-family: var(--font-mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.event-desc  { font-size: 12px; color: var(--muted); line-height: 1.5; }
.event-amount { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--positive); margin-top: 4px; }
.event-badges { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }

.badge          { padding: 3px 9px; font-size: 11px; font-weight: 500; border: 0.5px solid; border-radius: var(--radius-pill); }
.badge-positive { background: var(--positive-bg); color: var(--positive); border-color: rgba(22,163,74,0.15); }
.badge-danger   { background: var(--rust-bg);     color: var(--rust);     border-color: var(--rust-border); }
.badge-gold     { background: var(--gold-bg);     color: var(--gold);     border-color: var(--gold-border); }
.badge-warning  { background: var(--warning-bg);  color: var(--warning);  border-color: var(--warning-border); }
.badge-teal     { background: var(--teal-bg);     color: var(--teal);     border-color: var(--teal-border); }

/* ────────────────────────────────────────────────────────────────
   33. FILTER BUTTONS
   ──────────────────────────────────────────────────────────────── */

.filter-row { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }

.filter-btn {
  padding: 6px 14px;
  font-size: 12px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-ui);
  font-weight: 500;
}
.filter-btn:hover { border-color: var(--border2); color: var(--ink); background: var(--paper3); }
.filter-btn.active { background: var(--teal-bg); color: var(--teal); border-color: var(--teal-border); }

/* ────────────────────────────────────────────────────────────────
   34. INDEX ROWS
   ──────────────────────────────────────────────────────────────── */

.index-row        { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.index-row:last-child { border-bottom: none; }
.index-name       { font-size: 13px; color: var(--ink); }
.index-bar-wrap   { flex: 1; margin: 0 12px; height: 4px; background: var(--paper3); border-radius: var(--radius-pill); overflow: hidden; }
.index-bar-inner  { height: 100%; border-radius: var(--radius-pill); }
.index-val        { font-family: var(--font-mono); font-size: 12px; font-weight: 600; min-width: 28px; text-align: right; }

/* ────────────────────────────────────────────────────────────────
   35. SHAREHOLDERS
   ──────────────────────────────────────────────────────────────── */

.shareholder-row  { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 0.5px solid var(--border); }
.shareholder-row:last-child { border-bottom: none; }
.sh-info   { display: flex; align-items: center; gap: 10px; }
.sh-avatar { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; border: 0.5px solid var(--border); border-radius: 50%; background: var(--paper3); }
.sh-name   { font-size: 13px; color: var(--ink); font-weight: 500; }
.sh-type   { font-size: 11px; color: var(--muted); }
.sh-pct    { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); }
.sh-bar    { width: 100%; height: 3px; background: var(--paper3); margin-top: 4px; border-radius: var(--radius-pill); overflow: hidden; }
.sh-bar-fill { height: 100%; border-radius: var(--radius-pill); }

/* ────────────────────────────────────────────────────────────────
   36. ALERTS (sidebar)
   ──────────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.5;
  border: 0.5px solid;
  border-radius: var(--radius-md);
}
.alert:last-child { margin-bottom: 0; }
.alert-warn   { background: var(--warning-bg);  border-color: var(--warning-border); color: var(--warning); }
.alert-ok     { background: var(--positive-bg); border-color: rgba(22,163,74,0.15); color: var(--positive); }
.alert-danger { background: var(--rust-bg);     border-color: var(--rust-border);    color: var(--rust); }
.alert-icon   { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ────────────────────────────────────────────────────────────────
   37. VEHICULE SELECTOR
   ──────────────────────────────────────────────────────────────── */

.vehicule-selector { display: flex; gap: 10px; margin: 24px 0 20px; overflow-x: auto; padding-bottom: 4px; }

.vehicule-card {
  min-width: 220px;
  background: var(--paper2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.vehicule-card.active { border-color: var(--teal); background: var(--teal-bg); box-shadow: 0 0 0 3px var(--teal-bg); }
.vehicule-card:hover  { border-color: var(--border2); box-shadow: var(--shadow-sm); }

.vehicule-name    { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.vehicule-vintage { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.vehicule-mini-stats { display: flex; gap: 12px; }
.vms-item  { text-align: center; }
.vms-val   { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.vms-label { font-size: 10px; color: var(--muted); }

.age-badge { display: inline-block; padding: 3px 10px; font-size: 11px; font-family: var(--font-ui); border: 0.5px solid; border-radius: var(--radius-pill); font-weight: 500; }
.age-young { background: var(--positive-bg); color: var(--positive); border-color: rgba(22,163,74,0.15); }
.age-mid   { background: var(--warning-bg);  color: var(--warning);  border-color: var(--warning-border); }
.age-old   { background: var(--rust-bg);     color: var(--rust);     border-color: var(--rust-border); }

/* ────────────────────────────────────────────────────────────────
   38. PORTFOLIO TABLE
   ──────────────────────────────────────────────────────────────── */

.portfolio-table { width: 100%; border-collapse: collapse; }
.portfolio-table th { font-family: var(--font-ui); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; padding: 9px 14px; text-align: left; border-bottom: 0.5px solid var(--border); }
.portfolio-table td { padding: 12px 14px; border-bottom: 0.5px solid var(--border); font-size: 13px; vertical-align: middle; }
.portfolio-table tr:last-child td { border-bottom: none; }
.portfolio-table tr:hover td { background: var(--teal-bg); }

.startup-cell { display: flex; align-items: center; gap: 10px; }
.startup-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; border: 0.5px solid var(--border); border-radius: var(--radius-md); background: var(--paper3); }
.startup-nm   { font-size: 13px; font-weight: 500; color: var(--ink); }
.startup-sec  { font-size: 11px; color: var(--muted); }

.status-pill    { padding: 4px 10px; font-size: 11px; font-weight: 500; border: 0.5px solid; border-radius: var(--radius-pill); }
.status-alive   { background: var(--positive-bg); color: var(--positive); border-color: rgba(22,163,74,0.15); }
.status-exit-hi { background: var(--teal-bg);     color: var(--teal);     border-color: var(--teal-border); }
.status-exit-lo { background: var(--paper3);       color: var(--muted);    border-color: var(--border); }
.status-dead    { background: var(--rust-bg);       color: var(--rust);     border-color: var(--rust-border); }
.status-watch   { background: var(--warning-bg);    color: var(--warning);  border-color: var(--warning-border); }

.health-mini { display: flex; align-items: center; gap: 6px; }
.hm-bar  { width: 60px; height: 4px; background: var(--paper3); border-radius: var(--radius-pill); overflow: hidden; }
.hm-fill { height: 100%; border-radius: var(--radius-pill); }
.hm-val  { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* ────────────────────────────────────────────────────────────────
   39. GP TEAM
   ──────────────────────────────────────────────────────────────── */

.gp-card        { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid var(--border); }
.gp-card:last-child { border-bottom: none; }
.gp-avatar      { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; border: 0.5px solid var(--border); border-radius: 50%; background: var(--paper3); }
.gp-name        { font-size: 13px; font-weight: 500; color: var(--ink); }
.gp-role        { font-size: 12px; color: var(--muted); }
.gp-track       { margin-left: auto; text-align: right; }
.gp-exits       { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--positive); }
.gp-exits-label { font-size: 10px; color: var(--muted); }

/* ────────────────────────────────────────────────────────────────
   40. CONTENTIEUX
   ──────────────────────────────────────────────────────────────── */

.contentieux-item      { padding: 14px; border: 0.5px solid var(--border); border-radius: var(--radius-md); margin-bottom: 8px; background: var(--paper2); }
.contentieux-item:last-child { margin-bottom: 0; }
.c-header   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.c-title    { font-size: 13px; font-weight: 500; color: var(--ink); }
.c-status-pill { padding: 3px 10px; font-size: 11px; border: 0.5px solid; border-radius: var(--radius-pill); font-weight: 500; }
.c-en-cours { background: var(--rust-bg);      color: var(--rust);     border-color: var(--rust-border); }
.c-clos     { background: var(--positive-bg);  color: var(--positive); border-color: rgba(22,163,74,0.15); }
.c-desc     { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ────────────────────────────────────────────────────────────────
   41. PORTFOLIO SUMMARY
   ──────────────────────────────────────────────────────────────── */

.portfolio-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.ps-item  { background: var(--paper3); padding: 12px; text-align: center; border-radius: var(--radius-md); }
.ps-val   { font-family: var(--font-mono); font-size: 20px; font-weight: 700; }
.ps-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

.perf-row       { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.perf-row:last-child { border-bottom: none; }
.perf-label     { font-size: 13px; color: var(--ink); }
.perf-val       { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }

/* ────────────────────────────────────────────────────────────────
   42. PROFILE HERO
   ──────────────────────────────────────────────────────────────── */

.profile-hero {
  background: var(--paper2);
  border-bottom: 0.5px solid var(--border);
  padding: 48px 40px 36px;
  position: relative;
  overflow: hidden;
}

.hero-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: start; }

.avatar {
  width: 96px;
  height: 96px;
  background: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--paper2);
  letter-spacing: -0.02em;
}

.avatar-wrap { position: relative; }
.avatar-status {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  background: var(--positive);
  border-radius: 50%;
  border: 2.5px solid var(--paper2);
}

.hero-name  { font-family: var(--font-display); font-size: 36px; font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -0.03em; margin-bottom: 6px; }
.hero-title { font-size: 15px; color: var(--muted); margin-bottom: 12px; font-style: italic; }
.hero-tags  { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }

.htag        { padding: 5px 12px; font-size: 12px; font-weight: 500; font-family: var(--font-ui); border: 0.5px solid; border-radius: var(--radius-pill); }
.htag-vc     { background: var(--ink);    color: var(--paper2); border-color: var(--ink); }
.htag-stage  { background: var(--rust-bg); color: var(--rust);   border-color: var(--rust-border); }
.htag-sector { background: var(--teal-bg); color: var(--teal);   border-color: var(--teal-border); }

.hero-contact   { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.hero-contact a { color: var(--teal); text-decoration: none; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 0.5px solid var(--border2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.hstat { background: var(--paper2); padding: 16px 18px; border-right: 0.5px solid var(--border); }
.hstat:last-child { border-right: none; }
.hstat-val       { font-family: var(--font-display); font-size: 28px; font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.hstat-val span  { font-size: 14px; color: var(--muted); font-family: var(--font-ui); font-weight: 400; }
.hstat-label     { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 4px; font-family: var(--font-ui); }
.hstat-sub       { font-size: 11px; color: var(--positive); margin-top: 2px; }

/* ────────────────────────────────────────────────────────────────
   43. PAGE GRID
   ──────────────────────────────────────────────────────────────── */

.page-grid { display: grid; grid-template-columns: 1fr 320px; gap: 0; max-width: 1280px; margin: 0 auto; }
.main-col  { padding: 32px 40px; border-right: 0.5px solid var(--border); }
.side-col  { padding: 28px; }

/* ────────────────────────────────────────────────────────────────
   44. BREADCRUMB
   ──────────────────────────────────────────────────────────────── */

.breadcrumb {
  padding: 10px 40px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 0.5px solid var(--border);
  background: var(--paper2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb a         { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover   { color: var(--ink); }
.breadcrumb-sep       { opacity: 0.4; }

/* ────────────────────────────────────────────────────────────────
   45. FOND CARDS
   ──────────────────────────────────────────────────────────────── */

.fond-cards { display: flex; flex-direction: column; gap: 0; border: 0.5px solid var(--border2); border-radius: var(--radius-lg); overflow: hidden; }

.fond-card {
  background: var(--paper2);
  padding: 22px 24px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.fond-card:last-child { border-bottom: none; }
.fond-card:hover { background: var(--paper3); }
.fond-card.current { border-left: 3px solid var(--rust); }
.fond-card.exited  { border-left: 3px solid var(--positive); }
.fond-card.failed  { border-left: 3px solid var(--muted2); }

.fc-top     { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.fc-name    { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.fc-vintage { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.fc-status  { padding: 4px 12px; font-family: var(--font-ui); font-size: 11px; font-weight: 500; white-space: nowrap; border: 0.5px solid; border-radius: var(--radius-pill); }
.fcs-current { background: var(--rust-bg);      color: var(--rust);     border-color: var(--rust-border); }
.fcs-exit    { background: var(--positive-bg);  color: var(--positive); border-color: rgba(22,163,74,0.15); }
.fcs-end     { background: var(--paper3);        color: var(--muted);    border-color: var(--border); }

.fc-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 12px; }
.fcm-val    { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--ink); }
.fcm-label  { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.fc-bar-row   { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.fc-bar-label { font-size: 10px; color: var(--muted); white-space: nowrap; width: 60px; }
.fc-bar-track { flex: 1; height: 5px; background: var(--paper3); border-radius: var(--radius-pill); overflow: hidden; }
.fc-bar-fill  { height: 100%; border-radius: var(--radius-pill); }
.fc-bar-val   { font-size: 10px; font-family: var(--font-mono); font-weight: 600; min-width: 32px; text-align: right; }

.fc-exits    { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.exit-chip   { display: flex; align-items: center; gap: 5px; padding: 4px 12px; font-size: 12px; background: var(--paper3); border: 0.5px solid var(--border); border-radius: var(--radius-pill); }
.exit-chip-name { font-weight: 500; color: var(--ink); }
.exit-chip-mult { font-family: var(--font-mono); font-size: 11px; }

/* ────────────────────────────────────────────────────────────────
   46. SIDEBAR SECTIONS
   ──────────────────────────────────────────────────────────────── */

.side-section       { margin-bottom: 28px; border-bottom: 0.5px solid var(--border); padding-bottom: 24px; }
.side-section:last-child { border-bottom: none; }
.side-title         { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 12px; }

.mini-timeline      { position: relative; padding-left: 18px; }
.mini-timeline::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--border2); }
.mt-item            { position: relative; margin-bottom: 16px; }
.mt-item:last-child { margin-bottom: 0; }
.mt-dot             { position: absolute; left: -16px; top: 4px; width: 8px; height: 8px; border: 2px solid var(--border2); background: var(--paper2); border-radius: 50%; }
.mt-dot.active      { background: var(--rust);     border-color: var(--rust); }
.mt-dot.exited      { background: var(--positive); border-color: var(--positive); }
.mt-date            { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-bottom: 1px; }
.mt-text            { font-size: 13px; color: var(--ink); font-weight: 500; }
.mt-sub             { font-size: 12px; color: var(--muted); }

.bio-text { font-size: 13px; color: var(--ink); line-height: 1.7; font-style: italic; border-left: 3px solid var(--rust); padding-left: 14px; }

.data-row         { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 0.5px solid var(--border); }
.data-row:last-child { border-bottom: none; }
.dr-label         { font-size: 12px; color: var(--muted); }
.dr-val           { font-size: 13px; color: var(--ink); font-weight: 500; font-family: var(--font-mono); }

.signal-row          { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 0.5px solid var(--border); }
.signal-row:last-child { border-bottom: none; }
.signal-icon         { font-size: 13px; flex-shrink: 0; }
.signal-text         { font-size: 12px; color: var(--ink); flex: 1; line-height: 1.4; }
.signal-badge        { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border: 0.5px solid; border-radius: var(--radius-pill); }

.similar-item         { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid var(--border); cursor: pointer; }
.similar-item:last-child { border-bottom: none; }
.sim-av   { width: 34px; height: 34px; border: 0.5px solid var(--border2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 11px; font-weight: 700; background: var(--paper3); }
.sim-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.sim-role { font-size: 11px; color: var(--muted); }
.sim-dpi  { font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-left: auto; }

.tag-cloud  { display: flex; flex-wrap: wrap; gap: 5px; }
.tcloud-tag { padding: 4px 10px; font-size: 11px; background: var(--paper3); color: var(--ink); border: 0.5px solid var(--border); border-radius: var(--radius-pill); font-family: var(--font-ui); }

/* ────────────────────────────────────────────────────────────────
   47. INVESTISSEUR TABLE
   ──────────────────────────────────────────────────────────────── */

.inv-table { width: 100%; border-collapse: collapse; border: 0.5px solid var(--border2); border-radius: var(--radius-lg); overflow: hidden; }
.inv-table th { font-family: var(--font-ui); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 14px; text-align: left; background: var(--paper3); border-bottom: 0.5px solid var(--border2); font-weight: 500; }
.inv-table td { padding: 12px 14px; border-bottom: 0.5px solid var(--border); font-size: 13px; background: var(--paper2); }
.inv-table tr:last-child td { border-bottom: none; }
.inv-table tr:hover td { background: var(--paper3); }

.startup-chip    { display: flex; align-items: center; gap: 8px; }
.startup-logo-sm { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; border: 0.5px solid var(--border2); border-radius: var(--radius-md); background: var(--paper3); }
.s-nm  { font-size: 13px; font-weight: 500; color: var(--ink); }
.s-sec { font-size: 11px; color: var(--muted); }

.mult-pill { padding: 3px 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; border: 0.5px solid; border-radius: var(--radius-pill); }
.m-win   { background: var(--positive-bg); color: var(--positive); border-color: rgba(22,163,74,0.15); }
.m-loss  { background: var(--paper3);       color: var(--muted);    border-color: var(--border); }
.m-live  { background: var(--teal-bg);      color: var(--teal);     border-color: var(--teal-border); }
.m-watch { background: var(--warning-bg);   color: var(--warning);  border-color: var(--warning-border); }

.network-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.netw-item  { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--paper2); border: 0.5px solid var(--border); border-radius: var(--radius-md); }
.netw-count { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); min-width: 24px; }
.netw-name  { font-size: 12px; color: var(--ink); }
.netw-deals { font-size: 11px; color: var(--muted); margin-left: auto; }

/* ────────────────────────────────────────────────────────────────
   48. FONDATEUR HERO
   ──────────────────────────────────────────────────────────────── */

.hero { background: var(--paper2); border-bottom: 0.5px solid var(--border); position: relative; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 300px 1fr; min-height: 300px; }

.hero-left {
  padding: 40px 32px;
  border-right: 0.5px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--paper3);
}

.avatar-zone    { text-align: center; margin-bottom: 20px; }
.avatar-md {
  width: 80px;
  height: 80px;
  background: var(--ink);
  border: 0.5px solid var(--border2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  color: var(--paper2);
  margin: 0 auto 12px;
}
.founder-name  { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.1; text-align: center; margin-bottom: 4px; }
.founder-title { font-size: 13px; color: var(--muted); text-align: center; font-style: italic; margin-bottom: 14px; }

.id-chip          { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 0.5px solid var(--border); }
.id-chip:last-child { border-bottom: none; }
.id-icon { font-size: 12px; opacity: 0.6; width: 16px; text-align: center; }
.id-val  { font-size: 12px; color: var(--muted); }
.id-val strong { color: var(--ink); font-weight: 500; }

.hero-right     { padding: 40px; }
.hero-right-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.hs-val   { font-family: var(--font-display); font-size: 56px; font-weight: 900; color: var(--ink); line-height: 1; margin-bottom: 2px; }
.hs-label { font-size: 13px; color: var(--muted); font-style: italic; }

.rep-score  { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rep-label  { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-ui); }
.rep-val    { font-family: var(--font-mono); font-size: 36px; font-weight: 600; color: var(--gold); line-height: 1; }
.rep-sub    { font-size: 12px; color: var(--gold); opacity: 0.7; }

.kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 0.5px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.kpi-cell  { background: var(--paper3); padding: 14px 16px; border-right: 0.5px solid var(--border); }
.kpi-cell:last-child { border-right: none; }
.kpi-v     { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.kpi-l     { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }

.body-grid  { display: grid; grid-template-columns: 1fr 340px; }

.sec-head   { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.sec-title  { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); }
.sec-count  { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* ────────────────────────────────────────────────────────────────
   49. STARTUP BLOCK
   ──────────────────────────────────────────────────────────────── */

.startup-block {
  margin-bottom: 24px;
  background: var(--paper2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-xs);
}
.startup-block:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); }
.startup-block.active-co { border-color: var(--gold-border); }

.sb-header { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 0.5px solid var(--border); background: var(--paper3); }
.sb-logo   { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border: 0.5px solid var(--border2); border-radius: var(--radius-md); flex-shrink: 0; background: var(--paper2); }
.sb-name   { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 1px; }
.sb-sector { font-size: 12px; color: var(--muted); }
.sb-role-badge { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.role-pill  { padding: 4px 12px; font-size: 11px; font-family: var(--font-ui); font-weight: 500; border: 0.5px solid; border-radius: var(--radius-pill); }
.rp-ceo     { background: var(--gold-bg);      color: var(--gold);     border-color: var(--gold-border); }
.rp-cto     { background: var(--teal-bg);      color: var(--teal);     border-color: var(--teal-border); }
.rp-exit    { background: var(--positive-bg);  color: var(--positive); border-color: rgba(22,163,74,0.15); }
.rp-removed { background: var(--rust-bg);      color: var(--rust);     border-color: var(--rust-border); }
.period-label { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }

.sb-timeline { padding: 16px 20px 4px; position: relative; padding-left: 28px; }
.sb-tl-line  { position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: var(--border); }

.ev       { display: grid; grid-template-columns: 80px 1fr; gap: 12px; margin-bottom: 14px; position: relative; }
.ev-dot   { position: absolute; left: -22px; top: 4px; width: 8px; height: 8px; border: 1.5px solid var(--border2); background: var(--paper2); border-radius: 50%; }
.ev-dot.r { background: var(--positive); border-color: var(--positive); }
.ev-dot.g { background: var(--gold);     border-color: var(--gold); }
.ev-dot.l { background: var(--warning);  border-color: var(--warning); }
.ev-dot.p { background: var(--muted);    border-color: var(--muted); }
.ev-dot.a { background: var(--rust);     border-color: var(--rust); }
.ev-dot.x { background: var(--teal);     border-color: var(--teal); }

.ev-date   { font-family: var(--font-mono); font-size: 10px; color: var(--muted); padding-top: 2px; }
.ev-title  { font-size: 13px; color: var(--ink); font-weight: 500; margin-bottom: 2px; }
.ev-desc   { font-size: 12px; color: var(--muted); line-height: 1.5; }
.ev-amount { font-family: var(--font-mono); font-size: 12px; color: var(--positive); font-weight: 600; margin-top: 3px; }
.ev-tags   { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.etag      { padding: 3px 9px; font-size: 11px; border: 0.5px solid; border-radius: var(--radius-pill); font-weight: 500; }
.etag-g    { background: var(--positive-bg); color: var(--positive); border-color: rgba(22,163,74,0.15); }
.etag-r    { background: var(--rust-bg);     color: var(--rust);     border-color: var(--rust-border); }
.etag-b    { background: var(--teal-bg);     color: var(--teal);     border-color: var(--teal-border); }
.etag-p    { background: var(--gold-bg);     color: var(--gold);     border-color: var(--gold-border); }
.etag-y    { background: var(--warning-bg);  color: var(--warning);  border-color: var(--warning-border); }
.etag-n    { background: var(--paper3);      color: var(--muted);    border-color: var(--border); }

.sb-footer { padding: 12px 20px; border-top: 0.5px solid var(--border); display: flex; align-items: center; gap: 16px; background: var(--paper3); }
.sf-stat   { text-align: center; }
.sf-val    { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.sf-label  { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sf-sep    { width: 0.5px; height: 28px; background: var(--border2); }

/* ────────────────────────────────────────────────────────────────
   50. FONDATEUR SIDEBAR
   ──────────────────────────────────────────────────────────────── */

.s-section          { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 0.5px solid var(--border); }
.s-section:last-child { border-bottom: none; padding-bottom: 0; }
.s-title            { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; font-family: var(--font-ui); }

.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-item    { padding: 12px; background: var(--paper3); border: 0.5px solid var(--border); border-radius: var(--radius-md); }
.sc-val     { font-family: var(--font-mono); font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.sc-label   { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sc-bar     { height: 3px; margin-top: 8px; border-radius: var(--radius-pill); overflow: hidden; }

.alert-item         { display: flex; gap: 8px; padding: 10px 12px; margin-bottom: 7px; font-size: 12px; line-height: 1.4; border: 0.5px solid; border-radius: var(--radius-md); }
.alert-item:last-child { margin-bottom: 0; }
.ai-warn    { background: var(--warning-bg);  border-color: var(--warning-border); color: var(--warning); }
.ai-ok      { background: var(--positive-bg); border-color: rgba(22,163,74,0.15);  color: var(--positive); }
.ai-danger  { background: var(--rust-bg);     border-color: var(--rust-border);     color: var(--rust); }
.ai-icon    { flex-shrink: 0; font-size: 12px; }

.social-row          { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.social-row:last-child { border-bottom: none; }
.soc-platform { font-size: 13px; width: 20px; text-align: center; }
.soc-name     { font-size: 12px; color: var(--muted); flex: 1; }
.soc-val      { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink); }
.soc-delta    { font-size: 11px; margin-left: 4px; }
.soc-up       { color: var(--positive); }
.soc-down     { color: var(--rust); }

.verbatim       { padding: 10px 12px; background: var(--paper3); border-left: 2px solid var(--border2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 8px; }
.verbatim:last-child { margin-bottom: 0; }
.vb-text        { font-size: 12px; color: var(--muted); line-height: 1.5; font-style: italic; margin-bottom: 5px; }
.vb-meta        { font-size: 10px; color: var(--muted); }

.gov-item          { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.gov-item:last-child { border-bottom: none; }
.gov-icon { font-size: 13px; }
.gov-text { font-size: 13px; color: var(--ink); flex: 1; }
.gov-badge { padding: 3px 9px; font-size: 11px; font-family: var(--font-ui); border: 0.5px solid; border-radius: var(--radius-pill); font-weight: 500; }
.gb-ami   { background: var(--positive-bg); color: var(--positive); border-color: rgba(22,163,74,0.15); }
.gb-hos   { background: var(--rust-bg);     color: var(--rust);     border-color: var(--rust-border); }
.gb-dou   { background: var(--warning-bg);  color: var(--warning);  border-color: var(--warning-border); }

/* ────────────────────────────────────────────────────────────────
   51. PRESS & REVIEWS
   ──────────────────────────────────────────────────────────────── */

.tab-strip      { display: flex; gap: 2px; background: var(--paper3); padding: 3px; border-radius: var(--radius-md); margin-bottom: 14px; }
.tab-strip-btn  { flex: 1; padding: 6px 10px; font-size: 12px; color: var(--muted); cursor: pointer; text-align: center; transition: all 0.15s; border: none; background: none; font-family: var(--font-ui); border-radius: var(--radius-sm); }
.tab-strip-btn.active { background: var(--paper2); color: var(--ink); box-shadow: var(--shadow-xs); }

.press-item         { padding: 12px 0; border-bottom: 0.5px solid var(--border); }
.press-item:last-child { border-bottom: none; }
.press-top          { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.press-source       { font-size: 11px; color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.press-date         { font-size: 11px; color: var(--muted); }
.press-title        { font-size: 13px; color: var(--ink); line-height: 1.4; margin-bottom: 4px; }
.press-summary      { font-size: 12px; color: var(--muted); line-height: 1.4; }

.sentiment-pill { padding: 3px 9px; font-size: 11px; border: 0.5px solid; border-radius: var(--radius-pill); font-weight: 500; }
.sent-pos { background: var(--positive-bg); color: var(--positive); border-color: rgba(22,163,74,0.15); }
.sent-neg { background: var(--rust-bg);     color: var(--rust);     border-color: var(--rust-border); }
.sent-neu { background: var(--paper3);      color: var(--muted);    border-color: var(--border); }

.review-item         { padding: 10px 0; border-bottom: 0.5px solid var(--border); }
.review-item:last-child { border-bottom: none; }
.review-meta         { display: flex; justify-content: space-between; margin-bottom: 4px; }
.review-role         { font-size: 12px; color: var(--muted); }
.review-date         { font-size: 11px; color: var(--muted); }
.review-text         { font-size: 13px; color: var(--ink); line-height: 1.4; }

.stars { color: var(--warning); font-size: 15px; letter-spacing: 1px; }

.avis-summary  { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.avis-note     { font-family: var(--font-mono); font-size: 32px; font-weight: 700; color: var(--warning); }
.avis-count    { font-size: 12px; color: var(--muted); }
.avis-trend-item { font-size: 11px; padding: 3px 10px; border: 0.5px solid var(--border); border-radius: var(--radius-pill); }

/* ────────────────────────────────────────────────────────────────
   52. RH / TRAFFIC
   ──────────────────────────────────────────────────────────────── */

.rh-row          { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.rh-row:last-child { border-bottom: none; }
.rh-label        { font-size: 13px; color: var(--ink); flex: 1; }
.rh-val          { font-family: var(--font-mono); font-size: 13px; color: var(--ink); min-width: 40px; text-align: right; }
.rh-delta        { font-size: 11px; margin-left: 4px; }

.traffic-item    { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; }
.traffic-source  { font-size: 13px; color: var(--ink); }
.traffic-pct     { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.traffic-bar-w   { flex: 1; margin: 0 12px; height: 3px; background: var(--paper3); border-radius: var(--radius-pill); overflow: hidden; }
.traffic-bar-f   { height: 100%; background: var(--teal); border-radius: var(--radius-pill); }

/* ────────────────────────────────────────────────────────────────
   53. COMPETITOR
   ──────────────────────────────────────────────────────────────── */

.competitor-row          { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.competitor-row:last-child { border-bottom: none; }
.comp-name   { font-size: 13px; color: var(--ink); }
.comp-raised { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.comp-dots   { display: flex; gap: 4px; }
.comp-dot    { width: 6px; height: 6px; background: var(--paper3); border-radius: 50%; }
.comp-dot.fill { background: var(--teal); }

/* ────────────────────────────────────────────────────────────────
   54. COMPAT CHECK
   ──────────────────────────────────────────────────────────────── */

.compat-title       { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.compat-item        { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.compat-item:last-child { border-bottom: none; }
.compat-icon        { font-size: 12px; }
.compat-name        { flex: 1; color: var(--ink); }
.compat-status      { font-size: 11px; padding: 3px 8px; border: 0.5px solid; border-radius: var(--radius-pill); font-weight: 500; }
.cs-ok   { background: var(--positive-bg); color: var(--positive); border-color: rgba(22,163,74,0.15); }
.cs-warn { background: var(--warning-bg);  color: var(--warning);  border-color: var(--warning-border); }
.cs-ko   { background: var(--rust-bg);     color: var(--rust);     border-color: var(--rust-border); }

.incompat-warn { margin-top: 8px; padding: 10px 12px; background: var(--rust-bg); border: 0.5px solid var(--rust-border); border-radius: var(--radius-md); font-size: 12px; color: var(--rust); }

/* ────────────────────────────────────────────────────────────────
   55. NAV BADGE
   ──────────────────────────────────────────────────────────────── */

.nav-badge { padding: 4px 10px; font-size: 12px; background: var(--paper3); color: var(--muted); border: 0.5px solid var(--border); border-radius: var(--radius-pill); }

/* ────────────────────────────────────────────────────────────────
   56. ANIMATIONS
   ──────────────────────────────────────────────────────────────── */

@keyframes fadeIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.animate-fade  { animation: fadeIn  0.25s ease-out both; }
.animate-slide { animation: slideIn 0.3s  ease-out both; }

/* ────────────────────────────────────────────────────────────────
   57. CONTEXTUAL LINKS
   ──────────────────────────────────────────────────────────────── */

a.entity-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--muted);
  transition: border-color 0.15s, color 0.15s;
}
a.entity-link:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
  border-bottom-style: solid;
}

a.action-link {
  color: var(--teal);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
}
a.action-link:hover { text-decoration: underline; }

/* ────────────────────────────────────────────────────────────────
   58. FOOTNOTES / SOURCES
   ──────────────────────────────────────────────────────────────── */

.fn-ref {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  vertical-align: super;
  line-height: 0;
  cursor: help;
  border-bottom: 1px dotted var(--muted);
  padding: 0 1px;
  text-decoration: none;
}
.fn-ref:hover { color: var(--teal); border-bottom-color: var(--teal); }

.sources {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 0.5px solid var(--border);
}

.sources-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.source-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.source-item {
  display: flex;
  gap: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

.source-num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  min-width: 16px;
  flex-shrink: 0;
}

.source-item a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--muted);
  word-break: break-all;
}
.source-item a:hover { color: var(--teal); border-bottom-color: var(--teal); }

.src-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--muted2);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.src-badge:hover { opacity: 1; color: var(--teal); }
.src-badge::before { content: '↗'; font-size: 7px; }

/* ────────────────────────────────────────────────────────────────
   59. LIST PAGES
   ──────────────────────────────────────────────────────────────── */

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.list-title { font-family: var(--font-display); font-size: 28px; font-weight: 900; color: var(--ink); }
.list-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.list-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper2);
  border: 0.5px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  margin-bottom: 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-xs);
}
.list-search:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-bg);
}
.list-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
}
.list-search input::placeholder { color: var(--muted2); }
.list-search-icon  { color: var(--muted); font-size: 16px; }
.list-search-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

.list-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.list-filter {
  padding: 7px 16px;
  font-size: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.list-filter:hover { border-color: var(--border2); color: var(--ink); background: var(--paper3); }
.list-filter.active { background: var(--teal-bg); color: var(--teal); border-color: var(--teal-border); }

.list-filter-sep { width: 0.5px; height: 20px; background: var(--border); }

.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.list-card {
  position: relative;
  background: var(--paper2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  color: var(--ink);
  display: block;
  box-shadow: var(--shadow-xs);
}
.list-card:hover { border-color: var(--teal-border); box-shadow: var(--shadow-sm); }

.list-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.list-card-logo {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper3);
}

.list-card-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); }
.list-card-sub  { font-size: 12px; color: var(--muted); margin-top: 1px; }

.list-card-tags    { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }

.list-card-metrics { display: flex; gap: 16px; }
.lcm-val   { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.lcm-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

.list-card-score {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
}

.list-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 32px;
}

.list-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.list-page-btn:hover { border-color: var(--border2); color: var(--ink); background: var(--paper3); }
.list-page-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.list-page-btn:disabled { opacity: 0.3; cursor: default; }

.list-page-info { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 0 12px; }

.list-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.list-empty-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.4; }
.list-empty-text { font-size: 14px; }

/* ────────────────────────────────────────────────────────────────
   60. AUDIENCE GATING
   ──────────────────────────────────────────────────────────────── */

.gate-premium { display: none; }
.gate-lp { display: none; }
body.user-premium .gate-premium { display: block; }
body.user-lp .gate-lp { display: block; }
body.user-lp .gate-premium { display: block; }

.gate-premium-teaser {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  position: relative;
}
.gate-premium-teaser::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, var(--paper) 90%);
}

.gate-cta { text-align: center; padding: 24px; margin-top: -40px; position: relative; z-index: 2; }
.gate-cta-text { font-size: 13px; color: var(--muted); margin-bottom: 10px; }

/* ────────────────────────────────────────────────────────────────
   61. MOCKUP MARKERS
   ──────────────────────────────────────────────────────────────── */

.mockup {
  text-decoration: line-through;
  text-decoration-color: var(--rust);
  text-decoration-thickness: 1.5px;
  opacity: 0.55;
}

.mockup-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  opacity: 0.7;
  margin-left: 4px;
  vertical-align: super;
}

.mockup-section { position: relative; opacity: 0.45; }
.mockup-section::after {
  content: 'MOCKUP — PAS DE SOURCE';
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

/* ────────────────────────────────────────────────────────────────
   62. EMPTY STATES
   ──────────────────────────────────────────────────────────────── */

.card:empty,
.dash-2col:empty,
.dash-3col:empty,
.section:empty,
.flux-item:empty { display: none; }

.container > *:last-child { margin-bottom: 0; }

/* ────────────────────────────────────────────────────────────────
   63. RESPONSIVE
   ──────────────────────────────────────────────────────────────── */



/* ════════════════════════════════════════════════════════════════
   64. LIFE & PERSONALITY — Design refresh
   Touches subtiles pour donner du caractère sans casser le système
   ════════════════════════════════════════════════════════════════ */

/* ── Fond avec grain subtil ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px;
  pointer-events: none;
}

/* ── Logo SKOUER avec accent coloré ── */
.nav-logo {
  background: linear-gradient(135deg, var(--ink) 0%, var(--rust) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.1em;
  font-size: 16px;
  transition: opacity 0.2s;
}
.nav-logo:hover { opacity: 0.8; }

[data-theme="dark"] .nav-logo {
  background: linear-gradient(135deg, var(--ink) 0%, var(--rust) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Nav tabs plus expressifs ── */
.nav-tab {
  position: relative;
  transition: color 0.2s, background 0.2s, transform 0.15s;
}
.nav-tab:hover {
  transform: translateY(-1px);
}
.nav-tab.active {
  color: var(--rust);
  background: var(--rust-bg);
  font-weight: 600;
}
.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: var(--rust);
  border-radius: 2px;
}

/* ── Cards avec micro-animations ── */
.card {
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border2);
  transform: translateY(-2px);
}

/* ── KPI cards avec accent de couleur en haut ── */
.kpi-card {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--rust));
  opacity: 0;
  transition: opacity 0.2s;
}
.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kpi-card:hover::before {
  opacity: 1;
}

/* ── KPI valeurs plus expressives ── */
.kpi-val {
  font-size: 24px;
  background: linear-gradient(135deg, var(--ink) 60%, var(--muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Section titles avec trait animé ── */
.section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-title::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Flux items avec hover subtil ── */
.flux-item {
  border-radius: var(--radius-md);
  padding: 10px 8px;
  margin: 0 -8px;
  transition: background 0.15s;
  border-bottom: 0.5px solid var(--border);
}
.flux-item:hover {
  background: var(--paper3);
}

/* ── Badges animés ── */
.alert-chip {
  transition: opacity 0.15s, box-shadow 0.15s, transform 0.15s;
}
.alert-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ── Live dot plus vivante ── */
.live-dot {
  box-shadow: 0 0 0 0 var(--positive);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); opacity: 1; }
  70%  { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); opacity: 0.8; }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); opacity: 1; }
}

/* ── Ticker avec séparateurs plus visibles ── */
.ticker {
  background: linear-gradient(to right, var(--paper2), var(--paper3), var(--paper2));
}

/* ── Boutons et liens d'action ── */
.action-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s, gap 0.2s;
}
.action-link:hover {
  gap: 8px;
  color: var(--teal);
}

/* ── Champ de recherche nav ── */
.nav-search {
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.nav-search:hover {
  border-color: var(--border2);
  background: var(--paper2);
}

/* ── Page title avec soulignement décoratif ── */
.page-title h1 {
  position: relative;
  display: inline-block;
}

/* ── Scrollbar plus douce ── */
::-webkit-scrollbar-thumb {
  background: var(--border2);
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted2);
}

/* ── Animation d'apparition des cards au chargement ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .kpi-card {
  animation: fadeSlideUp 0.3s ease both;
}
.kpi-card:nth-child(1) { animation-delay: 0.03s; }
.kpi-card:nth-child(2) { animation-delay: 0.06s; }
.kpi-card:nth-child(3) { animation-delay: 0.09s; }
.kpi-card:nth-child(4) { animation-delay: 0.12s; }
.kpi-card:nth-child(5) { animation-delay: 0.15s; }
.kpi-card:nth-child(6) { animation-delay: 0.18s; }

/* ── Focus visible accessible ── */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ════════════════════════════════════════════════════════════════
   65. STARTUP TECH MODERNE — Bold refresh v2
   Couleurs audacieuses, glassmorphism, gradients, animations
   ════════════════════════════════════════════════════════════════ */

/* ── Nouvelles variables d'ambiance ── */
:root {
  --glow-rust:  rgba(232, 22, 46, 0.15);
  --glow-teal:  rgba(10, 102, 64, 0.15);
  --glow-gold:  rgba(154, 108, 16, 0.15);
  --gradient-hero: linear-gradient(135deg, #0a0a0f 0%, #1a0a12 50%, #0a1a12 100%);
  --gradient-rust: linear-gradient(135deg, var(--rust) 0%, #ff6b35 100%);
  --gradient-teal: linear-gradient(135deg, var(--teal) 0%, #00d4aa 100%);
  --gradient-gold: linear-gradient(135deg, var(--gold) 0%, #f0c040 100%);
  --gradient-surface: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(247,247,248,0.95) 100%);
}

[data-theme="dark"] {
  --gradient-surface: linear-gradient(145deg, rgba(24,24,27,0.95) 0%, rgba(17,17,19,0.98) 100%);
  --glow-rust:  rgba(240, 64, 80, 0.2);
  --glow-teal:  rgba(52, 198, 120, 0.2);
  --glow-gold:  rgba(212, 160, 48, 0.2);
}

/* ── Body avec fond dégradé subtil ── */
body {
  background: var(--paper);
  background-image: 
    radial-gradient(ellipse 80% 50% at 20% -10%, var(--glow-teal), transparent),
    radial-gradient(ellipse 60% 40% at 80% 110%, var(--glow-rust), transparent);
  background-attachment: fixed;
}

/* ── Nav glassmorphism renforcé ── */
.nav {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 24px rgba(0,0,0,0.04);
}

[data-theme="dark"] .nav {
  background: rgba(13, 13, 15, 0.75) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 4px 24px rgba(0,0,0,0.2);
}

/* ── Logo avec animation shimmer ── */
.nav-logo {
  background: linear-gradient(120deg, var(--ink) 0%, var(--rust) 40%, var(--ink) 60%, var(--teal) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
  font-size: 17px;
  letter-spacing: 0.12em;
}
@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Onglet Dashboard spécial ── */
.nav-tab[href="/"] {
  background: linear-gradient(135deg, var(--rust-bg), var(--teal-bg));
  border: 0.5px solid var(--border2);
}
.nav-tab[href="/"]:hover,
.nav-tab[href="/"].active {
  background: linear-gradient(135deg, var(--rust-bg), var(--teal-bg));
  border-color: var(--rust-border);
  box-shadow: 0 2px 8px var(--glow-rust);
}

/* ── Cards glassmorphism ── */
.card {
  background: var(--gradient-surface);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
}
.card:hover {
  border-color: rgba(255,255,255,0.9);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
}

[data-theme="dark"] .card {
  background: linear-gradient(145deg, rgba(28,28,32,0.95), rgba(20,20,24,0.98));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .card:hover {
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── KPI cards avec aplats colorés ── */
.kpi-card:nth-child(1) { --kpi-accent: var(--gradient-teal); --kpi-glow: var(--glow-teal); }
.kpi-card:nth-child(2) { --kpi-accent: var(--gradient-rust); --kpi-glow: var(--glow-rust); }
.kpi-card:nth-child(3) { --kpi-accent: var(--gradient-gold); --kpi-glow: var(--glow-gold); }
.kpi-card:nth-child(4) { --kpi-accent: var(--gradient-teal); --kpi-glow: var(--glow-teal); }
.kpi-card:nth-child(5) { --kpi-accent: var(--gradient-rust); --kpi-glow: var(--glow-rust); }
.kpi-card:nth-child(6) { --kpi-accent: var(--gradient-gold); --kpi-glow: var(--glow-gold); }

.kpi-card::before {
  background: var(--kpi-accent, var(--gradient-teal)) !important;
  height: 3px;
  opacity: 0.6;
  transition: opacity 0.2s, height 0.2s;
}
.kpi-card:hover::before {
  opacity: 1;
  height: 3px;
}
.kpi-card:hover {
  box-shadow: 0 8px 32px var(--kpi-glow, var(--glow-teal)), var(--shadow-md);
}

/* ── Ticker avec fond teinté ── */
.ticker {
  background: linear-gradient(90deg, 
    rgba(10,102,64,0.04) 0%, 
    transparent 30%, 
    transparent 70%, 
    rgba(232,22,46,0.04) 100%);
  border-bottom: 1px solid var(--border);
}

/* ── Alert chips avec glow ── */
.alert-chip--danger:hover  { box-shadow: 0 4px 16px var(--glow-rust); }
.alert-chip--success:hover { box-shadow: 0 4px 16px var(--glow-teal); }
.alert-chip--info:hover    { box-shadow: 0 4px 16px var(--glow-teal); }
.alert-chip--warning:hover { box-shadow: 0 4px 16px var(--glow-gold); }

/* ── Flux items avec bordure colorée au hover ── */
.flux-item {
  border-radius: var(--radius-md);
  transition: background 0.2s, border-left 0.2s, padding-left 0.2s;
  border-left: 2px solid transparent;
}
.flux-item:hover {
  background: linear-gradient(90deg, var(--paper3), transparent);
  border-left-color: var(--teal);
  padding-left: 12px;
}

/* ── Badges et tags avec micro-animation ── */
.badge, .tag, .pill {
  transition: transform 0.15s, box-shadow 0.15s;
}
.badge:hover, .tag:hover, .pill:hover {
  transform: scale(1.05);
}

/* ── Page title hero section ── */
.page-title {
  position: relative;
  padding: 8px 0 16px;
}
.page-title h1 {
  font-size: 26px;
  background: linear-gradient(135deg, var(--ink) 60%, var(--muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 40px; height: 3px;
  background: var(--gradient-rust);
  border-radius: 2px;
}

/* ── Section titles avec pill colorée ── */
.section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal-bg);
  border: 0.5px solid var(--teal-border);
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  letter-spacing: 0.14em;
}
.section-title::before {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

/* ── Animations de chargement en cascade améliorées ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Liens entités avec soulignement animé ── */
.entity-link {
  position: relative;
  font-weight: 500;
}
.entity-link::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--teal);
  transition: width 0.2s ease;
}
.entity-link:hover::after {
  width: 100%;
}

/* ── Scrollbar avec couleur ── */
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--teal), var(--rust));
  opacity: 0.5;
}

/* ── Focus ring coloré ── */
:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Sélection de texte colorée ── */
::selection {
  background: var(--rust-bg);
  color: var(--rust);
}


/* ════════════════════════════════════════════════════════════════
   66. SEARCH DROPDOWN — Fix transparence
   ════════════════════════════════════════════════════════════════ */

#nav-search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  background: var(--paper2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  z-index: 200;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="dark"] #nav-search-suggestions {
  background: var(--paper2);
  border-color: var(--border2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
}

.search-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  color: var(--ink);
}
.search-suggestion:last-child { border-bottom: none; }
.search-suggestion:hover,
.search-suggestion.is-active {
  background: var(--paper3);
}

.search-suggestion-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-suggestion-copy strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.search-suggestion-copy span {
  font-size: 11px;
  color: var(--muted);
}

.search-suggestion-type {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--teal);
  background: var(--teal-bg);
  border: 0.5px solid var(--teal-border);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.search-empty {
  padding: 16px 14px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  background: var(--paper2);
  position: relative;
  z-index: 201;
}

#nav-search-suggestions {
  z-index: 201;
  background: var(--paper2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Positionnement relatif du conteneur parent */
.nav-search {
  position: relative;
}


/* ════════════════════════════════════════════════════════════════
   67. YUKA SEARCH ITEMS — Fix transparence
   ════════════════════════════════════════════════════════════════ */

.yuka-search-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  background-color: var(--paper2) !important;
  border-bottom: 0.5px solid var(--border);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.15s;
}
.yuka-search-item:last-child { border-bottom: none; }
.yuka-search-item:hover {
  background-color: var(--paper3) !important;
  color: var(--ink);
}

[data-theme="dark"] .yuka-search-item {
  background-color: var(--paper2) !important;
}
[data-theme="dark"] .yuka-search-item:hover {
  background-color: var(--paper3) !important;
}


/* ════════════════════════════════════════════════════════════════
   MOBILE NAV — Hamburger + Drawer
   ════════════════════════════════════════════════════════════════ */

.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0.5px solid var(--border2);
  border-radius: var(--radius-md);
  background: var(--paper3);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.nav-hamburger:hover { background: var(--paper); color: var(--ink); }

.nav-hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 18px;
}
.nav-hamburger-icon span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s, width 0.2s;
  transform-origin: center;
}
.nav-hamburger-icon span:nth-child(2) { width: 12px; }

.nav--open .nav-hamburger-icon span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav--open .nav-hamburger-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav--open .nav-hamburger-icon span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); width: 18px; }

.nav-drawer {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: 56px;
  background: rgba(0,0,0,0.25);
  z-index: 98;
  animation: skFadeIn 0.2s ease;
}
@keyframes skFadeIn { from { opacity: 0; } to { opacity: 1; } }

.nav--open + .nav-drawer-backdrop { display: block; }

.nav-drawer-inner {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: 8px 0 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  animation: skSlideDown 0.22s cubic-bezier(0.4,0,0.2,1);
}
[data-theme="dark"] .nav-drawer-inner { background: var(--paper2); }

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

.nav-drawer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 16px;
  background: var(--paper3);
  border: 0.5px solid var(--border2);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.nav-drawer-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(52,198,120,0.12); }
.nav-drawer-search input { flex:1; background:none; border:none; outline:none; color:var(--ink); font-family:var(--font-ui); font-size:14px; }
.nav-drawer-search input::placeholder { color: var(--muted2); }
.nav-drawer-search-icon { color: var(--muted); flex-shrink: 0; }

.nav-drawer-sep { height: 0.5px; background: var(--border); margin: 8px 0; }

.nav-drawer-link {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.nav-drawer-link:hover { color: var(--ink); background: var(--paper3); }
.nav-drawer-link.active { color: var(--teal); background: var(--teal-bg); border-left-color: var(--teal); font-weight: 600; }
.nav-drawer-link--user { color: var(--ink); font-size: 13px; }

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-3col { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr 1fr; }

  /* Nav — réduire padding et search */
  .nav { padding: 0 20px; }
  .nav-tab { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .nav-search input { width: 140px; }
}

@media (max-width: 960px) {
  /* Nav — masquer la search, réduire encore les tabs */
  .nav { padding: 0 16px; }
  .nav-tab { padding: 6px 7px; font-size: 11px; white-space: nowrap; }
  .nav-tabs { gap: 0; }
  .nav-search { display: none; }
}

@media (max-width: 768px) {
  /* Navigation — hamburger visible, tabs et search masqués */
  .nav-tabs    { display: none; }
  .nav-search  { display: none; }
  .nav-hamburger { display: flex !important; }
  .nav--open .nav-drawer { display: block !important; }

  /* Layout */
  .container { padding: 16px; }
  .nav { padding: 0 16px; }

  /* Grilles → colonne unique */
  .kpi-grid,
  .dash-grid,
  .dash-grid-4,
  .dash-2col,
  .dash-3col { grid-template-columns: 1fr; }

  /* Grilles avec sidebar */
  .main-grid,
  .main-grid-sm,
  .page-grid { grid-template-columns: 1fr; }

  /* Ticker scrollable sans scrollbar visible */
  .ticker {
    padding: 10px 16px;
    gap: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ticker::-webkit-scrollbar { display: none; }

  /* Tables scroll horizontal */
  .table-wrap,
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* En-têtes de page */
  .page-header  { flex-direction: column; align-items: flex-start; gap: 12px; }
  .list-header  { flex-direction: column; align-items: flex-start; gap: 10px; }
  .list-filters { flex-wrap: wrap; gap: 6px; }
  .breadcrumb   { padding: 8px 16px; font-size: 12px; }

  /* Titres */
  h1, .h1     { font-size: 20px; }
  h2, .h2     { font-size: 16px; }
  .page-title h1 { font-size: 22px; }
  .list-title { font-size: 22px; }

  /* Kanban CRM */
  .kanban { grid-template-columns: 1fr !important; }
  .pipeline-stats { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 480px) {
  .kpi-grid   { grid-template-columns: 1fr; }
  h1, .h1     { font-size: 18px; }
  .nav        { padding: 0 14px; }
  .container  { padding: 12px; }
}

/* ── Pagination mobile ── */
@media (max-width: 768px) {
  .list-pagination {
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 16px;
  }
  .list-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 11px;
  }
}

/* ── Sources / footer mobile ── */
@media (max-width: 768px) {
  .sources { padding: 16px 0 0; }
  .source-item {
    flex-direction: column;
    gap: 2px;
  }
  .source-item a {
    word-break: break-all;
  }
}