diff --git a/landing/public/demo/arbre-demo-en-large.webp b/landing/public/demo/arbre-demo-en-large.webp
new file mode 100644
index 0000000..73d5c99
Binary files /dev/null and b/landing/public/demo/arbre-demo-en-large.webp differ
diff --git a/landing/public/demo/arbre-demo-en-mobile.webp b/landing/public/demo/arbre-demo-en-mobile.webp
new file mode 100644
index 0000000..f4913a1
Binary files /dev/null and b/landing/public/demo/arbre-demo-en-mobile.webp differ
diff --git a/landing/public/demo/arbre-demo-fr-large.webp b/landing/public/demo/arbre-demo-fr-large.webp
new file mode 100644
index 0000000..80462b7
Binary files /dev/null and b/landing/public/demo/arbre-demo-fr-large.webp differ
diff --git a/landing/public/demo/arbre-demo-fr-mobile.webp b/landing/public/demo/arbre-demo-fr-mobile.webp
new file mode 100644
index 0000000..dfb4bcb
Binary files /dev/null and b/landing/public/demo/arbre-demo-fr-mobile.webp differ
diff --git a/landing/src/App.jsx b/landing/src/App.jsx
index 2f8ffb9..703bfdb 100644
--- a/landing/src/App.jsx
+++ b/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}
diff --git a/landing/src/i18n.js b/landing/src/i18n.js
index d426bbb..d708c04 100644
--- a/landing/src/i18n.js
+++ b/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",
diff --git a/landing/src/index.css b/landing/src/index.css
index 4768a34..4e3f88a 100644
--- a/landing/src/index.css
+++ b/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) */