Extend NDS patterns and migrate shared UI surfaces

DESIGN_SYSTEM.md

@@ -63,21 +63,22 @@ Animations :
 - `--duration-normal: 180ms`
 - `--ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1)`
 
-## 3. API Des Contrôles NDS
+## 3. API Publique NDS
 
-Le Nebula Design System expose ses contrôles publics avec une classe de famille et des attributs `data-*`.
+Le Nebula Design System expose ses primitives publiques avec une classe de famille et des attributs `data-*`.
 
 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` ;
+- 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 ;
 - `data-size` accepte seulement les tailles prévues par la famille (`xs`, `sm`, `md`, `lg`, `xxs`, `micro` selon le contrôle) ; les checkboxes utilisent `md` 20 px, `sm` 18 px et `xs` 14 px ;
-- `data-variant` couvre les intentions visuelles partagées : `primary`, `secondary`, `ghost`, `dashed`, `danger` et les variantes spécialisées documentées dans `/design-system`, dont `panel-toggle` pour les boutons icones accolés à un panneau et `icon-picker` pour les triggers de sélection compacts à icône ;
+- `data-variant` couvre les intentions visuelles partagées : `primary`, `secondary`, `ghost`, `dashed`, `danger` et les variantes spécialisées documentées dans `/design-system`, dont `panel-toggle` pour les boutons icones accolés à un panneau, `icon-picker` pour les triggers de sélection compacts à icône, `interactive|tool|filter|modal` pour les surfaces, et `neutral|gold|success|warning|danger` pour les badges, notices et progress ;
 - `data-edge="left|middle|right|top|center|bottom|top-left|top-right|bottom-right|bottom-left"` décrit la position d'un bouton dans un groupe ou contre un bord, et ajuste uniquement les coins ;
 - `data-border="joined"` masque les bordures de jonction déduites depuis `data-edge` ;
 - `data-border="none"` masque toutes les bordures sans changer la taille, le fond, le hover ou l'état actif ;
-- `data-axis="horizontal|vertical"` reste réservé aux composants dont l'axe est métier, comme `nds-scrollbox` ;
+- `data-axis="horizontal|vertical"` reste réservé aux composants dont l'axe est métier, comme `nds-scrollbox` et `nds-reorder-indicator` ;
 - les boutons icônes de réorganisation utilisent `nds-icon-button` avec `data-variant="secondary"` et une classe métier contenant `drag-handle` ; le curseur `grab/grabbing` est alors géré par le NDS ;
 - les états fonctionnels restent portés par le HTML et l'application : `disabled`, `aria-pressed="true"`, `.active`, `.is-active`.
 
@@ -89,10 +90,29 @@ Exemples :
 <button class="nds-icon-button" data-variant="panel-toggle" data-edge="right" data-border="joined" aria-pressed="true" aria-label="Pages"></button>
 <select class="nds-select" data-size="sm"></select>
 <button class="nds-select-trigger" data-size="sm" aria-pressed="false"></button>
+<article class="nds-card" data-variant="interactive"><div class="nds-card-cover"></div><div class="nds-card-body"></div></article>
+<section class="nds-panel"></section>
+<span class="nds-badge" data-variant="gold">Rare</span>
+<p class="nds-inline-notice" data-variant="danger">Erreur compacte</p>
 ```
 
 Les anciennes classes de variation `nds-*--*` ne doivent plus etre ajoutees. Les anciennes classes globales `.button`, `.primary`, `.danger`, `.ghost` et `.import-button` ne sont plus des APIs visuelles publiques : utiliser `nds-button` / `nds-icon-button` avec `data-variant`. Dans les outils, les classes métier peuvent rester pour le layout, la grille, les largeurs, le positionnement et les états fonctionnels. Le style visuel d'un contrôle générique doit venir de `website/src/styles/design-system/_controls.scss` ou de l'API publique `website/src/styles/design-system/_attributes.scss`.
 
+### Surfaces Et Patterns
+
+Les surfaces NDS couvrent les patterns transverses, pas les composants metier complets.
+
+- `nds-panel` : panneau de lecture non repete, sans hover par defaut.
+- `nds-card` : element repete ou ouvrable ; utiliser `nds-card-cover`, `nds-card-body` et `nds-card-actions` quand la structure cover/contenu/actions est necessaire.
+- `nds-tool-panel` : surface de travail d'outil, plus discrete qu'une card, avec accent dore bas/droite.
+- `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-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.
+
 ## 4. Fond Nebula
 
 Le fond global est defini dans `website/src/styles/_nebula.scss`.