:root {
    --ecmhi-green:#62db31;
    --ecmhi-green2:#91e746;
    --ecmhi-dark:#06100c;
    --ecmhi-dark2:#0c1a12;
}

/* ==========================================================
   OPTION MASQUAGE BWA
   ========================================================== */

body.ecmhi-hide-original #header {
    display:none !important;
}

/* ==========================================================
   HEADER INDEPENDANT
   ========================================================== */

#ecm-header-independent {
    position:relative;
    z-index:900;

    width:100%;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:#fff;

    box-shadow:
        0 4px 16px rgba(0,0,0,.10);
}

/* ==========================================================
   BARRE HAUTE
   ========================================================== */

#ecm-header-independent .ecmhi-trustbar {

    display:grid;

    grid-template-columns:
        1.1fr
        .9fr
        1.15fr
        1.05fr
        .85fr
        .8fr;

    align-items:center;

    min-height:58px;

    padding:0 3.5%;

    background:
        linear-gradient(
            90deg,
            #050d0a,
            #0a1710,
            #050d0a
        );

    color:#fff;
}

#ecm-header-independent .ecmhi-trust,
#ecm-header-independent .ecmhi-reviews,
#ecm-header-independent .ecmhi-contact {

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

    padding:0 14px;
}

#ecm-header-independent
.ecmhi-trust + .ecmhi-trust,
#ecm-header-independent
.ecmhi-reviews,
#ecm-header-independent
.ecmhi-contact {

    border-left:
        1px solid rgba(255,255,255,.14);
}

#ecm-header-independent strong {

    display:block;

    color:#fff;

    font-size:13px;
}

#ecm-header-independent small {

    display:block;

    margin-top:3px;

    color:#d9dfdb;

    font-size:10px;
}

#ecm-header-independent
.ecmhi-trust:first-child small {

    color:var(--ecmhi-green);

    font-weight:700;
}

#ecm-header-independent .ecmhi-icon {

    color:var(--ecmhi-green);

    font-size:27px;
}

#ecm-header-independent .ecmhi-stars {

    color:#ffc728;

    font-size:16px;

    letter-spacing:1px;
}

#ecm-header-independent .ecmhi-contact {

    justify-content:center;

    color:#fff !important;

    text-decoration:none !important;
}

/* ==========================================================
   CENTRE
   ========================================================== */

#ecm-header-independent .ecmhi-main {

    display:grid;

    grid-template-columns:
        minmax(300px,.75fr)
        minmax(520px,1.5fr)
        minmax(340px,.85fr);

    align-items:center;

    gap:30px;

    min-height:140px;

    padding:18px 3.5%;

    color:#fff;

    background:

        radial-gradient(
            ellipse at 55% 45%,
            rgba(96,220,48,.28),
            rgba(12,55,23,.23) 38%,
            rgba(4,17,10,.90) 76%
        ),

        repeating-linear-gradient(
            77deg,
            transparent 0 28px,
            rgba(88,205,45,.08) 29px 31px,
            transparent 32px 55px
        ),

        linear-gradient(
            95deg,
            #06100c,
            #153b1d,
            #06100c
        );
}

/* ==========================================================
   MARQUE
   ========================================================== */

#ecm-header-independent .ecmhi-brand {

    display:flex;

    flex-direction:column;

    color:#fff !important;

    text-decoration:none !important;
}

#ecm-header-independent
.ecmhi-brand-line1 {

    font-size:35px;

    font-style:italic;

    font-weight:800;
}

#ecm-header-independent
.ecmhi-brand-line1 strong {

    display:inline;

    color:var(--ecmhi-green);
}

#ecm-header-independent
.ecmhi-brand-line2 {

    margin-top:2px;

    font-size:26px;

    font-style:italic;
}

#ecm-header-independent
.ecmhi-brand > small {

    margin-top:11px;

    color:#fff;

    font-size:9px;

    letter-spacing:3px;
}

/* ==========================================================
   RECHERCHE
   ========================================================== */

#ecm-header-independent
.ecmhi-search-zone form {

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        180px;

    height:58px;

    padding:3px;

    background:#fff;

    border-radius:32px;

    box-shadow:
        0 5px 18px rgba(0,0,0,.22);
}

#ecm-header-independent
.ecmhi-search-zone input {

    width:100%;

    min-width:0;

    border:0;

    outline:0;

    padding:0 22px;

    border-radius:30px 0 0 30px;

    color:#555;

    font-size:14px;
}

#ecm-header-independent
.ecmhi-search-zone button {

    border:0;

    border-radius:29px;

    background:
        linear-gradient(
            90deg,
            #35b81d,
            #69dc31
        );

    color:#fff;

    font-size:14px;

    font-weight:800;

    cursor:pointer;
}

#ecm-header-independent
.ecmhi-search-zone > small {

    margin-top:7px;

    color:#fff;

    text-align:center;

    font-size:10px;
}

/* ==========================================================
   ACTIONS
   ========================================================== */

#ecm-header-independent
.ecmhi-actions {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:25px;
}

#ecm-header-independent
.ecmhi-actions > a {

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#fff !important;

    text-align:center;

    text-decoration:none !important;
}

#ecm-header-independent
.ecmhi-action-icon {

    margin-bottom:5px;

    color:#fff;

    font-size:30px;
}

