@media (min-width:1370px) and (min-height:670px){
.layer-13{
  font-size: 7vw;
}
}
/* OK */
@media (max-width:1300px) {
  .image{
    height: 100%;
    width: auto;
    object-fit: cover;
  }
    .grid-background {
        background-image: 
          linear-gradient(transparent 107.33px, rgb(255, 51, 51) 108.33px,transparent 107.33px),
          linear-gradient(90deg,transparent 107.33px,rgb(255, 51, 51) 108.33px, transparent 107.33px);
        background-size: 100% 108.33px, 108.33px 100%;
    }

      .layer-1 {
        background-size: 100% 108.33px, 108.33px 100%;
      }

      .layer-4 {
        background-size: 100% 108.33px, 108.33px 100%;
      }

      .layer-8 {
        background-size: 100% 108.33px, 108.33px 100%;
      }

      .layer-12 {
        background-size: 100% 108.33px, 108.33px 100%;
      }

      .layer-2 {
        font-size: 9vw;
      }
      .layer-3 {
        font-size: 9vw;
      }
      .layer-5 {
        font-size: 9vw;
      }
      .layer-6 {
        font-size: 9vw;
      }
      .layer-7 {
        font-size: 9vw;
      }
      .layer-9 {
        font-size: 9vw;
      }
      .layer-10 {
        font-size: 9vw;
      }
      .layer-11 {
        font-size: 9vw;
      }
      .layer-13 {
        font-size: 9vw;
      }
      /* .layer-14 {
        font-size: 9vw;
      } */

      .grammes {
        position: fixed;
        width: 216.66px;
        height: 108.33px;
        font-size: 3vw;
        left: 50%;
        top: 50%;
        transform: translate(-108.33px, -15px);
      }

      .quantité-oeuf {
        position: fixed;
        width: 216.66px;
        height: 108.33px;
        font-size: 3vw;
        left: 50%;
        top: 50%;
        transform: translate(-108.33px, -15px);
      }
      
      .quantité-sel{
        position: fixed;
        width: 216.66px;
        height: 108.33px;
        font-size: 3vw;
        left: 50%;
        top: 50%;
        transform: translate(216.66px, -15px);
      }
      
      .quantité-farine {
        position: fixed;
        width: 216.66px;
        height: 108.33px;
        font-size: 3vw;
        left: 50%;
        top: 50%;
        transform: translate(-433.32px, -15px);
      }
      
      .text {
        width: 1083.3px;
        height: 108.33px;
        left: 50%;
        top: 50%;
        transform: translate(-541.65px,-411.99px);
      }
    
      .step-1 {
        width: 216.66px;
        height: 108.33px;
        font-size: 3vw;
        left: 50%;
        top: 50%;
        transform: translate(-108.33px,-87px);
        padding-top: 0px;
      }
       
      .pomme {
        transform: translate(-433.32px,-87px);
      }
      .courge {
        transform: translate(216.66px, -87px);
      }
      .image_pomme {
        transform: translate(-480px, 310px);
      }
      .image_patate {
        transform: translate(0, 295px);
      }
      .image_courge {
        transform: translate(480px, 310px);
      }

      .farine {
        transform: translate(-433.32px,-87px);
      }
      .sel {
        transform: translate(216.66px, -87px);
      }
      .image_farine {
        transform: translate(-480px, 310px);
        height: 15vw;
      }
      .image_oeuf {
        transform: translate(0, 295px);
        height: 15vw;
      }
      .image_sel {
        transform: translate(480px, 310px);
        height: 15vw;
      }

      .fourchette {
        transform: translate(-324.99px,-87px);
      }
      .planche {
        transform: translate(108.33px, -87px);
      }

      .sauge {
        transform: translate(-324.99px,-87px);
      }
      
      .tomate {
        transform: translate(108.33px, -87px);
      }

      .goback {
        height: 100px;
        width: 100px;
        top: 3px;
      }

      .photo {
        top: 60px;
        font-size: 60px;
      }

}
/* OK */
@media (max-height:780px) {

  .clic {
    top: 90%;
  }
  /* .grammes {
    position: fixed;
    width: 216.66px;
    height: 108.33px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-108.33px, -15px);
  } */
  
  .text {
    width: 1300px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-650px, -260px);
  }
  .image_pomme {
    transform: translate(-480px, 310px);
  }
  .image_patate {
    transform: translate(0, 225px);
  }
  .image_courge {
    transform: translate(480px, 310px);
  }
  .image_farine {
    transform: translate(-480px, 230px);
    height: 15vw;
  }
  .image_oeuf {
    transform: translate(0, 225px);
    height: 15vw;
  }
  .image_sel {
    transform: translate(480px, 230px);
    height: 15vw;
  }
}
/* OK */
@media (max-width:1300px) and (max-height:780px){
  .text {
    width: 1300px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-650px, -280px);
  }

  .grammes {
    position: fixed;
    width: 216.66px;
    height: 108.33px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-108.33px, 0);
  }

  .quantité-oeuf {
    position: fixed;
    width: 216.66px;
    height: 108.33px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-108.33px, 0);
  }
  
  .quantité-sel{
    position: fixed;
    width: 216.66px;
    height: 108.33px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(216.66px, 0);
  }
  
  .quantité-farine {
    position: fixed;
    width: 216.66px;
    height: 108.33px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-433.32px, 0);
  }
  
  .step-1 {
    width: 216.66px;
    height: 108.33px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-108.33px,-65px);
  }
   
  .pomme {
    transform: translate(-433.32px,-65px);
  }
  .courge {
    transform: translate(216.66px, -65px);
  }

  .farine {
    transform: translate(-433.32px,-65px);
  }
  .sel {
    transform: translate(216.66px, -65px);
  }
  .image_pomme {
    transform: translate(-480px, 310px);
  }
  .image_patate {
    transform: translate(0, 225px);
  }
  .image_courge {
    transform: translate(480px, 310px);
  }
  .image_farine {
    transform: translate(-480px, 310px);
    height: 15vw;
  }
  .image_oeuf {
    transform: translate(0, 225px);
    height: 15vw;
  }
  .image_sel {
    transform: translate(480px, 310px);
    height: 15vw;
  }

  .fourchette {
    transform: translate(-324.99px,-65px);
  }
  .planche {
    transform: translate(108.33px, -65px);
  }

  .sauge {
    transform: translate(-324.99px,-65px);
  }
  
  .tomate {
    transform: translate(108.33px, -65px);
  }

  .layer-13 {
    font-size: 8vw;
  }

}
/* OK */
@media (max-height:520px) {
.layer-1 {
  background-size: 100% 108.33px, 108.33px 100%;
}

.layer-4 {
  background-size: 100% 108.33px, 108.33px 100%;
}

.layer-8 {
  background-size: 100% 108.33px, 108.33px 100%;
}

.layer-12 {
  background-size: 100% 108.33px, 108.33px 100%;
}

.layer-2 {
  font-size: 7vw;
}
.layer-3 {
  font-size: 7vw;
}
.layer-5 {
  font-size: 7vw;
}
.layer-6 {
  font-size: 7vw;
}
.layer-7 {
  font-size: 7vw;
}
.layer-9 {
  font-size: 7vw;
}
.layer-10 {
  font-size: 7vw;
}
.layer-11 {
  font-size: 7vw;
}
.layer-13 {
  font-size: 7vw;
}
/* .layer-14 {
  font-size: 7vw;
} */
.image_pomme {
  transform: translate(-480px, 130px);
}
.image_patate {
  transform: translate(0, 130px);
}
.image_courge {
  transform: translate(480px, 130px);
}
.image_farine {
  transform: translate(-480px, 130px);
  height: 15vw;
}
.image_oeuf {
  transform: translate(0, 115px);
  height: 15vw;
}
.image_sel {
  transform: translate(480px, 130px);
  height: 15vw;
}
.image_fourchette {
  transform: translate(-480px, 130px);
}
.image_planche{
  transform: translate(480px, 130px);
}
.image_sauge {
  transform: translate(-480px, 130px);
}
.image_tomate{
  transform: translate(480px, 130px);
}
.text-recette {
  overflow: auto;
}
}
/* OK */
@media (max-width:1300px) and (max-height:520px) {
  .text {
    width: 1300px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-650px, -250px);
  }

  .grammes {
    position: fixed;
    width: 216.66px;
    height: 108.33px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-108.33px, 25px);
  }

  .quantité-oeuf {
    position: fixed;
    width: 216.66px;
    height: 108.33px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-108.33px, 25px);
  }
  
  .quantité-sel{
    position: fixed;
    width: 216.66px;
    height: 108.33px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(216.66px, 25px);
  }
  
  .quantité-farine {
    position: fixed;
    width: 216.66px;
    height: 108.33px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-433.32px, 25px);
  }
  
  .step-1 {
    width: 216.66px;
    height: 108.33px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-108.33px,-44px);
  }
   
  .pomme {
    transform: translate(-433.32px,-44px);
  }
  .courge {
    transform: translate(216.66px, -44px);
  }
  

  .farine {
    transform: translate(-433.32px,-44px);
  }
  .sel {
    transform: translate(216.66px, -44px);
  }

  .fourchette {
    transform: translate(-324.99px,-44px);
  }
  .planche {
    transform: translate(108.33px, -44px);
  }

  .sauge {
    transform: translate(-324.99px,-44px);
  }
  
  .tomate {
    transform: translate(108.33px, -44px);
  }
  .image_pomme {
    transform: translate(-480px, 130px);
  }
  .image_patate {
    transform: translate(0, 130px);
  }
  .image_courge {
    transform: translate(480px, 130px);
  }
  .image_farine {
    transform: translate(-480px, 130px);
    height: 15vw;
  }
  .image_oeuf {
    transform: translate(0, 115px);
    height: 15vw;
  }
  .image_sel {
    transform: translate(480px, 130px);
    height: 15vw;
  }
  .image_fourchette {
    transform: translate(-480px, 130px);
  }
  .image_planche{
    transform: translate(480px, 130px);
  }
  .image_sauge {
    transform: translate(-480px, 130px);
  }
  .image_tomate{
    transform: translate(480px, 130px);
  } 

}

