@intlayer/docs 9.4.1 → 9.4.2

package/docs/fr/analytics.md

@@ -103,6 +103,21 @@ export default config;
 
 Si vous auto-hébergez (self-host) Intlayer, l'analytique pointe automatiquement vers votre propre instance puisqu'elle partage `editor.backendURL`.
 
+### Appeler l'API depuis le navigateur
+
+Le même jeton alimente un petit client sans identifiants, ce qui permet à un site statique ou une SPA de lire le contenu de son CMS au runtime sans serveur, sans server action et sans aucun secret dans le bundle :
+
+```ts fileName="content.ts"
+import { createPublicClient } from "@intlayer/api/public";
+
+const client = createPublicClient();
+
+const keys = await client.getDictionaryKeys();
+const [navbar] = await client.getDictionaries(["navbar"]);
+```
+
+Il s'authentifie lui-même à partir de `editor.clientId`, l'échange, la mise en cache et le renouvellement sont gérés en interne. Les scopes délimitent ce qu'il peut atteindre : le contenu de dictionnaire publié et l'ingestion d'analytique. Tout le reste (pousser des dictionnaires, lire un projet, dépenser des crédits IA) nécessite un identifiant réel, donc un serveur ou un utilisateur connecté.
+
 ### Désactiver l'analytique
 
 Le bloc optionnel `analytics` permet d'ajuster — ou de désactiver — la collecte :
@@ -134,6 +149,126 @@ Aucune modification de code n'est requise. Une fois que `@intlayer/analytics` es
 - enregistre un `page_view` à chaque changement de locale,
 - démarre la boucle de flush d'environ 20s et vide tous les événements restants au démontage / fermeture d'onglet (via `navigator.sendBeacon`, avec un repli vers `fetch(..., { keepalive: true })`).
 
+Le point d'entrée diffère selon le framework, mais dans tous les cas c'est celui que vous utilisez déjà pour configurer Intlayer, il n'y a donc rien de plus à ajouter :
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+    `IntlayerProvider` monte le provider d'analytique en interne.
+
+    ```tsx fileName="App.tsx"
+    import { IntlayerProvider } from "react-intlayer";
+
+    const App = () => (
+      <IntlayerProvider>
+        <Router />
+      </IntlayerProvider>
+    );
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    `next-intlayer` réexporte le `IntlayerProvider` de React, donc l'analytique est câblée de la même manière.
+
+    ```tsx fileName="app/[locale]/layout.tsx"
+    import { IntlayerProvider } from "next-intlayer";
+
+    const LocaleLayout = ({ children }) => (
+      <IntlayerProvider>{children}</IntlayerProvider>
+    );
+
+    export default LocaleLayout;
+    ```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+    Le plugin `intlayer` enregistre les hooks d'analytique sur le cycle de vie du composant racine.
+
+    ```javascript fileName="main.js"
+    import { createApp } from "vue";
+    import { intlayer } from "vue-intlayer";
+    import App from "./App.vue";
+
+    const app = createApp(App);
+
+    app.use(intlayer);
+
+    app.mount("#app");
+    ```
+
+    > Avec Nuxt, `nuxt-intlayer` installe le plugin pour vous : il n'y a rien à faire.
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+    `setupIntlayer()` démarre l'analytique depuis le composant qui configure Intlayer.
+
+    ```svelte fileName="src/routes/[[locale=locale]]/+layout.svelte"
+    <script lang="ts">
+      import { setupIntlayer } from "svelte-intlayer";
+      import type { Snippet } from "svelte";
+
+      let { children, data }: { children: Snippet, data: LayoutData } = $props();
+
+      $effect(() => {
+        setupIntlayer(data.locale);
+      });
+    </script>
+
+    {@render children()}
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+    `IntlayerProvider` monte le provider d'analytique en interne.
+
+    ```tsx fileName="app.tsx"
+    import { IntlayerProvider } from "preact-intlayer";
+
+    const App = () => (
+      <IntlayerProvider>
+        <Router />
+      </IntlayerProvider>
+    );
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+    `IntlayerProvider` monte le provider d'analytique de façon paresseuse (lazy), afin que ce chunk reste hors du chemin critique.
+
+    ```tsx fileName="App.tsx"
+    import { IntlayerProvider } from "solid-intlayer";
+
+    const App = () => (
+      <IntlayerProvider>
+        <Router />
+      </IntlayerProvider>
+    );
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    `provideIntlayer()` inclut déjà `provideIntlayerAnalytics()`.
+
+    ```ts fileName="app.config.ts"
+    import { provideIntlayer } from "angular-intlayer";
+    import type { ApplicationConfig } from "@angular/core";
+
+    export const appConfig: ApplicationConfig = {
+      providers: [provideIntlayer()],
+    };
+    ```
+
+    > N'utilisez `provideIntlayerAnalytics()` seul que si vous gérez les providers individuellement.
+
+  </Tab>
+</Tabs>
+
 ### Suivi automatique au niveau des nœuds
 
 Chaque fois que `useIntlayer` résout un élément de contenu pour l'affichage, l'interpréteur signale un événement `content_exposure` pour ce(tte) `dictionaryKey` + chemin de clé + locale exacte — là encore, aucune modification de code n'est requise. Les expositions répétées du même nœud dans une fenêtre de flush sont fusionnées en un seul événement avec un `count`, donc une liste qui se re-rend 50 fois n'envoie pas 50 événements.
