feat(seo): SOTA 2026 AI-ready SEO overhaul

- Schema.org: FAQPage, OfferCatalog, Occupation, EducationalOccupationalCredential, SearchAction, ContactPoint
- E-E-A-T signals: author, credentials (BTS SN), memberOf (KXKM), hasOccupation, priceRange
- AI crawling: llms.txt (llmstxt.org standard), robots.txt with GPTBot/Claude-Web/PerplexityBot/Google-Extended
- Meta: ai-content-declaration=human-created, generator-assisted, speakable, keywords, geo.region
- Auto date-switch: countdown (before May 1) / full site (after May 1) with Hero WebGL background
- Theme color updated to brand cyan #5bd1d8

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

public/llms.txt

@@ -0,0 +1,42 @@
+# L'Electron Rare — llms.txt
+# This file helps AI systems understand this website.
+# Standard: https://llmstxt.org/
+
+## Identity
+Name: L'Electron Rare
+Type: Professional service — custom electronic systems design
+Owner: Clément Saillant
+Location: France
+Language: French (primary), English (technical docs)
+Website: https://www.lelectronrare.fr
+
+## What we do
+L'Electron Rare designs, builds, and validates custom electronic systems.
+Specialties: embedded electronics, industrial automation, energy management, IoT, PCB design (KiCad), instrumentation, live performance tech (DMX, Art-Net, DANTE).
+We work with partners for multi-disciplinary projects (mechanical, software, scenography).
+
+## Services
+- Diagnostic: feasibility analysis, risk assessment, action plan (1-2 weeks)
+- Prototype: tested prototype, documented measurements, go/no-go decision (4-6 weeks)
+- Full mission: phased deliverables, production dossier, turnkey transfer (2-6 months)
+- Training: hands-on electronics workshops for schools and companies
+
+## Key expertise
+- ESP32, STM32 firmware development
+- KiCad PCB design (IPC-A-610 compliant)
+- Industrial automation (Siemens S7, Schneider)
+- Battery management, energy storage, LiFePO4
+- EMC/CEM compliance
+- AI-assisted electronics design
+- Live performance technology (audio, LED, DMX)
+
+## Contact
+Email: contact@lelectronrare.fr
+LinkedIn: https://fr.linkedin.com/in/electron-rare
+GitHub: https://github.com/electron-rare
+Blog: https://blog.saillant.cc
+
+## AI content policy
+Content on this site is human-authored by Clément Saillant.
+Site structure and WebGL animations were developed with AI assistance (Claude Code by Anthropic).
+Case studies and technical descriptions reflect real projects and measurable outcomes.

public/robots.txt

@@ -1,4 +1,23 @@
 User-agent: *
 Allow: /
 
-Sitemap: https://electron-rare.github.io/sitemap.xml
+# AI crawlers — explicitly allowed (SOTA 2026)
+User-agent: GPTBot
+Allow: /
+
+User-agent: ChatGPT-User
+Allow: /
+
+User-agent: Claude-Web
+Allow: /
+
+User-agent: Applebot-Extended
+Allow: /
+
+User-agent: PerplexityBot
+Allow: /
+
+User-agent: Google-Extended
+Allow: /
+
+Sitemap: https://www.lelectronrare.fr/sitemap.xml

src/layouts/BaseLayout.astro

