@font-face {
    font-family: 'EFCO Overhold - DEMO';
    font-style: normal;
    font-weight: normal;
    src: local('EFCO Overhold - DEMO'), url('../../link/typo/EFCO Overhold - DEMO.woff') format('woff');
}


@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2');
}

:root {
  /* jeu de couleur */
  --blanc:#FFF; 
  --jaune:#e5af03; 
  --noir:#27241c; 
  }

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


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

::selection {
 color:var(--jaune);
 background:var(--noir);
 }


html {
    --scroll-behavior: smooth;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
  background-color: #000;
  animation: body 1s linear;
  
  font-family: 'Poppins', sans-serif;
  line-height: 200%;
  font-weight: 100;
  letter-spacing:1px ;
  
  height:100%;
  border:none;
  padding: 0;
  margin: 0;
  overflow-x: hidden;

}

@keyframes body {
  72% { background-color: var(--noir);  }
  74% { background-color: var(--jaune); }
  100% { background-color: var(--jaune);  }
}




  /* texte */

h1 { 
font-family: "EFCO Overhold - DEMO", sans-serif;  
font-size: 5em;
line-height: 5rem;
font-weight: 900;
letter-spacing:4px ;
}



h2 { 
font-family: "EFCO Overhold - DEMO", sans-serif;  
font-weight: 900;
font-size:2.5em;
line-height: 3rem;
letter-spacing:1px ;
display:inline-block;
text-align: left;
border-radius: 5px;
padding-left:15px;
padding-right:15px;

}


h1 + h2 { 
margin-top:20px;
text-align: center;
}


h3 { 
font-family: "EFCO Overhold - DEMO", sans-serif;  
font-size: 2em;
line-height:1.5rem;
font-weight: 400;
letter-spacing:0px ;
padding: 0;
margin: 60px 10px 10px 10px;
text-align: center;
}




.exergue  { 

text-shadow: 
#00000088 0px 0 6px,
var(--jaune) 0px 0 40px,
var(--jaune) 0px 0 100px;
text-align: center;
font-weight: 900;
letter-spacing:4px ;
display:block;
text-align: center;
text-transform: uppercase;
}



p {
  text-align:left;
  max-width: 800px;
  font-size: 1em;
  font-weight:normal;

}

.ombre {
  text-shadow: var(--noir) 0px 0px 15px;

}

.lettrine:first-of-type:first-letter  {
  float: left;
  font-size: 4em;
  line-height: 100%;
  margin: 0.5rem 0px;
  padding-right: 0.2rem
  }

  .surlignage {
  padding: 0 3px 0 3px;
  border-radius: 2px;
  font-weight: 400;
  text-shadow: #00000000 0px 0px 0px;

}


.auteur {
  position: relative;
  height: 30px;
  text-align: center;
  font-size: 0.6em;
  font-weight: lighter;
  padding: 0px;
  z-index: 30;
  overflow: hidden;

}

strong {
padding: 0 3px 0 3px;
border-radius: 2px;
font-weight: 600;
}

ul {list-style: none}

li::before {
  content: "•"; 
  color: var(--jaune);
  display: inline-block; width: 1em;
  margin-left: -1em}



/* positionnement */

.up {
z-index: 10;}


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


.vertical {
display: flex;
align-items: center;

}
.horizontal {
display: flex;
justify-content: center;

}


.espace {
  height:10vh;
}


.bloctexte {
  padding: 0;
  margin: 0;
  z-index:4;
  position:relative;
  text-align: left;
  width: 100%;
  max-width: 800px;

}


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

}

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

}

.portejaune {
    background: url("../../img/portejaune.jpg");
    background-size: 100% 100%;

}

.porterouge {
    background: url("../../img/porterouge.jpg");
    background-size: 100% 100%;

}

.portebleue {
    background: url("../../img/portebleue.jpg");
    background-size: 100% 100%;

}

.by {
  text-align: center;
  font-size: 0.8em;
  line-height: 1.2em;
  font-weight: 100;
  
}


  /* ANIMATIONS DE LA PAGE */

  /* animation barre de progression progress */

.progress {
  height: 30px;
  width: 0%;
  position: fixed;
  bottom: 0;
  left: 0;
  animation: progress 1s linear;
}
@keyframes progress {
  to {
    background-color: var(--jaune);
    width: 120%;
  }
}


  /* animation de la porte */


.cadreporte {
  position: fixed;
  top: calc(50% - 35vh);
  left: calc(50% - 15vh);
  width: 30vh;
  height: 70vh;
  background-color: var(--jaune);
  background-size: cover;
  box-shadow: 0px 0px 0px var(--noir);
  animation: cadreporte 1s forwards  ;
  margin: -20px -20px -0px -20px;
  border: 20px solid var(--noir);

}

@keyframes cadreporte {
  to {
  box-shadow: -15px -5px 50px var(--jaune);
  }  }


.porte-wrap {
  --size: 50vh;
  position: fixed;
  top: calc(50% - 10vh);
  left: calc(50% + 10vh);
  width: 15vh;
  height: 0;
  perspective: 100vh;
}



.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: 30vh;
  height: 70vh;
  background-size: cover;
  top: calc(var(--size) * -.5);
  left: calc(var(--size) * -.5);
  animation: open 1s forwards ;
}

