.toutlapageapropos{
  background-color: #FFFCF7;
}

.apropos{
    display: flex;
    margin: 110 auto;
    width: 100%;
    max-width: 1060px;
    gap: 105px;
}
.textedroit{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 467px;


  h2{
    font-size: 34px;
    font-family: Pacifico;
    color: #562F11;
  }
  p{
    font-size: 16px;
    font-family: Quicksand;
    line-height: 160%;
    margin-top: 25px;
  }
}

.parcours{
  display: flex;
  background-color: #FFD771;
  border-radius: 20px;
  padding: 50px 125px;
  width: 100%;
  max-width: 810px;
  margin: 0 auto;
  box-shadow: 10px 10px 0px #E2A710;
  margin-bottom: 80px;
  gap: 150px;
}


.parcourstext{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 425px;

  h2{
    font-size: 34px;
    font-family: Pacifico;
    color: #562F11;
    text-align: center;
    margin-bottom: 39px;
  }
  p{
    font-size: 16px;
    font-family: Quicksand;
    line-height: 120%;
  }
}
.valeurs{
    font-size: 34px;
    font-family: Pacifico;
    color: #562A11;
    text-align: center;

}
.localisation{
    display: flex;
    background-color: #FFD771;
    border-radius: 20px;
    padding: 50px 125px;
    width: 100%;
    max-width: 810px;
    margin: 0 auto;
    box-shadow: 10px 10px 0px #E2A710;
    margin-bottom: 100px;
    gap: 22px;
}
.textlocalisation{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 405px;
    margin: 70 auto;
    line-height: 120%;

    h2{
      font-size: 34px;
      font-family: Pacifico;
      color: #562A11;
      margin-bottom: 25px;
    }
    p{
      font-size:16px;
      font-family: Quicksand;
    }
}

.ensembledevaleurs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 790px;
  margin: 54px auto;
  text-align: center;
  perspective: 700px;
}

.valeur-item {
  width: 230px;
  height: 230px;
  perspective: 1000px; /* Effet 3D */
}

.flip-container {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

/* Quand on survole .valeur-item, on applique la rotation à .flip-container */
.valeur-item:hover .flip-container {
  transform: rotateY(180deg);
}

.titreicon, .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  backface-visibility: hidden;
}

/* Face avant */
.titreicon {
  background-color: #CFDAF6;
  font-size: 24px;
  font-family: Quicksand;
  color:#562F11;
  font-weight: 600;

  h2{
    margin-bottom:20px;
  }
}

/* Face arrière */
.back {
  background-color: #CFDAF6;
  transform: rotateY(180deg);
  font-size: 15px;
  font-family: Quicksand;
  color:#562F11;
  font-weight: 500;
  
}



.questionnement{
  display: flex;
  width: 100%;
  max-width: 807px;
  margin: 80 auto;
  gap: 40px;
}
.baspageapropos{
  text-align: center;

  h2{
    font-size: 32px;
    font-family: Quicksand;
    font-weight: 600;
  }

  p{
    font-size: 16px;
    font-family: Quicksand;
    margin-top: 5px;
  }
}

.baspageaproposg{
  text-align: center;

  h2{
    font-size: 32px;
    font-family: Quicksand;
    font-weight: 600;
  }

  p{
    font-size: 16px;
    font-family: Quicksand;
    margin-top: 5px;
  }
}

.contact-apropos{
  margin: 40px 0px;
}

@media (max-width: 768px) {
  /* Styles pour les écrans dont la largeur est inférieure ou égale à 768px */
.apropos{
  display: flex;
  gap: 30px;
  width: 650px;

}
.img{
  align-content: center;
}
.parcours{
  width: 570px;
    padding: 50px 40px;
}
.parcourstext{
  max-width: 570px;
}
.ensembledevaleurs{
  display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    width: 600px;
    margin:60px auto;
}
.valeur-item{
  width: 165px;
  height: 165px;
  cursor: pointer; /* Indiquer que l'élément est cliquable */
    
}

  
    /* Supprimer l'effet hover */
.valeur-item:hover .flip-container {
      transform: none;
  }
  
/* Lorsque l'élément est retourné au clic */
.flip-container.flipped {
  transform: rotateY(180deg);
}

/* Face arrière de l'encart */
.back {
  background-color: #CFDAF6;
  font-size: 11px;

}
.imagepourcours{
  display: none;
}
.localisation{
  width: 570px;
    padding: 50px 40px;
    display: flex;
    gap: 50px;
}

.questionnement{
  width: 650px;
  gap: 40px;

  h2{
    font-size:26px;
  }
}
.baspageapropos{
  text-align: center;
}
.baspageaproposg{
  text-align: center;
  }
}

@media (max-width: 428px) {
  /* Styles pour les écrans dont la largeur est inférieure ou égale à 768px */
.apropos{
  display: flex;
    flex-direction: column;
    gap: 30px;
    width: 350px;

}
.parcours{
  width: 270px;
    padding: 50px 40px;
}
.ensembledevaleurs{
  display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    width:350px;
}
.valeur-item{
  width: 165px;
    height: 165px;
}
.imagepourcours{
  display: none;
}
.localisation{
  width: 270px;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    gap:0px;
}
.chouettequestionnment{
  display: none;
}
.questionnement{
  width: 350px;
  gap: 40px;

  h2{
    font-size:26px;
  }
}
.baspageapropos{
  text-align: center;
  width: 100%;
  max-width: 150px;

}
.baspageaproposg{
  text-align: center;
  width: 100%;
  max-width: 150px;

  }
}