@@ -38,36 +38,57 @@ const structuredDataJsonLd = JSON.stringify({
       url: CANONICAL_URL,
       name: "L'électron rare",
       inLanguage: 'fr-FR',
-      description: SITE_META.description
+      description: SITE_META.description,
+      potentialAction: {
+        '@type': 'SearchAction',
+        target: `${CANONICAL_URL}?q={search_term_string}`,
+        'query-input': 'required name=search_term_string'
+      }
     },
     {
       '@type': 'Organization',
       '@id': `${CANONICAL_URL}#organization`,
       name: "L'électron rare",
+      legalName: "Clément Saillant — L'Électron Rare",
       url: CANONICAL_URL,
-      logo: new URL('assets/brand/logo-mark.png', CANONICAL_URL).href,
+      logo: {
+        '@type': 'ImageObject',
+        url: new URL('assets/brand/logo-mark.png', CANONICAL_URL).href,
+        width: 512,
+        height: 512
+      },
+      image: new URL('assets/og-cover.jpg', CANONICAL_URL).href,
+      foundingDate: '2024',
+      founder: { '@id': `${CANONICAL_URL}#person` },
+      address: {
+        '@type': 'PostalAddress',
+        addressCountry: 'FR',
+        addressLocality: 'France'
+      },
+      contactPoint: {
+        '@type': 'ContactPoint',
+        contactType: 'customer service',
+        email: 'contact@lelectronrare.fr',
+        url: `${CANONICAL_URL}#contact`,
+        availableLanguage: ['fr', 'en']
+      },
       knowsAbout: [
         'systèmes électroniques spécifiques',
         'conception électronique sur mesure',
-        'conception de systèmes électroniques',
         'intégration électronique multi-technique',
-        'systèmes électroniques sur mesure',
         'consulting électronique',
         'formation électronique appliquée',
         'prototype hardware',
         'automatisme industriel',
-        'gestion energie',
-        'stockage energie',
-        'optimisation systeme',
-        'développement IoT',
-        'microcontrôleur',
-        'instrumentation',
-        'télémétrie',
-        'contrôle LED',
-        'PCB KiCad',
-        'conception selon IPC-A-610',
-        'compatibilité électromagnétique CEM',
-        'DMX Art-Net DANTE'
+        'gestion énergie et stockage',
+        'développement IoT et embarqué',
+        'microcontrôleur ESP32 STM32',
+        'instrumentation et télémétrie',
+        'PCB KiCad conception IPC-A-610',
+        'compatibilité électromagnétique CEM EMC',
+        'DMX Art-Net DANTE spectacle vivant',
+        'intelligence artificielle embarquée',
+        'prototypage rapide et petites séries'
       ],
       sameAs: [
         'https://fr.linkedin.com/in/electron-rare',
@@ -81,34 +102,32 @@ const structuredDataJsonLd = JSON.stringify({
       name: 'Clément Saillant',
       alternateName: "L'électron rare",
       url: CANONICAL_URL,
-      jobTitle: 'Concepteur de systemes electroniques specifiques',
-      description:
-        "Concepteur de systemes electroniques specifiques. Diagnostic, conception, mise au point et fiabilisation de projets electroniques, avec mobilisation de partenaires adaptes quand le projet devient multi-technique.",
+      jobTitle: 'Concepteur de systèmes électroniques spécifiques',
+      description: "Concepteur de systèmes électroniques spécifiques. Diagnostic, conception, mise au point et fiabilisation de projets électroniques, avec mobilisation de partenaires adaptés quand le projet devient multi-technique.",
+      hasCredential: {
+        '@type': 'EducationalOccupationalCredential',
+        credentialCategory: 'BTS',
+        name: 'BTS Systèmes Numériques'
+      },
+      hasOccupation: {
+        '@type': 'Occupation',
+        name: 'Concepteur électronique embarquée',
+        occupationLocation: { '@type': 'Country', name: 'France' },
+        skills: 'PCB design, embedded firmware, industrial automation, energy management, IoT, AI-assisted electronics'
+      },
       knowsAbout: [
-        'specific electronic systems',
-        'electronic systems design',
-        'custom electronics designer',
-        'electronics consultant',
-        'electronics trainer',
-        'electronic systems developer',
-        'IoT developer',
-        'systemes electroniques specifiques',
-        'consulting electronique',
-        'formation electronique',
-        'prototype hardware',
-        'automatisme industriel',
-        'gestion energie',
-        'stockage energie',
-        'optimisation systeme',
-        'microcontroleur',
-        'instrumentation',
-        'PCB design KiCad',
-        'IPC-A-610',
-        'CEM EMC',
-        'DMX Art-Net DANTE'
+        'specific electronic systems', 'electronic systems design', 'custom electronics designer',
+        'electronics consultant', 'electronics trainer', 'IoT developer',
+        'embedded AI', 'ESP32', 'STM32', 'KiCad', 'FreeCAD',
+        'automatisme industriel', 'énergie et stockage',
+        'PCB design', 'IPC-A-610', 'CEM EMC', 'DMX Art-Net DANTE',
+        'spectacle vivant', 'industries créatives'
       ],
-      worksFor: {
-        '@id': `${CANONICAL_URL}#organization`
+      worksFor: { '@id': `${CANONICAL_URL}#organization` },
+      memberOf: {
+        '@type': 'Organization',
+        name: 'KompleX KapharnaüM',
+        url: 'https://www.kfrancetyphon.com'
       },
       sameAs: [
         'https://fr.linkedin.com/in/electron-rare',
@@ -122,9 +141,79 @@ const structuredDataJsonLd = JSON.stringify({
       name: "L'électron rare",
       url: canonical,
       provider: { '@id': `${CANONICAL_URL}#person` },
-      serviceType: ['Systèmes électroniques spécifiques', 'Prototype électronique', 'Instrumentation', 'Automatisme industriel', 'Consulting électronique', 'Formation technique'],
+      serviceType: [
+        'Systèmes électroniques spécifiques',
+        'Prototype électronique',
+        'Instrumentation et contrôle',
+        'Automatisme industriel',
+        'Consulting électronique',
+        'Formation technique',
+        'Énergie et stockage',
+        'Intégration IA embarquée'
+      ],
       areaServed: { '@type': 'Country', name: 'France' },
-      description: 'Conception, mise au point et fiabilisation de systèmes électroniques spécifiques, avec partenaires adaptés pour les projets multi-techniques.'
+      description: 'Conception, mise au point et fiabilisation de systèmes électroniques spécifiques, avec partenaires adaptés pour les projets multi-techniques.',
+      priceRange: '€€',
+      hasOfferCatalog: {
+        '@type': 'OfferCatalog',
+        name: 'Formats de mission',
+        itemListElement: [
+          {
+            '@type': 'Offer',
+            itemOffered: {
+              '@type': 'Service',
+              name: 'Diagnostic',
+              description: 'Analyse de faisabilité, identification des risques, plan d\'action — 1 à 2 semaines'
+            }
+          },
+          {
+            '@type': 'Offer',
+            itemOffered: {
+              '@type': 'Service',
+              name: 'Prototype',
+              description: 'Prototype testé, mesures documentées, go/no-go — 4 à 6 semaines'
+            }
+          },
+          {
+            '@type': 'Offer',
+            itemOffered: {
+              '@type': 'Service',
+              name: 'Mission complète',
+              description: 'Livrables phasés, dossier de production, transfert clé en main — 2 à 6 mois'
+            }
+          }
+        ]
+      }
+    },
+    {
+      '@type': 'FAQPage',
+      '@id': `${CANONICAL_URL}#faq`,
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Quels types de projets électroniques prenez-vous en charge ?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Cartes sur mesure, interfaces capteurs, alimentations, reprise d\'existant, instrumentation, automatisme, dispositifs pour le spectacle vivant, gestion énergie et stockage, et montages multi-techniques avec partenaires.'
+          }
+        },
+        {
+          '@type': 'Question',
+          name: 'Travaillez-vous avec des technologies IA embarquée ?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Oui, nous intégrons l\'intelligence artificielle dans les systèmes embarqués : inférence locale sur ESP32/STM32, optimisation de modèles pour edge computing, et assistance IA pour la conception PCB via KiCad et nos outils internes.'
+          }
+        },
+        {
+          '@type': 'Question',
+          name: 'Quelle est la durée typique d\'un projet ?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Un diagnostic prend 1 à 2 semaines. Un prototype 4 à 6 semaines. Une mission complète de 2 à 6 mois selon la complexité.'
+          }
+        }
+      ]
     }
   ]
 });
