/* =========================================================
   BNI GESTION - HEADER
   Header fixe au-dessus du contenu
   Transparent au départ
   Vert dès qu'on scroll
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --bni-green: #247d47;
    --bni-green-dark: #176238;
    --bni-green-deep: #12532f;

    --bni-orange: #f39200;
    --bni-orange-dark: #dc8100;

    --white: #ffffff;
    --black: #111111;

    --header-height: 108px;

    --transition:
        0.4s cubic-bezier(0.4, 0, 0.2, 1);

}


/* =========================================================
   RESET
   ========================================================= */

.site-header *,
.site-header *::before,
.site-header *::after {
    box-sizing: border-box;
}

.site-header a {
    text-decoration: none;
}

body {
    margin: 0;
}

body.menu-open {
    overflow: hidden;
}


/* =========================================================
   HEADER PRINCIPAL
   ========================================================= */

/*
 * IMPORTANT :
 *
 * Le header est FIXE et placé AU-DESSUS du contenu.
 *
 * Il ne prend aucune place dans le flux de la page.
 *
 * Le premier composant de la page commence donc bien
 * à top: 0 derrière le header.
 *
 * Au chargement :
 * => totalement transparent
 */

.site-header {

    width: 100%;

    height: var(--header-height);

    position: fixed;

    top: 0;
    left: 0;

    z-index: 9999;

    background-color: transparent;

    transition:
        background-color var(--transition),
        box-shadow var(--transition),
        backdrop-filter var(--transition),
        -webkit-backdrop-filter var(--transition);

}


/* =========================================================
   HEADER APRÈS SCROLL
   ========================================================= */

/*
 * JavaScript ajoute .is-scrolled dès que
 * l'utilisateur quitte le haut de la page.
 *
 * Le header devient alors vert.
 */

.site-header.is-scrolled {

    background-color:
        var(--bni-green);

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

    box-shadow:
        0 4px 20px
        rgba(0, 0, 0, 0.12);

}


/* =========================================================
   CONTAINER
   ========================================================= */

.header-container {

    width: 100%;

    max-width: 1700px;

    height: 100%;

    margin: 0 auto;

    padding:
        0 7%;

    display: flex;

    align-items: center;

}


/* =========================================================
   LOGO
   ========================================================= */

.site-logo {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    color: var(--white);

    min-width: 225px;

}


.logo-image {

    display: none;

    width: 215px;

    height: auto;

}


.logo-text {

    color: var(--white);

}


.logo-title {

    display: flex;

    align-items: center;

    gap: 6px;

}


.logo-title strong {

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

    font-size: 26px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1px;

}


.logo-text small {

    display: block;

    margin-top: 3px;

    margin-left: 27px;

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

    font-size: 9px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.15px;

}


/* =========================================================
   LOGO ICON
   ========================================================= */

.logo-icon {

    width: 21px;

    height: 21px;

    display: grid;

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

    grid-template-rows:
        repeat(2, 1fr);

    gap: 2px;

    flex-shrink: 0;

}


.logo-icon span {

    display: block;

    background:
        var(--white);

}


.logo-icon span:nth-child(1) {
    opacity: 0.95;
}

.logo-icon span:nth-child(2) {
    opacity: 0.65;
}

.logo-icon span:nth-child(3) {
    opacity: 0.65;
}

.logo-icon span:nth-child(4) {
    opacity: 0.95;
}


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

.main-navigation {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(
            25px,
            2.1vw,
            40px
        );

    margin-left: 25px;

}


.nav-link {

    position: relative;

    color:
        var(--white);

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

    font-size: 17px;

    font-weight: 700;

    white-space: nowrap;

    padding:
        8px 0;

    transition:
        color var(--transition);

}


.nav-link:hover {

    color:
        var(--bni-orange);

}


.nav-link.active {

    color:
        var(--bni-orange);

}


/* =========================================================
   SOULIGNEMENT DES LIENS
   ========================================================= */

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 2px;

    background:
        var(--bni-orange);

    transition:
        width var(--transition);

}


.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}


/* =========================================================
   BOUTON DEVENIR CLIENT
   ========================================================= */

.client-button {

    flex-shrink: 0;

    min-width: 123px;

    height: 55px;

    padding:
        0 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--bni-orange);

    color:
        var(--white);

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

    font-size: 17px;

    font-weight: 700;

    transition:
        background-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);

}


.client-button:hover {

    background:
        var(--bni-orange-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, 0.18);

}


/* =========================================================
   HAMBURGER
   ========================================================= */

.hamburger {

    display: none;

    width: 48px;

    height: 48px;

    border: 0;

    padding: 0;

    background:
        transparent;

    cursor: pointer;

    position: relative;

    z-index: 10002;

}


.hamburger span {

    position: absolute;

    left: 11px;

    width: 26px;

    height: 2px;

    background:
        var(--white);

    transition:
        transform 0.35s ease,
        opacity 0.25s ease,
        top 0.35s ease;

}


.hamburger span:nth-child(1) {
    top: 15px;
}

.hamburger span:nth-child(2) {
    top: 23px;
}

.hamburger span:nth-child(3) {
    top: 31px;
}


/* =========================================================
   HAMBURGER -> X
   ========================================================= */

.hamburger.is-active span:nth-child(1) {

    top: 23px;

    transform:
        rotate(45deg);

}


.hamburger.is-active span:nth-child(2) {

    opacity: 0;

}


.hamburger.is-active span:nth-child(3) {

    top: 23px;

    transform:
        rotate(-45deg);

}


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

.mobile-menu {

    display: none;

}


.mobile-overlay {

    display: none;

}


/* =========================================================
   TABLET / PETIT DESKTOP
   ========================================================= */

@media (max-width: 1400px) {

    .header-container {

        padding:
            0 4%;

    }


    .main-navigation {

        gap: 22px;

        margin-left: 15px;

    }


    .nav-link {

        font-size: 15px;

    }


    .site-logo {

        min-width: 205px;

    }


    .logo-title strong {

        font-size: 23px;

    }


    .client-button {

        min-width: 190px;

        height: 60px;

        font-size: 18px;

    }

}


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

