diff --git a/src/ContentMedia.tsx b/src/ContentMedia.tsx
new file mode 100644
index 000000000..1be45dd22
--- /dev/null
+++ b/src/ContentMedia.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import React, { memo, forwardRef, type CSSProperties, type ReactNode } from "react";
+import { symToStr } from "tsafe/symToStr";
+import { fr } from "./fr";
+import { cx } from "./tools/cx";
+import { getLink, type RegisteredLinkProps } from "./link";
+import { useAnalyticsId } from "./tools/useAnalyticsId";
+
+export type ContentMediaProps = {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    classes?: Partial<Record<"root" | "img" | "caption", string>>;
+    /**
+     * aria-label for the `<figure>` element.
+     * Defaults to the `caption` prop when it is a plain string.
+     * Required for image and SVG media types when caption is not a string.
+     */
+    label?: string;
+    /** Caption text shown below the media (description / source). */
+    caption?: ReactNode;
+    /**
+     * Label and props of the optional link inside the figcaption.
+     * Both properties are required together so the link always has an accessible
+     * name (RGAA 6.1 / WCAG 2.4.4 – Link Purpose).
+     */
+    captionLink?: {
+        label: ReactNode;
+        linkProps: RegisteredLinkProps;
+    };
+    /**
+     * Size variant of the media container.
+     * - `"sm"` → `fr-content-media--sm`
+     * - `"lg"` → `fr-content-media--lg`
+     * - `"md"` (default) → no modifier class
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Aspect-ratio utility class applied to the image/SVG wrapper (`fr-ratio-*`).
+     * Only applies to `type="img"` and `type="svg"`.
+     * Example values: `"16x9"`, `"4x3"`, `"1x1"`, `"3x2"`, `"3x4"`, `"2x3"`.
+     */
+    ratio?: "16x9" | "3x2" | "4x3" | "1x1" | "3x4" | "2x3";
+} & ContentMediaProps.Media;
+export namespace ContentMediaProps {
+    /** Image (`<img>`) media. */
+    export type ImageMedia = {
+        type: "img";
+        /**
+         * Props forwarded to the `<img>` element.
+         * `src` and `alt` are required — `alt` can be an empty string when
+         * the image is purely decorative.
+         */
+        imgProps: React.ImgHTMLAttributes<HTMLImageElement> & {
+            src: string;
+            /** Empty string is allowed for decorative images. */
+            alt: string;
+        };
+    };
+    /** SVG media — pass your `<svg>` element as the `svg` prop. */
+    export type SvgMedia = {
+        type: "svg";
+        /**
+         * The `<svg>` element to render.
+         * • Decorative SVGs should carry `aria-hidden="true"`.
+         * • Meaningful SVGs should carry `role="img"` and an `aria-label`.
+         */
+        svg: ReactNode;
+    };
+    /** Embedded video via `<iframe>` (e.g. YouTube). */
+    export type IframeMedia = {
+        type: "iframe";
+        /**
+         * Props forwarded to the `<iframe>` element.
+         * `src` and `title` are required — `title` is the video's text alternative.
+         */
+        iframeProps: React.IframeHTMLAttributes<HTMLIFrameElement> & {
+            src: string;
+            /** Text alternative / accessibility title of the embedded video. */
+            title: string;
+        };
+    };
+    /** Native HTML5 `<video>`. */
+    export type VideoMedia = {
+        type: "video";
+        /**
+         * Text alternative for users who cannot view the video.
+         * Displayed inside a `<p>` within the `<video>` element.
+         */
+        alternative?: string;
+        /** Props forwarded to the `<video>` element. `controls` is always set. */
+        videoProps: React.VideoHTMLAttributes<HTMLVideoElement> & { src: string };
+    };
+    /** Native HTML5 `<audio>`. */
+    export type AudioMedia = {
+        type: "audio";
+        /**
+         * Text alternative for users who cannot hear the audio.
+         * Displayed inside a `<p>` within the `<audio>` element.
+         */
+        alternative?: string;
+        /** Props forwarded to the `<audio>` element. `controls` is always set. */
+        audioProps: React.AudioHTMLAttributes<HTMLAudioElement> & { src: string };
+    };
+    export type Media = ImageMedia | SvgMedia | IframeMedia | VideoMedia | AudioMedia;
+}
+/** @see <https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/contenu-medias> */
+export const ContentMedia = memo(
+    forwardRef<HTMLElement, ContentMediaProps>((props, ref) => {
+        const {
+            id: id_props,
+            className,
+            style,
+            classes = {},
+            label,
+            caption,
+            captionLink,
+            size,
+            ratio
+        } = props;
+        const id = useAnalyticsId({
+            "defaultIdPrefix": "fr-content-media",
+            "explicitlyProvidedId": id_props
+        });
+        const { Link } = getLink();
+        const ariaLabel = label ?? (typeof caption === "string" ? caption : undefined);
+        const imgWrapperClassName = cx(
+            fr.cx("fr-content-media__img"),
+            ratio !== undefined ? (`fr-ratio-${ratio}` as string) : undefined,
+            classes.img
+        );
+        const renderMedia = () => {
+            switch (props.type) {
+                case "img":
+                    return (
+                        <div className={imgWrapperClassName}>
+                            <img
+                                {...props.imgProps}
+                                className={cx(fr.cx("fr-responsive-img"), props.imgProps.className)}
+                            />
+                        </div>
+                    );
+                case "svg":
+                    // The DSFR reference implementation wraps SVGs in fr-content-media__img
+                    // (example/component/content/index.html). The wrapper provides width:100%
+                    // and serves as an anchor for the fr-ratio-* size utilities.
+                    return <div className={imgWrapperClassName}>{props.svg}</div>;
+                case "iframe":
+                    return (
+                        <iframe
+                            {...props.iframeProps}
+                            className={cx(fr.cx("fr-responsive-vid"), props.iframeProps.className)}
+                        />
+                    );
+                case "video":
+                    return (
+                        <video
+                            {...props.videoProps}
+                            controls
+                            className={cx(fr.cx("fr-responsive-vid"), props.videoProps.className)}
+                        >
+                            {props.alternative !== undefined && <p>{props.alternative}</p>}
+                        </video>
+                    );
+                case "audio":
+                    return (
+                        <audio
+                            {...props.audioProps}
+                            controls
+                            className={cx(fr.cx("fr-responsive-vid"), props.audioProps.className)}
+                        >
+                            {props.alternative !== undefined && <p>{props.alternative}</p>}
+                        </audio>
+                    );
+            }
+        };
+        const hasCaption = caption !== undefined || captionLink !== undefined;
+        return (
+            <figure
+                id={id}
+                role="group"
+                className={cx(
+                    fr.cx("fr-content-media"),
+                    size !== undefined && size !== "md"
+                        ? (`fr-content-media--${size}` as string)
+                        : undefined,
+                    classes.root,
+                    className
+                )}
+                style={style}
+                {...(ariaLabel !== undefined ? { "aria-label": ariaLabel } : {})}
+                ref={ref}
+            >
+                {renderMedia()}
+                {hasCaption && (
+                    <figcaption className={cx(fr.cx("fr-content-media__caption"), classes.caption)}>
+                        {caption}
+                        {captionLink !== undefined && (
+                            <Link {...captionLink.linkProps} className={fr.cx("fr-link")}>
+                                {captionLink.label}
+                            </Link>
+                        )}
+                    </figcaption>
+                )}
+            </figure>
+        );
+    })
+);
+ContentMedia.displayName = symToStr({ ContentMedia });
+export default ContentMedia;
diff --git a/src/bin/only-include-css-of-used-components.ts b/src/bin/only-include-css-of-used-components.ts
index 00773b1a4..3484d103d 100644
--- a/src/bin/only-include-css-of-used-components.ts
+++ b/src/bin/only-include-css-of-used-components.ts
@@ -134,6 +134,8 @@ export const REACT_DSFR_MODULE_TO_DSFR_COMPONENTS: Record<string, DsfrComponentN
     // The Chart components pull their CSS from the @gouvfr/dsfr-chart peer dependency.
     "Chart": [],
     "Checkbox": ["checkbox", "radio", "form"],
