Update application UI with a modern and streamlined design

Revamp the entire UI with a new theme, enhancing readability and modern aesthetics across all components, including AI chat, calendar, media uploads, and user management sections.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nriKMjY

client/src/pages/ai.tsx

@@ -25,17 +25,15 @@ export default function AI() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6">
-          <div className="mb-6">
+        <div className="p-8 max-w-5xl mx-auto">
+          <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Assistant IA</h1>
             <p className="text-muted-foreground mt-2">
               Générez du contenu personnalisé avec l'intelligence artificielle
             </p>
           </div>
 
-          <div className="max-w-4xl mx-auto">
-            <AiChat />
-          </div>
+          <AiChat />
         </div>
       </main>
     </div>

client/src/pages/analytics.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { TrendingUp, Users, Eye, Heart } from "lucide-react";
+import { TrendingUp, Users, Eye, Heart, BarChart3 } from "lucide-react";
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -12,6 +12,37 @@ export default function Analytics() {
     queryKey: ['/api/stats'],
   });
 
+  const metrics = [
+    {
+      title: "Publications totales",
+      value: "0",
+      description: "Toutes plateformes",
+      icon: TrendingUp,
+      gradient: "from-primary to-primary/80",
+    },
+    {
+      title: "Portée totale",
+      value: "0",
+      description: "Personnes atteintes",
+      icon: Users,
+      gradient: "from-secondary to-secondary/80",
+    },
+    {
+      title: "Impressions",
+      value: "0",
+      description: "Vues totales",
+      icon: Eye,
+      gradient: "from-success to-success/80",
+    },
+    {
+      title: "Engagement",
+      value: "0",
+      description: "Interactions totales",
+      icon: Heart,
+      gradient: "from-warning to-warning/80",
+    },
+  ];
+
   return (
     <div className="flex h-screen overflow-hidden bg-background">
       {sidebarOpen && (
@@ -31,76 +62,64 @@ export default function Analytics() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6">
-          <div className="mb-6">
+        <div className="p-8 max-w-[1600px] mx-auto space-y-8">
+          <div>
             <h1 className="text-3xl font-bold text-foreground">Analyses</h1>
             <p className="text-muted-foreground mt-2">
               Statistiques et performances de vos publications
             </p>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                  Publications totales
-                </CardTitle>
-                <TrendingUp className="w-4 h-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold" data-testid="text-total-posts">0</div>
-                <p className="text-xs text-muted-foreground">Toutes plateformes</p>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                  Portée totale
-                </CardTitle>
-                <Users className="w-4 h-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold" data-testid="text-total-reach">0</div>
-                <p className="text-xs text-muted-foreground">Personnes atteintes</p>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                  Impressions
-                </CardTitle>
-                <Eye className="w-4 h-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold" data-testid="text-total-impressions">0</div>
-                <p className="text-xs text-muted-foreground">Vues totales</p>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                  Engagement
-                </CardTitle>
-                <Heart className="w-4 h-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold" data-testid="text-total-engagement">0</div>
-                <p className="text-xs text-muted-foreground">Interactions totales</p>
-              </CardContent>
-            </Card>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {metrics.map((metric, index) => {
+              const Icon = metric.icon;
+              return (
+                <Card key={index} className="rounded-2xl border-border/50 shadow-lg overflow-hidden">
+                  <CardHeader className="pb-4">
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="text-sm font-medium text-muted-foreground">
+                        {metric.title}
+                      </CardTitle>
+                      <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${metric.gradient} flex items-center justify-center shadow-md`}>
+                        <Icon className="w-5 h-5 text-white" />
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-3xl font-bold" data-testid={`text-${metric.title.toLowerCase().replace(/\s+/g, '-')}`}>
+                      {metric.value}
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-2 font-medium">{metric.description}</p>
+                  </CardContent>
+                </Card>
+              );
+            })}
           </div>
 
-          <Card>
-            <CardHeader>
-              <CardTitle>Fonctionnalité à venir</CardTitle>
+          <Card className="rounded-2xl border-border/50 shadow-lg">
+            <CardHeader className="border-b border-border/50 p-6 bg-gradient-to-r from-primary/5 to-secondary/5">
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
+                  <BarChart3 className="text-white w-6 h-6" />
+                </div>
+                <div>
+                  <CardTitle className="text-lg">Fonctionnalité à venir</CardTitle>
+                  <p className="text-sm text-muted-foreground mt-1">Graphiques et statistiques détaillées</p>
+                </div>
+              </div>
             </CardHeader>
-            <CardContent>
-              <p className="text-muted-foreground">
-                Les analyses détaillées et les graphiques de performance seront disponibles prochainement.
-              </p>
+            <CardContent className="p-8">
+              <div className="text-center py-12">
+                <div className="w-20 h-20 rounded-2xl bg-muted/30 flex items-center justify-center mx-auto mb-6">
+                  <BarChart3 className="w-10 h-10 text-muted-foreground opacity-50" />
+                </div>
+                <p className="text-muted-foreground text-lg mb-2">
+                  Les analyses détaillées et les graphiques de performance seront disponibles prochainement.
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Vous pourrez suivre l'évolution de vos statistiques au fil du temps
+                </p>
+              </div>
             </CardContent>
           </Card>
         </div>

client/src/pages/calendar.tsx

@@ -25,8 +25,8 @@ export default function Calendar() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6">
-          <div className="mb-6">
+        <div className="p-8 max-w-[1600px] mx-auto">
+          <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Calendrier</h1>
             <p className="text-muted-foreground mt-2">
               Visualisez et gérez vos publications planifiées

client/src/pages/dashboard.tsx

@@ -6,7 +6,7 @@ import MediaUpload from "@/components/media-upload";
 import CalendarView from "@/components/calendar-view";
 import ManagedPages from "@/components/managed-pages";
 import QuickActions from "@/components/quick-actions";
-import { Menu } from "lucide-react";
+import { PlusCircle } from "lucide-react";
 import { useState } from "react";
 
 export default function Dashboard() {
@@ -14,7 +14,6 @@ export default function Dashboard() {
 
   return (
     <div className="flex h-screen overflow-hidden bg-background">
-      {/* Mobile sidebar overlay */}
       {sidebarOpen && (
         <div 
           className="fixed inset-0 bg-black/50 z-40 lg:hidden"
@@ -22,7 +21,6 @@ export default function Dashboard() {
         />
       )}
       
-      {/* Sidebar */}
       <div className={`
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
@@ -30,34 +28,32 @@ export default function Dashboard() {
         <Sidebar />
       </div>
 
-      {/* Main content */}
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6 space-y-6">
+        <div className="p-8 space-y-8 max-w-[1600px] mx-auto">
           <StatsCards />
           
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <div className="lg:col-span-2">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div className="lg:col-span-2 space-y-8">
               <AiChat />
+              <MediaUpload />
             </div>
-            <div>
+            <div className="space-y-8">
               <QuickActions />
             </div>
           </div>
 
-          <MediaUpload />
           <CalendarView />
           <ManagedPages />
         </div>
       </main>
 
-      {/* Floating action button for mobile */}
       <button 
-        className="fixed bottom-6 right-6 w-14 h-14 bg-primary rounded-full shadow-xl flex items-center justify-center text-primary-foreground lg:hidden hover:scale-110 transition-all z-30"
+        className="fixed bottom-8 right-8 w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-2xl shadow-2xl flex items-center justify-center text-white lg:hidden hover:scale-110 transition-all z-30"
         data-testid="button-new-post"
       >
-        <Menu className="w-6 h-6" />
+        <PlusCircle className="w-7 h-7" />
       </button>
     </div>
   );

client/src/pages/history.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Clock, CheckCircle, XCircle, Calendar } from "lucide-react";
+import { Clock, CheckCircle, XCircle, Calendar, History as HistoryIcon } from "lucide-react";
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -37,8 +37,8 @@ export default function History() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6">
-          <div className="mb-6">
+        <div className="p-8 max-w-5xl mx-auto">
+          <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Historique</h1>
             <p className="text-muted-foreground mt-2">
               Consultez l'historique de vos publications
@@ -46,40 +46,48 @@ export default function History() {
           </div>
 
           {isLoading ? (
-            <div className="space-y-4">
+            <div className="space-y-6">
               {[1, 2, 3].map((i) => (
-                <Card key={i} className="animate-pulse">
-                  <CardHeader className="h-24 bg-muted"></CardHeader>
-                </Card>
+                <div key={i} className="h-40 bg-card rounded-2xl border border-border/50 animate-pulse" />
               ))}
             </div>
           ) : publishedPosts.length === 0 ? (
-            <Card className="border-dashed">
-              <CardContent className="flex flex-col items-center justify-center py-12">
-                <Clock className="w-12 h-12 text-muted-foreground mb-4" />
-                <h3 className="text-lg font-semibold mb-2">Aucune publication</h3>
-                <p className="text-muted-foreground text-center">
+            <Card className="rounded-2xl border-border/50 border-dashed shadow-lg">
+              <CardContent className="flex flex-col items-center justify-center py-16">
+                <div className="w-20 h-20 rounded-2xl bg-muted/30 flex items-center justify-center mb-6">
+                  <HistoryIcon className="w-10 h-10 text-muted-foreground opacity-50" />
+                </div>
+                <h3 className="text-xl font-semibold mb-2">Aucune publication</h3>
+                <p className="text-muted-foreground text-center max-w-md">
                   Vos publications apparaîtront ici une fois publiées
                 </p>
               </CardContent>
             </Card>
           ) : (
-            <div className="space-y-4">
+            <div className="space-y-6">
               {publishedPosts.map((post) => (
-                <Card key={post.id} data-testid={`card-post-${post.id}`}>
-                  <CardHeader>
+                <Card key={post.id} className="rounded-2xl border-border/50 shadow-lg overflow-hidden" data-testid={`card-post-${post.id}`}>
+                  <CardHeader className="border-b border-border/50 bg-gradient-to-r from-muted/20 to-muted/10 p-6">
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
-                        <CardTitle className="text-lg mb-2">
-                          Publication #{post.id}
-                        </CardTitle>
-                        <p className="text-sm text-muted-foreground line-clamp-2">
+                        <div className="flex items-center gap-3 mb-3">
+                          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-success to-success/80 flex items-center justify-center shadow-md">
+                            <CheckCircle className="w-5 h-5 text-white" />
+                          </div>
+                          <CardTitle className="text-lg">
+                            Publication #{post.id.substring(0, 8)}
+                          </CardTitle>
+                        </div>
+                        <p className="text-sm text-foreground leading-relaxed line-clamp-3">
                           {post.content}
                         </p>
                       </div>
                       <Badge 
-                        variant={post.status === 'published' ? 'default' : 'secondary'}
-                        className="ml-4"
+                        className={`ml-4 ${
+                          post.status === 'published' 
+                            ? 'bg-success/20 text-success hover:bg-success/30' 
+                            : 'bg-destructive/20 text-destructive hover:bg-destructive/30'
+                        }`}
                       >
                         {post.status === 'published' && <CheckCircle className="w-3 h-3 mr-1" />}
                         {post.status === 'failed' && <XCircle className="w-3 h-3 mr-1" />}
@@ -87,17 +95,20 @@ export default function History() {
                       </Badge>
                     </div>
                   </CardHeader>
-                  <CardContent>
-                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
-                      <div className="flex items-center gap-1">
+                  <CardContent className="p-6">
+                    <div className="flex items-center gap-6 text-sm text-muted-foreground flex-wrap">
+                      <div className="flex items-center gap-2">
                         <Calendar className="w-4 h-4" />
-                        {post.updatedAt 
-                          ? format(new Date(post.updatedAt), "d MMM yyyy 'à' HH:mm", { locale: fr })
-                          : 'Date inconnue'
-                        }
+                        <span className="font-medium">
+                          {post.updatedAt 
+                            ? format(new Date(post.updatedAt), "d MMM yyyy 'à' HH:mm", { locale: fr })
+                            : 'Date inconnue'
+                          }
+                        </span>
                       </div>
                       {post.aiGenerated && (
-                        <Badge variant="outline" className="text-xs">
+                        <Badge variant="outline" className="text-xs bg-gradient-to-r from-primary/5 to-secondary/5 border-primary/20">
+                          <CheckCircle className="w-3 h-3 mr-1" />
                           Généré par IA
                         </Badge>
                       )}

client/src/pages/login.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest } from "@/lib/queryClient";
-import { Lock, User } from "lucide-react";
+import { Lock, User, Sparkles } from "lucide-react";
 
 export default function Login() {
   const [, setLocation] = useLocation();
@@ -16,7 +16,6 @@ export default function Login() {
   const [isLoading, setIsLoading] = useState(false);
   const [showDefaultPassword, setShowDefaultPassword] = useState(false);
 
-  // Vérifier si le mot de passe admin par défaut est toujours actif
   useEffect(() => {
     const checkDefaultPassword = async () => {
       try {
@@ -44,7 +43,6 @@ export default function Login() {
         description: `Bienvenue ${data.username}`,
       });
 
-      // Rediriger vers le dashboard
       setLocation("/");
     } catch (error: any) {
       toast({
@@ -58,29 +56,38 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20 p-4">
-      <Card className="w-full max-w-md">
-        <CardHeader className="space-y-1 text-center">
-          <CardTitle className="text-3xl font-bold">Social Flow</CardTitle>
-          <CardDescription>
-            Connectez-vous à votre compte pour gérer vos publications
-          </CardDescription>
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-secondary/5 p-4">
+      <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+      
+      <Card className="w-full max-w-md rounded-2xl border-border/50 shadow-2xl relative z-10">
+        <CardHeader className="space-y-4 text-center pt-8 pb-6">
+          <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary to-secondary mx-auto flex items-center justify-center shadow-2xl">
+            <Sparkles className="w-10 h-10 text-white" />
+          </div>
+          <div>
+            <CardTitle className="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Social Flow
+            </CardTitle>
+            <CardDescription className="text-base mt-3">
+              Connectez-vous à votre compte pour gérer vos publications
+            </CardDescription>
+          </div>
         </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="username" data-testid="label-username">
+        <CardContent className="pb-8 px-8">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div className="space-y-3">
+              <Label htmlFor="username" className="text-sm font-semibold" data-testid="label-username">
                 Nom d'utilisateur
               </Label>
               <div className="relative">
-                <User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                <User className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                 <Input
                   id="username"
                   type="text"
                   placeholder="admin"
                   value={username}
                   onChange={(e) => setUsername(e.target.value)}
-                  className="pl-10"
+                  className="pl-12 h-12 rounded-xl bg-muted/30 border-border/50 focus:border-primary/50"
                   required
                   disabled={isLoading}
                   data-testid="input-username"
@@ -88,19 +95,19 @@ export default function Login() {
               </div>
             </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="password" data-testid="label-password">
+            <div className="space-y-3">
+              <Label htmlFor="password" className="text-sm font-semibold" data-testid="label-password">
                 Mot de passe
               </Label>
               <div className="relative">
-                <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                <Lock className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                 <Input
                   id="password"
                   type="password"
                   placeholder="••••••••"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  className="pl-10"
+                  className="pl-12 h-12 rounded-xl bg-muted/30 border-border/50 focus:border-primary/50"
                   required
                   disabled={isLoading}
                   data-testid="input-password"
@@ -110,7 +117,7 @@ export default function Login() {
 
             <Button
               type="submit"
-              className="w-full"
+              className="w-full h-12 rounded-xl bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-base font-semibold shadow-lg mt-6"
               disabled={isLoading}
               data-testid="button-login"
             >
@@ -119,10 +126,13 @@ export default function Login() {
           </form>
 
           {showDefaultPassword && (
-            <div className="mt-6 text-center text-sm text-muted-foreground">
-              <p>Identifiants par défaut :</p>
-              <p className="font-semibold">admin / admin</p>
-              <p className="text-xs mt-2 text-orange-500">⚠️ Changez ce mot de passe après la première connexion</p>
+            <div className="mt-8 text-center p-4 rounded-xl bg-warning/10 border border-warning/20">
+              <p className="text-sm text-muted-foreground mb-2">Identifiants par défaut :</p>
+              <p className="font-semibold text-foreground">admin / admin</p>
+              <p className="text-xs mt-3 text-warning flex items-center justify-center gap-2">
+                <span className="text-base">⚠️</span>
+                Changez ce mot de passe après la première connexion
+              </p>
             </div>
           )}
         </CardContent>

client/src/pages/media.tsx

@@ -25,8 +25,8 @@ export default function Media() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6">
-          <div className="mb-6">
+        <div className="p-8 max-w-[1600px] mx-auto">
+          <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Médiathèque</h1>
             <p className="text-muted-foreground mt-2">
               Gérez vos images et vidéos pour vos publications

client/src/pages/new-post.tsx

@@ -151,18 +151,18 @@ export default function NewPost() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6 max-w-5xl mx-auto">
-          <div className="mb-6">
+        <div className="p-8 max-w-6xl mx-auto">
+          <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Nouvelle publication</h1>
             <p className="text-muted-foreground mt-2">
               Créez et planifiez une nouvelle publication
             </p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <div className="space-y-6">
-              <Card>
-                <CardHeader>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div className="space-y-8">
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Contenu</CardTitle>
                   <CardDescription>Informations du produit ou message</CardDescription>
                 </CardHeader>
@@ -190,8 +190,8 @@ export default function NewPost() {
                 </CardContent>
               </Card>
 
-              <Card>
-                <CardHeader>
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Texte de la publication</CardTitle>
                   <CardDescription>Écrivez ou générez le texte de votre publication</CardDescription>
                 </CardHeader>
@@ -207,8 +207,8 @@ export default function NewPost() {
               </Card>
 
               {generatedVariants.length > 0 && (
-                <Card>
-                  <CardHeader>
+                <Card className="rounded-2xl border-border/50 shadow-lg">
+                  <CardHeader className="p-6">
                     <CardTitle>Variations générées par l'IA</CardTitle>
                     <CardDescription>Cliquez sur "Utiliser" pour remplir le texte ci-dessus</CardDescription>
                   </CardHeader>
@@ -241,8 +241,8 @@ export default function NewPost() {
                 </Card>
               )}
 
-              <Card>
-                <CardHeader>
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Média</CardTitle>
                   <CardDescription>Sélectionnez une image ou vidéo</CardDescription>
                 </CardHeader>
@@ -285,9 +285,9 @@ export default function NewPost() {
               </Card>
             </div>
 
-            <div className="space-y-6">
-              <Card>
-                <CardHeader>
+            <div className="space-y-8">
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Pages cibles</CardTitle>
                   <CardDescription>Sélectionnez les pages où publier</CardDescription>
                 </CardHeader>
@@ -332,8 +332,8 @@ export default function NewPost() {
                 </CardContent>
               </Card>
 
-              <Card>
-                <CardHeader>
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Planification</CardTitle>
                   <CardDescription>Programmez la publication (optionnel)</CardDescription>
                 </CardHeader>
@@ -357,7 +357,7 @@ export default function NewPost() {
               <Button 
                 onClick={handleCreatePost}
                 disabled={createPostMutation.isPending}
-                className="w-full"
+                className="w-full bg-gradient-to-r from-primary to-secondary hover:opacity-90 shadow-lg"
                 size="lg"
                 data-testid="button-create-post"
               >

client/src/pages/pages.tsx

@@ -61,8 +61,8 @@ export default function PagesManagement() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6">
-          <div className="flex justify-between items-center mb-6">
+        <div className="p-8 max-w-[1600px] mx-auto">
+          <div className="flex justify-between items-center mb-8">
             <div>
               <h1 className="text-3xl font-bold text-foreground">Pages gérées</h1>
               <p className="text-muted-foreground mt-2">
@@ -74,16 +74,14 @@ export default function PagesManagement() {
           </div>
 
           {isLoading ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               {[1, 2, 3].map((i) => (
-                <Card key={i} className="animate-pulse">
-                  <CardHeader className="h-32 bg-muted"></CardHeader>
-                </Card>
+                <div key={i} className="h-48 bg-card rounded-2xl border border-border/50 animate-pulse" />
               ))}
             </div>
           ) : pages.length === 0 ? (
-            <Card className="border-dashed">
-              <CardContent className="flex flex-col items-center justify-center py-12">
+            <Card className="border-dashed rounded-2xl border-border/50 shadow-lg">
+              <CardContent className="flex flex-col items-center justify-center py-16">
                 <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
                   <Plus className="w-8 h-8 text-muted-foreground" />
                 </div>
@@ -98,9 +96,9 @@ export default function PagesManagement() {
               </CardContent>
             </Card>
           ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               {pages.map((page) => (
-                <Card key={page.id} data-testid={`card-page-${page.id}`}>
+                <Card key={page.id} className="rounded-2xl border-border/50 shadow-lg" data-testid={`card-page-${page.id}`}>
                   <CardHeader>
                     <div className="flex items-start justify-between">
                       <div className="flex items-center gap-3">

client/src/pages/settings.tsx

@@ -128,17 +128,17 @@ export default function Settings() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6 max-w-4xl mx-auto">
-          <div className="mb-6">
+        <div className="p-8 max-w-4xl mx-auto">
+          <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Paramètres</h1>
             <p className="text-muted-foreground mt-2">
               Configurez votre application
             </p>
           </div>
 
-          <div className="space-y-6">
-            <Card>
-              <CardHeader>
+          <div className="space-y-8">
+            <Card className="rounded-2xl border-border/50 shadow-lg">
+              <CardHeader className="p-6">
                 <CardTitle className="flex items-center gap-2">
                   <Bell className="w-5 h-5" />
                   Notifications
@@ -179,8 +179,8 @@ export default function Settings() {
               </CardContent>
             </Card>
 
-            <Card>
-              <CardHeader>
+            <Card className="rounded-2xl border-border/50 shadow-lg">
+              <CardHeader className="p-6">
                 <CardTitle className="flex items-center gap-2">
                   <Brain className="w-5 h-5" />
                   Configuration OpenRouter (IA)
@@ -263,8 +263,8 @@ export default function Settings() {
               </CardContent>
             </Card>
 
-            <Card>
-              <CardHeader>
+            <Card className="rounded-2xl border-border/50 shadow-lg">
+              <CardHeader className="p-6">
                 <CardTitle className="flex items-center gap-2">
                   <Cloud className="w-5 h-5" />
                   Configuration Cloudinary
@@ -324,8 +324,8 @@ export default function Settings() {
               </CardContent>
             </Card>
 
-            <Card>
-              <CardHeader>
+            <Card className="rounded-2xl border-border/50 shadow-lg">
+              <CardHeader className="p-6">
                 <CardTitle className="flex items-center gap-2">
                   <Shield className="w-5 h-5" />
                   Sécurité

client/src/pages/sql.tsx

@@ -93,7 +93,7 @@ export default function SqlAdmin() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6 space-y-6">
+        <div className="p-8 max-w-[1600px] mx-auto space-y-8">
           <div>
             <h1 className="text-3xl font-bold flex items-center gap-2">
               <Database className="w-8 h-8" />
@@ -104,10 +104,10 @@ export default function SqlAdmin() {
             </p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
             {/* Liste des tables */}
-            <Card>
-              <CardHeader>
+            <Card className="rounded-2xl border-border/50 shadow-lg">
+              <CardHeader className="p-6">
                 <CardTitle>Tables disponibles</CardTitle>
                 <CardDescription>
                   Cliquez pour insérer dans la requête
@@ -132,9 +132,9 @@ export default function SqlAdmin() {
             </Card>
 
             {/* Éditeur SQL et résultats */}
-            <div className="lg:col-span-3 space-y-6">
-              <Card>
-                <CardHeader>
+            <div className="lg:col-span-3 space-y-8">
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Éditeur SQL</CardTitle>
                   <CardDescription>
                     Entrez votre requête SQL ci-dessous
@@ -172,8 +172,8 @@ export default function SqlAdmin() {
 
               {/* Résultats */}
               {queryResult && (
-                <Card>
-                  <CardHeader>
+                <Card className="rounded-2xl border-border/50 shadow-lg">
+                  <CardHeader className="p-6">
                     <div className="flex justify-between items-center">
                       <div>
                         <CardTitle>Résultats</CardTitle>

client/src/pages/users-admin.tsx

@@ -210,7 +210,7 @@ export default function UsersAdmin() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6 space-y-6">
+        <div className="p-8 max-w-[1600px] mx-auto space-y-8">
           <div>
             <h1 className="text-3xl font-bold flex items-center gap-2">
               <Users className="w-8 h-8" />
@@ -221,11 +221,11 @@ export default function UsersAdmin() {
             </p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
             {/* Liste des utilisateurs */}
             <div className="lg:col-span-2">
-              <Card>
-                <CardHeader>
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Liste des utilisateurs</CardTitle>
                   <CardDescription>
                     {users?.length || 0} utilisateur(s) enregistré(s)
@@ -297,8 +297,8 @@ export default function UsersAdmin() {
 
             {/* Formulaire de création */}
             <div>
-              <Card>
-                <CardHeader>
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle className="flex items-center gap-2">
                     <UserPlus className="w-5 h-5" />
                     Créer un utilisateur