@charset "UTF-8";

::-webkit-scrollbar{
  display: none;
}

html{
  background-color: white;
  scroll-snap-type: y proximity;
}

@font-face {
  font-family: "Edu Monument Grotesk";
  src: url("../fonts/ABCMonumentGrotesk-Regular.woff") format("woff")
 }

body{
  /* overflow: hidden; */
background-color: white;
transition: background-color .8s ease-in-out;
overflow-y: scroll;
scroll-snap-type: y proximity;
}
.rond-bottom{
  position: absolute;
  bottom: -405px;
  left: 50%;
  transform: translate(-50%);
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  background-color: black;
  z-index: +4;
  transition: .2s ease-in-out;
}

.rond-bottom-on{
  position: absolute;
  bottom: -405px;
  left: 0%;
  transform: translate(-0%);
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  background-color: black;
  z-index: +4;
  transition: .2s ease-in-out;
}

.trait-central{
  background-color: grey;
  top: 22px;
  width: 100vw;
  height: 1px;
  position: fixed;
  left: 0;

}
.trait-central2{
  background-color: grey;
  width: 1px;
  top: 32%;
  height: 100%;
  position: fixed;
  left: -50%;
  transform: translate(-50%);
}

h1{
  position: fixed;
  width: 60%;
  left: 0%;
  padding-left: .5%;
  padding-top: .5%;
  font-size: 1.15em;
  text-align: left;
  font-family: 'Edu Monument Grotesk';
  color: white;
  mix-blend-mode: difference;
  z-index: +13;
  pointer-events: none;
}

h12{
  position: fixed;
  padding-top: .5%;
  width: 100%;
  left: 0%;
  font-size: 1.15em;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white ;
  mix-blend-mode: difference;
  z-index: +13;
  pointer-events: none;
}

h13{
  position: fixed;
  padding-top: .5%;
  width: 99.5%;
  font-size: 1.15em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white ;
  mix-blend-mode: difference;
  z-index: +13;
  pointer-events: none;
}

h21{
  position: absolute;
  top: 40px;
  width: 99.5%;
  left: 0%;
  padding-left: .5%;
  font-size: 1.15em;
  line-height: .9em;
  text-align: start;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +3;
  mix-blend-mode: difference;
  pointer-events: none;
}

h2112{
  position: absolute;
  background-color: white;
  top: 40px;
  width: 99.5%;
  left: 0%;
  height: 45%;
  padding-left: .5%;
  font-size: 2em;
  line-height: .9em;
  text-align: start;
  font-family: 'Edu Monument Grotesk';
  color: black;
  z-index: +3000;
  pointer-events: none;
  animation: intro 4s 1 forwards;
  opacity: 0%;
}

@keyframes intro{
  0%{
    padding-left: 10px;
    opacity: 100%;
    font-size: 2em;
    padding-top: 0px;
      }
  75%{
    padding-left: 10px;
opacity: 100%;
font-size: 2em;
padding-top: 0px;
}
  100%{
    opacity: 0%;
    font-size: 1.15em;
    top: 40px;
  }
}

h211{
  position: absolute;
  top: 5em;
  width: 91.5%;
  left: 7%;
  padding-left: .5%;
  font-size: 1.15em;
  text-align: start;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +3;
  mix-blend-mode: difference;
  pointer-events: none;
}

h212{
  position: absolute;
  top: 9em;
  width: 91.5%;
  left: 0%;
  padding-left: .5%;
  font-size: 1.15em;
  text-align: start;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +3;
  mix-blend-mode: difference;
  pointer-events: none;
}

.pour28{
  position: absolute;
  top: 15px;
  width: 100%;
  left: 50%;
  transform: translate(-50%);
  font-size: 1.15em;
  padding-left: .5%;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}

.pour28-on{
  position: absolute;
  top: 15px;
  width: 100%;
  left: 40.5px;
  font-size: 1.15em;
  padding-left: 0%;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}

