fix(dsfr): remplace l'usage détourné de fr-card par un panneau .app-panel

.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>

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>

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

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) => (

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

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

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,

mobile/tsconfig.json

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