feat(stats): tableau de bord analytique /stats + rapport PDF Groupe-KA

- creaka/stats.py : GET /api/stats/dashboard (contrat ka-stats SPEC.md) —
  KPI avec deltas calculables, séries quotidiennes (ajouts, taille cumulative),
  répartitions (anneau plateformes, barres tiers/niches), heatmap d ajouts,
  tableaux (top créateurs, niches), records générés des données ; cache 5 min.
- creaka/kapdf.py + GET /api/stats/report : PDF estampillé Groupe-KA (fpdf2),
  modes complet/synthèse, graphiques vectoriels, filename kapdf normé ;
  correctif : plus de pied de page sur la couverture.
- frontend : vue /stats refaite en vanilla JS + SVG (kit kacharts reproduit) —
  chips de période + plage personnalisée, courbes avec infobulle et légende
  cliquable, anneau, barres, calendrier de chaleur, tableaux triables/
  cherchables/paginés (25/pg), records, fraîcheur + rafraîchir, boutons PDF ;
  mobile 360/768/1440 sans débordement horizontal.
- frontend/src/ka/stats : kit commun (SPEC.md, kacharts.tsx, kapdf.py) versionné.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Simon-Pierre Boucher committed 2 mo ago (Aug 18, 2026) parent 88eccae Browse files

9 changed files +2,658 −56

added creaka/kapdf.py +560 −0

++# Auteur : Simon-Pierre Boucher — contact@spboucher.ai
++# ka-ui/stats/kapdf.py — moteur PDF commun Groupe KA (fpdf2).
++# Consomme le JSON du contrat /api/stats/dashboard (voir SPEC.md) et produit
++# le rapport estampillé Groupe-KA : couverture, sommaire, KPI, graphiques
++# VECTORIELS (courbes/barres/anneaux), tableaux paginés, records, page de fin.
++# Usage :
++#   from kapdf import GroupeKAReport
++#   pdf_bytes = GroupeKAReport(site={"wordmark":"Lou·Ka","accent":"#ff6a00",
++#       "domain":"www.lou-ka.com","tagline":"…"}, dashboard=dash_json,
++#       mode="complet").build()
++# Dépendance : pip install fpdf2  (aucune autre)
++from __future__ import annotations
++
++import math
++from datetime import datetime
++from zoneinfo import ZoneInfo
++
++from fpdf import FPDF
++
++INK = (20, 24, 20)
++INK2 = (77, 85, 81)
++INK3 = (139, 146, 140)
++PAPER = (245, 243, 238)
++SURFACE2 = (250, 249, 245)
++GREEN = (28, 92, 65)
++DANGER = (179, 66, 58)
++WHITE = (255, 255, 255)
++
++EMAILS = [
++    ("contact@groupe-ka.com", "Projets, partenariats & données"),
++    ("info@groupe-ka.com", "Médias & questions générales"),
++    ("admin@groupe-ka.com", "Légal, vie privée & Loi 25"),
++]
++DISCLAIMER = (
++    "Groupe KA est un agrégateur de contenu : nous ne vendons rien, ne louons "
++    "rien et ne sommes partie à aucune transaction. Données lues à la source, "
++    "rien d'inventé, tout est traçable."
++)
++
++
++def _hex(c: str) -> tuple[int, int, int]:
++    c = c.lstrip("#")
++    return tuple(int(c[i : i + 2], 16) for i in (0, 2, 4))  # type: ignore
++
++
++def _fr(n) -> str:
++    if isinstance(n, float) and not n.is_integer():
++        return f"{n:,.2f}".replace(",", " ").replace(".", ",")
++    return f"{int(n):,}".replace(",", " ")
++
++
++_SUBST = {
++    "—": "-", "–": "-", "→": "->", "▲": "+", "▼": "-",
++    "…": "...", "’": "'", "‘": "'", "“": '"', "”": '"',
++    "œ": "oe", "Œ": "OE", "−": "-", " ": " ", " ": " ",
++}
++
++
++def _latin1(s: str) -> str:
++    for k, v in _SUBST.items():
++        s = s.replace(k, v)
++    return s.encode("latin-1", "replace").decode("latin-1")
++
++
++class _PDF(FPDF):
++    """FPDF avec en-tête/pied Groupe-KA sur chaque page (sauf couverture).
++    Les polices core sont latin-1 : normalize_text sanitise en amont."""
++
++    def normalize_text(self, text):
++        return super().normalize_text(_latin1(text))
++
++    def __init__(self, brand: str, accent: tuple, period_label: str):
++        super().__init__(orientation="P", unit="mm", format="A4")
++        self.brand = brand
++        self.accent = accent
++        self.period_label = period_label
++        self.cover_mode = False
++        self.set_margins(18, 20, 18)
++        self.set_auto_page_break(True, margin=22)
++
++    def header(self):
++        if self.cover_mode or self.page_no() == 1:  # jamais sur la couverture
++            return
++        self.set_font("helvetica", "B", 8.5)
++        self.set_text_color(*INK)
++        self.set_xy(18, 9)
++        self.cell(0, 5, f"Groupe KA · {self.brand}")
++        self.set_font("helvetica", "", 8)
++        self.set_text_color(*INK3)
++        self.set_xy(18, 9)
++        self.cell(0, 5, "Rapport statistique", align="R")
++        self.set_draw_color(*INK)
++        self.set_line_width(0.5)
++        self.line(18, 15.5, 192, 15.5)
++        self.set_y(20)
++
++    def footer(self):
++        # le pied de la couverture se rend APRÈS la remise à zéro de cover_mode
++        # (add_page suivant) : on exclut donc aussi explicitement la page 1
++        if self.cover_mode or self.page_no() == 1:
++            return
++        self.set_y(-15)
++        self.set_draw_color(*INK3)
++        self.set_line_width(0.2)
++        self.line(18, self.get_y() - 1.5, 192, self.get_y() - 1.5)
++        self.set_font("helvetica", "", 7.5)
++        self.set_text_color(*INK3)
++        year = datetime.now(ZoneInfo("America/Toronto")).year
++        self.cell(130, 5, f"© Groupe-KA — {year} — groupe-ka.com · {self.period_label}")
++        self.cell(0, 5, f"p. {self.page_no()}/{{nb}}", align="R")
++
++
++class GroupeKAReport:
++    def __init__(self, site: dict, dashboard: dict, mode: str = "complet"):
++        self.site = site
++        self.d = dashboard
++        self.mode = mode
++        self.accent = _hex(site.get("accent", "#d9f26b"))
++        period = dashboard.get("period", {}) or {}
++        self.period_label = period.get("label") or "toute la période"
++        self.pdf = _PDF(site.get("wordmark", ""), self.accent, self.period_label)
++        self.toc: list[tuple[str, int]] = []
++
++    # ---------- primitives ----------
++    def _card(self, x, y, w, h, fill=WHITE):
++        p = self.pdf
++        p.set_draw_color(*INK)
++        p.set_line_width(0.45)
++        p.set_fill_color(*fill)
++        p.rect(x, y, w, h, style="DF", round_corners=True, corner_radius=2.2)
++
++    def _kicker(self, text):
++        p = self.pdf
++        p.set_font("helvetica", "B", 8)
++        p.set_text_color(*GREEN)
++        p.set_draw_color(*GREEN)
++        p.set_line_width(0.6)
++        y = p.get_y() + 2
++        p.line(p.l_margin, y, p.l_margin + 7, y)
++        p.set_xy(p.l_margin + 9, y - 2.5)
++        p.cell(0, 5, text.upper())
++        p.ln(8)
++
++    def _section_title(self, title):
++        if self.pdf.get_y() > 240:
++            self.pdf.add_page()
++        self._kicker("Groupe KA · " + self.site.get("wordmark", ""))
++        self.pdf.set_font("helvetica", "B", 15)
++        self.pdf.set_text_color(*INK)
++        self.pdf.set_x(self.pdf.l_margin)
++        self.pdf.cell(0, 8, title)
++        self.toc.append((title, self.pdf.page_no()))
++        self.pdf.ln(11)
++
++    # ---------- pages ----------
++    def _cover(self):
++        p = self.pdf
++        p.cover_mode = True
++        p.set_auto_page_break(False)
++        p.add_page()
++        p.set_fill_color(*PAPER)
++        p.rect(0, 0, 210, 297, style="F")
++        p.set_draw_color(*INK)
++        p.set_line_width(1.0)
++        p.rect(10, 10, 190, 277)
++        # kicker
++        p.set_font("helvetica", "B", 10)
++        p.set_text_color(*GREEN)
++        p.set_xy(24, 34)
++        p.cell(0, 6, "GROUPE KA · RAPPORT STATISTIQUE")
++        # wordmark : partie gauche + boîte encre/accent
++        wm = self.site.get("wordmark", "")
++        left, boxed = (wm.split("·") + [None])[:2] if "·" in wm else (wm, None)
++        p.set_xy(24, 70)
++        p.set_font("helvetica", "B", 40)
++        p.set_text_color(*INK)
++        p.cell(p.get_string_width(left) + 2, 20, left)
++        if boxed:
++            bw = p.get_string_width(boxed) + 12
++            x = p.get_x() + 2
++            p.set_fill_color(*INK)
++            p.rect(x, 68, bw, 22, style="F", round_corners=True, corner_radius=3)
++            p.set_text_color(*self.accent)
++            p.set_xy(x + 6, 70)
++            p.cell(bw - 12, 18, boxed)
++        p.set_xy(24, 100)
++        p.set_font("helvetica", "", 13)
++        p.set_text_color(*INK2)
++        p.multi_cell(150, 7, f"Rapport statistique — {wm}")
++        now = datetime.now(ZoneInfo("America/Toronto"))
++        per = self.d.get("period", {}) or {}
++        p.set_xy(24, 125)
++        p.set_font("helvetica", "", 10.5)
++        rows = [
++            ("Période couverte", self.period_label + (f" ({per.get('from')} → {per.get('to')})" if per.get("from") else "")),
++            ("Généré le", now.strftime("%Y-%m-%d à %H:%M") + " (heure de l'Est)"),
++            ("Plateforme", "https://" + self.site.get("domain", "")),
++            ("Mode", "Rapport complet" if self.mode == "complet" else "Synthèse"),
++        ]
++        y = 128
++        for k, v in rows:
++            p.set_xy(24, y)
++            p.set_text_color(*INK3)
++            p.cell(40, 6, k)
++            p.set_text_color(*INK)
++            p.set_font("helvetica", "B", 10.5)
++            p.cell(0, 6, str(v))
++            p.set_font("helvetica", "", 10.5)
++            y += 8
++        # bande encre au pied
++        p.set_fill_color(*INK)
++        p.rect(10, 262, 190, 25, style="F")
++        p.set_xy(24, 270)
++        p.set_font("helvetica", "B", 12)
++        p.set_text_color(*WHITE)
++        p.cell(60, 8, "par Groupe ")
++        p.set_text_color(*self.accent)
++        p.set_xy(24 + p.get_string_width("par Groupe ") + 1, 270)
++        p.cell(20, 8, "KA")
++        p.set_font("helvetica", "B", 10)
++        p.set_xy(24, 270)
++        p.set_text_color(*self.accent)
++        p.cell(162, 8, "groupe-ka.com", align="R")
++        p.set_auto_page_break(True, margin=22)
++        p.cover_mode = False
++
++    def _kpis(self):
++        kpis = self.d.get("kpis") or []
++        if not kpis:
++            return
++        self._section_title("Synthèse des indicateurs")
++        p = self.pdf
++        cols, gw, gh, gap = 3, 56, 26, 3
++        x0, y = p.l_margin, p.get_y()
++        for i, k in enumerate(kpis[:9]):
++            x = x0 + (i % cols) * (gw + gap)
++            if i and i % cols == 0:
++                y += gh + gap
++            if y > 250:
++                p.add_page(); y = p.get_y()
++            self._card(x, y, gw, gh)
++            p.set_xy(x + 4, y + 4)
++            p.set_font("helvetica", "B", 14)
++            p.set_text_color(*INK)
++            val = k.get("value")
++            p.cell(gw - 8, 7, (_fr(val) if isinstance(val, (int, float)) else str(val)) + (" " + k["unit"] if k.get("unit") else ""))
++            p.set_xy(x + 4, y + 12)
++            p.set_font("helvetica", "", 7.6)
++            p.set_text_color(*INK2)
++            p.multi_cell(gw - 8, 3.6, str(k.get("label", ""))[:70])
++            if k.get("delta_pct") is not None:
++                up = (k.get("direction") or ("up" if k["delta_pct"] >= 0 else "down")) == "up"
++                p.set_xy(x + 4, y + gh - 6.5)
++                p.set_font("helvetica", "B", 8)
++                p.set_text_color(*(GREEN if up else DANGER))
++                arrow = "+" if k["delta_pct"] >= 0 else ""
++                p.cell(gw - 8, 4, f"{'▲' if up else '▼'} {arrow}{str(k['delta_pct']).replace('.', ',')} % vs période préc.")
++        p.set_y(y + gh + 8)
++
++    def _line_chart(self, s):
++        p = self.pdf
++        pts = s.get("points") or []
++        if len(pts) < 2:
++            return
++        if p.get_y() > 200:
++            p.add_page()
++        p.set_font("helvetica", "B", 10)
++        p.set_text_color(*INK)
++        p.cell(0, 6, s.get("title", ""))
++        p.ln(7)
++        x0, y0, w, h = p.l_margin, p.get_y(), 174, 52
++        self._card(x0, y0, w, h, fill=WHITE)
++        cx, cy, cw, ch = x0 + 12, y0 + 6, w - 20, h - 16
++        vals = [pt["v"] for pt in pts] + [c["v"] for c in (s.get("compare") or [])]
++        vmax = max(vals) or 1
++        vmin = min(0, min(vals))
++        rng = (vmax - vmin) or 1
++        # grille + graduations
++        p.set_font("helvetica", "", 6.3)
++        p.set_text_color(*INK3)
++        p.set_draw_color(200, 200, 195)
++        p.set_line_width(0.15)
++        for g in range(5):
++            gy = cy + ch - ch * g / 4
++            p.line(cx, gy, cx + cw, gy)
++            p.set_xy(x0 + 1, gy - 1.6)
++            p.cell(10, 3, _fr(vmin + rng * g / 4), align="R")
++
++        def draw(series, color, width, dash=None):
++            n = len(series)
++            p.set_draw_color(*color)
++            p.set_line_width(width)
++            if dash:
++                p.set_dash_pattern(dash=1.2, gap=1.2)
++            last = None
++            for i, pt in enumerate(series):
++                px = cx + cw * (i / (n - 1))
++                py = cy + ch - ch * ((pt["v"] - vmin) / rng)
++                if last:
++                    p.line(last[0], last[1], px, py)
++                last = (px, py)
++            p.set_dash_pattern()
++
++        if s.get("compare"):
++            draw(s["compare"], INK3, 0.35, dash=True)
++        draw(pts, self.accent, 0.7)
++        # libellés d'axe X (premier / milieu / dernier)
++        p.set_text_color(*INK3)
++        for frac, idx in ((0, 0), (0.5, len(pts) // 2), (1, -1)):
++            p.set_xy(cx + cw * frac - 9, cy + ch + 1.5)
++            p.cell(18, 3, str(pts[idx].get("t", ""))[:10], align="C")
++        p.set_y(y0 + h + 4)
++        if s.get("compare"):
++            p.set_font("helvetica", "", 6.8)
++            p.set_text_color(*INK3)
++            p.cell(0, 4, "— période courante (accent) · ---- période comparée")
++            p.ln(6)
++        else:
++            p.ln(2)
++
++    def _bars(self, title, items, unit=""):
++        p = self.pdf
++        items = [it for it in (items or []) if isinstance(it.get("value"), (int, float))][:12]
++        if not items:
++            return
++        need = 10 + len(items) * 7
++        if p.get_y() + need > 265:
++            p.add_page()
++        p.set_font("helvetica", "B", 10)
++        p.set_text_color(*INK)
++        p.cell(0, 6, title)
++        p.ln(8)
++        vmax = max(it["value"] for it in items) or 1
++        for it in items:
++            y = p.get_y()
++            p.set_font("helvetica", "", 7.6)
++            p.set_text_color(*INK)
++            p.set_x(p.l_margin)
++            p.cell(46, 5, str(it["label"])[:34])
++            bw = 96 * (it["value"] / vmax)
++            p.set_fill_color(*self.accent)
++            p.set_draw_color(*INK)
++            p.set_line_width(0.25)
++            p.rect(p.l_margin + 48, y + 0.7, max(bw, 0.8), 3.6, style="DF")
++            p.set_xy(p.l_margin + 148, y)
++            p.set_font("helvetica", "B", 7.6)
++            p.cell(26, 5, _fr(it["value"]) + (" " + unit if unit else ""), align="R")
++            p.ln(6.4)
++        p.ln(3)
++
++    def _donut(self, b):
++        # anneau vectoriel simple (arcs) + légende
++        p = self.pdf
++        items = [it for it in (b.get("items") or []) if it.get("value")][:8]
++        total = sum(it["value"] for it in items)
++        if not items or not total:
++            return
++        if p.get_y() > 210:
++            p.add_page()
++        p.set_font("helvetica", "B", 10)
++        p.set_text_color(*INK)
++        p.cell(0, 6, b.get("title", ""))
++        p.ln(8)
++        cx, cy, r = p.l_margin + 26, p.get_y() + 24, 20
++        shades = [1.0, 0.78, 0.58, 0.42, 0.30, 0.22, 0.15, 0.10]
++        start = -90.0
++        for i, it in enumerate(items):
++            frac = it["value"] / total
++            f = shades[i % len(shades)]
++            col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3))
++            steps = max(2, int(72 * frac))
++            p.set_fill_color(*col)
++            p.set_draw_color(*col)
++            for st in range(steps):
++                a0 = math.radians(start + 360 * frac * st / steps)
++                a1 = math.radians(start + 360 * frac * (st + 1) / steps)
++                p.polygon(
++                    [(cx, cy),
++                     (cx + r * math.cos(a0), cy + r * math.sin(a0)),
++                     (cx + r * math.cos(a1), cy + r * math.sin(a1))],
++                    style="DF",
++                )
++            start += 360 * frac
++        p.set_fill_color(*WHITE)
++        p.set_draw_color(*INK)
++        p.set_line_width(0.4)
++        p.ellipse(cx - 11, cy - 11, 22, 22, style="DF")
++        p.ellipse(cx - r, cy - r, 2 * r, 2 * r, style="D")
++        # légende
++        ly = cy - 22
++        for i, it in enumerate(items):
++            f = shades[i % len(shades)]
++            col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3))
++            p.set_fill_color(*col)
++            p.set_draw_color(*INK)
++            p.rect(p.l_margin + 60, ly + 0.8, 4, 4, style="DF")
++            p.set_xy(p.l_margin + 66, ly)
++            p.set_font("helvetica", "", 7.6)
++            p.set_text_color(*INK)
++            pct = 100 * it["value"] / total
++            p.cell(0, 5.6, f"{str(it['label'])[:40]} — {_fr(it['value'])} ({pct:.1f} %)".replace(".", ","))
++            ly += 5.6
++        p.set_y(max(cy + r, ly) + 6)
++
++    def _table(self, t):
++        p = self.pdf
++        cols = t.get("columns") or []
++        rows = t.get("rows") or []
++        if not cols or not rows:
++            return
++        self._section_title(t.get("title", "Tableau"))
++        w = 174 / len(cols)
++        def head():
++            p.set_font("helvetica", "B", 7.6)
++            p.set_fill_color(*INK)
++            p.set_text_color(*WHITE)
++            for c in cols:
++                p.cell(w, 6, " " + str(c)[:30], fill=True)
++            p.ln(6)
++        head()
++        p.set_text_color(*INK)
++        for i, row in enumerate(rows[:200]):
++            if p.get_y() > 262:
++                p.add_page()
++                head()
++                p.set_text_color(*INK)
++            p.set_font("helvetica", "", 7.4)
++            p.set_fill_color(*(SURFACE2 if i % 2 else WHITE))
++            for cell in row:
++                txt = _fr(cell) if isinstance(cell, (int, float)) else str(cell)
++                p.cell(w, 5.4, " " + txt[:34], fill=True)
++            p.ln(5.4)
++        if len(rows) > 200:
++            p.set_font("helvetica", "", 7)
++            p.set_text_color(*INK3)
++            p.cell(0, 5, f"… {len(rows) - 200} lignes supplémentaires non imprimées")
++        p.ln(6)
++
++    def _records(self):
++        recs = self.d.get("records") or []
++        if not recs:
++            return
++        self._section_title("Records & faits marquants")
++        p = self.pdf
++        for r in recs[:10]:
++            if p.get_y() > 258:
++                p.add_page()
++            y = p.get_y()
++            self._card(p.l_margin, y, 174, 11, fill=SURFACE2)
++            p.set_xy(p.l_margin + 4, y + 2)
++            p.set_font("helvetica", "", 8.6)
++            p.set_text_color(*INK2)
++            p.cell(96, 7, str(r.get("label", ""))[:70])
++            p.set_font("helvetica", "B", 9)
++            p.set_text_color(*INK)
++            p.cell(52, 7, str(r.get("value", ""))[:36], align="R")
++            p.set_font("helvetica", "", 7.6)
++            p.set_text_color(*INK3)
++            p.cell(20, 7, str(r.get("date", "") or ""), align="R")
++            p.set_y(y + 13.5)
++        p.ln(4)
++
++    def _final_page(self):
++        p = self.pdf
++        p.add_page()
++        self._kicker("Groupe KA · contact")
++        p.set_font("helvetica", "B", 15)
++        p.set_text_color(*INK)
++        p.cell(0, 8, "Coordonnées du Groupe KA")
++        p.ln(12)
++        for email, role in EMAILS:
++            p.set_font("helvetica", "B", 10.5)
++            p.set_text_color(*INK)
++            p.cell(0, 6, email)
++            p.ln(5.5)
++            p.set_font("helvetica", "", 8.6)
++            p.set_text_color(*INK3)
++            p.cell(0, 5, role)
++            p.ln(8)
++        p.ln(2)
++        p.set_font("helvetica", "B", 10)
++        p.set_text_color(*GREEN)
++        p.cell(0, 6, "groupe-ka.com — le portail de l'écosystème ·Ka")
++        p.ln(10)
++        p.set_draw_color(*self.accent)
++        p.set_line_width(0.8)
++        p.line(p.l_margin, p.get_y(), p.l_margin + 30, p.get_y())
++        p.ln(4)
++        p.set_font("helvetica", "", 8.6)
++        p.set_text_color(*INK2)
++        p.multi_cell(160, 4.6, DISCLAIMER)
++        p.ln(4)
++        p.set_font("helvetica", "", 7.6)
++        p.set_text_color(*INK3)
++        p.multi_cell(
++            160, 4.2,
++            "Mentions : rapport généré automatiquement à partir des données réelles de la "
++            "plateforme au moment indiqué en couverture. Conditions d'utilisation, politique "
++            "de confidentialité et protection des renseignements personnels (Loi 25) : "
++            "groupe-ka.com/conditions · /confidentialite · /loi-25.",
++        )
++
++    def _toc_page(self):
++        # insérée après coup ? fpdf ne réordonne pas : on écrit le sommaire en
++        # page 2 en réservant la page lors du build (voir build()).
++        pass
++
++    def build(self) -> bytes:
++        p = self.pdf
++        p.alias_nb_pages()
++        self._cover()
++        if self.mode == "synthese":
++            p.add_page()
++            self._kpis()
++            self._records()
++            self._final_page()
++        else:
++            p.add_page()
++            toc_page_no = p.page_no()
++            p.add_page()
++            self._kpis()
++            for s in self.d.get("series") or []:
++                if s.get("kind") == "bar":
++                    self._bars(s.get("title", ""), [{"label": pt.get("t"), "value": pt.get("v")} for pt in (s.get("points") or [])], s.get("unit", ""))
++                else:
++                    self._line_chart(s)
++            for b in self.d.get("breakdowns") or []:
++                if b.get("kind") == "donut":
++                    self._donut(b)
++                else:
++                    self._bars(b.get("title", ""), b.get("items"))
++            geo = self.d.get("geo")
++            if geo:
++                self._bars(geo.get("title", "Répartition géographique"), geo.get("items"))
++            for t in self.d.get("tables") or []:
++                self._table(t)
++            self._records()
++            self._final_page()
++            # sommaire écrit sur la page réservée (page 2)
++            last_page = p.page
++            p.page = toc_page_no
++            p.set_y(22)
++            p.set_font("helvetica", "B", 15)
++            p.set_text_color(*INK)
++            p.cell(0, 8, "Sommaire")
++            p.ln(12)
++            p.set_font("helvetica", "", 9.5)
++            for title, page_no in self.toc:
++                p.set_text_color(*INK)
++                p.cell(140, 6.5, title[:80])
++                p.set_text_color(*INK3)
++                p.cell(0, 6.5, str(page_no), align="R")
++                p.ln(6.5)
++            p.page = last_page
++        return bytes(p.output())
++
++
++def filename(platform_id: str, period: str) -> str:
++    today = datetime.now(ZoneInfo("America/Toronto")).strftime("%Y-%m-%d")
++    return f"groupe-ka_{platform_id}_stats_{period}_{today}.pdf"

