Prepare CSS section for Markdown conversion (#2307)

* Removes summary / seoSummary classes

* Remove div class=hidden and some notranslate

* Remove hidden paragraphs for live sample

* Remove hidden paragraphs for live sample - take 2

* Remove other hidden div and p - updated w/ en-US when necessary

* Remove ids

* Remove notranslate class

* Fix typo which broke build

* remove div class='index'

* remove useless <span style=...>

* remove non typographical sups

* remove non typographical subs

* remove blockindicator and fix some div.note

* fix build :/

* remove useless classes

* fix build - again :x

* fix unhandled elements 1/N + embedlivesample build fail

* fix div.warning

* Fix fixable flaws - hoping to reduce error conversion

* Remove unecessary images (same as en-US)

* fix div notes

* fix warnings

* fix some dl handling

* fix dls

* Fix a bunch of conversion errors

* rm unhandled figures

* Fix other set of issues and revamp easing-function page

* Fix some one-offs conversion errors (incl. deki files)

* fix the rest of one-off conversion issues

* Fix last dl standing

1 files changed, 49 insertions, 48 deletions

diff --git a/files/fr/web/css/scaling_of_svg_backgrounds/index.html b/files/fr/web/css/scaling_of_svg_backgrounds/index.html
index 8e48618b9b..8abfc2fcc4 100644
--- a/files/fr/web/css/scaling_of_svg_backgrounds/index.html
+++ b/files/fr/web/css/scaling_of_svg_backgrounds/index.html
@@ -33,17 +33,16 @@ original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG
 
 <p>Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.</p>
 
-<p><img alt="no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5860/=no-dimensions-or-ratio.png"></p>
-
-<p><a href="/@api/deki/files/5864/=no-dimensions-or-ratio.svg">Fichier source SVG</a></p>
+<p><img src="no-dimensions-or-ratio.png"></p>
 
+<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3469/6587a382ffb2c944462a6b110b079496/no-dimensions-or-ratio.svg" title="no-dimensions-or-ratio.svg">Fichier SVG source</a></p>
 <h3 id="Image_sans_proportion_avec_une_dimension_fixée">Image sans proportion avec une dimension fixée</h3>
 
 <p>Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.</p>
 
-<p><img alt="100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5858/=100px-wide-no-height-or-ratio.png"></p>
+<p><img src="100px-wide-no-height-or-ratio.png"></p>
 
-<p><a href="/@api/deki/files/5863/=100px-wide-no-height-or-ratio.svg">Fichier source SVG</a></p>
+<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3468/af73bea307a10ffe2559df42fad199e3/100px-wide-no-height-or-ratio.svg" title="100px-wide-no-height-or-ratio.svg">Fichier SVG source</a></p>
 
 <h3 id="Image_avec_une_dimension_fixée_et_des_proportions_intrinsèques">Image avec une dimension fixée et des proportions intrinsèques</h3>
 
@@ -51,23 +50,25 @@ original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG
 
 <p>On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.</p>
 
-<p><img alt="100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5857/=100px-height-3x4-ratio.png"></p>
+<p><img src="100px-height-3x4-ratio.png"></p>
 
-<p><a href="/@api/deki/files/5862/=100px-height-3x4-ratio.svg">Fichier source SVG</a></p>
+<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3467/fd0c534c506be06d52f0a954a59863a6/100px-height-3x4-ratio.svg" title="100px-height-3x4-ratio.svg">Fichier SVG source</a></p>
 
 <h3 id="Image_sans_largeur_ni_hauteur_mais_avec_des_proportions_intrinsèques">Image sans largeur ni hauteur mais avec des proportions intrinsèques</h3>
 
 <p>Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.</p>
 
-<p><img alt="no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5859/=no-dimensions-1x1-ratio.png"></p>
+<p><img src="no-dimensions-1x1-ratio.png"></p>
 
-<p><a href="/@api/deki/files/5861/=no-dimensions-1x1-ratio.svg">Fichier source SVG</a></p>
+<p><a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3466/a3398e03c058d99fb2b7837167cdbc26/no-dimensions-1x1-ratio.svg" title="no-dimensions-1x1-ratio.svg">Fichier SVG source</a></p>
 
 <h2 id="Exemples_de_redimensionnement">Exemples de redimensionnement</h2>
 
 <p>Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec <code>no-repeat</code> pour plus de clarté..</p>
 
-<div class="note"><strong>Note :</strong> Les images montrées ci-après illustrent le rendu <strong>attendu</strong>. Les navigateurs peuvent ne pas produire le bon résultat.</div>
+<div class="note">
+  <p><strong>Note :</strong> Les images montrées ci-après illustrent le rendu <strong>attendu</strong>. Les navigateurs peuvent ne pas produire le bon résultat.</p>
+</div>
 
 <h3 id="Indiquer_des_dimensions_fixées_sur_les_deux_axes">Indiquer des dimensions fixées sur les deux axes</h3>
 
@@ -77,49 +78,49 @@ original_slug: Web/CSS/Redimensionnement_arrière-plans_SVG
 
 <p>Avec ces déclarations CSS :</p>
 
-<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg);
+<pre class="brush: css">background: url(no-dimensions-or-ratio.svg);
 background-size: 125px 175px;
 </pre>
 
 <p>On doit obtenir un résultat semblable à :</p>
 
