Update planning docs for mobile header rollout

2026-03-14 20:52:18 +00:00
parent a3ccc1c92b
commit 5325aa62e2
5 changed files with 76 additions and 41 deletions
@@ -1,49 +1,43 @@
-# EXECUTION IMMEDIATE - White Contrast Rollout
+# EXECUTION IMMEDIATE - White Contrast + Mobile Header

 Updated: 2026-03-14
 Severite: critique pour coherence visuelle et lisibilite

 ## 3 actions prioritaires

-### 1. Basculer tout le site sur une DA blanche par defaut
+### 1. Finaliser la top bar mobile compacte
 Probleme:
- la home synchronisee OVH est la bonne base, mais une partie du CSS reste encore oriente sombre
- le runtime pointait encore vers `data-theme="default"`
+- la top bar historique etait trop haute sur mobile
+- elle reprenait une logique desktop qui wrap, au lieu d'une navigation mobile compacte

 Action:
- passer le layout sur un theme clair par defaut
- reposer les surfaces principales sur blanc/ivoire
- reprendre les accents en teal/rust
- traiter explicitement les ilots a risque:
-  - hero photo
-  - photo strip
-  - video strip
-  - `contact-minitel`
-  - FAQ focus
+- un header partage pour home, formation et mentions
+- un acces direct `Contact` visible hors menu
+- un menu repliable pour le reste de la navigation
+- fermeture automatique apres clic, `Escape`, ou retour desktop

 Fichiers cle:
+- `src/components/SiteHeader.astro`
 - `src/layouts/BaseLayout.astro`
- `src/lib/site.ts`
 - `src/styles/global.css`
- `src/styles/home-workbench.css`
+- `src/pages/index.astro`
+- `src/pages/formation.astro`
+- `src/pages/mentions-legales.astro`

-### 2. Rebuilder et verifier le preview OVH
+### 2. Verifier visuellement le preview OVH
 Action:
- builder la variante preview avec le bon `PUBLIC_SITE_URL`
- verifier que tous les liens et assets sortent en `/preview/`
- publier sur OVH seulement apres build propre
+- controler la top bar sur mobile reel
+- verifier qu'elle reste compacte fermee
+- verifier que le menu est lisible et stable ouvert

-Commande de base:
-```bash
-cd /home/zacus/electron-rare-preview-ovh
-PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external
-```
+Etat:
+- preview top bar publie et valide publiquement via GitHub Actions `23095540371`

-### 3. Revalider la production actuelle apres preview
+### 3. Republier la production apres validation humaine
 Action:
- tester les pages et ancres reelles du site
- verifier la suppression du contraste sombre sur les surfaces critiques
- confirmer tracking et meta minimums
+- lancer le workflow prod depuis `preview-ovh-ftp`
+- revalider `/`, `/formation/`, `/mentions-legales/`, `/lab/`
+- confirmer que la prod embarque bien la nouvelle top bar mobile

 Routes a verifier:
 - `/`
@@ -55,6 +49,7 @@ Routes a verifier:

 ## Cible de sortie
 - theme blanc contraste par defaut
+- top bar mobile compacte et state-of-art
 - contact lisible et clavier-friendly
 - preview valide avant push prod
 - docs alignees sur Astro + OVH + GitHub Actions FTP
@@ -15,7 +15,7 @@ PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external
 ```

 ### A2 - Zones a verifier dans le build
- nav et hero
+- top bar desktop/mobile et hero
 - approche et cas concrets
 - photo strip et video strip
 - formats de mission
@@ -29,6 +29,9 @@ PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external
 - pas de retour a l'ancienne DA sombre
 - pas d'ancre legacy `#projets`
 - focus visible sur FAQ et formulaire
+- top bar mobile compacte, sans wrap sur plusieurs lignes au chargement
+- CTA `Contact` visible hors menu sur mobile
+- fermeture du menu au clic, a `Escape` et au resize desktop

 ## Sprint B - Preview OVH

@@ -51,12 +54,17 @@ curl -fsSI https://www.lelectronrare.fr/preview/formation/
 curl -fsSI https://www.lelectronrare.fr/preview/mentions-legales/
 ```

+### B4 - Etat courant
+- white-contrast preview valide: `23094884980`
+- top bar mobile preview validee publiquement: `23095540371`
+
 ## Sprint C - Production

 ### C1 - Preconditions
 - preview valide visuellement
 - build propre
 - pas de regression tracking evidente
+- validation humaine du header mobile

 ### C2 - Deploy production
 - workflow GitHub Actions: `deploy-ovh-ftp.yml`
@@ -73,6 +81,9 @@ curl -fsSI https://www.lelectronrare.fr/robots.txt
 curl -fsSI https://www.lelectronrare.fr/sitemap.xml
 ```

