V1.010 préparation de la création d'une banque de dictées

ecran_fond.html

@@ -110,8 +110,35 @@
        d'origine, pour se fondre dans la grille plutôt que ressortir comme
        un autocollant. Fermé = glyphe micro en gris clair ; ouvert = barres
        façon vu-mètre en --rouge-micro, animées (voir @keyframes) — "les
-       barres qui bougent" demandé par Jean-Marc. Toggle en pur JS pour ce
-       test : ne déclenche pas encore la reconnaissance vocale de micro.js. */
+       barres qui bougent" demandé par Jean-Marc.
+       Branché sur la reconnaissance vocale réelle le 3 septembre 2026 :
+       un script pilote désormais #micro-desk et bascule la classe "ecoute"
+       dessus (voir plus bas #micro-desk.ecoute ~ #micro-icone pour la
+       bascule visuelle des deux glyphes, via un combinateur de fratrie
+       puisque #micro-icone n'est pas un descendant de #micro-desk — voir
+       plus haut pourquoi ces deux éléments sont séparés). Le toggle JS
+       local qui existait ici pour le tout premier essai d'affichage (pur
+       visuel, sans reconnaissance vocale) est retiré.
+
+       Mise à jour du même jour (suite de session) : ce micro est
+       temporairement détourné de son usage final. Plutôt que micro.js (le
+       vrai pilotage, agents nommés Viktor/Matilda/Léon/Nikita, mode
+       notation — resté inchangé et toujours utilisé tel quel sur
+       liste_contacts.html), c'est micro_test.js qui est chargé ici, le
+       temps de la phase de mise au point du pilotage vocal : outil de
+       constitution d'une banque de dictées réelles (table
+       ASP_DicteesTest, thème "Gestion des Contacts"), PAS un module
+       destiné aux futurs utilisateurs (voir le commentaire d'en-tête de
+       micro_test.js). Écoute continue, aucun mot déclencheur nécessaire
+       (le clic sur le micro fait déjà office de signal explicite), chaque
+       énoncé restitué au fur et à mesure dans une fenêtre dédiée puis
+       enregistré tel quel — y compris les essais ratés, jamais
+       supprimables depuis l'écran (décision explicite de Jean-Marc : ça
+       fera aussi partie de la vraie vie des futurs utilisateurs). Pour
+       reconnecter le vrai pilotage sur ce micro une fois cette phase
+       terminée : remettre <script src="micro.js"> à la place de
+       <script src="micro_test.js"> en bas de cette page, rien d'autre à
+       défaire. */
   #micro-desk{
     position:fixed;
     border:none;background:transparent;padding:0;margin:0;
@@ -132,6 +159,17 @@
     width:70%;height:70%;display:block;
   }
   #micro-icone svg[hidden]{display:none;}
+  /* Bascule repos/écoute pilotée par la classe "ecoute" que le script chargé
+     en bas de page ajoute sur #micro-desk (micro_test.js actuellement — voir
+     commentaire plus haut sur le détournement temporaire de ce micro ; même
+     mécanisme que #bouton-micro.ecoute dans liste_contacts.html avec
+     micro.js) — combinateur de fratrie ~ nécessaire ici puisque
+     #micro-icone n'est pas un descendant du bouton. Spécificité (3 id + 1
+     classe) volontairement plus élevée que la règle [hidden] ci-dessus pour
+     la surclasser sans !important, l'attribut hidden restant présent dans
+     le HTML de #glyphe-ecoute (jamais modifié en JS ici désormais). */
+  #micro-desk.ecoute ~ #micro-icone #glyphe-repos{display:none;}
+  #micro-desk.ecoute ~ #micro-icone #glyphe-ecoute{display:block;}
   #glyphe-repos{
     fill:#d9d9d3;
     opacity:.92;
@@ -310,7 +348,7 @@
 
 <a id="classeur-contacts" href="liste_contacts.html" title="Ouvrir le classeur des contacts"></a>
 <div id="etiquette-contacts">Contacts</div>
-<button id="micro-desk" type="button"></button>
+<button id="micro-desk" type="button" title="Le micro est inactif"></button>
 <div id="micro-icone">
   <svg id="glyphe-repos" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
@@ -493,33 +531,12 @@ Créé par Mevelia Solutions">
   window.addEventListener('resize', positionner);
   positionner();
 
-  // Bascule ouvert/fermé du micro du bureau — pur affichage pour ce test
-  // (icône + infobulle), ne démarre pas encore la reconnaissance vocale
-  // réelle de micro.js. Fermé par défaut à l'arrivée sur l'écran.
-  let microOuvert = false;
-  function appliquerEtatMicroDesk() {
-    const bouton = document.getElementById('micro-desk');
-    const glyphRepos = document.getElementById('glyphe-repos');
-    const glyphEcoute = document.getElementById('glyphe-ecoute');
-    // setAttribute/removeAttribute plutôt que la propriété .hidden : sur un
-    // <svg> inline, la réflexion de .hidden s'est révélée peu fiable au test
-    // (attribut inchangé malgré l'affectation) — passage par l'attribut DOM
-    // directement pour un résultat garanti.
-    if (microOuvert) {
-      glyphRepos.setAttribute('hidden', '');
-      glyphEcoute.removeAttribute('hidden');
-      bouton.title = 'Le micro est ouvert, cliquez pour le fermer';
-    } else {
-      glyphRepos.removeAttribute('hidden');
-      glyphEcoute.setAttribute('hidden', '');
-      bouton.title = 'Le micro est fermé, cliquez pour l\'ouvrir';
-    }
-  }
-  document.getElementById('micro-desk').addEventListener('click', () => {
-    microOuvert = !microOuvert;
-    appliquerEtatMicroDesk();
-  });
-  appliquerEtatMicroDesk();
+  // Bascule ouvert/fermé du micro du bureau : gérée par le script chargé en
+  // fin de page (micro_test.js actuellement, voir commentaire plus haut),
+  // qui pilote le clic, la reconnaissance vocale et la classe "ecoute" sur
+  // #micro-desk — voir la règle CSS correspondante plus
+  // haut pour la bascule visuelle des deux glyphes. L'ancien toggle purement
+  // visuel du premier essai (2-3 septembre 2026) est retiré.
 
   // Société et prénom de l'utilisateur connecté (3 septembre 2026, voir
   // journal) : preferences.php, même endpoint et même logique que
@@ -667,6 +684,7 @@ Créé par Mevelia Solutions">
   // faute d'un "retour" qui ait un sens depuis l'écran d'accueil. À revoir
   // le jour où la ToDoList aura son propre objet cliquable sur le bureau.
 </script>
+<script src="micro_test.js"></script>
 
 </body>
 </html>