/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Thème enfant Yavu
Author: Yavu Team
Author URI: https://lunette-perdue.fr
Template: hello-elementor
Version: 1.0.0
*/

/* Ajoute ton CSS personnalisé ici plus tard */

/* ==========================================================================
   YAVU - SYSTÈME DE DESIGN GLOBAL (MASTER SHEET)
   ========================================================================== */

:root {
    /* --- COULEURS --- */
    --yavu-green: #6dbf91;
    --yavu-green-hover: #5ea87f;
    --yavu-black: #000000;
    --yavu-white: #ffffff;
    --yavu-alert: #c62828;
    --yavu-success: #2e7d32;

    /* --- FORMES & BORDURES --- */
    --yavu-border-width: 3px;
    --yavu-border-thick: 4px; /* Pour les cartes épaisses */
    --yavu-radius-blob: 255px 15px 225px 15px / 15px 225px 15px 255px; /* Forme "Patate" */
    
    /* --- OMBRES --- */
    --yavu-shadow: 10px 10px 0px rgba(0,0,0,0.2);
    --yavu-shadow-hover: 14px 14px 0px rgba(0,0,0,0.3);
    --yavu-shadow-hard: 12px 12px 0px #000000; /* Ombre noire dure */
}

/* ==========================================================================
   1. GLOBAL & BACKGROUNDS
   ========================================================================== */

/* Fond à pois sur tout le site */
body {
    background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1.5px, transparent 1.5px);
    background-size: 25px 25px;
    background-color: #fdfdfd; 
}

/* ==========================================================================
   2. BOUTONS - STANDARD & AJOUT AU PANIER
   ========================================================================== */

/* 1. ON NETTOIE LE CONTENEUR (Bouton classique + Widget Panier) */
.elementor-widget-button.yavu-btn,
.elementor-widget-wc-add-to-cart.yavu-btn {
    background: transparent !important;
    background-color: transparent !important; /* Force la transparence */
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important; /* Empêche de prendre toute la largeur */
    margin: 0 !important;
}

.elementor-widget-button.yavu-btn .elementor-widget-container,
.elementor-widget-wc-add-to-cart.yavu-btn .elementor-widget-container {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. ON STYLISE UNIQUEMENT LE LIEN (Le vrai bouton visible) */
/* On cible .elementor-button (standard) ET .add_to_cart_button (woo) */
.yavu-btn .elementor-button,
.yavu-btn .add_to_cart_button {
    /* Dimensions et Position */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    padding: 15px 30px !important;
    margin: 10px !important; /* Marge pour l'ombre */
    
    /* Style YAVU (État Normal) */
    background-color: var(--yavu-green) !important;
    color: var(--yavu-white) !important;
    border: 5px solid var(--yavu-black) !important;
    
    /* Forme */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    transform: rotate(-1deg);
    
    /* Ombre et Transition */
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease-in-out !important;
    
    /* Correctif Hauteur de ligne */
    line-height: 1 !important;
}

/* 3. L'ANIMATION AU SURVOL (HOVER) */
.yavu-btn .elementor-button:hover,
.yavu-btn .add_to_cart_button:hover {
    /* Changement de forme */
    border-radius: 20px 225px 15px 255px / 255px 15px 225px 15px !important;
    
    /* Mouvement */
    transform: rotate(1deg) scale(1.05) !important;
    
    /* Changement de couleur */
    border-color: var(--yavu-green) !important; 
    background-color: var(--yavu-white) !important;
    color: var(--yavu-green) !important;
    
    /* Ombre */
    box-shadow: 8px 8px 0px rgba(0,0,0,0.3) !important;
}

/* 4. PETIT FIX POUR L'ICÔNE PANIER (SVG) */
.yavu-btn .add_to_cart_button svg {
    fill: currentColor !important;
    margin-right: 10px !important; /* Espace entre icône et texte */
    width: 1em !important;
    height: 1em !important;
}

/* ==========================================================================
   VERSION BOUTON BLANC (.yavu-btn-white)
   ========================================================================== */

/* 1. ON NETTOIE LE CONTENEUR (Comme pour le bouton principal) */
.elementor-widget-button.yavu-btn-white {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
}

.elementor-widget-button.yavu-btn-white .elementor-widget-container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. LE BOUTON BLANC (Style par défaut) */
.yavu-btn-white .elementor-button {
    /* Structure & Dimensions */
    display: inline-flex !important;
    width: auto !important;
    padding: 15px 30px !important;
    margin: 10px !important;
    
    /* COULEURS */
    background-color: var(--yavu-white) !important;
    color: var(--yavu-green) !important;
    border: 5px solid var(--yavu-black) !important;
    
    /* Forme Yavu */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    transform: rotate(-1deg);
    
    /* Ombre */
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2) !important;
    
    /* Animation */
    transition: all 0.3s ease-in-out !important;
}

/* 3. L'ANIMATION AU SURVOL (HOVER) */
.yavu-btn-white .elementor-button:hover {
    /* Changement de forme */
    border-radius: 20px 225px 15px 255px / 255px 15px 225px 15px !important;
    transform: rotate(1deg) scale(1.05) !important;
    
    /* COULEURS AU SURVOL */
    /* Le bord devient blanc */
    border-color: var(--yavu-blanc) !important;
    /* Le texte devient blanc */
    color: var(--yavu-white) !important;
    /* Le fond devient vert */
    background-color: var(--yavu-green) !important;
    
    /* Ombre */
    box-shadow: 8px 8px 0px rgba(0,0,0,0.3) !important;
}

/* ==========================================================================
   3. CARTES & CONTENEURS
   ========================================================================== */

/* CARTE STANDARD (Blanche avec ombre noir) - Utiliser la classe: .yavu-card-white */
/* Description : Bordure verte épaisse, fond blanc, ombre noire */
.yavu-card-white {
    border: var(--yavu-border-thick) solid var(--yavu-green) !important;
    background-color: var(--yavu-white);
    border-radius: 15px 40px 10px 35px / 35px 10px 40px 15px;
    padding: 40px;
    transform: rotate(-0.5deg);
    box-shadow: var(--yavu-shadow-hard); /* Ombre noire dure */
    transition: all 0.3s ease;
}

.yavu-card-white:hover {
    transform: rotate(0.5deg) scale(1.01);
    border-radius: 40px 15px 35px 10px / 10px 35px 15px 40px;
    box-shadow: none !important;
}

/* CARTE VERTE - Utiliser la classe: .yavu-card-green */
/* Description : Bordure noire épaisse, fond vert, ombre verte */
.yavu-card-green {
    border: 5px solid var(--yavu-black) !important;
    background-color: var(--yavu-green) !important;
    border-radius: 15px 50px 10px 40px / 40px 10px 50px 15px !important;
    padding: 30px !important;
    margin-top: 20px !important;
    box-shadow: 10px 10px 0px var(--yavu-green) !important;
    
    transform: rotate(-1deg) !important;
    transition: all 0.3s ease !important;
}

.yavu-card-green:hover {
    /* La carte se redresse et grandit un peu */
    transform: rotate(1deg) scale(1.02) !important;
    box-shadow: 15px 15px 0px var(--yavu-green) !important;
}

/* CARTE OMBRE VERTE - Utiliser la classe: .yavu-card-green-shadow */
/* Description : Bordure noire, ombre verte douce */
.yavu-card-green-shadow {
    border: var(--yavu-border-width) solid var(--yavu-black);
    background-color: var(--yavu-white);
    border-radius: 15px 50px 10px 40px / 40px 10px 50px 15px !important;
    padding: 30px !important;
    transform: rotate(-1deg);
    box-shadow: 10px 10px 0px var(--yavu-green);
    margin-top: 20px;
    transition: all 0.3s ease;
}

