Landing : capture de l'arbre de démo sous le bouton « Entrer dans la démo »

Avant le chargement de l'iframe, le bloc #demo n'affichait qu'un fond papier
et le bouton n'apparaissait qu'une fois la démo chargée. Une capture fixe de
l'arbre (FR/EN, grand écran et mobile, WebP 29 à 69 Ko, même origine) sert
maintenant de fond, et le bouton est visible dès l'arrivée sur la section.
Le clic garde le même comportement ; s'il arrive avant la fin du chargement,
le symbole de chargement s'affiche par-dessus la capture.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

landing/src/App.jsx

@@ -839,10 +839,24 @@ function InlineDemo({ t, locale }) {
               ? { minHeight: '66vh', height: '88vw', maxHeight: '780px' }
               : { minHeight: '52vh', height: '56vw', maxHeight: '720px' }}
           >
+            {/* Capture fixe de l'arbre de démo sous l'iframe : le bloc montre le vrai arbre avant le chargement,
+                aux captures d'écran comme aux visiteurs. Refaite depuis app.parenthese.io/?embed si l'arbre change. */}
+            <picture className="demo-poster">
+              <source media="(max-width: 768px)" srcSet={`/demo/arbre-demo-${locale}-mobile.webp`} width="712" height="1110" />
+              <img
+                src={`/demo/arbre-demo-${locale}-large.webp`}
+                alt={loaded ? '' : t.demo.poster}
+                width="2204"
+                height="1436"
+                loading="lazy"
+                decoding="async"
+              />
+            </picture>
+
             {!loaded && (
-              <div className="demo-wait" role="status">
-                <PzMark state={shouldLoad ? 'loading' : 'rest'} />
-                <span className={shouldLoad ? 'sr-only' : undefined}>{shouldLoad ? t.demo.loading : t.demo.idle}</span>
+              <div className={active ? 'demo-wait is-on' : 'demo-wait'} role="status">
+                {active && <PzMark state="loading" />}
+                <span className="sr-only">{shouldLoad ? t.demo.loading : t.demo.idle}</span>
               </div>
             )}
 
@@ -864,7 +878,7 @@ function InlineDemo({ t, locale }) {
               }}
             />
 
-            {!active && loaded && (
+            {!active && (
               <div
                 role="button"
                 tabIndex={0}

landing/src/i18n.js

@@ -59,6 +59,7 @@ export const COPY = {
       idle: 'Démo interactive',
       frameTitle: 'Démo Parenthèse',
       enter: 'Entrer dans la démo',
+      poster: "Aperçu de l'arbre de démonstration, trois générations d'une famille avec leurs photos",
     },
     who: {
       eyebrow: 'Pour qui',
@@ -167,6 +168,7 @@ export const COPY = {
       idle: 'Interactive demo',
       frameTitle: 'Parenthèse demo',
       enter: 'Enter the demo',
+      poster: 'Preview of the demo tree, three generations of a family with their photos',
     },
     who: {
       eyebrow: "Who it's for",

landing/src/index.css

@@ -155,7 +155,11 @@ html.logo-intro .lk-nom { animation: lk-nom 700ms var(--ease-out) 380ms both; }
 .sec-demo .head .t-d2 { color: #fff; }
 .sec-demo .head .lede { color: rgba(255, 255, 255, .92); }
 .demo-frame { position: relative; max-width: 1120px; width: 100%; margin-inline: auto; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--trait-l); background: var(--papier); }
-.demo-wait { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--papier); font: 500 14px var(--sans); color: var(--doux); }
+.demo-poster { position: absolute; inset: 0; z-index: 0; }
+.demo-poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
+.demo-frame iframe { position: relative; z-index: 1; }
+.demo-wait { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 14px; pointer-events: none; font: 500 14px var(--sans); color: var(--doux); }
+.demo-wait.is-on { background: rgba(251,250,247,.72); }
 .demo-wait .pz-mark { width: 56px; height: auto; }
 
 /* le rond qui attend : il se divise en trois points qui respirent (motion validée le 25/09/2026) */