/**
 * design-system.css — StaticFec "Lumière"
 * Premium light-first design · Lavande & Blanc · Fraunces + DM Sans + DM Mono
 * Inspiré de Stripe, Linear, Mercury — haute lisibilité, finesse, élégance
 *
 * SOURCE UNIQUE DE VÉRITÉ. Aucune page ne redéclare de palette privée.
 * Ordre de chargement : design-system → components → tools → (shell pour app.html)
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,300&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════
   TOKENS — StaticFec Lumière (light-first)
═══════════════════════════════════════════════════════ */
:root {
  /* ── Backgrounds — blanc teinté lavande ── */
  --sf-void:       #F4F2FF;   /* sidebar, zones très claires */
  --sf-base:       #FAFAFE;   /* fond principal de page */
  --sf-surface-1:  #FFFFFF;   /* cartes, panels */
  --sf-surface-2:  #F7F5FF;   /* cartes secondaires */
  --sf-surface-3:  #EDE9FF;   /* hover */
  --sf-surface-4:  #E3DDFF;   /* active/selected */
  --sf-surface-5:  #D6CFFF;   /* strongest elevation */

  --sf-bg:      var(--sf-base);
  --sf-surface: var(--sf-surface-1);

  /* ── Bordures — lavande légère ── */
  --sf-border:        rgba(109, 87, 212, 0.1);
  --sf-border-strong: rgba(109, 87, 212, 0.18);
  --sf-border-accent: rgba(124, 92, 252, 0.3);

  /* ── Accent principal — Violet / Lavande ── */
  --sf-accent:        #7C5CFC;
  --sf-accent-hover:  #6B47FA;
  --sf-accent-muted:  rgba(124, 92, 252, 0.08);
  --sf-accent-border: rgba(124, 92, 252, 0.2);

  /* Dégradé accent — recopié en dur dans 6 pages avant consolidation */
  --sf-gradient-accent:       linear-gradient(135deg, #7C5CFC 0%, #9B7EFD 100%);
  --sf-gradient-accent-hover: linear-gradient(135deg, #6B47FA 0%, #A78BFA 100%);
  --sf-gradient-accent-h:     linear-gradient(90deg, #7C5CFC 0%, #A78BFA 100%);

  /* Aliases legacy (amber → violet) */
  --sf-primary:       var(--sf-accent);
  --sf-primary-light: var(--sf-accent-muted);
  --sf-primary-dark:  #5B3EE0;
  --sf-primary-hover: var(--sf-accent-hover);

  /* ── Lavande palette ── */
  --fi-lav:   #a78bfa;
  --fi-lav2:  #c4b5fd;
  --fi-vio:   #7c5cfc;

  /* ── Texte — violet profond ── */
  --sf-text:    #1B1040;   /* titres, texte principal */
  --sf-text-2:  #483A7A;   /* corps, secondaire */
  --sf-text-3:  #8B7EC0;   /* muted, labels */
  --sf-text-4:  #C0B8E8;   /* disabled, très subtil */

  /* ── Sémantique ── */
  --sf-positive:        #059669;
  --sf-positive-bg:     #ECFDF5;
  --sf-positive-border: #A7F3D0;
  --sf-negative:        #DC2626;
  --sf-negative-bg:     #FEF2F2;
  --sf-negative-border: #FCA5A5;
  --sf-warning:         #D97706;
  --sf-warning-bg:      #FFFBEB;
  --sf-warning-border:  #FDE68A;
  --sf-info:            #0891B2;
  --sf-info-bg:         #ECFEFF;
  --sf-info-border:     #A5F3FC;

  /* Texte sur fond sémantique clair — contraste AA sur les *-bg ci-dessus */
  --sf-positive-text:   #065F46;
  --sf-negative-text:   #991B1B;
  --sf-warning-text:    #92400E;
  --sf-info-text:       #0E7490;

  /* Aliases */
  --sf-success:        var(--sf-positive);
  --sf-success-bg:     var(--sf-positive-bg);
  --sf-success-border: var(--sf-positive-border);
  --sf-danger:         var(--sf-negative);
  --sf-danger-bg:      var(--sf-negative-bg);
  --sf-danger-border:  var(--sf-negative-border);

  /* ── Typographie ── */
  --sf-font:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sf-mono:    'DM Mono', 'JetBrains Mono', 'Fira Code', monospace;
  --sf-serif:   'Fraunces', Georgia, serif;

  /* ── Échelle typographique ── */
  --sf-text-2xs:  10px;
  --sf-text-xs:   11px;
  --sf-text-sm:   12px;
  --sf-text-base: 13px;
  --sf-text-md:   14px;
  --sf-text-lg:   16px;
  --sf-text-xl:   20px;
  --sf-text-2xl:  24px;
  --sf-text-3xl:  32px;
  --sf-text-4xl:  40px;
  --sf-text-5xl:  48px;
  --sf-text-6xl:  64px;

  /* ── Espacement (grille 4px) ── */
  --sf-space-1:    4px;
  --sf-space-2:    8px;
  --sf-space-3:   12px;
  --sf-space-4:   16px;
  --sf-space-5:   20px;
  --sf-space-6:   24px;
  --sf-space-7:   28px;
  --sf-space-8:   32px;
  --sf-space-10:  40px;
  --sf-space-12:  48px;
  --sf-space-16:  64px;
  --sf-space-20:  80px;

  /* ── Rayons ── */
  --sf-radius-sm:  3px;
  --sf-radius:     6px;
  --sf-radius-md:  8px;
  --sf-radius-lg:  12px;
  --sf-radius-xl:  16px;
  --sf-radius-2xl: 24px;

  /* ── Ombres — douces, légèrement violacées ── */
  --sf-shadow-sm:     0 1px 2px rgba(109,87,212,.06), 0 1px 3px rgba(0,0,0,.04);
  --sf-shadow:        0 2px 8px rgba(109,87,212,.08), 0 4px 6px rgba(0,0,0,.04);
  --sf-shadow-md:     0 4px 16px rgba(109,87,212,.1), 0 8px 16px rgba(0,0,0,.04);
  --sf-shadow-lg:     0 12px 40px rgba(109,87,212,.14), 0 16px 32px rgba(0,0,0,.04);
  --sf-shadow-accent: 0 4px 20px rgba(124,92,252,.28), 0 2px 8px rgba(124,92,252,.15);

  /* ── Transitions ── */
  --sf-transition:      150ms cubic-bezier(.4,0,.2,1);
  --sf-transition-slow: 280ms cubic-bezier(.4,0,.2,1);

  /* ── Layout ── */
  --sf-sidebar-width: 224px;
  --sf-topbar-height: 52px;

  /* ── Traits & focus ──
     --sf-border-w tranche le conflit historique 1px / 1.5px : une seule valeur
     pour tous les contours de contrôle (boutons, champs, cartes interactives). */
  --sf-border-w:    1px;
  --sf-border-w-2:  1.5px;
  --sf-focus-ring:  0 0 0 3px var(--sf-accent-muted);
  --sf-focus-outline: 2px solid var(--sf-accent);

  /* ── Scrollbar ── */
  --sf-scrollbar-thumb:       rgba(109, 87, 212, .22);
  --sf-scrollbar-thumb-hover: rgba(109, 87, 212, .38);
}

/* ═══════════════════════════════════════════════════════
   MODE SOMBRE (opt-in via data-theme="dark")
═══════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --sf-void:       #08071a;
  --sf-base:       #0c0b1e;
  --sf-surface-1:  #111027;
  --sf-surface-2:  #17152e;
  --sf-surface-3:  #1e1c38;
  --sf-surface-4:  #252345;
  --sf-surface-5:  #2e2b58;
  --sf-bg:         var(--sf-base);
  --sf-surface:    var(--sf-surface-1);
  --sf-border:        rgba(167,139,250,.1);
  --sf-border-strong: rgba(167,139,250,.18);
  --sf-border-accent: rgba(124,92,252,.35);
  --sf-accent:        #a78bfa;
  --sf-accent-hover:  #c4b5fd;
  --sf-accent-muted:  rgba(167,139,250,.1);
  --sf-accent-border: rgba(167,139,250,.2);
  --sf-primary:        var(--sf-accent);
  --sf-primary-light:  var(--sf-accent-muted);
  --sf-primary-dark:   #7c5cfc;
  --sf-primary-hover:  var(--sf-accent-hover);
  --sf-text:    #F0EDFF;
  --sf-text-2:  #BDB5F0;
  --sf-text-3:  #7B70B5;
  --sf-text-4:  #3D3870;
  --sf-positive:        #34d399;
  --sf-positive-bg:     rgba(52,211,153,.1);
  --sf-positive-border: rgba(52,211,153,.2);
  --sf-negative:        #f87171;
  --sf-negative-bg:     rgba(248,113,113,.1);
  --sf-negative-border: rgba(248,113,113,.2);
  --sf-warning:         #fbbf24;
  --sf-warning-bg:      rgba(251,191,36,.1);
  --sf-warning-border:  rgba(251,191,36,.2);
  --sf-info:            #60a5fa;
  --sf-info-bg:         rgba(96,165,250,.1);
  --sf-info-border:     rgba(96,165,250,.2);
  /* En sombre, le texte reprend la teinte vive : les fonds sont translucides */
  --sf-positive-text:   #6EE7B7;
  --sf-negative-text:   #FCA5A5;
  --sf-warning-text:    #FCD34D;
  --sf-info-text:       #93C5FD;
  --sf-shadow-sm:  0 1px 3px rgba(0,0,0,.4);
  --sf-shadow:     0 2px 8px rgba(0,0,0,.5);
  --sf-shadow-md:  0 4px 16px rgba(0,0,0,.6);
  --sf-shadow-lg:  0 12px 40px rgba(0,0,0,.7);
  --sf-shadow-accent: 0 0 24px rgba(167,139,250,.2);

  --sf-gradient-accent:       linear-gradient(135deg, #7C5CFC 0%, #A78BFA 100%);
  --sf-gradient-accent-hover: linear-gradient(135deg, #8B6DFF 0%, #C4B5FD 100%);
  --sf-gradient-accent-h:     linear-gradient(90deg, #7C5CFC 0%, #A78BFA 100%);

  --sf-scrollbar-thumb:       rgba(167, 139, 250, .22);
  --sf-scrollbar-thumb-hover: rgba(167, 139, 250, .40);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

body {
  font-family: var(--sf-font);
  font-size: var(--sf-text-base);
  line-height: 1.55;
  color: var(--sf-text);
  background: var(--sf-base);
  min-height: 100vh;
}

/* Chiffres financiers — toujours tabulaires */
.sf-num, .sf-kpi-value, td.num, [data-num] {
  font-variant-numeric: tabular-nums;
  font-family: var(--sf-mono);
}

/* Scrollbar fine et élégante */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sf-scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sf-scrollbar-thumb-hover); }
* { scrollbar-width: thin; scrollbar-color: var(--sf-scrollbar-thumb) transparent; }

/* Respect des préférences système de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHIE
═══════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--sf-text);
  letter-spacing: -.02em;
}
h1 { font-size: var(--sf-text-3xl); font-weight: 300; font-family: var(--sf-serif); }
h2 { font-size: var(--sf-text-2xl); }
h3 { font-size: var(--sf-text-xl); }
h4 { font-size: var(--sf-text-lg); }
h5 { font-size: var(--sf-text-md); }
h6 { font-size: var(--sf-text-base); }

p { line-height: 1.7; color: var(--sf-text-2); }
a { color: var(--sf-accent); text-decoration: none; transition: color var(--sf-transition); }
a:hover { color: var(--sf-accent-hover); }

/* Code inline — reste inline, ne casse pas le fil du texte */
code, kbd {
  font-family: var(--sf-mono);
  font-size: .88em;
  background: var(--sf-surface-3);
  border-radius: var(--sf-radius-sm);
  padding: 1px 5px;
  color: var(--sf-text-2);
}
/* Blocs de code / exemples de format CSV */
pre, .sf-code-block {
  display: block;
  background: var(--sf-void);
  border: var(--sf-border-w) solid var(--sf-border);
  border-radius: var(--sf-radius);
  padding: 12px 14px;
  font-family: var(--sf-mono);
  font-size: var(--sf-text-sm);
  color: var(--sf-text-2);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.65;
  margin: var(--sf-space-2) 0;
}
pre code, .sf-code-block code { background: none; padding: 0; }

/* ═══════════════════════════════════════════════════════
   CONTRÔLES NATIFS
   Absorbé depuis fixes.css — plus aucun !important.
   Les tools stylent leurs champs sans avoir à réécrire ces bases.
═══════════════════════════════════════════════════════ */
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], input[type="search"],
input[type="tel"], input[type="url"],
select, textarea {
  background: var(--sf-surface-1);
  border: var(--sf-border-w-2) solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  color: var(--sf-text);
  font-family: var(--sf-font);
  font-size: var(--sf-text-base);
  padding: 8px 12px;
  outline: none;
  transition: border-color var(--sf-transition), box-shadow var(--sf-transition);
}
input::placeholder, textarea::placeholder { color: var(--sf-text-4); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--sf-border-strong); }
input:focus, select:focus, textarea:focus {
  border-color: var(--sf-accent);
  box-shadow: var(--sf-focus-ring);
}
input:disabled, select:disabled, textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: var(--sf-surface-2);
}
textarea { resize: vertical; min-height: 72px; line-height: 1.6; }

/* Select — chevron maison, aucun rendu OS */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B7EC0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
select option { background: var(--sf-surface-1); color: var(--sf-text); }

/* Cases à cocher & radios — teintées à l'accent */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--sf-accent);
  cursor: pointer;
  width: 15px;
  height: 15px;
}

