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

9 files changed, 34 insertions, 80 deletions

diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html
index 36e47eb9d4..10c33af0f5 100644
--- a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html
+++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html
@@ -11,10 +11,10 @@ translation_of: Web/CSS/@media/-moz-device-pixel-ratio
 ---
 <div>{{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}}</div>
 
-<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-device-pixel-ratio</code></strong>, associée à <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.</p>
+<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caract%c3%a9ristiques_m%c3%a9dia">caractéristique média</a> <strong><code>-moz-device-pixel-ratio</code></strong>, associée à <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.</p>
 
 <div class="warning">
-<p><strong>Ne pas utiliser cette fonctionnalité ! </strong>La caractéristique <code><a href="/fr/docs/Web/CSS/@media/resolution">resolution</a></code> et l'unité <code>dppx</code> permettent d'obtenir le même mécanisme.<br>
+<p><strong>Attention :</strong> Ne pas utiliser cette fonctionnalité ! La caractéristique <code><a href="/fr/docs/Web/CSS/@media/resolution">resolution</a></code> et l'unité <code>dppx</code> permettent d'obtenir le même mécanisme.<br>
  <br>
  <code>-moz-device-pixel-ratio</code> peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et <code>-webkit-device-pixel-ratio</code> peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge <code>dppx</code>. Par exemple :</p>
 
@@ -23,10 +23,12 @@ translation_of: Web/CSS/@media/-moz-device-pixel-ratio
        (min-resolution: 2dppx),             /* La méthode standard */
        (min-resolution: 192dpi)             /* Utilisée si dppx n'est pas gérée */ </pre>
 
-<p>Voir <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">cet article du CSSWG</a> pour les bonnes pratiques quant à la compatibilité de <code>resolution</code> et <code>dppx</code>.</p>
+<p>Voir <a href="https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">cet article du CSSWG</a> pour les bonnes pratiques quant à la compatibilité de <code>resolution</code> et <code>dppx</code>.</p>
 </div>
 
-<div class="note"><strong>Note</strong> : Cette caractéristique est également implémentée par Webkit et <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 pour Windows Phone 8.1</a> sous le nom <code>-webkit-device-pixel-ratio</code>. Les versions préfixées pour les seuils minimal / maximal sont intitulées <code>min--moz-device-pixel-ratio</code> et <code>max--moz-device-pixel-ratio</code> sous Gecko, tandis que sous Webkit, elles sont intitulées  <code>-webkit-min-device-pixel-ratio</code> et <code>-webkit-max-device-pixel-ratio</code>.</div>
+<div class="note">
+  <p><strong>Note :</strong> Cette caractéristique est également implémentée par Webkit et <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 pour Windows Phone 8.1</a> sous le nom <code>-webkit-device-pixel-ratio</code>. Les versions préfixées pour les seuils minimal / maximal sont intitulées <code>min--moz-device-pixel-ratio</code> et <code>max--moz-device-pixel-ratio</code> sous Gecko, tandis que sous Webkit, elles sont intitulées  <code>-webkit-min-device-pixel-ratio</code> et <code>-webkit-max-device-pixel-ratio</code>.</p>
+</div>
 
 <h2 id="Syntaxe">Syntaxe</h2>
 
diff --git a/files/fr/web/css/@media/-ms-high-contrast/index.html b/files/fr/web/css/@media/-ms-high-contrast/index.html
index aca491ee04..814c43f592 100644
--- a/files/fr/web/css/@media/-ms-high-contrast/index.html
+++ b/files/fr/web/css/@media/-ms-high-contrast/index.html
@@ -12,7 +12,7 @@ original_slug: Web/CSS/-ms-high-contrast
 ---
 <div>{{CSSRef}}{{Non-standard_header}}</div>
 
-<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <code><strong>-ms-high-contrast</strong></code>, relative à la règle @ <code><a href="/fr/docs/Web/CSS/@media">@media</a></code>, est une <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">extension Microsoft </a>qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.</p>
+<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#cibler_des_caract%c3%a9ristiques_m%c3%a9dia">caractéristique média</a> <code><strong>-ms-high-contrast</strong></code>, relative à la règle @ <code><a href="/fr/docs/Web/CSS/@media">@media</a></code>, est une <a href="/en-US/docs/Web/CSS/Microsoft_extensions">extension Microsoft </a>qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.</p>
 
 <p>Cette caractéristique média s'applique aux média de type matriciel (<em>bitmap</em>). Elle ne gère pas les préfixes <code>min</code> et <code>max</code>.</p>
 
