@media screen and (max-width: 1079px) {
    body{
        position: relative;
        margin-top: var(--header-mobile-height);
        overflow-x: hidden;
        width: 100dvw;
    }
    #header-mobile{
        display: block;
        width: 100dvw;
        background-color: var(--col-pink-f);
        height: var(--header-mobile-height);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        transition: var(--transition-all);
        box-shadow: var(--box-shadow);
    }
    #menuToggle {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 30px;
        line-height: 45px;
        margin: 9px 0;
        padding: 0 10px 0 10px;
        background-color: rgba(255,255,255,.2);
        color: white;
        border-radius: 0 6px 6px 0;
    }
    #logoHome {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    #logoHome img{
        height: 60%;
        width: auto;
        margin-right: 1em;
    }

    header{
        height: unset;
        width: 100vw;
        position: fixed;
        top:var(--header-mobile-height);
        left:-150vw;
        transition: var(--transition-all);
        z-index: 100;
        height: calc( 100vh - var(--header-mobile-height) );
        overflow-y: scroll;
        border-top: 2px solid var(--col-pink);
    }
    .navOut header{
        left:0;
    }
    #header-content {
        width: 100%;
        max-width: 100vw;
        margin: 0 auto;
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 1.5em;
        height: auto;
    }
    nav {
        width: 100%;
        height: unset;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        overflow: visible;
        padding: 0;
    }
    #menu-ul {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
        padding: 0;
    }
        .menu-li {
            margin: 0;
            padding: 0;
        }
    #header-top-agences,
    #header-logo{
        display: none;
    }

    #header-top {
        height: unset;
        width: 100%;
        margin-top: .5em;
    }

    #menu-ul-haut {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
        padding: 0;
        margin:0;
    }
    #menu-ul-haut .menu-li {
        margin: 0;
    }

    nav a,
    nav .nav-a,
    #menu-ul-haut .menu-li>a
    {
        padding: 1em .7em;
    }
    #menu-ul-haut .menu-li>a{
        font-size: 80%;
        display: block;
    }

    #menu-ul-haut #header-top-search {
        margin-top: 1em;
        padding-left: .5em;
    }

    #header-langs{
        transform: unset;
    }
}