.yavu-card-green-shadow:hover {
    transform: rotate(1deg) scale(1.02);
    box-shadow: 15px 15px 0px var(--yavu-green);
}

/* CARTE OMBRE ROUGE - Utiliser la classe: .yavu-card-red-shadow */
.yavu-card-red-shadow {
    border: var(--yavu-border-width) solid var(--yavu-black);
    background-color: var(--yavu-white);
    border-radius: 20px 50px 30px 60px / 50px 30px 60px 20px !important;
    padding: 50px 30px !important;
    transform: rotate(-1deg);
    box-shadow: 10px 10px 0px var(--yavu-alert);
    transition: all 0.3s ease;
}

.yavu-card-red-shadow:hover {
    transform: rotate(0deg) scale(1.01);
    box-shadow: 14px 14px 0px var(--yavu-alert);
}

/* ==========================================================================
   4. BULLES DE BD
   ========================================================================== */

/* BULLE AVEC QUEUE À DROITE - Utiliser la classe: .yavu-bubble-right */
.yavu-bubble-right {
    position: relative;
    border: 4px solid var(--yavu-green) !important;
    background-color: var(--yavu-white) !important;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    box-shadow: var(--yavu-shadow-hard) !important;
    padding: 35px 30px !important;
    margin: 15px;
    transform: rotate(-1deg);
    transition: all 0.3s ease;
    z-index: 1;
}

.yavu-bubble-right::after { /* Queue noire */
    content: ''; position: absolute; bottom: -24px; right: 40px; width: 0; height: 0;
    border-left: 20px solid transparent; border-right: 0px solid transparent;
    border-top: 25px solid var(--yavu-green); transform: rotate(-10deg);
}
.yavu-bubble-right::before { /* Cache blanc */
    content: ''; position: absolute; bottom: -15px; right: 43px; width: 0; height: 0;
    border-left: 14px solid transparent; border-right: 0px solid transparent;
    border-top: 18px solid var(--yavu-white); transform: rotate(-10deg); z-index: 1;
}

/* BULLE AVEC QUEUE À GAUCHE (Affinée) - Utiliser la classe: .yavu-bubble-left */
.yavu-bubble-left {
    position: relative;
    border: 4px solid var(--yavu-green) !important;
    background-color: var(--yavu-white) !important;
    border-radius: 20px 225px 30px 225px / 225px 30px 225px 20px !important;
    box-shadow: var(--yavu-shadow-hard) !important;
    padding: 35px 30px !important;
    margin-left: 30px !important; /* Marge pour la queue */
    transform: rotate(1deg);
    transition: all 0.3s ease;
    z-index: 1;
}
.yavu-bubble-left::before { /* Triangle Vert */
    content: ''; position: absolute; z-index: -1; top: 50px; left: -28px;
    width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent;
    border-right: 30px solid var(--yavu-green);
}
.yavu-bubble-left::after { /* Triangle Blanc */
    content: ''; position: absolute; z-index: 2; top: 54px; left: -4px;
    width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
    border-right: 26px solid var(--yavu-white);
}

/* ==========================================================================
   5. EFFETS DE TEXTE & DÉCORATION
   ========================================================================== */

/* EFFET "INVENTEUR" (Vieux papier) - Utiliser la classe: .yavu-note */
.yavu-note {
    background-color: #fdfbf7;
    border: 3px solid var(--yavu-black);
    border-radius: 5px 20px 5px 25px / 20px 5px 25px 5px;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.1);
    padding: 50px;
    margin: 20px auto;
}
.yavu-note p:first-of-type::first-letter {
    font-size: 3.5em; font-weight: bold; color: var(--yavu-green);
    float: left; line-height: 0.8; margin-right: 10px; font-family: serif;
}

/* EFFET CITATION (Guillemet géant style Tampon) - Utiliser la classe: .yavu-quote */
.yavu-quote {
    /* 1. La Boîte "Note" */
    position: relative; /* Indispensable pour placer l'icône */
    background-color: var(--yavu-white);
    border: var(--yavu-border-width) solid var(--yavu-black);
    
    /* Forme Yavu (irrégulière) */
    border-radius: 15px 255px 15px 225px / 225px 15px 225px 15px;
    
    /* Espace interne confortable */
    padding: 50px 30px 30px 30px; 
    
    /* Marge externe pour laisser la place au gros guillemet en haut */
    margin-top: 40px; 
    margin-bottom: 20px;
    
    /* L'ombre portée verte (Signature Yavu) */
    box-shadow: 10px 10px 0px var(--yavu-green);
    
    transition: transform 0.3s ease;
}

/* Effet interactif au survol */
.yavu-quote:hover {
    transform: scale(1.02) rotate(-1deg);
}

/* 2. Le Gros Guillemet Flottant (Le "Tampon") */
.yavu-quote::before {
    content: '“'; /* Le symbole du guillemet */
    
    /* Position : À cheval sur la bordure du haut */
    position: absolute;
    top: -40px; 
    left: 20px; 
    
    /* Le style du cercle */
    width: 60px;
    height: 60px;
    background-color: var(--yavu-black); /* Fond noir */
    color: var(--yavu-green); /* Guillemet vert fluo */
    
    /* Centrage */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Typographie du guillemet */
    font-family: serif; 
    font-size: 80px;
    line-height: 0; 
    padding-top: 30px; 
    
    /* Forme du cercle "patate" */
    border-radius: 50% 40% 60% 50%;
    /* Petit contour blanc pour le détacher de la ligne noire */
    border: var(--yavu-border-width) solid var(--yavu-white);
    
    z-index: 2;
}

/* 3. Style du texte à l'intérieur */
.yavu-quote blockquote, 
.yavu-quote p {
    font-family: inherit; 
    font-size: 1.2em; 
    font-style: italic;
    color: var(--yavu-black);
    line-height: 1.5em;
    margin: 0;
    z-index: 1;
}

/* 4. Style de l'auteur (Si tu utilises le widget Citation) */
.yavu-quote .elementor-blockquote__author, 
.yavu-quote cite {
    font-style: normal;
    font-weight: bold;
    color: var(--yavu-green); /* Auteur en vert */
    margin-top: 15px;
    display: block;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 1px;
}

/* BLOBS DE FOND (Taches vertes) - Utiliser: .yavu-blob-1, .yavu-blob-2, etc. */

/* 1. LE CONTENEUR (La Boîte) */
.yavu-blob-1, 
.yavu-blob-2, 
.yavu-blob-3 { 
    /* Force le conteneur à créer un contexte d'empilement */
    position: relative !important;
    z-index: 1 !important;
    
    /* INTERDIT à Elementor de cacher ce qui dépasse */
    overflow: visible !important; 
    
    /* Supprime tout fond qui pourrait cacher le blob */
    background-color: transparent !important;
    background-image: none !important;
}

/* 2. LE CONTENU (Texte, Titres, Images à l'intérieur) */
/* On force tout le contenu à passer DEVANT le blob */
.yavu-blob-1 > *, 
.yavu-blob-2 > *, 
.yavu-blob-3 > *,
.yavu-blob-1 .elementor-widget, 
.yavu-blob-2 .elementor-widget, 
.yavu-blob-3 .elementor-widget {
    position: relative !important;
    z-index: 5 !important; /* Z-index élevé pour être sûr d'être au-dessus */
}

