--- applyTo: "Front-End/src/**" --- # Design System — Règles Copilot Référence complète : [`docs/design-system.md`](../../docs/design-system.md) ## Couleurs — tokens Tailwind obligatoires Utiliser **toujours** ces tokens pour les éléments interactifs : | Token | Hex | Remplace | |-------------|-----------|-----------------------------------| | `primary` | `#059669` | `emerald-600`, `emerald-500` | | `secondary` | `#064E3B` | `emerald-700`, `emerald-800` | | `tertiary` | `#10B981` | `emerald-400`, `emerald-500` | | `neutral` | `#F8FAFC` | Fonds neutres | **Ne jamais écrire** `bg-emerald-*`, `text-emerald-*`, `border-emerald-*` pour des éléments interactifs. ### Patterns corrects ```jsx // Bouton ``` - Taille par défaut : `size={20}` inline, `size={24}` boutons standalone - Couleur via `className="text-*"` uniquement — jamais le prop `color` - Icône seule : ajouter `aria-label` pour l'accessibilité --- ## Responsive & PWA **Mobile-first** : les styles de base ciblent le mobile, on étend avec `sm:` / `md:` / `lg:`. ```jsx // Layout
// Grille
// Bouton full-width mobile