DSFR v1.12.1

Retour

Contenu médias (content)

Les médias désignent vos contenus photos et vidéos. Lorsqu’ils sont intégré à une page de contenu, il est recommandé de suivre les règles décrites dans la documentation.

Documentation

Média image edito

[À MODIFIER - vide ou texte alternatif de l’image]
Description / Source Libellé lien

<figure role="group" class="fr-content-media" id="media-2253" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-ratio-16x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2254" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Média image edito, petite taille

[À MODIFIER - vide ou texte alternatif de l’image]
Description / Source Libellé lien

<figure role="group" class="fr-content-media fr-content-media--sm" id="media-2258" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-ratio-16x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2259" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Média image edito, grande taille

[À MODIFIER - vide ou texte alternatif de l’image]
Description / Source Libellé lien

<figure role="group" class="fr-content-media fr-content-media--lg" id="media-2263" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-ratio-16x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2264" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Média image edito ratio 32x9

[À MODIFIER - vide ou texte alternatif de l’image]
Description / Source Libellé lien

<figure role="group" class="fr-content-media" id="media-2268" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-ratio-32x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2269" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Média image edito ratio 16x9

[À MODIFIER - vide ou texte alternatif de l’image]
Description / Source Libellé lien

<figure role="group" class="fr-content-media" id="media-2273" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-ratio-16x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2274" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Média image edito ratio 3x2

[À MODIFIER - vide ou texte alternatif de l’image]
Description / Source Libellé lien

<figure role="group" class="fr-content-media" id="media-2278" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-ratio-3x2" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2279" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Média image edito ratio 4x3

[À MODIFIER - vide ou texte alternatif de l’image]
Description / Source Libellé lien

<figure role="group" class="fr-content-media" id="media-2283" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-ratio-4x3" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2284" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Média image edito ratio 1x1

[À MODIFIER - vide ou texte alternatif de l’image]
Description / Source Libellé lien

<figure role="group" class="fr-content-media" id="media-2288" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-ratio-1x1" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2289" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Média image edito ratio 3x4

[À MODIFIER - vide ou texte alternatif de l’image]
Description / Source Libellé lien

<figure role="group" class="fr-content-media" id="media-2293" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-ratio-3x4" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2294" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Média image edito ratio 2x3

[À MODIFIER - vide ou texte alternatif de l’image]
Description / Source Libellé lien

<figure role="group" class="fr-content-media" id="media-2298" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-ratio-2x3" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2299" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Média image en svg, porteur d’information

Description / Source Libellé lien

Titre de la transcription

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
    • list item niveau 2
  • list item

