From 85c744defa3eeecbdec1bcbcf89b0817ef99910b Mon Sep 17 00:00:00 2001
From: Azmog <80716388+AzmogEx@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:09:47 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20socle=20de=20refonte=20au=20S?=
 =?UTF-8?q?yst=C3=A8me=20de=20Design=20de=20l'=C3=89tat=20(DSFR)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- charge le DSFR (CSS/JS officiels) en statique via public/dsfr + postinstall
- en-tête officiel (bloc Marianne « République Française » + nom de service)
- pied de page officiel DSFR (liens institutionnels, licence etalab)
- page d'accueil refondue (hero, fr-card, fr-tile, fr-callout, fr-btn)
- composant Button mappé sur fr-btn
- assets DSFR hors git (régénérés par `npm install`)

Build OK (19 routes). Pages internes encore en Tailwind : conversion à poursuivre.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/.gitignore                       |   3 +
 frontend/package-lock.json                |  39 ++
 frontend/package.json                     |   4 +-
 frontend/scripts/copy-dsfr.mjs            |  19 +
 frontend/src/app/layout.tsx               |  39 +-
 frontend/src/app/page.tsx                 | 702 +++++-----------------
 frontend/src/components/layout/Footer.tsx | 143 +++--
 frontend/src/components/layout/Header.tsx | 307 ++++------
 frontend/src/components/ui/Button.tsx     |  69 +--
 9 files changed, 463 insertions(+), 862 deletions(-)
 create mode 100644 frontend/scripts/copy-dsfr.mjs

diff --git a/frontend/.gitignore b/frontend/.gitignore
index 7b8da95..afcae07 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -40,3 +40,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Assets DSFR copiés par le postinstall (régénérés depuis node_modules)
+/public/dsfr
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1f7173e..d79ec61 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@codegouvfr/react-dsfr": "^1.32.4",
         "@tanstack/react-query": "^5.90.21",
         "axios": "^1.13.6",
         "lucide-react": "^0.577.0",
@@ -370,6 +371,29 @@
         "specificity": "bin/cli.js"
       }
     },