/* OK */
@media (max-width:1050px) {

  .grid-background {
    background-image: 
      linear-gradient(transparent 86.5px, rgb(255, 51, 51) 87.5px,transparent 86.5px),
      linear-gradient(90deg,transparent 86.5px,rgb(255, 51, 51) 87.5px, transparent 86.5px);
  background-size: 100% 87.5px, 87.5px 100%;
}

  .layer-1 {
    background-size: 100% 87.5px, 87.5px 100%;
  }

  .layer-4 {
    background-size: 100% 87.5px, 87.5px 100%;
  }

  .layer-8 {
    background-size: 100% 87.5px, 87.5px 100%;
  }

  .layer-12 {
    background-size: 100% 87.5px, 87.5px 100%;
  }

  .layer-2 {
    font-size: 9vw;
  }
  .layer-3 {
    font-size: 7vw;
  }
  .layer-5 {
    font-size: 9vw;
  }
  .layer-6 {
    font-size: 9vw;
  }
  .layer-7 {
    font-size: 9vw;
  }
  .layer-9 {
    font-size: 9vw;
  }
  .layer-10 {
    font-size: 9vw;
  }
  .layer-11 {
    font-size: 9vw;
  }
  .layer-13 {
    font-size: 7vw;
  }
  /* .layer-14 {
    font-size: 9vw;
  } */

  .grammes {
    position: fixed;
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-87.5px, -20px);
  }

  .quantité-oeuf {
    position: fixed;
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-83px, -20px);
  }
  
  .quantité-sel{
    position: fixed;
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(180px, -20px);
  }
  
  .quantité-farine {
    position: fixed;
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-350px, -20px);
  }
  
  .text {
    width: 875px;
    height: 87.5px;
    left: 50%;
    top: 50%;
    transform: translate(-437.5px ,-340px);
  }

  .step-1 {
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-83px,-83px);
  }
   
  .pomme {
    transform: translate(-345px,-83px);
  }
  .courge {
    transform: translate(180px, -83px);
  }
  .image_pomme {
    transform: translate(-380px, 310px);
  }
  .image_patate {
    transform: translate(0, 295px);
  }
  .image_courge {
    transform: translate(380px, 310px);
  }

  .farine {
    transform: translate(-345px,-83px);
  }
  .sel {
    transform: translate(180px, -83px);
  }
  .image_farine {
    transform: translate(-380px, 310px);
    height: 15vw;
  }
  .image_oeuf {
    transform: translate(0, 315px);
    height: 15vw;
  }
  .image_sel {
    transform: translate(380px, 310px);
    height: 15vw;
  }

  .fourchette {
    transform: translate(-258px,-83px);
  }
  .planche {
    transform: translate(92px, -83px);
  }

  .sauge {
    transform: translate(-258px,-83px);
  }
  
  .tomate {
    transform: translate(92px, -83px);
  }
  .image_fourchette{
    transform: translate(-300px, 325px);
  }
  .image_planche {
    transform: translate(300px, 325px);
  }
  .image_sauge{
    transform: translate(-300px, 325px);
  }
  .image_tomate {
    transform: translate(300px, 325px);
  }

  .goback {
    height: 80px;
    width: 80px;
    top: 3px;
  }

  .photo {
    top: 50px;
    font-size: 60px;
  }
}
/* OK */
@media (max-width:1050px) and (max-height:780px){
  .grammes {
    position: fixed;
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-87.5px, 20px);
  }
  .quantité-oeuf {
    position: fixed;
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-83px, 20px);
  }
  
  .quantité-sel{
    position: fixed;
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(180px, 20px);
  }
  
  .quantité-farine {
    position: fixed;
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-350px, 20px);
  }
  
  .text {
    width: 875px;
    height: 87.5px;
    left: 50%;
    top: 50%;
    transform: translate(-437.5px ,-300px);
  }

  .step-1 {
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-83px,-41px);
  }
   
  .pomme {
    transform: translate(-345px,-41px);
  }
  .courge {
    transform: translate(180px, -41px);
  }

  .farine {
    transform: translate(-345px,-41px);
  }
  .sel {
    transform: translate(180px, -41px);
  }

  .fourchette {
    transform: translate(-258px,-41px);
  }
  .planche {
    transform: translate(92px,-41px);
  }

  .sauge {
    transform: translate(-258px,-41px);
  }
  
  .tomate {
    transform: translate(92px, -41px);
  }
  .image_pomme {
    transform: translate(-300px, 200px);
  }
  .image_patate {
    transform: translate(0, 225px);
  }
  .image_courge {
    transform: translate(330px, 220px);
  }
  .image_farine {
    transform: translate(-300px, 200px);
    height: 15vw;
  }
  .image_oeuf {
    transform: translate(0, 225px);
    height: 15vw;
  }
  .image_sel {
    transform: translate(330px, 220px);
    height: 15vw;
  }
  .image_fourchette {
    transform: translate(-300px, 200px);
  }
  .image_planche {
    transform: translate(330px, 225px);
  }
  .image_sauge{
    transform: translate(-250px, 260px);
  }
  .image_tomate {
    transform: translate(250px, 265px);
  }
  .layer-3{
    font-size: 14vh;
  }
  .layer-14{
    font-size: 7vh;
  }
}
/* OK */
@media (max-width:1050px) and (max-height:630px){

  .text {
    width: 875px;
    height: 87.5px;
    left: 50%;
    top: 50%;
    transform: translate(-437.5px ,-210px);
  }
  .text-w{
    overflow: scroll;
  }
  .image_pomme {
    transform: translate(-300px, 170px);
  }
  .image_patate {
    transform: translate(0, 180px);
  }
  .image_courge {
    transform: translate(330px, 180px);
  }
  .image_farine {
    transform: translate(-300px, 170px);
    height: 15vw;
  }
  .image_oeuf {
    transform: translate(0, 175px);
    height: 15vw;
  }
  .image_sel {
    transform: translate(330px, 170px);
    height: 15vw;
  }
  .image_fourchette {
    transform: translate(-300px, 170px);
  }
  .image_planche {
    transform: translate(330px, 175px);
  }
  .image_sauge{
    transform: translate(-250px, 170px);
  }
  .image_tomate {
    transform: translate(250px, 185px);
  }
}
/* OK */
@media (max-width:1050px) and (max-height:520px){

  .grammes {
    position: fixed;
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-87.5px, 60px);
  }
  .quantité-oeuf {
    position: fixed;
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-83px, 60px);
  }
  
  .quantité-sel{
    position: fixed;
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(180px, 60px);
  }
  
  .quantité-farine {
    position: fixed;
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-350px, 60px);
  }
  .layer-14 {
    font-size: 5vh;
  }
  
    .droite p {
      margin-bottom: -5vh;
    }
    .gauche p {
      margin-bottom: -5vh;
      width: max-content;
    }
  .text {
    width: 875px;
    height: 87.5px;
    left: 50%;
    top: 50%;
    transform: translate(-437.5px ,-170px);
  }

  .step-1 {
    width: 175px;
    height: 87.5px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-83px,2px);
  }
   
  .pomme {
    transform: translate(-345px,2px);
  }
  .courge {
    transform: translate(180px, 2px);
  }

  .farine {
    transform: translate(-345px,2px);
  }
  .sel {
    transform: translate(180px, 2px);
  }

  .fourchette {
    transform: translate(-258px,2px);
  }
  .planche {
    transform: translate(92px,2px);
  }

  .sauge {
    transform: translate(-258px,2px);
  }
  
  .tomate {
    transform: translate(92px, 2px);
  }
  .image_pomme {
    transform: translate(-300px, 170px);
  }
  .image_patate {
    transform: translate(0, 180px);
  }
  .image_courge {
    transform: translate(330px, 180px);
  }
  .image_farine {
    transform: translate(-300px, 170px);
    height: 15vw;
  }
  .image_oeuf {
    transform: translate(0, 175px);
    height: 15vw;
  }
  .image_sel {
    transform: translate(330px, 170px);
    height: 15vw;
  }
  .image_fourchette {
    transform: translate(-300px, 170px);
  }
  .image_planche {
    transform: translate(330px, 175px);
  }
  .image_sauge{
    transform: translate(-250px, 170px);
  }
  .image_tomate {
    transform: translate(250px, 185px);
  }
  .layer-3 {
    overflow: auto;
  }
  .layer-13 {
    overflow: auto;
  }

}

