/* ============================================================
   Complis — Design Tokens (BRIEF #44 Sprint A — v3.0.2)
   ----------------------------------------------------------------
   Socle commun de tokens primitifs + sémantiques. Chargé EN PREMIER
   dans index.html, AVANT ui-v2.css / workflow.css / etc.

   Coexistence avec --v2-* déjà définis dans ui-v2.css :
   - Les --v2-* gardent leur valeur (rétrocompat totale).
   - Les nouveaux modules / refonte sidebar (#41) / wizard (#42) /
     boutons unifiés (#44 Sprint B) utiliseront ces tokens.
   - Sprint B+C migreront progressivement les --v2-* vers les tokens.

   Convention :
   --color-*  → couleurs sémantiques (primary/secondary/danger/etc.)
   --gray-*   → primitives gris (50→900)
   --blue-*   → primitives couleurs (500/600/700)
   --fs-*     → font-size (xs/sm/md/lg/xl/2xl/3xl)
   --fw-*     → font-weight (normal/medium/semi/bold)
   --lh-*     → line-height (tight/base/relax)
   --sp-*     → spacing (1=4px → 8=32px)
   --radius-* → border-radius
   --shadow-* → box-shadow
   ============================================================ */

:root {
  /* ── Primitives — palette de base ─────────────────────────── */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;

  --green-50:  #F0FDF4;
  --green-100: #DCFCE7;
  --green-500: #10B981;
  --green-600: #059669;
  --green-700: #047857;

  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;

  --red-50:   #FEF2F2;
  --red-100:  #FEE2E2;
  --red-200:  #FECACA;
  --red-500:  #EF4444;
  --red-600:  #DC2626;
  --red-700:  #B91C1C;

  --purple-50: #FAF5FF;
  --purple-500: #A855F7;
  --purple-700: #7C3AED;

  /* ── Sémantique : couleurs (référencent les primitives) ──── */
  --color-primary:        #185FA5;             /* bleu Complis (compat --v2-accent) */
  --color-primary-hover:  #0C447C;
  --color-primary-soft:   var(--blue-50);

  --color-secondary:      var(--gray-500);
  --color-secondary-hover:var(--gray-700);

  --color-success:        var(--green-500);
  --color-success-soft:   var(--green-50);
  --color-warning:        var(--amber-500);
  --color-warning-soft:   var(--amber-50);
  --color-danger:         var(--red-500);
  --color-danger-soft:    var(--red-50);
  --color-info:           var(--blue-500);
  --color-info-soft:      var(--blue-50);

  --color-text:           var(--gray-900);
  --color-text-muted:     var(--gray-500);
  --color-text-soft:      var(--gray-700);
  --color-text-inv:       #FFFFFF;

  --color-bg:             #FFFFFF;
  --color-bg-soft:        var(--gray-50);
  --color-bg-card:        #FFFFFF;
  --color-bg-app:         var(--gray-100);
  --color-border:         var(--gray-200);
  --color-border-soft:    var(--gray-100);
  --color-border-strong:  var(--gray-300);

  /* ── Tokens sidebar (préparent BRIEF #41) ──────────────────── */
  --color-pilotage:   var(--blue-600);   /* dashboards, analytics */
  --color-activite:   #06B6D4;           /* projets, visites, prospects (cyan) */
  --color-catalogue:  var(--green-600);  /* matériaux, packages */
  --color-admin:      var(--gray-500);   /* paramètres */

  /* ── Typographie ───────────────────────────────────────────── */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-family-mono: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;

  /* Échelle ~1.125 ratio */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-md:   13px;
  --fs-base: 14px;
  --fs-lg:   15px;
  --fs-xl:   17px;
  --fs-2xl:  20px;
  --fs-3xl:  24px;
  --fs-4xl:  30px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --lh-tight: 1.2;
  --lh-base:  1.4;
  --lh-relax: 1.6;

  /* ── Espacements ───────────────────────────────────────────── */
  --sp-0: 0;
  --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;

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

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);

  /* ── Transitions ───────────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ── Z-index ───────────────────────────────────────────────── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-modal:     1000;
  --z-toast:     2000;
}

/* ============================================================
   MODE SOMBRE — pris en charge via body.dark (toggle existant
   gère déjà cette classe, on ajoute juste le surcharge tokens).
   ============================================================ */
