convert content to md

1 files changed, 34 insertions, 38 deletions

diff --git a/files/fr/web/css/layout_cookbook/card/index.md b/files/fr/web/css/layout_cookbook/card/index.md
index 7e92b24421..eea4811054 100644
--- a/files/fr/web/css/layout_cookbook/card/index.md
+++ b/files/fr/web/css/layout_cookbook/card/index.md
@@ -9,72 +9,68 @@ tags:
 translation_of: Web/CSS/Layout_cookbook/Card
 original_slug: Web/CSS/Layout_cookbook/Carte
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<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>
+Dans ce guide, nous verrons comment créer des cartes (_cards_ en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.
 
-<p><img alt="Three card components in a row" src="cards.png"></p>
+![Three card components in a row](cards.png)
 
-<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+## Spécifications sommaires
 
-<p>Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.</p>
+Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.
 
-<p>Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.</p>
+Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.
 
-<p>Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.</p>
+Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.
 
-<h2 id="Recette">Recette</h2>
+## Recette
 
-<p>{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}</p>
+{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}
 
-<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>
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html).
 
-<h2 id="Choix_effectués">Choix effectués</h2>
+## Choix effectués
 
-<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>
+Chaque carte est organisée en utilisant [une grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) 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 :
 
-<pre class="brush: css">.card {
+```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>
+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 `1fr`. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant.
 
-<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>
+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.
 
-<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>
+> **Note :** 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 (_subgrid_), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.
 
-<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+## Méthodes alternatives
 
-<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>
+On pourrait également utiliser [les boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) 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>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>
+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 [une disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns) 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>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>
+Voir [la recette sur les colonnes](/fr/docs/Web/CSS/Layout_cookbook/Column_layouts) pour observer ces méthodes en action.
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<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>
+Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article [_Inclusive Components: Card_ (en anglais)](https://inclusive-components.design/cards/), écrit par Heydon Pickering, pour des explications détaillées à ce propos.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<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>
+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é.
 
-<h3 id="grid-template-columns">grid-template-columns</h3>
+### grid-template-columns
 
-<p>{{Compat("css.properties.grid-template-columns")}}</p>
+{{Compat("css.properties.grid-template-columns")}}
 
-<h3 id="grid-template-rows">grid-template-rows</h3>
+### grid-template-rows
 
-<p>{{Compat("css.properties.grid-template-rows")}}</p>
+{{Compat("css.properties.grid-template-rows")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <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>
+- {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}}
+- [_Inclusive Components: Card_ (en anglais)](https://inclusive-components.design/cards/)