Checkpoint: Vignettes Veille : Niveau en violet, Territoire en teal, Date en orange. Vignettes AAP : Région en violet, Département en teal, Date de publication en orange. Cohérence visuelle avec la palette de la boîte de dialogue.

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>

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.territoire && (
-              {item.niveau && <span className="inline-flex items-center gap-1 text-xs text-muted-foreground"><Layers size={10} />{item.niveau}</span>}
+                <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>

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)