From ed8af28fcee6b8cba9376a108398f002e8a14551 Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Mon, 16 Mar 2026 15:51:59 -0400
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Vignettes=20Veille=20:=20Niveau?=
 =?UTF-8?q?=20en=20violet,=20Territoire=20en=20teal,=20Date=20en=20orange.?=
 =?UTF-8?q?=20Vignettes=20AAP=20:=20R=C3=A9gion=20en=20violet,=20D=C3=A9pa?=
 =?UTF-8?q?rtement=20en=20teal,=20Date=20de=20publication=20en=20orange.?=
 =?UTF-8?q?=20Coh=C3=A9rence=20visuelle=20avec=20la=20palette=20de=20la=20?=
 =?UTF-8?q?bo=C3=AEte=20de=20dialogue.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/AAPDashboard.tsx    | 10 +++++-----
 client/src/pages/VeilleDashboard.tsx | 14 +++++++++++---
 todo.md                              |  2 ++
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/AAPDashboard.tsx b/client/src/pages/AAPDashboard.tsx
index 61c4a11..10202ad 100644
--- a/client/src/pages/AAPDashboard.tsx
+++ b/client/src/pages/AAPDashboard.tsx
@@ -283,21 +283,21 @@ function AAPGridView({ items }: { items: AAPItem[] }) {
             <h3 className="font-semibold text-sm text-foreground leading-snug line-clamp-3 mt-2">{item.titre}</h3>
           </CardHeader>
           <CardContent className="px-4 pb-4 space-y-2">
-            <div className="flex flex-wrap gap-2">
+            <div className="flex flex-wrap gap-1.5">
               {item.region && (
-                <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-violet-50 text-violet-700 border border-violet-200">
                   <MapPin size={10} />{item.region}
                 </span>
               )}
               {item.departement && (
-                <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-teal-50 text-teal-700 border border-teal-200">
                   <MapPin size={10} />{item.departement}
                 </span>
               )}
             </div>
-            <div className="flex items-center justify-between pt-1 border-t border-border/50">
+            <div className="flex items-center justify-between pt-1 border-t border-border/50 flex-wrap gap-1">
               {item.datePublication && (
-                <span className="inline-flex items-center gap-1 text-xs text-muted-foreground/70">
+                <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-orange-50 text-orange-700 border border-orange-200">
                   <Calendar size={10} />
                   {formatDate(item.datePublication)}
                 </span>
diff --git a/client/src/pages/VeilleDashboard.tsx b/client/src/pages/VeilleDashboard.tsx
index c9f4d80..24535a4 100644
--- a/client/src/pages/VeilleDashboard.tsx
+++ b/client/src/pages/VeilleDashboard.tsx
@@ -452,11 +452,19 @@ function VeilleGridView({ items, onDetail }: { items: VeilleItem[]; onDetail: (i
             {item.resume && <p className="text-xs text-muted-foreground line-clamp-3 leading-relaxed">{item.resume}</p>}
             <div className="flex flex-wrap gap-1.5 pt-1">
               {item.categorie && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><Tag size={10} />{item.categorie}</span>}
-              {item.territoire && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><MapPin size={10} />{item.territoire}</span>}
-              {item.niveau && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><Layers size={10} />{item.niveau}</span>}
+              {item.territoire && (
+                <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-teal-50 text-teal-700 border border-teal-200">
+                  <MapPin size={10} />{item.territoire}
+                </span>
+              )}
+              {item.niveau && (
+                <span className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-violet-50 text-violet-700 border border-violet-200">
+                  <Layers size={10} />{item.niveau}
+                </span>
+              )}
             </div>
             {item.datePublication && (
-              <div className="flex items-center gap-1 text-xs text-muted-foreground/70 pt-1 border-t border-border/50">
+              <div className="flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-orange-50 text-orange-700 border border-orange-200 mt-1 w-fit">
                 <Calendar size={10} />
                 {formatDate(item.datePublication)}
               </div>
diff --git a/todo.md b/todo.md
index ac6458a..71aa29d 100644
--- a/todo.md
+++ b/todo.md
@@ -41,3 +41,5 @@
 - [x] Veille : bouton "Détail" sur chaque ligne ouvrant une boîte de dialogue avec toutes les infos complètes
 - [x] Boîte de dialogue Veille : couleurs douces distinctes pour les vignettes Niveau, Territoire et Source
 - [x] Vue liste Veille : coloriser les boutons d'action (Détail et Lien externe)
+- [x] Vignettes AAP : coloriser les étiquettes Région (violet) et Date (orange)
+- [x] Vignettes Veille : coloriser les étiquettes Niveau (violet), Territoire (teal) et Date (orange)