---
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
<button className="bg-primary hover:bg-secondary text-white px-4 py-2 rounded">

// Texte actif
<span className="text-primary">

// Badge
<span className="bg-tertiary/10 text-tertiary text-xs px-2 py-0.5 rounded">

// Fond de page
<div className="bg-neutral">
```

## Typographie

```jsx
// Titre de section
<h1 className="font-headline text-2xl font-bold">

// Sous-titre
<h2 className="font-headline text-xl font-semibold">

// Label de formulaire
<label className="font-label text-sm font-medium text-gray-700">
```

> `font-body` est le défaut sur `<body>` — inutile de l'ajouter sur les `<p>`.

## Arrondi

- Par défaut : `rounded` (4px)
- Cards / modales : `rounded-md` (6px)
- Grandes surfaces : `rounded-lg` (8px)
- **Éviter** `rounded-xl` sauf avatars ou indicateurs circulaires

## Espacement

- Grille 4px/8px : `p-1`=4px, `p-2`=8px, `p-3`=12px, `p-4`=16px
- **Pas** de valeurs arbitraires `p-[13px]`

## Mode

Interface **light uniquement** — ne pas ajouter `dark:` prefixes.

---

## Icônes

Utiliser **uniquement** `lucide-react`. Jamais d'autres bibliothèques d'icônes.

```jsx
import { Home, Plus, ChevronRight } from 'lucide-react';

<Home size={20} className="text-primary" />
<button className="flex items-center gap-2"><Plus size={16} />Ajouter</button>
```

- 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
<div className="px-4 sm:px-6 lg:px-8 py-4 sm:py-6">

// Grille
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

// Bouton full-width mobile
<button className="w-full sm:w-auto bg-primary text-white px-4 py-2 rounded">
```

- Touch targets ≥ 44px : `min-h-[44px]` sur tous les éléments interactifs
- Pas d'interactions uniquement au `:hover` — prévoir une alternative tactile
- Tableaux sur mobile : utiliser la classe utilitaire `responsive-table` (définie dans `tailwind.css`)

---

## Réutilisation des composants

**Toujours chercher un composant existant dans `Front-End/src/components/` avant d'en créer un.**

Composants clés disponibles : `AlertMessage`, `Modal`, `Pagination`, `SectionHeader`, `ProgressStep`, `EventCard`, `Calendar/*`, `Chat/*`, `Evaluation/*`, `Grades/*`, `Form/*`, `Admin/*`, `Charts/*`.

- Étendre via des props (`variant`, `size`, `className`) plutôt que de dupliquer
- Appliquer les tokens du design system dans tout composant modifié ou créé
