diff --git a/docs/EXECUTION-IMMÉDIATE-2026-03-02.md b/docs/EXECUTION-IMMÉDIATE-2026-03-02.md index 4f8dd4b..62616fe 100644 --- a/docs/EXECUTION-IMMÉDIATE-2026-03-02.md +++ b/docs/EXECUTION-IMMÉDIATE-2026-03-02.md @@ -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 diff --git a/docs/SPRINT-PLAYBOOK-2026-03-02.md b/docs/SPRINT-PLAYBOOK-2026-03-02.md index b2133e9..96cd773 100644 --- a/docs/SPRINT-PLAYBOOK-2026-03-02.md +++ b/docs/SPRINT-PLAYBOOK-2026-03-02.md @@ -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 diff --git a/docs/da-01-implementation-backlog.md b/docs/da-01-implementation-backlog.md index 5b6ac58..af7d20a 100644 --- a/docs/da-01-implementation-backlog.md +++ b/docs/da-01-implementation-backlog.md @@ -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. diff --git a/docs/design-memory-2026-03-14-white-contrast.md b/docs/design-memory-2026-03-14-white-contrast.md index 3a5d336..04180b0 100644 --- a/docs/design-memory-2026-03-14-white-contrast.md +++ b/docs/design-memory-2026-03-14-white-contrast.md @@ -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 diff --git a/docs/project-master-todos.md b/docs/project-master-todos.md index 09ca3af..806b059 100644 --- a/docs/project-master-todos.md +++ b/docs/project-master-todos.md @@ -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: