/* defaults */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-X:hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-style: normal;
  font-family: "avantgarde-medium";
  src:url("../fonts/ITC Avant Garde Gothic Medium.eot") format("eot"), 
      url("../fonts/ITC-Avant-Garde-Gothic-Medium.woff") format("woff"),
      url("../fonts/ITC-Avant-Garde-Gothic-Medium.woff2") format("woff2");
}

/* TOUS TOUS TOUS TOUS TOUS TOUS TOUS TOUS TOUS TOUS TOUS TOUS TOUS*/
.container {
  position: absolute;
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translateX(-50%);
  z-index: 99;
}
.bord-bas-brun-e{
  position: relative;
  width: 100vw;
  height: auto;
  z-index: 99;
  bottom: 0;
}
.bord-bas-blanc {
  position: absolute;
  width: 100vw;
  height: auto;
  z-index: 99;
  bottom: 0;
  pointer-events: none;
}
.bord-bas-jaune{
  position: absolute;
  width: 100vw;
  height: auto;
  z-index: 99;
  bottom: 0;
}
.bord-droite-blanc{
  position: absolute;
  height: 100vh;
  z-index: 0;
  right: 0;
}
.bord-droite-jaune{
  position: absolute;
  height: 100vh;
  z-index: 0;
  right: 0%;
}
.bord-droite-jaune-boulette{
  position: absolute;
  height: 100vh;
  z-index: 2;
  right: 0%;
}
.anim-left{
    position: absolute;
    width: 30%;
    bottom: 30%;
    left: 15%;
}
.anim-right{
  position: absolute;
  width: 30%;
  bottom: 30%;
  right: 15%;
}
.anim-bas-mdf{
  top: 30%;
}
.anim-bas-mdf-2{
  top: 20%;
}
.indications-droite{
  position: absolute;
  font-family: "avantgarde-medium";
  font-size: 1.2em;
  color: #41280d;
  z-index: 99;
  right: 20%; 
  top: 18%;
}
.indications-gauche{
  position: absolute;
  font-family: "avantgarde-medium";
  font-size: 1.2em;
  color: #41280d;
  z-index: 99;
  left: 20%; 
  top: 18%;
}
.rond-jaune{
  position: absolute;
  z-index: 98;
}
.rond-blanc{
  position: absolute;
  z-index: 98;
}
.rond{
  animation: anim-rond 30s infinite ;
}
@keyframes anim-rond{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.r-01{
  width: 10%;
  right: 25%;
  top: 14%;
}
.r-02{
  width: 11%;
  left: 25%;
  top: 14%;
}
.r-03{
  width: 12%;
  right: 27%;
  top: 14%;
}
.r-04{
  width: 13%;
  left: 22%;
  top: 14%;
}
.r-05{
  width: 14%;
  right: 25%;
  top: 14%;
}
.r-06{
  width: 15%;
  left: 25%;
  top: 14%;
}
.r-07{
  width: 16%;
  right: 25%;
  top: 13%;
}
.r-08{
  width: 17%;
  left: 25%;
  top: 12%;
}
.r-09{
  width: 18%;
  right: 28%;
  top: 10%;
}
.r-10{
  width: 19%;
  left: 25%;
  top: 10%;
}
.r-11{
  width: 20%;
  right: 25%;
  top: 10%;
}
.r-12{
  width: 21%;
  left: 25%;
  top: 12%;
}
.r-13{
  width: 22%;
  right: 25%;
  top: 12%;
}
.r-14{
  width: 23%;
  left: 15%;
  top: 12%;
}
.r-15{
  width: 24%;
  right: 10%;
  top: 12%;
}
.r-16{
  width: 25%;
  left: 10%;
  top: 11%;
}
.r-17{
  width: 26%;
  right: 10%;
  top: 10%;
}
.r-18{
  width: 27%;
  left: 9%;
  top: 9%;
}
.r-19{
  width: 28%;
  right: 9%;
  top: 8%;
}
.r-20{
  width: 29%;
  left: 25%;
  top: 7%;
}

/* ACCUEIL ACCUEIL ACCUEIL ACCUEIL ACCUEIL ACCUEIL ACCUEIL ACCUEIL ACCUEIL ACCUEIL ACCUEIL ACCUEIL*/
.accueil{
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: white;
  margin: 0;
  z-index: 1;
}
.banhbao-txt-accueil{
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "avantgarde-medium";
  color: white;
  font-size: 1.2em;
  animation: texte-acc 3s infinite;
}
@keyframes texte-acc{
  0%{
    color: white;
  }
  50%{
    color: #b07f48;
  }
  100%{
    color: white;
  }
}

.panier-accueil{
  position: absolute;
  height: 93vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  animation: anim-panier-accueil 16s infinite ;
}
@keyframes anim-panier-accueil{
  0%{
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.img-panier-accueil{
  position: absolute;
  height: 93vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;

}
.bao-accueil{
  position: absolute;
  height: 80vh;
  width: 80vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.img-bao-accueil-1{
  position: relative;
  height: 45%;
  top: 33%;
  left: 22%;
  transform: translate(-50%, -50%);
  animation: anim-bao-accueil-1 16s infinite ;
}
.img-bao-accueil-2{
  position: relative;
  height: 45%;
  top: 33%;
  left: 78%;
  transform: translate(-50%, -50%);
  animation: anim-bao-accueil-1 16s 0.5s infinite ;
}
.img-bao-accueil-3{
  position: relative;
  height: 45%;
  top: 82%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: anim-bao-accueil-1 16s 1s infinite ;
}
@keyframes anim-bao-accueil-1{
  0%{
    transform: translate(-50%, -50%) rotate(0deg);  
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.couvercle-accueil{
  position: absolute;
  height: 93vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 72vh 9vh;
  z-index: 4;
  animation: anim-couvercle-accueil 8s infinite ease-in; 
}
@keyframes anim-couvercle-accueil{
  0%{
    transform: translate(-50%, -50%) rotate(0deg);  
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* TEMPS TEMPS TEMPS TEMPS TEMPS TEMPS TEMPS TEMPS TEMPS TEMPS TEMPS TEMPS TEMPS TEMPS TEMPS TEMPS */
.temps{
  position: relative;
  width: 100vw;
  height: 110vh;
  background-color: #f8f6d0;
  margin: 0;
  z-index: 1;
  overflow: hidden;
}
.boite-texte-temps{
  position: absolute;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  column-count: 6;
}
.btt1{
  top: 10vh;
  font-family: "avantgarde-medium";
  color: #b07f48;
  font-size: 1.2em;
}
.btt2{
  top: 14vh;
  font-family: "avantgarde-medium";
  color: #41280d;
  font-size: 1.2em;
}
.anim-temps{
  position: absolute;
  width: 60vw;
  max-height: 30vh;
  top: 40vh;
  left: 50%;
  transform: translateX(-50%);
}
.boite-bao-txt-temps{
  position: absolute;
  width: 44%; 
}
.boite-crvt-txt-temps{
  position: absolute;
  width: 45%; 
  right: 0;
}
.bao-temps{
  position: absolute;
  width: 100%; 
  animation: anim-bao-temps 20s infinite ease-in-out;
  z-index: 1;
}
@keyframes anim-bao-temps{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.crevette-temps{
  position: absolute;
  width: 100%;
  animation: anim-crevette-temps 2s infinite ease-in-out;
}
@keyframes anim-crevette-temps{
  0%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(10deg);
  }
  100%{
    transform: rotate(0deg);
  }
}
/* INGREDIENT PATE INGREDIENT PATE INGREDIENT PATE INGREDIENT PATE INGREDIENT PATE INGREDIENT PATE*/
.ingredient-pate{
  position: relative;
  width: 100vw;
  height: 95vh;
  overflow: hidden;
  background-color:white;
}
.boite-ingredient-pate{
  position: relative;
  width: 95vw;
  height: 95vh;
  left: 48%;
  top: 65%;
  transform: translate(-50%, -50%);
}
.titre-ingredient-pate{
  font-family: "avantgarde-medium";
  color:  #b07f48;
  position: absolute;
  font-size: 1.2em;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 98;
  text-align: center;
}
.ingr {
  position: relative;
  height: auto;
  width: 6vw;
}
.txt-ingredients{
  font-family: "avantgarde-medium";
  color:  #b07f48; 
  position: relative;
  text-align: center;
  font-size: 0.7em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}
.img-pate{
  position: relative;
  width: 80%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.5s;
}
.img-pate-cochee{
  position: absolute;
  width: 80%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.farine-box{
  position: absolute;
  bottom: 55%;
  left: 20%;
}
.eau-box{
  position: absolute;
  bottom: 55%;
  left: 35%;
}
.levure-box{
  position: absolute;
  bottom: 55%;
  left: 50%;
}
.sucre-box{
  position: absolute;
  bottom: 55%;
  left: 65%;
}
.huile-box{
  position: absolute;
  bottom: 55%;
  left: 80%;
}
.huile-ip{
  height: 11vw;
}
.coche{
  position: relative;
  width: 2rem;
  height: 2rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2rem;
  border: 0.5px solid #b07f48;
  z-index: 100;
}
.coche:hover{
background-color: #b07f48;
transition: 0.5s;
}
.coche-clic{
  background-color: #b07f48;
  transition: 0.5s;
}
.coche-clic-img{
  opacity: 0%;
  transition: 0.5s;
}
/* INGREDIENT FARCE INGREDIENT FARCE INGREDIENT FARCE INGREDIENT FARCE INGREDIENT FARCE INGREDIENT FARCE INGREDIENT FARCE */
.ingredient-farce{
    position: relative;
    width: 100vw;
    height: 130vh;
    overflow: hidden;
    background-color: #f8f6d0;
  }
  .boite-ingredient-farce{
    position: relative;
    width: 95vw;
    height: 95vh;
    left: 47%;
    top: 55%;
    z-index: 100;
    transform: translate(-50%, -50%);
  }
  .titre-ingredient-farce{
    font-family: "avantgarde-medium";
    color:  #41280d;  
    position: absolute;
    font-size: 1.2em;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 98;
    text-align: center;
  }
  .ingr2 {
    position: relative;
    height: auto;
    width: 6vw;
  }
  .txt-ingredients2{
    font-family: "avantgarde-medium";
    color:  #41280d; 
    position: relative;
    width: 12vw;
    font-size: 0.7em;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
  }
  .img-farce{
    position: relative;
    width: 80%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.5s;
  }
  .img-farce-coche{
    position: absolute;
    width: 80%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .img-farce-cochee{
    position: absolute;
    width: 80%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .crevette-box{
    position: absolute;
    width: 8.5vw;
    bottom: 60%;
    left: 20%;
  }
  .oignon-box{
    position: absolute;
    bottom: 60%;
    left: 35%;
    width: 8vw;
  }
  .navet-box{
    position: absolute;
    bottom: 60%;
    left: 50%;
    width: 8vw;
  }
  .chou-box{
    position: absolute;
    bottom: 60%;
    left: 65%;
    width: 8vw;
  }
  .citronnelle-box{
    position: absolute;
    bottom: 60%;
    left: 80%;
    width: 3.8vw;
  }
  .citronnelle-farce{
    transform: rotate(-30deg);
  }
  .huile-sesame-box{
    position: absolute;
    bottom: 20%;
    left: 22.5%;
    width: 3.5vw;
  }
  .soja-box{
    position: absolute;
    bottom: 20%;
    left: 36.3%;
    width: 5.5vw;
  }
  .citron-box{
    position: absolute;
    bottom: 20%;
    left: 50%;
    width: 8vw;
  }
  .poireau-box{
    position: absolute;
    bottom: 20%;
    left: 64%;
    width: 10vw;
  }
  .coche2{
    position: relative;
    width: 2rem;
    height: 2rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2rem;
    border: 0.5px solid #41280d ;
    z-index: 100;
  }
  .coche2:hover{
  background-color:  #41280d;
  transition: 0.5s;
  }
  .coche-clic2{
    background-color:  #41280d;
  }
/* ETAPE-1 ETAPE-1 ETAPE-1 ETAPE-1 ETAPE-1 ETAPE-1 ETAPE-1 ETAPE-1 ETAPE-1 ETAPE-1 ETAPE-1*/
/* BOX 1 */
.recette-1{
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: 3;
}
.elements {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  height: 100vh;
}
.element {
  width: 100vw;
  height: 100vh;
  transition: transform 1s ease-in-out;
}
.element-1 .element {
  transform: translateX(0%);
}
.element-2 .element {
  transform: translateX(-100%);
}
.element-3 .element {
  transform: translateX(-200%);
}
.element-4 .element {
  transform: translateX(-300%);
}
.element-5 .element {
  transform: translateX(-400%);
}
/* 1.1 */
.element:nth-child(1) { 
  background-color: white;
}
.illustration-1{
  position: relative;
  z-index: 1;
  width: 100%;
}
.illustration-1bis{
  position: absolute;
  z-index: 2;
  width: 0%;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  animation: anim-illustration-1bis 4s infinite 1s ;
}
@keyframes anim-illustration-1bis{
  0%{
    width: 0%;
  }
  25%{
      width: 35%;
    }
  50%{
    width: 0%;
  }
  75%{
    width: 35%;
  }
  100%{
    width: 0%;
  }
}
/* 1.2 */
.element:nth-child(2) {
  background-color: #f8f6d0;
}
.bol-1-2{
  position: relative;
  z-index: 0;
  width: 100%;
}
.sucre-1-2{
  position: absolute;
  width: 17%;
  top: -60%;
  left: 15%;
  z-index: 99;
  animation: anim-sucre-1-2 3s 2s infinite ease-in-out;
}
@keyframes anim-sucre-1-2{
  0%{
    width: 17%;
    top: -60%;
  }
  100%{
    width: 0%;
    top: 50%;
  }
}
.levure-1-2{
  position: absolute;
  width: 15%;
  top: -60%;
  left: 45%;
  z-index: 99;
  animation: anim-levure-1-2 3s 3s infinite ease-in-out;
}
@keyframes anim-levure-1-2{
  0%{
    width: 15%;
    top: -60%;
  }
  100%{
    width: 0%;
    top: 50%;
  }
}
.huile-1-2{
  position: absolute;
  width: 7%;
  top: -70%;
  left: 75%;
  z-index: 99;
  animation: anim-huile-1-2 3s 4s infinite ease-in-out;
}
@keyframes anim-huile-1-2{
  0%{
    width: 7%;
    top: -60%;
  }
  100%{
    width: 0%;
    top: 50%;
  }
}  
/* 1.3 */
.element:nth-child(3) {
  background-color: white;
}
.bol-dessous-1-3{
  position: relative;
  z-index: 1;
  width: 100%;
  top: 0;
  left: 0;
}
.pate-1-3{
  position: absolute;
  z-index: 2;
  width: 80%;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom center;
  animation: pate-1-3 5s infinite ease-in-out;
}
@keyframes pate-1-3{
  0%{
    width: 80%;
  }
  50%{
    width: 100%;
  }
  100%{
    width: 80%;
  }
}
.bol-devant-1-3{
  position: absolute;
  z-index: 3;
  width: 100%;
  top: 0;
  left: 0;
}
.eau-1-3{
  position: absolute;
  width: 17%;
  top: -45%;
  left: 30%;
  transform: translateX(-50%);
  z-index: 98;
  animation: eau-1-3 5s infinite ease-in-out;
}
.goutte-1-3{
  position: absolute;
  width: 0%;
  top: -45%;
  left: 45%;
  transform: translateX(-50%);
  z-index: 99;
  animation: goutte-1-3 5s infinite ease-in-out;
}
@keyframes goutte-1-3{
  0%{
    width: 0%;
    top: -45%;
  }
  40%{
    width: 0%;
    top: -45%;
  }
  41%{
    width: 8%;
    top: -45%;
  }
  75%{
    width: 0%;
    top: 30%;
  }
  100%{
    width: 0%;
    top: -45%;
  }
}
@keyframes eau-1-3{
  0%{
    transform: translateX(-50%) rotate(0deg);
  }
  45%{
    transform: translateX(-50%) rotate(60deg);
  }
  55%{
    transform: translateX(-50%) rotate(60deg);
  }
  100%{
    transform: translateX(-50%) rotate(0deg);
  }
}
/* 1.4 */
.element:nth-child(4) {
  background-color: #f8f6d0;
}
.bol-1-4{
  position: relative;
  z-index: 0;
  width: 100%;
  bottom: 0;
}
.torchon-1-4{
  position: absolute;
  z-index: 0;
  left: 0;
  width: 120%;
  left: 50%;
  transform: translateX(-50%);
  animation: anim-torchon-1-4 8s infinite ease-in-out;
}
@keyframes anim-torchon-1-4{
  0%{
    top: -3%;
  }
  50%{
    top: -70%;
  }
  100%{
    top: -3%;
  }
}
/* 1.5 */
.element:nth-child(5) {
  background-color: white;
  overflow: hidden;
}
.chrono__start{
  color: #b07f48; 
  transition: 0.5s; 
  cursor: pointer;
}
.chrono__start:hover{
  color: #41280d;  
  cursor: pointer;
}
.illu-1-5{
  position: relative;
  width: 110vw;
  transform: translate(-50%, -50%);
  top:50%;
  left: 50%;
  z-index: -1;
}
.info-1-5{
  position: absolute;
  width: 100vw;
  height: 20vh;
  top:10%;
  left: 50%;
  align-items: center;
}
.info-1-5 .indications-droite{
  position: absolute;
  top:0%;
  left: 0%;
  transform: translateX(-50%);
  text-align: center;
}
.repos-bao{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.repos-bao:nth-child(1){
  animation: rp-001 30s 0s infinite ease-in-out;
  z-index: 1;
}
@keyframes rp-001{
  0%{
    width: 0%;
  }
  10%{
    width: 120%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 120%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(2){
  animation: rp-002 30s 0.2s infinite ease-in-out;
  z-index: 2;
}
@keyframes rp-002{
  0%{
    width: 0%;
  }
  10%{
    width: 90%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 90%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(3){
  animation: rp-003 30s 0.4s infinite ease-in-out;
  z-index: 3;
}
@keyframes rp-003{
  0%{
    width: 0%;
  }
  10%{
    width: 68%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 68%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(4){
  animation: rp-004 30s 0.6s infinite ease-in-out;
  z-index: 4;
}
@keyframes rp-004{
  0%{
    width: 0%;
  }
  10%{
    width: 57%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 57%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(5){
  animation: rp-005 30s 0.8s infinite ease-in-out;
  z-index: 5;
}
@keyframes rp-005{
  0%{
    width: 0%;
  }
  10%{
    width: 45%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 45%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(6){
  animation: rp-006 30s 1s infinite ease-in-out;
  z-index: 6;
}
@keyframes rp-006{
  0%{
    width: 0%;
  }
  10%{
    width: 38%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 38%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(7){
  animation: rp-007 30s 1.2s infinite ease-in-out;
  z-index: 7;
}
@keyframes rp-007{
  0%{
    width: 0%;
  }
  10%{
    width: 33%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 33%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(8){
  animation: rp-008 30s 1.4s infinite ease-in-out;
  z-index: 8;
}
@keyframes rp-008{
  0%{
    width: 0%;
  }
  10%{
    width: 29%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 29%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(9){
  z-index: 9;
  animation: rp-009 30s 1.6s infinite ease-in-out;
}
@keyframes rp-009{
  0%{
    width: 0%;
  }
  10%{
    width: 25%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 25%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(10){
  z-index: 10;
  animation: rp-010 30s 1.8s infinite ease-in-out;
}
@keyframes rp-010{
  0%{
    width: 0%;
  }
  10%{
    width: 22%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 22%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(11){
  z-index: 11;
  animation: rp-011 30s 2s infinite ease-in-out;
}
@keyframes rp-011{
  0%{
    width: 0%;
  }
  10%{
    width: 19%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 19%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(12){
  z-index: 12;
  animation: rp-012 30s 2.2s infinite ease-in-out;
}
@keyframes rp-012{
  0%{
    width: 0%;
  }
  10%{
    width: 17%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 17%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(13){
  z-index: 13;
  animation: rp-013 30s 2.4s infinite ease-in-out;
}
@keyframes rp-013{
  0%{
    width: 0%;
  }
  10%{
    width: 15%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 15%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(14){ 
  z-index: 14; 
  animation: rp-014 30s 2.6s infinite ease-in-out;
}
@keyframes rp-014{
  0%{
    width: 0%;
  }
  10%{
    width: 13%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 13%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(15){
  z-index: 15;
  animation: rp-015 30s 2.8s infinite ease-in-out;
}
@keyframes rp-015{
  0%{
    width: 0%;
  }
  10%{
    width: 11%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 11%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(16){
  z-index: 16;
  animation: rp-016 30s 3s infinite ease-in-out;
}
@keyframes rp-016{
  0%{
    width: 0%;
  }
  10%{
    width: 9%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 9%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(17){
  z-index: 17;
  animation: rp-017 30s 3.2s infinite ease-in-out;
}
@keyframes rp-017{
  0%{
    width: 0%;
  }
  10%{
    width: 8%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 8%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
.repos-bao:nth-child(18){
  z-index: 18;
  animation: rp-018 30s 3.4s infinite ease-in-out;
}
@keyframes rp-018{
  0%{
    width: 0%;
  }
  10%{
    width: 7%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  90%{
    width: 7%;
    transform: translate(-50%, -50%) rotate(1080deg);
  }
  100%{
    width: 0%;
  }
}
/* ETAPE 2 ETAPE 2 ETAPE 2 ETAPE 2 ETAPE 2 ETAPE 2 ETAPE 2 ETAPE 2 ETAPE 2 ETAPE 2 ETAPE 2 ETAPE 2 ETAPE 2 */
/* BOX 2 */
.recette-2{
  position: relative;
  width: 100vw;
  height: 100vh;
  top: 0;
  margin: 0;
  padding: 0;
  z-index: 1;
}
.two-elements {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  height: 100vh;
}
.two-element {
  width: 100vw;
  height: 100vh;
  transition: transform 1s ease-in-out;
}
.two-element-1 .two-element {
  transform: translateX(0%);
}
.two-element-2 .two-element {
  transform: translateX(-100%);
}
.two-element-3 .two-element {
  transform: translateX(-200%);
}
.two-element-4 .two-element {
  transform: translateX(-300%);
}
.two-element-5 .two-element {
  transform: translateX(-400%);
}
.two-element-6 .two-element {
  transform: translateX(-500%);
}
.two-element-7 .two-element {
  transform: translateX(-600%);
}
.two-element-8 .two-element {
  transform: translateX(-700%);
}
.two-element-9 .two-element {
  transform: translateX(-800%);
}
/* 2.1 */ /* 2.1 */ /* 2.1 */ /* 2.1 */
.two-element:nth-child(1) {
  background-color: #f8f6d0;
  z-index: 12;
}
.casserole-derriere-2-1{
  position: relative;
  z-index: 1;
  width: 100%;
  top: 0;
  left: 0;
}
.bulles1-2-1{
  position: absolute;
  z-index: 2;
  width: 100%;
  top: 0;
  left: 0;
  animation: bulles1-2-1 4s 2s ease-in-out infinite ;
}
@keyframes bulles1-2-1{
  0%{
    top: 0;
    width: 100%;
  }
  50%{
    top: -10%;
    width: 85%;
    left: 10%;
  }
  100%{
    top: 0;
    width: 100%;
  }
}
.bulles2-2-1{
  position: absolute;
  z-index: 2;
  width: 100%;
  top: 0;
  left: 0;
  transform-origin: top center ;
  animation: bulles2-2-1 6s ease-in-out infinite ;
}
@keyframes bulles2-2-1{
  0%{
    top: 0;
    width: 100%;
  }
  50%{
    top: -15%;
    width: 80%;
  }
  100%{
    top: 0;
    width: 100%;
  }
}
.casserole-devant-2-1{
  position: absolute;
  z-index: 2;
  width: 100%;
  top: 0;
  left: 0;
}
.crevette1-2-1{
  position: absolute;
  width: 17%;
  top: -60%;
  left: 15%;
  z-index: 99;
  animation: crevette1-2-1 3s 2s infinite ease-in-out;
}
@keyframes crevette1-2-1{
  0%{
    width: 17%;
    top: -60%;
  }
  100%{
    width: 0%;
    top: 50%;
  }
}
.crevette2-2-1{
  position: absolute;
  width: 15%;
  top: -60%;
  left: 35%;
  z-index: 99;
  animation: crevette2-2-1 3s 3s infinite ease-in-out;
}
@keyframes crevette2-2-1{
  0%{
    width: 15%;
    top: -60%;
  }
  100%{
    width: 0%;
    top: 50%;
  }
}
.crevette3-2-1{
  position: absolute;
  width: 7%;
  top: -70%;
  left: 55%;
  z-index: 99;
  animation: crevette3-2-1 3s 4s infinite ease-in-out;
}
@keyframes crevette3-2-1{
  0%{
    width: 7%;
    top: -60%;
  }
  100%{
    width: 0%;
    top: 50%;
  }
}
/* 2.2 */ /* 2.2 */ /* 2.2 */ /* 2.2 */
.two-element:nth-child(2) {
  background-color: white;
  z-index: 11;
}
.crevette-2-2{
  position: relative;
  z-index: 1;
  width: 55%;
  top: 0;
  left: 0;
  animation: crevette-2-2 3s infinite ease-in-out ;
}
@keyframes crevette-2-2 {
  0%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(30deg);
  }
  100%{
    transform: rotate(0deg);
  }
}
.goutte-2-2{
  position: absolute;
  z-index: 2;
  width: 10%;
  top: -10%;
  left: 0;
  animation: goutte-2-2 3s 2s infinite ease-in-out;
}
@keyframes goutte-2-2{
  0%{
    width: 10%;
    top: -10%;
  }
  100%{
    width: 0%;
    top: 100%;
  }
}
.goutte2-2-2{
position: absolute;
z-index: 2;
width: 10%;
top: -10%;
left: 20%;
animation: goutte2-2-2 3s 0s infinite ease-in-out;
}
@keyframes goutte2-2-2{
  0%{
    width: 10%;
    top: -10%;
  }
  100%{
    width: 0%;
    top: 100%;
  }
}
.goutte3-2-2{
  position: absolute;
  z-index: 2;
  width: 10%;
  top: -10%;
  left: 50%;
  animation: goutte3-2-2 3s 1s infinite ease-in-out;
  }
  @keyframes goutte3-2-2{
    0%{
      width: 10%;
      top: -10%;
    }
    100%{
      width: 0%;
      top: 100%;
    }
  }
/* 2.3 */ /* 2.3 */ /* 2.3 */ /* 2.3 */
.two-element:nth-child(3) {
  background-color: #f8f6d0;
  z-index: 10;
}
.anim-right .t2-3{
  top: 23%;
}
  .crevette-queue-2-3{
    position: absolute;
    z-index: 2;
    width: 55%;
    top: 0;
    left: 0;
    transform-origin: 60% 10%;
    animation: crevette-queue-2-3 3s infinite ease-in-out;
  }
  @keyframes crevette-queue-2-3{
    0%{
      transform: rotate(0deg);
    }
    50%{
      transform: rotate(20deg);
    }
    90%{
      transform: rotate(0deg);
    }  
  }
  .crevette-2-3{
    position: relative;
    z-index: 1;
    width: 55%;
    top: 0;
    left: 0;
    transform-origin: 60% 90%;
    animation: crevette-2-3 3s infinite ease-in-out ;
  }
  @keyframes crevette-2-3 {
    0%{
      transform: rotate(0deg);
    }
    50%{
      transform: rotate(-20deg);
    }
    90%{
      transform: rotate(0deg);
    }  
  }
  /* 2.4 */ /* 2.4 */ /* 2.4 */ /* 2.4 */
.two-element:nth-child(4) {
  background-color: white;
  z-index: 9;
}
.al-2-4{
  position: absolute;
  top: 55%;
  left: 40%;
  transform: translateX(-50%);
}
.poireau-all{
  position: absolute;
  width: 26%;
  top: -50%;
  left: -10%;
  transform: rotate(30deg);
}
.oignon-all{
  position: absolute;
  width: 30%;
  height: auto;
  left: 30%;
  top: 50%;
  transform: rotate(-90deg);
}
.navet-all{
  position: absolute;
  width: 25%;
  left: 75%;
  top: -30%;
  transform: rotate(-20deg);
}
.chou-all{
  position: absolute;
  width: 30%;
  left: 160%;
  top: -10%;
  transform: rotate(90deg);
}
.emincer-2-4-1{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(50%);
  width: 70%;
  animation: emincer-2-4-1 4s infinite ease-in-out;
}
@keyframes emincer-2-4-1{
  0%{
    left: 50%;
    transform: translateX(50%);
  }
  50%{
    left: 25%;
    transform: translateX(50%);
  }
  90%{
    left: 50%;
    transform: translateX(50%);
  }
}

.emincer-2-4-2{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(50%);
  width: 70%;
  animation: emincer-2-4-2 4s infinite ease-in-out;
}
@keyframes emincer-2-4-2{
  0%{
    left: 50%;
    transform: translateX(50%);
  }
  50%{
    left: 75%;
    transform: translateX(50%);
  }
  90%{
    left: 50%;
    transform: translateX(50%);
  }
}
.emincer-2-4-3{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(50%);
  width: 70%;
  animation: emincer-2-4-3 4s infinite ease-in-out;
}
@keyframes emincer-2-4-3{
  10%{
    left: 50%;
    transform: translateX(50%);
  }
  70%{
    left: 25%;
    transform: translateX(50%);
  }
  90%{
    left: 50%;
    transform: translateX(50%);
  }
}
.emincer-2-4-4{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(50%);
  width: 70%;
  animation: emincer-2-4-4 4s infinite ease-in-out;
}
@keyframes emincer-2-4-4{
  10%{
    left: 50%;
    transform: translateX(50%);
  }
  60%{
    left: 75%;
    transform: translateX(50%);
  }
  90%{
    left: 50%;
    transform: translateX(50%);
  }
}
.emincer-2-4-5{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(50%);
  width: 70%;
  animation: emincer-2-4-5 4s infinite ease-in-out;
}
@keyframes emincer-2-4-5{
  5%{
    left: 50%;
    transform: translateX(50%);
  }
  55%{
    left: 25%;
    transform: translateX(50%);
  }
  90%{
    left: 50%;
    transform: translateX(50%);
  }
}
/* 2.5 */ /* 2.5 */ /* 2.5 */ /* 2.5 */
.two-element:nth-child(5) {
  background-color:#f8f6d0;
  z-index: 8;
}
.ar-2-5{
  top: 45%;
  transform: translateY(-50%);
}
.citronnelle-all{
  position: relative;
  width: 60%;
  transform: rotate(90deg);
}
.citronnelle1{
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  animation: citronnelle-2-5-1 4s infinite ease-in-out;
}
@keyframes citronnelle-2-5-1{
  5%{
    left: 50%;
  }
  55%{
    left: 25%;
  }
  90%{
    left: 50%;
  }
}
.citronnelle2{
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  animation: citronnelle-2-5-2 4s infinite ease-in-out;
}
@keyframes citronnelle-2-5-2{
  5%{
    left: 50%;
  }
  55%{
    left: 75%;
  }
  90%{
    left: 50%;
  }
}
/* 2.6 */ /* 2.6 */ /* 2.6 */ /* 2.6 */
.two-element:nth-child(6) {
  background-color: white ;
  z-index: 7;
}
  .poelle-2-6{
    position: absolute;
    width: 100%;
    transform: rotate(-15deg);
  }
  .inside-poelle-2-6{
    position: absolute;
    width: 15vw;
    height: 15vw;
    transform-origin: center;
    top: 3.9vw;
    left: 11%;
    z-index: 99;
  }
  .poireau-2-6{
    position: absolute;
    width: 45%;
    top: 0%;
    left: -10%;
    animation: revenir-2-6 3s infinite ease-in-out;
  }
  .citronnelle-2-6{
    position: absolute;
    width: 13%;
    top: -10%;
    left: 60%;
    transform: rotate(-30deg);
    animation: revenir-2-6bis1 3s 0.2s infinite ease-in-out;
  }
  .chou-2-6{
    position: absolute;
    width: 25%;
    top: 40%;
    left: 35%;
    animation: revenir-2-6 3s 0.4s infinite ease-in-out;
  }
  .navet-2-6{
    position: absolute;
    width: 25%;
    top: 60%;
    left: 0%;
    transform: rotate(-60deg);
    animation: revenir-2-6bis2 3s 0.6s infinite ease-in-out;
  }
  .oignon-2-6{
    position: absolute;
    width: 25%;
    top: 68%;
    left: 60%;
    transform: rotate(-40deg);
    animation: revenir-2-6bis3 3s 0.8s infinite ease-in-out;
  }
  @keyframes revenir-2-6{
    0%{
      transform: rotate(0deg);
    }
    50%{
      transform: rotate(15deg);
    }
    100%{
      transform: rotate(0deg);
    }
  }
  @keyframes revenir-2-6bis1{
    0%{
      transform: rotate(-30deg);
    }
    50%{
      transform: rotate(-45deg);
    }
    100%{
      transform: rotate(-30deg);
    }
  }
  @keyframes revenir-2-6bis2{
    0%{
      transform: rotate(-60deg);
    }
    50%{
      transform: rotate(-75deg);
    }
    100%{
      transform: rotate(-60deg);
    }
  }
  @keyframes revenir-2-6bis3{
    0%{
      transform: rotate(-40deg);
    }
    50%{
      transform: rotate(-55deg);
    }
    100%{
      transform: rotate(-40deg);
    }
  }
  .huile-sesame-2-6{
    position: absolute;
    width: 7%;
    top: -10vw;
    left: 0vw;
    animation: huile-sesame-2-6 5s ease-in-out infinite;
  }
  @keyframes huile-sesame-2-6{
    0%{
      transform: rotate(0deg);
    }
    50%{
      transform: rotate(70deg);
    }
    100%{
      transform: rotate(0deg);
    }
  }
  .soja-2-6{
    position: absolute;
    width: 12%;
    left: 20vw;
    top: -10vw;
    animation: soja-2-6 5.5s 0.5s ease-in-out infinite;
  }
  @keyframes soja-2-6{
    0%{
      transform: rotate(0deg);
    }
    50%{
      transform: rotate(-70deg);
    }
    100%{
      transform: rotate(0deg);
    }
  }
  .tache-huile-2-6{
    position: absolute;
    width: 0vw;
    height: 0vw;
    top: 10vw;
    left: 3vw;
    border-radius: 7vw;
    z-index: 1;
    background-color: #f8f6d0;
    transform-origin: 3vw 3vw;
    animation: tache-huile-sesame-2-6 5s ease-in-out infinite;
  }
  @keyframes tache-huile-sesame-2-6{
    0%{
      width: 0vw;
      height: 0vw;
      opacity: 100%;
    }
    50%{
      width: 6vw;
      height: 6vw;
      transform-origin: 3vw 3vw;
    }
    90%{
      opacity: 100%;
    }
    100%{
      width: 6vw;
      height: 6vw;
      opacity: 0%;
      transform-origin: 3vw 3vw;
    }
  }
  .tache-soja-2-6{
    position: absolute;
    width: 0vw;
    height: 0vw;
    top: 10vw;
    left: 12vw;
    border-radius: 7vw;
    z-index: 1;
    transform-origin: center;
    background-color: #f8f6d0;
    animation: tache-soja-2-6 5.5s 0.5s ease-in-out infinite;
  }
  @keyframes tache-soja-2-6{
    0%{
      width: 0vw;
      height: 0vw;
      opacity: 100%;
    }
    50%{
      width: 6vw;
      height: 6vw;
    }
    90%{
      opacity: 100%;
    }
    100%{
      width: 6vw;
      height: 6vw;
      opacity: 0%;
    }
  }

/* 2.7 */ /* 2.7 */ /* 2.7 */ /* 2.7 */
.two-element:nth-child(7) {
  background-color:#f8f6d0;
  z-index: 1;
}
.anim-2-7{
  position: relative;
  width: 100vw;
  transform: translate(-50%, -50%);
  top:50%;
  left: 50%;
  z-index: 0;
}

.info-2-7{
  position: absolute;
  width: 100vw;
  height: 20vh;
  top:10%;
  left: 50%;
}
.info-2-7 .indications-gauche{
  position: absolute;
  top:0%;
  left: 0%;
  transform: translateX(-50%);
}
.chrono-1, .chrono-2, .chrono-3{
  font-family: "avantgarde-medium";
  color:  #41280d;  
  position: absolute;
  font-size: 1.2em;
  bottom:0%;
  left: 0%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 199;
}
/* Tout le cercle*/
.box-all-bou{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.box-all-bou:nth-child(1){
  animation: cercle-rotate-inv 22s infinite;
}
.box-all-bou:nth-child(2){
  animation: cercle-rotate 26s infinite;
  transform: translate(-50%,-50%) rotate(0) ;
}
.box-all-bou:nth-child(3){
  animation: cercle-rotate-inv 30s infinite;
  transform: translate(-50%,-50%) rotate(60) ;
}
.box-all-bou:nth-child(4){
  animation: cercle-rotate 35s infinite;
  transform: translate(-50%,-50%) rotate(0) ;
}
.box-all-bou:nth-child(5){
  animation: cercle-rotate-inv 20s infinite;
  transform: translate(-50%,-50%) rotate(0) ;
}
@keyframes cercle-rotate{
  0%{
    transform: translate(-50%,-50%) rotate(0);
  }
  100%{
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
@keyframes cercle-rotate-inv{
  0%{
    transform: translate(-50%,-50%) rotate(0);
  }
  100%{
    transform: translate(-50%,-50%) rotate(-360deg);
  }
}
/* Boites-Un-Cercle*/
.boite-boubou{
  position: absolute;
  width: 80vw;
  height: 80vw;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.bou2{
  position: absolute;
  width: 100vw;
  height: 100vw;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.bou3{
  position: absolute;
  width: 120vw;
  height: 120vw;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.bou4{
  position: absolute;
  width: 60vw;
  height: 60vw;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.bou5{
  position: absolute;
  width: 43vw;
  height: 43vw;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.bou5 .disp{
  opacity: 0;
}
.bou5:nth-child(2){
  visibility: none;
}
.boite-boubou:nth-child(0){
  transform: translate(-50%,-50%) rotate(0deg);
}

.boite-boubou:nth-child(2){
  transform: translate(-50%,-50%) rotate(22.5deg);
}
.boite-boubou:nth-child(3){
  transform: translate(-50%,-50%) rotate(45deg);
}
.boite-boubou:nth-child(4){
  transform: translate(-50%,-50%) rotate(67.5deg);
}
.boite-boubou:nth-child(5){
  transform: translate(-50%,-50%) rotate(90deg);
}


/* BOULETTES*/
.boubou{
  width: 10vw ;
  position: absolute;
  animation: anim-boubou 7s infinite linear;
}
@keyframes anim-boubou{
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}
.boubou:nth-child(1){
 top:0;
 left:0;
 animation-delay: 0s;
}
.boubou:nth-child(2){
  top:0;
  right:0;
  animation-delay: 0.2s;
 }
 .boubou:nth-child(3){
  bottom:0;
  right:0;
  animation-delay: 0.4s;
 }
 .boubou:nth-child(4){
  bottom:0;
  left:0;
  animation-delay: 0.6s;
 }

 /* centre*/

 .boubou-centre{
   width: 30vw;
   position: absolute;
   top:50%;
   left: 50%;
   transform: translate(-50%,-50%);
   animation: boubouaucentre 9s infinite;
 }
 @keyframes boubouaucentre{
   0%{
    transform: translate(-50%,-50%) rotate(0deg);
   }
   100%{
    transform: translate(-50%,-50%) rotate(360deg);
   }
 }
/* 2.8 */ /* 2.8 */ /* 2.8 */ /* 2.8 */
.two-element:nth-child(8) {
  background-color: white;
  z-index: 5;
}
.citronnelle-2-8{
  position: absolute;
  width: 13%;
  top: -10%;
  left: 60%;
  transform: rotate(-30deg);
  animation: revenir-2-8 10s 0.2s infinite ease-in-out;
}
@keyframes revenir-2-8{
  0%{
    transform: rotate(-30deg);
    opacity: 0%;
  }
  10%{
    opacity: 100%;
  }
  50%{
    transform: rotate(-45deg);
    opacity: 0%;
  }
  100%{
    transform: rotate(-30deg);
    opacity: 0%;
  }
}

/* 2.9 */ /* 2.9 */ /* 2.9 */ /* 2.9 */
.two-element:nth-child(9) {
  background-color:#f8f6d0;
  z-index: 4;
}
.poelle-2-9{
  position: absolute;
  width: 100%;
  transform: rotate(-15deg);
}
.inside-poelle-2-9{
  position: absolute;
  width: 15vw;
  height: 15vw;
  transform-origin: center;
  top: 3.9vw;
  left: 11%;
  z-index: 99;
}
.poireau-2-9{
  position: absolute;
  width: 45%;
  top: -5%;
  left: 0%;
  animation: revenir-2-6 3s infinite ease-in-out;
}
.chou-2-9{
  position: absolute;
  width: 25%;
  top: 20%;
  left: 60%;
  animation: revenir-2-6 3s 0.4s infinite ease-in-out;
}
.navet-2-9{
  position: absolute;
  width: 25%;
  top: 60%;
  left: 0%;
  transform: rotate(-60deg);
  animation: revenir-2-6bis2 3s 0.6s infinite ease-in-out;
}
.oignon-2-9{
  position: absolute;
  width: 25%;
  top: 63%;
  left: 58%;
  transform: rotate(-40deg);
  animation: revenir-2-6bis3 3s 0.8s infinite ease-in-out;
}
.crevette-2-9{
  position: absolute;
  width: 17%;
  top: -10vw;
  left: 20%;
  animation: crevette-2-9 4s ease-in-out infinite;
  z-index: 101;
}
@keyframes crevette-2-9{
  0%{
    top: -10vw;
    opacity: 0%;
  }
  10%{
    opacity: 100%;
  }
  90%{
    opacity: 100%;
    top: 9vw;
  }
  100%{
    opacity: 0%;
    top: 9vw;
  }
}

/* ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 ETAPE 3 */
.recette-3{
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: 3;
}
.three-elements {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  height: 100vh;
}
.three-element {
  width: 100vw;
  height: 100vh;
  transition: transform 1s ease-in-out;
}
.three-element-1 .three-element {
  transform: translateX(0%);
}
.three-element-2 .three-element {
  transform: translateX(-100%);
}
.three-element-3 .three-element {
  transform: translateX(-200%);
}
.three-element-4 .three-element {
  transform: translateX(-300%);
}
.three-element-5 .three-element {
  transform: translateX(-400%);
}
.three-element-6 .three-element {
  transform: translateX(-500%);
}

/* 3.1 3.1 3.1 */
.three-element:nth-child(1) {
  background-color:white;
}
.boulettes-3-1{
  position: absolute; 
  width: 6vw;
  animation: boulette-3-1 15s ease-in-out infinite;
}
@keyframes boulette-3-1{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.blt-3-1-1{
  top: 13vw;
  left: 14.5vw;
  animation: blt-3-1-1 10s 1.5s ease-in-out infinite;
}
@keyframes blt-3-1-1{
0%{
  top: 13vw;
  left: 14.5vw;
}
50%{
  top: 3vw;
  left: 14.5vw;
}
90%{
  top: 13vw;
  left: 14.5vw;
  }
}
.blt-3-1-2{
  top: 9vw;
  left: 14vw;
  animation: blt-3-1-2 10s ease-in-out infinite;
}
@keyframes blt-3-1-2{
  0%{
    top: 9vw;
    left: 14vw;
  }
  50%{
    top: 0vw;
    left: 5vw;
  }
  90%{
    top: 9vw;
    left: 14vw;
  }
}
.blt-3-1-3{
  top: 10vw;
  left: 18vw;
  animation: blt-3-1-3 10s 0.2s ease-in-out infinite;
}
@keyframes blt-3-1-3{
  0%{
    top: 10vw;
    left: 18vw;
  }
  50%{
    top: 2vw;
    left: 24vw;
  }
  90%{
    top: 10vw;
    left: 18vw;
  }
}
.blt-3-1-4{
  top: 15vw;
  left: 19vw;
  animation: blt-3-1-4 10s 1.2s ease-in-out infinite;
}
@keyframes blt-3-1-4{
  0%{
    top: 15vw;
    left: 19vw;
  }
  50%{
    top: 7vw;
    left: 23vw;
  }
  90%{
    top: 15vw;
    left: 19vw;
  }
}
.blt-3-1-5{
  top: 17vw;
  left: 15vw;
  animation: blt-3-1-5 10s 1s ease-in-out infinite;
}
@keyframes blt-3-1-5{
  0%{
    top: 17vw;
    left: 15vw;
  }
  50%{
    top: 22vw;
    left: 13vw;
  }
  90%{
    top: 17vw;
    left: 15vw;
  }
}
.blt-3-1-6{
  top: 15vw;
  left: 11vw;
  animation: blt-3-1-6 10s 1.2s ease-in-out infinite;
}
@keyframes blt-3-1-6{
  0%{
    top: 15vw;
    left: 11vw;
  }
  50%{
    top: 19vw;
    left: 6vw;
  }
  90%{
    top: 15vw;
    left: 11vw;
  }
}
.blt-3-1-7{
  top: 11vw;
  left: 10vw;
  animation: blt-3-1-7 10s 1.4s ease-in-out infinite;
}
@keyframes blt-3-1-7{
  0%{
    top: 11vw;
    left: 10vw;
  }
  50%{
    top: 6vw;
    left: 5vw;
  }
  90%{
    top: 11vw;
    left: 10vw;
  }
}
.blt-3-1-8{
  top: 15vw;
  left: 8vw;
  animation: blt-3-1-8 10s ease-in-out infinite;
}
@keyframes blt-3-1-8{
  0%{
    top: 15vw;
    left: 8vw;
  }
  50%{
    top: 13vw;
    left: 4vw;
  }
  90%{
    top: 15vw;
    left: 8vw;
  }
}
.blt-3-1-9{
  top: 14vw;
  left: 22vw;
  animation: blt-3-1-9 10s ease-in-out infinite;
}
@keyframes blt-3-1-9{
  0%{
    top: 14vw;
    left: 22vw;
  }
  50%{
    top: 13vw;
    left: 26vw;
  }
  90%{
    top: 14vw;
    left: 22vw;
  }
}
.blt-3-1-10{
  top: 20.5vw;
  left: 15vw;
  animation: blt-3-1-10 10s ease-in-out infinite;
}
@keyframes blt-3-1-10{
  0%{
    top: 20.5vw;
    left: 15vw;
  }
  50%{
    top: 25vw;
    left: 19vw;
  }
  90%{
    top: 20.5vw;
    left: 15vw;
  }
}
.blt-3-1-11{
  top: 19vw;
  left: 20vw;
  animation: blt-3-1-11 10s ease-in-out infinite;
}
@keyframes blt-3-1-11{
  0%{
    top: 19vw;
    left: 20vw;
  }
  50%{
    top: 23vw;
    left: 25vw;
  }
  90%{
    top: 19vw;
    left: 20vw;
  }
}
.blt-3-1-12{
  top: 19.5vw;
  left: 11vw;
  animation: blt-3-1-12 10s ease-in-out infinite;
}
@keyframes blt-3-1-12{
  0%{
    top: 19.5vw;
    left: 11vw;
  }
  50%{
    top: 25vw;
    left: 5vw;
  }
  90%{
    top: 19.5vw;
    left: 11vw;
  }
}
/* 3.2 3.2 3.2 */
.three-element:nth-child(2)  {
  background-color:#f8f6d0;
}
.pate-3-2{
  position: absolute;
  width: 30vw;
  height: 30vw;
  border-radius: 15vw;
  top: 0;
  left: 0; 
  background-color: white ;
  animation: pate-3-2 6s infinite ease-in-out;
}
@keyframes pate-3-2{
  0%{
    border-radius: 15vw;
  }
  50%{
    border-radius: 1vw;
  }
  0%{
    border-radius: 15vw;
  }
}
/* 3.3 3.3 3.3*/
.three-element:nth-child(3)  {
  background-color:white;
}
.pate-3-3{
  position: absolute;
  width: 30vw;
  height: 30vw;
  border-radius: 2vw;
  top: 0;
  left: 0; 
  background-color: #f8f6d0 ;
}
.coupe-3-3-1h{
  position: absolute;
  width: 0vw;
  height: 2px;
  top: 7.5vw;
  left: 0; 
  background-color:  white ;
  animation: coupe-3-3-1h 4s infinite ease-in-out;
}
.coupe-3-3-2h{
  position: absolute;
  width: 0vw;
  height: 2px;
  top: 15vw;
  left: 0; 
  background-color:  white ;
  animation: coupe-3-3-1h 4s 0.2s infinite ease-in-out;
}
.coupe-3-3-3h{
  position: absolute;
  width: 0vw;
  height: 2px;
  top: 22.5vw;
  left: 0; 
  background-color:  white ;
  animation: coupe-3-3-1h 4s 0.4s infinite ease-in-out;
}
@keyframes coupe-3-3-1h{
  0%{
    width: 0vw;
    opacity: 100%;
  }
  90%{
    width: 30vw;
    opacity: 100%;
  }
  100%{
    width: 30vw;
    opacity: 0%;
  }
}
.coupe-3-3-1v{
  position: absolute;
  width: 2px;
  height: 0vw;
  top: 0;
  left: 7.5vw; 
  background-color:  white;
  animation: coupe-3-3-1v 4s infinite ease-in-out;
}
.coupe-3-3-2v{
  position: absolute;
  width: 2px;
  height: 0vw;
  top: 0;
  left: 15vw; 
  background-color:  white ;
  animation: coupe-3-3-1v 4s 0.2s infinite ease-in-out;
}
.coupe-3-3-3v{
  position: absolute;
  width: 2px;
  height: 0vw;
  top: 0;
  left: 22.5vw; 
  background-color:  white ;
  animation: coupe-3-3-1v 4s 0.4s infinite ease-in-out;
}
@keyframes coupe-3-3-1v{
  0%{
    height: 0vw;
    opacity: 100%;
  }
  90%{
    height: 30vw;
    opacity: 100%;
  }
  100%{
    height: 45vw;
    opacity: 0%;
  }
}
/* 3.4 3.4 3.4*/
.three-element:nth-child(4)  {
background-color:#f8f6d0;
}
.pate-all-3-4{
  position: absolute;
  width: 35vw;
  height: 30vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.carre-pate-3-4{
  margin-left: 2px;
  margin-top: 1px;
  width: 7.4vw;
  height: 7.4vw;
  position: relative;
  background-color:white ;
  border-radius: 1vw;
}
.boulette-3-4{
  position: relative;
  width: 0vw;
  height: 0vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center ;
  animation: boulette-3-4 6s ease-in-out infinite;
}
@keyframes boulette-3-4{
  0%{
    width: 0vw;
    height: 0vw;
  }
  50%{
    width: 5.5vw;
    height: 5.5vw;
  }
  60%{
    width: 5.5vw;
    height: 5.5vw;
  }
  90%{
    width: 0vw;
    height: 0vw;
  }
}
.b2{
  animation-delay: 0.2s;
}
.b3{
  animation-delay: 0.4s;
}
.b4{
  animation-delay: 0.6s;
}
.b5{
  animation-delay: 0.8s;
}
.b6{
  animation-delay: 1s;
}
.b7{
  animation-delay: 1.2s;
}
.b8{
  animation-delay: 1.4s;
}
.b9{
  animation-delay: 1.6s;
}
.b10{
  animation-delay: 1.8s;
}
.b11{
  animation-delay: 2s;
}
.b12{
  animation-delay: 2.2s;
}
.b13{
  animation-delay: 2.4s;
}
.b14{
  animation-delay: 2.6s;
}
.b15{
  animation-delay: 2.8s;
}
.b16{
  animation-delay: 3s;
}
/* 3.5 3.5 3.5*/
.three-element:nth-child(5)  {
  background-color:white;
}
.pate-all-3-5{
  position: absolute;
  width: 35vw;
  height: 30vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.carre-pate-3-5{
  margin-left: 2px;
  margin-top: 1px;
  width: 7.5vw;
  height: 7.5vw;
  border-radius: 1vw;
  position: relative;
  background-color: #f8f6d0 ;
  animation: carre-pate-3-5 15s infinite ease-in-out;
  z-index: 1;
}
.boulette-3-5{
  position: relative;
  width: 5.5vw;
  height: 5.5vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center ;
  z-index: 1;
}

@keyframes carre-pate-3-5{
  0%{
    opacity: 100%;
  }
  10%{
    opacity: 100%;
  }
  15%{
    opacity: 0%;
  }
  100%{
    opacity: 0%;
  }
}
.bao-all-3-5{
  position: absolute;
  width: 35vw;
  height: 30vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  z-index: 2;
}
.bao-3-5{
  margin-left: 2px;
  margin-top: 1px;
  width: 7.5vw;
  height: 7.5vw;
  position: relative;
  animation: bao-3-5 15s infinite ease-in-out;
}
@keyframes bao-3-5{
  0%{
    opacity: 0%;
    transform: rotate(0deg);
  }
  10%{
    opacity: 0%;
  }
  15%{
    opacity: 100%;
  }
  100%{
    opacity: 100%;
    transform: rotate(360deg);
  }
}
.oab2 {
  animation-delay: 0.2s;
}
.oab3 {
  animation-delay: 0.4s;
}
.oab4 {
  animation-delay: 0.6s;
}
.oab5 {
  animation-delay: 0.8s;
}
.oab6 {
  animation-delay: 1s;
}
.oab7 {
  animation-delay: 1.2s;
}
.oab8 {
  animation-delay: 1.4s;
}
.oab9 {
  animation-delay: 1.6s;
}
.oab10 {
  animation-delay: 1.8s;
}
.oab11 {
  animation-delay: 2s;
}
.oab12 {
  animation-delay: 2.2s;
}
.oab13 {
  animation-delay: 2.4s;
}
.oab14 {
  animation-delay: 2.6s;
}
.oab15 {
  animation-delay: 2.8s;
}
.oab16 {
  animation-delay: 3s;
}

.cp2 {
  animation-delay: 0.2s;
}
.cp3 {
  animation-delay: 0.4s;
}
.cp4 {
  animation-delay: 0.6s;
}
.cp5 {
  animation-delay: 0.8s;
}
.cp6 {
  animation-delay: 1s;
}
.cp7 {
  animation-delay: 1.2s;
}
.cp8 {
  animation-delay: 1.4s;
}
.cp9 {
  animation-delay: 1.6s;
}
.cp10 {
  animation-delay: 1.8s;
}
.cp11 {
  animation-delay: 2s;
}
.cp12 {
  animation-delay: 2.2s;
}
.cp13 {
  animation-delay: 2.4s;
}
.cp14 {
  animation-delay: 2.6s;
}
.cp15 {
  animation-delay: 2.8s;
}
.cp16 {
  animation-delay: 3s;
}
/* 3.6 3.6 3.6*/
.three-element:nth-child(6)  {
  background-color: #f8f6d0;
}
.info-3-6{
  position: absolute;
  width: 100vw;
  height: 20vh;
  top:10%;
  left: 50%;
}
.info-3-6 .indications-gauche{
  position: absolute;
  top:0%;
  left: 0%;
  transform: translateX(-50%);
  text-align: center;
}
.anim-3-6{
  position: relative;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  top:50%;
  left: 50%;
  z-index: 0;
  overflow: hidden;
}
.boite-gros-bao{
  position: absolute;
  width: 100vw;
  height: 100vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.boite-gros-bao:nth-child(2){
  transform: translate(-50%, -50%) rotate(35deg);
  animation: gb-001 40s infinite;
}
@keyframes gb-001{
  0%{
    transform: translate(-50%, -50%) rotate(35deg);;
  }
  100%{
    transform: translate(-50%, -50%) rotate(395deg);;
  }
}
.boite-gros-bao:nth-child(3){
  transform: translate(-50%, -50%) rotate(70deg);
  animation: gb-002 40s 0.4s infinite;
}
@keyframes gb-002{
  0%{
    transform: translate(-50%, -50%) rotate(70deg);;
  }
  100%{
    transform: translate(-50%, -50%) rotate(430deg);;
  }
}
.boite-gros-bao:nth-child(3){
  transform: translate(-50%, -50%) rotate(105deg);
  animation: gb-003 40s 0.8s infinite;
}
@keyframes gb-003{
  0%{
    transform: translate(-50%, -50%) rotate(105deg);;
  }
  100%{
    transform: translate(-50%, -50%) rotate(465deg);;
  }
}
.boite-gros-bao:nth-child(4){
  transform: translate(-50%, -50%) rotate(150deg);
  animation: gb-004 40s 1.2s infinite;
}
@keyframes gb-004{
  0%{
    transform: translate(-50%, -50%) rotate(150deg);;
  }
  100%{
    transform: translate(-50%, -50%) rotate(510deg);;
  }
}
.boite-gros-bao:nth-child(5){
  transform: translate(-50%, -50%) rotate(185deg);
  animation: gb-005 40s 1.6s infinite;
}
@keyframes gb-005{
  0%{
    transform: translate(-50%, -50%) rotate(185deg);;
  }
  100%{
    transform: translate(-50%, -50%) rotate(545deg);;
  }
}

/*BAO UNIQUE GROS*/
.gros-bao2{
  position: absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  animation: anim-gros 8s infinite;
}
.gros-bao{
  position: absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%);
  animation: anim-gros 8s infinite;
}

@keyframes anim-gros{
  0%{
    transform: translateX(-50%) rotate(0);
  }
  100%{
    transform: translateX(-50%) rotate(360deg);
  }
}

.boite-encore-plus-gros .boite-gros-bao{
  position: absolute;
  width: 150vw;
  height: 150vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gb-centre{
  position: absolute;
  width: 50vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: anim-gb-centre 12s infinite;
}
@keyframes anim-gb-centre{
  0%{
    transform: translate(-50%,-50%) rotate(0);
    opacity: 100%;
  }
  20%{
    opacity: 100%;
  }
  50%{
    opacity: 0%;
  }
  80%{
    opacity: 100%;
  }
  100%{
    transform: translate(-50%,-50%) rotate(360deg);
    opacity: 100%;
  }
}
.gb-centre-dessous{
position: absolute;
width: 50vw;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: anim-gb-centre-dessous 12s infinite;
}
@keyframes anim-gb-centre-dessous{
  0%{
    transform: translate(-50%,-50%) rotate(0);
  }
  100%{
    transform: translate(-50%,-50%) rotate(360deg);
  }
}


/* Bon app */
.bonapp{
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #41280d;
  margin: 0;
  z-index: 0;
  overflow: hidden;
}
.banhbao-txt-fin{
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "avantgarde-medium";
  color: white;
  font-size: 1.2em;
  animation: texte-bon-app 3s infinite;
}
@keyframes texte-bon-app{
  0%{
    color: white;
  }
  
  50%{
    color: #41280d;
  }
  
  100%{
    color: white;
  }
}
.bao-grid-bonapp{
  position: absolute;
  width: 150vw;
  height: 150vh;
}
.b-bon-app{
  position: absolute;
  width: 0vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: b-bon-app 15s infinite;
}
@keyframes b-bon-app{
  0%{
    width: 0vw;
  }
  5%{
    width: 0vw;
    transform: translate(-50%,-50%) rotate(0deg);
  }
  15%{
    width: 70vw;
  }
  25%{
    width: 0vw;
  }
  100%{
    width: 0vw;
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
.b-bon-app:nth-child(1){
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}
.b-bon-app:nth-child(2){
  top: 10%;
  left: 20%;
  animation-delay: 10s;
}
.b-bon-app:nth-child(3){
  top: 10%;
  left: 30%;
  animation-delay: 15.9s;
}
.b-bon-app:nth-child(4){
  top: 10%;
  left: 40%;
  animation-delay: 7.5s;
}
.b-bon-app:nth-child(5){
  top: 10%;
  left: 50%;
  animation-delay: 1.2s;
}
.b-bon-app:nth-child(6){
  top: 10%;
  left: 60%;
  animation-delay: 14.2s;
}
.b-bon-app:nth-child(7){
  top: 25%;
  left: 10%;
  animation-delay: 10.7s;
}
.b-bon-app:nth-child(8){
  top: 25%;
  left: 20%;
  animation-delay: 5.7s;
}
.b-bon-app:nth-child(9){
  top: 25%;
  left: 30%;
  animation-delay: 3.2s;
}
.b-bon-app:nth-child(10){
  top: 25%;
  left: 40%;
  animation-delay: 5.3s;
}
.b-bon-app:nth-child(11){
  top: 25%;
  left: 50%;
  animation-delay: 12.4s;
}
.b-bon-app:nth-child(12){
  top: 25%;
  left: 60%;
  animation-delay: 2.2s;
}
.b-bon-app:nth-child(13){
  top: 40%;
  left: 10%;
  animation-delay: 10.5s;
}
.b-bon-app:nth-child(14){
  top: 40%;
  left: 20%;
  animation-delay: 5.5s;
}
.b-bon-app:nth-child(15){
  top: 40%;
  left: 30%;
  animation-delay: 2.5s;
}
.b-bon-app:nth-child(16){
  top: 40%;
  left: 40%;
  animation-delay: 6s;
}
.b-bon-app:nth-child(17){
  top: 40%;
  left: 50%;
  animation-delay: 11s;
}
.b-bon-app:nth-child(18){
  top: 40%;
  left: 60%;
  animation-delay: 3s;
}
.b-bon-app:nth-child(19){
  top: 55%;
  left: 10%;
  animation-delay: 10.5s;
}
.b-bon-app:nth-child(20){
  top: 55%;
  left: 20%;
  animation-delay: 9.8s;
}
.b-bon-app:nth-child(21){
  top: 55%;
  left: 30%;
  animation-delay: 13.4s;
}
.b-bon-app:nth-child(22){
  top: 55%;
  left: 40%;
  animation-delay: 0.5s;
}
.b-bon-app:nth-child(23){
  top: 55%;
  left: 50%;
  animation-delay: 4.6s;
}
.b-bon-app:nth-child(24){
  top: 55%;
  left: 60%;
  animation-delay: 7.3s;
}

/* MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU */
.menu-all{
  z-index: 100;
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translate(-50%, 0);
}
.menu {
  z-index: 100;
  display: flex;
}
.chiffre-menu{
  color:#41280d;
  font-family: "avantgarde-medium";
  z-index: 100;
}
.menu .button {
  position: relative;
  width: 2rem;
  height:2rem;
  border-radius: 50%;
  border: 0.5px solid #41280d;
  background-color: #1fe0;

  cursor: pointer;
}
.menu .button + .button {
  margin-left: 3rem;
}
.menu .button:disabled {
  /* Styled when disabled */
  border: 1px solid red;
}
.menu .button:hover, 
.menu .button.selected {
  background-color: #41280d;
  transition: 0.5s;
}
.menu-txt {
  position: relative;
  display: flex;
  z-index: 4;
}
.menu-txt .chiffre-menu {
  position: relative;
  width: 2rem;
  height:2rem;
  font-size: 0.7em;
  text-align: center;
}
.menu-txt .chiffre-menu + .chiffre-menu {
  margin-left: 3rem;
}




@media screen and (max-width: 750px) {
  .anim-left{
    width: 55%;
  }
  .anim-right{
    width: 55%;
  }
  .anim-bas-mdf{
    width: 55%;
    top: 45%;
  }
  .anim-bas-mdf-2{
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
  }
  /* TEMPS TEMPS TEMPS TEMPS */
  .anim-temps{
    height: 100vh;
  }
  .boite-bao-txt-temps{
    width: 64%; 
    top:90%;
    left: 50%;
    transform: translateX(-50%);
  }
  .boite-crvt-txt-temps{
    width: 66%; 
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
  }
  .btt1{
    font-size: 0.8em;
  }
  .btt2{
    font-size: 0.8em;
    top: 13vh;
  }

  /* INGREDIENT PATE */
  .titre-ingredient-pate{
    top: 12%;
  }
  .ingr {
    width: 12vw;
  }
  .huile-ip{
    height: 18vw;
  }
  .farine-box{
    left: 20%;
    bottom: 60%;
  }
  .eau-box{
    left: 45%;
    bottom: 60%;
  }
  .levure-box{
    left: 70%;
    bottom: 60%;
  }
  .sucre-box{
    left: 35%;
    bottom: 30%;
  }
  .huile-box{
    left: 55%;
    bottom: 30%;
  }
  /* INGREDIENT FARCE */
  .ingredient-farce{
    height: 140vh;
  }
  .titre-ingredient-farce{
    top: 10%;
  }
  .ingr2 {
    width: 12vw;
  }
  .crevette-box{
    width: 18vw;
    bottom: 75%;
    left: 17%;
  }
  .oignon-box{
    width: 16.5vw;
    bottom: 75%;
    left: 45%;
  }
  .navet-box{
    width: 16.5vw;
    bottom: 75%;
    left: 72%;
  }
  .chou-box{
    width: 15vw;
    bottom: 40%;
    left: 17.5%;
  }
  .citronnelle-box{
    width: 10vw;
    bottom: 40%;
    left: 49%;
  }
  .huile-sesame-box{
    width: 7vw;
    bottom: 40%;
    left: 77%;
  }
  .soja-box{
    width: 10vw;
    bottom: 10%;
    left: 20%;
  }
  .citron-box{
    width: 18vw;
    bottom: 10%;
    left: 45%;
  }
  .poireau-box{
    width: 20vw;
    bottom: 10%;
    left: 70%;
  }

  /* 2.4 2.4 2.4 */
  .chou-all{
    position: absolute;
    width: 30%;
    left: 75%;
    top: 20%;
    transform: rotate(90deg);
  }
  /* 2.5 2.5 2.5 */
  .ar-2-5{
    top: 50%;
    transform: translateY(-50%);
  }
  /* 2.6 2.6 2.6 et companie */
  .inside-poelle-2-6{
    width: 25vw;
    height: 25vw;
    top: 8.5vw;
    left: 15%;
  }
  .soja-2-6{
    width: 12%;
    left: 30vw;
  }
  .inside-poelle-2-9{
    width: 25vw;
    height: 25vw;
    top: 8.5vw;
    left: 15%;
  }
  .crevette-2-9{
    width: 17%;
    top: -8vw;
    left: 20%;
    animation: crevette-2-9 4s ease-in-out infinite;
    z-index: 101;
  }
  @keyframes crevette-2-9{
    0%{
      top: -8vw;
      opacity: 0%;
    }
    10%{
      opacity: 100%;
    }
    90%{
      opacity: 100%;
      top: 16vw;
    }
    100%{
      opacity: 0%;
      top: 16vw;
    }
  }
  /* rond rond rond */
  .r-01{
    width: 20%;
    right: 25%;
    top: 14%;
  }
  .r-02{
    width: 21%;
    left: 25%;
    top: 14%;
  }
  .r-03{
    width: 22%;
    right: 27%;
    top: 14%;
  }
  .r-04{
    width: 23%;
    left: 22%;
    top: 14%;
  }
  .r-05{
    width: 24%;
    right: 25%;
    top: 14%;
  }
  .r-06{
    width: 25%;
    left: 25%;
    top: 14%;
  }
  .r-07{
    width: 26%;
    right: 25%;
    top: 13%;
  }
  .r-08{
    width: 27%;
    left: 25%;
    top: 13%;
  }
  .r-09{
    width: 28%;
    right: 28%;
    top: 13%;
  }
  .r-10{
    width: 29%;
    left: 25%;
    top: 13%;
  }
  .r-11{
    width: 30%;
    right: 25%;
    top: 13%;
  }
  .r-12{
    width: 31%;
    left: 25%;
    top: 12%;
  }
  .r-13{
    width: 32%;
    right: 25%;
    top: 12%;
  }
  .r-14{
    width: 33%;
    left: 15%;
    top: 12%;
  }
  .r-15{
    width: 34%;
    right: 10%;
    top: 12%;
  }
  .r-16{
    width: 35%;
    left: 10%;
    top: 11%;
  }
  .r-17{
    width: 36%;
    right: 10%;
    top: 10%;
  }
  .r-18{
    width: 37%;
    left: 9%;
    top: 9%;
  }
  .r-19{
    width: 38%;
    right: 9%;
    top: 8%;
  }
  .r-20{
    width: 39%;
    left: 25%;
    top: 7%;
  }
  
  .cm2:nth-child(7){
    position: absolute;
    bottom: -95%;
    left: 18%;
    z-index: 120;
    margin-left: 3rem;
  }
  .bt2:nth-child(7){
    position: absolute;
    left: 18%;
    bottom: 1%;
    z-index: 120;
    margin-left: 3rem;
  }

.cm2:nth-child(8){
  position: absolute;
  bottom: -95%;
  left: 35%;
  z-index: 120;
  margin-left: 3rem;
}
.bt2:nth-child(8){
  position: absolute;
  left: 35%;
  bottom: 1%;
  z-index: 120;
  margin-left: 3rem;
}
.cm2:nth-child(9){
  position: absolute;
  bottom: -95%;
  left: 54%;
  z-index: 120;
  margin-left: 3rem;
}
.bt2:nth-child(9){
  position: absolute;
  left: 54%;
  bottom: 1%;
  z-index: 120;
  margin-left: 3rem;
}
.menu-all-responsive{
  bottom: 6%;
}
}