i18n(fr): Update guides/integrations-guide/markdoc from withastro#8167 …

…(Steeeeps)

Signed-off-by: Thomas Bonnet <[email protected]>

src/content/docs/fr/guides/integrations-guide/markdoc.mdx

@@ -8,6 +8,7 @@ i18nReady: true
 ---
 import { FileTree } from '@astrojs/starlight/components';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import { Steps } from '@astrojs/starlight/components';
 import ReadMore from '~/components/ReadMore.astro';
 
 Cette **[intégration Astro][astro-integration]** permet d'utiliser [Markdoc](https://markdoc.dev/) pour créer des composants, des pages et des entrées de collection de contenu.
@@ -411,6 +412,7 @@ Le composant Astro `<Image />` ne peut pas être utilisé directement dans Markd
 
 Pour remplacer le nœud d'image par défaut, vous pouvez configurer un composant `.astro` qui sera affiché à la place d'un `<img>` standard.
 
+<Steps>
 1. Créez un composant `MarkdocImage.astro` personnalisé pour passer les propriétés `src` et `alt` de votre image au composant `<Image />` :
 
     ```astro title="src/components/MarkdocImage.astro"
@@ -467,13 +469,15 @@ Pour remplacer le nœud d'image par défaut, vous pouvez configurer un composant
     <!-- Non optimisé <img> -->
     ![Une photo de chien](https://example.com/chien.jpg) 
     ```
+</Steps>
 
 #### Créer une balise d'image Markdoc personnalisée
 
 Une balise Markdoc `image` vous permet de définir des attributs supplémentaires sur votre image qui ne sont pas possibles avec la syntaxe ` ![]()`. Par exemple, les balises d'images personnalisées vous permettent d'utiliser le composant `<Image />` d'Astro pour les images distantes qui nécessitent une `largeur` et une `hauteur`.
 
 Les étapes suivantes permettent de créer une balise image Markdoc personnalisée pour afficher un élément `<figure>` avec une légende, en utilisant le composant Astro `<Image />` pour optimiser l'image.
 
+<Steps>
 1. Créez un composant `MarkdocFigure.astro` pour recevoir les props nécessaires et afficher une image avec une légende :
 
     ```astro title="src/components/MarkdocFigure.astro"
@@ -517,7 +521,7 @@ Les étapes suivantes permettent de créer une balise image Markdoc personnalis
     ```md
     {% image src="./astro-logo.png" alt="Astro Logo" width="100" height="100" caption="une légende !" %}
     ```
-
+</Steps>
 
 ### Configuration de Markdoc