Split randomizer views and align NDS toolbox vocabulary

DESIGN_SYSTEM.md

@@ -134,9 +134,9 @@ Caracteristiques :
 - bordure gradient subtile dore/violet clair ;
 - `border-radius: var(--radius-xl)` ;
 - `box-shadow: var(--shadow-md)` ;
-- pas de background inline sur les heroes de jeux.
+- les pages jeux peuvent fournir une image de hero via `--game-hero-image`.
 
-Les pages jeux doivent heriter du hero commun. Si un jeu a une image, elle doit etre utilisee dans les cards ou les covers, pas comme remplacement complet du hero commun sauf decision explicite.
+Les pages jeux doivent heriter du hero commun. Une image de jeu peut enrichir le hero quand elle reste lisible avec l'overlay commun ; les cards et covers restent les emplacements prioritaires pour les images inspectables.
 
 ## 7. Cards
 
@@ -152,6 +152,8 @@ Style courant :
 
 La bordure haute/basse interne d'une cover doit rester doree quand elle separe une image du contenu.
 
+Les surfaces de cards reutilisent les mixins `card-surface`, `card-surface-hover` et `card-cover-divider` depuis `website/src/styles/design-system/_surfaces.scss`.
+
 Eviter les cards dans des cards. Les sections de page doivent rester des layouts ou panneaux, pas des empilements de cartes decoratives.
 
 ## 8. Modules Toolbox
@@ -242,7 +244,7 @@ Regles UI :
 - la copie et le collage d'entree utilisent les raccourcis clavier `Ctrl+C` et `Ctrl+V` ;
 - le mini-switch repetable est actif par defaut ; une entree non repetable est supprimee quand son echeance de la semaine courante est terminee ;
 - les alertes reutilisent le switch a 3 etats du timer : aucune, toolbox visible, globale site ;
-- le choix de couleur reprend le pattern de palette compacte du bloc-notes ;
+- le choix de couleur reprend le pattern de palette compacte du Bloc Note ;
 - le choix initial s'affiche dans l'outil lui-meme ; la vue mensuelle affiche le nom du mois et des boutons mois precedent / courant / suivant ;
 - en vue mensuelle, la règle mensuelle peut cibler le numero du jour ou le rang du jour de semaine via un switch 2 états compact, indépendamment du choix de répétition.
 - en vue mensuelle, les dates de debut et de fin utilisent un champ compact qui ouvre un mini-calendrier avec navigation ;
@@ -312,7 +314,7 @@ Regles UI :
 
 ### Bloc Note Riche
 
-Le bloc note utilise une edition directe en `contentEditable`, sans mode preview separe.
+Le Bloc Note utilise une edition directe en `contentEditable`, sans mode preview separe.
 
 Regles UI :
 
@@ -329,19 +331,19 @@ Regles UI :
 - placeholder integre dans la surface d'edition quand la note est vide ;
 - le HTML persiste doit rester nettoye via allowlist, jamais via HTML libre.
 
-### Memos
+### Mémos
 
-L'outil Memos sert aux informations courtes type post-it.
+L'outil Mémos sert aux informations courtes type post-it.
 
 Regles UI :
 
 - cartes compactes, non imbriquees, avec accent couleur localise ;
 - edition directe du texte court ;
 - zone de texte en hauteur automatique, sans resize manuel ni scrollbar interne ;
-- palette de couleurs compacte reprenant les swatches du bloc note ;
-- la creation de memo est masquee par defaut et s'ouvre via le bouton `+` du header d'outil ;
+- palette de couleurs compacte reprenant les swatches du Bloc Note ;
+- la creation de mémo est masquee par defaut et s'ouvre via le bouton `+` du header d'outil ;
 - réorganisation des cartes par poignée de drag & drop compacte ;
-- bande deroulante visible uniquement quand elle est active et qu'au moins un memo existe ; elle affiche tous les memos.
+- bande deroulante visible uniquement quand elle est active et qu'au moins un mémo existe ; elle affiche tous les mémos.
 
 ### Calque De Dessin
 
@@ -679,7 +681,7 @@ Boutons icones :
 - taille compacte : `34px`, icone `19px` ;
 - taille dense `xs` : `30px`, icone `17px` ;
 - taille inline `xxs` : `26px`, icone `15px` ;
-- tailles micro reservees aux noeuds denses : `24px`/`13px` et `22px`/`12px` ;
+- taille micro reservee aux noeuds denses : `22px`, icone `12px` ;
 - fond compact sombre, rayon `--radius-md`, hover violet contenu ;
 - variant `primary` dore/violet pour les actions principales ;
 - variant `ghost` transparent pour les handles discrets ;
@@ -689,13 +691,13 @@ Boutons icones :
 - variant de bordure `button-borderless` pour masquer toutes les bordures ;
 - variant visuel `panel-toggle` pour les boutons icones accolés à un panneau, comme le bouton pages ;
 - etat toggler via `.active` ou `.is-active`, avec le mixin `temporary-toggle-active`.
-- les barres d'outils compactes reutilisent la famille bouton icone ; `toolbar-button` reste un alias pratique pour les boutons courts du bloc-notes (`B`, `I`, `U`) et les boutons de dessin.
+- les barres d'outils compactes reutilisent la famille bouton icone ; `toolbar-button` reste un alias pratique pour les boutons courts du Bloc Note (`B`, `I`, `U`) et les boutons de dessin.
 
 Boutons composes et toggles de bord :
 
 - utiliser `button-edge` + `button-joined-border` pour les boutons groupés type ajout + chevron ;
 - utiliser `button-edge` pour la forme des toggles accoles au bord d'un module, et `icon-button-panel-toggle` pour leur rendu visuel quand ils reprennent le pattern du bouton `pages` ;
-- utiliser `list-row-button` pour les lignes selectionnables type pages du bloc-notes ;
+- utiliser `list-row-button` pour les lignes selectionnables type pages du Bloc Note ;
 - utiliser `text-button-dashed` pour les actions d'ajout contextuelles encadrees en pointilles ;
 - `split-button-start`, `split-button-end`, `edge-toggle` et `dashed-action-button` restent des alias de compatibilite internes, pas des familles visuelles separees ;
 - les outils peuvent garder uniquement la position absolue, la largeur contextuelle et les icones ;