i18n(fr): Update `components.mdx` and `guides/i18n.mdx` (#1575)

Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>

2 files changed, 144 insertions, 44 deletions

diff --git a/docs/src/content/docs/fr/guides/components.mdx b/docs/src/content/docs/fr/guides/components.mdx
index b504e78c..f02298c6 100644
--- a/docs/src/content/docs/fr/guides/components.mdx
+++ b/docs/src/content/docs/fr/guides/components.mdx
@@ -12,7 +12,7 @@ Starlight prend en charge l'utilisation de composants dans les fichiers [MDX](ht
 ## Utilisation d'un composant
 
 Vous pouvez utiliser un composant en l'important dans votre fichier MDX et en le rendant sous forme de balise JSX.
-Ces balises ressemblent à des balises HTML mais commencent par une lettre majuscule correspondant au nom de votre déclaration `import` :
+Ces balises ressemblent à des balises HTML, mais commencent par une lettre majuscule correspondant au nom de votre déclaration `import` :
 
 ```mdx
 ---
@@ -59,6 +59,7 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 Vous pouvez afficher une interface à onglets en utilisant les composants `<Tabs>` et `<TabItem>`.
 Chaque `<TabItem>` doit avoir un `label` à afficher aux utilisateurs.
+Utilisez l'attribut facultatif `icon` pour inclure l'une des [icônes intégrées de Starlight](#toutes-les-icônes) à côté de l'étiquette.
 
 ```mdx
 # src/content/docs/exemple.mdx
@@ -66,16 +67,24 @@ Chaque `<TabItem>` doit avoir un `label` à afficher aux utilisateurs.
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 <Tabs>
-	<TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
-	<TabItem label="Moons">Io, Europa, Ganymede</TabItem>
+	<TabItem label="Étoiles" icon="star">
+		Sirius, Véga, Bételgeuse
+	</TabItem>
+	<TabItem label="Lunes" icon="moon">
+		Io, Europa, Ganymède
+	</TabItem>
 </Tabs>
 ```
 
 Le code ci-dessus génère les onglets suivants sur la page :
 
 <Tabs>
-	<TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
-	<TabItem label="Moons">Io, Europa, Ganymede</TabItem>
+	<TabItem label="Étoiles" icon="star">
+		Sirius, Véga, Bételgeuse
+	</TabItem>
+	<TabItem label="Lunes" icon="moon">
+		Io, Europa, Ganymède
+	</TabItem>
 </Tabs>
 
 ### Cartes
@@ -85,39 +94,39 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 Vous pouvez afficher du contenu dans une boîte correspondant aux styles de Starlight en utilisant le composant `<Card>`.
 Enveloppez plusieurs cartes dans le composant `<CardGrid>` pour afficher les cartes côte à côte lorsqu'il y a suffisamment d'espace.
 
-Une `<Card>` nécessite un `title` et peut optionellement inclure un attribut `icon` fixé au nom de [l'une des icônes intégrées de Starlight](#toutes-les-icônes).
+Une `<Card>` nécessite un `title` et peut optionnellement inclure un attribut `icon` fixé au nom de [l'une des icônes intégrées de Starlight](#toutes-les-icônes).
 
 ```mdx
 # src/content/docs/exemple.mdx
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
-<Card title="Check this out">
+<Card title="Regardez-ça">
 	Contenu intéressant que vous souhaitez mettre en évidence.
 </Card>
 
 <CardGrid>
-	<Card title="Stars" icon="star">
-		Sirius, Vega, Betelgeuse
+	<Card title="Étoiles" icon="star">
+		Sirius, Véga, Bételgeuse
 	</Card>
-	<Card title="Moons" icon="moon">
-		Io, Europa, Ganymede
+	<Card title="Lunes" icon="moon">
+		Io, Europa, Ganymède
 	</Card>
 </CardGrid>
 ```
 
 Le code ci-dessus génère ce qui suit sur la page :
 
-<Card title="Check this out">
+<Card title="Regardez-ça">
 	Contenu intéressant que vous souhaitez mettre en évidence.
 </Card>
 
 <CardGrid>
-	<Card title="Stars" icon="star">
-		Sirius, Vega, Betelgeuse
+	<Card title="Étoiles" icon="star">
+		Sirius, Véga, Bételgeuse
 	</Card>
-	<Card title="Moons" icon="moon">
-		Io, Europa, Ganymede
+	<Card title="Lunes" icon="moon">
+		Io, Europa, Ganymède
 	</Card>
 </CardGrid>
 
@@ -234,33 +243,6 @@ D'autres contenus sont également pris en charge dans les encarts.
 Starlight fournit également une syntaxe personnalisée pour afficher des encarts dans du contenu Markdown et MDX comme alternative au composant `<Aside>`.
 Voir le guide de [« Création de contenu en Markdown »](/fr/guides/authoring-content/#encarts) pour plus de détails sur la syntaxe personnalisée.
 
-### Icônes
-
-import { Icon } from '@astrojs/starlight/components';
-import IconsList from '~/components/icons-list.astro';
-
-Starlight fournit un ensemble d'icônes courantes que vous pouvez afficher dans votre contenu à l'aide du composant `<Icon>`.
-
-Chaque `<Icon>` nécessite un [`name`](#toutes-les-icônes) et peut optionnellement inclure un attribut `label`, `size` et `color`.
-
-```mdx
-# src/content/docs/exemple.mdx
-
-import { Icon } from '@astrojs/starlight/components';
-
-<Icon name="star" color="goldenrod" size="2rem" />
-```
-
-Le code ci-dessus génère ce qui suit sur la page :
-
-<Icon name="star" color="goldenrod" size="2rem" />
-
-#### Toutes les icônes
-
-Une liste de toutes les icônes disponibles est affichée ci-dessous avec leurs noms associés. Cliquez sur une icône pour copier le code du composant.
-
-<IconsList />
-
 ### Code
 
 Utilisez le composant `<Code>` pour afficher du code avec coloration syntaxique lorsque l'utilisation d'un [bloc de code Markdown](/fr/guides/authoring-content/#blocs-de-code) n'est pas possible, par exemple, pour afficher des données provenant de sources externes comme des fichiers, des bases de données ou des API.
@@ -306,3 +288,120 @@ Le code ci-dessus génère ce qui suit sur la page :
 import importedCode from '/src/env.d.ts?raw';
 
 <Code code={importedCode} lang="ts" title="src/env.d.ts" />
+
+### Arborescence de fichiers
+
+Utilisez le composant `<FileTree>` pour afficher la structure d'un répertoire avec des icônes de fichiers et des sous-répertoires repliables.
+
+Spécifiez la structure de vos fichiers et répertoires avec une [liste Markdown non ordonnée](https://www.markdownguide.org/basic-syntax/#unordered-lists) dans `<FileTree>`.
+Créez un sous-répertoire en utilisant une liste imbriquée ou ajoutez un `/` à la fin d'un élément de liste pour l'afficher comme un répertoire sans contenu spécifique.
+
+La syntaxe suivante peut être utilisée pour personnaliser l'apparence de l'arborescence des fichiers :
+
+- Mettez en évidence un fichier ou un répertoire en mettant son nom en gras, par exemple `**README.md**`.
+- Ajoutez un commentaire à un fichier ou à un répertoire en ajoutant du texte après le nom.
+- Ajoutez des fichiers et des répertoires fictifs en utilisant soit `...` soit `…` comme nom.
+
+```mdx
+# src/content/docs/exemple.mdx
+
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+
+- astro.config.mjs un fichier **important**
+- package.json
+- README.md
+- src
+  - components
+    - **Header.astro**
+  - …
+- pages/
+
+</FileTree>
+```
+
+Le code ci-dessus génère ce qui suit sur la page :
+
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+
+- astro.config.mjs un fichier **important**
+- package.json
+- README.md
+- src
+  - components
+    - **Header.astro**
+  - …
+- pages/
+
+</FileTree>
+
+### Étapes
+
+Utilisez le composant `<Steps>` pour créer des listes de tâches numérotées.
+Cela est utile pour des guides étape par étape plus complexes où chaque étape doit être clairement mise en évidence.
+
+Entourez une liste ordonnée standard Markdown avec le composant `<Steps>`.
+Toute la syntaxe habituelle de Markdown est applicable à l'intérieur de `<Steps>`.
+
+````mdx title="src/content/docs/exemple.mdx"
+import { Steps } from '@astrojs/starlight/components';
+
+<Steps>
+
+1. Importez le composant dans votre fichier MDX :
+
+   ```js
+   import { Steps } from '@astrojs/starlight/components';
+   ```
+
+2. Entourez les éléments de votre liste ordonnée de `<Steps>`.
+
+</Steps>
+````
+
+Le code ci-dessus génère ce qui suit sur la page :
+
+import { Steps } from '@astrojs/starlight/components';
+
+<Steps>
+
+1. Importez le composant dans votre fichier MDX :
+
+	```js
+	import { Steps } from '@astrojs/starlight/components';
+	```
+
+2. Entourez les éléments de votre liste ordonnée de `<Steps>`.
+
+</Steps>
+
+### Icônes
+
+import { Icon } from '@astrojs/starlight/components';
+import IconsList from '~/components/icons-list.astro';
+
+Starlight fournit un ensemble d'icônes courantes que vous pouvez afficher dans votre contenu à l'aide du composant `<Icon>`.
+
+Chaque `<Icon>` nécessite un [`name`](#toutes-les-icônes) et peut optionnellement inclure un attribut `label`, `size` et `color`.
+
+```mdx
+# src/content/docs/exemple.mdx
+
+import { Icon } from '@astrojs/starlight/components';
+
+<Icon name="star" color="goldenrod" size="2rem" />
+```
+
+Le code ci-dessus génère ce qui suit sur la page :
+
+<Icon name="star" color="goldenrod" size="2rem" />
+
+#### Toutes les icônes
+
+Une liste de toutes les icônes disponibles est affichée ci-dessous avec leurs noms associés. Cliquez sur une icône pour copier le code du composant.
+
+<IconsList />
+
diff --git a/docs/src/content/docs/fr/guides/i18n.mdx b/docs/src/content/docs/fr/guides/i18n.mdx
index 03c50822..1be18944 100644
--- a/docs/src/content/docs/fr/guides/i18n.mdx
+++ b/docs/src/content/docs/fr/guides/i18n.mdx
@@ -204,7 +204,8 @@ Vous pouvez fournir des traductions pour les langues supplémentaires que vous s
    	"aside.note": "Note",
    	"aside.tip": "Tip",
    	"aside.caution": "Caution",
-   	"aside.danger": "Danger"
+   	"aside.danger": "Danger",
+	  "fileTree.directory": "Directory"
    }
    ```