devsite/docs-site-interne/captures/AUDIT-VISUEL.md

# Audit visuel et mise en forme

**Dernière mise à jour :** 2026-04-22  
**Captures :** [INDEX.md](./INDEX.md)

## Objectif

Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger** avec traçabilité (code : `app/layout.tsx`, `app/page.tsx`, `app/components/Footer.jsx`, `app/globals.css`).

## Légende

| Champ | Sens |
|--------|------|
| **ID** | Numéro dans [INDEX.md](./INDEX.md) |
| **Constats** | Points validés ensemble |
| **Piste / correctif** | Idée ou implémentation |
| **Statut** | `OK` / `à traiter` / `fait` |

---

## ID 01 — Header et navigation desktop

| Fichier | `01-layout-header-nav-desktop.webp` |
| **Navigateur** | Google Chrome |
| **Constats** | Header OK, mais depuis la normalisation des conteneurs (option 1 zoom) le texte de plusieurs pages se retrouvait **collé** au header : le `<header>` étant `position: fixed`, il est **hors du flux** et ne prend pas de place dans la grille racine. Seule la home compensait, via un `mt-12` local. |
| **Piste / correctif appliqué (2026-04-22)** | Compensation **centralisée** dans `app/layout.tsx` : `<main>` en `pt-20 md:pt-24` (couvre la hauteur du header `h-16` + un peu d’air). Suppression du `mt-12` dupliqué sur la home (`app/page.tsx`) pour ne pas cumuler. Toutes les pages héritent désormais du même espace sous le header, plus besoin de compenser page par page. |
| **Statut** | `fait` |

---

## ID 02 — Menu mobile + header (et retour UX burger)

| Fichier | `02-layout-nav-mobile-ouverte.webp` |
| **Route** | `/` |
| **Code** | `app/layout.tsx` (header, overlay menu) |

### Constats (validés)

- Bouton **menu burger** trop imposant et « gris » (gros bloc) — à rendre plus discret.
- Côté **dézoom** (pinch) sur mobile : le **texte Strapi** + **header** se décalent à gauche, effet d’**incohérence** visuelle.

### Piste / correctif appliqué (2026-04-28) — option 1 (CSS / layout seulement)

- **Burger** : à affiner (taille, contraste) si besoin — voir capture actuelle.
- **Décalage au zoom (sans bloquer le zoom)** : pas de `maximum-scale` ni de meta viewport qui impose le zoom. Renfort uniquement côté **CSS** :
  - `html` / `body` : `overflow-x: hidden`, `min-width: 0`, `max-width: 100%` dans `app/globals.css` ;
  - grille racine, `<header>`, `<main>`, footer : `min-w-0`, `w-full` / `max-w-full` là où c’est utile (`app/layout.tsx`, `app/components/Footer.jsx`) ;
  - **`.bg-wallpaper`** : `width: 100%` (plus de `200vw` sur mobile) pour éviter le double de largeur de page et le débordement au pinch-zoom ;
  - page d’**accueil** : conteneur principal + bloc texte en `min-w-0` / `max-w-full` (`app/page.tsx`).

**Accessibilité** : le **verrouillage total du zoom** n’a **pas** été retenu (hors demande) ; on privilégie la mise en page. Si le dézoom reste gênant, on pourra itérer (contraintes sur le markdown, etc.).

### Refonte du menu mobile en drawer latéral (2026-04-22)

- **Ancien** : panneau mi-hauteur côté gauche + grosse croix `✖` → peu esthétique.
- **Nouveau** (`app/layout.tsx`) : **tiroir gauche** `role="dialog" aria-modal="true"`, **largeur 70 %** (capée à `max-w-sm`), hauteur pleine, fond **sombre translucide** (`bg-gray-900/70 backdrop-blur-md`), bordure droite fine.
- **Animation** : `transition-transform` + `-translate-x-full` ↔ `translate-x-0`, 300 ms, easing `ease-out` ; voile en fondu (`transition-opacity`). Respect de `prefers-reduced-motion` (voir `.mobile-drawer-*` dans `app/globals.css`).
- **Fermeture** : **pas de croix** ; tap sur le **voile**, **Échap**, **clic sur un lien**, **re-tap sur le burger** (qui affiche `✕` le temps de l’ouverture), et **auto-fermeture après 4 s** d’inactivité (timer remis à zéro à chaque interaction / touch dans le tiroir, nettoyé à la fermeture, et relancé à l’ouverture).
- **Accessibilité** : `aria-label` / `aria-expanded` / `aria-controls` sur le burger ; le focus revient sur le burger après fermeture ; fermeture automatique si l’écran passe en ≥ md (resize).

