fixes fr #1440 (#1448)

* fixes #1440 for fr

* UPDT: Update Backgrounds_and_borders

* UPDT: Update The_web_and_web_standards

* UPDT: Update First_steps/Arrays

* UPDT: Update First_steps/Math

* UPDT: Update Silly_story_generator

* UPDT: Update Django/development_environment

* UPDT: Update Client-side_JavaScript_frameworks

* UPDT: Update Command_line

* UPDT: Update API/tabs

* RMV: Removing tags

* UPDT: Cleanup html of Add-ons/WebExtensions

* UPDT: Fix flaws on WebExtensions/Native_messaging

* FIX: Fix flaws on Accessibility_inspector/Simulation

* UPDT: Html cleanup on Color_contrast

* UPDT: Mega html cleanup for Document_Object_Model/Introduction

* FIX: Fix flaws for API/Element

* UPDT: Update BCD

* FIX: Wrong link lang

* UPDT: Fix flaws/links

* FIX: Img flaws and link lang

* FIX: links error and html

* UPDT: Links and cleanup html

* FIX: link lang

* FIX: link lang

* FIX: broken example

* FIX: fix broken example and html

Co-authored-by: tristantheb <tristantheb@users.noreply.github.com>

1 files changed, 86 insertions, 89 deletions

diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
index 2fedb26439..27b6617080 100644
--- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
+++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -12,7 +12,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
  <tbody>
   <tr>
    <th scope="row">Prérequis:</th>
-   <td>Compétences informatique basiques , <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">logicels de base installés</a>, connaissance simple en <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td>
+   <td>Compétences informatique basiques , <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logicels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td>
   </tr>
   <tr>
    <th scope="row">Objectif:</th>
@@ -21,25 +21,24 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
  </tbody>
 </table>
 
-<h2 id="Mettre_en_forme_larrière-plan_avec_CSS">Mettre en forme l'arrière-plan avec CSS</h2>
+<h2 id="Mettre_en_forme_larrière-plan_avec_CSS">Mettre en forme l'arrière-plan avec CSS</h2>
 
-<p>La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p>
+<p>La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
   url(big-star.png) center no-repeat, rebeccapurple;
-} </code>
-</pre>
+}</pre>
 
-<p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p>
+<p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p>
 
 <h3 id="Couleur_de_fond">Couleur de fond</h3>
 
-<p>La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p>
+<p>La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value">&lt;color&gt;</a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p>
 
-<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.</p>
+<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.</p>
 
-<p><strong>Expérimentez avec ce code, en faisant varier les valeurs  <a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a> dans les différentes déclarations.</strong></p>
+<p><strong>Expérimentez avec ce code, en faisant varier les valeurs <a href="/fr/docs/Web/CSS/color_value">&lt;color&gt;</a> dans les différentes déclarations.</strong></p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p>
 
@@ -47,15 +46,15 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 
 <p>La propriété {{cssxref("background-image")}} permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande, l'autre avec comme fond une petite image représentant une étoile.</p>
 
-<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p>
+<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p>
 
-<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p>
+<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p>
 
-<h4 id="Contrôler_le_background-repeat">Contrôler le background-repeat</h4>
+<h4 id="Contrôler_le_background-repeat">Contrôler le background-repeat</h4>
 
-<p>La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p>
+<p>La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p>
 
 <ul>
  <li><code>no-repeat</code> — aucune répétition de l'arrière-plan.</li>
@@ -64,106 +63,104 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
  <li><code>repeat</code> — comportement par défaut : répétition dans les deux directions.</li>
 </ul>
 
-<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à  </strong><code>no-repeat</code><strong>, une seule étoile apparaît donc. Remplacez par </strong><code>repeat-x</code><strong> et </strong><code>repeat-y</code><strong>  et observez.</strong></p>
+<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code><strong> et observez.</strong></p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p>
 
 <h4 id="Dimensionner_limage_de_fond">Dimensionner l'image de fond</h4>
 
-<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une  <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p>
+<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une  <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p>
 
 <p>On peut aussi utiliser les mots-clé :</p>
 
 <ul>
  <li><code>cover</code> — le navigateur redimensionne l'image pour que tout le fond soit couvert, en conservant le format de l'image. La plupart du temps, une partie de l'image est en dehors de la boîte.</li>
- <li><code>contain</code> — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.</li>
+ <li><code>contain</code> — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.</li>
 </ul>
 
-<p>Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.</p>
+<p>Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.</p>
 
 <p>Essayez ce qui suit :</p>
 
 <ul>
  <li>Changez les dimensions de l'arrière-plan.</li>
- <li>Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par <code>background-size: cover</code> ou <code>background-size: contain</code>.</li>
- <li>Si votre image est plus petite que la boîte, vous pouvez changer la valeur de <code>background-repeat</code> pour répéter l'image.</li>
+ <li>Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par <code>background-size: cover</code> ou <code>background-size: contain</code>.</li>
+ <li>Si votre image est plus petite que la boîte, vous pouvez changer la valeur de <code>background-repeat</code> pour répéter l'image.</li>
 </ul>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p>
 
-<h4 id="Positionner_limage_de_fond">Positionner l'image de fond</h4>
+<h4 id="Positionner_limage_de_fond">Positionner l'image de fond</h4>
 
-<p>La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p>
+<p>La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p>
 
 <div class="blockIndicator note">
-<p><strong>Note </strong>: La valeur par défaut de  <code>background-position</code> est <code>(0,0)</code>.</p>
+<p><strong>Note </strong>: La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p>
 </div>
 
-<p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p>
+<p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p>
 
