/* ================================================================
   KEYCE CFA DASHBOARD — DESIGN SYSTEM 2026
   Premium UI · Inter · Chart.js · CSS Variables
   ----------------------------------------------------------------
   B-23 — CONVENTION CSS
   ● Aucune couleur littérale (#rrggbb / rgb()) en dehors de :root
     et [data-theme="light"]. Toujours utiliser var(--c-*).
   ● Règle Stylelint recommandée : "color-no-invalid-hex": true
     + plugin custom "no-color-literal" (voir .stylelintrc.json).
   ● Nomenclature tokens :
       --c-<rôle>         surfaces/textes principaux
       --c-<rôle>-<état>  variantes (hover, dark, mid, light…)
   ● Sections délimitées par : /* ── <Nom> ─────────── * /
   ● Ne jamais ajouter !important sauf pour contrer un framework.
================================================================ */

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

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
  /* Primary */
  --c-primary:       #7C3AED;
  --c-primary-dark:  #5B21B6;
  --c-primary-mid:   #6D28D9;
  --c-primary-light: #9F67FF;
  --c-primary-xlt:   rgba(124,58,237,0.05);

  /* Semantic */
  --c-green:         #10b981;
  --c-green-light:   rgba(16,185,129,0.10);
  --c-red:           #ef4444;
  --c-red-light:     rgba(239,68,68,0.10);
  --c-orange:        #F59E0B;
  --c-orange-light:  rgba(245,158,11,0.10);
  --c-blue:          #3B82F6;
  --c-blue-light:    rgba(59,130,246,0.10);
  --c-teal:          #06B6D4;
  --c-teal-light:    rgba(6,182,212,0.10);
  --c-accent:        #4f46e5;
  --c-success:       #10b981;
  --c-danger:        #ef4444;
  --c-warning:       #f59e0b;

  /* Surfaces - Dark Mode Premium */
  --c-bg:            #0a0a0f;
  --c-card:          #16162a;
  --c-card2:         #1c1c30;
  --c-card-hover:    #1e1e32;
  --c-sidebar:       #111118;
  --c-sidebar-hover: rgba(255,255,255,0.06);
  --c-border:        rgba(124, 58, 237, 0.15);

  /* Text - Dark Mode */
  --c-text:          #e8e8f0;
  --c-text-1:        #e8e8f0;
  --c-text-2:        #b0b0c8;
  --c-text-3:        #9999bb;
  --c-text-muted:    #9999bb;
  --c-text-4:        #8888aa; /* was #7777aa — lifted for WCAG AA (≥4.5:1 on all surfaces) */
  --c-text-inv:      #FFFFFF;

  /* Borders */
  --c-border-md:     rgba(124, 58, 237, 0.2);

  /* Shadows */
  --s-sm:   0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
  --s-md:   0 2px 8px rgba(0,0,0,0.05), 0 6px 24px rgba(0,0,0,0.06);
  --s-lg:   0 4px 16px rgba(0,0,0,0.07), 0 16px 48px rgba(0,0,0,0.08);
  --s-hover:0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --s-primary: 0 4px 20px rgba(124,58,237,0.28);

  /* Radius */
  --r-xs:  6px;   --r-sm:  10px;  --r-md:  14px;
  --r-lg:  18px;  --r-xl:  24px;  --r-2xl: 32px;
  --r-full: 9999px;

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px;

  /* Typography */
  --fs-2xs:11px; --fs-xs:11px; --fs-sm:12px; --fs-base:13px;
  --fs-md:14px;  --fs-lg:15px; --fs-xl:18px; --fs-2xl:22px;
  --fs-3xl:28px; --fs-4xl:36px; --fs-hero:48px;

  /* Motion */
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   130ms;
  --dur:        200ms;
  --dur-slow:   320ms;

  /* Layout */
  --sidebar-w: 256px;
  --header-h:  64px;

  /* Topbar surface */
  --c-topbar: #111118;

  /* Indique au navigateur que le thème par défaut est sombre */
  color-scheme: dark;

  /* Surfaces additionnelles — dark mode */
  --c-input-bg:    #09091e;
  --c-table-head:  #0d0d22;
  --c-table-row:   #1a1a2e;
  --c-table-row2:  #161628;
  --c-item-bg:     #1a1a2e;
  --c-drawer-bg:   #111128;
  --c-badge-text:  #ffffff;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

::selection { background: var(--c-primary-light); color: var(--c-primary); }

/* ================================================================
   LAYOUT
================================================================ */
.layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #0f0f1a 0%, #0d0d17 100%);
  position: fixed;
  left: 0; top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 300;
  overflow: hidden;
  flex-shrink: 0;
}

/* Logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.sidebar-logo-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-primary) 0%, #A855F7 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(124,58,237,0.40);
}

.sidebar-logo-name {
  font-size: 14px; font-weight: 700;
  color: #fff; letter-spacing: -0.3px;
}

.sidebar-logo-sub {
  font-size: 11px; font-weight: 400;
  color: rgba(255,255,255,0.38);
  margin-top: 1px;
  line-height: 1.4;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-section-label {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 12px 8px 5px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  user-select: none;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  position: relative;
  margin-bottom: 2px;
}

.nav-item:hover {
  background: var(--c-sidebar-hover);
  color: rgba(255,255,255,0.88);
}

.nav-item.active {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-mid) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124,58,237,0.38);
}

.nav-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease);
  color: inherit;
}

.nav-item:hover .nav-icon { background: rgba(255,255,255,0.11); }
.nav-item.active .nav-icon { background: rgba(255,255,255,0.20); }

.nav-label { flex: 1; }

.nav-badge {
  font-size: 11px; font-weight: 600;
  background: var(--c-primary-light);
  color: var(--c-primary);
  padding: 2px 7px;
  border-radius: var(--r-full);
  line-height: 1.6;
}
.nav-item.active .nav-badge {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-footer-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-green);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.5; transform:scale(.75); }
}

.sidebar-footer-text {
  font-size: 11px; color: rgba(255,255,255,0.28); letter-spacing: 0.03em; line-height: 1.4;
}

/* ── Top Header ──────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: var(--sidebar-w); right: 0;
  height: var(--header-h);
  background: var(--c-topbar, #111118);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 14px;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.topbar-search {
  position: relative;
  flex: 1; max-width: 320px;
}

.topbar-search-icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-3); display: flex; pointer-events: none;
}

.topbar-search input {
  width: 100%; height: 38px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--c-border);
  background: var(--c-input-bg);
  padding: 0 14px 0 38px;
  font-family: inherit; font-size: var(--fs-base);
  color: var(--c-text-1); outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.topbar-search input::placeholder { color: var(--c-text-3); }
.topbar-search input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-xlt);
  background: var(--c-input-bg);
}

.topbar-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}

.topbar-realtime {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: var(--c-green-light);
  color: var(--c-green);
  font-size: 12px; font-weight: 600;
  border: none; cursor: default;
}

.topbar-realtime-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-green);
  animation: pulse 2.2s ease-in-out infinite;
}

.topbar-icon-btn {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--c-border);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-2); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.topbar-icon-btn:hover { background: var(--c-primary-xlt); color: var(--c-primary); }

.topbar-date {
  font-size: 12px; font-weight: 500;
  color: var(--c-text-3); white-space: nowrap;
}

.topbar-export {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-sm); font-weight: 600;
  border: none; cursor: pointer;
  box-shadow: var(--s-primary);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring);
}
.topbar-export:hover { background: var(--c-primary-dark); transform: scale(1.02); }

/* ── Main Content ─────────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  padding: calc(var(--header-h) + 32px) 32px 48px;
  min-height: 100vh;
  max-width: 1440px;
}

/* ── Pages ────────────────────────────────────────────────────── */
.page { display: none; }
.page.active {
  display: block;
  animation: pageIn .22s var(--ease) both;
}
@keyframes pageIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Page Header ─────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}

.page-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -0.7px;
  line-height: 1.1;
  display: flex; align-items: center; gap: 12px;
}

.page-title::before {
  content:'';
  display: inline-block;
  width: 4px; height: 26px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--c-primary) 0%, #A855F7 100%);
  flex-shrink: 0;
}

.page-subtitle {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  margin-top: 3px;
  font-weight: 400;
}

/* ── Section ─────────────────────────────────────────────────── */
.section { margin-bottom: 24px; }

.section-label {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* ================================================================
   CARDS
================================================================ */
.card {
  background: var(--c-card);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { 
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

/* ── KPI Grid ─────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ── KPI Card ─────────────────────────────────────────────────── */
.kpi-card {
  background: var(--c-card);
  border-radius: var(--r-xl);
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.kpi-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

/* Bottom accent line */
.kpi-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kpi-color, var(--c-primary));
  opacity: .8;
}

/* Icon */
.kpi-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--kpi-color, var(--c-primary));
  color: #fff;
  margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.kpi-icon svg { width: 22px; height: 22px; }

/* Value */
.kpi-value {
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -1.5px;
  line-height: 1;
  font-feature-settings: 'tnum' 1;
}

.kpi-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text-2);
  margin-top: 6px;
}

.kpi-sub {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-top: 3px;
}

/* Trend badge — absolute top-right */
.kpi-badge {
  position: absolute;
  top: 20px; right: 20px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--r-full);
}
.kpi-badge.up   { background: var(--c-green-light); color: var(--c-green); }
.kpi-badge.down { background: var(--c-red-light);   color: var(--c-red); }
.kpi-badge.flat { background: var(--c-primary-light); color: var(--c-primary); }
.kpi-badge.n1   { background: rgba(245,158,11,0.15); color: #f59e0b; font-size: 11px; letter-spacing: 0.03em; }

/* Temporal week-comparison row — juste sous la valeur principale */
.kpi-week-delta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 2px 0 6px;
  opacity: 0.9;
  transition: color .2s;
}
.kpi-week-delta.up   { color: var(--c-green); }
.kpi-week-delta.down { color: var(--c-red); }
.kpi-week-delta.flat { color: var(--c-primary); opacity: 0.55; }

/* Specific KPI color tokens */
.kpi-card.kpi-green  { --kpi-color: var(--c-green); }
.kpi-card.kpi-purple { --kpi-color: var(--c-primary); }
.kpi-card.kpi-blue   { --kpi-color: var(--c-blue); }
.kpi-card.kpi-red    { --kpi-color: var(--c-red); }
.kpi-card.kpi-orange { --kpi-color: var(--c-orange); }
.kpi-card.kpi-teal   { --kpi-color: var(--c-teal); }

/* ── Hero Card ───────────────────────────────────────────────── */
.hero-card {
  background: linear-gradient(135deg, #4C1D95 0%, var(--c-primary) 50%, #7E22CE 100%);
  border-radius: var(--r-xl);
  padding: 32px 40px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(124,58,237,0.30);
  position: relative;
  overflow: hidden;
}

.hero-card::before {
  content:'';
  position: absolute;
  top:-80px; right:-60px;
  width:280px; height:280px;
  border-radius:50%;
  background: rgba(255,255,255,0.05);
  pointer-events:none;
}

.hero-section { display: flex; flex-direction: column; gap: 6px; }

.hero-label {
  font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1.4;
  color: rgba(255,255,255,0.85); /* was 0.60 — WCAG AA requires ≥4.5:1 on gradient */
}

.hero-value {
  font-size: var(--fs-hero);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  font-feature-settings: 'tnum' 1;
}

.hero-unit { font-size: var(--fs-2xl); font-weight: 600; opacity: .90; margin-left: 4px; } /* was .7 — WCAG AA */

.hero-obj {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.85); /* was 0.55 — WCAG AA requires ≥4.5:1 on gradient */
  margin-top: 2px;
}

.hero-progress {
  height: 5px;
  background: rgba(255,255,255,0.18);
  border-radius: var(--r-full);
  margin-top: 10px;
  overflow: hidden;
}

.hero-progress-fill {
  height: 100%;
  background: #fff;
  border-radius: var(--r-full);
  transition: width .6s var(--ease-out);
}

