diff --git a/TUTO_REACT.md b/TUTO_REACT.md
new file mode 100644
index 0000000..b8db86d
--- /dev/null
+++ b/TUTO_REACT.md
@@ -0,0 +1,300 @@
+# ⚛️ Tuto — créer ton premier projet React (depuis zéro)
+
+Salut ! 👋 On passe à une nouvelle étape : faire un vrai **petit projet React**, dans un **sous-dossier de ce repo**. Le thème est **libre** (carte blanche !). Ce tuto part **de tout début** : on installe les outils, on explique **à quoi chacun sert**, puis on construit un mini-projet **bien rangé** (c'est le point le plus important : on découpe en plusieurs fichiers, pas un gros fourre-tout).
+
+⏱️ Compte ~30-45 min la première fois. Avance étape par étape, ne saute rien.
+
+---
+
+## 0. Les outils et à quoi ils servent (lis avant d'installer)
+
+Avant de taper des commandes « magiques », comprends **qui fait quoi** :
+
+| Outil | C'est quoi | À quoi ça sert |
+|---|---|---|
+| **Node.js** | un programme qui fait tourner du **JavaScript en dehors du navigateur** (directement sur ta machine) | tous les outils de dev modernes tournent dessus. Sans Node, rien ne s'installe |
+| **npm** | le **gestionnaire de paquets** de Node (installé **avec** Node) | télécharger/installer des bibliothèques (comme React) et lancer des commandes du projet |
+| **Vite** | un **outil de démarrage de projet** + un **serveur de dev** ultra-rapide | crée le squelette du projet et l'affiche dans le navigateur, avec **rechargement automatique** quand tu modifies un fichier |
+| **React** | une **bibliothèque** pour construire l'interface avec des **composants** réutilisables | écrire l'UI comme un assemblage de petits blocs (un bouton, une carte, une barre de nav…) |
+
+> 💡 **Bonne nouvelle :** React, c'est l'idée que tu as **déjà** pratiquée à la main — ton `creerNavbar()` (une fonction qui renvoie du HTML réutilisable), c'était **un composant** avant l'heure. React, c'est ça, en mieux organisé.
+
+---
+
+## 1. Installer Node.js
+
+React a besoin de Node. On l'installe une fois pour toutes.
+
+### Windows
+1. Va sur **https://nodejs.org** et télécharge la version **« LTS »** (la stable).
+2. Lance l'installateur, **Suivant → Suivant** (laisse les options par défaut, elles ajoutent Node au PATH).
+
+### Mac
+1. Même site **https://nodejs.org**, version **« LTS »**, télécharge le `.pkg`.
+2. Ouvre-le et suis l'installation.
+
+### Vérifier que c'est bon (les deux)
+Ouvre un **terminal** (sur Zed : `` Ctrl + ` `` ; sinon le Terminal de ton OS) et tape :
+```bash
+node -v
+npm -v
+```
+Tu dois voir deux numéros de version (ex. `v20.11.0` et `10.2.4`). Si oui → Node **et** npm sont là. 🎉
+Si « commande introuvable » : **ferme et rouvre** le terminal (parfois il faut le relancer après l'install).
+
+> 🔎 `npm` s'installe **automatiquement avec** Node — tu n'as rien à faire de plus.
+
+---
+
+## 2. Créer le projet React (dans un sous-dossier du repo)
+
+Dans le terminal, place-toi à la **racine de ce repo** (le dossier `stagiaire`). Puis lance :
+
+```bash
+npm create vite@latest
+```
+
+Vite va te poser **3 questions** :
+1. **Project name** → donne un nom de dossier, ex. `mon-projet` (ce sera le sous-dossier créé ici).
+2. **Select a framework** → choisis **React**.
+3. **Select a variant** → choisis **JavaScript** (on garde simple ; pas TypeScript pour l'instant).
+
+> 🔎 `npm create vite@latest` = « télécharge l'outil Vite et crée un nouveau projet ». Le `@latest` veut dire « la dernière version ».
+
+Ça crée un dossier `mon-projet/` avec tout le squelette dedans.
+
+---
+
+## 3. Installer les dépendances
+
+Entre dans le dossier et installe les bibliothèques :
+
+```bash
+cd mon-projet
+npm install
+```
+
+- `cd mon-projet` = « entre dans le dossier du projet ».
+- `npm install` = lit le fichier **`package.json`** (la liste des bibliothèques nécessaires) et les **télécharge** dans un dossier **`node_modules/`**.
+
+> ⚠️ **`node_modules/` est énorme et ne se commite JAMAIS sur Git.** Vite a déjà créé un fichier `.gitignore` dans le projet qui l'ignore — laisse-le. (Si un jour tu vois des milliers de fichiers à committer, c'est que `node_modules` n'est pas ignoré : stop, on regarde ensemble.)
+
+> 💡 **À retenir :** `package.json` = la **recette** (quelles bibliothèques, quelles commandes). `node_modules/` = les **ingrédients téléchargés**. On partage la recette (commitée), pas les ingrédients (ré-installables avec `npm install`).
+
+---
+
+## 4. Lancer le projet
+
+```bash
+npm run dev
+```
+
+Vite démarre un **serveur de dev** et t'affiche une adresse, du genre :
+```
+http://localhost:5173/
+```
+Ouvre-la dans le navigateur → tu vois la page React de démarrage. 🎉
+
+> 🔎 Ça te rappelle quelque chose ? C'est le **même principe** que `localhost` qu'on a vu pour `fetch` : un petit serveur qui sert ta page en `http://`. Ici en plus, **dès que tu enregistres un fichier, la page se met à jour toute seule** (« hot reload »).
+
+Pour **arrêter** le serveur : `Ctrl + C` dans le terminal.
+
+---
+
+## 5. Le tour du propriétaire (la structure des fichiers)
+
+Voici l'essentiel de ce que Vite a créé :
+
+```
+mon-projet/
+├── index.html          ← la page de base (tu n'y touches presque jamais)
+├── package.json        ← la recette (bibliothèques + commandes)
+├── .gitignore          ← liste ce que Git doit ignorer (dont node_modules)
+├── node_modules/       ← les bibliothèques (ignoré par Git)
+├── public/             ← images/fichiers statiques
+└── src/                ← 👈 TON code vit ici
+    ├── main.jsx        ← le point d'entrée : branche React sur la page
+    ├── App.jsx         ← le composant principal (ton appli)
+    └── App.css         ← les styles
+```
+
+> 💡 **À retenir :** tu travailles **presque uniquement dans `src/`**. Et le fichier le plus important pour toi, c'est **`App.jsx`**.
+
+---
+
+## 6. JSX : du HTML dans le JavaScript
+
+Ouvre `src/App.jsx`. Tu vois une fonction qui **renvoie quelque chose qui ressemble à du HTML** :
+
+```jsx
+function App() {
+  return (
+    <div>
+      <h1>Mon appli</h1>
+    </div>
+  );
+}
+```
+
+Ce « HTML dans le JS » s'appelle du **JSX**. C'est exactement l'idée de ton `creerNavbar()` (une fonction qui renvoie du HTML), mais en plus naturel : ici React s'occupe de l'afficher.
+
+**Essaie tout de suite :** remplace le `<h1>` par ton titre, **enregistre**, et regarde le navigateur changer **tout seul**. C'est ça, le hot reload.
+
+> 🔎 Deux petites différences avec le HTML normal : en JSX on écrit `className` au lieu de `class`, et chaque composant doit renvoyer **un seul** élément parent (souvent un `<div>` qui enveloppe le reste).
+
+---
+
+## 7. ⭐ LE point clé : découper en composants (1 composant = 1 fichier)
+
+C'est **la** chose à bien faire dès le départ : **ne pas tout entasser dans `App.jsx`**. On découpe l'interface en **petits composants**, **chacun dans son propre fichier**. `App.jsx` ne fait alors qu'**assembler** ces blocs.
+
+### ❌ Le piège à éviter (le fourre-tout)
+```jsx
+// App.jsx qui grossit, grossit... tout dedans : header + cartes + formulaire + footer...
+function App() {
+  return (
+    <div>
+      {/* 200 lignes de tout et n'importe quoi */}
+    </div>
+  );
+}
+```
+C'est exactement le « fourre-tout » qu'on veut **éviter** : illisible, impossible à réutiliser, et on s'y perd.
+
+### ✅ La bonne organisation
+Crée un dossier **`src/components/`**, et **un fichier par composant** :
+
+```
+src/
+├── App.jsx                 ← assemble les composants
+├── main.jsx
+└── components/
+    ├── Header.jsx          ← un composant = un fichier
+    ├── Carte.jsx
+    └── Footer.jsx
+```
+
+**Un composant** (`src/components/Header.jsx`) :
+```jsx
+function Header() {
+  return (
+    <header>
+      <h1>FleetZen</h1>
+    </header>
+  );
+}
+
+export default Header;   // 👈 on l'EXPORTE pour pouvoir l'utiliser ailleurs
+```
+
+**App.jsx qui assemble** (et reste court et lisible) :
+```jsx
+import Header from "./components/Header";   // 👈 on IMPORTE le composant
+import Footer from "./components/Footer";
+
+function App() {
+  return (
+    <div>
+      <Header />
+      {/* ... le reste ... */}
+      <Footer />
+    </div>
+  );
+}
+
+export default App;
+```
+
+> 💡 **La règle d'or :** **1 composant = 1 fichier**, rangé dans `components/`. `App.jsx` ne fait qu'**assembler** les blocs (`<Header />`, `<Footer />`…). Un composant utilisé = `<MonComposant />` (avec une **majuscule** au début, c'est obligatoire en React).
+>
+> 🔎 Tu reconnais le `export` / `import` ? C'est exactement les **modules** — l'idée « j'écris un truc dans un fichier, je le réutilise dans un autre ». React s'appuie là-dessus en permanence.
+
+---
+
+## 8. Rendre un composant configurable : les **props**
+
+Un composant devient vraiment utile quand on peut lui passer des **données** (comme un argument de fonction). Ça s'appelle les **props**.
+
+`src/components/Carte.jsx` :
+```jsx
+function Carte(props) {
+  return (
+    <div className="carte">
+      <h2>{props.titre}</h2>
+      <p>{props.texte}</p>
+    </div>
+  );
+}
+
+export default Carte;
+```
+
+Et dans `App.jsx`, on **réutilise** le même composant avec des contenus différents :
+```jsx
+<Carte titre="Géolocalisation" texte="Suivi en temps réel" />
+<Carte titre="Consommation"    texte="Carburant consommé" />
+```
+
+> 💡 **À retenir :** les **props**, ce sont les « réglages » qu'on passe à un composant (comme les paramètres d'une fonction — souviens-toi de `creerNavbar(pageActive)`). Un composant + des props = réutilisable à l'infini.
+
+---
+
+## 9. Un composant qui réagit : `useState` (l'interactivité)
+
+Pour qu'un composant **change** quand on clique, React utilise un **état** (`state`). Exemple d'un compteur — tu vas reconnaître ton simulateur / ton compteur de caractères :
+
+`src/components/Compteur.jsx` :
+```jsx
+import { useState } from "react";
+
+function Compteur() {
+  const [nombre, setNombre] = useState(0);   // valeur de départ : 0
+
+  return (
+    <div>
+      <p>Véhicules : {nombre}</p>
+      <button onClick={() => setNombre(nombre + 1)}>+</button>
+    </div>
+  );
+}
+
+export default Compteur;
+```
+
+> 💡 **L'idée :** `useState` crée une donnée **suivie par React**. Quand tu la changes avec `setNombre(...)`, React **réaffiche tout seul** le composant — plus besoin de `textContent` à la main comme avant ! C'est tout l'intérêt de React : tu décris **ce qu'on voit selon l'état**, et il s'occupe de l'affichage.
+
+---
+
+## 10. Et Git dans tout ça ?
+
+- Tu peux travailler sur **ta branche habituelle** (`feature/...`), le projet React vit dans son sous-dossier.
+- Tu commites **ton code** (`src/`, `package.json`, etc.) **mais pas `node_modules/`** (déjà ignoré).
+- Si quelqu'un récupère ton projet, il fait juste `npm install` pour recréer `node_modules`.
+
+---
+
+## 🎯 À toi de jouer (carte blanche)
+
+Thème **libre** : un mini-site sur ce que tu veux (jeux, films, recettes, sport, ta page FleetZen en React…). L'important n'est pas le sujet, mais que ce soit **bien découpé** :
+
+- [ ] Node installé (`node -v` répond)
+- [ ] Projet créé avec Vite + lancé (`npm run dev`)
+- [ ] Au moins **3 composants**, **chacun dans son fichier**, dans `src/components/`
+- [ ] `App.jsx` qui **assemble** (court et lisible, pas de fourre-tout)
+- [ ] Un composant **réutilisé avec des props** différentes
+- [ ] Un composant **interactif** avec `useState`
+
+---
+
+## 🧰 Récap des outils
+
+| | Rôle | Commande clé |
+|---|---|---|
+| **Node.js** | faire tourner les outils JS | (installé une fois) |
+| **npm** | installer les bibliothèques | `npm install` |
+| **Vite** | créer + servir le projet | `npm create vite@latest`, `npm run dev` |
+| **React** | construire l'UI en composants | `import` / `export`, `<Composant />` |
+
+> 🧭 La phrase à garder : **un composant = un fichier ; `App.jsx` assemble.** Si un fichier commence à tout faire, c'est le signal de le **découper**. Mieux vaut 5 petits fichiers clairs qu'un gros illisible.
+
+Bloqué ? Note **ce que tu as tapé**, **le message d'erreur exact** (terminal **ou** console F12), et on débloque.