docs: mise à jour guide page équipe

- Architecture mise à jour (vraie page React vs HTML intégré)
- Suppression références team.html obsolètes
- Ajout bibliothèques React (hooks, refs, dynamic import)
- Processus build actualisé (installation dépendances)
- Personnalisation adaptée à l'approche React

Documentation alignée sur nouvelle implémentation

docs/app/guide-page-equipe.md

@@ -8,24 +8,25 @@ Cette page est accessible depuis le radar via le lien **"👥 Équipe"** dans le
 
 ## Architecture Technique
 
-La page utilise une architecture hybride :
+La page utilise une architecture pure React/Next.js :
-- **Page Next.js** : `/team` (route Next.js générée automatiquement par `Dockerfile.business`)
+- **Page Next.js** : `/team` (vraie page React avec hooks et états)
-- **Contenu HTML** : Chargé via iframe depuis `/team.html` (fichier statique)
+- **Import dynamique** : Cytoscape.js et ECharts chargés côté client seulement (évite erreurs SSR)
+- **État React** : Gestion des onglets, données et erreurs via useState/useEffect
+- **Refs React** : Containers pour les graphiques gérés proprement
 - **Navigation** : Lien intégré directement dans le composant React `Navigation.tsx` (modifié par script Python)
 
-Cette approche combine les avantages de Next.js (routing, intégration native) avec la flexibilité d'un HTML statique autonome.
+Cette approche moderne utilise pleinement les capacités de React tout en évitant les problèmes SSR avec les bibliothèques de visualisation.
 
 ### Fichiers impliqués
 
-- **Page Next.js** : `.techradar/src/pages/team.tsx` (créée par `Dockerfile.business`)
+- **Page Next.js** : `.techradar/src/pages/team.tsx` (vraie page React créée par `Dockerfile.business`)
-- **Page HTML** : `public/team.html` (fichier statique avec visualisations)
 - **Données JSON** : `public/team-visualization-data.json` (généré par `scripts/generate-team-visualization-data.js`)
 - **Navigation** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiée par script Python)
+- **Bibliothèques** : `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react` (installées automatiquement)
 
 ## Accès
 
-- **URL** : `/team` (route Next.js)
+- **URL** : `/team` (route Next.js avec vraie page React)
-- **Fichier HTML source** : `/team.html` (servi statiquement)
 - **Lien de navigation** : Disponible dans le header du radar (bouton "👥 Équipe")
 - **Authentification** : Même protection que le radar (mot de passe `laplank-radar`)
 
@@ -178,11 +179,11 @@ Description du membre de l'équipe.
 
 ### Dans le Dockerfile
 
-1. **Création de la page Next.js** : Génère `.techradar/src/pages/team.tsx`
+1. **Installation dépendances** : Installe `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react`
-2. **Modification de Navigation** : Ajoute le lien "👥 Équipe" dans `.techradar/src/components/Navigation/Navigation.tsx` via script Python
+2. **Création de la page Next.js** : Génère `.techradar/src/pages/team.tsx` (vraie page React)
-3. **Copie des fichiers** : Copie `public/team.html` et `public/team-visualization-data.json` vers `.techradar/public/`
+3. **Modification de Navigation** : Ajoute le lien "👥 Équipe" dans `.techradar/src/components/Navigation/Navigation.tsx` via script Python
-4. **Build Next.js** : Génère les fichiers statiques dans `out/`
+4. **Copie des données** : Copie `public/team-visualization-data.json` vers `.techradar/public/`
-5. **Vérification** : Le script `start-business.sh` vérifie que les fichiers sont dans `out/` et les copie si nécessaire
+5. **Build Next.js** : Génère les fichiers statiques dans `out/` avec la page React complète
 
 ### Script Python pour Navigation.tsx
 
@@ -198,10 +199,11 @@ Le script `/tmp/add_team_link.py` dans le Dockerfile :
 
 ### Bibliothèques JavaScript
 
-- **Cytoscape.js** : Graphique réseau interactif
+- **Cytoscape.js** : Graphique réseau interactif (import dynamique)
-- **Cytoscape CoSE-Bilkent** : Layout algorithm pour le graphique
+- **Cytoscape CoSE-Bilkent** : Layout algorithm pour le graphique (import dynamique)
-- **ECharts** : Matrice de congestion (heatmap)
+- **ECharts pour React** : Matrice de congestion (composant React)
-- **Vanilla JavaScript** : Logique de l'équipe de genèse MVP
+- **React Hooks** : Gestion d'état (useState, useEffect, useRef)
+- **Next.js dynamic import** : Chargement côté client seulement (évite erreurs SSR)
 
 ### Chargement des données
 
@@ -251,10 +253,11 @@ Pour l'équipe de genèse MVP, le seuil est fixé à **50%**. Pour le modifier :
 
 ### Ajouter de nouvelles visualisations
 
-1. Modifier `public/team.html`
+1. Modifier `.techradar/src/pages/team.tsx` (généré par le Dockerfile)
-2. Ajouter un nouvel onglet dans la section `.tabs`
+2. Ajouter un nouvel état dans `useState` pour l'onglet
-3. Ajouter le contenu dans une nouvelle section `.tab-content`
+3. Ajouter un bouton dans la section des onglets
-4. Implémenter la logique JavaScript pour charger et afficher les données
+4. Implémenter la logique React pour charger et afficher les données
+5. Utiliser des refs React pour les containers des nouvelles visualisations
 
 ## Maintenance
 
@@ -323,13 +326,13 @@ node scripts/generate-team-visualization-data.js
 
 ## Fichiers associés
 
-- **Page HTML** : `public/team.html` (interface utilisateur)
+- **Page React** : `.techradar/src/pages/team.tsx` (vraie page React avec hooks et états)
 - **Données JSON** : `public/team-visualization-data.json` (généré)
 - **Script de génération** : `scripts/generate-team-visualization-data.js`
 - **Profils équipe** : `docs/data/team/*.md` (fichiers Markdown avec métadonnées YAML)
 - **Technologies** : `radar-business/2025-01-15/*.md` (blips avec métadonnées)
-- **Page Next.js** : `.techradar/src/pages/team.tsx` (générée par le Dockerfile)
+- **Navigation modifiée** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiée par script Python)
-- **Navigation modifiée** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiée par le Dockerfile)
+- **Bibliothèques** : `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react` (installées automatiquement)
 
 ## Ressources