added creaka/stats.py +330 −0

++# ==============================================================================
++# Author: Simon-Pierre Boucher <contact@spboucher.ai>
++# File:   creaka/stats.py
++# Desc:   Tableau de bord analytique /api/stats/dashboard (contrat ka-stats
++#         SPEC.md) + rapport PDF Groupe-KA (/api/stats/report via kapdf.py).
++#         AUCUNE stat inventée : tout est calculé depuis creators/accounts/
++#         sync_log (first_seen converti en date locale, cache 5 min / période).
++# ==============================================================================
++from __future__ import annotations
++
++import json
++import sqlite3
++import time
++from datetime import date, datetime, timedelta, timezone
++from pathlib import Path
++from zoneinfo import ZoneInfo
++
++TZ = ZoneInfo("America/Toronto")
++ROOT = Path(__file__).resolve().parent.parent
++ECO_PATH = ROOT / "frontend" / "src" / "ka" / "ecosystem.json"
++
++CACHE_TTL = 300  # ≥ 5 min par période (SPEC §2)
++_CACHE: dict[tuple, tuple[float, dict]] = {}
++
++PERIOD_DAYS = {"auj": 1, "7j": 7, "30j": 30, "3m": 91, "6m": 182, "12m": 365}
++PERIOD_LABELS = {
++    "auj": "aujourd'hui", "7j": "7 jours", "30j": "30 jours", "3m": "3 mois",
++    "6m": "6 mois", "12m": "12 mois", "annee": "année en cours",
++    "tout": "toute la période",
++}
++
++PLAT_LBL = {
++    "instagram": "Instagram", "tiktok": "TikTok", "youtube": "YouTube",
++    "twitch": "Twitch", "kick": "Kick", "x": "X (Twitter)",
++    "facebook": "Facebook", "snapchat": "Snapchat", "substack": "Substack",
++    "patreon": "Patreon", "onlyfans": "OnlyFans", "linkedin": "LinkedIn",
++    "threads": "Threads", "podcast": "Balado", "site-web": "Site web",
++    "autre": "Autre",
++}
++NICHE_LBL = {
++    "humour": "Humour", "mode": "Mode", "beaute": "Beauté",
++    "lifestyle": "Lifestyle", "famille-parentalite": "Famille & parentalité",
++    "cuisine": "Cuisine", "gaming": "Gaming", "tech": "Tech",
++    "sport-fitness": "Sport & fitness", "plein-air": "Plein air",
++    "voyage": "Voyage", "musique": "Musique", "arts": "Arts", "danse": "Danse",
++    "education": "Éducation", "finance-affaires": "Finance & affaires",
++    "sante-mieux-etre": "Santé & mieux-être", "bouffe-resto": "Bouffe & resto",
++    "actualite-opinion": "Actualité & opinion", "autre": "Autre",
++}
++# bornes réelles de normalize.audience_tier (§6.3)
++TIER_LBL = [("nano", "Nano (< 10 k)"), ("micro", "Micro (10 k – 100 k)"),
++            ("macro", "Macro (100 k – 1 M)"), ("mega", "Méga (1 M et +)")]
++
++
++def site_info() -> dict:
++    """Identité Créa-Ka pour le PDF, lue dans ka/ecosystem.json (source commune)."""
++    try:
++        eco = json.loads(ECO_PATH.read_text(encoding="utf-8"))
++        s = next(x for x in eco["sites"] if x["id"] == "crea-ka")
++        return {"wordmark": s["wordmark"], "accent": s["accent"],
++                "domain": s["domain"], "tagline": s.get("tagline", "")}
++    except Exception:
++        return {"wordmark": "Créa·Ka", "accent": "#7048e8",
++                "domain": "www.crea-ka.com",
++                "tagline": "Les créateurs d'ici, tous leurs liens"}
++
++
++# --- utilitaires -----------------------------------------------------------------
++
++def _local_date(iso: str) -> date | None:
++    """ISO-8601 UTC (…Z) → date locale (America/Toronto)."""
++    if not iso:
++        return None
++    try:
++        dt = datetime.strptime(iso[:19], "%Y-%m-%dT%H:%M:%S")
++        return dt.replace(tzinfo=timezone.utc).astimezone(TZ).date()
++    except ValueError:
++        try:
++            return date.fromisoformat(iso[:10])
++        except ValueError:
++            return None
++
++
++def _parse_date(s: str) -> date | None:
++    try:
++        return date.fromisoformat(s.strip()[:10])
++    except (ValueError, AttributeError):
++        return None
++
++
++def _pct(cur: float, prev: float) -> float | None:
++    """Variation vs période précédente ; None si la base est nulle (pas de faux %)."""
++    if not prev:
++        return None
++    return round(100.0 * (cur - prev) / prev, 1)
++
++
++def _delta(cur: float, prev: float) -> dict:
++    p = _pct(cur, prev)
++    if p is None:
++        return {"delta_pct": None}
++    return {"delta_pct": p, "direction": "up" if p >= 0 else "down"}
++
++
++def _fr_int(n: int) -> str:
++    return f"{int(n):,}".replace(",", " ")
++
++
++# --- construction du tableau de bord ----------------------------------------------
++
++def _resolve_period(period: str, d_from: str, d_to: str,
++                    min_day: date | None) -> tuple[date, date, str]:
++    today = datetime.now(TZ).date()
++    f, t = _parse_date(d_from), _parse_date(d_to)
++    if f and t:
++        if t < f:
++            f, t = t, f
++        return f, t, f"du {f.isoformat()} au {t.isoformat()}"
++    if period == "annee":
++        return date(today.year, 1, 1), today, f"année {today.year}"
++    if period == "tout":
++        # depuis la première fiche (plancher 30 j pour des courbes lisibles)
++        start = min(min_day or today, today - timedelta(days=29))
++        return start, today, PERIOD_LABELS["tout"]
++    days = PERIOD_DAYS.get(period, 30)
++    label = PERIOD_LABELS.get(period, PERIOD_LABELS["30j"])
++    return today - timedelta(days=days - 1), today, label
++
++
++def _build(con: sqlite3.Connection, period: str, d_from: str, d_to: str) -> dict:
++    # fiches actives (mineurs & opt-out exclus, comme partout dans l'API)
++    creators = con.execute(
++        "SELECT display_name, first_seen, niches, audience_tier, region, "
++        "total_reach, primary_platform FROM creators "
++        "WHERE status='active' AND is_minor=0").fetchall()
++    days_seen = [d for d in (_local_date(r["first_seen"]) for r in creators) if d]
++    min_day = min(days_seen) if days_seen else None
++    p_from, p_to, p_label = _resolve_period(period, d_from, d_to, min_day)
++    span = (p_to - p_from).days + 1
++    prev_to = p_from - timedelta(days=1)
++    prev_from = prev_to - timedelta(days=span - 1)
++
++    # ajouts par jour (toute l'historique) — sert séries, heatmap, records
++    adds_by_day: dict[date, int] = {}
++    for d in days_seen:
++        adds_by_day[d] = adds_by_day.get(d, 0) + 1
++
++    def added_between(a: date, b: date) -> int:
++        return sum(v for d, v in adds_by_day.items() if a <= d <= b)
++
++    def total_until(d: date) -> int:
++        return sum(v for dd, v in adds_by_day.items() if dd <= d)
++
++    # comptes reliés par plateforme (comptes « à vérifier » exclus, §12.1)
++    plat_rows = con.execute(
++        "SELECT a.platform, COUNT(*) c FROM accounts a "
++        "JOIN creators c2 ON c2.id=a.creator_id "
++        "WHERE a.needs_review=0 AND c2.status='active' AND c2.is_minor=0 "
++        "GROUP BY a.platform ORDER BY c DESC").fetchall()
++    n_accounts = sum(r["c"] for r in plat_rows)
++
++    # niches (multivaluées) — global + ajouts sur la période
++    niche_total: dict[str, int] = {}
++    niche_period: dict[str, int] = {}
++    tier_total: dict[str, int] = {}
++    region_total: dict[str, int] = {}
++    for r in creators:
++        d = _local_date(r["first_seen"])
++        for n in (r["niches"] or "").split(","):
++            if not n:
++                continue
++            niche_total[n] = niche_total.get(n, 0) + 1
++            if d and p_from <= d <= p_to:
++                niche_period[n] = niche_period.get(n, 0) + 1
++        tier_total[r["audience_tier"]] = tier_total.get(r["audience_tier"], 0) + 1
++        if r["region"]:
++            region_total[r["region"]] = region_total.get(r["region"], 0) + 1
++
++    # ---- KPI (deltas seulement quand ils sont réellement calculables) ----
++    added_cur = added_between(p_from, p_to)
++    added_prev = added_between(prev_from, prev_to)
++    total_end = total_until(p_to)
++    total_start = total_until(prev_to)
++    kpis = [
++        {"id": "creators", "label": "Créateurs au répertoire", "value": total_end,
++         "unit": "", **_delta(total_end, total_start)},
++        {"id": "accounts", "label": "Comptes publics reliés", "value": n_accounts,
++         "unit": "", "delta_pct": None},
++        {"id": "platforms", "label": "Plateformes couvertes",
++         "value": len(plat_rows), "unit": "", "delta_pct": None},
++        {"id": "added", "label": "Créateurs ajoutés sur la période",
++         "value": added_cur, "unit": "", **_delta(added_cur, added_prev)},
++        {"id": "niches", "label": "Niches couvertes", "value": len(niche_total),
++         "unit": "", "delta_pct": None},
++    ]
++    reach = sum(r["total_reach"] for r in creators if r["total_reach"])
++    if reach:
++        kpis.append({"id": "reach", "label": "Portée cumulée connue",
++                     "value": reach, "unit": "abonnés", "delta_pct": None})
++
++    # ---- séries quotidiennes ----
++    day_axis = [p_from + timedelta(days=i) for i in range(span)]
++    pts_added = [{"t": d.isoformat(), "v": adds_by_day.get(d, 0)} for d in day_axis]
++    cmp_added = [{"t": (prev_from + timedelta(days=i)).isoformat(),
++                  "v": adds_by_day.get(prev_from + timedelta(days=i), 0)}
++                 for i in range(span)]
++    running, pts_cumul = 0, []
++    before = total_until(p_from - timedelta(days=1))
++    running = before
++    for d in day_axis:
++        running += adds_by_day.get(d, 0)
++        pts_cumul.append({"t": d.isoformat(), "v": running})
++    series = [
++        {"id": "added", "title": "Créateurs ajoutés par jour", "unit": "créateurs",
++         "kind": "line", "points": pts_added,
++         **({"compare": cmp_added} if any(c["v"] for c in cmp_added) else {})},
++        {"id": "cumul", "title": "Taille cumulative du répertoire",
++         "unit": "créateurs", "kind": "line", "points": pts_cumul},
++    ]
++
++    # ---- répartitions ----
++    breakdowns = [
++        {"id": "platforms", "title": "Comptes reliés par plateforme",
++         "kind": "donut",
++         "items": [{"label": PLAT_LBL.get(r["platform"], r["platform"]),
++                    "value": r["c"]} for r in plat_rows]},
++        {"id": "tiers", "title": "Créateurs par taille d'audience", "kind": "bar",
++         "items": [{"label": lbl, "value": tier_total.get(t, 0)}
++                   for t, lbl in TIER_LBL if tier_total.get(t)]},
++        {"id": "niches", "title": "Top niches", "kind": "bar",
++         "items": [{"label": NICHE_LBL.get(n, n), "value": v}
++                   for n, v in sorted(niche_total.items(), key=lambda x: -x[1])[:12]]},
++    ]
++
++    geo = None
++    if region_total:
++        geo = {"title": "Par région déclarée (quand le créateur la rend publique)",
++               "items": [{"label": k, "value": v} for k, v in
++                         sorted(region_total.items(), key=lambda x: -x[1])]}
++
++    # ---- heatmap : ajouts par jour, toute l'historique ----
++    heatmap = {"title": "Ajouts au répertoire",
++               "cells": [{"date": d.isoformat(), "value": v}
++                         for d, v in sorted(adds_by_day.items())]}
++
++    # ---- tableaux ----
++    top = sorted((r for r in creators if r["total_reach"]),
++                 key=lambda r: -r["total_reach"])[:100]
++    tables = []
++    if top:
++        tables.append({
++            "id": "top_creators", "title": "Top créateurs par audience connue",
++            "columns": ["Créateur", "Taille", "Plateforme principale",
++                        "Abonnés cumulés", "Niches"],
++            "rows": [[r["display_name"],
++                      dict(TIER_LBL).get(r["audience_tier"], r["audience_tier"]),
++                      PLAT_LBL.get(r["primary_platform"], r["primary_platform"]),
++                      r["total_reach"],
++                      ", ".join(NICHE_LBL.get(n, n)
++                                for n in (r["niches"] or "").split(",")[:2] if n)]
++                     for r in top]})
++    n_active = len(creators)
++    tables.append({
++        "id": "niches", "title": "Répartition par niche",
++        "columns": ["Niche", "Créateurs", "Ajoutés sur la période", "Part"],
++        "rows": [[NICHE_LBL.get(n, n), v, niche_period.get(n, 0),
++                  f"{100 * v / max(1, n_active):.1f} %".replace(".", ",")]
++                 for n, v in sorted(niche_total.items(), key=lambda x: -x[1])]})
++
++    # ---- records & faits marquants (générés depuis les données) ----
++    records = []
++    in_period = {d: v for d, v in adds_by_day.items() if p_from <= d <= p_to}
++    if in_period:
++        best = max(in_period.items(), key=lambda x: x[1])
++        records.append({"label": "Jour record d'ajouts (période)",
++                        "value": f"{_fr_int(best[1])} créateurs",
++                        "date": best[0].isoformat()})
++    if niche_period:
++        bn = max(niche_period.items(), key=lambda x: x[1])
++        records.append({"label": "Niche la plus dynamique (ajouts sur la période)",
++                        "value": f"{NICHE_LBL.get(bn[0], bn[0])} — {_fr_int(bn[1])}"})
++    if plat_rows:
++        records.append({"label": "Plateforme la plus reliée",
++                        "value": f"{PLAT_LBL.get(plat_rows[0]['platform'], plat_rows[0]['platform'])}"
++                                 f" — {_fr_int(plat_rows[0]['c'])} comptes"})
++    if top:
++        records.append({"label": "Plus grande portée connue",
++                        "value": f"{top[0]['display_name']} — "
++                                 f"{_fr_int(top[0]['total_reach'])} abonnés"})
++    last_sync = con.execute(
++        "SELECT ts FROM sync_log ORDER BY id DESC LIMIT 1").fetchone()
++    if last_sync and last_sync["ts"]:
++        try:
++            dt = datetime.strptime(last_sync["ts"][:19], "%Y-%m-%dT%H:%M:%S") \
++                .replace(tzinfo=timezone.utc).astimezone(TZ)
++            records.append({"label": "Dernière synchronisation des connecteurs",
++                            "value": dt.strftime("%H:%M (heure de l'Est)"),
++                            "date": dt.date().isoformat()})
++        except ValueError:
++            pass
++
++    out = {
++        "updated": datetime.now(TZ).isoformat(timespec="seconds"),
++        "period": {"from": p_from.isoformat(), "to": p_to.isoformat(),
++                   "label": p_label},
++        "kpis": kpis,
++        "series": series,
++        "breakdowns": breakdowns,
++        "heatmap": heatmap,
++        "tables": tables,
++        "records": records,
++    }
++    if geo:
++        out["geo"] = geo
++    return out
++
++
++def dashboard(con: sqlite3.Connection, period: str = "30j",
++              date_from: str = "", date_to: str = "") -> dict:
++    """Point d'entrée avec cache mémoire (TTL 5 min par combinaison de période)."""
++    key = (period, date_from, date_to)
++    now = time.time()
++    hit = _CACHE.get(key)
++    if hit and now - hit[0] < CACHE_TTL:
++        return hit[1]
++    data = _build(con, period, date_from, date_to)
++    if len(_CACHE) > 64:  # borne dure (plages personnalisées illimitées)
++        _CACHE.clear()
++    _CACHE[key] = (now, data)
++    return data

