RGPD : ajout CookieBanner + mise à jour App.tsx

src/App.tsx

@@ -13,6 +13,7 @@ import MentionsLegales from "./pages/MentionsLegales";
 
 import Sidebar from "./components/Sidebar";
 import Footer from "./components/Footer";
+import CookieBanner from "./components/CookieBanner";
 
 import styles from "./App.module.css";
 
@@ -158,6 +159,7 @@ export default function App() {
         </main>
       </div>
       <Footer onNavClick={handleNavClick} />
+      <CookieBanner />
     </div>
   );
 }

src/components/CookieBanner.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+
+import styles from "../styles/CookieBanner.module.css";
+
+const COOKIE_CONSENT_KEY = "cookieConsentAccepted";
+
+export default function CookieBanner() {
+  const [accepted, setAccepted] = useState<boolean>(() => {
+    return typeof window !== "undefined" && window.localStorage.getItem(COOKIE_CONSENT_KEY) === "true";
+  });
+
+  const handleAccept = () => {
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(COOKIE_CONSENT_KEY, "true");
+    }
+    setAccepted(true);
+  };
+
+  if (accepted) {
+    return null;
+  }
+
+  return (
+    <div className={styles.banner} role="dialog" aria-live="polite">
+      <div className={styles.bannerText}>
+        Ce site utilise des cookies pour améliorer votre expérience utilisateur et analyser le trafic.
+        En poursuivant votre navigation, vous acceptez l'utilisation des cookies.
+      </div>
+
+      <div className={styles.actions}>
+        <Link to="/mentions-legales" className={styles.link}>
+          En savoir plus
+        </Link>
+        <button className={styles.button} onClick={handleAccept}>
+          Accepter
+        </button>
+      </div>
+    </div>
+  );
+}

src/styles/CookieBanner.module.css

@@ -0,0 +1,69 @@
+.banner {
+  position: fixed;
+  bottom: 1rem;
+  left: 1rem;
+  right: 1rem;
+  z-index: 1000;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  justify-content: space-between;
+  background: rgba(15, 23, 42, 0.95);
+  color: #f8fafc;
+  padding: 1rem 1.25rem;
+  border-radius: 1rem;
+  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
+  backdrop-filter: blur(10px);
+}
+
+.bannerText {
+  flex: 1 1 280px;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+
+.button {
+  background: #22c55e;
+  color: white;
+  border: none;
+  border-radius: 9999px;
+  padding: 0.75rem 1.25rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.button:hover {
+  background: #16a34a;
+}
+
+.link {
+  color: #f8fafc;
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+@media (max-width: 640px) {
+  .banner {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .actions {
+    justify-content: stretch;
+  }
+
+  .button,
+  .link {
+    width: 100%;
+    text-align: center;
+  }
+}