/* 3. LE DESSIN DU BLOB (Le calque du milieu) */
.yavu-blob-1::before, 
.yavu-blob-2::before, 
.yavu-blob-3::before {
    content: '' !important; 
    position: absolute !important; 
    display: block !important;
    
    /* On le place entre le fond (0) et le texte (5) */
    z-index: 0 !important; 
    
    /* Couleur */
    background-color: rgba(109, 191, 145, 0.3) !important;
    pointer-events: none !important;
}

/* --- LES FORMES --- */

/* Forme 1 */
.yavu-blob-1::before {
    width: 90% !important; 
    height: 90% !important; 
    top: 5% !important; 
    left: 5% !important;
    border-radius: 64% 36% 27% 73% / 55% 58% 42% 45% !important; 
    transform: rotate(-5deg) !important;
}

/* Forme 2 */
.yavu-blob-2::before {
    width: 100% !important; 
    height: 90% !important; 
    top: 5% !important; 
    left: -5% !important;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important; 
    transform: rotate(10deg) !important;
}

/* Forme 3 */
.yavu-blob-3::before {
    width: 80% !important; 
    height: 80% !important; 
    top: 10% !important; 
    left: 10% !important;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% !important; 
    transform: rotate(15deg) !important;
}

/* Modificateur pour une section haute, à poser avec yavu-blob-1 : quand la section s'empile en
   colonne (tablette, téléphone), la tache pivotée dépasse sur les côtés et crée un défilement
   horizontal. Jusqu'à 1024 px, elle reste droite. */
@media (max-width: 1024px) {
    .yavu-blob-haut::before {
        transform: none !important;
    }
}

/* POLAROID - Utiliser la classe: .yavu-polaroid sur le widget IMAGE */
.yavu-polaroid img {
    border: 4px solid var(--yavu-black) !important;
    padding: 15px; background-color: var(--yavu-white);
    border-radius: 20px 225px 15px 255px / 255px 15px 225px 15px !important;
    transform: rotate(2deg);
    box-shadow: 12px 12px 0px rgba(0,0,0,0.2)!important;
    transition: all 0.3s ease;
}
.yavu-polaroid img:hover { transform: rotate(0deg) scale(1.02); }

/* DOODLES (Croix et Y) - Utiliser la classe: .yavu-doodle */
@media (min-width: 768px) {
    .yavu-doodle { position: relative; }
    /* Croix haut-gauche */
    .yavu-doodle::before {
        content: '+'; position: absolute; top: 20px; left: 20px;
        font-family: monospace; font-size: 40px; font-weight: bold; color: var(--yavu-green);
        transform: rotate(15deg); pointer-events: none;
    }
    /* Rond bas-droite */
	.yavu-doodle::after {
     content: '';
        position: absolute;
        bottom: 40px;
        right: 40px;
        width: 20px;
        height: 20px;
        border: 3px solid var(--yavu-black); /* Juste le contour */
        border-radius: 50% 40% 60% 50%; /* Rond irrégulier */
        transform: rotate(-10deg);
        pointer-events: none;
        background-repeat: no-repeat; background-size: contain; transform: rotate(15deg); pointer-events: none;
	}
}
/* ==========================================================================
   6. FORMULAIRE & BACKEND (PLUGIN INTEGRATION)
   ========================================================================== */

/* Layout Global Formulaire */
#yavu-finder-form-container {
    max-width: 800px; margin: 40px auto; padding: 30px 20px; background: transparent;
}
.yavu-search-form, #yavu-finder-form {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 15px; width: 100%;
}

/* GROUPE INPUT (Conteneur LUN- + Input) */
.yavu-input-group {
    display: flex; align-items: center; flex-grow: 1; height: 60px;
    background-color: var(--yavu-white);
    border: 3px solid var(--yavu-black);
    border-radius: 15px 255px 20px 25px / 255px 15px 25px 20px;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.1);
    padding: 0 20px; transition: all 0.3s ease; cursor: text;
}
.yavu-input-group:focus-within {
    border-color: var(--yavu-green); transform: scale(1.01);
}

/* Préfixe "LUN-" */
.yavu-prefix {
    font-family: var(--e-global-typography-text-font-family, sans-serif);
    font-weight: 700; font-size: 16px; color: var(--yavu-black);
    white-space: nowrap; margin-right: 2px; user-select: none; pointer-events: none;
}

/* Input Réel */
.yavu-input-field {
    flex-grow: 1; width: 100%; height: 100%;
    border: none !important; background: transparent !important; outline: none !important;
    padding: 0; margin: 0;
    font-family: var(--e-global-typography-text-font-family, sans-serif);
    font-weight: 700; font-size: 16px; color: #4a4a4a; text-transform: uppercase;
    -webkit-appearance: none; appearance: none;
}
.yavu-input-field::placeholder { color: #aaa; opacity: 1; }

/* Messages d'erreur/succès */
.error-message, .success-message {
    padding: 12px; margin-top: 15px; border-left: 4px solid; animation: slideIn 0.3s;
}
.error-message { background: #ffebee; color: #c62828; border-color: #c62828; }
.success-message { background: #e8f5e9; color: #2e7d32; border-color: #4CAF50; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   7. RESPONSIVE MOBILE - VERSION SANS LOUPE (PROPRE)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- 1. AJUSTEMENTS DES CARTES (Avec tes nouvelles classes) --- */
    .yavu-card-white,
    .yavu-card-green,
    .yavu-card-green-shadow,
    .yavu-card-red-shadow,
    .yavu-bubble-right,
    .yavu-bubble-left {
        padding: 25px 20px !important;
        /* On réduit un peu l'ombre sur mobile */
        box-shadow: 8px 8px 0px #000000 !important; 
        border-width: 3px !important;
    }
    
    /* Correction couleur ombre spécifique si besoin */
    .yavu-card-green-shadow { box-shadow: 8px 8px 0px var(--yavu-green) !important; }
    .yavu-card-red-shadow { box-shadow: 8px 8px 0px var(--yavu-alert) !important; }

    /* --- 2. SÉCURITÉ BOUTONS : TOUT RESTE NORMAL --- */
    
    /* On force TOUS les boutons à avoir une taille adaptée au texte */
    .yavu-btn,
    .yavu-btn .elementor-button,
    .yavu-btn-white .elementor-button,
    .elementor-widget-button .elementor-button,
    #submit-btn {
        width: auto !important;
        min-width: auto !important;
        padding: 15px 30px !important;
    }

    /* On force l'affichage du texte (Interdit de le cacher) */
    .yavu-btn-text,
    .elementor-button-text {
        display: inline-block !important;
    }

    /* On INTERDIT formellement toute icône/loupe après le bouton */
    .yavu-btn::after,
    .yavu-btn .elementor-button::after,
    .yavu-btn-white .elementor-button::after,
    .elementor-widget-button .elementor-button::after,
    #submit-btn::after {
        content: none !important;
        display: none !important;
        background-image: none !important;
    }
}

/* ==========================================================================
   8. PAGE MON COMPTE / CONNEXION (WooCommerce Style Yavu)
   ========================================================================== */

/* 1. LE CONTENEUR DU FORMULAIRE (La Carte) */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    border: var(--yavu-border-width) solid var(--yavu-black);
    background-color: var(--yavu-white);
    
    /* Forme irrégulière standard */
    border-radius: 15px 50px 10px 40px / 40px 10px 50px 15px;
    
    padding: 40px;
    box-shadow: var(--yavu-shadow);
    margin-bottom: 30px;
}

