# Système de Composants Header & Footer - GILBAK DIGITAL

## Vue d'ensemble

Ce site utilise un système de composants réutilisables pour le header et le footer. Cela signifie que le header et le footer sont définis une seule fois et chargés dynamiquement dans toutes les pages.

## Structure

### Fichiers de composants
- **`assets/header.html`** - Composant du header (navigation)
- **`assets/footer.html`** - Composant du footer (informations de contact et liens)

### Pages du site
- **`index.html`** - Page d'accueil
- **`services.html`** - Page des services
- **`offres.html`** - Page des offres spécialisées
- **`temoignages.html`** - Page des témoignages
- **`about.html`** - Page à propos
- **`contact.html`** - Page de contact

## Comment ça fonctionne ?

1. **Chargement automatique** : Chaque page HTML contient des placeholders vides :
   ```html
   <div id="header-placeholder"></div>
   <div id="footer-placeholder"></div>
   ```

2. **JavaScript loader** : Le fichier `assets/script.js` contient une fonction `loadHeaderAndFooter()` qui :
   - Récupère le contenu de `assets/header.html`
   - Récupère le contenu de `assets/footer.html`
   - Injecte ces contenus dans les placeholders correspondants

3. **Initialisation** : La fonction est appelée au chargement de la page via `DOMContentLoaded`

## Avantages

✅ **Pas de duplication** - Le header et footer ne sont définis qu'une fois
✅ **Maintenance facile** - Modifier le header/footer une fois met à jour toutes les pages
✅ **Cohérence** - Navigation et informations identiques sur toutes les pages
✅ **Performance** - Les composants peuvent être mis en cache par le navigateur

## Modification des composants

### Mettre à jour le header
Éditez `assets/header.html` pour :
- Ajouter/modifier des liens de navigation
- Changer le logo
- Modifier le design du menu mobile

### Mettre à jour le footer
Éditez `assets/footer.html` pour :
- Mettre à jour les informations de contact
- Ajouter/modifier des liens de navigation
- Changer les liens sociaux

## Compatibilité

Ce système fonctionne avec :
- ✅ Tous les navigateurs modernes (Chrome, Firefox, Safari, Edge)
- ✅ Fichiers statiques (pas besoin de serveur PHP/Node.js)
- ✅ Déploiement sur serveurs classiques (Apache, Nginx, IIS)

## Dépannage

**Le header/footer n'apparaît pas ?**
1. Vérifiez que `assets/header.html` et `assets/footer.html` existent
2. Vérifiez que `assets/script.js` est chargé correctement
3. Ouvrez la console du navigateur (F12) pour vérifier les erreurs

**Les chemins ne fonctionnent pas sur certaines pages ?**
Les liens dans `header.html` utilisent des chemins relatifs (ex: `index.html`, `services.html`). Cela fonctionne correctement car toutes les pages sont au même niveau dans le répertoire racine.

## Pages avec ce système

Tous les fichiers HTML suivants utilisent ce système de composants :
- index.html ✅
- services.html ✅
- offres.html ✅
- temoignages.html ✅
- about.html ✅
- contact.html ✅
- test.html ✅ (page de test)

---

**Créé le:** 23 décembre 2025
**Pour:** GILBAK DIGITAL - Transformation Digitale