Add Aniimo guides and link game cards to toolbox checklists

DESIGN_SYSTEM.md

@@ -69,7 +69,7 @@ Le Nebula Design System expose ses primitives publiques avec une classe de famil
 
 Règles :
 
-- la classe décrit uniquement la famille : `nds-button`, `nds-icon-button`, `nds-input`, `nds-select`, `nds-select-trigger`, `nds-time`, `nds-textarea`, `nds-inline-input`, `nds-switch`, `nds-radio-button-group`, `nds-checkbox`, `nds-quantity-stepper`, `nds-list-row`, `nds-large-icon-picker-trigger`, `nds-event-surface`, `nds-scrollbox` ;
+- la classe décrit uniquement la famille : `nds-button`, `nds-icon-button`, `nds-input`, `nds-range`, `nds-select`, `nds-select-trigger`, `nds-time`, `nds-textarea`, `nds-inline-input`, `nds-switch`, `nds-radio-button-group`, `nds-checkbox`, `nds-quantity-stepper`, `nds-list-row`, `nds-large-icon-picker-trigger`, `nds-event-surface`, `nds-scrollbox` ;
 - les patterns transverses utilisent aussi une classe de famille : `nds-panel`, `nds-card`, `nds-card-cover`, `nds-card-body`, `nds-card-actions`, `nds-tool-panel`, `nds-toolbar`, `nds-section-heading`, `nds-page-hero`, `nds-badge`, `nds-chip`, `nds-empty-state`, `nds-inline-notice`, `nds-progress`, `nds-filter-panel`, `nds-reorder-indicator`, `nds-modal`, `nds-modal-backdrop`, `nds-modal-footer`, `nds-drawer-panel`, `nds-drawer-resize-handle`, `nds-popover`, `nds-toast-stack`, `nds-toast` ;
 - les variations passent par attributs : `data-size`, `data-variant`, `data-edge`, `data-border`, `data-axis` ;
 - la page `/design-system` affiche aussi `data-state` comme axe de comparaison visuelle des états ;
@@ -108,7 +108,7 @@ Les surfaces NDS couvrent les patterns transverses, pas les composants metier co
 - `nds-filter-panel` : panneau sticky ou lateral de filtres ; les options utilisent `nds-chip`.
 - `nds-empty-state` : etat vide court, avec action optionnelle.
 - `nds-inline-notice` : feedback compact inline, avec `data-variant="info|success|warning|danger"`.
-- `nds-progress` : rail de progression ; le remplissage est le premier `span` enfant ou `.nds-progress-bar`.
+- `nds-progress` : rail de progression (taille `md`/défaut : 8 px, `sm` : 4 px, via `data-size`) ; le remplissage est le premier `span` enfant ou `.nds-progress-bar`.
 - `nds-modal`, `nds-drawer-panel`, `nds-popover`, `nds-toast` : surfaces d'overlay. Le comportement React reste gere par les composants existants.
 
 Les classes metier existantes peuvent coexister avec ces classes pendant la migration. Quand une classe metier reste necessaire, elle doit porter le layout, la grille ou le positionnement, pas recreer les fonds, bordures, hovers et focus partages.
@@ -784,6 +784,52 @@ Date picker et menus compacts :
 - les couleurs de fond des events restent métier et ne sont pas des variants NDS ;
 - les fichiers d'outils peuvent conserver les dimensions de grille, le placement du menu et les états métier `disabled`.
 