<figure role="group" class="fr-content-media" id="media-2307" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <!-- Les SVG porteurs de sens doivent avoir l'attribut role="img" et être labeliser par l'attribut aria-label="[A modifier - titre ou texte contenu dans l’image]" -->
        <svg version="1.1" role="img" aria-label=”Gouvernement” xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 895 455" xml:space="preserve">
            <style type="text/css">
                .st0 {
                    fill: #1F356C;
                }

                .st1 {
                    fill: #000091;
                }

                .st2 {
                    fill: #E1000F;
                }

                .st3 {
                    fill: #808080;
                }

            </style>
            <rect fill="#ffffff" width="895" height="455"></rect>
            <g>
                <g>
                    <g>
                        <path d="M61.4,206.5v-12.2H43v-13.3h33v30.7c-6.7,9-17.9,14.7-31.4,14.7c-23.4,0-39.4-17.5-39.4-38.1c0-20.6,15.6-38.1,38.4-38.1
				c13.1,0,23.8,5.9,30.4,14.6l-11.5,9c-4.1-5.9-10.6-9.9-18.9-9.9c-13.6,0-23.3,10.6-23.3,24.4s10.2,24.4,24.3,24.4
				C51.4,212.8,57.3,210.5,61.4,206.5z" />
                        <path d="M162.8,188.4c0,20.6-15.6,38.1-38.3,38.1c-22.8,0-38.4-17.5-38.4-38.1c0-20.6,15.6-38.1,38.4-38.1
				C147.3,150.3,162.8,167.8,162.8,188.4z M147.8,188.4c0-13.8-9.7-24.4-23.2-24.4c-13.6,0-23.3,10.6-23.3,24.4s9.7,24.4,23.3,24.4
				C138.1,212.8,147.8,202.2,147.8,188.4z" />
                        <path d="M218.7,152.3h14.6v43.9c0,19-11.1,30.3-29.3,30.3c-18,0-29.2-11.3-29.2-30.3v-43.9h14.6v45.2c0,9.7,5.5,15.4,14.6,15.4
				c9,0,14.5-5.7,14.5-15.4V152.3z" />
                        <path d="M258.1,152.3l21.3,56.4l21.3-56.4h15.6L289,224.5h-19.2l-27.3-72.2H258.1z" />
                        <path d="M327.6,152.3h42.1v12.5h-27.4v16.7h23.3V194h-23.3v18h27.4v12.5h-42.1V152.3z" />
                        <path d="M386.8,152.3h22.1c15.9,0,25.7,8.1,25.7,21.5c0,8.7-4.2,15.2-11.5,18.7l22.7,32h-17.5l-19.2-29.2h-7.5v29.2h-14.6V152.3z
				 M401.4,164.8v18h8.2c6.2,0,9.8-3.3,9.8-9.2c0-5.5-3.6-8.9-9.8-8.9H401.4z" />
                        <path d="M454.8,152.3h18.8l32.3,51.7v-51.7h14.6v72.2h-18.8l-32.3-51.9v51.9h-14.6V152.3z" />
                        <path d="M540.8,152.3h42.1v12.5h-27.4v16.7h23.3V194h-23.3v18h27.4v12.5h-42.1V152.3z" />
                        <path d="M600,152.3h18.5l17.4,29.7l17.4-29.7h18.5v72.2h-14.6v-51.3L641,199.7h-10.3l-16.1-26.6v51.3H600V152.3z" />
                        <path d="M692,152.3H734v12.5h-27.4v16.7h23.3V194h-23.3v18H734v12.5H692V152.3z" />
                        <path d="M751.1,152.3h18.8l32.3,51.7v-51.7h14.6v72.2H798l-32.3-51.9v51.9h-14.6V152.3z" />
                        <path d="M829.7,152.3h59.2v13.3h-22.3v58.9H852v-58.9h-22.3V152.3z" />
                    </g>
                </g>
                <g>
                    <path class="st0" d="M100.5,89.9C100.6,89.9,100.6,89.9,100.5,89.9c0.4-0.2,0.6-0.3,0.8-0.5c0,0-0.1,0-0.1,0
			C101,89.5,100.8,89.7,100.5,89.9" />
                    <path class="st0" d="M137.2,77.7l-0.2,0.2C137.1,77.9,137.2,77.8,137.2,77.7" />
                    <path class="st1" d="M125.6,90.5c1.1-1.1,2.2-2.2,3.2-3.4h0c2-2.3,4-4.4,6.3-6.4c0.7-0.6,1.4-1.2,2.1-1.6c0.2-0.2,0.2-0.6,0.4-0.8
			c-0.9,0.4-1.5,1.1-2.5,1.5c-0.2,0-0.4-0.2-0.2-0.4c0.7-0.5,1.4-1,2-1.5c0,0-0.1,0-0.1,0c-0.2,0-0.2-0.2-0.2-0.4
			c-2.5-0.4-4.3,1.3-6,2.8c-0.4,0.2-0.8-0.2-0.9-0.2c-2.8,0.9-4.9,3.4-7.7,4.5v-0.4c-1.1,0.4-2.2,1.1-3.4,1.3
			c-1.7,0.4-3.2,0.2-4.7,0.2c-2.3,0.2-4.6,0.7-6.9,1.2c-0.1,0-0.1,0-0.2,0.1c-1.2,0.3-2.4,0.8-3.5,1.4l-0.1,0.1
			c-0.1,0.1-0.2,0.2-0.3,0.3c-0.4,0.4-0.8,0.9-1.3,1.1c-1.2,0.6-2.1,1.6-3.1,2.5c-0.1,0.1-0.2,0.1-0.3,0.1c-1,1-2,2-3,2.9
			c-0.1,0.1-0.4,0.1-0.6,0.1c0,0,0,0,0,0c0-0.1,0.1-0.1,0.1-0.2c0.2-0.3,0.3-0.5,0.5-0.8c0.2-0.3,0.4-0.6,0.6-0.9
			c0.3-0.4,0.5-0.8,0.8-1.1c0.1-0.1,0.1-0.2,0-0.2c-0.1-0.1-0.2-0.1-0.3-0.1c0.9-0.9,2.1-1.7,3.2-2.4v0c-0.1,0-0.3-0.1-0.2-0.2
			c0.1-0.2,0.2-0.3,0.3-0.5c0-0.1,0-0.1,0.1-0.2c0-0.1-0.1-0.1-0.1-0.2c-0.3,0.2-0.6,0.4-0.9,0.6c-0.5,0.4-0.8,1.2-1.5,1.2
			c0,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.2-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1c0,0,0,0,0,0c0-0.1,0.1-0.1,0.1-0.2c0-0.1,0.1-0.1,0.1-0.2
			c0,0,0-0.1,0.1-0.1c0-0.1,0.1-0.2,0.1-0.2c0-0.1,0.1-0.1,0.1-0.2c0.1-0.1,0.2-0.3,0.2-0.4c0-0.1,0.1-0.1,0.1-0.2
			c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.2,0-0.3-0.1-0.3c0.3-0.5,0.8-0.8,1.3-1.1h-0.1c0.7-0.4,1.5-0.8,2.2-1.2c0.1-0.1,0.2-0.2,0.3-0.3
			c-1.1,0.4-2,0.9-3,1.5c0,0-0.2,0.1-0.3,0.2c0,0-0.2,0.1-0.5-0.2c0,0,0-0.1,0-0.1c0.2-0.4,0.8-0.6,1.1-0.9c0.2,0,0.4,0,0.4,0.2
			c6.1-4.7,14.4-3.6,21.4-6c0.6-0.4,1.1-0.8,1.7-1.1c0.9-0.4,1.7-1.3,2.8-1.9c1.5-1.1,2.6-2.5,3.2-4.3c0-0.2-0.2-0.4-0.2-0.4
			c-2.5,2.6-5.3,4.7-8.3,6.2c-4,2.1-8.3,1.7-12.5,2.3c0.2-0.4,0.6-0.4,0.9-0.4c0-0.6,0.4-0.8,0.8-1.1h0.6c0.2,0,0.2-0.4,0.4-0.4
			c0.4,0,1-0.2,0.8-0.2c-0.6-0.8-1.7,0.6-2.6,0c0.4-0.4,0.2-0.9,0.6-1.1h0.8c0-0.4,0.4-0.8,0.4-0.8c2.8-1.7,5.5-3,8.1-4.5
			c-0.6,0-0.9,0.6-1.5,0.2c0.4,0,0-0.6,0.4-0.6c2.1-0.6,3.8-1.7,5.9-2.5c-0.8,0-1.3,0.6-2.1,0c0.4-0.2,0.6-0.6,1.1-0.6v-0.6
			c0-0.2,0.2-0.2,0.4-0.2c-0.2,0-0.4-0.2-0.4-0.2c0.2-0.4,0.8-0.2,1.1-0.6c-0.2,0-0.6,0-0.6-0.2c0.6-0.8,1.5-0.9,2.5-1.1
			c-0.2-0.4-0.8,0-0.8-0.4c0-0.2,0.2-0.2,0.4-0.2h-0.4c-0.4-0.2-0.2-0.6-0.2-0.8c1.1-1.3,1.1-3,1.7-4.5c-0.2,0-0.4,0-0.4-0.2
			c-1.9,2.1-4.9,2.8-7.7,3.6H116c-0.9,0.4-2.3,0.4-3.2-0.2c-0.8-0.4-1.1-0.9-1.9-1.5c-1.5-0.9-3-1.7-4.7-2.3
			c-4.7-1.5-9.6-2.3-14.5-2.1c2.1-1.1,4.4-1.2,6.6-1.9c3.2-0.9,6.2-2.1,9.6-1.9c-0.6-0.2-1.3,0-1.9,0c-2.6-0.2-5.3,0.6-8.1,1.1
			c-1.9,0.4-3.6,1.1-5.5,1.5c-1.1,0.4-1.7,1.5-3,1.3v-0.6c1.9-2.3,4.2-4.5,7.2-4.7c3.4-0.6,6.6,0,10,0.4c2.5,0.2,4.7,0.8,7.2,1.3
			c0.9,0,1.1,1.5,1.9,1.7c1.1,0.4,2.3,0,3.4,0.8c0-0.4-0.2-0.8,0-1.1c0.8-0.8,1.7,0.2,2.5-0.2c1.5-0.9-1.3-2.6-2.1-4
			c0-0.2,0.2-0.4,0.2-0.4c1.5,1.3,2.6,2.8,4.5,3.8c0.9,0.4,3.2,0.9,2.8-0.2c-0.9-2.1-2.8-3.8-4.4-5.7v-0.8c-0.4,0-0.4-0.2-0.6-0.4
			v-0.8c-0.8-0.4-0.6-1.1-0.9-1.7c-0.6-0.9-0.2-2.3-0.6-3.4c-0.4-1.1-0.6-2.1-0.8-3.2c-0.6-3.2-1.3-6-1.7-9.1
			c-0.4-3.6,2.1-6.4,3.8-9.6c1.3-2.3,2.8-4.5,5.3-6c0.6-2.3,2.1-4.2,3.6-6c1.5-1.8,4-3,5.8-3.8c2.6-1.2,5-1.9,5-1.9H11.1v100h92.7
			c3.6-2.6,7.2-3.8,12.2-6.3C118.4,94.8,123.8,92.3,125.6,90.5 M96.6,76.9c-0.4,0-1.1,0.2-0.9-0.2c0.2-0.9,1.5-0.9,2.3-1.3
			c0.4-0.2,0.9-0.6,1.3-0.4c0.4,0.6,0.9,0.4,1.3,0.8C99.4,76.9,97.9,76.4,96.6,76.9 M67.6,72.8c0,0-0.2-0.2-0.2-0.4
			c2.5-3.2,4.3-6.2,6.1-9.6c2.5-1.3,4.5-3.2,6.4-5.3c3.2-3.4,6.6-6.4,10.6-8.3c1.5-0.6,3.4-0.4,4.9,0.2c-0.6,0.8-1.5,0.6-2.3,1.1
			c-0.2,0-0.4,0-0.6-0.2c0.2-0.2,0.2-0.4,0.2-0.6c-1.9,2.1-4.5,3-6,5.5c-1.1,1.9-1.9,4.3-4.3,4.9c-0.8,0.2,0.2-0.6-0.2-0.4
			C76.3,63.3,72.2,67.7,67.6,72.8 M83.3,60.3c-0.2,0.4-0.4,0.4-0.6,0.8c-0.2,0.4-0.4,0.6-0.8,0.8c-0.2,0-0.4,0-0.4-0.2
			c0.2-0.8,0.8-1.5,1.5-1.7C83.3,59.9,83.3,60.1,83.3,60.3 M92.1,88.6c-0.1,0.2-0.3,0.4-0.5,0.6c0.2,0,0.4,0.2,0.2,0.3
			c-0.4,0.4-0.9,0.8-1.4,1c0,0-0.2,0-0.3,0c-0.2,0.2-0.5,0.4-0.7,0.7c-0.2,0.2-1.3,0.1-1-0.2c0.5-0.4,0.9-0.9,1.4-1.3
			c0.3-0.2,0.6-0.5,0.8-0.8c0.1-0.2,0.2-0.3,0.4-0.4C91.3,88.3,92.3,88.2,92.1,88.6 M88.7,87.1C88.7,87.1,88.7,87.1,88.7,87.1
			c-0.8,0.5-1.5,1-2.2,1.5c-0.8,0.5-1.7,0.8-2.5,1.2c0,0,0,0,0,0c-0.1-0.1-0.2-0.1-0.3-0.1c-0.7,0.4-1.3,0.9-1.9,1.5
			c-0.1,0.1-0.2,0.2-0.3,0.3l0,0c0,0,0,0,0,0l-0.3,0.3c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0.1-0.3,0.3-0.4,0.4c-0.1,0.1-0.1,0.2-0.3,0.3
			c-0.1,0.1-0.4,0.1-0.4-0.1c0,0,0,0,0,0c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.2,0.1-0.3,0.2c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0
			c-0.2,0.2-0.5,0.4-0.7,0.6c-0.4,0.4-0.8,0.7-1.1,1.2c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0-0.1,0.1c0,0,0,0.1-0.1,0.1c0,0,0,0,0,0
			c0,0.1-0.1,0.1-0.1,0.2c0,0,0,0,0,0c0,0-0.1,0.1-0.2,0.1c0,0-0.1-0.1-0.1-0.1c0,0,0-0.1-0.1-0.1c-0.1-0.1-0.1-0.2-0.2-0.3
			c0,0,0,0,0,0c0,0,0-0.1,0-0.1c0.2-0.2,0.4-0.4,0.6-0.7c0,0,0,0,0,0c0.1-0.1,0.1-0.2,0.2-0.2c0.1-0.1,0.2-0.3,0.3-0.4
			c0-0.1,0.1-0.1,0.1-0.2c0.2-0.3,0.4-0.5,0.6-0.8c0,0,0,0,0,0c0,0,0.1-0.1,0.1-0.1c0.1-0.1,0.2-0.3,0.3-0.4
			c0.1-0.1,0.1-0.2,0.2-0.4l0,0l0,0c0,0,0,0,0-0.1c0.1-0.2,0.1-0.3,0.2-0.4c0,0,0,0,0,0l0-0.1c0-0.1,0-0.1,0.1-0.2c0,0,0,0,0,0
			c0-0.1,0-0.2,0.1-0.3c0,0,0-0.1,0-0.1c0.2-0.4,0.5-0.7,0.8-1c0,0-0.1,0-0.1,0c-0.3,0.2-0.5,0.4-0.7,0.6c-0.2,0.2-0.6-0.1-0.3-0.3
			c0.2-0.1,0.3-0.3,0.4-0.4c0,0,0,0,0,0c0.3-0.3,0.6-0.7,1-1c0.2-0.2,0.4-0.3,0.6-0.4c0,0,0.1-0.1,0.1-0.1c0.1-0.2,0.3-0.3,0.4-0.5
			c0,0,0,0,0,0c1.8-1.7,4.9-1.7,7.2-2.8c0.9-0.4,2.1,0.2,3,0c0.6,0,1.1,0,1.7,0.4C91.8,85,90.3,86.1,88.7,87.1 M92.6,73.9
			c-0.2-0.2,0.6,0,0.8-0.4h-1.5c-0.2,0-0.2-0.2-0.2-0.4c-0.9,0.2-2.1,0.6-3,0.8c-1.3,0.4-2.5,1.3-4,1.7c-2.1,0.8-3.8,2.5-6,3.2
			c-0.2,0-0.2-0.2-0.2-0.4c0.2-0.6,0.9-0.8,1.3-1.3c0-0.2,0-0.4-0.2-0.4c1.5-2.1,3.6-3.2,5.5-4.9v-0.6c0.6-0.8,1.5-1.1,1.9-2.1
			c0.2-0.6,1-1.3,1.9-1.7c-0.2-0.2-0.6-0.2-0.6-0.6c-0.8,0-1.5,0.4-2.3-0.2c0.4-0.3,0.8-0.5,1.2-0.7c-0.2,0-0.3-0.1-0.4-0.3
			c-0.2-0.4,0.4-0.8,0.9-0.9c0.8-0.2,1.7-0.2,2.3-0.8c-1.3-0.2-2.8,0.4-4.2-0.4c0.9-2.5,2.5-4.5,4.7-5.7c0.2,0,0.6,0,0.6,0.2
			c0,0.9-0.6,1.7-1.5,1.9c1.5,0.4,3,0.4,4.5,1.1c-0.2,0.4-0.6,0.2-0.8,0.2c0.9,0.6,2.1,0.2,3,0.9c-0.6,0.6-1.1,0-1.7,0
			c5.9,1.7,12.1,3,17,6.8c-4.2,2.1-8.5,3-13,4c-0.6,0-0.9,0-1.5-0.2c0,0.2,0,0.6-0.2,0.6c-0.8,0-1.3,0-1.9,0.4
			C94.3,74.3,93.2,74.5,92.6,73.9" />
                    <path class="st2" d="M286.9,2.3H179.4c0,0,0.2,0,1,0.5c0.9,0.5,2,1.1,2.7,1.4c1.4,0.7,2.7,1.6,3.6,3c0.4,0.6,0.9,1.7,0.6,2.5
			c-0.4,0.9-0.6,2.5-1.5,2.8c-1.1,0.6-2.6,0.6-4,0.4c-0.8,0-1.5-0.2-2.3-0.4c2.8,1.1,5.5,2.5,7.4,5.1c0.2,0.4,0.9,0.6,1.7,0.6
			c0.2,0,0.2,0.4,0.2,0.6c-0.4,0.4-0.8,0.6-0.6,1.1h0.6c0.9-0.4,0.8-2.3,2.1-1.7c0.9,0.6,1.3,1.9,0.8,2.8c-0.8,0.8-1.5,1.3-2.3,1.9
			c-0.2,0.4-0.2,0.9,0,1.3c0.6,0.8,0.8,1.5,0.9,2.3c0.6,1.3,0.8,2.8,1.3,4.2c0.8,2.8,1.5,5.7,1.3,8.5c0,1.5-0.8,2.8-0.2,4.3
			c0.4,1.5,1.3,2.6,2.1,4c0.8,1.1,1.5,1.9,2.1,3c1.1,1.9,3.2,3.8,2.3,6c-0.6,1.3-2.6,1.1-4,1.9c-1.1,0.9-0.2,2.5,0.4,3.4
			c0.9,1.7-1.1,2.8-2.5,3.4c0.4,0.6,1.1,0.4,1.3,0.8c0.2,0.9,1.1,1.5,0.6,2.5c-0.8,1.1-3,1.7-1.9,3.4c0.8,1.3,0.3,2.8-0.2,4.2
			c-0.6,1.7-2.1,2.5-3.4,2.8c-1.1,0.4-2.5,0.4-3.6,0.2c-0.4-0.2-0.8-0.4-1.1-0.4c-3.2-0.4-6.4-1.3-9.6-1.3c-0.9,0.2-1.9,0.4-2.6,0.7
			c-0.9,0.6-1.6,1.3-2.3,2c0,0,0,0,0,0c-0.1,0.2-0.3,0.3-0.4,0.5c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.1-0.1,0.1-0.2,0.2
			c-0.6,0.7-1,1.4-1.5,2.2c0,0.1-0.1,0.1-0.1,0.1c0,0.1-0.1,0.2-0.2,0.3c-0.6,1.1-1.1,2.3-1.4,3.5c-1.3,4.3-0.7,8,0.2,8.9
			c0.2,0.2,6.2,2.1,10.4,4c2,0.9,3.3,1.5,4.5,2.3h105.6V2.3z" />
                    <path class="st3" d="M185.8,38.7c0.8,0.2,1.9,0.2,1.9,0.6c-0.4,1.5-2.6,1.9-3.8,3.4h-0.6c-0.6,0.4-0.4,1.3-0.9,1.3
			c-0.6-0.2-1.1,0-1.7,0.2c0.8,0.8,1.7,1.3,2.8,1.1c0.2,0,0.6,0.4,0.6,0.8c0,0,0.2,0,0.4-0.2c0.2,0,0.4,0,0.4,0.2v0.8
			c-0.6,0.8-1.5,0.4-2.3,0.6c1.5,0.4,3,0.4,4.4,0c1.1-0.4,0-2.3,0.8-3.2c-0.4,0,0-0.6-0.4-0.6c0.4-0.4,0.8-0.9,1.1-1.1
			c0.4,0,0.9-0.2,1.1-0.6c0-0.4-0.8-0.6-0.6-0.9c1.1-0.8,2.1-1.9,1.7-3c-0.2-0.6-1.7-0.6-2.6-1c-0.9-0.4-2.1,0-3.2,0.2
			c-0.9,0-1.9,0.6-2.8,0.8c-1.3,0.4-2.5,1.1-3.6,1.9c1.3-0.6,2.6-0.8,4.1-1.1C183.7,38.7,184.6,38.5,185.8,38.7" />
                    <path d="M256.2,424.9c2.2,0,4.1,1.7,3.1,5.6l-10.1,2.7C250.8,428.4,253.8,424.9,256.2,424.9 M261.8,441.3h-2c-2.5,3-5.3,5.4-8,5.4
			c-2.8,0-4.2-1.7-4.2-5.4c0-1.5,0.2-3.1,0.5-4.5l16.4-5.4c3.2-7.6-0.7-10.9-5.2-10.9c-7.8,0-16.6,13.6-16.6,24.3
			c0,5.1,2.4,7.9,6.2,7.9C253.4,452.7,258,448.4,261.8,441.3 M259.2,416.9l9.3-8.5v-1.2h-6.2l-5.5,9.8H259.2z M224.3,425.1h5.4
			l-8.6,23.6c-0.8,2,0.3,4,2.4,4c6.1,0,13.4-5.2,16.2-12.6h-1.5c-2.2,3.1-7,6.5-10.6,7.2l7.9-22.2h8.1l1-3.4h-7.9l3-8.5h-3.1
			l-5.6,8.5l-6.7,0.9V425.1z M218.7,423.9c0.7-2.2-0.8-3.4-1.9-3.4c-4.7,0-10.4,4.3-12.6,10.2h1.5c1.5-2.2,4.1-4.6,6.6-5l-9.1,23.6
			c-0.8,2.2,0.8,3.4,2,3.4c4.5,0,9.8-4.3,12-10.2h-1.5c-1.5,2.2-4.1,4.6-6.6,5L218.7,423.9z M219.6,414.5c2,0,3.7-1.7,3.7-3.7
			c0-2-1.7-3.7-3.7-3.7c-2.1,0-3.7,1.7-3.7,3.7C215.9,412.9,217.5,414.5,219.6,414.5 M175.7,427.1c1.4,0,2.2,2.2,0,7.1l-6.4,14.2
			c-1.2,2.7,0.1,4.4,2.7,4.4c1.6,0,2.3-0.4,3-2.1l6.3-16.6c2.9-3.6,8.3-7.4,10.7-7.4c1.7,0,1.5,1.4,0.4,3.6l-9.7,18.5
			c-0.9,1.8,0.3,4,2.4,4c4.7,0,10.4-4.3,12.6-10.2H196c-1.5,2.2-4.1,4.6-6.6,5l8.3-16.8c1.1-2.1,1.6-4.1,1.6-5.7
			c0-2.7-1.5-4.5-4.4-4.5c-4.1,0-7.6,4.6-12.6,10.3v-4.4c0-3.1-1-5.9-3.8-5.9c-3.3,0-6.3,5.2-8.7,10.2h1.5
			C173,428.4,174.5,427.1,175.7,427.1 M169.2,427.7c1.1-3.9,0.5-7.2-2.4-7.2c-3.7,0-4.9,2.5-8.5,10.3v-4.4c0-3.1-1-5.9-3.8-5.9
			c-3.3,0-6.3,5.2-8.7,10.2h1.5c1.6-2.3,3.1-3.7,4.3-3.7c1.4,0,2.2,2.2,0,7.1l-6.4,14.2c-1.2,2.7,0.1,4.4,2.7,4.4
			c1.6,0,2.3-0.4,3-2.1L157,434c1.8-2.2,3.4-4.1,5.4-6.2H169.2z M134.3,424.9c2.2,0,4.1,1.7,3.1,5.6l-10.1,2.7
			C129,428.4,131.9,424.9,134.3,424.9 M139.9,441.3h-2c-2.5,3-5.3,5.4-8,5.4c-2.8,0-4.2-1.7-4.2-5.4c0-1.5,0.2-3.1,0.5-4.5l16.4-5.4
			c3.2-7.6-0.6-10.9-5.2-10.9c-7.8,0-16.6,13.6-16.6,24.3c0,5.1,2.4,7.9,6.2,7.9C131.5,452.7,136.1,448.4,139.9,441.3 M102.4,425.1
			h5.4l-8.6,23.6c-0.8,2,0.3,4,2.4,4c6.1,0,13.5-5.2,16.2-12.6h-1.5c-2.2,3.1-7,6.5-10.6,7.2l7.9-22.2h8.1l1-3.4h-7.9l3-8.5h-3.1
			l-5.6,8.5l-6.7,0.9V425.1z M73.7,443.5c0-7.3,8.1-17.2,12.7-17.2c1,0,2,0.1,2.8,0.4l-4.7,12.6c-2.7,3.3-6.9,7.3-8.9,7.3
			C74.4,446.6,73.7,445.7,73.7,443.5 M98.6,419.1l-2.5-0.2l-2.8,2.8h-0.5c-11.9,0-24.7,14.8-24.7,26.5c0,2.7,1.5,4.5,4.4,4.5
			c3.5,0,6.9-5,10.8-10.3l-0.2,1.9c-0.5,5.4,1.2,8.4,4,8.4c3.3,0,6.3-5.2,8.6-10.2h-1.5c-1.6,2.3-3.1,3.7-4.3,3.7
			c-1.2,0-2.1-2.3,0-7.1L98.6,419.1z M73.1,427.7c1.1-3.9,0.5-7.2-2.4-7.2c-3.7,0-4.9,2.5-8.5,10.3v-4.4c0-3.1-1-5.9-3.9-5.9
			c-3.3,0-6.3,5.2-8.6,10.2h1.5c1.6-2.3,3.1-3.7,4.3-3.7c1.4,0,2.2,2.2,0,7.1L49,448.4c-1.2,2.7,0.1,4.4,2.7,4.4
			c1.6,0,2.3-0.4,3-2.1L61,434c1.8-2.2,3.4-4.1,5.4-6.2H73.1z M31.2,451.6l0.6-1.8c-7.9-1.5-8.9-1.5-5.7-10.1l3-8.1h6.3
			c3.9,0,4,1.7,3.4,6h2.3l5.2-14.3h-2.3c-2,3.4-3.5,6-7.8,6h-6.3l4.3-11.7c1.5-4.2,2.2-5,7.6-5h1.4c5.5,0,6.2,1.5,6.2,7.3h2.2
			l1.8-9.7H22.9l-0.6,1.8c6.3,1.3,6.9,1.9,4,10.1l-6.5,17.7c-3,8.1-4.2,8.8-11.5,10.1l-0.5,1.8H31.2z" />
                    <path d="M182.5,356c2.2,0,4.1,1.7,3.1,5.6l-10.1,2.7C177.1,359.5,180.1,356,182.5,356 M188.1,372.4h-2c-2.5,3-5.3,5.4-8,5.4
			c-2.8,0-4.2-1.7-4.2-5.4c0-1.5,0.2-3.1,0.5-4.5l16.4-5.4c3.2-7.6-0.7-10.9-5.2-10.9c-7.8,0-16.6,13.6-16.6,24.3
			c0,5.1,2.4,7.9,6.2,7.9C179.7,383.9,184.3,379.5,188.1,372.4 M185.5,348l9.3-8.5v-1.2h-6.2l-5.5,9.8H185.5z M150.6,356.2h5.4
			l-8.6,23.6c-0.8,2,0.3,4,2.4,4c6.1,0,13.4-5.2,16.2-12.6h-1.5c-2.2,3.1-7,6.5-10.6,7.2l7.9-22.2h8.1l1-3.4H163l3-8.5h-3.1
			l-5.6,8.5l-6.7,1V356.2z M145,355.1c0.7-2.2-0.8-3.4-2-3.4c-4.7,0-10.4,4.3-12.6,10.2h1.5c1.5-2.2,4.1-4.6,6.6-5l-9.1,23.6
			c-0.8,2.2,0.8,3.4,2,3.4c4.5,0,9.8-4.3,12-10.2h-1.5c-1.5,2.2-4.1,4.6-6.6,5L145,355.1z M145.9,345.7c2,0,3.7-1.7,3.7-3.7
			c0-2-1.7-3.7-3.7-3.7c-2.1,0-3.7,1.7-3.7,3.7C142.2,344,143.8,345.7,145.9,345.7 M116.9,378.7l15-39.8l-0.5-0.7l-10.4,1.2v1.2
			l2,1.5c1.8,1.4,1.2,2.7-0.4,7.2l-11.4,30.4c-1,1.8,0.3,4,2.4,4c4.7,0,9.8-4.3,12-10.2h-1.5C122.5,375.8,119.3,378.2,116.9,378.7
			 M86.3,374.6c0-7.3,8.1-17.2,12.7-17.2c1,0,1.9,0.1,2.8,0.4L97,370.4c-2.7,3.3-6.9,7.3-8.9,7.3C87,377.8,86.3,376.8,86.3,374.6
			 M111.2,350.3l-2.5-0.2l-2.8,2.8h-0.5c-11.9,0-24.7,14.8-24.7,26.5c0,2.7,1.5,4.5,4.4,4.5c3.5,0,6.9-5,10.8-10.3l-0.2,1.9
			c-0.5,5.4,1.2,8.4,4,8.4c3.3,0,6.3-5.2,8.6-10.2h-1.5c-1.6,2.3-3.1,3.7-4.3,3.7c-1.2,0-2.1-2.3,0-7L111.2,350.3z M53.3,389.6
			c0-3.1,3-5.1,7.3-6.8c1.4,0.7,3.6,1.5,6.4,2.4c4.5,1.5,6.2,2.1,6.2,3.4c0,2.9-4.1,5.1-11.6,5.1C56,393.8,53.3,392.6,53.3,389.6
			 M65.6,370.5c-2,0-2.7-1.7-2.7-3.6c0-5.9,2.8-13,7.3-13c2,0,2.7,1.7,2.7,3.6C72.9,363.3,70,370.5,65.6,370.5 M78.4,386.7
			c0-3.8-3.4-5.2-8.9-6.8c-4.7-1.4-6.9-1.8-6.9-3.4c0-1.2,1-2.7,3-3.8c7.8-0.4,12.7-7.4,12.7-13.6c0-1.1-0.2-2.1-0.5-3h5.3l1-3.4h-9
			c-1.2-0.8-2.7-1.2-4.4-1.2c-8.2,0-13.5,7.2-13.5,13.6c0,4.1,2.4,6.9,6.2,7.4c-3.8,1.8-6,3.7-6,6.1c0,1.4,0.5,2.4,1.7,3.3
			c-8.8,2.6-12.4,5.9-12.4,9.7c0,4.1,5.4,5.8,11.8,5.8C69.3,397.5,78.4,391.6,78.4,386.7 M37.6,362.7c3.9,0,4,1.7,3.4,6h2.3
			l5.2-14.3h-2.3c-2,3.4-3.5,6-7.8,6h-8.7l4.3-11.7c1.5-4.2,2.3-5,7.6-5h3.8c5.5,0,6.2,1.5,6.2,7.3h2.2l1.8-9.7H22.9l-0.6,1.8
			c6.3,1.3,6.9,1.9,4,10.1l-6.5,17.7c-3,8.1-4.2,8.8-11.5,10.1l-0.5,1.8h36.4l6.5-10.3h-2.5c-4.2,4.2-8.5,7.9-16.6,7.9
			c-9.7,0-8.8-0.5-5.6-9.5l3-8.1H37.6z M42.3,338.3l9.3-6.8v-1.2h-6.2l-5.5,8H42.3z" />
                    <path d="M181.3,287.2c2.2,0,4.1,1.7,3.1,5.6l-10.1,2.7C175.9,290.6,178.9,287.2,181.3,287.2 M186.9,303.6h-2c-2.5,3-5.3,5.4-8,5.4
			c-2.8,0-4.2-1.7-4.2-5.4c0-1.5,0.2-3.1,0.5-4.5l16.4-5.4c3.2-7.6-0.7-10.9-5.2-10.9c-7.8,0-16.6,13.6-16.6,24.3
			c0,5.1,2.4,7.9,6.2,7.9C178.5,315,183.1,310.7,186.9,303.6 M184.3,279.2l9.3-8.5v-1.2h-6.2l-5.5,9.8H184.3z M149.4,287.3h5.5
			l-8.6,23.6c-0.8,2,0.3,4,2.4,4c6.1,0,13.5-5.2,16.2-12.6h-1.5c-2.2,3.1-7,6.5-10.6,7.2l7.9-22.2h8.1l1-3.4h-7.9l3-8.5h-3.1
			l-5.6,8.5l-6.7,0.9V287.3z M146.6,290c1.1-3.9,0.5-7.2-2.4-7.2c-3.7,0-4.9,2.5-8.5,10.3v-4.4c0-3.1-1-5.9-3.8-5.9
			c-3.3,0-6.3,5.2-8.7,10.2h1.5c1.6-2.3,3.1-3.7,4.3-3.7c1.4,0,2.2,2.2,0,7.1l-6.4,14.2c-1.2,2.7,0.1,4.4,2.7,4.4
			c1.6,0,2.3-0.4,3-2.1l6.3-16.6c1.8-2.2,3.4-4.1,5.4-6.2H146.6z M111.7,287.2c2.2,0,4.1,1.7,3.1,5.6l-10.1,2.7
			C106.3,290.6,109.3,287.2,111.7,287.2 M117.3,303.6h-2c-2.5,3-5.3,5.4-8,5.4c-2.8,0-4.2-1.7-4.2-5.4c0-1.5,0.2-3.1,0.5-4.5
			l16.4-5.4c3.2-7.6-0.6-10.9-5.2-10.9c-7.8,0-16.6,13.6-16.6,24.3c0,5.1,2.4,7.9,6.2,7.9C108.9,315,113.5,310.7,117.3,303.6
			 M79.1,310.2c-1.6,0-3.9-1.5-3.9-2.8c0-0.4,0.7-2.3,1.6-4.6l2.6-7c2.8-3.4,7.2-7.1,9.7-7.1c1.5,0,2.6,1,2.6,3.1
			C91.6,298.4,85.6,310.2,79.1,310.2 M97.3,289.3c0-4.8-1.2-6.6-4.6-6.6c-4.2,0-8.1,4.5-12.1,9.9L89,270l-0.5-0.7l-10.4,1.2v1.2
			l2,1.5c1.8,1.4,1.2,2.8-0.4,7.2l-9.1,23.9c-0.8,2-1.7,4.4-1.7,5c0,2.8,3.8,5.5,7.3,5.5C84.1,315,97.3,300.5,97.3,289.3
			 M66.6,286.2c0.6-2.2-0.8-3.4-2-3.4c-4.7,0-10.4,4.3-12.6,10.2h1.5c1.5-2.2,4.1-4.6,6.6-5l-9.1,23.6c-0.8,2.2,0.8,3.4,2,3.4
			c4.5,0,9.8-4.3,12-10.2h-1.5c-1.5,2.2-4.1,4.6-6.6,5L66.6,286.2z M67.6,276.8c2,0,3.7-1.7,3.7-3.7c0-2-1.7-3.7-3.7-3.7
			c-2.1,0-3.7,1.7-3.7,3.7C63.9,275.1,65.5,276.8,67.6,276.8 M44.5,272.3H22.9l-0.6,1.8c6.3,1.3,6.9,1.9,4,10.1l-6.5,17.7
			c-3,8.1-4.2,8.8-11.5,10.1l-0.5,1.8h32.8l7.1-12.7h-2.5c-4.1,4.5-8.8,10.2-16.1,10.2c-5.5,0-6.3-1-3.2-9.5l6.5-17.7
			c3-8.1,4.2-8.8,11.5-10.1L44.5,272.3z" />
                </g>
            </g>
        </svg>
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2309" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>
<div class="fr-transcription" id="transcription-2308">
    <button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-2308">Transcription</button>
    <div class="fr-collapse" id="fr-transcription-collapse-transcription-2308">
        <div class="fr-transcription__footer">
            <div class="fr-transcription__actions-group">
                <button aria-controls="fr-transcription-modal-transcription-2308" aria-label="Agrandir la transcription" data-fr-opened="false" id="button-2311" class="fr-btn--fullscreen fr-btn">Agrandir</button>
            </div>
        </div>
        <div id="fr-transcription-modal-transcription-2308" class="fr-modal" aria-labelledby="fr-transcription-modal-transcription-2308-title">
            <div class="fr-container fr-container--fluid fr-container-md">
                <div class="fr-grid-row fr-grid-row--center">
                    <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                        <div class="fr-modal__body">
                            <div class="fr-modal__header">
                                <button aria-controls="fr-transcription-modal-transcription-2308" id="button-2312" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                            </div>
                            <div class="fr-modal__content">
                                <h1 id="fr-transcription-modal-transcription-2308-title" class="fr-modal__title">
                                    Titre de la transcription
                                </h1>
                                <!-- données de test -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Média image, SVG décoratif

