feat(ui): refine hero oscilloscope art direction

docs/EXECUTION-IMMÉDIATE-2026-03-02.md

@@ -30,9 +30,21 @@ Fichiers cle:
 - `src/pages/formation.astro`
 - `src/pages/mentions-legales.astro`
 
-### 2. Verifier visuellement le preview OVH
+### 2. Verifier le hero blanc reellement servie
+Action:
+- confirmer que le hero utilise un vrai visuel oscilloscope
+- verifier qu'il ne replonge pas dans une photo d'atelier large ou une texture legacy
+- controler le contraste titre / copy / CTA avec la nouvelle image
+
+Fichiers cle:
+- `src/components/sections/Hero.tsx`
+- `src/styles/global.css`
+- `src/styles/home-workbench.css`
+
+### 3. Verifier visuellement le preview OVH
 Action:
 - controler la top bar sur mobile reel
+- controler le hero oscilloscope sur un vrai navigateur
 - verifier qu'elle reste compacte fermee
 - verifier que le menu est lisible et stable ouvert
 
@@ -40,7 +52,7 @@ Etat:
 - preview top bar publie et valide publiquement via GitHub Actions `23095540371`
 - preview repositionne et purge du lab public valide publiquement via GitHub Actions `23098262445`
 
-### 3. Verifier la production reellement servie
+### 4. Verifier la production reellement servie
 Action:
 - confirmer dans un navigateur humain que `www` sert bien la nouvelle home et le nouveau header
 - verifier localement avec le meme `User-Agent` que le workflow quand on utilise `curl`

docs/README.md

@@ -16,6 +16,10 @@ Repo: `/home/zacus/electron-rare-preview-ovh`
   - familles visibles: electronique, automatisme, energie, stockage, optimisation
   - l'embarque reste une competence, pas le titre principal
   - les projets multi-techniques s'appuient sur les partenaires adaptes
+- Hero actif:
+  - titre: `Systemes electroniques specifiques, du besoin au livrable fiable`
+  - fond: oscilloscope en plan rapproche, pas atelier large ni texture carnet legacy
+  - surcouches: white-contrast propres, lisibles, sans retour a l'imaginaire `studio/figma`
 
 ## Lire dans cet ordre
 

docs/SPRINT-PLAYBOOK-2026-03-02.md

@@ -34,6 +34,7 @@ PUBLIC_SITE_URL=https://www.lelectronrare.fr/preview/ npm run build:external
 
 ### A2 - Zones a verifier dans le build
 - top bar desktop/mobile et hero
+- hero oscilloscope: cadrage, contraste, lisibilite CTA
 - approche et cas concrets
 - photo strip et video strip
 - formats de mission
@@ -78,6 +79,7 @@ curl -fsSI -A 'electron-rare-gh-verify/1.0' https://www.lelectronrare.fr/preview
 - white-contrast preview valide: `23094884980`
 - top bar mobile preview validee publiquement: `23095540371`
 - preview repositionne electronique/automatisme/energie et purge du lab public: `23098262445`
+- hero actif attendu: vrai oscilloscope en fond, sans texture carnet legacy
 
 ## Sprint C - Production
 

docs/da-01-implementation-backlog.md

@@ -50,6 +50,7 @@ Consolider la DA actuelle en version claire, contraste blanc, sans reintroduire
   - familles de competence visibles
   - CTA contact
   - fond photo + lockup
+  - fond hero sur vrai oscilloscope, pas photo d'atelier trop large
 
 3. `About_Approche`
 - Cible: `src/components/sections/About.tsx`
