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

13 files changed, 68 insertions, 66 deletions

diff --git a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html
index 1be4399050..395d6d0e69 100644
--- a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html
+++ b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html
@@ -9,9 +9,9 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">La navigation avec un fil d'Ariane (<em>breadcrumb</em>) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.</p>
+<p>La navigation avec un fil d'Ariane (<em>breadcrumb</em>) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.</p>
 
-<p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p>
+<p><img alt="Links displayed inline with separators" src="breadcrumb-navigation.png"></p>
 
 <h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
 
@@ -39,7 +39,7 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb
 
 <p>{{Compat("css.properties.flex")}}</p>
 
-<h2 id="See_also" name="See_also">Voir aussi</h2>
+<h2 id="See_also">Voir aussi</h2>
 
 <ul>
  <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Les boîtes flexibles CSS</a></li>
diff --git a/files/fr/web/css/layout_cookbook/card/index.html b/files/fr/web/css/layout_cookbook/card/index.html
index a0a498245b..7e92b24421 100644
--- a/files/fr/web/css/layout_cookbook/card/index.html
+++ b/files/fr/web/css/layout_cookbook/card/index.html
@@ -11,9 +11,9 @@ original_slug: Web/CSS/Layout_cookbook/Carte
 ---
 <p>{{CSSRef}}</p>
 
-<p class="summary">Dans ce guide, nous verrons comment créer des cartes (<em>cards</em> en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.</p>
+<p>Dans ce guide, nous verrons comment créer des cartes (<em>cards</em> en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.</p>
 
-<p><img alt="Three card components in a row" src="https://mdn.mozillademos.org/files/16278/cards.png" style="height: 1172px; width: 1629px;"></p>
+<p><img alt="Three card components in a row" src="cards.png"></p>
 
 <h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
 
@@ -45,16 +45,16 @@ original_slug: Web/CSS/Layout_cookbook/Carte
 <p>Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.</p>
 
 <div class="note">
-<p><strong>Note </strong>: Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (<em>subgrid</em>), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.</p>
+<p><strong>Note :</strong> Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (<em>subgrid</em>), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.</p>
 </div>
 
 <h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
 
 <p>On pourrait également utiliser <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a> pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.</p>
 
-<p>Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser <a href="/fr/docs/Web/CSS/Colonnes_CSS">une disposition multi-colonnes</a> où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).</p>
+<p>Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser <a href="/fr/docs/Web/CSS/CSS_Columns">une disposition multi-colonnes</a> où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).</p>
 
-<p>Voir <a href="/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes">la recette sur les colonnes</a> pour observer ces méthodes en action.</p>
+<p>Voir <a href="/fr/docs/Web/CSS/Layout_cookbook/Column_layouts">la recette sur les colonnes</a> pour observer ces méthodes en action.</p>
 
 <h2 id="Accessibilité">Accessibilité</h2>
 
@@ -72,9 +72,9 @@ original_slug: Web/CSS/Layout_cookbook/Carte
 
 <p>{{Compat("css.properties.grid-template-rows")}}</p>
 
-<h2 id="See_also" name="See_also">Voir aussi</h2>
+<h2 id="See_also">Voir aussi</h2>
 
 <ul>
- <li>{{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("grid-gap")}}</li>
+ <li>{{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}}</li>
  <li><a href="https://inclusive-components.design/cards/"><em>Inclusive Components: Card</em> (en anglais)</a></li>
 </ul>
diff --git a/files/fr/web/css/layout_cookbook/center_an_element/index.html b/files/fr/web/css/layout_cookbook/center_an_element/index.html
index 22e0f3458c..713d277510 100644
--- a/files/fr/web/css/layout_cookbook/center_an_element/index.html
+++ b/files/fr/web/css/layout_cookbook/center_an_element/index.html
@@ -13,9 +13,9 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (<em>flexbox</em>), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification <em>Box Alignment</em>.</p>
+<p>Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (<em>flexbox</em>), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification <em>Box Alignment</em>.</p>
 
