/*
 Theme Name:   Jewelry Store Child - Mon Petit Secret
 Theme URI:    https://mon-petit-secret.local
 Description:  Thème enfant de Jewelry Store pour la plateforme Mon Petit Secret - Revente de montres et bijoux aux professionnels
 Author:       Mon Petit Secret
 Author URI:   https://mon-petit-secret.local
 Template:     jewelry-store
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  jewelry-store-child
 Tags:         e-commerce, jewelry, watches, b2b, multilingual
*/

/* ==========================================================================
   PERSONNALISATIONS DU THÈME ENFANT
   Ajoutez vos styles personnalisés ci-dessous
   ========================================================================== */

/* Variables CSS personnalisées */
:root {
    --mps-gold: #d4af37;              /* Or principal */
    --mps-gold-light: #f4e4ba;        /* Or clair */
    --mps-black: #0d0d0d;             /* Noir profond */
    --mps-black-soft: #1a1a1a;        /* Noir élégant */
    --mps-white: #ffffff;             /* Blanc */
    --mps-silver: #c0c0c0;            /* Argent */
    
    /* Hauteur du slideshow - Modifiez cette valeur pour ajuster */
    --mps-slideshow-height: 500px;    /* Hauteur max du slideshow */
    --mps-slideshow-height-mobile: 350px; /* Hauteur sur mobile */
    /* Carousel produits page d'intro - hauteur uniforme des images (plus haute = images plus grandes avec contain) */
    --mps-carousel-img-height: 320px;
    --mps-carousel-img-height-mobile: 240px;
}

/* ==========================================================================
   HEADER - Désactiver le mode transparent (slideshow en dessous)
   ========================================================================== */

/* Désactiver le header transparent - le slideshow sera EN DESSOUS du menu */
.main_navigation.is_transparent:not(.sticky_fixed) {
    position: relative !important; /* Remplace absolute */
    background-color: var(--mps-black) !important;
}

/* Garder le style des liens en blanc */
.main_navigation.is_transparent:not(.sticky_fixed) .main_menu > li > a,
.main_navigation.is_transparent:not(.sticky_fixed) .main_menu_right > li > a {
    color: var(--mps-white) !important;
}

/* Liens hover/actif en doré */
.main_navigation.is_transparent:not(.sticky_fixed) .main_menu li:hover > a,
.main_navigation.is_transparent:not(.sticky_fixed) .main_menu li.current_page_item > a {
    color: var(--mps-gold) !important;
}

/* ==========================================================================
   SLIDESHOW - Limitation de la hauteur
   ========================================================================== */

/* Conteneur principal du slideshow */
.big_banner,
.big_banner .owl-carousel,
.big_banner .owl-stage-outer,
.big_banner .owl-stage,
.big_banner .owl-item,
.big_banner .banner {
    max-height: var(--mps-slideshow-height);
    overflow: hidden;
}

/* Images du slideshow */
.big_banner .owl-carousel .owl-item img,
.big_banner .banner img,
.big_banner img {
    max-height: var(--mps-slideshow-height);
    width: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Hauteur sur tablette */
@media screen and (max-width: 992px) {
    .big_banner,
    .big_banner .owl-carousel,
    .big_banner .owl-stage-outer,
    .big_banner .owl-stage,
    .big_banner .owl-item,
    .big_banner .banner {
        max-height: calc(var(--mps-slideshow-height) * 0.8);
    }
    
    .big_banner .owl-carousel .owl-item img,
    .big_banner .banner img,
    .big_banner img {
        max-height: calc(var(--mps-slideshow-height) * 0.8);
    }
}

/* Hauteur sur mobile */
@media screen and (max-width: 768px) {
    .big_banner,
    .big_banner .owl-carousel,
    .big_banner .owl-stage-outer,
    .big_banner .owl-stage,
    .big_banner .owl-item,
    .big_banner .banner {
        max-height: var(--mps-slideshow-height-mobile);
    }
    
    .big_banner .owl-carousel .owl-item img,
    .big_banner .banner img,
    .big_banner img {
        max-height: var(--mps-slideshow-height-mobile);
        min-height: var(--mps-slideshow-height-mobile);
    }
}

/* ==========================================================================
   STICKY HEADER - Fond Noir, Texte Blanc & Doré
   ========================================================================== */

/* Sticky Header - Fond noir */
.sticky_fixed {
    background-color: var(--mps-black) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

/* Navigation sticky - Liens en blanc */
.sticky_fixed .main_menu > li > a,
.sticky_fixed .main_menu_right > li > a,
.main_navigation.sticky_fixed .main_menu > li > a,
.main_navigation.sticky_fixed .main_menu_right > li > a {
    color: var(--mps-white) !important;
}

/* Navigation sticky - Hover et actif en doré */
.sticky_fixed .main_menu li:hover > a,
.sticky_fixed .main_menu li:focus > a,
.sticky_fixed .main_menu li.current_page_item > a,
.sticky_fixed .main_menu li.current-menu-item > a,
.sticky_fixed .main_menu li:focus-within > a,
.sticky_fixed .main_menu_right li:hover > a,
.sticky_fixed .main_menu_right li:focus > a,
.main_navigation.sticky_fixed .main_menu li:hover > a,
.main_navigation.sticky_fixed .main_menu li:focus > a,
.main_navigation.sticky_fixed .main_menu li.current_page_item > a,
.main_navigation.sticky_fixed .main_menu li.current-menu-item > a {
    color: var(--mps-gold) !important;
}

/* Logo sticky en blanc/visible */
.sticky_fixed .header_logo a,
.sticky_fixed .custom-logo-link,
.main_navigation.sticky_fixed .header_logo a,
.main_navigation.sticky_fixed .custom-logo-link {
    color: var(--mps-white) !important;
}

/* Titre du site en doré dans sticky */
.sticky_fixed .header_logo .site-title a,
.main_navigation.sticky_fixed .header_logo .site-title a {
    color: var(--mps-gold) !important;
}

/* Icônes sticky (panier, etc.) en blanc */
.sticky_fixed .main_menu_right > li > a,
.sticky_fixed .main_menu_right > li > a i,
.main_navigation.sticky_fixed .main_menu_right > li > a {
    color: var(--mps-white) !important;
}

/* Icônes sticky hover en doré */
.sticky_fixed .main_menu_right > li:hover > a,
.sticky_fixed .main_menu_right > li:hover > a i,
.main_navigation.sticky_fixed .main_menu_right > li:hover > a {
    color: var(--mps-gold) !important;
}

/* Sous-menus sticky */
.sticky_fixed .main_menu ul.sub-menu,
.main_navigation.sticky_fixed .main_menu ul.sub-menu {
    background-color: var(--mps-black-soft);
    border-top: 2px solid var(--mps-gold);
}

.sticky_fixed .main_menu ul.sub-menu li a,
.main_navigation.sticky_fixed .main_menu ul.sub-menu li a {
    color: var(--mps-white) !important;
}

.sticky_fixed .main_menu ul.sub-menu li:hover > a,
.sticky_fixed .main_menu ul.sub-menu li:focus > a,
.main_navigation.sticky_fixed .main_menu ul.sub-menu li:hover > a {
    color: var(--mps-gold) !important;
    background-color: rgba(212, 175, 55, 0.1);
}

/* Mobile sticky header */
.mobile-menus.sticky_fixed {
    background-color: var(--mps-black) !important;
}

.mobile-menus.sticky_fixed .mobile-menu-inner a,
.mobile-menus.sticky_fixed .mobile-menu-btn span {
    color: var(--mps-white) !important;
}

/* ==========================================================================
   MENU MOBILE - Masquage barre + panneau hors écran (override parent)
   ========================================================================== */

/* Masquer toute la barre mobile (logo + hamburger) sur les petits écrans */
@media (max-width: 767px) {
    .mobile-menus {
        display: none !important;
    }
}

/* Panneau du menu : rester entièrement hors écran quand fermé (évite débordement) */
.mobile-menu-container {
    left: min(-100%, -440px);
    overflow: hidden;
}

.mobile-menu-container.active {
    overflow: visible;
}

/* Contenu du panneau masqué tant que le menu n'est pas ouvert */
.mobile-menu-container-inner {
    visibility: hidden;
}

.mobile-menu-container.active .mobile-menu-container-inner {
    visibility: visible;
}

/* ==========================================================================
   DÉSACTIVER LES ANIMATIONS SUR LES PRODUITS
   ========================================================================== */

/* Désactiver uniquement les animations WOW.js (fadeIn, etc.) sur les produits */
.woocommerce ul.products li.product.wow,
.woocommerce ul.products li.product.animated {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    animation-name: none !important;
    -webkit-animation-name: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ==========================================================================
   DÉSACTIVER LES EFFETS DE MOUVEMENT SUR LES IMAGES DES PRODUITS
   ========================================================================== */

/* Désactiver le zoom et la transition sur les images de produits */
.woocommerce ul.products li.product .product_thumbnail img,
.product_thumbnail img {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
}

/* Désactiver le zoom au survol */
.woocommerce ul.products li.product .product_single:hover .product_thumbnail img,
.woocommerce ul.products li.product .product_single:focus-within .product_thumbnail img,
.product_single:hover .product_thumbnail img,
.product_single:focus-within .product_thumbnail img {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    scale: 1 !important;
}

/* Désactiver l'effet de glissement de l'image secondaire */
.woocommerce ul.products li.product .product_thumbnail .product_single_effect_img,
.product_thumbnail .product_single_effect_img {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transition-delay: 0 !important;
    -webkit-transition-delay: 0 !important;
    -moz-transition-delay: 0 !important;
}

/* Désactiver l'effet au survol de l'image secondaire */
.woocommerce ul.products li.product .product_single:hover .product_thumbnail .product_single_effect_img,
.woocommerce ul.products li.product .product_single:focus-within .product_thumbnail .product_single_effect_img,
.product_single:hover .product_thumbnail .product_single_effect_img,
.product_single:focus-within .product_thumbnail .product_single_effect_img {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transition-delay: 0 !important;
    -webkit-transition-delay: 0 !important;
    -moz-transition-delay: 0 !important;
}

/* ==========================================================================
   CARROUSEL PRODUITS PAGE D'INTRO - Images à hauteur uniforme
   ========================================================================== */

/* Chaîne pleine largeur : item > product_single > product_thumbnail > a remplissent la cellule (évite liens étroits qui cachent les côtés) */
#shop.shop_section .products .owl-item .item,
#shop.shop_section #shop_slider .owl-item .item,
.section.shop_section #shop_slider .owl-item .item {
    width: 100%;
    min-width: 0;
}

#shop.shop_section .products .product_single,
#shop.shop_section #shop_slider .product_single,
.section.shop_section #shop_slider .product_single {
    width: 100%;
    min-width: 0;
}

#shop.shop_section .products .product_thumbnail,
.section.shop_section #shop_slider .product_thumbnail {
    width: 100% !important;
    min-width: 0;
    height: var(--mps-carousel-img-height);
    min-height: var(--mps-carousel-img-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* Ne garder qu'un seul lien pleine largeur : masquer le lien "effet" et tout lien sans image */
#shop.shop_section .products .product_thumbnail a:has(.product_single_effect_img),
.section.shop_section #shop_slider .product_thumbnail a:has(.product_single_effect_img),
#shop.shop_section .products .product_thumbnail a:not(:has(img)),
.section.shop_section #shop_slider .product_thumbnail a:not(:has(img)) {
    display: none !important;
}

#shop.shop_section .products .product_thumbnail a,
.section.shop_section #shop_slider .product_thumbnail a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    min-height: var(--mps-carousel-img-height);
}

