From 02a23a09eeb70ee7324514ed3fc3d922f140e0e0 Mon Sep 17 00:00:00 2001
From: syoul <syoul@librezo.fr>
Date: Sat, 6 Dec 2025 22:12:40 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20MutationObserver=20pour=20d=C3=A9tecter?=
 =?UTF-8?q?=20header=20+=20am=C3=A9lioration=20robustesse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Utilisation de MutationObserver pour détecter quand le header est ajouté au DOM
- Timeout de sécurité après 5 secondes
- Amélioration de la logique d'initialisation pour éviter les exécutions multiples
- Logs détaillés pour diagnostic
---
 public/strategie-script.js | 77 ++++++++++++++++++++++++++------------
 1 file changed, 53 insertions(+), 24 deletions(-)

diff --git a/public/strategie-script.js b/public/strategie-script.js
index a6aaf05..4a7129b 100644
--- a/public/strategie-script.js
+++ b/public/strategie-script.js
@@ -980,41 +980,70 @@ Interface de pilotage pour les responsables sécurité des PME.
   window.__strategieScriptLoaded = true;
 
   // Éviter de modifier document.documentElement qui peut déclencher des rechargements Fast Refresh
-  // Attendre que le DOM soit complètement chargé, y compris le header
-  function initWhenReady() {
-    // Vérifier si le header existe, sinon attendre un peu
+  // Utiliser MutationObserver pour détecter quand le header est ajouté
+  function waitForHeaderAndInit() {
     const header = document.querySelector('header') || 
                    document.querySelector('nav') || 
                    document.querySelector('div[role="banner"]');
     
-    console.log('🔍 initWhenReady - header trouvé:', !!header, 'body:', !!document.body);
-    
-    if (header || document.body) {
+    if (header) {
+      console.log('✅ Header trouvé, initialisation...');
       checkAuth();
-      // Délai pour s'assurer que le header est complètement rendu
       setTimeout(() => {
-        console.log('🚀 Initialisation des liens de navigation...');
         initStrategyLinks();
-      }, 200);
-    } else {
-      // Réessayer après un court délai (max 10 tentatives = 500ms)
-      if (typeof initWhenReady.attempts === 'undefined') {
-        initWhenReady.attempts = 0;
+      }, 300);
+      return true;
+    }
+    return false;
+  }
+  
+  // Essayer immédiatement
+  if (waitForHeaderAndInit()) {
+    // Déjà trouvé, c'est bon
+  } else {
+    // Utiliser MutationObserver pour détecter l'ajout du header
+    const observer = new MutationObserver((mutations, obs) => {
+      if (waitForHeaderAndInit()) {
+        obs.disconnect();
       }
-      initWhenReady.attempts++;
-      if (initWhenReady.attempts < 10) {
-        setTimeout(initWhenReady, 50);
+    });
+    
+    // Observer les changements dans le body
+    if (document.body) {
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    } else {
+      // Attendre que le body soit disponible
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+          observer.observe(document.body, {
+            childList: true,
+            subtree: true
+          });
+        });
       } else {
-        console.warn('⚠️ Header non trouvé après 10 tentatives, initialisation quand même');
+        // Body déjà là mais pas de header, observer quand même
+        setTimeout(() => {
+          if (document.body) {
+            observer.observe(document.body, {
+              childList: true,
+              subtree: true
+            });
+          }
+        }, 100);
+      }
+    }
+    
+    // Timeout de sécurité après 5 secondes
+    setTimeout(() => {
+      observer.disconnect();
+      if (!document.getElementById('link-team')) {
+        console.warn('⚠️ Timeout: initialisation forcée après 5 secondes');
         checkAuth();
         initStrategyLinks();
       }
-    }
-  }
-  
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initWhenReady);
-  } else {
-    initWhenReady();
+    }, 5000);
   }
 })();