/* @font-face {
  font-family: "kodchasan";
  src: url("fonts/kodchasan.otf")
} */

@font-face {
  font-family: "PPRightSerifMono-Regular";
  src: url("../fonts/PPRightSerifMono-Regular.woff2") format("woff2"),
    url("../fonts/PPRightSerifMono-Regular.woff") format("woff");
}

@font-face {
  font-family: "Unica77MonoLowLL-Regular";
  src: url("fonts/Unica77MonoLowLL-Regular.otf")
}

body {
  background: #ffffff;
  /* padding: 70px 0; */

}

.container {
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  position: fixed;
  perspective: 100vw;

}

.carousel {
  height: 100vh;
  width: 100vw;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.5s;


}



.face {
  position: 8px;

  position: absolute;
  background: #ffffff;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  padding: 0px 0px 0px 0px;
  backface-visibility: hidden;

}

.intérieur {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  width: 100vw;
  height: 92vh;
  opacity: 1;
  /* padding-bottom: 15px; */
}





.a {
  flex-wrap: wrap;
  transform: rotateY(0deg) translateZ(0px);
  background-color: #ffffff;
}

.b {
  flex-wrap: wrap;
  transform: rotateY(90deg) translateZ(0px);
  background: #ffffff;
}

.c {
  flex-wrap: wrap;
  transform: rotateY(180deg) translateZ(0px);
  background: #ffffff;
}

.d {
  transform: rotateY(270deg) translateZ(0px);
  background-color: #ffffff;
}



.c .box-colonne {
  min-width: 400px;

}

.a .box-colonne {
  min-width: 400px;
}

.b .box-colonne {
  min-width: 400px;
}

.b .box-colonneC {
  min-width: 400px;
}






.nav1 {

  height: 8vh;
  width: 100vw;
  background-color: #e88cbb;
  opacity: 1;

}

.nav2 {

  height: 8vh;
  width: 100vw;
  background-color: #5fb077;
  opacity: 1;

}

.nav3 {

  height: 8vh;
  width: 100vw;
  background-color: #f5e94d;
  opacity: 1;

}

.nav4 {

  height: 8vh;
  width: 100vw;
  background-color: #629bda;
  opacity: 1;

}

.next,
.prev {

  color: #ffffff;
  position: absolute;
  top: 10px;
  padding: 7px 20px 7px 20px;
  cursor: pointer;
  border-radius: 40px;
  /* border-top: 1px solid #ffffff;
  box-shadow: 0 5px 0 #bebebe; */
  transition: box-shadow 0.1s, top 0.1s;
  font-family: kodchasan;
  font-weight: bold;
  font-size: 2rem;
}

.next {

  right: 15px;
}

.prev {

  left: 15px;
}

.e {
  background-color: #5fb077;
}

.f {
  background-color: #629bda;
}

.g {
  background-color: #f5e94d;
}

.h {
  background-color: #e88cbb;
}

.i {
  background-color: #629bda;
}

.j {
  background-color: #5fb077;
}

.k {
  background-color: #e88cbb;
}

.l {
  background-color: #f5e94d;
}

.prev:hover {
  color: #5fb077;
  background-color: #ffffff;
}

.next:hover {
  color: #e88cbb;
  background-color: #ffffff;
}

.next:active,
.prev:active {
  top: 6px;

}





.box-colonne {
  height: 100%;
  overflow-y: scroll;
  margin: 15px 15px 15px 15px;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  padding: 0px 0px 15px 0px;
  flex: 1;

}

.b .box-colonne {
  height: unset;
}



.box-colonneC {
  height: 100%;
  overflow-y: scroll;
  margin: 15px 15px 15px 15px;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  padding: 0px 0px 15px 0px;
  flex: 1;

}

.box-colonneD {
  height: 100%;
  overflow-y: scroll;
  margin: 15px 15px 15px 15px;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  padding: 0px 0px 15px 0px;
  flex: 1;

}

.box-colonneE {

  right: 0px;
  height: unset;
  width: 100%;
  overflow-y: scroll;
  margin: 15px 15px 15px 15px;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  padding: 0px 0px 15px 0px;
  flex: 1;


}

.box-colonneF {
  height: 100%;
  width: 60%;
  overflow-y: scroll;
  margin: 15px 15px 0px 15px;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  /* padding: 0px 0px 15px 0px; */




}



*/::-webkit-scrollbar {
  width: 0px;
  height: 30px;

}

