.quizz {
  margin: 1em 0;
}

.quizz-question {
  font-weight: 600;
  margin-bottom: 0.35em;
  background: --md-code-bg-color;
}

.quizz-choice {
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  margin: 4px 0;
  border: 1px solid var(--md-default-fg-color--lighter);
}


/* Hover neutre */
.quizz-choice:hover {
  border-color: var(--md-accent-fg-color);
  background: var(--md-accent-fg-color--transparent);
}


/* ✅ Bonne réponse */
.quizz-choice.correct {
  background: rgba(0, 160, 0, 0.14);
  color: rgb(0, 120, 0);
  font-weight: 600;
  border: 1px solid rgba(0, 150, 0, 0.4);
  transform: scale(1.01);
}

/* ❌ Mauvaise réponse */
.quizz-choice.incorrect {
  background: rgba(200, 40, 40, 0.15);
  color: rgb(160, 30, 30);
  border: 1px solid rgba(200, 40, 40, 0.4);
}

/* Justification */
.quizz-justification {
  margin-top: 8px;
  padding: 10px 14px;
  border-left: 4px solid var(--md-accent-fg-color);
  background: var(--md-accent-fg-color--transparent);
  border-radius: 4px;
  font-size: 0.9rem;

  /* animation */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.quizz-justification.visible {
  max-height: 200px; /* assez grand pour n'importe quel paragraphe */
  opacity: 1;
}



/* Micro animation douce sur bonne réponse */
.quizz-choice.correct {
  animation: quizz-correct-pop 0.12s ease-out;
}

@keyframes quizz-correct-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1.01); }
}

.quizz {
  padding: 14px 16px;
  border-radius: 8px;
  border: 2px solid var(--md-default-fg-color--lighter);
  background: var(--md-code-bg-color);
  margin: 1.2em 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Indication subtile au survol (suggère l'interaction) */
.quizz:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0 4px var(--md-accent-fg-color--transparent);
}