Description / Source Libellé lien

<figure role="group" class="fr-content-media" id="media-2316" aria-label="Description / Source">
    <div class="fr-content-media__img">
        <!-- Les SVG illustratifs (non porteur de sens) doivent avoir l'attribut aria-hidden="true" -->
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
            <rect width="360" height="360" fill="#f2f2f9" />
            <path d="M200.667,145.977l44.471,70.069H155.207Z" fill="#bfbfe3" />
            <path d="M149.342,173.226l-27.37,42.82h54.74Z" fill="#e5e5f4" />
            <ellipse cx="162.05" cy="156.682" rx="6.843" ry="6.812" fill="#7f7fc8" />
        </svg>
    </div>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2317" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>

Média image avec une transcription

Planche 1 de la BD Simone Veil : la loi sur l’avortement. Épisode 2 - voir transcription ci-dessous
© DILA 2020 vie-publique.fr

Simone Veil : la loi sur l’avortement

Épisode 2 : une loi qui oppose

Synopsis : Dans un café, Louise discute avec sa mère de l’opposition virulente qu’a soulevée le projet de loi sur l’avortement défendu par Simone Veil lors des trois jours de débat à l’Assemblée nationale. Trois jours pendant lesquels les langues se sont déliées, pour le meilleur comme pour le pire.

  • Case 1

