/* ===================================================================
   AUTO-SCROLL CAROUSEL - Produits Tendance
   Défilement automatique horizontal infini avec pause au hover
   =================================================================== */

/* Animation de défilement automatique - 200px (largeur) + 32px (gap) = 232px par carte */
@keyframes autoScrollHorizontal {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-232px * 6));
    }
}

/* Appliquer l'animation uniquement à la première section (Produits Tendance) */
.trending-section:first-of-type .trending-carousel {
    animation: autoScrollHorizontal 40s linear infinite;
    scroll-snap-type: none;
    overflow-x: hidden;
    will-change: transform;
}

/* Pause au hover */
.trending-section:first-of-type .trending-carousel:hover {
    animation-play-state: paused;
    cursor: grab;
}

.trending-section:first-of-type .trending-carousel:active {
    cursor: grabbing;
    animation-play-state: paused;
}

/* Désactiver le scroll snap pour l'auto-scroll */
.trending-section:first-of-type .product-card {
    scroll-snap-align: none;
}

/* Indicateur visuel de pause */
.trending-section:first-of-type .trending-carousel:hover::after {
    content: '⏸';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: rgba(184, 70, 31, 0.3);
    pointer-events: none;
    z-index: 100;
    animation: fadeInOut 0.3s ease;
}

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