feat(site): showcase IDE workspace, diff/staging et services git distants

- WorkspaceShowcase.vue : maquette fidèle de la vue /workspace (arbre de
  fichiers + panneau commit staging/amend + diff coloré + terminal corrélé).
- RemoteGitSection.vue : connexions GitHub/GitLab/Gitea (chiffrées at-rest)
  + barre de progression de clone.
- 5 cartes features, pilier sécurité « Encrypted secrets », 3 FAQ, ancre nav.
- i18n EN/FR à parité ; meta description orientée IDE. Bump 0.2.0.

packages/site/src/components/AppHeader.vue

@@ -8,6 +8,7 @@ const { t } = useI18n();
 
 const navLinks = [
   { href: '#features', key: 'navFeatures' },
+  { href: '#workspace', key: 'navWorkspace' },
   { href: '#how', key: 'navHow' },
   { href: '#security', key: 'navSecurity' },
   { href: '#faq', key: 'navFaq' },

packages/site/src/components/FeaturesSection.vue

@@ -85,6 +85,41 @@ const { t } = useI18n();
         </template>
         {{ t('feat10Desc') }}
       </FeatureCard>
+
+      <FeatureCard :title="t('feat11Title')">
+        <template #icon>
+          <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2" /><path d="m9 9-2 3 2 3" /><path d="m13 9 2 3-2 3" /></svg>
+        </template>
+        {{ t('feat11Desc') }}
+      </FeatureCard>
+
+      <FeatureCard :title="t('feat12Title')">
+        <template #icon>
+          <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><path d="M13 6h3a2 2 0 0 1 2 2v7" /><path d="M11 18H8a2 2 0 0 1-2-2V9" /></svg>
+        </template>
+        {{ t('feat12Desc') }}
+      </FeatureCard>
+
+      <FeatureCard :title="t('feat13Title')">
+        <template #icon>
+          <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 2v6" /><path d="M15 2v6" /><path d="M12 17v5" /><path d="M5 8h14" /><path d="M6 11V8h12v3a6 6 0 0 1-12 0Z" /></svg>
+        </template>
+        {{ t('feat13Desc') }}
+      </FeatureCard>
+
+      <FeatureCard :title="t('feat14Title')">
+        <template #icon>
+          <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="5" x="2" y="3" rx="1" /><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" /><path d="M10 12h4" /></svg>
+        </template>
+        {{ t('feat14Desc') }}
+      </FeatureCard>
+
+      <FeatureCard :title="t('feat15Title')">
+        <template #icon>
+          <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M3 21v-5h5" /></svg>
+        </template>
+        {{ t('feat15Desc') }}
+      </FeatureCard>
     </div>
   </section>
 </template>

packages/site/src/components/RemoteGitSection.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+// Connexions (fidèle à GitConnectionsSection : badge service + label + username + ••••last4 + badge tested).
+const connections = [
+  { service: 'gitea', label: 'lidge', username: 'johanleroy', last4: 'a4f1' },
+  { service: 'github', label: 'work', username: 'jleroy', last4: '9c0e' },
+  { service: 'gitlab', label: 'oss', username: 'johan', last4: '2db7' },
+] as const;
+</script>
+
+<template>
+  <section id="remotegit" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
+    <div v-reveal class="flex flex-wrap items-center gap-12">
+      <div class="min-w-[280px] flex-[1_1_360px]">
+        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-emerald-400">{{ t('rgKicker') }}</div>
+        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,34px)] font-semibold leading-[1.15] tracking-[-0.025em] text-zinc-50">
+          {{ t('rgTitle') }}
+        </h2>
+        <p class="m-0 text-[16.5px] leading-[1.6] text-zinc-400">{{ t('rgBody') }}</p>
+        <div class="mt-4 inline-flex items-center gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/[0.08] px-3 py-1.5 text-[13px] font-medium text-emerald-300">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>
+          {{ t('rgEncrypted') }}
+        </div>
+      </div>
+
+      <div class="flex min-w-[280px] flex-[1_1_440px] flex-col gap-3">
+        <!-- carte connexions (fidèle à GitConnectionsSection) -->
+        <div class="flex flex-col gap-2 rounded-xl border border-zinc-800 bg-zinc-900/50 p-3 shadow-card">
+          <h3 class="flex items-center gap-2 text-sm font-semibold text-zinc-100">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 2v6" /><path d="M15 2v6" /><path d="M12 17v5" /><path d="M5 8h14" /><path d="M6 11V8h12v3a6 6 0 0 1-12 0Z" /></svg>
+            {{ t('rgConnections') }}
+          </h3>
+
+          <ul class="flex flex-col gap-1">
+            <li
+              v-for="c in connections"
+              :key="c.label"
+              class="flex flex-wrap items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-900/40 px-2.5 py-2"
+            >
+              <!-- icône service (Gitea / GitHub / GitLab) -->
+              <span class="inline-flex h-6 w-6 flex-none items-center justify-center rounded-md bg-zinc-800 text-zinc-300">
+                <svg v-if="c.service === 'github'" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 1.3a10.7 10.7 0 0 0-3.38 20.86c.53.1.73-.23.73-.51l-.01-1.79c-2.98.65-3.61-1.44-3.61-1.44-.49-1.24-1.19-1.57-1.19-1.57-.97-.66.07-.65.07-.65 1.08.08 1.64 1.11 1.64 1.11.96 1.64 2.51 1.16 3.12.89.1-.69.37-1.16.68-1.43-2.38-.27-4.88-1.19-4.88-5.3 0-1.17.42-2.13 1.1-2.88-.11-.27-.48-1.36.1-2.84 0 0 .9-.29 2.96 1.1a10.3 10.3 0 0 1 5.38 0c2.05-1.39 2.95-1.1 2.95-1.1.59 1.48.22 2.57.11 2.84.69.75 1.1 1.71 1.1 2.88 0 4.12-2.51 5.02-4.9 5.29.39.33.73.98.73 1.97l-.01 2.92c0 .29.2.62.74.51A10.7 10.7 0 0 0 12 1.3" /></svg>
+                <svg v-else-if="c.service === 'gitlab'" width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 21.42 3.68-11.33H8.32L12 21.42Z" /><path d="M12 21.42 8.32 10.09H3.16L12 21.42Z" /><path d="M3.16 10.09 2.04 13.53a.76.76 0 0 0 .28.85L12 21.42 3.16 10.09Z" /><path d="M3.16 10.09h5.16L6.1 3.26a.38.38 0 0 0-.72 0l-2.22 6.83Z" /><path d="M12 21.42l3.68-11.33h5.16L12 21.42Z" /><path d="m20.84 10.09 1.12 3.44a.76.76 0 0 1-.28.85L12 21.42l8.84-11.33Z" /><path d="M20.84 10.09h-5.16l2.22-6.83a.38.38 0 0 1 .72 0l2.22 6.83Z" /></svg>
+                <svg v-else width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h12v4a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z" /><path d="M16 11h2.5a2.5 2.5 0 0 1 0 5H16" /><path d="M7 3c-.5.8.5 1.6 0 2.5" /><path d="M11 3c-.5.8.5 1.6 0 2.5" /></svg>
+              </span>
+              <span class="inline-flex items-center rounded bg-sky-950 px-1.5 py-0.5 text-[11px] font-medium text-sky-300">{{ c.service }}</span>
+              <span class="font-medium text-zinc-200">{{ c.label }}</span>
+              <span class="text-xs text-zinc-500">{{ c.username }}</span>
+              <span class="font-mono text-xs text-zinc-600">••••{{ c.last4 }}</span>
+              <span class="ml-auto inline-flex items-center gap-1 rounded bg-emerald-950 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400">
+                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
+                {{ t('rgTested') }}
+              </span>
+            </li>
+          </ul>
+
+          <div>
+            <span class="inline-flex items-center gap-1.5 rounded-lg border border-zinc-700 bg-zinc-800 px-2.5 py-1.5 text-xs font-medium text-zinc-200">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /><path d="M12 5v14" /></svg>
+              {{ t('rgAddConnection') }}
+            </span>
+          </div>
+        </div>
+
+        <!-- progression de clone (fidèle à CloneRepoModal) -->
+        <div class="flex flex-col gap-2 rounded-xl border border-zinc-800 bg-zinc-900/50 p-3 shadow-card">
+          <div class="flex items-center gap-2">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" x2="12" y1="15" y2="3" /></svg>
+            <span class="font-mono text-[13px] text-zinc-200">github.com/jleroy/api</span>
+            <span class="ml-auto font-mono text-xs text-zinc-500">62%</span>
+          </div>
+          <div class="h-2 w-full overflow-hidden rounded bg-zinc-800">
+            <div class="h-full rounded bg-emerald-500" style="width: 62%"></div>
+          </div>
+          <span class="font-mono text-xs text-zinc-500">{{ t('rgCloneReceiving') }}… 62%</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

