/* * MS-GROUP AFRIQUE (MSGA) - Fichier animations.css
 * Thème : Business Premium (Fluid & Responsive)
 * Mise à jour : 6 Avril 2026
 */

/* 1. KEYFRAMES PROFESSIONNELLES */

/* Apparition fluide vers le haut (Standard MSGA) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Lueur pulsante pour WhatsApp (Plus discrète et élégante) */
@keyframes pulseWhatsApp {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); 
    }
    70% { 
        transform: scale(1.05); 
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); 
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); 
    }
}

/* 2. SYSTÈME DE REVEAL (Scroll) */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    /* Courbe Bézier "Out-Expo" pour un arrêt très doux */
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform, opacity;
}

/* Classe injectée par main.js au scroll */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 3. CHARGEMENT DE LA PAGE (Hero Section) */

.hero-content h1 {
    animation: fadeInUp 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.hero-content p {
    animation: fadeInUp 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.3s forwards;
    opacity: 0;
}

.hero-btns {
    animation: fadeInUp 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s forwards;
    opacity: 0;
}

/* 4. BOUTON WHATSAPP FLOTTANT */
.whatsapp-btn, .wa-direct {
    animation: pulseWhatsApp 3s infinite;
}

/* 5. DÉLAIS EN CASCADE (Staggering) */

/* Grille des services sur index.html et services.html */
.service-card:nth-child(1) { transition-delay: 0.1s; }
.service-card:nth-child(2) { transition-delay: 0.2s; }
.service-card:nth-child(3) { transition-delay: 0.3s; }
.service-card:nth-child(4) { transition-delay: 0.4s; }

/* Grille des valeurs sur a-propos.html */
.value-card:nth-child(1) { transition-delay: 0.1s; }
.value-card:nth-child(2) { transition-delay: 0.2s; }
.value-card:nth-child(3) { transition-delay: 0.3s; }

/* 6. EFFET DE NAVIGATION */

.nav-links a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--gold); /* Bleu Royal MSGA */
    transition: width 0.4s ease;
    margin-top: 5px;
}

.nav-links a:hover::after {
    width: 100%;
}