Intérieur jour salon. Un père et ses quatre enfants sont assis, blottis les uns contre les autres, devant un poste de TV et regardent le discours de Simone Veil retransmis en direct.
26 novembre 1974.
SIMONE VEIL :
Aucune femme ne recourt de gaieté de cœur à l’avortement. Il suffit d’écouter les femmes.

  • Case 2

Intérieur jour salon. Plan rapproché de la petite fille (la mère de Louise) serré contre son père, son ours en peluche dans les bras.
SIMONE VEIL :
C’est toujours un drame cela restera toujours un drame.

  • Case 3

Intérieur jour café, Louise et sa mère, plan rapproché de celle-ci.
MÈRE :
Je ne me rappelle pas grand-chose de ce discours retransmis en direct, mais je me souviens très bien que nous étions tous les quatre avec mon père et mes frères et sœurs devant la télé.
Mon père a fondu en larmes juste après.

  • Case 4

Intérieur jour café, Louise et sa mère.
MÈRE :
Il faut se rappeler les réactions suite à ce discours ! Simone Veil a souvent évoqué le « climat de passions » qui régnait. Pendant les trois jours de débats qui ont suivi, tout a été dit, même le pire.

  • Case 5

Intérieur nuit Assemblée nationale. Plan rapproché sur Jean Foyer à la tribune.
Encart texte

