/*
Theme Name: Art Mourier
Theme URI: https://artmourier.com
Description: ART Mourier theme by Christophe ROCHE (Alpilles DESIGN)
Author: Alpilles DESIGN
Author URI: https://alpillesdesign.com
Template: hello-elementor
Version: 2.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: art-mourier
Availability: This theme is a proprietary development and is not available for download or purchase. Any unauthorized use, reproduction, or distribution is strictly prohibited.
*/

/* -------------------------------------------------- */

/* Espacement entre une liste et le paragraphe suivant */
ul + p {
    margin-top: 1em; /* Ajoute une marge en haut du paragraphe suivant */
}

/* -------------------------------------------------- */

/* Correction de l'affichage des colonnes pour notre widget uniquement */
.elementor-widget-artiste_oeuvres .woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.elementor-widget-artiste_oeuvres .woocommerce ul.products li.product {
    margin: 0;
    padding: 15px;
    float: none !important;
}

/* 2 colonnes */
.elementor-widget-artiste_oeuvres .woocommerce.columns-2 ul.products li.product {
    width: 50% !important;
    flex: 0 0 50%;
}

/* 3 colonnes */
.elementor-widget-artiste_oeuvres .woocommerce.columns-3 ul.products li.product {
    width: 33.333% !important;
    flex: 0 0 33.333%;
}

/* 4 colonnes */
.elementor-widget-artiste_oeuvres .woocommerce.columns-4 ul.products li.product {
    width: 25% !important;
    flex: 0 0 25%;
}

h2 {
    font-size: 50px;
}

p {
    font-size: 16px;
}



/* ----------------------------------------------------------
 * SINGLE PRODUCT - Modification de l'onglet des attributs WC
 * ----------------------------------------------------------
 */

.custom-attributes p {
    margin: 0;
    padding: 2px 0;
    font-weight: normal;
}

.custom-attributes strong {
    min-width: 0px;
    display: inline-block;
    font-weight: bold;
}

/* Correction de l'alignement du contenu de l'onglet */
.woocommerce-tabs .wc-tab {
    padding-left: 0 !important;
    margin-left: 0 !important;
    padding-top: 10px !important;
    margin-top: 0 !important;
}



/* --------------------------------------------------
 * Modification de l'affichage de l'image produit
 * --------------------------------------------------
 */

/* Styles de base pour la galerie */
.woocommerce-product-gallery {
    width: 100% !important;
    background-color: red !important; /* fond qui n'est pas utilisé il faudrait une valeur différente de 0 dans (.flex-viewport {margin-bottom: 0 !important;}) */
    position: relative !important;
}


/* Conteneur des miniatures */
.woocommerce div.product div.images .flex-control-thumbs {
    background-color: #E9E8E6;
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: 0px !important;
    position: static !important;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 25% !important;
    padding: 0px !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Viewport principale */
.flex-viewport {
    overflow: hidden !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Wrapper principal */
.woocommerce-product-gallery__wrapper {
    transform: none !important;
    transition: none !important;
    width: 100% !important;
}

/* Slide de la galerie avec padding de 15px sur tous les côtés */
/* La hauteur sera fixée via les media queries */
.woocommerce-product-gallery__image {
    position: relative !important;
    width: 100% !important;
    padding: 15px !important;       /* Rebord de 15px partout */
    box-sizing: border-box !important;
    background-color: #FFFFFF !important; /* Rebord en blanc */
    /* On retire le flex centering ici pour utiliser l'absolu */
}

/* Centrage absolu de l'image à l'intérieur du conteneur */
.woocommerce-product-gallery__image img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
    max-width: calc(100% - 30px) !important;  /* 15px de marge à gauche et à droite */
    max-height: calc(100% - 30px) !important; /* 15px de marge en haut et en bas */
    width: auto !important;
    height: auto !important;
    display: block !important;
}


/* Media Queries */

/* Mobile (jusqu'à 767px) */
@media screen and (max-width: 767px) {
    /* Cache les miniatures */
    .woocommerce div.product div.images .flex-control-thumbs {
        display: none !important;
    }
    
    /* Conteneur principal */
    .woocommerce div.product div.images {
        margin-bottom: 2em;
        overflow: hidden !important;
    }
    
    .woocommerce-product-gallery {
        opacity: 1 !important;
    }
    
    /* Hauteur fixe pour mobile */
    .flex-viewport,
    .woocommerce-product-gallery__image {
        height: 350px !important;
    }
}

/* Tablette (768px à 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .flex-viewport,
    .woocommerce-product-gallery__image {
        height: 450px !important;
    }
}

/* Desktop (1024px et plus) */
@media screen and (min-width: 1024px) {
    .flex-viewport,
    .woocommerce-product-gallery__image {
        height: 595px !important;
    }
}

/* Flèches de navigation */
.woocommerce-product-gallery .flex-direction-nav {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    width: 100% !important;
    z-index: 10 !important;
}

.woocommerce-product-gallery .flex-direction-nav a {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Affichage d'une seule image à la fois */
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(.flex-active-slide) {
    display: none !important;
}

/* Miniatures */
.woocommerce div.product div.images .flex-control-thumbs li img {
    opacity: 0.6;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
    opacity: 1;
}