/* OK */
@media (max-width:780px) {

  .grid-background {
    background-image: 
      linear-gradient(transparent 77px, rgb(255, 51, 51) 78px,transparent 77px),
      linear-gradient(90deg,transparent 77px,rgb(255, 51, 51) 78px, transparent 77px);
  background-size: 100% 78px, 78px 100%;
}

  .layer-1 {
    background-size: 100% 78px, 78px 100%;
  }

  .layer-4 {
    background-size: 100% 78px, 78px 100%;
  }

  .layer-8 {
    background-size: 100% 78px, 78px 100%;
  }

  .layer-12 {
    background-size: 100% 78px, 78px 100%;
  }

  .layer-2 {
    font-size: 9vw;
  }
  .layer-3 {
    font-size: 9vw;
  }
  .layer-5 {
    font-size: 9vw;
  }
  .layer-6 {
    font-size: 9vw;
  }
  .layer-7 {
    font-size: 9vw;
  }
  .layer-9 {
    font-size: 9vw;
  }
  .layer-10 {
    font-size: 9vw;
  }
  .layer-11 {
    font-size: 9vw;
  }
  .layer-13 {
    font-size: 9vw;
  }
  /* .layer-14 {
    font-size: 9vw;
  } */

  .grammes {
    position: fixed;
    width: 156px;
    height: 78px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-78px, 160px);
  }
  .quantité-oeuf {
    position: fixed;
    width: 156px;
    height: 78px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-78px, 0);
  }
  
  .quantité-sel{
    position: fixed;
    width: 156px;
    height: 78px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-78px, 160px);
  }
  
  .quantité-farine {
    position: fixed;
    width: 156px;
    height: 78px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-78px, -160px);
  }
  
  .text {
    width: 780px;
    height: 78px;
    left: 50%;
    top: 50%;
    transform: translate(-385px, -360px);
  }

  .text-w {
    margin-top: 20%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .step-1 {
    width: 156px;
    height: 78px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-78px,-52px);
  }
   
  .pomme {
    transform: translate(-78px,-208px);
  }
  .courge {
    transform: translate(-78px, 104px);
  }
  .farine {
    transform: translate(-78px,-208px);
  }
  .sel {
    transform: translate(-78px, 104px);
  }

  .fourchette {
    transform: translate(-78px,-130px);
  }
  .planche {
    transform: translate(-78px, 26px);
  }

  .sauge {
    transform: translate(-78px,-130px);
  }
  
  .tomate {
    transform: translate(-78px, 26px);
  }
  .image_pomme {
    transform: translate(-125px, 260px);
  }
  .image_patate {
    transform: translate(125px, 400px);
  }
  .image_courge {
    transform: translate(-90px, 550px);
  }
  .image_farine {
    transform: translate(-115px, 250px);
  }
  .image_oeuf {
    transform: translate(100px, 400px);
  }
  .image_sel {
    transform: translate(-90px, 550px);
  }
  .image_fourchette{
    transform: translate(100px, 300px);
  }
  .image_planche {
    transform: translate(-90px, 480px);
  }
  .image_sauge{
    transform: translate(100px, 300px);
  }
  .image_tomate {
    transform: translate(-90px, 450px);
  }
}
/* OK */
@media (max-width:780px) and (max-height:780px) {

.grammes {
  position: fixed;
  width: 156px;
  height: 78px;
  font-size: 3vw;
  left: 50%;
  top: 50%;
  transform: translate(-78px, 215px);
}

.quantité-oeuf {
  position: fixed;
  width: 156px;
  height: 78px;
  font-size: 3vw;
  left: 50%;
  top: 50%;
  transform: translate(-78px, 55px);
}

.quantité-sel{
  position: fixed;
  width: 156px;
  height: 78px;
  font-size: 3vw;
  left: 50%;
  top: 50%;
  transform: translate(-78px, 215px);
}

.quantité-farine {
  position: fixed;
  width: 156px;
  height: 78px;
  font-size: 3vw;
  left: 50%;
  top: 50%;
  transform: translate(-78px, -105px);
}

.text {
  width: 780px;
  height: 78px;
  left: 50%;
  top: 50%;
  transform: translate(-385px, -310px);
}

.step-1 {
  width: 156px;
  height: 78px;
  font-size: 3vw;
  left: 50%;
  top: 50%;
  transform: translate(-78px,0px);
}
 
.pomme {
  transform: translate(-78px,-156px);
}
.courge {
  transform: translate(-78px, 156px);
}
.farine {
  transform: translate(-78px,-156px);
}
.sel {
  transform: translate(-78px, 156px);
}

.fourchette {
  transform: translate(-78px,-156px);
}
.planche {
  transform: translate(-78px,0px);
}

.sauge {
  transform: translate(-78px,-156px);
}

.tomate {
  transform: translate(-78px,0px);
}
.image_pomme {
  transform: translate(-125px, 230px);
}
.image_patate {
  transform: translate(125px, 320px);
}
.image_courge {
  transform: translate(-90px, 500px);
}
.image_farine {
  transform: translate(-105px, 190px);
}
.image_oeuf {
  transform: translate(100px, 320px);
}
.image_sel {
  transform: translate(-90px, 500px);
}
.image_fourchette{
  transform: translate(100px, 200px);
}
.image_planche {
  transform: translate(-90px, 370px);
}
.image_sauge{
  transform: translate(100px, 200px);
}
.image_tomate {
  transform: translate(-90px, 350px);
}
}
/* OK */
@media (max-width:780px) and (max-height:630px){
  .text {
    width: 780px;
    height: 78px;
    left: 50%;
    top: 50%;
    transform: translate(-385px, -230px);
  }
  .image_pomme {
    transform: translate(-125px, 150px);
  }
  .image_patate {
    transform: translate(125px, 290px);
  }
  .image_courge {
    transform: translate(-90px, 400px);
  }
  .image_farine {
    transform: translate(-105px, 150px);
  }
  .image_oeuf {
    transform: translate(100px, 290px);
  }
  .image_sel {
    transform: translate(-90px, 400px);
  }
  .image_fourchette{
    transform: translate(100px, 200px);
  }
  .image_planche {
    transform: translate(-90px, 370px);
  }
  .image_sauge{
    transform: translate(100px, 200px);
  }
  .image_tomate {
    transform: translate(-90px, 350px);
  }
  .layer-3{
    font-size: 10vh;
  }

} 
/* OK */
@media (max-width:780px) and (max-height:520px){
  .text {
    width: 780px;
    height: 78px;
    left: 50%;
    top: 50%;
    transform: translate(-385px, -180px);
  }

  .text-w {
    margin-top: 5%;
    margin-left: 10%;
    margin-right: 10%;
  }

  .grammes {
    position: fixed;
    width: 156px;
    height: 78px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-78px, 25px);
  }
  .quantité-oeuf {
    position: fixed;
    width: 156px;
    height: 78px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-78px, 25px);
  }
  
  .quantité-sel{
    position: fixed;
    width: 156px;
    height: 78px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(156px, 25px);
  }
  
  .quantité-farine {
    position: fixed;
    width: 156px;
    height: 78px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-312px, 25px);
  }
  

  .step-1 {
    width: 156px;
    height: 78px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-78px,-26px);
  }
   
  .pomme {
    transform: translate(-312px,-26px);
  }
  .courge {
    transform: translate(155px, -26px);
  }
 
  
  .farine {
   transform: translate(-312px,-26px);
  }
  .sel {
    transform: translate(155px, -26px);
  }
  .fourchette {
    transform: translate(-235px,-26px);
  }
  .planche {
    transform: translate(77px, -26px);
  }
  
  .sauge {
    transform: translate(-235px,-26px);
  }
  
  .tomate {
    transform: translate(77px, -26px);
  }
  .image_pomme {
    transform: translate(-300px, 170px);
  }
  .image_patate {
    transform: translate(0, 180px);
  }
  .image_courge {
    transform: translate(330px, 180px);
  }
  .image_farine {
    transform: translate(-300px, 170px);
    height: 15vw;
  }
  .image_oeuf {
    transform: translate(0, 175px);
    height: 15vw;
  }
  .image_sel {
    transform: translate(330px, 170px);
    height: 15vw;
  }
  .image_fourchette {
    transform: translate(-250px, 170px);
  }
  .image_planche {
    transform: translate(290px, 175px);
  }
  .image_sauge{
    transform: translate(-250px, 170px);
  }
  .image_tomate {
    transform: translate(250px, 185px);
  }
}

