:root{
    --fond-menu:white;
    --color-burger:blueviolet;
    --vitesse-burger-nav:.6s;
    --vitesse-burger-burger:.3s;
    --width-pan:100px;
}
nav {
    position: sticky;
    padding:8px;
    top:0;
    background-color: var(--fond-menu);
    z-index:1000;
    font-size: .8rem;
}
nav>ul{
    list-style: none;
    margin: 0 0;
    padding: 0 0;
}
nav>ul>li {
    padding: 1px;
}
nav>ul>li>a {
    text-decoration: none;
    color: inherit;
}

/* le NAV à deux classes, une desktop pour écran et mobile pour mobile, la mobile écrase la desktop en dessous de 920px  */
.desktop > ul {
    display: flex;
    flex-direction: row;
    gap:1rem;
    justify-content: center;
}
/* // les classes de nav :
// .desktop
// .mobile.in // visible
// .mobile.out // caché */


/* le backdrop qui s'affiche pour refermer le menu mobile */
.backdrop {
    position: fixed;
    inset:0;
    z-index:2;
    background-color: rgb(160, 160, 160);
    translate: -100%;
    opacity:0;
    transition: opacity ease-in-out 1s;
}
.drop {
    translate:0;
    opacity: .2;
}





/* media query on écrase et */
@media screen and (max-width:720px) {
   .mobile {
    position: fixed;
    top:120px;
    transition: all ease-in-out var(--vitesse-burger-nav);
    }
    .mobile.out{
        width:var(--width-pan);
        left:calc(-1*(var(--width-pan) + 20px));
    }
    .mobile.in {
        width:var(--width-pan);
        left:15px;
    }
    .mobile > ul {
        display: flex;
        flex-direction: column;
        gap:1rem;
        justify-content: start;
        width:fit-content;
    }
    .mobile > #hit {
        position: absolute;
        top:0;
        right: -55px;
        cursor: pointer;
        background-color: var(--fond-menu);
        padding: 10px;
        box-shadow: 0px 0px 5px 1px rgb(196, 196, 196);
    }
    #hit > span {
        transition: all ease-in-out var(--vitesse-burger-burger);
    }
    .mobile.out > #hit > span {
        width:20px;
        height: 4px;
        background-color:var(--color-burger);
        display: block;
        margin-bottom: 3px; 
        border-radius: 2px;
    }
    .mobile.in > #hit > span {
        width:20px;
        height: 4px;
        background-color:var(--color-burger);
        display: block;
        margin-bottom: 3px; 
        border-radius: 2px;
        transform-origin: 50% 50%;
    }
    .mobile.in > #hit > span:nth-of-type(1) {
        opacity: 0;
    }
    .mobile.in > #hit > span:nth-of-type(2) {
        transform:  translate(0px, -1px) rotate(-45deg);
    }
    .mobile.in > #hit > span:nth-of-type(3) {
        transform:  translate(0px, -8px) rotate(45deg);
    } 
}