# Refonte UX/UI — maquettes « FORMIND » (août 2026)

Livraison de l'associé, déposée le 12/08 : **17 écrans HTML**, repris des
écrans existants de staging et retravaillés. Sept écrans composés depuis s'y
ajoutent (voir plus bas).

```
html/MAQUETTES FORMIND/
├── Pilotage/       tableau de bord, collaborateurs, tous les collaborateurs,
│                   invitations (+ suivi), inscriptions (+ demandes),
│                   liste des cours, parcours, tuto
└── Apprentissage/  utilisateurs (+ modale), cours admin (+ modale),
                    parcours (+ modale), paramètres
```

## Les écrans que la livraison ne couvrait pas

Neuf écrans du lot n'existaient pas dans la livraison du 12/08 : ils ont été
**composés à partir du catalogue d'éléments v3** puis **validés par l'associé**.
Sept sont ici ; les deux derniers attendent dans la PR #400.
Ils vivent à la RACINE de `html/`, sans dossier d'univers — les deux dossiers
ci-dessus portent les noms de l'auteur, pas le découpage du produit, et les y
ranger aurait propagé la confusion.

| Fichier | Écran | Origine |
|---|---|---|
| `8-onboarding-lien-efektiv-v3.html` | Onboarding par lien | composé, validé |
| `9-cockpit-apprenant-efektiv-v3.html` | Cockpit apprenant | composé, validé |
| `9-page-parcours-efektiv-v3.html` | Page parcours (apprenant) | composé, validé |
| `10-profil-unique-efektiv-v3.html` | Profil unique | composé, validé |
| `11-connexion-efektiv-v3.html` | Connexion | composé, validé |
| `12-vitrine-publique-efektiv-v3.html` | Vitrine publique | composé, validé |
| `maquette-cours-apprenant-efektiv-v3.html` | Cours côté apprenant | composé, validé |
| `13-tentative-quiz-efektiv-v3.html` | Tentative de quiz | composé, **validé le 16/08** — ⚠️ susceptible d'être retouchée par le lot « quiz » |

⚠️ **Deux autres attendent dans la PR #400**, non mergée à ce jour :
`0-accueil-apprenant` et `7-referentiels`. Tant qu'elle est ouverte, ces deux
écrans ne sont **nulle part sur `development`**.

### Points ouverts des maquettes : ce qui a été tranché depuis

Les fichiers composés portent leurs questions ouvertes dans un encadré interne
(A-1…, B-1…). Elles ne sont **pas** mises à jour dans le HTML — la maquette est
un instantané. Ce qui a été décidé après coup vit dans les issues :

| Point | Fichier | Décision |
|---|---|---|
| **B-1** | `7-referentiels` | **Tranché le 14/08 : un écran à ONGLETS**, pas quatre entrées de latérale. Deux rubriques distinctes — « Référentiels cours » (Catégories · Sous-catégories · Balises · Types de supports) et « Référentiels utilisateurs » (Sociétés · Profils métier). Détail et garde-fous : **FRONT#56**. |
| **C-1** | `9-cockpit-apprenant` | **Tranché le 15/08 : un vrai fil d'Ariane** `Mes équipes › Léa Nguyen`, et l'entrée de latérale d'origine reste allumée. Le `navigate(-1)` disparaît — il rejoue l'historique, il ne ramène pas. **Sorti du lot UX/UI → FRONT#177.** |
| **C-2** | `9-cockpit-apprenant` | **Tranché le 15/08 : les 4 valeurs du code font foi** (`never_active` / `one_shot` / `occasional` / `recurring`) — la distinction « jamais actif » / « une seule fois » est réelle et utile. Seul le **libellé** change : « One-shot » → **« Une seule fois »**. Clé de donnée inchangée. Reste dans **FRONT#146**. |
| **C-3** | `9-cockpit-apprenant` | **Tranché par le CODE, PR FRONT#176 du 15/08 — la maquette est en retard d'une journée.** Sémantique « au moins N » conservée (seule possible : `CollaboratorMetrics::filterAtLeast()` ne filtre pas une égalité à zéro, **BACK#422**), libellés passés au français courant : « Avec retard » / « 2 retards ou plus ». Le « ≥ 1 / ≥ 2 » de la maquette est **caduc**. Rien à faire. |
| **C-4** | `9-cockpit-apprenant` | **Tranché le 15/08 : expliciter le rôle et sa valeur** — « Votre rôle de Manager d'équipe donne accès à 24 mois d'activité. » ⚠️ Piège de vocabulaire : `manager` technique = **Manager RH**, `sub_manager` = **Manager d'équipe**. Reste dans **FRONT#146**. |
| **C-5** | `9-cockpit-apprenant` | **Tranché le 15/08 : deux jeux de tokens ASSUMÉS.** Le socle commun n'est **pas** étendu — ni `--alert/--alert-bg`, ni `--warn/--warn-bg`, ni `--ink-4`, ni `--t-h2`. Retard et abandon restent **composés** sur `--accent` et `--type-parcours`, bandeau sur `--pill`. Décision délibérée : ne pas la « corriger » au passage en croyant rembourser de la dette. Reste dans **FRONT#146**. |
| **C-6** | `9-cockpit-apprenant` | **Tranché le 15/08 : retard et abandon remontent** sur la ligne de formation du niveau 1 — c'est là qu'on décide d'agir. **Sorti du lot UX/UI → FRONT#178.** |
| **C-7** | `9-cockpit-apprenant` | **Tranché le 15/08 : les actions du cockpit sont un sujet à part.** Le bouton « Écrire à Léa » de la maquette est une **proposition sans code** : il n'est **pas** livré par la passe de design. **Sorti du lot UX/UI → FRONT#179.** |
| **C-8** | `9-cockpit-apprenant` | **Tranché le 15/08 : regroupement par jour + plafond ÉCRIT à l'écran.** Une troncature muette se lirait comme « il n'y a rien d'autre ». **Sorti du lot UX/UI → FRONT#180.** |

