/*
Theme Name: Elementra Child Theme
Template: elementra
Theme URI: https://elementra.themerex.net/
Description: Elementra Child Theme
Author: ThemeREX
Author URI: https://themerex.net/
Version: 1.0
Tested up to: 6.7
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, e-commerce, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
Text Domain: elementra
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ *

/* 1. Classe Universelle pour le conteneur */
.mc4wp-form {
    width: 100% !important;
}

/* 2. Cible la structure interne du formulaire */
.mc4wp-form-fields {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
}

/* 3. Force la transparence et la bordure blanche sur les champs */
.mc4wp-form input[type="email"], 
.mc4wp-form input[type="text"] {
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    border-radius: 0px !important;
    padding: 12px 15px !important;
    height: 50px !important;
    flex: 1 !important;
}

/* 4. Force le style du bouton (Mauve profond) */
.mc4wp-form input[type="submit"] {
    background-color: #3D1152 !important; /* Votre mauve */
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important; /* Effet pilule */
    padding: 0 30px !important;
    height: 50px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* 5. Ajustement automatique pour mobile */
@media (max-width: 768px) {
    .mc4wp-form-fields {
        flex-direction: column !important;
    }
    .mc4wp-form input {
        width: 100% !important;
    }
}

/* 1. RESET DU CONTENEUR PARENT */
.related.products {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important; /* Largeur max de ton site */
    margin: 100px auto 0 !important; /* Espace AVANT le titre + centrage */
    padding: 0 20px !important;
    clear: both !important;
}

/* 2. TITRE SOUVERAIN (TOUTE LA LARGEUR) */
.related.products h2 {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 50px !important;
    padding: 0 !important;
    text-align: left !important;
}

/* 3. LA GRILLE (OUT LE SYSTÈME DE COLONNES DU THÈME) */
.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 colonnes égales */
    gap: 30px !important; /* Espace entre les boîtes */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 4. DESIGN DES CARTES PRODUITS */
.related.products ul.products li.product {
    background: #ffffff !important;
    padding: 30px 20px !important; /* Plus d'air à l'intérieur */
    border-radius: 15px !important;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important; /* Force l'étalement dans la colonne */
    margin: 0 !important; /* Supprime les marges du thème qui décalent tout */
    float: none !important; /* Tue le flottement qui casse l'alignement */
}

/* Ajustement de l'image pour qu'elle soit centrée et belle */
.related.products ul.products li.product img {
    margin: 0 auto 20px !important;
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

/* 5. RESPONSIVE (TABLETTE 2 / MOBILE 1) */
@media (max-width: 1024px) {
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .related.products ul.products {
        grid-template-columns: 1fr !important;
    }
}
/* --- FORCE LA SÉPARATION DES LANGUES SUR MOBILE --- */
@media (max-width: 1024px) {
    /* 1. On cache systématiquement la version anglaise par défaut */
    [id*="header-en"], [id*="footer-en"], [id*="menu-mobile-en"], [id*="mon-footer-en"] {
        display: none !important;
    }

    /* 2. SI on est sur une page anglaise (URL contient /en/ ou lang="en") */
    html[lang*="en"] [id*="header-fr"], 
    html[lang*="en"] [id*="mon-footer-fr"], 
    html[lang*="en"] [id*="menu-mobile-fr"] {
        display: none !important;
    }

    html[lang*="en"] [id*="header-en"], 
    html[lang*="en"] [id*="mon-footer-en"], 
    html[lang*="en"] [id*="menu-mobile-en"] {
        display: block !important;
    }
}

/* --- 1. SI LA PAGE EST EN ANGLAIS (Détecté par Polylang) --- */
html[lang*="en"] #header-fr, 
html[lang*="en"] #mon-footer-fr,
html[lang*="en"] .header-fr { 
    display: none !important; 
}

/* --- 2. SI LA PAGE EST EN FRANÇAIS --- */
html:not([lang*="en"]) #header-en, 
html:not([lang*="en"]) #mon-footer-en,
html:not([lang*="en"]) .header-en { 
    display: none !important; 
}

/* --- 3. RÉDUIRE LES ICÔNES SUR MOBILE --- */
@media (max-width: 767px) {
    .sc_layouts_item_icon, 
    .socials_item .socials_icon,
    .sc_layouts_cart_icon,
    .elementor-icon {
        font-size: 16px !important; /* Taille réduite pour mobile */
    }
}

/* --- TRADUCTION PAR CIBLE URL (INFAILLIBLE) --- */

/* 1. On cible le lien de l'accueil dans le menu mobile */
.menu_mobile_inner .menu-item-home > a,
.menu_mobile_inner a[href*="merveillesdesmondes.com"],
.sc_layouts_menu_nav > li:first-child > a {
    position: relative;
    color: transparent !important; /* On rend le mot "ACCUEIL" invisible */
    font-size: 0 !important;
}

/* 2. On réinjecte le mot selon la langue détectée par le navigateur */
html[lang*="en"] .menu_mobile_inner .menu-item-home > a:before,
html[lang*="en"] .menu_mobile_inner a[href*="merveillesdesmondes.com"]:before,
html[lang*="en"] .sc_layouts_menu_nav > li:first-child > a:before {
    content: "HOME" !important; /* Le mot anglais */
    color: #000000 !important;  /* Mets ta couleur de texte ici */
    font-size: 14px !important; /* Taille normale */
    visibility: visible;
    display: inline-block;
}

/* On garde le mot ACCUEIL pour la version française au cas où */
html[lang*="fr"] .menu_mobile_inner .menu-item-home > a:before {
    content: "ACCUEIL" !important;
    color: #000000 !important;
    font-size: 14px !important;
    visibility: visible;
}


/* Nettoyage du bouton orange par défaut du thème */
.custom-search-wrapper button.custom-search-btn {
    background-color: #2c2c2c !important; /* Fond noir/brun pour fitter avec le logo */
    border-radius: 0px !important;       /* Carré pour un look moderne */
    color: #ffffff !important;           /* Texte blanc */
    padding: 10px 25px !important;
    height: auto !important;
    width: auto !important;
    min-width: 120px !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    margin: 0 !important;
}

/* Style du conteneur avec la ligne */
.custom-search-wrapper {
    display: flex !important;
    align-items: center !important;
    border-bottom: 2px solid #2c2c2c !important; /* Voici ta ligne ! */
    background: transparent !important;
    padding-bottom: 0px !important;
    margin-bottom: 25px !important;
}

/* Style du champ de texte */
.custom-line-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 12px 10px 12px 0 !important;
    flex-grow: 1 !important;
    font-size: 14px !important;
    color: #2c2c2c !important;
    text-transform: uppercase !important;
}

/* Petit ajustement pour le survol */
.custom-search-wrapper button.custom-search-btn:hover {
    background-color: #555555 !important;
    cursor: pointer !important;
}

<style>

/* 1. Réduire la largeur du conteneur du menu déroulant */
.wc-block-product-categories__dropdown {
    width: 80% !important; /* On réduit pour laisser de la place à droite */
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 2. Forcer le select à l'intérieur à ne pas dépasser */
.wc-block-product-categories__dropdown select {
    width: 100% !important; 
}

/* 3. Forcer le bouton à se placer dans les 20% restants */
.wc-block-product-categories__button {
    width: 18% !important; /* Un peu moins de 20% pour la marge */
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 2% !important;
    padding: 10px 5px !important;
    background-color: #f19066 !important;
}

/* 4. On empêche le parent de forcer un retour à la ligne */
.wp-block-woocommerce-product-categories {
    white-space: nowrap !important; /* Empêche le bouton de tomber en dessous */
}