#ecm-header-independent
.ecmhi-actions strong {

    font-size:12px;
}

#ecm-header-independent
.ecmhi-help {

    flex-direction:row !important;

    gap:8px;

    padding-left:22px;

    border-left:
        1px solid rgba(255,255,255,.25);

    text-align:left !important;
}

/* ==========================================================
   NAVIGATION
   ========================================================== */

#ecm-header-independent
.ecmhi-nav {

    display:grid;

    grid-template-columns:
        1.15fr
        .9fr
        1fr
        .9fr
        .85fr
        1.05fr;

    min-height:62px;

    background:#fff;
}

#ecm-header-independent
.ecmhi-nav > a {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:0 15px;

    border-right:
        1px solid #e5e9e6;

    color:#111 !important;

    font-size:13px;

    font-weight:800;

    text-decoration:none !important;
}

#ecm-header-independent
.ecmhi-nav > a:hover {

    background:#f3fff0;
}

#ecm-header-independent
.ecmhi-nav-main {

    justify-content:flex-start !important;

    padding-left:36px !important;

    background:
        linear-gradient(
            90deg,
            #63dd30,
            #94e846
        );
}

#ecm-header-independent
.ecmhi-second-life {

    color:#fff !important;

    background:
        linear-gradient(
            108deg,
            #63dc30 0 8%,
            #06100c 8% 100%
        ) !important;

    line-height:1.15;
}

/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width:1200px) {

    #ecm-header-independent
    .ecmhi-trustbar {

        grid-template-columns:
            repeat(3,1fr);

        row-gap:8px;

        padding-top:8px;
        padding-bottom:8px;
    }

    #ecm-header-independent
    .ecmhi-main {

        grid-template-columns:1fr;

        text-align:center;
    }

    #ecm-header-independent
    .ecmhi-actions {

        justify-content:center;
    }

    #ecm-header-independent
    .ecmhi-nav {

        grid-template-columns:
            repeat(3,1fr);
    }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:767px) {

    #ecm-header-independent
    .ecmhi-trustbar {

        display:none;
    }

    #ecm-header-independent
    .ecmhi-main {

        min-height:0;

        padding:16px 10px;
    }

    #ecm-header-independent
    .ecmhi-brand-line1 {

        font-size:27px;
    }

    #ecm-header-independent
    .ecmhi-brand-line2 {

        font-size:20px;
    }

    #ecm-header-independent
    .ecmhi-search-zone form {

        grid-template-columns:1fr;

        height:auto;

        padding:0;

        background:transparent;

        border-radius:0;

        box-shadow:none;

        gap:7px;
    }

    #ecm-header-independent
    .ecmhi-search-zone input {

        height:48px;

        border-radius:7px;
    }

    #ecm-header-independent
    .ecmhi-search-zone button {

        height:44px;

        border-radius:7px;
    }

    #ecm-header-independent
    .ecmhi-help {

        display:none !important;
    }

    #ecm-header-independent
    .ecmhi-nav {

        grid-template-columns:
            1fr 1fr;
    }

    #ecm-header-independent
    .ecmhi-nav > a {

        min-height:55px;

        padding:6px;

        font-size:10px;
    }
}
/* ==========================================================
   ECM HEADER INDEPENDANT V1.0.2
   MASQUAGE UNIQUEMENT DU PETIT BANDEAU BWA ORIGINAL

   Bandeau cible :
   PIECES DETACHEES | MACHINES | VUES ECLATEES
   TUTOS VIDEO | MARQUES

   Le header BWA lui-meme n'est pas modifie.
   ========================================================== */

body.ecmhi-independent-active .header__menu {
    display:none !important;
}

/* ==========================================================
   ECM HEADER INDEPENDANT V1.0.3
   MASQUAGE UNIQUEMENT DU BANDEAU BLANC BWA ORIGINAL

   Cible :
   - logo BWA
   - avis clients / nous contacter
   - mon compte / panier

   Le nouveau ECM Header Independant reste intact.
   ========================================================== */

body.ecmhi-independent-active #header .header-banner__wrapper,
body.ecmhi-independent-active #header .header-top__wrapper {
    display:none !important;
}

/* ==========================================================
   ECM HEADER INDEPENDANT V1.0.4
   FOND MODERNE SANS EFFET HERBE
   ========================================================== */

#ecm-header-independent .ecmhi-main {

    background:
        radial-gradient(
            circle at 60% 45%,
            rgba(73, 210, 47, .18) 0%,
            rgba(73, 210, 47, .08) 22%,
            rgba(73, 210, 47, 0) 48%
        ),
        linear-gradient(
            100deg,
            #07100c 0%,
            #0d2114 34%,
            #12351c 56%,
            #0a1b11 78%,
            #050c09 100%
        ) !important;

    background-image:
        radial-gradient(
            circle at 60% 45%,
            rgba(73, 210, 47, .18) 0%,
            rgba(73, 210, 47, .08) 22%,
            rgba(73, 210, 47, 0) 48%
        ),
        linear-gradient(
            100deg,
            #07100c 0%,
            #0d2114 34%,
            #12351c 56%,
            #0a1b11 78%,
            #050c09 100%
        ) !important;

    background-size:auto !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
}