La carte qui se retourne

<article class="card" aria-labelledby="card-title">
  <!-- Recto : la face visible au chargement -->
  <div class="card__front">
    <h3 id="card-title">Quelle est la capitale de l'Australie ?</h3>
    <p>Indice…</p>
  </div>
  <details class="card__details">
    <!-- Élément déclencheur : le bouton qui retourne la carte -->
    <summary>Voir la réponse</summary>
    <!-- Verso : caché, et absent pour le lecteur d'écran,
         tant que la carte n'est pas retournée -->
    <div class="card__back">
      <p>Réponse…</p>
    </div>
  </details>
</article>

/* Le verso recouvre le recto quand la carte est retournée */
.card {
  position: relative;
}

.card summary {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
}

.card__back {
  position: absolute;
  inset: 0;
}

/* Le recto masqué sort aussi de l'arbre d'accessibilité */
.card:has(details[open]) .card__front {
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  details[open] .card__back {
    animation: flip 0.35s ease-out;
  }

  @keyframes flip {
    from {
      transform: perspective(900px) rotateY(-80deg);
      opacity: 0.4;
    }

    to {
      transform: none;
      opacity: 1;
    }
  }
}