26 novembre 1974. Les débats commencent à l’Assemblée nationale. Jean Foyer, député de la majorité de droite, est le premier opposant au projet à monter à la tribune.

JEAN FOYER :
Déjà des capitaux sont impatients de s’investir dans l’industrie de la mort, et le temps n’est pas loin où nous connaîtrons en France « ces avortoirs », ces abattoirs, où s’entassent des cadavres de petits hommes et que certains de mes collègues ont eu l’occasion de visiter à l’étranger.

  • Case 6

Intérieur nuit Assemblée. Lucien Neuwirth à la tribune.
Encart texte

Lucien Neuwirth, député de la majorité qui avait défendu en 1967 le projet de loi sur la contraception, s’exprime.

LUCIEN NEUWIRTH :
… or chacun le sait, l’avortement n’est pas autre chose que l’issue extrême, l’alternative détestable d’une grossesse non désirée.
Il convient donc de s’attaquer à l’effet et non à la cause.

<figure role="group" class="fr-content-media" id="media-2325" aria-label="© DILA 2020">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-ratio-2x3" src="../../../example/img/placeholder-transcription.jpg" alt="Planche 1 de la BD Simone Veil : la loi sur l’avortement. Épisode 2 - voir transcription ci-dessous" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">
        © DILA 2020
        <a id="link-2327" href="[url - à modifier]" class="fr-link">vie-publique.fr</a>
    </figcaption>
