/**
 * PlayAwale — Composant carte translucide
 * -----------------------------------------------------------------------------
 * Panneau de verre dépoli posé sur la photographie d'arrière-plan. Il porte
 * le contenu principal d'une page et apparaît par un effet de zoom en fondu.
 *
 *     <div class="card card--animated"> … </div>
 *
 * Le modificateur --animated déclenche la mise en scène d'ouverture ; sans
 * lui, la carte s'affiche immédiatement (pages internes, retour de
 * formulaire).
 *
 * PLUS AUCUNE PAGE NE L'EMPLOIE AUJOURD'HUI
 * L'accueil la portait, et il l'a quittée : la page a de la place, et tout
 * serrer dans une seule carte l'obligeait à se comprimer. Le composant reste :
 * il est juste, il ne coûte que sa feuille, et une page qui aura besoin d'un
 * bloc posé sur le décor le trouvera ici plutôt que de le réécrire.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   CARTE
   ============================================================================= */

.card {
  display: inline-block;
  padding: var(--space-xl);
  text-align: center;

  /* Voile presque transparent : c'est le flou qui donne le relief, pas la
     couleur. */
  background: var(--color-surface-glass);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glow);

  /* Verre dépoli : le décor visible au travers est adouci.
     La version -webkit- reste nécessaire pour Safari. */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  position: relative;
}


/* =============================================================================
   APPARITION
   Zoom et fondu combinés, joués après le fondu de l'arrière-plan.
   ============================================================================= */

.card--animated {
  /* Invisible jusqu'au déclenchement de l'animation. */
  opacity: 0;
  animation:
    card-pop-up var(--duration-slow) ease-out var(--delay-card) forwards,
    card-fade-in var(--duration-fast) ease-in var(--delay-card) forwards;
}

@keyframes card-pop-up {
  from { transform: scale(0.75); }
  to   { transform: scale(1); }
}

@keyframes card-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Sans animation, la carte doit rester visible : le reset raccourcit la durée
   mais ne rétablit pas l'opacité de départ. */
@media (prefers-reduced-motion: reduce) {
  .card--animated {
    opacity: 1;
  }
}


/* =============================================================================
   ADAPTATION AUX PETITS ÉCRANS
   ============================================================================= */

@media (max-width: 480px) {
  .card {
    padding: var(--space-lg);

    /* Arrondi resserré, plus juste sur une carte étroite. */
    border-radius: var(--radius-lg);
  }
}