feat(ui): lot 3 — toutes les pages lisibles, cohérentes et en français clair

Chaque page reprend le socle du lot 2 : en-tête avec une phrase
d'explication, couleurs du thème (plus de pages figées en blanc), textes
de 12 px minimum, noms de magasins, infobulles sur le jargon, retours par
toast / confirmation, états vides et d'erreur expliqués.

- Accueil : CA, tickets et panier moyen d'hier vs N-1, par magasin, top 10
  avec lien vers la fiche produit.
- Révision d'assortiment : un seul endroit pour enregistrer et exporter
  (menu Export unique, mêmes droits pour tous), annulation confirmée, sens
  des gammes affiché partout, magasin choisi en un clic, colonnes nommées
  en clair, bandeau de progression au lieu de la fenêtre floue, droits lus
  côté serveur, ligne sélectionnée opaque sur les colonnes figées.
- Recherche produit, Stocks à surveiller (export FF inchangé), Meilleures
  ventes, Ventes par mois (dernier mois complet par défaut), Publicités,
  Commandes fournisseurs, Historique, Paramètres (onglets), Synchronisation
  et Connexion migrés sur DataTable / Tabs / Card.
- Le nom de l'utilisateur est transmis à la session (affiché dans
  l'en-tête).
- Composants devenus inutiles supprimés (anciennes fenêtres modales,
  export-dropdown, financial-cell, supplier-selection).

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

src/features/grid/components/assortment-gaps-modal.tsx

@@ -307,7 +307,7 @@ export function AssortmentGapsModal({ classement, critereId, mois, magasinInitia
             {/* Réglages : quel magasin, et jusqu'où dans le classement */}
             <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
                 <div className="flex items-center gap-2">
-                    <span className="text-[12px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Magasin</span>
+                    <span className="text-[13px] font-medium" style={{ color: "var(--text-muted)" }}>Magasin</span>
                     <div className="inline-flex rounded-lg p-0.5" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}>
                         {sites.map((s) => (
                             <button
@@ -327,7 +327,7 @@ export function AssortmentGapsModal({ classement, critereId, mois, magasinInitia
                     </div>
                 </div>
                 <div className="flex items-center gap-2">
-                    <span className="text-[12px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>Profondeur</span>
+                    <span className="text-[13px] font-medium" style={{ color: "var(--text-muted)" }}>Profondeur</span>
                     <div className="inline-flex rounded-lg p-0.5" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}>
                         {PROFONDEURS.map((p) => (
                             <button
@@ -345,7 +345,7 @@ export function AssortmentGapsModal({ classement, critereId, mois, magasinInitia
                         ))}
                     </div>
                     {classement.length < profondeur && (
-                        <span className="text-[11.5px]" style={{ color: "var(--text-muted)" }}>
+                        <span className="text-xs" style={{ color: "var(--text-muted)" }}>
                             ({classement.length} lignes affichées seulement)
                         </span>
                     )}
@@ -420,13 +420,13 @@ export function AssortmentGapsModal({ classement, critereId, mois, magasinInitia
                                 <tr key={row.codein} style={{ borderTop: "1px solid var(--border)" }}>
                                     <td className="px-2.5 py-1.5 text-right tabular-nums" style={{ color: "var(--text-muted)" }}>{rang}</td>
                                     <td className="px-2.5 py-1.5 tabular-nums font-semibold whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>{row.codein}</td>
-                                    <td className="px-2.5 py-1.5 font-mono text-[11.5px] whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
+                                    <td className="px-2.5 py-1.5 font-mono text-xs whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
                                         {row.reference || "—"}
                                     </td>
                                     <td className="px-2.5 py-1.5" style={{ color: "var(--text-primary)" }} title={row.libelle1}>
                                         <span className="font-semibold">{row.libelle1}</span>
                                         {row.libelle3 && (
-                                            <span className="ml-1.5 text-[10.5px]" style={{ color: "var(--text-muted)" }}>{row.libelle3}</span>
+                                            <span className="ml-1.5 text-xs" style={{ color: "var(--text-muted)" }}>{row.libelle3}</span>
                                         )}
                                     </td>
                                     <td className="px-2.5 py-1.5 text-right tabular-nums font-semibold whitespace-nowrap" style={{ color: "var(--text-primary)" }}>
@@ -449,7 +449,7 @@ export function AssortmentGapsModal({ classement, critereId, mois, magasinInitia
                 </div>
             )}
 
-            <p className="text-[11.5px] leading-snug" style={{ color: "var(--text-muted)" }}>
+            <p className="text-xs leading-snug" style={{ color: "var(--text-muted)" }}>
                 Non travaillé = aucune vente sur les 12 mois glissants ET aucun stock au dernier mois connu, à {nomMagasin}.
                 Un produit sans vente mais en stock n&apos;apparaît pas ici : le magasin le détient, c&apos;est un invendu, pas un trou d&apos;assortiment.
             </p>