diff --git a/mon-projet/src/App.jsx b/mon-projet/src/App.jsx
index 0663840..564ba7b 100644
--- a/mon-projet/src/App.jsx
+++ b/mon-projet/src/App.jsx
@@ -2,6 +2,7 @@ import "./App.css";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Carte from "./components/Carte";
+import { useState } from "react";
 const trilogies = [
   {
     id: 1,
@@ -31,10 +32,32 @@ const trilogies = [
 ];
 
 function App() {
+  const [recherche, setRecherche] = useState("");
+  const [total, setTotal] = useState(0);
+  const filtrees = trilogies.filter((t) =>
+    t.nom.toLowerCase().includes(recherche.toLowerCase()),
+  );
   return (
     <div className="body">
-      <Header />
+      <p>👍 Total de likes : {total}</p>
       {trilogies.map((trilo) => (
+        <Carte
+          key={trilo.id}
+          nom={trilo.nom}
+          onLike={() => setTotal((t) => t + 1)} // 👈 on passe une FONCTION en prop
+        />
+      ))}
+      <Header />
+      <input
+        type="search"
+        placeholder="Rechercher une trilogie…"
+        value={recherche}
+        onChange={(e) => setRecherche(e.target.value)}
+      />
+
+      {filtrees.length === 0 && <p>Aucune trilogie trouvée </p>}
+
+      {filtrees.map((trilo) => (
         <Carte key={trilo.id} titre={trilo.nom} niveaux={trilo.niveaux} />
       ))}
       <Footer />