@intlayer/docs 8.11.1 → 8.11.3

package/docs/fr/intlayer_with_astro_lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Lit i18n - Comment traduire une application Astro + Lit en 2026
-description: Apprenez à ajouter l'internationalisation (i18n) à votre site Astro + Lit avec Intlayer. Suivez ce guide pour rendre votre site multilingue.
+updatedAt: 2026-05-31
+title: Astro + Lit i18n - Guide complet pour traduire Astro + Lit
+description: Meilleure solution pour la taille du bundle, le SEO, les performances & la maintenabilité. Rendez votre Astro and Lit site web multilingue en 2026, traduction LLM, Agent Skills & MCP.
 keywords:
   - Internationalisation
   - Documentation
@@ -59,16 +59,47 @@ history:
 
 <TOC/>
 
-## Qu'est-ce qu'Intlayer ?
+## Pourquoi Intlayer plutôt que des alternatives ?
 
-**Intlayer** est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier le support multilingue dans les applications web modernes.
+Par rapport aux solutions principales telles que `astro-i18n` ou `i18next`, Intlayer est une solution dotée d'optimisations intégrées telles que :
 
-Avec Intlayer, vous pouvez :
+<AccordionGroup>
+<Accordion header="Support complet d'Astro">
 
-- **Gérer facilement vos traductions** en utilisant des dictionnaires déclaratifs au niveau des composants.
-- **Localiser dynamiquement les métadonnées**, les routes et le contenu.
-- **Assurer le support de TypeScript** avec des types autogénérés, améliorant l'autocomplétion et la détection d'erreurs.
-- **Bénéficier de fonctionnalités avancées** comme la détection dynamique de la locale et le changement de langue.
+Intlayer est optimisé pour s'intégrer parfaitement avec Astro en proposant le **routage multilingue**, la génération de **sitemap** et toutes les fonctionnalités nécessaires pour mettre à l'échelle votre internationalisation (i18n).
+
+</Accordion>
+<Accordion header="Taille du bundle">
+
+Au lieu de charger de lourds fichiers JSON dans vos pages, ne chargez que le contenu strictement nécessaire. Intlayer vous aide à **réduire la taille de votre bundle et de vos pages jusqu'à 50 %**.
+
+</Accordion>
+<Accordion header="Maintenabilité">
+
+Déclarer le contenu directement au plus près de vos composants **facilite la maintenance** des applications de grande envergure. Vous pouvez dupliquer ou supprimer le dossier d'une fonctionnalité sans le fardeau mental de devoir passer en revue toute votre base de code de contenu. De plus, Intlayer est **entièrement typé** pour garantir l'exactitude de vos traductions.
+
+</Accordion>
+<Accordion header="Prêt pour les agents IA">
+
+La colocalisation du contenu **réduit le contexte nécessaire** aux grands modèles de langage (LLM). Intlayer est également livré avec une suite d'outils, tels qu'une **CLI** pour vérifier les traductions manquantes, un **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/lsp.md)**, un **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md)** et des **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/agent_skills.md)**, afin de rendre l'expérience développeur (DX) encore plus fluide pour les agents IA.
+
+</Accordion>
+<Accordion header="Automatisation">
+
+Automatisez les traductions dans votre pipeline CI/CD en utilisant le LLM de votre choix au coût de votre propre fournisseur d'IA. Intlayer propose également un **compilateur** pour automatiser l'extraction de contenu, ainsi qu'une [plateforme web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md) pour vous aider à **traduire en arrière-plan**.
+
+</Accordion>
+<Accordion header="Performances">
+
+Associer de gros fichiers JSON à vos composants peut ralentir les performances et impacter la réactivité. Intlayer optimise le chargement du contenu directement au moment du **build**.
+
+</Accordion>
+<Accordion header="Collaboration avec les non-développeurs">
+
+Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md)** auto-hébergé et un **[CMS complet](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md)** pour gérer votre contenu multilingue en **temps réel**. Cela rend la collaboration avec les traducteurs, concepteurs-rédacteurs et autres membres de l'équipe extrêmement simple. Le contenu peut être stocké localement et/ou à distance.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -76,7 +107,9 @@ Avec Intlayer, vous pouvez :
 
 Voir le [Modèle d'application](https://github.com/aymericzip/intlayer-astro-template) sur GitHub.
 
-### Étape 1 : Installer les dépendances
+<Steps>
+
+<Step number={1} title="Installer les dépendances">
 
 Installez les packages nécessaires en utilisant votre gestionnaire de packages préféré :
 
@@ -119,7 +152,9 @@ bun x intlayer init
 - **@astrojs/lit**
   L'intégration Astro officielle qui permet d'utiliser des éléments personnalisés Lit sur vos pages Astro.
 
-### Étape 2 : Configurer votre projet
+</Step>
+
+<Step number={2} title="Configurer votre projet">
 
 Créez un fichier de configuration pour définir les langues de votre application :
 
@@ -143,7 +178,9 @@ export default config;
 
 > Via ce fichier de configuration, vous pouvez configurer les URL localisées, les redirections du middleware, les noms des cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et plus encore. Pour une liste complète des paramètres disponibles, consultez la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
 
-### Étape 3 : Intégrer Intlayer dans votre configuration Astro
+</Step>
+
+<Step number={3} title="Intégrer Intlayer dans votre configuration Astro">
 
 Ajoutez le plugin intlayer et l'intégration Lit à votre configuration Astro.
 
@@ -164,7 +201,9 @@ export default defineConfig({
 
 > L'intégration `lit()` permet d'utiliser des éléments personnalisés Lit sur vos pages Astro.
 
-### Étape 4 : Déclarer votre contenu
+</Step>
+
+<Step number={4} title="Déclarer votre contenu">
 
 Créez et gérez vos déclarations de contenu pour stocker vos traductions :
 
@@ -194,7 +233,9 @@ export default litDemoContent;
 
 > Pour plus d'informations, consultez la [documentation de déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md).
 
-### Étape 5 : Utiliser le contenu dans Astro
+</Step>
+
+<Step number={5} title="Utiliser le contenu dans Astro">
 
 Vous pouvez consommer les dictionnaires directement dans vos fichiers `.astro` en utilisant les helpers de base exportés par `intlayer`. Vous devez également ajouter des métadonnées SEO, telles que hreflang et des liens canoniques, sur chaque page. L'élément personnalisé Lit est importé via un `<script>` client et placé dans le body.
 
@@ -284,7 +325,9 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > - **`prefix-all` :** Toutes les URL ont un préfixe de langue. Vous pouvez utiliser un `[locale]` standard si vous n'avez pas besoin de gérer la racine séparément.
 > - **`search-param` ou `no-prefix` :** Pas besoin de dossier de locale. La locale est gérée via les paramètres de recherche ou les cookies.
 
-### Étape 6 : Créer l'élément personnalisé Lit
+</Step>
+
+<Step number={6} title="Créer l'élément personnalisé Lit">
 
 Créez l'élément personnalisé Lit. Appelez `installIntlayer` dans le `connectedCallback` avec la `locale` définie par le serveur pour initialiser le singleton Intlayer sur le client.
 
@@ -363,7 +406,9 @@ customElements.define("lit-demo", LitDemo);
 
 > `useIntlayer` est enregistré en tant que `ReactiveController`. L'élément se re-rendra automatiquement lors des changements de langue - aucun setup supplémentaire requis.
 
-### Étape 7 : Ajouter un sélecteur de langue
+</Step>
+
+<Step number={7} title="Ajouter un sélecteur de langue">
 
 La fonctionnalité de changement de langue est directement intégrée dans la méthode `render()` de l'élément personnalisé Lit (voir Étape 6 ci-dessus). Elle utilise `useLocale` de `lit-intlayer` et navigue vers l'URL localisée lorsqu'un utilisateur sélectionne une nouvelle langue :
 
@@ -409,7 +454,9 @@ override render() {
 > **Note sur la persistance :**
 > L’utilisation de `onLocaleChange` pour rediriger via `window.location.href` garantit que la nouvelle URL de langue est bien visitée, permettant au middleware Intlayer de définir le cookie de langue et de mémoriser la préférence de l’utilisateur pour les visites futures.
 
-### Étape 8 : Sitemap et Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap et Robots.txt">
 
 Intlayer fournit des utilitaires pour créer dynamiquement vos sitemaps localisés et fichiers robots.txt.
 
@@ -521,7 +568,9 @@ Pour plus d'informations sur l'utilisation de l'extension, consultez la [documen
 
 ---
 
-### (Optionnel) Étape 15 : Extraer le contenu de vos composants
+</Step>
+
+<Step number={15} title="Extraer le contenu de vos composants" isOptional={true}>
 
 Si vous avez une base de code existante, transformer des milliers de fichiers peut prendre beaucoup de temps.
 
@@ -622,3 +671,7 @@ bun run build # Or bun run dev
 ### Aller plus loin
 
 Vous pouvez également implémenter l'[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) ou externaliser votre contenu en utilisant un [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/fr/intlayer_with_astro_preact.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Preact i18n - Comment traduire une application Astro + Preact en 2026
-description: Apprenez à ajouter l'internationalisation (i18n) à votre site Astro + Preact avec Intlayer. Suivez ce guide pour rendre votre site multilingue.
+updatedAt: 2026-05-31
+title: Astro + Preact i18n - Guide complet pour traduire Astro + Preact
+description: Meilleure solution pour la taille du bundle, le SEO, les performances & la maintenabilité. Rendez votre Astro and Preact site web multilingue en 2026, traduction LLM, Agent Skills & MCP.
 keywords:
   - Internationalisation
   - Documentation
@@ -58,16 +58,47 @@ history:
 
 <TOC/>
 
-## Qu'est-ce qu'Intlayer ?
+## Pourquoi Intlayer plutôt que des alternatives ?
 
-**Intlayer** est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier le support multilingue dans les applications web modernes.
+Par rapport aux solutions principales telles que `astro-i18n` ou `i18next`, Intlayer est une solution dotée d'optimisations intégrées telles que :
 
-Avec Intlayer, vous pouvez :
+<AccordionGroup>
+<Accordion header="Support complet d'Astro">
 
-- **Gérer facilement vos traductions** en utilisant des dictionnaires déclaratifs au niveau des composants.
-- **Localiser dynamiquement les métadonnées**, les routes et le contenu.
-- **Assurer le support de TypeScript** avec des types autogénérés, améliorant l'autocomplétion et la détection d'erreurs.
-- **Bénéficier de fonctionnalités avancées** comme la détection dynamique de la locale et le changement de langue.
+Intlayer est optimisé pour s'intégrer parfaitement avec Astro en proposant le **routage multilingue**, la génération de **sitemap** et toutes les fonctionnalités nécessaires pour mettre à l'échelle votre internationalisation (i18n).
+
+</Accordion>
+<Accordion header="Taille du bundle">
+
+Au lieu de charger de lourds fichiers JSON dans vos pages, ne chargez que le contenu strictement nécessaire. Intlayer vous aide à **réduire la taille de votre bundle et de vos pages jusqu'à 50 %**.
+
+</Accordion>
+<Accordion header="Maintenabilité">
+
+Déclarer le contenu directement au plus près de vos composants **facilite la maintenance** des applications de grande envergure. Vous pouvez dupliquer ou supprimer le dossier d'une fonctionnalité sans le fardeau mental de devoir passer en revue toute votre base de code de contenu. De plus, Intlayer est **entièrement typé** pour garantir l'exactitude de vos traductions.
+
+</Accordion>
+<Accordion header="Prêt pour les agents IA">
+
+La colocalisation du contenu **réduit le contexte nécessaire** aux grands modèles de langage (LLM). Intlayer est également livré avec une suite d'outils, tels qu'une **CLI** pour vérifier les traductions manquantes, un **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/lsp.md)**, un **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md)** et des **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/agent_skills.md)**, afin de rendre l'expérience développeur (DX) encore plus fluide pour les agents IA.
+
+</Accordion>
+<Accordion header="Automatisation">
+
+Automatisez les traductions dans votre pipeline CI/CD en utilisant le LLM de votre choix au coût de votre propre fournisseur d'IA. Intlayer propose également un **compilateur** pour automatiser l'extraction de contenu, ainsi qu'une [plateforme web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md) pour vous aider à **traduire en arrière-plan**.
+
+</Accordion>
+<Accordion header="Performances">
+
+Associer de gros fichiers JSON à vos composants peut ralentir les performances et impacter la réactivité. Intlayer optimise le chargement du contenu directement au moment du **build**.
+
+</Accordion>
+<Accordion header="Collaboration avec les non-développeurs">
+
+Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md)** auto-hébergé et un **[CMS complet](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md)** pour gérer votre contenu multilingue en **temps réel**. Cela rend la collaboration avec les traducteurs, concepteurs-rédacteurs et autres membres de l'équipe extrêmement simple. Le contenu peut être stocké localement et/ou à distance.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -75,7 +106,9 @@ Avec Intlayer, vous pouvez :
 
 Voir le [Modèle d'application](https://github.com/aymericzip/intlayer-astro-template) sur GitHub.
 
-### Étape 1 : Installer les dépendances
+<Steps>
+
+<Step number={1} title="Installer les dépendances">
 
 Installez les packages nécessaires en utilisant votre gestionnaire de packages préféré :
 
@@ -118,7 +151,9 @@ bun x intlayer init
 - **@astrojs/preact**
   L'intégration Astro officielle qui permet d'utiliser des îles (islands) de composants Preact.
 
-### Étape 2 : Configurer votre projet
+</Step>
+
+<Step number={2} title="Configurer votre projet">
 
 Créez un fichier de configuration pour définir les langues de votre application :
 
@@ -142,7 +177,9 @@ export default config;
 
 > Via ce fichier de configuration, vous pouvez configurer les URL localisées, les redirections du middleware, les noms des cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et plus encore. Pour une liste complète des paramètres disponibles, consultez la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
 
-### Étape 3 : Intégrer Intlayer dans votre configuration Astro
+</Step>
+
+<Step number={3} title="Intégrer Intlayer dans votre configuration Astro">
 
 Ajoutez le plugin intlayer et l'intégration Preact à votre configuration Astro.
 
@@ -163,7 +200,9 @@ export default defineConfig({
 
 > L'intégration `preact()` permet d'utiliser des îles de composants Preact via `client:only="preact"`.
 
-### Étape 4 : Déclarer votre contenu
+</Step>
+
+<Step number={4} title="Déclarer votre contenu">
 
 Créez et gérez vos déclarations de contenu pour stocker vos traductions :
 
@@ -191,7 +230,9 @@ export default appContent;
 
 > Si votre fichier de contenu inclut du code TSX, vous devrez peut-être importer `import { h } from "preact";` ou vous assurer que votre pragma JSX est correctement configurée pour Preact.
 
-### Étape 5 : Utiliser le contenu dans Astro
+</Step>
+
+<Step number={5} title="Utiliser le contenu dans Astro">
 
 Vous pouvez consommer les dictionnaires directement dans vos fichiers `.astro` en utilisant les helpers de base exportés par `intlayer`. Vous devez également ajouter des métadonnées SEO, telles que hreflang et des liens canoniques, sur chaque page et intégrer une île Preact pour le contenu interactif côté client.
 
@@ -279,7 +320,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all` :** Toutes les URL ont un préfixe de langue. Vous pouvez utiliser un `[locale]` standard si vous n'avez pas besoin de gérer la racine séparément.
 > - **`search-param` ou `no-prefix` :** Pas besoin de dossier de locale. La locale est gérée via les paramètres de recherche ou les cookies.
 
-### Étape 6 : Créer le composant Île Preact
+</Step>
+
+<Step number={6} title="Créer le composant Île Preact">
 
 Créez un composant île qui enveloppe votre application Preact et reçoit la locale détectée par le serveur :
 
@@ -314,7 +357,9 @@ export const PreactIsland: FunctionalComponent<{ locale: LocalesValues }> = ({
 
 > Note : Dans Preact, utilisez `class` au lieu de `className` pour les attributs HTML.
 
-### Étape 7 : Ajouter un sélecteur de langue
+</Step>
+
+<Step number={7} title="Ajouter un sélecteur de langue">
 
 Créez un composant Preact `LocaleSwitcher` qui lit les locales disponibles et navigue vers l'URL localisée lorsqu'un utilisateur sélectionne une nouvelle langue :
 
@@ -364,7 +409,9 @@ export const LocaleSwitcher: FunctionalComponent = () => {
 
 > Le `LocaleSwitcher` doit être rendu à l'intérieur de l'`IntlayerProvider` - utilisez-le dans votre composant d'île (comme montré à l'Étape 6).
 
-### Étape 8 : Sitemap et Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap et Robots.txt">
 
 Intlayer fournit des utilitaires pour créer dynamiquement vos sitemaps localisés et fichiers robots.txt.
 
@@ -476,7 +523,9 @@ Pour plus d'informations sur l'utilisation de l'extension, consultez la [documen
 
 ---
 
-### (Optionnel) Étape 15 : Extraer le contenu de vos composants
+</Step>
+
+<Step number={15} title="Extraer le contenu de vos composants" isOptional={true}>
 
 Si vous avez une base de code existante, transformer des milliers de fichiers peut prendre beaucoup de temps.
 
@@ -577,3 +626,7 @@ bun run build # Or bun run dev
 ### Aller plus loin
 
 Vous pouvez également implémenter l'[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) ou externaliser votre contenu en utilisant un [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/fr/intlayer_with_astro_react.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-06
-title: Astro + React i18n - Comment traduire une application Astro + React en 2026
-description: Apprenez à ajouter l'internationalisation (i18n) à votre site Astro + React avec Intlayer. Suivez ce guide pour rendre votre site multilingue.
+updatedAt: 2026-05-31
+title: Astro + React i18n - Guide complet pour traduire Astro + React
+description: Meilleure solution pour la taille du bundle, le SEO, les performances & la maintenabilité. Rendez votre Astro and React site web multilingue en 2026, traduction LLM, Agent Skills & MCP.
 keywords:
   - Internationalisation
   - Documentation
@@ -61,16 +61,47 @@ history:
 
 <TOC/>
 
-## Qu'est-ce qu'Intlayer ?
+## Pourquoi Intlayer plutôt que des alternatives ?
 
-**Intlayer** est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier le support multilingue dans les applications web modernes.
+Par rapport aux solutions principales telles que `astro-i18n` ou `i18next`, Intlayer est une solution dotée d'optimisations intégrées telles que :
 
-Avec Intlayer, vous pouvez :
+<AccordionGroup>
+<Accordion header="Support complet d'Astro">
 
-- **Gérer facilement vos traductions** en utilisant des dictionnaires déclaratifs au niveau des composants.
-- **Localiser dynamiquement les métadonnées**, les routes et le contenu.
-- **Assurer le support de TypeScript** avec des types autogénérés, améliorant l'autocomplétion et la détection d'erreurs.
-- **Bénéficier de fonctionnalités avancées** comme la détection dynamique de la locale et le changement de langue.
+Intlayer est optimisé pour s'intégrer parfaitement avec Astro en proposant le **routage multilingue**, la génération de **sitemap** et toutes les fonctionnalités nécessaires pour mettre à l'échelle votre internationalisation (i18n).
+
+</Accordion>
+<Accordion header="Taille du bundle">
+
+Au lieu de charger de lourds fichiers JSON dans vos pages, ne chargez que le contenu strictement nécessaire. Intlayer vous aide à **réduire la taille de votre bundle et de vos pages jusqu'à 50 %**.
+
+</Accordion>
+<Accordion header="Maintenabilité">
+
+Déclarer le contenu directement au plus près de vos composants **facilite la maintenance** des applications de grande envergure. Vous pouvez dupliquer ou supprimer le dossier d'une fonctionnalité sans le fardeau mental de devoir passer en revue toute votre base de code de contenu. De plus, Intlayer est **entièrement typé** pour garantir l'exactitude de vos traductions.
+
+</Accordion>
+<Accordion header="Prêt pour les agents IA">
+
+La colocalisation du contenu **réduit le contexte nécessaire** aux grands modèles de langage (LLM). Intlayer est également livré avec une suite d'outils, tels qu'une **CLI** pour vérifier les traductions manquantes, un **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/lsp.md)**, un **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md)** et des **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/agent_skills.md)**, afin de rendre l'expérience développeur (DX) encore plus fluide pour les agents IA.
+
+</Accordion>
+<Accordion header="Automatisation">
+
+Automatisez les traductions dans votre pipeline CI/CD en utilisant le LLM de votre choix au coût de votre propre fournisseur d'IA. Intlayer propose également un **compilateur** pour automatiser l'extraction de contenu, ainsi qu'une [plateforme web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md) pour vous aider à **traduire en arrière-plan**.
+
+</Accordion>
+<Accordion header="Performances">
+
+Associer de gros fichiers JSON à vos composants peut ralentir les performances et impacter la réactivité. Intlayer optimise le chargement du contenu directement au moment du **build**.
+
+</Accordion>
+<Accordion header="Collaboration avec les non-développeurs">
+
+Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md)** auto-hébergé et un **[CMS complet](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md)** pour gérer votre contenu multilingue en **temps réel**. Cela rend la collaboration avec les traducteurs, concepteurs-rédacteurs et autres membres de l'équipe extrêmement simple. Le contenu peut être stocké localement et/ou à distance.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -78,7 +109,9 @@ Avec Intlayer, vous pouvez :
 
 Voir le [Modèle d'application](https://github.com/aymericzip/intlayer-astro-template) sur GitHub.
 
-### Étape 1 : Installer les dépendances
+<Steps>
+
+<Step number={1} title="Installer les dépendances">
 
 Installez les packages nécessaires en utilisant votre gestionnaire de packages préféré :
 
@@ -121,7 +154,9 @@ bun x intlayer init
 - **@astrojs/react**
   L'intégration Astro officielle qui permet d'utiliser des îles (islands) de composants React.
 
-### Étape 2 : Configurer votre projet
+</Step>
+
+<Step number={2} title="Configurer votre projet">
 
 Créez un fichier de configuration pour définir les langues de votre application :
 
@@ -145,7 +180,9 @@ export default config;
 
 > Via ce fichier de configuration, vous pouvez configurer les URL localisées, les redirections du middleware, les noms des cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et plus encore. Pour une liste complète des paramètres disponibles, consultez la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
 
-### Étape 3 : Intégrer Intlayer dans votre configuration Astro
+</Step>
+
+<Step number={3} title="Intégrer Intlayer dans votre configuration Astro">
 
 Ajoutez le plugin intlayer et l'intégration React à votre configuration Astro.
 
@@ -166,7 +203,9 @@ export default defineConfig({
 
 > L'intégration `react()` permet d'utiliser des îles de composants React via `client:only="react"`.
 
-### Étape 4 : Déclarer votre contenu
+</Step>
+
+<Step number={4} title="Déclarer votre contenu">
 
 Créez et gérez vos déclarations de contenu pour stocker vos traductions :
 
@@ -192,7 +231,9 @@ export default appContent;
 
 > Pour plus d'informations, consultez la [documentation de déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md).
 
-### Étape 5 : Utiliser le contenu dans Astro
+</Step>
+
+<Step number={5} title="Utiliser le contenu dans Astro">
 
 Vous pouvez consommer les dictionnaires directement dans vos fichiers `.astro` en utilisant les helpers de base exportés par `intlayer`. Vous devez également ajouter des métadonnées SEO, telles que hreflang et des liens canoniques, sur chaque page et intégrer une île React pour le contenu interactif côté client.
 
@@ -280,7 +321,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all` :** Toutes les URL ont un préfixe de langue. Vous pouvez utiliser un `[locale]` standard si vous n'avez pas besoin de gérer la racine séparément.
 > - **`search-param` ou `no-prefix` :** Pas besoin de dossier de locale. La locale est gérée via les paramètres de recherche ou les cookies.
 
-### Étape 6 : Créer le composant Île React
+</Step>
+
+<Step number={6} title="Créer le composant Île React">
 
 Créez un composant île qui enveloppe votre application React et reçoit la locale détectée par le serveur :
 
@@ -312,7 +355,9 @@ export function ReactIsland({ locale }: { locale: LocalesValues }) {
 
 > La prop `locale` est transmise de la page Astro (détection serveur) à l'`IntlayerProvider`, ce qui en fait la locale initiale pour tous les hooks React de l'arbre.
 
-### Étape 7 : Ajouter un sélecteur de langue
+</Step>
+
+<Step number={7} title="Ajouter un sélecteur de langue">
 
 Créez un composant React `LocaleSwitcher` qui lit les locales disponibles et navigue vers l'URL localisée lorsqu'un utilisateur sélectionne une nouvelle langue :
 
@@ -361,7 +406,9 @@ export function LocaleSwitcher() {
 
 > Le `LocaleSwitcher` doit être rendu à l'intérieur de l'`IntlayerProvider` - utilisez-le dans votre composant d'île (comme montré à l'Étape 6).
 
-### Étape 8 : Sitemap et Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap et Robots.txt">
 
 Intlayer fournit des utilitaires pour créer dynamiquement vos sitemaps localisés et fichiers robots.txt.
 
@@ -469,7 +516,9 @@ Pour plus d'informations sur l'utilisation de l'extension, consultez la [documen
 
 ---
 
-### (Optionnel) Étape 15 : Extraer le contenu de vos composants
+</Step>
+
+<Step number={15} title="Extraer le contenu de vos composants" isOptional={true}>
 
 Si vous avez une base de code existante, transformer des milliers de fichiers peut prendre beaucoup de temps.
 
@@ -570,3 +619,7 @@ bun run build # Or bun run dev
 ### Aller plus loin
 
 Vous pouvez également implémenter l'[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) ou externaliser votre contenu en utilisant un [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).
+
+</Step>
+
+</Steps>