</figure>
<div class="fr-transcription" id="transcription-2326">
    <button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-2326">Transcription</button>
    <div class="fr-collapse" id="fr-transcription-collapse-transcription-2326">
        <div class="fr-transcription__footer">
            <div class="fr-transcription__actions-group">
                <button aria-controls="fr-transcription-modal-transcription-2326" aria-label="Agrandir la transcription" data-fr-opened="false" id="button-2329" class="fr-btn--fullscreen fr-btn">Agrandir</button>
            </div>
        </div>
        <div id="fr-transcription-modal-transcription-2326" class="fr-modal" aria-labelledby="fr-transcription-modal-transcription-2326-title">
            <div class="fr-container fr-container--fluid fr-container-md">
                <div class="fr-grid-row fr-grid-row--center">
                    <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                        <div class="fr-modal__body">
                            <div class="fr-modal__header">
                                <button aria-controls="fr-transcription-modal-transcription-2326" id="button-2330" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                            </div>
                            <div class="fr-modal__content">
                                <h1 id="fr-transcription-modal-transcription-2326-title" class="fr-modal__title">
                                    Simone Veil : la loi sur l’avortement
                                </h1>
                                <p class="fr-mb-4v">Épisode 2 : une loi qui oppose
                                    <br>
                                    <br>Synopsis : Dans un café, Louise discute avec sa mère de l’opposition virulente qu’a soulevée le projet de loi sur l’avortement défendu par Simone Veil lors des trois jours de débat à l’Assemblée nationale. Trois jours pendant lesquels les langues se sont déliées, pour le meilleur comme pour le pire.
                                </p>
                                <ul>
                                    <li>Case 1</li>
                                </ul>
                                <p>
                                    <em>Intérieur jour salon. Un père et ses quatre enfants sont assis, blottis les uns contre les autres, devant un poste de TV et regardent le discours de Simone Veil retransmis en direct.</em>
                                    <br>
                                    <em>26 novembre 1974.</em>
                                    <br>SIMONE VEIL :
                                    <br>Aucune femme ne recourt de gaieté de cœur à l’avortement. Il suffit d’écouter les femmes.
                                </p>
                                <ul>
                                    <li>Case 2</li>
                                </ul>
                                <p>
                                    <em>Intérieur jour salon. Plan rapproché de la petite fille (la mère de Louise) serré contre son père, son ours en peluche dans les bras.</em>
                                    <br>SIMONE VEIL :
                                    <br>C’est toujours un drame cela restera toujours un drame.
                                </p>
                                <ul>
                                    <li>Case 3</li>
                                </ul>
                                <p>
                                    <em>Intérieur jour café, Louise et sa mère, plan rapproché de celle-ci.</em>
                                    <br>MÈRE :
                                    <br>Je ne me rappelle pas grand-chose de ce discours retransmis en direct, mais je me souviens très bien que nous étions tous les quatre avec mon père et mes frères et sœurs devant la télé.
                                    <br>Mon père a fondu en larmes juste après.
                                </p>
                                <ul>
                                    <li>Case 4</li>
                                </ul>
                                <p>
                                    <em>Intérieur jour café, Louise et sa mère.</em>
                                    <br>MÈRE :
                                    <br>Il faut se rappeler les réactions suite à ce discours ! Simone Veil a souvent évoqué le « climat de passions » qui régnait. Pendant les trois jours de débats qui ont suivi, tout a été dit, même le pire.
                                </p>
                                <ul>
                                    <li>Case 5</li>
                                </ul>
                                <p>
                                    <em>Intérieur nuit Assemblée nationale. Plan rapproché sur Jean Foyer à la tribune.
                                        <br>Encart texte
                                    </em>
                                    <br>26 novembre 1974. Les débats commencent à l’Assemblée nationale. Jean Foyer, député de la majorité de droite, est le premier opposant au projet à monter à la tribune.
                                </p>
                                <p>JEAN FOYER :
                                    <br>Déjà des capitaux sont impatients de s’investir dans l’industrie de la mort, et le temps n’est pas loin où nous connaîtrons en France « ces avortoirs », ces abattoirs, où s’entassent des cadavres de petits hommes et que certains de mes collègues ont eu l’occasion de visiter à l’étranger.
                                </p>
                                <ul>
                                    <li>Case 6</li>
                                </ul>
                                <p>
                                    <em>Intérieur nuit Assemblée. Lucien Neuwirth à la tribune.
                                        <br>Encart texte
                                    </em>
                                    <br>Lucien Neuwirth, député de la majorité qui avait défendu en 1967 le projet de loi sur la contraception, s’exprime.
                                </p>
                                <p>LUCIEN NEUWIRTH :
                                    <br>… or chacun le sait, l’avortement n’est pas autre chose que l’issue extrême, l’alternative détestable d’une grossesse non désirée.
                                    <br>Il convient donc de s’attaquer à l’effet et non à la cause.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Média video edito, ratio d’aspect 16/9 par défaut