-<p><img alt="an element centered inside a larger box" src="https://mdn.mozillademos.org/files/16182/cookbook-center.png" style="height: 421px; width: 1219px;"></p>
+<p><img alt="an element centered inside a larger box" src="cookbook-center.png"></p>
 
 <h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
 
@@ -26,7 +26,7 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element
 <p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
 
 <div class="note">
-<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a></p>
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a></p>
 </div>
 
 <h2 id="Choix_effectués">Choix effectués</h2>
@@ -53,6 +53,6 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element
 <h2 id="Voir_aussi">Voir aussi</h2>
 
 <ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
  <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">CSS Box alignment guide</a></li>
 </ul>
diff --git a/files/fr/web/css/layout_cookbook/column_layouts/index.html b/files/fr/web/css/layout_cookbook/column_layouts/index.html
index d0490947ff..8dfa422ffd 100644
--- a/files/fr/web/css/layout_cookbook/column_layouts/index.html
+++ b/files/fr/web/css/layout_cookbook/column_layouts/index.html
@@ -12,9 +12,9 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.</p>
+<p>Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.</p>
 
-<p><img alt="three different styles of layouts which have two columns in the container." src="https://mdn.mozillademos.org/files/16183/cookbook-multiple-columns.png" style="height: 406px; width: 1541px;"></p>
+<p><img alt="three different styles of layouts which have two columns in the container." src="cookbook-multiple-columns.png"></p>
 
 <h2 id="Prérequis">Prérequis</h2>
 
@@ -39,7 +39,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 <p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}</p>
 
 <div class="note">
-<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">Télécharger cet exemple</a></p>
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">Télécharger cet exemple</a></p>
 </div>
 
 <p>On utilisera une disposition multi-colonnes lorsque :</p>
@@ -59,7 +59,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 <p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}</p>
 
 <div class="note">
-<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">Télécharger cet exemple</a></p>
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">Télécharger cet exemple</a></p>
 </div>
 
 <p>Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur <code>wrap</code> sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.</p>
@@ -67,7 +67,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 <p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}</p>
 
 <div class="note">
-<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">Télécharger cet exemple</a></p>
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">Télécharger cet exemple</a></p>
 </div>
 
 <p>On utilisera les boîtes flexibles pour :</p>
@@ -85,7 +85,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 <p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}</p>
 
 <div class="note">
-<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">Télécharger cet exemple</a></p>
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">Télécharger cet exemple</a></p>
 </div>
 
 <p>On utiliser les grilles CSS lorsque :</p>
@@ -122,7 +122,7 @@ original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
 <h2 id="Voir_aussi">Voir aussi</h2>
 
 <ul>
- <li><a href="/fr/docs/Web/CSS/Colonnes_CSS">Guide pour les dispositions multi-colonnes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Columns">Guide pour les dispositions multi-colonnes</a></li>
  <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Guide pour les boîtes flexibles (<em>flexbox</em>)</a></li>
  <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Guide pour les grilles CSS</a></li>
 </ul>
diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html
index 846b912106..ac5e39c3e9 100644
--- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html
+++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html
@@ -9,10 +9,12 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_templa
 ---
 <p>{{CSSRef}}</p>
 
-<div class="note"><strong>Note :</strong> Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.<br>
-<em>Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.</em></div>
+<div class="note">
+  <p><strong>Note :</strong> Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.</p>
+  <p><em>Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.</em>
+</p></div>
 
-<p class="summary"><em>Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.</em></p>
+<p><em>Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.</em></p>
 
 <h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
 
@@ -27,7 +29,7 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_templa
 <p><em>Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.</em></p>
 
 <div class="note">
-<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a>.</p>
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a>.</p>
 </div>
 
 <h2 id="Choix_effectués">Choix effectués</h2>
@@ -52,7 +54,7 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_templa
 
 <p>{{Compat("css.properties.align-items")}}</p>
 
-<h2 id="See_also" name="See_also">Voir aussi</h2>
+<h2 id="See_also">Voir aussi</h2>
 
 <ul>
  <li><em>Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}</em></li>
diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html
index 03a3396acc..e5a16b419a 100644
--- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html
+++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html
@@ -11,14 +11,14 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.</p>
+<p>Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.</p>
 
 <h2 id="Qu'est-ce_qu'une_«_bonne_»_recette">Qu'est-ce qu'une « bonne » recette ?</h2>
 
 <p><strong>Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web.</strong> Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.</p>
 
 <div class="note">
-<p><strong>Note quant à la traduction et aux recettes en anglais :</strong> Une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.</p>
+<p><strong>Note :</strong> Quant à la traduction et aux recettes en anglais, une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.</p>
 </div>
 
 <h2 id="Les_étapes_pour_la_publication">Les étapes pour la publication</h2>
@@ -63,7 +63,7 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette
 
 <p>Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  <code>playable-css</code>.</p>
 
-<p>Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> qui est utilisé sur la page <a href="/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element">Comment centrer un élément</a>.</p>
+<p>Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> qui est utilisé sur la page <a href="/fr/docs/Web/CSS/Layout_cookbook/Center_an_element">Comment centrer un élément</a>.</p>
 
 <p>Si vous avez créé un <em>fork</em> du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.</p>
 
@@ -85,12 +85,12 @@ original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette
 
 <h3 id="5._Créer_la_page_sur_MDN">5. Créer la page sur MDN</h3>
 
-<p>Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions">des permissions pour la création de page</a>. Vous pourrez alors créer une page comme sous-page de la section. <a href="/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Cette page modèle pourra vous servir de point de départ pour votre contenu</a>.</p>
+<p>Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et <a href="/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions">des permissions pour la création de page</a>. Vous pourrez alors créer une page comme sous-page de la section. <a href="/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Cette page modèle pourra vous servir de point de départ pour votre contenu</a>.</p>
 
 <p>Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.</p>
 
 <div class="note">
-<p><strong>Note de traduction :</strong> Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">la page modèle en français</a>.</p>
+<p><strong>Note :</strong> Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">la page modèle en français</a>.</p>
 </div>
 
 <p>Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.</p>
diff --git a/files/fr/web/css/layout_cookbook/grid_wrapper/index.html b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html
index f28922b563..249e8fa898 100644
--- a/files/fr/web/css/layout_cookbook/grid_wrapper/index.html
+++ b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.</p>
+<p>Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.</p>
 
 <h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
 
@@ -20,14 +20,14 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
 <p>{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}</p>
 
 <div class="note">
-<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">Télécharger cet exemple</a>.</p>
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">Télécharger cet exemple</a>.</p>
 </div>
 
 <h2 id="Choix_effectués">Choix effectués</h2>
 
-<p dir="ltr" id="docs-internal-guid-30ae4ecd-7fff-36c2-da7d-0fbb6ec4feae">Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.</p>
+<p>Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.</p>
 
-<p dir="ltr">Les deux colonnes extérieures ont une taille maximale de <code>1fr</code>, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.</p>
+<p>Les deux colonnes extérieures ont une taille maximale de <code>1fr</code>, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.</p>
 
 <h2 id="Méthodes_de_recours_ou_alternatives">Méthodes de recours ou alternatives</h2>
 
@@ -69,13 +69,11 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
 
 <p>{{Compat("css.properties.grid-template-columns")}}</p>
 
-<h2 id="See_also" name="See_also">Voir aussi</h2>
+<h2 id="See_also">Voir aussi</h2>
 
 <ul>
  <li>{{Cssxref("grid-template-columns")}}</li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout" id="docs-internal-guid-ae8eafc9-7fff-65b9-8d8c-bb5f1e3c874c">Les grilles CSS sur MDN</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS sur MDN</a></li>
  <li>Article :<a href="https://css-irl.info/more-flexibility-with-minmax/"> Les grilles CSS, plus de flexibilité avec <code>minmax()</code> (en anglais)</a></li>
  <li>Article : <a href="https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/">Isoler des éléments sur une grille CSS (en anglais)</a></li>