/* Curseur sur tout ce qui est actionnable */
button, [role="button"], summary, label[for],
input[type="file"], input[type="submit"], input[type="button"] { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* Filet de sécurité pour les <button> sans aucune classe : ils héritaient
   du rendu natif de l'OS (gris système) au milieu d'une interface lavande.
   fixes.css traitait ce cas avec une chaîne de :not() ingérable ; cibler
   l'absence totale d'attribut class suffit et n'écrase aucun composant. */
button:not([class]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: var(--sf-border-w) solid var(--sf-border);
  border-radius: var(--sf-radius);
  background: transparent;
  color: var(--sf-text-2);
  font-family: var(--sf-font);
  font-size: var(--sf-text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--sf-transition);
}
button:not([class]):hover {
  background: var(--sf-surface-3);
  border-color: var(--sf-border-strong);
  color: var(--sf-text);
}

/* Focus visible — accessibilité clavier */
:focus-visible { outline: var(--sf-focus-outline); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ═══════════════════════════════════════════════════════
   ICÔNES
═══════════════════════════════════════════════════════ */
.sf-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════
   LOGO
═══════════════════════════════════════════════════════ */
.sf-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
  text-decoration: none;
  flex-shrink: 0;
}
.sf-logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--fi-vio), var(--fi-lav));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sf-serif);
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(124,92,252,.3);
}
.sf-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.sf-logo-name {
  font-family: var(--sf-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--sf-text);
  letter-spacing: -.01em;
}
.sf-logo-name em { font-style: italic; font-weight: 300; color: var(--sf-accent); }
.sf-logo-sub {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-3);
  font-weight: 400;
  letter-spacing: .01em;
}

