/* ========== ÉTOILES ========== */
.star-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.star {
  font-size: 30px;
  color: #e0e0e0;
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.1));
  transition: all 0.3s;
}

.star.earned {
  color: var(--accent-color);
  filter: drop-shadow(0 0 5px rgb(243 156 18 / 0.7));
  animation: star-pop 0.7s ease-out;
}

@keyframes star-pop {
  0% {
    transform: scale(0.5);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }

  75% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}