.hero-percent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: var(--fs-sm); font-weight: 700;
  background: rgba(255,255,255,0.18);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--r-full);
}

.hero-divider {
  width: 1px;
  background: rgba(255,255,255,0.15);
  margin: 0 40px;
  align-self: stretch;
}

/* ── Chart Card ──────────────────────────────────────────────── */
.chart-card {
  background: var(--c-card);
  border-radius: var(--r-xl);
  padding: 24px;
  border: 1px solid var(--c-border);
  box-shadow: var(--s-sm);
}

.chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.chart-card-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-text-1);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 10px;
  border-left: 3px solid var(--c-primary);
}

.chart-card-sub {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-text-3);
  margin-left: 4px;
}

.chart-wrap {
  position: relative;
  height: 220px;
}

/* ── Charts Grid ─────────────────────────────────────────────── */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.charts-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* ================================================================
   TABLE
================================================================ */
.table-card {
  background: var(--c-card);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  box-shadow: var(--s-sm);
  overflow: hidden;
}

.table-card-header {
  padding: 20px 24px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--c-border);
}

.table-card-title {
  font-size: var(--fs-md); font-weight: 700;
  color: var(--c-text-1);
  display: flex; align-items: center; gap: 10px;
  padding-left: 10px;
  border-left: 3px solid var(--c-primary);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.data-table thead th {
  padding: 12px 20px;
  text-align: left;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-text-4);
  text-transform: uppercase; letter-spacing: .6px;
  background: var(--c-table-head);
  border-bottom: 1px solid rgba(124,58,237,0.18);
}

.data-table tbody tr {
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: background var(--dur-fast) var(--ease);
}

.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--c-primary-xlt); }

.data-table tbody td {
  padding: 13px 20px;
  color: var(--c-text-1);
  vertical-align: middle;
}

.data-table td:first-child { font-weight: 600; }

/* Checkbox column */
.data-table td.check-col,
.data-table th.check-col {
  width: 40px; padding: 12px 12px 12px 20px;
}

/* ================================================================
   BADGES & PILLS
================================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600;
  white-space: nowrap;
}

.badge-green   { background: var(--c-green-light);   color: var(--c-green); }
.badge-red     { background: var(--c-red-light);     color: var(--c-red); }
.badge-orange  { background: var(--c-orange-light);  color: var(--c-orange); }
.badge-blue    { background: var(--c-blue-light);    color: var(--c-blue); }
.badge-primary { background: var(--c-primary-light); color: var(--c-primary); }
.badge-teal    { background: var(--c-teal-light);    color: var(--c-teal); }
.badge-gray    { background: rgba(0,0,0,0.06);       color: var(--c-text-2); }

.badge[data-type="contrat"]  { background: var(--c-primary-light); color: var(--c-primary); }
.badge[data-type="ca"]       { background: var(--c-green-light);   color: var(--c-green); }
.badge[data-type="poste"]    { background: var(--c-blue-light);    color: var(--c-blue); }
.badge[data-type="candidat"] { background: var(--c-teal-light);    color: var(--c-teal); }
.badge[data-type="rupture"]  { background: var(--c-red-light);     color: var(--c-red); }
.badge[data-type="note"]     { background: rgba(0,0,0,0.06);       color: var(--c-text-2); }

/* Pill filter */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 500;
  border: 1.5px solid var(--c-border);
  background: var(--c-card);
  color: var(--c-text-2);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.pill:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-xlt); }
.pill.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: var(--s-primary); }

/* ================================================================
   PROGRESS BARS
================================================================ */
.progress-bar {
  height: 7px;
  background: rgba(0,0,0,0.06);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--c-primary);
  transition: width .5s var(--ease-out);
}

.progress-fill.green  { background: var(--c-green); }
.progress-fill.orange { background: var(--c-orange); }
.progress-fill.red    { background: var(--c-red); }
.progress-fill.blue   { background: var(--c-blue); }
.progress-fill.purple { background: var(--c-primary); }

/* ================================================================
   BUTTONS
================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: var(--fs-base); font-weight: 600;
  border: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--c-primary); color: #fff;
  box-shadow: 0 2px 10px rgba(124,58,237,0.30);
}
.btn-primary:hover { background: var(--c-primary-dark); transform: scale(1.02); }
.btn-primary:active { transform: scale(0.97); }

.btn-ghost {
  background: transparent; color: var(--c-primary);
  border: 1.5px solid var(--c-border);
}
.btn-ghost:hover { background: var(--c-primary-xlt); border-color: var(--c-primary-light); }

.btn-danger {
  background: var(--c-red-light); color: var(--c-red);
  border: 1.5px solid rgba(239,68,68,0.25);
}
.btn-danger:hover { background: var(--c-red); color: #fff; }

.btn-sm { padding: 6px 14px; font-size: var(--fs-sm); }
.btn-xs { padding: 4px 10px; font-size: var(--fs-xs); }

/* Backward-compat aliases for old button classes in JS/HTML */
.btn-apple       { @extend .btn; }
.btn-apple-ghost { @extend .btn; }

/* Simple override for old classes without extend support */
.btn-apple {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: var(--r-full);
  font-family: inherit; font-size: var(--fs-base); font-weight: 600;
  border: none; cursor: pointer;
  background: var(--c-primary); color: #fff;
  box-shadow: 0 2px 10px rgba(124,58,237,0.25);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring);
}
.btn-apple:hover { background: var(--c-primary-dark); transform: scale(1.02); }
.btn-apple:active { transform: scale(.97); }

.btn-apple-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: var(--r-full);
  font-family: inherit; font-size: var(--fs-base); font-weight: 600;
  border: 1.5px solid var(--c-border); cursor: pointer;
  background: transparent; color: var(--c-primary);
  transition: all var(--dur-fast) var(--ease);
}
.btn-apple-ghost:hover { background: var(--c-primary-xlt); border-color: var(--c-primary-light); }

.btn-apple-danger-sm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--r-full);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  border: 1.5px solid rgba(239,68,68,0.25); cursor: pointer;
  background: var(--c-red-light); color: var(--c-red);
  transition: all var(--dur-fast) var(--ease);
}
.btn-apple-danger-sm:hover { background: var(--c-red); color: #fff; }

/* ── CRUD Action Buttons (Choice 3B: icon + text) ──────────────── */
.crud-btn-edit {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-full);
  font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid rgba(124,58,237,0.28); cursor: pointer;
  background: rgba(124,58,237,0.10); color: #b08eff;
  transition: all var(--dur-fast) var(--ease); flex-shrink: 0;
}
.crud-btn-edit svg { width: 11px; height: 11px; flex-shrink: 0; }
.crud-btn-edit:hover { background: rgba(124,58,237,0.22); border-color: rgba(124,58,237,0.55); color: #c9a8ff; }

.crud-btn-danger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-full);
  font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid rgba(239,68,68,0.28); cursor: pointer;
  background: rgba(239,68,68,0.08); color: var(--c-red);
  transition: all var(--dur-fast) var(--ease); flex-shrink: 0;
}
.crud-btn-danger svg { width: 11px; height: 11px; flex-shrink: 0; }
.crud-btn-danger:hover { background: var(--c-red); color: #fff; border-color: var(--c-red); }

/* legacy alias */
.btn-apple-edit-sm {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-full);
  font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid rgba(124,58,237,0.28); cursor: pointer;
  background: rgba(124,58,237,0.10); color: #b08eff;
  transition: all var(--dur-fast) var(--ease); flex-shrink: 0;
}
.btn-apple-edit-sm:hover {
  background: rgba(124,58,237,0.22); border-color: rgba(124,58,237,0.55); color: #c9a8ff;
}

/* ================================================================
   FORMS — INPUTS / SELECTS
================================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-text-2);
  text-transform: uppercase; letter-spacing: .4px;
}

input, textarea, select {
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--c-text-1);
  background: var(--c-input-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 9px 14px;
  outline: none;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

/* Rétablir le fond transparent pour les inputs intégrés dans un conteneur stylisé */
.obj-target-field-input input[type="number"],
.obj-target-field-input input[type="number"]:focus {
  background: transparent !important;
  color: var(--c-text) !important;
  border: none !important;
  width: auto !important;
  padding: 7px 0 !important;
  box-shadow: none !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--c-primary);
  background: var(--c-input-bg) !important;
  color: var(--c-text-1) !important;
  box-shadow: 0 0 0 3px var(--c-primary-xlt);
}

input[type="checkbox"] {
  width: auto; cursor: pointer;
}

/* Filter bar */
.filter-bar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

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

.filter-label {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-text-3); text-transform: uppercase; letter-spacing: .4px;
  white-space: nowrap;
}

.filter-group select {
  width: auto; padding: 7px 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}

/* ================================================================
   FORMATION / ADVISOR CARDS
================================================================ */
.item-card {
  background: var(--c-card);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  box-shadow: var(--s-sm);
  padding: 20px 22px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.item-card:hover { box-shadow: var(--s-md); transform: translateY(-2px); }

.item-card-header {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 16px;
}

.item-card-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--item-color, var(--c-primary));
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
}
.item-card-icon svg { width: 18px; height: 18px; }

.item-card-info { flex: 1; min-width: 0; }

.item-card-name {
  font-size: var(--fs-md); font-weight: 700;
  color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.item-card-sub {
  font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 2px;
}

.item-card-stats {
  display: flex; gap: 14px;
  margin-bottom: 14px;
}

.item-card-stat { text-align: center; }

.item-card-stat-val {
  font-size: var(--fs-xl); font-weight: 800;
  color: var(--c-text); letter-spacing: -0.5px;
  font-feature-settings: 'tnum' 1;
}

.item-card-stat-lbl {
  font-size: 11px; font-weight: 600;
  color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1.4;
  margin-top: 1px;
}

/* ================================================================
   GRID LAYOUTS
================================================================ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.adv-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* ================================================================
   ACCORDION
================================================================ */
.accordion {
  background: var(--c-card);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  box-shadow: var(--s-sm);
  overflow: hidden;
  margin-bottom: 12px;
}

.accordion-header {
  display: flex; align-items: center;
  padding: 18px 22px;
  cursor: pointer;
  gap: 12px;
  user-select: none;
  transition: background var(--dur-fast) var(--ease);
}
.accordion-header:hover { background: var(--c-primary-xlt); }

.accordion-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: 17px; flex-shrink: 0;
}

.accordion-title {
  flex: 1;
  font-size: var(--fs-md); font-weight: 600;
  color: var(--c-text-1);
}

.accordion-chevron {
  width: 18px; height: 18px;
  color: var(--c-text-3);
  transition: transform var(--dur) var(--ease);
}
.accordion-header.open .accordion-chevron { transform: rotate(180deg); }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease);
}
.accordion-body.open { max-height: 2000px; }

.accordion-content {
  padding: 4px 22px 22px;
  border-top: 1px solid var(--c-border);
}

/* Old class aliases */
.apple-accordion { @extend .accordion; }
.apple-accordion-header { display: flex; align-items: center; padding: 18px 22px; cursor: pointer; gap: 12px; user-select: none; transition: background var(--dur-fast) var(--ease); }
.apple-accordion-title { display: flex; align-items: center; gap: 12px; flex: 1; font-size: var(--fs-md); font-weight: 600; color: var(--c-text-1); }
.apple-accordion-chevron { width: 18px; height: 18px; color: var(--c-text-3); transition: transform var(--dur) var(--ease); }
.apple-accordion-header.open .apple-accordion-chevron { transform: rotate(180deg); }
.apple-accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.apple-accordion-body.open { max-height: 2000px; }
.apple-accordion-content { padding: 4px 22px 22px; border-top: 1px solid var(--c-border); }
.acc-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--c-primary-light); color: var(--c-primary); font-size: 16px; flex-shrink: 0; }

/* ================================================================
   JOURNAL / EVENTS
================================================================ */
.journal-filters {
  display: flex; gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.journal-header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: var(--c-table-head);
  border-bottom: 1px solid rgba(124,58,237,0.18);
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-text-3); text-transform: uppercase; letter-spacing: .5px;
}

