Merge branch 'refonte-dsfr'

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

frontend/eslint.config.mjs

@@ -12,6 +12,8 @@ const eslintConfig = defineConfig([
     "out/**",
     "build/**",
     "next-env.d.ts",
+    // Assets DSFR vendorisés (minifiés) — à ne pas linter.
+    "public/**",
   ]),
 ]);
 

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",

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",

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.");

frontend/src/app/(admin)/admin/contenus/page.tsx

@@ -1,13 +1,10 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { Plus, Edit2, Trash2 } from 'lucide-react';
 import api from '@/lib/api';
 import type { Feed } from '@/types';
-import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
-import Badge from '@/components/ui/Badge';
 import Modal from '@/components/ui/Modal';
 import toast from 'react-hot-toast';
 
@@ -90,92 +87,107 @@ export default function AdminContenusPage() {
 
   return (
     <div>
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+      <div className="fr-grid-row fr-grid-row--middle fr-grid-row--gutters fr-mb-4w">
-        <div>
+        <div className="fr-col">
-          <h1 className="font-display text-3xl font-bold text-gray-900 dark:text-white mb-1">
+          <h1 className="fr-mb-1v">Contenus</h1>
-            Contenus
+          <p className="fr-text--sm fr-mb-0">
-          </h1>
-          <p className="text-gray-500 dark:text-gray-400">
             Gérez les articles et ressources de la plateforme
           </p>
         </div>
-        <Button onClick={openCreate} size="sm">
+        <div className="fr-col-auto">
-          <Plus size={16} />
+          <button
+            type="button"
+            className="fr-btn fr-btn--icon-left fr-icon-add-line"
+            onClick={openCreate}
+          >
             Nouvel article
-        </Button>
+          </button>
+        </div>
       </div>
 
       {loading ? (
-        <div className="space-y-4">
+        <p>Chargement…</p>
-          {Array.from({ length: 3 }).map((_, i) => (
-            <Card key={i}>
-              <div className="h-6 bg-gray-100 dark:bg-gray-800 rounded animate-pulse w-48 mb-2" />
-              <div className="h-4 bg-gray-100 dark:bg-gray-800 rounded animate-pulse w-full" />
-            </Card>
-          ))}
-        </div>
       ) : feeds.length === 0 ? (
-        <Card className="text-center py-12">
+        <div className="fr-callout">
-          <p className="text-gray-400 dark:text-gray-600 mb-4">Aucun article</p>
+          <p className="fr-callout__text">Aucun article pour le moment.</p>
-          <Button onClick={openCreate} size="sm">Créer le premier article</Button>
+          <button type="button" className="fr-btn fr-btn--icon-left fr-icon-add-line" onClick={openCreate}>
-        </Card>
+            Créer le premier article
+          </button>
+        </div>
       ) : (
-        <div className="space-y-4">
+        <div className="fr-table fr-table--bordered">
+          <table>
+            <thead>
+              <tr>
+                <th scope="col">Titre</th>
+                <th scope="col">Slug</th>
+                <th scope="col">Ordre</th>
+                <th scope="col">Statut</th>
+                <th scope="col">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
               {feeds.map((feed) => (
-            <Card key={feed.id} className="flex flex-col sm:flex-row sm:items-center gap-4">
+                <tr key={feed.id}>
-              <div className="flex-1 min-w-0">
+                  <td>{feed.titre}</td>
-                <div className="flex items-center gap-2 mb-1">
+                  <td>/{feed.slug}</td>
-                  <h3 className="font-semibold text-gray-900 dark:text-white truncate">
+                  <td>{feed.ordre}</td>
-                    {feed.titre}
+                  <td>
-                  </h3>
+                    <span className={`fr-badge fr-badge--sm ${feed.est_publie ? 'fr-badge--success' : 'fr-badge--info'}`}>
-                  <Badge color={feed.est_publie ? '#06c656' : '#9ca3af'}>
                       {feed.est_publie ? 'Publié' : 'Brouillon'}
-                  </Badge>
+                    </span>
-                </div>
+                  </td>
-                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  <td>
-                  /{feed.slug} · Ordre: {feed.ordre}
+                    <ul className="fr-btns-group fr-btns-group--inline fr-btns-group--sm">
-                </p>
+                      <li>
-              </div>
-              <div className="flex items-center gap-2 shrink-0">
                         <button
+                          type="button"
                           onClick={() => openEdit(feed)}
-                  className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                          className="fr-btn fr-btn--sm fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line"
                           title="Modifier"
                         >
-                  <Edit2 size={16} className="text-gray-500" />
+                          Modifier
                         </button>
+                      </li>
+                      <li>
                         <button
+                          type="button"
                           onClick={() => handleDelete(feed.id)}
-                  className="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors"
+                          className="fr-btn fr-btn--sm fr-btn--tertiary fr-btn--icon-left fr-icon-delete-line"
                           title="Supprimer"
                         >
-                  <Trash2 size={16} className="text-red-500" />
+                          Supprimer
                         </button>
-              </div>
+                      </li>
-            </Card>
+                    </ul>
+                  </td>
+                </tr>
               ))}
+            </tbody>
+          </table>
         </div>
       )}
 
       {/* Modal création/édition */}
       <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editingFeed ? 'Modifier l\'article' : 'Nouvel article'} size="lg">
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form onSubmit={handleSubmit} className="fr-mt-2w">
           <Input
             label="Titre"
             value={form.titre}
             onChange={(e) => setForm({ ...form, titre: e.target.value })}
             required
           />
-          <div>
+          <div className="fr-input-group">
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+            <label className="fr-label" htmlFor="feed-contenu">
               Contenu (HTML)
             </label>
             <textarea
+              id="feed-contenu"
+              className="fr-input"
               value={form.contenu}
               onChange={(e) => setForm({ ...form, contenu: e.target.value })}
               rows={10}
               required
-              className="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-candlelight-500 font-mono text-sm resize-none"
             />
           </div>
           <Input
@@ -183,40 +195,47 @@ export default function AdminContenusPage() {
             value={form.image_url}
             onChange={(e) => setForm({ ...form, image_url: e.target.value })}
           />
-          <div className="grid grid-cols-2 gap-4">
+          <div className="fr-grid-row fr-grid-row--gutters">
-            <div>
+            <div className="fr-col-6">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+              <div className="fr-input-group">
+                <label className="fr-label" htmlFor="feed-ordre">
                   Ordre d&apos;affichage
                 </label>
                 <input
+                  id="feed-ordre"
                   type="number"
+                  className="fr-input"
                   value={form.ordre}
                   onChange={(e) => setForm({ ...form, ordre: parseInt(e.target.value) || 0 })}
-                className="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-candlelight-500"
                 />
               </div>
-            <div className="flex items-end pb-1">
+            </div>
-              <label className="flex items-center gap-2 cursor-pointer">
+            <div className="fr-col-6">
+              <div className="fr-checkbox-group">
                 <input
                   type="checkbox"
+                  id="feed-publie"
                   checked={form.est_publie}
                   onChange={(e) => setForm({ ...form, est_publie: e.target.checked })}
-                  className="w-4 h-4 rounded border-gray-300 text-malachite-500 focus:ring-malachite-500"
                 />
-                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                <label className="fr-label" htmlFor="feed-publie">
                   Publié
-                </span>
                 </label>
               </div>
             </div>
-          <div className="flex gap-3 pt-2">
+          </div>
+          <ul className="fr-btns-group fr-btns-group--inline fr-mt-2w">
+            <li>
               <Button type="submit" loading={formLoading}>
                 {editingFeed ? 'Mettre à jour' : 'Créer'}
               </Button>
+            </li>
+            <li>
               <Button variant="ghost" onClick={() => setModalOpen(false)}>
                 Annuler
               </Button>
-          </div>
+            </li>
+          </ul>
         </form>
       </Modal>
     </div>

frontend/src/app/(admin)/admin/dashboard/page.tsx

@@ -2,8 +2,6 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { Users, FileText, Heart } from 'lucide-react';
-import Card from '@/components/ui/Card';
 import api from '@/lib/api';
 
 interface AdminStats {
@@ -41,86 +39,63 @@ export default function AdminDashboardPage() {
   }, []);
 
   const statCards = [
-    {
+    { label: 'Utilisateurs', value: stats?.total_utilisateurs || 0, icon: 'fr-icon-user-line' },
-      label: 'Utilisateurs',
+    { label: 'Articles', value: stats?.total_feeds || 0, icon: 'fr-icon-article-line' },
-      value: stats?.total_utilisateurs || 0,
+    { label: 'Émotions', value: stats?.total_emotions || 0, icon: 'fr-icon-heart-line' },
-      icon: <Users size={24} />,
+  ];
-      color: 'text-blue-500',
+
-      bg: 'bg-blue-50 dark:bg-blue-950/30',
+  const quickActions = [
-    },
+    { href: '/admin/utilisateurs', icon: 'fr-icon-user-line', label: 'Gérer les utilisateurs' },
-    {
+    { href: '/admin/contenus', icon: 'fr-icon-article-line', label: 'Gérer les contenus' },
-      label: 'Articles',
+    { href: '/admin/emotions', icon: 'fr-icon-heart-line', label: 'Gérer les émotions' },
-      value: stats?.total_feeds || 0,
-      icon: <FileText size={24} />,
-      color: 'text-malachite-500',
-      bg: 'bg-malachite-50 dark:bg-malachite-950/30',
-    },
-    {
-      label: 'Émotions',
-      value: stats?.total_emotions || 0,
-      icon: <Heart size={24} />,
-      color: 'text-candlelight-500',
-      bg: 'bg-candlelight-50 dark:bg-candlelight-950/30',
-    },
   ];
 
   return (
     <div>
-      <div className="mb-8">
+      <h1>Administration</h1>
-        <h1 className="font-display text-3xl font-bold text-gray-900 dark:text-white mb-2">
+      <p className="fr-text--lead fr-mb-4w">
-          Administration
-        </h1>
-        <p className="text-gray-500 dark:text-gray-400">
         Vue d&apos;ensemble de la plateforme CESIZen
       </p>
-      </div>
 
-      <div className="grid sm:grid-cols-3 gap-6 mb-8">
+      <div className="fr-grid-row fr-grid-row--gutters fr-mb-4w">
         {statCards.map((card) => (
-          <Card key={card.label}>
+          <div className="fr-col-12 fr-col-md-4" key={card.label}>
-            <div className="flex items-center gap-4">
+            <div className="fr-tile fr-tile--horizontal">
-              <div className={`w-14 h-14 rounded-xl ${card.bg} flex items-center justify-center ${card.color}`}>
+              <div className="fr-tile__body">
-                {card.icon}
+                <div className="fr-tile__content">
-              </div>
+                  <h2 className="fr-tile__title">
-              <div>
+                    <span className={`${card.icon} fr-mr-1w`} aria-hidden="true" />
-                <p className="text-sm text-gray-500 dark:text-gray-400">{card.label}</p>
+                    {card.label}
-                <p className="text-3xl font-bold text-gray-900 dark:text-white">
+                  </h2>
-                  {loading ? '...' : card.value}
+                  <p className="fr-tile__detail fr-text--bold fr-display--xs">
+                    {loading ? '…' : card.value}
                   </p>
                 </div>
               </div>
-          </Card>
+            </div>
+          </div>
         ))}
       </div>
 
-      <Card>
+      <h2>Actions rapides</h2>
-        <h2 className="font-display text-lg font-semibold text-gray-900 dark:text-white mb-4">
+      <div className="fr-grid-row fr-grid-row--gutters">
-          Actions rapides
+        {quickActions.map((action) => (
-        </h2>
+          <div className="fr-col-12 fr-col-md-4" key={action.href}>
-        <div className="grid sm:grid-cols-3 gap-4">
+            <div className="fr-tile fr-tile--horizontal fr-enlarge-link">
-          <Link
+              <div className="fr-tile__body">
-            href="/admin/utilisateurs"
+                <div className="fr-tile__content">
-            className="flex items-center gap-3 p-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                  <h3 className="fr-tile__title">
-          >
+                    <Link href={action.href}>
-            <Users size={20} className="text-blue-500" />
+                      <span className={`${action.icon} fr-mr-1w`} aria-hidden="true" />
-            <span className="font-medium text-gray-700 dark:text-gray-300">Gérer les utilisateurs</span>
+                      {action.label}
-          </Link>
-          <Link
-            href="/admin/contenus"
-            className="flex items-center gap-3 p-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-          >
-            <FileText size={20} className="text-malachite-500" />
-            <span className="font-medium text-gray-700 dark:text-gray-300">Gérer les contenus</span>
-          </Link>
-          <Link
-            href="/admin/emotions"
-            className="flex items-center gap-3 p-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-          >
-            <Heart size={20} className="text-candlelight-500" />
-            <span className="font-medium text-gray-700 dark:text-gray-300">Gérer les émotions</span>
                     </Link>
+                  </h3>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
       </div>
-      </Card>
     </div>
   );
 }

frontend/src/app/(admin)/admin/emotions/page.tsx

@@ -1,13 +1,10 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { Plus, Edit2, Trash2 } from 'lucide-react';
 import api from '@/lib/api';
 import type { Emotion } from '@/types';
-import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
-import Badge from '@/components/ui/Badge';
 import Modal from '@/components/ui/Modal';
 import toast from 'react-hot-toast';
 
@@ -100,148 +97,113 @@ export default function AdminEmotionsPage() {
     }
   };
 
+  const colorSwatch = (couleur: string) => (
+    <span
+      aria-hidden="true"
+      style={{
+        display: 'inline-block',
+        width: '1rem',
+        height: '1rem',
+        borderRadius: '50%',
+        backgroundColor: couleur,
+        verticalAlign: 'middle',
+        marginRight: '0.5rem',
+      }}
+    />
+  );
+
   return (
     <div>
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+      <div className="fr-grid-row fr-grid-row--middle fr-grid-row--gutters fr-mb-4w">
-        <div>
+        <div className="fr-col">
-          <h1 className="font-display text-3xl font-bold text-gray-900 dark:text-white mb-1">
+          <h1 className="fr-mb-1v">Émotions</h1>
-            Émotions
+          <p className="fr-text--sm fr-mb-0">
-          </h1>
+            Gérez le catalogue des émotions disponibles (2 niveaux)
-          <p className="text-gray-500 dark:text-gray-400">
-            Gérez le catalogue des émotions disponibles
           </p>
         </div>
-        <Button onClick={() => openCreate()} size="sm">
+        <div className="fr-col-auto">
-          <Plus size={16} />
+          <button
+            type="button"
+            className="fr-btn fr-btn--icon-left fr-icon-add-line"
+            onClick={() => openCreate()}
+          >
             Nouvelle émotion
-        </Button>
+          </button>
+        </div>
       </div>
 
       {loading ? (
-        <div className="space-y-4">
+        <p>Chargement…</p>
-          {Array.from({ length: 4 }).map((_, i) => (
-            <Card key={i}>
-              <div className="h-6 bg-gray-100 dark:bg-gray-800 rounded animate-pulse w-32" />
-            </Card>
-          ))}
-        </div>
       ) : emotions.length === 0 ? (
-        <Card className="text-center py-12">
+        <div className="fr-callout">
-          <p className="text-gray-400 dark:text-gray-600 mb-4">Aucune émotion</p>
+          <p className="fr-callout__text">Aucune émotion pour le moment.</p>
-          <Button onClick={() => openCreate()} size="sm">Créer la première émotion</Button>
+          <button type="button" className="fr-btn fr-btn--icon-left fr-icon-add-line" onClick={() => openCreate()}>
-        </Card>
+            Créer la première émotion
+          </button>
+        </div>
       ) : (
-        <div className="space-y-4">
+        <div className="fr-table fr-table--bordered">
+          <table>
+            <thead>
+              <tr>
+                <th scope="col">Émotion</th>
+                <th scope="col">Niveau</th>
+                <th scope="col">Couleur</th>
+                <th scope="col">Statut</th>
+                <th scope="col">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
               {parentEmotions.map((emotion) => (
-            <Card key={emotion.id}>
+                <FragmentRows
-              <div className="flex items-center gap-4 mb-3">
+                  key={emotion.id}
-                <div
+                  emotion={emotion}
-                  className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl shrink-0"
+                  colorSwatch={colorSwatch}
-                  style={{ backgroundColor: `${emotion.couleur}20` }}
+                  onAddChild={openCreate}
-                >
+                  onEdit={openEdit}
-                  {emotion.icone || '🔵'}
+                  onDelete={handleDelete}
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <h3 className="font-semibold text-gray-900 dark:text-white">
-                      {emotion.nom}
-                    </h3>
-                    <Badge color={emotion.couleur}>{emotion.couleur}</Badge>
-                    {!emotion.est_actif && (
-                      <Badge color="#9ca3af">Inactif</Badge>
-                    )}
-                  </div>
-                  <p className="text-sm text-gray-400">Niveau 1</p>
-                </div>
-                <div className="flex items-center gap-1 shrink-0">
-                  <button
-                    onClick={() => openCreate(emotion.id)}
-                    className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-                    title="Ajouter sous-émotion"
-                  >
-                    <Plus size={16} className="text-malachite-500" />
-                  </button>
-                  <button
-                    onClick={() => openEdit(emotion)}
-                    className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-                    title="Modifier"
-                  >
-                    <Edit2 size={16} className="text-gray-500" />
-                  </button>
-                  <button
-                    onClick={() => handleDelete(emotion.id)}
-                    className="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors"
-                    title="Supprimer"
-                  >
-                    <Trash2 size={16} className="text-red-500" />
-                  </button>
-                </div>
-              </div>
-
-              {/* Sous-émotions */}
-              {emotion.enfants && emotion.enfants.length > 0 && (
-                <div className="ml-8 pl-4 border-l-2 border-gray-200 dark:border-gray-700 space-y-2">
-                  {emotion.enfants.map((child) => (
-                    <div key={child.id} className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
-                      <span className="text-lg">{child.icone || '🔵'}</span>
-                      <span className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300">
-                        {child.nom}
-                      </span>
-                      <div
-                        className="w-4 h-4 rounded-full shrink-0"
-                        style={{ backgroundColor: child.couleur }}
                 />
-                      {!child.est_actif && <Badge color="#9ca3af">Inactif</Badge>}
-                      <button
-                        onClick={() => openEdit(child)}
-                        className="p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-                      >
-                        <Edit2 size={14} className="text-gray-400" />
-                      </button>
-                      <button
-                        onClick={() => handleDelete(child.id)}
-                        className="p-1.5 rounded hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors"
-                      >
-                        <Trash2 size={14} className="text-red-400" />
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </Card>
               ))}
+            </tbody>
+          </table>
         </div>
       )}
 
       {/* Modal création/édition */}
       <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editingEmotion ? 'Modifier l\'émotion' : 'Nouvelle émotion'}>
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form onSubmit={handleSubmit} className="fr-mt-2w">
           <Input
             label="Nom"
             value={form.nom}
             onChange={(e) => setForm({ ...form, nom: e.target.value })}
             required
           />
-          <div className="grid grid-cols-2 gap-4">
+          <div className="fr-grid-row fr-grid-row--gutters">
-            <div>
+            <div className="fr-col-6">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+              <div className="fr-input-group">
-                Couleur
+                <label className="fr-label" htmlFor="emotion-couleur">Couleur</label>
-              </label>
+                <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--bottom">
-              <div className="flex items-center gap-3">
+                  <div className="fr-col-auto">
                     <input
+                      id="emotion-couleur"
                       type="color"
                       value={form.couleur}
                       onChange={(e) => setForm({ ...form, couleur: e.target.value })}
-                  className="w-10 h-10 rounded-lg border border-gray-300 dark:border-gray-700 cursor-pointer"
+                      style={{ width: '2.5rem', height: '2.5rem', border: 'none', padding: 0, cursor: 'pointer' }}
                     />
+                  </div>
+                  <div className="fr-col">
                     <input
                       type="text"
+                      className="fr-input"
                       value={form.couleur}
                       onChange={(e) => setForm({ ...form, couleur: e.target.value })}
-                  className="flex-1 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-candlelight-500 font-mono text-sm"
                     />
                   </div>
                 </div>
+              </div>
+            </div>
+            <div className="fr-col-6">
               <Input
                 label="Icône (emoji)"
                 value={form.icone}
@@ -249,44 +211,154 @@ export default function AdminEmotionsPage() {
                 placeholder="😊"
               />
             </div>
+          </div>
           {form.niveau === 2 && (
-            <div>
+            <div className="fr-select-group">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+              <label className="fr-label" htmlFor="emotion-parent">Émotion parente</label>
-                Émotion parente
-              </label>
               <select
+                id="emotion-parent"
+                className="fr-select"
                 value={form.parent_id || ''}
                 onChange={(e) => setForm({ ...form, parent_id: Number(e.target.value) || null })}
-                className="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-candlelight-500"
               >
-                <option value="">Sélectionner...</option>
+                <option value="">Sélectionner…</option>
                 {parentEmotions.map((e) => (
                   <option key={e.id} value={e.id}>{e.icone} {e.nom}</option>
                 ))}
               </select>
             </div>
           )}
-          <label className="flex items-center gap-2 cursor-pointer">
+          <div className="fr-checkbox-group">
             <input
               type="checkbox"
+              id="emotion-actif"
               checked={form.est_actif}
               onChange={(e) => setForm({ ...form, est_actif: e.target.checked })}
-              className="w-4 h-4 rounded border-gray-300 text-malachite-500 focus:ring-malachite-500"
             />
-            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="fr-label" htmlFor="emotion-actif">
               Active
-            </span>
             </label>
-          <div className="flex gap-3 pt-2">
+          </div>
+          <ul className="fr-btns-group fr-btns-group--inline fr-mt-2w">
+            <li>
               <Button type="submit" loading={formLoading}>
                 {editingEmotion ? 'Mettre à jour' : 'Créer'}
               </Button>
+            </li>
+            <li>
               <Button variant="ghost" onClick={() => setModalOpen(false)}>
                 Annuler
               </Button>
-          </div>
+            </li>
+          </ul>
         </form>
       </Modal>
     </div>
   );
 }
+
+function FragmentRows({
+  emotion,
+  colorSwatch,
+  onAddChild,
+  onEdit,
+  onDelete,
+}: {
+  emotion: Emotion;
+  colorSwatch: (couleur: string) => React.ReactNode;
+  onAddChild: (parentId?: number) => void;
+  onEdit: (emotion: Emotion) => void;
+  onDelete: (id: number) => void;
+}) {
+  return (
+    <>
+      <tr>
+        <td>
+          <span className="fr-mr-1w" aria-hidden="true">{emotion.icone || '🔵'}</span>
+          <strong>{emotion.nom}</strong>
+        </td>
+        <td><span className="fr-badge fr-badge--sm">Niveau 1</span></td>
+        <td>{colorSwatch(emotion.couleur)}<span className="fr-text--xs">{emotion.couleur}</span></td>
+        <td>
+          <span className={`fr-badge fr-badge--sm ${emotion.est_actif ? 'fr-badge--success' : 'fr-badge--error'}`}>
+            {emotion.est_actif ? 'Active' : 'Inactive'}
+          </span>
+        </td>
+        <td>
+          <ul className="fr-btns-group fr-btns-group--inline fr-btns-group--sm">
+            <li>
+              <button
+                type="button"
+                onClick={() => onAddChild(emotion.id)}
+                className="fr-btn fr-btn--sm fr-btn--tertiary fr-btn--icon-left fr-icon-add-line"
+                title="Ajouter une sous-émotion"
+              >
+                Sous-émotion
+              </button>
+            </li>
+            <li>
+              <button
+                type="button"
+                onClick={() => onEdit(emotion)}
+                className="fr-btn fr-btn--sm fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line"
+                title="Modifier"
+              >
+                Modifier
+              </button>
+            </li>
+            <li>
+              <button
+                type="button"
+                onClick={() => onDelete(emotion.id)}
+                className="fr-btn fr-btn--sm fr-btn--tertiary fr-btn--icon-left fr-icon-delete-line"
+                title="Supprimer"
+              >
+                Supprimer
+              </button>
+            </li>
+          </ul>
+        </td>
+      </tr>
+      {emotion.enfants?.map((child) => (
+        <tr key={child.id}>
+          <td>
+            <span className="fr-icon-arrow-right-line fr-icon--sm fr-mr-1w" aria-hidden="true" />
+            <span className="fr-mr-1w" aria-hidden="true">{child.icone || '🔵'}</span>
+            {child.nom}
+          </td>
+          <td><span className="fr-badge fr-badge--sm fr-badge--info">Niveau 2</span></td>
+          <td>{colorSwatch(child.couleur)}<span className="fr-text--xs">{child.couleur}</span></td>
+          <td>
+            <span className={`fr-badge fr-badge--sm ${child.est_actif ? 'fr-badge--success' : 'fr-badge--error'}`}>
+              {child.est_actif ? 'Active' : 'Inactive'}
+            </span>
+          </td>
+          <td>
+            <ul className="fr-btns-group fr-btns-group--inline fr-btns-group--sm">
+              <li>
+                <button
+                  type="button"
+                  onClick={() => onEdit(child)}
+                  className="fr-btn fr-btn--sm fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line"
+                  title="Modifier"
+                >
+                  Modifier
+                </button>
+              </li>
+              <li>
+                <button
+                  type="button"
+                  onClick={() => onDelete(child.id)}
+                  className="fr-btn fr-btn--sm fr-btn--tertiary fr-btn--icon-left fr-icon-delete-line"
+                  title="Supprimer"
+                >
+                  Supprimer
+                </button>
+              </li>
+            </ul>
+          </td>
+        </tr>
+      ))}
+    </>
+  );
+}

frontend/src/app/(admin)/admin/page.tsx

@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+
+// /admin n'a pas d'écran propre : on redirige vers le tableau de bord admin.
+export default function AdminIndexPage() {
+  redirect("/admin/dashboard");
+}

frontend/src/app/(admin)/admin/utilisateurs/page.tsx

@@ -1,13 +1,10 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { Search, UserCheck, UserX, Trash2, Plus } from 'lucide-react';
 import api from '@/lib/api';
 import type { Utilisateur } from '@/types';
-import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
-import Badge from '@/components/ui/Badge';
 import Modal from '@/components/ui/Modal';
 import toast from 'react-hot-toast';
 
@@ -76,111 +73,111 @@ export default function AdminUtilisateursPage() {
     `${u.prenom} ${u.nom} ${u.email}`.toLowerCase().includes(search.toLowerCase())
   );
 
-  const roleColor = (nom: string) => {
+  const roleBadgeClass = (nom?: string) => {
     switch (nom) {
-      case 'administrateur': return '#ef4444';
+      case 'administrateur': return 'fr-badge fr-badge--error';
-      case 'membre': return '#06c656';
+      case 'membre': return 'fr-badge fr-badge--success';
-      default: return '#9ca3af';
+      default: return 'fr-badge';
     }
   };
 
   return (
     <div>
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+      <div className="fr-grid-row fr-grid-row--middle fr-grid-row--gutters fr-mb-4w">
-        <div>
+        <div className="fr-col">
-          <h1 className="font-display text-3xl font-bold text-gray-900 dark:text-white mb-1">
+          <h1 className="fr-mb-1v">Utilisateurs</h1>
-            Utilisateurs
+          <p className="fr-text--sm fr-mb-0">
-          </h1>
-          <p className="text-gray-500 dark:text-gray-400">
             {utilisateurs.length} utilisateur{utilisateurs.length > 1 ? 's' : ''} enregistré{utilisateurs.length > 1 ? 's' : ''}
           </p>
         </div>
-        <Button onClick={() => setCreateModalOpen(true)} size="sm">
+        <div className="fr-col-auto">
-          <Plus size={16} />
+          <button
+            type="button"
+            className="fr-btn fr-btn--icon-left fr-icon-add-line"
+            onClick={() => setCreateModalOpen(true)}
+          >
             Nouvel utilisateur
-        </Button>
+          </button>
+        </div>
       </div>
 
       {/* Recherche */}
-      <div className="mb-6">
+      <div className="fr-search-bar fr-mb-4w" role="search">
-        <Input
+        <label className="fr-label" htmlFor="recherche-utilisateur">
-          placeholder="Rechercher un utilisateur..."
+          Rechercher un utilisateur
-          icon={<Search size={18} />}
+        </label>
+        <input
+          className="fr-input"
+          id="recherche-utilisateur"
+          type="search"
+          placeholder="Rechercher un utilisateur…"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
         />
+        <button type="button" className="fr-btn" title="Rechercher">
+          Rechercher
+        </button>
       </div>
 
       {/* Table */}
-      <Card className="overflow-hidden p-0">
+      <div className="fr-table fr-table--bordered">
-        <div className="overflow-x-auto">
+        <table>
-          <table className="w-full">
           <thead>
-              <tr className="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
+            <tr>
-                <th className="text-left px-6 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Utilisateur</th>
+              <th scope="col">Utilisateur</th>
-                <th className="text-left px-6 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Email</th>
+              <th scope="col">Email</th>
-                <th className="text-left px-6 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Rôle</th>
+              <th scope="col">Rôle</th>
-                <th className="text-left px-6 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Statut</th>
+              <th scope="col">Statut</th>
-                <th className="text-right px-6 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Actions</th>
+              <th scope="col">Actions</th>
             </tr>
           </thead>
-            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+          <tbody>
             {loading ? (
-                Array.from({ length: 5 }).map((_, i) => (
+              <tr>
-                  <tr key={i}>
+                <td colSpan={5}>Chargement…</td>
-                    <td colSpan={5} className="px-6 py-4">
-                      <div className="h-4 bg-gray-100 dark:bg-gray-800 rounded animate-pulse" />
-                    </td>
               </tr>
-                ))
             ) : filtered.length === 0 ? (
               <tr>
-                  <td colSpan={5} className="px-6 py-8 text-center text-gray-400">
+                <td colSpan={5}>Aucun utilisateur trouvé</td>
-                    Aucun utilisateur trouvé
-                  </td>
               </tr>
             ) : (
               filtered.map((user) => (
-                  <tr key={user.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors">
+                <tr key={user.id}>
-                    <td className="px-6 py-4">
+                  <td>{user.prenom} {user.nom}</td>
-                      <span className="font-medium text-gray-900 dark:text-white">
+                  <td>{user.email}</td>
-                        {user.prenom} {user.nom}
+                  <td>
+                    <span className={roleBadgeClass(user.role?.nom)}>
+                      {user.role?.nom || 'N/A'}
                     </span>
                   </td>
-                    <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+                  <td>
-                      {user.email}
+                    <span className={`fr-badge fr-badge--sm ${user.est_actif ? 'fr-badge--success' : 'fr-badge--error'}`}>
-                    </td>
-                    <td className="px-6 py-4">
-                      <Badge color={roleColor(user.role?.nom)}>
-                        {user.role?.nom || 'N/A'}
-                      </Badge>
-                    </td>
-                    <td className="px-6 py-4">
-                      <span className={`inline-flex items-center gap-1.5 text-sm ${user.est_actif ? 'text-malachite-600' : 'text-red-500'}`}>
-                        <span className={`w-2 h-2 rounded-full ${user.est_actif ? 'bg-malachite-500' : 'bg-red-500'}`} />
                       {user.est_actif ? 'Actif' : 'Inactif'}
                     </span>
                   </td>
-                    <td className="px-6 py-4">
+                  <td>
-                      <div className="flex items-center justify-end gap-1">
+                    <ul className="fr-btns-group fr-btns-group--inline fr-btns-group--sm">
+                      <li>
                         <button
+                          type="button"
                           onClick={() => handleToggleActive(user.id)}
-                          className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                          className={`fr-btn fr-btn--sm fr-btn--tertiary fr-btn--icon-left ${user.est_actif ? 'fr-icon-close-circle-line' : 'fr-icon-checkbox-circle-line'}`}
                           title={user.est_actif ? 'Désactiver' : 'Activer'}
                         >
-                          {user.est_actif
+                          {user.est_actif ? 'Désactiver' : 'Activer'}
-                            ? <UserX size={16} className="text-red-500" />
-                            : <UserCheck size={16} className="text-malachite-500" />
-                          }
                         </button>
+                      </li>
+                      <li>
                         <button
+                          type="button"
                           onClick={() => handleDelete(user.id)}
-                          className="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors"
+                          className="fr-btn fr-btn--sm fr-btn--tertiary fr-btn--icon-left fr-icon-delete-line"
                           title="Supprimer"
                         >
-                          <Trash2 size={16} className="text-red-500" />
+                          Supprimer
                         </button>
-                      </div>
+                      </li>
+                    </ul>
                   </td>
                 </tr>
               ))
@@ -188,33 +185,41 @@ export default function AdminUtilisateursPage() {
           </tbody>
         </table>
       </div>
-      </Card>
 
       {/* Modal création */}
       <Modal isOpen={createModalOpen} onClose={() => setCreateModalOpen(false)} title="Nouvel utilisateur">
-        <form onSubmit={handleCreate} className="space-y-4">
+        <form onSubmit={handleCreate} className="fr-mt-2w">
-          <div className="grid grid-cols-2 gap-4">
+          <div className="fr-grid-row fr-grid-row--gutters">
+            <div className="fr-col-6">
               <Input label="Prénom" value={newUser.prenom} onChange={(e) => setNewUser({ ...newUser, prenom: e.target.value })} required />
+            </div>
+            <div className="fr-col-6">
               <Input label="Nom" value={newUser.nom} onChange={(e) => setNewUser({ ...newUser, nom: e.target.value })} required />
             </div>
+          </div>
           <Input label="Email" type="email" value={newUser.email} onChange={(e) => setNewUser({ ...newUser, email: e.target.value })} required />
           <Input label="Mot de passe" type="password" value={newUser.password} onChange={(e) => setNewUser({ ...newUser, password: e.target.value })} required />
           <Input label="Confirmer" type="password" value={newUser.password_confirmation} onChange={(e) => setNewUser({ ...newUser, password_confirmation: e.target.value })} required />
-          <div>
+          <div className="fr-select-group">
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Rôle</label>
+            <label className="fr-label" htmlFor="role-select">Rôle</label>
             <select
+              id="role-select"
+              className="fr-select"
               value={newUser.role_id}
               onChange={(e) => setNewUser({ ...newUser, role_id: Number(e.target.value) })}
-              className="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-candlelight-500"
             >
               <option value={2}>Membre</option>
               <option value={3}>Administrateur</option>
             </select>
           </div>
-          <div className="flex gap-3 pt-2">
+          <ul className="fr-btns-group fr-btns-group--inline fr-mt-2w">
+            <li>
               <Button type="submit" loading={formLoading}>Créer</Button>
+            </li>
+            <li>
               <Button variant="ghost" onClick={() => setCreateModalOpen(false)}>Annuler</Button>
-          </div>
+            </li>
+          </ul>
         </form>
       </Modal>
     </div>

frontend/src/app/(admin)/layout.tsx

@@ -7,16 +7,18 @@ export default function AdminLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="min-h-screen flex flex-col">
+    <>
       <Header />
-      <div className="flex flex-1">
+      <div className="fr-container--fluid fr-py-4w">
+        <div className="fr-grid-row fr-grid-row--gutters">
+          <div className="fr-col-12 fr-col-md-3 fr-col-lg-2">
             <Sidebar />
-        <main className="flex-1 bg-gray-50 dark:bg-gray-950">
-          <div className="p-6 lg:p-8">
-            {children}
           </div>
+          <main className="fr-col-12 fr-col-md-9 fr-col-lg-10" id="contenu">
+            {children}
           </main>
         </div>
       </div>
+    </>
   );
 }

frontend/src/app/(auth)/connexion/page.tsx

@@ -3,7 +3,6 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { Eye, EyeOff, Mail, Lock } from 'lucide-react';
 import { useAuthStore } from '@/lib/auth-store';
 import toast from 'react-hot-toast';
 
@@ -14,10 +13,12 @@ export default function ConnexionPage() {
   const [password, setPassword] = useState('');
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
+    setErrorMessage('');
 
     try {
       await login(email, password);
@@ -26,6 +27,7 @@ export default function ConnexionPage() {
     } catch (error: unknown) {
       const axiosError = error as import('axios').AxiosError<{ message?: string }>;
       const message = axiosError.response?.data?.message || 'Identifiants incorrects';
+      setErrorMessage(message);
       toast.error(message);
     } finally {
       setLoading(false);
@@ -33,91 +35,73 @@ export default function ConnexionPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-candlelight-50 via-white to-malachite-50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 px-4">
+    <>
-      <div className="w-full max-w-md">
+      <h1>Connexion</h1>
-        <div className="text-center mb-8">
+      <p className="fr-text--lead">Connectez-vous à votre compte CESIZen.</p>
-          <Link href="/" className="inline-block">
-            <h1 className="font-display text-4xl font-bold">
-              <span className="text-malachite-600 dark:text-malachite-400">CESI</span>
-              <span className="text-candlelight-500">ZEN</span>
-            </h1>
-          </Link>
-          <p className="text-gray-500 dark:text-gray-400 mt-2">Connectez-vous à votre compte</p>
-        </div>
 
-        <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-800 p-8">
+      {errorMessage && (
-          <form onSubmit={handleSubmit} className="space-y-5">
+        <div className="fr-alert fr-alert--error fr-alert--sm fr-mb-3w" role="alert">
-            <div>
+          <p>{errorMessage}</p>
-              <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <div className="fr-input-group">
+          <label className="fr-label" htmlFor="email">
             Adresse email
           </label>
-              <div className="relative">
-                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
           <input
             id="email"
             type="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             required
-                  className="w-full pl-11 pr-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-candlelight-500 focus:border-transparent outline-none transition-all"
+            className="fr-input"
             placeholder="vous@exemple.fr"
+            autoComplete="email"
           />
         </div>
-            </div>
 
-            <div>
+        <div className="fr-password" id="password-group">
-              <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+          <label className="fr-label" htmlFor="password">
             Mot de passe
           </label>
-              <div className="relative">
+          <div className="fr-input-wrap">
-                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
             <input
               id="password"
               type={showPassword ? 'text' : 'password'}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
-                  className="w-full pl-11 pr-12 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-candlelight-500 focus:border-transparent outline-none transition-all"
+              className="fr-password__input fr-input"
               placeholder="Votre mot de passe"
+              autoComplete="current-password"
             />
-                <button
+          </div>
-                  type="button"
+          <div className="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
-                  onClick={() => setShowPassword(!showPassword)}
+            <input
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+              id="password-show"
-                  aria-label={showPassword ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
+              type="checkbox"
-                >
+              checked={showPassword}
-                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+              onChange={() => setShowPassword(!showPassword)}
-                </button>
+            />
+            <label className="fr-label" htmlFor="password-show">
+              Afficher le mot de passe
+            </label>
           </div>
         </div>
 
-            <button
+        <button type="submit" disabled={loading} className="fr-btn fr-btn--lg">
-              type="submit"
+          {loading ? 'Connexion…' : 'Se connecter'}
-              disabled={loading}
-              className="w-full bg-candlelight-500 hover:bg-candlelight-600 disabled:opacity-50 disabled:cursor-not-allowed text-black font-semibold py-3 rounded-xl transition-all duration-200 hover:shadow-lg"
-            >
-              {loading ? (
-                <span className="inline-flex items-center gap-2">
-                  <svg className="animate-spin w-5 h-5" viewBox="0 0 24 24" fill="none">
-                    <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 12h4z" />
-                  </svg>
-                  Connexion...
-                </span>
-              ) : (
-                'Se connecter'
-              )}
         </button>
       </form>
 
-          <div className="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
+      <p className="fr-mt-4w">
         Pas encore de compte ?{' '}
-            <Link href="/inscription" className="text-malachite-600 dark:text-malachite-400 font-medium hover:underline">
+        <Link href="/inscription" className="fr-link">
           Créer un compte
         </Link>
-          </div>
+      </p>
-        </div>
+    </>
-      </div>
-    </div>
   );
 }

frontend/src/app/(auth)/inscription/page.tsx

@@ -3,7 +3,6 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { User, Mail, Lock, Eye, EyeOff } from 'lucide-react';
 import { useAuthStore } from '@/lib/auth-store';
 import toast from 'react-hot-toast';
 
@@ -50,27 +49,17 @@ export default function InscriptionPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-candlelight-50 via-white to-malachite-50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 px-4 py-12">
+    <>
-      <div className="w-full max-w-md">
+      <h1>Créer un compte</h1>
-        <div className="text-center mb-8">
+      <p className="fr-text--lead">Créez votre compte CESIZen gratuitement.</p>
-          <Link href="/" className="inline-block">
-            <h1 className="font-display text-4xl font-bold">
-              <span className="text-malachite-600 dark:text-malachite-400">CESI</span>
-              <span className="text-candlelight-500">ZEN</span>
-            </h1>
-          </Link>
-          <p className="text-gray-500 dark:text-gray-400 mt-2">Créez votre compte gratuitement</p>
-        </div>
 
-        <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-800 p-8">
+      <form onSubmit={handleSubmit}>
-          <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="fr-grid-row fr-grid-row--gutters">
-            <div className="grid grid-cols-2 gap-4">
+          <div className="fr-col-12 fr-col-md-6">
-              <div>
+            <div className={`fr-input-group${errors.prenom ? ' fr-input-group--error' : ''}`}>
-                <label htmlFor="prenom" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+              <label className="fr-label" htmlFor="prenom">
                 Prénom
               </label>
-                <div className="relative">
-                  <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
               <input
                 id="prenom"
                 name="prenom"
@@ -78,15 +67,21 @@ export default function InscriptionPage() {
                 value={form.prenom}
                 onChange={handleChange}
                 required
-                    className="w-full pl-11 pr-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-candlelight-500 focus:border-transparent outline-none transition-all"
+                className="fr-input"
                 placeholder="Jean"
+                aria-describedby={errors.prenom ? 'prenom-error' : undefined}
               />
+              {errors.prenom && (
+                <p id="prenom-error" className="fr-error-text">
+                  {errors.prenom[0]}
+                </p>
+              )}
             </div>
-                {errors.prenom && <p className="text-red-500 text-xs mt-1">{errors.prenom[0]}</p>}
           </div>
 
-              <div>
+          <div className="fr-col-12 fr-col-md-6">
-                <label htmlFor="nom" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+            <div className={`fr-input-group${errors.nom ? ' fr-input-group--error' : ''}`}>
+              <label className="fr-label" htmlFor="nom">
                 Nom
               </label>
               <input
@@ -96,19 +91,23 @@ export default function InscriptionPage() {
                 value={form.nom}
                 onChange={handleChange}
                 required
-                  className="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-candlelight-500 focus:border-transparent outline-none transition-all"
+                className="fr-input"
                 placeholder="Dupont"
+                aria-describedby={errors.nom ? 'nom-error' : undefined}
               />
-                {errors.nom && <p className="text-red-500 text-xs mt-1">{errors.nom[0]}</p>}
+              {errors.nom && (
+                <p id="nom-error" className="fr-error-text">
+                  {errors.nom[0]}
+                </p>
+              )}
+            </div>
           </div>
         </div>
 
-            <div>
+        <div className={`fr-input-group${errors.email ? ' fr-input-group--error' : ''}`}>
-              <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+          <label className="fr-label" htmlFor="email">
             Adresse email
           </label>
-              <div className="relative">
-                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
           <input
             id="email"
             name="email"
@@ -116,19 +115,23 @@ export default function InscriptionPage() {
             value={form.email}
             onChange={handleChange}
             required
-                  className="w-full pl-11 pr-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-candlelight-500 focus:border-transparent outline-none transition-all"
+            className="fr-input"
             placeholder="vous@exemple.fr"
+            autoComplete="email"
+            aria-describedby={errors.email ? 'email-error' : undefined}
           />
-              </div>
+          {errors.email && (
-              {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email[0]}</p>}
+            <p id="email-error" className="fr-error-text">
+              {errors.email[0]}
+            </p>
+          )}
         </div>
 
-            <div>
+        <div className={`fr-password${errors.password ? ' fr-input-group--error' : ''}`}>
-              <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+          <label className="fr-label" htmlFor="password">
             Mot de passe
           </label>
-              <div className="relative">
+          <div className="fr-input-wrap">
-                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
             <input
               id="password"
               name="password"
@@ -137,27 +140,23 @@ export default function InscriptionPage() {
               onChange={handleChange}
               required
               minLength={8}
-                  className="w-full pl-11 pr-12 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-candlelight-500 focus:border-transparent outline-none transition-all"
+              className="fr-password__input fr-input"
               placeholder="Minimum 8 caractères"
+              autoComplete="new-password"
+              aria-describedby={errors.password ? 'password-error' : undefined}
             />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
-                  aria-label={showPassword ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
-                >
-                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
-                </button>
           </div>
-              {errors.password && <p className="text-red-500 text-xs mt-1">{errors.password[0]}</p>}
+          {errors.password && (
+            <p id="password-error" className="fr-error-text">
+              {errors.password[0]}
+            </p>
+          )}
         </div>
 
-            <div>
+        <div className="fr-input-group">
-              <label htmlFor="password_confirmation" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+          <label className="fr-label" htmlFor="password_confirmation">
             Confirmer le mot de passe
           </label>
-              <div className="relative">
-                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
           <input
             id="password_confirmation"
             name="password_confirmation"
@@ -165,13 +164,25 @@ export default function InscriptionPage() {
             value={form.password_confirmation}
             onChange={handleChange}
             required
-                  className="w-full pl-11 pr-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-candlelight-500 focus:border-transparent outline-none transition-all"
+            className="fr-input"
             placeholder="Retapez votre mot de passe"
+            autoComplete="new-password"
           />
         </div>
+
+        <div className="fr-checkbox-group fr-checkbox-group--sm">
+          <input
+            id="password-show"
+            type="checkbox"
+            checked={showPassword}
+            onChange={() => setShowPassword(!showPassword)}
+          />
+          <label className="fr-label" htmlFor="password-show">
+            Afficher les mots de passe
+          </label>
         </div>
 
-            <div className="flex items-start gap-3 pt-2">
+        <div className={`fr-checkbox-group fr-mt-3w${errors.consentement_rgpd ? ' fr-input-group--error' : ''}`}>
           <input
             id="consentement_rgpd"
             name="consentement_rgpd"
@@ -179,45 +190,37 @@ export default function InscriptionPage() {
             checked={form.consentement_rgpd}
             onChange={handleChange}
             required
-                className="mt-1 w-4 h-4 rounded border-gray-300 text-candlelight-500 focus:ring-candlelight-500"
+            aria-describedby={errors.consentement_rgpd ? 'consentement-error' : undefined}
           />
-              <label htmlFor="consentement_rgpd" className="text-sm text-gray-600 dark:text-gray-400">
+          <label className="fr-label" htmlFor="consentement_rgpd">
             J&apos;accepte le traitement de mes données personnelles conformément à la{' '}
-                <Link href="/politique-de-confidentialite" className="text-malachite-600 dark:text-malachite-400 hover:underline">
+            <Link href="/politique-de-confidentialite" className="fr-link">
               politique de confidentialité
             </Link>
             . Mes données sont chiffrées et je peux supprimer mon compte à tout moment.
           </label>
+          {errors.consentement_rgpd && (
+            <p id="consentement-error" className="fr-error-text">
+              {errors.consentement_rgpd[0]}
+            </p>
+          )}
         </div>
-            {errors.consentement_rgpd && <p className="text-red-500 text-xs">{errors.consentement_rgpd[0]}</p>}
 
         <button
           type="submit"
           disabled={loading || !form.consentement_rgpd}
-              className="w-full bg-malachite-500 hover:bg-malachite-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold py-3 rounded-xl transition-all duration-200 hover:shadow-lg mt-2"
+          className="fr-btn fr-btn--lg fr-mt-3w"
         >
-              {loading ? (
+          {loading ? 'Inscription…' : 'Créer mon compte'}
-                <span className="inline-flex items-center gap-2">
-                  <svg className="animate-spin w-5 h-5" viewBox="0 0 24 24" fill="none">
-                    <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 12h4z" />
-                  </svg>
-                  Inscription...
-                </span>
-              ) : (
-                'Créer mon compte'
-              )}
         </button>
       </form>
 
-          <div className="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
+      <p className="fr-mt-4w">
         Déjà un compte ?{' '}
-            <Link href="/connexion" className="text-malachite-600 dark:text-malachite-400 font-medium hover:underline">
+        <Link href="/connexion" className="fr-link">
           Se connecter
         </Link>
-          </div>
+      </p>
-        </div>
+    </>
-      </div>
-    </div>
   );
 }

frontend/src/app/(auth)/layout.tsx

@@ -0,0 +1,13 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="fr-container fr-py-8w">
+      <div className="fr-grid-row fr-grid-row--center">
+        <div className="fr-col-12 fr-col-md-8 fr-col-lg-6">{children}</div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(protected)/dashboard/page.tsx

@@ -1,13 +1,9 @@
 'use client';
 
 import Link from 'next/link';
-import { Heart, BarChart3, Plus, BookOpen } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
 import { useSaisies } from '@/hooks/useTracker';
 import { useRapport } from '@/hooks/useRapport';
-import Card from '@/components/ui/Card';
-import Badge from '@/components/ui/Badge';
-import Skeleton from '@/components/ui/Skeleton';
 
 export default function DashboardPage() {
   const { user } = useAuth();
@@ -17,177 +13,202 @@ export default function DashboardPage() {
   const recentSaisies = saisies?.slice(0, 5) || [];
 
   return (
-    <div>
+    <div className="fr-container fr-py-6w">
       {/* En-tête */}
-      <div className="mb-8">
+      <h1>Bonjour {user?.prenom}</h1>
-        <h1 className="font-display text-3xl font-bold text-gray-900 dark:text-white mb-2">
+      <p className="fr-text--lead">
-          Bonjour {user?.prenom} 👋
-        </h1>
-        <p className="text-gray-500 dark:text-gray-400">
         Voici un aperçu de votre bien-être cette semaine.
       </p>
-      </div>
 
       {/* Actions rapides */}
-      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
+      <div className="fr-grid-row fr-grid-row--gutters fr-mb-4w">
+        <div className="fr-col-12 fr-col-md-4">
+          <div className="fr-tile fr-tile--horizontal fr-enlarge-link">
+            <div className="fr-tile__body">
+              <div className="fr-tile__content">
+                <h3 className="fr-tile__title">
                   <Link href="/journal/nouvelle-saisie">
-          <Card hover className="flex items-center gap-4 bg-linear-to-r from-candlelight-50 to-candlelight-100 dark:from-candlelight-950/30 dark:to-candlelight-900/20 border-candlelight-200 dark:border-candlelight-800">
+                    <span
-            <div className="w-12 h-12 rounded-xl bg-candlelight-200 dark:bg-candlelight-900 flex items-center justify-center">
+                      className="fr-icon-add-line fr-mr-1w"
-              <Plus className="text-candlelight-700 dark:text-candlelight-400" size={24} />
+                      aria-hidden="true"
-            </div>
+                    />
-            <div>
+                    Nouvelle saisie
-              <p className="font-semibold text-gray-900 dark:text-white">Nouvelle saisie</p>
-              <p className="text-sm text-gray-500 dark:text-gray-400">Enregistrer une émotion</p>
-            </div>
-          </Card>
                   </Link>
+                </h3>
+                <p className="fr-tile__detail">Enregistrer une émotion</p>
+              </div>
+            </div>
+          </div>
+        </div>
 
+        <div className="fr-col-12 fr-col-md-4">
+          <div className="fr-tile fr-tile--horizontal fr-enlarge-link">
+            <div className="fr-tile__body">
+              <div className="fr-tile__content">
+                <h3 className="fr-tile__title">
                   <Link href="/journal">
-          <Card hover className="flex items-center gap-4">
+                    <span
-            <div className="w-12 h-12 rounded-xl bg-malachite-100 dark:bg-malachite-900 flex items-center justify-center">
+                      className="fr-icon-book-2-line fr-mr-1w"
-              <BookOpen className="text-malachite-600 dark:text-malachite-400" size={24} />
+                      aria-hidden="true"
-            </div>
+                    />
-            <div>
+                    Mon journal
-              <p className="font-semibold text-gray-900 dark:text-white">Mon journal</p>
-              <p className="text-sm text-gray-500 dark:text-gray-400">Voir toutes mes saisies</p>
-            </div>
-          </Card>
                   </Link>
+                </h3>
+                <p className="fr-tile__detail">Voir toutes mes saisies</p>
+              </div>
+            </div>
+          </div>
+        </div>
 
+        <div className="fr-col-12 fr-col-md-4">
+          <div className="fr-tile fr-tile--horizontal fr-enlarge-link">
+            <div className="fr-tile__body">
+              <div className="fr-tile__content">
+                <h3 className="fr-tile__title">
                   <Link href="/journal/rapports">
-          <Card hover className="flex items-center gap-4">
+                    <span
-            <div className="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
+                      className="fr-icon-line-chart-line fr-mr-1w"
-              <BarChart3 className="text-blue-600 dark:text-blue-400" size={24} />
+                      aria-hidden="true"
-            </div>
+                    />
-            <div>
+                    Mes rapports
-              <p className="font-semibold text-gray-900 dark:text-white">Mes rapports</p>
-              <p className="text-sm text-gray-500 dark:text-gray-400">Visualiser mes tendances</p>
-            </div>
-          </Card>
                   </Link>
+                </h3>
+                <p className="fr-tile__detail">Visualiser mes tendances</p>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       {/* Stats de la semaine */}
-      <div className="grid sm:grid-cols-3 gap-4 mb-8">
+      <div className="fr-grid-row fr-grid-row--gutters fr-mb-4w">
         {rapportLoading ? (
           Array.from({ length: 3 }).map((_, i) => (
-            <Card key={i}>
+            <div className="fr-col-12 fr-col-md-4" key={i}>
-              <Skeleton className="h-4 w-24 mb-2" />
+              <div className="fr-tile fr-tile--vertical">
-              <Skeleton className="h-8 w-16" />
+                <div className="fr-tile__body">
-            </Card>
+                  <div className="fr-tile__content">
+                    <p className="fr-tile__detail">Chargement…</p>
+                  </div>
+                </div>
+              </div>
+            </div>
           ))
         ) : (
           <>
-            <Card>
+            <div className="fr-col-12 fr-col-md-4">
-              <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">Saisies cette semaine</p>
+              <div className="fr-tile fr-tile--vertical">
-              <p className="text-3xl font-bold text-gray-900 dark:text-white">
+                <div className="fr-tile__body">
+                  <div className="fr-tile__content">
+                    <p className="fr-tile__detail">Saisies cette semaine</p>
+                    <p className="fr-h2 fr-mb-0">
                       {rapport?.stats.total_saisies || 0}
                     </p>
-            </Card>
-            <Card>
-              <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">Intensité moyenne</p>
-              <div className="flex items-center gap-2">
-                <p className="text-3xl font-bold text-gray-900 dark:text-white">
-                  {rapport?.stats.intensite_moyenne?.toFixed(1) || '—'}
-                </p>
-                <span className="text-sm text-gray-400">/10</span>
                   </div>
-            </Card>
+                </div>
-            <Card>
+              </div>
-              <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">Émotion dominante</p>
+            </div>
+            <div className="fr-col-12 fr-col-md-4">
+              <div className="fr-tile fr-tile--vertical">
+                <div className="fr-tile__body">
+                  <div className="fr-tile__content">
+                    <p className="fr-tile__detail">Intensité moyenne</p>
+                    <p className="fr-h2 fr-mb-0">
+                      {rapport?.stats.intensite_moyenne?.toFixed(1) || '—'}
+                      <span className="fr-text--sm"> /10</span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="fr-col-12 fr-col-md-4">
+              <div className="fr-tile fr-tile--vertical">
+                <div className="fr-tile__body">
+                  <div className="fr-tile__content">
+                    <p className="fr-tile__detail">Émotion dominante</p>
                     {rapport?.stats.emotion_dominante ? (
-                <div className="flex items-center gap-2">
+                      <p className="fr-mb-0">
-                  <Badge color={rapport.stats.emotion_dominante.couleur}>
+                        <span className="fr-badge fr-badge--info">
                           {rapport.stats.emotion_dominante.nom}
-                  </Badge>
+                        </span>
-                  <span className="text-sm text-gray-400">
+                        <span className="fr-text--sm">
+                          {' '}
                           ({rapport.stats.emotion_dominante.count}x)
                         </span>
-                </div>
+                      </p>
                     ) : (
-                <p className="text-xl text-gray-300 dark:text-gray-600">—</p>
+                      <p className="fr-h4 fr-mb-0">—</p>
                     )}
-            </Card>
+                  </div>
+                </div>
+              </div>
+            </div>
           </>
         )}
       </div>
 
       {/* Saisies récentes */}
-      <Card>
+      <div className="fr-card">
-        <div className="flex items-center justify-between mb-4">
+        <div className="fr-card__body">
-          <h2 className="font-display text-lg font-semibold text-gray-900 dark:text-white">
+          <div className="fr-card__content">
-            Saisies récentes
+            <div className="fr-grid-row fr-grid-row--middle fr-mb-2w">
-          </h2>
+              <h2 className="fr-col fr-h5 fr-mb-0">Saisies récentes</h2>
-          <Link
+              <p className="fr-col--right fr-mb-0">
-            href="/journal"
+                <Link href="/journal" className="fr-link">
-            className="text-sm text-malachite-600 dark:text-malachite-400 hover:underline"
+                  Voir tout
-          >
-            Voir tout →
                 </Link>
+              </p>
             </div>
 
             {saisiesLoading ? (
-          <div className="space-y-3">
+              <p>Chargement…</p>
-            {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="flex items-center gap-3">
-                <Skeleton variant="circle" />
-                <div className="flex-1">
-                  <Skeleton className="h-4 w-32 mb-1" />
-                  <Skeleton className="h-3 w-48" />
-                </div>
-              </div>
-            ))}
-          </div>
             ) : recentSaisies.length > 0 ? (
-          <div className="space-y-3">
+              <ul className="fr-raw-list">
                 {recentSaisies.map((saisie) => (
-              <div
+                  <li
                     key={saisie.id}
-                className="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+                    className="fr-py-1w"
-              >
+                    style={{ borderBottom: '1px solid var(--border-default-grey)' }}
-                <div
-                  className="w-10 h-10 rounded-lg flex items-center justify-center text-lg shrink-0"
-                  style={{ backgroundColor: `${saisie.emotion?.couleur}20` }}
                   >
+                    <div className="fr-grid-row fr-grid-row--middle">
+                      <span className="fr-mr-2w" style={{ fontSize: '1.5rem' }}>
                         {saisie.emotion?.icone || '🔵'}
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="font-medium text-gray-900 dark:text-white text-sm">
-                      {saisie.emotion?.nom}
                       </span>
-                    <span className="text-xs text-gray-400">
+                      <span className="fr-col">
+                        <strong>{saisie.emotion?.nom}</strong>{' '}
+                        <span className="fr-text--sm">
                           {saisie.intensite}/10
                         </span>
-                  </div>
                         {saisie.note && (
-                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                          <span className="fr-text--sm fr-text-mention--grey fr-display-block">
                             {saisie.note}
-                    </p>
+                          </span>
                         )}
-                </div>
+                      </span>
-                <span className="text-xs text-gray-400 dark:text-gray-500 shrink-0">
+                      <span className="fr-text--sm fr-text-mention--grey">
                         {new Date(saisie.date_saisie).toLocaleDateString('fr-FR', {
                           day: 'numeric',
                           month: 'short',
                         })}
                       </span>
                     </div>
+                  </li>
                 ))}
-          </div>
+              </ul>
             ) : (
-          <div className="text-center py-8 text-gray-400 dark:text-gray-600">
+              <div className="fr-callout">
-            <Heart size={32} className="mx-auto mb-2 opacity-50" />
+                <p className="fr-callout__text">Aucune saisie pour le moment.</p>
-            <p>Aucune saisie pour le moment</p>
                 <Link
+                  className="fr-btn fr-btn--sm fr-icon-add-line fr-btn--icon-left"
                   href="/journal/nouvelle-saisie"
-              className="text-sm text-candlelight-600 hover:underline mt-2 inline-block"
                 >
                   Faire ma première saisie
                 </Link>
               </div>
             )}
-      </Card>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

frontend/src/app/(protected)/journal/nouvelle-saisie/page.tsx

@@ -2,12 +2,9 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { ArrowLeft, ArrowRight, Check } from 'lucide-react';
 import { useCreateSaisie } from '@/hooks/useTracker';
 import EmotionPicker from '@/components/features/EmotionPicker';
 import Slider from '@/components/ui/Slider';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
 import toast from 'react-hot-toast';
 
 const STEPS = [
@@ -49,57 +46,48 @@ export default function NouvelleSaisiePage() {
     }
   };
 
+  const nextStep = STEPS[step]?.title;
+
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="fr-container fr-py-6w">
+      <div className="fr-grid-row fr-grid-row--center">
+        <div className="fr-col-12 fr-col-md-8">
           <button
+            type="button"
             onClick={() => router.back()}
-        className="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mb-6 transition-colors"
+            className="fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left fr-mb-2w"
           >
-        <ArrowLeft size={16} />
             Retour
           </button>
 
-      <h1 className="font-display text-3xl font-bold text-gray-900 dark:text-white mb-2">
+          <h1>Nouvelle saisie</h1>
-        Nouvelle saisie
+          <p className="fr-text--lead">
-      </h1>
-      <p className="text-gray-500 dark:text-gray-400 mb-8">
             Enregistrez votre émotion en quelques étapes simples.
           </p>
 
-      {/* Stepper */}
+          {/* Stepper DSFR */}
-      <div className="flex items-center gap-2 mb-8">
+          <div className="fr-stepper">
-        {STEPS.map((s) => (
+            <h2 className="fr-stepper__title">
-          <div key={s.id} className="flex items-center gap-2 flex-1">
+              {STEPS[step - 1].title}
+              <span className="fr-stepper__state">
+                Étape {step} sur {STEPS.length}
+              </span>
+            </h2>
             <div
-              className={`
+              className="fr-stepper__steps"
-                w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold shrink-0
+              data-fr-current-step={step}
-                ${step > s.id
+              data-fr-steps={STEPS.length}
-                  ? 'bg-malachite-500 text-white'
-                  : step === s.id
-                  ? 'bg-candlelight-500 text-black'
-                  : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
-                }
-              `}
-            >
-              {step > s.id ? <Check size={16} /> : s.id}
-            </div>
-            {s.id < STEPS.length && (
-              <div
-                className={`flex-1 h-0.5 ${
-                  step > s.id ? 'bg-malachite-500' : 'bg-gray-200 dark:bg-gray-700'
-                }`}
             />
+            {nextStep && (
+              <p className="fr-stepper__details">
+                <span className="fr-text--bold">Étape suivante :</span> {nextStep}
+              </p>
             )}
           </div>
-        ))}
-      </div>
 
           {/* Étape actuelle */}
-      <Card className="mb-6">
+          <div className="app-panel fr-p-3w fr-mb-3w">
-        <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-1">
+            <p className="fr-text--sm fr-text-mention--grey fr-mb-3w">
-          {STEPS[step - 1].title}
-        </h2>
-        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
               {STEPS[step - 1].description}
             </p>
 
@@ -108,7 +96,7 @@ export default function NouvelleSaisiePage() {
             )}
 
             {step === 2 && (
-          <div className="space-y-6">
+              <div>
                 <Slider
                   value={intensite}
                   onChange={setIntensite}
@@ -116,73 +104,82 @@ export default function NouvelleSaisiePage() {
                   max={10}
                   label="Intensité de l'émotion"
                 />
-            <div className="flex justify-between text-xs text-gray-400">
+                <div className="fr-grid-row fr-grid-row--middle fr-mt-1w">
-              <span>Faible</span>
+                  <span className="fr-col fr-text--sm">Faible</span>
-              <span>Modérée</span>
+                  <span className="fr-col fr-text--sm" style={{ textAlign: 'center' }}>
-              <span>Forte</span>
+                    Modérée
+                  </span>
+                  <span className="fr-col fr-text--sm" style={{ textAlign: 'right' }}>
+                    Forte
+                  </span>
                 </div>
               </div>
             )}
 
             {step === 3 && (
-          <div className="space-y-4">
               <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+                <div className="fr-input-group">
+                  <label className="fr-label" htmlFor="saisie-date">
                     Date de la saisie
                   </label>
                   <input
+                    id="saisie-date"
+                    className="fr-input"
                     type="date"
                     value={dateSaisie}
                     onChange={(e) => setDateSaisie(e.target.value)}
-                className="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-candlelight-500"
                   />
                 </div>
-            <div>
+                <div className="fr-input-group">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+                  <label className="fr-label" htmlFor="saisie-note">
                     Note (optionnel)
                   </label>
                   <textarea
+                    id="saisie-note"
+                    className="fr-input"
                     value={note}
                     onChange={(e) => setNote(e.target.value)}
                     placeholder="Décrivez ce que vous ressentez, ce qui a déclenché cette émotion..."
                     rows={4}
-                className="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-candlelight-500 placeholder:text-gray-400 resize-none"
                   />
                 </div>
               </div>
             )}
-      </Card>
+          </div>
 
-      {/* Navigation */}
+          {/* Navigation (flex simple pour éviter le rognage des libellés
-      <div className="flex justify-between">
+              dans un groupe DSFR avec boutons à icône) */}
-        <Button
+          <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
-          variant="ghost"
+            <button
+              type="button"
+              className="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-line"
               onClick={() => setStep(step - 1)}
               disabled={step === 1}
             >
-          <ArrowLeft size={16} />
               Précédent
-        </Button>
+            </button>
-
             {step < 3 ? (
-          <Button
+              <button
+                type="button"
+                className="fr-btn fr-btn--icon-right fr-icon-arrow-right-line"
                 onClick={() => setStep(step + 1)}
                 disabled={!canNext()}
               >
                 Suivant
-            <ArrowRight size={16} />
+              </button>
-          </Button>
             ) : (
-          <Button
+              <button
+                type="button"
+                className="fr-btn fr-btn--icon-left fr-icon-check-line"
                 onClick={handleSubmit}
-            loading={createSaisie.isPending}
+                disabled={!emotionId || createSaisie.isPending}
-            disabled={!emotionId}
               >
-            <Check size={16} />
                 Enregistrer
-          </Button>
+              </button>
             )}
           </div>
         </div>
+      </div>
+    </div>
   );
 }

frontend/src/app/(protected)/journal/page.tsx

@@ -2,14 +2,10 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
-import { Plus, Filter, Download } from 'lucide-react';
 import { useSaisies, useDeleteSaisie } from '@/hooks/useTracker';
 import { useEmotions } from '@/hooks/useEmotions';
 import TrackerTimeline from '@/components/features/TrackerTimeline';
 import EditSaisieModal from '@/components/features/EditSaisieModal';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import Skeleton from '@/components/ui/Skeleton';
 import ConfirmDialog from '@/components/ui/ConfirmDialog';
 import toast from 'react-hot-toast';
 import type { SaisieTracker } from '@/types';
@@ -71,72 +67,98 @@ export default function JournalPage() {
   };
 
   return (
-    <div>
+    <div className="fr-container fr-py-6w">
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
+      <div className="fr-grid-row fr-grid-row--middle fr-mb-4w">
-        <div>
+        <div className="fr-col-12 fr-col-md">
-          <h1 className="font-display text-3xl font-bold text-gray-900 dark:text-white mb-1">
+          <h1 className="fr-mb-1v">Mon journal</h1>
-            Mon journal
+          <p className="fr-text--lead fr-mb-0">
-          </h1>
-          <p className="text-gray-500 dark:text-gray-400">
             Historique de vos émotions au quotidien
           </p>
         </div>
-        <div className="flex gap-3">
+        <div className="fr-col-12 fr-col-md--right">
-          <Button
+          <ul className="fr-btns-group fr-btns-group--inline-md fr-btns-group--right">
-            variant="ghost"
+            <li>
-            size="sm"
+              <button
+                type="button"
+                className="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-filter-line fr-btn--icon-left"
                 onClick={() => setShowFilters(!showFilters)}
               >
-            <Filter size={16} />
                 Filtrer
-          </Button>
+              </button>
-          <Button variant="ghost" size="sm" onClick={handleExport} title="Exporter mes saisies (RGPD)">
+            </li>
-            <Download size={16} />
+            <li>
+              <button
+                type="button"
+                className="fr-btn fr-btn--tertiary fr-btn--sm fr-icon-download-line fr-btn--icon-left"
+                onClick={handleExport}
+                title="Exporter mes saisies (RGPD)"
+              >
                 Export CSV
-          </Button>
+              </button>
-          <Link href="/journal/nouvelle-saisie">
+            </li>
-            <Button size="sm">
+            <li>
-              <Plus size={16} />
+              <Link
+                href="/journal/nouvelle-saisie"
+                className="fr-btn fr-btn--sm fr-icon-add-line fr-btn--icon-left"
+              >
                 Nouvelle saisie
-            </Button>
               </Link>
+            </li>
+          </ul>
         </div>
       </div>
 
       {/* Filtres */}
       {showFilters && (
-        <Card className="mb-6">
+        <div className="app-panel fr-p-3w fr-mb-4w">
-          <div className="grid sm:grid-cols-3 gap-4">
+          <div className="fr-grid-row fr-grid-row--gutters">
-            <div>
+            <div className="fr-col-12 fr-col-md-4">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+              <div className="fr-input-group">
+                <label className="fr-label" htmlFor="filtre-date-debut">
                   Date début
                 </label>
                 <input
+                  id="filtre-date-debut"
+                  className="fr-input"
                   type="date"
                   value={filters.date_debut || ''}
-                onChange={(e) => setFilters({ ...filters, date_debut: e.target.value || undefined })}
+                  onChange={(e) =>
-                className="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-candlelight-500"
+                    setFilters({ ...filters, date_debut: e.target.value || undefined })
+                  }
                 />
               </div>
-            <div>
+            </div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+            <div className="fr-col-12 fr-col-md-4">
+              <div className="fr-input-group">
+                <label className="fr-label" htmlFor="filtre-date-fin">
                   Date fin
                 </label>
                 <input
+                  id="filtre-date-fin"
+                  className="fr-input"
                   type="date"
                   value={filters.date_fin || ''}
-                onChange={(e) => setFilters({ ...filters, date_fin: e.target.value || undefined })}
+                  onChange={(e) =>
-                className="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-candlelight-500"
+                    setFilters({ ...filters, date_fin: e.target.value || undefined })
+                  }
                 />
               </div>
-            <div>
+            </div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+            <div className="fr-col-12 fr-col-md-4">
+              <div className="fr-select-group">
+                <label className="fr-label" htmlFor="filtre-emotion">
                   Émotion
                 </label>
                 <select
+                  id="filtre-emotion"
+                  className="fr-select"
                   value={filters.emotion_id || ''}
-                onChange={(e) => setFilters({ ...filters, emotion_id: e.target.value ? Number(e.target.value) : undefined })}
+                  onChange={(e) =>
-                className="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-candlelight-500"
+                    setFilters({
+                      ...filters,
+                      emotion_id: e.target.value ? Number(e.target.value) : undefined,
+                    })
+                  }
                 >
                   <option value="">Toutes</option>
                   {emotions?.map((emotion) => (
@@ -147,31 +169,24 @@ export default function JournalPage() {
                 </select>
               </div>
             </div>
-          <div className="mt-4 flex gap-2">
+          </div>
-            <Button
+          <ul className="fr-btns-group fr-btns-group--inline-md fr-mt-2w">
-              variant="ghost"
+            <li>
-              size="sm"
+              <button
+                type="button"
+                className="fr-btn fr-btn--tertiary fr-btn--sm"
                 onClick={() => setFilters({})}
               >
                 Réinitialiser
-            </Button>
+              </button>
+            </li>
+          </ul>
         </div>
-        </Card>
       )}
 
       {/* Timeline */}
       {isLoading ? (
-        <div className="space-y-4">
+        <p>Chargement…</p>
-          {Array.from({ length: 5 }).map((_, i) => (
-            <div key={i} className="flex items-center gap-4 p-4 bg-white dark:bg-gray-900 rounded-xl">
-              <Skeleton variant="circle" className="w-12 h-12" />
-              <div className="flex-1">
-                <Skeleton className="h-4 w-32 mb-2" />
-                <Skeleton className="h-3 w-48" />
-              </div>
-            </div>
-          ))}
-        </div>
       ) : (
         <TrackerTimeline
           saisies={saisies || []}

frontend/src/app/(protected)/journal/rapports/page.tsx

@@ -3,10 +3,6 @@
 import { useState } from 'react';
 import { useRapport } from '@/hooks/useRapport';
 import EmotionChart from '@/components/features/EmotionChart';
-import Card from '@/components/ui/Card';
-import Skeleton from '@/components/ui/Skeleton';
-import Badge from '@/components/ui/Badge';
-import { BarChart3, TrendingUp, PieChart } from 'lucide-react';
 
 type Period = 'week' | 'month' | 'quarter' | 'year';
 
@@ -22,169 +18,192 @@ export default function RapportsPage() {
   const { data: rapport, isLoading } = useRapport(period);
 
   return (
-    <div>
+    <div className="fr-container fr-py-6w">
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
+      <div className="fr-grid-row fr-grid-row--middle fr-mb-4w">
-        <div>
+        <div className="fr-col-12 fr-col-md">
-          <h1 className="font-display text-3xl font-bold text-gray-900 dark:text-white mb-1">
+          <h1 className="fr-mb-1v">Mes rapports</h1>
-            Mes rapports
+          <p className="fr-text--lead fr-mb-0">
-          </h1>
-          <p className="text-gray-500 dark:text-gray-400">
             Analysez vos tendances émotionnelles
           </p>
         </div>
 
         {/* Sélecteur de période */}
-        <div className="flex bg-gray-100 dark:bg-gray-800 rounded-xl p-1">
+        <div className="fr-col-12 fr-col-md--right">
+          <fieldset className="fr-segmented fr-segmented--sm">
+            <legend className="fr-segmented__legend">Période</legend>
+            <div className="fr-segmented__elements">
               {PERIODS.map((p) => (
-            <button
+                <div className="fr-segmented__element" key={p.value}>
-              key={p.value}
+                  <input
-              onClick={() => setPeriod(p.value)}
+                    type="radio"
-              className={`
+                    id={`period-${p.value}`}
-                px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200
+                    name="period"
-                ${period === p.value
+                    checked={period === p.value}
-                  ? 'bg-white dark:bg-gray-700 shadow-sm text-gray-900 dark:text-white'
+                    onChange={() => setPeriod(p.value)}
-                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+                  />
-                }
+                  <label className="fr-label" htmlFor={`period-${p.value}`}>
-              `}
-            >
                     {p.label}
-            </button>
+                  </label>
+                </div>
               ))}
             </div>
+          </fieldset>
+        </div>
       </div>
 
       {isLoading ? (
-        <div className="space-y-6">
+        <p>Chargement…</p>
-          <div className="grid sm:grid-cols-3 gap-4">
-            {Array.from({ length: 3 }).map((_, i) => (
-              <Card key={i}>
-                <Skeleton className="h-4 w-24 mb-2" />
-                <Skeleton className="h-8 w-16" />
-              </Card>
-            ))}
-          </div>
-          <Card>
-            <Skeleton variant="rect" className="h-80" />
-          </Card>
-        </div>
       ) : rapport ? (
-        <div className="space-y-6">
+        <>
           {/* Stats résumées */}
-          <div className="grid sm:grid-cols-3 gap-4">
+          <div className="fr-grid-row fr-grid-row--gutters fr-mb-3w">
-            <Card>
+            <div className="fr-col-12 fr-col-md-4">
-              <div className="flex items-center gap-3 mb-2">
+              <div className="fr-tile fr-tile--vertical">
-                <BarChart3 size={18} className="text-candlelight-500" />
+                <div className="fr-tile__body">
-                <p className="text-sm text-gray-500 dark:text-gray-400">Total saisies</p>
+                  <div className="fr-tile__content">
+                    <h3 className="fr-tile__title">
+                      <span
+                        className="fr-icon-bar-chart-box-line fr-mr-1w"
+                        aria-hidden="true"
+                      />
+                      Total saisies
+                    </h3>
+                    <p className="fr-h3 fr-mb-1v">{rapport.stats.total_saisies}</p>
+                    <p className="fr-tile__detail">
+                      Du {new Date(rapport.date_debut).toLocaleDateString('fr-FR')} au{' '}
+                      {new Date(rapport.date_fin).toLocaleDateString('fr-FR')}
+                    </p>
+                  </div>
+                </div>
+              </div>
             </div>
-              <p className="text-3xl font-bold text-gray-900 dark:text-white">
-                {rapport.stats.total_saisies}
-              </p>
-              <p className="text-xs text-gray-400 mt-1">
-                Du {new Date(rapport.date_debut).toLocaleDateString('fr-FR')} au {new Date(rapport.date_fin).toLocaleDateString('fr-FR')}
-              </p>
-            </Card>
 
-            <Card>
+            <div className="fr-col-12 fr-col-md-4">
-              <div className="flex items-center gap-3 mb-2">
+              <div className="fr-tile fr-tile--vertical">
-                <TrendingUp size={18} className="text-malachite-500" />
+                <div className="fr-tile__body">
-                <p className="text-sm text-gray-500 dark:text-gray-400">Intensité moyenne</p>
+                  <div className="fr-tile__content">
-              </div>
+                    <h3 className="fr-tile__title">
-              <div className="flex items-baseline gap-2">
+                      <span
-                <p className="text-3xl font-bold text-gray-900 dark:text-white">
+                        className="fr-icon-line-chart-line fr-mr-1w"
+                        aria-hidden="true"
+                      />
+                      Intensité moyenne
+                    </h3>
+                    <p className="fr-h3 fr-mb-0">
                       {rapport.stats.intensite_moyenne?.toFixed(1) || '—'}
+                      <span className="fr-text--sm"> /10</span>
                     </p>
-                <span className="text-sm text-gray-400">/10</span>
                   </div>
-            </Card>
+                </div>
+              </div>
+            </div>
 
-            <Card>
+            <div className="fr-col-12 fr-col-md-4">
-              <div className="flex items-center gap-3 mb-2">
+              <div className="fr-tile fr-tile--vertical">
-                <PieChart size={18} className="text-blue-500" />
+                <div className="fr-tile__body">
-                <p className="text-sm text-gray-500 dark:text-gray-400">Émotion dominante</p>
+                  <div className="fr-tile__content">
-              </div>
+                    <h3 className="fr-tile__title">
+                      <span
+                        className="fr-icon-pie-chart-2-line fr-mr-1w"
+                        aria-hidden="true"
+                      />
+                      Émotion dominante
+                    </h3>
                     {rapport.stats.emotion_dominante ? (
-                <div>
+                      <p className="fr-mb-0">
-                  <Badge color={rapport.stats.emotion_dominante.couleur}>
+                        <span className="fr-badge fr-badge--info">
                           {rapport.stats.emotion_dominante.nom}
-                  </Badge>
+                        </span>
-                  <p className="text-xs text-gray-400 mt-1">
+                        <span className="fr-text--sm fr-display-block fr-mt-1v">
                           {rapport.stats.emotion_dominante.count} fois
+                        </span>
                       </p>
-                </div>
                     ) : (
-                <p className="text-xl text-gray-300 dark:text-gray-600">—</p>
+                      <p className="fr-h4 fr-mb-0">—</p>
                     )}
-            </Card>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
 
           {/* Répartition (Camembert) */}
-          <Card>
+          <div className="app-panel fr-p-3w fr-mb-3w">
-            <h2 className="font-display text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            <h2 className="fr-h5">Répartition des émotions</h2>
-              Répartition des émotions
-            </h2>
             <EmotionChart data={rapport} type="repartition" />
-          </Card>
+          </div>
 
           {/* Évolution (Lignes) */}
-          <Card>
+          <div className="app-panel fr-p-3w fr-mb-3w">
-            <h2 className="font-display text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            <h2 className="fr-h5">Évolution dans le temps</h2>
-              Évolution dans le temps
-            </h2>
             <EmotionChart data={rapport} type="evolution" />
-          </Card>
+          </div>
 
           {/* Intensité moyenne (Barres) */}
-          <Card>
+          <div className="app-panel fr-p-3w fr-mb-3w">
-            <h2 className="font-display text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            <h2 className="fr-h5">Intensité moyenne par période</h2>
-              Intensité moyenne par période
-            </h2>
             <EmotionChart data={rapport} type="intensite" />
-          </Card>
+          </div>
 
           {/* Détail répartition */}
           {rapport.repartition.length > 0 && (
-            <Card>
+            <div className="app-panel fr-p-3w">
-              <h2 className="font-display text-lg font-semibold text-gray-900 dark:text-white mb-4">
+              <h2 className="fr-h5">Détail par émotion</h2>
-                Détail par émotion
+              <ul className="fr-raw-list">
-              </h2>
-              <div className="space-y-3">
                 {rapport.repartition.map((item) => (
-                  <div key={item.nom} className="flex items-center gap-4">
+                  <li key={item.nom} className="fr-py-1w">
-                    <div
+                    <div className="fr-grid-row fr-grid-row--middle">
-                      className="w-3 h-3 rounded-full shrink-0"
+                      <span
-                      style={{ backgroundColor: item.couleur }}
+                        className="fr-mr-2w"
-                    />
+                        aria-hidden="true"
-                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300 w-32">
-                      {item.nom}
-                    </span>
-                    <div className="flex-1 h-2 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
-                      <div
-                        className="h-full rounded-full transition-all duration-500"
                         style={{
+                          display: 'inline-block',
+                          width: '0.75rem',
+                          height: '0.75rem',
+                          borderRadius: '50%',
+                          backgroundColor: item.couleur,
+                        }}
+                      />
+                      <span className="fr-col">
+                        <strong>{item.nom}</strong>
+                      </span>
+                      <span className="fr-text--sm fr-mr-3w">
+                        {item.pourcentage}%
+                      </span>
+                      <span className="fr-text--sm fr-text-mention--grey">
+                        Moy : {item.intensite_moyenne.toFixed(1)}/10
+                      </span>
+                    </div>
+                    <div
+                      className="fr-mt-1v"
+                      style={{
+                        height: '0.5rem',
+                        borderRadius: '0.25rem',
+                        backgroundColor: 'var(--background-contrast-grey)',
+                        overflow: 'hidden',
+                      }}
+                    >
+                      <div
+                        style={{
+                          height: '100%',
                           width: `${item.pourcentage}%`,
                           backgroundColor: item.couleur,
                         }}
                       />
                     </div>
-                    <span className="text-sm text-gray-500 dark:text-gray-400 w-16 text-right">
+                  </li>
-                      {item.pourcentage}%
-                    </span>
-                    <span className="text-xs text-gray-400 w-20 text-right">
-                      Moy: {item.intensite_moyenne.toFixed(1)}/10
-                    </span>
-                  </div>
                 ))}
+              </ul>
             </div>
-            </Card>
           )}
-        </div>
+        </>
       ) : (
-        <Card className="text-center py-16">
+        <div className="fr-callout">
-          <BarChart3 size={48} className="mx-auto mb-4 text-gray-300 dark:text-gray-600" />
+          <p className="fr-callout__title">Pas de données pour cette période</p>
-          <p className="text-lg text-gray-500 dark:text-gray-400">
+          <p className="fr-callout__text">
-            Pas de données pour cette période
+            Enregistrez des saisies pour visualiser vos tendances.
           </p>
-        </Card>
+        </div>
       )}
     </div>
   );

frontend/src/app/(protected)/layout.tsx

@@ -7,12 +7,15 @@ export default function ProtectedLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="min-h-screen flex flex-col">
+    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
       <Header />
-      <main className="flex-1 bg-gray-50 dark:bg-gray-950">
+      <main
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        role="main"
-          {children}
+        id="contenu"
-        </div>
+        className="fr-background-alt--grey"
+        style={{ flex: 1 }}
+      >
+        <div className="fr-container fr-py-6w">{children}</div>
       </main>
       <Footer />
     </div>

frontend/src/app/(protected)/profil/page.tsx

@@ -2,10 +2,7 @@
 
 import { useState } from 'react';
 import { useAuth } from '@/hooks/useAuth';
-import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import Input from '@/components/ui/Input';
-import { User, Mail, Lock, Shield, Trash2 } from 'lucide-react';
 import toast from 'react-hot-toast';
 import api from '@/lib/api';
 import Modal from '@/components/ui/Modal';
@@ -76,137 +73,202 @@ export default function ProfilPage() {
   };
 
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="fr-container fr-py-6w">
-      <h1 className="font-display text-3xl font-bold text-gray-900 dark:text-white mb-8">
+      <div className="fr-grid-row fr-grid-row--center">
-        Mon profil
+        <div className="fr-col-12 fr-col-md-8">
-      </h1>
+          <h1>Mon profil</h1>
 
           {/* Infos du profil */}
-      <Card className="mb-6">
+          <div className="app-panel fr-p-3w fr-mb-3w">
-        <div className="flex items-center gap-4 mb-6">
+            <h2 className="fr-h4 fr-mb-1v">
-          <div className="w-16 h-16 rounded-full bg-malachite-100 dark:bg-malachite-900 flex items-center justify-center">
-            <User size={28} className="text-malachite-600 dark:text-malachite-400" />
-          </div>
-          <div>
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
               {user?.prenom} {user?.nom}
             </h2>
-            <p className="text-sm text-gray-500 dark:text-gray-400">{user?.email}</p>
+            <p className="fr-text--sm fr-mb-1v">{user?.email}</p>
-            <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+            <p className="fr-text--xs fr-text-mention--grey fr-mb-3w">
-              Membre depuis le {user?.created_at ? new Date(user.created_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : '—'}
+              Membre depuis le{' '}
+              {user?.created_at
+                ? new Date(user.created_at).toLocaleDateString('fr-FR', {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric',
+                  })
+                : '—'}
             </p>
-          </div>
-        </div>
 
             {editing ? (
-          <form onSubmit={handleUpdateProfil} className="space-y-4">
+              <form onSubmit={handleUpdateProfil}>
-            <div className="grid sm:grid-cols-2 gap-4">
+                <div className="fr-grid-row fr-grid-row--gutters">
-              <Input
+                  <div className="fr-col-12 fr-col-md-6">
-                label="Prénom"
+                    <div className="fr-input-group">
+                      <label className="fr-label" htmlFor="profil-prenom">
+                        Prénom
+                      </label>
+                      <input
+                        id="profil-prenom"
+                        className="fr-input"
                         value={form.prenom}
                         onChange={(e) => setForm({ ...form, prenom: e.target.value })}
-                icon={<User size={18} />}
-                required
-              />
-              <Input
-                label="Nom"
-                value={form.nom}
-                onChange={(e) => setForm({ ...form, nom: e.target.value })}
-                icon={<User size={18} />}
                         required
                       />
                     </div>
-            <Input
+                  </div>
-              label="Email"
+                  <div className="fr-col-12 fr-col-md-6">
+                    <div className="fr-input-group">
+                      <label className="fr-label" htmlFor="profil-nom">
+                        Nom
+                      </label>
+                      <input
+                        id="profil-nom"
+                        className="fr-input"
+                        value={form.nom}
+                        onChange={(e) => setForm({ ...form, nom: e.target.value })}
+                        required
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="fr-input-group">
+                  <label className="fr-label" htmlFor="profil-email">
+                    Email
+                  </label>
+                  <input
+                    id="profil-email"
+                    className="fr-input"
                     type="email"
                     value={form.email}
                     onChange={(e) => setForm({ ...form, email: e.target.value })}
-              icon={<Mail size={18} />}
                     required
                   />
-            <div className="flex gap-3">
+                </div>
+                <ul className="fr-btns-group fr-btns-group--inline-md">
+                  <li>
                     <Button type="submit" loading={loading}>
                       Enregistrer
                     </Button>
-              <Button variant="ghost" onClick={() => setEditing(false)}>
+                  </li>
+                  <li>
+                    <Button variant="secondary" type="button" onClick={() => setEditing(false)}>
                       Annuler
                     </Button>
-            </div>
+                  </li>
+                </ul>
               </form>
             ) : (
-          <Button variant="outline" onClick={() => {
+              <Button
-            setForm({ nom: user?.nom || '', prenom: user?.prenom || '', email: user?.email || '' });
+                variant="secondary"
+                onClick={() => {
+                  setForm({
+                    nom: user?.nom || '',
+                    prenom: user?.prenom || '',
+                    email: user?.email || '',
+                  });
                   setEditing(true);
-          }}>
+                }}
+              >
                 Modifier mes informations
               </Button>
             )}
-      </Card>
-
-      {/* Changer mot de passe */}
-      <Card className="mb-6">
-        <div className="flex items-center gap-3 mb-4">
-          <Lock size={20} className="text-gray-400" />
-          <h3 className="font-display font-semibold text-gray-900 dark:text-white">
-            Mot de passe
-          </h3>
           </div>
 
+          {/* Changer mot de passe */}
+          <div className="app-panel fr-p-3w fr-mb-3w">
+            <h2 className="fr-h5">
+              <span className="fr-icon-lock-line fr-mr-1w" aria-hidden="true" />
+              Mot de passe
+            </h2>
+
             {changingPassword ? (
-          <form onSubmit={handleChangePassword} className="space-y-4">
+              <form onSubmit={handleChangePassword}>
-            <Input
+                <div className="fr-password fr-input-group">
-              label="Mot de passe actuel"
+                  <label className="fr-label" htmlFor="pwd-actuel">
+                    Mot de passe actuel
+                  </label>
+                  <input
+                    id="pwd-actuel"
+                    className="fr-input"
                     type="password"
                     value={passwordForm.ancien_mot_de_passe}
-              onChange={(e) => setPasswordForm({ ...passwordForm, ancien_mot_de_passe: e.target.value })}
+                    onChange={(e) =>
+                      setPasswordForm({ ...passwordForm, ancien_mot_de_passe: e.target.value })
+                    }
                     required
                   />
-            <Input
+                </div>
-              label="Nouveau mot de passe"
+                <div className="fr-password fr-input-group">
+                  <label className="fr-label" htmlFor="pwd-nouveau">
+                    Nouveau mot de passe
+                  </label>
+                  <input
+                    id="pwd-nouveau"
+                    className="fr-input"
                     type="password"
                     value={passwordForm.password}
-              onChange={(e) => setPasswordForm({ ...passwordForm, password: e.target.value })}
+                    onChange={(e) =>
+                      setPasswordForm({ ...passwordForm, password: e.target.value })
+                    }
                     required
                   />
-            <Input
+                </div>
-              label="Confirmer le nouveau mot de passe"
+                <div className="fr-password fr-input-group">
+                  <label className="fr-label" htmlFor="pwd-confirm">
+                    Confirmer le nouveau mot de passe
+                  </label>
+                  <input
+                    id="pwd-confirm"
+                    className="fr-input"
                     type="password"
                     value={passwordForm.password_confirmation}
-              onChange={(e) => setPasswordForm({ ...passwordForm, password_confirmation: e.target.value })}
+                    onChange={(e) =>
+                      setPasswordForm({
+                        ...passwordForm,
+                        password_confirmation: e.target.value,
+                      })
+                    }
                     required
                   />
-            <div className="flex gap-3">
+                </div>
+                <ul className="fr-btns-group fr-btns-group--inline-md">
+                  <li>
                     <Button type="submit" loading={loading}>
                       Changer le mot de passe
                     </Button>
-              <Button variant="ghost" onClick={() => setChangingPassword(false)}>
+                  </li>
+                  <li>
+                    <Button
+                      variant="secondary"
+                      type="button"
+                      onClick={() => setChangingPassword(false)}
+                    >
                       Annuler
                     </Button>
-            </div>
+                  </li>
+                </ul>
               </form>
             ) : (
-          <Button variant="outline" onClick={() => setChangingPassword(true)}>
+              <Button variant="secondary" onClick={() => setChangingPassword(true)}>
                 Changer mon mot de passe
               </Button>
             )}
-      </Card>
-
-      {/* Zone dangereuse */}
-      <Card className="border-red-200 dark:border-red-900">
-        <div className="flex items-center gap-3 mb-4">
-          <Shield size={20} className="text-red-500" />
-          <h3 className="font-display font-semibold text-red-600 dark:text-red-400">
-            Zone dangereuse
-          </h3>
           </div>
-        <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+
-          La suppression de votre compte est irréversible. Toutes vos données seront effacées conformément au RGPD.
+          {/* Zone dangereuse — RGPD */}
+          <div className="app-panel fr-p-3w">
+            <h2 className="fr-h5">
+              <span className="fr-icon-warning-line fr-mr-1w" aria-hidden="true" />
+              Zone dangereuse
+            </h2>
+            <p className="fr-text--sm">
+              La suppression de votre compte est irréversible. Toutes vos données
+              seront effacées conformément au RGPD.
             </p>
-        <Button variant="danger" onClick={() => setDeleteModalOpen(true)}>
+            <Button
-          <Trash2 size={16} />
+              variant="secondary"
+              className="fr-icon-delete-line fr-btn--icon-left"
+              onClick={() => setDeleteModalOpen(true)}
+            >
               Supprimer mon compte
             </Button>
-      </Card>
+          </div>
 
           {/* Modal confirmation suppression */}
           <Modal
@@ -215,18 +277,25 @@ export default function ProfilPage() {
             title="Confirmer la suppression"
             size="sm"
           >
-        <p className="text-gray-600 dark:text-gray-400 mb-6">
+            <p>
-          Êtes-vous sûr de vouloir supprimer votre compte ? Cette action est irréversible.
+              Êtes-vous sûr de vouloir supprimer votre compte ? Cette action est
+              irréversible.
             </p>
-        <div className="flex gap-3">
+            <ul className="fr-btns-group fr-btns-group--inline-md">
-          <Button variant="danger" onClick={handleDeleteAccount} loading={loading}>
+              <li>
+                <Button variant="secondary" onClick={handleDeleteAccount} loading={loading}>
                   Oui, supprimer
                 </Button>
-          <Button variant="ghost" onClick={() => setDeleteModalOpen(false)}>
+              </li>
+              <li>
+                <Button variant="secondary" onClick={() => setDeleteModalOpen(false)}>
                   Annuler
                 </Button>
-        </div>
+              </li>
+            </ul>
           </Modal>
         </div>
+      </div>
+    </div>
   );
 }

frontend/src/app/(public)/contacts-urgence/page.tsx

@@ -1,6 +1,3 @@
-import Card from '@/components/ui/Card';
-import { Phone } from 'lucide-react';
-
 export default function ContactsUrgencePage() {
   const contacts = [
     {
@@ -19,13 +16,13 @@ export default function ContactsUrgencePage() {
       name: 'Fil Santé Jeunes',
       number: '0 800 235 236',
       description:
-        'Ligne d\u2019écoute gratuite et anonyme pour les jeunes de 12 à 25 ans. Du lundi au dimanche de 9h à 23h.',
+        'Ligne d’écoute gratuite et anonyme pour les jeunes de 12 à 25 ans. Du lundi au dimanche de 9h à 23h.',
     },
     {
       name: 'SAMU',
       number: '15',
       description:
-        'Service d\u2019aide médicale urgente. En cas d\u2019urgence vitale, appelez immédiatement le 15 ou le 112.',
+        'Service d’aide médicale urgente. En cas d’urgence vitale, appelez immédiatement le 15 ou le 112.',
     },
     {
       name: 'SOS Médecins',
@@ -36,48 +33,51 @@ export default function ContactsUrgencePage() {
   ];
 
   return (
-    <div className="max-w-3xl mx-auto px-4 py-12">
+    <div className="fr-container fr-py-6w">
-      <h1 className="font-display text-4xl font-bold text-gray-900 dark:text-white mb-4">
+      <h1>Contacts d&apos;urgence</h1>
-        Contacts d&apos;urgence
+      <p className="fr-text--lead">
-      </h1>
+        Si vous ou un proche traversez une période difficile, n&apos;hésitez pas
-      <p className="text-lg text-gray-500 dark:text-gray-400 mb-8">
+        à contacter l&apos;un de ces services. Vous n&apos;êtes pas seul(e).
-        Si vous ou un proche traversez une période difficile, n&apos;hésitez pas à
-        contacter l&apos;un de ces services. Vous n&apos;êtes pas seul(e).
       </p>
 
-      <div className="space-y-4">
+      <div className="fr-callout fr-callout--brown-caramel fr-icon-information-line fr-mb-6w">
-        {contacts.map((contact) => (
+        <p className="fr-callout__title">En cas d&apos;urgence ou de détresse</p>
-          <Card key={contact.number}>
+        <p className="fr-callout__text">
-            <div className="flex items-start gap-4">
+          Appelez le <strong>3114</strong> (numéro national de prévention du
-              <div className="flex-shrink-0 w-12 h-12 rounded-full bg-red-50 dark:bg-red-950/50 flex items-center justify-center">
+          suicide, gratuit, 24h/24) ou le <strong>15</strong> (SAMU). En cas
-                <Phone size={20} className="text-red-600 dark:text-red-400" />
+          d&apos;urgence vitale, composez le <strong>112</strong> (numéro
+          d&apos;urgence européen).
+        </p>
       </div>
-              <div className="flex-1 min-w-0">
+
-                <h2 className="font-display text-lg font-semibold text-gray-900 dark:text-white mb-1">
+      <div className="fr-grid-row fr-grid-row--gutters">
-                  {contact.name}
+        {contacts.map((contact) => (
-                </h2>
+          <div className="fr-col-12 fr-col-md-6" key={contact.number}>
+            <div className="fr-card">
+              <div className="fr-card__body">
+                <div className="fr-card__content">
+                  <h2 className="fr-card__title">{contact.name}</h2>
+                  <p className="fr-card__desc">{contact.description}</p>
+                  <div className="fr-card__end">
+                    <p className="fr-card__detail">
                       <a
+                        className="fr-link"
                         href={`tel:${contact.number.replace(/\s/g, '')}`}
-                  className="inline-block text-xl font-bold text-malachite-600 dark:text-malachite-400 mb-2 hover:underline"
                       >
+                        <span
+                          className="fr-icon-phone-line fr-mr-1w"
+                          aria-hidden="true"
+                        />
                         {contact.number}
                       </a>
-                <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
-                  {contact.description}
                     </p>
                   </div>
                 </div>
-          </Card>
+              </div>
+            </div>
+          </div>
         ))}
       </div>
-
-      <Card className="mt-8 bg-red-50 dark:bg-red-950/30 border-red-100 dark:border-red-900">
-        <p className="text-sm text-red-700 dark:text-red-400 text-center leading-relaxed">
-          <strong>En cas d&apos;urgence vitale</strong>, appelez immédiatement le{' '}
-          <strong>15</strong> (SAMU) ou le <strong>112</strong> (numéro d&apos;urgence
-          européen).
-        </p>
-      </Card>
     </div>
   );
 }

frontend/src/app/(public)/informations/[slug]/page.tsx

@@ -2,10 +2,7 @@
 
 import { useParams } from 'next/navigation';
 import Link from 'next/link';
-import Image from 'next/image';
-import { ArrowLeft, Calendar, User } from 'lucide-react';
 import { useFeed } from '@/hooks/useFeeds';
-import Skeleton from '@/components/ui/Skeleton';
 
 export default function ArticlePage() {
   const params = useParams();
@@ -14,79 +11,93 @@ export default function ArticlePage() {
 
   if (isLoading) {
     return (
-      <div className="max-w-3xl mx-auto px-4 py-12">
+      <div className="fr-container fr-py-6w">
-        <Skeleton className="h-8 w-48 mb-8" />
+        <p className="fr-text--sm">Chargement de l&apos;article…</p>
-        <Skeleton variant="rect" className="h-64 mb-6" />
-        <Skeleton className="h-10 w-3/4 mb-4" />
-        <Skeleton className="h-4 w-full mb-2" />
-        <Skeleton className="h-4 w-full mb-2" />
-        <Skeleton className="h-4 w-2/3" />
       </div>
     );
   }
 
   if (error || !feed) {
     return (
-      <div className="max-w-3xl mx-auto px-4 py-12 text-center">
+      <div className="fr-container fr-py-6w">
-        <p className="text-lg text-gray-500 dark:text-gray-400 mb-4">
+        <div className="fr-alert fr-alert--error">
-          Article introuvable
+          <h3 className="fr-alert__title">Article introuvable</h3>
+          <p>
+            L&apos;article demandé n&apos;existe pas ou n&apos;est plus
+            disponible.
           </p>
-        <Link
+        </div>
-          href="/informations"
+        <Link className="fr-link fr-mt-2w" href="/informations">
-          className="text-malachite-600 dark:text-malachite-400 hover:underline"
+          Retour aux informations
-        >
-          ← Retour aux informations
         </Link>
       </div>
     );
   }
 
   return (
-    <div className="max-w-3xl mx-auto px-4 py-12">
+    <div className="fr-container fr-py-6w">
-      <Link
+      <nav
-        href="/informations"
+        role="navigation"
-        className="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mb-8 transition-colors"
+        className="fr-breadcrumb"
+        aria-label="vous êtes ici :"
       >
-        <ArrowLeft size={16} />
+        <button
-        Retour aux informations
+          type="button"
+          className="fr-breadcrumb__button"
+          aria-expanded="false"
+          aria-controls="breadcrumb-article"
+        >
+          Voir le fil d&apos;Ariane
+        </button>
+        <div className="fr-collapse" id="breadcrumb-article">
+          <ol className="fr-breadcrumb__list">
+            <li>
+              <Link className="fr-breadcrumb__link" href="/">
+                Accueil
               </Link>
-
+            </li>
-      {feed.image_url && (
+            <li>
-        <div className="relative w-full h-64 sm:h-80 rounded-2xl overflow-hidden bg-gray-100 dark:bg-gray-800 mb-8">
+              <Link className="fr-breadcrumb__link" href="/informations">
-          <Image
+                Informations
-            src={feed.image_url}
+              </Link>
-            alt={feed.titre}
+            </li>
-            width={800}
+            <li>
-            height={400}
+              <a className="fr-breadcrumb__link" aria-current="page">
-            className="w-full h-full object-cover"
-            unoptimized
-          />
-        </div>
-      )}
-
-      <h1 className="font-display text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                 {feed.titre}
-      </h1>
+              </a>
-
+            </li>
-      <div className="flex flex-wrap items-center gap-4 text-sm text-gray-400 dark:text-gray-500 mb-8 pb-8 border-b border-gray-200 dark:border-gray-800">
+          </ol>
-        {feed.auteur && (
-          <div className="flex items-center gap-1.5">
-            <User size={14} />
-            {feed.auteur.prenom} {feed.auteur.nom}
         </div>
+      </nav>
+
+      <h1>{feed.titre}</h1>
+
+      <p className="fr-text--sm">
+        {feed.auteur && (
+          <>
+            <span
+              className="fr-icon-user-line fr-mr-1w"
+              aria-hidden="true"
+            />
+            {feed.auteur.prenom} {feed.auteur.nom}
+            {' — '}
+          </>
         )}
-        <div className="flex items-center gap-1.5">
+        <span
-          <Calendar size={14} />
+          className="fr-icon-calendar-line fr-mr-1w"
+          aria-hidden="true"
+        />
         {new Date(feed.created_at).toLocaleDateString('fr-FR', {
           day: 'numeric',
           month: 'long',
           year: 'numeric',
         })}
-        </div>
+      </p>
-      </div>
 
-      <article
+      <hr className="fr-mt-2w fr-mb-4w" />
-        className="prose prose-lg dark:prose-invert max-w-none prose-headings:font-display prose-a:text-malachite-600 dark:prose-a:text-malachite-400"
+
+      <div
+        className="fr-col-12 fr-col-md-10"
         dangerouslySetInnerHTML={{ __html: feed.contenu }}
       />
     </div>

frontend/src/app/(public)/informations/page.tsx

@@ -1,86 +1,62 @@
 'use client';
 
 import Link from 'next/link';
-import Image from 'next/image';
-import { BookOpen, Calendar } from 'lucide-react';
 import { useFeeds } from '@/hooks/useFeeds';
-import Card from '@/components/ui/Card';
-import Skeleton from '@/components/ui/Skeleton';
 
 export default function InformationsPage() {
   const { data: feeds, isLoading } = useFeeds();
 
   return (
-    <div className="max-w-6xl mx-auto px-4 py-12">
+    <div className="fr-container fr-py-6w">
-      <div className="text-center mb-12">
+      <h1>Informations &amp; Ressources</h1>
-        <h1 className="font-display text-4xl font-bold text-gray-900 dark:text-white mb-4">
+      <p className="fr-text--lead">
-          Informations & Ressources
+        Des contenus validés sur la santé mentale, la gestion du stress et le
-        </h1>
+        bien-être émotionnel.
-        <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
-          Des contenus validés sur la santé mentale, la gestion du stress
-          et le bien-être émotionnel.
       </p>
-      </div>
 
       {isLoading ? (
-        <div className="grid md:grid-cols-2 gap-6">
+        <p className="fr-text--sm">Chargement des articles…</p>
-          {Array.from({ length: 4 }).map((_, i) => (
-            <Card key={i}>
-              <Skeleton variant="rect" className="h-48 mb-4" />
-              <Skeleton className="h-6 w-3/4 mb-2" />
-              <Skeleton className="h-4 w-full mb-1" />
-              <Skeleton className="h-4 w-2/3" />
-            </Card>
-          ))}
-        </div>
       ) : feeds && feeds.length > 0 ? (
-        <div className="grid md:grid-cols-2 gap-6">
+        <div className="fr-grid-row fr-grid-row--gutters">
           {feeds.map((feed) => (
-            <Link key={feed.id} href={`/informations/${feed.slug}`}>
+            <div className="fr-col-12 fr-col-md-6" key={feed.id}>
-              <Card hover className="h-full">
+              <div className="fr-card fr-enlarge-link">
-                {feed.image_url && (
+                <div className="fr-card__body">
-                  <div className="relative w-full h-48 mb-4 rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-800">
+                  <div className="fr-card__content">
-                    <Image
+                    <h2 className="fr-card__title">
-                      src={feed.image_url}
+                      <Link href={`/informations/${feed.slug}`}>
-                      alt={feed.titre}
-                      width={800}
-                      height={400}
-                      className="w-full h-full object-cover"
-                      unoptimized
-                    />
-                  </div>
-                )}
-                <div className="flex items-center gap-2 mb-3">
-                  <BookOpen size={16} className="text-malachite-500" />
-                  <span className="text-xs font-medium text-malachite-600 dark:text-malachite-400 uppercase tracking-wide">
-                    Article
-                  </span>
-                </div>
-                <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">
                         {feed.titre}
+                      </Link>
                     </h2>
-                <div
+                    <p className="fr-card__desc">
-                  className="text-gray-500 dark:text-gray-400 text-sm line-clamp-3 mb-4"
+                      {(feed.contenu ?? '')
-                  dangerouslySetInnerHTML={{
+                        .replace(/<[^>]*>/g, '')
-                    __html: (feed.contenu ?? '').replace(/<[^>]*>/g, '').substring(0, 200) + '...',
+                        .substring(0, 200) + '…'}
-                  }}
+                    </p>
+                    <div className="fr-card__end">
+                      <p className="fr-card__detail">
+                        <span
+                          className="fr-icon-calendar-line fr-mr-1w"
+                          aria-hidden="true"
                         />
-                <div className="flex items-center gap-2 text-xs text-gray-400 dark:text-gray-500">
-                  <Calendar size={14} />
                         {new Date(feed.created_at).toLocaleDateString('fr-FR', {
                           day: 'numeric',
                           month: 'long',
                           year: 'numeric',
                         })}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
-              </Card>
-            </Link>
           ))}
         </div>
       ) : (
-        <div className="text-center py-16 text-gray-400 dark:text-gray-600">
+        <div className="fr-callout">
-          <BookOpen size={48} className="mx-auto mb-4 opacity-50" />
+          <p className="fr-callout__text">
-          <p className="text-lg">Aucun article disponible pour le moment</p>
+            Aucun article disponible pour le moment.
+          </p>
         </div>
       )}
     </div>

frontend/src/app/(public)/mentions-legales/page.tsx

@@ -1,73 +1,47 @@
-import Card from '@/components/ui/Card';
-
 export default function MentionsLegalesPage() {
   return (
-    <div className="max-w-3xl mx-auto px-4 py-12">
+    <div className="fr-container fr-py-6w">
-      <h1 className="font-display text-4xl font-bold text-gray-900 dark:text-white mb-8">
+      <h1>Mentions légales</h1>
-        Mentions légales
-      </h1>
 
-      <div className="space-y-6">
+      <h2>Éditeur de l&apos;application</h2>
-        <Card>
+      <p>
-          <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
-            Éditeur de l&apos;application
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
         CESIZen est une application développée dans le cadre d&apos;un projet
-            pédagogique au sein de{' '}
+        pédagogique au sein de <strong>CESI École d&apos;Ingénieurs</strong>.
-            <strong>CESI École d&apos;Ingénieurs</strong>. Cette application est
+        Cette application est réalisée à but éducatif et n&apos;a pas de vocation
-            réalisée à but éducatif et n&apos;a pas de vocation commerciale.
+        commerciale.
       </p>
-        </Card>
 
-        <Card>
+      <h2>Hébergement</h2>
-          <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
+      <p>
-            Hébergement
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
         L&apos;application est hébergée dans le cadre de l&apos;infrastructure
         pédagogique de CESI. Les données sont stockées sur des serveurs
         sécurisés situés en France.
       </p>
-        </Card>
 
-        <Card>
+      <h2>Propriété intellectuelle</h2>
-          <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
+      <p>
-            Propriété intellectuelle
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
         L&apos;ensemble des contenus présents sur CESIZen (textes, images,
         graphismes, logo, icônes) sont la propriété exclusive de leurs auteurs
         respectifs et sont protégés par les lois françaises et internationales
         relatives à la propriété intellectuelle.
       </p>
-        </Card>
 
-        <Card>
+      <h2>Responsabilité</h2>
-          <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
+      <p>
-            Responsabilité
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
         CESIZen est un outil de suivi du bien-être et ne se substitue en aucun
         cas à un avis médical professionnel. En cas de détresse psychologique,
         veuillez contacter les services d&apos;urgence ou un professionnel de
         santé.
       </p>
-        </Card>
 
-        <Card>
+      <h2>Contact</h2>
-          <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
+      <p>
-            Contact
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
         Pour toute question relative aux mentions légales, vous pouvez nous
         contacter via l&apos;adresse suivante :{' '}
-            <span className="text-malachite-600 dark:text-malachite-400">
+        <a className="fr-link" href="mailto:contact@cesizen.fr">
           contact@cesizen.fr
-            </span>
+        </a>
       </p>
-        </Card>
-      </div>
     </div>
   );
 }

frontend/src/app/(public)/page.tsx

@@ -0,0 +1,202 @@
+import Link from "next/link";
+
+export default function HomePage() {
+  return (
+    <>
+      {/* ─── 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"
+                >
+                  Consulter les ressources
+                </Link>
+              </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>
+      </section>
+
+      {/* ─── Comment ça marche ─── */}
+      <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">
+            {[
+              {
+                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.",
+              },
+              {
+                step: "2",
+                title: "Ajoutez du contexte",
+                desc: "Notez ce qui a déclenché cette émotion. Quelques mots suffisent à mieux comprendre vos tendances.",
+              },
+              {
+                step: "3",
+                title: "Suivez votre évolution",
+                desc: "Consultez des rapports visuels (semaine, mois, trimestre, année) pour identifier vos tendances.",
+              },
+            ].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>
+
+      {/* ─── 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>
+          ))}
+        </div>
+      </section>
+
+      {/* ─── 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">
+            {[
+              "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) => (
+              <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>
+          <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
+              </Link>
+            </li>
+            <li>
+              <Link
+                className="fr-btn fr-btn--lg fr-btn--secondary"
+                href="/connexion"
+              >
+                Se connecter
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      {/* ─── 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>
+    </>
+  );
+}

frontend/src/app/(public)/politique-de-confidentialite/page.tsx

@@ -1,105 +1,73 @@
-import Card from '@/components/ui/Card';
-
 export default function PolitiqueConfidentialitePage() {
   return (
-    <div className="max-w-3xl mx-auto px-4 py-12">
+    <div className="fr-container fr-py-6w">
-      <h1 className="font-display text-4xl font-bold text-gray-900 dark:text-white mb-8">
+      <h1>Politique de confidentialité</h1>
-        Politique de confidentialité
-      </h1>
 
-      <div className="space-y-6">
+      <h2>Conformité RGPD</h2>
-        <Card>
+      <p>
-          <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
-            Conformité RGPD
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
         CESIZen s&apos;engage à respecter le Règlement Général sur la Protection
-            des Données (RGPD) et la loi Informatique et Libertés. La protection
+        des Données (RGPD) et la loi Informatique et Libertés. La protection de
-            de vos données personnelles est une priorité.
+        vos données personnelles est une priorité.
       </p>
-        </Card>
 
-        <Card>
+      <h2>Données collectées</h2>
-          <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
+      <p>
-            Données collectées
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-3">
         Dans le cadre de l&apos;utilisation de CESIZen, les données suivantes
         sont collectées :
       </p>
-          <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1">
+      <ul>
         <li>Adresse e-mail</li>
         <li>Nom et prénom</li>
         <li>Données relatives aux émotions enregistrées</li>
       </ul>
-        </Card>
 
-        <Card>
+      <h2>Finalité du traitement</h2>
-          <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
+      <p>
-            Finalité du traitement
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
         Ces données sont collectées uniquement dans le but de fournir un suivi
         personnalisé du bien-être émotionnel. Elles ne sont ni vendues, ni
         partagées avec des tiers à des fins commerciales.
       </p>
-        </Card>
 
-        <Card>
+      <h2>Durée de conservation</h2>
-          <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
+      <p>
-            Durée de conservation
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
         Les données personnelles sont conservées pendant toute la durée
         d&apos;utilisation du compte. En cas de suppression du compte, les
         données sont effacées dans un délai de 30 jours.
       </p>
-        </Card>
 
-        <Card>
+      <h2>Sécurité des données</h2>
-          <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
+      <p>
-            Sécurité des données
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
         Les données sont chiffrées en transit (HTTPS) et au repos. Les mots de
         passe sont hachés avec des algorithmes sécurisés. L&apos;accès aux
         données est strictement limité aux personnes habilitées.
       </p>
-        </Card>
 
-        <Card>
+      <h2>Vos droits</h2>
-          <h2 className="font-display text-xl font-semibold text-gray-900 dark:text-white mb-3">
+      <p>Conformément au RGPD, vous disposez des droits suivants :</p>
-            Vos droits
+      <ul>
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed mb-3">
-            Conformément au RGPD, vous disposez des droits suivants :
-          </p>
-          <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1">
         <li>
-              <strong>Droit d&apos;accès :</strong> obtenir une copie de vos
+          <strong>Droit d&apos;accès :</strong> obtenir une copie de vos données
-              données personnelles
+          personnelles
         </li>
         <li>
           <strong>Droit de rectification :</strong> corriger des données
           inexactes ou incomplètes
         </li>
         <li>
-              <strong>Droit de suppression :</strong> demander l&apos;effacement
+          <strong>Droit de suppression :</strong> demander l&apos;effacement de
-              de vos données personnelles
+          vos données personnelles
         </li>
         <li>
           <strong>Droit à la portabilité :</strong> récupérer vos données dans
           un format structuré
         </li>
       </ul>
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed mt-3">
+      <p>
         Pour exercer ces droits, contactez-nous à l&apos;adresse :{' '}
-            <span className="text-malachite-600 dark:text-malachite-400">
+        <a className="fr-link" href="mailto:contact@cesizen.fr">
           contact@cesizen.fr
-            </span>
+        </a>
       </p>
-        </Card>
-      </div>
     </div>
   );
 }

frontend/src/app/globals.css

@@ -1,5 +1,13 @@
 @import "tailwindcss";
 
+/* Panneau neutre (remplace l'usage détourné de .fr-card comme conteneur).
+   Utilise les variables DSFR pour s'adapter aux thèmes clair/sombre. */
+.app-panel {
+  background-color: var(--background-default-grey);
+  border: 1px solid var(--border-default-grey);
+  border-radius: 0.25rem;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);

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>
+    <html lang="fr" data-fr-scheme="system" suppressHydrationWarning>
-      <body className={`${inter.variable} ${poppins.variable} antialiased`}>
+      <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>
   );

frontend/src/app/page.tsx

@@ -1,592 +0,0 @@
-'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>
-  );
-}
-
-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" />
-                </Link>
-                <Link
-                  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
-                </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>
-          </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">
-            {[
-              {
-                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,
-              },
-              {
-                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,
-              },
-              {
-                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,
-              },
-              {
-                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>
-            ))}
-          </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>
-            </div>
-          </RevealSection>
-
-          <div className="grid md:grid-cols-3 gap-8">
-            {[
-              {
-                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,
-              },
-            ].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>
-        </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"
-              >
-                Créer mon compte
-                <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
-              </Link>
-              <Link
-                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>
-        </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)
-          </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>
-  );
-}

frontend/src/components/features/EditSaisieModal.tsx

@@ -57,17 +57,14 @@ export default function EditSaisieModal({ saisie, isOpen, onClose }: EditSaisieM
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="Modifier la saisie" size="lg">
-      <div className="space-y-6">
       {/* Émotion */}
-        <div>
+      <div className="fr-input-group">
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        <p className="fr-label">Émotion</p>
-            Émotion
-          </label>
         <EmotionPicker value={emotionId} onChange={setEmotionId} />
       </div>
 
       {/* Intensité */}
-        <div>
+      <div className="fr-input-group">
         <Slider
           value={intensite}
           onChange={setIntensite}
@@ -75,45 +72,54 @@ export default function EditSaisieModal({ saisie, isOpen, onClose }: EditSaisieM
           max={10}
           label="Intensité de l'émotion"
         />
-          <div className="flex justify-between text-xs text-gray-400 mt-1">
+        <div className="fr-grid-row fr-grid-row--middle fr-mt-1v">
-            <span>Faible</span>
+          <span className="fr-col fr-text--sm">Faible</span>
-            <span>Modérée</span>
+          <span className="fr-col fr-text--sm" style={{ textAlign: 'center' }}>
-            <span>Forte</span>
+            Modérée
+          </span>
+          <span className="fr-col fr-text--sm" style={{ textAlign: 'right' }}>
+            Forte
+          </span>
         </div>
       </div>
 
       {/* Date */}
-        <div>
+      <div className="fr-input-group">
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+        <label className="fr-label" htmlFor="edit-saisie-date">
           Date de la saisie
         </label>
         <input
+          id="edit-saisie-date"
+          className="fr-input"
           type="date"
           value={dateSaisie}
           onChange={(e) => setDateSaisie(e.target.value)}
-            className="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-candlelight-500"
         />
       </div>
 
       {/* Note */}
-        <div>
+      <div className="fr-input-group">
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
+        <label className="fr-label" htmlFor="edit-saisie-note">
           Note (optionnel)
         </label>
         <textarea
+          id="edit-saisie-note"
+          className="fr-input"
           value={note}
           onChange={(e) => setNote(e.target.value)}
           placeholder="Décrivez ce que vous ressentez..."
           rows={3}
-            className="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-candlelight-500 placeholder:text-gray-400 resize-none"
         />
       </div>
 
       {/* Actions */}
-        <div className="flex justify-end gap-3 pt-2">
+      <ul className="fr-btns-group fr-btns-group--inline-md fr-btns-group--right">
-          <Button variant="ghost" onClick={onClose}>
+        <li>
+          <Button variant="secondary" onClick={onClose}>
             Annuler
           </Button>
+        </li>
+        <li>
           <Button
             onClick={handleSubmit}
             loading={updateSaisie.isPending}
@@ -121,8 +127,8 @@ export default function EditSaisieModal({ saisie, isOpen, onClose }: EditSaisieM
           >
             Enregistrer
           </Button>
-        </div>
+        </li>
-      </div>
+      </ul>
     </Modal>
   );
 }

frontend/src/components/features/EmotionChart.tsx

@@ -12,8 +12,6 @@ import {
   PieChart,
   Pie,
   Cell,
-  LineChart,
-  Line,
   Legend,
 } from 'recharts';
 import type { ValueType, NameType } from 'recharts/types/component/DefaultTooltipContent';
@@ -38,7 +36,7 @@ export default function EmotionChart({ data, type = 'repartition' }: EmotionChar
     }
 
     return (
-      <div className="w-full h-80">
+      <div style={{ width: '100%', height: '20rem' }}>
         <ResponsiveContainer width="100%" height={320}>
           <PieChart>
             <Pie
@@ -88,12 +86,12 @@ export default function EmotionChart({ data, type = 'repartition' }: EmotionChar
     }
 
     return (
-      <div className="w-full h-80">
+      <div style={{ width: '100%', height: '20rem' }}>
         <ResponsiveContainer width="100%" height={320}>
-          <LineChart data={lineData}>
+          <BarChart data={lineData}>
-            <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+            <CartesianGrid strokeDasharray="3 3" style={{ opacity: 0.3 }} />
             <XAxis dataKey="date" tick={{ fontSize: 12 }} />
-            <YAxis tick={{ fontSize: 12 }} />
+            <YAxis tick={{ fontSize: 12 }} allowDecimals={false} />
             <Tooltip
               contentStyle={{
                 backgroundColor: 'rgba(255,255,255,0.95)',
@@ -104,17 +102,14 @@ export default function EmotionChart({ data, type = 'repartition' }: EmotionChar
             />
             <Legend />
             {data.evolution.emotions.map((emotion) => (
-              <Line
+              <Bar
                 key={emotion.nom}
-                type="monotone"
                 dataKey={emotion.nom}
-                stroke={emotion.couleur}
+                stackId="emotions"
-                strokeWidth={2}
+                fill={emotion.couleur}
-                dot={{ fill: emotion.couleur, r: 4 }}
-                activeDot={{ r: 6 }}
               />
             ))}
-          </LineChart>
+          </BarChart>
         </ResponsiveContainer>
       </div>
     );
@@ -131,10 +126,10 @@ export default function EmotionChart({ data, type = 'repartition' }: EmotionChar
     }
 
     return (
-      <div className="w-full h-80">
+      <div style={{ width: '100%', height: '20rem' }}>
         <ResponsiveContainer width="100%" height={320}>
           <BarChart data={barData}>
-            <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
+            <CartesianGrid strokeDasharray="3 3" style={{ opacity: 0.3 }} />
             <XAxis dataKey="date" tick={{ fontSize: 12 }} />
             <YAxis domain={[0, 10]} tick={{ fontSize: 12 }} />
             <Tooltip
@@ -146,7 +141,7 @@ export default function EmotionChart({ data, type = 'repartition' }: EmotionChar
               }}
               formatter={(value: ValueType | undefined) => [`${Number(value).toFixed(1)}`, 'Intensité moyenne']}
             />
-            <Bar dataKey="intensite" fill="#fce117" radius={[6, 6, 0, 0]} />
+            <Bar dataKey="intensite" fill="#000091" radius={[6, 6, 0, 0]} />
           </BarChart>
         </ResponsiveContainer>
       </div>
@@ -158,8 +153,17 @@ export default function EmotionChart({ data, type = 'repartition' }: EmotionChar
 
 function EmptyChart({ message }: { message: string }) {
   return (
-    <div className="w-full h-80 flex items-center justify-center text-gray-400 dark:text-gray-600">
+    <div
-      <p className="text-lg">{message}</p>
+      className="fr-text-mention--grey"
+      style={{
+        width: '100%',
+        height: '20rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <p className="fr-text--lead fr-mb-0">{message}</p>
     </div>
   );
 }

frontend/src/components/features/EmotionPicker.tsx

@@ -14,13 +14,7 @@ export default function EmotionPicker({ value, onChange }: EmotionPickerProps) {
   const [selectedParent, setSelectedParent] = useState<Emotion | null>(null);
 
   if (isLoading) {
-    return (
+    return <p className="fr-text--sm fr-text-mention--grey">Chargement des émotions…</p>;
-      <div className="grid grid-cols-3 sm:grid-cols-4 gap-3">
-        {Array.from({ length: 7 }).map((_, i) => (
-          <div key={i} className="h-20 rounded-xl bg-gray-100 dark:bg-gray-800 animate-pulse" />
-        ))}
-      </div>
-    );
   }
 
   // Si une émotion parent est sélectionnée et qu'elle a des enfants, afficher les sous-émotions
@@ -30,50 +24,53 @@ export default function EmotionPicker({ value, onChange }: EmotionPickerProps) {
         <button
           type="button"
           onClick={() => setSelectedParent(null)}
-          className="mb-4 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 flex items-center gap-1"
+          className="fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-icon-arrow-left-line fr-btn--icon-left fr-mb-2w"
         >
-          ← Retour aux émotions
+          Retour aux émotions
         </button>
-        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
+        <p className="fr-text--sm fr-mb-2w">
-          Précisez votre émotion de <span className="font-medium" style={{ color: selectedParent.couleur }}>{selectedParent.nom}</span> :
+          Précisez votre émotion de{' '}
+          <span className="fr-text--bold" style={{ color: selectedParent.couleur }}>
+            {selectedParent.nom}
+          </span>{' '}
+          :
         </p>
-        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+        <ul className="fr-tags-group">
-          {selectedParent.enfants.map((child) => (
+          {selectedParent.enfants.map((child) => {
+            const isSelected = value === child.id;
+            return (
+              <li key={child.id}>
                 <button
-              key={child.id}
                   type="button"
+                  aria-pressed={isSelected}
                   onClick={() => onChange(child.id)}
-              className={`
+                  className={`fr-tag${isSelected ? ' fr-tag--green-emeraude' : ''}`}
-                flex flex-col items-center gap-2 p-4 rounded-xl border-2 transition-all duration-200
-                ${value === child.id
-                  ? 'border-current shadow-lg scale-105'
-                  : 'border-gray-200 dark:border-gray-700 hover:border-current hover:shadow-md'
-                }
-              `}
-              style={{
-                color: child.couleur,
-                borderColor: value === child.id ? child.couleur : undefined,
-              }}
                 >
-              <span className="text-2xl">{child.icone || '🔵'}</span>
+                  <span aria-hidden="true" className="fr-mr-1v">
-              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{child.nom}</span>
+                    {child.icone || '🔵'}
+                  </span>
+                  {child.nom}
                 </button>
-          ))}
+              </li>
-        </div>
+            );
+          })}
+        </ul>
       </div>
     );
   }
 
   return (
-    <div className="grid grid-cols-3 sm:grid-cols-4 gap-3">
+    <ul className="fr-tags-group">
       {emotions?.map((emotion) => {
         const hasChildren = emotion.enfants && emotion.enfants.length > 0;
-        const isSelected = value === emotion.id || emotion.enfants?.some(e => e.id === value);
+        const isSelected =
+          value === emotion.id || emotion.enfants?.some((e) => e.id === value);
 
         return (
+          <li key={emotion.id}>
             <button
-            key={emotion.id}
               type="button"
+              aria-pressed={!!isSelected}
               onClick={() => {
                 if (hasChildren) {
                   setSelectedParent(emotion);
@@ -81,25 +78,21 @@ export default function EmotionPicker({ value, onChange }: EmotionPickerProps) {
                   onChange(emotion.id);
                 }
               }}
-            className={`
+              className={`fr-tag fr-tag--md${isSelected ? ' fr-tag--green-emeraude' : ''}`}
-              flex flex-col items-center gap-2 p-4 rounded-xl border-2 transition-all duration-200
-              ${isSelected
-                ? 'shadow-lg scale-105'
-                : 'border-gray-200 dark:border-gray-700 hover:shadow-md'
-              }
-            `}
-            style={{
-              borderColor: isSelected ? emotion.couleur : undefined,
-            }}
             >
-            <span className="text-3xl">{emotion.icone || '🔵'}</span>
+              <span aria-hidden="true" className="fr-mr-1v">
-            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{emotion.nom}</span>
+                {emotion.icone || '🔵'}
+              </span>
+              {emotion.nom}
               {hasChildren && (
-              <span className="text-xs text-gray-400">▼</span>
+                <span aria-hidden="true" className="fr-ml-1v">
+                  ▾
+                </span>
               )}
             </button>
+          </li>
         );
       })}
-    </div>
+    </ul>
   );
 }

frontend/src/components/features/TrackerTimeline.tsx

@@ -2,8 +2,6 @@
 
 import React from 'react';
 import type { SaisieTracker } from '@/types';
-import Badge from '@/components/ui/Badge';
-import { Trash2, Edit2 } from 'lucide-react';
 
 interface TrackerTimelineProps {
   saisies: SaisieTracker[];
@@ -14,9 +12,11 @@ interface TrackerTimelineProps {
 export default function TrackerTimeline({ saisies, onEdit, onDelete }: TrackerTimelineProps) {
   if (saisies.length === 0) {
     return (
-      <div className="text-center py-12 text-gray-400 dark:text-gray-600">
+      <div className="fr-callout">
-        <p className="text-lg mb-2">Aucune saisie enregistrée</p>
+        <p className="fr-callout__title">Aucune saisie enregistrée</p>
-        <p className="text-sm">Commencez par enregistrer votre première émotion</p>
+        <p className="fr-callout__text">
+          Commencez par enregistrer votre première émotion.
+        </p>
       </div>
     );
   }
@@ -35,78 +35,105 @@ export default function TrackerTimeline({ saisies, onEdit, onDelete }: TrackerTi
   }, {});
 
   return (
-    <div className="space-y-8">
+    <div>
       {Object.entries(grouped).map(([date, items]) => (
-        <div key={date}>
+        <section key={date} className="fr-mb-4w">
-          <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-4">
+          <h3 className="fr-h6 fr-text-mention--grey fr-mb-2w" style={{ textTransform: 'uppercase' }}>
             {date}
           </h3>
-          <div className="space-y-3">
+          <div className="fr-grid-row fr-grid-row--gutters">
             {items.map((saisie) => (
-              <div
+              <div key={saisie.id} className="fr-col-12">
-                key={saisie.id}
+                <div className="app-panel fr-p-2w">
-                className="flex items-start gap-4 p-4 bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 hover:shadow-md transition-all duration-200"
+                  <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
-              >
                     {/* Icône émotion */}
-                <div
+                    <div className="fr-col-auto">
-                  className="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-xl"
+                      <span
-                  style={{ backgroundColor: `${saisie.emotion?.couleur}20` }}
+                        aria-hidden="true"
+                        style={{
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          width: '3rem',
+                          height: '3rem',
+                          borderRadius: '0.5rem',
+                          fontSize: '1.5rem',
+                          backgroundColor: `${saisie.emotion?.couleur}20`,
+                        }}
                       >
                         {saisie.emotion?.icone || '🔵'}
+                      </span>
                     </div>
 
                     {/* Contenu */}
-                <div className="flex-1 min-w-0">
+                    <div className="fr-col">
-                  <div className="flex items-center gap-2 mb-1">
+                      <p className="fr-mb-1v">
-                    <Badge color={saisie.emotion?.couleur}>
+                        <span className="fr-badge fr-badge--info fr-mr-2v">
                           {saisie.emotion?.nom}
-                    </Badge>
+                        </span>
-                    <span className="text-sm text-gray-400 dark:text-gray-500">
+                        <span className="fr-text--sm fr-text-mention--grey">
                           Intensité : {saisie.intensite}/10
                         </span>
-                  </div>
+                      </p>
                       {/* Barre d'intensité */}
-                  <div className="w-full h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full mb-2">
                       <div
-                      className="h-full rounded-full transition-all duration-500"
+                        className="fr-mb-1w"
                         style={{
+                          width: '100%',
+                          height: '0.375rem',
+                          borderRadius: '0.25rem',
+                          backgroundColor: 'var(--background-contrast-grey)',
+                          overflow: 'hidden',
+                        }}
+                      >
+                        <div
+                          style={{
+                            height: '100%',
                             width: `${saisie.intensite * 10}%`,
-                        backgroundColor: saisie.emotion?.couleur || '#fce117',
+                            backgroundColor: saisie.emotion?.couleur || '#000091',
                           }}
                         />
                       </div>
                       {saisie.note && (
-                    <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
+                        <p className="fr-text--sm fr-mb-0">{saisie.note}</p>
-                      {saisie.note}
-                    </p>
                       )}
                     </div>
 
                     {/* Actions */}
-                <div className="flex items-center gap-1 shrink-0">
+                    <div className="fr-col-auto">
+                      <ul className="fr-btns-group fr-btns-group--inline fr-btns-group--sm">
                         {onEdit && (
+                          <li>
                             <button
+                              type="button"
                               onClick={() => onEdit(saisie)}
-                      className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                              className="fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-icon-edit-line"
-                      aria-label="Modifier"
+                              title="Modifier"
                             >
-                      <Edit2 size={16} />
+                              Modifier
                             </button>
+                          </li>
                         )}
                         {onDelete && (
+                          <li>
                             <button
+                              type="button"
                               onClick={() => onDelete(saisie.id)}
-                      className="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-950/30 text-gray-400 hover:text-red-500 transition-colors"
+                              className="fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-icon-delete-line"
-                      aria-label="Supprimer"
+                              title="Supprimer"
                             >
-                      <Trash2 size={16} />
+                              Supprimer
                             </button>
+                          </li>
                         )}
+                      </ul>
+                    </div>
+                  </div>
                 </div>
               </div>
             ))}
           </div>
-        </div>
+        </section>
       ))}
     </div>
   );

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">
+    <footer className="fr-footer" role="contentinfo" id="footer">
-      {/* Bandeau urgence */}
+      <div className="fr-container">
-      <div className="bg-red-50 dark:bg-red-950/50 border-b border-red-100 dark:border-red-900">
+        <div className="fr-footer__body">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
+          <div className="fr-footer__brand fr-enlarge-link">
-          <p className="flex items-center justify-center gap-2 text-sm text-red-700 dark:text-red-400 font-medium text-center">
+            <Link href="/" title="Accueil - CESIZen">
-            <Phone size={16} className="shrink-0" />
+              <p className="fr-logo">
-            En cas d&apos;urgence : 3114 (numéro national de prévention du suicide)
+                République
+                <br />
+                Française
               </p>
+            </Link>
           </div>
-      </div>
+          <div className="fr-footer__content">
-
+            <p className="fr-footer__content-desc">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+              CESIZen est une plateforme publique de prévention et de suivi en
-        <div className="flex flex-col md:flex-row items-center justify-between gap-6">
+              santé mentale, éditée pour le Ministère des Solidarités et de la
-          {/* Logo + Copyright */}
+              Santé. En cas de détresse, contactez le 3114 (numéro national de
-          <div className="flex flex-col items-center md:items-start gap-2">
+              prévention du suicide).
-            <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é
             </p>
-          </div>
+            <ul className="fr-footer__content-list">
-
+              <li className="fr-footer__content-item">
-          {/* Links */}
+                <a
-          <nav className="flex flex-wrap items-center justify-center gap-6">
+                  className="fr-footer__content-link"
-            <Link
+                  target="_blank"
-              href="/mentions-legales"
+                  rel="noopener noreferrer external"
-              className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
+                  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 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"
-              className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
               >
-              Politique de confidentialité
+                Données personnelles
               </Link>
-            <Link
+            </li>
-              href="/contacts-urgence"
+            <li className="fr-footer__bottom-item">
-              className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
+              <Link className="fr-footer__bottom-link" href="/contacts-urgence">
-            >
                 Contacts d&apos;urgence
               </Link>
-          </nav>
+            </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>
         </div>
       </div>
     </footer>

frontend/src/components/layout/Header.tsx

@@ -1,245 +1,179 @@
 "use client";
 
-import React, { useState } from "react";
+import { useState } from "react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } 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";
+import ConfirmDialog from "@/components/ui/ConfirmDialog";
 
 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 router = useRouter();
   const { user, token, logout } = useAuthStore();
   const isAuthenticated = !!token;
   const isAdmin = user?.role?.nom === "administrateur";
+  const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
 
-  const publicLinks: NavLink[] = [
+  const handleLogout = async () => {
-    { href: "/", label: "Accueil", icon: <Home size={18} /> },
+    setShowLogoutConfirm(false);
-    { href: "/informations", label: "Informations", icon: <BookOpen size={18} /> },
+    await logout();
-  ];
+    router.push("/connexion");
-
-  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 = () => {
+  const navLinks: NavLink[] = [
-    logout();
+    { href: "/", label: "Accueil" },
-    setUserDropdownOpen(false);
+    { href: "/informations", label: "Informations" },
-    setMobileMenuOpen(false);
+    { 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 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">
+    <header role="banner" className="fr-header">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="fr-header__body">
-        <div className="flex items-center justify-between h-16">
+        <div className="fr-container">
-          {/* Logo */}
+          <div className="fr-header__body-row">
-          <Link href="/" className="flex items-center gap-0.5 shrink-0">
+            <div className="fr-header__brand fr-enlarge-link">
-            <span className="text-2xl font-bold font-display text-malachite-500">
+              <div className="fr-header__brand-top">
-              CESI
+                <div className="fr-header__logo">
-            </span>
+                  <p className="fr-logo">
-            <span className="text-2xl font-bold font-display text-candlelight-500">
+                    République
-              ZEN
+                    <br />
-            </span>
+                    Française
-          </Link>
+                  </p>
-
-          {/* 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">
-                  <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"
-                  >
-                    <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">
+                <div className="fr-header__navbar">
-                      {user?.prenom || "Utilisateur"}
+                  <button
-                    </span>
+                    className="fr-btn--menu fr-btn"
+                    data-fr-opened="false"
+                    aria-controls="modal-menu-mobile"
+                    aria-haspopup="menu"
+                    id="button-menu-mobile"
+                    title="Menu"
+                  >
+                    Menu
                   </button>
-
+                </div>
-                  {userDropdownOpen && (
+              </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 ? (
                     <>
+                      <li>
+                        <Link
+                          className="fr-btn fr-icon-account-line"
+                          href="/profil"
+                        >
+                          {user?.prenom || "Mon profil"}
+                        </Link>
+                      </li>
+                      <li>
+                        <button
+                          className="fr-btn fr-icon-logout-box-r-line"
+                          onClick={() => setShowLogoutConfirm(true)}
+                        >
+                          Déconnexion
+                        </button>
+                      </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>
+                    </>
+                  )}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Navigation principale (et menu mobile DSFR) */}
       <div
-                        className="fixed inset-0 z-10"
+        className="fr-header__menu fr-modal"
-                        onClick={() => setUserDropdownOpen(false)}
+        id="modal-menu-mobile"
-                      />
+        aria-labelledby="button-menu-mobile"
-                      <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">
-                        <Link
-                          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} />
+        <div className="fr-container">
-                          Mon profil
-                        </Link>
           <button
-                          onClick={handleLogout}
+            className="fr-btn--close fr-btn"
-                          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"
+            aria-controls="modal-menu-mobile"
+            title="Fermer"
           >
-                          <LogOut size={16} />
+            Fermer
-                          Déconnexion
           </button>
-                      </div>
+          {/* Conteneur requis par le JS DSFR (recopie des liens d'action en mobile) */}
-                    </>
+          <div className="fr-header__menu-links"></div>
-                  )}
+          <nav
-                </div>
+            className="fr-nav"
-              ) : (
+            id="navigation-principale"
-                <>
+            role="navigation"
-                  <Link
+            aria-label="Menu principal"
-                    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
+            <ul className="fr-nav__list">
-                  </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>
-                </>
-              )}
-            </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) => (
+                <li className="fr-nav__item" key={link.href}>
                   <Link
-                key={link.href}
+                    className="fr-nav__link"
                     href={link.href}
-                onClick={() => setMobileMenuOpen(false)}
+                    target="_self"
-                className={`
+                    aria-current={isActive(link.href) ? "page" : undefined}
-                  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>
+                </li>
               ))}
-
+            </ul>
-            <div className="pt-4 border-t border-gray-200 dark:border-gray-800 mt-4 space-y-1">
-              {isAuthenticated ? (
-                <>
-                  <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"
-                  >
-                    <User size={18} />
-                    Mon profil
-                  </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>
           </nav>
         </div>
-      )}
+      </div>
+      <ConfirmDialog
+        isOpen={showLogoutConfirm}
+        title="Déconnexion"
+        message="Voulez-vous vraiment vous déconnecter de votre compte CESIZen ?"
+        confirmLabel="Se déconnecter"
+        cancelLabel="Annuler"
+        onConfirm={handleLogout}
+        onClose={() => setShowLogoutConfirm(false)}
+      />
     </header>
   );
 }

frontend/src/components/layout/Sidebar.tsx

@@ -3,41 +3,33 @@
 import React, { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import {
-  LayoutDashboard,
-  Users,
-  FileText,
-  Heart,
-  Menu,
-  X,
-} from "lucide-react";
 
 interface SidebarLink {
   href: string;
   label: string;
-  icon: React.ReactNode;
+  icon: string;
 }
 
 const sidebarLinks: SidebarLink[] = [
   {
     href: "/admin",
     label: "Dashboard",
-    icon: <LayoutDashboard size={20} />,
+    icon: "fr-icon-dashboard-3-line",
   },
   {
     href: "/admin/utilisateurs",
     label: "Utilisateurs",
-    icon: <Users size={20} />,
+    icon: "fr-icon-user-line",
   },
   {
     href: "/admin/contenus",
     label: "Contenus",
-    icon: <FileText size={20} />,
+    icon: "fr-icon-file-text-line",
   },
   {
     href: "/admin/emotions",
     label: "Émotions",
-    icon: <Heart size={20} />,
+    icon: "fr-icon-heart-line",
   },
 ];
 
@@ -51,83 +43,49 @@ export default function Sidebar() {
   };
 
   return (
-    <>
+    <nav
-      {/* Mobile toggle */}
+      className="fr-sidemenu"
+      aria-labelledby="fr-sidemenu-title"
+      role="navigation"
+    >
+      <div className="fr-sidemenu__inner">
         <button
+          type="button"
+          className="fr-sidemenu__btn"
+          aria-controls="fr-sidemenu-wrapper"
+          aria-expanded={collapsed}
           onClick={() => setCollapsed(!collapsed)}
-        className="lg:hidden fixed top-20 left-4 z-40 p-2 bg-white dark:bg-gray-900 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400"
-        aria-label="Toggle sidebar"
         >
-        {collapsed ? <X size={20} /> : <Menu size={20} />}
+          Menu d&apos;administration
         </button>
-
-      {/* Overlay mobile */}
-      {collapsed && (
         <div
-          className="lg:hidden fixed inset-0 z-30 bg-black/50 backdrop-blur-sm"
+          className={`fr-collapse${collapsed ? " fr-collapse--expanded" : ""}`}
-          onClick={() => setCollapsed(false)}
+          id="fr-sidemenu-wrapper"
-        />
-      )}
-
-      {/* Sidebar */}
-      <aside
-        className={`
-          fixed lg:sticky top-0 left-0 z-40 lg:z-auto
-          h-screen w-64
-          bg-white dark:bg-gray-950
-          border-r border-gray-200 dark:border-gray-800
-          flex flex-col
-          transition-transform duration-300 ease-in-out
-          ${collapsed ? "translate-x-0" : "-translate-x-full lg:translate-x-0"}
-        `}
         >
-        {/* Logo */}
+          <div className="fr-sidemenu__title" id="fr-sidemenu-title">
-        <div className="flex items-center justify-between h-16 px-6 border-b border-gray-200 dark:border-gray-800">
+            <Link href="/admin" className="fr-sidemenu__link">
-          <Link href="/admin" className="flex items-center gap-0.5">
+              Administration CESIZen
-            <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>
             </Link>
-          <button
-            onClick={() => setCollapsed(false)}
-            className="lg:hidden p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500"
-          >
-            <X size={18} />
-          </button>
           </div>
-
+          <ul className="fr-sidemenu__list">
-        {/* Navigation */}
+            {sidebarLinks.map((link) => {
-        <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
+              const active = isActive(link.href);
-          {sidebarLinks.map((link) => (
+              return (
+                <li className="fr-sidemenu__item" key={link.href}>
                   <Link
-              key={link.href}
+                    className={`fr-sidemenu__link ${link.icon} fr-link--icon-left`}
                     href={link.href}
+                    aria-current={active ? "page" : undefined}
                     onClick={() => setCollapsed(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 shadow-sm"
-                    : "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>
-          ))}
+                </li>
-        </nav>
+              );
-
+            })}
-        {/* Footer */}
+          </ul>
-        <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-800">
-          <p className="text-xs text-gray-400 dark:text-gray-600">
-            Administration CESIZen
-          </p>
         </div>
-      </aside>
+      </div>
-    </>
+    </nav>
   );
 }

frontend/src/components/ui/Badge.tsx

@@ -8,27 +8,41 @@ interface BadgeProps {
   className?: string;
 }
 
+// Mappe une couleur (hex) vers une variante de statut DSFR `fr-badge--*`.
+// Conserve la prop `color` pour garder la même signature, mais le rendu
+// utilise désormais le système de couleurs du DSFR (thème clair/sombre géré).
+function badgeVariant(color: string): string {
+  const c = color.toLowerCase();
+  switch (c) {
+    case "#22c55e":
+    case "#16a34a":
+    case "green":
+      return "fr-badge--success";
+    case "#ef4444":
+    case "#dc2626":
+    case "red":
+      return "fr-badge--error";
+    case "#f59e0b":
+    case "#fce117":
+    case "orange":
+      return "fr-badge--warning";
+    case "#3b82f6":
+    case "#0ea5e9":
+    case "blue":
+      return "fr-badge--info";
+    default:
+      return "fr-badge--new";
+  }
+}
+
 export default function Badge({
   children,
   color = "#fce117",
   className = "",
 }: BadgeProps) {
-  return (
+  const classes = ["fr-badge", "fr-badge--sm", badgeVariant(color), className]
-    <span
+    .filter(Boolean)
-      className={`
+    .join(" ");
-        inline-flex items-center
+
-        px-2.5 py-0.5
+  return <span className={classes}>{children}</span>;
-        rounded-full
-        text-xs font-medium
-        transition-all duration-200
-        ${className}
-      `}
-      style={{
-        backgroundColor: `${color}20`,
-        color: color,
-      }}
-    >
-      {children}
-    </span>
-  );
 }

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:
+  primary: "",
-    "bg-candlelight-500 hover:bg-candlelight-600 text-black font-semibold shadow-sm hover:shadow-md",
+  secondary: "fr-btn--secondary",
-  secondary:
+  outline: "fr-btn--secondary",
-    "bg-malachite-500 hover:bg-malachite-600 text-white font-semibold shadow-sm hover:shadow-md",
+  ghost: "fr-btn--tertiary-no-outline",
-  outline:
+  danger: "fr-btn--secondary",
-    "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",
 };
 
 const sizeClasses: Record<ButtonSize, string> = {
-  sm: "px-3 py-1.5 text-sm",
+  sm: "fr-btn--sm",
-  md: "px-5 py-2.5 text-base",
+  md: "",
-  lg: "px-7 py-3.5 text-lg",
+  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
+    <button className={classes} disabled={disabled || loading} {...rest}>
-      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>
-      )}
       {children}
     </button>
   );

frontend/src/components/ui/Card.tsx

@@ -8,20 +8,17 @@ interface CardProps {
   hover?: boolean;
 }
 
+// Conteneur neutre au style DSFR (fr-card sans la structure imposée d'une carte
+// éditoriale DSFR, afin de garder un conteneur générique réutilisable).
 export default function Card({ children, className = "", hover = false }: CardProps) {
-  return (
+  const classes = [
-    <div
+    "app-panel",
-      className={`
+    "fr-p-3w",
-        bg-white dark:bg-gray-900
+    hover ? "fr-enlarge-link" : "",
-        rounded-2xl shadow-sm
+    className,
-        border border-gray-100 dark:border-gray-800
+  ]
-        p-6
+    .filter(Boolean)
-        transition-all duration-200
+    .join(" ");
-        ${hover ? "hover:shadow-lg hover:-translate-y-0.5" : ""}
+
-        ${className}
+  return <div className={classes}>{children}</div>;
-      `}
-    >
-      {children}
-    </div>
-  );
 }

frontend/src/components/ui/ConfirmDialog.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { AlertTriangle } from "lucide-react";
 import Modal from "./Modal";
 import Button from "./Button";
 
@@ -27,32 +26,10 @@ export default function ConfirmDialog({
 }: ConfirmDialogProps) {
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={title} size="sm">
-      <div className="flex items-start gap-3 mb-6">
+      <p className="fr-mb-3w">{message}</p>
-        <div
-          className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${
-            destructive
-              ? "bg-red-50 dark:bg-red-950/40"
-              : "bg-malachite-50 dark:bg-malachite-950/40"
-          }`}
-        >
-          <AlertTriangle
-            size={20}
-            className={
-              destructive
-                ? "text-red-600 dark:text-red-400"
-                : "text-malachite-600 dark:text-malachite-400"
-            }
-          />
-        </div>
-        <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed pt-1">
-          {message}
-        </p>
-      </div>
 
-      <div className="flex justify-end gap-2">
+      <ul className="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg">
-        <Button variant="ghost" onClick={onClose}>
+        <li>
-          {cancelLabel}
-        </Button>
           <Button
             variant={destructive ? "danger" : "primary"}
             onClick={() => {
@@ -62,7 +39,13 @@ export default function ConfirmDialog({
           >
             {confirmLabel}
           </Button>
-      </div>
+        </li>
+        <li>
+          <Button variant="secondary" onClick={onClose}>
+            {cancelLabel}
+          </Button>
+        </li>
+      </ul>
     </Modal>
   );
 }

frontend/src/components/ui/Input.tsx

@@ -17,42 +17,26 @@ export default function Input({
   ...inputProps
 }: InputProps) {
   const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+  const errorId = error ? `${inputId}-error` : undefined;
 
   return (
-    <div className="w-full">
+    <div className={`fr-input-group${error ? " fr-input-group--error" : ""}`}>
       {label && (
-        <label
+        <label className="fr-label" htmlFor={inputId}>
-          htmlFor={inputId}
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5"
-        >
           {label}
         </label>
       )}
-      <div className="relative">
+      <div className={icon ? "fr-input-wrap" : undefined}>
-        {icon && (
+        {icon && <span aria-hidden="true">{icon}</span>}
-          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 dark:text-gray-500">
-            {icon}
-          </div>
-        )}
         <input
           id={inputId}
-          className={`
+          className={`fr-input${error ? " fr-input--error" : ""} ${className}`.trim()}
-            w-full rounded-xl border border-gray-300 dark:border-gray-700
+          aria-describedby={errorId}
-            bg-white dark:bg-gray-900
-            text-gray-900 dark:text-gray-100
-            placeholder:text-gray-400 dark:placeholder:text-gray-500
-            focus:outline-none focus:ring-2 focus:ring-candlelight-500 focus:border-candlelight-500
-            transition-all duration-200
-            px-4 py-2.5 text-base
-            ${icon ? "pl-10" : ""}
-            ${error ? "border-red-500 focus:ring-red-500 focus:border-red-500" : ""}
-            ${className}
-          `}
           {...inputProps}
         />
       </div>
       {error && (
-        <p className="mt-1.5 text-sm text-red-500 dark:text-red-400">
+        <p id={errorId} className="fr-error-text">
           {error}
         </p>
       )}

frontend/src/components/ui/Modal.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useEffect, useCallback } from "react";
-import { X } from "lucide-react";
 
 type ModalSize = "sm" | "md" | "lg";
 
@@ -13,10 +12,10 @@ interface ModalProps {
   size?: ModalSize;
 }
 
-const sizeClasses: Record<ModalSize, string> = {
+const maxWidthBySize: Record<ModalSize, string> = {
-  sm: "max-w-sm",
+  sm: "480px",
-  md: "max-w-lg",
+  md: "672px",
-  lg: "max-w-2xl",
+  lg: "896px",
 };
 
 export default function Modal({
@@ -34,10 +33,9 @@ export default function Modal({
   );
 
   useEffect(() => {
-    if (isOpen) {
+    if (!isOpen) return;
     document.addEventListener("keydown", handleKeyDown);
     document.body.style.overflow = "hidden";
-    }
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "";
@@ -46,43 +44,51 @@ export default function Modal({
 
   if (!isOpen) return null;
 
+  // Overlay React maîtrisé (pas le JS DSFR) : fond assombri visible, fermeture
+  // au clic extérieur / Échap / bouton. Look DSFR via les classes fr-modal__*.
   return (
-    <div className="fixed inset-0 z-100 flex items-center justify-center p-4">
-      {/* Overlay */}
     <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200"
+      role="dialog"
+      aria-modal="true"
       onClick={onClose}
-      />
+      style={{
-
+        position: "fixed",
-      {/* Modal */}
+        inset: 0,
-      <div
+        zIndex: 1000,
-        className={`
+        display: "flex",
-          relative w-full ${sizeClasses[size]}
+        alignItems: "flex-start",
-          bg-white dark:bg-gray-900
+        justifyContent: "center",
-          rounded-2xl shadow-2xl
+        overflowY: "auto",
-          border border-gray-100 dark:border-gray-800
+        padding: "2rem 1rem",
-          p-6
+        background: "rgba(22, 22, 22, 0.64)",
-          animate-in zoom-in-95 fade-in duration-200
+      }}
-        `}
     >
-        {/* Header */}
+      <div
-        <div className="flex items-center justify-between mb-4">
+        className="fr-modal__body"
-          {title && (
+        onClick={(e) => e.stopPropagation()}
-            <h2 className="text-xl font-bold font-display text-gray-900 dark:text-gray-100">
+        style={{
-              {title}
+          width: "100%",
-            </h2>
+          maxWidth: maxWidthBySize[size],
-          )}
+          background: "var(--background-default-grey, #fff)",
+          borderRadius: "0.25rem",
+          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.32)",
+          padding: "1.5rem",
+        }}
+      >
+        <div className="fr-modal__header">
           <button
-            onClick={onClose}
+            type="button"
-            className="ml-auto p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-500 dark:text-gray-400"
+            className="fr-btn--close fr-btn"
             aria-label="Fermer"
+            onClick={onClose}
           >
-            <X size={20} />
+            Fermer
           </button>
         </div>
-
+        <div className="fr-modal__content">
-        {/* Content */}
+          {title && <h1 className="fr-modal__title">{title}</h1>}
-        <div>{children}</div>
+          {children}
+        </div>
       </div>
     </div>
   );

frontend/src/components/ui/Skeleton.tsx

@@ -9,10 +9,12 @@ interface SkeletonProps {
   variant?: SkeletonVariant;
 }
 
-const variantClasses: Record<SkeletonVariant, string> = {
+// Dimensions/forme selon la variante. Couleur neutre gérée en ligne pour
-  text: "h-4 w-full rounded",
+// rester cohérent avec le thème DSFR (sans couleur custom Tailwind).
-  circle: "h-10 w-10 rounded-full",
+const variantStyle: Record<SkeletonVariant, React.CSSProperties> = {
-  rect: "h-24 w-full rounded-xl",
+  text: { height: "1rem", width: "100%", borderRadius: "0.25rem" },
+  circle: { height: "2.5rem", width: "2.5rem", borderRadius: "9999px" },
+  rect: { height: "6rem", width: "100%", borderRadius: "0.25rem" },
 };
 
 export default function Skeleton({
@@ -21,12 +23,14 @@ export default function Skeleton({
 }: SkeletonProps) {
   return (
     <div
-      className={`
+      className={className}
-        animate-pulse
+      aria-hidden="true"
-        bg-gray-200 dark:bg-gray-700
+      style={{
-        ${variantClasses[variant]}
+        ...variantStyle[variant],
-        ${className}
+        backgroundColor: "var(--background-contrast-grey)",
-      `}
+        opacity: 0.6,
+        animation: "fr-skeleton-pulse 1.5s ease-in-out infinite",
+      }}
     />
   );
 }

frontend/src/components/ui/Slider.tsx

@@ -19,33 +19,45 @@ export default function Slider({
   label,
   showValue = true,
 }: SliderProps) {
+  const rangeId = label
+    ? `range-${label.toLowerCase().replace(/\s+/g, "-")}`
+    : "range";
+
   return (
-    <div className="w-full">
+    <div className="fr-range-group">
       {(label || showValue) && (
-        <div className="flex items-center justify-between mb-2">
+        <label className="fr-label" htmlFor={rangeId}>
-          {label && (
-            <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
           {label}
+          {showValue && (
+            <span className="fr-hint-text">Valeur sélectionnée : {value}</span>
+          )}
         </label>
       )}
-          {showValue && (
+      <div
-            <span className="text-sm font-bold text-candlelight-600 dark:text-candlelight-400 bg-candlelight-50 dark:bg-candlelight-950 px-2 py-0.5 rounded-lg">
+        className="fr-range fr-range--sm"
-              {value}
+        data-fr-js-range="true"
-            </span>
+        data-fr-min={min}
-          )}
+        data-fr-max={max}
-        </div>
+      >
-      )}
+        <span
+          className="fr-range__output"
+          aria-hidden="true"
+        >{`${value}`}</span>
         <input
+          id={rangeId}
           type="range"
           min={min}
           max={max}
           value={value}
+          step={1}
           onChange={(e) => onChange(Number(e.target.value))}
-        className="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 dark:bg-gray-700 accent-candlelight-500"
         />
-      <div className="flex justify-between mt-1">
+        <div className="fr-range__min" aria-hidden="true">
-        <span className="text-xs text-gray-400 dark:text-gray-500">{min}</span>
+          {min}
-        <span className="text-xs text-gray-400 dark:text-gray-500">{max}</span>
+        </div>
+        <div className="fr-range__max" aria-hidden="true">
+          {max}
+        </div>
       </div>
     </div>
   );

frontend/src/components/ui/ThemeToggle.tsx

@@ -1,35 +1,51 @@
 "use client";
 
 import React from "react";
-import { useTheme } from "next-themes";
+
-import { Sun, Moon } from "lucide-react";
+type Scheme = "light" | "dark";
 
 export default function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = React.useState(false);
+  const [scheme, setScheme] = React.useState<Scheme>("light");
 
   React.useEffect(() => {
     setMounted(true);
+    const current = document.documentElement.getAttribute("data-fr-theme");
+    setScheme(current === "dark" ? "dark" : "light");
   }, []);
 
+  const toggle = () => {
+    const next: Scheme = scheme === "dark" ? "light" : "dark";
+    document.documentElement.setAttribute("data-fr-theme", next);
+    document.documentElement.setAttribute("data-fr-scheme", next);
+    setScheme(next);
+  };
+
   if (!mounted) {
     return (
       <button
-        className="p-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        type="button"
+        className="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-theme-fill"
         aria-label="Changer le thème"
       >
-        <div className="h-5 w-5" />
+        Thème
       </button>
     );
   }
 
   return (
     <button
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      type="button"
-      className="p-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 text-gray-600 dark:text-gray-400"
+      onClick={toggle}
-      aria-label={theme === "dark" ? "Passer en mode clair" : "Passer en mode sombre"}
+      className={`fr-btn fr-btn--tertiary fr-btn--icon-left ${
+        scheme === "dark" ? "fr-icon-sun-fill" : "fr-icon-moon-fill"
+      }`}
+      aria-label={
+        scheme === "dark" ? "Passer en mode clair" : "Passer en mode sombre"
+      }
+      title={scheme === "dark" ? "Passer en mode clair" : "Passer en mode sombre"}
     >
-      {theme === "dark" ? <Sun size={20} /> : <Moon size={20} />}
+      {scheme === "dark" ? "Mode clair" : "Mode sombre"}
     </button>
   );
 }

mobile/app/(tabs)/_layout.tsx

@@ -23,6 +23,7 @@ export default function TabLayout() {
         name="index"
         options={{
           title: 'Accueil',
+          headerShown: false,
           tabBarIcon: ({ color, size }) => <Ionicons name="home" size={size} color={color} />,
         }}
       />

mobile/app/(tabs)/index.tsx

@@ -5,6 +5,7 @@ import { useAuthStore } from '@/lib/auth-store';
 import { useRapport } from '@/hooks/useRapport';
 import { useSaisies } from '@/hooks/useTracker';
 import { Colors } from '@/lib/colors';
+import RepubliqueHeader from '@/components/RepubliqueHeader';
 
 export default function DashboardScreen() {
   const router = useRouter();
@@ -15,6 +16,8 @@ export default function DashboardScreen() {
   const recentSaisies = (saisies || []).slice(0, 3);
 
   return (
+    <View style={styles.screen}>
+      <RepubliqueHeader />
       <ScrollView style={styles.container} contentContainerStyle={styles.content}>
       <Text style={styles.greeting}>Bonjour, {user?.prenom} 👋</Text>
       <Text style={styles.subtitle}>Comment allez-vous aujourd'hui ?</Text>
@@ -81,39 +84,41 @@ export default function DashboardScreen() {
         </View>
       )}
       </ScrollView>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: Colors.white },
   container: { flex: 1, backgroundColor: Colors.white },
   content: { padding: 20 },
   greeting: { fontSize: 28, fontWeight: '800', color: Colors.black, marginTop: 8 },
   subtitle: { fontSize: 16, color: Colors.gray[500], marginTop: 4, marginBottom: 24 },
   actionsRow: { flexDirection: 'row', gap: 12, marginBottom: 24 },
   actionCard: {
-    flex: 1, backgroundColor: Colors.gray[50], borderRadius: 16, padding: 20,
+    flex: 1, backgroundColor: Colors.white, borderRadius: 4, padding: 20,
-    alignItems: 'center', gap: 12, borderWidth: 1, borderColor: Colors.gray[100],
+    alignItems: 'center', gap: 12, borderWidth: 1, borderColor: Colors.gray[200],
   },
-  actionIcon: { width: 56, height: 56, borderRadius: 16, justifyContent: 'center', alignItems: 'center' },
+  actionIcon: { width: 56, height: 56, borderRadius: 4, justifyContent: 'center', alignItems: 'center' },
-  actionText: { fontSize: 14, fontWeight: '600', color: Colors.gray[700] },
+  actionText: { fontSize: 14, fontWeight: '600', color: Colors.black },
   statsContainer: { marginBottom: 24 },
   sectionTitle: { fontSize: 18, fontWeight: '700', color: Colors.black, marginBottom: 12 },
   statsRow: { flexDirection: 'row', gap: 12 },
   statCard: {
-    flex: 1, backgroundColor: Colors.gray[50], borderRadius: 16, padding: 16,
+    flex: 1, backgroundColor: Colors.gray[50], borderRadius: 4, padding: 16,
-    alignItems: 'center', borderWidth: 1, borderColor: Colors.gray[100],
+    alignItems: 'center', borderWidth: 1, borderColor: Colors.gray[200],
   },
-  statValue: { fontSize: 24, fontWeight: '800', color: Colors.black },
+  statValue: { fontSize: 24, fontWeight: '800', color: Colors.primary },
   statLabel: { fontSize: 12, color: Colors.gray[500], marginTop: 4 },
   recentContainer: { marginBottom: 24 },
   sectionHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 },
-  seeAll: { fontSize: 14, fontWeight: '600', color: Colors.secondary },
+  seeAll: { fontSize: 14, fontWeight: '600', color: Colors.primary, textDecorationLine: 'underline' },
   saisieItem: {
     flexDirection: 'row', alignItems: 'center', gap: 12, padding: 14,
-    backgroundColor: Colors.gray[50], borderRadius: 14, marginBottom: 8,
+    backgroundColor: Colors.white, borderRadius: 4, marginBottom: 8,
-    borderWidth: 1, borderColor: Colors.gray[100],
+    borderWidth: 1, borderColor: Colors.gray[200],
   },
-  emotionIcon: { width: 44, height: 44, borderRadius: 12, justifyContent: 'center', alignItems: 'center' },
+  emotionIcon: { width: 44, height: 44, borderRadius: 4, justifyContent: 'center', alignItems: 'center' },
   emotionEmoji: { fontSize: 22 },
   saisieContent: { flex: 1 },
   saisieEmotion: { fontSize: 15, fontWeight: '600', color: Colors.black },

mobile/app/(tabs)/info/[slug].tsx

@@ -11,7 +11,7 @@ export default function FeedDetailScreen() {
   if (isLoading) {
     return (
       <View style={styles.centered}>
-        <ActivityIndicator size="large" color={Colors.secondary} />
+        <ActivityIndicator size="large" color={Colors.primary} />
       </View>
     );
   }
@@ -32,7 +32,7 @@ export default function FeedDetailScreen() {
       <Stack.Screen options={{ title: feed.titre ?? '' }} />
       <ScrollView style={styles.container} contentContainerStyle={styles.content}>
         <View style={styles.badge}>
-          <Ionicons name="information-circle" size={14} color={Colors.secondary} />
+          <Ionicons name="information-circle" size={14} color={Colors.primary} />
           <Text style={styles.badgeText}>Information santé mentale</Text>
         </View>
 
@@ -52,10 +52,10 @@ const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: Colors.white },
   content: { padding: 20, paddingBottom: 40 },
   centered: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: Colors.white },
-  badge: { flexDirection: 'row', alignItems: 'center', gap: 6, alignSelf: 'flex-start', backgroundColor: `${Colors.secondary}15`, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 999, marginBottom: 12 },
+  badge: { flexDirection: 'row', alignItems: 'center', gap: 6, alignSelf: 'flex-start', backgroundColor: `${Colors.primary}15`, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 4, marginBottom: 12 },
-  badgeText: { fontSize: 12, fontWeight: '600', color: Colors.secondary },
+  badgeText: { fontSize: 12, fontWeight: '600', color: Colors.primary },
   title: { fontSize: 24, fontWeight: '800', color: Colors.black, marginBottom: 8, lineHeight: 30 },
   date: { fontSize: 13, color: Colors.gray[400], marginBottom: 20 },
-  body: { fontSize: 15, lineHeight: 24, color: Colors.gray[700] ?? '#374151' },
+  body: { fontSize: 15, lineHeight: 24, color: Colors.black },
   errorText: { marginTop: 12, fontSize: 16, color: Colors.gray[400] },
 });

mobile/app/(tabs)/info/index.tsx

@@ -15,7 +15,7 @@ export default function InfoListScreen() {
       onPress={() => router.push(`/(tabs)/info/${item.slug}`)}
     >
       <View style={styles.cardIcon}>
-        <Ionicons name="document-text" size={24} color={Colors.secondary} />
+        <Ionicons name="document-text" size={24} color={Colors.primary} />
       </View>
       <View style={styles.cardContent}>
         <Text style={styles.cardTitle}>{item.titre}</Text>
@@ -62,14 +62,14 @@ const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: Colors.white },
   listContent: { padding: 16 },
   header: { marginBottom: 20 },
-  headerTitle: { fontSize: 14, fontWeight: '700', color: Colors.secondary, textTransform: 'uppercase', letterSpacing: 1 },
+  headerTitle: { fontSize: 14, fontWeight: '700', color: Colors.primary, textTransform: 'uppercase', letterSpacing: 1 },
   headerSubtitle: { fontSize: 15, color: Colors.gray[500], marginTop: 4 },
   card: {
     flexDirection: 'row', alignItems: 'center', gap: 14, padding: 16,
-    backgroundColor: Colors.gray[50], borderRadius: 16, marginBottom: 10,
+    backgroundColor: Colors.white, borderRadius: 4, marginBottom: 10,
-    borderWidth: 1, borderColor: Colors.gray[100],
+    borderWidth: 1, borderColor: Colors.gray[200],
   },
-  cardIcon: { width: 48, height: 48, borderRadius: 14, backgroundColor: `${Colors.secondary}15`, justifyContent: 'center', alignItems: 'center' },
+  cardIcon: { width: 48, height: 48, borderRadius: 4, backgroundColor: `${Colors.primary}15`, justifyContent: 'center', alignItems: 'center' },
   cardContent: { flex: 1 },
   cardTitle: { fontSize: 15, fontWeight: '700', color: Colors.black, marginBottom: 4 },
   cardExcerpt: { fontSize: 13, color: Colors.gray[500], lineHeight: 18 },

mobile/app/(tabs)/journal/edit.tsx

@@ -112,7 +112,7 @@ export default function EditEntryScreen() {
           onPress={handleSubmit}
           disabled={updateSaisie.isPending || !emotionId}
         >
-          <Ionicons name="checkmark" size={20} color={Colors.black} />
+          <Ionicons name="checkmark" size={20} color={Colors.white} />
           <Text style={styles.submitBtnText}>
             {updateSaisie.isPending ? 'Envoi...' : 'Enregistrer'}
           </Text>
@@ -129,34 +129,35 @@ const styles = StyleSheet.create({
   loadingText: { color: Colors.gray[400], fontSize: 16 },
   title: { fontSize: 24, fontWeight: '800', color: Colors.black, marginBottom: 24 },
   section: { marginBottom: 24 },
-  label: { fontSize: 15, fontWeight: '700', color: Colors.gray[700], marginBottom: 10 },
+  label: { fontSize: 15, fontWeight: '700', color: Colors.black, marginBottom: 10 },
   intensityContainer: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'center', marginBottom: 16 },
   intensityValue: { fontSize: 48, fontWeight: '800', color: Colors.black },
   intensityUnit: { fontSize: 20, color: Colors.gray[400], marginLeft: 4 },
   sliderButtons: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 4 },
   sliderDot: {
-    width: 28, height: 28, borderRadius: 14,
+    width: 28, height: 28, borderRadius: 4,
     backgroundColor: Colors.gray[100], justifyContent: 'center', alignItems: 'center',
   },
   sliderDotActive: { backgroundColor: Colors.primary },
   sliderDotText: { fontSize: 12, fontWeight: '600', color: Colors.gray[500] },
-  sliderDotTextActive: { color: Colors.black },
+  sliderDotTextActive: { color: Colors.white },
   sliderLabels: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 4 },
   sliderLabel: { fontSize: 12, color: Colors.gray[400] },
   textArea: {
-    backgroundColor: Colors.gray[50], borderWidth: 1, borderColor: Colors.gray[200],
+    backgroundColor: Colors.gray[100], borderTopLeftRadius: 4, borderTopRightRadius: 4,
-    borderRadius: 16, padding: 16, fontSize: 15, color: Colors.black, minHeight: 100,
+    borderBottomWidth: 2, borderBottomColor: Colors.black,
+    padding: 16, fontSize: 15, color: Colors.black, minHeight: 100,
   },
   actionsRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 8, gap: 12 },
   cancelBtn: {
-    flex: 1, paddingVertical: 16, borderRadius: 14,
+    flex: 1, paddingVertical: 16, borderRadius: 4,
-    backgroundColor: Colors.gray[100], alignItems: 'center',
+    backgroundColor: Colors.white, alignItems: 'center', borderWidth: 1, borderColor: Colors.primary,
   },
-  cancelBtnText: { fontSize: 15, fontWeight: '600', color: Colors.gray[600] },
+  cancelBtnText: { fontSize: 15, fontWeight: '600', color: Colors.primary },
   submitBtn: {
-    flex: 1, flexDirection: 'row', gap: 8, paddingVertical: 16, borderRadius: 14,
+    flex: 1, flexDirection: 'row', gap: 8, paddingVertical: 16, borderRadius: 4,
-    backgroundColor: Colors.secondary, alignItems: 'center', justifyContent: 'center',
+    backgroundColor: Colors.primary, alignItems: 'center', justifyContent: 'center',
   },
-  submitBtnText: { fontSize: 15, fontWeight: '700', color: Colors.black },
+  submitBtnText: { fontSize: 15, fontWeight: '700', color: Colors.white },
   btnDisabled: { opacity: 0.5 },
 });

mobile/app/(tabs)/journal/index.tsx

@@ -81,7 +81,7 @@ export default function JournalScreen() {
         }
       />
       <TouchableOpacity style={styles.fab} onPress={() => router.push('/(tabs)/journal/new')}>
-        <Ionicons name="add" size={28} color={Colors.black} />
+        <Ionicons name="add" size={28} color={Colors.white} />
       </TouchableOpacity>
     </View>
   );
@@ -92,14 +92,14 @@ const styles = StyleSheet.create({
   listContent: { padding: 16, paddingBottom: 80 },
   saisieCard: {
     flexDirection: 'row', alignItems: 'flex-start', gap: 12, padding: 16,
-    backgroundColor: Colors.gray[50], borderRadius: 16, marginBottom: 10,
+    backgroundColor: Colors.white, borderRadius: 4, marginBottom: 10,
-    borderWidth: 1, borderColor: Colors.gray[100],
+    borderWidth: 1, borderColor: Colors.gray[200],
   },
-  emotionIcon: { width: 48, height: 48, borderRadius: 14, justifyContent: 'center', alignItems: 'center' },
+  emotionIcon: { width: 48, height: 48, borderRadius: 4, justifyContent: 'center', alignItems: 'center' },
   emotionEmoji: { fontSize: 24 },
   saisieContent: { flex: 1 },
   saisieHeader: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 6 },
-  badge: { paddingHorizontal: 10, paddingVertical: 3, borderRadius: 8 },
+  badge: { paddingHorizontal: 10, paddingVertical: 3, borderRadius: 4 },
   badgeText: { fontSize: 13, fontWeight: '600' },
   intensityText: { fontSize: 12, color: Colors.gray[400] },
   intensityBar: { height: 4, backgroundColor: Colors.gray[200], borderRadius: 2, marginBottom: 6 },
@@ -113,7 +113,7 @@ const styles = StyleSheet.create({
   emptyText: { fontSize: 14, color: Colors.gray[400], marginTop: 4 },
   fab: {
     position: 'absolute', right: 20, bottom: 20,
-    width: 56, height: 56, borderRadius: 28,
+    width: 56, height: 56, borderRadius: 4,
     backgroundColor: Colors.primary, justifyContent: 'center', alignItems: 'center',
     shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.2, shadowRadius: 8,
     elevation: 6,

mobile/app/(tabs)/journal/new.tsx

@@ -59,7 +59,7 @@ export default function NewEntryScreen() {
             disabled={!emotionId}
           >
             <Text style={styles.nextBtnText}>Suivant</Text>
-            <Ionicons name="arrow-forward" size={20} color={Colors.black} />
+            <Ionicons name="arrow-forward" size={20} color={Colors.white} />
           </TouchableOpacity>
         </View>
       )}
@@ -96,12 +96,12 @@ export default function NewEntryScreen() {
           </View>
           <View style={styles.navRow}>
             <TouchableOpacity style={styles.backBtn} onPress={() => setStep(1)}>
-              <Ionicons name="arrow-back" size={20} color={Colors.gray[600]} />
+              <Ionicons name="arrow-back" size={20} color={Colors.primary} />
               <Text style={styles.backBtnText}>Retour</Text>
             </TouchableOpacity>
             <TouchableOpacity style={styles.nextBtn} onPress={() => setStep(3)}>
               <Text style={styles.nextBtnText}>Suivant</Text>
-              <Ionicons name="arrow-forward" size={20} color={Colors.black} />
+              <Ionicons name="arrow-forward" size={20} color={Colors.white} />
             </TouchableOpacity>
           </View>
         </View>
@@ -122,7 +122,7 @@ export default function NewEntryScreen() {
           />
           <View style={styles.navRow}>
             <TouchableOpacity style={styles.backBtn} onPress={() => setStep(2)}>
-              <Ionicons name="arrow-back" size={20} color={Colors.gray[600]} />
+              <Ionicons name="arrow-back" size={20} color={Colors.primary} />
               <Text style={styles.backBtnText}>Retour</Text>
             </TouchableOpacity>
             <TouchableOpacity
@@ -130,7 +130,7 @@ export default function NewEntryScreen() {
               onPress={handleSubmit}
               disabled={createSaisie.isPending}
             >
-              <Ionicons name="checkmark" size={20} color={Colors.black} />
+              <Ionicons name="checkmark" size={20} color={Colors.white} />
               <Text style={styles.nextBtnText}>{createSaisie.isPending ? 'Envoi...' : 'Enregistrer'}</Text>
             </TouchableOpacity>
           </View>
@@ -149,11 +149,11 @@ const styles = StyleSheet.create({
     width: 32, height: 32, borderRadius: 16, backgroundColor: Colors.gray[200],
     justifyContent: 'center', alignItems: 'center',
   },
-  stepActive: { backgroundColor: Colors.secondary },
+  stepActive: { backgroundColor: Colors.primary },
   stepNumber: { fontSize: 14, fontWeight: '700', color: Colors.gray[500] },
   stepNumberActive: { color: Colors.white },
   stepLine: { width: 40, height: 3, backgroundColor: Colors.gray[200], marginHorizontal: 4 },
-  stepLineActive: { backgroundColor: Colors.secondary },
+  stepLineActive: { backgroundColor: Colors.primary },
   stepTitle: { fontSize: 20, fontWeight: '700', color: Colors.black, marginBottom: 20 },
   intensityContainer: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'center', marginBottom: 24 },
   intensityValue: { fontSize: 64, fontWeight: '800', color: Colors.black },
@@ -165,20 +165,21 @@ const styles = StyleSheet.create({
   sliderTrack: { height: 6, backgroundColor: Colors.gray[200], borderRadius: 3, marginBottom: 8 },
   sliderFill: { height: 6, backgroundColor: Colors.primary, borderRadius: 3 },
   sliderButtons: { flexDirection: 'row', justifyContent: 'space-between' },
-  sliderDot: { width: 28, height: 28, borderRadius: 14, backgroundColor: Colors.gray[100], justifyContent: 'center', alignItems: 'center' },
+  sliderDot: { width: 28, height: 28, borderRadius: 4, backgroundColor: Colors.gray[100], justifyContent: 'center', alignItems: 'center' },
   sliderDotActive: { backgroundColor: Colors.primary },
   sliderDotText: { fontSize: 12, fontWeight: '600', color: Colors.gray[500] },
-  sliderDotTextActive: { color: Colors.black },
+  sliderDotTextActive: { color: Colors.white },
   textArea: {
-    backgroundColor: Colors.gray[50], borderWidth: 1, borderColor: Colors.gray[200],
+    backgroundColor: Colors.gray[100], borderTopLeftRadius: 4, borderTopRightRadius: 4,
-    borderRadius: 16, padding: 16, fontSize: 15, color: Colors.black,
+    borderBottomWidth: 2, borderBottomColor: Colors.black,
+    padding: 16, fontSize: 15, color: Colors.black,
     minHeight: 120, marginBottom: 24,
   },
   navRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 16 },
-  backBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 20, borderRadius: 12, backgroundColor: Colors.gray[100] },
+  backBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 20, borderRadius: 4, backgroundColor: Colors.white, borderWidth: 1, borderColor: Colors.primary },
-  backBtnText: { fontSize: 15, fontWeight: '600', color: Colors.gray[600] },
+  backBtnText: { fontSize: 15, fontWeight: '600', color: Colors.primary },
-  nextBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 12, backgroundColor: Colors.primary },
+  nextBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 4, backgroundColor: Colors.primary },
-  submitBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 12, backgroundColor: Colors.secondary },
+  submitBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, paddingHorizontal: 24, borderRadius: 4, backgroundColor: Colors.primary },
-  nextBtnText: { fontSize: 15, fontWeight: '700', color: Colors.black },
+  nextBtnText: { fontSize: 15, fontWeight: '700', color: Colors.white },
   btnDisabled: { opacity: 0.5 },
 });

mobile/app/(tabs)/journal/reports.tsx

@@ -53,7 +53,7 @@ export default function ReportsScreen() {
               <Text style={styles.statLabel}>Intensite moy.</Text>
             </View>
             <View style={styles.statCard}>
-              <Ionicons name="heart" size={20} color="#FF69B4" />
+              <Ionicons name="heart" size={20} color={Colors.rougeMarianne} />
               <Text style={styles.statValue}>{rapport.stats.emotion_dominante?.icone || '—'}</Text>
               <Text style={styles.statLabel}>{rapport.stats.emotion_dominante?.nom || 'Aucune'}</Text>
             </View>
@@ -102,17 +102,17 @@ export default function ReportsScreen() {
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: Colors.white },
   content: { padding: 20, paddingBottom: 40 },
-  periodRow: { flexDirection: 'row', backgroundColor: Colors.gray[100], borderRadius: 12, padding: 4, marginBottom: 20 },
+  periodRow: { flexDirection: 'row', backgroundColor: Colors.gray[100], borderRadius: 4, padding: 4, marginBottom: 20 },
-  periodBtn: { flex: 1, paddingVertical: 10, alignItems: 'center', borderRadius: 10 },
+  periodBtn: { flex: 1, paddingVertical: 10, alignItems: 'center', borderRadius: 4 },
-  periodBtnActive: { backgroundColor: Colors.white, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2 },
+  periodBtnActive: { backgroundColor: Colors.primary },
   periodText: { fontSize: 13, fontWeight: '600', color: Colors.gray[500] },
-  periodTextActive: { color: Colors.black },
+  periodTextActive: { color: Colors.white },
   loading: { padding: 40, alignItems: 'center' },
   loadingText: { color: Colors.gray[400] },
   statsRow: { flexDirection: 'row', gap: 10, marginBottom: 16 },
   statCard: {
-    flex: 1, backgroundColor: Colors.gray[50], borderRadius: 16, padding: 16,
+    flex: 1, backgroundColor: Colors.gray[50], borderRadius: 4, padding: 16,
-    alignItems: 'center', gap: 6, borderWidth: 1, borderColor: Colors.gray[100],
+    alignItems: 'center', gap: 6, borderWidth: 1, borderColor: Colors.gray[200],
   },
   statValue: { fontSize: 22, fontWeight: '800', color: Colors.black },
   statLabel: { fontSize: 11, color: Colors.gray[500] },
@@ -123,7 +123,7 @@ const styles = StyleSheet.create({
   repartitionItem: { marginBottom: 16 },
   repartitionHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 6 },
   colorDot: { width: 10, height: 10, borderRadius: 5, marginRight: 8 },
-  repartitionName: { flex: 1, fontSize: 14, fontWeight: '600', color: Colors.gray[700] },
+  repartitionName: { flex: 1, fontSize: 14, fontWeight: '600', color: Colors.black },
   repartitionPct: { fontSize: 14, fontWeight: '700', color: Colors.black },
   progressBar: { height: 6, backgroundColor: Colors.gray[200], borderRadius: 3, marginBottom: 4 },
   progressFill: { height: 6, borderRadius: 3 },

mobile/app/(tabs)/profile.tsx

@@ -58,7 +58,7 @@ export default function ProfileScreen() {
 
       {/* Logout */}
       <TouchableOpacity style={styles.logoutBtn} onPress={handleLogout}>
-        <Ionicons name="log-out-outline" size={20} color="#DC143C" />
+        <Ionicons name="log-out-outline" size={20} color={Colors.error} />
         <Text style={styles.logoutText}>Se deconnecter</Text>
       </TouchableOpacity>
 
@@ -82,26 +82,26 @@ const styles = StyleSheet.create({
   content: { padding: 20, paddingBottom: 40 },
   profileHeader: { alignItems: 'center', marginBottom: 32, marginTop: 12 },
   avatar: {
-    width: 80, height: 80, borderRadius: 40, backgroundColor: Colors.primary,
+    width: 80, height: 80, borderRadius: 4, backgroundColor: Colors.primary,
     justifyContent: 'center', alignItems: 'center', marginBottom: 12,
   },
-  avatarText: { fontSize: 28, fontWeight: '800', color: Colors.black },
+  avatarText: { fontSize: 28, fontWeight: '800', color: Colors.white },
   name: { fontSize: 22, fontWeight: '700', color: Colors.black },
   email: { fontSize: 14, color: Colors.gray[500], marginTop: 4 },
-  roleBadge: { backgroundColor: `${Colors.secondary}20`, paddingHorizontal: 12, paddingVertical: 4, borderRadius: 8, marginTop: 8 },
+  roleBadge: { backgroundColor: `${Colors.primary}15`, paddingHorizontal: 12, paddingVertical: 4, borderRadius: 4, marginTop: 8 },
-  roleText: { fontSize: 12, fontWeight: '600', color: Colors.secondary, textTransform: 'capitalize' },
+  roleText: { fontSize: 12, fontWeight: '600', color: Colors.primary, textTransform: 'capitalize' },
   menuSection: { marginBottom: 24 },
-  sectionTitle: { fontSize: 13, fontWeight: '700', color: Colors.gray[400], textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 },
+  sectionTitle: { fontSize: 13, fontWeight: '700', color: Colors.gray[500], textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 },
-  menuCard: { backgroundColor: Colors.gray[50], borderRadius: 16, overflow: 'hidden', borderWidth: 1, borderColor: Colors.gray[100] },
+  menuCard: { backgroundColor: Colors.white, borderRadius: 4, overflow: 'hidden', borderWidth: 1, borderColor: Colors.gray[200] },
   menuItem: {
     flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 15, paddingHorizontal: 16,
-    borderBottomWidth: 1, borderBottomColor: Colors.gray[100],
+    borderBottomWidth: 1, borderBottomColor: Colors.gray[200],
   },
-  menuLabel: { flex: 1, fontSize: 15, color: Colors.gray[700] },
+  menuLabel: { flex: 1, fontSize: 15, color: Colors.black },
   logoutBtn: {
     flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8,
-    paddingVertical: 16, borderRadius: 14, backgroundColor: '#DC143C10',
+    paddingVertical: 16, borderRadius: 4, backgroundColor: Colors.errorBg,
   },
-  logoutText: { fontSize: 15, fontWeight: '600', color: '#DC143C' },
+  logoutText: { fontSize: 15, fontWeight: '600', color: Colors.error },
   version: { textAlign: 'center', fontSize: 12, color: Colors.gray[400], marginTop: 20 },
 });

mobile/app/(tabs)/urgence.tsx

@@ -68,7 +68,7 @@ export default function UrgenceScreen() {
     <ScrollView style={styles.container} contentContainerStyle={styles.content}>
       <View style={styles.header}>
         <View style={styles.iconBadge}>
-          <Ionicons name="heart" size={20} color="#DC2626" />
+          <Ionicons name="heart" size={20} color={Colors.error} />
         </View>
         <Text style={styles.headerTitle}>Vous n'êtes pas seul(e)</Text>
         <Text style={styles.headerSubtitle}>
@@ -79,7 +79,7 @@ export default function UrgenceScreen() {
       {CONTACTS.map((c) => (
         <TouchableOpacity key={c.numero} style={styles.card} onPress={() => appeler(c.numero, c.nom)}>
           <View style={styles.cardIcon}>
-            <Ionicons name="call" size={22} color="#DC2626" />
+            <Ionicons name="call" size={22} color={Colors.error} />
           </View>
           <View style={styles.cardContent}>
             <Text style={styles.cardName}>{c.nom}</Text>
@@ -92,7 +92,7 @@ export default function UrgenceScreen() {
       ))}
 
       <View style={styles.warning}>
-        <Ionicons name="warning" size={18} color="#DC2626" />
+        <Ionicons name="warning" size={18} color={Colors.error} />
         <Text style={styles.warningText}>
           En cas d'urgence vitale, appelez immédiatement le <Text style={styles.bold}>15</Text> (SAMU) ou le <Text style={styles.bold}>112</Text>.
         </Text>
@@ -105,21 +105,21 @@ const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: Colors.white },
   content: { padding: 16, paddingBottom: 32 },
   header: { marginBottom: 20, alignItems: 'flex-start' },
-  iconBadge: { width: 40, height: 40, borderRadius: 999, backgroundColor: '#FEE2E2', justifyContent: 'center', alignItems: 'center', marginBottom: 12 },
+  iconBadge: { width: 40, height: 40, borderRadius: 4, backgroundColor: Colors.errorBg, justifyContent: 'center', alignItems: 'center', marginBottom: 12 },
   headerTitle: { fontSize: 22, fontWeight: '800', color: Colors.black, marginBottom: 6 },
   headerSubtitle: { fontSize: 14, color: Colors.gray[500], lineHeight: 20 },
   card: {
     flexDirection: 'row', alignItems: 'center', gap: 14, padding: 16,
-    backgroundColor: Colors.gray[50], borderRadius: 16, marginBottom: 10,
+    backgroundColor: Colors.white, borderRadius: 4, marginBottom: 10,
-    borderWidth: 1, borderColor: Colors.gray[100],
+    borderWidth: 1, borderColor: Colors.gray[200],
   },
-  cardIcon: { width: 44, height: 44, borderRadius: 12, backgroundColor: '#FEE2E2', justifyContent: 'center', alignItems: 'center' },
+  cardIcon: { width: 44, height: 44, borderRadius: 4, backgroundColor: Colors.errorBg, justifyContent: 'center', alignItems: 'center' },
   cardContent: { flex: 1 },
   cardName: { fontSize: 14, fontWeight: '700', color: Colors.black, marginBottom: 2 },
-  cardNumber: { fontSize: 20, fontWeight: '800', color: '#DC2626', marginBottom: 6 },
+  cardNumber: { fontSize: 20, fontWeight: '800', color: Colors.error, marginBottom: 6 },
   cardDescription: { fontSize: 12, color: Colors.gray[500], lineHeight: 17 },
-  cardAvailability: { fontSize: 11, color: Colors.secondary, marginTop: 4, fontWeight: '600' },
+  cardAvailability: { fontSize: 11, color: Colors.primary, marginTop: 4, fontWeight: '600' },
-  warning: { marginTop: 8, padding: 14, borderRadius: 12, backgroundColor: '#FEF2F2', borderWidth: 1, borderColor: '#FECACA', flexDirection: 'row', gap: 10, alignItems: 'flex-start' },
+  warning: { marginTop: 8, padding: 14, borderRadius: 4, backgroundColor: Colors.errorBg, borderWidth: 1, borderColor: Colors.error, flexDirection: 'row', gap: 10, alignItems: 'flex-start' },
-  warningText: { flex: 1, fontSize: 13, color: '#B91C1C', lineHeight: 19 },
+  warningText: { flex: 1, fontSize: 13, color: Colors.error, lineHeight: 19 },
   bold: { fontWeight: '800' },
 });

mobile/app/_layout.tsx

@@ -33,7 +33,7 @@ function AuthGuard({ children }: { children: React.ReactNode }) {
   if (isLoading) {
     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}>
-        <ActivityIndicator size="large" color="#fce117" />
+        <ActivityIndicator size="large" color="#000091" />
       </View>
     );
   }

mobile/app/auth/forgot-password.tsx

@@ -30,7 +30,7 @@ export default function ForgotPasswordScreen() {
       <View style={styles.container}>
         <View style={styles.success}>
           <View style={styles.successIcon}>
-            <Ionicons name="mail-open" size={32} color={Colors.secondary} />
+            <Ionicons name="mail-open" size={32} color={Colors.primary} />
           </View>
           <Text style={styles.successTitle}>Demande enregistrée</Text>
           <Text style={styles.successText}>
@@ -95,17 +95,17 @@ const styles = StyleSheet.create({
   header: { alignItems: 'center', marginBottom: 32 },
   logo: { fontSize: 26, fontWeight: '800', color: Colors.black, textAlign: 'center' },
   subtitle: { fontSize: 14, color: Colors.gray[500], marginTop: 10, textAlign: 'center', lineHeight: 20 },
-  form: { backgroundColor: Colors.gray[50], borderRadius: 24, padding: 24 },
+  form: { backgroundColor: Colors.gray[50], borderRadius: 4, padding: 24, borderWidth: 1, borderColor: Colors.gray[200] },
   inputGroup: { marginBottom: 16 },
-  label: { fontSize: 14, fontWeight: '600', color: Colors.gray[700], marginBottom: 6 },
+  label: { fontSize: 14, fontWeight: '600', color: Colors.black, marginBottom: 6 },
-  input: { backgroundColor: Colors.white, borderWidth: 1, borderColor: Colors.gray[300], borderRadius: 12, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: Colors.black },
+  input: { backgroundColor: Colors.gray[100], borderTopLeftRadius: 4, borderTopRightRadius: 4, borderBottomWidth: 2, borderBottomColor: Colors.black, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: Colors.black },
-  errorText: { color: '#DC2626', marginTop: 6, fontSize: 12 },
+  errorText: { color: Colors.error, marginTop: 6, fontSize: 12 },
-  button: { backgroundColor: Colors.primary, borderRadius: 12, paddingVertical: 16, alignItems: 'center', marginTop: 8 },
+  button: { backgroundColor: Colors.primary, borderRadius: 4, paddingVertical: 16, alignItems: 'center', marginTop: 8 },
-  buttonText: { fontSize: 16, fontWeight: '700', color: Colors.black },
+  buttonText: { fontSize: 16, fontWeight: '700', color: Colors.white },
   footer: { alignItems: 'center', marginTop: 20 },
-  link: { color: Colors.secondary, fontSize: 14, fontWeight: '600' },
+  link: { color: Colors.primary, fontSize: 14, fontWeight: '600', textDecorationLine: 'underline' },
   success: { padding: 24, alignItems: 'center', flex: 1, justifyContent: 'center' },
-  successIcon: { width: 72, height: 72, borderRadius: 999, backgroundColor: `${Colors.secondary}15`, justifyContent: 'center', alignItems: 'center', marginBottom: 20 },
+  successIcon: { width: 72, height: 72, borderRadius: 999, backgroundColor: `${Colors.primary}15`, justifyContent: 'center', alignItems: 'center', marginBottom: 20 },
   successTitle: { fontSize: 22, fontWeight: '800', color: Colors.black, marginBottom: 12 },
   successText: { fontSize: 14, color: Colors.gray[600], textAlign: 'center', lineHeight: 20, marginBottom: 12 },
   bold: { fontWeight: '700', color: Colors.black },

mobile/app/auth/login.tsx

@@ -4,6 +4,7 @@ import { Link, useRouter } from 'expo-router';
 import { useAuthStore } from '@/lib/auth-store';
 import { getApiError } from '@/lib/api';
 import { Colors } from '@/lib/colors';
+import RepubliqueHeader from '@/components/RepubliqueHeader';
 
 export default function LoginScreen() {
   const router = useRouter();
@@ -30,6 +31,7 @@ export default function LoginScreen() {
 
   return (
     <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+      <RepubliqueHeader />
       <ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
         <View style={styles.header}>
           <Text style={styles.logo}>CESIZen</Text>
@@ -95,17 +97,18 @@ const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: Colors.white },
   scrollContent: { flexGrow: 1, justifyContent: 'center', padding: 24 },
   header: { alignItems: 'center', marginBottom: 40 },
-  logo: { fontSize: 36, fontWeight: '800', color: Colors.black },
+  logo: { fontSize: 36, fontWeight: '800', color: Colors.primary },
   subtitle: { fontSize: 16, color: Colors.gray[500], marginTop: 8 },
-  form: { backgroundColor: Colors.gray[50], borderRadius: 24, padding: 24 },
+  form: { backgroundColor: Colors.gray[50], borderRadius: 4, padding: 24, borderWidth: 1, borderColor: Colors.gray[200] },
   title: { fontSize: 24, fontWeight: '700', color: Colors.black, marginBottom: 24 },
   inputGroup: { marginBottom: 16 },
-  label: { fontSize: 14, fontWeight: '600', color: Colors.gray[700], marginBottom: 6 },
+  label: { fontSize: 14, fontWeight: '600', color: Colors.black, marginBottom: 6 },
   input: {
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.gray[100],
-    borderWidth: 1,
+    borderTopLeftRadius: 4,
-    borderColor: Colors.gray[300],
+    borderTopRightRadius: 4,
-    borderRadius: 12,
+    borderBottomWidth: 2,
+    borderBottomColor: Colors.black,
     paddingHorizontal: 16,
     paddingVertical: 14,
     fontSize: 16,
@@ -113,15 +116,15 @@ const styles = StyleSheet.create({
   },
   button: {
     backgroundColor: Colors.primary,
-    borderRadius: 12,
+    borderRadius: 4,
     paddingVertical: 16,
     alignItems: 'center',
     marginTop: 8,
   },
   buttonDisabled: { opacity: 0.6 },
-  buttonText: { fontSize: 16, fontWeight: '700', color: Colors.black },
+  buttonText: { fontSize: 16, fontWeight: '700', color: Colors.white },
   forgotLink: { alignItems: 'center', marginTop: 12 },
   footer: { flexDirection: 'row', justifyContent: 'center', marginTop: 16 },
   footerText: { color: Colors.gray[500], fontSize: 14 },
-  link: { color: Colors.secondary, fontSize: 14, fontWeight: '600' },
+  link: { color: Colors.primary, fontSize: 14, fontWeight: '600', textDecorationLine: 'underline' },
 });

mobile/app/auth/register.tsx

@@ -5,6 +5,7 @@ import { Ionicons } from '@expo/vector-icons';
 import { useAuthStore } from '@/lib/auth-store';
 import { getApiError } from '@/lib/api';
 import { Colors } from '@/lib/colors';
+import RepubliqueHeader from '@/components/RepubliqueHeader';
 
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
@@ -61,6 +62,7 @@ export default function RegisterScreen() {
 
   return (
     <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+      <RepubliqueHeader />
       <ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
         <View style={styles.header}>
           <Text style={styles.logo}>CESIZen</Text>
@@ -132,24 +134,24 @@ const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: Colors.white },
   scrollContent: { flexGrow: 1, justifyContent: 'center', padding: 24 },
   header: { alignItems: 'center', marginBottom: 32 },
-  logo: { fontSize: 36, fontWeight: '800', color: Colors.black },
+  logo: { fontSize: 36, fontWeight: '800', color: Colors.primary },
   subtitle: { fontSize: 16, color: Colors.gray[500], marginTop: 8 },
-  form: { backgroundColor: Colors.gray[50], borderRadius: 24, padding: 24 },
+  form: { backgroundColor: Colors.gray[50], borderRadius: 4, padding: 24, borderWidth: 1, borderColor: Colors.gray[200] },
   title: { fontSize: 24, fontWeight: '700', color: Colors.black, marginBottom: 24 },
   row: { flexDirection: 'row' },
   inputGroup: { marginBottom: 16 },
-  label: { fontSize: 14, fontWeight: '600', color: Colors.gray[700], marginBottom: 6 },
+  label: { fontSize: 14, fontWeight: '600', color: Colors.black, marginBottom: 6 },
-  input: { backgroundColor: Colors.white, borderWidth: 1, borderColor: Colors.gray[300], borderRadius: 12, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: Colors.black },
+  input: { backgroundColor: Colors.gray[100], borderTopLeftRadius: 4, borderTopRightRadius: 4, borderBottomWidth: 2, borderBottomColor: Colors.black, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: Colors.black },
-  errorText: { color: '#DC2626', marginTop: 4, fontSize: 12 },
+  errorText: { color: Colors.error, marginTop: 4, fontSize: 12 },
   consentRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 10, marginVertical: 12 },
-  checkbox: { width: 22, height: 22, borderRadius: 6, borderWidth: 2, borderColor: Colors.gray[300], backgroundColor: Colors.white, justifyContent: 'center', alignItems: 'center', marginTop: 1 },
+  checkbox: { width: 22, height: 22, borderRadius: 4, borderWidth: 2, borderColor: Colors.black, backgroundColor: Colors.white, justifyContent: 'center', alignItems: 'center', marginTop: 1 },
-  checkboxChecked: { backgroundColor: Colors.secondary, borderColor: Colors.secondary },
+  checkboxChecked: { backgroundColor: Colors.primary, borderColor: Colors.primary },
-  consentText: { flex: 1, fontSize: 13, color: Colors.gray[700], lineHeight: 18 },
+  consentText: { flex: 1, fontSize: 13, color: Colors.black, lineHeight: 18 },
-  consentLink: { color: Colors.secondary, fontWeight: '600' },
+  consentLink: { color: Colors.primary, fontWeight: '600', textDecorationLine: 'underline' },
-  button: { backgroundColor: Colors.primary, borderRadius: 12, paddingVertical: 16, alignItems: 'center', marginTop: 12 },
+  button: { backgroundColor: Colors.primary, borderRadius: 4, paddingVertical: 16, alignItems: 'center', marginTop: 12 },
   buttonDisabled: { opacity: 0.6 },
-  buttonText: { fontSize: 16, fontWeight: '700', color: Colors.black },
+  buttonText: { fontSize: 16, fontWeight: '700', color: Colors.white },
   footer: { flexDirection: 'row', justifyContent: 'center', marginTop: 20 },
   footerText: { color: Colors.gray[500], fontSize: 14 },
-  link: { color: Colors.secondary, fontSize: 14, fontWeight: '600' },
+  link: { color: Colors.primary, fontSize: 14, fontWeight: '600', textDecorationLine: 'underline' },
 });

mobile/babel.config.js

@@ -1,6 +1,8 @@
 module.exports = function (api) {
   api.cache(true);
   return {
+    // babel-preset-expo (SDK 54) ajoute automatiquement le plugin worklets
+    // de Reanimated 4 ; pas besoin de l'ajouter manuellement.
     presets: ['babel-preset-expo'],
   };
 };

mobile/components/EmotionPicker.tsx

@@ -87,13 +87,13 @@ export default function EmotionPicker({ value, onChange }: EmotionPickerProps) {
 const styles = StyleSheet.create({
   loading: { padding: 40, alignItems: 'center' },
   backBtn: { marginBottom: 12 },
-  backText: { fontSize: 14, color: Colors.gray[500] },
+  backText: { fontSize: 14, color: Colors.primary, textDecorationLine: 'underline' },
   subTitle: { fontSize: 14, color: Colors.gray[600], marginBottom: 12 },
   grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 10 },
   emotionCard: {
     width: '30%',
-    backgroundColor: Colors.gray[50],
+    backgroundColor: Colors.white,
-    borderRadius: 16,
+    borderRadius: 4,
     padding: 14,
     alignItems: 'center',
     gap: 6,
@@ -101,6 +101,6 @@ const styles = StyleSheet.create({
     borderColor: Colors.gray[200],
   },
   emotionEmoji: { fontSize: 30 },
-  emotionName: { fontSize: 12, fontWeight: '600', color: Colors.gray[700], textAlign: 'center' },
+  emotionName: { fontSize: 12, fontWeight: '600', color: Colors.black, textAlign: 'center' },
   arrow: { fontSize: 10, color: Colors.gray[400] },
 });

mobile/components/RepubliqueHeader.tsx

@@ -0,0 +1,52 @@
+import { View, Text, StyleSheet } from 'react-native';
+import { Colors } from '@/lib/colors';
+
+interface RepubliqueHeaderProps {
+  /** Affiche le nom du service (CESIZen) à côté du bloc Marianne. */
+  showService?: boolean;
+}
+
+/**
+ * En-tête institutionnel reprenant l'identité visuelle de l'État (DSFR) :
+ * bloc « RÉPUBLIQUE / FRANÇAISE » accompagné du nom du service.
+ */
+export default function RepubliqueHeader({ showService = true }: RepubliqueHeaderProps) {
+  return (
+    <View style={styles.container}>
+      <View style={styles.marianneBlock}>
+        <Text style={styles.republique}>RÉPUBLIQUE</Text>
+        <Text style={styles.francaise}>FRANÇAISE</Text>
+        <Text style={styles.devise}>Liberté{'\n'}Égalité{'\n'}Fraternité</Text>
+      </View>
+      {showService && (
+        <View style={styles.serviceBlock}>
+          <Text style={styles.serviceName}>CESIZen</Text>
+          <Text style={styles.serviceTagline}>Santé mentale</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: Colors.white,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.gray[200],
+  },
+  marianneBlock: {
+    paddingRight: 16,
+    borderRightWidth: 1,
+    borderRightColor: Colors.gray[200],
+  },
+  republique: { fontSize: 12, fontWeight: '700', color: Colors.black, letterSpacing: 0.5, lineHeight: 14 },
+  francaise: { fontSize: 12, fontWeight: '700', color: Colors.black, letterSpacing: 0.5, lineHeight: 14 },
+  devise: { fontSize: 8, color: Colors.gray[500], marginTop: 4, lineHeight: 10, fontStyle: 'italic' },
+  serviceBlock: { paddingLeft: 16 },
+  serviceName: { fontSize: 18, fontWeight: '800', color: Colors.primary },
+  serviceTagline: { fontSize: 11, color: Colors.gray[500], marginTop: 1 },
+});

mobile/lib/auth-store.ts

@@ -59,11 +59,11 @@ export const useAuthStore = create<AuthState>()((set) => ({
   },
 
   logout: async () => {
-    try {
+    // Déconnexion locale d'abord (instantanée et fiable, même hors-ligne).
-      await api.post('/auth/logout');
-    } catch {}
     await SecureStore.deleteItemAsync('cesizen_token');
     set({ user: null, token: null, isAuthenticated: false });
+    // Notifie le serveur en arrière-plan (best-effort, sans bloquer l'UI).
+    api.post('/auth/logout').catch(() => {});
   },
 
   fetchUser: async () => {

mobile/lib/colors.ts

@@ -1,22 +1,38 @@
+// Palette inspirée du Système de Design de l'État (DSFR / gouv.fr).
+// Le DSFR est un framework web (HTML/CSS) ; ici on en applique uniquement
+// l'identité visuelle via les couleurs des StyleSheet React Native.
 export const Colors = {
-  primary: '#fce117',
+  // Bleu France — couleur primaire / actions
-  primaryDark: '#e5cc15',
+  primary: '#000091',
-  secondary: '#06c656',
+  primaryDark: '#1212FF', // bleu survol / accent
-  secondaryDark: '#05a348',
+  blueFranceSun: '#6A6AF4',
-  black: '#000000',
+  // Rouge Marianne — accent institutionnel / alertes
+  secondary: '#000091', // conservé en bleu pour les accents secondaires institutionnels
+  secondaryDark: '#1212FF',
+  rougeMarianne: '#E1000F',
+  black: '#161616', // texte principal DSFR
   white: '#FFFFFF',
+  // Échelle de gris DSFR (du plus clair au plus foncé)
   gray: {
-    50: '#f9fafb',
+    50: '#F6F6F6', // fond alternatif
-    100: '#f3f4f6',
+    100: '#EEEEEE', // gris contrasté
-    200: '#e5e7eb',
+    200: '#DDDDDD', // séparateurs / bordures
-    300: '#d1d5db',
+    300: '#CECECE',
-    400: '#9ca3af',
+    400: '#929292', // texte désactivé
-    500: '#6b7280',
+    500: '#666666', // texte secondaire / mention
-    600: '#4b5563',
+    600: '#3A3A3A',
-    700: '#374151',
+    700: '#2A2A2A',
-    800: '#1f2937',
+    800: '#1F1F1F',
-    900: '#111827',
+    900: '#161616',
   },
+  // États DSFR
+  success: '#18753C',
+  successBg: '#B8FEC9',
+  error: '#CE0500',
+  errorBg: '#FFE9E9',
+  info: '#0063CB',
+  warning: '#B34000',
+  // Couleurs par émotion — issues du référentiel, conservées telles quelles
   emotions: {
     joie: '#FFD700',
     colere: '#DC143C',

mobile/package.json

@@ -16,32 +16,34 @@
     ]
   },
   "dependencies": {
-    "@expo/vector-icons": "^14.0.0",
+    "@expo/vector-icons": "^15.0.3",
     "@react-navigation/bottom-tabs": "^7.3.0",
     "@tanstack/react-query": "^5.0.0",
     "axios": "^1.7.0",
-    "expo": "~53.0.0",
+    "expo": "^54.0.35",
-    "expo-constants": "~17.1.8",
+    "expo-constants": "~18.0.13",
-    "expo-font": "~13.3.0",
+    "expo-font": "~14.0.12",
-    "expo-linking": "~7.1.7",
+    "expo-linking": "~8.0.12",
-    "expo-router": "~5.1.11",
+    "expo-router": "~6.0.24",
-    "expo-secure-store": "~14.2.0",
+    "expo-secure-store": "~15.0.8",
-    "expo-status-bar": "~2.2.0",
+    "expo-status-bar": "~3.0.9",
-    "react": "19.0.0",
+    "react": "19.1.0",
-    "react-native": "0.79.6",
+    "react-native": "0.81.5",
-    "react-native-gesture-handler": "~2.24.0",
+    "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~3.17.4",
+    "react-native-reanimated": "~4.1.1",
-    "react-native-safe-area-context": "5.4.0",
+    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.11.1",
+    "react-native-screens": "~4.16.0",
+    "react-native-worklets": "0.5.1",
     "zustand": "^5.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.0",
-    "@types/jest": "^30.0.0",
+    "@types/jest": "29.5.14",
-    "@types/react": "~19.0.0",
+    "@types/react": "~19.1.8",
+    "babel-preset-expo": "~54.0.11",
     "jest": "^29.7.0",
-    "jest-expo": "~53.0.0",
+    "jest-expo": "~54.0.17",
-    "typescript": "~5.8.0"
+    "typescript": "~5.9.2"
   },
   "private": true
 }

mobile/tsconfig.json

@@ -3,8 +3,13 @@
   "compilerOptions": {
     "strict": true,
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
 }