/* 2. LES CHAMPS DE SAISIE (Inputs) */
.woocommerce form .form-row input.input-text {
    border: var(--yavu-border-width) solid var(--yavu-black) !important;
    background-color: var(--yavu-white) !important;
    
    /* Forme irrégulière Input */
    border-radius: 10px 255px 20px 25px / 255px 15px 25px 20px !important;
    
    padding: 15px 20px !important;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
    min-height: 50px; /* Hauteur confortable */
    line-height: 1.5;
    transition: all 0.3s ease;
}

/* Focus : Quand on clique dans le champ */
.woocommerce form .form-row input.input-text:focus {
    border-color: var(--yavu-green) !important;
    outline: none;
    transform: scale(1.01);
}

/* 3. LES LABELS (Identifiant, Mot de passe) */
.woocommerce form .form-row label {
    font-family: var(--e-global-typography-text-font-family), sans-serif;
    font-weight: 800; /* Gras */
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 1px;
    color: var(--yavu-black);
    margin-bottom: 8px;
    display: block;
}

/* 4. LE BOUTON "SE CONNECTER" */
.woocommerce button.button.woocommerce-form-login__submit {
    /* On reprend le style .yavu-btn */
    background-color: var(--yavu-green) !important;
    color: var(--yavu-white) !important;
    border: 5px solid var(--yavu-black) !important;
    
    /* Forme "Patate" */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    
    font-weight: 800 !important;
    text-transform: uppercase;
    padding: 15px 30px !important;
    margin-top: 10px;
    
    transform: rotate(-1deg);
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    
    /* On évite qu'il prenne toute la largeur si on veut */
    width: auto; 
    display: inline-block;
}

/* Hover Bouton */
.woocommerce button.button.woocommerce-form-login__submit:hover {
    background-color: var(--yavu-green-hover) !important;
    border-color: var(--yavu-green) !important; /* Bordure verte au survol */
    transform: rotate(1deg) scale(1.05);
    box-shadow: 8px 8px 0px rgba(0,0,0,0.3);
}

/* 5. CHECKBOX "Se souvenir de moi" (Customisation légère) */
.woocommerce-form-login__rememberme {
    margin-top: 15px !important;
    display: flex;
    align-items: center;
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
    accent-color: var(--yavu-green); /* Met la case en vert quand cochée */
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}

/* 6. LIEN "Mot de passe perdu" */
.woocommerce-LostPassword a {
    color: var(--yavu-green);
    font-weight: bold;
    text-decoration: none;
    position: relative;
    top: 5px;
}
.woocommerce-LostPassword a:hover {
    text-decoration: underline;
    text-decoration-style: wavy; /* Petit soulignement vague fun */
}

/* ==========================================================================
   9. PAGE COMMANDE REÇUE
   ========================================================================== */

/* 1. LE MESSAGE "MERCI" (Bandeau vert) */
.woocommerce-order-received .woocommerce-notice {
    background-color: var(--yavu-green) !important;
    color: var(--yavu-white) !important;
    border: 3px solid var(--yavu-black) !important;
    /* Forme irrégulière */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    padding: 20px 30px !important;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2) !important;
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 40px !important;
}

/* 2. RÉSUMÉ DE COMMANDE (Liste : Numéro, Date, Email...) */
ul.woocommerce-order-overview {
    display: flex;
    justify-content: space-between;
    background-color: var(--yavu-white);
    border: 3px solid var(--yavu-black);
    /* Forme carte */
    border-radius: 15px 50px 10px 40px / 40px 10px 50px 15px;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.1);
    padding: 30px !important;
    list-style: none;
    margin-bottom: 50px !important;
}

ul.woocommerce-order-overview li {
    border-right: 2px dashed #ddd; /* Remplacer la bordure pointillée */
    padding: 0 20px;
    flex-grow: 1;
    text-transform: uppercase;
    font-size: 0.9em;
}

ul.woocommerce-order-overview li:last-child {
    border-right: none;
}

ul.woocommerce-order-overview li strong {
    display: block;
    font-size: 1.2em;
    color: var(--yavu-black);
    margin-top: 5px;
}

/* --- 3. TABLEAU "DÉTAILS DE LA COMMANDE" --- */

.woocommerce-table--order-details {
    /* LA BOÎTE EXTÉRIEURE */
    border: 3px solid var(--yavu-black) !important;
    background-color: var(--yavu-white) !important;
    border-radius: 15px 50px 10px 40px / 40px 10px 50px 15px !important;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.1) !important;
    margin-bottom: 50px !important;
    width: 100%;
    
    /* Indispensable pour les arrondis */
    border-collapse: separate !important; 
    border-spacing: 0 !important;
    overflow: hidden !important;
}

/* --- A. L'EN-TÊTE ("PRODUIT" / "TOTAL") --- */
.woocommerce-table--order-details thead th {
    font-family: var(--e-global-typography-primary-font-family, sans-serif);
    text-transform: uppercase;
    font-weight: 800;
    color: var(--yavu-black);
    
    /* On ajoute de l'espace pour décoller le mot "PRODUIT" du bord */
    padding: 25px !important; 
    
    /* La seule grosse barre noire autorisée (séparation titre/contenu) */
    border-bottom: 3px solid var(--yavu-black) !important;
    background-color: transparent !important;
    text-align: left; /* Force l'alignement à gauche */
}

/* --- B. LE CORPS ET LE PIED (Le nettoyage des lignes) --- */
.woocommerce-table--order-details td,
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    /* 1. ON SUPPRIME TOUTES les bordures par défaut (C'est ça qui faisait les traits noirs) */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    
    /* 2. On met juste un petit pointillé en bas */
    border-bottom: 1px dashed #ccc !important;
    
    /* 3. Espace confortable */
    padding: 20px 25px !important;
    vertical-align: middle;
}

/* Alignement spécifique pour les libellés (Sous-total, Expédition...) */
.woocommerce-table--order-details tfoot th {
    text-align: right;
    color: #666; 
    font-weight: normal;
}

/* --- C. LA LIGNE "TOTAL" (Finale) --- */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none !important; /* Plus de pointillé en bas */
    border-top: 2px solid var(--yavu-black) !important; /* Trait noir au dessus pour fermer */
    font-size: 1.2em;
    font-weight: 800;
    color: var(--yavu-black);
}

/* Cas particulier : Moyen de paiement (Souvent juste avant le total ou après) */
/* On s'assure que la ligne verte du bas reste propre */
.woocommerce-table--order-details tfoot tr:last-child {
   background-color: rgba(109, 191, 145, 0.1) !important; /* Petit fond vert */
}

/* 4. ADRESSES (Facturation & Livraison) -> Style "Carte Yavu" */
.woocommerce-customer-details address {
    border: 3px solid var(--yavu-black) !important;
    background-color: var(--yavu-white) !important;
    
    /* Forme irrégulière */
    border-radius: 20px 255px 20px 255px / 255px 20px 255px 20px !important;
    
    padding: 30px !important;
    
    /* Ombre verte signature */
    box-shadow: 10px 10px 0px var(--yavu-green) !important;
    
    font-style: normal;
    line-height: 1.6;
    margin-bottom: 30px;
    min-height: 200px; /* Pour qu'elles aient la même taille si possible */
}

/* Titres des colonnes adresses */
.woocommerce-column__title {
    font-family: var(--e-global-typography-primary-font-family, sans-serif);
    font-size: 1.8em;
    color: var(--yavu-green);
    margin-bottom: 20px !important;
    text-transform: uppercase;
}

