+
+
+
+
+ {/* La toolbar critères (Task 3), la grille et la section synthèse viennent ici */}
+ {/* Conserver la grille .competences-grid et .evaluation-summary-section existantes pour l'instant */}
+
+
+
+);
+```
+
+**Important :** déplacer les éléments JSX de la grille `.competences-grid` et de `.evaluation-summary-section` à l'intérieur de `
+ 
+
+
+
+
+
+ {currentTitle.h1}
+ {currentTitle.h2}
+
+
+
+ setFirstName(event.target.value)}
+ />
+ setLastName(event.target.value)}
+ />
+
+
+
+
+ {anySelected && (
+
+ )}
+
+
+ {toasts.map((toast) => (
+
+
+ {toast.withProgress ? (
+ <>
+ {toast.message}
+
+ ))}
+
+
+
+
+ ) : (
+ {toast.message}
+ )}
+
+
+```
+
+- [ ] **Étape 3 : Vérifier visuellement**
+
+```bash
+npm run dev
+```
+
+Résultats attendus :
+- Barre fine entre le topbar et la grille avec "Tout sélectionner · Tout désélectionner" à gauche
+- Input + bouton "+" à droite, alignés
+- Les deux actions fonctionnent (cocher/décocher tous)
+- Ajouter un critère via Enter ou clic "+" crée un item dans "À classer"
+
+- [ ] **Étape 4 : Commit**
+
+```bash
+git add src/components/Bilan.jsx src/components/Bilan.css
+git commit -m "feat: add criteria toolbar with selection controls and add-criterion input"
+```
+
+---
+
+### Task 4 : Layout interne des items en flex-row
+
+**Transforme le layout vertical de chaque `.competence-item` en ligne horizontale : checkbox → label (flex-grow) → level pills → bouton supprimer. Réduit la hauteur de page et améliore la densité.**
+
+**Files:**
+- Modify: `src/components/Bilan.css` (`.competence-item`, `.competence-label`, `.level-group`, `.remove-field-btn`)
+
+**Interfaces:**
+- Consumes: structure `.competence-item` existante dans le JSX (inchangée)
+- Produces: items en flex-row, visuellement plus compacts
+
+---
+
+- [ ] **Étape 1 : Modifier `.competence-item` pour flex-row**
+
+Localiser la règle `.competence-item` dans `Bilan.css` et remplacer par :
+
+```css
+.competence-item {
+ border: 1px solid var(--border-slate-200);
+ padding: 10px 12px;
+ border-radius: var(--radius-md);
+ cursor: grab;
+ background: #ffffff;
+ transition: var(--transition);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 10px;
+ box-shadow: var(--shadow-card);
+ position: relative;
+}
+```
+
+- [ ] **Étape 2 : Modifier `.competence-label` pour occuper l'espace disponible**
+
+Localiser `.competence-item .competence-label` et remplacer par :
+
+```css
+.competence-item .competence-label {
+ flex: 1;
+ min-width: 0;
+ font-weight: 600;
+ color: var(--text-primary);
+ font-size: 13px;
+ cursor: pointer;
+ line-height: 1.4;
+ padding-right: 0;
+}
+```
+
+- [ ] **Étape 3 : Modifier `.level-group` pour s'intégrer inline**
+
+Localiser `.level-group` et remplacer par :
+
+```css
+.level-group {
+ display: flex;
+ flex-wrap: nowrap;
+ gap: 4px;
+ align-items: center;
+ flex-shrink: 0;
+ border-top: none;
+ padding-top: 0;
+ margin-top: 0;
+}
+```
+
+- [ ] **Étape 4 : Supprimer `.level-title` du JSX**
+
+Dans `Bilan.jsx`, dans le rendu de chaque item, localiser et supprimer la ligne :
+
+```jsx
+Niveau :
+```
+
+Ce label textuel prend de la place inutilement en layout row.
+
+- [ ] **Étape 5 : Modifier `.remove-field-btn` pour sortir du positionnement absolu**
+
+Remplacer la règle `.remove-field-btn` par :
+
+```css
+.remove-field-btn {
+ background: #fee2e2;
+ color: #ef4444;
+ border: 0 !important;
+ border-radius: 50% !important;
+ width: 20px !important;
+ height: 20px !important;
+ padding: 0 !important;
+ font-size: 12px !important;
+ cursor: pointer;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ flex-shrink: 0;
+ opacity: 0;
+ transform: scale(0.8);
+ transition: var(--transition);
+ box-shadow: none !important;
+ position: static;
+}
+```
+
+- [ ] **Étape 6 : Vérifier visuellement**
+
+```bash
+npm run dev
+```
+
+Résultats attendus :
+- Chaque item de critère est maintenant une seule ligne horizontale
+- Checkbox à gauche, label au centre (stretch), level pills (NA/EC/AC/MA) à droite
+- Le bouton × apparaît au hover, après les pills
+- La grille est sensiblement plus compacte
+
+- [ ] **Étape 7 : Commit**
+
+```bash
+git add src/components/Bilan.css src/components/Bilan.jsx
+git commit -m "feat: switch criteria items to horizontal flex-row layout"
+```
+
+---
+
+### Task 5 : Section divider + polish de la synthèse
+
+**Ajoute le séparateur visuel "Synthèse & Export", supprime le h3 redondant, améliore le header des cards de critères, et nettoie la section synthèse.**
+
+**Files:**
+- Modify: `src/components/Bilan.jsx` (ajout `.section-divider`, suppression `
+
+ ·
+
+
+
+ setNewCriterion(event.target.value)}
+ onKeyDown={(event) => event.key === "Enter" && handleAddCriterion()}
+ />
+
+
+Synthèse & Observations
`) +- Modify: `src/components/Bilan.css` (`.section-divider`, amélioration `.competence-card h4`, loader inline) + +**Interfaces:** +- Consumes: structure `.evaluation-summary-section` existante +- Produces: séparateur visuel rendu, section synthèse sans titre redondant + +--- + +- [ ] **Étape 1 : Ajouter le CSS du divider et polisher les card headers** + +Ajouter dans `Bilan.css` après les classes `.criteria-toolbar-*` : + +```css +.section-divider { + display: flex; + align-items: center; + gap: 16px; + margin: 48px 0 32px; + color: var(--text-muted); + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.section-divider::before, +.section-divider::after { + content: ''; + flex: 1; + height: 1px; + background: var(--border-slate-200); +} +``` + +Modifier `.competence-card h4` pour ajouter un fond coloré léger au header de chaque card : + +```css +.competence-card h4 { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 -24px 0 -24px; + padding: 12px 24px; + font-size: 12px; + font-weight: 800; + color: var(--text-primary); + text-transform: uppercase; + letter-spacing: 0.06em; + border-radius: var(--radius-lg) var(--radius-lg) 0 0; + background: rgba(248, 250, 252, 0.8); + border-bottom: 1px solid var(--border-slate-200); +} +``` + +- [ ] **Étape 2 : Ajouter le JSX du divider dans Bilan.jsx** + +Dans `
+ Synthèse & Export
+
+```
+
+- [ ] **Étape 3 : Supprimer le h3 redondant dans .evaluation-summary-section**
+
+Dans le JSX de `.evaluation-summary-section`, supprimer :
+
+```jsx
+Synthèse & Observations
+``` + +- [ ] **Étape 4 : Supprimer le bloc `.ai-status-loader` du JSX (déjà remplacé par toasts)** + +Localiser et supprimer du JSX : + +```jsx +{isAiLoading && ( +
+
+ Génération du résumé en cours…
+
+)}
+```
+
+- [ ] **Étape 5 : Vérifier visuellement**
+
+```bash
+npm run dev
+```
+
+Résultats attendus :
+- Ligne horizontale avec "Synthèse & Export" centré entre la grille et la section de synthèse
+- Headers des cards de critères ont un fond légèrement teinté
+- Pas de h3 redondant dans la section synthèse
+- Le loader inline a disparu (remplacé par toast en Task 1)
+
+- [ ] **Étape 6 : Commit**
+
+```bash
+git add src/components/Bilan.jsx src/components/Bilan.css
+git commit -m "feat: add section divider, polish card headers, remove redundant labels"
+```
+
+---
+
+### Task 6 : Nettoyage CSS final + responsive
+
+**Supprime toutes les classes CSS devenues inutilisées et adapte les media queries au nouveau layout.**
+
+**Files:**
+- Modify: `src/components/Bilan.css` (suppression `.bilan-wrapper`, `.bilan-container`, `.header`, `.controls`, `.logo-bg`, `.status`, `.back-btn`, `.ai-loader`, `.ai-status-loader`; mise à jour media queries)
+
+**Interfaces:**
+- Consumes: tout le CSS final des tasks 1–5
+- Produces: fichier CSS sans classes orphelines, responsive fonctionnel
+
+---
+
+- [ ] **Étape 1 : Supprimer les classes obsolètes de Bilan.css**
+
+Supprimer entièrement les blocs CSS suivants (ils ne sont plus référencés dans le JSX) :
+
+- `.bilan-wrapper` et `.logo-bg`
+- `.bilan-container`
+- `.header`, `.header h1`, `.header h2`
+- `.back-btn`, `.back-btn:hover`
+- `.controls`, `.controls.controls-select`, `.controls.controls-select label`, `.controls.identity input`, `.controls.actions input`, `.controls.actions button:last-of-type`, `.controls input`, `.controls select`
+- `.status`, `.status.info`, `.status.success`, `.status.error`, `.status .progress`, `.status .progress-bar`
+- `.ai-loader`
+- `.ai-status-loader`
+- `.bilan-container button`, `.bilan-container button:hover`, `.bilan-container button:disabled` (les boutons du topbar ont leurs propres classes)
+- `.bilan-container select`, `.bilan-container select option`
+- `.bilan-container textarea` (remplacé par les règles dans `.summary-inputs-panel` et `.summary-output-panel`)
+
+- [ ] **Étape 2 : Mettre à jour les media queries**
+
+Localiser le bloc `@media (max-width: 768px)` et le remplacer par :
+
+```css
+@media (max-width: 768px) {
+ .app-topbar {
+ height: auto;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 12px 16px;
+ gap: 10px;
+ }
+
+ .topbar-center {
+ align-items: flex-start;
+ }
+
+ .topbar-right {
+ flex-wrap: wrap;
+ gap: 8px;
+ }
+
+ .topbar-input {
+ width: 90px;
+ }
+
+ .topbar-actions {
+ border-left: none;
+ padding-left: 0;
+ margin-left: 0;
+ flex-wrap: wrap;
+ }
+
+ .app-main {
+ padding: 16px 16px 48px;
+ }
+
+ .criteria-toolbar {
+ flex-direction: column;
+ align-items: flex-start;
+ height: auto;
+ padding: 8px 0;
+ gap: 8px;
+ }
+
+ .toolbar-add-input {
+ width: 100%;
+ }
+
+ .criteria-toolbar-right {
+ width: 100%;
+ }
+
+ .summary-grid {
+ grid-template-columns: 1fr;
+ gap: 24px;
+ }
+
+ .competences-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .competence-item {
+ flex-wrap: wrap;
+ }
+
+ .level-group {
+ flex-wrap: wrap;
+ margin-left: 28px;
+ }
+
+ .toast-container {
+ bottom: 12px;
+ right: 12px;
+ left: 12px;
+ max-width: none;
+ }
+}
+```
+
+- [ ] **Étape 3 : Vérification finale desktop**
+
+```bash
+npm run dev
+```
+
+Vérifier le workflow complet :
+1. Changer de CP → topbar se met à jour immédiatement
+2. Renseigner Prénom/Nom dans le topbar
+3. Cocher plusieurs critères + assigner des niveaux
+4. Cliquer "📝 Générer" → toast succès apparaît en bas à droite
+5. Cliquer "✨ Résumer avec l'IA" (sans clé) → toast erreur apparaît
+6. Le bouton "📄 PDF" apparaît dès qu'un critère est coché
+7. Ajouter un critère custom via la toolbar → apparaît dans "À classer"
+8. Drag & drop entre colonnes fonctionne toujours
+
+- [ ] **Étape 4 : Vérification mobile (DevTools, 375px)**
+
+Redimensionner à 375px. Vérifier :
+- Topbar passe en colonne, reste lisible
+- La grille passe en 1 colonne
+- La summary grid passe en 1 colonne
+- Les toasts s'affichent en bas en pleine largeur
+
+- [ ] **Étape 5 : Commit final**
+
+```bash
+git add src/components/Bilan.jsx src/components/Bilan.css
+git commit -m "chore: remove unused CSS classes and update responsive breakpoints"
+```
diff --git a/docs/superpowers/specs/2026-06-21-bilan-redesign-design.md b/docs/superpowers/specs/2026-06-21-bilan-redesign-design.md
new file mode 100644
index 0000000..3cbd00f
--- /dev/null
+++ b/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 `