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/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>