feat: Ajouter versions mobiles complètes pour toutes les pages

Implémentation d'un système responsive robuste avec détection automatique
du type d'appareil et switch transparent entre versions desktop et mobile.

## Nouvelles fonctionnalités

### 1. Hook de détection mobile (useIsMobile)
- Détection via media query (max-width: 768px)
- Validation supplémentaire via user agent
- Support des changements dynamiques de taille d'écran
- Hook useDeviceType pour détection granulaire (mobile/tablet/desktop)

### 2. Composant ResponsiveRoute
- Switch automatique entre versions desktop/mobile
- Lazy loading des composants pour performances optimales
- Factory function createResponsiveRoute pour création facile
- Suspense avec fallback de chargement

### 3. Pages mobiles optimisées (10 pages)
**Pages créées :**
- dashboard.tsx - Tableau de bord
- new-post.tsx - Création de posts (interface tactile optimisée)
- calendar.tsx - Calendrier
- media.tsx - Bibliothèque de médias
- image-editor.tsx - Éditeur d'images
- pages.tsx - Gestion des pages sociales
- ai.tsx - Assistant IA (admin)
- settings.tsx - Paramètres (admin)
- users-admin.tsx - Gestion utilisateurs (admin)
- sql.tsx - Administration SQL (admin)

**Optimisations mobiles appliquées :**
- Layout en colonne unique (au lieu de multi-colonnes)
- Boutons tactiles : min-height 44-52px (Apple guidelines)
- Grilles adaptées (2 colonnes au lieu de 3 pour médias)
- Navigation simplifiée avec menu hamburger
- Dialogs en plein écran (95vw sur mobile)
- Tables converties en cards empilées
- Boutons d'action en colonne au lieu de ligne
- Padding et espacement optimisés pour petits écrans
- Typographie réduite (text-2xl au lieu de 3xl)
- Touch-manipulation sur zones interactives
- Bottom fixed buttons pour actions principales
- Inputs full-width avec min-height 48px

### 4. Routing automatique
- App.tsx modifié pour utiliser createResponsiveRoute
- Détection transparente du device
- Lazy loading de toutes les routes
- Aucun changement d'URL entre versions

## Performances

- Code splitting automatique (lazy loading)
- Seule la version nécessaire est chargée
- Cache des composants chargés
- Réduction de la taille du bundle initial

## Tests à effectuer

1. Rétrécir la fenêtre du navigateur < 768px
2. Utiliser les DevTools mobile
3. Tester sur un vrai appareil mobile
4. Vérifier que toutes les fonctionnalités marchent

Les utilisateurs bénéficient maintenant d'une expérience optimale sur mobile !

client/src/pages/mobile/sql.tsx

