docs: add redesign spec and implementation plan

docs/superpowers/specs/2026-06-21-bilan-redesign-design.md

@@ -0,0 +1,93 @@
+# Redesign Professionnel — Bilan d'Évaluation
+
+**Date :** 2026-06-21  
+**Contexte :** Application React/Vite standalone utilisée par un formateur seul pour évaluer un apprenant (CP1–CP9), puis exporter un PDF.
+
+---
+
+## Problèmes identifiés
+
+1. Pas de hiérarchie visuelle — tout est au même niveau
+2. Workflow non évident — l'ordre des actions n'est pas guidé
+3. Aspect peu professionnel à montrer
+4. Actions importantes (Générer, IA, PDF) noyées en bas de page
+
+---
+
+## Architecture générale
+
+### Topbar sticky (64px)
+
+Structure en trois zones :
+
+- **Gauche :** logo Arinfo (32px hauteur) + séparateur + CP selector stylisé en pill indigo
+- **Centre :** titre dynamique `Bilan CPX — [sous-titre]` en font-weight 600, taille 15px
+- **Droite :** champs Prénom + Nom (inputs compacts, 36px, fond transparent) + trois boutons d'action principaux
+
+Boutons topbar (hiérarchie visuelle explicite) :
+- `📝 Générer` — style outline, secondaire
+- `✨ Résumer avec l'IA` — gradient violet→rose, bouton dominant
+- `📄 PDF` — gradient emerald, visible uniquement si `anySelected === true`
+
+Le topbar reste visible au scroll via `position: sticky; top: 0; z-index: 100`.
+
+### Toolbar critères (44px)
+
+Barre fine sous le topbar, fond `#f8fafc`, `border-bottom` subtile :
+- Gauche : liens texte "Tout sélectionner" / "Tout désélectionner"
+- Droite : input "Ajouter un critère…" + bouton `+` compact
+
+### Grille de critères
+
+Trois colonnes (Performance / Compétence / Connaissance), layout identique à l'existant avec amélioration du layout interne des items.
+
+**Header de card :** titre bucket uppercase + badge compteur sur fond coloré très léger (teinte propre à chaque bucket).
+
+**Layout interne d'un item :** passage de `flex-column` à `flex-row` :
+```
+[☐ checkbox]  [label texte — flex-grow]  [NA][EC][AC][MA]  [× supprimer]
+```
+Cela rend les items plus denses, plus lisibles, et réduit la hauteur de page.
+
+### Section synthèse
+
+Séparée du reste par un divider visuel centré : `──── Synthèse & Export ────`
+
+Layout deux colonnes :
+- **Gauche :** notes formateur (textarea), tonalité (select), checkbox "insérer en tête", config API OpenAI (accordéon collapsible)
+- **Droite :** textarea bilan (monospace, `min-height: 380px`, hauteur libre)
+
+### Notifications de statut
+
+Les messages de statut (`success`, `error`, `info`) passent en **toast flottant** positionné `fixed` en bas à droite, avec disparition automatique. Ils ne s'insèrent plus dans le flux de contenu.
+
+---
+
+## Changements CSS
+
+- Ajout de `.app-topbar` (sticky header)
+- Ajout de `.criteria-toolbar`
+- Ajout de `.section-divider`
+- Modification de `.competence-item` : `flex-direction: row`, `align-items: center`
+- Modification de `.level-group` : suppression du `border-top`, intégration inline
+- Ajout de `.toast-container` + `.toast` (positionnement fixed)
+- Suppression des `.controls` génériques (remplacés par topbar et toolbar dédiés)
+
+---
+
+## Changements JSX
+
+- Le rendu passe de `.bilan-wrapper > .bilan-container` à `.app-shell > .app-topbar + .app-main`
+- Le `<select>` CP selector, les inputs identité et les trois boutons d'action montent dans le topbar
+- La toolbar critères regroupe les boutons "Tout sélectionner/désélectionner" et le champ "Ajouter"
+- `showStatus` redirige vers un système de toast (état `toasts: []`, auto-retrait)
+- Le reste de la logique métier est inchangé
+
+---
+
+## Ce qui ne change pas
+
+- Logique métier complète (niveaux, drag & drop, génération PDF, appel OpenAI)
+- Les 3 colonnes de critères et leurs level pills
+- Les variables CSS existantes (couleurs, shadows, fonts)
+- La responsivité mobile (media queries à adapter)