/* Effets de chargement pour produits e-commerce */

/* Conteneur skeleton */
.skeleton-container {
    position: relative;
    overflow: hidden;
}

/* Élément skeleton de base */
.skeleton .bg {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
}

/* 1. EFFET SHIMMER (Par défaut) */
.skeleton.shimmer-effect .bg {
    animation: skeletonShimmer 1.5s infinite linear;
}

@keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 2. EFFET PULSE */
.skeleton.pulse-effect .bg {
    animation: skeletonPulse 2s infinite ease-in-out;
}

@keyframes skeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* 3. EFFET PROGRESSIF (défilement vertical) */
.skeleton.progressive-effect .bg {
    position: relative;
    overflow: hidden;
}

.skeleton.progressive-effect .bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.8) 50%, transparent 100%);
    animation: progressiveLoad 2s infinite linear;
}

@keyframes progressiveLoad {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* 4. EFFET MORPHING */
.skeleton.morph-effect .img {
    animation: morphShape 3s infinite ease-in-out;
}

@keyframes morphShape {
    0%, 100% { 
        border-radius: 8px; 
    }
    25% { 
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 
    }
    50% { 
        border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%; 
    }
    75% { 
        border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; 
    }
}

/* 5. EFFET VAGUE (wave) */
.skeleton.wave-effect {
    position: relative;
    overflow: hidden;
}

.skeleton.wave-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: wave 1.5s infinite linear;
    z-index: 1;
}

@keyframes wave {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 6. EFFET ÉCLAIRCISSEMENT (lighten) */
.skeleton.lighten-effect .bg {
    animation: lightenEffect 2s infinite alternate;
}

@keyframes lightenEffect {
    0% { 
        filter: brightness(0.9);
        background-color: #f0f0f0;
    }
    100% { 
        filter: brightness(1.1);
        background-color: #f8f8f8;
    }
}

/* 7. EFFET COULEUR PROGRESSIVE */
.skeleton.color-effect .bg {
    animation: colorShift 4s infinite linear;
}

@keyframes colorShift {
    0% { background-color: #f0f0f0; }
    33% { background-color: #e8e8e8; }
    66% { background-color: #f0f0f0; }
    100% { background-color: #e8e8e8; }
}

/* Animation d'apparition des cartes */
.skeleton .carte {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
}

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

/* Délais d'animation pour les cartes */
.skeleton .carte:nth-child(1) { animation-delay: 0.1s; }
.skeleton .carte:nth-child(2) { animation-delay: 0.2s; }
.skeleton .carte:nth-child(3) { animation-delay: 0.3s; }
.skeleton .carte:nth-child(4) { animation-delay: 0.4s; }
.skeleton .carte:nth-child(5) { animation-delay: 0.5s; }
.skeleton .carte:nth-child(6) { animation-delay: 0.6s; }

/* Styles de base pour la carte produit skeleton */
.carte.skeleton {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.carte.skeleton:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}