/* ═══════════════════════════════════════════════════════
   BOUTONS
═══════════════════════════════════════════════════════ */
.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-space-2);
  padding: 8px 16px;
  border-radius: var(--sf-radius-md);
  font-family: var(--sf-font);
  font-size: var(--sf-text-base);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--sf-transition);
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  line-height: 1.4;
  letter-spacing: .01em;
}
.sf-btn:active { transform: scale(.98); }
.sf-btn:disabled { opacity: .42; pointer-events: none; }

/* Primary — violet gradient */
.sf-btn-primary {
  background: linear-gradient(135deg, var(--sf-accent) 0%, #a78bfa 100%);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(124,92,252,.2);
}
.sf-btn-primary:hover {
  background: linear-gradient(135deg, var(--sf-accent-hover) 0%, var(--fi-lav) 100%);
  box-shadow: var(--sf-shadow-accent);
  transform: translateY(-1px);
}
.sf-btn-primary:active { transform: translateY(0) scale(.98); }

/* Secondary — outlined */
.sf-btn-secondary {
  background: var(--sf-surface-1);
  color: var(--sf-text);
  border-color: var(--sf-border-strong);
}
.sf-btn-secondary:hover {
  background: var(--sf-surface-2);
  border-color: var(--sf-accent-border);
  color: var(--sf-accent);
}

/* Ghost */
.sf-btn-ghost {
  background: transparent;
  color: var(--sf-text-2);
  border-color: transparent;
}
.sf-btn-ghost:hover {
  background: var(--sf-surface-3);
  color: var(--sf-text);
}

/* Danger */
.sf-btn-danger {
  background: var(--sf-negative-bg);
  color: var(--sf-negative);
  border-color: var(--sf-negative-border);
}
.sf-btn-danger:hover {
  background: var(--sf-negative);
  color: #fff;
  border-color: transparent;
}

/* Tailles */
.sf-btn-sm  { padding: 5px 11px; font-size: var(--sf-text-sm); border-radius: var(--sf-radius); }
.sf-btn-lg  { padding: 11px 22px; font-size: var(--sf-text-md); }
.sf-btn-xl  { padding: 14px 30px; font-size: var(--sf-text-lg); font-weight: 600; }
.sf-btn-icon { width: 34px; height: 34px; padding: 0; border-radius: var(--sf-radius-md); }

/* ═══════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════ */
.sf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: var(--sf-text-2xs);
  font-weight: 600;
  line-height: 1.5;
  border: var(--sf-border-w) solid;
  white-space: nowrap;
  letter-spacing: .06em;
}
.sf-badge-primary {
  background: var(--sf-accent-muted);
  color: var(--sf-accent);
  border-color: var(--sf-accent-border);
}
.sf-badge-success, .sf-badge-positive {
  background: var(--sf-positive-bg);
  color: var(--sf-positive);
  border-color: var(--sf-positive-border);
}
.sf-badge-warning {
  background: var(--sf-warning-bg);
  color: var(--sf-warning);
  border-color: var(--sf-warning-border);
}
.sf-badge-danger, .sf-badge-negative {
  background: var(--sf-negative-bg);
  color: var(--sf-negative);
  border-color: var(--sf-negative-border);
}
.sf-badge-neutral {
  background: var(--sf-surface-2);
  color: var(--sf-text-3);
  border-color: var(--sf-border);
}

