# L'écart réel — premier tour connecté, 16/08 au soir > **Ce document est le premier à comparer les écrans EN SESSION avec leur > maquette.** Tout ce qui a été validé jusqu'ici l'a été sur des composants > montés hors session, avec des données de test. C'est la différence entre > vérifier un gabarit et regarder un écran. ## Ce qui a rendu ce tour possible Les comptes de recette existent depuis ce soir. Avant, je n'avais aucun moyen d'ouvrir un écran authentifié : toutes mes vérifications portaient sur des composants isolés, avec des fixtures. **Un gabarit conforme ne dit rien d'un écran complet.** Méthode : Playwright, un contexte de navigation par rôle — donc quatre sessions simultanées sans collision — capture en 1440×1000, maquette capturée dans le même cadre. ## Le constat général **L'écart n'est pas uniforme, et c'est l'information la plus utile.** | Univers | État | Pourquoi | |---|---|---| | **Pilotage** | **proche de la cible** | recetté le 15/08, 23 écarts corrigés et déployés | | **Administration** | correct dans l'ensemble | reprise progressive depuis juillet | | **Apprentissage** | **loin** | c'est là que se concentre tout l'écart | Dire « tout est approximatif » serait injuste pour le pilotage ; dire « c'est aligné » serait faux pour l'apprentissage. Les deux écrans qu'un client regarde en premier — la page d'accueil de l'apprenant et la page d'un cours — sont précisément les moins finis. --- ## Mesures automatiques sur 17 écrans | Écran | `

` | Latérale | |---|---|---| | Accueil apprenant · Mes formations | Mes formations | `sticky` | | Catalogue | Catalogue | `sticky` | | **Page d'un cours** | **AUCUN** | absente | | Tableau de bord pilotage | Tableau de bord | `sticky` | | Mes collaborateurs · Mes équipes · Tous les collaborateurs | oui | `sticky` | | Invitations · Inscriptions | oui | `sticky` | | Utilisateurs · Cours · Paramètres | oui | `sticky` | | **Référentiels** | Référentiels | **absente** | | Mes cours · Mes apprenants (formateur) | oui | `sticky` | | Mon profil | Mon profil | `sticky` | Deux anomalies structurelles : - **La page d'un cours n'a aucun `

`.** Le titre du cours est le titre de la page ; il est rendu dans un élément non sémantique. Pour un lecteur d'écran, cette page n'a pas de titre. - **Référentiels n'a pas de latérale.** L'écran a été livré cette nuit (#56) et n'a pas reçu l'enveloppe d'administration. --- ## Écran par écran — ce qui manque ### Accueil apprenant / Mes formations | Maquette | En ligne | |---|---| | « **Bonjour David** » + « Voici où vous en êtes et ce qui vous attend. » | « Mes formations », sans salutation ni sous-titre | | Latérale : **icônes** + **compteurs** par entrée (Mes formations 3, À faire 2, Catalogue 42…) | ni icônes ni compteurs | | **5 entrées** dont « À faire » | 4 entrées, **pas d'« À faire »** | | — | un bloc « **REPÈRES** » absent de la maquette | | Bandeau de reprise avec **vignette du cours** et **deux** boutons (Reprendre · Voir le sommaire) | pas de vignette, un seul bouton | | Tuiles avec **icônes** | tuiles sans icônes | | **Section « À faire »** avec badges de retard (« En retard de 12 jours », « À faire sous 5 jours ») et bouton Commencer par ligne | **ABSENTE** | | « Signaler un bug », discret | « **Report a Bug** », en anglais, très visible | **Le manque le plus lourd est la section « À faire ».** Ce n'est pas de la décoration : c'est l'endroit où l'apprenant voit ce qui est en retard et ce qui arrive à échéance. C'est le cœur de la promesse d'un LMS de conformité. ### Page d'un cours Mesuré : le fond sombre est **exact** (`rgb(11, 50, 57)` des deux côtés). Ce ne sont pas les couleurs qui manquent. | Maquette | En ligne | |---|---| | Titre en `

` 32px/700 | **aucun `

`** | | Bouton « **Commencer le cours** » | absent | | « Niveau débutant » · « 19 min au total » · « 10 apprenants » | absents | | « Vous n'avez pas encore commencé. Le cours reste accessible sans limite de temps. » | absente | | Sommaire **dans une carte** (fond plus clair, bordure, rayon) | posé à même le fond sombre | | Items en **cartes** avec icône typée dans un carré coloré | pilules à filet fin | | Lecteur avec bouton de lecture centré, durée en bas | image de couverture avec un bouton « **S'abonner** » rose au centre | ### Pilotage — proche de la cible Latérale à icônes en deux groupes (PILOTAGE · GESTION), filtres Période · Société · Équipe, deux entonnoirs nommés, cartes d'alerte en rose, et l'encadré qui explique pourquoi les deux entonnoirs ne s'additionnent pas. C'est le niveau de finition attendu partout ailleurs. --- ## Ce que ce tour dit de la méthode suivie jusqu'ici Trois validations successives ont conclu que la page d'un cours était conforme : la recette de gabarit du matin, le rapport du fil qui l'a livrée, et une CI verte. **Aucune des trois ne regardait la page.** - La recette de gabarit montait le composant **hors session**, avec des données de test : elle mesurait un panneau, des onglets, un sommaire — tous corrects. - La CI joue 1 361 tests sous jsdom, qui **n'applique aucune feuille de style** et ne charge aucune donnée réelle. - Le rapport du fil décrivait ce qu'il avait implémenté, pas ce qui s'affiche. Ce n'est pas un défaut de rigueur : c'est un angle mort structurel. Il n'existait aucun moyen d'ouvrir un écran connecté avant ce soir. **Il en existe un maintenant, et il doit devenir la référence.** Une page n'est « conforme » que lorsqu'elle a été ouverte avec un vrai compte, sur des vraies données, et comparée à sa maquette dans le même cadre. --- ## Ce qui reste à faire sur ce tour - [ ] Comparer les 14 autres écrans un par un — seuls trois l'ont été en détail. - [ ] Vérifier le comportement de la latérale **au défilement** : elle est déclarée `sticky`, ce qui ne suffit pas si un parent porte un `overflow`. - [ ] Mesurer les polices et les tailles réelles, écran par écran. - [ ] Chiffrer l'effort de reprise, écran par écran.