update

app/.astro/astro/content.d.ts

@@ -1,164 +0,0 @@
-declare module 'astro:content' {
-	interface Render {
-		'.mdx': Promise<{
-			Content: import('astro').MarkdownInstance<{}>['Content'];
-			headings: import('astro').MarkdownHeading[];
-			remarkPluginFrontmatter: Record<string, any>;
-			components: import('astro').MDXInstance<{}>['components'];
-		}>;
-	}
-}
-
-declare module 'astro:content' {
-	interface RenderResult {
-		Content: import('astro/runtime/server/index.js').AstroComponentFactory;
-		headings: import('astro').MarkdownHeading[];
-		remarkPluginFrontmatter: Record<string, any>;
-	}
-	interface Render {
-		'.md': Promise<RenderResult>;
-	}
-
-	export interface RenderedContent {
-		html: string;
-		metadata?: {
-			imagePaths: Array<string>;
-			[key: string]: unknown;
-		};
-	}
-}
-
-declare module 'astro:content' {
-	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
-
-	export type CollectionKey = keyof AnyEntryMap;
-	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
-
-	export type ContentCollectionKey = keyof ContentEntryMap;
-	export type DataCollectionKey = keyof DataEntryMap;
-
-	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
-	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
-		ContentEntryMap[C]
-	>['slug'];
-
-	/** @deprecated Use `getEntry` instead. */
-	export function getEntryBySlug<
-		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
-	>(
-		collection: C,
-		// Note that this has to accept a regular string too, for SSR
-		entrySlug: E,
-	): E extends ValidContentEntrySlug<C>
-		? Promise<CollectionEntry<C>>
-		: Promise<CollectionEntry<C> | undefined>;
-
-	/** @deprecated Use `getEntry` instead. */
-	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
-		collection: C,
-		entryId: E,
-	): Promise<CollectionEntry<C>>;
-
-	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
-		collection: C,
-		filter?: (entry: CollectionEntry<C>) => entry is E,
-	): Promise<E[]>;
-	export function getCollection<C extends keyof AnyEntryMap>(
-		collection: C,
-		filter?: (entry: CollectionEntry<C>) => unknown,
-	): Promise<CollectionEntry<C>[]>;
-
-	export function getEntry<
-		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
-	>(entry: {
-		collection: C;
-		slug: E;
-	}): E extends ValidContentEntrySlug<C>
-		? Promise<CollectionEntry<C>>
-		: Promise<CollectionEntry<C> | undefined>;
-	export function getEntry<
-		C extends keyof DataEntryMap,
-		E extends keyof DataEntryMap[C] | (string & {}),
-	>(entry: {
-		collection: C;
-		id: E;
-	}): E extends keyof DataEntryMap[C]
-		? Promise<DataEntryMap[C][E]>
-		: Promise<CollectionEntry<C> | undefined>;
-	export function getEntry<
-		C extends keyof ContentEntryMap,
-		E extends ValidContentEntrySlug<C> | (string & {}),
-	>(
-		collection: C,
-		slug: E,
-	): E extends ValidContentEntrySlug<C>
-		? Promise<CollectionEntry<C>>
-		: Promise<CollectionEntry<C> | undefined>;
-	export function getEntry<
-		C extends keyof DataEntryMap,
-		E extends keyof DataEntryMap[C] | (string & {}),
-	>(
-		collection: C,
-		id: E,
-	): E extends keyof DataEntryMap[C]
-		? Promise<DataEntryMap[C][E]>
-		: Promise<CollectionEntry<C> | undefined>;
-
-	/** Resolve an array of entry references from the same collection */
-	export function getEntries<C extends keyof ContentEntryMap>(
-		entries: {
-			collection: C;
-			slug: ValidContentEntrySlug<C>;
-		}[],
-	): Promise<CollectionEntry<C>[]>;
-	export function getEntries<C extends keyof DataEntryMap>(
-		entries: {
-			collection: C;
-			id: keyof DataEntryMap[C];
-		}[],
-	): Promise<CollectionEntry<C>[]>;
-
-	export function render<C extends keyof AnyEntryMap>(
-		entry: AnyEntryMap[C][string],
-	): Promise<RenderResult>;
-
-	export function reference<C extends keyof AnyEntryMap>(
-		collection: C,
-	): import('astro/zod').ZodEffects<
-		import('astro/zod').ZodString,
-		C extends keyof ContentEntryMap
-			? {
-					collection: C;
-					slug: ValidContentEntrySlug<C>;
-				}
-			: {
-					collection: C;
-					id: keyof DataEntryMap[C];
-				}
-	>;
-	// Allow generic `string` to avoid excessive type errors in the config
-	// if `dev` is not running to update as you edit.
-	// Invalid collection names will be caught at build time.
-	export function reference<C extends string>(
-		collection: C,
-	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
-
-	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
-	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
-		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
-	>;
-
-	type ContentEntryMap = {
-		
-	};
-
-	type DataEntryMap = {
-		
-	};
-
-	type AnyEntryMap = ContentEntryMap & DataEntryMap;
-
-	export type ContentConfig = never;
-}

