Fixes #2842 - Fixing EmbedLiveSample errors for fr docs (#2851)

* Fixes #2842 for CSS pages

* Fixes #2842 for Web API pages

* Fixes #2842 for other sections

* Fix EmbedLiveSample for moved CSS page

* Fixes #2842 for conflicting / orphaned docs

1 files changed, 26 insertions, 25 deletions

diff --git a/files/fr/glossary/css_selector/index.html b/files/fr/glossary/css_selector/index.html
index ed038c9715..b5cd5760da 100644
--- a/files/fr/glossary/css_selector/index.html
+++ b/files/fr/glossary/css_selector/index.html
@@ -13,60 +13,61 @@ original_slug: Glossaire/Sélecteur_CSS
 ---
 <p>Un <strong>sélecteur CSS </strong> est la partie de la règle CSS qui désigne les éléments d'un document concernés par la règle. Les éléments correspondants auront le style spécifié par la règle qui leur est appliqué.</p>
 
+<h2>Exemple</h2>
 <p>Considérez ce code CSS :</p>
 
-<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token">p </span><span class="punctuation token">{</span>
-  <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
+<pre class="brush: css">p {
+  color: green;
+}
 
-<span class="selector token">div<span class="class token">.warning</span> </span><span class="punctuation token">{</span>
-  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">100%</span><span class="punctuation token">;</span>
-  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">2</span>px solid yellow<span class="punctuation token">;</span>
-  <span class="property token">color</span><span class="punctuation token">:</span> white<span class="punctuation token">;</span>
-  <span class="property token">background-color</span><span class="punctuation token">:</span> darkred<span class="punctuation token">;</span>
-  <span class="property token">padding</span><span class="punctuation token">:</span>  <span class="number token">0.8</span>em <span class="number token">0.8</span>em <span class="number token">0.6</span>em<span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
+div.warning {
+  width: 100%;
+  border: 2px solid yellow;
+  color: white;
+  background-color: darkred;
+  padding:  0.8em 0.8em 0.6em;
+}
 
-<span class="selector token"><span class="id token">#customized</span> </span><span class="punctuation token">{</span>
-  <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">16</span>px Lucida Grande, Arial, Helvetica, sans-serif<span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+#customized {
+  font: 16px Lucida Grande, Arial, Helvetica, sans-serif;
+}</pre>
 
 <p>Les sélecteurs sont ici <code>"p"</code> (qui applique la couleur verte au texte de tout élément {{HTMLElement ("p")}}), <code>"div.warning"</code> (qui fait que tout élément {{HTMLElement ("div")}} appartenant à la {{Glossary ("Class", "classe CSS")}} <code>"warning"</code> ressemble à une boîte d'avertissement) et <code>"#customized"</code>, qui définit la police de base de l'élément avec l'ID <code>"customized"</code> à 16 -pixel Lucida Grande ou l'une des polices de secours.</p>
 
 <p>Nous pouvons ensuite appliquer ce CSS à du HTML, tel que :</p>
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is happy text.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<pre class="brush: html">&lt;p&gt;This is happy text.&lt;/p&gt;
 
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>warning<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+&lt;div class="warning"&gt;
   Be careful! There are wizards present, and they are quick to anger!
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+&lt;/div&gt;
 
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>customized<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is happy text.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+&lt;div id="customized"&gt;
+  &lt;p&gt;This is happy text.&lt;/p&gt;
 
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>warning<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  &lt;div class="warning"&gt;
     Be careful! There are wizards present, and they are quick to anger!
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
 
 <p>Le contenu de la page résultant ressemble à ceci:</p>
 
-<p>{{EmbedLiveSample("glossary-selector-details", 640, 210)}}</p>
+<p>{{EmbedLiveSample("Exemple", 640, 210)}}</p>
 
 <h2 id="Pour_approfondir">Pour approfondir</h2>
 
 <h3 id="Culture_générale">Culture générale</h3>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">Apprendre sur les sélecteurs CSS</a> dans notre introduction à CSS.</li>
+ <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">Apprendre sur les sélecteurs CSS</a> dans notre introduction à CSS.</li>
  <li>Sélecteurs de base
   <ul>
-   <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_de_type">Sélecteurs de type</a><code> elementname</code></li>
+   <li><a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_de_type">Sélecteurs de type</a><code> elementname</code></li>
    <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Sélecteurs de classe</a> <code>.classname</code></li>
    <li><a href="/fr/docs/Web/CSS/Reference/Sélecteurs_d'ID">Sélecteurs d'ID</a> <code>#idname</code></li>
    <li><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Sélecteurs universels</a><code> * ns|* *|*</code></li>
    <li><a href="/fr/docs/Web/CSS/Reference/Sélecteurs_d'attribut">Sélecteurs d'attribut</a><code> [attr=value]</code></li>
-   <li><code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes">Sélecteurs d'état</a></code> <code>a:active, a:visited</code></li>
+   <li><code><a href="/fr/docs/Web/CSS/Pseudo-classes">Sélecteurs d'état</a></code> <code>a:active, a:visited</code></li>
   </ul>
  </li>
  <li>Combinaisons