/* ========================================================================
   ANIMATION DE PULSATION ÉLÉGANTE POUR LE BOUTON PANIER
   Activée automatiquement lorsque le panier contient des articles
   Compatible Desktop & Responsive - EFFET IDENTIQUE PARTOUT
   ======================================================================== */

/* Animation keyframe - Pulsation douce toutes les 3 secondes avec rayon réduit */
@keyframes cartPulseGlow {
    0%, 100% {
        box-shadow: inherit;
        transform: scale(1);
    }
    
    50% {
        box-shadow: 
            0 0 8px 4px rgba(255, 255, 255, 0.5),
            0 0 15px 6px rgba(255, 255, 255, 0.3),
            0 0 20px 8px rgba(255, 255, 255, 0.15);
        transform: scale(1.03);
    }
}

/* Animation du compteur - Effet de brillance synchronisé */
@keyframes cartCountGlow {
    0%, 100% {
        box-shadow: inherit;
        transform: scale(1);
    }
    
    50% {
        box-shadow: 
            0 0 12px rgba(255, 255, 255, 0.6),
            0 0 18px rgba(247, 184, 1, 0.5);
        transform: scale(1.05);
    }
}

/* Classe appliquée au bouton panier quand il contient des articles */
.cart-icon.has-items {
    animation: cartPulseGlow 3s ease-in-out infinite;
    position: relative;
}

/* Animation spécifique pour le compteur */
.cart-icon.has-items .cart-count {
    animation: cartCountGlow 3s ease-in-out infinite;
    animation-delay: 0.1s; /* Léger décalage pour effet synchronisé */
}

/* NE PAS modifier les styles existants du bouton - juste ajouter l'animation */
/* Le bouton garde son apparence d'origine définie dans styles.css */

/* Hover état - légèrement plus prononcé */
.cart-icon.has-items:hover {
    animation-play-state: paused;
    box-shadow: 
        0 0 10px 5px rgba(255, 255, 255, 0.6),
        0 0 18px 8px rgba(255, 255, 255, 0.4);
}

/* État actif (clic) - pause l'animation */
.cart-icon.has-items:active {
    animation: none;
}

/* ========================================================================
   EFFET IDENTIQUE SUR DESKTOP ET RESPONSIVE
   ======================================================================== */

/* Même animation partout - pas de différence entre mobile et desktop */
@media (max-width: 768px) {
    /* Garder exactement la même animation sur mobile */
    .cart-icon.has-items {
        animation: cartPulseGlow 3s ease-in-out infinite;
    }
    
    .cart-icon.has-items .cart-count {
        animation: cartCountGlow 3s ease-in-out infinite;
        animation-delay: 0.1s;
    }
}

/* Très petits écrans - même effet */
@media (max-width: 480px) {
    .cart-icon.has-items {
        animation: cartPulseGlow 3s ease-in-out infinite;
    }
    
    .cart-icon.has-items .cart-count {
        animation: cartCountGlow 3s ease-in-out infinite;
        animation-delay: 0.1s;
    }
}

/* ========================================================================
   PRÉFÉRENCE UTILISATEUR - Motion réduite
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* Désactiver les animations pour les utilisateurs sensibles */
    .cart-icon.has-items,
    .cart-icon.has-items .cart-count {
        animation: none !important;
    }
    
    /* Garder seulement un léger effet de brillance statique */
    .cart-icon.has-items {
        box-shadow: 
            0 0 6px 3px rgba(255, 255, 255, 0.3);
    }
}

/* ========================================================================
   DARK MODE - Adaptation si nécessaire
   ======================================================================== */

@media (prefers-color-scheme: dark) {
    @keyframes cartPulseGlow {
        0%, 100% {
            box-shadow: inherit;
            transform: scale(1);
        }
        
        50% {
            box-shadow: 
                0 0 8px 4px rgba(255, 255, 255, 0.6),
                0 0 15px 6px rgba(255, 255, 255, 0.4),
                0 0 20px 8px rgba(255, 255, 255, 0.2);
            transform: scale(1.03);
        }
    }
}

/* ========================================================================
   ACCESSIBILITÉ - Focus visible
   ======================================================================== */

.cart-icon:focus-visible {
    outline: 3px solid #F7B801;
    outline-offset: 4px;
}

/* ========================================================================
   PERFORMANCE - Optimisation GPU
   ======================================================================== */

.cart-icon.has-items,
.cart-icon.has-items .cart-count {
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ========================================================================
   IMPORTANT : Ce CSS N'AJOUTE QUE l'animation de pulsation
   Il ne modifie PAS l'apparence du bouton panier existant
   Le bouton garde tous ses styles d'origine de styles.css
   ======================================================================== */