⚠️ Lire l'encadré d'une maquette sans passer par ce tableau, c'est rouvrir une
question déjà réglée.

⚠️ **Une maquette validée peut encore bouger si un LOT à venir touche son
sujet.** `13-tentative-quiz` est validée, mais le lot qui intègre les quiz la
retouchera peut-être — ses six questions ouvertes (Q-1 à Q-6) portent justement
sur des règles que ce lot devra trancher : nombre de tentatives, minuteur,
définition du « Badge ». La valider maintenant permet de développer le reste ;
elle n'est pas figée pour autant.

⚠️ **Une maquette peut aussi être dépassée par le CODE, pas seulement par une
décision.** Un instantané vieillit dans les deux sens. Cas vécu le 15/08 sur
`9-cockpit-apprenant` : la maquette affichait « ≥ 1 / ≥ 2 » alors que la PR
FRONT#176, mergée le matin même, avait déjà remplacé ces libellés ; et l'écran
« Mes équipes » qu'elle dessine n'a **aucun composant propre** — il délègue tout
à `CollaboratorsScreen`, refondu par cette même PR. **Avant de spécifier un
écran d'après sa maquette, aller au code sur `development` à jour** : une partie
du travail peut déjà être faite, et un clone en retard fait conclure l'inverse.

> **Pourquoi ce tableau existe.** Ces fichiers ont vécu quatre sessions sur un
> bureau, hors dépôt : invisibles à toute recherche dans le code, redécouverts à
> chaque fois. La règle du projet vaut aussi pour les maquettes — si ça compte,
> c'est committé ici.

> Les deux dossiers portent les noms d'univers de l'auteur ; ils ne
> correspondent pas au découpage du produit (le dossier « Apprentissage »
> contient en réalité les écrans d'ADMINISTRATION). Ne pas s'y fier pour
> déduire l'univers d'un écran.

## Méthode de reprise

1. **Le catalogue d'éléments d'abord** : couleurs, typographie, espacements,
   rayons, ombres, boutons dans leurs états, champs, cartes, tableaux, badges,
   modales. C'est lui qui compte le plus.
2. **Appliqué dans les composants PARTAGÉS** (`BarreLaterale`, les trois
   layouts, la `DataTable`, la barre générale, les SCSS communs) : une grande
   partie du LMS change d'apparence sans toucher aux écrans un par un.
3. **Les écrans en dernier**, par familles, alignés sur la phase 3 — les
   toucher deux fois (structure puis design) serait du gâchis.

## Contraintes posées par Enguerran (12/08)

- **Le logo reste celui de staging**, PAS celui des maquettes.
- **Le menu pliable/dépliable** (aujourd'hui en haut à gauche, à côté du logo
  Efektiv Académie) rejoint le **bloc de menu de gauche**, et permet de plier
  et déplier la latérale. **Sur toutes les vues où il apparaît.**
- **Une maquette AJOUTE, elle ne retire jamais.** Toute fonctionnalité
  présente sur staging et absente d'une maquette est un **oubli**, jamais une
  suppression. Cas nommé : la **barre de recherche dans les listes
  déroulantes** (utilisateurs, formations) — conservée. En cas de doute :
  arbitrage d'Enguerran, aucune décision unilatérale.
- Les **règles d'UX déjà actées tiennent** : latérale gauche pour tous les
  univers (12/08), les 5 règles de tableau, la barre générale réelle.

## Composants absents des écrans existants

Ils ne peuvent pas figurer dans une reprise de l'existant. Ceux qui se
déduisent du vocabulaire seront composés ; ceux qui demandent un vrai choix
de design sont soumis à arbitrage.

| Composant | Pour |
|---|---|
| Poignées de glisser-déposer + état « en déplacement » | éditeur de parcours, studio |
| Timeline de déclenchement d'une étape | éditeur de parcours (#318) |
| Cadenas d'étape verrouillée + date de déblocage | page parcours apprenant |
| Menu « + Créer » à choix multiples | liste Cours unifiée (EA-062) |
| Badges de type Cours / Tuto / Parcours | liste Cours unifiée |
| États vides et états d'erreur | toutes les listes |

_(L'archive `.zip` d'origine n'est pas versionnée : les fichiers décompressés
font foi.)_