@@ -103,6 +104,7 @@ 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] Recaler le hero sur une image d'oscilloscope credible pour la promesse technique, avec overlays blancs propres.
 - [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, `formation` et `mentions-legales` partagent bien le meme header et le meme socle visuel en preview live.

docs/design-memory-2026-03-14-white-contrast.md

@@ -28,6 +28,18 @@ Le positionnement public de reference devient : systemes electroniques specifiqu
 - typography mono sur certains labels et statuts
 - accents rust/teal sur CTA, badges, progression et reperes
 
+## Hero actif
+- eyebrow: `Electronique · automatisme · energie · optimisation`
+- titre: `Systemes electroniques specifiques, du besoin au livrable fiable`
+- sous-ligne: `electronique · automatisme · energie`
+- fond image: oscilloscope en plan rapproche, lecture waveform / interface de mesure
+- cadrage: image utile a droite, pas atelier large illisible
+- surcouches: gradients clairs et accents teal/rust tres legers
+- interdit:
+  - texture carnet legacy sur le panneau hero blanc
+  - photo d'atelier trop large ou trop generique
+  - overlays qui salissent la lecture du titre ou du CTA
+
 ## Regles header 2026
 - desktop: navigation inline, stable, sans bruit inutile
 - mobile: header compact, une seule ligne utile a l'ouverture de page
@@ -65,6 +77,8 @@ Le positionnement public de reference devient : systemes electroniques specifiqu
 - production republee avec la top bar mobile via GitHub Actions `23096174775`
 - preview republie avec le positionnement electronique/automatisme/energie/stockage/optimisation via `23098262445`
 - production republiee avec le meme positionnement via `23098335508`
+- hero blanc recadre sur une vraie image d'oscilloscope
+- ancienne texture `hero-carnet-labo-open-v2` retiree du hero actif en high-contrast
 - le lab n'est plus publie sur preview ni sur production (`404` sur `/preview/lab/` et `/lab/`)
 - verification locale reproductible avec le `User-Agent` du workflow
 - controle navigateur humain encore requis pour la validation UX finale

docs/project-master-todos.md

@@ -39,6 +39,7 @@ Source of truth: this file for execution priorities, plus [docs/README.md](./REA
 - [x] Preview OVH republie avec le positionnement `electronique · automatisme · energie · stockage · optimisation` (`23098262445`).
 - [x] Production OVH republiee avec le meme positionnement (`23098335508`).
 - [x] `https://www.lelectronrare.fr/lab/` et `https://www.lelectronrare.fr/preview/lab/` repondent maintenant `404`.
+- [x] Le hero blanc utilise maintenant un vrai visuel oscilloscope, avec recadrage et overlays recales pour la DA claire.
 - [x] `docs/README.md` cree comme point d'entree et source de verite documentaire.
 - [x] Runbooks et plans legacy les plus confus recales en mode historique ou remplaces par des versions actives.
 - [x] Les gros audits et plans de transition restants sont maintenant bannieres comme historiques pour eviter les faux redemarrages.
@@ -52,7 +53,7 @@ Source of truth: this file for execution priorities, plus [docs/README.md](./REA
 ## 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: top bar mobile, hero, approche, cas clients, missions, FAQ, footer.
-- [ ] Verifier les surfaces medias: hero photo, photo strip, video strip.
+- [ ] Verifier les surfaces medias: hero oscilloscope, 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/`.
@@ -63,6 +64,7 @@ Source of truth: this file for execution priorities, plus [docs/README.md](./REA
 - [x] Re-verifier en live les routes `/`, `/formation/`, `/mentions-legales/`, `/robots.txt`, `/sitemap.xml` via le check public GitHub Actions apres redeploiement.
 - [x] Verifier que `https://www.lelectronrare.fr/lab/` ne fait plus partie de la surface publique servie.
 - [ ] Verifier l'absence de retour vers l'ancienne homepage ou d'elements sombres residuels.
+- [ ] Verifier le cadrage live du hero oscilloscope sur preview et production.
 - [ ] 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.
 - [x] Documenter la contrainte de verification locale: `curl` sans `User-Agent` specifique retourne `403` sur `www` depuis cette machine.

src/components/sections/Hero.tsx

@@ -9,7 +9,7 @@ export function Hero() {
     <section aria-labelledby="hero-title" className="section-anchor relative overflow-hidden pt-4 md:pt-6" id="top">
       <div className="hero-bg-photo" aria-hidden="true">
         <img
-          src={withSiteBase('/assets/photos/atelier-oscilloscope-bench.webp')}
+          src={withSiteBase('/assets/photos/oscilloscope-arduino-signal.webp')}
           alt=""
           width={1200}
           height={900}

src/styles/global.css

@@ -4453,31 +4453,58 @@ details[open] > .faq-question .faq-chevron::after {
   position: absolute;
   top: 0;
   right: 0;
-  width: 45%;
+  width: min(47%, 35rem);
   height: 100%;
   overflow: hidden;
   pointer-events: none;
   z-index: 0;
-  mask-image: linear-gradient(to left, rgba(0,0,0,0.18) 0%, transparent 85%);
-  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.18) 0%, transparent 85%);
+  mask-image: linear-gradient(to left, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.08) 38%, transparent 86%);
+  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.08) 38%, transparent 86%);
+}
+
+.hero-bg-photo::before,
+.hero-bg-photo::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.hero-bg-photo::before {
+  z-index: 1;
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.78) 14%, rgba(255, 255, 255, 0.22) 46%, rgba(255, 255, 255, 0.04) 72%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(244, 238, 227, 0.26));
+}
+
+.hero-bg-photo::after {
+  z-index: 2;
+  border-left: 1px solid rgba(47, 42, 37, 0.08);
+  background:
+    radial-gradient(circle at 18% 22%, rgba(26, 79, 90, 0.16), transparent 32%),
+    radial-gradient(circle at 80% 18%, rgba(140, 50, 16, 0.12), transparent 22%);
+  mix-blend-mode: multiply;
+  opacity: 0.82;
 }
 
 .hero-bg-photo img {
+  position: relative;
+  z-index: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  object-position: center 30%;
-  filter: grayscale(0.5) contrast(1.1);
+  object-position: 52% 18%;
+  filter: grayscale(0.22) contrast(1.08) brightness(0.96) saturate(0.86);
   mix-blend-mode: luminosity;
 }
 
 [data-theme="light"] .hero-bg-photo {
-  mask-image: linear-gradient(to left, rgba(0,0,0,0.12) 0%, transparent 80%);
-  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.12) 0%, transparent 80%);
+  mask-image: linear-gradient(to left, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.06) 34%, transparent 82%);
+  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.06) 34%, transparent 82%);
 }
 
 [data-theme="light"] .hero-bg-photo img {
-  filter: grayscale(0.6) contrast(1.05);
+  filter: grayscale(0.28) contrast(1.04) brightness(0.98) saturate(0.88);
 }
 
 @media (max-width: 767px) {
@@ -5050,14 +5077,14 @@ input.contact-minitel-textarea:focus {
 }
 
 :root[data-da-variant="v12"][data-theme="high-contrast"] .hero-bg-photo {
-  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0%, transparent 82%);
-  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0%, transparent 82%);
+  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.05) 36%, transparent 82%);
+  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.05) 36%, transparent 82%);
 }
 
 :root[data-da-variant="v12"][data-theme="high-contrast"] .hero-bg-photo img {
-  filter: grayscale(0.18) contrast(1.02) brightness(1.1);
+  filter: grayscale(0.04) contrast(1.06) brightness(0.97) saturate(0.88);
   mix-blend-mode: multiply;
-  opacity: 0.24;
+  opacity: 0.42;
 }
 
 :root[data-da-variant="v12"][data-theme="high-contrast"] .photo-strip-img,

