# Champs ACF requis pour la vidéo de fond - Section Cover Home

Pour que la vidéo de fond fonctionne correctement dans `section-cover-home.php`, vous devez ajouter les champs ACF suivants :

## Groupe de champs : Cover Home

**Emplacement :** Page d'accueil ou template spécifique

### Champs nécessaires :

#### Desktop (Paysage) - Champs principaux

##### 1. Image Desktop
- **Nom du champ :** `image`
- **Type :** Image
- **Retour :** ID de l'image
- **Usage :** Image de fond pour desktop (paysage) si pas de vidéo
- **Requis :** Oui (fallback obligatoire)
- **Instructions :** Image affichée sur desktop si pas de vidéo, et sur mobile si pas de contenu portrait. Format 16:9 recommandé.

##### 2. Vidéo Desktop
- **Nom du champ :** `video`
- **Type :** File
- **Retour :** Array (URL, mime_type, etc.) ou URL uniquement
- **Types de fichiers autorisés :** mp4, webm
- **Taille maximale :** 10 MB recommandé
- **Usage :** Vidéo de fond pour desktop (paysage)
- **Requis :** Non (optionnel)
- **Instructions :**
  - Vidéo affichée uniquement sur desktop (lg breakpoint et plus)
  - Format recommandé : MP4 (H.264) pour compatibilité maximale
  - Résolution recommandée : 1920x1080 max
  - Durée : 10-30 secondes en boucle
  - Compressez la vidéo pour optimiser le poids (utilisez HandBrake ou FFmpeg)
  - La vidéo sera en autoplay, muted, loop

##### 3. Video Poster Desktop
- **Nom du champ :** `video_poster`
- **Type :** Image
- **Retour :** ID de l'image
- **Usage :** Image affichée pendant le chargement de la vidéo desktop
- **Requis :** Non (mais fortement recommandé si vidéo)
- **Instructions :**
  - Capture d'écran de la première frame de la vidéo
  - Même ratio que la vidéo (16:9 généralement)
  - Optimisée pour le web
  - Améliore le LCP (Largest Contentful Paint)

#### Mobile (Portrait) - Champs optionnels

##### 4. Image Portrait Mobile
- **Nom du champ :** `image_portrait`
- **Type :** Image
- **Retour :** ID de l'image
- **Usage :** Image de fond pour mobile (portrait) si pas de vidéo portrait
- **Requis :** Non (fallback sur image desktop)
- **Instructions :** Image optimisée pour mobile en orientation portrait. Format 9:16 recommandé.

##### 5. Vidéo Portrait Mobile
- **Nom du champ :** `video_portrait`
- **Type :** File
- **Retour :** Array (URL, mime_type, etc.) ou URL uniquement
- **Types de fichiers autorisés :** mp4, webm
- **Taille maximale :** 5 MB recommandé (mobile)
- **Usage :** Vidéo de fond pour mobile (portrait)
- **Requis :** Non (optionnel)
- **Instructions :**
  - Vidéo affichée uniquement sur mobile (< lg breakpoint)
  - Format recommandé : MP4 (H.264)
  - Résolution recommandée : 1080x1920 max (portrait)
  - Durée : 10-30 secondes en boucle
  - Compressez davantage pour mobile (bande passante limitée)
  - La vidéo sera en autoplay, muted, loop

##### 6. Video Poster Portrait Mobile
- **Nom du champ :** `video_portrait_poster`
- **Type :** Image
- **Retour :** ID de l'image
- **Usage :** Image affichée pendant le chargement de la vidéo mobile
- **Requis :** Non (mais fortement recommandé si vidéo portrait)
- **Instructions :**
  - Capture d'écran de la première frame de la vidéo portrait
  - Même ratio que la vidéo (9:16 généralement)
  - Optimisée pour le web
  - Améliore le LCP mobile

## Structure JSON ACF (exemple)

