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, 211 insertions, 207 deletions

diff --git a/files/fr/web/css/blend-mode/index.html b/files/fr/web/css/blend-mode/index.html
index 2f025a5746..cd83ad75cd 100644
--- a/files/fr/web/css/blend-mode/index.html
+++ b/files/fr/web/css/blend-mode/index.html
@@ -23,292 +23,296 @@ translation_of: Web/CSS/blend-mode
  <dt><code>normal</code></dt>
  <dd>
  <p>La couleur finale obtenue est la couleur du premier plan, quelle que soit la couleur de l'arrière-plan. On obtient ainsi un effet similaire à la superposition de deux feuilles de papier opaques.</p>
-
- <div class="hidden" id="normal">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
-
- <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: normal;
-}</pre>
- </div>
-
- <p>{{EmbedLiveSample('normal', "300", "300")}}</p>
  </dd>
  <dt><code>multiply</code></dt>
  <dd>
  <p>La couleur finale est obtenue en multipliant les couleurs du premier plan et de l'arrière-plan.<br>
   Si une des couches est noire, le résultat obtenu sera une image noire. Si une des couches est blanche, cela ne modifiera pas l'autre image. On obtient ainsi un effet semblable à la superposition de deux transparents.</p>
+ </dd>
+ <dt><code>screen</code></dt>
+ <dd>
+ <p>La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.</p>
+ </dd>
+ <dt><code>overlay</code></dt>
+ <dd>La couleur finale est celle décrite par <code>multiply</code> si l'arrière-plan est plus sombre ou de <code>screen</code> si elle est plus claire. On a un effet semblable à <code>hard-light</code> avec les couches interverties.
+ </dd>
+ <dt><code>darken</code></dt>
+ <dd>
+ <p>La couleur finale est la couleur la plus sombre des deux couches.</p>
+ </dd>
+ <dt><code>lighten</code></dt>
+ <dd>
+ <p>La couleur finale est la couleur la plus claire des deux couches.</p>
+ </dd>
+ <dt><code>color-dodge</code></dt>
+ <dd>
+ <p>La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.<br>
+  Un premier-plan noir n'entraînera aucun changement.</p>
+ </dd>
+ <dt><code>color-burn</code></dt>
+ <dd>
+ <p>La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.</p>
+ </dd>
+ <dt><code>hard-light</code></dt>
+ <dd>
+ <p>La couleur finale est le résultat de <code>multiply</code> si le premier plan est plus sombre ou de <code>screen</code> si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à <code>overlay</code> avec les deux couches interverties.</p>
+ </dd>
+ <dt><code>soft-light</code></dt>
+ <dd>
+ <p>La couleur finale obtenue est semblable à <code>hard-light</code>, mais est plus douce<em><code>.</code></em></p>
+ </dd>
+ <dt><code>difference</code></dt>
+ <dd>
+ <p>La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.</p>
+ </dd>
+ <dt><code>exclusion</code></dt>
+ <dd>
+ <p>La couleur finale obtenue est semblable à <code>difference</code> avec moins de contraste. Comme pour <code>difference</code>, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.</p>
+ </dd>
+ <dt><code>hue</code></dt>
+ <dd>
+ <p>La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.</p>
+ </dd>
+ <dt><code>saturation</code></dt>
+ <dd>
+ <p>La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.</p>
+ </dd>
+ <dt><code>color</code></dt>
+ <dd>
+ <p>La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.</p>
+ </dd>
+ <dt><code>luminosity</code></dt>
+ <dd>
+ <p>La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.</p>
+ </dd>
+</dl>
+
 
- <div class="hidden" id="multiply">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+<h2 id="examples">Exemples</h2>
+
+<h3 id="normal">normal</h3>
+
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: multiply;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: normal;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('multiply', "300", "300")}}</p>
- </dd>
- <dt><code>screen</code></dt>
- <dd>
- <p>La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.</p>
+<p>{{ EmbedLiveSample('normal', "300", "350") }}</p>
+
+<h3 id="multiply">multiply</h3>
 
- <div class="hidden" id="screen">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: screen;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: multiply;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('screen', "300", "300")}}</p>
- </dd>
- <dt><code>overlay</code></dt>
- <dd>La couleur finale est celle décrite par <code>multiply</code> si l'arrière-plan est plus sombre ou de <code>screen</code> si elle est plus claire. On a un effet semblable à <code>hard-light</code> avec les couches interverties.
- <div class="hidden" id="overlay">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+<p>{{ EmbedLiveSample('multiply', "300", "350") }}</p>
+
+<h3 id="screen">screen</h3>
+
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: overlay;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: screen;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('overlay', "300", "300")}}</p>
- </dd>
- <dt><code>darken</code></dt>
- <dd>
- <p>La couleur finale est la couleur la plus sombre des deux couches.</p>
+<p>{{ EmbedLiveSample('screen', "300", "350") }}</p>
 
