/**
 * MADAME Global — fixes contrastes + lisibilité chargés sur TOUTES les pages
 * (homepage Elementor, blog, single post, etc.) — pas que les pages shop.
 *
 * Objectif : aucun bouton noir avec texte noir, aucun titre vert sur fond
 * vert, garantir la lisibilité même si Elementor/Shoptimizer/Astra
 * surchargent leur propre styling.
 *
 * Project: MADAME / 2026-05-01
 */

/* ============================================================
   :root global — disponible partout (homepage, footer, etc.)
   ============================================================ */
:root {
    --mad-ink:        #161616;
    --mad-graphite:   #2A2A2A;
    --mad-stone:      #6B6B6B;
    --mad-line:       #E5E3DD;
    --mad-bone:       #F2F0EB;
    --mad-paper:      #FAFAF8;
    --mad-white:      #FFFFFF;
    --mad-forest:     #1B3328;
    --mad-forest-deep:#0F1E16;
    --mad-forest-soft:#2D4A3C;
    --mad-gold:       #C9A84C;
}

/* ============================================================
   1. Boutons solides noirs : texte TOUJOURS blanc
   Couvre Elementor, Shoptimizer, custom MADAME et toute classe
   contenant `btn` avec un fond foncé.
   ============================================================ */
a[style*="background-color:#161616"],
a[style*="background:#161616"],
a[style*="background-color:#0a0a0a"],
a[style*="background:#0a0a0a"],
a[style*="background-color:#000"],
a[style*="background:#000"],
a.elementor-button[style*="background"]:not([style*="#fff"]):not([style*="#FFF"]),
.elementor-button[style*="background:#0"],
.elementor-button[style*="background:#1"],
.elementor-button[style*="background:#2"],
.elementor-button[style*="background:#3"] {
    color: #FFFFFF !important;
}
a[style*="background-color:#161616"] *,
a[style*="background:#161616"] *,
a[style*="background-color:#0a0a0a"] *,
a[style*="background:#0a0a0a"] *,
a[style*="background-color:#000"] *,
a[style*="background:#000"] *,
.elementor-button[style*="background:#0"] *,
.elementor-button[style*="background:#1"] *,
.elementor-button[style*="background:#2"] *,
.elementor-button[style*="background:#3"] *,
.elementor-button[style*="background:#1B3328"] * {
    color: #FFFFFF !important;
}

/* Boutons MADAME custom — règle nucléaire visible partout.
   IMPORTANT : on cible AUSSI `.btn-primary` / `.btn-ghost` SANS préfixe
   car le hero homepage et autres widgets MADAME utilisent ces classes
   génériques (cf. /staging/?). Le `body.home` scope évite de polluer
   les boutons d'autres thèmes/plugins qui utiliseraient les mêmes classes. */
