Ajout d'une protection par mot de passe côté client

public/strategie-script.js

@@ -1,5 +1,70 @@
 // Script pour la gestion des pages de stratégie
 (function() {
+  // --- DÉBUT PROTECTION MOT DE PASSE ---
+  function checkAuth() {
+    const SESSION_KEY = 'radar_auth_session';
+    // Mot de passe simple
+    const PASSWORD = 'laplank-radar'; 
+
+    if (localStorage.getItem(SESSION_KEY) === 'valid') {
+      return; // Déjà connecté
+    }
+
+    // Créer l'écran de blocage
+    const overlay = document.createElement('div');
+    overlay.id = 'auth-overlay';
+    overlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #1a4d3a; z-index: 10000; display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: sans-serif;';
+    
+    overlay.innerHTML = `
+      <div style="background: white; padding: 40px; border-radius: 8px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.3);">
+        <h2 style="margin-top: 0; color: #1a4d3a;">Accès Restreint</h2>
+        <p style="color: #666; margin-bottom: 20px;">Veuillez entrer le mot de passe pour accéder au Radar Stratégique.</p>
+        <input type="password" id="auth-pass" placeholder="Mot de passe" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; width: 200px; margin-bottom: 15px; display: block; margin: 0 auto 15px auto;">
+        <button id="auth-btn" style="background: #2ecc71; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold;">Valider</button>
+        <p id="auth-error" style="color: #e74c3c; display: none; margin-top: 10px; font-size: 0.9em;">Mot de passe incorrect</p>
+      </div>
+    `;
+
+    document.body.appendChild(overlay);
+    // Cacher le contenu principal pour éviter le flash
+    document.body.style.overflow = 'hidden';
+
+    const btn = document.getElementById('auth-btn');
+    const input = document.getElementById('auth-pass');
+    const errorMsg = document.getElementById('auth-error');
+
+    function validate() {
+      if (input.value === PASSWORD) {
+        localStorage.setItem(SESSION_KEY, 'valid');
+        overlay.remove();
+        document.body.style.overflow = 'auto';
+      } else {
+        errorMsg.style.display = 'block';
+        input.style.border = '1px solid #e74c3c';
+      }
+    }
+
+    btn.addEventListener('click', validate);
+    input.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') validate();
+    });
+  }
+
+  // Appeler la sécurité immédiatement
+  if (document.readyState === 'loading') {
+    // Bloquer le rendu visuel immédiat si possible
+    document.documentElement.style.display = 'none';
+    document.addEventListener('DOMContentLoaded', () => {
+        document.documentElement.style.display = '';
+        checkAuth();
+        initStrategyLinks(); // Initialiser le reste après le chargement
+    });
+  } else {
+    checkAuth();
+    initStrategyLinks();
+  }
+  // --- FIN PROTECTION MOT DE PASSE ---
+
   // Contenu des pages Markdown
   const pagesContent = {
     'strategie': `# Stratégie d'Évolution Technique - Laplank
@@ -316,11 +381,11 @@ Le marché de la visualisation de données est en pleine expansion, porté par l
     *   **Besoin** : Comprendre les mouvements de fonds, la création monétaire, les graphes de transactions.
     *   **Cible** : DAOs, projets Blockchain, ONG, Auditeurs financiers.
     *   **Offre** : Dashboards interactifs de transparence, explorateurs de blockchain visuels (au-delà des simples listes de transactions).
+    *   **Lien avec Duniter** : Utilisation possible de la blockchain pour certifier les étapes, visualisées ensuite pour le consommateur final.
 
 2.  **Transparence de la Supply Chain (Flux de Marchandises)**
     *   **Besoin** : Tracer l'origine et le parcours des produits (traçabilité).
     *   **Cible** : Coopératives, circuits courts, commerce équitable, industrie agroalimentaire.
-    *   **Lien avec Duniter** : Utilisation possible de la blockchain pour certifier les étapes, visualisées ensuite pour le consommateur final.
 
 3.  **Visualisation de Réseaux et Communautés (Web of Trust)**
     *   **Besoin** : Cartographier les relations humaines, la confiance, la gouvernance décentralisée.
@@ -822,8 +887,15 @@ Interface de pilotage pour les responsables sécurité des PME.
   });
 
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initStrategyLinks);
+    // Bloquer le rendu visuel immédiat si possible
+    document.documentElement.style.display = 'none';
+    document.addEventListener('DOMContentLoaded', () => {
+        document.documentElement.style.display = '';
+        checkAuth();
+        initStrategyLinks();
+    });
   } else {
+    checkAuth();
     initStrategyLinks();
   }
 })();