@media (max-width: 999px){
    :root{
        --Topheaderheight : 10vh;
    }
    
    .ALLwrapper{
        flex-direction: column;
    }

    header {
        z-index : unset;
        width: 100vw;
        height:100%;
        top:var(--Topheaderheight);
        box-sizing: border-box;
        position: relative;
        padding: 0;
        border-right: unset;
        border-bottom: solid black 1px;
    }
    
    .TopHeader{
        z-index: 4;
        display: inline-flex;
        position: fixed;
        box-sizing: border-box;
        border-right: none;
        border-bottom: solid black 2px; /*voir si je peux pas l'enlever ?*/
        padding: 1em 1em 0.7em 1em;
        height: var(--Topheaderheight);
        width: 100vw;
        top: 0;
        background-color: white;
        justify-content: space-around   ;
    }

    .BackMenu{
        display: inline-flex;
        height: auto;
        text-decoration: none;
        color: black;
        max-width: 30%;
        justify-content: center;
        align-items: center;
        padding-bottom: 0;
    }

    .OngletButton{
        display:flex;
        align-items: center;
        font-size: 0.7em;
        width: 100%;
        height: 25%;
    }

    .OngletContainer{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /*Transformer le à propos en INFOS*/
    h4{
        transform: translateX(-5px);
    }

    /*AnimationduHeader*/
     .arrowDroite{
        position: relative;
        top:20%;
        left: 10%;
        margin-right:0em;
        transform-origin: center;
        transform: rotate(90deg);
        visibility:hidden;
        opacity: 0%;
        transition : all 0.8s;
    }

    .ClickedarrowDroite{
        visibility: visible;
        left: 0;
        margin-right: 0.2em;
        opacity: 100%;
    }

    /*--------------Style des Onglets--------------------------*/

    .wrapperOnglets{
        z-index: 2;
        position: relative;
        top: var(--Topheaderheight);
        display: inline-block;
        width : 100vw;
    }

    .Onglet{
        transform: translateY(0);
        font-size: 0.8em;
        top: var(--Topheaderheight);
        border-right: none;
        border-bottom: solid black 2px;
    }

    .Ongretour{
        width: 100vw;
        top: var(--Topheaderheight);
    } 

    .OngApropos{
        width: 100vw;
        height: 90vh;
    }

    .OngContact{
        width: 100vw;
        height:30vw;
    }

    .OngTrier{
        width: 100vw;
        height: 60vw;
    }

    .OngCredits{
        width: 100vw;
        height : 60vh;
    }

    .CloseOng{
        transform: translateY(-100%);
    }

  /*STYLES pour l'onglet trieur de projet )*/
    h2 { 
        font-size: 1.3em;
    }
    .OngTrier .arrowDroite {
        visibility: visible;
        transform: translateX(-18px);
    }
    
    .ArrowLeftAnim:hover .arrowDroite {
        transform: translateX(-18px);
        margin-right: 0em;
        opacity: 100;
    }

    .ArrowLeftAnim:hover h2 {
        transform: translateX(-10px);
    }

    .ProjTrieurChecked .arrowDroite{
        opacity: 100%;
        transform: translateX(-15px);
    }

    .ProjTrieurChecked h2{ 
        transform: translateX(-10px);
    }

    /*--------------Style des textes--------------*/
    h1{
        font-size: 1em;
        text-transform: none;
        display: flex;
        flex-wrap: wrap;
    }

    .camDeb{
        font-size: 1.3em;
    }

    .chapotrier{
        font-size: 1.3em;
    }

/*-------------Les colones contenant du contenu---------------*/

    .coloneContainer_Flex{
        flex-direction: column;
    }

    .coloneWidth_50{
        width: 100%;
    }

    .coloneWidth_33{
        width: 100%;
    }

    .MOBILE_ColoneWidth_33{
        width: 33%;
    }

    .MOBILE_ColoneWidth_50{
        width: 50%;
    }

    .MOBILE_coloneContainerFlexDirection{
        flex-direction: row;
    }

    .MOBILE_coloneContainerFlex{
        display: flex;
    }   
}