cleaned trust center and some widgets

src/components/ui/Card.tsx

@@ -12,7 +12,7 @@ import { NEUMORPHISM } from '@/styles/Neumorphism';
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   // 'raised'  : relief neumorphique complet — dashboards, widgets isolés, peu nombreux à l'écran.
   // 'flat'    : bordure fine, sans ombre — listes/tables denses (perf + lisibilité).
-  variant?: 'raised' | 'flat';
+  variant?: 'raised' | 'flat'|'digged';
 }
 
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(
@@ -25,6 +25,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
         "bg-[#e8e8e8] dark:bg-[#1e293b]",
         // Relief neumorphique (par défaut)
         variant === 'raised' && [NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow],
+        variant === 'digged' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight],
         // Variante plate : pas d'ombre, juste une bordure discrète — pour tables/listes denses
         variant === 'flat' && "border border-black/5 dark:border-white/10",
         className

src/components/ui/PageHeader.tsx

@@ -10,7 +10,7 @@ interface PageHeaderProps {
 
 export const PageHeader: React.FC<PageHeaderProps> = ({ title, description, children }) => {
   return (
-    <Card className="border-slate-200 shadow-sm">
+    <Card>
       <CardContent className="p-6 sm:px-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
         <div>
           <h1 className="text-2xl font-bold text-slate-900 tracking-tight">

src/components/ui/ServiceObject.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ManagedContract } from '@/types/ManagedContract';
 import { StatusBadge } from '@/components/ui/StatusBadge';
+import { Card } from './Card';
 
 interface ServiceObjectProps {
   contract: ManagedContract;
@@ -8,16 +9,15 @@ interface ServiceObjectProps {
 
 export const ServiceObject: React.FC<ServiceObjectProps> = ({ contract }) => {
   return (
-    <div className="p-4 bg-slate-50 rounded-lg border border-slate-100 flex justify-between items-center">
-      <div>
+    <Card variant= 'digged' className="p-4 rounded-lg border border-slate-100 flex flex-col">
+      <div className='flex flex-row justify-between'>
         <h3 className="text-sm font-medium text-slate-900">{contract.service_name}</h3>
-        {contract.description && (
-          <p className="text-xs text-slate-500 mt-1">{contract.description}</p>
-        )}
+        {/* Fonctionne instantanément avec 'Actif', 'En déploiement', 'Suspendu' */}
+        <StatusBadge status={contract.status} />
       </div>
-      
-      {/* Fonctionne instantanément avec 'Actif', 'En déploiement', 'Suspendu' */}
-      <StatusBadge status={contract.status} />
-    </div>
+      {contract.description && (
+        <p className="text-xs text-slate-500 mt-1">{contract.description}</p>
+      )}
+    </Card>
   );
 };

src/components/ui/StatusBadge.tsx

@@ -55,7 +55,7 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className }) =
   return (
     <div
       className={cn(
-        "px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center border transition-colors",
+        "px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center border transition-colors min-w-fit max-h-fit",
         config.bg,
         className
       )}