@media screen and (max-width: 1079px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    body{
        position: relative;
        margin-top: var(--header-mobile-height);
    }
    #header-mobile{
        display: block;
        width: 100%;
        background-color: var(--col-red);
        border-bottom: 2px solid #fff;
        height: var(--header-mobile-height);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        transition: var(--transition-all);
    }
    .navOut #header-mobile{
        border-bottom: 2px solid var(--col-grey-c);
    }
    #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 {
        display: block;
        background-image: url(../img/logo_header_rouge_2.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
    }

    header{
        height: unset;
        width: 100%;
        position: fixed;
        top:var(--header-mobile-height);
        left:-150vw;
        transition: var(--transition-all);
        border-right: 1px solid var(--col-grey-c);
        z-index: 100;
        height: calc( 100vh - var(--header-mobile-height) );
        overflow-y: scroll;
    }
    .navOut header{
        left:0;
    }
    #header-content {
        width: 100%;
        max-width: 100%;
        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: hidden;
        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,
    #menu-ul-haut .menu-li>a{
        padding: .7em .7em;
    }
    #menu-ul-haut .menu-li>a{
        font-size: 80%;
        display: block;
    }

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