feat(site,docs): aligne le site vitrine et la doc sur l'app « Emerald »

Site (packages/site) : adopte le design system Emerald (polices Inter +
JetBrains Mono variables, tokens sémantiques, thème clair/sombre + bascule)
et met les mockups à jour sur l'app réelle.

- style.css : tokens Emerald (@theme sombre + override html[data-theme=light]) ;
  lib/theme.ts + ThemeToggle.vue + anti-FOUC index.html ; sweep des couleurs
  brutes vers les tokens dans toutes les sections.
- Mockups fidèles à l'IDE multi-projet : HeroMockup (rail ActivityBar au lieu
  de la sidebar large + v obsolète retirée), ShowcaseSection (supervision au
  lieu du dashboard worktree-first, onglets mobiles réels), WorkspaceShowcase
  (diff-add/del, bouton commit accent-solid) ; framing « worktree-first »
  résiduel levé (i18n).
- og-cover.png rafraîchi (carte Emerald).

Docs : README.md + README.fr.md (retrait « Status: MVP », ajout du langage
Emerald + thème clair/sombre/système, VSIX 0.2.0 -> 0.3.0, section Screenshots),
vscode README (VSIX 0.3.0), brand README (thème clair), CHANGELOG daemon 3.2.0.
Captures IDE sombre + clair (brand/screenshot-ide-*.png).

packages/site/src/components/FinalCta.vue

@@ -12,8 +12,8 @@ const { t } = useI18n();
   <section class="mx-auto max-w-[1200px] px-6 pb-[100px]">
     <div
       v-reveal
-      class="rounded-[20px] border border-zinc-800 px-6 py-[clamp(36px,5vw,64px)] text-center"
-      style="background: radial-gradient(120% 140% at 50% 0%, rgba(16, 185, 129, 0.1), transparent 60%), #0c0c0e"
+      class="rounded-[20px] border border-border px-6 py-[clamp(36px,5vw,64px)] text-center"
+      style="background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 60%), var(--color-surface-0)"
     >
       <img
         src="/assets/arboretum-mark.png"
@@ -22,16 +22,16 @@ const { t } = useI18n();
         height="52"
         class="mx-auto mb-5 block h-[52px] w-[52px] object-contain"
       />
-      <h2 class="m-0 mb-3.5 text-[clamp(30px,4vw,46px)] font-bold leading-[1.08] tracking-[-0.03em] text-zinc-50">
+      <h2 class="m-0 mb-3.5 text-[clamp(30px,4vw,46px)] font-bold leading-[1.08] tracking-[-0.03em] text-fg">
         {{ t('ctaTitle') }}
       </h2>
-      <p class="mx-auto mb-7 max-w-[480px] text-[17px] text-zinc-400">{{ t('ctaBody') }}</p>
+      <p class="mx-auto mb-7 max-w-[480px] text-[17px] text-fg-muted">{{ t('ctaBody') }}</p>
 
       <div
-        class="mx-auto flex max-w-[460px] items-stretch overflow-hidden rounded-[10px] border border-zinc-800 bg-zinc-950"
+        class="mx-auto flex max-w-[460px] items-stretch overflow-hidden rounded-[10px] border border-border bg-surface-0"
       >
         <div class="flex min-w-0 flex-1 items-center gap-2.5 overflow-x-auto whitespace-nowrap px-4 font-mono text-sm">
-          <span class="text-emerald-400">$</span><span class="text-zinc-200">{{ INSTALL_COMMAND }}</span>
+          <span class="text-accent">$</span><span class="text-fg">{{ INSTALL_COMMAND }}</span>
         </div>
         <CopyButton variant="bar" :text="INSTALL_COMMAND" :label="t('copyCommand')" bar-class="px-4" />
       </div>
@@ -41,7 +41,7 @@ const { t } = useI18n();
           :href="REPO"
           target="_blank"
           rel="noopener"
-          class="inline-flex items-center gap-2 text-[14.5px] text-zinc-400 no-underline transition-colors hover:text-emerald-400"
+          class="inline-flex items-center gap-2 text-[14.5px] text-fg-muted no-underline transition-colors hover:text-accent"
         >
           <IconGitea :size="16" />
           {{ t('ctaSource') }}