/* 5. RESPONSIVE MOBILE POUR LA PAGE COMMANDE */
@media (max-width: 768px) {
    /* On empile le résumé de commande */
    ul.woocommerce-order-overview {
        flex-direction: column;
        padding: 20px !important;
    }
    ul.woocommerce-order-overview li {
        border-right: none;
        border-bottom: 1px dashed #ddd;
        padding: 10px 0;
        margin-bottom: 10px;
    }
    ul.woocommerce-order-overview li:last-child {
        border-bottom: none;
    }
    
    /* Adresses : On réduit l'ombre */
    .woocommerce-customer-details address {
        box-shadow: 6px 6px 0px var(--yavu-green) !important;
        padding: 20px !important;
    }
}

/* ==========================================================================
   10. PAGE PANIER (WOOCOMMERCE BLOCKS) - LAYOUT 50/50 & MOBILE FIX
   ========================================================================== */

/* --- 1. CONFIGURATION GÉNÉRALE (STYLES DE BASE) --- */

/* Style Commun aux deux boîtes (Gauche et Droite) */
.wc-block-cart__main, 
.wc-block-cart__sidebar {
    border: 3px solid var(--yavu-black) !important;
    background-color: var(--yavu-white) !important;
    border-radius: 15px 50px 10px 40px / 40px 10px 50px 15px !important;
    padding: 30px !important;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.1) !important;
    margin-bottom: 30px !important;
}

/* La Sidebar a une ombre verte spécifique */
.wc-block-cart__sidebar {
    box-shadow: 10px 10px 0px var(--yavu-green) !important;
}

/* --- DÉTAILS INTERNES --- */

/* En-têtes */
.wc-block-cart-items__header {
    font-family: var(--e-global-typography-primary-font-family, sans-serif) !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    color: var(--yavu-black) !important;
    border-bottom: 3px solid var(--yavu-black) !important;
}

/* Lignes & Images */
.wc-block-cart-items__row { border-bottom: 1px dashed #ccc !important; }
.wc-block-cart-item__image img {
    border: 2px solid var(--yavu-black) !important;
    border-radius: 10px !important;
    padding: 3px !important;
    background: #fff !important;
}

/* Quantité */
.wc-block-components-quantity-selector {
    border: 2px solid var(--yavu-black) !important;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 25px !important;
    overflow: hidden !important;
}
.wc-block-components-quantity-selector__input {
    border: none !important; background: transparent !important; font-weight: bold !important;
}

/* Code Promo */
.wc-block-components-panel {
    border: 2px solid var(--yavu-black) !important;
    border-radius: 10px !important;
    margin: 20px 0 !important;
    width: 100% !important;
}

/* Totaux */
.wc-block-components-totals-item { border-bottom: none !important; padding: 10px 0 !important; }
.wc-block-cart__totals-title {
    border-bottom: 3px solid var(--yavu-black) !important;
    padding-bottom: 15px !important; margin-bottom: 20px !important;
    text-transform: uppercase !important; font-weight: 800 !important;
}
.wc-block-components-totals-footer-item {
    border-top: 3px solid var(--yavu-black) !important; border-bottom: none !important;
    margin-top: 20px !important; padding-top: 20px !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--yavu-green) !important; font-size: 1.5em !important; font-weight: 800 !important;
}

/* Bouton Valider */
.wc-block-cart__submit-button {
    background-color: var(--yavu-green) !important;
    color: var(--yavu-white) !important;
    border: 5px solid var(--yavu-black) !important;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    font-size: 1.1em !important; font-weight: 800 !important; text-transform: uppercase !important;
    padding: 15px 30px !important; margin-top: 20px !important;
    display: flex !important; justify-content: center !important; width: 100% !important;
    transform: rotate(-1deg) !important;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important; text-decoration: none !important;
}
.wc-block-cart__submit-button:hover {
    background-color: var(--yavu-green-hover) !important;
    transform: rotate(1deg) scale(1.02) !important;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.3) !important;
    color: var(--yavu-white) !important;
}

/* --- 2. LAYOUT DESKTOP (FORCER LE 50/50) --- */
/* Uniquement sur les écrans larges (plus de 1024px) */
@media (min-width: 1024px) {
    .wc-block-cart {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; /* Aligner en haut */
        gap: 40px !important; /* Espace entre les colonnes */
        flex-wrap: nowrap !important;
    }

    .wc-block-cart__main, 
    .wc-block-cart__sidebar {
        width: 50% !important; /* Force la largeur moitié-moitié */
        flex: 1 1 50% !important;
        max-width: 50% !important;
    }
}

/* --- 3. LAYOUT MOBILE (CORRECTION DÉFINITIVE DU DÉCALAGE) --- */
@media (max-width: 768px) {
    
    /* 1. ON CASSE LA GRILLE WOOCOMMERCE */
    /* On cible la classe exacte qui pose problème */
    .wc-block-components-sidebar-layout,
    .wc-block-cart,
    .wp-block-woocommerce-filled-cart-block {
        display: block !important; /* On remplace Grid/Flex par Block simple */
        width: 100% !important;
        max-width: 100vw !important; /* Ne jamais dépasser l'écran */
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        grid-template-columns: 1fr !important; /* Force une seule colonne si le Grid résiste */
    }

    /* 2. LES BOÎTES (Produits + Sidebar) */
    .wc-block-cart__main, 
    .wc-block-cart__sidebar {
        /* Dimensions */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        
        /* Marges : On remet à zéro les côtés */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important; /* Juste de l'espace en bas */
        
        /* Style YAVU (Sans border-radius comme demandé) */
        padding: 20px !important;
        box-shadow: 5px 5px 0px rgba(0,0,0,0.2) !important;
        
        /* On annule la rotation qui crée des débordements */
        transform: none !important;
        
        /* Sécurité largeur */
        box-sizing: border-box !important;
    }
    
    /* Sidebar spécifique mobile */
    .wc-block-cart__sidebar {
        box-shadow: 5px 5px 0px var(--yavu-green) !important;
    }
}

/* ==========================================================================
   11. YAVU TABS VERTICAL (VERSION "SÉPARATION DES POUVOIRS")
   ========================================================================== */

/* ----------------------------------------------------------
   A. VERSION BUREAU (Uniquement si écran > 769px)
   ---------------------------------------------------------- */