::-webkit-scrollbar-thumb {
  background-color: rgb(255, 255, 255);
  border-radius: 5px;

}

.titreimage {
  height: 100%;
  /* position: relative; */
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0px;
  background-color: transparent;
  border-radius: 1rem;
  color: transparent;
  transition: 1000ms;


}

/* .doubleligne {
  top: 0px;
  background-color: rgb(98, 155, 218);
 padding: 5px 10px 10px 10px;

  line-height: 4rem;
  border-radius: 15px;
  cursor: pointer;

} */

.jours1 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 30px 0px;
  background-color: #e88cbb;
  border-radius: 1rem;
  color: transparent;
  transition: 1000ms;
}

.jours1:hover {
  background-color: #e88cbb;
  border-radius: 1rem;
}

.jours2 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0;
  background-color: #5fb077;
  border-radius: 1rem;
  transition: 1000ms;
}

.jours2:hover {
  background-color: #5fb077;
}

.jours3 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0;
  background-color: #f5e94d;
  border-radius: 1rem;
  transition: 1000ms;
}

.jours3:hover {
  background-color: #f5e94d;
}

.jours4 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 30px 0;
  background-color: #e88cbb;
  border-radius: 1rem;
  transition: 1000ms;
}

.jours4:hover {
  background-color: #e88cbb;
}

.jours5 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0;
  background-color: #5fb077;
  border-radius: 1rem;
  transition: 1000ms;
}

.jours5:hover {
  background-color: #5fb077;
}

.jours6 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0;
  background-color: #f5e94d;
  border-radius: 1rem;
  transition: 1000ms;
}

.jours6:hover {
  background-color: #f5e94d;
}

.jours7 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0;
  background-color: #e88cbb;
  border-radius: 1rem;
  transition: 1000ms;
}

.jours7:hover {
  background-color: #e88cbb;
}

.jours8 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0;
  background-color: #5fb077;
  border-radius: 1rem;
  transition: 1000ms;
}

.jours8:hover {
  background-color: #5fb077;
}

.jours9 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 30px 0;
  background-color: #f5e94d;
  border-radius: 1rem;
  transition: 1000ms;
}

.jours9:hover {
  background-color: #f5e94d;
}

.jours10 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0;
  background-color: #f5e94d;
  border-radius: 1rem;
  transition: 500ms;
}

.jours10:hover {
  background-color: #f5e94d;
}

.jours11 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0;
  background-color: #e88cbb;
  border-radius: 1rem;
  transition: 500ms;
}

.jours11:hover {
  background-color: #e88cbb;
}

.jours12 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0;
  background-color: #5fb077;
  border-radius: 1rem;
  transition: 500ms;
}

.jours12:hover {
  background-color: #5fb077;
}

.jours13 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0;
  background-color: #5fb077;
  border-radius: 1rem;
  transition: 500ms;
}

.jours13:hover {
  background-color: #5fb077;
}

.jours14 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0;
  background-color: #e88cbb;
  border-radius: 1rem;
  transition: 500ms;
}

.jours14:hover {
  background-color: #e88cbb;
}

.jours15 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 30px 0;
  background-color: #5fb077;
  border-radius: 1rem;
  transition: 500ms;
}

.jours15:hover {
  background-color: #5fb077;
}

.jours16 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 15px 00px;
  background-color: #e88cbb;
  border-radius: 1rem;

}

.jours17 {
  padding: 0px 0px 0px 0px;
  margin: 0px 00px 15px 00px;
  background-color: #629bda;
  border-radius: 1rem;

}

.jours18 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 15px 0px;
  background-color: #5fb077;
  border-radius: 1rem;

}

.jours19 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 15px 0px;
  background-color: #f5e94d;
  border-radius: 1rem;

}

.jours20 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 15px 0px;
  background-color: #e88cbb;
  border-radius: 1rem;

}

.jours21 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 15px 0px;
  background-color: #5fb077;
  border-radius: 1rem;

}

.jours22 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 15px 0px;
  background-color: #f5e94d;
  border-radius: 1rem;

}

.jours23 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 15px 0px;
  background-color: #e88cbb;
  border-radius: 1rem;

}

.jours24 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 15px 0px;
  background-color: #5fb077;
  border-radius: 1rem;

}

.jours25 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 30px 0px;
  background-color: #f5e94d;
  border-radius: 1rem;

}

