spb/qc-election

1# UI Audit — refonte « QC Signal » (2026-08-30)23État des lieux avant la refonte du frontend (design v3 « sharp ») et dettes retirées par4la migration vers le design system **QC Signal** (voir `docs/DESIGN_SYSTEM.md`).5Refonte UI/UX pure : **aucun changement statistique, aucun contrat d'API modifié,6backend intact.**78## État avant910- Design v3 « sharp » : bon socle (thème dark/light, palette partis validée CVD,11  drawer mobile correct), mais tokens incomplets (pas d'échelle de radius/spacing12  formalisée, ombres composites lourdes `--shadow-lift`), deux polices (Inter +13  JetBrains Mono), logo = carré dégradé bleu/violet avec ⚜ emoji et ombre portée.14- Accueil : liste de cartes partis chargées (gros portraits + logos), baromètre15  « meter » comme seul visuel de sièges, aucun hemicycle, aucune hiérarchie16  éditoriale (pas de verdict principal), intervalles `[a–b]` en texte brut partout.17- « Le point du jour » : deltas **verts/rouges** (`delta-up`/`delta-down`) — une18  hausse du PQ affichée « positive » universellement, en contradiction avec la19  neutralité de la plateforme.20- Intelligence / simulateur : momentum et « vs référence » également en21  vert (`--good`) / rouge (`--plq`!) — le rouge d'un parti utilisé comme sémantique22  négative.23- Pas d'indicateur global du forecast hors de l'accueil (aucun « strip »).24- Tables longues (127 circonscriptions, ~2000 sondages) sans en-tête sticky ni25  hauteur bornée.26- /carte : carte à ~66 % de largeur, hauteur fixe 560 px, panneau 340 px figé.27- Emojis décoratifs dans les cartes de couches (🗳️✅🏛️📰📈) et libellés d'état.28- Bascule de thème = emoji ☀️/🌙.29- États vides hétérogènes (`<span style="color:var(--muted)">`, `.loading` partout).3031## Dettes retirées3233| Dette | Correction |34|---|---|35| Deltas vert/rouge (aujourdhui, intelligence, simulateur) | helper unique `deltaHTML` : flèche + valeur, couleur du parti ou neutre — jamais de valence universelle |36| `var(--plq)` (rouge PLQ) utilisé comme couleur d'erreur (admin, intelligence, simulateur) | `--danger` sémantique (admin) ou couleur du parti (données) |37| Intervalles texte `[24–86]` sans lecture visuelle | composant `rangeHTML` (barre lo─●─hi avec repère majorité) sur accueil + cartes partis |38| Aucune vue de composition des sièges | `hemicycleSVG` réutilisable (127 sièges, marqueur majorité 64, hover parti/sièges/IC) |39| Pas de résumé du forecast inter-pages | forecast strip sticky sous la nav sur les 11 pages (via `initShell`, `/api/today` + repli) |40| Logo pastille dégradée + emoji ⚜ | fleur-de-lys SVG nette monochrome accent, wordmark simple |41| Emoji ☀️/🌙 et emojis de couches | icônes SVG soleil/lune; couches numérotées 1-5 |42| 2 webfonts | Inter seul (code → pile monospace système) |43| Ombres/gradients lourds sur cartes | surfaces planes + `--shadow-sm/--shadow-md` discrets, bordures rgba faibles |44| Tables longues illisibles | `.table-scroll` (max-height 70 vh) + `th` sticky (circonscriptions, sondages) |45| /carte : carte à l'étroit | `.map-layout` ~75/25, hauteur `min(72vh, 700px)` |46| Débordement horizontal mobile (390 px) : tiroir hors-écran comptait dans scrollWidth; canvas ECharts verrouillait la colonne de grille (/intelligence à 824 px); table marchés sans conteneur | `html,body{overflow-x:clip}`, `.grid>*{min-width:0}`, `overflow-wrap:anywhere` sur les verbatims, conteneur défilant sur la table marchés — scrollWidth = 390 sur les 11 pages |47| Étiquette « majorité 64 » de l'hémicycle coupée hors viewBox | marge haute du SVG (+52 px) |48| Nav qui tronquait « Méthodologie » à 1440 px | paliers 1560/1250/1120 px (densité, masquage MAJ, masquage « Forecast ») |49| États vides ad hoc / risque de `undefined` | `emptyStateHTML(...)` uniforme; audit Playwright vérifie l'absence de `undefined`/`NaN`/`[object Object]` dans le texte rendu |50| Animations non bornées | ≤220 ms, `prefers-reduced-motion` respecté aussi par ECharts (`baseChart`) |5152## Langage uniformisé5354« Chance d'arriver premier » · « Sièges attendus » · « Vote projeté » · « Majorité » —55appliqué à l'accueil, au point du jour, au strip et aux cartes partis.5657## Validation5859`~/ka-screenshots/qcsignal-audit.mjs` : 11 pages × {1440, 1024, 768, 390} px,60collecte `pageerror` + `console.error`, détection de texte `undefined`/`NaN`,61captures `/tmp/qcsignal_*.png` (accueil aussi en clair 1440 + 390).62Résultat final : **zéro erreur JS, zéro débordement horizontal, aucun texte cassé**63sur les 44 combinaisons.6465## Contrats préservés (fragiles — ne pas renommer)6667- IDs DOM consommés par les scripts de page (inchangés partout) : notamment68  `hdr-updated`, `drawer-updated`, `nav-burger`, `fstrip` (coquille);69  `party-cards`, `trend-chart`, `seat-hist`, `prob-hist`, `nowfc`, `events`,70  `latest-polls`, `beyond-*` (accueil); tous les IDs de carte/circonscriptions/71  sondages/signaux/simulateur/intelligence/backtest/admin inchangés.72- Helpers globaux d'app.js réutilisés par toutes les pages : `initShell`,73  `getJSON`, `API`, `partyColor/partyName/partyLeader`, `avatarHTML`,74  `initialsAvatar`, `partyLogo`, `fmtPct/fmtDate/sortParties`, `baseChart`,75  `AXIS_STYLE/TOOLTIP/LEGEND`, `areaGrad/lineGlow/hexA`,76  `DARKMODE/GRID_COLOR/SPLIT_COLOR/MUTED/INK2/CHART_FONT` — signatures intactes.77- La probabilité « premier » affichée reste la valeur **publiée**78  (`seats.ensemble.blended` avec repli `prob_most`) — aucune probabilité79  recalculée côté client; l'outcome bar n'utilise que `prob_majority`,80  `prob_minority_win` et leur complément.81