From d30f38c49cee3e6bfdc5ff7d31a3d5e9e1ab75c4 Mon Sep 17 00:00:00 2001
From: Mouignihazi <165266469+Mouignihazi@users.noreply.github.com>
Date: Wed, 12 Aug 2026 00:26:27 +0200
Subject: [PATCH] =?UTF-8?q?RGPD=20:=20ajout=20CookieBanner=20+=20mise=20?=
 =?UTF-8?q?=C3=A0=20jour=20App.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                        |  2 +
 src/components/CookieBanner.tsx    | 41 ++++++++++++++++++
 src/styles/CookieBanner.module.css | 69 ++++++++++++++++++++++++++++++
 3 files changed, 112 insertions(+)
 create mode 100644 src/components/CookieBanner.tsx
 create mode 100644 src/styles/CookieBanner.module.css

diff --git a/src/App.tsx b/src/App.tsx
index b4f96d2..b7dbcdd 100644
--- a/src/App.tsx
+++ b/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>
   );
 }
\ No newline at end of file
diff --git a/src/components/CookieBanner.tsx b/src/components/CookieBanner.tsx
new file mode 100644
index 0000000..6384759
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/styles/CookieBanner.module.css b/src/styles/CookieBanner.module.css
new file mode 100644
index 0000000..3a28bb8
--- /dev/null
+++ b/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;
+  }
+}