diff --git a/CUSTOMIZATIONS.md b/CUSTOMIZATIONS.md
index e268148..cc88a34 100644
--- a/CUSTOMIZATIONS.md
+++ b/CUSTOMIZATIONS.md
@@ -50,6 +50,7 @@ The old production site (`docu.djeex.fr`) has an established visual identity tha
 - `ui.colors`: primary `cyan`, neutral `zinc` — the site's brand accent color and its neutral gray scale.
 - `ui.prose.card` / `ui.prose.pre` / `ui.header` / `ui.contentSearchButton` / `ui.contentSurround` / `ui.kbd`: exact background/border hex values (a shared `rgba(12,13,12,0.8)` translucent-dark family, e.g. `#121110` borders) matching the old site's card, code-block, header, search button, and prev/next-link chrome, since Nuxt UI's defaults use a different neutral scale that didn't match.
 - `ui.prose.callout.compoundVariants`: exact colors for all four admonition severities (info/success/warning/error), overriding Nuxt UI's default callout palette so `::note`, `::tip`, `::warning`, `::caution` render in the same colors the old site's `::alert` boxes used, rather than Nuxt UI's stock blue/green/amber/red.
+- `toc.bottom.links` / `toc.bottom.title` — no component override needed for this one: Docus's own `DocsAsideRightBottom.vue` already reads `appConfig.toc?.bottom?.links` and renders them via `UPageLinks` under the right-hand table of contents, it's just never set by default. This surfaces the same "other projects" links (git.djeex.fr, Lumeex, Instameex) shown on the landing page's "Other dumb things" section, at the bottom of every doc page's TOC too, instead of only being visible from the homepage.
 
 ## Custom / overridden components (`app/components/`)
 
