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

5 files changed, 15 insertions, 19 deletions

diff --git a/files/fr/web/css/css_shapes/basic_shapes/index.html b/files/fr/web/css/css_shapes/basic_shapes/index.html
index eed2d48370..46e4ebee5a 100644
--- a/files/fr/web/css/css_shapes/basic_shapes/index.html
+++ b/files/fr/web/css/css_shapes/basic_shapes/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">Les formes CSS peuvent être définies grâce au type {{cssxref("&lt;basic-shape&gt;")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.</p>
+<p>Les formes CSS peuvent être définies grâce au type {{cssxref("&lt;basic-shape&gt;")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.</p>
 
 <p>Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :</p>
 
@@ -27,11 +27,11 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples
 
 <h2 id="La_boîte_de_référence">La boîte de référence</h2>
 
-<p>La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte <a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">dans le guide sur la création de formes à partir des boîtes</a> où nous avons directement utilisé la boîte de référence afin de créer une forme.</p>
+<p>La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte <a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values">dans le guide sur la création de formes à partir des boîtes</a> où nous avons directement utilisé la boîte de référence afin de créer une forme.</p>
 
 <p>L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec <code>shape-outside: circle(50%)</code>, l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du <a href="/fr/docs/Web/CSS/Mod%C3%A8le_de_bo%C3%AEte_CSS">modèle de boîtes</a>.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15904/shapes-reference-box.png" style="height: 840px; width: 1536px;"></p>
+<p><img alt="" src="shapes-reference-box.png"></p>
 
 <p>La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .</p>
 
@@ -115,13 +115,13 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples
 
 <p>Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.</p>
 
-<pre class="brush: css"><code>img {
+<pre class="brush: css">img {
   float: left;
   shape-outside: circle(50% at 60%);
 }
-</code></pre>
+</pre>
 
-<p><img alt="The circle shape is clipped by the margin box" src="https://mdn.mozillademos.org/files/15903/shapes-circle-clipped.png" style="height: 602px; width: 1536px;"></p>
+<p><img alt="The circle shape is clipped by the margin box" src="shapes-circle-clipped.png"></p>
 
 <h2 id="ellipse()"><code>ellipse()</code></h2>
 
@@ -145,6 +145,6 @@ original_slug: Web/CSS/CSS_Shapes/Formes_simples
 
 <p>L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.</p>
 
-<p><img alt="The polygon basic shape, highlighted with the Shapes Inspector." src="https://mdn.mozillademos.org/files/15902/shapes-polygon.png" style="height: 540px; width: 1524px;"></p>
+<p><img alt="The polygon basic shape, highlighted with the Shapes Inspector." src="shapes-polygon.png"></p>
 
-<p>Une autre ressource qui peut s'avérer utile sur ces sujets est <a href="http://bennettfeely.com/clippy/">Clippy</a> : cet outil permet de créer des formes pour <code>clip-path</code>. Or, les formes utilisées pour <code>clip-path</code> sont les mêmes que pour les formes simples.</p>
+<p>Une autre ressource qui peut s'avérer utile sur ces sujets est <a href="https://bennettfeely.com/clippy/">Clippy</a> : cet outil permet de créer des formes pour <code>clip-path</code>. Or, les formes utilisées pour <code>clip-path</code> sont les mêmes que pour les formes simples.</p>
diff --git a/files/fr/web/css/css_shapes/from_box_values/index.html b/files/fr/web/css/css_shapes/from_box_values/index.html
index ec57c04537..5ba429d0e6 100644
--- a/files/fr/web/css/css_shapes/from_box_values/index.html
+++ b/files/fr/web/css/css_shapes/from_box_values/index.html
@@ -12,7 +12,7 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.</p>
+<p>Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.</p>
 
 <p>Les <a href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">valeurs de boîte</a> qui sont autorisées pour les formes sont :</p>
 
@@ -29,7 +29,7 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes
 
 <p>Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (<em>content</em>), du remplissage (<em>padding</em>), une bordure (<em>border</em>) ainsi qu'une marge (<em>margin</em>).</p>
 
-<p><img alt="The Box Model consists of the margin, border, padding and content boxes." src="https://mdn.mozillademos.org/files/15845/box-model.png" style="height: 267px; width: 447px;"></p>
+<p><img alt="The Box Model consists of the margin, border, padding and content boxes." src="box-model.png"></p>
 
 <p>En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.</p>
 
@@ -62,7 +62,7 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes
 <p>{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}</p>
 
 <div class="note">
-<p><strong>Note :</strong> Pour en savoir plus sur le modèle de boîte CSS, voir <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">cet article</a>.</p>
+<p><strong>Note :</strong> Pour en savoir plus sur le modèle de boîte CSS, voir <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">cet article</a>.</p>
 </div>
 
 <h2 id="Quand_utiliser_les_valeurs_de_boîte">Quand utiliser les valeurs de boîte</h2>
@@ -73,4 +73,4 @@ original_slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes
 
 <p>{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}</p>
 
-<p>Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de <a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">type <code>&lt;basic-shape&gt;</code> (les formes simples)</a> ou <a href="/fr/docs/Web/CSS/CSS_Shapes/Générer_formes_images">définir une forme à partir d'une image</a>, tel que nous le verrons dans les autres guides de cette section.</p>
+<p>Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de <a href="/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes">type <code>&lt;basic-shape&gt;</code> (les formes simples)</a> ou <a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">définir une forme à partir d'une image</a>, tel que nous le verrons dans les autres guides de cette section.</p>
diff --git a/files/fr/web/css/css_shapes/index.html b/files/fr/web/css/css_shapes/index.html
index 485385aa10..585e96ac67 100644
--- a/files/fr/web/css/css_shapes/index.html
+++ b/files/fr/web/css/css_shapes/index.html
@@ -12,7 +12,7 @@ translation_of: Web/CSS/CSS_Shapes
 
 <p><em><strong>CSS Shapes</strong></em> est un module de spécification CSS qui décrit les formes géométriques. <a href="https://drafts.csswg.org/css-shapes/">Selon le niveau 1 de cette spécification</a>, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.</p>
 
-<h2 id="Basic_Example" name="Basic_Example">Exemple simple</h2>
+<h2 id="exemple_simple">Exemple simple</h2>
 
 <p>Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété <code>shape-outside</code> qui lui est appliquée vaut <code>circle(50%)</code>. Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.</p>
 
@@ -22,21 +22,17 @@ translation_of: Web/CSS/CSS_Shapes
 
 <h3 id="Propriétés">Propriétés</h3>
 
-<div class="index">
 <ul>
  <li>{{cssxref("shape-image-threshold")}}</li>
  <li>{{cssxref("shape-margin")}}</li>
  <li>{{cssxref("shape-outside")}}</li>
 </ul>
-</div>
 
 <h3 id="Types_de_donnée">Types de donnée</h3>
 
-<div class="index">
 <ul>
  <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
 </ul>
-</div>
 
 <h2 id="Guides">Guides</h2>
 
diff --git a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html
index 4f7abd917f..ad57ea506d 100644
--- a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html
+++ b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html
@@ -11,7 +11,7 @@ original_slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">La spécification <a href="https://www.w3.org/TR/css-shapes/">CSS Shapes Level 1</a> définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.</p>
+<p>La spécification <a href="https://www.w3.org/TR/css-shapes/">CSS Shapes Level 1</a> définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.</p>
 
 <p>Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.</p>
 
diff --git a/files/fr/web/css/css_shapes/shapes_from_images/index.html b/files/fr/web/css/css_shapes/shapes_from_images/index.html
index 58a1729e2c..bbb1f822f7 100644
--- a/files/fr/web/css/css_shapes/shapes_from_images/index.html
+++ b/files/fr/web/css/css_shapes/shapes_from_images/index.html
@@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Shapes/Générer_formes_images
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.</p>
+<p>Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.</p>
 
 <h2 id="Générer_une_forme_simple_avec_une_image">Générer une forme simple avec une image</h2>