# Internationalisation (i18n)

## Vue d'ensemble

Cookie Consent supporte nativement **7 langues européennes** avec détection automatique de la langue du navigateur.

## Langues supportées

| Langue | Code | Statut | Couverture |
|--------|------|--------|------------|
| 🇫🇷 Français | `fr` | ✅ Complet | 100% |
| 🇬🇧 English | `en` | ✅ Complet | 100% |
| 🇪🇸 Español | `es` | ✅ Complet | 100% |
| 🇩🇪 Deutsch | `de` | ✅ Complet | 100% |
| 🇮🇹 Italiano | `it` | ✅ Complet | 100% |
| 🇳🇱 Nederlands | `nl` | ✅ Complet | 100% |
| 🇵🇹 Português | `pt` | ✅ Complet | 100% |

## Détection automatique

Par défaut, Cookie Consent détecte la langue via `navigator.language` :

```javascript
// Détection automatique
const userLang = navigator.language || navigator.userLanguage;
// Exemples : 'fr-FR', 'en-US', 'es-ES', 'de-DE'

// Extraction du code langue (2 lettres)
const lang = userLang.split('-')[0]; // 'fr', 'en', 'es'...
```

**Aucune configuration nécessaire !**

## Forcer une langue

### Méthode 1 : Via l'API JavaScript

```javascript
import t from '@synapxlab/cookie-consent/translat';

// Forcer l'anglais
t.setLocale('en');

// Initialiser Cookie Consent
window.CookieConsent.init({
  statistics: {
    google_analytics_key: 'G-XXXXXXXXX'  // ✅ Nom correct
  }
});
```

### Méthode 2 : Selon la langue du site

```javascript
// Détecter la langue de votre site (HTML lang attribute)
const siteLang = document.documentElement.lang.split('-')[0];

import t from '@synapxlab/cookie-consent/translat';
t.setLocale(siteLang);
```

### Méthode 3 : Choix utilisateur

```html
<!-- Sélecteur de langue -->
<select id="language-selector">
  <option value="fr">Français</option>
  <option value="en">English</option>
  <option value="es">Español</option>
  <option value="de">Deutsch</option>
  <option value="it">Italiano</option>
  <option value="nl">Nederlands</option>
  <option value="pt">Português</option>
</select>

<script type="module">
import t from '@synapxlab/cookie-consent/translat';

document.getElementById('language-selector').addEventListener('change', function(e) {
  const lang = e.target.value;
  
  // Changer la langue
  t.setLocale(lang);
  
  // Recharger la bannière si déjà affichée
  if (document.getElementById('politecookiebanner')) {
    window.CookieConsent.reset();
  }
  
  // Sauvegarder le choix
  localStorage.setItem('userLang', lang);
});

// Restaurer le choix au chargement
const savedLang = localStorage.getItem('userLang');
if (savedLang) {
  t.setLocale(savedLang);
}
</script>
```

## Ajouter une nouvelle langue

### Structure de traduction complète

Toutes les clés de traduction disponibles :

```javascript
import t from '@synapxlab/cookie-consent/translat';

t.add('CODE_LANGUE', {
  // Header
  title: "Titre de la bannière",
  closeAria: "Texte accessible pour fermer",
  
  // Message principal
  message: "Message d'introduction sur les cookies",
  
  // Boutons
  acceptAll: "Tout accepter",
  denyAll: "Tout refuser",
  viewPrefs: "Personnaliser mes choix",
  savePrefs: "Enregistrer mes préférences",
  delPrefs: "Supprimer mes préférences",
  
  // Statut
  alwaysActive: "Toujours actif",
  
  // Catégorie : Fonctionnel (toujours actifs)
  functionalTitle: "Cookies strictement nécessaires",
  functionalDesc: "Ces cookies sont nécessaires au fonctionnement du site...",
  
  // Catégorie : Cookies (fonctionnalités additionnelles)
  cookiesTitle: "Cookies de fonctionnalité",
  cookiesDesc: "Ces cookies permettent d'améliorer et de personnaliser...",
  cookiesServices: "Services : {services}",
  
  // Catégorie : Statistiques
  statsTitle: "Cookies de mesure d'audience (statistiques)",
  statsDesc: "Ces cookies nous permettent de mesurer l'audience du site...",
  statsServices: "Services : {services}",
  
  // Catégorie : Marketing
  marketingTitle: "Cookies publicitaires et de personnalisation",
  marketingDesc: "Ces cookies permettent de personnaliser les publicités...",
  marketingServices: "Services : {services}",
  
  // 🆕 Google Consent Mode v2 (optionnel)
  gcmBadge: "Google Consent Mode v2",
  gcmDesc: "Google Consent Mode v2 est actif sur ce site...",
  
  // Logging RGPD
  loggingTitle: "📋 Preuve de consentement aux cookies",
  loggingNotice: "Conformément à nos obligations légales (article 7.1 du RGPD)..."
});
```

