@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;
}

.home {
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 8000;
}

.accueil {
  max-height: 2.5em;
}


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

body {
  display: flex;
  overflow-x: scroll;
  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;
  color: #001664;
}

button path {

  animation: swim 2s infinite alternate;
}


@keyframes swim {

  100% {
    d: path("m 9,47.4 h 1.2 c 0,0 2.3,-5.3 9.1,-11 v -2.1 c 0,0 -5.5,2.6 -8.2,5.3 0,-7 -2.9,-9.7 0.1,-20.7 C 13.8,9.4 11.1,6.2 11.1,0 10.2,0 9.3,0 8.4,0 c 0,6.2 2,9.6 -0.1,19 -3,13.4 0,13.5 0,20.5 0,0 -2.2,-2.5 -8.3,-5.3 v 2 c 0,0.1 6.8,5.8 9,11.2 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;
}

figure {
  cursor: pointer;
}

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.active {
  cursor:pointer;
}
figure.active figcaption {
  visibility: visible;
}

figure.active img {
  mix-blend-mode: multiply;
}

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




.blocbouton {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 90px;
  padding-right: 90px;
  
}

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

.fou path {
    animation: swim 2s infinite alternate;
}

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

.folle path {
    animation: swim 2s infinite alternate;
}

@keyframes swim {

  100% {
    d: path("m 9,47.4 h 1.2 c 0,0 2.3,-5.3 9.1,-11 v -2.1 c 0,0 -5.5,2.6 -8.2,5.3 0,-7 -2.9,-9.7 0.1,-20.7 C 13.8,9.4 11.1,6.2 11.1,0 10.2,0 9.3,0 8.4,0 c 0,6.2 2,9.6 -0.1,19 -3,13.4 0,13.5 0,20.5 0,0 -2.2,-2.5 -8.3,-5.3 v 2 c 0,0.1 6.8,5.8 9,11.2 z")
  }
}