/* ===== ANIMATIONS ===== */

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes underlineExpand {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}

@keyframes phonePulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.15) rotate(-5deg);
    }
    50% {
        transform: scale(1) rotate(0deg);
    }
    75% {
        transform: scale(1.15) rotate(5deg);
    }
}

@keyframes bounceArrow {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-15px);
    }
}

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

@keyframes shimmerOverlay {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes logoShine {
    0% {
        transform: rotate(45deg) translateX(-200%);
    }
    100% {
        transform: rotate(45deg) translateX(200%);
    }
}

@keyframes buttonShine {
    0% {
        transform: rotate(45deg) translateX(-200%);
    }
    100% {
        transform: rotate(45deg) translateX(200%);
    }
}

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

/* Animation de soulignement qui part du centre */
@keyframes underlineExpandFromCenter {
    0% {
        width: 0%;
        opacity: 0;
    }
    100% {
        width: 80%;
        opacity: 1;
    }
}

/* Style pour les titres de sections avec soulignement animé */
.section-title-main {
    position: relative;
    padding-bottom: 20px;
    display: table;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.section-title-main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        #FFD700 20%,
        #FFA500 50%,
        #FFD700 80%,
        transparent 100%);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    opacity: 0;
}

/* Classe ajoutée par JavaScript quand la section est visible */
.section-title-main.animated::after {
    animation: underlineExpandFromCenter 1.2s ease-out forwards;
}