Révision d'assortiment : CA par nomenclature, par magasin et face au réseau

Nouveau bouton « Nomenclatures » dans la barre d'outils de la Grille : il
ouvre une modale qui regroupe les produits affichés par nomenclature (code3)
et donne, sur les 12 mois de la Grille, le CA de chaque magasin, le CA de nos
magasins, le CA réseau, le poids de la nomenclature chez nous et dans le
réseau (écart en points) et l'indice de chaque magasin face au magasin moyen
du réseau. Tri par colonne, filtre texte, ligne de total et export Excel.

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

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

@@ -14,7 +14,7 @@ import {
     type FilterFn,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { ChevronUp, ChevronDown, ChevronsUpDown, Copy, Check, Store, SlidersHorizontal, ShoppingCart, PackageOpen, PackageX, Warehouse, AlertTriangle, CalendarRange, Tag, Eye, EyeOff } from "lucide-react";
+import { ChevronUp, ChevronDown, ChevronsUpDown, Copy, Check, Store, SlidersHorizontal, ShoppingCart, PackageOpen, PackageX, Warehouse, AlertTriangle, CalendarRange, Tag, Eye, EyeOff, Layers } from "lucide-react";
 import {
     DropdownMenu,
     DropdownMenuCheckboxItem,
@@ -29,6 +29,7 @@ import { HeatmapCell } from "@/features/grid/components/heatmap-cell";
 import { ProductMonthlyModal } from "@/features/grid/components/product-monthly-modal";
 import { NetworkMonthlyModal } from "@/features/grid/components/network-monthly-modal";
 import { AssortmentGapsModal, PROFONDEUR_MAX, type LigneClassee } from "@/features/grid/components/assortment-gaps-modal";
+import { NomenclatureCaModal } from "@/features/grid/components/nomenclature-ca-modal";
 import type { ProductRow, GammeCode } from "@/types/grid";
 import { cn } from "@/lib/utils";
 import {
@@ -720,6 +721,8 @@ function HeatmapGridInner({ codeFournisseur, onSelectionChange, isAdmin, nomFour
     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);
+    // CA par nomenclature et par magasin, face au réseau, sur les lignes affichées
+    const [nomenclaturesOpen, setNomenclaturesOpen] = useState(false);
     const tableContainerRef = useRef<HTMLDivElement>(null);
 
     // Les 12 mois viennent des données, pas de l'horloge du navigateur : les
@@ -1259,6 +1262,12 @@ function HeatmapGridInner({ codeFournisseur, onSelectionChange, isAdmin, nomFour
         }));
     }, [gapsOpen, tableRows, sorting]);
 
+    /** Les produits affichés (filtres et recherche compris), pour le CA par nomenclature. */
+    const lignesAffichees: ProductRow[] = useMemo(
+        () => (nomenclaturesOpen ? tableRows.map((r) => r.original) : []),
+        [nomenclaturesOpen, tableRows],
+    );
+
     if (!isMounted) {
         return (
             <div
@@ -1278,6 +1287,17 @@ function HeatmapGridInner({ codeFournisseur, onSelectionChange, isAdmin, nomFour
         <div className="h-full w-full relative">
             {portalContainer && createPortal(
                 <div className="flex items-center gap-2">
+                {/* CA par nomenclature et par magasin, comparé au réseau. */}
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setNomenclaturesOpen(true)}
+                    disabled={tableRows.length === 0}
+                    title="Le CA de chaque nomenclature sur la période, par magasin, comparé au CA réseau"
+                >
+                    <Layers />
+                    <span className="hidden lg:inline">Nomenclatures</span>
+                </Button>
                 {/* Trous d'assortiment — lit le classement affiché, tri compris. */}
                 <Button
                     variant="outline"
@@ -1453,6 +1473,17 @@ function HeatmapGridInner({ codeFournisseur, onSelectionChange, isAdmin, nomFour
                 />
             )}
         </Dialog>
+        {/* CA par nomenclature : nos magasins face au réseau */}
+        <Dialog open={nomenclaturesOpen} onOpenChange={setNomenclaturesOpen}>
+            {nomenclaturesOpen && (
+                <NomenclatureCaModal
+                    rows={lignesAffichees}
+                    mois={MONTHS_12}
+                    nomFournisseur={nomFournisseur}
+                    onClose={() => setNomenclaturesOpen(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 && (

src/features/grid/components/nomenclature-ca-modal.tsx

@@ -0,0 +1,516 @@
+"use client";
+
+/**
+ * CollectFlow — CA par nomenclature : nos magasins face au réseau.
+ *
+ * On part des lignes AFFICHÉES dans la Grille (filtres de nomenclature, de
+ * gamme et recherche compris) et on les regroupe par nomenclature (`code3`).
+ * La période est celle de la Grille : les 12 mois complets glissants, sur
+ * laquelle sont calés à la fois les totaux FF par magasin et les chiffres
+ * réseau Qlik.
+ *
+ * Comparer des montants bruts n'aurait pas de sens — le réseau compte ~270
+ * magasins, nous deux. La comparaison passe donc par deux rapports :
+ *   - le poids de la nomenclature dans le CA du périmètre, chez nous et dans
+ *     le réseau (écart en points : où notre mix diverge de celui du réseau) ;
+ *   - l'indice de chaque magasin face au magasin moyen du réseau
+ *     (CA réseau ÷ 270) : 100 = au niveau du magasin moyen.
+ */
+
+import React, { useMemo, useState } from "react";
+import { ChevronDown, ChevronUp, ChevronsUpDown, FileSpreadsheet, Layers, Loader2, Search } from "lucide-react";
+import { DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { TuileStat } from "@/features/grid/components/stat-tile";
+import { formatMonthLabel } from "@/features/grid/lib/months";
+import { NB_MAGASINS_RESEAU } from "@/features/grid/lib/network-trend";
+import { fmtDecimal1, fmtEntier, fmtEur2 } from "@/lib/format";
+import { MAGASINS, nomMagasin } from "@/lib/magasins";
+import type { ProductRow } from "@/types/grid";
+
+/** Une nomenclature et ses chiffres sur la période. */
+interface LigneNomenclature {
+    code: string;
+    libelle: string;
+    nbProduits: number;
+    /** Produits vendus dans au moins un de nos magasins. */
+    nbVendus: number;
+    /** Produits sans chiffre réseau (non rapprochés dans Qlik). */
+    nbSansReseau: number;
+    caParSite: Record<string, number>;
+    caNous: number;
+    caReseau: number;
+    partNous: number | null;
+    partReseau: number | null;
+    /** Écart de poids, en points : partNous − partReseau. */
+    ecartPoints: number | null;
+    /** CA du magasin moyen du réseau (CA réseau ÷ nombre de magasins du réseau). */
+    caMagasinMoyenReseau: number;
+}
+
+type CleTri = "libelle" | "caNous" | "caReseau" | "partNous" | "partReseau" | "ecartPoints" | `site:${string}`;
+
+const SANS_NOMENCLATURE = "—";
+
+const fmtPct = (v: number | null) => (v == null ? "—" : `${fmtDecimal1(v * 100)} %`);
+const fmtPoints = (v: number | null) => (v == null ? "—" : `${v >= 0 ? "+" : ""}${fmtDecimal1(v * 100)} pts`);
+const fmtEurOuTiret = (v: number) => (v !== 0 ? fmtEur2(v) : "—");
+
+/** Indice d'un magasin face au magasin moyen du réseau (100 = au niveau). */
+function indice(ca: number, caMagasinMoyen: number): number | null {
+    if (caMagasinMoyen <= 0) return null;
+    return (ca / caMagasinMoyen) * 100;
+}
+
+function couleurIndice(v: number | null): string {
+    if (v == null) return "var(--text-muted)";
+    return v >= 100 ? "var(--accent-success)" : "var(--accent-error)";
+}
+
+function couleurEcart(v: number | null): string {
+    if (v == null || Math.abs(v) < 0.005) return "var(--text-muted)";
+    return v > 0 ? "var(--accent-success)" : "var(--accent-error)";
+}
+
+/** Magasins présents dans les données, à défaut nos magasins connus — dans l'ordre de `MAGASINS`. */
+function sitesDe(rows: ProductRow[]): string[] {
+    const trouves = new Set<string>();
+    for (const r of rows) for (const s of Object.keys(r.caByStore ?? {})) trouves.add(s);
+    const connus = MAGASINS.map((m) => m.code);
+    const autres = [...trouves].filter((s) => !connus.includes(s)).sort();
+    return [...connus, ...autres];
+}
+
+function regrouper(rows: ProductRow[], sites: string[]): { lignes: LigneNomenclature[]; total: LigneNomenclature } {
+    const groupes = new Map<string, LigneNomenclature>();
+    const vide = (code: string, libelle: string): LigneNomenclature => ({
+        code,
+        libelle,
+        nbProduits: 0,
+        nbVendus: 0,
+        nbSansReseau: 0,
+        caParSite: Object.fromEntries(sites.map((s) => [s, 0])),
+        caNous: 0,
+        caReseau: 0,
+        partNous: null,
+        partReseau: null,
+        ecartPoints: null,
+        caMagasinMoyenReseau: 0,
+    });
+    const total = vide("", "Total");
+
+    for (const r of rows) {
+        const code = r.code3?.trim() || SANS_NOMENCLATURE;
+        let g = groupes.get(code);
+        if (!g) {
+            g = vide(code, r.libelle3?.trim() || (code === SANS_NOMENCLATURE ? "Sans nomenclature" : code));
+            groupes.set(code, g);
+        }
+        let caProduit = 0;
+        for (const s of sites) {
+            const ca = r.caByStore?.[s] ?? 0;
+            g.caParSite[s] += ca;
+            total.caParSite[s] += ca;
+            caProduit += ca;
+        }
+        // Lignes sans détail par magasin : le total du produit reste compté.
+        if (!r.caByStore && r.totalCa) caProduit = r.totalCa;
+        g.caNous += caProduit;
+        total.caNous += caProduit;
+
+        for (const cible of [g, total]) {
+            cible.nbProduits += 1;
+            if (caProduit > 0) cible.nbVendus += 1;
+            if (r.caReseau == null) cible.nbSansReseau += 1;
+            else cible.caReseau += r.caReseau;
+        }
+    }
+
+    const lignes = [...groupes.values()].filter((g) => g.caNous !== 0 || g.caReseau !== 0);
+    for (const g of [...lignes, total]) {
+        g.partNous = total.caNous > 0 ? g.caNous / total.caNous : null;
+        g.partReseau = total.caReseau > 0 ? g.caReseau / total.caReseau : null;
+        g.ecartPoints = g.partNous != null && g.partReseau != null ? g.partNous - g.partReseau : null;
+        g.caMagasinMoyenReseau = g.caReseau / NB_MAGASINS_RESEAU;
+    }
+    return { lignes, total };
+}
+
+function valeurTri(l: LigneNomenclature, cle: CleTri): number | string {
+    if (cle === "libelle") return l.libelle.toLowerCase();
+    if (cle.startsWith("site:")) return l.caParSite[cle.slice(5)] ?? 0;
+    const v = l[cle as Exclude<CleTri, "libelle" | `site:${string}`>];
+    // Valeur absente : toujours en bas, quel que soit le sens.
+    return v ?? Number.NaN;
+}
+
+/**
+ * Classeur Excel de la liste affichée — valeurs numériques brutes pour que le
+ * tableur puisse trier et sommer. `exceljs` est chargé à la demande.
+ */
+async function construireClasseur(
+    lignes: LigneNomenclature[],
+    total: LigneNomenclature,
+    sites: string[],
+    contexte: { fournisseur?: string; periode: string; nbLignesGrille: number },
+): Promise<Blob> {
+    const { Workbook } = await import("exceljs");
+    const classeur = new Workbook();
+    classeur.creator = "CollectFlow";
+    classeur.created = new Date();
+
+    const feuille = classeur.addWorksheet("CA par nomenclature", { views: [{ state: "frozen", ySplit: 1 }] });
+    feuille.columns = [
+        { header: "Code", key: "code", width: 12 },
+        { header: "Nomenclature", key: "libelle", width: 36 },
+        { header: "Produits", key: "nbProduits", width: 10 },
+        { header: "Produits vendus", key: "nbVendus", width: 15 },
+        ...sites.flatMap((s) => [
+            { header: `CA ${nomMagasin(s, { court: true })}`, key: `ca_${s}`, width: 16 },
+            { header: `Indice ${nomMagasin(s, { court: true })}`, key: `ind_${s}`, width: 14 },
+        ]),
+        { header: "CA nos magasins", key: "caNous", width: 16 },
+        { header: "Poids chez nous", key: "partNous", width: 15 },
+        { header: "CA réseau", key: "caReseau", width: 16 },
+        { header: "CA magasin moyen réseau", key: "caMoyen", width: 22 },
+        { header: "Poids réseau", key: "partReseau", width: 13 },
+        { header: "Écart de poids (pts)", key: "ecart", width: 18 },
+        { header: "Produits sans chiffre réseau", key: "nbSansReseau", 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;
+
+    const ajouter = (l: LigneNomenclature) => feuille.addRow({
+        code: l.code,
+        libelle: l.libelle,
+        nbProduits: l.nbProduits,
+        nbVendus: l.nbVendus,
+        ...Object.fromEntries(sites.flatMap((s) => {
+            const ind = indice(l.caParSite[s] ?? 0, l.caMagasinMoyenReseau);
+            return [[`ca_${s}`, l.caParSite[s] ?? 0], [`ind_${s}`, ind == null ? "" : Math.round(ind)]];
+        })),
+        caNous: l.caNous,
+        partNous: l.partNous ?? "",
+        caReseau: l.caReseau,
+        caMoyen: l.caMagasinMoyenReseau,
+        partReseau: l.partReseau ?? "",
+        ecart: l.ecartPoints == null ? "" : Math.round(l.ecartPoints * 1000) / 10,
+        nbSansReseau: l.nbSansReseau,
+    });
+    for (const l of lignes) ajouter(l);
+    const ligneTotal = ajouter(total);
+    ligneTotal.font = { bold: true };
+
+    const eur = '#,##0.00 "€"';
+    for (const cle of ["caNous", "caReseau", "caMoyen", ...sites.map((s) => `ca_${s}`)]) feuille.getColumn(cle).numFmt = eur;
+    feuille.getColumn("partNous").numFmt = "0.0 %";
+    feuille.getColumn("partReseau").numFmt = "0.0 %";
+    feuille.getColumn("ecart").numFmt = '+0.0;-0.0;0.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: 80 }];
+    for (const [cle, valeur] of [
+        ["Extraction", "CA par nomenclature — nos magasins et réseau"],
+        ["Fournisseur", contexte.fournisseur ?? "—"],
+        ["Période", contexte.periode],
+        ["Périmètre", `${contexte.nbLignesGrille} produits affichés dans la Grille (filtres compris)`],
+        ["Poids", "part de la nomenclature dans le CA du périmètre (chez nous / dans le réseau)"],
+        ["Indice magasin", `CA du magasin ÷ CA du magasin moyen du réseau (CA réseau ÷ ${NB_MAGASINS_RESEAU}) × 100`],
+        ["Généré le", new Date().toLocaleString("fr-FR")],
+    ]) {
+        contexteFeuille.addRow([cle, valeur]).getCell(1).font = { bold: true };
+    }
+
+    const buffer = await classeur.xlsx.writeBuffer();
+    return new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
+}
+
+function EnTete({ label, cle, tri, onTri, align = "right", title }: {
+    label: React.ReactNode;
+    cle: CleTri;
+    tri: { cle: CleTri; desc: boolean };
+    onTri: (cle: CleTri) => void;
+    align?: "left" | "right";
+    title?: string;
+}) {
+    const actif = tri.cle === cle;
+    const Icone = !actif ? ChevronsUpDown : tri.desc ? ChevronDown : ChevronUp;
+    return (
+        <th
+            className={`px-2.5 py-1.5 font-semibold whitespace-nowrap ${align === "left" ? "text-left" : "text-right"}`}
+            style={{ color: actif ? "var(--text-primary)" : "var(--text-secondary)" }}
+            aria-sort={actif ? (tri.desc ? "descending" : "ascending") : "none"}
+            title={title}
+        >
+            <button
+                type="button"
+                onClick={() => onTri(cle)}
+                className={`inline-flex items-center gap-1 ${align === "left" ? "" : "flex-row-reverse"}`}
+            >
+                {label}
+                <Icone className="w-3 h-3 shrink-0 opacity-60" />
+            </button>
+        </th>
+    );
+}
+
+export function NomenclatureCaModal({ rows, mois, nomFournisseur, onClose }: {
+    /** Les produits affichés dans la Grille (filtres et recherche compris). */
+    rows: ProductRow[];
+    /** Les 12 clés de mois de la Grille, du plus ancien au plus récent. */
+    mois: string[];
+    nomFournisseur?: string;
+    onClose: () => void;
+}) {
+    const sites = useMemo(() => sitesDe(rows), [rows]);
+    const { lignes, total } = useMemo(() => regrouper(rows, sites), [rows, sites]);
+
+    const [tri, setTri] = useState<{ cle: CleTri; desc: boolean }>({ cle: "caNous", desc: true });
+    const [recherche, setRecherche] = useState("");
+    const [exportEnCours, setExportEnCours] = useState(false);
+    const [exportErreur, setExportErreur] = useState<string | null>(null);
+
+    const changerTri = (cle: CleTri) =>
+        setTri((t) => (t.cle === cle ? { cle, desc: !t.desc } : { cle, desc: cle !== "libelle" }));
+
+    const affichees = useMemo(() => {
+        const q = recherche.trim().toLowerCase();
+        const filtrees = q
+            ? lignes.filter((l) => l.libelle.toLowerCase().includes(q) || l.code.toLowerCase().includes(q))
+            : lignes;
+        const sens = tri.desc ? -1 : 1;
+        return [...filtrees].sort((a, b) => {
+            const va = valeurTri(a, tri.cle);
+            const vb = valeurTri(b, tri.cle);
+            if (typeof va === "string" || typeof vb === "string") return String(va).localeCompare(String(vb), "fr") * sens;
+            if (Number.isNaN(va)) return Number.isNaN(vb) ? 0 : 1;
+            if (Number.isNaN(vb)) return -1;
+            return (va - vb) * sens;
+        });
+    }, [lignes, recherche, tri]);
+
+    const periode = mois.length > 0
+        ? `${formatMonthLabel(mois[0])} → ${formatMonthLabel(mois[mois.length - 1])}`
+        : "12 derniers mois";
+    const absentesChezNous = lignes.filter((l) => l.caNous <= 0 && l.caReseau > 0).length;
+    const indicesTotal = sites.map((s) => indice(total.caParSite[s] ?? 0, total.caMagasinMoyenReseau));
+
+    const exporter = async () => {
+        if (affichees.length === 0 || exportEnCours) return;
+        setExportEnCours(true);
+        setExportErreur(null);
+        try {
+            const blob = await construireClasseur(affichees, total, sites, {
+                fournisseur: nomFournisseur,
+                periode,
+                nbLignesGrille: rows.length,
+            });
+            const url = URL.createObjectURL(blob);
+            const lien = document.createElement("a");
+            lien.href = url;
+            lien.download = [
+                "CA_nomenclatures",
+                nomFournisseur?.replace(/[^\w]+/g, "_"),
+                new Date().toISOString().slice(0, 10),
+            ].filter(Boolean).join("_") + ".xlsx";
+            lien.click();
+            URL.revokeObjectURL(url);
+        } catch (e) {
+            console.error("[CA par nomenclature] export Excel :", e);
+            setExportErreur("L'export a échoué. Réessayez, ou signalez-le si cela persiste.");
+        } finally {
+            setExportEnCours(false);
+        }
+    };
+
+    const celluleSite = (l: LigneNomenclature, s: string, gras = false) => {
+        const ca = l.caParSite[s] ?? 0;
+        const ind = indice(ca, l.caMagasinMoyenReseau);
+        return (
+            <td key={s} className="px-2.5 py-1.5 text-right tabular-nums whitespace-nowrap">
+                <div className={gras ? "font-bold" : "font-semibold"} style={{ color: ca !== 0 ? "var(--text-primary)" : "var(--text-muted)" }}>
+                    {fmtEurOuTiret(ca)}
+                </div>
+                <div className="text-[11px]" style={{ color: couleurIndice(ind) }} title="Indice face au magasin moyen du réseau (100 = au niveau)">
+                    {ind == null ? "—" : `indice ${fmtEntier(ind)}`}
+                </div>
+            </td>
+        );
+    };
+
+    return (
+        <DialogContent
+            className="max-w-[calc(100%-2rem)] sm:max-w-6xl 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)" }}>
+                    <Layers className="w-5 h-5 shrink-0" style={{ color: "var(--accent)" }} />
+                    CA par nomenclature
+                </DialogTitle>
+                <p className="text-[13px] mt-1" style={{ color: "var(--text-muted)" }}>
+                    {nomFournisseur ? <>{nomFournisseur} — </> : null}
+                    <span className="font-semibold" style={{ color: "var(--text-secondary)" }}>{periode}</span>
+                    {` — ${fmtEntier(rows.length)} produits affichés dans la Grille, par magasin et face au réseau.`}
+                </p>
+            </DialogHeader>
+
+            <div className="flex flex-wrap gap-2">
+                <TuileStat label="Nomenclatures" valeur={fmtEntier(lignes.length)} indice="avec du CA chez nous ou dans le réseau" />
+                {sites.map((s, i) => (
+                    <TuileStat
+                        key={s}
+                        label={`CA ${nomMagasin(s)}`}
+                        valeur={fmtEur2(total.caParSite[s] ?? 0)}
+                        indice={indicesTotal[i] == null ? undefined : `indice ${fmtEntier(indicesTotal[i]!)} face au magasin moyen du réseau`}
+                    />
+                ))}
+                <TuileStat
+                    label="CA réseau"
+                    valeur={fmtEur2(total.caReseau)}
+                    indice={`soit ${fmtEur2(total.caMagasinMoyenReseau)} par magasin moyen (${NB_MAGASINS_RESEAU} magasins)`}
+                />
+                <TuileStat
+                    label="Absentes chez nous"
+                    valeur={fmtEntier(absentesChezNous)}
+                    indice="nomenclatures vendues dans le réseau, sans CA dans nos magasins"
+                    couleur={absentesChezNous > 0 ? "var(--accent-warning)" : undefined}
+                />
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+                <div className="relative">
+                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5" style={{ color: "var(--text-muted)" }} />
+                    <input
+                        type="search"
+                        placeholder="Filtrer les nomenclatures…"
+                        aria-label="Filtrer les nomenclatures"
+                        value={recherche}
+                        onChange={(e) => setRecherche(e.target.value)}
+                        className="apple-input w-60"
+                        style={{ paddingLeft: "32px" }}
+                    />
+                </div>
+                <button
+                    type="button"
+                    onClick={exporter}
+                    disabled={affichees.length === 0 || exportEnCours}
+                    title="Exporter la liste affichée 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>
+            )}
+
+            {affichees.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)" }}>
+                    {lignes.length === 0
+                        ? "Aucune nomenclature avec du CA sur la période pour les produits affichés."
+                        : "Aucune nomenclature ne correspond à ce filtre."}
+                </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: 900 }}>
+                        <thead>
+                            <tr style={{ background: "var(--bg-elevated)" }}>
+                                <EnTete label="Nomenclature" cle="libelle" tri={tri} onTri={changerTri} align="left" />
+                                {sites.map((s) => (
+                                    <EnTete key={s} label={`CA ${nomMagasin(s, { court: true })}`} cle={`site:${s}`} tri={tri} onTri={changerTri}
+                                        title={`CA de ${nomMagasin(s)} sur la période, et son indice face au magasin moyen du réseau`} />
+                                ))}
+                                <EnTete label="CA nos magasins" cle="caNous" tri={tri} onTri={changerTri} />
+                                <EnTete label="Poids chez nous" cle="partNous" tri={tri} onTri={changerTri}
+                                    title="Part de la nomenclature dans le CA de nos magasins sur le périmètre affiché" />
+                                <EnTete label="CA réseau" cle="caReseau" tri={tri} onTri={changerTri}
+                                    title={`CA dans les magasins du réseau ; en dessous, le CA du magasin moyen (÷ ${NB_MAGASINS_RESEAU})`} />
+                                <EnTete label="Poids réseau" cle="partReseau" tri={tri} onTri={changerTri}
+                                    title="Part de la nomenclature dans le CA réseau sur le périmètre affiché" />
+                                <EnTete label="Écart" cle="ecartPoints" tri={tri} onTri={changerTri}
+                                    title="Poids chez nous − poids réseau, en points : positif = nomenclature plus forte chez nous que dans le réseau" />
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {affichees.map((l) => (
+                                <tr key={l.code} style={{ borderTop: "1px solid var(--border)" }}>
+                                    <td className="px-2.5 py-1.5" style={{ color: "var(--text-primary)" }}>
+                                        <div className="font-semibold">{l.libelle}</div>
+                                        <div className="text-[11px] tabular-nums" style={{ color: "var(--text-muted)" }}>
+                                            {l.code !== SANS_NOMENCLATURE && <>{l.code} · </>}
+                                            {fmtEntier(l.nbVendus)} / {fmtEntier(l.nbProduits)} produits vendus
+                                            {l.nbSansReseau > 0 && (
+                                                <span title="Produits sans chiffre réseau (non rapprochés dans Qlik) : le CA réseau de la nomenclature est sous-estimé">
+                                                    {" "}· {fmtEntier(l.nbSansReseau)} sans réseau
+                                                </span>
+                                            )}
+                                        </div>
+                                    </td>
+                                    {sites.map((s) => celluleSite(l, s))}
+                                    <td className="px-2.5 py-1.5 text-right tabular-nums font-bold whitespace-nowrap" style={{ color: l.caNous !== 0 ? "var(--text-primary)" : "var(--accent-warning)" }}>
+                                        {fmtEurOuTiret(l.caNous)}
+                                    </td>
+                                    <td className="px-2.5 py-1.5 text-right tabular-nums whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
+                                        {fmtPct(l.partNous)}
+                                    </td>
+                                    <td className="px-2.5 py-1.5 text-right tabular-nums whitespace-nowrap">
+                                        <div className="font-semibold text-emerald-600 dark:text-emerald-400">{fmtEurOuTiret(l.caReseau)}</div>
+                                        <div className="text-[11px]" style={{ color: "var(--text-muted)" }}>
+                                            {l.caReseau !== 0 ? `${fmtEur2(l.caMagasinMoyenReseau)} / mag.` : ""}
+                                        </div>
+                                    </td>
+                                    <td className="px-2.5 py-1.5 text-right tabular-nums whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
+                                        {fmtPct(l.partReseau)}
+                                    </td>
+                                    <td className="px-2.5 py-1.5 text-right tabular-nums font-semibold whitespace-nowrap" style={{ color: couleurEcart(l.ecartPoints) }}>
+                                        {fmtPoints(l.ecartPoints)}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                        <tfoot>
+                            <tr style={{ borderTop: "2px solid var(--border-strong)", background: "var(--bg-elevated)" }}>
+                                <td className="px-2.5 py-1.5 font-bold" style={{ color: "var(--text-primary)" }}>
+                                    Total
+                                    <div className="text-[11px] font-normal tabular-nums" style={{ color: "var(--text-muted)" }}>
+                                        {fmtEntier(total.nbVendus)} / {fmtEntier(total.nbProduits)} produits vendus
+                                    </div>
+                                </td>
+                                {sites.map((s) => celluleSite(total, s, true))}
+                                <td className="px-2.5 py-1.5 text-right tabular-nums font-bold whitespace-nowrap" style={{ color: "var(--text-primary)" }}>
+                                    {fmtEur2(total.caNous)}
+                                </td>
+                                <td className="px-2.5 py-1.5 text-right tabular-nums whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
+                                    {fmtPct(total.partNous)}
+                                </td>
+                                <td className="px-2.5 py-1.5 text-right tabular-nums whitespace-nowrap">
+                                    <div className="font-bold text-emerald-600 dark:text-emerald-400">{fmtEur2(total.caReseau)}</div>
+                                    <div className="text-[11px]" style={{ color: "var(--text-muted)" }}>{fmtEur2(total.caMagasinMoyenReseau)} / mag.</div>
+                                </td>
+                                <td className="px-2.5 py-1.5 text-right tabular-nums whitespace-nowrap" style={{ color: "var(--text-secondary)" }}>
+                                    {fmtPct(total.partReseau)}
+                                </td>
+                                <td className="px-2.5 py-1.5" />
+                            </tr>
+                        </tfoot>
+                    </table>
+                </div>
+            )}
+
+            <p className="text-xs leading-snug" style={{ color: "var(--text-muted)" }}>
+                Période : les 12 mois complets de la Grille, communs à nos magasins et au réseau. Le poids est la part de la
+                nomenclature dans le CA des produits affichés ; l&apos;écart compare notre mix à celui du réseau. L&apos;indice
+                rapporte le CA d&apos;un magasin à celui du magasin moyen du réseau (CA réseau ÷ {NB_MAGASINS_RESEAU}) : 100 = au niveau.
+                {total.nbSansReseau > 0 && ` ${fmtEntier(total.nbSansReseau)} produits n'ont pas de chiffre réseau : le CA réseau des nomenclatures concernées est sous-estimé.`}
+            </p>
+        </DialogContent>
+    );
+}