diff --git a/docs/embed.html b/docs/embed.html
index 033b303..afc9a86 100644
--- a/docs/embed.html
+++ b/docs/embed.html
@@ -1,136 +1,285 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>iframe-flight × Vega-Lite</title>
+  <title>iframe-flight demo</title>
+
   <script type="importmap">
-    {"imports": {"iframe-flight": "https://ihatexcel.github.io/iframe-flight/iframe-flight.esm.js"}}
+  {
+    "imports": {
+      "iframe-flight": "https://ihatexcel.github.io/iframe-flight/iframe-flight.esm.js"
+    }
+  }
   </script>
+
   <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; }
-    body { font-family: system-ui, -apple-system, sans-serif; padding: 2rem; background: #fafafa; color: #18181b; }
-    h1  { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
-    .bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 24px;
+      background: #f5f5f5;
+    }
+
+    h1 {
+      margin-top: 0;
+    }
+
     button {
-      padding: 6px 16px; border-radius: 6px; border: 1px solid #e4e4e7;
-      background: #18181b; color: #fff; font-size: 13px; cursor: pointer;
+      padding: 10px 16px;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      background: #111;
+      color: white;
+      font-size: 14px;
     }
-    button:disabled { opacity: 0.35; cursor: not-allowed; }
-    #status { font-size: 12px; font-family: monospace; color: #71717a; }
+
     iframe {
-      display: block; width: 100%; height: 480px;
-      border: 1px solid #e4e4e7; border-radius: 10px;
-      background: #fff;
+      width: 100%;
+      height: 560px;
+      border: 1px solid #ccc;
+      border-radius: 12px;
+      background: white;
+      margin-top: 20px;
+    }
+
+    #status {
+      margin-top: 12px;
+      color: #555;
     }
   </style>
 </head>
+
 <body>
 