/* ═══════════════════════════════════════════════════════
   CARTES & PANELS
═══════════════════════════════════════════════════════ */
.sf-card {
  background: var(--sf-surface-1);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  overflow: hidden;
  box-shadow: var(--sf-shadow-sm);
  transition: box-shadow var(--sf-transition), border-color var(--sf-transition);
}
.sf-card:hover {
  box-shadow: var(--sf-shadow-md);
  border-color: var(--sf-accent-border);
}
.sf-card-header {
  padding: var(--sf-space-4) var(--sf-space-6);
  border-bottom: 1px solid var(--sf-border);
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  background: var(--sf-surface-2);
}
.sf-card-title {
  font-size: var(--sf-text-md);
  font-weight: 600;
  color: var(--sf-text);
  letter-spacing: -.01em;
}
.sf-card-body { padding: var(--sf-space-6); }

/* ═══════════════════════════════════════════════════════
   KPI CARDS
═══════════════════════════════════════════════════════ */
.sf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sf-space-4);
}
.sf-kpi {
  background: var(--sf-surface-1);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  padding: var(--sf-space-5) var(--sf-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-1);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sf-shadow-sm);
  transition: box-shadow var(--sf-transition), transform var(--sf-transition);
}
.sf-kpi:hover {
  box-shadow: var(--sf-shadow-md);
  transform: translateY(-1px);
}
/* Barre colorée en haut */
.sf-kpi::after {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 2px;
  background: var(--sf-accent);
  opacity: 0;
  transition: opacity var(--sf-transition);
}
.sf-kpi:hover::after { opacity: 1; }
.sf-kpi-positive::after { background: var(--sf-positive); opacity: 1; }
.sf-kpi-negative::after { background: var(--sf-negative); opacity: 1; }
.sf-kpi-accent::after   { background: var(--sf-accent);   opacity: 1; }
/* Barre gauche legacy */
.sf-kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: transparent;
}
.sf-kpi-positive::before { background: var(--sf-positive); }
.sf-kpi-negative::before { background: var(--sf-negative); }
.sf-kpi-accent::before   { background: var(--sf-accent); }