@media (min-width: 769px) {
    
    /* 1. LAYOUT GAUCHE / DROITE */
    .yavu-tabs-vertical .e-n-tabs {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    /* 2. COLONNE GAUCHE (TITRES) */
    /* L'onglet actif est agrandi, pivoté et porte une ombre : il dépasse de sa boîte de 5 à 9 px.
       La marge intérieure le garde dans la colonne, donc dans le conteneur parent qui coupe ce qui
       dépasse ; overflow visible annule le défilement que le CSS de la page impose à toute largeur. */
    .yavu-tabs-vertical .e-n-tabs-heading {
        display: flex !important;
        flex-direction: column !important;
        width: 25% !important; 
        flex: 0 0 25% !important;
        padding: 15px 20px 15px 15px !important;
        overflow: visible !important;
        gap: 15px !important;
    }

    /* BOUTONS DESKTOP */
    .yavu-tabs-vertical .e-n-tab-title {
        background: var(--yavu-white) !important;
        border: var(--yavu-border-width) solid var(--yavu-black) !important;
        border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
        padding: 20px 10px !important;
        text-align: center !important;
        color: var(--yavu-black) !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        transition: all 0.3s ease !important;
    }

    /* BOUTON ACTIF DESKTOP */
    .yavu-tabs-vertical .e-n-tab-title[aria-selected="true"] {
        background: var(--yavu-green) !important;
        color: var(--yavu-white) !important;
        transform: scale(1.05) rotate(-2deg) !important;
        box-shadow: 5px 5px 0px var(--yavu-black) !important;
        z-index: 10;
    }

    /* 3. COLONNE DROITE (CONTENU) */
    .yavu-tabs-vertical .e-n-tabs-content {
        width: 75% !important;
        flex: 0 0 75% !important;
        background: var(--yavu-white) !important;
        border: var(--yavu-border-width) solid var(--yavu-black) !important;
        border-radius: 15px 40px 10px 35px / 35px 10px 40px 15px !important;
        padding: 40px !important;
        box-shadow: 10px 10px 0px rgba(0,0,0,0.1) !important;
        min-height: 300px !important;
    }
}

/* ----------------------------------------------------------
   B. VERSION MOBILE FINALE (Optimisée espaces réduits)
   ---------------------------------------------------------- */
@media (max-width: 768px) {

    /* 1. CONTENEUR GLOBAL */
    body .yavu-tabs-vertical .e-n-tabs {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        overflow: visible !important;
        gap: 0 !important; /* On supprime tout écart entre les blocs */
    }

    /* 2. ZONE DES BOUTONS (RESSERRÉE) */
    body .yavu-tabs-vertical .e-n-tabs-heading {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        
        /* Scroll */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        
        /* Alignement */
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 12px !important; /* Ecart entre les boutons un peu réduit */
        
        /* --- LE FIX EST ICI --- */
        /* HAUT : 2px (juste pour pas couper la bordure du haut) */
        /* BAS : 10px (juste assez pour l'ombre de 4px + un peu d'air) */
        /* GAUCHE : 20px (coussin de sécurité) */
        padding: 5px 20px 12px 20px !important; 
        
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        
        /* Hauteur forcée au minimum */
        height: auto !important;
        min-height: 0 !important;
        line-height: 1 !important;
        
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* 3. LES PILULES (BOUTONS) */
    body .yavu-tabs-vertical .e-n-tab-title {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        
        height: auto !important; 
        min-height: 0 !important; 
        
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* Padding interne du bouton ajusté */
        padding: 10px 20px !important; 
        
        white-space: nowrap !important;
        
        background-color: var(--yavu-white) !important;
        border: 3px solid var(--yavu-black) !important;
        border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
        transform: rotate(-1deg);
        
        font-weight: 800 !important;
        font-size: 0.85em !important;
        color: var(--yavu-black) !important;
        margin: 0 !important;
    }

    /* 4. BOUTON ACTIF */
    body .yavu-tabs-vertical .e-n-tab-title[aria-selected="true"] {
        background-color: var(--yavu-green) !important;
        color: var(--yavu-white) !important;
        transform: scale(1.05) rotate(1deg) !important;
        box-shadow: 4px 4px 0px var(--yavu-black) !important;
        z-index: 5;
    }

    /* 5. LE CONTENU (CARTE REMONTÉE) */
    body .yavu-tabs-vertical .e-n-tabs-content {
        display: block !important;
        width: 100% !important;
        
        /* --- LE FIX EST ICI --- */
        margin-top: -2px !important; /* On remonte légèrement la carte pour coller aux boutons */
        padding: 30px 25px !important;
        
        background-color: var(--yavu-white) !important;
        border: 3px solid var(--yavu-black) !important;
        border-radius: 15px 40px 10px 35px / 35px 10px 40px 15px !important;
        box-shadow: 8px 8px 0px rgba(0,0,0,0.1) !important;
    }
}

/* ==========================================================================
   12. YAVU FAQ (VERSION FINALE - ALIGNEMENT GAUCHE & STYLE MOBILE)
   ========================================================================== */

/* 1. LE CONTENEUR GLOBAL */
.yavu-faq .e-n-accordion {
    gap: 20px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. LA "BOÎTE" (QUESTION + RÉPONSE) */
.yavu-faq .e-n-accordion-item {
    background-color: var(--yavu-white) !important;
    border: 3px solid var(--yavu-black) !important;
    
    /* FORME YAVU "PATATE" (Appliquée partout) */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    
    box-shadow: 6px 6px 0px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    margin-bottom: 0 !important;
}

/* Effet survol */
.yavu-faq .e-n-accordion-item:not([open]):hover {
    transform: translateY(-2px);
    box-shadow: 8px 8px 0px rgba(0,0,0,0.2) !important;
}

/* 3. L'EN-TÊTE (TITRE DE LA QUESTION) */
.yavu-faq .e-n-accordion-item-title {
    background-color: transparent !important;
    padding: 20px 30px !important;
    min-height: auto !important;
    
    /* Typo */
    color: var(--yavu-black) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 1.1em !important;
    
    /* --- CORRECTION ALIGNEMENT GAUCHE --- */
    display: flex !important;
    align-items: center !important;
    
    /* On force tout le monde à gauche */
    justify-content: flex-start !important; 
    text-align: left !important;
    
    /* Espace entre l'icône et le texte */
    gap: 15px !important; 
    
    border-bottom: 0px solid transparent !important;
    transition: background 0.3s ease !important;
}

/* 4. GESTION DE L'ORDRE (ICÔNE VS TEXTE) */
/* Si l'icône est à gauche, on s'assure qu'elle reste à gauche */
.yavu-faq .e-n-accordion-item-title-icon {
    order: -1 !important; /* Force l'icône en premier */
    color: var(--yavu-black) !important;
    flex-shrink: 0 !important; /* Empêche l'icône de s'écraser */
}

/* Le texte prend toute la place restante si besoin */
.yavu-faq .e-n-accordion-item-title-header {
    flex-grow: 1 !important;
    text-align: left !important;
}

.yavu-faq .e-n-accordion-item-title-icon svg {
    fill: currentColor !important;
    width: 20px !important;
    height: 20px !important;
}

/* 5. ÉTAT OUVERT (ACTIVE STATE) */
.yavu-faq .e-n-accordion-item[open] .e-n-accordion-item-title {
    background-color: var(--yavu-green) !important;
    color: var(--yavu-white) !important;
    border-bottom: 3px solid var(--yavu-black) !important; 
}

.yavu-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
    color: var(--yavu-white) !important;
}

/* 6. LE CONTENU (RÉPONSE) */
.yavu-faq .e-n-accordion-item > .e-con {
    padding: 30px !important;
    background-color: var(--yavu-white) !important;
    color: #444 !important;
    line-height: 1.6 !important;
}

.yavu-faq .e-n-accordion-item .elementor-widget-text-editor {
    margin-bottom: 0 !important;
}

/* 7. RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .yavu-faq .e-n-accordion-item {
        /* --- CORRECTION MOBILE : ON FORCE LA FORME PATATE --- */
        border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
        border-width: 3px !important;
    }
    
    /* Ajustement padding sur mobile */
    .yavu-faq .e-n-accordion-item-title {
        padding: 15px 20px !important;
        font-size: 1em !important;
    }
    
    .yavu-faq .e-n-accordion-item > .e-con {
        padding: 20px 25px !important; /* Un peu plus d'espace sur les côtés */
    }
}

/* ==========================================================================
   FIX MOBILE : Annulation des marges négatives WordPress/Gutenberg
   ========================================================================== */