/* OK */
@media (max-width:520px) {

  .grid-background {
    background-image: 
      linear-gradient(transparent 64px, rgb(255, 51, 51) 65px,transparent 64px),
      linear-gradient(90deg,transparent 64px,rgb(255, 51, 51) 65px, transparent 64px);
      background-size: 100% 65px, 65px 100%;
}

  .layer-1 {
    background-size: 100% 65px, 65px 100%;
  }

  .layer-4 {
    background-size: 100% 65px, 65px 100%;
  }

  .layer-8 {
    background-size: 100% 65px, 65px 100%;
  }

  .layer-12 {
    background-size: 100% 65px, 65px 100%;
  }

  .layer-2 {
    font-size: 9vw;
  }
  .layer-3 {
    font-size: 9vw;
  }
  .layer-5 {
    font-size: 9vw;
  }
  .layer-6 {
    font-size: 9vw;
  }
  .layer-7 {
    font-size: 9vw;
  }
  .layer-9 {
    font-size: 9vw;
  }
  .layer-10 {
    font-size: 9vw;
  }
  .layer-11 {
    font-size: 9vw;
  }
  .layer-13 {
    font-size: 9vw;
  }
  /* .layer-14 {
    font-size: 9vw;
  } */

  .grammes {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, 250px);
    font-size: 9vw;
  }

  .quantité-oeuf{
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, 50px);
    font-size: 9vw;
  }
  .quantité-sel{
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, 250px);
    font-size: 9vw;
  }
  .quantité-farine{
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, -145px);
    font-size: 9vw;
  }
  
  
  .text {
    font-size: 9vw;
    width: 390px;
    height: 260px;
    left: 50%;
    top: 50%;
    transform: translate(-190px, -390px);
  }

  .text-w {
    margin-top: 20%;
    margin-left: 10%;
    margin-right: 10%;
  }


  .step-1 {
    width: 260px;
    height: 130px;
    font-size: 9vw;
    left: 50%;
    top: 50%;
    transform: translate(-130px,0);
  }
   
  .pomme {
    transform: translate(-130px,-195px);
  }
  .courge {
    transform: translate(-130px, 195px);
  }
  

  .farine {
    transform: translate(-130px,-195px);
  }
  .sel {
    transform: translate(-130px, 195px);
  }

  .fourchette {
    transform: translate(-130px,-130px);
  }
  .planche {
    transform: translate(-130px, 130px);
  }

  .sauge {
    transform: translate(-130px,-130px);
  }
  
  .tomate {
    transform: translate(-130px, 130px);
  }
  .image_pomme {
    transform: translate(-170px, 270px);
    height: 25vw;
  }
  .image_patate {
    transform: translate(165px, 450px);
    height: 25vw;
  }
  .image_courge {
    transform: translate(-160px, 650px);
    height: 25vw;
  }
  .image_farine {
    transform: translate(-150px, 240px);
    height: 25vw;
  }
  .image_oeuf {
    transform: translate(145px, 450px);
    height: 25vw;
  }
  .image_sel {
    transform: translate(-145px, 650px);
    height: 25vw;
  }
  .image_fourchette{
    transform: translate(-150px, 350px);
    height: 30vw;
  }
  .image_planche {
    transform: translate(145px, 600px);
    height: 30vw;
  }
  .image_sauge{
    transform: translate(-150px, 300px);
    height: 25vw;
  }
  .image_tomate {
    transform: translate(145px, 550px);
    height: 25vw;
  }
  .photo {
    top: 50px;
    font-size: 60px;
    left: 90%;
  }
}
/* OK */
@media (max-width:520px) and (max-height:780px) {
  .text {
    font-size: 9vw;
    width: 390px;
    height: 260px;
    left: 50%;
    top: 50%;
    transform: translate(-190px, -390px);
  }
  .grammes {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, 70px);
    font-size: 6vw;
  }
  .quantité-oeuf {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, -70px);
    font-size: 6vw;
  }
  .quantité-sel {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, 70px);
    font-size: 6vw;
  }
  .quantité-farine {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, -200px);
    font-size: 6vw;
  }

  .step-1 {
    width: 130px;
    height: 65px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-65px,-65px);
  }
   
  .pomme {
    transform: translate(-65px,-195px);
  }
  .courge {
    transform: translate(-65px, 65px);
  }
  .farine {
    transform: translate(-65px,-195px);
  }
  .sel {
    transform: translate(-65px, 65px);
  }
  .fourchette {
    transform: translate(-65px,-195px);
  }
  .planche {
    transform: translate(-65px,-65px);
  }

  .sauge {
    transform: translate(-65px,-195px);
  }
  
  .tomate {
    transform: translate(-65px,-65px);
  }

  .image_pomme {
    transform: translate(-110px, 180px);
  }
  .image_patate {
    transform: translate(115px, 280px);
  }
  .image_courge {
    transform: translate(-110px, 410px);
  }
  .image_farine {
    transform: translate(-110px, 180px);
  }
  .image_oeuf {
    transform: translate(115px, 280px);
  }
  .image_sel {
    transform: translate(-110px, 410px);
  }
  .image_fourchette{
    transform: translate(-110px, 180px);
  }
  .image_planche {
    transform: translate(115px, 280px);
  }
  .image_sauge{
    transform: translate(-110px, 180px);
  }
  .image_tomate {
    transform: translate(115px, 280px);
  }
}
/* OK */
@media (max-width:520px) and (max-height:630px) {
  .text {
    font-size: 9vw;
    width: 260px;
    height: 260px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, -320px);
  }
  .grammes {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, 135px);
    font-size: 6vw;
  }
  .quantité-oeuf {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, 0);
    font-size: 6vw;
  }
  .quantité-sel {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, 135px);
    font-size: 6vw;
  }
  .quantité-farine {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, -135px);
    font-size: 6vw;
  }

  .step-1 {
    width: 130px;
    height: 65px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-65px,0px);
  }
   
  .pomme {
    transform: translate(-65px,-130px);
  }
  .courge {
    transform: translate(-65px, 130px);
  }
  .farine {
    transform: translate(-65px,-130px);
  }
  .sel {
    transform: translate(-65px, 130px);
  }

  .fourchette {
    transform: translate(-65px,-130px);
  }
  .planche {
    transform: translate(-65px,0px);
  }

  .sauge {
    transform: translate(-65px,-130px);
  }
  
  .tomate {
    transform: translate(-65px,0px);
  }
  .image_pomme {
    transform: translate(-110px, 180px);
  }
  .image_patate {
    transform: translate(115px, 280px);
  }
  .image_courge {
    transform: translate(-110px, 410px);
  }
  .image_farine {
    transform: translate(-110px, 180px);
  }
  .image_oeuf {
    transform: translate(115px, 280px);
  }
  .image_sel {
    transform: translate(-110px, 410px);
  }
  .image_fourchette{
    transform: translate(-110px, 180px);
  }
  .image_planche {
    transform: translate(115px, 280px);
  }
  .image_sauge{
    transform: translate(-110px, 180px);
  }
  .image_tomate {
    transform: translate(115px, 280px);
  }
}
/* OK */
@media (max-width:520px) and (max-height:520px) {
  .text {
    font-size: 9vw;
    width: 260px;
    height: 260px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, -320px);
  }
  .grammes {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, 135px);
    font-size: 6vw;
  }


  .step-1 {
    width: 130px;
    height: 65px;
    font-size: 3vw;
    left: 50%;
    top: 50%;
    transform: translate(-65px,0px);
  }
   
  .pomme {
    transform: translate(-65px,-130px);
  }
  .courge {
    transform: translate(-65px, 130px);
  }
  .farine {
    transform: translate(-65px,-130px);
  }
  .sel {
    transform: translate(-65px, 130px);
  }

  .fourchette {
    transform: translate(-65px,-130px);
  }
  .planche {
    transform: translate(-65px,0px);
  }

  .sauge {
    transform: translate(-65px,-130px);
  }
  
  .tomate {
    transform: translate(-65px,0px);
  }
  .image_pomme {
    transform: translate(-110px, 120px);
  }
  .image_patate {
    transform: translate(115px, 240px);
  }
  .image_courge {
    transform: translate(-110px, 340px);
  }
  .image_farine {
    transform: translate(-110px, 120px);
  }
  .image_oeuf {
    transform: translate(115px, 240px);
  }
  .image_sel {
    transform: translate(-110px, 340px);
  }
  .image_fourchette{
    transform: translate(-110px, 100px);
  }
  .image_planche {
    transform: translate(115px, 180px);
  }
  .image_sauge{
    transform: translate(-110px, 100px);
  }
  .image_tomate {
    transform: translate(115px, 200px);
  }
  .text-recette{
    font-size: 4vh;
  }
  .layer-14{
    overflow: hidden;
  }
}

