03.01.26

src/App.jsx

@@ -180,25 +180,20 @@ const latestValue  = data.length > 4 ? data[4].value : null;
 const prevValue   = data.length > 3 ? data[3].value : null;
 const latestDate  = data.length > 4 ? data[4].date : null;
 
-let trend = null;
-let trendColor = null;
+let trendValue = null;
 
 if (latestValue && prevValue) {
-  const diff = ((latestValue - prevValue) / prevValue) * 100;
-
-  trend = `${diff >= 0 ? "+" : ""}${diff.toFixed(2)}%`;
-  trendColor = diff >= 0 ? "#16A34A" : "#DC2626"; // vert / rouge
+  trendValue = ((latestValue - prevValue) / prevValue) * 100;
 }
 
+
 const news = [
   {
     type: "Forex",
     label: `EUR/USD: ${latestValue?.toFixed(4)}`,
-    trend,
-    color: "#1E3A8A",
     date: latestDate,
     icon: TrendingUp,
-    trendColor,
+    trendValue, // <- même logique que KPIs
   },
   // {
   //   type: "Logistic",
@@ -550,12 +545,19 @@ export default function App() {
                       </div>
                       <div className="ml-6">
                         <span style={{ color: n.color }}>{n.label}</span>
-                        {n.trend && (
+                        {n.trendValue !== null && (
                           <span
-                            className="ml-2 font-semibold"
-                            style={{ color: n.trendColor }}
+                            className={`
+                              ml-2 px-2 py-0.5 text-xs font-semibold rounded-md border
+                              ${
+                                n.trendValue >= 0
+                                  ? "bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800"
+                                  : "bg-red-50 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800"
+                              }
+                            `}
                           >
-                            {n.trend}
+                            {n.trendValue >= 0 ? "+" : ""}
+                            {n.trendValue.toFixed(2)}%
                           </span>
                         )}
                       </div>