V1.16.18 Modification des écrans

ecran_fond.html

@@ -30,7 +30,36 @@
      autre écran, mais ne devraient plus apparaître chez lui. Nouvelle image
      1024×457 : toutes les coordonnées ci-dessous ont été remesurées sur
      cette version (celles mesurées sur la précédente, 1280×650, ne
-     s'appliquent plus). */
+     s'appliquent plus).
+
+     8 septembre 2026 — passage à plusieurs fonds interchangeables (voir
+     réflexions stratégiques). Jean-Marc a fourni un jeu d'images séparant
+     enfin ce qui était jusqu'ici une seule photo plate (ecran_fond.jpg,
+     bureau + classeurs + micro + carnet + téléphone fondus ensemble) en
+     deux calques réutilisables :
+       - avant_plan_bureau.png : classeurs, micro, carnet, téléphone et
+         plateau du bureau, en PNG transparent (fond réellement transparent,
+         vérifié) — IDENTIQUE quel que soit l'écran affiché.
+       - fond_bureau_1.jpg / fond_bureau_2.jpg / fond_bureau_3.jpg : les 3
+         décors interchangeables (liège actuel, tasseaux gris pour l'écran
+         assistants, tableau blanc pour les futurs tableaux de bord),
+         affichés SEULS derrière l'avant-plan, sans classeurs dessus.
+     Toutes les images font 1024×457 comme l'ancienne photo — même logique
+     de "contain" ci-dessous, appliquée à l'avant-plan ET au conteneur des
+     fonds ensemble (voir #fonds-container/#avant-plan plus bas), pour que
+     les deux calques restent alignés au pixel près quelle que soit la
+     proportion d'écran.
+     L'avant-plan étant un nouveau visuel (classeurs redessinés, pas la même
+     photo), toutes les coordonnées de classeurs/micro/pastille ci-dessous
+     ont dû être entièrement remesurées dessus (mesure par analyse pixel,
+     même exigence que d'habitude) — un premier passage, à affiner comme
+     toujours une fois vu en conditions réelles chez Jean-Marc.
+     Navigation : 2 flèches posées sur le bureau à droite (voir
+     #fleche-precedente/#fleche-suivante), 3 fonds codés en dur (décision de
+     Jean-Marc), pas de mémorisation du fond choisi d'une session à l'autre
+     (toujours le fond 1 par défaut), sens du glissement lié à la flèche
+     pressée (le fond n+1 entre par la droite en poussant l'actuel vers la
+     gauche, et inversement). */
   @font-face{
     font-family:"Metro DF";
     src:url('MetroDF.woff2') format('woff2'),url('MetroDF.ttf') format('truetype');
@@ -42,12 +71,65 @@
     font-family:"Segoe UI","Arial",sans-serif;
   }
   body{
-    /* Couleur échantillonnée sur le mur de la photo, pour que les bandes
+    /* Couleur neutre pour les bandes laissées par "contain" quand la
-       laissées par "contain" (si la proportion de l'écran diffère de celle
+       proportion de l'écran diffère de celle des images (1024×457) — plus
-       de l'image) se fondent avec la scène plutôt que de créer un bord net. */
+       de couleur unique "sampled sur le mur" possible depuis le 8 septembre
-    background:#ad580d url('ecran_fond.jpg') center center / contain no-repeat;
+       2026, chaque fond ayant sa propre teinte de mur. */
+    background:#2b2b2b;
     position:relative;
   }
+  /* Conteneur des fonds interchangeables (8 septembre 2026) : positionné et
+     dimensionné exactement comme l'était l'image unique auparavant (même
+     calcul "contain" dans positionner(), voir plus bas), mais désormais un
+     élément réel plutôt qu'un simple background CSS du body — nécessaire
+     pour pouvoir faire glisser un fond hors champ pendant qu'un autre entre
+     (voir changerFond()). overflow:hidden empêche le fond en cours de
+     transition de déborder pendant son glissement. */
+  #fonds-container{
+    position:fixed;
+    overflow:hidden;
+  }
+  /* Un fond = une image plein cadre du conteneur (même ratio 1024×457 que
+     l'avant-plan, donc pas de letterbox interne : 100%/100% suffit, jamais
+     de déformation). position:absolute pour que l'ancien et le nouveau
+     fond puissent coexister le temps du glissement (voir changerFond()). */
+  .fond-slide{
+    position:absolute;
+    inset:0;
+    background-size:100% 100%;
+    background-position:center;
+    background-repeat:no-repeat;
+  }
+  /* Avant-plan (classeurs + micro + carnet + téléphone + plateau du bureau) :
+     identique quel que soit le fond affiché derrière, voir consigne de
+     Jean-Marc du 8 septembre 2026. Toujours positionné/dimensionné
+     exactement comme #fonds-container (même calcul dans positionner()),
+     jamais animé — pointer-events:none pour laisser passer le clic vers les
+     zones cliquables réelles (classeur-zone, micro-desk, etc.), positionnées
+     par-dessus au même titre qu'avant. */
+  #avant-plan{
+    position:fixed;
+    width:100%;height:100%;
+    pointer-events:none;
+    display:block;
+  }
+  /* Flèches de navigation entre fonds (8 septembre 2026) : posées sur le
+     bureau à droite, taille volontairement modeste ("pas trop grosses",
+     Jean-Marc) — ARROW_TAILLE_FRAC plus bas dans le script, à ajuster une
+     fois vu en conditions réelles ("ça va dépendre du rendu", Jean-Marc).
+     pointer-events déjà "auto" par défaut (bouton), pas besoin de le forcer. */
+  .fleche-nav{
+    position:fixed;
+    border:none;background:transparent;padding:0;margin:0;
+    cursor:pointer;
+    display:block;
+  }
+  .fleche-nav img{
+    width:100%;height:100%;display:block;
+  }
+  .fleche-nav:hover{
+    filter:brightness(1.15);
+  }
   /* Étiquettes des 9 classeurs (7 septembre 2026 — évolution de l'essai à
      un seul classeur "Contacts" du 2 septembre). Nouvelle photo fournie par
      Jean-Marc, mêmes dimensions de référence (1024×457) et même bureau/mur/
@@ -329,9 +411,24 @@
      visuellement proches. Pas de texte sur le post-it (choix explicite de
      Jean-Marc) : le titre de la tâche n'apparaît qu'au survol (title natif),
      le clic ne fait rien pour l'instant (voir journal — navigation vers
-     liste_todolist.html volontairement pas encore branchée). */
+     liste_todolist.html volontairement pas encore branchée).
+     Attachés au fond liège depuis le 8 septembre 2026 (retour de Jean-Marc :
+     "ils seront attachés au panneau de liège, ils partiront avec lui") : le
+     conteneur #postits-layer est déplacé (au sens JS, pas dupliqué) à
+     l'intérieur de la slide du fond liège (index 0) à chaque fois qu'elle
+     existe (voir creerFondSlide()/changerFond() dans le script) — les
+     post-its glissent donc avec ce fond précis pendant la transition, et
+     restent invisibles (hors DOM visible, simplement parqués dans une slide
+     retirée) tant qu'un autre fond est affiché. position:absolute (plus
+     fixed) car désormais positionnés par rapport à ce conteneur local, pas
+     par rapport à la fenêtre — voir positionner() (zoneLeft/zoneTop ne
+     rajoutent plus offX/offY). */
+  #postits-layer{
+    position:absolute;
+    inset:0;
+  }
   .postit{
-    position:fixed;
+    position:absolute;
     box-shadow:2px 4px 8px rgba(0,0,0,.35);
     background:
       linear-gradient(135deg, transparent 50%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.12) 62%, transparent 62%) bottom right / 22% 22% no-repeat,
