V1.16.18 Modification des écrans

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

@@ -188,3 +188,68 @@ Séance close sur un bilan explicitement positif de Jean-Marc — *"content car.
 - 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.
+
+## 8 septembre 2026 : un bureau à plusieurs fonds interchangeables, avant-plan désormais séparé du décor (V1.16.18)
+
+*Session du matin. Trou de documentation à noter au passage : ce fichier n'avait plus été mis à jour depuis la clôture du 3 septembre ci-dessus, alors que le classeur "Contacts" unique de l'époque est depuis devenu neuf classeurs (Consignes, Contacts, Catalogue, Documents, Prospection, Réseaux, En-cours, Factures, Journalier) dans une session intermédiaire (aux alentours du 7 septembre) jamais consignée ici — écart relevé en préparant cette mise à jour, pas comblé aujourd'hui faute de matière pour la reconstituer a posteriori. À traiter un jour si l'occasion se présente (voir "Reste à faire" plus bas).*
+
+### Origine
+
+Jean-Marc a exposé le sujet en ouverture, en prévenant lui-même qu'il ne le traiterait pas d'un coup ("il va bien falloir que je dorme") : l'écran de fond, tel que configuré jusqu'ici avec un seul décor (le tableau de liège), ne suffira pas à tout gérer. Trois écrans de fond sont envisagés, derrière un même avant-plan (bureau, classeurs, micro, carnet, téléphone) qui ne change pas :
+- **Écran 1** : celui déjà en place (liège, post-its personnels) — reste l'écran d'ouverture.
+- **Écran 2** : un futur écran "assistants" — présentation encore à concevoir, fond en tasseaux de bois gris pour l'instant.
+- **Écran 3** : un futur tableau de bord — fond tableau blanc.
+
+Navigation demandée entre ces trois fonds : deux flèches sur le bureau.
+
+### Décisions de conception actées
+
+Plusieurs allers-retours ont permis d'arrêter les points suivants avant tout codage :
+- **Code de l'avant-plan et code des fonds séparés** — confirmé par Jean-Marc à la question de Claude.
+- **Les trois fonds sont codés en dur, pas conçus comme une liste extensible** — position explicite de Jean-Marc ("je pense qu'il faut s'autoriser à coder ça en dur"), assumant qu'il n'y aura pas de quatrième fond à intégrer facilement le jour venu sans reprendre la main sur le code.
+- **Animation de glissement au changement de fond**, suggérée par Claude en corollaire de la séparation avant-plan/fond, acceptée par Jean-Marc — et **le sens du glissement doit dépendre de la flèche pressée**, pas être un simple fondu neutre. Précision apportée un peu plus tard par Jean-Marc, après s'être rendu compte qu'il s'était mal exprimé une première fois : cliquer sur la flèche "écran suivant" fait apparaître l'écran n+1 **depuis la droite**, chassant l'écran actuel vers la gauche (et le mécanisme inverse pour "écran précédent") — pas l'inverse.
+- **L'écran 3 garde, comme les deux autres, l'avant-plan** — un moment de doute possible sur ce point (l'écran 3 étant un futur tableau de bord, on aurait pu imaginer un plein écran sans bureau), tranché explicitement par Jean-Marc : l'avant-plan reste partout.
+- **Aucune mémorisation du fond choisi d'une session à l'autre** — une nouvelle session démarre toujours sur l'écran 1, jamais sur le dernier fond consulté.
+- **Position des flèches** : sur le bureau, à droite, "pas trop grosses" — affiné ensuite par plusieurs retours de taille/position une fois le rendu réel visible (voir plus bas).
+- **Post-its solidaires du panneau de liège, pas de l'avant-plan.** Point important corrigé par Jean-Marc après un premier essai fonctionnel où les post-its avaient été traités par erreur comme un élément fixe de l'avant-plan (donc visibles sur les trois écrans) : *"ils seront attachés au panneau de liège, ils partiront avec lui"* — les post-its doivent apparaître et disparaître avec le fond 1 spécifiquement, jamais visibles sur les fonds 2 et 3.
+
+### Fourniture des images et remesure intégrale
+
+Jean-Marc a fourni six images : un avant-plan transparent (scène de bureau — classeurs, micro, carnet, téléphone — sans aucun décor de fond, à poser par-dessus n'importe lequel des trois fonds), les trois images de fond (liège actuel, tasseaux de bois gris, tableau blanc), et deux icônes de flèche. Ordre confirmé explicitement après une hypothèse initiale erronée de Claude (qui avait pris le tableau blanc pour un simple espace réservé en attendant un vrai contenu pour l'écran "assistants") : c'est bien le fond tasseaux gris qui va avec l'écran 2, et le tableau blanc, au sens propre, avec l'écran 3.
+
+Le nouvel avant-plan étant un dessin recomposé (pas la même photo que l'ancien `ecran_fond.jpg`), l'ensemble des repères en coordonnées image (classeurs, étiquettes, zone et icône du micro, pastille de comptage, zone des post-its) a dû être **entièrement remesuré** plutôt qu'ajusté par décalage — analyse par pixels (Python/PIL/numpy : seuillage du canal alpha pour la silhouette des objets, détection de transitions/paliers de couleur pour les bords des classeurs et le centre des rectangles d'étiquette), recoupée par inspection visuelle de rendus zoomés avec grille de repérage.
+
+### Architecture retenue
+
+- **Couche fonds** (`#fonds-container`) : une `div.fond-slide` par fond, chacune avec sa propre image de fond en `background-size:contain` — même logique de "contain" que l'ancien fond unique, reprise telle quelle.
+- **Couche avant-plan** (`#avant-plan`) : l'image transparente, fixe, `pointer-events:none`, positionnée par-dessus avec le même calcul de "contain" que les fonds (pour rester calée pixel pour pixel sur les fonds quel que soit le format d'écran).
+- **Éléments interactifs** (classeurs, micro, pastille, flèches) positionnés comme avant par la fonction `positionner()`, qui recalcule à chaque chargement/redimensionnement la zone réellement affichée de l'image de référence (1024×457) et en déduit la position/taille réelle à l'écran de chaque repère.
+- **Carrousel directionnel** : `changerFond(direction)` (direction = +1 ou -1) applique un `transform:translateX()` avec transition CSS sur le fond entrant et le fond sortant, dans le sens correspondant à la flèche pressée ; un `requestAnimationFrame` et une lecture forcée de `offsetWidth` (reflow) évitent que la transition ne se voie pas faute d'un état de départ bien posé ; un écouteur `transitionend` retire proprement le fond sortant du DOM une fois le glissement terminé.
+- **Post-its solidaires du fond 1** : plutôt que de dupliquer la logique de transformation pour un calque de post-its qui suivrait le fond de liège, une seule `div` de post-its (`couchePostits`, une référence JS conservée en permanence) est déplacée par `appendChild` dans la slide qui représente le fond 1 au moment de sa création — `appendChild` détache automatiquement la div de son parent précédent, et la référence JS survit même quand son ancien parent DOM est retiré (`remove()`). Résultat : les post-its apparaissent et disparaissent avec le panneau de liège, sans code spécifique de synchronisation, et sans recalcul de leur position. Vérifié en test headless (Playwright) : un post-it de test injecté disparaît bien sur les fonds 2 et 3, réapparaît sur le fond 1.
+- Aucune persistance du fond choisi (ni `localStorage` ni session serveur) : au chargement, l'écran s'ouvre toujours sur le fond 1.
+
+### Retouches successives de l'avant-plan
+
+Le premier avant-plan livré comportait des traces blanches résiduelles autour de certains objets et une zone blanche sur le micro (halo de détourage). Jean-Marc a livré une version corrigée — qui s'est révélée, à la vérification par comparaison de pixels, légèrement décalée par rapport à la première (~20-22px vers le bas sur l'ensemble de la composition, aucun décalage horizontal ; le décalage n'était pas parfaitement uniforme d'un repère à l'autre, d'où une remesure directe de chaque constante plutôt qu'un simple report d'un offset unique). Une deuxième retouche, plus tard dans la session, n'a corrigé qu'un détail de couleur (la pince du micro, passée du vert au noir) sans aucun décalage de composition — Jean-Marc l'a signalé lui-même à l'avance ("je ne change pas le fond de liège"), évitant une remesure inutile.
+
+### Réglages fins
+
+Comme à chaque fois qu'un élément est calé sur une image plutôt que sur un repère purement géométrique, plusieurs allers-retours de correction ont suivi la mise en ligne du premier rendu réel, chacun donné par Jean-Marc sous forme de retour concret sur son propre écran plutôt que de coordonnées :
+- Taille des flèches réduite d'environ 30 %, flèches rapprochées entre elles et décalées vers la droite, puis remontées verticalement (trop proches du bord bas dans un premier essai).
+- Icône du micro décalée légèrement vers la droite (position verticale déjà correcte).
+- Pastille de comptage des contacts repositionnée à plusieurs reprises (la position "à mi-chemin entre le bas du trou cerclé de métal et le bas du classeur", calculée par Claude par géométrie, ne correspondait pas exactement au rendu réel vu par Jean-Marc) — trois ajustements successifs avant validation finale ("en plein dans le mille !").
+- Règle de méthode reprise en cours de route pour aller plus vite : Jean-Marc donnant directement un nombre de pixels ("descends-la de 15px") plutôt qu'une description qualitative, chaque itération suivante est allée plus vite.
+
+### Fichiers touchés
+
+`ecran_fond.html` (restructuration majeure : couches fonds/avant-plan/post-its, carrousel, flèches), `avant_plan_bureau.png` (nouveau, remplacé deux fois en cours de session), `fond_bureau_1.jpg` (nouveau, liège), `fond_bureau_2.jpg` (nouveau, tasseaux de bois gris), `fond_bureau_3.jpg` (nouveau, tableau blanc), `fleche_precedente.png` / `fleche_suivante.png` (nouveaux), `version.php` (`V1.16.18` — `<code>` incrémenté en tout début de session à la demande de Jean-Marc, `<conception>` inchangé, cette évolution étant jugée une continuation du chantier déjà ouvert de l'écran de fond, pas une nouvelle section des Réflexions stratégiques).
+
+### Statut en fin de session
+
+Carrousel fonctionnel et validé par Jean-Marc sur son propre écran, après les réglages fins ci-dessus. Séance close sur un bilan positif ("je suis content du travail réalisé ce matin ! Encore une belle session !") — Jean-Marc a indiqué qu'il déposerait lui-même les fichiers sur le dépôt GitHub.
+
+**Reste à faire, noté au passage :**
+- Contenu de présentation de l'écran 2 ("assistants") — encore entièrement à concevoir, seul le fond (tasseaux de bois gris) existe à ce stade.
+- Contenu réel de l'écran 3 (tableaux de bord) — seul le fond (tableau blanc) existe à ce stade.
+- Combler, si l'occasion se présente, le trou de documentation relevé en tête de cette section (passage à neuf classeurs, session non consignée ici, aux alentours du 7 septembre).
+- Revalider l'ensemble des repères de l'avant-plan (classeurs, micro, pastille, flèches) si Jean-Marc devait encore retoucher cette image à l'avenir — toute nouvelle version demande, comme cette fois, une vérification de décalage avant de corriger au jugé.