/* ============================================================
   CRM CAFA Formations — Design tokens
   Couleurs exactes extraites du brief (charte CAFA + dérivés
   d'usage back-office). Mode clair. (verbatim maquette)
   ============================================================ */

:root {
  /* ---- Marque CAFA (ne pas modifier) ---- */
  --cafa-blue:        #1F00C9;  /* Bleu signature / primaire */
  --cafa-white:       #FFFFFF;
  --cafa-red:         #FF0000;  /* Rouge vif — erreurs bloquantes uniquement */
  --cafa-brick:       #B10C1D;  /* Rouge brique — refus / alerte critique */
  --cafa-bordeaux:    #881723;
  --cafa-steel:       #46718F;  /* Bleu acier — secondaire / info */
  --cafa-cream:       #FFF9E5;  /* Crème — encarts d'aide, parcimonie */
  --cafa-pale:        #F4F8FB;  /* Bleu très clair — fond d'app */

  /* ---- Surfaces ---- */
  --bg:               var(--cafa-pale);
  --surface:          #FFFFFF;
  --surface-2:        #FBFCFE;
  --accent-soft:      var(--cafa-cream);

  /* ---- Texte ---- */
  --text:             #0B0B12;  /* noir adouci */
  --text-muted:       #5B6473;  /* labels / secondaire */
  --text-faint:       #8A93A3;
  --border:           #E3E8F0;
  --border-strong:    #CDD6E4;

  /* ---- Primaire & teintes ---- */
  --primary:          var(--cafa-blue);
  --primary-hover:    #1900A8;
  --primary-press:    #15008C;
  --primary-50:       color-mix(in srgb, var(--cafa-blue) 5%,  white);
  --primary-100:      color-mix(in srgb, var(--cafa-blue) 10%, white);
  --primary-200:      color-mix(in srgb, var(--cafa-blue) 18%, white);
  --primary-300:      color-mix(in srgb, var(--cafa-blue) 32%, white);
  --primary-soft:     color-mix(in srgb, var(--cafa-blue) 8%,  white);
  --on-primary:       #FFFFFF;

  /* ---- Statuts sémantiques ---- */
  --success:          #1B8A5A;  --success-bg: color-mix(in srgb, #1B8A5A 12%, white);
  --warning:          #C2790B;  --warning-bg: color-mix(in srgb, #C2790B 13%, white);
  --danger:           #B10C1D;  --danger-bg:  color-mix(in srgb, #B10C1D 11%, white);
  --info:             #46718F;  --info-bg:    color-mix(in srgb, #46718F 13%, white);
  --neutral:          #5B6473;  --neutral-bg: #EEF1F6;

  /* ---- Score matching (échelle bleu signature) ---- */
  --score-track:      #EAE7F8;

  /* ---- Élévation ---- */
  --shadow-xs:  0 1px 2px rgba(11,11,18,.05);
  --shadow-sm:  0 1px 3px rgba(11,11,18,.07), 0 1px 2px rgba(11,11,18,.04);
  --shadow-md:  0 4px 12px rgba(11,11,18,.08), 0 2px 4px rgba(11,11,18,.04);
  --shadow-lg:  0 12px 32px rgba(11,11,18,.14), 0 4px 10px rgba(11,11,18,.06);
  --shadow-primary: 0 6px 18px rgba(31,0,201,.22);

  /* ---- Rayons ---- */
  --r-xs: 5px;  --r-sm: 7px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-full: 999px;

  /* ---- Espacement (base 4) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Type ---- */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Plus Jakarta Sans", system-ui, sans-serif;

  /* ---- Layout ---- */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 60px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { font-size: 14px; line-height: 1.5; }

/* tabular numbers everywhere data lives */
.tnum, table, .kpi-value, .score-num { font-variant-numeric: tabular-nums; }

h1,h2,h3,h4,h5 { margin: 0; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
p { margin: 0; }
button { font-family: inherit; }
a { color: var(--primary); text-decoration: none; }

::selection { background: color-mix(in srgb, var(--cafa-blue) 22%, white); }

/* Scrollbars discrètes */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cfd6e2; border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #b6c0d1; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* utilitaires */
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.mono  { font-family: "SF Mono", ui-monospace, "Roboto Mono", monospace; }
.nowrap{ white-space: nowrap; }
.cap   { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; }

/* Placeholder image (jamais de SVG dessiné à la main) */
.img-ph {
  background:
    repeating-linear-gradient(135deg, #eef1f6 0 10px, #e7ebf2 10px 20px);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .04em; border-radius: var(--r-md);
}

@keyframes cafa-spin { to { transform: rotate(360deg); } }
@keyframes cafa-fade { from { transform: translateY(7px); } to { transform: none; } }
@keyframes cafa-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes cafa-overlay { from { opacity: 0; } to { opacity: 1; } }
@keyframes cafa-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }