/* ========================================================================== */
/* MRHBAZHNI – WooCommerce Product Page (Divi Theme Builder)                 */
/* ========================================================================== */

/* Variables (Rappel - Mieux vaut s'assurer que style.css est chargé avant) */
:root {
    --mw-blue-gray: #8D99AE;
    --mw-navy: #2B2D42;
    --mw-light-gray: #EDF2F4;
    --mw-red: #EF233C;
    --mw-dark-red: #D90429;
    --mw-white: #FFFFFF;
    --mw-black: #000000;
}

:root {
    /* ... autres variables ... */
    --mw-soft-white: #FAFAFB; /* Blanc presque pur, très légèrement bleuté/gris */
}

/* ========================================================================== */
/* SECTION 1 – HERO PRODUCT TEMPLATE (MRHBAZHNI)                              */
/* ========================================================================== */

/* ROW MAIN CONTAINER */
.mw-hero-container {
    padding: 45px 0 10px;
    width: 100%;
}

/* PRODUCT TITLE - Ciblage strict pour le module Titre du produit */
/* La classe mw-hero-title doit être appliquée au module Titre du produit */
.mw-hero-title h1,
.et_pb_module.mw-hero-title h1 {
    font-family: 'Playfair Display', serif !important;
    font-size: 54px !important;
    color: var(--mw-navy) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
}

/* CATEGORY LINE – Compatible Divi / WooCommerce */
/* La classe mw-hero-category doit être appliquée au module Catégories du produit ou Méta du produit */
.mw-hero-category {
    /* Style de base pour le conteneur */
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--mw-blue-gray) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    margin-bottom: 25px !important;
}

/* --- CORRECTION POUR LES PUCES (BULLETS) --- */
/* Cible les listes et éléments de liste potentiellement générés par Divi/WooCommerce */
.mw-hero-category ul,
.mw-hero-category li,
.mw-hero-category .et_pb_meta_values {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    /* Assure que l'élément li n'est pas un bloc s'il y a plusieurs catégories */
    display: inline !important; 
}

/* Masque les puces par défaut si elles existent */
.mw-hero-category li::before {
    content: none !important; 
}

/* Le pseudo-élément que vous souhaitez pour l'icône */
.mw-hero-category::before {
    content: "📍";
    font-size: 20px;
    margin-right: 5px;
    line-height: 1;
}

/* Assure que le lien de catégorie est stylisé */
.mw-hero-category a {
    color: var(--mw-blue-gray) !important;
    text-decoration: none !important;
    /* Divi peut ajouter un :hover. Ajustez au besoin */
}

/* BADGES */
/* La classe mw-hero-badges doit être appliquée à la ligne ou au conteneur des badges */
.mw-hero-badges {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap; /* Assure le responsive sur les petits écrans */
}

/* La classe mw-badge doit être appliquée à chaque module Texte ou span HTML dans le conteneur */
/* BADGES */
/* Utilise les variables définies dans style.css */
.mw-badge {
    /* Fond : Gris clair de votre palette */
    background: var(--mw-light-gray) !important; 
    
    padding: 8px 18px;
    border-radius: 14px;
    
    /* Bordure : Un gris/bleu clair pour mieux contraster */
    border: 1px solid var(--mw-blue-gray) !important; 
    
    font-size: 15px;
    
    /* Texte : Bleu marine foncé de votre palette */
    color: var(--mw-navy) !important; 
    
    font-weight: 600;
    display: inline-block;
    line-height: 1; 
}


/* RESPONSIVE --------------------------------------------------------------- */
@media (max-width: 768px) {
    .mw-hero-title h1,
    .et_pb_module.mw-hero-title h1 {
        font-size: 38px !important;
    }
}

/* --- CORRECTION ULTIME DU POINT GRIS PERSISTANT --- */
/* Neutralise toute puce standard sur les listes et les éléments de liste */
.mw-hero-category ul,
.mw-hero-category li {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: block !important; /* Force l'affichage en bloc pour éviter les problèmes d'alignement */
}

/* Retire tout contenu généré (comme le point par défaut) */
.mw-hero-category li::before,
.mw-hero-category li::marker,
.mw-hero-category a::before {
    content: none !important;
}

/* S'assure que le contenu généré par votre propre CSS (le 📍) est prioritaire sur les autres */
/* (Ce sélecteur est déjà dans votre fichier, mais on le rappelle pour la clarté) */
.mw-hero-category::before {
    content: "📍" !important;
    margin-right: 5px !important;
}


/* ----------------------------- */
/* MRHBAZHNI – Modern WC Gallery */
/* ----------------------------- */

.woocommerce-product-gallery {
    position: relative;
}

/* Main image */
.woocommerce-product-gallery__wrapper img {
    border-radius: 12px;
    width: 100%;
    height: auto;
}

/* Thumbnails slider */
.flex-control-thumbs {
    margin-top: 15px !important;
    display: flex !important;
    gap: 12px;
}

/* Thumbnail images */
.flex-control-thumbs img {
    border-radius: 10px;
    height: 90px;
    width: 120px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.75;
    transition: 0.3s;
}

.flex-control-thumbs img:hover,
.flex-control-thumbs li.flex-active-slide img {
    opacity: 1;
}

/* Reduce spacing under WooCommerce gallery thumbnails */
.woocommerce div.product div.images .flex-control-thumbs {
    margin-top: 10px !important;
    gap: 10px !important; /* réduit l'espace horizontal */
}

.woocommerce div.product div.images .flex-control-thumbs li {
    padding: 0 !important; 
    margin: 0 5px !important; /* réduit l'espace entre chaque image */
}