@@ -0,0 +1,240 @@
+import { useState } from "react";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import Sidebar from "@/components/sidebar";
+import TopBar from "@/components/topbar";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/hooks/use-toast";
+import { apiRequest, queryClient } from "@/lib/queryClient";
+import { Database, Download, Play } from "lucide-react";
+
+export default function SqlAdminMobile() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const { toast } = useToast();
+  const [sqlQuery, setSqlQuery] = useState("");
+  const [queryResult, setQueryResult] = useState<any>(null);
+
+  const { data: tablesData } = useQuery({
+    queryKey: ["/api/sql/tables"],
+  });
+
+  const executeSqlMutation = useMutation({
+    mutationFn: async (query: string) => {
+      const res = await apiRequest("POST", "/api/sql/execute", { query });
+      return await res.json();
+    },
+    onSuccess: (data) => {
+      setQueryResult(data);
+      if (data.success) {
+        toast({
+          title: "Requête exécutée",
+          description: "La requête SQL a été exécutée avec succès",
+        });
+      }
+    },
+    onError: (error: any) => {
+      toast({
+        variant: "destructive",
+        title: "Erreur SQL",
+        description: error.message || "Erreur lors de l'exécution de la requête",
+      });
+    },
+  });
+
+  const handleExecuteQuery = () => {
+    if (!sqlQuery.trim()) {
+      toast({
+        variant: "destructive",
+        title: "Erreur",
+        description: "Veuillez entrer une requête SQL",
+      });
+      return;
+    }
+    executeSqlMutation.mutate(sqlQuery);
+  };
+
+  const handleDownloadResult = () => {
+    if (!queryResult?.result) return;
+
+    const json = JSON.stringify(queryResult.result, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `sql-result-${Date.now()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const insertTable = (tableName: string) => {
+    setSqlQuery(`SELECT * FROM ${tableName} LIMIT 10;`);
+  };
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-background">
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      <div className={`
+        fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
+        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
+      `}>
+        <Sidebar onLinkClick={() => setSidebarOpen(false)} />
+      </div>
+
+      <main className="flex-1 overflow-y-auto">
+        <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
+
+        {/* MOBILE: Single column layout */}
+        <div className="p-4 space-y-6">
+          <div className="space-y-2">
+            <h1 className="text-2xl font-bold flex items-center gap-2">
+              <Database className="w-7 h-7" />
+              Administration SQL
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              Exécutez des requêtes SQL et gérez votre base de données
+            </p>
+          </div>
+
+          {/* Tables disponibles */}
+          <Card className="rounded-2xl border-border/50 shadow-lg">
+            <CardHeader className="p-5">
+              <CardTitle className="text-base">Tables disponibles</CardTitle>
+              <CardDescription className="text-xs">
+                Cliquez pour insérer dans la requête
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="p-5 pt-0">
+              <div className="grid grid-cols-2 gap-2">
+                {(tablesData as any)?.tables?.map((table: any) => (
+                  <Button
+                    key={table.tablename}
+                    variant="outline"
+                    className="justify-start text-left min-h-[44px] text-xs"
+                    onClick={() => insertTable(table.tablename)}
+                    data-testid={`button-table-${table.tablename}`}
+                  >
+                    <Database className="w-4 h-4 mr-2 flex-shrink-0" />
+                    <span className="truncate">{table.tablename}</span>
+                  </Button>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Éditeur SQL */}
+          <Card className="rounded-2xl border-border/50 shadow-lg">
+            <CardHeader className="p-5">
+              <CardTitle className="text-base">Éditeur SQL</CardTitle>
+              <CardDescription className="text-xs">
+                Entrez votre requête SQL ci-dessous
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4 p-5 pt-0">
+              <Textarea
+                placeholder="SELECT * FROM users LIMIT 10;"
+                value={sqlQuery}
+                onChange={(e) => setSqlQuery(e.target.value)}
+                className="font-mono min-h-[150px] text-sm"
+                data-testid="textarea-sql-query"
+              />
+
+              <div className="flex flex-col gap-2">
+                <Button
+                  onClick={handleExecuteQuery}
+                  disabled={executeSqlMutation.isPending}
+                  className="w-full min-h-[48px]"
+                  data-testid="button-execute-sql"
+                >
+                  <Play className="w-5 h-5 mr-2" />
+                  {executeSqlMutation.isPending ? "Exécution..." : "Exécuter"}
+                </Button>
+
+                <Button
+                  variant="outline"
+                  onClick={() => setSqlQuery("")}
+                  className="w-full min-h-[48px]"
+                  data-testid="button-clear-sql"
+                >
+                  Effacer
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Résultats */}
+          {queryResult && (
+            <Card className="rounded-2xl border-border/50 shadow-lg">
+              <CardHeader className="p-5">
+                <div className="flex flex-col gap-3">
+                  <div>
+                    <CardTitle className="text-base">Résultats</CardTitle>
+                    <CardDescription className="text-xs">
+                      {queryResult.success ? "Requête exécutée avec succès" : "Erreur lors de l'exécution"}
+                    </CardDescription>
+                  </div>
+                  {queryResult.success && queryResult.result && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleDownloadResult}
+                      className="w-full min-h-[44px]"
+                      data-testid="button-download-result"
+                    >
+                      <Download className="w-4 h-4 mr-2" />
+                      Télécharger JSON
+                    </Button>
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent className="p-5 pt-0">
+                {queryResult.success ? (
+                  <div className="overflow-x-auto">
+                    {Array.isArray(queryResult.result) && queryResult.result.length > 0 ? (
+                      <div className="space-y-3">
+                        {queryResult.result.map((row: any, idx: number) => (
+                          <div key={idx} className="p-3 rounded-lg border bg-card space-y-2">
+                            <div className="text-xs font-semibold text-muted-foreground">Ligne {idx + 1}</div>
+                            {Object.entries(row).map(([key, value]: [string, any]) => (
+                              <div key={key} className="flex flex-col gap-1">
+                                <div className="text-xs font-medium">{key}</div>
+                                <div className="font-mono text-xs text-muted-foreground break-all">
+                                  {value === null ? (
+                                    <span className="italic">null</span>
+                                  ) : typeof value === 'object' ? (
+                                    JSON.stringify(value)
+                                  ) : (
+                                    String(value)
+                                  )}
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <pre className="bg-muted p-4 rounded-lg overflow-auto max-h-96 text-xs">
+                        <code>{JSON.stringify(queryResult.result, null, 2)}</code>
+                      </pre>
+                    )}
+                  </div>
+                ) : (
+                  <div className="bg-destructive/10 border border-destructive/20 text-destructive p-4 rounded-lg">
+                    <p className="font-semibold text-sm">Erreur :</p>
+                    <p className="font-mono text-xs mt-2 break-all">{queryResult.error}</p>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}