style: refactor layout and enhance card UI in WeeklyManager

- Updated `WeeklyManagerPage` layout to use a `<main>` tag for better semantic structure.
- Refined `ManagerWeeklySummary` component to display narrative and metrics side by side, improving visual organization.
- Enhanced `AchievementCard` and `ChallengeCard` styles for better color differentiation and user experience.
- Adjusted spacing and grid layouts for improved responsiveness and clarity in the UI.

src/app/weekly-manager/page.tsx

@@ -19,15 +19,13 @@ export default async function WeeklyManagerPage() {
     <div className="min-h-screen bg-[var(--background)]">
       <Header />
       
-      <div className="container mx-auto px-4 py-8">
-        <div className="max-w-6xl mx-auto">
-          <WeeklyManagerPageClient 
-            initialSummary={summary}
-            initialTasks={initialTasks}
-            initialTags={initialTags}
-          />
-        </div>
-      </div>
+      <main className="container mx-auto px-6 py-8">
+        <WeeklyManagerPageClient 
+          initialSummary={summary}
+          initialTasks={initialTasks}
+          initialTags={initialTags}
+        />
+      </main>
     </div>
   );
 }

src/components/dashboard/ManagerWeeklySummary.tsx

@@ -4,7 +4,6 @@ import { useState } from 'react';
 import { ManagerSummary } from '@/services/analytics/manager-summary';
 import { Card, CardHeader, CardContent } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
-import { MetricCard } from '@/components/ui/MetricCard';
 import { Tabs, TabItem } from '@/components/ui/Tabs';
 import { AchievementCard } from '@/components/ui/AchievementCard';
 import { ChallengeCard } from '@/components/ui/ChallengeCard';