@@ -63,6 +64,7 @@ Nuxt's convention is that a file at `app/components/<any-subfolder>/<ExactCompon
 - **`docs/DocsPageHeaderLinks.vue`** — gave the "Copy page" button group the same translucent-dark card styling used everywhere else on the site. Purely cosmetic: the stock Nuxt UI button styling didn't match the rest of the page chrome and stood out as an unstyled default.
 - **`prose/ProseNote.vue`, `ProseTip.vue`, `ProseWarning.vue`, `ProseCaution.vue`** (new files, no stock equivalent to override against — these are thin wrappers around Nuxt UI's own `Callout.vue`). Nuxt UI's admonition icon is normally set once, globally, per icon slot — there's no built-in way to omit it on just one specific admonition without changing it for every admonition of that type site-wide. These wrappers read an optional `icon` prop so a single instance can hide its icon (`::note{icon=""}`) when the emoji or leading text already conveys the same meaning, while every other `::note` on the site keeps its default icon.
 - **`content/Ellipsis.vue`** (new; no Docus or Nuxt UI equivalent exists at all). The old site had a decorative blurred gradient glow behind section headers, and reproducing the content 1:1 meant this cosmetic effect needed *some* markdown-usable component to exist, since neither Docus nor Nuxt UI ships anything similar. Registered as the inline MDC component `:ellipsis{left= width= top= blur= zIndex=}`, used across content wherever the old site had that effect.
+- **`OgImage/Docs.takumi.vue`** — overrides Docus's default `og:image` template used for every doc page's social-preview image. Stock Docus renders it on a generic `bg-neutral-950` with a plain white corner flare, in whatever font the takumi renderer defaults to; this swaps in the site's actual near-black background (`#0B0A0A`, matching `app.css`), a blurred oval reproducing the exact colors and diagonal gradient of the site's own `:ellipsis` component instead of the white flare, **Roboto** as the font (the site itself renders in the browser's own `system-ui`, which can't be embedded server-side since it resolves to a different, non-redistributable font per OS — Roboto was picked as Android's system font, the single most common one), and the site's own logo (bottom-left) in place of the plain site-name text. Two non-obvious takumi rendering gotchas found in the process: an injected SVG's XML prolog and comments render as literal visible text instead of being silently ignored like a browser's `innerHTML` would, and a `<style>` block's CSS class rules aren't resolved at all (paths fell back to default black fill) — both needed stripping/inlining by hand in `fetchLogoSvg()` before the SVG string reaches `v-html`. `content/en/index.md` and `content/fr/index.md` skip this template entirely via the `seo.ogImage` frontmatter key (Docus's `landing.vue` checks for it and falls back to a fixed `/img/social.png` instead of generating one), since the homepage's own hero doesn't fit this per-doc-page layout.
 - **`content/FileTree.vue` + `content/FileTreeNode.vue`** (new; no Docus or Nuxt UI equivalent exists at all). Every install guide used to show its folder layout as a plain ASCII-art code fence (`└──`/`├──`); this renders the same information as an actual tree with per-entry folder/file icons instead, reusing the exact filename/extension icon lookup `CodeIcon.vue` already does for labeled code fences, so a `.env` or `.conf` gets the same icon here as in a fence header. Registered as the container component `::file-tree`, fed through a YAML props block (`remark-mdc`'s `---\n...\n---` syntax) rather than a nested markdown list, since the data (name, whether it's a folder, its children) doesn't map cleanly onto list semantics otherwise. A trailing `/` on a plain string marks an otherwise-childless folder (a mapping key is unambiguously a folder already); a trailing `" # comment"` on either form renders as a dimmed, italic aside, matching a real code comment without being one (an actual unquoted YAML `#` would just be stripped by the parser before the component ever saw it). The header doubles as a collapse toggle (`collapsed` prop sets the initial state only), and clicking any row copies that entry's full path to the clipboard.
 
 ## Page-level features (`app/pages/[[lang]]/[...slug].vue`)
diff --git a/app/components/OgImage/Docs.takumi.vue b/app/components/OgImage/Docs.takumi.vue
index 958a357..a6f9cba 100644
--- a/app/components/OgImage/Docs.takumi.vue
+++ b/app/components/OgImage/Docs.takumi.vue
@@ -4,10 +4,47 @@ const { title, description, headline } = defineProps<{ title?: string, descripti
 const appConfig = useAppConfig()
 const { name: siteName } = useSiteConfig()
 const primaryColor = appConfig.ui?.colors?.primary ?? 'emerald'
+const logoPath = appConfig.header?.logo?.dark || appConfig.header?.logo?.light
+const logoHeight = 40
+
+const logoSvg = await fetchLogoSvg(logoPath)
+
+async function fetchLogoSvg(path?: string): Promise<string> {
+  if (!path) return ''
+  try {
+    const { url: siteUrl } = useSiteConfig()
+    const url = path.startsWith('http') ? path : `${siteUrl}${path}`
+    let svg = await $fetch<string>(url, { responseType: 'text' })
+
+    // Strip the XML prolog and comments: takumi renders them as literal text
+    // instead of ignoring them like a browser's innerHTML would.
+    svg = svg.replace(/<\?xml[^>]*\?>/, '').replace(/<!--[\s\S]*?-->/g, '').trim()
+
+    // takumi doesn't resolve the SVG's own <style> class rules either (paths
+    // rendered black), so inline each class's fill directly, then drop <defs>.
+    const classFills = new Map(
+      [...svg.matchAll(/\.(\w+)\s*\{\s*fill:\s*([^;}\s]+)/g)].map(([, className, fill]) => [className, fill]),
+    )
+    for (const [className, fill] of classFills) {
+      svg = svg.replaceAll(`class="${className}"`, `fill="${fill}"`)
+    }
+    svg = svg.replace(/<defs>[\s\S]*?<\/defs>/, '').trim()
+
+    // This logo is a wide wordmark (viewBox ~3360x576), not a square icon,
+    // so width must scale from its own aspect ratio instead of a fixed value.
+    const viewBox = svg.match(/viewBox="[\d.]+ [\d.]+ ([\d.]+) ([\d.]+)"/)
+    const width = viewBox ? Math.round(logoHeight * (Number(viewBox[1]) / Number(viewBox[2]))) : logoHeight
+
+    return svg.replace('<svg', `<svg width="${width}" height="${logoHeight}"`)
+  }
+  catch {
+    return ''
+  }
+}
 </script>
 
 <template>
-  <div class="w-full h-full flex flex-col justify-between bg-[#0B0A0A] px-[80px] py-[60px]">
+  <div class="w-full h-full flex flex-col justify-between bg-[#0B0A0A] px-[80px] py-[60px] font-[Roboto]">
     <!-- Same shape, colors and blur as the site's own :ellipsis component: a wide
          flat oval filled with its diagonal blue/cyan gradient, then blurred. -->
     <div class="absolute blur-3xl top-[80px] right-[50px] w-[900px] h-[360px] rounded-full bg-[linear-gradient(97.62deg,rgba(0,71,225,0.18)_2.27%,rgba(26,214,255,0.12)_65%,rgba(0,71,225,0.12)_98.48%)]" />
@@ -34,7 +71,12 @@ const primaryColor = appConfig.ui?.colors?.primary ?? 'emerald'
     </div>
 
     <div class="flex">
-      <div class="text-white text-[18px] font-normal rounded-lg px-5 py-2">
+      <div
+        v-if="logoSvg"
+        class="h-[40px]"
+        v-html="logoSvg"
+      />
+      <div v-else class="text-white text-[18px] font-normal rounded-lg px-5 py-2">
         {{ siteName }}
       </div>
     </div>