.carroussel-images .carroussel-item {
    margin-bottom: 5%;
}
img#imagePrincipalCarroussel {
    width: 100%;
}
.miniatures_carroussel .miniature-item {
    margin-bottom: 5%;
}

.carroussel_images_videos_produits {
    display: grid;
    grid-template-columns: 15% 80%;
    gap: 5%;
}

div#carrousselProduct {
    overflow-y: scroll;
    scrollbar-width: none;
}

.carroussel_images_videos_produits {
    display: grid;
    grid-template-columns: 15% 80%;
    gap: 5%;
    grid-template-areas:
        "miniatures principal";
}

/* Associe les zones */
.miniatures_carroussel {
    grid-area: miniatures;
}
.image_principal_carroussel {
    grid-area: principal;
}

@media screen and (max-width: 1300px) {
    .carroussel_images_videos_produits {
        grid-template-columns: 1fr;
        grid-template-areas:
            "principal"
            "miniatures"; /* Inversion */
    }

    /* 📌 Transformation du carrousel en horizontal avec scroll */
    div#carrousselProduct {
        display: flex; /* On aligne en ligne */
        flex-direction: row;
        gap: 5%;
        overflow-x: auto; /* Scroll horizontal */
        white-space: nowrap; /* Empêche le retour à la ligne */
        scrollbar-width: none; /* Masque la scrollbar Firefox */
        -ms-overflow-style: none; /* Masque la scrollbar IE/Edge */
    }

    /* Masquer la barre de scroll sur Chrome/Safari */
    div#carrousselProduct::-webkit-scrollbar {
        display: none;
    }

    /* 📌 Les miniatures s'adaptent en largeur */
    .miniatures_carroussel .miniature-item {
        flex: 0 0 auto; /* Ne pas rétrécir les items */
        width: 25%; /* Ajuste la taille des miniatures */
    }
}