- <div class="hidden" id="darken">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+<h3 id="overlay">overlay</h3>
+
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: darken;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: overlay;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('darken', "300", "300")}}</p>
- </dd>
- <dt><code>lighten</code></dt>
- <dd>
- <p>La couleur finale est la couleur la plus claire des deux couches.</p>
+<p>{{ EmbedLiveSample('overlay', "300", "350") }}</p>
 
- <div class="hidden" id="lighten">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+<h3 id="darken">darken</h3>
+
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: lighten;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: darken;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('lighten', "300", "300")}}</p>
- </dd>
- <dt><code>color-dodge</code></dt>
- <dd>
- <p>La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.<br>
-  Un premier-plan noir n'entraînera aucun changement.</p>
+<p>{{ EmbedLiveSample('darken', "300", "350") }}</p>
 
- <div class="hidden" id="color-dodge">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+<h3 id="lighten">lighten</h3>
+
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: color-dodge;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: lighten;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('color-dodge', "300", "300")}}</p>
- </dd>
- <dt><code>color-burn</code></dt>
- <dd>
- <p>La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.</p>
+<p>{{ EmbedLiveSample('lighten', "300", "350") }}</p>
 
- <div class="hidden" id="color-burn">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+<h3 id="color-dodge">color-dodge</h3>
+
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: color-burn;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: color-dodge;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('color-burn', "300", "300")}}</p>
- </dd>
- <dt><code>hard-light</code></dt>
- <dd>
- <p>La couleur finale est le résultat de <code>multiply</code> si le premier plan est plus sombre ou de <code>screen</code> si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à <code>overlay</code> avec les deux couches interverties.</p>
+<p>{{ EmbedLiveSample('color-dodge', "300", "350") }}</p>
+
+<h3 id="color-burn">color-burn</h3>
 
- <div class="hidden" id="hard-light">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: hard-light;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: color-burn;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('hard-light', "300", "300")}}</p>
- </dd>
- <dt><code>soft-light</code></dt>
- <dd>
- <p>La couleur finale obtenue est semblable à <code>hard-light</code>, mais est plus douce<em><code>.</code></em></p>
+<p>{{ EmbedLiveSample('color-burn', "300", "350") }}</p>
+
+<h3 id="hard-light">hard-light</h3>
 
- <div class="hidden" id="soft-light">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: soft-light;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: hard-light;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('soft-light', "300", "300")}}</p>
- </dd>
- <dt><code>difference</code></dt>
- <dd>
- <p>La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.</p>
+<p>{{ EmbedLiveSample('hard-light', "300", "350") }}</p>
+
+<h3 id="soft-light">soft-light</h3>
 
- <div class="hidden" id="difference">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: difference;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: soft-light;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('difference', "300", "300")}}</p>
- </dd>
- <dt><code>exclusion</code></dt>
- <dd>
- <p>La couleur finale obtenue est semblable à <code>difference</code> avec moins de contraste. Comme pour <code>difference</code>, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.</p>
+<p>{{ EmbedLiveSample('soft-light', "300", "350") }}</p>
 
- <div class="hidden" id="exclusion">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+<h3 id="difference">difference</h3>
+
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: exclusion;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: difference;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('exclusion', "300", "300")}}</p>
- </dd>
- <dt><code>hue</code></dt>
- <dd>
- <p>La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.</p>
+<p>{{ EmbedLiveSample('difference', "300", "350") }}</p>
 
- <div class="hidden" id="hue">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+<h3 id="exclusion">exclusion</h3>
+
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: hue;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: exclusion;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('hue', "300", "300")}}</p>
- </dd>
- <dt><code>saturation</code></dt>
- <dd>
- <p>La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.</p>
+<p>{{ EmbedLiveSample('exclusion', "300", "350") }}</p>
+
+<h3 id="hue">hue</h3>
 
- <div class="hidden" id="saturation">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: saturation;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: hue;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('saturation', "300", "300")}}</p>
- </dd>
- <dt><code>color</code></dt>
- <dd>
- <p>La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.</p>
+<p>{{ EmbedLiveSample('hue', "300", "350") }}</p>
+
+<h3 id="saturation">saturation</h3>
 
- <div class="hidden" id="color">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: color;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: saturation;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('color', "300", "300")}}</p>
- </dd>
- <dt><code>luminosity</code></dt>
- <dd>
- <p>La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.</p>
+<p>{{ EmbedLiveSample('saturation', "300", "350") }}</p>
 
- <div class="hidden" id="luminosity">
- <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+<h3 id="color">color</h3>
+
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
 
  <pre class="brush: css">#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: luminosity;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: color;
 }</pre>
- </div>
 
- <p>{{EmbedLiveSample('luminosity', "300", "300")}}</p>
- </dd>
-</dl>
+<p>{{ EmbedLiveSample('color', "300", "350") }}</p>
+
+<h3 id="luminosity">luminosity</h3>
+
+ <pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),
+              url('tr.png');
+  background-blend-mode: luminosity;
+}</pre>
+
+<p>{{ EmbedLiveSample('luminosity', "300", "350") }}</p>
 
 <h2 id="L'interpolation_des_modes_de_fusion">L'interpolation des modes de fusion</h2>