From c0270705febe1ca3c0bf3f493103d15a5a13f96c Mon Sep 17 00:00:00 2001
From: horacioskrp <hervekudayah@gmail.com>
Date: Wed, 11 Nov 2026 15:53:08 +0000
Subject: [PATCH 1/3] =?UTF-8?q?feat(i18n):=20divers=20=E2=80=94=20page=20d?=
 =?UTF-8?q?'accueil=20&=20pages=20d'erreur=20(FR/EN)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lang/en/errors.php             | 36 ++++++++++++++++++
 lang/en/welcome.php            | 34 +++++++++++++++++
 lang/fr/errors.php             | 36 ++++++++++++++++++
 lang/fr/welcome.php            | 34 +++++++++++++++++
 resources/js/pages/Error.tsx   | 22 +++++------
 resources/js/pages/welcome.tsx | 67 +++++++++++++++++-----------------
 6 files changed, 183 insertions(+), 46 deletions(-)
 create mode 100644 lang/en/errors.php
 create mode 100644 lang/en/welcome.php
 create mode 100644 lang/fr/errors.php
 create mode 100644 lang/fr/welcome.php

diff --git a/lang/en/errors.php b/lang/en/errors.php
new file mode 100644
index 00000000..c592218e
--- /dev/null
+++ b/lang/en/errors.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+    'dashboard' => 'Dashboard',
+    'home' => 'Back to home',
+    'previous' => 'Previous page',
+
+    'fallback' => [
+        'title' => 'An error occurred',
+        'message' => 'Something went wrong. Please try again.',
+    ],
+    '403' => [
+        'title' => 'Access denied',
+        'message' => 'You do not have permission to access this page.',
+    ],
+    '404' => [
+        'title' => 'Page not found',
+        'message' => 'The page you are looking for does not exist or has been moved.',
+    ],
+    '419' => [
+        'title' => 'Session expired',
+        'message' => 'Your session has expired. Please sign in again, then retry.',
+    ],
+    '429' => [
+        'title' => 'Too many requests',
+        'message' => 'You have made too many requests. Please wait a moment before trying again.',
+    ],
+    '500' => [
+        'title' => 'Server error',
+        'message' => 'An unexpected error occurred. Try again in a moment; if the problem persists, contact your school administrator.',
+    ],
+    '503' => [
+        'title' => 'Under maintenance',
+        'message' => 'The service is temporarily unavailable. Please come back in a few moments.',
+    ],
+];
diff --git a/lang/en/welcome.php b/lang/en/welcome.php
new file mode 100644
index 00000000..221e8259
--- /dev/null
+++ b/lang/en/welcome.php
@@ -0,0 +1,34 @@
+<?php
+
+return [
+    'head' => 'Dalibi — School management',
+    'dashboard' => 'Dashboard',
+    'logout' => 'Log out',
+    'login' => 'Sign in',
+    'hello' => 'Hello',
+    'welcome_to' => 'Welcome to',
+    'subtitle_authed' => 'Choose a module to get started.',
+    'subtitle_guest' => 'Sign in to access your school\'s modules.',
+    'no_modules' => 'No module accessible with your profile.',
+    'open' => 'Open',
+    'footer' => 'Dalibi — Open source school management software for Africa.',
+
+    'modules' => [
+        'students' => ['title' => 'Students', 'desc' => 'Enrollments, records and headcounts'],
+        'bulletins' => ['title' => 'Grades & Reports', 'desc' => 'Grade entry and report cards'],
+        'exams' => ['title' => 'Exams', 'desc' => 'Assessments and official exams'],
+        'attendances' => ['title' => 'Attendance', 'desc' => 'Roll call and attendance tracking'],
+        'accounting' => ['title' => 'Accounting', 'desc' => 'Tuition, payments and cash'],
+        'payroll' => ['title' => 'Staff & Payroll', 'desc' => 'Employees, pay runs and payslips'],
+        'archives' => ['title' => 'Documents & Archives', 'desc' => 'Certificates and archiving'],
+        'statistics' => ['title' => 'Statistics', 'desc' => 'Indicators and steering'],
+        'calendar' => ['title' => 'Calendar', 'desc' => 'School year events'],
+        'timetable' => ['title' => 'Timetable', 'desc' => 'Weekly grid per class'],
+        'scholarships' => ['title' => 'Scholarships', 'desc' => 'Student scholarships and aid'],
+        'note_reclamations' => ['title' => 'Grade appeals', 'desc' => 'Grade requests and reviews'],
+        'absence_permissions' => ['title' => 'Absence permissions', 'desc' => 'Requests and supporting documents'],
+        'portal' => ['title' => 'Portal access', 'desc' => 'Parent and student accounts'],
+        'users' => ['title' => 'Users', 'desc' => 'Staff accounts and roles'],
+        'audit' => ['title' => 'Audit log', 'desc' => 'Action traceability'],
+    ],
+];
diff --git a/lang/fr/errors.php b/lang/fr/errors.php
new file mode 100644
index 00000000..225b8cfc
--- /dev/null
+++ b/lang/fr/errors.php
@@ -0,0 +1,36 @@
+<?php
+
+return [
+    'dashboard' => 'Tableau de bord',
+    'home' => 'Retour à l\'accueil',
+    'previous' => 'Page précédente',
+
+    'fallback' => [
+        'title' => 'Une erreur est survenue',
+        'message' => 'Quelque chose s\'est mal passé. Veuillez réessayer.',
+    ],
+    '403' => [
+        'title' => 'Accès refusé',
+        'message' => 'Vous n\'avez pas l\'autorisation d\'accéder à cette page.',
+    ],
+    '404' => [
+        'title' => 'Page introuvable',
+        'message' => 'La page que vous recherchez n\'existe pas ou a été déplacée.',
+    ],
+    '419' => [
+        'title' => 'Session expirée',
+        'message' => 'Votre session a expiré. Veuillez vous reconnecter, puis réessayer.',
+    ],
+    '429' => [
+        'title' => 'Trop de requêtes',
+        'message' => 'Vous avez effectué trop de requêtes. Patientez un instant avant de réessayer.',
+    ],
+    '500' => [
+        'title' => 'Erreur serveur',
+        'message' => 'Une erreur inattendue s\'est produite. Réessayez dans un instant ; si le problème persiste, contactez l\'administrateur de votre établissement.',
+    ],
+    '503' => [
+        'title' => 'Maintenance en cours',
+        'message' => 'Le service est momentanément indisponible. Merci de revenir dans quelques instants.',
+    ],
+];
diff --git a/lang/fr/welcome.php b/lang/fr/welcome.php
new file mode 100644
index 00000000..c88a07a2
--- /dev/null
+++ b/lang/fr/welcome.php
@@ -0,0 +1,34 @@
+<?php
+
+return [
+    'head' => 'Dalibi — Gestion scolaire',
+    'dashboard' => 'Tableau de bord',
+    'logout' => 'Se déconnecter',
+    'login' => 'Se connecter',
+    'hello' => 'Bonjour',
+    'welcome_to' => 'Bienvenue sur',
+    'subtitle_authed' => 'Choisissez un module pour commencer.',
+    'subtitle_guest' => 'Connectez-vous pour accéder aux modules de votre établissement.',
+    'no_modules' => 'Aucun module accessible avec votre profil.',
+    'open' => 'Ouvrir',
+    'footer' => 'Dalibi — Logiciel de gestion scolaire open source pour l\'Afrique.',
+
+    'modules' => [
+        'students' => ['title' => 'Élèves', 'desc' => 'Inscriptions, dossiers et effectifs'],
+        'bulletins' => ['title' => 'Notes & Bulletins', 'desc' => 'Saisie des notes et bulletins'],
+        'exams' => ['title' => 'Examens', 'desc' => 'Évaluations et examens officiels'],
+        'attendances' => ['title' => 'Présences', 'desc' => 'Appel et suivi de l\'assiduité'],
+        'accounting' => ['title' => 'Comptabilité', 'desc' => 'Écolage, paiements et caisses'],
+        'payroll' => ['title' => 'Personnel & Paie', 'desc' => 'Employés, cycles de paie et bulletins'],
+        'archives' => ['title' => 'Documents & Archives', 'desc' => 'Certificats et archivage'],
+        'statistics' => ['title' => 'Statistiques', 'desc' => 'Indicateurs et pilotage'],
+        'calendar' => ['title' => 'Calendrier', 'desc' => 'Événements de l\'année scolaire'],
+        'timetable' => ['title' => 'Emploi du temps', 'desc' => 'Grille hebdomadaire par classe'],
+        'scholarships' => ['title' => 'Bourses', 'desc' => 'Bourses et aides d\'étudiants'],
+        'note_reclamations' => ['title' => 'Réclamations de notes', 'desc' => 'Demandes et révisions de notes'],
+        'absence_permissions' => ['title' => 'Permissions d\'absence', 'desc' => 'Demandes et justificatifs'],
+        'portal' => ['title' => 'Accès portail', 'desc' => 'Comptes parents et élèves'],
+        'users' => ['title' => 'Utilisateurs', 'desc' => 'Comptes et rôles du personnel'],
+        'audit' => ['title' => 'Journal d\'audit', 'desc' => 'Traçabilité des actions'],
+    ],
+];
diff --git a/resources/js/pages/Error.tsx b/resources/js/pages/Error.tsx
index 49473245..bfa9d574 100644
--- a/resources/js/pages/Error.tsx
+++ b/resources/js/pages/Error.tsx
@@ -2,27 +2,23 @@ import { Head, Link, usePage } from '@inertiajs/react';
 import { ArrowLeft, LayoutGrid } from 'lucide-react';
 import AppLogo from '@/components/app-logo';
 import { ErrorArt } from '@/components/error-art';
+import { useTranslation } from '@/helpers/i18n';
 import { dashboard } from '@/routes';
 
 interface AuthProps {
     user: { id: string } | null;
 }
 