-<h1>iframe-flight × Vega-Lite — single file, no install</h1>
-
-<div class="bar">
-  <button id="btn" disabled>New snapshot</button>
-  <span id="status">Connecting…</span>
-</div>
-
-<iframe id="frame"></iframe>
-
-<script type="module">
-import { ArrowParentEmitter, tableFromArrays, tableToIPC } from 'iframe-flight';
-
-// ── Child iframe HTML — injected via srcdoc, no separate file needed ──────
-const CHILD = `<!DOCTYPE html>
-<html><head><meta charset="UTF-8">
-<script type="importmap">
-  {"imports":{"iframe-flight":"https://ihatexcel.github.io/iframe-flight/iframe-flight.esm.js"}}
-<\/script>
-<style>body{margin:0;padding:12px 16px;font-family:system-ui}<\/style>
-</head><body>
-<div id="c"></div>
-<script type="module">
-import { ArrowChildReceiver } from 'iframe-flight';
-import vegaEmbed from 'https://cdn.jsdelivr.net/npm/vega-embed@6/+esm';
-
-new ArrowChildReceiver({ allowedOrigins:['*'] }).onData(async result => {
-  const rows = [];
-  const t = result.table;
-  for (let i = 0; i < t.numRows; i++) {
-    const row = {};
-    t.schema.fields.forEach((f, ci) => { row[f.name] = t.getChildAt(ci).get(i); });
-    rows.push(row);
+  <h1>iframe-flight — Parent → iframe</h1>
+
+  <button id="sendBtn">
+    Envoyer des données Arrow
+  </button>
+
+  <div id="status"></div>
+
+  <iframe id="chartFrame"></iframe>
+
+  <script type="module">
+
+    import {
+      ArrowParentEmitter,
+      tableFromArrays,
+      tableToIPC
+    } from 'iframe-flight';
+
+    const iframe = document.getElementById('chartFrame');
+    const status = document.getElementById('status');
+
+    // ------------------------------------------------------------------
+    // HTML du child iframe
+    // ------------------------------------------------------------------
+
+    const childHtml = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+
+  <script type="importmap">
+  {
+    "imports": {
+      "iframe-flight": "https://ihatexcel.github.io/iframe-flight/iframe-flight.esm.js"
+    }
   }
-  await vegaEmbed('#c', {
-    width: 'container',
-    data: { values: rows },
-    mark: { type: 'bar', cornerRadiusEnd: 5 },
-    encoding: {
-      y: { field: 'product', type: 'nominal', sort: '-x', title: null,
-           axis: { labelFontSize: 13 } },
-      x: { field: 'revenue', type: 'quantitative', title: 'Revenue ($M)',
-           axis: { gridColor: '#f4f4f5', labelColor: '#71717a', titleColor: '#71717a' } },
-      color: { field: 'growth', type: 'quantitative', title: 'Growth %',
-               scale: { scheme: 'redyellowgreen', domain: [-25, 25] },
-               legend: { orient: 'right', format: '+.0f', labelFontSize: 10, titleFontSize: 10 } },
-      tooltip: [
-        { field: 'product' },
-        { field: 'revenue', title: 'Revenue ($M)', format: '.1f' },
-        { field: 'growth',  title: 'Growth %',     format: '+.1f' },
-        { field: 'units',   title: 'Units',         format: ',' }
-      ]
-    },
-    config: { view: { stroke: null }, background: '#fff',
-              font: 'system-ui, -apple-system, sans-serif' }
-  }, { actions: false });
-});
-<\/script>
-</body></html>`;
-
-// ── Data ──────────────────────────────────────────────────────────────────
-const PRODUCTS = ['Aurora','Beacon','Catalyst','Dynamo','Ember',
-                  'Forge','Galaxy','Helix','Ignite','Jupiter'];
-
-function snapshot() {
-  const p = PRODUCTS;
-  return tableToIPC(tableFromArrays({
-    product: p,
-    revenue: Float64Array.from(p.map(() => Math.random() * 90 + 10)),
-    growth:  Float64Array.from(p.map(() => Math.random() * 50 - 25)),
-    units:   Int32Array.from(p.map(() => Math.floor(Math.random() * 45000 + 5000))),
-  }));
-}
-
-// ── Wire-up ───────────────────────────────────────────────────────────────
-const frame  = document.getElementById('frame');
-const btn    = document.getElementById('btn');
-const status = document.getElementById('status');
-
-frame.srcdoc = CHILD;
-
-const emitter = new ArrowParentEmitter(frame, {
-  handshakeTimeout: 20000,
-  allowedOrigins: ['*'],
-});
-
-emitter
-  .onReady(() => {
-    btn.disabled = false;
-    push();
-  })
-  .onError(err => {
-    status.textContent = `❌ ${err.message}`;
-  });
-
-async function push() {
-  btn.disabled = true;
-  status.textContent = 'Sending…';
-  const ack = await emitter.send(snapshot());
-  status.textContent = `${ack.rows} rows · ${ack.processingTime}ms`;
-  btn.disabled = false;
-}
-
-btn.addEventListener('click', push);
-</script>
+  <\/script>
+
+  <style>
+    body {
+      margin: 0;
+      padding: 20px;
+      font-family: Arial, sans-serif;
+      background: white;
+    }
+
+    h2 {
+      margin-top: 0;
+    }
+
+    #chart {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+
+  <h2>Revenue par produit</h2>
+
+  <div id="chart"></div>
+
+  <script type="module">
+
+    import { ArrowChildReceiver }
+      from 'iframe-flight';
+
+    import vegaEmbed
+      from 'https://cdn.jsdelivr.net/npm/vega-embed@6/+esm';
+
+    const receiver = new ArrowChildReceiver({
+      allowedOrigins: ['*']
+    });
+
+    receiver.onData(async (result) => {
+
+      const rows = [];
+      const table = result.table;
+
+      for (let i = 0; i < table.numRows; i++) {
+
+        const row = {};
+
+        table.schema.fields.forEach((field, columnIndex) => {
+          row[field.name] =
+            table.getChildAt(columnIndex).get(i);
+        });
+
+        rows.push(row);
+      }
+
+      document.getElementById('chart').innerHTML = '';
+
+      await vegaEmbed(
+        '#chart',
+        {
+          width: 700,
+
+          data: {
+            values: rows
+          },
+
+          mark: {
+            type: 'bar',
+            cornerRadiusEnd: 4
+          },
+
+          encoding: {
+            y: {
+              field: 'product',
+              type: 'nominal',
+              sort: '-x'
+            },
+
+            x: {
+              field: 'revenue',
+              type: 'quantitative'
+            },
+
+            color: {
+              field: 'growth',
+              type: 'quantitative',
+              scale: {
+                scheme: 'redyellowgreen'
+              }
+            }
+          }
+        },
+        {
+          actions: false
+        }
+      );
+    });
+
+  <\/script>
+
+</body>
+</html>
+`;
+
+    iframe.srcdoc = childHtml;
+
+    // ------------------------------------------------------------------
+    // Données Arrow
+    // ------------------------------------------------------------------
+
+    const PRODUCTS = [
+      'Aurora',
+      'Beacon',
+      'Catalyst',
+      'Dynamo',
+      'Eclipse',
+      'Fusion',
+      'Galaxy',
+      'Helix',
+      'Ignite',
+      'Jupiter'
+    ];
+
+    function rand(min, max) {
+      return Math.random() * (max - min) + min;
+    }
+
+    function randInt(min, max) {
+      return Math.floor(rand(min, max));
+    }
+
+    function makeSnapshot(n) {
+
+      const products = PRODUCTS.slice(0, n);
+
+      const revenue = Float64Array.from(
+        products.map(() => rand(10, 100))
+      );
+
+      const growth = Float64Array.from(
+        products.map(() => rand(-25, 25))
+      );
+
+      const units = Int32Array.from(
+        products.map(() => randInt(5000, 50000))
+      );
+
+      return tableToIPC(
+        tableFromArrays({
+          product: products,
+          revenue,
+          growth,
+          units
+        })
+      );
+    }
+
+    // ------------------------------------------------------------------
+    // Communication parent → iframe
+    // ------------------------------------------------------------------
+
+    iframe.addEventListener('load', async () => {
+
+      const emitter = new ArrowParentEmitter(iframe);
+
+      await emitter.onReady();
+
+      status.textContent = 'iframe prête';
+
+      async function sendData() {
+
+        const ack = await emitter.send(
+          makeSnapshot(10)
+        );
+
+        status.textContent =
+          ack.rows +
+          ' rows envoyées · ' +
+          ack.processingTime +
+          'ms';
+      }
+
+      document
+        .getElementById('sendBtn')
+        .addEventListener('click', sendData);
+
+      // premier envoi auto
+      sendData();
+    });
+
+  </script>
 
 </body>
 </html>
diff --git a/docs/index.html b/docs/index.html
index b36aa28..d3fea85 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -27,6 +27,7 @@ <h1 class="text-xl font-bold text-zinc-900 tracking-tight">✈ iframe-flight</h1
   <a href="#" class="nav-link shrink-0 px-4 py-2 text-sm font-semibold border-b-2 border-blue-600 text-blue-700 -mb-px">Demo</a>
   <a href="#simple" class="nav-link shrink-0 px-4 py-2 text-sm font-semibold border-b-2 border-transparent text-zinc-500 hover:text-zinc-800 -mb-px transition-colors">Quick start</a>
   <a href="#chart" class="nav-link shrink-0 px-4 py-2 text-sm font-semibold border-b-2 border-transparent text-zinc-500 hover:text-zinc-800 -mb-px transition-colors">Visualization</a>
+  <a href="#embed" class="nav-link shrink-0 px-4 py-2 text-sm font-semibold border-b-2 border-transparent text-zinc-500 hover:text-zinc-800 -mb-px transition-colors">Embed</a>
 </nav>
 
 <!-- ══════════════════════════════════════════════
@@ -556,6 +557,44 @@ <h1 class="text-xl font-bold text-zinc-900 tracking-tight">✈ iframe-flight</h1
 
 </div><!-- /page-chart -->
 
+<!-- ══════════════════════════════════════════════
+     PAGE: EMBED
+══════════════════════════════════════════════ -->
+<div data-page="embed" hidden>
+
+  <p class="text-sm text-zinc-500 mb-4">Single-file pattern — the child iframe is injected via <code class="font-mono text-xs bg-zinc-100 px-1 rounded">srcdoc</code>, no separate HTML file needed. Copy the source and open it directly in a browser.</p>
+
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+
+    <!-- Live demo -->
+    <div class="bg-white border border-zinc-200 rounded-lg overflow-hidden flex flex-col">
+      <div class="px-4 py-2.5 bg-zinc-50 border-b border-zinc-200 flex items-center gap-2">
+        <span class="w-2 h-2 rounded-full bg-green-500 shrink-0"></span>
+        <span class="text-xs font-semibold text-zinc-500 uppercase tracking-wider">Live</span>
+        <code class="font-mono text-[11px] text-zinc-400">embed.html</code>
+      </div>
+      <iframe id="embed-frame" src="about:blank" class="block w-full flex-1 border-0" style="height:580px"></iframe>
+    </div>
+
+    <!-- Source code -->
+    <div class="bg-white border border-zinc-200 rounded-lg overflow-hidden flex flex-col">
+      <div class="px-4 py-2.5 bg-zinc-50 border-b border-zinc-200 flex items-center justify-between shrink-0">
+        <div class="flex items-center gap-2">
+          <span class="text-xs font-semibold text-zinc-500 uppercase tracking-wider">Source</span>
+          <code class="font-mono text-[11px] text-zinc-400">embed.html</code>
+        </div>
+        <button class="copy-btn flex items-center gap-1.5 px-2 py-1 rounded text-[11px] font-semibold bg-white text-zinc-500 border border-zinc-200 hover:text-zinc-800 transition-colors" data-target="embed-src">
+          <svg class="w-3 h-3" viewBox="0 0 16 16" fill="currentColor"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"/><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"/></svg>
+          Copy
+        </button>
+      </div>
+      <pre id="embed-src" class="flex-1 overflow-auto p-4 text-[11.5px] font-mono leading-relaxed bg-white text-zinc-700 whitespace-pre" style="height:580px">Loading…</pre>
+    </div>
+
+  </div>
+
+</div><!-- /page-embed -->
+
 <!-- Footer -->
 <footer class="mt-6 text-xs text-zinc-400 pb-4 border-t border-zinc-200 pt-4">
   <a href="https://github.com/ihatexcel/iframe-flight" target="_blank" class="text-blue-600 hover:underline">github.com/ihatexcel/iframe-flight</a>
@@ -582,6 +621,7 @@ <h1 class="text-xl font-bold text-zinc-900 tracking-tight">✈ iframe-flight</h1
   });
   if (page === 'simple') initQsEmitter();
   if (page === 'chart')  initChartEmitter();
+  if (page === 'embed')  initEmbed();
 }
 window.addEventListener('hashchange', route);
 route();
@@ -768,6 +808,18 @@ <h1 class="text-xl font-bold text-zinc-900 tracking-tight">✈ iframe-flight</h1
 q('btn-resume-alpha').addEventListener('click',()=>{ q('frame-alpha').contentWindow.postMessage({__iframeFlight:'resume'},'*'); q('btn-resume-alpha').disabled=true; appendLog('parent-log','▶ resume → child-alpha','info'); });
 q('btn-resume-beta').addEventListener('click',()=>{ q('frame-beta').contentWindow.postMessage({__iframeFlight:'resume'},'*'); q('btn-resume-beta').disabled=true; appendLog('parent-log','▶ resume → child-beta','info'); });
 
+/* ══ EMBED PAGE — lazy init ══ */
+let embedInited = false;
+function initEmbed() {
+  if (embedInited) return;
+  embedInited = true;
+  q('embed-frame').src = './embed.html';
+  fetch('./embed.html')
+    .then(r => r.text())
+    .then(src => { q('embed-src').textContent = src; })
+    .catch(() => { q('embed-src').textContent = '(could not load source)'; });
+}
+
 /* ══ CHART PAGE — lazy init ══ */
 const CHART_PRODUCTS = ['Aurora','Beacon','Catalyst','Dynamo','Ember','Forge','Helios','Iris','Jetstream','Kronos','Lumina','Meridian','Nexus','Orbit','Prism'];
 