-<p><img alt="fixed-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5868/=fixed-no-dimensions-or-ratio.png"></p>
+<p><img src="fixed-no-dimensions-or-ratio.png"></p>
 
 <h4 id="SVG_source_Une_dimension_définie_et_aucune_proportion">SVG source : Une dimension définie et aucune proportion</h4>
 
 <p>Avec ces déclarations CSS :</p>
 
-<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
 background-size: 250px 150px;
 </pre>
 
 <p>On doit obtenir un résultat semblable à :</p>
 
-<p><img alt="fixed-100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5866/=fixed-100px-wide-no-height-or-ratio.png"></p>
+<p><img src="fixed-100px-wide-no-height-or-ratio.png"></p>
 
 <h4 id="SVG_source_Une_dimension_définie_et_des_proportions_intrinsèques">SVG source : Une dimension définie et des proportions intrinsèques</h4>
 
 <p>Avec ces déclarations CSS :</p>
 
-<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
 background-size: 275px 125px;
 </pre>
 
 <p>On doit obtenir un résultat semblable à :</p>
 
-<p><img alt="fixed-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5865/=fixed-100px-height-3x4-ratio.png"></p>
+<p><img src="fixed-100px-height-3x4-ratio.png"></p>
 
 <h4 id="SVG_source_Aucune_largeur_ni_hauteur_définie_mais_des_proportions_intrinsèques">SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques</h4>
 
 <p>Avec ces déclarations CSS :</p>
 
-<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
 background-size: 250px 100px;
 </pre>
 
 <p>On doit obtenir un résultat semblable à :</p>
 
-<p><img alt="fixed-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5867/=fixed-no-dimensions-1x1-ratio.png"></p>
+<p><img src="fixed-no-dimensions-1x1-ratio.png"></p>
 
 <h3 id="Utiliser_contain_ou_cover">Utiliser <code>contain</code> ou <code>cover</code></h3>
 
@@ -131,25 +132,25 @@ background-size: 250px 100px;
 
 <p>Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).</p>
 
-<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg);
+<pre class="brush: css">background: url(no-dimensions-or-ratio.svg);
 background-size: contain;
 </pre>
 
 <p>Le résultat obtenu sera :</p>
 
-<p><img alt="no-dimensions-or-ratio-contain.png" class="default internal" src="/@api/deki/files/5874/=no-dimensions-or-ratio-contain.png"></p>
+<p><img src="no-dimensions-or-ratio-contain.png"></p>
 
 <h4 id="SVG_source_Une_dimension_définie_et_aucune_proportion_2">SVG source : Une dimension définie et aucune proportion</h4>
 
 <p>De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.</p>
 
-<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
 background-size: contain;
 </pre>
 
 <p>Le résultat obtenu sera :</p>
 
-<p><img alt="100px-wide-no-height-or-ratio-contain.png" class="default internal" src="/@api/deki/files/5871/=100px-wide-no-height-or-ratio-contain.png"></p>
+<p><img src="100px-wide-no-height-or-ratio-contain.png"></p>
 
 <h4 id="SVG_source_Une_dimension_définie_et_des_proportions_intrinsèques_2">SVG source : Une dimension définie et des proportions intrinsèques</h4>
 
@@ -157,25 +158,25 @@ background-size: contain;
 
 <h5 id="contain"><code>contain</code></h5>
 
-<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
 background-size: contain;
 </pre>
 
 <p>Le résultat obtenu sera :</p>
 
-<p><img alt="100px-height-3x4-ratio-contain.png" class="default internal" src="/@api/deki/files/5869/=100px-height-3x4-ratio-contain.png"></p>
+<p><img src="100px-height-3x4-ratio-contain.png"></p>
 
 <p>On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.</p>
 
 <h5 id="cover"><code>cover</code></h5>
 
-<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
 background-size: cover;
 </pre>
 
 <p>Le résultat obtenu sera :</p>
 
-<p><img alt="100px-height-3x4-ratio-cover.png" class="default internal" src="/@api/deki/files/5870/=100px-height-3x4-ratio-cover.png"></p>
+<p><img src="100px-height-3x4-ratio-cover.png"></p>
 
 <p>Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.</p>
 
@@ -185,25 +186,25 @@ background-size: cover;
 
 <h5 id="contain_2"><code>contain</code></h5>
 
-<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
 background-size: contain;
 </pre>
 
 <p>Le résultat ressemblera à :</p>
 
