/* - - - - - NAV - - - - - */
nav {
    z-index: 6;
    position: relative;
    background-color: var(--color-green);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 70px;

    h1 {
        color: var(--color-white);
    }

    .navImgLogo {
        padding: 10px;
        width: 90px;
    }

    .navDivImgH1 {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .boutique{
        display: none;
    }
}

#navBar {
    z-index: -999;
    position: fixed;
    height: 100%;
    width: 100%;
    top: -100%;
    background-color: var(--color-green);
    transition: top 0.5s ease;

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        z-index: -1;
        margin-top: 100px;

        #first{
            margin-top: 80px;
        }
    }

    .navLeft {
        padding-top: 100px;
    }

    li {
        display: flex;
        place-content: center;
        padding: 8px 8px 8px 32px;
        justify-content: flex-start;
    }

    a {
        color: var(--color-white);
        font-size: 1rem;
        text-decoration: none;
    }

    .btq{display: flex;}

    #closeBtn {
        font-size: 3rem;
    }

}

#navBar.active {
    top: 0;
}

#openBtn {
    margin-right: 5px;
}

.burgerIconeOpen span {
    z-index: -1;
    background-color: var(--color-white);
    display: block;
    width: 35px;
    height: 5px;
    margin: 6px;
}

.burgerIconeClose span {
    background-color: var(--color-white);
    position: absolute;
    right: 0px;
    top: 25px;
    width: 35px;
    height: 5px;
    margin: 6px;
}


.un {
    transform: rotate(45deg);
}

.deux {
    transform: rotate(-45deg);
}

/* *************** CSS POUR Tablette / Ordinateur *************** */
/* XXX plus grand ou égale à XXXpx */
/* Tablette ≥ 426px */
@media screen and (min-width: 426px) {
}

/* LapTop (NoteBock) ≥ 769px */
@media screen and (min-width: 769px) {

    /* Menu Burger OFF */
    #openBtn {
        display: none;
    }

    nav{
        .navDivImgH1{
            width: 10%;
            justify-content: center;
        }

        .boutique{
            width: 10%;
            height: 70px;
            background-color: var(--color-yellow);
            display: flex;
            justify-content: center;
            align-items: center;
            
            a{
                text-transform: uppercase;
                text-decoration: none;
                color: black;
            }
        }
    }

    #navBar {
        position: relative;
        top: 0;
        width: 80%;

        ul {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            height: 100%;
            margin-top: 0;

            #first{
                margin-top: 0;
            }
        }

        li {
            padding: 0;
        }

        .btq{display: none;}
    }

    .navImgLogo {
        padding: 0;
        width: 75px;
    }

    #navBar a {
        text-align: center
    }


}


/* Desktop ≥ 1025px */
@media screen and (min-width: 1025px) {}