a.mpp-btn-primary,
button.mpp-btn-primary,
.mpp-btn-primary,
.mad-btn-dark,
a.mad-btn-dark,
a.btn-primary,
button.btn-primary,
.hero a.btn-primary,
.hero-cta-row a.btn-primary {
    background: #161616 !important;
    color: #FFFFFF !important;
    border: 1px solid #161616 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mpp-btn-primary *,
.mad-btn-dark *,
a.btn-primary *,
.hero a.btn-primary * { color: #FFFFFF !important; }
a.btn-primary:hover,
.hero a.btn-primary:hover,
button.btn-primary:hover {
    background: #1B3328 !important;
    border-color: #1B3328 !important;
    color: #FFFFFF !important;
}

/* Bouton ghost (lien souligné) — homepage hero "Notre manifesto →" */
a.btn-ghost,
.hero a.btn-ghost,
.hero-cta-row a.btn-ghost {
    background: transparent !important;
    color: #161616 !important;
    border: none !important;
    border-bottom: 1px solid #161616 !important;
    text-decoration: none !important;
    padding: 10px 0 !important;
    margin-left: 24px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
a.btn-ghost:hover,
.hero a.btn-ghost:hover {
    color: #1B3328 !important;
    border-bottom-color: #1B3328 !important;
    padding-left: 6px;
}

/* Si un Elementor button a une classe custom "elementor-button-text" mais
   couleur invisible, on force le contraste en fonction du bg détecté.
   Cas le plus fréquent : Elementor button avec bg-color set inline mais
   text-color héritant du theme (qui est noir). */
.elementor-button-link[style*="background-color"] .elementor-button-text,
.elementor-button[style*="background-color"] .elementor-button-text {
    color: inherit;
}
/* Quand le bouton a fond sombre détecté par classe utility */
.elementor-button-link[style*="background-color: rgb(22"],
.elementor-button-link[style*="background-color: rgb(0"],
.elementor-button-link[style*="background-color: rgb(15"],
.elementor-button-link[style*="background-color: rgb(27"],
.elementor-button-link[style*="background-color: rgb(42"],
.elementor-button-link[style*="background-color:#161616"],
.elementor-button-link[style*="background-color:#0F1E16"],
.elementor-button-link[style*="background-color:#1B3328"] {
    color: #FFFFFF !important;
}
.elementor-button-link[style*="background-color: rgb(22"] *,
.elementor-button-link[style*="background-color: rgb(0"] *,
.elementor-button-link[style*="background-color: rgb(15"] *,
.elementor-button-link[style*="background-color: rgb(27"] *,
.elementor-button-link[style*="background-color: rgb(42"] *,
.elementor-button-link[style*="background-color:#161616"] *,
.elementor-button-link[style*="background-color:#0F1E16"] *,
.elementor-button-link[style*="background-color:#1B3328"] * {
    color: #FFFFFF !important;
}

/* ============================================================
   2. Titres en vert MADAME : interdire `--forest` sur fond
   `--forest-deep` (cas du footer newsletter).
   On force du paper/blanc cassé pour le titre quand la section
   est en background sombre.
   ============================================================ */
.mpp-newsletter,
.mpp-footer-cta,
section[style*="background:#0F1E16"],
section[style*="background:#161616"],
section[style*="background:#0a0a0a"],
.has-bg-forest-deep,
.bg-forest-deep,
[data-bg="forest-deep"] {
    color: #FAFAF8;
}
.mpp-newsletter h1,
.mpp-newsletter h2,
.mpp-newsletter h3,
.mpp-newsletter .mpp-section-title,
section[style*="background:#0F1E16"] h1,
section[style*="background:#0F1E16"] h2,
section[style*="background:#0F1E16"] h3,
section[style*="background:#161616"] h1,
section[style*="background:#161616"] h2,
section[style*="background:#161616"] h3,
.has-bg-forest-deep h1,
.has-bg-forest-deep h2,
.has-bg-forest-deep h3,
.bg-forest-deep h1,
.bg-forest-deep h2,
.bg-forest-deep h3 {
    color: #FAFAF8 !important;
}
.mpp-newsletter h1 em,
.mpp-newsletter h2 em,
.mpp-newsletter h3 em,
section[style*="background:#0F1E16"] h2 em,
section[style*="background:#161616"] h2 em,
.has-bg-forest-deep h2 em,
.bg-forest-deep h2 em {
    /* Or chaud sur fond sombre — quiet luxury pour les italiques */
    color: #C9A84C !important;
    font-style: italic;
}

/* ============================================================
   3. Footer noir Astra/Shoptimizer : forcer texte blanc + liens
   suffisamment visibles
   ============================================================ */
footer[style*="background:#0"],
footer[style*="background:#1"],
.site-footer[style*="background:#0"],
.site-footer[style*="background:#1"],
.mpp-footer,
.madame-footer {
    color: #FAFAF8;
}
footer a,
.site-footer a,
.mpp-footer a,
.madame-footer a {
    color: inherit;
    text-decoration: none;
}

/* ============================================================
   4. Notice WC "Voir le panier" — bouton visible partout (pas
   uniquement sur cart page).
   ============================================================ */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-message a.button.wc-forward {
    background: #161616 !important;
    color: #FFFFFF !important;
    padding: 10px 18px !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px !important;
    border: 1px solid #161616 !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    float: right;
    margin-left: 16px;
}
.woocommerce-message .button:hover {
    background: #FFFFFF !important;
    color: #161616 !important;
}

/* ============================================================
   5b. Page Manifesto (charte éditoriale MADAME)
   ============================================================ */
.mpp-manifesto-hero,
.mpp-manifesto-promise {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 60px);
    text-align: center;
}
.mpp-manifesto-eyebrow {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #1B3328;
    margin-bottom: 24px;
}
.mpp-manifesto-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #161616;
    margin: 0 0 32px;
    text-wrap: balance;
}
.mpp-manifesto-title em {
    font-style: italic;
    color: #1B3328;
    font-weight: 500;
}
.mpp-manifesto-lead {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(17px, 1.6vw, 22px);
    line-height: 1.6;
    color: #6B6B6B;
    max-width: 640px;
    margin: 0 auto;
}
.mpp-manifesto-pillars {
    background: #FAFAF8;
    padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 80px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(32px, 4vw, 64px);
    max-width: 1200px;
    margin: 0 auto;
}
.mpp-manifesto-pillar strong {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 56px;
    color: #1B3328;
    display: block;
    margin-bottom: 16px;
    font-weight: 400;
}
.mpp-manifesto-pillar h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(22px, 2vw, 28px);
    color: #161616;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.mpp-manifesto-pillar p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #6B6B6B;
    font-family: 'Inter Tight', sans-serif;
}
.mpp-manifesto-promise {
    background: #0F1E16;
    color: #FAFAF8;
    max-width: none;
}
.mpp-manifesto-promise .mpp-manifesto-eyebrow { color: #C9A84C; }
.mpp-manifesto-promise .mpp-manifesto-title { color: #FAFAF8; }
.mpp-manifesto-promise .mpp-manifesto-title em { color: #C9A84C; }
.mpp-manifesto-promise .mpp-manifesto-lead { color: rgba(250,250,248,0.7); }
.mpp-manifesto-signature {
    text-align: center;
    padding: clamp(60px, 10vh, 100px) 20px;
    background: #FAFAF8;
}
.mpp-manifesto-mark {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 96px;
    color: #1B3328;
    line-height: 1;
    margin-bottom: 24px;
    font-weight: 400;
}
.mpp-manifesto-author {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    color: #6B6B6B;
    line-height: 1.6;
}
.mpp-manifesto-author em { color: #161616; font-weight: 500; }

/* ============================================================
   5c. Page 404 design MADAME (remplace le template Shoptimizer)
   ============================================================ */
body.error404 .site-content,
body.error404 #content,
body.error404 .content-area,
body.error404 main {
    background: #FAFAF8;
    min-height: 70vh;
    padding: 0;
}
body.error404 .site-content > *:not(.mpp-404),
body.error404 #content > *:not(.mpp-404),
body.error404 .entry-content > *,
body.error404 .page-header,
body.error404 .post-tags,
body.error404 .related-products,
body.error404 .ckit-popular-products,
body.error404 [class*="popular"],
body.error404 article.error-404 .page-content > *,
body.error404 article.error-404 .page-header { display: none !important; }
body.error404 article.error-404::before {
    content: '';
    display: block;
}
body.error404 article.error-404::after {
    content: 'M';
    display: block;
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 96px;
    color: #1B3328;
    margin: 80px auto 24px;
    font-weight: 400;
}

/* ============================================================
   5. Tous les boutons WC alt (panier proceed, account submit, etc.)
   ============================================================ */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.checkout-button,
.wc-proceed-to-checkout .checkout-button,
.woocommerce-account button[type="submit"] {
    background: #161616 !important;
    color: #FFFFFF !important;
    border: 1px solid #161616 !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-radius: 0 !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.checkout-button:hover,
.wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-account button[type="submit"]:hover {
    background: #1B3328 !important;
    border-color: #1B3328 !important;
    color: #FFFFFF !important;
}