/* Style global */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f9; /* Fond clair */
  color: #333;
}

h1 {
  font-family: 'Roboto', sans-serif;
  color: #28a745; /* Couleur verte pour l'en-tête */
}

/* Cartes de questions */
.card {
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 20px;
}

/* Cœurs / vies */
#lives {
  font-size: 1.5rem;
  color: #f44336; /* Rouge pour les vies */
}

/* Feedback (Correct/Incorrect) */
.correct {
  background-color: #28a745 !important;
  color: white !important;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 255, 0, 0.4);
}

.wrong {
  background-color: #dc3545 !important;
  color: white !important;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(255, 0, 0, 0.4);
}

.pop {
  animation: pop 0.5s ease;
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

  /* Boutons */
button {
  transition: all 0.3s ease;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 1rem;
}

button:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

button:focus {
  outline: none;
}

#next-btn {
  background-color: #007bff;
  color: white;
  border: none;
}

#reset-btn {
  background-color: #ffc107;
  color: white;
}

#next-btn:hover {
  background-color: #0056b3;
}

#reset-btn:hover {
  background-color: #e0a800;
}

/* Badge */
#badge {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

#badge i {
  font-size: 1.5rem;
  margin-right: 10px;
  color: #ff9800;
}

/* Progrès */
#progress {
  font-size: 1.1rem;
  margin-top: 10px;
  font-weight: bold;
  color: #6c757d;
}

/* Audio Button */
.audio-btn {
  margin-top: 10px;
  padding: 8px 15px;
  background-color: #6c757d;
  border: none;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.audio-btn:hover {
  background-color: #5a6268;
}

.audio-btn:focus {
  outline: none;
}

/* Score */
#score {
  margin-top: 20px;
  font-size: 1.2rem;
  color: #007bff;
  font-weight: bold;
}

/* Responsive Design */
@media (max-width: 768px) {
  .card {
    padding: 15px;
  }

  #lesson-title {
    font-size: 1.4rem;  /* Réduit la taille du titre sur mobile */
  }

  /* Boutons : Adapter à l'écran mobile */
  button {
    width: 100%;  /* Les boutons vont prendre toute la largeur sur les petits écrans */
    font-size: 1.2rem;  /* Augmente légèrement la taille du texte sur mobile */
    padding: 15px 20px;
  }

  /* Réponses sous forme de boutons */
  #choices-container button {
    width: 100%;  /* Les boutons vont occuper toute la largeur sur les petits écrans */
    margin-bottom: 10px;
  }

  #score {
    font-size: 1rem;  /* Réduit la taille du score pour les petits écrans */
  }

  /* Ajuster le progrès */
  #progress {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  /* Sur les écrans plus larges, ajuster les boutons et titres pour plus d'espace */
  button {
    width: auto;  /* Les boutons auront leur taille normale */
    padding: 10px 15px;
  }

  #lesson-title {
    font-size: 1.75rem;  /* Taille normale du titre */
  }
}