-const INFO: Record<number, { title: string; message: string }> = {
-    403: { title: 'Accès refusé', message: "Vous n'avez pas l'autorisation d'accéder à cette page." },
-    404: { title: 'Page introuvable', message: "La page que vous recherchez n'existe pas ou a été déplacée." },
-    419: { title: 'Session expirée', message: 'Votre session a expiré. Veuillez vous reconnecter, puis réessayer.' },
-    429: { title: 'Trop de requêtes', message: 'Vous avez effectué trop de requêtes. Patientez un instant avant de réessayer.' },
-    500: { title: 'Erreur serveur', message: "Une erreur inattendue s'est produite. Réessayez dans un instant ; si le problème persiste, contactez l'administrateur de votre établissement." },
-    503: { title: 'Maintenance en cours', message: 'Le service est momentanément indisponible. Merci de revenir dans quelques instants.' },
-};
+const KNOWN_STATUSES = [403, 404, 419, 429, 500, 503];
 
 export default function ErrorPage({ status }: Readonly<{ status: number }>) {
+    const { t } = useTranslation();
     const auth = (usePage().props as { auth?: AuthProps }).auth;
     const isAuthed = Boolean(auth?.user);
-    const info = INFO[status] ?? {
-        title: 'Une erreur est survenue',
-        message: "Quelque chose s'est mal passé. Veuillez réessayer.",
+    const group = KNOWN_STATUSES.includes(status) ? String(status) : 'fallback';
+    const info = {
+        title: t(`errors.${group}.title`),
+        message: t(`errors.${group}.message`),
     };
 
     return (
@@ -53,14 +49,14 @@ export default function ErrorPage({ status }: Readonly<{ status: number }>) {
                                 href={isAuthed ? dashboard() : '/'}
                                 className="inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-blue-700"
                             >
-                                <LayoutGrid className="h-4 w-4" /> {isAuthed ? 'Tableau de bord' : "Retour à l'accueil"}
+                                <LayoutGrid className="h-4 w-4" /> {isAuthed ? t('errors.dashboard') : t('errors.home')}
                             </Link>
                             <button
                                 type="button"
                                 onClick={() => window.history.back()}
                                 className="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 px-5 py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
                             >
-                                <ArrowLeft className="h-4 w-4" /> Page précédente
+                                <ArrowLeft className="h-4 w-4" /> {t('errors.previous')}
                             </button>
                         </div>
                     </div>
diff --git a/resources/js/pages/welcome.tsx b/resources/js/pages/welcome.tsx
index 57a4ec3d..7cd8135e 100644
--- a/resources/js/pages/welcome.tsx
+++ b/resources/js/pages/welcome.tsx
@@ -7,6 +7,7 @@ import {
 import AppLogo from '@/components/app-logo';
 import { dashboard, login, logout } from '@/routes';
 import { route } from '@/helpers/route';
+import { useTranslation } from '@/helpers/i18n';
 
 interface AuthProps {
     user: { id: string; name?: string } | null;
@@ -14,8 +15,7 @@ interface AuthProps {
 }
 
 interface ModuleCard {
-    title: string;
-    description: string;
+    key: string;
     icon: typeof Users;
     href: string;
     permission: string;
@@ -23,25 +23,26 @@ interface ModuleCard {
 }
 
 const modules: ModuleCard[] = [
-    { title: 'Élèves', description: 'Inscriptions, dossiers et effectifs', icon: Users, href: route('students.index'), permission: 'view_students', color: 'from-blue-500 to-blue-600' },
-    { title: 'Notes & Bulletins', description: 'Saisie des notes et bulletins', icon: NotebookPen, href: route('bulletins.index'), permission: 'view_bulletins', color: 'from-violet-500 to-purple-600' },
-    { title: 'Examens', description: 'Évaluations et examens officiels', icon: GraduationCap, href: route('evaluations.index'), permission: 'view_evaluations', color: 'from-indigo-500 to-blue-600' },
-    { title: 'Présences', description: "Appel et suivi de l'assiduité", icon: UserCheck, href: route('attendances.index'), permission: 'view_attendances', color: 'from-emerald-500 to-teal-600' },
-    { title: 'Comptabilité', description: 'Écolage, paiements et caisses', icon: Wallet, href: route('accounting.index'), permission: 'view_finances', color: 'from-amber-500 to-orange-600' },
-    { title: 'Personnel & Paie', description: 'Employés, cycles de paie et bulletins', icon: Briefcase, href: route('payroll.overview'), permission: 'view_payroll', color: 'from-cyan-500 to-sky-600' },
-    { title: 'Documents & Archives', description: 'Certificats et archivage', icon: Archive, href: route('archives.index'), permission: 'view_archives', color: 'from-rose-500 to-pink-600' },
-    { title: 'Statistiques', description: 'Indicateurs et pilotage', icon: BarChart3, href: route('statistics.index'), permission: 'view_statistics', color: 'from-cyan-500 to-blue-600' },
-    { title: 'Calendrier', description: "Événements de l'année scolaire", icon: Calendar, href: route('calendar.index'), permission: 'view_calendar', color: 'from-fuchsia-500 to-purple-600' },
-    { title: 'Emploi du temps', description: 'Grille hebdomadaire par classe', icon: CalendarRange, href: route('timetable.index'), permission: 'view_timetable', color: 'from-sky-500 to-cyan-600' },
-    { title: 'Bourses', description: "Bourses et aides d'étudiants", icon: Percent, href: route('student-scholarships.index'), permission: 'view_student_scholarships', color: 'from-lime-500 to-emerald-600' },
-    { title: 'Réclamations de notes', description: 'Demandes et révisions de notes', icon: AlertCircle, href: route('note-reclamations.index'), permission: 'view_note_reclamations', color: 'from-orange-500 to-red-500' },
-    { title: "Permissions d'absence", description: 'Demandes et justificatifs', icon: ShieldCheck, href: route('absence-permissions.index'), permission: 'view_absence_permissions', color: 'from-teal-500 to-emerald-600' },
-    { title: 'Accès portail', description: 'Comptes parents et élèves', icon: Lock, href: route('guardians.index'), permission: 'view_portal_accounts', color: 'from-slate-500 to-slate-700' },
-    { title: 'Utilisateurs', description: 'Comptes et rôles du personnel', icon: Shield, href: route('users.index'), permission: 'view_users', color: 'from-indigo-500 to-violet-600' },
-    { title: "Journal d'audit", description: 'Traçabilité des actions', icon: ScanLine, href: route('audit-logs.index'), permission: 'view_audit_logs', color: 'from-gray-500 to-gray-700' },
+    { key: 'students', icon: Users, href: route('students.index'), permission: 'view_students', color: 'from-blue-500 to-blue-600' },
+    { key: 'bulletins', icon: NotebookPen, href: route('bulletins.index'), permission: 'view_bulletins', color: 'from-violet-500 to-purple-600' },
+    { key: 'exams', icon: GraduationCap, href: route('evaluations.index'), permission: 'view_evaluations', color: 'from-indigo-500 to-blue-600' },
+    { key: 'attendances', icon: UserCheck, href: route('attendances.index'), permission: 'view_attendances', color: 'from-emerald-500 to-teal-600' },
+    { key: 'accounting', icon: Wallet, href: route('accounting.index'), permission: 'view_finances', color: 'from-amber-500 to-orange-600' },
+    { key: 'payroll', icon: Briefcase, href: route('payroll.overview'), permission: 'view_payroll', color: 'from-cyan-500 to-sky-600' },
+    { key: 'archives', icon: Archive, href: route('archives.index'), permission: 'view_archives', color: 'from-rose-500 to-pink-600' },
+    { key: 'statistics', icon: BarChart3, href: route('statistics.index'), permission: 'view_statistics', color: 'from-cyan-500 to-blue-600' },
+    { key: 'calendar', icon: Calendar, href: route('calendar.index'), permission: 'view_calendar', color: 'from-fuchsia-500 to-purple-600' },
+    { key: 'timetable', icon: CalendarRange, href: route('timetable.index'), permission: 'view_timetable', color: 'from-sky-500 to-cyan-600' },
+    { key: 'scholarships', icon: Percent, href: route('student-scholarships.index'), permission: 'view_student_scholarships', color: 'from-lime-500 to-emerald-600' },
+    { key: 'note_reclamations', icon: AlertCircle, href: route('note-reclamations.index'), permission: 'view_note_reclamations', color: 'from-orange-500 to-red-500' },
+    { key: 'absence_permissions', icon: ShieldCheck, href: route('absence-permissions.index'), permission: 'view_absence_permissions', color: 'from-teal-500 to-emerald-600' },
+    { key: 'portal', icon: Lock, href: route('guardians.index'), permission: 'view_portal_accounts', color: 'from-slate-500 to-slate-700' },
+    { key: 'users', icon: Shield, href: route('users.index'), permission: 'view_users', color: 'from-indigo-500 to-violet-600' },
+    { key: 'audit', icon: ScanLine, href: route('audit-logs.index'), permission: 'view_audit_logs', color: 'from-gray-500 to-gray-700' },
 ];
 
 export default function Welcome() {
+    const { t } = useTranslation();
     const auth = (usePage().props as { auth?: AuthProps }).auth;
     const isAuthed = Boolean(auth?.user);
     const permissions = auth?.permissions ?? [];
@@ -52,7 +53,7 @@ export default function Welcome() {
 
     return (
         <>
-            <Head title="Dalibi — Gestion scolaire" />
+            <Head title={t('welcome.head')} />
 
             <div className="min-h-screen bg-gray-50 text-gray-900 dark:bg-[#0a0a0a] dark:text-gray-100">
                 {/* Barre supérieure */}
@@ -65,13 +66,13 @@ export default function Welcome() {
                         {isAuthed ? (
                             <div className="flex items-center gap-2">
                                 <Link href={dashboard()} className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700">
-                                    <LayoutGrid className="h-4 w-4" /> Tableau de bord
+                                    <LayoutGrid className="h-4 w-4" /> {t('welcome.dashboard')}
                                 </Link>
                                 <button
                                     type="button"
                                     onClick={() => router.post(logout.url())}
-                                    title="Se déconnecter"
-                                    aria-label="Se déconnecter"
+                                    title={t('welcome.logout')}
+                                    aria-label={t('welcome.logout')}
                                     className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 text-gray-500 transition hover:bg-red-50 hover:text-red-600 dark:border-gray-700 dark:hover:bg-red-950/40"
                                 >
                                     <LogOut className="h-[18px] w-[18px]" />
@@ -79,7 +80,7 @@ export default function Welcome() {
                             </div>
                         ) : (
                             <Link href={login()} className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700">
-                                <LogIn className="h-4 w-4" /> Se connecter
+                                <LogIn className="h-4 w-4" /> {t('welcome.login')}
                             </Link>
                         )}
                     </div>
@@ -90,38 +91,38 @@ export default function Welcome() {
                     <div className="mb-12 text-center">
                         <h1 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
                             {isAuthed ? (
-                                <>Bonjour{auth?.user?.name ? `, ${auth.user.name}` : ''} 👋</>
+                                <>{t('welcome.hello')}{auth?.user?.name ? `, ${auth.user.name}` : ''} 👋</>
                             ) : (
-                                <>Bienvenue sur <span className="text-blue-600">Dalibi</span></>
+                                <>{t('welcome.welcome_to')} <span className="text-blue-600">Dalibi</span></>
                             )}
                         </h1>
                         <p className="mx-auto mt-3 max-w-2xl text-base text-gray-500 dark:text-gray-400 md:text-lg">
                             {isAuthed
-                                ? 'Choisissez un module pour commencer.'
-                                : 'Connectez-vous pour accéder aux modules de votre établissement.'}
+                                ? t('welcome.subtitle_authed')
+                                : t('welcome.subtitle_guest')}
                         </p>
                     </div>
 
                     {/* Cartes des modules */}
                     {visibleModules.length === 0 ? (
                         <div className="rounded-2xl border border-gray-200 bg-white p-12 text-center text-gray-400 dark:border-gray-800 dark:bg-[#161615]">
-                            Aucun module accessible avec votre profil.
+                            {t('welcome.no_modules')}
                         </div>
                     ) : (
                         <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                             {visibleModules.map((m) => (
                                 <Link
-                                    key={m.title}
+                                    key={m.key}
                                     href={m.href}
                                     className="group relative overflow-hidden rounded-2xl border border-gray-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:border-blue-200 hover:shadow-lg dark:border-gray-800 dark:bg-[#161615] dark:hover:border-blue-900"
                                 >
                                     <div className={`mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br ${m.color} text-white shadow-md`}>
                                         <m.icon className="h-6 w-6" />
                                     </div>
-                                    <h3 className="text-lg font-bold">{m.title}</h3>
-                                    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{m.description}</p>
+                                    <h3 className="text-lg font-bold">{t(`welcome.modules.${m.key}.title`)}</h3>
+                                    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t(`welcome.modules.${m.key}.desc`)}</p>
                                     <span className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600 transition group-hover:gap-2 dark:text-blue-400">
-                                        {isAuthed ? 'Ouvrir' : 'Se connecter'} <ArrowRight className="h-4 w-4" />
+                                        {isAuthed ? t('welcome.open') : t('welcome.login')} <ArrowRight className="h-4 w-4" />
                                     </span>
                                 </Link>
                             ))}
@@ -130,7 +131,7 @@ export default function Welcome() {
                 </main>
 
                 <footer className="border-t border-gray-200/70 py-8 text-center text-sm text-gray-400 dark:border-gray-800">
-                    &copy; {new Date().getFullYear()} Dalibi — Logiciel de gestion scolaire open source pour l&apos;Afrique.
+                    &copy; {new Date().getFullYear()} {t('welcome.footer')}
                 </footer>
             </div>
         </>

From 8df12f9f16bdac2e3c892a66a6ae4294b4ae263f Mon Sep 17 00:00:00 2001
From: horacioskrp <hervekudayah@gmail.com>
Date: Wed, 11 Nov 2026 15:58:29 +0000
Subject: [PATCH 2/3] =?UTF-8?q?feat(i18n):=20archives=20documentaires=20?=
 =?UTF-8?q?=E2=80=94=20liste=20&=20tags=20(FR/EN)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lang/en/archives.php                  |  89 +++++++++++++++++++
 lang/fr/archives.php                  |  89 +++++++++++++++++++
 resources/js/pages/Archives/Index.tsx | 118 +++++++++++++-------------
 resources/js/pages/Archives/Tags.tsx  |  74 ++++++++--------
 4 files changed, 276 insertions(+), 94 deletions(-)
 create mode 100644 lang/en/archives.php
 create mode 100644 lang/fr/archives.php

diff --git a/lang/en/archives.php b/lang/en/archives.php
new file mode 100644
index 00000000..fb95de47
--- /dev/null
+++ b/lang/en/archives.php
@@ -0,0 +1,89 @@
+<?php
+
+return [
+    // Index
+    'head' => 'Document archives',
+    'title' => 'Document archives',
+    'subtitle_docs' => ':count archived document(s)',
+    'trashed_suffix' => ' · :count in trash',
+    'view_active' => 'View active',
+    'trash' => 'Trash',
+    'archive_doc' => 'Archive a document',
+    'search' => 'Search',
+    'search_ph' => 'Title, reference…',
+    'category' => 'Category',
+    'all_categories' => 'All',
+    'from' => 'From',
+    'to' => 'To',
+    'reset' => 'Reset',
+    'th_reference' => 'Reference',
+    'th_document' => 'Document',
+    'th_tags' => 'Tags',
+    'th_linked' => 'Linked to',
+    'th_size' => 'Size',
+    'th_archived' => 'Archived',
+    'th_actions' => 'Actions',
+    'empty_trash' => 'Trash is empty.',
+    'empty' => 'No archived document.',
+    'restore' => 'Restore',
+    'delete_forever' => 'Delete permanently',
+    'download' => 'Download',
+    'edit' => 'Edit',
+    'delete' => 'Delete',
+    'prev' => 'Previous',
+    'next' => 'Next',
+    'page_of' => 'Page :current / :last',
+    'edit_title' => 'Edit document',
+    'create_title' => 'Archive a document',
+    'edit_desc' => 'Update the metadata and tags.',
+    'create_desc' => 'Add a file to the document vault with its metadata and tags.',
+    'f_title' => 'Title',
+    'f_category' => 'Category',
+    'retention' => 'Retain until',
+    'description' => 'Description',
+    'file' => 'File',
+    'tags' => 'Tags',
+    'add_tag_ph' => 'Add a tag then Enter…',
+    'linked_to' => 'Linked to',
+    'link_none' => 'None',
+    'link_classroom' => 'Class',
+    'link_student' => 'Student (ID number)',
+    'classroom' => 'Class',
+    'choose' => 'Choose',
+    'student_matricule' => 'Student ID number',
+    'cancel' => 'Cancel',
+    'save' => 'Save',
+    'archive' => 'Archive',
+    'delete_forever_q' => 'Delete permanently?',
+    'delete_forever_desc' => 'The file ":title" will be removed from storage. This action is irreversible.',
+
+    // Tags
+    'tags_page' => [
+        'head' => 'Archive tags',
+        'title' => 'Archive tags',
+        'subtitle' => 'Organize archived documents by reusable keywords.',
+        'new_tag' => 'New tag',
+        'total' => 'Total tags',
+        'search_ph' => 'Search a tag by name...',
+        'th_tag' => 'Tag',
+        'th_documents' => 'Documents',
+        'th_color' => 'Color',
+        'th_actions' => 'Actions',
+        'documents_count' => ':count document(s)',
+        'change_color' => 'Change color',
+        'color_aria' => 'Color :color',
+        'delete' => 'Delete',
+        'empty' => 'No tag found',
+        'showing' => 'Showing :from to :to of :total',
+        'new_tag_desc' => 'A reusable keyword to classify archived documents.',
+        'name' => 'Tag name',
+        'name_ph' => 'e.g. Contract, Inspection…',
+        'color' => 'Color',
+        'preview' => 'Preview:',
+        'default_name' => 'Tag name',
+        'cancel' => 'Cancel',
+        'create' => 'Create',
+        'delete_q' => 'Delete this tag?',
+        'delete_desc' => 'The tag will be removed from all associated documents. The documents are not deleted.',
+    ],
+];
diff --git a/lang/fr/archives.php b/lang/fr/archives.php
new file mode 100644
index 00000000..4c8c648a
--- /dev/null
+++ b/lang/fr/archives.php
@@ -0,0 +1,89 @@
+<?php
+
+return [
+    // Index
+    'head' => 'Archives documentaires',
+    'title' => 'Archives documentaires',
+    'subtitle_docs' => ':count document(s) archivé(s)',
+    'trashed_suffix' => ' · :count en corbeille',
+    'view_active' => 'Voir actifs',
+    'trash' => 'Corbeille',
+    'archive_doc' => 'Archiver un document',
+    'search' => 'Recherche',
+    'search_ph' => 'Titre, référence…',
+    'category' => 'Catégorie',
+    'all_categories' => 'Toutes',
+    'from' => 'Du',
+    'to' => 'Au',
+    'reset' => 'Réinitialiser',
+    'th_reference' => 'Référence',
+    'th_document' => 'Document',
+    'th_tags' => 'Tags',
+    'th_linked' => 'Lié à',
+    'th_size' => 'Taille',
+    'th_archived' => 'Archivé',
+    'th_actions' => 'Actions',
+    'empty_trash' => 'Corbeille vide.',
+    'empty' => 'Aucun document archivé.',
+    'restore' => 'Restaurer',
+    'delete_forever' => 'Supprimer définitivement',
+    'download' => 'Télécharger',
+    'edit' => 'Modifier',
+    'delete' => 'Supprimer',
+    'prev' => 'Précédent',
+    'next' => 'Suivant',
+    'page_of' => 'Page :current / :last',
+    'edit_title' => 'Modifier le document',
+    'create_title' => 'Archiver un document',
+    'edit_desc' => 'Mettez à jour les métadonnées et les tags.',
+    'create_desc' => 'Ajoutez un fichier au coffre documentaire avec ses métadonnées et tags.',
+    'f_title' => 'Titre',
+    'f_category' => 'Catégorie',
+    'retention' => 'Conservation jusqu\'au',
+    'description' => 'Description',
+    'file' => 'Fichier',
+    'tags' => 'Tags',
+    'add_tag_ph' => 'Ajouter un tag puis Entrée…',
+    'linked_to' => 'Lié à',
+    'link_none' => 'Aucun',
+    'link_classroom' => 'Classe',
+    'link_student' => 'Élève (matricule)',
+    'classroom' => 'Classe',
+    'choose' => 'Choisir',
+    'student_matricule' => 'Matricule élève',
+    'cancel' => 'Annuler',
+    'save' => 'Enregistrer',
+    'archive' => 'Archiver',
+    'delete_forever_q' => 'Supprimer définitivement ?',
+    'delete_forever_desc' => 'Le fichier « :title » sera supprimé du stockage. Cette action est irréversible.',
+
+    // Tags
+    'tags_page' => [
+        'head' => 'Tags d\'archivage',
+        'title' => 'Tags d\'archivage',
+        'subtitle' => 'Organisez les documents archivés par mots-clés réutilisables.',
+        'new_tag' => 'Nouveau tag',
+        'total' => 'Tags au total',
+        'search_ph' => 'Rechercher un tag par nom...',
+        'th_tag' => 'Tag',
+        'th_documents' => 'Documents',
+        'th_color' => 'Couleur',
+        'th_actions' => 'Actions',
+        'documents_count' => ':count document(s)',
+        'change_color' => 'Changer la couleur',
+        'color_aria' => 'Couleur :color',
+        'delete' => 'Supprimer',
+        'empty' => 'Aucun tag trouvé',
+        'showing' => 'Affichage :from à :to sur :total',
+        'new_tag_desc' => 'Un mot-clé réutilisable pour classer les documents archivés.',
+        'name' => 'Nom du tag',
+        'name_ph' => 'Ex : Contrat, Inspection…',
+        'color' => 'Couleur',
+        'preview' => 'Aperçu :',
+        'default_name' => 'Nom du tag',
+        'cancel' => 'Annuler',
+        'create' => 'Créer',
+        'delete_q' => 'Supprimer ce tag ?',
+        'delete_desc' => 'Le tag sera retiré de tous les documents associés. Les documents ne sont pas supprimés.',
+    ],
+];
diff --git a/resources/js/pages/Archives/Index.tsx b/resources/js/pages/Archives/Index.tsx
index 1bd43597..68b18e7a 100644
--- a/resources/js/pages/Archives/Index.tsx
+++ b/resources/js/pages/Archives/Index.tsx
@@ -15,6 +15,7 @@ import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { route } from '@/helpers/route';
+import { useTranslation } from '@/helpers/i18n';
 import AppLayout from '@/layouts/app-layout';
 
 interface Tag { id: string; name: string; color: string; }
@@ -39,6 +40,7 @@ const ALL = 'all';
 const fmtSize = (b: number) => b > 1048576 ? `${(b / 1048576).toFixed(1)} Mo` : `${Math.max(1, Math.round(b / 1024))} Ko`;
 
 export default function Index({ documents, tags, categories, classrooms, filters, stats }: Readonly<Props>) {
+    const { t } = useTranslation();
     const [search, setSearch] = useState(filters.search || '');
     const [category, setCategory] = useState(filters.category || ALL);
     const [selectedTags, setSelectedTags] = useState<string[]>(filters.tags || []);
@@ -55,7 +57,7 @@ export default function Index({ documents, tags, categories, classrooms, filters
     };
 
     const toggleTag = (id: string) => {
-        const next = selectedTags.includes(id) ? selectedTags.filter(t => t !== id) : [...selectedTags, id];
+        const next = selectedTags.includes(id) ? selectedTags.filter(x => x !== id) : [...selectedTags, id];
         setSelectedTags(next);
         apply({ tags: next });
     };
@@ -74,7 +76,7 @@ export default function Index({ documents, tags, categories, classrooms, filters
         setEditing(d);
         setData({
             title: d.title, description: d.description ?? '', category: d.category,
-            file: null as File | null, tags: d.tags.map(t => t.name),
+            file: null as File | null, tags: d.tags.map(x => x.name),
             retention_until: d.retention_until ?? '',
             link_type: '', link_classroom_id: '', link_student_matricule: '',
         });
@@ -94,7 +96,7 @@ export default function Index({ documents, tags, categories, classrooms, filters
         if (n && !data.tags.includes(n)) setData('tags', [...data.tags, n]);
         setTagInput('');
     };
-    const removeTag = (name: string) => setData('tags', data.tags.filter(t => t !== name));
+    const removeTag = (name: string) => setData('tags', data.tags.filter(x => x !== name));
 
     const submit = (e: React.FormEvent) => {
         e.preventDefault();
@@ -106,23 +108,23 @@ export default function Index({ documents, tags, categories, classrooms, filters
 
     return (
         <AppLayout>
-            <Head title="Archives documentaires" />
+            <Head title={t('archives.head')} />
             <div className="w-full space-y-6">
 
                 <div className="flex items-start justify-between gap-4 flex-wrap">
                     <div>
                         <h1 className="text-4xl font-bold tracking-tight text-gray-900 flex items-center gap-2">
-                            <Archive className="w-8 h-8 text-blue-600" /> Archives documentaires
+                            <Archive className="w-8 h-8 text-blue-600" /> {t('archives.title')}
                         </h1>
-                        <p className="mt-2 text-gray-500">{stats.total} document(s) archivé(s){stats.trashed > 0 ? ` · ${stats.trashed} en corbeille` : ''}.</p>
+                        <p className="mt-2 text-gray-500">{t('archives.subtitle_docs', { count: stats.total })}{stats.trashed > 0 ? t('archives.trashed_suffix', { count: stats.trashed }) : ''}.</p>
                     </div>
                     <div className="flex gap-2">
                         <Button variant="outline" onClick={() => apply({ trashed: filters.trashed ? 0 : 1 })}
                             className={filters.trashed ? 'border-amber-300 text-amber-600' : ''}>
-                            <Trash2 className="w-4 h-4 mr-2" /> {filters.trashed ? 'Voir actifs' : 'Corbeille'}
+                            <Trash2 className="w-4 h-4 mr-2" /> {filters.trashed ? t('archives.view_active') : t('archives.trash')}
                         </Button>
                         <Button onClick={openCreate} className="bg-blue-600 hover:bg-blue-700 gap-2">
-                            <Plus className="w-4 h-4" /> Archiver un document
+                            <Plus className="w-4 h-4" /> {t('archives.archive_doc')}
                         </Button>
                     </div>
                 </div>
@@ -131,26 +133,26 @@ export default function Index({ documents, tags, categories, classrooms, filters
                 <div className="rounded-2xl bg-slate-50/70 ring-1 ring-slate-200 p-4 space-y-3">
                     <div className="flex flex-wrap gap-3 items-end">
                         <div className="relative flex-1 min-w-52">
-                            <label className="block text-xs font-semibold text-gray-500 mb-1.5">Recherche</label>
+                            <label className="block text-xs font-semibold text-gray-500 mb-1.5">{t('archives.search')}</label>
                             <Search className="absolute left-3 top-9 w-4 h-4 text-gray-400" />
-                            <Input value={search} onChange={e => setSearch(e.target.value)} onKeyDown={e => e.key === 'Enter' && apply()} placeholder="Titre, référence…" className="pl-9 bg-white" />
+                            <Input value={search} onChange={e => setSearch(e.target.value)} onKeyDown={e => e.key === 'Enter' && apply()} placeholder={t('archives.search_ph')} className="pl-9 bg-white" />
                         </div>
                         <div className="min-w-44">
-                            <label className="block text-xs font-semibold text-gray-500 mb-1.5">Catégorie</label>
+                            <label className="block text-xs font-semibold text-gray-500 mb-1.5">{t('archives.category')}</label>
                             <Select value={category} onValueChange={v => { setCategory(v); apply({ category: v === ALL ? '' : v }); }}>
                                 <SelectTrigger className="bg-white"><SelectValue /></SelectTrigger>
                                 <SelectContent>
-                                    <SelectItem value={ALL}>Toutes</SelectItem>
+                                    <SelectItem value={ALL}>{t('archives.all_categories')}</SelectItem>
                                     {Object.entries(categories).map(([k, l]) => <SelectItem key={k} value={k}>{l}</SelectItem>)}
                                 </SelectContent>
                             </Select>
                         </div>
                         <div className="min-w-36">
-                            <label className="block text-xs font-semibold text-gray-500 mb-1.5">Du</label>
+                            <label className="block text-xs font-semibold text-gray-500 mb-1.5">{t('archives.from')}</label>
                             <Input type="date" value={dateFrom} onChange={e => setDateFrom(e.target.value)} onBlur={() => apply()} className="bg-white" />
                         </div>
                         <div className="min-w-36">
-                            <label className="block text-xs font-semibold text-gray-500 mb-1.5">Au</label>
+                            <label className="block text-xs font-semibold text-gray-500 mb-1.5">{t('archives.to')}</label>
                             <Input type="date" value={dateTo} onChange={e => setDateTo(e.target.value)} onBlur={() => apply()} className="bg-white" />
                         </div>
                     </div>
@@ -169,7 +171,7 @@ export default function Index({ documents, tags, categories, classrooms, filters
                             })}
                             {activeFilters > 0 && (
                                 <button onClick={resetFilters} className="text-xs text-blue-600 hover:text-blue-700 inline-flex items-center gap-1 ml-2">
-                                    <X className="w-3 h-3" /> Réinitialiser ({activeFilters})
+                                    <X className="w-3 h-3" /> {t('archives.reset')} ({activeFilters})
                                 </button>
                             )}
                         </div>
@@ -181,20 +183,20 @@ export default function Index({ documents, tags, categories, classrooms, filters
                     <Table>
                         <TableHeader className="bg-gray-50">
                             <TableRow>
-                                <TableHead>Référence</TableHead>
-                                <TableHead>Document</TableHead>
-                                <TableHead>Tags</TableHead>
-                                <TableHead>Lié à</TableHead>
-                                <TableHead>Taille</TableHead>
-                                <TableHead>Archivé</TableHead>
-                                <TableHead className="text-center w-32">Actions</TableHead>
+                                <TableHead>{t('archives.th_reference')}</TableHead>
+                                <TableHead>{t('archives.th_document')}</TableHead>
+                                <TableHead>{t('archives.th_tags')}</TableHead>
+                                <TableHead>{t('archives.th_linked')}</TableHead>
+                                <TableHead>{t('archives.th_size')}</TableHead>
+                                <TableHead>{t('archives.th_archived')}</TableHead>
+                                <TableHead className="text-center w-32">{t('archives.th_actions')}</TableHead>
                             </TableRow>
                         </TableHeader>
                         <TableBody>
                             {documents.data.length === 0 ? (
                                 <TableRow><TableCell colSpan={7} className="py-16 text-center text-gray-400">
                                     <Archive className="w-10 h-10 mx-auto mb-2 opacity-30" />
-                                    {filters.trashed ? 'Corbeille vide.' : 'Aucun document archivé.'}
+                                    {filters.trashed ? t('archives.empty_trash') : t('archives.empty')}
                                 </TableCell></TableRow>
                             ) : documents.data.map(d => (
                                 <TableRow key={d.id} className="hover:bg-gray-50">
@@ -217,16 +219,16 @@ export default function Index({ documents, tags, categories, classrooms, filters
                                         <div className="flex justify-center gap-1.5">
                                             {filters.trashed ? (
                                                 <>
-                                                    <IconButton label="Restaurer" icon={<RotateCcw className="w-3.5 h-3.5" />} className="gap-1 text-xs" onClick={() => router.post(route('archives.restore', d.id), {}, { preserveScroll: true })} />
-                                                    <IconButton label="Supprimer définitivement" icon={<Trash2 className="w-3.5 h-3.5" />} className="border-red-200 text-red-500 hover:bg-red-50" onClick={() => setDeleteDoc(d)} />
+                                                    <IconButton label={t('archives.restore')} icon={<RotateCcw className="w-3.5 h-3.5" />} className="gap-1 text-xs" onClick={() => router.post(route('archives.restore', d.id), {}, { preserveScroll: true })} />
+                                                    <IconButton label={t('archives.delete_forever')} icon={<Trash2 className="w-3.5 h-3.5" />} className="border-red-200 text-red-500 hover:bg-red-50" onClick={() => setDeleteDoc(d)} />
                                                 </>
                                             ) : (
                                                 <>
                                                     <a href={route('archives.download', d.id)}>
-                                                        <IconButton label="Télécharger" icon={<Download className="w-3.5 h-3.5" />} className="text-xs" />
+                                                        <IconButton label={t('archives.download')} icon={<Download className="w-3.5 h-3.5" />} className="text-xs" />
                                                     </a>
-                                                    <IconButton label="Modifier" icon={<Pencil className="w-3.5 h-3.5" />} onClick={() => openEdit(d)} />
-                                                    <IconButton label="Supprimer" icon={<Trash2 className="w-3.5 h-3.5" />} className="border-red-200 text-red-500 hover:bg-red-50" onClick={() => router.delete(route('archives.destroy', d.id), { preserveScroll: true })} />
+                                                    <IconButton label={t('archives.edit')} icon={<Pencil className="w-3.5 h-3.5" />} onClick={() => openEdit(d)} />
+                                                    <IconButton label={t('archives.delete')} icon={<Trash2 className="w-3.5 h-3.5" />} className="border-red-200 text-red-500 hover:bg-red-50" onClick={() => router.delete(route('archives.destroy', d.id), { preserveScroll: true })} />
                                                 </>
                                             )}
                                         </div>
@@ -239,9 +241,9 @@ export default function Index({ documents, tags, categories, classrooms, filters
 
                 {documents.last_page > 1 && (
                     <div className="flex justify-center gap-2">
-                        <Button variant="outline" size="sm" disabled={documents.current_page <= 1} onClick={() => apply({ page: documents.current_page - 1 })}>Précédent</Button>
-                        <span className="text-sm text-gray-500 self-center">Page {documents.current_page} / {documents.last_page}</span>
-                        <Button variant="outline" size="sm" disabled={documents.current_page >= documents.last_page} onClick={() => apply({ page: documents.current_page + 1 })}>Suivant</Button>
+                        <Button variant="outline" size="sm" disabled={documents.current_page <= 1} onClick={() => apply({ page: documents.current_page - 1 })}>{t('archives.prev')}</Button>
+                        <span className="text-sm text-gray-500 self-center">{t('archives.page_of', { current: documents.current_page, last: documents.last_page })}</span>
+                        <Button variant="outline" size="sm" disabled={documents.current_page >= documents.last_page} onClick={() => apply({ page: documents.current_page + 1 })}>{t('archives.next')}</Button>
                     </div>
                 )}
             </div>
@@ -250,38 +252,38 @@ export default function Index({ documents, tags, categories, classrooms, filters
             <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
                 <DialogContent className="max-w-xl max-h-[90vh] overflow-y-auto">
                     <DialogHeader>
-                        <DialogTitle>{editing ? 'Modifier le document' : 'Archiver un document'}</DialogTitle>
+                        <DialogTitle>{editing ? t('archives.edit_title') : t('archives.create_title')}</DialogTitle>
                         <DialogDescription>
-                            {editing ? 'Mettez à jour les métadonnées et les tags.' : 'Ajoutez un fichier au coffre documentaire avec ses métadonnées et tags.'}
+                            {editing ? t('archives.edit_desc') : t('archives.create_desc')}
                         </DialogDescription>
                     </DialogHeader>
                     <form onSubmit={submit} className="space-y-4 py-1">
                         <div className="space-y-1.5">
-                            <label className="text-sm font-medium text-gray-700">Titre *</label>
+                            <label className="text-sm font-medium text-gray-700">{t('archives.f_title')} *</label>
                             <Input value={data.title} onChange={e => setData('title', e.target.value)} className={errors.title ? 'border-red-400' : ''} />
                             {errors.title && <p className="text-xs text-red-500">{errors.title}</p>}
                         </div>
                         <div className="grid grid-cols-2 gap-3">
                             <div className="space-y-1.5">
-                                <label className="text-sm font-medium text-gray-700">Catégorie *</label>
+                                <label className="text-sm font-medium text-gray-700">{t('archives.f_category')} *</label>
                                 <Select value={data.category} onValueChange={v => setData('category', v)}>
                                     <SelectTrigger><SelectValue /></SelectTrigger>
                                     <SelectContent>{Object.entries(categories).map(([k, l]) => <SelectItem key={k} value={k}>{l}</SelectItem>)}</SelectContent>
                                 </Select>
                             </div>
                             <div className="space-y-1.5">
-                                <label className="text-sm font-medium text-gray-700">Conservation jusqu'au</label>
+                                <label className="text-sm font-medium text-gray-700">{t('archives.retention')}</label>
                                 <Input type="date" value={data.retention_until} onChange={e => setData('retention_until', e.target.value)} />
                             </div>
                         </div>
                         <div className="space-y-1.5">
-                            <label className="text-sm font-medium text-gray-700">Description</label>
+                            <label className="text-sm font-medium text-gray-700">{t('archives.description')}</label>
                             <textarea value={data.description} onChange={e => setData('description', e.target.value)} rows={2}
                                 className="w-full rounded-md border border-slate-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
                         </div>
                         {!editing && (
                             <div className="space-y-1.5">
-                                <label className="text-sm font-medium text-gray-700">Fichier *</label>
+                                <label className="text-sm font-medium text-gray-700">{t('archives.file')} *</label>
                                 <input type="file" accept=".pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.jpg,.jpeg,.png,.webp,.zip"
                                     onChange={e => setData('file', e.target.files?.[0] ?? null)}
                                     className="block w-full text-sm text-gray-600 file:mr-3 file:rounded-lg file:border-0 file:bg-blue-50 file:px-3 file:py-1.5 file:text-blue-700 file:text-sm hover:file:bg-blue-100" />
@@ -290,21 +292,21 @@ export default function Index({ documents, tags, categories, classrooms, filters
                         )}
                         {/* Tags */}
                         <div className="space-y-1.5">
-                            <label className="text-sm font-medium text-gray-700">Tags</label>
+                            <label className="text-sm font-medium text-gray-700">{t('archives.tags')}</label>
                             <div className="flex flex-wrap gap-1.5 mb-1">
-                                {data.tags.map(t => (
-                                    <span key={t} className="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full inline-flex items-center gap-1">
-                                        {t}<button type="button" onClick={() => removeTag(t)}><X className="w-3 h-3" /></button>
+                                {data.tags.map(tg => (
+                                    <span key={tg} className="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full inline-flex items-center gap-1">
+                                        {tg}<button type="button" onClick={() => removeTag(tg)}><X className="w-3 h-3" /></button>
                                     </span>
                                 ))}
                             </div>
                             <Input value={tagInput} onChange={e => setTagInput(e.target.value)}
                                 onKeyDown={e => { if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); addTag(tagInput); } }}
-                                placeholder="Ajouter un tag puis Entrée…" />
+                                placeholder={t('archives.add_tag_ph')} />
                             {tags.length > 0 && (
                                 <div className="flex flex-wrap gap-1 mt-1">
-                                    {tags.filter(t => !data.tags.includes(t.name)).slice(0, 12).map(t => (
-                                        <button key={t.id} type="button" onClick={() => addTag(t.name)} className="text-[11px] px-1.5 py-0.5 rounded-full border text-gray-600" style={{ borderColor: t.color }}>+ {t.name}</button>
+                                    {tags.filter(tg => !data.tags.includes(tg.name)).slice(0, 12).map(tg => (
+                                        <button key={tg.id} type="button" onClick={() => addTag(tg.name)} className="text-[11px] px-1.5 py-0.5 rounded-full border text-gray-600" style={{ borderColor: tg.color }}>+ {tg.name}</button>
                                     ))}
                                 </div>
                             )}
@@ -312,37 +314,37 @@ export default function Index({ documents, tags, categories, classrooms, filters
                         {/* Liaison */}
                         <div className="grid grid-cols-2 gap-3">
                             <div className="space-y-1.5">
-                                <label className="text-sm font-medium text-gray-700">Lié à</label>
+                                <label className="text-sm font-medium text-gray-700">{t('archives.linked_to')}</label>
                                 <Select value={data.link_type || 'none'} onValueChange={v => setData('link_type', v === 'none' ? '' : v)}>
                                     <SelectTrigger><SelectValue /></SelectTrigger>
                                     <SelectContent>
-                                        <SelectItem value="none">Aucun</SelectItem>
-                                        <SelectItem value="classroom">Classe</SelectItem>
-                                        <SelectItem value="student">Élève (matricule)</SelectItem>
+                                        <SelectItem value="none">{t('archives.link_none')}</SelectItem>
+                                        <SelectItem value="classroom">{t('archives.link_classroom')}</SelectItem>
+                                        <SelectItem value="student">{t('archives.link_student')}</SelectItem>
                                     </SelectContent>
                                 </Select>
                             </div>
                             {data.link_type === 'classroom' && (
                                 <div className="space-y-1.5">
-                                    <label className="text-sm font-medium text-gray-700">Classe</label>
+                                    <label className="text-sm font-medium text-gray-700">{t('archives.classroom')}</label>
                                     <Select value={data.link_classroom_id} onValueChange={v => setData('link_classroom_id', v)}>
-                                        <SelectTrigger><SelectValue placeholder="Choisir" /></SelectTrigger>
+                                        <SelectTrigger><SelectValue placeholder={t('archives.choose')} /></SelectTrigger>
                                         <SelectContent>{classrooms.map(c => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}</SelectContent>
                                     </Select>
                                 </div>
                             )}
                             {data.link_type === 'student' && (
                                 <div className="space-y-1.5">
-                                    <label className="text-sm font-medium text-gray-700">Matricule élève</label>
+                                    <label className="text-sm font-medium text-gray-700">{t('archives.student_matricule')}</label>
                                     <Input value={data.link_student_matricule} onChange={e => setData('link_student_matricule', e.target.value)} className={errors.link_student_matricule ? 'border-red-400' : ''} />
                                     {errors.link_student_matricule && <p className="text-xs text-red-500">{errors.link_student_matricule}</p>}
                                 </div>
                             )}
                         </div>
                         <div className="flex justify-end gap-2 pt-2">
-                            <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>Annuler</Button>
+                            <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>{t('archives.cancel')}</Button>
                             <Button type="submit" disabled={processing} className="bg-blue-600 hover:bg-blue-700 gap-2">
-                                <Upload className="w-4 h-4" /> {editing ? 'Enregistrer' : 'Archiver'}
+                                <Upload className="w-4 h-4" /> {editing ? t('archives.save') : t('archives.archive')}
                             </Button>
                         </div>
                     </form>
@@ -352,13 +354,13 @@ export default function Index({ documents, tags, categories, classrooms, filters
             <AlertDialog open={!!deleteDoc} onOpenChange={() => setDeleteDoc(null)}>
                 <AlertDialogContent>
                     <AlertDialogHeader>
-                        <AlertDialogTitle>Supprimer définitivement ?</AlertDialogTitle>
-                        <AlertDialogDescription>Le fichier « {deleteDoc?.title} » sera supprimé du stockage. Cette action est irréversible.</AlertDialogDescription>
+                        <AlertDialogTitle>{t('archives.delete_forever_q')}</AlertDialogTitle>
+                        <AlertDialogDescription>{t('archives.delete_forever_desc', { title: deleteDoc?.title ?? '' })}</AlertDialogDescription>
                     </AlertDialogHeader>
                     <div className="flex justify-end gap-2">
-                        <AlertDialogCancel>Annuler</AlertDialogCancel>
+                        <AlertDialogCancel>{t('archives.cancel')}</AlertDialogCancel>
                         <AlertDialogAction className="bg-red-600 hover:bg-red-700" onClick={() => deleteDoc && router.delete(route('archives.force-delete', deleteDoc.id), { preserveScroll: true, onSuccess: () => setDeleteDoc(null) })}>
-                            Supprimer définitivement
+                            {t('archives.delete_forever')}
                         </AlertDialogAction>
                     </div>
                 </AlertDialogContent>
diff --git a/resources/js/pages/Archives/Tags.tsx b/resources/js/pages/Archives/Tags.tsx
index ef15553f..95eae23d 100644
--- a/resources/js/pages/Archives/Tags.tsx
+++ b/resources/js/pages/Archives/Tags.tsx
@@ -15,6 +15,7 @@ import {
     Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from '@/components/ui/table';
 import { route } from '@/helpers/route';
+import { useTranslation } from '@/helpers/i18n';
 import AppLayout from '@/layouts/app-layout';
 
 interface Tag { id: string; name: string; color: string; documents_count: number; }
@@ -35,6 +36,7 @@ interface Props {
 const COLORS = ['#64748b', '#ef4444', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899'];
 
 export default function Tags({ tags, filters }: Readonly<Props>) {
+    const { t } = useTranslation();
     const [deleteId, setDeleteId] = useState<string | null>(null);
     const [createOpen, setCreateOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState(filters.search || '');
@@ -70,19 +72,19 @@ export default function Tags({ tags, filters }: Readonly<Props>) {
 
     return (
         <AppLayout>
-            <Head title="Tags d'archivage" />
+            <Head title={t('archives.tags_page.head')} />
             <div className="space-y-6">
 
                 {/* Header */}
                 <div className="flex items-start justify-between gap-4 flex-wrap">
                     <div>
                         <h1 className="text-4xl font-bold tracking-tight text-gray-900 flex items-center gap-3">
-                            <TagIcon className="h-7 w-7 text-blue-600 shrink-0" /> Tags d'archivage
+                            <TagIcon className="h-7 w-7 text-blue-600 shrink-0" /> {t('archives.tags_page.title')}
                         </h1>
-                        <p className="mt-2 text-lg text-gray-600">Organisez les documents archivés par mots-clés réutilisables.</p>
+                        <p className="mt-2 text-lg text-gray-600">{t('archives.tags_page.subtitle')}</p>
                     </div>
                     <Button onClick={openCreate} className="gap-2 bg-blue-600 hover:bg-blue-700">
-                        <Plus className="w-5 h-5" /> Nouveau tag
+                        <Plus className="w-5 h-5" /> {t('archives.tags_page.new_tag')}
                     </Button>
                 </div>
 
@@ -90,7 +92,7 @@ export default function Tags({ tags, filters }: Readonly<Props>) {
                 <div className="bg-linear-to-r from-blue-50 to-cyan-50 rounded-2xl p-6 ring-1 ring-blue-100 shadow-sm">
                     <div className="flex items-center justify-between">
                         <div>
-                            <p className="text-sm font-medium text-gray-600">Tags au total</p>
+                            <p className="text-sm font-medium text-gray-600">{t('archives.tags_page.total')}</p>
                             <p className="text-3xl font-bold text-gray-900 mt-2">{tags.total}</p>
                         </div>
                         <TagIcon className="w-12 h-12 text-blue-600 opacity-20" />
@@ -103,7 +105,7 @@ export default function Tags({ tags, filters }: Readonly<Props>) {
                         <div className="flex-1 relative">
                             <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
                             <Input
-                                placeholder="Rechercher un tag par nom..."
+                                placeholder={t('archives.tags_page.search_ph')}
                                 className="pl-10 border-slate-200 focus:border-blue-500"
                                 value={searchQuery}
                                 onChange={(e) => setSearchQuery(e.target.value)}
@@ -126,36 +128,36 @@ export default function Tags({ tags, filters }: Readonly<Props>) {
                     <Table>
                         <TableHeader className="bg-gray-50 border-b border-slate-200">
                             <TableRow>
-                                <TableHead className="text-gray-700 font-semibold">Tag</TableHead>
-                                <TableHead className="text-gray-700 font-semibold">Documents</TableHead>
-                                <TableHead className="text-gray-700 font-semibold">Couleur</TableHead>
-                                <TableHead className="text-gray-700 font-semibold text-right">Actions</TableHead>
+                                <TableHead className="text-gray-700 font-semibold">{t('archives.tags_page.th_tag')}</TableHead>
+                                <TableHead className="text-gray-700 font-semibold">{t('archives.tags_page.th_documents')}</TableHead>
+                                <TableHead className="text-gray-700 font-semibold">{t('archives.tags_page.th_color')}</TableHead>
+                                <TableHead className="text-gray-700 font-semibold text-right">{t('archives.tags_page.th_actions')}</TableHead>
                             </TableRow>
                         </TableHeader>
                         <TableBody>
                             {tags.data.length > 0 ? (
-                                tags.data.map((t) => (
-                                    <TableRow key={t.id} className="border-b border-slate-100 hover:bg-blue-50/30">
+                                tags.data.map((tg) => (
+                                    <TableRow key={tg.id} className="border-b border-slate-100 hover:bg-blue-50/30">
                                         <TableCell>
-                                            <span className="text-xs font-medium px-2.5 py-1 rounded-full text-white" style={{ backgroundColor: t.color }}>{t.name}</span>
+                                            <span className="text-xs font-medium px-2.5 py-1 rounded-full text-white" style={{ backgroundColor: tg.color }}>{tg.name}</span>
                                         </TableCell>
-                                        <TableCell className="text-gray-600">{t.documents_count} document(s)</TableCell>
+                                        <TableCell className="text-gray-600">{t('archives.tags_page.documents_count', { count: tg.documents_count })}</TableCell>
                                         <TableCell>
-                                            <div className="flex gap-1" title="Changer la couleur">
+                                            <div className="flex gap-1" title={t('archives.tags_page.change_color')}>
                                                 {COLORS.map((c) => (
-                                                    <button key={c} onClick={() => updateColor(t, c)}
-                                                        className={`w-4 h-4 rounded-full transition ${t.color === c ? 'ring-2 ring-offset-1 ring-gray-300' : 'opacity-60 hover:opacity-100'}`}
-                                                        style={{ backgroundColor: c }} aria-label={`Couleur ${c}`} />
+                                                    <button key={c} onClick={() => updateColor(tg, c)}
+                                                        className={`w-4 h-4 rounded-full transition ${tg.color === c ? 'ring-2 ring-offset-1 ring-gray-300' : 'opacity-60 hover:opacity-100'}`}
+                                                        style={{ backgroundColor: c }} aria-label={t('archives.tags_page.color_aria', { color: c })} />
                                                 ))}
                                             </div>
                                         </TableCell>
                                         <TableCell className="text-right">
                                             <div className="flex justify-end gap-2">
                                                 <IconButton
-                                                    label="Supprimer"
+                                                    label={t('archives.tags_page.delete')}
                                                     icon={<Trash2 className="w-4 h-4" />}
                                                     className="border-slate-200 text-gray-700 hover:bg-red-50 hover:text-red-600"
-                                                    onClick={() => setDeleteId(t.id)}
+                                                    onClick={() => setDeleteId(tg.id)}
                                                 />
                                             </div>
                                         </TableCell>
@@ -165,7 +167,7 @@ export default function Tags({ tags, filters }: Readonly<Props>) {
                                 <TableRow>
                                     <TableCell colSpan={4} className="text-center py-10">
                                         <TagIcon className="w-10 h-10 mx-auto mb-2 text-gray-300" />
-                                        <p className="text-gray-600 font-medium">Aucun tag trouvé</p>
+                                        <p className="text-gray-600 font-medium">{t('archives.tags_page.empty')}</p>
                                     </TableCell>
                                 </TableRow>
                             )}
@@ -177,7 +179,7 @@ export default function Tags({ tags, filters }: Readonly<Props>) {
                 {tags.last_page > 1 && (
                     <div className="flex items-center justify-between">
                         <p className="text-sm text-gray-600">
-                            Affichage {tags.from} à {tags.to} sur {tags.total}
+                            {t('archives.tags_page.showing', { from: tags.from, to: tags.to, total: tags.total })}
                         </p>
                         <div className="flex gap-2">
                             <Button variant="outline" size="sm" className="border-slate-200"
@@ -199,35 +201,35 @@ export default function Tags({ tags, filters }: Readonly<Props>) {
             <Dialog open={createOpen} onOpenChange={setCreateOpen}>
                 <DialogContent>
                     <DialogHeader>
-                        <DialogTitle>Nouveau tag</DialogTitle>
-                        <DialogDescription>Un mot-clé réutilisable pour classer les documents archivés.</DialogDescription>
+                        <DialogTitle>{t('archives.tags_page.new_tag')}</DialogTitle>
+                        <DialogDescription>{t('archives.tags_page.new_tag_desc')}</DialogDescription>
                     </DialogHeader>
                     <form onSubmit={create} className="space-y-4 py-1">
                         <div className="space-y-1.5">
-                            <label className="text-sm font-medium text-gray-700">Nom du tag *</label>
-                            <Input autoFocus value={data.name} onChange={(e) => setData('name', e.target.value)} placeholder="Ex: Contrat, Inspection…" className={errors.name ? 'border-red-400' : ''} />
+                            <label className="text-sm font-medium text-gray-700">{t('archives.tags_page.name')} *</label>
+                            <Input autoFocus value={data.name} onChange={(e) => setData('name', e.target.value)} placeholder={t('archives.tags_page.name_ph')} className={errors.name ? 'border-red-400' : ''} />
                             {errors.name && <p className="text-xs text-red-500">{errors.name}</p>}
                         </div>
                         <div className="space-y-1.5">
-                            <label className="text-sm font-medium text-gray-700">Couleur</label>
+                            <label className="text-sm font-medium text-gray-700">{t('archives.tags_page.color')}</label>
                             <div className="flex flex-wrap gap-2">
                                 {COLORS.map((c) => (
                                     <button type="button" key={c} onClick={() => setData('color', c)}
                                         className={`w-7 h-7 rounded-full transition ${data.color === c ? 'ring-2 ring-offset-2 ring-gray-400' : 'hover:scale-110'}`}
-                                        style={{ backgroundColor: c }} aria-label={`Couleur ${c}`} />
+                                        style={{ backgroundColor: c }} aria-label={t('archives.tags_page.color_aria', { color: c })} />
                                 ))}
                             </div>
                         </div>
                         <div className="flex items-center gap-2 pt-1">
-                            <span className="text-xs text-gray-400">Aperçu :</span>
+                            <span className="text-xs text-gray-400">{t('archives.tags_page.preview')}</span>
                             <span className="text-xs font-medium px-2.5 py-1 rounded-full text-white" style={{ backgroundColor: data.color }}>
-                                {data.name || 'Nom du tag'}
+                                {data.name || t('archives.tags_page.default_name')}
                             </span>
                         </div>
                         <div className="flex justify-end gap-2 pt-2">
-                            <Button type="button" variant="outline" onClick={() => setCreateOpen(false)}>Annuler</Button>
+                            <Button type="button" variant="outline" onClick={() => setCreateOpen(false)}>{t('archives.tags_page.cancel')}</Button>
                             <Button type="submit" disabled={processing} className="bg-blue-600 hover:bg-blue-700 gap-2">
-                                <Plus className="w-4 h-4" /> Créer
+                                <Plus className="w-4 h-4" /> {t('archives.tags_page.create')}
                             </Button>
                         </div>
                     </form>
@@ -237,13 +239,13 @@ export default function Tags({ tags, filters }: Readonly<Props>) {
             <AlertDialog open={!!deleteId} onOpenChange={() => setDeleteId(null)}>
                 <AlertDialogContent>
                     <AlertDialogHeader>
-                        <AlertDialogTitle>Supprimer ce tag ?</AlertDialogTitle>
-                        <AlertDialogDescription>Le tag sera retiré de tous les documents associés. Les documents ne sont pas supprimés.</AlertDialogDescription>
+                        <AlertDialogTitle>{t('archives.tags_page.delete_q')}</AlertDialogTitle>
+                        <AlertDialogDescription>{t('archives.tags_page.delete_desc')}</AlertDialogDescription>
                     </AlertDialogHeader>
                     <div className="flex justify-end gap-2">
-                        <AlertDialogCancel>Annuler</AlertDialogCancel>
+                        <AlertDialogCancel>{t('archives.tags_page.cancel')}</AlertDialogCancel>
                         <AlertDialogAction className="bg-red-600 hover:bg-red-700" onClick={() => deleteId && router.delete(route('archives.tags.destroy', deleteId), { preserveScroll: true, onSuccess: () => setDeleteId(null) })}>
-                            Supprimer
+                            {t('archives.tags_page.delete')}
                         </AlertDialogAction>
                     </div>
                 </AlertDialogContent>

From 0051422377f139280ebde539426a6876b70ea4c8 Mon Sep 17 00:00:00 2001
From: horacioskrp <hervekudayah@gmail.com>
Date: Wed, 11 Nov 2026 16:07:20 +0000
Subject: [PATCH 3/3] =?UTF-8?q?feat(i18n):=20statistiques=20=E2=80=94=20ef?=
 =?UTF-8?q?fectifs,=20finances,=20r=C3=A9ussite,=20encadrement,=20assiduit?=
 =?UTF-8?q?=C3=A9,=20comparaisons=20&=20g=C3=A9ographie=20(FR/EN)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lang/en/statistiques.php                  | 169 ++++++++++++++
 lang/fr/statistiques.php                  | 169 ++++++++++++++
 resources/js/pages/Statistiques/Index.tsx | 257 +++++++++++-----------
 3 files changed, 469 insertions(+), 126 deletions(-)
 create mode 100644 lang/en/statistiques.php
 create mode 100644 lang/fr/statistiques.php

diff --git a/lang/en/statistiques.php b/lang/en/statistiques.php
new file mode 100644
index 00000000..4f3be7fc
--- /dev/null
+++ b/lang/en/statistiques.php
@@ -0,0 +1,169 @@
+<?php
+
+return [
+    'title' => 'Statistics',
+    'subtitle' => 'School indicators — enrollment, finances and success.',
+    'year_ph' => 'Year',
+    'class_ph' => 'Class',
+    'gender_ph' => 'Gender',
+    'all_classes' => 'All classes',
+    'all' => 'All',
+    'boys' => 'Boys',
+    'girls' => 'Girls',
+    'other' => 'Other',
+    'active_suffix' => ' · active',
+    'all_cycles' => 'All',
+    'sort' => 'Sort',
+    'sort_level' => 'By level',
+    'sort_headcount' => 'By headcount',
+    'sort_amount' => 'By amount',
+    'sort_rate' => 'By rate',
+    'years_old' => ':value yrs',
+
+    // Tabs
+    'tab_effectifs' => 'Enrollment & parity',
+    'tab_finances' => 'Finances & recovery',
+    'tab_reussite' => 'Success & exams',
+    'tab_encadrement' => 'Supervision',
+    'tab_assiduite' => 'Attendance',
+    'tab_comparaisons' => 'Comparisons',
+    'tab_geographie' => 'Geography',
+
+    // Enrollment
+    'kpi_total' => 'Total headcount',
+    'kpi_total_sub' => ':boys B · :girls G',
+    'kpi_ips' => 'Parity index (GPI)',
+    'kpi_ips_sub' => ':pct% girls',
+    'kpi_redoublement' => 'Repetition rate',
+    'kpi_promotion_sub' => 'Promotion :pct%',
+    'kpi_abandon' => 'Dropout rate',
+    'kpi_age_sub' => 'Average age :age',
+    'card_by_class' => 'Headcount by class (boys / girls)',
+    'card_by_gender' => 'Breakdown by gender',
+    'card_age_pyramid' => 'Age pyramid (boys / girls)',
+    'overage_label' => 'Over-age rate (≥ +:threshold yrs)',
+    'overage_hint' => 'Set the expected age on classes to enable this calculation.',
+    'card_city' => 'Geographic origin (top cities, by gender)',
+    'not_filled' => 'Not filled in',
+
+    // Finances
+    'kpi_billed' => 'Total billed',
+    'kpi_billed_sub' => ':count invoices',
+    'kpi_collected' => 'Collected',
+    'kpi_recovery' => 'Recovery rate',
+    'kpi_remaining_sub' => ':amount remaining',
+    'kpi_unpaid' => 'Unpaid',
+    'kpi_unpaid_sub' => ':count partial',
+    'card_monthly' => 'Monthly collections',
+    'card_methods' => 'Payment methods',
+    'recovery_by_class' => 'Recovery by class',
+    'card_billed_split' => 'Billed: collected / remaining',
+    'series_collected' => 'Collected',
+    'series_remaining' => 'Remaining',
+    'card_recovery_rate' => 'Recovery rate by class',
+    'rate_label' => 'Rate',
+    'avg_prefix' => 'avg. :rate%',
+    'legend_high' => '≥ 80 %',
+    'legend_mid' => '60–79 %',
+    'legend_low' => '< 60 %',
+    'card_detail' => 'Detail by class',
+    'th_class' => 'Class',
+    'th_billed' => 'Billed',
+    'th_collected' => 'Collected',
+    'th_remaining' => 'Remaining',
+    'th_rate' => 'Rate',
+    'method_cash' => 'Cash',
+    'method_mobile_money' => 'Mobile Money',
+    'method_bank_transfer' => 'Transfer',
+    'method_cheque' => 'Cheque',
+
+    // Success
+    'kpi_bulletins' => 'Validated reports',
+    'kpi_average' => 'Overall average',
+    'kpi_passrate' => 'Internal pass rate (≥10)',
+    'kpi_admission' => 'Official exam admission',
+    'card_mentions' => 'Distinction breakdown',
+    'mention_passable' => 'Pass',
+    'mention_assez_bien' => 'Fairly good',
+    'mention_bien' => 'Good',
+    'mention_tres_bien' => 'Very good',
+    'card_exams' => 'Official exams (CEPD / BEPC / BAC)',
+    'no_exams' => 'No official exam for this year',
+    'th_exam' => 'Exam',
+    'th_registered' => 'Registered',
+    'th_admitted' => 'Admitted',
+    'th_admission' => 'Admission',
+
+    // Supervision
+    'kpi_rem' => 'Student / teacher ratio',
+    'kpi_rem_sub' => ':count teachers',
+    'kpi_students' => 'Total headcount',
+    'kpi_avg_class' => 'Average class size',
+    'kpi_avg_class_sub' => ':count classes',
+    'kpi_overcrowded' => 'Overcrowded classes',
+    'kpi_overcrowded_sub' => '> :threshold students',
+    'card_class_sizes' => 'Headcount by class (red = overcrowded)',
+    'series_students' => 'Students',
+    'card_overcrowded' => 'Overcrowded classes to watch',
+    'students_count' => ':count students',
+
+    // Attendance
+    'no_attendance' => 'No attendance data for this period.',
+    'kpi_presence' => 'Attendance rate',
+    'kpi_presence_sub' => ':count present',
+    'kpi_absence' => 'Absence rate',
+    'kpi_absence_sub' => ':count absences',
+    'kpi_late' => 'Lateness rate',
+    'kpi_late_sub' => ':count late',
+    'kpi_chronic' => 'Chronic absenteeism',
+    'kpi_chronic_sub' => '> :threshold absences',
+    'card_by_period' => 'Attendance by term',
+    'series_present' => 'Present',
+    'series_absent' => 'Absent',
+    'series_late' => 'Late',
+    'card_absence_by_class' => 'Absence rate by class',
+
+    // Comparisons
+    'need_two_years' => 'Trends become meaningful with at least two academic years filled in.',
+    'kpi_effectif' => 'Headcount',
+    'kpi_reussite' => 'Success',
+    'kpi_recouvrement' => 'Recovery',
+    'kpi_abandon_short' => 'Dropout',
+    'card_effectif_evol' => 'Headcount trend',
+    'series_effectif' => 'Headcount',
+    'card_performance' => 'Performance (%)',
+    'series_reussite' => 'Success',
+    'series_recouvrement' => 'Recovery',
+    'card_deperdition' => 'School wastage (%)',
+    'series_redoublement' => 'Repetition',
+    'series_abandon' => 'Dropout',
+    'deperdition_hint' => 'The current year is not plotted: end-of-year decisions (repetition, dropout) are not yet finalized.',
+    'card_comparison' => 'Comparison table',
+    'th_year' => 'Year',
+    'th_effectif' => 'Headcount',
+    'th_girls_pct' => '% girls',
+    'th_redoubl' => 'Repet.',
+    'th_abandon' => 'Dropout',
+    'th_recouvr' => 'Recov.',
+    'th_reussite' => 'Success',
+    'in_progress' => 'in progress',
+
+    // Geography
+    'coverage_note_1' => 'Origin filled in for',
+    'coverage_note_2' => 'of students',
+    'coverage_note_3' => 'Complete the region/prefecture on the student record to refine.',
+    'no_geo' => 'No geographic origin filled in.',
+    'kpi_coverage' => 'Coverage',
+    'kpi_coverage_sub' => ':localized / :total students',
+    'kpi_grand_lome' => 'Greater Lomé',
+    'kpi_grand_lome_sub' => 'Golfe + Agoè-Nyivé',
+    'kpi_regions' => 'Regions',
+    'kpi_regions_sub' => 'represented',
+    'kpi_prefectures' => 'Prefectures',
+    'kpi_prefectures_sub' => 'of origin',
+    'card_origin' => 'Student origin — regions and prefectures',
+    'students_tooltip' => ':value students',
+    'headcount_label' => 'Headcount',
+    'shade_note' => '· shade = prefecture headcount',
+    'card_by_region' => 'Headcount by region',
+];
diff --git a/lang/fr/statistiques.php b/lang/fr/statistiques.php
new file mode 100644
index 00000000..29cbb930
--- /dev/null
+++ b/lang/fr/statistiques.php
@@ -0,0 +1,169 @@
+<?php
+
+return [
+    'title' => 'Statistiques',
+    'subtitle' => 'Indicateurs de l\'établissement — effectifs, finances et réussite.',
+    'year_ph' => 'Année',
+    'class_ph' => 'Classe',
+    'gender_ph' => 'Sexe',
+    'all_classes' => 'Toutes les classes',
+    'all' => 'Tous',
+    'boys' => 'Garçons',
+    'girls' => 'Filles',
+    'other' => 'Autre',
+    'active_suffix' => ' · active',
+    'all_cycles' => 'Tous',
+    'sort' => 'Tri',
+    'sort_level' => 'Par niveau',
+    'sort_headcount' => 'Par effectif',
+    'sort_amount' => 'Par montant',
+    'sort_rate' => 'Par taux',
+    'years_old' => ':value ans',
+
+    // Onglets
+    'tab_effectifs' => 'Effectifs & parité',
+    'tab_finances' => 'Finances & recouvrement',
+    'tab_reussite' => 'Réussite & examens',
+    'tab_encadrement' => 'Encadrement',
+    'tab_assiduite' => 'Assiduité',
+    'tab_comparaisons' => 'Comparaisons',
+    'tab_geographie' => 'Géographie',
+
+    // Effectifs
+    'kpi_total' => 'Effectif total',
+    'kpi_total_sub' => ':boys G · :girls F',
+    'kpi_ips' => 'Indice de parité (IPS)',
+    'kpi_ips_sub' => ':pct% de filles',
+    'kpi_redoublement' => 'Taux de redoublement',
+    'kpi_promotion_sub' => 'Promotion :pct%',
+    'kpi_abandon' => 'Taux d\'abandon',
+    'kpi_age_sub' => 'Âge moyen :age',
+    'card_by_class' => 'Effectifs par classe (garçons / filles)',
+    'card_by_gender' => 'Répartition par sexe',
+    'card_age_pyramid' => 'Pyramide des âges (garçons / filles)',
+    'overage_label' => 'Taux de sur-âge (≥ +:threshold ans)',
+    'overage_hint' => 'Renseignez l\'âge attendu sur les classes pour activer ce calcul.',
+    'card_city' => 'Origine géographique (top villes, par sexe)',
+    'not_filled' => 'Non renseigné',
+
+    // Finances
+    'kpi_billed' => 'Total facturé',
+    'kpi_billed_sub' => ':count factures',
+    'kpi_collected' => 'Encaissé',
+    'kpi_recovery' => 'Taux de recouvrement',
+    'kpi_remaining_sub' => ':amount restant',
+    'kpi_unpaid' => 'Impayés',
+    'kpi_unpaid_sub' => ':count partiels',
+    'card_monthly' => 'Encaissements mensuels',
+    'card_methods' => 'Modes de paiement',
+    'recovery_by_class' => 'Recouvrement par classe',
+    'card_billed_split' => 'Facturé : encaissé / reste à recouvrer',
+    'series_collected' => 'Encaissé',
+    'series_remaining' => 'Reste à recouvrer',
+    'card_recovery_rate' => 'Taux de recouvrement par classe',
+    'rate_label' => 'Taux',
+    'avg_prefix' => 'moy. :rate%',
+    'legend_high' => '≥ 80 %',
+    'legend_mid' => '60–79 %',
+    'legend_low' => '< 60 %',
+    'card_detail' => 'Détail par classe',
+    'th_class' => 'Classe',
+    'th_billed' => 'Facturé',
+    'th_collected' => 'Encaissé',
+    'th_remaining' => 'Reste',
+    'th_rate' => 'Taux',
+    'method_cash' => 'Espèces',
+    'method_mobile_money' => 'Mobile Money',
+    'method_bank_transfer' => 'Virement',
+    'method_cheque' => 'Chèque',
+
+    // Réussite
+    'kpi_bulletins' => 'Bulletins validés',
+    'kpi_average' => 'Moyenne générale',
+    'kpi_passrate' => 'Réussite interne (≥10)',
+    'kpi_admission' => 'Admission examens off.',
+    'card_mentions' => 'Répartition des mentions',
+    'mention_passable' => 'Passable',
+    'mention_assez_bien' => 'Assez bien',
+    'mention_bien' => 'Bien',
+    'mention_tres_bien' => 'Très bien',
+    'card_exams' => 'Examens officiels (CEPD / BEPC / BAC)',
+    'no_exams' => 'Aucun examen officiel pour cette année',
+    'th_exam' => 'Examen',
+    'th_registered' => 'Inscrits',
+    'th_admitted' => 'Admis',
+    'th_admission' => 'Admission',
+
+    // Encadrement
+    'kpi_rem' => 'Ratio élèves / enseignant',
+    'kpi_rem_sub' => ':count enseignants',
+    'kpi_students' => 'Effectif total',
+    'kpi_avg_class' => 'Taille moyenne / classe',
+    'kpi_avg_class_sub' => ':count classes',
+    'kpi_overcrowded' => 'Classes pléthoriques',
+    'kpi_overcrowded_sub' => '> :threshold élèves',
+    'card_class_sizes' => 'Effectif par classe (rouge = pléthorique)',
+    'series_students' => 'Élèves',
+    'card_overcrowded' => 'Classes pléthoriques à surveiller',
+    'students_count' => ':count élèves',
+
+    // Assiduité
+    'no_attendance' => 'Aucune donnée de présence pour cette période.',
+    'kpi_presence' => 'Taux de présence',
+    'kpi_presence_sub' => ':count présences',
+    'kpi_absence' => 'Taux d\'absence',
+    'kpi_absence_sub' => ':count absences',
+    'kpi_late' => 'Taux de retard',
+    'kpi_late_sub' => ':count retards',
+    'kpi_chronic' => 'Absentéisme chronique',
+    'kpi_chronic_sub' => '> :threshold absences',
+    'card_by_period' => 'Présences par période',
+    'series_present' => 'Présents',
+    'series_absent' => 'Absents',
+    'series_late' => 'Retards',
+    'card_absence_by_class' => 'Taux d\'absence par classe',
+
+    // Comparaisons
+    'need_two_years' => 'Les tendances se précisent avec au moins deux années académiques renseignées.',
+    'kpi_effectif' => 'Effectif',
+    'kpi_reussite' => 'Réussite',
+    'kpi_recouvrement' => 'Recouvrement',
+    'kpi_abandon_short' => 'Abandon',
+    'card_effectif_evol' => 'Évolution de l\'effectif',
+    'series_effectif' => 'Effectif',
+    'card_performance' => 'Performance (%)',
+    'series_reussite' => 'Réussite',
+    'series_recouvrement' => 'Recouvrement',
+    'card_deperdition' => 'Déperdition scolaire (%)',
+    'series_redoublement' => 'Redoublement',
+    'series_abandon' => 'Abandon',
+    'deperdition_hint' => 'L\'année en cours n\'est pas tracée : les décisions de fin d\'année (redoublement, abandon) ne sont pas encore arrêtées.',
+    'card_comparison' => 'Tableau comparatif',
+    'th_year' => 'Année',
+    'th_effectif' => 'Effectif',
+    'th_girls_pct' => '% filles',
+    'th_redoubl' => 'Redoubl.',
+    'th_abandon' => 'Abandon',
+    'th_recouvr' => 'Recouvr.',
+    'th_reussite' => 'Réussite',
+    'in_progress' => 'en cours',
+
+    // Géographie
+    'coverage_note_1' => 'Origine renseignée pour',
+    'coverage_note_2' => 'des élèves',
+    'coverage_note_3' => 'Complétez la région/préfecture sur la fiche élève pour affiner.',
+    'no_geo' => 'Aucune origine géographique renseignée.',
+    'kpi_coverage' => 'Couverture',
+    'kpi_coverage_sub' => ':localized / :total élèves',
+    'kpi_grand_lome' => 'Grand Lomé',
+    'kpi_grand_lome_sub' => 'Golfe + Agoè-Nyivé',
+    'kpi_regions' => 'Régions',
+    'kpi_regions_sub' => 'représentées',
+    'kpi_prefectures' => 'Préfectures',
+    'kpi_prefectures_sub' => 'd\'origine',
+    'card_origin' => 'Origine des élèves — régions et préfectures',
+    'students_tooltip' => ':value élèves',
+    'headcount_label' => 'Effectif',
+    'shade_note' => '· nuance = effectif de la préfecture',
+    'card_by_region' => 'Effectif par région',
+];
diff --git a/resources/js/pages/Statistiques/Index.tsx b/resources/js/pages/Statistiques/Index.tsx
index 271affe9..66702ccc 100644
--- a/resources/js/pages/Statistiques/Index.tsx
+++ b/resources/js/pages/Statistiques/Index.tsx
@@ -9,6 +9,7 @@ import { Button } from '@/components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { useMoney } from '@/helpers/money';
 import { route } from '@/helpers/route';
+import { useTranslation } from '@/helpers/i18n';
 import AppLayout from '@/layouts/app-layout';
 import { useChartTheme } from '@/lib/chart-theme';
 import type { BreadcrumbItem } from '@/types';
@@ -78,11 +79,6 @@ interface Props {
 }
 
 /* ---------------- Helpers ---------------- */
-const methodLabel: Record<string, string> = { CASH: 'Espèces', MOBILE_MONEY: 'Mobile Money', BANK_TRANSFER: 'Virement', CHEQUE: 'Chèque' };
-
-
-const breadcrumbs: BreadcrumbItem[] = [{ title: 'Statistiques', href: '/statistiques' }];
-
 function Kpi({ label, value, sub, icon: Icon, tone }: { label: string; value: string | number; sub?: string; icon: React.ElementType; tone: string }) {
     return (
         <div className="rounded-xl border border-gray-100 dark:border-gray-700 bg-white dark:bg-card p-5 shadow-sm">
@@ -165,23 +161,32 @@ function TreemapNode(props: {
 type Tab = 'effectifs' | 'finances' | 'reussite' | 'encadrement' | 'assiduite' | 'comparaisons' | 'geographie';
 
 export default function StatisticsIndex({ filters, academicYears, classes, enrollment, finance, success, resources, attendance, trends, geography }: Readonly<Props>) {
+    const { t } = useTranslation();
     const theme = useChartTheme();
     const [BLUE, ORANGE, GREEN, VIOLET] = theme.series;
 
+    const breadcrumbs: BreadcrumbItem[] = [{ title: t('statistiques.title'), href: '/statistiques' }];
+    const methodLabel: Record<string, string> = {
+        CASH: t('statistiques.method_cash'),
+        MOBILE_MONEY: t('statistiques.method_mobile_money'),
+        BANK_TRANSFER: t('statistiques.method_bank_transfer'),
+        CHEQUE: t('statistiques.method_cheque'),
+    };
+
     // La couleur est portée par la catégorie elle-même : filtrer une catégorie
     // vide ne doit jamais repeindre les autres.
     const genderData = [
-        { name: 'Garçons', value: enrollment.gender.male, color: BLUE },
-        { name: 'Filles', value: enrollment.gender.female, color: ORANGE },
-        { name: 'Autre', value: enrollment.gender.other, color: GREEN },
+        { name: t('statistiques.boys'), value: enrollment.gender.male, color: BLUE },
+        { name: t('statistiques.girls'), value: enrollment.gender.female, color: ORANGE },
+        { name: t('statistiques.other'), value: enrollment.gender.other, color: GREEN },
     ].filter((d) => d.value > 0);
 
     // Donnée ordonnée (Passable → Très bien) : rampe séquentielle, pas des teintes sans rapport.
     const mentionData = [
-        { name: 'Passable', value: success.mentions.passable },
-        { name: 'Assez bien', value: success.mentions.assez_bien },
-        { name: 'Bien', value: success.mentions.bien },
-        { name: 'Très bien', value: success.mentions.tres_bien },
+        { name: t('statistiques.mention_passable'), value: success.mentions.passable },
+        { name: t('statistiques.mention_assez_bien'), value: success.mentions.assez_bien },
+        { name: t('statistiques.mention_bien'), value: success.mentions.bien },
+        { name: t('statistiques.mention_tres_bien'), value: success.mentions.tres_bien },
     ].map((d, i) => ({ ...d, color: theme.sequential[i] })).filter((d) => d.value > 0);
     const money = useMoney();
     const [tab, setTab] = useState<Tab>('effectifs');
@@ -202,13 +207,13 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
     };
 
     const tabs: { key: Tab; label: string; icon: React.ElementType }[] = [
-        { key: 'effectifs', label: 'Effectifs & parité', icon: Users },
-        { key: 'finances', label: 'Finances & recouvrement', icon: Wallet },
-        { key: 'reussite', label: 'Réussite & examens', icon: GraduationCap },
-        { key: 'encadrement', label: 'Encadrement', icon: School },
-        { key: 'assiduite', label: 'Assiduité', icon: UserCheck },
-        { key: 'comparaisons', label: 'Comparaisons', icon: TrendingUp },
-        { key: 'geographie', label: 'Géographie', icon: MapPin },
+        { key: 'effectifs', label: t('statistiques.tab_effectifs'), icon: Users },
+        { key: 'finances', label: t('statistiques.tab_finances'), icon: Wallet },
+        { key: 'reussite', label: t('statistiques.tab_reussite'), icon: GraduationCap },
+        { key: 'encadrement', label: t('statistiques.tab_encadrement'), icon: School },
+        { key: 'assiduite', label: t('statistiques.tab_assiduite'), icon: UserCheck },
+        { key: 'comparaisons', label: t('statistiques.tab_comparaisons'), icon: TrendingUp },
+        { key: 'geographie', label: t('statistiques.tab_geographie'), icon: MapPin },
     ];
 
     /* ---- Effectifs & parité : filtre par cycle sur les classes, pyramide des âges. ---- */
@@ -264,10 +269,10 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
     };
     const isPct = (k: TrendKey) => k !== 'effectif';
     const trendKpis: { key: TrendKey; label: string; higherIsBetter: boolean }[] = [
-        { key: 'effectif', label: 'Effectif', higherIsBetter: true },
-        { key: 'reussite', label: 'Réussite', higherIsBetter: true },
-        { key: 'recouvrement', label: 'Recouvrement', higherIsBetter: true },
-        { key: 'abandon', label: 'Abandon', higherIsBetter: false },
+        { key: 'effectif', label: t('statistiques.kpi_effectif'), higherIsBetter: true },
+        { key: 'reussite', label: t('statistiques.kpi_reussite'), higherIsBetter: true },
+        { key: 'recouvrement', label: t('statistiques.kpi_recouvrement'), higherIsBetter: true },
+        { key: 'abandon', label: t('statistiques.kpi_abandon_short'), higherIsBetter: false },
     ];
 
     /* ---- Géographie : concentration et hiérarchie région → préfecture. ---- */
@@ -309,28 +314,28 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
 
     return (
         <AppLayout breadcrumbs={breadcrumbs}>
-            <Head title="Statistiques" />
+            <Head title={t('statistiques.title')} />
             <div className="space-y-6 p-1">
                 {/* En-tête + filtres */}
                 <div className="flex flex-wrap items-start justify-between gap-4">
                     <div>
                         <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
-                            <BarChart3 className="h-7 w-7 text-blue-600 shrink-0" /> Statistiques
+                            <BarChart3 className="h-7 w-7 text-blue-600 shrink-0" /> {t('statistiques.title')}
                         </h1>
-                        <p className="text-sm text-gray-500 mt-0.5">Indicateurs de l'établissement — effectifs, finances et réussite.</p>
+                        <p className="text-sm text-gray-500 mt-0.5">{t('statistiques.subtitle')}</p>
                     </div>
                     <div className="flex flex-wrap items-center gap-2">
                         <Select value={filters.academic_year_id ?? ''} onValueChange={(v) => setFilter('academic_year_id', v)}>
-                            <SelectTrigger className="w-40 bg-white dark:bg-card"><SelectValue placeholder="Année" /></SelectTrigger>
-                            <SelectContent>{academicYears.map((y) => <SelectItem key={y.id} value={y.id}>{y.year}{y.active ? ' · active' : ''}</SelectItem>)}</SelectContent>
+                            <SelectTrigger className="w-40 bg-white dark:bg-card"><SelectValue placeholder={t('statistiques.year_ph')} /></SelectTrigger>
+                            <SelectContent>{academicYears.map((y) => <SelectItem key={y.id} value={y.id}>{y.year}{y.active ? t('statistiques.active_suffix') : ''}</SelectItem>)}</SelectContent>
                         </Select>
                         <Select value={filters.class_id ?? 'all'} onValueChange={(v) => setFilter('class_id', v)}>
-                            <SelectTrigger className="w-40 bg-white dark:bg-card"><SelectValue placeholder="Classe" /></SelectTrigger>
-                            <SelectContent><SelectItem value="all">Toutes les classes</SelectItem>{classes.map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}</SelectContent>
+                            <SelectTrigger className="w-40 bg-white dark:bg-card"><SelectValue placeholder={t('statistiques.class_ph')} /></SelectTrigger>
+                            <SelectContent><SelectItem value="all">{t('statistiques.all_classes')}</SelectItem>{classes.map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}</SelectContent>
                         </Select>
                         <Select value={filters.gender ?? 'all'} onValueChange={(v) => setFilter('gender', v)}>
-                            <SelectTrigger className="w-32 bg-white dark:bg-card"><SelectValue placeholder="Sexe" /></SelectTrigger>
-                            <SelectContent><SelectItem value="all">Tous</SelectItem><SelectItem value="male">Garçons</SelectItem><SelectItem value="female">Filles</SelectItem></SelectContent>
+                            <SelectTrigger className="w-32 bg-white dark:bg-card"><SelectValue placeholder={t('statistiques.gender_ph')} /></SelectTrigger>
+                            <SelectContent><SelectItem value="all">{t('statistiques.all')}</SelectItem><SelectItem value="male">{t('statistiques.boys')}</SelectItem><SelectItem value="female">{t('statistiques.girls')}</SelectItem></SelectContent>
                         </Select>
                     </div>
                 </div>
@@ -355,26 +360,26 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                 {tab === 'effectifs' && (
                     <div className="space-y-6">
                         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                            <Kpi label="Effectif total" value={enrollment.total} sub={`${enrollment.gender.male} G · ${enrollment.gender.female} F`} icon={Users} tone="text-blue-600" />
-                            <Kpi label="Indice de parité (IPS)" value={enrollment.ips ?? '—'} sub={`${enrollment.part_filles}% de filles`} icon={PieIcon} tone="text-pink-600" />
-                            <Kpi label="Taux de redoublement" value={`${enrollment.rates.redoublement}%`} sub={`Promotion ${enrollment.rates.promotion}%`} icon={TrendingUp} tone="text-orange-600" />
-                            <Kpi label="Taux d'abandon" value={`${enrollment.rates.abandon}%`} sub={`Âge moyen ${enrollment.age_moyen ?? '—'}`} icon={GraduationCap} tone="text-red-600" />
+                            <Kpi label={t('statistiques.kpi_total')} value={enrollment.total} sub={t('statistiques.kpi_total_sub', { boys: enrollment.gender.male, girls: enrollment.gender.female })} icon={Users} tone="text-blue-600" />
+                            <Kpi label={t('statistiques.kpi_ips')} value={enrollment.ips ?? '—'} sub={t('statistiques.kpi_ips_sub', { pct: enrollment.part_filles })} icon={PieIcon} tone="text-pink-600" />
+                            <Kpi label={t('statistiques.kpi_redoublement')} value={`${enrollment.rates.redoublement}%`} sub={t('statistiques.kpi_promotion_sub', { pct: enrollment.rates.promotion })} icon={TrendingUp} tone="text-orange-600" />
+                            <Kpi label={t('statistiques.kpi_abandon')} value={`${enrollment.rates.abandon}%`} sub={t('statistiques.kpi_age_sub', { age: enrollment.age_moyen ?? '—' })} icon={GraduationCap} tone="text-red-600" />
                         </div>
                         <div className="grid lg:grid-cols-3 gap-5">
-                            <div className="lg:col-span-2"><Card title="Effectifs par classe (garçons / filles)" icon={<Users className="w-4 h-4" />}>
+                            <div className="lg:col-span-2"><Card title={t('statistiques.card_by_class')} icon={<Users className="w-4 h-4" />}>
                                 <div className="flex flex-wrap items-center gap-2 mb-3">
                                     {['Tous', ...effCycles].map((c) => (
                                         <button key={c} type="button" onClick={() => setEffCycle(c)}
                                             className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${effCycle === c ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'}`}>
-                                            {c}
+                                            {c === 'Tous' ? t('statistiques.all_cycles') : c}
                                         </button>
                                     ))}
                                     <div className="ml-auto flex items-center gap-1 text-xs text-gray-400">
-                                        <span className="mr-1">Tri</span>
+                                        <span className="mr-1">{t('statistiques.sort')}</span>
                                         {(['niveau', 'effectif'] as const).map((s) => (
                                             <button key={s} type="button" onClick={() => setEffSort(s)}
                                                 className={`px-2 py-1 rounded-md transition-colors ${effSort === s ? 'bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-100 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700'}`}>
-                                                {s === 'niveau' ? 'Par niveau' : 'Par effectif'}
+                                                {s === 'niveau' ? t('statistiques.sort_level') : t('statistiques.sort_headcount')}
                                             </button>
                                         ))}
                                     </div>
@@ -386,12 +391,12 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                                         <YAxis tick={{ fontSize: 11, fill: theme.tick }} axisLine={false} tickLine={false} width={30} allowDecimals={false} />
                                         <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} />
                                         <Legend wrapperStyle={{ fontSize: 11 }} />
-                                        <Bar dataKey="male" name="Garçons" stackId="a" fill={BLUE} maxBarSize={44} />
-                                        <Bar dataKey="female" name="Filles" stackId="a" fill={ORANGE} radius={[4, 4, 0, 0]} maxBarSize={44} />
+                                        <Bar dataKey="male" name={t('statistiques.boys')} stackId="a" fill={BLUE} maxBarSize={44} />
+                                        <Bar dataKey="female" name={t('statistiques.girls')} stackId="a" fill={ORANGE} radius={[4, 4, 0, 0]} maxBarSize={44} />
                                     </BarChart>
                                 </ResponsiveContainer>
                             </Card></div>
-                            <Card title="Répartition par sexe" icon={<PieIcon className="w-4 h-4" />}>
+                            <Card title={t('statistiques.card_by_gender')} icon={<PieIcon className="w-4 h-4" />}>
                                 <ResponsiveContainer width="100%" height={260}>
                                     <PieChart>
                                         <Pie isAnimationActive={false} dataKey="value" nameKey="name" innerRadius={55} outerRadius={90} paddingAngle={2}
@@ -405,29 +410,29 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                             </Card>
                         </div>
                         <div className="grid lg:grid-cols-2 gap-5">
-                            <Card title="Pyramide des âges (garçons / filles)" icon={<BarChart3 className="w-4 h-4" />}>
+                            <Card title={t('statistiques.card_age_pyramid')} icon={<BarChart3 className="w-4 h-4" />}>
                                 <ResponsiveContainer width="100%" height={300}>
                                     <BarChart layout="vertical" data={agePyramid} stackOffset="sign" margin={{ top: 4, right: 12, left: 0, bottom: 0 }}>
                                         <CartesianGrid strokeDasharray="3 3" stroke={theme.grid} horizontal={false} />
                                         <XAxis type="number" domain={[-ageAxisMax, ageAxisMax]} tickFormatter={(v) => `${Math.abs(Number(v))}`} tick={{ fontSize: 11, fill: theme.tick }} axisLine={false} tickLine={false} allowDecimals={false} />
                                         <YAxis type="category" dataKey="age" reversed tick={{ fontSize: 11, fill: theme.axis }} axisLine={false} tickLine={false} width={28} />
-                                        <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} formatter={(v, n) => [Math.abs(Number(v)), n]} labelFormatter={(l) => `${l} ans`} />
+                                        <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} formatter={(v, n) => [Math.abs(Number(v)), n]} labelFormatter={(l) => t('statistiques.years_old', { value: l })} />
                                         <Legend wrapperStyle={{ fontSize: 11 }} />
-                                        <Bar dataKey="male" name="Garçons" stackId="pyr" fill={BLUE} maxBarSize={18} />
-                                        <Bar dataKey="female" name="Filles" stackId="pyr" fill={ORANGE} maxBarSize={18} />
+                                        <Bar dataKey="male" name={t('statistiques.boys')} stackId="pyr" fill={BLUE} maxBarSize={18} />
+                                        <Bar dataKey="female" name={t('statistiques.girls')} stackId="pyr" fill={ORANGE} maxBarSize={18} />
                                     </BarChart>
                                 </ResponsiveContainer>
                                 <div className="mt-3 flex items-center justify-between rounded-lg bg-amber-50 dark:bg-amber-900/20 px-3 py-2 text-sm">
-                                    <span className="text-amber-700 dark:text-amber-300">Taux de sur-âge (≥ +{enrollment.over_age.threshold} ans)</span>
+                                    <span className="text-amber-700 dark:text-amber-300">{t('statistiques.overage_label', { threshold: enrollment.over_age.threshold })}</span>
                                     <span className="font-bold text-amber-700 dark:text-amber-300">
                                         {enrollment.over_age.evaluated === 0 ? '—' : `${enrollment.over_age.rate}%`}
                                         {enrollment.over_age.evaluated > 0 && <span className="text-xs font-normal ml-1">({enrollment.over_age.count}/{enrollment.over_age.evaluated})</span>}
                                     </span>
                                 </div>
-                                {enrollment.over_age.evaluated === 0 && <p className="text-xs text-gray-400 mt-1.5">Renseignez l'âge attendu sur les classes pour activer ce calcul.</p>}
+                                {enrollment.over_age.evaluated === 0 && <p className="text-xs text-gray-400 mt-1.5">{t('statistiques.overage_hint')}</p>}
                             </Card>
-                            <Card title="Origine géographique (top villes, par sexe)" icon={<Users className="w-4 h-4" />}>
-                                {enrollment.by_city.length === 0 ? <p className="text-sm text-gray-400 text-center py-8">Non renseigné</p> : (
+                            <Card title={t('statistiques.card_city')} icon={<Users className="w-4 h-4" />}>
+                                {enrollment.by_city.length === 0 ? <p className="text-sm text-gray-400 text-center py-8">{t('statistiques.not_filled')}</p> : (
                                     <ResponsiveContainer width="100%" height={Math.max(220, enrollment.by_city.length * 28 + 24)}>
                                         <BarChart layout="vertical" data={enrollment.by_city} margin={{ top: 4, right: 28, left: 8, bottom: 0 }}>
                                             <CartesianGrid strokeDasharray="3 3" stroke={theme.grid} horizontal={false} />
@@ -435,8 +440,8 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                                             <YAxis type="category" dataKey="city" width={92} tick={{ fontSize: 11, fill: theme.axis }} axisLine={false} tickLine={false} />
                                             <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} />
                                             <Legend wrapperStyle={{ fontSize: 11 }} />
-                                            <Bar dataKey="male" name="Garçons" stackId="c" fill={BLUE} maxBarSize={20} />
-                                            <Bar dataKey="female" name="Filles" stackId="c" fill={ORANGE} radius={[0, 4, 4, 0]} maxBarSize={20}>
+                                            <Bar dataKey="male" name={t('statistiques.boys')} stackId="c" fill={BLUE} maxBarSize={20} />
+                                            <Bar dataKey="female" name={t('statistiques.girls')} stackId="c" fill={ORANGE} radius={[0, 4, 4, 0]} maxBarSize={20}>
                                                 <LabelList dataKey="total" position="right" style={{ fontSize: 11, fill: theme.tick }} />
                                             </Bar>
                                         </BarChart>
@@ -451,13 +456,13 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                 {tab === 'finances' && (
                     <div className="space-y-6">
                         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                            <Kpi label="Total facturé" value={money(finance.billed)} sub={`${finance.total_invoices} factures`} icon={Wallet} tone="text-blue-600" />
-                            <Kpi label="Encaissé" value={money(finance.collected)} icon={TrendingUp} tone="text-green-600" />
-                            <Kpi label="Taux de recouvrement" value={`${finance.recovery_rate}%`} sub={money(finance.remaining) + ' restant'} icon={PieIcon} tone="text-orange-600" />
-                            <Kpi label="Impayés" value={finance.unpaid_count} sub={`${finance.partial_count} partiels`} icon={GraduationCap} tone="text-red-600" />
+                            <Kpi label={t('statistiques.kpi_billed')} value={money(finance.billed)} sub={t('statistiques.kpi_billed_sub', { count: finance.total_invoices })} icon={Wallet} tone="text-blue-600" />
+                            <Kpi label={t('statistiques.kpi_collected')} value={money(finance.collected)} icon={TrendingUp} tone="text-green-600" />
+                            <Kpi label={t('statistiques.kpi_recovery')} value={`${finance.recovery_rate}%`} sub={t('statistiques.kpi_remaining_sub', { amount: money(finance.remaining) })} icon={PieIcon} tone="text-orange-600" />
+                            <Kpi label={t('statistiques.kpi_unpaid')} value={finance.unpaid_count} sub={t('statistiques.kpi_unpaid_sub', { count: finance.partial_count })} icon={GraduationCap} tone="text-red-600" />
                         </div>
                         <div className="grid lg:grid-cols-3 gap-5">
-                            <div className="lg:col-span-2"><Card title="Encaissements mensuels" icon={<TrendingUp className="w-4 h-4" />}>
+                            <div className="lg:col-span-2"><Card title={t('statistiques.card_monthly')} icon={<TrendingUp className="w-4 h-4" />}>
                                 <ResponsiveContainer width="100%" height={240}>
                                     <AreaChart data={finance.monthly}>
                                         <defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor={BLUE} stopOpacity={0.35} /><stop offset="95%" stopColor={BLUE} stopOpacity={0} /></linearGradient></defs>
@@ -468,7 +473,7 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                                     </AreaChart>
                                 </ResponsiveContainer>
                             </Card></div>
-                            <Card title="Modes de paiement" icon={<PieIcon className="w-4 h-4" />}>
+                            <Card title={t('statistiques.card_methods')} icon={<PieIcon className="w-4 h-4" />}>
                                 {/* Comparer des montants par catégorie est une magnitude, pas une identité :
                                     des barres étiquetées en une seule teinte se lisent mieux qu'un camembert,
                                     et l'identité ne repose plus sur la couleur. */}
@@ -488,26 +493,26 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                         {/* Recouvrement par classe — filtrable, plusieurs situations */}
                         <div className="space-y-5">
                             <div className="flex flex-wrap items-center gap-2">
-                                <span className="text-sm font-semibold text-gray-900 dark:text-white mr-2 flex items-center gap-2"><Wallet className="w-4 h-4 text-gray-400" /> Recouvrement par classe</span>
+                                <span className="text-sm font-semibold text-gray-900 dark:text-white mr-2 flex items-center gap-2"><Wallet className="w-4 h-4 text-gray-400" /> {t('statistiques.recovery_by_class')}</span>
                                 {['Tous', ...finCycles].map((c) => (
                                     <button key={c} type="button" onClick={() => setFinCycle(c)}
                                         className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${finCycle === c ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'}`}>
-                                        {c}
+                                        {c === 'Tous' ? t('statistiques.all_cycles') : c}
                                     </button>
                                 ))}
                                 <div className="ml-auto flex items-center gap-1 text-xs text-gray-400">
-                                    <span className="mr-1">Tri</span>
+                                    <span className="mr-1">{t('statistiques.sort')}</span>
                                     {(['facture', 'taux'] as const).map((s) => (
                                         <button key={s} type="button" onClick={() => setFinSort(s)}
                                             className={`px-2 py-1 rounded-md transition-colors ${finSort === s ? 'bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-100 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-700'}`}>
-                                            {s === 'facture' ? 'Par montant' : 'Par taux'}
+                                            {s === 'facture' ? t('statistiques.sort_amount') : t('statistiques.sort_rate')}
                                         </button>
                                     ))}
                                 </div>
                             </div>
 
                             <div className="grid lg:grid-cols-2 gap-5">
-                                <Card title="Facturé : encaissé / reste à recouvrer" icon={<Wallet className="w-4 h-4" />}>
+                                <Card title={t('statistiques.card_billed_split')} icon={<Wallet className="w-4 h-4" />}>
                                     <ResponsiveContainer width="100%" height={finChartHeight}>
                                         <BarChart layout="vertical" data={finClasses} margin={{ top: 4, right: 12, left: 8, bottom: 0 }}>
                                             <CartesianGrid strokeDasharray="3 3" stroke={theme.grid} horizontal={false} />
@@ -515,19 +520,19 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                                             <YAxis type="category" dataKey="name" width={96} tick={{ fontSize: 11, fill: theme.axis }} axisLine={false} tickLine={false} />
                                             <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} formatter={(v, n) => [money(Number(v)), n]} />
                                             <Legend wrapperStyle={{ fontSize: 11 }} />
-                                            <Bar dataKey="collected" name="Encaissé" stackId="m" fill={GREEN} maxBarSize={20} />
-                                            <Bar dataKey="remaining" name="Reste à recouvrer" stackId="m" fill="#f59e0b" radius={[0, 4, 4, 0]} maxBarSize={20} />
+                                            <Bar dataKey="collected" name={t('statistiques.series_collected')} stackId="m" fill={GREEN} maxBarSize={20} />
+                                            <Bar dataKey="remaining" name={t('statistiques.series_remaining')} stackId="m" fill="#f59e0b" radius={[0, 4, 4, 0]} maxBarSize={20} />
                                         </BarChart>
                                     </ResponsiveContainer>
                                 </Card>
-                                <Card title="Taux de recouvrement par classe" icon={<TrendingUp className="w-4 h-4" />}>
+                                <Card title={t('statistiques.card_recovery_rate')} icon={<TrendingUp className="w-4 h-4" />}>
                                     <ResponsiveContainer width="100%" height={finChartHeight}>
                                         <BarChart layout="vertical" data={finClasses} margin={{ top: 4, right: 36, left: 8, bottom: 0 }}>
                                             <CartesianGrid strokeDasharray="3 3" stroke={theme.grid} horizontal={false} />
                                             <XAxis type="number" domain={[0, 100]} tick={{ fontSize: 11, fill: theme.tick }} axisLine={false} tickLine={false} tickFormatter={(v) => `${v}%`} />
                                             <YAxis type="category" dataKey="name" width={96} tick={{ fontSize: 11, fill: theme.axis }} axisLine={false} tickLine={false} />
-                                            <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} formatter={(v) => [`${v}%`, 'Taux']} />
-                                            <ReferenceLine x={finance.recovery_rate} stroke={theme.axis} strokeDasharray="4 3" label={{ value: `moy. ${finance.recovery_rate}%`, fontSize: 10, fill: theme.tick, position: 'top' }} />
+                                            <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} formatter={(v) => [`${v}%`, t('statistiques.rate_label')]} />
+                                            <ReferenceLine x={finance.recovery_rate} stroke={theme.axis} strokeDasharray="4 3" label={{ value: t('statistiques.avg_prefix', { rate: finance.recovery_rate }), fontSize: 10, fill: theme.tick, position: 'top' }} />
                                             <Bar dataKey="rate" radius={[0, 4, 4, 0]} maxBarSize={20}>
                                                 {finClasses.map((c) => <Cell key={c.name} fill={rateColor(c.rate)} />)}
                                                 <LabelList dataKey="rate" position="right" formatter={(v) => `${v}%`} style={{ fontSize: 10, fill: theme.tick }} />
@@ -535,18 +540,18 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                                         </BarChart>
                                     </ResponsiveContainer>
                                     <div className="flex items-center gap-3 mt-2 text-xs text-gray-400">
-                                        <span className="flex items-center gap-1"><span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ background: '#16a34a' }} /> ≥ 80 %</span>
-                                        <span className="flex items-center gap-1"><span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ background: '#d97706' }} /> 60–79 %</span>
-                                        <span className="flex items-center gap-1"><span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ background: '#dc2626' }} /> &lt; 60 %</span>
+                                        <span className="flex items-center gap-1"><span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ background: '#16a34a' }} /> {t('statistiques.legend_high')}</span>
+                                        <span className="flex items-center gap-1"><span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ background: '#d97706' }} /> {t('statistiques.legend_mid')}</span>
+                                        <span className="flex items-center gap-1"><span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ background: '#dc2626' }} /> {t('statistiques.legend_low')}</span>
                                     </div>
                                 </Card>
                             </div>
 
-                            <Card title="Détail par classe" icon={<BarChart3 className="w-4 h-4" />}>
+                            <Card title={t('statistiques.card_detail')} icon={<BarChart3 className="w-4 h-4" />}>
                                 <div className="overflow-x-auto">
                                     <table className="w-full text-sm">
                                         <thead><tr className="text-left text-xs text-gray-500 uppercase border-b border-gray-100 dark:border-gray-700">
-                                            <th className="py-2">Classe</th><th className="py-2 text-right">Facturé</th><th className="py-2 text-right">Encaissé</th><th className="py-2 text-right">Reste</th><th className="py-2 text-right">Taux</th></tr></thead>
+                                            <th className="py-2">{t('statistiques.th_class')}</th><th className="py-2 text-right">{t('statistiques.th_billed')}</th><th className="py-2 text-right">{t('statistiques.th_collected')}</th><th className="py-2 text-right">{t('statistiques.th_remaining')}</th><th className="py-2 text-right">{t('statistiques.th_rate')}</th></tr></thead>
                                         <tbody>{finClasses.map((c) => (
                                             <tr key={c.name} className="border-b border-gray-50 dark:border-gray-700/50">
                                                 <td className="py-2">{c.name}</td>
@@ -566,13 +571,13 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                 {tab === 'reussite' && (
                     <div className="space-y-6">
                         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                            <Kpi label="Bulletins validés" value={success.bulletins} icon={GraduationCap} tone="text-blue-600" />
-                            <Kpi label="Moyenne générale" value={success.moyenne_generale ?? '—'} icon={BarChart3} tone="text-violet-600" />
-                            <Kpi label="Réussite interne (≥10)" value={`${success.pass_rate}%`} icon={TrendingUp} tone="text-green-600" />
-                            <Kpi label="Admission examens off." value={`${success.exams_summary.admission_rate}%`} sub={`${success.exams_summary.admitted}/${success.exams_summary.registered}`} icon={PieIcon} tone="text-orange-600" />
+                            <Kpi label={t('statistiques.kpi_bulletins')} value={success.bulletins} icon={GraduationCap} tone="text-blue-600" />
+                            <Kpi label={t('statistiques.kpi_average')} value={success.moyenne_generale ?? '—'} icon={BarChart3} tone="text-violet-600" />
+                            <Kpi label={t('statistiques.kpi_passrate')} value={`${success.pass_rate}%`} icon={TrendingUp} tone="text-green-600" />
+                            <Kpi label={t('statistiques.kpi_admission')} value={`${success.exams_summary.admission_rate}%`} sub={`${success.exams_summary.admitted}/${success.exams_summary.registered}`} icon={PieIcon} tone="text-orange-600" />
                         </div>
                         <div className="grid lg:grid-cols-3 gap-5">
-                            <Card title="Répartition des mentions" icon={<PieIcon className="w-4 h-4" />}>
+                            <Card title={t('statistiques.card_mentions')} icon={<PieIcon className="w-4 h-4" />}>
                                 <ResponsiveContainer width="100%" height={240}>
                                     <PieChart>
                                         <Pie isAnimationActive={false} dataKey="value" nameKey="name" innerRadius={50} outerRadius={88} paddingAngle={2} data={mentionData}>
@@ -583,12 +588,12 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                                     </PieChart>
                                 </ResponsiveContainer>
                             </Card>
-                            <div className="lg:col-span-2"><Card title="Examens officiels (CEPD / BEPC / BAC)" icon={<GraduationCap className="w-4 h-4" />}>
-                                {success.exams.length === 0 ? <p className="text-sm text-gray-400 text-center py-8">Aucun examen officiel pour cette année</p> : (
+                            <div className="lg:col-span-2"><Card title={t('statistiques.card_exams')} icon={<GraduationCap className="w-4 h-4" />}>
+                                {success.exams.length === 0 ? <p className="text-sm text-gray-400 text-center py-8">{t('statistiques.no_exams')}</p> : (
                                     <div className="overflow-x-auto">
                                         <table className="w-full text-sm">
                                             <thead><tr className="text-left text-xs text-gray-500 uppercase border-b border-gray-100 dark:border-gray-700">
-                                                <th className="py-2">Examen</th><th className="py-2 text-right">Inscrits</th><th className="py-2 text-right">Admis</th><th className="py-2 text-right">Admission</th></tr></thead>
+                                                <th className="py-2">{t('statistiques.th_exam')}</th><th className="py-2 text-right">{t('statistiques.th_registered')}</th><th className="py-2 text-right">{t('statistiques.th_admitted')}</th><th className="py-2 text-right">{t('statistiques.th_admission')}</th></tr></thead>
                                             <tbody>{success.exams.map((e, i) => (
                                                 <tr key={i} className="border-b border-gray-50 dark:border-gray-700/50">
                                                     <td className="py-2"><span className="uppercase text-blue-600 font-bold mr-1.5">{e.type}</span>{e.name}</td>
@@ -607,30 +612,30 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                 {tab === 'encadrement' && (
                     <div className="space-y-6">
                         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                            <Kpi label="Ratio élèves / enseignant" value={resources.rem ?? '—'} sub={`${resources.total_teachers} enseignants`} icon={GraduationCap} tone="text-blue-600" />
-                            <Kpi label="Effectif total" value={resources.total_students} icon={Users} tone="text-violet-600" />
-                            <Kpi label="Taille moyenne / classe" value={resources.avg_class_size} sub={`${resources.class_count} classes`} icon={Layers} tone="text-green-600" />
-                            <Kpi label="Classes pléthoriques" value={resources.overcrowded.length} sub={`> ${resources.threshold} élèves`} icon={School} tone="text-orange-600" />
+                            <Kpi label={t('statistiques.kpi_rem')} value={resources.rem ?? '—'} sub={t('statistiques.kpi_rem_sub', { count: resources.total_teachers })} icon={GraduationCap} tone="text-blue-600" />
+                            <Kpi label={t('statistiques.kpi_students')} value={resources.total_students} icon={Users} tone="text-violet-600" />
+                            <Kpi label={t('statistiques.kpi_avg_class')} value={resources.avg_class_size} sub={t('statistiques.kpi_avg_class_sub', { count: resources.class_count })} icon={Layers} tone="text-green-600" />
+                            <Kpi label={t('statistiques.kpi_overcrowded')} value={resources.overcrowded.length} sub={t('statistiques.kpi_overcrowded_sub', { threshold: resources.threshold })} icon={School} tone="text-orange-600" />
                         </div>
-                        <Card title="Effectif par classe (rouge = pléthorique)" icon={<Layers className="w-4 h-4" />}>
+                        <Card title={t('statistiques.card_class_sizes')} icon={<Layers className="w-4 h-4" />}>
                             <ResponsiveContainer width="100%" height={300}>
                                 <BarChart data={resources.class_sizes}>
                                     <XAxis dataKey="name" tick={{ fontSize: 11, fill: theme.tick }} axisLine={false} tickLine={false} interval={0} angle={-15} textAnchor="end" height={50} />
                                     <YAxis tick={{ fontSize: 11, fill: theme.tick }} axisLine={false} tickLine={false} width={30} allowDecimals={false} />
                                     <RTooltip />
-                                    <Bar dataKey="total" name="Élèves" radius={[4, 4, 0, 0]}>
+                                    <Bar dataKey="total" name={t('statistiques.series_students')} radius={[4, 4, 0, 0]}>
                                         {resources.class_sizes.map((c, i) => <Cell key={i} fill={c.total > resources.threshold ? ORANGE : BLUE} />)}
                                     </Bar>
                                 </BarChart>
                             </ResponsiveContainer>
                         </Card>
                         {resources.overcrowded.length > 0 && (
-                            <Card title="Classes pléthoriques à surveiller" icon={<School className="w-4 h-4" />}>
+                            <Card title={t('statistiques.card_overcrowded')} icon={<School className="w-4 h-4" />}>
                                 <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
                                     {resources.overcrowded.map((c) => (
                                         <div key={c.name} className="flex items-center justify-between rounded-lg bg-orange-50 dark:bg-orange-900/20 px-4 py-2.5">
                                             <span className="text-sm font-medium text-gray-800 dark:text-gray-200">{c.name}</span>
-                                            <span className="text-sm font-bold text-orange-600">{c.total} élèves</span>
+                                            <span className="text-sm font-bold text-orange-600">{t('statistiques.students_count', { count: c.total })}</span>
                                         </div>
                                     ))}
                                 </div>
@@ -644,30 +649,30 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                     <div className="space-y-6">
                         {attendance.total === 0 ? (
                             <div className="rounded-xl border border-gray-100 dark:border-gray-700 bg-white dark:bg-card p-12 text-center text-gray-400">
-                                Aucune donnée de présence pour cette période.
+                                {t('statistiques.no_attendance')}
                             </div>
                         ) : (
                             <>
                                 <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                                    <Kpi label="Taux de présence" value={`${attendance.presence_rate}%`} sub={`${attendance.present} présences`} icon={UserCheck} tone="text-green-600" />
-                                    <Kpi label="Taux d'absence" value={`${attendance.absence_rate}%`} sub={`${attendance.absent} absences`} icon={TrendingUp} tone="text-red-600" />
-                                    <Kpi label="Taux de retard" value={`${attendance.late_rate}%`} sub={`${attendance.late} retards`} icon={BarChart3} tone="text-orange-600" />
-                                    <Kpi label="Absentéisme chronique" value={attendance.chronic_absentees} sub={`> ${attendance.chronic_threshold} absences`} icon={Users} tone="text-violet-600" />
+                                    <Kpi label={t('statistiques.kpi_presence')} value={`${attendance.presence_rate}%`} sub={t('statistiques.kpi_presence_sub', { count: attendance.present })} icon={UserCheck} tone="text-green-600" />
+                                    <Kpi label={t('statistiques.kpi_absence')} value={`${attendance.absence_rate}%`} sub={t('statistiques.kpi_absence_sub', { count: attendance.absent })} icon={TrendingUp} tone="text-red-600" />
+                                    <Kpi label={t('statistiques.kpi_late')} value={`${attendance.late_rate}%`} sub={t('statistiques.kpi_late_sub', { count: attendance.late })} icon={BarChart3} tone="text-orange-600" />
+                                    <Kpi label={t('statistiques.kpi_chronic')} value={attendance.chronic_absentees} sub={t('statistiques.kpi_chronic_sub', { threshold: attendance.chronic_threshold })} icon={Users} tone="text-violet-600" />
                                 </div>
                                 <div className="grid lg:grid-cols-2 gap-5">
-                                    <Card title="Présences par période" icon={<UserCheck className="w-4 h-4" />}>
+                                    <Card title={t('statistiques.card_by_period')} icon={<UserCheck className="w-4 h-4" />}>
                                         <ResponsiveContainer width="100%" height={260}>
                                             <BarChart data={attendance.by_period}>
                                                 <XAxis dataKey="name" tick={{ fontSize: 11, fill: theme.tick }} axisLine={false} tickLine={false} />
                                                 <YAxis tick={{ fontSize: 11, fill: theme.tick }} axisLine={false} tickLine={false} width={30} allowDecimals={false} />
                                                 <RTooltip />
-                                                <Bar dataKey="present" name="Présents" stackId="a" fill={GREEN} />
-                                                <Bar dataKey="absent" name="Absents" stackId="a" fill="#ef4444" />
-                                                <Bar dataKey="late" name="Retards" stackId="a" fill={ORANGE} radius={[4, 4, 0, 0]} />
+                                                <Bar dataKey="present" name={t('statistiques.series_present')} stackId="a" fill={GREEN} />
+                                                <Bar dataKey="absent" name={t('statistiques.series_absent')} stackId="a" fill="#ef4444" />
+                                                <Bar dataKey="late" name={t('statistiques.series_late')} stackId="a" fill={ORANGE} radius={[4, 4, 0, 0]} />
                                             </BarChart>
                                         </ResponsiveContainer>
                                     </Card>
-                                    <Card title="Taux d'absence par classe" icon={<BarChart3 className="w-4 h-4" />}>
+                                    <Card title={t('statistiques.card_absence_by_class')} icon={<BarChart3 className="w-4 h-4" />}>
                                         {attendance.by_class.length === 0 ? <p className="text-sm text-gray-400 text-center py-8">—</p> : (
                                             <div className="space-y-2.5">
                                                 {attendance.by_class.slice(0, 8).map((c) => (
@@ -695,7 +700,7 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                     <div className="space-y-6">
                         {trends.series.length < 2 ? (
                             <div className="rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 text-sm px-4 py-3">
-                                Les tendances se précisent avec au moins deux années académiques renseignées.
+                                {t('statistiques.need_two_years')}
                             </div>
                         ) : (
                             <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
@@ -728,7 +733,7 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                         )}
 
                         <div className="grid lg:grid-cols-2 gap-5">
-                            <Card title="Évolution de l'effectif" icon={<Users className="w-4 h-4" />}>
+                            <Card title={t('statistiques.card_effectif_evol')} icon={<Users className="w-4 h-4" />}>
                                 <ResponsiveContainer width="100%" height={260}>
                                     <AreaChart data={trends.series} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
                                         <defs>
@@ -741,11 +746,11 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                                         <XAxis dataKey="year" tick={{ fontSize: 11, fill: theme.tick }} axisLine={false} tickLine={false} />
                                         <YAxis tick={{ fontSize: 11, fill: theme.tick }} axisLine={false} tickLine={false} width={36} allowDecimals={false} />
                                         <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} />
-                                        <Area type="monotone" dataKey="effectif" name="Effectif" stroke={BLUE} strokeWidth={2.5} fill="url(#effGrad)" dot={{ r: 3, fill: BLUE }} />
+                                        <Area type="monotone" dataKey="effectif" name={t('statistiques.series_effectif')} stroke={BLUE} strokeWidth={2.5} fill="url(#effGrad)" dot={{ r: 3, fill: BLUE }} />
                                     </AreaChart>
                                 </ResponsiveContainer>
                             </Card>
-                            <Card title="Performance (%)" icon={<TrendingUp className="w-4 h-4" />}>
+                            <Card title={t('statistiques.card_performance')} icon={<TrendingUp className="w-4 h-4" />}>
                                 <ResponsiveContainer width="100%" height={260}>
                                     <LineChart data={trends.series} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
                                         <CartesianGrid strokeDasharray="3 3" stroke={theme.grid} vertical={false} />
@@ -753,14 +758,14 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                                         <YAxis tick={{ fontSize: 11, fill: theme.tick }} axisLine={false} tickLine={false} width={36} domain={[0, 100]} />
                                         <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} formatter={(v) => `${v}%`} />
                                         <Legend wrapperStyle={{ fontSize: 11 }} />
-                                        <Line type="monotone" dataKey="reussite" name="Réussite" stroke={GREEN} strokeWidth={2.5} dot={{ r: 3, fill: GREEN }} />
-                                        <Line type="monotone" dataKey="recouvrement" name="Recouvrement" stroke={BLUE} strokeWidth={2.5} dot={{ r: 3, fill: BLUE }} />
+                                        <Line type="monotone" dataKey="reussite" name={t('statistiques.series_reussite')} stroke={GREEN} strokeWidth={2.5} dot={{ r: 3, fill: GREEN }} />
+                                        <Line type="monotone" dataKey="recouvrement" name={t('statistiques.series_recouvrement')} stroke={BLUE} strokeWidth={2.5} dot={{ r: 3, fill: BLUE }} />
                                     </LineChart>
                                 </ResponsiveContainer>
                             </Card>
                         </div>
 
-                        <Card title="Déperdition scolaire (%)" icon={<TrendingUp className="w-4 h-4" />}>
+                        <Card title={t('statistiques.card_deperdition')} icon={<TrendingUp className="w-4 h-4" />}>
                             <ResponsiveContainer width="100%" height={240}>
                                 <LineChart data={trendSeries} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
                                     <CartesianGrid strokeDasharray="3 3" stroke={theme.grid} vertical={false} />
@@ -768,25 +773,25 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                                     <YAxis tick={{ fontSize: 11, fill: theme.tick }} axisLine={false} tickLine={false} width={36} />
                                     <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} formatter={(v) => `${v}%`} />
                                     <Legend wrapperStyle={{ fontSize: 11 }} />
-                                    <Line type="monotone" dataKey="redoublement" name="Redoublement" stroke={ORANGE} strokeWidth={2.5} dot={{ r: 3, fill: ORANGE }} connectNulls={false} />
-                                    <Line type="monotone" dataKey="abandon" name="Abandon" stroke={VIOLET} strokeWidth={2.5} dot={{ r: 3, fill: VIOLET }} connectNulls={false} />
+                                    <Line type="monotone" dataKey="redoublement" name={t('statistiques.series_redoublement')} stroke={ORANGE} strokeWidth={2.5} dot={{ r: 3, fill: ORANGE }} connectNulls={false} />
+                                    <Line type="monotone" dataKey="abandon" name={t('statistiques.series_abandon')} stroke={VIOLET} strokeWidth={2.5} dot={{ r: 3, fill: VIOLET }} connectNulls={false} />
                                 </LineChart>
                             </ResponsiveContainer>
-                            <p className="text-xs text-gray-400 mt-2">L&apos;année en cours n&apos;est pas tracée : les décisions de fin d&apos;année (redoublement, abandon) ne sont pas encore arrêtées.</p>
+                            <p className="text-xs text-gray-400 mt-2">{t('statistiques.deperdition_hint')}</p>
                         </Card>
 
-                        <Card title="Tableau comparatif" icon={<BarChart3 className="w-4 h-4" />}>
+                        <Card title={t('statistiques.card_comparison')} icon={<BarChart3 className="w-4 h-4" />}>
                             <div className="overflow-x-auto">
                                 <table className="w-full text-sm">
                                     <thead><tr className="text-left text-xs text-gray-500 uppercase border-b border-gray-100 dark:border-gray-700">
-                                        <th className="py-2">Année</th><th className="py-2 text-right">Effectif</th><th className="py-2 text-right">% filles</th>
-                                        <th className="py-2 text-right">Redoubl.</th><th className="py-2 text-right">Abandon</th><th className="py-2 text-right">Recouvr.</th>
-                                        <th className="py-2 text-right">Réussite</th><th className="py-2 text-right">Admission</th></tr></thead>
+                                        <th className="py-2">{t('statistiques.th_year')}</th><th className="py-2 text-right">{t('statistiques.th_effectif')}</th><th className="py-2 text-right">{t('statistiques.th_girls_pct')}</th>
+                                        <th className="py-2 text-right">{t('statistiques.th_redoubl')}</th><th className="py-2 text-right">{t('statistiques.th_abandon')}</th><th className="py-2 text-right">{t('statistiques.th_recouvr')}</th>
+                                        <th className="py-2 text-right">{t('statistiques.th_reussite')}</th><th className="py-2 text-right">{t('statistiques.th_admission')}</th></tr></thead>
                                     <tbody>{trendSeries.map((r) => {
                                         const pct = (v: number | string | null) => (v == null ? '—' : `${v}%`);
                                         return (
                                             <tr key={String(r.year)} className="border-b border-gray-50 dark:border-gray-700/50">
-                                                <td className="py-2 font-medium">{r.year}{r.year === activeYearLabel && <span className="ml-2 text-xs text-blue-500">en cours</span>}</td>
+                                                <td className="py-2 font-medium">{r.year}{r.year === activeYearLabel && <span className="ml-2 text-xs text-blue-500">{t('statistiques.in_progress')}</span>}</td>
                                                 <td className="py-2 text-right">{r.effectif}</td><td className="py-2 text-right">{r.part_filles}%</td>
                                                 <td className="py-2 text-right">{pct(r.redoublement)}</td><td className="py-2 text-right">{pct(r.abandon)}</td><td className="py-2 text-right">{pct(r.recouvrement)}</td>
                                                 <td className="py-2 text-right">{pct(r.reussite)}</td><td className="py-2 text-right">{pct(r.admission)}</td>
@@ -805,22 +810,22 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                         {geography.by_region.length === 0 ? (
                             <>
                                 <div className="rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 text-sm px-4 py-3">
-                                    Origine renseignée pour <strong>{geography.coverage}%</strong> des élèves ({geography.localized} / {geography.total}). Complétez la région/préfecture sur la fiche élève pour affiner.
+                                    {t('statistiques.coverage_note_1')} <strong>{geography.coverage}%</strong> {t('statistiques.coverage_note_2')} ({geography.localized} / {geography.total}). {t('statistiques.coverage_note_3')}
                                 </div>
                                 <div className="rounded-xl border border-gray-100 dark:border-gray-700 bg-white dark:bg-card p-12 text-center text-gray-400">
-                                    Aucune origine géographique renseignée.
+                                    {t('statistiques.no_geo')}
                                 </div>
                             </>
                         ) : (
                             <>
                                 <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                                    <Kpi label="Couverture" value={`${geography.coverage}%`} sub={`${geography.localized} / ${geography.total} élèves`} icon={MapPin} tone="text-blue-600" />
-                                    <Kpi label="Grand Lomé" value={`${grandLomeShare}%`} sub="Golfe + Agoè-Nyivé" icon={Users} tone="text-violet-600" />
-                                    <Kpi label="Régions" value={geography.by_region.length} sub="représentées" icon={Layers} tone="text-emerald-600" />
-                                    <Kpi label="Préfectures" value={geography.by_prefecture.length} sub="d'origine" icon={UserCheck} tone="text-orange-600" />
+                                    <Kpi label={t('statistiques.kpi_coverage')} value={`${geography.coverage}%`} sub={t('statistiques.kpi_coverage_sub', { localized: geography.localized, total: geography.total })} icon={MapPin} tone="text-blue-600" />
+                                    <Kpi label={t('statistiques.kpi_grand_lome')} value={`${grandLomeShare}%`} sub={t('statistiques.kpi_grand_lome_sub')} icon={Users} tone="text-violet-600" />
+                                    <Kpi label={t('statistiques.kpi_regions')} value={geography.by_region.length} sub={t('statistiques.kpi_regions_sub')} icon={Layers} tone="text-emerald-600" />
+                                    <Kpi label={t('statistiques.kpi_prefectures')} value={geography.by_prefecture.length} sub={t('statistiques.kpi_prefectures_sub')} icon={UserCheck} tone="text-orange-600" />
                                 </div>
 
-                                <Card title="Origine des élèves — régions et préfectures" icon={<MapPin className="w-4 h-4" />}>
+                                <Card title={t('statistiques.card_origin')} icon={<MapPin className="w-4 h-4" />}>
                                     {/* Hiérarchie région → préfecture : l'aire porte la magnitude, une teinte
                                         par région porte l'identité (déclinée en nuances selon l'effectif), et la
                                         position + la légende + les libellés sécurisent la lecture. */}
@@ -833,7 +838,7 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                                             isAnimationActive={false}
                                             content={<TreemapNode surface={theme.surface} regionColor={regionColor} prefColor={prefColor} />}
                                         >
-                                            <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} formatter={(v) => [`${v} élèves`, 'Effectif']} />
+                                            <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} formatter={(v) => [t('statistiques.students_tooltip', { value: String(v) }), t('statistiques.headcount_label')]} />
                                         </Treemap>
                                     </ResponsiveContainer>
                                     <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-3 text-xs text-gray-500 dark:text-gray-400">
@@ -843,17 +848,17 @@ export default function StatisticsIndex({ filters, academicYears, classes, enrol
                                                 {r.name}
                                             </span>
                                         ))}
-                                        <span className="text-gray-400">· nuance = effectif de la préfecture</span>
+                                        <span className="text-gray-400">{t('statistiques.shade_note')}</span>
                                     </div>
                                 </Card>
 
-                                <Card title="Effectif par région" icon={<BarChart3 className="w-4 h-4" />}>
+                                <Card title={t('statistiques.card_by_region')} icon={<BarChart3 className="w-4 h-4" />}>
                                     <ResponsiveContainer width="100%" height={220}>
                                         <BarChart layout="vertical" data={geography.by_region} margin={{ top: 4, right: 24, left: 8, bottom: 4 }}>
                                             <CartesianGrid strokeDasharray="3 3" stroke={theme.grid} horizontal={false} />
                                             <XAxis type="number" tick={{ fontSize: 11, fill: theme.tick }} axisLine={false} tickLine={false} allowDecimals={false} />
                                             <YAxis type="category" dataKey="name" width={104} tick={{ fontSize: 12, fill: theme.axis }} axisLine={false} tickLine={false} />
-                                            <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} formatter={(v) => [`${v} élèves`, 'Effectif']} />
+                                            <RTooltip contentStyle={theme.tooltip.contentStyle} itemStyle={theme.tooltip.itemStyle} formatter={(v) => [t('statistiques.students_tooltip', { value: String(v) }), t('statistiques.headcount_label')]} />
                                             <Bar dataKey="total" radius={[0, 4, 4, 0]} maxBarSize={26}>
                                                 {geography.by_region.map((r) => <Cell key={r.name} fill={regionColor[r.name] ?? BLUE} />)}
                                                 <LabelList dataKey="total" position="right" style={{ fontSize: 11, fill: theme.tick }} />