### Exemple : Ajouter le japonais

```javascript
import t from '@synapxlab/cookie-consent/translat';

t.add('ja', {
  title: "クッキー同意管理",
  closeAria: "クッキーバナーを閉じる",
  message: "最高のエクスペリエンスを提供するため、当サイトはクッキーを使用して利用状況を分析し、サービスを改善しています。",
  
  acceptAll: "すべて受け入れる",
  denyAll: "すべて拒否",
  viewPrefs: "設定をカスタマイズ",
  savePrefs: "設定を保存",
  delPrefs: "設定を削除",
  
  alwaysActive: "常に有効",
  
  functionalTitle: "必須クッキー",
  functionalDesc: "これらのクッキーはウェブサイトの動作に不可欠であり、システム内で無効にすることはできません。",
  
  cookiesTitle: "機能的クッキー",
  cookiesDesc: "これらのクッキーはウェブサイトの機能を向上させ、カスタマイズします。",
  cookiesServices: "サービス：{services}",
  
  statsTitle: "統計クッキー（アクセス解析）",
  statsDesc: "これらのクッキーは訪問者数の測定、統計の作成、トラフィック経路の分析を可能にします。",
  statsServices: "サービス：{services}",
  
  marketingTitle: "広告・パーソナライゼーションクッキー",
  marketingDesc: "これらのクッキーはウェブサイト上での行動に基づいて、興味に合わせた広告をカスタマイズします。",
  marketingServices: "サービス：{services}",
  
  loggingTitle: "📋 クッキー同意の証明",
  loggingNotice: "法的要件（GDPR第7条第1項）およびCNILガイドラインに従い、同意設定の記録を保持します。"
});

// Activer le japonais
t.setLocale('ja');
```

## Variables de remplacement

Certaines traductions supportent des **variables dynamiques** :

```javascript
// Dans les traductions
statsServices: "Services : {services}"
marketingServices: "Services : {services}"
cookiesServices: "Services : {services}"
```

Ces variables sont automatiquement remplacées par la liste des services configurés :

```javascript
window.CookieConsent.init({
  statistics: {
    google_analytics_key: 'G-XXXXXXXXX',      // ✅
    google_tag_manager_key: 'GTM-XXXXXX',     // ✅
    hotjar_site_id: 123456,                   // ✅
    clarity_project_id: 'abc123'              // ✅
  },
  marketing: {
    google_adsense_key: 'ca-pub-123456',      // ✅
    facebook_pixel: {                         // ✅
      key: '123456789',
      track: 'PageView'
    }
  }
});

// Résultat affiché :
// "Services : Google Analytics, Google Tag Manager, Hotjar, Microsoft Clarity"
// "Services : Google AdSense, Facebook Pixel"
```

## ✅ Noms de propriétés CORRECTS

### Statistics (Statistiques)

```javascript
statistics: {
  google_analytics_key: 'G-XXX',              // ✅ Google Analytics
  google_tag_manager_key: 'GTM-XXX',          // ✅ Google Tag Manager
  matomo: { url: 'https://...', siteId: 1 },  // ✅ Matomo
  mixpanel_token: 'xxx',                      // ✅ Mixpanel
  amplitude_key: 'xxx',                       // ✅ Amplitude
  plausible: { domain: 'example.com' },       // ✅ Plausible
  hotjar_site_id: 123456,                     // ✅ Hotjar
  clarity_project_id: 'xxx'                   // ✅ Microsoft Clarity
}
```

### Marketing (Publicité)

```javascript
marketing: {
  google_adsense_key: 'ca-pub-xxx',           // ✅ Google AdSense
  facebook_pixel: {                           // ✅ Facebook Pixel
    key: 'xxx',
    track: 'PageView'
  },
  tiktok_pixel_id: 'xxx',                     // ✅ TikTok Pixel
  linkedin_partner_id: 'xxx'                  // ✅ LinkedIn Insight
}
```

### Functional (Fonctionnalités)

```javascript
functional: {
  intercom_app_id: 'xxx',                     // ✅ Intercom
  crisp_website_id: 'xxx',                    // ✅ Crisp
  hubspot_portal_id: 'xxx',                   // ✅ HubSpot
  segment_write_key: 'xxx'                    // ✅ Segment
}
```

## Intégration avec frameworks

