fix: approche HTML statique pour éviter conflits React

- Nouvelle page team-static.html : page HTML pure sans React
- team.tsx redirige simplement vers /team-static.html
- Évite tous les conflits d'injection DOM dans React
- team-static.html copié dans out/ lors du build
- Contient tous les logs de débogage et visualisations équipe

Cette approche contourne complètement les problèmes React/DOM

Dockerfile.business

@@ -101,106 +101,20 @@ RUN echo "📊 Comptage des fichiers .md dans .techradar/data/radar" && \
 # La page Next.js pour le routing, le HTML statique pour garantir l'affichage
 RUN mkdir -p .techradar/src/pages && \
     cat > .techradar/src/pages/team.tsx << 'EOF'
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 export default function TeamPage() {
-  const [content, setContent] = useState('');
-
   useEffect(() => {
-    // Charger le contenu de team.html directement
+    // Solution simple : rediriger vers une page HTML statique
-    console.log('🔄 TEAM PAGE: Chargement direct du contenu team.html');
+    // Cela évite tous les conflits React/DOM
-
+    console.log('🔄 TEAM PAGE: Redirection vers page HTML statique');
-    fetch('/team.html')
+    if (typeof window !== 'undefined') {
-      .then(response => {
+      window.location.href = '/team-static.html';
-        console.log('📡 TEAM PAGE: Réponse team.html:', response.status);
+    }
-        if (!response.ok) throw new Error(`HTTP ${response.status}`);
-        return response.text();
-      })
-      .then(html => {
-        console.log('✅ TEAM PAGE: Contenu team.html chargé, injection dans DOM');
-        setContent(html);
-
-        // Injecter le HTML dans le document après un court délai
-        setTimeout(() => {
-          const tempDiv = document.createElement('div');
-          tempDiv.innerHTML = html;
-
-          // Extraire et exécuter les scripts
-          const scripts = tempDiv.querySelectorAll('script');
-          scripts.forEach(script => {
-            if (script.src) {
-              // Script externe - charger dynamiquement
-              const newScript = document.createElement('script');
-              newScript.src = script.src;
-              document.head.appendChild(newScript);
-              console.log('🔧 TEAM PAGE: Script externe chargé:', script.src);
-            } else {
-              // Script inline - exécuter directement
-              try {
-                eval(script.textContent);
-                console.log('▶️ TEAM PAGE: Script inline exécuté');
-              } catch (error) {
-                console.error('❌ TEAM PAGE: Erreur script inline:', error);
-              }
-            }
-          });
-
-          // Injecter le CSS
-          const styles = tempDiv.querySelectorAll('style');
-          styles.forEach(style => {
-            document.head.appendChild(style.cloneNode(true));
-          });
-
-          // Injecter le contenu HTML (sans les scripts/styles déjà traités)
-          const bodyContent = tempDiv.querySelector('body');
-          if (bodyContent) {
-            document.body.innerHTML = bodyContent.innerHTML;
-            console.log('✅ TEAM PAGE: Contenu HTML injecté');
-          }
-        }, 100);
-      })
-      .catch(error => {
-        console.error('❌ TEAM PAGE: Erreur chargement team.html:', error);
-        setContent(`
-          <div style="padding: 50px; text-align: center; font-family: Arial, sans-serif;">
-            <h2>Erreur de chargement</h2>
-            <p>Impossible de charger les visualisations équipe.</p>
-            <p>Erreur: ${error.message}</p>
-            <p><a href="/">Retour à l'accueil</a></p>
-          </div>
-        `);
-      });
   }, []);
 
-  // Pendant le chargement
+  // Ne rien rendre - la redirection prend le relais immédiatement
-  if (!content) {
+  return null;
-    return (
-      <div style={{
-        width: '100vw',
-        height: '100vh',
-        background: '#1a4d3a',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        zIndex: 9999
-      }}>
-        <div style={{color: 'white', fontSize: '18px'}}>
-          Chargement des visualisations équipe...
-        </div>
-      </div>
-    );
-  }
-
-  // Rendre le contenu chargé
-  return (
-    <div
-      style={{width: '100vw', height: '100vh'}}
-      dangerouslySetInnerHTML={{__html: content}}
-    />
-  );
 }
 EOF
 RUN echo "✅ Page team.tsx créée (version ultra-simplifiée)" && \
@@ -592,14 +506,23 @@ RUN if [ -d "out" ]; then \
       fi && \
       echo "🔍 VÉRIFICATION: team.html dans out/:" && \
       ls -la out/team.html 2>/dev/null || echo "❌ team.html absent de out/" && \
