@font-face {
  font-family: 'regular';
  src: url('adelphe.ttf');
}

@font-face {
  font-family: 'italic';
  src: url('bold.ttf');
}

@font-face {
  font-family: 'alef';
  src: url('alef.ttf');
}

html {scrollbar-width: none;}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 100vh;
  color: #001664;
  font-family: 'regular';
  font-size: 1.3rem;
  line-height: 1.9rem;  
  -ms-overflow-style: none;  
}

#couv {
  position: relative;
  inset: 0;
  height: 100vh;
  width: 100vh;
  flex-shrink: 0;
    
    margin-left: 33%;
    margin-right: 33%;
    margin-top: 10%;
    color: #001664;
    padding: center;

}




button {
  background-color: transparent;
  border: none;
  position: relative;
  cursor: pointer;
}

button path {
    animation: swim 2s infinite alternate;
}
@keyframes swim {
    100% {
        d:path("m 9.5331218,9.1438047 h 2.9506192 c -0.889727,2.6252353 0.303158,5.2853503 0.744226,7.9818373 0.268752,2.034902 0.193115,4.476793 -0.257488,5.497193 0,0 1.244507,-0.322356 2.028404,0 -0.524342,1.538077 -1.72778,3.242675 -3.353785,4.528342 -1.9952075,-1.451155 -3.1023683,-2.655569 -3.8342197,-4.528342 0.6468351,-0.218312 1.9853275,0 1.9853275,0 0,0 1.3331972,-2.255776 0.1319543,-5.967802 C 9.3962128,15.011245 8.6799426,11.56033 9.5331267,9.1438047 Z")
    }
}





main {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
  height: 100vh;
  flex-direction: row;
}



.archive {
  height: 100vh;
  object-fit: contain;
}

#icon {
  width: 80px;
  align-items: center;
  justify-content: center;
}

.blocicon {
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  margin-left: 30em;
  margin-right: 20em;
}

.bloctexte {
  min-width: 30vw;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  padding: 80px;
}

.bloctexte sup {
    line-height: 0;
    font-size: .8em;
    position: relative;
    top: .075em;
}

#intro {
  min-width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-family: 'italic'; 
  color: #d20101;
  position: relative;
  padding: 8em;
  margin: 20em;
  font-size: 1.5rem;
  line-height: 2.1rem; 
}

#suite {
  height: 100vh;
}

#dessinyeux {
  position: absolute;
  left: -25%;
  top: 10%;
  width: 100px;
  opacity: 0;
  transition: opacity 2s ease;
}

#dessinyeux.visible {
  opacity: 1;
}

#dessinombre {
  position: absolute;
  left: 30%;
  top: -12%;
  width: 600px;
  opacity: 0;
  transition: opacity 2s ease;
}

#dessinombre.visible {
  opacity: 1;
}



figcaption {
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  padding: 1em;  
  visibility: hidden;  
  color:white;
  font-family: 'alef';
  font-size: 1rem;
    line-height: 1.2rem;
    max-width: 28ch;
    text-wrap: balance;
}
figure:hover figcaption{
  visibility: visible;
}
figure:hover img{
  mix-blend-mode:multiply;
}

figure {
  margin: 0;
  position: relative;
  background: #d20101;
}


.fou {
  position: relative;
  cursor: pointer;
  rotate: -90deg;
  text-decoration: none;
}

.fou path {
    animation: swim 2s infinite alternate;
}
@keyframes swim {
    100% {
        d:path("m 9.5331218,9.1438047 h 2.9506192 c -0.889727,2.6252353 0.303158,5.2853503 0.744226,7.9818373 0.268752,2.034902 0.193115,4.476793 -0.257488,5.497193 0,0 1.244507,-0.322356 2.028404,0 -0.524342,1.538077 -1.72778,3.242675 -3.353785,4.528342 -1.9952075,-1.451155 -3.1023683,-2.655569 -3.8342197,-4.528342 0.6468351,-0.218312 1.9853275,0 1.9853275,0 0,0 1.3331972,-2.255776 0.1319543,-5.967802 C 9.3962128,15.011245 8.6799426,11.56033 9.5331267,9.1438047 Z")
    }
}