/**
 * Styles spécifiques à la page HOME
 *
 * CSS chargé UNIQUEMENT sur home-fr.php, home-en.php, home-nl.php
 * Complète multi-style.css
 *
 * @author Job Skill Dev Team
 * @date 2025-10-15
 */

/* ============================================================================
   HERO SECTION
   ========================================================================== */

.hero-section {
    background: linear-gradient(135deg, #003E52 0%, #002838 100%);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%23E8598F" opacity="0.05"/></svg>');
    background-size: 200px 200px;
    opacity: 0.3;
}

/* ============================================================================
   STATS ANIMATION
   ========================================================================== */

.stat-number {
    transition: transform 0.3s ease;
}

.stat-number:hover {
    transform: scale(1.1);
}

/* Animation d'apparition progressive des stats */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-item {
    animation: countUp 0.6s ease-out forwards;
}

.stat-item:nth-child(1) { animation-delay: 0.1s; }
.stat-item:nth-child(2) { animation-delay: 0.2s; }
.stat-item:nth-child(3) { animation-delay: 0.3s; }
.stat-item:nth-child(4) { animation-delay: 0.4s; }

/* ============================================================================
   FEATURE CARDS
   ========================================================================== */

.feature-card {
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: rotate(10deg) scale(1.1);
}

/* ============================================================================
   CTA BUTTON PULSE
   ========================================================================== */

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(232, 89, 143, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(232, 89, 143, 0);
    }
}

.cta-button-primary {
    animation: pulse 2s infinite;
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2rem;
    }

    .hero-section p {
        font-size: 1rem;
    }
}