modified creaka/web.py +37 −2

				`@@ -12,10 +12,11 @@ from pathlib import Path`
12	from fastapi import FastAPI, HTTPException, Query	12	from fastapi import FastAPI, HTTPException, Query
13	from fastapi.middleware.cors import CORSMiddleware	13	from fastapi.middleware.cors import CORSMiddleware
14	from fastapi.middleware.gzip import GZipMiddleware	14	from fastapi.middleware.gzip import GZipMiddleware
15	−from fastapi.responses import FileResponse	15	+from fastapi.responses import FileResponse, Response
16	from pydantic import BaseModel, Field	16	from pydantic import BaseModel, Field
17		17
18	−from . import auth, db, ethics	18	+from . import auth, db, ethics, kapdf
		19	+from . import stats as stats_mod
19	from .normalize import NICHES, PLATFORMS, REGIONS	20	from .normalize import NICHES, PLATFORMS, REGIONS
20		21
21	ROOT = Path(__file__).resolve().parent.parent	22	ROOT = Path(__file__).resolve().parent.parent
				`@@ -70,6 +71,40 @@ def get_stats():`
70	return db.stats(_con)	71	return db.stats(_con)
71		72
72		73
		74	+_PERIODS_OK = {"auj", "7j", "30j", "3m", "6m", "12m", "annee", "tout"}
		75	+
		76	+
		77	+@app.get("/api/stats/dashboard")
		78	+def stats_dashboard(period: str = "30j",
		79	+ date_from: str = Query("", alias="from"),
		80	+ date_to: str = Query("", alias="to")):
		81	+ """Tableau de bord analytique (contrat ka-stats SPEC.md) — cache 5 min."""
		82	+ if period not in _PERIODS_OK and not (date_from and date_to):
		83	+ raise HTTPException(400, "période inconnue "
		84	+ "(auj\|7j\|30j\|3m\|6m\|12m\|annee\|tout ou from/to)")
		85	+ return stats_mod.dashboard(_con, period=period,
		86	+ date_from=date_from, date_to=date_to)
		87	+
		88	+
		89	+@app.get("/api/stats/report")
		90	+def stats_report(period: str = "30j", mode: str = "complet",
		91	+ date_from: str = Query("", alias="from"),
		92	+ date_to: str = Query("", alias="to")):
		93	+ """Rapport PDF estampillé Groupe-KA (complet ou synthèse 2 pages)."""
		94	+ if mode not in ("complet", "synthese"):
		95	+ raise HTTPException(400, "mode invalide (complet\|synthese)")
		96	+ if period not in _PERIODS_OK and not (date_from and date_to):
		97	+ raise HTTPException(400, "période inconnue")
		98	+ dash = stats_mod.dashboard(_con, period=period,
		99	+ date_from=date_from, date_to=date_to)
		100	+ pdf = kapdf.GroupeKAReport(site=stats_mod.site_info(),
		101	+ dashboard=dash, mode=mode).build()
		102	+ fname = kapdf.filename("crea-ka", period)
		103	+ return Response(content=pdf, media_type="application/pdf",
		104	+ headers={"Content-Disposition":
		105	+ f'attachment; filename="{fname}"'})
		106	+
		107	+