-<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):</p>
+<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top center;
-} </code>
-</pre>
+}</pre>
 
-<p>Et <a href="/fr/docs/Web/CSS/length">Longueurs</a>, ou <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p>
+<p>Et <a href="/fr/docs/Web/CSS/length">Longueurs</a>, ou <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: 20px 10%;
-} </code>
-</pre>
+}</pre>
 
-<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p>
+<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p>
 
-<pre class="brush: css notranslate">.box {
+<pre class="brush: css">.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px;
 }</pre>
 
-<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite : </p>
+<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css notranslate">.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px right 10px;
-} </code></pre>
+}</pre>
 
-<p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p>
+<p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: <code>background-position</code> est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.</p>
+<div class="note">
+<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.</p>
 </div>
 
 <h3 id="Arrière-plan_dégradé">Arrière-plan dégradé</h3>
 
-<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.</p>
+<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.</p>
 
-<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/en-US/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p>
+<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p>
 
 <p>Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p>
 
-<h3 id="Images_de_fond_multiples"> Images de fond multiples</h3>
+<h3 id="Images_de_fond_multiples">Images de fond multiples</h3>
 
-<p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code> , chacune séparé par une virgule.</p>
+<p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code>, chacune séparé par une virgule.</p>
 
 <p>Quand vous faîtes cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: on peut joyeusement mélanger gradients et images de fond classiques.</p>
+<div class="note">
+<p><strong>Note :</strong> on peut joyeusement mélanger gradients et images de fond classiques.</p>
 </div>
 
-<p>Les autres propriété <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que  <code>background-image</code>:</p>
+<p>Les autres propriété <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p>
 
 <pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
 background-repeat: no-repeat, repeat-x, repeat;
@@ -185,9 +182,9 @@ background-position: 10px 20px,  top right;</pre>
  <li><code>local</code>: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the <code>scroll</code> value is rather confusing and doesn't really do what you want in many cases. The <code>local</code> value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.</li>
 </ul>
 
-<p>The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (also <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">see the source code</a> here).</p>
+<p>The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (also <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">see the source code</a> here).</p>
 
-<h3 id="Utiliser_la_propriété_raccourci_background">Utiliser la propriété raccourci background </h3>
+<h3 id="Utiliser_la_propriété_raccourci_background">Utiliser la propriété raccourci background</h3>
 
 <p>As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.</p>
 
@@ -208,7 +205,7 @@ background-position: 10px 20px,  top right;</pre>
 
 <p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessu une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p>
 
-<p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p>
+<p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p>
 
 <h2 id="Bordures">Bordures</h2>
 
@@ -216,34 +213,34 @@ background-position: 10px 20px,  top right;</pre>
 
 <p>We can set a border for all four sides of a box with {{cssxref("border")}}:</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">*.box {
   border: 1px solid black;
-} </code></pre>
+}*</pre>
 
 <p>Or we can target one edge of the box, for example:</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   border-top: 1px solid black;
-} </code></pre>
+}</pre>
 
 <p>The individual properties for these shorthands would be:</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   border-width: 1px;
   border-style: solid;
   border-color: black;
-} </code></pre>
+}</pre>
 
 <p>And for the longhands:</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: black;
-} </code></pre>
+}</pre>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: These top, right, bottom, and left border properties also have mapped <em>logical</em> properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers <a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">handling different text directions</a>.</p>
+<div class="note">
+<p><strong>Note :</strong> These top, right, bottom, and left border properties also have mapped <em>logical</em> properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">handling different text directions</a>.</p>
 </div>
 
 <p><strong>There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.</strong></p>
@@ -252,19 +249,19 @@ background-position: 10px 20px,  top right;</pre>
 
 <h3 id="Coins_arrondis">Coins arrondis</h3>
 
-<p>On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}}  and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.</p>
+<p>On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}} and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.</p>
 
-<p>Par exemple, Pour donner par exemple un rayon de  10px à chacun des quatre coins :</p>
+<p>Par exemple, Pour donner par exemple un rayon de 10px à chacun des quatre coins :</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   border-radius: 10px;
-} </code></pre>
+}</pre>
 
 <p>Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   border-top-right-radius: 1em 10%;
-} </code></pre>
+}</pre>
 
 <p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jettez un œil à la page de documentation de {{cssxref("border-radius")}}, vous y trouverez la syntaxe pour les différentes options.</p>
 
@@ -272,23 +269,23 @@ background-position: 10px 20px,  top right;</pre>
 
 <h2 id="Jouer_avec_les_arrière-plans_et_les_bordures">Jouer avec les arrière-plans et les bordures</h2>
 
-<p>Testons vos nouvelles connaissances : en partant  de l'exemple fourni plus bas :</p>
+<p>Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :</p>
 
 <ol>
- <li>Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.</li>
- <li>Ajouter une image de fond (utiliser l'URL <code>balloons.jpg</code>) à redimensionner pour qu'elle recouvre la boîte.</li>
- <li>Donnez au <code>&lt;h2&gt;</code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li>
+ <li>Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.</li>
+ <li>Ajouter une image de fond (utiliser l'URL <code>balloons.jpg</code>) à redimensionner pour qu'elle recouvre la boîte.</li>
+ <li>Donnez au <code>&lt;h2&gt;</code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li>
 </ol>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p>
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p>
 </div>
 
 <h2 id="Résumé">Résumé</h2>
 
-<p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou  une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p>
+<p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou  une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p>
 
 <p>Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ?</p>
 
@@ -297,23 +294,23 @@ background-position: 10px 20px,  top right;</pre>
 <h2 id="Dans_ce_cours">Dans ce cours</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
 </ol>