/* ========================================================================= */
/* --- HERBIER DES SENS : VERSION FINALE V.36 (CENTRAGE TOTAL) ---           */
/* ========================================================================= */

/* --- 1. COULEURS GÉNÉRALES --- */
html, body, .page-content, .content-wrapper { background-color: #A8C6AB !important; color: #2E514F !important; }
h1, h2, h3, h4, p { color: #2E514F !important; }

/* --- 2. EN-TÊTE ET PIED DE PAGE --- */
header, footer, .site-header, .site-footer, .navbar-header, .line-footer { background-color: #E6E6FA !important; color: #2E514F !important; }

/* --- 3. BOUTONS D'ACTION (GÉNÉRAUX) --- */
.btn-primary, .btn-action, input[type="submit"] {
    background-color: #D4A373 !important; border: 2px solid #D4A373 !important;
    color: #2E514F !important; font-weight: bold !important;
    border-radius: 50px !important; padding: 10px 25px !important;
}

/* --- 4. FORMULAIRE (COLONNES VERTES) --- */
.donation-box, .donation-step, .yapla-form-step { background-color: #2E514F !important; border-radius: 15px !important; padding: 20px !important; }
.donation-box *, .donation-step *, .yapla-form-step * { color: #F5F5F5 !important; }
input[type="text"], input[type="email"], textarea, select { color: #2E514F !important; background-color: #F5F5F5 !important; }

/* --- 5. FIX FINAL : CENTRAGE ET NETTOYAGE --- */

/* 5.A. LES BOUTONS (Paiement, Dons, Plusieurs fois) */
.yapla-donation-amount-item label, 
.payment-method-item label, 
.yapla-payment-installments label,
.radio-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border: 2px solid #D4A373 !important;
    background-color: transparent !important;
    color: #2E514F !important;
    border-radius: 8px !important;
    padding: 12px 20px !important; /* Ajustement du confort */
    margin: 8px !important;
    min-width: 160px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    
    /* Supprime les décalages internes de Yapla */
    text-indent: 0 !important;
    transition: all 0.2s ease-in-out !important;
}

/* 5.B. On force la suppression de tout élément interne qui pousserait le texte */
.payment-method-item label *, .radio-inline * {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* 5.C. ÉTAT SÉLECTIONNÉ */
input:checked + label, 
input:checked + span,
.active label,
.radio-inline:has(input:checked) {
    background-color: #D4A373 !important;
    color: #FFFFFF !important;
}

/* 5.D. LE MENU "MON ESPACE" */
.yapla-member-space-menu li a {
    color: #2E514F !important;
    font-weight: 500 !important;
}

.yapla-member-space-menu li.active a, 
.yapla-member-space-menu li.selected a {
    color: #D4A373 !important; 
    font-weight: 800 !important;
    background-color: rgba(212, 163, 115, 0.1) !important; 
    border-radius: 5px !important;
}

/* 5.E. DISPARITION TOTALE ET NETTE DES RADIOS */
.yapla-donation-amount-item input[type="radio"], 
.payment-method-item input[type="radio"], 
.yapla-payment-installments input[type="radio"],
.radio-inline input[type="radio"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    margin: 0 !important;
}

/* --- 6. RÉSUMÉ --- */
.page-recap-adh .yapla-summary { background-color: #F5F5F5 !important; padding: 25px !important; border: 3px solid #D4A373 !important; border-radius: 12px !important; }
.page-recap-adh * { color: #2E514F !important; }

/* 7.B. NETTOYAGE TOTAL DE LA BARRE LATÉRALE (SIDEBAR) */

/* On cible n'importe quel lien dans la colonne de gauche pour supprimer le style bouton */
.member-sidebar a, 
.member-sidebar__menu a, 
#menu a.menu-item {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #4A7850 !important; /* Ton vert forêt */
    padding: 8px 0 !important;
    display: block !important;
    border-radius: 0 !important;
    text-indent: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
}

/* --- LE FIX POUR LE GRAS (ONGLET OUVERT) --- */
.member-sidebar__menu li.active a,
#menu li.active a {
    color: #D4A373 !important; /* Terre Cuite pour l'onglet actif */
    font-weight: 900 !important;
    background: transparent !important;
}

/* --- FIX NOM D'UTILISATEUR (AUDREY) --- */
/* On cible le lien par sa classe exacte pour forcer le vert */
a.member-myprofile {
    color: #4A7850 !important; 
    font-weight: bold !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
}

/* --- LE BOUTON DÉCONNEXION EN BAS DU MENU --- */
/* Si tu veux qu'il reste un bouton mais en vert, sinon il sera en texte simple */
.member-sidebar__menu a[href*="logout"] {
    color: #D4A373 !important;
    font-weight: bold !important;
}

/* --- FIX POUR LE GRAS ET LE SOULIGNÉ (ONGLET OUVERT) --- */
/* Cible l'onglet actif dans le menu de gauche */
.member-sidebar__menu li.active a,
#menu li.active a {
    color: #4A7850 !important; /* Terre Cuite */
    font-weight: 900 !important;
    text-decoration: underline !important; /* Ajoute le soulignement */
    background: transparent !important;
}

/* --- FIX NOM D'UTILISATEUR (AUDREY) --- */
/* On remet le vert #4A7850 et on ajoute le soulignement */
a.member-myprofile {
    color: #4A7850 !important; 
    font-weight: bold !important;
    text-decoration: underline !important; /* Ajoute le soulignement */
    background: none !important;
    border: none !important;
}

/* Optionnel : Enlève le soulignement au survol d'Audrey si tu préfères */
a.member-myprofile:hover {
    text-decoration: none !important;
    color: #D4A373 !important;
}

/* --- NOUVEAU : STYLE DU BARRE DE MENU PRINCIPAL --- */

/* Le bandeau de fond (Vert Foncé) */
#mainMenu {
    background-color: #2E514F !important; /* Ton vert foncé */
    border-radius: 10px; /* Optionnel : pour arrondir les coins du bandeau */
    padding: 0 15px !important;
}

/* Les liens du menu (Vert Menthe) */
#mainMenu .navbar-nav li a {
    color: #A8C6AB !important; /* Ton vert menthe (le même que ton fond de page) */
    font-weight: 600 !important;
    padding: 15px 20px !important;
}

/* Effet au survol et Onglet Actif (Terre Cuite) */
#mainMenu .navbar-nav li.active a, 
#mainMenu .navbar-nav li a:hover {
    color: #D4A373 !important; /* Terre Cuite */
    background: transparent !important;
}

/* --- 8. CIBLAGE PRÉCIS : BOUTON DEVENIR MEMBRE --- */

.member-register, 
a.member-register,
.site-header a.member-register {
    background-color: #D4A373 !important; /* Fond Terre Cuite */
    color: #2E514F !important;           /* Texte Vert Forêt */
    border: 2px solid #D4A373 !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    padding: 8px 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    margin: 5px !important;
}

/* 8.A. Fix pour le survol du bouton Devenir membre */
.member-register:hover, 
a.member-register:hover {
    background-color: #D4A373 !important;
    color: #2E514F !important;
    filter: brightness(1.1) !important;
    text-decoration: none !important;
}

/* --- 9. FIX : ONGLET DU MENU ACTIF EN TERRE CUITE --- */

/* 9.A Cible le lien de la page où l'on se trouve actuellement */
.navbar-nav li.active a, 
.navbar-nav li.current-menu-item a,
.navbar-nav li a:hover:not(.member-register):not(.member-login) {
    color: #D4A373 !important; /* Texte Terre Cuite */
    font-weight: 800 !important;
    background: none !important; /* Pour être sûr qu'il n'y a pas de fond */
}

/* --- FIX : BANDEAU BIENVENUE VERSION NATURE (MENTHE & TERRE CUITE) --- */
.line-secondary[data-line-id="519129"], 
.line-secondary {
    background-color: #A8C6A8 !important; /* Ton Vert Menthe Clair exact */
    background: #A8C6A8 !important;
    border-top: 1px solid rgba(46, 81, 79, 0.1) !important; /* Bordure très fine en haut */
    border-bottom: 3px solid #D4A373 !important;      /* Ligne de séparation Terre Cuite */
    opacity: 1 !important;
    padding: 30px 0 !important; /* On donne un peu plus d'espace pour l'élégance */
}

.line-secondary .content, 
.line-secondary p, 
.line-secondary div {
    color: #2E514F !important; /* Texte Vert Profond (Autorité) pour la lisibilité */
    font-size: 17px !important;
}

.line-secondary a, 
.line-secondary a strong {
    color: #4A7850 !important; /* Lien en Terre Cuite (Action) pour qu'il saute aux yeux */
    text-decoration: underline !important;
}

/* Petit bonus : changement de couleur du lien au survol */
.line-secondary a:hover {
    color: #4A7850 !important; /* Passe en Vert Forêt au survol */
}

/* --- 11. FIX BOUTONS BOUTIQUE ET PANIER --- */

/* Correction du bouton "Ajouter au panier" qui chevauche */
.yapla-boutique-product-view .btn-add-to-cart,
.btn-add-to-cart {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important; /* Espace entre l'icône et le texte */
    padding: 10px 25px !important;
    overflow: hidden !important;
}

/* On remet l'icône à l'intérieur du flux du bouton (pas par-dessus) */
.btn-add-to-cart i, 
.btn-add-to-cart .icon {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
}

/* --- LE PANIER DANS LE MENU (S'IL EXISTE) --- */
/* On essaie de le placer en haut à droite de l'écran de manière fixe mais discrète */
.yapla-cart-widget-summary {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
    background: #F5F5F5 !important;
    padding: 10px 15px !important;
    border: 2px solid #D4A373 !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* --- FIX : APPARITION DU PANIER DANS LE HEADER --- */
.yapla-boutique-cart-summary, 
.cart-summary, 
#cart-summary {
    display: inline-flex !important;
    visibility: visible !important;
    background-color: #F5F5F5 !important; /* Blanc Cassé */
    border: 2px solid #D4A373 !important; /* Bordure Terre Cuite */
    border-radius: 50px !important;
    padding: 5px 15px !important;
    margin-left: 15px !important;
    vertical-align: middle !important;
    color: #2E514F !important;
    text-decoration: none !important;
}

/* On force l'icône à être en Vert Profond */
.yapla-boutique-cart-summary i {
    color: #2E514F !important;
    margin-right: 8px !important;
}

/* --- FIX : ALIGNEMENT ICÔNE BOUTON ACHAT --- */
.btn-add-to-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.btn-add-to-cart i {
    margin: 0 !important;
    font-size: 1.2em !important;
}

/* Style final et lisible pour le lien Retour à la liste */
.back-to-list {
    color: #4A7850 !important; /* Ton Vert Forêt */
    display: block !important;
    text-align: center !important;
    margin: 50px auto 30px auto !important; /* Plus d'espace pour l'aérer */
    font-weight: bold !important;
    text-decoration: underline !important;
    
    /* On augmente la taille ici */
    font-size: 1.4rem !important; /* Taille généreuse */
    text-transform: uppercase !important; /* Optionnel : en majuscules pour plus d'impact */
    letter-spacing: 1px !important; /* Un peu d'air entre les lettres */
}

/* Effet au survol */
.back-to-list:hover {
    color: #2D4F1E !important;
    text-decoration: none !important;
    transform: scale(1.05) !important; /* Petit effet de zoom au survol sur PC */
}

/* --- CODE FORTERESSE : BOUTONS FIXES EN HAUT --- */
@media (max-width: 767px) {
    /* On crée une barre fixe en haut de l'écran */
    .header-ext-login {
        display: flex !important;
        visibility: visible !important;
        position: fixed !important; /* Reste en haut même quand on scrolle */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        background-color: #E6E6FA !important; /* Lavande */
        z-index: 999999 !important; /* Maximum possible */
        justify-content: center !important;
        align-items: center !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }

    /* On force les liens à apparaître comme des boutons dans cette barre */
    .header-ext-login a {
        display: inline-block !important;
        visibility: visible !important;
        padding: 6px 12px !important;
        margin: 0 5px !important;
        font-size: 12px !important;
        border-radius: 50px !important;
        text-decoration: none !important;
        font-weight: bold !important;
    }

    /* Bouton Devenir Membre */
    a.member-register {
        background-color: #D4A373 !important;
        color: #2E514F !important;
        border: 1px solid #D4A373 !important;
    }

    /* Bouton Connexion */
    a.member-login {
        background-color: #FFFFFF !important;
        color: #2E514F !important;
        border: 1px solid #2E514F !important;
    }

    /* TRÈS IMPORTANT : On descend tout le site pour ne pas cacher le logo sous la barre */
    body {
        margin-top: 60px !important;
    }
    
    .site-header {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /* On ajoute un peu d'espace sous les boutons pour libérer le logo */
    .header-ext-login {
        margin-bottom: 10px !important;
        border-bottom: 1px solid rgba(46, 81, 79, 0.05); /* Ligne très discrète */
    }

    /* On s'assure que le logo ne remonte pas trop haut */
    .site-header .logo-wrapper img {
        margin-top: 10px !important;
        max-height: 70px !important; /* Ajustement pour que tout tienne sans défiler */
    }
}

/* --- FIX FINAL ANTI-GLISSEMENT ET AFFICHAGE MOBILE --- */
@media (max-width: 767px) {
    /* 1. On bloque strictement le glissement horizontal sur tout le site */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    /* 2. On ajuste le conteneur des boutons pour qu'il ne dépasse jamais */
    .header-ext-login {
        display: flex !important;
        flex-wrap: nowrap !important; /* Force les boutons sur une ligne sans dépasser */
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important; /* Inclut le padding dans la largeur */
        padding: 10px 5px !important;
        margin: 0 !important;
        background-color: #E6E6FA !important;
    }

    /* 3. On réduit la taille des boutons pour qu'ils rentrent pile dans la largeur */
    .header-ext-login a {
        font-size: 11px !important;
        padding: 6px 8px !important;
        margin: 0 4px !important;
        flex: 0 1 auto !important; /* Ne s'étire pas au-delà du nécessaire */
        white-space: nowrap !important;
    }

    /* 4. On s'assure que le logo ne crée pas de décalage non plus */
    .site-header .logo-wrapper, .site-header img {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* --- FIX FINAL ANTI-GLISSEMENT : MOBILE & TABLETTE --- */
@media (max-width: 1200px) { /* On passe à 1200 pour couvrir les tablettes */
    /* Bloque le glissement horizontal sur tous les appareils tactiles */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    /* On s'assure que le header ne dépasse pas d'un pixel */
    .mod-header.mod-header-wrapper, 
    .header-ext-login, 
    .site-header {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Taille ajustée pour les icônes réseaux sociaux */
.yp-social-links i, .yp-footer-social-links i, .fa-facebook, .fa-youtube, .fa-instagram {
    color: #2D4F1E !important; /* Le beau vert forêt */
    font-size: 20px !important; /* Taille intermédiaire parfaite */
}

/* Réduction radicale des espaces du pied de page */
#footer, .footer, [class*="footer"], .yp-footer-container {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* On réduit aussi l'espace des colonnes à l'intérieur */
#footer .container, .footer .container, .footer .row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}