Média image edito
![[À MODIFIER - vide ou texte alternatif de l’image]](../../../example/img/placeholder.16x9.png)
<figure role="group" class="fr-content-media" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito, petite taille
<figure role="group" class="fr-content-media fr-content-media--sm" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito, grande taille
<figure role="group" class="fr-content-media fr-content-media--lg" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 32x9
<figure role="group" class="fr-content-media" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 16x9
<figure role="group" class="fr-content-media" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 3x2
<figure role="group" class="fr-content-media" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 4x3
<figure role="group" class="fr-content-media" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 1x1
<figure role="group" class="fr-content-media" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 3x4
<figure role="group" class="fr-content-media" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image edito ratio 2x3
<figure role="group" class="fr-content-media" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image en svg, porteur d’information
<figure role="group" class="fr-content-media" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image, SVG décoratif
<figure role="group" class="fr-content-media" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
</figure>
Média image avec une transcription
<figure role="group" class="fr-content-media" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-458">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-458">
<dialog id="fr-transcription__modal-transcription-458" class="fr-modal" role="dialog">
<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 class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-458" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<!-- données de test -->
<div>
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<ul>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
<li>list item</li>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-458" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 16/9 par défaut
<figure role="group" class="fr-content-media">
<iframe title="Titre de l'iframe" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-460">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-460">
<dialog id="fr-transcription__modal-transcription-460" class="fr-modal" role="dialog">
<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 class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-460" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<!-- données de test -->
<div>
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<ul>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-460" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 16/9 par défaut, petite taille
<figure role="group" class="fr-content-media fr-content-media--sm">
<iframe title="Titre de l'iframe" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-462">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-462">
<dialog id="fr-transcription__modal-transcription-462" class="fr-modal" role="dialog">
<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 class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-462" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<!-- données de test -->
<div>
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<ul>
<li>list item</li>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
<li>list item</li>
</ul>
</div>
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-462" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 16/9 par défaut, grande taille
<figure role="group" class="fr-content-media fr-content-media--lg">
<iframe title="Titre de l'iframe" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-464">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-464">
<dialog id="fr-transcription__modal-transcription-464" class="fr-modal" role="dialog">
<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 class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-464" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<!-- données de test -->
<div>
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<ul>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-464" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 4x3
<figure role="group" class="fr-content-media">
<iframe title="Titre de l'iframe" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-466">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-466">
<dialog id="fr-transcription__modal-transcription-466" class="fr-modal" role="dialog">
<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 class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-466" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<!-- données de test -->
<div>
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<ul>
<li>list item</li>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-466" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 4x3, petite taille
<figure role="group" class="fr-content-media fr-content-media--sm">
<iframe title="Titre de l'iframe" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-468">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-468">
<dialog id="fr-transcription__modal-transcription-468" class="fr-modal" role="dialog">
<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 class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-468" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<!-- données de test -->
<div>
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-468" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 4x3, grande taille
<figure role="group" class="fr-content-media fr-content-media--lg">
<iframe title="Titre de l'iframe" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-470">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-470">
<dialog id="fr-transcription__modal-transcription-470" class="fr-modal" role="dialog">
<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 class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-470" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<!-- données de test -->
<div>
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<ul>
<li>list item</li>
<li>list item</li>
</ul>
</div>
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-470" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 1x1
<figure role="group" class="fr-content-media">
<iframe title="Titre de l'iframe" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-472">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-472">
<dialog id="fr-transcription__modal-transcription-472" class="fr-modal" role="dialog">
<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 class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-472" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<!-- données de test -->
<div>
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<ul>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
<li>list item</li>
</ul>
</div>
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-472" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 1x1, petite taille
<figure role="group" class="fr-content-media fr-content-media--sm">
<iframe title="Titre de l'iframe" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-474">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-474">
<dialog id="fr-transcription__modal-transcription-474" class="fr-modal" role="dialog">
<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 class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-474" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<!-- données de test -->
<div>
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<ul>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
<li>list item</li>
</ul>
</div>
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-474" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
Média video edito, ratio d‘aspect 1x1, grande taille
<figure role="group" class="fr-content-media fr-content-media--lg">
<iframe title="Titre de l'iframe" 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 class="fr-link" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-476">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-476">
<dialog id="fr-transcription__modal-transcription-476" class="fr-modal" role="dialog">
<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 class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-476" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<!-- données de test -->
<div>
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> 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.</p>
<ul>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-476" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>
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'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 class="fr-link" href="[url - à modifier]">
Label 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'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 class="fr-link" href="[url - à modifier]">
Label du bouton de la transcription
</a>
</div>
</div>
Média image edito, ratio d‘aspect 4/3
<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>