<!-- ============================================
     GUIDE D'INTÉGRATION - NEXTGN FORMATION
     Structure Option 1 : formations/memory-pictogrammes/
     ============================================ -->

# 🔗 Guide d'Intégration - Memory Pictogrammes (Option 1)

Intégration du jeu Memory Pictogrammes GHS dans l'architecture **formations/memory-pictogrammes/**.

---

## 📌 Structure Finale Recommandée

```
Racine du site NextGN (/)
├── index.html                              (Page d'accueil)
├── formations/                             ← NOUVEAU DOSSIER
│   └── memory-pictogrammes/
│       ├── memory-pictogrammes.html        (Page du jeu)
│       ├── assets/
│       │   ├── css/
│       │   │   ├── memory-game.css
│       │   │   ├── hud.css
│       │   │   ├── animations.css
│       │   │   └── leaderboard.css
│       │   ├── js/
│       │   │   ├── memory-game.js
│       │   │   ├── game-state.js
│       │   │   ├── analytics.js
│       │   │   ├── leaderboard.js
│       │   │   └── utils.js
│       │   └── pictogrammes/
│       │       ├── 1-gaz-comprime.png
│       │       ├── 2-exclamation.png
│       │       └── ... (9 images)
│       └── docs/
│           ├── README.md
│           ├── INTEGRATION_GUIDE.md
│           ├── MANIFEST.md
│           └── CONFIG.js
├── documentation-index.html
├── Exo_BioCID.html
├── Exo_FDS.html
├── data/                                   (Peut rester vide)
└── ... (autres pages)
```

---

## 🚀 Étapes de Déploiement

### **Étape 1 : Créer l'arborescence**

```bash
# Créer les dossiers
mkdir -p formations/memory-pictogrammes/assets/{css,js,pictogrammes}
mkdir -p formations/memory-pictogrammes/docs

# Copier les fichiers
cp memory-pictogrammes.html formations/memory-pictogrammes/
cp assets/css/* formations/memory-pictogrammes/assets/css/
cp assets/js/* formations/memory-pictogrammes/assets/js/
cp assets/pictogrammes/* formations/memory-pictogrammes/assets/pictogrammes/
cp README.md INTEGRATION_GUIDE.md MANIFEST.md CONFIG.js formations/memory-pictogrammes/docs/
```

### **Étape 2 : Vérifier les chemins**

Le fichier `memory-pictogrammes.html` contient déjà les bons chemins :

**Fichiers CSS/JS** : Chemins relatifs (identiques car dans le même répertoire)
```html
<link rel="stylesheet" href="assets/css/memory-game.css">
<script src="assets/js/memory-game.js"></script>
<!-- ✅ Fonctionne depuis formations/memory-pictogrammes/ -->
```

**Lien de retour** : Chemin `../../index.html` (déjà mis à jour)
```html
<a href="../../index.html" class="header-logo">NextGN Formation</a>
<!-- ✅ Retour à la racine du site -->
```

### **Étape 3 : Ajouter le lien dans index.html**

Dans ta page `index.html` principale, ajouter la carte du jeu :

```html
<!-- Section Formations/Exercices interactifs -->
<section id="formations">
    <!-- Autres formations/exercices existants -->
    
    <!-- 🎮 NOUVELLE CARTE : Memory Pictogrammes -->
    <div class="formation-card">
        <div class="card-icon">🎮</div>
        <h3>Memory Pictogrammes GHS</h3>
        <p>
            Jeu interactif pour mémoriser les 9 symboles de danger.
            Avec scoring, classement et animations avancées.
        </p>
        <div class="card-tags">
            <span class="tag">Gamifié</span>
            <span class="tag">Interactif</span>
            <span class="tag">Pictogrammes</span>
        </div>
        <a href="formations/memory-pictogrammes/memory-pictogrammes.html" 
           class="btn btn-primary">
            Jouer Maintenant 🎮
        </a>
    </div>
</section>
```

### **Étape 4 : Tester**

