/* Variables CSS Révolutionnaires - Couleurs Attractives */
:root {
    /* Couleurs primaires - Sunset Africain */
    --primary-gradient: linear-gradient(135deg, #FF6B35 0%, #F7931E 50%, #FFD23F 100%);
    --secondary-gradient: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
    --accent-gradient: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%);
    --success-gradient: linear-gradient(135deg, #3498DB 0%, #2980B9 100%);
    
    /* Couleurs de base */
    --primary-color: #FF6B35;
    --secondary-color: #E74C3C;
    --accent-color: #2ECC71;
    --success-color: #3498DB;
    --warning-color: #F39C12;
    
    /* Couleurs neutres */
    --dark: #1A1A2E;
    --body: #45455a;
    --dark-light: #16213E;
    --text-primary: #FFFFFF;
    --text-secondary: #BDC3C7;
    --text-muted: #7F8C8D;
    
    /* Effets et ombres avec couleurs chaudes */
    --shadow-soft: 0 10px 40px rgba(255, 107, 53, 0.15);
    --shadow-medium: 0 20px 60px rgba(255, 107, 53, 0.2);
    --shadow-strong: 0 30px 80px rgba(255, 107, 53, 0.25);
    --glow: 0 0 30px rgba(255, 107, 53, 0.4);
    --glow-accent: 0 0 20px rgba(46, 204, 113, 0.3);
    
    /* Animations */
    --transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset et base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--dark);
    /* background: rgba(184, 128, 68, 0.1); */
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}















/* Responsive Design */
@media (max-width: 1200px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: rgba(26, 26, 46, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        transition: var(--transition-medium);
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-toggle {
        display: flex;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
    }
    
    .nav-toggle span {
        width: 25px;
        height: 3px;
        background: var(--text-primary);
        border-radius: 2px;
        transition: var(--transition-fast);
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .mission-grid {
        grid-template-columns: 1fr;
    }
    
    .live-dashboard {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
    }
}