Description / Source Libellé lien

Titre de la transcription

  • list item
    • list item niveau 2

<figure role="group" class="fr-content-media" id="media-2338">
    <iframe title="Vidéo de présentation du Service National Universel - voir transcription ci-dessous" class="fr-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2340" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>
<div class="fr-transcription" id="transcription-2339">
    <button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-2339">Transcription</button>
    <div class="fr-collapse" id="fr-transcription-collapse-transcription-2339">
        <div class="fr-transcription__footer">
            <div class="fr-transcription__actions-group">
                <button aria-controls="fr-transcription-modal-transcription-2339" aria-label="Agrandir la transcription" data-fr-opened="false" id="button-2342" class="fr-btn--fullscreen fr-btn">Agrandir</button>
            </div>
        </div>
        <div id="fr-transcription-modal-transcription-2339" class="fr-modal" aria-labelledby="fr-transcription-modal-transcription-2339-title">
            <div class="fr-container fr-container--fluid fr-container-md">
                <div class="fr-grid-row fr-grid-row--center">
                    <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                        <div class="fr-modal__body">
                            <div class="fr-modal__header">
                                <button aria-controls="fr-transcription-modal-transcription-2339" id="button-2343" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                            </div>
                            <div class="fr-modal__content">
                                <h1 id="fr-transcription-modal-transcription-2339-title" class="fr-modal__title">
                                    Titre de la transcription
                                </h1>
                                <!-- données de test -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Média video edito, ratio d’aspect 16/9 par défaut, petite taille

Description / Source Libellé lien

Titre de la transcription

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item

<figure role="group" class="fr-content-media fr-content-media--sm" id="media-2351">
    <iframe title="Vidéo de présentation du Service National Universel - voir transcription ci-dessous" class="fr-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2353" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>
<div class="fr-transcription" id="transcription-2352">
    <button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-2352">Transcription</button>
    <div class="fr-collapse" id="fr-transcription-collapse-transcription-2352">
        <div class="fr-transcription__footer">
            <div class="fr-transcription__actions-group">
                <button aria-controls="fr-transcription-modal-transcription-2352" aria-label="Agrandir la transcription" data-fr-opened="false" id="button-2355" class="fr-btn--fullscreen fr-btn">Agrandir</button>
            </div>
        </div>
        <div id="fr-transcription-modal-transcription-2352" class="fr-modal" aria-labelledby="fr-transcription-modal-transcription-2352-title">
            <div class="fr-container fr-container--fluid fr-container-md">
                <div class="fr-grid-row fr-grid-row--center">
                    <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                        <div class="fr-modal__body">
                            <div class="fr-modal__header">
                                <button aria-controls="fr-transcription-modal-transcription-2352" id="button-2356" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                            </div>
                            <div class="fr-modal__content">
                                <h1 id="fr-transcription-modal-transcription-2352-title" class="fr-modal__title">
                                    Titre de la transcription
                                </h1>
                                <!-- données de test -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Média video edito, ratio d’aspect 16/9 par défaut, grande taille

Description / Source Libellé lien

Titre de la transcription

  • list item

<figure role="group" class="fr-content-media fr-content-media--lg" id="media-2364">
    <iframe title="Vidéo de présentation du Service National Universel - voir transcription ci-dessous" class="fr-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2366" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>
<div class="fr-transcription" id="transcription-2365">
    <button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-2365">Transcription</button>
    <div class="fr-collapse" id="fr-transcription-collapse-transcription-2365">
        <div class="fr-transcription__footer">
            <div class="fr-transcription__actions-group">
                <button aria-controls="fr-transcription-modal-transcription-2365" aria-label="Agrandir la transcription" data-fr-opened="false" id="button-2368" class="fr-btn--fullscreen fr-btn">Agrandir</button>
            </div>
        </div>
        <div id="fr-transcription-modal-transcription-2365" class="fr-modal" aria-labelledby="fr-transcription-modal-transcription-2365-title">
            <div class="fr-container fr-container--fluid fr-container-md">
                <div class="fr-grid-row fr-grid-row--center">
                    <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                        <div class="fr-modal__body">
                            <div class="fr-modal__header">
                                <button aria-controls="fr-transcription-modal-transcription-2365" id="button-2369" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                            </div>
                            <div class="fr-modal__content">
                                <h1 id="fr-transcription-modal-transcription-2365-title" class="fr-modal__title">
                                    Titre de la transcription
                                </h1>
                                <!-- données de test -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Média video edito, ratio d’aspect 4x3

Description / Source Libellé lien

Titre de la transcription

  • list item
  • list item

<figure role="group" class="fr-content-media" id="media-2377">
    <iframe title="Vidéo de présentation du Service National Universel - voir transcription ci-dessous" class="fr-responsive-vid fr-ratio-4x3" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2379" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>
<div class="fr-transcription" id="transcription-2378">
    <button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-2378">Transcription</button>
    <div class="fr-collapse" id="fr-transcription-collapse-transcription-2378">
        <div class="fr-transcription__footer">
            <div class="fr-transcription__actions-group">
                <button aria-controls="fr-transcription-modal-transcription-2378" aria-label="Agrandir la transcription" data-fr-opened="false" id="button-2381" class="fr-btn--fullscreen fr-btn">Agrandir</button>
            </div>
        </div>
        <div id="fr-transcription-modal-transcription-2378" class="fr-modal" aria-labelledby="fr-transcription-modal-transcription-2378-title">
            <div class="fr-container fr-container--fluid fr-container-md">
                <div class="fr-grid-row fr-grid-row--center">
                    <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                        <div class="fr-modal__body">
                            <div class="fr-modal__header">
                                <button aria-controls="fr-transcription-modal-transcription-2378" id="button-2382" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                            </div>
                            <div class="fr-modal__content">
                                <h1 id="fr-transcription-modal-transcription-2378-title" class="fr-modal__title">
                                    Titre de la transcription
                                </h1>
                                <!-- données de test -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Média video edito, ratio d’aspect 4x3, petite taille

Description / Source Libellé lien

Titre de la transcription

  • list item

<figure role="group" class="fr-content-media fr-content-media--sm" id="media-2390">
    <iframe title="Vidéo de présentation du Service National Universel - voir transcription ci-dessous" class="fr-responsive-vid fr-ratio-4x3" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2392" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>
