/* je touche les boites des sections */
section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*:::::::::::::::::::::::::: section 1:::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::: titre de la page ::::::::::::::::::::::::::::::*/
/* je touche au positionnement en hauteur du titre de la page */
div.entete.top-accueil:nth-child(1) {
  top: -17vh;
}
/*:::::::::::::::::::::::::: section 2:::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::: le jeu du puzzle et en dessous l'image qui doit être reproduit :::*/
/* je touche a la boite du jeu de puzzle */
.grouptaquin {
  margin: 10rem 0;
}
/* je positionne en hauteur le jeu du puzzle */
div#game {
  top: -28vh;
}
/* je touche au titre de l'image a reproduire */
h3 {
  color: var(--color-blue);
}
/* je touche la boite de  l'image a reproduire */
.help {
  width: 100%;
  text-align: center;
  margin-top: -17vh;
}
/*:::::::::::::::::::::::::: section 3:::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::: CARROUSEL ::::::::::::::::::::::::::::::*/

/* je touche à la boite du carrousel */
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 70px;
  padding-bottom: 100px;
}

/* je touche au dimension des imgs */
.img-Partenaire {
  width: 20%;
}

.container img {
  image-rendering: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 300ms;
}
/* je cree un zoom sur les img quand je passe la souris dessus */
.container img:hover {
  transform: scale(1.2);
  transition: all 300ms;
}

/*:::::::::::::::::::::::::: Responsive:::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::: max 1024 ::::::::::::::::::::::::::::::*/
@media screen and (max-width: 1024px) {
  .container {
    position: relative;
    padding-bottom: 100px;
  }
  .carousel {
    width: 40%;
    position: absolute;
  }
  #game,
  .help h3 {
    display: none;
  }

  .help .image {
    max-width: 600px;
    width: 100%;
    padding-bottom: 14vh;
    margin: -12vh 0;
  }
}
/*:::::::::::::::::::::::::: Responsive:::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::: max 767 ::::::::::::::::::::::::::::::*/
@media screen and (max-width: 767px) {
    
  .img-Partenaire {
  width: 30%;
  }

  main {
    margin-bottom: -230px;
  }
  img.titreepe {
    margin: 28vh 0 10vh 0;
  }

  .container {
    top: -34vh;
  }


  #game,
  .help h3 {
    display: none;
  }

  .help {
    margin-top: -60vh;
}

  .help .image {
    top: 10vh;
    margin: 20vh 0;
    padding: 0;
  }
  .carousel__face {
    padding: 18px;
  }

  section.entete {
    top: -36vh;
  }
  .carousel img {
    width: 100%;
  }
}