chore: initial DSMMG v0.2 — refonte architecturale complète

Mise en place du Design System ManageMate Group v0.2 — refonte du
système de tokens (préfixe --mmg-color-*), 9 presets accent
user-themable validés WCAG AA, overlays Radix UI + Floating UI,
Storybook 8 + Vitest + axe-core en CI, doc Astro Starlight,
DESIGN.md (format google-labs-code) et exports tokens DTCG/CSS/
TS/Figma/Tailwind v3 et v4.

- 4 packages monorepo pnpm : @managemate/{tokens,css,react,icons}
- 62 composants React headless-first (Sheet, HoverCard, ContextMenu,
  Slider, ToggleGroup, AvatarGroup, UserCard, ProfileHeader,
  MetricCard, PricingCard, FeatureCard, Text/Display/Eyebrow/Lead…)
- Lint contraste WCAG : 37/37 paires AA, branché CI
- Toast pile Sonner-style avec ResizeObserver
- Theming user (9 presets) sans casser sémantique fixe
- Identité Synapse (rose #D12B6A) préservée

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

storybook/stories/Intro.mdx

@@ -0,0 +1,58 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Intro" />
+
+# DSMMG — Design System ManageMate Group
+
+Référence pour designers et développeurs des produits ManageMate (Synapse, HRTime, Forge, Orbit, MSLM, Espace-Client, sites publics).
+
+## Principes
+
+1. **Accessibilité non-négociable** — RGAA 4.1 / WCAG 2.2 AA, validé via axe-core en CI sur chaque composant.
+2. **Headless-first** — comportement (focus, keyboard, ARIA) découplé du style. Primitives Radix UI / Floating UI dessous.
+3. **Tokens partout** — aucun hex en dur, aucun `--mmg-color-synapse` direct. Tout passe par les sémantiques (`--mmg-color-text-primary`, `--mmg-color-bg-surface`) et l'accent (`--mmg-color-accent`).
+4. **Tree-shakable** — un composant = un fichier. `sideEffects: false`. Les imports inutilisés sont droppés par les bundlers consommateurs.
+
+## Theming utilisateur
+
+Chaque utilisateur peut choisir son accent (rose Synapse par défaut). 9 presets validés AA :
+- `synapse` (rose corporate, défaut)
+- `rose`, `blue`, `violet`, `green`, `amber`, `red`, `cyan`, `slate`
+
+Le picker change en live ici (toolbar Storybook → "Accent"). Voir aussi le composant **`<ThemePicker />`** dans `Theming`.
+
+## Density
+
+3 modes adaptables via `[data-mmg-density]` :
+- `comfortable` (défaut, public)
+- `cozy` (apps métier)
+- `compact` (power users)
+
+## Standards
+
+- shadcn/ui + Radix UI (architecture, primitives a11y)
+- Linear, Notion, Vercel, Stripe (références SaaS dense)
+- DSFR (méthodologie a11y)
+- Atlassian DS, IBM Carbon (apps enterprise)
+
+## Conventions de naming
+
+| Catégorie | Préfixe |
+|---|---|
+| Tokens couleur | `--mmg-color-*` |
+| Tokens taille | `--mmg-space-*`, `--mmg-radius-*`, `--mmg-font-size-*` |
+| Tokens motion | `--mmg-duration-*`, `--mmg-ease-*` |
+| Classes CSS | `mmg-<comp>` |
+| Classes utilitaires | `mmg-u-*` |
+| Variantes BEM | `mmg-<comp>--<variant>` |
+| Sous-éléments BEM | `mmg-<comp>__<part>` |
+
+## Navigation
+
+- **Tokens** — primitives, sémantiques, accent, motion
+- **Forms** — Button, Input, Select, Checkbox, Radio, Switch, Combobox
+- **Layout** — Container, Stack, Grid, Card, Tile
+- **Overlays** — Tooltip, Popover, Menu, Dialog (tous Radix-backed)
+- **Navigation** — Header, Footer, Breadcrumb, Tabs, Pagination, AppShell
+- **Data display** — DataTable, Stat, Avatar, Tag, Badge, Progress
+- **Theming** — ThemePicker, dark mode toggle