/* ==========================================================================
   1. Variables et Styles de Base
   ========================================================================== */
:root {
    /* Variables pour le thème sombre (par défaut) */
    --color-primary: #8B5CF6;
    --color-primary-light: #A78BFA;
    --color-secondary: #C084FC;
    --color-tertiary: #38BDF8;
    --color-background: #0F172A;
    --color-card-bg: #1E293B;
    --color-text: #E2E8F0;
    --color-text-muted: #94A3B8;
    --color-border: #334155;
}

.light {
    /* Variables pour le thème clair */
    --color-primary: #8B5CF6;
    --color-primary-light: #A78BFA;
    --color-secondary: #C084FC;
    --color-tertiary: #38BDF8;
    --color-background: #f8fafc;
    --color-card-bg: #ffffff;
    --color-text: #1e293b;
    --color-text-muted: #64748b;
    --color-border: #e2e8f0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   2. Header
   ========================================================================== */
#header {
    transition: background-color 0.3s ease;
}

.header-scrolled {
    background-color: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.light .header-scrolled {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   3. Composants d'UI (Boutons, Cartes)
   ========================================================================== */
.btn-animated {
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

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

.card-hover {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0, 0.1);
}

.light .card-hover:hover {
    box-shadow: 0 15px 30px rgba(139, 92, 246, 0.1);
}

/* ==========================================================================
   4. Animations
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Page Transitions */
.body-fade-out {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}