V1.009 Homogénéisation des écrans (début)

journal/ASPIC-Journal. 28. Ecran de fond.md

@@ -95,28 +95,82 @@ Implémenté dans `ecran_fond.html`, en s'appuyant sur le pattern `positionner()
 
 `contacts.php` (paramètre `?compte=1`), `ecran_fond.html` (pastille classeur + zone et grille de post-its), `todolist.php` (constante et vérification de capacité), `version.php` (`V1.008`).
 
+## 3 septembre 2026 : homogénéisation des écrans, adaptation à la nouvelle photo de bureau (V1.009)
+
+Session dédiée, dès l'ouverture, à mettre en cohérence l'écran de fond avec la liste des contacts (bandeaux, identité utilisateur, micro) — objectif explicite de Jean-Marc : *"mettre en cohérence la gestion des contacts avec ce que l'on a mis en place hier"*. De nombreux allers-retours de correction fine, avec plusieurs incompréhensions de Claude corrigées en cours de route par Jean-Marc — détaillées ci-dessous car elles éclairent des règles de conception à retenir pour la suite.
+
+### Nettoyage des barres de `liste_contacts.html`
+
+Retiré du bandeau haut : l'icône menu ("hamburger", devenue inutile depuis que l'écran de fond est le véritable écran d'accueil), l'avatar/nom court, le badge société, et l'icône micro. Le bandeau haut ne porte plus que le titre, renommé de "LISTE DES CONTACTS" à **"CLASSEUR DES CONTACTS. Liste de synthèse"**, calé là où était le hamburger.
+
+La barre de statut basse regroupe en contrepartie tout ce qui identifie l'utilisateur et l'application : société, prénom, micro (recentré au milieu de la barre — voir plus bas), logo ASPIC miniature et numéro de version. Hauteur portée de 20 à 32px pour que le bouton micro y tienne à sa taille réelle.
+
+Touche **Échap** sur cet écran : ramène désormais à `ecran_fond.html` (au lieu de fermer l'application — comportement de l'écran d'identification, qui n'a plus lieu d'être ici puisque l'écran de fond fait maintenant tampon).
+
+### Logo, icône Mévélia, numéro de version — une "marque" commune aux deux écrans
+
+Le logo ASPIC, retiré du bandeau haut, réapparaît en mini format dans la barre du bas, devant le numéro de version, avec le même traitement graphique repris à l'identique sur l'écran de fond (cohérence explicitement demandée par Jean-Marc — *"ajoute de la même façon le logo dans l'écran de départ"*).
+
+Ajouts successifs sur ce groupe (`#marque-aspic`) : icône ronde Mévélia Solutions (fournie par Jean-Marc, initialement carrée puis reprise en cercle via `border-radius:50%`, après vérification par Claude — masque circulaire en Python/PIL — que le recadrage ne coupait aucune partie du logo) placée devant le logo ASPIC ; infobulle multi-lignes au survol du groupe entier ("ASPIC Vn.nnn / Créé par Mevelia Solutions", numéro de version injecté dynamiquement) ; espacement interne réduit de moitié (8px→4px) à la demande de Jean-Marc. Icône Mévélia également posée en favicon sur les quatre écrans HTML de l'application. Onglet du navigateur renommé "ASPIC. Classeur des contacts" (au lieu de "ASPIC - Liste des taches", resté de l'époque où la ToDoList était l'écran d'accueil).
+
+### Identité utilisateur (société, prénom) — repositionnement et corrections
+
+Société et prénom, auparavant dans le bandeau haut (badge société en cartouche bleu, avatar prénom), sont désormais du texte simple dans la barre du bas, séparés par un "gros point" (`•`, 14px) — un entre société et prénom, un second entre prénom et le groupe `#marque-aspic`. Le badge cartouche est abandonné : même mise en forme simple pour les deux informations.
+
+**Erreur corrigée en cours de route par Jean-Marc :** un premier essai groupait par erreur le bouton micro avec ce bloc identité en bas à droite. Correction demandée : le micro doit être **seul**, centré au milieu de toute la barre — pas dans le groupe identité — par cohérence avec le micro de l'écran de fond, posé au milieu du bureau, sans lien avec une notion d'identité. Bouton `#bouton-micro` sorti du bloc, repositionné en absolu centré (`left:50%;top:50%;transform:translate(-50%,-50%)`), icônes et couleurs reprises à l'identique de l'écran de fond (SVG glyphe-repos/glyphe-ecoute, gris au repos `#d9d9d3`, rouge `#e14a5c` en écoute, mêmes barres d'animation `pulse-barre`). Un rond de fond noir (`background:var(--cartouche-bg)`, `border-radius:50%`) a ensuite été ajouté derrière l'icône, celle-ci étant quasi invisible en gris sur gris sur le fond de la barre.
+
+### Bug corrigé : Échap sur l'écran de fond ouvrait la ToDoList
+
+Repéré par hasard par Jean-Marc (*"quad je tape esc dans l'écran de départ j'accède à l'écran de la todolist"*). Cause : un gestionnaire de touche Échap resté de l'époque où `liste_todolist.html` était l'écran d'accueil, jamais retiré quand l'écran de fond a pris ce rôle. Le gestionnaire a été purement et simplement supprimé — Échap sur l'écran de fond n'a désormais aucun effet de navigation.
+
+### Correctif de cache navigateur (`.htaccess`)
+
+En marge des demandes visuelles, Jean-Marc a signalé un problème récurrent et ancien : après dépôt d'une nouvelle version, les pages restent affichées dans leur ancien état malgré rafraîchissements classiques (F5, Ctrl-F5), un passage par la navigation privée étant jusqu'ici son seul contournement fiable. Fichier livré : `htaccess-racine-aspic.txt` (à renommer `.htaccess` et déposer à la racine de l'application) — ajoute `Cache-Control: no-cache, must-revalidate` sur les fichiers `.html`/`.js`/`.css`, pour que le navigateur revérifie systématiquement auprès du serveur plutôt que de servir une copie locale périmée. **Non confirmé déployé par Jean-Marc à la clôture de cette session — à vérifier à la prochaine.**
+
+### Nouvelle photo de bureau — chevalet retiré, repositionnement complet
+
+Jean-Marc a livré une nouvelle version de `ecran_fond.jpg` (mêmes dimensions 1024×457) : 13px retirés en bas de la photo (tranche de bureau), 13px de liège ajoutés en haut, et le petit chevalet — porteur jusque-là du prénom de l'utilisateur — physiquement retiré de la scène photographiée (*"je l'ai rangé dans une armoire"*).
+
+Décalage vérifié empiriquement par Claude par analyse de pixels (Python/PIL — repérage de transitions de couleur et de boîtes englobantes sur des objets reconnaissables des deux photos) plutôt que déduit du seul énoncé de Jean-Marc : +13px uniforme sur l'axe vertical, aucun décalage horizontal, confirmé sur plusieurs objets de contrôle avant application.
+
+Répercuté dans `ecran_fond.html` : toutes les constantes de positionnement calées sur l'image (étiquette du classeur, zone cliquable du classeur, zone et icône du micro, pastille de comptage) décalées de +13 en Y ; zone des post-its agrandie en hauteur (limite basse repoussée de y=352 à y=395) puisque le chevalet ne la borne plus. Le chevalet a été retiré intégralement : CSS, HTML, constantes JS, fonction `chargerIdentiteChevalet()` renommée `chargerIdentiteUtilisateur()` (logique chevalet proprement retirée, seule la lecture société/prénom est conservée), `chargerVersionDesk()` renommée `chargerVersionBureau()`.
+
+**Incompréhension corrigée en cours de route par Jean-Marc, à retenir comme règle de conception :** dans un premier temps, Claude avait replacé le bloc identité (société/prénom/marque) sur l'écran de fond en le calant sur le système de coordonnées de la photo, comme les autres éléments du décor — raisonnement erroné. Rappel de Jean-Marc : *"tu affiches les infos en bas à droite à la même place que dans la liste des contacts"* — ce bloc n'est **pas** un élément photographié, c'est une donnée d'interface qui doit rester à une position fixe du viewport, identique pixel pour pixel à celle de `liste_contacts.html`, indépendamment de la photo affichée derrière. Reconstruit en conséquence : mêmes identifiants HTML que `liste_contacts.html` (pas de suffixe `-desk`), CSS `position:fixed;right:16px;bottom:10px`, entièrement sorti de la fonction `positionner()` (qui ne recalcule plus que les éléments réellement ancrés sur la photo).
+
+### Alignement horizontal entre les deux écrans — bug du `--sb-width`
+
+Après déploiement et test réel par Jean-Marc (*"tatillon, je sais"*), écart horizontal constaté entre les deux écrans sur ce même bloc identité : décalé vers la droite sur la liste des contacts par rapport à l'écran de fond. Cause identifiée : `liste_contacts.html` calait le bloc avec `right:calc(var(--sb-width) + 10px)`, `--sb-width` étant en réalité la largeur de l'ascenseur *interne* de la liste (mesurée en JS, servant à l'origine à aligner l'en-tête de colonnes sur l'ascenseur du corps de liste) — une variable sans rapport avec la barre de statut du bas, qui ne porte plus aucun repère visuel d'ascenseur. Reliquat de raisonnement par réutilisation d'une variable déjà présente, plutôt qu'une vraie contrainte de mise en page. Corrigé en calant `right:16px` en dur, valeur identique à `ecran_fond.html` — vérifié par mesure de position réelle (`getBoundingClientRect()`) : les deux blocs tombent désormais exactement à `right:16px` / `left:1034,375px` sur une même largeur de fenêtre.
+
+### Fichiers touchés (3 septembre 2026)
+
+`liste_contacts.html`, `ecran_fond.html`, `ecran_fond.jpg` (nouvelle photo fournie par Jean-Marc), `identification.html` et `liste_todolist.html` (favicon uniquement), `mevelia-icone.png` (nouveau), `htaccess-racine-aspic.txt` (nouveau, non encore déployé), `version.php` (`V1.009`, incrémentée une seule fois pour l'ensemble de cette session).
+
 ## Point ouvert, non tranché
 
 - La question enveloppes/Gmail (voir plus haut) portait sur la maquette liège/post-its, mise de côté par le changement de cap ci-dessus — à retrancher le jour où cette piste sera reprise, pas urgent pour l'essai en cours.
 - Confirmer un jour le libellé du 4ᵉ classeur envisagé dans la maquette liège ("À faire" / ToDoList) — question qui ne se pose plus dans l'immédiat : l'essai en cours n'a pour l'instant qu'un seul classeur fonctionnel ("Contacts").
-- La "tranche du bureau" (bord avant du plan de travail, en bas de l'image) n'est pas visible à l'écran chez Jean-Marc. Il précise que ça ne le gêne pas dans l'immédiat, mais que ça pourrait poser problème plus tard — à revoir un jour. Cause non investiguée à ce stade.
-- Répartition dynamique des 70% entre assistants par charge de tâches (formule actée, voir ci-dessus) — pas codée, bloquée tant que la ToDoList des assistants n'existe pas réellement.
+- La "tranche du bureau" (bord avant du plan de travail) n'était pas visible à l'écran chez Jean-Marc sur l'ancienne photo — non revérifié depuis le recadrage du 3 septembre (13px retirés en bas), qui a pu déplacer ou atténuer le problème sans que ce soit son objet. À reconfirmer à l'usage.
+- Répartition dynamique des 70% entre assistants par charge de tâches (formule actée, voir plus haut) — pas codée, bloquée tant que la ToDoList des assistants n'existe pas réellement.
 - Discriminant humain/agent à ajouter à `ASP_ToDoList`/`todolist.php` pour qu'un assistant puisse être attributaire d'une tâche — préalable à la répartition dynamique et aux couleurs de post-it par assistant (`AGN_Couleur`).
 - Écran "journalier" (trace des réalisations, humain + assistants) — donnée déjà quasi disponible, écran à construire.
-- Règles de calcul des pastilles rouge/orange/vert à revoir (voir remarque de Jean-Marc ci-dessus).
+- Règles de calcul des pastilles rouge/orange/vert à revoir (voir remarque de Jean-Marc, nuit du 2-3 septembre).
 - Comportement du clic sur un post-it à décider (aujourd'hui inerte) : ouvrir `liste_todolist.html` sur la tâche précise, ou détail affiché directement sur l'écran de fond.
 - Capacité du tableau (20) et taille de la grille (4×5) sont des valeurs provisoires posées avant d'avoir les vrais pixels de la version aboutie — à ajuster ensemble après usage réel prolongé.
+- Déploiement du correctif `.htaccess` de cache (voir ci-dessus) — à confirmer par Jean-Marc.
+- Documentation utilisateur : certains passages décrivant l'écran "Liste des contacts" comme écran d'accueil et le menu hamburger sont devenus obsolètes suite aux changements du 3 septembre — corrections ponctuelles apportées le jour même (voir document séparé), une repasse plus complète (écran de fond, panneau détail, ToDoList, pilotage vocal — aucun de ces écrans n'est encore documenté pour l'utilisateur) reste à faire un jour.
 
 ## Statut et suite
 
-**Deux livraisons réelles sur la même soirée du 2 septembre, la seconde se prolongeant après minuit (3 septembre) :** l'essai fonctionnel initial (classeur Contacts, chevalet, micro test d'affichage, version — V1.007), puis la pastille de comptage sur le classeur et un premier affichage réel, fonctionnel et testé, du tableau de post-its personnels de Jean-Marc (V1.008). Plusieurs allers-retours de correction fine à chaque étape, à partir des retours directs de Jean-Marc sur son propre écran ou sur des rendus envoyés par Claude — la mesure de position sur une photo réelle (plutôt que sur un dessin vectoriel) continue de demander une vérification fine à chaque retour.
+**Trois livraisons réelles en trois jours consécutifs (2-3 septembre) :** l'essai fonctionnel initial de l'écran de fond (classeur Contacts, chevalet, micro test d'affichage, version — V1.007), la pastille de comptage et le premier affichage réel du tableau de post-its (V1.008), puis cette session d'homogénéisation des deux écrans et d'adaptation à la nouvelle photo sans chevalet (V1.009). Plusieurs allers-retours de correction fine à chaque étape, à partir des retours directs de Jean-Marc sur son propre écran ou sur des rendus envoyés par Claude — la mesure de position sur une photo réelle (plutôt que sur un dessin vectoriel) continue de demander une vérification fine à chaque retour, y compris pour des détails de mise en page fine (calage horizontal du bloc identité).
 
-Séance close sur un bilan explicitement positif de Jean-Marc ("très satisfait du travail accompli"), après une séance précédente terminée sur une note plus mitigée. Fin de session actée à sa demande, sans blocage — dépôt des fichiers sur GitHub prévu par ses soins le lendemain matin.
+Séance close sur un bilan explicitement positif de Jean-Marc — *"content car... j'ai commencé à homogénéiser la logique des écrans, ce qui est pour moi important"*, confirmé "very well" après déploiement et test réel sur son propre environnement. Fin de session actée à sa demande, protocole habituel de clôture suivi (mise à jour du journal, copies téléchargeables, vérification du dépôt une fois le push de Jean-Marc effectué).
 
 **Reste à faire, noté au passage :**
-- Revoir un jour le sujet de la "tranche du bureau" non visible chez Jean-Marc (voir ci-dessus).
-- Décider si les autres objets photographiés sur le bureau (carnet, téléphone) doivent devenir cliquables/fonctionnels dans une prochaine étape, ou rester un habillage visuel statique pour l'instant.
-- Brancher réellement le micro du bureau sur la reconnaissance vocale de `micro.js` (aujourd'hui : bascule d'affichage seule, sans effet sur l'écoute réelle).
+- Confirmer le déploiement du correctif `.htaccess` de cache.
+- Reconfirmer l'état de la "tranche du bureau" après le recadrage du 3 septembre (voir ci-dessus).
+- Décider si les autres objets photographiés sur le bureau (carnet, téléphone) doivent devenir cliquables/fonctionnels, ou rester un habillage visuel statique.
+- Brancher réellement le micro du bureau (et celui de la barre de statut) sur la reconnaissance vocale de `micro.js` (aujourd'hui : bascule d'affichage seule, sans effet sur l'écoute réelle).
 - Trancher, un jour, le sort de la piste "maquette liège + post-its par agent" (Claude Design) : mise de côté pour les essais en cours, mais pas explicitement enterrée pour une version plus aboutie.
 - Artifact de travail de la maquette liège (dernière version, non utilisée dans l'essai actuel) : https://claude.ai/code/artifact/a647369f-d320-4b21-9f8c-11b20f2ad353 — lien privé à Jean-Marc, à ne pas considérer comme un livrable définitif.
+- Repasse complète de la documentation utilisateur pour couvrir l'écran de fond, le panneau détail, la ToDoList et le pilotage vocal.
 - Répartition dynamique par charge, discriminant humain/agent, écran journalier, règles de pastilles, comportement du clic sur un post-it, calibrage capacité/grille : voir "Point ouvert, non tranché" ci-dessus.