@media (max-width: 768px) {
    /* On cible tous les blocs qui essaient de sortir de l'écran */
    .alignwide, 
    .alignfull, 
    .wp-block-woocommerce-cart,
    .wc-block-cart {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-inline: 0 !important; /* C'est cette commande qui tue le -80px */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   13. YAVU MON COMPTE - MENU & SECTIONS
   ========================================================================== */

/* --- A. MENU NAVIGATION (STYLE PILULES VERTICALES) --- */

.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacement entre les pilules */
}

.woocommerce-MyAccount-navigation ul li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
    /* Dimensions & Forme */
    display: block;
    padding: 15px 25px;
    text-decoration: none !important;
    text-align: center;
    
    /* Style YAVU (Base Inactive) */
    background-color: var(--yavu-white);
    border: var(--yavu-border-width) solid var(--yavu-black);
    border-radius: var(--yavu-radius-blob); /* Forme Patate */
    
    /* Typographie */
    color: var(--yavu-black);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1px;
    
    /* Transition */
    transition: all 0.3s ease;
    transform: rotate(0deg);
}

/* État Hover */
.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #f0f0f0;
    transform: scale(1.02) rotate(-1deg);
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

/* État Actif (La page courante) */
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--yavu-green);
    color: var(--yavu-white);
    
    /* Effet "Enfoncé" ou "Sélectionné" */
    transform: scale(1.05) rotate(1deg);
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2);
    border-color: var(--yavu-black); /* On garde la bordure noire */
}

/* --- B. SECTION "MON POINT RELAIS" (HARMONISATION) --- */

/* 1. CONTENEURS PRINCIPAUX (Style Carte Blanche) */
.yavu-mon-point-relais, 
.yavu-search-relay-form,
.yavu-no-relay {
    border: var(--yavu-border-width) solid var(--yavu-black) !important;
    background-color: var(--yavu-white) !important;
    
    /* Forme Yavu */
    border-radius: 15px 50px 10px 40px / 40px 10px 50px 15px !important;
    
    padding: 30px !important;
    margin-bottom: 30px !important;
    box-shadow: var(--yavu-shadow) !important;
}

/* 2. BOÎTE "POINT RELAIS ACTUEL" (Style Carte Verte ou Mise en avant) */
.yavu-current-relay {
    border: var(--yavu-border-width) solid var(--yavu-black) !important;
    background-color: #f0fdf4 !important; /* Fond vert très clair */
    border-radius: 20px 255px 20px 255px / 255px 20px 255px 20px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    box-shadow: 10px 10px 0px var(--yavu-green) !important; /* Ombre verte */
}

.yavu-current-relay h3 {
    color: var(--yavu-success) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    margin-top: 0;
}

/* Informations du Point Relais */
.yavu-relay-info {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.yavu-relay-name {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--yavu-black);
    margin-bottom: 10px;
}

/* 3. FORMULAIRE DE RECHERCHE */
/* Inputs */
#yavu-relay-search-form input[type="text"],
#yavu-relay-search-form select {
    border: var(--yavu-border-width) solid var(--yavu-black) !important;
    background-color: var(--yavu-white) !important;
    border-radius: 10px 255px 20px 25px / 255px 15px 25px 20px !important;
    padding: 15px !important;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
    height: 50px;
}

#yavu-relay-search-form input[type="text"]:focus,
#yavu-relay-search-form select:focus {
    border-color: var(--yavu-green) !important;
    outline: none;
}

/* Bouton Rechercher */
.yavu-search-btn {
    /* Réutilisation des styles .yavu-btn */
    background-color: var(--yavu-green) !important;
    color: var(--yavu-white) !important;
    border: 5px solid var(--yavu-black) !important;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 15px 30px !important;
    transform: rotate(-1deg);
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
    width: auto !important;
    display: inline-block !important;
}

.yavu-search-btn:hover {
    transform: rotate(1deg) scale(1.05);
    background-color: var(--yavu-green-hover) !important;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.3) !important;
}

/* 4. RÉSULTATS (CARTES POINT RELAIS) */
.yavu-relay-card {
    border: var(--yavu-border-width) solid var(--yavu-black) !important;
    background-color: var(--yavu-white) !important;
    border-radius: 15px !important; /* Forme un peu plus simple pour la liste */
    padding: 20px !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1) !important;
}

.yavu-relay-card:hover {
    border-color: var(--yavu-green) !important;
    transform: translateY(-2px);
    box-shadow: 6px 6px 0px rgba(0,0,0,0.15) !important;
}

/* Carte sélectionnée */
.yavu-relay-card.selected {
    background-color: #f0fdf4 !important;
    border-color: var(--yavu-green) !important;
    box-shadow: 6px 6px 0px var(--yavu-green) !important;
}

/* Bouton "Choisir" */
.yavu-select-btn {
    background-color: var(--yavu-black) !important;
    color: var(--yavu-white) !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-size: 0.85em !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.yavu-relay-card.selected .yavu-select-btn {
    background-color: var(--yavu-green) !important;
}

/* ==========================================================================
   14. PAGE CHECKOUT (WOOCOMMERCE BLOCKS) - STYLE YAVU
   ========================================================================== */

/* 1. LAYOUT 2 COLONNES (Gauche / Droite) */
@media (min-width: 1024px) {
    .wp-block-woocommerce-checkout {
        gap: 30px !important; /* Espace optimisé */
        align-items: flex-start !important;
        width: 100% !important; /* Force la largeur complète */
        max-width: 100% !important;
    }
    
    .wp-block-woocommerce-checkout-fields-block {
        flex: 1 !important; /* S'adapte à l'espace restant */
        width: auto !important;
        min-width: 0 !important;
    }
    
    .wp-block-woocommerce-checkout-totals-block {
        width: 38% !important; /* Colonne latérale ajustée */
        min-width: 350px !important; /* Largeur minimale de sécurité */
        flex-shrink: 0 !important; /* Empêche l'écrasement */
        position: sticky !important;
        top: 20px !important;
    }
}

/* 2. CONTENEURS PRINCIPAUX (Style Carte Blanche Yavu) */
.wp-block-woocommerce-checkout-fields-block,
.wp-block-woocommerce-checkout-order-summary-block {
    border: 3px solid var(--yavu-black) !important;
    background-color: var(--yavu-white) !important;
    border-radius: 15px 50px 10px 40px / 40px 10px 50px 15px !important;
    padding: 40px !important;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.1) !important;
    margin-bottom: 30px !important;
}

/* La Sidebar (Résumé) a une ombre verte */
.wp-block-woocommerce-checkout-order-summary-block {
    box-shadow: 10px 10px 0px var(--yavu-green) !important;
}

/* 3. TITRES DES SECTIONS */
.wc-block-components-checkout-step__title,
.wc-block-components-panel__button, 
.wc-block-components-title {
    font-family: var(--e-global-typography-primary-font-family, sans-serif) !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    color: var(--yavu-black) !important;
    font-size: 1.5em !important;
}

/* 4. CHAMPS DE SAISIE (Inputs) */
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-textarea textarea {
    border: 2px solid var(--yavu-black) !important;
    background-color: var(--yavu-white) !important;
    border-radius: 10px 255px 20px 25px / 255px 15px 25px 20px !important;
    padding: 12px 20px !important;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1) !important;
    min-height: 50px !important;
    transition: all 0.3s ease !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input:focus {
    border-color: var(--yavu-green) !important;
    transform: scale(1.01) !important;
    outline: none !important;
}

/* 5. BOUTON "COMMANDER" */
.wc-block-components-checkout-place-order-button {
    background-color: var(--yavu-green) !important;
    color: var(--yavu-white) !important;
    border: 5px solid var(--yavu-black) !important;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    font-size: 1.2em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 20px 30px !important;
    width: 100% !important;
    margin-top: 20px !important;
    transform: rotate(-1deg) !important;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: flex !important;
    justify-content: center !important;
}

