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

    body{
        padding-top: var(--header-height);
    }

    header{
        position: fixed;
        height: var(--header-height);
        width: 100vw;
        background-color: white;
        z-index: 100;
        top:0;
    }

    nav{
        padding:0;
    }

    #liMenuHome{
        display: none;
    }

    #ulMenuMobile{
        justify-content: space-between;
        padding: 0 var(--header-padding-side);
        box-shadow: var(--box-shadow);
        z-index: 120;
    }


    #ulMenu{
        display: flex;
        position: fixed;
        top:var(--header-height);
        left: 100vw;
        background-color: white;
        width: 100vw;
        height: calc( 100vh - var(--header-height) );
        height: calc( 100dvh - var(--header-height) );

        padding: 0 2em;
        padding-top: 1.5em;

        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;

        transition: var(--transition-all);

        z-index: 100;
    }
    .navOut #ulMenu{
        left:0;
    }
        #ulMenu li{
            list-style-type:none;
            width: 100%;
        }
        #ulMenu li.liMenu>a{
            width: 100%;
            font-size: 190%;
            padding: .4em .5em;
            text-transform: uppercase;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: space-between;
            align-items: center;            
        }
        #divers-link:hover{
            color: inherit;           
        }
        #liMenu-alternants>a{
            color: var(--bg-alternants);
            font-weight: 600;        
        }
        #liMenu-entreprises>a{
            color: var(--bg-entreprises);
            font-weight: 600;        
        }
        #liMenu-tuteurs>a{
            color: var(--bg-tuteurs);
            font-weight: 600;        
        }
        #ulMenu li.liMenu>a:after{
            content:"\f078";
            font-family: var(--font-awesome);
            opacity:.5;
            font-size: 80%;
            transition: var(--transition-all);
        }
        #ulMenu li.liMenu.opened>a:after{
            transform: rotate(180deg);
        }
        .sous-menu{
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: flex-start;
            justify-content: flex-start;
            align-items: flex-start;
            
            max-height: 0;
            overflow: hidden;
            padding-left: 2em;
            padding-right: .2em;

            transition: var(--transition-all);
        }
        #sous-menu-alternants>a:before{ color: var(--col-alternants); }
        #sous-menu-entreprises>a:before{ color: var(--col-entreprises); }
        #sous-menu-tuteurs>a:before{ color: var(--col-tuteurs); }
        .sous-menu>a{
            font-size: 120%;
            padding: .4em
        }
        .sous-menu>a.sous-menu-mainlink{
            font-weight: 800;
            font-size: 130%;
        }
        .sous-menu>a.sous-menu-espace{
            font-weight: 600;
        }
        .sous-menu a:before{
            opacity: 1;
            font-weight: 600;
            padding-right: 1em;
        }
        .sous-menu>a.sous-menu-mainlink:before,
        .sous-menu>a.sous-menu-espace:before{
            font-weight: 800;
        }
        .liMenuSurvolMobile.opened>.sous-menu{
            padding-top: .8em;
            padding-bottom: .8em;
            max-height:100vh;
        }
        #ulMenu li.liMenu.liMenuSurvolMobile.opened>a{
            border-width: 2px;
        }
        #ulMenu #liMenuDivers.liMenuSurvolMobile.opened>a{
            border-color: #848484;       
        }
        #ulMenu #liMenu-alternants.liMenuSurvolMobile.opened>a{
            border-color: var(--col-alternants);       
        }
        #ulMenu #liMenu-entreprises.liMenuSurvolMobile.opened>a{
            border-color: var(--col-entreprises);       
        }
        #ulMenu #liMenu-tuteurs.liMenuSurvolMobile.opened>a{
            border-color: var(--col-tuteurs);       
        }
        #liMenuReseaux{
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: flex-end;
            align-items: center;
            padding-bottom: 50px;
        }
        #liMenuReseaux>div {
            display: block;
            height: unset;
            width: 100%;
        }
        #menu-search .fa-stack{
            display: none;
        }
        #header-search{
            position: inherit;
            top: unset;
            left: unset;
            max-height: unset;
            padding: 0.4em 0.5em;
            box-shadow: none;
            margin-top: 3em;
        }
        #header-search:hover, #header-search:focus {
            box-shadow: none;
        }
        #header-search form {
            width: 100%;
            padding:1em 0;
        }
        #search-input {
            background-color: transparent !important;
            border: 0;
            border-radius: 0;
            height: 3em;
            width: 100%;
            border-bottom: 1px solid #b6b6b6;
            font-size: var(--main-size);
        }
        #search-input:focus,
        #search-input:hover{
            box-shadow: none;
        }
        #header-search button {
            font-size: 150%;
            background-color: transparent;
            padding: .6em .5em .6em 1em;
            height: 3em;
            color: var(--main-grey);
            height: unset;
        }
        #menu-search:hover #header-search,
        #menu-search:focus-within #header-search{
            max-height: unset;
        }
        #liMenuReseaux #menu-pipe{
            display: none;
        }
        #liMenuReseaux #menu-sociaux{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            width: 100%;
            font-size: 150%;
        }
        #liMenuReseaux #menu-sociaux div{
            margin:.5em .2em;
        }
        #liMenuReseaux #menu-contact-a{
            display: block;
            font-size: 130%;
            margin: 1em auto;
            width: fit-content;
        }
        #liMenuReseaux #menu-contact-a:hover{
           color: white;
        }


    #menuToggle{
        display: block;
        font-size: 20px;
    }

    #menuToggle>.fa-stack .fa-circle{
        color: var(--bg-cfa);
    }

    #liMenuHomeMobile{
        position: unset;
        display: block;
        background: none;
        border-radius: none;
        box-shadow: none;
        transition: var(--transition-all);
        z-index: 10;
        width: var(--header-height);
        height: var(--header-height);
        top: 0;
    }
    #logoHome {
        background-size: 94%;
    }

    #ariane {
        top: 1em;
        left: 1em;
        width: 100%;
    }
    #ariane-content {
        width: 62%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        white-space: nowrap;
    }

    .page-titre{
        background-position-x: right;
    }
    .page-titre.cfa { background-image: url(../img/page-titre-cfa-mobile-1.jpg); }
    .page-titre.alternants { background-image: url(../img/page-titre-alternants-mobile-1.jpg); }
    .page-titre.entreprises { background-image: url(../img/page-titre-entreprises-mobile-1.jpg); }
    .page-titre.tuteurs { background-image: url(../img/page-titre-tuteurs-mobile-1.jpg); }

    .page-titre-text-container {
        font-size: 190%;
        width: 75%;
        transform: translateY(-33.33%) translateX(-10%);
        padding-left: 10%;
    }
    .page-titre-text {
        width: 100%;
        padding-left: 1em;
        padding-right: 1em;
        line-height: 1.7;
    }
    .page-titre-text.titre-long {
        line-height: 1.3;
        font-size: 80%;
        padding-top: .7em;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .page-titre.menu-3 {
        background-position-x: calc(75vw);
    }
}