/**
 * 2024 PrestaShop
 *
 * This file is part of the 'nice_product_list' module.
 *
 * @author    PrestaShop
 * @copyright 2024 PrestaShop
 * @license   http://opensource.org/licenses/GPL-2.0 General Public License (GPL 2.0)
*/

/*
 * 1. Le conteneur direct des images (le lien) doit être le contexte de positionnement.
 * Il doit aussi conserver l'image principale et l'image de survol à l'intérieur
 * lorsqu'elles s'animent.
*/
.product-miniature a.card-img-top {
    position: relative; /* Contexte pour le positionnement absolu de l'image de survol */
    display: block;     /* Assure un comportement de bloc correct */
    overflow: hidden;   /* Empêche les images de déborder pendant les animations de glissement */
}

/*
 * 2. L'image de survol est positionnée exactement par-dessus son parent (le lien <a>).
*/
.product-miniature .hover-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Doit être au-dessus de l'image principale */
    opacity: 0; /* Cachée par défaut */
    transition: all 0.3s ease-in-out;
    background-color: #ffffff; /* Fond blanc pour éviter la transparence pendant le chargement */

    /* Le JS va forcer la taille, mais ces propriétés sont de bons fallbacks */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que l'image s'adapte sans être déformée */
}

/*
 * 3. L'image principale a besoin d'une position relative pour avoir un z-index.
*/
.product-miniature a.card-img-top img:not(.hover-image) {
    position: relative;
    z-index: 0;
    transition: all 0.3s ease-in-out;
}