.jours28 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 15px 0px;
  background-color: #e88cbb;
  border-radius: 1rem;

}

.jours26 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 15px 0px;
  background-color: #629bda;
  border-radius: 1rem;

}

.jours27 {
  padding: 0px 0px 0px 0px;
  margin: 15px 0px 30px 0px;
  background-color: #e88cbb;
  border-radius: 1rem;

}

.jours29 {
  padding: 0px 0px 0px 0px;
  margin: 15px 0px 30px 0px;
  background-color: #ffffff;
  border-radius: 1rem;

}


.box-text {
  height: 100%;
  /* overflow-y: scroll; */

  background-color: #e88cbb;
  border-radius: 15px;

  display: flex;
  flex-wrap: wrap;
  text-align: center;

}

.H {
  height: 100%;
  /* overflow-y: scroll; */

  background-color: #629bda;
  border-radius: 15px;

  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.z {
  height: 100%;
  /* overflow-y: scroll; */

  background-color: #f5e94d;
  border-radius: 15px;

  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.Y {
  height: 100%;
  /* overflow-y: scroll; */

  background-color: #5fb077;
  border-radius: 15px;

  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.text {
  flex: 1;
  min-width: 400px;

}

h1 {
  /* gros titre */
  text-align: center;
  font-size: 4rem;
  color: #ffffff;
  padding: 5px 10px 10px 10px;
  position: sticky;
  top: 0px;
  background-color: rgb(98, 155, 218);
  font-family: "kodchasan";
  font-weight: bold;
  line-height: 4rem;
  border-radius: 15px;
  cursor: pointer;

}

.y {
  /* text acceuil bas image  */
  text-align: center;
  font-size: 4rem;
  color: #ffffff;
  padding: 10px 10px 20px 10px;
  position: sticky;
  bottom: 15px;
  background-color: #5fb077;
  font-family: "kodchasan";
  font-weight: bold;
  line-height: 4rem;
  border-radius: 15px;
  cursor: pointer;
}


h3 {
  /* text coprs page 1 */
  font-size: 2rem;
  text-align: left;
  line-height: 2.1rem;
  padding: 15px 20px 15px 20px;
  font-family: "kodchasan";
  font-weight: bold;
  color: #ffffff;
}

h4 {
  /* text coprs page 1 */
  font-size: 2rem;
  text-align: left;
  line-height: 2.1rem;
  padding: 15px 20px 15px 20px;
  font-family: "kodchasan";
  font-weight: bold;
  color: #629bda;
}

h5 {
  /* gros titre vert */
  text-align: center;
  font-size: 4rem;
  color: #ffffff;
  padding: 5px 10px 20px 10px;
  position: sticky;
  top: 0px;
  background-color: #5fb077;
  font-family: "kodchasan";
  font-weight: bold;
  line-height: 4rem;
  border-radius: 15px;
  cursor: pointer;

}

h6 {
  /* text pour le titre de la nav milieu */
  font-size: 2rem;
  text-align: center;
  padding: 17px 20px 10px 20px;
  font-family: "kodchasan";
  font-weight: bold;
  color: #ffffff;

}

p {
  /* text corps  */
  font-size: 1.5rem;
  text-align: left;
  color: rgb(255, 255, 255);
  padding: 15px 20px 15px 20px;
  font-family: "PPRightSerifMono-Regular";



}





@media screen and (max-width:600px) {
  h1 {
    font-size: 3rem;
    line-height: 3rem;
    position: sticky;
    top: 0px;

  }

  h5 {
    font-size: 3rem;
    line-height: 3rem;
    position: sticky;
    top: 0px;
  }

  h3 {
    font-size: 3rem;
    line-height: 3rem;
  }

  p {
    font-size: 1rem;
    line-height: 1rem;
  }

  .container {
    height: unset;
  }

  .face {
    height: unset;
  }

  .carousel {
    height: unset;
  }

  .intérieur {
    overflow: scroll;
  }

  .box-text {
    height: unset;
    overflow: auto;
  }

  .box-colonneC {
    height: unset;
  }

  .box-colonneF {
    height: unset;
    overflow: auto;
    width: 100%;
  }

  .box-colonne {
    height: unset;
    overflow: auto;
  }

  .next,
  .prev {
    font-size: 1rem;
    top: 18px;
  }

  .next:active,
  .prev:active {
    top: 9px;

  }

  h6 {
    font-size: 1rem;
    padding: 27px 20px 15px 20px;

  }


}