update

app/.astro/settings.json

@@ -1,5 +1,3 @@
-{
-	"_variables": {
-		"lastUpdateCheck": 1756115195405
-	}
-}
+version https://git-lfs.github.com/spec/v1
+oid sha256:585e9065073b0b2528747f99b78ccc382984e713ac7e6a5c9f99a47956e3f42e
+size 58

app/astro.config.mjs

@@ -8,7 +8,7 @@ import remarkFootnotes from 'remark-footnotes';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeCitation from 'rehype-citation';
-import rehypeCodeCopyAndLabel from './plugins/rehype/code-copy-and-label.mjs';
+import rehypeCodeCopy from './plugins/rehype/code-copy.mjs';
 import rehypeReferencesAndFootnotes from './plugins/rehype/post-citation.mjs';
 import remarkIgnoreCitationsInCode from './plugins/remark/ignore-citations-in-code.mjs';
 import rehypeRestoreAtInCode from './plugins/rehype/restore-at-in-code.mjs';
@@ -53,11 +53,11 @@ export default defineConfig({
       [rehypeCitation, {
         bibliography: 'src/content/bibliography.bib',
         linkCitations: true,
-        csl: 'vancouver'
+        csl: "vancouver"
       }],
       rehypeReferencesAndFootnotes,
       rehypeRestoreAtInCode,
-      rehypeCodeCopyAndLabel,
+      rehypeCodeCopy,
       rehypeWrapTables
     ]
   }

app/plugins/rehype/{code-copy-and-label.mjs → code-copy.mjs}

@@ -1,6 +1,6 @@
-// Minimal rehype plugin to wrap code blocks with a copy button and a language label
+// Minimal rehype plugin to wrap code blocks with a copy button
 // Exported as a standalone module to keep astro.config.mjs lean
-export default function rehypeCodeCopyAndLabel() {
+export default function rehypeCodeCopy() {
   return (tree) => {
     // Walk the tree; lightweight visitor to find <pre><code>
     const visit = (node, parent) => {
@@ -90,3 +90,5 @@ export default function rehypeCodeCopyAndLabel() {
 }
 
 
+
+

app/public/scripts/color-palettes.js

@@ -0,0 +1,217 @@
+// Global color palettes generator and watcher
+// - Observes CSS variable --primary-color and theme changes
+// - Generates categorical, sequential, and diverging palettes (OKLCH/OKLab)
+// - Exposes results as CSS variables on :root
+// - Supports variable color counts per palette via CSS vars
+// - Dispatches a 'palettes:updated' CustomEvent after each update
+
+(() => {
+  const MODE = { cssRoot: document.documentElement };
+
+  const getCssVar = (name) => {
+    try { return getComputedStyle(MODE.cssRoot).getPropertyValue(name).trim(); } catch { return ''; }
+  };
+  const getIntFromCssVar = (name, fallback) => {
+    const raw = getCssVar(name);
+    if (!raw) return fallback;
+    const v = parseInt(String(raw), 10);
+    if (Number.isNaN(v)) return fallback;
+    return v;
+  };
+  const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+
+  // Color math (OKLab/OKLCH)
+  const srgbToLinear = (u) => (u <= 0.04045 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4));
+  const linearToSrgb = (u) => (u <= 0.0031308 ? 12.92 * u : 1.055 * Math.pow(Math.max(0, u), 1 / 2.4) - 0.055);
+  const rgbToOklab = (r, g, b) => {
+    const rl = srgbToLinear(r), gl = srgbToLinear(g), bl = srgbToLinear(b);
+    const l = Math.cbrt(0.4122214708 * rl + 0.5363325363 * gl + 0.0514459929 * bl);
+    const m = Math.cbrt(0.2119034982 * rl + 0.6806995451 * gl + 0.1073969566 * bl);
+    const s = Math.cbrt(0.0883024619 * rl + 0.2817188376 * gl + 0.6299787005 * bl);
+    const L = 0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s;
+    const a = 1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s;
+    const b2 = 0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s;
+    return { L, a, b: b2 };
+  };
+  const oklabToRgb = (L, a, b) => {
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+    const l = l_ * l_ * l_;
+    const m = m_ * m_ * m_;
+    const s = s_ * s_ * s_;
+    const r = linearToSrgb(+4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s);
+    const g = linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s);
+    const b3 = linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s);
+    return { r, g, b: b3 };
+  };
+  const oklchToOklab = (L, C, hDeg) => { const h = (hDeg * Math.PI) / 180; return { L, a: C * Math.cos(h), b: C * Math.sin(h) }; };
+  const oklabToOklch = (L, a, b) => { const C = Math.sqrt(a*a + b*b); let h = Math.atan2(b, a) * 180 / Math.PI; if (h < 0) h += 360; return { L, C, h }; };
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const isInGamut = ({ r, g, b }) => r >= 0 && r <= 1 && g >= 0 && g <= 1 && b >= 0 && b <= 1;
+  const toHex = ({ r, g, b }) => { const R = Math.round(clamp01(r)*255), G = Math.round(clamp01(g)*255), B = Math.round(clamp01(b)*255); const h = (n) => n.toString(16).padStart(2,'0'); return `#${h(R)}${h(G)}${h(B)}`.toUpperCase(); };
+  const oklchToHexSafe = (L, C, h) => { let c = C; for (let i=0;i<12;i++){ const { a, b } = oklchToOklab(L,c,h); const rgb = oklabToRgb(L,a,b); if (isInGamut(rgb)) return toHex(rgb); c = Math.max(0, c-0.02);} return toHex(oklabToRgb(L,0,0)); };
+  const parseCssColorToRgb = (css) => { try { const el = document.createElement('span'); el.style.color = css; document.body.appendChild(el); const cs = getComputedStyle(el).color; document.body.removeChild(el); const m = cs.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i); if (!m) return null; return { r: Number(m[1])/255, g: Number(m[2])/255, b: Number(m[3])/255 }; } catch { return null; } };
+
+  const getPrimaryHex = () => {
+    const css = getCssVar('--primary-color');
+    if (!css) return '#E889AB';
+    if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(css)) return css.toUpperCase();
+    const rgb = parseCssColorToRgb(css);
+    if (rgb) return toHex(rgb);
+    return '#E889AB';
+  };
+  const getCounts = () => {
+    const Fallback = 6;
+    const globalCount = clamp(getIntFromCssVar('--palette-count', Fallback), 1, 12);
+    return {
+      categorical: clamp(getIntFromCssVar('--palette-categorical-count', globalCount), 1, 12),
+      sequential: clamp(getIntFromCssVar('--palette-sequential-count', globalCount), 1, 12),
+      diverging: clamp(getIntFromCssVar('--palette-diverging-count', globalCount), 1, 12),
+    };
+  };
+
+  const generators = {
+    categorical: (baseHex, count) => {
+      const parseHex = (h) => { const s = h.replace('#',''); const v = s.length===3 ? s.split('').map(ch=>ch+ch).join('') : s; return { r: parseInt(v.slice(0,2),16)/255, g: parseInt(v.slice(2,4),16)/255, b: parseInt(v.slice(4,6),16)/255 }; };
+      const { r, g, b } = parseHex(baseHex);
+      const { L, a, b: bb } = rgbToOklab(r,g,b);
+      const { C, h } = oklabToOklch(L,a,bb);
+      const L0 = Math.min(0.85, Math.max(0.4, L));
+      const C0 = Math.min(0.35, Math.max(0.1, C || 0.2));
+      const total = Math.max(1, Math.min(12, count || 6));
+      const hueStep = 360 / total;
+      const results = [];
+      for (let i=0;i<total;i++) { const hDeg = (h + i*hueStep) % 360; const lVar = ((i % 3) - 1) * 0.04; results.push(oklchToHexSafe(Math.max(0.4, Math.min(0.85, L0 + lVar)), C0, hDeg)); }
+      return results;
+    },
+    sequential: (baseHex, count) => {
+      const parseHex = (h) => { const s = h.replace('#',''); const v = s.length===3 ? s.split('').map(ch=>ch+ch).join('') : s; return { r: parseInt(v.slice(0,2),16)/255, g: parseInt(v.slice(2,4),16)/255, b: parseInt(v.slice(4,6),16)/255 }; };
+      const { r, g, b } = parseHex(baseHex);
+      const { L, a, b: bb } = rgbToOklab(r,g,b);
+      const { C, h } = oklabToOklch(L,a,bb);
+      const total = Math.max(1, Math.min(12, count || 6));
+      const startL = Math.max(0.25, L - 0.18);
+      const endL = Math.min(0.92, L + 0.18);
+      const cBase = Math.min(0.33, Math.max(0.08, C * 0.9 + 0.06));
+      const out = [];
+      for (let i=0;i<total;i++) { const t = total===1 ? 0 : i/(total-1); const lNow = startL*(1-t)+endL*t; const cNow = cBase*(0.85 + 0.15*(1 - Math.abs(0.5 - t)*2)); out.push(oklchToHexSafe(lNow, cNow, h)); }
+      return out;
+    },
+    diverging: (baseHex, count) => {
+      const parseHex = (h) => { const s = h.replace('#',''); const v = s.length===3 ? s.split('').map(ch=>ch+ch).join('') : s; return { r: parseInt(v.slice(0,2),16)/255, g: parseInt(v.slice(2,4),16)/255, b: parseInt(v.slice(4,6),16)/255 }; };
+      const { r, g, b } = parseHex(baseHex);
+      const baseLab = rgbToOklab(r,g,b);
+      const baseLch = oklabToOklch(baseLab.L, baseLab.a, baseLab.b);
+      const total = Math.max(1, Math.min(12, count || 6));
+
+      // Left endpoint: EXACT primary color (no darkening)
+      const leftLab = baseLab;
+      // Right endpoint: complement with same L and similar C (clamped safe)
+      const compH = (baseLch.h + 180) % 360;
+      const cSafe = Math.min(0.35, Math.max(0.08, baseLch.C));
+      const rightLab = oklchToOklab(baseLab.L, cSafe, compH);
+      const whiteLab = { L: 0.98, a: 0, b: 0 }; // center near‑white
+
+      const hexFromOKLab = (L, a, b) => toHex(oklabToRgb(L, a, b));
+      const lerp = (a, b, t) => a + (b - a) * t;
+      const lerpOKLabHex = (A, B, t) => hexFromOKLab(lerp(A.L, B.L, t), lerp(A.a, B.a, t), lerp(A.b, B.b, t));
+
+      const out = [];
+      if (total % 2 === 1) {
+        const nSide = (total - 1) >> 1; // items on each side
+        // Left side: include left endpoint exactly at index 0
+        for (let i = 0; i < nSide; i++) {
+          const t = nSide <= 1 ? 0 : (i / (nSide - 1)); // 0 .. 1
+          // Move from leftLab to a value close (but not equal) to white; ensure last before center is lighter
+          const tt = t * 0.9; // keep some distance from pure white before center
+          out.push(lerpOKLabHex(leftLab, whiteLab, tt));
+        }
+        // Center
+        out.push(hexFromOKLab(whiteLab.L, whiteLab.a, whiteLab.b));
+        // Right side: start near white and end EXACTLY at rightLab
+        for (let i = 0; i < nSide; i++) {
+          const t = nSide <= 1 ? 1 : ((i + 1) / nSide); // (1/n)..1
+          const tt = Math.max(0.1, t); // avoid starting at pure white
+          out.push(lerpOKLabHex(whiteLab, rightLab, tt));
+        }
+        // Ensure first and last are exact endpoints
+        if (out.length) { out[0] = hexFromOKLab(leftLab.L, leftLab.a, leftLab.b); out[out.length - 1] = hexFromOKLab(rightLab.L, rightLab.a, rightLab.b); }
+      } else {
+        const nSide = total >> 1;
+        // Left half including left endpoint, approaching white but not reaching it
+        for (let i = 0; i < nSide; i++) {
+          const t = nSide <= 1 ? 0 : (i / (nSide - 1)); // 0 .. 1
+          const tt = t * 0.9;
+          out.push(lerpOKLabHex(leftLab, whiteLab, tt));
+        }
+        // Right half: mirror from near white to exact right endpoint
+        for (let i = 0; i < nSide; i++) {
+          const t = nSide <= 1 ? 1 : ((i + 1) / nSide); // (1/n)..1
+          const tt = Math.max(0.1, t);
+          out.push(lerpOKLabHex(whiteLab, rightLab, tt));
+        }
+        if (out.length) { out[0] = hexFromOKLab(leftLab.L, leftLab.a, leftLab.b); out[out.length - 1] = hexFromOKLab(rightLab.L, rightLab.a, rightLab.b); }
+      }
+      return out;
+    }
+  };
+
+  const setCssVar = (name, value) => { try { MODE.cssRoot.style.setProperty(name, value); } catch {} };
+  const removeCssVar = (name) => { try { MODE.cssRoot.style.removeProperty(name); } catch {} };
+
+  let lastSignature = '';
+  let lastCounts = { categorical: 0, sequential: 0, diverging: 0 };
+
+  const updatePalettes = () => {
+    const primary = getPrimaryHex();
+    const counts = getCounts();
+    const signature = `${primary}|${counts.categorical}|${counts.sequential}|${counts.diverging}`;
+    if (signature === lastSignature) return;
+
+    const out = {};
+    out.categorical = generators.categorical(primary, counts.categorical);
+    out.sequential = generators.sequential(primary, counts.sequential);
+    out.diverging = generators.diverging(primary, counts.diverging);
+
+    setCssVar('--primary-hex', primary);
+    setCssVar('--palette-categorical-count-current', String(out.categorical.length));
+    setCssVar('--palette-sequential-count-current', String(out.sequential.length));
+    setCssVar('--palette-diverging-count-current', String(out.diverging.length));
+
+    const applyList = (key, list, prevCount) => {
+      for (let i=0;i<list.length;i++) setCssVar(`--palette-${key}-${i+1}`, list[i]);
+      for (let i=list.length;i<prevCount;i++) removeCssVar(`--palette-${key}-${i+1}`);
+      setCssVar(`--palette-${key}-json`, JSON.stringify(list));
+    };
+    applyList('categorical', out.categorical, lastCounts.categorical);
+    applyList('sequential', out.sequential, lastCounts.sequential);
+    applyList('diverging', out.diverging, lastCounts.diverging);
+
+    lastCounts = { categorical: out.categorical.length, sequential: out.sequential.length, diverging: out.diverging.length };
+    lastSignature = signature;
+
+    try { document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary, counts, palettes: out } })); } catch {}
+  };
+
+  const bootstrap = () => {
+    updatePalettes();
+    const mo = new MutationObserver(() => updatePalettes());
+    mo.observe(MODE.cssRoot, { attributes: true, attributeFilter: ['style', 'data-theme'] });
+    setInterval(updatePalettes, 400);
+    window.ColorPalettes = {
+      refresh: updatePalettes,
+      getColors: (key) => {
+        const count = Number(getCssVar(`--palette-${key}-count-current`)) || 0;
+        const arr = [];
+        for (let i=0;i<count;i++) arr.push(getCssVar(`--palette-${key}-${i+1}`));
+        return arr.filter(Boolean);
+      }
+    };
+  };
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+  else bootstrap();
+})();
+
+