/* OK */
@media (max-width:430px) {
  
  .grid-background {
    background-image: 
      linear-gradient(transparent 64px, rgb(255, 51, 51) 65px,transparent 64px),
      linear-gradient(90deg,transparent 64px,rgb(255, 51, 51) 65px, transparent 64px);
      background-size: 100% 65px, 65px 100%;
}

  .layer-1 {
    background-size: 100% 65px, 65px 100%;
  }

  .layer-4 {
    background-size: 100% 65px, 65px 100%;
  }

  .layer-8 {
    background-size: 100% 65px, 65px 100%;
  }

  .layer-12 {
    background-size: 100% 65px, 65px 100%;
  }

  .layer-2 {
    font-size: 9vw;
  }
  .layer-3 {
    font-size: 9vw;
  }
  .layer-5 {
    font-size: 9vw;
  }
  .layer-6 {
    font-size: 9vw;
  }
  .layer-7 {
    font-size: 9vw;
  }
  .layer-9 {
    font-size: 9vw;
  }
  .layer-10 {
    font-size: 9vw;
  }
  .layer-11 {
    font-size: 9vw;
  }
  .layer-13 {
    font-size: 9vw;
  }
  /* .layer-14 {
    font-size: 9vw;
  } */

  .grammes {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, 130px);
    font-size: 9vw;
  }
  .quantité-oeuf {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, 0px);
    font-size: 9vw;
  }
  .quantité-sel {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, 130px);
    font-size: 9vw;
  }
  .quantité-farine {
    position: fixed;
    width: 260px;
    height: 130px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, -130px);
    font-size: 9vw;
  }

  .clic{
    width: 100px;
    height: 100px;
    top: 94%;
  };
  
  .text {
    font-size: 2vw;
    width: 260px;
    height: 260px;
    left: 50%;
    top: 50%;
    transform: translate(-130px, -325px);
  }

  .text-w {
    margin-top: 20%;
    margin-left: 10%;
    margin-right: 10%;
  }


  .step-1 {
    width: 130px;
    height: 65px;
    font-size: 5vw;
    left: 50%;
    top: 50%;
    transform: translate(-65px,0);
  }
   
  .pomme {
    transform: translate(-65px,-130px);
  }
  .courge {
    transform: translate(-65px, 130px);
  }

  .farine {
    transform: translate(-65px,-130px);
  }
  .sel {
    transform: translate(-65px, 130px);
  }
 

  .fourchette {
    transform: translate(-65px,-130px);
  }
  .planche {
    transform: translate(-65px, 0);
  }

  .sauge {
    transform: translate(-65px,-130px);
  }
  
  .tomate {
    transform: translate(-65px, 0);
  }

  .image_pomme {
    transform: translate(-60px, 300px);
    height: 25vw;
  }
  .image_patate {
    transform: translate(70px, 450px);
    height: 25vw;
  }
  .image_courge {
    transform: translate(-80px, 600px);
    height: 25vw;
  }
  .image_farine {
    transform: translate(-60px, 300px);
    height: 25vw;
  }
  .image_oeuf {
    transform: translate(70px, 450px);
    height: 25vw;
  }
  .image_sel {
    transform: translate(-80px, 600px);
    height: 25vw;
  }
  .image_fourchette{
    transform: translate(-60px, 300px);
    height: 30vw;
  }
  .image_planche {
    transform: translate(70px, 450px);
    height: 30vw;
  }
  .image_sauge{
    transform: translate(-60px, 300px);
    height: 25vw;
  }
  .image_tomate {
    transform: translate(70px, 450px);
    height: 25vw;
  }

  .image {
    max-width:100%;
    max-height:100%;
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
  }
  
  
}
/* OK */
@media (max-width:430px) and (max-height:820px) {
.layer-14 {
  font-size: 3vh;
}
.text-recette {
  color: #e72f2f;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.gauche {
  line-height: 0.35;
  margin-top: 10%;
  margin-right: 6%;
  margin-left: 6%;
}

.droite {
  line-height: 0.95;
  margin-right: 6%;
  margin-top: 3%;
  margin-left: 6%;
}

.image_pomme {
  transform: translate(-60px, 300px);
  height: 25vw;
}
.image_patate {
  transform: translate(70px, 450px);
  height: 25vw;
}
.image_courge {
  transform: translate(-80px, 550px);
  height: 25vw;
}
.image_farine {
  transform: translate(-60px, 250px);
  height: 25vw;
}
.image_oeuf {
  transform: translate(70px, 450px);
  height: 25vw;
}
.image_sel {
  transform: translate(-80px, 520px);
  height: 25vw;
}
.image_fourchette{
  transform: translate(-60px, 250px);
  height: 30vw;
}
.image_planche {
  transform: translate(70px, 400px);
  height: 30vw;
}
.image_sauge{
  transform: translate(-60px, 300px);
  height: 25vw;
}
.image_tomate {
  transform: translate(70px, 450px);
  height: 25vw;
}
}
/* OK */
@media (max-width:430px) and (max-height:740px) {
  .layer-14 {
    font-size: 3vh;
  }
  .text-recette {
    color: #e72f2f;
    text-align: left;
    display: flex;
    flex-direction: column;
  }
  
  .gauche {
    line-height: 0.45;
    margin-top: 10%;
    margin-right: 6%;
    margin-left: 6%;
  }
  
  .droite {
    line-height: 0.95;
    margin-right: 6%;
    margin-top: 3%;
    margin-left: 6%;
  }
  .image_pomme {
    transform: translate(-70px, 200px);
    height: 25vw;
  }
  .image_patate {
    transform: translate(90px, 350px);
    height: 25vw;
  }
  .image_courge {
    transform: translate(-80px, 450px);
    height: 25vw;
  }
  .image_farine {
    transform: translate(-70px, 150px);
    height: 25vw;
  }
  .image_oeuf {
    transform: translate(90px, 350px);
    height: 25vw;
  }
  .image_sel {
    transform: translate(-80px, 470px);
    height: 25vw;
  }
  .image_fourchette{
    transform: translate(-60px, 200px);
    height: 30vw;
  }
  .image_planche {
    transform: translate(70px, 340px);
    height: 30vw;
  }
  .image_sauge{
    transform: translate(-60px, 180px);
    height: 25vw;
  }
  .image_tomate {
    transform: translate(70px, 380px);
    height: 25vw;
  }
  }