body.dark {
  --color-text:        var(--gray-100);
  --color-text-muted:  var(--gray-400);
  --color-text-soft:   var(--gray-300);

  --color-bg:          #0F172A;
  --color-bg-soft:     #1E293B;
  --color-bg-card:     #1E293B;
  --color-bg-app:      #0F172A;
  --color-border:      #334155;
  --color-border-soft: #1E293B;
  --color-border-strong: #475569;

  /* ── Primary lisible en dark mode (sinon bleu foncé sur fond sombre) ─
     #185FA5 → #60A5FA (blue-400). Les boutons .btn-primary conservent
     un contraste correct (fond bleu clair + texte blanc). */
  --color-primary:       #60A5FA;
  --color-primary-hover: #93C5FD;

  --color-primary-soft: rgba(37, 99, 235, 0.12);
  --color-success-soft: rgba(16, 185, 129, 0.12);
  --color-warning-soft: rgba(245, 158, 11, 0.12);
  --color-danger-soft:  rgba(239, 68, 68, 0.12);
  --color-info-soft:    rgba(59, 130, 246, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

  /* ── Redéfinition des --v2-* (ui-v2.css) en dark mode ──
     Sinon ces variables sont figées à leur valeur computée sur :root
     (light), même quand --color-bg-app est surchargé sur body.dark.
     Conséquence sans cette section : `body.v2-active{background:var(--v2-bg)}`
     reste #F3F4F6 (clair) en dark mode → page entière en fond clair
     alors que les cards sont sombres → titres clairs illisibles. */
  --v2-bg:           #0F172A;
  --v2-text:         var(--gray-100);
  --v2-muted:        var(--gray-400);
  --v2-border:       #334155;
  --v2-card-bg:      #1E293B;
  --v2-topbar-bg:    #1E293B;
  --v2-topbar-border: #334155;
  --v2-accent:       #60A5FA;
  --v2-accent-hover: #93C5FD;
}

/* Force le fond du body en dark mode (battle de spécificité avec
   body.v2-active{background:var(--v2-bg)} d'ui-v2.css). On utilise
   `body.dark` deux fois pour battre tout autre sélecteur 0,1,1. */
body.dark,
body.dark.v2-active {
  background: var(--color-bg-app) !important;
  color: var(--color-text);
}

/* ============================================================
   FILET DE SÉCURITÉ DARK — couleurs hex hardcodées en inline
   ----------------------------------------------------------------
   Beaucoup d'anciens écrans (formations, dossiers, admin budget…)
   utilisent des hex hardcodés en style="color:#042C53" ou similaire.
   Ces couleurs restent sombres en mode dark → illisibles sur fond
   --color-bg-card (#1E293B). On force ici un bleu clair lisible.
   À supprimer progressivement quand les hex inline seront migrés
   vers var(--color-primary).
   ============================================================ */
body.dark [style*="color:#042C53"],
body.dark [style*="color: #042C53"],
body.dark [style*="color:#185FA5"],
body.dark [style*="color: #185FA5"],
body.dark [style*="color:#0C447C"],
body.dark [style*="color: #0C447C"],
body.dark [style*="color:#1D4ED8"],
body.dark [style*="color: #1D4ED8"],
body.dark [style*="color:#1E40AF"],
body.dark [style*="color: #1E40AF"],
body.dark [style*="color:#1E3A8A"],
body.dark [style*="color: #1E3A8A"],
body.dark [style*="color:#2563EB"],
body.dark [style*="color: #2563EB"],
body.dark [style*="color:#2563eb"],
body.dark [style*="color: #2563eb"] {
  color: #60A5FA !important;
}

/* Idem pour fonds clairs hardcodés (badges, tags, code inline) qui
   restent clairs en dark mode → texte foncé hérité = illisible. On
   force le fond à une zone sombre cohérente avec --color-bg-soft. */
body.dark [style*="background:#F3F4F6"],
body.dark [style*="background: #F3F4F6"],
body.dark [style*="background:#f3f4f6"],
body.dark [style*="background: #f3f4f6"],
body.dark [style*="background:#FFFFFF"],
body.dark [style*="background: #FFFFFF"],
body.dark [style*="background:#ffffff"],
body.dark [style*="background: #ffffff"],
body.dark [style*="background:#FFF"],
body.dark [style*="background: #FFF"],
body.dark [style*="background:#fff"],
body.dark [style*="background: #fff"] {
  background: var(--color-bg-card) !important;
}

/* ============================================================
   FORMULAIRES NATIFS — input / select / textarea en dark mode
   ----------------------------------------------------------------
   Sans cette règle, le navigateur applique son user agent stylesheet
   (fond blanc + texte noir) sur tout <input>/<select>/<textarea> qui
   n'a pas de classe (.inp/.ti/.sel) — ce qui crée des îlots blancs
   illisibles dans les espaces admin/formateur du module formations,
   et tout autre module produisant des inputs vanilla.
   On exclut les types qui doivent rester natifs : checkbox/radio/
   file/range/color, submit/button/reset (qui sont stylés par .btn).
   ============================================================ */
body.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
body.dark select,
body.dark textarea {
  background: var(--color-bg-card);
  color: var(--color-text);
  border-color: var(--color-border);
}
body.dark input::placeholder,
body.dark textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}
/* Date / time pickers — l'icône calendrier reste illisible en sombre
   par défaut, on inverse les filtres pour qu'elle apparaisse claire */
