convert content to md

1 files changed, 158 insertions, 220 deletions

diff --git a/files/fr/web/css/font-weight/index.md b/files/fr/web/css/font-weight/index.md
index f31a368277..1ce9243e2f 100644
--- a/files/fr/web/css/font-weight/index.md
+++ b/files/fr/web/css/font-weight/index.md
@@ -7,15 +7,16 @@ tags:
   - Reference
 translation_of: Web/CSS/font-weight
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>La propriété CSS <strong><code>font-weight</code></strong> permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. {{cssxref("font-family")}}). Certaines fontes n'existent qu'avec les niveaux de graisses <code>normal</code> et <code>bold</code>.</p>
+La propriété CSS **`font-weight`** permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. {{cssxref("font-family")}}). Certaines fontes n'existent qu'avec les niveaux de graisses `normal` et `bold`.
 
-<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div>
+{{EmbedInteractiveExample("pages/css/font-weight.html")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 font-weight: normal;
 font-weight: bold;
 
@@ -43,182 +44,145 @@ font-weight: 1000;
 font-weight: inherit;
 font-weight: initial;
 font-weight: unset;
-</pre>
+```
 
-<p>La propriété <code>font-weight</code> peut être définie grâce à l'une des valeurs suivantes.</p>
+La propriété `font-weight` peut être définie grâce à l'une des valeurs suivantes.
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><code>normal</code></dt>
- <dd>Le niveau de graisse normal pour la fonte. Équivalent à la valeur <code>400</code>.</dd>
- <dt><code>bold</code></dt>
- <dd>Le texte est en gras. Équivalent à la valeur <code>700</code>.</dd>
- <dt><code>lighter</code></dt>
- <dd>On diminue la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte paraît plus fin.</dd>
- <dt><code>bolder</code></dt>
- <dd>On augmente la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte est plus gras.</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Une valeur numérique (type {{cssxref("&lt;number&gt;")}}) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec <code>normal</code> et <code>bold</code>.</dd>
-</dl>
+- `normal`
+  - : Le niveau de graisse normal pour la fonte. Équivalent à la valeur `400`.
+- `bold`
+  - : Le texte est en gras. Équivalent à la valeur `700`.
+- `lighter`
+  - : On diminue la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte paraît plus fin.
+- `bolder`
+  - : On augmente la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte est plus gras.
+- `<number>`
+  - : Une valeur numérique (type {{cssxref("&lt;number&gt;")}}) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec `normal` et `bold`.
 
-<p>Pour d'anciennes versions de la spécification, <code>font-weight</code> n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices non-variables ne peuvent utiliser que ces valeurs (les valeurs plus fines seront converties cf. ci-après).</p>
+Pour d'anciennes versions de la spécification, `font-weight` n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices non-variables ne peuvent utiliser que ces valeurs (les valeurs plus fines seront converties cf. ci-après).
 
-<p>Le module de spécification <em>CSS Fonts</em> de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleur précision quant aux tailles utilisables. On notera que cette fonctionnalité n'est pas encore prise en charge (à date de juin 2018) par tous les navigateurs.</p>
+Le module de spécification _CSS Fonts_ de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleur précision quant aux tailles utilisables. On notera que cette fonctionnalité n'est pas encore prise en charge (à date de juin 2018) par tous les navigateurs.
 
-<h3 id="Conversion_des_valeurs">Conversion des valeurs</h3>
+### Conversion des valeurs
 
-<p>Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée :</p>
+Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée :
 
-<ul>
- <li>Si un niveau supérieur à <code>500</code> est utilisé, c'est la graisse la plus sombre et la plus proche qui sera utilisée (la plus proche s'il n'y a pas de graisse plus forte)</li>
- <li>Si un niveau inférieur à <code>400</code> est utilisé, c'est la graisse la plus claire la plus proche qui est utilisée (la plus proche s'il n'y a pas de graisse plus claire)</li>
- <li>Si un niveau égal à <code>400</code> est utilisé, <code>500</code> sera utilisé. Si <code>500</code> n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400.</li>
- <li>Si un niveau égal à <code>500</code> est utilisé, <code>400</code> sera utilisé. Si <code>400</code> n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à <code>400</code>.</li>
-</ul>
+- Si un niveau supérieur à `500` est utilisé, c'est la graisse la plus sombre et la plus proche qui sera utilisée (la plus proche s'il n'y a pas de graisse plus forte)
+- Si un niveau inférieur à `400` est utilisé, c'est la graisse la plus claire la plus proche qui est utilisée (la plus proche s'il n'y a pas de graisse plus claire)
+- Si un niveau égal à `400` est utilisé, `500` sera utilisé. Si `500` n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400.
+- Si un niveau égal à `500` est utilisé, `400` sera utilisé. Si `400` n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à `400`.
 
-<p>Autrement dit, pour les fontes dont les niveaux de graisse sont uniquement <code>normal</code> et <code>bold</code>, <code>100</code>-<code>500</code> seront considérés équivalents à <code>normal</code> et <code>600</code>-<code>900</code> à <code>bold</code>.</p>
+Autrement dit, pour les fontes dont les niveaux de graisse sont uniquement `normal` et `bold`, `100`-`500` seront considérés équivalents à `normal` et `600`-`900` à `bold`.
 
-<h3 id="Signification_des_poids_relatifs">Signification des poids relatifs</h3>
+### Signification des poids relatifs
 
-<p>Lorsqu'on utilise les valeurs <code>lighter</code> ou <code>bolder</code>, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément :</p>
+Lorsqu'on utilise les valeurs `lighter` ou `bolder`, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th>Valeur héritée</th>
-   <th><code>bolder</code></th>
-   <th><code>lighter</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th>100</th>
-   <td>400</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>200</th>
-   <td>400</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>300</th>
-   <td>400</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>400</th>
-   <td>700</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>500</th>
-   <td>700</td>
-   <td>100</td>
-  </tr>
-  <tr>
-   <th>600</th>
-   <td>900</td>
-   <td>400</td>
-  </tr>
-  <tr>
-   <th>700</th>
-   <td>900</td>
-   <td>400</td>
-  </tr>
-  <tr>
-   <th>800</th>
-   <td>900</td>
-   <td>700</td>
-  </tr>
-  <tr>
-   <th>900</th>
-   <td>900</td>
-   <td>700</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th>Valeur héritée</th>
+      <th><code>bolder</code></th>
+      <th><code>lighter</code></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>100</th>
+      <td>400</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>200</th>
+      <td>400</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>300</th>
+      <td>400</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>400</th>
+      <td>700</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>500</th>
+      <td>700</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <th>600</th>
+      <td>900</td>
+      <td>400</td>
+    </tr>
+    <tr>
+      <th>700</th>
+      <td>900</td>
+      <td>400</td>
+    </tr>
+    <tr>
+      <th>800</th>
+      <td>900</td>
+      <td>700</td>
+    </tr>
+    <tr>
+      <th>900</th>
+      <td>900</td>
+      <td>700</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Correspondance_entre_les_valeurs_numériques_et_les_noms_communément_utilisés">Correspondance entre les valeurs numériques et les noms communément utilisés</h3>
+### Correspondance entre les valeurs numériques et les noms communément utilisés
 
-<p>Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (<em>NdT : les noms sont laissés en anglais car généralement utilisés tels quels</em>) :</p>
+Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (_NdT : les noms sont laissés en anglais car généralement utilisés tels quels_) :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Valeur</th>
-   <th scope="col">Nom communément utilisé</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>100</td>
-   <td><em>Thin (Hairline)</em></td>
-  </tr>
-  <tr>
-   <td>200</td>
-   <td><em>Extra Light (Ultra Light)</em></td>
-  </tr>
-  <tr>
-   <td>300</td>
-   <td><em>Light</em></td>
-  </tr>
-  <tr>
-   <td>400</td>
-   <td><em>Normal</em></td>
-  </tr>
-  <tr>
-   <td>500</td>
-   <td><em>Medium</em></td>
-  </tr>
-  <tr>
-   <td>600</td>
-   <td><em>Semi Bold (Demi Bold)</em></td>
-  </tr>
-  <tr>
-   <td>700</td>
-   <td><em>Bold</em></td>
-  </tr>
-  <tr>
-   <td>800</td>
-   <td><em>Extra Bold (Ultra Bold)</em></td>
-  </tr>
-  <tr>
-   <td>900</td>
-   <td><em>Black (Heavy)</em></td>
-  </tr>
- </tbody>
-</table>
+| Valeur | Nom communément utilisé     |
+| ------ | --------------------------- |
+| 100    | _Thin (Hairline)_           |
+| 200    | _Extra Light (Ultra Light)_ |
+| 300    | _Light_                     |
+| 400    | _Normal_                    |
+| 500    | _Medium_                    |
+| 600    | _Semi Bold (Demi Bold)_     |
+| 700    | _Bold_                      |
+| 800    | _Extra Bold (Ultra Bold)_   |
+| 900    | _Black (Heavy)_             |
 
-<h3 id="Interpolation">Interpolation</h3>
+### Interpolation
 
-<p>Une valeur <code>font-weight</code> est interpolée de façon discrète (par multiple de 100). L'interpolation se produit sur des valeurs réelles puis la valeur est convertie au multiple de 100 le plus proche. Les valeurs à égale distance entre deux multiples de 100 sont arrondies à la valeur supérieure.</p>
+Une valeur `font-weight` est interpolée de façon discrète (par multiple de 100). L'interpolation se produit sur des valeurs réelles puis la valeur est convertie au multiple de 100 le plus proche. Les valeurs à égale distance entre deux multiples de 100 sont arrondies à la valeur supérieure.
 
-<h3 id="Polices_variables">Polices variables</h3>
+### Polices variables
 
-<p>La plupart des polices possèdent des niveaux de graisses qui correspondent aux <a href="#communs">niveaux communément utilisés</a>. Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée.</p>
+La plupart des polices possèdent des niveaux de graisses qui correspondent aux [niveaux communément utilisés](#communs). Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée.
 
-<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>wght</code> qui est utilisé afin d'implémenter les variations de largeur.</p>
+Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wght` qui est utilisé afin d'implémenter les variations de largeur.
 
-<p>Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification <em>CSS Fonts</em> de niveau 4.</p>
+Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification _CSS Fonts_ de niveau 4.
 
-<div>{{EmbedLiveSample("Polices_variables", 1200, 180, "", "", "example-outcome-frame")}}</div>
+{{EmbedLiveSample("Polices_variables", 1200, 180, "", "", "example-outcome-frame")}}
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;header&gt;
-    &lt;input type="range" id="weight" name="weight" min="1" max="1000" /&gt;
-    &lt;label for="weight"&gt;Weight&lt;/label&gt;
-&lt;/header&gt;
-&lt;div class="container"&gt;
-    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<header>
+    <input type="range" id="weight" name="weight" min="1" max="1000" />
+    <label for="weight">Weight</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">/*
+```css
+/*
 Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
 and is used here under the terms of its license:
 https://github.com/LettError/mutatorSans/blob/master/LICENSE
@@ -244,9 +208,10 @@ label {
   text-transform: uppercase;
   font: 1.5rem 'MutatorSans', sans-serif;
 }
-</pre>
+```
 
-<pre class="brush: css hidden">html, body {
+```css hidden
+html, body {
   max-height: 100vh;
   max-width: 100vw;
   overflow: hidden;
@@ -265,15 +230,16 @@ header {
   flex-grow: 1;
 }
 
-.container &gt; p {
+.container > p {
   margin-top: 0;
   margin-bottom: 0;
 }
-</pre>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">let weightLabel = document.querySelector('label[for="weight"]');
+```js
+let weightLabel = document.querySelector('label[for="weight"]');
 let weightInput = document.querySelector('#weight');
 let sampleText = document.querySelector('.sample');
 
@@ -285,32 +251,34 @@ function update() {
 weightInput.addEventListener('input', update);
 
 update();
-</pre>
+```
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
 {{csssyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML_2">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Alice was beginning to get very tired of sitting by her sister on the
   bank, and of having nothing to do: once or twice she had peeped into the
   book her sister was reading, but it had no pictures or conversations in
   it, 'and what is the use of a book,' thought Alice 'without pictures or
   conversations?'
-&lt;/p&gt;
+</p>
 
-&lt;div&gt;I'm heavy&lt;br/&gt;
-  &lt;span&gt;I'm lighter&lt;/span&gt;
-&lt;/div&gt;
-</pre>
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+```
 
-<h3 id="CSS_2">CSS</h3>
+### CSS
 
-<pre class="brush:css">/* Le texte du paragraphe est gras. */
+```css
+/* Le texte du paragraphe est gras. */
 p {
   font-weight: bold;
 }
@@ -325,62 +293,32 @@ div {
    clair que le parent. */
 span {
   font-weight: lighter;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+{{EmbedLiveSample("Exemples","400","300")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#accessibilité">si le contraste entre le texte et l'arrière-plan est faible</a>.</p>
+Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec `font-weight` qui vaut `100` ou `200`, notamment [si le contraste entre le texte et l'arrière-plan est faible](/fr/docs/Web/CSS/color#accessibilité).
 
-<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="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+- [Comprendre les règles WCAG 1.4](/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)
+- [_Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}</td>
-   <td>{{Spec2('CSS4 Fonts')}}</td>
-   <td>Définition de <code>font-weight</code> qui précise que la propriété peut utiliser des valeurs comprises entre <code>1</code> et <code>1000</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>font-weight</code> peut désormais être animée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                     | Commentaires                                                                                                      |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}             | {{Spec2('CSS4 Fonts')}}         | Définition de `font-weight` qui précise que la propriété peut utiliser des valeurs comprises entre `1` et `1000`. |
+| {{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}             | {{Spec2('CSS3 Fonts')}}         | Aucun changement.                                                                                                 |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}         | {{Spec2('CSS3 Transitions')}} | `font-weight` peut désormais être animée.                                                                         |
+| {{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}} | {{Spec2('CSS2.1')}}                 | Aucun changement.                                                                                                 |
+| {{SpecName('CSS1', '#font-weight', 'font-weight')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                              |
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("css.properties.font-weight")}}</p>
+{{Compat("css.properties.font-weight")}}