/* ==========================================================================
   L'ELEMENT SIGNATURE : le tampon de passeport.
   Chaque haut fait est un tampon. Contour en double filet, texte courbe sur le
   pourtour, date au centre, rotation aleatoire entre -8 et +8 degres, encre
   imparfaite avec des manques. La page d'un badge se lit comme une page de
   passeport qui se remplit.
   C'est le seul endroit ou le site est spectaculaire.
   ========================================================================== */

.mur-tampons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--e4);
}

.tampon {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  color: var(--rouge-avion);
  transform: rotate(var(--inclinaison, -4deg));
  transition: transform var(--d-tampon) var(--sortie);
}
.tampon:hover { transform: rotate(0deg) scale(1.04); }

.tampon svg { width: 100%; height: 100%; overflow: visible; }
.tampon .filet { fill: none; stroke: currentColor; stroke-width: 2.5; }
.tampon .filet-fin { fill: none; stroke: currentColor; stroke-width: 1.2; }
.tampon .courbe { fill: currentColor; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 1.6px; text-transform: uppercase; }
.tampon .centre { fill: currentColor; font-family: var(--display); font-weight: 800;
  text-anchor: middle; }
.tampon .date { fill: currentColor; font-family: var(--mono); font-size: 8px; text-anchor: middle; }

/* Encre imparfaite : un bruit fin ronge le trait, comme un cachet mal encre. */
.tampon .encre { filter: url(#grain-tampon); opacity: 0.92; }

/* Raretes */
.tampon.commun     { color: var(--commun); }
.tampon.courant    { color: var(--courant); }
.tampon.rare       { color: var(--rare); }
.tampon.legendaire { color: var(--legendaire); }

/* Tampon fantome : verrouille, 12 % d'opacite, condition ecrite au centre. */
.tampon.fantome { opacity: 0.12; color: var(--texte); }
.tampon.fantome:hover { opacity: 0.35; transform: rotate(0deg); }
.tampon.fantome .condition {
  fill: currentColor; font-family: var(--texte-police); font-size: 7px; text-anchor: middle;
}

/* Arrivee d'un tampon debloque : 1,6x -> 1x avec rotation, puis confettis. */
@keyframes tamponne {
  0%   { transform: rotate(-14deg) scale(1.6); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: rotate(var(--inclinaison, -4deg)) scale(1); opacity: 1; }
}
.tampon.arrive { animation: tamponne var(--d-tampon) var(--sortie); }

/* Tampon « ENTREE VALIDEE » du deverrouillage : il s'ecrase sur la page. */
@keyframes ecrase {
  0%   { transform: translate(-50%, -50%) rotate(-18deg) scale(3); opacity: 0; }
  55%  { transform: translate(-50%, -50%) rotate(-6deg) scale(0.92); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; }
}
.tampon-entree {
  position: fixed; left: 50%; top: 45%; z-index: 90;
  width: min(72vw, 22rem); color: var(--vert-tampon);
  pointer-events: none;
  animation: ecrase var(--d-deverrou) var(--sortie) forwards;
}
.tampon-entree.part { animation: ecrase-sortie 400ms var(--sortie) forwards; }
@keyframes ecrase-sortie { to { opacity: 0; transform: translate(-50%, -60%) rotate(-8deg) scale(1.1); } }

/* Confettis : 12 au maximum, jamais plus. */
.confetti { position: fixed; width: 8px; height: 12px; z-index: 95; pointer-events: none;
  animation: tombe var(--d-confetti) var(--sortie) forwards; }
@keyframes tombe {
  from { transform: translateY(0) rotate(0); opacity: 1; }
  to   { transform: translateY(160px) rotate(320deg); opacity: 0; }
}

/* Un seul mouvement orchestre par ecran : deux effets simultanes donnent
   l'impression d'un site genere automatiquement. */