/* Un élément marqué « hidden » doit être caché, même quand une autre règle lui donne un affichage (grid, flex...). */
[hidden] { display: none !important; }

/* Animations légères : quelques dixièmes de seconde, uniquement opacité et déplacement (rien qui ralentisse un petit téléphone).
   Tout s'arrête chez les personnes qui ont demandé moins de mouvement dans leur système (accessibilité). */

@keyframes entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop    { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes monte  { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Chaque écran qui apparaît (question, correction, classement...) glisse doucement. */
main > section:not([hidden]) { animation: entree .28s ease-out both; }

/* Les choix arrivent l'un après l'autre. */
button.choix, .choix > div { animation: entree .25s ease-out both; }
button.choix:nth-child(2), .choix > div:nth-child(2) { animation-delay: .05s; }
button.choix:nth-child(3), .choix > div:nth-child(3) { animation-delay: .10s; }
button.choix:nth-child(4), .choix > div:nth-child(4) { animation-delay: .15s; }
button.choix:nth-child(5), .choix > div:nth-child(5) { animation-delay: .20s; }
button.choix:nth-child(6), .choix > div:nth-child(6) { animation-delay: .25s; }

/* La bonne réponse se détache à la correction. */
button.choix.bonne, .choix > .bonne { animation: pop .35s ease-out; }

/* Les classements se déroulent ligne par ligne. */
tbody tr, #top li, #top-equipes li { animation: entree .3s ease-out both; }
tbody tr:nth-child(2), #top li:nth-child(2) { animation-delay: .05s; }
tbody tr:nth-child(3), #top li:nth-child(3) { animation-delay: .10s; }
tbody tr:nth-child(4), #top li:nth-child(4) { animation-delay: .15s; }
tbody tr:nth-child(5), #top li:nth-child(5) { animation-delay: .20s; }

/* Le podium monte : 3e, puis 2e, puis 1er. */
.podium > div { transform-origin: bottom; animation: monte .6s cubic-bezier(.2, .8, .2, 1) both; }
.podium > .p3 { animation-delay: 0s; }
.podium > .p2 { animation-delay: .25s; }
.podium > .p1 { animation-delay: .5s; }

/* Retour au toucher sur les boutons. */
button { transition: transform .08s ease-out, opacity .15s; }
button:active:not(:disabled) { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}