update doc, add some new components

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

@@ -1,227 +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 = {
-		"chapters": {
-"01_introduction.mdx": {
-	id: "01_introduction.mdx";
-  slug: "01_introduction";
-  body: string;
-  collection: "chapters";
-  data: any
-} & { render(): Render[".mdx"] };
-"02_classic_robotics.mdx": {
-	id: "02_classic_robotics.mdx";
-  slug: "02_classic_robotics";
-  body: string;
-  collection: "chapters";
-  data: any
-} & { render(): Render[".mdx"] };
-"03_reinforcement_learning.mdx": {
-	id: "03_reinforcement_learning.mdx";
-  slug: "03_reinforcement_learning";
-  body: string;
-  collection: "chapters";
-  data: any
-} & { render(): Render[".mdx"] };
-"04_imitation_learning.mdx": {
-	id: "04_imitation_learning.mdx";
-  slug: "04_imitation_learning";
-  body: string;
-  collection: "chapters";
-  data: any
-} & { render(): Render[".mdx"] };
-"05_foundation_models.mdx": {
-	id: "05_foundation_models.mdx";
-  slug: "05_foundation_models";
-  body: string;
-  collection: "chapters";
-  data: any
-} & { render(): Render[".mdx"] };
-"06_next_directions.mdx": {
-	id: "06_next_directions.mdx";
-  slug: "06_next_directions";
-  body: string;
-  collection: "chapters";
-  data: any
-} & { render(): Render[".mdx"] };
-"07_conclusions.mdx": {
-	id: "07_conclusions.mdx";
-  slug: "07_conclusions";
-  body: string;
-  collection: "chapters";
-  data: any
-} & { render(): Render[".mdx"] };
-"A_foreword.mdx": {
-	id: "A_foreword.mdx";
-  slug: "a_foreword";
-  body: string;
-  collection: "chapters";
-  data: any
-} & { render(): Render[".mdx"] };
-};
-
-	};
-
-	type DataEntryMap = {
-		"assets": Record<string, {
-  id: string;
-  collection: "assets";
-  data: any;
-}>;
-
-	};
-
-	type AnyEntryMap = ContentEntryMap & DataEntryMap;
-
-	export type ContentConfig = never;
-}

app/.astro/settings.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ed6d28be38b13c36af0d93f09ca03071e80381d49463aa549a5ee625ef9a8b56
+oid sha256:5cd907e18678e90f342986642cb5fcdca79f1c4a61fe1d75caa2df036e69070e
 size 58

app/astro.config.mjs