73	@app.get("/api/taxonomies")	108	@app.get("/api/taxonomies")
74	def taxonomies():	109	def taxonomies():
75	return {"niches": sorted(NICHES), "plateformes": sorted(PLATFORMS),	110	return {"niches": sorted(NICHES), "plateformes": sorted(PLATFORMS),

modified frontend/dist/index.html +329 −27

+ .cpage-foot a{color:var(--green);font-weight:600}
+ /* ===== page stats ===== */
++.stats-page{padding-top:40px;padding-bottom:70px}
+ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:26px 0}
+ .tile{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
+   padding:18px 20px;box-shadow:var(--shadow-off-soft)}
+ .hrow .n{flex:none;font-family:var(--font-display);font-size:12.5px;font-weight:700;
+   color:var(--ink);min-width:44px;text-align:right}
++/* ===== page stats : tableau de bord ka-stats (SPEC) ===== */
++.stats-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between}
++.pdf-actions{display:flex;gap:8px;flex-wrap:wrap}
++.fresh-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;
++  font-family:var(--font-mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
++.pchips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:22px 0 2px}
++.pchip{border:1.5px solid var(--ink);background:var(--surface);border-radius:var(--r-ctl);
++  padding:8px 14px;min-height:44px;font-family:var(--font-display);font-size:12.5px;
++  font-weight:700;color:var(--ink-2);box-shadow:3px 3px 0 rgba(20,24,20,.08);transition:.15s}
++.pchip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
++.pchip:active{transform:translate(2px,2px);box-shadow:none}
++.pdates{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
++.pdates input{border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:8px 10px;
++  font:inherit;font-size:13px;background:var(--surface);min-height:44px;max-width:160px}
++@media(max-width:760px){.pchips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
++  padding:4px 0 8px;scrollbar-width:none}
++ .pchips::-webkit-scrollbar{display:none}
++ .pchip{flex:none}.pdates{flex:none}.pdates input{font-size:16px}}
++@media(max-width:640px){.pchips{margin-left:-16px;margin-right:-16px;
++  padding-left:16px;padding-right:16px}}
++.tile-d{font-family:var(--font-mono);font-size:10.5px;font-weight:700;margin-top:8px}
++.tile-d.up{color:var(--green)}.tile-d.down{color:var(--danger)}
++.tile.hero-tile .tile-d.up{color:var(--accent-soft)}
++.viz-grid{display:grid;gap:22px;grid-template-columns:1fr;margin-bottom:22px}
++@media(min-width:960px){.viz-grid.two{grid-template-columns:1fr 1fr}}
++.viz-grid .viz-card{margin-bottom:0}
++.viz-grid>*,.dt,.lc{min-width:0}
++.dt .viz-card,.lc .viz-card{margin-bottom:0}
++.lc svg{width:100%;height:auto;display:block;touch-action:pan-y}
++.lc-legend{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 0}
++.leg-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;
++  font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;
++  letter-spacing:.06em;color:var(--ink-2);min-height:44px}
++.leg-btn[aria-pressed="false"]{opacity:.35}
++.leg-swatch{width:18px;height:0;border-top:3px solid var(--accent)}
++.leg-swatch.cmp{border-top-style:dashed;border-top-color:var(--ink-3)}
++.lc-tip{display:inline-flex;margin-top:6px;visibility:hidden}
++.donut-wrap{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:14px}
++.donut-legend{list-style:none;margin:0;padding:0;display:grid;gap:7px;flex:1;min-width:200px}
++.donut-legend li{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
++.donut-legend .dsw{width:11px;height:11px;border-radius:3px;border:1px solid var(--ink);
++  background:var(--accent);flex:none}
++.donut-legend .dlbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
++.donut-legend b{font-family:var(--font-mono);font-size:11px}
++.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
++.dtable table{width:100%;border-collapse:collapse;font-size:13px}
++.dtable th{cursor:pointer;text-align:left;padding:8px 10px;background:var(--ink);
++  color:var(--paper);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
++  letter-spacing:.06em;white-space:nowrap;user-select:none}
++.dtable td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
++.dtable tbody tr:nth-child(even) td{background:var(--surface-2)}
++.dtable .dt-q{border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:9px 13px;
++  font:inherit;font-size:13px;background:var(--surface);max-width:230px;min-height:44px}
++@media(max-width:760px){.dtable .dt-q{font-size:16px;max-width:100%;flex:1}}
++.dtable-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;
++  flex-wrap:wrap;gap:8px}
++.records-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:14px}
++.record{background:var(--surface-2);border:1.5px solid var(--ink);border-radius:var(--r-card);
++  padding:13px 16px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;
++  box-shadow:var(--shadow-off-soft)}
++.record .r-lbl{font-size:12.5px;color:var(--ink-2)}
++.record .r-val{text-align:right;font-family:var(--font-display);font-size:14.5px;font-weight:700}
++.hm svg{min-width:520px;width:100%;height:auto}
++.empty-block{border:1.5px dashed var(--ink);border-radius:var(--r-card);
++  background:var(--surface-2);padding:20px}
++.stats-sect{font-size:17px;text-transform:uppercase;margin:34px 0 14px}
++
+ /* ===== retrait ===== */
+ .optout-page{max-width:620px;margin:0 auto;padding:44px 0 70px}
+ .optout-page h1{font-size:clamp(26px,4vw,32px);margin:12px 0;text-transform:uppercase}
+  bindNav();window.scrollTo(0,0);
+ }
++/* ---------- page stats : tableau de bord analytique (contrat ka-stats) ---------- */
++const ST={period:"30j",from:"",to:"",data:null,hide:{},tbl:{}};
++const PERIODS_UI=[["auj","Aujourd'hui"],["7j","7 jours"],["30j","30 jours"],["3m","3 mois"],
++ ["6m","6 mois"],["12m","12 mois"],["annee","Année en cours"],["tout","Tout"]];
++const fmtPct=v=>(v>=0?"+":"")+v.toLocaleString("fr-CA",{maximumFractionDigits:1})+" %";
++const emptyBlock=t=>`<div class="empty-block"><b style="font-family:var(--font-display);font-size:14px">${esc(t)}</b>
++ <p class="klabel" style="margin:6px 0 0">Pas encore mesuré — aucune donnée disponible pour cette période.</p></div>`;
++
++function kpiHtml(k,i){
++ const v=k.value,hero=i===0;
++ const num=typeof v==="number"?(v>=1e6?fmt.format(v):fmtFull.format(v)):esc(v);
++ let delta="";
++ if(k.delta_pct!==undefined&&k.delta_pct!==null){
++  const up=(k.direction||(k.delta_pct>=0?"up":"down"))==="up";
++  delta=`<div class="tile-d ${up?"up":"down"}">${up?"▲":"▼"} ${fmtPct(k.delta_pct)} <span style="opacity:.6">vs période préc.</span></div>`;}
++ return `<div class="tile${hero?" hero-tile":""}"${typeof v==="number"?` title="${fmtFull.format(v)}"`:""}>
++  <div class="tile-v">${num}${k.unit?`<span style="font-size:.42em;opacity:.6"> ${esc(k.unit)}</span>`:""}</div>
++  <div class="tile-k">${esc(k.label)}</div>${delta}</div>`;
++}
++
++/* --- courbe SVG : infobulle (pointeur), légende cliquable, comparaison N-1 --- */
++function lineGeom(s,hide){
++ const W=720,H=240,PL=54,PR=12,PT=14,PB=26,pts=s.points||[];
++ const all=[...(hide.cur?[]:pts),...(!hide.cmp&&s.compare?s.compare:[])];
++ const vmax=Math.max(...all.map(p=>p.v),1),vmin=Math.min(0,...all.map(p=>p.v));
++ const X=(i,n)=>PL+(W-PL-PR)*i/((n||pts.length)-1);
++ const Y=v=>PT+(H-PT-PB)*(1-(v-vmin)/((vmax-vmin)||1));
++ return{W,H,PL,PR,PT,PB,vmax,vmin,X,Y};
++}
++function lineFigure(s,hide){
++ const pts=s.points||[];
++ if(pts.length<2)return emptyBlock(s.title);
++ const g=lineGeom(s,hide),{W,H,PL,PR,PT,PB,vmax,vmin,X,Y}=g;
++ const path=arr=>arr.map((p,i)=>`${i?"L":"M"}${X(i,arr.length).toFixed(1)},${Y(p.v).toFixed(1)}`).join("");
++ let grid="";
++ for(let k=0;k<5;k++){const y=PT+(H-PT-PB)*k/4,v=vmax-(vmax-vmin)*k/4;
++  grid+=`<line x1="${PL}" x2="${W-PR}" y1="${y.toFixed(1)}" y2="${y.toFixed(1)}" stroke="var(--line)"/>
++   <text x="${PL-6}" y="${(y+3).toFixed(1)}" text-anchor="end" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${fmtFull.format(Math.round(v))}</text>`;}
++ const xl=[0,Math.floor(pts.length/2),pts.length-1].map(i=>
++  `<text x="${X(i).toFixed(1)}" y="${H-8}" text-anchor="middle" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${esc(pts[i].t)}</text>`).join("");
++ return `<div class="viz-card">
++  <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center">
++   <h2>${esc(s.title)}</h2>
++   <span class="lc-legend">
++    <button type="button" class="leg-btn" data-leg="cur" aria-pressed="${!hide.cur}"><span class="leg-swatch"></span>Période courante</button>
++    ${s.compare?`<button type="button" class="leg-btn" data-leg="cmp" aria-pressed="${!hide.cmp}"><span class="leg-swatch cmp"></span>Période comparée</button>`:""}
++   </span></div>
++  <svg viewBox="0 0 ${g.W} ${g.H}" role="img" aria-label="${esc(s.title)}" style="margin-top:10px">
++   ${grid}${xl}
++   ${!hide.cmp&&s.compare&&s.compare.length>1?`<path d="${path(s.compare)}" fill="none" stroke="var(--ink-3)" stroke-width="1.4" stroke-dasharray="4 4"/>`:""}
++   ${!hide.cur?`<path d="${path(pts)}" fill="none" stroke="var(--accent)" stroke-width="2.4"/>`:""}
++   <g class="lc-cursor" style="display:none">
++    <line y1="${PT}" y2="${H-PB}" stroke="var(--ink)" stroke-dasharray="2 3"/>
++    <circle r="4" fill="var(--accent)" stroke="var(--ink)" stroke-width="1.5"/></g>
++  </svg><span class="chip lc-tip">&nbsp;</span>`+
++ `</div>`;
++}
++function mountLine(el,s){
++ const hide=ST.hide[s.id]||(ST.hide[s.id]={cur:false,cmp:false});
++ const render=()=>{
++  el.innerHTML=lineFigure(s,hide);
++  el.querySelectorAll("[data-leg]").forEach(b=>b.addEventListener("click",()=>{
++   hide[b.dataset.leg]=!hide[b.dataset.leg];render();}));
++  const svg=el.querySelector("svg");if(!svg)return;
++  const pts=s.points,g=lineGeom(s,hide);
++  const cursor=el.querySelector(".lc-cursor"),tip=el.querySelector(".lc-tip");
++  const cl=cursor.querySelector("line"),cc=cursor.querySelector("circle");
++  svg.addEventListener("pointermove",e=>{
++   const r=svg.getBoundingClientRect();
++   const fx=(e.clientX-r.left)/r.width*g.W;
++   let i=Math.round((fx-g.PL)/(g.W-g.PL-g.PR)*(pts.length-1));
++   i=Math.max(0,Math.min(pts.length-1,i));
++   const x=g.X(i).toFixed(1);
++   cl.setAttribute("x1",x);cl.setAttribute("x2",x);
++   cc.setAttribute("cx",x);cc.setAttribute("cy",g.Y(pts[i].v).toFixed(1));
++   cursor.style.display="";
++   const cmp=s.compare&&!hide.cmp&&s.compare[i]?` · N-1 : ${fmtFull.format(s.compare[i].v)}`:"";
++   tip.innerHTML=`${esc(pts[i].t)} — <b>&nbsp;${fmtFull.format(pts[i].v)}${s.unit?" "+esc(s.unit):""}</b><span style="color:var(--ink-3)">${cmp}</span>`;
++   tip.style.visibility="visible";});
++  svg.addEventListener("pointerleave",()=>{cursor.style.display="none";tip.style.visibility="hidden"});
++ };
++ render();
++}
++
++/* --- anneau (top 7 + « Autres ») --- */
++function donutHtml(b){
++ let rows=(b.items||[]).filter(i=>i.value>0);
++ if(!rows.length)return emptyBlock(b.title);
++ if(rows.length>8){const rest=rows.slice(7).reduce((s,r)=>s+r.value,0);
++  rows=rows.slice(0,7);rows.push({label:"Autres",value:rest});}
++ const total=rows.reduce((s,r)=>s+r.value,0);
++ const R=74,C=2*Math.PI*R,shades=[1,.78,.58,.42,.3,.22,.15,.1];let acc=0;
++ const segs=rows.map((r,i)=>{const frac=r.value/total,off=acc;acc+=frac;
++  return `<circle cx="100" cy="100" r="${R}" fill="none" stroke="var(--accent)" stroke-opacity="${shades[i%8]}"
++   stroke-width="30" stroke-dasharray="${(frac*C).toFixed(2)} ${C.toFixed(2)}" stroke-dashoffset="${(-off*C).toFixed(2)}"
++   transform="rotate(-90 100 100)"><title>${esc(r.label)} — ${fmtFull.format(r.value)}</title></circle>`;}).join("");
++ const leg=rows.map((r,i)=>`<li><span class="dsw" style="opacity:${shades[i%8]}"></span>
++  <span class="dlbl" title="${esc(r.label)} — ${fmtFull.format(r.value)}">${esc(r.label)}</span>
++  <b>${(100*r.value/total).toFixed(1).replace(".",",")} %</b></li>`).join("");
++ return `<div class="viz-card"><h2>${esc(b.title)}</h2><div class="donut-wrap">
++  <svg viewBox="0 0 200 200" role="img" aria-label="${esc(b.title)}" style="width:180px;max-width:100%">${segs}
++   <circle cx="100" cy="100" r="${R}" fill="none" stroke="var(--ink)" opacity=".5"/></svg>
++  <ul class="donut-legend">${leg}</ul></div></div>`;
++}
++
++/* --- barres horizontales (répartitions, géo) --- */
++function barsHtml(title,items,sub){
++ const rows=(items||[]).slice(0,14);
++ if(!rows.length)return emptyBlock(title);
++ const max=Math.max(...rows.map(r=>r.value),1);
++ return `<div class="viz-card"><h2>${esc(title)}</h2>${sub?`<div class="viz-sub">${esc(sub)}</div>`:`<div style="height:14px"></div>`}
++  ${rows.map(r=>`<div class="hrow" title="${esc(r.label)} — ${fmtFull.format(r.value)}">
++   <span class="hrow-label">${esc(r.label)}</span>
++   <span class="hbar"><i style="width:${Math.max(2,Math.round(r.value/max*100))}%"></i></span>
++   <span class="n">${fmtFull.format(r.value)}</span></div>`).join("")}</div>`;
++}
++
++/* --- calendrier de chaleur (26 dernières semaines) --- */
++function heatmapHtml(h){
++ const cells=h&&h.cells||[];
++ if(!cells.length)return emptyBlock(h?h.title:"Activité");
++ const byDate=new Map(cells.map(c=>[c.date,c.value]));
++ const dates=cells.map(c=>c.date).sort();
++ const end=new Date(dates[dates.length-1]+"T12:00:00");
++ const max=Math.max(...cells.map(c=>c.value),1);
++ const weeks=26,cols=[];const cur=new Date(end);
++ cur.setDate(cur.getDate()-(weeks*7-1));
++ for(let w=0;w<weeks;w++){const col=[];
++  for(let d=0;d<7;d++){const iso=cur.toISOString().slice(0,10);
++   col.push({date:iso,v:byDate.get(iso)||0});cur.setDate(cur.getDate()+1);}
++  cols.push(col);}
++ const rects=cols.map((col,w)=>col.map((c,d)=>
++  `<rect x="${w*14}" y="${d*14}" width="12" height="12" rx="2.5"
++    fill="${c.v?"var(--accent)":"rgba(20,24,20,0.07)"}" fill-opacity="${c.v?(0.25+0.75*c.v/max).toFixed(2):1}"
++    stroke="rgba(20,24,20,0.15)" stroke-width="0.5"><title>${c.date} — ${fmtFull.format(c.v)}</title></rect>`).join("")).join("");
++ return `<div class="viz-card hm"><h2>${esc(h.title)}</h2><div class="viz-sub">26 dernières semaines</div>
++  <div class="tbl-wrap"><svg viewBox="0 0 ${weeks*14} ${7*14}" role="img" aria-label="${esc(h.title)}">${rects}</svg></div></div>`;
++}
++
++/* --- tableau : tri par colonne, recherche, pagination 25/pg --- */
++function mountTable(el,spec){
++ const st=ST.tbl[spec.id]||(ST.tbl[spec.id]={q:"",sort:null,page:0});
++ el.innerHTML=`<div class="viz-card dtable">
++  <div style="display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center">
++   <h2>${esc(spec.title)}</h2>
++   <input class="dt-q" placeholder="Rechercher…" value="${esc(st.q)}" aria-label="Rechercher dans ${esc(spec.title)}">
++  </div><div class="dt-body"></div></div>`;
++ const body=el.querySelector(".dt-body"),qi=el.querySelector(".dt-q");
++ const num=x=>typeof x==="number"?x:parseFloat(String(x).replace(/[^\d.,-]/g,"").replace(",","."));
++ const render=()=>{
++  let rows=spec.rows||[];
++  if(st.q){const q=st.q.toLowerCase();
++   rows=rows.filter(r=>r.some(c=>String(c).toLowerCase().includes(q)));}
++  if(st.sort){const{col,dir}=st.sort;
++   rows=[...rows].sort((a,b)=>{const nx=num(a[col]),ny=num(b[col]);
++    if(!Number.isNaN(nx)&&!Number.isNaN(ny))return(nx-ny)*dir;
++    return String(a[col]).localeCompare(String(b[col]),"fr")*dir;});}
++  const pages=Math.max(1,Math.ceil(rows.length/25));
++  st.page=Math.min(st.page,pages-1);const cur=st.page;
++  body.innerHTML=`<div class="tbl-wrap" style="margin-top:12px"><table><thead><tr>
++    ${spec.columns.map((c,i)=>`<th data-col="${i}" aria-sort="${st.sort&&st.sort.col===i?(st.sort.dir===1?"ascending":"descending"):"none"}">${esc(c)} ${st.sort&&st.sort.col===i?(st.sort.dir===1?"▲":"▼"):"↕"}</th>`).join("")}
++   </tr></thead><tbody>
++    ${rows.slice(cur*25,(cur+1)*25).map(r=>`<tr>${r.map(c=>`<td>${typeof c==="number"?fmtFull.format(c):esc(c)}</td>`).join("")}</tr>`).join("")||`<tr><td colspan="${spec.columns.length}" style="color:var(--ink-3)">Aucun résultat.</td></tr>`}
++   </tbody></table></div>
++   <div class="dtable-foot"><span class="klabel">${fmtFull.format(rows.length)} ligne${rows.length>1?"s":""}</span>
++    <span style="display:flex;gap:6px;align-items:center">
++     <button type="button" class="btn btn-ghost dt-prev"${cur===0?" disabled":""}>←</button>
++     <span class="chip">${cur+1} / ${pages}</span>
++     <button type="button" class="btn btn-ghost dt-next"${cur>=pages-1?" disabled":""}>→</button></span></div>`;
++  body.querySelectorAll("th").forEach(th=>th.addEventListener("click",()=>{
++   const col=+th.dataset.col;
++   st.sort={col,dir:st.sort&&st.sort.col===col&&st.sort.dir===1?-1:1};render();}));
++  const prev=body.querySelector(".dt-prev"),next=body.querySelector(".dt-next");
++  prev.addEventListener("click",()=>{st.page=Math.max(0,cur-1);render()});
++  next.addEventListener("click",()=>{st.page=Math.min(pages-1,cur+1);render()});
++ };
++ qi.addEventListener("input",deb(()=>{st.q=qi.value;st.page=0;render()},250));
++ render();
++}
++
++/* --- barre de période + boutons PDF --- */
++function periodBar(){
++ const customOn=!!(ST.from&&ST.to);
++ return `<div class="pchips" role="group" aria-label="Période d'analyse">
++  ${PERIODS_UI.map(([id,l])=>`<button type="button" class="pchip" data-period="${id}" aria-pressed="${!customOn&&ST.period===id}">${l}</button>`).join("")}
++  <span class="pdates"><input type="date" id="pfrom" value="${esc(ST.from)}" aria-label="Du">
++   <span class="klabel">au</span><input type="date" id="pto" value="${esc(ST.to)}" aria-label="Au"></span></div>`;
++}
++function bindPeriod(){
++ document.querySelectorAll(".pchip").forEach(b=>b.addEventListener("click",()=>{
++  ST.period=b.dataset.period;ST.from="";ST.to="";loadStatsData();}));
++ const pf=$("#pfrom"),pt=$("#pto");
++ const go=()=>{if(pf.value&&pt.value){ST.from=pf.value;ST.to=pt.value;loadStatsData();}};
++ pf.addEventListener("change",go);pt.addEventListener("change",go);
++}
++function bindPdf(){
++ const url=m=>{const p=new URLSearchParams({period:ST.period,mode:m});
++  if(ST.from&&ST.to){p.set("from",ST.from);p.set("to",ST.to);}
++  return "/api/stats/report?"+p;};
++ [["pdf-full","complet"],["pdf-syn","synthese"]].forEach(([id,m])=>{
++  const b=document.getElementById(id);if(!b)return;
++  b.addEventListener("click",async()=>{
++   const t=b.textContent;b.disabled=true;b.textContent="Génération…";
++   try{const r=await fetch(url(m));if(!r.ok)throw new Error(r.status);
++    const blob=await r.blob();
++    const fn=((r.headers.get("Content-Disposition")||"").match(/filename="?([^";]+)/)||[])[1]||"rapport-crea-ka.pdf";
++    const a=document.createElement("a");a.href=URL.createObjectURL(blob);a.download=fn;
++    document.body.appendChild(a);a.click();a.remove();
++    setTimeout(()=>URL.revokeObjectURL(a.href),4000);}
++   catch(e){alert("Échec de la génération du PDF — réessayez.");}
++   b.disabled=false;b.textContent=t;});});
++}
++
+ async function renderStats(){
+  document.title="Statistiques — Créa-Ka";
+  app.innerHTML=header()+`<div class="container"><div class="spin"></div></div>`+footer()+tabbar("stats");bindNav();
++ await loadStatsData(true);
++ window.scrollTo(0,0);
++}
++async function loadStatsData(first){
++ const main=$("#stats-main");if(main)main.style.opacity=".45";
++ let d;
++ try{const p=new URLSearchParams({period:ST.period});
++  if(ST.from&&ST.to){p.set("from",ST.from);p.set("to",ST.to);}
++  d=await api("/api/stats/dashboard?"+p);}
++ catch(e){app.innerHTML=header()+`<div class="container empty">Statistiques indisponibles pour le moment.</div>`+footer()+tabbar("stats");bindNav();return}
++ ST.data=d;renderStatsPage();
++}
++function renderStatsPage(){
++ const d=ST.data;
++ const upd=new Date(d.updated).toLocaleString("fr-CA",{dateStyle:"medium",timeStyle:"short"});
++ const donut=(d.breakdowns||[]).find(b=>b.kind==="donut");
++ const barsB=(d.breakdowns||[]).filter(b=>b.kind!=="donut");
+  app.innerHTML=header()+`
++ <div class="container stats-page" id="stats-main">
++  <div class="stats-head">
++   <div><span class="kicker">Tableau de bord — ${esc(d.period.label)}</span>
++    <h1 style="font-size:clamp(28px,4.6vw,46px);margin:12px 0 0;text-transform:uppercase">Les créateurs québécois <span class="hl">en chiffres.</span></h1>
++    <div class="fresh-row"><span>Mis à jour le ${esc(upd)}</span>
++     <button type="button" class="btn btn-ghost" id="st-refresh">↻ Rafraîchir</button></div></div>
++   <span class="pdf-actions">
++    <button type="button" class="btn btn-primary" id="pdf-full">⬇ Télécharger le rapport PDF</button>
++    <button type="button" class="btn btn-ghost" id="pdf-syn">Synthèse (2 p.)</button></span>
++  </div>
++  <div class="tiles">${(d.kpis||[]).map(kpiHtml).join("")||emptyBlock("Indicateurs")}</div>
++  ${periodBar()}
++  <p class="klabel" style="margin:6px 0 0">Période analysée : ${esc(d.period.from)} → ${esc(d.period.to)}</p>
++  <h2 class="stats-sect">Évolution</h2>
++  <div class="viz-grid">${(d.series||[]).map(s=>`<div class="lc" data-serie="${esc(s.id)}"></div>`).join("")||emptyBlock("Évolution")}</div>
++  <h2 class="stats-sect">Répartitions</h2>
++  <div class="viz-grid two">
++   ${donut?donutHtml(donut):""}
++   ${barsB.map(b=>barsHtml(b.title,b.items)).join("")}
++   ${d.geo?barsHtml(d.geo.title,d.geo.items):""}
+   </div>
++  ${d.heatmap?`<h2 class="stats-sect">Activité</h2>${heatmapHtml(d.heatmap)}`:""}
++  ${(d.tables||[]).length?`<h2 class="stats-sect">Détails</h2><div style="display:grid;gap:22px">${(d.tables||[]).map(t=>`<div class="dt" data-table="${esc(t.id)}"></div>`).join("")}</div>`:""}
++  ${(d.records||[]).length?`<h2 class="stats-sect">Records & faits marquants</h2>
++   <div class="records-grid">${d.records.map(r=>`<div class="record"><span class="r-lbl">${esc(r.label)}</span>
++    <span style="text-align:right"><span class="r-val">${esc(r.value)}</span>${r.date?`<span class="klabel" style="display:block">${esc(r.date)}</span>`:""}</span></div>`).join("")}</div>`:""}
++  <p style="font-size:12px;color:var(--ink-3);margin-top:30px">Données réelles de l'annuaire (fiches actives, comptes vérifiés) — aucune statistique estimée ou inventée.
++   Rapport PDF estampillé Groupe-KA disponible en haut de page.</p>
+  </div>`+footer()+tabbar("stats");
++ bindNav();bindPeriod();bindPdf();
++ $("#st-refresh").addEventListener("click",()=>loadStatsData());
++ (ST.data.series||[]).forEach(s=>{const el=document.querySelector(`.lc[data-serie="${s.id}"]`);if(el)mountLine(el,s);});
++ (ST.data.tables||[]).forEach(t=>{const el=document.querySelector(`.dt[data-table="${t.id}"]`);if(el)mountTable(el,t);});
+ }
+ /* ---------- page compte (KA ID) ---------- */

modified frontend/src/index.template.html +329 −27