app/astro.config.mjs

@@ -7,13 +7,21 @@ import remarkFootnotes from 'remark-footnotes';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeCitation from 'rehype-citation';
-import rehypePrettyCode from 'rehype-pretty-code';
+// Shiki intégré (dual themes) — pas de rehype-pretty-code
 
 export default defineConfig({
   output: 'static',
   integrations: [mdx()]
   ,
   markdown: {
+    shikiConfig: {
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark'
+      },
+      defaultColor: false,
+      wrap: true
+    },
     remarkPlugins: [
       [remarkToc, { heading: 'Table of Contents', maxDepth: 3 }],
       remarkMath,
@@ -23,14 +31,6 @@ export default defineConfig({
       rehypeSlug,
       [rehypeAutolinkHeadings, { behavior: 'wrap' }],
       rehypeKatex,
-      [rehypePrettyCode, {
-        theme: {
-          light: 'github-light',
-          dark: 'github-dark'
-        },
-        keepBackground: false,
-        defaultLang: 'text'
-      }],
       [rehypeCitation, {
         bibliography: 'src/content/bibliography.bib',
         linkCitations: true

app/src/components/FullBleed.astro

@@ -0,0 +1,9 @@
+---
+const { class: className, ...props } = Astro.props;
+const wrapperClass = ["full-bleed", className].filter(Boolean).join(" ");
+---
+<div class={wrapperClass} {...props}>
+  <slot />
+</div>
+
+

app/src/components/ThemeToggle.astro

@@ -15,7 +15,7 @@ import moonIconUrl from "../assets/images/moon.svg?url";
       document.documentElement.dataset.theme = mode;
     };
 
-    // Initial mode: localStorage overrides system preference
+    // Initial mode: default to light, then use localStorage, else system
     apply(saved || (prefersDark ? 'dark' : 'light'));
 
     // If user hasn't chosen manually, follow system changes

app/src/components/Wide.astro

@@ -0,0 +1,9 @@
+---
+const { class: className, ...props } = Astro.props;
+const wrapperClass = ["wide", className].filter(Boolean).join(" ");
+---
+<div class={wrapperClass} {...props}>
+  <slot />
+</div>
+
+

app/src/pages/article.mdx

@@ -14,28 +14,31 @@ ogImage: "https://example.com/your-og-image.png"
 ---
 
 import HtmlFragment from "../components/HtmlFragment.astro";
+import Wide from "../components/Wide.astro";
+import FullBleed from "../components/FullBleed.astro";
 import { Image } from 'astro:assets';
 import placeholder from "../assets/images/placeholder.jpg";
 import audioDemo from "../assets/audio/audio-example.wav";
 import Aside from "../components/Aside.astro";
 import visualPoster from "../assets/images/visual-vocabulary-poster.png";
 
-
 <Aside>
-  Welcome to this single-page research article template built with Astro and MDX.
-  It’s designed to help you write clear, modern, and interactive technical articles with minimal setup.
+  Welcome to this single-page research article template built with **Astro** and **MDX**.
+  It’s designed to help you write clear, modern, and **interactive** technical articles with **minimal setup**.
   Whether you cover machine learning, data science, physics, or software topics, this template keeps the authoring flow simple while offering robust features out of the box.
   <Fragment slot="aside">
     Reading time: 10–15 minutes.
   </Fragment>
   In this guide, you’ll learn how to install the template,
   write content (math, citations, images, code, asides, interactive fragments),
-  customize styles and behavior, and follow a few best practices for publishing.
+  customize styles and behavior, and follow a few **best practices** for publishing.
   <Fragment slot="aside">
     If you have questions or remarks open a discussion on the <a href="https://huggingface.co/spaces/tfrere/science-blog-template/discussions?status=open&type=discussion">Community tab</a>!
   </Fragment>
 </Aside>
 
+Ce template est heavely inspired by distill.
+
 ## Features
 
 <div className="tag-list">
@@ -55,32 +58,60 @@ import visualPoster from "../assets/images/visual-vocabulary-poster.png";
 
 ## Getting Started
 
-Installation:
+### Installation
 
 ```bash
+git lfs install
+git lfs pull
+cd app
 npm install
+```
+
+
+### Development
+
+```bash
 npm run dev
 ```
 
-Build for production:
+### Build
 
 ```bash
 npm run build
 ```
 
-Deployment: serve the `dist/` directory on any static host. A Docker/Nginx setup is included and works well on Spaces or similar environments.
+Serving the `dist/` directory on any static host is enough to deliver the site.
+
+### Deploy
+
+The easiest way to get online is to clone [this Hugging Face Space](https://huggingface.co/spaces/tfrere/science-blog-template) and push your changes; every push triggers an automatic build and deploy.
+
+### Large files (Git LFS)
+
+Track binaries (e.g., `.png`, `.wav`) with Git LFS to keep the repository lean. This project is preconfigured to store such files via LFS.
 
-Large assets: track binaries (e.g., `.png`, `.wav`) with Git LFS to keep the repository lean. This project is preconfigured to store such files via LFS.
 
 ## Writing Your Content
 
-Author content in MDX. Below are minimal examples for the core elements.
+### MDX
+
+Author your content in MDX for a pleasant, productive writing flow that combines familiar Markdown with reusable components when needed.
+Below are minimal examples of the core elements.
+
+
+Don't forget to enable syntax highlighting for MDX to make your editing experience even smoother!
+
+```bash
+# For VS Code but alternatively, use the Extensions marketplace UI and search for "MDX" by unifiedjs.
+code --install-extension unifiedjs.vscode-mdx
+```
+
 
-### MDX: frontmatter and imports (minimal example)
 
 The initial skeleton of this article looks like this:
 
 ```mdx
+{/* HEADER */}
 ---
 title: "The science template:\nCraft Beautiful Blogs"
 description: "A modern, MDX-first research article template with math, citations, and interactive figures."
@@ -96,14 +127,14 @@ tags:
 ogImage: "https://example.com/your-og-image.png"
 ---
 
-import HtmlFragment from "../components/HtmlFragment.astro";
+{/* IMPORTS */}
 import { Image } from 'astro:assets';
+import Aside from "../components/Aside.astro";
+import HtmlFragment from "../components/HtmlFragment.astro";
 import placeholder from "../assets/images/placeholder.png";
 import audioDemo from "../assets/audio/audio-example.wav";
-import Aside from "../components/Aside.astro";
-import visualPoster from "../assets/images/visual-vocabulary-poster.png";
-
 
+{/* CONTENT */}
 <Aside>
   Welcome to this single-page research article template built with Astro and MDX.
   It’s designed to help you write clear, modern, and interactive technical articles with minimal setup.
@@ -122,20 +153,40 @@ import visualPoster from "../assets/images/visual-vocabulary-poster.png";
 
 ```
 
+It is composed of three parts:
+
+- **Header**: which contains the title and the article's metadata.
+- **Imports**: the imports of the different modules / images used in the article
+- **Content**: the content of the article
+
+**Available blocs**:
+
+<div className="tag-list">
+  <a className="tag" href="#math">Math</a>
+  <a className="tag" href="#images">Images</a>
+  <a className="tag" href="#code-blocks">Code</a>
+  <a className="tag" href="#citations-and-notes">Citations & notes</a>
+  <a className="tag" href="#asides">Asides</a>
+  <a className="tag" href="#minimal-table">Array</a>
+  <a className="tag" href="#audio">Audio</a>
+  <a className="tag" href="#interactive-fragments">Interactive fragments</a>
+  <a className="tag" href="#tracking-training-metrics-with-trackio">TrackIO</a>
+</div>
+
 ### Math
 
 Inline example: $x^2 + y^2 = z^2$.
 
-Block (scaled dot-product attention):
+Block example:
 
 $$
-\mathrm{Attention}(Q, K, V) = \mathrm{softmax}\!\left(\frac{QK^{\top}}{\sqrt{d_k}}\right) V
+x^2 + y^2 = z^2
 $$
 
 ```mdx
-Inline: $x^2 + y^2 = z^2$
+Inline example: $x^2 + y^2 = z^2$
 
-Block:
+Block example:
 $$
 \mathrm{Attention}(Q,K,V)=\mathrm{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right) V
 $$
@@ -147,6 +198,8 @@ Responsive images automatically generate an optimized `srcset` and `sizes` so th
 
 **Optional:** Zoomable (Medium-like lightbox): add `data-zoomable` to opt-in. Only images with this attribute will open full-screen on click.
 
+**Optional:** Figcaption and credits
+
 <figure>
   <Image
     src={placeholder}
@@ -199,35 +252,6 @@ greet("Astro")
 ```
 ````
 
-
-### GitHub code embeds
-
-Finally, if you want to include code from GitHub you can use emgithub.com and, for example, create a collapsible widget like this:
-
-```html
-<details style="background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; margin: 1em 0;">
-  <summary style="padding: 12px; cursor: pointer; user-select: none; background: #f3f4f6; border-bottom: 1px solid #d0d7de;">
-    👉 Naive DP implementation with overlap in Picotron (Click to expand)
-  </summary>
-  <div class="code-embed-container" style="margin: 0; border-radius: 0; overflow-x: scroll; width: max-content; min-width: 100%; font-size: 8px;"></div>
-  <script 
-    src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F0035cce0e04afd6192763b11efe50010d8ad0f71%2Fpicotron%2Fdata_parallel%2Fdata_parallel.py%23L10-L60&style=github&type=code&showBorder=off&showLineNumbers=on&showFileMeta=on&showCopy=on&showFullPath=on">
-  </script>
-</details>
-```
-
-Which will display as follows:
-
-<details style="background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; margin: 1em 0;">
-  <summary style="padding: 12px; cursor: pointer; user-select: none; background: #f3f4f6; border-bottom: 1px solid #d0d7de;">
-    👉 Naive DP implementation with overlap in Picotron (Click to expand)
-  </summary>
-  <div class="code-embed-container" style="margin: 0; border-radius: 0; overflow-x: scroll; width: max-content; min-width: 100%; font-size: 8px;"></div>
-  <script 
-    src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F0035cce0e04afd6192763b11efe50010d8ad0f71%2Fpicotron%2Fdata_parallel%2Fdata_parallel.py%23L10-L60&style=github&type=code&showBorder=off&showLineNumbers=on&showFileMeta=on&showCopy=on&showFullPath=on">
-  </script>
-</details>
-
 ### Citations and notes
 
 Here are a few variations using the same bibliography:
@@ -251,20 +275,6 @@ Here are a few variations using the same bibliography:
 ```
 
 
-### Interactive fragments
-
-Plotly example (line):
-
-<div className="plot-card">
-  <HtmlFragment src="line.html" />
-</div>
-
-```mdx
-import HtmlFragment from '../components/HtmlFragment.astro'
-
-<HtmlFragment src="line.html" />
-```
-
 ### Asides
 
 <Aside>
@@ -283,6 +293,39 @@ import Aside from '../components/Aside.astro'
 </Aside>
 ```
 
+### Width helpers
+
+Use these helpers to expand content beyond the main column when needed. They will always be centered and displayed above every other content.
+
+**Wide example**
+
+<Wide>
+  <div className="demo-wide">demo wide</div>
+</Wide>
+
+```mdx
+import Wide from '../components/Wide.astro'
+
+<Wide>
+  Your content here...
+</Wide>
+```
+
+**Full-bleed example**
+
+<FullBleed>
+  <div className="demo-full-bleed">demo full-bleed</div>
+</FullBleed>
+
+```mdx
+import FullBleed from '../components/FullBleed.astro'
+
+<FullBleed>
+  Your content here...
+</FullBleed>
+```
+
+
 ### Minimal table
 
 | Method | Score |
@@ -311,20 +354,52 @@ import audioDemo from '../assets/audio/audio-example.wav'
 </audio>
 ```
 
-### Tracking training metrics with TrackIO
 
-TrackIO is a lightweight dashboard to monitor ML experiments. The embed below opens a demo project and shows a couple of metrics. You can customize the query parameters (`project`, `metrics`, `sidebar`) to fit your setup.
 
-<div style="margin-top: 8px;">
-  <iframe src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden" width="100%" height="600" frameborder="0"></iframe>
+### Embeds
+
+
+#### HtmlFragments
+
+The main purpose of the ```HtmlFragment``` component is to embed a plotly or d3 chart in your article. Libraries are already imported in the template.
+
+<div className="plot-card">
+  <HtmlFragment src="line.html" />
 </div>
 
+```mdx
+import HtmlFragment from '../components/HtmlFragment.astro'
+
+<HtmlFragment src="line.html" />
+
+```
+
+#### Iframes
+
+You can embed external content in your article using **iframes**. For example, TrackIO—a lightweight dashboard to monitor machine learning experiments—can be used this way. The example below opens a demo project and displays a couple of metrics. You can customize the query parameters (`project`, `metrics`, `sidebar`, etc.) to fit your needs.
+
+<iframe className="plot-card" src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="600" frameborder="0"></iframe>
+
 To embed TrackIO in your own page, copy the following HTML and adjust the `src` parameters:
 
+#### GitHub code embeds
+
+Finally, if you want to include code from GitHub you can use emgithub.com and, for example, create a collapsible widget like this:
+
+
+  <div class="code-embed-container"></div>
+  <script 
+    src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F0035cce0e04afd6192763b11efe50010d8ad0f71%2Fpicotron%2Fdata_parallel%2Fdata_parallel.py%23L10-L60&style=github&type=code&showBorder=off&showLineNumbers=on&showFileMeta=on&showCopy=on&showFullPath=on">
+  </script>
+
 ```html
-<iframe src="https://org_name-space_name.hf.space/?project=fake-training&metrics=train_loss,train_accuracy&sidebar=hidden" width="100%" height="600" frameBorder="0"></iframe>
+  <div class="code-embed-container"></div>
+  <script 
+    src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F0035cce0e04afd6192763b11efe50010d8ad0f71%2Fpicotron%2Fdata_parallel%2Fdata_parallel.py%23L10-L60&style=github&type=code&showBorder=off&showLineNumbers=on&showFileMeta=on&showCopy=on&showFullPath=on">
+  </script>
 ```
 
+
 ## Best Practices
 
 - Keep sections short and focused.

app/src/pages/index.astro

@@ -48,12 +48,23 @@ const keyTitle = titleFlat.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_
 const bibKey = `${keyAuthor}${year ?? ''}_${keyTitle}`;
 const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBib}},\n  ${year ? `year={${year}}` : ''}\n}`;
 ---
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{docTitle}</title>
     <SeoHead title={docTitle} description={description} authors={authors} published={published} tags={tags} image={imageAbs} />
+    <script is:inline>
+      (() => {
+        try {
+          const saved = localStorage.getItem('theme');
+          const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+          const theme = saved || (prefersDark ? 'dark' : 'light');
+          document.documentElement.setAttribute('data-theme', theme);
+        } catch {}
+      })();
+    </script>
+    
     
     <script src="https://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script>
   </head>
@@ -154,6 +165,8 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
         else window.addEventListener('load', bootstrap, { once: true });
       })();
     </script>
+    
+
     <script>
       // Open external links in a new tab; keep internal anchors in-page
       const setExternalTargets = () => {

app/src/styles/{components/_base.scss → _base.scss}

@@ -22,7 +22,7 @@ html { font-size: 14px; line-height: 1.6; }
   font-weight: 600;
   font-size: clamp(22px, 2.6vw, 32px);
   line-height: 1.2;
-  margin: var(--spacing-5) 0 var(--spacing-3);
+  margin: var(--spacing-10) 0 var(--spacing-5);
   padding-bottom: var(--spacing-2);
   border-bottom: 1px solid var(--border-color);
 }
@@ -31,7 +31,7 @@ html { font-size: 14px; line-height: 1.6; }
   font-weight: 700;
   font-size: clamp(18px, 2.1vw, 22px);
   line-height: 1.25;
-  margin: var(--spacing-4) 0 var(--spacing-2);
+  margin: var(--spacing-8) 0 var(--spacing-4);
 }
 
 .content-grid main h4 {
@@ -39,7 +39,7 @@ html { font-size: 14px; line-height: 1.6; }
   text-transform: uppercase;
   font-size: 14px;
   line-height: 1.2;
-  margin: var(--spacing-3) 0 var(--spacing-2);
+  margin: var(--spacing-8) 0 var(--spacing-4);
 }
 
 .content-grid main a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--link-underline); }
@@ -66,8 +66,53 @@ html { font-size: 14px; line-height: 1.6; }
   margin: var(--spacing-4) 0;
 }
 
-.content-grid main pre { background: var(--code-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: var(--spacing-3); font-size: 14px; overflow: auto; }
+.content-grid main pre:not(.astro-code) { background: var(--code-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: var(--spacing-3); font-size: 14px; overflow: auto; }
+
+/* Sync Shiki variables with current theme */
+/* Standard wrapper look for code blocks */
+.astro-code { border: 1px solid var(--border-color); border-radius: 6px; padding: var(--spacing-3); padding-left: calc(var(--spacing-3) + 6px); font-size: 14px; }
+
+html[data-theme='light'] .astro-code { background-color: var(--code-bg); }
+
+html[data-theme='dark'] .astro-code { background-color: var(--shiki-dark-bg); }
+
+/* Apply token color from per-span vars exposed by Shiki dual themes */
+html[data-theme='light'] .astro-code span { color: var(--shiki-light) !important; }
+html[data-theme='dark'] .astro-code span { color: var(--shiki-dark) !important; }
+
+/* Token color remapping using Shiki CSS variables on the wrapper */
+/* Optionnel: booster le contraste light */
+html[data-theme='light'] .astro-code {
+  --shiki-foreground: #24292f;
+  --shiki-background: #ffffff;
+}
+
+/* Rely on Shiki's own token spans; no class remap */
 .content-grid main code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+/* Placeholder block (discreet centered text) */
+.placeholder-block {
+  display: grid;
+  place-items: center;
+  min-height: 120px;
+  color: var(--muted-color);
+  font-size: 12px;
+  border: 1px dashed var(--border-color);
+  border-radius: 8px;
+  background: var(--surface-bg);
+}
+
+/* Demo blocks for width helpers */
+.demo-wide,
+.demo-full-bleed {
+  display: grid;
+  place-items: center;
+  min-height: 150px;
+  color: var(--muted-color);
+  font-size: 12px;
+  border: 1px dashed var(--border-color);
+  border-radius: 8px;
+  background: var(--surface-bg);
+}
 
 /* Pretty-code language label (visible chip at top-right) */
 .content-grid main pre:has(code[data-language]),
@@ -112,7 +157,14 @@ html { font-size: 14px; line-height: 1.6; }
 .content-grid main hr { border: none; border-bottom: 1px solid var(--border-color); margin: var(--spacing-5) 0; }
 
 
-
+.code-block {
+  background: var(--code-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: var(--spacing-3);
+  font-size: 14px;
+  overflow: auto;
+}
 
 // ============================================================================
 // Media / Figures

app/src/styles/{components/_layout.scss → _layout.scss}

@@ -30,4 +30,66 @@ main > nav:first-of-type { display: none; }
   .toc { position: static; }
   .right-aside { display: none; }
   main > nav:first-of-type { display: block; }
-}
+}
+
+
+
+.margin-aside { position: relative; margin: 12px 0; }
+
+.margin-aside__aside {
+  position: absolute;
+  top: 0;
+  right: -260px; /* push into the right grid column (width 260 + gap 32) */
+  width: 260px;
+  border-radius: 8px;
+  padding: 0 10px;
+  font-size: 0.9rem;
+  color: var(--muted-color);
+}
+@media (max-width: 1100px) {
+  .margin-aside__aside {
+    position: static;
+    width: auto;
+    margin-top: 8px;
+  }
+}
+
+
+// ============================================================================
+// Width helpers – slightly wider than main column, and full-bleed to viewport
+// ----------------------------------------------------------------------------
+// Usage in MDX:
+// <div className="wide"> ... </div>
+// <div className="full-bleed"> ... </div>
+// These center the content relative to the viewport while keeping it responsive.
+//
+// Notes:
+// - These helpers work inside the main article column; they break out visually
+//   to be wider or fully span the viewport. On small screens, they fall back to 100%.
+// - Adjust the target width in .wide if desired.
+.wide,
+.full-bleed { box-sizing: border-box; }
+
+.wide {
+  /* Target up to ~1100px while staying within viewport minus page gutters */
+  width: min(1100px, 100vw - 32px);
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
+.full-bleed {
+  /* Span the full viewport width */
+  width: 100vw;
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
+@media (max-width: 1100px) {
+  .wide,
+  .full-bleed {
+    width: 100%;
+    margin-left: 0;
+    transform: none;
+  }
+}
+

app/src/styles/{components/_variables.scss → _variables.scss}

@@ -23,6 +23,11 @@
   --spacing-3: 16px;
   --spacing-4: 24px;
   --spacing-5: 32px;
+  --spacing-6: 40px;
+  --spacing-7: 48px;
+  --spacing-8: 56px;
+  --spacing-9: 64px;
+  --spacing-10: 72px;
 }
 // Theme tokens for dark mode
 [data-theme="dark"] {

app/src/styles/components/_footer.scss

@@ -0,0 +1,8 @@
+.distill-footer { margin-top: 40px; border-top: 1px solid var(--border-color); }
+.footer-inner { max-width: 680px; margin: 0 auto; padding: 24px 16px; }
+.citation-block h3 { margin: 0 0 8px; }
+.citation-block h4 { margin: 16px 0 8px; font-size: 14px; text-transform: uppercase; color: var(--muted-color); }
+.citation-text, .citation-bibtex { width: 100%; min-height: 44px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface-bg); padding: 8px; resize: none; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; color: var(--text-color); white-space: pre-wrap; overflow-y: hidden; line-height: 1.4; }
+.references-block h3 { margin: 24px 0 8px; }
+.references-block .footnotes { margin-top: 8px; }
+.references-block .bibliography { margin-top: 8px; }

app/src/styles/global.scss

@@ -1,6 +1,8 @@
-@import "./components/variables";
-@import "./components/base";
-@import "./components/layout";
+@use "./variables" as *;
+@use "./base" as *;
+@use "./layout" as *;
+@use "./components/footer" as *;
+
 /* Dark-mode form tweak */
 [data-theme="dark"] .plotly_input_container > select { background-color: #1a1f27; border-color: var(--border-color); color: var(--text-color); }
 
@@ -12,29 +14,6 @@
 [data-theme="dark"] .citation-text,
 [data-theme="dark"] .citation-bibtex { background: #12151b; border-color: rgba(255,255,255,.15); color: var(--text-color); }
 
-
-.margin-aside { position: relative; margin: 12px 0; }
-
-.margin-aside__main { /* main text stays full width of the main column */ }
-.margin-aside__aside {
-  position: absolute;
-  top: 0;
-  right: -260px; /* push into the right grid column (width 260 + gap 32) */
-  width: 260px;
-  border-radius: 8px;
-  padding: 10px;
-  font-size: 0.9rem;
-  color: var(--muted-color);
-}
-@media (max-width: 1100px) {
-  .margin-aside__aside {
-    position: static;
-    width: auto;
-    margin-top: 8px;
-  }
-}
-
-
 /* Opt-in zoomable images */
 img[data-zoomable] { cursor: zoom-in; }
 .medium-zoom--opened img[data-zoomable] { cursor: zoom-out; }
@@ -110,3 +89,4 @@ img[data-zoomable] { cursor: zoom-in; }
 [data-theme="dark"] #theme-toggle .icon.light { display: none; }
 [data-theme="dark"] #theme-toggle .icon.dark { display: inline; }
 [data-theme="dark"] #theme-toggle .icon { filter: invert(1) brightness(1.2); }
+