@font-face {
font-family: 'Reglo-Bold';
src: url('fonts/Reglo-Bold.otf') format('otf'); /* formats web modernes */
src: url('fonts/Reglo-Bold.woff') format('woff'); /* formats web modernes */
src: url('fonts/Reglo-Bold.eot') format('eot  '); /* formats web modernes */
}

@font-face {
font-family: 'Combat';
src: url('fonts/Combat.otf') format('otf'); /* formats web modernes */
}

@font-face {
font-family: 'Compagnon';
src: url('fonts/Compagnon-Light.eot') format('eot'); /* formats web modernes */
src: url('fonts/Compagnon-Light.woff') format('woff'); /* formats web modernes */
src: url('fonts/Compagnon-Light.woff2') format('woff2'); /* formats web modernes */
src: url('fonts/Compagnon-Bold.eot') format('eot'); /* formats web modernes */
src: url('fonts/Compagnon-Bold.woff') format('woff'); /* formats web modernes */
src: url('fonts/Compagnon-Bold.woff2') format('woff2'); /* formats web modernes */
}

body, html {
    margin: 0;
    padding: 0;
    background-color: white;


}

.container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    max-height: 100vh;
    overflow-y: hidden;

}

.block {
    flex: 0 0 auto;
    width: 80vw;
    height: 100vh;;
    clear: both;
    scroll-snap-align: start;
    padding: 0px;
    box-sizing: border-box;
    font-family: inter, sans;
}

.block h2 {
  font-family: arial, sans;
}

h3#memories {
font-family: Reglo, sans-serif;
color: rgb(245,245,245);
font-size: 8vw;
line-height: 0.75;
margin-top: 2.75em;
margin-left: -2em;
margin-right: -2em;
transform: rotate(-90deg);
}

h2{
font-size: 5em;
padding: 0;
line-height: 0em;
color: white;
margin-left: 0.5em;
}

#block1 {
    width: 32vw;
    padding: 0em 0em 0em 4em;
    margin-top: 0em;
    /*background-color: #ffcccc;  Exemple */
}

 #block2 {
   width: 40vw;
   text-align: justify;
   text-align-last: left;
   padding: 2em 5em 2em 3em;
   margin-left: 3em;
   margin-right: 10em;
   background: rgb(255,255,255);
   background: linear-gradient(0deg, rgba(255,255,0,1) 1%, rgba(255,255,255,1) 14%, rgba(255,255,255,1) 33%, rgba(255,255,0,1) 55%, rgba(255,255,255,1) 94%, rgba(255,255,0,1) 100%);
   box-shadow: -50px 30px 20px 5px rgba(0,0,0,0.1);
   transform: rotateZ(4deg);
   color: black;
   font-size: font-size:calc(12px + 1.2vw);

 }

 #block3 {
   background: rgb(255,35,1);
   background: linear-gradient(0deg, rgba(255,35,1,1) 0%, rgba(255,255,255,1) 23%, rgba(255,255,255,1) 36%, rgba(255,35,1,1) 55%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 95%, rgba(255,35,1,1) 100%);
   box-shadow: -50px 30px 20px 5px rgba(0,0,0,0.1);
   width: 35vw;
   margin-top: 4em;
   transform: rotateZ(-5deg);
   color: rgb(0,0,150);
   color: black;
 }

 #block4 {
   background: rgb(0,255,94);
   background: linear-gradient(0deg, rgba(0,255,94,1) 0%, rgba(255,255,255,1) 23%, rgba(255,255,255,1) 36%, rgba(0,255,94,1) 55%, rgba(255,255,255,1) 68%, rgba(255,255,255,1) 95%);
   box-shadow: -50px 30px 20px 5px rgba(0,0,0,0.1);
   width: 35vw;
   height: 80vh;
   transform: rotateZ(6deg);
 }

 #block5 {
   background: rgb(0,255,94);
   background: linear-gradient(0deg, rgba(255,255,255,1) 2%, rgba(0,212,255,1) 11%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 55%, rgba(255,255,255,1) 74%, rgba(0,212,255,1) 100%);
   box-shadow: -50px 30px 20px 5px rgba(0,0,0,0.1);
   width: 33vw;
   height: 80vh;
   margin-top: 5em;
   transform: rotateZ(-4deg);
 }

 #block6 {
   background: rgb(255,255,255);
   background: linear-gradient(0deg, rgba(0,0,0,1) 1%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 115%, rgba(255,255,255,1) 90%, rgba(0,0,0,1) 150%);
   box-shadow: -50px 30px 20px 5px rgba(0,0,0,0.1);
   width: 28vw;
   margin-top: 10em;
   height: 60vh;
   transform: rotateZ(8deg);
 }

 #block7 {
   background: rgb(255,255,255);
   background: linear-gradient(0deg, rgba(255,255,0,1) 1%, rgba(255,255,255,1) 14%, rgba(255,255,255,1) 33%, rgba(255,255,0,1) 55%, rgba(255,255,255,1) 94%, rgba(255,255,0,1) 100%);
   box-shadow: -50px 30px 20px 5px rgba(0,0,0,0.1);
   width: 31vw;
   margin-top: 7em;
   height: 88vh;
   transform: rotateZ(-8deg);
 }

 #newsletter {
   margin-left: -2em;
   margin-top: 6em;
   background-color: white;
   height: 5vh;
   weight: 500px;
   font-size: 0.8em;
   font-family: arial, sans;
   color: rgba(0,212,255,1);
   color: lightgrey;
   z-index: 1;
   text-align: center;
}

