jQuery(document).ready(function ($) {
    $(".slide-stuff .products").slick({
        arrows: true, // Active les flèches de navigation
        dots: false, // Désactive les points de navigation
        infinite: true, // Active le défilement infini
        autoplay: true, // Active la lecture automatique
        autoplaySpeed: 2000, // Vitesse de l'autoplay (3 secondes)
        slidesToShow: 4, // Nombre de produits visibles par slide
        slidesToScroll: 1, // Nombre de produits défilant par clic ou autoplay
        prevArrow: 'Précédent', // Personnalise la flèche gauche
        nextArrow: 'Suivant', // Personnalise la flèche droite
        responsive: [
            {
                breakpoint: 980, // Si la largeur de l'écran est inférieure à 980px
                settings: {
                    slidesToShow: 2, // Affiche 2 produits
                },
            },
            {
                breakpoint: 768, // Si la largeur de l'écran est inférieure à 768px
                settings: {
                    slidesToShow: 1, // Affiche 1 produit
                },
            },
        ],
    });
});

/* Ajustement général des produits WooCommerce */
.slide-stuff [class*=woocommerce] ul.products {
    display: flex !important; /* Assure l'affichage en ligne */
    overflow: hidden; /* Masque les débordements */
    padding: 0;
    margin: 0;
    list-style: none;
}

.slide-stuff [class*=woocommerce] ul.products .slick-track {
    display: flex !important;
    margin: 0 auto;
}

.slide-stuff [class*=woocommerce] ul.products li.product {
    margin: 0 10px !important; /* Espacement homogène entre les produits */
    float: none !important;
    width: calc((100% - 30px) / 4) !important; /* Ajuste la largeur pour 4 colonnes */
    box-sizing: border-box; /* Inclut les marges et paddings dans la largeur */
}

/* Ajustement des flèches */
.slide-stuff .slick-next, .slide-stuff .slick-prev {
    height: 43px;
    width: 43px;
    top: 50%;
    transform: translate(0, -50%);
    background-color: #eceff0;
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    visibility: visible; /* S'assure que les flèches sont visibles */
}

/* Positionnement des flèches */
.slide-stuff .slick-prev {
    left: 10px !important; /* Positionne la flèche gauche à 10px du bord */
}

.slide-stuff .slick-next {
    right: 10px !important; /* Positionne la flèche droite à 10px du bord */
}

/* Icônes des flèches */
.slide-stuff .slick-next::before, .slide-stuff .slick-prev::before {
    font-family: "ETmodules";
    font-size: 24px;
    color: #111;
}

/* Hover sur les flèches */
.slide-stuff .slick-next:hover, .slide-stuff .slick-prev:hover {
    background-color: #e2e2e2;
}

/* Icône flèche gauche */
.slide-stuff .slick-prev::before {
    content: '\34'; /* Icône pour "précédent" */
}

/* Icône flèche droite */
.slide-stuff .slick-next::before {
    content: '\35'; /* Icône pour "suivant" */
}

/* Ajustements pour mobile */
@media (max-width: 768px) {
    .slide-stuff .slick-prev {
        left: 10px; /* Rapproche la flèche gauche vers l'intérieur */
    }

    .slide-stuff .slick-next {
        right: 10px; /* Rapproche la flèche droite vers l'intérieur */
    }

    .slide-stuff .slick-next, 
    .slide-stuff .slick-prev {
        height: 40px;
        width: 40px;
    }

    .slide-stuff [class*=woocommerce] ul.products li.product {
        width: calc((100% - 20px) / 2) !important; /* Ajuste pour 2 colonnes sur mobile */
    }
}

@media (max-width: 480px) {
    .slide-stuff [class*=woocommerce] ul.products li.product {
        width: 100% !important; /* Une seule colonne sur petits écrans */
        margin: 0 !important;
    }
}