.bkgblanc{background-color:var(--blanc);}
.bkgnoir {background-color:var(--blanc);}
.bkgjaune {background-color:var(--blanc);}


.txtblanc {color:var(--noir)}
.txtnoir {color:var(--noir)}
.txtjaune {color:var(--noir)}

body {
  font-family:  sans-serif;
  background-color: #FFF !important;
  line-height: 180%;
  padding: 0PX 50px 0px 50px;
}


@keyframes body {
  0% { background-color: var(--blanc);  }
  100% { background-color: var(--blanc);  }
}

.progress, .scroll  {
display: none;
}


h1 { 
font-size: 4em;
line-height: 1em;  
color: var(--jaune);
margin: 0px 0px 0px 0px;
}

h2 { 
margin: 20px 0px 0px 0px;
font-size: 2em ;
line-height: 2rem;
}



h2.bkgjaune.txtblanc { 
background-color:var(--jaune);
color: var(--blanc);
}

h3 { 
font-size: 1.5em ;
margin: 30px 10px 10px 10px;
}





.exergue  { 
text-shadow: unset !important;

}

 .txtblanc a .action {
  color:var(--jaune);

}



.ombre {
  text-shadow: #FFFFFF00 0px 0px 00px;

}

.centrage{
position: relative;
min-height: 0vh;
}

.espace {
  height:20px;
}


.tier {
  position:relative;
  width: calc(33.33% - 40px);
  margin: 20px 0 20px 0;
  padding: 0px 10px 0 10px;;
  overflow: hidden;
  min-height: 500px;
  background-color: var(--blanc);
  border: 2px solid var(--noir);
  z-index: 15;
  float: left;

}

.milieu {
  margin: 20px 15px 20px 15px;

}

.portejaune {
   background-image: unset;

}

.porterouge {
background-image: unset;

}

.portebleue {
  background-image: unset;

}

.by {
 margin-top: 30px;

}

.by + .by {
 margin-top: 0px;

}


.auteur {
 margin-top: 30px;

}


  /* animation de la porte */


.cadreporte {
  position: relative;
  top: 70px;
  left: calc(50% - 40px);
  width: 80px;
  height: 200px;
  background-color: var(--jaune);
  background-size: cover;
  box-shadow: 0px 0px 0px var(--noir);
  margin: -20px -20px 40px -20px;
  border: 10px solid var(--noir);
  margin-bottom: 100px;

}


.porte-wrap {
  --size: 5px;
  position: absolute;
  top: 64px;
  width: 15vh;
  left: calc(50% - 46px);
  perspective: 200px;

}


.porte {
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);
  animation: porte 1s linear;
}
@keyframes porte {
  to {
    transform: rotateX(0deg) rotateZ(0deg) rotateY(-20deg);
  }
}

.open {
  position: absolute;
  width: 82px;
  height: 202px;
  background-size: cover;
  top: calc(var(--size) * -1);
  left: calc(var(--size) * -1);
  animation: open 1s forwards ;
}