/**
 * ============================================
 * SUPERCOMPTABLE - CSS EXERCICES PREMIUM
 * Version 6.0 - Design UX Luxueux & Immersif
 * ============================================
 * 
 * CORRECTIONS APPLIQUÉES :
 * - Hero avec fond sombre en dark mode
 * - Aucune zone blanche en mode sombre
 * - Tous les backgrounds adaptés light/dark
 * - Texte toujours lisible
 * ============================================
 */

/* ============================================
   SECTION 1 : VARIABLES SYSTÈME
   ============================================ */

:root {
    /* ----------------------------------------
       PALETTE PRINCIPALE - Violet Luxe
       ---------------------------------------- */
    
    /* Primaire - Violet Royal */
    --color-primary: #7C3AED;
    --color-primary-dark: #6D28D9;
    --color-primary-darker: #5B21B6;
    --color-primary-light: #A78BFA;
    --color-primary-lighter: #C4B5FD;
    --color-primary-subtle: #EDE9FE;
    --color-primary-rgb: 124, 58, 237;
    
    /* Accent - Cyan Océan */
    --color-accent: #06B6D4;
    --color-accent-dark: #0891B2;
    --color-accent-light: #22D3EE;
    --color-accent-lighter: #67E8F9;
    --color-accent-subtle: #ECFEFF;
    --color-accent-rgb: 6, 182, 212;
    
    /* Tertiaire - Rose Corail */
    --color-rose: #F43F5E;
    --color-rose-dark: #E11D48;
    --color-rose-light: #FB7185;
    --color-rose-subtle: #FFF1F2;
    --color-rose-rgb: 244, 63, 94;
    
    /* Or/Récompense - Ambre Luxueux */
    --color-gold: #F59E0B;
    --color-gold-dark: #D97706;
    --color-gold-light: #FBBF24;
    --color-gold-lighter: #FCD34D;
    --color-gold-subtle: #FFFBEB;
    --color-gold-rgb: 245, 158, 11;
    
    /* ----------------------------------------
       ÉTATS SÉMANTIQUES
       ---------------------------------------- */
    
    /* Succès - Émeraude Profond */
    --color-success: #10B981;
    --color-success-dark: #059669;
    --color-success-light: #34D399;
    --color-success-lighter: #6EE7B7;
    --color-success-subtle: #D1FAE5;
    --color-success-rgb: 16, 185, 129;
    
    /* Erreur - Rouge Rubis Doux */
    --color-error: #EF4444;
    --color-error-dark: #DC2626;
    --color-error-light: #F87171;
    --color-error-lighter: #FCA5A5;
    --color-error-subtle: #FEE2E2;
    --color-error-rgb: 239, 68, 68;
    
    /* Avertissement - Orange Flamme */
    --color-warning: #F97316;
    --color-warning-dark: #EA580C;
    --color-warning-light: #FB923C;
    --color-warning-lighter: #FDBA74;
    --color-warning-subtle: #FFF7ED;
    --color-warning-rgb: 249, 115, 22;
    
    /* Info - Bleu Saphir */
    --color-info: #3B82F6;
    --color-info-dark: #2563EB;
    --color-info-light: #60A5FA;
    --color-info-lighter: #93C5FD;
    --color-info-subtle: #DBEAFE;
    --color-info-rgb: 59, 130, 246;
    
    /* ----------------------------------------
       ESPACEMENTS (8px grid)
       ---------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    
    /* ----------------------------------------
       RAYONS DE BORDURE
       ---------------------------------------- */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;
    
    /* ----------------------------------------
       TYPOGRAPHIE
       ---------------------------------------- */
    --font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
    --font-display: 'Plus Jakarta Sans', var(--font-sans);
    
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.75;
    
    /* ----------------------------------------
       TRANSITIONS
       ---------------------------------------- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;
    
    --transition-fast: var(--duration-fast) var(--ease-out);
    --transition-normal: var(--duration-normal) var(--ease-out);
    --transition-slow: var(--duration-slow) var(--ease-out);
    --transition-spring: var(--duration-normal) var(--ease-spring);
    
    /* ----------------------------------------
       LAYOUT
       ---------------------------------------- */
    --header-height: 68px;
    --container-max: 940px;
    --container-wide: 1280px;
    --sidebar-width: 300px;
}

/* ============================================
   SECTION 2 : THÈME CLAIR - LUMINEUX & ÉLÉGANT
   ============================================ */

[data-theme="light"],
:root:not([data-theme="dark"]) {
    /* Texte - Hiérarchie raffinée */
    --color-text: #1E1B4B;
    --color-text-secondary: #3730A3;
    --color-text-tertiary: #6366F1;
    --color-text-muted: #A5B4FC;
    --color-text-inverse: #FFFFFF;
    
    /* Fonds - Crème avec reflets violets */
    --color-bg: #FAFAFE;
    --color-bg-elevated: #FFFFFF;
    --color-bg-secondary: #F5F3FF;
    --color-bg-tertiary: #EDE9FE;
    --color-bg-sunken: #DDD6FE;
    --color-bg-overlay: rgba(30, 27, 75, 0.65);
    
    /* Bordures - Teintées élégamment */
    --color-border: #E0E7FF;
    --color-border-light: #EEF2FF;
    --color-border-dark: #C7D2FE;
    --color-border-focus: var(--color-primary);
    
    /* Ombres - Colorées et luxueuses */
    --shadow-xs: 0 1px 2px rgba(124, 58, 237, 0.04);
    --shadow-sm: 0 2px 4px rgba(124, 58, 237, 0.06), 0 1px 2px rgba(124, 58, 237, 0.04);
    --shadow-md: 0 4px 8px -2px rgba(124, 58, 237, 0.08), 0 2px 4px -1px rgba(124, 58, 237, 0.05);
    --shadow-lg: 0 12px 24px -4px rgba(124, 58, 237, 0.12), 0 4px 8px -2px rgba(124, 58, 237, 0.06);
    --shadow-xl: 0 24px 48px -8px rgba(124, 58, 237, 0.16), 0 12px 24px -4px rgba(124, 58, 237, 0.08);
    --shadow-2xl: 0 32px 64px -12px rgba(124, 58, 237, 0.2);
    --shadow-primary: 0 8px 24px -4px rgba(124, 58, 237, 0.4);
    --shadow-success: 0 8px 24px -4px rgba(16, 185, 129, 0.4);
    --shadow-error: 0 8px 24px -4px rgba(239, 68, 68, 0.4);
    --shadow-gold: 0 8px 24px -4px rgba(245, 158, 11, 0.4);
    --shadow-inner: inset 0 2px 4px 0 rgba(124, 58, 237, 0.06);
    
    /* Glow Premium */
    --glow-primary: 0 0 30px rgba(124, 58, 237, 0.3);
    --glow-accent: 0 0 30px rgba(6, 182, 212, 0.3);
    --glow-success: 0 0 30px rgba(16, 185, 129, 0.3);
    --glow-gold: 0 0 30px rgba(245, 158, 11, 0.3);
    
    /* Header */
    --header-bg: rgba(255, 255, 255, 0.85);
    --header-border: rgba(224, 231, 255, 0.9);
    --header-shadow: 0 4px 20px rgba(124, 58, 237, 0.08);
    
    /* Gradients Luxueux */
    --gradient-primary: linear-gradient(135deg, #7C3AED 0%, #6D28D9 50%, #5B21B6 100%);
    --gradient-primary-soft: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
    --gradient-accent: linear-gradient(135deg, #22D3EE 0%, #06B6D4 50%, #0891B2 100%);
    --gradient-success: linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%);
    --gradient-gold: linear-gradient(135deg, #FCD34D 0%, #F59E0B 50%, #D97706 100%);
    --gradient-rose: linear-gradient(135deg, #FB7185 0%, #F43F5E 50%, #E11D48 100%);
    --gradient-rainbow: linear-gradient(135deg, #7C3AED 0%, #06B6D4 25%, #10B981 50%, #F59E0B 75%, #F43F5E 100%);
    --gradient-hero: linear-gradient(160deg, #F5F3FF 0%, #FAFAFE 25%, #ECFEFF 50%, #FFF1F2 75%, #FAFAFE 100%);
    --gradient-mesh: 
        radial-gradient(ellipse at 0% 0%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 0%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(244, 63, 94, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 100%, rgba(245, 158, 11, 0.06) 0%, transparent 50%);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 100%);
    --gradient-card: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
    --gradient-surface: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
}

/* ============================================
   SECTION 3 : THÈME SOMBRE - NOIR ABSOLU
   ============================================ */

[data-theme="dark"] {
    /* Texte - Blanc pur et lumineux */
    --color-text: #FFFFFF;
    --color-text-secondary: #E2E8F0;
    --color-text-tertiary: #CBD5E1;
    --color-text-muted: #94A3B8;
    --color-text-inverse: #000000;
    
    /* Fonds - NOIR TOTAL - CORRIGÉ */
    --color-bg: #000000;
    --color-bg-elevated: #0A0A0C;
    --color-bg-secondary: #111114;
    --color-bg-tertiary: #1A1A1F;
    --color-bg-sunken: #050507;
    --color-bg-overlay: rgba(0, 0, 0, 0.95);
    
    /* Bordures - Subtiles sur noir */
    --color-border: #2A2A30;
    --color-border-light: #3A3A42;
    --color-border-dark: #1A1A1F;
    --color-border-focus: var(--color-primary-light);
    
    /* Couleurs ajustées - Plus lumineuses pour contraste */
    --color-primary: #A78BFA;
    --color-primary-dark: #8B5CF6;
    --color-primary-light: #C4B5FD;
    --color-primary-lighter: #DDD6FE;
    --color-primary-subtle: rgba(167, 139, 250, 0.12);
    --color-primary-rgb: 167, 139, 250;
    
    --color-accent: #22D3EE;
    --color-accent-dark: #06B6D4;
    --color-accent-light: #67E8F9;
    --color-accent-lighter: #A5F3FC;
    --color-accent-subtle: rgba(34, 211, 238, 0.12);
    --color-accent-rgb: 34, 211, 238;
    
    --color-rose: #FB7185;
    --color-rose-dark: #F43F5E;
    --color-rose-light: #FDA4AF;
    --color-rose-subtle: rgba(251, 113, 133, 0.12);
    --color-rose-rgb: 251, 113, 133;
    
    --color-gold: #FBBF24;
    --color-gold-dark: #F59E0B;
    --color-gold-light: #FCD34D;
    --color-gold-lighter: #FDE68A;
    --color-gold-subtle: rgba(251, 191, 36, 0.12);
    --color-gold-rgb: 251, 191, 36;
    
    --color-success: #34D399;
    --color-success-dark: #10B981;
    --color-success-light: #6EE7B7;
    --color-success-lighter: #A7F3D0;
    --color-success-subtle: rgba(52, 211, 153, 0.12);
    --color-success-rgb: 52, 211, 153;
    
    --color-error: #F87171;
    --color-error-dark: #EF4444;
    --color-error-light: #FCA5A5;
    --color-error-lighter: #FECACA;
    --color-error-subtle: rgba(248, 113, 113, 0.12);
    --color-error-rgb: 248, 113, 113;
    
    --color-warning: #FB923C;
    --color-warning-dark: #F97316;
    --color-warning-light: #FDBA74;
    --color-warning-lighter: #FED7AA;
    --color-warning-subtle: rgba(251, 146, 60, 0.12);
    --color-warning-rgb: 251, 146, 60;
    
    --color-info: #60A5FA;
    --color-info-dark: #3B82F6;
    --color-info-light: #93C5FD;
    --color-info-lighter: #BFDBFE;
    --color-info-subtle: rgba(96, 165, 250, 0.12);
    --color-info-rgb: 96, 165, 250;
    
    /* Ombres Dark - Avec halos colorés néon */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.7);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.8);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.85);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.9);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.95);
    --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.98);
    --shadow-primary: 0 8px 32px -4px rgba(167, 139, 250, 0.5);
    --shadow-success: 0 8px 32px -4px rgba(52, 211, 153, 0.5);
    --shadow-error: 0 8px 32px -4px rgba(248, 113, 113, 0.5);
    --shadow-gold: 0 8px 32px -4px rgba(251, 191, 36, 0.5);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    
    /* Glow Néon */
    --glow-primary: 0 0 50px rgba(167, 139, 250, 0.4), 0 0 100px rgba(167, 139, 250, 0.2);
    --glow-accent: 0 0 50px rgba(34, 211, 238, 0.4), 0 0 100px rgba(34, 211, 238, 0.2);
    --glow-success: 0 0 50px rgba(52, 211, 153, 0.4), 0 0 100px rgba(52, 211, 153, 0.2);
    --glow-gold: 0 0 50px rgba(251, 191, 36, 0.4), 0 0 100px rgba(251, 191, 36, 0.2);
    
    /* Header Noir */
    --header-bg: rgba(0, 0, 0, 0.92);
    --header-border: rgba(42, 42, 48, 0.9);
    --header-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
    
    /* Gradients Dark - CORRIGÉS pour être sombres */
    --gradient-primary: linear-gradient(135deg, #C4B5FD 0%, #A78BFA 50%, #8B5CF6 100%);
    --gradient-primary-soft: linear-gradient(135deg, #DDD6FE 0%, #A78BFA 100%);
    --gradient-accent: linear-gradient(135deg, #67E8F9 0%, #22D3EE 50%, #06B6D4 100%);
    --gradient-success: linear-gradient(135deg, #6EE7B7 0%, #34D399 50%, #10B981 100%);
    --gradient-gold: linear-gradient(135deg, #FDE68A 0%, #FBBF24 50%, #F59E0B 100%);
    --gradient-rose: linear-gradient(135deg, #FDA4AF 0%, #FB7185 50%, #F43F5E 100%);
    --gradient-rainbow: linear-gradient(135deg, #C4B5FD 0%, #67E8F9 25%, #6EE7B7 50%, #FBBF24 75%, #FB7185 100%);
    --gradient-hero: linear-gradient(160deg, #0A0A0C 0%, #111114 25%, #0A0A0C 50%, #111114 75%, #0A0A0C 100%);
    --gradient-mesh: 
        radial-gradient(ellipse at 0% 0%, rgba(167, 139, 250, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 0%, rgba(34, 211, 238, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(251, 113, 133, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 100%, rgba(251, 191, 36, 0.1) 0%, transparent 50%);
    --gradient-glass: linear-gradient(135deg, rgba(17, 17, 20, 0.95) 0%, rgba(10, 10, 12, 0.9) 100%);
    --gradient-card: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
    --gradient-surface: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg) 100%);
}

/* ============================================
   SECTION 4 : RESET & BASE
   ============================================ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + var(--space-8));
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (min-width: 1440px) {
    html { font-size: 17px; }
}

@media (max-width: 480px) {
    html { font-size: 15px; }
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image: var(--gradient-mesh);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color var(--duration-slow) ease, color var(--duration-slow) ease;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

[data-theme="dark"] a:hover {
    color: var(--color-primary-light);
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

::selection {
    background: rgba(var(--color-primary-rgb), 0.3);
    color: var(--color-text);
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Scrollbar Premium */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    border: 3px solid var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-primary-soft);
}

/* ============================================
   SECTION 5 : UTILITAIRES
   ============================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 640px) {
    .container {
        padding: 0 var(--space-6);
    }
}

.container-wide {
    max-width: var(--container-wide);
}

/* Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Margins */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); background: #b6ddff; padding: 2%;}
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Padding */
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* Text */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.font-mono { font-family: var(--font-mono); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* Screen reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   SECTION 6 : HEADER & NAVIGATION
   ============================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--header-shadow);
    z-index: 1000;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transition: all var(--transition-normal);
}

.header-inner {
    max-width: var(--container-wide);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .header-inner {
        padding: 0 var(--space-6);
    }
}

/* Logo Premium */
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-weight: var(--font-extrabold);
    font-size: var(--text-xl);
    color: var(--color-text);
    text-decoration: none;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.logo:hover {
    transform: translateY(-2px) scale(1.02);
}

.logo__icon {
    font-size: 1.75rem;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(var(--color-primary-rgb), 0.4));
    animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.logo__text {
    display: none;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

@media (min-width: 480px) {
    .logo__text {
        display: inline;
    }
}

/* Navigation principale */
.nav-main {
    display: none;
    align-items: center;
    gap: var(--space-1);
    background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color :#ffffff;
}

@media (min-width: 768px) {
    .nav-main {
        display: flex;
    }
}

.nav-main__link {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    white-space: nowrap;
    position: relative;
}

.nav-main__link:hover {
    color: var(--color-text);
    background: var(--color-bg-tertiary);
}

.nav-main__link.active {
    color: var(--color-text-inverse);
    background: var(--gradient-primary);
    box-shadow: var(--shadow-primary);
}

[data-theme="dark"] .nav-main__link.active {
    color: #000000;
}

.nav-main__link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 4px;
    background: var(--color-primary-light);
    border-radius: var(--radius-full);
    box-shadow: var(--glow-primary);
}

/* Actions header */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Toggle thème */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: 1.3rem;
    transition: all var(--transition-fast);
    border: 2px solid var(--color-border);
}

.theme-toggle:hover {
    color: var(--color-gold);
    border-color: var(--color-gold);
    transform: rotate(15deg) scale(1.08);
    box-shadow: var(--shadow-gold), var(--glow-gold);
}

.theme-toggle__icon--dark { display: block; }
.theme-toggle__icon--light { display: none; }

[data-theme="dark"] .theme-toggle__icon--dark { display: none; }
[data-theme="dark"] .theme-toggle__icon--light { display: block; }

/* Toggle navigation mobile */
.nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    font-size: 1.5rem;
    transition: all var(--transition-fast);
}

.nav-toggle:hover {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }
}

/* Menu mobile */
.nav-mobile {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    background-image: var(--gradient-mesh);
    padding: var(--space-4);
    z-index: 999;
    overflow-y: auto;
    animation: slideDown var(--transition-normal) forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-mobile.is-open {
    display: block;
}

.nav-mobile__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.nav-mobile__link:hover,
.nav-mobile__link.active {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    border-color: var(--color-primary-light);
}

/* ============================================
   SECTION 7 : HERO SECTION - CORRIGÉE
   ============================================ */

.hero {
    position: relative;
    padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
    border-bottom: 1px solid var(--color-border);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    overflow: hidden;
}

/* Mode clair - dégradé coloré subtil */
[data-theme="light"] .hero,
:root:not([data-theme="dark"]) .hero {
    background: linear-gradient(160deg, 
        #F5F3FF 0%, 
        #FAFAFE 20%,
        #ECFEFF 40%, 
        #FFF1F2 60%,
        #FFFBEB 80%,
        #FAFAFE 100%
    );
}

/* Mode sombre - fond sombre avec touches de couleur */
[data-theme="dark"] .hero {
    background: linear-gradient(160deg, 
        #0A0A0C 0%, 
        #111114 20%,
        rgba(167, 139, 250, 0.05) 40%, 
        #111114 60%,
        rgba(34, 211, 238, 0.03) 80%,
        #0A0A0C 100%
    );
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

[data-theme="light"] .hero::before,
:root:not([data-theme="dark"]) .hero::before {
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(124, 58, 237, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(245, 158, 11, 0.04) 0%, transparent 60%);
}

[data-theme="dark"] .hero::before {
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(167, 139, 250, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(34, 211, 238, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(251, 191, 36, 0.05) 0%, transparent 60%);
}

/* Orbe décorative */
.hero::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    top: -150px;
    right: -150px;
    animation: orbFloat 25s ease-in-out infinite;
    pointer-events: none;
}

[data-theme="light"] .hero::after,
:root:not([data-theme="dark"]) .hero::after {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
}

[data-theme="dark"] .hero::after {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08) 0%, rgba(34, 211, 238, 0.04) 100%);
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-40px, 25px) scale(1.08); }
    66% { transform: translate(25px, -15px) scale(0.95); }
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    padding: 0 var(--space-4);
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
    backdrop-filter: blur(12px);
    animation: badgePulse 3s ease-in-out infinite;
}