packages/site/src/components/SecuritySection.vue

@@ -41,6 +41,11 @@ const { t } = useI18n();
           <div class="text-[15px] font-semibold text-zinc-50">{{ t('sec4Title') }}</div>
           <div class="text-[13.5px] leading-[1.5] text-zinc-400">{{ t('sec4Desc') }}</div>
         </div>
+        <div class="flex flex-col gap-2.5 rounded-[11px] border border-zinc-800 bg-[#0c0c0e] p-[18px]">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /><path d="M12 16v-2" /></svg>
+          <div class="text-[15px] font-semibold text-zinc-50">{{ t('sec5Title') }}</div>
+          <div class="text-[13.5px] leading-[1.5] text-zinc-400">{{ t('sec5Desc') }}</div>
+        </div>
       </div>
     </div>
   </section>

packages/site/src/components/WorkspaceShowcase.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+// Lignes du diff (fidèle à DiffViewer : add → emerald-950/40, del → rose-950/40).
+type DiffLine = { o: string; n: string; type: 'ctx' | 'add' | 'del' | 'hunk'; text: string };
+const diffLines: DiffLine[] = [
+  { o: '', n: '', type: 'hunk', text: '@@ -12,7 +12,9 @@ export function session(' },
+  { o: '12', n: '12', type: 'ctx', text: '  const claims = verify(req);' },
+  { o: '13', n: '13', type: 'ctx', text: '  if (!claims) return null;' },
+  { o: '14', n: '', type: 'del', text: '  return signLegacyCookie(claims);' },
+  { o: '', n: '14', type: 'add', text: '  const token = sign(claims, { ttl: 900 });' },
+  { o: '', n: '15', type: 'add', text: '  return refreshable(token);' },
+  { o: '15', n: '16', type: 'ctx', text: '}' },
+];
+
+function rowClass(type: DiffLine['type']): string {
+  if (type === 'add') return 'bg-emerald-950/40 text-emerald-200';
+  if (type === 'del') return 'bg-rose-950/40 text-rose-200';
+  return 'text-zinc-300';
+}
+function marker(type: DiffLine['type']): string {
+  return type === 'add' ? '+' : type === 'del' ? '-' : ' ';
+}
+</script>
+
+<template>
+  <section id="workspace" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
+    <div v-reveal class="mb-[40px] max-w-[720px]">
+      <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-emerald-400">{{ t('wsKicker') }}</div>
+      <h2 class="m-0 mb-4 text-[clamp(26px,3vw,38px)] font-semibold leading-[1.15] tracking-[-0.025em] text-zinc-50">
+        {{ t('wsTitle') }}
+      </h2>
+      <p class="m-0 text-[16.5px] leading-[1.6] text-zinc-400">{{ t('wsBody') }}</p>
+    </div>
+
+    <!-- maquette IDE : fidèle à WorkspaceView (/workspace) -->
+    <div v-reveal class="overflow-hidden rounded-[14px] border border-zinc-800 bg-[#09090b] shadow-card">
+      <!-- en-tête IDE : retour · repo · badge git · SegmentedControl Editor/Diff -->
+      <header class="flex flex-wrap items-center gap-3 border-b border-zinc-800 px-3 py-2">
+        <span class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-zinc-400">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>
+          {{ t('mWorktrees') }}
+        </span>
+        <span class="truncate text-sm font-medium text-zinc-200">api</span>
+        <!-- badge git (fidèle à GitStatusBadge) -->
+        <span class="flex items-center gap-2 text-xs">
+          <span class="flex items-center gap-1 font-mono text-zinc-300">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="6" x2="6" y1="3" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></svg>
+            feat/auth
+          </span>
+          <span class="text-emerald-400">↑2</span>
+          <span class="text-amber-400">○3</span>
+        </span>
+        <!-- SegmentedControl Editor/Diff (fidèle à SegmentedControl) -->
+        <div class="ml-auto inline-flex rounded-lg border border-zinc-800 bg-zinc-950/40 p-0.5">
+          <span class="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium text-zinc-400">{{ t('wsEditor') }}</span>
+          <span class="inline-flex items-center gap-1.5 rounded-md bg-zinc-800 px-2.5 py-1 text-xs font-medium text-zinc-100">{{ t('wsDiff') }}</span>
+        </div>
+      </header>
+
+      <!-- corps : 3 colonnes (desktop) / empilé (mobile) -->
+      <div class="flex flex-col md:flex-row">
+        <!-- colonne gauche : arbre de fichiers + panneau commit -->
+        <aside class="flex min-w-0 flex-col border-b border-zinc-800 md:w-[262px] md:flex-none md:border-b-0 md:border-r">
+          <!-- arbre de fichiers (fidèle à FileTree / FileTreeNode) -->
+          <div class="flex flex-col">
+            <div class="flex items-center gap-1 px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-zinc-500">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 14 3h-3a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z" /><path d="M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H11a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z" /><path d="M3 5a2 2 0 0 0 2 2h3" /><path d="M3 3v13a2 2 0 0 0 2 2h3" /></svg>
+              {{ t('wsFiles') }}
+            </div>
+            <div class="px-1 pb-2 font-mono text-xs">
+              <!-- src/ (dossier ouvert) -->
+              <div class="flex items-center gap-1 rounded py-0.5 pl-[6px] pr-2 text-zinc-300">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-zinc-500" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+                <span class="truncate">src</span>
+              </div>
+              <div class="flex items-center gap-1 rounded py-0.5 pl-[18px] pr-2 text-zinc-300">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-zinc-500" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
+                <span class="truncate">core</span>
+              </div>
+              <div class="flex items-center justify-between gap-1 rounded bg-zinc-800 py-0.5 pl-[30px] pr-2 text-zinc-100">
+                <span class="flex min-w-0 items-center gap-1">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-zinc-500" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>
+                  <span class="truncate">session.ts</span>
+                </span>
+                <span class="shrink-0 font-bold text-amber-400">M</span>
+              </div>
+              <div class="flex items-center justify-between gap-1 rounded py-0.5 pl-[30px] pr-2 text-zinc-300">
+                <span class="flex min-w-0 items-center gap-1">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-zinc-500" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>
+                  <span class="truncate">token.ts</span>
+                </span>
+                <span class="shrink-0 font-bold text-emerald-400">A</span>
+              </div>
+              <div class="flex items-center gap-1 rounded py-0.5 pl-[18px] pr-2 text-zinc-300">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-zinc-500" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>
+                <span class="truncate">app.ts</span>
+              </div>
+              <div class="flex items-center gap-1 rounded py-0.5 pl-[6px] pr-2 text-zinc-300">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-zinc-500" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>
+                <span class="truncate">package.json</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- panneau commit (fidèle à CommitPanel) -->
+          <div class="flex flex-col border-t border-zinc-800">
+            <div class="flex items-center gap-1 px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-zinc-500">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><path d="M13 6h3a2 2 0 0 1 2 2v7" /><path d="M11 18H8a2 2 0 0 1-2-2V9" /></svg>
+              {{ t('wsChanges') }}
+              <span class="text-emerald-500">↑2</span>
+            </div>
+
+            <!-- Staged (1) -->
+            <div class="px-1">
+              <div class="flex items-center px-1 py-0.5 text-[11px] text-zinc-500">{{ t('wsStaged') }} (1)</div>
+              <div class="group flex items-center gap-2 rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-100">
+                <span class="flex min-w-0 flex-1 items-center gap-2">
+                  <span class="w-3 shrink-0 text-center font-mono font-bold text-emerald-400">A</span>
+                  <span class="min-w-0 flex-1 truncate font-mono">token.ts<span class="text-zinc-600"> src/core</span></span>
+                  <span class="shrink-0 text-emerald-500">+24</span>
+                </span>
+                <button type="button" class="shrink-0 rounded p-0.5 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200" :title="t('wsUnstage')" :aria-label="t('wsUnstage')">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /></svg>
+                </button>
+              </div>
+            </div>
+
+            <!-- Changes (1) -->
+            <div class="px-1 pb-1">
+              <div class="flex items-center px-1 py-0.5 text-[11px] text-zinc-500">{{ t('wsChanges') }} (1)</div>
+              <div class="group flex items-center gap-2 rounded px-2 py-0.5 text-xs text-zinc-300 hover:bg-zinc-800/60">
+                <span class="flex min-w-0 flex-1 items-center gap-2">
+                  <span class="w-3 shrink-0 text-center font-mono font-bold text-amber-400">M</span>
+                  <span class="min-w-0 flex-1 truncate font-mono">session.ts<span class="text-zinc-600"> src/core</span></span>
+                  <span class="shrink-0 text-emerald-500">+2</span>
+                  <span class="shrink-0 text-rose-500">−1</span>
+                </span>
+                <span class="flex shrink-0 items-center gap-0.5 text-zinc-400">
+                  <button type="button" class="rounded p-0.5 hover:bg-zinc-700" :title="t('wsDiscard')" :aria-label="t('wsDiscard')">
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5" /><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11" /></svg>
+                  </button>
+                  <button type="button" class="rounded p-0.5 hover:bg-zinc-700" :title="t('wsStage')" :aria-label="t('wsStage')">
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /><path d="M12 5v14" /></svg>
+                  </button>
+                </span>
+              </div>
+            </div>
+
+            <!-- zone de commit -->
+            <div class="flex flex-col gap-1 border-t border-zinc-800 p-2">
+              <div class="resize-none rounded-md border border-zinc-700 bg-zinc-950/40 px-2 py-1.5 text-xs text-zinc-200">{{ t('wsCommitMsg') }}</div>
+              <label class="flex items-center gap-1.5 text-[11px] text-zinc-400">
+                <span class="inline-flex h-3.5 w-3.5 items-center justify-center rounded-[3px] border border-zinc-600 bg-zinc-950"></span>
+                {{ t('wsAmend') }}
+              </label>
+              <div class="flex items-center gap-2">
+                <span class="inline-flex items-center gap-1.5 rounded-md bg-emerald-500 px-2.5 py-1 text-xs font-semibold text-emerald-950">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
+                  {{ t('wsCommitBtn') }}
+                </span>
+                <span class="inline-flex items-center gap-1.5 rounded-md border border-zinc-700 bg-zinc-800 px-2.5 py-1 text-xs font-medium text-zinc-200">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12" /><path d="m17 8-5-5-5 5" /><path d="M5 21h14" /></svg>
+                  {{ t('wsPushBtn') }} ↑2
+                </span>
+              </div>
+            </div>
+          </div>
+        </aside>
+
+        <!-- colonne centrale : diff (fidèle à DiffViewer) -->
+        <main class="flex min-w-0 flex-1 flex-col border-b border-zinc-800 md:border-b-0">
+          <div class="flex items-center gap-2 border-b border-zinc-800 px-2 py-1">
+            <div class="inline-flex rounded-lg border border-zinc-800 bg-zinc-950/40 p-0.5">
+              <span class="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium text-zinc-400">{{ t('wsEditor') }}</span>
+              <span class="inline-flex items-center gap-1.5 rounded-md bg-zinc-800 px-2.5 py-1 text-xs font-medium text-zinc-100">{{ t('wsDiff') }}</span>
+            </div>
+            <span class="truncate font-mono text-[11px] text-zinc-500">src/core/session.ts</span>
+          </div>
+          <div class="min-h-0 flex-1 overflow-auto">
+            <div class="flex items-center gap-3 border-b border-zinc-800 px-3 py-1 text-[11px] text-zinc-500">
+              <span class="text-emerald-500">+2</span>
+              <span class="text-rose-500">−1</span>
+              <span class="rounded bg-emerald-950 px-1 text-emerald-400">{{ t('wsStaged') }}</span>
+            </div>
+            <div class="overflow-x-auto">
+              <table class="w-full border-collapse font-mono text-xs leading-5">
+                <tbody>
+                  <tr v-for="(l, i) in diffLines" :key="i" :class="l.type === 'hunk' ? 'bg-zinc-900/60 text-sky-300/80' : rowClass(l.type)">
+                    <td class="w-10 select-none px-2 text-right text-zinc-600">{{ l.o }}</td>
+                    <td class="w-10 select-none px-2 text-right text-zinc-600">{{ l.n }}</td>
+                    <td class="whitespace-pre px-2">{{ l.type === 'hunk' ? l.text : marker(l.type) + l.text }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </main>
+
+        <!-- colonne droite : terminal de la session corrélée (fidèle au style des terminaux du site) -->
+        <section class="flex min-w-0 flex-col md:w-[300px] md:flex-none md:border-l md:border-zinc-800">
+          <div class="flex items-center gap-1 border-b border-zinc-800 px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-zinc-500">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 11 2-2-2-2" /><path d="M11 13h4" /><rect width="18" height="18" x="3" y="3" rx="2" ry="2" /></svg>
+            {{ t('wsTerminal') }}
+          </div>
+          <!-- barre de titre repo · branche + badge d'état -->
+          <div class="flex items-center gap-2 border-b border-zinc-800 px-[11px] py-2">
+            <span class="truncate font-mono text-[11.5px] text-zinc-300">api · feat/auth</span>
+            <span class="ml-auto inline-flex items-center gap-1.5 rounded bg-sky-950 px-2 py-[3px] font-mono text-[11px] text-sky-300">
+              <span class="h-1.5 w-1.5 flex-none animate-pulse-sky rounded-full bg-sky-300"></span>{{ t('busy') }}
+            </span>
+          </div>
+          <div class="min-h-[180px] flex-1 p-[11px] font-mono text-[11px] leading-[1.75] text-zinc-300">
+            <div class="text-emerald-400">● Edit session.ts</div>
+            <div class="text-emerald-400">+ const token = sign(...)</div>
+            <div class="text-red-400">- legacy cookie auth</div>
+            <div class="text-emerald-400">● Write token.ts</div>
+            <div class="text-zinc-500">running tests…</div>
+            <div class="text-emerald-400">✓ 24 passed</div>
+            <div>
+              <span class="text-emerald-400">$</span>
+              <span class="ml-1 inline-block h-[11px] w-1.5 animate-blink align-middle bg-zinc-200"></span>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </section>
+</template>