/**
 * NosJardinsEco Child V6 — Styles AEO (pages catégories, FAQ, CTA)
 * Système boutons : voir global-ui.css (source unique)
 */

/* ── FIX WPADMINBAR — offset sticky header/topbar ─────────── */
/* Quand l'admin bar est présente (body.admin-bar), WordPress    */
/* ajoute margin-top:32px sur html. Mais site-topbar (sticky    */
/* top:0) et site-header (sticky top:34px) ne tiennent pas       */
/* compte de ces 32px → au scroll, la topbar passe sous la barre */
/* admin et l'avatar flotte sur les icônes header.               */
.admin-bar .site-topbar {
    top: 32px !important;
}
.admin-bar .site-header {
    top: 66px !important; /* 32px adminbar + 34px topbar */
}
@media screen and (max-width: 782px) {
    /* Sur mobile, l'admin bar fait 46px */
    .admin-bar .site-topbar {
        top: 46px !important;
    }
    .admin-bar .site-header {
        top: 80px !important; /* 46px adminbar + 34px topbar */
    }
}

/* ── 1. BOUTONS — gold uniquement ─────────────────────────── */
.btn--gold {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 28px; border-radius: var(--radius-md);
    font-family: var(--font-body); font-size: 0.9rem; font-weight: var(--font-weight-semibold);
    text-decoration: none; border: 2px solid var(--color-gold,#e0a800);
    background: var(--color-gold,#e0a800); color: var(--color-text); cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}
.btn--gold:hover { background: var(--color-gold-light,#ffc107); border-color: var(--color-gold-light,#ffc107); }

/* ── 2. FIX HEADER ─────────────────────────────────────────── */
.site-header, .site-header *, .site-header::before, .site-header::after,
.site-header *::before, .site-header *::after { border-bottom: none !important; box-shadow: none !important; }
.site-branding, .site-branding::before, .site-branding::after,
.custom-logo-link, .custom-logo-link::before, .custom-logo-link::after,
.header-logo, .header-logo a, .site-header a img { border: none !important; outline: none !important; }
.site-header hr, .site-header + hr, .header-inner + hr,
hr.header-divider, .masthead + hr { display: none !important; }

/* Logo header — correction propre sans débordement */
a.site-logo {
    display: block;
    height: auto !important;
    max-width: 100%;
    overflow: hidden !important;
    flex-shrink: 1;
}

.custom-logo,
.custom-logo-link img,
.site-header .custom-logo-link img,
.site-branding img,
.header-logo img,
.site-logo__img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* Desktop */
.site-logo__img,
.site-branding img,
.header-logo img {
    max-height: 64px !important;
    max-width: 220px !important;
}

/* Mobile */
@media (max-width: 768px) {
    a.site-logo {
        max-width: 170px !important;
    }

    .site-logo__img,
    .site-branding img,
    .header-logo img {
        max-height: 46px !important;
        max-width: 170px !important;
    }

    .header-inner,
    .topbar-inner,
    .njeco-footer__inner,
    .njeco-footer__bottom-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ── 3. EN-TÊTE CATÉGORIE ──────────────────────────────────── */
.nje-cat-header { background: linear-gradient(135deg,var(--color-green-deep) 0%,var(--color-green) 100%); padding: 48px var(--container-padding) 40px; text-align: center; }
.nje-cat-header__inner { max-width: var(--container-max); margin: 0 auto; }
.nje-cat-header__title { font-family: var(--font-title); font-size: clamp(1.6rem,4vw,2.4rem); font-weight: var(--font-weight-bold); color: #fff; margin: 0 0 12px; }
.nje-cat-header__desc { font-size: 1rem; color: rgba(255,255,255,0.85); margin: 0; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ── 4. POINTS CLÉS ────────────────────────────────────────── */
.nje-points-cles { background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: var(--radius-md); padding: var(--spacing-md); margin: var(--spacing-lg) 0; }
.nje-points-cles__title { font-size: 1rem; font-weight: var(--font-weight-semibold); color: var(--color-green-deep); margin: 0 0 var(--spacing-sm); }
.nje-points-cles ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.nje-points-cles li { font-size: 0.9rem; padding-left: 20px; position: relative; }
.nje-points-cles li::before { content: '✓'; position: absolute; left: 0; color: var(--color-green); font-weight: bold; }

/* ── 5. FAQ SECTION ────────────────────────────────────────── */
.nje-faq-section { margin: var(--spacing-xl) 0; }
.nje-faq-section__title { font-family: var(--font-title); font-size: 1.4rem; font-weight: var(--font-weight-semibold); color: var(--color-green-deep); margin: 0 0 var(--spacing-md); }
.nje-faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 8px; overflow: hidden; }
.nje-faq-item__question { width: 100%; text-align: left; background: var(--color-white); border: none; padding: 16px 20px; font-size: 0.95rem; font-weight: var(--font-weight-semibold); color: var(--color-text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-body); transition: background var(--transition-fast); }
.nje-faq-item__question:hover { background: var(--color-bg); }
.nje-faq-item__question[aria-expanded="true"] { background: #e8f5e9; color: var(--color-green-deep); }
.nje-faq-item__icon { font-size: 1.2rem; transition: transform var(--transition-fast); flex-shrink: 0; }
.nje-faq-item__question[aria-expanded="true"] .nje-faq-item__icon { transform: rotate(45deg); }
.nje-faq-item__answer { padding: 0 20px 16px; font-size: 0.9rem; line-height: 1.7; color: var(--color-text); }
.nje-faq-item__answer[hidden] { display: none; }
.nje-faq-expert { background: #f1f8f1; border-left: 3px solid var(--color-green); padding: 10px 14px; margin-top: 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.85rem; font-style: italic; color: var(--color-green-deep); }

/* ── 6. CTA FINAL ──────────────────────────────────────────── */
.nje-cta-final { background: linear-gradient(135deg,var(--color-green-deep) 0%,var(--color-green) 100%); border-radius: var(--radius-lg); padding: var(--spacing-xl) var(--container-padding); text-align: center; margin: var(--spacing-xl) 0; }
.nje-cta-final__title { font-family: var(--font-title); font-size: 1.4rem; font-weight: var(--font-weight-bold); color: #fff; margin: 0 0 var(--spacing-sm); }
.nje-cta-final__desc { color: rgba(255,255,255,0.85); margin: 0 0 var(--spacing-md); }
.nje-cta-final .nje-btn { background: #fff; color: var(--color-green-deep); border-color: #fff; }
.nje-cta-final .nje-btn:hover { background: #e8f5e9; border-color: #e8f5e9; }

/* ── 7. MAILLAGE INTERNE ───────────────────────────────────── */
.nje-maillage { margin: var(--spacing-lg) 0; }
.nje-maillage__title { font-size: 0.85rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text); opacity: 0.5; margin: 0 0 12px; }
.nje-maillage__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nje-maillage__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--color-white); border: 1.5px solid var(--color-border); border-radius: 50px; font-size: 0.85rem; color: var(--color-text); text-decoration: none; transition: border-color var(--transition-fast), background var(--transition-fast); }
.nje-maillage__link:hover { border-color: var(--color-green); background: #e8f5e9; color: var(--color-green-deep); }

/* ── 8. NAVIGATION BOUTIQUE ────────────────────────────────── */
.nje-shop-intro { max-width: var(--container-max); margin: 0 auto var(--spacing-xl); padding: 0 var(--container-padding); }
.nje-shop-intro__title { font-family: var(--font-title); font-size: 1.2rem; font-weight: var(--font-weight-semibold); margin: 0 0 var(--spacing-sm); }
.nje-universe-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.nje-universe-nav__link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--color-white); border: 1.5px solid var(--color-border); border-radius: 50px; font-size: 0.875rem; color: var(--color-text); text-decoration: none; transition: border-color var(--transition-fast), background var(--transition-fast); }
.nje-universe-nav__link:hover { border-color: var(--color-green); background: #e8f5e9; }
.nje-universe-nav__icon { font-size: 1.1rem; }

/* ── 9. FORMULAIRES ────────────────────────────────────────── */
.wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select,
.wpforms-form input, .wpforms-form textarea, .wpforms-form select,
form.nje-native input, form.nje-native textarea, form.nje-native select {
    width: 100%; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
    padding: 10px 13px; font-size: 0.9rem; font-family: var(--font-body);
    transition: border-color var(--transition-fast);
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus,
.wpforms-form input:focus, .wpforms-form textarea:focus,
form.nje-native input:focus, form.nje-native textarea:focus {
    outline: none; border-color: var(--color-green); box-shadow: 0 0 0 3px rgba(52,164,46,0.12);
}
.nje-hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; }


/* ── 11. FIX HERO — rognage mot italic gradient ────────────── */
/* Le <em> en italic avec background-clip:text déborde à droite  */
/* display:inline-block + padding-right étend la boîte gradient  */
.hero__title em {
    display: inline-block;
    padding-right: 0.12em;
}

@media (max-width: 768px) {
    .nje-cat-header { padding: 36px var(--container-padding) 28px; }
}

/* ── 12. MOBILE — Conteneurs overflow Android ─────────────── */
@media (max-width: 768px) {
    /* Topbar : contenir le ticker animé (translateX) */
    .site-topbar,
    .site-topbar__inner { overflow: hidden !important; }

    /* Hero : contenir la wave SVG absolue */
    section.hero,
    .hero { overflow: hidden !important; }

    /* Sections avec pseudo-éléments absolus larges (Android bug) */
    .section-newsletter,
    .section-concept { overflow-x: hidden !important; }

    /* Footer : contenir tout contenu interne */
    .njeco-footer,
    .njeco-footer__main { overflow: hidden !important; }
}