Display searchable Aniimo numbers on cards

DESIGN_SYSTEM.md

@@ -805,6 +805,7 @@ Date picker et menus compacts :
 - la grille utilise un minimum de 220 px pour afficher cinq colonnes à 1920 px, puis réduit le nombre de colonnes sur les petits écrans ; limiter les cartes à 280 px de largeur ; le recto fixe leur hauteur avec le portrait et un pied de 96 px, indépendamment des noms et des variantes ;
 - le nom de forme revient à la ligne au recto, dans le pied fixe de 96 px ;
 - le recto affiche uniquement les icônes d'éléments, centrées dans le pied de carte, avec texte alternatif et infobulle ;
+- le numéro Aniimo reste un texte HTML visible en bas à gauche du portrait, afin de rester accessible à la recherche du navigateur ;
 - les onglets affichent des initiales ou une abréviation de trois lettres pour les formes à un seul mot (PLA, PRA, PRI) ; le nom complet reste accessible via `Tooltip`, au survol et au focus ;
 - placer les onglets au-dessus du contrôle de retournement, avec navigation clavier ; une grille de colonnes égales affiche les sept formes sur une ligne sans couper les libellés ;
 - la forme Prismana est la dernière entrée des variantes dans le JSON ; son onglet reçoit un léger fond et un soulignement arc-en-ciel statiques, sans masquer la sélection ou le focus ;

website/src/features/games/aniimo/AniimoCard.jsx

@@ -36,7 +36,11 @@ function CardFaces({ variant, t, content, checklist, statsMax }) {
       <div className="aniimo-card-inner">
         <div className="aniimo-face aniimo-front nds-card" aria-hidden={flipped} inert={flipped}>
           {flipButton(false, frontButton)}
-          <div className="aniimo-portrait"><img src={variant.image} alt={t(variant.name)} width="512" height="840" loading="lazy" /><GuideChecklistCheckbox checklist={checklist} itemKey={variant.key} /></div>
+          <div className="aniimo-portrait">
+            <img src={variant.image} alt={t(variant.name)} width="512" height="840" loading="lazy" />
+            <span className="aniimo-number">N° {variant.aniimoId}</span>
+            <GuideChecklistCheckbox checklist={checklist} itemKey={variant.key} />
+          </div>
           <div className="aniimo-card-body">
             <h2 title={t(variant.name)}>{t(variant.name)}</h2>
             <p className="aniimo-form" title={t(variant.form)}>{t(variant.form)}</p>

website/src/styles/_aniimo.scss

@@ -136,6 +136,7 @@
 }
 .aniimo-portrait {
   @include surfaces.card-cover-divider;
+  position: relative;
   aspect-ratio: 3 / 4;
   max-height: 250px;
   width: 100%;
@@ -143,6 +144,22 @@
   overflow: hidden;
   img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
 }
+.aniimo-number {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  z-index: 2;
+  padding: 3px 7px;
+  border: 1px solid var(--color-border-hover);
+  border-radius: var(--radius-sm);
+  background: rgba(7, 9, 19, 0.82);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-xs);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+  pointer-events: none;
+}
 // Les deux portraits de Petit Esprit de Feu ont davantage de vide sous le personnage.
 .aniimo-result[data-aniimo="11001"] .aniimo-portrait img { object-position: center 20%; }
 .aniimo-card-body {