+### C4 - Action en attente
+- republier la prod avec le lot `Modernize Electron Rare mobile header`
+
 ## Sprint D - Tracking / SEO

 ### D1 - Events a verifier
@@ -8,6 +8,7 @@ Consolider la DA actuelle en version claire, contraste blanc, sans reintroduire

 ## Sources de verite
 - Structure homepage: `src/pages/index.astro`
+- Header partage: `src/components/SiteHeader.astro`
 - Sections actives: `Hero`, `About`, `CaseStudies`, `GraphicSprints`, `Faq`, `Contact`
 - Copy et donnees: `src/content/home-content.ts`
 - Theme et layout: `src/layouts/BaseLayout.astro`, `src/styles/global.css`, `src/styles/home-workbench.css`
@@ -30,11 +31,13 @@ Consolider la DA actuelle en version claire, contraste blanc, sans reintroduire

 ## Mapping section -> composants reels
 1. `Header_Navigation`
- Cible: `src/pages/index.astro` + `src/layouts/BaseLayout.astro`
+- Cible: `src/components/SiteHeader.astro` + `src/layouts/BaseLayout.astro`
 - Elements:
  - marque
-  - nav anchors
-  - acces direct formation, lab, FAQ, contact
+  - top bar compacte
+  - CTA direct `Contact`
+  - menu mobile repliable
+  - anchors et liens de pages internes

 2. `Hero_Conversion`
 - Cible: `src/components/sections/Hero.tsx`
@@ -96,15 +99,17 @@ Consolider la DA actuelle en version claire, contraste blanc, sans reintroduire
 ## Backlog P0
 - [x] Forcer la cascade sur la DA blanche dans `BaseLayout.astro`, `site.ts`, `global.css`, `home-workbench.css`.
 - [x] Relever les derniers blocs sombres restants: `hero-bg-photo`, `photo-strip`, `video-strip`, `contact-minitel`, FAQ focus.
+- [x] Remplacer la nav mobile "desktop qui wrap" par une top bar compacte state-of-art 2026.
 - [ ] Verifier la lisibilite des CTA sur blanc.
- [ ] Verifier que la home et `formation` partagent bien le meme socle visuel en preview live.
+- [ ] Verifier que la home, `formation` et `mentions-legales` partagent bien le meme header et le meme socle visuel en preview live.

 ## Backlog P1
 - [ ] Supprimer les references documentaires a `#projets`, Malt, GitHub Pages static prod, dual-rail hero, contrast toggle.
 - [ ] Verifier les events `data-track` sur les CTA actifs uniquement.
 - [x] Recaler `tracking:check` sur le contrat Astro actif pour sortir des faux positifs legacy.
 - [x] Valider preview OVH.
- [x] Valider prod OVH.
+- [x] Valider preview OVH avec la nouvelle top bar mobile (`23095540371`).
+- [ ] Revalider prod OVH avec la nouvelle top bar mobile.

 ## Backlog P2
 - [x] Supprimer les reliquats `.site-contrast-toggle` du CSS global.
@@ -119,7 +124,9 @@ Consolider la DA actuelle en version claire, contraste blanc, sans reintroduire

 ### Gate UX
 - Aucun panneau critique ne reste sur fond sombre.
- Mobile 390/768 sans debordement.
+- Top bar mobile 390/768 sans debordement ni double hauteur permanente.
+- Une action primaire `Contact` reste visible hors menu sur mobile.
+- Menu ferme = header compact ; menu ouvert = navigation claire et scrollable.
 - CTA primary/secondary lisibles sur fond clair.
 - Contact completement utilisable.

@@ -139,5 +146,6 @@ Consolider la DA actuelle en version claire, contraste blanc, sans reintroduire
 ## Definition of done
 1. Le site public sert par defaut une version blanc contraste coherente.
 2. Aucun element critique de l'ancienne DA sombre ne reste visible.
-3. Les docs actives parlent du vrai site OVH/Astro actuel.
-4. Preview et production sont verifiees sur cette base.
+3. La top bar mobile n'occupe plus un bloc disproportionne et ne wrap plus comme une nav desktop.
+4. Les docs actives parlent du vrai site OVH/Astro actuel.
+5. Preview et production sont verifiees sur cette base.
@@ -27,6 +27,14 @@ La version publique de L'Electron Rare repart sur une base claire, contraste bla
 - typography mono sur certains labels et statuts
 - accents rust/teal sur CTA, badges, progression et reperes