+ .cpage-foot a{color:var(--green);font-weight:600}
+ /* ===== page stats ===== */
++.stats-page{padding-top:40px;padding-bottom:70px}
+ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:26px 0}
+ .tile{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-card);
+   padding:18px 20px;box-shadow:var(--shadow-off-soft)}
+ .hrow .n{flex:none;font-family:var(--font-display);font-size:12.5px;font-weight:700;
+   color:var(--ink);min-width:44px;text-align:right}
++/* ===== page stats : tableau de bord ka-stats (SPEC) ===== */
++.stats-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between}
++.pdf-actions{display:flex;gap:8px;flex-wrap:wrap}
++.fresh-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;
++  font-family:var(--font-mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
++.pchips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:22px 0 2px}
++.pchip{border:1.5px solid var(--ink);background:var(--surface);border-radius:var(--r-ctl);
++  padding:8px 14px;min-height:44px;font-family:var(--font-display);font-size:12.5px;
++  font-weight:700;color:var(--ink-2);box-shadow:3px 3px 0 rgba(20,24,20,.08);transition:.15s}
++.pchip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
++.pchip:active{transform:translate(2px,2px);box-shadow:none}
++.pdates{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
++.pdates input{border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:8px 10px;
++  font:inherit;font-size:13px;background:var(--surface);min-height:44px;max-width:160px}
++@media(max-width:760px){.pchips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
++  padding:4px 0 8px;scrollbar-width:none}
++ .pchips::-webkit-scrollbar{display:none}
++ .pchip{flex:none}.pdates{flex:none}.pdates input{font-size:16px}}
++@media(max-width:640px){.pchips{margin-left:-16px;margin-right:-16px;
++  padding-left:16px;padding-right:16px}}
++.tile-d{font-family:var(--font-mono);font-size:10.5px;font-weight:700;margin-top:8px}
++.tile-d.up{color:var(--green)}.tile-d.down{color:var(--danger)}
++.tile.hero-tile .tile-d.up{color:var(--accent-soft)}
++.viz-grid{display:grid;gap:22px;grid-template-columns:1fr;margin-bottom:22px}
++@media(min-width:960px){.viz-grid.two{grid-template-columns:1fr 1fr}}
++.viz-grid .viz-card{margin-bottom:0}
++.viz-grid>*,.dt,.lc{min-width:0}
++.dt .viz-card,.lc .viz-card{margin-bottom:0}
++.lc svg{width:100%;height:auto;display:block;touch-action:pan-y}
++.lc-legend{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 0}
++.leg-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;
++  font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;
++  letter-spacing:.06em;color:var(--ink-2);min-height:44px}
++.leg-btn[aria-pressed="false"]{opacity:.35}
++.leg-swatch{width:18px;height:0;border-top:3px solid var(--accent)}
++.leg-swatch.cmp{border-top-style:dashed;border-top-color:var(--ink-3)}
++.lc-tip{display:inline-flex;margin-top:6px;visibility:hidden}
++.donut-wrap{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:14px}
++.donut-legend{list-style:none;margin:0;padding:0;display:grid;gap:7px;flex:1;min-width:200px}
++.donut-legend li{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
++.donut-legend .dsw{width:11px;height:11px;border-radius:3px;border:1px solid var(--ink);
++  background:var(--accent);flex:none}
++.donut-legend .dlbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
++.donut-legend b{font-family:var(--font-mono);font-size:11px}
++.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
++.dtable table{width:100%;border-collapse:collapse;font-size:13px}
++.dtable th{cursor:pointer;text-align:left;padding:8px 10px;background:var(--ink);
++  color:var(--paper);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
++  letter-spacing:.06em;white-space:nowrap;user-select:none}
++.dtable td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
++.dtable tbody tr:nth-child(even) td{background:var(--surface-2)}
++.dtable .dt-q{border:1.5px solid var(--ink);border-radius:var(--r-ctl);padding:9px 13px;
++  font:inherit;font-size:13px;background:var(--surface);max-width:230px;min-height:44px}
++@media(max-width:760px){.dtable .dt-q{font-size:16px;max-width:100%;flex:1}}
++.dtable-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;
++  flex-wrap:wrap;gap:8px}
++.records-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:14px}
++.record{background:var(--surface-2);border:1.5px solid var(--ink);border-radius:var(--r-card);
++  padding:13px 16px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;
++  box-shadow:var(--shadow-off-soft)}
++.record .r-lbl{font-size:12.5px;color:var(--ink-2)}
++.record .r-val{text-align:right;font-family:var(--font-display);font-size:14.5px;font-weight:700}
++.hm svg{min-width:520px;width:100%;height:auto}
++.empty-block{border:1.5px dashed var(--ink);border-radius:var(--r-card);
++  background:var(--surface-2);padding:20px}
++.stats-sect{font-size:17px;text-transform:uppercase;margin:34px 0 14px}
++
+ /* ===== retrait ===== */
+ .optout-page{max-width:620px;margin:0 auto;padding:44px 0 70px}
+ .optout-page h1{font-size:clamp(26px,4vw,32px);margin:12px 0;text-transform:uppercase}
+  bindNav();window.scrollTo(0,0);
+ }
++/* ---------- page stats : tableau de bord analytique (contrat ka-stats) ---------- */
++const ST={period:"30j",from:"",to:"",data:null,hide:{},tbl:{}};
++const PERIODS_UI=[["auj","Aujourd'hui"],["7j","7 jours"],["30j","30 jours"],["3m","3 mois"],
++ ["6m","6 mois"],["12m","12 mois"],["annee","Année en cours"],["tout","Tout"]];
++const fmtPct=v=>(v>=0?"+":"")+v.toLocaleString("fr-CA",{maximumFractionDigits:1})+" %";
++const emptyBlock=t=>`<div class="empty-block"><b style="font-family:var(--font-display);font-size:14px">${esc(t)}</b>
++ <p class="klabel" style="margin:6px 0 0">Pas encore mesuré — aucune donnée disponible pour cette période.</p></div>`;
++
++function kpiHtml(k,i){
++ const v=k.value,hero=i===0;
++ const num=typeof v==="number"?(v>=1e6?fmt.format(v):fmtFull.format(v)):esc(v);
++ let delta="";
++ if(k.delta_pct!==undefined&&k.delta_pct!==null){
++  const up=(k.direction||(k.delta_pct>=0?"up":"down"))==="up";
++  delta=`<div class="tile-d ${up?"up":"down"}">${up?"▲":"▼"} ${fmtPct(k.delta_pct)} <span style="opacity:.6">vs période préc.</span></div>`;}
++ return `<div class="tile${hero?" hero-tile":""}"${typeof v==="number"?` title="${fmtFull.format(v)}"`:""}>
++  <div class="tile-v">${num}${k.unit?`<span style="font-size:.42em;opacity:.6"> ${esc(k.unit)}</span>`:""}</div>
++  <div class="tile-k">${esc(k.label)}</div>${delta}</div>`;
++}
++
++/* --- courbe SVG : infobulle (pointeur), légende cliquable, comparaison N-1 --- */
++function lineGeom(s,hide){
++ const W=720,H=240,PL=54,PR=12,PT=14,PB=26,pts=s.points||[];
++ const all=[...(hide.cur?[]:pts),...(!hide.cmp&&s.compare?s.compare:[])];
++ const vmax=Math.max(...all.map(p=>p.v),1),vmin=Math.min(0,...all.map(p=>p.v));
++ const X=(i,n)=>PL+(W-PL-PR)*i/((n||pts.length)-1);
++ const Y=v=>PT+(H-PT-PB)*(1-(v-vmin)/((vmax-vmin)||1));
++ return{W,H,PL,PR,PT,PB,vmax,vmin,X,Y};
++}
++function lineFigure(s,hide){
++ const pts=s.points||[];
++ if(pts.length<2)return emptyBlock(s.title);
++ const g=lineGeom(s,hide),{W,H,PL,PR,PT,PB,vmax,vmin,X,Y}=g;
++ const path=arr=>arr.map((p,i)=>`${i?"L":"M"}${X(i,arr.length).toFixed(1)},${Y(p.v).toFixed(1)}`).join("");
++ let grid="";
++ for(let k=0;k<5;k++){const y=PT+(H-PT-PB)*k/4,v=vmax-(vmax-vmin)*k/4;
++  grid+=`<line x1="${PL}" x2="${W-PR}" y1="${y.toFixed(1)}" y2="${y.toFixed(1)}" stroke="var(--line)"/>
++   <text x="${PL-6}" y="${(y+3).toFixed(1)}" text-anchor="end" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${fmtFull.format(Math.round(v))}</text>`;}
++ const xl=[0,Math.floor(pts.length/2),pts.length-1].map(i=>
++  `<text x="${X(i).toFixed(1)}" y="${H-8}" text-anchor="middle" font-size="10" fill="var(--ink-3)" font-family="var(--font-mono)">${esc(pts[i].t)}</text>`).join("");
++ return `<div class="viz-card">
++  <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center">
++   <h2>${esc(s.title)}</h2>
++   <span class="lc-legend">
++    <button type="button" class="leg-btn" data-leg="cur" aria-pressed="${!hide.cur}"><span class="leg-swatch"></span>Période courante</button>
++    ${s.compare?`<button type="button" class="leg-btn" data-leg="cmp" aria-pressed="${!hide.cmp}"><span class="leg-swatch cmp"></span>Période comparée</button>`:""}
++   </span></div>
++  <svg viewBox="0 0 ${g.W} ${g.H}" role="img" aria-label="${esc(s.title)}" style="margin-top:10px">
++   ${grid}${xl}
++   ${!hide.cmp&&s.compare&&s.compare.length>1?`<path d="${path(s.compare)}" fill="none" stroke="var(--ink-3)" stroke-width="1.4" stroke-dasharray="4 4"/>`:""}
++   ${!hide.cur?`<path d="${path(pts)}" fill="none" stroke="var(--accent)" stroke-width="2.4"/>`:""}
++   <g class="lc-cursor" style="display:none">
++    <line y1="${PT}" y2="${H-PB}" stroke="var(--ink)" stroke-dasharray="2 3"/>
++    <circle r="4" fill="var(--accent)" stroke="var(--ink)" stroke-width="1.5"/></g>
++  </svg><span class="chip lc-tip">&nbsp;</span>`+
++ `</div>`;
++}
++function mountLine(el,s){
++ const hide=ST.hide[s.id]||(ST.hide[s.id]={cur:false,cmp:false});
++ const render=()=>{
++  el.innerHTML=lineFigure(s,hide);
++  el.querySelectorAll("[data-leg]").forEach(b=>b.addEventListener("click",()=>{
++   hide[b.dataset.leg]=!hide[b.dataset.leg];render();}));
++  const svg=el.querySelector("svg");if(!svg)return;
++  const pts=s.points,g=lineGeom(s,hide);
++  const cursor=el.querySelector(".lc-cursor"),tip=el.querySelector(".lc-tip");
++  const cl=cursor.querySelector("line"),cc=cursor.querySelector("circle");
++  svg.addEventListener("pointermove",e=>{
++   const r=svg.getBoundingClientRect();
++   const fx=(e.clientX-r.left)/r.width*g.W;
++   let i=Math.round((fx-g.PL)/(g.W-g.PL-g.PR)*(pts.length-1));
++   i=Math.max(0,Math.min(pts.length-1,i));
++   const x=g.X(i).toFixed(1);
++   cl.setAttribute("x1",x);cl.setAttribute("x2",x);
++   cc.setAttribute("cx",x);cc.setAttribute("cy",g.Y(pts[i].v).toFixed(1));
++   cursor.style.display="";
++   const cmp=s.compare&&!hide.cmp&&s.compare[i]?` · N-1 : ${fmtFull.format(s.compare[i].v)}`:"";
++   tip.innerHTML=`${esc(pts[i].t)} — <b>&nbsp;${fmtFull.format(pts[i].v)}${s.unit?" "+esc(s.unit):""}</b><span style="color:var(--ink-3)">${cmp}</span>`;
++   tip.style.visibility="visible";});
++  svg.addEventListener("pointerleave",()=>{cursor.style.display="none";tip.style.visibility="hidden"});
++ };
++ render();
++}
++
++/* --- anneau (top 7 + « Autres ») --- */
++function donutHtml(b){
++ let rows=(b.items||[]).filter(i=>i.value>0);
++ if(!rows.length)return emptyBlock(b.title);
++ if(rows.length>8){const rest=rows.slice(7).reduce((s,r)=>s+r.value,0);
++  rows=rows.slice(0,7);rows.push({label:"Autres",value:rest});}
++ const total=rows.reduce((s,r)=>s+r.value,0);
++ const R=74,C=2*Math.PI*R,shades=[1,.78,.58,.42,.3,.22,.15,.1];let acc=0;
++ const segs=rows.map((r,i)=>{const frac=r.value/total,off=acc;acc+=frac;
++  return `<circle cx="100" cy="100" r="${R}" fill="none" stroke="var(--accent)" stroke-opacity="${shades[i%8]}"
++   stroke-width="30" stroke-dasharray="${(frac*C).toFixed(2)} ${C.toFixed(2)}" stroke-dashoffset="${(-off*C).toFixed(2)}"
++   transform="rotate(-90 100 100)"><title>${esc(r.label)} — ${fmtFull.format(r.value)}</title></circle>`;}).join("");
++ const leg=rows.map((r,i)=>`<li><span class="dsw" style="opacity:${shades[i%8]}"></span>
++  <span class="dlbl" title="${esc(r.label)} — ${fmtFull.format(r.value)}">${esc(r.label)}</span>
++  <b>${(100*r.value/total).toFixed(1).replace(".",",")} %</b></li>`).join("");
++ return `<div class="viz-card"><h2>${esc(b.title)}</h2><div class="donut-wrap">
++  <svg viewBox="0 0 200 200" role="img" aria-label="${esc(b.title)}" style="width:180px;max-width:100%">${segs}
++   <circle cx="100" cy="100" r="${R}" fill="none" stroke="var(--ink)" opacity=".5"/></svg>
++  <ul class="donut-legend">${leg}</ul></div></div>`;
++}
++
++/* --- barres horizontales (répartitions, géo) --- */
++function barsHtml(title,items,sub){
++ const rows=(items||[]).slice(0,14);
++ if(!rows.length)return emptyBlock(title);
++ const max=Math.max(...rows.map(r=>r.value),1);
++ return `<div class="viz-card"><h2>${esc(title)}</h2>${sub?`<div class="viz-sub">${esc(sub)}</div>`:`<div style="height:14px"></div>`}
++  ${rows.map(r=>`<div class="hrow" title="${esc(r.label)} — ${fmtFull.format(r.value)}">
++   <span class="hrow-label">${esc(r.label)}</span>
++   <span class="hbar"><i style="width:${Math.max(2,Math.round(r.value/max*100))}%"></i></span>
++   <span class="n">${fmtFull.format(r.value)}</span></div>`).join("")}</div>`;
++}
++
++/* --- calendrier de chaleur (26 dernières semaines) --- */
++function heatmapHtml(h){
++ const cells=h&&h.cells||[];
++ if(!cells.length)return emptyBlock(h?h.title:"Activité");
++ const byDate=new Map(cells.map(c=>[c.date,c.value]));
++ const dates=cells.map(c=>c.date).sort();
++ const end=new Date(dates[dates.length-1]+"T12:00:00");
++ const max=Math.max(...cells.map(c=>c.value),1);
++ const weeks=26,cols=[];const cur=new Date(end);
++ cur.setDate(cur.getDate()-(weeks*7-1));
++ for(let w=0;w<weeks;w++){const col=[];
++  for(let d=0;d<7;d++){const iso=cur.toISOString().slice(0,10);
++   col.push({date:iso,v:byDate.get(iso)||0});cur.setDate(cur.getDate()+1);}
++  cols.push(col);}
++ const rects=cols.map((col,w)=>col.map((c,d)=>
++  `<rect x="${w*14}" y="${d*14}" width="12" height="12" rx="2.5"
++    fill="${c.v?"var(--accent)":"rgba(20,24,20,0.07)"}" fill-opacity="${c.v?(0.25+0.75*c.v/max).toFixed(2):1}"
++    stroke="rgba(20,24,20,0.15)" stroke-width="0.5"><title>${c.date} — ${fmtFull.format(c.v)}</title></rect>`).join("")).join("");
++ return `<div class="viz-card hm"><h2>${esc(h.title)}</h2><div class="viz-sub">26 dernières semaines</div>
++  <div class="tbl-wrap"><svg viewBox="0 0 ${weeks*14} ${7*14}" role="img" aria-label="${esc(h.title)}">${rects}</svg></div></div>`;
++}
++
++/* --- tableau : tri par colonne, recherche, pagination 25/pg --- */
++function mountTable(el,spec){
++ const st=ST.tbl[spec.id]||(ST.tbl[spec.id]={q:"",sort:null,page:0});
++ el.innerHTML=`<div class="viz-card dtable">
++  <div style="display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center">
++   <h2>${esc(spec.title)}</h2>
++   <input class="dt-q" placeholder="Rechercher…" value="${esc(st.q)}" aria-label="Rechercher dans ${esc(spec.title)}">
++  </div><div class="dt-body"></div></div>`;
++ const body=el.querySelector(".dt-body"),qi=el.querySelector(".dt-q");
++ const num=x=>typeof x==="number"?x:parseFloat(String(x).replace(/[^\d.,-]/g,"").replace(",","."));
++ const render=()=>{
++  let rows=spec.rows||[];
++  if(st.q){const q=st.q.toLowerCase();
++   rows=rows.filter(r=>r.some(c=>String(c).toLowerCase().includes(q)));}
++  if(st.sort){const{col,dir}=st.sort;
++   rows=[...rows].sort((a,b)=>{const nx=num(a[col]),ny=num(b[col]);
++    if(!Number.isNaN(nx)&&!Number.isNaN(ny))return(nx-ny)*dir;
++    return String(a[col]).localeCompare(String(b[col]),"fr")*dir;});}
++  const pages=Math.max(1,Math.ceil(rows.length/25));
++  st.page=Math.min(st.page,pages-1);const cur=st.page;
++  body.innerHTML=`<div class="tbl-wrap" style="margin-top:12px"><table><thead><tr>
++    ${spec.columns.map((c,i)=>`<th data-col="${i}" aria-sort="${st.sort&&st.sort.col===i?(st.sort.dir===1?"ascending":"descending"):"none"}">${esc(c)} ${st.sort&&st.sort.col===i?(st.sort.dir===1?"▲":"▼"):"↕"}</th>`).join("")}
++   </tr></thead><tbody>
++    ${rows.slice(cur*25,(cur+1)*25).map(r=>`<tr>${r.map(c=>`<td>${typeof c==="number"?fmtFull.format(c):esc(c)}</td>`).join("")}</tr>`).join("")||`<tr><td colspan="${spec.columns.length}" style="color:var(--ink-3)">Aucun résultat.</td></tr>`}
++   </tbody></table></div>
++   <div class="dtable-foot"><span class="klabel">${fmtFull.format(rows.length)} ligne${rows.length>1?"s":""}</span>
++    <span style="display:flex;gap:6px;align-items:center">
++     <button type="button" class="btn btn-ghost dt-prev"${cur===0?" disabled":""}>←</button>
++     <span class="chip">${cur+1} / ${pages}</span>
++     <button type="button" class="btn btn-ghost dt-next"${cur>=pages-1?" disabled":""}>→</button></span></div>`;
++  body.querySelectorAll("th").forEach(th=>th.addEventListener("click",()=>{
++   const col=+th.dataset.col;
++   st.sort={col,dir:st.sort&&st.sort.col===col&&st.sort.dir===1?-1:1};render();}));
++  const prev=body.querySelector(".dt-prev"),next=body.querySelector(".dt-next");
++  prev.addEventListener("click",()=>{st.page=Math.max(0,cur-1);render()});
++  next.addEventListener("click",()=>{st.page=Math.min(pages-1,cur+1);render()});
++ };
++ qi.addEventListener("input",deb(()=>{st.q=qi.value;st.page=0;render()},250));
++ render();
++}
++
++/* --- barre de période + boutons PDF --- */
++function periodBar(){
++ const customOn=!!(ST.from&&ST.to);
++ return `<div class="pchips" role="group" aria-label="Période d'analyse">
++  ${PERIODS_UI.map(([id,l])=>`<button type="button" class="pchip" data-period="${id}" aria-pressed="${!customOn&&ST.period===id}">${l}</button>`).join("")}
++  <span class="pdates"><input type="date" id="pfrom" value="${esc(ST.from)}" aria-label="Du">
++   <span class="klabel">au</span><input type="date" id="pto" value="${esc(ST.to)}" aria-label="Au"></span></div>`;
++}
++function bindPeriod(){
++ document.querySelectorAll(".pchip").forEach(b=>b.addEventListener("click",()=>{
++  ST.period=b.dataset.period;ST.from="";ST.to="";loadStatsData();}));
++ const pf=$("#pfrom"),pt=$("#pto");
++ const go=()=>{if(pf.value&&pt.value){ST.from=pf.value;ST.to=pt.value;loadStatsData();}};
++ pf.addEventListener("change",go);pt.addEventListener("change",go);
++}
++function bindPdf(){
++ const url=m=>{const p=new URLSearchParams({period:ST.period,mode:m});
++  if(ST.from&&ST.to){p.set("from",ST.from);p.set("to",ST.to);}
++  return "/api/stats/report?"+p;};
++ [["pdf-full","complet"],["pdf-syn","synthese"]].forEach(([id,m])=>{
++  const b=document.getElementById(id);if(!b)return;
++  b.addEventListener("click",async()=>{
++   const t=b.textContent;b.disabled=true;b.textContent="Génération…";
++   try{const r=await fetch(url(m));if(!r.ok)throw new Error(r.status);
++    const blob=await r.blob();
++    const fn=((r.headers.get("Content-Disposition")||"").match(/filename="?([^";]+)/)||[])[1]||"rapport-crea-ka.pdf";
++    const a=document.createElement("a");a.href=URL.createObjectURL(blob);a.download=fn;
++    document.body.appendChild(a);a.click();a.remove();
++    setTimeout(()=>URL.revokeObjectURL(a.href),4000);}
++   catch(e){alert("Échec de la génération du PDF — réessayez.");}
++   b.disabled=false;b.textContent=t;});});
++}
++
+ async function renderStats(){
+  document.title="Statistiques — Créa-Ka";
+  app.innerHTML=header()+`<div class="container"><div class="spin"></div></div>`+footer()+tabbar("stats");bindNav();
++ await loadStatsData(true);
++ window.scrollTo(0,0);
++}
++async function loadStatsData(first){
++ const main=$("#stats-main");if(main)main.style.opacity=".45";
++ let d;
++ try{const p=new URLSearchParams({period:ST.period});
++  if(ST.from&&ST.to){p.set("from",ST.from);p.set("to",ST.to);}
++  d=await api("/api/stats/dashboard?"+p);}
++ catch(e){app.innerHTML=header()+`<div class="container empty">Statistiques indisponibles pour le moment.</div>`+footer()+tabbar("stats");bindNav();return}
++ ST.data=d;renderStatsPage();
++}
++function renderStatsPage(){
++ const d=ST.data;
++ const upd=new Date(d.updated).toLocaleString("fr-CA",{dateStyle:"medium",timeStyle:"short"});
++ const donut=(d.breakdowns||[]).find(b=>b.kind==="donut");
++ const barsB=(d.breakdowns||[]).filter(b=>b.kind!=="donut");
+  app.innerHTML=header()+`
++ <div class="container stats-page" id="stats-main">
++  <div class="stats-head">
++   <div><span class="kicker">Tableau de bord — ${esc(d.period.label)}</span>
++    <h1 style="font-size:clamp(28px,4.6vw,46px);margin:12px 0 0;text-transform:uppercase">Les créateurs québécois <span class="hl">en chiffres.</span></h1>
++    <div class="fresh-row"><span>Mis à jour le ${esc(upd)}</span>
++     <button type="button" class="btn btn-ghost" id="st-refresh">↻ Rafraîchir</button></div></div>
++   <span class="pdf-actions">
++    <button type="button" class="btn btn-primary" id="pdf-full">⬇ Télécharger le rapport PDF</button>
++    <button type="button" class="btn btn-ghost" id="pdf-syn">Synthèse (2 p.)</button></span>
++  </div>
++  <div class="tiles">${(d.kpis||[]).map(kpiHtml).join("")||emptyBlock("Indicateurs")}</div>
++  ${periodBar()}
++  <p class="klabel" style="margin:6px 0 0">Période analysée : ${esc(d.period.from)} → ${esc(d.period.to)}</p>
++  <h2 class="stats-sect">Évolution</h2>
++  <div class="viz-grid">${(d.series||[]).map(s=>`<div class="lc" data-serie="${esc(s.id)}"></div>`).join("")||emptyBlock("Évolution")}</div>
++  <h2 class="stats-sect">Répartitions</h2>
++  <div class="viz-grid two">
++   ${donut?donutHtml(donut):""}
++   ${barsB.map(b=>barsHtml(b.title,b.items)).join("")}
++   ${d.geo?barsHtml(d.geo.title,d.geo.items):""}
+   </div>
++  ${d.heatmap?`<h2 class="stats-sect">Activité</h2>${heatmapHtml(d.heatmap)}`:""}
++  ${(d.tables||[]).length?`<h2 class="stats-sect">Détails</h2><div style="display:grid;gap:22px">${(d.tables||[]).map(t=>`<div class="dt" data-table="${esc(t.id)}"></div>`).join("")}</div>`:""}
++  ${(d.records||[]).length?`<h2 class="stats-sect">Records & faits marquants</h2>
++   <div class="records-grid">${d.records.map(r=>`<div class="record"><span class="r-lbl">${esc(r.label)}</span>
++    <span style="text-align:right"><span class="r-val">${esc(r.value)}</span>${r.date?`<span class="klabel" style="display:block">${esc(r.date)}</span>`:""}</span></div>`).join("")}</div>`:""}
++  <p style="font-size:12px;color:var(--ink-3);margin-top:30px">Données réelles de l'annuaire (fiches actives, comptes vérifiés) — aucune statistique estimée ou inventée.
++   Rapport PDF estampillé Groupe-KA disponible en haut de page.</p>
+  </div>`+footer()+tabbar("stats");
++ bindNav();bindPeriod();bindPdf();
++ $("#st-refresh").addEventListener("click",()=>loadStatsData());
++ (ST.data.series||[]).forEach(s=>{const el=document.querySelector(`.lc[data-serie="${s.id}"]`);if(el)mountLine(el,s);});
++ (ST.data.tables||[]).forEach(t=>{const el=document.querySelector(`.dt[data-table="${t.id}"]`);if(el)mountTable(el,t);});
+ }
+ /* ---------- page compte (KA ID) ---------- */

added frontend/src/ka/stats/SPEC.md +123 −0

++# ka-stats — module Stats commun Groupe KA (spec v1)
++
++Contrat partagé par les 12 plateformes pour leurs pages **/stats** (tableau de
++bord analytique) et l'**export PDF** estampillé Groupe-KA. Le visuel suit le
++design system ka-ui (tokens.css) avec l'accent de la marque.
++
++## 1. Page /stats — structure obligatoire (dans cet ordre)
++
++1. **Bandeau KPI** : 4–6 grandes cartes (`KpiCard`) — valeur, libellé,
++   variation vs période précédente (▲/▼ + %, vert `--green` / rouge `--danger`).
++2. **Sélecteur de période global** (`PeriodSelector`) : `aujourd'hui · 7 j ·
++   30 j · 3 m · 6 m · 12 m · année en cours · tout` + plage personnalisée
++   (2 champs date). Toute la page se recalcule (state → refetch dashboard).
++3. **Graphiques** : courbes d'évolution (`LineChart`, survol = infobulle,
++   légende cliquable pour masquer une série, comparaison N vs N-1 en
++   pointillé), barres (`BarChart`), anneaux (`Donut`), calendrier de chaleur
++   (`CalendarHeatmap`) quand pertinent.
++4. **Répartition géographique** (par ville/région) quand pertinent — barres
++   horizontales triées (pas besoin de vraie carte).
++5. **Tableaux détaillés** (`DataTable`) : tri par colonne, recherche interne,
++   pagination (25/pg), débordement horizontal propre sur mobile (.tbl-wrap).
++6. **Records & faits marquants** : générés depuis les données (jour record,
++   plus forte croissance, meilleure entrée…) — cartes compactes.
++7. **Fraîcheur** : « Mis à jour le {date heure} » + bouton Rafraîchir.
++8. **Bouton PDF** bien visible en haut : « Télécharger le rapport PDF » avec
++   deux choix (Rapport complet / Synthèse 2 pages). Indicateur de progression
++   si > 2 s.
++
++Responsive : KPI empilés < 768 px, graphiques pleine largeur redimensionnés
++(SVG viewBox), tableaux en défilement horizontal contenu, tactile ≥ 44 px.
++AUCUNE donnée inventée : une stat indisponible = bloc « Pas encore mesuré »
++(carte grise propre), jamais un faux chiffre.
++
++## 2. API — contrat commun
++
++`GET /api/stats/dashboard?period=7j|30j|3m|6m|12m|annee|tout|auj&from=YYYY-MM-DD&to=YYYY-MM-DD`
++
++```jsonc
++{
++  "updated": "2026-08-17T21:04:00-04:00",
++  "period": { "from": "2026-07-18", "to": "2026-08-17", "label": "30 jours" },
++  "kpis": [ { "id": "total", "label": "Annonces actives", "value": 33744,
++              "unit": "", "delta_pct": 4.2, "direction": "up" } ],
++  "series": [ { "id": "vol", "title": "Annonces actives par jour", "unit": "annonces",
++                "kind": "line", "points": [{ "t": "2026-07-18", "v": 31200 }],
++                "compare": [{ "t": "2025-07-18", "v": 24100 }] } ],
++  "breakdowns": [ { "id": "types", "title": "Par type", "kind": "donut",
++                    "items": [{ "label": "4½", "value": 9120 }] } ],
++  "geo": { "title": "Par région", "items": [{ "label": "Montréal", "value": 15680 }] },
++  "heatmap": { "title": "Activité", "cells": [{ "date": "2026-08-01", "value": 210 }] },
++  "tables": [ { "id": "top", "title": "Top villes", "columns": ["Ville", "Annonces", "Δ 30 j"],
++                "rows": [["Montréal", 15680, "+3,1 %"]] } ],
++  "records": [ { "label": "Jour record d'ajouts", "value": "412 annonces", "date": "2026-08-09" } ]
++}
++```
++
++Champs absents = section masquée. Cache serveur recommandé (≥ 5 min par
++période). Les valeurs proviennent des données réelles (DB de la plateforme,
++journaux de sync des connecteurs, /api/v1/runs d'API-KA…).
++
++`GET /api/stats/report?period=…&from=&to=&mode=complet|synthese`
++→ `application/pdf`, en-tête `Content-Disposition: attachment; filename=
++groupe-ka_<plateforme>_stats_<periode>_<YYYY-MM-DD>.pdf`.
++
++## 3. PDF — gabarit Groupe-KA (implémentations : `kapdf.py` fpdf2 pour les
++apps Python ; les apps Next portent le même gabarit en pdfkit)
++
++- **Couverture** : cadre encre, kicker « GROUPE KA · RAPPORT STATISTIQUE »,
++  wordmark de la plateforme (boîte encre + accent), sous-titre, période
++  couverte, date/heure de génération, bande encre au pied avec
++  « par Groupe KA — groupe-ka.com ».
++- **Sommaire** avec numéros de pages (mode complet).
++- **KPI** : grille de cartes (bordure encre, valeur en gros, delta coloré).
++- **Graphiques VECTORIELS** (dessinés en primitives, jamais de capture) :
++  courbes, barres, anneaux — accent de la plateforme, axes/graduations encre.
++- **Tableaux** paginés proprement (lignes zébrées `--surface-2`, jamais
++  coupés en deux à cheval sur une ligne).
++- **Records** puis **page de fin** : coordonnées Groupe KA (3 courriels +
++  rôles d'ecosystem.json, groupe-ka.com), avertissement d'agrégateur,
++  mentions légales courtes.
++- **Chaque page** : en-tête discret (« Groupe KA · {Plateforme} », filet
++  encre) + pied (« © Groupe-KA — {année} — groupe-ka.com · {période} · p. X/Y »).
++- A4 portrait, marges 18 mm, typo : Helvetica (fallback sûr) ou fonts TTF du
++  DS si présentes. Mode « synthese » = couverture + 1 page KPI/records.
++
++## 4. Spécifique par plateforme (sections métier attendues)
++
++- **groupe-ka** : tableau de bord maître — consolidation des 12 (volume total,
++  croissance), classement des plateformes, bloc résumé par plateforme + lien
++  vers sa page /stats ; « Rapport écosystème complet » = PDF consolidé.
++- **lou-ka** : annonces actives/nouvelles/retirées, loyers moyens/médians par
++  ville & taille, évolution, répartition par type, top villes.
++- **immo-ka** : annonces actives/nouvelles/vendues-retirées, prix moyen/médian
++  par ville/région/type, délai de présence, top villes, tension du marché.
++- **vrai-prix** : couverture du rôle (unités, valeur totale), estimations
++  servies si journalisées, répartitions par municipalité/type, indices marché.
++- **auto-ka** : volume par marque/modèle/année/carburant/boîte, prix moyens et
++  km moyens par segment, top marques/modèles.
++- **fabri-ka** : produits par catégorie/région/boutique, fourchettes de prix,
++  nouveautés par période, top catégories.
++- **food-ka** : produits suivis, relevés de prix, soldes détectés (baisses/
++  hausses, amplitude), top produits en solde, prix moyens par catégorie.
++- **resto-ka** : restos par cuisine/ville/gamme, menus & plats, nouveautés/
++  fermetures détectées, top établissements.
++- **sorti-ka** : événements à venir/passés par catégorie/ville, gratuits vs
++  payants, heatmap calendrier, top lieux.
++- **crea-ka** : créateurs par plateforme/niche/tier, comptes reliés, top
++  créateurs, croissance du répertoire.
++- **trouve-ka** : pages indexées, domaines, rythme de crawl (indexées/h),
++  erreurs, file frontier, tendances si les requêtes sont journalisées.
++- **api-ka** : appels par endpoint/jour/heure, latences moyennes + p95, taux
++  d'erreur, top endpoints, uptime (données des middlewares de logging + runs).
++- **Transverse (tous)** : volume total agrégé + croissance, connecteurs actifs
++  et éléments ajoutés/mis à jour par période (journaux de sync), complétude/
++  fraîcheur moyenne des fiches quand mesurable. Trafic web : seulement si des
++  journaux d'accès existent — sinon état vide propre.
++
++## 5. Ajouter une métrique / un graphique / une plateforme
++
++1 métrique = 1 entrée `kpis[]` ou `series[]` côté API (requête SQL agrégée +
++cache) — le front la rend automatiquement. 1 plateforme = implémenter les 2
++endpoints du contrat + une page /stats montée sur les composants du kit +
++`kapdf.py` (ou gabarit pdfkit) branché sur le même JSON de dashboard.

added frontend/src/ka/stats/kacharts.tsx +389 −0

++// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
++// ka-ui/stats/kacharts.tsx — kit de graphiques SVG du module Stats commun
++// Groupe KA (zéro dépendance, React 18+). Style : design system ka-ui
++// (bordures encre, accent de la plateforme via var(--accent)).
++// Composants : KpiCard, PeriodSelector, LineChart (infobulle + légende
++// cliquable + comparaison N-1), BarChart, Donut, CalendarHeatmap, DataTable
++// (tri/recherche/pagination), RecordCard, PdfButton, EmptyBlock, Fraicheur.
++import { useMemo, useState } from "react";
++
++/* ---------- types (contrat SPEC.md) ---------- */
++export type Kpi = {
++  id: string; label: string; value: number | string; unit?: string;
++  delta_pct?: number | null; direction?: "up" | "down";
++};
++export type Point = { t: string; v: number };
++export type Serie = {
++  id: string; title: string; unit?: string; kind?: "line" | "bar";
++  points: Point[]; compare?: Point[];
++};
++export type BreakItem = { label: string; value: number };
++export type TableSpec = { id: string; title: string; columns: string[]; rows: (string | number)[][] };
++export type RecordFact = { label: string; value: string; date?: string };
++
++export const PERIODS: { id: string; label: string }[] = [
++  { id: "auj", label: "Aujourd'hui" },
++  { id: "7j", label: "7 jours" },
++  { id: "30j", label: "30 jours" },
++  { id: "3m", label: "3 mois" },
++  { id: "6m", label: "6 mois" },
++  { id: "12m", label: "12 mois" },
++  { id: "annee", label: "Année en cours" },
++  { id: "tout", label: "Tout" },
++];
++
++export const fmtInt = (n: number) => n.toLocaleString("fr-CA");
++export const fmtNum = (n: number) =>
++  Number.isInteger(n) ? fmtInt(n) : n.toLocaleString("fr-CA", { maximumFractionDigits: 2 });
++
++/* ---------- KPI ---------- */
++export function KpiCard({ k }: { k: Kpi }) {
++  const up = (k.direction ?? ((k.delta_pct ?? 0) >= 0 ? "up" : "down")) === "up";
++  return (
++    <article className="card" style={{ padding: "14px 16px", minWidth: 0 }}>
++      <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(22px,2.4vw,30px)", letterSpacing: "-0.02em" }}>
++        {typeof k.value === "number" ? fmtNum(k.value) : k.value}
++        {k.unit ? <span style={{ fontSize: "0.6em", color: "var(--ink-2)" }}> {k.unit}</span> : null}
++      </p>
++      <p className="klabel" style={{ margin: "6px 0 0" }}>{k.label}</p>
++      {k.delta_pct !== undefined && k.delta_pct !== null && (
++        <p style={{ margin: "8px 0 0", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, color: up ? "var(--green)" : "var(--danger)" }}>
++          {up ? "▲" : "▼"} {k.delta_pct >= 0 ? "+" : ""}{fmtNum(k.delta_pct)} % <span style={{ color: "var(--ink-3)", fontWeight: 500 }}>vs période préc.</span>
++        </p>
++      )}
++    </article>
++  );
++}
++
++/* ---------- Sélecteur de période ---------- */
++export function PeriodSelector({
++  value, onChange, custom, onCustom,
++}: {
++  value: string; onChange: (p: string) => void;
++  custom?: { from: string; to: string }; onCustom?: (from: string, to: string) => void;
++}) {
++  return (
++    <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
++      {PERIODS.map((p) => (
++        <button key={p.id} type="button" onClick={() => onChange(p.id)}
++          className="chip" aria-pressed={value === p.id}
++          style={{ cursor: "pointer", minHeight: 44, background: value === p.id ? "var(--accent)" : "var(--surface)", color: value === p.id ? "var(--on-accent)" : "var(--ink)" }}>
++          {p.label}
++        </button>
++      ))}
++      {onCustom && (
++        <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
++          <input className="input" type="date" style={{ width: 150 }} value={custom?.from ?? ""} aria-label="Du"
++            onChange={(e) => onCustom(e.target.value, custom?.to ?? "")} />
++          <span className="klabel">au</span>
++          <input className="input" type="date" style={{ width: 150 }} value={custom?.to ?? ""} aria-label="Au"
++            onChange={(e) => onCustom(custom?.from ?? "", e.target.value)} />
++        </span>
++      )}
++    </div>
++  );
++}
++
++/* ---------- Courbe ---------- */
++export function LineChart({ serie, height = 240 }: { serie: Serie; height?: number }) {
++  const [hide, setHide] = useState<{ cur: boolean; cmp: boolean }>({ cur: false, cmp: false });
++  const [hover, setHover] = useState<number | null>(null);
++  const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26;
++  const pts = serie.points ?? [];
++  if (pts.length < 2) return <EmptyBlock title={serie.title} />;
++  const all = [...(hide.cur ? [] : pts), ...(!hide.cmp && serie.compare ? serie.compare : [])];
++  const vmax = Math.max(...all.map((p) => p.v), 1);
++  const vmin = Math.min(0, ...all.map((p) => p.v));
++  const X = (i: number, n: number) => PL + ((W - PL - PR) * i) / (n - 1);
++  const Y = (v: number) => PT + (H - PT - PB) * (1 - (v - vmin) / (vmax - vmin || 1));
++  const path = (s: Point[]) => s.map((p, i) => `${i ? "L" : "M"}${X(i, s.length)},${Y(p.v)}`).join("");
++  const hi = hover !== null ? Math.min(pts.length - 1, Math.max(0, hover)) : null;
++  return (
++    <figure className="card" style={{ margin: 0, padding: 16 }}>
++      <figcaption style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
++        <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{serie.title}</b>
++        <span style={{ display: "flex", gap: 10 }}>
++          <LegendChip label="Période courante" color="var(--accent)" off={hide.cur} onClick={() => setHide((h) => ({ ...h, cur: !h.cur }))} />
++          {serie.compare && <LegendChip label="Période comparée" color="var(--ink-3)" dashed off={hide.cmp} onClick={() => setHide((h) => ({ ...h, cmp: !h.cmp }))} />}
++        </span>
++      </figcaption>
++      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: "auto", marginTop: 10, touchAction: "pan-y" }} role="img" aria-label={serie.title}
++        onMouseMove={(e) => {
++          const r = (e.currentTarget as SVGSVGElement).getBoundingClientRect();
++          const fx = ((e.clientX - r.left) / r.width) * W;
++          setHover(Math.round(((fx - PL) / (W - PL - PR)) * (pts.length - 1)));
++        }}
++        onMouseLeave={() => setHover(null)}>
++        {[0, 1, 2, 3, 4].map((g) => {
++          const y = PT + ((H - PT - PB) * g) / 4;
++          const v = vmax - ((vmax - vmin) * g) / 4;
++          return (
++            <g key={g}>
++              <line x1={PL} x2={W - PR} y1={y} y2={y} stroke="var(--line)" strokeWidth={1} />
++              <text x={PL - 6} y={y + 3} textAnchor="end" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{fmtInt(Math.round(v))}</text>
++            </g>
++          );
++        })}
++        {[0, Math.floor(pts.length / 2), pts.length - 1].map((i) => (
++          <text key={i} x={X(i, pts.length)} y={H - 8} textAnchor="middle" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{pts[i].t}</text>
++        ))}
++        {!hide.cmp && serie.compare && serie.compare.length > 1 && (
++          <path d={path(serie.compare)} fill="none" stroke="var(--ink-3)" strokeWidth={1.4} strokeDasharray="4 4" />
++        )}
++        {!hide.cur && <path d={path(pts)} fill="none" stroke="var(--accent)" strokeWidth={2.4} />}
++        {hi !== null && (
++          <g>
++            <line x1={X(hi, pts.length)} x2={X(hi, pts.length)} y1={PT} y2={H - PB} stroke="var(--ink)" strokeWidth={1} strokeDasharray="2 3" />
++            <circle cx={X(hi, pts.length)} cy={Y(pts[hi].v)} r={4} fill="var(--accent)" stroke="var(--ink)" strokeWidth={1.5} />
++          </g>
++        )}
++      </svg>
++      {hi !== null && (
++        <p className="chip" style={{ marginTop: 8 }}>
++          {pts[hi].t} — <b>{fmtNum(pts[hi].v)}{serie.unit ? ` ${serie.unit}` : ""}</b>
++          {serie.compare?.[hi] && !hide.cmp ? <span style={{ color: "var(--ink-3)" }}> · N-1 : {fmtNum(serie.compare[hi].v)}</span> : null}
++        </p>
++      )}
++    </figure>
++  );
++}
++
++function LegendChip({ label, color, off, dashed, onClick }: { label: string; color: string; off: boolean; dashed?: boolean; onClick: () => void }) {
++  return (
++    <button type="button" onClick={onClick} aria-pressed={!off}
++      style={{ display: "inline-flex", alignItems: "center", gap: 6, border: 0, background: "none", cursor: "pointer", opacity: off ? 0.4 : 1, fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", minHeight: 44 }}>
++      <span style={{ width: 18, height: 0, borderTop: `3px ${dashed ? "dashed" : "solid"} ${color}` }} />
++      {label}
++    </button>
++  );
++}
++
++/* ---------- Barres horizontales (répartitions, géo) ---------- */
++export function BarChart({ title, items, unit }: { title: string; items: BreakItem[]; unit?: string }) {
++  const rows = (items ?? []).slice(0, 14);
++  if (!rows.length) return <EmptyBlock title={title} />;
++  const max = Math.max(...rows.map((r) => r.value), 1);
++  return (
++    <figure className="card" style={{ margin: 0, padding: 16 }}>
++      <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{title}</b></figcaption>
++      <div style={{ marginTop: 12, display: "grid", gap: 9 }}>
++        {rows.map((r) => (
++          <div key={r.label} title={`${r.label} — ${fmtNum(r.value)}${unit ? ` ${unit}` : ""}`}>
++            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5 }}>
++              <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.label}</span>
++              <b style={{ fontFamily: "var(--font-mono)", fontSize: 11.5 }}>{fmtNum(r.value)}{unit ? ` ${unit}` : ""}</b>
++            </div>
++            <div style={{ marginTop: 3, height: 12, background: "rgba(20,24,20,0.06)", borderRadius: "0 3px 3px 0" }}>
++              <div style={{ height: "100%", width: `${Math.max((r.value / max) * 100, 1)}%`, background: "var(--accent)", border: "1px solid var(--ink)", borderRadius: "0 3px 3px 0", boxSizing: "border-box" }} />
++            </div>
++          </div>
++        ))}
++      </div>
++    </figure>
++  );
++}
++
++/* ---------- Anneau ---------- */
++export function Donut({ title, items }: { title: string; items: BreakItem[] }) {
++  const rows = (items ?? []).filter((i) => i.value > 0).slice(0, 8);
++  const total = rows.reduce((s, r) => s + r.value, 0);
++  if (!total) return <EmptyBlock title={title} />;
++  const R = 74, C = 2 * Math.PI * R;
++  let acc = 0;
++  const shades = [1, 0.78, 0.58, 0.42, 0.3, 0.22, 0.15, 0.1];
++  return (
++    <figure className="card" style={{ margin: 0, padding: 16 }}>
++      <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{title}</b></figcaption>
++      <div style={{ display: "flex", flexWrap: "wrap", gap: 18, alignItems: "center", marginTop: 12 }}>
++        <svg viewBox="0 0 200 200" style={{ width: 180, maxWidth: "100%" }} role="img" aria-label={title}>
++          {rows.map((r, i) => {
++            const frac = r.value / total;
++            const off = acc; acc += frac;
++            return (
++              <circle key={r.label} cx={100} cy={100} r={R} fill="none"
++                stroke="var(--accent)" strokeOpacity={shades[i % shades.length]}
++                strokeWidth={30} strokeDasharray={`${frac * C} ${C}`} strokeDashoffset={-off * C}
++                transform="rotate(-90 100 100)">
++                <title>{`${r.label} — ${fmtNum(r.value)} (${((100 * r.value) / total).toFixed(1)} %)`}</title>
++              </circle>
++            );
++          })}
++          <circle cx={100} cy={100} r={R} fill="none" stroke="var(--ink)" strokeWidth={1} opacity={0.5} />
++        </svg>
++        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 6, minWidth: 200, flex: 1 }}>
++          {rows.map((r, i) => (
++            <li key={r.label} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5 }}>
++              <span style={{ width: 11, height: 11, borderRadius: 3, border: "1px solid var(--ink)", background: "var(--accent)", opacity: shades[i % shades.length] }} />
++              <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.label}</span>
++              <b style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>{((100 * r.value) / total).toFixed(1)} %</b>
++            </li>
++          ))}
++        </ul>
++      </div>
++    </figure>
++  );
++}
++
++/* ---------- Calendrier de chaleur ---------- */
++export function CalendarHeatmap({ title, cells }: { title: string; cells: { date: string; value: number }[] }) {
++  if (!cells?.length) return <EmptyBlock title={title} />;
++  const byDate = new Map(cells.map((c) => [c.date, c.value]));
++  const dates = cells.map((c) => c.date).sort();
++  const end = new Date(dates[dates.length - 1] + "T12:00:00");
++  const max = Math.max(...cells.map((c) => c.value), 1);
++  const weeks = 26, cols: { date: string; v: number }[][] = [];
++  const cur = new Date(end);
++  cur.setDate(cur.getDate() - (weeks * 7 - 1));
++  for (let w = 0; w < weeks; w++) {
++    const col: { date: string; v: number }[] = [];
++    for (let d = 0; d < 7; d++) {
++      const iso = cur.toISOString().slice(0, 10);
++      col.push({ date: iso, v: byDate.get(iso) ?? 0 });
++      cur.setDate(cur.getDate() + 1);
++    }
++    cols.push(col);
++  }
++  return (
++    <figure className="card" style={{ margin: 0, padding: 16 }}>
++      <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{title}</b> <span className="klabel">26 dernières semaines</span></figcaption>
++      <div className="tbl-wrap" style={{ marginTop: 12 }}>
++        <svg viewBox={`0 0 ${weeks * 14} ${7 * 14}`} style={{ minWidth: 480, width: "100%", height: "auto" }} role="img" aria-label={title}>
++          {cols.map((col, w) => col.map((c, d) => (
++            <rect key={c.date} x={w * 14} y={d * 14} width={12} height={12} rx={2.5}
++              fill={c.v ? "var(--accent)" : "rgba(20,24,20,0.07)"} fillOpacity={c.v ? 0.25 + 0.75 * (c.v / max) : 1}
++              stroke="rgba(20,24,20,0.15)" strokeWidth={0.5}>
++              <title>{`${c.date} — ${fmtNum(c.v)}`}</title>
++            </rect>
++          )))}
++        </svg>
++      </div>
++    </figure>
++  );
++}
++
++/* ---------- Tableau : tri, recherche, pagination ---------- */
++export function DataTable({ spec, pageSize = 25 }: { spec: TableSpec; pageSize?: number }) {
++  const [q, setQ] = useState("");
++  const [sort, setSort] = useState<{ col: number; dir: 1 | -1 } | null>(null);
++  const [page, setPage] = useState(0);
++  const rows = useMemo(() => {
++    let r = spec.rows ?? [];
++    if (q) r = r.filter((row) => row.some((c) => String(c).toLowerCase().includes(q.toLowerCase())));
++    if (sort) r = [...r].sort((a, b) => {
++      const x = a[sort.col], y = b[sort.col];
++      const nx = typeof x === "number" ? x : parseFloat(String(x).replace(/[^\d.,-]/g, "").replace(",", "."));
++      const ny = typeof y === "number" ? y : parseFloat(String(y).replace(/[^\d.,-]/g, "").replace(",", "."));
++      if (!Number.isNaN(nx) && !Number.isNaN(ny)) return (nx - ny) * sort.dir;
++      return String(x).localeCompare(String(y), "fr") * sort.dir;
++    });
++    return r;
++  }, [spec.rows, q, sort]);
++  const pages = Math.max(1, Math.ceil(rows.length / pageSize));
++  const cur = Math.min(page, pages - 1);
++  return (
++    <section className="card" style={{ padding: 16 }}>
++      <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "space-between", alignItems: "center" }}>
++        <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{spec.title}</b>
++        <input className="input" style={{ maxWidth: 240 }} placeholder="Rechercher…" value={q}
++          onChange={(e) => { setQ(e.target.value); setPage(0); }} aria-label={`Rechercher dans ${spec.title}`} />
++      </div>
++      <div className="tbl-wrap" style={{ marginTop: 10 }}>
++        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
++          <thead>
++            <tr>
++              {spec.columns.map((c, i) => (
++                <th key={c} onClick={() => setSort((s) => ({ col: i, dir: s?.col === i && s.dir === 1 ? -1 : 1 }))}
++                  style={{ cursor: "pointer", textAlign: "left", padding: "8px 10px", background: "var(--ink)", color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.06em", whiteSpace: "nowrap", userSelect: "none" }}
++                  aria-sort={sort?.col === i ? (sort.dir === 1 ? "ascending" : "descending") : "none"}>
++                  {c} {sort?.col === i ? (sort.dir === 1 ? "▲" : "▼") : "↕"}
++                </th>
++              ))}
++            </tr>
++          </thead>
++          <tbody>
++            {rows.slice(cur * pageSize, (cur + 1) * pageSize).map((row, ri) => (
++              <tr key={ri} style={{ background: ri % 2 ? "var(--surface-2)" : "var(--surface)" }}>
++                {row.map((c, ci) => (
++                  <td key={ci} style={{ padding: "7px 10px", borderBottom: "1px solid var(--line)", whiteSpace: "nowrap" }}>
++                    {typeof c === "number" ? fmtNum(c) : c}
++                  </td>
++                ))}
++              </tr>
++            ))}
++          </tbody>
++        </table>
++      </div>
++      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 10, flexWrap: "wrap", gap: 8 }}>
++        <span className="klabel">{fmtInt(rows.length)} lignes</span>
++        <span style={{ display: "flex", gap: 6 }}>
++          <button type="button" className="btn btn-ghost" disabled={cur === 0} onClick={() => setPage(cur - 1)}>←</button>
++          <span className="chip">{cur + 1} / {pages}</span>
++          <button type="button" className="btn btn-ghost" disabled={cur >= pages - 1} onClick={() => setPage(cur + 1)}>→</button>
++        </span>
++      </div>
++    </section>
++  );
++}
++
++/* ---------- Records / faits marquants ---------- */
++export function RecordCard({ r }: { r: RecordFact }) {
++  return (
++    <article className="card" style={{ padding: "12px 16px", display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline", background: "var(--surface-2)" }}>
++      <span style={{ fontSize: 13, color: "var(--ink-2)" }}>{r.label}</span>
++      <span style={{ textAlign: "right" }}>
++        <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{r.value}</b>
++        {r.date && <span className="klabel" style={{ display: "block" }}>{r.date}</span>}
++      </span>
++    </article>
++  );
++}
++
++/* ---------- Bouton PDF ---------- */
++export function PdfButton({ period, from, to, endpoint = "/api/stats/report" }: { period: string; from?: string; to?: string; endpoint?: string }) {
++  const [busy, setBusy] = useState(false);
++  const url = (mode: string) => {
++    const p = new URLSearchParams({ period, mode });
++    if (from) p.set("from", from);
++    if (to) p.set("to", to);
++    return `${endpoint}?${p}`;
++  };
++  const dl = (mode: string) => {
++    setBusy(true);
++    const a = document.createElement("a");
++    a.href = url(mode);
++    a.download = "";
++    document.body.appendChild(a);
++    a.click();
++    a.remove();
++    setTimeout(() => setBusy(false), 2500);
++  };
++  return (
++    <span style={{ display: "inline-flex", gap: 8, flexWrap: "wrap" }}>
++      <button type="button" className="btn btn-primary" onClick={() => dl("complet")} disabled={busy}>
++        {busy ? "Génération…" : "⬇ Télécharger le rapport PDF"}
++      </button>
++      <button type="button" className="btn btn-ghost" onClick={() => dl("synthese")} disabled={busy}>
++        Synthèse (2 p.)
++      </button>
++    </span>
++  );
++}
++
++/* ---------- États ---------- */
++export function EmptyBlock({ title }: { title: string }) {
++  return (
++    <div className="card" style={{ padding: 20, background: "var(--surface-2)", borderStyle: "dashed" }}>
++      <b style={{ fontFamily: "var(--font-display)", fontSize: 14 }}>{title}</b>
++      <p className="klabel" style={{ margin: "6px 0 0" }}>Pas encore mesuré — aucune donnée disponible pour cette période.</p>
++    </div>
++  );
++}
++
++export function Fraicheur({ updated, onRefresh }: { updated: string; onRefresh: () => void }) {
++  return (
++    <p style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap", margin: 0 }}>
++      <span className="klabel">Mis à jour le {new Date(updated).toLocaleString("fr-CA", { dateStyle: "medium", timeStyle: "short" })}</span>
++      <button type="button" className="btn btn-ghost" onClick={onRefresh}>↻ Rafraîchir</button>
++    </p>
++  );
++}

added frontend/src/ka/stats/kapdf.py +560 −0

++# Auteur : Simon-Pierre Boucher — contact@spboucher.ai
++# ka-ui/stats/kapdf.py — moteur PDF commun Groupe KA (fpdf2).
++# Consomme le JSON du contrat /api/stats/dashboard (voir SPEC.md) et produit
++# le rapport estampillé Groupe-KA : couverture, sommaire, KPI, graphiques
++# VECTORIELS (courbes/barres/anneaux), tableaux paginés, records, page de fin.
++# Usage :
++#   from kapdf import GroupeKAReport
++#   pdf_bytes = GroupeKAReport(site={"wordmark":"Lou·Ka","accent":"#ff6a00",
++#       "domain":"www.lou-ka.com","tagline":"…"}, dashboard=dash_json,
++#       mode="complet").build()
++# Dépendance : pip install fpdf2  (aucune autre)
++from __future__ import annotations
++
++import math
++from datetime import datetime
++from zoneinfo import ZoneInfo
++
++from fpdf import FPDF
++
++INK = (20, 24, 20)
++INK2 = (77, 85, 81)
++INK3 = (139, 146, 140)
++PAPER = (245, 243, 238)
++SURFACE2 = (250, 249, 245)
++GREEN = (28, 92, 65)
++DANGER = (179, 66, 58)
++WHITE = (255, 255, 255)
++
++EMAILS = [
++    ("contact@groupe-ka.com", "Projets, partenariats & données"),
++    ("info@groupe-ka.com", "Médias & questions générales"),
++    ("admin@groupe-ka.com", "Légal, vie privée & Loi 25"),
++]
++DISCLAIMER = (
++    "Groupe KA est un agrégateur de contenu : nous ne vendons rien, ne louons "
++    "rien et ne sommes partie à aucune transaction. Données lues à la source, "
++    "rien d'inventé, tout est traçable."
++)
++
++
++def _hex(c: str) -> tuple[int, int, int]:
++    c = c.lstrip("#")
++    return tuple(int(c[i : i + 2], 16) for i in (0, 2, 4))  # type: ignore
++
++
++def _fr(n) -> str:
++    if isinstance(n, float) and not n.is_integer():
++        return f"{n:,.2f}".replace(",", " ").replace(".", ",")
++    return f"{int(n):,}".replace(",", " ")
++
++
++_SUBST = {
++    "—": "-", "–": "-", "→": "->", "▲": "+", "▼": "-",
++    "…": "...", "’": "'", "‘": "'", "“": '"', "”": '"',
++    "œ": "oe", "Œ": "OE", "−": "-", " ": " ", " ": " ",
++}
++
++
++def _latin1(s: str) -> str:
++    for k, v in _SUBST.items():
++        s = s.replace(k, v)
++    return s.encode("latin-1", "replace").decode("latin-1")
++
++
++class _PDF(FPDF):
++    """FPDF avec en-tête/pied Groupe-KA sur chaque page (sauf couverture).
++    Les polices core sont latin-1 : normalize_text sanitise en amont."""
++
++    def normalize_text(self, text):
++        return super().normalize_text(_latin1(text))
++
++    def __init__(self, brand: str, accent: tuple, period_label: str):
++        super().__init__(orientation="P", unit="mm", format="A4")
++        self.brand = brand
++        self.accent = accent
++        self.period_label = period_label
++        self.cover_mode = False
++        self.set_margins(18, 20, 18)
++        self.set_auto_page_break(True, margin=22)
++
++    def header(self):
++        if self.cover_mode or self.page_no() == 1:  # jamais sur la couverture
++            return
++        self.set_font("helvetica", "B", 8.5)
++        self.set_text_color(*INK)
++        self.set_xy(18, 9)
++        self.cell(0, 5, f"Groupe KA · {self.brand}")
++        self.set_font("helvetica", "", 8)
++        self.set_text_color(*INK3)
++        self.set_xy(18, 9)
++        self.cell(0, 5, "Rapport statistique", align="R")
++        self.set_draw_color(*INK)
++        self.set_line_width(0.5)
++        self.line(18, 15.5, 192, 15.5)
++        self.set_y(20)
++
++    def footer(self):
++        # le pied de la couverture se rend APRÈS la remise à zéro de cover_mode
++        # (add_page suivant) : on exclut donc aussi explicitement la page 1
++        if self.cover_mode or self.page_no() == 1:
++            return
++        self.set_y(-15)
++        self.set_draw_color(*INK3)
++        self.set_line_width(0.2)
++        self.line(18, self.get_y() - 1.5, 192, self.get_y() - 1.5)
++        self.set_font("helvetica", "", 7.5)
++        self.set_text_color(*INK3)
++        year = datetime.now(ZoneInfo("America/Toronto")).year
++        self.cell(130, 5, f"© Groupe-KA — {year} — groupe-ka.com · {self.period_label}")
++        self.cell(0, 5, f"p. {self.page_no()}/{{nb}}", align="R")
++
++
++class GroupeKAReport:
++    def __init__(self, site: dict, dashboard: dict, mode: str = "complet"):
++        self.site = site
++        self.d = dashboard
++        self.mode = mode
++        self.accent = _hex(site.get("accent", "#d9f26b"))
++        period = dashboard.get("period", {}) or {}
++        self.period_label = period.get("label") or "toute la période"
++        self.pdf = _PDF(site.get("wordmark", ""), self.accent, self.period_label)
++        self.toc: list[tuple[str, int]] = []
++
++    # ---------- primitives ----------
++    def _card(self, x, y, w, h, fill=WHITE):
++        p = self.pdf
++        p.set_draw_color(*INK)
++        p.set_line_width(0.45)
++        p.set_fill_color(*fill)
++        p.rect(x, y, w, h, style="DF", round_corners=True, corner_radius=2.2)
++
++    def _kicker(self, text):
++        p = self.pdf
++        p.set_font("helvetica", "B", 8)
++        p.set_text_color(*GREEN)
++        p.set_draw_color(*GREEN)
++        p.set_line_width(0.6)
++        y = p.get_y() + 2
++        p.line(p.l_margin, y, p.l_margin + 7, y)
++        p.set_xy(p.l_margin + 9, y - 2.5)
++        p.cell(0, 5, text.upper())
++        p.ln(8)
++
++    def _section_title(self, title):
++        if self.pdf.get_y() > 240:
++            self.pdf.add_page()
++        self._kicker("Groupe KA · " + self.site.get("wordmark", ""))
++        self.pdf.set_font("helvetica", "B", 15)
++        self.pdf.set_text_color(*INK)
++        self.pdf.set_x(self.pdf.l_margin)
++        self.pdf.cell(0, 8, title)
++        self.toc.append((title, self.pdf.page_no()))
++        self.pdf.ln(11)
++
++    # ---------- pages ----------
++    def _cover(self):
++        p = self.pdf
++        p.cover_mode = True
++        p.set_auto_page_break(False)
++        p.add_page()
++        p.set_fill_color(*PAPER)
++        p.rect(0, 0, 210, 297, style="F")
++        p.set_draw_color(*INK)
++        p.set_line_width(1.0)
++        p.rect(10, 10, 190, 277)
++        # kicker
++        p.set_font("helvetica", "B", 10)
++        p.set_text_color(*GREEN)
++        p.set_xy(24, 34)
++        p.cell(0, 6, "GROUPE KA · RAPPORT STATISTIQUE")
++        # wordmark : partie gauche + boîte encre/accent
++        wm = self.site.get("wordmark", "")
++        left, boxed = (wm.split("·") + [None])[:2] if "·" in wm else (wm, None)
++        p.set_xy(24, 70)
++        p.set_font("helvetica", "B", 40)
++        p.set_text_color(*INK)
++        p.cell(p.get_string_width(left) + 2, 20, left)
++        if boxed:
++            bw = p.get_string_width(boxed) + 12
++            x = p.get_x() + 2
++            p.set_fill_color(*INK)
++            p.rect(x, 68, bw, 22, style="F", round_corners=True, corner_radius=3)
++            p.set_text_color(*self.accent)
++            p.set_xy(x + 6, 70)
++            p.cell(bw - 12, 18, boxed)
++        p.set_xy(24, 100)
++        p.set_font("helvetica", "", 13)
++        p.set_text_color(*INK2)
++        p.multi_cell(150, 7, f"Rapport statistique — {wm}")
++        now = datetime.now(ZoneInfo("America/Toronto"))
++        per = self.d.get("period", {}) or {}
++        p.set_xy(24, 125)
++        p.set_font("helvetica", "", 10.5)
++        rows = [
++            ("Période couverte", self.period_label + (f" ({per.get('from')} → {per.get('to')})" if per.get("from") else "")),
++            ("Généré le", now.strftime("%Y-%m-%d à %H:%M") + " (heure de l'Est)"),
++            ("Plateforme", "https://" + self.site.get("domain", "")),
++            ("Mode", "Rapport complet" if self.mode == "complet" else "Synthèse"),
++        ]
++        y = 128
++        for k, v in rows:
++            p.set_xy(24, y)
++            p.set_text_color(*INK3)
++            p.cell(40, 6, k)
++            p.set_text_color(*INK)
++            p.set_font("helvetica", "B", 10.5)
++            p.cell(0, 6, str(v))
++            p.set_font("helvetica", "", 10.5)
++            y += 8
++        # bande encre au pied
++        p.set_fill_color(*INK)
++        p.rect(10, 262, 190, 25, style="F")
++        p.set_xy(24, 270)
++        p.set_font("helvetica", "B", 12)
++        p.set_text_color(*WHITE)
++        p.cell(60, 8, "par Groupe ")
++        p.set_text_color(*self.accent)
++        p.set_xy(24 + p.get_string_width("par Groupe ") + 1, 270)
++        p.cell(20, 8, "KA")
++        p.set_font("helvetica", "B", 10)
++        p.set_xy(24, 270)
++        p.set_text_color(*self.accent)
++        p.cell(162, 8, "groupe-ka.com", align="R")
++        p.set_auto_page_break(True, margin=22)
++        p.cover_mode = False
++
++    def _kpis(self):
++        kpis = self.d.get("kpis") or []
++        if not kpis:
++            return
++        self._section_title("Synthèse des indicateurs")
++        p = self.pdf
++        cols, gw, gh, gap = 3, 56, 26, 3
++        x0, y = p.l_margin, p.get_y()
++        for i, k in enumerate(kpis[:9]):
++            x = x0 + (i % cols) * (gw + gap)
++            if i and i % cols == 0:
++                y += gh + gap
++            if y > 250:
++                p.add_page(); y = p.get_y()
++            self._card(x, y, gw, gh)
++            p.set_xy(x + 4, y + 4)
++            p.set_font("helvetica", "B", 14)
++            p.set_text_color(*INK)
++            val = k.get("value")
++            p.cell(gw - 8, 7, (_fr(val) if isinstance(val, (int, float)) else str(val)) + (" " + k["unit"] if k.get("unit") else ""))
++            p.set_xy(x + 4, y + 12)
++            p.set_font("helvetica", "", 7.6)
++            p.set_text_color(*INK2)
++            p.multi_cell(gw - 8, 3.6, str(k.get("label", ""))[:70])
++            if k.get("delta_pct") is not None:
++                up = (k.get("direction") or ("up" if k["delta_pct"] >= 0 else "down")) == "up"
++                p.set_xy(x + 4, y + gh - 6.5)
++                p.set_font("helvetica", "B", 8)
++                p.set_text_color(*(GREEN if up else DANGER))
++                arrow = "+" if k["delta_pct"] >= 0 else ""
++                p.cell(gw - 8, 4, f"{'▲' if up else '▼'} {arrow}{str(k['delta_pct']).replace('.', ',')} % vs période préc.")
++        p.set_y(y + gh + 8)
++
++    def _line_chart(self, s):
++        p = self.pdf
++        pts = s.get("points") or []
++        if len(pts) < 2:
++            return
++        if p.get_y() > 200:
++            p.add_page()
++        p.set_font("helvetica", "B", 10)
++        p.set_text_color(*INK)
++        p.cell(0, 6, s.get("title", ""))
++        p.ln(7)
++        x0, y0, w, h = p.l_margin, p.get_y(), 174, 52
++        self._card(x0, y0, w, h, fill=WHITE)
++        cx, cy, cw, ch = x0 + 12, y0 + 6, w - 20, h - 16
++        vals = [pt["v"] for pt in pts] + [c["v"] for c in (s.get("compare") or [])]
++        vmax = max(vals) or 1
++        vmin = min(0, min(vals))
++        rng = (vmax - vmin) or 1
++        # grille + graduations
++        p.set_font("helvetica", "", 6.3)
++        p.set_text_color(*INK3)
++        p.set_draw_color(200, 200, 195)
++        p.set_line_width(0.15)
++        for g in range(5):
++            gy = cy + ch - ch * g / 4
++            p.line(cx, gy, cx + cw, gy)
++            p.set_xy(x0 + 1, gy - 1.6)
++            p.cell(10, 3, _fr(vmin + rng * g / 4), align="R")
++
++        def draw(series, color, width, dash=None):
++            n = len(series)
++            p.set_draw_color(*color)
++            p.set_line_width(width)
++            if dash:
++                p.set_dash_pattern(dash=1.2, gap=1.2)
++            last = None
++            for i, pt in enumerate(series):
++                px = cx + cw * (i / (n - 1))
++                py = cy + ch - ch * ((pt["v"] - vmin) / rng)
++                if last:
++                    p.line(last[0], last[1], px, py)
++                last = (px, py)
++            p.set_dash_pattern()
++
++        if s.get("compare"):
++            draw(s["compare"], INK3, 0.35, dash=True)
++        draw(pts, self.accent, 0.7)
++        # libellés d'axe X (premier / milieu / dernier)
++        p.set_text_color(*INK3)
++        for frac, idx in ((0, 0), (0.5, len(pts) // 2), (1, -1)):
++            p.set_xy(cx + cw * frac - 9, cy + ch + 1.5)
++            p.cell(18, 3, str(pts[idx].get("t", ""))[:10], align="C")
++        p.set_y(y0 + h + 4)
++        if s.get("compare"):
++            p.set_font("helvetica", "", 6.8)
++            p.set_text_color(*INK3)
++            p.cell(0, 4, "— période courante (accent) · ---- période comparée")
++            p.ln(6)
++        else:
++            p.ln(2)
++
++    def _bars(self, title, items, unit=""):
++        p = self.pdf
++        items = [it for it in (items or []) if isinstance(it.get("value"), (int, float))][:12]
++        if not items:
++            return
++        need = 10 + len(items) * 7
++        if p.get_y() + need > 265:
++            p.add_page()
++        p.set_font("helvetica", "B", 10)
++        p.set_text_color(*INK)
++        p.cell(0, 6, title)
++        p.ln(8)
++        vmax = max(it["value"] for it in items) or 1
++        for it in items:
++            y = p.get_y()
++            p.set_font("helvetica", "", 7.6)
++            p.set_text_color(*INK)
++            p.set_x(p.l_margin)
++            p.cell(46, 5, str(it["label"])[:34])
++            bw = 96 * (it["value"] / vmax)
++            p.set_fill_color(*self.accent)
++            p.set_draw_color(*INK)
++            p.set_line_width(0.25)
++            p.rect(p.l_margin + 48, y + 0.7, max(bw, 0.8), 3.6, style="DF")
++            p.set_xy(p.l_margin + 148, y)
++            p.set_font("helvetica", "B", 7.6)
++            p.cell(26, 5, _fr(it["value"]) + (" " + unit if unit else ""), align="R")
++            p.ln(6.4)
++        p.ln(3)
++
++    def _donut(self, b):
++        # anneau vectoriel simple (arcs) + légende
++        p = self.pdf
++        items = [it for it in (b.get("items") or []) if it.get("value")][:8]
++        total = sum(it["value"] for it in items)
++        if not items or not total:
++            return
++        if p.get_y() > 210:
++            p.add_page()
++        p.set_font("helvetica", "B", 10)
++        p.set_text_color(*INK)
++        p.cell(0, 6, b.get("title", ""))
++        p.ln(8)
++        cx, cy, r = p.l_margin + 26, p.get_y() + 24, 20
++        shades = [1.0, 0.78, 0.58, 0.42, 0.30, 0.22, 0.15, 0.10]
++        start = -90.0
++        for i, it in enumerate(items):
++            frac = it["value"] / total
++            f = shades[i % len(shades)]
++            col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3))
++            steps = max(2, int(72 * frac))
++            p.set_fill_color(*col)
++            p.set_draw_color(*col)
++            for st in range(steps):
++                a0 = math.radians(start + 360 * frac * st / steps)
++                a1 = math.radians(start + 360 * frac * (st + 1) / steps)
++                p.polygon(
++                    [(cx, cy),
++                     (cx + r * math.cos(a0), cy + r * math.sin(a0)),
++                     (cx + r * math.cos(a1), cy + r * math.sin(a1))],
++                    style="DF",
++                )
++            start += 360 * frac
++        p.set_fill_color(*WHITE)
++        p.set_draw_color(*INK)
++        p.set_line_width(0.4)
++        p.ellipse(cx - 11, cy - 11, 22, 22, style="DF")
++        p.ellipse(cx - r, cy - r, 2 * r, 2 * r, style="D")
++        # légende
++        ly = cy - 22
++        for i, it in enumerate(items):
++            f = shades[i % len(shades)]
++            col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3))
++            p.set_fill_color(*col)
++            p.set_draw_color(*INK)
++            p.rect(p.l_margin + 60, ly + 0.8, 4, 4, style="DF")
++            p.set_xy(p.l_margin + 66, ly)
++            p.set_font("helvetica", "", 7.6)
++            p.set_text_color(*INK)
++            pct = 100 * it["value"] / total
++            p.cell(0, 5.6, f"{str(it['label'])[:40]} — {_fr(it['value'])} ({pct:.1f} %)".replace(".", ","))
++            ly += 5.6
++        p.set_y(max(cy + r, ly) + 6)
++
++    def _table(self, t):
++        p = self.pdf
++        cols = t.get("columns") or []
++        rows = t.get("rows") or []
++        if not cols or not rows:
++            return
++        self._section_title(t.get("title", "Tableau"))
++        w = 174 / len(cols)
++        def head():
++            p.set_font("helvetica", "B", 7.6)
++            p.set_fill_color(*INK)
++            p.set_text_color(*WHITE)
++            for c in cols:
++                p.cell(w, 6, " " + str(c)[:30], fill=True)
++            p.ln(6)
++        head()
++        p.set_text_color(*INK)
++        for i, row in enumerate(rows[:200]):
++            if p.get_y() > 262:
++                p.add_page()
++                head()
++                p.set_text_color(*INK)
++            p.set_font("helvetica", "", 7.4)
++            p.set_fill_color(*(SURFACE2 if i % 2 else WHITE))
++            for cell in row:
++                txt = _fr(cell) if isinstance(cell, (int, float)) else str(cell)
++                p.cell(w, 5.4, " " + txt[:34], fill=True)
++            p.ln(5.4)
++        if len(rows) > 200:
++            p.set_font("helvetica", "", 7)
++            p.set_text_color(*INK3)
++            p.cell(0, 5, f"… {len(rows) - 200} lignes supplémentaires non imprimées")
++        p.ln(6)
++
++    def _records(self):
++        recs = self.d.get("records") or []
++        if not recs:
++            return
++        self._section_title("Records & faits marquants")
++        p = self.pdf
++        for r in recs[:10]:
++            if p.get_y() > 258:
++                p.add_page()
++            y = p.get_y()
++            self._card(p.l_margin, y, 174, 11, fill=SURFACE2)
++            p.set_xy(p.l_margin + 4, y + 2)
++            p.set_font("helvetica", "", 8.6)
++            p.set_text_color(*INK2)
++            p.cell(96, 7, str(r.get("label", ""))[:70])
++            p.set_font("helvetica", "B", 9)
++            p.set_text_color(*INK)
++            p.cell(52, 7, str(r.get("value", ""))[:36], align="R")
++            p.set_font("helvetica", "", 7.6)
++            p.set_text_color(*INK3)
++            p.cell(20, 7, str(r.get("date", "") or ""), align="R")
++            p.set_y(y + 13.5)
++        p.ln(4)
++
++    def _final_page(self):
++        p = self.pdf
++        p.add_page()
++        self._kicker("Groupe KA · contact")
++        p.set_font("helvetica", "B", 15)
++        p.set_text_color(*INK)
++        p.cell(0, 8, "Coordonnées du Groupe KA")
++        p.ln(12)
++        for email, role in EMAILS:
++            p.set_font("helvetica", "B", 10.5)
++            p.set_text_color(*INK)
++            p.cell(0, 6, email)
++            p.ln(5.5)
++            p.set_font("helvetica", "", 8.6)
++            p.set_text_color(*INK3)
++            p.cell(0, 5, role)
++            p.ln(8)
++        p.ln(2)
++        p.set_font("helvetica", "B", 10)
++        p.set_text_color(*GREEN)
++        p.cell(0, 6, "groupe-ka.com — le portail de l'écosystème ·Ka")
++        p.ln(10)
++        p.set_draw_color(*self.accent)
++        p.set_line_width(0.8)
++        p.line(p.l_margin, p.get_y(), p.l_margin + 30, p.get_y())
++        p.ln(4)
++        p.set_font("helvetica", "", 8.6)
++        p.set_text_color(*INK2)
++        p.multi_cell(160, 4.6, DISCLAIMER)
++        p.ln(4)
++        p.set_font("helvetica", "", 7.6)
++        p.set_text_color(*INK3)
++        p.multi_cell(
++            160, 4.2,
++            "Mentions : rapport généré automatiquement à partir des données réelles de la "
++            "plateforme au moment indiqué en couverture. Conditions d'utilisation, politique "
++            "de confidentialité et protection des renseignements personnels (Loi 25) : "
++            "groupe-ka.com/conditions · /confidentialite · /loi-25.",
++        )
++
++    def _toc_page(self):
++        # insérée après coup ? fpdf ne réordonne pas : on écrit le sommaire en
++        # page 2 en réservant la page lors du build (voir build()).
++        pass
++
++    def build(self) -> bytes:
++        p = self.pdf
++        p.alias_nb_pages()
++        self._cover()
++        if self.mode == "synthese":
++            p.add_page()
++            self._kpis()
++            self._records()
++            self._final_page()
++        else:
++            p.add_page()
++            toc_page_no = p.page_no()
++            p.add_page()
++            self._kpis()
++            for s in self.d.get("series") or []:
++                if s.get("kind") == "bar":
++                    self._bars(s.get("title", ""), [{"label": pt.get("t"), "value": pt.get("v")} for pt in (s.get("points") or [])], s.get("unit", ""))
++                else:
++                    self._line_chart(s)
++            for b in self.d.get("breakdowns") or []:
++                if b.get("kind") == "donut":
++                    self._donut(b)
++                else:
++                    self._bars(b.get("title", ""), b.get("items"))
++            geo = self.d.get("geo")
++            if geo:
++                self._bars(geo.get("title", "Répartition géographique"), geo.get("items"))
++            for t in self.d.get("tables") or []:
++                self._table(t)
++            self._records()
++            self._final_page()
++            # sommaire écrit sur la page réservée (page 2)
++            last_page = p.page
++            p.page = toc_page_no
++            p.set_y(22)
++            p.set_font("helvetica", "B", 15)
++            p.set_text_color(*INK)
++            p.cell(0, 8, "Sommaire")
++            p.ln(12)
++            p.set_font("helvetica", "", 9.5)
++            for title, page_no in self.toc:
++                p.set_text_color(*INK)
++                p.cell(140, 6.5, title[:80])
++                p.set_text_color(*INK3)
++                p.cell(0, 6.5, str(page_no), align="R")
++                p.ln(6.5)
++            p.page = last_page
++        return bytes(p.output())
++
++
++def filename(platform_id: str, period: str) -> str:
++    today = datetime.now(ZoneInfo("America/Toronto")).strftime("%Y-%m-%d")
++    return f"groupe-ka_{platform_id}_stats_{period}_{today}.pdf"

modified requirements.txt +1 −0

				`@@ -8,3 +8,4 @@ uvicorn>=0.29`
8	requests>=2.31	8	requests>=2.31
9	pydantic>=2.5	9	pydantic>=2.5
10	pytest>=8.0	10	pytest>=8.0
		11	+fpdf2>=2.7
11		12

spb/crea-ka

feat(stats): tableau de bord analytique /stats + rapport PDF Groupe-KA

Theme