```json
{
  "key": "group_cover_home",
  "title": "Cover Home",
  "fields": [
    {
      "key": "field_cover_image",
      "label": "Image Desktop (Paysage)",
      "name": "image",
      "type": "image",
      "required": 1,
      "return_format": "id",
      "preview_size": "medium",
      "library": "all",
      "instructions": "Image de fond pour desktop. Utilisée aussi comme fallback mobile si pas de contenu portrait."
    },
    {
      "key": "field_cover_video",
      "label": "Vidéo Desktop (Paysage)",
      "name": "video",
      "type": "file",
      "required": 0,
      "return_format": "array",
      "library": "all",
      "mime_types": "mp4,webm",
      "instructions": "Vidéo affichée sur desktop. Format MP4 recommandé, max 10MB, 1920x1080."
    },
    {
      "key": "field_cover_video_poster",
      "label": "Poster Vidéo Desktop",
      "name": "video_poster",
      "type": "image",
      "required": 0,
      "return_format": "id",
      "preview_size": "medium",
      "library": "all",
      "instructions": "Image affichée pendant le chargement de la vidéo desktop."
    },
    {
      "key": "field_cover_image_portrait",
      "label": "Image Mobile (Portrait)",
      "name": "image_portrait",
      "type": "image",
      "required": 0,
      "return_format": "id",
      "preview_size": "medium",
      "library": "all",
      "instructions": "Image de fond pour mobile en orientation portrait. Format 9:16 recommandé."
    },
    {
      "key": "field_cover_video_portrait",
      "label": "Vidéo Mobile (Portrait)",
      "name": "video_portrait",
      "type": "file",
      "required": 0,
      "return_format": "array",
      "library": "all",
      "mime_types": "mp4,webm",
      "instructions": "Vidéo affichée sur mobile. Format MP4 recommandé, max 5MB, 1080x1920."
    },
    {
      "key": "field_cover_video_portrait_poster",
      "label": "Poster Vidéo Mobile",
      "name": "video_portrait_poster",
      "type": "image",
      "required": 0,
      "return_format": "id",
      "preview_size": "medium",
      "library": "all",
      "instructions": "Image affichée pendant le chargement de la vidéo mobile."
    }
  ],
  "location": [
    [
      {
        "param": "page_template",
        "operator": "==",
        "value": "template-home.php"
      }
    ]
  ]
}
```

## Optimisation de la vidéo avec FFmpeg

Pour optimiser votre vidéo avant de l'uploader :

```bash
# Compression optimale pour le web
ffmpeg -i input.mp4 -c:v libx264 -crf 28 -preset slow -vf scale=1920:1080 -movflags +faststart -an output.mp4

# Créer le poster depuis la première frame
ffmpeg -i input.mp4 -ss 00:00:00 -vframes 1 poster.jpg
```

## Fonctionnalités implémentées

### Performance
- ✅ Pause automatique quand hors du viewport (Intersection Observer)
- ✅ Pause sur changement d'onglet (visibilitychange)
- ✅ Détection de connexion lente (Network Information API)
- ✅ Preload metadata uniquement
- ✅ Image poster pendant le chargement

### Accessibilité
- ✅ `aria-hidden="true"` sur la vidéo (décorative)
- ✅ Respect de `prefers-reduced-motion`
- ✅ Texte alternatif pour navigateurs sans support vidéo
- ✅ Muted par défaut (requis pour autoplay)

### Responsive
- ✅ Vidéo sur desktop (lg+) uniquement
- ✅ Image sur mobile (portrait)
- ✅ Fallback image si vidéo non disponible

### SEO
- ✅ `fetchpriority="high"` sur l'image hero
- ✅ `loading="eager"` sur l'image hero (LCP)
- ✅ Alt text dynamique depuis WordPress

## Test checklist

- [ ] Uploader une vidéo MP4 dans le champ ACF
- [ ] Uploader une image poster
- [ ] Vérifier l'affichage desktop (vidéo visible)
- [ ] Vérifier l'affichage mobile (image visible)
- [ ] Tester le scroll (vidéo se met en pause hors viewport)
- [ ] Tester le changement d'onglet (vidéo en pause)
- [ ] Vérifier la console (pas d'erreurs)
- [ ] Tester avec connexion lente (throttling Chrome DevTools)
- [ ] Tester avec prefers-reduced-motion activé
- [ ] Vérifier le LCP dans Lighthouse
