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, 4 insertions, 10 deletions

diff --git a/files/fr/web/css/font-style/index.html b/files/fr/web/css/font-style/index.html
index be9eccddf5..69952fea4f 100644
--- a/files/fr/web/css/font-style/index.html
+++ b/files/fr/web/css/font-style/index.html
@@ -13,8 +13,6 @@ translation_of: Web/CSS/font-style
 
 <div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div>
 
-<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
-
 <p>La forme <strong>italique</strong> est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme <strong>oblique</strong> quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absente (le moteur penche alors les glyphes de la forme normale), pour plus d'informations sur l'activation de cette synthèse, voir la propriété {{cssxref("font-synthesis")}}.</p>
 
 <h2 id="Syntaxe">Syntaxe</h2>
@@ -60,11 +58,10 @@ font-style: unset;
 
 <p>Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe <em>CSS Fonts Level 4</em> qui permet d'utiliser <code>font-style: oblique</code> suivi d'un angle.</p>
 
-<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>
+<p>{{EmbedLiveSample("Variable_fonts", 1200, 180, "", "", "example-outcome-frame")}}</p>
 
 <h4 id="HTML">HTML</h4>
 
-<div id="variable-font-example">
 <pre class="brush: html">&lt;header&gt;
     &lt;input type="range" id="slant" name="slant" min="-90" max="90" /&gt;
     &lt;label for="slant"&gt;Slant&lt;/label&gt;
@@ -103,8 +100,7 @@ label {
 
 </pre>
 
-<div class="hidden">
-<pre class="brush: css">html, body {
+<pre class="brush: css hidden">html, body {
   max-height: 100vh;
   max-width: 100vw;
   overflow: hidden;
@@ -128,7 +124,6 @@ header {
   margin-bottom: 0;
 }
 </pre>
-</div>
 
 <h4 id="JavaScript">JavaScript</h4>
 
@@ -146,7 +141,6 @@ slantInput.addEventListener('input', update);
 
 update();
 </pre>
-</div>
 
 <h2 id="Exemples">Exemples</h2>
 
@@ -178,7 +172,7 @@ update();
 <div class="note">
 <p><strong>Note :</strong> Toutes les polices ne disposent pas nécessairement de formes pour <code>oblique</code> et <code>italic</code>, si ces formes sont absentes, le moteur simulera la forme absente à partir de celle qui est disponible. Voici un exemple du rendu d'une police qui dispose des différentes formes :</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/12049/Screen%20Shot%202015-12-05%20at%2008.41.03.png" style="height: 135px; width: 466px;"></p>
+<p><img alt="" src="screen_shot_2015-12-05_at_08.41.03.png"></p>
 </div>
 
 <h2 id="Accessibilité">Accessibilité</h2>
@@ -186,7 +180,7 @@ update();
 <p>L'utilisation de grandes portions de textes avec <code>font-style: italic</code> peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.</p>
 
 <ul>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
  <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation"><em>Understanding Success Criterion 1.4.8  | W3C Understanding WCAG 2.0 </em>(en anglais)</a></li>
 </ul>