/**
 * Styles pour le centrage automatique des animations
 */

.center-animation-btn {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
    }
    100% {
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }
}

/* Amélioration du player-container pour le centrage */
.player-container {
    scroll-margin-top: 100px;
    scroll-margin-bottom: 100px;
}

/* Animation de chargement */
.player-container.centering {
    animation: centerPulse 1s ease-in-out;
}

@keyframes centerPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(59, 130, 246, 0);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .center-animation-btn {
        bottom: 15px !important;
        right: 15px !important;
        padding: 10px 16px !important;
        font-size: 12px !important;
    }
    
    .player-container {
        scroll-margin-top: 80px;
        scroll-margin-bottom: 80px;
    }
}