/* ── Journal table — compact dark (Choice 2B) ──────────────────── */
.journal-table-wrap {
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(124,58,237,0.18);
}
.journal-table-wrap table {
  width: 100%; border-collapse: collapse;
}
.journal-table-wrap thead th {
  background: var(--c-table-head); padding: 10px 14px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-4);
  text-transform: uppercase; letter-spacing: .5px; text-align: left;
  border-bottom: 1px solid rgba(124,58,237,0.18);
  white-space: nowrap;
}
.journal-table-wrap tbody tr {
  border-bottom: 1px solid rgba(124,58,237,0.08);
  transition: background var(--dur-fast) var(--ease);
}
.journal-table-wrap tbody tr:last-child { border-bottom: none; }
.journal-table-wrap tbody tr:nth-child(odd)  { background: var(--c-table-row); }
.journal-table-wrap tbody tr:nth-child(even) { background: var(--c-table-row2); }
.journal-table-wrap tbody tr:hover { background: var(--c-card-hover); }
.journal-table-wrap td {
  padding: 9px 14px; font-size: var(--fs-sm);
  color: var(--c-text); vertical-align: middle;
}
.journal-table-wrap td.col-check { width: 36px; text-align: center; }
.journal-table-wrap td.col-note  { color: var(--c-text-3); font-size: var(--fs-xs); max-width: 180px; }
.journal-table-wrap td.col-num   { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-primary-light); }
.journal-table-wrap td.col-actions { white-space: nowrap; }

/* ================================================================
   HEATMAP
================================================================ */
.heatmap-table {
  width: 100%;
  border-collapse: collapse;
}
.heatmap-table th {
  padding: 10px 12px;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-text-4); text-transform: uppercase; letter-spacing: .5px;
  text-align: center;
  background: var(--c-table-head);
}
.heatmap-table td {
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  font-size: var(--fs-sm); font-weight: 500;
}
.heatmap-table td.heat-1 { background: var(--c-primary-xlt); }
.heatmap-table td.heat-2 { background: var(--c-primary-light); color: var(--c-primary); }
.heatmap-table td.heat-3 { background: rgba(124,58,237,0.22); color: var(--c-primary); font-weight: 700; }
.heatmap-table td.heat-4 { background: rgba(124,58,237,0.50); color: #fff; font-weight: 700; }

/* ================================================================
   OBJECTIVES INPUT
================================================================ */
.objective-input-wrap {
  background: var(--c-item-bg);
  border: 1.5px solid rgba(124,58,237,0.22);
  border-radius: var(--r-md);
  padding: 10px 14px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.objective-input-wrap:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-xlt);
  background: var(--c-card2);
}
.objective-label {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-text-3); text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 4px;
}
.objective-input {
  width: 100%; border: none; background: transparent;
  font-family: inherit; font-size: var(--fs-xl); font-weight: 700;
  color: var(--c-text); padding: 0; outline: none;
}
.objective-unit {
  font-size: var(--fs-xs); color: var(--c-text-3);
  margin-top: 2px;
}

/* ================================================================
   ADVISOR RANKING
================================================================ */
.ranking-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-border);
  transition: background var(--dur-fast) var(--ease);
}
.ranking-row:last-child { border-bottom: none; }
.ranking-row:hover { background: var(--c-primary-xlt); }

.ranking-rank {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 800;
  background: var(--c-primary-light); color: var(--c-primary);
  flex-shrink: 0;
}
.ranking-rank.gold   { background: rgba(245,158,11,0.15); color: var(--c-orange); }
.ranking-rank.silver { background: rgba(148,163,184,0.15); color: #64748B; }
.ranking-rank.bronze { background: rgba(180,83,9,0.15);   color: #B45309; }

.ranking-info { flex: 1; min-width: 0; }
.ranking-name { font-size: var(--fs-base); font-weight: 600; color: var(--c-text); }
.ranking-meta { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 1px; }
.ranking-value { font-size: var(--fs-xl); font-weight: 800; color: var(--c-text); letter-spacing: -0.5px; }

/* ================================================================
   CALENDAR / DAILY JOURNAL
================================================================ */
.daily-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.daily-stat {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  text-align: center;
}
.daily-stat-val {
  font-size: var(--fs-2xl); font-weight: 800;
  color: var(--c-text); letter-spacing: -0.5px;
}
.daily-stat-lbl {
  font-size: var(--fs-xs); color: var(--c-text-3);
  margin-top: 2px; font-weight: 500;
}

/* ================================================================
   POSTE TABLE
================================================================ */
.poste-table-wrap {
  background: var(--c-card);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  box-shadow: var(--s-sm);
  overflow: hidden;
}

/* ================================================================
   TOAST
================================================================ */
@keyframes toastIn  { from { opacity:0; transform:translateX(-50%) translateY(16px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes toastOut { from { opacity:1; transform:translateX(-50%) translateY(0); } to { opacity:0; transform:translateX(-50%) translateY(16px); } }

.toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--c-card);
  color: var(--c-text);
  padding: 12px 24px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600;
  box-shadow: var(--s-lg);
  z-index: 9999;
  pointer-events: none;
  animation: toastIn .25s var(--ease-out) forwards;
}
.toast.hide {
  animation: toastOut .25s var(--ease) forwards;
}
.toast.success { background: var(--c-green);   color: #fff; }
.toast.error   { background: var(--c-red);     color: #fff; }
.toast.warning { background: var(--c-orange);  color: #fff; }
.toast.info    { background: var(--c-primary); color: #fff; }

/* ── B-26 — Toast undo (annulable) ───────────────────────────── */
.toast-undo {
  padding: 11px 18px 20px;
  pointer-events: all;
  min-width: 280px;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}
.toast-undo-msg {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.toast-undo-btn {
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
  white-space: nowrap;
}
.toast-undo-btn:hover { background: rgba(255,255,255,.35); }
.toast-undo-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(255,255,255,.2);
  border-radius: 0 0 12px 12px;
}
.toast-undo-progress {
  height: 100%;
  width: 100%;
  background: rgba(255,255,255,.55);
  border-radius: inherit;
  transition: width 0s;
}

/* ================================================================
   MISC HELPERS
================================================================ */
.divider {
  height: 1px; background: var(--c-border); margin: 20px 0;
}

.section-divider {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 18px 0 8px;
}

.text-muted { color: var(--c-text-3); }
.text-sm    { font-size: var(--fs-sm); }
.fw-700     { font-weight: 700; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 70px; }
  .sidebar-logo-name, .sidebar-logo-sub, .nav-label,
  .nav-badge, .sidebar-footer-text { display: none; }
  .sidebar-logo { justify-content: center; padding: 20px 10px; }
  .sidebar-logo-mark { margin: 0 auto; }
  .nav-item { justify-content: center; padding: 10px; }
  .sidebar-nav { padding: 14px 8px; }
  .main { padding: calc(var(--header-h) + 20px) 16px 32px; }
}

@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-card { grid-template-columns: 1fr; gap: 20px; }
  .hero-divider { width: 100%; height: 1px; margin: 0; }
}

/* ================================================================
   MICRO-INTERACTIONS
================================================================ */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.kpi-card:hover .kpi-icon {
  transform: scale(1.08) rotate(-3deg);
  transition: transform var(--dur) var(--ease-spring);
}

@keyframes trendPulseGreen {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  50%      { box-shadow: 0 0 0 4px rgba(16,185,129,0.15); }
}
.kpi-badge.up { animation: trendPulseGreen 2.5s ease-in-out infinite; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-4); }

/* ================================================================
   COMPATIBILITY ALIASES — Old class names from original HTML/JS
================================================================ */

/* apple-table → same as data-table */
.apple-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-base);
}
.apple-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-text-4); text-transform: uppercase; letter-spacing: .6px;
  background: var(--c-table-head); border-bottom: 1px solid rgba(124,58,237,0.18);
}
.apple-table tbody tr {
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: background var(--dur-fast) var(--ease);
}
.apple-table tbody tr:last-child { border-bottom: none; }
.apple-table tbody tr:hover { background: var(--c-primary-xlt); }
.apple-table tbody td {
  padding: 12px 16px; color: var(--c-text-1); vertical-align: middle;
}
.apple-table tbody td:first-child { font-weight: 600; }

/* apple-card → generic card */
.apple-card {
  background: var(--c-card); border-radius: var(--r-xl);
  border: 1px solid var(--c-border); box-shadow: var(--s-sm);
}

/* select-apple — Dark Cavity styled select */
.select-apple {
  font-family: inherit; font-size: var(--fs-base); color: var(--c-text-2);
  background: var(--c-input-bg) !important;
  border: 1.5px solid rgba(124,58,237,0.20);
  border-radius: var(--r-md); padding: 9px 36px 9px 14px; outline: none;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239F67FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.select-apple:focus {
  border-color: var(--c-primary); background-color: var(--c-input-bg) !important;
  box-shadow: 0 0 0 3px var(--c-primary-xlt);
}
.select-apple option { background: var(--c-input-bg); color: var(--c-text-1); }

/* select-apple en mode clair : forcer la surcharge des !important */
[data-theme="light"] .select-apple {
  background: var(--c-input-bg) !important;
  color: var(--c-text-2) !important;
  border-color: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] .select-apple:focus {
  background-color: var(--c-input-bg) !important;
}

/* input-row — horizontal form row */
.input-row {
  display: flex; gap: 8px; align-items: center;
}
.input-row input, .input-row select {
  flex: 1; min-width: 0;
}

/* form-row grids */
.form-row {
  display: grid; gap: 16px;
}
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: repeat(3, 1fr); }
.form-row-4 { grid-template-columns: repeat(4, 1fr); }

/* form-input shorthand — suit le thème actif */
.form-input {
  font-family: inherit; font-size: var(--fs-base); color: var(--c-text-1) !important;
  background: var(--c-input-bg) !important; border: 1.5px solid rgba(124,58,237,0.20);
  border-radius: var(--r-md); padding: 9px 14px; outline: none; width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-input::placeholder { color: var(--c-text-muted) !important; }
.form-input:focus {
  border-color: var(--c-primary); background: var(--c-input-bg) !important;
  box-shadow: 0 0 0 3px var(--c-primary-xlt);
}

/* form-input en mode clair */
[data-theme="light"] .form-input {
  background: var(--c-input-bg) !important;
  color: var(--c-text-1) !important;
  border-color: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] .form-input:focus {
  background: var(--c-input-bg) !important;
  border-color: var(--c-primary) !important;
}

/* targets-grid */
.targets-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* apple-crud-list — list of editable items (Choice 1B: dark pills) */
.apple-crud-list {
  display: flex; flex-direction: column; gap: 6px;
}
.apple-crud-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; background: var(--c-item-bg);
  border: 1px solid rgba(124,58,237,0.18); border-radius: 10px;
  font-size: var(--fs-base); font-weight: 500; color: var(--c-text);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.apple-crud-item:hover { background: var(--c-card-hover); border-color: rgba(124,58,237,0.35); }

.crud-name  { font-size: var(--fs-base); font-weight: 500; color: var(--c-text); }
.crud-sub   { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 2px; }
.crud-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* accordion missing bg */
.apple-accordion {
  background: var(--c-card); border-radius: var(--r-xl);
  border: 1px solid var(--c-border); box-shadow: var(--s-sm);
  overflow: hidden; margin-bottom: 12px;
}
.apple-accordion-header:hover { background: var(--c-primary-xlt); }

/* metric-card aliases (old name) → item-card */
.metric-card {
  background: var(--c-card); border-radius: var(--r-xl);
  border: 1px solid var(--c-border); box-shadow: var(--s-sm);
  padding: 24px; position: relative; overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.metric-card:hover { box-shadow: var(--s-hover); transform: translateY(-3px); }
.metric-value { font-size: var(--fs-4xl); font-weight: 800; color: var(--c-text); letter-spacing:-1.5px; line-height:1; }
.metric-label { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-2); margin-top: 6px; }
.metric-sub   { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 3px; }
.metric-icon  { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--c-primary); color: #fff; margin-bottom: 16px; }
.metric-icon svg { width: 20px; height: 20px; }
.metric-trend { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: 700; padding: 4px 9px; border-radius: var(--r-full); }
.metric-trend.up   { background: var(--c-green-light); color: var(--c-green); }
.metric-trend.down { background: var(--c-red-light);   color: var(--c-red); }
.metric-trend.flat { background: var(--c-primary-light); color: var(--c-primary); }
.mc-green  { --kpi-color: var(--c-green); }
.mc-purple { --kpi-color: var(--c-primary); }
.mc-blue   { --kpi-color: var(--c-blue); }
.mc-red    { --kpi-color: var(--c-red); }
.metric-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--kpi-color, var(--c-primary)); opacity: .8;
}
.metrics-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}

