/* ========================================================================
   Hi Afrika — CORRECTIFS v2.6 (chargé en tout dernier)
   ------------------------------------------------------------------------
   • Mode sombre lisible sur la BOUTIQUE (that woocommerce.css n'adaptait pas)
     et sécurisation des cartes produits (fond blanc → sombre).
   • Bouton mode sombre visible sur mobile.
   • Menu mobile renforcé.
   • Pied de page repensé, cohérent avec le reste du site.
   • Style des filtres de la colonne de gauche (Origine / Type / Prix).
   ======================================================================== */

/* ==================================================================
   1. BOUTON MODE SOMBRE — visible sur mobile
   ================================================================== */
@media (max-width: 768px) {
    .header-actions .theme-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ==================================================================
   2. MENU MOBILE — renforcement + hamburger UNIQUEMENT sur mobile
   ================================================================== */
/* Sur ordinateur : jamais de hamburger, seulement le menu horizontal. */
.menu-toggle { display: none !important; }

@media (max-width: 768px) {
    .menu-toggle { display: flex !important; }
    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(86%, 340px);
        height: 100vh;
        height: 100dvh;
        background: var(--ha-cream-light);
        flex-direction: column;
        align-items: stretch;
        padding: 88px 24px 24px;
        z-index: 1200;
        transition: right 0.38s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: var(--ha-shadow-xl, -10px 0 40px rgba(0,0,0,0.25));
        overflow-y: auto;
    }
    .main-navigation.is-open { right: 0 !important; }
    .mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(14, 14, 14, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease;
        z-index: 1150;
    }
    .mobile-overlay.is-active { opacity: 1; visibility: visible; }
    .nav-close { display: block; }
}

/* ==================================================================
   3. MODE SOMBRE — BOUTIQUE (redéfinit les variables locales)
   ================================================================== */