.pollution{
  position: absolute;
  top: 391px;
  width: 100%;
  transform: scale(0);
  overflow: hidden;
  left: 0%;
  padding-right: .5%;
  font-size: 1.15em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.pollution-on{
  transform: scale(1);
  position: absolute;
  top: 391px;
  width: 99%;
  left: 0%;
  padding-right: .5%;
  font-size: 1.15em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}

.pour38{
  position: absolute;
  transform: translate(-50%);
  padding-left: .5%;
  top: 16px;
  width: 90vw;
  left: 50%;
  font-size: 1.15em;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.pour38-on{
  position: absolute;
  top: 16px;
  width: 100%;
  left: 50%;
  font-size: 1.15em;
  padding-left: .5%;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.produits{
  transform: scale(0);
  position: absolute;
  top: 451px;
  width: 90%;
  left: 0%;
  padding-right: .5%;
  font-size: 1.15em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.produits-on{
  transform: scale(1);
  position: absolute;
  top: 451px;
  width: 99%;
  left: 0%;
  padding-right: .5%;
  font-size: 1.15em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}

.pour58{
  position: absolute;
  transform: translate(-50%);
  padding-left: .5%;
  top: 16px;
  width: 90vw;
  left: 50%;
  font-size: 1.15em;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.pour58-on{
  position: absolute;
  top: 16px;
  width: 100%;
  left: 43.5px;
  font-size: 1.15em;
  padding-left: .5%;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}

.pour68{
  position: absolute;
  transform: translate(-50%);
  padding-left: .5%;
  top: 16px;
  width: 90vw;
  left: 50%;
  font-size: 1.15em;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.pour68-on{
  position: absolute;
  top: 16px;
  width: 100%;
  left: 43.5px;
  font-size: 1.15em;
  padding-left: .5%;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}

.grammes{
  transform: scale(0);
  position: absolute;
  top: 511px;
  width: 99.5%;
  left: 0%;
  padding-right: .5%;
  font-size: 1.15em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.grammes-on{
  transform: scale(1);
  position: absolute;
  top: 511px;
  width: 99%;
  left: 0%;
  padding-right: .5%;
  font-size: 1.15em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.kilos{
  transform: scale(0);
  position: absolute;
  top: 571px;
  width: 99.5%;
  left: 0%;
  padding-right: .5%;
  font-size: 1.15em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.kilos-on{
  transform: scale(1);
  position: absolute;
  top: 571px;
  width: 99%;
  left: 0%;
  padding-right: .5%;
  font-size: 1.15em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}

h41{
  position: fixed;
  left: 0%;
  margin-left: .5%;
  bottom: 0%;
  width: 100%;
  font-size: 1.15em;
  text-align: left;
  font-family: 'Edu Monument Grotesk';
  color: white;
  mix-blend-mode: difference;
  z-index: +2;
  pointer-events: none;
}

/* HAUT DE L'AFFICHE */

.tout{
  mix-blend-mode: darken;
  overflow: scroll;
}
.gauche{
  width: 100%;
  height: 300px;
  position: absolute;
  bottom: -55vh;
  left: 0%;
overflow: auto;
z-index: +200;
}

.gauche-carousel{
  left: 0%;
  bottom: -0%;
  width: 100%;
  height: 74vw;
  position: relative;;
  overflow: hidden;
  z-index: +200;
}
.carousel-on{
animation-play-state: paused;
z-index: +12;
}
.carousel{
  width: 100%;
  height: 1000%;
  position: absolute;
  overflow: hidden;
  z-index: +200;
  animation: up 20s linear infinite;
}

@keyframes up{
  0%{
top: 0vw;
  }
  100%{
top: -483vw;
}
}

.blocg1{
  position: relative;
  left: 0%;
  width: 100%;
  height: 67vw;
  background-image: url(../images/avion_2.jpeg);
  background-size: cover;
  transition: .2s ease-in-out;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}
.avion{
  display: none;
  position: relative;
  top: 88%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: 3vw;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.avion-on{
  display: initial;
  position: relative;
  top: -2%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: .75em;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.blocg1-on{
  position: relative;
  left: 0%;
  width: 100%;
  height: 67vw;
  background-image: url(../images/avion_22.png);
  background-size: cover;
  transition: .2s ease-in-out;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}
.blocg12{
  width: 100%;
  height: 75vw;
  background-image: url(../images/camion.jpeg);
  background-size: cover;
  transition: .2s ease-in-out;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}
.camion{
  display: none;
  position: relative;
  top: 88%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: 3vw;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.camion-on{
  display: initial;
  position: relative;
  top: -2%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: .7em;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.blocg12-on{
  position: relative;
  left: 0%;
  width: 100%;
  height: 75vw;
  background-image: url(../images/camion_2.png);
  background-size: cover;
  transition: .2s ease-in-out;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}
.blocg2{
  width: 100%;
  height: 67vw;
  background-image: url(../images/voiture_1.jpeg);
  background-size: cover;
  transition: .2s ease-in-out;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}

.voiture{
  display: none;
  position: relative;
  top: 88%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: 3vw;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.voiture-on{
  display: initial;
  position: relative;
  top: -2%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: .7em;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.blocg2-on{
  position: relative;
  left: 0%;
  width: 100%;
  height: 67vw;
  background-image: url(../images/voiture_12.png);
  background-size: cover;
  transition: .2s ease-in-out;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}

.blocg3{
  width: 100%;
  height: 67vw;
  background-image: url(../images/moto.jpeg);
  background-size: cover;
  transition: .2s ease-in-out;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}

.moto{
  display: none;
  position: relative;
  top: 88%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: 3vw;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.moto-on{
  display: initial;
  position: relative;
  top: -2%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: .7em;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.blocg3-on{
  position: relative;
  left: 0%;
  width: 100%;
  height: 67vw;
  background-image: url(../images/moto_2.png);
  background-size: cover;
  transition: .2s ease-in-out;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}

.blocg4{
  width: 100%;
  height: 70vw;
  background-image: url(../images/scooter.webp);
  background-size: cover;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}

.scooter{
  display: none;
  position: relative;
  top: 88%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: 3vw;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.scooter-on{
  display: initial;
  position: relative;
  top: -2%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  color: black;
  font-size: .7em;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.blocg4-on{
  position: relative;
  left: 0%;
  width: 100%;
  height: 70vw;
  background-image: url(../images/scooter_2.png);
  background-size: cover;
  transition: .2s ease-in-out;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}

.blocg5{
  width: 100%;
  height: 75vw;
  background-image: url(../images/vélomoteur.jpeg);
  background-size: cover;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}

.vélomoteur{
  display: none;
  position: relative;
  top: 2%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: 3vw;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.vélomoteur-on{
  display: initial;
  position: relative;
  top: -2%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: .7em;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.blocg5-on{
  position: relative;
  left: 0%;
  width: 100%;
  height: 75vw;
  background-image: url(../images/vélomoteur_2.png);
  background-size: cover;
  transition: .2s ease-in-out;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}

.blocg6{
  width: 100%;
  height: 62vw;
  background-image: url(../images/vélo.jpeg);
  background-size: cover;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}

.vélo{
  display: none;
  position: relative;
  top: 2%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: 3vw;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.vélo-on{
  display: initial;
  position: relative;
  top: -2%;
  left: 0%;
  transform: translate(50%);
  font-family: 'Edu Monument Grotesk';
  font-size: .7em;
  padding-left: .5%;
  transition: .2s ease-in-out;
}
.blocg6-on{
  position: relative;
  left: 0%;
  width: 100%;
  height: 62vw;
  background-image: url(../images/vélo_2.png);
  background-size: cover;
  transition: .2s ease-in-out;
  filter: grayscale() 
  /* opacity(55%) contrast(200%); */
}

.blocgfinal{
  width: 100%;
  height: 9vw;
  background-color: tomato;
}

/* -DROITE- */
.haut-titre{
  width: 100%;
  height: 22px;
  position: fixed;
  left: 0%;
  top: 0;
  z-index: +10;
  mix-blend-mode: lighten;
  background-color: white;
}

.haut-droite{
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0%;
  top: 0;
  z-index: +7;
  background-color: white;
  mix-blend-mode: darken;
}
.droite{
  width: 50%;
  transform: scale(1);
  height: 120%;
  position: absolute;
  top: 150vh;
  left: 0%;
  z-index: +5;
  white-space: nowrap;
  }

.blocd1{
  opacity: 100%;
  width: 200%;
  left: 0%;
  top: -0.5%;
  height: 58vw;
  position: relative;
  overflow: hidden;
  z-index: +5;
  background-color: white;
  transition: 0.08s ease-in-out;
  scroll-snap-align: start;
}

.info-d1{
  transform: translatey(-50%);
  padding-left: 0.075em;
  font-size: .6em;
  font-family:'Edu Monument Grotesk';
  color: black;
  width: 100vw;
  background-color:  white;
}

.rond-info{
  position: absolute;
  width: 1em;
  height: 1em;
  top: 100%;
  transform: translatey(-100%);
  right: .5%;
  border-radius: 50%;
  background-color: black;
}

.blocd6{
  width: 200%;
  left:0%;
  height: 42%;
  position: relative;
  top: -0.5%;
  opacity: 100%;
  z-index: +4;
  background-image: url(../images/particule_pneu.jpeg);
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
  scroll-snap-align: start;
}
.blocd6-on{
  width: 200%;
  left:0%;
  height: 42%;
  position: relative;
  top: -0.5%;
  opacity: 100%;
  z-index: +4;
  background-image: url(../images/particule_pneu.jpeg);
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
  scroll-snap-type: mandatory;
  scroll-snap-align: start;
}
.blocd7{
  width: 165%;
  font-family:'Edu Monument Grotesk';
  overflow: hidden;
  left:10%;
  height: 0%;
  position: relative;
  text-align: start;
  top: 2%;
  opacity: 0%;
  z-index: +4;
  font-size: 1rem;
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
}

.blocd7-on{
  width: 162.75%;
  font-family:'Edu Monument Grotesk';
  overflow: hidden;
  left:35%;
  height: 18%;
  position: relative;
  text-align: start;
  top: 1.5%;
  opacity: 100%;
  z-index: +4;
  font-size: 1rem;
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
}

.blocd7 span{
  width: 200%;
  font-family:'Edu Monument Grotesk';
  overflow: hidden;
  left:-92.5%;
  height: 23%;
  position: relative;
  text-align: start;
  top:11%;
  opacity: 100%;
  z-index: +4;
  font-size: 1rem;
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
}

.blocd7 span2{
  width: 200%;
  font-family:'Edu Monument Grotesk';
  overflow: hidden;
  left:-183.25%;
  height: 23%;
  position: relative;
  text-align: start;
  top:22.5%;
  opacity: 100%;
  z-index: +4;
  font-size: 1rem;
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
}

.blocd7 span3{
  width: 200%;
  font-family:'Edu Monument Grotesk';
  overflow: hidden;
  left:-257.75%;
  height: 23%;
  position: relative;
  text-align: start;
  top: 34%;
  opacity: 100%;
  z-index: +4;
  font-size: 1rem;
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
}

.blocd7 span4{
  width: 200%;
  font-family:'Edu Monument Grotesk';
  overflow: hidden;
  left:-355.75%;
  height: 23%;
  position: relative;
  text-align: start;
  top: 45.5%;
  opacity: 100%;
  z-index: +4;
  font-size: 1rem;
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
}
.blocd7 span5{
  width: 200%;
  font-family:'Edu Monument Grotesk';
  overflow: hidden;
  left:-448.75%;
  height: 23%;
  position: relative;
  text-align: start;
  top: 57%;
  opacity: 100%;
  z-index: +4;
  font-size: 1rem;
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
}
.blocd7 span6{
  width: 200%;
  font-family:'Edu Monument Grotesk';
  overflow: hidden;
  left:-531.45%;
  height: 23%;
  position: relative;
  text-align: start;
  top: 68.5%;
  opacity: 100%;
  z-index: +4;
  font-size: 1rem;
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
}

.blocd7 span7{
  width: 200%;
  font-family:'Edu Monument Grotesk';
  overflow: hidden;
  left:-622.2%;
  height: 23%;
  position: relative;
  text-align: start;
  top: 80%;
  opacity: 100%;
  z-index: +4;
  font-size: 1rem;
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
}

/* position: absolute;
top: 5em;
width: 91.5%;
left: 7%;
padding-left: .5%;
font-size: 1.15em;
text-align: start;
font-family: 'Edu Monument Grotesk';
color: white;
z-index: +3;
mix-blend-mode: difference;
pointer-events: none; */

.info-d6{
  position: relative;
  top: 100%;
      transform: translatey(0%);
  padding-left: .075em;
  font-size: .6em;
  font-family:'Edu Monument Grotesk';
  color: black;
  width: 100%;
  background-color: white;
  }

.blocd2{
  width: 100%;
  left:0%;
  height: 92vw;
  position: relative;
  overflow: hidden;
  top: 1%;
  z-index: +6;
  transition: 0.08s ease-in-out;
  opacity: 100%;
}
.blocd2-on{
  width: 200%;
  left:0%;
  height: 93.1vh;
  position: relative;
  top: 1%;
  overflow: hidden;
  opacity: 100%;
  z-index: +4;
  transition: 0.08s ease-in-out;
}
.info-d2{
  transform: translatey(-50%);
  padding-left: 0.075em;
  font-size: .6em;
  font-family:'Edu Monument Grotesk';
  color: black;
  width: 100%;
  background-color: white;
  }

video{
  width:100%;
transform: translate(0%);
filter: grayscale(1);
z-index: +4;
}

.blocd3{
  width: 200%;
  left:0%;
  height: 51%;
  position: relative;
  top: 1.1%;
  opacity: 100%;
  z-index: +4;
  background-image: url(../images/décharge1.jpeg);
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
}
.blocd3-on{
  width: 200%;
  left:0%;
  height: 51%;
  position: relative;
  top: 1.1%;
  opacity: 100%;
  z-index: +4;
  background-image: url(../images/décharge1.jpeg);
  background-size: cover;
  filter: grayscale();
  transition: 0.08s ease-in-out;
}
.info-d3{
  position: relative;
  top: 100%;
      transform: translatey(0%);
  padding-left: .075em;
  font-size: .6em;
  font-family:'Edu Monument Grotesk';
  color: black;
  width: 100%;
  background-color: white;
  }

  .blocd4{
    width: 100%;
    left:0%;
    height: 91.72vw;
    position: relative;
    top: 2.7%;
    opacity: 100%;
    overflow: hidden;
    z-index: +4;
    transition: 0.08s ease-in-out;
    scroll-snap-align: start;
  }
  .blocd4-on{
    opacity: 100%;
    width: 200%;
    left:0%;
    height: 92.1vh;
    position: relative;
    top: 2.7%;
    overflow: hidden;
    z-index: +4;
    transition: 0.08s ease-in-out;
    scroll-snap-align: start;
  }
  .info-d4{
    transform: translatey(-50%);
    padding-left: 0.075em;
    font-size: .6em;
    font-family:'Edu Monument Grotesk';
    color: black;
    width: 100%;
    background-color: white;
    }

    .blocd5{
      width: 200%;
      opacity: 100%;
      left:0%;
      height: 48.8%;
      position: relative;
      top: 3.75%;
      z-index: +4;
      background-image: url(../images/décharge_5.webp);
      background-size: cover;
      filter: grayscale(1);
      transition: 0.08s ease-in-out;
      scroll-snap-align: start;

    }
    .blocd5-on{
      width: 200%;
      opacity: 100%;
      left:0%;
      height: 48.8%;
      position: relative;
      top: 3.75%;
      z-index: +4;
      background-image: url(../images/décharge_5.webp);
      background-size: cover;
      filter: grayscale(1);
      transition: 0.08s ease-in-out;
      scroll-snap-align: start;

    }
    .info-d5{
      position: relative;
      top: 100%;
      transform: translatey(-100%);
      padding-left: .075em;
      font-size: .6em;
      font-family:'Edu Monument Grotesk';
      color: black;
      width: 100%;
      background-color: white;
      }

      .blocdfinal{
        width: 100%;
        left:0%;
        height: 4.5%;
        position: relative;
        top: 0%;
        z-index: -4;
       background-color: white;
        transition: 0.08s ease-in-out;
      }

.rond-28{
  position: absolute;
  top: 375px;
  left: 50%;
  width: 97.5vw;
  height: 3em;
  border-radius: 50px;
  transform: translate(-50%);
  border: 1px solid white;
  background-color: transparent;
  z-index: +1;
  mix-blend-mode: difference;
  transition: .2s ease-in-out;
  cursor: initial;
}
.rond-28-on{
  position: absolute;
  top: 375px;
  left: 45px;
  border-radius: 50px;
  width: 5em;
  height: 3em;
  background-color: transparent;
  z-index: +1;
  mix-blend-mode: difference;
  cursor: initial;
}
.container-28{
  display: flex;
  position: fixed;
  width: 100%;
  height: 28%;
 bottom: -50%;
  z-index: +2;
  background-color: black;
  filter: opacity(80%);
  transition: .2s ease-in-out;
}
.container-28-on{
  display: flex;
  position: fixed;
  width: 100%;
  height: 28%;
 bottom: 0%;
  z-index: +4;
  background-color: black;
  filter: opacity(80%);
  transition: .2s ease-in-out;
  pointer-events: none;
}
.rond-38{
  position: absolute;
  top: 435px;
  left: 50%;
  width: 97.5vw;
  height: 3em;
  transform: translate(-50%);
  border: 1px solid white;
  background-color: transparent;
  z-index: +1;
  border-radius: 50px;
  mix-blend-mode: difference;
  transition: .2s ease-in-out;
  cursor: initial;
}
.rond-38-on{
  position: absolute;
  top: 435px;
  left: 45px;
  width: 5em;
  height: 3em;
  border-radius: 50px;
  background-color: transparent;
  z-index: +1;
  mix-blend-mode: difference;
  cursor: initial;
}
.container-38{
  display: flex;
  position: fixed;
  width: 0px;
  height: 15px;
  top: 46.5%;
  left: 79px;
  z-index: +2;
  overflow: hidden;
  pointer-events: none;
}

.container-38-on{
  display: flex;
  flex-wrap: wrap;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 50;
  z-index: +899;
  overflow: hidden;
  opacity: 100%;
  mix-blend-mode: darken;
  pointer-events: none;
}

.rond-58{
  position: absolute;
  top: 495px;
  left: 50%;
  width: 97.5vw;
  height: 3em;
  transform: translate(-50%);
  border: 1px solid white;
  background-color: transparent;
  z-index: +1;
  border-radius: 50px;
  mix-blend-mode: difference;
  transition: .2s ease-in-out;
  cursor: initial;
}
.rond-58-on{
  position: absolute;
  top: 495px;
  left: 45px;
  width: 5em;
  height: 3em;
  border-radius: 50px;
  background-color: transparent;
  z-index: +1;
  mix-blend-mode: difference;
  cursor: initial;
}
.rond-68{
  position: absolute;
  top: 555px;
  left: 50%;
  width: 97.5vw;
  height: 3em;
  transform: translate(-50%);
  border: 1px solid white;
  background-color: transparent;
  z-index: +1;
  border-radius: 50px;
  mix-blend-mode: difference;
  transition: .2s ease-in-out;
  cursor: initial;
}
.rond-68-on{
  position: absolute;
  top: 555px;
  left: 45px;
  width: 5em;
  height: 3em;
  border-radius: 50px;
  background-color: transparent;
  z-index: +1;
  mix-blend-mode: difference;
  cursor: initial;
}

.décharge{
  background-image: url(../images/décharge.png);
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 100%;
  opacity: 100%;
  display: flex;
  position: fixed;
  transition: .2s ease-in-out;
  filter: grayscale();
}

.décharge-on{
  background-image: url(../images/décharge.png);
  background-size: cover;
  top: 30.5%;
  height: 100vh;
  width: 100vw;
  opacity: 100%;
z-index: -999;
  display: flex;
  position: fixed;
  transition: .2s ease-in-out;
  pointer-events: none;
  filter: grayscale();
}

@keyframes production{
  0%{
    top: -50%;
    transform: rotate(0deg);
  }
  100%{
    top: 100%;
    transform: rotate(-360deg);
  }
}

.r38{
  animation: production 1.75s infinite linear forwards;
  animation-delay: 1s;
  position: relative;
  display: inline; 
  width: 80vw;
  height: 80vw;
  border-radius: 50%;
  top: -50%;
  z-index: -99;
background-image: url(../images/pneu1.png);
background-size: contain;
}

.sectionn {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100vh;
  display: block;
  justify-content: center;
  align-items: center;
  mix-blend-mode: multiply;
  z-index: +99;
  opacity: 0%;
top: 100%;
transform: scale(1%);
  transition: 1s ease-in-out;
  }
  
  .sectionn-on {
    transform: scale(1);
    top: 0%;
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5em;
    mix-blend-mode: multiply;
    z-index: +99;
    pointer-events: none;
    opacity: 100%;
    transition: 1s ease-in-out;
    }

  .set2{
  transform: scale(-1) rotateX(180deg);
  filter: blur(5px);
  }
  
  .set3{
  transform: scale(-1)rotateY(90deg);
  filter: blur(1px);

  }
  
  .sectionn .set {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    pointer-events: none;
  
  }
  
  .sectionn .set div{
  position: absolute;
  display: block;
  }
  
  .sectionn .set div:nth-child(1){
  
    left: 20%;
    animation: animate 6s linear infinite;
  animation-delay: 0s;
  
  }
  
  .sectionn .set div:nth-child(2){
  
    left: 50%;
    animation: animate 7s linear infinite;
  animation-delay: -1s;
  
  }
  
  .sectionn .set div:nth-child(3){
  
    left: 0%;
    animation: animate 5s linear infinite;
  animation-delay: 0s;
  
  }
  
  .sectionn .set div:nth-child(4){
  
    left: 80%;
    animation: animate 6s linear infinite;
  animation-delay: -3s;
  
  }
  
  .sectionn .set div:nth-child(5){
  
    left: 90%;
    animation: animate 5s linear infinite;
  animation-delay: 1s;
  
  }
  
  .sectionn .set div:nth-child(6){
  
    left: 60%;
    animation: animate 5s linear infinite;
  animation-delay: -2s;
  
  }
  
  .sectionn .set div:nth-child(7){
  
    left: 45%;
    animation: animate 7s linear infinite;
  animation-delay: -3s;
  
  }
  
  
  @keyframes animate {
  0%
  {
  bottom: -10%;
  transform: translateX(20px) rotate(0deg);
  }
  10%{
  opacity: 1;
  }
  20%{
    transform: translateX(-20px) rotate(45deg);
  }
  
  40%{
    transform: translateX(-20px) rotate(90deg);
  }
  60%{
    transform: translateX(20px) rotate(180deg);
  }
  
  80%{
    transform: translateX(-20px) rotate(180deg);
  }
  
  100%{
  bottom: 110%;
    transform: translateX(-20px) rotate(180deg);
  }
  }


/* - ORDINATEUR- - ORDINATEUR- - ORDINATEUR- - ORDINATEUR- - ORDINATEUR- */



@media screen and (min-width: 1200px){

  h1{
    position: fixed;
    width: 80%;
    left: 30%;
    padding-left: .1%;
    padding-top: .1%;
    font-size: 1.5em;
    text-align: left;
    font-family: 'Edu Monument Grotesk';
    color: white ;
    mix-blend-mode: difference;
  }
  
.merde{
  background-color: lawngreen;
  position: fixed;
  height: 32.5%;
  width: 90px;
  top: 35%;
  left: 55%;
}


h2112{
  position: absolute;
  background-color: white;
  top: 40px;
  width: 69.5%;
  left: 30.5%;
  height: 30%;
  padding-left: .5%;
  font-size: 2em;
  line-height: .9em;
  text-align: start;
  font-family: 'Edu Monument Grotesk';
  color: black;
  z-index: +20;
  pointer-events: none;
  animation: intro 4s 1 forwards;
  opacity: 0%;
}

@keyframes intro{
  0%{
    padding-left: 10px;
    opacity: 100%;
    font-size: 4em;
    text-align: left;
    padding-top: 105px;


      }
  95%{
    padding-top: 105px;
    padding-left: 10px;
opacity: 100%;
font-size: 4em;
text-align: left;

}
  100%{
    opacity: 0%;
    font-size: 2em;
    text-align: justify;
    padding-left: 5%;
    padding-top: 5px;
  }
}


  h12{
    position: fixed;
    padding-top: .1%;
    width: 70%;
    left: 30%;
    font-size: 1.5em;
    text-align: center;
    font-family: 'Edu Monument Grotesk';
    color: white ;
    mix-blend-mode: difference;
    z-index: +1;
  }
  
  h13{
    position: fixed;
    padding-top: .1%;
    width: 99.8%;
    font-size: 1.5em;
    text-align: end;
    font-family: 'Edu Monument Grotesk';
    color: white ;
    mix-blend-mode: difference;
    z-index: +1;
  }

h21{
  position: absolute;
  top: 50px;
  width: 60%;
  left: 34.75%;
  font-size: 2em;
  text-align: justify;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
}

h211{
  position: absolute;
  top: 120px;
  width: 55.5%;
  left: 39%;
  font-size: 2em;
  text-align: justify;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
}

h212{
  position: absolute;
  top: 6em;
  width: 59.5%;
  left: 34.75%;
  padding-left: .5%;
  font-size: 2em;
  text-align: justify;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +3;
  mix-blend-mode: difference;
  pointer-events: none;
}

.rond-28{
  position: absolute;
  top: 470px;
  left: 65%;
  transform: translate(-50%);
  width: 10vw;
  height: 5vw;
  border-radius: 50px;
  border: 1px solid white;
  background-color: transparent;
  z-index: +1;
  mix-blend-mode: difference;
  cursor: pointer;
}
.rond-28-on{
  position: absolute;
  transform: translate(0%);
  top: 470px;
  left: 30.5%;
  width: 69%;
  height: 5vw;
  border-radius: 50px;
  z-index: +1;
  mix-blend-mode: difference;
  cursor: pointer;
}
.pollution{
  position: absolute;
  top: 502px;
  width: 100%;
  transform: scale(0);
  overflow: hidden;
  left: 0%;
  padding-right: .5%;
  font-size: 1.75em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.pollution-on{
  transform: scale(1);
  position: absolute;
  top: 502px;
  width: 98.5%;
  left: 0%;
  padding-right: .5%;
  font-size: 1.75em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.container-28{
  display: flex;
  position: fixed;
  width: 100%;
  height: 28%;
 bottom: -50%;
  z-index: +2;
  background-color: black;
  filter: opacity(80%);
  transition: .2s ease-in-out;
}
.container-28-on{
  display: flex;
  position: fixed;
  width: 100%;
  height: 28%;
 bottom: 0%;
  z-index: +4;
  background-color: black;
  filter: opacity(80%);
  transition: .2s ease-in-out;
} 
.pour28{
  position: absolute;
  transform: translate(-50%);
  padding-left: .5%;
  top: 30.75px;
  width: 90vw;
  left: 50%;
  font-size: 1.75em;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.pour28-on{
  position: absolute;
  top: 30.75px;
  width: 100%;
  left: 43.5px;
  font-size: 1.75em;
  padding-left: .5%;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.rond-38{
  position: absolute;
  top: 570px;
  left: 65%;
  transform: translate(-50%);
  width: 10vw;
  height: 5vw;
  border-radius: 50px;
  border: 1px solid white;
  background-color: transparent;
  z-index: +1;
  mix-blend-mode: difference;
  cursor: pointer;
}
.rond-38-on{
  position: absolute;
  top: 570px;
  left: 30.5%;
  transform: translate(0);
  width: 69vw;
  height: 5vw;
  border-radius: 50px;
  border: 1px solid white;
  z-index: +1;
  mix-blend-mode: difference;
  cursor: pointer;
}
.pour38{
  position: absolute;
  transform: translate(-50%);
  padding-left: .5%;
  top: 30.75px;
  width: 90vw;
  left: 50%;
  font-size: 1.75em;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.pour38-on{
  position: absolute;
  top: 30.75px;
  width: 100%;
  left: 43.5px;
  font-size: 1.75em;
  padding-left: .5%;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.produits{
  position: absolute;
  top: 600px;
  width: 100%;
  transform: scale(0);
  overflow: hidden;
  left: 0%;
  padding-right: .5%;
  font-size: 1.75em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.produits-on{
  transform: scale(1);
  position: absolute;
  top: 600px;
  width: 98.5%;
  left: 0%;
  padding-right: .5%;
  font-size: 1.75em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.container-38{
  display: flex;
  position: fixed;
  width: 0px;
  height: 15px;
  top: 46.5%;
  left: 60%;
  transform: translate(+5%);
  z-index: +2;
  overflow: hidden;
}

.container-38-on{
  display: flex;
  flex-wrap: wrap;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 50;
  z-index: +899;
  overflow: hidden;
  opacity: 100%;
  mix-blend-mode: darken;
}

.grammes{
  position: absolute;
  top: 702px;
  width: 88%;
  transform: scale(0);
  overflow: hidden;
  left: 0%;
  padding-right: .5%;
  font-size: 1.75em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.grammes-on{
  transform: scale(1);
  position: absolute;
  top: 702px;
  width: 98.5%;
  left: 0%;
  padding-right: .5%;
  font-size: 1.75em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
  @keyframes production{
    0%{
      top: -50%;
      transform: rotate(0deg);
    }
    100%{
      top: 100%;
      transform: rotate(-360deg);
    }
  }
  
  .r38{
    animation: production 1.75s infinite linear forwards;
    animation-delay: 1s;
    position: relative;
    display: inline; 
    width: 36vw;
    height: 36vw;
    border-radius: 50%;
    top: -50%;
    z-index: +99;
  background-image: url(../images/pneu1.png);
  background-size: contain;
  }


.rond-58{
  position: absolute;
  top: 670px;
  left: 65%;
  transform: translate(-50%);
  width: 10vw;
  height: 5vw;
  border-radius: 50px;
  border: 1px solid white;
  background-color: transparent;
  z-index: +1;
  mix-blend-mode: difference;
  cursor: pointer;
}
.rond-58-on{
  position: absolute;
  top: 670px;
  left: 30.5%;
  transform: translate(0%);
  width: 69vw;
  height: 5vw;
  border-radius: 50px;
  border: 1px solid white;
  z-index: +1;
  mix-blend-mode: difference;
  cursor: pointer;
}
.pour58{
  position: absolute;
  transform: translate(-50%);
  padding-left: .5%;
  top: 30.75px;
  width: 90vw;
  left: 50%;
  font-size: 1.75em;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.pour58-on{
  position: absolute;
  top: 30.75px;
  width: 100%;
  left: 43.5px;
  font-size: 1.75em;
  padding-left: .5%;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.pour68{
  position: absolute;
transform: translate(-50%);
padding-left: .5%;
top: 30.75px;
width: 90vw;
left: 50%;
font-size: 1.75em;
text-align: center;
font-family: 'Edu Monument Grotesk';
color: white;
z-index: +2;
mix-blend-mode: difference;
pointer-events: none;
transition: .2s ease-in-out;
}
.pour68-on{
  transform: translate(-50%);
  position: absolute;
  top: 30.75px;
  width: 100%;
  left: 57.5px;
  font-size: 1.75em;
  padding-left: .5%;
  text-align: center;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}

.rond-68{
  position: absolute;
  top: 770px;
  left: 65%;
  transform: translate(-50%);
  width: 10vw;
  height: 5vw;
  border-radius: 50px;
  border: 1px solid white;
  background-color: transparent;
  z-index: +1;
  mix-blend-mode: difference;
  cursor: pointer;

}
.rond-68-on{
  position: absolute;
  top: 770px;
  left: 30.5%;
  transform: translate(0%);
  width: 69vw;
  height: 5vw;
  border-radius: 50px;
  border: 1px solid white;
  z-index: +1;
  mix-blend-mode: difference;
  cursor: pointer;
}

.décharge{
  background-image: url(../images/décharge.png);
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 100%;
  opacity: 100%;
  display: flex;
  position: fixed;
  transition: .2s ease-in-out;
  filter: grayscale();
}

.décharge-on{
  background-image: url(../images/décharge.png);
  background-size: cover;
  top: 10.5%;
  height: 100vh;
  width: 100vw;
  opacity: 100%;
z-index: -999;
  display: flex;
  position: fixed;
  transition: .2s ease-in-out;
  pointer-events: none;
  filter: grayscale();
}

.kilos{
  position: absolute;
  top: 802px;
  width: 88%;
  transform: scale(0);
  overflow: hidden;
  left: 0%;
  padding-right: .5%;
  font-size: 1.75em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}
.kilos-on{
  transform: scale(1);
  position: absolute;
  top: 802px;
  width: 98.5%;
  left: 0%;
  padding-right: .5%;
  font-size: 1.75em;
  text-align: end;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: .2s ease-in-out;
}

h22{
  position: fixed;
  top: 14.5%;
  width: 60%;
  left: 51%;
  padding-left: 0%;
  font-size: 1.5em;
  text-align: start;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
}
h222{
  position: fixed;
  top: 14.5%;
  width: 40%;
  left: 58.5%;
  padding-right: .5%;
  font-size: 1.5em;
  text-align: start;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
}
h23{
  position: fixed;
  top: 17.5%;
  width: 60%;
  left: 51%;
  padding-left: 0%;
  font-size: 1.5em;
  text-align: start;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
}
h232{
  position: fixed;
  top: 17.5%;
  width: 40%;
  left: 58.5%;
  padding-right: .5%;
  font-size: 2em;
  text-align: start;
  font-family: 'Edu Monument Grotesk';
  color: white;
  z-index: +2;
  mix-blend-mode: difference;
}
h31{
  position: fixed;
  top: 20.5%;
  padding-left: 0%;
  width: 100%;
  font-size: 2em;
  left: 51vw;
  text-align: justify;
  font-family: 'Edu Monument Grotesk';
  color: white ;
  mix-blend-mode: difference;
  z-index: +1;
}
h32{
  position: fixed;
  top: 20.5%;
  width: 49.5%;
  font-size: 2em;
  left: 58.5%;
  text-align: start;
  font-family: 'Edu Monument Grotesk';
  color: white ;
  mix-blend-mode: difference;
  z-index: +1;
}
h41{
  position: fixed;
  left: 20%;
  margin-left: 0.25%;
  bottom: 0%;
  width: 100%;
  font-size: 2em;
  text-align: left;
  font-family: 'Edu Monument Grotesk';
  color: white;
  mix-blend-mode: difference;
  z-index: +2;
}

  .trait-central{
    background-color: grey;
    width: 1px;
    height: 100%;
    position: fixed;
    left: 30%;
    transform: translate(-50%);
  }

  .trait-central2{
    background-color: grey;
    width: 1px;
    top: 15.25em;
    height: 100%;
    position: fixed;
    left: -30%;
    transform: translate(-50%);
  }

  .gauche{
    width: 40%;
    height: 1000%;
    position: fixed;
    top: 0vw;
    left: 0%;
  overflow: auto;
  z-index: -200;
  }
  
  .gauche-carousel{
    left: 0%;
    bottom: 0%;
    width: 30%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    z-index: -200;
  }
  .haut-titre{
left: 0%;
width: 0%;
    z-index: +200;
  }
  .carousel-on{
  animation-play-state: paused;
  z-index: +12;
  }
  .carousel{
    width: 100%;
    height: 1000%;
    position: relative;
    overflow: auto;
    z-index: +200;
    animation: up 8s linear infinite;
  }
 
  
  @keyframes up{
    0%{
  top: 0vw;
    }
    100%{
  top: -143vw;
  }
  }


  .blocg1{
    position: relative;
    left: 0%;
    width: 100%;
    height: 20vw;
    background-image: url(../images/avion_2.jpeg);
    background-size: cover;
    transition: .2s ease-in-out;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }
  .avion{
    display: none;
    position: relative;
    top: 88%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 3vw;
    padding-left: .5%;
  }
  .avion-on{
    display: initial;
    position: relative;
    top: 1%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 1.1em;
    padding-left: .5%;
  }
  .blocg1-on{
    position: relative;
    left: 0%;
    width: 100%;
    height: 20vw;
    background-image: url(../images/avion_22.png);
    background-size: cover;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }
  .blocg12{
    width: 100%;
    height: 22vw;
    background-image: url(../images/camion.jpeg);
    background-size: cover;
    transition: .2s ease-in-out;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }

  .camion{
    display: none;
    position: relative;
    top: 88%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 3vw;
    padding-left: .5%;
    transition: .2s ease-in-out;
  }
  .camion-on{
    display: initial;
    position: relative;
    top: 1%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 1.1em;
    padding-left: .5%;
    transition: .2s ease-in-out;
  }

  .blocg12-on{
    width: 100%;
    height: 22vw;
    background-image: url(../images/camion_2.png);
    background-size: cover;
    transition: .2s ease-in-out;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }

  .blocg2{
    width: 100%;
    height: 20vw;
    background-image: url(../images/voiture_1.jpeg);
    background-size: cover;
    transition: .2s ease-in-out;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }

  .voiture{
    display: none;
    position: relative;
    top: 88%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 3vw;
    padding-left: .5%;
    transition: .2s ease-in-out;
  }
  .voiture-on{
    display: initial;
    position: relative;
    top: 1%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 1.1em;
    padding-left: .5%;
    transition: .2s ease-in-out;
  }
  .blocg2-on{
    position: relative;
    left: 0%;
    width: 100%;
    height: 20vw;
    background-image: url(../images/voiture_12.png);
    background-size: cover;
    transition: .2s ease-in-out;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }

  .blocg3{
    width: 100%;
    height: 20vw;
    background-image: url(../images/moto.jpeg);
    background-size: cover;
    transition: .2s ease-in-out;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }

  .moto{
    display: none;
    position: relative;
    top: 88%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 3vw;
    padding-left: .5%;
    transition: .2s ease-in-out;
  }
  .moto-on{
    display: initial;
    position: relative;
    top: 1%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 1.1em;
    padding-left: .5%;
    transition: .2s ease-in-out;
  }
  .blocg3-on{
    position: relative;
    left: 0%;
    width: 100%;
    height: 20vw;
    background-image: url(../images/moto_2.png);
    background-size: cover;
    transition: .2s ease-in-out;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }

  .blocg4{
    width: 100%;
    height: 20vw;
    background-image: url(../images/scooter.webp);
    background-size: cover;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }

  .scooter{
    display: none;
    position: relative;
    top: 88%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 3vw;
    padding-left: .5%;
    transition: .2s ease-in-out;
  }
  .scooter-on{
    display: initial;
    position: relative;
    top: 1%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    color: black;
    font-size: 1.1em;
    padding-left: .5%;
    transition: .2s ease-in-out;
  }
  .blocg4-on{
    position: relative;
    left: 0%;
    width: 100%;
    height: 20vw;
    background-image: url(../images/scooter_2.png);
    background-size: cover;
    transition: .2s ease-in-out;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }

  .blocg5{
    width: 100%;
    height: 23vw;
    background-image: url(../images/vélomoteur.jpeg);
    background-size: cover;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }

  .vélomoteur{
    display: none;
    position: relative;
    top: 2%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 3vw;
    padding-left: .5%;
    transition: .2s ease-in-out;
  }
  .vélomoteur-on{
    display: initial;
    position: relative;
    top: 1%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 1.1em;
    padding-left: .5%;
    transition: .2s ease-in-out;
  }
  .blocg5-on{
    position: relative;
    left: 0%;
    width: 100%;
    height: 23vw;
    background-image: url(../images/vélomoteur_2.png);
    background-size: cover;
    transition: .2s ease-in-out;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }

  .blocg6{
    width: 100%;
    height: 18vw;
    background-image: url(../images/vélo.jpeg);
    background-size: cover;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }

  .vélo{
    display: none;
    position: relative;
    top: 2%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 3vw;
    padding-left: .5%;
    transition: .2s ease-in-out;
  }
  .vélo-on{
    display: initial;
    position: relative;
    top: 1%;
    left: 0%;
    transform: translate(50%);
    font-family: 'Edu Monument Grotesk';
    font-size: 1.1em;
    padding-left: .5%;
    transition: .2s ease-in-out;
  }
  .blocg6-on{
    position: relative;
    left: 0%;
    width: 100%;
    height: 18vw;
    background-image: url(../images/vélo_2.png);
    background-size: cover;
    transition: .2s ease-in-out;
    filter: grayscale() 
    /* opacity(55%) contrast(200%); */
  }

  .blocgfinal{
    width: 100%;
    height: 9vw;
    background-color: tomato;
  }


/* - DROITE – */

  .haut-droite{
    width: 80%;
    height: 0%;
    position: fixed;
    left: 20%;
    top: 0;
    z-index: +75;
    background-color: white;
    mix-blend-mode: normal;
  }
  .droite{
    width: 70%;
    height: 100%;
    position: absolute;
    transform: scale(1);
    top: 101vh;
    left: 30%;
    z-index: +5;
    white-space: nowrap;
    /* scroll-snap-align: y mandatory; */
    scroll-behavior: smooth;
    }
  .blocd1{
    width: 100%;
    left: 0%;
    top: -0.5%;
    height: 38.76vw;
    position: relative;
    overflow: hidden;
    z-index: +5;
    transition: 0.08s ease-in-out;
    scroll-snap-align: start;
  }
  .info-d1{
  position: relative;
  bottom: 3%;
  padding-left: .2em;
  font-size: .9rem;
  font-family:'Edu Monument Grotesk';
  color: black;
  width: 100%;
  background-color: white;
  }
  
  .rond-info{
    position: absolute;
    width: 1em;
    height: 1em;
    top: 100%;
    right: .25%;
    border-radius: 50%;
    background-color: black;
  }
  
  .blocd1:hover{
    transform: translateX(0%);
  }

  .blocd2{
    width: 30%;
    left:0%;
    height: 38.35vw;
    position: relative;
    top: -0.15%;
    overflow: hidden;
    z-index: +4;
    transition: 0.08s ease-in-out;
    scroll-snap-align: y mandatory;
    scroll-snap-align: start;
  }

  .blocd2-on{
    width: 43.12%;
    left:0%;
    height: 100vh;
    position: relative;
    top: -0.15%;
    overflow: hidden;
    z-index: +4;
    transition: 0.08s ease-in-out;
    scroll-snap-align: y mandatory;
    scroll-snap-align: start;
  }
  .blocd2:hover{
    transform: translate(0%);
  }
  .info-d2{
    transform: translatey(-50%);
    padding-left: 0.1em;
    font-size: .9rem;
    font-family:'Edu Monument Grotesk';
    color: black;
    width: 100%;
    background-color: white;
    }
  
  video{
    width:100%;
  transform: translate(0%);
  filter: grayscale(1);
  z-index: +4;
  }
  
  .blocd3{
    width: 70%;
    left:0%;
    height: 89%;
    position: relative;
    top: -0.05%;
    z-index: +4;
    background-image: url(../images/décharge1.jpeg);
    background-size: cover;
    filter: grayscale();
    transition: 0.08s ease-in-out;
    scroll-snap-align: start;
  }
  .blocd3:hover{
    transform: translateX(0%);
  }
  .info-d3{
    position: relative;
    top: 100%;
    padding-left: .2em;
    font-size: 1rem;
    font-family:'Edu Monument Grotesk';
    color: black;
    width: 100%;
    background-color: white;
    }
  
    .blocd5{
      width: 100%;
      left:0%;
      height: 40.8%;
      position: relative;
      top: 1%;
      overflow: auto;
      z-index: +4;
      background-size: cover;
      scroll-snap-align: start;
    }
  
    .blocd4{
      width: 30%;
      left:0%;
      height: 39vw;
      position: relative;
      top: 1.75%;
      z-index: +4;
    }
    .blocd4:hover{
      transform: translate(0%, 0%);
    }
    .info-d4{
      transform: translatey(-50%);
      padding-left: 0.075em;
      font-size: 1rem;
      font-family:'Edu Monument Grotesk';
      color: black;
      width: 100%;
      background-color: white;
      }
  
      .blocd4-on{
        width: 43.65%;
        left:0%;
        height: 100vh;
        position: relative;
        top: 1.75%;
        z-index: +4;
      }

      .blocd5{
        width: 100%;
        left:0%;
        height: 99.75%;
        position: relative;
        top: 2%;
        z-index: +4;
        background-image: url(../images/décharge_5.webp);
        background-size: cover;
        overflow: hidden;
        filter: grayscale(1);
        transition: 0.08s ease-in-out;
      }
      .blocd5:hover{
        transform: translateX(0%);
      }
      .info-d5{
        position: relative;
        top: 100%;
        transform: translatey(-100%);
        padding-left: .075em;
        font-size: 1rem;
        font-family:'Edu Monument Grotesk';
        color: black;
        width: 100%;
        background-color: white;
        }

  .rond-bottom{
    position: absolute;
    bottom: -49.5%;
    left: -250%;
    transform: translate(-50%);
    width: 4.1em;
    height: 4.1em;
    border-radius: 50%;
    background-color: black;
    z-index: +4;
    transition: .2s ease-in-out;
  }
  
  .rond-bottom-on{
    position: absolute;
    bottom: -49.5%;
    left: -250%;
    transform: translate(-0%);
    width: 4.1em;
    height: 4.1em;
    border-radius: 50%;
    background-color: black;
    z-index: +4;
    transition: .2s ease-in-out;
  }

  .blocd6{
    width: 70%;
    left:0%;
    height: 67%;
    position: relative;
    top: -0.3%;
    opacity: 100%;
    z-index: +4;
    background-image: url(../images/particule_pneu.jpeg);
    background-size: cover;
    filter: grayscale();
    transition: 0.08s ease-in-out;
  }
  .blocd6-on{
    width: 70%;
    left:0%;
    height: 67%;
    position: relative;
    top: -0.3%;
    opacity: 100%;
    z-index: +4;
    background-image: url(../images/particule_pneu.jpeg);
    background-size: cover;
    filter: grayscale();
    transition: 0.08s ease-in-out;
  }
  
  .info-d6{
    position: relative;
    top: 100%;
    transform: translatey(-100%);
    padding-left: .075em;
    font-size: .9em;
    font-family:'Edu Monument Grotesk';
    color: black;
    width: 100%;
    background-color: white;
    }

  .blocd7{
    width: 165%;
    font-family:'Edu Monument Grotesk';
    overflow: hidden;
    left: 0%;
    height: 0%;
    position: relative;
    text-align: start;
    top: 2%;
    opacity: 0%;
    z-index: +4;
    font-size: 1rem;
    background-size: cover;
    filter: grayscale();
    transition: 0.08s ease-in-out;
  }
  
  .blocd7-on{
    width: 162.75%;
    font-family:'Edu Monument Grotesk';
    overflow: hidden;
    left:15%;
    height: 12%;
    position: relative;
    text-align: start;
    top: 1.5%;
    opacity: 100%;
    z-index: +4;
    font-size: 1rem;
    background-size: cover;
    filter: grayscale();
    transition: 0.08s ease-in-out;
  }
  
  .blocd7 span{
    width: 200%;
    font-family:'Edu Monument Grotesk';
    overflow: hidden;
    left:0%;
    height: 23%;
    position: relative;
    text-align: start;
    top:0%;
    opacity: 100%;
    z-index: +4;
    font-size: 1rem;
    background-size: cover;
    filter: grayscale();
    transition: 0.08s ease-in-out;
  }
  
  .blocd7 span2{
    width: 200%;
    font-family:'Edu Monument Grotesk';
    overflow: hidden;
    left: -26.25%;
    height: 23%;
    position: relative;
    text-align: start;
    top: 13.5%;
    opacity: 100%;
    z-index: +4;
    font-size: 1rem;
    background-size: cover;
    filter: grayscale();
    transition: 0.08s ease-in-out;
  }
  
  .blocd7 span3{
    width: 200%;
    font-family:'Edu Monument Grotesk';
    overflow: hidden;
    left:-26.25%;
    height: 23%;
    position: relative;
    text-align: start;
    top: 13.5%;
    opacity: 100%;
    z-index: +4;
    font-size: 1rem;
    background-size: cover;
    filter: grayscale();
    transition: 0.08s ease-in-out;
  }
  
  .blocd7 span4{
    width: 200%;
    font-family:'Edu Monument Grotesk';
    overflow: hidden;
    left:-51.05%;
    height: 23%;
    position: relative;
    text-align: start;
    top: 27.5%;
    opacity: 100%;
    z-index: +4;
    font-size: 1rem;
    background-size: cover;
    filter: grayscale();
    transition: 0.08s ease-in-out;
  }
  .blocd7 span5{
    width: 200%;
    font-family:'Edu Monument Grotesk';
    overflow: hidden;
    left:-51.05%;
    height: 23%;
    position: relative;
    text-align: start;
    top: 27.5%;
    opacity: 100%;
    z-index: +4;
    font-size: 1rem;
    background-size: cover;
    filter: grayscale();
    transition: 0.08s ease-in-out;
  }
  .blocd7 span6{
    width: 200%;
    font-family:'Edu Monument Grotesk';
    overflow: hidden;
    left:-76.275%;
    height: 23%;
    position: relative;
    text-align: start;
    top: 41%;
    opacity: 100%;
    z-index: +4;
    font-size: 1rem;
    background-size: cover;
    filter: grayscale();
    transition: 0.08s ease-in-out;
  }
  
  .blocd7 span7{
    width: 200%;
    font-family:'Edu Monument Grotesk';
    overflow: hidden;
    left:-76.275%;
    height: 23%;
    position: relative;
    text-align: start;
    top: 41%;
    opacity: 100%;
    z-index: +4;
    font-size: 1rem;
    background-size: cover;
    filter: grayscale();
    transition: 0.08s ease-in-out;
  }
}