diff --git a/client/src/pages/CustomerOrders.tsx b/client/src/pages/CustomerOrders.tsx
index bdd9512..1f3e141 100644
--- a/client/src/pages/CustomerOrders.tsx
+++ b/client/src/pages/CustomerOrders.tsx
@@ -890,10 +890,11 @@ export default function CustomerOrders() {
                               variant="outline"
                               size="sm"
                               onClick={() => handleNotificationToggle(order)}
-                              className={order.customerNotified ? "bg-green-100" : ""}
+                              className={order.customerNotified ? "bg-green-600 hover:bg-green-700 text-white border-green-600" : "hover:bg-gray-50"}
+                              title={order.customerNotified ? "Client contacté ✓" : "Cliquer pour marquer comme contacté"}
                             >
                               {order.customerNotified ? (
-                                <PhoneCall className="h-4 w-4" />
+                                <PhoneCall className="h-4 w-4 text-white" />
                               ) : (
                                 <Phone className="h-4 w-4" />
                               )}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 19d297c..f2e161f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -18,6 +18,7 @@ export default {
     // Classes pour alertes appels clients (production-safe)
     'bg-orange-50', 'border-orange-200', 'text-orange-700', 'bg-orange-600', 'hover:bg-orange-700',
     'bg-green-600', 'hover:bg-green-700', 'bg-blue-600', 'hover:bg-blue-700',
+    'border-green-600', 'text-white', 'hover:bg-gray-50',
     'sticky', 'top-0', 'z-50', 'cursor-pointer',
     'max-w-2xl', 'w-full', 'mx-4', 'max-h-[80vh]', 'overflow-y-auto'
   ],