diff --git a/src/components/charts/CompletionTrendChart.tsx b/src/components/charts/CompletionTrendChart.tsx
index f829f6f..8e9b6e6 100644
--- a/src/components/charts/CompletionTrendChart.tsx
+++ b/src/components/charts/CompletionTrendChart.tsx
@@ -49,7 +49,7 @@ export function CompletionTrendChart({ data, title = "Tendance de Completion" }:
   };
 
   return (
-    <Card className="p-6">
+    <Card variant="glass" className="p-6">
       <h3 className="text-lg font-semibold mb-4">{title}</h3>
       <div className="h-64">
         <ResponsiveContainer width="100%" height="100%">
diff --git a/src/components/charts/PriorityDistributionChart.tsx b/src/components/charts/PriorityDistributionChart.tsx
index e070eb2..7b66e2d 100644
--- a/src/components/charts/PriorityDistributionChart.tsx
+++ b/src/components/charts/PriorityDistributionChart.tsx
@@ -61,7 +61,7 @@ export function PriorityDistributionChart({ data, title = "Distribution des Prio
   };
 
   return (
-    <Card className="p-6">
+    <Card variant="glass" className="p-6">
       <h3 className="text-lg font-semibold mb-4">{title}</h3>
       <div className="h-64">
         <ResponsiveContainer width="100%" height="100%">
diff --git a/src/components/charts/VelocityChart.tsx b/src/components/charts/VelocityChart.tsx
index 41913b1..7d146b9 100644
--- a/src/components/charts/VelocityChart.tsx
+++ b/src/components/charts/VelocityChart.tsx
@@ -38,7 +38,7 @@ export function VelocityChart({ data, title = "Vélocité Hebdomadaire" }: Veloc
   };
 
   return (
-    <Card className="p-6">
+    <Card variant="glass" className="p-6">
       <h3 className="text-lg font-semibold mb-4">{title}</h3>
       <div className="h-64">
         <ResponsiveContainer width="100%" height="100%">
diff --git a/src/components/charts/WeeklyStatsCard.tsx b/src/components/charts/WeeklyStatsCard.tsx
index fcb0f65..a84f081 100644
--- a/src/components/charts/WeeklyStatsCard.tsx
+++ b/src/components/charts/WeeklyStatsCard.tsx
@@ -23,7 +23,7 @@ export function WeeklyStatsCard({ stats, title = "Performance Hebdomadaire" }: W
     : 'bg-[var(--destructive)]/10 border border-[var(--destructive)]/20';
 
   return (
-    <Card className="p-6">
+    <Card variant="glass" className="p-6">
       <h3 className="text-lg font-semibold mb-6">{title}</h3>
       
       <div className="grid grid-cols-2 gap-6">
diff --git a/src/components/dashboard/DashboardStats.tsx b/src/components/dashboard/DashboardStats.tsx
index b48d202..db3b16a 100644
--- a/src/components/dashboard/DashboardStats.tsx
+++ b/src/components/dashboard/DashboardStats.tsx
@@ -258,7 +258,7 @@ export function DashboardStats({ selectedSources = [], hiddenSources = [] }: Das
       ))}
       
       {/* Cartes de pourcentage */}
-      <Card className="p-6 hover:shadow-lg transition-shadow md:col-span-1 lg:col-span-1">
+      <Card variant="glass" className="p-6 hover:shadow-lg transition-shadow md:col-span-1 lg:col-span-1">
         <h3 className="text-lg font-semibold mb-4">Taux de Completion</h3>
         <div className="space-y-4">
           <ProgressBar
@@ -276,7 +276,7 @@ export function DashboardStats({ selectedSources = [], hiddenSources = [] }: Das
       </Card>
       
       {/* Distribution détaillée par statut */}
-      <Card className="p-6 hover:shadow-lg transition-shadow md:col-span-1 lg:col-span-1">
+      <Card variant="glass" className="p-6 hover:shadow-lg transition-shadow md:col-span-1 lg:col-span-1">
         <h3 className="text-lg font-semibold mb-4">Distribution par Statut</h3>
         
         {/* Graphique en camembert avec Recharts */}
@@ -309,7 +309,7 @@ export function DashboardStats({ selectedSources = [], hiddenSources = [] }: Das
       </Card>
       
       {/* Insights rapides */}
-      <Card className="p-6 hover:shadow-lg transition-shadow md:col-span-1 lg:col-span-1">
+      <Card variant="glass" className="p-6 hover:shadow-lg transition-shadow md:col-span-1 lg:col-span-1">
         <h3 className="text-lg font-semibold mb-4">Aperçu Rapide</h3>
         <div className="space-y-3">
           <div className="flex items-center gap-2">
@@ -341,7 +341,7 @@ export function DashboardStats({ selectedSources = [], hiddenSources = [] }: Das
       </Card>
       
       {/* Distribution par sources */}
-      <Card className="p-6 hover:shadow-lg transition-shadow md:col-span-1 lg:col-span-1">
+      <Card variant="glass" className="p-6 hover:shadow-lg transition-shadow md:col-span-1 lg:col-span-1">
         <h3 className="text-lg font-semibold mb-4">Distribution par Sources</h3>
         
         {/* Graphique en camembert avec Recharts */}
diff --git a/src/components/dashboard/ProductivityAnalytics.tsx b/src/components/dashboard/ProductivityAnalytics.tsx
index dc8d97e..e2c9db2 100644
--- a/src/components/dashboard/ProductivityAnalytics.tsx
+++ b/src/components/dashboard/ProductivityAnalytics.tsx
@@ -110,7 +110,7 @@ export function ProductivityAnalytics({ metrics, deadlineMetrics, tagMetrics, se
         <PriorityDistributionChart data={filteredMetrics.priorityDistribution} />
         
         {/* Status Flow - Graphique simple en barres horizontales */}
-        <Card className="p-6">
+        <Card variant="glass" className="p-6">
           <h3 className="text-lg font-semibold mb-4">Répartition par Statut</h3>
           <div className="space-y-3">
             {filteredMetrics.statusFlow.map((item, index) => (
@@ -140,7 +140,7 @@ export function ProductivityAnalytics({ metrics, deadlineMetrics, tagMetrics, se
       <TagDistributionChart metrics={tagMetrics} />
 
       {/* Insights automatiques */}
-      <Card className="p-6">
+      <Card variant="glass" className="p-6">
         <h3 className="text-lg font-semibold mb-4">💡 Insights</h3>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <MetricCard
diff --git a/src/components/dashboard/RecentTasks.tsx b/src/components/dashboard/RecentTasks.tsx
index a63a334..f8103f5 100644
--- a/src/components/dashboard/RecentTasks.tsx
+++ b/src/components/dashboard/RecentTasks.tsx
@@ -37,7 +37,7 @@ export function RecentTasks({ tasks, selectedSources = [], hiddenSources = [] }:
 
 
   return (
-    <Card className="p-6 mt-8">
+    <Card variant="glass" className="p-6 mt-8">
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-lg font-semibold">Tâches Récentes</h3>
         <Link href="/kanban">
diff --git a/src/components/dashboard/TagDistributionChart.tsx b/src/components/dashboard/TagDistributionChart.tsx
index f31440a..742fac4 100644
--- a/src/components/dashboard/TagDistributionChart.tsx
+++ b/src/components/dashboard/TagDistributionChart.tsx
@@ -85,7 +85,7 @@ export function TagDistributionChart({ metrics, className }: TagDistributionChar
     <div className={className}>
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Distribution par tags - Camembert */}
-        <Card className="p-6">
+        <Card variant="glass" className="p-6">
           <h3 className="text-lg font-semibold mb-4">🏷️ Distribution par Tags</h3>
           
           <div className="h-64">
@@ -118,7 +118,7 @@ export function TagDistributionChart({ metrics, className }: TagDistributionChar
         </Card>
 
         {/* Top tags - Barres */}
-        <Card className="p-6">
+        <Card variant="glass" className="p-6">
           <h3 className="text-lg font-semibold mb-4">📊 Top Tags par Usage</h3>
           
           <div className="h-64">
@@ -149,7 +149,7 @@ export function TagDistributionChart({ metrics, className }: TagDistributionChar
       </div>
 
       {/* Statistiques des tags */}
-      <Card className="p-6 mt-6">
+      <Card variant="glass" className="p-6 mt-6">
         <h3 className="text-lg font-semibold mb-4">📈 Statistiques des Tags</h3>
         
         <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
diff --git a/src/components/dashboard/charts/MetricsDistributionCharts.tsx b/src/components/dashboard/charts/MetricsDistributionCharts.tsx
index fa52318..5deda9a 100644
--- a/src/components/dashboard/charts/MetricsDistributionCharts.tsx
+++ b/src/components/dashboard/charts/MetricsDistributionCharts.tsx
@@ -13,7 +13,7 @@ interface MetricsDistributionChartsProps {
 export function MetricsDistributionCharts({ metrics }: MetricsDistributionChartsProps) {
   return (
     <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-      <Card>
+      <Card variant="glass">
         <CardHeader>
           <h3 className="text-lg font-semibold">🍰 Répartition des statuts</h3>
         </CardHeader>
@@ -22,7 +22,7 @@ export function MetricsDistributionCharts({ metrics }: MetricsDistributionCharts
         </CardContent>
       </Card>
 
-      <Card>
+      <Card variant="glass">
         <CardHeader>
           <h3 className="text-lg font-semibold">⚡ Performance par priorité</h3>
         </CardHeader>
@@ -31,7 +31,7 @@ export function MetricsDistributionCharts({ metrics }: MetricsDistributionCharts
         </CardContent>
       </Card>
 
-      <Card>
+      <Card variant="glass">
         <CardHeader>
           <h3 className="text-lg font-semibold">🔥 Heatmap d&apos;activité</h3>
         </CardHeader>
diff --git a/src/components/dashboard/charts/MetricsMainCharts.tsx b/src/components/dashboard/charts/MetricsMainCharts.tsx
index a0bd2d1..e3465c4 100644
--- a/src/components/dashboard/charts/MetricsMainCharts.tsx
+++ b/src/components/dashboard/charts/MetricsMainCharts.tsx
@@ -12,7 +12,7 @@ interface MetricsMainChartsProps {
 export function MetricsMainCharts({ metrics }: MetricsMainChartsProps) {
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-      <Card>
+      <Card variant="glass">
         <CardHeader>
           <h3 className="text-lg font-semibold">📈 Évolution quotidienne des statuts</h3>
         </CardHeader>
@@ -21,7 +21,7 @@ export function MetricsMainCharts({ metrics }: MetricsMainChartsProps) {
         </CardContent>
       </Card>
 
-      <Card>
+      <Card variant="glass">
         <CardHeader>
           <h3 className="text-lg font-semibold">🎯 Taux de completion quotidien</h3>
         </CardHeader>
diff --git a/src/components/deadline/CriticalDeadlinesCard.tsx b/src/components/deadline/CriticalDeadlinesCard.tsx
index 96538ff..25542b7 100644
--- a/src/components/deadline/CriticalDeadlinesCard.tsx
+++ b/src/components/deadline/CriticalDeadlinesCard.tsx
@@ -53,7 +53,7 @@ export function CriticalDeadlinesCard({ overdue, critical, warning, disableHover
 
   if (urgentTasks.length === 0) {
     return (
-      <Card className="p-6 hover:shadow-lg transition-shadow">
+      <Card variant="glass" className="p-6 hover:shadow-lg transition-shadow">
         <h3 className="text-lg font-semibold mb-4">Tâches Urgentes</h3>
         <div className="text-center py-8">
           <div className="text-4xl mb-2">🎉</div>
@@ -67,7 +67,7 @@ export function CriticalDeadlinesCard({ overdue, critical, warning, disableHover
   }
 
   return (
-    <Card className="p-6 hover:shadow-lg transition-shadow">
+    <Card variant="glass" className="p-6 hover:shadow-lg transition-shadow">
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-lg font-semibold">Tâches Urgentes</h3>
         <div className="text-sm text-[var(--muted-foreground)]">
diff --git a/src/components/deadline/DeadlineRiskCard.tsx b/src/components/deadline/DeadlineRiskCard.tsx
index 9b4e84e..d002fda 100644
--- a/src/components/deadline/DeadlineRiskCard.tsx
+++ b/src/components/deadline/DeadlineRiskCard.tsx
@@ -41,7 +41,7 @@ export function DeadlineRiskCard({ metrics }: DeadlineRiskCardProps) {
   };
 
   return (
-    <Card className={`p-6 ${getRiskBgColor(riskAnalysis.riskLevel)} transition-all hover:shadow-lg`}>
+    <Card variant="glass" className={`p-6 ${getRiskBgColor(riskAnalysis.riskLevel)} transition-all hover:shadow-lg`}>
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-2">
           <span className="text-2xl">{getRiskIcon(riskAnalysis.riskLevel)}</span>
diff --git a/src/components/deadline/DeadlineSummaryCard.tsx b/src/components/deadline/DeadlineSummaryCard.tsx
index 6d13ff9..47ef6a4 100644
--- a/src/components/deadline/DeadlineSummaryCard.tsx
+++ b/src/components/deadline/DeadlineSummaryCard.tsx
@@ -42,7 +42,7 @@ export function DeadlineSummaryCard({ metrics }: DeadlineSummaryCardProps) {
   ];
 
   return (
-    <Card className="p-6 hover:shadow-lg transition-shadow">
+    <Card variant="glass" className="p-6 hover:shadow-lg transition-shadow">
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-lg font-semibold">Répartition des Échéances</h3>
         <div className="text-sm text-[var(--muted-foreground)]">
diff --git a/src/components/ui/StatCard.tsx b/src/components/ui/StatCard.tsx
index a37457f..e730a76 100644
--- a/src/components/ui/StatCard.tsx
+++ b/src/components/ui/StatCard.tsx
@@ -26,7 +26,7 @@ export function StatCard({
   className 
 }: StatCardProps) {
   return (
-    <Card className={cn("p-6 hover:shadow-lg transition-shadow", className)}>
+    <Card variant="glass" className={cn("p-6 hover:shadow-lg transition-shadow", className)}>
       <div className="flex items-center justify-between">
         <div>
           <p className="text-sm font-medium text-[var(--muted-foreground)] mb-1">