electron-rare/electron-rare.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch Electron Rare to white-contrast default

Browse Source
This commit is contained in:
Clément SAILLANT
2026-03-14 17:32:27 +00:00
parent 40620bb695
commit 4a1d3a2c18
11 changed files with 812 additions and 883 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/EXECUTION-IMMÉDIATE-2026-03-02.md
+53 -129
View File
@@ -1,141 +1,65 @@
# EXECUTIVE SUMMARY — Actions à faire immédiatement
# EXECUTION IMMEDIATE - White Contrast Rollout
**Date** : 2 mars 2026
**Sévérité** : 🔴 CRITIQUE — Impact direct sur conversion
**Effort estimé** : 48-72h pour P0/P1
Updated: 2026-03-14
Severite: critique pour coherence visuelle et lisibilite
---
## 3 actions prioritaires
## 🎯 3 ACTIONS PRIORITAIRES (Ce week-end)
### 1. Basculer tout le site sur une DA blanche par defaut
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"`
### **1️⃣ Optimiser images hero — GAIN IMMÉDIAT +30-40% CONVERSION**
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
**Problème** :
- Image hero = **6.4 MB** (3.1 MB + 2.3 MB)
- LCP actuel : **~3.5 secondes**
- Mobile users : **40%+ bounce avant voir CTA**
Fichiers cle:
- `src/layouts/BaseLayout.astro`
- `src/lib/site.ts`
- `src/styles/global.css`
- `src/styles/home-workbench.css`
**Solution** (3-4h) :
### 2. Rebuilder et verifier 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
Commande de base:
```bash
# 1. Installer convertisseur
brew install imagemagick webp
# 2. Convertir 2 images hero en AVIF (meilleur ratio)
# hero-pcb-routing-map.png 3.1 MB → 160 KB AVIF
# proof-prototype-bench.png 2.3 MB → 140 KB AVIF
# 3. Ajouter responsive srcset
# → Servir 390px/768px/1440px différentes
# 4. Lazy-load secondary image
# → Primary eager = LCP, Secondary lazy
cd /home/zacus/electron-rare-preview-ovh
PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external
```
**Résultat** :
- LCP : 3.5s → **<700ms** ✅
- Conversion : +35-45% (mobile stops bounce)
- Page weight : 6.4 MB → **350 KB hero**
### 3. Revalider la production actuelle apres preview
Action:
- tester les pages et ancres reelles du site
- verifier la suppression du contraste sombre sur les surfaces critiques
- confirmer tracking et meta minimums
**Files à toucher** :
- [index.html](index.html#L197-L208)
- [script.js](script.js#L5-95)
- `/public/assets/da/openai/*.png` (convert to AVIF/WebP)
Routes a verifier:
- `/`
- `/formation/`
- `/mentions-legales/`
- `/lab/`
- `/robots.txt`
- `/sitemap.xml`
---
## Cible de sortie
- theme blanc contraste par defaut
- contact lisible et clavier-friendly
- preview valide avant push prod
- docs alignees sur Astro + OVH + GitHub Actions FTP
### **2️⃣ Fixer typecheck CI — Éviter futur blocage**
**Problème** :
- `npm run typecheck` échoue
- Risque bloquer CI dans 2-3 sprints
**Solution** (1h) :
```bash
# Modifier tsconfig.json :
# Ajouter "exclude": ["tmp/**", "node_modules"]
# Test :
npm run typecheck # ✅ doit passer
```
**Files** : [tsconfig.json](tsconfig.json)
---
### **3️⃣ Valider GA4 Realtime — Confirmer acquisition fonctionne**
**Problème** :
- Tracking implémenté mais **non validé en production**
- Risque conversion non mesurée
**Solution** (1h) :
```bash
# 1. Ouvrir GA4 DebugView
# https://analytics.google.com/ → Admin → GTM-5SLM67QF
# 2. Tester events live :
# - Visit https://electron-rare.github.io
# - Click CTA (Projets, Contact, LinkedIn)
# - Verify events appear en Realtime ✅
# 3. Archive : screenshot DebugView + events log
```
---
## 📊 IMPACT RÉSUMÉ
| Action | Complexité | Impact | Timeline |
|--------|-----------|--------|----------|
| **Images AVIF** | ⭐⭐ | +35% conversion | 4h |
| **Figures responsive** | ⭐⭐⭐ | +15% mobile UX | 2h |
| **typecheck fix** | ⭐ | Risk mitigation | 1h |
| **GA4 validation** | ⭐ | Measurement trust | 1h |
| **Deploy + test** | ⭐⭐ | Verification | 2h |
| **TOTAL** | | **+50% overall UX** | **10h = 1.25 jours** |
---
## 🚀 EXÉCUTION PROPOSÉE
**Vendredi 2026-03-05** (finish line) :
- [ ] 09:00 : images conversion start
- [ ] 11:00 : HTML/script.js edits
- [ ] 13:00 : typecheck fix + test build
- [ ] 15:00 : GA4 validation + screenshot
- [ ] 16:30 : deploy + Lighthouse verify
- [ ] 17:30 : archive evidence + commit
**Aftermath** :
- Week-end : monitor GA4 Realtime data
- Lundi : Lighthouse >85, LCP <2.5s validation
---
## 💡 PROCHAINE ÉTAPE (Semaine 2)
**Si images réussies (expected) :**
1. SEO enrichissement (JSON-LD WebSite, Organization)
2. GSC property claim + sitemap submit
3. Monitor indexation (7 jours)
**Si complications** :
1. Revert images → fallback PNG optimisé (moins idéal mais rapide)
2. Continue sans AVIF (WebP+PNG suffisant)
---
## 📞 SUPPORT TOOLS
**Image conversion online** (backup) :
- https://cloudconvert.com/png-to-avif
- https://squoosh.app/ (Google, local)
**Validation** :
- Lighthouse : Chrome DevTools F12
- GA4 : https://analytics.google.com
- Schema : https://search.google.com/test/rich-results
---
**Questions ?** → Lire [docs/audit-plan-amelioration-2026-03-02.md](audit-plan-amelioration-2026-03-02.md) pour détails complets.
## Regles
- ne plus documenter `index.html`, `script.js`, ou GitHub Pages root files comme source de prod
- ne plus parler de `#projets`, Malt, ou du bouton contraste
- ne plus relancer l'ancienne DA `studio/figma`
docs/SPRINT-PLAYBOOK-2026-03-02.md
+72 -517
View File
@@ -1,543 +1,98 @@
# SPRINT PLAYBOOK — Commands & Checklists
# Sprint Playbook - White Contrast / Preview / Prod
**Updated** : 2026-03-02
Updated: 2026-03-14
Repo: `/home/zacus/electron-rare-preview-ovh`
---
## Sprint A - Theme clair
## SPRINT A — Performance (48-72h)
### A1 — Image Conversion AVIF/WebP
**Setup environment** :
```bash
cd /Users/cils/Documents/Lelectron_rare/electron-rare.github.io
# Check tools disponibles
which convert # ImageMagick
which cwebp # WebP encoder
# Si manquant :
brew install imagemagick libwebp
```
**Target images** :
```bash
# Collection des 2 images hero principales (v12 baseline)
SOURCE_PRIMARY="/public/assets/da/openai/hero-pcb-routing-map.png"
SOURCE_SECONDARY="/public/assets/da/openai/proof-prototype-bench.png"
# Vérifier tailles actuelles
du -h "$SOURCE_PRIMARY" "$SOURCE_SECONDARY"
# Expected: 3.1 MB + 2.3 MB = 6.4 MB total
# Créer répertoire optimisé
mkdir -p public/assets/da/openai/optimized
```
**Conversion AVIF** (best compression) :
```bash
# Primary image
convert "${SOURCE_PRIMARY}" \
-quality 80 \
-define webp:method=6 \
-strip \
"public/assets/da/openai/optimized/hero-pcb-routing-map.avif"
# Secondary image
convert "${SOURCE_SECONDARY}" \
-quality 80 \
-define webp:method=6 \
-strip \
"public/assets/da/openai/optimized/proof-prototype-bench.avif"
# Vérifier résultat
du -h public/assets/da/openai/optimized/*.avif
# Target: 150-180 KB each
```
**Conversion WebP** (fallback browser support) :
```bash
# Primary -> WebP
cwebp -q 85 "${SOURCE_PRIMARY}" \
-o "public/assets/da/openai/optimized/hero-pcb-routing-map.webp"
# Secondary -> WebP
cwebp -q 85 "${SOURCE_SECONDARY}" \
-o "public/assets/da/openai/optimized/proof-prototype-bench.webp"
# Verify
du -h public/assets/da/openai/optimized/*.webp
# Target: 200-250 KB each
```
**Comparaison avant/après** :
```bash
# Create comparison log
cat > artifacts/optimization-log-2026-03-02.txt << 'EOF'
IMAGE OPTIMIZATION SUMMARY
==========================
Primary (hero-pcb-routing-map) :
Before: 3.1 MB PNG
After:
- 160 KB AVIF (-95%)
- 220 KB WebP (-93%)
- 3.1 MB PNG (fallback)
Secondary (proof-prototype-bench) :
Before: 2.3 MB PNG
After:
- 140 KB AVIF (-94%)
- 190 KB WebP (-92%)
- 2.3 MB PNG (fallback)
Total hero payload :
Before: 6.4 MB
After: 350 KB (AVIF primary)
Gain: -95% or 6.05 MB saved
EOF
cat artifacts/optimization-log-2026-03-02.txt
```
---
### A2 — HTML Picture Element avec srcset
**Edit [index.html](index.html)** → Find & replace hero images :
**Before** (lines 197-208) :
```html
<figure class="lab-asset lab-asset-pcb" data-hero-asset="primary">
<img
src="/assets/da/openai/hero-pcb-routing-map.png"
alt="Plan de routage PCB avec traces et vias"
loading="eager"
data-hero-image />
</figure>
<!-- Secondary -->
<figure class="lab-asset lab-asset-measure" data-hero-asset="secondary">
<img
src="/assets/da/openai/proof-prototype-bench.png"
alt="Banc de test prototype avec instruments"
loading="lazy"
data-hero-image />
</figure>
```
**After** (with picture + srcset) :
```html
<!-- Primary Hero — LCP candidate, eager load -->
<figure class="lab-asset lab-asset-pcb" data-hero-asset="primary">
<picture>
<!-- AVIF (best) -->
<source
srcset="
/assets/da/openai/optimized/hero-pcb-routing-map-1440.avif 1440w,
/assets/da/openai/optimized/hero-pcb-routing-map-768.avif 768w,
/assets/da/openai/optimized/hero-pcb-routing-map-390.avif 390w"
sizes="(min-width: 1440px) 1440px, (min-width: 768px) 768px, 100vw"
type="image/avif">
<!-- WebP (fallback modern) -->
<source
srcset="
/assets/da/openai/optimized/hero-pcb-routing-map-1440.webp 1440w,
/assets/da/openai/optimized/hero-pcb-routing-map-768.webp 768w,
/assets/da/openai/optimized/hero-pcb-routing-map-390.webp 390w"
sizes="(min-width: 1440px) 1440px, (min-width: 768px) 768px, 100vw"
type="image/webp">
<!-- PNG (old browser fallback) -->
<img
src="/assets/da/openai/hero-pcb-routing-map.png"
alt="Plan de routage PCB avec traces et vias"
loading="eager"
data-hero-image />
</picture>
<figcaption>Routage PCB — voie signal, couche, décisions</figcaption>
</figure>
<!-- Secondary Hero — NOT LCP critical, lazy load -->
<figure class="lab-asset lab-asset-measure" data-hero-asset="secondary">
<picture>
<!-- AVIF (best) -->
<source
srcset="
/assets/da/openai/optimized/proof-prototype-bench-1440.avif 1440w,
/assets/da/openai/optimized/proof-prototype-bench-768.avif 768w,
/assets/da/openai/optimized/proof-prototype-bench-390.avif 390w"
sizes="(min-width: 1440px) 1440px, (min-width: 768px) 768px, 100vw"
type="image/avif">
<!-- WebP (fallback modern) -->
<source
srcset="
/assets/da/openai/optimized/proof-prototype-bench-1440.webp 1440w,
/assets/da/openai/optimized/proof-prototype-bench-768.webp 768w,
/assets/da/openai/optimized/proof-prototype-bench-390.webp 390w"
sizes="(min-width: 1440px) 1440px, (min-width: 768px) 768px, 100vw"
type="image/webp">
<!-- PNG (old browser fallback) -->
<img
src="/assets/da/openai/proof-prototype-bench.png"
alt="Prototype validé — preuve terrain et tests"
loading="lazy"
data-hero-image />
</picture>
<figcaption>Test de stabilité — responsiveness et fiabilité</figcaption>
</figure>
```
**Update [script.js](script.js)** → Ajuster paths dynaxmiques pour variants :
```javascript
// line 5-95 : heroAssetByVariant object
// Add responsive paths for each variant :
var heroAssetByVariant = {
v1: {
primary: {
avif: '/assets/da/openai/optimized/hero-pcb-routing-map.avif',
webp: '/assets/da/openai/optimized/hero-pcb-routing-map.webp',
png: '/assets/da/openai/hero-pcb-routing-map.png'
},
secondary: {
avif: '/assets/da/openai/optimized/hero-measurement-rig.avif',
webp: '/assets/da/openai/optimized/hero-measurement-rig.webp',
png: '/assets/da/openai/hero-measurement-rig.png'
},
// ... etc for v2-v12
}
};
// Update img src setting logic:
if (heroPrimaryImage) {
// Fallback to PNG for old browsers (script.js sets primary src)
heroPrimaryImage.src = heroAssets.primary.png || heroAssets.primary;
}
```
---
### A3 — Responsive Image Variants
**Generate 3 sizes per image** (390px, 768px, 1440px) :
```bash
#!/bin/bash
# scripts/generate-responsive-images.sh
SOURCES=(
"public/assets/da/openai/optimized/hero-pcb-routing-map"
"public/assets/da/openai/optimized/proof-prototype-bench"
)
SIZES=(390 768 1440)
for source in "${SOURCES[@]}"; do
base=$(basename "$source" .avif)
for size in "${SIZES[@]}"; do
# AVIF variant
convert "${source}.png" \
-resize "${size}x" \
-quality 80 \
"${source}-${size}.avif"
# WebP variant
cwebp -q 85 \
-resize "${size}" \
"${source}.png" \
-o "${source}-${size}.webp"
done
done
echo "✅ Responsive variants generated"
du -h public/assets/da/openai/optimized/*-*.avif
```
**Run** :
```bash
bash scripts/generate-responsive-images.sh
```
---
### A4 — Test Locally
```bash
# Build project
npm run build:external
# Open locally
open dist/index.html
# or
npx http-server dist -p 8000
# Test Lighthouse Performance
# Chrome DevTools → Lighthouse → Measure page load
# Expected: Performance >85, LCP <800ms
```
**Capture** :
```bash
# Screenshot Lighthouse mobile report
# Save to artifacts/performance/lh-mobile-after.html
```
---
### A5 — Image Budget CI
**Enhance [scripts/check-image-budget.mjs](scripts/check-image-budget.mjs)** :
```javascript
// Add size limits check
const LIMITS = {
'hero-pcb-routing-map.avif': 180_000, // 180 KB
'hero-pcb-routing-map.webp': 250_000, // 250 KB
'proof-prototype-bench.avif': 160_000, // 160 KB
'proof-prototype-bench.webp': 230_000, // 230 KB
};
// Fail build if limits exceeded
Object.entries(LIMITS).forEach(([file, limit]) => {
const actual = fs.statSync(`public/assets/da/openai/optimized/${file}`).size;
if (actual > limit) {
console.error(`❌ ${file}: ${actual} > ${limit}`);
process.exit(1);
}
});
console.log('✅ All images within budget');
```
**Test** :
```bash
npm run image:budget
# Expected: ✅ pass
```
---
## SPRINT B — SEO & QA
### B1 — Fix typecheck
**Edit [tsconfig.json](tsconfig.json)** :
```json
{
"extends": "astro/tsconfigs/strict",
"exclude": [
"tmp/**",
"node_modules",
"dist/**",
".astro/**"
]
}
```
**Test** :
### A1 - Checks locaux
```bash
cd /home/zacus/electron-rare-preview-ovh
git status --short --branch
npm run typecheck
# Expected: ✅ pass (0 errors)
npm run tracking:check
PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external
```
---
### A2 - Zones a verifier dans le build
- nav et hero
- approche et cas concrets
- photo strip et video strip
- formats de mission
- FAQ
- contact `minitel` clair
- footer
- pages `/formation/` et `/mentions-legales/`
### B2 — GA4 Realtime Validation
### A3 - Points d'attention
- pas de `Mode contraste`
- pas de retour a l'ancienne DA sombre
- pas d'ancre legacy `#projets`
- focus visible sur FAQ et formulaire
**Checklist** :
- [ ] Open https://electron-rare.github.io/ in browser
- [ ] Open DevTools → Console
- [ ] Execute :
```javascript
console.log(window.dataLayer);
// Should show GTM events
```
- [ ] Navigate to GA4 DebugView
- [ ] https://analytics.google.com/
- [ ] Admin → GTM account → Container
- [ ] Preview mode ON (blue banner)
- [ ] Click CTA buttons on site → Events appear in DebugView
- [ ] Take screenshot evidence
## Sprint B - Preview OVH
**Expected events** :
```
✅ page_view (auto)
✅ cta_hero_projets (click "#projets" button)
✅ cta_hero_contact (click "#contact" button)
✅ cta_hero_profile (click LinkedIn button)
✅ outbound_linkedin_contact (if click external)
```
**Archive evidence** :
### B1 - Build preview
```bash
mkdir -p artifacts/tracking/2026-03-02
# Save DebugView screenshot to:
# artifacts/tracking/2026-03-02/ga4-debugview.png
cd /home/zacus/electron-rare-preview-ovh
PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external
```
---
### B3 — Deploy & Verify
### B2 - Deploy preview
- workflow GitHub Actions: `deploy-ovh-ftp.yml`
- target: `preview`
- remote attendu: `/www/preview`
### B3 - Verification preview
```bash
# Full flow
npm run build:external
# Test local first
npm run preview
# Deploy to OVH (if ready)
npm run deploy:web:sftp
# Verify live
open https://electron-rare.github.io/
# Lighthouse final check
# Chrome DevTools → Run Lighthouse
# Measure → Full page audit
curl -fsSI https://www.lelectronrare.fr/preview/
curl -fsSI https://www.lelectronrare.fr/preview/formation/
curl -fsSI https://www.lelectronrare.fr/preview/mentions-legales/
```
**Expected results** :
```
Performance: >85 (was <60)
LCP: <800ms (was 3.5s)
CLS: <0.1
```
## Sprint C - Production
---
### C1 - Preconditions
- preview valide visuellement
- build propre
- pas de regression tracking evidente
## SPRINT C — SEO & Long-term
### C1 — Google Search Console
**Setup** :
1. Go to https://search.google.com/search-console
2. Select "URL prefix" → https://electron-rare.github.io/
3. Verify ownership (HTML meta tag or file upload)
4. Add sitemap → /sitemap.xml
5. Request indexation for:
- `/`
- `/lab/`
**Monitoring** (daily for 7-14 days) :
- Coverage report → no errors
- Indexation status → target 100%
- Mobile usability → no errors
---
### C2 — Create Lighthouse Baseline Report
### C2 - Deploy production
- workflow GitHub Actions: `deploy-ovh-ftp.yml`
- target: `production`
- remote attendu: `/www`
### C3 - Verification production
```bash
# Generate and save baseline
npm run build
# Install lighthouse globally (if needed)
npm install -g lighthouse
# Run reports
lighthouse https://electron-rare.github.io/ \
--output=html \
--output-path=artifacts/audit-2026-03-02/lh-mobile-final.html \
--preset=mobile
lighthouse https://electron-rare.github.io/ \
--output=html \
--output-path=artifacts/audit-2026-03-02/lh-desktop-final.html \
--preset=desktop
# View results
open artifacts/audit-2026-03-02/lh-mobile-final.html
curl -fsSI https://www.lelectronrare.fr/
curl -fsSI https://www.lelectronrare.fr/formation/
curl -fsSI https://www.lelectronrare.fr/mentions-legales/
curl -fsSI https://www.lelectronrare.fr/robots.txt
curl -fsSI https://www.lelectronrare.fr/sitemap.xml
```
---
## Sprint D - Tracking / SEO
## POST-DEPLOYMENT CHECKLIST
### D1 - Events a verifier
- `cta_hero_contact`
- `outbound_linkedin_contact`
- `outbound_email_contact`
- `outbound_github_contact`
- `cta_lab_interactif_open`
- `experiment_variant_exposed`
- `engagement_scroll_depth`
- `engagement_section_view`
- `cwv_metric`
```bash
# 1. Full test suite
npm run build:external # ✅ Build passes
npm run tracking:check # ✅ Tracking OK
npm run image:budget # ✅ Budget OK
npm run preflight:pages # ✅ Preflight OK
npm run typecheck # ✅ Types OK
### D2 - Pages/meta a verifier
- canonical
- robots
- sitemap
- OG/Twitter
- `theme-color`
# 2. Live verification
curl -I https://electron-rare.github.io/
# Expected: HTTP 200
# 3. Lighthouse mobile
open https://electron-rare.github.io/
# DevTools F12 → Lighthouse → Run
# Expected: Performance >85, LCP <800ms
# 4. GA4 Realtime check
# https://analytics.google.com/
# DebugView should show live events
# 5. Archive evidence
mkdir -p artifacts/deployment-2026-03-02
# Save screenshots & reports
# 6. Final commit
git add .
git commit -m "perf: hero image optimization (AVIF/WebP, responsive srcset)"
git push origin main
# 7. Verify deployment
# Wait 2-3 min for GitHub Pages
open https://electron-rare.github.io/
# Verify rendered correctly
```
---
## COMMON TROUBLESHOOTING
### Image conversion fails
**Solution** :
```bash
brew uninstall imagemagick
brew install imagemagick@7
export PATH="/usr/local/opt/imagemagick@7/bin:$PATH"
```
### AVIF too large (>200 KB)
**Solution** : Reduce quality or pre-compress PNG :
```bash
# Reduce PNG first
pngquant 256 hero.png -o hero-256.png
# Then convert to AVIF with lower quality (70 instead of 80)
convert hero-256.png -quality 70 hero.avif
```
### Build error with Astro
**Solution** :
```bash
rm -rf node_modules dist .astro
npm ci
npm run build:external
```
### GA4 events not appearing
**Solution** :
```javascript
// Check DataLayer in console
window.dataLayer
// Should show GTM events
// If empty: GTM script may not be loaded
// Check: GTM-5SLM67QF ID is correct in index.html
```
---
**For detailed context, see** :
[docs/audit-plan-amelioration-2026-03-02.md](audit-plan-amelioration-2026-03-02.md)
## Definition de done
- preview publie et valide
- prod publiee et validee
- theme blanc contraste par defaut confirme en live
- docs alignees sur Astro/OVH actuel
docs/da-01-implementation-backlog.md
+110 -160
View File
@@ -1,191 +1,141 @@
# Backlog DA-01 — Decision Complet
# Backlog DA-01 - White Contrast Consolidation
Date: 2026-03-02
Source: Sprint DA-00 (brief + wireflow conversion)
Updated: 2026-03-14
Source: homepage Astro synchronisee avec la base OVH
## Objectif
Implémenter la refonte complète selon le wireflow validé, sans modifier les contrats publics (anchors core, tracking, SEO).
Consolider la DA actuelle en version claire, contraste blanc, sans reintroduire l'ancienne variante `studio/figma` ni le vieux modele GitHub Pages statique.
## Etat d'avancement DA (2026-03-02)
- [x] Mapping section/composants finalisé en phase de refonte.
- [x] DA-00 intégré: structure Header/Hero/Systems/Production/Conversion/Footer et zones mobiles définies.
- [x] Contrat tokens/typographie/couleurs maintenu dans `src/styles/global.css`.
- [x] Validation finale pré-production en cours (preflight + checks build locaux + captures Figma consolidées).
- [ ] Plan de version web hors GitHub réservé (build Astro externe) en attente de besoin produit.
- [ ] Revue de dérive visuelle et conversion à refaire sur chaque release majeure.
## Sources de verite
- Structure homepage: `src/pages/index.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`
- Tracking: `src/lib/tracking.ts` + `src/layouts/BaseLayout.astro`
- Deploiement: `docs/ovh-ftp-preview-solution-2026-03-14.md`
## 1) Mapping section -> composants
## Decisions DA
- Theme par defaut: `high-contrast` clair, oriente blanc/ivoire.
- Palette de travail:
- fonds `#ffffff`, `#faf7f2`, `#f5efe4`
- texte `#0b0a09`, `#2f2a25`
- accent froid `#0b5d65`
- accent chaud `#7f4a23`
- Bouton contraste: non expose au public. Pas de toggle tant qu'il n'existe pas comme fonctionnalite produit reelle.
- Rendition souhaitee:
- surfaces blanches nettes
- contraste fort mais pas clinique
- traces teal/rust en accent, pas en fond systematique
- motion reduite et discrète
1. `Header_ControlRoom`
## Mapping section -> composants reels
1. `Header_Navigation`
- Cible: `src/pages/index.astro` + `src/layouts/BaseLayout.astro`
- Eléments:
- nav niveau 1 (labels libres)
- bus posture (niveau 2)
- status + contrast toggle
- Elements:
- marque
- nav anchors
- acces direct formation, lab, FAQ, contact
2. `Hero_Impact`
2. `Hero_Conversion`
- Cible: `src/components/sections/Hero.tsx`
- Eléments:
- hook visuel
- manifeste 3 lignes
- CTA dual rail
- Elements:
- promesse
- statut/disponibilite
- CTA contact
- fond photo + lockup
3. `Identity_Proof`
- Cible: `src/components/sections/IdentityLab.tsx` + `TrustStrip.tsx`
- Eléments:
- identité studio
- preuves rapides
3. `About_Approche`
- Cible: `src/components/sections/About.tsx`
- Elements:
- portrait
- expertise
- secteurs
- chips d'offres / familles de sujets
4. `Systems_Block`
- Cible: `FlowDiagram.tsx` + `SystemPipeline.tsx` + `About.tsx`
- Eléments:
- explication process
- architecture systeme
4. `Cases_Proof`
- Cible: `src/components/sections/CaseStudies.tsx`
- Elements:
- cas concrets
- preuve de terrain
- articulation industrie / culture / produit
5. `Production_Block`
- Cible: `Projects.tsx` + `ProjectsTimeline.tsx` + `LabNotes.tsx`
- Eléments:
- portfolio systemique
- chronologie
- protocole Intent->Result
6. `Conversion_Block`
- Cible: `TrustStrip.tsx` + `Contact.tsx`
- Eléments:
- reassurance
- contact 2 voies (LinkedIn/Malt)
7. `Footer_Knowledge`
5. `Field_Media`
- Cible: `src/pages/index.astro` + `src/styles/global.css`
- Eléments:
- liens process/stack/contact
- Elements:
- photo strip
- video strip
## 2) Mapping token -> CSS var
6. `Mission_Formats`
- Cible: `src/components/sections/GraphicSprints.tsx`
- Elements:
- 3 formats
- progression
- CTA de contact
Fichier cible: `src/styles/global.css`
7. `Faq_Trust`
- Cible: `src/components/sections/Faq.astro`
- Elements:
- details/summary
- reponse rapide aux objections
### Palette
- `--bg`, `--bg-elevated`, `--surface`, `--surface-soft`, `--surface-alt`
- `--trace-cyan`, `--trace-magenta`, `--trace-green`, `--trace-amber`
- `--electric`, `--accent`, `--signal`
- `--line`, `--line-soft`, `--line-edge`, `--line-rail`
8. `Contact_ClearTerminal`
- Cible: `src/components/sections/Contact.astro`
- Elements:
- bloc contact type minitel mais en rendition claire
- email draft
- formulaire direct
- LinkedIn
### Typographie
- display serif editorial
- body sans
- micro labels mono
9. `Footer_Knowledge`
- Cible: `src/pages/index.astro`
- Elements:
- navigation secondaire
- ressources
- contact direct
### Layout
- `site-shell` largeur max desktop
- grilles desktop/mobile (1440/390)
- rules sections `structure-grid` / `structure-cell`
## Backlog P0
- [ ] Forcer la cascade sur la DA blanche dans `BaseLayout.astro`, `site.ts`, `global.css`, `home-workbench.css`.
- [ ] Relever les derniers blocs sombres restants: `hero-bg-photo`, `photo-strip`, `video-strip`, `contact-minitel`, FAQ focus.
- [ ] Verifier la lisibilite des CTA sur blanc.
- [ ] Verifier que la home et `formation` partagent bien le meme socle visuel.
## 3) Mapping interaction -> motion rule
## 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.
- [ ] Valider preview OVH puis prod.
### Navigation
- progress line header
- etat actif sur section visible
- micro-jitter actif uniquement sur lien actif
### Sections
- reveal par bloc (opacity + translateY)
- cadence differenciee par bloc (Hero > Systems > Conversion)
### CTA
- etat hover/focus/active explicite
- primaire > secondaire visuellement
### Accessibilite motion
- `prefers-reduced-motion`: desactiver animations non essentielles
## 4) Interfaces internes a standardiser
### CTA contract
Type logique:
- `label: string`
- `href: string`
- `event: TrackEventName`
- `destination: string`
- `external?: boolean`
Usage:
- Hero, About, Projects, Contact, Trust utilisent le meme contrat.
### Proof card contract
Type logique:
- `label: string`
- `value: string`
- `priority?: "high" | "medium"`
### Timeline/LabNotes contract
Type logique:
- `date/year`
- `title`
- `category`
- `summary`
- `href/event/destination` optionnels
## 5) Gates de validation DA-01
## Backlog P2
- [ ] Supprimer les reliquats `.site-contrast-toggle` du CSS global.
- [ ] Evaluer si un vrai theme secondaire doit exister plus tard ou si le mode blanc reste la seule version publique.
- [ ] Consolider une archive explicite des anciens artefacts DA pour eviter toute reintroduction.
## Gates de validation
### Gate Build
- `npm run typecheck`
- `npm run build`
- `npm run preflight:pages`
- `npm run build:external`
- `npm run tracking:check`
### Gate UX
- ancres `#a-propos`, `#projets`, `#contact` fonctionnelles
- CTA primary/secondary lisibles
- mobile 390 sans overflow
- validation 390/768/1024/1440 conservée dans evidence
### Gate Tracking
- events declenches sans duplication
- params `event_category/event_label/destination` conformes
- Aucun panneau critique ne reste sur fond sombre.
- Mobile 390/768 sans debordement.
- CTA primary/secondary lisibles sur fond clair.
- Contact completement utilisable.
### Gate Accessibilite
- focus visible
- ordre tab coherent
- reduced-motion OK
- Focus visible sur nav, FAQ, CTA, formulaire.
- Contraste texte/fond conforme sur les composants critiques.
- `prefers-reduced-motion` conserve.
### Gate SEO
- robots/sitemap accessibles
- canonical + OG/Twitter presents
### Gate Tracking
- Aucun event legacy mort.
- Clics hero/contact/lab/linkedin/email visibles dans la dataLayer.
## 6) Ordre d’implementation recommande
### Gate Deploy
- Preview OK avant production.
- Verification live des URL et ancres.
### P0
1. Recomposer la structure de `src/pages/index.astro`
2. Harmoniser tokens/layout de `src/styles/global.css`
3. Verifier ancres core + tracking
### P1
1. Harmoniser les sections (Hero, Systems, Production, Conversion)
2. Finaliser footer knowledge/protocoles
3. QA responsive + accessibilite
### P2
1. Storybook coverage structure + sections
2. Optimisation bundle/motion
## 7) Risques et parades
1. Risque: surcharge visuelle
- Parade: matrice arbitrage DA vs conversion appliquee
2. Risque: regression tracking
- Parade: tests manuels click-by-click + check dataLayer
3. Risque: degrade mobile
- Parade: validation systematique 390/768/1024/1440
## 8) Version duale (prod immédiate + web hors GitHub)
- Production immédiate: GitHub Pages conserve la version `index.html/styles.css/script.js` pour stabilité.
- Version web hors GitHub: build Astro `dist/` prévu comme variante de long terme (non déployé pour le moment).
- Règle: aucun changement d'UI ne doit diverger sans mise à jour explicite des 2 cahiers de preuve (scope statique + scope web externe).
## 9) Definition of done DA-01
1. Structure cible implementee en code.
2. DA conforme au brief v2.2.0 (reset innovant).
3. Contrats publics preserves.
4. Tests passes et evidence mise a jour.
## 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.
docs/design-memory-2026-03-14-white-contrast.md
+53
View File
@@ -0,0 +1,53 @@
# Design Memory - White Contrast Baseline
Date: 2026-03-14
Status: active
## Decision
La version publique de L'Electron Rare repart sur une base claire, contraste blanc, par defaut.
## Pourquoi
- la homepage OVH synchronisee est la bonne base produit
- l'ancienne DA sombre et experimentale brouillait la lisibilite
- le site doit inspirer precision, methode et confiance avant de projeter un univers
- l'accessibilite et la lecture rapide gagnent avec des surfaces claires et des accents plus disciplinés
## Regles visuelles
- fonds: blanc, ivoire, creme tres legere
- texte principal: noir chaud / brun tres fonce
- accent froid: teal technique
- accent chaud: cuivre / brun signal
- panneaux: clairs, nets, ombres courtes
- pas de halo neon comme logique dominante
- pas de glitch ou scanline comme effet de signature principal
## Ce qui reste autorise
- texture subtile de trame ou de grille
- references bench / signal / PCB en couche legere
- typography mono sur certains labels et statuts
- accents rust/teal sur CTA, badges, progression et reperes
## Ce qui est interdit
- retour a la home `studio/figma`
- bouton contraste sans vraie fonctionnalite produit
- docs qui parlent encore de GitHub Pages statique comme prod active
- anchors/documentation legacy de type `#projets`
## Implementation
- runtime: `data-theme="high-contrast"` dans `src/layouts/BaseLayout.astro`
- meta navigateur claire: `themeColor` blanc dans `src/lib/site.ts`
- socle visuel: `src/styles/global.css`
- overrides DA v12: `src/styles/home-workbench.css`
## QA minimum
- nav
- hero
- about
- case studies
- media strips
- mission cards
- FAQ
- contact
- footer
- formation
- mentions legales
docs/project-master-todos.md
+58 -60
View File
@@ -1,69 +1,67 @@
# Master TODO - Electron rare site
# Master TODO - Electron Rare OVH/Astro
Date: 2026-03-02
Source of truth: this file
Updated: 2026-03-14
Source of truth: this file for execution priorities, plus the current code in `src/`
## Scope
- Site GitHub Pages (production): `index.html`, `styles.css`, `script.js`, `/lab/`
- Référence d'intégration UI/logicielle: `src/pages/index.astro`, `src/styles/global.css`, `src/components/*`
- Option web hors GitHub (en parallèle, si exigée): build Astro `dist/` publié sur autre host
- Module C interactif: `apps/lab-interactif` -> publication `lab/`
- Direction artistique active: `experimental-noise`, `electric-contrast`, `clarity-first` (reset 2026-03-02)
- Acquisition: SEO + tracking GTM/GA4 + conversion CTA
## Scope actif
- Site Astro publie sur OVH via GitHub Actions FTP.
- Preview publique sous `/preview/`, production a la racine.
- Pages actives: `/`, `/formation/`, `/mentions-legales/`, `/lab/`, `robots.txt`, `sitemap.xml`.
- Direction artistique active: `white-contrast`, claire par defaut, sans bouton de bascule public.
- Surface a maintenir: Hero, Approche, Cas concrets, photo strip, video strip, Missions, FAQ, Contact, footer.
## Decision Log DA (2026-03-02)
- [x] Avancée majeure: refonte UI complète validée en mode DA-00 sur `index.html` (scope web visible actuel).
- [x] Avancée majeure: plan DA (wireflow + composants + tokens) consolidé.
- [ ] Décision d'exploitation: maintien de la version GitHub Pages comme production immédiate, préparation d'un build Astro externe pour version web hors GitHub.
- [ ] Action nécessaire: aligner chaque évolution UI avec un `artifact` d'avancement daté (captures + preuve QA) pour éviter la dérive.
## Verites de reference
- Structure de page: `src/pages/index.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`
- Tracking actif: `src/lib/tracking.ts` + emitters inline dans `src/layouts/BaseLayout.astro`
## Base DA / architecture
- [x] Brief DA v2.2.0 verrouille le reset innovant (`notes-interne/creative-direction-brief.md`)
- [x] Home reconstruite de zero en statique
- [x] Top 3 GitHub en section Projets + bouton "Voir plus" en section dediee
- [x] Module C "Lab interactif" implemente (React Router)
- [x] Routing lab adapte GitHub Pages (HashRouter)
## Etat courant
- [x] Homepage OVH re-synchronisee dans le repo Astro.
- [x] Ancienne variante `studio/figma` sortie du runtime actif.
- [x] Bouton contraste retire du markup.
- [x] Theme blanc contraste force par defaut dans le layout source.
- [ ] White-contrast pass verifiee visuellement sur preview.
- [ ] White-contrast pass verifiee visuellement sur production.
## QA P1 (2026-03-02)
- [x] Passe visuelle responsive 390/768/1024/1440 (home + lab)
- [x] Captures + rapport QA archives (`artifacts/qa-test/2026-03-02/responsive-p1/`)
- [x] Storybook build coverage P2 execute (`npm run storybook:build`)
- [x] Checklist prod locale GA4/Search Console preparee
## P0 - Bloc de sortie immediate
- [ ] 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 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.
- [ ] Deployer le preview OVH et valider `https://www.lelectronrare.fr/preview/`.
## Tracking / GA4
- [x] Contrat hero conserve (`cta_hero_projets`, `cta_hero_contact`, `cta_hero_profile`)
- [x] Events GitHub dedies ajoutes
- [x] Compat legacy preservee (`data-track-legacy`)
- [ ] Validation GA4 Realtime sur environnement public
- [ ] Validation GA4 DebugView (params conformes)
- [ ] Definition conversion GA4 primaire LinkedIn / secondaire Malt
## P1 - Validation live
- [ ] Si preview valide, deployer la production a la racine.
- [ ] Verifier en live les routes `/`, `/formation/`, `/mentions-legales/`, `/lab/`, `/robots.txt`, `/sitemap.xml`.
- [ ] 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`.
## SEO / Search Console
- [x] `robots.txt` racine
- [x] `sitemap.xml` racine maj 2026-03-02
- [x] Sitemap inclut `/` et `/lab/`
- [x] Canonical + OG + Twitter sur home
- [ ] Validation Search Console (propriete + soumission sitemap + indexation)
- [ ] Validation previews sociaux (LinkedIn/Facebook)
## P2 - Tracking / SEO
- [ ] Valider GA4 Realtime et DebugView pour les events actuels:
- `cta_hero_contact`
- `outbound_linkedin_contact`
- `outbound_email_contact`
- `outbound_github_contact`
- `cta_lab_interactif_open`
- [ ] Verifier les events auto:
- `experiment_variant_exposed`
- `engagement_scroll_depth`
- `engagement_section_view`
- `cwv_metric`
- [ ] Re-verifier canonical, OG, Twitter, robots, sitemap et `theme-color`.
- [ ] Soumettre ou recontroler Search Console sur la base de la prod actuelle OVH.
## Roadmap web hors GitHub (optionnelle)
- [ ] Générer `dist/` Astro à partir du même contenu (`npm run build`) pour maquette/landing dédiée hors GitHub Pages.
- [x] Ajouter un plan de déploiement alternatif (Netlify/Vercel/custom) sans toucher au contrat d'ancrage (`#a-propos`, `#projets`, `#contact`) : configs `vercel.json` et `netlify.toml` + script `build:external`.
- [ ] Documenter la divergence minimale: route, headers, et variables d'environnement GA/SEO.
- [ ] Valider que le contrat de tracking reste identique entre les deux versions (labels, destinations, event_category).
## P3 - Nettoyage et consolidation
- [ ] Supprimer les blocs CSS morts `.site-contrast-toggle` encore presents dans `src/styles/global.css`.
- [ ] Nettoyer les docs qui parlent encore de GitHub Pages static root, `#projets`, Malt, ou du toggle contraste.
- [ ] Mesurer LCP et budget media de la variante blanche en conditions reelles.
- [ ] Archiver les plans anterieurs devenus purement historiques.
## Deploy GitHub Pages
- [x] Workflow migre: static site + lab (`.github/workflows/deploy-pages.yml`)
- [x] Doc deploy mise a jour (`docs/github-pages-deploy.md`)
- [ ] Trigger deploy depuis `main` et verification URL publique
- [x] Exécuter `docs/dual-deployment-execution-plan.md` pour valider le mode “GitHub Pages + web externe” si décision produit.
- [x] Captures QA planifiées 390/768/1024/1440: `artifacts/qa-test/2026-03-02/responsive-p1/`.
- [x] Preflight local complété (2026-03-02): `npm run preflight:pages`
- [x] Build Astro vérifié (2026-03-02): `npm run build`
- [ ] Déploiement GH Pages post-lock (validation public URL + ancres + OG/robots/sitemap)
- [x] Déploiement OVH mutualise en SFTP valide (2026-03-02): `npm run deploy:web:sftp` + verification remote bundles (`index.html`, `Hero.D8ngAjmO.js`, `index.DrEuSoRX.css`)
## Rituels de verification
- Avant merge: `npm run preflight:pages`
- A chaque pass majeur: mise a jour `artifacts/qa-test/<date>/...` + `evidence/manifest.json`
- Toute variation DA: mise a jour du brief avant patch UI
## Regles de pilotage
- Preview d'abord, production ensuite.
- Toute doc active doit parler du site Astro/OVH actuel, pas d'une ancienne homepage statique.
- Les ancres de reference sont celles du code actuel, pas `#projets`.
- Le theme de reference est clair/white-contrast par defaut.