fix: add dark backgrounds to all internal pages + RGPD cookie banner

- login, register, candidature, cgv, confidentialite, mentions-legales:
  add bg-dark class so white text is visible on dark background
- admin shell + protected layout: same fix for admin/dashboard pages
- CookieBanner: update styling to match navy/orange branding, add RGPD
  compliance text, include Accepter/Refuser buttons, link to confidentialite
- layout.tsx: import and render CookieBanner globally

https://claude.ai/code/session_01V8YAjpqRQ3bfBYsABYsEgo

app/(protected)/layout.tsx

@@ -38,7 +38,7 @@ export default async function DashboardLayout({
   }
 
   return (
-    <div className="flex min-h-screen">
+    <div className="flex min-h-screen bg-dark">
       <Sidebar user={profile} />
       <main className="flex-1 p-6 md:p-10 overflow-y-auto">{children}</main>
     </div>

app/candidature/page.tsx

@@ -108,7 +108,7 @@ export default function CandidaturePage() {
   };
 
   return (
-    <main className="min-h-screen py-20 md:py-32">
+    <main className="min-h-screen py-20 md:py-32 bg-dark">
       <div className="max-w-2xl mx-auto px-4 sm:px-6">
         {/* Header */}
         <div className="text-center mb-12">

app/cgv/page.tsx

@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function CGV() {
   return (
-    <main className="min-h-screen py-20 md:py-32">
+    <main className="min-h-screen py-20 md:py-32 bg-dark">
       <div className="max-w-3xl mx-auto px-4 sm:px-6">
         <Link href="/" className="inline-flex items-center gap-2 mb-10 text-white/40 hover:text-white text-sm transition-colors">
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">

app/confidentialite/page.tsx

@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function Confidentialite() {
   return (
-    <main className="min-h-screen py-20 md:py-32">
+    <main className="min-h-screen py-20 md:py-32 bg-dark">
       <div className="max-w-3xl mx-auto px-4 sm:px-6">
         <Link href="/" className="inline-flex items-center gap-2 mb-10 text-white/40 hover:text-white text-sm transition-colors">
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">

app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import CookieBanner from "@/components/CookieBanner";
 import "./globals.css";
 
 const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || "https://hooklab.eu";
@@ -224,6 +225,7 @@ export default function RootLayout({
           Aller au contenu principal
         </a>
         {children}
+        <CookieBanner />
       </body>
     </html>
   );

app/login/page.tsx

@@ -124,7 +124,7 @@ function LoginForm() {
 
 export default function LoginPage() {
   return (
-    <main className="min-h-screen flex items-center justify-center px-4">
+    <main className="min-h-screen flex items-center justify-center px-4 bg-dark">
       <div className="w-full max-w-md">
         {/* Logo */}
         <div className="text-center mb-8">

app/register/page.tsx

@@ -64,7 +64,7 @@ export default function RegisterPage() {
   };
 
   return (
-    <main className="min-h-screen flex items-center justify-center px-4 py-12">
+    <main className="min-h-screen flex items-center justify-center px-4 py-12 bg-dark">
       <div className="w-full max-w-md">
         {/* Logo */}
         <div className="text-center mb-8">

components/CookieBanner.tsx

@@ -9,7 +9,9 @@ export default function CookieBanner() {
   useEffect(() => {
     const consent = localStorage.getItem("hooklab_cookie_consent");
     if (!consent) {
-      setVisible(true);
+      // Small delay so it doesn't flash on page load
+      const timer = setTimeout(() => setVisible(true), 800);
+      return () => clearTimeout(timer);
     }
   }, []);
 
@@ -27,32 +29,46 @@ export default function CookieBanner() {
 
   return (
     <div
-      className="fixed bottom-0 left-0 right-0 z-[90] p-4 sm:p-6"
+      className="fixed bottom-0 left-0 right-0 z-[9999] p-4 md:p-6 animate-fade-in-up"
       role="dialog"
       aria-label="Gestion des cookies"
     >
-      <div className="max-w-2xl mx-auto bg-dark-light border border-dark-border rounded-2xl p-4 sm:p-6 shadow-2xl">
+      <div className="max-w-3xl mx-auto bg-white rounded-2xl shadow-2xl border border-border p-5 md:p-6">
-        <p className="text-white/80 text-sm leading-relaxed mb-4">
+        <div className="flex flex-col md:flex-row md:items-center gap-4">
-          Ce site utilise uniquement des <strong className="text-white">cookies techniques</strong> n&eacute;cessaires
+          {/* Text */}
-          au fonctionnement de la plateforme (authentification, session). Aucun cookie publicitaire
+          <div className="flex-1">
-          ou de tra&ccedil;age n&rsquo;est utilis&eacute;.{" "}
+            <p className="text-navy text-sm font-semibold mb-1">
-          <Link href="/confidentialite" className="text-primary hover:underline">
+              Ce site utilise des cookies
-            Politique de confidentialit&eacute;
+            </p>
+            <p className="text-text-light text-xs leading-relaxed">
+              Nous utilisons uniquement des <strong className="text-text">cookies techniques</strong> n&eacute;cessaires
+              au bon fonctionnement du site (authentification, pr&eacute;f&eacute;rences de session).
+              Aucun cookie publicitaire ou de tra&ccedil;age n&rsquo;est utilis&eacute;.
+              Conform&eacute;ment au RGPD, vous pouvez accepter ou refuser leur utilisation.{" "}
+              <Link
+                href="/confidentialite"
+                className="text-orange hover:underline font-medium"
+              >
+                En savoir plus
               </Link>
             </p>
-        <div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
+          </div>
-          <button
+
-            onClick={handleAccept}
+          {/* Buttons */}
-            className="px-5 py-2.5 gradient-bg text-white text-sm font-semibold rounded-xl hover:opacity-90 transition-opacity cursor-pointer"
+          <div className="flex items-center gap-3 shrink-0">
-          >
-            Accepter
-          </button>
             <button
               onClick={handleRefuse}
-            className="px-5 py-2.5 bg-dark-lighter border border-dark-border text-white/60 text-sm font-medium rounded-xl hover:text-white transition-colors cursor-pointer"
+              className="px-4 py-2.5 text-text-light hover:text-text text-sm font-medium rounded-xl border border-border hover:bg-bg-muted transition-colors cursor-pointer"
             >
               Refuser
             </button>
+            <button
+              onClick={handleAccept}
+              className="px-5 py-2.5 bg-orange hover:bg-orange-hover text-white text-sm font-semibold rounded-xl transition-colors cursor-pointer"
+            >
+              Accepter
+            </button>
+          </div>
         </div>
       </div>
     </div>

components/admin/AdminShell.tsx

@@ -63,7 +63,7 @@ export default function AdminShell({ children, adminName, adminEmail }: AdminShe
   };
 
   return (
-    <div className="flex min-h-screen">
+    <div className="flex min-h-screen bg-dark">
       {/* Sidebar */}
       <aside className="w-64 min-h-screen bg-dark-light border-r border-dark-border p-6 flex flex-col">
         {/* Logo */}