/* navbar */
    nav{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 32px;
        margin-bottom: 20px;
    }

    nav > ul{
        list-style: none;
        display: flex;
        gap: 32px;
    }

    nav > ul.niveau1 li{
        display: flex;
        align-items: center;
    }

    nav > ul.niveau1 li a{
        font-size: 17px;
        font-weight: bolder;
        text-transform: uppercase;
        position: relative;
        padding-bottom: 5px;
    }

    nav > ul.niveau1 li a.active::before, nav > ul.niveau1 li a:hover::before{
        content: '';
        width: 50%; height: 2px;
        background-color: var(--yellow);
        position: absolute;
        left: 0; bottom: 0;
        border-radius: 8px;
        animation: menu_animate .3s ease-in-out;
    }

    @keyframes menu_animate {
        0%{
            width: 0%;
        }
        100%{
            width: 50%;
        }
    }

    nav > ul.niveau1 li a:hover{
        color: var(--blue);
    }

    /* btn menu tel */
        .boxNavLogo{
            display: none;
        }
    /* btn menu tel */
/* navbar */

/* navbar */
    @media screen and (max-width: 1100px) {
        nav{
            position: fixed;
            top: 0; left: 0;
            width: max-content; height: 100dvh;
            max-width: 340px;
            align-items: flex-start;
            margin-bottom: 0;
            
            background-color: var(--blue);
            padding: 16px;
            border-right: 2px solid var(--yellow);
            z-index: 1000;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }

        nav.active{
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }

        nav > ul{
            display: flex;
            flex-direction: column;
        }

        .boxNavLogo{
            display: block;
            width: 100%; height: 70px;
            background-color: var(--white);
            padding: 5px;
            border-radius: 8px;
            margin-bottom: 16px;
            img{
                width: 100%; height: 100%;
                object-fit: contain;
            }
        }

        nav > ul{
            gap: 10px;
        }

        nav > ul.niveau1 li a{
            color: var(--white);
        }

        nav > ul.niveau1 li a:hover{
            color: var(--yellow);
        }
    }
/* navbar */