+## Regles header 2026
+- desktop: navigation inline, stable, sans bruit inutile
+- mobile: header compact, une seule ligne utile a l'ouverture de page
+- mobile: kicker masque, marque raccourcie visuellement, pas de wrap multi-lignes par defaut
+- mobile: un acces direct `Contact` reste visible hors menu
+- mobile: le reste de la navigation passe dans un menu repliable, scrollable, refermable au clic et a `Escape`
+- la top bar ne doit plus ressembler a une nav desktop compressee
+
 ## Ce qui est interdit
 - retour a la home `studio/figma`
 - bouton contraste sans vraie fonctionnalite produit
@@ -38,6 +46,14 @@ La version publique de L'Electron Rare repart sur une base claire, contraste bla
 - meta navigateur claire: `themeColor` blanc dans `src/lib/site.ts`
 - socle visuel: `src/styles/global.css`
 - overrides DA v12: `src/styles/home-workbench.css`
+- header partage: `src/components/SiteHeader.astro`
+- fermeture et sync du menu mobile: script inline dans `src/layouts/BaseLayout.astro`
+
+## Etat courant
+- preview white-contrast valide
+- production white-contrast valide
+- top bar mobile modernisee en preview
+- repush production encore requis pour ce lot header

 ## QA minimum
 - nav
@@ -12,6 +12,7 @@ Source of truth: this file for execution priorities, plus the current code in `s

 ## Verites de reference
 - Structure de page: `src/pages/index.astro`
+- Header partage: `src/components/SiteHeader.astro`
 - Sections actives: `src/components/sections/Hero.tsx`, `About.tsx`, `CaseStudies.tsx`, `GraphicSprints.tsx`, `Faq.astro`, `Contact.astro`
 - Theme/layout: `src/layouts/BaseLayout.astro`, `src/styles/global.css`, `src/styles/home-workbench.css`
 - Canonical/base/deploiement: `src/lib/site.ts`, `scripts/build-astro-external.mjs`, `docs/ovh-ftp-preview-solution-2026-03-14.md`
@@ -28,22 +29,26 @@ Source of truth: this file for execution priorities, plus the current code in `s
 - [x] Workflow OVH enrichi avec verification HTTP publique post-deploiement.
 - [x] Preview OVH publie et valide publiquement via GitHub Actions (`23094884980`).
 - [x] Production OVH publiee et validee publiquement via GitHub Actions (`23095014692`).
+- [x] Top bar mobile refondue via header partage + menu compact (`a3ccc1c`).
+- [x] Preview OVH mis a jour avec la nouvelle top bar mobile et valide publiquement (`23095540371`).
 - [ ] White-contrast pass verifiee visuellement sur preview.
 - [ ] White-contrast pass verifiee visuellement sur production.
+- [ ] Republier la production avec la nouvelle top bar mobile.

 ## P0 - Bloc de sortie immediate
 - [x] Builder le preview avec le theme blanc contraste (`PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external`).
- [ ] Verifier le rendu de la home: nav, hero, approche, cas clients, missions, FAQ, footer.
+- [ ] Verifier le rendu de la home: top bar mobile, hero, approche, cas clients, missions, FAQ, footer.
 - [ ] Verifier les surfaces medias: hero photo, photo strip, video strip.
 - [ ] Verifier la section contact en version claire: tabs, textarea, formulaire, focus clavier, messages d'etat.
 - [ ] Verifier `/formation/` et `/mentions-legales/` avec le meme theme clair.
 - [x] Deployer le preview OVH et valider `https://www.lelectronrare.fr/preview/`.

 ## P1 - Validation live
- [x] Si preview valide, deployer la production a la racine.
- [x] Verifier en live les routes `/`, `/formation/`, `/mentions-legales/`, `/lab/`, `/robots.txt`, `/sitemap.xml`.
+- [ ] Deployer la production a la racine avec la top bar mobile modernisee.
+- [ ] Re-verifier en live les routes `/`, `/formation/`, `/mentions-legales/`, `/lab/`, `/robots.txt`, `/sitemap.xml` apres redeploiement.
 - [ ] Verifier l'absence de retour vers l'ancienne homepage ou d'elements sombres residuels.
- [ ] Verifier les ancres actives: `#a-propos`, `#cas-clients`, `#graphic-sprints-title`, `#faq`, `#contact`.
+- [ ] Verifier les ancres actives: `#a-propos`, `#graphic-sprints-title`, `#faq`, `#contact`.
+- [ ] Verifier la top bar mobile sur 390px et 768px: une seule ligne visible fermee, CTA `Contact` direct, menu stable, fermeture sur clic/Escape.

 ## P2 - Tracking / SEO
 - [ ] Valider GA4 Realtime et DebugView pour les events actuels: