/* navbar */
    nav{
        width: 100%;
        padding: 8px 32px;
        background-color: var(--white);
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 16px;
        position: relative;
        z-index: 1000;
    }

    /* box logo */
        .box_logo{
            width: auto; height: 40px;
        }

        .box_logo img{
            width: 100%; height: 100%;
            object-fit: contain;
        }
    /* box logo */

    /* box menu */
        nav .niveau1{
            list-style: none;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .menuItem a, .menuItem span{
            cursor: pointer;
        }
        
        .menuItem a, .menuItem div{
            display: flex;
            align-items: center;
            gap: 3px;
            i{
                color: var(--third);
            }
        }

        .menuItem{
            position: relative;
            padding-bottom: 5px;
        }

        .menuItem:hover:before{
            content: '';
            width: 100%;
            height: 2px;
            position: absolute;
            left: 0; bottom: 0;
            background: var(--third);
            animation: navAmimate .3s linear;
        }

        li.active:before{
            content: '';
            width: 50%;
            height: 2px;
            position: absolute;
            left: 0; bottom: 0;
            background: var(--third);
        }

        @keyframes navAmimate {
            0%{
                width: 33.33%;
            }
            50%{
                width: 66.66%;
            }
            100%{
                width: 100%;
            }
        }

        /* sous menu */
            .menuItem div{
                display: flex;
                align-items: center;
            }

            .menuItem div i{
                color: var(--third);
            }

            .niveau2{
                position: absolute;
                top: 100%; left: 0;
                list-style: none;
                background: var(--white);
                min-width: max-content;
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);  
            }

            .niveau2.open {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }

            .subMenuItem{
                padding: 10px;
            }

            .subMenuItem:hover{
                background: var(--primary);
            }

            .subMenuItem:hover a{
                color: var(--white);
            }
        /* sous menu */
    /* box menu */

    /* box icon navbar */
        .box_icon_navbar{
            display: flex;
            align-items: center;
            gap: 16px;
            i{
                width: 30px; height: 30px;
                font-size: 20px;
                background-color: var(--primary);
                color: var(--white);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
            }
            i:hover{
                transform: translateY(-3px);
                background-color: var(--third);
                cursor: pointer;
            }
        }

        #btn_menu{
            display: none;
        }
    /* box icon navbar */
/* navbar */