@@ -59,7 +59,7 @@ original_slug: Web/CSS/-ms-high-contrast
 }
 </pre>
 
-<h2 id="Specification" name="Specification">Spécifications</h2>
+<h2 id="Specification">Spécifications</h2>
 
 <p>Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.</p>
 
diff --git a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html
index 451c83f18d..3d96ba5464 100644
--- a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html
+++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html
@@ -12,10 +12,10 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
 
 <p><strong><code>-webkit-device-pixel-ratio</code></strong> est une caractéristique média non-standard, alternative à la caractéristique média standard {{cssxref("@media/resolution","resolution")}}.</p>
 
-<p>Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">un pixel CSS (<code>px</code>)</a>. Bien que la valeur soit de type {{cssxref("&lt;number&gt;")}}, sans unité donc, l'unité implicite est <a href="/fr/docs/Web/CSS/resolution#Unités"><code>dppx</code></a>.</p>
+<p>Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter <a href="/fr/docs/Web/CSS/length#unités_de_longueur_absolues">un pixel CSS (<code>px</code>)</a>. Bien que la valeur soit de type {{cssxref("&lt;number&gt;")}}, sans unité donc, l'unité implicite est <a href="/fr/docs/Web/CSS/resolution#unités"><code>dppx</code></a>.</p>
 
 <div class="warning">
-<p><strong>Attention !</strong> Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.</p>
+<p><strong>Attention :</strong> Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.</p>
 </div>
 
 <h2 id="Syntaxe">Syntaxe</h2>
@@ -26,7 +26,7 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
 
 <dl>
  <dt>{{cssxref("&lt;number&gt;")}}</dt>