.woocommerce div.product div.images .flex-control-thumbs {
    gap: 6px !important;
    margin-top: 5px !important;
}

/* Mobile : miniatures plus petites + scroll horizontal si besoin */
@media (max-width: 767px) {
    .single-product div.product div.images .flex-control-thumbs {
        gap: 8px;
        overflow-x: auto;
    }
    .single-product div.product div.images .flex-control-thumbs li {
        width: 68px;
        flex: 0 0 auto;
    }
}


/* -------------------------------------------------------
   ESPACEMENT HERO / GALLERY – MRHBAZHNI
   ------------------------------------------------------- */

/* Section 1 : Hero – on garde un padding bas léger */
.single-product .mw-hero-section {
    padding-top: 40px;          /* au cas où Divi l’ait réduit */
    padding-bottom: 32px;
}

/* Section 2 : Gallery – on coupe le grand espace en haut */
.single-product .mw-gallery-section {
    margin-top: 0;
    padding-top: 0;
}

/* Desktop : petit peu plus d’air sous le hero */
@media (min-width: 981px) {
    .single-product .mw-hero-section {
        padding-bottom: 40px;
    }
}

/* Mobile : espace plus compact */
@media (max-width: 767px) {
    .single-product .mw-hero-section {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .single-product .mw-gallery-section {
        padding-top: 8px;
    }
}

/* =======================================================================
   MODULE DESCRIPTION COURTE — mw-short-desc (Base)
   ======================================================================= */
.mw-short-desc p,
.mw-short-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    color: var(--mw-navy) !important; /* Couleur plus contrastée */
    max-width: 850px;
    margin-bottom: 40px !important;
}

/* Liste dans la description courte (si applicable) */
.mw-short-desc ul,
.mw-short-desc ol {
    margin-left: 20px;
    margin-bottom: 16px;
    color: var(--mw-navy);
}

/* ========================================================================== */
/* SECTION HIGHLIGHTS (Carte Latérale) - mw-highlights-section                */
/* ========================================================================== */
.mw-highlights-section {
    background: var(--mw-soft-white) !important; /* Fond gris clair */
    border: 1px solid #E5E5E5; /* Bordure légère au lieu du bord rouge */
    border-radius: 16px;
    padding: 30px 40px !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important; /* Plus d'espace sous le bloc */
}

/* Titre dans le bloc (le style doit être celui de la section) */
.mw-highlights-section h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 26px !important; /* Légèrement plus petit que le titre de section */
    color: var(--mw-navy) !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

/* Style de la liste */
.mw-highlights-section ul li {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px;
    line-height: 1.8;
    color: var(--mw-navy); /* Texte Marine */
    padding-left: 26px;
    margin-bottom: 12px;
}

/* Icone Bullet (Gardons le vert/rouge) */
.mw-highlights-section ul li::before {
    content: "✔";
    color: var(--mw-red) !important; /* Utilisation de la couleur Rouge pour attirer l'attention */
}

/* CORRECTION : FORCE LA SUPPRESSION DES PUCES PAR DÉFAUT DANS LES HIGHLIGHTS */
.mw-highlights-section ul,
.mw-highlights-section ol {
    list-style: none !important;
    padding-left: 0 !important;
}

/* S'assure que toutes les puces générées (même imbriquées) sont retirées */
.mw-highlights-section ul li,
.mw-highlights-section ul ul li {
    list-style: none !important;
    position: relative;
    padding-left: 26px !important; /* Espace pour la coche */
}

/* Retire le contenu généré par défaut pour une puce (si toujours là) */
.mw-highlights-section ul li::before {
    content: "✔" !important; /* Votre icône */
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 18px;
    color: var(--mw-red) !important; /* Votre couleur rouge */
    font-weight: bold;
}

/* ========================================================================== */
/* MODULE ITINERAIRE (Accordeon) - mw-itinerary                               */
/* ========================================================================== */

/* Style de l'Accordeon global */
.et_pb_module.et_pb_accordion.mw-itinerary {
    border: none !important;
}

/* Style du titre de chaque étape (Toggle) */
.mw-itinerary .et_pb_toggle_title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    color: var(--mw-navy) !important;
    padding: 18px 0 !important; /* Plus de padding vertical pour l'élégance */
}

/* Bordure de séparation propre entre les étapes */
.mw-itinerary .et_pb_toggle {
    margin-bottom: 0 !important;
    border-top: 1px solid var(--mw-light-gray) !important; /* Séparateur subtil */
    border-bottom: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

/* Contenu de chaque étape (fond légèrement différent) */
.mw-itinerary .et_pb_toggle_content {
    background-color: var(--mw-soft-white) !important; /* Fond gris clair pour le contenu ouvert */
    padding: 20px 30px !important;
    color: var(--mw-navy) !important;
    font-size: 16px;
    line-height: 1.6;
}

/* Ajout d'une ligne d'emphase sur l'étape active/ouverte */
.mw-itinerary .et_pb_toggle_open {
    border-left: 4px solid var(--mw-red) !important; /* Ligne rouge pour l'étape en cours */
    margin-left: -4px;
}

/* ========================================================================== */
/* LISTES (Inclus/Exclus/Extras) & MEETING POINT                             */
/* ========================================================================== */

/* Style général des listes (mw-list-section) */
.mw-list-section ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 0 40px 0 !important; /* Espacement après la liste */
}

.mw-list-section ul li {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px;
    line-height: 1.7;
    color: var(--mw-navy);
    position: relative;
    padding-left: 30px; 
    margin-bottom: 12px;
}

/* Meeting Point */
.mw-meeting-point p {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px;
    line-height: 1.6;
    color: var(--mw-navy);
    padding-left: 35px;
    position: relative;
}