Correction boss L: Accueil masque la prop trilogies par un useState local (ajouts non remontes a Details)

CORRECTION_boss_L.md

@@ -0,0 +1,53 @@
+# 🔧 Correction — le boss (Module L) est à moitié branché
+
+Beau boulot : `App` tient bien `trilogies` et `likes`, les passe aux routes, `Details` retrouve la trilogie et affiche ses likes, et le bouton « au hasard » marche. Il reste **un fil débranché** qui casse tout le reste.
+
+## 🐛 Le vrai bug : `Accueil` ignore les props et garde sa propre liste
+
+Dans `App.jsx` tu passes bien la liste :
+```jsx
+<Accueil trilogies={trilogies} setTrilogies={setTrilogies} likes={likes} setLikes={setLikes} />
+```
+
+Mais dans `Accueil.jsx`, regarde les deux premières lignes :
+```jsx
+function Accueil({ likes, setLikes }) {          // ❌ trilogies / setTrilogies PAS récupérés
+  const [trilogies, setTrilogies] = useState(initialData);   // ❌ une 2e liste, locale
+```
+
+Du coup il existe **deux listes différentes** :
+- celle de `App` (que voit `Details`),
+- celle de `Accueil` (sa copie locale, où vont tes ajouts).
+
+Quand tu ajoutes une trilogie, tu remplis **la liste locale d'`Accueil`** → elle s'affiche sur l'accueil, mais **`App` n'en sait rien**. Donc `Details` (qui lit la liste d'`App`) ne la trouve pas → « Introuvable ». Pareil, le bouton « au hasard » pioche dans la liste locale et t'envoie vers un id que `Details` ne connaît pas.
+
+> 🧩 La règle : si une donnée vient des **props**, on ne la recrée pas en `useState` à côté. Sinon la prop est **masquée** (« shadowing ») et les deux copies divergent.
+
+## ✅ La correction (3 changements dans `Accueil.jsx`)
+
+1. **Récupère** `trilogies` et `setTrilogies` dans les props :
+```jsx
+function Accueil({ trilogies, setTrilogies, likes, setLikes }) {
+```
+
+2. **Supprime** la ligne qui recrée la liste en local :
+```jsx
+const [trilogies, setTrilogies] = useState(initialData);   // ❌ à enlever
+```
+
+3. **Supprime** l'import devenu inutile (c'est `App` qui connaît `initialData`, plus `Accueil`) :
+```jsx
+import { initialData } from "../data";   // ❌ à enlever
+```
+
+Tout le reste de `Accueil` (`ajouter`, `liker`, `affichees`, le `.map`) marche **sans changement** : il utilisait déjà `trilogies` / `setTrilogies`, qui viennent maintenant des props.
+
+**Test :** ajoute une trilogie → clique « Voir les détails » dessus → **elle s'affiche** (au lieu de « Introuvable »). Le bouton « au hasard » peut aussi tomber dessus et l'afficher.
+
+## 🧹 Pendant qu'on y est — 3 petits restes à nettoyer
+
+1. `console.log("test")` en haut d'`Accueil` → on enlève les logs de debug.
+2. Le `<button> </button>` vide juste avant le `<select>` → il ne sert à rien, à supprimer.
+3. Le fragment `<>...</>` autour du seul `<select>` → inutile quand il n'y a qu'un élément, tu peux laisser le `<select>` seul.
+
+> 💡 À retenir : une prop et un `useState` du même nom = piège classique. La source de vérité doit être **unique** — ici, dans `App`. `Accueil` ne fait que lire/écrire dedans via les props.