.sf-kpi-label {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 2px;
}
.sf-kpi-value {
  font-size: var(--sf-text-2xl);
  font-weight: 700;
  color: var(--sf-text);
  font-family: var(--sf-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.sf-kpi-sub {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-3);
  margin-top: var(--sf-space-1);
}
.sf-kpi-positive .sf-kpi-value { color: var(--sf-positive); }
.sf-kpi-negative .sf-kpi-value { color: var(--sf-negative); }
.sf-kpi-accent   .sf-kpi-value { color: var(--sf-accent); }

/* Animation compte à rebours KPI */
@keyframes sf-kpi-count {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sf-kpi-animate .sf-kpi-value {
  animation: sf-kpi-count .5s cubic-bezier(.22,1,.36,1) forwards;
}

/* ═══════════════════════════════════════════════════════
   TABLEAUX
═══════════════════════════════════════════════════════ */
.sf-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-shadow-sm);
}
.sf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sf-text-base);
}
.sf-table th {
  background: var(--sf-surface-2);
  padding: 10px var(--sf-space-4);
  text-align: left;
  font-size: var(--sf-text-2xs);
  font-weight: 700;
  color: var(--sf-text-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  border-bottom: 1px solid var(--sf-border);
  white-space: nowrap;
}
.sf-table td {
  padding: 10px var(--sf-space-4);
  border-bottom: 1px solid var(--sf-border);
  color: var(--sf-text-2);
  vertical-align: middle;
  transition: background var(--sf-transition);
}
.sf-table tr:last-child td { border-bottom: none; }
.sf-table tbody tr:hover td {
  background: var(--sf-surface-2);
}
.sf-table-zebra tbody tr:nth-child(even) td { background: var(--sf-void); }
.sf-table .mono, .sf-table .sf-mono {
  font-family: var(--sf-mono);
  font-size: var(--sf-text-sm);
}
.sf-table .num {
  text-align: right;
  font-family: var(--sf-mono);
  font-variant-numeric: tabular-nums;
}
.sf-table .positive { color: var(--sf-positive); font-weight: 500; }
.sf-table .negative { color: var(--sf-negative); font-weight: 500; }
.sf-table tr.anomaly td {
  background: var(--sf-negative-bg);
  color: var(--sf-negative);
}
.sf-table tr.anomaly:hover td { background: var(--sf-negative-bg); filter: brightness(.97); }

/* ═══════════════════════════════════════════════════════
   FORMULAIRES
═══════════════════════════════════════════════════════ */
.sf-label {
  display: block;
  font-size: var(--sf-text-xs);
  font-weight: 600;
  color: var(--sf-text-3);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .07em;
}
/* Les bases (couleur, bordure, focus) viennent des sélecteurs natifs plus haut.
   Ces classes n'ajoutent que la mise en page pleine largeur. */
.sf-input, .sf-select, .sf-textarea {
  width: 100%;
  padding: 9px 13px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.sf-select { padding-right: 30px; }
.sf-input:focus, .sf-select:focus, .sf-textarea:focus {
  box-shadow: var(--sf-focus-ring), inset 0 1px 2px rgba(0,0,0,.02);
}
.sf-field { display: flex; flex-direction: column; gap: 5px; }
.sf-field-hint { font-size: var(--sf-text-xs); color: var(--sf-text-3); line-height: 1.5; }
.sf-field-error { font-size: var(--sf-text-xs); color: var(--sf-negative); }

/* ═══════════════════════════════════════════════════════
   DROPZONE
═══════════════════════════════════════════════════════ */
.sf-dropzone {
  border: 2px dashed var(--sf-border-strong);
  border-radius: var(--sf-radius-xl);
  padding: var(--sf-space-12) var(--sf-space-8);
  text-align: center;
  cursor: pointer;
  transition: all var(--sf-transition-slow);
  background: var(--sf-surface-1);
}
.sf-dropzone:hover, .sf-dropzone.drag-over {
  border-color: var(--sf-accent);
  background: var(--sf-accent-muted);
  transform: scale(1.01);
}
.sf-dropzone-icon {
  font-size: 36px;
  margin-bottom: var(--sf-space-3);
  display: block;
  color: var(--sf-text-3);
}
.sf-dropzone-title {
  font-size: var(--sf-text-md);
  font-weight: 600;
  color: var(--sf-text);
  margin-bottom: var(--sf-space-1);
}
.sf-dropzone-sub {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-3);
}

/* ═══════════════════════════════════════════════════════
   ÉTAT VIDE
═══════════════════════════════════════════════════════ */
/* Deux familles de classes coexistent dans le code : .sf-empty (héritée, majoritaire
   dans les outils) et .sf-empty-state (produite par renderEmptyState() de ui-shell.js).
   Elles partagent désormais la même définition au lieu d'être réconciliées
   après coup par fixes.css. */
.sf-empty,
.sf-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sf-space-12) var(--sf-space-8);
  min-height: 240px;
  text-align: center;
}
.sf-empty-icon,
.sf-empty-state-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--sf-radius-lg);
  background: var(--sf-surface-2);
  border: var(--sf-border-w) solid var(--sf-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-text-3);
  font-size: 20px;
  flex-shrink: 0;
  margin-bottom: var(--sf-space-4);
}
.sf-empty-title,
.sf-empty-state-title {
  font-size: var(--sf-text-md);
  font-weight: 600;
  color: var(--sf-text);
  margin-bottom: var(--sf-space-1);
}
.sf-empty-sub,
.sf-empty-state-hint {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-3);
  max-width: 320px;
  line-height: 1.7;
}
.sf-empty-state-actions {
  display: flex;
  gap: var(--sf-space-2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sf-space-5);
}
.sf-empty .sf-spinner { margin-bottom: var(--sf-space-4); }