#newsletter input {
  margin-top: 10px;
  margin-bottom: 1em;
}

#newsletter input#email {
	background-color: rgb(235,235,235);
	opacity: 0.5;
	height: 2em;
	width: 18em;
	border: none;
	border-radius: 0.35em;
	padding: 3px 3px 3px 15px;
}

#newsletter input#button {
  	background-color: rgb(235,235,235);
  	opacity: 0.5;
  	border: none;
  	display: inline;
  	margin-left: 0.5em;
  	color: grey;
  	font-weight: 600;
  	border-radius: 50px;
  	width: 33px;
  	height: 33px;
  	vertical-align: top;
  	transition: 1s;
  }

span#line {
  background-color: lightgrey;
  height: 1px;
  display: block;
  margin-bottom: 15px;
}

p {
    font-size: 16px;
    line-height: 1.60em;
}

#block2 p {
  hyphens: auto;
  padding: 0px 0px 20px 0px;
}

#block2 h2 {
  font-size: 0.9em;
  font-family: arial;
  font-weight: 300;
}

#block2 span {
  font-weight: 200;
}

#block3 h2 {
  color: rgba(255,255,255,1);
}

.block ul li {
  padding-right: 1em;
  display: inline;
  font-size: 1.25vw;
}

.block ul {
  text-align: center;
  line-height: 2em;
}

#contrefacon {
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 14%, rgba(0,212,255,1) 21%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 55%, rgba(255,255,255,1) 74%, rgba(0,212,255,1) 100%); display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 70%;
  width: 27vw;
  transform: rotateZ(-5deg);
  box-shadow: -50px 30px 20px 5px rgba(0,0,0,0.1);
  text-align: center;
  transition: 0.2s;
  margin-top: 3em;
  color: green;
  color: black;
}

#contrefacon:hover {
  transform: rotateZ(5deg);
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" style="font-size: 50px;"><text y="50">☹</text></svg>'), auto;
}

#contrefacon h1 {font-family: 'Verdana  ', sans-serif; font-weight: bold; font-size: 7vw; line-height: 0.6em; margin-top: -0.5em;}
#contrefacon h1 strong { font-size: 0.5em;}
#contrefacon h2 { font-family: 'Compagnon'; font-weight: bold; font-size: 2vw; line-height: 1em; margin-top: -1.5em; transform: rotateZ(-5deg); color: black;}
#contrefacon h3 { font-size: 1vw; font-weight: 300; font-variant-ligatures: normal;}
#contrefacon h4 {  font-weight: 300; line-height: 0.1em; padding-left: 1em;  text-align: left;}
#contrefacon p  { text-align: center;}

video {
  position: absolute;
  transform: rotate(-15deg);
  margin-left: 15em;
  bottom: -10em;
}

@media screen and (max-width: 1024px) {
      .container {
          display: block; /* Affichage vertical */
          overflow-y: auto; /* Masquer le défilement horizontal */
          flex-direction: column;
    }

      .block {
          width: 100%; /* Occupe toute la largeur */
          height: auto; /* Hauteur automatique */
          margin-bottom: 20px; /* Ajout d'un espacement entre les blocs */
    }

      .block p {
        padding: 0;
    }

    #contrefacon {
      margin-left: -3em;
      height: 100vw;
      width: 90vw;
    }

   #contrefacon h1, h3 {
     font-size: 20vw;
   }

   #contrefacon h2 {
     font-size: 7vw;
   }

   #contrefacon h3 {
     font-size: 3.5vw;
   }

   #block2 {
     padding: 1em 2em 1em 1em;
   }

   #newsletter {
     margin-top: 2em;
     margin-bottom: 10em;
     width: 78vw;
   }

   h3#memories {
     transform: rotate(0deg);
     margin: 1em 0em -0.75em 0.5em;
     font-size: 4em;
   }

   #block2 {
     text-align: left;

   }

   #block2, #block3, #block4, #block5, #block6, #block7, #block8 {
     width: 100vw;
     height: auto;
   }

   .block ul li {
     font-size: 20px;
   }

   #newsletter {
     margin-bottom: 2em;
   }
  }