-</ul>
-
-<p> </p>
+</ul>
\ No newline at end of file
diff --git a/files/fr/web/css/layout_cookbook/index.html b/files/fr/web/css/layout_cookbook/index.html
index dc96a66da3..f3debbc018 100644
--- a/files/fr/web/css/layout_cookbook/index.html
+++ b/files/fr/web/css/layout_cookbook/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/Layout_cookbook
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.</p>
+<p>Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.</p>
 
 <div class="note">
 <p><strong>Note :</strong> Si vous débutez en CSS, nous vous conseillons de consulter <a href="/fr/docs/Apprendre/CSS/CSS_layout">notre module sur l'apprentissage de la disposition en CSS</a>. Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.</p>
diff --git a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html
index 6b76635ff1..98a8a06891 100644
--- a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html
+++ b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html
@@ -10,9 +10,9 @@ original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs
 ---
 <p>{{CSSRef}}</p>
 
-<p class="summary">Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (<em>badge</em>).</p>
+<p>Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (<em>badge</em>).</p>
 
-<p><img alt="A list of items with a badge indicating a count displayed to the right of the text." src="https://mdn.mozillademos.org/files/16255/list-group-badges.png" style="height: 423px; width: 791px;"></p>
+<p><img alt="A list of items with a badge indicating a count displayed to the right of the text." src="list-group-badges.png"></p>
 
 <h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
 
@@ -22,7 +22,9 @@ original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs
 
 <p>{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}</p>
 
-<p class="note"><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html">Télécharger l'exemple</a>.</p>
+<div class="note">
+  <p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html">Télécharger l'exemple</a>.</p>
+</div>
 
 <h2 id="Choix_effectués">Choix effectués</h2>
 
@@ -44,9 +46,9 @@ original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs
 
 <p>{{Compat("css.properties.align-items")}}</p>
 
-<h2 id="See_also" name="See_also">Voir aussi</h2>
+<h2 id="See_also">Voir aussi</h2>
 
 <ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">Alignement des boîtes avec les boîtes flexibles</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Alignement des boîtes avec les boîtes flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligner des objets dans un conteneur flexible</a></li>
 </ul>
diff --git a/files/fr/web/css/layout_cookbook/media_objects/index.html b/files/fr/web/css/layout_cookbook/media_objects/index.html
index 418850ee25..8c2ca3ae1e 100644
--- a/files/fr/web/css/layout_cookbook/media_objects/index.html
+++ b/files/fr/web/css/layout_cookbook/media_objects/index.html
@@ -9,9 +9,9 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">Le motif <em>Media Object</em> (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Intitulé ainsi par Nicole Sullivan</a>, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).</p>
+<p>Le motif <em>Media Object</em> (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Intitulé ainsi par Nicole Sullivan</a>, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p>
+<p><img alt="" src="media-object.png"></p>
 
 <h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
 
@@ -27,10 +27,10 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects
 
 <h2 id="Recette">Recette</h2>
 
-<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>
 
 <div class="note">
-<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Télécharger cet exemple</a>.</p>
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Télécharger cet exemple</a>.</p>
 </div>
 
 <h2 id="Choix_effectués">Choix effectués</h2>
@@ -49,10 +49,10 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects
 
 <p>Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.</p>
 
-<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>
 
 <div class="note">
-<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Télécharger cet exemple</a>.</p>
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Télécharger cet exemple</a>.</p>
 </div>
 
 <p>Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.</p>
@@ -78,8 +78,8 @@ translation_of: Web/CSS/Layout_cookbook/Media_objects
 
 <ul>
  <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">L'amélioration progressive et les grilles CSS</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Utiliser les zones nommées des grilles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">L'amélioration progressive et les grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Utiliser les zones nommées des grilles</a></li>
  <li><code><a href="/fr/docs/Web/CSS/fit-content">fit-content</a></code></li>
  <li><code><a href="/fr/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li>
 </ul>
diff --git a/files/fr/web/css/layout_cookbook/pagination/index.html b/files/fr/web/css/layout_cookbook/pagination/index.html
index 506e521b49..eacc793faa 100644
--- a/files/fr/web/css/layout_cookbook/pagination/index.html
+++ b/files/fr/web/css/layout_cookbook/pagination/index.html
@@ -10,9 +10,9 @@ translation_of: Web/CSS/Layout_cookbook/Pagination
 ---
 <p>{{CSSRef}}</p>
 
-<p class="summary">Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).</p>
+<p>Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).</p>
 
