#quizz_error_p{
  display: table;
  padding: 10px 20px;
  margin: 0 auto;
  font-size: 30px;
  font-family: "Preavihear", cursive;
}


#quizz_error_btn {
  display: table;
  padding: 10px 20px;
  margin: 0 auto;
  background-color: #ff0000; /* Couleur de fond rouge */
  color: #ffffff; /* Couleur du texte blanc */
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

#quizz_error_btn:hover {
  background-color: #cc0000; /* Couleur de fond rouge plus foncée au survol */
}

.game_loading_span{
  display: table;
  margin: 0 auto;
  font-size: 30px;
  font-family: "Preavihear", cursive;
}


#quizz h1{
    font-family: 'Preahvihear', sans-serif;
    font-size: 2.1em;
    font-weight: bold;
    color: rgba(0, 40, 0, 0.8);
    padding:0 10px;
    margin: 20px auto 40px auto;
    text-align: center;
}
.quizz_cat{
    display: none;
}
.quizz_step{
  display: table;
  margin:0 auto;
  min-height: calc(100vh - 100px);
  padding:0 0 100px 0;
}


.quizz_btn {
    display: inline-table;
  background-color: #96bb7c; /* Couleur verte en harmonie avec la nature */
  color: #ffffff; /* Texte blanc pour contraste */
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 10px 10px 0 0;
  cursor: pointer;
  border-radius: 5px; /* Coins arrondis */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Légère ombre portée */
  transition: transform 0.2s, box-shadow 0.2s; /* Animation de transition */
}

.quizz_btn:hover {
  transform: scale(1.1); /* Légère agrandissement au survol */
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* Ombre portée plus prononcée */
}
@media screen and (max-width:800px){
    .quizz_btn {
        display: table;
  margin: 10px auto;
    }
}

.quizz_cat h2{
    margin: 10px 0 5px 0;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-size: 1.7em;
    font-weight: bold;
    color: rgba(0, 40, 0, 0.9);
}


.quizz_cat h3 {
  margin: 20px 0 10px 0;
  text-align: center;
  font-family: 'Comic Sans MS', cursive; /* Utilisation d'une police de caractères amusante */
  font-size: 1.5em; /* Augmentation de la taille de la police pour un aspect ludique */
  font-weight: bold;
  color: #388e3c; /* Couleur verte en harmonie avec la nature */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Ombre portée pour un effet ludique et en relief */
}



.quizz_change {
    margin: 0 auto;
    display: table;
  background-color: #4CAF50; /* Couleur de fond */
  color: white; /* Couleur du texte */
  padding: 3px 5px; /* Espacement interne */
  border: none; /* Retirer la bordure */
  border-radius: 5px; /* Coins arrondis */
  cursor: pointer; /* Curseur au survol */
  font-size: 0.7em; /* Taille de la police */
  text-align: center; /* Centrer le texte */
  text-decoration: none; /* Retirer la décoration du texte */
  transition: background-color 0.3s; /* Animation de transition */
}

/* Lorsque le bouton est survolé */
.quizz_change:hover {
  background-color: #45a049; /* Couleur de fond au survol */
}

.quizz_change::before {
  content: "\270E"; /* Code Unicode pour la flèche vers la gauche */
  margin-right: 5px; /* Marge à droite pour la flèche */
}








.quizz_choice {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes pour une largeur d'écran supérieure à 800px */
  grid-column-gap: 20px; /* Ajouter une marge entre les colonnes */
  grid-row-gap: 20px; /* Ajouter une marge en hauteur entre les lignes */
  justify-content: center; /* Centrer horizontalement */
  align-items: center; /* Centrer verticalement */
  margin: 20px auto; /* Ajouter une marge extérieure à la grille */
  max-width: 800px; /* Limiter la largeur de la grille à 800px */
  padding: 20px; /* Ajouter du padding à la grille */
}

/* Pour rendre la grille responsive : */
@media screen and (max-width: 800px) {
  .quizz_choice {
    grid-template-columns: 1fr 1fr; /* 2 colonnes pour les écrans entre 500px et 800px */
    grid-column-gap: 10px; /* Ajouter une marge entre les colonnes */
    padding: 10px; /* Réduire le padding pour une meilleure adaptation */
    max-width: 500px; /* Limiter la largeur de la grille à 500px */
  }
}
  @media screen and (max-width: 500px) {
  .quizz_choice {
    grid-template-columns: 1fr; /* 1 colonne pour les écrans inférieurs à 500px */
    max-width: 300px; /* Limiter la largeur de la grille à 300px */
  }
}