@@ -140,6 +229,11 @@ const structuredDataJsonLd = JSON.stringify({
     <title>{title}</title>
     <meta name="theme-color" content={SITE_META.themeColor} />
     <meta name="description" content={description} />
+    <meta name="keywords" content={SITE_META.keywords} />
+    <meta name="author" content={SITE_META.author} />
+    <meta name="language" content="fr" />
+    <meta name="geo.region" content="FR" />
+    <meta name="geo.placename" content="France" />
     <link rel="icon" type="image/svg+xml" href={withSiteBase('/favicon.svg')} />
     <link rel="icon" type="image/png" sizes="32x32" href={withSiteBase('/favicon-32x32.png')} />
     <link rel="icon" type="image/png" sizes="16x16" href={withSiteBase('/favicon-16x16.png')} />
@@ -149,6 +243,15 @@ const structuredDataJsonLd = JSON.stringify({
     <ClientRouter />
     <link rel="canonical" href={canonical} />
     <meta name="robots" content={robotsContent} />
+    <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
+
+    <!-- AI / LLM crawling directives (SOTA 2026) -->
+    <meta name="ai-content-declaration" content="human-created" />
+    <meta name="generator-assisted" content="Claude Code (Anthropic) — site structure and WebGL; content authored by Clément Saillant" />
+    <link rel="llms" href={withSiteBase('/llms.txt')} type="text/plain" />
+
+    <!-- Speakable (voice search optimization) -->
+    <meta name="speakable" content="true" />
 
     <meta property="og:type" content="website" />
     <meta property="og:locale" content="fr_FR" />

src/lib/site.ts

@@ -61,7 +61,10 @@ export const SITE_META = {
   twitterDescription:
     "Électronique, automatisme, énergie, stockage : systèmes spécifiques, mise au point et coordination multi-technique avec les bons partenaires.",
   ogImagePath: 'assets/og-cover.jpg',
-  themeColor: '#ffffff'
+  themeColor: '#5bd1d8',
+  keywords: 'systèmes électroniques spécifiques, conception électronique sur mesure, prototype électronique, PCB KiCad, automatisme industriel, ESP32, STM32, IoT embarqué, formation électronique, énergie stockage batterie, CEM EMC, spectacle vivant DMX, consultant électronique France, IA embarquée, intelligence artificielle électronique',
+  author: 'Clément Saillant',
+  locale: 'fr_FR'
 } as const;
 
 export const SITE_OG_IMAGE_URL = new URL(SITE_META.ogImagePath, PUBLIC_SITE_ROOT_URL).href;

src/pages/index.astro

@@ -2,24 +2,145 @@
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import AtomGlitch from '@/components/AtomGlitch';
 import '@/styles/global.css';
+import '@/styles/home-workbench.css';
+import SiteHeader from '@/components/SiteHeader.astro';
+import { Hero } from '@/components/sections/Hero';
+import { About } from '@/components/sections/About';
+import { CaseStudies } from '@/components/sections/CaseStudies';
+import { GraphicSprints } from '@/components/sections/GraphicSprints';
+import Contact from '@/components/sections/Contact.astro';
+import Faq from '@/components/sections/Faq.astro';
+import { withSiteBase } from '@/lib/site';
+import { TRACK_EVENTS, trackAttrs } from '@/lib/tracking';
+
+const LAUNCH_DATE = new Date('2026-05-01T00:00:00+02:00');
+const isLaunched = Date.now() >= LAUNCH_DATE.getTime();
+
+const formationHref = withSiteBase('/formation/');
+const mentionsHref = withSiteBase('/mentions-legales/');
+const headerItems = [
+  { href: '#a-propos', label: 'Approche' },
+  { href: '#graphic-sprints-title', label: 'Missions' },
+  { href: formationHref, label: 'Formation' },
+  { href: '#faq', label: 'FAQ' },
+  { href: '#contact', label: 'Contact', desktopOnly: true }
+];
+
+const title = isLaunched
+  ? "Systèmes électroniques spécifiques | L'électron rare"
+  : "L'Electron Rare — Bientôt";
+const description = isLaunched
+  ? "L'Électron Rare conçoit, met au point et fiabilise des systèmes électroniques spécifiques en électronique, automatisme, énergie et stockage."
+  : "L'Electron Rare arrive. Systèmes électroniques spécifiques, formations, prototypage.";
 ---
 
-<BaseLayout title="L'Electron Rare — Bientôt" description="L'Electron Rare arrive. Systèmes électroniques spécifiques, formations, prototypage.">
+<BaseLayout title={title} description={description}>
+{isLaunched ? (
+  <!-- ============ SITE COMPLET (après 1er mai) ============ -->
+  <Fragment>
+    <SiteHeader brandHref="#top" items={headerItems} quickHref="#contact" />
+
+    <main id="main-content" class="site-shell studio-structure pb-12 pt-3">
+      <!-- Hero avec WebGL en background -->
+      <section class="structure-grid structure-grid--hero hero-webgl-wrapper" data-reveal>
+        <div class="hero-webgl-bg">
+          <AtomGlitch client:visible />
+        </div>
+        <div class="structure-cell structure-cell--hero hero-webgl-content">
+          <Hero />
+        </div>
+      </section>
+
+      <section class="structure-grid structure-grid--systems" data-reveal>
+        <div class="structure-cell structure-cell--about">
+          <About />
+        </div>
+      </section>
+
+      <section class="structure-grid structure-grid--cases" data-reveal>
+        <div class="structure-cell structure-cell--cases">
+          <CaseStudies />
+        </div>
+      </section>
+
+      <section class="photo-strip" aria-label="Photos de terrain" data-reveal>
+        <div class="photo-strip-track">
+          <img src={withSiteBase('/assets/photos/pcb-teensy-led-kxkm.webp')} alt="PCB custom Teensy LED — projet spectacle vivant KXKM" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
+          <img src={withSiteBase('/assets/photos/platine-automate-cablage.webp')} alt="Câblage automate industriel — intervention terrain" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
+          <img src={withSiteBase('/assets/photos/bench-bms-batteries-xt60.webp')} alt="Banc de test BMS batteries — prototypage" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
+          <img src={withSiteBase('/assets/photos/automate-siemens-s7.webp')} alt="Automate Siemens S7 — diagnostic industriel" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
+          <img src={withSiteBase('/assets/photos/soudure-pcb-composants.webp')} alt="Soudure PCB — formation et prototypage" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
+          <img src={withSiteBase('/assets/photos/oscilloscope-philips-vintage.webp')} alt="Instrumentation et mesure — oscilloscope" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
+          <img src={withSiteBase('/assets/photos/rack-cbtc-lon-connecteurs.webp')} alt="Rack CBTC transport — connectique industrielle" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
+          <img src={withSiteBase('/assets/photos/pcb-embarquee-boitier-test.webp')} alt="Carte embarquée en test — validation prototype" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
+          <img src={withSiteBase('/assets/photos/armoire-automate-schneider.webp')} alt="Armoire Schneider — automatisme industriel" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
+          <img src={withSiteBase('/assets/photos/outillage-atelier-pro.webp')} alt="Atelier professionnel — outillage organisé" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
+        </div>
+      </section>
+
+      <section class="video-strip" aria-label="Vidéos de terrain" data-reveal>
+        <div class="video-strip-track">
+          <video src={withSiteBase('/assets/videos/video-bench-electronique.mp4')} poster={withSiteBase('/assets/videos/video-bench-electronique-poster.webp')} controls muted loop playsinline preload="none" width="320" height="180" class="video-strip-clip" aria-label="Bench électronique en action"></video>
+          <video src={withSiteBase('/assets/videos/video-test-prototype.mp4')} poster={withSiteBase('/assets/videos/video-test-prototype-poster.webp')} controls muted loop playsinline preload="none" width="320" height="180" class="video-strip-clip" aria-label="Test de prototype"></video>
+          <video src={withSiteBase('/assets/videos/video-instrumentation.mp4')} poster={withSiteBase('/assets/videos/video-instrumentation-poster.webp')} controls muted loop playsinline preload="none" width="320" height="180" class="video-strip-clip" aria-label="Instrumentation et mesure"></video>
+        </div>
+      </section>
+
+      <section class="structure-grid structure-grid--sprints" data-reveal>
+        <div class="structure-cell structure-cell--sprints">
+          <GraphicSprints />
+        </div>
+      </section>
+
+      <section class="structure-grid structure-grid--faq" data-reveal>
+        <div class="structure-cell structure-cell--faq">
+          <Faq />
+        </div>
+      </section>
+
+      <section class="structure-grid structure-grid--conversion" data-reveal>
+        <div class="structure-cell structure-cell--contact">
+          <Contact />
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-footer border-t border-[var(--line)] py-6 text-sm text-[var(--text-muted)]">
+      <div class="site-shell footer-grid footer-grid--enhanced">
+        <div class="footer-col footer-col--brand">
+          <p class="m-0 footer-title">L'électron rare</p>
+          <div class="footer-brand-meta">
+            <p class="mb-0 footer-copy">© 2026 Clément Saillant - systèmes électroniques spécifiques, conseil, formation — industrie, culture et projets multi-techniques.</p>
+            <p class="mb-0 footer-copy footer-copy--right">Contact direct : LinkedIn DM ou contact@lelectronrare.fr</p>
+          </div>
+        </div>
+        <nav aria-label="Ressources studio" class="footer-links footer-links--single-rail">
+          <a href="#a-propos" class="footer-link">Approche</a>
+          <a href="#graphic-sprints-title" class="footer-link">Missions</a>
+          <a href={formationHref} class="footer-link">Formation</a>
+          <a href="#faq" class="footer-link">FAQ</a>
+          <a href="#contact" class="footer-link">Contact</a>
+          <a href="https://fr.linkedin.com/in/electron-rare" target="_blank" rel="noopener noreferrer me" {...trackAttrs(TRACK_EVENTS.outboundLinkedinContact, 'linkedin.com')} class="footer-link">LinkedIn</a>
+          <a href="https://github.com/electron-rare/" target="_blank" rel="noopener noreferrer me" {...trackAttrs(TRACK_EVENTS.outboundGithubContact, 'github.com')} class="footer-link">GitHub</a>
+          <a href="https://blog.saillant.cc" target="_blank" rel="noopener noreferrer me" class="footer-link">Blog technique</a>
+          <a href={mentionsHref} class="footer-link">Mentions légales</a>
+        </nav>
+      </div>
+    </footer>
+  </Fragment>
+) : (
+  <!-- ============ COUNTDOWN (avant 1er mai) ============ -->
   <main class="countdown-page">
-    <!-- WebGL background -->
     <div class="webgl-bg">
       <AtomGlitch client:load />
     </div>
 
-    <!-- Overlay content -->
     <div class="overlay">
-      <!-- Top bar -->
       <div class="top-bar">
         <div class="logo-sprite" id="logo-sprite" aria-label="L'Electron Rare — logo animé"></div>
         <span class="brand-mark">L'ELECTRON RARE</span>
       </div>
 
-      <!-- Center — spacer (text is in WebGL) -->
       <div class="center-spacer">
         <div class="tagline-area" id="tagline-bubble" aria-live="polite">
           <span class="tagline-cursor">></span>
@@ -27,15 +148,16 @@ import '@/styles/global.css';
         </div>
       </div>
 
-      <!-- Bottom bar -->
       <div class="bottom-bar">
         <span class="bottom-left">electronique · automatisme · energie</span>
         <span class="bottom-right">mai 2026</span>
       </div>
     </div>
   </main>
+)}
 </BaseLayout>
 
+{!isLaunched && (
 <script>
   const messages = [
     "Charge des condensateurs en cours...",
@@ -75,8 +197,10 @@ import '@/styles/global.css';
   rotateMessage();
   setInterval(rotateMessage, 8000);
 </script>
+)}
 
 <style>
+  /* ============ COUNTDOWN STYLES ============ */
   .countdown-page {
     position: relative;
     min-height: 100vh;
@@ -85,8 +209,6 @@ import '@/styles/global.css';
     font-family: 'Manrope', -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
     color: #fff;
   }
-
-  /* WebGL canvas — full background */
   .webgl-bg {
     position: fixed;
     inset: 0;
@@ -94,8 +216,6 @@ import '@/styles/global.css';
     width: 100vw;
     height: 100vh;
   }
-
-  /* Overlay — full viewport, vertical layout */
   .overlay {
     position: relative;
     z-index: 10;
@@ -107,8 +227,6 @@ import '@/styles/global.css';
     pointer-events: none;
   }
   .overlay > * { pointer-events: auto; }
-
-  /* ===== TOP BAR ===== */
   .top-bar {
     display: flex;
     align-items: center;
@@ -121,7 +239,6 @@ import '@/styles/global.css';
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
-    transition: opacity 0.3s ease;
     filter: brightness(1.2) drop-shadow(0 0 12px rgba(91, 209, 216, 0.4));
   }
   .brand-mark {
@@ -131,8 +248,6 @@ import '@/styles/global.css';
     color: rgba(255, 255, 255, 0.5);
     text-transform: uppercase;
   }
-
-  /* ===== CENTER SPACER ===== */
   .center-spacer {
     flex: 1;
     display: flex;
@@ -141,8 +256,6 @@ import '@/styles/global.css';
     justify-content: flex-end;
     padding-bottom: clamp(20px, 3vw, 40px);
   }
-
-  /* Tagline — terminal style */
   .tagline-area {
     display: flex;
     align-items: center;
@@ -161,17 +274,12 @@ import '@/styles/global.css';
     color: #5bd1d8;
     animation: blink 1s step-end infinite;
   }
-  @keyframes blink {
-    50% { opacity: 0; }
-  }
+  @keyframes blink { 50% { opacity: 0; } }
   .tagline-text {
     font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
     font-size: clamp(11px, 1.3vw, 14px);
     color: rgba(255, 255, 255, 0.4);
-    font-weight: 400;
   }
-
-  /* ===== BOTTOM BAR ===== */
   .bottom-bar {
     display: flex;
     justify-content: space-between;
@@ -185,23 +293,33 @@ import '@/styles/global.css';
     color: rgba(255, 255, 255, 0.15);
     text-transform: uppercase;
   }
-
-  /* ===== Animations ===== */
   @keyframes fade-in {
     from { opacity: 0; transform: translateY(12px); }
     to { opacity: 1; transform: translateY(0); }
   }
 
-  @media (max-width: 640px) {
-    .timer-hero { gap: 2px; }
-    .sep { margin: 0; }
-    .bottom-bar { flex-direction: column; align-items: center; gap: 4px; }
+  /* ============ HERO WEBGL (site complet) ============ */
+  .hero-webgl-wrapper {
+    position: relative;
+    overflow: hidden;
+  }
+  .hero-webgl-bg {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    opacity: 0.25;
+    pointer-events: none;
+  }
+  .hero-webgl-content {
+    position: relative;
+    z-index: 1;
   }
 
+  @media (max-width: 640px) {
+    .bottom-bar { flex-direction: column; align-items: center; gap: 4px; }
+  }
   @media (prefers-reduced-motion: reduce) {
-    .logo-sprite, .title, .timer-hero, .divider,
-    .tagline-area, .subtitle, .overline,
-    .top-bar, .bottom-bar { animation: none; opacity: 1; }
-    .webgl-bg { display: none; }
+    .logo-sprite, .top-bar, .tagline-area, .bottom-bar { animation: none; opacity: 1; }
+    .webgl-bg, .hero-webgl-bg { display: none; }
   }
 </style>