@media (max-width: 991px) {

    :root {

        --header-height: 82px;

    }


    .site-header {

        height:
            var(--header-height);

    }


    .header-container {

        padding:
            0 24px;

    }


    /* -----------------------------------------------------
       CACHER NAVIGATION DESKTOP
       ----------------------------------------------------- */

    .main-navigation,
    .client-button {

        display: none;

    }


    /* -----------------------------------------------------
       LOGO MOBILE
       ----------------------------------------------------- */

    .site-logo {

        min-width: auto;

    }


    .logo-title strong {

        font-size: 22px;

    }


    .logo-text small {

        font-size: 7px;

        margin-left: 25px;

    }


    .logo-icon {

        width: 19px;

        height: 19px;

    }


    /* -----------------------------------------------------
       HAMBURGER
       ----------------------------------------------------- */

    .hamburger {

        display: block;

        margin-left: auto;

    }


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

    .mobile-menu {

        display: block;

        position: fixed;

        top: 0;

        right: 0;

        width: 100%;

        height: 100dvh;

        background:
            linear-gradient(
                145deg,
                var(--bni-green) 0%,
                var(--bni-green-dark) 100%
            );

        z-index: 10000;

        transform:
            translateX(105%);

        visibility:
            hidden;

        transition:
            transform 0.5s
            cubic-bezier(
                0.77,
                0,
                0.175,
                1
            ),
            visibility 0.5s ease;

        overflow-y: auto;

        box-shadow:
            -15px 0 50px
            rgba(0, 0, 0, 0.2);

    }


    .mobile-menu.is-open {

        transform:
            translateX(0);

        visibility:
            visible;

    }


    /* =====================================================
       CONTENU MENU MOBILE
       ===================================================== */

    .mobile-menu-inner {

        min-height: 100%;

        padding:
            105px
            32px
            30px;

        display: flex;

        flex-direction: column;

    }


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

    .mobile-menu-brand {

        display: flex;

        align-items: center;

        gap: 12px;

        padding-bottom: 28px;

        border-bottom:
            1px solid
            rgba(255,255,255,0.15);

        color:
            var(--white);

    }


    .mobile-menu-brand strong {

        display: block;

        color:
            var(--white);

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

        font-size: 21px;

        font-weight: 800;

    }


    .mobile-menu-brand small {

        display: block;

        margin-top: 3px;

        color:
            rgba(255,255,255,0.7);

        font-size: 7px;

        font-weight: 700;

        letter-spacing:
            0.1px;

    }


    .mobile-logo-mark {

        width: 25px;

        height: 25px;

        display: grid;

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

        grid-template-rows:
            repeat(2, 1fr);

        gap: 2px;

    }


    .mobile-logo-mark span {

        background:
            var(--white);

    }


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

    .mobile-navigation {

        display: flex;

        flex-direction: column;

        margin-top: 18px;

    }


    .mobile-navigation a {

        min-height: 58px;

        display: flex;

        align-items: center;

        gap: 17px;

        border-bottom:
            1px solid
            rgba(255,255,255,0.1);

        color:
            var(--white);

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

        font-size: 19px;

        font-weight: 600;

        transition:
            color 0.3s ease,
            padding-left 0.3s ease;

    }


    .mobile-navigation a:hover,
    .mobile-navigation a.active {

        color:
            var(--bni-orange);

        padding-left: 7px;

    }


    /* =====================================================
       NUMÉROS
       ===================================================== */

    .mobile-number {

        width: 27px;

        color:
            rgba(255,255,255,0.38);

        font-size: 11px;

        font-weight: 500;

    }


    /* =====================================================
       FLÈCHE
       ===================================================== */

    .mobile-arrow {

        margin-left: auto;

        color:
            rgba(255,255,255,0.45);

        font-size: 20px;

        transition:
            transform 0.3s ease;

    }


    .mobile-navigation a:hover .mobile-arrow,
    .mobile-navigation a.active .mobile-arrow {

        color:
            var(--bni-orange);

        transform:
            translateX(5px);

    }


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

    .mobile-client-button {

        margin-top: 28px;

        min-height: 62px;

        padding:
            0 22px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        background:
            var(--bni-orange);

        color:
            var(--white);

        font-size: 18px;

        font-weight: 700;

        transition:
            background-color 0.3s ease,
            transform 0.3s ease;

    }


    .mobile-client-button:hover {

        background:
            var(--bni-orange-dark);

        transform:
            translateY(-2px);

    }


    .button-arrow {

        font-size: 23px;

    }


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

    .mobile-menu-footer {

        margin-top: auto;

        padding-top: 35px;

        display: flex;

        flex-direction: column;

        gap: 4px;

        color:
            rgba(255,255,255,0.4);

        font-size: 9px;

        font-weight: 700;

        letter-spacing: 1px;

    }


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

    .mobile-overlay {

        display: block;

        position: fixed;

        inset: 0;

        z-index: 9998;

        background:
            rgba(0, 0, 0, 0.45);

        backdrop-filter:
            blur(3px);

        -webkit-backdrop-filter:
            blur(3px);

        opacity: 0;

        visibility: hidden;

        transition:
            opacity 0.4s ease,
            visibility 0.4s ease;

    }


    .mobile-overlay.is-visible {

        opacity: 1;

        visibility:
            visible;

    }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media (max-width: 480px) {

    :root {

        --header-height: 72px;

    }


    .header-container {

        padding:
            0 18px;

    }


    .logo-title strong {

        font-size: 19px;

    }


    .logo-icon {

        width: 17px;

        height: 17px;

    }


    .logo-text small {

        font-size: 6px;

        margin-left: 23px;

    }


    .hamburger {

        width: 45px;

        height: 45px;

    }


    .mobile-menu {

        width: 100%;

    }


    .mobile-menu-inner {

        padding:
            95px
            25px
            25px;

    }


    .mobile-navigation a {

        min-height: 55px;

        font-size: 18px;

    }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-header *,
    .site-header *::before,
    .site-header *::after {

        transition: none !important;

        animation: none !important;

    }

}


/* =========================================================
   IMPORTANT
   ========================================================= */

/*
 * PAS DE padding-top SUR LE BODY.
 *
 * Le header est fixed et se place au-dessus du contenu.
 *
 * Le premier composant commence donc à :
 *
 *     top: 0
 *
 * Le header transparent laisse apparaître le hero
 * derrière lui.
 */

body {
    padding-top: 0;
}


/*
 * Le menu mobile reste fixed.
 */

.mobile-menu {
    box-sizing: border-box;
}