-<p><img alt="Links to sets of pages in a paged listing" src="https://mdn.mozillademos.org/files/16279/pagination.png" style="height: 192px; width: 950px;"></p>
+<p><img alt="Links to sets of pages in a paged listing" src="pagination.png"></p>
 
 <h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
 
@@ -25,7 +25,7 @@ translation_of: Web/CSS/Layout_cookbook/Pagination
 <p>{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}</p>
 
 <div class="note">
-<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html">Télécharger cet exemple</a>.</p>
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html">Télécharger cet exemple</a>.</p>
 </div>
 
 <h2 id="Choix_effectués">Choix effectués</h2>
@@ -67,7 +67,7 @@ translation_of: Web/CSS/Layout_cookbook/Pagination
 
 <p>{{Compat("css.properties.column-gap.flex_context")}}</p>
 
-<h2 id="See_also" name="See_also">Voir aussi</h2>
+<h2 id="See_also">Voir aussi</h2>
 
 <ul>
  <li>{{Cssxref("justify-content")}}</li>
@@ -75,5 +75,5 @@ translation_of: Web/CSS/Layout_cookbook/Pagination
  <li><em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html">Know your ARIA: 'Hidden' vs 'None'</a></em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html"> (en anglais)</a></li>
  <li><a href="https://webaim.org/techniques/css/invisiblecontent/#techniques">Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)</a></li>
  <li><a href="https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939">Écrire du CSS sans oublier l'accessibilité (en anglais)</a></li>
- <li><a href="http://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination">Guide stylistique d'accessibilité : la pagination</a></li>
+ <li><a href="https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination">Guide stylistique d'accessibilité : la pagination</a></li>
 </ul>
diff --git a/files/fr/web/css/layout_cookbook/split_navigation/index.html b/files/fr/web/css/layout_cookbook/split_navigation/index.html
index dda4a698fd..aec75bcde2 100644
--- a/files/fr/web/css/layout_cookbook/split_navigation/index.html
+++ b/files/fr/web/css/layout_cookbook/split_navigation/index.html
@@ -10,9 +10,9 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_segmentée
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.</p>
+<p>Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.</p>
 
-<p><img alt="Items separated into two groups." src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p>
+<p><img alt="Items separated into two groups." src="split-navigation.png"></p>
 
 <h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
 
@@ -40,7 +40,7 @@ original_slug: Web/CSS/Layout_cookbook/Navigation_segmentée
 
 <p>{{Compat("css.properties.flex")}}</p>
 
-<h2 id="See_also" name="See_also">Voir aussi</h2>
+<h2 id="See_also">Voir aussi</h2>
 
 <ul>
  <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Le module de spécification <em>CSS Flexible Box Layout</em></a></li>
diff --git a/files/fr/web/css/layout_cookbook/sticky_footers/index.html b/files/fr/web/css/layout_cookbook/sticky_footers/index.html
index 683a1039a7..096d514add 100644
--- a/files/fr/web/css/layout_cookbook/sticky_footers/index.html
+++ b/files/fr/web/css/layout_cookbook/sticky_footers/index.html
@@ -10,9 +10,9 @@ original_slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant
 ---
 <div>{{CSSRef}}</div>
 
-<p class="summary">Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (<em>viewport</em>) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.</p>
+<p>Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (<em>viewport</em>) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.</p>
 
-<p><img alt="A sticky footer pushed to the bottom of a box" src="https://mdn.mozillademos.org/files/16184/cookbook-footer.png" style="height: 807px; width: 1213px;"></p>
+<p><img alt="A sticky footer pushed to the bottom of a box" src="cookbook-footer.png"></p>
 
 <h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
 
@@ -70,5 +70,5 @@ original_slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant
 <h2 id="Voir_aussi">Voir aussi</h2>
 
 <ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base des grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Les concepts de base des grilles CSS</a></li>
 </ul>