@@ -56,11 +56,13 @@ export default defineConfig({
     rehypePlugins: [
       rehypeSlug,
       [rehypeAutolinkHeadings, { behavior: 'wrap' }],
-      rehypeKatex,
+      [rehypeKatex, {
+        trust: true,
+      }],
       [rehypeCitation, {
         bibliography: 'src/content/bibliography.bib',
         linkCitations: true,
-        csl: "apa"
+        csl: "apa",
       }],
       rehypeReferencesAndFootnotes,
       rehypeRestoreAtInCode,

app/src/components/MultiImage.astro

@@ -0,0 +1,342 @@
+---
+// @ts-ignore - types provided by Astro at runtime
+import ResponsiveImage from "./ResponsiveImage.astro";
+
+interface ImageItem {
+    /** Source image imported via astro:assets */
+    src: any;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Individual caption for this image */
+    caption?: string;
+    /** Optional individual image ID for referencing */
+    id?: string;
+    /** Enable zoom on this specific image (defaults to parent zoomable setting) */
+    zoomable?: boolean;
+    /** Enable download on this specific image (defaults to parent downloadable setting) */
+    downloadable?: boolean;
+}
+
+interface Props {
+    /** Array of images to display */
+    images: ImageItem[];
+    /** Global caption for the entire figure */
+    caption?: string;
+    /** Layout mode: number of columns or 'auto' for responsive */
+    layout?: "2-column" | "3-column" | "4-column" | "auto";
+    /** Enable medium-zoom behavior on all images (can be overridden per image) */
+    zoomable?: boolean;
+    /** Show download buttons on all images (can be overridden per image) */
+    downloadable?: boolean;
+    /** Optional class to apply on the wrapper */
+    class?: string;
+    /** Optional global ID for the multi-image figure */
+    id?: string;
+}
+
+const {
+    images,
+    caption,
+    layout = "3-column",
+    zoomable = false,
+    downloadable = false,
+    class: className,
+    id,
+} = Astro.props as Props;
+
+const hasCaptionSlot = Astro.slots.has("caption");
+const hasCaption =
+    hasCaptionSlot || (typeof caption === "string" && caption.length > 0);
+const uid = `mi_${Math.random().toString(36).slice(2)}`;
+
+// Generate CSS grid columns based on layout
+const getGridColumns = () => {
+    switch (layout) {
+        case "2-column":
+            return "repeat(2, 1fr)";
+        case "3-column":
+            return "repeat(3, 1fr)";
+        case "4-column":
+            return "repeat(4, 1fr)";
+        case "auto":
+            return "repeat(auto-fit, minmax(200px, 1fr))";
+        default:
+            return "repeat(3, 1fr)";
+    }
+};
+
+const gridColumns = getGridColumns();
+---
+
+<div
+    class={`multi-image ${className || ""}`}
+    data-mi-root={uid}
+    data-layout={layout}
+    {id}
+>
+    {
+        hasCaption ? (
+            <figure class="multi-image-figure">
+                <div
+                    class="multi-image-grid"
+                    style={`grid-template-columns: ${gridColumns}`}
+                >
+                    {images.map((image, index) => (
+                        <div class="multi-image-item">
+                            <ResponsiveImage
+                                src={image.src}
+                                alt={image.alt}
+                                zoomable={image.zoomable ?? zoomable}
+                                downloadable={
+                                    image.downloadable ?? downloadable
+                                }
+                                class="multi-image-img"
+                            />
+                            {image.caption && (
+                                <div class="multi-image-subcaption">
+                                    {image.caption}
+                                </div>
+                            )}
+                            {image.id && (
+                                <span
+                                    id={image.id}
+                                    style="position: absolute;"
+                                />
+                            )}
+                        </div>
+                    ))}
+                </div>
+                <figcaption class="multi-image-caption">
+                    {hasCaptionSlot ? (
+                        <slot name="caption" />
+                    ) : (
+                        caption && <span set:html={caption} />
+                    )}
+                </figcaption>
+            </figure>
+        ) : (
+            <div
+                class="multi-image-grid"
+                style={`grid-template-columns: ${gridColumns}`}
+            >
+                {images.map((image, index) => (
+                    <div class="multi-image-item">
+                        <ResponsiveImage
+                            src={image.src}
+                            alt={image.alt}
+                            zoomable={image.zoomable ?? zoomable}
+                            downloadable={image.downloadable ?? downloadable}
+                            class="multi-image-img"
+                        />
+                        {image.caption && (
+                            <div class="multi-image-subcaption">
+                                {image.caption}
+                            </div>
+                        )}
+                        {image.id && (
+                            <span id={image.id} style="position: absolute;" />
+                        )}
+                    </div>
+                ))}
+            </div>
+        )
+    }
+</div>
+
+<style>
+    .multi-image {
+        margin: var(--block-spacing-y) 0;
+    }
+
+    .multi-image-figure {
+        margin: 0;
+    }
+
+    .multi-image-grid {
+        display: grid;
+        gap: 1rem;
+        align-items: start;
+    }
+
+    .multi-image-item {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        position: relative;
+        z-index: var(--z-content);
+        transition: z-index 0.3s ease;
+    }
+
+    /* Quand medium-zoom est actif, masquer temporairement les autres images du multi-image */
+    :global(.medium-zoom--opened) .multi-image-item {
+        opacity: 0;
+        z-index: calc(var(--z-base) - 1);
+        transition:
+            opacity 0.3s ease,
+            z-index 0.3s ease;
+    }
+
+    /* Masquer spécifiquement les captions pendant le zoom - approche radicale */
+    :global(.medium-zoom--opened) .multi-image-subcaption {
+        display: none !important;
+    }
+
+    /* Masquer complètement tous les éléments multi-image pendant le zoom */
+    :global(.medium-zoom--opened) .multi-image {
+        z-index: -1 !important;
+    }
+
+    /* Masquer tous les textes de l'ensemble des multi-images */
+    :global(.medium-zoom--opened) .multi-image-caption {
+        display: none !important;
+    }
+
+    /* L'image actuellement zoomée reste visible */
+    :global(.medium-zoom--opened)
+        .multi-image-item:has(:global(.medium-zoom--opened)) {
+        opacity: 1;
+        z-index: var(--z-overlay);
+    }
+
+    /* Fallback pour navigateurs sans support :has() */
+    :global(.medium-zoom--opened) .multi-image-item.zoom-active {
+        opacity: 1 !important;
+        z-index: var(--z-overlay) !important;
+    }
+
+    /* Garder la caption de l'image active visible */
+    :global(.medium-zoom--opened)
+        .multi-image-item.zoom-active
+        .multi-image-subcaption {
+        opacity: 1 !important;
+        z-index: var(--z-overlay) !important;
+    }
+
+    .multi-image-item :global(.ri-root) {
+        margin: 0;
+    }
+
+    .multi-image-item :global(figure) {
+        margin: 0;
+    }
+
+    .multi-image-img {
+        width: 100%;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .multi-image-subcaption {
+        font-size: 0.85rem;
+        color: var(--muted-color);
+        margin-top: 0.5rem;
+        line-height: 1.4;
+    }
+
+    .multi-image-caption {
+        text-align: left;
+        font-size: 0.9rem;
+        color: var(--muted-color);
+        margin-top: 1rem;
+        line-height: 1.4;
+    }
+
+    /* Responsive behavior */
+    @media (max-width: 768px) {
+        .multi-image-grid[style*="repeat(3, 1fr)"],
+        .multi-image-grid[style*="repeat(4, 1fr)"] {
+            grid-template-columns: 1fr !important;
+            gap: 1.5rem;
+        }
+
+        .multi-image-grid[style*="repeat(2, 1fr)"] {
+            grid-template-columns: 1fr !important;
+            gap: 1.5rem;
+        }
+    }
+
+    @media (min-width: 769px) and (max-width: 1024px) {
+        .multi-image-grid[style*="repeat(4, 1fr)"] {
+            grid-template-columns: repeat(2, 1fr) !important;
+        }
+    }
+
+    /* Equal height images when desired */
+    .multi-image[data-layout*="column"] .multi-image-item :global(img) {
+        height: 200px;
+        object-fit: contain;
+    }
+
+    /* Auto layout gets flexible heights */
+    .multi-image[data-layout="auto"] .multi-image-item :global(img) {
+        height: auto;
+    }
+
+    /* Ensure images maintain aspect ratio */
+    .multi-image-item :global(img) {
+        max-width: 100%;
+        display: block;
+        margin: 0 auto;
+    }
+</style>
+
+<script>
+    // Enhanced medium-zoom integration for MultiImage
+    document.addEventListener("DOMContentLoaded", () => {
+        // Amélioration du comportement des MultiImage avec medium-zoom
+        const multiImages = document.querySelectorAll(".multi-image");
+
+        multiImages.forEach((multiImage) => {
+            const items = multiImage.querySelectorAll(".multi-image-item");
+            const zoomableImages = multiImage.querySelectorAll(
+                'img[data-zoomable="1"]',
+            );
+
+            zoomableImages.forEach((img) => {
+                img.addEventListener("click", () => {
+                    // Trouver l'item parent de l'image cliquée et le ri-root
+                    const activeItem = img.closest(".multi-image-item");
+                    const riRoot = img.closest(".ri-root");
+
+                    // Nettoyer TOUS les zoom-active (MultiImage items et ResponsiveImage)
+                    document
+                        .querySelectorAll(
+                            ".multi-image-item.zoom-active, .ri-root.zoom-active",
+                        )
+                        .forEach((el) => el.classList.remove("zoom-active"));
+
+                    // Ajouter zoom-active aux éléments actifs
+                    if (activeItem) {
+                        activeItem.classList.add("zoom-active");
+                    }
+                    if (riRoot) {
+                        riRoot.classList.add("zoom-active");
+                    }
+                });
+            });
+        });
+
+        // Nettoyer TOUTES les classes lors de la fermeture du zoom
+        document.addEventListener("click", (e) => {
+            if (e.target.classList.contains("medium-zoom-overlay")) {
+                // Zoom fermé, nettoyer toutes les classes zoom-active
+                document
+                    .querySelectorAll(
+                        ".multi-image-item.zoom-active, .ri-root.zoom-active",
+                    )
+                    .forEach((item) => item.classList.remove("zoom-active"));
+            }
+        });
+
+        // Écouter les événements clavier pour fermer le zoom
+        document.addEventListener("keydown", (e) => {
+            if (e.key === "Escape") {
+                document
+                    .querySelectorAll(
+                        ".multi-image-item.zoom-active, .ri-root.zoom-active",
+                    )
+                    .forEach((item) => item.classList.remove("zoom-active"));
+            }
+        });
+    });
+</script>

app/src/components/Quote.astro

@@ -0,0 +1,137 @@
+---
+interface Props {
+    author?: string;
+    source?: string;
+}
+
+const { author, source } = Astro.props;
+---
+
+<blockquote class="quote">
+    <div class="quote__text">
+        <slot />
+    </div>
+    {
+        (author || source) && (
+            <footer class="quote__footer">
+                {author && <cite class="quote__author">{author}</cite>}
+                {source && <span class="quote__source">{source}</span>}
+            </footer>
+        )
+    }
+</blockquote>
+
+<style>
+    .quote {
+        font-family: var(--default-font-family);
+        margin: 32px 0;
+        max-width: 600px;
+        text-align: left;
+        position: relative;
+        padding: 0;
+        border: none;
+        background: none;
+        box-shadow: none;
+        white-space: normal;
+    }
+
+    .quote::before {
+        content: '"';
+        position: absolute;
+        top: -24px;
+        left: -30px;
+        font-size: 8rem;
+        font-family: var(--default-font-family);
+        font-weight: 400;
+        color: var(--text-color);
+        opacity: 0.05;
+        z-index: -1;
+        line-height: 1;
+        pointer-events: none;
+    }
+
+    .quote__text {
+        font-size: 1.5rem;
+        line-height: 1.4;
+        font-style: normal;
+        font-weight: 400;
+        font-family:
+            "SF Pro Text",
+            -apple-system,
+            BlinkMacSystemFont,
+            "Segoe UI",
+            sans-serif;
+        color: var(--text-color);
+        margin-bottom: 12px;
+        padding: 0;
+        letter-spacing: -0.01em;
+    }
+
+    .quote__text p {
+        margin: 0;
+    }
+
+    .quote__footer {
+        font-size: 0.875rem;
+        color: var(--muted-color);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 6px;
+        margin-top: 0;
+        font-family:
+            "SF Pro Text",
+            -apple-system,
+            BlinkMacSystemFont,
+            "Segoe UI",
+            sans-serif;
+    }
+
+    .quote__author {
+        font-weight: 500;
+        font-style: normal;
+        color: var(--text-color);
+        opacity: 0.85;
+    }
+
+    .quote__author::before {
+        content: "— ";
+        opacity: 0.6;
+    }
+
+    .quote__source {
+        font-weight: 400;
+        opacity: 0.6;
+        font-style: italic;
+    }
+
+    .quote__source::before {
+        content: "— ";
+        font-style: normal;
+    }
+
+    @media (max-width: 640px) {
+        .quote {
+            margin: 24px 0;
+            max-width: 100%;
+        }
+
+        .quote::before {
+            font-size: 6rem;
+            top: -18px;
+            left: -16px;
+        }
+
+        .quote__text {
+            font-size: 1.25rem;
+            line-height: 1.45;
+            padding: 0;
+        }
+
+        .quote__footer {
+            flex-direction: row;
+            gap: 6px;
+            font-size: 0.8rem;
+        }
+    }
+</style>

app/src/components/ResponsiveImage.astro

@@ -1,6 +1,6 @@
 ---
 // @ts-ignore - types provided by Astro at runtime
-import { Image } from 'astro:assets';
+import { Image } from "astro:assets";
 
 interface Props {
   /** Source image imported via astro:assets */
@@ -29,82 +29,172 @@ interface Props {
   [key: string]: any;
 }
 
-const { caption, figureClass, zoomable, downloadable, downloadName, downloadSrc, linkHref, linkTarget, linkRel, ...imgProps } = Astro.props as Props;
-const hasCaptionSlot = Astro.slots.has('caption');
-const hasCaption = hasCaptionSlot || (typeof caption === 'string' && caption.length > 0);
+const {
+  caption,
+  figureClass,
+  zoomable,
+  downloadable,
+  downloadName,
+  downloadSrc,
+  linkHref,
+  linkTarget,
+  linkRel,
+  ...imgProps
+} = Astro.props as Props;
+const hasCaptionSlot = Astro.slots.has("caption");
+const hasCaption =
+  hasCaptionSlot || (typeof caption === "string" && caption.length > 0);
 const uid = `ri_${Math.random().toString(36).slice(2)}`;
-const dataZoomable = (zoomable === true || (imgProps as any)['data-zoomable']) ? '1' : undefined;
-const dataDownloadable = (downloadable === true || (imgProps as any)['data-downloadable']) ? '1' : undefined;
-const hasLink = typeof linkHref === 'string' && linkHref.length > 0;
-const resolvedTarget = hasLink ? (linkTarget || '_blank') : undefined;
-const resolvedRel = hasLink ? (linkRel || 'noopener noreferrer') : undefined;
+const dataZoomable =
+  zoomable === true || (imgProps as any)["data-zoomable"] ? "1" : undefined;
+const dataDownloadable =
+  downloadable === true || (imgProps as any)["data-downloadable"]
+    ? "1"
+    : undefined;
+const hasLink = typeof linkHref === "string" && linkHref.length > 0;
+const resolvedTarget = hasLink ? linkTarget || "_blank" : undefined;
+const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
 ---
+
 <div class="ri-root" data-ri-root={uid}>
-  {hasCaption ? (
-    <figure class={(figureClass || '') + (dataDownloadable ? ' has-dl-btn' : '')}>
-      {dataDownloadable ? (
-        <span class="img-dl-wrap">
-          {hasLink ? (
-            <a class="ri-link" href={linkHref} target={resolvedTarget} rel={resolvedRel}>
-              <Image {...imgProps} data-zoomable={dataZoomable} data-downloadable={dataDownloadable} data-download-name={downloadName} data-download-src={downloadSrc} />
-            </a>
-          ) : (
-            <Image {...imgProps} data-zoomable={dataZoomable} data-downloadable={dataDownloadable} data-download-name={downloadName} data-download-src={downloadSrc} />
-          )}
-          <button type="button" class="button button--ghost img-dl-btn" aria-label="Download image" title={downloadName ? `Download ${downloadName}` : 'Download image'}>
-            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 16c-.26 0-.52-.11-.71-.29l-5-5a1 1 0 0 1 1.42-1.42L11 12.59V4a1 1 0 1 1 2 0v8.59l3.29-3.3a1 1 0 1 1 1.42 1.42l-5 5c-.19.18-.45.29-.71.29zM5 20a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2H5z"/></svg>
-          </button>
-        </span>
-      ) : (
-        hasLink ? (
-          <a class="ri-link" href={linkHref} target={resolvedTarget} rel={resolvedRel}>
+  {
+    hasCaption ? (
+      <figure
+        class={(figureClass || "") + (dataDownloadable ? " has-dl-btn" : "")}
+      >
+        {dataDownloadable ? (
+          <span class="img-dl-wrap">
+            {hasLink ? (
+              <a
+                class="ri-link"
+                href={linkHref}
+                target={resolvedTarget}
+                rel={resolvedRel}
+              >
+                <Image
+                  {...imgProps}
+                  data-zoomable={dataZoomable}
+                  data-downloadable={dataDownloadable}
+                  data-download-name={downloadName}
+                  data-download-src={downloadSrc}
+                />
+              </a>
+            ) : (
+              <Image
+                {...imgProps}
+                data-zoomable={dataZoomable}
+                data-downloadable={dataDownloadable}
+                data-download-name={downloadName}
+                data-download-src={downloadSrc}
+              />
+            )}
+            <button
+              type="button"
+              class="button img-dl-btn"
+              aria-label="Download image"
+              title={
+                downloadName ? `Download ${downloadName}` : "Download image"
+              }
+            >
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                <path d="M12 16c-.26 0-.52-.11-.71-.29l-5-5a1 1 0 0 1 1.42-1.42L11 12.59V4a1 1 0 1 1 2 0v8.59l3.29-3.3a1 1 0 1 1 1.42 1.42l-5 5c-.19.18-.45.29-.71.29zM5 20a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2H5z" />
+              </svg>
+            </button>
+          </span>
+        ) : hasLink ? (
+          <a
+            class="ri-link"
+            href={linkHref}
+            target={resolvedTarget}
+            rel={resolvedRel}
+          >
             <Image {...imgProps} data-zoomable={dataZoomable} />
           </a>
         ) : (
           <Image {...imgProps} data-zoomable={dataZoomable} />
-        )
-      )}
-      <figcaption>
-        {hasCaptionSlot ? (
-          <slot name="caption" />
-        ) : (
-          caption && <span set:html={caption} />
         )}
-      </figcaption>
-    </figure>
-  ) : (
-    dataDownloadable ? (
+        <figcaption>
+          {hasCaptionSlot ? (
+            <slot name="caption" />
+          ) : (
+            caption && <span set:html={caption} />
+          )}
+        </figcaption>
+      </figure>
+    ) : dataDownloadable ? (
       <span class="img-dl-wrap">
         {hasLink ? (
-          <a class="ri-link" href={linkHref} target={resolvedTarget} rel={resolvedRel}>
-            <Image {...imgProps} data-zoomable={dataZoomable} data-downloadable={dataDownloadable} data-download-name={downloadName} data-download-src={downloadSrc} />
+          <a
+            class="ri-link"
+            href={linkHref}
+            target={resolvedTarget}
+            rel={resolvedRel}
+          >
+            <Image
+              {...imgProps}
+              data-zoomable={dataZoomable}
+              data-downloadable={dataDownloadable}
+              data-download-name={downloadName}
+              data-download-src={downloadSrc}
+            />
           </a>
         ) : (
-          <Image {...imgProps} data-zoomable={dataZoomable} data-downloadable={dataDownloadable} data-download-name={downloadName} data-download-src={downloadSrc} />
+          <Image
+            {...imgProps}
+            data-zoomable={dataZoomable}
+            data-downloadable={dataDownloadable}
+            data-download-name={downloadName}
+            data-download-src={downloadSrc}
+          />
         )}
-        <button type="button" class="button button--ghost img-dl-btn" aria-label="Download image" title={downloadName ? `Download ${downloadName}` : 'Download image'}>
-          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 16c-.26 0-.52-.11-.71-.29l-5-5a1 1 0 0 1 1.42-1.42L11 12.59V4a1 1 0 1 1 2 0v8.59l3.29-3.3a1 1 0 1 1 1.42 1.42l-5 5c-.19.18-.45.29-.71.29zM5 20a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2H5z"/></svg>
+        <button
+          type="button"
+          class="button img-dl-btn"
+          aria-label="Download image"
+          title={downloadName ? `Download ${downloadName}` : "Download image"}
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+            <path d="M12 16c-.26 0-.52-.11-.71-.29l-5-5a1 1 0 0 1 1.42-1.42L11 12.59V4a1 1 0 1 1 2 0v8.59l3.29-3.3a1 1 0 1 1 1.42 1.42l-5 5c-.19.18-.45.29-.71.29zM5 20a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2H5z" />
+          </svg>
         </button>
       </span>
-    ) : (
-      hasLink ? (
-        <a class="ri-link" href={linkHref} target={resolvedTarget} rel={resolvedRel}>
-          <Image {...imgProps} data-zoomable={dataZoomable} />
-        </a>
-      ) : (
+    ) : hasLink ? (
+      <a
+        class="ri-link"
+        href={linkHref}
+        target={resolvedTarget}
+        rel={resolvedRel}
+      >
         <Image {...imgProps} data-zoomable={dataZoomable} />
-      )
+      </a>
+    ) : (
+      <Image {...imgProps} data-zoomable={dataZoomable} />
     )
-  )}
+  }
 </div>
 
 <script is:inline>
   (() => {
+    console.log("ResponsiveImage script: Starting execution");
     const scriptEl = document.currentScript;
+    console.log("ResponsiveImage script: scriptEl =", scriptEl);
     const root = scriptEl ? scriptEl.previousElementSibling : null;
-    if (!root) return;
-    const img = (root.tagName === 'IMG' ? root : (root.querySelector ? root.querySelector('img') : null));
-    if (!img) return;
+    console.log("ResponsiveImage script: root =", root);
+    if (!root) {
+      console.log("ResponsiveImage script: No root element found, exiting");
+      return;
+    }
+    const img =
+      root.tagName === "IMG"
+        ? root
+        : root.querySelector
+          ? root.querySelector("img")
+          : null;
+    console.log("ResponsiveImage script: img =", img);
+    if (!img) {
+      console.log("ResponsiveImage script: No img element found, exiting");
+      return;
+    }
 
     // medium-zoom integration scoped to this image only
     const ensureMediumZoomReady = (cb) => {
@@ -112,99 +202,174 @@ const resolvedRel = hasLink ? (linkRel || 'noopener noreferrer') : undefined;
       if (window.mediumZoom) return cb();
       const retry = () => {
         // @ts-ignore
-        if (window.mediumZoom) cb(); else setTimeout(retry, 30);
+        if (window.mediumZoom) cb();
+        else setTimeout(retry, 30);
       };
       retry();
     };
 
     const initZoomIfNeeded = () => {
-      if (img.getAttribute('data-zoomable') !== '1') return;
-      const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-      const background = isDark ? 'rgba(0,0,0,.9)' : 'rgba(0,0,0,.85)';
+      console.log("ResponsiveImage: checking zoom for", img);
+      console.log(
+        "ResponsiveImage: data-zoomable =",
+        img.getAttribute("data-zoomable"),
+      );
+      if (img.getAttribute("data-zoomable") !== "1") return;
+      console.log("ResponsiveImage: initializing zoom for", img);
+      const isDark =
+        document.documentElement.getAttribute("data-theme") === "dark";
+      const background = isDark ? "rgba(0,0,0,.9)" : "rgba(0,0,0,.85)";
       ensureMediumZoomReady(() => {
         // @ts-ignore
-        const instance = window.mediumZoom ? window.mediumZoom(img, { background, margin: 24, scrollOffset: 0 }) : null;
+        const instance = window.mediumZoom
+          ? window.mediumZoom(img, { background, margin: 24, scrollOffset: 0 })
+          : null;
+        console.log("ResponsiveImage: zoom instance created:", instance);
         if (!instance) return;
         let onScrollLike;
         const attachCloseOnScroll = () => {
           if (onScrollLike) return;
-          onScrollLike = () => { try { instance.close && instance.close(); } catch {} };
-          window.addEventListener('wheel', onScrollLike, { passive: true });
-          window.addEventListener('touchmove', onScrollLike, { passive: true });
-          window.addEventListener('scroll', onScrollLike, { passive: true });
+          onScrollLike = () => {
+            try {
+              instance.close && instance.close();
+            } catch {}
+          };
+          window.addEventListener("wheel", onScrollLike, { passive: true });
+          window.addEventListener("touchmove", onScrollLike, { passive: true });
+          window.addEventListener("scroll", onScrollLike, { passive: true });
         };
         const detachCloseOnScroll = () => {
           if (!onScrollLike) return;
-          window.removeEventListener('wheel', onScrollLike);
-          window.removeEventListener('touchmove', onScrollLike);
-          window.removeEventListener('scroll', onScrollLike);
+          window.removeEventListener("wheel", onScrollLike);
+          window.removeEventListener("touchmove", onScrollLike);
+          window.removeEventListener("scroll", onScrollLike);
           onScrollLike = null;
         };
-        try { instance.on && instance.on('open', attachCloseOnScroll); } catch {}
-        try { instance.on && instance.on('close', detachCloseOnScroll); } catch {}
+        try {
+          instance.on && instance.on("open", attachCloseOnScroll);
+        } catch {}
+        try {
+          instance.on && instance.on("close", detachCloseOnScroll);
+        } catch {}
         const themeObserver = new MutationObserver(() => {
-          const dark = document.documentElement.getAttribute('data-theme') === 'dark';
-          try { instance.update && instance.update({ background: dark ? 'rgba(0,0,0,.9)' : 'rgba(0,0,0,.85)' }); } catch {}
+          const dark =
+            document.documentElement.getAttribute("data-theme") === "dark";
+          try {
+            instance.update &&
+              instance.update({
+                background: dark ? "rgba(0,0,0,.9)" : "rgba(0,0,0,.85)",
+              });
+          } catch {}
         });
-        themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+        themeObserver.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ["data-theme"],
+        });
+      });
+    };
+
+    // Gestion zoom global pour masquer autres ResponsiveImage
+    const setupGlobalZoomBehavior = () => {
+      img.addEventListener("click", () => {
+        if (img.getAttribute("data-zoomable") === "1") {
+          // Enlever zoom-active de tous les autres ri-root
+          document
+            .querySelectorAll(".ri-root.zoom-active")
+            .forEach((el) => el.classList.remove("zoom-active"));
+
+          // Ajouter zoom-active à cet ri-root
+          root.classList.add("zoom-active");
+        }
       });
     };
 
     // Download button handler
-    const dlBtn = (root.querySelector ? root.querySelector('.img-dl-btn') : null);
+    const dlBtn = root.querySelector ? root.querySelector(".img-dl-btn") : null;
     if (dlBtn) {
-      dlBtn.addEventListener('click', async (ev) => {
+      dlBtn.addEventListener("click", async (ev) => {
         try {
           ev.preventDefault();
           ev.stopPropagation();
           const pickHrefAndName = () => {
-            const current = img.currentSrc || img.src || '';
-            let href = img.getAttribute('data-download-src') || current;
+            const current = img.currentSrc || img.src || "";
+            let href = img.getAttribute("data-download-src") || current;
             const deriveName = () => {
               try {
                 const u = new URL(current, location.href);
-                const rawHref = u.searchParams.get('href');
-                const candidate = rawHref ? decodeURIComponent(rawHref) : u.pathname;
-                const last = String(candidate).split('/').pop() || '';
-                const base = last.split('?')[0].split('#')[0];
-                const m = base.match(/^(.+?\.(?:png|jpe?g|webp|avif|gif|svg))(?:[._-].*)?$/i);
+                const rawHref = u.searchParams.get("href");
+                const candidate = rawHref
+                  ? decodeURIComponent(rawHref)
+                  : u.pathname;
+                const last = String(candidate).split("/").pop() || "";
+                const base = last.split("?")[0].split("#")[0];
+                const m = base.match(
+                  /^(.+?\.(?:png|jpe?g|webp|avif|gif|svg))(?:[._-].*)?$/i,
+                );
                 if (m && m[1]) return m[1];
-                return base || 'image';
-              } catch { return 'image'; }
+                return base || "image";
+              } catch {
+                return "image";
+              }
             };
-            const name = img.getAttribute('data-download-name') || deriveName();
+            const name = img.getAttribute("data-download-name") || deriveName();
             return { href, name };
           };
           const picked = pickHrefAndName();
-          const res = await fetch(picked.href, { credentials: 'same-origin' });
+          const res = await fetch(picked.href, { credentials: "same-origin" });
           const blob = await res.blob();
           const objectUrl = URL.createObjectURL(blob);
-          const tmp = document.createElement('a');
+          const tmp = document.createElement("a");
           tmp.href = objectUrl;
-          tmp.download = picked.name || 'image';
-          tmp.target = '_self';
-          tmp.rel = 'noopener';
-          tmp.style.display = 'none';
+          tmp.download = picked.name || "image";
+          tmp.target = "_self";
+          tmp.rel = "noopener";
+          tmp.style.display = "none";
           document.body.appendChild(tmp);
           tmp.click();
-          setTimeout(() => { URL.revokeObjectURL(objectUrl); tmp.remove(); }, 1000);
+          setTimeout(() => {
+            URL.revokeObjectURL(objectUrl);
+            tmp.remove();
+          }, 1000);
         } catch {}
       });
     }
 
-    if (document.readyState === 'complete') initZoomIfNeeded();
-    else window.addEventListener('load', initZoomIfNeeded, { once: true });
+    // Setup comportement zoom
+    setupGlobalZoomBehavior();
+
+    if (document.readyState === "complete") initZoomIfNeeded();
+    else window.addEventListener("load", initZoomIfNeeded, { once: true });
   })();
 </script>
 
-
 <style>
-
-  figure { margin: var(--block-spacing-y) 0; }
-  figcaption { text-align: left; font-size: 0.9rem; color: var(--muted-color); margin-top: 6px; }
-  figcaption { background: var(--page-bg); position: relative; z-index: var(--z-elevated); display: block; width: 100%; }
-  .image-credit { display: block; margin-top: 4px; font-size: 12px; color: var(--muted-color); }
-  .image-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
+  figure {
+    margin: var(--block-spacing-y) 0;
+  }
+  figcaption {
+    text-align: left;
+    font-size: 0.9rem;
+    color: var(--muted-color);
+    margin-top: 6px;
+  }
+  figcaption {
+    background: var(--page-bg);
+    position: relative;
+    z-index: var(--z-elevated);
+    display: block;
+    width: 100%;
+  }
+  .image-credit {
+    display: block;
+    margin-top: 4px;
+    font-size: 12px;
+    color: var(--muted-color);
+  }
+  .image-credit a {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
 
   /* Zoomable overlay container (if used by any lightbox implementation) */
   [data-zoom-overlay],
@@ -215,16 +380,30 @@ const resolvedRel = hasLink ? (linkRel || 'noopener noreferrer') : undefined;
   }
 
   /* Download link inside figures */
-  figure .download-link { position: relative; z-index: var(--z-elevated); }
+  figure .download-link {
+    position: relative;
+    z-index: var(--z-elevated);
+  }
 
-    /* Opt-in zoomable images */
-  img[data-zoomable] { cursor: zoom-in; }
-  .medium-zoom--opened img[data-zoomable] { cursor: zoom-out; }
+  /* Opt-in zoomable images */
+  img[data-zoomable] {
+    cursor: zoom-in;
+  }
+  .medium-zoom--opened img[data-zoomable] {
+    cursor: zoom-out;
+  }
 
   /* Download button for img[data-downloadable] */
-  figure.has-dl-btn { position: relative; }
-  .dl-host { position: relative; }
-  .img-dl-wrap { position: relative; display: inline-block; }
+  figure.has-dl-btn {
+    position: relative;
+  }
+  .dl-host {
+    position: relative;
+  }
+  .img-dl-wrap {
+    position: relative;
+    display: inline-block;
+  }
   .img-dl-btn {
     position: absolute;
     right: 8px;
@@ -236,12 +415,72 @@ const resolvedRel = hasLink ? (linkRel || 'noopener noreferrer') : undefined;
     border-radius: 6px;
     color: white;
     text-decoration: none;
-    border: 1px solid rgba(255,255,255,0.25);
+    border: 1px solid rgba(255, 255, 255, 0.25);
     z-index: var(--z-elevated);
     display: none;
+    background: var(--primary-color);
+  }
+
+  /* Quand une image est zoomée, cacher TOUS les ResponsiveImage de la page */
+  :global(.medium-zoom--opened) .ri-root {
+    opacity: 0;
+    z-index: calc(var(--z-base) - 1);
+    transition: opacity 0.3s ease;
+  }
+
+  /* L'image actuellement zoomée reste visible */
+  :global(.medium-zoom--opened) .ri-root:has(.medium-zoom--opened) {
+    opacity: 1;
+    z-index: var(--z-overlay);
+  }
+
+  /* Fallback pour navigateurs sans support :has() */
+  :global(.medium-zoom--opened) .ri-root.zoom-active {
+    opacity: 1 !important;
+    z-index: var(--z-overlay) !important;
+  }
+
+  /* Spécifiquement masquer bouton download et figcaption lors du zoom */
+  :global(.medium-zoom--opened) .img-dl-btn {
+    opacity: 0;
+    z-index: calc(var(--z-base) - 1);
+    transition: opacity 0.3s ease;
+  }
+
+  :global(.medium-zoom--opened) figcaption {
+    opacity: 0;
+    z-index: calc(var(--z-base) - 1);
+    transition: opacity 0.3s ease;
+  }
+
+  /* Même pour l'image zoomée active, masquer bouton et caption pour une expérience propre */
+  :global(.medium-zoom--opened) .ri-root.zoom-active .img-dl-btn {
+    opacity: 0;
+    z-index: calc(var(--z-base) - 1);
+  }
+
+  :global(.medium-zoom--opened) .ri-root.zoom-active figcaption {
+    opacity: 0;
+    z-index: calc(var(--z-base) - 1);
+  }
+  .img-dl-btn svg {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+  }
+  .img-dl-wrap:hover .img-dl-btn {
+    display: inline-flex;
+  }
+  .img-dl-btn:hover {
+    background: var(--primary-color-hover);
+  }
+
+  [data-theme="dark"] .img-dl-btn {
+    background: var(--primary-color);
+    color: var(--on-primary);
+    border-color: var(--primary-color);
+  }
+  [data-theme="dark"] .img-dl-btn:hover {
+    background: var(--primary-color-hover);
   }
-  .img-dl-btn svg { width: 18px; height: 18px; fill: currentColor; }
-  .img-dl-wrap:hover .img-dl-btn { display: inline-flex; }
-  [data-theme="dark"] .img-dl-btn { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.25); }
-  [data-theme="dark"] .img-dl-btn:hover { background: rgba(255,255,255,0.25); }
-</style>
+</style>

app/src/components/Sidenote.astro

@@ -1,37 +1,78 @@
 ---
+
 ---
-<div class="aside">
-  <div class="aside__main">
+
+<div class="sidenote-container">
+  <aside class="sidenote">
     <slot />
-  </div>
-  <aside class="aside__aside">
-    <slot name="aside" />
   </aside>
 </div>
 
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const containers = document.querySelectorAll(".sidenote-container");
+
+    containers.forEach((container) => {
+      // Trouve l'élément précédent (frère juste avant)
+      const previousElement = container.previousElementSibling;
+
+      if (previousElement) {
+        // Rend le conteneur de la sidenote relatif à l'élément précédent
+        previousElement.style.position = "relative";
+
+        // Déplace le conteneur de la sidenote comme enfant de l'élément précédent
+        previousElement.appendChild(container);
+
+        // Style le conteneur pour qu'il se positionne correctement
+        container.style.position = "absolute";
+        container.style.top = "0";
+        container.style.right = "-292px"; // 260px width + 32px gap
+        container.style.width = "260px";
+
+        // Affiche le container avec un fade-in
+        container.style.display = "block";
+        container.style.opacity = "0";
+
+        // Fade-in avec transition
+        setTimeout(() => {
+          container.style.opacity = "1";
+        }, 10);
+      }
+    });
+  });
+</script>
 
 <style is:global>
-  .aside {
-    position: relative;
+  .sidenote-container {
+    /* Caché par défaut, sera affiché par JS */
+    display: none;
     margin: 12px 0;
+    /* Transition pour le fade-in */
+    transition: opacity 0.3s ease-in-out;
   }
 
-  .aside__aside {
-    position: absolute;
-    top: 0;
-    right: -260px; /* push into the right grid column (width 260 + gap 32) */
-    width: 260px;
+  .sidenote {
     border-radius: 8px;
     padding: 0 30px;
     font-size: 0.9rem;
     color: var(--muted-color);
+    margin: 0;
   }
 
   @media (--bp-content-collapse) {
-    .aside__aside {
-      position: static;
-      width: auto;
+    .sidenote-container {
+      position: static !important;
+      width: auto !important;
+      right: auto !important;
+      top: auto !important;
       margin-top: 8px;
+      /* Affichage normal sur mobile */
+      display: block !important;
+      opacity: 1 !important;
+    }
+
+    .sidenote {
+      padding: 0;
     }
   }
 </style>

app/src/content/article.mdx

@@ -20,15 +20,15 @@ tags:
 tableOfContentsAutoCollapse: true
 ---
 
-import Introduction from "./chapters/introduction.mdx";
-import BestPractices from "./chapters/best-pratices.mdx";
-import WritingYourContent from "./chapters/writing-your-content.mdx";
-import AvailableBlocks from "./chapters/markdown.mdx";  
-import GettingStarted from "./chapters/getting-started.mdx";
-import Markdown from "./chapters/markdown.mdx";
-import Components from "./chapters/components.mdx";
-import Greetings from "./chapters/greetings.mdx";
-import VibeCodingCharts from "./chapters/vibe-coding-charts.mdx";
+import Introduction from "./chapters/demo/introduction.mdx";
+import BestPractices from "./chapters/demo/best-pratices.mdx";
+import WritingYourContent from "./chapters/demo/writing-your-content.mdx";
+import AvailableBlocks from "./chapters/demo/markdown.mdx";  
+import GettingStarted from "./chapters/demo/getting-started.mdx";
+import Markdown from "./chapters/demo/markdown.mdx";
+import Components from "./chapters/demo/components.mdx";
+import Greetings from "./chapters/demo/greetings.mdx";
+import VibeCodingCharts from "./chapters/demo/vibe-coding-charts.mdx";
 
 <Introduction />
 

app/src/content/assets/data/llm_benchmarks.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:03eeac176ae9abab0c36d798678d80aaa14228ae71d0f9134127cc3cc0d00196
-size 1088
+oid sha256:67f10bd2fdcce7231c40db14b013a587e0dcecf02e427b10bb159669576e9ad8
+size 834

app/src/content/chapters/{best-pratices.mdx → demo/best-pratices.mdx}

@@ -1,7 +1,9 @@
 
-import visualPoster from '../assets/image/visual-vocabulary-poster.png';
-import Note from '../../components/Note.astro';
-import ResponsiveImage from '../../components/ResponsiveImage.astro';
+import visualPoster from '../../assets/image/visual-vocabulary-poster.png';
+import Note from '../../../components/Note.astro';
+import ResponsiveImage from '../../../components/ResponsiveImage.astro';
+import HtmlEmbed from '../../../components/HtmlEmbed.astro';
+import Sidenote from '../../../components/Sidenote.astro';
 
 
 ## Best Practices
@@ -36,26 +38,22 @@ Favor **concise captions** and callouts that clarify what to look at and why it
   
 </div>
 
-{/* ### Use the right color
+### Use the right color
+
 A palette encodes **meaning** (categories, magnitudes, oppositions), preserves **readability** and **accessibility** (sufficient contrast, color‑vision safety), and ensures **perceptually smooth transitions**. The three families below illustrate when to use **categorical**, **sequential**, or **diverging** colors and how they evolve from the same **reference hue**.
 
-<Sidenote>
 <div className="">
   <HtmlEmbed src="palettes.html" />
 </div>
-<Fragment slot="aside">
-  You can choose a color from the palette to update palettes and copy them to your clipboard.
-</Fragment>
-<Fragment slot="aside">
-  It will be applied to the <a href="/" target="_blank">whole page</a>.
-</Fragment>
-</Sidenote> */}
+
+<Sidenote>
+  You can choose a color from the palette to update palettes and copy them to your clipboard. It will be applied to the <a href="/" target="_blank">whole page</a>.
+</Sidenote>
 
 ### Use the right chart
 
 Picking the right visualization depends on your goal (compare values, show distribution, part-to-whole, trends, relationships, etc.). The Visual Vocabulary poster below provides a concise mapping from **analytical task** to **chart types**.
 
-
 <ResponsiveImage
   src={visualPoster}
   alt="Visual Vocabulary: choosing the right chart by task"

app/src/content/chapters/{components.mdx → demo/components.mdx}

@@ -1,35 +1,79 @@
 import { Image } from 'astro:assets';
-import placeholder from '../assets/image/placeholder.png';
-import audioDemo from '../assets/audio/audio-example.wav';
-import HtmlEmbed from '../../components/HtmlEmbed.astro';
-import Sidenote from '../../components/Sidenote.astro';
-import Wide from '../../components/Wide.astro';
-import Note from '../../components/Note.astro';
-import FullWidth from '../../components/FullWidth.astro';
-import Accordion from '../../components/Accordion.astro';
-import ResponsiveImage from '../../components/ResponsiveImage.astro';
+import placeholder from '../../assets/image/placeholder.png';
+import audioDemo from '../../assets/audio/audio-example.wav';
+import HtmlEmbed from '../../../components/HtmlEmbed.astro';
+import Sidenote from '../../../components/Sidenote.astro';
+import Wide from '../../../components/Wide.astro';
+import Note from '../../../components/Note.astro';
+import FullWidth from '../../../components/FullWidth.astro';
+import Accordion from '../../../components/Accordion.astro';
+import Figure from '../../../components/ResponsiveImage.astro';
+import SubFigures from '../../../components/MultiImage.astro';
+import Quote from '../../../components/Quote.astro';
 
 ## Components
 
 **All** the following **components** are available in the **article.mdx** file. You can also create your own **components** by creating a new file in the `/components` folder.
-You have to import them in the **.mdx** file you want to use them in.
-
-<br/>
-<div className="button-group">
-  <button className="button" href="#responsiveimage">ResponsiveImage</button>
-  <button className="button" href="#placement">Placement</button>
-  <button className="button" href="#accordion">Accordion</button>
-  <button className="button" href="#note">Note</button>
-  <button className="button" href="#htmlembed">HtmlEmbed</button>
-  <button className="button" href="#iframe">Iframe</button>
+
+### How to import components
+
+To use any component in your MDX file, add the import statement at the top:
+
+```mdx
+import Figure from '../components/ResponsiveImage.astro';
+import SubFigures from '../components/MultiImage.astro';
+import Note from '../components/Note.astro';
+
+# Your content
+
+<Figure src={myImage} alt="Description" />
+<Note>This is a note</Note>
+```
+
+Here are the components that are available:
+
+
+<div className="feature-grid">
+  <a href="#figure" className="feature-card">
+    <strong>Figure</strong>
+    <span>Optimized images</span>
+  </a>
+  <a href="#subfigures" className="feature-card">
+    <strong>SubFigures</strong>
+    <span>Multi-panel figures</span>
+  </a>
+  <a href="#placement" className="feature-card">
+    <strong>Placement</strong>
+    <span>Layout helpers</span>
+  </a>
+  <a href="#accordion" className="feature-card">
+    <strong>Accordion</strong>
+    <span>Collapsible content</span>
+  </a>
+  <a href="#note" className="feature-card">
+    <strong>Note</strong>
+    <span>Contextual callouts</span>
+  </a>
+  <a href="#quote" className="feature-card">
+    <strong>Quote</strong>
+    <span>Elegant citations</span>
+  </a>
+  <a href="#htmlembed" className="feature-card">
+    <strong>HtmlEmbed</strong>
+    <span>External content</span>
+  </a>
+  <a href="#iframe" className="feature-card">
+    <strong>Iframe</strong>
+    <span>Web embeds</span>
+  </a>
 </div>
 
-### ResponsiveImage
+### Figure
 
-**Responsive images** automatically generate an optimized `srcset` and `sizes` so the browser downloads the most appropriate file for the current viewport and DPR. You can also request multiple output formats (e.g., **AVIF**, **WebP**, fallback **PNG/JPEG**) and control **lazy loading/decoding** for better **performance**.
+**Figures** automatically generate optimized `srcset` and `sizes` so the browser downloads the most appropriate file for the current viewport and DPR. You can also request multiple output formats (e.g., **AVIF**, **WebP**, fallback **PNG/JPEG**) and control **lazy loading/decoding** for better **performance**.
 
 
-<ResponsiveImage
+<Figure
   src={placeholder}
   zoomable
   downloadable
@@ -50,12 +94,12 @@ You have to import them in the **.mdx** file you want to use them in.
 
 <Accordion title="Code example">
 ```mdx
-import ResponsiveImage from '../components/ResponsiveImage.astro'
+import Figure from '../../../components/ResponsiveImage.astro'
 import myImage from './assets/image/placeholder.jpg'
 
-<ResponsiveImage src={myImage} alt="Responsive, optimized example image" />
+<Figure src={myImage} alt="Optimized figure with caption" />
 
-<ResponsiveImage
+<Figure
   src={myImage}
   layout="fixed"
   zoomable
@@ -67,6 +111,40 @@ import myImage from './assets/image/placeholder.jpg'
 ```
 </Accordion>
 
+### SubFigures
+
+**Display multiple figures** in a grid layout with customizable columns and captions. Perfect for **multi-panel figures**, **comparisons**, and **step-by-step visualizations** — just like LaTeX's `subfigure` environment.
+
+<SubFigures
+  images={[
+    { src: placeholder, alt: "Image 1", caption: "First image with caption" },
+    { src: placeholder, alt: "Image 2", caption: "Second image" },
+    { src: placeholder, alt: "Image 3", caption: "Third image description" }
+  ]}
+  layout="3-column"
+  caption="Gallery of three images with individual captions"
+  zoomable={true}
+/>
+
+<Accordion title="Code example">
+```mdx
+import placeholder from '../assets/image/placeholder.png';
+
+<SubFigures
+  images={[
+    { src: placeholder, alt: "Panel A", caption: "(a) First panel" },
+    { src: placeholder, alt: "Panel B", caption: "(b) Second panel" },
+    { src: placeholder, alt: "Panel C", caption: "(c) Third panel" }
+  ]}
+  layout="3-column"
+  caption="Figure 1: Multi-panel comparison showing different conditions"
+  zoomable={true}
+/>
+```
+</Accordion>
+
+**Layout options:** `2-column`, `3-column`, `4-column`, `auto`  
+**Features:** Individual subcaptions (a), (b), (c), zoom functionality, responsive design
 
 ### Placement
 
@@ -74,21 +152,18 @@ Use these helpers when you need to step outside the main content flow: **Sidenot
 
 #### Sidenotes
 
+This paragraph presents a **key idea** concisely.
+
 <Sidenote>
-  This paragraph presents a **key idea** concisely.
-  <Fragment slot="aside">
-    **Side note** for brief context or a definition.
-  </Fragment>
-  </Sidenote>
+  **Side note** for brief context or a definition.
+</Sidenote>
 
 <Accordion title="Code example">
 ```mdx
-import Sidenote from '../components/Sidenote.astro'
+import Sidenote from '../../../components/Sidenote.astro'
 
-<Sidenote>
-  Main paragraph with the core idea.
-  <Fragment slot="aside">Short side note.</Fragment>
-</Sidenote>
+Main paragraph with the core idea.
+<Sidenote>Short side note.</Sidenote>
 ```
 </Accordion>
 
@@ -101,7 +176,7 @@ import Sidenote from '../components/Sidenote.astro'
 
 <Accordion title="Code example">
 ```mdx
-import Wide from '../components/Wide.astro'
+import Wide from '../../../components/Wide.astro'
 
 <Wide>
   Your content here...
@@ -117,7 +192,7 @@ import Wide from '../components/Wide.astro'
 
 <Accordion title="Code example">
 ```mdx
-import FullWidth from '../components/FullWidth.astro'
+import FullWidth from '../../../components/FullWidth.astro'
 
 <FullWidth>
   Your content here...
@@ -151,7 +226,7 @@ Can be used like this `<Accordion>some content</Accordion>`. You can pass any ch
 
 <Accordion title="Code example">
 ````mdx
-import Accordion from '../components/Accordion.astro'
+import Accordion from '../../../components/Accordion.astro'
 
 <Accordion title="Accordion title" open>
   <p>Free content with <strong>markdown</strong> and MDX components.</p>
@@ -209,7 +284,7 @@ Small contextual callout for tips, caveats, or emphasis.
 
 <Accordion title="Code example">
 ```mdx
-import Note from '../../components/Note.astro'
+import Note from '../../../components/Note.astro'
 
 <Note title="Heads‑up" emoji="💡" variant="info">
   Use notes to surface context without breaking reading flow.
@@ -229,6 +304,28 @@ import Note from '../../components/Note.astro'
 ```
 </Accordion>
 
+### Quote
+
+Elegant quotes with optional author attribution.
+
+<Quote author="Geoffrey Hinton">
+  The brain has about 10^14 synapses and we only live for about 10^9 seconds. So we have a lot more parameters than data. This motivates the idea that we must do a lot of unsupervised learning since labeled examples are so limited.
+</Quote>
+
+| Prop     | Required | Type   | Description                    |
+|----------|----------|--------|--------------------------------|
+| `author` | No       | string | Author of the quote           |
+| `source` | No       | string | Source publication or context |
+
+<Accordion title="Code example">
+```mdx
+import Quote from '../../../components/Quote.astro'
+
+<Quote author="Geoffrey Hinton">
+  The brain has about 10^14 synapses and we only live for about 10^9 seconds. So we have a lot more parameters than data. This motivates the idea that we must do a lot of unsupervised learning since labeled examples are so limited.
+</Quote>
+```
+</Accordion>
 
 ### Iframes
 
@@ -274,7 +371,7 @@ For researchers who want to stay in **Python** while targeting **D3**, the [d3bl
 
 <Accordion title="Code example">
 ```mdx
-import HtmlEmbed from '../components/HtmlEmbed.astro'
+import HtmlEmbed from '../../../components/HtmlEmbed.astro'
 
 <HtmlEmbed src="d3-line.html" title="This is a chart title" desc="Some chart description <br/>Credit: <a href='https://example.com' target='_blank'>Example</a>" />
 

app/src/content/chapters/{debug-components.mdx → demo/debug-components.mdx}

@@ -1,9 +1,9 @@
-import Accordion from '../../components/Accordion.astro';
-import HtmlEmbed from '../../components/HtmlEmbed.astro';
-import ResponsiveImage from '../../components/ResponsiveImage.astro';
-import Wide from '../../components/Wide.astro';
-import FullWidth from '../../components/FullWidth.astro';
-import Note from '../../components/Note.astro';
+import Accordion from '../../../components/Accordion.astro';
+import HtmlEmbed from '../../../components/HtmlEmbed.astro';
+import ResponsiveImage from '../../../components/ResponsiveImage.astro';
+import Wide from '../../../components/Wide.astro';
+import FullWidth from '../../../components/FullWidth.astro';
+import Note from '../../../components/Note.astro';
 
 | Prop                   | Required |
 |------------------------|----------|
@@ -29,7 +29,7 @@ import Note from '../../components/Note.astro';
 
 <Accordion title="code">
   ```mdx
-  import HtmlEmbed from '../components/HtmlEmbed.astro'
+  import HtmlEmbed from '../../../components/HtmlEmbed.astro'
 
   <HtmlEmbed src="plotly-line.html" title="Plotly Line" desc="Some chart description" />
   <HtmlEmbed src="d3-line-example.html" title="D3 Line" desc="Some chart description" />

app/src/content/chapters/{getting-started.mdx → demo/getting-started.mdx}

@@ -1,5 +1,5 @@
-import Sidenote from '../../components/Sidenote.astro';
-import Note from '../../components/Note.astro';
+import Sidenote from '../../../components/Sidenote.astro';
+import Note from '../../../components/Note.astro';
 
 ## Getting Started
 
@@ -34,14 +34,14 @@ git lfs pull
 
 
 6. Install dependencies.
-<Sidenote>
+
 ```bash
 cd app
 npm install
 ```
-<Fragment slot="aside">
-    Alternatively, you can use **Yarn** as your package manager.
-  </Fragment>
+
+<Sidenote>
+  Alternatively, you can use **Yarn** as your package manager.
 </Sidenote>
 
 

app/src/content/chapters/{greetings.mdx → demo/greetings.mdx}

@@ -2,7 +2,7 @@
 
 Huge thanks to the following people for their **precious feedbacks**!
 
-import HfUser from '../../components/HfUser.astro';
+import HfUser from '../../../components/HfUser.astro';
 
 <div className="hf-user-list">
   <HfUser username="lvwerra" name="Leandro von Werra" />

app/src/content/chapters/{introduction.mdx → demo/introduction.mdx}

@@ -1,18 +1,15 @@
-import Sidenote from "../../components/Sidenote.astro";
+import Sidenote from "../../../components/Sidenote.astro";
 
-<Sidenote>
-  Welcome to this single‑page **research article template**. It helps you publish **clear**, **modern**, and **interactive technical writing** with **minimal setup**.
-  
-  Grounded in up to date good practices in web dev, it favors **interactive explanations**, **clear notation**, and **inspectable examples** over static snapshots.
+Welcome to this single‑page **research article template**. It helps you publish **clear**, **modern**, and **interactive technical writing** with **minimal setup**.
+
+Grounded in up to date good practices in web dev, it favors **interactive explanations**, **clear notation**, and **inspectable examples** over static snapshots.
 
-  <Fragment slot="aside">
-    Reading time: 20–25 minutes.
-  </Fragment>
+<Sidenote>
+  Reading time: 20–25 minutes.
 </Sidenote>
 
 #### Features
 
-<Sidenote>
 <div className="tag-list">
   <span className="tag">Markdown-based</span>
   <span className="tag">KaTeX math</span>
@@ -34,9 +31,9 @@ import Sidenote from "../../components/Sidenote.astro";
   <span className="tag">Dark theme</span>
   <span className="tag">Mobile friendly</span>
 </div>
-<Fragment slot="aside">
-    If you have questions, remarks or suggestions, open a discussion on the <a href="https://huggingface.co/spaces/tfrere/research-article-template/discussions?status=open&type=discussion">Community tab</a>!
-  </Fragment>
+
+<Sidenote>
+  If you have questions, remarks or suggestions, open a discussion on the <a href="https://huggingface.co/spaces/tfrere/research-article-template/discussions?status=open&type=discussion">Community tab</a>!
 </Sidenote>
 
 ## Introduction
@@ -55,7 +52,6 @@ This is not a CMS or a multi‑page blog—it's a **focused**, **single‑page**
 
 ### Inspired by Distill
 
-<Sidenote>
 This project stands in the direct continuity of [Distill](https://distill.pub/) (2016–2021). Our goal is to carry that spirit forward and push it even further: **accessible scientific writing**, **high‑quality interactive explanations**, and **reproducible**, production‑ready demos.
 
 To give you a sense of what inspired this template, here is a short, curated list of **well‑designed** and often **interactive** works from Distill:
@@ -65,7 +61,6 @@ To give you a sense of what inspired this template, here is a short, curated lis
 - [Handwriting with a Neural Network](https://distill.pub/2016/handwriting/)
 - [The Building Blocks of Interpretability](https://distill.pub/2018/building-blocks/)
 
-<Fragment slot="aside">
-    I'm always excited to discover more great examples—please share your favorites in the <a href="https://huggingface.co/spaces/tfrere/research-blog-template/discussions?status=open&type=discussion">Community tab</a>!
-  </Fragment>
+<Sidenote>
+  I'm always excited to discover more great examples—please share your favorites in the <a href="https://huggingface.co/spaces/tfrere/research-blog-template/discussions?status=open&type=discussion">Community tab</a>!
 </Sidenote>

app/src/content/chapters/{markdown.mdx → demo/markdown.mdx}

@@ -1,27 +1,64 @@
-import placeholder from '../assets/image/placeholder.png';
-import audioDemo from '../assets/audio/audio-example.wav';
-import HtmlEmbed from '../../components/HtmlEmbed.astro';
-import Sidenote from '../../components/Sidenote.astro';
-import Wide from '../../components/Wide.astro';
-import Note from '../../components/Note.astro';
-import FullWidth from '../../components/FullWidth.astro';
-import Accordion from '../../components/Accordion.astro';
-import ResponsiveImage from '../../components/ResponsiveImage.astro';
+import placeholder from '../../assets/image/placeholder.png';
+import audioDemo from '../../assets/audio/audio-example.wav';
+import HtmlEmbed from '../../../components/HtmlEmbed.astro';
+import Sidenote from '../../../components/Sidenote.astro';
+import Wide from '../../../components/Wide.astro';
+import Note from '../../../components/Note.astro';
+import FullWidth from '../../../components/FullWidth.astro';
+import Accordion from '../../../components/Accordion.astro';
+import ResponsiveImage from '../../../components/ResponsiveImage.astro';
 
 ## Markdown
 
-All the following **markdown features** are available **natively** in the `article.mdx` file. See also the complete [**Markdown documentation**](https://www.markdownguide.org/basic-syntax/).
-
-<br/>
-<div className="button-group">
-  <button className="button" href="#math">Math</button>
-  <button className="button" href="#code-blocks">Code</button>
-  <button className="button" href="#citation-and-notes">Citation</button>
-  <button className="button" href="#footnote">Footnote</button>
-  <button className="button" href="#mermaid-diagrams">Mermaid</button>
-  <button className="button" href="#separator">Separator</button>
-  <button className="button" href="#table">Table</button>
-  <button className="button" href="#audio">Audio</button>
+All the following **markdown features** are available **natively** in the `article.mdx` file. No imports needed, just write markdown directly:
+
+**Text formatting** — `**Bold**` → **Bold**, `*italic*` → *italic*, `~~strikethrough~~` → ~~strikethrough~~
+
+**Code** — `` `inline code` `` → `inline code`, triple backticks for code blocks
+
+**Lists** — `- Item` for bullets, `1. Item` for numbered lists with nesting support
+
+**Links** — `[text](url)` → [External links](https://example.com) and internal navigation
+
+**Highlight** — `<mark>text</mark>` → <mark>Highlighted text</mark> for emphasis
+
+See also the complete [**Markdown documentation**](https://www.markdownguide.org/basic-syntax/).
+
+**Advanced features** — Explore specialized content types:
+
+<div className="feature-grid">
+  <a href="#math" className="feature-card">
+    <strong>Math</strong>
+    <span>LaTeX equations</span>
+  </a>
+  <a href="#code-blocks" className="feature-card">
+    <strong>Code</strong>
+    <span>Syntax highlighting</span>
+  </a>
+  <a href="#citation-and-notes" className="feature-card">
+    <strong>Citation</strong>
+    <span>Academic references</span>
+  </a>
+  <a href="#footnote" className="feature-card">
+    <strong>Footnote</strong>
+    <span>Additional context</span>
+  </a>
+  <a href="#mermaid-diagrams" className="feature-card">
+    <strong>Mermaid</strong>
+    <span>Diagrams & flowcharts</span>
+  </a>
+  <a href="#separator" className="feature-card">
+    <strong>Separator</strong>
+    <span>Visual breaks</span>
+  </a>
+  <a href="#table" className="feature-card">
+    <strong>Table</strong>
+    <span>Data presentation</span>
+  </a>
+  <a href="#audio" className="feature-card">
+    <strong>Audio</strong>
+    <span>Sound embeds</span>
+  </a>
 </div>
 
 ### Math
@@ -32,6 +69,18 @@ $$
 \mathrm{Attention}(Q,K,V)=\mathrm{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right) V
 $$
 
+Aligned math equations are also supported. You can add IDs to equations using `\htmlId{my_id}` and then reference them with links like [this equation](#trajectory_definition).
+
+```math
+\htmlId{trajectory_definition}{\begin{align}
+    \log p_\theta(\mathcal D) &= \log \sum_{i=0}^N p_\theta ((o,a)_i) \\
+                              &= \log \sum_{i=0}^N \int_{\text{supp}({Z})} p_\theta((o,a)_i \vert z) p(z) \\
+                              &= \log \sum_{i=0}^N \int_{\text{supp}({Z})} \frac{q_\theta(z \vert (o,a)_i)}{q_\theta(z \vert (o,a)_i)} \cdot p_\theta((o,a)_i \vert z) p(z) \\
+                              &= \log \sum_{i=0}^N \mathbb E_{z \sim p_\theta(\bullet \vert (o,a)_i)} [\frac{p(z)}{q_\theta(z \vert (o,a)_i)} \cdot p_\theta((o,a)_i \vert z)], 
+\end{align}}
+```
+
+
 <Accordion title="Code example">
 ```mdx
 $x^2 + y^2 = z^2$
@@ -39,6 +88,16 @@ $x^2 + y^2 = z^2$
 $$
 \mathrm{Attention}(Q,K,V)=\mathrm{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right) V
 $$
+
+$$
+\htmlId{trajectory_definition}{\begin{align}
+    \log p_\theta(\mathcal D) &= \log \sum_{i=0}^N p_\theta ((o,a)_i) \\
+                              &= \log \sum_{i=0}^N \int_{\text{supp}({Z})} p_\theta((o,a)_i \vert z) p(z) \\
+                              &= \log \sum_{i=0}^N \int_{\text{supp}({Z})} \frac{q_\theta(z \vert (o,a)_i)}{q_\theta(z \vert (o,a)_i)} \cdot p_\theta((o,a)_i \vert z) p(z) \\
+                              &= \log \sum_{i=0}^N \mathbb E_{z \sim p_\theta(\bullet \vert (o,a)_i)} [\frac{p(z)}{q_\theta(z \vert (o,a)_i)} \cdot p_\theta((o,a)_i \vert z)], 
+\end{align}}
+$$
+
 ```
 </Accordion>
 

app/src/content/chapters/{vibe-coding-charts.mdx → demo/vibe-coding-charts.mdx}

@@ -1,6 +1,6 @@
-import HtmlEmbed from '../../components/HtmlEmbed.astro';
-import Note from '../../components/Note.astro';
-import TrackioWrapper from '../../components/TrackioWrapper.astro';
+import HtmlEmbed from '../../../components/HtmlEmbed.astro';
+import Note from '../../../components/Note.astro';
+import TrackioWrapper from '../../../components/TrackioWrapper.astro';
 
 ## Vibe coding charts
 
@@ -72,6 +72,6 @@ They can be found in the `app/src/content/embeds` folder and you can also use th
 ---
 <HtmlEmbed src="d3-scatter.html" title="d3-scatter: 2D projection by category" desc={`Figure 8: Dataset visualization via UMAP <br/> Credit: <a href="https://huggingface.co/spaces/HuggingFaceM4/FineVision" target="_blank">FineVision</a>`} frameless align="center" />
 
-### Trackio redesign experiment
-<TrackioWrapper />
+{/* ### Trackio redesign experiment
+<TrackioWrapper /> */}
 

app/src/content/chapters/{writing-your-content.mdx → demo/writing-your-content.mdx}

@@ -1,15 +1,15 @@
 {/* IMPORTS */}
 import { Image } from 'astro:assets';
-import placeholder from '../assets/image/placeholder.png';
-import Sidenote from '../../components/Sidenote.astro';
-import Wide from '../../components/Wide.astro';
-import Note from '../../components/Note.astro';
-import FullWidth from '../../components/FullWidth.astro';
-import HtmlEmbed from '../../components/HtmlEmbed.astro';
-import ColorPicker from '../../components/ColorPicker.astro';
-import Palettes from '../../components/Palettes.astro';
-import audioDemo from '../assets/audio/audio-example.wav';
-import Accordion from '../../components/Accordion.astro';
+import placeholder from '../../assets/image/placeholder.png';
+import Sidenote from '../../../components/Sidenote.astro';
+import Wide from '../../../components/Wide.astro';
+import Note from '../../../components/Note.astro';
+import FullWidth from '../../../components/FullWidth.astro';
+import HtmlEmbed from '../../../components/HtmlEmbed.astro';
+import ColorPicker from '../../../components/ColorPicker.astro';
+import Palettes from '../../../components/Palettes.astro';
+import audioDemo from '../../assets/audio/audio-example.wav';
+import Accordion from '../../../components/Accordion.astro';
 
 ## Writing your content
 
@@ -86,14 +86,15 @@ Your story. Write your content here.
 
 <small className="muted">**Content** in app/src/content/article.mdx</small>
 ```mdx
-import placeholder from '../assets/image/placeholder.png'
-import ResponsiveImage from '../components/ResponsiveImage.astro'
-import Sidenote from '../components/Sidenote.astro'
+import placeholder from '../../assets/image/placeholder.png'
+import ResponsiveImage from '../../../components/ResponsiveImage.astro'
+import Sidenote from '../../../components/Sidenote.astro'
+
+This paragraph is written in Markdown.
 
 <Sidenote>
-  This paragraph is written in Markdown. 
-  <Fragment slot="aside">A short callout inserted via a component.</Fragment>
-  </Sidenote>
+  A short callout inserted via a component.
+</Sidenote>
 <ResponsiveImage src={placeholder} alt="Sample image with optimization" />
 
 This paragraph is also written in Markdown. 
@@ -131,13 +132,12 @@ Use the **color picker** below to see how the primary color affects the theme.
 
 #### Brand color
 
+<ColorPicker />
+
 <Sidenote>
-  <ColorPicker />
-  <Fragment slot="aside">
-    You can use the color picker to select the right color.
-    
-    Here is an example of an <a href="#">interactive element</a>.
-  </Fragment>
+  You can use the color picker to select the right color.
+  
+  Here is an example of an <a href="#">interactive element</a>.
 </Sidenote>
 
 

app/src/pages/index.astro

@@ -1,48 +1,57 @@
 ---
-import * as ArticleMod from '../content/article.mdx';
+import * as ArticleMod from "../content/article.mdx";
 
-import Hero from '../components/Hero.astro';
-import Footer from '../components/Footer.astro';
-import ThemeToggle from '../components/ThemeToggle.astro';
-import Seo from '../components/Seo.astro';
-import TableOfContents from '../components/TableOfContents.astro';
+import Hero from "../components/Hero.astro";
+import Footer from "../components/Footer.astro";
+import ThemeToggle from "../components/ThemeToggle.astro";
+import Seo from "../components/Seo.astro";
+import TableOfContents from "../components/TableOfContents.astro";
 // Default OG image served from public/
-const ogDefaultUrl = '/thumb.auto.jpg';
-import 'katex/dist/katex.min.css';
-import '../styles/global.css';
+const ogDefaultUrl = "/thumb.auto.jpg";
+import "katex/dist/katex.min.css";
+import "../styles/global.css";
 const articleFM = (ArticleMod as any).frontmatter ?? {};
 const Article = (ArticleMod as any).default;
-const docTitle = articleFM?.title ?? 'Untitled article';
+const docTitle = articleFM?.title ?? "Untitled article";
 // Allow explicit line breaks in the title via "\n" or YAML newlines
-const docTitleHtml = (articleFM?.title ?? 'Untitled article')
-  .replace(/\\n/g, '<br/>')
-  .replace(/\n/g, '<br/>');
-const subtitle = articleFM?.subtitle ?? '';
-const description = articleFM?.description ?? '';
+const docTitleHtml = (articleFM?.title ?? "Untitled article")
+  .replace(/\\n/g, "<br/>")
+  .replace(/\n/g, "<br/>");
+const subtitle = articleFM?.subtitle ?? "";
+const description = articleFM?.description ?? "";
 // Accept authors as string[] or array of objects { name, url, affiliations? }
 const rawAuthors = (articleFM as any)?.authors ?? [];
 type Affiliation = { id: number; name: string; url?: string };
 type Author = { name: string; url?: string; affiliationIndices?: number[] };
 
 // Normalize affiliations from frontmatter: supports strings or objects { id?, name, url? }
-const rawAffils = (articleFM as any)?.affiliations ?? (articleFM as any)?.affiliation ?? [];
+const rawAffils =
+  (articleFM as any)?.affiliations ?? (articleFM as any)?.affiliation ?? [];
 const normalizedAffiliations: Affiliation[] = (() => {
   const seen: Map<string, number> = new Map();
   const list: Affiliation[] = [];
   const pushUnique = (name: string, url?: string) => {
-    const key = `${String(name).trim()}|${url ? String(url).trim() : ''}`;
+    const key = `${String(name).trim()}|${url ? String(url).trim() : ""}`;
     if (seen.has(key)) return seen.get(key)!;
     const id = list.length + 1;
-    list.push({ id, name: String(name).trim(), url: url ? String(url) : undefined });
+    list.push({
+      id,
+      name: String(name).trim(),
+      url: url ? String(url) : undefined,
+    });
     seen.set(key, id);
     return id;
   };
-  const input = Array.isArray(rawAffils) ? rawAffils : (rawAffils ? [rawAffils] : []);
+  const input = Array.isArray(rawAffils)
+    ? rawAffils
+    : rawAffils
+      ? [rawAffils]
+      : [];
   for (const a of input) {
-    if (typeof a === 'string') {
+    if (typeof a === "string") {
       pushUnique(a);
-    } else if (a && typeof a === 'object') {
-      const name = a.name ?? a.label ?? a.text ?? a.affiliation ?? '';
+    } else if (a && typeof a === "object") {
+      const name = a.name ?? a.label ?? a.text ?? a.affiliation ?? "";
       if (!String(name).trim()) continue;
       const url = a.url || a.link;
       // Respect provided numeric id for display stability if present and sequential; otherwise reassign
@@ -55,53 +64,69 @@ const normalizedAffiliations: Affiliation[] = (() => {
 // Helper: ensure an affiliation exists and return its id
 const ensureAffiliation = (val: any): number | undefined => {
   if (val == null) return undefined;
-  if (typeof val === 'number' && Number.isFinite(val) && val > 0) {
+  if (typeof val === "number" && Number.isFinite(val) && val > 0) {
     return Math.floor(val);
   }
-  const name = typeof val === 'string' ? val : (val?.name ?? val?.label ?? val?.text ?? val?.affiliation);
+  const name =
+    typeof val === "string"
+      ? val
+      : (val?.name ?? val?.label ?? val?.text ?? val?.affiliation);
   if (!name || !String(name).trim()) return undefined;
-  const existing = normalizedAffiliations.find(a => a.name === String(name).trim());
+  const existing = normalizedAffiliations.find(
+    (a) => a.name === String(name).trim(),
+  );
   if (existing) return existing.id;
   const id = normalizedAffiliations.length + 1;
-  normalizedAffiliations.push({ id, name: String(name).trim(), url: val?.url || val?.link });
+  normalizedAffiliations.push({
+    id,
+    name: String(name).trim(),
+    url: val?.url || val?.link,
+  });
   return id;
 };
 
 // Normalize authors and map affiliations -> indices (Distill-like)
-const normalizedAuthors: Author[] = (Array.isArray(rawAuthors) ? rawAuthors : [])
+const normalizedAuthors: Author[] = (
+  Array.isArray(rawAuthors) ? rawAuthors : []
+)
   .map((a: any) => {
-    if (typeof a === 'string') {
+    if (typeof a === "string") {
       return { name: a } as Author;
     }
-    const name = String(a?.name || '').trim();
+    const name = String(a?.name || "").trim();
     const url = a?.url || a?.link;
     let indices: number[] | undefined = undefined;
     const raw = a?.affiliations ?? a?.affiliation ?? a?.affils;
     if (raw != null) {
       const entries = Array.isArray(raw) ? raw : [raw];
-      const ids = entries.map(ensureAffiliation).filter((x): x is number => typeof x === 'number');
+      const ids = entries
+        .map(ensureAffiliation)
+        .filter((x): x is number => typeof x === "number");
       const unique = Array.from(new Set(ids)).sort((x, y) => x - y);
       if (unique.length) indices = unique;
     }
     return { name, url, affiliationIndices: indices } as Author;
   })
   .filter((a: Author) => a.name && a.name.trim().length > 0);
-const authorNames: string[] = normalizedAuthors.map(a => a.name);
+const authorNames: string[] = normalizedAuthors.map((a) => a.name);
 const published = articleFM?.published ?? undefined;
 const tags = articleFM?.tags ?? [];
 // Prefer seoThumbImage from frontmatter if provided
 const fmOg = articleFM?.seoThumbImage as string | undefined;
-const imageAbs: string = fmOg && fmOg.startsWith('http')
-  ? fmOg
-  : (Astro.site ? new URL((fmOg ?? ogDefaultUrl), Astro.site).toString() : (fmOg ?? ogDefaultUrl));
+const imageAbs: string =
+  fmOg && fmOg.startsWith("http")
+    ? fmOg
+    : Astro.site
+      ? new URL(fmOg ?? ogDefaultUrl, Astro.site).toString()
+      : (fmOg ?? ogDefaultUrl);
 
 // ---- Build citation text & BibTeX from frontmatter ----
-const stripHtml = (text: string) => String(text || '').replace(/<[^>]*>/g, '');
-const rawTitle = articleFM?.title ?? 'Untitled article';
+const stripHtml = (text: string) => String(text || "").replace(/<[^>]*>/g, "");
+const rawTitle = articleFM?.title ?? "Untitled article";
 const titleFlat = stripHtml(String(rawTitle))
-  .replace(/\\n/g, ' ')
-  .replace(/\n/g, ' ')
-  .replace(/\s+/g, ' ')
+  .replace(/\\n/g, " ")
+  .replace(/\n/g, " ")
+  .replace(/\s+/g, " ")
   .trim();
 const extractYear = (val: string | undefined): number | undefined => {
   if (!val) return undefined;
@@ -112,105 +137,212 @@ const extractYear = (val: string | undefined): number | undefined => {
 };
 
 const year = extractYear(published);
-const citationAuthorsText = authorNames.join(', ');
-const citationText = `${citationAuthorsText}${year ? ` (${year})` : ''}. "${titleFlat}".`;
-
-const authorsBib = authorNames.join(' and ');
-const keyAuthor = (authorNames[0] || 'article').split(/\s+/).slice(-1)[0].toLowerCase();
-const keyTitle = titleFlat.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '').slice(0, 24);
-const bibKey = `${keyAuthor}${year ?? ''}_${keyTitle}`;
-const doi = (ArticleMod as any)?.frontmatter?.doi ? String((ArticleMod as any).frontmatter.doi) : undefined;
-const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBib}},\n  ${year ? `year={${year}},\n  ` : ''}${doi ? `doi={${doi}}` : ''}\n}`;
+const citationAuthorsText = authorNames.join(", ");
+const citationText = `${citationAuthorsText}${year ? ` (${year})` : ""}. "${titleFlat}".`;
+
+const authorsBib = authorNames.join(" and ");
+const keyAuthor = (authorNames[0] || "article")
+  .split(/\s+/)
+  .slice(-1)[0]
+  .toLowerCase();
+const keyTitle = titleFlat
+  .toLowerCase()
+  .replace(/[^a-z0-9]+/g, "_")
+  .replace(/^_|_$/g, "")
+  .slice(0, 24);
+const bibKey = `${keyAuthor}${year ?? ""}_${keyTitle}`;
+const doi = (ArticleMod as any)?.frontmatter?.doi
+  ? String((ArticleMod as any).frontmatter.doi)
+  : undefined;
+const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBib}},\n  ${year ? `year={${year}},\n  ` : ""}${doi ? `doi={${doi}}` : ""}\n}`;
 const envCollapse = false;
 const tableOfContentAutoCollapse = Boolean(
-  (articleFM as any)?.tableOfContentAutoCollapse ?? (articleFM as any)?.tableOfContentsAutoCollapse ?? envCollapse
+  (articleFM as any)?.tableOfContentAutoCollapse ??
+    (articleFM as any)?.tableOfContentsAutoCollapse ??
+    envCollapse,
 );
 // Licence note (HTML allowed)
-const licence = (articleFM as any)?.licence ?? (articleFM as any)?.license ?? (articleFM as any)?.licenseNote;
+const licence =
+  (articleFM as any)?.licence ??
+  (articleFM as any)?.license ??
+  (articleFM as any)?.licenseNote;
 ---
-<html lang="en" data-theme="light" data-toc-auto-collapse={tableOfContentAutoCollapse ? '1' : '0'}>
+
+<html
+  lang="en"
+  data-theme="light"
+  data-toc-auto-collapse={tableOfContentAutoCollapse ? "1" : "0"}
+>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <Seo title={docTitle} description={description} authors={authorNames} published={published} tags={tags} image={imageAbs} />
+    <Seo
+      title={docTitle}
+      description={description}
+      authors={authorNames}
+      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);
+          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 type="module" src="/scripts/color-palettes.js"></script>
-    
+
     <!-- TO MANAGE PROPERLY -->
-    <script src="https://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script>
+    <script src="https://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"
+    ></script>
     <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist/medium-zoom.min.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist/medium-zoom.min.js"
+    ></script>
+    <script>
+      // Debug et initialisation globale du zoom
+      console.log("Global script: Starting zoom initialization");
+
+      function initializeZoom() {
+        console.log("Global script: Looking for zoomable images");
+        const zoomableImages = document.querySelectorAll(
+          'img[data-zoomable="1"]',
+        );
+        console.log("Global script: Found images:", zoomableImages.length);
+
+        if (window.mediumZoom && zoomableImages.length > 0) {
+          zoomableImages.forEach((img, index) => {
+            console.log(`Global script: Processing image ${index}:`, img);
+
+            // Vérifier si déjà initialisé
+            if (!img.classList.contains("medium-zoom-image")) {
+              try {
+                const instance = window.mediumZoom(img, {
+                  background: "rgba(0,0,0,.85)",
+                  margin: 24,
+                  scrollOffset: 0,
+                });
+                console.log(
+                  `Global script: Zoom initialized for image ${index}:`,
+                  instance,
+                );
+              } catch (error) {
+                console.error(
+                  `Global script: Error initializing zoom for image ${index}:`,
+                  error,
+                );
+              }
+            } else {
+              console.log(`Global script: Image ${index} already has zoom`);
+            }
+          });
+        } else {
+          console.log(
+            "Global script: mediumZoom not available or no images found",
+          );
+        }
+      }
+
+      // Essayer d'initialiser immédiatement
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", initializeZoom);
+      } else {
+        initializeZoom();
+      }
 
+      // Aussi essayer après le chargement complet
+      window.addEventListener("load", () => {
+        setTimeout(initializeZoom, 100);
+      });
+    </script>
   </head>
   <body>
     <ThemeToggle />
-    <Hero title={docTitleHtml} titleRaw={docTitle} description={subtitle} authors={normalizedAuthors as any} affiliations={normalizedAffiliations as any} affiliation={articleFM?.affiliation} published={articleFM?.published} doi={doi} />
+    <Hero
+      title={docTitleHtml}
+      titleRaw={docTitle}
+      description={subtitle}
+      authors={normalizedAuthors as any}
+      affiliations={normalizedAffiliations as any}
+      affiliation={articleFM?.affiliation}
+      published={articleFM?.published}
+      doi={doi}
+    />
 
     <section class="content-grid">
-      <TableOfContents tableOfContentAutoCollapse={tableOfContentAutoCollapse} />
+      <TableOfContents
+        tableOfContentAutoCollapse={tableOfContentAutoCollapse}
+      />
       <main>
         <Article />
       </main>
     </section>
 
-    <Footer citationText={citationText} bibtex={bibtex} licence={licence} doi={doi} />
-
+    <Footer
+      citationText={citationText}
+      bibtex={bibtex}
+      licence={licence}
+      doi={doi}
+    />
 
     <script>
       // Open external links in a new tab; keep internal anchors in-page
       const setExternalTargets = () => {
         const isExternal = (href) => {
-          try { const u = new URL(href, location.href); return u.origin !== location.origin; } catch { return false; }
+          try {
+            const u = new URL(href, location.href);
+            return u.origin !== location.origin;
+          } catch {
+            return false;
+          }
         };
-        document.querySelectorAll('a[href]').forEach(a => {
-          const href = a.getAttribute('href');
+        document.querySelectorAll("a[href]").forEach((a) => {
+          const href = a.getAttribute("href");
           if (!href) return;
           if (isExternal(href)) {
-            a.setAttribute('target', '_blank');
-            a.setAttribute('rel', 'noopener noreferrer');
+            a.setAttribute("target", "_blank");
+            a.setAttribute("rel", "noopener noreferrer");
           } else {
-            a.removeAttribute('target');
+            a.removeAttribute("target");
           }
         });
       };
-      if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', setExternalTargets, { once: true });
-      } else { setExternalTargets(); }
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", setExternalTargets, {
+          once: true,
+        });
+      } else {
+        setExternalTargets();
+      }
     </script>
 
     <script>
       // Delegate copy clicks for code blocks injected by rehypeCodeCopy
-      document.addEventListener('click', async (e) => {
+      document.addEventListener("click", async (e) => {
         const target = e.target instanceof Element ? e.target : null;
-        const btn = target ? target.closest('.code-copy') : null;
+        const btn = target ? target.closest(".code-copy") : null;
         if (!btn) return;
-        const card = btn.closest('.code-card');
-        const pre = card && card.querySelector('pre');
+        const card = btn.closest(".code-card");
+        const pre = card && card.querySelector("pre");
         if (!pre) return;
-        const text = pre.textContent || '';
+        const text = pre.textContent || "";
         try {
           await navigator.clipboard.writeText(text.trim());
           const old = btn.innerHTML;
-          btn.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"/></svg>';
+          btn.innerHTML =
+            '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"/></svg>';
           setTimeout(() => (btn.innerHTML = old), 1200);
         } catch {
-          btn.textContent = 'Error';
-          setTimeout(() => (btn.textContent = 'Copy'), 1200);
+          btn.textContent = "Error";
+          setTimeout(() => (btn.textContent = "Copy"), 1200);
         }
       });
     </script>
-
-    
   </body>
 </html>
-
-

app/src/styles/_base.css

@@ -1,9 +1,17 @@
 @import "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200..900;1,200..900&display=swap";
 
-html { font-size: 16px; line-height: 1.6; }
+html {
+  font-size: 16px;
+  line-height: 1.6;
+}
 
-.content-grid main { color: var(--text-color); }
-.content-grid main p { margin: 0 0 var(--spacing-3); }
+.content-grid main {
+  color: var(--text-color);
+}
+
+.content-grid main p {
+  margin: 0 0 var(--spacing-3);
+}
 
 .content-grid main h2 {
   font-weight: 600;
@@ -29,25 +37,54 @@ html { font-size: 16px; line-height: 1.6; }
   margin: var(--spacing-8) 0 var(--spacing-4);
 }
 
-.content-grid main a { color: var(--primary-color); text-decoration: none; border-bottom: 1px solid var(--link-underline); }
-.content-grid main a:hover { color: var(--primary-color-hover); border-bottom: 1px solid var(--link-underline-hover); }
+.content-grid main a {
+  color: var(--primary-color);
+  text-decoration: none;
+  background: var(--sufrace-bg);
+  border-bottom: 1px solid color-mix(in srgb, var(--primary-color, #007AFF) 40%, transparent);
+  ;
+}
+
+.content-grid main a:hover {
+  color: var(--primary-color-hover);
+  border-bottom: 1px solid color-mix(in srgb, var(--primary-color, #007AFF) 40%, transparent);
+  ;
+}
 
 /* Do not underline heading links inside the article (not the TOC) */
 .content-grid main h2 a,
 .content-grid main h3 a,
 .content-grid main h4 a,
 .content-grid main h5 a,
-.content-grid main h6 a { color: inherit; border-bottom: none; text-decoration: none; }
+.content-grid main h6 a {
+  color: inherit;
+  border-bottom: none;
+  text-decoration: none;
+}
+
 .content-grid main h2 a:hover,
 .content-grid main h3 a:hover,
 .content-grid main h4 a:hover,
 .content-grid main h5 a:hover,
-.content-grid main h6 a:hover { color: inherit; border-bottom: none; text-decoration: none; }
+.content-grid main h6 a:hover {
+  color: inherit;
+  border-bottom: none;
+  text-decoration: none;
+}
 
 .content-grid main ul,
-.content-grid main ol { padding-left: 24px; margin: 0 0 var(--spacing-3); }
-.content-grid main li { margin-bottom: var(--spacing-2); }
-.content-grid main li:last-child { margin-bottom: 0; }
+.content-grid main ol {
+  padding-left: 24px;
+  margin: 0 0 var(--spacing-3);
+}
+
+.content-grid main li {
+  margin-bottom: var(--spacing-2);
+}
+
+.content-grid main li:last-child {
+  margin-bottom: 0;
+}
 
 .content-grid main blockquote {
   border-left: 2px solid var(--border-color);
@@ -57,7 +94,11 @@ html { font-size: 16px; line-height: 1.6; }
   margin: var(--spacing-4) 0;
 }
 
-.content-grid main hr { border: none; border-bottom: 1px solid var(--border-color); margin: var(--spacing-5) 0; }
+.content-grid main hr {
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  margin: var(--spacing-5) 0;
+}
 
 .muted {
   color: var(--muted-color);
@@ -65,4 +106,62 @@ html { font-size: 16px; line-height: 1.6; }
 
 [data-footnote-ref] {
   margin-left: 4px;
+}
+
+.content-grid main mark {
+  background-color: color-mix(in srgb, var(--primary-color, #007AFF) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
+  color: inherit;
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+  margin: 46px 0;
+}
+
+.feature-card {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
+  ;
+  background: color-mix(in srgb, var(--primary-color, #007AFF) 05%, transparent) !important;
+  border-radius: 8px;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.feature-card strong {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-color);
+  color: var(--primary-color) !important;
+  margin-bottom: 0px !important;
+}
+
+.feature-card span {
+  font-size: 12px;
+  color: var(--muted-color);
+  color: var(--primary-color) !important;
+  margin-bottom: 0px !important;
+  opacity: 1;
+}
+
+.katex .tag {
+  background: none;
+  border: none;
+  opacity: 0.4;
 }

app/src/styles/_variables.css

@@ -8,7 +8,7 @@
   --neutral-300: rgb(228, 228, 228);
   --neutral-200: rgb(245, 245, 245);
 
-  --default-font-family: Source Sans Pro,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+  --default-font-family: Source Sans Pro, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
   /* Brand (OKLCH base + derived states) */
   --primary-base: oklch(0.75 0.12 340);
@@ -19,10 +19,10 @@
 
   /* Text & Surfaces */
   --page-bg: #ffffff;
-  --text-color: rgba(0,0,0,.85);
-  --transparent-page-contrast: rgba(255,255,255,.85);
-  --muted-color: rgba(0,0,0,.6);
-  --border-color: rgba(0,0,0,.1);
+  --text-color: rgba(0, 0, 0, .85);
+  --transparent-page-contrast: rgba(255, 255, 255, .85);
+  --muted-color: rgba(0, 0, 0, .6);
+  --border-color: rgba(0, 0, 0, .1);
   --surface-bg: #fafafa;
   --code-bg: #f6f8fa;
 
@@ -52,8 +52,10 @@
   @custom-media --bp-content-collapse (max-width: 1100px);
 
   /* Layout */
-  --content-padding-x: 16px; /* default page gutter */
-  --block-spacing-y: var(--spacing-4); /* default vertical spacing between block components */
+  --content-padding-x: 16px;
+  /* default page gutter */
+  --block-spacing-y: var(--spacing-4);
+  /* default vertical spacing between block components */
 
   /* Config */
   --palette-count: 8;
@@ -86,7 +88,7 @@
   /* Charts (global) */
   --axis-color: var(--muted-color);
   --tick-color: var(--text-color);
-  --grid-color: rgba(0,0,0,.08);
+  --grid-color: rgba(0, 0, 0, .08);
 }
 
 /* ============================================================================ */
@@ -94,17 +96,17 @@
 /* ============================================================================ */
 [data-theme="dark"] {
   --page-bg: #0f1115;
-  --text-color: rgba(255,255,255,.9);
-  --muted-color: rgba(255,255,255,.7);
-  --border-color: rgba(255,255,255,.15);
+  --text-color: rgba(255, 255, 255, .9);
+  --muted-color: rgba(255, 255, 255, .7);
+  --border-color: rgba(255, 255, 255, .15);
   --surface-bg: #12151b;
   --code-bg: #12151b;
-  --transparent-page-contrast: rgba(0,0,0,.85);
-  
+  --transparent-page-contrast: rgba(0, 0, 0, .85);
+
   /* Charts (global) */
   --axis-color: var(--muted-color);
   --tick-color: var(--muted-color);
-  --grid-color: rgba(255,255,255,.10);
+  --grid-color: rgba(255, 255, 255, .10);
 
   /* Primary (lower L in dark) */
   --primary-color: oklch(from var(--primary-base) calc(l - 0.08) c h);