Refonte UI : finitions (en-tête mobile, menu thème, libellés FR) et charte graphique

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017ADkrVcVFTT14hbB148HYS

client/src/components/layout/app-shell.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { Link, useLocation } from "wouter";
 import Sidebar from "@/components/sidebar";
-import { LogoMark } from "@/components/brand/logo";
+import { Logo } from "@/components/brand/logo";
 import { MobileNav } from "@/components/layout/mobile-nav";
 import { titleForPath } from "@/components/layout/nav-config";
 import { cn } from "@/lib/utils";
@@ -15,10 +15,10 @@ export function AppShell({ children }: { children: ReactNode }) {
       <Sidebar />
       <div className="flex min-w-0 flex-1 flex-col">
         <header className="sticky top-0 z-30 flex h-14 items-center gap-3 border-b bg-card/90 px-4 backdrop-blur-lg lg:hidden">
-          <Link href="/" aria-label="Accueil">
-            <LogoMark size={30} />
+          <Link href="/" aria-label="Accueil Social Flow">
+            <Logo size={30} subtitle={false} />
           </Link>
-          <p className="truncate font-semibold">{titleForPath(location)}</p>
+          <span className="sr-only">{titleForPath(location)}</span>
         </header>
         <main className="flex-1 pb-24 lg:pb-0">{children}</main>
       </div>

client/src/components/sidebar.tsx

@@ -33,7 +33,7 @@ function NavLink({ item, active, collapsed }: { item: NavItem; active: boolean;
       href={item.href}
       aria-current={active ? "page" : undefined}
       className={cn(
-        "group relative flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+        "group relative flex items-center gap-3 rounded-lg px-3 py-[7px] text-sm font-medium transition-colors",
         active
           ? "bg-primary/10 text-primary"
           : "text-muted-foreground hover:bg-sidebar-accent hover:text-foreground",
@@ -98,7 +98,7 @@ export default function Sidebar() {
 
       <nav className={cn("flex-1 overflow-y-auto py-4 scrollbar-none", collapsed ? "px-3" : "px-4")} aria-label="Navigation principale">
         {groups.map((group, gi) => (
-          <div key={group.label ?? gi} className={cn(gi > 0 && "mt-5")}>
+          <div key={group.label ?? gi} className={cn(gi > 0 && "mt-4")}>
             {group.label &&
               (collapsed ? (
                 <div className="mx-auto mb-2 h-px w-6 bg-sidebar-border" />
@@ -140,7 +140,7 @@ export default function Sidebar() {
                 )}
               </button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent side={collapsed ? "right" : "top"} align="start" className="w-60">
+            <DropdownMenuContent side={collapsed ? "right" : "top"} align="start" className="w-64">
               <DropdownMenuLabel className="font-normal">
                 <p className="text-sm font-medium">{session.username}</p>
                 <p className="text-xs text-muted-foreground">{isAdmin ? "Administrateur" : "Utilisateur"}</p>

client/src/components/theme-provider.tsx

@@ -37,7 +37,7 @@ export function ThemeToggle({ className, compact = false }: { className?: string
           title={label}
           onClick={() => setTheme(value)}
           className={cn(
-            "flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-muted-foreground transition-colors",
+            "flex min-w-0 flex-1 items-center justify-center gap-1.5 rounded-md px-1.5 py-1.5 text-xs font-medium text-muted-foreground transition-colors",
             current === value ? "bg-card text-foreground shadow-sm" : "hover:text-foreground",
           )}
           data-testid={`theme-${value}`}

client/src/pages/audio-admin.tsx

@@ -68,7 +68,7 @@ export default function AudioAdmin() {
             const successCount = data.results?.filter((r: any) => r.success).length ?? 0;
             const failCount = data.results?.filter((r: any) => !r.success).length ?? 0;
             toast({
-                title: "Upload terminé",
+                title: "Import terminé",
                 description: failCount > 0
                     ? `${successCount} fichier(s) ajouté(s), ${failCount} échec(s)`
                     : `${successCount} fichier(s) ajouté(s) à la bibliothèque`,

client/src/pages/new-post.tsx

@@ -783,7 +783,7 @@ export default function NewPost() {
                         >
                           <div className="flex items-center justify-between">
                             <Icon className={`h-5 w-5 ${postType === value ? 'text-primary' : 'text-muted-foreground'}`} />
-                            <RadioGroupItem value={value} id={`format-${value}`} className="sr-only sm:not-sr-only" />
+                            <RadioGroupItem value={value} id={`format-${value}`} className="hidden sm:block" />
                           </div>
                           <div>
                             <p className="text-sm font-medium">{label}</p>

client/src/pages/settings.tsx

@@ -278,7 +278,7 @@ export default function Settings() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['/api/cloudinary/config'] });
       toast({
-        title: "Logo uploadé",
+        title: "Logo enregistré",
         description: "Votre logo a été enregistré avec succès",
       });
       setLogoFile(null);
@@ -286,7 +286,7 @@ export default function Settings() {
     onError: (error: Error) => {
       toast({
         title: "Erreur",
-        description: error.message || "Impossible d'uploader le logo",
+        description: error.message || "Impossible d'importer le logo",
         variant: "destructive",
       });
     },
@@ -512,7 +512,7 @@ export default function Settings() {
                     Logo de l'entreprise
                   </CardTitle>
                   <CardDescription>
-                    Uploadez votre logo pour l'ajouter aux images éditées
+                    Importez votre logo pour l'ajouter aux images éditées
                   </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-4">
@@ -545,7 +545,7 @@ export default function Settings() {
                             onClick={() => document.getElementById('logo-upload-replace')?.click()}
                           >
                             <Upload className="w-4 h-4" />
-                            {uploadLogoMutation.isPending ? "Upload en cours..." : "Remplacer le logo"}
+                            {uploadLogoMutation.isPending ? "Import en cours…" : "Remplacer le logo"}
                           </Button>
                         </Label>
                         <input
@@ -567,7 +567,7 @@ export default function Settings() {
                       <div className="border-2 border-dashed border-border rounded-lg p-8 text-center">
                         <Upload className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
                         <p className="text-sm text-muted-foreground mb-4">
-                          Aucun logo uploadé. Choisissez une image PNG ou JPG.
+                          Aucun logo. Choisissez une image PNG ou JPG.
                         </p>
                         <Label htmlFor="logo-upload" className="cursor-pointer">
                           <Button
@@ -577,7 +577,7 @@ export default function Settings() {
                             onClick={() => document.getElementById('logo-upload')?.click()}
                           >
                             <Upload className="w-4 h-4" />
-                            {uploadLogoMutation.isPending ? "Upload en cours..." : "Uploader un logo"}
+                            {uploadLogoMutation.isPending ? "Import en cours…" : "Importer un logo"}
                           </Button>
                         </Label>
                         <input