+### Curseurs de niveau
+
+- `input[type="range"].nds-range` expose un curseur natif réutilisable, avec `min`, `max`, `step`, `value` et `disabled` standards ;
+- tailles : `md` (44 px, poignée 20 px) et `sm` (36 px, poignée 18 px) ;
+- associer un label explicite et une valeur visible ; conserver les interactions clavier natives ;
+- rail violet, poignée bordée de doré, hover et focus issus des tokens NDS ;
+- la page Aniimo affiche tous les curseurs avec `min="0"`, `max="4"`, `step="1"` : 0 retire la capacité des critères, 1–4 fixe son niveau minimum indépendant ;
+- les règles de filtrage restent dans le composant métier ; le catalogue `/design-system` montre un exemple interactif et l'état désactivé.
+
+### Cartes Aniimo et variantes
+
+- la carte d'entrée du guide utilise `games.json > images.aniimosCover` : le portrait d’Emberpup, recadré sur sa tête dans la couverture commune de 120 px ; des marges internes latérales de 15 % dézooment le portrait sans modifier le cadre ; une description courte conserve le gabarit des autres guides ;
+- MHW et Aniimo partagent les mixins `flip-card-inner`, `flip-card-indicator`, `flip-card-indicator-hover` et `flip-card-face-hover` de `_surfaces.scss` : rotation de 420 ms, surfaces et indicateurs identiques ;
+- les contrôles de retournement Aniimo sont dans chaque face et tournent avec elle ; le focus clavier rejoint le contrôle de la nouvelle face ;
+
+- afficher les portraits dans un cadre compact 3 / 4 plafonné à 250 px de hauteur, avec `object-fit: cover` et cadrage centré ; les fichiers source restent inchangés ;
+- les deux variantes de Petit Esprit de Feu utilisent `object-position: center 20%` pour descendre légèrement le personnage dans son cadre ;
+- 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 ;
+- 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 ;
+- conserver la face affichée lorsqu'une autre variante est sélectionnée ;
+- le verso répartit les éléments et le rôle sur deux colonnes séparées par un trait vertical très discret, centré dans un espacement de 20 px (10 px de chaque côté), avant les compétences ;
+- les badges d'élément et de rôle restent sur une ligne dans leur colonne : icône fixe, padding compact et points de suspension sur les libellés trop longs, avec texte complet au survol ;
+- espacer de 24 px les sections Éléments/Rôle, Compétences de logis et Statistiques au verso ;
+- le verso ajoute les six statistiques et leur total sous les compétences : barres `nds-progress[data-size="sm"]`, valeur numérique alignée à droite, échelle commune égale au maximum du catalogue complet (130 actuellement), indépendante des filtres ;
+- le compteur met en évidence les Aniimos ou les variantes selon le mode de copie ; l’infobulle du bouton précise le contenu copié ;
+- le verso occupe exactement la même surface que le recto ; garder son en-tête fixe et faire défiler les détails dans une zone NDS accessible au clavier ; masquer la face inactive aux technologies d'assistance ;
+- réduire l'animation selon `prefers-reduced-motion` ;
+- les filtres se cumulent par famille et sont évalués sur chaque variante avant regroupement ;
+- les catégories Rôles, Éléments et Compétences de logis partagent un défilement unique via `filter-options`, comme MHW ; des séparateurs discrets délimitent les catégories et leurs en-têtes permettent de les replier sans désactiver leurs sélections ;
+- rôles et éléments sont sur deux colonnes de chips `sm` ; les compétences élémentaires précèdent les autres sans séparation interne, avec icône, texte, curseur et valeur sur une ligne ; un seuil à 0 reste visible mais ne participe pas aux opérations ET/OU ;
+- garder le nombre de critères sélectionnés visible dans l'en-tête, même replié.
+
+### Liaison des guides aux checklists
+
+Les guides à cartes partagent un panneau `guide-checklist-controls` dans la toolbox
+latérale du jeu, au-dessus de ses outils : panneau NDS, select avec label, bouton de dissociation et switch
+« Masquer les cochés ». Le label et le sélecteur occupent toute la largeur ; les actions sont centrées et reviennent à la ligne sur mobile. Le panneau ne concerne que le guide à cartes actuellement ouvert.
+L'état terminé désature et atténue uniquement les portraits (ou les icônes de
+catégorie Diablo), avec une coche accessible « Coché ». Les textes restent
+lisibles et les indicateurs absolus ne modifient pas la taille des cartes.
+Dans les cartes retournables, les indicateurs appartiennent à chaque face.
+
 ## 18. Scrollbars
 
 Les scrollbars utilisent `scrollbar-control` depuis `website/src/styles/design-system/_controls.scss`.
@@ -836,3 +882,5 @@ Minimum attendu :
 - alertes navigateur pour confirmations ou creation ;
 - gros blocs explicatifs visibles dans l'app ;
 - scroll horizontal sur les tableaux de donnees critiques.
+
+Les chips `nds-chip[data-size="sm"]` utilisent une hauteur minimale de 30 px, un padding de 4 × 8 px, une police `xs` et des icônes/images de 16 px. Le catalogue interactif expose cette taille à côté de la taille par défaut.