initial commit

13 files changed, 995 insertions, 0 deletions

diff --git a/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html b/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html
new file mode 100644
index 0000000000..be032d79cd
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html
@@ -0,0 +1,73 @@
+---
+title: Bas de page adhérant
+slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant
+tags:
+  - CSS
+  - Guide
+  - Recette
+translation_of: Web/CSS/Layout_cookbook/Sticky_footers
+---
+<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><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>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :</p>
+
+<ul>
+ <li>Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit</li>
+ <li>Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.</li>
+</ul>
+
+<h2 id="Recette">Recette</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html">Télécharger cet example</a></p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec <code>min-height: 100%</code> afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser {{cssxref("min-height")}} avec la valeur <code>100vh</code> sur l'élément {{htmlelement("body")}} qu'on utilise comme conteneur de grille.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément <code>.wrapper</code> a une hauteur minimale de <code>100%</code>, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.</p>
+
+<p>Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste <code>1fr</code> et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec <code>1fr</code>, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.</p>
+
+<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+
+<p>Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (<em>flexbox</em>) pour avoir une note de bas de page adhérante.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}</p>
+
+<p>On commence de la même façon mais on utilise <code>display:flex</code> plutôt que <code>display:grid</code> sur <code>.wrapper</code>. On définit <code>flex-direction</code> avec la valeur <code>column</code> afin d'avoir une organisation verticale. Pour le contenu principal, on utilise <code>flex-grow: 1</code> et pour les deux autres éléments, on utilise <code>flex-shrink: 0</code>. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h4 id="grid-template-rows">grid-template-rows</h4>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h4 id="flex-direction">flex-direction</h4>
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h4 id="flex-grow">flex-grow</h4>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h4 id="flex-shrink">flex-shrink</h4>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<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>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/carte/index.html b/files/fr/web/css/layout_cookbook/carte/index.html
new file mode 100644
index 0000000000..f363a49f0d
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/carte/index.html
@@ -0,0 +1,81 @@
+---
+title: Carte
+slug: Web/CSS/Layout_cookbook/Carte
+tags:
+  - CSS
+  - CSS Grid
+  - Guide
+  - Recette
+translation_of: Web/CSS/Layout_cookbook/Card
+---
+<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><img alt="Three card components in a row" src="https://mdn.mozillademos.org/files/16278/cards.png" style="height: 1172px; width: 1629px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.</p>
+
+<p>Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.</p>
+
+<p>Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.</p>
+
+<h2 id="Recette">Recette</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Chaque carte est organisée en utilisant <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une grille CSS</a> bien qu'elle ne soit que sur une seule dimension. Cela permet en effet d'utiliser le dimensionnement du contenu pour les pistes de la grille. Pour avoir une grille avec une seule colonne, on utilise ce fragment de CSS :</p>
+
+<pre class="brush: css">.card {
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}</pre>
+
+<p>La piste pour le titre est définie avec {{cssxref("max-content")}} ce qui empêche de l'étirer. On décide ensuite que l'image puisse occuper la piste au maximum sur 200 pixels. On définit ensuite la prochaine piste (où le contenu texte se trouve) avec une dimension de <code>1fr</code>. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant.</p>
+
+<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>
+</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>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>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article <a href="https://inclusive-components.design/cards/"><em>Inclusive Components: Card</em> (en anglais)</a>, écrit par Heydon Pickering, pour des explications détaillées à ce propos.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="grid-template-columns">grid-template-columns</h3>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h3 id="grid-template-rows">grid-template-rows</h3>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("grid-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/centrer_un_element/index.html b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html
new file mode 100644
index 0000000000..c4d1fb52c3
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html
@@ -0,0 +1,59 @@
+---
+title: Centrer un élément
+slug: Web/CSS/Layout_cookbook/Centrer_un_element
+tags:
+  - Alignement
+  - CSS
+  - Layout
+  - centrer
+  - flexbox
+  - recettes
+translation_of: Web/CSS/Layout_cookbook/Center_an_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><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>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Centrer un élément à la fois horizontalement et verticalement dans un autre élément.</p>
+
+<h2 id="Recette">Recette</h2>
+
+<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>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Pour centrer une boîte dans une autre, on a donné au contenant une propriété <code>display: flex</code>.</p>
+
+<p>Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur <code>center</code> pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur <code>center</code> pour centrer horizontalement.</p>
+
+<p>À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.<br>
+ Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<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">CSS Box alignment guide</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html b/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html
new file mode 100644
index 0000000000..7223cde7ef
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html
@@ -0,0 +1,62 @@
+---
+title: Cookbook template
+slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template
+tags:
+  - CSS
+  - Meta
+translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template
+---
+<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>
+
+<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>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p><em>Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire.</em></p>
+
+<h2 id="Recette">Recette</h2>
+
+<p><em>Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin.</em></p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
+
+<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>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p><em>Expliquez ici les décisions prises pour réaliser cette  recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement.</em></p>
+
+<h2 id="Méthodes_de_recours_ou_alternatives">Méthodes de recours ou alternatives</h2>
+
+<p><em>S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici.</em></p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p><em>Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette.</em></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p><em>Inclure ici les données de compatibilité pour les principales propriétés utilisées. Comme exemple, voici comment faire pour inclure les données concernant <code>align-items</code>.</em></p>
+
+<h3 id="align-items">align-items</h3>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><em>Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}</em></li>
+ <li><em>Liens vers des articles qui expliquent comment utiliser telles propriétés en contexte</em></li>
+ <li><em>Liens vers des ressources externes. Il ne faut pas hésiter à pointer vers de bonnes ressources externes mais leur contenu ne doit pas se limiter à des points de détail.</em></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html b/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html
new file mode 100644
index 0000000000..b356d20339
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html
@@ -0,0 +1,104 @@
+---
+title: Contribuer à une recette
+slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette
+tags:
+  - CSS
+  - Guide
+  - MDN
+  - Meta
+translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe
+---
+<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>
+
+<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>
+</div>
+
+<h2 id="Les_étapes_pour_la_publication">Les étapes pour la publication</h2>
+
+<p>Une recette se décompose comme suit :</p>
+
+<ol>
+ <li>Un exemple interactif, stocké <a href="https://github.com/mdn/css-examples">sur le dépôt GitHub des exemples CSS</a></li>
+ <li>Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS.</li>
+ <li>Une page MDN, rattachée à la section <a href="/fr/docs/Web/CSS/Layout_cookbook">Livre de recettes CSS</a> qui contient :
+  <ol>
+   <li>Les spécifications sommaires</li>
+   <li>La recette</li>
+   <li>Les choix effectués</li>
+   <li>Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive)</li>
+   <li>Les points relatifs à l'accessibilité</li>
+   <li>La compatibilité des navigateurs</li>
+   <li>D'éventuelles ressources additionnelles</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="1._Construire_le_motif">1. Construire le motif</h3>
+
+<p>Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple.</p>
+
+<p>Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens.</p>
+
+<h3 id="2._Créer_un_exemple_interactif">2. Créer un exemple interactif</h3>
+
+<p>Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs.</p>
+
+<p>Créez un <em>fork</em> du <a href="https://github.com/mdn/css-examples">dépôt des exemples CSS</a> puis étudiez le dossier <code>css-cookbook</code>. Ce dernier contient un fichier <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template.html">cookbook-template.html</a> dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire <code>css-cookbook</code> avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties.</p>
+
+<p>Voici les quelques éléments importants.</p>
+
+<p>Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels.</p>
+
+<p>Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif.</p>
+
+<p>Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe <code>preview</code> puis dans l'élément <code>textarea</code> <code>playable-html</code>.</p>
+
+<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>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>
+
+<h4 id="Quelques_conseils">Quelques conseils</h4>
+
+<ol>
+ <li>N'indentez pas le code CSS et HTML à l'intérieur des <code>textarea</code> par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> par exemple).</li>
+ <li>Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente.</li>
+ <li>Vous pouvez ajuster la hauteur des <code>textarea</code> en modifiant la hauteur dans les styles <em>inline</em>/en incise.</li>
+</ol>
+
+<h3 id="3._Créer_une_version_téléchargeable">3. Créer une version téléchargeable</h3>
+
+<p>L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant <code>--download</code> au nom. Ainsi, <code>center.html</code> possède une version téléchargeable intitulée <code>center--download.html</code>. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à <code>body</code> et qui sont dans la feuille de style intégrée. Vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template--download.html">cookbook-template--download.html</a> comme exemple et point de départ.</p>
+
+<h3 id="4._Réaliser_une_pull_request_avec_votre_exemple">4. Réaliser une <em>pull request</em> avec votre exemple</h3>
+
+<p>Ouvrez une <em>pull request</em> depuis votre <em>fork</em> vers le <a href="https://github.com/mdn/css-examples">dépôt des exemples CSS</a>. Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la <em>pull request</em>, veuillez écrire une présentation de cette recette et des concepts que vous illustrez.</p>
+
+<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>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>
+</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>
+
+<p>Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur <a href="https://discourse.mozilla.org/c/mdn">le forum Discourse de MDN</a> ou à venir <a href="/fr/docs/MDN/Rejoindre_la_communauté/Conversations#Chat_sur_IRC">discuter sur IRC</a> (ces deux canaux sont principalement anglophones).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Page modèle d'une recette</a></li>
+ <li><a href="https://github.com/mdn/css-examples">Dépôt git des exemples CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html b/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html
new file mode 100644
index 0000000000..140cc9a35a
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html
@@ -0,0 +1,129 @@
+---
+title: Disposition en colonnes
+slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
+tags:
+  - CSS
+  - Guide
+  - Multi-col
+  - flexbox
+  - grid
+translation_of: Web/CSS/Layout_cookbook/Column_layouts
+---
+<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><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>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :</p>
+
+<ul>
+ <li>Un fil continu qui se divise en colonne, à la façon d'un journal papier.</li>
+ <li>Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.</li>
+ <li>Plusieurs lignes et colonnes qui sont alignées.</li>
+</ul>
+
+<h2 id="Les_«_recettes_»">Les « recettes »</h2>
+
+<p>Selon le scénario souhaité, on utilisera différentes méthodes de disposition.</p>
+
+<h3 id="Un_fil_continu_de_contenu_-_Disposition_multi-colonnes">Un fil continu de contenu - Disposition multi-colonnes</h3>
+
+<p>En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.</p>
+
+<p>L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}.</p>
+
+<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>
+</div>
+
+<p>On utilisera une disposition multi-colonnes lorsque :</p>
+
+<ul>
+ <li>On souhaite organiser le texte à la façon d'un journal imprimé</li>
+ <li>On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes</li>
+ <li>Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.</li>
+</ul>
+
+<h3 id="Une_seule_ligne_fragmentée_en_cellules_de_même_taille_—_Utilisation_des_boîtes_flexibles">Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles</h3>
+
+<p>Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur <code>row</code>. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.</p>
+
+<p>À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.</p>
+
+<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>
+</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>
+
+<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>
+</div>
+
+<p>On utilisera les boîtes flexibles pour :</p>
+
+<ul>
+ <li>Organiser des lignes ou colonnes d'objets indépendantes</li>
+ <li>Aligner les objets sur l'axe orthogonal au sens de lecture</li>
+ <li>Les cas où l'alignement d'une ligne sur l'autre n'est pas important</li>
+</ul>
+
+<h3 id="Aligner_des_objets_en_lignes_et_colonnes_—_Utilisation_d'une_grille">Aligner des objets en lignes et colonnes — Utilisation d'une grille</h3>
+
+<p>Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.</p>
+
+<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>
+</div>
+
+<p>On utiliser les grilles CSS lorsque :</p>
+
+<ul>
+ <li>On a des éléments/objets à organiser sur plusieurs lignes et colonnes</li>
+ <li>On souhaite pouvoir aligner les éléments sur les deux axes</li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="column-width">column-width</h3>
+
+<p>{{Compat("css.properties.column-width")}}</p>
+
+<h3 id="column-rule">column-rule</h3>
+
+<p>{{Compat("css.properties.column-rule")}}</p>
+
+<h3 id="flex">flex</h3>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h3 id="flex-wrap">flex-wrap</h3>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<h3 id="grid-template-columns">grid-template-columns</h3>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<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_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/grid_wrapper/index.html b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html
new file mode 100644
index 0000000000..0e2ed6385f
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html
@@ -0,0 +1,83 @@
+---
+title: Envelopper une grille
+slug: Web/CSS/Layout_cookbook/Grid_wrapper
+tags:
+  - CSS
+  - Guide
+  - Recette
+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>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Les éléments placés sur la grille devraient pouvoir être alignés au centre et/ou sur les bords.</p>
+
+<h2 id="Recette">Recette</h2>
+
+<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>
+</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 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>
+
+<h2 id="Méthodes_de_recours_ou_alternatives">Méthodes de recours ou alternatives</h2>
+
+<p>Si cette recette est utilisée pour une page entière, il peut s'avérer utile de définir <code>max-width</code> et des marges horzontales avec <code>auto</code> afin que le contenu soit centré horizontalement :</p>
+
+<pre class="brush: css">.grid {
+  max-width: 1200px;
+  margin: 0 auto; // on centre le conteneur en horizontal
+  display: grid;
+  /* Other grid code goes here */
+}
+
+/* On retire max-width et les marges si le navigateur */
+/* prend en charge les grilles */
+@supports (display: grid) {
+  .grid {
+    max-width: none;
+    margin: 0;
+  }
+}</pre>
+
+<p>Pour qu'un élément soit isolé et colle au bord du <em>viewport</em>, on peut utiliser cette astuce de <a href="https://una.im/">Una Kravets</a> :</p>
+
+<pre class="brush: css">.item {
+  width: 100vw;
+  margin-left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}</pre>
+
+<p>On a ainsi une méthode plus compatible mais qui ne permet pas d'aligner les éléments aussi facilement que sur une grille CSS.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Bien que les grilles CSS nous permettent potentiellement de positionner n'importe où on le souhaite, il est important que l'ordre des éléments dans le document soit le même que l'ordre visuel, utilisé pour la navigation (voir <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">les grilles CSS et l'accessibilité</a> pour plus de détails).</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="grid-template-columns"><code>grid-template-columns</code></h3>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="See_also" name="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>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>
diff --git a/files/fr/web/css/layout_cookbook/index.html b/files/fr/web/css/layout_cookbook/index.html
new file mode 100644
index 0000000000..dc96a66da3
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/index.html
@@ -0,0 +1,84 @@
+---
+title: CSS Layout cookbook
+slug: Web/CSS/Layout_cookbook
+tags:
+  - CSS
+  - Guide
+  - recettes
+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>
+
+<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>
+</div>
+
+<h2 id="Les_recettes">Les recettes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Recette</th>
+   <th scope="col">Description</th>
+   <th scope="col">Méthodes de disposition utilisées</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Media_objects">Objets avec média</a></td>
+   <td>Une boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page).</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a>, {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes">Colonnes</a></td>
+   <td>Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a>, <a href="/fr/docs/Web/CSS/CSS_Columns">Disposition multi-colonnes</a>, <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element">Centrer un élément</a></td>
+   <td>Comment centrer un élément horizontalement et verticalement.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Alignement des boîtes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant">Bas de page adhérant</a></td>
+   <td>Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (<em>viewport</em>) lorsque le contenu est plus petit que la zone ou le conteneur.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a>, <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée">Navigation segmentée</a></td>
+   <td>Un motif de navigation où certains liens sont séparés des autres.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb">Navigation avec un fil d'Ariane (<em>breadcrumb</em>)</a></td>
+   <td>Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs">Liste de groupes avec indicateurs</a></td>
+   <td>Afficher une liste d'éléments avec chacun un indicateur numérique.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Alignement des boîtes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></td>
+   <td>Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple).</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Alignement des boîtes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Carte">Carte</a></td>
+   <td>Un composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Envelopper une grille (<em>grid wrapper</em>)</a></td>
+   <td>Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contribuer_en_créant_une_recette">Contribuer en créant une recette</h2>
+
+<p>MDN est un wiki auquel vous pouvez contribuer, y compris en ajoutant une recette à celles-ci ! <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribuer_à_une_recette">Voir cette page</a> pour un modèle ainsi que les règles à suivre pour créer votre propre exemple.</p>
diff --git a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html b/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html
new file mode 100644
index 0000000000..6c3f1d171f
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html
@@ -0,0 +1,53 @@
+---
+title: Liste de groupes avec indicateurs
+slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/Layout_cookbook/List_group_with_badges
+---
+<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><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>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu.</p>
+
+<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+
+<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>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition.</p>
+
+<p>Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété <code>justify-content</code> avec la valeur <code>space-between</code>. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte.</p>
+
+<p>Pour aligner le contenu horizontalement, on utilise la propriété <code>align-items</code> afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser <code>align-items: flex-start</code> à la place.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes utilisées ici peuvent avoir une prise en charge différentes par les navigateurs. Se référer à chacun des tableaux pour avoir plus de détails.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="justify-content">justify-content</h3>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h3 id="align-items">align-items</h3>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h2 id="See_also" name="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>
+</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
new file mode 100644
index 0000000000..129ba33c40
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/media_objects/index.html
@@ -0,0 +1,89 @@
+---
+title: Objets avec média
+slug: Web/CSS/Layout_cookbook/Media_objects
+tags:
+  - CSS
+  - Guide
+  - Recette
+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><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Voici ce qu'on souhaite obtenir :</p>
+
+<ul>
+ <li>Un empilement des deux zones sur mobile et deux colonnes sur ordinateur</li>
+ <li>L'image peut être à gauche ou à droite</li>
+ <li>L'image peut être petite ou grande</li>
+ <li>Les objets avec média peuvent être imbriqués</li>
+ <li>L'objet avec média devrait dégager l'espace pour le contenu, quel que soit le côté le plus grand.</li>
+</ul>
+
+<h2 id="Recette">Recette</h2>
+
+<p class="codepen">{{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>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>On a ici choisi d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une grille</a> pour réaliser cet objet. cela permet de contrôler les deux dimensions lorsqu'on en a besoin. Ainsi, si on a besoin d'un pied de page avec un contenu au dessus, le pied de page peut être poussé sous l'objet.</p>
+
+<p>La grille permet également d'utiliser {{cssxref("fit-content")}} pour la piste contenant l'image. En utilisant <code>fit-content</code> avec une taille maximale de 200 pixels, lorsqu'on a une petite image (une icône), la piste est réduite à la taille de cette image. Si l'image est plus grande, la piste ne sera pas plus large que 200 pixels, de plus, l'image ayant {{cssxref("max-width ")}} avec 100%, elle sera redimensionnée afin de pouvoir tenir dans la colonne.</p>
+
+<p>En utilisant {{cssxref("grid-template-areas")}} pour dessiner la disposition, on peut voir le motif dans la feuille de style CSS. La grille est définie lorsqu'on a <code>max-width</code> qui vaut au moins 500 pixels et on a donc un empilement pour les plus petits écrans.</p>
+
+<p>En ajoutant une classe <code>media-flip</code>, on fournit une disposition alternative qui permet de changer le côté sur lequel l'image est affichée.</p>
+
+<p>Lorsqu'on imbrique un objet dans un autre, il faut le placer dans la deuxième piste en mode normal et sur la première lorsqu'on choisit d'inverser le côté de l'image.</p>
+
+<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+
+<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>
+
+<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>
+</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>
+
+<p>En revanche, il faudra retirer les marges appliquées aux objets et les largeurs superflues pour la grille (la propriété {{cssxref("gap")}} permet de contrôler l'espace entre et les pistes gèrent le reste du dimensionnement).</p>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="grid-template-areas">grid-template-areas</h3>
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h3 id="float">float</h3>
+
+<p>{{Compat("css.properties.float")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<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><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>
+
+<p> </p>
diff --git a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html b/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html
new file mode 100644
index 0000000000..8ba8d1ea7e
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html
@@ -0,0 +1,49 @@
+---
+title: Fil d'Ariane (breadcrumb)
+slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb
+tags:
+  - CSS
+  - Navigation
+translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+---
+<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 qui permette 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>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages.</p>
+
+<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>On utilise ici les attributs <code>aria-label</code> et <code>aria-current</code> afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Boîtes_flexibles">Boîtes flexibles</h3>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="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>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65.html">Fournir un fil d'Ariane</a></li>
+ <li><a href="https://tink.uk/using-the-aria-current-attribute/">Utiliser l'attribut <code>aria-current</code></a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html b/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html
new file mode 100644
index 0000000000..24cc872422
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html
@@ -0,0 +1,48 @@
+---
+title: Navigation segmentée
+slug: Web/CSS/Layout_cookbook/Navigation_segmentée
+tags:
+  - CSS
+  - Navigation
+  - flexbox
+translation_of: Web/CSS/Layout_cookbook/Split_Navigation
+---
+<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><img alt="Items separated into two groups." src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Une telle barre de navigation consiste généralement à avoir un élément écarté des autres. Pour cela, on va pouvoir utiliser les boîtes flexibles sans avoir besoin de deux conteneurs flexibles.</p>
+
+<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Ce composant utilise les marges automatiques et les boîtes flexibles pour séparer l'élément voulu.</p>
+
+<p>Une marge automatique absorbe tout l'espace disponible sur la direction à laquelle elle est appliquée. C'est comme cela qu'on peut centrer un bloc avec des marges automatiques, de chaque côté du bloc, la marge essaye de consommer le plus d'espace possible et <em>pousse</em> le bloc au milieu.</p>
+
+<p>Dans notre exemple, c'est la marge à gauche du dernier élément qui est automatique et qui consomme l'espace, poussant ainsi l'élément sur la droite. Pour déplacer la séparation, on peut appliquer la classe <code>push</code> à n'importe quel élément de la liste.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h4 id="Boîtes_flexibles">Boîtes flexibles</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="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>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/pagination/index.html b/files/fr/web/css/layout_cookbook/pagination/index.html
new file mode 100644
index 0000000000..5ab2bf1d11
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/pagination/index.html
@@ -0,0 +1,81 @@
+---
+title: Pagination
+slug: Web/CSS/Layout_cookbook/Pagination
+tags:
+  - CSS
+  - Guide
+  - Recette
+  - flexbox
+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><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>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Pour cette méthode de navigation, les éléments sont généralement affichés sur une ligne. Afin de s'assurer que la pagination est compréhensible pour les utilisateurs d'outils d'assistance, on balise les éléments dans une liste avec un élément {{htmlelement("nav")}} et on utilise CSS afin d'organiser visuellement l'ensemble sur une ligne.</p>
+
+<p>Généralement, l'outil de navigation sera centré horizontalement et placé sous le contenu.</p>
+
+<h2 id="Recette">Recette</h2>
+
+<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>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Pour obtenir ce résultat, on utilise <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a> avec une conteneur flexible imbriqué dans un autre. L'élément {{htmlelement("nav")}} est utilisé comme conteneur flexible afin de pouvoir en centrer le contenu grâce à la propriété {{cssxref("justify-content")}}.</p>
+
+<p>La liste est elle-même un conteneur flexible qui permet d'organiser ces éléments sur une lignes. Pour espacer les éléments, on utilise la propriété {{cssxref("margin")}} pour espacer les éléments entre eux.</p>
+
+<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+
+<p>Lorsque la propriété {{cssxref("column-gap")}} sera plus largement implémentée par les navigateurs, celle-ci pourra être utilisée à la place des marges pour espacer les éléments flexibles.</p>
+
+<pre class="brush: css">.pagination {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  column-gap: 2px;
+}
+</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est nécessaire qu'une personne utilisant un lecteur d'écran comprenne comment la navigation fonctionne et que cliquer sur un lien envoie vers une autre page. Aussi, on ajoute <code>aria-label="pagination"</code> sur l'élément <code>&lt;nav&gt;</code>.</p>
+
+<p>On a également ajouté du contenu qui pourra être lu par le lecteur d'écran mais qui est masqué visuellement et on a ajouter l'attribut <code>aria-hidden</code> sur les flèches de pagination.</p>
+
+<p>Voir la section « Voir aussi » en fin d'article pour divers liens portants sur l'accessibilité.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="justify-content">justify-content</h3>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h3 id="column-gap_in_Flex_layout">column-gap in Flex layout</h3>
+
+<p>{{Compat("css.properties.column-gap.flex_context")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{Cssxref("justify-content")}}</li>
+ <li>{{Cssxref("column-gap")}}</li>
+ <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>
+</ul>