/* Example CSS file */ 
@font-face {
    font-family: monument;
    src: url(fontes/monument/ABCMonumentGrotesk-Medium.woff2) format("woff2"), url(fontes/monument/ABCMonumentGrotesk-Medium.woff) format("woff");
}

@font-face {
    font-family: monument;
    src: url(fontes/monument/ABCMonumentGrotesk-MediumItalic.woff2) format("woff2"), url(fontes/monument/ABCMonumentGrotesk-MediumItalic.woff) format("woff");
    font-style: italic;
}

.mobile{
    display: none;
}

:root{
    --marge : 10px;
    --fs : 17px;
    --lightgray : rgb(199, 199, 199);
    --color : white;
}

::-webkit-scrollbar {
 opacity: 0;
 display: none;
}

.active{
    color: black;
}

.unactive{
    color: var(--lightgray);
}


em{
    font-style: italic;
}


body{
    scrollbar-color: rgba(0, 0 , 0, 0) rgba(0, 0 , 0, 0);
    background-color: var(--color);

}




a{
    text-decoration: none;
    color: unset;
}

body{
    margin: 0 auto;
    font-family: monument;
    font-size: var(--fs);
    line-height: 1.1;
    overflow-x: hidden;
}

#menu{
    color: var(--lightgray);

}

#menu a:hover{
    transition: .1s;
    color: black;
}

header{
    display: flex;
    position: sticky;
    top: 0;
    text-transform: uppercase;
    left: 0;
    width: 100%;
    padding: var(--marge);
    z-index: 2;
}

#pageNav{
    display: grid ;
    gap: var(--marge);
    grid-template-columns: repeat(3, 1fr);
}

#pageNav a{
   display: block;
   grid-column: span 1;
}

header section{
    width: calc(50% - (1.5 * var(--marge)));
}

#letterPage{
    display: flex;
    justify-content: space-between;
}

#letterPage div{
    width: 33%;
}

#letterPage a{
    cursor: pointer;
}

#letterPage div:first-of-type{
    display: flex;
    width: 32%;
    margin-right: 1%;
    justify-content: space-between;
}

#letterPage div:first-of-type a{
    width: 20%;
}

#informations{
    margin-left: calc(var(--marge) ) ;
}

.infoDiv{
    position: relative;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
}

#ctc span{
    grid-column: span 1;
}

.toCenter{
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.toRight{
    display: block;
    position: absolute;
    right: 0;
}


.Twocol{
    grid-column: span 3;
}

.Threecol{
    grid-column: span 2;
    text-align: right;
}

.tab{
    width: calc(var(--marge) * 4);
    display: inline-block;
    vertical-align: top;
}





@media (orientation: portrait){

    .mobile{
        display: contents;
    }

    .desktop{
        display: none;
    }

    header{
    display: block;
    width: calc(100% - (2 * var(--marge)));
    }

    header section{
        width: calc(100% );
    }

    #informations{
        margin-left: 0;
    }
    

    #menu{
        height: 20vh;
    }

    #pageNav{
        grid-template-columns: repeat(12, 1fr);
    }

    #pageNav a{
        grid-column: span 4;
    }


    #pageNav a:nth-of-type(1){
        grid-column: span 3;
    }
     #pageNav a:nth-of-type(2){
        grid-column: span 5;
    }

    #letterPage div:nth-of-type(1){
        width: 70%;
    }
     #letterPage div:nth-of-type(2){
        width: 33%;
    }

     #letterPage div:nth-of-type(3){
        display: none;
    }

    #letterPage div:first-of-type{
        display: flex;
        margin-right: 1%;
        justify-content: space-between;
    }

    #ctcB{
        grid-template-columns: repeat(1, 1fr);
    }

    #ctcBB{
        display: block ;
    }

    .Twocol{
        display: block;
        margin-left: 25%;
    }

    .Threecol{
        display: block;
        margin-left: 25%;
    }
  

    .toCenter{
        position: relative;
        left: 0;
        transform: unset;
    }

    #ctcM{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        position: relative;
        width: 100%;
    }
    #ctcM span:nth-of-type(1){
        grid-column: span 3;
    }
     #ctcM span:nth-of-type(2){
        grid-column: span 5;
    }

    #openMobile{
        display: block ;
        position: absolute ;
        top: 0;
        right: 0;
    }

    .close::before{
        content : "MENU";
        display: block;
    }

    .open::before{
        content :"FERMER";
        display: block;
    }

    .menuPart{
        max-height: 0;
        transition: .3s;
        overflow: hidden;
    }

    .menuPartOpen{
        max-height: 50vh;
    }

 


}