Média image edito
![[À MODIFIER - vide ou texte alternatif de l’image]](../../../example/img/placeholder.16x9.png)
<figure role="group" class="village-content-media" id="media-2034" aria-label="Description / Source">
<div class="village-content-media__img">
<img class="village-responsive-img village-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="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2035" href="[url - à modifier]">Label lien</a>
</figcaption>
</figure>
Média image edito, petite taille
<figure role="group" class="village-content-media village-content-media--sm" id="media-2039" aria-label="Description / Source">
<div class="village-content-media__img">
<img class="village-responsive-img village-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="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2040" href="[url - à modifier]">Label lien</a>
</figcaption>
</figure>
Média image edito, grande taille
<figure role="group" class="village-content-media village-content-media--lg" id="media-2044" aria-label="Description / Source">
<div class="village-content-media__img">
<img class="village-responsive-img village-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="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2045" href="[url - à modifier]">Label lien</a>
</figcaption>
</figure>
Média image edito ratio 32x9
<figure role="group" class="village-content-media" id="media-2049" aria-label="Description / Source">
<div class="village-content-media__img">
<img class="village-responsive-img village-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="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2050" href="[url - à modifier]">Label lien</a>
</figcaption>
</figure>
Média image edito ratio 16x9
<figure role="group" class="village-content-media" id="media-2054" aria-label="Description / Source">
<div class="village-content-media__img">
<img class="village-responsive-img village-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="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2055" href="[url - à modifier]">Label lien</a>
</figcaption>
</figure>
Média image edito ratio 3x2
<figure role="group" class="village-content-media" id="media-2059" aria-label="Description / Source">
<div class="village-content-media__img">
<img class="village-responsive-img village-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="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2060" href="[url - à modifier]">Label lien</a>
</figcaption>
</figure>
Média image edito ratio 4x3
<figure role="group" class="village-content-media" id="media-2064" aria-label="Description / Source">
<div class="village-content-media__img">
<img class="village-responsive-img village-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="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2065" href="[url - à modifier]">Label lien</a>
</figcaption>
</figure>
Média image edito ratio 1x1
<figure role="group" class="village-content-media" id="media-2069" aria-label="Description / Source">
<div class="village-content-media__img">
<img class="village-responsive-img village-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="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2070" href="[url - à modifier]">Label lien</a>
</figcaption>
</figure>
Média image edito ratio 3x4
<figure role="group" class="village-content-media" id="media-2074" aria-label="Description / Source">
<div class="village-content-media__img">
<img class="village-responsive-img village-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="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2075" href="[url - à modifier]">Label lien</a>
</figcaption>
</figure>
Média image edito ratio 2x3
<figure role="group" class="village-content-media" id="media-2079" aria-label="Description / Source">
<div class="village-content-media__img">
<img class="village-responsive-img village-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="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2080" href="[url - à modifier]">Label lien</a>
</figcaption>
</figure>
Média image en svg, porteur d’information
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="village-content-media" id="media-2088" aria-label="Description / Source">
<div class="village-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="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2090" href="[url - à modifier]">Label lien</a>
</figcaption>
<div class="village-transcription" id="transcription-2089">
<button class="village-transcription__btn" aria-expanded="false" aria-controls="village-transcription-collapse-transcription-2089">Transcription</button>
<div class="village-collapse" id="village-transcription-collapse-transcription-2089">
<div class="village-transcription__footer">
<div class="village-transcription__actions-group">
<button class="village-btn--fullscreen village-btn" aria-controls="village-transcription-modal-transcription-2089" aria-label="Agrandir la transcription" data-village-opened="false" id="button-2092">
Agrandir
</button>
</div>
</div>
<div id="village-transcription-modal-transcription-2089" class="village-modal" aria-labelledby="village-transcription-modal-transcription-2089-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-10 village-col-lg-8">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="village-transcription-modal-transcription-2089" id="button-2093" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="village-transcription-modal-transcription-2089-title" class="village-modal__title">
Titre de la transcription
</h1>
<!-- données de test -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</figure>
Média image, SVG décoratif
<figure role="group" class="village-content-media" id="media-2097" aria-label="Description / Source">
<div class="village-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="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2098" href="[url - à modifier]">Label lien</a>
</figcaption>
</figure>
Média image avec une transcription
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="village-content-media" id="media-2106" aria-label="© DILA 2020">
<div class="village-content-media__img">
<img class="village-responsive-img village-ratio-2x3" src="../../../example/img/placeholder-transcription.jpg" alt="" />
<!-- 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="village-content-media__caption">
© DILA 2020
<a class="village-link" id="link-2108" href="[url - à modifier]">vie-publique.fr</a>
</figcaption>
<div class="village-transcription" id="transcription-2107">
<button class="village-transcription__btn" aria-expanded="false" aria-controls="village-transcription-collapse-transcription-2107">Transcription</button>
<div class="village-collapse" id="village-transcription-collapse-transcription-2107">
<div class="village-transcription__footer">
<div class="village-transcription__actions-group">
<button class="village-btn--fullscreen village-btn" aria-controls="village-transcription-modal-transcription-2107" aria-label="Agrandir la transcription" data-village-opened="false" id="button-2110">
Agrandir
</button>
</div>
</div>
<div id="village-transcription-modal-transcription-2107" class="village-modal" aria-labelledby="village-transcription-modal-transcription-2107-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-10 village-col-lg-8">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="village-transcription-modal-transcription-2107" id="button-2111" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="village-transcription-modal-transcription-2107-title" class="village-modal__title">
Simone Veil : la loi sur l’avortement
</h1>
<p class="village-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>
</figure>
Média video edito, ratio d’aspect 16/9 par défaut
Titre de la transcription
- list item
- list item niveau 2
<figure role="group" class="village-content-media" id="media-2119">
<iframe title="Titre de l'iframe" class="village-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption class="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2121" href="[url - à modifier]">Label lien</a>
</figcaption>
<div class="village-transcription" id="transcription-2120">
<button class="village-transcription__btn" aria-expanded="false" aria-controls="village-transcription-collapse-transcription-2120">Transcription</button>
<div class="village-collapse" id="village-transcription-collapse-transcription-2120">
<div class="village-transcription__footer">
<div class="village-transcription__actions-group">
<button class="village-btn--fullscreen village-btn" aria-controls="village-transcription-modal-transcription-2120" aria-label="Agrandir la transcription" data-village-opened="false" id="button-2123">
Agrandir
</button>
</div>
</div>
<div id="village-transcription-modal-transcription-2120" class="village-modal" aria-labelledby="village-transcription-modal-transcription-2120-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-10 village-col-lg-8">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="village-transcription-modal-transcription-2120" id="button-2124" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="village-transcription-modal-transcription-2120-title" class="village-modal__title">
Titre de la transcription
</h1>
<!-- données de test -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</figure>
Média video edito, ratio d’aspect 16/9 par défaut, petite taille
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="village-content-media village-content-media--sm" id="media-2132">
<iframe title="Titre de l'iframe" class="village-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption class="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2134" href="[url - à modifier]">Label lien</a>
</figcaption>
<div class="village-transcription" id="transcription-2133">
<button class="village-transcription__btn" aria-expanded="false" aria-controls="village-transcription-collapse-transcription-2133">Transcription</button>
<div class="village-collapse" id="village-transcription-collapse-transcription-2133">
<div class="village-transcription__footer">
<div class="village-transcription__actions-group">
<button class="village-btn--fullscreen village-btn" aria-controls="village-transcription-modal-transcription-2133" aria-label="Agrandir la transcription" data-village-opened="false" id="button-2136">
Agrandir
</button>
</div>
</div>
<div id="village-transcription-modal-transcription-2133" class="village-modal" aria-labelledby="village-transcription-modal-transcription-2133-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-10 village-col-lg-8">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="village-transcription-modal-transcription-2133" id="button-2137" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="village-transcription-modal-transcription-2133-title" class="village-modal__title">
Titre de la transcription
</h1>
<!-- données de test -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</figure>
Média video edito, ratio d’aspect 16/9 par défaut, grande taille
Titre de la transcription
- list item
<figure role="group" class="village-content-media village-content-media--lg" id="media-2145">
<iframe title="Titre de l'iframe" class="village-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption class="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2147" href="[url - à modifier]">Label lien</a>
</figcaption>
<div class="village-transcription" id="transcription-2146">
<button class="village-transcription__btn" aria-expanded="false" aria-controls="village-transcription-collapse-transcription-2146">Transcription</button>
<div class="village-collapse" id="village-transcription-collapse-transcription-2146">
<div class="village-transcription__footer">
<div class="village-transcription__actions-group">
<button class="village-btn--fullscreen village-btn" aria-controls="village-transcription-modal-transcription-2146" aria-label="Agrandir la transcription" data-village-opened="false" id="button-2149">
Agrandir
</button>
</div>
</div>
<div id="village-transcription-modal-transcription-2146" class="village-modal" aria-labelledby="village-transcription-modal-transcription-2146-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-10 village-col-lg-8">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="village-transcription-modal-transcription-2146" id="button-2150" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="village-transcription-modal-transcription-2146-title" class="village-modal__title">
Titre de la transcription
</h1>
<!-- données de test -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</figure>
Média video edito, ratio d’aspect 4x3
Titre de la transcription
- list item
- list item
<figure role="group" class="village-content-media" id="media-2158">
<iframe title="Titre de l'iframe" class="village-responsive-vid village-ratio-4x3" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption class="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2160" href="[url - à modifier]">Label lien</a>
</figcaption>
<div class="village-transcription" id="transcription-2159">
<button class="village-transcription__btn" aria-expanded="false" aria-controls="village-transcription-collapse-transcription-2159">Transcription</button>
<div class="village-collapse" id="village-transcription-collapse-transcription-2159">
<div class="village-transcription__footer">
<div class="village-transcription__actions-group">
<button class="village-btn--fullscreen village-btn" aria-controls="village-transcription-modal-transcription-2159" aria-label="Agrandir la transcription" data-village-opened="false" id="button-2162">
Agrandir
</button>
</div>
</div>
<div id="village-transcription-modal-transcription-2159" class="village-modal" aria-labelledby="village-transcription-modal-transcription-2159-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-10 village-col-lg-8">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="village-transcription-modal-transcription-2159" id="button-2163" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="village-transcription-modal-transcription-2159-title" class="village-modal__title">
Titre de la transcription
</h1>
<!-- données de test -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</figure>
Média video edito, ratio d’aspect 4x3, petite taille
Titre de la transcription
- list item
<figure role="group" class="village-content-media village-content-media--sm" id="media-2171">
<iframe title="Titre de l'iframe" class="village-responsive-vid village-ratio-4x3" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption class="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2173" href="[url - à modifier]">Label lien</a>
</figcaption>
<div class="village-transcription" id="transcription-2172">
<button class="village-transcription__btn" aria-expanded="false" aria-controls="village-transcription-collapse-transcription-2172">Transcription</button>
<div class="village-collapse" id="village-transcription-collapse-transcription-2172">
<div class="village-transcription__footer">
<div class="village-transcription__actions-group">
<button class="village-btn--fullscreen village-btn" aria-controls="village-transcription-modal-transcription-2172" aria-label="Agrandir la transcription" data-village-opened="false" id="button-2175">
Agrandir
</button>
</div>
</div>
<div id="village-transcription-modal-transcription-2172" class="village-modal" aria-labelledby="village-transcription-modal-transcription-2172-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-10 village-col-lg-8">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="village-transcription-modal-transcription-2172" id="button-2176" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="village-transcription-modal-transcription-2172-title" class="village-modal__title">
Titre de la transcription
</h1>
<!-- données de test -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</figure>
Média video edito, ratio d’aspect 4x3, grande taille
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="village-content-media village-content-media--lg" id="media-2184">
<iframe title="Titre de l'iframe" class="village-responsive-vid village-ratio-4x3" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption class="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2186" href="[url - à modifier]">Label lien</a>
</figcaption>
<div class="village-transcription" id="transcription-2185">
<button class="village-transcription__btn" aria-expanded="false" aria-controls="village-transcription-collapse-transcription-2185">Transcription</button>
<div class="village-collapse" id="village-transcription-collapse-transcription-2185">
<div class="village-transcription__footer">
<div class="village-transcription__actions-group">
<button class="village-btn--fullscreen village-btn" aria-controls="village-transcription-modal-transcription-2185" aria-label="Agrandir la transcription" data-village-opened="false" id="button-2188">
Agrandir
</button>
</div>
</div>
<div id="village-transcription-modal-transcription-2185" class="village-modal" aria-labelledby="village-transcription-modal-transcription-2185-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-10 village-col-lg-8">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="village-transcription-modal-transcription-2185" id="button-2189" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="village-transcription-modal-transcription-2185-title" class="village-modal__title">
Titre de la transcription
</h1>
<!-- données de test -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</figure>
Média video edito, ratio d’aspect 1x1
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="village-content-media" id="media-2197">
<iframe title="Titre de l'iframe" class="village-responsive-vid village-ratio-1x1" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption class="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2199" href="[url - à modifier]">Label lien</a>
</figcaption>
<div class="village-transcription" id="transcription-2198">
<button class="village-transcription__btn" aria-expanded="false" aria-controls="village-transcription-collapse-transcription-2198">Transcription</button>
<div class="village-collapse" id="village-transcription-collapse-transcription-2198">
<div class="village-transcription__footer">
<div class="village-transcription__actions-group">
<button class="village-btn--fullscreen village-btn" aria-controls="village-transcription-modal-transcription-2198" aria-label="Agrandir la transcription" data-village-opened="false" id="button-2201">
Agrandir
</button>
</div>
</div>
<div id="village-transcription-modal-transcription-2198" class="village-modal" aria-labelledby="village-transcription-modal-transcription-2198-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-10 village-col-lg-8">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="village-transcription-modal-transcription-2198" id="button-2202" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="village-transcription-modal-transcription-2198-title" class="village-modal__title">
Titre de la transcription
</h1>
<!-- données de test -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</figure>
Média video edito, ratio d’aspect 1x1, petite taille
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="village-content-media village-content-media--sm" id="media-2210">
<iframe title="Titre de l'iframe" class="village-responsive-vid village-ratio-1x1" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption class="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2212" href="[url - à modifier]">Label lien</a>
</figcaption>
<div class="village-transcription" id="transcription-2211">
<button class="village-transcription__btn" aria-expanded="false" aria-controls="village-transcription-collapse-transcription-2211">Transcription</button>
<div class="village-collapse" id="village-transcription-collapse-transcription-2211">
<div class="village-transcription__footer">
<div class="village-transcription__actions-group">
<button class="village-btn--fullscreen village-btn" aria-controls="village-transcription-modal-transcription-2211" aria-label="Agrandir la transcription" data-village-opened="false" id="button-2214">
Agrandir
</button>
</div>
</div>
<div id="village-transcription-modal-transcription-2211" class="village-modal" aria-labelledby="village-transcription-modal-transcription-2211-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-10 village-col-lg-8">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="village-transcription-modal-transcription-2211" id="button-2215" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="village-transcription-modal-transcription-2211-title" class="village-modal__title">
Titre de la transcription
</h1>
<!-- données de test -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</figure>
Média video edito, ratio d’aspect 1x1, grande taille
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="village-content-media village-content-media--lg" id="media-2223">
<iframe title="Titre de l'iframe" class="village-responsive-vid village-ratio-1x1" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption class="village-content-media__caption">
Description / Source
<a class="village-link" id="link-2225" href="[url - à modifier]">Label lien</a>
</figcaption>
<div class="village-transcription" id="transcription-2224">
<button class="village-transcription__btn" aria-expanded="false" aria-controls="village-transcription-collapse-transcription-2224">Transcription</button>
<div class="village-collapse" id="village-transcription-collapse-transcription-2224">
<div class="village-transcription__footer">
<div class="village-transcription__actions-group">
<button class="village-btn--fullscreen village-btn" aria-controls="village-transcription-modal-transcription-2224" aria-label="Agrandir la transcription" data-village-opened="false" id="button-2227">
Agrandir
</button>
</div>
</div>
<div id="village-transcription-modal-transcription-2224" class="village-modal" aria-labelledby="village-transcription-modal-transcription-2224-title">
<div class="village-container village-container--fluid village-container-md">
<div class="village-grid-row village-grid-row--center">
<div class="village-col-12 village-col-md-10 village-col-lg-8">
<div class="village-modal__body">
<div class="village-modal__header">
<button class="village-btn--close village-btn" aria-controls="village-transcription-modal-transcription-2224" id="button-2228" title="Fermer">
Fermer
</button>
</div>
<div class="village-modal__content">
<h1 id="village-transcription-modal-transcription-2224-title" class="village-modal__title">
Titre de la transcription
</h1>
<!-- données de test -->
</div>
</div>
</div>
</div>
</div>
</div>
</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="village-content-media">
<iframe title="Titre de l'iframe" class="village-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="village-content-media__caption">© Légende de la vidéo</div>
<div class="village-content-media__transcription">
<a class="village-link" id="link-2231" 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="village-content-media">
<iframe title="Titre de l'iframe" class="village-responsive-vid village-responsive-vid--4x3" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="village-content-media__caption">© Légende de la vidéo</div>
<div class="village-content-media__transcription">
<a class="village-link" id="link-2234" href="[url - à modifier]">Label du bouton de la transcription</a>
</div>
</div>
Média image edito, ratio d’aspect 4/3
<figure class="village-content-media" role="group" aria-label="© Légende de l‘image">
<div class="village-content-media__img">
<img class="village-responsive-img village-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="village-content-media__caption">© Légende de l‘image</figcaption>
</figure>