body.dark input[type="date"]::-webkit-calendar-picker-indicator,
body.dark input[type="time"]::-webkit-calendar-picker-indicator,
body.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.dark input[type="month"]::-webkit-calendar-picker-indicator,
body.dark input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.7);
}
/* Options de <select> en dark mode (sinon menu déroulant blanc) */
body.dark select option {
  background: var(--color-bg-card);
  color: var(--color-text);
}

/* Compatibilité prefers-color-scheme : si l'utilisateur n'a pas
   manuellement choisi (pas de body.dark posé) ET son OS est sombre,
   on passe automatiquement en sombre. */
/* ============================================================
   AUTO DARK MODE via OS — DÉSACTIVÉ
   ----------------------------------------------------------------
   Le bloc `@media (prefers-color-scheme: dark)` causait des bugs
   subtils : il surchargeait `--color-text` à clair, mais comme
   `body.v2-active{background:var(--v2-bg)}` d'ui-v2.css avait une
   spécificité plus forte, le fond restait clair → texte clair sur
   fond clair = illisible.
   Solution : on s'appuie uniquement sur le toggle explicite
   (`body.dark` via le bouton de la sidebar). L'utilisateur choisit
   son mode, pas son OS.
   ============================================================ */

/* ============================================================
   BOUTONS UNIFIÉS — BRIEF #44 Sprint B (v3.0.4)
   ----------------------------------------------------------------
   Source unique : .btn + variantes. Les classes legacy .btnm/.btns/
   .btnd/.cbtn/.v2-btn* sont aliasées via sélecteurs multiples plus bas
   pour compat totale (pas de @apply, on duplique les sélecteurs).
   ============================================================ */
.btn,
.btnm, .btns, .btnd, .cbtn,
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-family: inherit;
  line-height: var(--lh-tight);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:disabled,
.btnm:disabled, .btns:disabled, .btnd:disabled, .cbtn:disabled,
.v2-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── PRIMARY (action principale) ── */
.btn-primary,
.btnm,
.v2-btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inv);
  border-color: var(--color-primary);
  font-weight: var(--fw-semi);
}
.btn-primary:hover,
.btnm:hover,
.v2-btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* ── SECONDARY (action neutre) ── */
.btn-secondary,
.btns {
  background: var(--color-bg-card);
  color: var(--color-text-soft);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover,
.btns:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-border-strong);
}

/* ── GHOST (action discrète) ── */
.btn-ghost,
.v2-btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-ghost:hover,
.v2-btn-ghost:hover {
  background: var(--color-bg-soft);
}

/* ── DANGER (action destructive) ── */
.btn-danger,
.btnd {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: var(--red-200);
  font-weight: var(--fw-semi);
}
.btn-danger:hover,
.btnd:hover {
  background: var(--red-100);
  border-color: var(--red-200);
}

