# 📚 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
```css
--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 :

```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 !**