@@ -362,6 +459,13 @@
 </head>
 <body>
 
+<!-- Fonds interchangeables + avant-plan fixe (8 septembre 2026, voir
+     commentaire d'en-tête). #fonds-container reste vide ici : rempli par
+     initialiserFonds() au chargement (1er fond) puis par changerFond() à
+     chaque clic sur une flèche. -->
+<div id="fonds-container"></div>
+<img id="avant-plan" src="avant_plan_bureau.png" alt="">
+
 <!-- Les 9 zones cliquables + étiquettes de classeurs (7 septembre 2026) sont
      créées par creerClasseurs() (voir script) à partir du tableau CLASSEURS,
      sur le même principe que les post-its plus bas : éviter de dupliquer 9
@@ -393,6 +497,17 @@ Créé par Mevelia Solutions">
   </div>
 </div>
 
+<!-- Flèches de navigation entre fonds (8 septembre 2026) : posées sur le
+     bureau à droite (consigne de Jean-Marc), après tous les autres éléments
+     fixes pour rester cliquables au-dessus de tout (ordre du document =
+     ordre d'empilement, aucun z-index explicite ailleurs sur cette page). -->
+<button id="fleche-precedente" class="fleche-nav" type="button" title="Écran précédent">
+  <img src="fleche_precedente.png" alt="Écran précédent">
+</button>
+<button id="fleche-suivante" class="fleche-nav" type="button" title="Écran suivant">
+  <img src="fleche_suivante.png" alt="Écran suivant">
+</button>
+
 <script>
   // Référence de l'image : 1024×457, inchangée en dimensions (voir
   // ecran_fond.jpg — 3ᵉ version le 3 septembre 2026, Jean-Marc a raccourci
@@ -426,17 +541,31 @@ Créé par Mevelia Solutions">
   // CLASSEURS_Y1/Y2 : rectangle vertical de la tranche visible, commun aux
   // 9 classeurs (mesuré quasi identique sur chacun, 230-233 en haut et
   // 409-411 en bas — la photo montre les 9 classeurs à la même hauteur).
-  const CLASSEURS_Y1 = 231, CLASSEURS_Y2 = 410;
+  // Remesuré le 8 septembre 2026 sur le nouvel avant-plan (avant_plan_bureau.png,
+  // classeurs redessinés — voir commentaire d'en-tête) : le bas passe de 410
+  // à 371 (ligne du bureau plus haute sur ce nouveau visuel, vérifiée sur
+  // toute la largeur de l'image — 100% des pixels opaques au-delà, contre
+  // 0% avant), et le haut de 231 à 236 (bas du petit "toit" incliné du
+  // classeur, mesuré par analyse pixel comme d'habitude).
+  // Remesuré une 2ᵉ fois le 8 septembre 2026 (soir) : Jean-Marc a recadré
+  // l'avant-plan (traces blanches sur le fond retirées, micro nettoyé), ce
+  // qui a décalé toute la composition d'environ 20px vers le bas — mêmes
+  // abscisses (vérifié par comparaison des silhouettes), toutes les
+  // ordonnées remesurées directement sur le nouveau fichier.
+  const CLASSEURS_Y1 = 257, CLASSEURS_Y2 = 393;
   // Rectangle vertical utile de la partie blanche de l'étiquette (mesuré
-  // constant à 255-339 sur les 9 classeurs) : c'est cette hauteur, une fois
+  // constant à 249-333 sur les 9 classeurs du nouvel avant-plan, 8 septembre
-  // convertie à l'écran, qui borne la largeur du texte tourné à -90°
+  // 2026) : c'est cette hauteur, une fois convertie à l'écran, qui borne la
-  // (voir calculerPoliceEtiquette() plus bas).
+  // largeur du texte tourné à -90° (voir calculerPoliceEtiquette() plus bas).
-  const ETIQ_LABEL_Y1 = 255, ETIQ_LABEL_Y2 = 339;
+  // Remesuré le 8 septembre 2026 (soir), même recadrage que ci-dessus.
+  const ETIQ_LABEL_Y1 = 269, ETIQ_LABEL_Y2 = 353;
   const ETIQ_CENTRE_Y_FRAC = ((ETIQ_LABEL_Y1 + ETIQ_LABEL_Y2) / 2) / IMG_H;
   // Largeur utile de la partie blanche de l'étiquette (mesurée 22-25px selon
   // le classeur, valeur basse retenue par sécurité — cette largeur borne
   // l'ÉPAISSEUR du texte tourné, donc indirectement la taille de police
   // maximale des libellés courts, voir calculerPoliceEtiquette() plus bas).
+  // Remesuré le 8 septembre 2026 sur le nouvel avant-plan (22-26px selon le
+  // classeur) : la même valeur basse (22) reste le bon choix par sécurité.
   const ETIQ_LABEL_LARGEUR = 22;
   // Marges de sécurité (10-6%) sur les deux contraintes ci-dessus. Plus
   // resserrées que la précédente version (12%) : la taille de police n'est
@@ -488,56 +617,55 @@ Créé par Mevelia Solutions">
   // fraction de IMG_W), au lieu de la double contrainte calculée par
   // calculerPoliceEtiquette() — voir commentaire sur "Documents" ci-dessous
   // pour le seul cas qui l'utilise pour l'instant.
+  // Remesuré intégralement le 8 septembre 2026 sur le nouvel avant-plan
+  // (avant_plan_bureau.png — 9 classeurs redessinés par Jean-Marc, mêmes
+  // libellés/ordre/href que la version précédente, seules les coordonnées
+  // changent). x1/x2 = limite de séparation entre classeurs (point le plus
+  // sombre mesuré dans l'intervalle entre deux étiquettes, pas juste le
+  // milieu géométrique — même principe que le 7 septembre). labelCx = centre
+  // du rectangle blanc de l'étiquette, mesuré indépendamment (les 9
+  // rectangles ne sont pas exactement centrés dans leur classeur).
   const CLASSEURS = [
-    {id:'consignes',      label:'Consignes',    x1:44,    x2:79.5,  labelCx:57.2,  href:null},
+    {id:'consignes',      label:'Consignes',    x1:44,  x2:83,  labelCx:63.5,  href:null},
-    {id:'contacts',       label:'Contacts',     x1:79.5,  x2:118,   labelCx:96.6,  href:'liste_contacts.html'},
+    {id:'contacts',       label:'Contacts',     x1:83,  x2:120, labelCx:101.0, href:'liste_contacts.html'},
-    {id:'catalogue',      label:'Catalogue',    x1:118,   x2:155,   labelCx:135.0, href:null},
+    {id:'catalogue',      label:'Catalogue',    x1:120, x2:158, labelCx:138.5, href:null},
-    // "Documentations" remplacé par "Documents" le 7 septembre 2026 (soir),
+    // "Documentations" (id interne conservé pour l'historique) reste affiché
-    // à la demande de Jean-Marc (le libellé complet restait peu lisible même
+    // "Documents", police forcée sur le plafond commun — voir raisonnement
-    // après le passage à measureText() : un mot de 14 lettres doit beaucoup
+    // inchangé du 7 septembre 2026 (toujours valable, indépendant de l'image).
-    // rétrécir pour tenir dans la hauteur de l'étiquette). Police forcée
+    {id:'documentations', label:'Documents',    x1:158, x2:197, labelCx:177.0, href:null},
-    // (policeForceeFrac, voir ETIQ_POLICE_CAP_FRAC plus haut) plutôt que
+    {id:'prospection',    label:'Prospection',  x1:197, x2:239, labelCx:216.0, href:null},
-    // laissée au calcul automatique : "Documents" (9 lettres, comme
+    {id:'communication',  label:'Réseaux',      x1:239, x2:280, labelCx:259.0, href:null},
-    // "Consignes") tiendrait déjà largement dans la hauteur disponible même
+    {id:'en-cours',       label:'En cours',     x1:280, x2:321, labelCx:300.5, href:null},
-    // à la taille plafond commune aux libellés courts — autant l'aligner
+    {id:'factures',       label:'Factures',     x1:321, x2:363, labelCx:341.5, href:null},
-    // explicitement sur ce plafond pour garantir la même taille bien lisible
+    {id:'journalier',     label:'Journalier',   x1:363, x2:415, labelCx:383.5, href:null},
-    // que "Contacts"/"Catalogue"/"En cours"/"Factures", plutôt que de
-    // dépendre d'un calcul qui pourrait légèrement varier d'un libellé à
-    // l'autre. id conservé en interne à 'documentations' (cohérence avec
-    // l'historique de la photo/des mesures), seul le libellé affiché change.
-    {id:'documentations', label:'Documents',    x1:155,   x2:192.5, labelCx:173.9, href:null},
-    {id:'prospection',    label:'Prospection',  x1:192.5, x2:234,   labelCx:212.6, href:null},
-    // "Communication" remplacé par "Réseaux" le 7 septembre 2026 (soir), à la
-    // demande de Jean-Marc : ce classeur regroupe la génération de posts
-    // Instagram et la veille concurrentielle sur les réseaux sociaux —
-    // "Réseaux" colle mieux à cet usage que le générique "Communication",
-    // en plus d'être bien plus court (donc bien plus lisible une fois
-    // tourné à -90°, voir calculerPoliceEtiquette()). id conservé en interne
-    // à 'communication' (cohérence avec l'historique de la photo/des
-    // mesures), seul le libellé affiché change.
-    {id:'communication',  label:'Réseaux',      x1:234,   x2:274.5, labelCx:253.0, href:null},
-    {id:'en-cours',       label:'En cours',     x1:274.5, x2:312.5, labelCx:293.0, href:null},
-    {id:'factures',       label:'Factures',     x1:312.5, x2:352.5, labelCx:332.5, href:null},
-    {id:'journalier',     label:'Journalier',   x1:352.5, x2:395.5, labelCx:372.6, href:null},
   ];
 
-  // Zone cliquable/survolable du micro, centre du rond noir de la grille
+  // Zone cliquable/survolable du micro et centre de l'icône : remesurés le
-  // (icône) et zone des post-its personnels : AUCUN changement le 7
+  // 8 septembre 2026 sur le nouvel avant-plan — micro d'un tout autre style
-  // septembre 2026 — vérifié par comparaison pixel à pixel avec l'ancienne
+  // (corps arrondi de studio, plus de petite grille ronde isolée en haut
-  // photo, identiques au-delà de x≈400 (voir commentaire CSS plus haut).
+  // comme sur l'ancienne photo) : zone calée sur la silhouette entière
-  const MICRO_ZONE_X1 = 465, MICRO_ZONE_X2 = 543;
+  // (mesure directe des pixels non transparents), icône centrée sur le
-  const MICRO_ZONE_Y1 = 249, MICRO_ZONE_Y2 = 419;
+  // reflet du corps, repère visuel le plus naturel sur ce nouveau micro.
-  const ICONE_CENTRE_X = 512, ICONE_CENTRE_Y = 268;
+  // Y1/Y2/icône remesurés le 8 septembre 2026 (soir), même recadrage
+  // (traces blanches/halo retirés autour du micro par Jean-Marc) — X
+  // inchangés (silhouette identique, seule la position verticale a bougé).
+  const MICRO_ZONE_X1 = 478, MICRO_ZONE_X2 = 549;
+  const MICRO_ZONE_Y1 = 271, MICRO_ZONE_Y2 = 393;
+  // X décalé légèrement à droite le 8 septembre 2026 (soir), retour de
+  // Jean-Marc — Y inchangé (remonté juste avant, jugé bon depuis).
+  const ICONE_CENTRE_X = 522, ICONE_CENTRE_Y = 288;
   const ICONE_TAILLE_FRAC = 22 / IMG_W;
-  // Pastille "nombre de contacts" — sous le trou de préhension du classeur
+  // Pastille "nombre de contacts" — remesurée le 8 septembre 2026 sur le
-  // Contacts, à mi-chemin entre ce trou et le bas du classeur (retour de
+  // classeur Contacts du nouvel avant-plan (2ᵉ classeur, labelCx=101).
-  // Jean-Marc le 7 septembre 2026 : la 1ʳᵉ mesure avait par erreur calé la
+  // Trou de préhension nettement plus bas et plus proche du bureau que sur
-  // pastille SUR le trou lui-même, pas en dessous). Trou de préhension
+  // l'ancienne photo (quasiment au ras de CLASSEURS_Y2=371, sans place pour
-  // repéré par sa forme ovale sombre, mesurée sur la nouvelle photo :
+  // la caler "en dessous" comme avant) : posée à la place juste au-dessus du
-  // x≈[89,107] (centre 98), y≈[360,374] (bas du trou 374). Milieu entre ce
+  // trou, sous l'étiquette (ETIQ_LABEL_Y2=333) — premier essai, à revoir
-  // bas de trou (374) et le bas du classeur (CLASSEURS_Y2=410) : (374+410)/2
+  // avec Jean-Marc après un rendu réel si trop proche du trou ou du texte.
-  // = 392.
+  // Y remesuré le 8 septembre 2026 (soir), même recadrage.
-  const PASTILLE_CONTACTS_CENTRE_X = 98, PASTILLE_CONTACTS_CENTRE_Y = 392;
+  // Redescendue un peu le 8 septembre 2026 (soir), retour de Jean-Marc
+  // après 6ᵉ test réel (trop remontée la fois précédente) : 401 → 404.
+  const PASTILLE_CONTACTS_CENTRE_X = 101, PASTILLE_CONTACTS_CENTRE_Y = 404;
   const PASTILLE_CONTACTS_DIAM_FRAC = 17 / IMG_W;
 
   // Zone des post-its personnels (2 septembre 2026, premier affichage réel
@@ -552,14 +680,34 @@ Créé par Mevelia Solutions">
   // 4 colonnes × 5 lignes = 20 cases, volontairement alignée sur
   // CAPACITE_TABLEAU_PAR_UTILISATEUR (todolist.php) — à faire évoluer
   // ensemble le jour où cette capacité changera.
+  // Y2 remesuré le 8 septembre 2026 (nouvel avant-plan, CLASSEURS_Y2=371 —
+  // voir plus haut) : même marge de sécurité qu'avant l'utilisant.
+  // Y2 remesuré le 8 septembre 2026 (soir), même recadrage (CLASSEURS_Y2
+  // passé à 393) — même marge de sécurité qu'avant l'utilisant.
   const ZONE_POSTITS_X1 = 717, ZONE_POSTITS_X2 = 1024;
-  const ZONE_POSTITS_Y1 = 6, ZONE_POSTITS_Y2 = 395;
+  const ZONE_POSTITS_Y1 = 6, ZONE_POSTITS_Y2 = 378;
   const GRILLE_POSTITS_COLONNES = 4, GRILLE_POSTITS_LIGNES = 5;
   // Taille d'un post-it : ~60% de la plus petite dimension de case, pour
   // laisser de la marge au jitter sans jamais déborder sur la case voisine
   // (voir positionnerPostits()).
   const POSTIT_RATIO_CASE = 0.6;
 
+  // -------- Flèches de navigation entre fonds (8 septembre 2026) --------
+  // Posées sur le bureau à droite (consigne de Jean-Marc), dans la zone
+  // vide du plateau au-delà du carnet/téléphone (x>668). Taille volontairement
+  // modeste ("pas trop grosses") — premier réglage, Jean-Marc a prévenu que
+  // la taille définitive "va dépendre du rendu" réel chez lui.
+  // Retouché le 8 septembre 2026 (soir), retour de Jean-Marc après premier
+  // test réel : remontées (trop près du bas), rapprochées l'une de l'autre,
+  // et collées plus à droite.
+  // Réduite d'environ 30% le 8 septembre 2026 (soir), retour de Jean-Marc
+  // après second test réel (34 → 24).
+  const FLECHE_TAILLE_FRAC = 24 / IMG_W;
+  // Flèche précédente réécartée un peu le 8 septembre 2026 (soir), retour
+  // de Jean-Marc après 4ᵉ test réel ("trop proches l'une de l'autre").
+  const FLECHE_PRECEDENTE_CENTRE_X = 962, FLECHE_CENTRE_Y = 410;
+  const FLECHE_SUIVANTE_CENTRE_X = 998;
+
   /**
    * Petit générateur pseudo-aléatoire déterministe (0..1), à partir d'un
    * entier (TDL_Incr) — pour que le jitter (rotation/décalage) d'un post-it
@@ -665,6 +813,35 @@ Créé par Mevelia Solutions">
       offX = 0; offY = (vh - dispH) / 2;
     }
 
+    // Fonds interchangeables + avant-plan (8 septembre 2026) : occupent
+    // exactement le même rectangle "contain" que l'ancienne image unique,
+    // pour rester alignés au pixel près avec les classeurs/micro/pastille/
+    // post-its positionnés plus bas dans cette même fonction.
+    const fondsContainer = document.getElementById('fonds-container');
+    fondsContainer.style.left = offX + 'px';
+    fondsContainer.style.top = offY + 'px';
+    fondsContainer.style.width = dispW + 'px';
+    fondsContainer.style.height = dispH + 'px';
+
+    const avantPlan = document.getElementById('avant-plan');
+    avantPlan.style.left = offX + 'px';
+    avantPlan.style.top = offY + 'px';
+    avantPlan.style.width = dispW + 'px';
+    avantPlan.style.height = dispH + 'px';
+
+    // Flèches de navigation entre fonds (voir FLECHE_* plus haut).
+    const flecheTaille = FLECHE_TAILLE_FRAC * dispW;
+    const flechePrecedente = document.getElementById('fleche-precedente');
+    flechePrecedente.style.left = (offX + (FLECHE_PRECEDENTE_CENTRE_X / IMG_W) * dispW - flecheTaille / 2) + 'px';
+    flechePrecedente.style.top = (offY + (FLECHE_CENTRE_Y / IMG_H) * dispH - flecheTaille / 2) + 'px';
+    flechePrecedente.style.width = flecheTaille + 'px';
+    flechePrecedente.style.height = flecheTaille + 'px';
+    const flecheSuivante = document.getElementById('fleche-suivante');
+    flecheSuivante.style.left = (offX + (FLECHE_SUIVANTE_CENTRE_X / IMG_W) * dispW - flecheTaille / 2) + 'px';
+    flecheSuivante.style.top = (offY + (FLECHE_CENTRE_Y / IMG_H) * dispH - flecheTaille / 2) + 'px';
+    flecheSuivante.style.width = flecheTaille + 'px';
+    flecheSuivante.style.height = flecheTaille + 'px';
+
     // Les 9 classeurs (zone cliquable + étiquette tournée, voir
     // creerClasseurs() et calculerPoliceEtiquette() plus haut).
     CLASSEURS.forEach(function (c) {
@@ -717,13 +894,18 @@ Créé par Mevelia Solutions">
     // rechargement à l'autre. Le jitter reste borné à l'intérieur de la
     // case (marge × 0.8, jamais 1) pour ne jamais déborder sur la case
     // voisine — c'est ce qui garantit l'absence d'empilement.
+    // zoneLeft/zoneTop : plus de offX/offY depuis le 8 septembre 2026 — les
+    // post-its sont désormais positionnés à l'intérieur de #postits-layer,
+    // lui-même dans la slide du fond liège (inset:0 sur les deux), donc déjà
+    // calé sur le rectangle "contain" par la structure DOM elle-même (voir
+    // commentaire CSS #postits-layer plus haut).
     const zoneW = ((ZONE_POSTITS_X2 - ZONE_POSTITS_X1) / IMG_W) * dispW;
     const zoneH = ((ZONE_POSTITS_Y2 - ZONE_POSTITS_Y1) / IMG_H) * dispH;
     const caseW = zoneW / GRILLE_POSTITS_COLONNES;
     const caseH = zoneH / GRILLE_POSTITS_LIGNES;
     const postitTaille = Math.min(caseW, caseH) * POSTIT_RATIO_CASE;
-    const zoneLeft = offX + (ZONE_POSTITS_X1 / IMG_W) * dispW;
+    const zoneLeft = (ZONE_POSTITS_X1 / IMG_W) * dispW;
-    const zoneTop = offY + (ZONE_POSTITS_Y1 / IMG_H) * dispH;
+    const zoneTop = (ZONE_POSTITS_Y1 / IMG_H) * dispH;
     const margeX = (caseW - postitTaille) / 2 * 0.8;
     const margeY = (caseH - postitTaille) / 2 * 0.8;
     document.querySelectorAll('.postit').forEach(function (postit) {
@@ -742,6 +924,86 @@ Créé par Mevelia Solutions">
       postit.style.transform = 'rotate(' + rotation.toFixed(1) + 'deg)';
     });
   }
+  // -------- Fonds interchangeables (8 septembre 2026) --------
+  // 3 fonds codés en dur (décision de Jean-Marc, pas de liste extensible
+  // pour l'instant) : liège actuel, tasseaux gris (futur écran assistants,
+  // présentation pas encore décidée), tableau blanc (futurs tableaux de
+  // bord). Toujours fondIndex=0 au chargement, aucune mémorisation d'une
+  // session à l'autre (décision explicite de Jean-Marc).
+  const FONDS = ['fond_bureau_1.jpg', 'fond_bureau_2.jpg', 'fond_bureau_3.jpg'];
+  let fondActuel = 0;
+  let glissementEnCours = false;
+  const DUREE_GLISSEMENT_MS = 450;
+
+  // Conteneur des post-its personnels, attaché au fond liège (index 0) —
+  // voir commentaire CSS #postits-layer plus haut. Créé une seule fois, vide
+  // au départ (chargerMesPostits() le remplit plus bas, de façon asynchrone,
+  // qu'il soit affiché ou parqué à ce moment-là — sans incidence puisque
+  // positionner() peut être appelée sans risque sur un élément hors DOM
+  // visible). Une variable JS, jamais document.getElementById() : l'élément
+  // reste valable même temporairement détaché du document (parqué dans une
+  // ancienne slide retirée), ce que getElementById ne retrouverait pas de la
+  // même façon si la recherche se faisait après un tel retrait.
+  const couchePostits = document.createElement('div');
+  couchePostits.id = 'postits-layer';
+
+  function creerFondSlide(index) {
+    const slide = document.createElement('div');
+    slide.className = 'fond-slide';
+    slide.style.backgroundImage = "url('" + FONDS[index] + "')";
+    // Le fond liège (index 0) embarque la couche des post-its : un simple
+    // appendChild déplace le noeud existant (le retire au passage de son
+    // ancien parent, s'il en avait un) — pas de duplication, pas de perte du
+    // contenu déjà chargé par chargerMesPostits().
+    if (index === 0) {
+      slide.appendChild(couchePostits);
+    }
+    return slide;
+  }
+
+  // Affiche le tout premier fond au chargement, sans transition.
+  function initialiserFonds() {
+    const conteneur = document.getElementById('fonds-container');
+    conteneur.appendChild(creerFondSlide(fondActuel));
+  }
+
+  // direction : +1 (flèche "suivant", le fond n+1 entre par la droite en
+  // poussant l'actuel vers la gauche) ou -1 (flèche "précédent", l'inverse)
+  // — sens du glissement lié à la flèche pressée, consigne explicite de
+  // Jean-Marc. Boucle sur les 3 fonds (n+1 après le 3ᵉ revient au 1er).
+  function changerFond(direction) {
+    if (glissementEnCours) return;
+    glissementEnCours = true;
+    const conteneur = document.getElementById('fonds-container');
+    const ancienneSlide = conteneur.querySelector('.fond-slide');
+    const nouvelIndex = (fondActuel + direction + FONDS.length) % FONDS.length;
+    const nouvelleSlide = creerFondSlide(nouvelIndex);
+    // Position de départ de la nouvelle slide (hors champ, côté d'où elle
+    // doit entrer), posée sans transition avant d'être ajoutée au DOM.
+    nouvelleSlide.style.transform = 'translateX(' + (direction > 0 ? '100%' : '-100%') + ')';
+    conteneur.appendChild(nouvelleSlide);
+    // Forcer un reflow avant d'activer la transition, sinon le navigateur
+    // regroupe la position de départ et la position d'arrivée en une seule
+    // étape (pas de glissement visible).
+    void nouvelleSlide.offsetWidth;
+    nouvelleSlide.style.transition = 'transform ' + DUREE_GLISSEMENT_MS + 'ms ease';
+    ancienneSlide.style.transition = 'transform ' + DUREE_GLISSEMENT_MS + 'ms ease';
+    requestAnimationFrame(function () {
+      nouvelleSlide.style.transform = 'translateX(0)';
+      ancienneSlide.style.transform = 'translateX(' + (direction > 0 ? '-100%' : '100%') + ')';
+    });
+    ancienneSlide.addEventListener('transitionend', function fin() {
+      ancienneSlide.removeEventListener('transitionend', fin);
+      ancienneSlide.remove();
+      glissementEnCours = false;
+    });
+    fondActuel = nouvelIndex;
+  }
+
+  document.getElementById('fleche-precedente').addEventListener('click', function () { changerFond(-1); });
+  document.getElementById('fleche-suivante').addEventListener('click', function () { changerFond(1); });
+
+  initialiserFonds();
   creerClasseurs();
   window.addEventListener('resize', positionner);
   positionner();
@@ -876,7 +1138,9 @@ Créé par Mevelia Solutions">
         pastille.className = 'pastille-urgence-postit ' + (tache.TDL_Groupe === 0 ? 'rouge' : 'orange');
         postit.appendChild(pastille);
 
-        document.body.appendChild(postit);
+        // Attaché à couchePostits (fond liège), pas à document.body depuis
+        // le 8 septembre 2026 — voir commentaire sur couchePostits plus haut.
+        couchePostits.appendChild(postit);
       });
 
       positionner(); // place les post-its qui viennent d'être créés

journal/ASPIC - Journal. Index.md

@@ -59,7 +59,7 @@ Pour les trois documents de ce projet (ce journal — résumé/index —, les R
 - 29. Interprétation vocale des contacts par LLM
 - 30. Chantier des consignes — moteur générique
 
-*(Numérotation et titres repris du découpage fait par Jean-Marc le 31 août 2026, légèrement reformulés par lui à cette occasion — se référer aux fichiers eux-mêmes pour le libellé exact. Section 27 (Pilotage vocal) validée de bout en bout et son fichier définitif déposé dans `/journal` le 2 septembre 2026. Section 28 (Écran de fond) ouverte le 2 septembre 2026, toujours **en cours** — passée d'une maquette graphique exploratoire à un premier essai fonctionnel réel, puis (soirée du 2 au 3 septembre) à une pastille de comptage sur le classeur Contacts et à un premier affichage réel des post-its personnels sur le tableau de liège. Section 29 (Interprétation vocale des contacts par LLM) ouverte et son fichier définitif déposé le 4 septembre 2026 après validation de bout en bout sur un premier corpus réel ; fichiers de section à déposer par Jean-Marc, voir Statut actuel. Section 30 (Chantier des consignes — moteur générique) ouverte le 6 septembre 2026, fichier définitif rédigé le soir même après validation de bout en bout du mécanisme sur des cas réels ; **substantiellement complétée le 7 septembre 2026** (hiérarchisation cohérence/Tests/IA, traçabilité de l'agent, `REA_NomAffiche`, premier appel IA réel dans une consigne avec avertissement bloquant) — fichier de section mis à jour à déposer par Jean-Marc, voir Statut actuel.)*
+*(Numérotation et titres repris du découpage fait par Jean-Marc le 31 août 2026, légèrement reformulés par lui à cette occasion — se référer aux fichiers eux-mêmes pour le libellé exact. Section 27 (Pilotage vocal) validée de bout en bout et son fichier définitif déposé dans `/journal` le 2 septembre 2026. Section 28 (Écran de fond) ouverte le 2 septembre 2026, toujours **en cours** — passée d'une maquette graphique exploratoire à un premier essai fonctionnel réel, puis (soirée du 2 au 3 septembre) à une pastille de comptage sur le classeur Contacts et à un premier affichage réel des post-its personnels sur le tableau de liège, puis (8 septembre 2026, matin) à un bureau à trois fonds interchangeables (liège actuel, futur écran assistants, futur tableau de bord) navigables par deux flèches, avant-plan désormais séparé du code des fonds — fichier de section mis à jour ce jour-là, à déposer par Jean-Marc, voir Statut actuel. Section 29 (Interprétation vocale des contacts par LLM) ouverte et son fichier définitif déposé le 4 septembre 2026 après validation de bout en bout sur un premier corpus réel ; fichiers de section à déposer par Jean-Marc, voir Statut actuel. Section 30 (Chantier des consignes — moteur générique) ouverte le 6 septembre 2026, fichier définitif rédigé le soir même après validation de bout en bout du mécanisme sur des cas réels ; **substantiellement complétée le 7 septembre 2026** (hiérarchisation cohérence/Tests/IA, traçabilité de l'agent, `REA_NomAffiche`, premier appel IA réel dans une consigne avec avertissement bloquant) — fichier de section mis à jour à déposer par Jean-Marc, voir Statut actuel.)*
 
 ## Statut actuel (2-8 septembre 2026)
 
@@ -105,6 +105,8 @@ Version incrémentée une seule fois pour l'ensemble de cette session (pastille
 
 **8 septembre 2026 : session de réflexion stratégique — concept de "Mission" et faisabilité d'un dialogue simulé avec Claude (V1.15.18).** Aucune ligne de code applicative touchée ce jour — premier cas réel d'une session faisant avancer uniquement la partie `<conception>` du numéro de version depuis l'instauration du format à trois niveaux (voir consigne du 6 septembre 2026 ci-dessus). Détail complet en section 18 des Réflexions stratégiques : clarification du fonctionnement général d'un "agent" IA (prompt, contexte, outils, boucle) ; conception d'un nouveau concept — la **Mission** — pour structurer les objectifs confiés à un agent dans la durée (trois niveaux de mémoire, clôture décidée par Jean-Marc, tags en nuage envisagés pour retrouver des missions similaires, RAG gardé en réserve) ; et confirmation de la faisabilité technique d'un dialogue simulé avec Claude intégré à ASPIC via l'API Anthropic (même schéma d'intégration que l'appel IA déjà en place pour l'interprétation vocale, prompt système gardé secret côté serveur, bulles de dialogue façon SMS). Chantier à ouvrir prochainement, rien conçu ni codé à ce stade.
 
+**8 septembre 2026 (matin) : écran de fond — trois fonds interchangeables derrière un avant-plan désormais séparé du décor (V1.16.18).** Détail complet en section 28 du journal. Résumé : Jean-Marc a constaté que l'écran de fond, limité à un seul décor (le tableau de liège), ne suffira pas à tout gérer, et a posé le principe de trois fonds navigables par deux flèches, derrière un même avant-plan (bureau, classeurs, micro, carnet, téléphone) qui ne change jamais — l'écran 1 restant l'actuel tableau de liège, l'écran 2 un futur écran "assistants" (fond en tasseaux de bois gris, présentation encore à concevoir), l'écran 3 un futur tableau de bord (fond tableau blanc). Décisions actées avant codage : code de l'avant-plan et code des fonds séparés ; les trois fonds codés en dur plutôt qu'en liste extensible ("il faut s'autoriser à coder ça en dur") ; animation de glissement au changement de fond, dont le sens dépend de la flèche pressée (l'écran n+1 entre par la droite en chassant l'écran actuel vers la gauche, et inversement) ; l'avant-plan reste visible sur les trois écrans, y compris le futur tableau de bord ; aucune mémorisation du fond choisi d'une session à l'autre (toujours l'écran 1 à l'ouverture) ; flèches posées sur le bureau à droite. Point corrigé en cours de route : les post-its, d'abord traités par erreur comme un élément fixe de l'avant-plan, doivent en réalité rester solidaires du panneau de liège et disparaître/réapparaître avec lui — résolu par une technique de réattachement du même nœud DOM de post-its à la bonne "diapositive" de fond, sans dupliquer sa logique de position. Le nouvel avant-plan fourni par Jean-Marc étant un dessin recomposé (pas la même photo que l'ancienne), l'ensemble des repères (classeurs, micro, pastille, zone de post-its) a dû être entièrement remesuré par analyse de pixels plutôt qu'ajusté par simple décalage — remesure reconduite une seconde fois après qu'une version corrigée de l'avant-plan (traces blanches et halo du micro retouchés) s'est révélée légèrement décalée par rapport à la première. Nombreux réglages fins en fin de session à partir des retours directs de Jean-Marc sur son propre écran (taille et position des flèches, position de l'icône du micro, position de la pastille de comptage des contacts). Version incrémentée une seule fois pour cette session : **V1.16.18** (`<code>` avancé dès le début à la demande de Jean-Marc, `<conception>` inchangé — évolution jugée comme une continuation du chantier de l'écran de fond, pas une nouvelle section des Réflexions stratégiques).
+
 **Reste à faire, noté au passage :**
 - Décider s'il faut renforcer le prompt d'extraction pour neutraliser les mots parasites/formules de politesse dictés autour d'une adresse mail (bug identifié le 4 septembre sur le corpus réel, correction non encore actée par Jean-Marc).
 - Clarifier l'origine de la coupure de fin de dictée observée sur un essai du 4 septembre (minuteur de silence à 3,5s vs interruption réelle) avant de décider si `DUREE_SILENCE_ARRET_MS` (`contact_ia_panel.js`) doit être allongée.
@@ -121,7 +123,8 @@ Version incrémentée une seule fois pour l'ensemble de cette session (pastille
 - Étendre `MARQUEUR_FIN_LIGNE` dans `micro.js` pour accepter "puis" en plus de "ensuite" (retour d'usage de Jean-Marc, 3 septembre) — sans urgence.
 - Continuer à observer les agents actifs (Viktor, Matilda, Léon, Nikita) en usage réel ; ajuster `AGN_Variantes` en base si de nouvelles confusions apparaissent.
 - Documentation utilisateur : le panneau de détail du contact, la ToDoList et le pilotage vocal restent à documenter (mise à jour du 3 septembre limitée à l'écran d'accueil et à la liste des contacts) — l'outil de banque de dictées et le chantier des consignes n'ont volontairement pas vocation à y figurer pour l'instant, ce sont des chantiers internes, pas des modules utilisateur finalisés.
-- Écran de fond : reconfirmer l'état de la "tranche du bureau" après le recadrage du 3 septembre (a pu déplacer le problème sans que ce soit son objet) ; décider si les autres objets photographiés (carnet, téléphone) doivent devenir cliquables ; trancher un jour le sort de la piste "maquette liège + post-its par agent" (Claude Design, mise de côté pour cet essai, pas explicitement abandonnée).
+- Écran de fond : contenu de présentation de l'écran 2 ("assistants") et contenu réel de l'écran 3 (tableaux de bord) restent entièrement à concevoir, seuls les fonds existent à ce stade (8 septembre) ; décider si les autres objets de l'avant-plan (carnet, téléphone) doivent devenir cliquables ; trancher un jour le sort de la piste "maquette liège + post-its par agent" (Claude Design, mise de côté pour cet essai, pas explicitement abandonnée).
+- Section 28 du journal détaillé : combler, si l'occasion se présente, un trou de documentation relevé le 8 septembre — le passage d'un classeur unique ("Contacts") à neuf classeurs (Consignes, Contacts, Catalogue, Documents, Prospection, Réseaux, En-cours, Factures, Journalier) a eu lieu dans une session intermédiaire (aux alentours du 7 septembre) jamais consignée dans le fichier de section correspondant.
 - Concevoir les deux signes graphiques distincts pour les post-its "à corriger"/"à valider" (réflexions stratégiques, section 12) — le premier acté (point d'interrogation), le second encore à choisir.
 - Tableau de liège : coder la répartition dynamique des 70% entre assistants par charge de tâches (formule actée, voir Statut actuel) — bloqué tant que la ToDoList des assistants n'existe pas réellement.
 - Étendre `ASP_ToDoList`/`todolist.php` pour qu'un assistant puisse être attributaire d'une tâche (discriminant humain/agent à définir) — préalable à la répartition dynamique et aux couleurs de post-it par assistant (`AGN_Couleur`, à ajouter).
@@ -136,3 +139,4 @@ Version incrémentée une seule fois pour l'ensemble de cette session (pastille
 - Gestion des consignes transverses à toute la fiche (`CNS_Champ` NULL, ex. contrôle de doublon) — non traitée par le moteur de consignes actuel.
 - Distinction Saisie/Validation réellement exploitée un jour dans le moteur de consignes (temps réel), si le besoin redevient assez fort pour justifier la complexité écartée le 6 septembre.
 - Ouvrir le chantier du dialogue simulé avec Claude intégré à ASPIC (bulles de dialogue façon SMS, mission dédiée, clé API Anthropic) — faisabilité confirmée le 8 septembre 2026 (réflexions stratégiques, section 18), rien conçu ni codé à ce stade.
+</content>

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é.

version.php

@@ -50,7 +50,7 @@
  * capacité à détecter un déploiement resté en retard.
  */
 
-const ASPIC_VERSION = 'V1.15.18';
+const ASPIC_VERSION = 'V1.16.18';
 
 if (basename($_SERVER['SCRIPT_NAME']) === 'version.php') {
     header('Content-Type: application/json; charset=utf-8');