@charset "UTF-8";
.buttons {
  position: fixed; /* Les boutons restent toujours visibles */
  bottom: 25px; /* Distance depuis le bas de la fenêtre */
  left: 50%; /* Centrer horizontalement */
  transform: translateX(-50%); /* Ajustement pour centrer parfaitement */
  display: flex; /* Les boutons seront alignés côte à côte */
  gap: 35px; /* Espacement entre les boutons */
  font-size: 20vw;
}

.btn {
  text-decoration: none; /* Supprime le soulignement */
  color: white; /* Couleur du texte par défaut */
  font-size: 30px; /* Taille de la police définie à 30px */
  padding: 10px 20px; /* Espacement interne */
  border: 4px solid white; /* Contour blanc */
  border-radius: 50px; /* Coins arrondis */
  background-color: rgba(255, 255, 255, 0.2); /* Fond semi-transparent */
  backdrop-filter: blur(10px); /* Applique un flou au contenu derrière */
  transition: all 0.3s ease; /* Transition fluide pour les effets */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7),
    0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.3); /* Ombre */
}

.btn:hover {
  background-color: rgba(255, 255, 0, 1); /* Fond jaune opaque */
  backdrop-filter: blur(15px); /* Augmente le flou au survol */
  color: white; /* Couleur du texte blanche */
  box-shadow: 0 0 15px rgb(216, 216, 4), 0 0 25px rgb(207, 207, 5),
    0 0 35px rgb(195, 195, 28); /* Ombre accentuée */
  transition: all 0.3s ease; /* Transition fluide pour le changement */
}

.btn.is-active {
  background-color: yellow;
  color: white;
  transform: scale(1.5) rotate(180deg);
} /* Exemple d'effet interactif 
  box-shadow: 0 0 15px rgba(0, 0, 255, 0.7), 0 0 25px rgba(0, 0, 255, 0.5),
    0 0 35px rgba(0, 0, 255, 0.3); /* Ombre accentuée 
}*/

.non {
  border-radius: 50px; /* Coins arrondis */
}

.oui {
  border-radius: 50px; /* Coins arrondis */
}

.continuer {
  border-radius: 50px; /* Coins arrondis */
}

.infos {
  border-radius: 50px; /* Coins arrondis */
}
@media (min-width: 900px) {
  .buttons {
    bottom: 50px;
  }
}