| **Statut** | `fait` — drawer latéral, auto-close 4 s, fond sombre translucide, 70 % |

---

## ID 03 — Accueil hero desktop

| Fichier | `03-accueil-hero-desktop.webp` |
| **Route** | `/` |
| **Code** | `app/page.tsx`, `app/layout.tsx` |
| **Constats** | Rien à corriger spécifiquement : les ajustements déjà faits côté **layout** (compensation du header `pt-20 md:pt-24`, conteneur `min-w-0 max-w-full`) et côté **home** (suppression du `mt-12` dupliqué, `min-w-0 max-w-full` sur le `<main>` et la zone markdown) couvrent la mise en forme. Hero, photo, titre et CV s’affichent correctement au-dessus du pli. |
| **Statut** | `OK` (pris en charge par les correctifs ID 01 / option 1) |

---

## ID 04 — Accueil hero mobile

| Fichier | `04-accueil-hero-mobile.webp` |
| **Route** | `/` |
| **Code** | `app/page.tsx`, `app/layout.tsx` |
| **Constats** | Couvert par les correctifs globaux : **drawer** latéral (ID 02), **compensation header** (`pt-20 md:pt-24`), conteneurs en `min-w-0 / max-w-full`, `.bg-wallpaper` ramené à `width: 100%` sur mobile. Hero lisible, sans débordement au zoom, texte non collé au header. |
| **Statut** | `OK` (pris en charge par les correctifs ID 01 / ID 02 / option 1) |

---

## ID 05 à 21 — Passage global en `OK`

Les captures suivantes **n’ont pas révélé de problème spécifique** après les correctifs **option 1** (CSS / layout — overflow, `min-w-0`, `.bg-wallpaper`), **ID 01** (compensation du header `pt-20 md:pt-24`) et **ID 02** (refonte du menu mobile en drawer latéral). Elles sont donc marquées **`OK`** à ce stade. Elles restent sujettes à la **refonte visuelle plus large** à venir, qui pourra les reprendre une par une.

| ID | Section | Route | Fichier | Statut |
|----|---------|-------|---------|--------|
| 05 | Accueil page longue | `/` | `05-accueil-page-pleine-desktop.webp` | `OK` |
| 06 | Accueil chargement | `/` | *(non fourni — optionnel)* | `ignoré` |
| 07 | Portfolio liste desktop | `/portfolio` | `07-portfolio-liste-desktop.webp` | `OK` |
| 08 | Portfolio liste mobile | `/portfolio` | `08-portfolio-liste-mobile.webp` | `OK` |
| 09 | Portfolio fiche desktop | `/portfolio/slug` | `09-portfolio-detail-desktop-presentation-ecole-42.webp` | `OK` |
| 10 | Portfolio fiche mobile | `/portfolio/slug` | `10-portfolio-detail-mobile-presentation-ecole-42.webp` | `OK` |
| 11 | Compétences liste desktop | `/competences` | `11-competences-liste-desktop.webp` | `OK` |
| 12 | Compétences liste mobile | `/competences` | `12-competences-liste-mobile.webp` | `OK` |
| 13 | Compétences fiche desktop | `/competences/slug` | `13-competences-detail-ia-desktop.webp` | `OK` |
| 14 | Compétences fiche mobile | `/competences/slug` | `14-competences-detail-ia-mobile.webp` | `OK` |
| 15 | GrasBot ouvert desktop | `/competences/slug` | `15-competences-grasbot-ouvert-desktop.webp` | `OK` |
| 16 | Glossaire modal desktop | `/competences/slug` | `16-competences-glossaire-ouvert-desktop.webp` | `OK` |
| 17 | Contact formulaire desktop | `/contact` | `17-contact-formulaire-desktop.webp` | `OK` |
| 18 | Contact formulaire mobile | `/contact` | `18-contact-formulaire-mobile.webp` | `OK` |
| 19 | Footer desktop | `/` | `19-layout-footer-desktop.webp` | `OK` |
| 20 | Compteur visites desktop | `/` | `20-layout-compteur-visites-desktop.webp` | `OK` |
| 21 | Admin messages desktop | `/admin/messages` | `21-admin-messages-desktop.webp` | `OK` |

---

## Suite

Passage à la **refonte visuelle globale** : direction artistique (palette, typographie, rythme vertical), hiérarchie des pages, traitement des cartes portfolio / compétences, header et footer. À cadrer avec l’utilisateur avant toute modification.