<div class="fr-transcription" id="transcription-2391">
    <button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-2391">Transcription</button>
    <div class="fr-collapse" id="fr-transcription-collapse-transcription-2391">
        <div class="fr-transcription__footer">
            <div class="fr-transcription__actions-group">
                <button aria-controls="fr-transcription-modal-transcription-2391" aria-label="Agrandir la transcription" data-fr-opened="false" id="button-2394" class="fr-btn--fullscreen fr-btn">Agrandir</button>
            </div>
        </div>
        <div id="fr-transcription-modal-transcription-2391" class="fr-modal" aria-labelledby="fr-transcription-modal-transcription-2391-title">
            <div class="fr-container fr-container--fluid fr-container-md">
                <div class="fr-grid-row fr-grid-row--center">
                    <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                        <div class="fr-modal__body">
                            <div class="fr-modal__header">
                                <button aria-controls="fr-transcription-modal-transcription-2391" id="button-2395" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                            </div>
                            <div class="fr-modal__content">
                                <h1 id="fr-transcription-modal-transcription-2391-title" class="fr-modal__title">
                                    Titre de la transcription
                                </h1>
                                <!-- données de test -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Média video edito, ratio d’aspect 4x3, grande taille

Description / Source Libellé lien

Titre de la transcription

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item

<figure role="group" class="fr-content-media fr-content-media--lg" id="media-2403">
    <iframe title="Vidéo de présentation du Service National Universel - voir transcription ci-dessous" class="fr-responsive-vid fr-ratio-4x3" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2405" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>
<div class="fr-transcription" id="transcription-2404">
    <button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-2404">Transcription</button>
    <div class="fr-collapse" id="fr-transcription-collapse-transcription-2404">
        <div class="fr-transcription__footer">
            <div class="fr-transcription__actions-group">
                <button aria-controls="fr-transcription-modal-transcription-2404" aria-label="Agrandir la transcription" data-fr-opened="false" id="button-2407" class="fr-btn--fullscreen fr-btn">Agrandir</button>
            </div>
        </div>
        <div id="fr-transcription-modal-transcription-2404" class="fr-modal" aria-labelledby="fr-transcription-modal-transcription-2404-title">
            <div class="fr-container fr-container--fluid fr-container-md">
                <div class="fr-grid-row fr-grid-row--center">
                    <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                        <div class="fr-modal__body">
                            <div class="fr-modal__header">
                                <button aria-controls="fr-transcription-modal-transcription-2404" id="button-2408" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                            </div>
                            <div class="fr-modal__content">
                                <h1 id="fr-transcription-modal-transcription-2404-title" class="fr-modal__title">
                                    Titre de la transcription
                                </h1>
                                <!-- données de test -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Média video edito, ratio d’aspect 1x1

Description / Source Libellé lien

Titre de la transcription

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
    • list item niveau 2

<figure role="group" class="fr-content-media" id="media-2416">
    <iframe title="Vidéo de présentation du Service National Universel - voir transcription ci-dessous" class="fr-responsive-vid fr-ratio-1x1" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2418" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>
<div class="fr-transcription" id="transcription-2417">
    <button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-2417">Transcription</button>
    <div class="fr-collapse" id="fr-transcription-collapse-transcription-2417">
        <div class="fr-transcription__footer">
            <div class="fr-transcription__actions-group">
                <button aria-controls="fr-transcription-modal-transcription-2417" aria-label="Agrandir la transcription" data-fr-opened="false" id="button-2420" class="fr-btn--fullscreen fr-btn">Agrandir</button>
            </div>
        </div>
        <div id="fr-transcription-modal-transcription-2417" class="fr-modal" aria-labelledby="fr-transcription-modal-transcription-2417-title">
            <div class="fr-container fr-container--fluid fr-container-md">
                <div class="fr-grid-row fr-grid-row--center">
                    <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                        <div class="fr-modal__body">
                            <div class="fr-modal__header">
                                <button aria-controls="fr-transcription-modal-transcription-2417" id="button-2421" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                            </div>
                            <div class="fr-modal__content">
                                <h1 id="fr-transcription-modal-transcription-2417-title" class="fr-modal__title">
                                    Titre de la transcription
                                </h1>
                                <!-- données de test -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Média video edito, ratio d’aspect 1x1, petite taille

Description / Source Libellé lien

Titre de la transcription

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
    • list item niveau 2
    • list item niveau 2

<figure role="group" class="fr-content-media fr-content-media--sm" id="media-2429">
    <iframe title="Vidéo de présentation du Service National Universel - voir transcription ci-dessous" class="fr-responsive-vid fr-ratio-1x1" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2431" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>
<div class="fr-transcription" id="transcription-2430">
    <button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-2430">Transcription</button>
    <div class="fr-collapse" id="fr-transcription-collapse-transcription-2430">
        <div class="fr-transcription__footer">
            <div class="fr-transcription__actions-group">
                <button aria-controls="fr-transcription-modal-transcription-2430" aria-label="Agrandir la transcription" data-fr-opened="false" id="button-2433" class="fr-btn--fullscreen fr-btn">Agrandir</button>
            </div>
        </div>
        <div id="fr-transcription-modal-transcription-2430" class="fr-modal" aria-labelledby="fr-transcription-modal-transcription-2430-title">
            <div class="fr-container fr-container--fluid fr-container-md">
                <div class="fr-grid-row fr-grid-row--center">
                    <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                        <div class="fr-modal__body">
                            <div class="fr-modal__header">
                                <button aria-controls="fr-transcription-modal-transcription-2430" id="button-2434" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                            </div>
                            <div class="fr-modal__content">
                                <h1 id="fr-transcription-modal-transcription-2430-title" class="fr-modal__title">
                                    Titre de la transcription
                                </h1>
                                <!-- données de test -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Média video edito, ratio d’aspect 1x1, grande taille

Description / Source Libellé lien

Titre de la transcription

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
    • list item niveau 2
    • list item niveau 2

<figure role="group" class="fr-content-media fr-content-media--lg" id="media-2442">
    <iframe title="Vidéo de présentation du Service National Universel - voir transcription ci-dessous" class="fr-responsive-vid fr-ratio-1x1" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a id="link-2444" href="[url - à modifier]" class="fr-link">Libellé lien</a>
    </figcaption>
</figure>
<div class="fr-transcription" id="transcription-2443">
    <button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-2443">Transcription</button>
    <div class="fr-collapse" id="fr-transcription-collapse-transcription-2443">
        <div class="fr-transcription__footer">
            <div class="fr-transcription__actions-group">
                <button aria-controls="fr-transcription-modal-transcription-2443" aria-label="Agrandir la transcription" data-fr-opened="false" id="button-2446" class="fr-btn--fullscreen fr-btn">Agrandir</button>
            </div>
        </div>
        <div id="fr-transcription-modal-transcription-2443" class="fr-modal" aria-labelledby="fr-transcription-modal-transcription-2443-title">
            <div class="fr-container fr-container--fluid fr-container-md">
                <div class="fr-grid-row fr-grid-row--center">
                    <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                        <div class="fr-modal__body">
                            <div class="fr-modal__header">
                                <button aria-controls="fr-transcription-modal-transcription-2443" id="button-2447" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
                            </div>
                            <div class="fr-modal__content">
                                <h1 id="fr-transcription-modal-transcription-2443-title" class="fr-modal__title">
                                    Titre de la transcription
                                </h1>
                                <!-- données de test -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Dépréciation

Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes

Média video edito, ratio d’aspect 16/9 par défaut

© Légende de la vidéo

<div class="fr-content-media">
    <iframe title="Titre de l&#39;iframe" class="fr-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a id="link-2450" href="[url - à modifier]" class="fr-link">Libellé du bouton de la transcription</a>
    </div>
</div>

Média video edito, ratio d’aspect 4/3

© Légende de la vidéo

<div class="fr-content-media">
    <iframe title="Titre de l&#39;iframe" class="fr-responsive-vid fr-responsive-vid--4x3" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a id="link-2453" href="[url - à modifier]" class="fr-link">Libellé du bouton de la transcription</a>
    </div>
</div>

Média image edito, ratio d’aspect 4/3

[À MODIFIER - vide ou texte alternatif de l’image]
© Légende de l‘image

<figure class="fr-content-media" role="group" aria-label="© Légende de l‘image">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-responsive-img--4x3" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">© Légende de l‘image</figcaption>
</figure>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.