.wc-block-components-checkout-place-order-button:hover {
    background-color: var(--yavu-green-hover) !important;
    transform: rotate(1deg) scale(1.02) !important;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.3) !important;
}

/* 6. LIGNES RÉSUMÉ COMMANDE */
.wc-block-components-order-summary-item {
    border-bottom: 1px dashed #ccc !important;
    padding: 15px 0 !important;
}

/* 7. BLOCS RADIO (Expédition / Paiement) */
.wc-block-components-radio-control {
    border: 2px solid var(--yavu-black) !important;
    border-radius: 10px !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
}

.wc-block-components-radio-control:hover {
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1) !important;
}

/* 9. PRODUCT NAME */
.wc-block-components-product-name {
    font-family: var(--e-global-typography-primary-font-family, sans-serif) !important;
    font-size: 1em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--yavu-black) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

/* 8. MOBILE FIX */
@media (max-width: 768px) {
    .wp-block-woocommerce-checkout {
        flex-direction: column !important;
    }
    .wp-block-woocommerce-checkout-fields-block,
    .wp-block-woocommerce-checkout-totals-block {
        width: 100% !important;
        margin-bottom: 20px !important;
        padding: 20px !important;
    }
}

/* ==========================================================================
   15. FORMULAIRE DE CONTACT (Spécifique Page Contact)
   ========================================================================== */

/* --- A. LES CHAMPS (Input, Textarea, Select) --- */
.yavu-contact-form .elementor-field-group .elementor-field {
    /* Style Yavu */
    border: 3px solid var(--yavu-black) !important;
    background-color: var(--yavu-white) !important;
    
    /* Forme irrégulière pour les champs */
    border-radius: 10px 255px 20px 25px / 255px 15px 25px 20px !important;
    
    padding: 15px 20px !important;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1) !important;
    color: var(--yavu-black) !important;
    transition: all 0.3s ease !important;
}

/* Au clic (Focus) */
.yavu-contact-form .elementor-field-group .elementor-field:focus {
    border-color: var(--yavu-green) !important;
    transform: scale(1.01);
}

/* --- B. LE BOUTON ENVOYER --- */
.yavu-contact-form .elementor-button {
    /* Base */
    background-color: var(--yavu-green) !important;
    color: var(--yavu-white) !important;
    border: 5px solid var(--yavu-black) !important;
    
    /* Forme "Patate" */
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
    
    font-family: var(--e-global-typography-primary-font-family, sans-serif) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 15px 40px !important;
    
    /* Centrage si besoin */
    width: auto !important;
    margin-top: 10px !important;
    
    transform: rotate(-1deg) !important;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
}

/* Hover Bouton */
.yavu-contact-form .elementor-button:hover {
    background-color: var(--yavu-green-hover) !important;
    border-color: var(--yavu-green) !important; /* Bordure verte */
    transform: rotate(1deg) scale(1.05) !important;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.3) !important;
}

/* --- C. LABELS (Les titres au dessus des champs) --- */
.yavu-contact-form .elementor-field-label {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--yavu-black) !important;
    padding-bottom: 5px !important;
}

/* ==========================================================================
   16. FICHE PRODUIT - CHOIX DES OPTIONS
   ========================================================================== */

/* Chaque sélecteur reprend le préfixe complet du formulaire de produit variable
   pour l'emporter par spécificité sur WooCommerce, Hello Elementor et Elementor Pro,
   dont les feuilles sont chargées après celle du thème enfant. Sans ce préfixe, les
   listes du paiement, du panier et de « Mon point relais » seraient touchées. */

/* Lignes : pas de bande grise ni de bordure de tableau, au repos comme au survol */
body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations tr > th,
body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations tr > td,
body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations tr:hover > th,
body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations tr:hover > td {
    background-color: transparent;
    border: 0;
}

body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations th,
body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations td {
    vertical-align: middle;
    padding: 8px 0;
}

body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations th.label {
    padding-right: 20px;
}

/* Libellés : mêmes valeurs que les libellés des formulaires YAVU */
body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations th.label label {
    font-family: var(--e-global-typography-text-font-family), sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 1px;
    color: var(--yavu-black);
    line-height: 1.2;
    margin: 0;
}

/* Listes : on écrit background-color et non background, car la propriété raccourcie
   effacerait l'image de fond de WooCommerce qui dessine la flèche. Le padding droit
   de 3em lui garde sa place. 16px minimum, sinon Safari iOS zoome au toucher.
   10px en haut et en bas donnent une hauteur de 50px (24px de ligne, 20px de padding,
   6px de bordure), égale à celle du champ quantité. */
body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations select {
    background-color: var(--yavu-white);
    border: var(--yavu-border-width) solid var(--yavu-black);
    border-radius: 10px 255px 20px 25px / 255px 15px 25px 20px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
    min-height: 50px;
    padding: 10px 3em 10px 20px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--yavu-black);
    transition: border-color 0.3s ease;
}

body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations select:focus {
    border-color: var(--yavu-green);
    outline: none;
}

/* Quantité : même hauteur que les listes pour aligner la ligne du bouton.
   La hauteur fixe l'emporte sur le height: 100% d'Elementor Pro par spécificité. */
body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form .quantity input.qty {
    background-color: var(--yavu-white);
    border: var(--yavu-border-width) solid var(--yavu-black);
    border-radius: 10px 255px 20px 25px / 255px 15px 25px 20px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
    font-size: 16px;
    color: var(--yavu-black);
    transition: border-color 0.3s ease;
    height: 50px;
    min-height: 50px;
    width: 90px;
    padding: 0 10px;
    text-align: center;
    box-sizing: border-box;
}

body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form .quantity input.qty:focus {
    border-color: var(--yavu-green);
    outline: none;
}

/* Lien « Effacer » : pas de transition ni de règle sur visibility, WooCommerce
   l'affiche et le masque lui-même selon le choix des options */
body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form a.reset_variations {
    color: var(--yavu-black);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form a.reset_variations:hover,
body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form a.reset_variations:focus {
    color: var(--yavu-green);
}

/* Ordinateur et tablette : cellules alignées en haut et libellé centré sur une boîte
   de la hauteur de la liste. Le lien « Effacer », même masqué, occupe une ligne sous
   la liste et décentrerait le libellé s'il était centré sur la cellule entière. */
@media (min-width: 768px) {
    body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations th,
    body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations td {
        vertical-align: top;
    }

    body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations th.label label {
        display: flex;
        align-items: center;
        min-height: 50px;
    }
}

/* Téléphone : libellé au-dessus de la liste, qui occupe toute la ligne */
@media (max-width: 767px) {
    body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations,
    body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations tbody,
    body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations tr,
    body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations th,
    body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Une cellule d'en-tête centre son texte par défaut, alors que les libellés des formulaires YAVU sont alignés à gauche */
    body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations th.label {
        padding: 12px 0 8px;
        text-align: left;
    }

    body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations td.value {
        padding: 0 0 8px;
    }

    /* Annule le min-width: 75% et le margin-right: 1em de WooCommerce, qui feraient déborder la liste */
    body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form table.variations select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-right: 0;
    }

    body.single-product .elementor-widget-wc-add-to-cart form.cart.variations_form a.reset_variations {
        display: inline-block;
        margin-top: 10px;
    }
}