perf(stock): onglets instantanés, pagination et fournisseur de dernière entrée

Le changement d'onglet déclenchait un router.push : la page serveur était
rejouée et les 3 requêtes SQL relancées à chaque clic, alors que les données
étaient déjà côté client. Sans aucun retour visuel, l'onglet semblait bloqué.

Interface (stock-negatif/client.tsx)
- Changement d'onglet purement client (useTransition + history.replaceState) :
  plus aucune requête SQL rejouée, l'URL reste partageable.
- Modal de chargement pendant le changement de magasin (seule action qui
  interroge vraiment le serveur), pendant un changement d'onglet lent et
  pendant la génération de l'export Excel. Affichage différé de 120 ms pour
  éviter tout clignotement.
- Pagination 50 lignes : l'onglet « Sans vente 6 mois » rendait jusqu'à 17 000
  lignes d'un coup, ce qui figeait le navigateur. L'export Excel continue de
  reprendre l'intégralité des lignes filtrées.
- Tri : ordre de la base conservé tant qu'aucune colonne n'est cliquée (le tri
  alphabétique sur codein écrasait le classement métier), collateur Intl
  réutilisé au lieu d'un localeCompare par comparaison, tri numérique robuste
  aux valeurs nulles.
- Les 3 onglets partagent désormais un composant de tableau unique piloté par
  une configuration de colonnes, au lieu de 3 copies quasi identiques.
- Select magasin et onglets désactivés pendant le chargement, aria-busy posé.

Données (pg-ff-client.ts)
- Un article n'est plus rattaché à son fournisseur principal mais au
  fournisseur de sa dernière entrée en stock : s'il est rentré chez un autre
  fournisseur, il n'apparaît plus sous le précédent. La colonne de mvtart qui
  porte ce lien est détectée une fois par process parmi une liste blanche
  (même principe que getNomenclatureParentCol), avec repli documenté sur
  artfou1.preference = 1 si la base ne porte pas l'information.
- La jointure latérale sur la dernière entrée remplace la sous-requête
  corrélée MAX(datmvt) : même coût qu'avant pour une information de plus.
- pgGetStockSansVente dédoublonne artfou1 via DISTINCT ON comme ses deux
  requêtes sœurs, et exclut les stocks nuls en SQL (HAVING) au lieu de les
  filtrer côté client : le compteur d'onglet correspond enfin aux lignes
  réellement transmises.

Diagnostic
- GET /api/diag/stock-fournisseur : colonne détectée, colonnes réelles de
  mvtart et échantillon comparant fournisseur principal et fournisseur de
  dernière entrée.

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

scripts/db-init.js

@@ -122,6 +122,87 @@ async function main() {
         `);
         console.log("[DB Init] Table qlik_network_metrics is verified/created.");
 
+        // Instantané persisté de la grille : lu par /api/v1 pour ne jamais
+        // déclencher de recalcul. Rempli en effet de bord par getProductRows().
+        await tempPool.query(`
+            CREATE TABLE IF NOT EXISTS "grid_rows" (
+                "code_fournisseur" varchar(20) NOT NULL,
+                "codein" varchar(20) NOT NULL,
+                "nom_fournisseur" varchar(255),
+                "libelle1" varchar(500),
+                "gtin" varchar(30),
+                "reference" varchar(100),
+                "code_centrale" varchar(20),
+                "code1" varchar(20),
+                "code2" varchar(20),
+                "code3" varchar(20),
+                "code_gamme" varchar(20),
+                "code_gamme_init" varchar(20),
+                "total_ca" numeric(16, 2),
+                "total_quantite" numeric(14, 2),
+                "total_marge" numeric(16, 2),
+                "taux_marge" numeric(8, 4),
+                "stock_actuel" numeric(14, 2),
+                "ca_reseau" numeric(16, 2),
+                "qte_reseau" numeric(14, 2),
+                "nb_magasins_reseau" integer,
+                "ca_par_magasin_reseau" numeric(16, 2),
+                "marge_pct_reseau" numeric(8, 4),
+                "payload" jsonb NOT NULL,
+                "computed_at" timestamp DEFAULT now() NOT NULL
+            );
+            CREATE UNIQUE INDEX IF NOT EXISTS "uq_grid_rows_fou_codein"
+                ON "grid_rows" ("code_fournisseur", "codein");
+            CREATE INDEX IF NOT EXISTS "idx_grid_rows_fournisseur" ON "grid_rows" ("code_fournisseur");
+            CREATE INDEX IF NOT EXISTS "idx_grid_rows_codein" ON "grid_rows" ("codein");
+            CREATE INDEX IF NOT EXISTS "idx_grid_rows_gamme" ON "grid_rows" ("code_gamme");
+            CREATE INDEX IF NOT EXISTS "idx_grid_rows_code_centrale" ON "grid_rows" ("code_centrale");
+            CREATE INDEX IF NOT EXISTS "idx_grid_rows_total_ca" ON "grid_rows" ("total_ca");
+            CREATE INDEX IF NOT EXISTS "idx_grid_rows_libelle" ON "grid_rows" ("libelle1");
+        `);
+        console.log("[DB Init] Table grid_rows is verified/created.");
+
+        // Clés d'API : seul le hachage SHA-256 est stocké.
+        await tempPool.query(`
+            CREATE TABLE IF NOT EXISTS "api_keys" (
+                "id" serial PRIMARY KEY NOT NULL,
+                "name" varchar(100) NOT NULL,
+                "key_prefix" varchar(20) NOT NULL,
+                "key_hash" text NOT NULL UNIQUE,
+                "role" varchar(20) DEFAULT 'user' NOT NULL,
+                "created_by" varchar(50),
+                "created_at" timestamp DEFAULT now(),
+                "last_used_at" timestamp,
+                "revoked_at" timestamp
+            );
+        `);
+        console.log("[DB Init] Table api_keys is verified/created.");
+
+        // Paramétrage et suivi de la synchronisation nocturne, par fournisseur.
+        await tempPool.query(`
+            CREATE TABLE IF NOT EXISTS "sync_fournisseurs" (
+                "code_fournisseur" varchar(20) PRIMARY KEY NOT NULL,
+                "nom_fournisseur" varchar(255),
+                "actif_sql" boolean NOT NULL DEFAULT true,
+                "actif_qlik" boolean NOT NULL DEFAULT true,
+                "desactive_motif" text,
+                "dernier_sql_at" timestamp,
+                "dernier_sql_statut" varchar(20),
+                "dernier_sql_lignes" integer,
+                "dernier_sql_erreur" text,
+                "dernier_sql_ms" integer,
+                "dernier_qlik_at" timestamp,
+                "dernier_qlik_statut" varchar(20),
+                "dernier_qlik_codes" integer,
+                "dernier_qlik_erreur" text,
+                "dernier_qlik_ms" integer,
+                "updated_at" timestamp DEFAULT now()
+            );
+            CREATE INDEX IF NOT EXISTS "idx_sync_fou_sql" ON "sync_fournisseurs" ("actif_sql", "dernier_sql_at");
+            CREATE INDEX IF NOT EXISTS "idx_sync_fou_qlik" ON "sync_fournisseurs" ("actif_qlik", "dernier_qlik_at");
+        `);
+        console.log("[DB Init] Table sync_fournisseurs is verified/created.");
+
         await tempPool.end();
         console.log("[DB Init] Initialization successful. Exiting.");
         process.exit(0);

src/app/(dashboard)/admin/ai-chat/page.tsx

@@ -1,528 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect, useCallback } from "react";
-import { Send, Bot, User, Database, Loader2, AlertCircle, ChevronDown, Trash2, DollarSign } from "lucide-react";
-import { cn } from "@/lib/utils";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-
-// Strip HTML tags and convert common HTML constructs to Markdown equivalents
-function htmlToMarkdown(text: string): string {
-    return text
-        // Block-level → markdown
-        .replace(/<h([1-6])[^>]*>(.*?)<\/h\1>/gis, (_, level, content) => `${"#".repeat(Number(level))} ${content.replace(/<[^>]+>/g, "")}\n`)
-        .replace(/<strong[^>]*>(.*?)<\/strong>/gis, "**$1**")
-        .replace(/<b[^>]*>(.*?)<\/b>/gis, "**$1**")
-        .replace(/<em[^>]*>(.*?)<\/em>/gis, "*$1*")
-        .replace(/<i[^>]*>(.*?)<\/i>/gis, "*$1*")
-        .replace(/<code[^>]*>(.*?)<\/code>/gis, "`$1`")
-        .replace(/<pre[^>]*>(.*?)<\/pre>/gis, (_, c) => "```\n" + c.replace(/<[^>]+>/g, "") + "\n```")
-        .replace(/<li[^>]*>(.*?)<\/li>/gis, "- $1")
-        .replace(/<ul[^>]*>|<\/ul>/gis, "")
-        .replace(/<ol[^>]*>|<\/ol>/gis, "")
-        .replace(/<tr[^>]*>/gis, "")
-        .replace(/<\/tr>/gis, "\n")
-        .replace(/<th[^>]*>(.*?)<\/th>/gis, "| **$1** ")
-        .replace(/<td[^>]*>(.*?)<\/td>/gis, "| $1 ")
-        .replace(/<table[^>]*>|<\/table>|<thead[^>]*>|<\/thead>|<tbody[^>]*>|<\/tbody>/gis, "")
-        .replace(/<br\s*\/?>/gis, "\n")
-        .replace(/<p[^>]*>(.*?)<\/p>/gis, "$1\n\n")
-        .replace(/<div[^>]*>(.*?)<\/div>/gis, "$1\n")
-        .replace(/<a[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/gis, "[$2]($1)")
-        // Strip any remaining tags
-        .replace(/<[^>]+>/g, "")
-        // Decode HTML entities
-        .replace(/&amp;/g, "&")
-        .replace(/&lt;/g, "<")
-        .replace(/&gt;/g, ">")
-        .replace(/&quot;/g, '"')
-        .replace(/&#39;/g, "'")
-        .replace(/&nbsp;/g, " ")
-        // Clean up excessive blank lines
-        .replace(/\n{3,}/g, "\n\n")
-        .trim();
-}
-
-interface ModelInfo {
-    id: string;
-    name: string;
-    free: boolean;
-    promptPrice: number;   // $ per token
-    completionPrice: number;
-}
-
-interface ToolEvent {
-    name: string;
-    args: Record<string, unknown>;
-    result?: string;
-}
-
-interface Message {
-    role: "user" | "assistant";
-    content: string;
-    toolEvents?: ToolEvent[];
-}
-
-interface SessionUsage {
-    promptTokens: number;
-    completionTokens: number;
-    costUsd: number;
-}
-
-const DEFAULT_MODEL = "google/gemini-2.0-flash-001";
-
-// Compute cost from token counts and model pricing
-function computeCost(promptTokens: number, completionTokens: number, model: ModelInfo | null): number {
-    if (!model) return 0;
-    return promptTokens * model.promptPrice + completionTokens * model.completionPrice;
-}
-
-function formatCost(usd: number): string {
-    if (usd === 0) return "Gratuit";
-    if (usd < 0.001) return `$${(usd * 1000).toFixed(4)}m`;
-    return `$${usd.toFixed(6)}`;
-}
-
-function ToolCallBlock({ event }: { event: ToolEvent }) {
-    const [open, setOpen] = useState(false);
-
-    const label = event.name === "execute_sql"
-        ? `SQL: ${String(event.args.query ?? "").substring(0, 60)}${String(event.args.query ?? "").length > 60 ? "…" : ""}`
-        : event.name === "get_db_schema"
-            ? "Schéma DB"
-            : event.name;
-
-    return (
-        <div className="my-1 rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] overflow-hidden text-xs">
-            <button
-                onClick={() => setOpen(!open)}
-                className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-[var(--bg-base)] transition-colors"
-            >
-                <Database className="w-3.5 h-3.5 text-[var(--accent)] shrink-0" />
-                <span className="flex-1 text-[var(--text-secondary)] font-mono truncate">{label}</span>
-                <ChevronDown className={cn("w-3.5 h-3.5 text-[var(--text-muted)] transition-transform", open && "rotate-180")} />
-            </button>
-            {open && event.result && (
-                <pre className="px-3 pb-3 pt-1 text-[10px] text-[var(--text-secondary)] overflow-x-auto whitespace-pre-wrap break-words max-h-48 overflow-y-auto">
-                    {event.result}
-                </pre>
-            )}
-        </div>
-    );
-}
-
-function MessageBubble({ msg }: { msg: Message }) {
-    const isUser = msg.role === "user";
-
-    return (
-        <div className={cn("flex gap-3 mb-4", isUser && "flex-row-reverse")}>
-            {/* Avatar */}
-            <div className={cn(
-                "w-8 h-8 rounded-full flex items-center justify-center shrink-0 mt-0.5",
-                isUser ? "bg-[var(--accent)] text-white" : "bg-[var(--bg-elevated)] border border-[var(--border)]"
-            )}>
-                {isUser
-                    ? <User className="w-4 h-4" />
-                    : <Bot className="w-4 h-4 text-[var(--accent)]" />
-                }
-            </div>
-
-            {/* Content */}
-            <div className={cn("flex-1 max-w-[85%]", isUser && "flex flex-col items-end")}>
-                {/* Tool events (assistant only) */}
-                {msg.toolEvents && msg.toolEvents.length > 0 && (
-                    <div className="w-full mb-2">
-                        {msg.toolEvents.map((ev, i) => (
-                            <ToolCallBlock key={i} event={ev} />
-                        ))}
-                    </div>
-                )}
-
-                {/* Text bubble */}
-                {msg.content && (
-                    <div className={cn(
-                        "rounded-2xl px-4 py-3 text-sm leading-relaxed break-words",
-                        isUser
-                            ? "bg-[var(--accent)] text-white rounded-tr-md"
-                            : "bg-[var(--bg-elevated)] border border-[var(--border)] text-[var(--text-primary)] rounded-tl-md"
-                    )}>
-                        {isUser ? msg.content : (
-                            <ReactMarkdown
-                                remarkPlugins={[remarkGfm]}
-                                components={{
-                                    p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
-                                    h1: ({ children }) => <h1 className="text-base font-bold mb-2 mt-3 first:mt-0">{children}</h1>,
-                                    h2: ({ children }) => <h2 className="text-sm font-bold mb-2 mt-3 first:mt-0">{children}</h2>,
-                                    h3: ({ children }) => <h3 className="text-sm font-semibold mb-1 mt-2 first:mt-0">{children}</h3>,
-                                    ul: ({ children }) => <ul className="list-disc list-inside mb-2 space-y-0.5">{children}</ul>,
-                                    ol: ({ children }) => <ol className="list-decimal list-inside mb-2 space-y-0.5">{children}</ol>,
-                                    li: ({ children }) => <li className="ml-2">{children}</li>,
-                                    code: ({ inline, children }: { inline?: boolean; children?: React.ReactNode }) =>
-                                        inline
-                                            ? <code className="px-1 py-0.5 rounded bg-[var(--bg-base)] border border-[var(--border)] font-mono text-xs text-[var(--accent)]">{children}</code>
-                                            : <pre className="my-2 p-3 rounded-lg bg-[var(--bg-base)] border border-[var(--border)] overflow-x-auto"><code className="font-mono text-xs text-[var(--text-primary)] whitespace-pre">{children}</code></pre>,
-                                    strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
-                                    em: ({ children }) => <em className="italic">{children}</em>,
-                                    blockquote: ({ children }) => <blockquote className="border-l-2 border-[var(--accent)] pl-3 my-2 text-[var(--text-secondary)] italic">{children}</blockquote>,
-                                    table: ({ children }) => <div className="overflow-x-auto my-2"><table className="w-full text-xs border-collapse">{children}</table></div>,
-                                    thead: ({ children }) => <thead className="bg-[var(--bg-base)]">{children}</thead>,
-                                    th: ({ children }) => <th className="border border-[var(--border)] px-2 py-1 text-left font-semibold">{children}</th>,
-                                    td: ({ children }) => <td className="border border-[var(--border)] px-2 py-1">{children}</td>,
-                                    hr: () => <hr className="border-[var(--border)] my-3" />,
-                                    a: ({ href, children }) => <a href={href} target="_blank" rel="noopener noreferrer" className="text-[var(--accent)] underline hover:opacity-80">{children}</a>,
-                                }}
-                            >
-                                {htmlToMarkdown(msg.content)}
-                            </ReactMarkdown>
-                        )}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}
-
-
-export default function AdminAiChatPage() {
-    const [models, setModels] = useState<ModelInfo[]>([]);
-    const [selectedModel, setSelectedModel] = useState<string>(DEFAULT_MODEL);
-    const [aiProvider, setAiProviderState] = useState<"openrouter" | "google">("openrouter");
-    const [messages, setMessages] = useState<Message[]>([]);
-    const [input, setInput] = useState("");
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [loadingModels, setLoadingModels] = useState(true);
-    const [sessionUsage, setSessionUsage] = useState<SessionUsage>({ promptTokens: 0, completionTokens: 0, costUsd: 0 });
-
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const abortRef = useRef<AbortController | null>(null);
-
-    const selectedModelInfo = models.find(m => m.id === selectedModel) ?? null;
-
-    // Fetch config + models
-    useEffect(() => {
-        setLoadingModels(true);
-        fetch("/api/admin/ai-config")
-            .then(r => r.json())
-            .then(async d => {
-                const provider: "openrouter" | "google" = d.provider ?? "openrouter";
-                setAiProviderState(provider);
-                if (provider === "google") {
-                    const gRes = await fetch("/api/google-ai/models").then(r => r.json()).catch(() => ({ models: [] }));
-                    setModels((gRes.models ?? []).map((m: { id: string; name: string }) => ({
-                        id: m.id, name: m.name, free: false, promptPrice: 0, completionPrice: 0,
-                    })));
-                    setSelectedModel(d.googleAiModel ?? "gemini-2.0-flash");
-                } else {
-                    const od = await fetch("/api/openrouter/models").then(r => r.json()).catch(() => ({ models: [] }));
-                    if (od.models) setModels(od.models);
-                    if (d.openRouterModel) setSelectedModel(d.openRouterModel);
-                }
-            })
-            .catch(async () => {
-                const od = await fetch("/api/openrouter/models").then(r => r.json()).catch(() => ({ models: [] }));
-                if (od.models) setModels(od.models);
-            })
-            .finally(() => setLoadingModels(false));
-    }, []);
-
-    // Auto-scroll
-    useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-    }, [messages, loading]);
-
-    const sendMessage = useCallback(async () => {
-        if (!input.trim() || loading) return;
-
-        const userMsg: Message = { role: "user", content: input.trim() };
-        setInput("");
-        setError(null);
-        setMessages(prev => [...prev, userMsg]);
-        setLoading(true);
-
-        // Build messages to send (excluding tool events, which are local display only)
-        const apiMessages = [...messages, userMsg].map(m => ({
-            role: m.role,
-            content: m.content,
-        }));
-
-        const assistantMsg: Message = { role: "assistant", content: "", toolEvents: [] };
-        setMessages(prev => [...prev, assistantMsg]);
-
-        abortRef.current = new AbortController();
-
-        try {
-            const res = await fetch("/api/admin/ai-chat", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ messages: apiMessages, model: selectedModel }),
-                signal: abortRef.current.signal,
-            });
-
-            if (!res.ok) {
-                const err = await res.json();
-                throw new Error(err.error || "Erreur serveur");
-            }
-
-            const reader = res.body!.getReader();
-            const decoder = new TextDecoder();
-            let buffer = "";
-            const pendingToolEvents: ToolEvent[] = [];
-            let lastToolStart: ToolEvent | null = null;
-
-            while (true) {
-                const { done, value } = await reader.read();
-                if (done) break;
-
-                buffer += decoder.decode(value, { stream: true });
-                const lines = buffer.split("\n");
-                buffer = lines.pop() ?? "";
-
-                for (const line of lines) {
-                    if (!line.startsWith("data: ")) continue;
-                    const raw = line.slice(6).trim();
-                    try {
-                        const event = JSON.parse(raw);
-
-                        if (event.type === "text") {
-                            setMessages(prev => {
-                                const copy = [...prev];
-                                const last = { ...copy[copy.length - 1] };
-                                last.content += event.content;
-                                copy[copy.length - 1] = last;
-                                return copy;
-                            });
-                        } else if (event.type === "tool_start") {
-                            lastToolStart = { name: event.name, args: event.args };
-                        } else if (event.type === "tool_result") {
-                            if (lastToolStart) {
-                                const ev: ToolEvent = { ...lastToolStart, result: event.result };
-                                pendingToolEvents.push(ev);
-                                lastToolStart = null;
-                                setMessages(prev => {
-                                    const copy = [...prev];
-                                    const last = { ...copy[copy.length - 1] };
-                                    last.toolEvents = [...pendingToolEvents];
-                                    copy[copy.length - 1] = last;
-                                    return copy;
-                                });
-                            }
-                        } else if (event.type === "usage") {
-                            const pt = event.prompt_tokens ?? 0;
-                            const ct = event.completion_tokens ?? 0;
-                            const cost = computeCost(pt, ct, selectedModelInfo);
-                            setSessionUsage(prev => ({
-                                promptTokens: prev.promptTokens + pt,
-                                completionTokens: prev.completionTokens + ct,
-                                costUsd: prev.costUsd + cost,
-                            }));
-                        } else if (event.type === "error") {
-                            setError(event.message);
-                        }
-                    } catch { /* ignore */ }
-                }
-            }
-        } catch (err) {
-            if ((err as Error).name !== "AbortError") {
-                setError(err instanceof Error ? err.message : "Erreur inconnue");
-            }
-        } finally {
-            setLoading(false);
-        }
-    }, [input, loading, messages, selectedModel, selectedModelInfo]);
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            sendMessage();
-        }
-    };
-
-    const clearConversation = () => {
-        setMessages([]);
-        setSessionUsage({ promptTokens: 0, completionTokens: 0, costUsd: 0 });
-        setError(null);
-        if (loading && abortRef.current) {
-            abortRef.current.abort();
-            setLoading(false);
-        }
-    };
-
-    return (
-        <div className="flex flex-col h-full max-h-full">
-            {/* Header */}
-            <div className="flex items-center justify-between mb-4 shrink-0">
-                <div>
-                    <h1 className="text-xl font-semibold text-[var(--text-primary)] flex items-center gap-2">
-                        <Bot className="w-5 h-5 text-[var(--accent)]" />
-                        Admin AI Chat
-                    </h1>
-                    <p className="text-xs text-[var(--text-muted)] mt-0.5">
-                        Accès direct à la base de données · Admin uniquement
-                    </p>
-                </div>
-
-                {/* Usage / Cost */}
-                <div className="flex items-center gap-3">
-                    <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[var(--bg-elevated)] border border-[var(--border)] text-xs text-[var(--text-secondary)]">
-                        <DollarSign className="w-3.5 h-3.5 text-[var(--accent)]" />
-                        <span className="font-mono font-semibold">{formatCost(sessionUsage.costUsd)}</span>
-                        <span className="text-[var(--text-muted)]">session</span>
-                        {sessionUsage.promptTokens > 0 && (
-                            <span className="text-[var(--text-muted)] ml-1">
-                                ({sessionUsage.promptTokens + sessionUsage.completionTokens} tok)
-                            </span>
-                        )}
-                    </div>
-
-                    <button
-                        onClick={clearConversation}
-                        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--border)] text-xs text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] transition-colors"
-                    >
-                        <Trash2 className="w-3.5 h-3.5" />
-                        Effacer
-                    </button>
-                </div>
-            </div>
-
-            {/* Model selector */}
-            <div className="mb-4 shrink-0">
-                <div className="flex items-center gap-3 p-3 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border)]">
-                    <span className={cn(
-                        "text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0",
-                        aiProvider === "google"
-                            ? "bg-blue-500/10 text-blue-500"
-                            : "bg-[var(--accent-bg)] text-[var(--accent)]"
-                    )}>
-                        {aiProvider === "google" ? "Google AI" : "OpenRouter"}
-                    </span>
-                    {loadingModels ? (
-                        <div className="flex items-center gap-2 text-xs text-[var(--text-muted)]">
-                            <Loader2 className="w-3.5 h-3.5 animate-spin" />
-                            Chargement des modèles…
-                        </div>
-                    ) : (
-                        <div className="flex items-center gap-3 flex-1 min-w-0">
-                            <select
-                                value={selectedModel}
-                                onChange={e => setSelectedModel(e.target.value)}
-                                className="flex-1 min-w-0 text-sm bg-transparent text-[var(--text-primary)] border-none outline-none cursor-pointer"
-                            >
-                                {models.map(m => (
-                                    <option key={m.id} value={m.id}>
-                                        {m.name} {m.free ? "(Gratuit)" : ""}
-                                    </option>
-                                ))}
-                            </select>
-                            {selectedModelInfo && !selectedModelInfo.free && (
-                                <div className="flex items-center gap-2 text-[10px] text-[var(--text-muted)] shrink-0 font-mono">
-                                    <span>in: ${(selectedModelInfo.promptPrice * 1_000_000).toFixed(2)}/M</span>
-                                    <span>·</span>
-                                    <span>out: ${(selectedModelInfo.completionPrice * 1_000_000).toFixed(2)}/M</span>
-                                </div>
-                            )}
-                            {selectedModelInfo?.free && (
-                                <span className="text-[10px] text-emerald-500 font-semibold shrink-0">GRATUIT</span>
-                            )}
-                        </div>
-                    )}
-                </div>
-            </div>
-
-            {/* Messages */}
-            <div className="flex-1 overflow-y-auto min-h-0 rounded-xl bg-[var(--bg-base)] border border-[var(--border)] p-4">
-                {messages.length === 0 && (
-                    <div className="h-full flex flex-col items-center justify-center text-center gap-4">
-                        <div className="w-16 h-16 rounded-2xl bg-[var(--accent-bg)] border border-[var(--accent-border)] flex items-center justify-center">
-                            <Bot className="w-8 h-8 text-[var(--accent)]" />
-                        </div>
-                        <div>
-                            <p className="text-[var(--text-primary)] font-medium mb-1">Assistant Admin CollectFlow</p>
-                            <p className="text-sm text-[var(--text-muted)] max-w-md">
-                                Posez des questions sur vos données, demandez des analyses, ou explorez la base de données.
-                            </p>
-                        </div>
-                        <div className="grid grid-cols-2 gap-2 max-w-lg mt-2">
-                            {[
-                                "Combien de produits par fournisseur ?",
-                                "Quels sont les 10 produits avec le plus de CA ?",
-                                "Montre-moi les snapshots récents",
-                                "Répartition des gammes A/B/C/D/Z",
-                            ].map(suggestion => (
-                                <button
-                                    key={suggestion}
-                                    onClick={() => { setInput(suggestion); textareaRef.current?.focus(); }}
-                                    className="text-xs text-left px-3 py-2 rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] hover:bg-[var(--bg-base)] text-[var(--text-secondary)] transition-colors"
-                                >
-                                    {suggestion}
-                                </button>
-                            ))}
-                        </div>
-                    </div>
-                )}
-
-                {messages.map((msg, i) => (
-                    <MessageBubble key={i} msg={msg} />
-                ))}
-
-                {loading && messages[messages.length - 1]?.role !== "assistant" && (
-                    <div className="flex gap-3 mb-4">
-                        <div className="w-8 h-8 rounded-full flex items-center justify-center bg-[var(--bg-elevated)] border border-[var(--border)]">
-                            <Bot className="w-4 h-4 text-[var(--accent)]" />
-                        </div>
-                        <div className="flex items-center gap-1.5 px-4 py-3 rounded-2xl rounded-tl-md bg-[var(--bg-elevated)] border border-[var(--border)]">
-                            <span className="w-1.5 h-1.5 bg-[var(--accent)] rounded-full animate-bounce [animation-delay:0ms]" />
-                            <span className="w-1.5 h-1.5 bg-[var(--accent)] rounded-full animate-bounce [animation-delay:150ms]" />
-                            <span className="w-1.5 h-1.5 bg-[var(--accent)] rounded-full animate-bounce [animation-delay:300ms]" />
-                        </div>
-                    </div>
-                )}
-
-                {error && (
-                    <div className="flex items-start gap-2 p-3 rounded-xl bg-[var(--accent-error-bg)] border border-[var(--accent-error-border,var(--border))] text-sm text-[var(--accent-error)] mb-4">
-                        <AlertCircle className="w-4 h-4 shrink-0 mt-0.5" />
-                        <span>{error}</span>
-                    </div>
-                )}
-
-                <div ref={messagesEndRef} />
-            </div>
-
-            {/* Input */}
-            <div className="mt-3 shrink-0">
-                <div className="flex items-end gap-2 p-2 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border)] focus-within:border-[var(--accent)] transition-colors">
-                    <textarea
-                        ref={textareaRef}
-                        value={input}
-                        onChange={e => setInput(e.target.value)}
-                        onKeyDown={handleKeyDown}
-                        placeholder="Posez une question… (Entrée pour envoyer, Shift+Entrée pour nouvelle ligne)"
-                        rows={1}
-                        className="flex-1 resize-none bg-transparent text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none py-2 px-2 max-h-32 overflow-y-auto"
-                        style={{ minHeight: "40px" }}
-                        onInput={(e) => {
-                            const el = e.currentTarget;
-                            el.style.height = "auto";
-                            el.style.height = Math.min(el.scrollHeight, 128) + "px";
-                        }}
-                        disabled={loading}
-                    />
-                    <button
-                        onClick={sendMessage}
-                        disabled={!input.trim() || loading}
-                        className="w-9 h-9 rounded-lg bg-[var(--accent)] text-white flex items-center justify-center hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0"
-                    >
-                        {loading
-                            ? <Loader2 className="w-4 h-4 animate-spin" />
-                            : <Send className="w-4 h-4" />
-                        }
-                    </button>
-                </div>
-                <p className="text-[10px] text-[var(--text-muted)] mt-1.5 text-center">
-                    L&apos;IA peut exécuter des requêtes SELECT sur la base de données · Les modifications ne sont pas autorisées
-                </p>
-            </div>
-        </div>
-    );
-}

src/app/(dashboard)/admin/synchronisation/client.tsx

@@ -0,0 +1,414 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+    CalendarClock, Play, Square, RefreshCw, Loader2, AlertTriangle,
+    CheckCircle, Database, Network, Search,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface SyncSettings {
+    actif: boolean;
+    heureDebut: number;
+    heureFin: number;
+    qlikParNuit: number;
+    sqlParQlik: number;
+    qlikMinJours: number;
+}
+
+interface SyncState {
+    enCours: boolean;
+    origine: "auto" | "manuel" | null;
+    debutAt: string | null;
+    finAt: string | null;
+    fournisseurCourant: string | null;
+    etape: "sql" | "qlik" | null;
+    sqlFaits: number;
+    sqlEchecs: number;
+    qlikFaits: number;
+    qlikEchecs: number;
+    tourTermine: boolean;
+    derniereErreur: string | null;
+}
+
+interface FournisseurRow {
+    codeFournisseur: string;
+    nomFournisseur: string | null;
+    actifSql: boolean;
+    actifQlik: boolean;
+    desactiveMotif: string | null;
+    dernierSqlAt: string | null;
+    dernierSqlStatut: string | null;
+    dernierSqlLignes: number | null;
+    dernierSqlMs: number | null;
+    dernierQlikAt: string | null;
+    dernierQlikStatut: string | null;
+    dernierQlikCodes: number | null;
+}
+
+interface Resume {
+    total: number; actifsSql: number; actifsQlik: number;
+    desactivesAuto: number; enEchecSql: number; enEchecQlik: number; jamaisSql: number;
+}
+
+const fmtDate = (iso: string | null) =>
+    iso ? new Date(iso).toLocaleString("fr-FR", { dateStyle: "short", timeStyle: "short" }) : "jamais";
+const fmtDuree = (ms: number | null) =>
+    ms == null ? "" : ms < 1000 ? `${ms} ms` : `${Math.round(ms / 1000)} s`;
+
+function Pastille({ statut }: { statut: string | null }) {
+    if (!statut) return <span className="text-[11px]" style={{ color: "var(--text-muted)" }}>—</span>;
+    const couleurs: Record<string, string> = {
+        succes: "text-emerald-500", echec: "text-red-500", vide: "text-amber-500",
+    };
+    const libelles: Record<string, string> = { succes: "ok", echec: "échec", vide: "vide" };
+    return <span className={cn("text-[11px] font-semibold", couleurs[statut] ?? "")}>{libelles[statut] ?? statut}</span>;
+}
+
+export function SynchronisationClient() {
+    const [settings, setSettings] = useState<SyncSettings | null>(null);
+    const [state, setState] = useState<SyncState | null>(null);
+    const [dansLaFenetre, setDansLaFenetre] = useState(false);
+    const [rows, setRows] = useState<FournisseurRow[]>([]);
+    const [resume, setResume] = useState<Resume | null>(null);
+    const [erreur, setErreur] = useState<string | null>(null);
+    const [chargement, setChargement] = useState(true);
+    const [recherche, setRecherche] = useState("");
+    const [filtre, setFiltre] = useState<"tous" | "actifs" | "inactifs" | "echecs">("tous");
+
+    // ── Lectures pures : aucun setState, pour rester appelables depuis un effet ──
+    const lireEtat = useCallback(async () => {
+        const res = await fetch("/api/admin/sync");
+        if (!res.ok) throw new Error((await res.json()).error ?? `Erreur ${res.status}`);
+        return res.json();
+    }, []);
+
+    const lireFournisseurs = useCallback(async () => {
+        const res = await fetch("/api/admin/sync/fournisseurs");
+        if (!res.ok) throw new Error((await res.json()).error ?? `Erreur ${res.status}`);
+        return res.json();
+    }, []);
+
+    const rafraichirEtat = useCallback(() => {
+        lireEtat()
+            .then((d) => { setSettings(d.settings); setState(d.state); setDansLaFenetre(d.dansLaFenetre); setErreur(null); })
+            .catch((e) => setErreur(e instanceof Error ? e.message : String(e)));
+    }, [lireEtat]);
+
+    const rafraichirTout = useCallback(() => {
+        Promise.all([lireEtat(), lireFournisseurs()])
+            .then(([e, f]) => {
+                setSettings(e.settings); setState(e.state); setDansLaFenetre(e.dansLaFenetre);
+                setRows(f.fournisseurs ?? []); setResume(f.resume ?? null); setErreur(null);
+            })
+            .catch((e) => setErreur(e instanceof Error ? e.message : String(e)))
+            .finally(() => setChargement(false));
+    }, [lireEtat, lireFournisseurs]);
+
+    useEffect(() => { rafraichirTout(); }, [rafraichirTout]);
+
+    // Suivi rapproché pendant un round : l'état change à chaque fournisseur.
+    useEffect(() => {
+        if (!state?.enCours) return;
+        const id = setInterval(rafraichirEtat, 3000);
+        return () => clearInterval(id);
+    }, [state?.enCours, rafraichirEtat]);
+
+    const majSettings = async (patch: Partial<SyncSettings>) => {
+        setErreur(null);
+        try {
+            const res = await fetch("/api/admin/sync", {
+                method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(patch),
+            });
+            const d = await res.json();
+            if (!res.ok) throw new Error(d.error ?? `Erreur ${res.status}`);
+            setSettings(d.settings);
+        } catch (e) { setErreur(e instanceof Error ? e.message : String(e)); }
+    };
+
+    const action = async (act: "start" | "stop" | "seed", forcer = false) => {
+        setErreur(null);
+        try {
+            const res = await fetch("/api/admin/sync", {
+                method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: act, forcer }),
+            });
+            const d = await res.json();
+            if (!res.ok) throw new Error(d.error ?? `Erreur ${res.status}`);
+            rafraichirTout();
+        } catch (e) { setErreur(e instanceof Error ? e.message : String(e)); }
+    };
+
+    const basculer = async (codes: string[], champ: "actifSql" | "actifQlik", valeur: boolean) => {
+        setErreur(null);
+        // Mise à jour optimiste : la liste peut compter des centaines de lignes,
+        // un rechargement complet à chaque case cochée serait pénible.
+        setRows((prev) => prev.map((r) => (codes.includes(r.codeFournisseur)
+            ? { ...r, [champ]: valeur, ...(valeur ? { desactiveMotif: null } : {}) }
+            : r)));
+        try {
+            const res = await fetch("/api/admin/sync/fournisseurs", {
+                method: "PATCH", headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ codes, [champ]: valeur }),
+            });
+            if (!res.ok) throw new Error((await res.json()).error ?? `Erreur ${res.status}`);
+        } catch (e) {
+            setErreur(e instanceof Error ? e.message : String(e));
+            rafraichirTout(); // l'optimisme était infondé : on resynchronise
+        }
+    };
+
+    const visibles = useMemo(() => {
+        const q = recherche.trim().toLowerCase();
+        return rows.filter((r) => {
+            if (q && !`${r.codeFournisseur} ${r.nomFournisseur ?? ""}`.toLowerCase().includes(q)) return false;
+            if (filtre === "actifs") return r.actifSql || r.actifQlik;
+            if (filtre === "inactifs") return !r.actifSql && !r.actifQlik;
+            if (filtre === "echecs") return r.dernierSqlStatut === "echec" || r.dernierQlikStatut === "echec";
+            return true;
+        });
+    }, [rows, recherche, filtre]);
+
+    const codesVisibles = useMemo(() => visibles.map((r) => r.codeFournisseur), [visibles]);
+
+    return (
+        <div className="min-h-screen p-6" style={{ background: "var(--bg-base)" }}>
+            <div className="mx-auto max-w-screen-xl">
+                <h1 className="text-2xl font-bold flex items-center gap-2" style={{ color: "var(--text-primary)" }}>
+                    <CalendarClock className="w-6 h-6" style={{ color: "var(--accent)" }} />
+                    Synchronisation nocturne
+                </h1>
+                <p className="text-[13px] mt-1 mb-5" style={{ color: "var(--text-muted)" }}>
+                    Les fournisseurs sont traités du plus anciennement synchronisé au plus récent. Si la fenêtre
+                    se referme avant la fin, la nuit suivante reprend là où on s&apos;est arrêté ; quand tout le
+                    monde est passé, un nouveau tour recommence.
+                </p>
+
+                {erreur && (
+                    <div className="rounded-xl p-3.5 mb-4 flex items-start gap-2.5 text-[13px]"
+                        style={{ background: "var(--accent-error-bg)", border: "1px solid var(--accent-error)", color: "var(--accent-error)" }}>
+                        <AlertTriangle className="w-4 h-4 shrink-0 mt-px" />
+                        <span>{erreur}</span>
+                    </div>
+                )}
+
+                {/* ── Réglages ── */}
+                {settings && (
+                    <div className="rounded-2xl p-4 mb-4" style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }}>
+                        <div className="flex flex-wrap items-end gap-4">
+                            <label className="flex items-center gap-2 cursor-pointer">
+                                <input type="checkbox" checked={settings.actif}
+                                    onChange={(e) => majSettings({ actif: e.target.checked })} className="w-4 h-4" />
+                                <span className="text-[13px] font-semibold" style={{ color: "var(--text-primary)" }}>
+                                    Synchronisation nocturne active
+                                </span>
+                            </label>
+
+                            <div className="flex items-end gap-2">
+                                <div>
+                                    <label className="block text-[11px] mb-1" style={{ color: "var(--text-muted)" }}>De</label>
+                                    <input type="number" min={0} max={23} value={settings.heureDebut}
+                                        onChange={(e) => majSettings({ heureDebut: Number(e.target.value) })}
+                                        className="w-16 rounded-lg px-2 py-1.5 text-[13px]"
+                                        style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }} />
+                                </div>
+                                <span className="pb-2 text-[13px]" style={{ color: "var(--text-muted)" }}>h à</span>
+                                <div>
+                                    <label className="block text-[11px] mb-1" style={{ color: "var(--text-muted)" }}>À</label>
+                                    <input type="number" min={0} max={23} value={settings.heureFin}
+                                        onChange={(e) => majSettings({ heureFin: Number(e.target.value) })}
+                                        className="w-16 rounded-lg px-2 py-1.5 text-[13px]"
+                                        style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }} />
+                                </div>
+                                <span className="pb-2 text-[13px]" style={{ color: "var(--text-muted)" }}>h</span>
+                            </div>
+
+                            <div>
+                                <label className="block text-[11px] mb-1" style={{ color: "var(--text-muted)" }}>Qlik / nuit</label>
+                                <input type="number" min={0} max={200} value={settings.qlikParNuit}
+                                    onChange={(e) => majSettings({ qlikParNuit: Number(e.target.value) })}
+                                    className="w-20 rounded-lg px-2 py-1.5 text-[13px]"
+                                    style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }} />
+                            </div>
+                            <div>
+                                <label className="block text-[11px] mb-1" style={{ color: "var(--text-muted)" }}>Qlik si + vieux que</label>
+                                <input type="number" min={0} max={365} value={settings.qlikMinJours}
+                                    onChange={(e) => majSettings({ qlikMinJours: Number(e.target.value) })}
+                                    className="w-20 rounded-lg px-2 py-1.5 text-[13px]"
+                                    style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }} />
+                            </div>
+
+                            <div className="flex-1" />
+
+                            {state?.enCours ? (
+                                <button onClick={() => action("stop")} className="rounded-xl px-4 py-2 text-[13px] font-semibold flex items-center gap-2"
+                                    style={{ background: "var(--accent-error-bg)", color: "var(--accent-error)", border: "1px solid var(--accent-error)" }}>
+                                    <Square className="w-3.5 h-3.5" /> Arrêter
+                                </button>
+                            ) : (
+                                <button onClick={() => action("start", !dansLaFenetre)} className="rounded-xl px-4 py-2 text-[13px] font-semibold text-white flex items-center gap-2"
+                                    style={{ background: "var(--accent)" }}>
+                                    <Play className="w-3.5 h-3.5" /> Lancer maintenant
+                                </button>
+                            )}
+                        </div>
+
+                        <p className="text-[11px] mt-3" style={{ color: "var(--text-muted)" }}>
+                            {dansLaFenetre
+                                ? "Nous sommes actuellement dans la fenêtre."
+                                : "Hors fenêtre — « Lancer maintenant » forcera un round immédiat."}
+                            {" "}Une extraction Qlik peut durer 8 minutes : le plafond par nuit évite qu&apos;elle
+                            monopolise la fenêtre. Un fournisseur déjà démarré n&apos;est jamais interrompu à l&apos;heure de fin.
+                        </p>
+                    </div>
+                )}
+
+                {/* ── Round en cours ── */}
+                {state && (state.enCours || state.finAt) && (
+                    <div className="rounded-2xl p-4 mb-4 text-[13px]"
+                        style={{ background: state.enCours ? "var(--accent-bg)" : "var(--bg-surface)", border: `1px solid ${state.enCours ? "var(--accent-border)" : "var(--border)"}` }}>
+                        <div className="flex items-center gap-2 flex-wrap">
+                            {state.enCours
+                                ? <Loader2 className="w-4 h-4 animate-spin" style={{ color: "var(--accent)" }} />
+                                : <CheckCircle className="w-4 h-4 text-emerald-500" />}
+                            <span className="font-semibold" style={{ color: "var(--text-primary)" }}>
+                                {state.enCours ? `Round ${state.origine} en cours` : "Dernier round terminé"}
+                            </span>
+                            {state.enCours && state.fournisseurCourant && (
+                                <span style={{ color: "var(--text-secondary)" }}>
+                                    — {state.etape === "qlik" ? "Qlik" : "SQL"} : {state.fournisseurCourant}
+                                </span>
+                            )}
+                        </div>
+                        <div className="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-[12px]" style={{ color: "var(--text-secondary)" }}>
+                            <span><Database className="w-3 h-3 inline mr-1" />SQL : {state.sqlFaits} ok{state.sqlEchecs > 0 && `, ${state.sqlEchecs} en échec`}</span>
+                            <span><Network className="w-3 h-3 inline mr-1" />Qlik : {state.qlikFaits} ok{state.qlikEchecs > 0 && `, ${state.qlikEchecs} en échec`}</span>
+                            {state.debutAt && <span>Début {fmtDate(state.debutAt)}</span>}
+                            {state.tourTermine && <span className="text-emerald-500 font-semibold">Tour bouclé — tout le monde est à jour</span>}
+                        </div>
+                        {state.derniereErreur && (
+                            <p className="mt-2 text-[11px] text-red-400">Dernière erreur : {state.derniereErreur}</p>
+                        )}
+                    </div>
+                )}
+
+                {/* ── Résumé ── */}
+                {resume && (
+                    <div className="flex flex-wrap gap-2 mb-3 text-[12px]">
+                        {[
+                            { l: "Fournisseurs", v: resume.total },
+                            { l: "Actifs SQL", v: resume.actifsSql },
+                            { l: "Actifs Qlik", v: resume.actifsQlik },
+                            { l: "Jamais synchronisés", v: resume.jamaisSql },
+                            { l: "Désactivés auto", v: resume.desactivesAuto },
+                            { l: "En échec", v: resume.enEchecSql + resume.enEchecQlik },
+                        ].map((s) => (
+                            <span key={s.l} className="rounded-lg px-2.5 py-1"
+                                style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
+                                {s.l} <strong style={{ color: "var(--text-primary)" }}>{s.v}</strong>
+                            </span>
+                        ))}
+                    </div>
+                )}
+
+                {/* ── Filtres et actions de masse ── */}
+                <div className="flex flex-wrap items-center gap-2 mb-3">
+                    <div className="relative">
+                        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5" style={{ color: "var(--text-muted)" }} />
+                        <input value={recherche} onChange={(e) => setRecherche(e.target.value)} placeholder="Code ou nom"
+                            className="rounded-lg pl-8 pr-3 py-1.5 text-[12px] w-56"
+                            style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }} />
+                    </div>
+                    {(["tous", "actifs", "inactifs", "echecs"] as const).map((f) => (
+                        <button key={f} onClick={() => setFiltre(f)}
+                            className="rounded-full px-3 py-1 text-[12px] font-semibold"
+                            style={{
+                                background: filtre === f ? "var(--accent)" : "var(--bg-elevated)",
+                                color: filtre === f ? "#fff" : "var(--text-secondary)",
+                                border: "1px solid var(--border)",
+                            }}>
+                            {f === "echecs" ? "en échec" : f}
+                        </button>
+                    ))}
+                    <div className="flex-1" />
+                    <span className="text-[11px]" style={{ color: "var(--text-muted)" }}>{visibles.length} affichés :</span>
+                    <button onClick={() => basculer(codesVisibles, "actifSql", true)} className="rounded-lg px-2.5 py-1 text-[11px]"
+                        style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
+                        Activer SQL
+                    </button>
+                    <button onClick={() => basculer(codesVisibles, "actifSql", false)} className="rounded-lg px-2.5 py-1 text-[11px]"
+                        style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
+                        Désactiver SQL
+                    </button>
+                    <button onClick={() => basculer(codesVisibles, "actifQlik", false)} className="rounded-lg px-2.5 py-1 text-[11px]"
+                        style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
+                        Désactiver Qlik
+                    </button>
+                    <button onClick={() => action("seed")} title="Récupérer les nouveaux fournisseurs du référentiel"
+                        className="rounded-lg px-2.5 py-1 text-[11px] flex items-center gap-1"
+                        style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
+                        <RefreshCw className="w-3 h-3" /> Actualiser la liste
+                    </button>
+                </div>
+
+                {/* ── Tableau ── */}
+                <div className="rounded-2xl overflow-hidden" style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }}>
+                    {chargement ? (
+                        <div className="p-6 text-center text-[13px]" style={{ color: "var(--text-muted)" }}>
+                            <Loader2 className="w-4 h-4 animate-spin inline mr-2" /> Chargement…
+                        </div>
+                    ) : visibles.length === 0 ? (
+                        <div className="p-6 text-center text-[13px]" style={{ color: "var(--text-muted)" }}>
+                            Aucun fournisseur. Utilisez « Actualiser la liste » pour importer le référentiel.
+                        </div>
+                    ) : (
+                        <div className="overflow-x-auto">
+                            <table className="w-full text-[12px] border-collapse">
+                                <thead>
+                                    <tr style={{ background: "var(--bg-elevated)" }}>
+                                        {["Fournisseur", "SQL", "Dernier SQL", "Qlik", "Dernier Qlik", ""].map((h) => (
+                                            <th key={h} className="px-3 py-2.5 text-left font-semibold whitespace-nowrap"
+                                                style={{ color: "var(--text-secondary)", borderBottom: "1px solid var(--border)" }}>{h}</th>
+                                        ))}
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {visibles.map((r) => (
+                                        <tr key={r.codeFournisseur} style={{ borderBottom: "1px solid var(--border)" }}>
+                                            <td className="px-3 py-2">
+                                                <div className="font-medium" style={{ color: "var(--text-primary)" }}>
+                                                    {r.nomFournisseur ?? r.codeFournisseur}
+                                                </div>
+                                                <div className="text-[10px]" style={{ color: "var(--text-muted)" }}>{r.codeFournisseur}</div>
+                                            </td>
+                                            <td className="px-3 py-2">
+                                                <input type="checkbox" checked={r.actifSql} className="w-4 h-4"
+                                                    onChange={(e) => basculer([r.codeFournisseur], "actifSql", e.target.checked)} />
+                                            </td>
+                                            <td className="px-3 py-2 whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
+                                                <Pastille statut={r.dernierSqlStatut} />{" "}
+                                                {fmtDate(r.dernierSqlAt)}
+                                                {r.dernierSqlLignes != null && <span style={{ color: "var(--text-muted)" }}> · {r.dernierSqlLignes.toLocaleString("fr-FR")} lignes {fmtDuree(r.dernierSqlMs)}</span>}
+                                            </td>
+                                            <td className="px-3 py-2">
+                                                <input type="checkbox" checked={r.actifQlik} className="w-4 h-4"
+                                                    onChange={(e) => basculer([r.codeFournisseur], "actifQlik", e.target.checked)} />
+                                            </td>
+                                            <td className="px-3 py-2 whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
+                                                <Pastille statut={r.dernierQlikStatut} />{" "}
+                                                {fmtDate(r.dernierQlikAt)}
+                                                {r.dernierQlikCodes != null && <span style={{ color: "var(--text-muted)" }}> · {r.dernierQlikCodes.toLocaleString("fr-FR")} codes</span>}
+                                            </td>
+                                            <td className="px-3 py-2 text-[11px]" style={{ color: "var(--text-muted)" }}>
+                                                {r.desactiveMotif}
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

src/app/(dashboard)/admin/synchronisation/page.tsx

@@ -0,0 +1,15 @@
+import { SynchronisationClient } from "./client";
+
+export const metadata = {
+    title: "Synchronisation nocturne — CollectFlow",
+};
+
+/**
+ * Paramétrage de la synchronisation nocturne des fournisseurs.
+ *
+ * L'accès admin est déjà imposé par le middleware (préfixe /admin) ; les routes
+ * /api/admin/sync revérifient le rôle côté serveur.
+ */
+export default function SynchronisationPage() {
+    return <SynchronisationClient />;
+}

src/app/(dashboard)/grid/page.tsx

@@ -19,7 +19,8 @@ export default async function GridPage({ searchParams }: GridPageProps) {
     const filters = {
         code1: params.code1 || null,
         code2: params.code2 || null,
-        code3: params.code3 || null,
+        // Liste séparée par des virgules : le filtre accepte plusieurs nomenclatures.
+        code3: params.code3 ? String(params.code3).split(",").filter(Boolean) : null,
     };
 
     // 1. Fetch available suppliers & stores

src/app/(dashboard)/settings/page.tsx

@@ -5,13 +5,14 @@ import { Save, Eye, EyeOff, CheckCircle, AlertCircle, Loader2, RefreshCw, Sun, M
 import { useTheme } from "next-themes";
 import { useGridStore } from "@/features/grid/store/use-grid-store";
 import { useDbSettingsStore } from "@/features/settings/store/use-db-settings-store";
-import { testDatabaseConnection, saveDatabaseSettings, getSavedDatabaseConfig, saveQlikSettings, testQlikConnection } from "@/features/settings/actions";
+import { testDatabaseConnection, saveDatabaseSettings, getSavedDatabaseConfig, saveQlikSettings, testQlikConnection, saveFfApiSettings, testFfApiConnection } from "@/features/settings/actions";
 import { useEffect } from "react";
 import { UserManagement } from "@/features/admin/components/user-management";
+import { ApiKeyManagement } from "@/features/admin/components/api-key-management";
+import { ApiConnectionInfo } from "@/features/admin/components/api-connection-info";
+import { GridWarmup } from "@/features/admin/components/grid-warmup";
 import { ServerLogs } from "@/features/settings/components/server-logs";
 
-interface OpenRouterModel { id: string; name: string; free: boolean; }
-
 function Section({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {
     return (
         <section className="apple-card">
@@ -36,40 +37,92 @@ function Field({ label, hint, children }: { label: string; hint?: string; childr
     );
 }
 
-interface FfSyncTable { nom: string; derniereSync: string; nbLignes?: number; }
+interface FfSyncTable { nom: string; derniereSync: string; nbLignes?: number; statut?: string; erreur?: string | null; }
 interface FfSyncStatus { lastSync: string; tables: FfSyncTable[]; }
 
 function FfApiStatusSection() {
     const [status, setStatus] = useState<FfSyncStatus | null>(null);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
+    const [url, setUrl] = useState("");
+    const [savedUrl, setSavedUrl] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [testedUrl, setTestedUrl] = useState<string | null>(null);
 
-    const fetchStatus = useCallback(async () => {
-        setLoading(true);
-        setError(null);
-        try {
-            const res = await fetch("/api/ff-status");
-            if (!res.ok) throw new Error(`HTTP ${res.status}`);
-            setStatus(await res.json());
-        } catch (e) {
-            setError(e instanceof Error ? e.message : "Erreur inconnue");
-        } finally {
-            setLoading(false);
-        }
+    // Charge l'URL enregistrée pour la préremplir (vide = valeur par défaut).
+    useEffect(() => {
+        getSavedDatabaseConfig()
+            .then((cfg) => {
+                setSavedUrl(cfg?.ffApiBaseUrl ?? null);
+                if (cfg?.ffApiBaseUrl) setUrl(cfg.ffApiBaseUrl);
+            })
+            .catch(() => { /* réglage optionnel : on laisse le champ vide */ });
     }, []);
 
-    useEffect(() => { fetchStatus(); }, [fetchStatus]);
+    const runTest = useCallback((candidate?: string) => {
+        setLoading(true);
+        setError(null);
+        setStatus(null);
+        testFfApiConnection(candidate)
+            .then((res) => {
+                setTestedUrl(res.url);
+                if (res.success) setStatus(res.status as FfSyncStatus);
+                else setError(res.error ?? "Échec inconnu");
+            })
+            .catch((e) => setError(e instanceof Error ? e.message : "Erreur inconnue"))
+            .finally(() => setLoading(false));
+    }, []);
+
+    useEffect(() => { runTest(); }, [runTest]);
+
+    const save = async () => {
+        setSaving(true);
+        setError(null);
+        try {
+            const res = await saveFfApiSettings(url);
+            if (!res.success) { setError(res.error ?? "Enregistrement impossible"); return; }
+            setSavedUrl(url.trim() || null);
+            runTest(url);
+        } finally {
+            setSaving(false);
+        }
+    };
 
     return (
         <Section title="API FF Nancy" subtitle="Source des données produits — synchronisation nuit depuis SQL Server (données J-1)">
-            <div className="flex items-center gap-3">
-                <button onClick={fetchStatus} disabled={loading} className="apple-btn-secondary h-9 px-4">
-                    {loading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <RefreshCw className="w-3.5 h-3.5" />}
-                    Vérifier le statut
+            <Field label="URL de l'API" hint="Laisser vide pour utiliser la valeur par défaut (https://api.ffnancy.fr)">
+                <input
+                    type="text"
+                    placeholder="https://api.ffnancy.fr"
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === "Enter") void save(); }}
+                    className="apple-input w-full"
+                />
+            </Field>
+
+            <div className="flex items-center gap-3 flex-wrap">
+                <button onClick={save} disabled={saving} className="apple-btn h-9 px-4">
+                    {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+                    Enregistrer
                 </button>
-                {error && <span className="text-[12px] text-red-400">{error}</span>}
+                <button onClick={() => runTest(url)} disabled={loading} className="apple-btn-secondary h-9 px-4">
+                    {loading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <RefreshCw className="w-3.5 h-3.5" />}
+                    Tester
+                </button>
+                {status && <span className="text-[12px] text-emerald-400 flex items-center gap-1"><CheckCircle className="w-3.5 h-3.5" /> Connexion OK</span>}
+                {error && <span className="text-[12px] text-red-400 flex items-center gap-1"><AlertCircle className="w-3.5 h-3.5" /> {error}</span>}
             </div>
 
+            {/* L'URL réellement appelée : évite de croire qu'on teste celle du champ
+                alors que le réglage enregistré ou la variable d'environnement prime. */}
+            {testedUrl && (
+                <p className="text-[11px] text-[var(--text-muted)]">
+                    Adresse testée : <span className="font-mono">{testedUrl}</span>
+                    {!savedUrl && <> — valeur par défaut, aucun réglage enregistré</>}
+                </p>
+            )}
+
             {status && (
                 <div className="space-y-2 mt-2">
                     <p className="text-[12px] text-[var(--text-secondary)]">
@@ -83,6 +136,7 @@ function FfApiStatusSection() {
                                         <th className="text-left px-3 py-2 font-medium text-[var(--text-secondary)]">Table</th>
                                         <th className="text-right px-3 py-2 font-medium text-[var(--text-secondary)]">Sync</th>
                                         <th className="text-right px-3 py-2 font-medium text-[var(--text-secondary)]">Lignes</th>
+                                        <th className="text-right px-3 py-2 font-medium text-[var(--text-secondary)]">État</th>
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -95,6 +149,12 @@ function FfApiStatusSection() {
                                             <td className="px-3 py-2 text-right text-[var(--text-muted)]">
                                                 {t.nbLignes?.toLocaleString("fr-FR") ?? "—"}
                                             </td>
+                                            {/* Une table en erreur est précisément ce qu'on vient chercher ici. */}
+                                            <td className="px-3 py-2 text-right">
+                                                {t.statut === "ok"
+                                                    ? <span className="text-emerald-400">ok</span>
+                                                    : <span className="text-red-400" title={t.erreur ?? undefined}>{t.statut ?? "—"}</span>}
+                                            </td>
                                         </tr>
                                     ))}
                                 </tbody>
@@ -189,22 +249,9 @@ export default function SettingsPage() {
     const displayDensity = useGridStore((s) => s.displayDensity);
     const setDisplayDensity = useGridStore((s) => s.setDisplayDensity);
 
-    const [showKey, setShowKey] = useState(false);
-    const [apiKey, setApiKey] = useState("");
     const [dbStatus, setDbStatus] = useState<"idle" | "testing" | "ok" | "error">("idle");
     const [dbError, setDbError] = useState<string | null>(null);
     const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "saved">("idle");
-    const [models, setModels] = useState<OpenRouterModel[]>([]);
-    const [selectedModel, setSelectedModel] = useState("google/gemini-2.0-flash-001");
-    const [modelsStatus, setModelsStatus] = useState<"idle" | "loading" | "ok" | "error">("idle");
-
-    // AI Provider
-    const [aiProvider, setAiProvider] = useState<"openrouter" | "google">("openrouter");
-    const [googleAiKey, setGoogleAiKey] = useState("");
-    const [showGoogleKey, setShowGoogleKey] = useState(false);
-    const [googleAiModel, setGoogleAiModel] = useState("");
-    const [googleModels, setGoogleModels] = useState<{ id: string; name: string }[]>([]);
-    const [googleModelsStatus, setGoogleModelsStatus] = useState<"idle" | "loading" | "ok" | "error">("idle");
 
     const [isMounted, setIsMounted] = useState(false);
 
@@ -218,34 +265,6 @@ export default function SettingsPage() {
         getDatabaseUrl
     } = useDbSettingsStore();
 
-    const fetchGoogleModels = useCallback(async (key: string) => {
-        if (!key.trim()) return;
-        setGoogleModelsStatus("loading");
-        try {
-            const res = await fetch("/api/google-ai/models", { headers: { "x-google-ai-key": key } });
-            if (!res.ok) throw new Error();
-            const data = await res.json();
-            setGoogleModels(data.models ?? []);
-            setGoogleModelsStatus("ok");
-        } catch {
-            setGoogleModelsStatus("error");
-        }
-    }, []);
-
-    const fetchModels = useCallback(async (key: string) => {
-        if (!key.trim()) return;
-        setModelsStatus("loading");
-        try {
-            const res = await fetch("/api/openrouter/models", { headers: { "x-openrouter-key": key } });
-            if (!res.ok) throw new Error();
-            const data = await res.json();
-            setModels(data.models ?? []);
-            setModelsStatus("ok");
-        } catch {
-            setModelsStatus("error");
-        }
-    }, []);
-
     const reloadFromServer = useCallback(async () => {
         const config = await getSavedDatabaseConfig();
         if (config) {
@@ -263,23 +282,13 @@ export default function SettingsPage() {
                     console.error("Failed to parse saved URL", e);
                 }
             }
-            if (config.openRouterKey) {
-                setApiKey(config.openRouterKey);
-                fetchModels(config.openRouterKey);
-            }
-            if (config.openRouterModel) {
-                setSelectedModel(config.openRouterModel);
-            }
-            if (config.aiProvider) setAiProvider(config.aiProvider);
-            if (config.googleAiKey) {
-                setGoogleAiKey(config.googleAiKey);
-                fetchGoogleModels(config.googleAiKey);
-            }
-            if (config.googleAiModel) setGoogleAiModel(config.googleAiModel);
         }
-    }, [fetchModels, fetchGoogleModels, setApiKey, setDatabase, setHost, setPassword, setPort, setSelectedModel, setSsl, setUser]);
+    }, [setDatabase, setHost, setPassword, setPort, setSsl, setUser]);
 
     useEffect(() => {
+        // `isMounted` sert à éviter un écart d'hydratation : il doit donc être posé
+        // au montage, ce que la règle déconseille en général mais qui est ici le but.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setIsMounted(true);
         reloadFromServer();
     }, [reloadFromServer]);
@@ -300,7 +309,7 @@ export default function SettingsPage() {
     const handleSave = async () => {
         setSaveStatus("saving");
         const url = getDatabaseUrl();
-        const res = await saveDatabaseSettings(url, apiKey, selectedModel, aiProvider, googleAiKey, googleAiModel);
+        const res = await saveDatabaseSettings(url);
         if (res.success) {
             setSaveStatus("saved");
             setTimeout(() => setSaveStatus("idle"), 2500);
@@ -415,144 +424,6 @@ export default function SettingsPage() {
 
             <QlikSettingsSection />
 
-            {/* AI Provider selector */}
-            <Section title="Admin AI Chat — Fournisseur" subtitle="Choisissez le fournisseur IA utilisé dans l'onglet Admin AI Chat">
-                <div className="flex gap-2">
-                    <button
-                        onClick={() => setAiProvider("openrouter")}
-                        className={`flex-1 py-2.5 px-4 rounded-lg border text-[13px] font-medium transition-colors ${aiProvider === "openrouter" ? "border-[var(--accent)] bg-[var(--accent-bg)] text-[var(--accent)]" : "border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)]"}`}
-                    >
-                        OpenRouter
-                    </button>
-                    <button
-                        onClick={() => setAiProvider("google")}
-                        className={`flex-1 py-2.5 px-4 rounded-lg border text-[13px] font-medium transition-colors ${aiProvider === "google" ? "border-[var(--accent)] bg-[var(--accent-bg)] text-[var(--accent)]" : "border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)]"}`}
-                    >
-                        Google AI Studio
-                    </button>
-                </div>
-
-                {aiProvider === "google" && (
-                    <>
-                        <Field label="Clé API Google AI Studio" hint="Disponible sur aistudio.google.com/apikey — commence par AIza...">
-                            <div className="flex gap-2">
-                                <div className="relative flex-1">
-                                    <input
-                                        type={showGoogleKey ? "text" : "password"}
-                                        placeholder="AIzaSy..."
-                                        value={googleAiKey}
-                                        onChange={(e) => setGoogleAiKey(e.target.value)}
-                                        className="apple-input font-mono pr-10"
-                                    />
-                                    <button
-                                        onClick={() => setShowGoogleKey((v) => !v)}
-                                        className="absolute right-3 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-100 transition-opacity"
-                                    >
-                                        {showGoogleKey ? <EyeOff className="w-4 h-4" style={{ color: "var(--text-primary)" }} /> : <Eye className="w-4 h-4" style={{ color: "var(--text-primary)" }} />}
-                                    </button>
-                                </div>
-                                <button
-                                    onClick={() => fetchGoogleModels(googleAiKey)}
-                                    disabled={!googleAiKey || googleModelsStatus === "loading"}
-                                    className="apple-btn-secondary h-9 px-4 whitespace-nowrap"
-                                >
-                                    {googleModelsStatus === "loading" ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <RefreshCw className="w-3.5 h-3.5" />}
-                                    Charger les modèles
-                                </button>
-                            </div>
-                        </Field>
-                        <Field
-                            label={`Modèle Google${googleModels.length > 0 ? ` (${googleModels.length} disponibles)` : ""}`}
-                            hint={googleModelsStatus === "error" ? "⚠ Erreur — vérifiez votre clé puis rechargez" : googleModelsStatus === "idle" ? "Entrez votre clé et cliquez « Charger les modèles »" : undefined}
-                        >
-                            {googleModels.length > 0 ? (
-                                <select
-                                    value={googleAiModel}
-                                    onChange={(e) => setGoogleAiModel(e.target.value)}
-                                    className="apple-input"
-                                >
-                                    {googleModels.map((m) => (
-                                        <option key={m.id} value={m.id}>{m.name}</option>
-                                    ))}
-                                </select>
-                            ) : (
-                                <input
-                                    type="text"
-                                    value={googleAiModel}
-                                    onChange={(e) => setGoogleAiModel(e.target.value)}
-                                    placeholder="ex: gemini-2.0-flash"
-                                    className="apple-input"
-                                />
-                            )}
-                        </Field>
-                    </>
-                )}
-
-                {aiProvider === "openrouter" && (
-                    <p className="text-[12px] text-[var(--text-muted)]">
-                        Utilise la clé OpenRouter configurée ci-dessous et le modèle sélectionné.
-                    </p>
-                )}
-            </Section>
-
-            {/* OpenRouter */}
-            <Section title="IA Copilot — OpenRouter" subtitle="Clé API pour les analyses de gammes par intelligence artificielle">
-                <Field label="Clé API" hint="Disponible sur openrouter.ai/keys — commence par sk-or-...">
-                    <div className="flex gap-2">
-                        <div className="relative flex-1">
-                            <input
-                                type={showKey ? "text" : "password"}
-                                placeholder="sk-or-v1-..."
-                                value={apiKey}
-                                onChange={(e) => setApiKey(e.target.value)}
-                                className="apple-input font-mono pr-10"
-                            />
-                            <button
-                                onClick={() => setShowKey((v) => !v)}
-                                className="absolute right-3 top-1/2 -translate-y-1/2 transition-opacity hover:opacity-100 opacity-50"
-                            >
-                                {showKey ? <EyeOff className="w-4 h-4" style={{ color: "var(--text-primary)" }} /> : <Eye className="w-4 h-4" style={{ color: "var(--text-primary)" }} />}
-                            </button>
-                        </div>
-                        <button
-                            onClick={() => fetchModels(apiKey)}
-                            disabled={!apiKey || modelsStatus === "loading"}
-                            className="apple-btn-secondary h-9 px-4 whitespace-nowrap"
-                        >
-                            {modelsStatus === "loading" ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <RefreshCw className="w-3.5 h-3.5" />}
-                            Charger les modèles
-                        </button>
-                    </div>
-                </Field>
-
-                <Field
-                    label={`Modèle IA${models.length > 0 ? ` (${models.length} disponibles)` : ""}`}
-                    hint={modelsStatus === "error" ? "⚠ Erreur — vérifiez votre clé puis rechargez" : modelsStatus === "idle" ? "Entrez votre clé et cliquez « Charger les modèles »" : undefined}
-                >
-                    {models.length > 0 ? (
-                        <select
-                            value={selectedModel}
-                            onChange={(e) => setSelectedModel(e.target.value)}
-                            className="apple-input"
-                        >
-                            {models.map((m) => (
-                                <option key={m.id} value={m.id}>
-                                    {m.free ? "🆓 " : ""}{m.name}
-                                </option>
-                            ))}
-                        </select>
-                    ) : (
-                        <input
-                            type="text"
-                            value={selectedModel}
-                            onChange={(e) => setSelectedModel(e.target.value)}
-                            placeholder="ex: google/gemini-2.0-flash-001"
-                            className="apple-input"
-                        />
-                    )}
-                </Field>
-            </Section>
-
             {/* Apparence */}
             <Section title="Apparence">
                 <div className="flex items-center justify-between">
@@ -588,27 +459,6 @@ export default function SettingsPage() {
                 </div>
             </Section>
 
-            {/* Score Produit */}
-            <Section title="Score Produit" subtitle="Formule hybride absolue + relative (v4)">
-                <div className="bg-[var(--surface-tertiary)] rounded-lg p-3 space-y-2">
-                    <p className="text-[11px] text-[var(--text-secondary)]">
-                        <strong>Formule :</strong> Volume (50pts) + CA (30pts) + Marge (20pts) + Bonus relatif (±10pts)
-                    </p>
-                    <p className="text-[11px] text-[var(--text-muted)]">
-                        Le score est basé sur des paliers absolus sensibles au prix unitaire, avec un ajustement relatif selon la position dans le lot fournisseur.
-                    </p>
-                    <div className="border-t border-[var(--border-subtle)] pt-2 mt-2 space-y-1">
-                        <p className="text-[11px] text-[var(--text-secondary)]"><strong>Volume</strong> (0-50 pts) — unités / magasin / mois</p>
-                        <p className="text-[11px] text-[var(--text-secondary)]"><strong>CA</strong> (0-30 pts) — € / magasin / an</p>
-                        <p className="text-[11px] text-[var(--text-secondary)]"><strong>Marge</strong> (0-20 pts) — taux de marge %</p>
-                        <p className="text-[11px] text-[var(--text-secondary)]"><strong>Bonus relatif</strong> (±10 pts) — percentile composite dans le lot</p>
-                    </div>
-                    <p className="text-[11px] text-[var(--text-muted)] mt-2">
-                        Pénalité de régularité appliquée si inactivité prolongée. Score final borné 0-100.
-                    </p>
-                </div>
-            </Section>
-
             {/* Journaux serveur — diagnostic des extractions Qlik */}
             <Section
                 title="Journaux serveur"
@@ -625,6 +475,28 @@ export default function SettingsPage() {
                 <UserManagement />
             </Section>
 
+            {/* API publique /api/v1 — connexion puis gestion des clés */}
+            <Section
+                title="API CollectFlow — Connexion"
+                subtitle="Tout ce qu'il faut pour appeler l'API depuis un script ou un outil externe"
+            >
+                <ApiConnectionInfo />
+            </Section>
+
+            <Section
+                title="Clés d'API"
+                subtitle="Créer et révoquer les clés d'accès à /api/v1"
+            >
+                <ApiKeyManagement />
+            </Section>
+
+            <Section
+                title="Données exposées à l'API"
+                subtitle="Calculer l'instantané de tous les fournisseurs pour qu'une IA externe y ait accès"
+            >
+                <GridWarmup />
+            </Section>
+
             {/* Save Button — Floating/Sticky style at bottom */}
             <div className="sticky bottom-6 flex justify-end pt-4 pb-2">
                 <button

src/app/(dashboard)/stock-negatif/client.tsx

@@ -1,12 +1,29 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useState, useMemo } from "react";
-import { ChevronUp, ChevronDown, ChevronsUpDown, Download, Search } from "lucide-react";
+import { useState, useMemo, useEffect, useTransition, type ReactNode } from "react";
+import {
+    ChevronUp,
+    ChevronDown,
+    ChevronsUpDown,
+    ChevronLeft,
+    ChevronRight,
+    ChevronsLeft,
+    ChevronsRight,
+    Download,
+    Search,
+} from "lucide-react";
+import LoadingModal from "@/components/shared/loading-modal";
 import type { PgStockNegatifRow, PgStockSansVenteRow, PgSansVente6MoisRow } from "./page";
 
 type SortDir = "asc" | "desc";
 
+/** Nombre de lignes rendues simultanément : au-delà, le navigateur fige. */
+const PAGE_SIZE = 50;
+
+/** Un seul collateur réutilisé : `localeCompare` en crée un par appel (très coûteux sur 17 000 lignes). */
+const collator = new Intl.Collator("fr", { numeric: true, sensitivity: "base" });
+
 function fmtDate(raw: string | null) {
     if (!raw) return "—";
     const d = new Date(raw);
@@ -21,9 +38,66 @@ function getYear(raw: string | null): string {
     return String(d.getFullYear());
 }
 
-function SortIcon<T extends string>({ col, sortKey, sortDir }: { col: T; sortKey: T; sortDir: SortDir }) {
-    if (col !== sortKey) return <ChevronsUpDown className="inline w-3 h-3 ml-1 opacity-30" />;
-    return sortDir === "asc"
+/**
+ * Passe à `true` seulement si `active` reste vrai plus de `delay` ms.
+ * Évite le clignotement du modal sur les transitions instantanées.
+ */
+function useDelayedFlag(active: boolean, delay = 120) {
+    const [elapsed, setElapsed] = useState(false);
+    const [wasActive, setWasActive] = useState(active);
+
+    // Réinitialisation pendant le rendu (et non dans un effet) : dès que
+    // l'attente cesse, le prochain délai repart de zéro.
+    if (wasActive !== active) {
+        setWasActive(active);
+        if (!active) setElapsed(false);
+    }
+
+    useEffect(() => {
+        if (!active) return;
+        const id = setTimeout(() => setElapsed(true), delay);
+        return () => clearTimeout(id);
+    }, [active, delay]);
+
+    return active && elapsed;
+}
+
+// ---------------------------------------------------------------------------
+// Tableau générique (les 3 onglets partagent filtres, tri, pagination, export)
+// ---------------------------------------------------------------------------
+
+interface Column<T> {
+    key: Extract<keyof T, string>;
+    label: string;
+    /** Tri numérique au lieu du tri alphabétique. */
+    numeric?: boolean;
+    render?: (row: T) => ReactNode;
+}
+
+interface ExcelSpec<T> {
+    sheet: string;
+    filePrefix: string;
+    header: string[];
+    widths: number[];
+    row: (r: T) => (string | number)[];
+}
+
+interface StockTableProps<T> {
+    rows: T[];
+    magasin: string;
+    columns: Column<T>[];
+    fournisseurOf: (r: T) => string;
+    /** Source du filtre « Année » — omis, le filtre n'est pas affiché. */
+    anneeOf?: (r: T) => string;
+    anneeLabel?: string;
+    searchIn: (r: T) => (string | null | undefined)[];
+    emptyLabel: string;
+    excel: ExcelSpec<T>;
+}
+
+function SortIcon({ active, dir }: { active: boolean; dir: SortDir }) {
+    if (!active) return <ChevronsUpDown className="inline w-3 h-3 ml-1 opacity-30" />;
+    return dir === "asc"
         ? <ChevronUp className="inline w-3 h-3 ml-1" />
         : <ChevronDown className="inline w-3 h-3 ml-1" />;
 }
@@ -49,95 +123,174 @@ function FilterSelect({ label, value, onChange, options }: {
     );
 }
 
-function useSortedRows<T extends Record<string, unknown>>(rows: T[], numericKeys: string[]) {
-    const [sortKey, setSortKey] = useState<keyof T>(Object.keys(rows[0] ?? { codein: "" })[0] as keyof T);
-    const [sortDir, setSortDir] = useState<SortDir>("asc");
+function Pagination({ page, totalPages, total, from, to, onChange }: {
+    page: number;
+    totalPages: number;
+    total: number;
+    from: number;
+    to: number;
+    onChange: (p: number) => void;
+}) {
+    if (total === 0) return null;
 
-    function handleSort(key: keyof T) {
-        if (sortKey === key) setSortDir(d => d === "asc" ? "desc" : "asc");
+    const btn = "rounded-lg border border-gray-200 bg-white p-1.5 text-gray-600 shadow-sm transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40";
+
+    return (
+        <div className="flex flex-wrap items-center justify-between gap-3 px-1">
+            <span className="text-xs text-gray-500">
+                Lignes <span className="font-medium text-gray-700">{from.toLocaleString("fr-FR")}</span>
+                {" à "}
+                <span className="font-medium text-gray-700">{to.toLocaleString("fr-FR")}</span>
+                {" sur "}
+                <span className="font-medium text-gray-700">{total.toLocaleString("fr-FR")}</span>
+            </span>
+            <div className="flex items-center gap-1.5">
+                <button className={btn} onClick={() => onChange(1)} disabled={page <= 1} aria-label="Première page">
+                    <ChevronsLeft className="w-4 h-4" />
+                </button>
+                <button className={btn} onClick={() => onChange(page - 1)} disabled={page <= 1} aria-label="Page précédente">
+                    <ChevronLeft className="w-4 h-4" />
+                </button>
+                <span className="px-2 text-xs text-gray-600 tabular-nums">
+                    Page {page.toLocaleString("fr-FR")} / {totalPages.toLocaleString("fr-FR")}
+                </span>
+                <button className={btn} onClick={() => onChange(page + 1)} disabled={page >= totalPages} aria-label="Page suivante">
+                    <ChevronRight className="w-4 h-4" />
+                </button>
+                <button className={btn} onClick={() => onChange(totalPages)} disabled={page >= totalPages} aria-label="Dernière page">
+                    <ChevronsRight className="w-4 h-4" />
+                </button>
+            </div>
+        </div>
+    );
+}
+
+function StockTable<T extends object>({
+    rows,
+    magasin,
+    columns,
+    fournisseurOf,
+    anneeOf,
+    anneeLabel = "Année entrée",
+    searchIn,
+    emptyLabel,
+    excel,
+}: StockTableProps<T>) {
+    const [filterFournisseur, setFilterFournisseur] = useState("");
+    const [filterAnnee, setFilterAnnee] = useState("");
+    const [search, setSearch] = useState("");
+    // `null` = ordre renvoyé par la base (le plus pertinent : stock le plus négatif,
+    // entrée la plus récente…). Aucun tri client tant que l'utilisateur n'en demande pas.
+    const [sortKey, setSortKey] = useState<Extract<keyof T, string> | null>(null);
+    const [sortDir, setSortDir] = useState<SortDir>("asc");
+    const [page, setPage] = useState(1);
+    const [exporting, setExporting] = useState(false);
+
+    const fournisseurs = useMemo(
+        () => [...new Set(rows.map(fournisseurOf).filter(Boolean))].sort((a, b) => collator.compare(a, b)),
+        [rows, fournisseurOf]
+    );
+    const annees = useMemo(
+        () => anneeOf ? [...new Set(rows.map(anneeOf).filter(Boolean))].sort((a, b) => b.localeCompare(a)) : [],
+        [rows, anneeOf]
+    );
+
+    const filtered = useMemo(() => {
+        const q = search.trim().toLowerCase();
+        if (!filterFournisseur && !filterAnnee && !q) return rows;
+        return rows.filter(r =>
+            (!filterFournisseur || fournisseurOf(r) === filterFournisseur) &&
+            (!filterAnnee || (anneeOf ? anneeOf(r) === filterAnnee : true)) &&
+            (!q || searchIn(r).some(v => v?.toLowerCase().includes(q)))
+        );
+    }, [rows, filterFournisseur, filterAnnee, search, fournisseurOf, anneeOf, searchIn]);
+
+    const numericKeys = useMemo(
+        () => new Set(columns.filter(c => c.numeric).map(c => c.key as string)),
+        [columns]
+    );
+
+    const sorted = useMemo(() => {
+        if (!sortKey) return filtered;
+        const numeric = numericKeys.has(sortKey);
+        const dir = sortDir === "asc" ? 1 : -1;
+        return [...filtered].sort((a, b) => {
+            const av = (a as Record<string, unknown>)[sortKey];
+            const bv = (b as Record<string, unknown>)[sortKey];
+            if (numeric) {
+                const an = Number(av);
+                const bn = Number(bv);
+                if (Number.isNaN(an) && Number.isNaN(bn)) return 0;
+                if (Number.isNaN(an)) return 1;
+                if (Number.isNaN(bn)) return -1;
+                return (an - bn) * dir;
+            }
+            return collator.compare(String(av ?? ""), String(bv ?? "")) * dir;
+        });
+    }, [filtered, sortKey, sortDir, numericKeys]);
+
+    // Toute modification des filtres / du tri ramène à la première page.
+    // Ajustement pendant le rendu : pas d'effet, donc pas de rendu en cascade.
+    const [pagedSet, setPagedSet] = useState(sorted);
+    if (pagedSet !== sorted) {
+        setPagedSet(sorted);
+        setPage(1);
+    }
+
+    const total = sorted.length;
+    const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const currentPage = Math.min(page, totalPages);
+    const pageRows = useMemo(
+        () => sorted.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE),
+        [sorted, currentPage]
+    );
+
+    function handleSort(key: Extract<keyof T, string>) {
+        if (sortKey === key) setSortDir(d => (d === "asc" ? "desc" : "asc"));
         else { setSortKey(key); setSortDir("asc"); }
     }
 
-    const sorted = useMemo(() => [...rows].sort((a, b) => {
-        const av = a[sortKey];
-        const bv = b[sortKey];
-        if (numericKeys.includes(sortKey as string)) {
-            return sortDir === "asc" ? Number(av) - Number(bv) : Number(bv) - Number(av);
+    const hasFilters = Boolean(filterFournisseur || filterAnnee || search);
+
+    async function handleExport() {
+        if (exporting) return;
+        setExporting(true);
+        try {
+            const ExcelJS = (await import("exceljs")).default;
+            const wb = new ExcelJS.Workbook();
+            const ws = wb.addWorksheet(excel.sheet);
+            ws.addRow(excel.header);
+            ws.getRow(1).eachCell(cell => {
+                cell.fill = { type: "pattern", pattern: "solid", fgColor: { argb: "FF1E293B" } };
+                cell.font = { color: { argb: "FFFFFFFF" }, bold: true };
+                cell.alignment = { vertical: "middle", horizontal: "center" };
+            });
+            ws.getRow(1).height = 22;
+            // L'export reprend l'intégralité des lignes filtrées, pas seulement la page affichée.
+            for (const r of sorted) ws.addRow(excel.row(r));
+            ws.columns = excel.widths.map(width => ({ width }));
+            const buffer = await wb.xlsx.writeBuffer();
+            const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `${excel.filePrefix}_${magasin || "Tous"}_${new Date().toISOString().slice(0, 10)}.xlsx`;
+            a.click();
+            URL.revokeObjectURL(url);
+        } finally {
+            setExporting(false);
         }
-        const as = String(av ?? "").toLowerCase();
-        const bs = String(bv ?? "").toLowerCase();
-        return sortDir === "asc" ? as.localeCompare(bs) : bs.localeCompare(as);
-    }), [rows, sortKey, sortDir]);
-
-    return { sorted, sortKey, sortDir, handleSort };
-}
-
-// ---------------------------------------------------------------------------
-// Onglet 1 — Stock Négatif
-// ---------------------------------------------------------------------------
-
-function TabStockNegatif({ rows, magasin }: { rows: PgStockNegatifRow[]; magasin: string }) {
-    type SK = keyof PgStockNegatifRow;
-
-    const [filterFournisseur, setFilterFournisseur] = useState("");
-    const [filterAnnee, setFilterAnnee] = useState("");
-    const [search, setSearch] = useState("");
-
-    const fournisseurs = useMemo(() =>
-        [...new Set(rows.map(r => r.fournisseur).filter(Boolean))].sort((a, b) => a.localeCompare(b, "fr")),
-        [rows]
-    );
-    const annees = useMemo(() =>
-        [...new Set(rows.map(r => getYear(r.derniereentree)).filter(Boolean))].sort((a, b) => b.localeCompare(a)),
-        [rows]
-    );
-
-    const filtered = useMemo(() => {
-        const q = search.trim().toLowerCase();
-        return rows.filter(r =>
-            (!filterFournisseur || r.fournisseur === filterFournisseur) &&
-            (!filterAnnee || getYear(r.derniereentree) === filterAnnee) &&
-            (!q || r.codein?.toLowerCase().includes(q) || r.libelle1?.toLowerCase().includes(q))
-        );
-    }, [rows, filterFournisseur, filterAnnee, search]);
-
-    const { sorted, sortKey, sortDir, handleSort } = useSortedRows<PgStockNegatifRow>(
-        filtered,
-        ["stockdispo"]
-    );
-
-    const th = (key: SK, label: string) => (
-        <th className="cursor-pointer select-none whitespace-nowrap px-3 py-2.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide hover:text-gray-900"
-            onClick={() => handleSort(key)}>
-            {label}<SortIcon col={key as string} sortKey={sortKey as string} sortDir={sortDir} />
-        </th>
-    );
-
-    async function handleExport() {
-        const ExcelJS = (await import("exceljs")).default;
-        const wb = new ExcelJS.Workbook();
-        const ws = wb.addWorksheet("Stock Négatif");
-        ws.addRow(["CODEIN", "GENCODE", "QTE", "CODMV", "Dernière vente", "Dernière entrée"]);
-        ws.getRow(1).eachCell(cell => {
-            cell.fill = { type: "pattern", pattern: "solid", fgColor: { argb: "FF1E293B" } };
-            cell.font = { color: { argb: "FFFFFFFF" }, bold: true };
-            cell.alignment = { vertical: "middle", horizontal: "center" };
-        });
-        ws.getRow(1).height = 22;
-        for (const r of sorted) ws.addRow([r.codein, "", Math.abs(r.stockdispo), "503", fmtDate(r.dernierevente), fmtDate(r.derniereentree)]);
-        ws.columns = [{ width: 16 }, { width: 16 }, { width: 10 }, { width: 10 }, { width: 16 }, { width: 22 }];
-        const buffer = await wb.xlsx.writeBuffer();
-        const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = `Stock_Negatif_${magasin || "Tous"}_${new Date().toISOString().slice(0, 10)}.xlsx`;
-        a.click();
-        URL.revokeObjectURL(url);
     }
 
     return (
         <div className="space-y-4">
+            {exporting && (
+                <LoadingModal
+                    message="Génération du fichier Excel"
+                    subMessage={`${total.toLocaleString("fr-FR")} ligne${total !== 1 ? "s" : ""} en cours d'écriture…`}
+                />
+            )}
+
             <div className="flex flex-wrap items-center justify-between gap-3">
                 <div className="flex flex-wrap items-center gap-3">
                     <div className="relative">
@@ -151,8 +304,10 @@ function TabStockNegatif({ rows, magasin }: { rows: PgStockNegatifRow[]; magasin
                         />
                     </div>
                     <FilterSelect label="Fournisseur" value={filterFournisseur} onChange={setFilterFournisseur} options={fournisseurs} />
-                    <FilterSelect label="Année entrée" value={filterAnnee} onChange={setFilterAnnee} options={annees} />
-                    {(filterFournisseur || filterAnnee || search) && (
+                    {anneeOf && (
+                        <FilterSelect label={anneeLabel} value={filterAnnee} onChange={setFilterAnnee} options={annees} />
+                    )}
+                    {hasFilters && (
                         <button
                             onClick={() => { setFilterFournisseur(""); setFilterAnnee(""); setSearch(""); }}
                             className="rounded-lg border border-orange-200 bg-orange-50 px-3 py-1.5 text-xs font-medium text-orange-700 hover:bg-orange-100 transition-colors"
@@ -162,312 +317,170 @@ function TabStockNegatif({ rows, magasin }: { rows: PgStockNegatifRow[]; magasin
                     )}
                 </div>
                 <div className="flex items-center gap-3">
-                    <span className="text-sm text-gray-500">{sorted.length} article{sorted.length !== 1 ? "s" : ""}</span>
-                    <button onClick={handleExport} className="flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-emerald-700 transition-colors">
+                    <span className="text-sm text-gray-500">
+                        {total.toLocaleString("fr-FR")} article{total !== 1 ? "s" : ""}
+                        {hasFilters && total !== rows.length && (
+                            <span className="text-gray-400"> / {rows.length.toLocaleString("fr-FR")}</span>
+                        )}
+                    </span>
+                    <button
+                        onClick={handleExport}
+                        disabled={exporting || total === 0}
+                        className="flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-1.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
+                    >
                         <Download className="w-4 h-4" />Exporter Excel
                     </button>
                 </div>
             </div>
+
             <div className="overflow-x-auto rounded-xl border border-gray-200 bg-white shadow-sm">
                 <table className="min-w-full text-sm">
                     <thead className="bg-gray-50 border-b border-gray-200">
                         <tr>
-                            {th("codein", "Code article")}
-                            {th("libelle1", "Libellé")}
-                            {th("fournisseur", "Fournisseur")}
-                            {th("site", "Magasin")}
-                            {th("stockdispo", "Stock")}
-                            {th("dernierevente", "Dernière vente")}
-                            {th("derniereentree", "Dernière entrée")}
+                            {columns.map(c => (
+                                <th
+                                    key={c.key}
+                                    onClick={() => handleSort(c.key)}
+                                    className="cursor-pointer select-none whitespace-nowrap px-3 py-2.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide hover:text-gray-900"
+                                >
+                                    {c.label}
+                                    <SortIcon active={sortKey === c.key} dir={sortDir} />
+                                </th>
+                            ))}
                         </tr>
                     </thead>
                     <tbody className="divide-y divide-gray-100">
-                        {sorted.length === 0 && (
-                            <tr><td colSpan={7} className="px-3 py-8 text-center text-gray-400">Aucun article en stock négatif</td></tr>
+                        {pageRows.length === 0 && (
+                            <tr>
+                                <td colSpan={columns.length} className="px-3 py-8 text-center text-gray-400">{emptyLabel}</td>
+                            </tr>
                         )}
-                        {sorted.map((row, i) => (
-                            <tr key={`${row.codein}-${row.site}-${i}`} className="hover:bg-gray-50 transition-colors">
-                                <td className="px-3 py-2 font-mono text-xs text-gray-700">{row.codein}</td>
-                                <td className="px-3 py-2 text-gray-900">{row.libelle1}</td>
-                                <td className="px-3 py-2 text-gray-700">{row.fournisseur}</td>
-                                <td className="px-3 py-2">
-                                    <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">{row.site}</span>
-                                </td>
-                                <td className="px-3 py-2 font-semibold text-red-600">{row.stockdispo}</td>
-                                <td className="px-3 py-2 text-gray-600 text-xs">{fmtDate(row.dernierevente)}</td>
-                                <td className="px-3 py-2 text-gray-600 text-xs">{fmtDate(row.derniereentree)}</td>
+                        {pageRows.map((row, i) => (
+                            <tr key={`${String((row as Record<string, unknown>).codein)}-${String((row as Record<string, unknown>).site)}-${i}`}
+                                className="hover:bg-gray-50 transition-colors">
+                                {columns.map(c => (
+                                    <td key={c.key} className="px-3 py-2">
+                                        {c.render
+                                            ? c.render(row)
+                                            : String((row as Record<string, unknown>)[c.key] ?? "")}
+                                    </td>
+                                ))}
                             </tr>
                         ))}
                     </tbody>
                 </table>
             </div>
+
+            <Pagination
+                page={currentPage}
+                totalPages={totalPages}
+                total={total}
+                from={total === 0 ? 0 : (currentPage - 1) * PAGE_SIZE + 1}
+                to={Math.min(currentPage * PAGE_SIZE, total)}
+                onChange={p => setPage(Math.min(Math.max(1, p), totalPages))}
+            />
         </div>
     );
 }
 
 // ---------------------------------------------------------------------------
-// Onglet 2 — Entrées sans vente
+// Cellules partagées
 // ---------------------------------------------------------------------------
 
-function TabEntreesSansVente({ rows, magasin }: { rows: PgStockSansVenteRow[]; magasin: string }) {
-    type SK = keyof PgStockSansVenteRow;
-
-    const [filterFournisseur, setFilterFournisseur] = useState("");
-    const [filterAnnee, setFilterAnnee] = useState("");
-    const [search, setSearch] = useState("");
-
-    const baseRows = useMemo(() => rows.filter(r => r.stock_actuel !== 0), [rows]);
-
-    const fournisseurs = useMemo(() =>
-        [...new Set(baseRows.map(r => r.fournisseur).filter(Boolean))].sort((a, b) => a.localeCompare(b, "fr")),
-        [baseRows]
-    );
-    const annees = useMemo(() =>
-        [...new Set(baseRows.map(r => getYear(r.derniere_entree)).filter(Boolean))].sort((a, b) => b.localeCompare(a)),
-        [baseRows]
-    );
-
-    const filtered = useMemo(() => {
-        const q = search.trim().toLowerCase();
-        return baseRows.filter(r =>
-            (!filterFournisseur || r.fournisseur === filterFournisseur) &&
-            (!filterAnnee || getYear(r.derniere_entree) === filterAnnee) &&
-            (!q || r.codein?.toLowerCase().includes(q) || r.libelle1?.toLowerCase().includes(q))
-        );
-    }, [baseRows, filterFournisseur, filterAnnee, search]);
-
-    const { sorted, sortKey, sortDir, handleSort } = useSortedRows<PgStockSansVenteRow>(
-        filtered,
-        ["stock_actuel"]
-    );
-
-    const th = (key: SK, label: string) => (
-        <th className="cursor-pointer select-none whitespace-nowrap px-3 py-2.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide hover:text-gray-900"
-            onClick={() => handleSort(key)}>
-            {label}<SortIcon col={key as string} sortKey={sortKey as string} sortDir={sortDir} />
-        </th>
-    );
-
-    async function handleExport() {
-        const ExcelJS = (await import("exceljs")).default;
-        const wb = new ExcelJS.Workbook();
-        const ws = wb.addWorksheet("Entrées sans vente");
-        ws.addRow(["CODEIN", "GENCODE", "QTE", "CODMV", "Dernière entrée"]);
-        ws.getRow(1).eachCell(cell => {
-            cell.fill = { type: "pattern", pattern: "solid", fgColor: { argb: "FF1E293B" } };
-            cell.font = { color: { argb: "FFFFFFFF" }, bold: true };
-            cell.alignment = { vertical: "middle", horizontal: "center" };
-        });
-        ws.getRow(1).height = 22;
-        for (const r of sorted) ws.addRow([r.codein, "", r.stock_actuel, "412", fmtDate(r.derniere_entree)]);
-        ws.columns = [{ width: 16 }, { width: 16 }, { width: 10 }, { width: 10 }, { width: 22 }];
-        const buffer = await wb.xlsx.writeBuffer();
-        const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = `Entrees_Sans_Vente_${magasin || "Tous"}_${new Date().toISOString().slice(0, 10)}.xlsx`;
-        a.click();
-        URL.revokeObjectURL(url);
-    }
-
-    return (
-        <div className="space-y-4">
-            <div className="flex flex-wrap items-center justify-between gap-3">
-                <div className="flex flex-wrap items-center gap-3">
-                    <div className="relative">
-                        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400 pointer-events-none" />
-                        <input
-                            type="text"
-                            value={search}
-                            onChange={e => setSearch(e.target.value)}
-                            placeholder="Code article ou libellé…"
-                            className="rounded-lg border border-gray-200 bg-white pl-8 pr-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-[220px]"
-                        />
-                    </div>
-                    <FilterSelect label="Fournisseur" value={filterFournisseur} onChange={setFilterFournisseur} options={fournisseurs} />
-                    <FilterSelect label="Année entrée" value={filterAnnee} onChange={setFilterAnnee} options={annees} />
-                    {(filterFournisseur || filterAnnee || search) && (
-                        <button
-                            onClick={() => { setFilterFournisseur(""); setFilterAnnee(""); setSearch(""); }}
-                            className="rounded-lg border border-orange-200 bg-orange-50 px-3 py-1.5 text-xs font-medium text-orange-700 hover:bg-orange-100 transition-colors"
-                        >
-                            ✕ Réinitialiser
-                        </button>
-                    )}
-                </div>
-                <div className="flex items-center gap-3">
-                    <span className="text-sm text-gray-500">{sorted.length} article{sorted.length !== 1 ? "s" : ""}</span>
-                    <button onClick={handleExport} className="flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-emerald-700 transition-colors">
-                        <Download className="w-4 h-4" />Exporter Excel
-                    </button>
-                </div>
-            </div>
-            <div className="overflow-x-auto rounded-xl border border-gray-200 bg-white shadow-sm">
-                <table className="min-w-full text-sm">
-                    <thead className="bg-gray-50 border-b border-gray-200">
-                        <tr>
-                            {th("codein", "Code article")}
-                            {th("libelle1", "Libellé")}
-                            {th("fournisseur", "Fournisseur")}
-                            {th("site", "Magasin")}
-                            {th("stock_actuel", "Stock actuel")}
-                            {th("derniere_entree", "Dernière entrée")}
-                        </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-100">
-                        {sorted.length === 0 && (
-                            <tr><td colSpan={6} className="px-3 py-8 text-center text-gray-400">Aucun article trouvé</td></tr>
-                        )}
-                        {sorted.map((row, i) => (
-                            <tr key={`${row.codein}-${row.site}-${i}`} className="hover:bg-gray-50 transition-colors">
-                                <td className="px-3 py-2 font-mono text-xs text-gray-700">{row.codein}</td>
-                                <td className="px-3 py-2 text-gray-900">{row.libelle1}</td>
-                                <td className="px-3 py-2 text-gray-700">{row.fournisseur}</td>
-                                <td className="px-3 py-2">
-                                    <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">{row.site}</span>
-                                </td>
-                                <td className="px-3 py-2 font-semibold text-amber-600">{row.stock_actuel}</td>
-                                <td className="px-3 py-2 text-gray-600 text-xs">{fmtDate(row.derniere_entree)}</td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-}
+const cellCode = (v: string) => <span className="font-mono text-xs text-gray-700">{v}</span>;
+const cellSite = (v: string) => (
+    <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">{v}</span>
+);
+const cellDate = (v: string | null) => <span className="text-gray-600 text-xs">{fmtDate(v)}</span>;
 
 // ---------------------------------------------------------------------------
-// Onglet 3 — Sans vente depuis 6 mois
+// Configuration des 3 onglets
+//
+// Définies au niveau module : leur identité doit rester stable d'un rendu à
+// l'autre, sinon les `useMemo` de StockTable se recalculent en boucle.
 // ---------------------------------------------------------------------------
 
-function TabSansVente6Mois({ rows, magasin }: { rows: PgSansVente6MoisRow[]; magasin: string }) {
-    type SK = keyof PgSansVente6MoisRow;
+type TabConfig<T> = Omit<StockTableProps<T>, "rows" | "magasin">;
 
-    const [filterFournisseur, setFilterFournisseur] = useState("");
-    const [search, setSearch] = useState("");
+const NEGATIF_CONFIG: TabConfig<PgStockNegatifRow> = {
+    fournisseurOf: r => r.fournisseur,
+    anneeOf: r => getYear(r.derniereentree),
+    searchIn: r => [r.codein, r.libelle1],
+    emptyLabel: "Aucun article en stock négatif",
+    columns: [
+        { key: "codein", label: "Code article", render: r => cellCode(r.codein) },
+        { key: "libelle1", label: "Libellé", render: r => <span className="text-gray-900">{r.libelle1}</span> },
+        { key: "fournisseur", label: "Fournisseur", render: r => <span className="text-gray-700">{r.fournisseur}</span> },
+        { key: "site", label: "Magasin", render: r => cellSite(r.site) },
+        { key: "stockdispo", label: "Stock", numeric: true, render: r => <span className="font-semibold text-red-600">{r.stockdispo}</span> },
+        { key: "dernierevente", label: "Dernière vente", render: r => cellDate(r.dernierevente) },
+        { key: "derniereentree", label: "Dernière entrée", render: r => cellDate(r.derniereentree) },
+    ],
+    excel: {
+        sheet: "Stock Négatif",
+        filePrefix: "Stock_Negatif",
+        header: ["CODEIN", "GENCODE", "QTE", "CODMV", "Dernière vente", "Dernière entrée"],
+        widths: [16, 16, 10, 10, 16, 22],
+        row: r => [r.codein, "", Math.abs(r.stockdispo), "503", fmtDate(r.dernierevente), fmtDate(r.derniereentree)],
+    },
+};
 
-    const fournisseurs = useMemo(() =>
-        [...new Set(rows.map(r => r.fournisseur).filter(Boolean))].sort((a, b) => a.localeCompare(b, "fr")),
-        [rows]
-    );
+const SANS_VENTE_CONFIG: TabConfig<PgStockSansVenteRow> = {
+    fournisseurOf: r => r.fournisseur,
+    anneeOf: r => getYear(r.derniere_entree),
+    searchIn: r => [r.codein, r.libelle1],
+    emptyLabel: "Aucun article trouvé",
+    columns: [
+        { key: "codein", label: "Code article", render: r => cellCode(r.codein) },
+        { key: "libelle1", label: "Libellé", render: r => <span className="text-gray-900">{r.libelle1}</span> },
+        { key: "fournisseur", label: "Fournisseur", render: r => <span className="text-gray-700">{r.fournisseur}</span> },
+        { key: "site", label: "Magasin", render: r => cellSite(r.site) },
+        { key: "stock_actuel", label: "Stock actuel", numeric: true, render: r => <span className="font-semibold text-amber-600">{r.stock_actuel}</span> },
+        { key: "derniere_entree", label: "Dernière entrée", render: r => cellDate(r.derniere_entree) },
+    ],
+    excel: {
+        sheet: "Entrées sans vente",
+        filePrefix: "Entrees_Sans_Vente",
+        header: ["CODEIN", "GENCODE", "QTE", "CODMV", "Dernière entrée"],
+        widths: [16, 16, 10, 10, 22],
+        row: r => [r.codein, "", r.stock_actuel, "412", fmtDate(r.derniere_entree)],
+    },
+};
 
-    const filtered = useMemo(() => {
-        const q = search.trim().toLowerCase();
-        return rows.filter(r =>
-            (!filterFournisseur || r.fournisseur === filterFournisseur) &&
-            (!q || r.codein?.toLowerCase().includes(q) || r.libelle1?.toLowerCase().includes(q))
-        );
-    }, [rows, filterFournisseur, search]);
-
-    const { sorted, sortKey, sortDir, handleSort } = useSortedRows<PgSansVente6MoisRow & Record<string, unknown>>(
-        filtered as (PgSansVente6MoisRow & Record<string, unknown>)[],
-        ["stock_actuel", "jours_sans_vente"]
-    );
-
-    const th = (key: SK, label: string) => (
-        <th className="cursor-pointer select-none whitespace-nowrap px-3 py-2.5 text-left text-xs font-semibold text-gray-600 uppercase tracking-wide hover:text-gray-900"
-            onClick={() => handleSort(key as string & keyof (PgSansVente6MoisRow & Record<string, unknown>))}>
-            {label}<SortIcon col={key as string} sortKey={sortKey as string} sortDir={sortDir} />
-        </th>
-    );
-
-    async function handleExport() {
-        const ExcelJS = (await import("exceljs")).default;
-        const wb = new ExcelJS.Workbook();
-        const ws = wb.addWorksheet("Sans vente 6 mois");
-        ws.addRow(["CODEIN", "GENCODE", "QTE", "CODMV", "Dernière vente"]);
-        ws.getRow(1).eachCell(cell => {
-            cell.fill = { type: "pattern", pattern: "solid", fgColor: { argb: "FF1E293B" } };
-            cell.font = { color: { argb: "FFFFFFFF" }, bold: true };
-            cell.alignment = { vertical: "middle", horizontal: "center" };
-        });
-        ws.getRow(1).height = 22;
-        for (const r of sorted) ws.addRow([r.codein, "", r.stock_actuel, "412", fmtDate(r.derniere_vente)]);
-        ws.columns = [{ width: 16 }, { width: 16 }, { width: 10 }, { width: 10 }, { width: 22 }];
-        const buffer = await wb.xlsx.writeBuffer();
-        const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = `Sans_Vente_6Mois_${magasin || "Tous"}_${new Date().toISOString().slice(0, 10)}.xlsx`;
-        a.click();
-        URL.revokeObjectURL(url);
-    }
-
-    return (
-        <div className="space-y-4">
-            <div className="flex flex-wrap items-center justify-between gap-3">
-                <div className="flex flex-wrap items-center gap-3">
-                    <div className="relative">
-                        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400 pointer-events-none" />
-                        <input
-                            type="text"
-                            value={search}
-                            onChange={e => setSearch(e.target.value)}
-                            placeholder="Code article ou libellé…"
-                            className="rounded-lg border border-gray-200 bg-white pl-8 pr-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-[220px]"
-                        />
-                    </div>
-                    <FilterSelect label="Fournisseur" value={filterFournisseur} onChange={setFilterFournisseur} options={fournisseurs} />
-                    {(filterFournisseur || search) && (
-                        <button
-                            onClick={() => { setFilterFournisseur(""); setSearch(""); }}
-                            className="rounded-lg border border-orange-200 bg-orange-50 px-3 py-1.5 text-xs font-medium text-orange-700 hover:bg-orange-100 transition-colors"
-                        >
-                            ✕ Réinitialiser
-                        </button>
-                    )}
-                </div>
-                <div className="flex items-center gap-3">
-                    <span className="text-sm text-gray-500">{sorted.length} article{sorted.length !== 1 ? "s" : ""}</span>
-                    <button onClick={handleExport} className="flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-emerald-700 transition-colors">
-                        <Download className="w-4 h-4" />Exporter Excel
-                    </button>
-                </div>
-            </div>
-            <div className="overflow-x-auto rounded-xl border border-gray-200 bg-white shadow-sm">
-                <table className="min-w-full text-sm">
-                    <thead className="bg-gray-50 border-b border-gray-200">
-                        <tr>
-                            {th("codein", "Code article")}
-                            {th("libelle1", "Libellé")}
-                            {th("fournisseur", "Fournisseur")}
-                            {th("site", "Magasin")}
-                            {th("stock_actuel", "Stock actuel")}
-                            {th("derniere_vente", "Dernière vente")}
-                            {th("jours_sans_vente", "Jours sans vente")}
-                            {th("derniere_entree", "Dernière entrée")}
-                        </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-100">
-                        {sorted.length === 0 && (
-                            <tr><td colSpan={8} className="px-3 py-8 text-center text-gray-400">Aucun article trouvé</td></tr>
-                        )}
-                        {sorted.map((row, i) => (
-                            <tr key={`${row.codein}-${row.site}-${i}`} className="hover:bg-gray-50 transition-colors">
-                                <td className="px-3 py-2 font-mono text-xs text-gray-700">{row.codein}</td>
-                                <td className="px-3 py-2 text-gray-900">{row.libelle1}</td>
-                                <td className="px-3 py-2 text-gray-700">{row.fournisseur}</td>
-                                <td className="px-3 py-2">
-                                    <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">{row.site}</span>
-                                </td>
-                                <td className="px-3 py-2 font-semibold text-amber-600">{row.stock_actuel}</td>
-                                <td className="px-3 py-2 text-gray-600 text-xs">{fmtDate(row.derniere_vente)}</td>
-                                <td className="px-3 py-2 text-right tabular-nums font-medium"
-                                    style={{ color: row.jours_sans_vente && row.jours_sans_vente > 365 ? "#ef4444" : "#6b7280" }}>
-                                    {row.jours_sans_vente != null ? row.jours_sans_vente.toLocaleString("fr-FR") : "—"}
-                                </td>
-                                <td className="px-3 py-2 text-gray-600 text-xs">{fmtDate(row.derniere_entree)}</td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-}
+const SANS_VENTE_6MOIS_CONFIG: TabConfig<PgSansVente6MoisRow> = {
+    fournisseurOf: r => r.fournisseur,
+    searchIn: r => [r.codein, r.libelle1],
+    emptyLabel: "Aucun article trouvé",
+    columns: [
+        { key: "codein", label: "Code article", render: r => cellCode(r.codein) },
+        { key: "libelle1", label: "Libellé", render: r => <span className="text-gray-900">{r.libelle1}</span> },
+        { key: "fournisseur", label: "Fournisseur", render: r => <span className="text-gray-700">{r.fournisseur}</span> },
+        { key: "site", label: "Magasin", render: r => cellSite(r.site) },
+        { key: "stock_actuel", label: "Stock actuel", numeric: true, render: r => <span className="font-semibold text-amber-600">{r.stock_actuel}</span> },
+        { key: "derniere_vente", label: "Dernière vente", render: r => cellDate(r.derniere_vente) },
+        {
+            key: "jours_sans_vente",
+            label: "Jours sans vente",
+            numeric: true,
+            render: r => (
+                <span
+                    className="tabular-nums font-medium"
+                    style={{ color: r.jours_sans_vente && r.jours_sans_vente > 365 ? "#ef4444" : "#6b7280" }}
+                >
+                    {r.jours_sans_vente != null ? r.jours_sans_vente.toLocaleString("fr-FR") : "—"}
+                </span>
+            ),
+        },
+        { key: "derniere_entree", label: "Dernière entrée", render: r => cellDate(r.derniere_entree) },
+    ],
+    excel: {
+        sheet: "Sans vente 6 mois",
+        filePrefix: "Sans_Vente_6Mois",
+        header: ["CODEIN", "GENCODE", "QTE", "CODMV", "Dernière vente"],
+        widths: [16, 16, 10, 10, 22],
+        row: r => [r.codein, "", r.stock_actuel, "412", fmtDate(r.derniere_vente)],
+    },
+};
 
 // ---------------------------------------------------------------------------
 // Composant principal avec onglets
@@ -481,6 +494,10 @@ const TABS = [
 
 type TabKey = typeof TABS[number]["key"];
 
+function isTabKey(v: string): v is TabKey {
+    return TABS.some(t => t.key === v);
+}
+
 interface Props {
     rowsNegatif: PgStockNegatifRow[];
     rowsSansVente: PgStockSansVenteRow[];
@@ -492,25 +509,59 @@ interface Props {
 
 export function GestionStockClient({ rowsNegatif, rowsSansVente, rowsSansVente6Mois, magasin, tab, sites }: Props) {
     const router = useRouter();
-    const activeTab: TabKey = (TABS.some(t => t.key === tab) ? tab : "negatif") as TabKey;
+    const initialTab: TabKey = isTabKey(tab) ? tab : "negatif";
+
+    const [activeTab, setActiveTab] = useState<TabKey>(initialTab);
+    // Le changement d'onglet est purement client : les 3 jeux de données sont déjà chargés.
+    const [switching, startSwitch] = useTransition();
+    // Le changement de magasin, lui, relance les requêtes serveur.
+    const [navigating, startNavigation] = useTransition();
+
+    // Resynchronise l'onglet si l'URL change côté serveur (retour arrière, lien direct).
+    const [urlTab, setUrlTab] = useState(initialTab);
+    if (urlTab !== initialTab) {
+        setUrlTab(initialTab);
+        setActiveTab(initialTab);
+    }
+
+    function buildUrl(nextTab: TabKey, nextMagasin: string) {
+        const params = new URLSearchParams();
+        if (nextMagasin) params.set("magasin", nextMagasin);
+        params.set("tab", nextTab);
+        return `/stock-negatif?${params.toString()}`;
+    }
 
     function handleMagasinChange(e: React.ChangeEvent<HTMLSelectElement>) {
         const val = e.target.value;
-        const params = new URLSearchParams();
-        if (val) params.set("magasin", val);
-        params.set("tab", activeTab);
-        router.push(`/stock-negatif?${params.toString()}`);
+        startNavigation(() => {
+            router.push(buildUrl(activeTab, val));
+        });
     }
 
     function handleTabChange(key: TabKey) {
-        const params = new URLSearchParams();
-        if (magasin) params.set("magasin", magasin);
-        params.set("tab", key);
-        router.push(`/stock-negatif?${params.toString()}`);
+        if (key === activeTab || switching) return;
+        // Mise à jour de l'URL sans navigation serveur : aucune requête SQL n'est rejouée.
+        window.history.replaceState(null, "", buildUrl(key, magasin));
+        startSwitch(() => setActiveTab(key));
     }
 
+    const counts: Record<TabKey, number> = useMemo(() => ({
+        "negatif": rowsNegatif.length,
+        "sans-vente": rowsSansVente.length,
+        "sans-vente-6mois": rowsSansVente6Mois.length,
+    }), [rowsNegatif, rowsSansVente, rowsSansVente6Mois]);
+
+    const busy = switching || navigating;
+    const showLoader = useDelayedFlag(busy);
+    const loaderMessage = navigating ? "Chargement des données" : "Préparation de l'onglet";
+    const loaderSubMessage = navigating
+        ? "Interrogation du stock pour le magasin sélectionné…"
+        : "Application des filtres et du tri…";
+
     return (
-        <div className="space-y-4">
+        <div className="space-y-4" aria-busy={busy}>
+            {showLoader && <LoadingModal message={loaderMessage} subMessage={loaderSubMessage} />}
+
             {/* Toolbar */}
             <div className="flex flex-wrap items-center gap-3">
                 <div className="flex items-center gap-2">
@@ -518,7 +569,8 @@ export function GestionStockClient({ rowsNegatif, rowsSansVente, rowsSansVente6M
                     <select
                         value={magasin}
                         onChange={handleMagasinChange}
-                        className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        disabled={navigating}
+                        className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:cursor-wait disabled:opacity-60"
                     >
                         <option value="">Tous les magasins</option>
                         {sites.map(s => (
@@ -531,37 +583,45 @@ export function GestionStockClient({ rowsNegatif, rowsSansVente, rowsSansVente6M
             {/* Tabs */}
             <div className="border-b border-gray-200">
                 <nav className="-mb-px flex gap-1">
-                    {TABS.map(t => (
-                        <button
-                            key={t.key}
-                            onClick={() => handleTabChange(t.key)}
-                            className={[
-                                "px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap",
-                                activeTab === t.key
-                                    ? "border-blue-600 text-blue-600"
-                                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                            ].join(" ")}
-                        >
-                            {t.label}
-                            <span className={[
-                                "ml-2 rounded-full px-2 py-0.5 text-xs font-semibold",
-                                activeTab === t.key ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-500",
-                            ].join(" ")}>
-                                {t.key === "negatif"
-                                ? rowsNegatif.length
-                                : t.key === "sans-vente"
-                                    ? rowsSansVente.filter(r => r.stock_actuel !== 0).length
-                                    : rowsSansVente6Mois.length}
-                            </span>
-                        </button>
-                    ))}
+                    {TABS.map(t => {
+                        const isActive = activeTab === t.key;
+                        return (
+                            <button
+                                key={t.key}
+                                onClick={() => handleTabChange(t.key)}
+                                disabled={busy}
+                                aria-current={isActive ? "page" : undefined}
+                                className={[
+                                    "px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap",
+                                    isActive
+                                        ? "border-blue-600 text-blue-600"
+                                        : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                                    busy ? "cursor-wait" : "",
+                                ].join(" ")}
+                            >
+                                {t.label}
+                                <span className={[
+                                    "ml-2 rounded-full px-2 py-0.5 text-xs font-semibold",
+                                    isActive ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-500",
+                                ].join(" ")}>
+                                    {counts[t.key].toLocaleString("fr-FR")}
+                                </span>
+                            </button>
+                        );
+                    })}
                 </nav>
             </div>
 
             {/* Tab content */}
-            {activeTab === "negatif" && <TabStockNegatif rows={rowsNegatif} magasin={magasin} />}
-            {activeTab === "sans-vente" && <TabEntreesSansVente rows={rowsSansVente} magasin={magasin} />}
-            {activeTab === "sans-vente-6mois" && <TabSansVente6Mois rows={rowsSansVente6Mois} magasin={magasin} />}
+            {activeTab === "negatif" && (
+                <StockTable<PgStockNegatifRow> rows={rowsNegatif} magasin={magasin} {...NEGATIF_CONFIG} />
+            )}
+            {activeTab === "sans-vente" && (
+                <StockTable<PgStockSansVenteRow> rows={rowsSansVente} magasin={magasin} {...SANS_VENTE_CONFIG} />
+            )}
+            {activeTab === "sans-vente-6mois" && (
+                <StockTable<PgSansVente6MoisRow> rows={rowsSansVente6Mois} magasin={magasin} {...SANS_VENTE_6MOIS_CONFIG} />
+            )}
         </div>
     );
 }

src/app/api/admin/ai-chat/route.ts

@@ -1,491 +0,0 @@
-import { NextRequest } from "next/server";
-import { auth } from "@/lib/auth";
-import fs from "fs/promises";
-import path from "path";
-import { GoogleGenAI, Type } from "@google/genai";
-
-interface AiConfig {
-    provider: "openrouter" | "google";
-    openRouterKey?: string;
-    googleAiKey?: string;
-    googleAiModel?: string;
-}
-
-async function getAiConfig(): Promise<AiConfig> {
-    try {
-        const configFile = path.join(process.cwd(), "data", ".db-config.json");
-        const data = await fs.readFile(configFile, "utf-8");
-        const config = JSON.parse(data);
-        return {
-            provider: config.aiProvider ?? "openrouter",
-            openRouterKey: config.openRouterKey ?? process.env.OPENROUTER_API_KEY,
-            googleAiKey: config.googleAiKey ?? process.env.GOOGLE_AI_KEY,
-            googleAiModel: config.googleAiModel ?? "gemini-2.0-flash",
-        };
-    } catch {
-        return {
-            provider: "openrouter",
-            openRouterKey: process.env.OPENROUTER_API_KEY,
-        };
-    }
-}
-
-const OPENROUTER_URL = "https://openrouter.ai/api/v1/chat/completions";
-const FF_API_BASE = process.env.FF_API_BASE_URL ?? "https://api.ffnancy.fr";
-
-// ─── Tool definitions ────────────────────────────────────────────────────────
-
-const TOOLS_OPENROUTER = [
-    {
-        type: "function",
-        function: {
-            name: "call_api",
-            description: "Appelle un endpoint de l'API FF Nancy pour récupérer des données (articles, stock, ventes, fournisseurs, commandes, etc.).",
-            parameters: {
-                type: "object",
-                properties: {
-                    endpoint: {
-                        type: "string",
-                        description: "Chemin de l'endpoint, ex: /api/articles?codefou=FOU001&limit=50 ou /api/stock/article/12345",
-                    },
-                },
-                required: ["endpoint"],
-            },
-        },
-    },
-];
-
-const TOOLS_GOOGLE = [{
-    functionDeclarations: [
-        {
-            name: "call_api",
-            description: "Appelle un endpoint de l'API FF Nancy pour récupérer des données (articles, stock, ventes, fournisseurs, commandes, etc.).",
-            parameters: {
-                type: Type.OBJECT,
-                properties: {
-                    endpoint: {
-                        type: Type.STRING,
-                        description: "Chemin de l'endpoint, ex: /api/articles?codefou=FOU001&limit=50 ou /api/stock/article/12345",
-                    },
-                },
-                required: ["endpoint"],
-            },
-        },
-    ],
-}];
-
-// ─── API caller ───────────────────────────────────────────────────────────────
-
-async function callFfApi(endpoint: string): Promise<string> {
-    // Sécurité : uniquement GET, uniquement les endpoints documentés
-    const allowedPrefixes = [
-        "/api/health", "/api/sync", "/api/schema",
-        "/api/articles", "/api/stock", "/api/fournisseurs",
-        "/api/commandes", "/api/mouvements", "/api/performance",
-        "/api/publicites", "/api/commandes-auto",
-    ];
-    const isAllowed = allowedPrefixes.some(p => endpoint.startsWith(p));
-    if (!isAllowed) {
-        return `Erreur: endpoint non autorisé — "${endpoint}". Utilise uniquement les endpoints documentés.`;
-    }
-
-    try {
-        const url = `${FF_API_BASE}${endpoint}`;
-        const res = await fetch(url, {
-            headers: { "Content-Type": "application/json" },
-            cache: "no-store",
-        });
-
-        if (!res.ok) {
-            return `Erreur API ${res.status}: ${await res.text()}`;
-        }
-
-        const data = await res.json();
-        const text = JSON.stringify(data);
-
-        // Tronquer si trop long (max 6000 chars)
-        if (text.length > 6000) {
-            return text.substring(0, 6000) + `\n...(tronqué, ${text.length} caractères total)`;
-        }
-        return text;
-    } catch (err) {
-        const msg = err instanceof Error ? err.message : "Erreur inconnue";
-        return `Erreur réseau: ${msg}`;
-    }
-}
-
-// ─── System prompt ────────────────────────────────────────────────────────────
-
-const SYSTEM_PROMPT = `Tu es un assistant IA administrateur expert pour l'application CollectFlow, un outil de gestion de gammes produits et d'analyse des ventes pour des magasins de distribution alimentaire (Foirfouille Nancy).
-
-## Outil disponible
-- \`call_api\` : appelle un endpoint GET de l'API FF Nancy et retourne les données JSON
-
-## API FF Nancy — Documentation complète
-Base URL : ${FF_API_BASE}
-Format des dates : YYYY-MM-DD
-Identifiants articles : toujours \`no_id\` (entier interne)
-Codes site : ex 000, 001, 002…
-
-### Santé / Infra
-- GET /api/health — vérifie que l'API et PostgreSQL répondent
-- GET /api/sync/status — état de la synchronisation en cours
-- GET /api/schema/tables?search=nom — liste les tables PG
-- GET /api/schema/tables/:nom — colonnes d'une table
-- GET /api/schema/top?limit=10 — tables les plus peuplées
-
-### Articles
-- GET /api/articles?search=&codein=&ean=&codefou=&actif=1&page=1&limit=50 — liste avec PA, GTIN, fournisseur principal (max 500/page)
-- GET /api/articles/:id — détail complet d'un article (no_id)
-- GET /api/articles/:id/referentiel — fournisseurs, tarifs, codes EAN
-- GET /api/articles/:id/mouvements — historique des mouvements
-- GET /api/articles/:id/mensuel — CA mensuel de l'article
-
-Le champ **prix d'achat (PA)** est retourné directement dans GET /api/articles (champ \`pa\` ou \`prix_achat\`).
-Pour un article précis : GET /api/articles/:id/referentiel pour voir tous les tarifs fournisseurs.
-
-### Stock
-- GET /api/stock?site=001&page=1&limit=100 — stock global tous articles (max 1000/page)
-- GET /api/stock/article/:id — stock par site pour un article (no_id) → contient aussi \`prmp\` (Prix de Revient Moyen Pondéré)
-- GET /api/stock/site/:site — tous les articles d'un site donné
-- GET /api/stock/article/:id/historique — historique stock de l'article
-- GET /api/stock/article/:id/periode?dateDebut=&dateFin= — stock sur période
-- GET /api/stock/valorisation — valeur totale du stock par site
-
-Le **PRMP** (prix réel moyen pondéré) est dans GET /api/stock/article/:id, champ \`prmp\` par site.
-
-### Fournisseurs
-- GET /api/fournisseurs?search=nom — liste des fournisseurs (champs : code, nom)
-- GET /api/fournisseurs/:code/articles — articles du fournisseur
-- GET /api/fournisseurs/:code/commandes — commandes du fournisseur
-
-### Commandes
-- GET /api/commandes?dateDebut=&dateFin=&codefou= — liste des commandes fournisseurs
-- GET /api/commandes/:noCommande — détail d'une commande + ses lignes
-- GET /api/commandes/receptions/liste — liste des réceptions
-
-### Commandes automatiques
-- GET /api/commandes-auto?site=&codefou= — résumé des propositions par fournisseur/site avec comparaison franco
-  Champs : franco_ht, montant_propo_ht, franco_atteint (OUI/NON/N/A), ecart_franco
-- GET /api/commandes-auto/:codefou?site= — détail d'un fournisseur : résumé + liste des articles proposés avec stock et montant
-
-### Mouvements
-- GET /api/mouvements/types — types de mouvements disponibles
-- GET /api/mouvements/articles?dateDebut=&dateFin=&site= — mouvements par article
-- GET /api/mouvements/entrees?dateDebut=&dateFin= — entrées marchandises
-- GET /api/mouvements/regularisations?dateDebut=&dateFin= — régularisations inventaire
-- GET /api/mouvements/reglements?dateDebut=&dateFin= — règlements
-- GET /api/mouvements/synthese?dateDebut=&dateFin=&site= — synthèse des mouvements
-
-### Performance / CA
-- GET /api/performance/ca?dateDebut=&dateFin=&site=&groupBy=mois — CA global (groupBy: jour ou mois)
-- GET /api/performance/hitparade?dateDebut=&dateFin=&site=&limit=20&groupBy=ca — top articles (groupBy: qte, ca ou marge)
-- GET /api/performance/ca/nomenclature?dateDebut=&dateFin=&site=&niveau= — CA par nomenclature
-- GET /api/performance/ca/fournisseur?dateDebut=&dateFin=&site= — CA par fournisseur
-- GET /api/performance/ca/gamme?dateDebut=&dateFin=&site= — CA par gamme (A/B/C/D/Z)
-- GET /api/performance/dashboard — indicateurs résumés pour dashboard
-
-### Publicités
-- GET /api/publicites?search=&site=&dateDebut=&dateFin=&page=1&limit=50 — liste des publicités
-- GET /api/publicites/:code?site= — détail d'une publicité
-
-## Contexte métier CollectFlow
-- Application de gestion de gammes pour magasins Foirfouille Nancy
-- Gammes A/B/C/D/Z : A=pilier, B=bonne rotation, C=performance, D=saisonnier/niche, Z=sortie
-- Les ventes sont suivies par magasin (site) et par mois
-- Les utilisateurs arbitrent les classifications gamme par fournisseur
-
-## Stratégie d'analyse
-1. Si tu ne connais pas un code fournisseur ou un no_id, commence par chercher avec /api/fournisseurs?search= ou /api/articles?search=
-2. Enchaîne plusieurs appels \`call_api\` si nécessaire pour compléter l'analyse
-3. Pour le prix d'achat : utilise /api/articles?codefou=CODE (champ pa) ou /api/articles/:id/referentiel
-4. Pour le PRMP (prix réel) : utilise /api/stock/article/:id (champ prmp par site)
-5. Ajoute toujours \`limit\` pour éviter des réponses trop volumineuses (limit=20 à 100 selon le contexte)
-
-## Format de réponse — IMPORTANT
-- Réponds TOUJOURS en **Markdown** : titres ##, **gras**, tableaux \`| col | col |\`, listes \`-\`, blocs de code
-- N'utilise JAMAIS de HTML (<div>, <table>, <b>, <br>, etc.)
-- Réponds toujours en français
-- Sois précis, structuré et complet — ne tronque jamais ta réponse
-- Si les données sont nombreuses, résume et mets en avant les points clés`;
-
-// ─── OpenRouter handler ───────────────────────────────────────────────────────
-
-async function callOpenRouter(
-    messages: object[],
-    model: string,
-    apiKey: string,
-    useTools: boolean,
-    stream: boolean
-): Promise<Response> {
-    const body: Record<string, unknown> = {
-        model,
-        messages,
-        temperature: 0.3,
-        max_tokens: 8192,
-    };
-    if (useTools) {
-        body.tools = TOOLS_OPENROUTER;
-        body.tool_choice = "auto";
-    }
-    if (stream) {
-        body.stream = true;
-        body.stream_options = { include_usage: true };
-    }
-    return fetch(OPENROUTER_URL, {
-        method: "POST",
-        headers: {
-            Authorization: `Bearer ${apiKey}`,
-            "Content-Type": "application/json",
-            "HTTP-Referer": "https://collectflow.app",
-            "X-Title": "CollectFlow Admin Chat",
-        },
-        body: JSON.stringify(body),
-    });
-}
-
-// ─── Google AI handler ────────────────────────────────────────────────────────
-
-async function handleGoogleAi(messages: Array<{ role: string; content: string }>, config: AiConfig): Promise<Response> {
-    if (!config.googleAiKey) {
-        return new Response(JSON.stringify({ error: "No Google AI key configured" }), { status: 500 });
-    }
-
-    const model = config.googleAiModel ?? "gemini-2.0-flash";
-    const encoder = new TextEncoder();
-
-    const stream = new ReadableStream({
-        async start(controller) {
-            function send(event: object) {
-                controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
-            }
-
-            try {
-                const ai = new GoogleGenAI({ apiKey: config.googleAiKey! });
-
-                const contents: Array<{ role: string; parts: any[] }> = [
-                    ...messages.map((m) => ({
-                        role: m.role === "assistant" ? "model" : "user",
-                        parts: [{ text: m.content }],
-                    })),
-                ];
-
-                for (let round = 0; round < 10; round++) {
-                    const streamResponse = await ai.models.generateContentStream({
-                        model,
-                        contents: contents as any,
-                        config: {
-                            systemInstruction: SYSTEM_PROMPT,
-                            tools: TOOLS_GOOGLE as any,
-                            maxOutputTokens: 8192,
-                        },
-                    });
-
-                    let collectedText = "";
-                    const collectedParts: any[] = [];
-
-                    for await (const chunk of streamResponse) {
-                        const text = chunk.text;
-                        if (text) {
-                            collectedText += text;
-                            send({ type: "text", content: text });
-                        }
-                        const parts = chunk.candidates?.[0]?.content?.parts;
-                        if (parts) collectedParts.push(...parts);
-                    }
-
-                    const fnCallParts = collectedParts.filter((p: any) => p.functionCall);
-
-                    if (fnCallParts.length === 0) break;
-
-                    contents.push({ role: "model", parts: collectedText ? collectedParts : fnCallParts });
-
-                    const toolResultParts: Array<{ functionResponse: { name: string; response: { output: string } } }> = [];
-                    for (const part of fnCallParts) {
-                        const fn = part.functionCall as { name: string; args: Record<string, unknown> };
-                        const args = fn.args ?? {};
-                        send({ type: "tool_start", name: fn.name, args });
-
-                        let result = "";
-                        if (fn.name === "call_api") {
-                            result = await callFfApi(args.endpoint as string);
-                        } else {
-                            result = `Outil inconnu: ${fn.name}`;
-                        }
-
-                        send({ type: "tool_result", name: fn.name, result: result.substring(0, 500) + (result.length > 500 ? "..." : "") });
-                        toolResultParts.push({ functionResponse: { name: fn.name, response: { output: result } } });
-                    }
-
-                    contents.push({ role: "user", parts: toolResultParts as any });
-                }
-
-                send({ type: "usage", prompt_tokens: 0, completion_tokens: 0 });
-                send({ type: "done" });
-                controller.close();
-            } catch (err) {
-                const msg = err instanceof Error ? err.message : "Erreur inconnue";
-                send({ type: "error", message: msg });
-                controller.close();
-            }
-        },
-    });
-
-    return new Response(stream, {
-        headers: {
-            "Content-Type": "text/event-stream",
-            "Cache-Control": "no-cache",
-            Connection: "keep-alive",
-        },
-    });
-}
-
-// ─── POST handler ─────────────────────────────────────────────────────────────
-
-export async function POST(req: NextRequest) {
-    const session = await auth();
-    if (!session || (session.user as any)?.role !== "admin") {
-        return new Response(JSON.stringify({ error: "Unauthorized" }), { status: 403 });
-    }
-
-    const { messages, model } = await req.json();
-    const aiConfig = await getAiConfig();
-
-    if (aiConfig.provider === "google") {
-        return handleGoogleAi(messages, aiConfig);
-    }
-
-    const apiKey = aiConfig.openRouterKey;
-    if (!apiKey) {
-        return new Response(JSON.stringify({ error: "No OpenRouter API key configured" }), { status: 500 });
-    }
-
-    const fullMessages: object[] = [
-        { role: "system", content: SYSTEM_PROMPT },
-        ...messages,
-    ];
-
-    const encoder = new TextEncoder();
-    const stream = new ReadableStream({
-        async start(controller) {
-            function send(event: object) {
-                controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
-            }
-
-            try {
-                let currentMessages = [...fullMessages];
-                let totalPromptTokens = 0;
-                let totalCompletionTokens = 0;
-                let directAnswer: string | null = null;
-
-                for (let round = 0; round < 10; round++) {
-                    const res = await callOpenRouter(currentMessages, model, apiKey, true, false);
-                    if (!res.ok) {
-                        send({ type: "error", message: `OpenRouter error: ${await res.text()}` });
-                        controller.close();
-                        return;
-                    }
-
-                    const data = await res.json();
-                    if (data.usage) {
-                        totalPromptTokens += data.usage.prompt_tokens ?? 0;
-                        totalCompletionTokens += data.usage.completion_tokens ?? 0;
-                    }
-
-                    const assistantMessage = data.choices?.[0]?.message;
-                    if (!assistantMessage) break;
-                    currentMessages.push(assistantMessage);
-
-                    const toolCalls = assistantMessage.tool_calls;
-                    if (!toolCalls || toolCalls.length === 0) {
-                        directAnswer = assistantMessage.content ?? "";
-                        break;
-                    }
-
-                    const toolResults: object[] = [];
-                    for (const tc of toolCalls) {
-                        const fnName = tc.function?.name;
-                        let args: Record<string, unknown> = {};
-                        try { args = JSON.parse(tc.function?.arguments ?? "{}"); } catch { /* ignore */ }
-
-                        send({ type: "tool_start", name: fnName, args });
-
-                        let result = "";
-                        if (fnName === "call_api") {
-                            result = await callFfApi(args.endpoint as string);
-                        } else {
-                            result = `Outil inconnu: ${fnName}`;
-                        }
-
-                        send({ type: "tool_result", name: fnName, result: result.substring(0, 500) + (result.length > 500 ? "..." : "") });
-                        toolResults.push({ role: "tool", tool_call_id: tc.id, content: result });
-                    }
-                    currentMessages.push(...toolResults);
-                }
-
-                if (directAnswer !== null) {
-                    send({ type: "text", content: directAnswer });
-                    send({ type: "usage", prompt_tokens: totalPromptTokens, completion_tokens: totalCompletionTokens });
-                    send({ type: "done" });
-                    controller.close();
-                    return;
-                }
-
-                // Final streaming call after tool use
-                const finalRes = await callOpenRouter(currentMessages, model, apiKey, false, true);
-                if (!finalRes.ok) {
-                    send({ type: "error", message: `OpenRouter error: ${await finalRes.text()}` });
-                    controller.close();
-                    return;
-                }
-
-                const reader = finalRes.body?.getReader();
-                if (!reader) { controller.close(); return; }
-
-                const textDecoder = new TextDecoder();
-                let buffer = "";
-                let finalUsage: { prompt_tokens?: number; completion_tokens?: number } | null = null;
-
-                while (true) {
-                    const { done, value } = await reader.read();
-                    if (done) break;
-                    buffer += textDecoder.decode(value, { stream: true });
-                    const lines = buffer.split("\n");
-                    buffer = lines.pop() ?? "";
-                    for (const line of lines) {
-                        if (!line.startsWith("data: ")) continue;
-                        const raw = line.slice(6).trim();
-                        if (raw === "[DONE]") continue;
-                        try {
-                            const chunk = JSON.parse(raw);
-                            const delta = chunk.choices?.[0]?.delta?.content;
-                            if (delta) send({ type: "text", content: delta });
-                            if (chunk.usage) finalUsage = chunk.usage;
-                        } catch { /* ignore */ }
-                    }
-                }
-
-                if (finalUsage) {
-                    totalPromptTokens += finalUsage.prompt_tokens ?? 0;
-                    totalCompletionTokens += finalUsage.completion_tokens ?? 0;
-                }
-
-                send({ type: "usage", prompt_tokens: totalPromptTokens, completion_tokens: totalCompletionTokens });
-                send({ type: "done" });
-                controller.close();
-            } catch (err) {
-                const msg = err instanceof Error ? err.message : "Erreur inconnue";
-                send({ type: "error", message: msg });
-                controller.close();
-            }
-        },
-    });
-
-    return new Response(stream, {
-        headers: {
-            "Content-Type": "text/event-stream",
-            "Cache-Control": "no-cache",
-            Connection: "keep-alive",
-        },
-    });
-}

src/app/api/admin/ai-config/route.ts

@@ -1,24 +0,0 @@
-import { NextResponse } from "next/server";
-import { auth } from "@/lib/auth";
-import fs from "fs/promises";
-import path from "path";
-
-export async function GET() {
-    const session = await auth();
-    if (!session || (session.user as any)?.role !== "admin") {
-        return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
-    }
-
-    try {
-        const configFile = path.join(process.cwd(), "data", ".db-config.json");
-        const data = await fs.readFile(configFile, "utf-8");
-        const config = JSON.parse(data);
-        return NextResponse.json({
-            provider: config.aiProvider ?? "openrouter",
-            openRouterModel: config.openRouterModel,
-            googleAiModel: config.googleAiModel,
-        });
-    } catch {
-        return NextResponse.json({ provider: "openrouter" });
-    }
-}

src/app/api/admin/grid-warmup/route.ts

@@ -0,0 +1,144 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/lib/auth";
+import { pgGetFournisseurs } from "@/lib/pg-ff-client";
+import { getProductRows } from "@/features/grid/api/get-product-rows";
+import { listGridSuppliers } from "@/lib/grid-store";
+
+// Le préchauffage parcourt tous les fournisseurs : c'est long par nature. On rend la
+// main immédiatement et le client interroge GET pour suivre l'avancement.
+export const maxDuration = 300;
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/**
+ * Préchauffage de l'instantané de grille (`grid_rows`).
+ *
+ * L'API `/api/v1` ne calcule jamais : elle lit un instantané écrit quand la Grille est
+ * ouverte dans l'application. Sans préchauffage, un consommateur externe (ChatGPT) ne
+ * verrait donc que les fournisseurs déjà consultés à la main.
+ *
+ * Ce job calcule chaque fournisseur une fois, séquentiellement — la persistance se fait
+ * en effet de bord de `getProductRows()`. Séquentiel volontairement : le calcul est
+ * lourd en SQL, le paralléliser saturerait PostgreSQL.
+ */
+type WarmupStatus = "idle" | "running" | "success" | "error";
+
+interface WarmupJob {
+    status: WarmupStatus;
+    total: number;
+    done: number;
+    skipped: number;
+    failed: number;
+    currentFournisseur?: string;
+    startedAt: string;
+    finishedAt?: string;
+    error?: string;
+    lastErrors: string[];
+}
+
+let job: WarmupJob | null = null;
+
+function publicJob(j: WarmupJob | null) {
+    if (!j) {
+        return { status: "idle" as const, total: 0, done: 0, skipped: 0, failed: 0, lastErrors: [] };
+    }
+    return j;
+}
+
+async function requireAdmin(): Promise<NextResponse | null> {
+    const session = await auth();
+    if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    if ((session.user as { role?: string } | undefined)?.role !== "admin") {
+        return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+    return null;
+}
+
+async function runWarmup(j: WarmupJob, staleHours: number): Promise<void> {
+    try {
+        const fournisseurs = await pgGetFournisseurs();
+        // Les fournisseurs déjà calculés récemment sont sautés : un second passage
+        // coûte alors quasiment rien, ce qui rend le bouton rejouable sans crainte.
+        const existing = await listGridSuppliers();
+        const freshLimit = Date.now() - staleHours * 3600_000;
+        const fresh = new Set(
+            existing
+                .filter((s) => s.computedAt && new Date(s.computedAt).getTime() > freshLimit)
+                .map((s) => s.codeFournisseur),
+        );
+
+        j.total = fournisseurs.length;
+        console.log(`[grid-warmup] ${fournisseurs.length} fournisseurs, ${fresh.size} déjà à jour (< ${staleHours}h)`);
+
+        for (const f of fournisseurs) {
+            if (fresh.has(f.code)) {
+                j.skipped++;
+                continue;
+            }
+            j.currentFournisseur = `${f.code} — ${f.nom}`;
+            try {
+                await getProductRows({ codeFournisseur: f.code, magasin: "TOTAL", forceRefresh: true });
+                j.done++;
+            } catch (e) {
+                j.failed++;
+                const msg = `${f.code}: ${e instanceof Error ? e.message.slice(0, 120) : String(e)}`;
+                // On garde une trace des derniers échecs sans faire exploser la mémoire.
+                if (j.lastErrors.length < 10) j.lastErrors.push(msg);
+                console.error("[grid-warmup]", msg);
+            }
+        }
+
+        j.currentFournisseur = undefined;
+        j.status = "success";
+        j.finishedAt = new Date().toISOString();
+        console.log(`[grid-warmup] terminé — ${j.done} calculés, ${j.skipped} à jour, ${j.failed} en échec`);
+    } catch (e) {
+        j.status = "error";
+        j.error = e instanceof Error ? e.message : String(e);
+        j.finishedAt = new Date().toISOString();
+        console.error("[grid-warmup] échec global:", j.error);
+    }
+}
+
+/** GET /api/admin/grid-warmup — avancement du préchauffage. */
+export async function GET() {
+    const denied = await requireAdmin();
+    if (denied) return denied;
+    return NextResponse.json({ success: true, ...publicJob(job) });
+}
+
+/**
+ * POST /api/admin/grid-warmup?staleHours=24
+ * Démarre le préchauffage en arrière-plan et répond immédiatement.
+ */
+export async function POST(req: NextRequest) {
+    const denied = await requireAdmin();
+    if (denied) return denied;
+
+    if (job?.status === "running") {
+        return NextResponse.json({ success: true, ...publicJob(job) });
+    }
+
+    const raw = Number(req.nextUrl.searchParams.get("staleHours"));
+    const staleHours = Number.isFinite(raw) ? Math.min(720, Math.max(0, raw)) : 24;
+
+    job = {
+        status: "running",
+        total: 0,
+        done: 0,
+        skipped: 0,
+        failed: 0,
+        startedAt: new Date().toISOString(),
+        lastErrors: [],
+    };
+    const current = job;
+    console.log(`[grid-warmup] démarré (staleHours=${staleHours})`);
+
+    void runWarmup(current, staleHours).catch((e) => {
+        current.status = "error";
+        current.error = e instanceof Error ? e.message : String(e);
+        current.finishedAt = new Date().toISOString();
+    });
+
+    return NextResponse.json({ success: true, ...publicJob(job) });
+}

src/app/api/admin/sync/fournisseurs/route.ts

@@ -0,0 +1,100 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { asc, eq, inArray, sql } from "drizzle-orm";
+import { auth } from "@/lib/auth";
+import { db } from "@/db";
+import { syncFournisseurs } from "@/db/schema";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+async function requireAdmin(): Promise<NextResponse | null> {
+    const session = await auth();
+    if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    if ((session.user as { role?: string } | undefined)?.role !== "admin") {
+        return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+    return null;
+}
+
+/**
+ * GET — la liste complète des fournisseurs paramétrés, avec l'état de leur
+ * dernière synchronisation.
+ *
+ * Pas de pagination : quelques centaines de lignes tout au plus, et l'admin a
+ * besoin de la vue d'ensemble pour décider qui cadencer.
+ */
+export async function GET() {
+    const denied = await requireAdmin();
+    if (denied) return denied;
+
+    const rows = await db
+        .select()
+        .from(syncFournisseurs)
+        .orderBy(asc(sql`coalesce(${syncFournisseurs.nomFournisseur}, ${syncFournisseurs.codeFournisseur})`));
+
+    return NextResponse.json({
+        success: true,
+        fournisseurs: rows,
+        resume: {
+            total: rows.length,
+            actifsSql: rows.filter((r) => r.actifSql).length,
+            actifsQlik: rows.filter((r) => r.actifQlik).length,
+            desactivesAuto: rows.filter((r) => r.desactiveMotif).length,
+            enEchecSql: rows.filter((r) => r.dernierSqlStatut === "echec").length,
+            enEchecQlik: rows.filter((r) => r.dernierQlikStatut === "echec").length,
+            jamaisSql: rows.filter((r) => !r.dernierSqlAt).length,
+        },
+    });
+}
+
+const patchSchema = z.object({
+    /** Codes visés. Permet d'activer ou désactiver en masse depuis la page. */
+    codes: z.array(z.string().min(1)).min(1).max(2000),
+    actifSql: z.boolean().optional(),
+    actifQlik: z.boolean().optional(),
+}).refine((v) => v.actifSql !== undefined || v.actifQlik !== undefined, {
+    message: "Préciser au moins actifSql ou actifQlik",
+});
+
+/**
+ * PATCH — active ou désactive des fournisseurs, pour l'une ou l'autre source.
+ *
+ * Réactiver lève le motif de désactivation automatique : sans cela, un
+ * fournisseur remis en service par l'admin garderait un « aucun article »
+ * trompeur, alors même qu'il vient d'être rouvert volontairement.
+ */
+export async function PATCH(req: NextRequest) {
+    const denied = await requireAdmin();
+    if (denied) return denied;
+
+    let body: unknown;
+    try {
+        body = await req.json();
+    } catch {
+        return NextResponse.json({ error: "Corps JSON invalide" }, { status: 400 });
+    }
+    const parsed = patchSchema.safeParse(body);
+    if (!parsed.success) {
+        return NextResponse.json(
+            { error: "Paramètres invalides", details: parsed.error.issues.map((i) => i.message) },
+            { status: 400 },
+        );
+    }
+    const { codes, actifSql, actifQlik } = parsed.data;
+
+    const reactivation = actifSql === true || actifQlik === true;
+    const rows = await db
+        .update(syncFournisseurs)
+        .set({
+            ...(actifSql !== undefined ? { actifSql } : {}),
+            ...(actifQlik !== undefined ? { actifQlik } : {}),
+            ...(reactivation ? { desactiveMotif: null } : {}),
+            updatedAt: new Date(),
+        })
+        .where(codes.length === 1 ? eq(syncFournisseurs.codeFournisseur, codes[0]) : inArray(syncFournisseurs.codeFournisseur, codes))
+        .returning({ code: syncFournisseurs.codeFournisseur });
+
+    console.log(`[api/admin/sync] ${rows.length} fournisseur(s) mis à jour (sql=${actifSql} qlik=${actifQlik})`);
+    return NextResponse.json({ success: true, misAJour: rows.length });
+}

src/app/api/admin/sync/route.ts

@@ -0,0 +1,125 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { auth } from "@/lib/auth";
+import { readSyncSettings, saveSyncSettings } from "@/features/admin/api/sync-settings";
+import {
+    getSyncSchedulerState,
+    lancerRound,
+    demanderArret,
+    debutFenetre,
+    seedSyncFournisseurs,
+} from "@/features/admin/api/sync-scheduler";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+// Un lancement manuel peut enchaîner plusieurs fournisseurs.
+export const maxDuration = 300;
+
+async function requireAdmin(): Promise<NextResponse | null> {
+    const session = await auth();
+    if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    if ((session.user as { role?: string } | undefined)?.role !== "admin") {
+        return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+    return null;
+}
+
+/** GET — réglages, état courant, et prochaine ouverture de fenêtre. */
+export async function GET() {
+    const denied = await requireAdmin();
+    if (denied) return denied;
+
+    const settings = await readSyncSettings();
+    const maintenant = new Date();
+    const debut = debutFenetre(settings, maintenant);
+
+    return NextResponse.json({
+        success: true,
+        settings,
+        state: getSyncSchedulerState(),
+        /** true = on est actuellement dans la fenêtre nocturne. */
+        dansLaFenetre: debut !== null,
+        fenetreDebutAt: debut?.toISOString() ?? null,
+        maintenant: maintenant.toISOString(),
+    });
+}
+
+const settingsSchema = z.object({
+    actif: z.boolean().optional(),
+    heureDebut: z.coerce.number().int().min(0).max(23).optional(),
+    heureFin: z.coerce.number().int().min(0).max(23).optional(),
+    qlikParNuit: z.coerce.number().int().min(0).max(200).optional(),
+    sqlParQlik: z.coerce.number().int().min(1).max(500).optional(),
+    qlikMinJours: z.coerce.number().int().min(0).max(365).optional(),
+});
+
+/** PATCH — met à jour les réglages. */
+export async function PATCH(req: NextRequest) {
+    const denied = await requireAdmin();
+    if (denied) return denied;
+
+    let body: unknown;
+    try {
+        body = await req.json();
+    } catch {
+        return NextResponse.json({ error: "Corps JSON invalide" }, { status: 400 });
+    }
+    const parsed = settingsSchema.safeParse(body);
+    if (!parsed.success) {
+        return NextResponse.json(
+            { error: "Paramètres invalides", details: parsed.error.issues.map((i) => `${i.path.join(".")}: ${i.message}`) },
+            { status: 400 },
+        );
+    }
+
+    const settings = await saveSyncSettings(parsed.data);
+    return NextResponse.json({ success: true, settings });
+}
+
+const actionSchema = z.object({
+    action: z.enum(["start", "stop", "seed"]),
+    /**
+     * Lancement manuel hors de la fenêtre nocturne. Réservé à l'admin qui sait
+     * ce qu'il fait : en pleine journée, la charge est visible par les magasins.
+     */
+    forcer: z.boolean().optional(),
+});
+
+/** POST — démarre un round manuellement, l'arrête, ou resynchronise la liste. */
+export async function POST(req: NextRequest) {
+    const denied = await requireAdmin();
+    if (denied) return denied;
+
+    let body: unknown;
+    try {
+        body = await req.json();
+    } catch {
+        return NextResponse.json({ error: "Corps JSON invalide" }, { status: 400 });
+    }
+    const parsed = actionSchema.safeParse(body);
+    if (!parsed.success) {
+        return NextResponse.json({ error: "Action inconnue (start, stop ou seed)" }, { status: 400 });
+    }
+
+    if (parsed.data.action === "seed") {
+        const n = await seedSyncFournisseurs();
+        return NextResponse.json({ success: true, fournisseurs: n });
+    }
+
+    if (parsed.data.action === "stop") {
+        demanderArret();
+        return NextResponse.json({ success: true, state: getSyncSchedulerState() });
+    }
+
+    const etat = getSyncSchedulerState();
+    if (etat.enCours) {
+        return NextResponse.json({ error: "Un round est déjà en cours.", state: etat }, { status: 409 });
+    }
+
+    // Fire-and-forget : le round dure des minutes, le client suit via GET.
+    void lancerRound("manuel", parsed.data.forcer === true).catch((e) => {
+        console.error("[api/admin/sync] round manuel en échec :", e instanceof Error ? e.message : String(e));
+    });
+
+    return NextResponse.json({ success: true, state: getSyncSchedulerState() });
+}

src/app/api/diag/stock-fournisseur/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from "next/server";
+import { pgDiagFournisseurDerniereEntree } from "@/lib/pg-ff-client";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * Diagnostic de l'attribution « fournisseur de la dernière entrée » utilisée par
+ * la page Gestion de Stock.
+ *
+ * `colonneDetectee: null` signifie que `mvtart` ne porte aucune des colonnes
+ * fournisseur connues : la page retombe alors sur `artfou1.preference = 1`.
+ * `colonnesMvtart` liste ce qui existe réellement, pour compléter la liste
+ * blanche `MVTART_FOU_CANDIDATES` si le nom diffère.
+ */
+export async function GET() {
+    try {
+        return NextResponse.json(await pgDiagFournisseurDerniereEntree());
+    } catch (e) {
+        return NextResponse.json({ error: String(e) }, { status: 500 });
+    }
+}

src/app/api/ff-status/route.ts

@@ -1,10 +1,24 @@
 import { NextResponse } from "next/server";
-import { getSyncStatus } from "@/lib/api-ff-client";
+import { testFfApiConnection } from "@/features/settings/actions";
 
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/**
+ * GET /api/ff-status — état de l'API REST FF Nancy.
+ *
+ * S'appuie sur le même diagnostic que le bouton « Tester » des Paramètres, afin
+ * qu'un échec dise *pourquoi* (DNS, connexion refusée, délai dépassé, code HTTP)
+ * et *quelle adresse* a été appelée. L'ancienne version renvoyait un 503 sans
+ * détail, impossible à distinguer d'une simple erreur d'URL.
+ */
 export async function GET() {
-    const status = await getSyncStatus();
-    if (!status) {
-        return NextResponse.json({ error: "API FF Nancy non disponible" }, { status: 503 });
+    const res = await testFfApiConnection();
+    if (!res.success) {
+        return NextResponse.json(
+            { error: "API FF Nancy non disponible", url: res.url, detail: res.error },
+            { status: 503 },
+        );
     }
-    return NextResponse.json(status);
+    return NextResponse.json(res.status);
 }

src/app/api/google-ai/models/route.ts

@@ -1,61 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import fs from "fs/promises";
-import path from "path";
-
-async function getSavedGoogleKey(): Promise<string | null> {
-    try {
-        const configFile = path.join(process.cwd(), "data", ".db-config.json");
-        const data = await fs.readFile(configFile, "utf-8");
-        const config = JSON.parse(data);
-        return config.googleAiKey ?? null;
-    } catch {
-        return null;
-    }
-}
-
-export async function GET(req: NextRequest) {
-    const apiKey = req.headers.get("x-google-ai-key")
-        || process.env.GOOGLE_AI_KEY
-        || await getSavedGoogleKey();
-
-    if (!apiKey) {
-        return NextResponse.json({ error: "No Google AI key provided" }, { status: 401 });
-    }
-
-    try {
-        const res = await fetch(
-            `https://generativelanguage.googleapis.com/v1beta/models?key=${apiKey}&pageSize=100`,
-            { cache: "no-store" }
-        );
-
-        if (!res.ok) {
-            const err = await res.text();
-            return NextResponse.json({ error: err }, { status: res.status });
-        }
-
-        const data = await res.json();
-
-        // Keep only generative models that support generateContent
-        const models = (data.models as Array<{
-            name: string;
-            displayName: string;
-            supportedGenerationMethods?: string[];
-            description?: string;
-        }>)
-            .filter(m =>
-                m.supportedGenerationMethods?.includes("generateContent") &&
-                !m.name.includes("embedding") &&
-                !m.name.includes("aqa")
-            )
-            .map(m => ({
-                id: m.name.replace("models/", ""),
-                name: m.displayName,
-            }))
-            .sort((a, b) => a.name.localeCompare(b.name, "fr"));
-
-        return NextResponse.json({ models });
-    } catch (err) {
-        const msg = err instanceof Error ? err.message : "Unknown error";
-        return NextResponse.json({ error: msg }, { status: 500 });
-    }
-}

src/app/api/grid/rows/route.ts

@@ -18,10 +18,11 @@ export async function GET(request: NextRequest) {
 
     const magasin = searchParams.get("magasin") ?? "TOTAL";
     const chunkSize = Math.max(50, Math.min(500, Number(searchParams.get("chunkSize") ?? 150)));
+    // `code3` n'est volontairement pas lu : la Grille applique ce filtre en local
+    // (getProductRows ne s'en sert pas) et il accepte désormais plusieurs valeurs.
     const filters: Partial<GridFilters> = {
         code1: searchParams.get("code1"),
         code2: searchParams.get("code2"),
-        code3: searchParams.get("code3"),
     };
     const forceRefresh = searchParams.get("refresh") === "1";
 

src/app/api/openrouter/models/route.ts

@@ -1,61 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import fs from "fs/promises";
-import path from "path";
-
-async function getSavedOpenRouterKey(): Promise<string | null> {
-    try {
-        const configFile = path.join(process.cwd(), "data", ".db-config.json");
-        const data = await fs.readFile(configFile, "utf-8");
-        const config = JSON.parse(data);
-        return config.openRouterKey ?? null;
-    } catch {
-        return null;
-    }
-}
-
-export async function GET(req: NextRequest) {
-    const apiKey = req.headers.get("x-openrouter-key")
-        || process.env.OPENROUTER_API_KEY
-        || await getSavedOpenRouterKey();
-
-    if (!apiKey) {
-        return NextResponse.json({ error: "No API key provided" }, { status: 401 });
-    }
-
-    try {
-        const res = await fetch("https://openrouter.ai/api/v1/models", {
-            headers: {
-                Authorization: `Bearer ${apiKey}`,
-                "Content-Type": "application/json",
-            },
-            cache: "no-store",
-        });
-
-        if (!res.ok) {
-            return NextResponse.json({ error: "OpenRouter error", status: res.status }, { status: res.status });
-        }
-
-        const data = await res.json();
-
-        // Return simplified list sorted by name
-        const models = (data.data as Array<{ id: string; name: string; pricing?: { prompt: string; completion: string } }>)
-            .map((m) => ({
-                id: m.id,
-                name: m.name,
-                promptPrice: parseFloat(m.pricing?.prompt ?? "0"),
-                completionPrice: parseFloat(m.pricing?.completion ?? "0"),
-                free: parseFloat(m.pricing?.prompt ?? "1") === 0,
-            }))
-            .sort((a, b) => {
-                // Free models first, then alphabetical
-                if (a.free && !b.free) return -1;
-                if (!a.free && b.free) return 1;
-                return a.name.localeCompare(b.name, "fr");
-            });
-
-        return NextResponse.json({ models });
-    } catch (err) {
-        const msg = err instanceof Error ? err.message : "Unknown error";
-        return NextResponse.json({ error: msg }, { status: 500 });
-    }
-}

src/app/api/v1/fournisseurs/route.ts

@@ -0,0 +1,62 @@
+import { NextRequest } from "next/server";
+import { requireApiAuth } from "@/lib/api-auth";
+import { ok, fail } from "@/lib/api-response";
+import { fournisseursQuerySchema } from "@/lib/api-schemas";
+import { listGridSuppliers } from "@/lib/grid-store";
+import { pgGetFournisseurs } from "@/lib/pg-ff-client";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/**
+ * GET /api/v1/fournisseurs?search=…&withData=1
+ *
+ * Liste des fournisseurs. Par défaut, tout le référentiel (`fouident`), enrichi de la
+ * fraîcheur de l'instantané de grille quand il existe — ce qui permet à l'appelant de
+ * savoir d'avance quels fournisseurs `/api/v1/grid` peut servir immédiatement.
+ *
+ * `withData=1` restreint aux seuls fournisseurs déjà présents dans l'instantané.
+ */
+export async function GET(req: NextRequest) {
+    const authCtx = await requireApiAuth(req);
+    if (authCtx instanceof Response) return authCtx;
+
+    const parsed = fournisseursQuerySchema.safeParse(Object.fromEntries(req.nextUrl.searchParams));
+    if (!parsed.success) {
+        return fail("bad_request", "Paramètres invalides.", parsed.error.issues);
+    }
+    const { search, withData } = parsed.data;
+
+    const snapshot = await listGridSuppliers();
+    const byCode = new Map(snapshot.map((s) => [s.codeFournisseur, s]));
+
+    if (withData === "1") {
+        const term = search?.toLowerCase();
+        const data = snapshot
+            .filter((s) => !term
+                || s.codeFournisseur.toLowerCase().includes(term)
+                || (s.nomFournisseur ?? "").toLowerCase().includes(term))
+            .map((s) => ({
+                code: s.codeFournisseur,
+                nom: s.nomFournisseur,
+                hasSnapshot: true,
+                rowCount: s.rowCount,
+                computedAt: s.computedAt,
+            }));
+        return ok(data, { meta: { total: data.length, scope: "instantané uniquement" } });
+    }
+
+    const fournisseurs = await pgGetFournisseurs(search);
+    const data = fournisseurs.map((f) => {
+        const snap = byCode.get(f.code);
+        return {
+            code: f.code,
+            nom: f.nom,
+            hasSnapshot: Boolean(snap),
+            rowCount: snap?.rowCount ?? 0,
+            computedAt: snap?.computedAt ?? null,
+        };
+    });
+
+    return ok(data, { meta: { total: data.length, withSnapshot: byCode.size } });
+}

src/app/api/v1/grid/route.ts

@@ -0,0 +1,223 @@
+import { NextRequest } from "next/server";
+import { requireApiAuth } from "@/lib/api-auth";
+import { ok, fail, buildPagination } from "@/lib/api-response";
+import { gridQuerySchema, pickFields, toSortKey } from "@/lib/api-schemas";
+import { queryGridRows, getGridFreshness } from "@/lib/grid-store";
+import { enrichRows } from "@/lib/api-enrich";
+import { getProductRows } from "@/features/grid/api/get-product-rows";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+// Le calcul à la demande (premier appel sur un fournisseur inconnu) enchaîne
+// plusieurs requêtes SQL sur la base miroir FF : on laisse de la marge.
+export const maxDuration = 300;
+
+/**
+ * GET /api/v1/grid?fournisseur=…&gamme=&code1..3=&search=&sort=&order=&page=&limit=&fields=&compute=
+ *
+ * Lignes de grille d'un fournisseur, filtrées / triées / paginées **en SQL** depuis
+ * l'instantané persisté (`grid_rows`).
+ *
+ * Si le fournisseur n'a pas encore d'instantané, l'endpoint le **calcule à la demande**
+ * (`compute=1`, défaut) : sans cela, un appelant externe ne pourrait consulter que les
+ * fournisseurs déjà ouverts dans la Grille par un humain. Le calcul est protégé par le
+ * cache et le verrou anti-concurrence de `getProductRows()`, et il persiste l'instantané
+ * au passage — les appels suivants repassent donc par le chemin rapide.
+ *
+ * `compute=0` restaure le comportement strict : échec immédiat en `202 not_ready`.
+ */
+export async function GET(req: NextRequest) {
+    const authCtx = await requireApiAuth(req);
+    if (authCtx instanceof Response) return authCtx;
+
+    const parsed = gridQuerySchema.safeParse(Object.fromEntries(req.nextUrl.searchParams));
+    if (!parsed.success) {
+        return fail("bad_request", "Paramètres invalides.", parsed.error.issues);
+    }
+    const q = parsed.data;
+
+    // Distingue « fournisseur jamais calculé » de « filtres sans résultat » (200 vide).
+    let freshness = await getGridFreshness(q.fournisseur);
+    let computedOnDemand = false;
+
+    if (!freshness) {
+        if (q.compute === "0") {
+            return fail(
+                "not_ready",
+                `Aucun instantané pour le fournisseur « ${q.fournisseur} ». Relancez sans « compute=0 » pour le calculer à la demande.`,
+                { fournisseur: q.fournisseur },
+            );
+        }
+
+        console.log(`[api/v1/grid] instantané absent pour ${q.fournisseur} — calcul à la demande (via ${authCtx.via})`);
+        try {
+            // magasin TOTAL : c'est la seule variante persistée par getProductRows,
+            // et ProductRow embarque déjà les ventilations par magasin.
+            await getProductRows({ codeFournisseur: q.fournisseur, magasin: "TOTAL" });
+        } catch (e) {
+            const msg = e instanceof Error ? e.message : String(e);
+            console.error(`[api/v1/grid] calcul à la demande KO pour ${q.fournisseur}:`, msg);
+            return fail(
+                "internal_error",
+                `Le calcul de la grille a échoué pour le fournisseur « ${q.fournisseur} ».`,
+                { fournisseur: q.fournisseur },
+            );
+        }
+
+        freshness = await getGridFreshness(q.fournisseur);
+        if (!freshness) {
+            // Calcul réussi mais aucune ligne : le code fournisseur n'existe pas, ou
+            // il n'a aucun article. À distinguer d'une panne.
+            return fail(
+                "not_found",
+                `Aucun article pour le fournisseur « ${q.fournisseur} ». Vérifiez le code auprès de /api/v1/fournisseurs.`,
+                { fournisseur: q.fournisseur },
+            );
+        }
+        computedOnDemand = true;
+    }
+
+    const filtres = {
+        codeFournisseur: q.fournisseur,
+        gamme: q.gamme,
+        code1: q.code1,
+        code2: q.code2,
+        code3: q.code3,
+        nomenclature: q.nomenclature,
+        search: q.search,
+        sort: toSortKey(q.sort),
+        order: q.order,
+    };
+
+    // Sans `limit`, la réponse peut porter tout un fournisseur — et certains en
+    // comptent plus de 130 000. Tout charger puis tout sérialiser d'un bloc ferait
+    // exploser la mémoire du processus : on diffuse par lots, à mémoire constante.
+    if (q.limit == null) {
+        return streamAllRows(req, filtres, q, freshness, computedOnDemand);
+    }
+
+    const result = await queryGridRows({ ...filtres, page: q.page, limit: q.limit });
+
+    // Métriques Qlik et gamme serveur relues au moment de l'appel (voir api-enrich).
+    const rows = q.enrich === "1" ? await enrichRows(result.rows) : result.rows;
+
+    const pagination = buildPagination(q.page, q.limit, result.total);
+
+    return ok(
+        rows.map((r) => pickFields(r, q.fields)),
+        {
+            pagination,
+            meta: {
+                fournisseur: q.fournisseur,
+                computedAt: result.computedAt,
+                snapshotComputedAt: freshness.computedAt,
+                snapshotRowCount: freshness.rowCount,
+                enrichi: q.enrich === "1",
+                /** true = l'instantané n'existait pas et vient d'être calculé par cet appel. */
+                computedOnDemand,
+                /**
+                 * true = cette réponse contient **toutes** les lignes du fournisseur.
+                 * Dit explicitement à un appelant — en particulier un agent — s'il
+                 * peut s'arrêter là, au lieu de le laisser déduire d'une pagination
+                 * qu'il risque d'ignorer.
+                 */
+                complet: !pagination.hasMore,
+                ...(pagination.hasMore
+                    ? {
+                        avertissement:
+                            `Réponse partielle : ${rows.length} lignes sur ${result.total}, parce que « limit » a été précisé. `
+                            + `Retirez « limit » pour obtenir tout le fournisseur en un appel, ou passez à page=${q.page + 1}.`,
+                    }
+                    : {}),
+            },
+        },
+    );
+}
+
+/** Lots internes : compromis entre nombre d'allers-retours SQL et mémoire retenue. */
+const STREAM_BATCH = 1000;
+
+type Filtres = Parameters<typeof queryGridRows>[0];
+
+/**
+ * Diffuse **toutes** les lignes du fournisseur en une seule réponse JSON, sans
+ * jamais la construire entièrement en mémoire.
+ *
+ * La forme reste celle des autres réponses (`{ data, pagination, meta }`) : un
+ * client existant ne voit aucune différence, il reçoit simplement les octets au
+ * fil de l'eau. `pagination` et `meta` sont écrits en dernier, une fois le total
+ * connu — l'ordre des clés n'a aucune importance en JSON.
+ *
+ * Une erreur survenant après les premiers octets ne peut plus changer le code
+ * HTTP : on ferme alors le document avec `meta.erreur`, pour que l'appelant
+ * détecte une réponse tronquée au lieu de la croire complète.
+ */
+function streamAllRows(
+    req: NextRequest,
+    filtres: Filtres,
+    q: { enrich: string; fields?: string; fournisseur: string },
+    freshness: { rowCount: number; computedAt: string | null },
+    computedOnDemand: boolean,
+): Response {
+    const encoder = new TextEncoder();
+
+    const stream = new ReadableStream<Uint8Array>({
+        async start(controller) {
+            const write = (s: string) => controller.enqueue(encoder.encode(s));
+            let envoyees = 0;
+            let total = 0;
+            let computedAt: string | null = null;
+            let erreur: string | null = null;
+
+            write('{"data":[');
+            try {
+                for (let page = 1; ; page++) {
+                    const lot = await queryGridRows({ ...filtres, page, limit: STREAM_BATCH });
+                    if (page === 1) {
+                        total = lot.total;
+                        computedAt = lot.computedAt;
+                    }
+                    if (lot.rows.length === 0) break;
+
+                    const enrichies = q.enrich === "1" ? await enrichRows(lot.rows) : lot.rows;
+                    for (const r of enrichies) {
+                        write((envoyees === 0 ? "" : ",") + JSON.stringify(pickFields(r, q.fields)));
+                        envoyees++;
+                    }
+                    if (lot.rows.length < STREAM_BATCH) break;
+                }
+            } catch (e) {
+                erreur = e instanceof Error ? e.message : String(e);
+                console.error(`[api/v1/grid] diffusion interrompue pour ${q.fournisseur} après ${envoyees} lignes:`, erreur);
+            }
+
+            const complet = erreur === null && envoyees === total;
+            write("]," + JSON.stringify({
+                pagination: { page: 1, limit: envoyees, total, totalPages: 1, hasMore: !complet },
+                meta: {
+                    fournisseur: q.fournisseur,
+                    computedAt,
+                    snapshotComputedAt: freshness.computedAt,
+                    snapshotRowCount: freshness.rowCount,
+                    enrichi: q.enrich === "1",
+                    computedOnDemand,
+                    diffuse: true,
+                    complet,
+                    ...(erreur
+                        ? { erreur: `Diffusion interrompue après ${envoyees} lignes sur ${total} : ${erreur}` }
+                        : {}),
+                },
+            }).slice(1));
+            controller.close();
+        },
+    });
+
+    return new Response(stream, {
+        headers: {
+            "Content-Type": "application/json; charset=utf-8",
+            "Cache-Control": "no-store",
+            // Empêche un proxy de tamponner la réponse entière avant de la relayer.
+            "X-Accel-Buffering": "no",
+        },
+    });
+}

src/app/api/v1/network/[codeCentrale]/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest } from "next/server";
+import { requireApiAuth } from "@/lib/api-auth";
+import { ok, fail } from "@/lib/api-response";
+import { getNetworkMetricsByCodeCentrale } from "@/lib/qlik-network-cache";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/**
+ * GET /api/v1/network/:codeCentrale
+ *
+ * Métriques réseau Qlik d'un produit (CA, quantité, nombre de magasins, CA/magasin,
+ * marge %) et sa courbe de quantités mensuelles sur 12 mois glissants.
+ *
+ * Lecture **exclusive** de la table `qlik_network_metrics` : aucun appel à Qlik n'est
+ * déclenché. Pour interroger Qlik en direct (y compris sur des produits que nous ne
+ * référençons pas), c'est la page Produits — bien plus lente, et volontairement
+ * séparé de cette API.
+ */
+export async function GET(
+    req: NextRequest,
+    ctx: { params: Promise<{ codeCentrale: string }> },
+) {
+    const authCtx = await requireApiAuth(req);
+    if (authCtx instanceof Response) return authCtx;
+
+    const { codeCentrale } = await ctx.params;
+    if (!codeCentrale) return fail("bad_request", "Paramètre 'codeCentrale' requis.");
+
+    const metrics = await getNetworkMetricsByCodeCentrale([codeCentrale]);
+    const found = metrics.get(codeCentrale);
+    if (!found) {
+        return fail(
+            "not_found",
+            `Aucune donnée réseau en cache pour le code centrale « ${codeCentrale} ». Lancez une synchronisation Qlik ou une recherche réseau.`,
+        );
+    }
+
+    return ok({ codeCentrale, ...found }, { meta: { fetchedAt: found.fetchedAt, source: "cache" } });
+}

src/app/api/v1/nomenclatures/route.ts

@@ -0,0 +1,65 @@
+import { NextRequest } from "next/server";
+import { requireApiAuth } from "@/lib/api-auth";
+import { ok, fail } from "@/lib/api-response";
+import { nomenclaturesQuerySchema } from "@/lib/api-schemas";
+import { listGridNomenclatures, getGridFreshness } from "@/lib/grid-store";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/**
+ * GET /api/v1/nomenclatures?fournisseur=…&niveau=1|2|3&parent=…
+ *
+ * Répartition des articles d'un fournisseur par poste de nomenclature, avec le
+ * nombre d'articles et le CA de chacun.
+ *
+ * C'est la porte d'entrée pour traiter un gros fournisseur : certains dépassent
+ * 130 000 articles, et tout récupérer d'un coup n'a de sens ni pour une IA ni
+ * pour une application. On liste d'abord les postes — quelques dizaines de
+ * lignes — puis on interroge `/grid?fournisseur=…&nomenclature=…` poste par poste.
+ *
+ * Les codes sont hiérarchiques par préfixe (6 chiffres, de 31xxxx à 40xxxx) :
+ * niveau 1 = « 32 », niveau 2 = « 3202 », niveau 3 = « 320211 ». `parent` accepte
+ * un préfixe pour descendre l'arborescence sans tout charger.
+ */
+export async function GET(req: NextRequest) {
+    const authCtx = await requireApiAuth(req);
+    if (authCtx instanceof Response) return authCtx;
+
+    const parsed = nomenclaturesQuerySchema.safeParse(Object.fromEntries(req.nextUrl.searchParams));
+    if (!parsed.success) {
+        return fail("bad_request", "Paramètres invalides.", parsed.error.issues);
+    }
+    const { fournisseur, niveau, parent } = parsed.data;
+
+    // Même distinction que /grid : « pas encore calculé » n'est pas « vide ».
+    const freshness = await getGridFreshness(fournisseur);
+    if (!freshness) {
+        return fail(
+            "not_ready",
+            `Aucun instantané pour le fournisseur « ${fournisseur} ». Appelez /api/v1/grid?fournisseur=${fournisseur} une fois pour le calculer.`,
+            { fournisseur },
+        );
+    }
+
+    const postes = await listGridNomenclatures(fournisseur, niveau, parent);
+    const nbArticles = postes.reduce((s, p) => s + p.nbArticles, 0);
+
+    return ok(postes, {
+        meta: {
+            fournisseur,
+            niveau,
+            parent: parent ?? null,
+            nbPostes: postes.length,
+            /** Total couvert par les postes listés — à rapprocher de snapshotRowCount. */
+            nbArticles,
+            snapshotRowCount: freshness.rowCount,
+            snapshotComputedAt: freshness.computedAt,
+            /**
+             * Le paramètre de /grid à utiliser avec les `code` renvoyés ci-dessus.
+             * `nomenclature` filtre par préfixe et fonctionne aux trois niveaux.
+             */
+            filtreGrid: "nomenclature",
+        },
+    });
+}

src/app/api/v1/openapi.json/route.ts

@@ -0,0 +1,399 @@
+import { NextRequest } from "next/server";
+import { GRID_SORT_KEYS } from "@/lib/grid-store";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/**
+ * GET /api/v1/openapi.json — spécification OpenAPI 3.1 de l'API CollectFlow.
+ *
+ * **Volontairement accessible sans authentification.** Le document ne décrit que la
+ * structure de l'API (chemins, paramètres, schémas) et ne contient aucune donnée
+ * métier ; or ChatGPT et les autres plateformes d'agents importent le schéma par URL,
+ * avant même que la clé ne soit configurée. Exiger une clé ici rendrait l'import
+ * impossible.
+ *
+ * `servers` est construit depuis l'hôte appelant (ou COLLECTFLOW_PUBLIC_URL) : les
+ * Actions ChatGPT exigent une URL **absolue**, une URL relative étant rejetée.
+ */
+export async function GET(req: NextRequest) {
+    const configured = process.env.COLLECTFLOW_PUBLIC_URL?.trim().replace(/\/+$/, "");
+    const origin = configured || req.nextUrl.origin;
+
+    const paginationParams = [
+        { name: "page", in: "query", schema: { type: "integer", minimum: 1, default: 1 }, description: "Numéro de page." },
+        { name: "limit", in: "query", schema: { type: "integer", minimum: 1 }, description: "Lignes par page, sans plafond. Sur /grid, OMETTRE ce paramètre renvoie toutes les lignes du fournisseur en un seul appel — c'est le mode recommandé. Sur les autres endpoints, le défaut est 100." },
+    ];
+    const sortParams = [
+        { name: "sort", in: "query", schema: { type: "string", enum: GRID_SORT_KEYS }, description: "Colonne de tri." },
+        { name: "order", in: "query", schema: { type: "string", enum: ["asc", "desc"], default: "desc" }, description: "Sens du tri." },
+        {
+            name: "fields",
+            in: "query",
+            schema: { type: "string" },
+            description:
+                "Colonnes à retourner, séparées par des virgules (ex. « codein,libelle1,totalCa »). "
+                + "À utiliser systématiquement : une ligne complète contient les séries mensuelles et les "
+                + "ventilations par magasin, ce qui est très volumineux. `codein` est toujours inclus.",
+        },
+        {
+            name: "enrich",
+            in: "query",
+            schema: { type: "string", enum: ["0", "1"], default: "1" },
+            description:
+                "1 (défaut) : relit les métriques réseau Qlik (`network`) et la gamme serveur "
+                + "(`codeGammeServeur`) au moment de l'appel. 0 : sert l'instantané brut.",
+        },
+    ];
+
+    const spec = {
+        openapi: "3.1.0",
+        info: {
+            title: "CollectFlow API",
+            version: "1.0.0",
+            description:
+                "Lecture des données de la grille CollectFlow : ventes sur 12 mois par magasin, stock, marges, "
+                + "gammes et métriques du réseau Qlik (~270 magasins Foir'Fouille), plus la recherche de produits.\n\n"
+                + "**N'importe quel fournisseur peut être interrogé directement.** Les réponses sont servies "
+                + "depuis un instantané persisté ; si le fournisseur demandé n'en a pas encore, `/grid` le calcule "
+                + "à la demande. Ce premier appel prend alors plusieurs secondes, les suivants sont immédiats. "
+                + "Passez `compute=0` pour refuser ce calcul et obtenir un `202 not_ready` immédiat.\n\n"
+                + "**Aucun endpoint ne contacte Qlik en direct** : les métriques réseau viennent d'un cache "
+                + "alimenté par une synchronisation séparée.\n\n"
+                + "Deux informations sont relues à chaque appel car elles évoluent indépendamment : les métriques "
+                + "réseau Qlik (`network`, `null` s'il n'y en a pas) et la gamme serveur non modifiée "
+                + "(`codeGammeServeur`).",
+        },
+        servers: [{ url: `${origin}/api/v1`, description: "API CollectFlow" }],
+        security: [{ ApiKeyAuth: [] }],
+        components: {
+            securitySchemes: {
+                ApiKeyAuth: { type: "apiKey", in: "header", name: "X-API-Key" },
+            },
+            schemas: {
+                Error: {
+                    type: "object",
+                    properties: {
+                        error: {
+                            type: "object",
+                            properties: {
+                                code: {
+                                    type: "string",
+                                    enum: ["unauthorized", "forbidden", "bad_request", "not_found", "not_ready", "internal_error"],
+                                },
+                                message: { type: "string" },
+                            },
+                        },
+                    },
+                },
+                Pagination: {
+                    type: "object",
+                    properties: {
+                        page: { type: "integer" },
+                        limit: { type: "integer" },
+                        total: { type: "integer" },
+                        totalPages: { type: "integer" },
+                        hasMore: { type: "boolean", description: "true = il reste des pages. Sur /grid, meta.complet dit la même chose en positif." },
+                    },
+                },
+                Fournisseur: {
+                    type: "object",
+                    properties: {
+                        code: { type: "string", description: "Code fournisseur, à passer au paramètre `fournisseur`." },
+                        nom: { type: ["string", "null"] },
+                        hasSnapshot: { type: "boolean", description: "false = données pas encore disponibles pour ce fournisseur." },
+                        rowCount: { type: "integer" },
+                        computedAt: { type: ["string", "null"], format: "date-time" },
+                    },
+                },
+                NetworkMetrics: {
+                    type: ["object", "null"],
+                    description: "Métriques du réseau Qlik. `null` quand le produit n'a pas de données réseau.",
+                    properties: {
+                        caReseau: { type: "number" },
+                        qteReseau: { type: "number" },
+                        nbMagasinsReseau: { type: "integer", description: "Nombre de magasins du réseau vendant le produit (sur ~270)." },
+                        caParMagasinReseau: { type: "number", description: "CA moyen par magasin : normalise la présence, préférable au CA brut pour comparer." },
+                        margePctReseau: { type: "number", description: "Taux de marge, ratio brut (0.32 = 32 %)." },
+                        qteByMonth: { type: ["object", "null"], description: "Quantités vendues par mois, clés « YYYY-MM »." },
+                        fetchedAt: { type: ["string", "null"], format: "date-time" },
+                    },
+                },
+                Product: {
+                    type: "object",
+                    description:
+                        "Ligne de grille : un article chez un fournisseur. La liste de propriétés ci-dessous "
+                        + "n'est pas exhaustive — la réponse contient l'intégralité de la ligne (une soixantaine "
+                        + "de champs). Utilisez `fields` pour n'en garder qu'une partie.",
+                    properties: {
+                        codein: { type: "string", description: "Identifiant interne de l'article." },
+                        codeFournisseur: { type: "string" },
+                        nomFournisseur: { type: "string" },
+                        libelle1: { type: "string", description: "Libellé de l'article." },
+                        gtin: { type: "string" },
+                        reference: { type: "string" },
+                        codeCentrale: { type: "string", description: "Code centrale — clé de jointure avec le réseau Qlik." },
+                        codeGammeServeur: {
+                            type: ["string", "null"],
+                            description:
+                                "Gamme **non modifiée**, telle qu'elle existe en base. C'est celle à utiliser pour "
+                                + "raisonner. `null` = aucune gamme. Valeurs : A (pilier), B (bonne rotation), "
+                                + "C (performance), D (saisonnier/niche), Z (sortie).",
+                        },
+                        codeGamme: { type: ["string", "null"], description: "Gamme courante, éventuellement surchargée par une modification locale non enregistrée." },
+                        totalCa: { type: "number", description: "CA sur 12 mois, nos magasins." },
+                        totalQuantite: { type: "number" },
+                        totalMarge: { type: "number" },
+                        tauxMarge: { type: "number" },
+                        stockActuel: { type: "number" },
+                        pcb: { type: "number", description: "Conditionnement (nombre d'unités par colis)." },
+                        prixAchat: { type: "number" },
+                        prixVente: { type: "number" },
+                        derniereVente: { type: "string", format: "date" },
+                        nbJoursDerniereVente: { type: "integer" },
+                        sales12m: { type: "object", description: "Quantités vendues par mois, clés « YYYYMM »." },
+                        stock12m: { type: "object", description: "Stock de fin de mois, clés « YYYYMM »." },
+                        receptions12m: { type: "object", description: "Quantités reçues par mois, clés « YYYYMM »." },
+                        sales12mByStore: { type: "object", description: "Ventes par magasin (292, 579) puis par mois." },
+                        stock12mByStore: { type: "object", description: "Stock de fin de mois par magasin puis par mois." },
+                        receptions12mByStore: { type: "object", description: "Réceptions par magasin puis par mois." },
+                        qteReseauByMonth: { type: ["object", "null"], description: "Quantités vendues par le réseau, clés « YYYY-MM » — série derrière la tendance." },
+                        network: { $ref: "#/components/schemas/NetworkMetrics" },
+                        trend: { $ref: "#/components/schemas/Trend" },
+                    },
+                },
+                Trend: {
+                    type: ["object", "null"],
+                    description:
+                        "Tendance réseau sur 12 mois, par régression linéaire — la même que la colonne "
+                        + "« Tendance » de l'application. `null` si aucune série mensuelle n'est disponible.",
+                    properties: {
+                        direction: { type: "string", enum: ["up", "down", "flat"], description: "Seuil à ±8 % de variation modélisée." },
+                        pct: { type: ["number", "null"], description: "Variation modélisée sur la période (0.23 = +23 %)." },
+                        label: { type: "string", description: "Libellé prêt à afficher : « Forte hausse », « Stable »…" },
+                        monthsUsed: { type: "integer", description: "Nombre de mois réellement utilisés (12 au maximum)." },
+                    },
+                },
+            },
+        },
+        paths: {
+            "/fournisseurs": {
+                get: {
+                    operationId: "listerFournisseurs",
+                    summary: "Lister les fournisseurs",
+                    description:
+                        "Renvoie les fournisseurs et indique, via `hasSnapshot`, lesquels ont des données "
+                        + "immédiatement disponibles. À appeler en premier quand le code fournisseur est inconnu.",
+                    parameters: [
+                        { name: "search", in: "query", schema: { type: "string" }, description: "Filtre sur le nom ou le code." },
+                        { name: "withData", in: "query", schema: { type: "string", enum: ["0", "1"] }, description: "1 = uniquement ceux dont les données sont disponibles." },
+                    ],
+                    responses: {
+                        "200": {
+                            description: "Liste des fournisseurs",
+                            content: {
+                                "application/json": {
+                                    schema: {
+                                        type: "object",
+                                        properties: {
+                                            data: { type: "array", items: { $ref: "#/components/schemas/Fournisseur" } },
+                                            meta: { type: "object" },
+                                        },
+                                    },
+                                },
+                            },
+                        },
+                        "401": { description: "Clé d'API absente, invalide ou révoquée", content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } } },
+                    },
+                },
+            },
+            "/nomenclatures": {
+                get: {
+                    operationId: "listerNomenclaturesFournisseur",
+                    summary: "Postes de nomenclature d'un fournisseur",
+                    description:
+                        "Répartition des articles d'un fournisseur par poste de nomenclature, avec le nombre "
+                        + "d'articles et le CA de chacun. **À utiliser avant /grid sur un gros fournisseur** : "
+                        + "certains dépassent 130 000 articles. On liste les postes (quelques dizaines de lignes), "
+                        + "puis on interroge /grid poste par poste avec le filtre indiqué par `meta.filtreGrid` "
+                        + "(code1, code2 ou code3).",
+                    parameters: [
+                        { name: "fournisseur", in: "query", required: true, schema: { type: "string" } },
+                        { name: "niveau", in: "query", schema: { type: "integer", enum: [1, 2, 3], default: 1 }, description: "1 = univers, 2 = famille, 3 = sous-famille." },
+                        { name: "parent", in: "query", schema: { type: "string" }, description: "Préfixe du poste parent, ex. « 32 » pour lister ses familles." },
+                    ],
+                    responses: {
+                        "200": {
+                            description: "Postes de nomenclature",
+                            content: {
+                                "application/json": {
+                                    schema: {
+                                        type: "object",
+                                        properties: {
+                                            data: {
+                                                type: "array",
+                                                items: {
+                                                    type: "object",
+                                                    properties: {
+                                                        code: { type: "string", description: "À passer au filtre code1/code2/code3 de /grid." },
+                                                        libelle: { type: ["string", "null"] },
+                                                        nbArticles: { type: "integer" },
+                                                        totalCa: { type: "number" },
+                                                        totalQuantite: { type: "number" },
+                                                    },
+                                                },
+                                            },
+                                            meta: { type: "object" },
+                                        },
+                                    },
+                                },
+                            },
+                        },
+                        "202": { description: "Fournisseur pas encore calculé", content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } } },
+                        "400": { description: "Paramètres invalides", content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } } },
+                    },
+                },
+            },
+            "/grid": {
+                get: {
+                    operationId: "listerProduitsFournisseur",
+                    summary: "Lister les produits d'un fournisseur",
+                    description:
+                        "Lignes de grille d'un fournisseur : ventes 12 mois, stock, marges, gammes et métriques "
+                        + "réseau. Fonctionne pour **n'importe quel** fournisseur : si ses données n'ont jamais été "
+                        + "calculées, l'API les calcule à la demande (premier appel de quelques secondes, "
+                        + "`meta.computedOnDemand = true`). Un `404` signifie que le code fournisseur n'existe pas "
+                        + "ou n'a aucun article — le signaler plutôt que de conclure à une panne.",
+                    parameters: [
+                        { name: "fournisseur", in: "query", required: true, schema: { type: "string" }, description: "Code fournisseur (voir listerFournisseurs)." },
+                        { name: "gamme", in: "query", schema: { type: "string" }, description: "Filtre sur la gamme (A, B, C, D, Z)." },
+                        { name: "code1", in: "query", schema: { type: "string" }, description: "Filtre nomenclature niveau 1." },
+                        { name: "code2", in: "query", schema: { type: "string" }, description: "Filtre nomenclature niveau 2." },
+                        { name: "code3", in: "query", schema: { type: "string" }, description: "Filtre nomenclature niveau 3 (code exact)." },
+                        { name: "nomenclature", in: "query", schema: { type: "string" }, description: "Préfixe de nomenclature renvoyé par listerNomenclaturesFournisseur : 32, 3202 ou 320211. À préférer à code1/code2, qui peuvent être vides." },
+                        { name: "search", in: "query", schema: { type: "string" }, description: "Filtre texte : libellé, codein, GTIN, référence ou code centrale." },
+                        {
+                            name: "compute",
+                            in: "query",
+                            schema: { type: "string", enum: ["0", "1"], default: "1" },
+                            description:
+                                "1 (défaut) : calcule les données du fournisseur si elles n'existent pas encore. "
+                                + "0 : refuse le calcul et répond immédiatement 202 not_ready.",
+                        },
+                        ...sortParams,
+                        ...paginationParams,
+                    ],
+                    responses: {
+                        "200": {
+                            description: "Produits du fournisseur",
+                            content: {
+                                "application/json": {
+                                    schema: {
+                                        type: "object",
+                                        properties: {
+                                            data: { type: "array", items: { $ref: "#/components/schemas/Product" } },
+                                            pagination: { $ref: "#/components/schemas/Pagination" },
+                                            meta: { type: "object" },
+                                        },
+                                    },
+                                },
+                            },
+                        },
+                        "202": { description: "Données pas encore calculées (uniquement avec compute=0)", content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } } },
+                        "400": { description: "Paramètres invalides", content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } } },
+                        "401": { description: "Clé d'API absente, invalide ou révoquée", content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } } },
+                        "404": { description: "Fournisseur inconnu ou sans article", content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } } },
+                    },
+                },
+            },
+            "/products/search": {
+                get: {
+                    operationId: "rechercherProduits",
+                    summary: "Rechercher des produits, tous fournisseurs confondus",
+                    description:
+                        "Recherche sur le libellé, le codein, le GTIN, la référence et le code centrale, sans "
+                        + "avoir à connaître le fournisseur. À utiliser dès qu'un produit est désigné par son nom.",
+                    parameters: [
+                        { name: "q", in: "query", required: true, schema: { type: "string", maxLength: 120 }, description: "Termes recherchés." },
+                        { name: "fournisseur", in: "query", schema: { type: "string" }, description: "Restreint à un fournisseur." },
+                        { name: "gamme", in: "query", schema: { type: "string" }, description: "Filtre sur la gamme." },
+                        ...sortParams,
+                        ...paginationParams,
+                    ],
+                    responses: {
+                        "200": {
+                            description: "Produits correspondants",
+                            content: {
+                                "application/json": {
+                                    schema: {
+                                        type: "object",
+                                        properties: {
+                                            data: { type: "array", items: { $ref: "#/components/schemas/Product" } },
+                                            pagination: { $ref: "#/components/schemas/Pagination" },
+                                            meta: { type: "object" },
+                                        },
+                                    },
+                                },
+                            },
+                        },
+                        "401": { description: "Clé d'API absente, invalide ou révoquée", content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } } },
+                    },
+                },
+            },
+            "/products/{codein}": {
+                get: {
+                    operationId: "obtenirProduit",
+                    summary: "Fiche complète d'un produit",
+                    description: "Toutes les données d'un article : séries mensuelles, ventilation par magasin, stock, marges, gammes et métriques réseau.",
+                    parameters: [
+                        { name: "codein", in: "path", required: true, schema: { type: "string" }, description: "Identifiant interne de l'article." },
+                        { name: "fournisseur", in: "query", schema: { type: "string" }, description: "Lève l'ambiguïté d'un article référencé chez plusieurs fournisseurs." },
+                    ],
+                    responses: {
+                        "200": {
+                            description: "Fiche produit",
+                            content: {
+                                "application/json": {
+                                    schema: {
+                                        type: "object",
+                                        properties: { data: { $ref: "#/components/schemas/Product" }, meta: { type: "object" } },
+                                    },
+                                },
+                            },
+                        },
+                        "404": { description: "Produit absent de l'instantané", content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } } },
+                        "401": { description: "Clé d'API absente, invalide ou révoquée", content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } } },
+                    },
+                },
+            },
+            "/network/{codeCentrale}": {
+                get: {
+                    operationId: "obtenirMetriquesReseau",
+                    summary: "Métriques du réseau Qlik pour un produit",
+                    description: "Performances du produit sur l'ensemble du réseau Foir'Fouille (~270 magasins) et courbe des quantités sur 12 mois glissants.",
+                    parameters: [
+                        { name: "codeCentrale", in: "path", required: true, schema: { type: "string" }, description: "Code centrale du produit (format 10000XXXXXX)." },
+                    ],
+                    responses: {
+                        "200": {
+                            description: "Métriques réseau",
+                            content: {
+                                "application/json": {
+                                    schema: {
+                                        type: "object",
+                                        properties: { data: { $ref: "#/components/schemas/NetworkMetrics" }, meta: { type: "object" } },
+                                    },
+                                },
+                            },
+                        },
+                        "404": { description: "Aucune donnée réseau pour ce code centrale", content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } } },
+                        "401": { description: "Clé d'API absente, invalide ou révoquée", content: { "application/json": { schema: { $ref: "#/components/schemas/Error" } } } },
+                    },
+                },
+            },
+        },
+    };
+
+    // CORS ouvert en lecture : le schéma est public et peut être chargé par un outil tiers.
+    return Response.json(spec, { headers: { "Access-Control-Allow-Origin": "*" } });
+}

src/app/api/v1/products/[codein]/route.ts

@@ -0,0 +1,73 @@
+import { NextRequest } from "next/server";
+import { requireApiAuth } from "@/lib/api-auth";
+import { ok, fail } from "@/lib/api-response";
+import { productDetailSchema } from "@/lib/api-schemas";
+import { getGridRowByCodein } from "@/lib/grid-store";
+import { enrichRows } from "@/lib/api-enrich";
+import { getProductRows } from "@/features/grid/api/get-product-rows";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+// Idem /api/v1/grid : le calcul à la demande peut prendre plusieurs secondes.
+export const maxDuration = 300;
+
+/**
+ * GET /api/v1/products/:codein?fournisseur=…
+ *
+ * Fiche complète d'un produit : le `ProductRow` intégral (séries mensuelles,
+ * ventilations par magasin, stock, marges, gammes) enrichi des métriques réseau Qlik
+ * lues **en cache** (`qlik_network_metrics`) — aucun appel à Qlik.
+ *
+ * `fournisseur` lève l'ambiguïté d'un article référencé chez plusieurs fournisseurs ;
+ * sans lui, l'instantané le plus récent est renvoyé.
+ */
+export async function GET(
+    req: NextRequest,
+    ctx: { params: Promise<{ codein: string }> },
+) {
+    const authCtx = await requireApiAuth(req);
+    if (authCtx instanceof Response) return authCtx;
+
+    const { codein } = await ctx.params;
+    if (!codein) return fail("bad_request", "Paramètre 'codein' requis.");
+
+    const parsed = productDetailSchema.safeParse(Object.fromEntries(req.nextUrl.searchParams));
+    if (!parsed.success) {
+        return fail("bad_request", "Paramètres invalides.", parsed.error.issues);
+    }
+
+    let found = await getGridRowByCodein(codein, parsed.data.fournisseur);
+
+    // Absent de l'instantané : on peut le calculer, mais seulement si l'appelant a
+    // précisé le fournisseur — le calcul se fait par lot fournisseur, pas par article.
+    if (!found && parsed.data.compute === "1" && parsed.data.fournisseur) {
+        console.log(`[api/v1/products] ${codein} absent — calcul du lot ${parsed.data.fournisseur} à la demande`);
+        try {
+            await getProductRows({ codeFournisseur: parsed.data.fournisseur, magasin: "TOTAL" });
+            found = await getGridRowByCodein(codein, parsed.data.fournisseur);
+        } catch (e) {
+            console.error(`[api/v1/products] calcul KO pour ${parsed.data.fournisseur}:`, e instanceof Error ? e.message : String(e));
+        }
+    }
+
+    if (!found) {
+        return fail(
+            "not_found",
+            parsed.data.fournisseur
+                ? `Produit « ${codein} » introuvable chez le fournisseur « ${parsed.data.fournisseur} ».`
+                : `Aucun instantané pour le produit « ${codein} ». Ajoutez « fournisseur=… » pour que l'API calcule le lot à la demande.`,
+        );
+    }
+
+    // Métriques réseau + gamme serveur relues maintenant : le payload date du dernier
+    // calcul de la grille, alors que ces deux données évoluent indépendamment.
+    const [enriched] = await enrichRows([found.row]);
+
+    return ok(enriched, {
+        meta: {
+            computedAt: found.computedAt,
+            networkFetchedAt: enriched.network?.fetchedAt ?? null,
+            hasNetwork: enriched.network !== null,
+        },
+    });
+}

src/app/api/v1/products/search/route.ts

@@ -0,0 +1,57 @@
+import { NextRequest } from "next/server";
+import { requireApiAuth } from "@/lib/api-auth";
+import { ok, fail, buildPagination } from "@/lib/api-response";
+import { productSearchSchema, pickFields, toSortKey } from "@/lib/api-schemas";
+import { queryGridRows } from "@/lib/grid-store";
+import { enrichRows } from "@/lib/api-enrich";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+/**
+ * GET /api/v1/products/search?q=…&fournisseur=&gamme=&sort=&order=&page=&limit=&fields=
+ *
+ * **Recherche transversale** sur libellé, codein, GTIN, référence et code centrale —
+ * tous fournisseurs confondus. C'est ce qu'aucune route existante ne sait faire :
+ * `getProductRows()` exige un fournisseur, donc chercher un produit sans le connaître
+ * était impossible.
+ *
+ * Lit uniquement l'instantané `grid_rows` : un fournisseur jamais ouvert dans la
+ * Grille n'apparaît pas encore dans les résultats.
+ */
+export async function GET(req: NextRequest) {
+    const authCtx = await requireApiAuth(req);
+    if (authCtx instanceof Response) return authCtx;
+
+    const parsed = productSearchSchema.safeParse(Object.fromEntries(req.nextUrl.searchParams));
+    if (!parsed.success) {
+        return fail("bad_request", "Paramètres invalides.", parsed.error.issues);
+    }
+    const q = parsed.data;
+
+    const result = await queryGridRows({
+        codeFournisseur: q.fournisseur,
+        gamme: q.gamme,
+        search: q.q,
+        sort: toSortKey(q.sort),
+        order: q.order,
+        page: q.page,
+        limit: q.limit,
+    });
+
+    // Métriques Qlik et gamme serveur relues au moment de l'appel (voir api-enrich).
+    const rows = q.enrich === "1" ? await enrichRows(result.rows) : result.rows;
+
+    return ok(
+        rows.map((r) => pickFields(r, q.fields)),
+        {
+            pagination: buildPagination(q.page, q.limit, result.total),
+            meta: {
+                query: q.q,
+                computedAt: result.computedAt,
+                scope: q.fournisseur ? `fournisseur:${q.fournisseur}` : "tous fournisseurs",
+                enrichi: q.enrich === "1",
+            },
+        },
+    );
+}

src/app/globals.css

@@ -238,6 +238,47 @@
   background: rgba(0, 0, 0, 0.18);
 }
 
+/* ── Défilement de la Grille ──
+   La règle ci-dessus (8 px, rail transparent, pouce très pâle) convient aux
+   panneaux où l'ascenseur est accessoire. Dans la Grille, le tableau fait
+   ~2600 px de large : l'ascenseur HORIZONTAL est l'outil de navigation
+   principal, et un rail invisible ne dit pas qu'il reste des colonnes à
+   droite. On lui donne donc un rail dessiné et un pouce saisissable.
+   `scrollbar-*` couvre Firefox, que les sélecteurs -webkit- ignorent. */
+.grid-scroll {
+  scrollbar-width: auto;
+  scrollbar-color: var(--text-muted) var(--bg-elevated);
+}
+
+.grid-scroll::-webkit-scrollbar {
+  width: 10px;
+  height: 14px;
+}
+
+.grid-scroll::-webkit-scrollbar-track:horizontal {
+  background: var(--bg-elevated);
+  border-top: 1px solid var(--border);
+}
+
+.grid-scroll::-webkit-scrollbar-thumb {
+  background: var(--text-muted);
+  border-radius: 99px;
+  /* Bordure transparente + background-clip : le pouce garde de l'air dans son
+     rail sans qu'on ait à jouer sur des marges, impossibles ici. */
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+
+.grid-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--text-secondary);
+  background-clip: padding-box;
+}
+
+/* Le coin entre les deux ascenseurs, sinon laissé en blanc par le navigateur. */
+.grid-scroll::-webkit-scrollbar-corner {
+  background: var(--bg-elevated);
+}
+
 /* ── Heatmap cells ── */
 .heatmap-zero {
   background: var(--bg-elevated);

src/components/shared/sidebar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { LayoutGrid, Camera, FileDown, Settings, Package, PackageSearch, BarChart2, TrendingUp, Trophy, Megaphone, PackageMinus, ShoppingCart, LogOut, User as UserIcon, Loader2, ChevronRight, ChevronLeft, MessageSquareCode } from "lucide-react";
+import { LayoutGrid, Camera, FileDown, Settings, Package, PackageSearch, BarChart2, TrendingUp, Trophy, Megaphone, PackageMinus, ShoppingCart, LogOut, User as UserIcon, Loader2, ChevronRight, ChevronLeft, CalendarClock } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
@@ -19,7 +19,7 @@ const NAV_ITEMS = [
     { icon: ShoppingCart, label: "Commandes auto", href: "/commandes-auto" },
     { icon: Camera, label: "Snapshots", href: "/snapshots" },
     { icon: FileDown, label: "Exports", href: "/exports", adminOnly: true },
-    { icon: MessageSquareCode, label: "AI Chat Admin", href: "/admin/ai-chat", adminOnly: true },
+    { icon: CalendarClock, label: "Synchronisation", href: "/admin/synchronisation", adminOnly: true },
     { icon: Settings, label: "Paramètres", href: "/settings", adminOnly: true },
 ];
 

src/db/schema.ts

@@ -144,6 +144,132 @@ export const qlikNetworkMetrics = pgTable("qlik_network_metrics", {
   fetchedAt: timestamp("fetched_at").defaultNow(),
 });
 
+/**
+ * Instantané persisté des lignes de grille (une ligne par fournisseur × article).
+ *
+ * Raison d'être : `getProductRows()` reconstruit la grille en direct et ne la garde
+ * qu'en mémoire 10 minutes — perdu à chaque redémarrage. L'API `/api/v1` ne doit
+ * jamais déclencher ce calcul, elle lit donc cette table, remplie en effet de bord
+ * quand quelqu'un ouvre la Grille. Aucun calcul supplémentaire n'est introduit : on
+ * arrête simplement de jeter le résultat.
+ *
+ * Seul `magasin = TOTAL` est persisté : `payload` embarque déjà les ventilations par
+ * magasin (sales12mByStore, caByStore…).
+ */
+export const gridRows = pgTable("grid_rows", {
+  codeFournisseur: varchar("code_fournisseur", { length: 20 }).notNull(),
+  codein: varchar("codein", { length: 20 }).notNull(),
+
+  // Colonnes scalaires : servent aux filtres, au tri et à la recherche en SQL.
+  nomFournisseur: varchar("nom_fournisseur", { length: 255 }),
+  libelle1: varchar("libelle1", { length: 500 }),
+  gtin: varchar("gtin", { length: 30 }),
+  reference: varchar("reference", { length: 100 }),
+  codeCentrale: varchar("code_centrale", { length: 20 }),
+  code1: varchar("code1", { length: 20 }),
+  code2: varchar("code2", { length: 20 }),
+  code3: varchar("code3", { length: 20 }),
+  codeGamme: varchar("code_gamme", { length: 20 }),
+  codeGammeInit: varchar("code_gamme_init", { length: 20 }),
+  totalCa: numeric("total_ca", { precision: 16, scale: 2 }),
+  totalQuantite: numeric("total_quantite", { precision: 14, scale: 2 }),
+  totalMarge: numeric("total_marge", { precision: 16, scale: 2 }),
+  tauxMarge: numeric("taux_marge", { precision: 8, scale: 4 }),
+  stockActuel: numeric("stock_actuel", { precision: 14, scale: 2 }),
+  caReseau: numeric("ca_reseau", { precision: 16, scale: 2 }),
+  qteReseau: numeric("qte_reseau", { precision: 14, scale: 2 }),
+  nbMagasinsReseau: integer("nb_magasins_reseau"),
+  caParMagasinReseau: numeric("ca_par_magasin_reseau", { precision: 16, scale: 2 }),
+  margePctReseau: numeric("marge_pct_reseau", { precision: 8, scale: 4 }),
+
+  /** ProductRow complet (séries mensuelles, ventilations par magasin, dates…). */
+  payload: jsonb("payload").notNull(),
+  /** Date du calcul ayant produit cette ligne — expose la fraîcheur au consommateur. */
+  computedAt: timestamp("computed_at").defaultNow().notNull(),
+}, (table) => {
+  return [
+    uniqueIndex("uq_grid_rows_fou_codein").on(table.codeFournisseur, table.codein),
+    index("idx_grid_rows_fournisseur").on(table.codeFournisseur),
+    index("idx_grid_rows_codein").on(table.codein),
+    index("idx_grid_rows_gamme").on(table.codeGamme),
+    index("idx_grid_rows_code_centrale").on(table.codeCentrale),
+    index("idx_grid_rows_total_ca").on(table.totalCa),
+    index("idx_grid_rows_libelle").on(table.libelle1),
+  ];
+});
+
+/**
+ * Clés d'API pour les appelants non-navigateur (scripts, outils externes).
+ *
+ * Seul le hachage SHA-256 est stocké : la clé en clair n'est affichée qu'une fois,
+ * à la création. Une clé révoquée conserve sa ligne (traçabilité) via `revokedAt`.
+ */
+export const apiKeys = pgTable("api_keys", {
+  id: serial("id").primaryKey(),
+  /** Nom lisible choisi à la création (ex "Export Excel comptabilité"). */
+  name: varchar("name", { length: 100 }).notNull(),
+  /** Préfixe en clair (ex "cf_a1b2c3") — sert à identifier la clé dans l'UI. */
+  keyPrefix: varchar("key_prefix", { length: 20 }).notNull(),
+  /** SHA-256 hexadécimal de la clé complète. */
+  keyHash: text("key_hash").notNull().unique(),
+  /** 'admin' ou 'user' — même sémantique que users.role. */
+  role: varchar("role", { length: 20 }).default("user").notNull(),
+  createdBy: varchar("created_by", { length: 50 }),
+  createdAt: timestamp("created_at").defaultNow(),
+  lastUsedAt: timestamp("last_used_at"),
+  revokedAt: timestamp("revoked_at"),
+});
+
+/**
+ * Paramétrage et suivi de la synchronisation nocturne, un enregistrement par
+ * fournisseur.
+ *
+ * Deux sources aux coûts très différents, donc deux cadences distinctes :
+ * l'instantané SQL prend une minute au pire, l'extraction Qlik jusqu'à huit —
+ * et le serveur Qlik abandonne quand on le sollicite trop. D'où `actifSql` et
+ * `actifQlik` séparés, et deux dates de dernier passage.
+ *
+ * L'ordre de passage se déduit de `dernier*At` (le plus ancien d'abord) : la
+ * nuit suivante reprend donc naturellement là où la précédente s'est arrêtée,
+ * et repart d'elle-même pour un nouveau tour quand tout a été traité. Aucun
+ * curseur ni compteur de tour à maintenir.
+ */
+export const syncFournisseurs = pgTable("sync_fournisseurs", {
+  codeFournisseur: varchar("code_fournisseur", { length: 20 }).primaryKey(),
+  nomFournisseur: varchar("nom_fournisseur", { length: 255 }),
+  /** Inclus dans la rotation de l'instantané SQL. */
+  actifSql: boolean("actif_sql").default(true).notNull(),
+  /** Inclus dans la rotation Qlik (beaucoup plus coûteuse). */
+  actifQlik: boolean("actif_qlik").default(true).notNull(),
+  /**
+   * Renseigné quand le planificateur a désactivé le fournisseur de lui-même —
+   * typiquement « aucun article ». Évite de réessayer chaque nuit un
+   * fournisseur vide, tout en gardant la raison visible pour le réactiver.
+   */
+  desactiveMotif: text("desactive_motif"),
+
+  dernierSqlAt: timestamp("dernier_sql_at"),
+  /** 'succes' | 'echec' | 'vide' */
+  dernierSqlStatut: varchar("dernier_sql_statut", { length: 20 }),
+  dernierSqlLignes: integer("dernier_sql_lignes"),
+  dernierSqlErreur: text("dernier_sql_erreur"),
+  dernierSqlMs: integer("dernier_sql_ms"),
+
+  dernierQlikAt: timestamp("dernier_qlik_at"),
+  dernierQlikStatut: varchar("dernier_qlik_statut", { length: 20 }),
+  dernierQlikCodes: integer("dernier_qlik_codes"),
+  dernierQlikErreur: text("dernier_qlik_erreur"),
+  dernierQlikMs: integer("dernier_qlik_ms"),
+
+  updatedAt: timestamp("updated_at").defaultNow(),
+}, (table) => {
+  return [
+    // Index de file d'attente : « le plus ancien d'abord », par source.
+    index("idx_sync_fou_sql").on(table.actifSql, table.dernierSqlAt),
+    index("idx_sync_fou_qlik").on(table.actifQlik, table.dernierQlikAt),
+  ];
+});
+
 /** AI Context rules per supplier (Epic: AI Context) */
 export const aiSupplierContext = pgTable("ai_supplier_context", {
   /** Supplier code serving as the primary key */

src/features/admin/api/api-key-actions.ts

@@ -0,0 +1,117 @@
+"use server";
+
+/**
+ * CollectFlow — Gestion des clés de l'API `/api/v1` (administrateurs).
+ *
+ * La clé en clair n'existe qu'une fois : elle est renvoyée par `createApiKey()` et
+ * jamais restituée ensuite (seul son hachage SHA-256 est stocké). Une clé révoquée
+ * conserve sa ligne, pour garder la trace de son usage passé.
+ */
+
+import { db } from "@/db";
+import { apiKeys } from "@/db/schema";
+import { desc, eq } from "drizzle-orm";
+import { auth } from "@/lib/auth";
+import { generateApiKey } from "@/lib/api-auth";
+import { revalidatePath } from "next/cache";
+
+async function ensureAdmin() {
+    const session = await auth();
+    if ((session?.user as { role?: string } | undefined)?.role !== "admin") {
+        throw new Error("Accès refusé : Droits administrateur requis.");
+    }
+    return session;
+}
+
+export interface ApiKeyRow {
+    id: number;
+    name: string;
+    keyPrefix: string;
+    role: string;
+    createdBy: string | null;
+    createdAt: string | null;
+    lastUsedAt: string | null;
+    revokedAt: string | null;
+}
+
+/** Liste les clés. Ne renvoie jamais de secret — seulement le préfixe lisible. */
+export async function getApiKeys(): Promise<ApiKeyRow[]> {
+    await ensureAdmin();
+    const rows = await db
+        .select({
+            id: apiKeys.id,
+            name: apiKeys.name,
+            keyPrefix: apiKeys.keyPrefix,
+            role: apiKeys.role,
+            createdBy: apiKeys.createdBy,
+            createdAt: apiKeys.createdAt,
+            lastUsedAt: apiKeys.lastUsedAt,
+            revokedAt: apiKeys.revokedAt,
+        })
+        .from(apiKeys)
+        .orderBy(desc(apiKeys.createdAt));
+
+    return rows.map((r) => ({
+        ...r,
+        createdAt: r.createdAt ? r.createdAt.toISOString() : null,
+        lastUsedAt: r.lastUsedAt ? r.lastUsedAt.toISOString() : null,
+        revokedAt: r.revokedAt ? r.revokedAt.toISOString() : null,
+    }));
+}
+
+/**
+ * Crée une clé et renvoie sa valeur **en clair, une seule et unique fois**.
+ * L'appelant doit la présenter immédiatement à l'utilisateur : elle est irrécupérable.
+ */
+export async function createApiKey(
+    name: string,
+    role: "admin" | "user" = "user",
+): Promise<{ success: true; key: string; keyPrefix: string } | { success: false; error: string }> {
+    const session = await ensureAdmin();
+
+    const trimmed = name.trim();
+    if (!trimmed) return { success: false, error: "Le nom de la clé est obligatoire." };
+    if (trimmed.length > 100) return { success: false, error: "Nom trop long (100 caractères max)." };
+
+    try {
+        const { key, keyHash, keyPrefix } = generateApiKey();
+        await db.insert(apiKeys).values({
+            name: trimmed,
+            keyPrefix,
+            keyHash,
+            role,
+            createdBy: (session?.user as { name?: string | null } | undefined)?.name ?? null,
+        });
+        revalidatePath("/settings");
+        return { success: true, key, keyPrefix };
+    } catch (err) {
+        console.error("[api-keys] création KO:", err);
+        return { success: false, error: "Erreur technique lors de la création de la clé." };
+    }
+}
+
+/** Révoque une clé : elle est refusée dès l'appel suivant, mais reste listée. */
+export async function revokeApiKey(id: number): Promise<{ success: boolean; error?: string }> {
+    await ensureAdmin();
+    try {
+        await db.update(apiKeys).set({ revokedAt: new Date() }).where(eq(apiKeys.id, id));
+        revalidatePath("/settings");
+        return { success: true };
+    } catch (err) {
+        console.error("[api-keys] révocation KO:", err);
+        return { success: false, error: "Erreur lors de la révocation." };
+    }
+}
+
+/** Supprime définitivement une clé révoquée (nettoyage de la liste). */
+export async function deleteApiKey(id: number): Promise<{ success: boolean; error?: string }> {
+    await ensureAdmin();
+    try {
+        await db.delete(apiKeys).where(eq(apiKeys.id, id));
+        revalidatePath("/settings");
+        return { success: true };
+    } catch (err) {
+        console.error("[api-keys] suppression KO:", err);
+        return { success: false, error: "Erreur lors de la suppression." };
+    }
+}

src/features/admin/api/sync-scheduler.ts

@@ -0,0 +1,366 @@
+/**
+ * CollectFlow — Synchronisation nocturne des fournisseurs.
+ *
+ * Deux sources aux coûts très différents, donc deux files distinctes :
+ *   • **SQL** — l'instantané de grille (`getProductRows`), ~43 s sur le plus gros
+ *     fournisseur du catalogue. Alimente la Grille et `/api/v1`.
+ *   • **Qlik** — les métriques réseau, jusqu'à 8 min par fournisseur, sur un
+ *     serveur externe qui abandonne quand on le sollicite trop. Ce sont des
+ *     agrégats mensuels : les rafraîchir chaque nuit n'apporterait rien.
+ *
+ * ORDRE DE PASSAGE — le point de conception central. La file est simplement
+ * « le plus ancien d'abord », en ignorant ceux déjà traités depuis l'ouverture
+ * de la fenêtre courante. Il en découle, sans curseur ni compteur de tour :
+ *   • la nuit 2 reprend là où la nuit 1 s'est arrêtée (les non-traités sont les
+ *     plus anciens) ;
+ *   • quand plus personne n'est en attente, le tour est fini ; la nuit suivante
+ *     tout le monde redevient éligible et le tour recommence ;
+ *   • un fournisseur en échec garde une date ancienne, donc il repasse en tête —
+ *     le rattrapage est automatique.
+ *
+ * La fenêtre ne peut pas interrompre un fournisseur en cours : elle signifie
+ * « ne plus en **démarrer** après l'heure de fin ».
+ */
+
+import "server-only";
+
+import { and, asc, eq, isNull, lt, or, sql, type SQL } from "drizzle-orm";
+import { db } from "@/db";
+import { syncFournisseurs } from "@/db/schema";
+import { getProductRows } from "@/features/grid/api/get-product-rows";
+import { pgGetFournisseurs, pgGetArticlesByFournisseur } from "@/lib/pg-ff-client";
+import { fetchNetworkMetricsPlaywright } from "@/lib/qlik-playwright";
+import { upsertNetworkMetrics } from "@/lib/qlik-network-cache";
+import { buildGridNetworkQlikDateFilter, envMonthsBack, QLIK_MONTHS_BACK_DEFAULT } from "@/lib/qlik-date-range";
+import { readSyncSettings, type SyncSettings } from "@/features/admin/api/sync-settings";
+
+export type { SyncSettings };
+
+// ─── État courant, en mémoire ────────────────────────────────────────────────
+
+export interface SyncSchedulerState {
+    enCours: boolean;
+    /** "auto" = déclenché par la fenêtre nocturne, "manuel" = lancé depuis l'admin. */
+    origine: "auto" | "manuel" | null;
+    debutAt: string | null;
+    finAt: string | null;
+    fournisseurCourant: string | null;
+    etape: "sql" | "qlik" | null;
+    sqlFaits: number;
+    sqlEchecs: number;
+    qlikFaits: number;
+    qlikEchecs: number;
+    /** Renseigné quand la file s'est vidée : le tour est bouclé. */
+    tourTermine: boolean;
+    arretDemande: boolean;
+    derniereErreur: string | null;
+}
+
+const etat: SyncSchedulerState = {
+    enCours: false, origine: null, debutAt: null, finAt: null,
+    fournisseurCourant: null, etape: null,
+    sqlFaits: 0, sqlEchecs: 0, qlikFaits: 0, qlikEchecs: 0,
+    tourTermine: false, arretDemande: false, derniereErreur: null,
+};
+
+export function getSyncSchedulerState(): SyncSchedulerState {
+    return { ...etat };
+}
+
+export function demanderArret(): void {
+    if (etat.enCours) etat.arretDemande = true;
+}
+
+// ─── Fenêtre horaire ─────────────────────────────────────────────────────────
+
+/**
+ * Début de la fenêtre en cours, ou `null` si l'heure courante est en dehors.
+ *
+ * Gère le passage par minuit (ex. 22h → 5h) : dans ce cas, entre 0h et l'heure
+ * de fin, la fenêtre a commencé **la veille**.
+ */
+export function debutFenetre(s: SyncSettings, maintenant = new Date()): Date | null {
+    const h = maintenant.getHours();
+    const debutDuJour = new Date(maintenant);
+    debutDuJour.setHours(s.heureDebut, 0, 0, 0);
+
+    if (s.heureDebut < s.heureFin) {
+        return h >= s.heureDebut && h < s.heureFin ? debutDuJour : null;
+    }
+    // Fenêtre à cheval sur minuit.
+    if (h >= s.heureDebut) return debutDuJour;
+    if (h < s.heureFin) {
+        const veille = new Date(debutDuJour);
+        veille.setDate(veille.getDate() - 1);
+        return veille;
+    }
+    return null;
+}
+
+// ─── Référentiel des fournisseurs ────────────────────────────────────────────
+
+/**
+ * Aligne la table de paramétrage sur le référentiel FF : ajoute les nouveaux
+ * fournisseurs (actifs par défaut), rafraîchit les noms. Ne supprime rien —
+ * l'historique de synchronisation d'un fournisseur disparu reste consultable.
+ */
+export async function seedSyncFournisseurs(): Promise<number> {
+    const fournisseurs = await pgGetFournisseurs();
+    if (fournisseurs.length === 0) return 0;
+
+    const CHUNK = 500;
+    for (let i = 0; i < fournisseurs.length; i += CHUNK) {
+        const lot = fournisseurs.slice(i, i + CHUNK);
+        await db
+            .insert(syncFournisseurs)
+            .values(lot.map((f) => ({ codeFournisseur: f.code, nomFournisseur: f.nom })))
+            .onConflictDoUpdate({
+                target: syncFournisseurs.codeFournisseur,
+                // Seul le nom est réaligné : les choix d'activation appartiennent à l'admin.
+                set: { nomFournisseur: sql`excluded.nom_fournisseur` },
+            });
+    }
+    return fournisseurs.length;
+}
+
+// ─── Files d'attente ─────────────────────────────────────────────────────────
+
+/** Le plus ancien fournisseur SQL pas encore traité depuis l'ouverture de la fenêtre. */
+async function prochainSql(depuis: Date) {
+    const [row] = await db
+        .select()
+        .from(syncFournisseurs)
+        .where(and(
+            eq(syncFournisseurs.actifSql, true),
+            or(isNull(syncFournisseurs.dernierSqlAt), lt(syncFournisseurs.dernierSqlAt, depuis)) as SQL,
+        ))
+        .orderBy(asc(sql`${syncFournisseurs.dernierSqlAt} nulls first`))
+        .limit(1);
+    return row ?? null;
+}
+
+/**
+ * Le plus ancien fournisseur Qlik dont les données dépassent `qlikMinJours`.
+ * Le seuil en jours, plutôt que la fenêtre courante, évite de relancer chaque
+ * nuit une extraction de plusieurs minutes pour des agrégats mensuels.
+ */
+async function prochainQlik(qlikMinJours: number, maintenant: Date) {
+    const seuil = new Date(maintenant.getTime() - qlikMinJours * 24 * 3600 * 1000);
+    const [row] = await db
+        .select()
+        .from(syncFournisseurs)
+        .where(and(
+            eq(syncFournisseurs.actifQlik, true),
+            or(isNull(syncFournisseurs.dernierQlikAt), lt(syncFournisseurs.dernierQlikAt, seuil)) as SQL,
+        ))
+        .orderBy(asc(sql`${syncFournisseurs.dernierQlikAt} nulls first`))
+        .limit(1);
+    return row ?? null;
+}
+
+// ─── Traitement d'un fournisseur ─────────────────────────────────────────────
+
+/**
+ * Instantané SQL. `dernierSqlAt` est renseigné **même en cas d'échec** : sans
+ * cela, un fournisseur qui échoue resterait éternellement le plus ancien et
+ * bloquerait la file derrière lui.
+ */
+async function traiterSql(code: string, nom: string | null): Promise<void> {
+    const t0 = Date.now();
+    etat.fournisseurCourant = `${code}${nom ? ` — ${nom}` : ""}`;
+    etat.etape = "sql";
+    try {
+        const rows = await getProductRows({ codeFournisseur: code, magasin: "TOTAL", forceRefresh: true });
+        const vide = rows.length === 0;
+        await db.update(syncFournisseurs).set({
+            dernierSqlAt: new Date(),
+            dernierSqlStatut: vide ? "vide" : "succes",
+            dernierSqlLignes: rows.length,
+            dernierSqlErreur: null,
+            dernierSqlMs: Date.now() - t0,
+            // Un fournisseur sans article n'a rien à donner : on le sort des deux
+            // files plutôt que de le réessayer chaque nuit. L'admin voit le motif
+            // et peut le réactiver.
+            ...(vide ? { actifSql: false, actifQlik: false, desactiveMotif: "Aucun article — désactivé automatiquement" } : {}),
+            updatedAt: new Date(),
+        }).where(eq(syncFournisseurs.codeFournisseur, code));
+        if (vide) console.log(`[sync-nuit] ${code} sans article — désactivé automatiquement`);
+        else etat.sqlFaits++;
+    } catch (e) {
+        const msg = e instanceof Error ? e.message : String(e);
+        etat.sqlEchecs++;
+        etat.derniereErreur = `${code} (SQL) : ${msg}`;
+        console.error(`[sync-nuit] SQL ${code} en échec :`, msg);
+        await db.update(syncFournisseurs).set({
+            dernierSqlAt: new Date(),
+            dernierSqlStatut: "echec",
+            dernierSqlErreur: msg.slice(0, 500),
+            dernierSqlMs: Date.now() - t0,
+            updatedAt: new Date(),
+        }).where(eq(syncFournisseurs.codeFournisseur, code)).catch(() => { /* le suivi ne doit pas casser la boucle */ });
+    }
+}
+
+/** Format d'un code centrale plausible — même filtre que la synchro manuelle. */
+const CODE_CENTRALE = /^[A-Z0-9][A-Z0-9_-]{1,29}$/i;
+
+/** Extraction Qlik. Même politique que le SQL sur l'horodatage en cas d'échec. */
+async function traiterQlik(code: string, nom: string | null): Promise<void> {
+    const t0 = Date.now();
+    etat.fournisseurCourant = `${code}${nom ? ` — ${nom}` : ""}`;
+    etat.etape = "qlik";
+    try {
+        const articles = await pgGetArticlesByFournisseur(code);
+        const codes = [...new Set(
+            articles
+                .map((a) => String(a.codeCentrale ?? "").trim())
+                .filter((c) => c && c !== "-" && CODE_CENTRALE.test(c)),
+        )];
+
+        if (codes.length === 0) {
+            await db.update(syncFournisseurs).set({
+                dernierQlikAt: new Date(), dernierQlikStatut: "vide", dernierQlikCodes: 0,
+                dernierQlikErreur: null, dernierQlikMs: Date.now() - t0, updatedAt: new Date(),
+            }).where(eq(syncFournisseurs.codeFournisseur, code));
+            return;
+        }
+
+        const dateFilter = buildGridNetworkQlikDateFilter(new Date(), envMonthsBack("QLIK_SYNC_MONTHS_BACK", QLIK_MONTHS_BACK_DEFAULT));
+        const metrics = await fetchNetworkMetricsPlaywright(codes, undefined, dateFilter, code);
+        const n = await upsertNetworkMetrics([...metrics.values()]);
+
+        await db.update(syncFournisseurs).set({
+            dernierQlikAt: new Date(), dernierQlikStatut: "succes", dernierQlikCodes: n,
+            dernierQlikErreur: null, dernierQlikMs: Date.now() - t0, updatedAt: new Date(),
+        }).where(eq(syncFournisseurs.codeFournisseur, code));
+        etat.qlikFaits++;
+        console.log(`[sync-nuit] Qlik ${code} — ${n} codes en ${Math.round((Date.now() - t0) / 1000)} s`);
+    } catch (e) {
+        const msg = e instanceof Error ? e.message : String(e);
+        etat.qlikEchecs++;
+        etat.derniereErreur = `${code} (Qlik) : ${msg}`;
+        console.error(`[sync-nuit] Qlik ${code} en échec :`, msg);
+        await db.update(syncFournisseurs).set({
+            dernierQlikAt: new Date(), dernierQlikStatut: "echec",
+            dernierQlikErreur: msg.slice(0, 500), dernierQlikMs: Date.now() - t0, updatedAt: new Date(),
+        }).where(eq(syncFournisseurs.codeFournisseur, code)).catch(() => { /* idem */ });
+    }
+}
+
+// ─── Boucle de travail ───────────────────────────────────────────────────────
+
+/**
+ * Traite les files jusqu'à épuisement, sortie de fenêtre, ou demande d'arrêt.
+ *
+ * Les deux files avancent en parallèle : une extraction Qlik est intercalée
+ * tous les `sqlParQlik` fournisseurs SQL. Sans cet entrelacement, Qlik ne
+ * démarrerait jamais tant que la file SQL n'est pas vide.
+ */
+export async function lancerRound(origine: "auto" | "manuel", forcerHorsFenetre = false): Promise<void> {
+    if (etat.enCours) return;
+
+    const s = await readSyncSettings();
+    const maintenant = new Date();
+    const debut = debutFenetre(s, maintenant);
+    if (!forcerHorsFenetre && !debut) return;
+    // Un lancement manuel hors fenêtre borne la file sur « depuis ce matin ».
+    const depuis = debut ?? new Date(new Date(maintenant).setHours(0, 0, 0, 0));
+
+    Object.assign(etat, {
+        enCours: true, origine, debutAt: maintenant.toISOString(), finAt: null,
+        fournisseurCourant: null, etape: null,
+        sqlFaits: 0, sqlEchecs: 0, qlikFaits: 0, qlikEchecs: 0,
+        tourTermine: false, arretDemande: false, derniereErreur: null,
+    });
+    console.log(`[sync-nuit] round ${origine} démarré (fenêtre ${s.heureDebut}h-${s.heureFin}h, Qlik ≤ ${s.qlikParNuit})`);
+
+    try {
+        await seedSyncFournisseurs();
+
+        // Garde anti-boucle. L'avancement de la file repose sur l'écriture de
+        // `dernier*At`, et cette écriture est volontairement non bloquante en cas
+        // d'erreur. Si elle échoue, le fournisseur resterait le plus ancien et
+        // serait repris sans fin : on retient donc ce qui a déjà été tenté.
+        const tentes = new Set<string>();
+
+        let depuisDernierQlik = 0;
+        for (;;) {
+            if (etat.arretDemande) break;
+            if (!forcerHorsFenetre && !debutFenetre(s, new Date())) {
+                console.log("[sync-nuit] fin de fenêtre — arrêt après le fournisseur en cours");
+                break;
+            }
+
+            const qlikPossible = etat.qlikFaits + etat.qlikEchecs < s.qlikParNuit;
+
+            // Qlik prioritaire quand le quota d'entrelacement est atteint.
+            if (qlikPossible && depuisDernierQlik >= s.sqlParQlik) {
+                const cible = await prochainQlik(s.qlikMinJours, new Date());
+                if (cible && !tentes.has(`qlik:${cible.codeFournisseur}`)) {
+                    tentes.add(`qlik:${cible.codeFournisseur}`);
+                    await traiterQlik(cible.codeFournisseur, cible.nomFournisseur);
+                    depuisDernierQlik = 0;
+                    continue;
+                }
+            }
+
+            const cibleSql = await prochainSql(depuis);
+            if (cibleSql) {
+                if (tentes.has(`sql:${cibleSql.codeFournisseur}`)) {
+                    console.error(
+                        `[sync-nuit] ${cibleSql.codeFournisseur} ressort de la file après avoir été traité :`
+                        + " le suivi n'a pas pu être écrit. Arrêt du round pour ne pas boucler.",
+                    );
+                    break;
+                }
+                tentes.add(`sql:${cibleSql.codeFournisseur}`);
+                await traiterSql(cibleSql.codeFournisseur, cibleSql.nomFournisseur);
+                depuisDernierQlik++;
+                continue;
+            }
+
+            // File SQL vide : on consacre le temps restant à Qlik.
+            if (qlikPossible) {
+                const cible = await prochainQlik(s.qlikMinJours, new Date());
+                if (cible && !tentes.has(`qlik:${cible.codeFournisseur}`)) {
+                    tentes.add(`qlik:${cible.codeFournisseur}`);
+                    await traiterQlik(cible.codeFournisseur, cible.nomFournisseur);
+                    depuisDernierQlik = 0;
+                    continue;
+                }
+            }
+
+            etat.tourTermine = true;
+            console.log("[sync-nuit] plus rien en attente — tour terminé");
+            break;
+        }
+    } catch (e) {
+        etat.derniereErreur = e instanceof Error ? e.message : String(e);
+        console.error("[sync-nuit] round interrompu :", etat.derniereErreur);
+    } finally {
+        etat.enCours = false;
+        etat.fournisseurCourant = null;
+        etat.etape = null;
+        etat.finAt = new Date().toISOString();
+        console.log(
+            `[sync-nuit] round terminé — SQL ${etat.sqlFaits} ok / ${etat.sqlEchecs} en échec,`
+            + ` Qlik ${etat.qlikFaits} ok / ${etat.qlikEchecs} en échec, tour bouclé=${etat.tourTermine}`,
+        );
+    }
+}
+
+/**
+ * Battement du minuteur : ne fait quelque chose que dans la fenêtre, et jamais
+ * deux rounds à la fois. Volontairement silencieux hors fenêtre — il est appelé
+ * chaque minute.
+ */
+export async function tickScheduler(): Promise<void> {
+    try {
+        const s = await readSyncSettings();
+        if (!s.actif || etat.enCours) return;
+        if (!debutFenetre(s)) return;
+        await lancerRound("auto");
+    } catch (e) {
+        console.error("[sync-nuit] tick en erreur :", e instanceof Error ? e.message : String(e));
+    }
+}

src/features/admin/api/sync-settings.ts

@@ -0,0 +1,104 @@
+/**
+ * CollectFlow — Réglages de la synchronisation nocturne.
+ *
+ * Rangés dans `data/.db-config.json`, comme les autres réglages de
+ * l'application (base, Qlik, API FF), pour qu'il n'y ait qu'un seul endroit à
+ * sauvegarder et à monter dans le conteneur.
+ *
+ * Module **serveur**, pas fichier d'actions : il exporte aussi des valeurs
+ * (les défauts, le type), ce que `"use server"` interdit.
+ */
+
+import "server-only";
+
+import fs from "fs/promises";
+import path from "path";
+
+const DATA_DIR = path.join(process.cwd(), "data");
+const CONFIG_FILE = path.join(DATA_DIR, ".db-config.json");
+
+export interface SyncSettings {
+    /**
+     * Désactivé par défaut : un déploiement ne doit pas se mettre à solliciter
+     * Qlik et la base la nuit suivante sans que personne l'ait décidé.
+     */
+    actif: boolean;
+    /** Heure d'ouverture de la fenêtre (0-23). */
+    heureDebut: number;
+    /** Heure de fermeture. Aucun fournisseur n'est **démarré** après. */
+    heureFin: number;
+    /**
+     * Nombre maximum d'extractions Qlik par nuit. Chacune peut prendre 8 minutes
+     * et le serveur abandonne quand il est trop sollicité : ce plafond est la
+     * principale protection contre une nuit entièrement passée sur Qlik.
+     */
+    qlikParNuit: number;
+    /** Une extraction Qlik est intercalée tous les N fournisseurs SQL. */
+    sqlParQlik: number;
+    /**
+     * Âge minimal des données Qlik avant de les refaire. Ce sont des agrégats
+     * mensuels : les rafraîchir toutes les nuits coûterait cher pour rien.
+     */
+    qlikMinJours: number;
+}
+
+export const SYNC_SETTINGS_DEFAUT: SyncSettings = {
+    actif: false,
+    heureDebut: 0,
+    heureFin: 5,
+    qlikParNuit: 6,
+    sqlParQlik: 20,
+    qlikMinJours: 7,
+};
+
+function borne(v: unknown, min: number, max: number, defaut: number): number {
+    const n = Number(v);
+    if (!Number.isFinite(n)) return defaut;
+    return Math.min(max, Math.max(min, Math.trunc(n)));
+}
+
+/** Normalise ce qui vient du fichier : il est éditable à la main. */
+function normaliser(brut: Partial<SyncSettings> | undefined): SyncSettings {
+    const d = SYNC_SETTINGS_DEFAUT;
+    const s: SyncSettings = {
+        actif: Boolean(brut?.actif),
+        heureDebut: borne(brut?.heureDebut, 0, 23, d.heureDebut),
+        heureFin: borne(brut?.heureFin, 0, 23, d.heureFin),
+        qlikParNuit: borne(brut?.qlikParNuit, 0, 200, d.qlikParNuit),
+        sqlParQlik: borne(brut?.sqlParQlik, 1, 500, d.sqlParQlik),
+        qlikMinJours: borne(brut?.qlikMinJours, 0, 365, d.qlikMinJours),
+    };
+    // Une fenêtre de durée nulle ne s'ouvrirait jamais : on revient au défaut
+    // plutôt que de laisser le planificateur muet sans explication.
+    if (s.heureDebut === s.heureFin) {
+        s.heureDebut = d.heureDebut;
+        s.heureFin = d.heureFin;
+    }
+    return s;
+}
+
+export async function readSyncSettings(): Promise<SyncSettings> {
+    try {
+        const raw = await fs.readFile(CONFIG_FILE, "utf-8");
+        const cfg = JSON.parse(raw) as { syncNuit?: Partial<SyncSettings> };
+        return normaliser(cfg?.syncNuit);
+    } catch {
+        return { ...SYNC_SETTINGS_DEFAUT };
+    }
+}
+
+export async function saveSyncSettings(patch: Partial<SyncSettings>): Promise<SyncSettings> {
+    let existant: Record<string, unknown> = {};
+    try {
+        existant = JSON.parse(await fs.readFile(CONFIG_FILE, "utf-8"));
+    } catch {
+        // Pas encore de fichier : on le crée avec les seuls réglages de synchro.
+    }
+    const courant = normaliser((existant.syncNuit as Partial<SyncSettings>) ?? undefined);
+    const suivant = normaliser({ ...courant, ...patch });
+
+    await fs.mkdir(DATA_DIR, { recursive: true });
+    await fs.writeFile(CONFIG_FILE, JSON.stringify({ ...existant, syncNuit: suivant }, null, 2));
+    console.log(`[sync-nuit] réglages enregistrés : ${JSON.stringify(suivant)}`);
+    return suivant;
+}

src/features/admin/api/sync-timer.ts

@@ -0,0 +1,41 @@
+/**
+ * CollectFlow — Minuteur de la synchronisation nocturne.
+ *
+ * Démarré une fois au boot par `src/instrumentation.ts`. Il bat chaque minute
+ * et laisse `tickScheduler()` décider s'il y a quelque chose à faire : hors
+ * fenêtre, ou si un round tourne déjà, le battement ne coûte rien.
+ *
+ * Conséquence assumée du choix « minuteur interne » plutôt que cron système :
+ * rien ne tourne si l'application est arrêtée. En contrepartie, aucune
+ * configuration côté hôte, et le minuteur se réarme tout seul au redémarrage.
+ */
+
+import "server-only";
+
+import { tickScheduler } from "@/features/admin/api/sync-scheduler";
+
+const INTERVALLE_MS = 60_000;
+
+/**
+ * Garde au niveau du module : en développement, le rechargement à chaud peut
+ * réévaluer `register()` plusieurs fois, et on se retrouverait avec autant de
+ * minuteurs empilés.
+ */
+let minuteur: ReturnType<typeof setInterval> | null = null;
+
+export function startSyncTimer(): void {
+    if (minuteur) return;
+
+    console.log(`[sync-nuit] minuteur démarré (battement ${INTERVALLE_MS / 1000} s)`);
+    minuteur = setInterval(() => {
+        // `tickScheduler` capture déjà ses propres erreurs ; ce `catch` ne couvre
+        // qu'un rejet inattendu, pour qu'il ne devienne jamais une exception non
+        // gérée capable d'abattre le processus.
+        void tickScheduler().catch((e) => {
+            console.error("[sync-nuit] battement en erreur :", e instanceof Error ? e.message : String(e));
+        });
+    }, INTERVALLE_MS);
+
+    // Ne pas maintenir le processus en vie uniquement pour ce minuteur.
+    minuteur.unref?.();
+}

src/features/admin/components/api-connection-info.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+/**
+ * CollectFlow — Informations de connexion à l'API `/api/v1`.
+ *
+ * Tout ce qu'il faut pour appeler l'API depuis un script : URL de base, en-tête
+ * d'authentification, liste des endpoints et exemples copiables. L'URL de base est
+ * déduite de l'origine courante, pour rester juste quel que soit le déploiement.
+ */
+
+import { useEffect, useState } from "react";
+import { Copy, Check, ExternalLink, Bot } from "lucide-react";
+
+function CopyButton({ text }: { text: string }) {
+    const [copied, setCopied] = useState(false);
+    return (
+        <button
+            type="button"
+            onClick={() => { navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 1500); }}
+            className="shrink-0 rounded-lg px-2 py-1.5"
+            style={{ background: "var(--bg-surface)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}
+            title="Copier"
+        >
+            {copied ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
+        </button>
+    );
+}
+
+function CodeLine({ children, copy }: { children: string; copy?: string }) {
+    return (
+        <div className="flex items-start gap-2">
+            <code
+                className="flex-1 rounded-lg px-2.5 py-1.5 text-[11px] font-mono break-all whitespace-pre-wrap"
+                style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }}
+            >
+                {children}
+            </code>
+            <CopyButton text={copy ?? children} />
+        </div>
+    );
+}
+
+const ENDPOINTS: Array<{ method: string; path: string; desc: string }> = [
+    { method: "GET", path: "/fournisseurs", desc: "Fournisseurs, avec la fraîcheur de leur instantané" },
+    { method: "GET", path: "/grid?fournisseur=CODE", desc: "Lignes de grille d'un fournisseur" },
+    { method: "GET", path: "/nomenclatures?fournisseur=CODE", desc: "Postes de nomenclature d'un fournisseur, avec nb d'articles et CA" },
+    { method: "GET", path: "/products/search?q=terme", desc: "Recherche transversale, tous fournisseurs" },
+    { method: "GET", path: "/products/{codein}", desc: "Fiche complète d'un produit" },
+    { method: "GET", path: "/network/{codeCentrale}", desc: "Métriques réseau Qlik + courbe 12 mois" },
+    { method: "GET", path: "/openapi.json", desc: "Spécification lisible par machine" },
+];
+
+const PARAMS: Array<{ name: string; desc: string }> = [
+    { name: "page, limit", desc: "Pagination, sans plafond. Sur /grid, omettre limit renvoie TOUT le fournisseur en un appel ; ailleurs le défaut est 100" },
+    { name: "sort, order", desc: "Tri, ex. sort=totalCa&order=desc" },
+    { name: "search", desc: "Libellé, codein, GTIN, référence ou code centrale" },
+    { name: "nomenclature", desc: "Préfixe de nomenclature : 32 (univers), 3202 (famille), 320211 (sous-famille)" },
+    { name: "gamme, code1..code3", desc: "Filtres sur la gamme et les codes exacts de nomenclature" },
+    { name: "fields", desc: "Champs à conserver, séparés par des virgules — allège fortement la réponse" },
+    { name: "enrich", desc: "1 par défaut : métriques Qlik + gamme serveur relues à l'appel. 0 pour s'en dispenser" },
+    { name: "compute", desc: "1 par défaut : calcule le fournisseur s'il n'a jamais été ouvert (premier appel plus lent). 0 pour échouer vite" },
+];
+
+export function ApiConnectionInfo() {
+    const [origin, setOrigin] = useState("");
+    // `window` n'existe pas au rendu serveur : lire l'origine après montage est le
+    // seul moyen d'afficher l'URL réelle sans provoquer d'écart d'hydratation.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    useEffect(() => { setOrigin(window.location.origin); }, []);
+    const base = `${origin || "https://votre-domaine"}/api/v1`;
+
+    return (
+        <div className="space-y-5">
+            {/* Connexion */}
+            <div className="space-y-2">
+                <p className="text-[12px] font-semibold" style={{ color: "var(--text-primary)" }}>URL de base</p>
+                <CodeLine>{base}</CodeLine>
+                <p className="text-[12px] font-semibold pt-1" style={{ color: "var(--text-primary)" }}>Authentification</p>
+                <p className="text-[11px]" style={{ color: "var(--text-muted)" }}>
+                    Une clé créée ci-dessous, dans l&apos;un ou l&apos;autre de ces en-têtes. Depuis un navigateur
+                    connecté, la session suffit — aucune clé n&apos;est nécessaire.
+                </p>
+                <CodeLine>X-API-Key: VOTRE_CLE</CodeLine>
+                <CodeLine>Authorization: Bearer VOTRE_CLE</CodeLine>
+            </div>
+
+            {/* Endpoints */}
+            <div className="space-y-2">
+                <p className="text-[12px] font-semibold" style={{ color: "var(--text-primary)" }}>Endpoints</p>
+                <div className="rounded-xl overflow-hidden" style={{ border: "1px solid var(--border)" }}>
+                    <table className="w-full text-[11px]">
+                        <tbody>
+                            {ENDPOINTS.map((e, i) => (
+                                <tr key={e.path} style={{ borderTop: i === 0 ? undefined : "1px solid var(--border)" }}>
+                                    <td className="px-2.5 py-1.5 font-mono font-bold align-top" style={{ color: "var(--accent)", width: 40 }}>{e.method}</td>
+                                    <td className="px-2.5 py-1.5 font-mono align-top" style={{ color: "var(--text-primary)" }}>{e.path}</td>
+                                    <td className="px-2.5 py-1.5 align-top" style={{ color: "var(--text-muted)" }}>{e.desc}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            {/* Paramètres */}
+            <div className="space-y-2">
+                <p className="text-[12px] font-semibold" style={{ color: "var(--text-primary)" }}>Paramètres communs</p>
+                <div className="rounded-xl overflow-hidden" style={{ border: "1px solid var(--border)" }}>
+                    <table className="w-full text-[11px]">
+                        <tbody>
+                            {PARAMS.map((p, i) => (
+                                <tr key={p.name} style={{ borderTop: i === 0 ? undefined : "1px solid var(--border)" }}>
+                                    <td className="px-2.5 py-1.5 font-mono align-top whitespace-nowrap" style={{ color: "var(--text-primary)" }}>{p.name}</td>
+                                    <td className="px-2.5 py-1.5 align-top" style={{ color: "var(--text-muted)" }}>{p.desc}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            {/* Exemples */}
+            <div className="space-y-2">
+                <p className="text-[12px] font-semibold" style={{ color: "var(--text-primary)" }}>Exemples</p>
+                <CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n  "${base}/products/search?q=tapis&limit=20"`}</CodeLine>
+                <CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n  "${base}/grid?fournisseur=FOU001&fields=codein,libelle1,totalCa,codeGammeServeur"`}</CodeLine>
+                <p className="text-[11px] pt-1" style={{ color: "var(--text-muted)" }}>
+                    Tout un fournisseur en un seul appel — il suffit d&apos;omettre <code className="font-mono">limit</code>,
+                    et <code className="font-mono">meta.complet</code> confirme qu&apos;il ne reste rien à lire :
+                </p>
+                <CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n  "${base}/grid?fournisseur=FOU001"`}</CodeLine>
+                <p className="text-[11px] pt-1" style={{ color: "var(--text-muted)" }}>
+                    Gros fournisseur (plusieurs dizaines de milliers d&apos;articles) : lister d&apos;abord les
+                    postes de nomenclature, puis les traiter un par un.
+                </p>
+                <CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n  "${base}/nomenclatures?fournisseur=D005&niveau=1"`}</CodeLine>
+                <CodeLine>{`curl -H "X-API-Key: VOTRE_CLE" \\\n  "${base}/grid?fournisseur=D005&nomenclature=32"`}</CodeLine>
+            </div>
+
+            {/* Branchement d'une IA externe (ChatGPT) */}
+            <div className="space-y-2">
+                <p className="text-[12px] font-semibold flex items-center gap-1.5" style={{ color: "var(--text-primary)" }}>
+                    <Bot className="w-4 h-4" style={{ color: "var(--accent)" }} />
+                    Connecter une IA externe (ChatGPT)
+                </p>
+                <ol className="text-[11px] space-y-1.5 list-decimal pl-4" style={{ color: "var(--text-secondary)" }}>
+                    <li>Créez une clé d&apos;API dans la section ci-dessous et copiez-la.</li>
+                    <li>Dans ChatGPT : <strong>Créer un GPT</strong> → onglet <strong>Configurer</strong> → <strong>Créer une action</strong>.</li>
+                    <li>
+                        Cliquez sur <strong>Importer depuis une URL</strong> et collez l&apos;adresse du schéma :
+                        <div className="mt-1"><CodeLine>{`${base}/openapi.json`}</CodeLine></div>
+                        <span style={{ color: "var(--text-muted)" }}>
+                            Ce schéma est public (il ne contient aucune donnée) pour que ChatGPT puisse l&apos;importer.
+                            Votre application doit être joignable depuis Internet.
+                        </span>
+                    </li>
+                    <li>
+                        Dans <strong>Authentification</strong>, choisissez <strong>Clé d&apos;API</strong>, type{" "}
+                        <strong>Personnalisé</strong>, nom d&apos;en-tête <code className="font-mono">X-API-Key</code>,
+                        et collez votre clé.
+                    </li>
+                    <li>Testez avec une question du type « cherche les produits tapis » — le GPT appellera <code className="font-mono">rechercherProduits</code>.</li>
+                </ol>
+                <p className="text-[11px]" style={{ color: "var(--text-muted)" }}>
+                    Si votre domaine public diffère de celui affiché ici, renseignez la variable
+                    d&apos;environnement <code className="font-mono">COLLECTFLOW_PUBLIC_URL</code> : elle fixe l&apos;URL
+                    déclarée dans le schéma.
+                </p>
+            </div>
+
+            {/* Comportement à connaître */}
+            <div className="rounded-xl p-3 text-[11px] space-y-1.5"
+                style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}>
+                <p><strong>Aucun recalcul.</strong> L&apos;API lit l&apos;instantané de la grille, écrit quand la Grille
+                    est ouverte dans l&apos;application. Un fournisseur jamais consulté renvoie <code className="font-mono">202</code>{" "}
+                    <code className="font-mono">not_ready</code> plutôt que de faire attendre.</p>
+                <p><strong>Métriques Qlik</strong> (<code className="font-mono">network</code>) et{" "}
+                    <strong>gamme serveur non modifiée</strong> (<code className="font-mono">codeGammeServeur</code>) sont
+                    relues à chaque appel. <code className="font-mono">network</code> vaut{" "}
+                    <code className="font-mono">null</code> quand le produit n&apos;a pas de données réseau.</p>
+                <p>Erreurs : <code className="font-mono">{`{ "error": { "code", "message" } }`}</code> avec{" "}
+                    <code className="font-mono">401</code> (clé absente/invalide/révoquée),{" "}
+                    <code className="font-mono">400</code>, <code className="font-mono">404</code>.</p>
+            </div>
+
+            <a
+                href="/api/v1/openapi.json"
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1.5 text-[12px] font-medium"
+                style={{ color: "var(--accent)" }}
+            >
+                Ouvrir la spécification OpenAPI <ExternalLink className="w-3.5 h-3.5" />
+            </a>
+        </div>
+    );
+}

src/features/admin/components/api-key-management.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+/**
+ * CollectFlow — Gestion des clés de l'API `/api/v1`.
+ *
+ * La clé générée n'est affichable qu'une fois : elle est mise en évidence après
+ * création, puis irrécupérable (seul son hachage est stocké côté base).
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import { KeyRound, Plus, Loader2, Copy, Check, Ban, Trash2, AlertTriangle } from "lucide-react";
+import { getApiKeys, createApiKey, revokeApiKey, deleteApiKey, type ApiKeyRow } from "../api/api-key-actions";
+
+function fmtDate(iso: string | null): string {
+    if (!iso) return "—";
+    return new Date(iso).toLocaleString("fr-FR", { dateStyle: "short", timeStyle: "short" });
+}
+
+export function ApiKeyManagement() {
+    const [keys, setKeys] = useState<ApiKeyRow[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [creating, setCreating] = useState(false);
+    const [name, setName] = useState("");
+    const [role, setRole] = useState<"admin" | "user">("user");
+    const [freshKey, setFreshKey] = useState<string | null>(null);
+    const [copied, setCopied] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    // Pas de setState synchrone ici : `loading` démarre déjà à true, et le premier
+    // statement est un await. Cela évite une cascade de rendus au montage.
+    const refresh = useCallback(async () => {
+        try {
+            setKeys(await getApiKeys());
+            setError(null);
+        } catch (e) {
+            setError(e instanceof Error ? e.message : "Erreur de chargement");
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    // Chargement initial depuis la base — la donnée vient d'un système externe, pas
+    // d'un état dérivé. `refresh` n'appelle setState qu'après un await.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    useEffect(() => { refresh(); }, [refresh]);
+
+    const handleCreate = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!name.trim() || creating) return;
+        setCreating(true);
+        setError(null);
+        const res = await createApiKey(name.trim(), role);
+        if (res.success) {
+            setFreshKey(res.key);
+            setName("");
+            setCopied(false);
+            await refresh();
+        } else {
+            setError(res.error);
+        }
+        setCreating(false);
+    };
+
+    const handleRevoke = async (id: number) => {
+        await revokeApiKey(id);
+        await refresh();
+    };
+
+    const handleDelete = async (id: number) => {
+        await deleteApiKey(id);
+        await refresh();
+    };
+
+    return (
+        <div className="space-y-4">
+            <p className="text-[12px] text-[var(--text-secondary)]">
+                Les clés donnent accès à l&apos;API de lecture <code className="font-mono">/api/v1</code> (grille,
+                recherche, métriques réseau) depuis un script ou un outil externe, via l&apos;en-tête{" "}
+                <code className="font-mono">X-API-Key</code>. Depuis un navigateur connecté, la session suffit.
+            </p>
+
+            {/* Clé fraîchement créée — visible une seule fois */}
+            {freshKey && (
+                <div className="rounded-xl p-3.5 space-y-2"
+                    style={{ background: "var(--accent-bg)", border: "1px solid var(--accent-border)" }}>
+                    <div className="flex items-start gap-2 text-[12px] font-semibold" style={{ color: "var(--text-primary)" }}>
+                        <AlertTriangle className="w-4 h-4 shrink-0 mt-px" style={{ color: "var(--accent)" }} />
+                        Copiez cette clé maintenant — elle ne sera plus jamais affichée.
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <code className="flex-1 rounded-lg px-2.5 py-2 text-[12px] font-mono break-all"
+                            style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }}>
+                            {freshKey}
+                        </code>
+                        <button
+                            type="button"
+                            onClick={() => { navigator.clipboard.writeText(freshKey); setCopied(true); }}
+                            className="rounded-lg px-2.5 py-2 shrink-0"
+                            style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-secondary)" }}
+                            title="Copier"
+                        >
+                            {copied ? <Check className="w-4 h-4 text-emerald-500" /> : <Copy className="w-4 h-4" />}
+                        </button>
+                    </div>
+                    <button
+                        type="button"
+                        onClick={() => setFreshKey(null)}
+                        className="text-[11px] underline"
+                        style={{ color: "var(--text-muted)" }}
+                    >
+                        J&apos;ai copié la clé, masquer
+                    </button>
+                </div>
+            )}
+
+            {/* Création */}
+            <form onSubmit={handleCreate} className="flex flex-col sm:flex-row gap-2">
+                <input
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Nom de la clé (ex. Export comptabilité)"
+                    className="flex-1 rounded-lg px-3 py-2 text-[13px] outline-none"
+                    style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }}
+                />
+                <select
+                    value={role}
+                    onChange={(e) => setRole(e.target.value as "admin" | "user")}
+                    className="rounded-lg px-3 py-2 text-[13px] outline-none"
+                    style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }}
+                >
+                    <option value="user">Rôle : utilisateur</option>
+                    <option value="admin">Rôle : administrateur</option>
+                </select>
+                <button
+                    type="submit"
+                    disabled={creating || !name.trim()}
+                    className="rounded-lg px-4 py-2 text-[13px] font-semibold text-white disabled:opacity-50 flex items-center justify-center gap-1.5"
+                    style={{ background: "var(--accent)" }}
+                >
+                    {creating ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
+                    Créer
+                </button>
+            </form>
+
+            {error && (
+                <p className="text-[12px]" style={{ color: "var(--accent-error)" }}>{error}</p>
+            )}
+
+            {/* Liste */}
+            {loading ? (
+                <div className="flex items-center gap-2 text-[12px]" style={{ color: "var(--text-muted)" }}>
+                    <Loader2 className="w-3.5 h-3.5 animate-spin" /> Chargement…
+                </div>
+            ) : keys.length === 0 ? (
+                <p className="text-[12px]" style={{ color: "var(--text-muted)" }}>Aucune clé pour le moment.</p>
+            ) : (
+                <div className="rounded-xl overflow-hidden" style={{ border: "1px solid var(--border)" }}>
+                    <table className="w-full text-[12px]">
+                        <thead>
+                            <tr style={{ background: "var(--bg-elevated)" }}>
+                                <th className="text-left px-3 py-2 font-semibold" style={{ color: "var(--text-secondary)" }}>Nom</th>
+                                <th className="text-left px-3 py-2 font-semibold" style={{ color: "var(--text-secondary)" }}>Préfixe</th>
+                                <th className="text-left px-3 py-2 font-semibold" style={{ color: "var(--text-secondary)" }}>Rôle</th>
+                                <th className="text-left px-3 py-2 font-semibold" style={{ color: "var(--text-secondary)" }}>Créée</th>
+                                <th className="text-left px-3 py-2 font-semibold" style={{ color: "var(--text-secondary)" }}>Dernier usage</th>
+                                <th className="px-3 py-2"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {keys.map((k) => (
+                                <tr key={k.id} style={{ borderTop: "1px solid var(--border)", opacity: k.revokedAt ? 0.55 : 1 }}>
+                                    <td className="px-3 py-2 font-medium" style={{ color: "var(--text-primary)" }}>
+                                        <span className="inline-flex items-center gap-1.5">
+                                            <KeyRound className="w-3.5 h-3.5" style={{ color: "var(--text-muted)" }} />
+                                            {k.name}
+                                        </span>
+                                        {k.revokedAt && (
+                                            <span className="ml-2 rounded px-1.5 py-px text-[9px] font-bold uppercase"
+                                                style={{ background: "var(--accent-error-bg)", color: "var(--accent-error)" }}>
+                                                Révoquée
+                                            </span>
+                                        )}
+                                    </td>
+                                    <td className="px-3 py-2 font-mono" style={{ color: "var(--text-secondary)" }}>{k.keyPrefix}…</td>
+                                    <td className="px-3 py-2" style={{ color: "var(--text-secondary)" }}>{k.role}</td>
+                                    <td className="px-3 py-2" style={{ color: "var(--text-muted)" }}>{fmtDate(k.createdAt)}</td>
+                                    <td className="px-3 py-2" style={{ color: "var(--text-muted)" }}>{fmtDate(k.lastUsedAt)}</td>
+                                    <td className="px-3 py-2 text-right whitespace-nowrap">
+                                        {!k.revokedAt ? (
+                                            <button
+                                                onClick={() => handleRevoke(k.id)}
+                                                className="inline-flex items-center gap-1 rounded-lg px-2 py-1"
+                                                style={{ color: "var(--accent-error)" }}
+                                                title="Révoquer"
+                                            >
+                                                <Ban className="w-3.5 h-3.5" /> Révoquer
+                                            </button>
+                                        ) : (
+                                            <button
+                                                onClick={() => handleDelete(k.id)}
+                                                className="inline-flex items-center gap-1 rounded-lg px-2 py-1"
+                                                style={{ color: "var(--text-muted)" }}
+                                                title="Supprimer définitivement"
+                                            >
+                                                <Trash2 className="w-3.5 h-3.5" /> Supprimer
+                                            </button>
+                                        )}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+        </div>
+    );
+}

src/features/admin/components/grid-warmup.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+/**
+ * CollectFlow — Préchauffage des données exposées par l'API.
+ *
+ * L'API `/api/v1` ne calcule jamais : elle lit un instantané écrit quand la Grille est
+ * ouverte dans l'application. Sans ce préchauffage, une IA externe ne verrait que les
+ * fournisseurs déjà consultés à la main — d'où ce bouton, qui calcule tout le catalogue
+ * une bonne fois.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Loader2, Play, CheckCircle, AlertTriangle, Database } from "lucide-react";
+
+interface WarmupState {
+    status: "idle" | "running" | "success" | "error";
+    total: number;
+    done: number;
+    skipped: number;
+    failed: number;
+    currentFournisseur?: string;
+    finishedAt?: string;
+    error?: string;
+    lastErrors: string[];
+}
+
+export function GridWarmup() {
+    const [state, setState] = useState<WarmupState | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const pollRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const running = state?.status === "running";
+
+    const fetchState = useCallback(async () => {
+        try {
+            const res = await fetch("/api/admin/grid-warmup");
+            if (res.ok) setState(await res.json());
+        } catch {
+            // Réseau instable : on retentera au tick suivant.
+        }
+    }, []);
+
+    // Récupère l'état au montage : un préchauffage peut déjà tourner.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    useEffect(() => { fetchState(); }, [fetchState]);
+
+    // Suivi de l'avancement tant que le job tourne.
+    useEffect(() => {
+        if (!running) return;
+        let cancelled = false;
+        const tick = async () => {
+            await fetchState();
+            if (!cancelled) pollRef.current = setTimeout(tick, 2000);
+        };
+        pollRef.current = setTimeout(tick, 2000);
+        return () => { cancelled = true; if (pollRef.current) clearTimeout(pollRef.current); };
+    }, [running, fetchState]);
+
+    const start = async () => {
+        setError(null);
+        try {
+            const res = await fetch("/api/admin/grid-warmup?staleHours=24", { method: "POST" });
+            const data = await res.json();
+            if (!res.ok) { setError(data.error ?? `Erreur ${res.status}`); return; }
+            setState(data);
+        } catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+    };
+
+    const traites = (state?.done ?? 0) + (state?.skipped ?? 0) + (state?.failed ?? 0);
+    const pct = state && state.total > 0 ? Math.round((traites / state.total) * 100) : 0;
+
+    return (
+        <div className="space-y-3">
+            <p className="text-[12px]" style={{ color: "var(--text-secondary)" }}>
+                L&apos;API ne recalcule jamais : elle lit un instantané écrit quand la Grille est ouverte dans
+                l&apos;application. Sans préchauffage, une IA externe ne verrait que les fournisseurs déjà consultés.
+                Ce bouton calcule <strong>tous les fournisseurs</strong> ; ceux déjà à jour depuis moins de 24 h sont
+                sautés, il est donc sans risque de le relancer.
+            </p>
+
+            <div className="flex items-center gap-2.5">
+                <button
+                    onClick={start}
+                    disabled={running}
+                    className="rounded-lg px-4 py-2 text-[13px] font-semibold text-white disabled:opacity-50 flex items-center gap-1.5"
+                    style={{ background: "var(--accent)" }}
+                >
+                    {running ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
+                    {running ? "Préparation en cours…" : "Préparer les données pour l'API"}
+                </button>
+                {state && state.total > 0 && (
+                    <span className="text-[12px] tabular-nums" style={{ color: "var(--text-secondary)" }}>
+                        {traites} / {state.total} ({pct} %)
+                    </span>
+                )}
+            </div>
+
+            {running && state && (
+                <div className="space-y-1.5">
+                    <div className="h-1.5 rounded-full overflow-hidden" style={{ background: "var(--bg-elevated)" }}>
+                        <div className="h-full transition-all" style={{ width: `${pct}%`, background: "var(--accent)" }} />
+                    </div>
+                    {state.currentFournisseur && (
+                        <p className="text-[11px] truncate" style={{ color: "var(--text-muted)" }}>
+                            En cours : {state.currentFournisseur}
+                        </p>
+                    )}
+                </div>
+            )}
+
+            {state?.status === "success" && (
+                <div className="flex items-start gap-2 text-[12px]" style={{ color: "var(--text-secondary)" }}>
+                    <CheckCircle className="w-4 h-4 shrink-0 mt-px text-emerald-500" />
+                    <span>
+                        Terminé : <strong>{state.done}</strong> fournisseur(s) calculé(s),{" "}
+                        <strong>{state.skipped}</strong> déjà à jour
+                        {state.failed > 0 && <>, <strong style={{ color: "var(--accent-error)" }}>{state.failed} en échec</strong></>}.
+                    </span>
+                </div>
+            )}
+
+            {state && state.failed > 0 && state.lastErrors.length > 0 && (
+                <details className="text-[11px]" style={{ color: "var(--text-muted)" }}>
+                    <summary className="cursor-pointer">Voir les échecs ({state.lastErrors.length} premiers)</summary>
+                    <ul className="mt-1 pl-4 list-disc space-y-0.5">
+                        {state.lastErrors.map((e, i) => <li key={i} className="break-all">{e}</li>)}
+                    </ul>
+                </details>
+            )}
+
+            {(error || state?.error) && (
+                <div className="flex items-start gap-2 text-[12px]" style={{ color: "var(--accent-error)" }}>
+                    <AlertTriangle className="w-4 h-4 shrink-0 mt-px" />
+                    <span>{error ?? state?.error}</span>
+                </div>
+            )}
+
+            {state?.status === "idle" && (
+                <p className="text-[11px] flex items-center gap-1.5" style={{ color: "var(--text-muted)" }}>
+                    <Database className="w-3.5 h-3.5" />
+                    Aucun préchauffage lancé depuis le démarrage de l&apos;application.
+                </p>
+            )}
+        </div>
+    );
+}

src/features/grid/api/get-product-rows.ts

@@ -9,6 +9,7 @@ import {
     pgGetNomenclatureByFournisseur,
     pgGetStockByFournisseur,
     pgGetCommandesByFournisseur,
+    pgGetPrixVenteByFournisseur,
     type PgStockRow,
 } from "@/lib/pg-ff-client";
 import { db } from "@/db";
@@ -16,6 +17,8 @@ import { sessionSnapshots } from "@/db/schema";
 import { eq, desc } from "drizzle-orm";
 import { getNetworkMetricsByCodeCentrale } from "@/lib/qlik-network-cache";
 import { NB_MAGASINS_RESEAU } from "@/features/grid/lib/network-trend";
+// Persiste l'instantané lu par /api/v1 : sans lui, l'API n'aurait aucune donnée.
+import { upsertGridRows } from "@/lib/grid-store";
 
 interface GetProductRowsInput {
     codeFournisseur: string;
@@ -66,6 +69,23 @@ async function refreshGammeInit(rows: ProductRow[], codeFournisseur: string): Pr
     }
 }
 
+/**
+ * Écrit l'instantané de grille lu par /api/v1 (table `grid_rows`).
+ *
+ * Seul `magasin = TOTAL` est persisté : `ProductRow` embarque déjà les ventilations
+ * par magasin (sales12mByStore, caByStore…), inutile de stocker trois variantes.
+ * Toute erreur est avalée : la persistance ne doit jamais casser l'affichage.
+ */
+async function persistGridSnapshot(input: GetProductRowsInput, rows: ProductRow[]): Promise<void> {
+    if ((input.magasin ?? "TOTAL") !== "TOTAL") return;
+    try {
+        const n = await upsertGridRows(input.codeFournisseur, rows);
+        console.log(`[getProductRows] instantané persisté: ${n} lignes pour ${input.codeFournisseur}`);
+    } catch (e) {
+        console.error("[getProductRows] persistance grid_rows KO:", (e as Error).message?.slice(0, 200));
+    }
+}
+
 export async function getProductRows(input: GetProductRowsInput): Promise<ProductRow[]> {
     const cacheKey = gridRowsCacheKey(input);
     const cached = gridRowsCache.get(cacheKey);
@@ -84,6 +104,10 @@ export async function getProductRows(input: GetProductRowsInput): Promise<Produc
     const promise = buildProductRows(input).then((rows) => {
         gridRowsCache.set(cacheKey, { rows, createdAt: Date.now() });
         gridRowsPending.delete(cacheKey);
+        // Persiste l'instantané pour /api/v1 : le calcul vient d'avoir lieu, on
+        // arrête simplement de jeter le résultat. Volontairement NON bloquant —
+        // l'affichage de la Grille ne doit pas attendre l'écriture.
+        void persistGridSnapshot(input, rows);
         return rows;
     }).catch((error) => {
         gridRowsPending.delete(cacheKey);
@@ -101,7 +125,7 @@ async function buildProductRows(input: GetProductRowsInput): Promise<ProductRow[
     try {
         const { dateDebut, dateFin } = buildLast12MonthsRange();
 
-        // ─── Phase 1 : 6 requêtes SQL en parallèle ────────────────────────────
+        // ─── Phase 1 : 7 requêtes SQL en parallèle ────────────────────────────
         // Remplace des centaines/milliers d'appels HTTP per-article.
         const [
             articles,
@@ -110,6 +134,7 @@ async function buildProductRows(input: GetProductRowsInput): Promise<ProductRow[
             nomMap,
             stockMap,
             commandesMap,
+            prixVenteMap,
         ] = await Promise.all([
             pgGetArticlesByFournisseur(codeFournisseur).catch(e => { console.error("[getProductRows] pgGetArticlesByFournisseur ERROR:", e); return []; }),
             pgGetMensuelByFournisseur(codeFournisseur, dateDebut, dateFin).catch(e => { console.error("[getProductRows] pgGetMensuelByFournisseur ERROR:", e); return []; }),
@@ -117,6 +142,7 @@ async function buildProductRows(input: GetProductRowsInput): Promise<ProductRow[
             pgGetNomenclatureByFournisseur(codeFournisseur).catch(e => { console.error("[getProductRows] pgGetNomenclatureByFournisseur ERROR:", e); return new Map(); }),
             pgGetStockByFournisseur(codeFournisseur).catch(e => { console.error("[getProductRows] pgGetStockByFournisseur ERROR:", e); return new Map<string, PgStockRow[]>(); }),
             pgGetCommandesByFournisseur(codeFournisseur).catch(e => { console.error("[getProductRows] pgGetCommandesByFournisseur ERROR:", e); return new Map<string, number>(); }),
+            pgGetPrixVenteByFournisseur(codeFournisseur).catch(e => { console.error("[getProductRows] pgGetPrixVenteByFournisseur ERROR:", e); return new Map<string, Record<string, number>>(); }),
         ]);
 
         console.log(`[getProductRows] ${articles.length} articles, ${mensuelRows.length} mensuel rows, ${gammeMap.size} gammes`);
@@ -265,6 +291,25 @@ async function buildProductRows(input: GetProductRowsInput): Promise<ProductRow[
                     product.caByStore[site]       = sCa;
                     product.margeByStore[site]    = sMarge;
                 }
+
+                // Le stock TOTAL se recalcule ici, à partir des séries par site.
+                //
+                // Il était sommé plus haut depuis les lignes mensuelles brutes, ce
+                // qui perdait tout magasin SANS MOUVEMENT dans le mois : le stock
+                // est un niveau, pas un flux — un magasin qui n'a rien vendu ni reçu
+                // détient toujours sa marchandise. Sur un produit à faible rotation,
+                // « tous magasins » n'affichait donc que le site actif, en pratique
+                // Frouard. Les séries par site, elles, sont reportées d'un mois sur
+                // l'autre : leur somme est la bonne.
+                const sites = Object.keys(product.stock12mByStore);
+                if (sites.length > 0) {
+                    for (const periode of sortedPeriods) {
+                        product.stock12m[periode] = sites.reduce(
+                            (total, site) => total + (product.stock12mByStore![site][periode] ?? 0),
+                            0,
+                        );
+                    }
+                }
             }
 
             // workingStores : sites avec au moins 1 vente sur les 12 derniers mois
@@ -332,6 +377,35 @@ async function buildProductRows(input: GetProductRowsInput): Promise<ProductRow[
             }
         }
 
+        // ─── Phase 7b : Prix de vente (cube_pv, sinon le PV du cube de stock) ─
+        //
+        // `article_infosup.prix_vente_mini`, renseigné en Phase 3, n'est qu'une
+        // borne de paramétrage : elle est vide en base et laissait la colonne PV
+        // entièrement creuse. Le vrai prix vit dans `cube_pv`, par article ET par
+        // site. On garde le détail par magasin — deux magasins peuvent ne pas
+        // pratiquer le même prix, et l'afficher vaut mieux que le moyenner.
+        for (const product of productMap.values()) {
+            const parSite = prixVenteMap.get(product.codein);
+            if (parSite && Object.keys(parSite).length > 0) {
+                product.prixVenteByStore = parSite;
+            } else {
+                // Filet de secours : le cube de stock porte le même PV, mais
+                // seulement pour les articles qui ont une ligne de stock.
+                const depuisStock: Record<string, number> = {};
+                for (const s of stockMap.get(product.codein) ?? []) {
+                    const pv = Number(s.pv);
+                    const site = String(s.site ?? "").trim();
+                    if (site && Number.isFinite(pv) && pv > 0) depuisStock[site] = pv;
+                }
+                if (Object.keys(depuisStock).length > 0) product.prixVenteByStore = depuisStock;
+            }
+
+            const prix = Object.values(product.prixVenteByStore ?? {});
+            // Le plus élevé quand les magasins divergent : une moyenne inventerait
+            // un prix qu'aucune caisse ne pratique. L'écart est signalé à l'écran.
+            if (prix.length > 0) product.prixVente = Math.max(...prix);
+        }
+
         // ─── Phase 8 : Données réseau Qlik (CA / Qté / nb magasins par code centrale) ──
         await enrichWithNetworkMetrics(productMap);
 
@@ -373,7 +447,14 @@ async function buildProductRows(input: GetProductRowsInput): Promise<ProductRow[
 
     } catch (error) {
         console.error(`[getProductRows] Error for ${codeFournisseur}:`, error);
-        return [];
+        // Ne PAS renvoyer [] : une liste vide est indiscernable d'un fournisseur
+        // sans article. La Grille affichait une page blanche sans explication, et
+        // la synchro nocturne prenait la panne pour un fournisseur vide — qu'elle
+        // désactivait alors automatiquement. La remonter laisse chaque appelant la
+        // traiter comme une erreur (bandeau rouge, statut « echec »).
+        throw error instanceof Error
+            ? error
+            : new Error(`Calcul de la grille impossible pour ${codeFournisseur} : ${String(error)}`);
     }
 }
 
@@ -394,9 +475,22 @@ async function reconcileSelectedStoreFromMensuelApi(
 
     if (candidates.length === 0) return;
 
+    // Ce rattrapage fait UNE requête HTTP par article : sur un gros fournisseur,
+    // les candidats se comptent par milliers et le changement de magasin se fige
+    // plusieurs minutes. On le borne, et on dit ce qui a été laissé de côté
+    // plutôt que de tronquer en silence.
+    const PLAFOND = Number(process.env.GRID_STORE_RECONCILE_MAX ?? 300);
+    const retenus = candidates.slice(0, PLAFOND);
+    if (candidates.length > retenus.length) {
+        console.warn(
+            `[getProductRows] rattrapage magasin ${magasin} borné à ${retenus.length} articles`
+            + ` sur ${candidates.length} : les autres gardent la valeur SQL.`,
+        );
+    }
+
     try {
         const mensuelMap = await getMensuelByArticles(
-            candidates.map((row) => ({
+            retenus.map((row) => ({
                 codein: row.codein,
                 libelle1: row.libelle1,
                 codefou: row.codeFournisseur,
@@ -408,7 +502,7 @@ async function reconcileSelectedStoreFromMensuelApi(
         );
 
         let fixedRows = 0;
-        for (const row of candidates) {
+        for (const row of retenus) {
             const entries = (mensuelMap.get(row.codein) ?? []).filter((entry) => entry.site === magasin);
             if (entries.length === 0) continue;
 

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

@@ -0,0 +1,458 @@
+"use client";
+
+/**
+ * CollectFlow — Trous d'assortiment : ce qu'un magasin ne travaille pas.
+ *
+ * On part du CLASSEMENT AFFICHÉ, pas d'un classement maison : le tri en cours
+ * dans la Grille — CA réseau, quantité, marge, peu importe — fixe l'ordre et
+ * donc ce que « le haut du classement » veut dire. Recalculer un ordre ici
+ * répondrait à une autre question que celle qu'on vient de poser à l'écran.
+ *
+ * « Non travaillé » = aucune vente sur 12 mois ET aucun stock au dernier mois
+ * connu. Les deux conditions comptent : un article sans vente mais en stock est
+ * détenu par le magasin, ce n'est pas un trou d'assortiment mais un invendu.
+ */
+
+import React, { useMemo, useState } from "react";
+import { PackageX, Store, FileSpreadsheet, Loader2 } from "lucide-react";
+import { DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { TuileStat } from "@/features/grid/components/stat-tile";
+import { SITE_LABELS } from "@/features/grid/lib/months";
+import type { ProductRow } from "@/types/grid";
+
+/** Ligne du classement affiché : le produit et la valeur qui l'a classé. */
+export interface LigneClassee {
+    row: ProductRow;
+    valeurCritere: unknown;
+}
+
+const PROFONDEURS = [100, 200, 500] as const;
+export const PROFONDEUR_MAX = PROFONDEURS[PROFONDEURS.length - 1];
+
+const nb = (v: number) => Math.round(v).toLocaleString("fr-FR");
+const eur0 = (v: number) => `${Math.round(v).toLocaleString("fr-FR")} €`;
+const eur2 = (v: number) => v.toLocaleString("fr-FR", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " €";
+
+/**
+ * Libellé et mise en forme de la colonne de tri.
+ *
+ * Le tri porte sur des grandeurs sans commune mesure — des euros, des unités,
+ * des pourcentages. Afficher la valeur brute rendrait la colonne illisible, et
+ * ne rien afficher priverait le classement de sa justification.
+ */
+interface Critere {
+    label: string;
+    format: (v: number) => string;
+    /** Format de nombre Excel — la valeur part BRUTE dans le tableur, qui doit
+     *  pouvoir la trier et la sommer ; seule sa présentation est reprise ici. */
+    xlsx: string;
+    /** Normalisation avant export, quand la donnée stockée n'est pas l'unité affichée. */
+    brut?: (v: number) => number;
+}
+
+const CRITERES: Record<string, Critere> = {
+    caReseau:           { label: "CA réseau",          format: eur0, xlsx: '#,##0 "€"' },
+    qteReseau:          { label: "Qté réseau",         format: nb,   xlsx: "#,##0" },
+    nbMagasinsReseau:   { label: "Magasins réseau",    format: nb,   xlsx: "#,##0" },
+    tendanceReseau:     { label: "Tendance réseau",    format: (v) => `${v >= 0 ? "+" : ""}${Math.round(v * 100)} %`, xlsx: "0 %" },
+    prixMoyenReseau:    { label: "PV moyen réseau",    format: eur2, xlsx: '#,##0.00 "€"' },
+    prixVente:          { label: "PV magasin",         format: eur2, xlsx: '#,##0.00 "€"' },
+    caParMagasinReseau: { label: "CA / magasin réseau", format: eur0, xlsx: '#,##0 "€"' },
+    margePctReseau:     { label: "Marge % réseau",     format: (v) => `${(Math.abs(v) <= 1 ? v * 100 : v).toFixed(1)} %`,
+                          xlsx: '0.0 "%"', brut: (v) => (Math.abs(v) <= 1 ? v * 100 : v) },
+    totalQuantite:      { label: "Qté 12 m",           format: nb,   xlsx: "#,##0" },
+    totalCa:            { label: "CA 12 m",            format: eur0, xlsx: '#,##0 "€"' },
+    totalMarge:         { label: "Marge 12 m",         format: eur0, xlsx: '#,##0 "€"' },
+};
+
+function libelleCritere(id: string | null): string {
+    if (!id) return "ordre d'affichage";
+    return CRITERES[id]?.label ?? id;
+}
+
+function formatCritere(id: string | null, valeur: unknown): string {
+    if (valeur == null) return "—";
+    if (typeof valeur !== "number") return String(valeur);
+    // Les sentinelles de tri (valeurs manquantes, produit « nouveau ») ne sont
+    // pas des mesures : les écrire donnerait un nombre qui n'existe pas.
+    if (!Number.isFinite(valeur)) return "—";
+    return (id && CRITERES[id]?.format(valeur)) ?? nb(valeur);
+}
+
+/** Ce que le magasin fait de ce produit, et ce que les autres en font. */
+interface Constat {
+    ventesMagasin: number;
+    stockMagasin: number;
+    /** Le magasin a déjà détenu ce produit sur la période (stock ou réception). */
+    dejaDetenu: boolean;
+    ventesAilleurs: number;
+    stockAilleurs: number;
+}
+
+function constater(row: ProductRow, site: string, mois: string[]): Constat {
+    const ventesParSite = row.sales12mByStore ?? {};
+    const stockParSite = row.stock12mByStore ?? {};
+    const receptionsParSite = row.receptions12mByStore ?? {};
+
+    const somme = (serie?: Record<string, number>) =>
+        mois.reduce((total, m) => total + (serie?.[m] ?? 0), 0);
+    const dernier = (serie?: Record<string, number>) => serie?.[mois[mois.length - 1]] ?? 0;
+
+    const ventesMagasin = row.quantiteByStore?.[site] ?? somme(ventesParSite[site]);
+    const stockMagasin = dernier(stockParSite[site]);
+    const maxStock = mois.reduce((max, m) => Math.max(max, stockParSite[site]?.[m] ?? 0), 0);
+
+    let ventesAilleurs = 0;
+    let stockAilleurs = 0;
+    for (const autre of new Set([...Object.keys(ventesParSite), ...Object.keys(stockParSite)])) {
+        if (autre === site) continue;
+        ventesAilleurs += row.quantiteByStore?.[autre] ?? somme(ventesParSite[autre]);
+        stockAilleurs += dernier(stockParSite[autre]);
+    }
+
+    return {
+        ventesMagasin,
+        stockMagasin,
+        dejaDetenu: maxStock > 0 || somme(receptionsParSite[site]) > 0,
+        ventesAilleurs,
+        stockAilleurs,
+    };
+}
+
+/** Ligne prête pour le tableur : le rang, le produit, le constat. */
+interface TrouClasse {
+    row: ProductRow;
+    valeurCritere: unknown;
+    rang: number;
+    constat: Constat;
+}
+
+/**
+ * Classeur Excel de la liste affichée.
+ *
+ * Deux feuilles : les données seules d'un côté — en-têtes ligne 1, filtre
+ * automatique, valeurs NUMÉRIQUES pour que le tableur puisse trier et sommer —
+ * et le contexte de l'extraction de l'autre. Mêler les deux dans une même
+ * feuille condamnerait le filtre et le tri, alors que ce fichier a vocation à
+ * être retravaillé.
+ *
+ * `exceljs` est chargé à la demande : il pèse lourd, et la Grille n'a pas à le
+ * transporter pour tous ceux qui n'exportent jamais.
+ */
+async function construireClasseur(
+    trous: TrouClasse[],
+    contexte: { fournisseur?: string; magasin: string; critere: string; profondeur: number; examines: number },
+    critereId: string | null,
+): Promise<Blob> {
+    const { Workbook } = await import("exceljs");
+    const classeur = new Workbook();
+    classeur.creator = "CollectFlow";
+    classeur.created = new Date();
+
+    const critere = critereId ? CRITERES[critereId] : undefined;
+    const feuille = classeur.addWorksheet("Non travaillés", { views: [{ state: "frozen", ySplit: 1 }] });
+
+    feuille.columns = [
+        { header: "Rang", key: "rang", width: 8 },
+        { header: "Code interne", key: "codein", width: 14 },
+        { header: "Référence", key: "reference", width: 18 },
+        { header: "EAN / GTIN", key: "gtin", width: 16 },
+        { header: "Désignation", key: "libelle", width: 45 },
+        { header: "Famille", key: "famille", width: 30 },
+        { header: contexte.critere, key: "critere", width: 18 },
+        { header: "Ventes ailleurs 12 m", key: "ventesAilleurs", width: 20 },
+        { header: "Stock ailleurs", key: "stockAilleurs", width: 15 },
+        { header: "Constat", key: "constat", width: 24 },
+    ];
+
+    feuille.getRow(1).font = { bold: true, color: { argb: "FFFFFFFF" } };
+    feuille.getRow(1).fill = { type: "pattern", pattern: "solid", fgColor: { argb: "FF0F172A" } };
+    feuille.getRow(1).height = 20;
+
+    for (const { row, valeurCritere, rang, constat } of trous) {
+        feuille.addRow({
+            rang,
+            codein: row.codein,
+            reference: row.reference || "",
+            gtin: row.gtin || "",
+            libelle: row.libelle1 || "",
+            famille: [row.code3, row.libelle3].filter(Boolean).join(" — "),
+            critere: typeof valeurCritere === "number" && Number.isFinite(valeurCritere)
+                ? (critere?.brut?.(valeurCritere) ?? valeurCritere)
+                : (valeurCritere == null ? "" : String(valeurCritere)),
+            ventesAilleurs: constat.ventesAilleurs,
+            stockAilleurs: constat.stockAilleurs,
+            constat: constat.dejaDetenu ? "déjà détenu, sans vente" : "jamais détenu",
+        });
+    }
+
+    if (critere) feuille.getColumn("critere").numFmt = critere.xlsx;
+    feuille.getColumn("ventesAilleurs").numFmt = "#,##0";
+    feuille.getColumn("stockAilleurs").numFmt = "#,##0";
+    feuille.autoFilter = { from: { row: 1, column: 1 }, to: { row: 1, column: feuille.columns.length } };
+
+    const contexteFeuille = classeur.addWorksheet("Contexte");
+    contexteFeuille.columns = [{ width: 26 }, { width: 60 }];
+    for (const [cle, valeur] of [
+        ["Extraction", "Produits non travaillés par un magasin"],
+        ["Fournisseur", contexte.fournisseur ?? "—"],
+        ["Magasin examiné", contexte.magasin],
+        ["Classement", `${contexte.critere} — ${contexte.profondeur} premiers (${contexte.examines} examinés)`],
+        ["Critère retenu", "aucune vente sur 12 mois glissants ET aucun stock au dernier mois connu"],
+        ["Non travaillés", String(trous.length)],
+        ["Généré le", new Date().toLocaleString("fr-FR")],
+    ]) {
+        const ligne = contexteFeuille.addRow([cle, valeur]);
+        ligne.getCell(1).font = { bold: true };
+    }
+
+    const buffer = await classeur.xlsx.writeBuffer();
+    return new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
+}
+
+export function AssortmentGapsModal({ classement, critereId, mois, magasinInitial, nomFournisseur, onClose }: {
+    /** Le classement AFFICHÉ, dans son ordre — déjà tronqué à PROFONDEUR_MAX. */
+    classement: LigneClassee[];
+    critereId: string | null;
+    /** Les 12 clés de mois, du plus ancien au plus récent. */
+    mois: string[];
+    magasinInitial: string;
+    /** Sert à nommer le fichier exporté et à le documenter. */
+    nomFournisseur?: string;
+    onClose: () => void;
+}) {
+    // Magasins réellement présents dans les données, à défaut les deux sites connus.
+    const sites = useMemo(() => {
+        const trouves = new Set<string>();
+        for (const { row } of classement) {
+            for (const s of Object.keys(row.sales12mByStore ?? {})) trouves.add(s);
+            for (const s of Object.keys(row.stock12mByStore ?? {})) trouves.add(s);
+        }
+        return trouves.size > 0 ? [...trouves].sort() : Object.keys(SITE_LABELS);
+    }, [classement]);
+
+    const [site, setSite] = useState(() => (sites.includes(magasinInitial) ? magasinInitial : sites[0]));
+    const [profondeur, setProfondeur] = useState<number>(200);
+
+    const examine = useMemo(() => classement.slice(0, profondeur), [classement, profondeur]);
+
+    const trous = useMemo(() => examine
+        .map((ligne, index) => ({ ...ligne, rang: index + 1, constat: constater(ligne.row, site, mois) }))
+        .filter(({ constat }) => constat.ventesMagasin <= 0 && constat.stockMagasin <= 0),
+        [examine, site, mois]);
+
+    const [exportEnCours, setExportEnCours] = useState(false);
+    const [exportErreur, setExportErreur] = useState<string | null>(null);
+
+    const vendusAilleurs = trous.filter((t) => t.constat.ventesAilleurs > 0).length;
+    const dejaTentes = trous.filter((t) => t.constat.dejaDetenu).length;
+    const nomMagasin = SITE_LABELS[site]?.nom ?? site;
+    const autresMagasins = sites.filter((s) => s !== site).map((s) => SITE_LABELS[s]?.nom ?? s).join(", ") || "les autres";
+
+    const exporter = async () => {
+        if (trous.length === 0 || exportEnCours) return;
+        setExportEnCours(true);
+        setExportErreur(null);
+        try {
+            const blob = await construireClasseur(
+                trous,
+                {
+                    fournisseur: nomFournisseur,
+                    magasin: nomMagasin,
+                    critere: libelleCritere(critereId),
+                    profondeur,
+                    examines: examine.length,
+                },
+                critereId,
+            );
+            const url = URL.createObjectURL(blob);
+            const lien = document.createElement("a");
+            lien.href = url;
+            lien.download = [
+                "Non_travailles",
+                nomFournisseur?.replace(/[^\w]+/g, "_"),
+                nomMagasin.replace(/[^\w]+/g, "_"),
+                `Top${profondeur}`,
+                new Date().toISOString().slice(0, 10),
+            ].filter(Boolean).join("_") + ".xlsx";
+            lien.click();
+            URL.revokeObjectURL(url);
+        } catch (e) {
+            // Un export qui échoue en silence laisse croire au téléchargement.
+            console.error("[trous d'assortiment] export Excel :", e);
+            setExportErreur("L'export a échoué. Réessayez, ou signalez-le si cela persiste.");
+        } finally {
+            setExportEnCours(false);
+        }
+    };
+
+    return (
+        <DialogContent
+            className="max-w-[calc(100%-2rem)] sm:max-w-5xl grid-cols-1 max-h-[88vh] overflow-y-auto"
+            style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }}
+            onInteractOutside={onClose}
+        >
+            <DialogHeader>
+                <DialogTitle className="text-lg leading-snug pr-6 flex items-center gap-2" style={{ color: "var(--text-primary)" }}>
+                    <PackageX className="w-5 h-5 shrink-0" style={{ color: "var(--accent-warning)" }} />
+                    Produits non travaillés par un magasin
+                </DialogTitle>
+                <p className="text-[13px] mt-1" style={{ color: "var(--text-muted)" }}>
+                    Sur le classement affiché — trié par{" "}
+                    <span className="font-semibold" style={{ color: "var(--text-secondary)" }}>{libelleCritere(critereId)}</span>
+                    {" — ni vente ni stock sur 12 mois."}
+                </p>
+            </DialogHeader>
+
+            {/* 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>
+                    <div className="inline-flex rounded-lg p-0.5" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}>
+                        {sites.map((s) => (
+                            <button
+                                key={s}
+                                type="button"
+                                onClick={() => setSite(s)}
+                                aria-pressed={site === s}
+                                className="px-3 py-1 text-[12px] font-semibold rounded-md transition-colors flex items-center gap-1.5"
+                                style={site === s
+                                    ? { background: "var(--bg-surface)", color: "var(--text-primary)" }
+                                    : { color: "var(--text-muted)" }}
+                            >
+                                <Store className="w-3 h-3" />
+                                {SITE_LABELS[s]?.nom ?? s}
+                            </button>
+                        ))}
+                    </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>
+                    <div className="inline-flex rounded-lg p-0.5" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}>
+                        {PROFONDEURS.map((p) => (
+                            <button
+                                key={p}
+                                type="button"
+                                onClick={() => setProfondeur(p)}
+                                aria-pressed={profondeur === p}
+                                className="px-3 py-1 text-[12px] font-semibold rounded-md transition-colors tabular-nums"
+                                style={profondeur === p
+                                    ? { background: "var(--bg-surface)", color: "var(--text-primary)" }
+                                    : { color: "var(--text-muted)" }}
+                            >
+                                Top {p}
+                            </button>
+                        ))}
+                    </div>
+                    {classement.length < profondeur && (
+                        <span className="text-[11.5px]" style={{ color: "var(--text-muted)" }}>
+                            ({classement.length} lignes affichées seulement)
+                        </span>
+                    )}
+                </div>
+
+                {/* L'export reprend exactement la liste affichée : même magasin,
+                    même profondeur, même classement. */}
+                <button
+                    type="button"
+                    onClick={exporter}
+                    disabled={trous.length === 0 || exportEnCours}
+                    title={trous.length === 0
+                        ? "Rien à exporter : aucun trou dans ce périmètre"
+                        : `Exporter les ${trous.length} produits non travaillés au format Excel`}
+                    className="ml-auto flex items-center gap-2 px-3 py-1.5 rounded-md text-[12px] font-semibold border transition-all disabled:opacity-50"
+                    style={{ background: "var(--bg-elevated)", borderColor: "var(--border-strong)", color: "var(--text-secondary)" }}
+                >
+                    {exportEnCours ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5" />}
+                    {exportEnCours ? "Génération…" : "Export Excel"}
+                </button>
+            </div>
+
+            {exportErreur && (
+                <div className="rounded-lg px-3 py-2 text-[12px]" style={{ background: "var(--accent-error-bg)", border: "1px solid var(--accent-error)", color: "var(--accent-error)" }}>
+                    {exportErreur}
+                </div>
+            )}
+
+            <div className="flex flex-wrap gap-2">
+                <TuileStat
+                    label="Non travaillés"
+                    valeur={`${trous.length} / ${examine.length}`}
+                    indice={`à ${nomMagasin}`}
+                    couleur={trous.length > 0 ? "var(--accent-warning)" : undefined}
+                    icone={PackageX}
+                />
+                <TuileStat
+                    label="Vendus ailleurs"
+                    valeur={nb(vendusAilleurs)}
+                    indice={`déjà vendus chez ${autresMagasins} — le gisement le plus sûr`}
+                />
+                <TuileStat
+                    label="Déjà détenus"
+                    valeur={nb(dejaTentes)}
+                    indice="stock ou réception sur la période, sans vente : essayés, pas oubliés"
+                />
+            </div>
+
+            {trous.length === 0 ? (
+                <div className="rounded-xl p-4 text-center text-[13px]" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-muted)" }}>
+                    Aucun trou dans les {examine.length} premiers : {nomMagasin} travaille tout le haut de ce classement.
+                </div>
+            ) : (
+                <div className="rounded-xl overflow-x-auto min-w-0" style={{ border: "1px solid var(--border)" }}>
+                    <table className="w-full text-[12px]" style={{ minWidth: 820 }}>
+                        <thead>
+                            <tr style={{ background: "var(--bg-elevated)" }}>
+                                <th className="text-right px-2.5 py-1.5 font-semibold" style={{ color: "var(--text-secondary)" }}>#</th>
+                                <th className="text-left px-2.5 py-1.5 font-semibold" style={{ color: "var(--text-secondary)" }}>Code</th>
+                                <th className="text-left px-2.5 py-1.5 font-semibold" style={{ color: "var(--text-secondary)" }}>Référence</th>
+                                <th className="text-left px-2.5 py-1.5 font-semibold" style={{ color: "var(--text-secondary)" }}>Désignation</th>
+                                <th className="text-right px-2.5 py-1.5 font-semibold whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
+                                    {libelleCritere(critereId)}
+                                </th>
+                                <th className="text-right px-2.5 py-1.5 font-semibold whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>Ventes ailleurs</th>
+                                <th className="text-right px-2.5 py-1.5 font-semibold whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>Stock ailleurs</th>
+                                <th className="text-left px-2.5 py-1.5 font-semibold" style={{ color: "var(--text-secondary)" }}>Constat</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {trous.map(({ row, valeurCritere, rang, constat }) => (
+                                <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)" }}>
+                                        {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>
+                                        )}
+                                    </td>
+                                    <td className="px-2.5 py-1.5 text-right tabular-nums font-semibold whitespace-nowrap" style={{ color: "var(--text-primary)" }}>
+                                        {formatCritere(critereId, valeurCritere)}
+                                    </td>
+                                    <td className="px-2.5 py-1.5 text-right tabular-nums whitespace-nowrap"
+                                        style={{ color: constat.ventesAilleurs > 0 ? "var(--accent-success)" : "var(--text-muted)" }}>
+                                        {constat.ventesAilleurs > 0 ? nb(constat.ventesAilleurs) : "—"}
+                                    </td>
+                                    <td className="px-2.5 py-1.5 text-right tabular-nums whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
+                                        {constat.stockAilleurs > 0 ? nb(constat.stockAilleurs) : "—"}
+                                    </td>
+                                    <td className="px-2.5 py-1.5 whitespace-nowrap" style={{ color: "var(--text-muted)" }}>
+                                        {constat.dejaDetenu ? "déjà détenu, sans vente" : "jamais détenu"}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+
+            <p className="text-[11.5px] 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>
+        </DialogContent>
+    );
+}

src/features/grid/components/bulk-action-toolbar.tsx

@@ -32,7 +32,7 @@ export function BulkActionToolbar({ selectedCodeins, onClearSelection }: BulkAct
     };
 
     return (
-        <div className="flex items-center gap-3 px-4 py-2 bg-slate-900 border border-slate-700/50 rounded-xl backdrop-blur-md shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200">
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2 bg-slate-900 border border-slate-700/50 rounded-xl backdrop-blur-md shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200">
             <span className="text-[11px] font-black uppercase tracking-wider text-slate-200">
                 {selectedCodeins.length} sélectionné{selectedCodeins.length > 1 ? "s" : ""}
             </span>

src/features/grid/components/floating-summary-bar.tsx

@@ -19,9 +19,12 @@ function Stat({ label, value, sub }: { label: string; value: string; sub?: strin
     // Determine color based on label to match the prototype
     const valColor = label.includes("CA") || label.includes("Marge") ? "text-emerald-600 dark:text-emerald-400" : "text-slate-900 dark:text-white";
     return (
-        <div className="flex flex-col items-center">
-            <span className="text-slate-500 text-[10px] uppercase font-black mb-1 tracking-tighter">{label}</span>
-            <span className={`font-mono-nums font-black text-xl ${valColor}`}>{value}</span>
+        // Barre maintenant dans le flux : chaque pixel de hauteur est pris au
+        // tableau. Ces chiffres sont déjà repris en gros dans l'en-tête de page,
+        // ils n'ont pas besoin d'y être une seconde fois en 20 px.
+        <div className="flex flex-col items-center leading-tight">
+            <span className="text-slate-500 text-[10px] uppercase font-black tracking-tighter">{label}</span>
+            <span className={`font-mono-nums font-black text-base ${valColor}`}>{value}</span>
             {sub && <span className="text-emerald-600 dark:text-emerald-500 text-[11px] font-bold">{sub}</span>}
         </div>
     );
@@ -153,7 +156,20 @@ export function FloatingSummaryBar() {
 
     return (
         <div
-            className="fixed bottom-6 left-[264px] right-6 p-4 flex justify-between items-center shadow-lg border rounded-xl z-50 transition-colors bg-slate-100 dark:bg-slate-800"
+            /*
+             * Dans le flux, plus en `fixed`.
+             *
+             * En `fixed` elle ne réservait aucune hauteur : seul un `pb-12` posé sur
+             * la page compensait, et il était trop court d'une quarantaine de pixels.
+             * Elle recouvrait donc la dernière ligne du tableau ET la barre de
+             * défilement horizontale — d'où l'impression qu'aucun ascenseur n'existait.
+             *
+             * Le `left-[264px]` était en prime calé sur une barre latérale dépliée,
+             * alors qu'elle est repliée par défaut (64 px) : 200 px de vide à gauche.
+             * En flux, la grille cède exactement la hauteur nécessaire et il n'y a
+             * plus aucune valeur magique à tenir en phase.
+             */
+            className="shrink-0 px-4 py-2.5 flex flex-wrap justify-between items-center gap-x-4 gap-y-2 shadow-sm border rounded-xl transition-colors bg-slate-100 dark:bg-slate-800"
             style={{
                 borderColor: hasDrafts ? "rgba(234, 179, 8, 0.5)" : "var(--border-strong)",
             }}

src/features/grid/components/grid-client.tsx

@@ -58,6 +58,7 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
     const rows = useGridStore((s) => s.rows);
     const setActiveGridQuery = useGridStore((s) => s.setActiveGridQuery);
     const setFilter = useGridStore((s) => s.setFilter);
+    const setCode3Filter = useGridStore((s) => s.setCode3Filter);
     const setActiveMagasin = useGridStore((s) => s.setActiveMagasin);
     const searchParams = useSearchParams();
     const router = useRouter();
@@ -95,10 +96,10 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
         if (!isMounted) return;
         if (prevFournisseurRef.current !== codeFournisseur) {
             setFilter("codeGamme", null);
-            setFilter("code3", null);
+            setCode3Filter(null);
             prevFournisseurRef.current = codeFournisseur;
         }
-    }, [codeFournisseur, setFilter, isMounted]);
+    }, [codeFournisseur, setFilter, setCode3Filter, isMounted]);
 
     const refreshToken = searchParams.get("_refresh");
     useEffect(() => {
@@ -108,9 +109,11 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
         const params = new URLSearchParams();
         params.set("fournisseur", codeFournisseur);
         params.set("magasin", magasin || "TOTAL");
+        // `code3` n'est volontairement pas transmis : le serveur ignore ce filtre
+        // (getProductRows ne s'en sert pas) et la Grille l'applique en local. Le
+        // faire voyager relançait un chargement complet à chaque case cochée.
         if (filters.code1) params.set("code1", filters.code1);
         if (filters.code2) params.set("code2", filters.code2);
-        if (filters.code3) params.set("code3", filters.code3);
         if (refreshToken) params.set("refresh", "1");
 
         let accumulatedRows: ProductRow[] = [];
@@ -173,7 +176,7 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
         loadRows();
 
         return () => controller.abort();
-    }, [codeFournisseur, magasin, filters.code1, filters.code2, filters.code3, refreshToken, setRows, isMounted]);
+    }, [codeFournisseur, magasin, filters.code1, filters.code2, refreshToken, setRows, isMounted]);
 
     // Synchroniser le magasin actif depuis la prop URL (changement de magasin sans rechargement)
     useEffect(() => {
@@ -206,7 +209,7 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
     const activeStoreNom = magasins.find(m => m.code === magasin)?.nom || "National (Total)";
 
     return (
-        <div className="flex flex-col h-full space-y-3 min-h-0 pb-12">
+        <div className="flex flex-col h-full space-y-3 min-h-0">
             {/* Header — chrome raffiné (eyebrow teal + fournisseur héro + pastilles métriques) */}
             <header className="shrink-0 flex items-center justify-between gap-4 pb-2.5" style={{ borderBottom: "1px solid var(--border)" }}>
                 <div className="flex items-center gap-3.5 min-w-0">
@@ -304,6 +307,7 @@ export function GridClient({ codeFournisseur, nomFournisseur, fournisseurs, maga
                 <HeatmapGrid
                     onSelectionChange={setSelectedCodeins}
                     isAdmin={isAdmin}
+                    nomFournisseur={nomFournisseur}
                 />
             </div>
 

src/features/grid/components/grid-filter-bar.tsx

@@ -134,7 +134,7 @@ export function GridFilterBar({ fournisseurs, magasins }: GridFilterBarProps) {
                 fournisseurs={fournisseurs}
                 selectedCode={searchParams.get("fournisseur")}
                 onSelect={handleSupplierSelect}
-                className="w-[280px]"
+                className="w-[200px] xl:w-[280px]"
             />
 
             {/* Store Selector */}
@@ -142,7 +142,7 @@ export function GridFilterBar({ fournisseurs, magasins }: GridFilterBarProps) {
                 magasins={magasins}
                 selectedCode={activeMagasin === "TOTAL" ? null : activeMagasin}
                 onSelect={handleStoreSelect}
-                className="w-[220px]"
+                className="w-[170px] xl:w-[220px]"
             />
 
             {/* Search */}
@@ -156,12 +156,19 @@ export function GridFilterBar({ fournisseurs, magasins }: GridFilterBarProps) {
                     placeholder="Rechercher (code, désignation...)"
                     value={searchValue}
                     onChange={(e) => setSearchValue(e.target.value)}
-                    className="apple-input w-72 pr-8"
+                    // La croix native de `type="search"` (WebKit/Blink) est masquée :
+                    // ce champ a déjà son propre bouton d'effacement juste à droite,
+                    // et les deux apparaissaient côte à côte. On garde `type="search"`
+                    // pour la sémantique ; le masquage est local, la recherche de
+                    // l'en-tête n'ayant pas de bouton maison, elle garde le sien.
+                    className="apple-input w-52 xl:w-72 pr-8 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-cancel-button]:hidden"
                     style={{ paddingLeft: "32px" }}
                 />
                 {searchValue && (
                     <button
+                        type="button"
                         onClick={() => setSearchValue("")}
+                        aria-label="Effacer la recherche"
                         className="absolute right-2 top-1/2 -translate-y-1/2"
                     >
                         <X className="h-3.5 w-3.5 hover:opacity-100 opacity-60 transition-opacity" style={{ color: "var(--text-secondary)" }} />

src/features/grid/components/heatmap-grid.tsx

@@ -13,21 +13,26 @@ import {
     RowSelectionState,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { ChevronUp, ChevronDown, ChevronsUpDown, Copy, Check, Store, SlidersHorizontal, ShoppingCart, PackageOpen, Warehouse, AlertTriangle, TrendingUp, TrendingDown, Minus } from "lucide-react";
+import { ChevronUp, ChevronDown, ChevronsUpDown, Copy, Check, Store, SlidersHorizontal, ShoppingCart, PackageOpen, PackageX, Warehouse, AlertTriangle, TrendingUp, TrendingDown, Minus, CalendarRange, Tag, Eye, EyeOff } from "lucide-react";
 import {
     DropdownMenu,
     DropdownMenuCheckboxItem,
     DropdownMenuContent,
+    DropdownMenuLabel,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useGridStore } from "@/features/grid/store/use-grid-store";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { GammeSelect } from "@/features/grid/components/gamme-select";
 import { HeatmapCell } from "@/features/grid/components/heatmap-cell";
+import { TuileStat } from "@/features/grid/components/stat-tile";
+import { ProductMonthlyModal } from "@/features/grid/components/product-monthly-modal";
+import { AssortmentGapsModal, PROFONDEUR_MAX, type LigneClassee } from "@/features/grid/components/assortment-gaps-modal";
 import type { ProductRow, GammeCode } from "@/types/grid";
 import { cn } from "@/lib/utils";
 import {
     getLast12Months,
+    getMonthsFromRows,
     formatMonthLabel,
     formatDate,
     SITE_LABELS,
@@ -45,6 +50,8 @@ import { TrendSparkline, NetworkLineChart } from "@/features/grid/components/net
 interface HeatmapGridProps {
     onSelectionChange?: (codeins: string[]) => void;
     isAdmin?: boolean;
+    /** Sert à nommer et documenter les extractions issues de la Grille. */
+    nomFournisseur?: string;
 }
 
 const EMPTY_DRAFT_CHANGES: Record<string, GammeCode> = {};
@@ -54,20 +61,88 @@ const QLIK_NETWORK_COLUMN_IDS = new Set<string>([
     "qteReseau",
     "nbMagasinsReseau",
     "tendanceReseau",
+    "prixMoyenReseau",
     "caParMagasinReseau",
     "margePctReseau",
 ]);
 
-function getQlikNetworkSortValue(value: number | null | undefined, columnId: string, sorting: SortingState): number | undefined {
-    if (value != null) return value;
+/**
+ * Valeur de tri d'une colonne dont la donnée peut manquer : `undefined`, jamais
+ * zéro — un article que la source ne renseigne pas n'a pas vendu pour 0 €.
+ *
+ * Les colonnes qui l'emploient portent `sortUndefined: "last"`, qui garde ces
+ * lignes en bas dans LES DEUX SENS. Une sentinelle ±Infinity choisie d'après le
+ * sens de tri courant ne le pouvait pas : TanStack mémorise le résultat de
+ * l'accesseur dans `row._valuesCache` sans jamais le réévaluer, si bien que la
+ * sentinelle calculée au premier tri restait figée et renvoyait les lignes sans
+ * donnée en tête dès qu'on inversait le sens.
+ */
+const valeurTriable = (value: number | null | undefined): number | undefined => value ?? undefined;
 
-    const activeSort = sorting.find((sort) => sort.id === columnId);
-    if (!activeSort) return undefined;
+/**
+ * Prix de vente moyen constaté sur le réseau.
+ *
+ * Même définition que la fiche produit (`/produits`) : CA réseau ÷ quantité
+ * vendue. Sans quantité, le rapport n'existe pas — on rend `null` plutôt que
+ * zéro, un prix nul se confondrait avec un article donné.
+ */
+function prixMoyenReseau(row: ProductRow): number | null {
+    const qte = row.qteReseau;
+    const ca = row.caReseau;
+    if (qte == null || ca == null || qte <= 0) return null;
+    return ca / qte;
+}
 
-    // TanStack inverse le résultat en tri descendant. On utilise donc une
-    // sentinelle dépendante du sens de tri pour garder les valeurs absentes
-    // toujours en bas, en ascendant comme en descendant.
-    return activeSort.desc ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY;
+/** Montant en euros au centime — l'usage sur des prix unitaires. */
+const fmtEuro2 = (v: number) =>
+    v.toLocaleString("fr-FR", { style: "currency", currency: "EUR", minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+/**
+ * Prix de vente à montrer pour le magasin consulté.
+ *
+ * `cube_pv` a une clé `(artnoid, site)`, mais notre base n'y met en pratique
+ * qu'une ligne par article : le prix n'est pas ventilé par magasin. La colonne
+ * doit donc rester lisible dans les deux cas de figure —
+ *
+ *   · magasin consulté tarifé → SON prix ;
+ *   · prix unique, non ventilé → ce prix vaut pour tous les magasins ;
+ *   · plusieurs prix mais aucun pour ce magasin → rien, plutôt que celui du
+ *     voisin ;
+ *   · en « tous magasins » : le prix commun, et s'ils divergent le plus élevé
+ *     assorti d'un signal. Une cellule ne peut afficher qu'un nombre, mais
+ *     taire l'écart ferait passer le prix d'un magasin pour celui des deux.
+ */
+function prixVenteAffiche(row: ProductRow, activeMagasin: string): { valeur: number | null; divergent: boolean; detail: string | null } {
+    const entrees = Object.entries(row.prixVenteByStore ?? {});
+
+    // Aucun prix ventilé : reste le PV de la fiche article, s'il existe.
+    if (entrees.length === 0) return { valeur: row.prixVente ?? null, divergent: false, detail: null };
+
+    // Comparaison au centime : deux flottants issus du même prix peuvent différer
+    // dans les décimales lointaines sans que le prix affiché change.
+    const distincts = new Set(entrees.map(([, pv]) => Math.round(pv * 100)));
+
+    if (activeMagasin !== "TOTAL") {
+        const pv = row.prixVenteByStore?.[activeMagasin];
+        if (pv != null) return { valeur: pv, divergent: false, detail: null };
+        if (distincts.size === 1) {
+            return { valeur: entrees[0][1], divergent: false, detail: "prix unique, non ventilé par magasin" };
+        }
+        return { valeur: null, divergent: false, detail: null };
+    }
+
+    const detail = entrees.length > 1
+        ? entrees
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([site, pv]) => `${SITE_LABELS[site]?.nom ?? site} : ${fmtEuro2(pv)}`)
+            .join(" · ")
+        : null;
+
+    return {
+        valeur: Math.max(...entrees.map(([, pv]) => pv)),
+        divergent: distincts.size > 1,
+        detail,
+    };
 }
 
 // =========================================================================
@@ -178,15 +253,62 @@ interface VirtualRowProps {
     row: Row<ProductRow>;
     rowHeight: number;
     isSelected: boolean;
-    columnVisibility: Record<string, boolean>;
+    /** Identifiants des colonnes visibles, concaténés — cf. le corps du composant. */
+    columnsKey: string;
     columnSizing: Record<string, number>;
 }
 
-const GridRow = React.memo(({ virtualRow, row, rowHeight, isSelected, columnVisibility, columnSizing }: VirtualRowProps) => {
+/**
+ * Colonnes figées à gauche : celles qui disent QUELLE ligne on lit.
+ *
+ * Sans elles, dès qu'on défile vers les totaux ou les mois, la Désignation
+ * sort de l'écran et plus rien n'identifie la ligne — sur 2600 px de tableau
+ * pour ~1150 px visibles, c'est la moitié du temps.
+ *
+ * `libelle1` a été rapprochée de `codein` dans l'ordre des colonnes : le
+ * figeage exige des colonnes contiguës depuis la gauche, et geler en plus
+ * Référence et GTIN aurait immobilisé 636 px au lieu de 406.
+ */
+const COLONNES_FIGEES = new Set(["select", "codein", "libelle1"]);
+
+/**
+ * Décalage `left` de chaque colonne figée, par cumul des largeurs.
+ *
+ * On s'arrête à la première colonne non figée : une colonne figée qui ne
+ * toucherait pas le bord flotterait au milieu du tableau. Si l'utilisateur
+ * masque « Code interne », le calcul se réajuste tout seul.
+ */
+function decalagesFiges(colonnes: { id: string; taille: number }[]): Map<string, number> {
+    const out = new Map<string, number>();
+    let cumul = 0;
+    for (const c of colonnes) {
+        if (!COLONNES_FIGEES.has(c.id)) break;
+        out.set(c.id, cumul);
+        cumul += c.taille;
+    }
+    return out;
+}
+
+const GridRow = React.memo(({ virtualRow, row, rowHeight, isSelected, columnsKey, columnSizing }: VirtualRowProps) => {
     // Uniquement la ligne concernée écoute son propre changement pour l'effet visuel
     const effectiveGamme = useGridStore((s) => s.draftChanges[row.original.codein] ?? row.original.codeGamme);
-    void columnVisibility; // Force re-render via React.memo when visibility changes
-    void columnSizing; // Force re-render via React.memo when resizing columns
+    // ⚠️ Ces deux props ne sont pas lues : elles n'existent que pour rompre la
+    // mémoïsation. TanStack met ses objets `Row` en cache sur la seule identité
+    // des DONNÉES ; changer le jeu de colonnes ne leur donne aucune référence
+    // neuve. Sans un signal supplémentaire, `React.memo` laisserait les lignes
+    // déjà montées peindre l'ancien jeu de cellules pendant que l'en-tête, lui,
+    // affiche le nouveau — seules les lignes fraîchement virtualisées seraient à
+    // jour, et la grille se retrouverait à deux vitesses.
+    //
+    // La signature couvre TOUT changement de colonnes (case décochée dans le menu
+    // « Colonnes », bloc mensuel replié) là où l'ancien objet `columnVisibility`
+    // ne voyait que le menu.
+    void columnsKey;
+    void columnSizing; // idem, pour le redimensionnement des colonnes
+
+    const cellules = row.getVisibleCells();
+    const figes = decalagesFiges(cellules.map((c) => ({ id: c.column.id, taille: c.column.getSize() })));
+    const dernierFige = [...figes.keys()].at(-1);
 
     return (
         <tr
@@ -205,15 +327,25 @@ const GridRow = React.memo(({ virtualRow, row, rowHeight, isSelected, columnVisi
             }}
         >
             {row.getVisibleCells().map((cell: Cell<ProductRow, unknown>) => {
+                const gauche = figes.get(cell.column.id);
+                const estFige = gauche !== undefined;
+                const derniereFigee = estFige && cell.column.id === dernierFige;
                 const isFlexible = cell.column.id === "libelle1" || cell.column.id === "libelle3";
-                const isCenter = cell.column.id === "totalQuantite" || cell.column.id === "totalCa" || cell.column.id === "totalMarge" || cell.column.id.startsWith("month_") || cell.column.id === "gammeInitial" || QLIK_NETWORK_COLUMN_IDS.has(cell.column.id) || cell.column.id === "gamme";
+                const isCenter = cell.column.id === "totalQuantite" || cell.column.id === "totalCa" || cell.column.id === "totalMarge" || cell.column.id.startsWith("month_") || cell.column.id === "gammeInitial" || QLIK_NETWORK_COLUMN_IDS.has(cell.column.id) || cell.column.id === "prixVente" || cell.column.id === "gamme";
                 const size = cell.column.getSize();
                 return (
                     <td
                         key={cell.id}
                         className={cn(
-                            "px-2 overflow-hidden flex items-center transition-colors group-hover/row:bg-white/5",
-                            isSelected && "bg-transparent"
+                            "px-2 overflow-hidden flex items-center transition-colors",
+                            // Une cellule figée doit être OPAQUE : le reste de la ligne
+                            // glisse dessous. Le survol passe donc par une teinte pleine,
+                            // pas par le voile `bg-white/5` des cellules ordinaires.
+                            estFige
+                                ? (isSelected
+                                    ? "bg-[var(--accent-bg)]"
+                                    : "bg-[var(--bg-surface)] group-hover/row:bg-[var(--bg-elevated)]")
+                                : cn("group-hover/row:bg-white/5", isSelected && "bg-transparent"),
                         )}
                         style={{
                             width: isFlexible ? "100%" : size,
@@ -221,7 +353,16 @@ const GridRow = React.memo(({ virtualRow, row, rowHeight, isSelected, columnVisi
                             minWidth: size,
                             maxWidth: isFlexible ? "none" : size,
                             height: `${rowHeight}px`,
-                            justifyContent: isCenter ? "center" : "flex-start"
+                            justifyContent: isCenter ? "center" : "flex-start",
+                            ...(estFige ? {
+                                position: "sticky" as const,
+                                left: gauche,
+                                // Au-dessus des cellules voisines, sous l'en-tête (z-10).
+                                zIndex: 2,
+                                // Trait de séparation : sans lui, rien ne dit où finit la
+                                // zone figée et où commence ce qui défile.
+                                borderRight: derniereFigee ? "1px solid var(--border-strong)" : undefined,
+                            } : {}),
                         }}
                     >
                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -245,36 +386,6 @@ interface CellDetailData {
     receptions: number | null;
 }
 
-/**
- * Tuile de statistique : intitulé en phrase, valeur en chiffres proportionnels.
- *
- * Pas de `tabular-nums` ici : à grande taille, des chiffres de largeur égale font
- * paraître un nombre court anormalement lâche. Les chiffres tabulaires sont
- * réservés aux colonnes qui s'alignent verticalement (tableau, axes).
- */
-function TuileStat({ label, valeur, indice, couleur, icone: Icone }: {
-    label: string;
-    valeur: string;
-    indice?: string;
-    couleur?: string;
-    icone?: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
-}) {
-    return (
-        <div className="rounded-xl px-3 py-2.5 flex-1 min-w-[140px]" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}>
-            <div className="text-[10px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>
-                {label}
-            </div>
-            <div className="flex items-center gap-1.5 mt-0.5">
-                {Icone && <Icone className="w-4 h-4 shrink-0" style={{ color: couleur ?? "var(--text-primary)" }} />}
-                <span className="text-[20px] font-bold leading-tight" style={{ color: couleur ?? "var(--text-primary)" }}>
-                    {valeur}
-                </span>
-            </div>
-            {indice && <div className="text-[10px] mt-0.5" style={{ color: "var(--text-muted)" }}>{indice}</div>}
-        </div>
-    );
-}
-
 /**
  * Carte « tendance réseau » : le verdict en tuiles, puis les trois séries
  * mensuelles en petits multiples.
@@ -300,12 +411,12 @@ function NetworkMonthlyModal({ row, onClose }: { row: ProductRow; onClose: () =>
             : "—";
 
     return (
-        <DialogContent className="max-w-xl" style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }} onInteractOutside={onClose}>
+        <DialogContent className="max-w-2xl" style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }} onInteractOutside={onClose}>
             <DialogHeader>
-                <DialogTitle className="text-base leading-snug pr-6" style={{ color: "var(--text-primary)" }}>
+                <DialogTitle className="text-lg leading-snug pr-6" style={{ color: "var(--text-primary)" }}>
                     {row.libelle1}
                 </DialogTitle>
-                <p className="text-[12px] mt-0.5" style={{ color: "var(--text-muted)" }}>
+                <p className="text-[13px] mt-1" style={{ color: "var(--text-muted)" }}>
                     Réseau · 12 mois glissants, mois en cours exclu
                 </p>
             </DialogHeader>
@@ -396,26 +507,93 @@ function CellDetailModal({ d, activeMagasin, onClose }: { d: CellDetailData; act
                     <span className="text-[10px] font-semibold uppercase tracking-wide text-center" style={{ color: "var(--text-muted)" }}>Stock fin mois</span>
                 </div>
             </div>
+
+            {/*
+              * En « tous magasins », les trois tuiles ci-dessus sont des cumuls.
+              * Le détail par magasin est justement ce qu'on vient vérifier ici :
+              * savoir que le stock est de 40 ne dit pas s'il est réparti ou
+              * entièrement sur un seul site.
+              */}
+            {activeMagasin === "TOTAL" && <VentilationParMagasin d={d} />}
         </DialogContent>
     );
 }
 
+/** Détail ventes / entrées / stock du mois, magasin par magasin. */
+function VentilationParMagasin({ d }: { d: CellDetailData }) {
+    const sites = [...new Set([
+        ...Object.keys(d.row.sales12mByStore ?? {}),
+        ...Object.keys(d.row.stock12mByStore ?? {}),
+    ])].sort();
+
+    if (sites.length === 0) return null;
+
+    return (
+        <div className="mt-3 rounded-xl overflow-hidden" style={{ border: "1px solid var(--border)" }}>
+            <table className="w-full text-[11px]">
+                <thead>
+                    <tr style={{ background: "var(--bg-elevated)" }}>
+                        <th className="text-left px-2.5 py-1.5 font-semibold" style={{ color: "var(--text-secondary)" }}>Magasin</th>
+                        <th className="text-right px-2.5 py-1.5 font-semibold" style={{ color: "var(--text-secondary)" }}>Ventes</th>
+                        <th className="text-right px-2.5 py-1.5 font-semibold" style={{ color: "var(--text-secondary)" }}>Entrées</th>
+                        <th className="text-right px-2.5 py-1.5 font-semibold" style={{ color: "var(--text-secondary)" }}>Stock</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {sites.map((site) => {
+                        const ventes = d.row.sales12mByStore?.[site]?.[d.monthKey] ?? 0;
+                        const entrees = d.row.receptions12mByStore?.[site]?.[d.monthKey] ?? 0;
+                        const stock = d.row.stock12mByStore?.[site]?.[d.monthKey] ?? 0;
+                        return (
+                            <tr key={site} style={{ borderTop: "1px solid var(--border)" }}>
+                                <td className="px-2.5 py-1.5" style={{ color: "var(--text-primary)" }}>
+                                    {SITE_LABELS[site]?.nom ?? site}
+                                </td>
+                                <td className="px-2.5 py-1.5 text-right tabular-nums" style={{ color: "var(--text-secondary)" }}>
+                                    {Math.round(ventes).toLocaleString("fr-FR")}
+                                </td>
+                                <td className="px-2.5 py-1.5 text-right tabular-nums" style={{ color: entrees > 0 ? "rgb(16,185,129)" : "var(--text-muted)" }}>
+                                    {entrees > 0 ? `+${Math.round(entrees).toLocaleString("fr-FR")}` : "—"}
+                                </td>
+                                <td className="px-2.5 py-1.5 text-right tabular-nums font-semibold" style={{ color: "var(--text-primary)" }}>
+                                    {Math.round(stock).toLocaleString("fr-FR")}
+                                </td>
+                            </tr>
+                        );
+                    })}
+                </tbody>
+            </table>
+        </div>
+    );
+}
+
 // =========================================================================
 
-export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
+export function HeatmapGrid({ onSelectionChange, isAdmin, nomFournisseur }: HeatmapGridProps) {
     // L'abonnement doit être minimal ici ! PAS de draftChanges ni de setDraftGamme.
     const rows = useGridStore((s) => s.rows);
     const filters = useGridStore((s) => s.filters);
     const displayDensity = useGridStore((s) => s.displayDensity);
     const draftChanges = useGridStore((s) => s.filters.codeGamme ? s.draftChanges : EMPTY_DRAFT_CHANGES);
     const activeMagasin = useGridStore((s) => s.activeMagasin);
+    const showMonthlySales = useGridStore((s) => s.showMonthlySales);
+    const setShowMonthlySales = useGridStore((s) => s.setShowMonthlySales);
+    const showPrices = useGridStore((s) => s.showPrices);
+    const setShowPrices = useGridStore((s) => s.setShowPrices);
 
     // Filtre client-side par code3 (famille) et codeGamme
     const filteredData = useMemo(() => {
         const { code3, codeGamme } = filters;
-        if (!code3 && !codeGamme) return rows;
+        // Garde : un état persisté d'une version antérieure peut encore contenir
+        // une chaîne. La migration du store le corrige, mais un `new Set("320211")`
+        // produirait un ensemble de caractères et viderait la Grille sans rien dire.
+        const codes = Array.isArray(code3) ? code3 : typeof code3 === "string" ? [code3] : null;
+        if (!codes && !codeGamme) return rows;
+        // Set plutôt que includes() : la liste peut compter des dizaines de
+        // nomenclatures, et le filtre est réévalué pour chaque ligne.
+        const nomenclatures = codes ? new Set(codes) : null;
         return rows.filter(r => {
-            if (code3 && r.code3 !== code3) return false;
+            if (nomenclatures && !nomenclatures.has(r.code3)) return false;
             if (codeGamme) {
                 const g = draftChanges[r.codein] ?? r.codeGamme ?? "";
                 const norm = g.trim() === "" ? "Aucune" : g;
@@ -437,10 +615,17 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
     // État pour le détail d'une cellule mensuelle (modal)
     const [cellDetail, setCellDetail] = useState<CellDetailData | null>(null);
     const [networkModal, setNetworkModal] = useState<ProductRow | null>(null);
+    // Détail 12 mois du produit, ouvert depuis la case de total
+    const [monthlyModal, setMonthlyModal] = useState<ProductRow | null>(null);
+    // Trous d'assortiment : ce qu'un magasin ne travaille pas, en haut du classement affiché
+    const [gapsOpen, setGapsOpen] = useState(false);
     const tableContainerRef = useRef<HTMLDivElement>(null);
 
-    // Calculer les mois dynamiquement pour éviter le mismatch entre serveur et client
-    const MONTHS_12 = useMemo(() => getLast12Months(), []);
+    // Les 12 mois viennent des données, pas de l'horloge du navigateur : les
+    // totaux sont figés sur la fenêtre du serveur, les colonnes doivent l'être
+    // aussi, sinon un mois manque aux cases mais pas au total (cf. months.ts).
+    // Le calcul local ne sert que tant qu'aucune ligne n'est chargée.
+    const MONTHS_12 = useMemo(() => getMonthsFromRows(rows) ?? getLast12Months(), [rows]);
 
     useEffect(() => {
         setIsMounted(true);
@@ -520,32 +705,6 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
                 />
             ),
         },
-        {
-            accessorKey: "reference",
-            header: "Référence",
-            size: 110,
-            cell: ({ getValue }) => (
-                <CopiableCell
-                    value={getValue<string>()}
-                    titre="Copier la référence"
-                    className="text-[12px] font-mono opacity-80 group-hover:opacity-100"
-                    style={{ color: "var(--text-secondary)" }}
-                />
-            ),
-        },
-        {
-            accessorKey: "gtin",
-            header: "EAN / GTIN",
-            size: 120,
-            cell: ({ getValue }) => (
-                <CopiableCell
-                    value={getValue<string>()}
-                    titre="Copier l'EAN / GTIN"
-                    className="text-[12px] font-mono tracking-tight opacity-70 group-hover:opacity-100"
-                    style={{ color: "var(--text-secondary)" }}
-                />
-            ),
-        },
         {
             accessorKey: "libelle1",
             header: "Désignation",
@@ -597,6 +756,32 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
                 );
             },
         },
+        {
+            accessorKey: "reference",
+            header: "Référence",
+            size: 110,
+            cell: ({ getValue }) => (
+                <CopiableCell
+                    value={getValue<string>()}
+                    titre="Copier la référence"
+                    className="text-[12px] font-mono opacity-80 group-hover:opacity-100"
+                    style={{ color: "var(--text-secondary)" }}
+                />
+            ),
+        },
+        {
+            accessorKey: "gtin",
+            header: "EAN / GTIN",
+            size: 120,
+            cell: ({ getValue }) => (
+                <CopiableCell
+                    value={getValue<string>()}
+                    titre="Copier l'EAN / GTIN"
+                    className="text-[12px] font-mono tracking-tight opacity-70 group-hover:opacity-100"
+                    style={{ color: "var(--text-secondary)" }}
+                />
+            ),
+        },
         {
             accessorKey: "libelle3",
             header: "Famille",
@@ -614,7 +799,8 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
         },
         {
             id: "caReseau",
-            accessorFn: (row) => getQlikNetworkSortValue(row.caReseau, "caReseau", sorting),
+            accessorFn: (row) => valeurTriable(row.caReseau),
+            sortUndefined: "last" as const,
             header: () => <div className="text-center w-full">CA<br/><span className="text-[9px] opacity-60">Réseau</span></div>,
             size: 90,
             cell: ({ row }) => {
@@ -628,7 +814,8 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
         },
         {
             id: "qteReseau",
-            accessorFn: (row) => getQlikNetworkSortValue(row.qteReseau, "qteReseau", sorting),
+            accessorFn: (row) => valeurTriable(row.qteReseau),
+            sortUndefined: "last" as const,
             header: () => <div className="text-center w-full">Qté<br/><span className="text-[9px] opacity-60">Réseau</span></div>,
             size: 80,
             cell: ({ row }) => {
@@ -642,7 +829,8 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
         },
         {
             id: "nbMagasinsReseau",
-            accessorFn: (row) => getQlikNetworkSortValue(row.nbMagasinsReseau, "nbMagasinsReseau", sorting),
+            accessorFn: (row) => valeurTriable(row.nbMagasinsReseau),
+            sortUndefined: "last" as const,
             header: () => <div className="text-center w-full">Magasins<br/><span className="text-[9px] opacity-60">/ 270</span></div>,
             size: 80,
             cell: ({ row }) => {
@@ -683,9 +871,65 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
                 );
             },
         },
+        // Bloc « prix », repliable : le prix réellement pratiqué par le réseau, et
+        // celui du catalogue. Deux origines différentes, donc deux colonnes — les
+        // rapprocher d'un seul écart chiffré supposerait une même assiette (HT/TTC,
+        // remises), ce que les deux sources ne garantissent pas.
+        ...(showPrices ? [
+            {
+                id: "prixMoyenReseau",
+                // Même définition que la fiche produit : CA réseau ÷ quantité vendue.
+                accessorFn: (row: ProductRow) => valeurTriable(prixMoyenReseau(row)),
+                sortUndefined: "last" as const,
+                // Sous-titre tenu court : les en-têtes ne rognent pas leur texte et
+                // un libellé trop long chevauche la colonne voisine. Le détail
+                // (« CA réseau ÷ quantité ») est dans l'infobulle des cellules.
+                header: () => <div className="text-center w-full">PV moyen<br/><span className="text-[9px] opacity-60">Réseau</span></div>,
+                size: 88,
+                cell: ({ row }: { row: { original: ProductRow } }) => {
+                    const val = prixMoyenReseau(row.original);
+                    return (
+                        <div
+                            className="text-center tabular-nums text-[12px] font-bold"
+                            style={{ color: "var(--text-secondary)" }}
+                            title={val != null
+                                ? `Prix de vente moyen constaté sur le réseau : CA réseau ÷ quantité vendue (12 mois glissants)`
+                                : "Pas de quantité réseau sur la période : le prix moyen n'a pas de sens"}
+                        >
+                            {val != null ? fmtEuro2(val) : "-"}
+                        </div>
+                    );
+                },
+            },
+            {
+                id: "prixVente",
+                accessorFn: (row: ProductRow) => valeurTriable(prixVenteAffiche(row, activeMagasin).valeur),
+                sortUndefined: "last" as const,
+                header: () => <div className="text-center w-full">PV<br/><span className="text-[9px] opacity-60">Magasin</span></div>,
+                size: 88,
+                cell: ({ row }: { row: { original: ProductRow } }) => {
+                    const { valeur, divergent, detail } = prixVenteAffiche(row.original, activeMagasin);
+                    return (
+                        <div
+                            className="text-center tabular-nums text-[12px] font-bold flex items-center justify-center gap-0.5"
+                            style={{ color: "var(--text-primary)" }}
+                            title={valeur != null
+                                ? `Prix de vente en base (cube_pv)${detail ? ` — ${detail}` : ""}`
+                                : "Aucun prix de vente en base pour cet article"}
+                        >
+                            {valeur != null ? fmtEuro2(valeur) : "-"}
+                            {/* Prix différents d'un magasin à l'autre : le signaler, la
+                                cellule ne peut en afficher qu'un. */}
+                            {divergent && <span className="text-[10px] font-black" style={{ color: "var(--accent-warning)" }}>≠</span>}
+                        </div>
+                    );
+                },
+            },
+        ] : []),
         {
             id: "caParMagasinReseau",
-            accessorFn: (row) => getQlikNetworkSortValue(row.caParMagasinReseau, "caParMagasinReseau", sorting),
+            accessorFn: (row) => valeurTriable(row.caParMagasinReseau),
+            sortUndefined: "last" as const,
             header: () => <div className="text-center w-full">CA / Mag<br/><span className="text-[9px] opacity-60">Réseau</span></div>,
             size: 85,
             cell: ({ row }) => {
@@ -699,7 +943,8 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
         },
         {
             id: "margePctReseau",
-            accessorFn: (row) => getQlikNetworkSortValue(row.margePctReseau, "margePctReseau", sorting),
+            accessorFn: (row) => valeurTriable(row.margePctReseau),
+            sortUndefined: "last" as const,
             header: () => <div className="text-center w-full">Marge %<br/><span className="text-[9px] opacity-60">Réseau</span></div>,
             size: 75,
             cell: ({ row }) => {
@@ -714,7 +959,11 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
                 );
             },
         },
-        ...MONTHS_12.map((monthKey) => ({
+        // Bloc mensuel repliable : les colonnes sont retirées du modèle, pas
+        // seulement cachées — inutile de faire calculer douze cellules par ligne
+        // à TanStack pour ne rien peindre. Le détail reste accessible d'un clic
+        // sur la case de total.
+        ...(showMonthlySales ? MONTHS_12.map((monthKey) => ({
             id: `month_${monthKey}`,
             header: () => <div className="text-center w-full">{formatMonthLabel(monthKey)}</div>,
             size: 68,
@@ -741,7 +990,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
                     />
                 );
             },
-        })),
+        })) : []),
         {
             id: "totalQuantite",
             accessorFn: (row: ProductRow) => activeMagasin === "TOTAL" ? row.totalQuantite : (row.quantiteByStore?.[activeMagasin] ?? 0),
@@ -751,14 +1000,25 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
                 const qty = activeMagasin === "TOTAL"
                     ? row.original.totalQuantite
                     : (row.original.quantiteByStore?.[activeMagasin] ?? 0);
+                // Cliquable → détail 12 mois : ventes, entrées en stock, stock par
+                // magasin. `stopPropagation` sinon le clic sélectionne la ligne.
                 return (
-                    <div className="mx-auto w-[60px] text-center px-1 tabular-nums text-sm font-black py-1.5 rounded-md border" style={{
-                        background: "var(--bg-elevated)",
-                        color: "var(--text-primary)",
-                        borderColor: "var(--border-strong)"
-                    }}>
+                    <button
+                        type="button"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setMonthlyModal(row.original);
+                        }}
+                        title="Voir le détail des 12 mois : ventes mensuelles, entrées en stock et stock par magasin"
+                        className="mx-auto w-[60px] text-center px-1 tabular-nums text-sm font-black py-1.5 rounded-md border cursor-pointer transition-all hover:brightness-110 active:scale-95"
+                        style={{
+                            background: "var(--bg-elevated)",
+                            color: "var(--text-primary)",
+                            borderColor: "var(--border-strong)"
+                        }}
+                    >
                         {Math.round(qty).toLocaleString("fr-FR")}
-                    </div>
+                    </button>
                 );
             },
         },
@@ -821,7 +1081,10 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
             size: 110,
             cell: ({ row }) => <GammeCell row={row.original} isAdmin={isAdmin} />,
         },
-    ], [MONTHS_12, activeMagasin, isAdmin, sorting]); // activeMagasin déclenche re-render des cellules mensuelles et totaux
+        // `sorting` ne figure plus en dépendance : plus aucun accesseur ne le lit
+        // depuis que `sortUndefined` remplace les sentinelles. Les colonnes ne se
+        // reconstruisent donc plus à chaque clic sur un en-tête.
+    ], [MONTHS_12, activeMagasin, isAdmin, showMonthlySales, showPrices]); // activeMagasin déclenche re-render des cellules mensuelles et totaux
 
     const table = useReactTable({
         data: filteredData,
@@ -856,7 +1119,35 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
     });
 
     const visibleColumns = table.getVisibleLeafColumns();
-    const totalWidth = visibleColumns.reduce((s, c) => s + ((c.columnDef as { size?: number }).size ?? 150), 0);
+    // `getSize()` et non `columnDef.size` : le redimensionnement de colonnes est
+    // actif et persisté. En lisant la taille déclarée, la largeur plancher de la
+    // table restait figée sur l'ancienne somme dès qu'on élargissait une colonne,
+    // ce qui rognait les dernières et raccourcissait la course de défilement.
+    const totalWidth = visibleColumns.reduce((s, c) => s + c.getSize(), 0);
+    // Signature du jeu de colonnes affiché : elle sert de signal de re-rendu aux
+    // lignes virtuelles (cf. `GridRow`). Calculée une fois par rendu de grille,
+    // pas une fois par ligne.
+    const columnsKey = visibleColumns.map((c) => c.id).join("|");
+    /** Blocs de colonnes affichés — badge du menu « Vues ». */
+    const nbVues = (showMonthlySales ? 1 : 0) + (showPrices ? 1 : 0);
+
+    /**
+     * Le haut du classement TEL QU'IL EST AFFICHÉ, pour les trous d'assortiment.
+     *
+     * Les lignes viennent du modèle trié et filtré de TanStack : le tri en cours
+     * — CA, quantité, marge, peu importe — fixe l'ordre, et la valeur qui a servi
+     * à classer est relue par `getValue` sur la colonne triée. Tronqué à la
+     * profondeur maximale offerte : au-delà, on copierait 130 000 lignes pour en
+     * regarder 500. Calculé seulement quand la fenêtre est ouverte.
+     */
+    const classementAffiche: LigneClassee[] = useMemo(() => {
+        if (!gapsOpen) return [];
+        const critereId = sorting[0]?.id ?? null;
+        return tableRows.slice(0, PROFONDEUR_MAX).map((r) => ({
+            row: r.original,
+            valeurCritere: critereId ? r.getValue(critereId) : null,
+        }));
+    }, [gapsOpen, tableRows, sorting]);
 
     if (!isMounted) {
         return (
@@ -876,6 +1167,76 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
         <>
         <div className="h-full w-full relative">
             {portalContainer && createPortal(
+                <div className="flex items-center gap-2.5">
+                {/* Trous d'assortiment — lit le classement affiché, tri compris. */}
+                <button
+                    onClick={() => setGapsOpen(true)}
+                    disabled={tableRows.length === 0}
+                    title="Voir les produits qu'un magasin ne travaille pas — ni vente ni stock — en haut du classement affiché"
+                    className="flex items-center justify-center gap-2 px-3 py-1.5 rounded-md text-sm font-semibold border transition-all shadow-sm apple-btn-secondary disabled:opacity-50"
+                    style={{ background: "var(--action-secondary-bg)", borderColor: "var(--border-strong)", color: "var(--action-secondary-text)" }}
+                >
+                    <PackageX className="w-4 h-4" />
+                    <span className="hidden lg:inline">Non travaillés</span>
+                </button>
+                {/*
+                  * « Vues » replie des BLOCS de colonnes d'un geste, là où le menu
+                  * « Colonnes » voisin agit colonne par colonne. Douze cellules
+                  * mensuelles ou deux prix ne se masquent pas une par une.
+                  */}
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <button
+                            className="flex items-center justify-center gap-2 px-3 py-1.5 rounded-md text-sm font-semibold border transition-all shadow-sm apple-btn-secondary"
+                            style={nbVues > 0
+                                ? { background: "var(--accent-bg)", borderColor: "var(--accent-border)", color: "var(--accent)" }
+                                : { background: "var(--action-secondary-bg)", borderColor: "var(--border-strong)", color: "var(--action-secondary-text)" }}
+                            title="Afficher ou masquer les blocs de colonnes : ventes mensuelles, prix"
+                            aria-label="Afficher ou masquer les blocs de colonnes"
+                        >
+                            {nbVues > 0 ? <Eye className="w-4 h-4" /> : <EyeOff className="w-4 h-4" />}
+                            <span className="hidden lg:inline">Vues</span>
+                            <span className="text-[11px] font-bold tabular-nums opacity-70">{nbVues}/2</span>
+                        </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-[280px] z-50">
+                        <DropdownMenuLabel className="text-[11px] uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>
+                            Blocs de colonnes
+                        </DropdownMenuLabel>
+                        <DropdownMenuCheckboxItem
+                            checked={showMonthlySales}
+                            onCheckedChange={(v) => setShowMonthlySales(!!v)}
+                            onSelect={(e: Event) => e.preventDefault()}
+                            className="cursor-pointer"
+                        >
+                            <span className="flex items-center gap-2">
+                                <CalendarRange className="w-3.5 h-3.5 shrink-0" style={{ color: "var(--text-muted)" }} />
+                                <span className="flex flex-col">
+                                    <span className="text-xs font-semibold">Ventes mensuelles</span>
+                                    <span className="text-[10.5px]" style={{ color: "var(--text-muted)" }}>
+                                        12 mois · détail au clic sur le total
+                                    </span>
+                                </span>
+                            </span>
+                        </DropdownMenuCheckboxItem>
+                        <DropdownMenuCheckboxItem
+                            checked={showPrices}
+                            onCheckedChange={(v) => setShowPrices(!!v)}
+                            onSelect={(e: Event) => e.preventDefault()}
+                            className="cursor-pointer"
+                        >
+                            <span className="flex items-center gap-2">
+                                <Tag className="w-3.5 h-3.5 shrink-0" style={{ color: "var(--text-muted)" }} />
+                                <span className="flex flex-col">
+                                    <span className="text-xs font-semibold">Prix</span>
+                                    <span className="text-[10.5px]" style={{ color: "var(--text-muted)" }}>
+                                        PV moyen réseau · PV central
+                                    </span>
+                                </span>
+                            </span>
+                        </DropdownMenuCheckboxItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <button
@@ -908,13 +1269,18 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
                                 );
                             })}
                     </DropdownMenuContent>
-                </DropdownMenu>,
+                </DropdownMenu>
+                </div>,
                 portalContainer
             )}
 
             <div
                 ref={tableContainerRef}
-                className="h-full w-full overflow-auto rounded-[14px] relative"
+                // `tabIndex` : sans lui, les flèches, Origine et Fin ne défilent pas
+                // la grille. Il ne restait que Maj+molette, que personne ne devine.
+                tabIndex={0}
+                aria-label="Tableau des articles — défilement horizontal sur 12 mois"
+                className="h-full w-full overflow-auto rounded-[14px] relative grid-scroll"
                 style={{
                     background: "var(--bg-surface)",
                     border: "1px solid var(--border)",
@@ -930,21 +1296,44 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
                     }}>
                         {table.getHeaderGroups().map((headerGroup) => (
                             <tr key={headerGroup.id} className="flex w-full">
-                                {headerGroup.headers.map((header) => {
+                                {(() => {
+                                    const figesEntete = decalagesFiges(
+                                        headerGroup.headers.map((h) => ({ id: h.column.id, taille: h.getSize() })),
+                                    );
+                                    const dernierFigeEntete = [...figesEntete.keys()].at(-1);
+                                    return headerGroup.headers.map((header) => {
+                                    const gaucheEntete = figesEntete.get(header.column.id);
+                                    const enteteFigee = gaucheEntete !== undefined;
                                     const isFlexible = header.column.id === "libelle1" || header.column.id === "libelle3";
-                                    const isCenter = header.column.id === "totalQuantite" || header.column.id === "totalCa" || header.column.id === "totalMarge" || header.column.id.startsWith("month_") || header.column.id === "gammeInitial" || QLIK_NETWORK_COLUMN_IDS.has(header.column.id) || header.column.id === "gamme";
+                                    const isCenter = header.column.id === "totalQuantite" || header.column.id === "totalCa" || header.column.id === "totalMarge" || header.column.id.startsWith("month_") || header.column.id === "gammeInitial" || QLIK_NETWORK_COLUMN_IDS.has(header.column.id) || header.column.id === "prixVente" || header.column.id === "gamme";
                                     const size = header.getSize();
                                     return (
                                         <th
                                             key={header.id}
-                                            className="px-2 py-3 text-[10px] font-black uppercase tracking-[0.05em] whitespace-nowrap select-none flex items-center transition-colors hover:bg-white/5 relative group/header"
+                                            className={cn(
+                                                "px-2 py-3 text-[10px] font-black uppercase tracking-[0.05em] whitespace-nowrap select-none flex items-center transition-colors relative group/header",
+                                                !enteteFigee && "hover:bg-white/5",
+                                            )}
                                             style={{
                                                 width: isFlexible ? "100%" : size,
                                                 flex: isFlexible ? `1 1 ${size}px` : `0 0 ${size}px`,
                                                 minWidth: size,
                                                 maxWidth: isFlexible ? "none" : size,
                                                 color: "var(--text-muted)",
-                                                justifyContent: isCenter ? "center" : "flex-start"
+                                                justifyContent: isCenter ? "center" : "flex-start",
+                                                ...(enteteFigee ? {
+                                                    position: "sticky" as const,
+                                                    left: gaucheEntete,
+                                                    zIndex: 2,
+                                                    // Le fond du <thead> est un dégradé translucide : sans
+                                                    // fond propre, les autres intitulés défileraient à
+                                                    // travers l'en-tête figé. On reprend le même dégradé
+                                                    // pour que la bande reste d'un seul tenant.
+                                                    background: "linear-gradient(to bottom, var(--bg-elevated), var(--bg-surface))",
+                                                    borderRight: header.column.id === dernierFigeEntete
+                                                        ? "1px solid var(--border-strong)"
+                                                        : undefined,
+                                                } : {}),
                                             }}
                                             onClick={header.column.getToggleSortingHandler()}
                                         >
@@ -970,11 +1359,22 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
                                             )}
                                         </th>
                                     );
-                                })}
+                                });
+                                })()}
                             </tr>
                         ))}
                     </thead>
-                    <tbody key={displayDensity} style={{ height: rowVirtualizer.getTotalSize(), position: "relative", display: "block" }}>
+                    {/*
+                      * La clé porte AUSSI la signature des colonnes : changer de jeu de
+                      * colonnes remonte le corps du tableau au lieu de compter sur la
+                      * comparaison de props de `React.memo`. Une ligne mémoïsée qui rate
+                      * le signal continue de peindre l'ancien jeu de cellules, et la
+                      * grille se retrouve à deux vitesses — en-tête à jour, corps en
+                      * retard. Un remontage ne coûte que les ~30 lignes virtualisées, et
+                      * le redimensionnement (continu) ne le déclenche pas : les
+                      * identifiants de colonnes ne changent pas.
+                      */}
+                    <tbody key={`${displayDensity}|${columnsKey}`} style={{ height: rowVirtualizer.getTotalSize(), position: "relative", display: "block" }}>
                         {rowVirtualizer.getVirtualItems().map((virtualRow) => {
                             const row = tableRows[virtualRow.index];
                             const isSelected = row.getIsSelected();
@@ -986,7 +1386,7 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
                                         row={row}
                                         rowHeight={rowHeight}
                                         isSelected={isSelected}
-                                        columnVisibility={columnVisibility}
+                                        columnsKey={columnsKey}
                                         columnSizing={columnSizing}
                                     />
                                 </div>
@@ -1004,6 +1404,30 @@ export function HeatmapGrid({ onSelectionChange, isAdmin }: HeatmapGridProps) {
         <Dialog open={networkModal !== null} onOpenChange={(open) => { if (!open) setNetworkModal(null); }}>
             {networkModal !== null && <NetworkMonthlyModal row={networkModal} onClose={() => setNetworkModal(null)} />}
         </Dialog>
+        {/* Trous d'assortiment sur le haut du classement affiché */}
+        <Dialog open={gapsOpen} onOpenChange={setGapsOpen}>
+            {gapsOpen && (
+                <AssortmentGapsModal
+                    classement={classementAffiche}
+                    critereId={sorting[0]?.id ?? null}
+                    mois={MONTHS_12}
+                    magasinInitial={activeMagasin}
+                    nomFournisseur={nomFournisseur}
+                    onClose={() => setGapsOpen(false)}
+                />
+            )}
+        </Dialog>
+        {/* Modal détail 12 mois (ventes / entrées / stock par magasin) */}
+        <Dialog open={monthlyModal !== null} onOpenChange={(open) => { if (!open) setMonthlyModal(null); }}>
+            {monthlyModal !== null && (
+                <ProductMonthlyModal
+                    row={monthlyModal}
+                    mois={MONTHS_12}
+                    activeMagasin={activeMagasin}
+                    onClose={() => setMonthlyModal(null)}
+                />
+            )}
+        </Dialog>
         </>
     );
 }

src/features/grid/components/network-charts.tsx

@@ -135,7 +135,9 @@ export function NetworkLineChart({
     }
 
     const W = 520;
-    const padL = 16, padR = 16, axeH = 18, enteteH = 15, ecart = 12;
+    // Bandeau et axe dimensionnés pour la typographie ci-dessous : agrandir les
+    // polices sans élargir ces bandes ferait chevaucher titres et courbes.
+    const padL = 16, padR = 16, axeH = 24, enteteH = 21, ecart = 14;
     const plotW = W - padL - padR;
     const H = facettes.reduce((t, f) => t + enteteH + f.hauteur + ecart, 0) - ecart + axeH;
 
@@ -170,7 +172,7 @@ export function NetworkLineChart({
                             key={v}
                             type="button"
                             onClick={() => setVue(v)}
-                            className="px-2.5 py-0.5 text-[10px] font-semibold rounded-md transition-colors capitalize"
+                            className="px-3 py-1 text-[12px] font-semibold rounded-md transition-colors capitalize"
                             style={vue === v
                                 ? { background: "var(--bg-surface)", color: "var(--text-primary)" }
                                 : { color: "var(--text-muted)" }}
@@ -204,11 +206,11 @@ export function NetworkLineChart({
                     return (
                         <g key={f.titre}>
                             {/* Bandeau de facette : repère coloré + titre + maximum, en encre neutre */}
-                            <rect x={padL} y={f.hautEntete + 3} width={12} height={3} rx={1.5} fill={f.couleur} />
-                            <text x={padL + 18} y={f.hautEntete + 7} fontSize={9.5} fontWeight={600} fill="var(--text-secondary)" dominantBaseline="middle">
+                            <rect x={padL} y={f.hautEntete + 6} width={14} height={4} rx={2} fill={f.couleur} />
+                            <text x={padL + 20} y={f.hautEntete + 9} fontSize={13} fontWeight={700} fill="var(--text-secondary)" dominantBaseline="middle">
                                 {f.titre}
                             </text>
-                            <text x={padL + plotW} y={f.hautEntete + 7} textAnchor="end" fontSize={9} fill="var(--text-muted)" dominantBaseline="middle">
+                            <text x={padL + plotW} y={f.hautEntete + 9} textAnchor="end" fontSize={11.5} fill="var(--text-muted)" dominantBaseline="middle">
                                 max {fmt(f.max, f.decimales ?? 0)}{f.unite ?? ""}
                             </text>
 
@@ -242,14 +244,14 @@ export function NetworkLineChart({
                                 // bandeau de la facette (constaté au rendu : « 58 » par-dessus
                                 // « Qté / magasin »). Dans ce cas elle bascule SOUS le point.
                                 const yPoint = f.y(f.valeurs[i]);
-                                const dessus = yPoint - 8 >= f.haut + 8;
+                                const dessus = yPoint - 11 >= f.haut + 8;
                                 return (
                                     <text
                                         key={`lab-${f.titre}-${i}`}
                                         x={x(i)}
-                                        y={dessus ? yPoint - 8 : yPoint + 13}
+                                        y={dessus ? yPoint - 10 : yPoint + 16}
                                         textAnchor={ancrage(i)}
-                                        fontSize={9}
+                                        fontSize={12.5}
                                         fontWeight={700}
                                         fill="var(--text-primary)"
                                     >
@@ -283,9 +285,9 @@ export function NetworkLineChart({
                     <text
                         key={`mois-${lab}`}
                         x={x(i)}
-                        y={H - 5}
+                        y={H - 7}
                         textAnchor={ancrage(i)}
-                        fontSize={8.5}
+                        fontSize={11}
                         fill={survol === i ? "var(--text-primary)" : "var(--text-muted)"}
                         fontWeight={survol === i ? 700 : 400}
                     >
@@ -300,8 +302,8 @@ export function NetworkLineChart({
                     plus jamais. `pointerEvents=none` laisse passer le survol vers les
                     cibles en dessous. */}
                 {survol != null && (() => {
-                    const largeur = 158;
-                    const hauteur = 16 + disposees.length * 13 + 8;
+                    const largeur = 196;
+                    const hauteur = 22 + disposees.length * 17 + 8;
                     // La bulle bascule à gauche du réticule quand elle déborderait à droite.
                     const gauche = x(survol) + 10 + largeur > W - 4;
                     const bx = gauche ? x(survol) - 10 - largeur : x(survol) + 10;
@@ -311,18 +313,18 @@ export function NetworkLineChart({
                                 x={bx} y={4} width={largeur} height={hauteur} rx={8}
                                 fill="var(--bg-elevated)" stroke="var(--border)" strokeWidth={1}
                             />
-                            <text x={bx + 9} y={17} fontSize={9.5} fontWeight={700} fill="var(--text-primary)">
+                            <text x={bx + 11} y={21} fontSize={12.5} fontWeight={700} fill="var(--text-primary)">
                                 {fmtMonthShort(labels[survol])}
                             </text>
                             {disposees.map((f, k) => (
                                 <g key={`bulle-${f.titre}`}>
-                                    <rect x={bx + 9} y={26 + k * 13} width={8} height={3} rx={1.5} fill={f.couleur} />
-                                    <text x={bx + 22} y={30 + k * 13} fontSize={9} fill="var(--text-secondary)">
+                                    <rect x={bx + 11} y={33 + k * 17} width={10} height={4} rx={2} fill={f.couleur} />
+                                    <text x={bx + 26} y={38 + k * 17} fontSize={11.5} fill="var(--text-secondary)">
                                         {f.titre}
                                     </text>
                                     <text
-                                        x={bx + largeur - 9} y={30 + k * 13}
-                                        textAnchor="end" fontSize={9} fontWeight={700} fill="var(--text-primary)"
+                                        x={bx + largeur - 11} y={38 + k * 17}
+                                        textAnchor="end" fontSize={11.5} fontWeight={700} fill="var(--text-primary)"
                                     >
                                         {fmt(f.valeurs[survol], f.decimales ?? 0)}
                                     </text>
@@ -353,7 +355,7 @@ export function NetworkLineChart({
                 du graphique et défile à l'intérieur : la carte garde sa taille, et
                 aucune valeur n'est réservée au survol. */
             <div style={{ height: H }} className="overflow-y-auto overflow-x-auto">
-                <table className="w-full text-[11px] tabular-nums" style={{ borderCollapse: "collapse" }}>
+                <table className="w-full text-[13px] tabular-nums" style={{ borderCollapse: "collapse" }}>
                     <thead className="sticky top-0" style={{ background: "var(--bg-surface)" }}>
                         <tr style={{ color: "var(--text-muted)" }}>
                             <th className="text-left font-medium py-1 pr-2">Mois</th>
@@ -408,7 +410,7 @@ export function DualLineChart({
         <div className="w-full overflow-x-auto">
             <div className="flex items-center gap-4 mb-1">
                 {series.map((s) => (
-                    <span key={s.name} className="flex items-center gap-1.5 text-[11px]" style={{ color: "var(--text-secondary)" }}>
+                    <span key={s.name} className="flex items-center gap-1.5 text-[12px]" style={{ color: "var(--text-secondary)" }}>
                         <span className="inline-block w-3 h-[3px] rounded-full" style={{ background: s.color }} />
                         {s.name}
                     </span>

src/features/grid/components/nomenclature-filter.tsx

@@ -2,7 +2,13 @@
 
 import * as React from "react";
 import { cn } from "@/lib/utils";
-import { ChevronDown, Filter } from "lucide-react";
+import { ChevronDown, Filter, Search, X } from "lucide-react";
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { useGridStore } from "@/features/grid/store/use-grid-store";
 
 interface NomenclatureFilterProps {
@@ -10,33 +16,143 @@ interface NomenclatureFilterProps {
     className?: string;
 }
 
+/**
+ * Filtre multi-nomenclatures de la Grille.
+ *
+ * Une liste déroulante à cases plutôt qu'un `<select>` simple : on veut pouvoir
+ * en retenir plusieurs, et surtout partir de « tout » pour retirer les postes
+ * dont on ne veut pas — ce qui est la manière naturelle de travailler quand un
+ * fournisseur en compte des dizaines.
+ *
+ * Convention : `null` = aucun filtre (tout s'affiche), `[]` = rien de coché
+ * (aucune ligne). Les distinguer évite la valeur sentinelle qu'imposerait un
+ * simple tableau, et rend « Tout décocher » possible sans ambiguïté.
+ */
 export function NomenclatureFilter({ options, className }: NomenclatureFilterProps) {
-    const code3 = useGridStore((s) => s.filters.code3);
-    const setFilter = useGridStore((s) => s.setFilter);
+    const selection = useGridStore((s) => s.filters.code3);
+    const setCode3Filter = useGridStore((s) => s.setCode3Filter);
+    const [recherche, setRecherche] = React.useState("");
+
+    /** `null` = tout retenu : les cases sont alors toutes cochées. */
+    const tout = selection === null;
+    const selectionnes = React.useMemo(() => new Set(selection ?? []), [selection]);
+
+    const visibles = React.useMemo(() => {
+        const q = recherche.trim().toLowerCase();
+        if (!q) return options;
+        return options.filter((o) => `${o.code} ${o.label}`.toLowerCase().includes(q));
+    }, [options, recherche]);
+
+    const basculer = (code: string, coche: boolean) => {
+        // Décocher depuis l'état « tout » doit retirer ce seul poste : on matérialise
+        // donc la liste complète, sans quoi le premier décochage ne ferait rien.
+        const base = tout ? options.map((o) => o.code) : (selection ?? []);
+        const suivant = coche ? [...base, code] : base.filter((c) => c !== code);
+        // Tout re-cocher revient à ne plus filtrer : on repasse à `null` pour que
+        // l'état reste lisible (et l'URL propre).
+        setCode3Filter(suivant.length === options.length ? null : suivant);
+    };
+
+    const libelle = tout
+        ? "Toute la nomenclature"
+        : selectionnes.size === 0
+            ? "Aucune nomenclature"
+            : selectionnes.size === 1
+                ? (options.find((o) => o.code === selection![0])?.label ?? selection![0])
+                : `${selectionnes.size} / ${options.length} nomenclatures`;
 
     return (
-        <div className={cn("relative group", className)}>
-            <div className="absolute left-3 top-1/2 -translate-y-1/2 flex items-center gap-2 pointer-events-none">
-                <Filter className="h-3.5 w-3.5 opacity-40 group-focus-within:opacity-100 transition-opacity" style={{ color: "var(--text-primary)" }} />
-            </div>
+        <div className={cn("relative", className)}>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <button
+                        type="button"
+                        className="apple-input w-full min-w-[240px] flex items-center gap-2 text-left"
+                        style={{ fontSize: "12px", height: "36px", paddingLeft: "12px", paddingRight: "12px" }}
+                    >
+                        <Filter className="h-3.5 w-3.5 opacity-40 shrink-0" />
+                        <span className="flex-1 truncate" style={{ color: tout ? undefined : "var(--text-primary)" }}>
+                            {libelle}
+                        </span>
+                        {!tout && (
+                            <span
+                                role="button"
+                                tabIndex={0}
+                                title="Tout réafficher"
+                                onClick={(e) => { e.preventDefault(); e.stopPropagation(); setCode3Filter(null); }}
+                                onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); e.stopPropagation(); setCode3Filter(null); } }}
+                                className="shrink-0 rounded p-0.5 hover:bg-[var(--bg-elevated)]"
+                            >
+                                <X className="h-3.5 w-3.5 opacity-60" />
+                            </span>
+                        )}
+                        <ChevronDown className="h-4 w-4 opacity-40 shrink-0" />
+                    </button>
+                </DropdownMenuTrigger>
 
-            <select
-                value={code3 ?? ""}
-                onChange={(e) => setFilter("code3", e.target.value || null)}
-                className="apple-input pr-12 appearance-none w-full min-w-[240px]"
-                style={{ fontSize: "12px", height: "36px", paddingLeft: "36px" }}
-            >
-                <option value="">Toute la nomenclature</option>
-                {options.map((opt) => (
-                    <option key={opt.code} value={opt.code}>
-                        {opt.code} — {opt.label}
-                    </option>
-                ))}
-            </select>
+                <DropdownMenuContent align="start" className="w-[320px] max-h-[420px] overflow-y-auto p-0">
+                    <div className="sticky top-0 z-10 p-2 space-y-2" style={{ background: "var(--bg-surface)", borderBottom: "1px solid var(--border)" }}>
+                        <div className="relative">
+                            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 opacity-40" />
+                            <input
+                                value={recherche}
+                                onChange={(e) => setRecherche(e.target.value)}
+                                onKeyDown={(e) => e.stopPropagation()}
+                                placeholder="Filtrer les nomenclatures"
+                                className="w-full rounded-lg pl-7 pr-2 py-1.5 text-[12px] outline-none"
+                                style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)", color: "var(--text-primary)" }}
+                            />
+                        </div>
+                        <div className="flex items-center gap-2 text-[11px]">
+                            <button
+                                type="button"
+                                onClick={() => setCode3Filter(null)}
+                                className="rounded px-2 py-1 hover:bg-[var(--bg-elevated)]"
+                                style={{ color: "var(--text-secondary)" }}
+                            >
+                                Tout cocher
+                            </button>
+                            <button
+                                type="button"
+                                // Un code vide ne correspond à aucune ligne : c'est ainsi qu'on
+                                // exprime « rien de coché » sans confondre avec « pas de filtre ».
+                                onClick={() => setCode3Filter([])}
+                                className="rounded px-2 py-1 hover:bg-[var(--bg-elevated)]"
+                                style={{ color: "var(--text-secondary)" }}
+                            >
+                                Tout décocher
+                            </button>
+                            {recherche.trim() && visibles.length > 0 && (
+                                <button
+                                    type="button"
+                                    onClick={() => setCode3Filter(visibles.map((o) => o.code))}
+                                    className="rounded px-2 py-1 hover:bg-[var(--bg-elevated)] ml-auto"
+                                    style={{ color: "var(--accent)" }}
+                                >
+                                    Ne garder que ces {visibles.length}
+                                </button>
+                            )}
+                        </div>
+                    </div>
 
-            <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none opacity-40">
-                <ChevronDown className="h-4 w-4" />
-            </div>
+                    {visibles.length === 0 ? (
+                        <p className="p-3 text-[12px]" style={{ color: "var(--text-muted)" }}>Aucune nomenclature ne correspond.</p>
+                    ) : (
+                        visibles.map((opt) => (
+                            <DropdownMenuCheckboxItem
+                                key={opt.code}
+                                className="text-xs cursor-pointer"
+                                checked={tout || selectionnes.has(opt.code)}
+                                onCheckedChange={(v) => basculer(opt.code, !!v)}
+                                onSelect={(e: Event) => e.preventDefault()}
+                            >
+                                <span className="font-mono opacity-60 mr-1.5">{opt.code}</span>
+                                {opt.label}
+                            </DropdownMenuCheckboxItem>
+                        ))
+                    )}
+                </DropdownMenuContent>
+            </DropdownMenu>
         </div>
     );
 }

src/features/grid/components/product-monthly-modal.tsx

@@ -0,0 +1,403 @@
+"use client";
+
+/**
+ * CollectFlow — Détail mensuel d'un produit, ouvert depuis la case « Tot. 12m ».
+ *
+ * La colonne de total dit COMBIEN, jamais COMMENT. On empile donc les trois
+ * séries qui expliquent le total, dans l'ordre où on les lit : ce qui est sorti
+ * (ventes), ce qui est entré (réceptions), puis ce qui reste — magasin par
+ * magasin, parce qu'un stock de 40 réparti sur deux sites et un stock de 40
+ * bloqué sur un seul ne se pilotent pas pareil.
+ *
+ * SVG fait main comme le reste des graphiques du dossier : aucune librairie.
+ */
+
+import React from "react";
+import { ShoppingCart, PackageOpen, Warehouse } from "lucide-react";
+import { DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { TuileStat } from "@/features/grid/components/stat-tile";
+import { formatMonthLabel, formatDate, SITE_LABELS } from "@/features/grid/lib/months";
+import type { ProductRow } from "@/types/grid";
+
+/** Couleurs de séries : slots de la palette catégorielle validée (cf. `globals.css`). */
+const COULEUR_VENTES = "var(--viz-1)";
+const COULEUR_ENTREES = "var(--viz-3)";
+
+const fmt = (v: number) => Math.round(v).toLocaleString("fr-FR");
+
+/**
+ * Barres mensuelles sur une ligne de zéro explicite.
+ *
+ * Les quantités peuvent être NÉGATIVES (retours supérieurs aux ventes sur un
+ * mois) : l'échelle part donc du minimum réel et les barres se dessinent de part
+ * et d'autre du zéro, sinon un mois de retours sortirait du cadre par le bas.
+ *
+ * Chaque barre porte sa valeur écrite : douze nombres restent lisibles à cette
+ * largeur, et aucune valeur n'est ainsi accessible au seul survol.
+ */
+function BarresMensuelles({ mois, valeurs, couleur, aria }: {
+    mois: string[];
+    valeurs: number[];
+    couleur: string;
+    aria: string;
+}) {
+    const n = valeurs.length;
+    const min = Math.min(0, ...valeurs);
+    const max = Math.max(0, ...valeurs);
+
+    // Une barre négative écrit sa valeur SOUS elle : sans marge basse
+    // supplémentaire, ce nombre se poserait sur les libellés de mois.
+    const W = 660, hautPlot = 104, padH = 18;
+    const padB = min < 0 ? 42 : 24;
+    const H = padH + hautPlot + padB;
+
+    const etendue = max - min || 1;
+    const y = (v: number) => padH + hautPlot - ((v - min) / etendue) * hautPlot;
+    const yZero = y(0);
+
+    const pas = W / n;
+    const largeur = Math.min(pas * 0.6, 34);
+
+    return (
+        <div className="overflow-x-auto min-w-0">
+        <svg
+            viewBox={`0 0 ${W} ${H}`}
+            width="100%"
+            height={H}
+            preserveAspectRatio="xMidYMid meet"
+            // `display:block` : un SVG en ligne traîne l'espace sous la ligne de
+            // base et décale la section suivante.
+            style={{ minWidth: 520, display: "block" }}
+            role="img"
+            aria-label={aria}
+        >
+            <line x1={0} y1={yZero} x2={W} y2={yZero} stroke="var(--border)" strokeWidth={1} />
+            {valeurs.map((v, i) => {
+                const cx = pas * i + pas / 2;
+                const yVal = y(v);
+                const haut = Math.min(yVal, yZero);
+                const hauteur = Math.max(Math.abs(yVal - yZero), 1.5);
+                return (
+                    <g key={mois[i]}>
+                        {v !== 0 && (
+                            <rect
+                                x={cx - largeur / 2}
+                                y={haut}
+                                width={largeur}
+                                height={hauteur}
+                                rx={2.5}
+                                fill={couleur}
+                                opacity={0.9}
+                            />
+                        )}
+                        <text
+                            x={cx}
+                            y={v < 0 ? yZero + hauteur + 12 : haut - 5}
+                            textAnchor="middle"
+                            fontSize={11.5}
+                            fontWeight={700}
+                            fill={v === 0 ? "var(--text-muted)" : "var(--text-secondary)"}
+                        >
+                            {fmt(v)}
+                        </text>
+                        <text x={cx} y={H - 8} textAnchor="middle" fontSize={11} fill="var(--text-muted)">
+                            {formatMonthLabel(mois[i])}
+                        </text>
+                    </g>
+                );
+            })}
+        </svg>
+        </div>
+    );
+}
+
+/** En-tête de section : repère coloré + titre + cumul de la série. */
+function EnteteSection({ icone: Icone, titre, detail, couleur }: {
+    icone: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
+    titre: string;
+    detail: string;
+    couleur: string;
+}) {
+    return (
+        <div className="flex items-center gap-2 flex-wrap">
+            <span className="rounded-sm shrink-0" style={{ width: 14, height: 4, background: couleur }} />
+            <Icone className="w-4 h-4 shrink-0" style={{ color: "var(--text-muted)" }} />
+            <h3 className="text-[13px] font-bold" style={{ color: "var(--text-primary)" }}>{titre}</h3>
+            <span className="text-[12px]" style={{ color: "var(--text-muted)" }}>{detail}</span>
+        </div>
+    );
+}
+
+/**
+ * Une série mensuelle ventilée par magasin, un magasin par ligne.
+ *
+ * Sert aux ventes (flux : une colonne « 12 m » cumule la ligne) comme au stock
+ * (niveau : additionner douze fins de mois n'aurait aucun sens, pas de cumul).
+ *
+ * La ligne de total est recalculée depuis les lignes affichées : un total qui ne
+ * correspond pas à la somme visible fait douter du tableau entier.
+ */
+function TableauParMagasin({ row, mois, activeMagasin, parSite, agrege, sousLigne, cumul, aria }: {
+    row: ProductRow;
+    mois: string[];
+    activeMagasin: string;
+    /** Série par magasin (site → mois → valeur). */
+    parSite: Record<string, Record<string, number>> | undefined;
+    /** Série agrégée réseau, affichée seule quand aucune ventilation n'existe. */
+    agrege: Record<string, number>;
+    /** Texte secondaire sous le nom du magasin (`null` pour la ligne réseau). */
+    sousLigne: (site: string | null, valeurs: number[]) => string;
+    /** Ajoute une colonne de cumul sur 12 mois (flux uniquement). */
+    cumul?: boolean;
+    aria: string;
+}) {
+    const sites = [...new Set([
+        ...Object.keys(row.stock12mByStore ?? {}),
+        ...Object.keys(row.sales12mByStore ?? {}),
+    ])].sort();
+
+    // Sans ventilation par site (produit jamais mouvementé, données partielles),
+    // on montre au moins la série agrégée plutôt qu'un tableau vide.
+    const lignes = sites.length > 0
+        ? sites.map((site) => {
+            const valeurs = mois.map((m) => parSite?.[site]?.[m] ?? 0);
+            return { cle: site, nom: SITE_LABELS[site]?.nom ?? site, actif: activeMagasin === site, valeurs, sous: sousLigne(site, valeurs) };
+        })
+        : [(() => {
+            const valeurs = mois.map((m) => agrege[m] ?? 0);
+            return { cle: "TOTAL", nom: "Total réseau", actif: true, valeurs, sous: sousLigne(null, valeurs) };
+        })()];
+
+    const totaux = mois.map((_, i) => lignes.reduce((t, l) => t + l.valeurs[i], 0));
+    const somme = (v: number[]) => v.reduce((t, x) => t + x, 0);
+
+    const cellule = (v: number, key: string, gras = false) => (
+        <td
+            key={key}
+            className={`px-1.5 py-1.5 text-right tabular-nums${gras ? " font-bold" : ""}`}
+            style={{ color: v === 0 && !gras ? "var(--text-muted)" : "var(--text-primary)" }}
+        >
+            {fmt(v)}
+        </td>
+    );
+
+    return (
+        <div className="rounded-xl overflow-x-auto min-w-0" style={{ border: "1px solid var(--border)" }}>
+            <table className="w-full text-[11.5px]" style={{ minWidth: 600 }} aria-label={aria}>
+                <thead>
+                    <tr style={{ background: "var(--bg-elevated)" }}>
+                        <th className="text-left px-2.5 py-1.5 font-semibold" style={{ color: "var(--text-secondary)" }}>
+                            Magasin
+                        </th>
+                        {mois.map((m) => (
+                            <th key={m} className="text-right px-1.5 py-1.5 font-semibold whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
+                                {formatMonthLabel(m)}
+                            </th>
+                        ))}
+                        {cumul && (
+                            <th className="text-right px-2 py-1.5 font-bold whitespace-nowrap" style={{ color: "var(--text-primary)", borderLeft: "1px solid var(--border)" }}>
+                                12 m
+                            </th>
+                        )}
+                    </tr>
+                </thead>
+                <tbody>
+                    {lignes.map((l) => {
+                        const surligne = l.actif && activeMagasin !== "TOTAL";
+                        return (
+                            <tr key={l.cle} style={{ borderTop: "1px solid var(--border)", background: surligne ? "var(--accent-bg)" : undefined }}>
+                                <td className="px-2.5 py-1.5 whitespace-nowrap" style={{ color: "var(--text-primary)" }}>
+                                    <div className="font-semibold">{l.nom}</div>
+                                    {/* L'information secondaire (dernière entrée, mois avec
+                                        vente) est écrite, pas réservée au survol. */}
+                                    <div className="text-[10px]" style={{ color: "var(--text-muted)" }}>{l.sous}</div>
+                                </td>
+                                {l.valeurs.map((v, i) => cellule(v, mois[i]))}
+                                {cumul && (
+                                    <td className="px-2 py-1.5 text-right tabular-nums font-bold" style={{ color: "var(--text-primary)", borderLeft: "1px solid var(--border)" }}>
+                                        {fmt(somme(l.valeurs))}
+                                    </td>
+                                )}
+                            </tr>
+                        );
+                    })}
+                    {lignes.length > 1 && (
+                        <tr style={{ borderTop: "1px solid var(--border-strong)", background: "var(--bg-elevated)" }}>
+                            <td className="px-2.5 py-1.5 font-bold" style={{ color: "var(--text-primary)" }}>
+                                Total
+                            </td>
+                            {totaux.map((v, i) => cellule(v, mois[i], true))}
+                            {cumul && (
+                                <td className="px-2 py-1.5 text-right tabular-nums font-bold" style={{ color: "var(--text-primary)", borderLeft: "1px solid var(--border)" }}>
+                                    {fmt(somme(totaux))}
+                                </td>
+                            )}
+                        </tr>
+                    )}
+                </tbody>
+            </table>
+        </div>
+    );
+}
+
+/**
+ * Détail 12 mois d'un produit : ventes, entrées en stock, stock par magasin.
+ *
+ * Les graphiques suivent le magasin actif de la Grille (cohérence avec la case
+ * cliquée) ; les tableaux de ventes et de stock restent toujours ventilés par
+ * magasin, c'est leur objet.
+ *
+ * `mois` est la fenêtre du serveur (lue dans les données, cf. `months.ts`) :
+ * c'est ce qui garantit que la tuile « Ventes 12 m » retombe sur le total de la
+ * Grille.
+ */
+export function ProductMonthlyModal({ row, mois, activeMagasin, onClose }: {
+    row: ProductRow;
+    mois: string[];
+    activeMagasin: string;
+    onClose: () => void;
+}) {
+    const surTotal = activeMagasin === "TOTAL";
+    const libelleMagasin = surTotal ? "Tous magasins" : (SITE_LABELS[activeMagasin]?.nom ?? activeMagasin);
+
+    const ventes = mois.map((m) => (surTotal
+        ? row.sales12m[m]
+        : row.sales12mByStore?.[activeMagasin]?.[m]) ?? 0);
+    const entrees = mois.map((m) => (surTotal
+        ? row.receptions12m[m]
+        : row.receptions12mByStore?.[activeMagasin]?.[m]) ?? 0);
+    const stocks = mois.map((m) => (surTotal
+        ? row.stock12m[m]
+        : row.stock12mByStore?.[activeMagasin]?.[m]) ?? 0);
+
+    // Sur un magasin donné, la dernière entrée du réseau n'est pas la sienne.
+    const derniereEntree = surTotal
+        ? row.derniereLivraison
+        : row.derniereLivraisonByStore?.[activeMagasin];
+
+    const totalVentes = ventes.reduce((t, v) => t + v, 0);
+    const totalEntrees = entrees.reduce((t, v) => t + v, 0);
+    const stockFin = stocks[stocks.length - 1] ?? 0;
+    const moisAvecVente = ventes.filter((v) => v !== 0).length;
+
+    // Couverture : combien de mois le stock actuel tient-il au rythme des 12
+    // derniers mois ? Sans vente, le ratio n'existe pas — on ne l'invente pas.
+    const rythme = totalVentes / mois.length;
+    const couverture = rythme > 0 ? stockFin / rythme : null;
+
+    return (
+        <DialogContent
+            // `grid-cols-1` : sans colonne explicite, la grille de la modale se
+            // dimensionne sur son contenu le plus large (le tableau des magasins)
+            // et déborde par la droite au lieu de le laisser défiler.
+            className="max-w-[calc(100%-2rem)] sm:max-w-4xl grid-cols-1 max-h-[88vh] overflow-y-auto"
+            style={{ background: "var(--bg-surface)", border: "1px solid var(--border)" }}
+            onInteractOutside={onClose}
+        >
+            <DialogHeader>
+                <DialogTitle className="text-lg leading-snug pr-6" style={{ color: "var(--text-primary)" }}>
+                    {row.libelle1}
+                </DialogTitle>
+                <p className="text-[13px] mt-1" style={{ color: "var(--text-muted)" }}>
+                    {row.codein}
+                    {row.reference ? ` · ${row.reference}` : ""}
+                    {" · "}
+                    <span className="font-semibold" style={{ color: "var(--text-secondary)" }}>{libelleMagasin}</span>
+                    {" · 12 mois glissants, mois en cours exclu"}
+                </p>
+            </DialogHeader>
+
+            <div className="flex flex-wrap gap-2">
+                <TuileStat
+                    label="Ventes 12 m"
+                    valeur={fmt(totalVentes)}
+                    indice={`${moisAvecVente} mois avec vente · ${rythme.toLocaleString("fr-FR", { maximumFractionDigits: 1 })} / mois`}
+                    icone={ShoppingCart}
+                />
+                <TuileStat
+                    label="Entrées 12 m"
+                    valeur={totalEntrees > 0 ? `+${fmt(totalEntrees)}` : "—"}
+                    indice={derniereEntree ? `dernière entrée ${formatDate(derniereEntree)}` : "aucune entrée enregistrée"}
+                    couleur={totalEntrees > 0 ? COULEUR_ENTREES : undefined}
+                    icone={PackageOpen}
+                />
+                <TuileStat
+                    label="Stock fin de période"
+                    valeur={fmt(stockFin)}
+                    indice={couverture != null
+                        ? `≈ ${couverture.toLocaleString("fr-FR", { maximumFractionDigits: 1 })} mois de couverture`
+                        : "pas de vente sur la période"}
+                    icone={Warehouse}
+                />
+            </div>
+
+            <section className="space-y-1.5">
+                <EnteteSection
+                    icone={ShoppingCart}
+                    titre="Ventes mensuelles"
+                    detail={`${fmt(totalVentes)} unités sur 12 mois`}
+                    couleur={COULEUR_VENTES}
+                />
+                <BarresMensuelles
+                    mois={mois}
+                    valeurs={ventes}
+                    couleur={COULEUR_VENTES}
+                    aria={`Ventes mensuelles de ${row.libelle1} sur 12 mois`}
+                />
+                {/* Le graphique donne la forme, le tableau donne les chiffres par
+                    magasin — et son cumul « 12 m » est le même total que la tuile
+                    et que la case cliquée dans la Grille. */}
+                <TableauParMagasin
+                    row={row}
+                    mois={mois}
+                    activeMagasin={activeMagasin}
+                    parSite={row.sales12mByStore}
+                    agrege={row.sales12m}
+                    sousLigne={(_site, valeurs) => {
+                        const n = valeurs.filter((v) => v !== 0).length;
+                        return n === 0 ? "aucune vente" : `${n} mois avec vente`;
+                    }}
+                    cumul
+                    aria={`Ventes mensuelles de ${row.libelle1} par magasin`}
+                />
+            </section>
+
+            <section className="space-y-1">
+                <EnteteSection
+                    icone={PackageOpen}
+                    titre="Entrées en stock"
+                    detail={totalEntrees > 0 ? `+${fmt(totalEntrees)} unités reçues sur 12 mois` : "aucune réception sur la période"}
+                    couleur={COULEUR_ENTREES}
+                />
+                <BarresMensuelles
+                    mois={mois}
+                    valeurs={entrees}
+                    couleur={COULEUR_ENTREES}
+                    aria={`Entrées en stock de ${row.libelle1} sur 12 mois`}
+                />
+            </section>
+
+            <section className="space-y-1.5">
+                <EnteteSection
+                    icone={Warehouse}
+                    titre="Stock par magasin"
+                    detail="stock de fin de mois"
+                    couleur="var(--border-strong)"
+                />
+                <TableauParMagasin
+                    row={row}
+                    mois={mois}
+                    activeMagasin={activeMagasin}
+                    parSite={row.stock12mByStore}
+                    agrege={row.stock12m}
+                    sousLigne={(site) => {
+                        // La date de dernière entrée explique un stock qui ne bouge plus.
+                        const d = site ? row.derniereLivraisonByStore?.[site] : row.derniereLivraison;
+                        return d ? `dern. entrée ${formatDate(d)}` : "aucune entrée";
+                    }}
+                    aria={`Stock de fin de mois de ${row.libelle1} par magasin`}
+                />
+            </section>
+        </DialogContent>
+    );
+}

src/features/grid/components/stat-tile.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import React from "react";
+
+/**
+ * Tuile de statistique : intitulé en phrase, valeur en chiffres proportionnels.
+ *
+ * Pas de `tabular-nums` ici : à grande taille, des chiffres de largeur égale font
+ * paraître un nombre court anormalement lâche. Les chiffres tabulaires sont
+ * réservés aux colonnes qui s'alignent verticalement (tableau, axes).
+ *
+ * Extraite de `heatmap-grid.tsx` pour être partagée entre la modale de tendance
+ * réseau et la modale de détail mensuel produit. Aucun changement de rendu.
+ */
+export function TuileStat({ label, valeur, indice, couleur, icone: Icone }: {
+    label: string;
+    valeur: string;
+    indice?: string;
+    couleur?: string;
+    icone?: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
+}) {
+    return (
+        <div className="rounded-xl px-3.5 py-3 flex-1 min-w-[160px]" style={{ background: "var(--bg-elevated)", border: "1px solid var(--border)" }}>
+            <div className="text-[12px] font-semibold uppercase tracking-wide" style={{ color: "var(--text-muted)" }}>
+                {label}
+            </div>
+            <div className="flex items-center gap-1.5 mt-1">
+                {Icone && <Icone className="w-5 h-5 shrink-0" style={{ color: couleur ?? "var(--text-primary)" }} />}
+                <span className="text-[26px] font-bold leading-tight" style={{ color: couleur ?? "var(--text-primary)" }}>
+                    {valeur}
+                </span>
+            </div>
+            {indice && <div className="text-[12px] mt-1 leading-snug" style={{ color: "var(--text-muted)" }}>{indice}</div>}
+        </div>
+    );
+}

src/features/grid/lib/months.ts

@@ -30,6 +30,32 @@ export function getLast12Months(): string[] {
     return months;
 }
 
+/**
+ * Fenêtre de 12 mois **telle que le serveur l'a calculée**, lue dans les clés des
+ * séries mensuelles des lignes reçues.
+ *
+ * `getLast12Months()` recalcule la fenêtre depuis l'horloge du navigateur ; or
+ * les totaux (`totalQuantite`, `quantiteByStore`…) sont figés côté serveur, sur
+ * SA fenêtre. Dès que les deux divergent — onglet resté ouvert au changement de
+ * mois, lignes servies depuis le cache, horloges décalées — un mois de ventes
+ * disparaît des colonnes tout en restant compté dans le total : la case
+ * « Tot. 12m » affiche 28 quand les douze cases visibles ne font que 20.
+ * Les clés des données sont la seule référence commune : on les prend.
+ *
+ * Renvoie `null` si aucune ligne ne porte de série (fournisseur sans vente,
+ * chargement en cours) — l'appelant retombe alors sur `getLast12Months()`.
+ */
+export function getMonthsFromRows(rows: ReadonlyArray<{ sales12m?: Record<string, number> }>): string[] | null {
+    for (const r of rows) {
+        const keys = Object.keys(r.sales12m ?? {}).filter((k) => /^\d{6}$/.test(k));
+        if (keys.length < 12) continue;
+        // Toutes les lignes d'un même calcul partagent la même fenêtre : la
+        // première ligne complète suffit.
+        return keys.sort().slice(-12);
+    }
+    return null;
+}
+
 /** `"202601"` → `"Jan 26"`. */
 export function formatMonthLabel(key: string): string {
     const m = parseInt(key.slice(4, 6), 10);

src/features/grid/store/use-grid-store.ts

@@ -20,6 +20,19 @@ interface GridState {
     columnVisibility: Record<string, boolean>;
     /** Persisted column sizing state */
     columnSizing: Record<string, number>;
+    /**
+     * Bloc des 12 colonnes mensuelles affiché ou non dans la Grille.
+     *
+     * Séparé de `columnVisibility` : masquer douze colonnes une par une n'est pas
+     * une manipulation, et l'état « bloc replié » doit survivre au renouvellement
+     * de la fenêtre glissante — les identifiants `month_YYYYMM` changent chaque
+     * mois, un drapeau ne change pas.
+     */
+    showMonthlySales: boolean;
+    setShowMonthlySales: (visible: boolean) => void;
+    /** Bloc des deux colonnes de prix (PV moyen réseau, PV central) affiché ou non. */
+    showPrices: boolean;
+    setShowPrices: (visible: boolean) => void;
 
     /** Currently displayed store: "TOTAL" | "292" | "579" */
     activeMagasin: string;
@@ -33,7 +46,9 @@ interface GridState {
     clearDrafts: (codeins: string[]) => void;
     /** Apply saved drafts onto row.codeGamme so change indicators persist after save */
     applyDraftsToRows: (draftsToApply: Record<string, GammeCode>) => void;
-    setFilter: (key: keyof GridFilters, value: string | null) => void;
+    setFilter: (key: Exclude<keyof GridFilters, "code3">, value: string | null) => void;
+    /** Nomenclatures retenues. `null` = aucun filtre, `[]` = rien de coché. */
+    setCode3Filter: (codes: string[] | null) => void;
     setDisplayDensity: (density: "compact" | "normal" | "comfortable") => void;
     setActiveGridQuery: (query: string) => void;
     restoreSnapshot: (changes: Record<string, GammeCode>) => void;
@@ -70,6 +85,12 @@ function computeSummary(rows: ProductRow[], drafts: Record<string, GammeCode>, m
     };
 }
 
+/** Sous-ensemble réellement écrit dans le navigateur (cf. `partialize`). */
+type GridPersisted = Pick<
+    GridState,
+    "filters" | "displayDensity" | "draftChanges" | "activeGridQuery" | "columnVisibility" | "columnSizing" | "showMonthlySales" | "showPrices"
+>;
+
 export const useGridStore = create<GridState>()(
     persist(
         (set, get) => ({
@@ -98,6 +119,11 @@ export const useGridStore = create<GridState>()(
             activeGridQuery: "",
             columnVisibility: {},
             columnSizing: {},
+            showMonthlySales: true,
+            showPrices: true,
+
+            setShowMonthlySales: (visible) => set({ showMonthlySales: visible }),
+            setShowPrices: (visible) => set({ showPrices: visible }),
 
             setActiveMagasin: (code) => {
                 set({ activeMagasin: code });
@@ -172,6 +198,9 @@ export const useGridStore = create<GridState>()(
             setFilter: (key, value) => {
                 set((state) => ({ ...state, filters: { ...state.filters, [key]: value } }));
             },
+            setCode3Filter: (codes) => {
+                set((state) => ({ ...state, filters: { ...state.filters, code3: codes } }));
+            },
             setDisplayDensity: (density) => set({ displayDensity: density }),
             setActiveGridQuery: (query) => set({ activeGridQuery: query }),
             restoreSnapshot: (changes) => {
@@ -214,14 +243,37 @@ export const useGridStore = create<GridState>()(
         }),
         {
             name: "collectflow-grid-storage",
+            /**
+             * v1 — `filters.code3` est passé d'une chaîne unique à `string[] | null`
+             * (filtre multi-nomenclatures). Sans migration, la valeur déjà présente
+             * dans le navigateur restait une chaîne : `new Set("320211")` produit un
+             * ensemble de caractères, plus aucune ligne ne correspond, et la Grille
+             * apparaît vide. Le numéro de version force la reprise de l'existant.
+             */
+            version: 1,
+            migrate: (persisted: unknown, version: number): GridPersisted => {
+                const etat = (persisted ?? {}) as GridPersisted & { filters?: Record<string, unknown> };
+                if (version < 1 && etat.filters) {
+                    const c = etat.filters.code3;
+                    etat.filters.code3 = typeof c === "string" && c !== "" ? [c] : Array.isArray(c) ? c : null;
+                }
+                // Drapeaux ajoutés après coup : un état persisté antérieur n'en a
+                // pas, et une valeur `undefined` écraserait la valeur par défaut
+                // à la fusion (le bloc disparaîtrait sans raison).
+                if (typeof etat.showMonthlySales !== "boolean") etat.showMonthlySales = true;
+                if (typeof etat.showPrices !== "boolean") etat.showPrices = true;
+                return etat;
+            },
             // Only persist filters, display density, drafts, active grid query, and column visibility/sizing
-            partialize: (state) => ({
+            partialize: (state): GridPersisted => ({
                 filters: state.filters,
                 displayDensity: state.displayDensity,
                 draftChanges: state.draftChanges,
                 activeGridQuery: state.activeGridQuery,
                 columnVisibility: state.columnVisibility,
                 columnSizing: state.columnSizing,
+                showMonthlySales: state.showMonthlySales,
+                showPrices: state.showPrices,
             }),
         }
     )

src/features/settings/actions.ts

@@ -18,6 +18,13 @@ export interface DbConfig {
     qlikHost?: string;
     qlikUser?: string;
     qlikPassword?: string;
+    /**
+     * API REST FF Nancy (ex. https://api.ffnancy.fr). Sert au panneau de statut et
+     * au rattrapage des ventes par magasin dans la Grille. Configurable ici pour
+     * ne pas dépendre d'une variable d'environnement qu'on ne peut pas changer
+     * sans redéployer.
+     */
+    ffApiBaseUrl?: string;
 }
 
 /** Lit la config existante (ou {} si absente). */
@@ -111,6 +118,82 @@ export async function testQlikConnection(qlikHost: string, qlikUser: string, qli
     }
 }
 
+/** Enregistre l'URL de l'API FF Nancy. Chaîne vide = revenir au défaut. */
+export async function saveFfApiSettings(ffApiBaseUrl: string) {
+    try {
+        const cleaned = ffApiBaseUrl.trim().replace(/\/+$/, "");
+        if (cleaned && !/^https?:\/\//i.test(cleaned)) {
+            return { success: false, error: "L'URL doit commencer par http:// ou https://" };
+        }
+        const existing = await readConfig();
+        const config = { ...existing, ffApiBaseUrl: cleaned || undefined } as DbConfig;
+        await fs.mkdir(DATA_DIR, { recursive: true });
+        await fs.writeFile(CONFIG_FILE, JSON.stringify(config, null, 2));
+        // Sans cela, l'ancienne URL resterait servie jusqu'à 30 s après la sauvegarde.
+        const { resetFfApiBaseCache } = await import("@/lib/api-ff-client");
+        resetFfApiBaseCache();
+        console.log(`[Settings] FF API base URL saved: ${cleaned || "(défaut)"}`);
+        return { success: true };
+    } catch (error: unknown) {
+        const msg = error instanceof Error ? error.message : String(error);
+        console.error("[Settings] Failed to save FF API config:", msg);
+        return { success: false, error: msg };
+    }
+}
+
+/**
+ * Teste l'API FF Nancy et renvoie un diagnostic **exploitable**.
+ *
+ * L'ancien panneau se contentait d'un « HTTP 503 » opaque : impossible de savoir
+ * si l'hôte était injoignable, l'URL erronée ou le service en panne. On distingue
+ * donc ici l'échec réseau (DNS, refus de connexion, délai dépassé) du code HTTP.
+ */
+export async function testFfApiConnection(ffApiBaseUrl?: string) {
+    const base = (ffApiBaseUrl?.trim() || (await readConfig()).ffApiBaseUrl || process.env.FF_API_BASE_URL || "https://api.ffnancy.fr").replace(/\/+$/, "");
+    const url = `${base}/api/sync/status`;
+    const started = Date.now();
+    try {
+        const res = await fetch(url, {
+            cache: "no-store",
+            signal: AbortSignal.timeout(8000),
+        });
+        const ms = Date.now() - started;
+        if (!res.ok) {
+            return { success: false, url, error: `Le serveur a répondu HTTP ${res.status} (${res.statusText || "sans message"}) en ${ms} ms.` };
+        }
+        const body = await res.json().catch(() => null);
+        if (!body) {
+            return { success: false, url, error: `Réponse HTTP 200 mais corps illisible (JSON attendu).` };
+        }
+        // La réponse brute de l'API n'a pas la forme attendue par l'interface :
+        // sans cette normalisation, le panneau s'affiche vide malgré un HTTP 200.
+        const { normalizeSyncStatus } = await import("@/lib/api-ff-client");
+        const status = normalizeSyncStatus(body);
+        if (!status) {
+            return { success: false, url, error: `Réponse HTTP 200 mais format inattendu (ni « sync » ni « tables »).` };
+        }
+        return { success: true, url, ms, status };
+    } catch (error: unknown) {
+        const ms = Date.now() - started;
+        const raw = error instanceof Error ? error.message : String(error);
+        const name = error instanceof Error ? error.name : "";
+        // fetch masque la cause réelle derrière « fetch failed » : on la déplie.
+        const cause = (error as { cause?: { code?: string; message?: string } })?.cause;
+        let hint = raw;
+        if (name === "TimeoutError" || name === "AbortError") {
+            hint = `Aucune réponse en ${ms} ms — serveur injoignable ou trop lent.`;
+        } else if (cause?.code === "ENOTFOUND") {
+            hint = `Nom d'hôte introuvable (DNS) — vérifiez l'URL.`;
+        } else if (cause?.code === "ECONNREFUSED") {
+            hint = `Connexion refusée — le service n'écoute pas sur cette adresse.`;
+        } else if (cause?.code) {
+            hint = `${cause.code}${cause.message ? ` — ${cause.message}` : ""}`;
+        }
+        console.error(`[Settings] FF API test KO (${url}):`, raw);
+        return { success: false, url, error: hint };
+    }
+}
+
 export async function getSavedDatabaseConfig(): Promise<DbConfig | null> {
     try {
         if (!(await fs.stat(CONFIG_FILE).catch(() => null))) {

src/instrumentation.ts

@@ -0,0 +1,20 @@
+/**
+ * CollectFlow — Point d'entrée exécuté une fois au démarrage du serveur.
+ *
+ * Sert à armer le minuteur de la synchronisation nocturne. L'import est
+ * dynamique et conditionné au runtime Node : `register()` est aussi évalué
+ * dans le runtime Edge, où ni `setInterval` persistant ni l'accès à la base
+ * n'ont de sens.
+ */
+export async function register() {
+    if (process.env.NEXT_RUNTIME !== "nodejs") return;
+
+    try {
+        const { startSyncTimer } = await import("@/features/admin/api/sync-timer");
+        startSyncTimer();
+    } catch (e) {
+        // Un démarrage réussi prime sur le planificateur : s'il ne s'arme pas,
+        // l'application doit rester utilisable et la synchro manuelle disponible.
+        console.error("[instrumentation] minuteur de synchro non démarré :", e instanceof Error ? e.message : String(e));
+    }
+}

src/lib/api-auth.ts

@@ -0,0 +1,122 @@
+/**
+ * CollectFlow — Authentification de l'API publique `/api/v1`.
+ *
+ * Deux voies d'entrée :
+ *   1. **Clé d'API** (`X-API-Key` ou `Authorization: Bearer …`) — pour les appelants
+ *      non-navigateur : scripts, outils externes, assistant IA.
+ *   2. **Session NextAuth** — le front de CollectFlow utilise donc les mêmes routes.
+ *
+ * En cas d'échec on renvoie un **401 JSON**, jamais une redirection : `src/middleware.ts`
+ * exempte `/api/v1/*` précisément pour que ce module puisse répondre proprement.
+ *
+ * Seul le hachage SHA-256 des clés est stocké (table `api_keys`) ; la clé en clair
+ * n'existe qu'au moment de sa création.
+ */
+
+import "server-only";
+
+import { createHash, randomBytes, timingSafeEqual } from "crypto";
+import type { NextRequest } from "next/server";
+import { db } from "@/db";
+import { apiKeys } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { auth } from "@/lib/auth";
+import { fail } from "@/lib/api-response";
+
+export interface AuthContext {
+    /** Origine de l'authentification — utile pour les logs et l'audit. */
+    via: "api_key" | "session";
+    role: string;
+    /** Nom de la clé, ou identifiant de l'utilisateur connecté. */
+    subject: string;
+}
+
+/** Préfixe des clés CollectFlow, pour les reconnaître d'un coup d'œil. */
+const KEY_PREFIX = "cf_";
+
+export function hashApiKey(key: string): string {
+    return createHash("sha256").update(key, "utf8").digest("hex");
+}
+
+/**
+ * Génère une clé d'API. Renvoie la clé **en clair** (à afficher une seule fois),
+ * son hachage à stocker, et un préfixe lisible pour l'identifier dans l'UI.
+ */
+export function generateApiKey(): { key: string; keyHash: string; keyPrefix: string } {
+    const secret = randomBytes(24).toString("base64url");
+    const key = `${KEY_PREFIX}${secret}`;
+    return { key, keyHash: hashApiKey(key), keyPrefix: key.slice(0, 11) };
+}
+
+/** Comparaison à temps constant de deux hachages hexadécimaux. */
+function hashesEqual(a: string, b: string): boolean {
+    const ba = Buffer.from(a, "hex");
+    const bb = Buffer.from(b, "hex");
+    if (ba.length !== bb.length || ba.length === 0) return false;
+    return timingSafeEqual(ba, bb);
+}
+
+/** Extrait la clé d'un en-tête `X-API-Key` ou `Authorization: Bearer …`. */
+function readKeyFromRequest(req: NextRequest): string | null {
+    const direct = req.headers.get("x-api-key");
+    if (direct?.trim()) return direct.trim();
+    const authz = req.headers.get("authorization");
+    if (authz) {
+        const m = authz.match(/^Bearer\s+(.+)$/i);
+        if (m) return m[1].trim();
+    }
+    return null;
+}
+
+/**
+ * Authentifie une requête `/api/v1`.
+ *
+ * Renvoie un `AuthContext` en cas de succès, ou une réponse d'erreur JSON prête à
+ * être retournée par le handler. À appeler en première ligne de chaque endpoint :
+ *
+ *     const authCtx = await requireApiAuth(req);
+ *     if (authCtx instanceof NextResponse) return authCtx;
+ */
+export async function requireApiAuth(req: NextRequest): Promise<AuthContext | Response> {
+    const presented = readKeyFromRequest(req);
+
+    if (presented) {
+        const presentedHash = hashApiKey(presented);
+        // La colonne key_hash est unique : la recherche par égalité suffit, et la
+        // comparaison à temps constant ci-dessous couvre le reste.
+        const [row] = await db.select().from(apiKeys).where(eq(apiKeys.keyHash, presentedHash)).limit(1);
+
+        if (!row || !hashesEqual(row.keyHash, presentedHash)) {
+            return fail("unauthorized", "Clé d'API invalide.");
+        }
+        if (row.revokedAt) {
+            return fail("unauthorized", "Clé d'API révoquée.");
+        }
+
+        // Trace d'usage — jamais bloquante pour la requête en cours.
+        void db.update(apiKeys).set({ lastUsedAt: new Date() }).where(eq(apiKeys.id, row.id))
+            .catch((e) => console.error("[api-auth] lastUsedAt KO:", (e as Error).message?.slice(0, 120)));
+
+        return { via: "api_key", role: row.role, subject: row.name };
+    }
+
+    // Repli sur la session du navigateur (le front utilise les mêmes routes).
+    const session = await auth();
+    if (session?.user) {
+        const user = session.user as { name?: string | null; role?: string };
+        return { via: "session", role: user.role ?? "user", subject: user.name ?? "session" };
+    }
+
+    return fail(
+        "unauthorized",
+        "Authentification requise : fournissez un en-tête X-API-Key (ou Authorization: Bearer), ou connectez-vous.",
+    );
+}
+
+/** Restreint un endpoint aux appelants administrateurs. */
+export function requireAdminRole(ctx: AuthContext): Response | null {
+    if (ctx.role !== "admin") {
+        return fail("forbidden", "Rôle administrateur requis pour cette opération.");
+    }
+    return null;
+}

src/lib/api-enrich.ts

@@ -0,0 +1,146 @@
+/**
+ * CollectFlow — Enrichissement des lignes servies par `/api/v1`.
+ *
+ * L'instantané `grid_rows` fige la ligne au moment du calcul. Deux informations
+ * doivent pourtant refléter l'état **courant** au moment de l'appel :
+ *
+ * 1. **Métriques réseau Qlik** — la table `qlik_network_metrics` est mise à jour par
+ *    les synchronisations et les recherches réseau, indépendamment du calcul de la
+ *    grille. On les relit donc à la lecture, et on les expose telles quelles quand
+ *    elles existent (`network: null` sinon).
+ *
+ * 2. **Gamme serveur** — `codeGamme` peut être surchargée par un snapshot de session
+ *    (modification locale non enregistrée côté serveur). L'API expose la gamme **non
+ *    modifiée**, celle réellement présente en base PostgreSQL, relue à chaque appel.
+ *
+ * Ce n'est pas un recalcul : deux lectures indexées bornées au nombre de lignes de la
+ * page (500 au maximum), de l'ordre de quelques millisecondes.
+ */
+
+import "server-only";
+
+import type { ProductRow } from "@/types/grid";
+import { getNetworkMetricsByCodeCentrale, type NetworkMetricCached } from "@/lib/qlik-network-cache";
+import { pgGetGammesByCodeins } from "@/lib/pg-ff-client";
+// Module de la Grille : l'API doit renvoyer exactement la tendance affichée dans
+// l'application, pas une seconde implémentation qui divergerait.
+import { computeNetworkTrend, trendLabel } from "@/features/grid/lib/network-trend";
+
+/** Tendance réseau 12 mois, telle qu'affichée dans la colonne « Tendance » de la Grille. */
+export interface ProductTrend {
+    direction: "up" | "down" | "flat";
+    /** Variation des 4 derniers mois vs les 4 premiers (0.23 = +23 %). `null` si aucune base. */
+    pct: number | null;
+    /** Libellé prêt à afficher : « Forte hausse », « Nouveau », « Stable »… */
+    label: string;
+    /**
+     * `true` = tendance calculée sur la quantité **par magasin vendeur**, ce qui
+     * neutralise l'effet d'un simple élargissement de la distribution. `false` =
+     * repli sur les quantités brutes, faute de nombre de magasins sur 12 mois.
+     */
+    surQteParMagasin: boolean;
+    /** Aucune vente sur les 4 premiers mois, des ventes sur les 4 derniers. */
+    nouveau: boolean;
+    /** Nombre de mois de la série (12 quand elle est complète). */
+    monthsUsed: number;
+}
+
+export interface EnrichedProductRow extends ProductRow {
+    /**
+     * Gamme telle qu'elle existe sur le serveur PostgreSQL — non modifiée.
+     * `null` si l'article n'a aucune gamme en base.
+     */
+    codeGammeServeur: string | null;
+    /** Métriques réseau Qlik en cache, ou `null` si le produit n'en a pas. */
+    network: NetworkMetricCached | null;
+    /**
+     * Tendance réseau calculée par régression linéaire sur les 12 derniers mois.
+     * `null` quand il n'y a aucune série mensuelle. Fournie pour que l'appelant —
+     * en particulier un agent — n'ait pas à réimplémenter le calcul et à diverger
+     * de ce que montre l'application.
+     */
+    trend: ProductTrend | null;
+}
+
+/**
+ * Enrichit un lot de lignes. Les deux lectures sont indépendantes et lancées en
+ * parallèle ; un échec de l'une n'empêche pas l'autre (l'API reste servie, avec
+ * la valeur de l'instantané en repli).
+ */
+export async function enrichRows(rows: ProductRow[]): Promise<EnrichedProductRow[]> {
+    if (rows.length === 0) return [];
+
+    const codesCentraux = [...new Set(rows.map((r) => r.codeCentrale).filter((c): c is string => Boolean(c)))];
+    const codeins = [...new Set(rows.map((r) => r.codein).filter(Boolean))];
+
+    const [network, gammes] = await Promise.all([
+        codesCentraux.length
+            ? getNetworkMetricsByCodeCentrale(codesCentraux).catch((e) => {
+                console.error("[api-enrich] métriques réseau KO:", (e as Error).message?.slice(0, 160));
+                return new Map<string, NetworkMetricCached>();
+            })
+            : Promise.resolve(new Map<string, NetworkMetricCached>()),
+        codeins.length
+            ? pgGetGammesByCodeins(codeins).catch((e) => {
+                console.error("[api-enrich] gammes serveur KO:", (e as Error).message?.slice(0, 160));
+                return new Map<string, string>();
+            })
+            : Promise.resolve(new Map<string, string>()),
+    ]);
+
+    return rows.map((row) => {
+        const metrics = row.codeCentrale ? network.get(row.codeCentrale) ?? null : null;
+        // Gamme absente de la base = pas de gamme, et non « inconnue » : on distingue
+        // explicitement par `null` plutôt que de retomber sur la valeur du snapshot.
+        const gammeServeur = gammes.get(row.codein) ?? null;
+
+        const enriched: EnrichedProductRow = {
+            ...row,
+            codeGammeServeur: gammeServeur,
+            network: metrics,
+            trend: null, // renseignée plus bas, une fois la série mensuelle connue
+        };
+
+        // `codeGammeInit` porte déjà la sémantique « état serveur » dans la Grille :
+        // on la garde alignée pour que les deux champs ne divergent jamais.
+        if (gammes.size > 0) {
+            enriched.codeGammeInit = gammeServeur as ProductRow["codeGammeInit"];
+        }
+
+        // Les colonnes réseau de la ligne datent du calcul : on les réaligne sur le
+        // cache quand il a quelque chose à dire.
+        if (metrics) {
+            enriched.caReseau = metrics.caReseau;
+            enriched.qteReseau = metrics.qteReseau;
+            enriched.nbMagasinsReseau = metrics.nbMagasinsReseau;
+            enriched.caParMagasinReseau = metrics.caParMagasinReseau;
+            enriched.margePctReseau = metrics.margePctReseau;
+            enriched.qteReseauByMonth = metrics.qteByMonth;
+            enriched.networkFetchedAt = metrics.fetchedAt ?? undefined;
+        }
+
+        // Tendance : mêmes entrées que la colonne « Tendance » de la Grille, à
+        // savoir la série des quantités **et** celle du nombre de magasins vendeurs
+        // — sans la seconde, le calcul se rabat sur les quantités brutes et
+        // confond « vend mieux » avec « est distribué plus largement ».
+        const serie = enriched.qteReseauByMonth;
+        const nbMagByMonth = metrics?.metricsByMonth
+            ? Object.fromEntries(
+                Object.entries(metrics.metricsByMonth).map(([mois, m]) => [mois, Number(m?.nbMag) || 0]),
+            )
+            : null;
+        const t = computeNetworkTrend(serie, nbMagByMonth);
+        if (t.hasData) {
+            enriched.trend = {
+                direction: t.direction,
+                pct: t.pct,
+                label: trendLabel(t.pct, t.nouveau),
+                surQteParMagasin: t.surQteParMagasin,
+                nouveau: t.nouveau,
+                monthsUsed: t.values.length,
+            };
+        }
+
+        return enriched;
+    });
+}

src/lib/api-ff-client.ts

@@ -9,7 +9,46 @@
  *   - Tous types → lire qtestock pour reconstruire stock12m
  */
 
-const FF_API_BASE = process.env.FF_API_BASE_URL ?? "https://api.ffnancy.fr";
+import fs from "fs/promises";
+import path from "path";
+
+const CONFIG_FILE = path.join(process.cwd(), "data", ".db-config.json");
+const FF_API_BASE_DEFAULT = "https://api.ffnancy.fr";
+const FF_API_BASE_TTL_MS = 30_000;
+
+let ffApiBaseCache: { value: string; at: number } | null = null;
+
+/**
+ * URL de l'API FF Nancy, résolue **au moment de l'appel**.
+ *
+ * Ordre de priorité : réglage enregistré dans Paramètres → variable
+ * d'environnement `FF_API_BASE_URL` → valeur par défaut. Auparavant l'URL était
+ * figée au chargement du module depuis l'environnement seul : impossible de la
+ * corriger depuis l'application quand le serveur changeait d'adresse.
+ *
+ * Le résultat est mémorisé 30 s pour ne pas relire le fichier à chaque requête.
+ */
+async function getFfApiBase(): Promise<string> {
+    if (ffApiBaseCache && Date.now() - ffApiBaseCache.at < FF_API_BASE_TTL_MS) {
+        return ffApiBaseCache.value;
+    }
+    let configured: string | undefined;
+    try {
+        const raw = await fs.readFile(CONFIG_FILE, "utf-8");
+        const parsed = JSON.parse(raw) as { ffApiBaseUrl?: string };
+        configured = parsed?.ffApiBaseUrl?.trim() || undefined;
+    } catch {
+        // Fichier absent ou illisible : on retombe sur l'environnement.
+    }
+    const value = (configured || process.env.FF_API_BASE_URL || FF_API_BASE_DEFAULT).replace(/\/+$/, "");
+    ffApiBaseCache = { value, at: Date.now() };
+    return value;
+}
+
+/** Vide le cache — appelé après un enregistrement dans Paramètres. */
+export function resetFfApiBaseCache(): void {
+    ffApiBaseCache = null;
+}
 
 // ---------------------------------------------------------------------------
 // Types API (shapes des réponses brutes)
@@ -65,9 +104,62 @@ export interface FfCommande {
     qtecde: number;
 }
 
+export interface FfSyncTable {
+    nom: string;
+    derniereSync: string;
+    nbLignes?: number;
+    /** "ok" ou état d'erreur renvoyé par la synchronisation. */
+    statut?: string;
+    erreur?: string | null;
+}
+
 export interface FfSyncStatus {
     lastSync: string;
-    tables: { nom: string; derniereSync: string; nbLignes?: number }[];
+    tables: FfSyncTable[];
+}
+
+/**
+ * Normalise la réponse de `/api/sync/status`.
+ *
+ * L'API renvoie `{ sync: [{ table_name, last_sync, rows_synced, status, error_msg }] }`,
+ * alors que l'application attendait `{ lastSync, tables: [{ nom, derniereSync, nbLignes }] }`.
+ * Les champs lus n'existaient donc pas : le panneau des Paramètres affichait une
+ * coquille vide sans la moindre erreur, puisque la requête HTTP réussissait.
+ *
+ * Les deux formes sont acceptées ici, pour rester compatible si l'API évolue.
+ */
+export function normalizeSyncStatus(raw: unknown): FfSyncStatus | null {
+    if (!raw || typeof raw !== "object") return null;
+    const d = raw as Record<string, unknown>;
+
+    // Forme déjà attendue par l'application.
+    if (Array.isArray(d.tables)) {
+        return {
+            lastSync: String(d.lastSync ?? ""),
+            tables: d.tables as FfSyncTable[],
+        };
+    }
+
+    // Forme réelle de l'API FF Nancy.
+    const sync = Array.isArray(d.sync) ? (d.sync as Array<Record<string, unknown>>) : null;
+    if (!sync) return null;
+
+    const tables: FfSyncTable[] = sync.map((t) => ({
+        nom: String(t.table_name ?? t.nom ?? "—"),
+        derniereSync: String(t.last_sync ?? t.derniereSync ?? ""),
+        nbLignes: Number(t.rows_synced ?? t.nbLignes ?? 0) || 0,
+        statut: t.status != null ? String(t.status) : undefined,
+        erreur: t.error_msg != null ? String(t.error_msg) : null,
+    }));
+
+    // Pas de date globale dans la réponse : on prend la plus récente des tables.
+    const lastSync = tables
+        .map((t) => t.derniereSync)
+        .filter(Boolean)
+        .sort()
+        .at(-1) ?? "";
+
+    return { lastSync, tables };
 }
 
 /** Stock agrégé sur tous les sites pour un codein */
@@ -212,6 +304,7 @@ function extractFouNom(f: any): string {
 export async function getFournisseursFromApi(
     search?: string
 ): Promise<{ code: string; nom: string }[]> {
+    const FF_API_BASE = await getFfApiBase();
     try {
         const url = search
             ? `${FF_API_BASE}/api/fournisseurs?search=${encodeURIComponent(search)}&limit=500`
@@ -242,6 +335,7 @@ export async function getFournisseursFromApi(
 export async function getArticlesByFournisseur(
     codefou: string
 ): Promise<FfArticle[]> {
+    const FF_API_BASE = await getFfApiBase();
     const raw = await fetchAllPages<unknown>(
         (page) => `${FF_API_BASE}/api/articles?codefou=${encodeURIComponent(codefou)}&page=${page}&limit=500`,
         extractList,
@@ -272,6 +366,7 @@ export async function getMouvementsByFournisseur(
     dateDebut: string,
     dateFin: string
 ): Promise<FfMouvement[]> {
+    const FF_API_BASE = await getFfApiBase();
     const raw = await fetchAllPages<unknown>(
         (page) =>
             `${FF_API_BASE}/api/mouvements/articles?codefou=${encodeURIComponent(codefou)}&dateDebut=${dateDebut}&dateFin=${dateFin}&page=${page}&limit=1000`,
@@ -301,6 +396,7 @@ export async function getMouvementsForDate(
     dateDebut: string,
     dateFin: string
 ): Promise<FfMouvement[]> {
+    const FF_API_BASE = await getFfApiBase();
     const raw = await fetchAllPages<unknown>(
         (page) =>
             `${FF_API_BASE}/api/mouvements/articles?dateDebut=${dateDebut}&dateFin=${dateFin}&page=${page}&limit=1000`,
@@ -362,6 +458,7 @@ export async function getMensuelByArticles(
     batchSize = 50
 ): Promise<Map<string, FfMensuelEntry[]>> {
     const result = new Map<string, FfMensuelEntry[]>();
+    const FF_API_BASE = await getFfApiBase();
 
     for (let i = 0; i < articles.length; i += batchSize) {
         const batch = articles.slice(i, i + batchSize);
@@ -448,6 +545,7 @@ export async function getReferentielByArticles(
     batchSize = 50
 ): Promise<Map<string, FfReferentiel>> {
     const result = new Map<string, FfReferentiel>();
+    const FF_API_BASE = await getFfApiBase();
 
     for (let i = 0; i < articles.length; i += batchSize) {
         const batch = articles.slice(i, i + batchSize);
@@ -479,6 +577,7 @@ export async function getCommandesByFournisseur(
     codefou: string
 ): Promise<Map<string, number>> {
     const result = new Map<string, number>();
+    const FF_API_BASE = await getFfApiBase();
     try {
         const res = await fetch(
             `${FF_API_BASE}/api/commandes/articles?codefou=${encodeURIComponent(codefou)}`,
@@ -502,9 +601,10 @@ export async function getCommandesByFournisseur(
 
 export async function getSyncStatus(): Promise<FfSyncStatus | null> {
     try {
+    const FF_API_BASE = await getFfApiBase();
         const res = await fetch(`${FF_API_BASE}/api/sync/status`, { cache: "no-store" });
         if (!res.ok) return null;
-        return await res.json();
+        return normalizeSyncStatus(await res.json());
     } catch (err) {
         console.error("[api-ff] getSyncStatus error:", err);
         return null;

src/lib/api-response.ts

@@ -0,0 +1,72 @@
+/**
+ * CollectFlow — Enveloppe de réponse de l'API publique `/api/v1`.
+ *
+ * Une forme unique pour tout : `{ data, pagination?, meta }` en succès,
+ * `{ error: { code, message } }` en échec, avec de vrais statuts HTTP.
+ * Les consommateurs (scripts, IA, outils externes) peuvent ainsi traiter
+ * toutes les réponses de la même manière.
+ */
+
+import { NextResponse } from "next/server";
+
+export type ApiErrorCode =
+    | "unauthorized"
+    | "forbidden"
+    | "bad_request"
+    | "not_found"
+    | "not_ready"
+    | "internal_error";
+
+const STATUS_BY_CODE: Record<ApiErrorCode, number> = {
+    unauthorized: 401,
+    forbidden: 403,
+    bad_request: 400,
+    not_found: 404,
+    not_ready: 202,
+    internal_error: 500,
+};
+
+export interface Pagination {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+    /** `true` s'il reste des pages à lire — évite d'avoir à comparer page et totalPages. */
+    hasMore: boolean;
+}
+
+export function buildPagination(page: number, limit: number, total: number): Pagination {
+    const totalPages = Math.max(1, Math.ceil(total / limit));
+    // `hasMore` explicite : un agent qui doit comparer page et totalPages oublie
+    // souvent de le faire et conclut à tort qu'il a tout récupéré.
+    return { page, limit, total, totalPages, hasMore: page < totalPages };
+}
+
+/** Réponse de succès. `meta` porte la fraîcheur de la donnée (`computedAt`). */
+export function ok<T>(
+    data: T,
+    opts: { pagination?: Pagination; meta?: Record<string, unknown> } = {},
+): NextResponse {
+    return NextResponse.json({
+        data,
+        ...(opts.pagination ? { pagination: opts.pagination } : {}),
+        meta: { ...(opts.meta ?? {}) },
+    });
+}
+
+/**
+ * Réponse d'erreur. `details` sert notamment aux erreurs de validation zod.
+ *
+ * Note : `not_ready` renvoie un 202 — ce n'est pas un échec mais une donnée pas
+ * encore calculée (voir /api/v1/grid sur un fournisseur jamais ouvert).
+ */
+export function fail(
+    code: ApiErrorCode,
+    message: string,
+    details?: unknown,
+): NextResponse {
+    return NextResponse.json(
+        { error: { code, message, ...(details !== undefined ? { details } : {}) } },
+        { status: STATUS_BY_CODE[code] },
+    );
+}

src/lib/api-schemas.ts

@@ -0,0 +1,143 @@
+/**
+ * CollectFlow — Validation des paramètres de l'API `/api/v1` (zod).
+ *
+ * Toute entrée utilisateur passe par ici : bornes de pagination, listes blanches
+ * de tri, projection de champs. Les erreurs remontent en `400 bad_request` avec
+ * le détail zod, pour que l'appelant sache quoi corriger.
+ */
+
+import { z } from "zod";
+import { GRID_SORT_KEYS, type GridSortKey } from "@/lib/grid-store";
+
+const SORT_KEYS = GRID_SORT_KEYS as readonly string[];
+
+export const paginationShape = {
+    page: z.coerce.number().int().min(1).default(1),
+    /**
+     * Aucun plafond : l'appelant décide de la taille qu'il veut recevoir.
+     * Le défaut reste modeste (100) pour que les endpoints de recherche, non
+     * bornés par un fournisseur, ne renvoient pas tout le catalogue par accident.
+     * `/grid` redéfinit ce paramètre : sans `limit`, il renvoie tout.
+     */
+    limit: z.coerce.number().int().min(1).default(100),
+};
+
+const sortShape = {
+    sort: z
+        .string()
+        .refine((v) => SORT_KEYS.includes(v), {
+            message: `Tri inconnu. Valeurs acceptées : ${SORT_KEYS.join(", ")}`,
+        })
+        .optional(),
+    order: z.enum(["asc", "desc"]).default("desc"),
+    /** Liste de champs de ProductRow à conserver, séparés par des virgules. */
+    fields: z.string().optional(),
+    /**
+     * `1` (défaut) : relit les métriques réseau Qlik et la gamme serveur au moment
+     * de l'appel. `0` : sert l'instantané brut, un peu plus rapide.
+     */
+    enrich: z.enum(["0", "1"]).default("1"),
+};
+
+/** `/api/v1/grid` — le fournisseur est obligatoire (recherche transversale : /products/search). */
+export const gridQuerySchema = z.object({
+    fournisseur: z.string().min(1, "Paramètre 'fournisseur' requis"),
+    gamme: z.string().min(1).optional(),
+    code1: z.string().min(1).optional(),
+    code2: z.string().min(1).optional(),
+    code3: z.string().min(1).optional(),
+    /**
+     * Préfixe de nomenclature (« 32 », « 3202 », « 320211 »), tel que renvoyé par
+     * /api/v1/nomenclatures. À préférer à code1/code2, qui peuvent être vides
+     * quand la hiérarchie n'a pas pu être remontée depuis la base FF.
+     */
+    nomenclature: z.string().min(1).max(20).regex(/^[0-9]+$/, "La nomenclature doit être un préfixe numérique (ex. 32, 3202, 320211)").optional(),
+    search: z.string().min(1).optional(),
+    /**
+     * `1` (défaut) : si le fournisseur n'a pas encore d'instantané, l'API le calcule
+     * à la demande au lieu de répondre `not_ready`. C'est ce qui permet à une app ou
+     * à un agent externe d'interroger n'importe quel fournisseur sans qu'un humain
+     * ait ouvert la Grille avant. Le premier appel est alors plus lent (plusieurs
+     * secondes) ; les suivants sont servis depuis l'instantané.
+     * `0` : comportement strict, échoue vite en `not_ready`.
+     */
+    compute: z.enum(["0", "1"]).default("1"),
+    ...sortShape,
+    ...paginationShape,
+    /**
+     * **Aucun plafond, et aucune valeur par défaut** : sans `limit`, `/grid`
+     * renvoie *toutes* les lignes du fournisseur.
+     *
+     * C'est l'objectif de cet endpoint — qu'une app ou un agent récupère un
+     * fournisseur entier en un appel. Paginer par défaut condamnait l'appelant à
+     * boucler, ce que les agents font mal : ils s'arrêtent à la première page et
+     * raisonnent sur un catalogue tronqué.
+     *
+     * Réponse volumineuse : une ligne complète porte les séries mensuelles et les
+     * ventilations par magasin. Combiner avec `fields` est vivement conseillé.
+     */
+    limit: z.coerce.number().int().min(1).optional(),
+});
+
+/** `/api/v1/products/search` — `fournisseur` facultatif : c'est la recherche transversale. */
+export const productSearchSchema = z.object({
+    q: z.string().min(1, "Paramètre 'q' requis").max(120),
+    fournisseur: z.string().min(1).optional(),
+    gamme: z.string().min(1).optional(),
+    ...sortShape,
+    ...paginationShape,
+});
+
+export const fournisseursQuerySchema = z.object({
+    search: z.string().min(1).optional(),
+    /** true = uniquement les fournisseurs déjà présents dans l'instantané de grille. */
+    withData: z.enum(["0", "1"]).optional(),
+});
+
+/** `/api/v1/nomenclatures` — inventaire des postes d'un fournisseur. */
+export const nomenclaturesQuerySchema = z.object({
+    fournisseur: z.string().min(1, "Paramètre 'fournisseur' requis"),
+    /**
+     * 1 = univers, 2 = famille, 3 = sous-famille (selon la nomenclature FF).
+     * Le `transform` ne fait que redonner le type littéral : les bornes ont déjà
+     * été validées juste avant, la valeur ne peut être que 1, 2 ou 3.
+     */
+    niveau: z.coerce.number().int().min(1).max(3).default(1).transform((n) => n as 1 | 2 | 3),
+    /** Restreint à un poste parent : un code1 pour niveau=2, un code2 pour niveau=3. */
+    parent: z.string().min(1).optional(),
+});
+
+export const productDetailSchema = z.object({
+    fournisseur: z.string().min(1).optional(),
+    /**
+     * `1` (défaut) : calcule l'instantané à la demande si le produit n'y figure pas
+     * encore. Nécessite `fournisseur`, le calcul se faisant par lot fournisseur.
+     */
+    compute: z.enum(["0", "1"]).default("1"),
+});
+
+/**
+ * Projection de champs : `?fields=codein,libelle1,totalCa`.
+ *
+ * Sert à alléger la réponse — un `ProductRow` complet porte les séries mensuelles
+ * et les ventilations par magasin, ce qui est volumineux sur plusieurs centaines de
+ * lignes. `codein` est toujours conservé pour que la ligne reste identifiable.
+ */
+export function pickFields<T extends object>(row: T, fields?: string): Partial<T> {
+    if (!fields) return row;
+    const wanted = new Set(
+        fields.split(",").map((f) => f.trim()).filter(Boolean),
+    );
+    if (wanted.size === 0) return row;
+    wanted.add("codein");
+    const out: Record<string, unknown> = {};
+    for (const key of wanted) {
+        if (key in row) out[key] = (row as unknown as Record<string, unknown>)[key];
+    }
+    return out as Partial<T>;
+}
+
+/** Normalise le tri validé vers la clé attendue par grid-store. */
+export function toSortKey(sort?: string): GridSortKey | undefined {
+    return sort as GridSortKey | undefined;
+}

src/lib/grid-store.ts

@@ -0,0 +1,361 @@
+/**
+ * CollectFlow — Instantané persisté de la grille (table `grid_rows`).
+ *
+ * `getProductRows()` reconstruit la grille en direct (6 requêtes SQL sur la base
+ * miroir FF + jointure Qlik) et ne la garde qu'en mémoire 10 minutes. L'API `/api/v1`
+ * ne doit **jamais** déclencher ce calcul : elle lit cette table, remplie en effet de
+ * bord quand quelqu'un ouvre la Grille.
+ *
+ * On n'introduit donc aucun calcul supplémentaire — on arrête de jeter un résultat
+ * qui existe déjà, et il survit désormais aux redémarrages.
+ */
+
+import "server-only";
+
+import { db } from "@/db";
+import { gridRows } from "@/db/schema";
+import { and, asc, desc, eq, ilike, or, sql, lt, type SQL } from "drizzle-orm";
+import type { ProductRow } from "@/types/grid";
+
+/** Colonnes autorisées au tri — liste blanche, jamais l'entrée utilisateur brute. */
+const SORTABLE = {
+    libelle1: gridRows.libelle1,
+    codein: gridRows.codein,
+    codeFournisseur: gridRows.codeFournisseur,
+    codeGamme: gridRows.codeGamme,
+    totalCa: gridRows.totalCa,
+    totalQuantite: gridRows.totalQuantite,
+    totalMarge: gridRows.totalMarge,
+    tauxMarge: gridRows.tauxMarge,
+    stockActuel: gridRows.stockActuel,
+    caReseau: gridRows.caReseau,
+    qteReseau: gridRows.qteReseau,
+    nbMagasinsReseau: gridRows.nbMagasinsReseau,
+    caParMagasinReseau: gridRows.caParMagasinReseau,
+    computedAt: gridRows.computedAt,
+} as const;
+
+export type GridSortKey = keyof typeof SORTABLE;
+export const GRID_SORT_KEYS = Object.keys(SORTABLE) as GridSortKey[];
+
+export interface GridQuery {
+    codeFournisseur?: string;
+    gamme?: string;
+    code1?: string;
+    code2?: string;
+    code3?: string;
+    /** Préfixe de nomenclature (« 32 », « 3202 », « 320211 ») — filtre sur code3. */
+    nomenclature?: string;
+    /** Recherche libre : libellé, codein, GTIN, référence, code centrale. */
+    search?: string;
+    sort?: GridSortKey;
+    order?: "asc" | "desc";
+    page?: number;
+    limit?: number;
+}
+
+export interface GridQueryResult {
+    rows: ProductRow[];
+    total: number;
+    /** Calcul le plus ancien parmi les lignes renvoyées — fraîcheur de la donnée. */
+    computedAt: string | null;
+}
+
+/**
+ * Persiste les lignes calculées pour un fournisseur.
+ *
+ * Stratégie : toutes les lignes du lot portent le même `computedAt`, puis on supprime
+ * celles du fournisseur restées sur un `computedAt` antérieur. Cela purge les articles
+ * disparus du catalogue sans avoir à passer des centaines de codein en paramètres.
+ */
+export async function upsertGridRows(codeFournisseur: string, rows: ProductRow[]): Promise<number> {
+    if (!codeFournisseur || rows.length === 0) return 0;
+    const computedAt = new Date();
+
+    const values = rows
+        .filter((r) => r.codein)
+        .map((r) => ({
+            codeFournisseur,
+            codein: r.codein,
+            nomFournisseur: r.nomFournisseur ?? null,
+            libelle1: r.libelle1 ?? null,
+            gtin: r.gtin ?? null,
+            reference: r.reference ?? null,
+            codeCentrale: r.codeCentrale ?? null,
+            code1: r.code1 ?? null,
+            code2: r.code2 ?? null,
+            code3: r.code3 ?? null,
+            codeGamme: r.codeGamme ?? null,
+            codeGammeInit: r.codeGammeInit ?? null,
+            totalCa: r.totalCa != null ? String(r.totalCa) : null,
+            totalQuantite: r.totalQuantite != null ? String(r.totalQuantite) : null,
+            totalMarge: r.totalMarge != null ? String(r.totalMarge) : null,
+            tauxMarge: r.tauxMarge != null ? String(r.tauxMarge) : null,
+            stockActuel: r.stockActuel != null ? String(r.stockActuel) : null,
+            caReseau: r.caReseau != null ? String(r.caReseau) : null,
+            qteReseau: r.qteReseau != null ? String(r.qteReseau) : null,
+            nbMagasinsReseau: r.nbMagasinsReseau ?? null,
+            caParMagasinReseau: r.caParMagasinReseau != null ? String(r.caParMagasinReseau) : null,
+            margePctReseau: r.margePctReseau != null ? String(r.margePctReseau) : null,
+            payload: r,
+            computedAt,
+        }));
+    if (values.length === 0) return 0;
+
+    const CHUNK = 200; // payload jsonb volumineux : lots plus petits que pour des scalaires
+    let written = 0;
+    for (let i = 0; i < values.length; i += CHUNK) {
+        const batch = values.slice(i, i + CHUNK);
+        await db
+            .insert(gridRows)
+            .values(batch)
+            .onConflictDoUpdate({
+                target: [gridRows.codeFournisseur, gridRows.codein],
+                set: {
+                    nomFournisseur: sql`excluded.nom_fournisseur`,
+                    libelle1: sql`excluded.libelle1`,
+                    gtin: sql`excluded.gtin`,
+                    reference: sql`excluded.reference`,
+                    codeCentrale: sql`excluded.code_centrale`,
+                    code1: sql`excluded.code1`,
+                    code2: sql`excluded.code2`,
+                    code3: sql`excluded.code3`,
+                    codeGamme: sql`excluded.code_gamme`,
+                    codeGammeInit: sql`excluded.code_gamme_init`,
+                    totalCa: sql`excluded.total_ca`,
+                    totalQuantite: sql`excluded.total_quantite`,
+                    totalMarge: sql`excluded.total_marge`,
+                    tauxMarge: sql`excluded.taux_marge`,
+                    stockActuel: sql`excluded.stock_actuel`,
+                    caReseau: sql`excluded.ca_reseau`,
+                    qteReseau: sql`excluded.qte_reseau`,
+                    nbMagasinsReseau: sql`excluded.nb_magasins_reseau`,
+                    caParMagasinReseau: sql`excluded.ca_par_magasin_reseau`,
+                    margePctReseau: sql`excluded.marge_pct_reseau`,
+                    payload: sql`excluded.payload`,
+                    computedAt: sql`excluded.computed_at`,
+                },
+            });
+        written += batch.length;
+    }
+
+    // Purge des articles qui ne font plus partie du catalogue du fournisseur.
+    await db.delete(gridRows).where(
+        and(eq(gridRows.codeFournisseur, codeFournisseur), lt(gridRows.computedAt, computedAt)),
+    );
+
+    return written;
+}
+
+/** Construit la clause WHERE commune à la grille et à la recherche transversale. */
+function buildWhere(q: GridQuery): SQL | undefined {
+    const clauses: SQL[] = [];
+    if (q.codeFournisseur) clauses.push(eq(gridRows.codeFournisseur, q.codeFournisseur));
+    if (q.gamme) clauses.push(eq(gridRows.codeGamme, q.gamme));
+    if (q.code1) clauses.push(eq(gridRows.code1, q.code1));
+    if (q.code2) clauses.push(eq(gridRows.code2, q.code2));
+    if (q.code3) clauses.push(eq(gridRows.code3, q.code3));
+    // Filtre par **préfixe** de nomenclature : « 32 », « 3202 » ou « 320211 ».
+    // C'est celui à utiliser avec /api/v1/nomenclatures, car il ne dépend pas de
+    // code1/code2 — parfois vides quand la hiérarchie n'a pas pu être remontée.
+    if (q.nomenclature) clauses.push(sql`${gridRows.code3} like ${q.nomenclature + "%"}`);
+    const search = q.search?.trim();
+    if (search) {
+        const pattern = `%${search}%`;
+        const alt = or(
+            ilike(gridRows.libelle1, pattern),
+            ilike(gridRows.codein, pattern),
+            ilike(gridRows.gtin, pattern),
+            ilike(gridRows.reference, pattern),
+            ilike(gridRows.codeCentrale, pattern),
+        );
+        if (alt) clauses.push(alt);
+    }
+    return clauses.length ? and(...clauses) : undefined;
+}
+
+/**
+ * Lit les lignes de grille persistées : filtre, tri et pagination faits en SQL.
+ * Ne déclenche aucun recalcul et ne contacte jamais Qlik.
+ */
+export async function queryGridRows(q: GridQuery): Promise<GridQueryResult> {
+    const page = Math.max(1, q.page ?? 1);
+    // `limit` absent = aucune limite : on renvoie toutes les lignes du filtre.
+    // Il y avait ici un Math.min(500, …) qui re-plafonnait en silence, quelle que
+    // soit la valeur demandée — la réponse était tronquée sans que rien ne le dise.
+    const limit = q.limit != null ? Math.max(1, q.limit) : null;
+    const where = buildWhere(q);
+
+    const sortCol = SORTABLE[q.sort ?? "totalCa"] ?? gridRows.totalCa;
+    // NULLS LAST dans les deux sens : un produit sans CA ne doit jamais occuper la tête.
+    const orderBy = q.order === "asc" ? asc(sortCol) : desc(sortCol);
+
+    const [countRow] = await db
+        .select({ total: sql<number>`count(*)::int` })
+        .from(gridRows)
+        .where(where);
+
+    const selection = db
+        .select({ payload: gridRows.payload, computedAt: gridRows.computedAt })
+        .from(gridRows)
+        .where(where)
+        .orderBy(orderBy, asc(gridRows.codein));
+
+    const found = limit != null
+        ? await selection.limit(limit).offset((page - 1) * limit)
+        : await selection;
+
+    let oldest: Date | null = null;
+    for (const r of found) {
+        if (r.computedAt && (!oldest || r.computedAt < oldest)) oldest = r.computedAt;
+    }
+
+    return {
+        rows: found.map((r) => r.payload as ProductRow),
+        total: countRow?.total ?? 0,
+        computedAt: oldest ? oldest.toISOString() : null,
+    };
+}
+
+/** Fiche complète d'un produit. `codeFournisseur` lève l'ambiguïté d'un article multi-fournisseurs. */
+export async function getGridRowByCodein(
+    codein: string,
+    codeFournisseur?: string,
+): Promise<{ row: ProductRow; computedAt: string | null } | null> {
+    const clauses: SQL[] = [eq(gridRows.codein, codein)];
+    if (codeFournisseur) clauses.push(eq(gridRows.codeFournisseur, codeFournisseur));
+
+    const [found] = await db
+        .select({ payload: gridRows.payload, computedAt: gridRows.computedAt })
+        .from(gridRows)
+        .where(and(...clauses))
+        .orderBy(desc(gridRows.computedAt))
+        .limit(1);
+
+    if (!found) return null;
+    return {
+        row: found.payload as ProductRow,
+        computedAt: found.computedAt ? found.computedAt.toISOString() : null,
+    };
+}
+
+/**
+ * Indique si un fournisseur a déjà été calculé au moins une fois.
+ * Sert à répondre `202 not_ready` plutôt que de déclencher un calcul long.
+ */
+export async function getGridFreshness(
+    codeFournisseur: string,
+): Promise<{ rowCount: number; computedAt: string | null } | null> {
+    const [found] = await db
+        .select({
+            rowCount: sql<number>`count(*)::int`,
+            computedAt: sql<Date | null>`max(${gridRows.computedAt})`,
+        })
+        .from(gridRows)
+        .where(eq(gridRows.codeFournisseur, codeFournisseur));
+
+    if (!found || found.rowCount === 0) return null;
+    return {
+        rowCount: found.rowCount,
+        computedAt: found.computedAt ? new Date(found.computedAt).toISOString() : null,
+    };
+}
+
+/** Fournisseurs présents dans l'instantané, avec leur fraîcheur. */
+export async function listGridSuppliers(): Promise<
+    Array<{ codeFournisseur: string; nomFournisseur: string | null; rowCount: number; computedAt: string | null }>
+> {
+    const found = await db
+        .select({
+            codeFournisseur: gridRows.codeFournisseur,
+            nomFournisseur: sql<string | null>`max(${gridRows.nomFournisseur})`,
+            rowCount: sql<number>`count(*)::int`,
+            computedAt: sql<Date | null>`max(${gridRows.computedAt})`,
+        })
+        .from(gridRows)
+        .groupBy(gridRows.codeFournisseur)
+        .orderBy(asc(gridRows.codeFournisseur));
+
+    return found.map((r) => ({
+        codeFournisseur: r.codeFournisseur,
+        nomFournisseur: r.nomFournisseur,
+        rowCount: r.rowCount,
+        computedAt: r.computedAt ? new Date(r.computedAt).toISOString() : null,
+    }));
+}
+
+// ---------------------------------------------------------------------------
+// Inventaire des nomenclatures d'un fournisseur
+// ---------------------------------------------------------------------------
+
+/** Un poste de nomenclature, avec son poids — de quoi décider par où découper. */
+export interface GridNomenclature {
+    code: string;
+    /** Libellé du poste, lu dans le payload (il n'a pas de colonne dédiée). */
+    libelle: string | null;
+    nbArticles: number;
+    totalCa: number;
+    totalQuantite: number;
+}
+
+/** Longueur du code pour chaque niveau : « 32 » → « 3202 » → « 320211 ». */
+export const NOMENCLATURE_LONGUEURS: Record<1 | 2 | 3, number> = { 1: 2, 2: 4, 3: 6 };
+
+/**
+ * Répartition des articles d'un fournisseur par niveau de nomenclature.
+ *
+ * Sans cela, un appelant qui veut découper un gros fournisseur par nomenclature
+ * est coincé : le filtre existe sur `/grid`, mais rien ne lui dit **quelles**
+ * valeurs existent — il devrait tout télécharger pour les découvrir, ce qui
+ * annule le bénéfice du découpage.
+ *
+ * Les niveaux sont dérivés par **préfixe de `code3`** (codes hiérarchiques à 6
+ * chiffres, de 31xxxx à 40xxxx), et non des colonnes `code1`/`code2`. Celles-ci
+ * ne sont renseignées que si `pgGetNomenclatureByFournisseur` a su remonter la
+ * hiérarchie, ce qui dépend d'une détection heuristique de la colonne parent de
+ * la table `nomenclature` ; quand elle échoue, seul `code3` est rempli. Le
+ * préfixe, lui, est toujours disponible.
+ *
+ * Tout est agrégé en SQL : la réponse fait quelques dizaines de lignes, même pour
+ * un fournisseur de 130 000 articles.
+ */
+export async function listGridNomenclatures(
+    codeFournisseur: string,
+    niveau: 1 | 2 | 3,
+    parent?: string,
+): Promise<GridNomenclature[]> {
+    const longueur = NOMENCLATURE_LONGUEURS[niveau];
+    const codeExpr = sql<string>`left(${gridRows.code3}, ${longueur})`;
+    // Les libellés n'ont pas de colonne dédiée : on les lit dans le payload.
+    // Aux niveaux 1 et 2 ils peuvent être absents (même cause que ci-dessus) ;
+    // le code et les compteurs, eux, restent justes.
+    const libelleKey = niveau === 1 ? "libelleNiveau1" : niveau === 2 ? "libelleNiveau2" : "libelle3";
+
+    const clauses: SQL[] = [
+        eq(gridRows.codeFournisseur, codeFournisseur),
+        sql`${gridRows.code3} is not null and length(${gridRows.code3}) >= ${longueur}`,
+    ];
+    // `parent` est lui aussi un préfixe : « 32 » pour descendre au niveau 2.
+    if (parent) clauses.push(sql`${gridRows.code3} like ${parent + "%"}`);
+
+    const rows = await db
+        .select({
+            code: codeExpr,
+            libelle: sql<string | null>`max(${gridRows.payload} ->> ${libelleKey})`,
+            nbArticles: sql<number>`count(*)::int`,
+            totalCa: sql<number>`coalesce(sum(${gridRows.totalCa}), 0)::float`,
+            totalQuantite: sql<number>`coalesce(sum(${gridRows.totalQuantite}), 0)::float`,
+        })
+        .from(gridRows)
+        .where(and(...clauses))
+        .groupBy(codeExpr)
+        .orderBy(desc(sql`coalesce(sum(${gridRows.totalCa}), 0)`));
+
+    return rows.map((r) => ({
+        code: String(r.code ?? ""),
+        libelle: r.libelle ?? null,
+        nbArticles: Number(r.nbArticles) || 0,
+        totalCa: Number(r.totalCa) || 0,
+        totalQuantite: Number(r.totalQuantite) || 0,
+    }));
+}

src/lib/pg-ff-client.ts

@@ -72,6 +72,8 @@ export interface PgStockRow {
     qte: number;
     valstock: number;
     prmp: number;
+    /** Prix de vente du site — cube_stock.pv, filet de secours si cube_pv est vide. */
+    pv?: number;
     dernierevente?: string;
     dernierereception?: string;
 }
@@ -157,6 +159,55 @@ export async function pgGetArticlesByFournisseur(codefou: string): Promise<PgArt
     return (result.rows as unknown as PgArticle[]).filter(r => r.codein);
 }
 
+/** Article local (FF Nancy) résolu depuis un code centrale — page Recherche réseau. */
+export interface PgArticleLocal {
+    codein: string;
+    codeCentrale: string;
+    libelle1?: string;
+    codefou?: string;
+    nomfou?: string;
+    pa?: number;
+    pv_central?: number;
+}
+
+/**
+ * Résout des codes centraux vers NOS articles locaux.
+ *
+ * Sert à distinguer, dans les résultats de recherche Qlik, les produits que nous
+ * référençons (« Chez moi ») de ceux qui n'existent que dans le réseau. Un code
+ * absent de la Map = produit inconnu de FF Nancy.
+ */
+export async function pgGetArticlesByCodeCentrale(codes: string[]): Promise<Map<string, PgArticleLocal>> {
+    const unique = [...new Set(codes.map(c => String(c ?? "").trim()).filter(Boolean))];
+    if (unique.length === 0) return new Map();
+
+    const result = await pgNoParallel(sql`
+        SELECT DISTINCT ON (a.artcentrale)
+            TRIM(a.codein::text) AS codein,
+            a.artcentrale        AS "codeCentrale",
+            a.libelle1,
+            af.code              AS codefou,
+            fi.nom               AS nomfou,
+            pa.pa,
+            ai.prix_vente_mini   AS pv_central
+        FROM articles a
+        LEFT JOIN artfou1 af ON af.art_no_id = a.no_id
+        LEFT JOIN fouident fi ON fi.code = af.code
+        LEFT JOIN cube_pa pa ON pa.artnoid = a.no_id
+        LEFT JOIN article_infosup ai ON ai.artnoid = a.no_id
+        WHERE TRIM(a.artcentrale::text) IN (${sql.join(unique.map(c => sql`${c}`), sql`, `)})
+          AND a.codein IS NOT NULL
+        ORDER BY a.artcentrale, af.no_id
+    `);
+
+    const map = new Map<string, PgArticleLocal>();
+    for (const r of result.rows as unknown as PgArticleLocal[]) {
+        if (r.codeCentrale) map.set(String(r.codeCentrale).trim(), r);
+    }
+    console.log(`[pg-ff] pgGetArticlesByCodeCentrale: ${map.size}/${unique.length} codes connus localement`);
+    return map;
+}
+
 // ---------------------------------------------------------------------------
 // 2. Données mensuelles (ventes + stock + réceptions)
 // ---------------------------------------------------------------------------
@@ -253,6 +304,46 @@ export async function pgGetGammesByFournisseur(codefou: string): Promise<Map<str
     return map;
 }
 
+/**
+ * Gammes **serveur** pour une liste de codein, tous fournisseurs confondus.
+ *
+ * Variante de `pgGetGammesByFournisseur` sans la jointure `artfou1` : la recherche
+ * de l'API `/api/v1` est transversale, on ne connaît donc pas le fournisseur.
+ * C'est la gamme telle qu'elle existe en base — non modifiée, indépendante des
+ * snapshots de session qui peuvent surcharger `codeGamme` dans la Grille.
+ */
+export async function pgGetGammesByCodeins(codeins: string[]): Promise<Map<string, string>> {
+    const unique = [...new Set(codeins.map(c => String(c ?? "").trim()).filter(Boolean))];
+    if (unique.length === 0) return new Map();
+
+    // Découpage obligatoire : chaque codein devient un paramètre lié, or PostgreSQL
+    // en accepte 65535 au maximum. Un gros fournisseur dépasse 130 000 articles —
+    // la requête échouait alors purement et simplement.
+    const CHUNK = 2000;
+    const map = new Map<string, string>();
+
+    for (let i = 0; i < unique.length; i += CHUNK) {
+        const batch = unique.slice(i, i + CHUNK);
+        // DISTINCT ON (codein) → 1 gamme par article, saison la plus récente en premier.
+        const result = await pgNoParallel(sql`
+            SELECT DISTINCT ON (a.codein)
+                TRIM(a.codein::text) AS codein,
+                g.code AS gamme_code
+            FROM art_gamme_saison ags
+            JOIN articles a ON a.no_id = ags.artnoid
+            JOIN gammes g   ON g.no_id = ags.idgamme
+            JOIN saisons s  ON s.no_id = ags.idsaison
+            WHERE TRIM(a.codein::text) IN (${sql.join(batch.map(c => sql`${c}`), sql`, `)})
+            ORDER BY a.codein, s.no_id DESC
+        `);
+        for (const row of result.rows as unknown as { codein: string; gamme_code: string }[]) {
+            if (row.codein && row.gamme_code) map.set(row.codein, String(row.gamme_code).trim());
+        }
+    }
+    console.log(`[pg-ff] pgGetGammesByCodeins: ${map.size}/${unique.length} articles avec gamme`);
+    return map;
+}
+
 // ---------------------------------------------------------------------------
 // 4. Nomenclature (famille / sous-famille)
 // ---------------------------------------------------------------------------
@@ -359,14 +450,17 @@ function buildNomMap(rows: PgNomRow[]): Map<string, PgNomRow> {
  * 1 requête SQL — remplace la partie stock du référentiel.
  */
 export async function pgGetStockByFournisseur(codefou: string): Promise<Map<string, PgStockRow[]>> {
+    // `site` est élagué pour la même raison que dans pgGetPrixVenteByFournisseur :
+    // il sert de clé de recherche (derniereLivraisonByStore, prix de repli).
     const result = await pgNoParallel(sql`
         SELECT
             a.codein,
-            cs.site,
+            TRIM(cs.site::text) AS site,
             cs.stockdispo::float,
             cs.qte::float,
             cs.valstock::float,
             cs.prmp::float,
+            cs.pv::float,
             cs.dernierevente::text,
             cs.dernierereception::text
         FROM cube_stock cs
@@ -383,6 +477,46 @@ export async function pgGetStockByFournisseur(codefou: string): Promise<Map<stri
     return map;
 }
 
+/**
+ * Prix de vente par article et par site (`cube_pv`).
+ *
+ * Pendant exact de `cube_pa` pour l'achat, rafraîchi chaque nuit depuis le cube
+ * MSSQL `Cube_PV`. C'est LA source du prix de vente : `article_infosup`, seule
+ * table lue jusqu'ici pour cette information, ne porte qu'un prix plancher de
+ * paramétrage (`prix_vente_mini`) qui reste vide en pratique.
+ *
+ * Retour : codein → { site → PV }. Les prix nuls sont écartés — un article non
+ * tarifé n'est pas un article à 0 €.
+ */
+export async function pgGetPrixVenteByFournisseur(codefou: string): Promise<Map<string, Record<string, number>>> {
+    // Le site sert de CLÉ de recherche côté Grille (prixVenteByStore["292"]), d'où
+    // l'élagage : la synchronisation Apiflow écrit `cube_pv.site` brut, sans passer
+    // par le `safeStr` qu'elle applique à `cube_stock`. Une colonne MSSQL de largeur
+    // fixe remonterait complétée d'espaces, et la recherche échouerait en silence —
+    // le prix resterait visible en « tous magasins » et vide magasin par magasin.
+    const result = await pgNoParallel(sql`
+        SELECT
+            a.codein,
+            TRIM(cpv.site::text) AS site,
+            cpv.pv::float AS pv
+        FROM cube_pv cpv
+        JOIN articles a ON a.no_id = cpv.artnoid
+        JOIN (SELECT DISTINCT art_no_id FROM artfou1 WHERE code = ${codefou}) af
+            ON af.art_no_id = a.no_id
+        WHERE cpv.pv IS NOT NULL AND cpv.pv > 0
+    `);
+
+    const map = new Map<string, Record<string, number>>();
+    for (const row of result.rows as { codein: string; site: string; pv: number }[]) {
+        if (!row.codein || !row.site) continue;
+        const parSite = map.get(row.codein) ?? {};
+        parSite[String(row.site)] = Number(row.pv);
+        map.set(row.codein, parSite);
+    }
+    console.log(`[pg-ff] Prix de vente : ${map.size} articles tarifés pour ${codefou}`);
+    return map;
+}
+
 // ---------------------------------------------------------------------------
 // 6. Commandes en cours
 // ---------------------------------------------------------------------------
@@ -896,6 +1030,143 @@ export async function pgGetStockForCodeins(codeins: string[]): Promise<Map<strin
     return map;
 }
 
+// ---------------------------------------------------------------------------
+// Stock — fournisseur de la dernière entrée
+// ---------------------------------------------------------------------------
+
+/**
+ * Colonnes candidates de `mvtart` reliant un mouvement de stock à un fournisseur.
+ * `mvtart` provient d'une réplication FF : le nom exact n'est pas garanti, on le
+ * détecte une fois par process (même principe que `getNomenclatureParentCol`).
+ *  - target "artfou1" : la colonne est une FK vers `artfou1.no_id`
+ *  - target "code"    : la colonne contient directement le code fournisseur (`fouident.code`)
+ */
+const MVTART_FOU_CANDIDATES: { column: string; target: "artfou1" | "code" }[] = [
+    { column: "artfou1_no_id", target: "artfou1" },
+    { column: "artfou_no_id", target: "artfou1" },
+    { column: "afou_no_id", target: "artfou1" },
+    { column: "codefou", target: "code" },
+    { column: "code_fou", target: "code" },
+    { column: "fou_code", target: "code" },
+    { column: "fournisseur", target: "code" },
+];
+
+let _mvtartFouLink: { column: string; target: "artfou1" | "code" } | null | undefined = undefined;
+
+async function getMvtartFouLink() {
+    if (_mvtartFouLink !== undefined) return _mvtartFouLink;
+    try {
+        const meta = await db.execute(sql`
+            SELECT column_name FROM information_schema.columns
+            WHERE table_name = 'mvtart'
+        `);
+        const cols = new Set(
+            (meta.rows as { column_name: string }[]).map(r => r.column_name.toLowerCase())
+        );
+        // Le nom vient d'information_schema ET doit figurer dans la liste blanche
+        // ci-dessus : aucune valeur utilisateur n'atteint le SQL.
+        _mvtartFouLink = MVTART_FOU_CANDIDATES.find(c => cols.has(c.column)) ?? null;
+    } catch (e) {
+        console.error("[pg-ff] Détection mvtart.fournisseur impossible:", e);
+        _mvtartFouLink = null;
+    }
+    console.log("[pg-ff] mvtart → fournisseur:", _mvtartFouLink ?? "aucune colonne (repli artfou1.preference=1)");
+    return _mvtartFouLink;
+}
+
+/**
+ * Jointure latérale sur la DERNIÈRE entrée en stock (`genremvt IN (1,2)`) du
+ * couple article/site : elle expose `lastentry.datmvt` (date) et
+ * `lastentry.code` (code fournisseur, `NULL` si la base ne porte pas
+ * l'information).
+ *
+ * Règle métier : un article n'est rattaché qu'au fournisseur de sa dernière
+ * entrée. S'il est rentré en stock chez un autre fournisseur, il ne doit plus
+ * apparaître sous le précédent.
+ *
+ * La `LEFT JOIN artfou1` (et non `JOIN`) garantit qu'on retient bien la vraie
+ * dernière entrée, même si son fournisseur est inconnu.
+ */
+function lastEntryJoin(
+    link: { column: string; target: "artfou1" | "code" } | null,
+    artnoidExpr: SQL,
+    siteExpr: SQL,
+): SQL {
+    const codeExpr = link
+        ? (link.target === "artfou1" ? sql`afe.code` : sql.raw(`me.${link.column}`))
+        : sql`NULL::text`;
+    const joinArtfou = link && link.target === "artfou1"
+        ? sql`LEFT JOIN artfou1 afe ON afe.no_id = ${sql.raw(`me.${link.column}`)}`
+        : sql``;
+    return sql`
+        LEFT JOIN LATERAL (
+            SELECT me.datmvt, ${codeExpr} AS code
+            FROM mvtart me
+            ${joinArtfou}
+            WHERE me.artnoid = ${artnoidExpr}
+              AND me.site = ${siteExpr}
+              AND me.genremvt IN (1, 2)
+            ORDER BY me.datmvt DESC, me.no_id DESC
+            LIMIT 1
+        ) lastentry ON TRUE
+        ${link ? sql`LEFT JOIN fouident flast ON flast.code = lastentry.code` : sql``}
+    `;
+}
+
+/**
+ * Libellé fournisseur affiché : celui de la dernière entrée quand la base le
+ * permet, sinon repli documenté sur `artfou1.preference = 1`.
+ */
+function fournisseurExpr(link: { column: string; target: "artfou1" | "code" } | null): SQL {
+    return link
+        ? sql`COALESCE(flast.nom, lastentry.code, f.nom, af.code)`
+        : sql`COALESCE(f.nom, af.code)`;
+}
+
+/**
+ * Diagnostic (`/api/diag/stock-fournisseur`) : expose la colonne détectée, les
+ * colonnes réellement présentes sur `mvtart` et un échantillon comparant le
+ * fournisseur principal au fournisseur de la dernière entrée.
+ */
+export async function pgDiagFournisseurDerniereEntree() {
+    const link = await getMvtartFouLink();
+    const meta = await db.execute(sql`
+        SELECT column_name, data_type FROM information_schema.columns
+        WHERE table_name = 'mvtart' ORDER BY ordinal_position
+    `);
+    let echantillon: unknown[] = [];
+    if (link) {
+        const r = await pgNoParallel(sql`
+            SELECT
+                a.codein,
+                cs.site,
+                COALESCE(f.nom, af.code)              AS fournisseur_preference,
+                COALESCE(flast.nom, lastentry.code)   AS fournisseur_derniere_entree,
+                lastentry.datmvt::text                AS derniere_entree
+            FROM cube_stock cs
+            JOIN articles a ON a.no_id = cs.artnoid
+            JOIN (
+                SELECT DISTINCT ON (art_no_id) art_no_id, code
+                FROM artfou1
+                WHERE preference = 1
+                ORDER BY art_no_id, code
+            ) af ON af.art_no_id = a.no_id
+            LEFT JOIN fouident f ON f.code = af.code
+            ${lastEntryJoin(link, sql`cs.artnoid`, sql`cs.site`)}
+            WHERE cs.qte < 0
+              AND cs.site IN ('292', '579')
+            LIMIT 20
+        `);
+        echantillon = r.rows;
+    }
+    return {
+        colonneDetectee: link,
+        candidatsTestes: MVTART_FOU_CANDIDATES.map(c => c.column),
+        colonnesMvtart: meta.rows,
+        echantillon,
+    };
+}
+
 // ---------------------------------------------------------------------------
 // Stock négatif — tous magasins ou par site
 // ---------------------------------------------------------------------------
@@ -910,10 +1181,6 @@ export interface PgStockNegatifRow {
     derniereentree: string | null;
 }
 
-/**
- * Retourne tous les articles avec un stock disponible négatif.
- * Si `site` est fourni, filtre sur ce magasin uniquement.
- */
 export interface PgStockSansVenteRow {
     codein: string;
     libelle1: string;
@@ -926,22 +1193,30 @@ export interface PgStockSansVenteRow {
 /**
  * Retourne les articles ayant des entrées en stock (hors mois courant)
  * mais aucune vente enregistrée sur ce site.
+ * Les articles dont le stock actuel est nul sont exclus (rien à régulariser).
  */
 export async function pgGetStockSansVente(site?: string): Promise<PgStockSansVenteRow[]> {
+    const link = await getMvtartFouLink();
     const siteFilter = site ? sql`AND m.site = ${site}` : sql``;
     const result = await pgNoParallel(sql`
         SELECT
             a.codein,
             COALESCE(a.libelle1, '') AS libelle1,
-            COALESCE(f.nom, af.code) AS fournisseur,
+            ${fournisseurExpr(link)} AS fournisseur,
             m.site,
             COALESCE(cs.qte::float, 0) AS stock_actuel,
             MAX(m.datmvt)::text AS derniere_entree
         FROM mvtart m
         JOIN articles a ON a.no_id = m.artnoid
-        JOIN artfou1 af ON af.art_no_id = a.no_id AND af.preference = 1
+        JOIN (
+            SELECT DISTINCT ON (art_no_id) art_no_id, code
+            FROM artfou1
+            WHERE preference = 1
+            ORDER BY art_no_id, code
+        ) af ON af.art_no_id = a.no_id
         JOIN fouident f ON f.code = af.code
         LEFT JOIN cube_stock cs ON cs.artnoid = a.no_id AND cs.site = m.site
+        ${lastEntryJoin(link, sql`a.no_id`, sql`m.site`)}
         WHERE m.genremvt IN (1, 2)
           AND m.site IN ('292', '579')
           AND date_trunc('month', m.datmvt) < date_trunc('month', CURRENT_DATE)
@@ -952,29 +1227,25 @@ export async function pgGetStockSansVente(site?: string): Promise<PgStockSansVen
                 AND mv2.site = m.site
                 AND mv2.genremvt = 3
           )
-        GROUP BY a.codein, a.libelle1, f.nom, af.code, m.site, cs.qte
+        GROUP BY a.codein, a.libelle1, ${fournisseurExpr(link)}, m.site, cs.qte
+        HAVING COALESCE(cs.qte::float, 0) <> 0
         ORDER BY MAX(m.datmvt) DESC
     `);
     return result.rows as PgStockSansVenteRow[];
 }
 
 export async function pgGetStockNegatif(site?: string): Promise<PgStockNegatifRow[]> {
+    const link = await getMvtartFouLink();
     const siteFilter = site ? sql`AND cs.site = ${site}` : sql``;
     const result = await pgNoParallel(sql`
         SELECT
             a.codein,
             COALESCE(a.libelle1, '') AS libelle1,
-            COALESCE(f.nom, af.code) AS fournisseur,
+            ${fournisseurExpr(link)} AS fournisseur,
             cs.site,
             cs.qte::float AS stockdispo,
             cs.dernierevente::text,
-            (
-                SELECT MAX(m.datmvt)::text
-                FROM mvtart m
-                WHERE m.artnoid = cs.artnoid
-                  AND m.site = cs.site
-                  AND m.genremvt IN (1, 2)
-            ) AS derniereentree
+            lastentry.datmvt::text AS derniereentree
         FROM cube_stock cs
         JOIN articles a ON a.no_id = cs.artnoid
         JOIN (
@@ -984,6 +1255,7 @@ export async function pgGetStockNegatif(site?: string): Promise<PgStockNegatifRo
             ORDER BY art_no_id, code
         ) af ON af.art_no_id = a.no_id
         JOIN fouident f ON f.code = af.code
+        ${lastEntryJoin(link, sql`cs.artnoid`, sql`cs.site`)}
         WHERE cs.qte < 0
           AND cs.site IN ('292', '579')
         ${siteFilter}
@@ -1013,12 +1285,13 @@ export interface PgSansVente6MoisRow {
  * ET dont la dernière entrée en stock remonte aussi à plus de 6 mois.
  */
 export async function pgGetSansVente6Mois(site?: string): Promise<PgSansVente6MoisRow[]> {
+    const link = await getMvtartFouLink();
     const siteFilter = site ? sql`AND cs.site = ${site}` : sql``;
     const result = await pgNoParallel(sql`
         SELECT
             a.codein,
             COALESCE(a.libelle1, '') AS libelle1,
-            COALESCE(f.nom, af.code) AS fournisseur,
+            ${fournisseurExpr(link)} AS fournisseur,
             cs.site,
             cs.qte::float AS stock_actuel,
             cs.dernierevente::text AS derniere_vente,
@@ -1026,13 +1299,7 @@ export async function pgGetSansVente6Mois(site?: string): Promise<PgSansVente6Mo
                 WHEN cs.dernierevente IS NULL THEN NULL
                 ELSE (CURRENT_DATE - cs.dernierevente::date)
             END AS jours_sans_vente,
-            (
-                SELECT MAX(m.datmvt)::text
-                FROM mvtart m
-                WHERE m.artnoid = cs.artnoid
-                  AND m.site = cs.site
-                  AND m.genremvt IN (1, 2)
-            ) AS derniere_entree
+            lastentry.datmvt::text AS derniere_entree
         FROM cube_stock cs
         JOIN articles a ON a.no_id = cs.artnoid
         JOIN (
@@ -1042,6 +1309,7 @@ export async function pgGetSansVente6Mois(site?: string): Promise<PgSansVente6Mo
             ORDER BY art_no_id, code
         ) af ON af.art_no_id = a.no_id
         JOIN fouident f ON f.code = af.code
+        ${lastEntryJoin(link, sql`cs.artnoid`, sql`cs.site`)}
         WHERE cs.site IN ('292', '579')
           AND cs.qte > 0
           AND (

src/lib/qlik-client.ts

@@ -123,6 +123,20 @@ export interface QlikMonthMetrics {
     margePct?: number;
 }
 
+/**
+ * Produit réseau tel que renvoyé par la **recherche** Qlik (page Recherche réseau).
+ *
+ * Différence clé avec `NetworkMetric` : ces produits viennent du catalogue Qlik
+ * du réseau, pas de notre catalogue local. Ils peuvent donc être totalement
+ * inconnus de FF Nancy — d'où le libellé, qui n'est pas récupérable en base.
+ */
+export interface NetworkProduct extends NetworkMetric {
+    /** Libellé article tel qu'il apparaît dans Qlik (dimension « Article »). */
+    libelle: string;
+    fournisseur?: string;
+    famille?: string;
+}
+
 function makeXrfkey(): string {
     return randomBytes(12).toString("base64").replace(/[^a-zA-Z0-9]/g, "").slice(0, 16).padEnd(16, "0");
 }

src/lib/qlik-network-cache.ts

@@ -42,10 +42,19 @@ export async function getNetworkMetricsByCodeCentrale(
     const unique = [...new Set(codes.filter(Boolean))];
     if (unique.length === 0) return out;
 
-    const rows = await db
-        .select()
-        .from(qlikNetworkMetrics)
-        .where(inArray(qlikNetworkMetrics.codeCentrale, unique));
+    // Découpage obligatoire : `inArray` produit un paramètre lié par valeur, or le
+    // protocole PostgreSQL en accepte 65535 au maximum. Un gros fournisseur peut
+    // dépasser 130 000 codes — la requête échouait alors purement et simplement.
+    const CHUNK = 2000;
+    const rows: Array<typeof qlikNetworkMetrics.$inferSelect> = [];
+    for (let i = 0; i < unique.length; i += CHUNK) {
+        const batch = unique.slice(i, i + CHUNK);
+        const part = await db
+            .select()
+            .from(qlikNetworkMetrics)
+            .where(inArray(qlikNetworkMetrics.codeCentrale, batch));
+        rows.push(...part);
+    }
 
     for (const r of rows) {
         out.set(r.codeCentrale, {

src/lib/qlik-playwright.ts

@@ -2296,24 +2296,62 @@ export async function fetchNetworkMetricsPlaywright(
             },
         );
 
+        // Reprise globale sur erreur transitoire.
+        //
+        // Le moteur Qlik abandonne les requêtes longues quand il est chargé
+        // (« code 15 / Request aborted »). Observé sur un même fournisseur, avec
+        // le même code : réussite à 4 h du matin (OpenDoc en 78 s), échec à 6 h
+        // (OpenDoc en 233 s, puis abandon). Les reprises par requête de
+        // `rpcWithRetry` ne suffisent pas — c'est toute l'extraction qui tombe.
+        //
+        // La pause est volontairement longue : relancer aussitôt ne ferait
+        // qu'ajouter de la charge au serveur qui vient déjà de renoncer.
+        const extractionEssais = 1 + envNumber("QLIK_EXTRACTION_RETRIES", 1, 0, 3);
+        const extractionPauseMs = envNumber("QLIK_EXTRACTION_RETRY_PAUSE_MS", 60_000, 0, 600_000);
+        const estTransitoire = (m: string) => /"code"\s*:\s*15\b/.test(m) || /request aborted/i.test(m);
+        const pause = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
+
         let result: InPageResult;
-        try {
-            result = (await evaluer()) as InPageResult;
-        } catch (e) {
-            const msg = String((e as Error)?.message || e);
-            // Une fenêtre 12 mois n'est publiable que si l'extraction est
-            // complète et a passé tous les contrôles. Conserver un checkpoint
-            // partiel fabriquerait précisément des graphiques à 2 ou 3 mois.
-            if (dateFilter) {
-                throw new Error(`[qlik-pw] extraction 12 mois interrompue, cache inchangé : ${msg}`);
-            }
-            const secours = checkpoint as { rows?: Array<Array<string | number>>; monthly?: InPageResult["monthly"] } | null;
-            if (secours?.rows?.length) {
-                console.error(`[qlik-pw] extraction interrompue (${msg.slice(0, 200)}) — reprise du dernier point de contrôle : ${secours.rows.length} lignes`);
-                result = { ok: true, rows: secours.rows, monthly: secours.monthly, size: secours.rows.length, partiel: true };
-            } else {
-                throw e;
+        let essai = 0;
+        for (;;) {
+            essai++;
+            const reste = essai < extractionEssais;
+            try {
+                const candidat = (await evaluer()) as InPageResult;
+                if (candidat.ok || !reste || !estTransitoire(String(candidat.error ?? ""))) {
+                    result = candidat;
+                    break;
+                }
+                console.warn(
+                    `[qlik-pw] tentative ${essai}/${extractionEssais} abandonnée par le moteur (${String(candidat.error).slice(0, 160)})`
+                    + ` — nouvelle tentative dans ${Math.round(extractionPauseMs / 1000)} s`,
+                );
+            } catch (e) {
+                const msg = String((e as Error)?.message || e);
+                if (reste && estTransitoire(msg)) {
+                    console.warn(
+                        `[qlik-pw] tentative ${essai}/${extractionEssais} interrompue (${msg.slice(0, 160)})`
+                        + ` — nouvelle tentative dans ${Math.round(extractionPauseMs / 1000)} s`,
+                    );
+                } else {
+                    // Comportement d'origine, une fois les reprises épuisées.
+                    // Une fenêtre 12 mois n'est publiable que si l'extraction est
+                    // complète et a passé tous les contrôles. Conserver un checkpoint
+                    // partiel fabriquerait précisément des graphiques à 2 ou 3 mois.
+                    if (dateFilter) {
+                        throw new Error(`[qlik-pw] extraction 12 mois interrompue, cache inchangé : ${msg}`);
+                    }
+                    const secours = checkpoint as { rows?: Array<Array<string | number>>; monthly?: InPageResult["monthly"] } | null;
+                    if (secours?.rows?.length) {
+                        console.error(`[qlik-pw] extraction interrompue (${msg.slice(0, 200)}) — reprise du dernier point de contrôle : ${secours.rows.length} lignes`);
+                        result = { ok: true, rows: secours.rows, monthly: secours.monthly, size: secours.rows.length, partiel: true };
+                        break;
+                    }
+                    throw e;
+                }
             }
+            checkpoint = null; // la nouvelle tentative repart d'une extraction vierge
+            await pause(extractionPauseMs);
         }
 
         if (!result.ok) {

src/middleware.ts

@@ -10,10 +10,17 @@ export default auth((req) => {
 
     const isApiAuthRoute = nextUrl.pathname.startsWith("/api/auth");
     const isPublicRoute = nextUrl.pathname === "/login" || nextUrl.pathname.startsWith("/public/");
+    // L'API publique s'authentifie elle-même (clé d'API ou session) et rend ses
+    // propres erreurs JSON. Sans cette exemption, un script non authentifié
+    // recevrait une redirection 302 + la page HTML de login au lieu d'un 401.
+    const isPublicApiRoute = nextUrl.pathname.startsWith("/api/v1");
 
     // 1. Laisser passer les requêtes d'auth API
     if (isApiAuthRoute) return NextResponse.next();
 
+    // 1 bis. Laisser passer /api/v1 — l'authentification est faite dans les handlers
+    if (isPublicApiRoute) return NextResponse.next();
+
     // 2. Rediriger vers /login si non connecté et route non publique
     if (!isLoggedIn && !isPublicRoute) {
         return NextResponse.redirect(new URL("/login", nextUrl));

src/types/grid.ts

@@ -89,7 +89,21 @@ export interface ProductRow {
     /** Données stock & approvisionnement (API FF Nancy) */
     pcb?: number;                    // Conditionnement (pack size)
     prixAchat?: number;              // PA / PRMP
-    prixVente?: number;              // PV central
+    /**
+     * Prix de vente pratiqué, en euros.
+     *
+     * Source par ordre de préférence : `cube_pv` (prix de vente par article et
+     * par site, pendant de `cube_pa` pour l'achat), puis le PV porté par
+     * `cube_stock`, puis `article_infosup.prix_vente_mini` — cette dernière
+     * n'est qu'une borne de paramétrage, vide en pratique.
+     *
+     * Quand les magasins ne pratiquent pas le même prix, cette valeur est la
+     * plus élevée : `prixVenteByStore` porte le détail, et l'affichage signale
+     * la divergence plutôt que d'inventer une moyenne que personne n'encaisse.
+     */
+    prixVente?: number;
+    /** Prix de vente par magasin (site → PV) — `cube_pv`. */
+    prixVenteByStore?: Record<string, number>;
     stockActuel?: number;            // Stock dispo agrégé tous sites
     stockTotal?: number;             // Qte en stock agrégé
     stockValeur?: number;            // Valeur stock agrégée
@@ -149,7 +163,13 @@ export interface GridFilters {
     codeFournisseur: string | null;
     code1: string | null;
     code2: string | null;
-    code3: string | null;
+    /**
+     * Nomenclatures retenues (codes `code3`).
+     * `null` = aucun filtre (tout s'affiche) ; `[]` = rien de coché (aucune
+     * ligne). Distinguer les deux évite la valeur sentinelle qu'imposerait un
+     * simple tableau.
+     */
+    code3: string[] | null;
     codeGamme: GammeCode | null;
     search: string;
 }