/* ═══════════════════════════════════════════════════════
   ALERTES
═══════════════════════════════════════════════════════ */
.sf-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sf-space-3);
  padding: var(--sf-space-3) var(--sf-space-4);
  border-radius: var(--sf-radius-md);
  border: 1px solid;
  font-size: var(--sf-text-base);
  border-left-width: 3px;
}
/* Les couleurs de texte passent par des tokens dédiés : les valeurs sombres
   codées en dur restaient illisibles une fois [data-theme="dark"] actif. */
.sf-alert-success { background: var(--sf-positive-bg); border-color: var(--sf-positive-border); color: var(--sf-positive-text); }
.sf-alert-warning { background: var(--sf-warning-bg);  border-color: var(--sf-warning-border);  color: var(--sf-warning-text); }
.sf-alert-danger  { background: var(--sf-negative-bg); border-color: var(--sf-negative-border); color: var(--sf-negative-text); }
.sf-alert-info    { background: var(--sf-info-bg);     border-color: var(--sf-info-border);     color: var(--sf-info-text); }
.sf-alert strong  { color: inherit; }

/* ═══════════════════════════════════════════════════════
   PROGRESS / LOADING
═══════════════════════════════════════════════════════ */
.sf-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--sf-border-strong);
  border-top-color: var(--sf-accent);
  border-radius: 50%;
  animation: sf-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

