@font-face{
  font-family: "Baskervville";
  src: url("fonte/Baskervville-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Baskervville";
  src: url("fonte/Baskervville-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}



html, body {
  height: 100%;
}
body {
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  font-family: "Baskervville";
}
main {
  overflow: hidden;
  overflow-x: scroll;
  display: flex;
}
article {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  min-width: 55vw; /* la largeur de chaque article est ici similaire mais peut être modifiée */
  position: relative;
  z-index: 0;
}

.stop{
  opacity: 100%;
  position: absolute;
top: 92vh;
  left: 2vw;
   background-color: rgb(255, 255, 255);
  border: 1px solid #555555;
  color: rgb(0, 0, 0);
}

.stop:hover{

  transform: rotate(3deg);

}



#bouton2{
  top: 86vh;
text-decoration: none;
color: black;
}
p{
  font-family: "Baskervville";
  font-size: 0.8em;
}
#bouton3{
  top: 78vh;

}



#a5{
    min-width: 14vw;
}


section {
  position: fixed;
  height: 100dvh;
  top: 0;
  left: 0;
  transform: translateX(calc( var(--scroll,0) * var(--speed) * -1px));
  width: calc(var(--width) * 1px);
}
.plan img {
  width: 100%;
  position: absolute;
  bottom: 0;
}


button {
  background-color: transparent;
  color: transparent;
   padding: 1vh 0.5vw;
  border-radius: 6px;
  font-size: 1em;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Baskervville"; 
  text-decoration: none;

}


a{
  color: black;
  text-decoration: none;
}

nav {
  position: fixed;
  z-index: 1;
  top: 0;
}

path {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round; 
  stroke-linejoin: round;
}
.invisible{
  color: transparent;
  z-index: 0;
}

#fond{
    position: absolute;
   left: 27vw;
   height: 102%;
   width: auto;
   opacity: 0%;
}

.absolute{
    position: absolute;
    top: 5vh;
    width: 27%;
    left: 32vw;
    z-index: 33333;
}

#i1{
    position: absolute;
    top: 4vh;
    width: 30%;
    left: 37.8vw;
    z-index: 33333;
}

#i2{  
    position: absolute;
    top: 2.5vh;
    width: 26%;
    left: 2.5vw;
    z-index: 33333;
}

#i3{  
    position: absolute;
    top: 15.75vh;
    width: 30%;
    left: 18.4vw;
    z-index: 33333;
}

#i4{  
    position: absolute;
    top: 4.7vh;
    width: 30%;
    left: 36.6vw;
    z-index: 33333;
}

#i5{  
    position: absolute;
    top: 5.4vh;
    width: 30%;
    left: -0.2vw;
    z-index: 33333;
}

#i6{  
    position: absolute;
    top: 5.1vh;
    width: 20%;
    left: 20.7vw;
    z-index: 33333;
}


#i7{  
    position: absolute;
    top: 5.1vh;
    width: 15%;
    left: 44.5vw;
    z-index: 33333;
}

#i8{  
    position: absolute;
    top: 5.1vh;
  width: 28%;
  left: -0.4vw;
z-index: 33333;
}
#i9{  
    position: absolute;
  top: 5.1vh;
  width: 30%;
  left: 17.8vw;
z-index: 33333;
}
#i10{  
    position: absolute;
  top: 5.1vh;
  width: 28%;
  left: 36.15vw;
z-index: 33333;
}
#i11{  
    position: absolute;
  top: 29.0vh;
  width: 28%;
  left: 21vw;
z-index: 33333;
}
#i12{  
    position: absolute;
  top: 29.0vh;
  width: 30%;
  left: 38.1vw;
z-index: 33333;
}
#i13{  
    position: absolute;
  top: 28.5vh;
  width: 26.5%;
  left: 1.5vw;
z-index: 33333;
}

#i14{  
    position: absolute;
  top: 29.0vh;
  width: 30%;
  left: 18.4vw;
z-index: 33333;
}
#i15{  
    position: absolute;
  top: 29.0vh;
  width: 20%;
  left: -0.2vw;
z-index: 33333;
}
#i16{  
    position: absolute;
  top: 29.0vh;
  width: 30%;
  left: 18vw;
z-index: 33333;
}
#i17{  
    position: absolute;
  top: 29.0vh;
  width: 30%;
  left: 36.2vw;
z-index: 33333;
}
#i18{  
    position: absolute;
  top: 29.0vh;
  width: 30%;
  left: -0.4vw;
z-index: 33333;
}
#i19{  
    position: absolute;
  top: 29.0vh;
  width: 30%;
  left: 17.8vw;
z-index: 33333;
}

#i20{  
    position: absolute;
  top: 29.0vh;
  width: 30%;
  left: 36.15vw;
z-index: 33333;
}

#i21{  
    position: absolute;
  top: 53.7vh;
  width: 30%;
  left: 20.2vw;
z-index: 33333;
}
#i22{  
    position: absolute;
  top: 53.7vh;
  width: 30%;
  left: 38.1vw;
z-index: 33333;
}
#i23{  
    position: absolute;
  top: 53.7vh;
  width: 29%;
  left: 1vw;
