/* Animation pour les images de catégories WooCommerce et blocs d'images Gutenberg */
/* Préparation pour l'effet de brillance : position relative et overflow hidden sur le conteneur */
.product-category a, 
.wc-block-grid__product, 
.woocommerce-loop-product__link,
.niche-image-container,
.wp-block-image {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 8px; /* Applique l'arrondi au conteneur pour que l'image ne déborde pas */
}

/* Base de l'image avec transition ralentie (0.8s) */
.product-category img, 
.wc-block-grid__product-image img, 
.woocommerce-loop-product__link img,
.niche-image {
    transition: transform 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Ombre de base légère */
    border-radius: 8px;
    display: block;
    width: 100%;
}

/* Le pseudo-élément pour l'effet de brillance (reflet blanc incliné) */
.product-category a::before, 
.wc-block-grid__product::before, 
.woocommerce-loop-product__link::before,
.niche-image-container::before,
.wp-block-image::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: left 0.8s ease-in-out;
    pointer-events: none; /* Ne bloque pas le clic */
}

/* Effets au survol : Zoom + Soulèvement + Brillance */

/* 1. Zoom et Soulèvement de l'image (transition lente 0.8s) */
.product-category a:hover img, 
.wc-block-grid__product:hover img, 
.woocommerce-loop-product__link:hover img,
.niche-image-container:hover .niche-image,
.wp-block-image:hover img {
    transform: scale(1.15) translateY(-5px); /* Zoom + léger décalage vers le haut */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Ombre portée plus large */
}

/* 2. Déplacement du reflet (brillance) de gauche à droite au survol */
.product-category a:hover::before, 
.wc-block-grid__product:hover::before, 
.woocommerce-loop-product__link:hover::before,
.niche-image-container:hover::before,
.wp-block-image:hover::before {
    left: 125%;
}