[FIX] Issue #874 (#897)

* [FIX] Issue #874

* fix issue 874

* Review - fix flaws / ids / macros / new bcd

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 70 insertions, 67 deletions

diff --git a/files/fr/web/css/cursor/index.html b/files/fr/web/css/cursor/index.html
index 90d59cb8b4..a413586854 100644
--- a/files/fr/web/css/cursor/index.html
+++ b/files/fr/web/css/cursor/index.html
@@ -2,10 +2,18 @@
 title: cursor
 slug: Web/CSS/cursor
 tags:
+  - Arrow
   - CSS
-  - Propriété
+  - CSS Property
+  - Cursor
+  - Custom Cursor
   - Reference
+  - UI
+  - mouse
+  - pointer
+  - recipe:css-property
 translation_of: Web/CSS/cursor
+browser-compat: css.properties.cursor
 ---
 <div>{{CSSRef}}</div>
 
@@ -13,9 +21,7 @@ translation_of: Web/CSS/cursor
 
 <div>{{EmbedInteractiveExample("pages/css/cursor.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>
-
-<h2 id="Syntaxe">Syntaxe</h2>
+<h2 id="syntax">Syntaxe</h2>
 
 <pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
 cursor: pointer;
@@ -34,33 +40,35 @@ cursor: initial;
 cursor: unset;
 </pre>
 
-<p>La propriété <code>cursor</code> peut être définie grâce à zéro ou plusieurs valeurs <code><a href="#uri">&lt;uri&gt;</a></code> séparées par des virgules et suivi par un unique <a href="#mot-clé">mot-clé obligatoire</a>. Chaque <code>&lt;uri&gt;</code> doit pointer vers un fichier image. Le navigateur essaiera de télécharger la première image indiquée et passera à la suivante s'il ne peut pas. Si aucune image ne fonctionne, il utilisera le mot-clé final.</p>
+<p>La propriété <code>cursor</code> peut être définie grâce à zéro ou plusieurs valeurs <code><a href="#url">&lt;url&gt;</a></code> séparées par des virgules et suivi par un unique <a href="#mot-clé">mot-clé obligatoire</a>. Chaque <code>&lt;url&gt;</code> doit pointer vers un fichier image. Le navigateur essaiera de télécharger la première image indiquée et passera à la suivante s'il ne peut pas. Si aucune image ne fonctionne, il utilisera le mot-clé final.</p>
 
-<p>Chaque <code>&lt;uri&gt;</code> peut éventuellement être suivi par un couple de nombres séparés par un espace qui représente les coordonnées (abscisse puis ordonnée) <code><a href="#xy">&lt;x&gt;&lt;y&gt;</a></code> Ces coordonnées permettent de paramétrer le point d'action (<em>hotspot</em>) du curseur par rapport au coin en haut à gauche de l'image.</p>
+<p>Chaque <code>&lt;url&gt;</code> peut éventuellement être suivi par un couple de nombres séparés par un espace qui représente les coordonnées (abscisse puis ordonnée) <code><a href="#xy">&lt;x&gt;&lt;y&gt;</a></code> Ces coordonnées permettent de paramétrer le point d'action (<em>hotspot</em>) du curseur par rapport au coin en haut à gauche de l'image.</p>
 
-<p>Par exemple, on peut indiquer deux images grâce à deux valeurs <code>&lt;uri&gt;</code> et fournir des coordonnées <code>&lt;x&gt;&lt;y&gt;</code> pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé <code>progress</code> :</p>
+<p>Par exemple, on peut indiquer deux images grâce à deux valeurs <code>&lt;url&gt;</code> et fournir des coordonnées <code>&lt;x&gt;&lt;y&gt;</code> pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé <code>progress</code> :</p>
 
 <pre class="brush: css">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre>
 
-<h3 id="Valeurs">Valeurs</h3>
+<h3 id="values">Valeurs</h3>
 
 <dl>
- <dt><a id="uri"><code>&lt;uri&gt;</code></a></dt>
- <dd>Une <code>url(…)</code> ou une liste séparées de telles valeurs qui pointent vers un fichier image. On peut utiliser différentes {{cssxref("&lt;uri&gt;")}} en cas de recours si certains types d'images ne sont pas pris en charge. Il est obligatoire qu'une valeur non-URL soit présente à la fin de cette liste.</dd>
- <dt><a id="xy"><code>&lt;x&gt;</code> <code>&lt;y&gt;</code></a> {{experimental_inline}}</dt>
+ <dt><code id="url">&lt;url&gt;</code></dt>
+ <dd>Une <code>url(…)</code> ou une liste d'URL séparées par des virgules <code>url(…), url(…), …</code> pointant vers un fichier image. On peut utiliser plusieurs <a href="/fr/docs/Web/CSS/url()"><code>url()</code></a>, au cas où certains types d'images ne sont pas pris en charge. Il est <em>obligatoire</em> qu'une valeur non-URL soit présente à la fin de cette liste.</dd>
+ <dt><code id="xy">&lt;x&gt;</code> <code>&lt;y&gt;</code> {{experimental_inline}}</dt>
  <dd>Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.</dd>
- <dt><a id="mot-clé">Valeurs utilisant un mot-clé</a></dt>
+ <dt><span id="keyword_values">Valeurs utilisant un mot-clé</span></dt>
  <dd>
  <p><strong>Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.</strong></p>
 
  <table class="standard-table">
-  <tbody>
+  <thead>
    <tr>
     <th>Catégorie</th>
     <th>Valeur CSS</th>
     <th>Rendu</th>
     <th>Description</th>
    </tr>
+  </thead>
+  <tbody>
    <tr style="cursor: auto;">
     <td rowspan="3">Général</td>
     <td><code>auto</code></td>
@@ -69,7 +77,7 @@ cursor: unset;
    </tr>
    <tr style="cursor: default;">
     <td><code>default</code></td>
-    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="default.gif" src="default.gif"></td>
     <td>Le curseur par défaut de la plateforme (qui est généralement une flèche).</td>
    </tr>
    <tr style="cursor: none;">
@@ -80,109 +88,106 @@ cursor: unset;
    <tr style="cursor: context-menu;">
     <td rowspan="5" style="cursor: auto;">Liens &amp; états</td>
     <td><code>context-menu</code></td>
-    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
-    <td>Un menu contextuel est disponible sous le curseur. Seul<br>
-     IE 10 et les versions supérieures ont implémenté cette valeur sur Windows : {{Bug("258960")}}.</td>
+    <td><img alt="context-menu.png" src="context-menu.png"></td>
+    <td>Un menu contextuel est disponible sous le curseur. Seul IE 10 et les versions supérieures ont implémenté cette valeur Bur Windows : <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=258960">bug 258960</a>.</td>
    </tr>
    <tr style="cursor: help;">
     <td><code>help</code></td>
-    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="help.gif" src="help.gif"></td>
     <td>Le pointeur indique qu'une aide est disponible.</td>
    </tr>
    <tr style="cursor: pointer;">
     <td><code>pointer</code></td>
-    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="pointer.gif" src="pointer.gif"></td>
     <td>Le curseur est un pointeur qui indique un lien ; généralement c'est une main.</td>
    </tr>
    <tr style="cursor: progress;">
     <td><code>progress</code></td>
-    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="progress.gif" src="progress.gif"></td>
     <td>Le programme est occupé en arrière-plan mais l'utilisateur peut toujours interagir avec l'interface (à la différence de <code>wait</code>).</td>
    </tr>
    <tr style="cursor: wait;">
     <td><code>wait</code></td>
-    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="wait.gif" src="wait.gif"></td>
     <td>Le programme est occupé, empêchant toute interaction.</td>
    </tr>
    <tr style="cursor: cell;">
     <td rowspan="4" style="cursor: auto;">Sélection</td>
     <td><code>cell</code></td>
-    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
-    <td>Le pointeur indique que la  ou les cellules du tableau peuvent être sélectionnées.</td>
+    <td><img alt="cell.gif" src="cell.gif"></td>
+    <td>Le pointeur indique que la ou les cellules du tableau peuvent être sélectionnées.</td>
    </tr>
    <tr style="cursor: crosshair;">
     <td><code>crosshair</code></td>
-    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="crosshair.gif" src="crosshair.gif"></td>
     <td>Un curseur en forme de croix, généralement utilisé pour indiquer une sélection sur une image.</td>
    </tr>
    <tr style="cursor: text;">
     <td><code>text</code></td>
-    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="text.gif" class="default" src="text.gif"></td>
     <td>Le pointeur indique que le texte peut être sélectionné.</td>
    </tr>
    <tr style="cursor: vertical-text;">
     <td><code>vertical-text</code></td>
-    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="vertical-text.gif" src="vertical-text.gif"></td>
     <td>Le pointeur indique que du texte vertical peut être sélectionné.</td>
    </tr>
    <tr style="cursor: alias;">
     <td rowspan="7" style="cursor: auto;">Glisser/déposer</td>
     <td><code>alias</code></td>
-    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="alias.gif" src="alias.gif"></td>
     <td>Le pointeur indique qu'un alias ou qu'un raccourci sera créé.</td>
    </tr>
    <tr style="cursor: copy;">
     <td><code>copy</code></td>
-    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="copy.gif" class="default" src="copy.gif"></td>
     <td>Le pointeur indique que quelque chose devra être copié.</td>
    </tr>
    <tr style="cursor: move;">
     <td><code>move</code></td>
-    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="move.gif" src="move.gif"></td>
     <td>L'objet survolé devra être déplacé.</td>
    </tr>
    <tr style="cursor: no-drop;">
     <td><code>no-drop</code></td>
-    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
-    <td>Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit.<br>
-     {{bug("275173")}} pour Windows et Mac OS X, « <code>no-drop</code> a le même effet que <code>not-allowed</code> ».</td>
+    <td><img alt="no-drop.gif" class="lwrap" src="no-drop.gif" style="float: left;"></td>
+    <td>Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=B75173">bug 275173</a> pour Windows et Mac OS X, « <code>no-drop</code> a le même effet que <code>not-allowed</code> ».</td>
    </tr>
    <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
     <td><code>grab</code></td>
-    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td><img alt="grab.gif" class="default" src="grab.gif"></td>
     <td rowspan="2" style="cursor: auto;">
      <p>Le pointeur indique que le contenu peut être accroché/attrapé ou est accroché/attrapé pour être glissé et déposé quelque part.</p>
     </td>
    </tr>
    <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
     <td><code>grabbing</code></td>
-    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+    <td><img alt="grabbing.gif" class="default" src="grabbing.gif"></td>
    </tr>
    <tr style="cursor: not-allowed;">
     <td><code>not-allowed</code></td>
-    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="not-allowed.gif" src="not-allowed.gif"></td>
     <td>Le curseur indique que quelque chose ne peut pas être fait.</td>
    </tr>
    <tr style="cursor: all-scroll;">
     <td rowspan="15" style="cursor: auto;">Redimensionnement &amp; défilement</td>
     <td><code>all-scroll</code></td>
-    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
-    <td>Le curseur indique qu'on peut faire défiler le contenu dans n'importe quelle direction.<br>
-     {{bug("275174")}} pour Windows, « <code>all-scroll</code> a le même effet que <code>move</code>".</td>
+    <td><img alt="all-scroll.gif" src="all-scroll.gif"></td>
+    <td>Le curseur indique qu'on peut faire défiler le contenu dans n'importe quelle direction. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=275174">Bug 275174</a> pour Windows, « <code>all-scroll</code> a le même effet que <code>move</code>".</td>
    </tr>
    <tr style="cursor: col-resize;">
     <td><code>col-resize</code></td>
-    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="col-resize.gif" src="col-resize.gif"></td>
     <td>L'élément ou la colonne peut être redimensionné horizontalement.</td>
    </tr>
    <tr style="cursor: row-resize;">
     <td><code>row-resize</code></td>
-    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="row-resize.gif" src="row-resize.gif"></td>
     <td>L'élément ou la ligne peut être redimensionné verticalement.</td>
    </tr>
    <tr style="cursor: n-resize;">
     <td><code>n-resize</code></td>
-    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td><img alt="Exemple de redimensionnement vers le haut" src="n-resize.gif" style="border-style: solid; border-width: 0px;"></td>
     <td rowspan="8" style="cursor: auto;">
      <p>Un bord peut être déplacé. Par exemple, le curseur <code>se-resize</code> peut être utilisé lorsqu'on redimensionne une boîte à partir de son coin sud-est.</p>
 
@@ -191,77 +196,77 @@ cursor: unset;
    </tr>
    <tr style="cursor: e-resize;">
     <td><code>e-resize</code></td>
-    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the right cursor" src="e-resize.gif"></td>
    </tr>
    <tr style="cursor: s-resize;">
     <td><code>s-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the bottom cursor " src="s-resize.gif"></td>
    </tr>
    <tr style="cursor: w-resize;">
     <td><code>w-resize</code></td>
-    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the left cursor" src="w-resize.gif"></td>
    </tr>
    <tr style="cursor: ne-resize;">
     <td><code>ne-resize</code></td>
-    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the top-right corner cursor" src="ne-resize.gif"></td>
    </tr>
    <tr style="cursor: nw-resize;">
     <td><code>nw-resize</code></td>
-    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the top-left corner cursor" src="nw-resize.gif"></td>
    </tr>
    <tr style="cursor: se-resize;">
     <td><code>se-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="se-resize.gif"></td>
    </tr>
    <tr style="cursor: sw-resize;">
     <td><code>sw-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="sw-resize.gif"></td>
    </tr>
    <tr style="cursor: ew-resize;">
     <td><code>ew-resize</code></td>
-    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="3-resize.gif" class="default" src="3-resize.gif"></td>
     <td rowspan="4" style="cursor: auto;">Le pointeur indique un redimensionnement bidirectionnel.</td>
    </tr>
    <tr style="cursor: ns-resize;">
     <td><code>ns-resize</code></td>
-    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="6-resize.gif" class="default" src="6-resize.gif"></td>
    </tr>
    <tr style="cursor: nesw-resize;">
     <td><code>nesw-resize</code></td>
-    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+    <td><img alt="1-resize.gif" class="default" src="1-resize.gif"></td>
    </tr>
    <tr style="cursor: nwse-resize;">
     <td><code>nwse-resize</code></td>
-    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="4-resize.gif" class="default" src="4-resize.gif"></td>
    </tr>
    <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
     <td rowspan="2">Zoom</td>
     <td><code>zoom-in</code></td>
-    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td><img alt="zoom-in.gif" class="default" src="zoom-in.gif"></td>
     <td rowspan="2" style="cursor: auto;">
      <p>Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.</p>
     </td>
    </tr>
    <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
     <td><code>zoom-out</code></td>
-    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+    <td><img alt="zoom-out.gif" class="default" src="zoom-out.gif"></td>
    </tr>
   </tbody>
  </table>
  </dd>
 </dl>
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+<h3 id="formal_syntax">Syntaxe formelle</h3>
 
 {{csssyntax}}
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+<h2 id="usage_notes">Notes d'utilisation</h2>
 
 <p>Bien que la spécification ne définisse aucune limite de taille pour les curseurs, chaque navigateur/agent utilisateur pourra imposer la sienne. Les images de curseur utilisées qui dépassent les limites prises en charge seront généralement ignorées.</p>
 
 <p>Pour plus d'informations, voir le tableau de compatibilité ci-après.</p>
 
-<h2 id="Exemples">Exemples</h2>
+<h2 id="examples">Exemples</h2>
 
 <h3 id="CSS">CSS</h3>
 
@@ -288,11 +293,11 @@ cursor: unset;
   Et là on peut zoomer.
 &lt;/p&gt;</pre>
 
-<h3 id="Résultat">Résultat</h3>
+<h3 id="result">Résultat</h3>
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+<p>{{EmbedLiveSample("examples")}}</p>
 
-<h2 id="Spécifications">Spécifications</h2>
+<h2 id="specifications">Spécifications</h2>
 
 <table class="standard-table">
  <thead>
@@ -318,16 +323,14 @@ cursor: unset;
 
 <p>{{cssinfo}}</p>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
 
-<p>{{Compat("css.properties.cursor")}}</p>
+<div>{{Compat}}</div>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor">Utiliser des valeurs URL pour <code>cursor</code></a></li>
- <li>{{cssxref("pointer-events")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property">Utiliser des valeurs URL pour <code>cursor</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/pointer-events"><code>pointer-events</code></a></li>
  <li>La fonction CSS {{cssxref("url()", "url()")}}</li>
 </ul>