```bash
# Option 1 : Fichier local
# Double-clic sur formations/memory-pictogrammes/memory-pictogrammes.html

# Option 2 : Serveur local
python -m http.server 8000
# Ouvrir http://localhost:8000/formations/memory-pictogrammes/memory-pictogrammes.html

# Option 3 : Production
# Ouvrir http://votre-domaine.com/formations/memory-pictogrammes/memory-pictogrammes.html
```

---

## ✅ Checklist d'Intégration

- [ ] Créer dossier `formations/memory-pictogrammes/`
- [ ] Copier tous les fichiers aux bons emplacements
- [ ] Copier la documentation dans `docs/`
- [ ] Vérifier les chemins (CSS/JS/images affichés)
- [ ] Tester lien "NextGN Formation" (retour à index.html)
- [ ] Ajouter la carte dans index.html
- [ ] Tester le jeu (flip, matching, scores)
- [ ] Vérifier responsive (mobile)
- [ ] Vérifier localStorage (scores persistent)

---

## 🎯 Avantages de l'Option 1

✅ **Scalable** : Prête pour futurs exercices/jeux dans `formations/`
✅ **Organisée** : Assets, code, docs séparés
✅ **Maintenable** : Hiérarchie claire
✅ **Flexible** : Facile à dupliquer ou modifier
✅ **Professionnelle** : Structure robuste

---

## 📁 Structure Évolutive

L'architecture peut accueillir d'autres formations :

```
formations/
├── memory-pictogrammes/
│   ├── memory-pictogrammes.html
│   ├── assets/
│   └── docs/
├── memory-ingredients/          ← Futur jeu
│   ├── memory-ingredients.html
│   ├── assets/
│   └── docs/
├── quiz-securite/               ← Future formation
│   ├── quiz-securite.html
│   ├── assets/
│   └── docs/
└── ... (autres formations)
```

---

## 🔒 Permissions (si serveur Linux)

```bash
# Définir les bonnes permissions
chmod -R 755 formations/
chmod -R 644 formations/memory-pictogrammes/assets/*
chmod 644 formations/memory-pictogrammes/memory-pictogrammes.html
```

---

## 🐛 Dépannage

### Pictogrammes invisibles
- Vérifier le chemin : `assets/pictogrammes/`
- Vérifier les permissions : `chmod 644 formations/memory-pictogrammes/assets/pictogrammes/*`

### CSS/JS ne se chargent pas
- Ouvrir console (F12) et vérifier erreurs 404
- Vérifier chemins relatifs depuis `formations/memory-pictogrammes/`

### Lien retour ne fonctionne pas
- Vérifier que le chemin est `../../index.html`
- Tester depuis racine du site

### Scores non sauvegardés
- Vérifier que localStorage est activé
- Tester en mode incognito
- Vérifier console pour erreurs

---

## 📝 Notes Importantes

1. **Chemins relatifs** : Tous les chemins dans `memory-pictogrammes.html` sont relatifs à `formations/memory-pictogrammes/`
2. **Lien de retour** : `../../index.html` remonte 2 niveaux (formations/ puis racine)
3. **Assets partagés** : Les CSS/JS ne référencent que des assets locaux
4. **Scalabilité** : La structure `formations/` permet d'ajouter d'autres exercices

---

## ✨ Points à Retenir

| Aspect | Configuration |
|--------|---------------|
| **Page du jeu** | `formations/memory-pictogrammes/memory-pictogrammes.html` |
| **Assets CSS** | `formations/memory-pictogrammes/assets/css/` |
| **Assets JS** | `formations/memory-pictogrammes/assets/js/` |
| **Images** | `formations/memory-pictogrammes/assets/pictogrammes/` |
| **Documentation** | `formations/memory-pictogrammes/docs/` |
| **Lien depuis index.html** | `href="formations/memory-pictogrammes/memory-pictogrammes.html"` |
| **Lien de retour** | `href="../../index.html"` |

---

**Prêt pour intégration! 🚀**

Pour plus de détails sur le jeu, voir : `formations/memory-pictogrammes/docs/README.md`