+      echo "🔍 VÉRIFICATION: team-static.html dans out/:" && \
+      ls -la out/team-static.html 2>/dev/null || echo "❌ team-static.html absent de out/" && \
       echo "" && \
       echo "📁 Vérification finale dans out/:" && \
       ls -la out/ | grep -E "(team\.html|team-visualization)" && echo "✅ Fichiers team présents dans out/" || echo "⚠️ Fichiers team non trouvés dans out/"; \
     else \
       echo "❌ Dossier out/ introuvable après build"; \
       ls -la . | head -20; \
-    fi && \
+      fi && \
-    echo "" && \
+      if [ -f "public/team-static.html" ]; then \
+        cp -v public/team-static.html out/team-static.html && echo "✅ team-static.html copié depuis public/ vers out/"; \
+      elif [ -f "/app/public/team-static.html" ]; then \
+        cp -v /app/public/team-static.html out/team-static.html && echo "✅ team-static.html copié depuis /app/public/ vers out/"; \
+      else \
+        echo "⚠️ team-static.html introuvable dans public/ ou /app/public/"; \
+      fi && \
+      echo "" && \
     echo "📋 Vérification finale de Navigation.tsx après build:" && \
     grep -qE 'href="/team' src/components/Navigation/Navigation.tsx && echo "✅ Lien Équipe toujours présent dans Navigation.tsx après build" || echo "❌ Lien Équipe absent de Navigation.tsx après build" && \
     echo "" && \

public/team-static.html

