/* ========================================================================
   Silex Local — Design Tokens
   Identité : violet primaire + orange braise + dark/light + Inter/Manrope
   ======================================================================== */

:root {
  /* Palette dark (default) — navy profond + cyan Le-Silex */
  --bg:        #060c1e;
  --bg-2:      #0d1830;
  --bg-3:      #18243f;
  --surface:   rgba(24, 36, 63, 0.85);
  --surface-2: rgba(24, 36, 63, 0.55);
  --border:    rgba(255, 255, 255, 0.08);
  --border-2:  rgba(255, 255, 255, 0.16);

  --text:      #f5f8ff;
  --text-2:    #b9c4dc;
  --text-3:    #7a8bab;
  --text-inv:  #060c1e;

  /* Primary = navy / royal blue Le-Silex */
  --primary:   #3b82f6;
  --primary-2: #60a5fa;
  --primary-3: rgba(59, 130, 246, 0.14);

  /* Accent = cyan / turquoise (signature Le-Silex) */
  --accent:    #06b6d4;
  --accent-2:  #0891b2;
  --accent-3:  rgba(6, 182, 212, 0.14);

  /* Secondary highlight = orange braise (signal d'action chaud) */
  --secondary:   #fb923c;
  --secondary-2: #f97316;
  --secondary-3: rgba(251, 146, 60, 0.14);

  --success:   #10b981;
  --success-2: #34d399;
  --warning:   #fbbf24;
  --warning-2: #f59e0b;
  --danger:    #f87171;
  --danger-2:  #ef4444;
  --info:      #60a5fa;

  /* Statuts checklist */
  --check-ok:   var(--success);
  --check-warn: var(--warning);
  --check-fail: var(--danger);
  --check-na:   var(--text-3);

  --check-ok-bg:   rgba(16, 185, 129, 0.06);
  --check-warn-bg: rgba(251, 191, 36, 0.06);
  --check-fail-bg: rgba(248, 113, 113, 0.06);
  --check-na-bg:   rgba(99, 106, 130, 0.04);

  /* Difficulté badges */
  --diff-easy-bg:   rgba(16, 185, 129, 0.15);
  --diff-easy-fg:   #34d399;
  --diff-med-bg:    rgba(251, 191, 36, 0.15);
  --diff-med-fg:    #fbbf24;
  --diff-hard-bg:   rgba(248, 113, 113, 0.15);
  --diff-hard-fg:   #f87171;

  /* Typographie */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Manrope', 'Inter', -apple-system, sans-serif;

  --fs-xs:   0.7rem;
  --fs-sm:   0.78rem;
  --fs-base: 0.875rem;
  --fs-md:   0.95rem;
  --fs-lg:   1.1rem;
  --fs-xl:   1.3rem;
  --fs-2xl:  1.6rem;
  --fs-3xl:  2.2rem;
  --fs-4xl:  3rem;
  --fs-5xl:  4.5rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;
  --fw-black:   900;

  /* Espacement (échelle 4px) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;

  /* Border radius */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 10px;
  --r-5: 12px;
  --r-6: 16px;
  --r-full: 999px;

  /* Layout */
  --sidebar-w: 260px;
  --sidebar-2-w: 220px;
  --max-w: 1440px;

  /* Ombres */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(124, 110, 246, 0.25);

  /* Transitions */
  --t-fast: 0.12s ease;
  --t-base: 0.18s ease;
  --t-slow: 0.32s ease;
  --t-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Light theme — premium minimaliste façon SaaS B2B Le-Silex */
html[data-theme="light"] {
  --bg:        #f4f6fb;
  --bg-2:      #ffffff;
  --bg-3:      #eef2f8;
  --surface:   rgba(255, 255, 255, 0.95);
  --surface-2: rgba(248, 250, 252, 0.9);
  --border:    rgba(15, 23, 42, 0.08);
  --border-2:  rgba(15, 23, 42, 0.16);

  --text:      #0a1a3f;
  --text-2:    #475569;
  --text-3:    #94a3b8;
  --text-inv:  #ffffff;

  --primary:   #2563eb;
  --primary-2: #3b82f6;
  --primary-3: rgba(37, 99, 235, 0.1);

  --accent:    #0891b2;
  --accent-2:  #0e7490;
  --accent-3:  rgba(8, 145, 178, 0.1);

  --secondary:   #f97316;
  --secondary-2: #ea580c;
  --secondary-3: rgba(249, 115, 22, 0.1);

  --success:   #059669;
  --success-2: #10b981;
  --warning:   #d97706;
  --warning-2: #b45309;
  --danger:    #ef4444;
  --danger-2:  #dc2626;
  --info:      #3b82f6;

  --check-ok-bg:   rgba(5, 150, 105, 0.06);
  --check-warn-bg: rgba(217, 119, 6, 0.06);
  --check-fail-bg: rgba(239, 68, 68, 0.06);
  --check-na-bg:   rgba(148, 163, 184, 0.06);

  --diff-easy-bg: rgba(5, 150, 105, 0.12);
  --diff-easy-fg: #059669;
  --diff-med-bg:  rgba(217, 119, 6, 0.12);
  --diff-med-fg:  #d97706;
  --diff-hard-bg: rgba(239, 68, 68, 0.12);
  --diff-hard-fg: #dc2626;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-3: 0 8px 24px rgba(15, 23, 42, 0.1);
  --shadow-glow: 0 0 20px rgba(109, 94, 240, 0.2);
}

/* ========================================================================
   Animations — héritage rapport-netlinking + identité Silex Local
   ======================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes countIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--primary-3); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}

@keyframes barGrow {
  from { width: 0; }
}

@keyframes ringDraw {
  to { stroke-dashoffset: var(--target-offset); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0); max-height: 500px; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Identité Silex Local */
@keyframes facetReveal {
  0%   { clip-path: polygon(50% 50%, 50% 50%, 50% 50%); opacity: 0; }
  60%  { clip-path: polygon(20% 0%, 100% 20%, 80% 100%, 0% 80%); opacity: 1; }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1; }
}

@keyframes forgeStamp {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes confettiBurst {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; }
  30%          { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}