- <dd>Le nombre de pixels physiques pour chaque pixel (<code><a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">px</a></code>) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est <code><a href="/fr/docs/Web/CSS/resolution#dppx">dppx</a></code>.</dd>
+ <dd>Le nombre de pixels physiques pour chaque pixel (<code><a href="/fr/docs/Web/CSS/length#unités_de_longueur_absolues">px</a></code>) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est <code><a href="/fr/docs/Web/CSS/resolution#dppx">dppx</a></code>.</dd>
 </dl>
 
 <h2 id="Implémentation">Implémentation</h2>
@@ -93,8 +93,7 @@ translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
    <td>Définition initiale dans un standard.</td>
   </tr>
   <tr>
-   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br>
-    <small lang="en-US">'media query extensions' in that document.</small></a></td>
+   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference 'media query extensions'.</a></td>
    <td>Documentation non-officielle, non-standard.</td>
    <td>Documentation initiale.</td>
   </tr>
diff --git a/files/fr/web/css/@media/-webkit-transform-3d/index.html b/files/fr/web/css/@media/-webkit-transform-3d/index.html
index 35c5545966..887649670d 100644
--- a/files/fr/web/css/@media/-webkit-transform-3d/index.html
+++ b/files/fr/web/css/@media/-webkit-transform-3d/index.html
@@ -47,8 +47,7 @@ translation_of: Web/CSS/@media/-webkit-transform-3d
    <td>Définition initiale dans un standard.</td>
   </tr>
   <tr>
-   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br>
-    <small lang="en-US">'media query extensions' in that document.</small></a></td>
+   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference media query extensions in that document.</a></td>
    <td>Documentation non-officielle, non-standard.</td>
    <td>Documentation initiale.</td>
   </tr>
diff --git a/files/fr/web/css/@media/aspect-ratio/index.html b/files/fr/web/css/@media/aspect-ratio/index.html
index 14bdf4689b..0999d4619e 100644
--- a/files/fr/web/css/@media/aspect-ratio/index.html
+++ b/files/fr/web/css/@media/aspect-ratio/index.html
@@ -17,68 +17,25 @@ translation_of: Web/CSS/@media/aspect-ratio
 
 <h2 id="Exemples">Exemples</h2>
 
-<div class="note">
-<p><strong>Note :</strong> L'exemple suivant est contenu dans un élément {{HTMLElement("iframe")}} et crée donc sa propre zone d'affichage (<em>viewport</em>), vous pouvez redimensionner l'<code>iframe</code> afin d'observer l'effet d'<code>aspect-ratio</code>.</p>
-</div>
+<h3 id="exemples_de_valeurs_pour_aspect-ratio">Exemples de valeurs pour aspect-ratio</h3>
 
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;label id="wf" for="w"&gt;width:165&lt;/label&gt;
-&lt;input id="w" name="w" type="range" min="100" max="250" step="5" value="165"&gt;
-&lt;label id="hf" for="w"&gt;height:165&lt;/label&gt;
-&lt;input id="h" name="h" type="range" min="100" max="250" step="5" value="165"&gt;
-
-&lt;iframe id="outer" src="data:text/html,
-  &lt;style&gt;
-    @media (min-aspect-ratio: 8/5) {
-      div {
-        background: %239af;
-      }
-    }
-    @media (max-aspect-ratio: 3/2) {
-      div {
-        background: %239ff;
-      }
-    }
-    @media (aspect-ratio: 1/1) {
-      div {
-        background: %23f9a;
-      }
-    }
-  &lt;/style&gt;
-  &lt;div id='inner'&gt;
-    Vous pouvez redimensionner le viewport en largeur
-    et en hauteur pour voir l'effet.
-  &lt;/div&gt;
-"&gt;
-
-&lt;/iframe&gt;
+<pre class="brush: css">
+aspect-ratio: 1 / 1;
+aspect-ratio: 16 / 9;
 </pre>
 
-<h3 id="CSS">CSS</h3>
+<h2 id="Correspondance_entre_width_et_height_et_aspect-ratio">Correspondance entre width et height et aspect-ratio</h2>
 
-<pre class="brush: css">iframe{
-  display:block;
-}</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
+<p>Les navigateurs ont ajouté une propriété <code>aspect-ratio</code> interne qui s'applique aux <a href="/fr/docs/Web/CSS/Replaced_element">éléments remplacés</a> et aux autres éléments associés qui acceptent des attributs <code>width</code> et <code>height</code>. Celle-ci apparaît dans la feuille de style interne de l'agent utilisateur.</p>
 
-<pre class="brush: js">outer.style.width=outer.style.height="165px"
+<p>Pour Firefox, la feuille de style interne ressemble à :</p>
 
-w.onchange=w.oninput=function(){
-  outer.style.width=w.value+"px"
-  wf.textContent="width:"+w.value
-}
-h.onchange=h.oninput=function(){
-  outer.style.height=h.value+"px"
-  hf.textContent="height:"+h.value
+<pre class="brush: css">
+img, input[type="image"], video, embed, iframe, marquee, object, table {
+  aspect-ratio: attr(width) / attr(height);
 }</pre>
 
-<h3 id="Résultat">Résultat</h3>
-
-<div style="overflow: auto;">
-<p>{{EmbedLiveSample('Exemples')}}</p>
-</div>
+<p>Pour en savoir plus, vous pouvez consulter <a href="https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/">Définir la hauteur et largeur des images redevient important (en anglais)</a>.</p>
 
 <h2 id="Spécifications">Spécifications</h2>
 
diff --git a/files/fr/web/css/@media/forced-colors/index.html b/files/fr/web/css/@media/forced-colors/index.html
index d347ae71b9..ab75ac487c 100644
--- a/files/fr/web/css/@media/forced-colors/index.html
+++ b/files/fr/web/css/@media/forced-colors/index.html
@@ -11,7 +11,7 @@ translation_of: Web/CSS/@media/forced-colors
 
 <p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>forced-colors</code></strong> est utilisée afin de détecter si l'utilisateur a choisi une palette de couleur restreinte via le navigateur ou l'agent utilisateur.</p>
 
-<div class="blockIndicator note">
+<div class="note">
 <p><strong>Note :</strong> Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur</p>
 </div>
 
diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.html b/files/fr/web/css/@media/prefers-color-scheme/index.html
index a240eb36c8..4476aacdf7 100644
--- a/files/fr/web/css/@media/prefers-color-scheme/index.html
+++ b/files/fr/web/css/@media/prefers-color-scheme/index.html
@@ -10,8 +10,8 @@ translation_of: Web/CSS/@media/prefers-color-scheme
 ---
 <div>{{CSSRef}}</div>
 
-<div class="blockIndicator note">
-<p>Si vous avez modifié <code>privacy.resistFingerprinting</code> à <strong>vrai</strong>, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à <code>light</code>.<br>
+<div class="note">
+<p><strong>Note :</strong> Si vous avez modifié <code>privacy.resistFingerprinting</code> à <strong>vrai</strong>, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à <code>light</code>.<br>
  Sinon, vous pouvez créer le paramètre numérique <code>ui.systemUsesDarkTheme</code> pour redéfinier le comportement par défaut et retourner <code>light</code> (valeur : 0), <code>dark</code> (valeur : 1), or <code>no-preference</code> (valeur : 2). (Firefox retournera<code>light</code> si une autre valeur est utilisée.)</p>
 </div>
 
@@ -30,7 +30,7 @@ translation_of: Web/CSS/@media/prefers-color-scheme
 
 <h3 id="CSS">CSS</h3>
 
-<pre class="brush: css notranslate">.day   { background: #eee; color: black; }
+<pre class="brush: css">.day   { background: #eee; color: black; }
 .night { background: #333; color: white; }
 
 @media (prefers-color-scheme: dark) {
@@ -54,7 +54,7 @@ translation_of: Web/CSS/@media/prefers-color-scheme
 
 <h3 id="HTML">HTML</h3>
 
-<pre class="brush: html notranslate">&lt;div class="day"&gt;Jour (initial)&lt;/div&gt;
+<pre class="brush: html">&lt;div class="day"&gt;Jour (initial)&lt;/div&gt;
 &lt;div class="day light-scheme"&gt;Jour (modifié si utilisation d'un thème clair)&lt;/div&gt;
 &lt;div class="day dark-scheme"&gt;Jour (modifié si utilisation d'un thème sombre)&lt;/div&gt; &lt;br&gt;
 
diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.html b/files/fr/web/css/@media/prefers-reduced-motion/index.html
index 9f161ee4fd..daf259477f 100644
--- a/files/fr/web/css/@media/prefers-reduced-motion/index.html
+++ b/files/fr/web/css/@media/prefers-reduced-motion/index.html
@@ -12,11 +12,10 @@ translation_of: Web/CSS/@media/prefers-reduced-motion
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">requêtes média</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>prefers-reduced-motion</code></strong> détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.</p>
+<p>La <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_features">requêtes média</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>prefers-reduced-motion</code></strong> détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.</p>
 
-<div class="notecard warning">
-  <p><b>Important :</b><p>
-  <p>Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.</p>
+<div class="warning">
+  <p><strong>Attention :</strong> Un exemple intégré au bas de cette page comporte un mouvement d'échelle qui peut poser problème à certains lecteurs. Les lecteurs souffrant de troubles du mouvement vestibulaire peuvent souhaiter activer la fonction de réduction du mouvement sur leur appareil avant de visionner l'animation.</p>
 </div>
 
 <h2 id="syntax">Syntaxe</h2>
@@ -63,8 +62,7 @@ translation_of: Web/CSS/@media/prefers-reduced-motion
 }
 </pre>
 
-<div class="hidden">
-<pre class="brush: css">.animation {
+<pre class="brush: css hidden">.animation {
   background-color: rebeccapurple;
   color: #fff;
   font: 1.2em Helvetica, arial, sans-serif;
@@ -106,7 +104,6 @@ translation_of: Web/CSS/@media/prefers-reduced-motion
   }
 }
 </pre>
-</div>
 
 <h3 id="result">Résultat</h3>
 
diff --git a/files/fr/web/css/@media/shape/index.html b/files/fr/web/css/@media/shape/index.html
index c065872f83..0f07c013b2 100644
--- a/files/fr/web/css/@media/shape/index.html
+++ b/files/fr/web/css/@media/shape/index.html
@@ -26,7 +26,7 @@ translation_of: Web/CSS/@media/shape
 
 <h2 id="Exemples">Exemples</h2>
 
-<div class="blockIndicator note">
+<div class="note">
 <p><strong>Note :</strong> Aucun navigateur n'implémente actuellement cette fonctionnalité.</p>
 </div>