[data-theme="light"] .hero__badge,
:root:not([data-theme="dark"]) .hero__badge {
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--color-primary-light);
    box-shadow: var(--shadow-primary), var(--glow-primary);
}

[data-theme="dark"] .hero__badge {
    color: var(--color-primary-light);
    background: rgba(17, 17, 20, 0.9);
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-primary), var(--glow-primary);
}

@keyframes badgePulse {
    0%, 100% { box-shadow: var(--shadow-primary), 0 0 25px rgba(var(--color-primary-rgb), 0.25); }
    50% { box-shadow: var(--shadow-primary), 0 0 40px rgba(var(--color-primary-rgb), 0.45); }
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin-bottom: var(--space-6);
}

.hero__title span {
    background: var(--gradient-rainbow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero__subtitle {
    font-size: clamp(var(--text-lg), 2.5vw, var(--text-xl));
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.hero__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

.hero__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    backdrop-filter: blur(8px);
    transition: all var(--transition-fast);
}

[data-theme="light"] .hero__meta-item,
:root:not([data-theme="dark"]) .hero__meta-item {
    background: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .hero__meta-item {
    background: rgba(17, 17, 20, 0.8);
}

.hero__meta-item:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.hero__meta-icon {
    color: var(--color-primary);
    font-size: 1.15em;
}

.hero--compact {
    padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-8);
}

.hero--success {
    background: linear-gradient(135deg, var(--color-success-subtle) 0%, var(--color-bg) 50%, var(--color-accent-subtle) 100%);
}

[data-theme="dark"] .hero--success {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.08) 0%, var(--color-bg) 50%, rgba(34, 211, 238, 0.06) 100%);
}

@media (max-width: 1024px) {
    .hero__content {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: calc(var(--header-height) + var(--space-12)) 0 var(--space-12);
    }
    
    .hero__content {
        max-width: 100%;
    }
    
    .hero__meta {
        gap: var(--space-4);
    }
}

@media (max-width: 480px) {
    .hero__meta {
        flex-direction: column;
        gap: var(--space-3);
    }
}

/* ============================================
   SECTION 8 : STRUCTURE ARTICLES
   ============================================ */

main.container {
    padding-top: var(--space-10);
    padding-bottom: var(--space-16);
}

/* Sections d'exercices */
.exercices-section {
    margin-bottom: var(--space-12);
}

.exercices-section > h2 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 3px solid transparent;
    border-image: var(--gradient-primary) 1;
}

.exercices-section > h2::before {
    content: '';
    display: block;
    width: 5px;
    height: 28px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    box-shadow: var(--glow-primary);
}

.section-intro {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-6);
}

/* ============================================
   SECTION 9 : EXERCICE - CARTE PREMIUM CORRIGÉE
   ============================================ */

.exercice {
    position: relative;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-6);
    overflow: hidden;
    transition: all var(--transition-normal);
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .exercice,
:root:not([data-theme="dark"]) .exercice {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .exercice {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.exercice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--gradient-rainbow);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity var(--transition-fast);
    animation: rainbowSlide 4s linear infinite paused;
}

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

.exercice:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-xl), var(--glow-primary);
    transform: translateY(-4px);
}

.exercice:hover::before {
    opacity: 1;
    animation-play-state: running;
}

/* États */
.exercice.is-correct {
    border-color: var(--color-success);
    box-shadow: var(--shadow-success), var(--glow-success);
}

.exercice.is-correct::before {
    background: var(--gradient-success);
    opacity: 1;
}

.exercice.is-error {
    border-color: var(--color-error);
    box-shadow: var(--shadow-error);
}

.exercice.is-error::before {
    background: var(--gradient-rose);
    opacity: 1;
}

/* Header exercice */
.exercice-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

[data-theme="light"] .exercice-header,
:root:not([data-theme="dark"]) .exercice-header {
    background: linear-gradient(135deg, #F5F3FF 0%, #FAFAFE 100%);
}

[data-theme="dark"] .exercice-header {
    background: linear-gradient(135deg, #1A1A1F 0%, #111114 100%);
}

.exercice-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 50px;
    padding: 0 var(--space-3);
    background: var(--gradient-primary);
    color: white;
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    border-radius: var(--radius-xl);
    flex-shrink: 0;
    box-shadow: var(--shadow-primary);
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.exercice-titre {
    flex: 1;
    min-width: 0;
}

.exercice-titre h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-2) 0;
    line-height: var(--leading-snug);
}

/* ============================================
   SECTION 10 : BADGES DE DIFFICULTÉ PREMIUM
   ============================================ */

.exercice-badge,
.exercice-difficulte {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--transition-fast);
}

/* Facile - Émeraude */
.badge-facile,
[data-level="1"] {
    border: 2px solid var(--color-success);
    box-shadow: 0 0 15px rgba(var(--color-success-rgb), 0.2);
}