-<p><img alt="no-dimensions-1x1-ratio-contain.png" class="default internal" src="/@api/deki/files/5872/=no-dimensions-1x1-ratio-contain.png"></p>
+<p><img src="no-dimensions-1x1-ratio-contain.png"></p>
 
 <p>On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.</p>
 
 <h5 id="cover_2"><code>cover</code></h5>
 
-<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
 background-size: cover;
 </pre>
 
 <p>Le résultat ressemblera à :</p>
 
-<p><img alt="no-dimensions-1x1-ratio-cover.png" class="default internal" src="/@api/deki/files/5873/=no-dimensions-1x1-ratio-cover.png"></p>
+<p><img src="no-dimensions-1x1-ratio-cover.png"></p>
 
 <p>Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.</p>
 
@@ -215,25 +216,25 @@ background-size: cover;
 
 <p>Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.</p>
 
-<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg);
+<pre class="brush: css">background: url(no-dimensions-or-ratio.svg);
 background-size: auto auto;
 </pre>
 
 <p>Voici le résultat obtenu :</p>
 
-<p><img alt="auto-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5878/=auto-no-dimensions-or-ratio.png"></p>
+<p><img src="auto-no-dimensions-or-ratio.png"></p>
 
 <h4 id="SVG_source_une_dimension_mais_aucune_proportion_intrinsèque">SVG source : une dimension mais aucune proportion intrinsèque</h4>
 
 <p>S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.</p>
 
-<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
 background-size: auto auto;
 </pre>
 
 <p>Voici le résultat obtenu :</p>
 
-<p><img alt="auto-100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5876/=auto-100px-wide-no-height-or-ratio.png"></p>
+<p><img src="auto-100px-wide-no-height-or-ratio.png"></p>
 
 <p>Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).</p>
 
@@ -241,13 +242,13 @@ background-size: auto auto;
 
 <p>Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.</p>
 
-<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
 background-size: auto auto;
 </pre>
 
 <p>Le résultat sera le suivant :</p>
 
-<p><img alt="auto-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5875/=auto-100px-height-3x4-ratio.png"></p>
+<p><img src="auto-100px-height-3x4-ratio.png"></p>
 
 <p>Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec <code>auto</code>.</p>
 
@@ -255,13 +256,13 @@ background-size: auto auto;
 
 <p>Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour <code>contain</code>.</p>
 
-<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
 background-size: auto auto;
 </pre>
 
 <p>Le résultat ressemblera à :</p>
 
-<p><img alt="auto-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5877/=auto-no-dimensions-1x1-ratio.png"></p>
+<p><img src="auto-no-dimensions-1x1-ratio.png"></p>
 
 <h3 id="Utiliser_auto_et_une_dimension_fixée">Utiliser <code>auto</code> et une dimension fixée</h3>
 
@@ -271,11 +272,11 @@ background-size: auto auto;
 
 <p>Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour <code>auto</code>.</p>
 
-<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg);
+<pre class="brush: css">background: url(no-dimensions-or-ratio.svg);
 background-size: auto 140px;
 </pre>
 
-<p><img alt="1auto-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5881/=1auto-no-dimensions-or-ratio.png"></p>
+<p><img src="1auto-no-dimensions-or-ratio.png"></p>
 
 <p>Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).</p>
 
@@ -283,19 +284,19 @@ background-size: auto 140px;
 
 <p>Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut <code>auto</code> dans le code CSS.</p>
 
-<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
 background-size: 200px auto;
 </pre>
 
-<p><img alt="100px-wide-no-height-or-ratio-length-auto.png" class="default internal" src="/@api/deki/files/5883/=100px-wide-no-height-or-ratio-length-auto.png"></p>
+<p><img src="100px-wide-no-height-or-ratio-length-auto.png"></p>
 
 <p>Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur <code>auto</code>, l'image fera la même hauteur que la zone pour l'arrière-plan.</p>
 
-<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
 background-size: auto 125px;
 </pre>
 
-<p><img alt="100px-wide-no-height-or-ratio-auto-length.png" class="default internal" src="/@api/deki/files/5882/=100px-wide-no-height-or-ratio-auto-length.png"></p>
+<p><img src="100px-wide-no-height-or-ratio-auto-length.png"></p>
 
 <p>Ici, c'est la largeur qui vaut <code>auto</code> et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.</p>
 
@@ -303,11 +304,11 @@ background-size: auto 125px;
 
 <p>Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.</p>
 
-<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
 background-size: 150px auto;
 </pre>
 
-<p><img alt="1auto-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5879/=1auto-100px-height-3x4-ratio.png"></p>
+<p><img src="1auto-100px-height-3x4-ratio.png"></p>
 
 <p>Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (<code>auto</code> dans la feuille de style).</p>
 
@@ -315,11 +316,11 @@ background-size: 150px auto;
 
 <p>Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).</p>
 
-<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
 background-size: 150px auto;
 </pre>
 
-<p><img alt="1auto-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5880/=1auto-no-dimensions-1x1-ratio.png"></p>
+<p><img src="1auto-no-dimensions-1x1-ratio.png"></p>
 
 <p>La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.</p>