+    // The caption renders an fr-link.
+    "ContentMedia": ["content", "link"],
     "Display": ["modal", "radio", "form", "button", "link"],
     "Download": ["download", "link"],
     "Follow": ["follow", "form", "input", "upload", "button", "link", "alert", "checkbox"],
diff --git a/stories/ContentMedia.stories.tsx b/stories/ContentMedia.stories.tsx
new file mode 100644
index 000000000..a8f6890ab
--- /dev/null
+++ b/stories/ContentMedia.stories.tsx
@@ -0,0 +1,209 @@
+import { ContentMedia, type ContentMediaProps } from "../dist/ContentMedia";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { ContentMedia },
+    "description": `
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/contenu-medias)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/ContentMedia.tsx)
+Supports **image**, **SVG**, **iframe**, **video** and **audio** media types via the \`type\` discriminator prop.
+
+\`\`\`tsx
+import { ContentMedia } from "@codegouvfr/react-dsfr/ContentMedia";
+
+// Image
+<ContentMedia
+    type="img"
+    label="Description / Source"
+    imgProps={{ src: "image.png", alt: "Description de l'image" }}
+    caption="Description / Source"
+    captionLink={{
+        label: "Libellé lien",
+        linkProps: {
+            href: "https://www.systeme-de-design.gouv.fr",
+            target: "_blank",
+            rel: "noopener noreferrer"
+        }
+    }}
+/>
+// Iframe vidéo (YouTube, etc.)
+<ContentMedia
+    type="iframe"
+    iframeProps={{
+        src: "https://www.youtube.com/embed/HyirpmPL43I",
+        title: "Vidéo de présentation - voir transcription ci-dessous",
+        allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+        allowFullScreen: true
+    }}
+    caption="Description / Source"
+    captionLink={{
+        label: "Libellé lien",
+        linkProps: {
+            href: "https://www.youtube.com/watch?v=HyirpmPL43I",
+            target: "_blank",
+            rel: "noopener noreferrer"
+        }
+    }}
+/>
+\`\`\`
+`,
+    "argTypes": {
+        "type": {
+            "options": (() => {
+                const types = ["img", "svg", "iframe", "video", "audio"] as const;
+                assert<Equals<typeof types[number], ContentMediaProps.Media["type"]>>();
+                return types;
+            })(),
+            "control": { "type": "radio" }
+        },
+        "label": {
+            "description":
+                "`aria-label` of the `<figure>` element. Defaults to `caption` when it is a plain string."
+        },
+        "caption": {
+            "description": "Caption / source text shown in the `<figcaption>`."
+        },
+        "captionLink": {
+            "description":
+                "Label and props of the link inside the `<figcaption>`. Both are required together (RGAA 6.1).",
+            "control": { "type": null }
+        },
+        "size": {
+            "options": ["sm", "md", "lg"],
+            "control": { "type": "radio" },
+            "description": "Size variant of the media container (`fr-content-media--sm/lg`)."
+        },
+        "ratio": {
+            "options": ["16x9", "3x2", "4x3", "1x1", "3x4", "2x3", undefined],
+            "control": { "type": "select" },
+            "description": "Aspect ratio applied to the image/SVG wrapper (`fr-ratio-*`)."
+        }
+    },
+    "disabledProps": ["lang"]
+});
+export default meta;
+export const Image = getStory({
+    "type": "img",
+    "label": "Description / Source",
+    "imgProps": {
+        "src": "https://www.systeme-de-design.gouv.fr/v1.15/storybook/img/placeholder.16x9.png",
+        "alt": "Description de l'image (texte alternatif)"
+    },
+    "caption": "Description / Source",
+    "captionLink": {
+        "label": "Libellé lien",
+        "linkProps": {
+            "href": "https://www.systeme-de-design.gouv.fr",
+            "target": "_blank",
+            "rel": "noopener noreferrer"
+        }
+    }
+});
+export const ImageSmall = getStory(
+    {
+        "type": "img",
+        "size": "sm",
+        "label": "Image petite taille",
+        "imgProps": {
+            "src": "https://www.systeme-de-design.gouv.fr/v1.15/storybook/img/placeholder.16x9.png",
+            "alt": "Description de l'image"
+        },
+        "caption": "Description / Source — taille sm",
+        "captionLink": {
+            "label": "Libellé lien",
+            "linkProps": {
+                "href": "https://www.systeme-de-design.gouv.fr",
+                "target": "_blank",
+                "rel": "noopener noreferrer"
+            }
+        }
+    },
+    { "description": "Image avec variante de taille `sm` (`fr-content-media--sm`)." }
+);
+export const ImageWithRatio = getStory(
+    {
+        "type": "img",
+        "ratio": "1x1",
+        "label": "Image ratio carré",
+        "imgProps": {
+            "src": "https://www.systeme-de-design.gouv.fr/v1.15/storybook/img/placeholder.16x9.png",
+            "alt": "Description de l'image en ratio carré"
+        },
+        "caption": "Description / Source — ratio 1x1"
+    },
+    { "description": "Image avec ratio carré (`fr-ratio-1x1`) via la prop `ratio`." }
+);
+export const IframeVideo = getStory(
+    {
+        "type": "iframe",
+        "iframeProps": {
+            "src": "https://www.youtube.com/embed/HyirpmPL43I",
+            "title":
+                "Vidéo de présentation du Service National Universel - voir transcription ci-dessous",
+            "allow": "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+            "allowFullScreen": true
+        },
+        "caption": "Description / Source",
+        "captionLink": {
+            "label": "Libellé lien",
+            "linkProps": {
+                "href": "https://www.youtube.com/watch?v=HyirpmPL43I",
+                "target": "_blank",
+                "rel": "noopener noreferrer"
+            }
+        }
+    },
+    { "description": "Vidéo intégrée via `<iframe>` (ex : YouTube)." }
+);
+export const VideoNative = getStory(
+    {
+        "type": "video",
+        "alternative": "Alternative de la vidéo - voir transcription ci-dessous",
+        "videoProps": {
+            "src": "https://www.w3schools.com/html/mov_bbb.mp4"
+        },
+        "caption": "Description / Source",
+        "captionLink": {
+            "label": "Libellé lien",
+            "linkProps": {
+                "href": "https://www.w3schools.com/html/html5_video.asp",
+                "target": "_blank",
+                "rel": "noopener noreferrer"
+            }
+        }
+    },
+    { "description": "Vidéo native HTML5 avec `<video>`." }
+);
+export const AudioNative = getStory(
+    {
+        "type": "audio",
+        "alternative": "Alternative de l'audio - voir transcription ci-dessous",
+        "audioProps": {
+            "src": "https://www.w3schools.com/html/horse.mp3"
+        },
+        "caption": "Description / Source",
+        "captionLink": {
+            "label": "Libellé lien",
+            "linkProps": {
+                "href": "https://www.w3schools.com/html/html5_audio.asp",
+                "target": "_blank",
+                "rel": "noopener noreferrer"
+            }
+        }
+    },
+    { "description": "Fichier audio natif HTML5 avec `<audio>`." }
+);
+export const ImageWithoutCaption = getStory(
+    {
+        "type": "img",
+        "label": "Image illustrative",
+        "imgProps": {
+            "src": "https://www.systeme-de-design.gouv.fr/v1.15/storybook/img/placeholder.16x9.png",
+            "alt": ""
+        }
+    },
+    { "description": 'Image décorative (`alt=""`) sans légende.' }
+);
diff --git a/test/integration/vite/src/Home.tsx b/test/integration/vite/src/Home.tsx
index a74746c06..1fcf376cc 100644
--- a/test/integration/vite/src/Home.tsx
+++ b/test/integration/vite/src/Home.tsx
@@ -13,6 +13,7 @@ import { Table } from "@codegouvfr/react-dsfr/Table";
 import { Tile } from "@codegouvfr/react-dsfr/Tile";
 
 import { Accordion } from "@codegouvfr/react-dsfr/Accordion";