.sf-progress {
  height: 4px;
  background: var(--sf-surface-3);
  border-radius: 4px;
  overflow: hidden;
}
.sf-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--sf-accent), var(--fi-lav));
  border-radius: 4px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* Skeleton */
.sf-skeleton {
  background: linear-gradient(90deg, var(--sf-surface-2) 25%, var(--sf-surface-3) 50%, var(--sf-surface-2) 75%);
  background-size: 200% 100%;
  border-radius: var(--sf-radius);
  animation: sf-shimmer 1.6s ease-in-out infinite;
}
@keyframes sf-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════
   ONGLETS
═══════════════════════════════════════════════════════ */
.sf-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1.5px solid var(--sf-border);
  padding: 0 var(--sf-space-4);
}
.sf-tab {
  padding: 10px 16px;
  font-size: var(--sf-text-base);
  font-weight: 500;
  color: var(--sf-text-3);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  transition: all var(--sf-transition);
  white-space: nowrap;
  font-family: var(--sf-font);
  letter-spacing: .01em;
}
.sf-tab:hover { color: var(--sf-text-2); }
.sf-tab.active {
  color: var(--sf-accent);
  border-bottom-color: var(--sf-accent);
  font-weight: 600;
}
.sf-tab-panel { display: none; }
.sf-tab-panel.active { display: block; }

/* ═══════════════════════════════════════════════════════
   GRAPHIQUES ANIMÉS
═══════════════════════════════════════════════════════ */

