i18n(fr): Update components, configuration, sidebar and customization files (#1414)

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

4 files changed, 104 insertions, 41 deletions

diff --git a/docs/src/content/docs/fr/guides/components.mdx b/docs/src/content/docs/fr/guides/components.mdx
index b3d31c0c..b02ba06f 100644
--- a/docs/src/content/docs/fr/guides/components.mdx
+++ b/docs/src/content/docs/fr/guides/components.mdx
@@ -205,3 +205,49 @@ Le code ci-dessus génère ce qui suit sur la page :
 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.
+
+Consultez la documentation [du « composant Code » d'Expressive Code](https://expressive-code.com/key-features/code-component/) pour plus de détails sur les props que `<Code>` supporte.
+
+```mdx
+# src/content/docs/exemple.mdx
+
+import { Code } from '@astrojs/starlight/components';
+
+export const exampleCode = `console.log("Cela peut provenir d'un fichier ou d'un CMS !");`;
+export const fileName = 'exemple.js';
+export const highlights = ["fichier", "CMS"];
+
+<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />
+```
+
+Le code ci-dessus génère ce qui suit sur la page :
+
+import { Code } from '@astrojs/starlight/components';
+
+export const exampleCode = `console.log("Cela peut provenir d'un fichier ou d'un CMS !");`;
+export const fileName = 'exemple.js';
+export const highlights = ["fichier", "CMS"];
+
+<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />
+
+#### Code importé
+
+Utilisez [le suffixe d'import `?raw` de Vite](https://vitejs.dev/guide/assets#importing-asset-as-string) pour importer n'importe quel fichier de code sous forme de chaîne de caractères.
+Vous pouvez ensuite passer cette chaîne importée au composant `<Code>` pour l'inclure dans votre page.
+
+```mdx title="src/content/docs/exemple.mdx" "?raw"
+import { Code } from '@astrojs/starlight/components';
+import importedCode from '/src/env.d.ts?raw';
+
+<Code code={importedCode} lang="ts" title="src/env.d.ts" />
+```
+
+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" />
\ No newline at end of file
diff --git a/docs/src/content/docs/fr/guides/customization.mdx b/docs/src/content/docs/fr/guides/customization.mdx
index bc9020ab..437238be 100644
--- a/docs/src/content/docs/fr/guides/customization.mdx
+++ b/docs/src/content/docs/fr/guides/customization.mdx
@@ -277,6 +277,25 @@ hero:
 ---
 ```
 
+### Désactiver la page 404 par défaut
+
+Si votre projet nécessite une mise en page entièrement personnalisée pour votre page 404, vous pouvez créer une route `src/pages/404.astro` et définir l'option de configuration [`disable404Route`](/fr/reference/configuration/#disable404route) pour désactiver la route par défaut de Starlight :
+
+```js {9}
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+export default defineConfig({
+	integrations: [
+		starlight({
+			title: 'Documentation avec 404 personnalisée',
+			disable404Route: true,
+		}),
+	],
+});
+```
+
 ## Polices personnalisées
 
 Par défaut, Starlight utilise des polices sans empattement disponibles en local sur la machine du visiteur pour tout les textes.
@@ -345,37 +364,41 @@ Pour utiliser Google Fonts, suivez le [Guide de configuration de Fontsource](#co
 Le projet [Fontsource](https://fontsource.org/) simplifie l’utilisation des polices Google et d’autres polices open source.
 Il fournit des modules npm que vous pouvez installer pour les polices que vous souhaitez utiliser et inclut des fichiers CSS prêts à l’emploi à ajouter à votre projet.
 
-1.  Trouvez la police que vous souhaitez utiliser dans le [catalogue de Fontsource](https://fontsource.org/). Cet exemple utilisera [IBM Plex Serif](https://fontsource.org/fonts/ibm-plex-serif).
+1.  Trouvez la police que vous souhaitez utiliser dans le [catalogue de Fontsource](https://fontsource.org/).
+    Cet exemple utilisera [IBM Plex Serif](https://fontsource.org/fonts/ibm-plex-serif).
 
-2.  Installez le package pour la police choisie. Vous pouvez trouver le nom du package en cliquant sur "Installer" sur la page de police Fontsource.
+2.  Installez le package pour la police choisie.
+    Vous pouvez trouver le nom du package en cliquant sur "Installer" sur la page de police Fontsource.
 
         <Tabs>
 
     <TabItem label="npm">
 
-            ```sh
-            npm install @fontsource/ibm-plex-serif
-            ```
+		```sh
+		npm install @fontsource/ibm-plex-serif
+		```
 
           </TabItem>
+
           <TabItem label="pnpm">
 
-            ```sh
-            pnpm add @fontsource/ibm-plex-serif
-            ```
+		```sh
+		pnpm add @fontsource/ibm-plex-serif
+		```
 
           </TabItem>
+
           <TabItem label="Yarn">
 
-            ```sh
-            yarn add @fontsource/ibm-plex-serif
-            ```
+		```sh
+		yarn add @fontsource/ibm-plex-serif
+		```
 
         </TabItem>
 
       </Tabs>
 
-3.  Ajoutez les fichiers CSS Fontsource au tableau `customCss` de Starlight dans `astro.config.mjs` :
+3.  Ajoutez les fichiers CSS Fontsource au tableau `customCss` de Starlight dans `astro.config.mjs` :
 
         ```diff lang="js"
         // astro.config.mjs
@@ -401,7 +424,7 @@ Il fournit des modules npm que vous pouvez installer pour les polices que vous s
 ### Utiliser vos polices personnalisées
 
 Une fois configurée, pour appliquer votre police personnalisée à votre site, utilisez le nom de la police que vous avez choisie dans un [fichier CSS personnalisé](/fr/guides/css-and-tailwind/#styles-css-personnalisés).
-Par exemple, pour remplacer la police par défaut de Starlight partout, définissez la propriété personnalisée `--sl-font` :
+Par exemple, pour remplacer la police par défaut de Starlight partout, définissez la propriété personnalisée `--sl-font` :
 
 ```css
 /* src/styles/custom.css */
@@ -412,7 +435,7 @@ Par exemple, pour remplacer la police par défaut de Starlight partout, définis
 ```
 
 Vous pouvez également écrire du CSS plus ciblé si vous souhaitez appliquer votre police de manière plus sélective.
-Par exemple, pour définir uniquement une police sur le contenu principal, mais pas sur les barres latérales :
+Par exemple, pour définir uniquement une police sur le contenu principal, mais pas sur les barres latérales :
 
 ```css
 /* src/styles/custom.css */
@@ -422,4 +445,4 @@ main {
 }
 ```
 
-Suivez les [instructions de CSS personnalisé](/fr/guides/css-and-tailwind/#styles-css-personnalisés) pour ajouter vos styles à votre site.
+Suivez les [instructions de CSS personnalisé](/fr/guides/css-and-tailwind/#styles-css-personnalisés) pour ajouter vos styles à votre site.
\ No newline at end of file
diff --git a/docs/src/content/docs/fr/guides/sidebar.mdx b/docs/src/content/docs/fr/guides/sidebar.mdx
index d595600b..610bb9ca 100644
--- a/docs/src/content/docs/fr/guides/sidebar.mdx
+++ b/docs/src/content/docs/fr/guides/sidebar.mdx
@@ -41,10 +41,7 @@ La barre latérale suivante sera automatiquement générée :
 		{
 			label: 'reference',
 			items: [
-				{
-					label: 'Référence de configuration',
-					link: '/reference/configuration/',
-				},
+				{ label: 'Référence de configuration', link: '/reference/configuration/', },
 			],
 		},
 	]}
@@ -141,7 +138,8 @@ La configuration ci-dessus génère la barre latérale suivante :
 
 Starlight peut générer automatiquement un groupe dans votre barre latérale en fonction d'un répertoire de votre documentation.
 Cela est utile lorsque vous ne souhaitez pas entrer manuellement chaque élément de la barre latérale dans un groupe.
-Les pages seront triées par ordre alphabétique en fonction du nom de fichier par défaut.
+
+Par défaut, les pages sont triées par ordre alphabétique selon le [`slug`](/fr/reference/overrides/#slug) du fichier.
 
 Ajoutez un groupe généré automatiquement en utilisant un objet avec les propriétés `label` et `autogenerate`. La configuration de `autogenerate` doit spécifier le répertoire à utiliser pour les entrées de la barre latérale avec la propriété `directory`. Par exemple, avec la configuration suivante :
 
@@ -184,10 +182,7 @@ La barre latérale suivante sera générée :
 				{
 					label: 'advanced',
 					items: [
-						{
-							label: 'Structure du projet',
-							link: '/guides/project-structure/',
-						},
+						{ label: 'Structure du projet', link: '/guides/project-structure/', },
 					],
 				},
 			],
@@ -208,8 +203,8 @@ title: Ma page
 sidebar:
   # Définit une étiquette personnalisée pour le lien dans la barre latérale
   label: Étiquette personnalisée
-  # Définit un ordre personnalisé pour le lien (les nombres plus petits
-  # sont affichés plus haut)
+  # Définit un ordre personnalisé pour le lien 
+  # (les nombres plus petits sont affichés plus haut)
   order: 2
   # Ajoute un badge au lien
   badge:
@@ -480,7 +475,7 @@ starlight({
 	sidebar: [
 		{
 			label: 'Guides',
-			// Rétracte le groupe et ses sous-groupes générés automatiquement
+			// Rétracte le groupe et ses sous-groupes générés automatiquement 
 			// par défaut.
 			collapsed: true,
 			autogenerate: { directory: 'guides' },
@@ -503,10 +498,7 @@ La configuration ci-dessus génère la barre latérale suivante :
 					label: 'advanced',
 					collapsed: true,
 					items: [
-						{
-							label: 'Structure du projet',
-							link: '/guides/project-structure/',
-						},
+						{ label: 'Structure du projet', link: '/guides/project-structure/', },
 					],
 				},
 			],
@@ -522,7 +514,7 @@ starlight({
 		{
 			label: 'Guides',
 			// Ne rétracte pas le groupe "Guides" mais rétracte ses
-			// sous-groupes générés automatiquement.
+      // sous-groupes générés automatiquement.
 			collapsed: false,
 			autogenerate: { directory: 'guides', collapsed: true },
 		},
@@ -543,10 +535,7 @@ La configuration ci-dessus génère la barre latérale suivante :
 					label: 'advanced',
 					collapsed: true,
 					items: [
-						{
-							label: 'Structure du projet',
-							link: '/guides/project-structure/',
-						},
+						{ label: 'Structure du projet', link: '/guides/project-structure/', },
 					],
 				},
 			],
diff --git a/docs/src/content/docs/fr/reference/configuration.mdx b/docs/src/content/docs/fr/reference/configuration.mdx
index 9bf9e229..b2b14f57 100644
--- a/docs/src/content/docs/fr/reference/configuration.mdx
+++ b/docs/src/content/docs/fr/reference/configuration.mdx
@@ -461,16 +461,14 @@ interface HeadConfig {
 
 Contrôlez si le pied de page affiche la date de la dernière mise à jour de la page.
 
-Par défaut, cette fonctionnalité s'appuie sur l'historique Git de votre dépôt et peut ne pas être précise sur certaines plateformes de déploiement effectuant des
-[clonages superficiels](https://git-scm.com/docs/git-clone#Documentation/git-clone.txt---depthltdepthgt). Une page peut remplacer ce paramètre ou
-la date basée sur Git en utilisant [le champ `lastUpdated` du frontmatter](/fr/reference/frontmatter/#lastupdated).
+Par défaut, cette fonctionnalité s'appuie sur l'historique Git de votre dépôt et peut ne pas être précise sur certaines plateformes de déploiement effectuant des [clonages superficiels](https://git-scm.com/docs/git-clone#Documentation/git-clone.txt---depthltdepthgt). Une page peut remplacer ce paramètre ou la date basée sur Git en utilisant [le champ `lastUpdated` du frontmatter](/fr/reference/frontmatter/#lastupdated).
 
 ### `pagination`
 
 **Type :** `boolean`  
 **Par défaut :** `true`
 
-Définnissez si le pied de page doit inclure des liens vers les pages précédentes et suivantes.
+Définissez si le pied de page doit inclure des liens vers les pages précédentes et suivantes.
 
 Une page peut remplacer ce paramètre ou le texte du lien et/ou l'URL en utilisant les champs de frontmatter [`prev`](/fr/reference/frontmatter/#prev) et [`next`](/fr/reference/frontmatter/#next).
 
@@ -516,6 +514,13 @@ Définit le délimiteur entre le titre de la page et le titre du site dans la ba
 Par défaut, chaque page a une balise `<title>` contenant `Titre de la page | Titre du site`.
 Par example, cette page a pour titre « Référence de configuration » et ce site a pour titre « Starlight », donc la balise `<title>` de cette page contient « Référence de configuration | Starlight ».
 
+### `disable404Route`
+
+**Type :** `boolean`  
+**Par défaut :** `false`
+
+Désactive l'injection de la [page 404](https://docs.astro.build/fr/core-concepts/astro-pages/#page-derreur-404-personnalis%C3%A9e) par défaut de Starlight. Pour utiliser une route personnalisée `src/pages/404.astro` dans votre projet, définissez cette option à `true`.
+
 ### `components`
 
 **Type :** `Record<string, string>`
@@ -547,4 +552,4 @@ starlight({
 });
 ```
 
-Consultez la [référence des modules d'extension](/fr/reference/plugins/) pour plus de détails pour créer vos propres modules d'extension.
+Consultez la [référence des modules d'extension](/fr/reference/plugins/) pour plus de détails pour créer vos propres modules d'extension.
\ No newline at end of file