/* OK */
@media (max-width:430px) and (max-height:570px) {
    .layer-14 {
      font-size: 3vh;
    }
    .text-recette {
      color: #e72f2f;
      text-align: left;
      display: flex;
      flex-direction: column;
    }
    
    .gauche {
      line-height: 0.55;
      margin-top: 10%;
      margin-right: 6%;
      margin-left: 6%;
    }
    
    .droite {
      line-height: 0.95;
      margin-right: 6%;
      margin-top: 3%;
      margin-left: 6%;
    }

  .image_pomme {
    transform: translate(-70px, 100px);
    height: 30vw;
  }
  .image_patate {
    transform: translate(90px, 250px);
    height: 30vw;
  }
  .image_courge {
    transform: translate(-80px, 350px);
    height: 30vw;
  }
  .image_farine {
    transform: translate(-70px, 150px);
    height: 30vw;
  }
  .image_oeuf {
    transform: translate(90px, 250px);
    height: 30vw;
  }
  .image_sel {
    transform: translate(-80px, 370px);
    height: 30vw;
  }
  .image_fourchette{
    transform: translate(-60px, 100px);
    height: 30vw;
  }
  .image_planche {
    transform: translate(70px, 240px);
    height: 30vw;
  }
  .image_sauge{
    transform: translate(-60px, 80px);
    height: 30vw;
  }
  .image_tomate {
    transform: translate(70px, 280px);
    height: 30vw;
  }
  }