+    "node_modules/@codegouvfr/react-dsfr": {
+      "version": "1.32.4",
+      "resolved": "https://registry.npmjs.org/@codegouvfr/react-dsfr/-/react-dsfr-1.32.4.tgz",
+      "integrity": "sha512-yhjPqPObB3BsehZTRhJZ9qXwBRT2RZl0cn6hG838MlkPntTE5H5w0vU05KmKcdDBnQ0wDV59G7nnZrpKZQlNuA==",
+      "license": "MIT",
+      "dependencies": {
+        "tsafe": "^1.8.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "bin": {
+        "copy-dsfr-to-public": "bin/copy-dsfr-to-public.js",
+        "only-include-used-icons": "bin/only-include-used-icons.js",
+        "react-dsfr": "bin/react-dsfr.js"
+      },
+      "peerDependencies": {
+        "@gouvfr/dsfr-chart": "^1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@gouvfr/dsfr-chart": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@csstools/color-helpers": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
@@ -8001,6 +8025,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/tsafe": {
+      "version": "1.8.12",
+      "resolved": "https://registry.npmjs.org/tsafe/-/tsafe-1.8.12.tgz",
+      "integrity": "sha512-nFRqW0ttu/2o6XTXsHiVZWJBCOaxhVqZLg7dgs3coZNsCMPXPfwz+zPHAQA+70fNnVJLAPg1EgGIqK9Q84tvAw==",
+      "license": "MIT"
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -8964,6 +8994,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5b8a183..3cf254e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,9 +7,11 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
-    "test": "vitest run"
+    "test": "vitest run",
+    "postinstall": "node scripts/copy-dsfr.mjs"
   },
   "dependencies": {
+    "@codegouvfr/react-dsfr": "^1.32.4",
     "@tanstack/react-query": "^5.90.21",
     "axios": "^1.13.6",
     "lucide-react": "^0.577.0",
diff --git a/frontend/scripts/copy-dsfr.mjs b/frontend/scripts/copy-dsfr.mjs
new file mode 100644
index 0000000..c84fade
--- /dev/null
+++ b/frontend/scripts/copy-dsfr.mjs
@@ -0,0 +1,19 @@
+// Copie les assets du Système de Design de l'État (DSFR) vers public/dsfr,
+// pour les servir en statique (CSS, JS, polices Marianne, icônes).
+// Lancé automatiquement après `npm install` (script postinstall).
+import { cpSync, rmSync, existsSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const src = join(root, "node_modules", "@codegouvfr", "react-dsfr", "dsfr");
+const dest = join(root, "public", "dsfr");
+
+if (!existsSync(src)) {
+  console.warn("[copy-dsfr] Source DSFR introuvable, étape ignorée.");
+  process.exit(0);
+}
+
+rmSync(dest, { recursive: true, force: true });
+cpSync(src, dest, { recursive: true });
+console.log("[copy-dsfr] Assets DSFR copiés vers public/dsfr.");
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 67b17c4..0feadc8 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,26 +1,17 @@
 import type { Metadata } from "next";
-import { Inter, Poppins } from "next/font/google";
+import Script from "next/script";
 import "./globals.css";
 import Providers from "@/components/Providers";
 
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700"],
-  display: "swap",
-});
-
-const poppins = Poppins({
-  variable: "--font-poppins",
-  subsets: ["latin"],
-  weight: ["500", "600", "700"],
-  display: "swap",
-});
-
 export const metadata: Metadata = {
-  title: "CESIZen - Votre sant\u00e9 mentale",
+  title: "CESIZen - Votre santé mentale",
   description:
-    "Plateforme de gestion du stress et suivi \u00e9motionnel. Suivez vos \u00e9motions, consultez des ressources et prenez soin de votre sant\u00e9 mentale.",
+    "Plateforme publique de gestion du stress et de suivi émotionnel. Suivez vos émotions, consultez des ressources et prenez soin de votre santé mentale.",
+  icons: {
+    icon: [{ url: "/dsfr/favicon/favicon.svg", type: "image/svg+xml" }],
+    shortcut: ["/dsfr/favicon/favicon.ico"],
+    apple: [{ url: "/dsfr/favicon/apple-touch-icon.png" }],
+  },
 };
 
 export default function RootLayout({
@@ -29,9 +20,19 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="fr" suppressHydrationWarning>
-      <body className={`${inter.variable} ${poppins.variable} antialiased`}>
+    <html lang="fr" data-fr-scheme="system" suppressHydrationWarning>
+      <body>
+        {/* Système de Design de l'État (DSFR) — feuilles de style officielles */}
+        <link rel="stylesheet" href="/dsfr/dsfr.min.css" />
+        <link rel="stylesheet" href="/dsfr/utility/utility.min.css" />
         <Providers>{children}</Providers>
+        {/* JS DSFR : comportements interactifs (menu, navigation, modales) */}
+        <Script src="/dsfr/dsfr.module.min.js" type="module" strategy="afterInteractive" />
+        <Script
+          src="/dsfr/dsfr.nomodule.min.js"
+          noModule
+          strategy="afterInteractive"
+        />
       </body>
     </html>
   );
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index f9fce5a..f949775 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,592 +1,202 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import Link from 'next/link';
-import {
-  BookOpen,
-  Heart,
-  BarChart3,
-  Shield,
-  ArrowRight,
-  Sparkles,
-  Brain,
-  TrendingUp,
-  Users,
-  CheckCircle2,
-  Star,
-  Zap,
-  Clock,
-  SmilePlus,
-} from 'lucide-react';
-
-// Hook d'animation au scroll (Intersection Observer)
-function useScrollReveal() {
-  const ref = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          el.classList.add('animate-in');
-          observer.unobserve(el);
-        }
-      },
-      { threshold: 0.15 }
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-  return ref;
-}
-
-function RevealSection({ children, className = '', delay = 0 }: { children: React.ReactNode; className?: string; delay?: number }) {
-  const ref = useScrollReveal();
-  return (
-    <div
-      ref={ref}
-      className={`reveal-section ${className}`}
-      style={{ transitionDelay: `${delay}ms` }}
-    >
-      {children}
-    </div>
-  );
-}
+import Link from "next/link";
 
 export default function HomePage() {
   return (
-    <div className="min-h-screen overflow-hidden">
-      <style jsx global>{`
-        .reveal-section {
-          opacity: 0;
-          transform: translateY(40px);
-          transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
-        }
-        .reveal-section.animate-in {
-          opacity: 1;
-          transform: translateY(0);
-        }
-        @keyframes float {
-          0%, 100% { transform: translateY(0px) rotate(0deg); }
-          50% { transform: translateY(-20px) rotate(2deg); }
-        }
-        @keyframes float-delay {
-          0%, 100% { transform: translateY(0px) rotate(0deg); }
-          50% { transform: translateY(-15px) rotate(-2deg); }
-        }
-        @keyframes gradient-shift {
-          0%, 100% { background-position: 0% 50%; }
-          50% { background-position: 100% 50%; }
-        }
-        @keyframes pulse-ring {
-          0% { transform: scale(0.8); opacity: 0.5; }
-          50% { transform: scale(1.1); opacity: 0; }
-          100% { transform: scale(0.8); opacity: 0; }
-        }
-        @keyframes count-up {
-          from { opacity: 0; transform: translateY(10px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-        .float-anim { animation: float 6s ease-in-out infinite; }
-        .float-anim-delay { animation: float-delay 7s ease-in-out infinite; }
-        .gradient-text {
-          background: linear-gradient(135deg, #06c656, #fce117, #06c656);
-          background-size: 200% 200%;
-          animation: gradient-shift 4s ease infinite;
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-          background-clip: text;
-        }
-      `}</style>
-
-      {/* ─── Hero Section ─── */}
-      <section className="relative overflow-hidden bg-linear-to-br from-candlelight-50 via-white to-malachite-50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 min-h-[90vh] flex items-center">
-        {/* Orbes décoratives */}
-        <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-125 h-125 bg-candlelight-200/40 dark:bg-candlelight-500/10 rounded-full blur-[100px] float-anim" />
-          <div className="absolute -bottom-40 -left-40 w-125 h-125 bg-malachite-200/40 dark:bg-malachite-500/10 rounded-full blur-[100px] float-anim-delay" />
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-150 h-150 bg-candlelight-100/20 dark:bg-candlelight-500/5 rounded-full blur-[120px]" />
-        </div>
-
-        {/* Grille de fond */}
-        <div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.03)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-size-[60px_60px] pointer-events-none" />
-
-        <div className="relative max-w-6xl mx-auto px-4 py-20 sm:py-32 w-full">
-          <div className="text-center">
-            <RevealSection>
-              <div className="inline-flex items-center gap-2 bg-white/70 dark:bg-gray-800/70 backdrop-blur-md rounded-full px-5 py-2.5 mb-8 border border-gray-200/80 dark:border-gray-700/80 shadow-sm">
-                <Sparkles className="w-4 h-4 text-candlelight-500" />
-                <span className="text-sm font-medium text-gray-600 dark:text-gray-400">
-                  Plateforme du Ministère des Solidarités et de la Santé
-                </span>
-              </div>
-            </RevealSection>
-
-            <RevealSection delay={100}>
-              <h1 className="font-display text-6xl sm:text-7xl lg:text-8xl font-bold tracking-tight mb-6">
-                <span className="gradient-text">CESI</span>
-                <span className="text-gray-900 dark:text-white">ZEN</span>
-              </h1>
-            </RevealSection>
-
-            <RevealSection delay={200}>
-              <p className="text-xl sm:text-2xl lg:text-3xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-4 font-light">
-                Votre compagnon pour une{' '}
-                <span className="font-semibold text-malachite-600 dark:text-malachite-400">santé mentale</span>{' '}
-                épanouie
-              </p>
-            </RevealSection>
-
-            <RevealSection delay={300}>
-              <p className="text-base sm:text-lg text-gray-500 dark:text-gray-400 max-w-xl mx-auto mb-12 leading-relaxed">
-                Suivez vos émotions, comprenez vos tendances et prenez soin de vous
-                au quotidien avec des outils simples, bienveillants et confidentiels.
-              </p>
-            </RevealSection>
-
-            <RevealSection delay={400}>
-              <div className="flex flex-col sm:flex-row gap-4 justify-center mb-16">
-                <Link
-                  href="/inscription"
-                  className="group inline-flex items-center justify-center gap-2 bg-candlelight-500 hover:bg-candlelight-400 text-black font-semibold px-8 py-4 rounded-2xl transition-all duration-300 hover:shadow-xl hover:shadow-candlelight-500/30 hover:-translate-y-0.5 text-lg"
-                >
-                  Commencer gratuitement
-                  <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
+    <>
+      {/* ─── Hero ─── */}
+      <section className="fr-container fr-py-8w">
+        <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
+          <div className="fr-col-12 fr-col-md-7">
+            <h1>
+              CESIZen, prenez soin de votre santé mentale
+            </h1>
+            <p className="fr-text--lead">
+              Une plateforme publique pour suivre vos émotions au quotidien,
+              comprendre vos tendances et accéder à des ressources fiables sur la
+              prévention du stress.
+            </p>
+            <ul className="fr-btns-group fr-btns-group--inline-md">
+              <li>
+                <Link className="fr-btn fr-btn--lg" href="/inscription">
+                  Créer un compte gratuitement
                 </Link>
+              </li>
+              <li>
                 <Link
+                  className="fr-btn fr-btn--lg fr-btn--secondary"
                   href="/informations"
-                  className="inline-flex items-center justify-center gap-2 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm hover:bg-white dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 font-semibold px-8 py-4 rounded-2xl border-2 border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 text-lg"
                 >
-                  <BookOpen className="w-5 h-5" />
-                  En savoir plus
+                  Consulter les ressources
                 </Link>
-              </div>
-            </RevealSection>
-
-            {/* Mini stats */}
-            <RevealSection delay={500}>
-              <div className="flex flex-wrap justify-center gap-8 sm:gap-12">
-                <MiniStat icon={<Users className="w-5 h-5" />} value="100%" label="Gratuit" />
-                <MiniStat icon={<Shield className="w-5 h-5" />} value="RGPD" label="Conforme" />
-                <MiniStat icon={<Clock className="w-5 h-5" />} value="2 min" label="Pour commencer" />
-              </div>
-            </RevealSection>
+              </li>
+            </ul>
+          </div>
+          <div className="fr-col-12 fr-col-md-5">
+            <div className="fr-callout">
+              <p className="fr-callout__title">Pourquoi suivre ses émotions ?</p>
+              <p className="fr-callout__text">
+                Nommer une émotion réduit son intensité (affect labeling, UCLA).
+                Le suivi régulier aide à identifier ses tendances et à mieux gérer
+                son stress.
+              </p>
+            </div>
           </div>
-        </div>
-
-        {/* Séparateur vague */}
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg viewBox="0 0 1440 80" fill="none" className="w-full h-auto" preserveAspectRatio="none">
-            <path d="M0 80L60 68C120 56 240 32 360 24C480 16 600 24 720 32C840 40 960 48 1080 44C1200 40 1320 24 1380 16L1440 8V80H1380C1320 80 1200 80 1080 80C960 80 840 80 720 80C600 80 480 80 360 80C240 80 120 80 60 80H0Z" className="fill-white dark:fill-gray-950" />
-          </svg>
         </div>
       </section>
 
       {/* ─── Comment ça marche ─── */}
-      <section className="py-24 bg-white dark:bg-gray-950">
-        <div className="max-w-6xl mx-auto px-4">
-          <RevealSection>
-            <div className="text-center mb-20">
-              <span className="inline-flex items-center gap-2 text-malachite-600 dark:text-malachite-400 font-semibold text-sm uppercase tracking-wider mb-4">
-                <Zap className="w-4 h-4" />
-                Simple et rapide
-              </span>
-              <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
-                Comment ça marche ?
-              </h2>
-              <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
-                Trois étapes simples pour prendre soin de votre bien-être émotionnel.
-              </p>
-            </div>
-          </RevealSection>
-
-          <div className="grid md:grid-cols-3 gap-8 lg:gap-12 relative">
-            {/* Ligne de connexion */}
-            <div className="hidden md:block absolute top-24 left-[20%] right-[20%] h-0.5 bg-linear-to-r from-candlelight-300 via-malachite-300 to-candlelight-300 dark:from-candlelight-800 dark:via-malachite-800 dark:to-candlelight-800" />
-
-            <RevealSection delay={0}>
-              <StepCard
-                step={1}
-                icon={<SmilePlus className="w-7 h-7" />}
-                title="Identifiez votre émotion"
-                description="Choisissez parmi un panel d'émotions et sous-émotions. Notez l'intensité ressentie sur une échelle de 1 à 10."
-                color="candlelight"
-              />
-            </RevealSection>
-            <RevealSection delay={150}>
-              <StepCard
-                step={2}
-                icon={<Brain className="w-7 h-7" />}
-                title="Ajoutez du contexte"
-                description="Notez ce qui a déclenché cette émotion. Même quelques mots suffisent à mieux comprendre vos tendances."
-                color="malachite"
-              />
-            </RevealSection>
-            <RevealSection delay={300}>
-              <StepCard
-                step={3}
-                icon={<TrendingUp className="w-7 h-7" />}
-                title="Suivez votre évolution"
-                description="Consultez vos rapports visuels pour identifier vos tendances émotionnelles sur la semaine, le mois ou l'année."
-                color="candlelight"
-              />
-            </RevealSection>
-          </div>
-        </div>
-      </section>
-
-      {/* ─── Features Section ─── */}
-      <section className="py-24 bg-gray-50 dark:bg-gray-900/50 relative overflow-hidden">
-        <div className="absolute top-0 right-0 w-96 h-96 bg-candlelight-200/20 dark:bg-candlelight-500/5 rounded-full blur-[100px] pointer-events-none" />
-        <div className="absolute bottom-0 left-0 w-96 h-96 bg-malachite-200/20 dark:bg-malachite-500/5 rounded-full blur-[100px] pointer-events-none" />
-
-        <div className="max-w-6xl mx-auto px-4 relative">
-          <RevealSection>
-            <div className="text-center mb-20">
-              <span className="inline-flex items-center gap-2 text-candlelight-600 dark:text-candlelight-400 font-semibold text-sm uppercase tracking-wider mb-4">
-                <Star className="w-4 h-4" />
-                Fonctionnalités
-              </span>
-              <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
-                Tout ce dont vous avez besoin
-              </h2>
-              <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
-                Des outils conçus pour vous accompagner au quotidien dans la gestion
-                de votre bien-être émotionnel.
-              </p>
-            </div>
-          </RevealSection>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <section className="fr-background-alt--grey fr-py-8w">
+        <div className="fr-container">
+          <h2>Comment ça marche ?</h2>
+          <p className="fr-text--lead fr-mb-6w">
+            Trois étapes simples pour prendre soin de votre bien-être émotionnel.
+          </p>
+          <div className="fr-grid-row fr-grid-row--gutters">
             {[
               {
-                icon: <Heart className="w-7 h-7" />,
-                title: "Journal d'émotions",
-                description: "Enregistrez vos émotions quotidiennes et suivez leur évolution dans le temps grâce à un journal intime sécurisé.",
-                color: 'malachite' as const,
-                delay: 0,
+                step: "1",
+                title: "Identifiez votre émotion",
+                desc: "Choisissez parmi un référentiel d'émotions et sous-émotions, puis notez l'intensité ressentie de 1 à 10.",
               },
               {
-                icon: <BarChart3 className="w-7 h-7" />,
-                title: 'Rapports visuels',
-                description: "Visualisez vos tendances grâce à des graphiques clairs : répartition, évolution et intensité de vos émotions.",
-                color: 'candlelight' as const,
-                delay: 100,
+                step: "2",
+                title: "Ajoutez du contexte",
+                desc: "Notez ce qui a déclenché cette émotion. Quelques mots suffisent à mieux comprendre vos tendances.",
               },
               {
-                icon: <BookOpen className="w-7 h-7" />,
-                title: 'Ressources fiables',
-                description: "Accédez à des contenus validés par des experts sur la santé mentale, la gestion du stress et le bien-être.",
-                color: 'malachite' as const,
-                delay: 200,
+                step: "3",
+                title: "Suivez votre évolution",
+                desc: "Consultez des rapports visuels (semaine, mois, trimestre, année) pour identifier vos tendances.",
               },
-              {
-                icon: <Shield className="w-7 h-7" />,
-                title: 'Données protégées',
-                description: "Vos données sont chiffrées et protégées conformément au RGPD. Vous gardez le contrôle total sur vos informations.",
-                color: 'candlelight' as const,
-                delay: 300,
-              },
-            ].map((feature) => (
-              <RevealSection key={feature.title} delay={feature.delay}>
-                <FeatureCard {...feature} />
-              </RevealSection>
+            ].map((s) => (
+              <div className="fr-col-12 fr-col-md-4" key={s.step}>
+                <div className="fr-card fr-enlarge-link">
+                  <div className="fr-card__body">
+                    <div className="fr-card__content">
+                      <h3 className="fr-card__title">
+                        <span className="fr-badge fr-badge--blue-ecume fr-mb-1w">
+                          Étape {s.step}
+                        </span>
+                        <br />
+                        {s.title}
+                      </h3>
+                      <p className="fr-card__desc">{s.desc}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* ─── Témoignages / Social Proof ─── */}
-      <section className="py-24 bg-white dark:bg-gray-950">
-        <div className="max-w-6xl mx-auto px-4">
-          <RevealSection>
-            <div className="text-center mb-16">
-              <span className="inline-flex items-center gap-2 text-malachite-600 dark:text-malachite-400 font-semibold text-sm uppercase tracking-wider mb-4">
-                <Heart className="w-4 h-4" />
-                Pourquoi CESIZen ?
-              </span>
-              <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
-                Conçu pour votre bien-être
-              </h2>
+      {/* ─── Fonctionnalités ─── */}
+      <section className="fr-container fr-py-8w">
+        <h2>Tout ce dont vous avez besoin</h2>
+        <p className="fr-text--lead fr-mb-6w">
+          Des outils conçus pour vous accompagner dans la gestion de votre
+          bien-être émotionnel.
+        </p>
+        <div className="fr-grid-row fr-grid-row--gutters">
+          {[
+            {
+              icon: "fr-icon-heart-line",
+              title: "Journal d'émotions",
+              desc: "Enregistrez vos émotions quotidiennes et suivez leur évolution dans un journal sécurisé.",
+            },
+            {
+              icon: "fr-icon-line-chart-line",
+              title: "Rapports visuels",
+              desc: "Visualisez vos tendances : répartition, évolution et intensité de vos émotions.",
+            },
+            {
+              icon: "fr-icon-book-2-line",
+              title: "Ressources fiables",
+              desc: "Accédez à des contenus validés sur la santé mentale et la gestion du stress.",
+            },
+            {
+              icon: "fr-icon-shield-line",
+              title: "Données protégées",
+              desc: "Vos données sont protégées conformément au RGPD. Vous en gardez le contrôle total.",
+            },
+          ].map((f) => (
+            <div className="fr-col-12 fr-col-md-6 fr-col-lg-3" key={f.title}>
+              <div className="fr-tile fr-tile--vertical">
+                <div className="fr-tile__body">
+                  <div className="fr-tile__content">
+                    <h3 className="fr-tile__title">
+                      <span
+                        className={`${f.icon} fr-mr-1w`}
+                        aria-hidden="true"
+                      />
+                      {f.title}
+                    </h3>
+                    <p className="fr-tile__detail">{f.desc}</p>
+                  </div>
+                </div>
+              </div>
             </div>
-          </RevealSection>
+          ))}
+        </div>
+      </section>
 
-          <div className="grid md:grid-cols-3 gap-8">
+      {/* ─── Engagements ─── */}
+      <section className="fr-background-alt--grey fr-py-8w">
+        <div className="fr-container">
+          <h2>Une application pensée pour vous</h2>
+          <p className="fr-text--lead fr-mb-4w">
+            CESIZen est édité pour le Ministère des Solidarités et de la Santé :
+            un outil fiable, accessible et respectueux de votre vie privée.
+          </p>
+          <div className="fr-grid-row fr-grid-row--gutters">
             {[
-              {
-                quote: "Prendre conscience de ses émotions est le premier pas vers une meilleure santé mentale.",
-                author: "Approche scientifique",
-                detail: "Basé sur les travaux de la psychologie positive",
-                delay: 0,
-              },
-              {
-                quote: "Le simple fait de nommer une émotion réduit son intensité de 50%. C'est scientifiquement prouvé.",
-                author: "Affect Labeling",
-                detail: "Étude UCLA, Lieberman et al.",
-                delay: 150,
-              },
-              {
-                quote: "L'écriture expressive améliore la santé physique et mentale sur le long terme.",
-                author: "Journaling thérapeutique",
-                detail: "Méthode Pennebaker",
-                delay: 300,
-              },
+              "Totalement gratuit et sans publicité",
+              "Conforme RGPD — vos données vous appartiennent",
+              "Interface accessible et inclusive (RGAA)",
+              "Rapports visuels pour comprendre vos tendances",
+              "Contenus validés par des professionnels de santé",
+              "Export et suppression de vos données à tout moment",
             ].map((item) => (
-              <RevealSection key={item.author} delay={item.delay}>
-                <div className="bg-gray-50 dark:bg-gray-900 rounded-3xl p-8 h-full flex flex-col border border-gray-100 dark:border-gray-800 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
-                  <div className="flex gap-1 mb-4">
-                    {[1, 2, 3, 4, 5].map((s) => (
-                      <Star key={s} className="w-4 h-4 fill-candlelight-400 text-candlelight-400" />
-                    ))}
-                  </div>
-                  <blockquote className="text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-1 italic">
-                    &ldquo;{item.quote}&rdquo;
-                  </blockquote>
-                  <div>
-                    <p className="font-semibold text-gray-900 dark:text-white text-sm">{item.author}</p>
-                    <p className="text-gray-500 dark:text-gray-500 text-xs mt-1">{item.detail}</p>
-                  </div>
-                </div>
-              </RevealSection>
+              <div className="fr-col-12 fr-col-md-6" key={item}>
+                <p>
+                  <span
+                    className="fr-icon-check-line fr-mr-1w"
+                    aria-hidden="true"
+                  />
+                  {item}
+                </p>
+              </div>
             ))}
           </div>
-        </div>
-      </section>
-
-      {/* ─── Checklist Section ─── */}
-      <section className="py-24 bg-gray-50 dark:bg-gray-900/50">
-        <div className="max-w-6xl mx-auto px-4">
-          <div className="grid lg:grid-cols-2 gap-16 items-center">
-            <RevealSection>
-              <div>
-                <span className="inline-flex items-center gap-2 text-candlelight-600 dark:text-candlelight-400 font-semibold text-sm uppercase tracking-wider mb-4">
-                  <CheckCircle2 className="w-4 h-4" />
-                  Avantages
-                </span>
-                <h2 className="font-display text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-6">
-                  Une application pensée pour vous
-                </h2>
-                <p className="text-gray-500 dark:text-gray-400 mb-8 leading-relaxed">
-                  CESIZen est conçu par le Ministère des Solidarités et de la Santé
-                  pour offrir un outil fiable, accessible et respectueux de votre vie privée.
-                </p>
-                <div className="space-y-4">
-                  {[
-                    'Totalement gratuit et sans publicité',
-                    'Conforme RGPD — vos données vous appartiennent',
-                    'Interface accessible et inclusive (RGAA)',
-                    'Mode sombre pour un usage confortable',
-                    'Rapports visuels pour comprendre vos tendances',
-                    'Contenus validés par des professionnels de santé',
-                    'Export de vos données à tout moment',
-                    'Suppression de compte en un clic',
-                  ].map((item, i) => (
-                    <div key={i} className="flex items-start gap-3">
-                      <CheckCircle2 className="w-5 h-5 text-malachite-500 mt-0.5 shrink-0" />
-                      <span className="text-gray-700 dark:text-gray-300">{item}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </RevealSection>
-
-            <RevealSection delay={200}>
-              <div className="relative">
-                {/* Carte décorative simulant l'app */}
-                <div className="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl shadow-gray-200/50 dark:shadow-black/30 p-8 border border-gray-100 dark:border-gray-700">
-                  <div className="flex items-center gap-3 mb-6">
-                    <div className="w-10 h-10 bg-candlelight-500 rounded-xl flex items-center justify-center">
-                      <Heart className="w-5 h-5 text-black" />
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 dark:text-white text-sm">Comment vous sentez-vous ?</p>
-                      <p className="text-gray-500 text-xs">Aujourd&apos;hui à 14:30</p>
-                    </div>
-                  </div>
-                  <div className="grid grid-cols-4 gap-3 mb-6">
-                    {[
-                      { emoji: '😊', label: 'Joie', color: 'bg-yellow-100 dark:bg-yellow-900/30' },
-                      { emoji: '😌', label: 'Calme', color: 'bg-blue-100 dark:bg-blue-900/30' },
-                      { emoji: '😤', label: 'Colère', color: 'bg-red-100 dark:bg-red-900/30' },
-                      { emoji: '😢', label: 'Triste', color: 'bg-purple-100 dark:bg-purple-900/30' },
-                    ].map((e) => (
-                      <div key={e.label} className={`${e.color} rounded-2xl p-3 text-center transition-transform hover:scale-105`}>
-                        <span className="text-2xl block mb-1">{e.emoji}</span>
-                        <span className="text-xs text-gray-600 dark:text-gray-400">{e.label}</span>
-                      </div>
-                    ))}
-                  </div>
-                  <div className="space-y-3 mb-6">
-                    <div className="flex justify-between items-center">
-                      <span className="text-sm text-gray-500 dark:text-gray-400">Intensité</span>
-                      <span className="text-sm font-semibold text-malachite-600 dark:text-malachite-400">7/10</span>
-                    </div>
-                    <div className="w-full bg-gray-100 dark:bg-gray-700 rounded-full h-3">
-                      <div className="bg-linear-to-r from-malachite-400 to-malachite-500 rounded-full h-3" style={{ width: '70%' }} />
-                    </div>
-                  </div>
-                  <div className="bg-gray-50 dark:bg-gray-700/50 rounded-2xl p-4">
-                    <p className="text-sm text-gray-500 dark:text-gray-400 italic">
-                      &ldquo;Belle journée au travail, bonne ambiance avec l&apos;équipe...&rdquo;
-                    </p>
-                  </div>
-                </div>
-
-                {/* Décoration */}
-                <div className="absolute -z-10 -top-6 -right-6 w-full h-full bg-linear-to-br from-candlelight-200 to-malachite-200 dark:from-candlelight-900/30 dark:to-malachite-900/30 rounded-3xl" />
-              </div>
-            </RevealSection>
-          </div>
-        </div>
-      </section>
-
-      {/* ─── CTA Section ─── */}
-      <section className="py-24 relative overflow-hidden">
-        <div className="absolute inset-0 bg-linear-to-br from-malachite-500 via-malachite-600 to-malachite-700" />
-        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.05)_1px,transparent_1px)] bg-size-[40px_40px] pointer-events-none" />
-        <div className="absolute -top-20 -right-20 w-80 h-80 bg-candlelight-400/20 rounded-full blur-[80px] pointer-events-none" />
-        <div className="absolute -bottom-20 -left-20 w-80 h-80 bg-malachite-300/20 rounded-full blur-[80px] pointer-events-none" />
-
-        <div className="max-w-4xl mx-auto px-4 text-center relative">
-          <RevealSection>
-            <div className="inline-flex items-center gap-2 bg-white/15 backdrop-blur-sm rounded-full px-5 py-2 mb-8 border border-white/20">
-              <Sparkles className="w-4 h-4 text-candlelight-300" />
-              <span className="text-sm font-medium text-white/90">Rejoignez la communauté</span>
-            </div>
-          </RevealSection>
-
-          <RevealSection delay={100}>
-            <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
-              Prêt à prendre soin de vous ?
-            </h2>
-          </RevealSection>
-
-          <RevealSection delay={200}>
-            <p className="text-lg text-white/80 mb-10 max-w-2xl mx-auto leading-relaxed">
-              Créez votre compte en 2 minutes et commencez à suivre votre bien-être
-              émotionnel. C&apos;est gratuit, confidentiel et sans engagement.
-            </p>
-          </RevealSection>
-
-          <RevealSection delay={300}>
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Link
-                href="/inscription"
-                className="group inline-flex items-center gap-2 bg-candlelight-500 hover:bg-candlelight-400 text-black font-bold px-10 py-4 rounded-2xl transition-all duration-300 hover:shadow-xl hover:shadow-candlelight-500/30 hover:-translate-y-0.5 text-lg"
-              >
+          <ul className="fr-btns-group fr-btns-group--inline-md fr-mt-4w">
+            <li>
+              <Link className="fr-btn fr-btn--lg" href="/inscription">
                 Créer mon compte
-                <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
               </Link>
+            </li>
+            <li>
               <Link
+                className="fr-btn fr-btn--lg fr-btn--secondary"
                 href="/connexion"
-                className="inline-flex items-center gap-2 bg-white/15 hover:bg-white/25 backdrop-blur-sm text-white font-semibold px-10 py-4 rounded-2xl border border-white/20 transition-all duration-300 hover:-translate-y-0.5 text-lg"
               >
                 Se connecter
               </Link>
-            </div>
-          </RevealSection>
+            </li>
+          </ul>
         </div>
       </section>
 
-      {/* ─── Urgence Banner ─── */}
-      <section className="bg-red-50 dark:bg-red-950/30 border-t border-red-100 dark:border-red-900/50 py-8">
-        <div className="max-w-4xl mx-auto px-4 text-center">
-          <p className="text-red-700 dark:text-red-300 font-medium leading-relaxed">
-            <span className="font-bold">En cas d&apos;urgence</span>, appelez le{' '}
-            <a href="tel:3114" className="font-bold underline decoration-2 underline-offset-2 hover:text-red-900 dark:hover:text-red-200 transition-colors">
-              3114
-            </a>{' '}
-            (numéro national de prévention du suicide) ou le{' '}
-            <a href="tel:15" className="font-bold underline decoration-2 underline-offset-2 hover:text-red-900 dark:hover:text-red-200 transition-colors">
-              15
-            </a>{' '}
-            (SAMU)
+      {/* ─── Urgence ─── */}
+      <section className="fr-container fr-py-6w">
+        <div className="fr-callout fr-callout--brown-caramel fr-icon-information-line">
+          <p className="fr-callout__title">En cas d&apos;urgence ou de détresse</p>
+          <p className="fr-callout__text">
+            Appelez le <strong>3114</strong> (numéro national de prévention du
+            suicide, gratuit, 24h/24) ou le <strong>15</strong> (SAMU). Vous
+            n&apos;êtes pas seul·e.
           </p>
         </div>
       </section>
-    </div>
-  );
-}
-
-/* ─── Composants ─── */
-
-function MiniStat({ icon, value, label }: { icon: React.ReactNode; value: string; label: string }) {
-  return (
-    <div className="flex items-center gap-3">
-      <div className="w-10 h-10 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm rounded-xl flex items-center justify-center text-malachite-600 dark:text-malachite-400 shadow-sm border border-gray-200/50 dark:border-gray-700/50">
-        {icon}
-      </div>
-      <div className="text-left">
-        <p className="font-bold text-gray-900 dark:text-white text-sm">{value}</p>
-        <p className="text-gray-500 dark:text-gray-500 text-xs">{label}</p>
-      </div>
-    </div>
-  );
-}
-
-function StepCard({
-  step,
-  icon,
-  title,
-  description,
-  color,
-}: {
-  step: number;
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  color: 'malachite' | 'candlelight';
-}) {
-  const colors = color === 'malachite'
-    ? { bg: 'bg-malachite-50 dark:bg-malachite-950/30', icon: 'text-malachite-600 dark:text-malachite-400', iconBg: 'bg-malachite-100 dark:bg-malachite-900/50', badge: 'bg-malachite-500' }
-    : { bg: 'bg-candlelight-50 dark:bg-candlelight-950/30', icon: 'text-candlelight-600 dark:text-candlelight-400', iconBg: 'bg-candlelight-100 dark:bg-candlelight-900/50', badge: 'bg-candlelight-500' };
-
-  return (
-    <div className={`${colors.bg} rounded-3xl p-8 text-center relative transition-all duration-300 hover:shadow-xl hover:-translate-y-2 border border-transparent hover:border-gray-200 dark:hover:border-gray-700 h-full`}>
-      <div className={`${colors.badge} text-white w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm absolute -top-3 left-1/2 -translate-x-1/2 shadow-lg`}>
-        {step}
-      </div>
-      <div className={`${colors.iconBg} ${colors.icon} w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-5 mt-2`}>
-        {icon}
-      </div>
-      <h3 className="font-display font-semibold text-lg text-gray-900 dark:text-white mb-3">{title}</h3>
-      <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">{description}</p>
-    </div>
-  );
-}
-
-function FeatureCard({
-  icon,
-  title,
-  description,
-  color,
-}: {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  color: 'malachite' | 'candlelight';
-}) {
-  const bgColor = color === 'malachite'
-    ? 'bg-white dark:bg-gray-800/50'
-    : 'bg-white dark:bg-gray-800/50';
-  const iconColor = color === 'malachite'
-    ? 'text-malachite-600 dark:text-malachite-400'
-    : 'text-candlelight-600 dark:text-candlelight-400';
-  const iconBg = color === 'malachite'
-    ? 'bg-malachite-100 dark:bg-malachite-900/50'
-    : 'bg-candlelight-100 dark:bg-candlelight-900/50';
-
-  return (
-    <div className={`${bgColor} rounded-3xl p-7 transition-all duration-300 hover:shadow-xl hover:-translate-y-2 border border-gray-100 dark:border-gray-800 hover:border-gray-200 dark:hover:border-gray-700 h-full`}>
-      <div className={`${iconBg} ${iconColor} w-14 h-14 rounded-2xl flex items-center justify-center mb-5`}>
-        {icon}
-      </div>
-      <h3 className="font-display font-semibold text-lg text-gray-900 dark:text-white mb-3">
-        {title}
-      </h3>
-      <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
-        {description}
-      </p>
-    </div>
+    </>
   );
 }
diff --git a/frontend/src/components/layout/Footer.tsx b/frontend/src/components/layout/Footer.tsx
index 72adba8..be2dbdd 100644
--- a/frontend/src/components/layout/Footer.tsx
+++ b/frontend/src/components/layout/Footer.tsx
@@ -1,60 +1,103 @@
-"use client";
-
-import React from "react";
 import Link from "next/link";
-import { Phone } from "lucide-react";
 
 export default function Footer() {
   return (
-    <footer className="bg-gray-50 dark:bg-gray-950 border-t border-gray-200 dark:border-gray-800">
-      {/* Bandeau urgence */}
-      <div className="bg-red-50 dark:bg-red-950/50 border-b border-red-100 dark:border-red-900">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
-          <p className="flex items-center justify-center gap-2 text-sm text-red-700 dark:text-red-400 font-medium text-center">
-            <Phone size={16} className="shrink-0" />
-            En cas d&apos;urgence : 3114 (numéro national de prévention du suicide)
-          </p>
+    <footer className="fr-footer" role="contentinfo" id="footer">
+      <div className="fr-container">
+        <div className="fr-footer__body">
+          <div className="fr-footer__brand fr-enlarge-link">
+            <Link href="/" title="Accueil - CESIZen">
+              <p className="fr-logo">
+                République
+                <br />
+                Française
+              </p>
+            </Link>
+          </div>
+          <div className="fr-footer__content">
+            <p className="fr-footer__content-desc">
+              CESIZen est une plateforme publique de prévention et de suivi en
+              santé mentale, éditée pour le Ministère des Solidarités et de la
+              Santé. En cas de détresse, contactez le 3114 (numéro national de
+              prévention du suicide).
+            </p>
+            <ul className="fr-footer__content-list">
+              <li className="fr-footer__content-item">
+                <a
+                  className="fr-footer__content-link"
+                  target="_blank"
+                  rel="noopener noreferrer external"
+                  href="https://legifrance.gouv.fr"
+                >
+                  legifrance.gouv.fr
+                </a>
+              </li>
+              <li className="fr-footer__content-item">
+                <a
+                  className="fr-footer__content-link"
+                  target="_blank"
+                  rel="noopener noreferrer external"
+                  href="https://gouvernement.fr"
+                >
+                  gouvernement.fr
+                </a>
+              </li>
+              <li className="fr-footer__content-item">
+                <a
+                  className="fr-footer__content-link"
+                  target="_blank"
+                  rel="noopener noreferrer external"
+                  href="https://service-public.fr"
+                >
+                  service-public.fr
+                </a>
+              </li>
+              <li className="fr-footer__content-item">
+                <a
+                  className="fr-footer__content-link"
+                  target="_blank"
+                  rel="noopener noreferrer external"
+                  href="https://data.gouv.fr"
+                >
+                  data.gouv.fr
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
-      </div>
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="flex flex-col md:flex-row items-center justify-between gap-6">
-          {/* Logo + Copyright */}
-          <div className="flex flex-col items-center md:items-start gap-2">
-            <div className="flex items-center gap-0.5">
-              <span className="text-xl font-bold font-display text-malachite-500">
-                CESI
-              </span>
-              <span className="text-xl font-bold font-display text-candlelight-500">
-                ZEN
-              </span>
-            </div>
-            <p className="text-sm text-gray-500 dark:text-gray-400 text-center md:text-left">
-              CESIZen 2024 - Ministère des Solidarités et de la Santé
+        <div className="fr-footer__bottom">
+          <ul className="fr-footer__bottom-list">
+            <li className="fr-footer__bottom-item">
+              <Link className="fr-footer__bottom-link" href="/mentions-legales">
+                Mentions légales
+              </Link>
+            </li>
+            <li className="fr-footer__bottom-item">
+              <Link
+                className="fr-footer__bottom-link"
+                href="/politique-de-confidentialite"
+              >
+                Données personnelles
+              </Link>
+            </li>
+            <li className="fr-footer__bottom-item">
+              <Link className="fr-footer__bottom-link" href="/contacts-urgence">
+                Contacts d&apos;urgence
+              </Link>
+            </li>
+          </ul>
+          <div className="fr-footer__bottom-copy">
+            <p>
+              Sauf mention contraire, tous les contenus de ce site sont sous{" "}
+              <a
+                href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
+                target="_blank"
+                rel="noopener noreferrer external"
+              >
+                licence etalab-2.0
+              </a>
             </p>
           </div>
-
-          {/* Links */}
-          <nav className="flex flex-wrap items-center justify-center gap-6">
-            <Link
-              href="/mentions-legales"
-              className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
-            >
-              Mentions légales
-            </Link>
-            <Link
-              href="/politique-de-confidentialite"
-              className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
-            >
-              Politique de confidentialité
-            </Link>
-            <Link
-              href="/contacts-urgence"
-              className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
-            >
-              Contacts d&apos;urgence
-            </Link>
-          </nav>
         </div>
       </div>
     </footer>
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 32a106d..ef68f20 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -1,245 +1,158 @@
 "use client";
 
-import React, { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import {
-  Menu,
-  X,
-  User,
-  LogOut,
-  Settings,
-  BarChart3,
-  BookOpen,
-  Home,
-} from "lucide-react";
-import ThemeToggle from "@/components/ui/ThemeToggle";
 import { useAuthStore } from "@/lib/auth-store";
 
 interface NavLink {
   href: string;
   label: string;
-  icon: React.ReactNode;
 }
 
 export default function Header() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [userDropdownOpen, setUserDropdownOpen] = useState(false);
   const pathname = usePathname();
-
   const { user, token, logout } = useAuthStore();
   const isAuthenticated = !!token;
   const isAdmin = user?.role?.nom === "administrateur";
 
-  const publicLinks: NavLink[] = [
-    { href: "/", label: "Accueil", icon: <Home size={18} /> },
-    { href: "/informations", label: "Informations", icon: <BookOpen size={18} /> },
+  const navLinks: NavLink[] = [
+    { href: "/", label: "Accueil" },
+    { href: "/informations", label: "Informations" },
+    { href: "/contacts-urgence", label: "Contacts d'urgence" },
+    ...(isAuthenticated
+      ? [
+          { href: "/journal", label: "Mon journal" },
+          { href: "/journal/rapports", label: "Mes rapports" },
+        ]
+      : []),
+    ...(isAdmin ? [{ href: "/admin/dashboard", label: "Administration" }] : []),
   ];
 
-  const authLinks: NavLink[] = [
-    { href: "/journal", label: "Journal", icon: <BookOpen size={18} /> },
-    { href: "/journal/rapports", label: "Rapports", icon: <BarChart3 size={18} /> },
-  ];
-
-  const adminLinks: NavLink[] = [
-    { href: "/admin", label: "Admin", icon: <Settings size={18} /> },
-  ];
-
-  const navLinks = [
-    ...publicLinks,
-    ...(isAuthenticated ? authLinks : []),
-    ...(isAdmin ? adminLinks : []),
-  ];
-
-  const isActive = (href: string) => {
-    if (href === "/") return pathname === "/";
-    return pathname.startsWith(href);
-  };
-
-  const handleLogout = () => {
-    logout();
-    setUserDropdownOpen(false);
-    setMobileMenuOpen(false);
-  };
+  const isActive = (href: string) =>
+    href === "/" ? pathname === "/" : pathname.startsWith(href);
 
   return (
-    <header className="sticky top-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-lg border-b border-gray-200 dark:border-gray-800">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          {/* Logo */}
-          <Link href="/" className="flex items-center gap-0.5 shrink-0">
-            <span className="text-2xl font-bold font-display text-malachite-500">
-              CESI
-            </span>
-            <span className="text-2xl font-bold font-display text-candlelight-500">
-              ZEN
-            </span>
-          </Link>
-
-          {/* Desktop Navigation */}
-          <nav className="hidden md:flex items-center gap-1">
-            {navLinks.map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                className={`
-                  flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200
-                  ${
-                    isActive(link.href)
-                      ? "bg-candlelight-100 dark:bg-candlelight-950 text-candlelight-700 dark:text-candlelight-400"
-                      : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-200"
-                  }
-                `}
-              >
-                {link.icon}
-                {link.label}
-              </Link>
-            ))}
-          </nav>
-
-          {/* Right actions */}
-          <div className="flex items-center gap-2">
-            <ThemeToggle />
-
-            {/* Desktop auth */}
-            <div className="hidden md:flex items-center gap-2">
-              {isAuthenticated ? (
-                <div className="relative">
+    <header role="banner" className="fr-header">
+      <div className="fr-header__body">
+        <div className="fr-container">
+          <div className="fr-header__body-row">
+            <div className="fr-header__brand fr-enlarge-link">
+              <div className="fr-header__brand-top">
+                <div className="fr-header__logo">
+                  <p className="fr-logo">
+                    République
+                    <br />
+                    Française
+                  </p>
+                </div>
+                <div className="fr-header__navbar">
                   <button
-                    onClick={() => setUserDropdownOpen(!userDropdownOpen)}
-                    className="flex items-center gap-2 px-3 py-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                    className="fr-btn--menu fr-btn"
+                    data-fr-opened="false"
+                    aria-controls="modal-menu-mobile"
+                    aria-haspopup="menu"
+                    id="button-menu-mobile"
+                    title="Menu"
                   >
-                    <div className="h-8 w-8 rounded-full bg-malachite-100 dark:bg-malachite-900 flex items-center justify-center">
-                      <User
-                        size={16}
-                        className="text-malachite-600 dark:text-malachite-400"
-                      />
-                    </div>
-                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                      {user?.prenom || "Utilisateur"}
-                    </span>
+                    Menu
                   </button>
-
-                  {userDropdownOpen && (
+                </div>
+              </div>
+              <div className="fr-header__service">
+                <Link href="/" title="Accueil - CESIZen">
+                  <span className="fr-header__service-title">CESIZen</span>
+                </Link>
+                <p className="fr-header__service-tagline">
+                  Votre santé mentale — Ministère des Solidarités et de la Santé
+                </p>
+              </div>
+            </div>
+            <div className="fr-header__tools">
+              <div className="fr-header__tools-links">
+                <ul className="fr-btns-group">
+                  {isAuthenticated ? (
                     <>
-                      <div
-                        className="fixed inset-0 z-10"
-                        onClick={() => setUserDropdownOpen(false)}
-                      />
-                      <div className="absolute right-0 mt-2 w-48 z-20 bg-white dark:bg-gray-900 rounded-xl shadow-lg border border-gray-100 dark:border-gray-800 py-1 animate-in fade-in zoom-in-95 duration-150">
+                      <li>
                         <Link
+                          className="fr-btn fr-icon-account-line"
                           href="/profil"
-                          onClick={() => setUserDropdownOpen(false)}
-                          className="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                         >
-                          <Settings size={16} />
-                          Mon profil
+                          {user?.prenom || "Mon profil"}
                         </Link>
+                      </li>
+                      <li>
                         <button
-                          onClick={handleLogout}
-                          className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950 transition-colors"
+                          className="fr-btn fr-icon-logout-box-r-line"
+                          onClick={() => logout()}
                         >
-                          <LogOut size={16} />
                           Déconnexion
                         </button>
-                      </div>
+                      </li>
+                    </>
+                  ) : (
+                    <>
+                      <li>
+                        <Link
+                          className="fr-btn fr-icon-account-line"
+                          href="/connexion"
+                        >
+                          Connexion
+                        </Link>
+                      </li>
+                      <li>
+                        <Link
+                          className="fr-btn fr-icon-add-line"
+                          href="/inscription"
+                        >
+                          Créer un compte
+                        </Link>
+                      </li>
                     </>
                   )}
-                </div>
-              ) : (
-                <>
-                  <Link
-                    href="/connexion"
-                    className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors"
-                  >
-                    Connexion
-                  </Link>
-                  <Link
-                    href="/inscription"
-                    className="px-4 py-2 text-sm font-semibold bg-candlelight-500 hover:bg-candlelight-600 text-black rounded-xl transition-all duration-200 shadow-sm hover:shadow-md"
-                  >
-                    Inscription
-                  </Link>
-                </>
-              )}
+                </ul>
+              </div>
             </div>
-
-            {/* Mobile hamburger */}
-            <button
-              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-              className="md:hidden p-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-600 dark:text-gray-400"
-              aria-label="Menu"
-            >
-              {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
-            </button>
           </div>
         </div>
       </div>
 
-      {/* Mobile menu */}
-      {mobileMenuOpen && (
-        <div className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 animate-in slide-in-from-top duration-200">
-          <nav className="px-4 py-4 space-y-1">
-            {navLinks.map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                onClick={() => setMobileMenuOpen(false)}
-                className={`
-                  flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200
-                  ${
-                    isActive(link.href)
-                      ? "bg-candlelight-100 dark:bg-candlelight-950 text-candlelight-700 dark:text-candlelight-400"
-                      : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
-                  }
-                `}
-              >
-                {link.icon}
-                {link.label}
-              </Link>
-            ))}
-
-            <div className="pt-4 border-t border-gray-200 dark:border-gray-800 mt-4 space-y-1">
-              {isAuthenticated ? (
-                <>
+      {/* Navigation principale (et menu mobile DSFR) */}
+      <div
+        className="fr-header__menu fr-modal"
+        id="modal-menu-mobile"
+        aria-labelledby="button-menu-mobile"
+      >
+        <div className="fr-container">
+          <button
+            className="fr-btn--close fr-btn"
+            aria-controls="modal-menu-mobile"
+            title="Fermer"
+          >
+            Fermer
+          </button>
+          <nav
+            className="fr-nav"
+            id="navigation-principale"
+            role="navigation"
+            aria-label="Menu principal"
+          >
+            <ul className="fr-nav__list">
+              {navLinks.map((link) => (
+                <li className="fr-nav__item" key={link.href}>
                   <Link
-                    href="/profil"
-                    onClick={() => setMobileMenuOpen(false)}
-                    className="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                    className="fr-nav__link"
+                    href={link.href}
+                    target="_self"
+                    aria-current={isActive(link.href) ? "page" : undefined}
                   >
-                    <User size={18} />
-                    Mon profil
+                    {link.label}
                   </Link>
-                  <button
-                    onClick={handleLogout}
-                    className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950 transition-colors"
-                  >
-                    <LogOut size={18} />
-                    Déconnexion
-                  </button>
-                </>
-              ) : (
-                <>
-                  <Link
-                    href="/connexion"
-                    onClick={() => setMobileMenuOpen(false)}
-                    className="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-                  >
-                    Connexion
-                  </Link>
-                  <Link
-                    href="/inscription"
-                    onClick={() => setMobileMenuOpen(false)}
-                    className="flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-sm font-semibold bg-candlelight-500 hover:bg-candlelight-600 text-black transition-all duration-200"
-                  >
-                    Inscription
-                  </Link>
-                </>
-              )}
-            </div>
+                </li>
+              ))}
+            </ul>
           </nav>
         </div>
-      )}
+      </div>
     </header>
   );
 }
diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
index b329d08..617dfea 100644
--- a/frontend/src/components/ui/Button.tsx
+++ b/frontend/src/components/ui/Button.tsx
@@ -11,23 +11,19 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   loading?: boolean;
 }
 
+// Mappe les variantes internes sur les classes du Système de Design de l'État (DSFR).
 const variantClasses: Record<ButtonVariant, string> = {
-  primary:
-    "bg-candlelight-500 hover:bg-candlelight-600 text-black font-semibold shadow-sm hover:shadow-md",
-  secondary:
-    "bg-malachite-500 hover:bg-malachite-600 text-white font-semibold shadow-sm hover:shadow-md",
-  outline:
-    "border-2 border-candlelight-500 text-candlelight-700 dark:text-candlelight-400 hover:bg-candlelight-50 dark:hover:bg-candlelight-950",
-  ghost:
-    "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300",
-  danger:
-    "bg-red-500 hover:bg-red-600 text-white font-semibold shadow-sm hover:shadow-md",
+  primary: "",
+  secondary: "fr-btn--secondary",
+  outline: "fr-btn--secondary",
+  ghost: "fr-btn--tertiary-no-outline",
+  danger: "fr-btn--secondary",
 };
 
 const sizeClasses: Record<ButtonSize, string> = {
-  sm: "px-3 py-1.5 text-sm",
-  md: "px-5 py-2.5 text-base",
-  lg: "px-7 py-3.5 text-lg",
+  sm: "fr-btn--sm",
+  md: "",
+  lg: "fr-btn--lg",
 };
 
 export default function Button({
@@ -39,43 +35,18 @@ export default function Button({
   className = "",
   ...rest
 }: ButtonProps) {
+  const classes = [
+    "fr-btn",
+    variantClasses[variant],
+    sizeClasses[size],
+    loading ? "fr-btn--icon-left fr-icon-refresh-line" : "",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
   return (
-    <button
-      disabled={disabled || loading}
-      className={`
-        inline-flex items-center justify-center gap-2
-        rounded-xl transition-all duration-200
-        focus:outline-none focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2
-        dark:focus:ring-offset-gray-900
-        disabled:opacity-50 disabled:cursor-not-allowed
-        ${variantClasses[variant]}
-        ${sizeClasses[size]}
-        ${className}
-      `}
-      {...rest}
-    >
-      {loading && (
-        <svg
-          className="animate-spin h-4 w-4"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          />
-        </svg>
-      )}
+    <button className={classes} disabled={disabled || loading} {...rest}>
       {children}
     </button>
   );