/* Image entière visible (contain) : pas de coupure en hauteur ni en largeur */
#shop.shop_section .products .product_thumbnail img,
#shop.shop_section .products .product_thumbnail .product_single_effect_img,
.section.shop_section #shop_slider .product_thumbnail img,
.section.shop_section #shop_slider .product_thumbnail .product_single_effect_img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
}

@media screen and (max-width: 768px) {
    #shop.shop_section .products .product_thumbnail,
    .section.shop_section #shop_slider .product_thumbnail {
        height: var(--mps-carousel-img-height-mobile);
        min-height: var(--mps-carousel-img-height-mobile);
    }
    #shop.shop_section .products .product_thumbnail a,
    .section.shop_section #shop_slider .product_thumbnail a {
        min-height: var(--mps-carousel-img-height-mobile);
    }
}

/* Carousel : supprimer l'image en double au survol et tous les effets hover */
#shop.shop_section .product_thumbnail .product_single_effect_img,
.section.shop_section #shop_slider .product_thumbnail .product_single_effect_img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#shop.shop_section .product_single:hover .product_thumbnail img,
#shop.shop_section .product_single:focus-within .product_thumbnail img,
#shop.shop_section .product_single:hover .product_thumbnail .product_single_effect_img,
#shop.shop_section .product_single:focus-within .product_thumbnail .product_single_effect_img,
.section.shop_section #shop_slider .product_single:hover .product_thumbnail img,
.section.shop_section #shop_slider .product_single:focus-within .product_thumbnail img,
.section.shop_section #shop_slider .product_single:hover .product_thumbnail .product_single_effect_img,
.section.shop_section #shop_slider .product_single:focus-within .product_thumbnail .product_single_effect_img {
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
}

#shop.shop_section .product_thumbnail img,
.section.shop_section #shop_slider .product_thumbnail img {
    transition: none !important;
}

/* ==========================================================================
   AUTRES PERSONNALISATIONS
   ========================================================================== */

/* Boutons avec style doré */
.btn-primary,
.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
    background-color: var(--mps-gold);
    color: var(--mps-black);
    border: none;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: var(--mps-gold-light);
    color: var(--mps-black);
}

/* Personnalisations pour la plateforme B2B */
.product-price {
    color: var(--mps-gold);
    font-weight: 600;
}