@@ -142,34 +277,323 @@ Chaque fois que `useIntlayer` résout un élément de contenu pour l'affichage,
 
 Utilisez `useConversion()` pour attribuer un objectif à la variante qu'une session a vue :
 
-```tsx fileName="CTAButton.tsx" codeFormat="tsx"
-import { useConversion } from "react-intlayer";
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+    ```tsx fileName="CTAButton.tsx"
+    import { useConversion } from "react-intlayer";
+
+    const CTAButton = () => {
+      const trackConversion = useConversion();
+
+      return (
+        <button
+          onClick={() =>
+            trackConversion({
+              experimentKey: "homepage-hero",
+              variant: "black_friday",
+              goal: "cta_click",
+            })
+          }
+        >
+          Commencer
+        </button>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    ```tsx fileName="CTAButton.tsx"
+    "use client";
+
+    import { useConversion } from "next-intlayer";
+
+    const CTAButton = () => {
+      const trackConversion = useConversion();
+
+      return (
+        <button
+          onClick={() =>
+            trackConversion({
+              experimentKey: "homepage-hero",
+              variant: "black_friday",
+              goal: "cta_click",
+            })
+          }
+        >
+          Commencer
+        </button>
+      );
+    };
+    ```
+
+    > `useConversion` est un hook client : marquez le composant `"use client"`.
 
-const CTAButton = () => {
-  const trackConversion = useConversion();
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+    ```vue fileName="CTAButton.vue"
+    <script setup lang="ts">
+    import { useConversion } from "vue-intlayer";
+
+    const trackConversion = useConversion();
+    </script>
+
+    <template>
+      <button
+        @click="
+          trackConversion({
+            experimentKey: 'homepage-hero',
+            variant: 'black_friday',
+            goal: 'cta_click',
+          })
+        "
+      >
+        Commencer
+      </button>
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+    ```svelte fileName="CTAButton.svelte"
+    <script lang="ts">
+      import { useConversion } from "svelte-intlayer";
+
+      const trackConversion = useConversion();
+    </script>
 
-  return (
     <button
-      onClick={() =>
+      onclick={() =>
         trackConversion({
           experimentKey: "homepage-hero",
           variant: "black_friday",
           goal: "cta_click",
-        })
-      }
+        })}
     >
       Commencer
     </button>
-  );
-};
-```
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+    ```tsx fileName="CTAButton.tsx"
+    import { useConversion } from "preact-intlayer";
+
+    const CTAButton = () => {
+      const trackConversion = useConversion();
+
+      return (
+        <button
+          onClick={() =>
+            trackConversion({
+              experimentKey: "homepage-hero",
+              variant: "black_friday",
+              goal: "cta_click",
+            })
+          }
+        >
+          Commencer
+        </button>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+    ```tsx fileName="CTAButton.tsx"
+    import { useConversion } from "solid-intlayer";
+
+    const CTAButton = () => {
+      const trackConversion = useConversion();
+
+      return (
+        <button
+          onClick={() =>
+            trackConversion({
+              experimentKey: "homepage-hero",
+              variant: "black_friday",
+              goal: "cta_click",
+            })
+          }
+        >
+          Commencer
+        </button>
+      );
+    };
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    ```typescript fileName="cta-button.component.ts"
+    import { Component } from "@angular/core";
+    import { useConversion } from "angular-intlayer";
+
+    @Component({
+      selector: "app-cta-button",
+      template: `<button (click)="onClick()">Commencer</button>`,
+    })
+    export class CtaButtonComponent {
+      private trackConversion = useConversion();
+
+      onClick() {
+        this.trackConversion({
+          experimentKey: "homepage-hero",
+          variant: "black_friday",
+          goal: "cta_click",
+        });
+      }
+    }
+    ```
+
+  </Tab>
+</Tabs>
 
 ### Résolution d'une variante côté client
 
+`useExperiment()` attribue une variante à la session et enregistre l'exposition qui devient le dénominateur du taux de conversion. Conditionnez l'affichage du sous-arbre dépendant de la variante à `isAssigned` afin qu'aucun visiteur ne voie l'éclair du témoin (control) avant que l'attribution ne soit résolue :
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+    `variant` est une simple chaîne de caractères.
+
+    ```tsx fileName="Hero.tsx"
+    import { useExperiment } from "react-intlayer";
+    import { HeroBanner } from "./HeroBanner";
+
+    export const Hero = () => {
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+
+      if (!isAssigned) return null;
+
+      return <HeroBanner variant={variant} />;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    `variant` est une simple chaîne de caractères. L'attribution se produit dans le navigateur, donc le composant doit être un composant client.
+
+    ```tsx fileName="Hero.tsx"
+    "use client";
+
+    import { useExperiment } from "next-intlayer";
+    import { HeroBanner } from "./HeroBanner";
+
+    export const Hero = () => {
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+
+      if (!isAssigned) return null;
+
+      return <HeroBanner variant={variant} />;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+    `variant` et `isAssigned` sont des `Ref`s.
+
+    ```vue fileName="Hero.vue"
+    <script setup lang="ts">
+    import { useExperiment } from "vue-intlayer";
+    import HeroBanner from "./HeroBanner.vue";
+
+    const { variant, isAssigned } = useExperiment("homepage-hero", [
+      "default",
+      "black_friday",
+    ]);
+    </script>
+
+    <template>
+      <HeroBanner v-if="isAssigned" :variant="variant" />
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+    `variant` et `isAssigned` sont des stores : lisez-les avec le préfixe `$`.
+
+    ```svelte fileName="Hero.svelte"
+    <script lang="ts">
+      import { useExperiment } from "svelte-intlayer";
+      import HeroBanner from "./HeroBanner.svelte";
+
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+    </script>
+
+    {#if $isAssigned}
+      <HeroBanner variant={$variant} />
+    {/if}
+    ```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+    `variant` est une simple chaîne de caractères.
+
+    ```tsx fileName="Hero.tsx"
+    import { useExperiment } from "preact-intlayer";
+    import { HeroBanner } from "./HeroBanner";
+
+    export const Hero = () => {
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+
+      if (!isAssigned) return null;
+
+      return <HeroBanner variant={variant} />;
+    };
+    ```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+    `variant` et `isAssigned` sont des `Accessor`s : appelez-les pour lire la valeur.
+
+    ```tsx fileName="Hero.tsx"
+    import { useExperiment } from "solid-intlayer";
+    import { Show } from "solid-js";
+    import { HeroBanner } from "./HeroBanner";
+
+    export const Hero = () => {
+      const { variant, isAssigned } = useExperiment("homepage-hero", [
+        "default",
+        "black_friday",
+      ]);
+
+      return (
+        <Show when={isAssigned()}>
+          <HeroBanner variant={variant()} />
+        </Show>
+      );
+    };
+    ```
+
   </Tab>
   <Tab label="Angular" value="angular">
 
-`variant` et `isAssigned` sont des `Signal`s — appelez-les pour lire la valeur.
+    `variant` et `isAssigned` sont des `Signal`s — appelez-les pour lire la valeur.
 
     ```typescript fileName="hero.component.ts"
     import { Component } from "@angular/core";
@@ -277,7 +701,7 @@ const cms = createIntlayerCMS();
 const { data: audience } = await analyticsEndpoint(cms).getAudience(30);
 ```
 
-> **Côté serveur uniquement.** `createIntlayerCMS()` s'authentifie avec `clientId` + `clientSecret`, et le secret n'est jamais disponible dans le navigateur — ce snippet émettrait des requêtes non authentifiées s'il s'exécutait là. Conservez-le dans un gestionnaire de route, une action serveur ou un script.
+> **Côté serveur uniquement.** `createIntlayerCMS()` s'authentifie avec `clientId` + `clientSecret`, et le secret n'est jamais disponible dans le navigateur, ce snippet émettrait des requêtes non authentifiées s'il s'exécutait là. Conservez-le dans un gestionnaire de route, une action serveur ou un script.
 
 ## Liens utiles
 

package/docs/fr/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-08-22
+updatedAt: 2026-08-29
 title: Configuration
 description: Apprenez à configurer Intlayer pour votre application. Comprenez les différents paramètres et options disponibles pour personnaliser Intlayer selon vos besoins.
 keywords:
@@ -1124,3 +1124,101 @@ Paramètres qui contrôlent le compilateur Intlayer, qui extrait les dictionnair
 | Champ     | Description                           | Type               |
 | --------- | ------------------------------------- | ------------------ |
 | `plugins` | Liste des plugins Intlayer à activer. | `IntlayerPlugin[]` |
+
+## Questions fréquentes
+
+<FAQ>
+
+<Question title="Où doit se trouver le fichier intlayer.config.ts ?">
+
+À la racine de votre projet, à côté de `package.json`. Intlayer accepte aussi `intlayer.config.js`, `intlayer.config.mjs`, `intlayer.config.cjs` et le JSON, afin que le fichier corresponde au système de modules utilisé par votre projet.
+
+</Question>
+
+<Question title="Quel poids l'i18n ajoute-t-elle à la taille de mon bundle ?">
+
+Bien moins qu'une configuration basée sur des espaces de noms, car une page ne télécharge jamais un catalogue qu'elle n'affiche pas. Le balisage rendu côté serveur résout son contenu sur le serveur, et le compilateur au moment du build remplace les appels `useIntlayer` par les entrées de dictionnaire exactes qu'un composant utilise, si bien que les clés inutilisées et les langues inutilisées sont éliminées. Les [dictionnaires dynamiques](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/index.md) répartissent le reste par locale. Mesuré face aux alternatives habituelles, Intlayer réduit la taille du bundle et des pages jusqu'à 50 %. Voir l'[optimisation du bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/bundle_optimization.md) et le [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/benchmark/index.md).
+
+</Question>
+
+<Question title="Puis-je migrer depuis `i18next`, `next-intl` ou `react-i18next` sans réécrire mes composants ?">
+
+Oui, et il existe deux voies. Vous pouvez migrer le contenu progressivement avec le [guide de migration i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/migration_from_i18next_to_intlayer.md) ou le [guide de migration next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/migration_from_next-intl_to_intlayer.md). Ou vous pouvez conserver entièrement votre API actuelle : les [adaptateurs de compatibilité](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/compat/index.md) exposent exactement la même API que `i18next`, `react-i18next`, `next-intl`, `next-i18next`, `react-intl`, `use-intl`, `vue-i18n` et `Lingui`, mais servie par des dictionnaires Intlayer : seuls les imports changent, pas le code des composants.
+
+</Question>
+
+<Question title="Puis-je conserver mes fichiers de traduction JSON existants ?">
+
+Oui. Le [plugin de synchronisation JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/plugins/sync-json.md) conserve vos fichiers `/messages/{locale}/{namespace}.json` comme source de vérité et génère les dictionnaires Intlayer à partir d'eux, dans les deux sens. Un [plugin de synchronisation PO](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/plugins/sync-po.md) fait de même pour les catalogues gettext, et les [fichiers par locale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/per_locale_file.md) permettent de séparer le contenu par langue au lieu de regrouper les locales dans un seul fichier.
+
+</Question>
+
+<Question title="Dois-je déplacer mon contenu clé par clé ?">
+
+Non. Lancez `npx intlayer extract` et Intlayer lit vos fichiers source, en extrait les chaînes destinées aux utilisateurs et écrit un fichier `.content` à côté de chacun, de sorte que vous relisez un diff plutôt que de copier des chaînes dans un catalogue une par une. Voir la [commande extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/extract.md).
+
+Pour un pipeline entièrement automatisé, le [compilateur Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/compiler.md) fait la même chose au moment du build sur du code source JSX, TSX, Vue et Svelte, en générant les dictionnaires à chaque changement, de sorte qu'il n'y a aucune clé à maintenir à la main. Il fonctionne par analyse statique : les chaînes qui n'existent qu'à l'exécution restent hors de portée, et il a besoin de quelques annotations pour distinguer le texte destiné aux utilisateurs de la logique applicative.
+
+</Question>
+
+<Question title="Quels outils d'éditeur et d'agent IA sont disponibles ?">
+
+Cinq éléments, tous optionnels :
+
+- **[Extension VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/vs_code_extension.md)** : passez d'une clé `useIntlayer` au fichier de contenu qui la déclare, extrayez du contenu depuis un composant, et lancez build, fill, test, push et pull depuis la palette de commandes ou un onglet Intlayer dédié.
+- **[Serveur LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/lsp.md)** : la même connaissance dans tout éditeur qui parle LSP, avec aller à la définition, rechercher toutes les références, aperçus au survol d'une valeur traduite, autocomplétion des clés et des champs, et un avertissement lorsqu'une clé n'est déclarée nulle part. Il résout aussi les appels `i18next`, `react-i18next`, `next-intl` et `use-intl`, ce qui aide pendant la migration.
+- **[Serveur MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md)** : expose la documentation et la CLI d'Intlayer à Cursor, VS Code, Claude Desktop, Claude Code et ChatGPT, afin qu'un assistant réponde à partir de la documentation actuelle au lieu de deviner, et puisse exécuter lui-même des commandes telles que `intlayer fill`.
+- **[Compétences d'agent](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/agent_skills.md)** : des compétences ciblées telles que `intlayer-config`, `intlayer-cli` et `intlayer-content`, plus une par framework, qui apprennent à un agent votre configuration de routage et les types de nœuds de contenu.
+- **[Plugin ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/eslint.md)** : `no-raw-text` signale les chaînes codées en dur, avec d'autres règles pour les clés de dictionnaire statiques et le contenu inutilisé.
+
+</Question>
+
+<Question title="Comment ajouter une nouvelle langue à mon application ?">
+
+Ajoutez la locale à `internationalization.locales`, puis lancez `npx intlayer fill` pour traduire le contenu existant vers celle-ci. Les types générés se mettent à jour en même temps, si bien que tout fichier de contenu auquel il manque la nouvelle locale devient une erreur de type plutôt qu'un repli silencieux.
+
+</Question>
+
+<Question title="Comment retirer le préfixe de locale de mes URL ?">
+
+Définissez `routing.mode`. La valeur par défaut `"prefix-no-default"` donne `/about` pour la locale par défaut et `/fr/about` pour les autres. `"prefix-all"` préfixe toutes les locales. `"no-prefix"` maintient la locale entièrement hors du chemin et la résout à partir d'un cookie, d'un en-tête ou d'un domaine. `"search-params"` la place dans la chaîne de requête sous la forme `/about?locale=fr`.
+
+</Question>
+
+<Question title="Puis-je servir chaque langue depuis son propre domaine ?">
+
+Oui. `routing.domains` associe une locale à un nom d'hôte, par exemple `{ fr: 'example.fr', en: 'example.com' }`. Le domaine identifie la locale, donc aucun préfixe n'est ajouté au chemin, et `getLocalizedUrl` renvoie une URL absolue sur le bon domaine.
+
+</Question>
+
+<Question title="Comment la langue de l'utilisateur est-elle détectée ?">
+
+Via `routing.storage`, qui liste les sources à lire dans l'ordre, généralement l'URL, puis un cookie, puis l'en-tête `Accept-Language`. Un choix explicite de l'utilisateur est persisté afin qu'il l'emporte à la visite suivante.
+
+</Question>
+
+<Question title="Que fait routing.enableProxy ?">
+
+Il contrôle le proxy de routage de locale, le middleware qui résout les préfixes et effectue les redirections. Laissé non défini, le proxy s'exécute mais les serveurs de développement et de prévisualisation ignorent la locale stockée comme source de redirection, ce qui évite d'être renvoyé vers une langue que vous ne testez pas ; la production se comporte comme si sa valeur était `true`. Réglez-le sur `false` pour gérer vous-même le routage de locale.
+
+</Question>
+
+<Question title="Quelle est la différence entre importMode static, dynamic et fetch ?">
+
+`"static"`, la valeur par défaut, importe les dictionnaires de manière statique afin qu'ils soient inclus dans le bundle et lus de manière synchrone. `"dynamic"` les importe via Suspense, si bien qu'une locale n'est téléchargée que lorsqu'un composant l'affiche, ce qui est ce que vous voulez pour de grands ensembles de contenu. `"fetch"` les récupère depuis l'API de synchronisation en direct et se replie sur `"dynamic"` en cas d'échec. Voir l'[optimisation du bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/bundle_optimization.md) et les [dictionnaires dynamiques](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/index.md).
+
+</Question>
+
+<Question title="Où définir le fournisseur d'IA et la clé d'API pour la traduction automatique ?">
+
+Soit dans le fichier de configuration, soit en ligne de commande avec `--provider`, `--model` et `--api-key`. La clé reste la vôtre : les appels de traduction partent de votre machine ou de votre runner CI vers le fournisseur que vous avez choisi, si bien que rien ne transite par un tiers. Voir la [commande fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/fill.md).
+
+</Question>
+
+<Question title="Dois-je redémarrer le serveur de développement après avoir changé la configuration ?">
+
+En général non. Le watcher d'Intlayer surveille `intlayer.config.ts` lui-même : à l'enregistrement, il recharge la configuration et prépare de nouveau les dictionnaires, si bien qu'ajouter une locale ou changer un mode de routage est pris en compte comme un changement de contenu. Cependant, la configuration peut être mise en cache par les systèmes. Redémarrer votre application peut être une bonne solution.
+
+</Question>
+
+</FAQ>

package/docs/fr/dictionary/content_file.md

@@ -363,15 +363,15 @@ Transforme le dictionnaire en un dictionnaire par locale où chaque champ décla
 
 **Exemple :**
 
-```json
+```jsonc
 // Dictionnaire par langue
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // Ceci devient un nœud de traduction pour 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -440,7 +440,7 @@ Instructions pour remplir automatiquement le contenu du dictionnaire à partir d
 
 **Exemples :**
 
-```json
+```jsonc
 // Activer pour toutes les locales
 {
   "autoFill": true

package/docs/fr/dictionary/markdown.md

@@ -51,6 +51,7 @@ Vous pouvez déclarer du contenu Markdown en utilisant la fonction `md` ou simpl
 
 <Tabs>
   <Tab label=".content.md" value=".content.md">
+
     Depuis la version `8.10.0`, vous pouvez déclarer du contenu Markdown directement dans des fichiers `.content.md`. Intlayer détectera et analysera automatiquement le contenu Markdown.
 
     ```md fileName="markdown-file.en.content.md"
@@ -96,6 +97,7 @@ Vous pouvez déclarer du contenu Markdown en utilisant la fonction `md` ou simpl
     ```
 
   </Tab>
+
   <Tab label="Fichiers Externes" value="external-files">
     Importez des fichiers `.md` directement en utilisant la fonction `file`.
 
@@ -129,6 +131,7 @@ Vous pouvez déclarer du contenu Markdown en utilisant la fonction `md` ou simpl
     ```
 
   </Tab>
+
 </Tabs>
 
 ## Rendu Markdown
@@ -957,7 +960,21 @@ Le `MarkdownProvider` (ou son équivalent dans un framework) configure le pipeli
   </Tab>
   <Tab label="Angular" value="angular">
 
-> MDX est supporté — tout nom de composant utilisé dans votre Markdown (par exemple `<MyCustomJSXComponent />`) est résolu par rapport au mapping `components`.
+    ```typescript fileName="app.config.ts"
+    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
+
+    export const appConfig: ApplicationConfig = {
+      providers: [
+        createIntlayerMarkdownProvider({
+          components: {
+            h1: { class: "text-2xl font-bold" },
+          },
+        }),
+      ],
+    };
+    ```
+
+    > MDX est supporté — tout nom de composant utilisé dans votre Markdown (par exemple `<MyCustomJSXComponent />`) est résolu par rapport au mapping `components`.
 
 Vous pouvez également utiliser votre propre moteur de rendu Markdown :