+import { ContentMedia } from "@codegouvfr/react-dsfr/ContentMedia";
 import { Book, Money, Police, Sun, LocationFrance } from '@codegouvfr/react-dsfr/picto';
 import CityHall from './assets/city-hall.svg';
 
@@ -84,6 +85,9 @@ export function Home() {
             <div className={fr.cx("fr-my-4w")}>
                 <HighlightExample />
             </div>
+            <div className={fr.cx("fr-my-4w")}>
+                <ContentMediaExamples />
+            </div>
         </>
     );
 }
@@ -264,4 +268,81 @@ function HighlightExample() {
             bodyAs="p"
         />
     )
-}
\ No newline at end of file
+}
+
+function ContentMediaExamples() {
+    return (
+        <>
+            <h2>ContentMedia — Image</h2>
+            <ContentMedia
+                type="img"
+                label="Exemple d'image responsive"
+                imgProps={{
+                    src: "https://www.w3schools.com/css/img_5terre.jpg",
+                    alt: "Paysage de Cinque Terre en Italie"
+                }}
+                caption="© W3Schools – Cinque Terre, Italie"
+                captionLink={{
+                    label: "Voir la source",
+                    linkProps: {
+                        href: "https://www.w3schools.com",
+                        target: "_blank",
+                        rel: "noopener noreferrer"
+                    }
+                }}
+            />
+
+            <h2 className={fr.cx("fr-mt-4w")}>ContentMedia — Iframe (YouTube)</h2>
+            <ContentMedia
+                type="iframe"
+                iframeProps={{
+                    src: "https://www.youtube.com/embed/HyirpmPL43I",
+                    title: "Vidéo de présentation du Service National Universel – voir transcription ci-dessous",
+                    allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+                    allowFullScreen: true
+                }}
+                caption="Service National Universel – présentation officielle"
+                captionLink={{
+                    label: "Voir sur YouTube",
+                    linkProps: {
+                        href: "https://www.youtube.com/watch?v=HyirpmPL43I",
+                        target: "_blank",
+                        rel: "noopener noreferrer"
+                    }
+                }}
+            />
+
+            <h2 className={fr.cx("fr-mt-4w")}>ContentMedia — Vidéo native</h2>
+            <ContentMedia
+                type="video"
+                alternative="Vidéo de démonstration Big Buck Bunny – voir transcription ci-dessous"
+                videoProps={{ src: "https://www.w3schools.com/html/mov_bbb.mp4" }}
+                caption="Big Buck Bunny – Blender Foundation"
+                captionLink={{
+                    label: "Voir la source",
+                    linkProps: {
+                        href: "https://www.w3schools.com/html/html5_video.asp",
+                        target: "_blank",
+                        rel: "noopener noreferrer"
+                    }
+                }}
+            />
+
+            <h2 className={fr.cx("fr-mt-4w")}>ContentMedia — Audio natif</h2>
+            <ContentMedia
+                type="audio"
+                alternative="Son d'un cheval – voir transcription ci-dessous"
+                audioProps={{ src: "https://www.w3schools.com/html/horse.mp3" }}
+                caption="Illustration sonore – W3Schools"
+                captionLink={{
+                    label: "Voir la source",
+                    linkProps: {
+                        href: "https://www.w3schools.com/html/html5_audio.asp",
+                        target: "_blank",
+                        rel: "noopener noreferrer"
+                    }
+                }}
+            />
+        </>
+    );
+}