/* ==========================================================================
   MENU - Icône Home (remplace le texte par une icône maison)
   ========================================================================== */

/* 
   IMPORTANT: Pour utiliser l'icône Home, vous devez :
   1. Créer un menu WordPress (Apparence > Menus)
   2. Ajouter la page "Home" au menu
   3. Ajouter la classe CSS "menu-home-icon" à cet élément de menu
   
   OU utiliser le sélecteur ci-dessous pour la page avec le slug "home"
*/

/* Cibler spécifiquement le lien Home par son URL exacte */
.main_menu > li.menu-item-home > a,
.main_menu > li > a[href="https://mon-petit-secret.local/"],
.main_menu > li > a[href$="/home/"],
.main_menu > li.page-item-home > a,
.main_menu > li.menu-home-icon > a {
    font-size: 0 !important; /* Cache le texte */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

/* Afficher l'icône maison */
.main_menu > li.menu-item-home > a::before,
.main_menu > li > a[href="https://mon-petit-secret.local/"]::before,
.main_menu > li > a[href$="/home/"]::before,
.main_menu > li.page-item-home > a::before,
.main_menu > li.menu-home-icon > a::before {
    font-family: 'FontAwesome' !important;
    content: '\f015' !important; /* Icône maison Font Awesome */
    font-size: 18px !important;
    font-weight: normal;
}

/* Icône Home en doré quand actif ou hover */
.main_menu > li.menu-item-home > a:hover::before,
.main_menu > li.menu-item-home.current-menu-item > a::before,
.main_menu > li > a[href="https://mon-petit-secret.local/"]:hover::before,
.main_menu > li.current_page_item > a[href="https://mon-petit-secret.local/"]::before,
.main_menu > li.menu-home-icon > a:hover::before,
.main_menu > li.menu-home-icon.current-menu-item > a::before {
    color: var(--mps-gold) !important;
}

/* ==========================================================================
   SECTION SERVICES (NASZE ZALETY) - Icônes à gauche des titres
   Les styles principaux sont dans le mu-plugin mps-service-layout.php
   ========================================================================== */

/* ==========================================================================
   SOUS-MENUS EN 2 COLONNES - Menu Marki (Marques)
   ========================================================================== */

/* VERSION LARGE - Cibler les ID de menu spécifiques */
#menu-item-182 > ul,
#menu-item-182 > .sub-menu,
ul.main_menu > li#menu-item-182 > ul,
.main_menu > li#menu-item-182 > ul,
.main_menu > li.menu-2-colonnes > ul,
.main_menu > li.menu-item-182 > ul {
    min-width: 420px !important;
    max-width: 420px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 0 !important;
    padding: 0 !important;
}

/* Ajustement des éléments dans la grille */
#menu-item-182 > ul > li,
#menu-item-182 > .sub-menu > li,
ul.main_menu > li#menu-item-182 > ul > li,
.main_menu > li#menu-item-182 > ul > li,
.main_menu > li.menu-2-colonnes > ul > li,
.main_menu > li.menu-item-182 > ul > li {
    display: block !important;
    border-top: 1px solid var(--bs-gray-200) !important;
    border-right: 1px solid var(--bs-gray-200) !important;
    width: 100% !important;
    float: none !important;
}

/* Supprimer la bordure droite sur la 2ème colonne */
#menu-item-182 > ul > li:nth-child(2n),
#menu-item-182 > .sub-menu > li:nth-child(2n),
ul.main_menu > li#menu-item-182 > ul > li:nth-child(2n),
.main_menu > li#menu-item-182 > ul > li:nth-child(2n),
.main_menu > li.menu-2-colonnes > ul > li:nth-child(2n),
.main_menu > li.menu-item-182 > ul > li:nth-child(2n) {
    border-right: none !important;
}

/* Première ligne sans bordure supérieure */
#menu-item-182 > ul > li:nth-child(1),
#menu-item-182 > ul > li:nth-child(2),
#menu-item-182 > .sub-menu > li:nth-child(1),
#menu-item-182 > .sub-menu > li:nth-child(2),
ul.main_menu > li#menu-item-182 > ul > li:nth-child(1),
ul.main_menu > li#menu-item-182 > ul > li:nth-child(2),
.main_menu > li#menu-item-182 > ul > li:nth-child(1),
.main_menu > li#menu-item-182 > ul > li:nth-child(2),
.main_menu > li.menu-2-colonnes > ul > li:nth-child(1),
.main_menu > li.menu-2-colonnes > ul > li:nth-child(2),
.main_menu > li.menu-item-182 > ul > li:nth-child(1),
.main_menu > li.menu-item-182 > ul > li:nth-child(2) {
    border-top: none !important;
}