/* ── CHOICE BUTTON (sélection toggle, ex code HE/DR) ── */
.cbtn {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border-strong);
  font-weight: var(--fw-bold);
  padding: 10px 8px;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

/* ── TAILLES ── */
.btn-sm,
.v2-btn-sm {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
}
.btn-lg {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-lg);
}

/* ── ICONE SEULE (carrée) ── */
.btn-icon {
  padding: var(--sp-2);
  width: 32px;
  height: 32px;
}

/* ============================================================
   UTILITY CLASSES — BRIEF #44 Sprint C (v3.0.7)
   ----------------------------------------------------------------
   Helpers réutilisables pour migrer progressivement les style="..."
   inline. Préférez ces classes aux styles inline dans tout nouveau
   code. Elles consomment les tokens (cohérence + dark mode auto).
   ============================================================ */

/* ── Tailles de texte ── */
.text-xs  { font-size: var(--fs-xs); }
.text-sm  { font-size: var(--fs-sm); }
.text-md  { font-size: var(--fs-md); }
.text-lg  { font-size: var(--fs-lg); }
.text-xl  { font-size: var(--fs-xl); }
.text-2xl { font-size: var(--fs-2xl); }

/* ── Poids de texte ── */
.font-normal { font-weight: var(--fw-normal); }
.font-medium { font-weight: var(--fw-medium); }
.font-semi   { font-weight: var(--fw-semi); }
.font-bold   { font-weight: var(--fw-bold); }

/* ── Couleurs sémantiques de texte ── */
.text-default { color: var(--color-text); }
.text-muted   { color: var(--color-text-muted); }
.text-soft    { color: var(--color-text-soft); }
.text-inv     { color: var(--color-text-inv); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger  { color: var(--color-danger); }
.text-info    { color: var(--color-info); }

/* ── Couleurs sémantiques de fond ── */
.bg-default      { background: var(--color-bg); }
.bg-soft         { background: var(--color-bg-soft); }
.bg-card         { background: var(--color-bg-card); }
.bg-app          { background: var(--color-bg-app); }
.bg-primary      { background: var(--color-primary); }
.bg-primary-soft { background: var(--color-primary-soft); }
.bg-success-soft { background: var(--color-success-soft); }
.bg-warning-soft { background: var(--color-warning-soft); }
.bg-danger-soft  { background: var(--color-danger-soft); }
.bg-info-soft    { background: var(--color-info-soft); }

/* ── Bordures sémantiques ── */
.border-default { border: 1px solid var(--color-border); }
.border-soft    { border: 1px solid var(--color-border-soft); }
.border-strong  { border: 1px solid var(--color-border-strong); }
.border-warning { border: 1px solid var(--color-warning); }
.border-danger  { border: 1px solid var(--color-danger); }
.border-success { border: 1px solid var(--color-success); }

/* ── Radius ── */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-pill { border-radius: var(--radius-pill); }

/* ── Shadows ── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ── Espacements (padding) ── */
.p-1 { padding: var(--sp-1); }
.p-2 { padding: var(--sp-2); }
.p-3 { padding: var(--sp-3); }
.p-4 { padding: var(--sp-4); }
.p-5 { padding: var(--sp-5); }
.p-6 { padding: var(--sp-6); }
.px-1 { padding-left: var(--sp-1); padding-right: var(--sp-1); }
.px-2 { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.px-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.py-1 { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
.py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.py-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }

/* ── Espacements (margin) ── */
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }

/* ── Layout (flex) ── */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-row      { display: flex; flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; min-width: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }

/* ── Gaps ── */
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }

/* ── Bandeaux sémantiques (info / warning / danger / success) ── */
/* Remplace les bandeaux inline du type style="background:#FEF3C7;..." */
.banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.banner-info    { background: var(--color-info-soft);    color: var(--color-info);    border-color: var(--color-info); }
.banner-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning); }
.banner-danger  { background: var(--color-danger-soft);  color: var(--color-danger);  border-color: var(--color-danger); }
.banner-success { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success); }