@@ -73,76 +72,80 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
       {/* Vue Executive / Narrative */}
       {activeView === 'narrative' && (
         <div className="space-y-6">
-          {/* Résumé narratif */}
-          <Card>
-            <CardHeader>
-              <h2 className="text-lg font-semibold flex items-center gap-2">
-                📊 Résumé de la semaine
-              </h2>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="outline-card-blue p-4">
-                <h3 className="font-medium mb-2">🎯 Points clés accomplis</h3>
-                <p>{summary.narrative.weekHighlight}</p>
-              </div>
-              
-              <div className="outline-card-yellow p-4">
-                <h3 className="font-medium mb-2">⚡ Défis traités</h3>
-                <p>{summary.narrative.mainChallenges}</p>
-              </div>
-              
-              <div className="outline-card-green p-4">
-                <h3 className="font-medium mb-2">🔮 Focus 7 prochains jours</h3>
-                <p>{summary.narrative.nextWeekFocus}</p>
-              </div>
-            </CardContent>
-          </Card>
+          {/* Section principale : Résumé + Métriques côte à côte */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Résumé narratif */}
+            <Card variant="elevated">
+              <CardHeader>
+                <h2 className="text-lg font-semibold flex items-center gap-2">
+                  📊 Résumé de la semaine
+                </h2>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="outline-card-blue p-4">
+                  <h3 className="font-medium mb-2">🎯 Points clés accomplis</h3>
+                  <p className="text-sm text-[var(--muted-foreground)]">{summary.narrative.weekHighlight}</p>
+                </div>
+                
+                <div className="outline-card-orange p-4">
+                  <h3 className="font-medium mb-2">⚡ Défis traités</h3>
+                  <p className="text-sm text-[var(--muted-foreground)]">{summary.narrative.mainChallenges}</p>
+                </div>
+                
+                <div className="outline-card-green p-4">
+                  <h3 className="font-medium mb-2">🔮 Focus 7 prochains jours</h3>
+                  <p className="text-sm text-[var(--muted-foreground)]">{summary.narrative.nextWeekFocus}</p>
+                </div>
+              </CardContent>
+            </Card>
 
-          {/* Métriques rapides */}
-          <Card>
-            <CardHeader>
-              <h2 className="text-lg font-semibold">📈 Métriques en bref</h2>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                <MetricCard
-                  title="Tâches complétées"
-                  value={summary.metrics.totalTasksCompleted}
-                  subtitle={`dont ${summary.metrics.highPriorityTasksCompleted} priorité haute`}
-                  color="primary"
-                />
-                
-                <MetricCard
-                  title="Todos complétés"
-                  value={summary.metrics.totalCheckboxesCompleted}
-                  subtitle={`dont ${summary.metrics.meetingCheckboxesCompleted} meetings`}
-                  color="success"
-                />
-                
-                <MetricCard
-                  title="Items à fort impact"
-                  value={summary.keyAccomplishments.filter(a => a.impact === 'high').length}
-                  subtitle={`/ ${summary.keyAccomplishments.length} accomplissements`}
-                  color="warning"
-                />
-                
-                <MetricCard
-                  title="Priorités critiques"
-                  value={summary.upcomingChallenges.filter(c => c.priority === 'high').length}
-                  subtitle={`/ ${summary.upcomingChallenges.length} enjeux`}
-                  color="destructive"
-                />
-              </div>
-            </CardContent>
-          </Card>
+            {/* Métriques rapides */}
+            <Card variant="elevated">
+              <CardHeader>
+                <h2 className="text-lg font-semibold">📈 Métriques en bref</h2>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="outline-metric-blue">
+                    <div className="text-2xl font-bold mb-1">{summary.metrics.totalTasksCompleted}</div>
+                    <div className="text-xs font-medium mb-1">Tâches complétées</div>
+                    <div className="text-xs text-[var(--muted-foreground)]">dont {summary.metrics.highPriorityTasksCompleted} priorité haute</div>
+                  </div>
+                  
+                  <div className="outline-metric-green">
+                    <div className="text-2xl font-bold mb-1">{summary.metrics.totalCheckboxesCompleted}</div>
+                    <div className="text-xs font-medium mb-1">Todos complétés</div>
+                    <div className="text-xs text-[var(--muted-foreground)]">dont {summary.metrics.meetingCheckboxesCompleted} meetings</div>
+                  </div>
+                  
+                  <div className="outline-metric-orange">
+                    <div className="text-2xl font-bold mb-1">{summary.keyAccomplishments.filter(a => a.impact === 'high').length}</div>
+                    <div className="text-xs font-medium mb-1">Items à fort impact</div>
+                    <div className="text-xs text-[var(--muted-foreground)]">/ {summary.keyAccomplishments.length} accomplissements</div>
+                  </div>
+                  
+                  <div className="outline-metric-gray">
+                    <div className="text-2xl font-bold mb-1">{summary.upcomingChallenges.filter(c => c.priority === 'high').length}</div>
+                    <div className="text-xs font-medium mb-1">Priorités critiques</div>
+                    <div className="text-xs text-[var(--muted-foreground)]">/ {summary.upcomingChallenges.length} enjeux</div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
 
           {/* Top accomplissements */}
-          <Card>
-            <CardHeader>
-              <h2 className="text-lg font-semibold">🏆 Top accomplissements</h2>
+          <Card variant="elevated">
+            <CardHeader className="pb-4" style={{ 
+              borderBottom: '1px solid',
+              borderBottomColor: 'color-mix(in srgb, var(--success) 10%, var(--border))'
+            }}>
+              <h2 className="text-lg font-semibold flex items-center gap-2" style={{ color: 'var(--success)' }}>
+                🏆 Top accomplissements
+              </h2>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {summary.keyAccomplishments.length === 0 ? (
                   <div className="col-span-3 text-center py-8 text-[var(--muted-foreground)]">
                     <p>Aucun accomplissement significatif trouvé cette semaine.</p>
@@ -165,12 +168,17 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
           </Card>
 
           {/* Top challenges */}
-          <Card>
-            <CardHeader>
-              <h2 className="text-lg font-semibold">🎯 Top enjeux à venir</h2>
+          <Card variant="elevated">
+            <CardHeader className="pb-4" style={{ 
+              borderBottom: '1px solid',
+              borderBottomColor: 'color-mix(in srgb, var(--destructive) 10%, var(--border))'
+            }}>
+              <h2 className="text-lg font-semibold flex items-center gap-2" style={{ color: 'var(--destructive)' }}>
+                🎯 Top enjeux à venir
+              </h2>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {summary.upcomingChallenges.length === 0 ? (
                   <div className="col-span-3 text-center py-8 text-[var(--muted-foreground)]">
                     <p>Aucun enjeu prioritaire trouvé.</p>
@@ -196,52 +204,76 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
 
       {/* Vue détaillée des accomplissements */}
       {activeView === 'accomplishments' && (
-        <Card>
+        <Card variant="elevated">
           <CardHeader>
             <h2 className="text-lg font-semibold">✅ Accomplissements des 7 derniers jours</h2>
             <p className="text-sm text-[var(--muted-foreground)]">
               {summary.keyAccomplishments.length} accomplissements significatifs • {summary.metrics.totalTasksCompleted} tâches • {summary.metrics.totalCheckboxesCompleted} todos complétés
             </p>
           </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {summary.keyAccomplishments.map((accomplishment, index) => (
-                <AchievementCard
-                  key={accomplishment.id}
-                  achievement={accomplishment}
-                  availableTags={availableTags as (Tag & { usage: number })[]}
-                  index={index}
-                  showDescription={true}
-                  maxTags={3}
-                />
-              ))}
-            </div>
+          <CardContent className="space-y-6">
+            {summary.keyAccomplishments.length === 0 ? (
+              <div className="p-8 text-center rounded-xl border-2" style={{ 
+                backgroundColor: 'color-mix(in srgb, var(--muted) 15%, transparent)',
+                borderColor: 'color-mix(in srgb, var(--muted) 40%, var(--border))',
+                color: 'var(--muted-foreground)'
+              }}>
+                <div className="text-4xl mb-4">📭</div>
+                <p className="text-lg mb-2">Aucun accomplissement significatif trouvé cette semaine.</p>
+                <p className="text-sm">Ajoutez des tâches avec priorité haute/medium ou des meetings.</p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {summary.keyAccomplishments.map((accomplishment, index) => (
+                  <AchievementCard
+                    key={accomplishment.id}
+                    achievement={accomplishment}
+                    availableTags={availableTags as (Tag & { usage: number })[]}
+                    index={index}
+                    showDescription={true}
+                    maxTags={3}
+                  />
+                ))}
+              </div>
+            )}
           </CardContent>
         </Card>
       )}
 
       {/* Vue détaillée des challenges */}
       {activeView === 'challenges' && (
-        <Card>
+        <Card variant="elevated">
           <CardHeader>
             <h2 className="text-lg font-semibold">🎯 Enjeux et défis à venir</h2>
             <p className="text-sm text-[var(--muted-foreground)]">
               {summary.upcomingChallenges.length} défis identifiés • {summary.upcomingChallenges.filter(c => c.priority === 'high').length} priorité haute • {summary.upcomingChallenges.filter(c => c.blockers.length > 0).length} avec blockers
             </p>
           </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {summary.upcomingChallenges.map((challenge, index) => (
-                <ChallengeCard
-                  key={challenge.id}
-                  challenge={challenge}
-                  availableTags={availableTags as (Tag & { usage: number })[]}
-                  index={index}
-                  showDescription={true}
-                  maxTags={3}
-                />
-              ))}
-            </div>
+          <CardContent className="space-y-6">
+            {summary.upcomingChallenges.length === 0 ? (
+              <div className="p-8 text-center rounded-xl border-2" style={{ 
+                backgroundColor: 'color-mix(in srgb, var(--muted) 15%, transparent)',
+                borderColor: 'color-mix(in srgb, var(--muted) 40%, var(--border))',
+                color: 'var(--muted-foreground)'
+              }}>
+                <div className="text-4xl mb-4">🎯</div>
+                <p className="text-lg mb-2">Aucun enjeu prioritaire trouvé.</p>
+                <p className="text-sm">Ajoutez des tâches non complétées avec priorité haute/medium.</p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {summary.upcomingChallenges.map((challenge, index) => (
+                  <ChallengeCard
+                    key={challenge.id}
+                    challenge={challenge}
+                    availableTags={availableTags as (Tag & { usage: number })[]}
+                    index={index}
+                    showDescription={true}
+                    maxTags={3}
+                  />
+                ))}
+              </div>
+            )}
           </CardContent>
         </Card>
       )}

src/components/ui/AchievementCard.tsx

@@ -35,7 +35,9 @@ export function AchievementCard({
   className = '' 
 }: AchievementCardProps) {
   return (
-    <div className={`relative bg-[var(--card)] border border-[var(--border)] rounded-lg p-3 transition-all duration-200 group ${className}`}>
+    <div className={`relative border border-[var(--border)] rounded-lg p-3 transition-all duration-200 group ${className}`} style={{ 
+      backgroundColor: 'color-mix(in srgb, var(--success) 5%, var(--card))'
+    }}>
       {/* Barre colorée gauche */}
       <div className="absolute left-0 top-0 bottom-0 w-1 bg-green-500 rounded-l-lg"></div>
       

src/components/ui/ChallengeCard.tsx

@@ -35,7 +35,9 @@ export function ChallengeCard({
   className = '' 
 }: ChallengeCardProps) {
   return (
-    <div className={`relative bg-[var(--card)] border border-[var(--border)] rounded-lg p-3 transition-all duration-200 group ${className}`}>
+    <div className={`relative border border-[var(--border)] rounded-lg p-3 transition-all duration-200 group ${className}`} style={{ 
+      backgroundColor: 'color-mix(in srgb, var(--destructive) 5%, var(--card))'
+    }}>
       {/* Barre colorée gauche */}
       <div className="absolute left-0 top-0 bottom-0 w-1 bg-orange-500 rounded-l-lg"></div>