@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Équipe & Technologies - Laplank</title>
+  <script src="https://cdn.jsdelivr.net/npm/cytoscape@3.26.0/dist/cytoscape.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/cytoscape-cose-bilkent@4.1.0/cytoscape-cose-bilkent.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      background: #1a4d3a;
+      color: #e0e0e0;
+      padding: 20px;
+    }
+
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+    }
+
+    header {
+      text-align: center;
+      margin-bottom: 30px;
+      padding: 20px;
+      background: rgba(26, 77, 58, 0.5);
+      border-radius: 8px;
+    }
+
+    h1 {
+      color: #4ade80;
+      margin-bottom: 10px;
+    }
+
+    .tabs {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    .tab-button {
+      padding: 12px 24px;
+      background: rgba(74, 222, 128, 0.2);
+      border: 1px solid #4ade80;
+      border-radius: 6px;
+      color: #4ade80;
+      cursor: pointer;
+      font-size: 14px;
+      transition: all 0.3s ease;
+    }
+
+    .tab-button:hover {
+      background: rgba(74, 222, 128, 0.3);
+    }
+
+    .tab-button.active {
+      background: #4ade80;
+      color: #1a4d3a;
+      font-weight: bold;
+    }
+
+    .tab-content {
+      display: none;
+      background: rgba(26, 77, 58, 0.3);
+      padding: 20px;
+      border-radius: 8px;
+      margin-bottom: 20px;
+    }
+
+    .tab-content.active {
+      display: block;
+    }
+
+    .legend {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 15px;
+      margin-bottom: 20px;
+      padding: 15px;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 6px;
+    }
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+    }
+
+    .legend-color {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+    }
+
+    .warning-box {
+      background: rgba(255, 152, 0, 0.1);
+      border: 1px solid #ff9800;
+      border-radius: 6px;
+      padding: 15px;
+      margin: 20px 0;
+      color: #ff9800;
+    }
+
+    .member-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 20px;
+      margin-top: 20px;
+    }
+
+    .member-card {
+      background: rgba(26, 77, 58, 0.5);
+      border-radius: 8px;
+      padding: 20px;
+      border: 1px solid rgba(74, 222, 128, 0.3);
+    }
+
+    .member-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+
+    .member-name {
+      font-size: 18px;
+      font-weight: bold;
+      color: #4ade80;
+    }
+
+    .member-role {
+      font-size: 14px;
+      color: #a0a0a0;
+    }
+
+    .skills-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 10px;
+    }
+
+    .skill-tag {
+      background: rgba(74, 222, 128, 0.2);
+      color: #4ade80;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+    }
+
+    .back-link {
+      display: inline-block;
+      margin-bottom: 20px;
+      color: #4ade80;
+      text-decoration: none;
+      font-weight: bold;
+    }
+
+    .back-link:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+        <a href="/" style="color: #4ade80; text-decoration: none; font-size: 18px; font-weight: bold;">← Retour au Radar</a>
+        <div></div>
+      </div>
+      <h1>👥 Équipe & Technologies</h1>
+      <p>Visualisation des compétences et identification de l'équipe de genèse MVP</p>
+    </header>
+
+    <div class="tabs">
+      <button class="tab-button active" onclick="showTab('network')">Graphe Réseau</button>
+      <button class="tab-button" onclick="showTab('congestion')">Matrice Congestion</button>
+      <button class="tab-button" onclick="showTab('genesis')">Équipe Genèse MVP</button>
+    </div>
+
+    <div id="network-tab" class="tab-content active">
+      <h2 style="margin-bottom: 20px;">Graphe Réseau - Technologies et Compétences</h2>
+      <div class="legend">
+        <div class="legend-item">
+          <div class="legend-color" style="background: #ff4444;"></div>
+          <span>Technologies Core</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color" style="background: #ff8800;"></div>
+          <span>Technologies Avancées</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color" style="background: #4488ff;"></div>
+          <span>Technologies Utilitaires</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color" style="background: #88ff88;"></div>
+          <span>Membres Équipe</span>
+        </div>
+      </div>
+      <div id="network-graph"></div>
+    </div>
+
+    <div id="congestion-tab" class="tab-content">
+      <h2 style="margin-bottom: 20px;">Matrice de Congestion - Technologies Core</h2>
+      <div id="congestion-matrix"></div>
+    </div>
+
+    <div id="genesis-tab" class="tab-content">
+      <div id="genesis-team">
+        <div class="loading">Chargement des données...</div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    console.log('🚀 TEAM-STATIC.HTML: Script chargé, initialisation...');
+
+    let data = null;
+    let networkCy = null;
+    let congestionChart = null;
+
+    console.log('🔧 TEAM-STATIC.HTML: Scripts externes chargés');
+    console.log('🔧 Cytoscape disponible:', typeof cytoscape !== 'undefined');
+    console.log('🔧 ECharts disponible:', typeof echarts !== 'undefined');
+
+    // Charger les données
+    async function loadData() {
+      console.log('📋 TEAM-STATIC.HTML: Fonction loadData() appelée');
+
+      try {
+        console.log('🔄 Chargement des données équipe depuis /team-visualization-data.json');
+        const response = await fetch('/team-visualization-data.json');
+        console.log('📡 Réponse reçue:', response.status, response.statusText);
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        data = await response.json();
+        console.log('✅ Données chargées:', Object.keys(data));
+        console.log('📊 Nombre de nœuds réseau:', data.network?.nodes?.length || 0);
+        console.log('📊 Données matrice congestion:', data.congestionMatrix?.length || 0);
+        console.log('📊 Données équipe genèse:', data.genesisTeam ? 'présentes' : 'absentes');
+
+        initVisualizations();
+      } catch (error) {
+        console.error('❌ Erreur lors du chargement des données:', error);
+
+        // Fallback : afficher un message informatif
+        const fallbackMessage = `
+          <div style="padding: 20px; background: rgba(255, 152, 0, 0.1); border: 1px solid #ff9800; border-radius: 8px; margin: 20px 0;">
+            <h3 style="color: #ff9800; margin-top: 0;">🔄 Chargement des données...</h3>
+            <p>Les visualisations équipe se chargent. Si elles n'apparaissent pas :</p>
+            <ul>
+              <li>Vérifiez la console du navigateur (F12) pour les erreurs</li>
+              <li>Assurez-vous que <code>team-visualization-data.json</code> est accessible</li>
+              <li>Le script <code>generate-team-visualization-data.js</code> doit avoir été exécuté</li>
+            </ul>
+            <p><strong>Erreur détectée :</strong> ${error.message}</p>
+          </div>
+        `;
+
+        // Afficher le message dans toutes les sections
+        document.getElementById('network-graph').innerHTML = fallbackMessage;
+        document.getElementById('congestion-matrix').innerHTML = fallbackMessage;
+        document.getElementById('genesis-team').innerHTML = fallbackMessage;
+      }
+    }
+
+    // Initialiser les visualisations
+    function initVisualizations() {
+      console.log('🎨 TEAM-STATIC.HTML: initVisualizations() appelée');
+      initNetworkGraph();
+      initCongestionMatrix();
+      initGenesisTeam();
+    }
+
+    function initNetworkGraph() {
+      console.log('📊 TEAM-STATIC.HTML: initNetworkGraph() appelée');
+      if (!data || !data.network) {
+        console.log('⚠️ TEAM-STATIC.HTML: Pas de données réseau');
+        return;
+      }
+
+      const container = document.getElementById('network-graph');
+      if (!container) return;
+
+      networkCy = cytoscape({
+        container: container,
+        elements: data.network,
+        style: [
+          {
+            selector: 'node[type="technology"]',
+            style: {
+              'background-color': 'data(color)',
+              'label': 'data(label)',
+              'width': function(ele) {
+                const coverage = ele.data('coverage') || 0;
+                return Math.max(30, 30 + (coverage * 8));
+              },
+              'height': function(ele) {
+                const coverage = ele.data('coverage') || 0;
+                return Math.max(30, 30 + (coverage * 8));
+              },
+              'font-size': '12px',
+              'text-valign': 'center',
+              'text-halign': 'center',
+              'color': '#ffffff',
+              'text-outline-color': '#1a4d3a',
+              'text-outline-width': '2px'
+            }
+          },
+          {
+            selector: 'node[type="member"]',
+            style: {
+              'background-color': '#88ff88',
+              'label': 'data(label)',
+              'width': function(ele) {
+                const availability = ele.data('availability') || 0;
+                return Math.max(25, 25 + (availability / 3));
+              },
+              'height': function(ele) {
+                const availability = ele.data('availability') || 0;
+                return Math.max(25, 25 + (availability / 3));
+              },
+              'font-size': '10px',
+              'text-valign': 'center',
+              'text-halign': 'center',
+              'color': '#1a4d3a',
+              'text-outline-color': '#ffffff',
+              'text-outline-width': '1px'
+            }
+          },
+          {
+            selector: 'edge',
+            style: {
+              'width': function(ele) {
+                return 1 + (ele.data('weight') || 0.5);
+              },
+              'line-color': '#4ade80',
+              'target-arrow-color': '#4ade80',
+              'target-arrow-shape': 'triangle',
+              'curve-style': 'bezier'
+            }
+          }
+        ],
+        layout: {
+          name: 'cose-bilkent',
+          animate: true,
+          animationDuration: 1000,
+          nodeRepulsion: 4500,
+          idealEdgeLength: 100,
+          edgeElasticity: 0.45
+        }
+      });
+
+      // Gestionnaire de clics sur les nœuds
+      networkCy.on('tap', 'node', function(evt) {
+        const node = evt.target;
+        const nodeData = node.data();
+        let tooltip = '';
+
+        if (nodeData.type === 'technology') {
+          tooltip = `${nodeData.label}\n` +
+                    `Ring: ${nodeData.ring}\n` +
+                    `Couverture: ${nodeData.coverage} personne(s)\n` +
+                    `Impact: ${nodeData.businessImpact}\n` +
+                    `Gap: ${nodeData.skillGap}`;
+        } else {
+          tooltip = `${nodeData.label}\n` +
+                    `Disponibilité: ${nodeData.availability}%\n` +
+                    `Niveau: ${nodeData.seniority}\n` +
+                    (nodeData.role ? `Rôle: ${nodeData.role}` : '');
+        }
+
+        // Afficher un tooltip simple
+        alert(tooltip);
+      });
+
+      console.log('✅ TEAM-STATIC.HTML: Graphe réseau initialisé');
+    }
+
+    function initCongestionMatrix() {
+      console.log('📈 TEAM-STATIC.HTML: initCongestionMatrix() appelée');
+      if (!data || !data.congestionMatrix) {
+        console.log('⚠️ TEAM-STATIC.HTML: Pas de données matrice congestion');
+        return;
+      }
+
+      const container = document.getElementById('congestion-matrix');
+      if (!container) return;
+
+      const techs = data.congestionMatrix.map(r => r.technology);
+      const members = data.congestionMatrix[0]?.members.map(m => m.fullName || m.member) || [];
+
+      const scatterData = [];
+      data.congestionMatrix.forEach((row, i) => {
+        row.members.forEach((member, j) => {
+          scatterData.push([j, i, member.availability, member]);
+        });
+      });
+
+      congestionChart = echarts.init(container);
+      const option = {
+        title: {
+          text: 'Disponibilité des Technologies Core',
+          left: 'center',
+          textStyle: { color: '#e0e0e0' }
+        },
+        tooltip: {
+          formatter: function(params) {
+            if (params.data && params.data[3]) {
+              const member = params.data[3];
+              return `${member.fullName || member.member}<br/>` +
+                     `Technologie: ${techs[params.data[1]]}<br/>` +
+                     `Disponibilité: ${params.data[2]}%`;
+            }
+          }
+        },
+        grid: {
+          left: '10%',
+          right: '10%',
+          top: '15%',
+          bottom: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: members,
+          axisLabel: {
+            color: '#e0e0e0',
+            rotate: 45
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: techs,
+          axisLabel: { color: '#e0e0e0' }
+        },
+        visualMap: {
+          min: 0,
+          max: 100,
+          dimension: 2,
+          orient: 'horizontal',
+          left: 'center',
+          top: 'top',
+          text: ['Élevé', 'Faible'],
+          textStyle: { color: '#e0e0e0' },
+          inRange: {
+            color: ['#ff4444', '#ff8800', '#4488ff', '#88ff88']
+          },
+          outOfRange: {
+            color: '#444444'
+          }
+        },
+        series: [{
+          name: 'Disponibilité',
+          type: 'scatter',
+          data: scatterData,
+          symbolSize: function(data) {
+            return 15 + (data[2] || 0) / 2;
+          }
+        }]
+      };
+
+      congestionChart.setOption(option);
+
+      // Redimensionner au resize
+      window.addEventListener('resize', () => congestionChart.resize());
+
+      console.log('✅ TEAM-STATIC.HTML: Matrice congestion initialisée');
+    }
+
+    function initGenesisTeam() {
+      console.log('👥 TEAM-STATIC.HTML: initGenesisTeam() appelée');
+      if (!data || !data.genesisTeam) {
+        console.log('⚠️ TEAM-STATIC.HTML: Pas de données équipe genèse');
+        return;
+      }
+
+      const genesis = data.genesisTeam;
+      const html = `
+        <h2 style="margin-bottom: 20px;">Équipe de Genèse MVP</h2>
+        <div style="background: rgba(74, 222, 128, 0.1); padding: 20px; border-radius: 8px; margin-bottom: 20px;">
+          <h3 style="color: #4ade80; margin-bottom: 10px;">Critères de Sélection</h3>
+          <ul style="margin-left: 20px;">
+            <li>Disponibilité ≥ ${genesis.minAvailability}%</li>
+            <li>Couverture technologique ≥ ${genesis.minCoverage} technologies</li>
+            <li>Taille équipe optimale: ${genesis.targetTeamSize} membres</li>
+          </ul>
+        </div>
+
+        <div class="member-grid">
+          ${genesis.selectedMembers.map(member => `
+            <div class="member-card">
+              <div class="member-header">
+                <div>
+                  <div class="member-name">${member.fullName || member.member}</div>
+                  <div style="font-size: 12px; color: #a0a0a0; margin-top: 4px;">
+                    ${member.role || ''} • ${member.seniority} • ${member.coverage} technologie(s)
+                  </div>
+                </div>
+                <div style="text-align: right;">
+                  <div style="font-size: 24px; color: #4ade80; font-weight: bold;">${member.availability}%</div>
+                  <div style="font-size: 12px; color: #a0a0a0;">Disponibilité</div>
+                </div>
+              </div>
+              <div class="skills-list">
+                ${member.skills.slice(0, 8).map(skill => `<span class="skill-tag">${skill}</span>`).join('')}
+                ${member.skills.length > 8 ? `<span class="skill-tag">+${member.skills.length - 8}</span>` : ''}
+              </div>
+            </div>
+          `).join('')}
+        </div>
+      `;
+
+      document.getElementById('genesis-team').innerHTML = html;
+      console.log('✅ TEAM-STATIC.HTML: Équipe genèse affichée');
+    }
+
+    // Gestionnaire d'onglets
+    function showTab(tabId) {
+      // Masquer tous les onglets
+      document.querySelectorAll('.tab-content').forEach(tab => {
+        tab.classList.remove('active');
+      });
+
+      // Désactiver tous les boutons
+      document.querySelectorAll('.tab-button').forEach(btn => {
+        btn.classList.remove('active');
+      });
+
+      // Afficher l'onglet sélectionné
+      document.getElementById(tabId + '-tab').classList.add('active');
+
+      // Activer le bouton
+      event.target.classList.add('active');
+    }
+
+    // Charger au démarrage
+    console.log('🚀 TEAM-STATIC.HTML: Démarrage - appel loadData()');
+    loadData();
+
+    console.log('✅ TEAM-STATIC.HTML: Initialisation terminée');
+  </script>
+</body>
+</html>