#etoiles span {
  font-size: 24px;
  cursor: pointer;
  color: #ccc;
  transition: color 0.2s;
}

#etoiles span.checked {
  color: gold;
}


#avis-section {
    background-color: #91ff802c;
}


#liste-avis {
  display: flex;
  overflow-x: auto;
  gap: 15px;
  padding: 20px 0;
  scroll-snap-type: x mandatory;
}

.avis {
  min-width: 270px;
  max-width: 270px;
  flex: 0 0 auto;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  scroll-snap-align: start;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  background-color: #fff;
  text-align: center;
}

.avis img {
  width: 96%;
  max-height: 280px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.avis .nom {
  font-weight: bold;
  margin-bottom: 4px;
}

.avis .etoiles {
  color: gold;
  font-size: 18px;
  margin-bottom: 6px;
}

.avis .commentaire {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.avis .date {
  font-size: 12px;
  color: #777;
}



/*formulaire*/



#form-avis {
  animation: fadeIn 0.5s ease-in-out;
  background: white;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin: 15px auto; /* Centrer horizontalement */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  max-width: 500px; /* Largeur maximale */
}

/* Champ texte et zone de texte */
#form-avis input[type="text"],
#form-avis textarea {
  width: 90%; /* un peu de marge sur les côtés */
  display: block;
  margin: 10px auto; /* Centré horizontalement */
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  transition: border-color 0.3s;
}
#form-avis input[type="text"]:focus,
#form-avis textarea:focus {
  outline: none;
  border-color: #55acff;
}

/* Zone d’étoiles */
#etoiles {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 24px;
  cursor: pointer;
}
#etoiles span {
  color: #ccc;
  transition: transform 0.2s, color 0.3s;
}
#etoiles span:hover,
#etoiles span.hovered,
#etoiles span.active {
  color: gold;
  transform: scale(1.2);
}

/* Champ image */
#form-avis input[type="file"] {
  display: block;
  margin: 10px auto;
  font-size: 14px;
}

/* Bouton envoyer */
 #form-avis button[type="submit"] {
  display: block;
  margin: 10px auto;
  background-color: #55acff;
  color: white ;
  font-weight: bold;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#form-avis button[type="submit"]:hover {
  background-color: #21b564;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


  #boutonValidez {
      background-color: #b92bff;
      color: white;
      border: none;
      padding: 12px 25px;
      font-size: 1.1rem;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 150px;
      font-weight: 700;
      text-align: center;
    }
    
    #boutonValidez i {
      font-size: 1rem;
    }