### React

```jsx
// i18n-setup.js
import t from '@synapxlab/cookie-consent/translat';

export const setupCookieConsentI18n = (language) => {
  t.setLocale(language);
};

// App.jsx
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import '@synapxlab/cookie-consent';
import { setupCookieConsentI18n } from './i18n-setup';

function App() {
  const { i18n } = useTranslation();
  
  useEffect(() => {
    // Synchroniser Cookie Consent avec votre i18n
    setupCookieConsentI18n(i18n.language);
    
    // Initialiser avec les bons noms de propriétés
    window.CookieConsent.init({
      statistics: {
        google_analytics_key: 'G-XXX'  // ✅
      }
    });
  }, [i18n.language]);
  
  return <div>Your App</div>;
}
```

### Vue.js

```javascript
// plugins/cookie-consent.js
import t from '@synapxlab/cookie-consent/translat';
import { watch } from 'vue';

export default {
  install(app) {
    const i18n = app.config.globalProperties.$i18n;
    
    app.config.globalProperties.$initCookieConsent = () => {
      t.setLocale(i18n.locale);
      
      window.CookieConsent.init({
        statistics: {
          google_analytics_key: 'G-XXX'  // ✅
        }
      });
    };
    
    // Watch i18n changes
    watch(() => i18n.locale, (newLocale) => {
      t.setLocale(newLocale);
    });
  }
};
```

### Next.js

```javascript
// pages/_app.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import t from '@synapxlab/cookie-consent/translat';
import '@synapxlab/cookie-consent';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const { locale } = router;
  
  useEffect(() => {
    t.setLocale(locale);
    
    window.CookieConsent.init({
      statistics: {
        google_analytics_key: 'G-XXX'  // ✅
      }
    });
  }, [locale]);
  
  return <Component {...pageProps} />;
}

export default MyApp;
```

## Support RTL (Right-to-Left)

Pour les langues qui s'écrivent de droite à gauche (arabe, hébreu, etc.) :

```javascript
// Ajouter la langue arabe
t.add('ar', {
  title: "إدارة موافقة ملفات تعريف الارتباط",
  message: "لتقديم أفضل تجربة...",
  // ... toutes les autres clés
});

t.setLocale('ar');

// Activer le mode RTL
document.documentElement.setAttribute('dir', 'rtl');
document.documentElement.setAttribute('lang', 'ar');
```

## Tests i18n

### Vérifier une traduction

```javascript
import t from '@synapxlab/cookie-consent/translat';

// Récupérer une clé
console.log(t('title')); // "Manage cookie consent"

// Changer de langue
t.setLocale('fr');
console.log(t('title')); // "Gérer le consentement aux cookies"

// Vérifier la langue active
console.log(t.getLocale()); // "fr"
```

### Tester toutes les langues

```javascript
const languages = ['fr', 'en', 'es', 'de', 'it', 'nl', 'pt'];

languages.forEach(lang => {
  t.setLocale(lang);
  console.log(`${lang}: ${t('title')}`);
});

// Résultat :
// fr: Gérer le consentement aux cookies
// en: Manage cookie consent
// es: Gestionar el consentimiento de cookies
// de: Cookie-Einwilligung verwalten
// it: Gestisci il consenso ai cookie
// nl: Cookietoestemming beheren
// pt: Gerir o consentimento de cookies
```

## Fallback

Si une traduction est manquante, Cookie Consent utilise le français par défaut :

```javascript
t.add('custom', {
  title: "Mon titre personnalisé"
  // Autres clés manquantes
});

t.setLocale('custom');

console.log(t('title')); // "Mon titre personnalisé"
console.log(t('acceptAll')); // "Tout Accepter" (fallback français)
```

## Contribution

Vous voulez ajouter une langue ? Contribuez sur GitHub !

### Langues en cours d'ajout

- 🇯🇵 Japonais (ja)
- 🇨🇳 Chinois simplifié (zh)
- 🇰🇷 Coréen (ko)
- 🇷🇺 Russe (ru)
- 🇸🇦 Arabe (ar)
- 🇮🇱 Hébreu (he)
- 🇮🇳 Hindi (hi)

**Vous parlez une de ces langues ?** Contribuez sur GitHub !

### Support

- 📧 contact@synapx.fr
- 💬 [Discord SynapxLab](https://discord.gg/synapxlab)
- 🐛 [GitHub Issues](https://github.com/synapxLab/cookie-consent/issues)
- 📚 [Documentation complète](../configuration.md)

---

**Guide i18n by SynapxLab**  
**7 langues supportées · Open source · Contributions bienvenues !**