npm - @gouvfr/dsfr - Versions diffs - 1.5.0 → 1.5.1 - Mend

@gouvfr/dsfr 1.5.0 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (754) hide show

package/example/component/tab/index.html CHANGED Viewed

@@ -129,8 +129,7 @@
                                     <!-- données de test -->
                                     <div>
                                         <h4 class="fr-h4">Contenu 1</h4>
-                                        <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
+                                        <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>
@@ -139,11 +138,7 @@
                                                     <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>
@@ -151,12 +146,16 @@
                                     <!-- données de test -->
                                     <div>
                                         <h4 class="fr-h4">Contenu 2</h4>
-                                        <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
                                         <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>
+                                                    <li>list item niveau 2</li>
+                                                </ul>
+                                            </li>
                                             <li>list item</li>
                                         </ul>
                                     </div>
@@ -167,8 +166,11 @@
                                         <h4 class="fr-h4">Contenu 3</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<ul>
+                                                    <li>list item niveau 2</li>
+                                                    <li>list item niveau 2</li>
+                                                </ul>
+                                            </li>
                                             <li>list item</li>
                                         </ul>
                                     </div>
@@ -177,9 +179,11 @@
                                     <!-- données de test -->
                                     <div>
                                         <h4 class="fr-h4">Contenu 4</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>
+                                        <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
                                         <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<ul>
                                                     <li>list item niveau 2</li>
@@ -187,7 +191,6 @@
                                                     <li>list item niveau 2</li>
                                                 </ul>
                                             </li>
-                                            <li>list item</li>
                                         </ul>
                                     </div>
                                 </div>
@@ -247,14 +250,15 @@
                                     <div>
                                         <h4 class="fr-h4">Contenu 1</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>
-                                                    <li>list item niveau 2</li>
                                                 </ul>
                                             </li>
+                                            <li>list item</li>
+                                            <li>list item</li>
                                         </ul>
                                     </div>
                                 </div>
@@ -263,24 +267,13 @@
                                     <div>
                                         <h4 class="fr-h4">Contenu 2</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>
                                             <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>
@@ -357,12 +350,7 @@
                                                         <ul>
                                                             <li>list item</li>
                                                             <li>list item</li>
-                                                            <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>
@@ -371,16 +359,17 @@
                                                     <div>
                                                         <h4 class="fr-h4">Contenu 2</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>
+                                                                    <li>list item niveau 2</li>
                                                                 </ul>
                                                             </li>
                                                         </ul>
@@ -405,10 +394,10 @@
                                                     <!-- données de test -->
                                                     <div>
                                                         <h4 class="fr-h4">Contenu 1</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>
+                                                        <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
                                                         <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>
@@ -423,14 +412,12 @@
                                                     <!-- données de test -->
                                                     <div>
                                                         <h4 class="fr-h4">Contenu 2</h4>
+                                                        <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
+                                                        <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</li>
                                                             <li>list item</li>
                                                         </ul>
                                                     </div>
@@ -441,6 +428,12 @@
                                                         <h4 class="fr-h4">Contenu 3</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<ul>
                                                                     <li>list item niveau 2</li>
                                                                     <li>list item niveau 2</li>
@@ -472,16 +465,16 @@
                                                     <!-- données de test -->
                                                     <div>
                                                         <h4 class="fr-h4">Contenu 1</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>
+                                                        <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
                                                         <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<ul>
                                                                     <li>list item niveau 2</li>
                                                                     <li>list item niveau 2</li>
                                                                 </ul>
                                                             </li>
+                                                            <li>list item</li>
                                                         </ul>
                                                     </div>
                                                 </div>
@@ -489,8 +482,12 @@
                                                     <!-- données de test -->
                                                     <div>
                                                         <h4 class="fr-h4">Contenu 2</h4>
+                                                        <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
+                                                        <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>
                                                             <li>list item<ul>
                                                                     <li>list item niveau 2</li>
@@ -507,20 +504,15 @@
                                                         <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
                                                         <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</li>
-                                                            <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>
@@ -531,14 +523,8 @@
                                                         <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
                                                         <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>
                                                             <li>list item</li>
                                                         </ul>
                                                     </div>
@@ -571,18 +557,17 @@
                                                     <!-- données de test -->
                                                     <div>
                                                         <h4 class="fr-h4">Contenu 1</h4>
-                                                        <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
                                                         <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>
                                                             <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>
@@ -590,21 +575,12 @@
                                                     <!-- données de test -->
                                                     <div>
                                                         <h4 class="fr-h4">Contenu 2</h4>
-                                                        <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
+                                                        <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>
+                                                            <li>list item</li>
+                                                            <li>list item</li>
+                                                            <li>list item</li>
                                                         </ul>
                                                     </div>
                                                 </div>
@@ -630,7 +606,18 @@
                                                         <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<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>
+                                                                    <li>list item niveau 2</li>
+                                                                </ul>
+                                                            </li>
                                                         </ul>
                                                     </div>
                                                 </div>
@@ -638,8 +625,6 @@
                                                     <!-- données de test -->
                                                     <div>
                                                         <h4 class="fr-h4">Contenu 2</h4>
-                                                        <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
                                                         <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>
@@ -648,7 +633,11 @@
                                                                     <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>
@@ -659,7 +648,6 @@
                                                         <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
                                                         <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>
@@ -853,21 +841,14 @@
                                             <!-- données de test -->
                                             <div>
                                                 <h4 class="fr-h4">Contenu </h4>
+                                                <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
                                                 <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</li>
-                                                    <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>
@@ -887,8 +868,17 @@
                                                 <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>
+                                                    <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>
                                                     <li>list item</li>
                                                 </ul>
                                             </div>
@@ -952,22 +942,14 @@
                                     <!-- données de test -->
                                     <div>
                                         <h4 class="fr-h4">Contenu 1</h4>
-                                        <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
                                         <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 id="tabpanel-1097-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-1097" tabindex="0">
-                                    <!-- données de test -->
-                                    <div>
-                                        <h4 class="fr-h4">Contenu 2</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>
@@ -980,11 +962,24 @@
                                                     <li>list item niveau 2</li>
                                                 </ul>
                                             </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                                <div id="tabpanel-1097-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-1097" tabindex="0">
+                                    <!-- données de test -->
+                                    <div>
+                                        <h4 class="fr-h4">Contenu 2</h4>
+                                        <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" 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 -->
+                                        <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>
                                         </ul>
                                     </div>
                                 </div>