/* Barre de graphique animée */
.sf-chart-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sf-chart-bar-item {
  display: grid;
  grid-template-columns: 120px 1fr 80px;
  align-items: center;
  gap: 10px;
  font-size: var(--sf-text-sm);
}
.sf-chart-bar-label {
  color: var(--sf-text-2);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-chart-bar-track {
  height: 8px;
  background: var(--sf-surface-3);
  border-radius: 99px;
  overflow: hidden;
}
.sf-chart-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sf-accent), var(--fi-lav));
  transform-origin: left;
  animation: sf-bar-grow .7s cubic-bezier(.22,1,.36,1) forwards;
  transform: scaleX(0);
}
.sf-chart-bar-fill.positive {
  background: linear-gradient(90deg, var(--sf-positive), #34d399);
}
.sf-chart-bar-fill.negative {
  background: linear-gradient(90deg, var(--sf-negative), #f87171);
}
.sf-chart-bar-fill.warning {
  background: linear-gradient(90deg, var(--sf-warning), #fbbf24);
}
@keyframes sf-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.sf-chart-bar-val {
  font-family: var(--sf-mono);
  font-size: var(--sf-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--sf-text-2);
  font-weight: 500;
}

/* Mini sparkline SVG */
.sf-sparkline {
  display: block;
  width: 100%;
  height: 40px;
  overflow: visible;
}
.sf-sparkline-path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--sf-accent);
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: sf-draw-line 1s cubic-bezier(.22,1,.36,1) forwards;
}
.sf-sparkline-path.positive { stroke: var(--sf-positive); }
.sf-sparkline-path.negative { stroke: var(--sf-negative); }
@keyframes sf-draw-line {
  to { stroke-dashoffset: 0; }
}
.sf-sparkline-area {
  stroke: none;
  opacity: .12;
  fill: var(--sf-accent);
  clip-path: inset(0);
  animation: sf-fadein .8s ease forwards;
}

/* Gauge SVG */
.sf-gauge-track { fill: none; stroke: var(--sf-surface-3); stroke-width: 12; }
.sf-gauge-fill {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke: url(#gaugeGradient);
  transition: stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1);
}

/* ═══════════════════════════════════════════════════════
   UTILITAIRES
═══════════════════════════════════════════════════════ */
.sf-flex         { display: flex; }
.sf-flex-col     { display: flex; flex-direction: column; }
.sf-items-center { align-items: center; }
.sf-justify-between { justify-content: space-between; }
.sf-gap-1  { gap: var(--sf-space-1); }
.sf-gap-2  { gap: var(--sf-space-2); }
.sf-gap-3  { gap: var(--sf-space-3); }
.sf-gap-4  { gap: var(--sf-space-4); }
.sf-gap-6  { gap: var(--sf-space-6); }
.sf-p-4    { padding: var(--sf-space-4); }
.sf-p-6    { padding: var(--sf-space-6); }
.sf-mt-4   { margin-top: var(--sf-space-4); }
.sf-mt-6   { margin-top: var(--sf-space-6); }
.sf-mb-4   { margin-bottom: var(--sf-space-4); }
.sf-text-sm    { font-size: var(--sf-text-sm); }
.sf-text-xs    { font-size: var(--sf-text-xs); }
.sf-text-muted { color: var(--sf-text-3); }
.sf-mono       { font-family: var(--sf-mono); font-size: .9em; }
.sf-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-sr-only    { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.sf-divider    { height: 1px; background: var(--sf-border); width: 100%; }
.sf-positive   { color: var(--sf-positive); }
.sf-negative   { color: var(--sf-negative); }
.sf-accent-txt { color: var(--sf-accent); }

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════ */
@keyframes sf-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sf-slideup {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sf-scalein {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sf-pop {
  0%   { transform: scale(.92); opacity: 0; }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}
.sf-fadein   { animation: sf-fadein   .25s cubic-bezier(.22,1,.36,1); }
.sf-slideup  { animation: sf-slideup  .35s cubic-bezier(.22,1,.36,1); }
.sf-scalein  { animation: sf-scalein  .2s cubic-bezier(.22,1,.36,1); }
.sf-pop      { animation: sf-pop      .3s cubic-bezier(.22,1,.36,1); }

/* Stagger children */
.sf-stagger > * { opacity: 0; animation: sf-fadein .3s cubic-bezier(.22,1,.36,1) forwards; }
.sf-stagger > *:nth-child(1) { animation-delay: 0ms; }
.sf-stagger > *:nth-child(2) { animation-delay: 50ms; }
.sf-stagger > *:nth-child(3) { animation-delay: 100ms; }
.sf-stagger > *:nth-child(4) { animation-delay: 150ms; }
.sf-stagger > *:nth-child(5) { animation-delay: 200ms; }
.sf-stagger > *:nth-child(6) { animation-delay: 250ms; }
.sf-stagger > *:nth-child(n+7) { animation-delay: 300ms; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sf-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: var(--sf-text-2xl); }
}
@media (max-width: 480px) {
  .sf-kpi-grid { grid-template-columns: 1fr 1fr; }
  .sf-chart-bar-item { grid-template-columns: 80px 1fr 60px; }
}