.quizz_choice_btn {
  background-color: rgba(230, 255, 230, 0.9); /* Couleur de fond verte en harmonie avec la nature */
  color: #4CAF50; /* Couleur du texte */
  padding: 10px 20px; /* Espacement interne */
  border: none; /* Suppression de la bordure pour un aspect naturel */
  border-radius: 5px; /* Coins arrondis pour un aspect doux */
  cursor: pointer; /* Curseur au survol */
  font-size: 1.2em; /* Taille de police légèrement augmentée pour attirer l'attention */
  font-weight: bold; /* Gras pour une meilleure lisibilité */
  text-align: center; /* Centrage du texte */
  text-decoration: none; /* Retrait de toute décoration du texte */
  transition: background-color 0.3s; /* Animation de transition au survol */
}

/* Lorsque le bouton est survolé */
.quizz_choice_btn:hover {
  background-color: #388e3c; /* Couleur de fond légèrement plus foncée au survol */
  color:rgba(230, 255, 230, 0.9);
}




#quizz_perma .quizz_choice_btn::before {
  content: "\1F331"; /*  */
  margin-right: 5px;
}

#quizz_auto .quizz_choice_btn::before {
  content: "\1F3D8"; /*  */
  margin-right: 5px;
}

#quizz_resi .quizz_choice_btn::before {
  content: "\1F528"; /*  */
  margin-right: 5px;
}

#quizz_eau .quizz_choice_btn::before {
  content: "\1F4A7"; /*  */
  margin-right: 5px;
}

#quizz_ener .quizz_choice_btn::before {
  content: "\26A1"; /*  */
  margin-right: 5px;
}

#quizz_biod .quizz_choice_btn::before {
  content: "\1F41E"; /*  */
  margin-right: 5px;
}








.quiz-container {
    max-width: 600px; /* Taille maximale de la boîte du quiz */
    margin: 20px auto; /* Centrer horizontally avec un espace sur le haut et le bas */
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombre portée légère */
    font-family: Arial, sans-serif;
    background-color: rgba(240, 240, 240, 0.5);
}

#quizz_cancel {
  background-color: #ff6347; /* couleur orange-rouge associée à la permaculture */
  border: none;
  color: #fff;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  font-size: 13px; /* écrit en assez petit */
  display: table;
  margin: 0 auto 30px auto;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

#quizz_cancel:hover {
  background-color: #e95e38; /* une nuance légèrement plus claire au survol */
}

#quizz_cancel:active {
  transform: translateY(1px); /* léger effet de pression lors du clic */
}


p.question_paragraphe{
    font-size: 1.3em;
    font-weight: bold;
    margin: 25px 0 10px 0;
}
.question {
    display: none;
}
.quiz-container h2{
    color: darkgreen;
    text-align: center;
    font-family: 'Preahvihear', sans-serif;
    font-size: 30px;
    font-weight: bold;
    margin:0 auto;
    padding:0 10px;
}
.quiz-container ul li{
    list-style: none;
}
.quiz-container label {
    display: block;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 1.2em; /* La question est plus grande */
}

.quiz-container label:hover {
    background-color: #f6f6f6; /* Au survol, la couleur de fond devient gris clair */
    color: #fff;
}

.quiz-container input[type="radio"] {
    display: none;
}
.quiz-container input[type="radio"]:hover + label {
    background-color: green;
}
.quiz-container input[type="radio"]:checked + label {
    background-color: lightgreen;
}

       
.quiz-container .next-button, .quiz-container #submit-button{
    display: table;
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 20px auto;
}

.quiz-container .next-button:hover, .quiz-container #submit-button:hover {
    background-color: #45a049;
}



.quizz_result {
  text-align: center; /* Centrer le contenu */
  font-size: 24px; /* Taille de police assez grande */
  margin: 20px 0; /* Espacement par rapport au haut */
}


.quizz_result span {/*score*/
  font-size: 36px;
  line-height: 80px;
  font-weight: bold;
  display: table;
  margin: 0 auto;
  padding: 10px;
  border-radius: 50%; /* Rend l'arrière-plan circulaire */
  color: #fff; /* Couleur du texte */
  background-color: #007bff; /* Fond du cercle */
  width: 80px; /* Largeur du cercle */
  height: 80px; /* Hauteur du cercle */
  text-align: center; /* Centre le texte horizontalement */
}



/* Couleurs de fond basées sur le score */
.quizz_result span[data-score="low"] {
  background-color: #df3a3a; /* Rouge pour les faibles scores */
}
.quizz_result span[data-score="medium"] {
  background-color: #df8c3a; /* Jaune pour les scores moyens */
}
.quizz_result span[data-score="high"] {
  background-color: #96e349; /* Vert pour les meilleurs scores */
}


.quizz_result_p {
  margin-top: 0;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}



#quizz_continue {
  display: table;
  margin: 20px auto;
  padding: 10px 20px;
  border: none;
  background-color: #4CAF50; /* Couleur verte en rapport avec la nature */
  color: white;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 0.3s;
}

#quizz_continue:hover {
  background-color: #45a049; /* Changer la couleur au survol */
}