# CLAUDE.md — N3WT-SCHOOL

Instructions permanentes pour Claude Code sur ce projet.

## Architecture

- **Backend** : Python / Django — dossier `Back-End/`
- **Frontend** : Next.js 14 (App Router) — dossier `Front-End/`
- **Tests frontend** : `Front-End/src/test/`
- **CSS** : Tailwind CSS 3 + `@tailwindcss/forms`

## Design System

Le design system complet est dans [`docs/design-system.md`](docs/design-system.md). À lire et appliquer systématiquement.

### Tokens de couleur (Tailwind)

| Token       | Hex       | Usage                              |
|-------------|-----------|------------------------------------|
| `primary`   | `#059669` | Boutons, CTA, éléments actifs      |
| `secondary` | `#064E3B` | Hover, accents sombres             |
| `tertiary`  | `#10B981` | Badges, icônes d'accent            |
| `neutral`   | `#F8FAFC` | Fonds de page, surfaces            |

> **Règle absolue** : ne jamais utiliser `emerald-*`, `green-*` pour les éléments interactifs. Utiliser les tokens ci-dessus.

### Typographie

- `font-headline` → titres `h1`/`h2`/`h3` (Manrope)
- `font-body` → texte courant, défaut sur `<body>` (Inter)
- `font-label` → boutons, labels de form (Inter)

### Arrondi & Espacement

- Arrondi par défaut : `rounded` (4px)
- Espacement : grille 4px/8px — pas de valeurs arbitraires
- Mode : **light uniquement**, pas de dark mode

## Conventions de code

### Frontend (Next.js)

- **Composants** : React fonctionnels, pas de classes
- **Styles** : Tailwind CSS uniquement — pas de CSS inline sauf animations
- **Icônes** : `lucide-react`
- **i18n** : `next-intl` — toutes les chaînes UI via `useTranslations()`
- **Formulaires** : `react-hook-form`
- **Imports** : alias `@/` pointe vers `Front-End/src/`

### Qualité

- Linting : ESLint (`npm run lint` dans `Front-End/`)
- Format : Prettier
- Tests : Jest + React Testing Library (`Front-End/src/test/`)

## Gestion des branches

- Base : `develop`
- Nomenclature : `<type>-<nom_ticket>-<numero>` (ex: `feat-ma-feature-1234`)
- Types : `feat`, `fix`, `docs`, `style`, `refactor`, `test`, `chore`

## Icônes

Utiliser **uniquement `lucide-react`** — jamais d'autre bibliothèque d'icônes.

```jsx
import { Home, Plus } from 'lucide-react';
<Home size={20} className="text-primary" />
```

## Responsive & PWA

- **Mobile-first** : styles de base = mobile, breakpoints `sm:`/`md:`/`lg:` pour agrandir.
- Touch targets ≥ 44px (`min-h-[44px]`) sur tous les éléments interactifs.
- Pas d'interactions uniquement au `:hover` — prévoir l'équivalent tactile.
- Les tableaux utilisent la classe `responsive-table` sur mobile.

## Réutilisation des composants

Avant de créer un composant, **vérifier `Front-End/src/components/`**.  
Composants disponibles : `AlertMessage`, `Modal`, `Pagination`, `SectionHeader`, `ProgressStep`, `EventCard`, `Calendar/*`, `Chat/*`, `Evaluation/*`, `Grades/*`, `Form/*`, `Admin/*`, `Charts/*`.

## À éviter

- Ne pas ajouter de dépendances inutiles
- Ne pas modifier `package-lock.json` / `yarn.lock` manuellement
- Ne pas committer sans avoir vérifié ESLint et les tests
- Ne pas utiliser de CSS arbitraire (`p-[13px]`) sauf cas justifié
- Ne pas ajouter de support dark mode
- Ne pas utiliser d'autres bibliothèques d'icônes que `lucide-react`
- Ne pas créer un composant qui existe déjà dans `components/`