src/styles/home-workbench.css

@@ -1669,17 +1669,34 @@
 
 :root[data-da-variant="v12"][data-theme="high-contrast"] .hero-panel-image::before {
   background:
-    radial-gradient(circle at top center, rgba(11, 93, 101, 0.08), transparent 36%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.88)),
-    url("/assets/da/openai/hero-carnet-labo-open-v2.webp") center / cover no-repeat;
-  opacity: 0.88;
+    radial-gradient(circle at 14% 12%, rgba(11, 93, 101, 0.1), transparent 34%),
+    radial-gradient(circle at 84% 18%, rgba(140, 50, 16, 0.08), transparent 26%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 241, 232, 0.94));
+  opacity: 1;
 }
 
 :root[data-da-variant="v12"][data-theme="high-contrast"] .hero-panel-image::after {
-  height: 6rem;
+  height: 5.5rem;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(244, 238, 227, 0.96)),
-    repeating-linear-gradient(90deg, rgba(11, 93, 101, 0.08) 0 1px, transparent 1px 14px);
+    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(244, 238, 227, 0.98)),
+    repeating-linear-gradient(90deg, rgba(11, 93, 101, 0.06) 0 1px, transparent 1px 14px);
+}
+
+:root[data-da-variant="v12"][data-theme="high-contrast"] .hero-eyebrow--image {
+  color: #2d241c;
+  border-color: rgba(47, 42, 37, 0.14);
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
+    0 10px 20px rgba(11, 10, 9, 0.05);
+}
+
+:root[data-da-variant="v12"][data-theme="high-contrast"] .figma-lab-title {
+  text-shadow: 0 12px 26px rgba(11, 10, 9, 0.05);
+}
+
+:root[data-da-variant="v12"][data-theme="high-contrast"] .hero-copy-reveal--lead {
+  max-width: 58ch;
 }
 
 :root[data-da-variant="v12"][data-theme="high-contrast"] .hero-slogan-char {