/**
 * NosJardinsEco Child V6 — UI Globaux (source unique composants)

/* ── 0. FIX SAFARI DARK MODE ───────────────────────────────── */
/* Sans color-scheme:light, Safari (dark mode) applique son fond */
/* gris natif sur html (transparent) → fond gris sur pages légales */
html {
    background-color: #F8F7F2;
    color-scheme: light;
}

/* ── 1. VARIABLES ──────────────────────────────────────────── */
:root {
    --color-green:       var(--primary-color, #34A42E);
    --color-green-deep:  #1F6F2B;   /* palette officielle */
    --color-gold:        #C8A75A;   /* or premium NosJardinsEco */
    --color-gold-light:  #E4C97A;   /* or clair NosJardinsEco */
    --color-white:       #ffffff;
    --color-bg:          #F8F7F2;   /* fond blanc cassé officiel */
    --color-text:        #3C3C3C;   /* gris texte officiel */
    --color-border:      #D9D9D9;   /* gris clair bordures officiel */
    --font-title:       var(--heading-font, 'Montserrat', sans-serif);
    --font-body:        var(--body-font, 'Inter', sans-serif);
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --spacing-xs:   8px;
    --spacing-sm:   16px;
    --spacing-md:   24px;
    --spacing-lg:   32px;
    --spacing-xl:   48px;
    --spacing-2xl:  64px;
    --container-max:     1200px;
    --container-padding: clamp(16px, 4vw, 48px);
    --radius-sm:   6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-full: 50px;
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
}

/* ── 2. SYSTÈME BOUTONS ────────────────────────────────────── */

/* Base commune — s'applique à tous les niveaux */
.nje-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 26px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    /* Niveau 1 par défaut */
    background: var(--color-green);
    border-color: var(--color-green);
    color: #fff;
    transition:
        background     var(--transition-fast),
        border-color   var(--transition-fast),
        color          var(--transition-fast),
        box-shadow     var(--transition-fast);
}
.nje-btn:hover {
    background: var(--color-green-deep);
    border-color: var(--color-green-deep);
    color: #fff;
    box-shadow: 0 4px 14px rgba(52,164,46,0.25);
    text-decoration: none;
}
.nje-btn:focus-visible {
    outline: 3px solid rgba(52,164,46,0.45);
    outline-offset: 3px;
}
.nje-btn:disabled,
.nje-btn[disabled] { opacity: 0.55; pointer-events: none; cursor: not-allowed; }

/* Niveau 1 — alias */
.nje-btn--primary                 { background: var(--color-green); border-color: var(--color-green); color: #fff; }
.nje-btn--primary:hover           { background: var(--color-green-deep); border-color: var(--color-green-deep); color: #fff; box-shadow: 0 4px 14px rgba(52,164,46,0.25); }

/* Niveau 2 — Secondaire */
.nje-btn--secondary               { background: transparent; border-color: var(--color-green); color: var(--color-green); box-shadow: none; }
.nje-btn--secondary:hover         { background: #e8f5e9; border-color: var(--color-green-deep); color: var(--color-green-deep); box-shadow: none; }

/* Niveau 3 — Neutre/Ghost */
.nje-btn--ghost                   { background: transparent; border-color: var(--color-border); color: var(--color-text); box-shadow: none; }
.nje-btn--ghost:hover             { background: var(--color-bg); border-color: rgba(44,44,44,0.3); color: var(--color-text); box-shadow: none; }

/* Tailles */
.nje-btn--sm { padding: 8px 18px; font-size: 0.82rem; }
.nje-btn--lg { padding: 15px 34px; font-size: 1rem; }

/* Lien texte */
.njeco-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-green);
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    padding-bottom: 1px;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.njeco-link:hover { color: var(--color-green-deep); border-bottom-color: currentColor; }

/* ── 3. HERO GÉNÉRIQUE ─────────────────────────────────────── */

/* Wrapper pleine largeur — neutralise le layout en colonnes du thème parent */
.njeco-page-wrap {
    width: 100%;
    max-width: 100%;
    float: none;
    clear: both;
    display: block;
    padding: 0;
    margin: 0;
}

.njeco-page-hero {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 40px var(--container-padding) 32px;
    margin-bottom: var(--spacing-xl);
}
.njeco-page-hero__inner { max-width: var(--container-max); margin: 0 auto; }
.njeco-page-hero__title { font-family: var(--font-title); font-size: clamp(1.4rem,3vw,2rem); font-weight: var(--font-weight-bold); color: var(--color-text); margin: 0 0 8px; }
.njeco-page-hero__sub   { font-size: 1rem; color: var(--color-text); opacity: 0.65; margin: 0; }

/* ── 4. BREADCRUMB ─────────────────────────────────────────── */
.njeco-breadcrumb { font-size: 0.82rem; color: var(--color-text); opacity: 0.55; margin-bottom: 12px; }
.njeco-breadcrumb a       { color: inherit; text-decoration: none; }
.njeco-breadcrumb a:hover { opacity: 1; text-decoration: underline; }

/* ── 5. CHIPS NAVIGATION (radius full = distinct des boutons) ─ */
.njeco-page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: var(--spacing-md) var(--container-padding);
    border-top: 1px solid var(--color-border);
    max-width: var(--container-max);
    margin: 0 auto;
}
.njeco-page-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 0.84rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    transition:
        border-color var(--transition-fast),
        background   var(--transition-fast),
        color        var(--transition-fast);
}
.njeco-page-nav__link:hover { border-color: var(--color-green); background: #e8f5e9; color: var(--color-green-deep); }

/* ── 6. RÉASSURANCE ────────────────────────────────────────── */
.njeco-reassurance          { background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: var(--radius-md); padding: var(--spacing-md); }
.njeco-reassurance__list    { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.njeco-reassurance__item    { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--color-green-deep); font-weight: var(--font-weight-medium); }
.njeco-reassurance__icon    { font-size: 1.2rem; flex-shrink: 0; }

/* ── 7. FOOTER ─────────────────────────────────────────────── */
.njeco-footer { background: #1b2d1b; color: rgba(255,255,255,0.78); margin-top: var(--spacing-2xl); }
.njeco-footer__main { border-bottom: 1px solid rgba(255,255,255,0.08); }
.njeco-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--container-padding) var(--spacing-lg);
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.5fr;
    gap: var(--spacing-lg) var(--spacing-xl);
    align-items: start;
}

/* Col marque */
.njeco-footer__logo-link    { display: inline-block; margin-bottom: var(--spacing-sm); max-width: 100%; }
.njeco-footer__logo         { max-height: 60px; max-width: 100%; width: auto; filter: none; }
.njeco-footer__logo-text    { font-family: var(--font-title); font-size: 1.2rem; font-weight: var(--font-weight-bold); color: #D4B15A; }
.njeco-footer__tagline      { font-size: 0.84rem; line-height: 1.65; color: rgba(212,177,90,0.75); margin: 0 0 var(--spacing-sm); max-width: 260px; }
.njeco-footer__reassurance  { list-style: none; padding: 0; margin: 0 0 var(--spacing-md); display: flex; flex-direction: column; gap: 7px; }
.njeco-footer__reassurance li { font-size: 0.8rem; color: rgba(212,177,90,0.72); display: flex; align-items: center; gap: 8px; }

/* Réseaux sociaux */
.njeco-footer__social       { display: flex; gap: 8px; flex-wrap: wrap; }
.njeco-footer__social-link  {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: rgba(200,167,90,0.10);
    border: 1px solid rgba(200,167,90,0.35);
    border-radius: var(--radius-sm);
    color: #D4B15A; text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.njeco-footer__social-link svg { display: block; flex-shrink: 0; }
.njeco-footer__social-link:hover { background: #C8A75A; border-color: #C8A75A; color: #1b2d1b; }

/* Cols nav */
.njeco-footer__col-title    { font-size: 0.7rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 1.2px; color: #C8A75A; margin: 0 0 var(--spacing-sm); }
.njeco-footer__nav-list     { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.njeco-footer__nav-list a   { font-size: 0.875rem; color: #D4B15A; text-decoration: none; transition: color var(--transition-fast); }
.njeco-footer__nav-list a:hover { color: #E4C97A; }

/* Col contact */
.njeco-footer__contact-list         { list-style: none; padding: 0; margin: 0 0 var(--spacing-md); display: flex; flex-direction: column; gap: 10px; }
.njeco-footer__contact-list li      { display: flex; align-items: flex-start; gap: 10px; font-size: 0.855rem; color: rgba(212,177,90,0.78); }
.njeco-footer__contact-list a       { color: #D4B15A; text-decoration: none; transition: color var(--transition-fast); word-break: break-all; }
.njeco-footer__contact-list a:hover { color: #E4C97A; }
.njeco-footer__contact-icon         { flex-shrink: 0; width: 18px; text-align: center; margin-top: 1px; color: #C8A75A; }

/* Newsletter */
.njeco-footer__newsletter-label { font-size: 0.7rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 1px; color: #C8A75A; margin: 0 0 10px; }
.njeco-footer__nl-row   { display: flex; gap: 6px; }
.njeco-footer__nl-input {
    flex: 1; background: rgba(255,255,255,0.07);
    border: 1px solid rgba(200,167,90,0.30);
    border-radius: var(--radius-sm);
    padding: 10px 12px; font-size: 0.84rem; font-family: var(--font-body); color: #E4C97A;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.njeco-footer__nl-input::placeholder { color: rgba(212,177,90,0.40); }
.njeco-footer__nl-input:focus  { outline: none; border-color: #C8A75A; background: rgba(255,255,255,0.11); }
.njeco-footer__nl-btn   {
    background: var(--color-green); border: 2px solid var(--color-green);
    border-radius: var(--radius-sm); padding: 10px 14px;
    font-size: 0.84rem; font-weight: var(--font-weight-semibold); color: #fff;
    cursor: pointer; font-family: var(--font-body); white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.njeco-footer__nl-btn:hover  { background: var(--color-green-deep); border-color: var(--color-green-deep); }
.njeco-footer__nl-legal      { font-size: 0.7rem; color: rgba(212,177,90,0.50); margin: 8px 0 0; }

/* Barre bas */
.njeco-footer__bottom        { background: rgba(0,0,0,0.28); }
.njeco-footer__bottom-inner  {
    max-width: var(--container-max); margin: 0 auto;
    padding: 14px var(--container-padding);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-sm);
}
.njeco-footer__copyright         { font-size: 0.76rem; color: rgba(212,177,90,0.60); margin: 0; }
.njeco-footer__legal-links       { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.njeco-footer__legal-links a,
.njeco-footer__legal-links button {
    font-size: 0.76rem; color: #D4B15A; text-decoration: none;
    transition: color var(--transition-fast);
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: var(--font-body); line-height: inherit;
}
.njeco-footer__legal-links a:hover,
.njeco-footer__legal-links button:hover { color: #E4C97A; }

/* Signature agence */
.njeco-footer__studio { margin: 0; }
.njeco-footer__studio a {
    font-size: 0.76rem;
    font-weight: var(--font-weight-semibold);
    color: #C8A75A;
    text-decoration: none;
    letter-spacing: 0.4px;
    transition: color var(--transition-fast);
}
.njeco-footer__studio a:hover { color: #E4C97A; }

/* ── 8. FORMULAIRE PARTENARIAT ─────────────────────────────── */
.nje-partner-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}
.nje-partner-form__field { display: flex; flex-direction: column; gap: 6px; }
.nje-partner-form__field label { font-size: 0.875rem; font-weight: var(--font-weight-medium); color: var(--color-text); }
.nje-partner-form__field input,
.nje-partner-form__field select,
.nje-partner-form__field textarea {
    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);
    background: var(--color-white); color: var(--color-text);
    transition: border-color var(--transition-fast);
}
.nje-partner-form__field input:focus,
.nje-partner-form__field select:focus,
.nje-partner-form__field textarea:focus {
    outline: none; border-color: var(--color-green); box-shadow: 0 0 0 3px rgba(52,164,46,0.12);
}
.nje-partner-form__field--full { grid-column: 1 / -1; }
.nje-partner-form__actions { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; }
.nje-partner-form__legal { font-size: 0.76rem; color: var(--color-text); opacity: 0.45; margin: 0; }
.nje-partner-form__status { margin-top: var(--spacing-sm); font-size: 0.875rem; min-height: 1.5em; }

/* ── 10. BOUTON RETOUR EN HAUT ─────────────────────────────── */
.nje-back-to-top {
    position: fixed;
    bottom: 28px;
    right: 24px;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1b2d1b;
    border: 1.5px solid #C8A75A;
    color: #D4B15A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.40);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-base);
    opacity: 1;
}
.nje-back-to-top:hover {
    background: #C8A75A;
    color: #1b2d1b;
    border-color: #C8A75A;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(200,167,90,0.35);
}
.nje-back-to-top svg { display: block; }
.nje-back-to-top[hidden] { display: none; }
@media (max-width: 640px) {
    .nje-back-to-top { bottom: 20px; right: 16px; width: 40px; height: 40px; }
}

/* ── 11. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1100px) {
    .njeco-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
}
@media (max-width: 768px) {
    /* Topbar : padding 32px du parent → réduit sur mobile */
    .topbar-inner { padding-left: 16px !important; padding-right: 16px !important; }
    /* Footer : padding excessif du parent cause 720px sur mobile */
    .njeco-footer__inner { grid-template-columns: 1fr; gap: var(--spacing-md); padding-left: 16px !important; padding-right: 16px !important; }
    .njeco-footer__bottom-inner { padding-left: 16px !important; padding-right: 16px !important; }
    .njeco-footer__main  { overflow: hidden; }
    /* Header : padding fixe 32px du thème parent sur mobile */
    .header-inner { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 640px) {
    .njeco-page-hero        { padding: 28px var(--container-padding) 24px; }
    .njeco-page-nav         { gap: 8px; }
    .njeco-page-nav__link   { font-size: 0.8rem; padding: 7px 14px; }
    .njeco-reassurance__list { flex-direction: column; gap: var(--spacing-sm); }
    .njeco-footer__inner    { grid-template-columns: 1fr; gap: var(--spacing-lg); padding-top: var(--spacing-lg); }
    .njeco-footer__tagline  { max-width: none; }
    .njeco-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .njeco-footer__legal-links  { gap: 4px 10px; }
    .njeco-footer__studio   { margin-top: 2px; }
    /* Partenariat — formulaire mobile */
    .nje-partner-form__grid      { grid-template-columns: 1fr; }
    .nje-partner-form__field--full { grid-column: 1; }
    .nje-partner-form__actions   { flex-direction: column; align-items: flex-start; }
}