/* hero-kpi-card alias */
.hero-kpi-card {
  background: linear-gradient(135deg, #4C1D95 0%, var(--c-primary) 50%, #7E22CE 100%);
  border-radius: var(--r-xl); padding: 32px 40px; color: #fff;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
  margin-bottom: 24px; box-shadow: 0 8px 32px rgba(124,58,237,0.30);
  position: relative; overflow: hidden;
}

/* top-header compat (old id=topHeaderDate vs topbar) */
.top-header { display: none; } /* hidden if using new layout */

/* ================================================================
   PREMIUM ADVISOR CARDS — Task 1
================================================================ */
.advisorCardsGrid, #advisorCardsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.adv-premium-card {
  background: var(--c-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.adv-premium-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

.adv-card-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--c-border);
}
.adv-avatar {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff;
  letter-spacing: -.5px; flex-shrink: 0;
}
.adv-card-identity { flex: 1; min-width: 0; }
.adv-card-name {
  font-size: var(--fs-md); font-weight: 700; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adv-card-campus {
  font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 2px;
}
.adv-card-pct {
  font-size: var(--fs-xl); font-weight: 800; flex-shrink: 0;
}

.adv-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 16px;
}
.adv-stat-badge {
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 10px 10px 8px;
  text-align: center;
}
.adv-sb-value {
  font-size: var(--fs-base); font-weight: 800; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adv-sb-label {
  font-size: var(--fs-2xs); font-weight: 500; color: var(--c-text-3);
  margin-top: 3px; text-transform: uppercase; letter-spacing: .03em;
}

.adv-card-progress {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 16px;
}
.adv-progress-bar {
  flex: 1; height: 6px; background: rgba(0,0,0,0.06);
  border-radius: 99px; overflow: hidden;
}
.adv-progress-fill {
  height: 100%; border-radius: 99px;
  transition: width .5s var(--ease-out);
}
.adv-progress-label {
  font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0;
}

/* ================================================================
   FORMATION BADGES — Task 4
================================================================ */
.formation-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.formation-badge-card {
  background: var(--c-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.formation-badge-card:hover {
  box-shadow: 0 0 0 2px #7C3AED, 0 8px 24px rgba(124, 58, 237, 0.3);
  transform: translateY(-3px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.fbadge-header {
  padding: 16px 16px 12px;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.fbadge-abbrev {
  font-size: var(--fs-sm); font-weight: 800; color: rgba(255,255,255,0.90);
  letter-spacing: .04em;
}
.fbadge-trend {
  font-size: 11px; font-weight: 600; padding: 3px 8px;
  border-radius: var(--r-full); white-space: nowrap;
}
.badge-trend-up   { background: rgba(255,255,255,0.20); color: #fff; }
.badge-trend-mid  { background: rgba(255,255,255,0.15); color: rgba(255,255,255,.85); }
.badge-trend-down { background: rgba(0,0,0,0.15); color: rgba(255,255,255,.70); }

/* badge-trend en mode clair : fond + texte contrastés */
[data-theme="light"] .badge-trend-up   { background: rgba(16,185,129,0.12); color: #059669; }
[data-theme="light"] .badge-trend-mid  { background: rgba(245,158,11,0.12); color: #b45309; }
[data-theme="light"] .badge-trend-down { background: rgba(239,68,68,0.12);  color: #dc2626; }

.fbadge-body { padding: 12px 14px 14px; }
.fbadge-name {
  font-size: var(--fs-sm); font-weight: 700; color: var(--c-text);
  margin-bottom: 10px; line-height: 1.35;
}

.fbadge-stats {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.fbadge-stat {
  flex: 1; background: var(--c-bg);
  border-radius: var(--r-sm); padding: 6px 8px; text-align: center;
}
.fbadge-stat-val {
  display: block; font-size: var(--fs-base); font-weight: 800; color: var(--c-text);
  line-height: 1.2;
}
.fbadge-stat-lbl {
  display: block; font-size: 11px; font-weight: 500; color: var(--c-text-3);
  margin-top: 2px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.4;
}

.fbadge-progress {
  display: flex; align-items: center; gap: 8px;
}
.fbadge-prog-bar {
  flex: 1; height: 5px; background: rgba(0,0,0,0.06);
  border-radius: 99px; overflow: hidden;
}
.fbadge-prog-label {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--c-text-3);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .form-row-3, .form-row-4 { grid-template-columns: 1fr 1fr; }
  .adv-card-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .form-row-2, .form-row-3, .form-row-4 { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .formation-badges-grid { grid-template-columns: 1fr 1fr; }
  #advisorCardsGrid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   ACQUISITION PAGE
═══════════════════════════════════════════ */

/* View toggle */
.view-toggle {
  display: flex; background: var(--c-card2,#22222f); border-radius: var(--r-lg,12px);
  padding: 3px; gap: 2px; border: 1px solid var(--c-border,rgba(255,255,255,0.07));
}
.toggle-btn {
  padding: 6px 14px; border-radius: 9px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  color: var(--c-muted,#8888a0); background: transparent; border: none;
  transition: all 0.15s;
}
.toggle-btn.active { background: var(--c-primary,#7C3AED); color: #fff; }

/* Tunnel */
.tunnel-card {
  background: var(--c-card,#1c1c26); border-radius: var(--r-2xl,20px);
  padding: 24px 28px; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  margin-bottom: 20px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tunnel-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-2px);
}
.tunnel-grid { display: flex; align-items: stretch; }
.tunnel-step {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 16px 8px; position: relative;
}
.tunnel-step:not(:last-child)::after {
  content: '→'; position: absolute; right: -10px; top: 50%;
  transform: translateY(-50%); color: var(--c-muted,#8888a0); font-size: 18px; z-index: 1;
}
.tunnel-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; font-size: 18px;
}
.tunnel-step-label { font-size: 11px; color: var(--c-muted,#8888a0); margin-bottom: 6px; text-align: center; }
.tunnel-value { font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.tunnel-rate {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 20px; margin-top: 4px;
}
.rate-good { background: rgba(16,185,129,0.15); color: #10b981; }
.rate-mid  { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.rate-bad  { background: rgba(239,68,68,0.15);   color: #ef4444; }

/* Two col layout */
/* ── Acquisition : filtre temporel ───────────────────────────────── */
.acq-gran-btn {
  padding: 5px 14px; border: none; border-radius: 7px; font-size: 12px;
  font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
  background: transparent; color: var(--c-text-3, #8888a0);
}
.acq-gran-btn:hover { background: var(--c-card, #16162a); color: var(--c-text-1, #e8e8f0); }
.acq-gran-btn.active {
  background: var(--c-primary, #7c3aed); color: #fff;
  box-shadow: 0 2px 8px rgba(124,58,237,0.35);
}
.acq-date-input {
  background: var(--c-card2, #1e1e2e); border: 1px solid var(--c-border, rgba(255,255,255,0.1));
  color: var(--c-text-1, #e8e8f0); border-radius: 8px; padding: 6px 12px;
  font-size: 13px; outline: none; cursor: pointer;
}
.acq-date-input:focus { border-color: var(--c-primary, #7c3aed); }
/* Light mode */
[data-theme="light"] .acq-gran-btn { color: var(--c-text-3, #888); }
[data-theme="light"] .acq-gran-btn:hover { background: var(--c-card, #f5f5f5); color: var(--c-text-1, #111); }
[data-theme="light"] .acq-date-input {
  background: #fff; border-color: rgba(0,0,0,0.15); color: #111;
}

.acq-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Alert card */
.acq-alert-card {
  background: var(--c-card,#1c1c26); border-radius: var(--r-2xl,20px);
  padding: 20px 24px; border: 1px solid var(--c-border,rgba(255,255,255,0.07));
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.acq-alert-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--c-border,rgba(255,255,255,0.07));
}
.acq-alert-item:last-child { border-bottom: none; padding-bottom: 0; }
.acq-alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.acq-alert-text { font-size: 13px; flex: 1; }
.acq-alert-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }

/* Projection card */
.acq-proj-card {
  background: var(--c-card,#1c1c26); border-radius: var(--r-2xl,20px);
  padding: 20px 24px; border: 1px solid var(--c-border,rgba(255,255,255,0.07));
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}

/* BDs layout */
.acq-bds-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; margin-bottom: 20px; }
.acq-bds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* BD card */
.bd-premium-card {
  background: var(--c-card,#1c1c26); border-radius: var(--r-2xl,20px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bd-premium-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-2px);
}
.bd-card-header {
  padding: 18px 20px 16px; display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--c-border,rgba(255,255,255,0.07));
}
.bd-avatar {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.bd-card-name { font-size: 14px; font-weight: 600; }
.bd-card-role { font-size: 11px; color: var(--c-muted,#8888a0); margin-top: 1px; }
.bd-card-pct { margin-left: auto; font-size: 20px; font-weight: 700; }
.bd-card-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--c-border,rgba(255,255,255,0.07)); }
.bd-stat-cell { background: var(--c-card,#1c1c26); padding: 12px 14px; }
.bd-stat-val { font-size: 18px; font-weight: 700; }
.bd-stat-lbl { font-size: 11px; color: var(--c-muted,#8888a0); margin-top: 2px; line-height: 1.4; }
.bd-card-progress { padding: 14px 20px; }
.bd-prog-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--c-muted,#8888a0); margin-bottom: 6px; }

/* Cout card */
.acq-cout-card {
  background: var(--c-card,#1c1c26); border-radius: var(--r-2xl,20px);
  padding: 20px 24px; border: 1px solid var(--c-border,rgba(255,255,255,0.07));
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.cout-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--c-border,rgba(255,255,255,0.07)); }
.cout-row:last-child { border-bottom: none; }
.cout-label { font-size: 13px; color: var(--c-muted,#8888a0); }
.cout-val { font-size: 15px; font-weight: 600; }

/* ═══════════════════════════════════════════
   LOT 1 — SIDEBAR TOGGLE & HEADER UI
═══════════════════════════════════════════ */

/* 1A. Sidebar toggle button */
.sidebar-toggle-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--c-card2, #f0f0f5); border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--c-muted, #666680); flex-shrink: 0;
  transition: all 0.15s; padding: 0;
}
.sidebar-toggle-btn:hover { color: var(--c-text); border-color: var(--c-primary); background: var(--c-primary-light); }

/* Sidebar collapsed state */
.sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  border-right: none;
}

/* Mini sidebar (collapsed state) */
.sidebar-mini {
  width: 52px; min-width: 52px;
  background: var(--c-sidebar, #1E1B4B);
  border-right: 1px solid var(--c-border);
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 2px;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
}
.sidebar-mini.visible { display: flex; }

.mini-nav-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted, #8888a0); cursor: pointer; transition: all 0.15s;
}
.mini-nav-icon:hover { color: var(--c-text-inv, #fff); background: rgba(124,58,237,0.1); }
.mini-nav-icon.active { color: var(--c-primary); background: var(--c-primary-light); }
.mini-nav-icon svg { width: 16px; height: 16px; }

/* 1B. Sidebar user profile */
.sidebar-user-profile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 14px; cursor: pointer;
  transition: background 0.15s; border-radius: 0;
}
.sidebar-user-profile:hover { background: rgba(124,58,237,0.06); }

.sup-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #4f46e5);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
}

.sup-name { font-size: 13px; font-weight: 600; color: var(--c-text); }

/* 1C. Dark mode toggle */
.topbar-icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-lg, 12px);
  background: var(--c-card2, #f0f0f5); border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--c-muted, #666680); flex-shrink: 0;
  transition: all 0.15s; padding: 0;
}
.topbar-icon-btn:hover { color: var(--c-text); border-color: var(--c-primary); }

/* Light mode overrides */
/* ── A2 Contraste et lisibilité – Titres et labels ──── */
h2, h3, .section-title, .card-title {
  color: #f0f0f8;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Sous-titres et labels ────────────────────────────────── */
.subtitle, .label, .card-subtitle {
  color: #b0b0c8;
}

/* ── Main content background ────────────────────────────────── */
.main-content {
  background: var(--c-bg);
}

/* ── Card background ────────────────────────────────────────── */
/* Note: la règle suit le token --c-card défini dans [data-theme]   */
/* Ne PAS remettre de gradient hardcodé ici — il casserait le mode clair */
.card, .kpi-card, .adv-premium-card, .formation-badge-card, .apple-card {
  background: var(--c-card);
}

[data-theme="light"] {
  color-scheme: light;
  --c-bg:          #f4f4f8;
  --c-sidebar:     #ffffff;
  --c-card:        #ffffff;
  --c-card2:       #f0f0f5;
  --c-border:      rgba(0,0,0,0.08);
  --c-border-md:   rgba(0,0,0,0.14);
  --c-card-hover:  #f8f8fc;
  --c-sidebar-hover: rgba(0,0,0,0.05);
  --c-surface-2:   #f0f0f5;
  --c-text:        #111118;
  --c-text-1:      #111118;
  --c-text-2:      #33334e;
  --c-text-3:      #55556e;
  --c-text-muted:  #666680;
  --c-text-4:      #66667e;
  --c-text-inv:    #ffffff;
  --c-muted:       #666680;
  --c-topbar:      #ffffff;

  /* Surfaces additionnelles — light mode */
  --c-input-bg:    #ffffff;
  --c-table-head:  #f0f0f5;
  --c-table-row:   #fafafa;
  --c-table-row2:  #f4f4f8;
  --c-item-bg:     #f4f4f8;
  --c-drawer-bg:   #ffffff;
  --c-badge-text:  #111118;
}
[data-theme="light"] .sidebar,
[data-theme="light"] .topbar { box-shadow: 0 1px 0 rgba(0,0,0,0.08); }

/* 1D. Notifications */
.notif-wrapper { position: relative; }

.notif-badge-dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--c-red, #ef4444); color: #fff;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--c-sidebar);
  pointer-events: none;
}

.notif-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 320px; background: var(--c-card);
  border: 1px solid var(--c-border); border-radius: var(--r-xl, 16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 1000; overflow: hidden;
}

.notif-dd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--c-border);
}

.notif-dd-title { font-size: 13px; font-weight: 600; }

.notif-mark-read { font-size: 11px; color: var(--c-primary); cursor: pointer; }
.notif-mark-read:hover { text-decoration: underline; }

.notif-dd-list { max-height: 280px; overflow-y: auto; }

.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--c-border);
  transition: background 0.12s; cursor: default;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(124,58,237,0.04); }
.notif-item.unread { background: rgba(124,58,237,0.03); }

.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); flex-shrink: 0; margin-top: 5px; }
.notif-dot.read { background: transparent; }

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

.notif-content { flex: 1; }
.notif-text { font-size: 13px; line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--c-muted); margin-top: 3px; }

.notif-close { color: var(--c-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 4px; flex-shrink: 0; }
.notif-close:hover { color: var(--c-red); background: rgba(239,68,68,0.1); }

.notif-empty { padding: 20px; text-align: center; font-size: 13px; color: var(--c-muted); }

/* 1E. Avatar topbar + menu */
.topbar-avatar-wrap { position: relative; }

.topbar-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #4f46e5);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s;
}
.topbar-avatar:hover { border-color: var(--c-primary); }

.topbar-user-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 210px; background: var(--c-card);
  border: 1px solid var(--c-border); border-radius: var(--r-xl, 16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4); z-index: 1000; overflow: hidden;
}

.tum-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--c-border); }
.tum-name { font-size: 14px; font-weight: 600; }
.tum-email { font-size: 11px; color: var(--c-muted); margin-top: 2px; }

.tum-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; font-size: 13px; color: var(--c-muted); cursor: pointer;
  transition: all 0.12s;
}
.tum-item:hover { color: var(--c-text); background: rgba(124,58,237,0.06); }

.tum-divider { height: 1px; background: var(--c-border); margin: 4px 0; }

.tum-danger { color: var(--c-red, #ef4444) !important; }
.tum-danger:hover { background: rgba(239,68,68,0.08) !important; }

/* Conseiller context bar (Lot 3) */
.conseiller-ctx-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px; margin-bottom: 16px;
  background: var(--c-primary-light); border: 1px solid rgba(124,58,237,0.25);
  border-radius: var(--r-xl, 16px);
  animation: ctxSlideIn 0.2s ease;
}
@keyframes ctxSlideIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

.ctx-avatar {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, #7C3AED, #4f46e5);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
}

.ctx-bar-label { font-size: 11px; color: var(--c-primary); font-weight: 500; }
.ctx-bar-name { font-size: 15px; font-weight: 700; }

.ctx-bar-stats { display: flex; gap: 20px; margin-left: 16px; }
.ctx-bar-stat-val { font-size: 16px; font-weight: 700; color: #a78bfa; }
.ctx-bar-stat-lbl { font-size: 11px; color: var(--c-primary); opacity: 0.7; line-height: 1.4; }

.ctx-back-btn {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 20px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(124,58,237,0.3);
  font-size: 12px; font-weight: 600; color: var(--c-primary); cursor: pointer;
  transition: all 0.15s;
}
.ctx-back-btn:hover { background: rgba(124,58,237,0.2); }

/* ═══════════════════════════════════════════
   LOT 2 — TRI COLONNES + FILTRES + SÉLECTEUR D'AFFICHAGE
═══════════════════════════════════════════ */

/* 2A. Tri dans les tableaux */
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { color: var(--c-text); }

.sort-icons { display: inline-flex; flex-direction: column; gap: 1px; margin-left: 5px; vertical-align: middle; line-height: 1; }
.si-up, .si-down { font-size: 7px; opacity: 0.25; line-height: 1; display: block; transition: opacity 0.15s; }

.sortable-th.sort-asc .si-up { opacity: 1; color: var(--c-primary); }
.sortable-th.sort-desc .si-down { opacity: 1; color: var(--c-primary); }
.sortable-th.sort-asc, .sortable-th.sort-desc { color: var(--c-primary); }

/* 2B. Sélecteur d'affichage */
.display-count-selector { display: flex; align-items: center; gap: 8px; }
.display-select {
  background: var(--c-card2); border: 1px solid var(--c-border);
  color: var(--c-text); font-size: 12px; font-weight: 500;
  padding: 5px 24px 5px 10px; border-radius: var(--r-lg, 12px);
  cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238888a0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  transition: border-color 0.15s;
}
.display-select:hover { border-color: var(--c-primary); }

/* 2C. Filtres dans les tableaux */
.filters-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; margin-bottom: 12px;
}

.filter-main-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px;
  background: var(--c-card2); border: 1px solid var(--c-border);
  font-size: 12px; font-weight: 600; color: var(--c-text); cursor: pointer;
  transition: all 0.15s;
}
.filter-main-btn:hover { border-color: var(--c-primary); }

.filter-active-count {
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--c-primary); color: #fff;
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

.filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  background: var(--c-card); border: 1px solid var(--c-border);
  font-size: 12px; color: var(--c-muted); cursor: pointer; transition: all 0.15s;
}
.filter-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.filter-chip.active { background: var(--c-primary-light); border-color: var(--c-primary); color: var(--c-primary); font-weight: 600; }

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

.filter-results-label { font-size: 12px; color: var(--c-muted); margin-left: auto; }

.filter-panel {
  background: var(--c-card2); border: 1px solid var(--c-border);
  border-radius: var(--r-xl, 16px); padding: 16px 20px; margin-bottom: 16px;
}

.fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 14px; margin-bottom: 14px; }
.fp-group {}
.fp-label { font-size: 11px; font-weight: 600; color: var(--c-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }

.fp-actions { display: flex; justify-content: flex-end; gap: 8px; }
.fp-reset { padding: 7px 16px; border-radius: 8px; background: var(--c-card); border: 1px solid var(--c-border); color: var(--c-muted); font-size: 12px; cursor: pointer; }
.fp-apply { padding: 7px 16px; border-radius: 8px; background: var(--c-primary); border: none; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }


/* ================================================================
   SETTINGS PAGE STYLES
================================================================ */
.settings-section {
  margin-bottom: 2rem;
}

.settings-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.settings-section-header h3 {
  color: var(--c-text);
  font-weight: 700;
  margin: 0;
  flex: 1;
}

.settings-advisors-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-advisor-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--c-card2);
  border-radius: 8px;
  border: 1px solid var(--c-border);
  transition: all 0.2s;
}

.settings-advisor-row:hover {
  background: var(--c-card-hover);
  border-color: var(--c-primary);
}

.sar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.sar-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sar-name {
  color: var(--c-text);
  font-weight: 600;
  font-size: 0.9rem;
}

.sar-role {
  color: var(--c-text-muted);
  font-size: 0.75rem;
}

.sar-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
  color: var(--c-text-muted);
}

.btn-icon:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.btn-icon.btn-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--c-danger);
  color: var(--c-danger);
}

.empty-state {
  color: var(--c-text-muted);
  font-style: italic;
  padding: 1rem;
  text-align: center;
}


/* ================================================================
   SORTABLE HEADERS
================================================================ */
.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
}

.sortable-th::after {
  content: ' ↕';
  color: rgba(255,255,255,0.3);
  font-size: 0.75em;
  margin-left: 0.25em;
}

.sortable-th:hover::after {
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
}

.sortable-th.sort-asc::after {
  content: ' ↑';
  color: #7C3AED;
  font-weight: 700;
}

.sortable-th.sort-desc::after {
  content: ' ↓';
  color: #7C3AED;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   PARAMS PAGE — Sidebar Navigation (mockup validé ✅)
══════════════════════════════════════════════════════════════ */

/* Override page flex for params */
#params.active {
  display: flex !important;
  gap: 0;
  padding: 0 !important;
  margin: calc(-1 * (var(--header-h) + 32px)) -32px -48px;
  min-height: calc(100vh);
  animation: pageIn .22s var(--ease) both;
}

/* Sidebar */
.params-sidebar {
  width: 210px;
  flex-shrink: 0;
  background: var(--c-topbar, #111118);
  border-right: 1px solid var(--c-border);
  padding: 28px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  align-self: flex-start;
}

.params-sidebar-title {
  font-size: 11px;
  font-weight: 600;
  color: #6666aa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 0 10px;
  margin-bottom: 14px;
}

.params-tab-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-text-2);
  transition: all 0.15s;
  margin-bottom: 2px;
  user-select: none;
}
.params-tab-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--c-text);
}
.params-tab-item.active {
  background: rgba(124,58,237,0.15);
  color: #b587ff;
  font-weight: 600;
}
.params-tab-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
}
.params-tab-divider {
  height: 1px;
  background: var(--c-border);
  margin: 10px 0;
}
.params-tab-section-label {
  font-size: 11px;
  font-weight: 600;
  color: #44446a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 0 10px;
  margin: 14px 0 6px;
}

/* Main content area */
.params-main {
  flex: 1;
  min-width: 0;
  padding: 36px 40px 52px;
  overflow-y: auto;
}

/* Page header inside each section */
.params-page-header { margin-bottom: 24px; }
.params-page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.params-page-subtitle {
  font-size: 13px;
  color: var(--c-text-2);
}

/* Section card (premium from mockup) */
.params-section-card {
  background: var(--c-surface-2, #16162a);
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
  margin-bottom: 22px;
}
.params-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(124,58,237,0.1);
  background: rgba(124,58,237,0.03);
}
.params-section-title-wrap { display: flex; align-items: center; gap: 10px; }
.params-section-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(124,58,237,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.params-section-title { font-size: 13.5px; font-weight: 700; color: var(--c-text); }
.params-section-count { font-size: 11px; color: var(--c-text-2); margin-top: 2px; }
.params-section-body { padding: 18px 20px; }

/* Add button inside section headers */
.btn-add-params {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 13px;
  background: #7C3AED; color: #fff;
  border: none; border-radius: 7px;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-add-params:hover {
  background: #8B4CF5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124,58,237,0.35);
}

/* Light mode overrides */
[data-theme="light"] .params-sidebar {
  background: #f5f5fa;
}
[data-theme="light"] .params-tab-item { color: #555577; }
[data-theme="light"] .params-tab-item:hover { background: rgba(0,0,0,0.04); color: #222244; }
[data-theme="light"] .params-tab-item.active { background: rgba(124,58,237,0.1); color: #7C3AED; }
[data-theme="light"] .params-tab-section-label { color: #aaaacc; }
[data-theme="light"] .params-sidebar-title { color: #aaaacc; }
[data-theme="light"] .params-section-card { background: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
[data-theme="light"] .params-section-header { background: rgba(124,58,237,0.02); }

/* Mobile: stack sidebar above content */
@media (max-width: 768px) {
  #params.active {
    flex-direction: column;
    margin: calc(-1 * (var(--header-h) + 20px)) -16px -32px;
  }
  .params-sidebar {
    width: 100%;
    height: auto;
    position: static;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-right: none;
    border-bottom: 1px solid var(--c-border);
  }
  .params-sidebar-title,
  .params-tab-divider,
  .params-tab-section-label { display: none; }
  .params-tab-item { margin-bottom: 0; }
  .params-main { padding: 20px 16px 40px; }
}

/* ================================================================
   OBJECTIVE TARGET CARDS — Premium SaaS style
================================================================ */
.obj-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 4px 0;
}

.obj-target-card {
  background: var(--c-card2);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 16px;
  transition: border-color .18s, box-shadow .18s, transform .15s;
}
.obj-target-card:hover {
  border-color: rgba(124,58,237,0.30);
  box-shadow: 0 4px 18px rgba(124,58,237,0.10);
  transform: translateY(-1px);
}

.obj-target-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.obj-target-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .03em;
}

.obj-target-info { flex: 1; min-width: 0; }
.obj-target-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.obj-target-role {
  font-size: 11px;
  color: var(--c-text-3);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.obj-target-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.obj-target-field {}

.obj-target-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin-bottom: 4px;
}

.obj-target-field-input {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--c-card);
  border: 1px solid var(--c-border-md);
  border-radius: 7px;
  padding: 0 10px;
  transition: border-color .15s;
}
.obj-target-field-input:focus-within {
  border-color: rgba(124,58,237,0.45);
  box-shadow: 0 0 0 2px rgba(124,58,237,0.10);
}

.obj-target-field-input input[type="number"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--c-text);
  font-size: 14px;
  font-weight: 600;
  padding: 7px 0;
  -moz-appearance: textfield;
}
.obj-target-field-input input[type="number"]::-webkit-inner-spin-button,
.obj-target-field-input input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

.obj-target-field-unit {
  font-size: 11px;
  color: var(--c-text-3);
  font-weight: 500;
  white-space: nowrap;
}

/* ── Bouton Supprimer dans les cards Objectifs ─────────────────── */
.obj-target-card-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: flex-end;
}

.obj-target-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 500;
  color: #ef4444;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.22);
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  letter-spacing: .02em;
}
.obj-target-delete-btn:hover {
  background: rgba(239,68,68,0.16);
  border-color: rgba(239,68,68,0.40);
  transform: translateY(-1px);
}
.obj-target-delete-btn:active {
  transform: translateY(0);
  background: rgba(239,68,68,0.22);
}

/* ══════════════════════════════════════════════════════════════════
   LEADS PIPELINE — Version B (Table + Drawer)
   ══════════════════════════════════════════════════════════════════ */

/* ── Funnel KPI header ─────────────────────────────────────────── */
.lead-funnel {
  display: flex;
  gap: 0;
  margin-bottom: 18px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
}
.lead-funnel-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  cursor: default;
  position: relative;
  transition: background .15s;
}
.lead-funnel-step:not(:last-child)::after {
  content: '›';
  position: absolute;
  right: -1px;
  font-size: 20px;
  color: var(--c-border-md);
  z-index: 1;
}
.lead-funnel-step:hover { background: rgba(255,255,255,.03); }
.lfs-count {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 3px;
}
.lfs-label {
  font-size: 11px;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
}
.lfs-flux {
  font-size: 11px;
  color: var(--c-text-3);
  margin-top: 2px;
  line-height: 1.4;
}
/* Color per step */
.lfs-appel      .lfs-count { color: #7dd3fc; }
.lfs-decroché   .lfs-count { color: #93c5fd; }
.lfs-invite_sio .lfs-count { color: #a78bfa; }
.lfs-present_sio .lfs-count { color: #c084fc; }
.lfs-candidat   .lfs-count { color: #fb923c; }
.lfs-inscrit    .lfs-count { color: #4ade80; }

/* ── Lead filter bar ───────────────────────────────────────────── */
.lead-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.lead-filter-bar select,
.lead-filter-bar input[type="text"] {
  background: var(--c-card);
  border: 1px solid var(--c-border-md);
  border-radius: 6px;
  color: var(--c-text);
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
  transition: border-color .15s;
}
.lead-filter-bar select:focus,
.lead-filter-bar input[type="text"]:focus {
  border-color: rgba(124,58,237,.45);
}
.lead-filter-bar .btn-lead-add {
  margin-left: auto;
  background: rgba(124,58,237,.18);
  border: 1px solid rgba(124,58,237,.4);
  border-radius: 6px;
  color: #a78bfa;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s;
}
.lead-filter-bar .btn-lead-add:hover {
  background: rgba(124,58,237,.3);
}

/* ── Lead table ────────────────────────────────────────────────── */
.lead-table-wrap {
  overflow-x: auto;
}
.lead-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lead-table th {
  background: rgba(255,255,255,.04);
  color: var(--c-text-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.lead-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  vertical-align: middle;
}
.lead-table tr:last-child td { border-bottom: none; }
.lead-table tr.lead-row {
  cursor: pointer;
  transition: background .12s;
}
.lead-table tr.lead-row:hover { background: rgba(255,255,255,.03); }
.lead-table tr.lead-row.active { background: rgba(124,58,237,.09); }

/* ── B-24 — Leads pagination ───────────────────────────────────── */
.leads-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 4px;
}
.lp-btn {
  padding: 5px 14px;
  border-radius: 7px;
  border: 1px solid var(--c-border-md);
  background: transparent;
  color: var(--c-text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.lp-btn:hover:not([disabled]) { background: rgba(124,58,237,.1); color: #c4b5fd; border-color: rgba(167,139,250,.3); }
.lp-btn[disabled] { opacity: .35; cursor: default; }
.lp-info { font-size: 12px; color: var(--c-text-3); }

/* ── Status chips ──────────────────────────────────────────────── */
.lchip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .02em;
}
.lchip-appel       { background: rgba(125,211,252,.12); color: #7dd3fc; border: 1px solid rgba(125,211,252,.25); }
.lchip-decroché    { background: rgba(147,197,253,.12); color: #93c5fd; border: 1px solid rgba(147,197,253,.25); }
.lchip-invite_sio  { background: rgba(167,139,250,.12); color: #a78bfa; border: 1px solid rgba(167,139,250,.25); }
.lchip-present_sio { background: rgba(192,132,252,.12); color: #c084fc; border: 1px solid rgba(192,132,252,.25); }
.lchip-candidat    { background: rgba(251,146,60,.12);  color: #fb923c; border: 1px solid rgba(251,146,60,.25); }
.lchip-inscrit     { background: rgba(74,222,128,.12);  color: #4ade80; border: 1px solid rgba(74,222,128,.25); }

/* ── Leads drawer backdrop + panel ────────────────────────────── */
.leads-drawer-backdrop {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.35);
  z-index: 300;
}
.leads-drawer-backdrop.open { display: block; }

.leads-drawer {
  position: fixed;
  top: var(--header-h);
  right: -360px;
  width: 340px;
  height: calc(100% - var(--header-h));
  background: var(--c-drawer-bg);
  border-left: 1px solid var(--c-border-md);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transition: right .22s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.leads-drawer.open { right: 0; }

.leads-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.leads-drawer-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leads-drawer-close {
  background: none;
  border: none;
  color: var(--c-text-3);
  font-size: 20px;
  cursor: pointer;
  padding: 0 0 0 10px;
  line-height: 1;
  transition: color .12s;
}
.leads-drawer-close:hover { color: var(--c-text); }

.leads-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}

.leads-drawer-section {
  margin-bottom: 20px;
}
.leads-drawer-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--c-text-3);
  margin-bottom: 10px;
}

/* drawer meta grid */
.ldrawer-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ldrawer-meta-item label {
  display: block;
  font-size: 11px;
  color: var(--c-text-3);
  margin-bottom: 3px;
  line-height: 1.4;
}
.ldrawer-meta-item span {
  font-size: 13px;
  color: var(--c-text);
  font-weight: 500;
}

/* ── Pipeline timeline ─────────────────────────────────────────── */
.lead-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.lt-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}
.lt-item:not(:last-child) .lt-dot::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 16px;
  width: 2px;
  height: calc(100% + 2px);
  background: var(--c-border-md);
}
.lt-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  border: 2px solid var(--c-border-md);
  background: var(--c-bg);
  z-index: 1;
}
.lt-item.done  .lt-dot { background: #4ade80; border-color: #4ade80; }
.lt-item.current .lt-dot { border-color: #a78bfa; background: rgba(167,139,250,.25); box-shadow: 0 0 0 3px rgba(167,139,250,.15); }
.lt-item.pending .lt-dot { background: var(--c-bg); border-color: var(--c-border-md); }

.lt-content {
  padding-bottom: 14px;
  flex: 1;
}
.lt-step-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text);
}
.lt-item.pending .lt-step-name { color: var(--c-text-3); }
.lt-step-date {
  font-size: 11px;
  color: var(--c-text-3);
  margin-top: 1px;
}
.lt-badge-auto {
  display: inline-block;
  font-size: 11px;
  background: rgba(255,255,255,.06);
  color: var(--c-text-3);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
}

/* ── Advance button ────────────────────────────────────────────── */
.leads-drawer-footer {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.btn-lead-advance {
  width: 100%;
  padding: 10px;
  background: rgba(124,58,237,.18);
  border: 1px solid rgba(124,58,237,.4);
  border-radius: 7px;
  color: #a78bfa;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  text-align: center;
}
.btn-lead-advance:hover { background: rgba(124,58,237,.3); }
.btn-lead-advance:disabled {
  opacity: .4;
  cursor: not-allowed;
  background: rgba(124,58,237,.06);
}
.btn-lead-delete {
  width: 100%;
  padding: 7px;
  background: rgba(239,68,68,.06);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 7px;
  color: #f87171;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  text-align: center;
}
.btn-lead-delete:hover { background: rgba(239,68,68,.14); }

/* ── Nouveau lead modal ────────────────────────────────────────── */
#leadModal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#leadModal .form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#leadModal .form-group label {
  font-size: 12px;
  color: var(--c-text-3);
  font-weight: 600;
}
#leadModal .form-group input,
#leadModal .form-group select {
  background: var(--c-input-bg);
  border: 1px solid var(--c-border-md);
  border-radius: 6px;
  color: var(--c-text);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  transition: border-color .15s;
}
#leadModal .form-group input:focus,
#leadModal .form-group select:focus {
  border-color: rgba(124,58,237,.5);
  box-shadow: 0 0 0 2px rgba(124,58,237,.1);
}

/* ── Rollback confirmation ─────────────────────────────────────── */
#leadRollbackModal .rollback-warning {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 13px;
  color: #fca5a5;
  margin-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════════════
   JOURNAL — Inline edit row
   ══════════════════════════════════════════════════════════════════ */
.je-input, .je-select {
  background: var(--c-input-bg);
  border: 1px solid rgba(124,58,237,.4);
  border-radius: 5px;
  color: var(--c-text);
  font-size: 12px;
  padding: 4px 6px;
  outline: none;
  max-width: 100%;
  box-sizing: border-box;
}
.je-input:focus, .je-select:focus {
  border-color: rgba(124,58,237,.7);
  box-shadow: 0 0 0 2px rgba(124,58,237,.12);
}
.crud-btn-save {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(74,222,128,.12);
  border: 1px solid rgba(74,222,128,.3);
  border-radius: 5px;
  color: #4ade80;
  font-size: 11px; font-weight: 600;
  padding: 4px 9px; cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}
.crud-btn-save:hover { background: rgba(74,222,128,.22); }
.crud-btn-cancel {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--c-border-md);
  border-radius: 5px;
  color: var(--c-text-3);
  font-size: 13px; font-weight: 700;
  padding: 3px 8px; cursor: pointer;
  transition: background .12s;
}
.crud-btn-cancel:hover { background: rgba(255,255,255,.1); color: var(--c-text); }

/* ══════════════════════════════════════════════════════════════════
   LEADS V5 — Drawer enrichi + bonus
   ══════════════════════════════════════════════════════════════════ */

/* ── Badge statut actuel (top of drawer) ─────────────────────── */
.ld-statut-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid;
}
.ld-statut-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.ld-statut-name { font-size: 13px; font-weight: 700; }
.ld-statut-step { font-size: 11px; color: var(--c-text-3); margin-top: 1px; }

/* Step-specific badge colors */
.ld-statut-appel       { background: rgba(125,211,252,.07); border-color: rgba(125,211,252,.2); }
.ld-statut-appel       .ld-statut-dot  { background: #7dd3fc; }
.ld-statut-appel       .ld-statut-name { color: #7dd3fc; }
.ld-statut-decroché    { background: rgba(147,197,253,.07); border-color: rgba(147,197,253,.2); }
.ld-statut-decroché    .ld-statut-dot  { background: #93c5fd; }
.ld-statut-decroché    .ld-statut-name { color: #93c5fd; }
.ld-statut-invite_sio  { background: rgba(167,139,250,.07); border-color: rgba(167,139,250,.2); }
.ld-statut-invite_sio  .ld-statut-dot  { background: #a78bfa; }
.ld-statut-invite_sio  .ld-statut-name { color: #a78bfa; }
.ld-statut-present_sio { background: rgba(192,132,252,.07); border-color: rgba(192,132,252,.2); }
.ld-statut-present_sio .ld-statut-dot  { background: #c084fc; }
.ld-statut-present_sio .ld-statut-name { color: #c084fc; }
.ld-statut-candidat    { background: rgba(251,146,60,.07);  border-color: rgba(251,146,60,.2); }
.ld-statut-candidat    .ld-statut-dot  { background: #fb923c; }
.ld-statut-candidat    .ld-statut-name { color: #fb923c; }
.ld-statut-inscrit     { background: rgba(74,222,128,.07);  border-color: rgba(74,222,128,.2); }
.ld-statut-inscrit     .ld-statut-dot  { background: #4ade80; }
.ld-statut-inscrit     .ld-statut-name { color: #4ade80; }

/* ── Note libre dans le drawer ────────────────────────────────── */
.ld-note-area {
  width: 100%;
  background: var(--c-input-bg);
  border: 1px solid var(--c-border-md);
  border-radius: 7px;
  color: var(--c-text);
  font-size: 12px;
  font-family: inherit;
  padding: 8px 10px;
  resize: vertical;
  min-height: 64px;
  outline: none;
  transition: border-color .15s;
  line-height: 1.5;
}
.ld-note-area:focus { border-color: rgba(124,58,237,.5); box-shadow: 0 0 0 2px rgba(124,58,237,.1); }
.ld-note-area::placeholder { color: var(--c-text-3); }

/* ── B-21 — Period filter chips (drawer timeline) ─────────────── */
.ld-chip {
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--c-border-md);
  background: transparent;
  color: var(--c-text-3);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  font-family: inherit;
  letter-spacing: .02em;
}
.ld-chip:hover {
  background: rgba(124,58,237,.08);
  border-color: rgba(167,139,250,.3);
  color: var(--c-text-2);
}
.ld-chip.active {
  background: rgba(124,58,237,.18);
  border-color: rgba(167,139,250,.45);
  color: #c4b5fd;
}
[data-theme="light"] .ld-chip.active {
  background: rgba(124,58,237,.12);
  border-color: rgba(124,58,237,.35);
  color: #6d28d9;
}

/* ── Modifier statut button ───────────────────────────────────── */
.btn-lead-edit-status {
  width: 100%;
  padding: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--c-border-md);
  border-radius: 7px;
  color: var(--c-text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  text-align: center;
}
.btn-lead-edit-status:hover { background: rgba(255,255,255,.08); color: var(--c-text); }

/* ── Status change modal (V6b — dynamic modal) ────────────────── */
/* Modal is created dynamically in JS (see openLeadStatusModal)    */
.lsm-option {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--c-border-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-2);
  transition: background .12s, border-color .12s, color .12s;
  box-sizing: border-box;
}
.lsm-option.lsm-selectable { cursor: pointer; }
.lsm-option.lsm-selectable:hover {
  background: rgba(124,58,237,.08);
  border-color: rgba(167,139,250,.3);
  color: #c4b5fd;
}
.lsm-option.lsm-current {
  background: rgba(255,255,255,.04);
  color: var(--c-text-3);
  cursor: default;
  opacity: .65;
}
.lsm-option.lsm-selected {
  background: rgba(124,58,237,.18);
  border-color: rgba(167,139,250,.5);
  color: #c4b5fd;
  font-weight: 600;
}

/* ── Badge stagnant ───────────────────────────────────────────── */
.badge-stagnant {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  background: rgba(251,146,60,.12);
  color: #fb923c;
  border: 1px solid rgba(251,146,60,.25);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 5px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Quick advance button in table ───────────────────────────── */
.btn-lead-quick-advance {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(124,58,237,.12);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 5px;
  color: #a78bfa;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}
.btn-lead-quick-advance:hover { background: rgba(124,58,237,.25); }
.btn-lead-quick-advance.done { background: rgba(74,222,128,.07); color: #4ade80; border-color: rgba(74,222,128,.25); cursor: default; font-size: 11px; font-weight: 600; }

/* ── Badge sidebar leads ──────────────────────────────────────── */
.params-tab-badge {
  margin-left: auto;
  background: rgba(124,58,237,.25);
  color: #a78bfa;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

/* ── Toggles actif/inactif — apple-toggle & toggle-slider ─────── */
.apple-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.apple-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.apple-toggle-track {
  width: 34px; height: 20px; border-radius: 99px;
  background: rgba(255,255,255,0.12);
  transition: background .2s;
  position: relative;
}
.apple-toggle input:checked + .apple-toggle-track { background: #22c55e; }
.apple-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.apple-toggle input:checked + .apple-toggle-track .apple-toggle-thumb { transform: translateX(14px); }

/* toggle-slider (ancien style conseiller) */
.toggle { position: relative; display: inline-block; width: 34px; height: 20px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; border-radius: 99px;
  background: rgba(255,255,255,0.12);
  transition: background .2s; cursor: pointer;
}
.toggle input:checked + .toggle-slider { background: #22c55e; }
.toggle-slider:before {
  content: ''; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  left: 3px; top: 3px; background: #fff;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.toggle input:checked + .toggle-slider:before { transform: translateX(14px); }

/* ═══════════════════════════════════════════════════════════════
   SHOULD #1 — Tableau Classement Conseillers
   SHOULD #2 — Alertes Manager
   ═══════════════════════════════════════════════════════════════ */

/* ── Ranking table ── */
.ranking-table td { vertical-align: middle; padding: 10px 14px; }
.ranking-table thead th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-3); padding: 10px 14px; }
.ranking-table tbody tr:hover { background: var(--c-surface-alt, rgba(255,255,255,.04)); }
.ranking-medal { font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.ranking-rank-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--c-text-2); background: var(--c-border); margin: auto; }
.ranking-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--c-primary-dim, rgba(167,139,250,.15)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--c-primary); flex-shrink: 0; }

/* % atteinte badge */
.rpct-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.rpct-green  { background: rgba(16,185,129,.15);  color: #10b981; border: 1px solid rgba(16,185,129,.3); }
.rpct-orange { background: rgba(245,158,11,.15);  color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
.rpct-red    { background: rgba(239,68,68,.15);   color: #ef4444; border: 1px solid rgba(239,68,68,.3); }

/* statut dot */
.rstat-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.rstat-green  { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.5); }
.rstat-orange { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.5); }
.rstat-red    { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.5); }

/* ── Alertes Manager ── */
.dash-alerts-wrap { display: flex; flex-direction: column; gap: 8px; }
.dash-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px; border-radius: 12px;
    font-size: 13px; line-height: 1.5;
    border: 1px solid;
}
.dash-alert-red    { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.25);  color: var(--c-text-1); }
.dash-alert-orange { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); color: var(--c-text-1); }
.dash-alert-green  { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.25); color: var(--c-text-1); }
.dash-alert-icon   { font-size: 16px; line-height: 1.4; flex-shrink: 0; }

/* ── SHOULD #3 — Indicateur Sync Supabase ── */
#sbSyncIndicator {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
    padding: 4px 10px; border-radius: 99px;
    transition: opacity .3s, background .3s;
    pointer-events: none;
}
#sbSyncIndicator.sync-idle    { display: none; }
#sbSyncIndicator.sync-saving  { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
#sbSyncIndicator.sync-saved   { background: rgba(16,185,129,.15); color: #10b981; border: 1px solid rgba(16,185,129,.3); }
#sbSyncIndicator.sync-error   { background: rgba(239,68,68,.15);  color: #ef4444;  border: 1px solid rgba(239,68,68,.3); }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sync-dot.pulse { animation: sbPulse .8s ease-in-out infinite alternate; }
@keyframes sbPulse { from { opacity: .4; } to { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════
   VUE PROFIL UTILISATEUR
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.prf-overlay {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: flex-end;
    animation: prfFadeIn .18s ease;
}
@keyframes prfFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Panel glissant à droite ── */
.prf-panel {
    width: 400px; max-width: 96vw; height: 100%;
    background: var(--c-card, #16162a);
    border-left: 1px solid var(--c-border, rgba(255,255,255,.08));
    display: flex; flex-direction: column;
    animation: prfSlideIn .22s cubic-bezier(.25,.46,.45,.94);
    overflow: hidden;
}
@keyframes prfSlideIn { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Header ── */
.prf-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 18px;
    border-bottom: 1px solid var(--c-border, rgba(255,255,255,.07));
    flex-shrink: 0;
}
.prf-header-title { font-size: 16px; font-weight: 700; color: var(--c-text-1); }
.prf-close-btn {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--c-surface, rgba(255,255,255,.06));
    border: 1px solid var(--c-border, rgba(255,255,255,.1));
    color: var(--c-text-2); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.prf-close-btn:hover { background: rgba(255,255,255,.12); }

/* ── Scrollable body ── */
.prf-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 24px; }

/* ── Avatar section ── */
.prf-avatar-section { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 4px; }
.prf-avatar-lg {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary, #7c3aed), #4f46e5);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 700; color: #fff;
    box-shadow: 0 4px 20px rgba(124,58,237,.35);
}
.prf-name-lg  { font-size: 18px; font-weight: 700; color: var(--c-text-1); text-align: center; }
.prf-email-lg { font-size: 12px; color: var(--c-text-3); }
.prf-role-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 600;
    background: rgba(124,58,237,.15); color: #a78bfa;
    border: 1px solid rgba(124,58,237,.3);
}

/* ── Info section ── */
.prf-info-card {
    background: var(--c-surface, rgba(255,255,255,.04));
    border: 1px solid var(--c-border, rgba(255,255,255,.07));
    border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.prf-info-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.prf-info-label { font-size: 12px; color: var(--c-text-3); font-weight: 500; flex-shrink: 0; padding-top: 1px; }
.prf-info-val   { font-size: 13px; color: var(--c-text-1); font-weight: 500; text-align: right; }
.prf-linked-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600;
    background: rgba(16,185,129,.12); color: #10b981;
    border: 1px solid rgba(16,185,129,.3);
}
.prf-unlinked-badge {
    font-size: 12px; color: var(--c-text-3); font-style: italic;
}

/* ── Password section ── */
.prf-section-card {
    background: var(--c-surface, rgba(255,255,255,.04));
    border: 1px solid var(--c-border, rgba(255,255,255,.07));
    border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.prf-section-title { font-size: 13px; font-weight: 700; color: var(--c-text-1); }
.prf-input {
    width: 100%; padding: 9px 12px; border-radius: 8px; font-size: 13px;
    background: var(--c-card2, #1e1e2e);
    border: 1px solid var(--c-border, rgba(255,255,255,.1));
    color: var(--c-text-1); outline: none;
    transition: border-color .15s;
}
.prf-input:focus { border-color: var(--c-primary, #7c3aed); }
.prf-btn-primary {
    padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
    background: var(--c-primary, #7c3aed); color: #fff;
    border: none; cursor: pointer; width: 100%;
    transition: opacity .15s;
}
.prf-btn-primary:hover { opacity: .88; }
.prf-error { color: #f87171; font-size: 12px; display: none; margin-top: -4px; }

/* ── Data filter banner (quand vue filtrée) ── */
.prf-filter-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px;
    background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.25);
    font-size: 12px; color: var(--c-primary, #a78bfa); font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════
   ÉTAPE 2 — Nouveaux composants UI (Recherche globale, Filtres actifs,
              Tri classement, Alertes cliquables)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Recherche globale — dropdown résultats ── */
.global-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--c-card, #1a1a2e);
    border: 1px solid var(--c-border, rgba(255,255,255,.1));
    border-radius: 14px;
    z-index: 1200;
    max-height: 420px;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
    padding: 6px;
    display: none;
}
.global-search-results::-webkit-scrollbar { width: 5px; }
.global-search-results::-webkit-scrollbar-thumb {
    background: var(--c-border); border-radius: 10px;
}

/* Item individuel */
.gsr-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px;
    cursor: pointer; transition: background .12s;
}
.gsr-item:hover { background: rgba(124,58,237,.12); }

.gsr-icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
    background: rgba(255,255,255,.06);
}

.gsr-label {
    font-size: 13px; font-weight: 600; color: var(--c-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsr-sub {
    font-size: 11px; color: var(--c-text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
}

.gsr-badge {
    margin-left: auto; flex-shrink: 0;
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: 99px;
    background: rgba(124,58,237,.18); color: var(--c-primary, #7c3aed);
    border: 1px solid rgba(124,58,237,.3);
    text-transform: uppercase;
}

/* Séparateur de groupe */
.gsr-group-sep {
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--c-text-3);
    line-height: 1.4;
    padding: 8px 12px 4px;
}

/* Message "aucun résultat" */
.gsr-empty {
    text-align: center; padding: 20px 16px;
    font-size: 13px; color: var(--c-text-3);
}


/* ── Filtres actifs — pills cliquables ── */
#dashActiveFilters {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
}

.filter-active-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px 4px 10px;
    border-radius: 99px; font-size: 12px; font-weight: 600;
    background: rgba(124,58,237,.12);
    color: var(--c-primary, #7c3aed);
    border: 1px solid rgba(124,58,237,.3);
    cursor: pointer;
    transition: background .15s, transform .1s;
    user-select: none;
}
.filter-active-badge:hover {
    background: rgba(124,58,237,.22);
    transform: translateY(-1px);
}
.filter-badge-close {
    font-size: 11px; opacity: .6;
    margin-left: 1px;
    font-weight: 700;
}
.filter-active-badge:hover .filter-badge-close { opacity: 1; }


/* ── Classement Conseillers — boutons de tri ── */
.rank-sort-btn {
    padding: 4px 11px; font-size: 11px; font-weight: 600;
    border-radius: 99px; cursor: pointer;
    background: transparent;
    border: 1px solid var(--c-border, rgba(0,0,0,.1));
    color: var(--c-text-2);
    transition: background .12s, color .12s, border-color .12s, transform .1s;
    white-space: nowrap;
}
.rank-sort-btn:hover {
    background: rgba(124,58,237,.1);
    border-color: rgba(124,58,237,.3);
    color: var(--c-primary, #7c3aed);
    transform: translateY(-1px);
}
.rank-sort-btn.rank-sort-active {
    background: rgba(124,58,237,.15);
    border-color: rgba(124,58,237,.4);
    color: var(--c-primary, #7c3aed);
    font-weight: 700;
}


/* ── Alertes Manager — interaction cliquable ── */
.dash-alert-clickable {
    cursor: pointer;
    transition: opacity .15s, transform .1s, box-shadow .15s;
}
.dash-alert-clickable:hover {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.dash-alert-cta {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px; font-weight: 700;
    opacity: .55;
    white-space: nowrap;
    padding-left: 8px;
    transition: opacity .15s;
}
.dash-alert-clickable:hover .dash-alert-cta { opacity: 1; }


/* ── Classement — colonne Projection 12M ── */
.proj-val     { font-size: 13px; font-weight: 700; color: var(--c-text-1); }
.proj-pct     { font-size: 11px; color: var(--c-text-3); margin-top: 1px; line-height: 1.4; }
.proj-on-track { color: #10b981; }
.proj-at-risk  { color: #f59e0b; }
.proj-danger   { color: #ef4444; }


/* ── KPI Cards — tooltip style natif amélioré ── */
.kpi-card[title] { cursor: help; }
.kpi-card[title]:hover { box-shadow: 0 4px 20px rgba(124,58,237,.18); }


/* ── Responsive — masquer certains éléments sur petit écran ── */
@media (max-width: 768px) {
    .global-search-results { left: -20px; right: -20px; border-radius: 12px; }
    .rank-sort-btn { font-size: 11px; padding: 3px 8px; }
    #dashActiveFilters { display: none !important; } /* simplifié sur mobile */
}


/* ═══════════════════════════════════════════════════════════════════
   ÉTAPE 3 — Dashboard BD : layout enrichi, score performance
   ═══════════════════════════════════════════════════════════════════ */

/* Layout 3 zones : colonne gauche (classement + coût) + grille cartes BD */
.acq-bd-full-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

.acq-bd-ranking-col {
    display: flex;
    flex-direction: column;
    gap: 0; /* gap géré par margin-top sur acq-cout-card */
}

/* Responsive : 1 colonne sur petit écran */
@media (max-width: 900px) {
    .acq-bd-full-layout {
        grid-template-columns: 1fr;
    }
}

/* Score bar micro-labels */
.bd-score-scale {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--c-text-3);
    margin-top: 3px;
    line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════
   ÉTAPE 5 — Score de priorité leads
   ═══════════════════════════════════════════════════════════════════ */

.lead-priority-score {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 36px; height: 24px;
    border-radius: 99px; font-size: 11px; font-weight: 800;
    border: 1px solid;
    cursor: help;
    transition: transform .1s;
}
.lead-priority-score:hover { transform: scale(1.1); }

/* ══════════════════════════════════════════════════════════════════════
   PROJECTION FIN D'ANNÉE — Carte de projection 12 mois
   ══════════════════════════════════════════════════════════════════════ */
.proj-card {
    background: var(--c-card, #181c2e);
    border: 1px solid var(--c-border, rgba(255,255,255,0.07));
    border-radius: 14px;
    padding: 16px 20px 12px;
}
.proj-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.proj-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-2, rgba(255,255,255,0.85));
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.02em;
}
.proj-info-btn {
    background: none;
    border: 1px solid var(--c-border, rgba(255,255,255,0.12));
    border-radius: 50%;
    width: 18px; height: 18px;
    font-size: 10px;
    color: var(--c-text-3, rgba(255,255,255,0.50));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.2s, border-color 0.2s;
    line-height: 1;
}
.proj-info-btn:hover {
    color: var(--c-primary, #7C3AED);
    border-color: var(--c-primary, #7C3AED);
}
.proj-metric-toggle {
    display: flex;
    gap: 3px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 3px;
}
.proj-metric-btn {
    background: none;
    border: none;
    border-radius: 6px;
    padding: 3px 11px;
    font-size: 11px;
    font-weight: 500;
    color: var(--c-text-3, rgba(255,255,255,0.50));
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.proj-metric-btn.active {
    background: var(--c-primary, #7C3AED);
    color: #fff;
}
.proj-tooltip {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11px;
    color: var(--c-text-3, rgba(255,255,255,0.60));
    line-height: 1.5;
    margin-bottom: 12px;
}
.proj-body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
.proj-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.proj-stat-label {
    font-size: 11px;
    color: var(--c-text-3, rgba(255,255,255,0.55));
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.3;
}
.proj-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text-1, #fff);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    line-height: 1.15;
}
.proj-stat-value.proj-ok   { color: #10B981; }
.proj-stat-value.proj-warn { color: #F59E0B; }
.proj-stat-value.proj-bad  { color: #EF4444; }
.proj-action {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    background: rgba(245,158,11,0.07);
    border: 1px solid rgba(245,158,11,0.18);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: #F59E0B;
    margin-bottom: 10px;
    line-height: 1.45;
}
.proj-action svg { flex-shrink: 0; margin-top: 2px; }
.proj-action.proj-action-ok {
    background: rgba(16,185,129,0.06);
    border-color: rgba(16,185,129,0.20);
    color: #10B981;
}
.proj-progress-bar {
    height: 3px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
    overflow: hidden;
}
.proj-progress-fill {
    height: 100%;
    background: var(--c-primary, #7C3AED);
    border-radius: 2px;
    transition: width 0.5s ease;
    max-width: 100%;
}
.proj-progress-fill.proj-fill-ok   { background: #10B981; }
.proj-progress-fill.proj-fill-warn { background: #F59E0B; }
.proj-progress-fill.proj-fill-bad  { background: #EF4444; }
@media (max-width: 640px) {
    .proj-body { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════
   MODÈLE 2 — Hero split (Réalisé gauche · Projection droite)
   ══════════════════════════════════════════════════════ */

/* Wrapper flex : héro à gauche, projection à droite */
.m2-hero-wrapper {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

/* Bannière violette gauche */
.hero-card.m2-hero-left {
    flex: 1.4;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

/* Grille intérieure : CA | séparateur | Contrats */
.hero-inner-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    flex: 1;
}

/* Ligne mini KPIs en bas de la bannière */
.m2-mini-kpis {
    display: flex;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.m2-mini-kpi {
    flex: 1;
    text-align: center;
}

.m2-mini-sep {
    width: 1px;
    background: rgba(255,255,255,0.15);
    height: 34px;
    flex-shrink: 0;
}

.m2-mini-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.65);
    margin-bottom: 5px;
}

.m2-mini-val {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.5px;
}

/* Carte projection droite */
.proj-card.m2-proj-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Corps à 3 colonnes (Objectif supprimé) */
.proj-body.proj-body-3col {
    grid-template-columns: repeat(3, 1fr);
}

/* Responsive : empilement vertical sous 960px */
@media (max-width: 960px) {
    .m2-hero-wrapper { flex-direction: column; }
    .hero-card.m2-hero-left { flex: 1; }
    .proj-card.m2-proj-right { flex: 1; }
}