From 6921022e87ad923c2cde7c834b1c1933735b85fa Mon Sep 17 00:00:00 2001
From: Azmog <80716388+AzmogEx@users.noreply.github.com>
Date: Fri, 19 Jun 2026 00:02:33 +0200
Subject: [PATCH] =?UTF-8?q?fix(dsfr):=20remplace=20l'usage=20d=C3=A9tourn?=
 =?UTF-8?q?=C3=A9=20de=20fr-card=20par=20un=20panneau=20.app-panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.fr-card (flex + height:100% + bordure ::before) débordait quand utilisé comme
conteneur générique (wizard de saisie, journal, rapports, profil, timeline) et
chevauchait le footer. Remplacé par .app-panel (panneau neutre, variables DSFR).
Les vraies cartes structurées (fr-card__body) sont conservées.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/app/(protected)/journal/nouvelle-saisie/page.tsx | 2 +-
 frontend/src/app/(protected)/journal/page.tsx            | 2 +-
 frontend/src/app/(protected)/journal/rapports/page.tsx   | 8 ++++----
 frontend/src/app/(protected)/profil/page.tsx             | 6 +++---
 frontend/src/app/globals.css                             | 8 ++++++++
 frontend/src/components/features/TrackerTimeline.tsx     | 2 +-
 frontend/src/components/ui/Card.tsx                      | 2 +-
 mobile/tsconfig.json                                     | 9 +++++++--
 8 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/(protected)/journal/nouvelle-saisie/page.tsx b/frontend/src/app/(protected)/journal/nouvelle-saisie/page.tsx
index 3b93aef..42e8d7b 100644
--- a/frontend/src/app/(protected)/journal/nouvelle-saisie/page.tsx
+++ b/frontend/src/app/(protected)/journal/nouvelle-saisie/page.tsx
@@ -86,7 +86,7 @@ export default function NouvelleSaisiePage() {
           </div>
 
           {/* Étape actuelle */}
-          <div className="fr-card fr-p-3w fr-mb-3w">
+          <div className="app-panel fr-p-3w fr-mb-3w">
             <p className="fr-text--sm fr-text-mention--grey fr-mb-3w">
               {STEPS[step - 1].description}
             </p>
diff --git a/frontend/src/app/(protected)/journal/page.tsx b/frontend/src/app/(protected)/journal/page.tsx
index 1e84b7c..1280e05 100644
--- a/frontend/src/app/(protected)/journal/page.tsx
+++ b/frontend/src/app/(protected)/journal/page.tsx
@@ -110,7 +110,7 @@ export default function JournalPage() {
 
       {/* Filtres */}
       {showFilters && (
-        <div className="fr-card fr-p-3w fr-mb-4w">
+        <div className="app-panel fr-p-3w fr-mb-4w">
           <div className="fr-grid-row fr-grid-row--gutters">
             <div className="fr-col-12 fr-col-md-4">
               <div className="fr-input-group">
diff --git a/frontend/src/app/(protected)/journal/rapports/page.tsx b/frontend/src/app/(protected)/journal/rapports/page.tsx
index 45ae6fe..e2d5346 100644
--- a/frontend/src/app/(protected)/journal/rapports/page.tsx
+++ b/frontend/src/app/(protected)/journal/rapports/page.tsx
@@ -128,26 +128,26 @@ export default function RapportsPage() {
           </div>
 
           {/* Répartition (Camembert) */}
-          <div className="fr-card fr-p-3w fr-mb-3w">
+          <div className="app-panel fr-p-3w fr-mb-3w">
             <h2 className="fr-h5">Répartition des émotions</h2>
             <EmotionChart data={rapport} type="repartition" />
           </div>
 
           {/* Évolution (Lignes) */}
-          <div className="fr-card fr-p-3w fr-mb-3w">
+          <div className="app-panel fr-p-3w fr-mb-3w">
             <h2 className="fr-h5">Évolution dans le temps</h2>
             <EmotionChart data={rapport} type="evolution" />
           </div>
 
           {/* Intensité moyenne (Barres) */}
-          <div className="fr-card fr-p-3w fr-mb-3w">
+          <div className="app-panel fr-p-3w fr-mb-3w">
             <h2 className="fr-h5">Intensité moyenne par période</h2>
             <EmotionChart data={rapport} type="intensite" />
           </div>
 
           {/* Détail répartition */}
           {rapport.repartition.length > 0 && (
-            <div className="fr-card fr-p-3w">
+            <div className="app-panel fr-p-3w">
               <h2 className="fr-h5">Détail par émotion</h2>
               <ul className="fr-raw-list">
                 {rapport.repartition.map((item) => (
diff --git a/frontend/src/app/(protected)/profil/page.tsx b/frontend/src/app/(protected)/profil/page.tsx
index be9fde3..91ad82b 100644
--- a/frontend/src/app/(protected)/profil/page.tsx
+++ b/frontend/src/app/(protected)/profil/page.tsx
@@ -79,7 +79,7 @@ export default function ProfilPage() {
           <h1>Mon profil</h1>
 
           {/* Infos du profil */}
-          <div className="fr-card fr-p-3w fr-mb-3w">
+          <div className="app-panel fr-p-3w fr-mb-3w">
             <h2 className="fr-h4 fr-mb-1v">
               {user?.prenom} {user?.nom}
             </h2>
@@ -171,7 +171,7 @@ export default function ProfilPage() {
           </div>
 
           {/* Changer mot de passe */}
-          <div className="fr-card fr-p-3w fr-mb-3w">
+          <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
@@ -252,7 +252,7 @@ export default function ProfilPage() {
           </div>
 
           {/* Zone dangereuse — RGPD */}
-          <div className="fr-card fr-p-3w">
+          <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
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 6047ae7..328504f 100644
--- a/frontend/src/app/globals.css
+++ b/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);
diff --git a/frontend/src/components/features/TrackerTimeline.tsx b/frontend/src/components/features/TrackerTimeline.tsx
index 0776733..c5e603a 100644
--- a/frontend/src/components/features/TrackerTimeline.tsx
+++ b/frontend/src/components/features/TrackerTimeline.tsx
@@ -44,7 +44,7 @@ export default function TrackerTimeline({ saisies, onEdit, onDelete }: TrackerTi
           <div className="fr-grid-row fr-grid-row--gutters">
             {items.map((saisie) => (
               <div key={saisie.id} className="fr-col-12">
-                <div className="fr-card fr-p-2w">
+                <div className="app-panel fr-p-2w">
                   <div className="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
                     {/* Icône émotion */}
                     <div className="fr-col-auto">
diff --git a/frontend/src/components/ui/Card.tsx b/frontend/src/components/ui/Card.tsx
index c0411fe..72cf392 100644
--- a/frontend/src/components/ui/Card.tsx
+++ b/frontend/src/components/ui/Card.tsx
@@ -12,7 +12,7 @@ interface CardProps {
 // éditoriale DSFR, afin de garder un conteneur générique réutilisable).
 export default function Card({ children, className = "", hover = false }: CardProps) {
   const classes = [
-    "fr-card",
+    "app-panel",
     "fr-p-3w",
     hover ? "fr-enlarge-link" : "",
     className,
diff --git a/mobile/tsconfig.json b/mobile/tsconfig.json
index ce27fee..fc3e146 100644
--- a/mobile/tsconfig.json
+++ b/mobile/tsconfig.json
@@ -3,8 +3,13 @@
   "compilerOptions": {
     "strict": true,
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
 }