@font-face {
    font-family: 'Abordage';
    src: url('../FONT/Abordage-Regular.woff2') format('woff2'),
        url('../FONT/Abordage-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{
    padding: 0;
    margin: 0;
    font-family: 'Abordage';
}

body{
    width : 100%;
    height: 100%;
}

.ALLwrapper{
    display: flex;
    width : 100%;
    height: 100%;
}

header{
    z-index: 2;
    display: inline;

    box-sizing: border-box;
    position: sticky;
    top: 0;
    left: 0;

    min-width: 380px;
    width : 20vw;
    padding : 1em;
    height: 100vh;
    
    border-right: solid black 2px;
    background-color: white;
}

.BackMenu{
    display: block;
    height: auto;
    text-decoration: none;
    color: black;
    padding-bottom: 1em;
}

.OngletButton{
    display:flex;
    font-size: 1.5em;
}

.arrowDroite{
    margin-left: 0.2rem;
    margin-right:0em;
    opacity: 0%;
    transform: translateX(-100%);
    transition : all 0.4s ;
}

.OngletButton:hover > .arrowDroite{
    transform: translateX(0);
    margin-right: 0.5em;
    opacity: 100%;
}

.ClickedarrowDroite{
    transform: translateX(0);
    margin-right: 0.5em;
    opacity: 100%;
}

/*Menu a gauche quand les onglets sont ouverts*/

h4{
    transform: translateX(-18px) ;
    transition: all 0.4s;
}

.ClickedarrowDroite ~ h4 {
    transform: translateX(0);
}

.OngletButton:hover > h4{
    transform: translateX(-0%) ;
}

#Check-Apropos,#Check-Contact, #Check-Credits, #Check-Trier  {
    visibility: hidden;
    
    position: fixed;
    user-select: none; /*Voir pour d'autre trucs si besoin*/ 
}

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

.wrapperOnglets{
    box-sizing: border-box;
    z-index: 1;
    display: inline; 
    overflow: hidden;
}

.OngApropos{
    background-color: #fff675;
    width: 60vw;
}

.OngContact{
    background-color: #00ba5b;
    width: 30vw;
}

.OngTrier{
    background-color: #5daafc;
    width: 40vw;
}

.OngCredits{
    background-color: #ff75d1;
    width: 25vw;
}

.Ongretour{
    position: fixed;
    height: 100vh;
    width:100%
}

.Onglet{
    position: fixed;
    overflow: hidden;
    height: 100vh;
    border-right: solid black 2px;
    transform : translateX(0) ;
    transition: all 1s;
}

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

/*STYLES pour l'onglet trieur de projet )*/

.Check-Trieur{
    visibility: collapse;
}

.OngTrieurCheckers{
    display: inline-flex;
}

.OngTrier label{
    width: 80%;
    cursor: pointer;
}

.OngTrier h2 , .OngTrier label p{
    transition: all 0.3s ease-out;
}

.OngTrier h2 {
    transform : translateX(-18px);
}

.ArrowLeftAnim:hover .arrowDroite {
    transform: translateX(0);
    margin-right: 0.5em;
    opacity: 100%;
}

.ProjTrieurChecked:hover .arrowDroite{
    margin-right: 0;
}

.ArrowLeftAnim:hover h2 {
    transform: translateX(0);
}

.ProjTrieurChecked .arrowDroite{
    opacity: 100;
    transform: translateX(0);
}

.ProjTrieurChecked h2{ 
    transform: translateX(0);
}

.ProjTrieurChecked h2 , .ProjTrieurChecked p{ 
    padding-left: 1vw; 
}



/*--------------Style de texte--------------------------*/

h1{
    font-weight: 400;
    text-transform: none;
}

h3{
    font-size: unset;
    font-weight: 400;
    margin-bottom: 2em;
}

p{
    margin-bottom: 1em;;
}

a{
    text-decoration: none;
}

/*-------------Les colones contenant du contenu---------------*/
.coloneWidth_100{
    width: 100%;
}

.coloneWidth_50{
    width: 50%;
}

.coloneWidth_33{
    width: 33%;
}

.coloneContainer_Flex{
    display: inline-flex;
}

.coloneContainer_FlexDirection{
    flex-direction: column;
}

.coloneContainer_Wrap{
    flex-wrap: wrap;
}

.coloneBSizing{
    box-sizing: border-box;
}

.colonePaddingLR_1{
    padding-left: 1vw;
    padding-right: 1vw ;
}

.colonePaddingLR_2{
    padding-left: 2vw;
    padding-right: 2vw ;
}

.colonePaddingLR_3{
    padding-left: 3vw;
    padding-right: 3vw;
}

.colonePaddingLR_5{
    padding-left: 5vw;
    padding-right: 5vw;
}

.colonePaddingTB_1{
    padding-top: 1vw;
    padding-bottom: 1vw;
}

.colonePaddingTB_2{
    padding-top: 2vw;
    padding-bottom: 2vw;
}

.colonePaddingTB_5{
    padding-top: 5vw;
    padding-bottom: 5vw;
}

.coloneMarginTB_1{
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.coloneMarginT_5{
    margin-top: 5vw;
}

.coloneMarginT_1{
    margin-top: 1vw;
}

.coloneMarginB_5{
    margin-bottom: 5vw;
}