#desktop_menu {
    background-color: black;
    height:125px;
    width:100%;
}
#connexion_desktop {
    padding-top:15px;
}

#connexion_desktop IMG {
    padding-left:15px;
}

#menu {
    display: flex;
    max-width:1200px;
    margin:auto;
    color:white;
    justify-content: space-evenly;
}

#menu UL {
    margin:0px;
    padding:0px;
    border:0px solid red;
    margin-top:10px;
}

#menu UL LI {
    display:inline-block;
    padding:7px 18px;
}

#topbar {
    display: none;
    z-index:999;
}


#menu-mobile {
    display:none;
    z-index:1000;
}


@media only screen and (max-width:1024px) {

    #menu-mobile {
        display:block;
        position:fixed;
        top:9px;
        left:0px;
    }

    #connexion_portable IMG {
        padding-left:10px;
    }

    #topbar {
        background-color: black;
        width:100%;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        padding:5px;
        box-sizing:border-box;
        border: 0px solid green;
        position:fixed;
        top:0px;
    }
    #desktop_menu {
        display: none;
    }

    #logo_top_bar {
        width:60px;
        margin: auto;
    }


    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #eeeeee;
        margin: 6px 0;
        transition: 0.4s;
    }


    
    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 6px);
    }
    
    .change .bar2 {opacity: 0;}
    
    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px);
    }
}