app/scripts/export-pdf.mjs

@@ -168,8 +168,19 @@ async function main() {
   // filename can be provided, else computed from DOM (button) or page title later
   let outFileBase = (args.filename && String(args.filename).replace(/\.pdf$/i, '')) || 'article';
 
-  console.log('> Building Astro site…');
-  await run('npm', ['run', 'build']);
+  // Build only if dist/ does not exist
+  const distDir = resolve(cwd, 'dist');
+  let hasDist = false;
+  try {
+    const st = await fs.stat(distDir);
+    hasDist = st && st.isDirectory();
+  } catch {}
+  if (!hasDist) {
+    console.log('> Building Astro site…');
+    await run('npm', ['run', 'build']);
+  } else {
+    console.log('> Skipping build (dist/ exists)…');
+  }
 
   console.log('> Starting Astro preview…');
   // Start preview in its own process group so we can terminate all children reliably
@@ -263,6 +274,8 @@ async function main() {
           }
           function fixSvg(svg){
             if (!svg) return;
+            // Do not alter banner galaxy SVG sizing; it relies on explicit width/height
+            try { if (svg.closest && svg.closest('.d3-galaxy')) return; } catch {}
             if (isSmallSvg(svg)) { lockSmallSvgSize(svg); return; }
             try { svg.removeAttribute('width'); } catch {}
             try { svg.removeAttribute('height'); } catch {}
@@ -309,7 +322,6 @@ async function main() {
         // - Ensure an SVG background (CSS background on svg element)
         const cssHandle = await page.addStyleTag({ content: `
           .hero .points { mix-blend-mode: normal !important; }
-          .d3-galaxy svg { background: var(--surface-bg); }
         ` });
         const thumbPath = resolve(cwd, 'dist', 'thumb.jpg');
         await page.screenshot({ path: thumbPath, type: 'jpeg', quality: 85, fullPage: false });
@@ -360,6 +372,8 @@ async function main() {
             }
             function fixSvg(svg){
               if (!svg) return;
+              // Do not alter banner galaxy SVG sizing; it relies on explicit width/height
+              try { if (svg.closest && svg.closest('.d3-galaxy')) return; } catch {}
               if (isSmallSvg(svg)) { lockSmallSvgSize(svg); return; }
               try { svg.removeAttribute('width'); } catch {}
               try { svg.removeAttribute('height'); } catch {}
@@ -412,8 +426,9 @@ async function main() {
 
           /* Banner centering & visibility */
           .hero .points { mix-blend-mode: normal !important; }
-          .d3-galaxy { width: 100% !important; height: 300px; max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; }
-          .d3-galaxy svg { background: var(--surface-bg); width: 100% !important; height: auto !important; }
+          /* Do NOT force a fixed height to avoid clipping in PDF */
+          .d3-galaxy { width: 100% !important; max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; }
+          .d3-galaxy svg { width: 100% !important; height: auto !important; }
         ` });
       } catch {}
       await page.pdf({

app/src/components/Accordion.astro

@@ -89,23 +89,18 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
   }
 
   .accordion__summary {
+    margin: 0;
     list-style: none;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     gap: 4px;
-    padding: 4px;
+    padding: var(--spacing-2) var(--spacing-3);
     cursor: pointer;
     color: var(--text-color);
     user-select: none;
-    position: relative;
   }
 
-  .accordion[size="big"] .accordion__summary {
-    padding: 16px;
-  }
-
-
   /* Remove conditional padding to avoid jump on close */
 
   /* Remove native marker */
@@ -116,13 +111,16 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
     content: "";
   }
 
+  .accordion[size="big"] .accordion__summary {
+    padding: 16px;
+  }
+
   .accordion__title {
     font-weight: 600;
   }
 
   .accordion__chevron {
-    position: absolute;
-    right: 8px;
+    flex: 0 0 auto;
     transition: transform 220ms ease;
     opacity: .85;
   }
@@ -165,7 +163,6 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
     padding: 0;
   }
 
-
   /* Separator between header and content when open (edge-to-edge) */
   .accordion[open] .accordion__content-wrapper::before {
     content: "";
@@ -184,7 +181,6 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
     outline-offset: 3px;
     border-radius: 8px;
   }
-  
 
 
 </style>

app/src/components/Footer.astro

@@ -215,24 +215,6 @@ const { citationText, bibtex, licence, doi } = Astro.props as Props;
     }
   }
 
-  /* Avoid duplicate numbering: hide native list markers for CSL references only */
-  .references-block #references ol,
-  .references-block .references ol,
-  .references-block .bibliography ol {
-    list-style: none;
-    padding-left: 0;
-    margin-left: 0;
-  }
-
-  @media (min-width: 768px) {
-    .references-block #references ol,
-    .references-block .references ol,
-    .references-block .bibliography ol {
-      padding-left: 0;
-      margin-left: 0;
-    }
-  }
-
   .references-block li {
     margin-bottom: 1em;
   }

app/src/components/RawHtml.astro

@@ -0,0 +1,6 @@
+---
+const { html, class: className, ariaLabel } = Astro.props;
+---
+<div class={className} role="img" aria-label={ariaLabel} set:html={html} />
+
+

app/src/components/TableOfContents.astro

@@ -24,22 +24,8 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
     const headings = articleRoot.querySelectorAll('h2, h3, h4');
     if (!headings.length) return;
 
-    // Filter out headings that should not appear in TOC
-    const normalize = (s) => String(s || '')
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, ' ')
-      .trim();
-    const isTocLabel = (s) => /^(table\s+of\s+contents?)$|^toc$/i.test(String(s || '').replace(/[^a-zA-Z0-9]+/g, ' ').trim());
-    const shouldSkip = (h) => {
-      const t = h.textContent || '';
-      const id = String(h.id || '');
-      const slug = normalize(t).replace(/\s+/g, '_');
-      if (isTocLabel(t)) return true;
-      if (isTocLabel(id.replace(/[_-]+/g, ' '))) return true;
-      if (isTocLabel(slug.replace(/[_-]+/g, ' '))) return true;
-      return false;
-    };
-    const headingsArr = Array.from(headings).filter(h => !shouldSkip(h));
+    // Inclure tous les titres H2/H3/H4 sans filtrer "Table of contents"
+    const headingsArr = Array.from(headings);
     if (!headingsArr.length) return;
 
     // Ensure unique ids for headings (deduplicate duplicates)
@@ -265,6 +251,7 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
   .table-of-contents {
     position: sticky;
     top: 32px;
+    margin-top: 12px;
   }
 
   .table-of-contents nav {

app/src/content/embeds/against-baselines-deduplicated.html

@@ -1,6 +1,6 @@
-<div class="d3-line" style="width:100%;margin:10px 0;"></div>
+<div class="d3-line d3-embed--against-baselines-dd" style="width:100%;margin:10px 0;"></div>
 <style>
-  .d3-line .d3-line__controls select {
+  .d3-embed--against-baselines-dd .d3-line__controls select {
     font-size: 12px;
     padding: 8px 28px 8px 10px;
     border: 1px solid var(--border-color);
@@ -17,21 +17,21 @@
     cursor: pointer;
     transition: border-color .15s ease, box-shadow .15s ease;
   }
-  [data-theme="dark"] .d3-line .d3-line__controls select {
+  [data-theme="dark"] .d3-embed--against-baselines-dd .d3-line__controls select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   }
-  .d3-line .d3-line__controls select:hover {
+  .d3-embed--against-baselines-dd .d3-line__controls select:hover {
     border-color: var(--primary-color);
   }
-  .d3-line .d3-line__controls select:focus {
+  .d3-embed--against-baselines-dd .d3-line__controls select:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(232,137,171,.25);
     outline: none;
   }
-  .d3-line .d3-line__controls label { gap: 8px; }
+  .d3-embed--against-baselines-dd .d3-line__controls label { gap: 8px; }
 
   /* Range slider themed with --primary-color */
-  .d3-line .d3-line__controls input[type="range"] { 
+  .d3-embed--against-baselines-dd .d3-line__controls input[type="range"] { 
     -webkit-appearance: none; 
     appearance: none; 
     width: 100%; 
@@ -40,12 +40,12 @@
     background: var(--border-color);
     outline: none;
   }
-  .d3-line .d3-line__controls input[type="range"]::-webkit-slider-runnable-track {
+  .d3-embed--against-baselines-dd .d3-line__controls input[type="range"]::-webkit-slider-runnable-track {
     height: 6px; 
     background: transparent; 
     border-radius: 999px;
   }
-  .d3-line .d3-line__controls input[type="range"]::-webkit-slider-thumb {
+  .d3-embed--against-baselines-dd .d3-line__controls input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none; 
     appearance: none; 
     width: 16px; 
@@ -56,12 +56,12 @@
     margin-top: -5px; 
     cursor: pointer;
   }
-  .d3-line .d3-line__controls input[type="range"]::-moz-range-track {
+  .d3-embed--against-baselines-dd .d3-line__controls input[type="range"]::-moz-range-track {
     height: 6px; 
     background: transparent; 
     border-radius: 999px;
   }
-  .d3-line .d3-line__controls input[type="range"]::-moz-range-thumb {
+  .d3-embed--against-baselines-dd .d3-line__controls input[type="range"]::-moz-range-thumb {
     width: 16px; 
     height: 16px; 
     border-radius: 50%; 
@@ -70,7 +70,7 @@
     cursor: pointer;
   }
   /* Improved line color via CSS */
-  .d3-line .lines path.improved { stroke: var(--primary-color); }
+  .d3-embed--against-baselines-dd .lines path.improved { stroke: var(--primary-color); }
 </style>
 <script>
   (() => {
@@ -173,24 +173,25 @@
       const defs = svg.append('defs');
       // Clip-path to constrain drawing to chart area
       const clipId = `clip-${Math.random().toString(36).slice(2)}`;
-      const clipPath = defs.append('clipPath').attr('id', clipId);
+      const clipPath = defs.append('clipPath').attr('id', clipId)
+        .attr('clipPathUnits', 'userSpaceOnUse');
       const clipRect = clipPath.append('rect').attr('x', 0).attr('y', 0).attr('width', 0).attr('height', 0);
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 8;
+      const markerSize = 5;
 
       // Groups
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
-      const gAreas = gRoot.append('g').attr('class', 'areas');
-      const gLines = gRoot.append('g').attr('class', 'lines');
-      const gPoints = gRoot.append('g').attr('class', 'points');
-      // Apply clipping to plotted elements (areas, lines, points)
-      gAreas.attr('clip-path', `url(#${clipId})`);
-      gLines.attr('clip-path', `url(#${clipId})`);
-      gPoints.attr('clip-path', `url(#${clipId})`);
+      // Dedicated plotting layer that will be clipped
+      const gPlot = gRoot.append('g').attr('class', 'plot');
+      const gAreas = gPlot.append('g').attr('class', 'areas');
+      const gLines = gPlot.append('g').attr('class', 'lines');
+      const gPoints = gPlot.append('g').attr('class', 'points');
+      // Apply clipping to the whole plotting group
+      gPlot.attr('clip-path', `url(#${clipId})`);
       const gHover = gRoot.append('g').attr('class', 'hover');
       const gLegend = gRoot.append('foreignObject').attr('class', 'legend');
 
@@ -253,8 +254,8 @@
       // Scales and layout
       let width = 800, height = 360;
       let margin = { top: 16, right: 28, bottom: 56, left: 64 };
-      let xScale = d3.scaleLinear();
-      let yScale = d3.scaleLinear();
+      let xScale = d3.scaleLinear().clamp(true);
+      let yScale = d3.scaleLinear().clamp(true);
 
       // Line generators - simple linear connections
       const lineGen = d3.line()
@@ -318,8 +319,23 @@
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
 
-        // Update clip rect to match inner plotting area
-        clipRect.attr('width', innerWidth).attr('height', innerHeight);
+        // Responsive legend layout: wrap to two lines on narrower screens
+        try {
+          const shouldWrapLegend = width < 1300;
+          if (legendInline && legendInline.style) {
+            legendInline.style.flexWrap = shouldWrapLegend ? 'wrap' : 'nowrap';
+            legendInline.style.rowGap = shouldWrapLegend ? '4px' : '';
+            legendInline.style.maxWidth = shouldWrapLegend ? Math.max(280, Math.round(width * 0.62)) + 'px' : 'unset';
+            legendInline.style.alignItems = shouldWrapLegend ? 'flex-start' : 'center';
+          }
+        } catch {}
+
+        // Update clip rect to match inner plotting area (coords local to gRoot)
+        clipRect
+          .attr('x', 0)
+          .attr('y', 0)
+          .attr('width', innerWidth)
+          .attr('height', innerHeight);
 
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
@@ -442,8 +458,13 @@
         if (!isFinite(minStep) || !isFinite(maxStep)) { return; }
         xScale.domain([minStep, maxStep]);
         if (isRank) {
-          rankTickMax = Math.max(1, Math.round(maxVal));
-          yScale.domain([rankTickMax, 1]);
+          // Strict rank → arrondi au supérieur entier observé
+          // Average rank → forcer un plancher visuel à 4 pour une petite marge en bas
+          const bottom = isRankStrict
+            ? Math.max(1, Math.round(maxVal))
+            : Math.max(4, Math.ceil(maxVal + 0.001));
+          rankTickMax = bottom;
+          yScale.domain([rankTickMax, 1]).nice();
         } else {
           yScale.domain([minVal, maxVal]).nice();
         }
@@ -483,15 +504,15 @@
         // Draw lines
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
-          .attr('stroke', d=>d.color).attr('opacity',0.9)
+          .attr('stroke-linejoin','round').attr('stroke-linecap','round')
+          .attr('stroke', d=>d.color).attr('opacity',0.95)
           .attr('d', d=>lineGen(d.values))
           .merge(paths)
-          .transition().duration(200)
           .attr('stroke', d=>d.color)
           .attr('d', d=>lineGen(d.values));
         paths.exit().remove();
 
-        // Draw markers for each data point
+        // Draw markers for each data point (clipped with gPlot)
         gPoints.selectAll('*').remove();
         series.forEach((s, seriesIndex) => {
           const pointGroup = gPoints.selectAll(`.points-${seriesIndex}`)
@@ -499,11 +520,10 @@
             .join('g')
             .attr('class', `points-${seriesIndex}`)
             .attr('transform', d => `translate(${xScale(d.step)},${yScale(d.value)})`);
-          
           drawMarker(pointGroup, s.marker, markerSize)
             .attr('fill', s.color)
             .attr('stroke', s.color)
-            .attr('stroke-width', 1.5)
+            .attr('stroke-width', 1.2)
             .style('cursor', 'crosshair');
         });
 

app/src/content/embeds/against-baselines.html

@@ -1,6 +1,6 @@
-<div class="d3-line" style="width:100%;margin:10px 0;"></div>
+<div class="d3-line d3-embed--against-baselines" style="width:100%;margin:10px 0;"></div>
 <style>
-  .d3-line .d3-line__controls select {
+  .d3-embed--against-baselines .d3-line__controls select {
     font-size: 12px;
     padding: 8px 28px 8px 10px;
     border: 1px solid var(--border-color);
@@ -17,21 +17,21 @@
     cursor: pointer;
     transition: border-color .15s ease, box-shadow .15s ease;
   }
-  [data-theme="dark"] .d3-line .d3-line__controls select {
+  [data-theme="dark"] .d3-embed--against-baselines .d3-line__controls select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   }
-  .d3-line .d3-line__controls select:hover {
+  .d3-embed--against-baselines .d3-line__controls select:hover {
     border-color: var(--primary-color);
   }
-  .d3-line .d3-line__controls select:focus {
+  .d3-embed--against-baselines .d3-line__controls select:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(232,137,171,.25);
     outline: none;
   }
-  .d3-line .d3-line__controls label { gap: 8px; }
+  .d3-embed--against-baselines .d3-line__controls label { gap: 8px; }
 
   /* Range slider themed with --primary-color */
-  .d3-line .d3-line__controls input[type="range"] { 
+  .d3-embed--against-baselines .d3-line__controls input[type="range"] { 
     -webkit-appearance: none; 
     appearance: none; 
     width: 100%; 
@@ -40,12 +40,12 @@
     background: var(--border-color);
     outline: none;
   }
-  .d3-line .d3-line__controls input[type="range"]::-webkit-slider-runnable-track {
+  .d3-embed--against-baselines .d3-line__controls input[type="range"]::-webkit-slider-runnable-track {
     height: 6px; 
     background: transparent; 
     border-radius: 999px;
   }
-  .d3-line .d3-line__controls input[type="range"]::-webkit-slider-thumb {
+  .d3-embed--against-baselines .d3-line__controls input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none; 
     appearance: none; 
     width: 16px; 
@@ -56,12 +56,12 @@
     margin-top: -5px; 
     cursor: pointer;
   }
-  .d3-line .d3-line__controls input[type="range"]::-moz-range-track {
+  .d3-embed--against-baselines .d3-line__controls input[type="range"]::-moz-range-track {
     height: 6px; 
     background: transparent; 
     border-radius: 999px;
   }
-  .d3-line .d3-line__controls input[type="range"]::-moz-range-thumb {
+  .d3-embed--against-baselines .d3-line__controls input[type="range"]::-moz-range-thumb {
     width: 16px; 
     height: 16px; 
     border-radius: 50%; 
@@ -70,7 +70,7 @@
     cursor: pointer;
   }
   /* Improved line color via CSS */
-  .d3-line .lines path.improved { stroke: var(--primary-color); }
+  .d3-embed--against-baselines .lines path.improved { stroke: var(--primary-color); }
 </style>
 <script>
   (() => {
@@ -166,12 +166,16 @@
         .attr('width', '100%')
         .style('display', 'block');
 
-      // Add marker definitions for different shapes
+      // Add marker definitions and clipPath for chart area
       const defs = svg.append('defs');
+      const clipId = `clip-${Math.random().toString(36).slice(2)}`;
+      const clipPath = defs.append('clipPath').attr('id', clipId)
+        .attr('clipPathUnits', 'userSpaceOnUse');
+      const clipRect = clipPath.append('rect').attr('x', 0).attr('y', 0).attr('width', 0).attr('height', 0);
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 8;
+      const markerSize = 5;
 
       // Groups
       const gRoot = svg.append('g');
@@ -181,6 +185,10 @@
       const gLines = gRoot.append('g').attr('class', 'lines');
       const gErrors = gRoot.append('g').attr('class', 'errors');
       const gPoints = gRoot.append('g').attr('class', 'points');
+      // Constrain plotted layers to inner chart area
+      gAreas.attr('clip-path', `url(#${clipId})`);
+      gLines.attr('clip-path', `url(#${clipId})`);
+      gPoints.attr('clip-path', `url(#${clipId})`);
       const gHover = gRoot.append('g').attr('class', 'hover');
       const gLegend = gRoot.append('foreignObject').attr('class', 'legend');
 
@@ -312,6 +320,13 @@
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 
+        // Update clip rect to match inner plotting area (coords of gRoot after translate)
+        clipRect
+          .attr('x', 0)
+          .attr('y', 0)
+          .attr('width', innerWidth)
+          .attr('height', innerHeight);
+
         // Compute Y ticks
         let yTicks = [];
         if (isRankStrictFlag) {

app/src/content/embeds/all-ratings.html

@@ -171,7 +171,7 @@
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 8;
+      const markerSize = 5;
 
       // Groups
       const gRoot = svg.append('g');

app/src/content/embeds/banner.html

@@ -1,4 +1,4 @@
-<div class="d3-galaxy" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:360px;"></div>
+<div class="d3-galaxy" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:360px; display:flex; align-items:center; justify-content:center;"></div>
 <script>
   (() => {
     const THIS_SCRIPT = document.currentScript;
@@ -43,9 +43,15 @@
 
       const csvUrl = (container.dataset && container.dataset.src) || '/data/banner_visualisation_data.csv';
 
+      // Assurer un fond transparent pour l'ensemble du composant
+      if (container && container.style) {
+        container.style.background = 'transparent';
+      }
+
       const svg = d3.select(container).append('svg')
         .attr('width', '100%')
-        .style('display', 'block');
+        .style('display', 'block')
+        .style('background', 'transparent');
 
       // Tooltip (reuse style from other embeds)
       container.style.position = container.style.position || 'relative';
@@ -272,7 +278,7 @@
                 
                 tipInner.innerHTML =
                   `<div style="display:flex; gap:10px; align-items:flex-start;">` +
-                    `<img src="${imgSrc}" alt="thumb ${d.original_id}" style="width:120px;height:120px;object-fit:contain;flex:0 0 auto;border-radius:6px;border:1px solid var(--border-color);background:var(--surface-bg);" />` +
+                    `<img src="${imgSrc}" alt="thumb ${d.original_id}" style="width:120px;height:120px;object-fit:cover;flex:0 0 auto;border-radius:6px;border:1px solid var(--border-color);" />` +
                     `<div style="min-width:140px; max-width:200px;">` +
                       `<div><strong>${d.category || 'Unknown'}</strong></div>` +
                       `<div style="word-wrap:break-word; line-height:1.3; margin:4px 0;"><strong>Q:</strong> ${userText}</div>` +

app/src/content/embeds/d3-pie.html

@@ -93,7 +93,7 @@
       const CAPTION_GAP = 24;   // espace entre titre et donut
       const GAP_X = 20;         // espace entre colonnes
       const GAP_Y = 12;         // espace entre lignes
-      const LEGEND_HEIGHT = 44; // hauteur de la légende
+      const BASE_LEGEND_HEIGHT = 56; // hauteur minimale de la légende (augmentée pour éviter la troncature mobile)
       const TOP_OFFSET = 4;     // décalage vertical supplémentaire pour aérer le haut
       const updateSize = () => {
         width = container.clientWidth || 800;
@@ -103,15 +103,27 @@
       };
 
       function renderLegend(categories, colorOf, innerWidth, legendY){
-        const legendHeight = LEGEND_HEIGHT;
-        gLegend.attr('x', 0).attr('y', legendY).attr('width', innerWidth).attr('height', legendHeight);
+        const minHeight = BASE_LEGEND_HEIGHT;
+        gLegend.attr('x', 0).attr('y', legendY).attr('width', innerWidth);
         const root = gLegend.selectAll('div').data([0]).join('xhtml:div');
         root
-          .style('height', legendHeight + 'px')
+          .style('min-height', minHeight + 'px')
           .style('display', 'flex')
           .style('align-items', 'center')
           .style('justify-content', 'center');
         root.html(`<div class="items">${categories.map(c => `<div class="item"><span class="swatch" style="background:${colorOf(c)}"></span><span style="font-weight:500">${c}</span></div>`).join('')}</div>`);
+
+        // Mesurer la hauteur réelle (contenu potentiellement sur plusieurs lignes en mobile)
+        let measured = minHeight;
+        try {
+          const n = root.node();
+          const h1 = n && n.scrollHeight ? Math.ceil(n.scrollHeight) : 0;
+          const h2 = n ? Math.ceil(n.getBoundingClientRect().height) : 0;
+          measured = Math.max(minHeight, h1, h2);
+        } catch {}
+        gLegend.attr('height', measured);
+        root.style('height', measured + 'px');
+        return measured;
       }
 
       function drawPies(rows){
@@ -174,7 +186,7 @@
         const legendY = TOP_OFFSET + plotsHeight + 4;
         // Légende centrée globalement (pleine largeur du conteneur)
         gLegend.attr('x', 0).attr('width', innerWidth);
-        renderLegend(categories, colorOf, innerWidth, legendY);
+        const legendHeightUsed = renderLegend(categories, colorOf, innerWidth, legendY);
 
         const captions = new Map(METRICS.map(m => [m.key, `${m.title}`]));
 
@@ -232,7 +244,7 @@
         });
 
         // Définir la hauteur totale du SVG après avoir placé les éléments
-        const totalHeight = Math.ceil(margin.top + TOP_OFFSET + plotsHeight + 4 + LEGEND_HEIGHT + margin.bottom);
+        const totalHeight = Math.ceil(margin.top + TOP_OFFSET + plotsHeight + 4 + (typeof legendHeightUsed === 'number' ? legendHeightUsed : BASE_LEGEND_HEIGHT) + margin.bottom);
         svg.attr('height', totalHeight);
       }
 

app/src/content/embeds/filters-quad.html

@@ -15,7 +15,7 @@
   @media (max-width: 980px) { .filters-quad__grid { grid-template-columns: 1fr; } }
 
   .filters-quad__controls { display:flex; align-items:center; justify-content:center; gap:12px; margin: 6px 0 12px 0; flex-wrap:wrap; }
-  .filters-quad__controls label { font-size:11px; color: var(--muted-color); opacity: .8; display:flex; align-items:center; gap:8px; }
+  .filters-quad__controls label { font-size:14px; color: var(--text-color); font-weight:600; display:flex; align-items:center; gap:8px; }
   .filters-quad__controls select {
     font-size: 14px; padding: 8px 32px 8px 12px; border: 1px solid var(--border-color); border-radius: 10px;
     background-color: var(--surface-bg); color: var(--text-color);
@@ -28,7 +28,7 @@
   .filters-quad__controls select:hover { border-color: var(--primary-color); }
   .filters-quad__controls select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(232,137,171,.25); outline: none; }
 
-  .filters-quad__legend { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; font-size:14px; color: var(--text-color); margin: 2px 0 10px 0; }
+  .filters-quad__legend { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; font-size:12px; color: var(--text-color); margin: 2px 0 10px 0; }
   .filters-quad__legend .item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
   .filters-quad__legend .swatch { width:10px; height:10px; border-radius:50%; display:inline-block; }
 
@@ -73,6 +73,26 @@
       s.addEventListener('load', onReady, { once: true }); if (window.d3) onReady();
     };
 
+    // Mapping métrique -> libellé lisible (aligné avec les autres embeds)
+    const metricTitleMapping = {
+      'docvqa_val_anls': 'DocVQA',
+      'infovqa_val_anls': 'InfoVQA',
+      'mme_total_score': 'MME Total',
+      'mmmu_val_mmmu_acc': 'MMMU',
+      'mmstar_average': 'MMStar',
+      'ocrbench_ocrbench_accuracy': 'OCRBench',
+      'scienceqa_exact_match': 'ScienceQA',
+      'textvqa_val_exact_match': 'TextVQA',
+      'average': 'Average',
+      'average_rank': 'Average Rank',
+      'ai2d_exact_match': 'AI2D',
+      'chartqa_relaxed_overall': 'ChartQA',
+      'seedbench_seed_all': 'SeedBench'
+    };
+    function getMetricDisplayName(metricKey){
+      return metricTitleMapping[metricKey] || metricKey;
+    }
+
     function initRunLine(cell){
       const d3 = window.d3;
       const csvPath = cell.getAttribute('data-csv');
@@ -107,14 +127,12 @@
       const xScale = d3.scaleLinear(); const yScale = d3.scaleLinear();
       const lineGen = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value));
       let isRankStrictFlag = false; let rankTickMax = 1;
-      // Optional shared Y domain override (set from outside to sync the 4 charts)
-      let yDomainOverride = null; // { metricKey, domain:[min,max] | [max,1] for rank, isRankStrict, rankTickMax }
       
       // Colors and markers (match original embeds)
       const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
       const pool = [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10||[])];
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 9;
+      const markerSize = 5;
       function drawMarker(selection, shape, size) {
         const s = size / 2;
         switch (shape) {
@@ -132,6 +150,24 @@
             return selection.append('circle').attr('r', s);
         }
       }
+      // Small SVG markup for marker shape (used in hover)
+      function shapeSvgMarkup(shape, color) {
+        const stroke = color;
+        switch (shape) {
+          case 'circle':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'square':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><rect x="-5" y="-5" width="10" height="10" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'triangle':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L5,3 L-5,3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'diamond':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L6,0 L0,6 L-6,0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'inverted-triangle':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,6 L5,-3 L-5,-3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          default:
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        }
+      }
       // Ready signal for async load completion
       let readyResolve = null;
       const ready = new Promise((res)=> { readyResolve = res; });
@@ -165,8 +201,8 @@
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0); xAxis = xAxis.ticks(8);
         const yAxis = d3.axisLeft(yScale).tickValues(yTicks).tickSizeOuter(0).tickFormat(isRankStrictFlag ? d3.format('d') : d3.format('.2f'));
-        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(xAxis).call(g=>{ g.selectAll('path, line').attr('stroke',axisColor); g.selectAll('text').attr('fill',tickColor).style('font-size','12px'); });
-        gAxes.append('g').call(yAxis).call(g=>{ g.selectAll('path, line').attr('stroke',axisColor); g.selectAll('text').attr('fill',tickColor).style('font-size','12px'); });
+        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(xAxis).call(g=>{ g.selectAll('path, line').attr('stroke',axisColor); g.selectAll('text').attr('fill',tickColor).style('font-size','11px'); });
+        gAxes.append('g').call(yAxis).call(g=>{ g.selectAll('path, line').attr('stroke',axisColor); g.selectAll('text').attr('fill',tickColor).style('font-size','11px'); });
 
         // Legend box (top-right)
         // Per-cell legend hidden; global legend is used
@@ -185,14 +221,7 @@
         runs.forEach(r => { (map[r]||[]).forEach(pt => { const v = isRankStrict ? Math.round(pt.value) : pt.value; minStep=Math.min(minStep,pt.step); maxStep=Math.max(maxStep,pt.step); maxVal=Math.max(maxVal,v); minVal=Math.min(minVal,v); }); });
         if (!isFinite(minStep) || !isFinite(maxStep)) return;
         xScale.domain([minStep, maxStep]); if (isRank) { rankTickMax = Math.max(1, Math.round(maxVal)); yScale.domain([rankTickMax, 1]); } else { yScale.domain([minVal, maxVal]).nice(); }
-        // Apply shared Y domain override if provided for this metric
-        if (yDomainOverride && yDomainOverride.metricKey === metricKey && Array.isArray(yDomainOverride.domain)) {
-          isRankStrictFlag = !!yDomainOverride.isRankStrict;
-          rankTickMax = yDomainOverride.rankTickMax != null ? yDomainOverride.rankTickMax : rankTickMax;
-          yScale.domain(yDomainOverride.domain);
-        } else {
-          isRankStrictFlag = isRankStrict;
-        }
+        isRankStrictFlag = isRankStrict;
 
         const { innerWidth, innerHeight } = updateScales();
 
@@ -237,24 +266,31 @@
         // Hover
         gHover.selectAll('*').remove();
         const overlay = gHover.append('rect').attr('fill','transparent').style('cursor','crosshair').attr('x',0).attr('y',0).attr('width', innerWidth).attr('height', innerHeight);
-        const axisColor = document.documentElement.getAttribute('data-theme') === 'dark' ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
-        const hoverLine = gHover.append('line').attr('stroke',axisColor).attr('stroke-width',1).attr('y1',0).attr('y2',innerHeight).style('display','none');
+        const hoverLine = gHover.append('line').attr('stroke','rgba(0,0,0,0.25)').attr('stroke-width',1).attr('y1',0).attr('y2',innerHeight).style('display','none');
         const stepSet = new Set(); series.forEach(s=>s.values.forEach(v=>stepSet.add(v.step))); const steps = Array.from(stepSet).sort((a,b)=>a-b);
-        function onMove(ev){ const [mx,my]=d3.pointer(ev, overlay.node()); const nearest = steps.reduce((best,s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]); const xpx = xScale(nearest); hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null);
+        function onMove(ev){
+          const [mx,my] = d3.pointer(ev, overlay.node());
+          const nearest = steps.reduce((best,s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
+          const xpx = xScale(nearest);
+          hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null);
           let html = `<div><strong>${titleText}</strong></div><div><strong>step</strong> ${nearest}</div>`;
-          const withPt = series.map(s=>{ const m=new Map(s.values.map(v=>[v.step,v])); const pt=m.get(nearest); return {s, pt}; }).filter(d=>d.pt && d.pt.value!=null);
-          withPt.sort((a,b)=> isRankStrictFlag ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
-          const shapeSvg = (shape, color) => {
-            const size=9, half=size/2, cx=9, cy=7, sw='1';
-            if(shape==='circle') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><circle r="${half}" fill="${color}" stroke="${color}" stroke-width="${sw}"/></g></svg>`;
-            if(shape==='square') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><rect x="${-half}" y="${-half}" width="${size}" height="${size}" fill="${color}" stroke="${color}" stroke-width="${sw}"/></g></svg>`;
-            if(shape==='triangle') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><path d="M0,${-half*1.2} L${half*1.1},${half*0.6} L${-half*1.1},${half*0.6} Z" fill="${color}" stroke="${color}" stroke-width="${sw}"/></g></svg>`;
-            if(shape==='diamond') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><path d="M0,${-half*1.2} L${half*1.1},0 L0,${half*1.2} L${-half*1.1},0 Z" fill="${color}" stroke="${color}" stroke-width="${sw}"/></g></svg>`;
-            if(shape==='inverted-triangle') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><path d="M0,${half*1.2} L${half*1.1},${-half*0.6} L${-half*1.1},${-half*0.6} Z" fill="${color}" stroke="${color}" stroke-width="${sw}"/></g></svg>`;
-            return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><circle r="${half}" fill="${color}" stroke="${color}" stroke-width="${sw}"/></g></svg>`;
-          };
-          withPt.forEach(({s,pt})=>{ const fmt=(vv)=> (isRankStrictFlag? d3.format('d')(vv) : (+vv).toFixed(4)); const err=(pt.stderr!=null && isFinite(pt.stderr) && pt.stderr>0)? ` ± ${fmt(pt.stderr)}` : ''; html+=`<div style="display:flex;align-items:center;gap:6px;white-space:nowrap;">${shapeSvg(s.marker, s.color)}<strong>${s.run}</strong> ${fmt(pt.value)}${err}</div>`; });
-          tipInner.innerHTML = html; const offsetX=12, offsetY=12; tip.style.opacity='1'; tip.style.transform=`translate(${Math.round(mx+offsetX+margin.left)}px, ${Math.round(my+offsetY+margin.top)}px)`; }
+          const items = [];
+          series.forEach(s => {
+            const m = new Map(s.values.map(v=>[v.step, v]));
+            const pt = m.get(nearest);
+            if (pt && pt.value != null) items.push({ s, pt });
+          });
+          const fmt = (vv)=> (isRankStrictFlag ? d3.format('d')(vv) : (+vv).toFixed(4));
+          items.sort((a,b)=> isRankStrictFlag ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
+          items.forEach(({ s, pt }) => {
+            const err = (pt.stderr!=null && isFinite(pt.stderr) && pt.stderr>0) ? ` ± ${fmt(pt.stderr)}` : '';
+            html += `<div style=\"display:flex;align-items:center;gap:6px;\">${shapeSvgMarkup(s.marker, s.color)}<strong>${s.run}</strong> ${fmt(pt.value)}${err}</div>`;
+          });
+          tipInner.innerHTML = html;
+          const offsetX=12, offsetY=12;
+          tip.style.opacity='1';
+          tip.style.transform=`translate(${Math.round(mx+offsetX+margin.left)}px, ${Math.round(my+offsetY+margin.top)}px)`;
+        }
         function onLeave(){ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; hoverLine.style('display','none'); }
         overlay.on('mousemove', onMove).on('mouseleave', onLeave);
       }
@@ -278,7 +314,9 @@
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort(); runOrder = runList;
           metricList.forEach(m => { const map={}; runList.forEach(r=>map[r]=[]); rows.filter(r=>r.metric===m).forEach(r=>{ if(!isNaN(r.step)&&!isNaN(r.value)) map[r.run].push({ step:r.step, value:r.value, stderr:r.stderr }); }); dataByMetric.set(m, map); });
-          const def = metricList.find(m => /average_rank/i.test(m)) || metricList[0];
+          // Par défaut, privilégier average_rank, sinon premier dispo
+          const preferred = metricList.find(m => /average_rank/i.test(m)) || metricList.find(m => m === 'ai2d_exact_match');
+          const def = preferred || metricList[0];
           renderMetric(def);
           const ro = window.ResizeObserver ? new ResizeObserver(()=>renderMetric(def)) : null; if (ro) ro.observe(cell);
           if (typeof readyResolve === 'function') readyResolve();
@@ -293,21 +331,7 @@
       return {
         ready,
         getMetrics: () => metricList.slice(),
-        setMetric: (m) => { if (m) renderMetric(m); },
-        // Expose extent for a given metric so the host can compute a shared Y domain
-        getExtent: (metricKey) => {
-          const map = dataByMetric.get(metricKey) || {};
-          const runs = runOrder;
-          let maxVal = -Infinity, minVal = Infinity;
-          const isRank = /rank/i.test(metricKey); const isAverage = /average/i.test(metricKey); const isRankStrict = isRank && !isAverage;
-          runs.forEach(r => { (map[r]||[]).forEach(pt => { const v = isRankStrict ? Math.round(pt.value) : pt.value; if (isFinite(v)) { maxVal=Math.max(maxVal,v); minVal=Math.min(minVal,v); } }); });
-          if (!isFinite(minVal) || !isFinite(maxVal)) return null;
-          return { min: minVal, max: maxVal, isRankStrict };
-        },
-        // Allow host to set a shared Y domain override (persisted across resizes)
-        setYDomainOverride: (metricKey, domain, isRankStrict, sharedRankTickMax) => {
-          yDomainOverride = { metricKey, domain, isRankStrict: !!isRankStrict, rankTickMax: sharedRankTickMax };
-        }
+        setMetric: (m) => { if (m) renderMetric(m); }
       };
     }
 
@@ -340,37 +364,19 @@
         const intersect = (arrs) => arrs.reduce((acc, cur) => acc.filter(x => cur.includes(x)));
         let metrics = lists.length ? intersect(lists) : [];
         if (!metrics.length) { metrics = lists[0] || []; }
-        const def = metrics.find(m => /average_rank/i.test(m)) || metrics[0] || '';
+        // Par défaut: average_rank si présent (pas AI2D)
+        const def = (metrics.find(m => /average_rank/i.test(m)) || metrics[0] || '');
 
         let ctrl = host.querySelector('.filters-quad__controls');
         if (!ctrl) { ctrl = document.createElement('div'); ctrl.className = 'filters-quad__controls'; host.insertBefore(ctrl, host.firstChild); }
         ctrl.innerHTML = '';
         const label = document.createElement('label'); label.textContent = 'Metric';
         const select = document.createElement('select');
-        metrics.forEach(m => { const o=document.createElement('option'); o.value=m; o.textContent=m; select.appendChild(o); });
+        metrics.forEach(m => { const o=document.createElement('option'); o.value=m; o.textContent=getMetricDisplayName(m); select.appendChild(o); });
         if (def) select.value = def;
         label.appendChild(select); ctrl.appendChild(label);
 
-        const applyAll = (v) => {
-          // Compute shared Y domain across all instances for selected metric
-          const isRank = /rank/i.test(v); const isAverage = /average/i.test(v); const isRankStrict = isRank && !isAverage;
-          const extents = instances.map(i => (i && typeof i.getExtent === 'function') ? i.getExtent(v) : null).filter(Boolean);
-          if (!extents.length) { instances.forEach(i => i && typeof i.setMetric === 'function' && i.setMetric(v)); return; }
-          let globalMin = Math.min(...extents.map(e => e.min));
-          let globalMax = Math.max(...extents.map(e => e.max));
-          let domain, rankTickMax;
-          if (isRankStrict) {
-            rankTickMax = Math.max(1, Math.round(globalMax));
-            domain = [rankTickMax, 1];
-          } else {
-            domain = [globalMin, globalMax];
-          }
-          // Apply override then render
-          instances.forEach(i => {
-            if (i && typeof i.setYDomainOverride === 'function') i.setYDomainOverride(v, domain, isRankStrict, rankTickMax);
-            if (i && typeof i.setMetric === 'function') i.setMetric(v);
-          });
-        };
+        const applyAll = (v) => instances.forEach(i => i && typeof i.setMetric === 'function' && i.setMetric(v));
         if (def) applyAll(def);
         select.addEventListener('change', () => applyAll(select.value));
 
@@ -383,19 +389,18 @@
             if (r.ok && window.d3 && window.d3.csvParse) {
               const txt = await r.text();
               const rows = window.d3.csvParse(txt);
-              let runList = Array.from(new Set(rows.map(row => String(row.run||'').trim()).filter(Boolean)));
-              if (runList.includes('FineVision')) { runList = ['FineVision', ...runList.filter(r => r !== 'FineVision')]; }
+              const runList = Array.from(new Set(rows.map(row => String(row.run||'').trim()).filter(Boolean)));
               const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
               const pool = [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...((window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab'])];
               const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
               const shapeSVG = (shape, color) => {
-                const size = 9; const s = size/2; const stroke = color;
-                if (shape === 'circle') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(9,7)"><circle r="${s}" fill="${color}" stroke="${stroke}" stroke-width="1" /></g></svg>`;
-                if (shape === 'square') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(9,7)"><rect x="${-s}" y="${-s}" width="${size}" height="${size}" fill="${color}" stroke="${stroke}" stroke-width="1" /></g></svg>`;
-                if (shape === 'triangle') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(9,7)"><path d="M0,${-s*1.2} L${s*1.1},${s*0.6} L${-s*1.1},${s*0.6} Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></g></svg>`;
-                if (shape === 'diamond') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(9,7)"><path d="M0,${-s*1.2} L${s*1.1},0 L0,${s*1.2} L${-s*1.1},0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></g></svg>`;
-                if (shape === 'inverted-triangle') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(9,7)"><path d="M0,${s*1.2} L${s*1.1},${-s*0.6} L${-s*1.1},${-s*0.6} Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></g></svg>`;
-                return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(9,7)"><circle r="${s}" fill="${color}" stroke="${stroke}" stroke-width="1" /></g></svg>`;
+                const size = 12; const s = size/2; const stroke = color;
+                if (shape === 'circle') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+                if (shape === 'square') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><rect x="-5" y="-5" width="10" height="10" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+                if (shape === 'triangle') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L5,3 L-5,3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+                if (shape === 'diamond') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L6,0 L0,6 L-6,0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+                if (shape === 'inverted-triangle') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,6 L5,-3 L-5,-3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+                return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
               };
               legendHost.innerHTML = runList.map((name, i)=> {
                 const color = pool[i % pool.length];

app/src/content/embeds/formatting-filters.html

@@ -171,7 +171,7 @@
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 8;
+      const markerSize = 5;
 
       // Groups
       const gRoot = svg.append('g');

app/src/content/embeds/image-correspondence-filters.html

@@ -171,7 +171,7 @@
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 8;
+      const markerSize = 5;
 
       // Groups
       const gRoot = svg.append('g');

app/src/content/embeds/internal-deduplication.html

@@ -166,20 +166,26 @@
         .attr('width', '100%')
         .style('display', 'block');
 
-      // Add marker definitions for different shapes
+      // Add marker definitions and clipPath for chart area
       const defs = svg.append('defs');
+      const clipId = `clip-${Math.random().toString(36).slice(2)}`;
+      const clipPath = defs.append('clipPath').attr('id', clipId)
+        .attr('clipPathUnits', 'userSpaceOnUse');
+      const clipRect = clipPath.append('rect').attr('x', 0).attr('y', 0).attr('width', 0).attr('height', 0);
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 8;
+      const markerSize = 5;
 
       // Groups
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
-      const gAreas = gRoot.append('g').attr('class', 'areas');
-      const gLines = gRoot.append('g').attr('class', 'lines');
-      const gPoints = gRoot.append('g').attr('class', 'points');
+      // Dedicated plotting layer that will be clipped
+      const gPlot = gRoot.append('g').attr('class', 'plot');
+      const gAreas = gPlot.append('g').attr('class', 'areas');
+      const gLines = gPlot.append('g').attr('class', 'lines');
+      const gPoints = gPlot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
       const gLegend = gRoot.append('foreignObject').attr('class', 'legend');
 
@@ -242,8 +248,8 @@
       // Scales and layout
       let width = 800, height = 360;
       let margin = { top: 16, right: 28, bottom: 56, left: 64 };
-      let xScale = d3.scaleLinear();
-      let yScale = d3.scaleLinear();
+      let xScale = d3.scaleLinear().clamp(true);
+      let yScale = d3.scaleLinear().clamp(true);
 
       // Line generators - simple linear connections
       const lineGen = d3.line()
@@ -310,6 +316,13 @@
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 
+        // Update clip rect to match inner plotting area (coords local to gRoot)
+        clipRect
+          .attr('x', 0)
+          .attr('y', 0)
+          .attr('width', innerWidth)
+          .attr('height', innerHeight);
+
         // Compute Y ticks
         let yTicks = [];
         if (isRankStrictFlag) {
@@ -428,8 +441,8 @@
         if (!isFinite(minStep) || !isFinite(maxStep)) { return; }
         xScale.domain([minStep, maxStep]);
         if (isRank) {
-          rankTickMax = Math.max(1, Math.round(maxVal));
-          yScale.domain([rankTickMax, 1]);
+          rankTickMax = isRankStrict ? Math.max(1, Math.round(maxVal)) : Math.max(1, maxVal);
+          yScale.domain([rankTickMax, 1]).nice();
         } else {
           yScale.domain([minVal, maxVal]).nice();
         }

app/src/content/embeds/relevance-filters.html

@@ -171,7 +171,7 @@
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 8;
+      const markerSize = 5;
 
       // Groups
       const gRoot = svg.append('g');

app/src/content/embeds/remove-ch.html

@@ -171,7 +171,7 @@
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 9;
+      const markerSize = 5;
 
       // Groups
       const gRoot = svg.append('g');

app/src/content/embeds/s25-ratings.html

@@ -171,7 +171,7 @@
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 8;
+      const markerSize = 5;
 
       // Groups
       const gRoot = svg.append('g');

app/src/content/embeds/ss-vs-s1.html

@@ -171,7 +171,7 @@
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 8;
+      const markerSize = 5;
 
       // Groups
       const gRoot = svg.append('g');

app/src/content/embeds/visual-dependency-filters.html

@@ -166,20 +166,26 @@
         .attr('width', '100%')
         .style('display', 'block');
 
-      // Add marker definitions for different shapes
+      // Add marker definitions and clipPath for chart area
       const defs = svg.append('defs');
+      const clipId = `clip-${Math.random().toString(36).slice(2)}`;
+      const clipPath = defs.append('clipPath').attr('id', clipId)
+        .attr('clipPathUnits', 'userSpaceOnUse');
+      const clipRect = clipPath.append('rect').attr('x', 0).attr('y', 0).attr('width', 0).attr('height', 0);
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 8;
+      const markerSize = 5;
 
       // Groups
       const gRoot = svg.append('g');
       const gGrid = gRoot.append('g').attr('class', 'grid');
       const gAxes = gRoot.append('g').attr('class', 'axes');
-      const gAreas = gRoot.append('g').attr('class', 'areas');
-      const gLines = gRoot.append('g').attr('class', 'lines');
-      const gPoints = gRoot.append('g').attr('class', 'points');
+      // Dedicated plotting layer that will be clipped
+      const gPlot = gRoot.append('g').attr('class', 'plot');
+      const gAreas = gPlot.append('g').attr('class', 'areas');
+      const gLines = gPlot.append('g').attr('class', 'lines');
+      const gPoints = gPlot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
       const gLegend = gRoot.append('foreignObject').attr('class', 'legend');
 
@@ -242,8 +248,8 @@
       // Scales and layout
       let width = 800, height = 360;
       let margin = { top: 16, right: 28, bottom: 56, left: 64 };
-      let xScale = d3.scaleLinear();
-      let yScale = d3.scaleLinear();
+      let xScale = d3.scaleLinear().clamp(true);
+      let yScale = d3.scaleLinear().clamp(true);
 
       // Line generators - simple linear connections
       const lineGen = d3.line()
@@ -310,6 +316,13 @@
         xScale.range([0, innerWidth]);
         yScale.range([innerHeight, 0]);
 
+        // Update clip rect to match inner plotting area (coords local to gRoot)
+        clipRect
+          .attr('x', 0)
+          .attr('y', 0)
+          .attr('width', innerWidth)
+          .attr('height', innerHeight);
+
         // Compute Y ticks
         let yTicks = [];
         if (isRankStrictFlag) {
@@ -428,8 +441,8 @@
         if (!isFinite(minStep) || !isFinite(maxStep)) { return; }
         xScale.domain([minStep, maxStep]);
         if (isRank) {
-          rankTickMax = Math.max(1, Math.round(maxVal));
-          yScale.domain([rankTickMax, 1]);
+          rankTickMax = isRankStrict ? Math.max(1, Math.round(maxVal)) : Math.max(1, maxVal);
+          yScale.domain([rankTickMax, 1]).nice();
         } else {
           yScale.domain([minVal, maxVal]).nice();
         }

app/src/pages/index.astro

@@ -186,7 +186,7 @@ const licence = (articleFM as any)?.licence ?? (articleFM as any)?.license ?? (a
     </script>
 
     <script>
-      // Delegate copy clicks for code blocks injected by rehypeCodeCopyAndLabel
+      // Delegate copy clicks for code blocks injected by rehypeCodeCopy
       document.addEventListener('click', async (e) => {
         const target = e.target instanceof Element ? e.target : null;
         const btn = target ? target.closest('.code-copy') : null;

app/src/styles/_layout.css

@@ -69,9 +69,9 @@
 }
 
 .wide {
-  /* Target up to ~1400px while staying within viewport minus page gutters */
-  width: min(1400px, 100vw - 32px);
-  margin-left: 50%;
+  /* Target up to ~1100px while staying within viewport minus page gutters */
+  width: min(1100px, 100vw - 32px);
+  margin-left: calc(50% + var(--content-padding-x) * 2);
   transform: translateX(-50%);
 }
 
@@ -128,4 +128,26 @@
 }
 
 
+/* ------------------------------------------------------------------------- */
+/* D3 neural embed responsiveness                                            */
+/* Stack canvas (left) over network (right) on small screens                 */
+/* ------------------------------------------------------------------------- */
+@media (--bp-md) {
+  .d3-neural .panel {
+    flex-direction: column;
+  }
+
+  .d3-neural .panel .left {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  .d3-neural .panel .right {
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: 0;
+  }
+}
+
+
 

app/src/styles/_print.css

@@ -40,8 +40,8 @@
     /* Avoid page breaks inside complex visual blocks */
     .hero,
     .hero-banner,
-    .d3-galaxy,
-    .d3-galaxy svg,
+    .d3-banner,
+    .d3-banner svg,
     .html-embed__card,
     .html-embed__card,
     .js-plotly-plot,

app/src/styles/components/_code.css

@@ -12,6 +12,12 @@ code {
   line-height: 1.5;
 }
 
+p code, .note code {
+  white-space: nowrap;
+  padding: calc(var(--spacing-1)/3) calc(var(--spacing-1)/2);
+}
+
+
 /* ============================================================================ */
 /* Shiki code blocks */
 /* ============================================================================ */
@@ -142,6 +148,9 @@ section.content-grid pre code {
 /* ============================================================================ */
 /* Inside Accordions: remove padding and border on code containers */
 .accordion .astro-code { padding: 0; border: none; }
+.accordion .astro-code { margin-bottom: 0 !important; }
+.accordion pre { margin-bottom: 0 !important; }
+.accordion .code-card pre { margin: 0 !important; }
 
 /* ============================================================================ */
 /* Language/extension vignette (bottom-right, discreet) */
@@ -163,6 +172,24 @@ section.content-grid pre code {
   padding: 4px 6px;
   pointer-events: none;
 } */
- 
+
+/* Fallback if Shiki uses data-lang instead of data-language */
+/* .astro-code[data-lang]::after { content: attr(data-lang); }
+.astro-code[data-language="typescript"]::after { content: "ts"; }
+.astro-code[data-language="tsx"]::after { content: "tsx"; }
+.astro-code[data-language="javascript"]::after,
+.astro-code[data-language="node"]::after,
+.astro-code[data-language="jsx"]::after { content: "js"; }
+.astro-code[data-language="python"]::after { content: "py"; }
+.astro-code[data-language="bash"]::after,
+.astro-code[data-language="shell"]::after,
+.astro-code[data-language="sh"]::after { content: "sh"; }
+.astro-code[data-language="markdown"]::after { content: "md"; }
+.astro-code[data-language="yaml"]::after,
+.astro-code[data-language="yml"]::after { content: "yml"; }
+.astro-code[data-language="html"]::after { content: "html"; }
+.astro-code[data-language="css"]::after { content: "css"; }
+.astro-code[data-language="json"]::after { content: "json"; } */
+
 /* In Accordions, keep same bottom-right placement */
 .accordion .astro-code::after { right: 0; bottom: 0; }

app/src/styles/components/_table.css

@@ -77,7 +77,10 @@
     border: none;
     border-radius: 0;
     margin: 0;
+    margin-bottom: 0 !important;
   }
+  /* Ensure no bottom margin even if table isn't wrapped (fallback) */
+  .accordion .accordion__content table { margin: 0 !important; }
   .accordion .accordion__content .table-scroll > table thead th:first-child,
   .accordion .accordion__content .table-scroll > table thead th:last-child,
   .accordion .accordion__content .table-scroll > table tbody tr:last-child td:first-child,

app/src/styles/components/_tag.css

@@ -4,10 +4,10 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 10px 16px;
+  padding: 8px 12px;
   font-size: 12px;
   line-height: 1;
-  border-radius: 100px;
+  border-radius: var(--button-radius);
   background: var(--surface-bg);
   border: 1px solid var(--border-color);
   color: var(--text-color);