feat(ui): lot 2 — socle visuel, menu regroupé et composants communs

Thème
- Clair par défaut ; les classes dark: suivent le bouton de thème (et non
  plus le réglage du système) ; animations tw-animate-css enfin importées.
- Couleurs shadcn branchées sur les variables (survols des menus visibles),
  libellés gris au contraste AA dans les deux thèmes, fond plein pour le
  menu et l'en-tête.

Composants partagés (src/components/ui)
- PageHeader, Card/Field, StatCard, Badge/DeltaBadge/StoreBadge/GammeBadge,
  Tabs/Segmented/useUrlTab, Select/SearchInput, EmptyState/ErrorState/
  Skeleton, Tooltip/Terme (glossaire), toast et confirmer, Pagination,
  DataTable (recherche, filtres, tri, pagination, export, totaux).
- Sources uniques : magasins, gammes (avec leur sens), glossaire, seuils de
  marge, export Excel.

Navigation
- Menu groupé (Au quotidien / Analyses / Suivi / Administration), déplié
  par défaut, libellés en français.
- En-tête : nom de la page, thème, menu du compte avec le vrai nom, la
  hauteur des lignes de la Grille et la déconnexion. La recherche globale,
  qui ne filtrait que la Grille, est retirée.
- Page Historique (sessions + exports) ; /snapshots et /exports y
  redirigent.
- Squelettes de chargement au lieu de la fenêtre plein écran, pages
  d'erreur et « introuvable » en français, arrivée sur l'Accueil après
  connexion.

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

src/components/ui/badge.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from "react";
+import { TrendingDown, TrendingUp, Minus } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { nomMagasin } from "@/lib/magasins";
+import { CLASSES_SANS_GAMME, trouverGamme } from "@/lib/gammes";
+import { fmtDecimal1 } from "@/lib/format";
+
+export type Ton = "neutre" | "accent" | "succes" | "alerte" | "erreur" | "info";
+
+const TONS: Record<Ton, string> = {
+    neutre: "bg-[var(--bg-elevated)] text-[var(--text-secondary)] border-[var(--border)]",
+    accent: "bg-[var(--accent-bg)] text-[var(--accent)] border-[var(--accent-border)]",
+    succes: "bg-[var(--accent-success-bg)] text-[var(--accent-success)] border-[var(--accent-success)]/30",
+    alerte: "bg-[var(--accent-warning-bg)] text-[var(--accent-warning)] border-[var(--accent-warning)]/30",
+    erreur: "bg-[var(--accent-error-bg)] text-[var(--accent-error)] border-[var(--accent-error)]/30",
+    info: "bg-[var(--accent-bg)] text-[var(--viz-1)] border-[var(--border)]",
+};
+
+export function Badge({ ton = "neutre", children, className, title }: {
+    ton?: Ton;
+    children: ReactNode;
+    className?: string;
+    title?: string;
+}) {
+    return (
+        <span
+            title={title}
+            className={cn(
+                "inline-flex items-center gap-1 whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-semibold",
+                TONS[ton],
+                className,
+            )}
+        >
+            {children}
+        </span>
+    );
+}
+
+/**
+ * Évolution en pourcentage (vs N-1) : flèche, signe et couleur. `null` (pas de
+ * base de comparaison) s'affiche « — » plutôt qu'un faux 0 %.
+ */
+export function DeltaBadge({ pct, className }: { pct: number | null | undefined; className?: string }) {
+    if (pct == null || !Number.isFinite(pct)) {
+        return <Badge className={className} title="Pas de comparaison possible">—</Badge>;
+    }
+    const ton: Ton = pct > 0.05 ? "succes" : pct < -0.05 ? "erreur" : "neutre";
+    const Icone = pct > 0.05 ? TrendingUp : pct < -0.05 ? TrendingDown : Minus;
+    return (
+        <Badge ton={ton} className={cn("tabular-nums", className)}>
+            <Icone className="h-3.5 w-3.5" aria-hidden />
+            {pct > 0 ? "+" : ""}{fmtDecimal1(pct)} %
+        </Badge>
+    );
+}
+
+/** Nom du magasin, jamais son code brut. */
+export function StoreBadge({ code, court = false }: { code: string | null | undefined; court?: boolean }) {
+    return <Badge ton="accent">{nomMagasin(code, { court })}</Badge>;
+}
+
+/** Pastille de gamme avec, au besoin, son nom (« A — Cœur »). */
+export function GammeBadge({ code, avecNom = false }: { code: string | null | undefined; avecNom?: boolean }) {
+    const g = trouverGamme(code);
+    return (
+        <span
+            title={g ? `${g.code} — ${g.nom} : ${g.description}` : "Aucune gamme"}
+            className={cn(
+                "inline-flex items-center gap-1 whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-bold",
+                g ? g.classes : CLASSES_SANS_GAMME,
+            )}
+        >
+            {g ? g.code : "—"}
+            {avecNom && <span className="font-medium">{g ? g.nom : "Sans gamme"}</span>}
+        </span>
+    );
+}