z-index: 33333;
}
#i24{  
    position: absolute;
  top: 53.7vh;
  width: 30%;
  left: 18.5vw;
z-index: 33333;
}
#i25{  
    position: absolute;
  top: 53.7vh;
  width: 28%;
  left: 36.6vw;
z-index: 33333;
}
#i26{  
    position: absolute;
  top: 53.7vh;
  width: 20%;
  left: 2.5vw;
z-index: 33333;
}
#i27{  
    position: absolute;
  top: 53.7vh;
  width: 30%;
  left: 18vw;
z-index: 33333;
}
#i28{  
    position: absolute;
  top: 53.7vh;
  width: 30%;
  left: 36.2vw;
z-index: 33333;
}
#i29{  
    position: absolute;
  top: 53.7vh;
  width: 30%;
  left: -0.4vw;
z-index: 33333;
}
#i30{  
    position: absolute;
  top: 63vh;
  width: 9%;
  left: 29.3vw;
z-index: 33333;
}
#i31{  
    position: absolute;
  top: 53.7vh;
  width: 30%;
  left: 36.15vw;
z-index: 33333;
}
#i32{  
    position: absolute;
  top: 79.7vh;
  width: 30%;
  left: 20.1vw;
z-index: 33333;
}
#i33{  
    position: absolute;
  top: 79.7vh;
  width: 30%;
  left: 38.1vw;
z-index: 33333;
}
#i34{  
    position: absolute;
  top: 79.7vh;
  width: 29%;
  left: 1vw;
z-index: 33333;
}
#i35{  
    position: absolute;
  top: 79.7vh;
  width: 30%;
  left: 18.4vw;
z-index: 33333;
}
#i36{  
    position: absolute;
  top: 79.7vh;
  width: 30%;
  left: 36.6vw;
z-index: 33333;
}

#i37{  
    position: absolute;
  top: 79.7vh;
  width: 30%;
  left: -0.2vw;
z-index: 33333;
}
#i38{  
    position: absolute;
  top: 79.7vh;
  width: 30%;
  left: 18vw;
z-index: 33333;
}

#i39{  
    position: absolute;
  top: 79.7vh;
  width: 30%;
  left: 36.2vw;
z-index: 33333;
}



#i40{  
    position: absolute;
  top: 79.7vh;
  width: 30%;
  left: -0.4vw;
z-index: 33333;
}

#i41{  
    position: absolute;
  top: 79.7vh;
  width: 30%;
  left: 17.8vw;
z-index: 33333;
}



#couv{
  position: absolute;
  top: 2.2vh;
  width: 15%;
  left: 10vw;
z-index: 33333;
}
#couv2{
  position: absolute;
  top: 78vh;
  width: 55%;
  left: 0vw;
z-index: 33333;
}

img:hover{
  transform: rotate(0.2deg);

}

#dessin1{

  width: 40vw;
    z-index: 333;
    margin-top: 50vh;
}

#dessin1:hover{
  
  transform: rotate(0deg);

}



#dessin2{

  width: 30vw;
    z-index: 333;
    margin-top: -20vh;
    margin-left: 30vw;
}

#dessin2:hover{
  
  transform: rotate(0deg);

}

#index {
  position: fixed;
  inset: 0px;

 
  z-index: 33333;
  

  padding-bottom: 18vw;
  opacity: 0;
  pointer-events: none;
  transition: all 100ms;
  width: 0vw;
  height: 0vh;
}
#index.visible {
  opacity: 1;
  pointer-events: all;
  transition: all 1500ms;
  width: 0vw;
  height: 0vh;
}

#index-btn {
  opacity: 100%;
  position: absolute;
top: 80vh;
  left: 2vw;
   background-color: rgb(255, 255, 255);
  border: 1px solid #555555;
  color: rgb(0, 0, 0);

  text-decoration: none;
  padding: 1vh 0.5vw;
  border-radius: 6px;
  font-size: 1em;
  cursor: pointer;
}
#index-btn:hover{
  transform: rotate(3deg);

}
.liste{
 
text-decoration: none;
color: rgb(0, 0, 0);
text-align: center;

font-size: 1.2em;

text-align: left;
 border-color:rgb(255, 181, 244);

} 

#text1{
  position: absolute;
  width: 20vw;
  margin-left: 6vw;
  
}

#text2{
  position: absolute;
  width: 20vw;
  margin-left: 25vw;
  margin-top: 11vh;
  
}
#text3{
  position: absolute;
  width: 20vw;
  margin-left: 13vw;
  margin-top: 20vh;
  
}

#text4{
  position: absolute;
  width: 20vw;
  margin-left: 30vw;
  margin-top: 30vh;
  
}

#text5{
  position: absolute;
  width: 20vw;
  margin-left: 40vw;
  margin-top: 41vh;
  
}
#text6{
  position: absolute;
  width: 20vw;
  margin-left: 62vw;
  margin-top: 55vh;
  
}

#text7{
  position: absolute;
  width: 20vw;
  margin-left: 50vw;
  margin-top: 65vh;
  
}

#text8{
  position: absolute;
  width: 20vw;
  margin-left: 80vw;
  margin-top: 80vh;
  
}