@keyframes open {
  0% {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../img/porte.jpg");
    background-size: cover;
  }
  5% {
    background: linear-gradient(to right, rgba(13, 10, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../img/porte.jpg");
    background-size: cover;
  }
  10% {
    background: linear-gradient(to right, rgba(25, 20, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../img/porte.jpg");
    background-size: cover;
  }
  15% {
    background: linear-gradient(to right, rgba(38, 28, 0, 0.5), rgba(0, 0, 0, 0.45)), url("../../img/porte.jpg");
    background-size: cover;
  }
  20% {
    background: linear-gradient(to right, rgba(51, 41, 0, 0.5), rgba(0, 0, 0, 0.45)), url("../../img/porte.jpg");
    background-size: cover;
  }
  25% {
    background: linear-gradient(to right, rgba(64, 54, 0, 0.5), rgba(0, 0, 0, 0.4)), url("../../img/porte.jpg");
    background-size: cover;
  }
  30% {
    background: linear-gradient(to right, rgba(77, 67, 0, 0.5), rgba(0, 0, 0, 0.4)), url("../../img/porte.jpg");
    background-size: cover;
  }
  35% {
    background: linear-gradient(to right, rgba(90, 80, 0, 0.5), rgba(0, 0, 0, 0.4)), url("../../img/porte.jpg");
    background-size: cover;
  }
  40% {
    background: linear-gradient(to right, rgba(102, 92, 0, 0.5), rgba(0, 0, 0, 0.35)), url("../../img/porte.jpg");
    background-size: cover;
  }
  45% {
    background: linear-gradient(to right, rgba(115, 105, 0, 0.5), rgba(0, 0, 0, 0.35)), url("../../img/porte.jpg");
    background-size: cover;
  }
  50% {
    background: linear-gradient(to right, rgba(128, 108, 0, 0.5), rgba(0, 0, 0, 0.35)), url("../../img/porte.jpg");
    background-size: cover;
  }
  55% {
    background: linear-gradient(to right, rgba(141, 121, 0, 0.5), rgba(0, 0, 0, 0.3)), url("../../img/porte.jpg");
    background-size: cover;
  }
  60% {
    background: linear-gradient(to right, rgba(153, 133, 0, 0.5), rgba(0, 0, 0, 0.3)), url("../../img/porte.jpg");
    background-size: cover;
  }
  65% {
    background: linear-gradient(to right, rgba(166, 146, 0, 0.5), rgba(0, 0, 0, 0.3)), url("../../img/porte.jpg");
    background-size: cover;
  }
  70% {
    background: linear-gradient(to right, rgba(179, 159, 0, 0.5), rgba(0, 0, 0, 0.3)), url("../../img/porte.jpg");
    background-size: cover;
  }
  75% {
    background: linear-gradient(to right, rgba(192, 172, 0, 0.5), rgba(0, 0, 0, 0.3)), url("../../img/porte.jpg");
    background-size: cover;
  }
  80% {
    background: linear-gradient(to right, rgba(204, 174, 0, 0.5), rgba(0, 0, 0, 0.3)), url("../../img/porte.jpg");
    background-size: cover;
  }
  85% {
    background: linear-gradient(to right, rgba(217, 197, 0, 0.5), rgba(0, 0, 0, 0.3)), url("../../img/porte.jpg");
    background-size: cover;
  }
  90% {
    background: linear-gradient(to right, rgba(230, 200, 0, 0.5), rgba(0, 0, 0, 0.3)), url("../../img/porte.jpg");
    background-size: cover;
  }
  95% {
    background: linear-gradient(to right, rgba(240, 210, 0, 0.5), rgba(0, 0, 0, 0.3x)), url("../../img/porte.jpg");
    background-size: cover;
  }
  100% {
    background: linear-gradient(to right, rgba(255, 220, 0, 0.5), rgba(0, 0, 0, 0.3)), url("../../img/porte.jpg");
    background-size: cover;
  }
}


  /* animation du scroll */

.godown {
  position: absolute;
  width:200px;
  border-width:0px;
  border:0px;
  bottom: 0;
  left: calc(50% - 140px)
    
}


#scroll a {
  padding-top: 60px;
  font-size: 0.8em;
  text-align: center;
}

#scroll a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(-45deg);
  animation: scrl 1.5s infinite;
  box-sizing: border-box;
}

@keyframes scrl {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

.scroll a {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  transform: translate(0, -50%);
  color: #FFF;
  font : normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}
.scroll a:hover {
  opacity: .5;
}


  /* animation des lien */

a {
  text-decoration:none;
    color: inherit;
  font-weight: 400;
}


.action {
    position: relative;
    text-decoration: underline;
    font-style: italic;
    padding: 0 5px 0 5px;
    
}


.action:after {
    content: '';
    display: block;
    position: absolute;
    bottom:0px;
    width: 0%;
    left: 0px;
    height: 25px;
    transition: 0.25s cubic-bezier(0.72,-0.01, 0.19, 0.92);
    z-index: -10;
    border-radius: 2px;

}


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

}

.txtblanc a:hover .action {
  color:var(--noir);
text-shadow: #00000000 0px 0px 0px;
  text-decoration: none;

}

.txtblanc .action:after, .fondtexte.txtblanc .action:after  {
background-color:var(--jaune)!important;

}


.action:hover:after {
    width: 100%;
          
  }
    




  /* nettoyage animation */

    :root * {
  /* Pause the animation */
  animation-play-state: paused;
  /* Bind the animation to scroll */
  animation-delay: calc(var(--scrollporte) * -1s);
  /* These last 2 properites clean up overshoot weirdness */
  animation-iteration-count: 1;
  animation-fill-mode: both;
}