[data-theme="light"] .badge-facile,
[data-theme="light"] [data-level="1"],
:root:not([data-theme="dark"]) .badge-facile,
:root:not([data-theme="dark"]) [data-level="1"] {
    background: linear-gradient(135deg, #D1FAE5 0%, rgba(16, 185, 129, 0.2) 100%);
    color: var(--color-success-dark);
}

[data-theme="dark"] .badge-facile,
[data-theme="dark"] [data-level="1"] {
    background: rgba(52, 211, 153, 0.15);
    color: var(--color-success-light);
}

.badge-facile::before,
[data-level="1"]::before {
    content: '★';
    color: var(--color-success);
}

/* Moyen - Orange */
.badge-moyen,
[data-level="2"] {
    border: 2px solid var(--color-warning);
    box-shadow: 0 0 15px rgba(var(--color-warning-rgb), 0.2);
}

[data-theme="light"] .badge-moyen,
[data-theme="light"] [data-level="2"],
:root:not([data-theme="dark"]) .badge-moyen,
:root:not([data-theme="dark"]) [data-level="2"] {
    background: linear-gradient(135deg, #FFF7ED 0%, rgba(249, 115, 22, 0.2) 100%);
    color: var(--color-warning-dark);
}

[data-theme="dark"] .badge-moyen,
[data-theme="dark"] [data-level="2"] {
    background: rgba(251, 146, 60, 0.15);
    color: var(--color-warning-light);
}

.badge-moyen::before,
[data-level="2"]::before {
    content: '★★';
    color: var(--color-warning);
    letter-spacing: 2px;
}

/* Difficile - Rose */
.badge-difficile,
[data-level="3"] {
    border: 2px solid var(--color-rose);
    box-shadow: 0 0 15px rgba(var(--color-rose-rgb), 0.2);
}

[data-theme="light"] .badge-difficile,
[data-theme="light"] [data-level="3"],
:root:not([data-theme="dark"]) .badge-difficile,
:root:not([data-theme="dark"]) [data-level="3"] {
    background: linear-gradient(135deg, #FFF1F2 0%, rgba(244, 63, 94, 0.2) 100%);
    color: var(--color-rose-dark);
}

[data-theme="dark"] .badge-difficile,
[data-theme="dark"] [data-level="3"] {
    background: rgba(251, 113, 133, 0.15);
    color: var(--color-rose-light);
}

.badge-difficile::before,
[data-level="3"]::before {
    content: '★★★';
    color: var(--color-rose);
    letter-spacing: 2px;
}

/* Jeu/Quiz - Or animé */
.badge-jeu,
.badge-quiz {
    border: 2px solid var(--color-gold);
    animation: goldPulse 2.5s ease-in-out infinite;
}

[data-theme="light"] .badge-jeu,
[data-theme="light"] .badge-quiz,
:root:not([data-theme="dark"]) .badge-jeu,
:root:not([data-theme="dark"]) .badge-quiz {
    background: linear-gradient(135deg, #FFFBEB 0%, rgba(245, 158, 11, 0.25) 100%);
    color: var(--color-gold-dark);
}

[data-theme="dark"] .badge-jeu,
[data-theme="dark"] .badge-quiz {
    background: rgba(251, 191, 36, 0.15);
    color: var(--color-gold-light);
}

@keyframes goldPulse {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(var(--color-gold-rgb), 0.3);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 30px rgba(var(--color-gold-rgb), 0.5);
        transform: scale(1.03);
    }
}

.badge-jeu::before,
.badge-quiz::before {
    content: '⚡';
    font-size: 1em;
}

/* Type badges */
.badge-qcm {
    border: 2px solid var(--color-info-light);
}

[data-theme="light"] .badge-qcm,
:root:not([data-theme="dark"]) .badge-qcm {
    background: linear-gradient(135deg, #DBEAFE 0%, rgba(59, 130, 246, 0.15) 100%);
    color: var(--color-info-dark);
}

[data-theme="dark"] .badge-qcm {
    background: rgba(96, 165, 250, 0.15);
    color: var(--color-info-light);
}

.badge-calcul {
    border: 2px solid var(--color-accent-light);
}

[data-theme="light"] .badge-calcul,
:root:not([data-theme="dark"]) .badge-calcul {
    background: linear-gradient(135deg, #ECFEFF 0%, rgba(6, 182, 212, 0.15) 100%);
    color: var(--color-accent-dark);
}

[data-theme="dark"] .badge-calcul {
    background: rgba(34, 211, 238, 0.15);
    color: var(--color-accent-light);
}

.badge-ecriture {
    border: 2px solid var(--color-primary-light);
}

[data-theme="light"] .badge-ecriture,
:root:not([data-theme="dark"]) .badge-ecriture {
    background: linear-gradient(135deg, #EDE9FE 0%, rgba(124, 58, 237, 0.15) 100%);
    color: var(--color-primary-dark);
}

[data-theme="dark"] .badge-ecriture {
    background: rgba(167, 139, 250, 0.15);
    color: var(--color-primary-light);
}


/* ============================================
   SECTION 11 : ÉNONCÉ ET ZONE DE TRAVAIL - CORRIGÉE
   ============================================ */

.exercice-enonce {
    padding: var(--space-6);
    line-height: var(--leading-loose);
}

.exercice-enonce p {
    color: var(--color-text);
    margin-bottom: var(--space-4);
    max-width: 70ch;
}

.exercice-enonce p:last-child {
    margin-bottom: 0;
}

.exercice-enonce strong {
    font-weight: var(--font-semibold);
}

[data-theme="light"] .exercice-enonce strong,
:root:not([data-theme="dark"]) .exercice-enonce strong {
    color: var(--color-primary);
}

[data-theme="dark"] .exercice-enonce strong {
    color: var(--color-primary-light);
}

.exercice-enonce ul,
.exercice-enonce ol {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.exercice-enonce li {
    margin-bottom: var(--space-2);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.exercice-enonce li::marker {
    color: var(--color-primary);
}

/* Zone de travail */
.exercice-travail {
    padding: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

[data-theme="light"] .exercice-travail,
:root:not([data-theme="dark"]) .exercice-travail {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
}

[data-theme="dark"] .exercice-travail {
    background: linear-gradient(135deg, #1A1A1F 0%, #111114 100%);
}

/* Données */
.exercice-donnees,
.table-donnees-wrapper {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin: var(--space-4) 0;
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .exercice-donnees,
[data-theme="light"] .table-donnees-wrapper,
:root:not([data-theme="dark"]) .exercice-donnees,
:root:not([data-theme="dark"]) .table-donnees-wrapper {
    background: #E7F3E3;
}

[data-theme="dark"] .exercice-donnees,
[data-theme="dark"] .table-donnees-wrapper {
    background: #0A0A0C;
}

.exercice-donnees h4 {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[data-theme="light"] .exercice-donnees h4,
:root:not([data-theme="dark"]) .exercice-donnees h4 {
    color: var(--color-primary);
}

[data-theme="dark"] .exercice-donnees h4 {
    color: var(--color-primary-light);
}

.table-donnees {
    width: 100%;
    border-collapse: collapse;
}

.table-donnees th,
.table-donnees td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}

.table-donnees th {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.table-donnees td:last-child {
    text-align: right;
    /*font-family: var(--font-mono);
    font-weight: var(--font-semibold);*/
    color: var(--color-text);
}

.table-donnees tr:last-child td {
    border-bottom: none;
}

/* ============================================
   SECTION 12 : INPUTS GLOBAUX PREMIUM - CORRIGÉE
   ============================================ */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] select,
[data-theme="light"] textarea,
:root:not([data-theme="dark"]) input[type="text"],
:root:not([data-theme="dark"]) input[type="number"],
:root:not([data-theme="dark"]) input[type="email"],
:root:not([data-theme="dark"]) input[type="password"],
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea {
    background: #FFFFFF;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #0A0A0C;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--color-primary-light);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.15), var(--glow-primary);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
}

/* États inputs - Light */
[data-theme="light"] input.is-correct,
[data-theme="light"] select.is-correct,
:root:not([data-theme="dark"]) input.is-correct,
:root:not([data-theme="dark"]) select.is-correct {
    border-color: var(--color-success);
    background-color: #D1FAE5;
    box-shadow: var(--glow-success);
}

[data-theme="light"] input.is-error,
[data-theme="light"] select.is-error,
:root:not([data-theme="dark"]) input.is-error,
:root:not([data-theme="dark"]) select.is-error {
    border-color: var(--color-error);
    background-color: #FEE2E2;
}

/* États inputs - Dark */
[data-theme="dark"] input.is-correct,
[data-theme="dark"] select.is-correct {
    border-color: var(--color-success);
    background-color: rgba(52, 211, 153, 0.12);
    box-shadow: var(--glow-success);
}

[data-theme="dark"] input.is-error,
[data-theme="dark"] select.is-error {
    border-color: var(--color-error);
    background-color: rgba(248, 113, 113, 0.12);
}

/* Inputs spécialisés */
.input-avec-unite {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.input-avec-unite input {
    flex: 1;
}

.input-unite,
.unite {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.input-compte {
    max-width: 120px;
    text-align: center;
    font-family: var(--font-mono);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    border-color: var(--color-primary-light);
}

[data-theme="light"] .input-compte,
:root:not([data-theme="dark"]) .input-compte {
    background: #EDE9FE;
}

[data-theme="dark"] .input-compte {
    background: rgba(167, 139, 250, 0.15);
}

.input-montant {
    text-align: right;
    font-family: var(--font-mono);
    font-weight: var(--font-medium);
}

.input-montant.resultat {
    border-color: var(--color-primary);
    font-weight: var(--font-bold);
}

[data-theme="light"] .input-montant.resultat,
:root:not([data-theme="dark"]) .input-montant.resultat {
    background: linear-gradient(135deg, #EDE9FE 0%, #ECFEFF 100%);
}

[data-theme="dark"] .input-montant.resultat {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(34, 211, 238, 0.1) 100%);
}

.input-libelle {
    min-width: 180px;
}

.input-tableau {
    max-width: 140px;
    text-align: right;
}

.input-ratio {
    max-width: 110px;
    text-align: right;
}

.input-lettre {
    width: 60px;
    text-align: center;
    text-transform: uppercase;
    font-weight: var(--font-bold);
    font-size: var(--text-xl);
    letter-spacing: 0.12em;
    border-color: var(--color-gold);
}

[data-theme="light"] .input-lettre,
:root:not([data-theme="dark"]) .input-lettre {
    background: #FFFBEB;
}

[data-theme="dark"] .input-lettre {
    background: rgba(251, 191, 36, 0.15);
}

.input-ordre {
    width: 60px;
    height: 52px;
    text-align: center;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    border: 3px solid var(--color-primary);
    border-radius: var(--radius-xl);
}

[data-theme="light"] .input-ordre,
:root:not([data-theme="dark"]) .input-ordre {
    background: #EDE9FE;
    color: var(--color-primary-dark);
}

[data-theme="dark"] .input-ordre {
    background: rgba(167, 139, 250, 0.15);
    color: var(--color-primary-light);
}

.input-trou {
    display: inline-block;
    width: auto;
    min-width: 100px;
    max-width: 220px;
    padding: var(--space-2) var(--space-3);
    margin: 0 var(--space-2);
    border: none;
    border-bottom: 3px solid var(--color-primary);
    border-radius: 0;
    background: transparent;
    font-weight: var(--font-semibold);
    text-align: center;
}

.input-trou:focus {
    box-shadow: none;
    border-bottom-color: var(--color-accent);
}

[data-theme="light"] .input-trou:focus,
:root:not([data-theme="dark"]) .input-trou:focus {
    background: #ECFEFF;
}

[data-theme="dark"] .input-trou:focus {
    background: rgba(34, 211, 238, 0.12);
}

/* Groupes de saisie */
.saisie-groupe {
    margin-bottom: var(--space-4);
}

.saisie-groupe label {
    display: block;
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

/* Ligne de calcul */
.calcul-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
    transition: all var(--transition-fast);
}

[data-theme="light"] .calcul-ligne,
:root:not([data-theme="dark"]) .calcul-ligne {
    background: #FFFFFF;
}

[data-theme="dark"] .calcul-ligne {
    background: #0A0A0C;
}

.calcul-ligne:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

.calcul-ligne label {
    flex: 1;
    min-width: 200px;
    font-weight: var(--font-medium);
    color: var(--color-text);
}

[data-theme="light"] .calcul-ligne.is-correct,
:root:not([data-theme="dark"]) .calcul-ligne.is-correct {
    border-color: var(--color-success);
    background: #D1FAE5;
}

[data-theme="dark"] .calcul-ligne.is-correct {
    border-color: var(--color-success);
    background: rgba(52, 211, 153, 0.12);
}

[data-theme="light"] .calcul-ligne.is-error,
:root:not([data-theme="dark"]) .calcul-ligne.is-error {
    border-color: var(--color-error);
    background: #FEE2E2;
}

[data-theme="dark"] .calcul-ligne.is-error {
    border-color: var(--color-error);
    background: rgba(248, 113, 113, 0.12);
}

.calcul-ligne.resultat,
.calcul-ligne.important {
    border: 3px solid var(--color-primary);
}

[data-theme="light"] .calcul-ligne.resultat,
[data-theme="light"] .calcul-ligne.important,
:root:not([data-theme="dark"]) .calcul-ligne.resultat,
:root:not([data-theme="dark"]) .calcul-ligne.important {
    background: linear-gradient(135deg, #EDE9FE 0%, #ECFEFF 100%);
}

[data-theme="dark"] .calcul-ligne.resultat,
[data-theme="dark"] .calcul-ligne.important {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(34, 211, 238, 0.1) 100%);
}

.calcul-ligne.resultat label,
.calcul-ligne.important label {
    font-weight: var(--font-bold);
}

[data-theme="light"] .calcul-ligne.resultat label,
[data-theme="light"] .calcul-ligne.important label,
:root:not([data-theme="dark"]) .calcul-ligne.resultat label,
:root:not([data-theme="dark"]) .calcul-ligne.important label {
    color: var(--color-primary-dark);
}

[data-theme="dark"] .calcul-ligne.resultat label,
[data-theme="dark"] .calcul-ligne.important label {
    color: var(--color-primary-light);
}

/* Valeur fixe */
.valeur-donnee,
.valeur-fixe {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
    color: var(--color-text);
}

[data-theme="light"] .valeur-donnee,
[data-theme="light"] .valeur-fixe,
:root:not([data-theme="dark"]) .valeur-donnee,
:root:not([data-theme="dark"]) .valeur-fixe {
    background: #EDE9FE;
}

[data-theme="dark"] .valeur-donnee,
[data-theme="dark"] .valeur-fixe {
    background: #1A1A1F;
}

/* ============================================
   SECTION 13 : QCM PREMIUM - CORRIGÉE
   ============================================ */

.qcm-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.qcm-option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .qcm-option,
:root:not([data-theme="dark"]) .qcm-option {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .qcm-option {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.qcm-option::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--gradient-primary);
    transform: scaleY(0);
    transition: transform var(--transition-spring);
}

.qcm-option:hover {
    border-color: var(--color-primary);
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .qcm-option:hover,
:root:not([data-theme="dark"]) .qcm-option:hover {
    background: #EDE9FE;
}

[data-theme="dark"] .qcm-option:hover {
    background: rgba(167, 139, 250, 0.1);
}

.qcm-option:hover::before {
    transform: scaleY(1);
}

.qcm-option input[type="radio"],
.qcm-option input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.qcm-label {
    flex: 1;
    line-height: var(--leading-normal);
    color: var(--color-text);
    font-weight: var(--font-medium);
}

/* États QCM */
.qcm-option.is-correct {
    border-color: var(--color-success);
    box-shadow: var(--glow-success);
}

[data-theme="light"] .qcm-option.is-correct,
:root:not([data-theme="dark"]) .qcm-option.is-correct {
    background: #D1FAE5;
}

[data-theme="dark"] .qcm-option.is-correct {
    background: rgba(52, 211, 153, 0.12);
}

.qcm-option.is-correct::before {
    background: var(--gradient-success);
    transform: scaleY(1);
}

.qcm-option.is-incorrect {
    border-color: var(--color-error);
}

[data-theme="light"] .qcm-option.is-incorrect,
:root:not([data-theme="dark"]) .qcm-option.is-incorrect {
    background: #FEE2E2;
}

[data-theme="dark"] .qcm-option.is-incorrect {
    background: rgba(248, 113, 113, 0.12);
}

.qcm-option.is-incorrect::before {
    background: var(--gradient-rose);
    transform: scaleY(1);
}

.qcm-option.is-missing {
    border-color: var(--color-warning);
    border-style: dashed;
}

[data-theme="light"] .qcm-option.is-missing,
:root:not([data-theme="dark"]) .qcm-option.is-missing {
    background: #FFF7ED;
}

[data-theme="dark"] .qcm-option.is-missing {
    background: rgba(251, 146, 60, 0.12);
}

/* ============================================
   SECTION 14 : VRAI/FAUX PREMIUM - CORRIGÉE
   ============================================ */

.vrai-faux-liste {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.vrai-faux-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    flex-wrap: wrap;
    transition: all var(--transition-fast);
}

[data-theme="light"] .vrai-faux-item,
:root:not([data-theme="dark"]) .vrai-faux-item {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .vrai-faux-item {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.vrai-faux-item:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

.vrai-faux-item.is-correct {
    border-color: var(--color-success);
}

[data-theme="light"] .vrai-faux-item.is-correct,
:root:not([data-theme="dark"]) .vrai-faux-item.is-correct {
    background: #D1FAE5;
}

[data-theme="dark"] .vrai-faux-item.is-correct {
    background: rgba(52, 211, 153, 0.12);
}

.vrai-faux-item.is-incorrect {
    border-color: var(--color-error);
}

[data-theme="light"] .vrai-faux-item.is-incorrect,
:root:not([data-theme="dark"]) .vrai-faux-item.is-incorrect {
    background: #FEE2E2;
}

[data-theme="dark"] .vrai-faux-item.is-incorrect {
    background: rgba(248, 113, 113, 0.12);
}

.vf-affirmation {
    flex: 1;
    min-width: 250px;
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

.vf-boutons {
    display: flex;
    gap: var(--space-3);
}

.btn-vrai,
.btn-faux {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

[data-theme="light"] .btn-vrai,
[data-theme="light"] .btn-faux,
:root:not([data-theme="dark"]) .btn-vrai,
:root:not([data-theme="dark"]) .btn-faux {
    background: #FFFFFF;
}

[data-theme="dark"] .btn-vrai,
[data-theme="dark"] .btn-faux {
    background: #0A0A0C;
}

.btn-vrai:hover,
.btn-vrai.selected {
    background: var(--gradient-success);
    border-color: var(--color-success);
    color: white;
    box-shadow: var(--shadow-success);
    transform: scale(1.05);
}

.btn-faux:hover,
.btn-faux.selected {
    background: var(--gradient-rose);
    border-color: var(--color-error);
    color: white;
    box-shadow: var(--shadow-error);
    transform: scale(1.05);
}

/* ============================================
   SECTION 15 : ASSOCIATION PREMIUM - CORRIGÉE
   ============================================ */

.association-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.association-ligne {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    flex-wrap: wrap;
    transition: all var(--transition-fast);
}

[data-theme="light"] .association-ligne,
:root:not([data-theme="dark"]) .association-ligne {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .association-ligne {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.association-ligne:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

.association-gauche {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 180px;
    font-weight: var(--font-semibold);
    color: var(--color-text);
}

.association-gauche::before {
    content: '→';
    color: var(--color-primary);
    font-size: 1.3em;
    font-weight: var(--font-bold);
}

.association-select {
    min-width: 220px;
    flex: 1;
}

.association-ligne.is-correct {
    border-color: var(--color-success);
}

[data-theme="light"] .association-ligne.is-correct,
:root:not([data-theme="dark"]) .association-ligne.is-correct {
    background: #D1FAE5;
}

[data-theme="dark"] .association-ligne.is-correct {
    background: rgba(52, 211, 153, 0.12);
}

.association-ligne.is-error {
    border-color: var(--color-error);
}

[data-theme="light"] .association-ligne.is-error,
:root:not([data-theme="dark"]) .association-ligne.is-error {
    background: #FEE2E2;
}

[data-theme="dark"] .association-ligne.is-error {
    background: rgba(248, 113, 113, 0.12);
}

/* ============================================
   SECTION 16 : ORDONNANCEMENT PREMIUM - CORRIGÉE
   ============================================ */

.ordo-liste,
.ordonnancement-liste {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ordo-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: all var(--transition-fast);
}

[data-theme="light"] .ordo-item,
:root:not([data-theme="dark"]) .ordo-item {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .ordo-item {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.ordo-item:hover {
    border-color: var(--color-primary);
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}

.ordo-item.is-correct {
    border-color: var(--color-success);
}

[data-theme="light"] .ordo-item.is-correct,
:root:not([data-theme="dark"]) .ordo-item.is-correct {
    background: #D1FAE5;
}

[data-theme="dark"] .ordo-item.is-correct {
    background: rgba(52, 211, 153, 0.12);
}

.ordo-item.is-error {
    border-color: var(--color-error);
}

[data-theme="light"] .ordo-item.is-error,
:root:not([data-theme="dark"]) .ordo-item.is-error {
    background: #FEE2E2;
}

[data-theme="dark"] .ordo-item.is-error {
    background: rgba(248, 113, 113, 0.12);
}

.ordo-texte {
    flex: 1;
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

/* ============================================
   SECTION 17 : CLASSEMENT PREMIUM - CORRIGÉE
   ============================================ */

.classement-liste,
.classement-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.classement-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    flex-wrap: wrap;
    transition: all var(--transition-fast);
}

[data-theme="light"] .classement-item,
:root:not([data-theme="dark"]) .classement-item {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .classement-item {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.classement-item:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

.classement-item.is-correct {
    border-color: var(--color-success);
}

[data-theme="light"] .classement-item.is-correct,
:root:not([data-theme="dark"]) .classement-item.is-correct {
    background: #D1FAE5;
}

[data-theme="dark"] .classement-item.is-correct {
    background: rgba(52, 211, 153, 0.12);
}

.classement-item.is-error {
    border-color: var(--color-error);
}

[data-theme="light"] .classement-item.is-error,
:root:not([data-theme="dark"]) .classement-item.is-error {
    background: #FEE2E2;
}

[data-theme="dark"] .classement-item.is-error {
    background: rgba(248, 113, 113, 0.12);
}

.classement-element,
.classement-compte {
    flex: 1;
    min-width: 200px;
    font-weight: var(--font-medium);
    color: var(--color-text);
}

.select-categorie {
    min-width: 170px;
}
 

/* ============================================
   SECTION 18 : JOURNAL COMPTABLE PREMIUM - CORRIGÉE
   ============================================ */

.journal-comptable {
    overflow-x: auto;
    border-radius: var(--radius-2xl);
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.table-journal,
.journal-ecriture table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

[data-theme="light"] .table-journal,
[data-theme="light"] .journal-ecriture table,
:root:not([data-theme="dark"]) .table-journal,
:root:not([data-theme="dark"]) .journal-ecriture table {
    background: #FFFFFF;
}

[data-theme="dark"] .table-journal,
[data-theme="dark"] .journal-ecriture table {
    background: #0A0A0C;
}

.table-journal th,
.table-journal td,
.journal-ecriture th,
.journal-ecriture td {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.table-journal thead,
.journal-ecriture thead {
    background: var(--gradient-primary);
    color: white;
}

.table-journal th,
.journal-ecriture th {
    font-weight: var(--font-bold);
    text-align: left;
    font-size: var(--text-sm);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    letter-spacing: 0.02em;
}

.col-compte { 
    width: 120px; 
    text-align: center;
}
.col-libelle { 
    min-width: 200px; 
}
.col-debit, 
.col-credit { 
    width: 140px; 
    text-align: right;
}

.ligne-ecriture input {
    width: 100%;
    border: none;
    background: transparent;
    padding: var(--space-2);
    font-family: inherit;
    color: var(--color-text);
}

.ligne-ecriture input:focus {
    outline: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
}

[data-theme="light"] .ligne-ecriture input:focus,
:root:not([data-theme="dark"]) .ligne-ecriture input:focus {
    background: #EDE9FE;
}

[data-theme="dark"] .ligne-ecriture input:focus {
    background: rgba(167, 139, 250, 0.15);
}

[data-theme="light"] .ligne-ecriture.ligne-correcte,
:root:not([data-theme="dark"]) .ligne-ecriture.ligne-correcte {
    background: #D1FAE5;
}

[data-theme="dark"] .ligne-ecriture.ligne-correcte {
    background: rgba(52, 211, 153, 0.1);
}

[data-theme="light"] .ligne-ecriture.ligne-incorrecte,
:root:not([data-theme="dark"]) .ligne-ecriture.ligne-incorrecte {
    background: #FEE2E2;
}

[data-theme="dark"] .ligne-ecriture.ligne-incorrecte {
    background: rgba(248, 113, 113, 0.1);
}

.ligne-total,
.ligne-totaux {
    font-weight: var(--font-bold);
}

[data-theme="light"] .ligne-total,
[data-theme="light"] .ligne-totaux,
:root:not([data-theme="dark"]) .ligne-total,
:root:not([data-theme="dark"]) .ligne-totaux {
    background: linear-gradient(135deg, #EDE9FE 0%, #F5F3FF 100%);
}

[data-theme="dark"] .ligne-total,
[data-theme="dark"] .ligne-totaux {
    background: linear-gradient(135deg, #1A1A1F 0%, #111114 100%);
}

.ligne-totaux td {
    border-top: 4px double var(--color-primary);
}

.equilibre-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-top: var(--space-4);
    border-radius: var(--radius-xl);
    font-weight: var(--font-bold);
    font-size: var(--text-base);
}

.equilibre-ok {
    background: var(--gradient-success);
    color: white;
    box-shadow: var(--shadow-success), var(--glow-success);
}

.equilibre-ok::before {
    content: '✓';
    font-size: 1.4em;
}

.equilibre-erreur {
    background: var(--gradient-rose);
    color: white;
    box-shadow: var(--shadow-error);
}

.equilibre-erreur::before {
    content: '✗';
    font-size: 1.4em;
}

/* Journal complet */
.journal-complet {
    border: 3px solid var(--color-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl), var(--glow-primary);
}

.journal-header {
    background: var(--gradient-primary);
    color: white;
    padding: var(--space-4) var(--space-6);
}

.journal-header h4 {
    margin: 0;
    font-weight: var(--font-bold);
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.journal-ecriture {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4);
}

[data-theme="light"] .journal-ecriture,
:root:not([data-theme="dark"]) .journal-ecriture {
    background: #FFFFFF;
}

[data-theme="dark"] .journal-ecriture {
    background: #0A0A0C;
}

.journal-ecriture:last-of-type {
    border-bottom: none;
}

[data-theme="light"] .journal-ecriture.ecriture-correcte,
:root:not([data-theme="dark"]) .journal-ecriture.ecriture-correcte {
    background: #D1FAE5;
}

[data-theme="dark"] .journal-ecriture.ecriture-correcte {
    background: rgba(52, 211, 153, 0.1);
}

[data-theme="light"] .journal-ecriture.ecriture-incorrecte,
:root:not([data-theme="dark"]) .journal-ecriture.ecriture-incorrecte {
    background: #FEE2E2;
}

[data-theme="dark"] .journal-ecriture.ecriture-incorrecte {
    background: rgba(248, 113, 113, 0.1);
}

.journal-totaux {
    padding: var(--space-4);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-weight: var(--font-bold);
}

[data-theme="light"] .journal-totaux,
:root:not([data-theme="dark"]) .journal-totaux {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
}

[data-theme="dark"] .journal-totaux {
    background: linear-gradient(135deg, #1A1A1F 0%, #111114 100%);
}

/* ============================================
   SECTION 19 : COMPTE EN T PREMIUM - CORRIGÉE
   ============================================ */

.compte-t {
    max-width: 720px;
    margin: 0 auto;
    border: 4px solid var(--color-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl), var(--glow-primary);
}

.compte-t-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--gradient-primary);
    color: white;
}

.compte-t-numero {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    background: rgba(255,255,255,0.2);
    color: white;
    font-family: var(--font-mono);
    font-weight: var(--font-bold);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(4px);
}

.compte-t-intitule {
    font-weight: var(--font-bold);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.compte-t-corps {
    display: flex;
}

[data-theme="light"] .compte-t-corps,
:root:not([data-theme="dark"]) .compte-t-corps {
    background: #FFFFFF;
}

[data-theme="dark"] .compte-t-corps {
    background: #0A0A0C;
}

.compte-t-debit,
.compte-t-credit {
    flex: 1;
    padding: var(--space-5);
}

.compte-t-debit {
    border-right: 4px solid var(--color-primary);
}

.compte-t-debit h5,
.compte-t-credit h5 {
    text-align: center;
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: var(--font-bold);
}

[data-theme="light"] .compte-t-debit h5,
[data-theme="light"] .compte-t-credit h5,
:root:not([data-theme="dark"]) .compte-t-debit h5,
:root:not([data-theme="dark"]) .compte-t-credit h5 {
    color: var(--color-primary);
}

[data-theme="dark"] .compte-t-debit h5,
[data-theme="dark"] .compte-t-credit h5 {
    color: var(--color-primary-light);
}

.compte-t-solde {
    padding: var(--space-4);
    border-top: 3px solid var(--color-primary);
}

[data-theme="light"] .compte-t-solde,
:root:not([data-theme="dark"]) .compte-t-solde {
    background: linear-gradient(135deg, #EDE9FE 0%, #ECFEFF 100%);
}

[data-theme="dark"] .compte-t-solde {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12) 0%, rgba(34, 211, 238, 0.08) 100%);
}

/* ============================================
   SECTION 20 : BALANCE PREMIUM - CORRIGÉE
   ============================================ */

.balance-tableau {
    overflow-x: auto;
    border-radius: var(--radius-2xl);
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.table-balance {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}

[data-theme="light"] .table-balance,
:root:not([data-theme="dark"]) .table-balance {
    background: #FFFFFF;
}

[data-theme="dark"] .table-balance {
    background: #0A0A0C;
}

.table-balance th,
.table-balance td {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-light);
}

.table-balance thead th {
    background: var(--gradient-primary);
    color: white;
    font-weight: var(--font-bold);
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.table-balance tbody td:first-child {
    font-family: var(--font-mono);
    font-weight: var(--font-bold);
    text-align: center;
}

[data-theme="light"] .table-balance tbody td:first-child,
:root:not([data-theme="dark"]) .table-balance tbody td:first-child {
    background: #EDE9FE;
    color: var(--color-primary-dark);
}

[data-theme="dark"] .table-balance tbody td:first-child {
    background: rgba(167, 139, 250, 0.12);
    color: var(--color-primary-light);
}

.table-balance tbody td:nth-child(2) {
    font-weight: var(--font-medium);
}

[data-theme="light"] .table-balance tbody tr:hover td,
:root:not([data-theme="dark"]) .table-balance tbody tr:hover td {
    background: #EDE9FE;
}

[data-theme="dark"] .table-balance tbody tr:hover td {
    background: rgba(167, 139, 250, 0.08);
}

.input-balance {
    width: 100%;
    text-align: right;
    font-family: var(--font-mono);
}

.table-balance tfoot td {
    font-weight: var(--font-bold);
    border-top: 4px double var(--color-primary);
}

[data-theme="light"] .table-balance tfoot td,
:root:not([data-theme="dark"]) .table-balance tfoot td {
    background: linear-gradient(135deg, #EDE9FE 0%, #F5F3FF 100%);
}

[data-theme="dark"] .table-balance tfoot td {
    background: linear-gradient(135deg, #1A1A1F 0%, #111114 100%);
}

/* ============================================
   SECTION 21 : BILAN PREMIUM - CORRIGÉE
   ============================================ */

.tableau-bilan,
.bilan-fonctionnel-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .tableau-bilan,
    .bilan-fonctionnel-container {
        grid-template-columns: 1fr;
    }
}

.bilan-colonne {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .bilan-colonne,
:root:not([data-theme="dark"]) .bilan-colonne {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .bilan-colonne {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.bilan-colonne h4 {
    margin: 0;
    padding: var(--space-4);
    background: var(--gradient-primary);
    color: white;
    font-weight: var(--font-bold);
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.bilan-section {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.bilan-section:last-child {
    border-bottom: none;
}

.bilan-section h5 {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[data-theme="light"] .bilan-section h5,
:root:not([data-theme="dark"]) .bilan-section h5 {
    color: var(--color-primary);
}

[data-theme="dark"] .bilan-section h5 {
    color: var(--color-primary-light);
}

.indicateurs-fonctionnels {
    grid-column: 1 / -1;
    border: 2px solid var(--color-info);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .indicateurs-fonctionnels,
:root:not([data-theme="dark"]) .indicateurs-fonctionnels {
    background: linear-gradient(135deg, #DBEAFE 0%, #ECFEFF 100%);
}

[data-theme="dark"] .indicateurs-fonctionnels {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(34, 211, 238, 0.1) 100%);
}

.indicateurs-fonctionnels h4 {
    margin: 0 0 var(--space-4) 0;
    font-weight: var(--font-bold);
}

[data-theme="light"] .indicateurs-fonctionnels h4,
:root:not([data-theme="dark"]) .indicateurs-fonctionnels h4 {
    color: var(--color-info-dark);
}

[data-theme="dark"] .indicateurs-fonctionnels h4 {
    color: var(--color-info-light);
}

.indicateur-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px dashed var(--color-info-light);
    flex-wrap: wrap;
}

.indicateur-ligne:last-child {
    border-bottom: none;
}

/* ============================================
   SECTION 22 : CALCUL CHAÎNÉ (SIG) PREMIUM - CORRIGÉE
   ============================================ */

.calcul-chaine {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: relative;
}

.calcul-chaine::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 50px;
    bottom: 24px;
    width: 4px;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-success) 100%);
    border-radius: var(--radius-full);
    box-shadow: var(--glow-primary);
}

.etape-calcul {
    position: relative;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-5) var(--space-6);
    margin-left: var(--space-12);
    transition: all var(--transition-fast);
}

[data-theme="light"] .etape-calcul,
:root:not([data-theme="dark"]) .etape-calcul {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .etape-calcul {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.etape-calcul::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-12));
    top: 50%;
    width: var(--space-10);
    height: 3px;
    background: var(--color-primary);
}

.etape-calcul:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg), var(--glow-primary);
    transform: translateX(8px);
}

.etape-calcul.etape-correcte {
    border-color: var(--color-success);
}

[data-theme="light"] .etape-calcul.etape-correcte,
:root:not([data-theme="dark"]) .etape-calcul.etape-correcte {
    background: #D1FAE5;
}

[data-theme="dark"] .etape-calcul.etape-correcte {
    background: rgba(52, 211, 153, 0.12);
}

.etape-calcul.etape-incorrecte {
    border-color: var(--color-error);
}

[data-theme="light"] .etape-calcul.etape-incorrecte,
:root:not([data-theme="dark"]) .etape-calcul.etape-incorrecte {
    background: #FEE2E2;
}

[data-theme="dark"] .etape-calcul.etape-incorrecte {
    background: rgba(248, 113, 113, 0.12);
}

.etape-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.etape-numero {
    position: absolute;
    left: calc(-1 * var(--space-12) - 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    color: white;
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-primary), var(--glow-primary);
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.etape-titre {
    font-weight: var(--font-bold);
    color: var(--color-text);
}

.etape-formule {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border);
}

[data-theme="light"] .etape-formule,
:root:not([data-theme="dark"]) .etape-formule {
    background: #EDE9FE;
    color: var(--color-primary);
}

[data-theme="dark"] .etape-formule {
    background: #1A1A1F;
    color: var(--color-primary-light);
}

.etape-saisie {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ============================================
   SECTION 23 : RATIOS PREMIUM - CORRIGÉE
   ============================================ */

.ratio-groupe {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ratio-ligne {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    flex-wrap: wrap;
    transition: all var(--transition-fast);
}

[data-theme="light"] .ratio-ligne,
:root:not([data-theme="dark"]) .ratio-ligne {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .ratio-ligne {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.ratio-ligne:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

.ratio-ligne label {
    flex: 1;
    min-width: 220px;
    font-weight: var(--font-medium);
    color: var(--color-text);
}

.ratio-ligne.is-correct {
    border-color: var(--color-success);
}

[data-theme="light"] .ratio-ligne.is-correct,
:root:not([data-theme="dark"]) .ratio-ligne.is-correct {
    background: #D1FAE5;
}

[data-theme="dark"] .ratio-ligne.is-correct {
    background: rgba(52, 211, 153, 0.12);
}

.ratio-ligne.is-error {
    border-color: var(--color-error);
}

[data-theme="light"] .ratio-ligne.is-error,
:root:not([data-theme="dark"]) .ratio-ligne.is-error {
    background: #FEE2E2;
}

[data-theme="dark"] .ratio-ligne.is-error {
    background: rgba(248, 113, 113, 0.12);
}

.select-interpretation {
    min-width: 200px;
}

/* ============================================
   SECTION 24 : TVA PREMIUM - CORRIGÉE
   ============================================ */

.tva-section {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

[data-theme="light"] .tva-section,
:root:not([data-theme="dark"]) .tva-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .tva-section {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.tva-section h4 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-primary-light);
    font-weight: var(--font-semibold);
}

[data-theme="light"] .tva-section h4,
:root:not([data-theme="dark"]) .tva-section h4 {
    color: var(--color-primary-dark);
}

[data-theme="dark"] .tva-section h4 {
    color: var(--color-primary-light);
}

.tva-section.resultat {
    border-color: var(--color-info);
}

[data-theme="light"] .tva-section.resultat,
:root:not([data-theme="dark"]) .tva-section.resultat {
    background: linear-gradient(135deg, #DBEAFE 0%, #ECFEFF 100%);
}

[data-theme="dark"] .tva-section.resultat {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(34, 211, 238, 0.1) 100%);
}

.tva-section.resultat h4 {
    border-bottom-color: var(--color-info);
}

[data-theme="light"] .tva-section.resultat h4,
:root:not([data-theme="dark"]) .tva-section.resultat h4 {
    color: var(--color-info-dark);
}

[data-theme="dark"] .tva-section.resultat h4 {
    color: var(--color-info-light);
}

.nature-tva,
.nature-solde {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-border);
    flex-wrap: wrap;
}

/* ============================================
   SECTION 25 : RAPPROCHEMENT BANCAIRE PREMIUM - CORRIGÉE
   ============================================ */

.rapprochement-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .rapprochement-container {
        grid-template-columns: 1fr;
    }
}

.rapprochement-colonne {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .rapprochement-colonne,
:root:not([data-theme="dark"]) .rapprochement-colonne {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .rapprochement-colonne {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.rapprochement-colonne:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-lg);
}

.rapprochement-colonne h4 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-3);
    border-bottom: 3px solid transparent;
    border-image: var(--gradient-primary) 1;
    color: var(--color-primary);
    font-weight: var(--font-bold);
}

.rapprochement-colonne h4::before {
    content: '';
    display: block;
    width: 5px;
    height: 24px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
}

.verification-status {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-2xl);
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
}

.verification-status.verif-ok {
    background: var(--gradient-success);
    color: white;
    box-shadow: var(--shadow-success), var(--glow-success);
}

.verification-status.verif-erreur {
    background: var(--gradient-rose);
    color: white;
    box-shadow: var(--shadow-error);
}

/* ============================================
   SECTION 26 : AMORTISSEMENT PREMIUM - CORRIGÉE
   ============================================ */

.plan-amortissement {
    overflow-x: auto;
    border-radius: var(--radius-2xl);
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.plan-amortissement table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

[data-theme="light"] .plan-amortissement table,
:root:not([data-theme="dark"]) .plan-amortissement table {
    background: #FFFFFF;
}

[data-theme="dark"] .plan-amortissement table {
    background: #0A0A0C;
}

.plan-amortissement th,
.plan-amortissement td {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-light);
    text-align: right;
}

.plan-amortissement th {
    background: var(--gradient-primary);
    color: white;
    font-weight: var(--font-bold);
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.plan-amortissement td:first-child {
    text-align: center;
    font-weight: var(--font-bold);
}

[data-theme="light"] .plan-amortissement td:first-child,
:root:not([data-theme="dark"]) .plan-amortissement td:first-child {
    background: #EDE9FE;
    color: var(--color-primary-dark);
}

[data-theme="dark"] .plan-amortissement td:first-child {
    background: rgba(167, 139, 250, 0.12);
    color: var(--color-primary-light);
}

[data-theme="light"] .plan-amortissement tbody tr:hover td,
:root:not([data-theme="dark"]) .plan-amortissement tbody tr:hover td {
    background: #EDE9FE;
}

[data-theme="dark"] .plan-amortissement tbody tr:hover td {
    background: rgba(167, 139, 250, 0.08);
}

.amortissement-params {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
}

[data-theme="light"] .amortissement-params,
:root:not([data-theme="dark"]) .amortissement-params {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
}

[data-theme="dark"] .amortissement-params {
    background: linear-gradient(135deg, #1A1A1F 0%, #111114 100%);
}

/* ============================================
   SECTION 27 : LETTRAGE PREMIUM - CORRIGÉE
   ============================================ */

.lettrage-tableau {
    overflow-x: auto;
    border-radius: var(--radius-2xl);
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.lettrage-tableau table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
}

[data-theme="light"] .lettrage-tableau table,
:root:not([data-theme="dark"]) .lettrage-tableau table {
    background: #FFFFFF;
}

[data-theme="dark"] .lettrage-tableau table {
    background: #0A0A0C;
}

.lettrage-tableau th,
.lettrage-tableau td {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-light);
}

.lettrage-tableau thead th {
    background: var(--gradient-primary);
    color: white;
    font-weight: var(--font-bold);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.groupes-lettrage {
    margin-top: var(--space-6);
}

.groupes-lettrage h4 {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.groupe-lettre {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-xl);
    border-left: 5px solid var(--color-border);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .groupe-lettre,
:root:not([data-theme="dark"]) .groupe-lettre {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .groupe-lettre {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.groupe-lettre:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}

.groupe-lettre.groupe-equilibre {
    border-left-color: var(--color-success);
}

[data-theme="light"] .groupe-lettre.groupe-equilibre,
:root:not([data-theme="dark"]) .groupe-lettre.groupe-equilibre {
    background: #D1FAE5;
}

[data-theme="dark"] .groupe-lettre.groupe-equilibre {
    background: rgba(52, 211, 153, 0.12);
}

.groupe-lettre.groupe-desequilibre {
    border-left-color: var(--color-error);
}

[data-theme="light"] .groupe-lettre.groupe-desequilibre,
:root:not([data-theme="dark"]) .groupe-lettre.groupe-desequilibre {
    background: #FEE2E2;
}

[data-theme="dark"] .groupe-lettre.groupe-desequilibre {
    background: rgba(248, 113, 113, 0.12);
}

.groupe-lettre-id {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--gradient-primary);
    color: white;
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-primary);
}

.groupe-lettre-detail {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.groupe-lettre-solde {
    font-weight: var(--font-bold);
    font-family: var(--font-mono);
} 

/* ============================================
   SECTION 28 : SECTIONS SPÉCIFIQUES PREMIUM - CORRIGÉE
   ============================================ */

.provision-section,
.regularisation-section,
.cession-section,
.calcul-section,
.paie-section,
.ecart-section,
.cout-section,
.invest-section,
.depreciation-section,
.inventaire-section,
.is-section,
.cloture-section {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .provision-section,
[data-theme="light"] .regularisation-section,
[data-theme="light"] .cession-section,
[data-theme="light"] .calcul-section,
[data-theme="light"] .paie-section,
[data-theme="light"] .ecart-section,
[data-theme="light"] .cout-section,
[data-theme="light"] .invest-section,
[data-theme="light"] .depreciation-section,
[data-theme="light"] .inventaire-section,
[data-theme="light"] .is-section,
[data-theme="light"] .cloture-section,
:root:not([data-theme="dark"]) .provision-section,
:root:not([data-theme="dark"]) .regularisation-section,
:root:not([data-theme="dark"]) .cession-section,
:root:not([data-theme="dark"]) .calcul-section,
:root:not([data-theme="dark"]) .paie-section,
:root:not([data-theme="dark"]) .ecart-section,
:root:not([data-theme="dark"]) .cout-section,
:root:not([data-theme="dark"]) .invest-section,
:root:not([data-theme="dark"]) .depreciation-section,
:root:not([data-theme="dark"]) .inventaire-section,
:root:not([data-theme="dark"]) .is-section,
:root:not([data-theme="dark"]) .cloture-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .provision-section,
[data-theme="dark"] .regularisation-section,
[data-theme="dark"] .cession-section,
[data-theme="dark"] .calcul-section,
[data-theme="dark"] .paie-section,
[data-theme="dark"] .ecart-section,
[data-theme="dark"] .cout-section,
[data-theme="dark"] .invest-section,
[data-theme="dark"] .depreciation-section,
[data-theme="dark"] .inventaire-section,
[data-theme="dark"] .is-section,
[data-theme="dark"] .cloture-section {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.provision-section:hover,
.regularisation-section:hover,
.cession-section:hover,
.calcul-section:hover,
.paie-section:hover,
.ecart-section:hover,
.cout-section:hover,
.invest-section:hover,
.depreciation-section:hover,
.inventaire-section:hover,
.is-section:hover,
.cloture-section:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-xl);
}

.provision-section h4,
.regularisation-section h4,
.cession-section h4,
.calcul-section h4,
.paie-section h4,
.ecart-section h4,
.cout-section h4,
.invest-section h4,
.depreciation-section h4,
.inventaire-section h4,
.is-section h4,
.cloture-section h4 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-3);
    border-bottom: 3px solid transparent;
    border-image: var(--gradient-primary) 1;
    font-weight: var(--font-bold);
}

[data-theme="light"] .provision-section h4,
[data-theme="light"] .regularisation-section h4,
[data-theme="light"] .cession-section h4,
[data-theme="light"] .calcul-section h4,
[data-theme="light"] .paie-section h4,
[data-theme="light"] .ecart-section h4,
[data-theme="light"] .cout-section h4,
[data-theme="light"] .invest-section h4,
[data-theme="light"] .depreciation-section h4,
[data-theme="light"] .inventaire-section h4,
[data-theme="light"] .is-section h4,
[data-theme="light"] .cloture-section h4,
:root:not([data-theme="dark"]) .provision-section h4,
:root:not([data-theme="dark"]) .regularisation-section h4,
:root:not([data-theme="dark"]) .cession-section h4,
:root:not([data-theme="dark"]) .calcul-section h4,
:root:not([data-theme="dark"]) .paie-section h4,
:root:not([data-theme="dark"]) .ecart-section h4,
:root:not([data-theme="dark"]) .cout-section h4,
:root:not([data-theme="dark"]) .invest-section h4,
:root:not([data-theme="dark"]) .depreciation-section h4,
:root:not([data-theme="dark"]) .inventaire-section h4,
:root:not([data-theme="dark"]) .is-section h4,
:root:not([data-theme="dark"]) .cloture-section h4 {
    color: var(--color-primary-dark);
}

[data-theme="dark"] .provision-section h4,
[data-theme="dark"] .regularisation-section h4,
[data-theme="dark"] .cession-section h4,
[data-theme="dark"] .calcul-section h4,
[data-theme="dark"] .paie-section h4,
[data-theme="dark"] .ecart-section h4,
[data-theme="dark"] .cout-section h4,
[data-theme="dark"] .invest-section h4,
[data-theme="dark"] .depreciation-section h4,
[data-theme="dark"] .inventaire-section h4,
[data-theme="dark"] .is-section h4,
[data-theme="dark"] .cloture-section h4 {
    color: var(--color-primary-light);
}

/* ============================================
   SECTION 29 : PUZZLE DRAG & DROP PREMIUM - CORRIGÉE
   ============================================ */

.puzzle-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.puzzle-pieces {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 3px dashed var(--color-border);
    border-radius: var(--radius-2xl);
    min-height: 110px;
}

[data-theme="light"] .puzzle-pieces,
:root:not([data-theme="dark"]) .puzzle-pieces {
    background: linear-gradient(135deg, #EDE9FE 0%, #F5F3FF 100%);
}

[data-theme="dark"] .puzzle-pieces {
    background: linear-gradient(135deg, #1A1A1F 0%, #111114 100%);
}

.puzzle-piece {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-5);
    background: var(--gradient-primary);
    color: white;
    border-radius: var(--radius-xl);
    cursor: grab;
    user-select: none;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-primary);
}

.puzzle-piece:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: var(--shadow-xl), var(--glow-primary);
}

.puzzle-piece:active {
    cursor: grabbing;
    transform: scale(0.97);
}

.puzzle-piece.dragging {
    opacity: 0.5;
    transform: rotate(4deg);
}

.piece-numero {
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    font-family: var(--font-mono);
}

.piece-libelle {
    font-size: var(--text-xs);
    opacity: 0.9;
    text-align: center;
}

.piece-montant {
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
}

.puzzle-ecriture {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .puzzle-ecriture,
:root:not([data-theme="dark"]) .puzzle-ecriture {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .puzzle-ecriture {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.puzzle-drop-zone {
    min-height: 60px;
    min-width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px dashed var(--color-border);
    border-radius: var(--radius-xl);
    transition: all var(--transition-fast);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

[data-theme="light"] .puzzle-drop-zone,
:root:not([data-theme="dark"]) .puzzle-drop-zone {
    background: #F5F3FF;
}

[data-theme="dark"] .puzzle-drop-zone {
    background: #1A1A1F;
}

.puzzle-drop-zone::before {
    content: 'Déposez ici';
}

.puzzle-drop-zone.drag-over {
    border-color: var(--color-primary);
    transform: scale(1.03);
    box-shadow: var(--glow-primary);
}

[data-theme="light"] .puzzle-drop-zone.drag-over,
:root:not([data-theme="dark"]) .puzzle-drop-zone.drag-over {
    background: #EDE9FE;
}

[data-theme="dark"] .puzzle-drop-zone.drag-over {
    background: rgba(167, 139, 250, 0.15);
}

.puzzle-drop-zone.drag-over::before {
    content: '↓ Lâchez !';
    color: var(--color-primary);
    font-weight: var(--font-bold);
}

.puzzle-drop-zone:has(.puzzle-piece)::before {
    content: none;
}

.puzzle-drop-zone.is-correct {
    border-color: var(--color-success);
    border-style: solid;
}

[data-theme="light"] .puzzle-drop-zone.is-correct,
:root:not([data-theme="dark"]) .puzzle-drop-zone.is-correct {
    background: #D1FAE5;
}

[data-theme="dark"] .puzzle-drop-zone.is-correct {
    background: rgba(52, 211, 153, 0.12);
}

.puzzle-drop-zone.is-error {
    border-color: var(--color-error);
    border-style: solid;
}

[data-theme="light"] .puzzle-drop-zone.is-error,
:root:not([data-theme="dark"]) .puzzle-drop-zone.is-error {
    background: #FEE2E2;
}

[data-theme="dark"] .puzzle-drop-zone.is-error {
    background: rgba(248, 113, 113, 0.12);
}

.puzzle-aide {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--color-info);
    border-radius: var(--radius-xl);
    font-size: var(--text-sm);
}

[data-theme="light"] .puzzle-aide,
:root:not([data-theme="dark"]) .puzzle-aide {
    background: linear-gradient(135deg, #DBEAFE 0%, #ECFEFF 100%);
    color: var(--color-info-dark);
}

[data-theme="dark"] .puzzle-aide {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(34, 211, 238, 0.1) 100%);
    color: var(--color-info-light);
}

.puzzle-aide::before {
    content: '💡';
    font-size: 1.3em;
}

/* ============================================
   SECTION 30 : SPEED QUIZ PREMIUM - CORRIGÉE
   ============================================ */

.exercice-gamifie {
    border: 3px solid var(--color-gold);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-gold), var(--glow-gold);
    overflow: visible;
}

.exercice-gamifie::before {
    background: var(--gradient-gold);
}

.exercice-gamifie .exercice-header {
    border-bottom: 1px solid var(--color-border-light);
}

[data-theme="light"] .exercice-gamifie .exercice-header,
:root:not([data-theme="dark"]) .exercice-gamifie .exercice-header {
    background: linear-gradient(135deg, #FFFBEB 0%, #F5F3FF 100%);
}

[data-theme="dark"] .exercice-gamifie .exercice-header {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, #111114 100%);
}

.quiz-start {
    text-align: center;
    padding: var(--space-12);
}

.quiz-intro {
    margin-bottom: var(--space-6);
}

.quiz-icon {
    font-size: 4.5rem;
    margin-bottom: var(--space-4);
    animation: pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(var(--color-gold-rgb), 0.4));
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.quiz-intro h4 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-extrabold);
    margin-bottom: var(--space-2);
    color: var(--color-text);
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quiz-intro p {
    color: var(--color-text-secondary);
}

.quiz-regles {
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    text-align: left;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--shadow-gold);
}

[data-theme="light"] .quiz-regles,
:root:not([data-theme="dark"]) .quiz-regles {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .quiz-regles {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.quiz-regles h5 {
    font-weight: var(--font-bold);
    margin-bottom: var(--space-3);
}

[data-theme="light"] .quiz-regles h5,
:root:not([data-theme="dark"]) .quiz-regles h5 {
    color: var(--color-gold-dark);
}

[data-theme="dark"] .quiz-regles h5 {
    color: var(--color-gold-light);
}

.quiz-regles ul {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-text-secondary);
}

.quiz-regles li {
    margin-bottom: var(--space-2);
}

.quiz-game {
    padding: var(--space-6);
}

.quiz-header {
    margin-bottom: var(--space-6);
}

.quiz-progress {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.progress-bar {
    flex: 1;
    height: 12px;
    border-radius: var(--radius-full);
    overflow: hidden;
    box-shadow: var(--shadow-inner);
}

[data-theme="light"] .progress-bar,
:root:not([data-theme="dark"]) .progress-bar {
    background: #EDE9FE;
}

[data-theme="dark"] .progress-bar {
    background: #1A1A1F;
}

.progress-fill {
    height: 100%;
    background: var(--gradient-gold);
    border-radius: var(--radius-full);
    transition: width 0.4s var(--ease-out);
    box-shadow: 0 0 15px var(--color-gold);
}

.progress-text {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.quiz-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
}

.stat {
    text-align: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
}

[data-theme="light"] .stat,
:root:not([data-theme="dark"]) .stat {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .stat {
    background: rgba(17, 17, 20, 0.9);
}

.stat-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-1);
}

.stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-extrabold);
    color: var(--color-primary);
    font-family: var(--font-mono);
}

.stat-value.timer {
    color: var(--color-warning);
}

.stat-value.timer.warning {
    color: var(--color-error);
    animation: blink 0.5s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.quiz-question {
    text-align: center;
    padding: var(--space-6);
}

.quiz-question h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
    color: var(--color-text);
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 520px;
    margin: 0 auto;
}

.quiz-option {
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    text-align: left;
    color: var(--color-text);
    transition: all var(--transition-fast);
}

[data-theme="light"] .quiz-option,
:root:not([data-theme="dark"]) .quiz-option {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .quiz-option {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.quiz-option:hover:not(:disabled) {
    border-color: var(--color-gold);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg), var(--glow-gold);
}

[data-theme="light"] .quiz-option:hover:not(:disabled),
:root:not([data-theme="dark"]) .quiz-option:hover:not(:disabled) {
    background: #FFFBEB;
}

[data-theme="dark"] .quiz-option:hover:not(:disabled) {
    background: rgba(251, 191, 36, 0.1);
}

.quiz-option:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.quiz-option.option-correct {
    border-color: var(--color-success);
    animation: correctPop 0.5s var(--ease-spring);
}

[data-theme="light"] .quiz-option.option-correct,
:root:not([data-theme="dark"]) .quiz-option.option-correct {
    background: #D1FAE5;
}

[data-theme="dark"] .quiz-option.option-correct {
    background: rgba(52, 211, 153, 0.12);
}

@keyframes correctPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

.quiz-option.option-incorrect {
    border-color: var(--color-error);
    animation: shake 0.5s ease;
}

[data-theme="light"] .quiz-option.option-incorrect,
:root:not([data-theme="dark"]) .quiz-option.option-incorrect {
    background: #FEE2E2;
}

[data-theme="dark"] .quiz-option.option-incorrect {
    background: rgba(248, 113, 113, 0.12);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-8px); }
    80% { transform: translateX(8px); }
}

/* Résultats quiz */
.quiz-results {
    text-align: center;
    padding: var(--space-12);
}

.results-header {
    margin-bottom: var(--space-6);
}

.results-emoji {
    font-size: 5.5rem;
    display: block;
    margin-bottom: var(--space-4);
    animation: bounceIn 0.7s var(--ease-spring);
    filter: drop-shadow(0 8px 16px rgba(var(--color-gold-rgb), 0.4));
}

@keyframes bounceIn {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); opacity: 1; }
}

.results-header h3 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-extrabold);
    color: var(--color-text);
    margin: 0;
    background: var(--gradient-rainbow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.results-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.result-stat {
    text-align: center;
    padding: var(--space-4) var(--space-6);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-2xl);
    min-width: 110px;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .result-stat,
:root:not([data-theme="dark"]) .result-stat {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .result-stat {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.results-message {
    padding: var(--space-5) var(--space-6);
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-6);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

[data-theme="light"] .results-message,
:root:not([data-theme="dark"]) .results-message {
    background: linear-gradient(135deg, #FFFBEB 0%, #F5F3FF 100%);
}

[data-theme="dark"] .results-message {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, #111114 100%);
}

.results-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.quiz-review {
    margin-top: var(--space-6);
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.quiz-review ul {
    list-style: none;
    padding: 0;
}

.quiz-review li {
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-xl);
    font-size: var(--text-sm);
}

.quiz-review .review-correct {
    border-left: 4px solid var(--color-success);
}

[data-theme="light"] .quiz-review .review-correct,
:root:not([data-theme="dark"]) .quiz-review .review-correct {
    background: #D1FAE5;
}

[data-theme="dark"] .quiz-review .review-correct {
    background: rgba(52, 211, 153, 0.12);
}

.quiz-review .review-incorrect {
    border-left: 4px solid var(--color-error);
}

[data-theme="light"] .quiz-review .review-incorrect,
:root:not([data-theme="dark"]) .quiz-review .review-incorrect {
    background: #FEE2E2;
}

[data-theme="dark"] .quiz-review .review-incorrect {
    background: rgba(248, 113, 113, 0.12);
}

.quiz-review .bonne-reponse {
    font-weight: var(--font-semibold);
}

[data-theme="light"] .quiz-review .bonne-reponse,
:root:not([data-theme="dark"]) .quiz-review .bonne-reponse {
    color: var(--color-success-dark);
}

[data-theme="dark"] .quiz-review .bonne-reponse {
    color: var(--color-success-light);
}

/* ============================================
   SECTION 31 : BOUTONS PREMIUM - CORRIGÉE
   ============================================ */

.exercice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--color-border);
}

[data-theme="light"] .exercice-actions,
:root:not([data-theme="dark"]) .exercice-actions {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
}

[data-theme="dark"] .exercice-actions {
    background: linear-gradient(135deg, #1A1A1F 0%, #111114 100%);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.btn:hover::before {
    opacity: 1;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-xl), var(--glow-primary);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-secondary {
    border-color: var(--color-border);
    color: var(--color-text);
    backdrop-filter: blur(8px);
}

[data-theme="light"] .btn-secondary,
:root:not([data-theme="dark"]) .btn-secondary {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .btn-secondary {
    background: rgba(17, 17, 20, 0.9);
}

.btn-secondary:hover {
    border-color: var(--color-primary);
}

[data-theme="light"] .btn-secondary:hover,
:root:not([data-theme="dark"]) .btn-secondary:hover {
    background: #EDE9FE;
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(167, 139, 250, 0.15);
}

.btn-success {
    background: var(--gradient-success);
    color: white;
    box-shadow: var(--shadow-success);
}

.btn-success:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-xl), var(--glow-success);
}

.btn-ghost {
    background: transparent;
    color: var(--color-primary);
}

.btn-ghost:hover {
    background: var(--color-primary-subtle);
}

.btn-large {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.btn-icon {
    padding: var(--space-3);
    min-width: 48px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

@media (max-width: 640px) {
    .exercice-actions {
        justify-content: center;
    }
    
    .btn {
        flex: 1;
        min-width: 140px;
    }
}

/* ============================================
   SECTION 32 : FEEDBACK PREMIUM - CORRIGÉE
   ============================================ */

.feedback {
    display: none;
    padding: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.feedback.visible {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    animation: feedbackSlide 0.4s var(--ease-spring);
}

@keyframes feedbackSlide {
    from { 
        opacity: 0; 
        transform: translateY(-15px) scale(0.98); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

.feedback-success {
    border-left: 5px solid var(--color-success);
}

[data-theme="light"] .feedback-success,
:root:not([data-theme="dark"]) .feedback-success {
    background: linear-gradient(90deg, #D1FAE5 0%, transparent 100%);
}

[data-theme="dark"] .feedback-success {
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.12) 0%, transparent 100%);
}

.feedback-error {
    border-left: 5px solid var(--color-error);
}

[data-theme="light"] .feedback-error,
:root:not([data-theme="dark"]) .feedback-error {
    background: linear-gradient(90deg, #FEE2E2 0%, transparent 100%);
}

[data-theme="dark"] .feedback-error {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.12) 0%, transparent 100%);
}

.feedback-icon {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
    animation: iconPop 0.4s var(--ease-spring);
}

@keyframes iconPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.feedback-content {
    flex: 1;
    min-width: 0;
}

.feedback-message {
    margin: 0 0 var(--space-2) 0;
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    color: var(--color-text);
}

.feedback-details {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
    line-height: var(--leading-relaxed);
    white-space: pre-line;
}

.feedback-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    font-style: italic;
    margin-top: var(--space-2);
}

.feedback-hint::before {
    content: '💡';
}

.feedback-expected {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
}

[data-theme="light"] .feedback-expected,
:root:not([data-theme="dark"]) .feedback-expected {
    background: #EDE9FE;
}

[data-theme="dark"] .feedback-expected {
    background: #1A1A1F;
}

.feedback-expected strong {
    color: var(--color-text);
}

/* ============================================
   SECTION 33 : SOLUTIONS PREMIUM - CORRIGÉE
   ============================================ */

.solution {
    display: none;
    border-top: 1px solid var(--color-border);
}

[data-theme="light"] .solution,
:root:not([data-theme="dark"]) .solution {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .solution {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.solution.visible,
.solution:not([hidden]) {
    display: block;
    animation: solutionExpand 0.5s var(--ease-out);
}

@keyframes solutionExpand {
    from { 
        opacity: 0;
        max-height: 0;
    }
    to { 
        opacity: 1;
        max-height: 4000px;
    }
}

.solution-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--gradient-success);
    color: white;
    font-weight: var(--font-bold);
}

.solution-header::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-full);
    font-weight: var(--font-extrabold);
}

.solution-content {
    padding: var(--space-6);
    line-height: var(--leading-loose);
    color: var(--color-text);
}

.solution-content h4 {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    margin: var(--space-6) 0 var(--space-3) 0;
}

[data-theme="light"] .solution-content h4,
:root:not([data-theme="dark"]) .solution-content h4 {
    color: var(--color-primary-dark);
}

[data-theme="dark"] .solution-content h4 {
    color: var(--color-primary-light);
}

.solution-content h4:first-child {
    margin-top: 0;
}

.solution-content p {
    margin-bottom: var(--space-4);
    max-width: 70ch;
}

.solution-content ul,
.solution-content ol {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.solution-content li {
    margin-bottom: var(--space-2);
}

.solution-content code {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

[data-theme="light"] .solution-content code,
:root:not([data-theme="dark"]) .solution-content code {
    background: #EDE9FE;
    color: var(--color-primary-dark);
}

[data-theme="dark"] .solution-content code {
    background: #1A1A1F;
    color: var(--color-primary-light);
}

.solution-content .formule {
    display: block;
    padding: var(--space-4);
    border-left: 5px solid var(--color-primary);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    margin: var(--space-4) 0;
}

[data-theme="light"] .solution-content .formule,
:root:not([data-theme="dark"]) .solution-content .formule {
    background: linear-gradient(135deg, #EDE9FE 0%, #ECFEFF 100%);
}

[data-theme="dark"] .solution-content .formule {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(34, 211, 238, 0.1) 100%);
}
/* ============================================
   SECTION 34 : TABLEAUX GÉNÉRIQUES PREMIUM - CORRIGÉE
   ============================================ */

.tableau-uo,
.tableau-cout,
.tableau-actualisation,
.tableau-payback,
.tableau-rf,
.tableau-is,
.tableau-analyse,
.tableau-hs,
.tableau-cotisations,
.compte-resultat,
.tableau-caf,
.bfr-analyse {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .tableau-uo,
[data-theme="light"] .tableau-cout,
[data-theme="light"] .tableau-actualisation,
[data-theme="light"] .tableau-payback,
[data-theme="light"] .tableau-rf,
[data-theme="light"] .tableau-is,
[data-theme="light"] .tableau-analyse,
[data-theme="light"] .tableau-hs,
[data-theme="light"] .tableau-cotisations,
[data-theme="light"] .compte-resultat,
[data-theme="light"] .tableau-caf,
[data-theme="light"] .bfr-analyse,
:root:not([data-theme="dark"]) .tableau-uo,
:root:not([data-theme="dark"]) .tableau-cout,
:root:not([data-theme="dark"]) .tableau-actualisation,
:root:not([data-theme="dark"]) .tableau-payback,
:root:not([data-theme="dark"]) .tableau-rf,
:root:not([data-theme="dark"]) .tableau-is,
:root:not([data-theme="dark"]) .tableau-analyse,
:root:not([data-theme="dark"]) .tableau-hs,
:root:not([data-theme="dark"]) .tableau-cotisations,
:root:not([data-theme="dark"]) .compte-resultat,
:root:not([data-theme="dark"]) .tableau-caf,
:root:not([data-theme="dark"]) .bfr-analyse {
    background: #FFFFFF;
}

[data-theme="dark"] .tableau-uo,
[data-theme="dark"] .tableau-cout,
[data-theme="dark"] .tableau-actualisation,
[data-theme="dark"] .tableau-payback,
[data-theme="dark"] .tableau-rf,
[data-theme="dark"] .tableau-is,
[data-theme="dark"] .tableau-analyse,
[data-theme="dark"] .tableau-hs,
[data-theme="dark"] .tableau-cotisations,
[data-theme="dark"] .compte-resultat,
[data-theme="dark"] .tableau-caf,
[data-theme="dark"] .bfr-analyse {
    background: #0A0A0C;
}

.tableau-uo th,
.tableau-uo td,
.tableau-cout th,
.tableau-cout td,
.tableau-actualisation th,
.tableau-actualisation td,
.tableau-payback th,
.tableau-payback td,
.tableau-rf th,
.tableau-rf td,
.tableau-is th,
.tableau-is td {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-light);
}

.tableau-uo thead th,
.tableau-cout thead th,
.tableau-actualisation thead th,
.tableau-payback thead th,
.tableau-is thead th {
    background: var(--gradient-primary);
    color: white;
    font-weight: var(--font-bold);
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ============================================
   SECTION 35 : TABLEAU DE FINANCEMENT PREMIUM - CORRIGÉE
   ============================================ */

.tableau-financement {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .tableau-financement {
        grid-template-columns: 1fr;
    }
}

.tf-section {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .tf-section,
:root:not([data-theme="dark"]) .tf-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .tf-section {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.tf-section h4 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-3);
    border-bottom: 3px solid transparent;
    border-image: var(--gradient-primary) 1;
    font-weight: var(--font-bold);
}

[data-theme="light"] .tf-section h4,
:root:not([data-theme="dark"]) .tf-section h4 {
    color: var(--color-primary-dark);
}

[data-theme="dark"] .tf-section h4 {
    color: var(--color-primary-light);
}

.tf-resultat {
    grid-column: 1 / -1;
    border: 2px solid var(--color-info);
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
}

[data-theme="light"] .tf-resultat,
:root:not([data-theme="dark"]) .tf-resultat {
    background: linear-gradient(135deg, #DBEAFE 0%, #ECFEFF 100%);
}

[data-theme="dark"] .tf-resultat {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(34, 211, 238, 0.1) 100%);
}

/* ============================================
   SECTION 36 : TABLEAU DES FLUX PREMIUM - CORRIGÉE
   ============================================ */

.tableau-flux {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.flux-section {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .flux-section,
:root:not([data-theme="dark"]) .flux-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .flux-section {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.flux-section:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-lg);
}

.flux-section h4 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4) 0;
    padding-bottom: var(--space-3);
    border-bottom: 3px solid var(--color-primary-light);
    font-weight: var(--font-bold);
}

[data-theme="light"] .flux-section h4,
:root:not([data-theme="dark"]) .flux-section h4 {
    color: var(--color-primary-dark);
}

[data-theme="dark"] .flux-section h4 {
    color: var(--color-primary-light);
}

.flux-section.activite {
    border-left: 5px solid var(--color-success);
}

.flux-section.activite h4 {
    border-bottom-color: var(--color-success-light);
}

[data-theme="light"] .flux-section.activite h4,
:root:not([data-theme="dark"]) .flux-section.activite h4 {
    color: var(--color-success-dark);
}

[data-theme="dark"] .flux-section.activite h4 {
    color: var(--color-success-light);
}

.flux-section.investissement {
    border-left: 5px solid var(--color-error);
}

.flux-section.investissement h4 {
    border-bottom-color: var(--color-error-light);
}

[data-theme="light"] .flux-section.investissement h4,
:root:not([data-theme="dark"]) .flux-section.investissement h4 {
    color: var(--color-error-dark);
}

[data-theme="dark"] .flux-section.investissement h4 {
    color: var(--color-error-light);
}

.flux-section.financement {
    border-left: 5px solid var(--color-info);
}

.flux-section.financement h4 {
    border-bottom-color: var(--color-info-light);
}

[data-theme="light"] .flux-section.financement h4,
:root:not([data-theme="dark"]) .flux-section.financement h4 {
    color: var(--color-info-dark);
}

[data-theme="dark"] .flux-section.financement h4 {
    color: var(--color-info-light);
}

.flux-section.synthese {
    border: 3px solid var(--color-primary);
    border-left: 5px solid var(--color-primary);
}

[data-theme="light"] .flux-section.synthese,
:root:not([data-theme="dark"]) .flux-section.synthese {
    background: linear-gradient(135deg, #EDE9FE 0%, #ECFEFF 100%);
}

[data-theme="dark"] .flux-section.synthese {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(34, 211, 238, 0.1) 100%);
}

/* ============================================
   SECTION 37 : MESSAGES ZEN PREMIUM - CORRIGÉE
   ============================================ */

.zen-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-3xl);
    margin-bottom: var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .zen-message,
:root:not([data-theme="dark"]) .zen-message {
    background: linear-gradient(135deg, #EDE9FE 0%, #ECFEFF 50%, #FFFBEB 100%);
}

[data-theme="dark"] .zen-message {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(34, 211, 238, 0.08) 50%, rgba(251, 191, 36, 0.06) 100%);
}

.zen-message__icon {
    font-size: 3rem;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.zen-message__text {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    max-width: 50ch;
}

/* Progression de session */
.session-progress {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-md);
}

[data-theme="light"] .session-progress,
:root:not([data-theme="dark"]) .session-progress {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

[data-theme="dark"] .session-progress {
    background: linear-gradient(180deg, #111114 0%, #0A0A0C 100%);
}

.session-progress__bar {
    flex: 1;
    height: 10px;
    border-radius: var(--radius-full);
    overflow: hidden;
    box-shadow: var(--shadow-inner);
}

[data-theme="light"] .session-progress__bar,
:root:not([data-theme="dark"]) .session-progress__bar {
    background: #EDE9FE;
}

[data-theme="dark"] .session-progress__bar {
    background: #1A1A1F;
}

.session-progress__fill {
    height: 100%;
    background: var(--gradient-rainbow);
    background-size: 200% 100%;
    border-radius: var(--radius-full);
    transition: width 0.6s var(--ease-out);
    animation: rainbowSlide 3s linear infinite;
}

.session-progress__text {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Encouragement */
.encouragement {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--gradient-success);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: white;
    margin-top: var(--space-3);
    box-shadow: var(--shadow-success);
}

/* ============================================
   SECTION 38 : RESPONSIVE - CORRIGÉE
   ============================================ */

@media (max-width: 768px) {
    .exercice-header {
        padding: var(--space-4);
    }
    
    .exercice-enonce,
    .exercice-travail {
        padding: var(--space-4);
    }
    
    .exercice-numero {
        min-width: 44px;
        height: 44px;
    }
    
    .calcul-chaine::before {
        left: 20px;
    }
    
    .etape-calcul {
        margin-left: var(--space-10);
    }
    
    .etape-numero {
        left: calc(-1 * var(--space-10) - 20px);
        width: 40px;
        height: 40px;
    }
    
    .quiz-stats {
        gap: var(--space-4);
    }
    
    .stat-value {
        font-size: var(--text-xl);
    }
}

@media (max-width: 480px) {
    .hero__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .exercice-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    
    .exercice-numero {
        order: -1;
    }
    
    .vrai-faux-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .vf-boutons {
        width: 100%;
    }
    
    .vf-boutons .btn-vrai,
    .vf-boutons .btn-faux {
        flex: 1;
    }
    
    .association-ligne {
        flex-direction: column;
        align-items: stretch;
    }
    
    .association-gauche {
        min-width: auto;
    }
    
    .quiz-question h4 {
        font-size: var(--text-lg);
    }
    
    .results-stats {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .result-stat {
        width: 100%;
    }
}

/* ============================================
   SECTION 39 : PRINT - CORRIGÉE
   ============================================ */

@media print {
    .site-header,
    .nav-main,
    .nav-toggle,
    .nav-mobile,
    .theme-toggle,
    .header-actions,
    .exercice-actions,
    .btn,
    .feedback,
    .quiz-start button,
    .results-actions {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
        font-size: 11pt;
    }
    
    .hero {
        background: #f5f5f5 !important;
        color: black !important;
        padding: 20pt 0;
    }
    
    .exercice {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1pt solid #ccc !important;
        box-shadow: none !important;
        margin-bottom: 15pt;
        background: white !important;
    }
    
    .exercice::before {
        display: none !important;
    }
    
    .solution {
        display: block !important;
        border-top: 1pt solid #ccc;
        background: white !important;
    }
    
    .solution-header {
        background: #e8f5e9 !important;
        color: #2e7d32 !important;
    }
    
    input, select, textarea {
        border: 1pt solid #999 !important;
        background: white !important;
    }
    
    .exercice-header,
    .exercice-travail,
    .exercice-actions {
        background: white !important;
    }
}

/* ============================================
   SECTION 40 : ACCESSIBILITÉ - CORRIGÉE
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .puzzle-piece:hover,
    .quiz-option:hover,
    .btn:hover,
    .exercice:hover,
    .ordo-item:hover,
    .groupe-lettre:hover {
        transform: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --color-border: #000;
        --color-border-light: #333;
        --color-border-dark: #000;
    }
    
    [data-theme="dark"] {
        --color-border: #fff;
        --color-border-light: #ccc;
        --color-border-dark: #fff;
    }
    
    .btn-primary,
    .btn-success {
        border: 3px solid currentColor;
    }
    
    .exercice {
        border-width: 3px;
    }
    
    input, select, textarea {
        border-width: 3px;
    }
}

/* Focus visible amélioré */
@media (prefers-reduced-motion: no-preference) {
    :focus-visible {
        transition: outline-offset 0.15s ease;
    }
}

/* ============================================
   SECTION 41 : CONFETTI ANIMATION - CORRIGÉE
   ============================================ */

.confetti {
    position: fixed;
    width: 12px;
    height: 12px;
    pointer-events: none;
    z-index: 9999;
    will-change: transform, opacity;
}

.confetti-gold {
    background: var(--color-gold);
    box-shadow: 0 0 6px var(--color-gold);
}

.confetti-primary {
    background: var(--color-primary);
    box-shadow: 0 0 6px var(--color-primary);
}

.confetti-success {
    background: var(--color-success);
    box-shadow: 0 0 6px var(--color-success);
}

.confetti-accent {
    background: var(--color-accent);
    box-shadow: 0 0 6px var(--color-accent);
}

/* ============================================
   SECTION 42 : CORRECTIONS ADDITIONNELLES
   ============================================ */

/* Select dropdown en dark mode */
[data-theme="dark"] select option {
    background: #0A0A0C;
    color: var(--color-text);
}

/* Placeholder en dark mode */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

/* Autofill en dark mode */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #0A0A0C inset !important;
    -webkit-text-fill-color: var(--color-text) !important;
    caret-color: var(--color-text);
}

/* Table rows hover en dark mode - fix pour éviter le blanc */
[data-theme="dark"] table tbody tr:hover td {
    background: rgba(167, 139, 250, 0.08) !important;
}

/* Fix pour les liens dans les solutions */
.solution-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

[data-theme="dark"] .solution-content a {
    color: var(--color-primary-light);
}

/* Fix pour les listes dans l'énoncé */
[data-theme="dark"] .exercice-enonce li::marker {
    color: var(--color-primary-light);
}

/* Fix pour les bordures de focus en dark */
[data-theme="dark"] :focus-visible {
    outline-color: var(--color-primary-light);
}

/* Fix pour les éléments disabled */
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] button:disabled {
    background: #1A1A1F !important;
    color: var(--color-text-muted) !important;
    opacity: 0.6;
}

/* Fix pour scrollbar en dark mode */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #111114;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    border-color: #111114;
}

/* Fix pour les tooltips potentiels */
[data-theme="dark"] [title]:hover::after {
    background: #1A1A1F;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* Amélioration contraste texte sur gradient primary */
.gradient-text-fix {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Fix pour input number spinners en dark */
[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button {
    filter: invert(1);
}



/* ==========================================
   OPTIMISATIONS PERFORMANCE GOOGLE
   ========================================== */

/* 1. Évite les Layout Shifts (CLS) */
img, video, iframe {
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height); /* Réserve l'espace */
}

/* 2. Optimise le rendu des fonts */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
}

/* 3. Réduit les repaint sur les animations */
.sc-card,
.btn,
[class*="hover"] {
    will-change: transform;
    transform: translateZ(0); /* Active GPU */
}

/* 4. Masque le contenu non visible */
.lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: 500px; /* Hauteur estimée */
}

/* 5. Optimise le scroll */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

#tool-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    
    /* 🚀 Optimisations supplémentaires */
    contain: layout style;  /* Isole le rendu = plus rapide */
    will-change: contents;  /* Prépare le navigateur aux changements */
}
/* ============================================
   FIN DU CSS PREMIUM v6.0 - CORRIGÉ
   ============================================ */