[data-theme="dark"] .ha-shop-breadcrumb,
[data-theme="dark"] .ha-shop-banner,
[data-theme="dark"] .ha-shop-wrap,
[data-theme="dark"] .ha-shop-usp {
    --shop-accent: var(--ha-gold-light, #D4A843);
    --shop-accent-dark: var(--ha-gold, #C9982E);
    --shop-ink: #F3E9D8;
    --shop-ink-soft: #C7B594;
    --shop-cream: #17100A;
    --shop-cream-2: #211710;
    --shop-line: rgba(245, 235, 216, 0.14);
}

/* Bannière & bande d'arguments : fonds codés en dur → sombres. */
[data-theme="dark"] .ha-shop-banner {
    background: linear-gradient(105deg, #241812 0%, #1C130C 60%, #150E08 100%) !important;
}
[data-theme="dark"] .ha-shop-usp {
    background: #1C130C !important;
    border-top-color: rgba(245, 235, 216, 0.12);
}
[data-theme="dark"] .ha-shop-breadcrumb { border-bottom-color: rgba(245, 235, 216, 0.12); }

/* Cartes produits : fond blanc codé en dur → sombre (sinon texte invisible). */
[data-theme="dark"] .woocommerce ul.products li.product,
[data-theme="dark"] .ha-shop-main ul.products li.product,
[data-theme="dark"] .product-card {
    background: #201811 !important;
    border-color: rgba(245, 235, 216, 0.10) !important;
}
[data-theme="dark"] .ha-shop-main ul.products li.product .woocommerce-loop-product__title,
[data-theme="dark"] .ha-shop-main ul.products li.product .price { color: #F3E9D8; }
[data-theme="dark"] .ha-card-excerpt { color: #C7B594; }

/* Cases à cocher des filtres : fond blanc → sombre. */
[data-theme="dark"] .ha-filter-box,
[data-theme="dark"] .ha-cat-list a { color: #E9DCC6; }
[data-theme="dark"] .ha-filter-box {
    background: #241A11;
    border-color: rgba(245, 235, 216, 0.28);
}
[data-theme="dark"] .ha-price-inputs input {
    background: #241A11;
    border-color: rgba(245, 235, 216, 0.22);
    color: #F3E9D8;
}

/* Zone de tri / résultats WooCommerce en sombre. */
[data-theme="dark"] .woocommerce .woocommerce-ordering select,
[data-theme="dark"] .woocommerce-result-count {
    color: #E9DCC6;
    background-color: transparent;
}

/* ==================================================================
   4. MODE SOMBRE — ACCUEIL (filets de sécurité)
   ================================================================== */
/* IMPORTANT : en mode sombre, --ha-cream-lighter DEVIENT foncé. On force donc
   des couleurs claires en dur pour que les titres restent visibles. */
[data-theme="dark"] .trust-badges { background: #1B1109 !important; }
[data-theme="dark"] .trust-badge {
    background: #241811 !important;
    border: 1px solid rgba(232, 180, 74, 0.16) !important;
    border-radius: 10px;
}
[data-theme="dark"] .trust-badge h3,
[data-theme="dark"] .trust-badge .badge-title { color: #F6EEDD !important; }
[data-theme="dark"] .trust-badge p,
[data-theme="dark"] .trust-badge .badge-text { color: rgba(246, 238, 221, 0.78) !important; }
[data-theme="dark"] .trust-badge .badge-icon,
[data-theme="dark"] .trust-badge svg { color: var(--ha-gold-light, #E6B44A) !important; stroke: var(--ha-gold-light, #E6B44A) !important; }
[data-theme="dark"] .trust-badge .ornament-small { background: var(--ha-gold, #D8A33A) !important; }
/* Tout bloc resté blanc en dur redevient sombre. */
[data-theme="dark"] .why-card,
[data-theme="dark"] .testimonial-card { background: #241811 !important; }
[data-theme="dark"] .why-card h3 { color: #F6EEDD !important; }
[data-theme="dark"] .why-card p { color: rgba(246, 238, 221, 0.78) !important; }

/* ==================================================================
   5. FILTRES DE LA COLONNE DE GAUCHE (Origine / Type / Prix)
   ================================================================== */
.ha-filter-group { margin: 0 0 22px; }
.ha-filter-group-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shop-ink, #2E2114);
    margin: 0 0 12px;
    opacity: 0.9;
}
.ha-filter-options { list-style: none; margin: 0; padding: 0; }
.ha-filter-options li { margin: 0 0 8px; }

.ha-filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--shop-ink-soft, #6A5B49);
    font-size: 0.92rem;
    line-height: 1.3;
    cursor: pointer;
    transition: color 0.2s;
}
.ha-filter-check:hover { color: var(--shop-accent, #BC5E2E); }
.ha-filter-box {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1.6px solid #C2B49E;
    border-radius: 5px;
    background: #fff;
    transition: all 0.2s;
    position: relative;
}
.ha-filter-check.is-checked { color: var(--shop-ink, #2E2114); font-weight: 600; }
.ha-filter-check.is-checked .ha-filter-box {
    background: var(--shop-accent, #BC5E2E);
    border-color: var(--shop-accent, #BC5E2E);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Filtre de prix */
.ha-price-form { display: flex; flex-direction: column; gap: 10px; }
.ha-price-inputs { display: flex; align-items: center; gap: 8px; }
.ha-price-inputs input {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1.5px solid #D8C9AE;
    border-radius: 9px;
    background: #fff;
    font-size: 0.9rem;
    color: var(--shop-ink, #2E2114);
}
.ha-price-inputs input:focus { outline: none; border-color: var(--shop-accent, #BC5E2E); }
.ha-price-apply {
    align-self: flex-start;
    background: var(--shop-ink, #2E2114);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.ha-price-apply:hover { background: var(--shop-accent, #BC5E2E); transform: translateY(-1px); }

/* Bouton réinitialiser plus lisible */
.ha-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--shop-accent, #BC5E2E);
    font-weight: 600;
    text-decoration: none;
}
.ha-filter-reset:hover { text-decoration: underline; }

/* ==================================================================
   6. PIED DE PAGE — refonte cohérente
   ================================================================== */
.site-footer {
    background: linear-gradient(165deg, #4A2E1B 0%, #3A2414 52%, #2C1A0E 100%);
    color: rgba(247, 239, 223, 0.84);
    margin-top: 0;
}
/* Liseré kenté doré conservé, un peu plus fin. */
.site-footer::before { height: 14px; opacity: 0.95; }

.footer-inner {
    grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
    gap: 48px;
    padding-top: 8px;
    padding-bottom: 56px;
}

.footer-logo .logo-text,
.footer-brand .logo-text {
    font-family: var(--ha-font-display, 'Fraunces', serif);
    font-size: 1.6rem;
    font-weight: 800;
    color: #F7EFDF;
    letter-spacing: 0.01em;
}
.footer-logo .logo-text span,
.footer-brand .logo-text span { color: var(--ha-gold-light, #D4A843); }

.footer-tagline { color: rgba(245, 235, 216, 0.7); font-size: 0.92rem; line-height: 1.75; max-width: 34ch; }

.footer-heading,
.footer-column h4 {
    font-family: var(--ha-font-display, 'Fraunces', serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: #F7EFDF;
    letter-spacing: 0.01em;
    margin: 0 0 18px;
    position: relative;
    padding-bottom: 12px;
}
.footer-heading::after,
.footer-column h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--ha-gold, #C9982E);
    border-radius: 2px;
}

.footer-menu li a,
.footer-column ul li a {
    color: rgba(245, 235, 216, 0.72);
    font-size: 0.9rem;
    transition: color 0.2s, padding-left 0.2s;
}
.footer-menu li a:hover,
.footer-column ul li a:hover {
    color: var(--ha-gold-light, #D4A843);
    padding-left: 5px;
}

/* Réseaux sociaux */
.footer-social a {
    background: rgba(245, 235, 216, 0.06);
    border: 1px solid rgba(245, 235, 216, 0.14);
    color: #F0E2C8;
}
.footer-social a:hover {
    background: var(--ha-gold, #C9982E);
    border-color: var(--ha-gold, #C9982E);
    color: #1A0F06;
    transform: translateY(-3px);
}

/* Newsletter */
.newsletter-input-wrapper {
    display: flex;
    gap: 8px;
    background: rgba(245, 235, 216, 0.06);
    border: 1px solid rgba(245, 235, 216, 0.16);
    border-radius: 999px;
    padding: 5px 5px 5px 8px;
    margin-top: 6px;
}
.newsletter-input-wrapper input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: #F5EBD8;
    padding: 9px 8px;
    font-size: 0.9rem;
}
.newsletter-input-wrapper input::placeholder { color: rgba(245, 235, 216, 0.45); }
.newsletter-input-wrapper input:focus { outline: none; }
.newsletter-input-wrapper .btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ha-gold, #C9982E);
    color: #1A0F06;
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.newsletter-input-wrapper .btn:hover { background: var(--ha-gold-light, #D4A843); transform: translateY(-1px); }
.newsletter-privacy { color: rgba(245, 235, 216, 0.5); font-size: 0.78rem; margin-top: 10px; }

/* Bas de page */
.footer-bottom {
    border-top: 1px solid rgba(245, 235, 216, 0.12);
    padding: 22px 0;
}
.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 26px;
    max-width: var(--ha-container, 1240px);
    margin: 0 auto;
    padding: 0 24px;
}
.footer-copyright, .footer-made-with { color: rgba(245, 235, 216, 0.6); font-size: 0.83rem; margin: 0; }
.footer-legal { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.footer-legal a { color: rgba(245, 235, 216, 0.6); font-size: 0.83rem; transition: color 0.2s; }
.footer-legal a:hover { color: var(--ha-gold-light, #D4A843); }
.footer-made-with span { color: var(--ha-terra, #BC5E2E); }

@media (max-width: 900px) {
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .footer-inner { grid-template-columns: 1fr; text-align: left; gap: 30px; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
    .footer-legal { flex-wrap: wrap; gap: 12px 18px; }
}

/* Le pied de page reste cohérent même en mode sombre (déjà foncé). */
[data-theme="dark"] .site-footer {
    background: linear-gradient(165deg, #3A2414 0%, #241608 100%);
}

/* ==================================================================
   7. PAGE « OUR STORY » (gabarit template-our-story.php)
   ================================================================== */
.ha-ourstory { overflow: hidden; }
.ha-ourstory .ha-os-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* --- Héros --- */
.ha-os-hero {
    position: relative;
    min-height: 66vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(150px, 22vh, 220px) 24px 90px;
    background-image: var(--os-hero);
    background-size: cover;
    background-position: center 30%;
    color: #F7EFDF;
}
.ha-os-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,10,6,0.55) 0%, rgba(14,10,6,0.62) 55%, rgba(14,10,6,0.82) 100%);
}
.ha-os-hero__inner { position: relative; z-index: 2; max-width: 760px; }
.ha-os-eyebrow {
    display: inline-block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ha-gold-light, #D4A843);
    margin-bottom: 6px;
}
.ha-os-hero h1 {
    font-family: var(--ha-font-display, 'Fraunces', serif);
    font-weight: 600;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    line-height: 1.05;
    color: #FBF4E6;
    margin: 4px 0 18px;
}
.ha-os-hero__tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    color: var(--ha-gold-light, #D4A843);
    margin: 0;
}

/* --- Intro poétique --- */
.ha-os-intro { background: var(--ha-cream, #F5EDE0); padding: clamp(56px, 9vw, 96px) 0; text-align: center; }
.ha-os-lead {
    font-family: var(--ha-font-display, 'Fraunces', serif);
    font-size: clamp(1.5rem, 3.4vw, 2.15rem);
    line-height: 1.35;
    color: var(--ha-text-dark, #2C1810);
    margin: 0 0 28px;
    font-weight: 500;
}
.ha-os-lines { list-style: none; margin: 0; padding: 0; }
.ha-os-lines li {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    color: var(--ha-text-medium, #5C3A20);
    padding: 10px 0;
    position: relative;
}
.ha-os-lines li + li { border-top: 1px solid rgba(140, 105, 68, 0.18); }

/* --- Texte + image --- */
.ha-os-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(30px, 5vw, 70px);
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 96px) 24px;
}
.ha-os-split__media { position: relative; }
.ha-os-split__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(42, 20, 5, 0.22);
}
.ha-os-split__media::after {
    content: '';
    position: absolute;
    left: -14px; bottom: -14px;
    width: 120px; height: 120px;
    border-left: 3px solid var(--ha-gold, #C9982E);
    border-bottom: 3px solid var(--ha-gold, #C9982E);
    border-bottom-left-radius: 18px;
    opacity: 0.7;
}
.ha-os-split__text p {
    font-size: clamp(1.02rem, 1.7vw, 1.16rem);
    line-height: 1.85;
    color: var(--ha-text-medium, #5C3A20);
    margin: 0 0 22px;
}
.ha-os-split__text p:last-child { margin-bottom: 0; }

/* --- Prose + citation --- */
.ha-os-prose { background: var(--ha-cream-light, #FAF4E8); padding: clamp(56px, 8vw, 96px) 0; text-align: center; }
.ha-os-prose > .ha-os-wrap > p {
    font-size: clamp(1.02rem, 1.7vw, 1.16rem);
    line-height: 1.85;
    color: var(--ha-text-medium, #5C3A20);
    margin: 0 auto 40px;
    max-width: 62ch;
}
.ha-os-quote {
    margin: 0;
    padding: 34px 20px 0;
    border-top: 1px solid rgba(140, 105, 68, 0.22);
}
.ha-os-quote__intro {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ha-text-light, #8B6944);
    margin-bottom: 16px;
}
.ha-os-quote__main {
    display: block;
    font-family: var(--ha-font-display, 'Fraunces', serif);
    font-size: clamp(1.4rem, 3.4vw, 2.1rem);
    line-height: 1.4;
    color: var(--ha-brown, #5C2E0E);
    font-weight: 500;
    max-width: 20ch;
    margin: 0 auto;
}

/* --- Bande finale --- */
.ha-os-bridge {
    background: linear-gradient(160deg, #2A1B0E 0%, #1E1208 60%, #170E06 100%);
    color: rgba(245, 235, 216, 0.9);
    text-align: center;
    padding: clamp(64px, 10vw, 120px) 24px;
}
.ha-os-bridge__inner { max-width: 720px; margin: 0 auto; }
.ha-os-bridge__lead {
    font-family: var(--ha-font-display, 'Fraunces', serif);
    font-size: clamp(1.8rem, 4.4vw, 2.8rem);
    color: #FBF4E6;
    margin: 0 0 24px;
    font-weight: 600;
}
.ha-os-bridge__line {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    color: rgba(245, 235, 216, 0.82);
    margin: 6px 0;
}
.ha-os-bridge__tagline {
    font-family: var(--ha-font-display, 'Fraunces', serif);
    font-size: clamp(1.2rem, 2.8vw, 1.7rem);
    letter-spacing: 0.02em;
    color: var(--ha-gold-light, #D4A843);
    margin: 8px 0 34px;
}
.ha-os-cta { display: inline-block; }

/* Ornement clair pour fond sombre */
.ornament-divider--light .diamond { background: var(--ha-gold, #C9982E); }
.ornament-divider--light::before,
.ornament-divider--light::after { background: rgba(245, 235, 216, 0.4); }

/* --- Responsive --- */
@media (max-width: 860px) {
    .ha-os-split { grid-template-columns: 1fr; }
    .ha-os-split__media { order: -1; }
    .ha-os-split__media::after { display: none; }
}
@media (max-width: 480px) {
    .ha-os-hero { min-height: 58vh; }
}

/* Cohérence mode sombre (les fonds crème deviennent sombres via les variables). */
[data-theme="dark"] .ha-os-lines li + li,
[data-theme="dark"] .ha-os-quote { border-color: rgba(245, 235, 216, 0.14); }
[data-theme="dark"] .ha-os-quote__main { color: var(--ha-gold-light, #D4A843); }

/* ==================================================================
   8. NOUVELLE PALETTE — plus lumineuse, chaleureuse et vendeuse
   ------------------------------------------------------------------
   Charge en dernier → redéfinit les variables de base. Accents plus
   saturés (appétit + envie d'achat), textes plus contrastés (fini le
   « flou »). Le mode clair est désormais le mode par défaut.
   ================================================================== */
:root {
    /* Accents chauds & vibrants (boutons, liens, pastilles) */
    --ha-orange:        #E86A1E;
    --ha-orange-bright: #F67F22;
    --ha-orange-soft:   #EE7526;
    --ha-terra:         #DA5A1C;

    /* Or miel, plus lumineux */
    --ha-gold:          #D8A33A;
    --ha-gold-light:    #E6B44A;
    --ha-gold-bright:   #F2C65A;

    /* Vert frais (repères « naturel ») */
    --ha-green:         #4F8F49;
    --ha-green-dark:    #33682A;
    --ha-green-light:   #74AE5E;

    /* Fonds crème un peu plus lumineux et propres */
    --ha-cream:         #F7EDDA;
    --ha-cream-light:   #FCF6EA;
    --ha-cream-lighter: #FFFCF4;
    --ha-white:         #FFFFFF;

    /* Textes plus contrastés (corrige l'effet « flou ») */
    --ha-text-darkest:  #1E0F04;
    --ha-text-dark:     #2A1509;
    --ha-text-medium:   #472B15;
    --ha-text-light:    #6B4626;
}

/* Boutons principaux : plus punchy + dégradé chaud pour « donner envie ». */
.btn-primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.single_add_to_cart_button.button {
    background: linear-gradient(135deg, var(--ha-orange) 0%, var(--ha-terra) 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(232, 106, 30, 0.28);
}
.btn-primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.single_add_to_cart_button.button:hover {
    background: linear-gradient(135deg, var(--ha-orange-bright) 0%, var(--ha-orange) 100%) !important;
    box-shadow: 0 12px 26px rgba(232, 106, 30, 0.38);
    transform: translateY(-2px);
}

/* Prix produits mis en valeur (couleur terracotta, plus lisible). */
.ha-shop-main ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--ha-terra) !important; }

/* Pastilles boutique plus vives */
.ha-badge--best  { background: var(--ha-terra) !important; color:#fff !important; }
.ha-badge--sale  { background: #D64545 !important; color:#fff !important; }
.ha-badge--new   { background: var(--ha-green) !important; color:#fff !important; }
.ha-badge--natural { background: var(--ha-green-dark) !important; color:#fff !important; }

/* Liens de navigation actifs / survol plus nets */
.nav-menu a:hover,
.main-navigation .nav-menu a:hover { color: var(--ha-terra); }

/* Titres de section un cran plus foncés = plus de contraste. */
.our-story-content h2,
.product-feature-info h2,
.ha-shop-main-title,
.ha-os-lead { color: var(--ha-text-dark); }

/* La bande d'engagements (accueil) en clair : titres bien lisibles. */
.trust-badge h3,
.trust-badge .badge-title { color: var(--ha-text-dark); }
.trust-badge p,
.trust-badge .badge-text { color: var(--ha-text-medium); }

/* ==================================================================
   9. EN-TÊTE SUR L'ACCUEIL — lisibilité au-dessus du héros sombre
   ------------------------------------------------------------------
   Sur l'accueil, l'en-tête est transparent au-dessus d'un héros sombre :
   le menu doit être CLAIR. Une fois défilé (fond glass clair), il redevient
   FONCÉ. Corrige le menu « trop sombre » de l'accueil.
   ================================================================== */
body.home .site-header .nav-menu a,
body.home .site-header .main-nav a,
body.home .site-header .primary-menu a,
body.home .site-header .header-actions a,
body.home .site-header .header-actions button,
body.home .site-header .lang-switcher__btn,
body.home .site-header .site-logo .logo-text {
    color: rgba(248, 241, 226, 0.96) !important;
}
body.home .site-header .site-logo .logo-text span { color: var(--ha-gold-light, #E6B44A) !important; }
body.home .site-header .lang-switcher__btn { border-color: rgba(248, 241, 226, 0.35) !important; }

/* Survol / item actif sur héros sombre → doré */
body.home .site-header .nav-menu a:hover,
body.home .site-header .nav-menu .current-menu-item > a,
body.home .site-header .header-actions a:hover,
body.home .site-header .header-actions button:hover {
    color: var(--ha-gold-light, #E6B44A) !important;
}

/* En-tête défilé sur l'accueil : fond clair opaque + texte foncé lisible */
body.home .site-header.is-scrolled {
    background-color: rgba(252, 246, 234, 0.94) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
}
body.home .site-header.is-scrolled .nav-menu a,
body.home .site-header.is-scrolled .main-nav a,
body.home .site-header.is-scrolled .primary-menu a,
body.home .site-header.is-scrolled .header-actions a,
body.home .site-header.is-scrolled .header-actions button,
body.home .site-header.is-scrolled .lang-switcher__btn,
body.home .site-header.is-scrolled .site-logo .logo-text {
    color: var(--ha-text-dark, #2A1509) !important;
}
body.home .site-header.is-scrolled .site-logo .logo-text span { color: var(--ha-terra, #DA5A1C) !important; }
body.home .site-header.is-scrolled .lang-switcher__btn { border-color: rgba(43, 37, 32, 0.22) !important; }
body.home .site-header.is-scrolled .nav-menu a:hover,
body.home .site-header.is-scrolled .nav-menu .current-menu-item > a,
body.home .site-header.is-scrolled .header-actions a:hover,
body.home .site-header.is-scrolled .header-actions button:hover {
    color: var(--ha-terra, #DA5A1C) !important;
}

/* ==================================================================
   10. OUR STORY — bande de photos produits (enrichissement)
   ================================================================== */
.ha-os-gallery { background: var(--ha-cream-light, #FCF6EA); padding: 0 24px clamp(56px, 8vw, 90px); }
.ha-os-gallery__grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.ha-os-gallery figure { margin: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 16px 40px rgba(42, 20, 5, 0.14); }
.ha-os-gallery img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
    .ha-os-gallery figure:hover img { transform: scale(1.05); }
}
@media (max-width: 720px) {
    .ha-os-gallery__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ha-os-gallery figure:first-child { grid-column: 1 / -1; }
}

/* ==================================================================
   11. MENU MOBILE — lisibilité (correctif v2.7.5)
   ------------------------------------------------------------------
   Le panneau coulissant a un fond crème clair : son texte doit être
   FONCÉ. La règle « texte clair » de l'en-tête d'accueil ne doit PAS
   s'y appliquer. On force aussi un panneau opaque au-dessus du voile,
   sans flou.
   ================================================================== */
@media (max-width: 768px) {
    body.home .site-header .main-navigation .nav-menu a,
    .site-header .main-navigation .nav-menu a,
    .main-navigation .nav-menu li a {
        color: var(--ha-text-dark, #2A1509) !important;
    }
    body.home .site-header .main-navigation .nav-menu .current-menu-item > a,
    .main-navigation .nav-menu li.current-menu-item a,
    .main-navigation .nav-menu li a:hover {
        color: var(--ha-terra, #DA5A1C) !important;
    }
    .main-navigation .nav-close,
    .main-navigation .site-logo .logo-text { color: var(--ha-text-dark, #2A1509) !important; }
    .main-navigation .site-logo .logo-text span { color: var(--ha-terra, #DA5A1C) !important; }

    /* Panneau bien opaque, au-dessus du voile */
    .main-navigation {
        background: #FCF6EA !important;
        z-index: 3000 !important;
        box-shadow: -12px 0 40px rgba(0,0,0,.28) !important;
    }
    /* ---------------------------------------------------------------
       CORRECTIF CLIC (v2.7.7) : le menu est DANS l'en-tête (contexte
       d'empilement z-index 1000). Le voile, lui, est au niveau du body.
       Il DOIT donc rester SOUS l'en-tête (< 1000), sinon il recouvre le
       menu et capte les taps → les liens deviennent incliquables.
       --------------------------------------------------------------- */
    .site-header { z-index: 1200 !important; }
    .mobile-overlay {
        background: rgba(20,12,6,.5) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        z-index: 800 !important;      /* sous l'en-tête (1200), au-dessus du contenu */
    }
    /* Sécurité : liens du menu bien interactifs */
    .main-navigation,
    .main-navigation .nav-menu,
    .main-navigation .nav-menu li,
    .main-navigation .nav-menu li a { pointer-events: auto !important; }
}