*{
    --marge1: 14px;  /* modifier dans script aussi*/
}
body{
    background-color: black;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

@font-face {
    font-family: "soraLight";
    src: local("soraLight"),
       url("sora/Sora-Light.otf") format("opentype");
  }

  @font-face {
    font-family: "soraRegular";
    src: local("soraRegular"),
       url("sora/Sora-Regular.otf") format("opentype");
  }
  
  @font-face {
    font-family: "soraSemiBold";
    src: local("soraSemiBold"),
       url("sora/Sora-SemiBold.otf") format("opentype");
  }

.ombrePortee{
    box-shadow: 0px 0px 30px 7px;
}


/*Info--------------------------------------*/

.blocTitreInfo{
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: row;
    transition-duration: 0.3s;
}
.titre{
    cursor: pointer;
    user-select: none;
}
.blocInfo{
    width: 580px;
    max-width: calc(100vw - 450px) ;
    display: none;
    margin: 5px 8px 5px 0px;
}
h1{
    margin: 0px 8px;
    text-align: center;
    font: 43px "soraRegular";
}
p{
    font: 16px "soraLight";
}
.nouvelleClasse{
    display: block;
}
.bold{
    font-family: "soraSemiBold"; 
}



/*tri--------------------------------------*/
.containerBlocTrie{
    z-index: 6;
    position: absolute; 
    right: var(--marge1);
    bottom: var(--marge1);
    background-color: rgb(255, 255, 255);
    width: calc(  (100vh - calc(var(--marge1)*2))  /  (37 / 7)  );
    height:  calc(100vh - calc(var(--marge1)*2)) ;
}

.blocTailleTrie1{
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0);
    width: 8vw;
    height: 70vh;
}

.blocTailleTrie2{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 5vw;
    height: 60vh;
    background-color: rgb(255, 255, 255);
}

/*regle--------------------------------------*/
.containerRegle{
    position: absolute;
    z-index: 5;
    right: 0px;
    bottom: 0px;
    background-color: rgb(255, 255, 255);
    width: calc(  calc(var(--marge1)*2) + (  (100vh - calc(var(--marge1)*2))  /  (37 / 7)  )  ) ;
    height:  100vh ;
}


.regleH{
    position: absolute;
    display: flex;
    justify-content: space-between;
    height: var(--marge1);

}
.regleHorizontal1{
    left: var(--marge1);
    width: calc(  (100vh - calc(var(--marge1)*2))  /  (37 / 7)  );
    align-items: flex-end;
}
.regleHorizontal2{
    bottom: 0px;
    left: var(--marge1);
    width: calc(  (100vh - calc(var(--marge1)*2))  /  (37 / 7)  );
}
.HrectRegleCM{
    border: solid #000000 1px;
    height: 100%;
}
.HrectRegle5mm{
    border: solid #000000 1px;
    width: 0px;
    height: 50%;
}


.regleV{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - calc(var(--marge1)*2));
    width: var(--marge1);
    top: var(--marge1);
}
.regleVertical1{
    align-items: flex-end;
}
.regleVertical2{
    right: 0;
}
.VrectRegleCM{
    border: solid #000000 1px;
    width: 100%;
    height: 0;
}
.VrectRegle5mm{
    border: solid #000000 1px;
    width: 50%;
    height: 0;
}



/*serie livre--------------------------------------*/
.imageLivre{
    user-select: none;
    /*cursor: none;*/
}
.containerSerieLivre {
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    align-items: flex-end;
    padding: 0 118px;
    height: calc(100vh - (var(--marge1)*2)) ;
}
.containerPourRotate {
    width: 100vh;
    height:calc( calc(  100vw - (  calc(var(--marge1)*2) + (  (100vh - calc(var(--marge1)*2))  /  (37 / 7)  )  )  ) - 12px) ;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    position: absolute;
    z-index: -10;
    overflow-x: hidden;
    margin: var(--marge1);
}
.containerReverseRotate{
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
}
.containerPourRotate::-webkit-scrollbar {
    display: none; /* Masque la barre de défilement */
}
.containerPourRotate {
    scrollbar-width: none; /* Pour les navigateurs qui supportent scrollbar-width */
    -ms-overflow-style: none; /* Pour Internet Explorer */
}


/*legende--------------------------------------------------*/
.suiveur{
    z-index: 8;
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255);
    pointer-events: none;
    max-width: 28vw;
    padding: 5px 8px;
}
.interLignePetit{
    margin: 0;
}




.none{
    display: none;
}