Site_web/doc claude/README_IMPLEMENTATION.md

📚 Guide d'Implémentation - Pages Harmonisées NextGN Formation

🎯 Résumé de l'Harmonisation

Toutes les 5 pages ont été harmonisées avec la charte graphique NextGN Formation en utilisant la couleur dominante AMBER (#BA7517) pour une cohérence visuelle maximale.

---

📦 Fichiers Livrés

1️⃣ Exo_BioCID.html (22 KB)

Catégorie : Exercice Pratique
Couleur dominante : AMBER
Contenu : Exercices interactifs pour maîtriser la plateforme BioCID

À placer dans : /exercices/Exo_BioCID.html

Changements appliqués :

• ✅ Header fixe avec navigation vers ../../index.html
• ✅ Couleur dominante Amber (fond header, bordures, boutons)
• ✅ Barre de progression au scroll
• ✅ Footer cohérent
• ✅ Tous les liens de navigation pointent vers l'accueil
• ✅ Contenu pédagogique 100% intact

---

2️⃣ Exo_FDS.html (49 KB)

Catégorie : Exercice Pratique (Complexe)
Couleur dominante : AMBER
Contenu : 3 parties + questionnaires interactifs (FDS, FT, Étiquetage)

À placer dans : /exercices/Exo_FDS.html

Changements appliqués :

• ✅ Header fixe avec navigation vers ../../index.html
• ✅ Couleur dominante Amber
• ✅ Barre de progression au scroll
• ✅ Footer cohérent
• ✅ Tous les questionnaires JavaScript conservés
• ✅ Contenu pédagogique 100% intact

⚠️ Important : Ce fichier contient du JavaScript pour les exercices interactifs. Tous les scripts sont conservés intacts.

---

3️⃣ TP_Nuisibles_final.html (46 KB)

Catégorie : Travaux Pratiques
Couleur dominante : AMBER
Contenu : TP complet pour la certification Certibiocide

À placer dans : /exercices/TP_Nuisibles_final.html

Changements appliqués :

• ✅ Header fixe avec navigation vers ../../index.html
• ✅ Couleur dominante Amber
• ✅ Barre de progression au scroll
• ✅ Footer cohérent
• ✅ Contenu pédagogique 100% intact

---

4️⃣ frelon_asiatique_evolution.html (39 KB)

Catégorie : Article Technique
Couleur dominante : AMBER
Contenu : Article détaillé sur Vespa velutina (Frelon asiatique)

À placer dans : /articles/frelon_asiatique_evolution.html

Changements appliqués :

• ✅ Header fixe avec navigation vers ../../index.html
• ✅ Couleur dominante Amber
• ✅ Table des matières et navigation interne préservée
• ✅ Footer cohérent
• ✅ Contenu pédagogique 100% intact

---

5️⃣ documentation-index.html (20 KB)

Catégorie : Index Documentaire
Couleur dominante : AMBER
Contenu : Répertoire de documentation technique et biologie

À placer dans : /articles/documentation-index.html

Changements appliqués :

• ✅ Header fixe avec navigation vers ../../index.html
• ✅ Couleur dominante Amber
• ✅ Système de fiches documentaires préservé
• ✅ Footer cohérent
• ✅ Contenu pédagogique 100% intact

---

🚀 Instructions d'Implémentation

Étape 1 : Télécharger les fichiers

Les 5 fichiers HTML harmonisés se trouvent dans /mnt/user-data/outputs/

Étape 2 : Copier les fichiers vers votre répertoire source

Site web/
├── exercices/
│   ├── Exo_BioCID.html           ← Remplacer
│   ├── Exo_FDS.html              ← Remplacer
│   ├── TP_Nuisibles_final.html   ← Remplacer
│   └── ...
├── articles/
│   ├── frelon_asiatique_evolution.html    ← Remplacer
│   ├── documentation-index.html           ← Remplacer
│   └── ...
└── index.html                    (Ne pas modifier)

Étape 3 : Vérifier la cohérence

1. Ouvrir index.html dans un navigateur
2. Cliquer sur les liens vers les exercices et articles
3. Vérifier que :
   • ✅ Le header s'affiche correctement
   • ✅ Les liens de navigation fonctionnent
   • ✅ La barre de progression fonctionne au scroll
   • ✅ Les couleurs Amber sont cohérentes

Étape 4 : Tester les fonctionnalités

• Exo_BioCID : Tester le déploiement des indications (boutons)
• Exo_FDS : Tester les questionnaires interactifs (réponses)
• TP_Nuisibles : Vérifier que tous les TP s'affichent
• Articles : Vérifier la table des matières et la navigation

---

🎨 Charte Graphique Appliquée

Couleurs Utilisées

--amber: #BA7517              /* Couleur principale */
--amber-light: #FAEEDA        /* Fond clair */
--amber-dark: #633806         /* Hover/active */
--coral-mid: #D85A30          /* Accent (logo) */

Éléments Stylisés

Élément	Style
Header	Background Amber-light, border Amber
Navigation links	Hover effect Amber
h2 titles	Border-bottom Amber 3px
Intro boxes	Background Amber-light, border-left Amber
Buttons	Background Amber, hover Amber-dark
Progress bar	Couleur Amber
Footer	Border-top Amber

Typographie

• Titres : Syne (700, 800)
• Corps : DM Sans (300, 400, 500)
• Google Fonts : Importé dans chaque page

---

✅ Checklist de Vérification

Après implémentation, vérifier que :

• Tous les 5 fichiers HTML sont à jour
• Les liens de navigation pointent vers ../../index.html
• La couleur dominante Amber est cohérente partout
• La barre de progression fonctionne au scroll
• Le footer affiche les auteurs (Gauthier Chombart & Nathan Chauwin)
• Le design est responsive (testé sur mobile 375px)
• Les animations fadeIn fonctionnent
• Les boutons/liens ont un effet hover fluide
• Tous les contenus pédagogiques sont intacts
• Les exercices interactifs (Exo_FDS) fonctionnent correctement

---

🔧 Personnalisations Possibles

Pour modifier la couleur dominante

Si vous souhaitez changer Amber pour une autre couleur, modifiez dans le CSS :

:root {
    --amber: [NOUVELLE COULEUR];
    --amber-light: [NOUVEAU CLAIR];
    --amber-dark: [NOUVEAU FONCÉ];
}

Remplacez ensuite :

• var(--amber) par votre nouvelle couleur
• var(--amber-light) par votre nouvelle nuance claire
• var(--amber-dark) par votre nouvelle nuance foncée

Pour modifier les auteurs du footer

Cherchez Gauthier Chombart & Nathan Chauwin et remplacez par vos noms.

Pour modifier les textes

Tous les textes HTML sont facilement modifiables. Cherchez le contenu que vous souhaitez modifier et éditez-le.

---

🆘 Dépannage

Problème : Les liens ne fonctionnent pas

Solution : Vérifiez que le chemin ../../index.html est correct. Ajustez selon votre structure de dossiers.

Problème : Les couleurs ne s'affichent pas correctement

Solution : Videz le cache du navigateur (Ctrl+Shift+Del ou Cmd+Shift+Del) et rechargez.

Problème : La barre de progression ne fonctionne pas

Solution : Vérifiez que le JavaScript n'est pas bloqué. Le code est inclus inline dans <script>.

Problème : Les fonts ne se chargent pas

Solution : Vérifiez la connexion Internet. Google Fonts doit être accessible.

Problème : Les exercices interactifs ne fonctionnent pas (Exo_FDS)

Solution : Vérifiez que JavaScript est activé. Les questionnaires utilisent du JS.

---

📞 Support

Si vous rencontrez des problèmes lors de l'implémentation :

1. Vérifiez la structure des dossiers
2. Vérifiez les chemins relatifs des liens
3. Videz le cache du navigateur
4. Testez dans un navigateur différent
5. Vérifiez la console du navigateur (F12) pour les erreurs

---

📋 Résumé des Modifications

Avant (Ancienne Charte)

• ❌ Couleurs variables (Purple, Teal, Blue)
• ❌ Navigation incohérente
• ❌ Styles différents par page

Après (Nouvelle Charte)

• ✅ Couleur dominante unifiée : AMBER
• ✅ Navigation cohérente vers index.html
• ✅ Design harmonisé sur toutes les pages
• ✅ Barre de progression au scroll
• ✅ Footer standardisé
• ✅ Responsive design garantit

---

🎓 Ressources Pédagogiques Intactes

✅ Exo_BioCID.html

• 4 exercices pratiques
• Questionnaires de synthèse
• Astuces d'utilisation

✅ Exo_FDS.html

• 3 parties (FDS, FT, Étiquetage)
• 16 questions FDS interactives
• 5 questions FT interactives
• 10 questions Étiquetage interactives
• Tableau comparatif

✅ TP_Nuisibles_final.html

• Travaux pratiques complets
• Études de cas
• Ressources externes

✅ frelon_asiatique_evolution.html

• Article scientifique détaillé
• Table des matières avec navigation
• Crédits et sources

✅ documentation-index.html

• Répertoire documentaire
• Fiches d'étude
• Références bibliographiques

---

Harmonisation complétée le 25 mai 2026 ✅
Tous les fichiers sont prêts à l'emploi !