# Checklist responsive (MG-112)

Trois formats à vérifier, correspondant aux points de rupture réellement
définis dans les maquettes.

## Points de rupture du projet

| Largeur | Ce qui change |
|---|---|
| **≤ 760 px** | le CTA collant « Prendre rendez-vous » apparaît en bas d'écran (sauf sur l'accueil, qui n'en a pas) ; `body` reçoit 76 px de marge basse |
| **≤ 900 px** | back-office : la sidebar passe au-dessus du contenu |
| **≤ 1040 px** | la navigation bureau disparaît, le bouton burger apparaît |

Les grilles utilisent `repeat(auto-fit, minmax(…, 1fr))` et `flex-wrap` :
elles se réorganisent en continu, sans point de rupture dédié.

---

## 📱 Mobile — 390 px (iPhone 14)

### Toutes les pages
- [ ] Aucun défilement horizontal (le symptôme le plus fréquent : une valeur
      fixe qui dépasse)
- [ ] Le bouton burger est visible et le menu s'ouvre
- [ ] Le rideau du menu : moitié terracotta en haut, bleue en bas, puis panneau
      anthracite — l'animation se déroule entièrement
- [ ] Les items du menu apparaissent en cascade
- [ ] Le menu se ferme au clic sur un lien, sur la croix et à la touche Échap
- [ ] Le CTA collant ne masque pas le pied de page ni la fin du contenu
- [ ] Le CTA collant **n'apparaît pas** sur l'accueil (conforme aux maquettes)

### Accueil
- [ ] Le hero passe en une colonne, le portrait sous le texte
- [ ] Le cadre organique du portrait n'est pas déformé
- [ ] Le décor flottant (Ψ, pictogrammes) ne déborde pas et ne gêne pas la lecture
- [ ] Les 3 cartes d'accompagnement s'empilent
- [ ] Les 3 vignettes de motifs s'empilent sans décalage vertical incohérent
- [ ] La parallaxe de la rivière reste fluide (ou est neutralisée si
      « réduire les animations » est actif)

### Ateliers
- [ ] Les 3 blocs s'empilent, l'encadré « Format » passe sous le texte
- [ ] Les couleurs de fond alternent toujours (blanc / bleu pâle / vert pâle)

### FAQ
- [ ] Les intitulés de questions ne débordent pas
- [ ] Le chevron reste aligné à droite
- [ ] L'ouverture d'un panneau referme le précédent

### Contact
- [ ] Le formulaire passe en une colonne
- [ ] Prénom et Nom s'empilent
- [ ] L'encadré d'urgence reste lisible
- [ ] Le clavier mobile propose le bon type de saisie : e-mail pour l'e-mail,
      numérique pour le téléphone
- [ ] Le widget hCaptcha n'est pas coupé

---

## 📲 Tablette — 768 px (iPad)

- [ ] Toujours en mode burger (le basculement est à 1040 px)
- [ ] Le CTA collant **a disparu** (le seuil est à 760 px) — vérifier que la
      transition ne laisse pas de marge basse orpheline
- [ ] Les grilles passent en deux colonnes plutôt qu'en une
- [ ] Le hero de l'accueil : deux colonnes ou une, selon la place — pas de
      chevauchement
- [ ] Ateliers : le texte et l'encadré Format cohabitent correctement
- [ ] Back-office : la sidebar est passée au-dessus du contenu, les tableaux
      défilent horizontalement sans casser la page

---

## 🖥️ Bureau — 1440 px

- [ ] La navigation complète est visible, le burger a disparu
- [ ] Le sous-menu « Accompagnements » s'ouvre au survol **et** au focus clavier
- [ ] Le header de l'accueil se compacte au défilement (logo 76 → 48 px,
      nom 27 → 21 px) sans à-coup
- [ ] Le contenu reste centré, largeur maximale 1180 px
- [ ] Les effets de survol fonctionnent : cartes qui se soulèvent, boutons qui
      changent de teinte, vignettes de motifs
- [ ] La parallaxe de la rivière est visible et fluide
- [ ] Back-office : sidebar 240 px fixe, top bar collante, tableaux entiers

---

## Navigateurs à couvrir

| Navigateur | Priorité | Point d'attention |
|---|---|---|
| Chrome / Edge | haute | référence |
| Safari iOS | **haute** | `backdrop-filter`, `aspect-ratio`, `env(safe-area-inset-bottom)` sur iPhone à encoche |
| Firefox | moyenne | rendu des polices variables |
| Safari macOS | moyenne | idem iOS |

Points spécifiques à Safari :
- [ ] Le flou du header (`backdrop-filter`) s'applique bien
- [ ] Le CTA collant ne passe pas sous la barre d'accueil de l'iPhone
- [ ] Les images WebP s'affichent (supporté depuis Safari 14)

---

## Vérification rapide en console

Pour détecter l'élément responsable d'un défilement horizontal :

```js
// À coller dans la console du navigateur, sur la page fautive
document.querySelectorAll('*').forEach(el => {
  if (el.getBoundingClientRect().right > document.documentElement.clientWidth + 1) {
    console.log(el);
  }
});
```