diff --git a/apps/backend/nest-cli.json b/apps/backend/nest-cli.json
index 795b271..c8302ac 100644
--- a/apps/backend/nest-cli.json
+++ b/apps/backend/nest-cli.json
@@ -6,6 +6,8 @@
     "deleteOutDir": true,
     "builder": "tsc",
     "tsConfigPath": "tsconfig.build.json",
-    "plugins": ["@nestjs/swagger"]
+    "plugins": ["@nestjs/swagger"],
+    "assets": [{ "include": "i18n/**/*.json", "outDir": "dist" }],
+    "watchAssets": true
   }
 }
diff --git a/apps/backend/package-lock.json b/apps/backend/package-lock.json
index ec5c11b..314ba0b 100644
--- a/apps/backend/package-lock.json
+++ b/apps/backend/package-lock.json
@@ -43,6 +43,7 @@
         "joi": "^17.11.0",
         "leaflet": "^1.9.4",
         "mjml": "^4.16.1",
+        "nestjs-i18n": "^10.6.5",
         "nestjs-pino": "^4.4.1",
         "nodemailer": "^7.0.9",
         "opossum": "^8.1.3",
@@ -5761,6 +5762,12 @@
         "node": ">=6.5"
       }
     },
+    "node_modules/accept-language-parser": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/accept-language-parser/-/accept-language-parser-1.5.0.tgz",
+      "integrity": "sha512-QhyTbMLYo0BBGg1aWbeMG4ekWtds/31BrEU+DONOg/7ax23vxpL03Pb7/zBmha2v7vdD3AyzZVWBVGEZxKOXWw==",
+      "license": "MIT"
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -12169,6 +12176,34 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "license": "MIT"
     },
+    "node_modules/nestjs-i18n": {
+      "version": "10.6.5",
+      "resolved": "https://registry.npmjs.org/nestjs-i18n/-/nestjs-i18n-10.6.5.tgz",
+      "integrity": "sha512-jqbZ+H7LMEfAVYqS1FM0YfZjzPDwZQq97NE4BBIfPpxzAhlfnPzaQDGpNkPE/5Ft+rawtNJOuuuaWMpDhSLwaA==",
+      "license": "MIT",
+      "dependencies": {
+        "accept-language-parser": "^1.5.0",
+        "chokidar": "^3.6.0",
+        "cookie": "^0.7.0",
+        "iterare": "^1.2.1",
+        "js-yaml": "^4.1.0",
+        "string-format": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=22"
+      },
+      "peerDependencies": {
+        "@nestjs/common": "*",
+        "@nestjs/core": "*",
+        "class-validator": "*",
+        "rxjs": "*"
+      },
+      "peerDependenciesMeta": {
+        "class-validator": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/nestjs-pino": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/nestjs-pino/-/nestjs-pino-4.4.1.tgz",
@@ -14472,6 +14507,12 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "node_modules/string-format": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/string-format/-/string-format-2.0.0.tgz",
+      "integrity": "sha512-bbEs3scLeYNXLecRRuk6uJxdXUSj6le/8rNPHChIJTn2V79aXVTR1EH2OH5zLKKoz0V02fOUKZZcw01pLUShZA==",
+      "license": "WTFPL OR MIT"
+    },
     "node_modules/string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
diff --git a/apps/backend/package.json b/apps/backend/package.json
index 82ec0e6..e4b30a7 100644
--- a/apps/backend/package.json
+++ b/apps/backend/package.json
@@ -59,6 +59,7 @@
     "joi": "^17.11.0",
     "leaflet": "^1.9.4",
     "mjml": "^4.16.1",
+    "nestjs-i18n": "^10.6.5",
     "nestjs-pino": "^4.4.1",
     "nodemailer": "^7.0.9",
     "opossum": "^8.1.3",
diff --git a/apps/backend/src/app.module.ts b/apps/backend/src/app.module.ts
index 0ac03c6..eece0f4 100644
--- a/apps/backend/src/app.module.ts
+++ b/apps/backend/src/app.module.ts
@@ -3,7 +3,16 @@ import { ConfigModule, ConfigService } from '@nestjs/config';
 import { TypeOrmModule } from '@nestjs/typeorm';
 import { LoggerModule } from 'nestjs-pino';
 import { APP_GUARD } from '@nestjs/core';
+import {
+  AcceptLanguageResolver,
+  CookieResolver,
+  HeaderResolver,
+  I18nModule,
+  QueryResolver,
+} from 'nestjs-i18n';
+import * as path from 'path';
 import * as Joi from 'joi';
+import { UserPreferenceResolver } from './infrastructure/i18n/user-preference.resolver';
 
 // Import feature modules
 import { AuthModule } from './application/auth/auth.module';
@@ -110,6 +119,29 @@ import { CustomThrottlerGuard } from './application/guards/throttle.guard';
       inject: [ConfigService],
     }),
 
+    // Internationalization (FR / EN)
+    // Resolver chain (highest priority first):
+    //   1. UserPreferenceResolver — authenticated user's preferredLanguage
+    //   2. CookieResolver (NEXT_LOCALE)     — set by frontend switcher
+    //   3. HeaderResolver (x-lang / x-locale)
+    //   4. QueryResolver  (?lang=xx)
+    //   5. AcceptLanguageResolver
+    //   6. fallback → 'fr'
+    I18nModule.forRoot({
+      fallbackLanguage: 'fr',
+      loaderOptions: {
+        path: path.join(__dirname, '/i18n/'),
+        watch: true,
+      },
+      resolvers: [
+        UserPreferenceResolver,
+        new CookieResolver(['NEXT_LOCALE', 'lang']),
+        new HeaderResolver(['x-lang', 'x-locale']),
+        new QueryResolver(['lang', 'locale']),
+        AcceptLanguageResolver,
+      ],
+    }),
+
     // Database
     TypeOrmModule.forRootAsync({
       useFactory: (configService: ConfigService) => ({
diff --git a/apps/backend/src/application/api-keys/api-keys.controller.ts b/apps/backend/src/application/api-keys/api-keys.controller.ts
index b2bb476..bc79dfb 100644
--- a/apps/backend/src/application/api-keys/api-keys.controller.ts
+++ b/apps/backend/src/application/api-keys/api-keys.controller.ts
@@ -10,13 +10,7 @@ import {
   Post,
   UseGuards,
 } from '@nestjs/common';
-import {
-  ApiBearerAuth,
-  ApiOperation,
-  ApiResponse,
-  ApiSecurity,
-  ApiTags,
-} from '@nestjs/swagger';
+import { ApiBearerAuth, ApiOperation, ApiResponse, ApiSecurity, ApiTags } from '@nestjs/swagger';
 
 import { CurrentUser } from '../decorators/current-user.decorator';
 import { RequiresFeature } from '../decorators/requires-feature.decorator';
@@ -38,7 +32,7 @@ export class ApiKeysController {
   @ApiOperation({
     summary: 'Générer une nouvelle clé API',
     description:
-      "Crée une clé API pour accès programmatique. La clé complète est retournée **une seule fois** — conservez-la immédiatement. Réservé aux abonnements Gold et Platinium.",
+      'Crée une clé API pour accès programmatique. La clé complète est retournée **une seule fois** — conservez-la immédiatement. Réservé aux abonnements Gold et Platinium.',
   })
   @ApiResponse({
     status: 201,
diff --git a/apps/backend/src/application/api-keys/api-keys.module.ts b/apps/backend/src/application/api-keys/api-keys.module.ts
index d3a67aa..40663b9 100644
--- a/apps/backend/src/application/api-keys/api-keys.module.ts
+++ b/apps/backend/src/application/api-keys/api-keys.module.ts
@@ -23,10 +23,7 @@ import { SubscriptionsModule } from '../subscriptions/subscriptions.module';
 import { FeatureFlagGuard } from '../guards/feature-flag.guard';
 
 @Module({
-  imports: [
-    TypeOrmModule.forFeature([ApiKeyOrmEntity, UserOrmEntity]),
-    SubscriptionsModule,
-  ],
+  imports: [TypeOrmModule.forFeature([ApiKeyOrmEntity, UserOrmEntity]), SubscriptionsModule],
   controllers: [ApiKeysController],
   providers: [
     ApiKeysService,
diff --git a/apps/backend/src/application/api-keys/api-keys.service.ts b/apps/backend/src/application/api-keys/api-keys.service.ts
index eeac338..3ae100c 100644
--- a/apps/backend/src/application/api-keys/api-keys.service.ts
+++ b/apps/backend/src/application/api-keys/api-keys.service.ts
@@ -8,13 +8,7 @@
  * - Validation for inbound API key authentication
  */
 
-import {
-  ForbiddenException,
-  Inject,
-  Injectable,
-  Logger,
-  NotFoundException,
-} from '@nestjs/common';
+import { ForbiddenException, Inject, Injectable, Logger, NotFoundException } from '@nestjs/common';
 import * as crypto from 'crypto';
 import { v4 as uuidv4 } from 'uuid';
 
diff --git a/apps/backend/src/application/auth/auth.module.ts b/apps/backend/src/application/auth/auth.module.ts
index fd96f43..e044f9f 100644
--- a/apps/backend/src/application/auth/auth.module.ts
+++ b/apps/backend/src/application/auth/auth.module.ts
@@ -41,7 +41,12 @@ import { SubscriptionsModule } from '../subscriptions/subscriptions.module';
     }),
 
     // 👇 Add this to register TypeORM repositories
-    TypeOrmModule.forFeature([UserOrmEntity, OrganizationOrmEntity, InvitationTokenOrmEntity, PasswordResetTokenOrmEntity]),
+    TypeOrmModule.forFeature([
+      UserOrmEntity,
+      OrganizationOrmEntity,
+      InvitationTokenOrmEntity,
+      PasswordResetTokenOrmEntity,
+    ]),
 
     // Email module for sending invitations
     EmailModule,
diff --git a/apps/backend/src/application/auth/auth.service.ts b/apps/backend/src/application/auth/auth.service.ts
index d5c0d18..208c9f9 100644
--- a/apps/backend/src/application/auth/auth.service.ts
+++ b/apps/backend/src/application/auth/auth.service.ts
@@ -265,7 +265,9 @@ export class AuthService {
     }
 
     if (resetToken.expiresAt < new Date()) {
-      throw new BadRequestException('Le lien de réinitialisation a expiré. Veuillez en demander un nouveau.');
+      throw new BadRequestException(
+        'Le lien de réinitialisation a expiré. Veuillez en demander un nouveau.'
+      );
     }
 
     const user = await this.userRepository.findById(resetToken.userId);
@@ -286,10 +288,7 @@ export class AuthService {
     await this.userRepository.save(user);
 
     // Mark token as used
-    await this.passwordResetTokenRepository.update(
-      { id: resetToken.id },
-      { usedAt: new Date() }
-    );
+    await this.passwordResetTokenRepository.update({ id: resetToken.id }, { usedAt: new Date() });
 
     this.logger.log(`Password reset successfully for user: ${user.email}`);
   }
diff --git a/apps/backend/src/application/controllers/admin.controller.ts b/apps/backend/src/application/controllers/admin.controller.ts
index 745afff..a4ccb99 100644
--- a/apps/backend/src/application/controllers/admin.controller.ts
+++ b/apps/backend/src/application/controllers/admin.controller.ts
@@ -744,10 +744,7 @@ export class AdminController {
   })
   @ApiResponse({ status: 200, description: 'Email sent successfully' })
   @ApiResponse({ status: 400, description: 'SMTP error — check the message field' })
-  async sendTestEmail(
-    @Body() body: { to: string },
-    @CurrentUser() user: UserPayload
-  ) {
+  async sendTestEmail(@Body() body: { to: string }, @CurrentUser() user: UserPayload) {
     if (!body?.to) {
       throw new BadRequestException('Field "to" is required');
     }
@@ -880,7 +877,9 @@ export class AdminController {
     @Param('documentId', ParseUUIDPipe) documentId: string,
     @CurrentUser() user: UserPayload
   ): Promise<{ success: boolean; message: string }> {
-    this.logger.log(`[ADMIN: ${user.email}] Deleting document ${documentId} from booking ${bookingId}`);
+    this.logger.log(
+      `[ADMIN: ${user.email}] Deleting document ${documentId} from booking ${bookingId}`
+    );
 
     const booking = await this.csvBookingRepository.findById(bookingId);
     if (!booking) {
@@ -894,7 +893,9 @@ export class AdminController {
 
     const updatedDocuments = booking.documents.filter(doc => doc.id !== documentId);
 
-    const ormBooking = await this.csvBookingRepository['repository'].findOne({ where: { id: bookingId } });
+    const ormBooking = await this.csvBookingRepository['repository'].findOne({
+      where: { id: bookingId },
+    });
     if (ormBooking) {
       ormBooking.documents = updatedDocuments.map(doc => ({
         id: doc.id,
diff --git a/apps/backend/src/application/controllers/auth.controller.ts b/apps/backend/src/application/controllers/auth.controller.ts
index d35f172..756bcea 100644
--- a/apps/backend/src/application/controllers/auth.controller.ts
+++ b/apps/backend/src/application/controllers/auth.controller.ts
@@ -289,7 +289,9 @@ export class AuthController {
       });
     } catch (error) {
       this.logger.error(`Failed to send contact email: ${error}`);
-      throw new InternalServerErrorException("Erreur lors de l'envoi du message. Veuillez réessayer.");
+      throw new InternalServerErrorException(
+        "Erreur lors de l'envoi du message. Veuillez réessayer."
+      );
     }
 
     return { message: 'Message envoyé avec succès.' };
diff --git a/apps/backend/src/application/controllers/invitations.controller.ts b/apps/backend/src/application/controllers/invitations.controller.ts
index e596276..ddfc08a 100644
--- a/apps/backend/src/application/controllers/invitations.controller.ts
+++ b/apps/backend/src/application/controllers/invitations.controller.ts
@@ -153,10 +153,7 @@ export class InvitationsController {
   @ApiResponse({ status: 204, description: 'Invitation cancelled' })
   @ApiResponse({ status: 404, description: 'Invitation not found' })
   @ApiResponse({ status: 400, description: 'Invitation already used' })
-  async cancelInvitation(
-    @Param('id') id: string,
-    @CurrentUser() user: UserPayload
-  ): Promise<void> {
+  async cancelInvitation(@Param('id') id: string, @CurrentUser() user: UserPayload): Promise<void> {
     this.logger.log(`[User: ${user.email}] Cancelling invitation: ${id}`);
     await this.invitationService.cancelInvitation(id, user.organizationId);
   }
diff --git a/apps/backend/src/application/decorators/current-user.decorator.ts b/apps/backend/src/application/decorators/current-user.decorator.ts
index 713840c..5596c4f 100644
--- a/apps/backend/src/application/decorators/current-user.decorator.ts
+++ b/apps/backend/src/application/decorators/current-user.decorator.ts
@@ -1,4 +1,5 @@
 import { createParamDecorator, ExecutionContext } from '@nestjs/common';
+import { Locale } from '@domain/value-objects/locale.vo';
 
 /**
  * User payload interface extracted from JWT
@@ -10,6 +11,7 @@ export interface UserPayload {
   organizationId: string;
   firstName: string;
   lastName: string;
+  preferredLanguage?: Locale;
 }
 
 /**
diff --git a/apps/backend/src/application/filters/domain-exception.filter.ts b/apps/backend/src/application/filters/domain-exception.filter.ts
new file mode 100644
index 0000000..d45dad0
--- /dev/null
+++ b/apps/backend/src/application/filters/domain-exception.filter.ts
@@ -0,0 +1,44 @@
+/**
+ * DomainExceptionFilter
+ *
+ * Catches any DomainException bubbling up to the HTTP boundary, translates its
+ * i18nKey/i18nArgs into the caller's locale (resolved by nestjs-i18n) and
+ * returns a structured JSON error response.
+ *
+ * Non-domain errors fall through to NestJS's default handler.
+ */
+
+import { ArgumentsHost, Catch, ExceptionFilter, HttpStatus } from '@nestjs/common';
+import { I18nService, I18nContext } from 'nestjs-i18n';
+import { Response, Request } from 'express';
+import { DomainException } from '@domain/exceptions/domain.exception';
+import { DEFAULT_LOCALE, Locale, toLocale } from '@domain/value-objects/locale.vo';
+
+@Catch(DomainException)
+export class DomainExceptionFilter implements ExceptionFilter {
+  constructor(private readonly i18n: I18nService<Record<string, unknown>>) {}
+
+  catch(exception: DomainException, host: ArgumentsHost): void {
+    const ctx = host.switchToHttp();
+    const response = ctx.getResponse<Response>();
+    const request = ctx.getRequest<Request>();
+
+    const lang: Locale = toLocale(I18nContext.current()?.lang, DEFAULT_LOCALE) ?? DEFAULT_LOCALE;
+
+    const translated = this.i18n.translate(exception.i18nKey, {
+      lang,
+      args: exception.i18nArgs,
+      defaultValue: exception.message,
+    });
+
+    const status = exception.status || HttpStatus.BAD_REQUEST;
+
+    response.status(status).json({
+      statusCode: status,
+      error: exception.name,
+      message: typeof translated === 'string' ? translated : exception.message,
+      timestamp: new Date().toISOString(),
+      path: request.url,
+    });
+  }
+}
diff --git a/apps/backend/src/application/logs/logs.controller.ts b/apps/backend/src/application/logs/logs.controller.ts
index 1926c1e..9f83512 100644
--- a/apps/backend/src/application/logs/logs.controller.ts
+++ b/apps/backend/src/application/logs/logs.controller.ts
@@ -1,12 +1,4 @@
-import {
-  Controller,
-  Get,
-  Query,
-  Res,
-  UseGuards,
-  HttpException,
-  HttpStatus,
-} from '@nestjs/common';
+import { Controller, Get, Query, Res, UseGuards, HttpException, HttpStatus } from '@nestjs/common';
 import { Response } from 'express';
 import { ConfigService } from '@nestjs/config';
 import { JwtAuthGuard } from '../guards/jwt-auth.guard';
@@ -22,7 +14,7 @@ export class LogsController {
   constructor(private readonly configService: ConfigService) {
     this.logExporterUrl = this.configService.get<string>(
       'LOG_EXPORTER_URL',
-      'http://xpeditis-log-exporter:3200',
+      'http://xpeditis-log-exporter:3200'
     );
   }
 
@@ -39,10 +31,7 @@ export class LogsController {
       if (!res.ok) throw new Error(`log-exporter error: ${res.status}`);
       return res.json();
     } catch (err: any) {
-      throw new HttpException(
-        { error: err.message },
-        HttpStatus.BAD_GATEWAY,
-      );
+      throw new HttpException({ error: err.message }, HttpStatus.BAD_GATEWAY);
     }
   }
 
@@ -59,7 +48,7 @@ export class LogsController {
     @Query('end') end: string,
     @Query('limit') limit: string,
     @Query('format') format: string = 'json',
-    @Res() res: Response,
+    @Res() res: Response
   ) {
     try {
       const params = new URLSearchParams();
@@ -71,10 +60,9 @@ export class LogsController {
       if (limit) params.set('limit', limit);
       params.set('format', format);
 
-      const upstream = await fetch(
-        `${this.logExporterUrl}/api/logs/export?${params}`,
-        { signal: AbortSignal.timeout(30000) },
-      );
+      const upstream = await fetch(`${this.logExporterUrl}/api/logs/export?${params}`, {
+        signal: AbortSignal.timeout(30000),
+      });
 
       if (!upstream.ok) {
         const body = await upstream.json().catch(() => ({}));
diff --git a/apps/backend/src/application/services/csv-booking.service.ts b/apps/backend/src/application/services/csv-booking.service.ts
index 5588347..0de8541 100644
--- a/apps/backend/src/application/services/csv-booking.service.ts
+++ b/apps/backend/src/application/services/csv-booking.service.ts
@@ -374,18 +374,20 @@ export class CsvBookingService {
 
     booking.markBankTransferDeclared();
     const updatedBooking = await this.csvBookingRepository.update(booking);
-    this.logger.log(`Booking ${bookingId} bank transfer declared, status now PENDING_BANK_TRANSFER`);
+    this.logger.log(
+      `Booking ${bookingId} bank transfer declared, status now PENDING_BANK_TRANSFER`
+    );
 
     // Send email to all ADMIN users
     try {
       const allUsers = await this.userRepository.findAll();
-      const adminEmails = allUsers
-        .filter(u => u.role === 'ADMIN' && u.isActive)
-        .map(u => u.email);
+      const adminEmails = allUsers.filter(u => u.role === 'ADMIN' && u.isActive).map(u => u.email);
 
       if (adminEmails.length > 0) {
         const commissionAmount = booking.commissionAmountEur
-          ? new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(booking.commissionAmountEur)
+          ? new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(
+              booking.commissionAmountEur
+            )
           : 'N/A';
 
         await this.emailAdapter.send({
@@ -488,7 +490,9 @@ export class CsvBookingService {
       notes: booking.notes,
     });
 
-    this.logger.log(`[ADMIN] Carrier email resent to ${booking.carrierEmail} for booking ${bookingId}`);
+    this.logger.log(
+      `[ADMIN] Carrier email resent to ${booking.carrierEmail} for booking ${bookingId}`
+    );
   }
 
   /**
@@ -544,7 +548,9 @@ export class CsvBookingService {
         confirmationToken: booking.confirmationToken,
         notes: booking.notes,
       });
-      this.logger.log(`Email sent to carrier after bank transfer validation: ${booking.carrierEmail}`);
+      this.logger.log(
+        `Email sent to carrier after bank transfer validation: ${booking.carrierEmail}`
+      );
     } catch (error: any) {
       this.logger.error(`Failed to send email to carrier: ${error?.message}`, error?.stack);
     }
diff --git a/apps/backend/src/application/services/invitation.service.ts b/apps/backend/src/application/services/invitation.service.ts
index 06ff751..3543023 100644
--- a/apps/backend/src/application/services/invitation.service.ts
+++ b/apps/backend/src/application/services/invitation.service.ts
@@ -70,7 +70,10 @@ export class InvitationService {
     }
 
     // Check if licenses are available for this organization
-    const canInviteResult = await this.subscriptionService.canInviteUser(organizationId, inviterRole);
+    const canInviteResult = await this.subscriptionService.canInviteUser(
+      organizationId,
+      inviterRole
+    );
     if (!canInviteResult.canInvite) {
       this.logger.warn(
         `License limit reached for organization ${organizationId}: ${canInviteResult.usedLicenses}/${canInviteResult.maxLicenses}`
diff --git a/apps/backend/src/domain/entities/organization.entity.ts b/apps/backend/src/domain/entities/organization.entity.ts
index 4cfa76c..026a201 100644
--- a/apps/backend/src/domain/entities/organization.entity.ts
+++ b/apps/backend/src/domain/entities/organization.entity.ts
@@ -10,6 +10,8 @@
  * - Type must be valid (FREIGHT_FORWARDER, CARRIER, SHIPPER)
  */
 
+import { DEFAULT_LOCALE, Locale } from '../value-objects/locale.vo';
+
 export enum OrganizationType {
   FREIGHT_FORWARDER = 'FREIGHT_FORWARDER',
   CARRIER = 'CARRIER',
@@ -47,6 +49,7 @@ export interface OrganizationProps {
   siret?: string;
   siretVerified: boolean;
   statusBadge: 'none' | 'silver' | 'gold' | 'platinium';
+  defaultLanguage: Locale;
   createdAt: Date;
   updatedAt: Date;
   isActive: boolean;
@@ -63,9 +66,13 @@ export class Organization {
    * Factory method to create a new Organization
    */
   static create(
-    props: Omit<OrganizationProps, 'createdAt' | 'updatedAt' | 'siretVerified' | 'statusBadge'> & {
+    props: Omit<
+      OrganizationProps,
+      'createdAt' | 'updatedAt' | 'siretVerified' | 'statusBadge' | 'defaultLanguage'
+    > & {
       siretVerified?: boolean;
       statusBadge?: 'none' | 'silver' | 'gold' | 'platinium';
+      defaultLanguage?: Locale;
     }
   ): Organization {
     const now = new Date();
@@ -94,6 +101,7 @@ export class Organization {
       ...props,
       siretVerified: props.siretVerified ?? false,
       statusBadge: props.statusBadge ?? 'none',
+      defaultLanguage: props.defaultLanguage ?? DEFAULT_LOCALE,
       createdAt: now,
       updatedAt: now,
     });
@@ -188,6 +196,15 @@ export class Organization {
     return this.props.isActive;
   }
 
+  get defaultLanguage(): Locale {
+    return this.props.defaultLanguage;
+  }
+
+  updateDefaultLanguage(locale: Locale): void {
+    this.props.defaultLanguage = locale;
+    this.props.updatedAt = new Date();
+  }
+
   // Business methods
   isCarrier(): boolean {
     return this.props.type === OrganizationType.CARRIER;
diff --git a/apps/backend/src/domain/entities/user.entity.ts b/apps/backend/src/domain/entities/user.entity.ts
index ea21328..42e2b7d 100644
--- a/apps/backend/src/domain/entities/user.entity.ts
+++ b/apps/backend/src/domain/entities/user.entity.ts
@@ -10,6 +10,8 @@
  * - Role-based access control (Admin, Manager, User, Viewer)
  */
 
+import { DEFAULT_LOCALE, Locale } from '../value-objects/locale.vo';
+
 export enum UserRole {
   ADMIN = 'ADMIN', // Full system access
   MANAGER = 'MANAGER', // Manage bookings and users within organization
@@ -30,6 +32,7 @@ export interface UserProps {
   isEmailVerified: boolean;
   isActive: boolean;
   lastLoginAt?: Date;
+  preferredLanguage: Locale;
   createdAt: Date;
   updatedAt: Date;
 }
@@ -47,8 +50,13 @@ export class User {
   static create(
     props: Omit<
       UserProps,
-      'createdAt' | 'updatedAt' | 'isEmailVerified' | 'isActive' | 'lastLoginAt'
-    >
+      | 'createdAt'
+      | 'updatedAt'
+      | 'isEmailVerified'
+      | 'isActive'
+      | 'lastLoginAt'
+      | 'preferredLanguage'
+    > & { preferredLanguage?: Locale }
   ): User {
     const now = new Date();
 
@@ -59,6 +67,7 @@ export class User {
 
     return new User({
       ...props,
+      preferredLanguage: props.preferredLanguage ?? DEFAULT_LOCALE,
       isEmailVerified: false,
       isActive: true,
       createdAt: now,
@@ -142,6 +151,15 @@ export class User {
     return this.props.updatedAt;
   }
 
+  get preferredLanguage(): Locale {
+    return this.props.preferredLanguage;
+  }
+
+  updatePreferredLanguage(locale: Locale): void {
+    this.props.preferredLanguage = locale;
+    this.props.updatedAt = new Date();
+  }
+
   // Business methods
   has2FAEnabled(): boolean {
     return !!this.props.totpSecret;
diff --git a/apps/backend/src/domain/exceptions/domain.exception.ts b/apps/backend/src/domain/exceptions/domain.exception.ts
new file mode 100644
index 0000000..917c4d2
--- /dev/null
+++ b/apps/backend/src/domain/exceptions/domain.exception.ts
@@ -0,0 +1,30 @@
+/**
+ * DomainException (Base)
+ *
+ * Base class for all translatable domain exceptions.
+ * Exceptions carry an i18n key + optional args so the application-layer
+ * exception filter can translate them into the caller's locale at the HTTP
+ * response boundary.
+ *
+ * Subclasses should:
+ *   - Pass an i18nKey (e.g. 'error.PORT_NOT_FOUND')
+ *   - Pass i18nArgs for interpolation (e.g. { portCode })
+ *   - Optionally override `status` (HTTP status, default 400)
+ */
+
+export type I18nArgs = Record<string, string | number | boolean | undefined | null>;
+
+export abstract class DomainException extends Error {
+  public readonly i18nKey: string;
+  public readonly i18nArgs: I18nArgs;
+  public readonly status: number;
+
+  constructor(i18nKey: string, i18nArgs: I18nArgs = {}, fallbackMessage?: string, status = 400) {
+    super(fallbackMessage ?? i18nKey);
+    this.i18nKey = i18nKey;
+    this.i18nArgs = i18nArgs;
+    this.status = status;
+    this.name = this.constructor.name;
+    Object.setPrototypeOf(this, new.target.prototype);
+  }
+}
diff --git a/apps/backend/src/domain/exceptions/index.ts b/apps/backend/src/domain/exceptions/index.ts
index a35e026..796255d 100644
--- a/apps/backend/src/domain/exceptions/index.ts
+++ b/apps/backend/src/domain/exceptions/index.ts
@@ -4,6 +4,7 @@
  * All domain exceptions for the Xpeditis platform
  */
 
+export * from './domain.exception';
 export * from './invalid-port-code.exception';
 export * from './invalid-rate-quote.exception';
 export * from './carrier-timeout.exception';
diff --git a/apps/backend/src/domain/exceptions/port-not-found.exception.ts b/apps/backend/src/domain/exceptions/port-not-found.exception.ts
index c886989..0e351eb 100644
--- a/apps/backend/src/domain/exceptions/port-not-found.exception.ts
+++ b/apps/backend/src/domain/exceptions/port-not-found.exception.ts
@@ -1,13 +1,13 @@
 /**
  * PortNotFoundException
  *
- * Thrown when a port is not found in the database
+ * Thrown when a port is not found in the database.
  */
 
-export class PortNotFoundException extends Error {
+import { DomainException } from './domain.exception';
+
+export class PortNotFoundException extends DomainException {
   constructor(public readonly portCode: string) {
-    super(`Port not found: ${portCode}`);
-    this.name = 'PortNotFoundException';
-    Object.setPrototypeOf(this, PortNotFoundException.prototype);
+    super('error.PORT_NOT_FOUND', { portCode }, `Port not found: ${portCode}`, 404);
   }
 }
diff --git a/apps/backend/src/domain/value-objects/index.ts b/apps/backend/src/domain/value-objects/index.ts
index 1773663..2ad876c 100644
--- a/apps/backend/src/domain/value-objects/index.ts
+++ b/apps/backend/src/domain/value-objects/index.ts
@@ -14,3 +14,4 @@ export * from './booking-status.vo';
 export * from './subscription-plan.vo';
 export * from './subscription-status.vo';
 export * from './license-status.vo';
+export * from './locale.vo';
diff --git a/apps/backend/src/domain/value-objects/locale.vo.ts b/apps/backend/src/domain/value-objects/locale.vo.ts
new file mode 100644
index 0000000..6217932
--- /dev/null
+++ b/apps/backend/src/domain/value-objects/locale.vo.ts
@@ -0,0 +1,19 @@
+/**
+ * Locale Value Object
+ *
+ * Represents the supported UI / response languages of the platform.
+ */
+
+export const SUPPORTED_LOCALES = ['fr', 'en'] as const;
+
+export type Locale = (typeof SUPPORTED_LOCALES)[number];
+
+export const DEFAULT_LOCALE: Locale = 'fr';
+
+export function isLocale(value: unknown): value is Locale {
+  return typeof value === 'string' && (SUPPORTED_LOCALES as readonly string[]).includes(value);
+}
+
+export function toLocale(value: unknown, fallback: Locale = DEFAULT_LOCALE): Locale {
+  return isLocale(value) ? value : fallback;
+}
diff --git a/apps/backend/src/i18n/en/auth.json b/apps/backend/src/i18n/en/auth.json
new file mode 100644
index 0000000..14b50b6
--- /dev/null
+++ b/apps/backend/src/i18n/en/auth.json
@@ -0,0 +1,9 @@
+{
+  "LOGIN_SUCCESS": "Login successful",
+  "LOGOUT_SUCCESS": "Logout successful",
+  "REGISTER_SUCCESS": "Registration successful — please verify your email",
+  "PASSWORD_RESET_SENT": "If the email exists, a reset link has been sent",
+  "PASSWORD_RESET_SUCCESS": "Password has been reset successfully",
+  "EMAIL_VERIFIED": "Email verified successfully",
+  "VERIFICATION_EMAIL_SENT": "Verification email has been sent"
+}
diff --git a/apps/backend/src/i18n/en/booking.json b/apps/backend/src/i18n/en/booking.json
new file mode 100644
index 0000000..e0d75e3
--- /dev/null
+++ b/apps/backend/src/i18n/en/booking.json
@@ -0,0 +1,10 @@
+{
+  "status": {
+    "DRAFT": "Draft",
+    "CONFIRMED": "Confirmed",
+    "SHIPPED": "Shipped",
+    "DELIVERED": "Delivered",
+    "CANCELLED": "Cancelled",
+    "REJECTED": "Rejected"
+  }
+}
diff --git a/apps/backend/src/i18n/en/common.json b/apps/backend/src/i18n/en/common.json
new file mode 100644
index 0000000..7310fcf
--- /dev/null
+++ b/apps/backend/src/i18n/en/common.json
@@ -0,0 +1,5 @@
+{
+  "SUCCESS": "Success",
+  "YES": "Yes",
+  "NO": "No"
+}
diff --git a/apps/backend/src/i18n/en/email.json b/apps/backend/src/i18n/en/email.json
new file mode 100644
index 0000000..d05015f
--- /dev/null
+++ b/apps/backend/src/i18n/en/email.json
@@ -0,0 +1,44 @@
+{
+  "common": {
+    "greeting": "Hello {firstName}",
+    "footer": "The Xpeditis team",
+    "ignoreIfNotYou": "If you did not request this email, you can safely ignore it."
+  },
+  "verification": {
+    "subject": "Verify your email",
+    "title": "Welcome to Xpeditis!",
+    "body": "Please confirm your email address by clicking the button below.",
+    "cta": "Verify my email"
+  },
+  "passwordReset": {
+    "subject": "Reset your password",
+    "title": "Reset your password",
+    "body": "Click the button below to set a new password. This link is valid for 1 hour.",
+    "cta": "Reset my password"
+  },
+  "welcome": {
+    "subject": "Welcome to Xpeditis, {firstName}!",
+    "title": "Welcome aboard!",
+    "body": "Your account is ready. Start searching maritime rates and bookings right away.",
+    "cta": "Go to dashboard"
+  },
+  "bookingConfirmation": {
+    "subject": "Booking {bookingNumber} confirmed",
+    "title": "Booking Confirmation",
+    "body": "Your booking {bookingNumber} has been confirmed successfully.",
+    "details": "Details",
+    "cta": "View booking"
+  },
+  "userInvitation": {
+    "subject": "You have been invited to join Xpeditis",
+    "title": "You have been invited",
+    "body": "{inviterName} has invited you to join {organizationName} on Xpeditis.",
+    "cta": "Accept invitation"
+  },
+  "csvBookingRequest": {
+    "subject": "New booking request {bookingReference}",
+    "title": "New booking request",
+    "body": "A new booking request has been submitted. Please review the details.",
+    "cta": "Review booking"
+  }
+}
diff --git a/apps/backend/src/i18n/en/error.json b/apps/backend/src/i18n/en/error.json
new file mode 100644
index 0000000..a1222cc
--- /dev/null
+++ b/apps/backend/src/i18n/en/error.json
@@ -0,0 +1,23 @@
+{
+  "INTERNAL_ERROR": "Internal server error",
+  "UNAUTHORIZED": "Authentication required",
+  "FORBIDDEN": "You do not have permission to perform this action",
+  "NOT_FOUND": "Resource not found",
+  "CONFLICT": "Conflict",
+  "RATE_LIMITED": "Too many requests — please try again later",
+  "PORT_NOT_FOUND": "Port not found: {portCode}",
+  "PORT_INVALID_CODE": "Invalid port code: {portCode}",
+  "USER_NOT_FOUND": "User not found",
+  "USER_EMAIL_TAKEN": "This email is already in use",
+  "USER_INACTIVE": "User account is inactive",
+  "USER_EMAIL_NOT_VERIFIED": "Email address not verified",
+  "ORGANIZATION_NOT_FOUND": "Organization not found",
+  "INVALID_CREDENTIALS": "Invalid email or password",
+  "INVALID_TOKEN": "Invalid or expired token",
+  "BOOKING_NOT_FOUND": "Booking {bookingNumber} not found",
+  "BOOKING_INVALID_STATUS": "Invalid booking status transition",
+  "RATE_QUOTE_NOT_FOUND": "Rate quote not found",
+  "RATE_QUOTE_EXPIRED": "Rate quote has expired",
+  "CARRIER_NOT_FOUND": "Carrier not found",
+  "NO_LICENSES_AVAILABLE": "No licenses available for this organization"
+}
diff --git a/apps/backend/src/i18n/en/notification.json b/apps/backend/src/i18n/en/notification.json
new file mode 100644
index 0000000..7402d59
--- /dev/null
+++ b/apps/backend/src/i18n/en/notification.json
@@ -0,0 +1,30 @@
+{
+  "booking": {
+    "created": {
+      "title": "Booking Created",
+      "message": "Your booking {bookingNumber} has been created successfully."
+    },
+    "updated": {
+      "title": "Booking Updated",
+      "message": "Booking {bookingNumber} status changed to {status}."
+    },
+    "confirmed": {
+      "title": "Booking Confirmed",
+      "message": "Your booking {bookingNumber} has been confirmed by the carrier."
+    },
+    "rejected": {
+      "title": "Booking Rejected",
+      "message": "Your booking {bookingNumber} has been rejected by the carrier."
+    },
+    "documentUploaded": {
+      "title": "Document Uploaded",
+      "message": "Document \"{documentName}\" has been uploaded for your booking."
+    }
+  },
+  "system": {
+    "welcome": {
+      "title": "Welcome to Xpeditis",
+      "message": "Hi {firstName}, welcome aboard! Start by searching for rates."
+    }
+  }
+}
diff --git a/apps/backend/src/i18n/en/pdf.json b/apps/backend/src/i18n/en/pdf.json
new file mode 100644
index 0000000..7f5e0f6
--- /dev/null
+++ b/apps/backend/src/i18n/en/pdf.json
@@ -0,0 +1,36 @@
+{
+  "booking": {
+    "title": "BOOKING CONFIRMATION",
+    "bookingNumber": "Booking Number",
+    "routeInformation": "Route Information",
+    "origin": "Origin",
+    "destination": "Destination",
+    "shipperInformation": "Shipper Information",
+    "consigneeInformation": "Consignee Information",
+    "containerDetails": "Container Details",
+    "cargoDescription": "Cargo Description",
+    "totalPrice": "Total Price",
+    "estimatedDeparture": "Estimated Departure",
+    "estimatedArrival": "Estimated Arrival",
+    "carrier": "Carrier",
+    "status": "Status"
+  },
+  "rateQuote": {
+    "title": "RATE QUOTE COMPARISON",
+    "quoteNumber": "Quote Number",
+    "issuedAt": "Issued At",
+    "validUntil": "Valid Until",
+    "origin": "Origin",
+    "destination": "Destination",
+    "carrier": "Carrier",
+    "transitTime": "Transit Time",
+    "containerType": "Container Type",
+    "baseRate": "Base Rate",
+    "surcharges": "Surcharges",
+    "totalPrice": "Total Price"
+  },
+  "common": {
+    "generatedOn": "Generated on {date}",
+    "page": "Page {current} of {total}"
+  }
+}
diff --git a/apps/backend/src/i18n/en/validation.json b/apps/backend/src/i18n/en/validation.json
new file mode 100644
index 0000000..5fe9995
--- /dev/null
+++ b/apps/backend/src/i18n/en/validation.json
@@ -0,0 +1,30 @@
+{
+  "EMAIL_REQUIRED": "Email is required",
+  "EMAIL_INVALID": "Invalid email format",
+  "PASSWORD_REQUIRED": "Password is required",
+  "PASSWORD_MIN_LENGTH": "Password must be at least {constraint1} characters",
+  "PASSWORD_MAX_LENGTH": "Password must be at most {constraint1} characters",
+  "PASSWORD_PATTERN": "Password must contain uppercase, lowercase, number and special character",
+  "FIRST_NAME_REQUIRED": "First name is required",
+  "FIRST_NAME_MIN_LENGTH": "First name must be at least {constraint1} characters",
+  "LAST_NAME_REQUIRED": "Last name is required",
+  "LAST_NAME_MIN_LENGTH": "Last name must be at least {constraint1} characters",
+  "PHONE_INVALID": "Invalid phone number",
+  "SIREN_PATTERN": "SIREN must be exactly 9 digits",
+  "SIRET_PATTERN": "SIRET must be exactly 14 digits",
+  "STREET_MIN_LENGTH": "Street must be at least {constraint1} characters",
+  "CITY_REQUIRED": "City is required",
+  "POSTAL_CODE_REQUIRED": "Postal code is required",
+  "COUNTRY_PATTERN": "Country must be a 2-letter ISO code (e.g., FR, US, CN)",
+  "FIELD_REQUIRED": "This field is required",
+  "FIELD_TOO_SHORT": "Must be at least {constraint1} characters",
+  "FIELD_TOO_LONG": "Must be at most {constraint1} characters",
+  "NUMBER_MIN": "Must be at least {constraint1}",
+  "NUMBER_MAX": "Must be at most {constraint1}",
+  "INVALID_UUID": "Invalid identifier format",
+  "INVALID_DATE": "Invalid date",
+  "INVALID_ENUM": "Invalid value — allowed values: {constraint1}",
+  "INVALID_BOOLEAN": "Must be true or false",
+  "INVALID_URL": "Invalid URL",
+  "LOCALE_INVALID": "Language must be 'fr' or 'en'"
+}
diff --git a/apps/backend/src/i18n/fr/auth.json b/apps/backend/src/i18n/fr/auth.json
new file mode 100644
index 0000000..7f45ec5
--- /dev/null
+++ b/apps/backend/src/i18n/fr/auth.json
@@ -0,0 +1,9 @@
+{
+  "LOGIN_SUCCESS": "Connexion réussie",
+  "LOGOUT_SUCCESS": "Déconnexion réussie",
+  "REGISTER_SUCCESS": "Inscription réussie — veuillez vérifier votre email",
+  "PASSWORD_RESET_SENT": "Si l'email existe, un lien de réinitialisation a été envoyé",
+  "PASSWORD_RESET_SUCCESS": "Mot de passe réinitialisé avec succès",
+  "EMAIL_VERIFIED": "Email vérifié avec succès",
+  "VERIFICATION_EMAIL_SENT": "Email de vérification envoyé"
+}
diff --git a/apps/backend/src/i18n/fr/booking.json b/apps/backend/src/i18n/fr/booking.json
new file mode 100644
index 0000000..131ae79
--- /dev/null
+++ b/apps/backend/src/i18n/fr/booking.json
@@ -0,0 +1,10 @@
+{
+  "status": {
+    "DRAFT": "Brouillon",
+    "CONFIRMED": "Confirmée",
+    "SHIPPED": "Expédiée",
+    "DELIVERED": "Livrée",
+    "CANCELLED": "Annulée",
+    "REJECTED": "Refusée"
+  }
+}
diff --git a/apps/backend/src/i18n/fr/common.json b/apps/backend/src/i18n/fr/common.json
new file mode 100644
index 0000000..df67e65
--- /dev/null
+++ b/apps/backend/src/i18n/fr/common.json
@@ -0,0 +1,5 @@
+{
+  "SUCCESS": "Succès",
+  "YES": "Oui",
+  "NO": "Non"
+}
diff --git a/apps/backend/src/i18n/fr/email.json b/apps/backend/src/i18n/fr/email.json
new file mode 100644
index 0000000..dafcf10
--- /dev/null
+++ b/apps/backend/src/i18n/fr/email.json
@@ -0,0 +1,44 @@
+{
+  "common": {
+    "greeting": "Bonjour {firstName}",
+    "footer": "L'équipe Xpeditis",
+    "ignoreIfNotYou": "Si vous n'êtes pas à l'origine de cet email, vous pouvez l'ignorer."
+  },
+  "verification": {
+    "subject": "Vérifiez votre email",
+    "title": "Bienvenue sur Xpeditis !",
+    "body": "Veuillez confirmer votre adresse email en cliquant sur le bouton ci-dessous.",
+    "cta": "Vérifier mon email"
+  },
+  "passwordReset": {
+    "subject": "Réinitialisez votre mot de passe",
+    "title": "Réinitialisez votre mot de passe",
+    "body": "Cliquez sur le bouton ci-dessous pour définir un nouveau mot de passe. Ce lien est valide 1 heure.",
+    "cta": "Réinitialiser mon mot de passe"
+  },
+  "welcome": {
+    "subject": "Bienvenue sur Xpeditis, {firstName} !",
+    "title": "Bienvenue à bord !",
+    "body": "Votre compte est prêt. Commencez dès maintenant à rechercher des tarifs maritimes et à réserver.",
+    "cta": "Accéder au tableau de bord"
+  },
+  "bookingConfirmation": {
+    "subject": "Réservation {bookingNumber} confirmée",
+    "title": "Confirmation de réservation",
+    "body": "Votre réservation {bookingNumber} a été confirmée avec succès.",
+    "details": "Détails",
+    "cta": "Voir la réservation"
+  },
+  "userInvitation": {
+    "subject": "Vous avez été invité à rejoindre Xpeditis",
+    "title": "Vous avez été invité",
+    "body": "{inviterName} vous invite à rejoindre {organizationName} sur Xpeditis.",
+    "cta": "Accepter l'invitation"
+  },
+  "csvBookingRequest": {
+    "subject": "Nouvelle demande de réservation {bookingReference}",
+    "title": "Nouvelle demande de réservation",
+    "body": "Une nouvelle demande de réservation vous est soumise. Veuillez examiner les détails.",
+    "cta": "Examiner la réservation"
+  }
+}
diff --git a/apps/backend/src/i18n/fr/error.json b/apps/backend/src/i18n/fr/error.json
new file mode 100644
index 0000000..f0e76e6
--- /dev/null
+++ b/apps/backend/src/i18n/fr/error.json
@@ -0,0 +1,23 @@
+{
+  "INTERNAL_ERROR": "Erreur interne du serveur",
+  "UNAUTHORIZED": "Authentification requise",
+  "FORBIDDEN": "Vous n'avez pas la permission d'effectuer cette action",
+  "NOT_FOUND": "Ressource introuvable",
+  "CONFLICT": "Conflit",
+  "RATE_LIMITED": "Trop de requêtes — veuillez réessayer plus tard",
+  "PORT_NOT_FOUND": "Port introuvable : {portCode}",
+  "PORT_INVALID_CODE": "Code de port invalide : {portCode}",
+  "USER_NOT_FOUND": "Utilisateur introuvable",
+  "USER_EMAIL_TAKEN": "Cet email est déjà utilisé",
+  "USER_INACTIVE": "Le compte utilisateur est inactif",
+  "USER_EMAIL_NOT_VERIFIED": "Adresse email non vérifiée",
+  "ORGANIZATION_NOT_FOUND": "Organisation introuvable",
+  "INVALID_CREDENTIALS": "Email ou mot de passe invalide",
+  "INVALID_TOKEN": "Jeton invalide ou expiré",
+  "BOOKING_NOT_FOUND": "Réservation {bookingNumber} introuvable",
+  "BOOKING_INVALID_STATUS": "Transition de statut de réservation invalide",
+  "RATE_QUOTE_NOT_FOUND": "Cotation introuvable",
+  "RATE_QUOTE_EXPIRED": "La cotation a expiré",
+  "CARRIER_NOT_FOUND": "Transporteur introuvable",
+  "NO_LICENSES_AVAILABLE": "Aucune licence disponible pour cette organisation"
+}
diff --git a/apps/backend/src/i18n/fr/notification.json b/apps/backend/src/i18n/fr/notification.json
new file mode 100644
index 0000000..52189bf
--- /dev/null
+++ b/apps/backend/src/i18n/fr/notification.json
@@ -0,0 +1,30 @@
+{
+  "booking": {
+    "created": {
+      "title": "Réservation créée",
+      "message": "Votre réservation {bookingNumber} a été créée avec succès."
+    },
+    "updated": {
+      "title": "Réservation mise à jour",
+      "message": "Le statut de la réservation {bookingNumber} est passé à {status}."
+    },
+    "confirmed": {
+      "title": "Réservation confirmée",
+      "message": "Votre réservation {bookingNumber} a été confirmée par le transporteur."
+    },
+    "rejected": {
+      "title": "Réservation refusée",
+      "message": "Votre réservation {bookingNumber} a été refusée par le transporteur."
+    },
+    "documentUploaded": {
+      "title": "Document ajouté",
+      "message": "Le document « {documentName} » a été ajouté à votre réservation."
+    }
+  },
+  "system": {
+    "welcome": {
+      "title": "Bienvenue sur Xpeditis",
+      "message": "Bonjour {firstName}, bienvenue à bord ! Commencez par rechercher des tarifs."
+    }
+  }
+}
diff --git a/apps/backend/src/i18n/fr/pdf.json b/apps/backend/src/i18n/fr/pdf.json
new file mode 100644
index 0000000..9d9d621
--- /dev/null
+++ b/apps/backend/src/i18n/fr/pdf.json
@@ -0,0 +1,36 @@
+{
+  "booking": {
+    "title": "CONFIRMATION DE RÉSERVATION",
+    "bookingNumber": "Numéro de réservation",
+    "routeInformation": "Informations de route",
+    "origin": "Origine",
+    "destination": "Destination",
+    "shipperInformation": "Expéditeur",
+    "consigneeInformation": "Destinataire",
+    "containerDetails": "Détails du conteneur",
+    "cargoDescription": "Description de la cargaison",
+    "totalPrice": "Prix total",
+    "estimatedDeparture": "Départ estimé",
+    "estimatedArrival": "Arrivée estimée",
+    "carrier": "Transporteur",
+    "status": "Statut"
+  },
+  "rateQuote": {
+    "title": "COMPARAISON DE COTATIONS",
+    "quoteNumber": "Numéro de cotation",
+    "issuedAt": "Émis le",
+    "validUntil": "Valide jusqu'au",
+    "origin": "Origine",
+    "destination": "Destination",
+    "carrier": "Transporteur",
+    "transitTime": "Temps de transit",
+    "containerType": "Type de conteneur",
+    "baseRate": "Tarif de base",
+    "surcharges": "Surtaxes",
+    "totalPrice": "Prix total"
+  },
+  "common": {
+    "generatedOn": "Généré le {date}",
+    "page": "Page {current} sur {total}"
+  }
+}
diff --git a/apps/backend/src/i18n/fr/validation.json b/apps/backend/src/i18n/fr/validation.json
new file mode 100644
index 0000000..f6e63ff
--- /dev/null
+++ b/apps/backend/src/i18n/fr/validation.json
@@ -0,0 +1,30 @@
+{
+  "EMAIL_REQUIRED": "L'email est requis",
+  "EMAIL_INVALID": "Format d'email invalide",
+  "PASSWORD_REQUIRED": "Le mot de passe est requis",
+  "PASSWORD_MIN_LENGTH": "Le mot de passe doit contenir au moins {constraint1} caractères",
+  "PASSWORD_MAX_LENGTH": "Le mot de passe doit contenir au plus {constraint1} caractères",
+  "PASSWORD_PATTERN": "Le mot de passe doit contenir une majuscule, une minuscule, un chiffre et un caractère spécial",
+  "FIRST_NAME_REQUIRED": "Le prénom est requis",
+  "FIRST_NAME_MIN_LENGTH": "Le prénom doit contenir au moins {constraint1} caractères",
+  "LAST_NAME_REQUIRED": "Le nom est requis",
+  "LAST_NAME_MIN_LENGTH": "Le nom doit contenir au moins {constraint1} caractères",
+  "PHONE_INVALID": "Numéro de téléphone invalide",
+  "SIREN_PATTERN": "Le SIREN doit contenir exactement 9 chiffres",
+  "SIRET_PATTERN": "Le SIRET doit contenir exactement 14 chiffres",
+  "STREET_MIN_LENGTH": "L'adresse doit contenir au moins {constraint1} caractères",
+  "CITY_REQUIRED": "La ville est requise",
+  "POSTAL_CODE_REQUIRED": "Le code postal est requis",
+  "COUNTRY_PATTERN": "Le pays doit être un code ISO à 2 lettres (ex. FR, US, CN)",
+  "FIELD_REQUIRED": "Ce champ est requis",
+  "FIELD_TOO_SHORT": "Doit contenir au moins {constraint1} caractères",
+  "FIELD_TOO_LONG": "Doit contenir au plus {constraint1} caractères",
+  "NUMBER_MIN": "Doit être supérieur ou égal à {constraint1}",
+  "NUMBER_MAX": "Doit être inférieur ou égal à {constraint1}",
+  "INVALID_UUID": "Format d'identifiant invalide",
+  "INVALID_DATE": "Date invalide",
+  "INVALID_ENUM": "Valeur invalide — valeurs autorisées : {constraint1}",
+  "INVALID_BOOLEAN": "Doit être vrai ou faux",
+  "INVALID_URL": "URL invalide",
+  "LOCALE_INVALID": "La langue doit être 'fr' ou 'en'"
+}
diff --git a/apps/backend/src/infrastructure/email/email.adapter.ts b/apps/backend/src/infrastructure/email/email.adapter.ts
index 78501d1..5102d0f 100644
--- a/apps/backend/src/infrastructure/email/email.adapter.ts
+++ b/apps/backend/src/infrastructure/email/email.adapter.ts
@@ -73,7 +73,9 @@ export class EmailAdapter implements EmailPort, OnModuleInit {
         this.buildTransporter(ip, host);
         return;
       } catch (err: any) {
-        this.logger.warn(`[DNS-DoH] Failed to resolve ${host}: ${err.message} — using hostname directly`);
+        this.logger.warn(
+          `[DNS-DoH] Failed to resolve ${host}: ${err.message} — using hostname directly`
+        );
       }
     }
 
@@ -87,9 +89,9 @@ export class EmailAdapter implements EmailPort, OnModuleInit {
   private resolveViaDoH(hostname: string): Promise<string> {
     return new Promise((resolve, reject) => {
       const url = `https://cloudflare-dns.com/dns-query?name=${encodeURIComponent(hostname)}&type=A`;
-      const req = https.get(url, { headers: { Accept: 'application/dns-json' } }, (res) => {
+      const req = https.get(url, { headers: { Accept: 'application/dns-json' } }, res => {
         let raw = '';
-        res.on('data', (chunk) => (raw += chunk));
+        res.on('data', chunk => (raw += chunk));
         res.on('end', () => {
           try {
             const json = JSON.parse(raw);
@@ -136,7 +138,7 @@ export class EmailAdapter implements EmailPort, OnModuleInit {
       `Email transporter ready — ${serverName}:${port} (IP: ${actualHost}) user: ${user}`
     );
 
-    this.transporter.verify((error) => {
+    this.transporter.verify(error => {
       if (error) {
         this.logger.error(`❌ SMTP connection FAILED: ${error.message}`);
       } else {
@@ -148,8 +150,7 @@ export class EmailAdapter implements EmailPort, OnModuleInit {
   async send(options: EmailOptions): Promise<void> {
     try {
       const from =
-        options.from ??
-        this.configService.get<string>('SMTP_FROM', EMAIL_SENDERS.NOREPLY);
+        options.from ?? this.configService.get<string>('SMTP_FROM', EMAIL_SENDERS.NOREPLY);
 
       // Génère automatiquement la version plain text si absente (améliore le score anti-spam)
       const text = options.text ?? (options.html ? htmlToPlainText(options.html) : undefined);
diff --git a/apps/backend/src/infrastructure/i18n/user-preference.resolver.ts b/apps/backend/src/infrastructure/i18n/user-preference.resolver.ts
new file mode 100644
index 0000000..6171958
--- /dev/null
+++ b/apps/backend/src/infrastructure/i18n/user-preference.resolver.ts
@@ -0,0 +1,19 @@
+/**
+ * UserPreferenceResolver
+ *
+ * nestjs-i18n resolver that reads the authenticated user's preferredLanguage
+ * from the request (populated by JwtAuthGuard). Highest priority in the chain.
+ */
+
+import { Injectable, ExecutionContext } from '@nestjs/common';
+import { I18nResolver } from 'nestjs-i18n';
+import { isLocale } from '@domain/value-objects/locale.vo';
+
+@Injectable()
+export class UserPreferenceResolver implements I18nResolver {
+  resolve(context: ExecutionContext): string | undefined {
+    const request = context.switchToHttp().getRequest();
+    const preferred = request?.user?.preferredLanguage;
+    return isLocale(preferred) ? preferred : undefined;
+  }
+}
diff --git a/apps/backend/src/infrastructure/persistence/typeorm/entities/csv-booking.orm-entity.ts b/apps/backend/src/infrastructure/persistence/typeorm/entities/csv-booking.orm-entity.ts
index 75eb591..19ae980 100644
--- a/apps/backend/src/infrastructure/persistence/typeorm/entities/csv-booking.orm-entity.ts
+++ b/apps/backend/src/infrastructure/persistence/typeorm/entities/csv-booking.orm-entity.ts
@@ -75,11 +75,24 @@ export class CsvBookingOrmEntity {
   @Column({
     name: 'status',
     type: 'enum',
-    enum: ['PENDING_PAYMENT', 'PENDING_BANK_TRANSFER', 'PENDING', 'ACCEPTED', 'REJECTED', 'CANCELLED'],
+    enum: [
+      'PENDING_PAYMENT',
+      'PENDING_BANK_TRANSFER',
+      'PENDING',
+      'ACCEPTED',
+      'REJECTED',
+      'CANCELLED',
+    ],
     default: 'PENDING_PAYMENT',
   })
   @Index()
-  status: 'PENDING_PAYMENT' | 'PENDING_BANK_TRANSFER' | 'PENDING' | 'ACCEPTED' | 'REJECTED' | 'CANCELLED';
+  status:
+    | 'PENDING_PAYMENT'
+    | 'PENDING_BANK_TRANSFER'
+    | 'PENDING'
+    | 'ACCEPTED'
+    | 'REJECTED'
+    | 'CANCELLED';
 
   @Column({ name: 'documents', type: 'jsonb' })
   documents: Array<{
diff --git a/apps/backend/src/infrastructure/persistence/typeorm/entities/organization.orm-entity.ts b/apps/backend/src/infrastructure/persistence/typeorm/entities/organization.orm-entity.ts
index 9c59b49..cab1e12 100644
--- a/apps/backend/src/infrastructure/persistence/typeorm/entities/organization.orm-entity.ts
+++ b/apps/backend/src/infrastructure/persistence/typeorm/entities/organization.orm-entity.ts
@@ -74,6 +74,9 @@ export class OrganizationOrmEntity {
   @Column({ name: 'is_active', type: 'boolean', default: true })
   isActive: boolean;
 
+  @Column({ name: 'default_language', type: 'varchar', length: 2, default: 'fr' })
+  defaultLanguage: string;
+
   @CreateDateColumn({ name: 'created_at' })
   createdAt: Date;
 
diff --git a/apps/backend/src/infrastructure/persistence/typeorm/entities/password-reset-token.orm-entity.ts b/apps/backend/src/infrastructure/persistence/typeorm/entities/password-reset-token.orm-entity.ts
index fd4598f..ad99176 100644
--- a/apps/backend/src/infrastructure/persistence/typeorm/entities/password-reset-token.orm-entity.ts
+++ b/apps/backend/src/infrastructure/persistence/typeorm/entities/password-reset-token.orm-entity.ts
@@ -1,10 +1,4 @@
-import {
-  Entity,
-  PrimaryGeneratedColumn,
-  Column,
-  CreateDateColumn,
-  Index,
-} from 'typeorm';
+import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, Index } from 'typeorm';
 
 @Entity('password_reset_tokens')
 export class PasswordResetTokenOrmEntity {
diff --git a/apps/backend/src/infrastructure/persistence/typeorm/entities/user.orm-entity.ts b/apps/backend/src/infrastructure/persistence/typeorm/entities/user.orm-entity.ts
index 7946aba..eb65349 100644
--- a/apps/backend/src/infrastructure/persistence/typeorm/entities/user.orm-entity.ts
+++ b/apps/backend/src/infrastructure/persistence/typeorm/entities/user.orm-entity.ts
@@ -62,6 +62,9 @@ export class UserOrmEntity {
   @Column({ name: 'last_login_at', type: 'timestamp', nullable: true })
   lastLoginAt: Date | null;
 
+  @Column({ name: 'preferred_language', type: 'varchar', length: 2, default: 'fr' })
+  preferredLanguage: string;
+
   @CreateDateColumn({ name: 'created_at' })
   createdAt: Date;
 
diff --git a/apps/backend/src/infrastructure/persistence/typeorm/mappers/organization-orm.mapper.ts b/apps/backend/src/infrastructure/persistence/typeorm/mappers/organization-orm.mapper.ts
index 9eb59c6..e119e0f 100644
--- a/apps/backend/src/infrastructure/persistence/typeorm/mappers/organization-orm.mapper.ts
+++ b/apps/backend/src/infrastructure/persistence/typeorm/mappers/organization-orm.mapper.ts
@@ -5,6 +5,7 @@
  */
 
 import { Organization, OrganizationProps } from '@domain/entities/organization.entity';
+import { toLocale } from '@domain/value-objects/locale.vo';
 import { OrganizationOrmEntity } from '../entities/organization.orm-entity';
 
 export class OrganizationOrmMapper {
@@ -34,6 +35,7 @@ export class OrganizationOrmMapper {
     orm.siretVerified = props.siretVerified;
     orm.statusBadge = props.statusBadge;
     orm.isActive = props.isActive;
+    orm.defaultLanguage = props.defaultLanguage;
     orm.createdAt = props.createdAt;
     orm.updatedAt = props.updatedAt;
 
@@ -66,6 +68,7 @@ export class OrganizationOrmMapper {
       siretVerified: orm.siretVerified ?? false,
       statusBadge: (orm.statusBadge as 'none' | 'silver' | 'gold' | 'platinium') || 'none',
       isActive: orm.isActive,
+      defaultLanguage: toLocale(orm.defaultLanguage),
       createdAt: orm.createdAt,
       updatedAt: orm.updatedAt,
     };
diff --git a/apps/backend/src/infrastructure/persistence/typeorm/mappers/subscription-orm.mapper.ts b/apps/backend/src/infrastructure/persistence/typeorm/mappers/subscription-orm.mapper.ts
index bfc2d1c..591f9db 100644
--- a/apps/backend/src/infrastructure/persistence/typeorm/mappers/subscription-orm.mapper.ts
+++ b/apps/backend/src/infrastructure/persistence/typeorm/mappers/subscription-orm.mapper.ts
@@ -5,7 +5,10 @@
  */
 
 import { Subscription } from '@domain/entities/subscription.entity';
-import { SubscriptionOrmEntity, SubscriptionPlanOrmType } from '../entities/subscription.orm-entity';
+import {
+  SubscriptionOrmEntity,
+  SubscriptionPlanOrmType,
+} from '../entities/subscription.orm-entity';
 
 /** Maps canonical domain plan names back to the values stored in the DB. */
 const DOMAIN_TO_ORM_PLAN: Record<string, SubscriptionPlanOrmType> = {
diff --git a/apps/backend/src/infrastructure/persistence/typeorm/mappers/user-orm.mapper.ts b/apps/backend/src/infrastructure/persistence/typeorm/mappers/user-orm.mapper.ts
index 1e9d4b0..019cf85 100644
--- a/apps/backend/src/infrastructure/persistence/typeorm/mappers/user-orm.mapper.ts
+++ b/apps/backend/src/infrastructure/persistence/typeorm/mappers/user-orm.mapper.ts
@@ -5,6 +5,7 @@
  */
 
 import { User, UserProps } from '@domain/entities/user.entity';
+import { toLocale } from '@domain/value-objects/locale.vo';
 import { UserOrmEntity } from '../entities/user.orm-entity';
 
 export class UserOrmMapper {
@@ -27,6 +28,7 @@ export class UserOrmMapper {
     orm.isEmailVerified = props.isEmailVerified;
     orm.isActive = props.isActive;
     orm.lastLoginAt = props.lastLoginAt || null;
+    orm.preferredLanguage = props.preferredLanguage;
     orm.createdAt = props.createdAt;
     orm.updatedAt = props.updatedAt;
 
@@ -50,6 +52,7 @@ export class UserOrmMapper {
       isEmailVerified: orm.isEmailVerified,
       isActive: orm.isActive,
       lastLoginAt: orm.lastLoginAt || undefined,
+      preferredLanguage: toLocale(orm.preferredLanguage),
       createdAt: orm.createdAt,
       updatedAt: orm.updatedAt,
     };
diff --git a/apps/backend/src/infrastructure/persistence/typeorm/migrations/1741000000001-CreateApiKeysTable.ts b/apps/backend/src/infrastructure/persistence/typeorm/migrations/1741000000001-CreateApiKeysTable.ts
index c443352..ce871c1 100644
--- a/apps/backend/src/infrastructure/persistence/typeorm/migrations/1741000000001-CreateApiKeysTable.ts
+++ b/apps/backend/src/infrastructure/persistence/typeorm/migrations/1741000000001-CreateApiKeysTable.ts
@@ -38,15 +38,9 @@ export class CreateApiKeysTable1741000000001 implements MigrationInterface {
     await queryRunner.query(
       `CREATE INDEX "idx_api_keys_organization_id" ON "api_keys" ("organization_id")`
     );
-    await queryRunner.query(
-      `CREATE INDEX "idx_api_keys_user_id" ON "api_keys" ("user_id")`
-    );
-    await queryRunner.query(
-      `CREATE INDEX "idx_api_keys_is_active" ON "api_keys" ("is_active")`
-    );
-    await queryRunner.query(
-      `CREATE INDEX "idx_api_keys_key_hash" ON "api_keys" ("key_hash")`
-    );
+    await queryRunner.query(`CREATE INDEX "idx_api_keys_user_id" ON "api_keys" ("user_id")`);
+    await queryRunner.query(`CREATE INDEX "idx_api_keys_is_active" ON "api_keys" ("is_active")`);
+    await queryRunner.query(`CREATE INDEX "idx_api_keys_key_hash" ON "api_keys" ("key_hash")`);
 
     await queryRunner.query(
       `COMMENT ON TABLE "api_keys" IS 'API keys for programmatic access — GOLD and PLATINIUM plans only'`
diff --git a/apps/backend/src/infrastructure/persistence/typeorm/migrations/1745000000000-AddPreferredLanguage.ts b/apps/backend/src/infrastructure/persistence/typeorm/migrations/1745000000000-AddPreferredLanguage.ts
new file mode 100644
index 0000000..9042aa2
--- /dev/null
+++ b/apps/backend/src/infrastructure/persistence/typeorm/migrations/1745000000000-AddPreferredLanguage.ts
@@ -0,0 +1,25 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddPreferredLanguage1745000000000 implements MigrationInterface {
+  name = 'AddPreferredLanguage1745000000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE "users"
+      ADD COLUMN "preferred_language" VARCHAR(2) NOT NULL DEFAULT 'fr'
+    `);
+    await queryRunner.query(`
+      ALTER TABLE "organizations"
+      ADD COLUMN "default_language" VARCHAR(2) NOT NULL DEFAULT 'fr'
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE "organizations" DROP COLUMN "default_language"
+    `);
+    await queryRunner.query(`
+      ALTER TABLE "users" DROP COLUMN "preferred_language"
+    `);
+  }
+}
diff --git a/apps/backend/src/main.ts b/apps/backend/src/main.ts
index 657f47a..c562168 100644
--- a/apps/backend/src/main.ts
+++ b/apps/backend/src/main.ts
@@ -1,12 +1,14 @@
 import { NestFactory } from '@nestjs/core';
-import { ValidationPipe, VersioningType } from '@nestjs/common';
+import { VersioningType } from '@nestjs/common';
 import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
 import { ConfigService } from '@nestjs/config';
+import { I18nService, I18nValidationExceptionFilter, I18nValidationPipe } from 'nestjs-i18n';
 import helmet from 'helmet';
 import compression from 'compression';
 import { AppModule } from './app.module';
 import { Logger } from 'nestjs-pino';
 import { helmetConfig, corsConfig } from './infrastructure/security/security.config';
+import { DomainExceptionFilter } from './application/filters/domain-exception.filter';
 import type { Request, Response, NextFunction } from 'express';
 
 async function bootstrap() {
@@ -42,9 +44,9 @@ async function bootstrap() {
     type: VersioningType.URI,
   });
 
-  // Global validation pipe
+  // Global validation pipe — i18n-aware (messages translated to caller locale)
   app.useGlobalPipes(
-    new ValidationPipe({
+    new I18nValidationPipe({
       whitelist: true,
       forbidNonWhitelisted: true,
       transform: true,
@@ -54,6 +56,15 @@ async function bootstrap() {
     })
   );
 
+  // Global exception filters — each filter declares its target via @Catch(),
+  // so they don't overlap: DomainExceptionFilter handles DomainException,
+  // I18nValidationExceptionFilter handles class-validator errors.
+  const i18nService = app.get(I18nService) as I18nService<Record<string, unknown>>;
+  app.useGlobalFilters(
+    new DomainExceptionFilter(i18nService),
+    new I18nValidationExceptionFilter({ detailedErrors: false })
+  );
+
   // ─── Swagger documentation ────────────────────────────────────────────────
   const swaggerUser = configService.get<string>('SWAGGER_USERNAME');
   const swaggerPass = configService.get<string>('SWAGGER_PASSWORD');
diff --git a/apps/frontend/app/about/page.tsx b/apps/frontend/app/[locale]/about/page.tsx
similarity index 69%
rename from apps/frontend/app/about/page.tsx
rename to apps/frontend/app/[locale]/about/page.tsx
index b89b7c0..e6a4ee3 100644
--- a/apps/frontend/app/about/page.tsx
+++ b/apps/frontend/app/[locale]/about/page.tsx
@@ -1,494 +1,407 @@
-'use client';
-
-import { useRef } from 'react';
-import Link from 'next/link';
-import { motion, useInView } from 'framer-motion';
-import {
-  Ship,
-  Target,
-  Eye,
-  Heart,
-  Users,
-  TrendingUp,
-  Linkedin,
-  Calendar,
-  ArrowRight,
-} from 'lucide-react';
-import { LandingHeader, LandingFooter } from '@/components/layout';
-
-export default function AboutPage() {
-  const heroRef = useRef(null);
-  const missionRef = useRef(null);
-  const valuesRef = useRef(null);
-  const teamRef = useRef(null);
-  const timelineRef = useRef(null);
-  const statsRef = useRef(null);
-
-  const isHeroInView = useInView(heroRef, { once: true });
-  const isMissionInView = useInView(missionRef, { once: true });
-  const isValuesInView = useInView(valuesRef, { once: true });
-  const isTeamInView = useInView(teamRef, { once: true });
-  const isTimelineInView = useInView(timelineRef, { once: true });
-  const isStatsInView = useInView(statsRef, { once: true });
-
-  const values = [
-    {
-      icon: Target,
-      title: 'Excellence',
-      description:
-        'Nous visons l\'excellence dans chaque aspect de notre plateforme, en offrant une expérience utilisateur de premier ordre.',
-      color: 'from-blue-500 to-cyan-500',
-    },
-    {
-      icon: Heart,
-      title: 'Transparence',
-      description:
-        'Nous croyons en une communication ouverte et honnête avec nos clients, partenaires et employés.',
-      color: 'from-pink-500 to-rose-500',
-    },
-    {
-      icon: Users,
-      title: 'Collaboration',
-      description:
-        'Le succès se construit ensemble. Nous travaillons main dans la main avec nos clients pour atteindre leurs objectifs.',
-      color: 'from-purple-500 to-indigo-500',
-    },
-    {
-      icon: TrendingUp,
-      title: 'Innovation',
-      description:
-        'Nous repoussons constamment les limites de la technologie pour révolutionner le fret maritime.',
-      color: 'from-orange-500 to-amber-500',
-    },
-  ];
-
-  const team = [
-    {
-      name: 'Jean-Pierre Durand',
-      role: 'CEO & Co-fondateur',
-      bio: 'Ex-directeur chez Maersk, 20 ans d\'expérience dans le shipping',
-      image: '/assets/images/team/ceo.jpg',
-      linkedin: '#',
-    },
-    {
-      name: 'Marie Lefebvre',
-      role: 'CTO & Co-fondatrice',
-      bio: 'Ex-Google, experte en plateformes B2B et systèmes distribués',
-      image: '/assets/images/team/cto.jpg',
-      linkedin: '#',
-    },
-    {
-      name: 'Thomas Martin',
-      role: 'COO',
-      bio: 'Ex-CMA CGM, spécialiste des opérations maritimes internationales',
-      image: '/assets/images/team/coo.jpg',
-      linkedin: '#',
-    },
-    {
-      name: 'Sophie Bernard',
-      role: 'VP Sales',
-      bio: '15 ans d\'expérience commerciale dans le secteur logistique',
-      image: '/assets/images/team/vp-sales.jpg',
-      linkedin: '#',
-    },
-    {
-      name: 'Alexandre Petit',
-      role: 'VP Engineering',
-      bio: 'Ex-Uber Freight, expert en systèmes de réservation temps réel',
-      image: '/assets/images/team/vp-eng.jpg',
-      linkedin: '#',
-    },
-    {
-      name: 'Claire Moreau',
-      role: 'VP Product',
-      bio: 'Ex-Flexport, passionnée par l\'UX et l\'innovation produit',
-      image: '/assets/images/team/vp-product.jpg',
-      linkedin: '#',
-    },
-  ];
-
-  const timeline = [
-    {
-      year: '2021',
-      title: 'Fondation',
-      description: 'Création de Xpeditis avec une vision claire : simplifier le fret maritime pour tous.',
-    },
-    {
-      year: '2022',
-      title: 'Première version',
-      description: 'Lancement de la plateforme beta avec 10 compagnies maritimes partenaires.',
-    },
-    {
-      year: '2023',
-      title: 'Série A',
-      description: 'Levée de fonds de 15M€ pour accélérer notre expansion européenne.',
-    },
-    {
-      year: '2024',
-      title: 'Expansion',
-      description: '50+ compagnies maritimes, présence dans 15 pays européens.',
-    },
-    {
-      year: '2025',
-      title: 'Leader européen',
-      description: 'Plateforme #1 du fret maritime B2B en Europe avec 500+ clients actifs.',
-    },
-  ];
-
-  const stats = [
-    { value: '500+', label: 'Clients actifs' },
-    { value: '50+', label: 'Compagnies maritimes' },
-    { value: '15', label: 'Pays couverts' },
-    { value: '100K+', label: 'Réservations/an' },
-  ];
-
-  const containerVariants = {
-    hidden: { opacity: 0, y: 50 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.6,
-        staggerChildren: 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: 0.5 },
-    },
-  };
-
-  return (
-    <div className="min-h-screen bg-white">
-      <LandingHeader activePage="about" />
-
-      {/* Hero Section */}
-      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
-          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center"
-          >
-            <motion.div
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
-            >
-              <Ship className="w-5 h-5 text-brand-turquoise" />
-              <span className="text-white/90 text-sm font-medium">Notre histoire</span>
-            </motion.div>
-
-            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
-              Révolutionner le fret maritime,
-              <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
-                une réservation à la fois
-              </span>
-            </h1>
-
-            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
-              Fondée en 2021, Xpeditis est née d'une vision simple : rendre le fret maritime aussi simple
-              qu'une réservation de vol. Nous connectons les transitaires du monde entier avec les plus
-              grandes compagnies maritimes.
-            </p>
-          </motion.div>
-        </div>
-
-        {/* Wave */}
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
-            <path
-              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
-              fill="white"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* Mission & Vision Section */}
-      <section ref={missionRef} className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isMissionInView ? 'visible' : 'hidden'}
-            className="grid grid-cols-1 lg:grid-cols-2 gap-12"
-          >
-            <motion.div
-              variants={itemVariants}
-              className="bg-gradient-to-br from-brand-turquoise/10 to-brand-turquoise/5 p-10 rounded-3xl border border-brand-turquoise/20"
-            >
-              <div className="w-16 h-16 bg-brand-turquoise rounded-2xl flex items-center justify-center mb-6">
-                <Target className="w-8 h-8 text-white" />
-              </div>
-              <h2 className="text-3xl font-bold text-brand-navy mb-4">Notre Mission</h2>
-              <p className="text-gray-600 text-lg leading-relaxed">
-                Démocratiser l'accès au fret maritime en offrant une plateforme technologique de pointe
-                qui simplifie la recherche, la comparaison et la réservation de transport maritime pour
-                tous les professionnels de la logistique.
-              </p>
-            </motion.div>
-
-            <motion.div
-              variants={itemVariants}
-              className="bg-gradient-to-br from-brand-green/10 to-brand-green/5 p-10 rounded-3xl border border-brand-green/20"
-            >
-              <div className="w-16 h-16 bg-brand-green rounded-2xl flex items-center justify-center mb-6">
-                <Eye className="w-8 h-8 text-white" />
-              </div>
-              <h2 className="text-3xl font-bold text-brand-navy mb-4">Notre Vision</h2>
-              <p className="text-gray-600 text-lg leading-relaxed">
-                Devenir la référence mondiale du fret maritime digital, en connectant chaque transitaire
-                à chaque compagnie maritime, partout dans le monde, avec la transparence et l'efficacité
-                que mérite le commerce international.
-              </p>
-            </motion.div>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Stats Section */}
-      <section ref={statsRef} className="py-16 bg-gray-50">
-        <motion.div
-          variants={containerVariants}
-          initial="hidden"
-          animate={isStatsInView ? 'visible' : 'hidden'}
-          className="max-w-7xl mx-auto px-6 lg:px-8"
-        >
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
-            {stats.map((stat, index) => (
-              <motion.div
-                key={index}
-                variants={itemVariants}
-                className="text-center"
-              >
-                <motion.div
-                  initial={{ scale: 0 }}
-                  animate={isStatsInView ? { scale: 1 } : {}}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
-                  className="text-5xl lg:text-6xl font-bold text-brand-turquoise mb-2"
-                >
-                  {stat.value}
-                </motion.div>
-                <div className="text-gray-600 font-medium">{stat.label}</div>
-              </motion.div>
-            ))}
-          </div>
-        </motion.div>
-      </section>
-
-      {/* Values Section */}
-      <section ref={valuesRef} className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isValuesInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">Nos Valeurs</h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Les principes qui guident chacune de nos décisions
-            </p>
-          </motion.div>
-
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isValuesInView ? 'visible' : 'hidden'}
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
-          >
-            {values.map((value, index) => {
-              const IconComponent = value.icon;
-              return (
-                <motion.div
-                  key={index}
-                  variants={itemVariants}
-                  whileHover={{ y: -10 }}
-                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
-                >
-                  <div
-                    className={`w-14 h-14 rounded-xl bg-gradient-to-br ${value.color} flex items-center justify-center mb-4`}
-                  >
-                    <IconComponent className="w-7 h-7 text-white" />
-                  </div>
-                  <h3 className="text-xl font-bold text-brand-navy mb-3">{value.title}</h3>
-                  <p className="text-gray-600">{value.description}</p>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Timeline Section */}
-      <section ref={timelineRef} className="py-20 bg-gradient-to-br from-gray-50 to-white">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isTimelineInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">Notre Parcours</h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              De la startup au leader européen du fret maritime digital
-            </p>
-          </motion.div>
-
-          <div className="relative">
-            {/* Timeline vertical rail + animated fill */}
-            <div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-brand-turquoise/15 overflow-hidden">
-              <motion.div
-                initial={{ scaleY: 0 }}
-                animate={isTimelineInView ? { scaleY: 1 } : {}}
-                transition={{ duration: 2.2, delay: 0.2, ease: 'easeInOut' }}
-                style={{ transformOrigin: 'top' }}
-                className="absolute inset-0 bg-brand-turquoise/60"
-              />
-            </div>
-
-            <div className="space-y-12">
-              {timeline.map((item, index) => (
-                <motion.div
-                  key={index}
-                  initial={{ opacity: 0, x: index % 2 === 0 ? -64 : 64 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true, amount: 0.4 }}
-                  transition={{ duration: 0.7, ease: 'easeOut' }}
-                  className={`flex items-center ${index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'}`}
-                >
-                  <div className={`flex-1 ${index % 2 === 0 ? 'lg:pr-12 lg:text-right' : 'lg:pl-12'}`}>
-                    <div className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 inline-block hover:shadow-xl transition-shadow">
-                      <div className={`flex items-center space-x-3 mb-3 ${index % 2 === 0 ? 'lg:justify-end' : ''}`}>
-                        <Calendar className="w-5 h-5 text-brand-turquoise" />
-                        <span className="text-2xl font-bold text-brand-turquoise">{item.year}</span>
-                      </div>
-                      <h3 className="text-xl font-bold text-brand-navy mb-2">{item.title}</h3>
-                      <p className="text-gray-600">{item.description}</p>
-                    </div>
-                  </div>
-
-                  {/* Animated center dot */}
-                  <div className="hidden lg:flex items-center justify-center mx-4 flex-shrink-0">
-                    <motion.div
-                      initial={{ scale: 0 }}
-                      whileInView={{ scale: 1 }}
-                      viewport={{ once: true, amount: 0.6 }}
-                      transition={{ duration: 0.4, delay: 0.15, type: 'spring', stiffness: 320, damping: 18 }}
-                      className="w-5 h-5 bg-brand-turquoise rounded-full border-4 border-white shadow-lg ring-2 ring-brand-turquoise/30"
-                    />
-                  </div>
-
-                  <div className="hidden lg:block flex-1" />
-                </motion.div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Team Section */}
-      <section ref={teamRef} className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isTeamInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">Notre Équipe</h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Des experts passionnés par le maritime et la technologie
-            </p>
-          </motion.div>
-
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isTeamInView ? 'visible' : 'hidden'}
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
-          >
-            {team.map((member, index) => (
-              <motion.div
-                key={index}
-                variants={itemVariants}
-                whileHover={{ y: -10 }}
-                className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden group"
-              >
-                <div className="aspect-[4/3] bg-gradient-to-br from-brand-navy to-brand-navy/80 flex items-center justify-center relative overflow-hidden">
-                  <div className="w-24 h-24 bg-white/20 rounded-full flex items-center justify-center">
-                    <Users className="w-12 h-12 text-white/80" />
-                  </div>
-                  <div className="absolute inset-0 bg-brand-turquoise/80 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                    <a
-                      href={member.linkedin}
-                      className="w-12 h-12 bg-white rounded-full flex items-center justify-center hover:scale-110 transition-transform"
-                    >
-                      <Linkedin className="w-6 h-6 text-brand-navy" />
-                    </a>
-                  </div>
-                </div>
-                <div className="p-6">
-                  <h3 className="text-xl font-bold text-brand-navy mb-1">{member.name}</h3>
-                  <p className="text-brand-turquoise font-medium mb-3">{member.role}</p>
-                  <p className="text-gray-600 text-sm">{member.bio}</p>
-                </div>
-              </motion.div>
-            ))}
-          </motion.div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-4xl lg:text-5xl font-bold text-white mb-6">
-              Rejoignez l'aventure Xpeditis
-            </h2>
-            <p className="text-xl text-white/80 mb-10">
-              Que vous soyez transitaire à la recherche d'une solution moderne ou talent souhaitant
-              rejoindre une équipe passionnée, nous avons hâte de vous rencontrer.
-            </p>
-            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
-              <Link
-                href="/register"
-                className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl font-semibold text-lg flex items-center space-x-2"
-              >
-                <span>Créer un compte</span>
-                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
-              </Link>
-              <Link
-                href="/careers"
-                className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-all font-semibold text-lg"
-              >
-                Voir les offres d'emploi
-              </Link>
-            </div>
-          </motion.div>
-        </div>
-      </section>
-
-      <LandingFooter />
-    </div>
-  );
-}
+'use client';
+
+import { useRef } from 'react';
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/navigation';
+import { motion, useInView } from 'framer-motion';
+import {
+  Ship,
+  Target,
+  Eye,
+  Heart,
+  Users,
+  TrendingUp,
+  Linkedin,
+  Calendar,
+  ArrowRight,
+  type LucideIcon,
+} from 'lucide-react';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+
+type ValueKey = 'excellence' | 'transparency' | 'collaboration' | 'innovation';
+type TeamKey = 'ceo' | 'cto' | 'coo' | 'vpSales' | 'vpEng' | 'vpProduct';
+type TimelineKey = '2021' | '2022' | '2023' | '2024' | '2025';
+type StatKey = 'clients' | 'carriers' | 'countries' | 'bookings';
+
+const VALUES: { key: ValueKey; icon: LucideIcon; color: string }[] = [
+  { key: 'excellence', icon: Target, color: 'from-blue-500 to-cyan-500' },
+  { key: 'transparency', icon: Heart, color: 'from-pink-500 to-rose-500' },
+  { key: 'collaboration', icon: Users, color: 'from-purple-500 to-indigo-500' },
+  { key: 'innovation', icon: TrendingUp, color: 'from-orange-500 to-amber-500' },
+];
+
+const TEAM: { key: TeamKey; name: string; linkedin: string }[] = [
+  { key: 'ceo', name: 'Jean-Pierre Durand', linkedin: '#' },
+  { key: 'cto', name: 'Marie Lefebvre', linkedin: '#' },
+  { key: 'coo', name: 'Thomas Martin', linkedin: '#' },
+  { key: 'vpSales', name: 'Sophie Bernard', linkedin: '#' },
+  { key: 'vpEng', name: 'Alexandre Petit', linkedin: '#' },
+  { key: 'vpProduct', name: 'Claire Moreau', linkedin: '#' },
+];
+
+const TIMELINE_YEARS: TimelineKey[] = ['2021', '2022', '2023', '2024', '2025'];
+
+const STATS: { key: StatKey; value: string }[] = [
+  { key: 'clients', value: '500+' },
+  { key: 'carriers', value: '50+' },
+  { key: 'countries', value: '15' },
+  { key: 'bookings', value: '100K+' },
+];
+
+export default function AboutPage() {
+  const t = useTranslations('marketing.about');
+  const heroRef = useRef(null);
+  const missionRef = useRef(null);
+  const valuesRef = useRef(null);
+  const teamRef = useRef(null);
+  const timelineRef = useRef(null);
+  const statsRef = useRef(null);
+
+  const isHeroInView = useInView(heroRef, { once: true });
+  const isMissionInView = useInView(missionRef, { once: true });
+  const isValuesInView = useInView(valuesRef, { once: true });
+  const isTeamInView = useInView(teamRef, { once: true });
+  const isTimelineInView = useInView(timelineRef, { once: true });
+  const isStatsInView = useInView(statsRef, { once: true });
+
+  const containerVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader activePage="about" />
+
+      {/* Hero Section */}
+      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
+          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
+        </div>
+
+        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center"
+          >
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
+            >
+              <Ship className="w-5 h-5 text-brand-turquoise" />
+              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
+            </motion.div>
+
+            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+              {t('title1')}
+              <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
+                {t('title2')}
+              </span>
+            </h1>
+
+            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
+              {t('intro')}
+            </p>
+          </motion.div>
+        </div>
+
+        {/* Wave */}
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
+            <path
+              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </section>
+
+      {/* Mission & Vision Section */}
+      <section ref={missionRef} className="py-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={isMissionInView ? 'visible' : 'hidden'}
+            className="grid grid-cols-1 lg:grid-cols-2 gap-12"
+          >
+            <motion.div
+              variants={itemVariants}
+              className="bg-gradient-to-br from-brand-turquoise/10 to-brand-turquoise/5 p-10 rounded-3xl border border-brand-turquoise/20"
+            >
+              <div className="w-16 h-16 bg-brand-turquoise rounded-2xl flex items-center justify-center mb-6">
+                <Target className="w-8 h-8 text-white" />
+              </div>
+              <h2 className="text-3xl font-bold text-brand-navy mb-4">{t('mission.title')}</h2>
+              <p className="text-gray-600 text-lg leading-relaxed">
+                {t('mission.body')}
+              </p>
+            </motion.div>
+
+            <motion.div
+              variants={itemVariants}
+              className="bg-gradient-to-br from-brand-green/10 to-brand-green/5 p-10 rounded-3xl border border-brand-green/20"
+            >
+              <div className="w-16 h-16 bg-brand-green rounded-2xl flex items-center justify-center mb-6">
+                <Eye className="w-8 h-8 text-white" />
+              </div>
+              <h2 className="text-3xl font-bold text-brand-navy mb-4">{t('vision.title')}</h2>
+              <p className="text-gray-600 text-lg leading-relaxed">
+                {t('vision.body')}
+              </p>
+            </motion.div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Stats Section */}
+      <section ref={statsRef} className="py-16 bg-gray-50">
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          animate={isStatsInView ? 'visible' : 'hidden'}
+          className="max-w-7xl mx-auto px-6 lg:px-8"
+        >
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+            {STATS.map((stat, index) => (
+              <motion.div
+                key={stat.key}
+                variants={itemVariants}
+                className="text-center"
+              >
+                <motion.div
+                  initial={{ scale: 0 }}
+                  animate={isStatsInView ? { scale: 1 } : {}}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  className="text-5xl lg:text-6xl font-bold text-brand-turquoise mb-2"
+                >
+                  {stat.value}
+                </motion.div>
+                <div className="text-gray-600 font-medium">{t(`stats.${stat.key}`)}</div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </section>
+
+      {/* Values Section */}
+      <section ref={valuesRef} className="py-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isValuesInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">{t('valuesTitle')}</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('valuesSubtitle')}
+            </p>
+          </motion.div>
+
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={isValuesInView ? 'visible' : 'hidden'}
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
+          >
+            {VALUES.map((value) => {
+              const IconComponent = value.icon;
+              return (
+                <motion.div
+                  key={value.key}
+                  variants={itemVariants}
+                  whileHover={{ y: -10 }}
+                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
+                >
+                  <div
+                    className={`w-14 h-14 rounded-xl bg-gradient-to-br ${value.color} flex items-center justify-center mb-4`}
+                  >
+                    <IconComponent className="w-7 h-7 text-white" />
+                  </div>
+                  <h3 className="text-xl font-bold text-brand-navy mb-3">{t(`values.${value.key}.title`)}</h3>
+                  <p className="text-gray-600">{t(`values.${value.key}.description`)}</p>
+                </motion.div>
+              );
+            })}
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Timeline Section */}
+      <section ref={timelineRef} className="py-20 bg-gradient-to-br from-gray-50 to-white">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isTimelineInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">{t('timelineTitle')}</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('timelineSubtitle')}
+            </p>
+          </motion.div>
+
+          <div className="relative">
+            <div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-brand-turquoise/15 overflow-hidden">
+              <motion.div
+                initial={{ scaleY: 0 }}
+                animate={isTimelineInView ? { scaleY: 1 } : {}}
+                transition={{ duration: 2.2, delay: 0.2, ease: 'easeInOut' }}
+                style={{ transformOrigin: 'top' }}
+                className="absolute inset-0 bg-brand-turquoise/60"
+              />
+            </div>
+
+            <div className="space-y-12">
+              {TIMELINE_YEARS.map((year, index) => (
+                <motion.div
+                  key={year}
+                  initial={{ opacity: 0, x: index % 2 === 0 ? -64 : 64 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true, amount: 0.4 }}
+                  transition={{ duration: 0.7, ease: 'easeOut' }}
+                  className={`flex items-center ${index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'}`}
+                >
+                  <div className={`flex-1 ${index % 2 === 0 ? 'lg:pr-12 lg:text-right' : 'lg:pl-12'}`}>
+                    <div className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 inline-block hover:shadow-xl transition-shadow">
+                      <div className={`flex items-center space-x-3 mb-3 ${index % 2 === 0 ? 'lg:justify-end' : ''}`}>
+                        <Calendar className="w-5 h-5 text-brand-turquoise" />
+                        <span className="text-2xl font-bold text-brand-turquoise">{year}</span>
+                      </div>
+                      <h3 className="text-xl font-bold text-brand-navy mb-2">{t(`timeline.${year}.title`)}</h3>
+                      <p className="text-gray-600">{t(`timeline.${year}.description`)}</p>
+                    </div>
+                  </div>
+
+                  <div className="hidden lg:flex items-center justify-center mx-4 flex-shrink-0">
+                    <motion.div
+                      initial={{ scale: 0 }}
+                      whileInView={{ scale: 1 }}
+                      viewport={{ once: true, amount: 0.6 }}
+                      transition={{ duration: 0.4, delay: 0.15, type: 'spring', stiffness: 320, damping: 18 }}
+                      className="w-5 h-5 bg-brand-turquoise rounded-full border-4 border-white shadow-lg ring-2 ring-brand-turquoise/30"
+                    />
+                  </div>
+
+                  <div className="hidden lg:block flex-1" />
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Team Section */}
+      <section ref={teamRef} className="py-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isTeamInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">{t('teamTitle')}</h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('teamSubtitle')}
+            </p>
+          </motion.div>
+
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={isTeamInView ? 'visible' : 'hidden'}
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+          >
+            {TEAM.map((member) => (
+              <motion.div
+                key={member.key}
+                variants={itemVariants}
+                whileHover={{ y: -10 }}
+                className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden group"
+              >
+                <div className="aspect-[4/3] bg-gradient-to-br from-brand-navy to-brand-navy/80 flex items-center justify-center relative overflow-hidden">
+                  <div className="w-24 h-24 bg-white/20 rounded-full flex items-center justify-center">
+                    <Users className="w-12 h-12 text-white/80" />
+                  </div>
+                  <div className="absolute inset-0 bg-brand-turquoise/80 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                    <a
+                      href={member.linkedin}
+                      className="w-12 h-12 bg-white rounded-full flex items-center justify-center hover:scale-110 transition-transform"
+                    >
+                      <Linkedin className="w-6 h-6 text-brand-navy" />
+                    </a>
+                  </div>
+                </div>
+                <div className="p-6">
+                  <h3 className="text-xl font-bold text-brand-navy mb-1">{member.name}</h3>
+                  <p className="text-brand-turquoise font-medium mb-3">{t(`team.${member.key}.role`)}</p>
+                  <p className="text-gray-600 text-sm">{t(`team.${member.key}.bio`)}</p>
+                </div>
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+          >
+            <h2 className="text-4xl lg:text-5xl font-bold text-white mb-6">
+              {t('cta.title')}
+            </h2>
+            <p className="text-xl text-white/80 mb-10">
+              {t('cta.body')}
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
+              <Link
+                href="/register"
+                className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl font-semibold text-lg flex items-center space-x-2"
+              >
+                <span>{t('cta.createAccount')}</span>
+                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+              </Link>
+              <Link
+                href="/careers"
+                className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-all font-semibold text-lg"
+              >
+                {t('cta.viewCareers')}
+              </Link>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      <LandingFooter />
+    </div>
+  );
+}
diff --git a/apps/frontend/app/blog/page.tsx b/apps/frontend/app/[locale]/blog/page.tsx
similarity index 65%
rename from apps/frontend/app/blog/page.tsx
rename to apps/frontend/app/[locale]/blog/page.tsx
index 530cb4b..9c4e18a 100644
--- a/apps/frontend/app/blog/page.tsx
+++ b/apps/frontend/app/[locale]/blog/page.tsx
@@ -1,473 +1,390 @@
-'use client';
-
-import { useState, useRef } from 'react';
-import Link from 'next/link';
-import { motion, useInView } from 'framer-motion';
-import {
-  Ship,
-  BookOpen,
-  Calendar,
-  Clock,
-  User,
-  ArrowRight,
-  Search,
-  TrendingUp,
-  Globe,
-  FileText,
-  Anchor,
-} from 'lucide-react';
-import { LandingHeader, LandingFooter } from '@/components/layout';
-
-export default function BlogPage() {
-  const [selectedCategory, setSelectedCategory] = useState('all');
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const heroRef = useRef(null);
-  const articlesRef = useRef(null);
-  const categoriesRef = useRef(null);
-
-  const isHeroInView = useInView(heroRef, { once: true });
-  const isArticlesInView = useInView(articlesRef, { once: true });
-  const isCategoriesInView = useInView(categoriesRef, { once: true });
-
-  const categories = [
-    { value: 'all', label: 'Tous les articles', icon: BookOpen },
-    { value: 'industry', label: 'Industrie maritime', icon: Ship },
-    { value: 'technology', label: 'Technologie', icon: TrendingUp },
-    { value: 'guides', label: 'Guides pratiques', icon: FileText },
-    { value: 'news', label: 'Actualités', icon: Globe },
-  ];
-
-  const featuredArticle = {
-    id: 1,
-    title: 'L\'avenir du fret maritime : comment l\'IA transforme la logistique',
-    excerpt:
-      'Découvrez comment l\'intelligence artificielle révolutionne la gestion des expéditions maritimes et optimise les chaînes d\'approvisionnement mondiales.',
-    category: 'technology',
-    author: 'Marie Lefebvre',
-    authorRole: 'CTO',
-    date: '15 janvier 2025',
-    readTime: '8 min',
-    image: '/assets/images/blog/featured.jpg',
-    tags: ['IA', 'Innovation', 'Logistique'],
-  };
-
-  const articles = [
-    {
-      id: 2,
-      title: 'Guide complet des Incoterms 2020 pour le transport maritime',
-      excerpt:
-        'Tout ce que vous devez savoir sur les règles Incoterms et leur application dans le fret maritime international.',
-      category: 'guides',
-      author: 'Thomas Martin',
-      date: '10 janvier 2025',
-      readTime: '12 min',
-      image: '/assets/images/blog/incoterms.jpg',
-      tags: ['Incoterms', 'Guide', 'Commerce international'],
-    },
-    {
-      id: 3,
-      title: 'Comment optimiser vos coûts de transport maritime en 2025',
-      excerpt:
-        'Stratégies et conseils pratiques pour réduire vos dépenses logistiques sans compromettre la qualité de service.',
-      category: 'guides',
-      author: 'Sophie Bernard',
-      date: '8 janvier 2025',
-      readTime: '6 min',
-      image: '/assets/images/blog/costs.jpg',
-      tags: ['Optimisation', 'Coûts', 'Stratégie'],
-    },
-    {
-      id: 4,
-      title: 'Les plus grands ports européens : classement 2025',
-      excerpt:
-        'Analyse des performances des principaux ports européens et tendances du trafic conteneurisé.',
-      category: 'industry',
-      author: 'Jean-Pierre Durand',
-      date: '5 janvier 2025',
-      readTime: '10 min',
-      image: '/assets/images/blog/ports.jpg',
-      tags: ['Ports', 'Europe', 'Statistiques'],
-    },
-    {
-      id: 5,
-      title: 'Xpeditis lève 15M€ pour accélérer son expansion',
-      excerpt:
-        'Notre série A nous permet de renforcer notre équipe et d\'étendre notre présence en Europe.',
-      category: 'news',
-      author: 'Jean-Pierre Durand',
-      date: '3 janvier 2025',
-      readTime: '4 min',
-      image: '/assets/images/blog/funding.jpg',
-      tags: ['Financement', 'Croissance', 'Xpeditis'],
-    },
-    {
-      id: 6,
-      title: 'Décarbonation du transport maritime : où en sommes-nous ?',
-      excerpt:
-        'État des lieux des initiatives environnementales dans le secteur maritime et perspectives pour 2030.',
-      category: 'industry',
-      author: 'Claire Moreau',
-      date: '28 décembre 2024',
-      readTime: '9 min',
-      image: '/assets/images/blog/green.jpg',
-      tags: ['Environnement', 'Décarbonation', 'Durabilité'],
-    },
-    {
-      id: 7,
-      title: 'APIs et intégrations : comment connecter votre TMS à Xpeditis',
-      excerpt:
-        'Guide technique pour intégrer notre plateforme avec vos systèmes de gestion existants.',
-      category: 'technology',
-      author: 'Alexandre Petit',
-      date: '22 décembre 2024',
-      readTime: '15 min',
-      image: '/assets/images/blog/api.jpg',
-      tags: ['API', 'Intégration', 'Technique'],
-    },
-    {
-      id: 8,
-      title: 'Les documents essentiels pour l\'export maritime',
-      excerpt:
-        'Check-list complète des documents requis pour vos expéditions maritimes internationales.',
-      category: 'guides',
-      author: 'Thomas Martin',
-      date: '18 décembre 2024',
-      readTime: '7 min',
-      image: '/assets/images/blog/documents.jpg',
-      tags: ['Documents', 'Export', 'Douane'],
-    },
-  ];
-
-  const filteredArticles = articles.filter((article) => {
-    const categoryMatch = selectedCategory === 'all' || article.category === selectedCategory;
-    const searchMatch =
-      searchQuery === '' ||
-      article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      article.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
-    return categoryMatch && searchMatch;
-  });
-
-  const containerVariants = {
-    hidden: { opacity: 0, y: 50 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.6,
-        staggerChildren: 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: 0.5 },
-    },
-  };
-
-  return (
-    <div className="min-h-screen bg-white">
-      <LandingHeader activePage="blog" />
-
-      {/* Hero Section */}
-      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
-          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center"
-          >
-            <motion.div
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
-            >
-              <BookOpen className="w-5 h-5 text-brand-turquoise" />
-              <span className="text-white/90 text-sm font-medium">Blog Xpeditis</span>
-            </motion.div>
-
-            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
-              Actualités & Insights
-              <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
-                du fret maritime
-              </span>
-            </h1>
-
-            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
-              Restez informé des dernières tendances du transport maritime, découvrez nos guides
-              pratiques et suivez l'actualité de Xpeditis.
-            </p>
-
-            {/* Search Bar */}
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-              transition={{ duration: 0.6, delay: 0.4 }}
-              className="max-w-xl mx-auto"
-            >
-              <div className="relative">
-                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
-                <input
-                  type="text"
-                  placeholder="Rechercher un article..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-12 pr-4 py-4 rounded-xl bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-brand-turquoise focus:outline-none"
-                />
-              </div>
-            </motion.div>
-          </motion.div>
-        </div>
-
-        {/* Wave */}
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
-            <path
-              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
-              fill="white"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* Categories */}
-      <section ref={categoriesRef} className="py-8 border-b border-gray-200">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={isCategoriesInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.6 }}
-          className="max-w-7xl mx-auto px-6 lg:px-8"
-        >
-          <div className="flex flex-wrap items-center justify-center gap-4">
-            {categories.map((category) => {
-              const IconComponent = category.icon;
-              const isActive = selectedCategory === category.value;
-              return (
-                <button
-                  key={category.value}
-                  onClick={() => setSelectedCategory(category.value)}
-                  className={`flex items-center space-x-2 px-4 py-2 rounded-full transition-all ${
-                    isActive
-                      ? 'bg-brand-turquoise text-white'
-                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-                  }`}
-                >
-                  <IconComponent className="w-4 h-4" />
-                  <span className="font-medium">{category.label}</span>
-                </button>
-              );
-            })}
-          </div>
-        </motion.div>
-      </section>
-
-      {/* Featured Article */}
-      <section className="py-16">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <Link href={`/blog/${featuredArticle.id}`}>
-              <div className="relative bg-gradient-to-br from-brand-navy to-brand-navy/90 rounded-3xl overflow-hidden group cursor-pointer">
-                <div className="absolute inset-0 bg-gradient-to-r from-brand-navy via-brand-navy/80 to-transparent z-10" />
-                <div className="absolute right-0 top-0 bottom-0 w-1/2 bg-brand-turquoise/20 flex items-center justify-center">
-                  <Anchor className="w-48 h-48 text-white/10" />
-                </div>
-
-                <div className="relative z-20 p-8 lg:p-12">
-                  <div className="max-w-2xl">
-                    <div className="flex items-center space-x-2 mb-4">
-                      <span className="px-3 py-1 bg-brand-turquoise text-white text-sm font-medium rounded-full">
-                        À la une
-                      </span>
-                      <span className="px-3 py-1 bg-white/20 text-white text-sm font-medium rounded-full">
-                        {categories.find((c) => c.value === featuredArticle.category)?.label}
-                      </span>
-                    </div>
-
-                    <h2 className="text-3xl lg:text-4xl font-bold text-white mb-4 group-hover:text-brand-turquoise transition-colors">
-                      {featuredArticle.title}
-                    </h2>
-
-                    <p className="text-lg text-white/80 mb-6">{featuredArticle.excerpt}</p>
-
-                    <div className="flex items-center space-x-6 text-white/60 text-sm">
-                      <div className="flex items-center space-x-2">
-                        <User className="w-4 h-4" />
-                        <span>{featuredArticle.author}</span>
-                      </div>
-                      <div className="flex items-center space-x-2">
-                        <Calendar className="w-4 h-4" />
-                        <span>{featuredArticle.date}</span>
-                      </div>
-                      <div className="flex items-center space-x-2">
-                        <Clock className="w-4 h-4" />
-                        <span>{featuredArticle.readTime}</span>
-                      </div>
-                    </div>
-
-                    <div className="flex items-center space-x-2 mt-6 text-brand-turquoise font-medium opacity-0 group-hover:opacity-100 transition-opacity">
-                      <span>Lire l'article</span>
-                      <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Link>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Articles Grid */}
-      <section ref={articlesRef} className="py-16 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isArticlesInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="flex items-center justify-between mb-12"
-          >
-            <h2 className="text-3xl font-bold text-brand-navy">Tous les articles</h2>
-            <span className="text-gray-500">{filteredArticles.length} articles</span>
-          </motion.div>
-
-          {filteredArticles.length === 0 ? (
-            <div className="text-center py-12">
-              <Search className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-              <h3 className="text-xl font-medium text-gray-600">Aucun article trouvé</h3>
-              <p className="text-gray-500">Essayez de modifier vos filtres ou votre recherche</p>
-            </div>
-          ) : (
-            <motion.div
-              variants={containerVariants}
-              initial="hidden"
-              animate={isArticlesInView ? 'visible' : 'hidden'}
-              className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
-            >
-              {filteredArticles.map((article) => (
-                <motion.div key={article.id} variants={itemVariants}>
-                  <Link href={`/blog/${article.id}`}>
-                    <div className="bg-white rounded-2xl shadow-lg overflow-hidden group hover:shadow-xl transition-all h-full flex flex-col">
-                      <div className="aspect-video bg-gradient-to-br from-brand-navy/10 to-brand-turquoise/10 flex items-center justify-center relative">
-                        <Ship className="w-16 h-16 text-brand-navy/20" />
-                        <div className="absolute top-4 left-4">
-                          <span className="px-3 py-1 bg-white/90 text-brand-navy text-xs font-medium rounded-full">
-                            {categories.find((c) => c.value === article.category)?.label}
-                          </span>
-                        </div>
-                      </div>
-
-                      <div className="p-6 flex-1 flex flex-col">
-                        <h3 className="text-xl font-bold text-brand-navy mb-3 group-hover:text-brand-turquoise transition-colors line-clamp-2">
-                          {article.title}
-                        </h3>
-
-                        <p className="text-gray-600 mb-4 line-clamp-2 flex-1">{article.excerpt}</p>
-
-                        <div className="flex flex-wrap gap-2 mb-4">
-                          {article.tags.map((tag) => (
-                            <span
-                              key={tag}
-                              className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full"
-                            >
-                              {tag}
-                            </span>
-                          ))}
-                        </div>
-
-                        <div className="flex items-center justify-between text-sm text-gray-500 pt-4 border-t border-gray-100">
-                          <div className="flex items-center space-x-2">
-                            <div className="w-8 h-8 bg-brand-turquoise/10 rounded-full flex items-center justify-center">
-                              <User className="w-4 h-4 text-brand-turquoise" />
-                            </div>
-                            <span>{article.author}</span>
-                          </div>
-                          <div className="flex items-center space-x-4">
-                            <span>{article.date}</span>
-                            <span className="flex items-center space-x-1">
-                              <Clock className="w-4 h-4" />
-                              <span>{article.readTime}</span>
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </Link>
-                </motion.div>
-              ))}
-            </motion.div>
-          )}
-
-          {/* Load More */}
-          {filteredArticles.length > 0 && (
-            <motion.div
-              initial={{ opacity: 0 }}
-              whileInView={{ opacity: 1 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className="text-center mt-12"
-            >
-              <button className="px-8 py-4 bg-white border-2 border-brand-turquoise text-brand-turquoise rounded-lg hover:bg-brand-turquoise hover:text-white transition-all font-semibold">
-                Charger plus d'articles
-              </button>
-            </motion.div>
-          )}
-        </div>
-      </section>
-
-      {/* Newsletter Section */}
-      <section className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-4xl font-bold text-white mb-6">
-              Restez informé
-            </h2>
-            <p className="text-xl text-white/80 mb-10">
-              Abonnez-vous à notre newsletter pour recevoir les derniers articles et actualités
-              du fret maritime directement dans votre boîte mail.
-            </p>
-            <form className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
-              <input
-                type="email"
-                placeholder="votre@email.com"
-                className="w-full sm:w-96 px-6 py-4 rounded-lg bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-brand-turquoise focus:outline-none"
-              />
-              <button
-                type="submit"
-                className="w-full sm:w-auto px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-semibold flex items-center justify-center space-x-2"
-              >
-                <span>S'abonner</span>
-                <ArrowRight className="w-5 h-5" />
-              </button>
-            </form>
-            <p className="text-white/50 text-sm mt-4">
-              En vous inscrivant, vous acceptez notre politique de confidentialité. Désabonnement possible à tout moment.
-            </p>
-          </motion.div>
-        </div>
-      </section>
-
-      <LandingFooter />
-    </div>
-  );
-}
+'use client';
+
+import { useState, useRef } from 'react';
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/navigation';
+import { motion, useInView } from 'framer-motion';
+import {
+  Ship,
+  BookOpen,
+  Calendar,
+  Clock,
+  User,
+  ArrowRight,
+  Search,
+  TrendingUp,
+  Globe,
+  FileText,
+  Anchor,
+  type LucideIcon,
+} from 'lucide-react';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+
+type CategoryKey = 'all' | 'industry' | 'technology' | 'guides' | 'news';
+type ArticleKey = 'incoterms' | 'costs' | 'ports' | 'funding' | 'green' | 'api' | 'documents';
+
+const CATEGORIES: { key: CategoryKey; icon: LucideIcon }[] = [
+  { key: 'all', icon: BookOpen },
+  { key: 'industry', icon: Ship },
+  { key: 'technology', icon: TrendingUp },
+  { key: 'guides', icon: FileText },
+  { key: 'news', icon: Globe },
+];
+
+const ARTICLES: { id: number; key: ArticleKey; category: Exclude<CategoryKey, 'all'>; tags: string[] }[] = [
+  { id: 2, key: 'incoterms', category: 'guides', tags: ['Incoterms', 'Guide', 'Commerce'] },
+  { id: 3, key: 'costs', category: 'guides', tags: ['Optimisation', 'Costs', 'Strategy'] },
+  { id: 4, key: 'ports', category: 'industry', tags: ['Ports', 'Europe', 'Stats'] },
+  { id: 5, key: 'funding', category: 'news', tags: ['Funding', 'Growth', 'Xpeditis'] },
+  { id: 6, key: 'green', category: 'industry', tags: ['Environment', 'Decarbonization', 'Sustainability'] },
+  { id: 7, key: 'api', category: 'technology', tags: ['API', 'Integration', 'Technical'] },
+  { id: 8, key: 'documents', category: 'guides', tags: ['Documents', 'Export', 'Customs'] },
+];
+
+export default function BlogPage() {
+  const t = useTranslations('marketing.blog');
+  const [selectedCategory, setSelectedCategory] = useState<CategoryKey>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const heroRef = useRef(null);
+  const articlesRef = useRef(null);
+  const categoriesRef = useRef(null);
+
+  const isHeroInView = useInView(heroRef, { once: true });
+  const isArticlesInView = useInView(articlesRef, { once: true });
+  const isCategoriesInView = useInView(categoriesRef, { once: true });
+
+  const filteredArticles = ARTICLES.filter((article) => {
+    const categoryMatch = selectedCategory === 'all' || article.category === selectedCategory;
+    const title = t(`articles.${article.key}.title` as any);
+    const excerpt = t(`articles.${article.key}.excerpt` as any);
+    const searchMatch =
+      searchQuery === '' ||
+      title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      excerpt.toLowerCase().includes(searchQuery.toLowerCase());
+    return categoryMatch && searchMatch;
+  });
+
+  const containerVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader activePage="blog" />
+
+      {/* Hero Section */}
+      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
+          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
+        </div>
+
+        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center"
+          >
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
+            >
+              <BookOpen className="w-5 h-5 text-brand-turquoise" />
+              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
+            </motion.div>
+
+            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+              {t('title1')}
+              <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
+                {t('title2')}
+              </span>
+            </h1>
+
+            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
+              {t('intro')}
+            </p>
+
+            {/* Search Bar */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.6, delay: 0.4 }}
+              className="max-w-xl mx-auto"
+            >
+              <div className="relative">
+                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <input
+                  type="text"
+                  placeholder={t('searchPlaceholder')}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full pl-12 pr-4 py-4 rounded-xl bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-brand-turquoise focus:outline-none"
+                />
+              </div>
+            </motion.div>
+          </motion.div>
+        </div>
+
+        {/* Wave */}
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
+            <path
+              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </section>
+
+      {/* Categories */}
+      <section ref={categoriesRef} className="py-8 border-b border-gray-200">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isCategoriesInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6 }}
+          className="max-w-7xl mx-auto px-6 lg:px-8"
+        >
+          <div className="flex flex-wrap items-center justify-center gap-4">
+            {CATEGORIES.map((category) => {
+              const IconComponent = category.icon;
+              const isActive = selectedCategory === category.key;
+              return (
+                <button
+                  key={category.key}
+                  onClick={() => setSelectedCategory(category.key)}
+                  className={`flex items-center space-x-2 px-4 py-2 rounded-full transition-all ${
+                    isActive
+                      ? 'bg-brand-turquoise text-white'
+                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                  }`}
+                >
+                  <IconComponent className="w-4 h-4" />
+                  <span className="font-medium">{t(`categories.${category.key}`)}</span>
+                </button>
+              );
+            })}
+          </div>
+        </motion.div>
+      </section>
+
+      {/* Featured Article */}
+      <section className="py-16">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+          >
+            <Link href="/blog/1">
+              <div className="relative bg-gradient-to-br from-brand-navy to-brand-navy/90 rounded-3xl overflow-hidden group cursor-pointer">
+                <div className="absolute inset-0 bg-gradient-to-r from-brand-navy via-brand-navy/80 to-transparent z-10" />
+                <div className="absolute right-0 top-0 bottom-0 w-1/2 bg-brand-turquoise/20 flex items-center justify-center">
+                  <Anchor className="w-48 h-48 text-white/10" />
+                </div>
+
+                <div className="relative z-20 p-8 lg:p-12">
+                  <div className="max-w-2xl">
+                    <div className="flex items-center space-x-2 mb-4">
+                      <span className="px-3 py-1 bg-brand-turquoise text-white text-sm font-medium rounded-full">
+                        {t('featuredBadge')}
+                      </span>
+                      <span className="px-3 py-1 bg-white/20 text-white text-sm font-medium rounded-full">
+                        {t('categories.technology')}
+                      </span>
+                    </div>
+
+                    <h2 className="text-3xl lg:text-4xl font-bold text-white mb-4 group-hover:text-brand-turquoise transition-colors">
+                      {t('featured.title')}
+                    </h2>
+
+                    <p className="text-lg text-white/80 mb-6">{t('featured.excerpt')}</p>
+
+                    <div className="flex items-center space-x-6 text-white/60 text-sm">
+                      <div className="flex items-center space-x-2">
+                        <User className="w-4 h-4" />
+                        <span>{t('featured.author')}</span>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <Calendar className="w-4 h-4" />
+                        <span>{t('featured.date')}</span>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <Clock className="w-4 h-4" />
+                        <span>{t('featured.readTime')}</span>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center space-x-2 mt-6 text-brand-turquoise font-medium opacity-0 group-hover:opacity-100 transition-opacity">
+                      <span>{t('readArticle')}</span>
+                      <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Articles Grid */}
+      <section ref={articlesRef} className="py-16 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isArticlesInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="flex items-center justify-between mb-12"
+          >
+            <h2 className="text-3xl font-bold text-brand-navy">{t('allTitle')}</h2>
+            <span className="text-gray-500">{t('articlesCount', { count: filteredArticles.length })}</span>
+          </motion.div>
+
+          {filteredArticles.length === 0 ? (
+            <div className="text-center py-12">
+              <Search className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+              <h3 className="text-xl font-medium text-gray-600">{t('noResults.title')}</h3>
+              <p className="text-gray-500">{t('noResults.body')}</p>
+            </div>
+          ) : (
+            <motion.div
+              variants={containerVariants}
+              initial="hidden"
+              animate={isArticlesInView ? 'visible' : 'hidden'}
+              className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+            >
+              {filteredArticles.map((article) => (
+                <motion.div key={article.id} variants={itemVariants}>
+                  <Link href={`/blog/${article.id}`}>
+                    <div className="bg-white rounded-2xl shadow-lg overflow-hidden group hover:shadow-xl transition-all h-full flex flex-col">
+                      <div className="aspect-video bg-gradient-to-br from-brand-navy/10 to-brand-turquoise/10 flex items-center justify-center relative">
+                        <Ship className="w-16 h-16 text-brand-navy/20" />
+                        <div className="absolute top-4 left-4">
+                          <span className="px-3 py-1 bg-white/90 text-brand-navy text-xs font-medium rounded-full">
+                            {t(`categories.${article.category}`)}
+                          </span>
+                        </div>
+                      </div>
+
+                      <div className="p-6 flex-1 flex flex-col">
+                        <h3 className="text-xl font-bold text-brand-navy mb-3 group-hover:text-brand-turquoise transition-colors line-clamp-2">
+                          {t(`articles.${article.key}.title` as any)}
+                        </h3>
+
+                        <p className="text-gray-600 mb-4 line-clamp-2 flex-1">
+                          {t(`articles.${article.key}.excerpt` as any)}
+                        </p>
+
+                        <div className="flex flex-wrap gap-2 mb-4">
+                          {article.tags.map((tag) => (
+                            <span
+                              key={tag}
+                              className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full"
+                            >
+                              {tag}
+                            </span>
+                          ))}
+                        </div>
+
+                        <div className="flex items-center justify-between text-sm text-gray-500 pt-4 border-t border-gray-100">
+                          <div className="flex items-center space-x-2">
+                            <div className="w-8 h-8 bg-brand-turquoise/10 rounded-full flex items-center justify-center">
+                              <User className="w-4 h-4 text-brand-turquoise" />
+                            </div>
+                            <span>{t(`articles.${article.key}.author` as any)}</span>
+                          </div>
+                          <div className="flex items-center space-x-4">
+                            <span>{t(`articles.${article.key}.date` as any)}</span>
+                            <span className="flex items-center space-x-1">
+                              <Clock className="w-4 h-4" />
+                              <span>{t(`articles.${article.key}.readTime` as any)}</span>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </Link>
+                </motion.div>
+              ))}
+            </motion.div>
+          )}
+
+          {/* Load More */}
+          {filteredArticles.length > 0 && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              whileInView={{ opacity: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="text-center mt-12"
+            >
+              <button className="px-8 py-4 bg-white border-2 border-brand-turquoise text-brand-turquoise rounded-lg hover:bg-brand-turquoise hover:text-white transition-all font-semibold">
+                {t('loadMore')}
+              </button>
+            </motion.div>
+          )}
+        </div>
+      </section>
+
+      {/* Newsletter Section */}
+      <section className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+          >
+            <h2 className="text-4xl font-bold text-white mb-6">
+              {t('newsletter.title')}
+            </h2>
+            <p className="text-xl text-white/80 mb-10">
+              {t('newsletter.body')}
+            </p>
+            <form className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+              <input
+                type="email"
+                placeholder={t('newsletter.emailPlaceholder')}
+                className="w-full sm:w-96 px-6 py-4 rounded-lg bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-brand-turquoise focus:outline-none"
+              />
+              <button
+                type="submit"
+                className="w-full sm:w-auto px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-semibold flex items-center justify-center space-x-2"
+              >
+                <span>{t('newsletter.subscribe')}</span>
+                <ArrowRight className="w-5 h-5" />
+              </button>
+            </form>
+            <p className="text-white/50 text-sm mt-4">
+              {t('newsletter.disclaimer')}
+            </p>
+          </motion.div>
+        </div>
+      </section>
+
+      <LandingFooter />
+    </div>
+  );
+}
diff --git a/apps/frontend/app/booking/confirm/[token]/page.tsx b/apps/frontend/app/[locale]/booking/confirm/[token]/page.tsx
similarity index 81%
rename from apps/frontend/app/booking/confirm/[token]/page.tsx
rename to apps/frontend/app/[locale]/booking/confirm/[token]/page.tsx
index e6c5ac9..54be80d 100644
--- a/apps/frontend/app/booking/confirm/[token]/page.tsx
+++ b/apps/frontend/app/[locale]/booking/confirm/[token]/page.tsx
@@ -8,21 +8,21 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { useParams, useRouter } from 'next/navigation';
+import { useParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
 import { acceptCsvBooking, type CsvBookingResponse } from '@/lib/api/bookings';
 
 export default function BookingConfirmPage() {
   const params = useParams();
-  const router = useRouter();
   const token = params.token as string;
+  const t = useTranslations('bookingPortal.confirm');
+  const tCommon = useTranslations('bookingPortal.common');
 
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [booking, setBooking] = useState<CsvBookingResponse | null>(null);
-  const [isAccepting, setIsAccepting] = useState(false);
 
   const handleAccept = useCallback(async () => {
-    setIsAccepting(true);
     setError(null);
 
     try {
@@ -33,31 +33,29 @@ export default function BookingConfirmPage() {
       if (err instanceof Error) {
         setError(err.message);
       } else {
-        setError('Une erreur est survenue lors de l\'acceptation');
+        setError(t('errorGeneric'));
       }
     } finally {
       setIsLoading(false);
-      setIsAccepting(false);
     }
-  }, [token]);
+  }, [token, t]);
 
   useEffect(() => {
     if (!token) {
-      setError('Token de confirmation invalide');
+      setError(t('tokenInvalid'));
       setIsLoading(false);
       return;
     }
 
-    // Auto-accept the booking
     handleAccept();
-  }, [token, handleAccept]);
+  }, [token, handleAccept, t]);
 
   if (isLoading) {
     return (
       <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
         <div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full text-center">
           <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600 mx-auto mb-4"></div>
-          <p className="text-gray-600">Confirmation en cours...</p>
+          <p className="text-gray-600">{t('loading')}</p>
         </div>
       </div>
     );
@@ -84,24 +82,24 @@ export default function BookingConfirmPage() {
               </svg>
             </div>
             <h1 className="text-2xl font-bold text-gray-900 mb-2">
-              Erreur de confirmation
+              {t('errorTitle')}
             </h1>
             <p className="text-gray-600">{error}</p>
           </div>
 
           <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
             <p className="text-sm text-red-800">
-              <strong>Raisons possibles :</strong>
+              <strong>{t('errorReasonsTitle')}</strong>
             </p>
             <ul className="text-sm text-red-700 mt-2 space-y-1 list-disc list-inside">
-              <li>Le lien a expiré</li>
-              <li>La demande a déjà été acceptée ou refusée</li>
-              <li>Le token de confirmation est invalide</li>
+              <li>{t('errorReason1')}</li>
+              <li>{t('errorReason2')}</li>
+              <li>{t('errorReason3')}</li>
             </ul>
           </div>
 
           <p className="text-sm text-gray-500 text-center">
-            Si vous pensez qu'il s'agit d'une erreur, veuillez contacter le client directement.
+            {t('errorContact')}
           </p>
         </div>
       </div>
@@ -133,67 +131,68 @@ export default function BookingConfirmPage() {
                 />
               </svg>
             </div>
-            {/* Animated rings */}
             <div className="absolute inset-0 rounded-full border-4 border-green-200 animate-ping opacity-20"></div>
           </div>
 
           <h1 className="text-3xl font-bold text-gray-900 mb-3">
-            Demande acceptée !
+            {t('successTitle')}
           </h1>
           <p className="text-lg text-gray-600 mb-2">
-            Merci d'avoir accepté cette demande de transport.
+            {t('successHeadline')}
           </p>
           <p className="text-gray-500">
-            Le client a été notifié par email.
+            {t('successBody')}
           </p>
         </div>
 
         {/* Booking Summary */}
         <div className="bg-gray-50 rounded-xl p-6 mb-6">
           <h2 className="text-lg font-semibold text-gray-900 mb-4">
-            Récapitulatif de la réservation
+            {t('summaryTitle')}
           </h2>
 
           <div className="space-y-3">
             <div className="flex justify-between py-2 border-b border-gray-200">
-              <span className="text-gray-600">ID Réservation</span>
+              <span className="text-gray-600">{t('labels.bookingId')}</span>
               <span className="font-semibold text-gray-900">{booking.bookingId}</span>
             </div>
 
             <div className="flex justify-between py-2 border-b border-gray-200">
-              <span className="text-gray-600">Trajet</span>
+              <span className="text-gray-600">{t('labels.route')}</span>
               <span className="font-semibold text-gray-900">
                 {booking.origin} → {booking.destination}
               </span>
             </div>
 
             <div className="flex justify-between py-2 border-b border-gray-200">
-              <span className="text-gray-600">Volume</span>
+              <span className="text-gray-600">{t('labels.volume')}</span>
               <span className="font-semibold text-gray-900">{booking.volumeCBM} CBM</span>
             </div>
 
             <div className="flex justify-between py-2 border-b border-gray-200">
-              <span className="text-gray-600">Poids</span>
+              <span className="text-gray-600">{t('labels.weight')}</span>
               <span className="font-semibold text-gray-900">{booking.weightKG} kg</span>
             </div>
 
             <div className="flex justify-between py-2 border-b border-gray-200">
-              <span className="text-gray-600">Palettes</span>
+              <span className="text-gray-600">{t('labels.pallets')}</span>
               <span className="font-semibold text-gray-900">{booking.palletCount}</span>
             </div>
 
             <div className="flex justify-between py-2 border-b border-gray-200">
-              <span className="text-gray-600">Type de conteneur</span>
+              <span className="text-gray-600">{t('labels.containerType')}</span>
               <span className="font-semibold text-gray-900">{booking.containerType}</span>
             </div>
 
             <div className="flex justify-between py-2 border-b border-gray-200">
-              <span className="text-gray-600">Temps de transit</span>
-              <span className="font-semibold text-gray-900">{booking.transitDays} jours</span>
+              <span className="text-gray-600">{t('labels.transitDays')}</span>
+              <span className="font-semibold text-gray-900">
+                {t('transitDaysValue', { count: booking.transitDays })}
+              </span>
             </div>
 
             <div className="flex justify-between py-3">
-              <span className="text-gray-600 text-lg">Prix</span>
+              <span className="text-gray-600 text-lg">{t('labels.price')}</span>
               <div className="text-right">
                 <div className="font-bold text-xl text-green-600">
                   {booking.primaryCurrency === 'USD'
@@ -213,7 +212,7 @@ export default function BookingConfirmPage() {
 
           {booking.notes && (
             <div className="mt-4 pt-4 border-t border-gray-200">
-              <p className="text-sm text-gray-600 mb-1">Notes :</p>
+              <p className="text-sm text-gray-600 mb-1">{t('labels.notes')}</p>
               <p className="text-gray-800">{booking.notes}</p>
             </div>
           )}
@@ -225,19 +224,19 @@ export default function BookingConfirmPage() {
             <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
-            Prochaines étapes
+            {t('nextStepsTitle')}
           </h3>
           <ul className="text-sm text-blue-800 space-y-1 list-disc list-inside">
-            <li>Le client va finaliser les détails du conteneur</li>
-            <li>Vous recevrez un email avec les documents nécessaires</li>
-            <li>Le paiement sera traité selon vos conditions habituelles</li>
+            <li>{t('nextStep1')}</li>
+            <li>{t('nextStep2')}</li>
+            <li>{t('nextStep3')}</li>
           </ul>
         </div>
 
         {/* Documents Section */}
         {booking.documents && booking.documents.length > 0 && (
           <div className="bg-gray-50 rounded-lg p-4 mb-6">
-            <h3 className="font-semibold text-gray-900 mb-3">Documents fournis</h3>
+            <h3 className="font-semibold text-gray-900 mb-3">{t('labels.documents')}</h3>
             <div className="space-y-2">
               {booking.documents.map((doc, index) => (
                 <div key={index} className="flex items-center justify-between p-3 bg-white rounded border border-gray-200">
@@ -256,7 +255,7 @@ export default function BookingConfirmPage() {
                     rel="noopener noreferrer"
                     className="text-blue-600 hover:text-blue-700 text-sm font-medium"
                   >
-                    Télécharger
+                    {t('labels.download')}
                   </a>
                 </div>
               ))}
@@ -266,7 +265,7 @@ export default function BookingConfirmPage() {
 
         {/* Contact Info */}
         <div className="text-center text-sm text-gray-500">
-          <p>Pour toute question, contactez-nous à</p>
+          <p>{tCommon('supportPrompt')}</p>
           <a href="mailto:support@xpeditis.com" className="text-blue-600 hover:underline">
             support@xpeditis.com
           </a>
diff --git a/apps/frontend/app/booking/reject/[token]/page.tsx b/apps/frontend/app/[locale]/booking/reject/[token]/page.tsx
similarity index 82%
rename from apps/frontend/app/booking/reject/[token]/page.tsx
rename to apps/frontend/app/[locale]/booking/reject/[token]/page.tsx
index 673195f..f4b8a2a 100644
--- a/apps/frontend/app/booking/reject/[token]/page.tsx
+++ b/apps/frontend/app/[locale]/booking/reject/[token]/page.tsx
@@ -9,11 +9,14 @@
 
 import { useState, useEffect } from 'react';
 import { useParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
 import { rejectCsvBooking, type CsvBookingResponse } from '@/lib/api/bookings';
 
 export default function BookingRejectPage() {
   const params = useParams();
   const token = params.token as string;
+  const t = useTranslations('bookingPortal.reject');
+  const tCommon = useTranslations('bookingPortal.common');
 
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -25,14 +28,13 @@ export default function BookingRejectPage() {
 
   useEffect(() => {
     if (!token) {
-      setError('Token de refus invalide');
+      setError(t('tokenInvalid'));
       setIsLoading(false);
       return;
     }
 
-    // Just validate the token exists, don't auto-reject
     setIsLoading(false);
-  }, [token]);
+  }, [token, t]);
 
   const handleReject = async () => {
     if (!token) return;
@@ -49,7 +51,7 @@ export default function BookingRejectPage() {
       if (err instanceof Error) {
         setError(err.message);
       } else {
-        setError('Une erreur est survenue lors du refus');
+        setError(t('errorGeneric'));
       }
     } finally {
       setIsRejecting(false);
@@ -61,7 +63,7 @@ export default function BookingRejectPage() {
       <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 flex items-center justify-center p-4">
         <div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full text-center">
           <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-gray-600 mx-auto mb-4"></div>
-          <p className="text-gray-600">Chargement...</p>
+          <p className="text-gray-600">{t('loading')}</p>
         </div>
       </div>
     );
@@ -88,36 +90,34 @@ export default function BookingRejectPage() {
               </svg>
             </div>
             <h1 className="text-2xl font-bold text-gray-900 mb-2">
-              Erreur de refus
+              {t('errorTitle')}
             </h1>
             <p className="text-gray-600">{error}</p>
           </div>
 
           <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
             <p className="text-sm text-red-800">
-              <strong>Raisons possibles :</strong>
+              <strong>{t('errorReasonsTitle')}</strong>
             </p>
             <ul className="text-sm text-red-700 mt-2 space-y-1 list-disc list-inside">
-              <li>Le lien a expiré</li>
-              <li>La demande a déjà été acceptée ou refusée</li>
-              <li>Le token est invalide</li>
+              <li>{t('errorReason1')}</li>
+              <li>{t('errorReason2')}</li>
+              <li>{t('errorReason3')}</li>
             </ul>
           </div>
 
           <p className="text-sm text-gray-500 text-center">
-            Si vous pensez qu'il s'agit d'une erreur, veuillez contacter le client directement.
+            {t('errorContact')}
           </p>
         </div>
       </div>
     );
   }
 
-  // After successful rejection
   if (hasRejected && booking) {
     return (
       <div className="min-h-screen bg-gradient-to-br from-red-50 via-white to-red-50 flex items-center justify-center p-4">
         <div className="bg-white rounded-2xl shadow-xl p-8 max-w-2xl w-full">
-          {/* Rejection Icon with Animation */}
           <div className="text-center mb-8">
             <div className="relative inline-block">
               <div className="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4 animate-scale-in">
@@ -138,47 +138,46 @@ export default function BookingRejectPage() {
             </div>
 
             <h1 className="text-3xl font-bold text-gray-900 mb-3">
-              Demande refusée
+              {t('rejectedTitle')}
             </h1>
             <p className="text-lg text-gray-600 mb-2">
-              Vous avez refusé cette demande de transport.
+              {t('rejectedHeadline')}
             </p>
             <p className="text-gray-500">
-              Le client a été notifié par email.
+              {t('rejectedBody')}
             </p>
           </div>
 
-          {/* Booking Summary */}
           <div className="bg-gray-50 rounded-xl p-6 mb-6">
             <h2 className="text-lg font-semibold text-gray-900 mb-4">
-              Récapitulatif de la demande refusée
+              {t('summaryTitle')}
             </h2>
 
             <div className="space-y-3">
               <div className="flex justify-between py-2 border-b border-gray-200">
-                <span className="text-gray-600">ID Réservation</span>
+                <span className="text-gray-600">{t('labels.bookingId')}</span>
                 <span className="font-semibold text-gray-900">{booking.bookingId}</span>
               </div>
 
               <div className="flex justify-between py-2 border-b border-gray-200">
-                <span className="text-gray-600">Trajet</span>
+                <span className="text-gray-600">{t('labels.route')}</span>
                 <span className="font-semibold text-gray-900">
                   {booking.origin} → {booking.destination}
                 </span>
               </div>
 
               <div className="flex justify-between py-2 border-b border-gray-200">
-                <span className="text-gray-600">Volume</span>
+                <span className="text-gray-600">{t('labels.volume')}</span>
                 <span className="font-semibold text-gray-900">{booking.volumeCBM} CBM</span>
               </div>
 
               <div className="flex justify-between py-2 border-b border-gray-200">
-                <span className="text-gray-600">Poids</span>
+                <span className="text-gray-600">{t('labels.weight')}</span>
                 <span className="font-semibold text-gray-900">{booking.weightKG} kg</span>
               </div>
 
               <div className="flex justify-between py-2">
-                <span className="text-gray-600">Prix proposé</span>
+                <span className="text-gray-600">{t('labels.proposedPrice')}</span>
                 <span className="font-semibold text-gray-900">
                   {booking.primaryCurrency === 'USD'
                     ? `$${booking.priceUSD.toLocaleString()}`
@@ -190,7 +189,7 @@ export default function BookingRejectPage() {
 
             {reason && (
               <div className="mt-4 pt-4 border-t border-gray-200">
-                <p className="text-sm text-gray-600 mb-1">Raison du refus :</p>
+                <p className="text-sm text-gray-600 mb-1">{t('labels.rejectionReason')}</p>
                 <p className="text-gray-800 bg-white p-3 rounded border border-gray-200">
                   {reason}
                 </p>
@@ -198,22 +197,20 @@ export default function BookingRejectPage() {
             )}
           </div>
 
-          {/* Info Message */}
           <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
             <h3 className="font-semibold text-blue-900 mb-2 flex items-center">
               <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
-              Information
+              {t('infoTitle')}
             </h3>
             <p className="text-sm text-blue-800">
-              Le client pourra soumettre une nouvelle demande avec des conditions différentes si nécessaire.
+              {t('infoBody')}
             </p>
           </div>
 
-          {/* Contact Info */}
           <div className="text-center text-sm text-gray-500">
-            <p>Pour toute question, contactez-nous à</p>
+            <p>{tCommon('supportPrompt')}</p>
             <a href="mailto:support@xpeditis.com" className="text-blue-600 hover:underline">
               support@xpeditis.com
             </a>
@@ -243,11 +240,9 @@ export default function BookingRejectPage() {
     );
   }
 
-  // Initial rejection form
   return (
     <div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-orange-50 flex items-center justify-center p-4">
       <div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full">
-        {/* Warning Icon */}
         <div className="text-center mb-6">
           <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
             <svg
@@ -265,14 +260,13 @@ export default function BookingRejectPage() {
             </svg>
           </div>
           <h1 className="text-2xl font-bold text-gray-900 mb-2">
-            Refuser cette demande
+            {t('formTitle')}
           </h1>
           <p className="text-gray-600">
-            Vous êtes sur le point de refuser cette demande de transport.
+            {t('formIntro')}
           </p>
         </div>
 
-        {/* Optional Reason Field */}
         <div className="mb-6">
           {!showReasonField ? (
             <button
@@ -280,7 +274,7 @@ export default function BookingRejectPage() {
               className="w-full text-left px-4 py-3 bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded-lg transition-colors"
             >
               <div className="flex items-center justify-between">
-                <span className="text-gray-700">Ajouter une raison (optionnel)</span>
+                <span className="text-gray-700">{t('addReason')}</span>
                 <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                 </svg>
@@ -289,20 +283,20 @@ export default function BookingRejectPage() {
           ) : (
             <div>
               <label htmlFor="reason" className="block text-sm font-medium text-gray-700 mb-2">
-                Raison du refus (optionnel)
+                {t('reasonLabel')}
               </label>
               <textarea
                 id="reason"
                 rows={4}
                 value={reason}
                 onChange={(e) => setReason(e.target.value)}
-                placeholder="Ex: Prix trop élevé, délais trop courts, itinéraire non disponible..."
+                placeholder={t('reasonPlaceholder')}
                 className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent resize-none"
                 maxLength={500}
               />
               <div className="mt-1 flex items-center justify-between">
                 <p className="text-xs text-gray-500">
-                  Cette information sera communiquée au client
+                  {t('reasonHint')}
                 </p>
                 <span className="text-xs text-gray-400">
                   {reason.length}/500
@@ -312,14 +306,12 @@ export default function BookingRejectPage() {
           )}
         </div>
 
-        {/* Warning Message */}
         <div className="bg-orange-50 border border-orange-200 rounded-lg p-4 mb-6">
           <p className="text-sm text-orange-800">
-            <strong>Attention :</strong> Cette action est irréversible. Le client sera immédiatement notifié par email de votre refus.
+            <strong>{t('warningTitle')}</strong> {t('warningBody')}
           </p>
         </div>
 
-        {/* Action Buttons */}
         <div className="space-y-3">
           <button
             onClick={handleReject}
@@ -332,14 +324,14 @@ export default function BookingRejectPage() {
                   <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                   <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                 </svg>
-                Refus en cours...
+                {t('submitting')}
               </>
             ) : (
               <>
                 <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                 </svg>
-                Confirmer le refus
+                {t('submit')}
               </>
             )}
           </button>
@@ -348,13 +340,12 @@ export default function BookingRejectPage() {
             href="mailto:support@xpeditis.com"
             className="block w-full px-6 py-3 bg-white hover:bg-gray-50 border border-gray-300 text-gray-700 font-semibold rounded-lg transition-colors text-center"
           >
-            Contacter le support
+            {tCommon('contactSupport')}
           </a>
         </div>
 
-        {/* Help Text */}
         <p className="mt-6 text-xs text-center text-gray-500">
-          Si vous avez des questions avant de refuser, contactez-nous par email.
+          {t('helpText')}
         </p>
       </div>
     </div>
diff --git a/apps/frontend/app/careers/page.tsx b/apps/frontend/app/[locale]/careers/page.tsx
similarity index 65%
rename from apps/frontend/app/careers/page.tsx
rename to apps/frontend/app/[locale]/careers/page.tsx
index d848413..1af1e75 100644
--- a/apps/frontend/app/careers/page.tsx
+++ b/apps/frontend/app/[locale]/careers/page.tsx
@@ -1,621 +1,506 @@
-'use client';
-
-import { useState, useRef } from 'react';
-import Link from 'next/link';
-import { motion, useInView, AnimatePresence } from 'framer-motion';
-import {
-  Briefcase,
-  MapPin,
-  Clock,
-  Users,
-  Heart,
-  Zap,
-  Coffee,
-  GraduationCap,
-  Plane,
-  Building2,
-  ChevronDown,
-  ChevronRight,
-  ArrowRight,
-  Search,
-  Code,
-  LineChart,
-  Headphones,
-  Megaphone,
-} from 'lucide-react';
-import { LandingHeader, LandingFooter } from '@/components/layout';
-
-export default function CareersPage() {
-  const [selectedDepartment, setSelectedDepartment] = useState('all');
-  const [selectedLocation, setSelectedLocation] = useState('all');
-  const [expandedJob, setExpandedJob] = useState<number | null>(null);
-
-  const heroRef = useRef(null);
-  const benefitsRef = useRef(null);
-  const jobsRef = useRef(null);
-  const cultureRef = useRef(null);
-
-  const isHeroInView = useInView(heroRef, { once: true });
-  const isBenefitsInView = useInView(benefitsRef, { once: true });
-  const isJobsInView = useInView(jobsRef, { once: true });
-  const isCultureInView = useInView(cultureRef, { once: true });
-
-  const benefits = [
-    {
-      icon: Heart,
-      title: 'Mutuelle Premium',
-      description: 'Couverture santé complète pour vous et votre famille',
-    },
-    {
-      icon: Plane,
-      title: 'Télétravail Flexible',
-      description: 'Travaillez d\'où vous voulez, jusqu\'à 3 jours par semaine',
-    },
-    {
-      icon: Coffee,
-      title: 'Bien-être au Travail',
-      description: 'Salle de sport, fruits frais, et événements d\'équipe',
-    },
-    {
-      icon: GraduationCap,
-      title: 'Formation Continue',
-      description: '2 000€/an de budget formation et conférences',
-    },
-    {
-      icon: Users,
-      title: 'Équipe Internationale',
-      description: 'Travaillez avec des talents de 15 nationalités',
-    },
-    {
-      icon: Zap,
-      title: 'Stock Options',
-      description: 'Participez à la croissance de l\'entreprise',
-    },
-  ];
-
-  const jobs = [
-    {
-      id: 1,
-      title: 'Senior Frontend Engineer',
-      department: 'Engineering',
-      location: 'Paris',
-      type: 'CDI',
-      remote: true,
-      salary: '65K - 85K €',
-      description: 'Rejoignez notre équipe frontend pour développer la prochaine génération de notre plateforme.',
-      requirements: [
-        '5+ ans d\'expérience en développement frontend',
-        'Maîtrise de React, TypeScript et Next.js',
-        'Expérience avec les design systems',
-        'Capacité à mentorer des développeurs juniors',
-      ],
-      icon: Code,
-    },
-    {
-      id: 2,
-      title: 'Backend Engineer (Node.js)',
-      department: 'Engineering',
-      location: 'Paris',
-      type: 'CDI',
-      remote: true,
-      salary: '55K - 75K €',
-      description: 'Construisez des APIs scalables pour connecter les transitaires aux compagnies maritimes.',
-      requirements: [
-        '3+ ans d\'expérience en Node.js/NestJS',
-        'Maîtrise de PostgreSQL et Redis',
-        'Connaissance des architectures microservices',
-        'Expérience avec Docker et Kubernetes appréciée',
-      ],
-      icon: Code,
-    },
-    {
-      id: 3,
-      title: 'Product Manager',
-      department: 'Product',
-      location: 'Paris',
-      type: 'CDI',
-      remote: true,
-      salary: '60K - 80K €',
-      description: 'Définissez la vision produit et priorisez les fonctionnalités avec notre équipe.',
-      requirements: [
-        '4+ ans d\'expérience en product management B2B',
-        'Expérience dans la logistique ou le shipping appréciée',
-        'Capacité à analyser les données et définir les KPIs',
-        'Excellentes compétences en communication',
-      ],
-      icon: LineChart,
-    },
-    {
-      id: 4,
-      title: 'Account Executive',
-      department: 'Sales',
-      location: 'Rotterdam',
-      type: 'CDI',
-      remote: false,
-      salary: '50K - 70K € + variable',
-      description: 'Développez notre portefeuille clients aux Pays-Bas et en Belgique.',
-      requirements: [
-        '3+ ans d\'expérience en vente B2B',
-        'Connaissance du secteur maritime/logistique',
-        'Maîtrise du néerlandais et de l\'anglais',
-        'Capacité à gérer des cycles de vente longs',
-      ],
-      icon: Megaphone,
-    },
-    {
-      id: 5,
-      title: 'Customer Success Manager',
-      department: 'Customer Success',
-      location: 'Paris',
-      type: 'CDI',
-      remote: true,
-      salary: '45K - 60K €',
-      description: 'Accompagnez nos clients dans l\'utilisation de la plateforme et maximisez leur satisfaction.',
-      requirements: [
-        '2+ ans d\'expérience en customer success',
-        'Expérience avec les outils CRM (HubSpot, Salesforce)',
-        'Excellent relationnel et sens du service',
-        'Capacité à former et accompagner les utilisateurs',
-      ],
-      icon: Headphones,
-    },
-    {
-      id: 6,
-      title: 'Data Analyst',
-      department: 'Data',
-      location: 'Hambourg',
-      type: 'CDI',
-      remote: true,
-      salary: '50K - 65K €',
-      description: 'Analysez les données de shipping pour optimiser notre plateforme et nos processus.',
-      requirements: [
-        '3+ ans d\'expérience en data analysis',
-        'Maîtrise de SQL, Python et des outils BI',
-        'Expérience avec le shipping/logistics appréciée',
-        'Capacité à communiquer les insights aux équipes',
-      ],
-      icon: LineChart,
-    },
-  ];
-
-  const departments = [
-    { value: 'all', label: 'Tous les départements' },
-    { value: 'Engineering', label: 'Engineering' },
-    { value: 'Product', label: 'Product' },
-    { value: 'Sales', label: 'Sales' },
-    { value: 'Customer Success', label: 'Customer Success' },
-    { value: 'Data', label: 'Data' },
-  ];
-
-  const locations = [
-    { value: 'all', label: 'Toutes les villes' },
-    { value: 'Paris', label: 'Paris' },
-    { value: 'Rotterdam', label: 'Rotterdam' },
-    { value: 'Hambourg', label: 'Hambourg' },
-  ];
-
-  const filteredJobs = jobs.filter((job) => {
-    const departmentMatch = selectedDepartment === 'all' || job.department === selectedDepartment;
-    const locationMatch = selectedLocation === 'all' || job.location === selectedLocation;
-    return departmentMatch && locationMatch;
-  });
-
-  const containerVariants = {
-    hidden: { opacity: 0, y: 50 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.6,
-        staggerChildren: 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: 0.5 },
-    },
-  };
-
-  return (
-    <div className="min-h-screen bg-white">
-      <LandingHeader activePage="careers" />
-
-      {/* Hero Section */}
-      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
-          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center"
-          >
-            <motion.div
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
-            >
-              <Briefcase className="w-5 h-5 text-brand-turquoise" />
-              <span className="text-white/90 text-sm font-medium">Rejoignez-nous</span>
-            </motion.div>
-
-            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
-              Construisons ensemble
-              <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
-                le futur du maritime
-              </span>
-            </h1>
-
-            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
-              Rejoignez une équipe passionnée qui révolutionne le fret maritime. Des défis stimulants,
-              une culture bienveillante et des opportunités de croissance uniques vous attendent.
-            </p>
-
-            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
-              <a
-                href="#jobs"
-                className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl font-semibold text-lg flex items-center space-x-2"
-              >
-                <span>Voir les offres</span>
-                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
-              </a>
-              <Link
-                href="/about"
-                className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-all font-semibold text-lg"
-              >
-                En savoir plus
-              </Link>
-            </div>
-          </motion.div>
-        </div>
-
-        {/* Wave */}
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
-            <path
-              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
-              fill="white"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* Stats Section */}
-      <section className="py-16 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
-            {[
-              { value: '50+', label: 'Employés' },
-              { value: '15', label: 'Nationalités' },
-              { value: '3', label: 'Bureaux en Europe' },
-              { value: '40%', label: 'Femmes dans la tech' },
-            ].map((stat, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
-                className="text-center"
-              >
-                <div className="text-5xl font-bold text-brand-turquoise mb-2">{stat.value}</div>
-                <div className="text-gray-600 font-medium">{stat.label}</div>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Benefits Section */}
-      <section ref={benefitsRef} className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isBenefitsInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
-              Pourquoi nous rejoindre ?
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Nous investissons dans le bien-être et le développement de nos équipes
-            </p>
-          </motion.div>
-
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isBenefitsInView ? 'visible' : 'hidden'}
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
-          >
-            {benefits.map((benefit, index) => {
-              const IconComponent = benefit.icon;
-              return (
-                <motion.div
-                  key={index}
-                  variants={itemVariants}
-                  whileHover={{ y: -5 }}
-                  className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
-                >
-                  <div className="w-14 h-14 bg-brand-turquoise/10 rounded-xl flex items-center justify-center mb-4">
-                    <IconComponent className="w-7 h-7 text-brand-turquoise" />
-                  </div>
-                  <h3 className="text-xl font-bold text-brand-navy mb-2">{benefit.title}</h3>
-                  <p className="text-gray-600">{benefit.description}</p>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Culture Section */}
-      <section ref={cultureRef} className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-            <motion.div
-              initial={{ opacity: 0, x: -50 }}
-              animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
-              transition={{ duration: 0.8 }}
-            >
-              <h2 className="text-4xl lg:text-5xl font-bold text-white mb-6">
-                Notre culture
-              </h2>
-              <p className="text-xl text-white/80 mb-8">
-                Chez Xpeditis, nous croyons que les meilleures idées viennent d'équipes diverses
-                et inclusives. Nous valorisons l'autonomie, la créativité et le feedback constructif.
-              </p>
-              <ul className="space-y-4">
-                {[
-                  'Transparence totale sur les décisions et les résultats',
-                  'Feedback continu et culture de l\'amélioration',
-                  'Équilibre vie pro/perso respecté',
-                  'Célébration des succès collectifs',
-                ].map((item, index) => (
-                  <motion.li
-                    key={index}
-                    initial={{ opacity: 0, x: -20 }}
-                    animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
-                    transition={{ duration: 0.5, delay: index * 0.1 }}
-                    className="flex items-center space-x-3 text-white/90"
-                  >
-                    <div className="w-6 h-6 bg-brand-turquoise rounded-full flex items-center justify-center flex-shrink-0">
-                      <ChevronRight className="w-4 h-4 text-white" />
-                    </div>
-                    <span>{item}</span>
-                  </motion.li>
-                ))}
-              </ul>
-            </motion.div>
-
-            <motion.div
-              initial={{ opacity: 0, x: 50 }}
-              animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
-              transition={{ duration: 0.8, delay: 0.2 }}
-              className="grid grid-cols-2 gap-4"
-            >
-              {[1, 2, 3, 4].map((i) => (
-                <div
-                  key={i}
-                  className="aspect-square bg-white/10 rounded-2xl flex items-center justify-center"
-                >
-                  <Users className="w-12 h-12 text-white/40" />
-                </div>
-              ))}
-            </motion.div>
-          </div>
-        </div>
-      </section>
-
-      {/* Jobs Section */}
-      <section ref={jobsRef} id="jobs" className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isJobsInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-12"
-          >
-            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
-              Nos offres d'emploi
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Trouvez le poste qui correspond à vos ambitions
-            </p>
-          </motion.div>
-
-          {/* Filters */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={isJobsInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.6, delay: 0.2 }}
-            className="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-4 mb-12"
-          >
-            <div className="relative">
-              <select
-                value={selectedDepartment}
-                onChange={(e) => setSelectedDepartment(e.target.value)}
-                className="appearance-none px-6 py-3 pr-10 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-transparent cursor-pointer"
-              >
-                {departments.map((dept) => (
-                  <option key={dept.value} value={dept.value}>
-                    {dept.label}
-                  </option>
-                ))}
-              </select>
-              <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
-            </div>
-            <div className="relative">
-              <select
-                value={selectedLocation}
-                onChange={(e) => setSelectedLocation(e.target.value)}
-                className="appearance-none px-6 py-3 pr-10 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-transparent cursor-pointer"
-              >
-                {locations.map((loc) => (
-                  <option key={loc.value} value={loc.value}>
-                    {loc.label}
-                  </option>
-                ))}
-              </select>
-              <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
-            </div>
-          </motion.div>
-
-          {/* Job Listings */}
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isJobsInView ? 'visible' : 'hidden'}
-            className="space-y-4"
-          >
-            {filteredJobs.length === 0 ? (
-              <div className="text-center py-12">
-                <Search className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-                <h3 className="text-xl font-medium text-gray-600">Aucune offre trouvée</h3>
-                <p className="text-gray-500">Essayez de modifier vos filtres</p>
-              </div>
-            ) : (
-              filteredJobs.map((job) => {
-                const IconComponent = job.icon;
-                const isExpanded = expandedJob === job.id;
-
-                return (
-                  <motion.div
-                    key={job.id}
-                    variants={itemVariants}
-                    className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden"
-                  >
-                    <div
-                      className="p-6 cursor-pointer hover:bg-gray-50 transition-colors"
-                      onClick={() => setExpandedJob(isExpanded ? null : job.id)}
-                    >
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center space-x-4">
-                          <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
-                            <IconComponent className="w-6 h-6 text-brand-turquoise" />
-                          </div>
-                          <div>
-                            <h3 className="text-xl font-bold text-brand-navy">{job.title}</h3>
-                            <div className="flex items-center space-x-4 mt-1 text-sm text-gray-500">
-                              <span className="flex items-center space-x-1">
-                                <Building2 className="w-4 h-4" />
-                                <span>{job.department}</span>
-                              </span>
-                              <span className="flex items-center space-x-1">
-                                <MapPin className="w-4 h-4" />
-                                <span>{job.location}</span>
-                              </span>
-                              <span className="flex items-center space-x-1">
-                                <Clock className="w-4 h-4" />
-                                <span>{job.type}</span>
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                        <div className="flex items-center space-x-4">
-                          <div className="hidden md:flex items-center space-x-2">
-                            {job.remote && (
-                              <span className="px-3 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">
-                                Remote OK
-                              </span>
-                            )}
-                            <span className="px-3 py-1 bg-brand-turquoise/10 text-brand-turquoise text-sm font-medium rounded-full">
-                              {job.salary}
-                            </span>
-                          </div>
-                          <ChevronDown
-                            className={`w-6 h-6 text-gray-400 transition-transform ${
-                              isExpanded ? 'transform rotate-180' : ''
-                            }`}
-                          />
-                        </div>
-                      </div>
-                    </div>
-
-                    <AnimatePresence>
-                      {isExpanded && (
-                        <motion.div
-                          initial={{ height: 0, opacity: 0 }}
-                          animate={{ height: 'auto', opacity: 1 }}
-                          exit={{ height: 0, opacity: 0 }}
-                          transition={{ duration: 0.3 }}
-                          className="border-t border-gray-100"
-                        >
-                          <div className="p-6 bg-gray-50">
-                            <p className="text-gray-600 mb-6">{job.description}</p>
-                            <h4 className="font-bold text-brand-navy mb-3">Profil recherché :</h4>
-                            <ul className="space-y-2 mb-6">
-                              {job.requirements.map((req, index) => (
-                                <li key={index} className="flex items-start space-x-2 text-gray-600">
-                                  <ChevronRight className="w-5 h-5 text-brand-turquoise flex-shrink-0 mt-0.5" />
-                                  <span>{req}</span>
-                                </li>
-                              ))}
-                            </ul>
-                            <div className="flex items-center space-x-4">
-                              <Link
-                                href={`/careers/${job.id}`}
-                                className="px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-medium flex items-center space-x-2"
-                              >
-                                <span>Postuler</span>
-                                <ArrowRight className="w-4 h-4" />
-                              </Link>
-                              <button className="px-6 py-3 border border-gray-300 rounded-lg hover:border-brand-turquoise transition-all font-medium text-gray-700">
-                                En savoir plus
-                              </button>
-                            </div>
-                          </div>
-                        </motion.div>
-                      )}
-                    </AnimatePresence>
-                  </motion.div>
-                );
-              })
-            )}
-          </motion.div>
-        </div>
-      </section>
-
-      {/* CTA Section */}
-      <section className="py-20 bg-gray-50">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-4xl font-bold text-brand-navy mb-6">
-              Pas de poste correspondant ?
-            </h2>
-            <p className="text-xl text-gray-600 mb-10">
-              Envoyez-nous une candidature spontanée ! Nous sommes toujours à la recherche de
-              talents passionnés pour rejoindre notre aventure.
-            </p>
-            <Link
-              href="/contact"
-              className="inline-flex items-center space-x-2 px-8 py-4 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-all font-semibold text-lg"
-            >
-              <span>Candidature spontanée</span>
-              <ArrowRight className="w-5 h-5" />
-            </Link>
-          </motion.div>
-        </div>
-      </section>
-
-      <LandingFooter />
-    </div>
-  );
-}
+'use client';
+
+import { useState, useRef } from 'react';
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/navigation';
+import { motion, useInView, AnimatePresence } from 'framer-motion';
+import {
+  Briefcase,
+  MapPin,
+  Clock,
+  Users,
+  Heart,
+  Zap,
+  Coffee,
+  GraduationCap,
+  Plane,
+  Building2,
+  ChevronDown,
+  ChevronRight,
+  ArrowRight,
+  Search,
+  Code,
+  LineChart,
+  Headphones,
+  Megaphone,
+  type LucideIcon,
+} from 'lucide-react';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+
+type BenefitKey = 'health' | 'remote' | 'wellbeing' | 'learning' | 'international' | 'stockOptions';
+type StatKey = 'employees' | 'nationalities' | 'offices' | 'womenTech';
+type CultureKey = 'item1' | 'item2' | 'item3' | 'item4';
+type JobKey = 'frontend' | 'backend' | 'pm' | 'ae' | 'csm' | 'data';
+type DepartmentValue = 'all' | 'Engineering' | 'Product' | 'Sales' | 'Customer Success' | 'Data';
+type LocationValue = 'all' | 'Paris' | 'Rotterdam' | 'Hambourg';
+
+const BENEFITS: { key: BenefitKey; icon: LucideIcon }[] = [
+  { key: 'health', icon: Heart },
+  { key: 'remote', icon: Plane },
+  { key: 'wellbeing', icon: Coffee },
+  { key: 'learning', icon: GraduationCap },
+  { key: 'international', icon: Users },
+  { key: 'stockOptions', icon: Zap },
+];
+
+const STATS: { key: StatKey; value: string }[] = [
+  { key: 'employees', value: '50+' },
+  { key: 'nationalities', value: '15' },
+  { key: 'offices', value: '3' },
+  { key: 'womenTech', value: '40%' },
+];
+
+const CULTURE_ITEMS: CultureKey[] = ['item1', 'item2', 'item3', 'item4'];
+
+type JobRecord = {
+  id: number;
+  key: JobKey;
+  department: Exclude<DepartmentValue, 'all'>;
+  location: Exclude<LocationValue, 'all'>;
+  type: string;
+  remote: boolean;
+  salary: string;
+  icon: LucideIcon;
+};
+
+const JOBS: JobRecord[] = [
+  { id: 1, key: 'frontend', department: 'Engineering', location: 'Paris', type: 'CDI', remote: true, salary: '65K - 85K €', icon: Code },
+  { id: 2, key: 'backend', department: 'Engineering', location: 'Paris', type: 'CDI', remote: true, salary: '55K - 75K €', icon: Code },
+  { id: 3, key: 'pm', department: 'Product', location: 'Paris', type: 'CDI', remote: true, salary: '60K - 80K €', icon: LineChart },
+  { id: 4, key: 'ae', department: 'Sales', location: 'Rotterdam', type: 'CDI', remote: false, salary: '50K - 70K € + variable', icon: Megaphone },
+  { id: 5, key: 'csm', department: 'Customer Success', location: 'Paris', type: 'CDI', remote: true, salary: '45K - 60K €', icon: Headphones },
+  { id: 6, key: 'data', department: 'Data', location: 'Hambourg', type: 'CDI', remote: true, salary: '50K - 65K €', icon: LineChart },
+];
+
+const DEPARTMENT_VALUES: DepartmentValue[] = ['all', 'Engineering', 'Product', 'Sales', 'Customer Success', 'Data'];
+const LOCATION_VALUES: LocationValue[] = ['all', 'Paris', 'Rotterdam', 'Hambourg'];
+const JOB_REQ_KEYS = ['req1', 'req2', 'req3', 'req4'] as const;
+
+export default function CareersPage() {
+  const t = useTranslations('marketing.careers');
+  const [selectedDepartment, setSelectedDepartment] = useState<DepartmentValue>('all');
+  const [selectedLocation, setSelectedLocation] = useState<LocationValue>('all');
+  const [expandedJob, setExpandedJob] = useState<number | null>(null);
+
+  const heroRef = useRef(null);
+  const benefitsRef = useRef(null);
+  const jobsRef = useRef(null);
+  const cultureRef = useRef(null);
+
+  const isHeroInView = useInView(heroRef, { once: true });
+  const isBenefitsInView = useInView(benefitsRef, { once: true });
+  const isJobsInView = useInView(jobsRef, { once: true });
+  const isCultureInView = useInView(cultureRef, { once: true });
+
+  const filteredJobs = JOBS.filter((job) => {
+    const departmentMatch = selectedDepartment === 'all' || job.department === selectedDepartment;
+    const locationMatch = selectedLocation === 'all' || job.location === selectedLocation;
+    return departmentMatch && locationMatch;
+  });
+
+  const containerVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader activePage="careers" />
+
+      {/* Hero Section */}
+      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
+          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
+        </div>
+
+        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center"
+          >
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
+            >
+              <Briefcase className="w-5 h-5 text-brand-turquoise" />
+              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
+            </motion.div>
+
+            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+              {t('title1')}
+              <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
+                {t('title2')}
+              </span>
+            </h1>
+
+            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
+              {t('intro')}
+            </p>
+
+            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
+              <a
+                href="#jobs"
+                className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl font-semibold text-lg flex items-center space-x-2"
+              >
+                <span>{t('viewJobs')}</span>
+                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+              </a>
+              <Link
+                href="/about"
+                className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-all font-semibold text-lg"
+              >
+                {t('learnMore')}
+              </Link>
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Wave */}
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
+            <path
+              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </section>
+
+      {/* Stats Section */}
+      <section className="py-16 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+            {STATS.map((stat, index) => (
+              <motion.div
+                key={stat.key}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="text-center"
+              >
+                <div className="text-5xl font-bold text-brand-turquoise mb-2">{stat.value}</div>
+                <div className="text-gray-600 font-medium">{t(`stats.${stat.key}`)}</div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Benefits Section */}
+      <section ref={benefitsRef} className="py-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isBenefitsInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
+              {t('benefitsTitle')}
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('benefitsSubtitle')}
+            </p>
+          </motion.div>
+
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={isBenefitsInView ? 'visible' : 'hidden'}
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+          >
+            {BENEFITS.map((benefit) => {
+              const IconComponent = benefit.icon;
+              return (
+                <motion.div
+                  key={benefit.key}
+                  variants={itemVariants}
+                  whileHover={{ y: -5 }}
+                  className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
+                >
+                  <div className="w-14 h-14 bg-brand-turquoise/10 rounded-xl flex items-center justify-center mb-4">
+                    <IconComponent className="w-7 h-7 text-brand-turquoise" />
+                  </div>
+                  <h3 className="text-xl font-bold text-brand-navy mb-2">{t(`benefits.${benefit.key}.title`)}</h3>
+                  <p className="text-gray-600">{t(`benefits.${benefit.key}.description`)}</p>
+                </motion.div>
+              );
+            })}
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Culture Section */}
+      <section ref={cultureRef} className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <motion.div
+              initial={{ opacity: 0, x: -50 }}
+              animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
+              transition={{ duration: 0.8 }}
+            >
+              <h2 className="text-4xl lg:text-5xl font-bold text-white mb-6">
+                {t('cultureTitle')}
+              </h2>
+              <p className="text-xl text-white/80 mb-8">
+                {t('cultureBody')}
+              </p>
+              <ul className="space-y-4">
+                {CULTURE_ITEMS.map((itemKey, index) => (
+                  <motion.li
+                    key={itemKey}
+                    initial={{ opacity: 0, x: -20 }}
+                    animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
+                    transition={{ duration: 0.5, delay: index * 0.1 }}
+                    className="flex items-center space-x-3 text-white/90"
+                  >
+                    <div className="w-6 h-6 bg-brand-turquoise rounded-full flex items-center justify-center flex-shrink-0">
+                      <ChevronRight className="w-4 h-4 text-white" />
+                    </div>
+                    <span>{t(`culture.${itemKey}`)}</span>
+                  </motion.li>
+                ))}
+              </ul>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: 50 }}
+              animate={isCultureInView ? { opacity: 1, x: 0 } : {}}
+              transition={{ duration: 0.8, delay: 0.2 }}
+              className="grid grid-cols-2 gap-4"
+            >
+              {[1, 2, 3, 4].map((i) => (
+                <div
+                  key={i}
+                  className="aspect-square bg-white/10 rounded-2xl flex items-center justify-center"
+                >
+                  <Users className="w-12 h-12 text-white/40" />
+                </div>
+              ))}
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Jobs Section */}
+      <section ref={jobsRef} id="jobs" className="py-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isJobsInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-12"
+          >
+            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
+              {t('jobsTitle')}
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('jobsSubtitle')}
+            </p>
+          </motion.div>
+
+          {/* Filters */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isJobsInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-4 mb-12"
+          >
+            <div className="relative">
+              <select
+                value={selectedDepartment}
+                onChange={(e) => setSelectedDepartment(e.target.value as DepartmentValue)}
+                className="appearance-none px-6 py-3 pr-10 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-transparent cursor-pointer"
+              >
+                {DEPARTMENT_VALUES.map((value) => (
+                  <option key={value} value={value}>
+                    {value === 'all' ? t('filters.allDepartments') : t(`departments.${value}` as any)}
+                  </option>
+                ))}
+              </select>
+              <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
+            </div>
+            <div className="relative">
+              <select
+                value={selectedLocation}
+                onChange={(e) => setSelectedLocation(e.target.value as LocationValue)}
+                className="appearance-none px-6 py-3 pr-10 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-transparent cursor-pointer"
+              >
+                {LOCATION_VALUES.map((value) => (
+                  <option key={value} value={value}>
+                    {value === 'all' ? t('filters.allLocations') : t(`locations.${value}` as any)}
+                  </option>
+                ))}
+              </select>
+              <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
+            </div>
+          </motion.div>
+
+          {/* Job Listings */}
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={isJobsInView ? 'visible' : 'hidden'}
+            className="space-y-4"
+          >
+            {filteredJobs.length === 0 ? (
+              <div className="text-center py-12">
+                <Search className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+                <h3 className="text-xl font-medium text-gray-600">{t('noJobs.title')}</h3>
+                <p className="text-gray-500">{t('noJobs.body')}</p>
+              </div>
+            ) : (
+              filteredJobs.map((job) => {
+                const IconComponent = job.icon;
+                const isExpanded = expandedJob === job.id;
+
+                return (
+                  <motion.div
+                    key={job.id}
+                    variants={itemVariants}
+                    className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden"
+                  >
+                    <div
+                      className="p-6 cursor-pointer hover:bg-gray-50 transition-colors"
+                      onClick={() => setExpandedJob(isExpanded ? null : job.id)}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-4">
+                          <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
+                            <IconComponent className="w-6 h-6 text-brand-turquoise" />
+                          </div>
+                          <div>
+                            <h3 className="text-xl font-bold text-brand-navy">{t(`jobs.${job.key}.title`)}</h3>
+                            <div className="flex items-center space-x-4 mt-1 text-sm text-gray-500">
+                              <span className="flex items-center space-x-1">
+                                <Building2 className="w-4 h-4" />
+                                <span>{t(`departments.${job.department}` as any)}</span>
+                              </span>
+                              <span className="flex items-center space-x-1">
+                                <MapPin className="w-4 h-4" />
+                                <span>{t(`locations.${job.location}` as any)}</span>
+                              </span>
+                              <span className="flex items-center space-x-1">
+                                <Clock className="w-4 h-4" />
+                                <span>{job.type}</span>
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="flex items-center space-x-4">
+                          <div className="hidden md:flex items-center space-x-2">
+                            {job.remote && (
+                              <span className="px-3 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">
+                                {t('jobCard.remote')}
+                              </span>
+                            )}
+                            <span className="px-3 py-1 bg-brand-turquoise/10 text-brand-turquoise text-sm font-medium rounded-full">
+                              {job.salary}
+                            </span>
+                          </div>
+                          <ChevronDown
+                            className={`w-6 h-6 text-gray-400 transition-transform ${
+                              isExpanded ? 'transform rotate-180' : ''
+                            }`}
+                          />
+                        </div>
+                      </div>
+                    </div>
+
+                    <AnimatePresence>
+                      {isExpanded && (
+                        <motion.div
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ height: 'auto', opacity: 1 }}
+                          exit={{ height: 0, opacity: 0 }}
+                          transition={{ duration: 0.3 }}
+                          className="border-t border-gray-100"
+                        >
+                          <div className="p-6 bg-gray-50">
+                            <p className="text-gray-600 mb-6">{t(`jobs.${job.key}.description`)}</p>
+                            <h4 className="font-bold text-brand-navy mb-3">{t('jobCard.profile')}</h4>
+                            <ul className="space-y-2 mb-6">
+                              {JOB_REQ_KEYS.map((reqKey) => (
+                                <li key={reqKey} className="flex items-start space-x-2 text-gray-600">
+                                  <ChevronRight className="w-5 h-5 text-brand-turquoise flex-shrink-0 mt-0.5" />
+                                  <span>{t(`jobs.${job.key}.${reqKey}` as any)}</span>
+                                </li>
+                              ))}
+                            </ul>
+                            <div className="flex items-center space-x-4">
+                              <Link
+                                href={`/careers/${job.id}`}
+                                className="px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-medium flex items-center space-x-2"
+                              >
+                                <span>{t('jobCard.apply')}</span>
+                                <ArrowRight className="w-4 h-4" />
+                              </Link>
+                              <button className="px-6 py-3 border border-gray-300 rounded-lg hover:border-brand-turquoise transition-all font-medium text-gray-700">
+                                {t('jobCard.learnMore')}
+                              </button>
+                            </div>
+                          </div>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </motion.div>
+                );
+              })
+            )}
+          </motion.div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+          >
+            <h2 className="text-4xl font-bold text-brand-navy mb-6">
+              {t('cta.title')}
+            </h2>
+            <p className="text-xl text-gray-600 mb-10">
+              {t('cta.body')}
+            </p>
+            <Link
+              href="/contact"
+              className="inline-flex items-center space-x-2 px-8 py-4 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-all font-semibold text-lg"
+            >
+              <span>{t('cta.spontaneous')}</span>
+              <ArrowRight className="w-5 h-5" />
+            </Link>
+          </motion.div>
+        </div>
+      </section>
+
+      <LandingFooter />
+    </div>
+  );
+}
diff --git a/apps/frontend/app/carrier/accept/[token]/page.tsx b/apps/frontend/app/[locale]/carrier/accept/[token]/page.tsx
similarity index 76%
rename from apps/frontend/app/carrier/accept/[token]/page.tsx
rename to apps/frontend/app/[locale]/carrier/accept/[token]/page.tsx
index 45de17e..5dd8984 100644
--- a/apps/frontend/app/carrier/accept/[token]/page.tsx
+++ b/apps/frontend/app/[locale]/carrier/accept/[token]/page.tsx
@@ -1,153 +1,153 @@
-'use client';
-
-import { useEffect, useState, useRef } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { CheckCircle, Loader2, XCircle } from 'lucide-react';
-
-export default function CarrierAcceptPage() {
-  const params = useParams();
-  const router = useRouter();
-  const token = params.token as string;
-
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [countdown, setCountdown] = useState(5);
-
-  // Prevent double API calls (React 18 StrictMode issue)
-  const hasCalledApi = useRef(false);
-
-  useEffect(() => {
-    const acceptBooking = async () => {
-      // Protection contre les doubles appels
-      if (hasCalledApi.current) {
-        return;
-      }
-      hasCalledApi.current = true;
-
-      if (!token) {
-        setError('Token manquant');
-        setLoading(false);
-        return;
-      }
-
-      try {
-        // Appeler l'API backend pour accepter le booking
-        const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
-        const response = await fetch(`${apiUrl}/api/v1/csv-booking-actions/accept/${token}`, {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        });
-
-        if (!response.ok) {
-          let errorData;
-          try {
-            errorData = await response.json();
-          } catch (e) {
-            errorData = { message: `Erreur HTTP ${response.status}` };
-          }
-
-          let errorMessage = errorData.message || 'Erreur lors de l\'acceptation du booking';
-
-          if (errorMessage.includes('status ACCEPTED') || errorMessage.includes('ACCEPTED')) {
-            errorMessage = 'Ce booking a déjà été accepté.';
-          } else if (errorMessage.includes('status REJECTED')) {
-            errorMessage = 'Ce booking a déjà été refusé.';
-          } else if (errorMessage.includes('not found') || errorMessage.includes('Booking not found')) {
-            errorMessage = 'Booking introuvable. Le lien peut avoir expiré.';
-          }
-
-          throw new Error(errorMessage);
-        }
-
-        setLoading(false);
-
-        // Démarrer le compte à rebours
-        const timer = setInterval(() => {
-          setCountdown((prev) => {
-            if (prev <= 1) {
-              clearInterval(timer);
-              router.push('/');
-              return 0;
-            }
-            return prev - 1;
-          });
-        }, 1000);
-
-        return () => clearInterval(timer);
-      } catch (err) {
-        console.error('Error accepting booking:', err);
-        setError(err instanceof Error ? err.message : 'Erreur lors de l\'acceptation');
-        setLoading(false);
-      }
-    };
-
-    acceptBooking();
-  }, [token, router]);
-
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-blue-50">
-        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
-          <Loader2 className="w-16 h-16 text-green-600 mx-auto mb-4 animate-spin" />
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">
-            Traitement en cours...
-          </h1>
-          <p className="text-gray-600">
-            Nous traitons votre acceptation.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-orange-50">
-        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
-          <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">Erreur</h1>
-          <p className="text-gray-600 mb-6">{error}</p>
-          <button
-            onClick={() => router.push('/')}
-            className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
-          >
-            Retour à l'accueil
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-blue-50">
-      <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
-        <CheckCircle className="w-20 h-20 text-green-500 mx-auto mb-6" />
-        <h1 className="text-3xl font-bold text-gray-900 mb-4">
-          Merci !
-        </h1>
-
-        <div className="bg-green-50 border-2 border-green-200 rounded-lg p-6 mb-6">
-          <p className="text-green-800 font-medium text-lg mb-2">
-            ✅ Votre acceptation a bien été prise en compte
-          </p>
-          <p className="text-green-700 text-sm">
-            Nous vous remercions d'avoir accepté cette demande de transport.
-          </p>
-        </div>
-
-        <p className="text-gray-500 text-sm mb-4">
-          Redirection vers la page d'accueil dans {countdown} seconde{countdown > 1 ? 's' : ''}...
-        </p>
-
-        <button
-          onClick={() => router.push('/')}
-          className="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold transition-colors"
-        >
-          Retour à l'accueil
-        </button>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { useParams } from 'next/navigation';
+import { useRouter } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+import { CheckCircle, Loader2, XCircle } from 'lucide-react';
+
+export default function CarrierAcceptPage() {
+  const params = useParams();
+  const router = useRouter();
+  const token = params.token as string;
+  const t = useTranslations('carrierPortal');
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [countdown, setCountdown] = useState(5);
+
+  // Prevent double API calls (React 18 StrictMode issue)
+  const hasCalledApi = useRef(false);
+
+  useEffect(() => {
+    const acceptBooking = async () => {
+      if (hasCalledApi.current) {
+        return;
+      }
+      hasCalledApi.current = true;
+
+      if (!token) {
+        setError(t('common.tokenMissing'));
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
+        const response = await fetch(`${apiUrl}/api/v1/csv-booking-actions/accept/${token}`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+
+        if (!response.ok) {
+          let errorData;
+          try {
+            errorData = await response.json();
+          } catch (e) {
+            errorData = { message: `HTTP ${response.status}` };
+          }
+
+          let errorMessage = errorData.message || t('accept.errorFallback');
+
+          if (errorMessage.includes('status ACCEPTED') || errorMessage.includes('ACCEPTED')) {
+            errorMessage = t('common.bookingAlreadyAccepted');
+          } else if (errorMessage.includes('status REJECTED')) {
+            errorMessage = t('common.bookingAlreadyRejected');
+          } else if (errorMessage.includes('not found') || errorMessage.includes('Booking not found')) {
+            errorMessage = t('common.bookingNotFound');
+          }
+
+          throw new Error(errorMessage);
+        }
+
+        setLoading(false);
+
+        const timer = setInterval(() => {
+          setCountdown((prev) => {
+            if (prev <= 1) {
+              clearInterval(timer);
+              router.push('/');
+              return 0;
+            }
+            return prev - 1;
+          });
+        }, 1000);
+
+        return () => clearInterval(timer);
+      } catch (err) {
+        console.error('Error accepting booking:', err);
+        setError(err instanceof Error ? err.message : t('accept.errorGeneric'));
+        setLoading(false);
+      }
+    };
+
+    acceptBooking();
+  }, [token, router, t]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-blue-50">
+        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
+          <Loader2 className="w-16 h-16 text-green-600 mx-auto mb-4 animate-spin" />
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">
+            {t('accept.loadingTitle')}
+          </h1>
+          <p className="text-gray-600">
+            {t('accept.loadingMessage')}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-orange-50">
+        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
+          <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">{t('common.errorTitle')}</h1>
+          <p className="text-gray-600 mb-6">{error}</p>
+          <button
+            onClick={() => router.push('/')}
+            className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+          >
+            {t('common.backHome')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-blue-50">
+      <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
+        <CheckCircle className="w-20 h-20 text-green-500 mx-auto mb-6" />
+        <h1 className="text-3xl font-bold text-gray-900 mb-4">
+          {t('accept.thanksTitle')}
+        </h1>
+
+        <div className="bg-green-50 border-2 border-green-200 rounded-lg p-6 mb-6">
+          <p className="text-green-800 font-medium text-lg mb-2">
+            {t('accept.successHeadline')}
+          </p>
+          <p className="text-green-700 text-sm">
+            {t('accept.successBody')}
+          </p>
+        </div>
+
+        <p className="text-gray-500 text-sm mb-4">
+          {t('common.redirecting', { countdown })}
+        </p>
+
+        <button
+          onClick={() => router.push('/')}
+          className="w-full px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold transition-colors"
+        >
+          {t('common.backHome')}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/carrier/documents/[token]/page.tsx b/apps/frontend/app/[locale]/carrier/documents/[token]/page.tsx
similarity index 79%
rename from apps/frontend/app/carrier/documents/[token]/page.tsx
rename to apps/frontend/app/[locale]/carrier/documents/[token]/page.tsx
index 92cba27..a76bbc8 100644
--- a/apps/frontend/app/carrier/documents/[token]/page.tsx
+++ b/apps/frontend/app/[locale]/carrier/documents/[token]/page.tsx
@@ -1,568 +1,566 @@
-'use client';
-
-import { useEffect, useState, useRef } from 'react';
-import { useParams } from 'next/navigation';
-import Image from 'next/image';
-import {
-  FileText,
-  Download,
-  Loader2,
-  XCircle,
-  Package,
-  Ship,
-  Clock,
-  AlertCircle,
-  ArrowRight,
-  Lock,
-  Eye,
-  EyeOff,
-} from 'lucide-react';
-
-interface Document {
-  id: string;
-  type: string;
-  fileName: string;
-  mimeType: string;
-  size: number;
-  downloadUrl: string;
-}
-
-interface BookingSummary {
-  id: string;
-  bookingNumber?: string;
-  carrierName: string;
-  origin: string;
-  destination: string;
-  routeDescription: string;
-  volumeCBM: number;
-  weightKG: number;
-  palletCount: number;
-  price: number;
-  currency: string;
-  transitDays: number;
-  containerType: string;
-  acceptedAt: string;
-}
-
-interface CarrierDocumentsData {
-  booking: BookingSummary;
-  documents: Document[];
-}
-
-interface AccessRequirements {
-  requiresPassword: boolean;
-  bookingNumber?: string;
-  status: string;
-}
-
-const documentTypeLabels: Record<string, string> = {
-  BILL_OF_LADING: 'Connaissement',
-  PACKING_LIST: 'Liste de colisage',
-  COMMERCIAL_INVOICE: 'Facture commerciale',
-  CERTIFICATE_OF_ORIGIN: "Certificat d'origine",
-  OTHER: 'Autre document',
-};
-
-const formatFileSize = (bytes: number): string => {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-};
-
-const getFileIcon = (mimeType: string) => {
-  if (mimeType.includes('pdf')) return '📄';
-  if (mimeType.includes('image')) return '🖼️';
-  if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return '📊';
-  if (mimeType.includes('word') || mimeType.includes('document')) return '📝';
-  return '📎';
-};
-
-export default function CarrierDocumentsPage() {
-  const params = useParams();
-  const token = params.token as string;
-
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [data, setData] = useState<CarrierDocumentsData | null>(null);
-  const [downloading, setDownloading] = useState<string | null>(null);
-
-  // Password protection state
-  const [requirements, setRequirements] = useState<AccessRequirements | null>(null);
-  const [password, setPassword] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [passwordError, setPasswordError] = useState<string | null>(null);
-  const [verifying, setVerifying] = useState(false);
-
-  const hasCalledApi = useRef(false);
-  const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
-
-  // Check access requirements first
-  const checkRequirements = async () => {
-    if (!token) {
-      setError('Lien invalide');
-      setLoading(false);
-      return;
-    }
-
-    try {
-      const response = await fetch(
-        `${apiUrl}/api/v1/csv-booking-actions/documents/${token}/requirements`,
-        {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
-      );
-
-      if (!response.ok) {
-        let errorData;
-        try {
-          errorData = await response.json();
-        } catch {
-          errorData = { message: `Erreur HTTP ${response.status}` };
-        }
-
-        const errorMessage = errorData.message || 'Erreur lors du chargement';
-
-        if (errorMessage.includes('introuvable') || errorMessage.includes('not found')) {
-          throw new Error('Réservation introuvable. Vérifiez que le lien est correct.');
-        }
-
-        throw new Error(errorMessage);
-      }
-
-      const reqData: AccessRequirements = await response.json();
-      setRequirements(reqData);
-
-      // If booking is not accepted yet
-      if (reqData.status !== 'ACCEPTED') {
-        setError(
-          "Cette réservation n'a pas encore été acceptée. Les documents seront disponibles après l'acceptation."
-        );
-        setLoading(false);
-        return;
-      }
-
-      // If no password required, fetch documents directly
-      if (!reqData.requiresPassword) {
-        await fetchDocumentsWithoutPassword();
-      } else {
-        setLoading(false);
-      }
-    } catch (err) {
-      console.error('Error checking requirements:', err);
-      setError(err instanceof Error ? err.message : 'Erreur lors du chargement');
-      setLoading(false);
-    }
-  };
-
-  // Fetch documents without password (legacy bookings)
-  const fetchDocumentsWithoutPassword = async () => {
-    try {
-      const response = await fetch(`${apiUrl}/api/v1/csv-booking-actions/documents/${token}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
-
-      if (!response.ok) {
-        let errorData;
-        try {
-          errorData = await response.json();
-        } catch {
-          errorData = { message: `Erreur HTTP ${response.status}` };
-        }
-
-        const errorMessage = errorData.message || 'Erreur lors du chargement des documents';
-
-        if (
-          errorMessage.includes('pas encore été acceptée') ||
-          errorMessage.includes('not accepted')
-        ) {
-          throw new Error(
-            "Cette réservation n'a pas encore été acceptée. Les documents seront disponibles après l'acceptation."
-          );
-        } else if (errorMessage.includes('introuvable') || errorMessage.includes('not found')) {
-          throw new Error('Réservation introuvable. Vérifiez que le lien est correct.');
-        } else if (errorMessage.includes('Mot de passe requis') || errorMessage.includes('required')) {
-          // Password is now required, show the form
-          setRequirements({ requiresPassword: true, status: 'ACCEPTED' });
-          setLoading(false);
-          return;
-        }
-
-        throw new Error(errorMessage);
-      }
-
-      const responseData = await response.json();
-      setData(responseData);
-      setLoading(false);
-    } catch (err) {
-      console.error('Error fetching documents:', err);
-      setError(err instanceof Error ? err.message : 'Erreur lors du chargement');
-      setLoading(false);
-    }
-  };
-
-  // Fetch documents with password
-  const fetchDocumentsWithPassword = async (pwd: string) => {
-    setVerifying(true);
-    setPasswordError(null);
-
-    try {
-      const response = await fetch(`${apiUrl}/api/v1/csv-booking-actions/documents/${token}`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ password: pwd }),
-      });
-
-      if (!response.ok) {
-        let errorData;
-        try {
-          errorData = await response.json();
-        } catch {
-          errorData = { message: `Erreur HTTP ${response.status}` };
-        }
-
-        const errorMessage = errorData.message || 'Erreur lors de la vérification';
-
-        if (
-          response.status === 401 ||
-          errorMessage.includes('incorrect') ||
-          errorMessage.includes('invalid')
-        ) {
-          setPasswordError('Mot de passe incorrect. Vérifiez votre email pour retrouver le mot de passe.');
-          setVerifying(false);
-          return;
-        }
-
-        throw new Error(errorMessage);
-      }
-
-      const responseData = await response.json();
-      setData(responseData);
-      setVerifying(false);
-    } catch (err) {
-      console.error('Error verifying password:', err);
-      setPasswordError(err instanceof Error ? err.message : 'Erreur lors de la vérification');
-      setVerifying(false);
-    }
-  };
-
-  useEffect(() => {
-    if (hasCalledApi.current) return;
-    hasCalledApi.current = true;
-    checkRequirements();
-  }, [token]);
-
-  const handlePasswordSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!password.trim()) {
-      setPasswordError('Veuillez entrer le mot de passe');
-      return;
-    }
-    fetchDocumentsWithPassword(password.trim());
-  };
-
-  const handleDownload = async (doc: Document) => {
-    setDownloading(doc.id);
-
-    try {
-      // The downloadUrl is already a signed URL, open it directly
-      window.open(doc.downloadUrl, '_blank');
-    } catch (err) {
-      console.error('Error downloading document:', err);
-      alert('Erreur lors du téléchargement. Veuillez réessayer.');
-    } finally {
-      // Small delay to show loading state
-      setTimeout(() => setDownloading(null), 500);
-    }
-  };
-
-  const handleRefresh = () => {
-    setLoading(true);
-    setError(null);
-    setData(null);
-    setRequirements(null);
-    setPassword('');
-    setPasswordError(null);
-    hasCalledApi.current = false;
-    checkRequirements();
-  };
-
-  // Loading state
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-brand-gray">
-        <div className="bg-white p-8 rounded-xl shadow-lg max-w-md w-full text-center">
-          <Loader2 className="w-16 h-16 text-brand-turquoise mx-auto mb-4 animate-spin" />
-          <h1 className="text-2xl font-bold text-gray-900 mb-2">Chargement...</h1>
-          <p className="text-gray-600">Veuillez patienter</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Error state
-  if (error) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-brand-gray">
-        <div className="bg-white p-8 rounded-xl shadow-lg max-w-md w-full text-center">
-          <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">Erreur</h1>
-          <p className="text-gray-600 mb-6">{error}</p>
-          <button
-            onClick={handleRefresh}
-            className="w-full px-4 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 font-medium transition-colors"
-          >
-            Réessayer
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  // Password form state
-  if (requirements?.requiresPassword && !data) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-brand-gray p-4">
-        <div className="bg-white p-8 rounded-xl shadow-lg max-w-md w-full">
-          <div className="text-center mb-6">
-            <div className="mx-auto w-16 h-16 bg-brand-turquoise/10 rounded-full flex items-center justify-center mb-4">
-              <Lock className="w-8 h-8 text-brand-turquoise" />
-            </div>
-            <h1 className="text-2xl font-bold text-gray-900 mb-2">Accès sécurisé</h1>
-            <p className="text-gray-600">
-              Cette page est protégée. Entrez le mot de passe reçu par email pour accéder aux
-              documents.
-            </p>
-            {requirements.bookingNumber && (
-              <p className="mt-2 text-sm text-gray-500">
-                Réservation: <span className="font-mono font-bold">{requirements.bookingNumber}</span>
-              </p>
-            )}
-          </div>
-
-          <form onSubmit={handlePasswordSubmit} className="space-y-4">
-            <div>
-              <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
-                Mot de passe
-              </label>
-              <div className="relative">
-                <input
-                  type={showPassword ? 'text' : 'password'}
-                  id="password"
-                  value={password}
-                  onChange={e => setPassword(e.target.value.toUpperCase())}
-                  placeholder="Ex: A3B7K9"
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-brand-turquoise text-center text-xl tracking-widest font-mono uppercase"
-                  autoComplete="off"
-                  autoFocus
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
-                >
-                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
-                </button>
-              </div>
-              {passwordError && (
-                <p className="mt-2 text-sm text-red-600 flex items-center gap-1">
-                  <AlertCircle className="w-4 h-4" />
-                  {passwordError}
-                </p>
-              )}
-            </div>
-
-            <button
-              type="submit"
-              disabled={verifying}
-              className="w-full px-4 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 disabled:opacity-50 disabled:cursor-not-allowed font-medium transition-colors flex items-center justify-center gap-2"
-            >
-              {verifying ? (
-                <>
-                  <Loader2 className="w-5 h-5 animate-spin" />
-                  Vérification...
-                </>
-              ) : (
-                <>
-                  <Lock className="w-5 h-5" />
-                  Accéder aux documents
-                </>
-              )}
-            </button>
-          </form>
-
-          <div className="mt-6 p-4 bg-amber-50 border border-amber-200 rounded-lg">
-            <p className="text-sm text-amber-800">
-              <strong>Où trouver le mot de passe ?</strong>
-              <br />
-              Le mot de passe vous a été envoyé dans l'email de confirmation de la réservation. Il
-              correspond aux 6 derniers caractères du numéro de devis.
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (!data) return null;
-
-  const { booking, documents } = data;
-
-  return (
-    <div className="min-h-screen bg-brand-gray">
-      {/* Header */}
-      <header className="bg-white shadow-sm border-b">
-        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <Image
-              src="/assets/logos/logo-black.svg"
-              alt="Xpeditis"
-              width={40}
-              height={48}
-              className="h-auto"
-            />
-          </div>
-          <button
-            onClick={handleRefresh}
-            className="text-sm text-brand-turquoise hover:text-brand-navy font-medium"
-          >
-            Actualiser
-          </button>
-        </div>
-      </header>
-
-      <main className="max-w-4xl mx-auto px-4 py-8">
-        {/* Booking Summary Card */}
-        <div className="bg-white rounded-xl shadow-md overflow-hidden mb-6">
-          <div className="bg-gradient-to-r from-brand-navy to-brand-navy/80 px-6 py-4">
-            <div className="flex items-center justify-center gap-4 text-white">
-              <span className="text-2xl font-bold">{booking.origin}</span>
-              <ArrowRight className="w-6 h-6" />
-              <span className="text-2xl font-bold">{booking.destination}</span>
-            </div>
-            {booking.bookingNumber && (
-              <p className="text-center text-white/70 text-sm mt-1">
-                N° {booking.bookingNumber}
-              </p>
-            )}
-          </div>
-
-          <div className="p-6">
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <div className="text-center p-3 bg-gray-50 rounded-lg">
-                <Package className="w-5 h-5 text-gray-500 mx-auto mb-1" />
-                <p className="text-xs text-gray-500">Volume</p>
-                <p className="font-semibold text-gray-900">{booking.volumeCBM} CBM</p>
-              </div>
-              <div className="text-center p-3 bg-gray-50 rounded-lg">
-                <Package className="w-5 h-5 text-gray-500 mx-auto mb-1" />
-                <p className="text-xs text-gray-500">Poids</p>
-                <p className="font-semibold text-gray-900">{booking.weightKG} kg</p>
-              </div>
-              <div className="text-center p-3 bg-gray-50 rounded-lg">
-                <Clock className="w-5 h-5 text-gray-500 mx-auto mb-1" />
-                <p className="text-xs text-gray-500">Transit</p>
-                <p className="font-semibold text-gray-900">{booking.transitDays} jours</p>
-              </div>
-              <div className="text-center p-3 bg-gray-50 rounded-lg">
-                <Ship className="w-5 h-5 text-gray-500 mx-auto mb-1" />
-                <p className="text-xs text-gray-500">Type</p>
-                <p className="font-semibold text-gray-900">{booking.containerType}</p>
-              </div>
-            </div>
-
-            <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
-              <span className="text-gray-500">
-                Transporteur:{' '}
-                <span className="text-gray-900 font-medium">{booking.carrierName}</span>
-              </span>
-              <span className="text-gray-500">
-                Ref:{' '}
-                <span className="font-mono text-gray-900">
-                  {booking.bookingNumber || booking.id.substring(0, 8).toUpperCase()}
-                </span>
-              </span>
-            </div>
-          </div>
-        </div>
-
-        {/* Documents Section */}
-        <div className="bg-white rounded-xl shadow-md overflow-hidden">
-          <div className="px-6 py-4 border-b border-gray-100">
-            <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
-              <FileText className="w-5 h-5 text-brand-turquoise" />
-              Documents ({documents.length})
-            </h2>
-          </div>
-
-          {documents.length === 0 ? (
-            <div className="p-8 text-center">
-              <AlertCircle className="w-12 h-12 text-gray-400 mx-auto mb-3" />
-              <p className="text-gray-600">Aucun document disponible pour le moment.</p>
-              <p className="text-gray-500 text-sm mt-1">
-                Les documents apparaîtront ici une fois ajoutés.
-              </p>
-            </div>
-          ) : (
-            <div className="divide-y divide-gray-100">
-              {documents.map(doc => (
-                <div
-                  key={doc.id}
-                  className="px-6 py-4 flex items-center justify-between hover:bg-gray-50 transition-colors"
-                >
-                  <div className="flex items-center gap-4">
-                    <span className="text-2xl">{getFileIcon(doc.mimeType)}</span>
-                    <div>
-                      <p className="font-medium text-gray-900">{doc.fileName}</p>
-                      <div className="flex items-center gap-2 mt-1">
-                        <span className="text-xs px-2 py-0.5 bg-brand-turquoise/10 text-brand-navy rounded-full">
-                          {documentTypeLabels[doc.type] || doc.type}
-                        </span>
-                        <span className="text-xs text-gray-500">{formatFileSize(doc.size)}</span>
-                      </div>
-                    </div>
-                  </div>
-
-                  <button
-                    onClick={() => handleDownload(doc)}
-                    disabled={downloading === doc.id}
-                    className="flex items-center gap-2 px-4 py-2 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
-                  >
-                    {downloading === doc.id ? (
-                      <>
-                        <Loader2 className="w-4 h-4 animate-spin" />
-                        <span>...</span>
-                      </>
-                    ) : (
-                      <>
-                        <Download className="w-4 h-4" />
-                        <span>Télécharger</span>
-                      </>
-                    )}
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* Info */}
-        <p className="mt-6 text-center text-sm text-gray-500">
-          Cette page affiche toujours les documents les plus récents de la réservation.
-        </p>
-      </main>
-
-      {/* Footer */}
-      <footer className="mt-auto py-6 text-center text-sm text-brand-navy/50">
-        <p>© {new Date().getFullYear()} Xpeditis - Plateforme de fret maritime</p>
-      </footer>
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { useParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import {
+  FileText,
+  Download,
+  Loader2,
+  XCircle,
+  Package,
+  Ship,
+  Clock,
+  AlertCircle,
+  ArrowRight,
+  Lock,
+  Eye,
+  EyeOff,
+} from 'lucide-react';
+
+interface Document {
+  id: string;
+  type: string;
+  fileName: string;
+  mimeType: string;
+  size: number;
+  downloadUrl: string;
+}
+
+interface BookingSummary {
+  id: string;
+  bookingNumber?: string;
+  carrierName: string;
+  origin: string;
+  destination: string;
+  routeDescription: string;
+  volumeCBM: number;
+  weightKG: number;
+  palletCount: number;
+  price: number;
+  currency: string;
+  transitDays: number;
+  containerType: string;
+  acceptedAt: string;
+}
+
+interface CarrierDocumentsData {
+  booking: BookingSummary;
+  documents: Document[];
+}
+
+interface AccessRequirements {
+  requiresPassword: boolean;
+  bookingNumber?: string;
+  status: string;
+}
+
+const DOCUMENT_TYPE_KEYS = [
+  'BILL_OF_LADING',
+  'PACKING_LIST',
+  'COMMERCIAL_INVOICE',
+  'CERTIFICATE_OF_ORIGIN',
+  'OTHER',
+] as const;
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const getFileIcon = (mimeType: string) => {
+  if (mimeType.includes('pdf')) return '📄';
+  if (mimeType.includes('image')) return '🖼️';
+  if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return '📊';
+  if (mimeType.includes('word') || mimeType.includes('document')) return '📝';
+  return '📎';
+};
+
+export default function CarrierDocumentsPage() {
+  const params = useParams();
+  const token = params.token as string;
+  const t = useTranslations('carrierPortal.documents');
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<CarrierDocumentsData | null>(null);
+  const [downloading, setDownloading] = useState<string | null>(null);
+
+  // Password protection state
+  const [requirements, setRequirements] = useState<AccessRequirements | null>(null);
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [passwordError, setPasswordError] = useState<string | null>(null);
+  const [verifying, setVerifying] = useState(false);
+
+  const hasCalledApi = useRef(false);
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
+
+  const getDocumentTypeLabel = (type: string): string => {
+    if ((DOCUMENT_TYPE_KEYS as readonly string[]).includes(type)) {
+      return t(`documentTypes.${type}` as any);
+    }
+    return type;
+  };
+
+  // Check access requirements first
+  const checkRequirements = async () => {
+    if (!token) {
+      setError(t('linkInvalid'));
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const response = await fetch(
+        `${apiUrl}/api/v1/csv-booking-actions/documents/${token}/requirements`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        }
+      );
+
+      if (!response.ok) {
+        let errorData;
+        try {
+          errorData = await response.json();
+        } catch {
+          errorData = { message: `HTTP ${response.status}` };
+        }
+
+        const errorMessage = errorData.message || t('loadError');
+
+        if (errorMessage.includes('introuvable') || errorMessage.includes('not found')) {
+          throw new Error(t('bookingNotFound'));
+        }
+
+        throw new Error(errorMessage);
+      }
+
+      const reqData: AccessRequirements = await response.json();
+      setRequirements(reqData);
+
+      if (reqData.status !== 'ACCEPTED') {
+        setError(t('notAcceptedYet'));
+        setLoading(false);
+        return;
+      }
+
+      if (!reqData.requiresPassword) {
+        await fetchDocumentsWithoutPassword();
+      } else {
+        setLoading(false);
+      }
+    } catch (err) {
+      console.error('Error checking requirements:', err);
+      setError(err instanceof Error ? err.message : t('loadError'));
+      setLoading(false);
+    }
+  };
+
+  // Fetch documents without password (legacy bookings)
+  const fetchDocumentsWithoutPassword = async () => {
+    try {
+      const response = await fetch(`${apiUrl}/api/v1/csv-booking-actions/documents/${token}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        let errorData;
+        try {
+          errorData = await response.json();
+        } catch {
+          errorData = { message: `HTTP ${response.status}` };
+        }
+
+        const errorMessage = errorData.message || t('loadDocsError');
+
+        if (
+          errorMessage.includes('pas encore été acceptée') ||
+          errorMessage.includes('not accepted')
+        ) {
+          throw new Error(t('notAcceptedYet'));
+        } else if (errorMessage.includes('introuvable') || errorMessage.includes('not found')) {
+          throw new Error(t('bookingNotFound'));
+        } else if (errorMessage.includes('Mot de passe requis') || errorMessage.includes('required')) {
+          setRequirements({ requiresPassword: true, status: 'ACCEPTED' });
+          setLoading(false);
+          return;
+        }
+
+        throw new Error(errorMessage);
+      }
+
+      const responseData = await response.json();
+      setData(responseData);
+      setLoading(false);
+    } catch (err) {
+      console.error('Error fetching documents:', err);
+      setError(err instanceof Error ? err.message : t('loadError'));
+      setLoading(false);
+    }
+  };
+
+  // Fetch documents with password
+  const fetchDocumentsWithPassword = async (pwd: string) => {
+    setVerifying(true);
+    setPasswordError(null);
+
+    try {
+      const response = await fetch(`${apiUrl}/api/v1/csv-booking-actions/documents/${token}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ password: pwd }),
+      });
+
+      if (!response.ok) {
+        let errorData;
+        try {
+          errorData = await response.json();
+        } catch {
+          errorData = { message: `HTTP ${response.status}` };
+        }
+
+        const errorMessage = errorData.message || t('verifyError');
+
+        if (
+          response.status === 401 ||
+          errorMessage.includes('incorrect') ||
+          errorMessage.includes('invalid')
+        ) {
+          setPasswordError(t('passwordIncorrect'));
+          setVerifying(false);
+          return;
+        }
+
+        throw new Error(errorMessage);
+      }
+
+      const responseData = await response.json();
+      setData(responseData);
+      setVerifying(false);
+    } catch (err) {
+      console.error('Error verifying password:', err);
+      setPasswordError(err instanceof Error ? err.message : t('verifyError'));
+      setVerifying(false);
+    }
+  };
+
+  useEffect(() => {
+    if (hasCalledApi.current) return;
+    hasCalledApi.current = true;
+    checkRequirements();
+  }, [token]);
+
+  const handlePasswordSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!password.trim()) {
+      setPasswordError(t('passwordMissing'));
+      return;
+    }
+    fetchDocumentsWithPassword(password.trim());
+  };
+
+  const handleDownload = async (doc: Document) => {
+    setDownloading(doc.id);
+
+    try {
+      window.open(doc.downloadUrl, '_blank');
+    } catch (err) {
+      console.error('Error downloading document:', err);
+      alert(t('downloadError'));
+    } finally {
+      setTimeout(() => setDownloading(null), 500);
+    }
+  };
+
+  const handleRefresh = () => {
+    setLoading(true);
+    setError(null);
+    setData(null);
+    setRequirements(null);
+    setPassword('');
+    setPasswordError(null);
+    hasCalledApi.current = false;
+    checkRequirements();
+  };
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-brand-gray">
+        <div className="bg-white p-8 rounded-xl shadow-lg max-w-md w-full text-center">
+          <Loader2 className="w-16 h-16 text-brand-turquoise mx-auto mb-4 animate-spin" />
+          <h1 className="text-2xl font-bold text-gray-900 mb-2">{t('loading')}</h1>
+          <p className="text-gray-600">{t('loadingHint')}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-brand-gray">
+        <div className="bg-white p-8 rounded-xl shadow-lg max-w-md w-full text-center">
+          <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">{t('errorTitle')}</h1>
+          <p className="text-gray-600 mb-6">{error}</p>
+          <button
+            onClick={handleRefresh}
+            className="w-full px-4 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 font-medium transition-colors"
+          >
+            {t('retry')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Password form state
+  if (requirements?.requiresPassword && !data) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-brand-gray p-4">
+        <div className="bg-white p-8 rounded-xl shadow-lg max-w-md w-full">
+          <div className="text-center mb-6">
+            <div className="mx-auto w-16 h-16 bg-brand-turquoise/10 rounded-full flex items-center justify-center mb-4">
+              <Lock className="w-8 h-8 text-brand-turquoise" />
+            </div>
+            <h1 className="text-2xl font-bold text-gray-900 mb-2">{t('password.title')}</h1>
+            <p className="text-gray-600">
+              {t('password.intro')}
+            </p>
+            {requirements.bookingNumber && (
+              <p className="mt-2 text-sm text-gray-500">
+                {t('password.bookingLabel')} <span className="font-mono font-bold">{requirements.bookingNumber}</span>
+              </p>
+            )}
+          </div>
+
+          <form onSubmit={handlePasswordSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+                {t('password.passwordLabel')}
+              </label>
+              <div className="relative">
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  id="password"
+                  value={password}
+                  onChange={e => setPassword(e.target.value.toUpperCase())}
+                  placeholder={t('password.passwordPlaceholder')}
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-brand-turquoise text-center text-xl tracking-widest font-mono uppercase"
+                  autoComplete="off"
+                  autoFocus
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                >
+                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
+                </button>
+              </div>
+              {passwordError && (
+                <p className="mt-2 text-sm text-red-600 flex items-center gap-1">
+                  <AlertCircle className="w-4 h-4" />
+                  {passwordError}
+                </p>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              disabled={verifying}
+              className="w-full px-4 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 disabled:opacity-50 disabled:cursor-not-allowed font-medium transition-colors flex items-center justify-center gap-2"
+            >
+              {verifying ? (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                  {t('password.verifying')}
+                </>
+              ) : (
+                <>
+                  <Lock className="w-5 h-5" />
+                  {t('password.submit')}
+                </>
+              )}
+            </button>
+          </form>
+
+          <div className="mt-6 p-4 bg-amber-50 border border-amber-200 rounded-lg">
+            <p className="text-sm text-amber-800">
+              <strong>{t('password.helpTitle')}</strong>
+              <br />
+              {t('password.helpBody')}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  const { booking, documents } = data;
+
+  return (
+    <div className="min-h-screen bg-brand-gray">
+      {/* Header */}
+      <header className="bg-white shadow-sm border-b">
+        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Image
+              src="/assets/logos/logo-black.svg"
+              alt="Xpeditis"
+              width={40}
+              height={48}
+              className="h-auto"
+            />
+          </div>
+          <button
+            onClick={handleRefresh}
+            className="text-sm text-brand-turquoise hover:text-brand-navy font-medium"
+          >
+            {t('header.refresh')}
+          </button>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-4 py-8">
+        {/* Booking Summary Card */}
+        <div className="bg-white rounded-xl shadow-md overflow-hidden mb-6">
+          <div className="bg-gradient-to-r from-brand-navy to-brand-navy/80 px-6 py-4">
+            <div className="flex items-center justify-center gap-4 text-white">
+              <span className="text-2xl font-bold">{booking.origin}</span>
+              <ArrowRight className="w-6 h-6" />
+              <span className="text-2xl font-bold">{booking.destination}</span>
+            </div>
+            {booking.bookingNumber && (
+              <p className="text-center text-white/70 text-sm mt-1">
+                {t('summary.bookingNumberPrefix')} {booking.bookingNumber}
+              </p>
+            )}
+          </div>
+
+          <div className="p-6">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="text-center p-3 bg-gray-50 rounded-lg">
+                <Package className="w-5 h-5 text-gray-500 mx-auto mb-1" />
+                <p className="text-xs text-gray-500">{t('summary.volume')}</p>
+                <p className="font-semibold text-gray-900">{booking.volumeCBM} CBM</p>
+              </div>
+              <div className="text-center p-3 bg-gray-50 rounded-lg">
+                <Package className="w-5 h-5 text-gray-500 mx-auto mb-1" />
+                <p className="text-xs text-gray-500">{t('summary.weight')}</p>
+                <p className="font-semibold text-gray-900">{booking.weightKG} kg</p>
+              </div>
+              <div className="text-center p-3 bg-gray-50 rounded-lg">
+                <Clock className="w-5 h-5 text-gray-500 mx-auto mb-1" />
+                <p className="text-xs text-gray-500">{t('summary.transit')}</p>
+                <p className="font-semibold text-gray-900">{t('summary.transitDays', { count: booking.transitDays })}</p>
+              </div>
+              <div className="text-center p-3 bg-gray-50 rounded-lg">
+                <Ship className="w-5 h-5 text-gray-500 mx-auto mb-1" />
+                <p className="text-xs text-gray-500">{t('summary.type')}</p>
+                <p className="font-semibold text-gray-900">{booking.containerType}</p>
+              </div>
+            </div>
+
+            <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
+              <span className="text-gray-500">
+                {t('summary.carrierLabel')}{' '}
+                <span className="text-gray-900 font-medium">{booking.carrierName}</span>
+              </span>
+              <span className="text-gray-500">
+                {t('summary.refLabel')}{' '}
+                <span className="font-mono text-gray-900">
+                  {booking.bookingNumber || booking.id.substring(0, 8).toUpperCase()}
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Documents Section */}
+        <div className="bg-white rounded-xl shadow-md overflow-hidden">
+          <div className="px-6 py-4 border-b border-gray-100">
+            <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+              <FileText className="w-5 h-5 text-brand-turquoise" />
+              {t('list.heading', { count: documents.length })}
+            </h2>
+          </div>
+
+          {documents.length === 0 ? (
+            <div className="p-8 text-center">
+              <AlertCircle className="w-12 h-12 text-gray-400 mx-auto mb-3" />
+              <p className="text-gray-600">{t('list.empty')}</p>
+              <p className="text-gray-500 text-sm mt-1">
+                {t('list.emptyHint')}
+              </p>
+            </div>
+          ) : (
+            <div className="divide-y divide-gray-100">
+              {documents.map(doc => (
+                <div
+                  key={doc.id}
+                  className="px-6 py-4 flex items-center justify-between hover:bg-gray-50 transition-colors"
+                >
+                  <div className="flex items-center gap-4">
+                    <span className="text-2xl">{getFileIcon(doc.mimeType)}</span>
+                    <div>
+                      <p className="font-medium text-gray-900">{doc.fileName}</p>
+                      <div className="flex items-center gap-2 mt-1">
+                        <span className="text-xs px-2 py-0.5 bg-brand-turquoise/10 text-brand-navy rounded-full">
+                          {getDocumentTypeLabel(doc.type)}
+                        </span>
+                        <span className="text-xs text-gray-500">{formatFileSize(doc.size)}</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <button
+                    onClick={() => handleDownload(doc)}
+                    disabled={downloading === doc.id}
+                    className="flex items-center gap-2 px-4 py-2 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+                  >
+                    {downloading === doc.id ? (
+                      <>
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        <span>...</span>
+                      </>
+                    ) : (
+                      <>
+                        <Download className="w-4 h-4" />
+                        <span>{t('list.download')}</span>
+                      </>
+                    )}
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Info */}
+        <p className="mt-6 text-center text-sm text-gray-500">
+          {t('footerNote')}
+        </p>
+      </main>
+
+      {/* Footer */}
+      <footer className="mt-auto py-6 text-center text-sm text-brand-navy/50">
+        <p>{t('footer', { year: new Date().getFullYear() })}</p>
+      </footer>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/carrier/reject/[token]/page.tsx b/apps/frontend/app/[locale]/carrier/reject/[token]/page.tsx
similarity index 75%
rename from apps/frontend/app/carrier/reject/[token]/page.tsx
rename to apps/frontend/app/[locale]/carrier/reject/[token]/page.tsx
index 17df849..be68300 100644
--- a/apps/frontend/app/carrier/reject/[token]/page.tsx
+++ b/apps/frontend/app/[locale]/carrier/reject/[token]/page.tsx
@@ -1,153 +1,153 @@
-'use client';
-
-import { useEffect, useState, useRef } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { XCircle, Loader2, CheckCircle } from 'lucide-react';
-
-export default function CarrierRejectPage() {
-  const params = useParams();
-  const router = useRouter();
-  const token = params.token as string;
-
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [countdown, setCountdown] = useState(5);
-
-  // Prevent double API calls (React 18 StrictMode issue)
-  const hasCalledApi = useRef(false);
-
-  useEffect(() => {
-    const rejectBooking = async () => {
-      // Protection contre les doubles appels
-      if (hasCalledApi.current) {
-        return;
-      }
-      hasCalledApi.current = true;
-
-      if (!token) {
-        setError('Token manquant');
-        setLoading(false);
-        return;
-      }
-
-      try {
-        // Appeler l'API backend pour refuser le booking
-        const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
-        const response = await fetch(`${apiUrl}/api/v1/csv-booking-actions/reject/${token}`, {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        });
-
-        if (!response.ok) {
-          let errorData;
-          try {
-            errorData = await response.json();
-          } catch (e) {
-            errorData = { message: `Erreur HTTP ${response.status}` };
-          }
-
-          let errorMessage = errorData.message || 'Erreur lors du refus du booking';
-
-          if (errorMessage.includes('status REJECTED')) {
-            errorMessage = 'Ce booking a déjà été refusé.';
-          } else if (errorMessage.includes('status ACCEPTED')) {
-            errorMessage = 'Ce booking a déjà été accepté.';
-          } else if (errorMessage.includes('not found') || errorMessage.includes('Booking not found')) {
-            errorMessage = 'Booking introuvable. Le lien peut avoir expiré.';
-          }
-
-          throw new Error(errorMessage);
-        }
-
-        setLoading(false);
-
-        // Démarrer le compte à rebours
-        const timer = setInterval(() => {
-          setCountdown((prev) => {
-            if (prev <= 1) {
-              clearInterval(timer);
-              router.push('/');
-              return 0;
-            }
-            return prev - 1;
-          });
-        }, 1000);
-
-        return () => clearInterval(timer);
-      } catch (err) {
-        console.error('Error rejecting booking:', err);
-        setError(err instanceof Error ? err.message : 'Erreur lors du refus');
-        setLoading(false);
-      }
-    };
-
-    rejectBooking();
-  }, [token, router]);
-
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-orange-50">
-        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
-          <Loader2 className="w-16 h-16 text-orange-600 mx-auto mb-4 animate-spin" />
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">
-            Traitement en cours...
-          </h1>
-          <p className="text-gray-600">
-            Nous traitons votre refus.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-orange-50">
-        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
-          <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
-          <h1 className="text-2xl font-bold text-gray-900 mb-4">Erreur</h1>
-          <p className="text-gray-600 mb-6">{error}</p>
-          <button
-            onClick={() => router.push('/')}
-            className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
-          >
-            Retour à l'accueil
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-orange-50 to-red-50">
-      <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
-        <CheckCircle className="w-20 h-20 text-orange-500 mx-auto mb-6" />
-        <h1 className="text-3xl font-bold text-gray-900 mb-4">
-          Merci de votre réponse
-        </h1>
-
-        <div className="bg-orange-50 border-2 border-orange-200 rounded-lg p-6 mb-6">
-          <p className="text-orange-800 font-medium text-lg mb-2">
-            ✓ Votre refus a bien été pris en compte
-          </p>
-          <p className="text-orange-700 text-sm">
-            Nous avons bien enregistré votre décision concernant cette demande de transport.
-          </p>
-        </div>
-
-        <p className="text-gray-500 text-sm mb-4">
-          Redirection vers la page d'accueil dans {countdown} seconde{countdown > 1 ? 's' : ''}...
-        </p>
-
-        <button
-          onClick={() => router.push('/')}
-          className="w-full px-6 py-3 bg-orange-600 text-white rounded-lg hover:bg-orange-700 font-semibold transition-colors"
-        >
-          Retour à l'accueil
-        </button>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { useParams } from 'next/navigation';
+import { useRouter } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+import { XCircle, Loader2, CheckCircle } from 'lucide-react';
+
+export default function CarrierRejectPage() {
+  const params = useParams();
+  const router = useRouter();
+  const token = params.token as string;
+  const t = useTranslations('carrierPortal');
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [countdown, setCountdown] = useState(5);
+
+  // Prevent double API calls (React 18 StrictMode issue)
+  const hasCalledApi = useRef(false);
+
+  useEffect(() => {
+    const rejectBooking = async () => {
+      if (hasCalledApi.current) {
+        return;
+      }
+      hasCalledApi.current = true;
+
+      if (!token) {
+        setError(t('common.tokenMissing'));
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
+        const response = await fetch(`${apiUrl}/api/v1/csv-booking-actions/reject/${token}`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+
+        if (!response.ok) {
+          let errorData;
+          try {
+            errorData = await response.json();
+          } catch (e) {
+            errorData = { message: `HTTP ${response.status}` };
+          }
+
+          let errorMessage = errorData.message || t('reject.errorFallback');
+
+          if (errorMessage.includes('status REJECTED')) {
+            errorMessage = t('common.bookingAlreadyRejected');
+          } else if (errorMessage.includes('status ACCEPTED')) {
+            errorMessage = t('common.bookingAlreadyAccepted');
+          } else if (errorMessage.includes('not found') || errorMessage.includes('Booking not found')) {
+            errorMessage = t('common.bookingNotFound');
+          }
+
+          throw new Error(errorMessage);
+        }
+
+        setLoading(false);
+
+        const timer = setInterval(() => {
+          setCountdown((prev) => {
+            if (prev <= 1) {
+              clearInterval(timer);
+              router.push('/');
+              return 0;
+            }
+            return prev - 1;
+          });
+        }, 1000);
+
+        return () => clearInterval(timer);
+      } catch (err) {
+        console.error('Error rejecting booking:', err);
+        setError(err instanceof Error ? err.message : t('reject.errorGeneric'));
+        setLoading(false);
+      }
+    };
+
+    rejectBooking();
+  }, [token, router, t]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-orange-50">
+        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
+          <Loader2 className="w-16 h-16 text-orange-600 mx-auto mb-4 animate-spin" />
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">
+            {t('reject.loadingTitle')}
+          </h1>
+          <p className="text-gray-600">
+            {t('reject.loadingMessage')}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-orange-50">
+        <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
+          <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">{t('common.errorTitle')}</h1>
+          <p className="text-gray-600 mb-6">{error}</p>
+          <button
+            onClick={() => router.push('/')}
+            className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+          >
+            {t('common.backHome')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-orange-50 to-red-50">
+      <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
+        <CheckCircle className="w-20 h-20 text-orange-500 mx-auto mb-6" />
+        <h1 className="text-3xl font-bold text-gray-900 mb-4">
+          {t('reject.thanksTitle')}
+        </h1>
+
+        <div className="bg-orange-50 border-2 border-orange-200 rounded-lg p-6 mb-6">
+          <p className="text-orange-800 font-medium text-lg mb-2">
+            {t('reject.successHeadline')}
+          </p>
+          <p className="text-orange-700 text-sm">
+            {t('reject.successBody')}
+          </p>
+        </div>
+
+        <p className="text-gray-500 text-sm mb-4">
+          {t('common.redirecting', { countdown })}
+        </p>
+
+        <button
+          onClick={() => router.push('/')}
+          className="w-full px-6 py-3 bg-orange-600 text-white rounded-lg hover:bg-orange-700 font-semibold transition-colors"
+        >
+          {t('common.backHome')}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/compliance/page.tsx b/apps/frontend/app/[locale]/compliance/page.tsx
similarity index 65%
rename from apps/frontend/app/compliance/page.tsx
rename to apps/frontend/app/[locale]/compliance/page.tsx
index 3ce966e..81275a4 100644
--- a/apps/frontend/app/compliance/page.tsx
+++ b/apps/frontend/app/[locale]/compliance/page.tsx
@@ -1,429 +1,368 @@
-'use client';
-
-import { useRef } from 'react';
-import { motion, useInView } from 'framer-motion';
-import {
-  Shield,
-  UserCheck,
-  Database,
-  FileText,
-  Globe,
-  Clock,
-  CheckCircle,
-  Download,
-  Trash2,
-  Edit,
-  Eye,
-  Mail,
-} from 'lucide-react';
-import Link from 'next/link';
-import { LandingHeader, LandingFooter } from '@/components/layout';
-
-export default function CompliancePage() {
-  const heroRef = useRef(null);
-  const contentRef = useRef(null);
-
-  const isHeroInView = useInView(heroRef, { once: true });
-  const isContentInView = useInView(contentRef, { once: true });
-
-  const rights = [
-    {
-      icon: Eye,
-      title: 'Droit d\'accès',
-      description: 'Obtenez une copie de toutes les données personnelles que nous détenons sur vous.',
-    },
-    {
-      icon: Edit,
-      title: 'Droit de rectification',
-      description: 'Faites corriger vos données personnelles si elles sont inexactes ou incomplètes.',
-    },
-    {
-      icon: Trash2,
-      title: 'Droit à l\'effacement',
-      description: 'Demandez la suppression de vos données personnelles ("droit à l\'oubli").',
-    },
-    {
-      icon: Download,
-      title: 'Droit à la portabilité',
-      description: 'Recevez vos données dans un format structuré, lisible par machine.',
-    },
-  ];
-
-  const principles = [
-    {
-      icon: Database,
-      title: 'Minimisation des données',
-      description: 'Nous ne collectons que les données strictement nécessaires à nos services.',
-    },
-    {
-      icon: Clock,
-      title: 'Limitation de conservation',
-      description: 'Vos données sont conservées uniquement le temps nécessaire.',
-    },
-    {
-      icon: Shield,
-      title: 'Intégrité et confidentialité',
-      description: 'Vos données sont protégées contre tout accès non autorisé.',
-    },
-    {
-      icon: FileText,
-      title: 'Transparence',
-      description: 'Nous vous informons clairement sur l\'utilisation de vos données.',
-    },
-  ];
-
-  const measures = [
-    {
-      category: 'Mesures techniques',
-      items: [
-        'Chiffrement des données au repos et en transit',
-        'Authentification multi-facteurs',
-        'Journalisation des accès aux données',
-        'Sauvegardes chiffrées régulières',
-        'Pseudonymisation des données sensibles',
-      ],
-    },
-    {
-      category: 'Mesures organisationnelles',
-      items: [
-        'Délégué à la Protection des Données (DPO) désigné',
-        'Formation régulière des employés',
-        'Politiques de sécurité documentées',
-        'Processus de gestion des incidents',
-        'Audits de conformité réguliers',
-      ],
-    },
-  ];
-
-  const containerVariants = {
-    hidden: { opacity: 0, y: 50 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.6,
-        staggerChildren: 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: 0.5 },
-    },
-  };
-
-  return (
-    <div className="min-h-screen bg-white">
-      <LandingHeader />
-
-      {/* Hero Section */}
-      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
-          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center"
-          >
-            <motion.div
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
-            >
-              <Globe className="w-5 h-5 text-brand-turquoise" />
-              <span className="text-white/90 text-sm font-medium">Conformité européenne</span>
-            </motion.div>
-
-            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
-              Conformité
-              <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
-                RGPD
-              </span>
-            </h1>
-
-            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
-              Xpeditis s'engage à respecter le Règlement Général sur la Protection des Données (RGPD)
-              et à garantir vos droits en matière de protection des données personnelles.
-            </p>
-
-            <div className="flex items-center justify-center space-x-4">
-              <div className="flex items-center space-x-2 bg-white/10 px-4 py-2 rounded-lg">
-                <CheckCircle className="w-5 h-5 text-brand-green" />
-                <span className="text-white text-sm">Conforme RGPD</span>
-              </div>
-              <div className="flex items-center space-x-2 bg-white/10 px-4 py-2 rounded-lg">
-                <UserCheck className="w-5 h-5 text-brand-green" />
-                <span className="text-white text-sm">DPO désigné</span>
-              </div>
-            </div>
-          </motion.div>
-        </div>
-
-        {/* Wave */}
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
-            <path
-              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
-              fill="white"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* Your Rights */}
-      <section ref={contentRef} className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
-              Vos droits RGPD
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Le RGPD vous confère des droits renforcés sur vos données personnelles
-            </p>
-          </motion.div>
-
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isContentInView ? 'visible' : 'hidden'}
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
-          >
-            {rights.map((right, index) => {
-              const IconComponent = right.icon;
-              return (
-                <motion.div
-                  key={index}
-                  variants={itemVariants}
-                  whileHover={{ y: -5 }}
-                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all text-center"
-                >
-                  <div className="w-16 h-16 bg-brand-turquoise/10 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <IconComponent className="w-8 h-8 text-brand-turquoise" />
-                  </div>
-                  <h3 className="text-xl font-bold text-brand-navy mb-3">{right.title}</h3>
-                  <p className="text-gray-600">{right.description}</p>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-
-          {/* Exercise Rights CTA */}
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8, delay: 0.4 }}
-            className="mt-12 text-center"
-          >
-            <p className="text-gray-600 mb-4">
-              Pour exercer vos droits, connectez-vous à votre compte ou contactez notre DPO
-            </p>
-            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
-              <Link
-                href="/login"
-                className="px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
-              >
-                Accéder à mon compte
-              </Link>
-              <a
-                href="mailto:dpo@xpeditis.com"
-                className="px-6 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-colors font-medium"
-              >
-                Contacter le DPO
-              </a>
-            </div>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Principles */}
-      <section className="py-20 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
-              Nos principes de protection des données
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Des principes fondamentaux qui guident notre traitement des données
-            </p>
-          </motion.div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-            {principles.map((principle, index) => {
-              const IconComponent = principle.icon;
-              return (
-                <motion.div
-                  key={index}
-                  initial={{ opacity: 0, scale: 0.9 }}
-                  whileInView={{ opacity: 1, scale: 1 }}
-                  viewport={{ once: true }}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
-                  className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100"
-                >
-                  <div className="w-12 h-12 bg-brand-green/10 rounded-xl flex items-center justify-center mb-4">
-                    <IconComponent className="w-6 h-6 text-brand-green" />
-                  </div>
-                  <h3 className="text-lg font-bold text-brand-navy mb-2">{principle.title}</h3>
-                  <p className="text-gray-600 text-sm">{principle.description}</p>
-                </motion.div>
-              );
-            })}
-          </div>
-        </div>
-      </section>
-
-      {/* Technical & Organizational Measures */}
-      <section className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
-              Mesures de protection
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Des mesures techniques et organisationnelles pour assurer la sécurité de vos données
-            </p>
-          </motion.div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            {measures.map((measure, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, x: index === 0 ? -30 : 30 }}
-                whileInView={{ opacity: 1, x: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.6 }}
-                className="bg-gradient-to-br from-brand-navy to-brand-navy/95 p-8 rounded-2xl"
-              >
-                <h3 className="text-xl font-bold text-white mb-6">{measure.category}</h3>
-                <ul className="space-y-4">
-                  {measure.items.map((item, i) => (
-                    <li key={i} className="flex items-center space-x-3 text-white/80">
-                      <CheckCircle className="w-5 h-5 text-brand-turquoise flex-shrink-0" />
-                      <span>{item}</span>
-                    </li>
-                  ))}
-                </ul>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Data Processing Register */}
-      <section className="py-20 bg-gray-50">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
-          >
-            <div className="flex items-start space-x-4">
-              <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center flex-shrink-0">
-                <FileText className="w-6 h-6 text-brand-turquoise" />
-              </div>
-              <div>
-                <h3 className="text-2xl font-bold text-brand-navy mb-4">
-                  Registre des traitements
-                </h3>
-                <p className="text-gray-600 mb-6">
-                  Conformément à l'article 30 du RGPD, nous tenons un registre des activités de traitement
-                  des données personnelles. Ce registre documente :
-                </p>
-                <ul className="space-y-3 text-gray-600">
-                  <li className="flex items-center space-x-3">
-                    <CheckCircle className="w-5 h-5 text-brand-green flex-shrink-0" />
-                    <span>Les finalités de chaque traitement</span>
-                  </li>
-                  <li className="flex items-center space-x-3">
-                    <CheckCircle className="w-5 h-5 text-brand-green flex-shrink-0" />
-                    <span>Les catégories de données traitées</span>
-                  </li>
-                  <li className="flex items-center space-x-3">
-                    <CheckCircle className="w-5 h-5 text-brand-green flex-shrink-0" />
-                    <span>Les destinataires des données</span>
-                  </li>
-                  <li className="flex items-center space-x-3">
-                    <CheckCircle className="w-5 h-5 text-brand-green flex-shrink-0" />
-                    <span>Les durées de conservation</span>
-                  </li>
-                  <li className="flex items-center space-x-3">
-                    <CheckCircle className="w-5 h-5 text-brand-green flex-shrink-0" />
-                    <span>Les mesures de sécurité appliquées</span>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Contact DPO */}
-      <section className="py-20">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
-          >
-            <UserCheck className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
-            <h3 className="text-2xl font-bold text-white mb-4">
-              Contacter notre DPO
-            </h3>
-            <p className="text-white/80 mb-6 max-w-2xl mx-auto">
-              Notre Délégué à la Protection des Données est à votre disposition pour toute question
-              relative au traitement de vos données personnelles ou à l'exercice de vos droits.
-            </p>
-            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
-              <a
-                href="mailto:dpo@xpeditis.com"
-                className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
-              >
-                <Mail className="w-5 h-5" />
-                <span>dpo@xpeditis.com</span>
-              </a>
-              <Link
-                href="/privacy"
-                className="px-6 py-3 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-colors font-medium"
-              >
-                Politique de confidentialité
-              </Link>
-            </div>
-          </motion.div>
-        </div>
-      </section>
-
-      <LandingFooter />
-    </div>
-  );
-}
+'use client';
+
+import { useRef } from 'react';
+import { useTranslations } from 'next-intl';
+import { motion, useInView } from 'framer-motion';
+import {
+  Shield,
+  UserCheck,
+  Database,
+  FileText,
+  Globe,
+  Clock,
+  CheckCircle,
+  Download,
+  Trash2,
+  Edit,
+  Eye,
+  Mail,
+  type LucideIcon,
+} from 'lucide-react';
+import { Link } from '@/i18n/navigation';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+
+type RightKey = 'access' | 'rectification' | 'erasure' | 'portability';
+type PrincipleKey = 'minimization' | 'retention' | 'integrity' | 'transparency';
+type MeasureKey = 'technical' | 'organizational';
+
+const RIGHTS: { key: RightKey; icon: LucideIcon }[] = [
+  { key: 'access', icon: Eye },
+  { key: 'rectification', icon: Edit },
+  { key: 'erasure', icon: Trash2 },
+  { key: 'portability', icon: Download },
+];
+
+const PRINCIPLES: { key: PrincipleKey; icon: LucideIcon }[] = [
+  { key: 'minimization', icon: Database },
+  { key: 'retention', icon: Clock },
+  { key: 'integrity', icon: Shield },
+  { key: 'transparency', icon: FileText },
+];
+
+const MEASURES: MeasureKey[] = ['technical', 'organizational'];
+const MEASURE_ITEMS = ['item1', 'item2', 'item3', 'item4', 'item5'] as const;
+const REGISTER_ITEMS = ['item1', 'item2', 'item3', 'item4', 'item5'] as const;
+
+export default function CompliancePage() {
+  const t = useTranslations('marketing.compliance');
+  const heroRef = useRef(null);
+  const contentRef = useRef(null);
+
+  const isHeroInView = useInView(heroRef, { once: true });
+  const isContentInView = useInView(contentRef, { once: true });
+
+  const containerVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader />
+
+      {/* Hero Section */}
+      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
+          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
+        </div>
+
+        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center"
+          >
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
+            >
+              <Globe className="w-5 h-5 text-brand-turquoise" />
+              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
+            </motion.div>
+
+            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+              {t('title1')}
+              <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
+                {t('title2')}
+              </span>
+            </h1>
+
+            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
+              {t('intro')}
+            </p>
+
+            <div className="flex items-center justify-center space-x-4">
+              <div className="flex items-center space-x-2 bg-white/10 px-4 py-2 rounded-lg">
+                <CheckCircle className="w-5 h-5 text-brand-green" />
+                <span className="text-white text-sm">{t('badges.compliant')}</span>
+              </div>
+              <div className="flex items-center space-x-2 bg-white/10 px-4 py-2 rounded-lg">
+                <UserCheck className="w-5 h-5 text-brand-green" />
+                <span className="text-white text-sm">{t('badges.dpo')}</span>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Wave */}
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
+            <path
+              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </section>
+
+      {/* Your Rights */}
+      <section ref={contentRef} className="py-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
+              {t('rightsTitle')}
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('rightsSubtitle')}
+            </p>
+          </motion.div>
+
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={isContentInView ? 'visible' : 'hidden'}
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
+          >
+            {RIGHTS.map((right) => {
+              const IconComponent = right.icon;
+              return (
+                <motion.div
+                  key={right.key}
+                  variants={itemVariants}
+                  whileHover={{ y: -5 }}
+                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all text-center"
+                >
+                  <div className="w-16 h-16 bg-brand-turquoise/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <IconComponent className="w-8 h-8 text-brand-turquoise" />
+                  </div>
+                  <h3 className="text-xl font-bold text-brand-navy mb-3">{t(`rights.${right.key}.title`)}</h3>
+                  <p className="text-gray-600">{t(`rights.${right.key}.description`)}</p>
+                </motion.div>
+              );
+            })}
+          </motion.div>
+
+          {/* Exercise Rights CTA */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.4 }}
+            className="mt-12 text-center"
+          >
+            <p className="text-gray-600 mb-4">
+              {t('rightsCta.text')}
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+              <Link
+                href="/login"
+                className="px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
+              >
+                {t('rightsCta.login')}
+              </Link>
+              <a
+                href="mailto:dpo@xpeditis.com"
+                className="px-6 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-colors font-medium"
+              >
+                {t('rightsCta.dpo')}
+              </a>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Principles */}
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
+              {t('principlesTitle')}
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('principlesSubtitle')}
+            </p>
+          </motion.div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {PRINCIPLES.map((principle, index) => {
+              const IconComponent = principle.icon;
+              return (
+                <motion.div
+                  key={principle.key}
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  whileInView={{ opacity: 1, scale: 1 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100"
+                >
+                  <div className="w-12 h-12 bg-brand-green/10 rounded-xl flex items-center justify-center mb-4">
+                    <IconComponent className="w-6 h-6 text-brand-green" />
+                  </div>
+                  <h3 className="text-lg font-bold text-brand-navy mb-2">{t(`principles.${principle.key}.title`)}</h3>
+                  <p className="text-gray-600 text-sm">{t(`principles.${principle.key}.description`)}</p>
+                </motion.div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Technical & Organizational Measures */}
+      <section className="py-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
+              {t('measuresTitle')}
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('measuresSubtitle')}
+            </p>
+          </motion.div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {MEASURES.map((key, index) => (
+              <motion.div
+                key={key}
+                initial={{ opacity: 0, x: index === 0 ? -30 : 30 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6 }}
+                className="bg-gradient-to-br from-brand-navy to-brand-navy/95 p-8 rounded-2xl"
+              >
+                <h3 className="text-xl font-bold text-white mb-6">{t(`measures.${key}.title`)}</h3>
+                <ul className="space-y-4">
+                  {MEASURE_ITEMS.map((itemKey) => (
+                    <li key={itemKey} className="flex items-center space-x-3 text-white/80">
+                      <CheckCircle className="w-5 h-5 text-brand-turquoise flex-shrink-0" />
+                      <span>{t(`measures.${key}.${itemKey}` as any)}</span>
+                    </li>
+                  ))}
+                </ul>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Data Processing Register */}
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
+          >
+            <div className="flex items-start space-x-4">
+              <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center flex-shrink-0">
+                <FileText className="w-6 h-6 text-brand-turquoise" />
+              </div>
+              <div>
+                <h3 className="text-2xl font-bold text-brand-navy mb-4">
+                  {t('register.title')}
+                </h3>
+                <p className="text-gray-600 mb-6">
+                  {t('register.body')}
+                </p>
+                <ul className="space-y-3 text-gray-600">
+                  {REGISTER_ITEMS.map((itemKey) => (
+                    <li key={itemKey} className="flex items-center space-x-3">
+                      <CheckCircle className="w-5 h-5 text-brand-green flex-shrink-0" />
+                      <span>{t(`register.${itemKey}` as any)}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Contact DPO */}
+      <section className="py-20">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
+          >
+            <UserCheck className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
+            <h3 className="text-2xl font-bold text-white mb-4">
+              {t('dpo.title')}
+            </h3>
+            <p className="text-white/80 mb-6 max-w-2xl mx-auto">
+              {t('dpo.body')}
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+              <a
+                href="mailto:dpo@xpeditis.com"
+                className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
+              >
+                <Mail className="w-5 h-5" />
+                <span>dpo@xpeditis.com</span>
+              </a>
+              <Link
+                href="/privacy"
+                className="px-6 py-3 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-colors font-medium"
+              >
+                {t('dpo.privacyLink')}
+              </Link>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      <LandingFooter />
+    </div>
+  );
+}
diff --git a/apps/frontend/app/contact/page.tsx b/apps/frontend/app/[locale]/contact/page.tsx
similarity index 71%
rename from apps/frontend/app/contact/page.tsx
rename to apps/frontend/app/[locale]/contact/page.tsx
index 440701e..4f1901a 100644
--- a/apps/frontend/app/contact/page.tsx
+++ b/apps/frontend/app/[locale]/contact/page.tsx
@@ -1,683 +1,628 @@
-'use client';
-
-import { useState, useRef } from 'react';
-import { motion, useInView } from 'framer-motion';
-import {
-  Mail,
-  Phone,
-  MapPin,
-  Clock,
-  Send,
-  MessageSquare,
-  Headphones,
-  Building2,
-  CheckCircle2,
-  Loader2,
-  Shield,
-  Zap,
-  BookOpen,
-  ArrowRight,
-} from 'lucide-react';
-import { LandingHeader, LandingFooter } from '@/components/layout';
-import { sendContactForm } from '@/lib/api/auth';
-
-export default function ContactPage() {
-  const [formData, setFormData] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    company: '',
-    phone: '',
-    subject: '',
-    message: '',
-  });
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const [error, setError] = useState('');
-
-  const heroRef = useRef(null);
-  const formRef = useRef(null);
-  const contactRef = useRef(null);
-  const afterSubmitRef = useRef(null);
-  const quickAccessRef = useRef(null);
-
-  const isHeroInView = useInView(heroRef, { once: true });
-  const isFormInView = useInView(formRef, { once: true });
-  const isContactInView = useInView(contactRef, { once: true });
-  const isAfterSubmitInView = useInView(afterSubmitRef, { once: true });
-  const isQuickAccessInView = useInView(quickAccessRef, { once: true });
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setIsSubmitting(true);
-
-    try {
-      await sendContactForm({
-        firstName: formData.firstName,
-        lastName: formData.lastName,
-        email: formData.email,
-        company: formData.company || undefined,
-        phone: formData.phone || undefined,
-        subject: formData.subject,
-        message: formData.message,
-      });
-      setIsSubmitted(true);
-    } catch (err: any) {
-      setError(err.message || "Une erreur est survenue lors de l'envoi. Veuillez réessayer.");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
-  ) => {
-    setFormData((prev) => ({
-      ...prev,
-      [e.target.name]: e.target.value,
-    }));
-  };
-
-  const contactMethods = [
-    {
-      icon: Mail,
-      title: 'Email',
-      description: 'Envoyez-nous un email',
-      value: 'contact@xpeditis.com',
-      color: 'from-blue-500 to-cyan-500',
-    },
-    {
-      icon: Phone,
-      title: 'Téléphone',
-      description: 'Appelez-nous',
-      value: '+33 1 23 45 67 89',
-      color: 'from-green-500 to-emerald-500',
-    },
-    {
-      icon: MessageSquare,
-      title: 'Chat en direct',
-      description: 'Discutez avec notre équipe',
-      value: 'Disponible 24/7',
-      color: 'from-purple-500 to-pink-500',
-    },
-    {
-      icon: Headphones,
-      title: 'Support',
-      description: 'Support client',
-      value: 'support@xpeditis.com',
-      color: 'from-orange-500 to-red-500',
-    },
-  ];
-
-  const offices = [
-    {
-      city: 'Paris',
-      address: '123 Avenue des Champs-Élysées',
-      postalCode: '75008 Paris, France',
-      phone: '+33 1 23 45 67 89',
-      email: 'paris@xpeditis.com',
-      isHQ: true,
-    },
-  ];
-
-  const subjects = [
-    { value: '', label: 'Sélectionnez un sujet' },
-    { value: 'demo', label: 'Demande de démonstration' },
-    { value: 'pricing', label: 'Questions sur les tarifs' },
-    { value: 'partnership', label: 'Partenariat' },
-    { value: 'support', label: 'Support technique' },
-    { value: 'press', label: 'Relations presse' },
-    { value: 'careers', label: 'Recrutement' },
-    { value: 'other', label: 'Autre' },
-  ];
-
-  const containerVariants = {
-    hidden: { opacity: 0, y: 50 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.6,
-        staggerChildren: 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: 0.5 },
-    },
-  };
-
-  return (
-    <div className="min-h-screen bg-white">
-      <LandingHeader activePage="contact" />
-
-      {/* Hero Section */}
-      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
-          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center"
-          >
-            <motion.div
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
-            >
-              <Mail className="w-5 h-5 text-brand-turquoise" />
-              <span className="text-white/90 text-sm font-medium">Nous contacter</span>
-            </motion.div>
-
-            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
-              Une question ?
-              <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
-                Nous sommes là pour vous
-              </span>
-            </h1>
-
-            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
-              Notre équipe est disponible pour répondre à toutes vos questions sur notre plateforme,
-              nos services et nos tarifs. N'hésitez pas à nous contacter !
-            </p>
-          </motion.div>
-        </div>
-
-        {/* Wave */}
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
-            <path
-              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
-              fill="white"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* Contact Methods */}
-      <section ref={contactRef} className="py-16 bg-gray-50">
-        <motion.div
-          variants={containerVariants}
-          initial="hidden"
-          animate={isContactInView ? 'visible' : 'hidden'}
-          className="max-w-7xl mx-auto px-6 lg:px-8"
-        >
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {contactMethods.map((method, index) => {
-              const IconComponent = method.icon;
-              return (
-                <motion.div
-                  key={index}
-                  variants={itemVariants}
-                  className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100"
-                >
-                  <div
-                    className={`w-12 h-12 rounded-xl bg-gradient-to-br ${method.color} flex items-center justify-center mb-4`}
-                  >
-                    <IconComponent className="w-6 h-6 text-white" />
-                  </div>
-                  <h3 className="text-lg font-bold text-brand-navy mb-1">{method.title}</h3>
-                  <p className="text-gray-500 text-sm mb-2">{method.description}</p>
-                  <p className="text-brand-turquoise font-medium">{method.value}</p>
-                </motion.div>
-              );
-            })}
-          </div>
-        </motion.div>
-      </section>
-
-      {/* Contact Form & Info */}
-      <section ref={formRef} className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-            {/* Form */}
-            <motion.div
-              initial={{ opacity: 0, x: -50 }}
-              animate={isFormInView ? { opacity: 1, x: 0 } : {}}
-              transition={{ duration: 0.8 }}
-            >
-              <h2 className="text-3xl font-bold text-brand-navy mb-6">Envoyez-nous un message</h2>
-              <p className="text-gray-600 mb-8">
-                Remplissez le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais.
-              </p>
-
-              {isSubmitted ? (
-                <motion.div
-                  initial={{ opacity: 0, scale: 0.9 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  className="bg-green-50 border border-green-200 rounded-2xl p-8 text-center"
-                >
-                  <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <CheckCircle2 className="w-8 h-8 text-green-600" />
-                  </div>
-                  <h3 className="text-2xl font-bold text-green-800 mb-2">Message envoyé !</h3>
-                  <p className="text-green-700 mb-6">
-                    Merci pour votre message. Notre équipe vous répondra dans les 24 heures.
-                  </p>
-                  <button
-                    onClick={() => {
-                      setIsSubmitted(false);
-                      setFormData({
-                        firstName: '',
-                        lastName: '',
-                        email: '',
-                        company: '',
-                        phone: '',
-                        subject: '',
-                        message: '',
-                      });
-                    }}
-                    className="text-brand-turquoise font-medium hover:underline"
-                  >
-                    Envoyer un autre message
-                  </button>
-                </motion.div>
-              ) : (
-                <form onSubmit={handleSubmit} className="space-y-6">
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <div>
-                      <label htmlFor="firstName" className="block text-sm font-medium text-gray-700 mb-2">
-                        Prénom *
-                      </label>
-                      <input
-                        type="text"
-                        id="firstName"
-                        name="firstName"
-                        required
-                        value={formData.firstName}
-                        onChange={handleChange}
-                        className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all"
-                        placeholder="Jean"
-                      />
-                    </div>
-                    <div>
-                      <label htmlFor="lastName" className="block text-sm font-medium text-gray-700 mb-2">
-                        Nom *
-                      </label>
-                      <input
-                        type="text"
-                        id="lastName"
-                        name="lastName"
-                        required
-                        value={formData.lastName}
-                        onChange={handleChange}
-                        className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all"
-                        placeholder="Dupont"
-                      />
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <div>
-                      <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
-                        Email *
-                      </label>
-                      <input
-                        type="email"
-                        id="email"
-                        name="email"
-                        required
-                        value={formData.email}
-                        onChange={handleChange}
-                        className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all"
-                        placeholder="jean.dupont@exemple.com"
-                      />
-                    </div>
-                    <div>
-                      <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
-                        Téléphone
-                      </label>
-                      <input
-                        type="tel"
-                        id="phone"
-                        name="phone"
-                        value={formData.phone}
-                        onChange={handleChange}
-                        className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all"
-                        placeholder="+33 6 12 34 56 78"
-                      />
-                    </div>
-                  </div>
-
-                  <div>
-                    <label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-2">
-                      Entreprise
-                    </label>
-                    <input
-                      type="text"
-                      id="company"
-                      name="company"
-                      value={formData.company}
-                      onChange={handleChange}
-                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all"
-                      placeholder="Votre entreprise"
-                    />
-                  </div>
-
-                  <div>
-                    <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
-                      Sujet *
-                    </label>
-                    <select
-                      id="subject"
-                      name="subject"
-                      required
-                      value={formData.subject}
-                      onChange={handleChange}
-                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all"
-                    >
-                      {subjects.map((subject) => (
-                        <option key={subject.value} value={subject.value}>
-                          {subject.label}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-
-                  <div>
-                    <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
-                      Message *
-                    </label>
-                    <textarea
-                      id="message"
-                      name="message"
-                      required
-                      rows={5}
-                      value={formData.message}
-                      onChange={handleChange}
-                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all resize-none"
-                      placeholder="Comment pouvons-nous vous aider ?"
-                    />
-                  </div>
-
-                  {error && (
-                    <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
-                      {error}
-                    </div>
-                  )}
-
-                  <button
-                    type="submit"
-                    disabled={isSubmitting}
-                    className="w-full px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-semibold text-lg flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    {isSubmitting ? (
-                      <>
-                        <Loader2 className="w-5 h-5 animate-spin" />
-                        <span>Envoi en cours...</span>
-                      </>
-                    ) : (
-                      <>
-                        <Send className="w-5 h-5" />
-                        <span>Envoyer le message</span>
-                      </>
-                    )}
-                  </button>
-                </form>
-              )}
-            </motion.div>
-
-            {/* Offices */}
-            <motion.div
-              initial={{ opacity: 0, x: 50 }}
-              animate={isFormInView ? { opacity: 1, x: 0 } : {}}
-              transition={{ duration: 0.8, delay: 0.2 }}
-            >
-              <h2 className="text-3xl font-bold text-brand-navy mb-6">Notre bureau</h2>
-              <p className="text-gray-600 mb-8">
-                Retrouvez-nous à Paris ou contactez-nous par email.
-              </p>
-
-              <div className="space-y-6">
-                {offices.map((office, index) => (
-                  <div
-                    key={index}
-                    className={`bg-white p-6 rounded-2xl border-2 transition-all ${
-                      office.isHQ
-                        ? 'border-brand-turquoise shadow-lg'
-                        : 'border-gray-200 hover:border-brand-turquoise/50'
-                    }`}
-                  >
-                    <div className="flex items-start space-x-4">
-                      <div
-                        className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${
-                          office.isHQ ? 'bg-brand-turquoise' : 'bg-gray-100'
-                        }`}
-                      >
-                        <Building2 className={`w-6 h-6 ${office.isHQ ? 'text-white' : 'text-gray-600'}`} />
-                      </div>
-                      <div className="flex-1">
-                        <div className="flex items-center space-x-2 mb-2">
-                          <h3 className="text-xl font-bold text-brand-navy">{office.city}</h3>
-                          {office.isHQ && (
-                            <span className="px-2 py-1 bg-brand-turquoise/10 text-brand-turquoise text-xs font-medium rounded-full">
-                              Siège social
-                            </span>
-                          )}
-                        </div>
-                        <div className="space-y-2 text-gray-600">
-                          <div className="flex items-center space-x-2">
-                            <MapPin className="w-4 h-4 text-gray-400" />
-                            <span>{office.address}</span>
-                          </div>
-                          <div className="flex items-center space-x-2">
-                            <span className="text-gray-400 ml-6">{office.postalCode}</span>
-                          </div>
-                          <div className="flex items-center space-x-2">
-                            <Phone className="w-4 h-4 text-gray-400" />
-                            <a href={`tel:${office.phone.replace(/\s/g, '')}`} className="hover:text-brand-turquoise">
-                              {office.phone}
-                            </a>
-                          </div>
-                          <div className="flex items-center space-x-2">
-                            <Mail className="w-4 h-4 text-gray-400" />
-                            <a href={`mailto:${office.email}`} className="hover:text-brand-turquoise">
-                              {office.email}
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Hours */}
-              <div className="mt-8 bg-gray-50 p-6 rounded-2xl">
-                <div className="flex items-center space-x-3 mb-4">
-                  <Clock className="w-6 h-6 text-brand-turquoise" />
-                  <h3 className="text-lg font-bold text-brand-navy">Horaires d'ouverture</h3>
-                </div>
-                <div className="space-y-2 text-gray-600">
-                  <div className="flex justify-between">
-                    <span>Lundi - Vendredi</span>
-                    <span className="font-medium">9h00 - 18h00</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span>Samedi</span>
-                    <span className="font-medium">10h00 - 14h00</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span>Dimanche</span>
-                    <span className="font-medium text-gray-400">Fermé</span>
-                  </div>
-                </div>
-                <p className="mt-4 text-sm text-gray-500">
-                  * Support technique disponible 24/7 pour les clients Enterprise
-                </p>
-              </div>
-            </motion.div>
-          </div>
-        </div>
-      </section>
-
-      {/* Section 1 : Ce qui se passe après l'envoi */}
-      <section ref={afterSubmitRef} className="py-16 bg-white">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 40 }}
-            animate={isAfterSubmitInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="relative bg-gradient-to-br from-brand-navy to-brand-navy/90 rounded-3xl overflow-hidden p-8 lg:p-12"
-          >
-            {/* Decorative blobs */}
-            <div className="absolute inset-0 opacity-10 pointer-events-none">
-              <div className="absolute -top-10 -left-10 w-64 h-64 bg-brand-turquoise rounded-full blur-3xl" />
-              <div className="absolute -bottom-10 -right-10 w-64 h-64 bg-brand-green rounded-full blur-3xl" />
-            </div>
-
-            <div className="relative z-10">
-              <div className="flex items-center space-x-3 mb-2">
-                <div className="p-2 bg-brand-turquoise/20 rounded-lg">
-                  <Mail className="w-5 h-5 text-brand-turquoise" />
-                </div>
-                <span className="text-brand-turquoise font-semibold uppercase tracking-widest text-xs">
-                  Après votre envoi
-                </span>
-              </div>
-              <h2 className="text-2xl lg:text-3xl font-bold text-white mb-8">
-                Que se passe-t-il après l'envoi de votre message ?
-              </h2>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {/* Notre engagement */}
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={isAfterSubmitInView ? { opacity: 1, y: 0 } : {}}
-                  transition={{ duration: 0.6, delay: 0.2 }}
-                  className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20"
-                >
-                  <div className="flex items-center space-x-3 mb-4">
-                    <div className="w-10 h-10 bg-brand-turquoise/30 rounded-xl flex items-center justify-center flex-shrink-0">
-                      <CheckCircle2 className="w-5 h-5 text-brand-turquoise" />
-                    </div>
-                    <h3 className="text-lg font-bold text-white">Notre engagement</h3>
-                  </div>
-                  <p className="text-white/80 leading-relaxed">
-                    Dès réception de votre demande, un de nos experts logistiques analyse votre
-                    profil et vos besoins. Vous recevrez une réponse personnalisée ou une invitation
-                    pour une démonstration de la plateforme{' '}
-                    <span className="text-brand-turquoise font-semibold">
-                      sous 48 heures ouvrées.
-                    </span>
-                  </p>
-                </motion.div>
-
-                {/* Sécurité */}
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={isAfterSubmitInView ? { opacity: 1, y: 0 } : {}}
-                  transition={{ duration: 0.6, delay: 0.35 }}
-                  className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20"
-                >
-                  <div className="flex items-center space-x-3 mb-4">
-                    <div className="w-10 h-10 bg-brand-green/30 rounded-xl flex items-center justify-center flex-shrink-0">
-                      <Shield className="w-5 h-5 text-brand-green" />
-                    </div>
-                    <h3 className="text-lg font-bold text-white">Sécurité</h3>
-                  </div>
-                  <p className="text-white/80 leading-relaxed">
-                    Vos informations sont protégées et traitées conformément à notre{' '}
-                    <a href="/privacy" className="text-brand-turquoise font-semibold hover:underline">
-                      politique de confidentialité
-                    </a>
-                    . Aucune donnée n'est partagée avec des tiers sans votre accord.
-                  </p>
-                </motion.div>
-              </div>
-            </div>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Section 2 : Accès Rapide */}
-      <section ref={quickAccessRef} className="py-16 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isQuickAccessInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.7 }}
-          >
-            <div className="text-center mb-10">
-              <span className="text-brand-turquoise font-semibold uppercase tracking-widest text-xs">
-                Accès rapide
-              </span>
-              <h2 className="text-2xl lg:text-3xl font-bold text-brand-navy mt-2">
-                Besoin d'une réponse immédiate ?
-              </h2>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
-              {/* Tarification instantanée */}
-              <motion.div
-                initial={{ opacity: 0, x: -30 }}
-                animate={isQuickAccessInView ? { opacity: 1, x: 0 } : {}}
-                transition={{ duration: 0.6, delay: 0.15 }}
-                whileHover={{ y: -4 }}
-                className="bg-white rounded-2xl shadow-lg border border-gray-100 p-8 flex flex-col"
-              >
-                <div className="w-14 h-14 bg-gradient-to-br from-brand-turquoise to-cyan-400 rounded-2xl flex items-center justify-center mb-6 flex-shrink-0">
-                  <Zap className="w-7 h-7 text-white" />
-                </div>
-                <h3 className="text-xl font-bold text-brand-navy mb-3">Tarification instantanée</h3>
-                <p className="text-gray-600 leading-relaxed flex-1 mb-6">
-                  N'attendez pas notre retour pour vos prix. Utilisez notre moteur{' '}
-                  <span className="font-semibold text-brand-navy">Click&amp;Ship</span> pour obtenir
-                  une cotation de fret maritime en moins de 60 secondes.
-                </p>
-                <a
-                  href="/dashboard"
-                  className="inline-flex items-center justify-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-xl font-semibold hover:bg-brand-turquoise/90 transition-all group"
-                >
-                  <span>Accéder au Dashboard</span>
-                  <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
-                </a>
-              </motion.div>
-
-              {/* Wiki Maritime */}
-              <motion.div
-                initial={{ opacity: 0, x: 30 }}
-                animate={isQuickAccessInView ? { opacity: 1, x: 0 } : {}}
-                transition={{ duration: 0.6, delay: 0.25 }}
-                whileHover={{ y: -4 }}
-                className="bg-white rounded-2xl shadow-lg border border-gray-100 p-8 flex flex-col"
-              >
-                <div className="w-14 h-14 bg-gradient-to-br from-brand-navy to-brand-navy/80 rounded-2xl flex items-center justify-center mb-6 flex-shrink-0">
-                  <BookOpen className="w-7 h-7 text-brand-turquoise" />
-                </div>
-                <h3 className="text-xl font-bold text-brand-navy mb-3">Aide rapide</h3>
-                <p className="text-gray-600 leading-relaxed flex-1 mb-6">
-                  Une question sur les Incoterms ou la documentation export ? Notre{' '}
-                  <span className="font-semibold text-brand-navy">Wiki Maritime</span> contient déjà
-                  les réponses aux questions les plus fréquentes.
-                </p>
-                <a
-                  href="/dashboard/wiki"
-                  className="inline-flex items-center justify-center space-x-2 px-6 py-3 border-2 border-brand-navy text-brand-navy rounded-xl font-semibold hover:bg-brand-navy hover:text-white transition-all group"
-                >
-                  <span>Consulter le Wiki</span>
-                  <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
-                </a>
-              </motion.div>
-            </div>
-          </motion.div>
-        </div>
-      </section>
-
-      <LandingFooter />
-    </div>
-  );
-}
+'use client';
+
+import { useState, useRef } from 'react';
+import { useTranslations } from 'next-intl';
+import { motion, useInView } from 'framer-motion';
+import {
+  Mail,
+  Phone,
+  MapPin,
+  Clock,
+  Send,
+  MessageSquare,
+  Headphones,
+  Building2,
+  CheckCircle2,
+  Loader2,
+  Shield,
+  Zap,
+  BookOpen,
+  ArrowRight,
+  type LucideIcon,
+} from 'lucide-react';
+import { Link } from '@/i18n/navigation';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+import { sendContactForm } from '@/lib/api/auth';
+
+type MethodKey = 'email' | 'phone' | 'chat' | 'support';
+type SubjectKey = 'demo' | 'pricing' | 'partnership' | 'support' | 'press' | 'careers' | 'other';
+
+const METHODS: { key: MethodKey; icon: LucideIcon; color: string }[] = [
+  { key: 'email', icon: Mail, color: 'from-blue-500 to-cyan-500' },
+  { key: 'phone', icon: Phone, color: 'from-green-500 to-emerald-500' },
+  { key: 'chat', icon: MessageSquare, color: 'from-purple-500 to-pink-500' },
+  { key: 'support', icon: Headphones, color: 'from-orange-500 to-red-500' },
+];
+
+const SUBJECTS: SubjectKey[] = ['demo', 'pricing', 'partnership', 'support', 'press', 'careers', 'other'];
+
+export default function ContactPage() {
+  const t = useTranslations('marketing.contact');
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    company: '',
+    phone: '',
+    subject: '',
+    message: '',
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [error, setError] = useState('');
+
+  const heroRef = useRef(null);
+  const formRef = useRef(null);
+  const contactRef = useRef(null);
+  const afterSubmitRef = useRef(null);
+  const quickAccessRef = useRef(null);
+
+  const isHeroInView = useInView(heroRef, { once: true });
+  const isFormInView = useInView(formRef, { once: true });
+  const isContactInView = useInView(contactRef, { once: true });
+  const isAfterSubmitInView = useInView(afterSubmitRef, { once: true });
+  const isQuickAccessInView = useInView(quickAccessRef, { once: true });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsSubmitting(true);
+
+    try {
+      await sendContactForm({
+        firstName: formData.firstName,
+        lastName: formData.lastName,
+        email: formData.email,
+        company: formData.company || undefined,
+        phone: formData.phone || undefined,
+        subject: formData.subject,
+        message: formData.message,
+      });
+      setIsSubmitted(true);
+    } catch (err: any) {
+      setError(err.message || t('form.genericError'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+  ) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  const containerVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader activePage="contact" />
+
+      {/* Hero Section */}
+      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
+          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
+        </div>
+
+        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center"
+          >
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
+            >
+              <Mail className="w-5 h-5 text-brand-turquoise" />
+              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
+            </motion.div>
+
+            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+              {t('title1')}
+              <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
+                {t('title2')}
+              </span>
+            </h1>
+
+            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
+              {t('intro')}
+            </p>
+          </motion.div>
+        </div>
+
+        {/* Wave */}
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
+            <path
+              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </section>
+
+      {/* Contact Methods */}
+      <section ref={contactRef} className="py-16 bg-gray-50">
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          animate={isContactInView ? 'visible' : 'hidden'}
+          className="max-w-7xl mx-auto px-6 lg:px-8"
+        >
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {METHODS.map((method) => {
+              const IconComponent = method.icon;
+              return (
+                <motion.div
+                  key={method.key}
+                  variants={itemVariants}
+                  className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100"
+                >
+                  <div
+                    className={`w-12 h-12 rounded-xl bg-gradient-to-br ${method.color} flex items-center justify-center mb-4`}
+                  >
+                    <IconComponent className="w-6 h-6 text-white" />
+                  </div>
+                  <h3 className="text-lg font-bold text-brand-navy mb-1">{t(`methods.${method.key}.title`)}</h3>
+                  <p className="text-gray-500 text-sm mb-2">{t(`methods.${method.key}.description`)}</p>
+                  <p className="text-brand-turquoise font-medium">{t(`methods.${method.key}.value`)}</p>
+                </motion.div>
+              );
+            })}
+          </div>
+        </motion.div>
+      </section>
+
+      {/* Contact Form & Info */}
+      <section ref={formRef} className="py-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+            {/* Form */}
+            <motion.div
+              initial={{ opacity: 0, x: -50 }}
+              animate={isFormInView ? { opacity: 1, x: 0 } : {}}
+              transition={{ duration: 0.8 }}
+            >
+              <h2 className="text-3xl font-bold text-brand-navy mb-6">{t('form.title')}</h2>
+              <p className="text-gray-600 mb-8">
+                {t('form.description')}
+              </p>
+
+              {isSubmitted ? (
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  className="bg-green-50 border border-green-200 rounded-2xl p-8 text-center"
+                >
+                  <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <CheckCircle2 className="w-8 h-8 text-green-600" />
+                  </div>
+                  <h3 className="text-2xl font-bold text-green-800 mb-2">{t('form.successTitle')}</h3>
+                  <p className="text-green-700 mb-6">
+                    {t('form.successBody')}
+                  </p>
+                  <button
+                    onClick={() => {
+                      setIsSubmitted(false);
+                      setFormData({
+                        firstName: '',
+                        lastName: '',
+                        email: '',
+                        company: '',
+                        phone: '',
+                        subject: '',
+                        message: '',
+                      });
+                    }}
+                    className="text-brand-turquoise font-medium hover:underline"
+                  >
+                    {t('form.sendAnother')}
+                  </button>
+                </motion.div>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                      <label htmlFor="firstName" className="block text-sm font-medium text-gray-700 mb-2">
+                        {t('form.firstName')} *
+                      </label>
+                      <input
+                        type="text"
+                        id="firstName"
+                        name="firstName"
+                        required
+                        value={formData.firstName}
+                        onChange={handleChange}
+                        className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all"
+                        placeholder={t('form.firstNamePlaceholder')}
+                      />
+                    </div>
+                    <div>
+                      <label htmlFor="lastName" className="block text-sm font-medium text-gray-700 mb-2">
+                        {t('form.lastName')} *
+                      </label>
+                      <input
+                        type="text"
+                        id="lastName"
+                        name="lastName"
+                        required
+                        value={formData.lastName}
+                        onChange={handleChange}
+                        className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all"
+                        placeholder={t('form.lastNamePlaceholder')}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                      <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+                        {t('form.email')} *
+                      </label>
+                      <input
+                        type="email"
+                        id="email"
+                        name="email"
+                        required
+                        value={formData.email}
+                        onChange={handleChange}
+                        className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all"
+                        placeholder={t('form.emailPlaceholder')}
+                      />
+                    </div>
+                    <div>
+                      <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
+                        {t('form.phone')}
+                      </label>
+                      <input
+                        type="tel"
+                        id="phone"
+                        name="phone"
+                        value={formData.phone}
+                        onChange={handleChange}
+                        className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all"
+                        placeholder={t('form.phonePlaceholder')}
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-2">
+                      {t('form.company')}
+                    </label>
+                    <input
+                      type="text"
+                      id="company"
+                      name="company"
+                      value={formData.company}
+                      onChange={handleChange}
+                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all"
+                      placeholder={t('form.companyPlaceholder')}
+                    />
+                  </div>
+
+                  <div>
+                    <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
+                      {t('form.subject')} *
+                    </label>
+                    <select
+                      id="subject"
+                      name="subject"
+                      required
+                      value={formData.subject}
+                      onChange={handleChange}
+                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all"
+                    >
+                      <option value="">{t('subjects.placeholder')}</option>
+                      {SUBJECTS.map((key) => (
+                        <option key={key} value={key}>
+                          {t(`subjects.${key}`)}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div>
+                    <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
+                      {t('form.message')} *
+                    </label>
+                    <textarea
+                      id="message"
+                      name="message"
+                      required
+                      rows={5}
+                      value={formData.message}
+                      onChange={handleChange}
+                      className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-turquoise focus:border-transparent transition-all resize-none"
+                      placeholder={t('form.messagePlaceholder')}
+                    />
+                  </div>
+
+                  {error && (
+                    <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
+                      {error}
+                    </div>
+                  )}
+
+                  <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className="w-full px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all font-semibold text-lg flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    {isSubmitting ? (
+                      <>
+                        <Loader2 className="w-5 h-5 animate-spin" />
+                        <span>{t('form.submitting')}</span>
+                      </>
+                    ) : (
+                      <>
+                        <Send className="w-5 h-5" />
+                        <span>{t('form.submit')}</span>
+                      </>
+                    )}
+                  </button>
+                </form>
+              )}
+            </motion.div>
+
+            {/* Offices */}
+            <motion.div
+              initial={{ opacity: 0, x: 50 }}
+              animate={isFormInView ? { opacity: 1, x: 0 } : {}}
+              transition={{ duration: 0.8, delay: 0.2 }}
+            >
+              <h2 className="text-3xl font-bold text-brand-navy mb-6">{t('office.title')}</h2>
+              <p className="text-gray-600 mb-8">
+                {t('office.subtitle')}
+              </p>
+
+              <div className="space-y-6">
+                <div className="bg-white p-6 rounded-2xl border-2 border-brand-turquoise shadow-lg">
+                  <div className="flex items-start space-x-4">
+                    <div className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 bg-brand-turquoise">
+                      <Building2 className="w-6 h-6 text-white" />
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center space-x-2 mb-2">
+                        <h3 className="text-xl font-bold text-brand-navy">{t('office.city')}</h3>
+                        <span className="px-2 py-1 bg-brand-turquoise/10 text-brand-turquoise text-xs font-medium rounded-full">
+                          {t('office.hqBadge')}
+                        </span>
+                      </div>
+                      <div className="space-y-2 text-gray-600">
+                        <div className="flex items-center space-x-2">
+                          <MapPin className="w-4 h-4 text-gray-400" />
+                          <span>{t('office.address')}</span>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <span className="text-gray-400 ml-6">{t('office.postalCode')}</span>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <Phone className="w-4 h-4 text-gray-400" />
+                          <a href={`tel:${t('office.phone').replace(/\s/g, '')}`} className="hover:text-brand-turquoise">
+                            {t('office.phone')}
+                          </a>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <Mail className="w-4 h-4 text-gray-400" />
+                          <a href={`mailto:${t('office.email')}`} className="hover:text-brand-turquoise">
+                            {t('office.email')}
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Hours */}
+              <div className="mt-8 bg-gray-50 p-6 rounded-2xl">
+                <div className="flex items-center space-x-3 mb-4">
+                  <Clock className="w-6 h-6 text-brand-turquoise" />
+                  <h3 className="text-lg font-bold text-brand-navy">{t('hours.title')}</h3>
+                </div>
+                <div className="space-y-2 text-gray-600">
+                  <div className="flex justify-between">
+                    <span>{t('hours.weekdays')}</span>
+                    <span className="font-medium">{t('hours.weekdaysHours')}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>{t('hours.saturday')}</span>
+                    <span className="font-medium">{t('hours.saturdayHours')}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>{t('hours.sunday')}</span>
+                    <span className="font-medium text-gray-400">{t('hours.closed')}</span>
+                  </div>
+                </div>
+                <p className="mt-4 text-sm text-gray-500">
+                  {t('hours.supportNote')}
+                </p>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Section 1 : After submit */}
+      <section ref={afterSubmitRef} className="py-16 bg-white">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 40 }}
+            animate={isAfterSubmitInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="relative bg-gradient-to-br from-brand-navy to-brand-navy/90 rounded-3xl overflow-hidden p-8 lg:p-12"
+          >
+            <div className="absolute inset-0 opacity-10 pointer-events-none">
+              <div className="absolute -top-10 -left-10 w-64 h-64 bg-brand-turquoise rounded-full blur-3xl" />
+              <div className="absolute -bottom-10 -right-10 w-64 h-64 bg-brand-green rounded-full blur-3xl" />
+            </div>
+
+            <div className="relative z-10">
+              <div className="flex items-center space-x-3 mb-2">
+                <div className="p-2 bg-brand-turquoise/20 rounded-lg">
+                  <Mail className="w-5 h-5 text-brand-turquoise" />
+                </div>
+                <span className="text-brand-turquoise font-semibold uppercase tracking-widest text-xs">
+                  {t('afterSubmit.badge')}
+                </span>
+              </div>
+              <h2 className="text-2xl lg:text-3xl font-bold text-white mb-8">
+                {t('afterSubmit.title')}
+              </h2>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Commitment */}
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={isAfterSubmitInView ? { opacity: 1, y: 0 } : {}}
+                  transition={{ duration: 0.6, delay: 0.2 }}
+                  className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20"
+                >
+                  <div className="flex items-center space-x-3 mb-4">
+                    <div className="w-10 h-10 bg-brand-turquoise/30 rounded-xl flex items-center justify-center flex-shrink-0">
+                      <CheckCircle2 className="w-5 h-5 text-brand-turquoise" />
+                    </div>
+                    <h3 className="text-lg font-bold text-white">{t('afterSubmit.commitmentTitle')}</h3>
+                  </div>
+                  <p className="text-white/80 leading-relaxed">
+                    {t('afterSubmit.commitmentBody1')}
+                    <span className="text-brand-turquoise font-semibold">
+                      {t('afterSubmit.commitmentHighlight')}
+                    </span>
+                  </p>
+                </motion.div>
+
+                {/* Security */}
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={isAfterSubmitInView ? { opacity: 1, y: 0 } : {}}
+                  transition={{ duration: 0.6, delay: 0.35 }}
+                  className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20"
+                >
+                  <div className="flex items-center space-x-3 mb-4">
+                    <div className="w-10 h-10 bg-brand-green/30 rounded-xl flex items-center justify-center flex-shrink-0">
+                      <Shield className="w-5 h-5 text-brand-green" />
+                    </div>
+                    <h3 className="text-lg font-bold text-white">{t('afterSubmit.securityTitle')}</h3>
+                  </div>
+                  <p className="text-white/80 leading-relaxed">
+                    {t('afterSubmit.securityBody1')}
+                    <Link href="/privacy" className="text-brand-turquoise font-semibold hover:underline">
+                      {t('afterSubmit.privacyLink')}
+                    </Link>
+                    {t('afterSubmit.securityBody2')}
+                  </p>
+                </motion.div>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Section 2: Quick access */}
+      <section ref={quickAccessRef} className="py-16 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isQuickAccessInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.7 }}
+          >
+            <div className="text-center mb-10">
+              <span className="text-brand-turquoise font-semibold uppercase tracking-widest text-xs">
+                {t('quickAccess.badge')}
+              </span>
+              <h2 className="text-2xl lg:text-3xl font-bold text-brand-navy mt-2">
+                {t('quickAccess.title')}
+              </h2>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
+              {/* Instant pricing */}
+              <motion.div
+                initial={{ opacity: 0, x: -30 }}
+                animate={isQuickAccessInView ? { opacity: 1, x: 0 } : {}}
+                transition={{ duration: 0.6, delay: 0.15 }}
+                whileHover={{ y: -4 }}
+                className="bg-white rounded-2xl shadow-lg border border-gray-100 p-8 flex flex-col"
+              >
+                <div className="w-14 h-14 bg-gradient-to-br from-brand-turquoise to-cyan-400 rounded-2xl flex items-center justify-center mb-6 flex-shrink-0">
+                  <Zap className="w-7 h-7 text-white" />
+                </div>
+                <h3 className="text-xl font-bold text-brand-navy mb-3">{t('quickAccess.pricingTitle')}</h3>
+                <p className="text-gray-600 leading-relaxed flex-1 mb-6">
+                  {t('quickAccess.pricingBody1')}
+                  <span className="font-semibold text-brand-navy">{t('quickAccess.pricingHighlight')}</span>
+                  {t('quickAccess.pricingBody2')}
+                </p>
+                <Link
+                  href="/dashboard"
+                  className="inline-flex items-center justify-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-xl font-semibold hover:bg-brand-turquoise/90 transition-all group"
+                >
+                  <span>{t('quickAccess.pricingCta')}</span>
+                  <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                </Link>
+              </motion.div>
+
+              {/* Wiki */}
+              <motion.div
+                initial={{ opacity: 0, x: 30 }}
+                animate={isQuickAccessInView ? { opacity: 1, x: 0 } : {}}
+                transition={{ duration: 0.6, delay: 0.25 }}
+                whileHover={{ y: -4 }}
+                className="bg-white rounded-2xl shadow-lg border border-gray-100 p-8 flex flex-col"
+              >
+                <div className="w-14 h-14 bg-gradient-to-br from-brand-navy to-brand-navy/80 rounded-2xl flex items-center justify-center mb-6 flex-shrink-0">
+                  <BookOpen className="w-7 h-7 text-brand-turquoise" />
+                </div>
+                <h3 className="text-xl font-bold text-brand-navy mb-3">{t('quickAccess.wikiTitle')}</h3>
+                <p className="text-gray-600 leading-relaxed flex-1 mb-6">
+                  {t('quickAccess.wikiBody1')}
+                  <span className="font-semibold text-brand-navy">{t('quickAccess.wikiHighlight')}</span>
+                  {t('quickAccess.wikiBody2')}
+                </p>
+                <Link
+                  href="/dashboard/wiki"
+                  className="inline-flex items-center justify-center space-x-2 px-6 py-3 border-2 border-brand-navy text-brand-navy rounded-xl font-semibold hover:bg-brand-navy hover:text-white transition-all group"
+                >
+                  <span>{t('quickAccess.wikiCta')}</span>
+                  <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                </Link>
+              </motion.div>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      <LandingFooter />
+    </div>
+  );
+}
diff --git a/apps/frontend/app/cookies/page.tsx b/apps/frontend/app/[locale]/cookies/page.tsx
similarity index 60%
rename from apps/frontend/app/cookies/page.tsx
rename to apps/frontend/app/[locale]/cookies/page.tsx
index 2292d1f..3217e7c 100644
--- a/apps/frontend/app/cookies/page.tsx
+++ b/apps/frontend/app/[locale]/cookies/page.tsx
@@ -1,291 +1,299 @@
-'use client';
-
-import { useRef } from 'react';
-import { motion, useInView } from 'framer-motion';
-import { Cookie, Settings, BarChart3, Target, Shield, ToggleLeft, Mail } from 'lucide-react';
-import { LandingHeader, LandingFooter } from '@/components/layout';
-
-export default function CookiesPage() {
-  const heroRef = useRef(null);
-  const contentRef = useRef(null);
-
-  const isHeroInView = useInView(heroRef, { once: true });
-  const isContentInView = useInView(contentRef, { once: true });
-
-  const cookieTypes = [
-    {
-      icon: Shield,
-      title: 'Cookies essentiels',
-      description: 'Nécessaires au fonctionnement du site',
-      required: true,
-      cookies: [
-        { name: 'session_id', purpose: 'Maintien de votre session de connexion', duration: 'Session' },
-        { name: 'csrf_token', purpose: 'Protection contre les attaques CSRF', duration: 'Session' },
-        { name: 'cookie_consent', purpose: 'Mémorisation de vos préférences cookies', duration: '1 an' },
-      ],
-    },
-    {
-      icon: BarChart3,
-      title: 'Cookies analytiques',
-      description: 'Nous aident à améliorer notre plateforme',
-      required: false,
-      cookies: [
-        { name: '_ga', purpose: 'Google Analytics - Identification des visiteurs', duration: '2 ans' },
-        { name: '_gid', purpose: 'Google Analytics - Identification des sessions', duration: '24 heures' },
-        { name: '_gat', purpose: 'Google Analytics - Limitation du taux de requêtes', duration: '1 minute' },
-      ],
-    },
-    {
-      icon: Target,
-      title: 'Cookies marketing',
-      description: 'Permettent de personnaliser les publicités',
-      required: false,
-      cookies: [
-        { name: '_fbp', purpose: 'Facebook Pixel - Suivi des conversions', duration: '3 mois' },
-        { name: 'li_fat_id', purpose: 'LinkedIn Insight - Attribution marketing', duration: '30 jours' },
-        { name: 'hubspotutk', purpose: 'HubSpot - Identification des visiteurs', duration: '13 mois' },
-      ],
-    },
-    {
-      icon: Settings,
-      title: 'Cookies fonctionnels',
-      description: 'Améliorent votre expérience utilisateur',
-      required: false,
-      cookies: [
-        { name: 'language', purpose: 'Mémorisation de votre langue préférée', duration: '1 an' },
-        { name: 'theme', purpose: 'Mémorisation du thème (clair/sombre)', duration: '1 an' },
-        { name: 'recent_searches', purpose: 'Historique de vos recherches récentes', duration: '30 jours' },
-      ],
-    },
-  ];
-
-  const containerVariants = {
-    hidden: { opacity: 0, y: 50 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.6,
-        staggerChildren: 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: 0.5 },
-    },
-  };
-
-  return (
-    <div className="min-h-screen bg-white">
-      <LandingHeader />
-
-      {/* Hero Section */}
-      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
-          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center"
-          >
-            <motion.div
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
-            >
-              <Cookie className="w-5 h-5 text-brand-turquoise" />
-              <span className="text-white/90 text-sm font-medium">Transparence</span>
-            </motion.div>
-
-            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
-              Politique de
-              <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
-                Cookies
-              </span>
-            </h1>
-
-            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
-              Découvrez comment nous utilisons les cookies pour améliorer votre expérience
-              sur Xpeditis et comment vous pouvez gérer vos préférences.
-            </p>
-
-            <p className="text-white/60 text-sm">
-              Dernière mise à jour : Janvier 2025
-            </p>
-          </motion.div>
-        </div>
-
-        {/* Wave */}
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
-            <path
-              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
-              fill="white"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* Introduction */}
-      <section className="py-16 bg-gray-50">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
-          >
-            <h2 className="text-2xl font-bold text-brand-navy mb-4">Qu'est-ce qu'un cookie ?</h2>
-            <p className="text-gray-600 leading-relaxed mb-4">
-              Un cookie est un petit fichier texte stocké sur votre appareil (ordinateur, tablette, smartphone)
-              lorsque vous visitez un site web. Les cookies permettent au site de mémoriser vos actions et
-              préférences sur une période donnée.
-            </p>
-            <p className="text-gray-600 leading-relaxed">
-              Les cookies ne contiennent pas d'informations personnellement identifiables et ne peuvent pas
-              accéder aux données stockées sur votre appareil.
-            </p>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Cookie Types Section */}
-      <section ref={contentRef} className="py-20">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-12"
-          >
-            <h2 className="text-3xl font-bold text-brand-navy mb-4">Types de cookies utilisés</h2>
-            <p className="text-gray-600">
-              Nous utilisons différents types de cookies sur notre plateforme
-            </p>
-          </motion.div>
-
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isContentInView ? 'visible' : 'hidden'}
-            className="space-y-8"
-          >
-            {cookieTypes.map((type, index) => {
-              const IconComponent = type.icon;
-              return (
-                <motion.div
-                  key={index}
-                  variants={itemVariants}
-                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
-                >
-                  <div className="flex items-start justify-between mb-6">
-                    <div className="flex items-center space-x-4">
-                      <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
-                        <IconComponent className="w-6 h-6 text-brand-turquoise" />
-                      </div>
-                      <div>
-                        <h3 className="text-xl font-bold text-brand-navy">{type.title}</h3>
-                        <p className="text-gray-500 text-sm">{type.description}</p>
-                      </div>
-                    </div>
-                    {type.required ? (
-                      <span className="px-3 py-1 bg-brand-navy/10 text-brand-navy text-xs font-medium rounded-full">
-                        Requis
-                      </span>
-                    ) : (
-                      <div className="flex items-center space-x-2">
-                        <ToggleLeft className="w-8 h-8 text-gray-400" />
-                        <span className="text-sm text-gray-500">Optionnel</span>
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="overflow-x-auto">
-                    <table className="w-full text-sm">
-                      <thead>
-                        <tr className="border-b border-gray-200">
-                          <th className="text-left py-3 px-4 font-semibold text-brand-navy">Nom</th>
-                          <th className="text-left py-3 px-4 font-semibold text-brand-navy">Finalité</th>
-                          <th className="text-left py-3 px-4 font-semibold text-brand-navy">Durée</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {type.cookies.map((cookie, i) => (
-                          <tr key={i} className="border-b border-gray-100 last:border-0">
-                            <td className="py-3 px-4 font-mono text-brand-turquoise">{cookie.name}</td>
-                            <td className="py-3 px-4 text-gray-600">{cookie.purpose}</td>
-                            <td className="py-3 px-4 text-gray-500">{cookie.duration}</td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-
-          {/* How to manage cookies */}
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8, delay: 0.4 }}
-            className="mt-12 bg-gradient-to-br from-gray-50 to-white p-8 rounded-2xl border border-gray-200"
-          >
-            <h3 className="text-2xl font-bold text-brand-navy mb-4">Comment gérer vos cookies ?</h3>
-            <div className="space-y-4 text-gray-600">
-              <p>
-                Vous pouvez à tout moment modifier vos préférences en matière de cookies :
-              </p>
-              <ul className="list-disc pl-6 space-y-2">
-                <li>Via notre bandeau de consentement accessible en bas de chaque page</li>
-                <li>Dans les paramètres de votre navigateur (Chrome, Firefox, Safari, Edge)</li>
-                <li>En utilisant des outils tiers de gestion des cookies</li>
-              </ul>
-              <p className="text-sm text-gray-500 mt-4">
-                Note : La désactivation de certains cookies peut affecter votre expérience sur notre plateforme.
-              </p>
-            </div>
-          </motion.div>
-
-          {/* Contact Section */}
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8, delay: 0.6 }}
-            className="mt-16 bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
-          >
-            <Mail className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
-            <h3 className="text-2xl font-bold text-white mb-4">Des questions sur les cookies ?</h3>
-            <p className="text-white/80 mb-6">
-              Notre équipe est disponible pour répondre à toutes vos questions
-              concernant l'utilisation des cookies sur notre plateforme.
-            </p>
-            <a
-              href="mailto:privacy@xpeditis.com"
-              className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
-            >
-              <Mail className="w-5 h-5" />
-              <span>privacy@xpeditis.com</span>
-            </a>
-          </motion.div>
-        </div>
-      </section>
-
-      <LandingFooter />
-    </div>
-  );
-}
+'use client';
+
+import { useRef } from 'react';
+import { motion, useInView } from 'framer-motion';
+import { useTranslations } from 'next-intl';
+import { Cookie, Settings, BarChart3, Target, Shield, ToggleLeft, Mail, type LucideIcon } from 'lucide-react';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+
+type CookieTypeKey = 'essential' | 'analytics' | 'marketing' | 'functional';
+
+interface CookieRow {
+  name: string;
+  purposeKey: string;
+  durationKey: string;
+}
+
+interface CookieTypeConfig {
+  key: CookieTypeKey;
+  icon: LucideIcon;
+  required: boolean;
+  cookies: CookieRow[];
+}
+
+const COOKIE_TYPES: CookieTypeConfig[] = [
+  {
+    key: 'essential',
+    icon: Shield,
+    required: true,
+    cookies: [
+      { name: 'session_id', purposeKey: 'session_id', durationKey: 'session' },
+      { name: 'csrf_token', purposeKey: 'csrf_token', durationKey: 'session' },
+      { name: 'cookie_consent', purposeKey: 'cookie_consent', durationKey: 'year1' },
+    ],
+  },
+  {
+    key: 'analytics',
+    icon: BarChart3,
+    required: false,
+    cookies: [
+      { name: '_ga', purposeKey: '_ga', durationKey: 'years2' },
+      { name: '_gid', purposeKey: '_gid', durationKey: 'hours24' },
+      { name: '_gat', purposeKey: '_gat', durationKey: 'minute1' },
+    ],
+  },
+  {
+    key: 'marketing',
+    icon: Target,
+    required: false,
+    cookies: [
+      { name: '_fbp', purposeKey: '_fbp', durationKey: 'months3' },
+      { name: 'li_fat_id', purposeKey: 'li_fat_id', durationKey: 'days30' },
+      { name: 'hubspotutk', purposeKey: 'hubspotutk', durationKey: 'months13' },
+    ],
+  },
+  {
+    key: 'functional',
+    icon: Settings,
+    required: false,
+    cookies: [
+      { name: 'language', purposeKey: 'language', durationKey: 'year1' },
+      { name: 'theme', purposeKey: 'theme', durationKey: 'year1' },
+      { name: 'recent_searches', purposeKey: 'recent_searches', durationKey: 'days30' },
+    ],
+  },
+];
+
+export default function CookiesPage() {
+  const t = useTranslations('marketing.cookies');
+  const tCommon = useTranslations('marketing.common');
+  const heroRef = useRef(null);
+  const contentRef = useRef(null);
+
+  const isHeroInView = useInView(heroRef, { once: true });
+  const isContentInView = useInView(contentRef, { once: true });
+
+  const containerVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader />
+
+      {/* Hero Section */}
+      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
+          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
+        </div>
+
+        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center"
+          >
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
+            >
+              <Cookie className="w-5 h-5 text-brand-turquoise" />
+              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
+            </motion.div>
+
+            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+              {t('title1')}
+              <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
+                {t('title2')}
+              </span>
+            </h1>
+
+            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
+              {t('intro')}
+            </p>
+
+            <p className="text-white/60 text-sm">{tCommon('lastUpdated')}</p>
+          </motion.div>
+        </div>
+
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
+            <path
+              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </section>
+
+      {/* Introduction */}
+      <section className="py-16 bg-gray-50">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
+          >
+            <h2 className="text-2xl font-bold text-brand-navy mb-4">{t('introBoxTitle')}</h2>
+            <p className="text-gray-600 leading-relaxed mb-4">{t('introBoxBody1')}</p>
+            <p className="text-gray-600 leading-relaxed">{t('introBoxBody2')}</p>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Cookie Types Section */}
+      <section ref={contentRef} className="py-20">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-12"
+          >
+            <h2 className="text-3xl font-bold text-brand-navy mb-4">{t('typesTitle')}</h2>
+            <p className="text-gray-600">{t('typesSubtitle')}</p>
+          </motion.div>
+
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={isContentInView ? 'visible' : 'hidden'}
+            className="space-y-8"
+          >
+            {COOKIE_TYPES.map((type) => {
+              const IconComponent = type.icon;
+              return (
+                <motion.div
+                  key={type.key}
+                  variants={itemVariants}
+                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
+                >
+                  <div className="flex items-start justify-between mb-6">
+                    <div className="flex items-center space-x-4">
+                      <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
+                        <IconComponent className="w-6 h-6 text-brand-turquoise" />
+                      </div>
+                      <div>
+                        <h3 className="text-xl font-bold text-brand-navy">
+                          {t(`types.${type.key}.title`)}
+                        </h3>
+                        <p className="text-gray-500 text-sm">
+                          {t(`types.${type.key}.description`)}
+                        </p>
+                      </div>
+                    </div>
+                    {type.required ? (
+                      <span className="px-3 py-1 bg-brand-navy/10 text-brand-navy text-xs font-medium rounded-full">
+                        {t('required')}
+                      </span>
+                    ) : (
+                      <div className="flex items-center space-x-2">
+                        <ToggleLeft className="w-8 h-8 text-gray-400" />
+                        <span className="text-sm text-gray-500">{t('optional')}</span>
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="border-b border-gray-200">
+                          <th className="text-left py-3 px-4 font-semibold text-brand-navy">
+                            {t('tableHeaders.name')}
+                          </th>
+                          <th className="text-left py-3 px-4 font-semibold text-brand-navy">
+                            {t('tableHeaders.purpose')}
+                          </th>
+                          <th className="text-left py-3 px-4 font-semibold text-brand-navy">
+                            {t('tableHeaders.duration')}
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {type.cookies.map((cookie) => (
+                          <tr key={cookie.name} className="border-b border-gray-100 last:border-0">
+                            <td className="py-3 px-4 font-mono text-brand-turquoise">{cookie.name}</td>
+                            <td className="py-3 px-4 text-gray-600">
+                              {t(`purposes.${cookie.purposeKey}` as any)}
+                            </td>
+                            <td className="py-3 px-4 text-gray-500">
+                              {t(`durations.${cookie.durationKey}` as any)}
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </motion.div>
+
+          {/* How to manage cookies */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.4 }}
+            className="mt-12 bg-gradient-to-br from-gray-50 to-white p-8 rounded-2xl border border-gray-200"
+          >
+            <h3 className="text-2xl font-bold text-brand-navy mb-4">{t('manageTitle')}</h3>
+            <div className="space-y-4 text-gray-600">
+              <p>{t('manageIntro')}</p>
+              <ul className="list-disc pl-6 space-y-2">
+                <li>{t('manageBullet1')}</li>
+                <li>{t('manageBullet2')}</li>
+                <li>{t('manageBullet3')}</li>
+              </ul>
+              <p className="text-sm text-gray-500 mt-4">{t('manageNote')}</p>
+            </div>
+          </motion.div>
+
+          {/* Contact Section */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.6 }}
+            className="mt-16 bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
+          >
+            <Mail className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
+            <h3 className="text-2xl font-bold text-white mb-4">{t('contact.title')}</h3>
+            <p className="text-white/80 mb-6">{t('contact.body')}</p>
+            <a
+              href="mailto:privacy@xpeditis.com"
+              className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
+            >
+              <Mail className="w-5 h-5" />
+              <span>privacy@xpeditis.com</span>
+            </a>
+          </motion.div>
+        </div>
+      </section>
+
+      <LandingFooter />
+    </div>
+  );
+}
diff --git a/apps/frontend/app/dashboard/admin/bookings/page.tsx b/apps/frontend/app/[locale]/dashboard/admin/bookings/page.tsx
similarity index 85%
rename from apps/frontend/app/dashboard/admin/bookings/page.tsx
rename to apps/frontend/app/[locale]/dashboard/admin/bookings/page.tsx
index 485aa40..e3fe514 100644
--- a/apps/frontend/app/dashboard/admin/bookings/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/admin/bookings/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
 import { getAllBookings, validateBankTransfer, deleteAdminBooking } from '@/lib/api/admin';
 
 interface Booking {
@@ -26,6 +27,10 @@ interface Booking {
 }
 
 export default function AdminBookingsPage() {
+  const t = useTranslations('dashboard.admin.bookings');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
+
   const [bookings, setBookings] = useState<Booking[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -43,26 +48,26 @@ export default function AdminBookingsPage() {
   }, []);
 
   const handleDeleteBooking = async (bookingId: string) => {
-    if (!window.confirm('Supprimer définitivement cette réservation ?')) return;
+    if (!window.confirm(t('confirmDelete'))) return;
     setDeletingId(bookingId);
     try {
       await deleteAdminBooking(bookingId);
       setBookings(prev => prev.filter(b => b.id !== bookingId));
     } catch (err: any) {
-      setError(err.message || 'Erreur lors de la suppression');
+      setError(err.message || t('deleteError'));
     } finally {
       setDeletingId(null);
     }
   };
 
   const handleValidateTransfer = async (bookingId: string) => {
-    if (!window.confirm('Confirmer la réception du virement et activer ce booking ?')) return;
+    if (!window.confirm(t('confirmValidate'))) return;
     setValidatingId(bookingId);
     try {
       await validateBankTransfer(bookingId);
       await fetchBookings();
     } catch (err: any) {
-      setError(err.message || 'Erreur lors de la validation du virement');
+      setError(err.message || t('validateError'));
     } finally {
       setValidatingId(null);
     }
@@ -75,7 +80,7 @@ export default function AdminBookingsPage() {
       setBookings(response.bookings || []);
       setError(null);
     } catch (err: any) {
-      setError(err.message || 'Impossible de charger les réservations');
+      setError(err.message || t('loadError'));
     } finally {
       setLoading(false);
     }
@@ -94,15 +99,12 @@ export default function AdminBookingsPage() {
   };
 
   const getStatusLabel = (status: string) => {
-    const labels: Record<string, string> = {
-      PENDING_PAYMENT: 'Paiement en attente',
-      PENDING_BANK_TRANSFER: 'Virement à valider',
-      PENDING: 'En attente transporteur',
-      ACCEPTED: 'Accepté',
-      REJECTED: 'Rejeté',
-      CANCELLED: 'Annulé',
-    };
-    return labels[status.toUpperCase()] || status;
+    const key = status.toUpperCase();
+    const allowed = ['PENDING_PAYMENT', 'PENDING_BANK_TRANSFER', 'PENDING', 'ACCEPTED', 'REJECTED', 'CANCELLED'];
+    if (allowed.includes(key)) {
+      return t(`status.${key}` as any);
+    }
+    return status;
   };
 
   const getShortId = (booking: Booking) => `#${booking.id.slice(0, 8).toUpperCase()}`;
@@ -130,7 +132,7 @@ export default function AdminBookingsPage() {
       <div className="flex items-center justify-center h-96">
         <div className="text-center">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
-          <p className="mt-4 text-gray-600">Chargement des réservations...</p>
+          <p className="mt-4 text-gray-600">{t('loading')}</p>
         </div>
       </div>
     );
@@ -140,38 +142,38 @@ export default function AdminBookingsPage() {
     <div className="space-y-6">
       {/* Header */}
       <div>
-        <h1 className="text-2xl font-bold text-gray-900">Gestion des réservations</h1>
+        <h1 className="text-2xl font-bold text-gray-900">{t('title')}</h1>
         <p className="mt-1 text-sm text-gray-500">
-          Toutes les réservations de la plateforme
+          {t('subtitle')}
         </p>
       </div>
 
       {/* Stats Cards */}
       <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
         <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-          <div className="text-xs text-gray-500 uppercase tracking-wide">Total</div>
+          <div className="text-xs text-gray-500 uppercase tracking-wide">{t('stats.total')}</div>
           <div className="text-2xl font-bold text-gray-900 mt-1">{bookings.length}</div>
         </div>
         <div className="bg-amber-50 rounded-lg shadow-sm border border-amber-200 p-4">
-          <div className="text-xs text-amber-700 uppercase tracking-wide">Virements à valider</div>
+          <div className="text-xs text-amber-700 uppercase tracking-wide">{t('stats.pendingBankTransfer')}</div>
           <div className="text-2xl font-bold text-amber-700 mt-1">
             {bookings.filter(b => b.status.toUpperCase() === 'PENDING_BANK_TRANSFER').length}
           </div>
         </div>
         <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-          <div className="text-xs text-gray-500 uppercase tracking-wide">En attente transporteur</div>
+          <div className="text-xs text-gray-500 uppercase tracking-wide">{t('stats.pendingCarrier')}</div>
           <div className="text-2xl font-bold text-yellow-600 mt-1">
             {bookings.filter(b => b.status.toUpperCase() === 'PENDING').length}
           </div>
         </div>
         <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-          <div className="text-xs text-gray-500 uppercase tracking-wide">Acceptées</div>
+          <div className="text-xs text-gray-500 uppercase tracking-wide">{t('stats.accepted')}</div>
           <div className="text-2xl font-bold text-green-600 mt-1">
             {bookings.filter(b => b.status.toUpperCase() === 'ACCEPTED').length}
           </div>
         </div>
         <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-          <div className="text-xs text-gray-500 uppercase tracking-wide">Rejetées</div>
+          <div className="text-xs text-gray-500 uppercase tracking-wide">{t('stats.rejected')}</div>
           <div className="text-2xl font-bold text-red-600 mt-1">
             {bookings.filter(b => b.status.toUpperCase() === 'REJECTED').length}
           </div>
@@ -182,29 +184,29 @@ export default function AdminBookingsPage() {
       <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">{t('search.label')}</label>
             <input
               type="text"
-              placeholder="N° booking, transporteur, route, palettes, poids, CBM..."
+              placeholder={t('search.placeholder')}
               value={searchTerm}
               onChange={e => setSearchTerm(e.target.value)}
               className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none text-sm"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Statut</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">{t('filter.label')}</label>
             <select
               value={filterStatus}
               onChange={e => setFilterStatus(e.target.value)}
               className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none text-sm"
             >
-              <option value="all">Tous les statuts</option>
-              <option value="pending_bank_transfer">Virement à valider</option>
-              <option value="pending_payment">Paiement en attente</option>
-              <option value="pending">En attente transporteur</option>
-              <option value="accepted">Accepté</option>
-              <option value="rejected">Rejeté</option>
-              <option value="cancelled">Annulé</option>
+              <option value="all">{t('filter.all')}</option>
+              <option value="pending_bank_transfer">{t('status.PENDING_BANK_TRANSFER')}</option>
+              <option value="pending_payment">{t('status.PENDING_PAYMENT')}</option>
+              <option value="pending">{t('status.PENDING')}</option>
+              <option value="accepted">{t('status.ACCEPTED')}</option>
+              <option value="rejected">{t('status.REJECTED')}</option>
+              <option value="cancelled">{t('status.CANCELLED')}</option>
             </select>
           </div>
         </div>
@@ -224,25 +226,25 @@ export default function AdminBookingsPage() {
             <thead className="bg-gray-50">
               <tr>
                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  N° Booking
+                  {t('table.bookingNumber')}
                 </th>
                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Route
+                  {t('table.route')}
                 </th>
                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Cargo
+                  {t('table.cargo')}
                 </th>
                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Transporteur
+                  {t('table.carrier')}
                 </th>
                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Statut
+                  {t('table.status')}
                 </th>
                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Date
+                  {t('table.date')}
                 </th>
                 <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  Actions
+                  {t('table.actions')}
                 </th>
               </tr>
             </thead>
@@ -250,7 +252,7 @@ export default function AdminBookingsPage() {
               {filteredBookings.length === 0 ? (
                 <tr>
                   <td colSpan={7} className="px-4 py-8 text-center text-sm text-gray-500">
-                    Aucune réservation trouvée
+                    {t('table.empty')}
                   </td>
                 </tr>
               ) : (
@@ -276,11 +278,11 @@ export default function AdminBookingsPage() {
                       <div className="text-sm text-gray-900">
                         {booking.containerType}
                         {booking.palletCount != null && (
-                          <span className="ml-1 text-gray-500">· {booking.palletCount} pal.</span>
+                          <span className="ml-1 text-gray-500">· {booking.palletCount} {t('table.pallets')}</span>
                         )}
                       </div>
                       <div className="text-xs text-gray-500 space-x-2">
-                        {booking.weightKG != null && <span>{booking.weightKG.toLocaleString()} kg</span>}
+                        {booking.weightKG != null && <span>{booking.weightKG.toLocaleString(dateLocale)} kg</span>}
                         {booking.volumeCBM != null && <span>{booking.volumeCBM} CBM</span>}
                       </div>
                     </td>
@@ -299,7 +301,7 @@ export default function AdminBookingsPage() {
 
                     {/* Date */}
                     <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-                      {new Date(booking.requestedAt || booking.createdAt || '').toLocaleDateString('fr-FR')}
+                      {new Date(booking.requestedAt || booking.createdAt || '').toLocaleDateString(dateLocale)}
                     </td>
 
                     {/* Actions */}
@@ -357,7 +359,7 @@ export default function AdminBookingsPage() {
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                 </svg>
-                <span className="text-sm font-medium text-gray-700">Voir les détails</span>
+                <span className="text-sm font-medium text-gray-700">{t('menu.viewDetails')}</span>
               </button>
               {(() => {
                 const booking = bookings.find(b => b.id === openMenuId);
@@ -375,7 +377,7 @@ export default function AdminBookingsPage() {
                     <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
-                    <span className="text-sm font-medium text-green-700">Valider virement</span>
+                    <span className="text-sm font-medium text-green-700">{t('menu.validateTransfer')}</span>
                   </button>
                 ) : null;
               })()}
@@ -392,7 +394,7 @@ export default function AdminBookingsPage() {
                 <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                 </svg>
-                <span className="text-sm font-medium text-red-600">Supprimer</span>
+                <span className="text-sm font-medium text-red-600">{t('menu.delete')}</span>
               </button>
             </div>
           </div>
@@ -404,7 +406,7 @@ export default function AdminBookingsPage() {
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto p-4">
           <div className="bg-white rounded-lg p-6 max-w-2xl w-full">
             <div className="flex items-center justify-between mb-6">
-              <h2 className="text-xl font-bold text-gray-900">Détails de la réservation</h2>
+              <h2 className="text-xl font-bold text-gray-900">{t('modal.title')}</h2>
               <button
                 onClick={() => { setShowDetailsModal(false); setSelectedBooking(null); }}
                 className="text-gray-400 hover:text-gray-600"
@@ -418,13 +420,13 @@ export default function AdminBookingsPage() {
             <div className="space-y-4">
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-500">N° Booking</label>
+                  <label className="block text-sm font-medium text-gray-500">{t('modal.bookingNumber')}</label>
                   <div className="mt-1 text-lg font-semibold text-gray-900">
                     {selectedBooking.bookingNumber || getShortId(selectedBooking)}
                   </div>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-500">Statut</label>
+                  <label className="block text-sm font-medium text-gray-500">{t('modal.status')}</label>
                   <span className={`mt-1 inline-block px-3 py-1 text-sm font-semibold rounded-full ${getStatusColor(selectedBooking.status)}`}>
                     {getStatusLabel(selectedBooking.status)}
                   </span>
@@ -432,45 +434,45 @@ export default function AdminBookingsPage() {
               </div>
 
               <div className="border-t pt-4">
-                <h3 className="text-sm font-medium text-gray-900 mb-3">Route</h3>
+                <h3 className="text-sm font-medium text-gray-900 mb-3">{t('modal.routeSection')}</h3>
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium text-gray-500">Origine</label>
-                    <div className="mt-1 font-semibold text-gray-900">{selectedBooking.origin || '—'}</div>
+                    <label className="block text-sm font-medium text-gray-500">{t('modal.origin')}</label>
+                    <div className="mt-1 font-semibold text-gray-900">{selectedBooking.origin || t('modal.none')}</div>
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-500">Destination</label>
-                    <div className="mt-1 font-semibold text-gray-900">{selectedBooking.destination || '—'}</div>
+                    <label className="block text-sm font-medium text-gray-500">{t('modal.destination')}</label>
+                    <div className="mt-1 font-semibold text-gray-900">{selectedBooking.destination || t('modal.none')}</div>
                   </div>
                 </div>
               </div>
 
               <div className="border-t pt-4">
-                <h3 className="text-sm font-medium text-gray-900 mb-3">Cargo & Transporteur</h3>
+                <h3 className="text-sm font-medium text-gray-900 mb-3">{t('modal.cargoSection')}</h3>
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium text-gray-500">Transporteur</label>
-                    <div className="mt-1 font-semibold text-gray-900">{selectedBooking.carrierName || '—'}</div>
+                    <label className="block text-sm font-medium text-gray-500">{t('modal.carrier')}</label>
+                    <div className="mt-1 font-semibold text-gray-900">{selectedBooking.carrierName || t('modal.none')}</div>
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-500">Type conteneur</label>
+                    <label className="block text-sm font-medium text-gray-500">{t('modal.containerType')}</label>
                     <div className="mt-1 font-semibold text-gray-900">{selectedBooking.containerType}</div>
                   </div>
                   {selectedBooking.palletCount != null && (
                     <div>
-                      <label className="block text-sm font-medium text-gray-500">Palettes</label>
+                      <label className="block text-sm font-medium text-gray-500">{t('modal.pallets')}</label>
                       <div className="mt-1 font-semibold text-gray-900">{selectedBooking.palletCount}</div>
                     </div>
                   )}
                   {selectedBooking.weightKG != null && (
                     <div>
-                      <label className="block text-sm font-medium text-gray-500">Poids</label>
-                      <div className="mt-1 font-semibold text-gray-900">{selectedBooking.weightKG.toLocaleString()} kg</div>
+                      <label className="block text-sm font-medium text-gray-500">{t('modal.weight')}</label>
+                      <div className="mt-1 font-semibold text-gray-900">{selectedBooking.weightKG.toLocaleString(dateLocale)} kg</div>
                     </div>
                   )}
                   {selectedBooking.volumeCBM != null && (
                     <div>
-                      <label className="block text-sm font-medium text-gray-500">Volume</label>
+                      <label className="block text-sm font-medium text-gray-500">{t('modal.volume')}</label>
                       <div className="mt-1 font-semibold text-gray-900">{selectedBooking.volumeCBM} CBM</div>
                     </div>
                   )}
@@ -479,18 +481,18 @@ export default function AdminBookingsPage() {
 
               {(selectedBooking.priceEUR != null || selectedBooking.priceUSD != null) && (
                 <div className="border-t pt-4">
-                  <h3 className="text-sm font-medium text-gray-900 mb-3">Prix</h3>
+                  <h3 className="text-sm font-medium text-gray-900 mb-3">{t('modal.priceSection')}</h3>
                   <div className="grid grid-cols-2 gap-4">
                     {selectedBooking.priceEUR != null && (
                       <div>
                         <label className="block text-sm font-medium text-gray-500">EUR</label>
-                        <div className="mt-1 text-xl font-bold text-blue-600">{selectedBooking.priceEUR.toLocaleString()} €</div>
+                        <div className="mt-1 text-xl font-bold text-blue-600">{selectedBooking.priceEUR.toLocaleString(dateLocale)} €</div>
                       </div>
                     )}
                     {selectedBooking.priceUSD != null && (
                       <div>
                         <label className="block text-sm font-medium text-gray-500">USD</label>
-                        <div className="mt-1 text-xl font-bold text-blue-600">{selectedBooking.priceUSD.toLocaleString()} $</div>
+                        <div className="mt-1 text-xl font-bold text-blue-600">{selectedBooking.priceUSD.toLocaleString(dateLocale)} $</div>
                       </div>
                     )}
                   </div>
@@ -498,18 +500,18 @@ export default function AdminBookingsPage() {
               )}
 
               <div className="border-t pt-4">
-                <h3 className="text-sm font-medium text-gray-900 mb-3">Dates</h3>
+                <h3 className="text-sm font-medium text-gray-900 mb-3">{t('modal.datesSection')}</h3>
                 <div className="grid grid-cols-2 gap-4 text-sm">
                   <div>
-                    <label className="block text-gray-500">Créée le</label>
+                    <label className="block text-gray-500">{t('modal.createdAt')}</label>
                     <div className="mt-1 text-gray-900">
-                      {new Date(selectedBooking.requestedAt || selectedBooking.createdAt || '').toLocaleString('fr-FR')}
+                      {new Date(selectedBooking.requestedAt || selectedBooking.createdAt || '').toLocaleString(dateLocale)}
                     </div>
                   </div>
                   {selectedBooking.updatedAt && (
                     <div>
-                      <label className="block text-gray-500">Mise à jour</label>
-                      <div className="mt-1 text-gray-900">{new Date(selectedBooking.updatedAt).toLocaleString('fr-FR')}</div>
+                      <label className="block text-gray-500">{t('modal.updatedAt')}</label>
+                      <div className="mt-1 text-gray-900">{new Date(selectedBooking.updatedAt).toLocaleString(dateLocale)}</div>
                     </div>
                   )}
                 </div>
@@ -526,7 +528,7 @@ export default function AdminBookingsPage() {
                     disabled={validatingId === selectedBooking.id}
                     className="w-full px-4 py-2 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
                   >
-                    {validatingId === selectedBooking.id ? 'Validation...' : '✓ Valider le virement'}
+                    {validatingId === selectedBooking.id ? t('modal.validating') : t('modal.validateButton')}
                   </button>
                 </div>
               )}
@@ -537,7 +539,7 @@ export default function AdminBookingsPage() {
                 onClick={() => { setShowDetailsModal(false); setSelectedBooking(null); }}
                 className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
               >
-                Fermer
+                {t('modal.close')}
               </button>
             </div>
           </div>
diff --git a/apps/frontend/app/dashboard/admin/csv-rates/page.tsx b/apps/frontend/app/[locale]/dashboard/admin/csv-rates/page.tsx
similarity index 75%
rename from apps/frontend/app/dashboard/admin/csv-rates/page.tsx
rename to apps/frontend/app/[locale]/dashboard/admin/csv-rates/page.tsx
index 3f385f2..afa8a24 100644
--- a/apps/frontend/app/dashboard/admin/csv-rates/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/admin/csv-rates/page.tsx
@@ -10,6 +10,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -27,6 +28,10 @@ import {
 } from '@/components/ui/table';
 
 export default function AdminCsvRatesPage() {
+  const t = useTranslations('dashboard.admin.csvRates');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
+
   const [files, setFiles] = useState<CsvFileInfo[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -39,7 +44,7 @@ export default function AdminCsvRatesPage() {
       const data = await listCsvFiles();
       setFiles(data.files || []);
     } catch (err: any) {
-      setError(err?.message || 'Erreur lors du chargement des fichiers');
+      setError(err?.message || t('loadError'));
     } finally {
       setLoading(false);
     }
@@ -50,16 +55,16 @@ export default function AdminCsvRatesPage() {
   }, []);
 
   const handleDelete = async (filename: string) => {
-    if (!confirm(`Êtes-vous sûr de vouloir supprimer le fichier ${filename} ?`)) {
+    if (!confirm(t('confirmDelete', { filename }))) {
       return;
     }
 
     try {
       await deleteCsvFile(filename);
-      alert(`Fichier supprimé: ${filename}`);
+      alert(t('deleteSuccess', { filename }));
       fetchFiles(); // Refresh list
     } catch (err: any) {
-      alert(`Erreur: ${err?.message || 'Impossible de supprimer le fichier'}`);
+      alert(t('deleteError', { message: err?.message || t('deleteFailedFallback') }));
     }
   };
 
@@ -67,12 +72,12 @@ export default function AdminCsvRatesPage() {
     <div className="container mx-auto py-8 space-y-6">
       {/* Page Header */}
       <div>
-        <h1 className="text-3xl font-bold tracking-tight">Gestion des tarifs CSV</h1>
+        <h1 className="text-3xl font-bold tracking-tight">{t('title')}</h1>
         <p className="text-muted-foreground mt-2">
-          Interface d'administration pour gérer les fichiers CSV de tarifs maritimes
+          {t('subtitle')}
         </p>
         <Badge variant="destructive" className="mt-2">
-          ADMIN SEULEMENT
+          {t('adminBadge')}
         </Badge>
       </div>
 
@@ -84,9 +89,9 @@ export default function AdminCsvRatesPage() {
         <CardHeader>
           <div className="flex items-center justify-between">
             <div>
-              <CardTitle>Configurations CSV actives</CardTitle>
+              <CardTitle>{t('cardTitle')}</CardTitle>
               <CardDescription>
-                Liste de toutes les compagnies avec fichiers CSV configurés
+                {t('cardDescription')}
               </CardDescription>
             </div>
             <Button variant="outline" size="sm" onClick={fetchFiles} disabled={loading}>
@@ -111,19 +116,19 @@ export default function AdminCsvRatesPage() {
             </div>
           ) : files.length === 0 ? (
             <div className="text-center py-12 text-muted-foreground">
-              Aucun fichier trouvé. Uploadez un fichier CSV pour commencer.
+              {t('empty')}
             </div>
           ) : (
             <div className="rounded-md border">
               <Table>
                 <TableHeader>
                   <TableRow>
-                    <TableHead>Fichier</TableHead>
-                    <TableHead>Taille</TableHead>
-                    <TableHead>Lignes</TableHead>
-                    <TableHead>Date d'upload</TableHead>
-                    <TableHead>Email</TableHead>
-                    <TableHead>Actions</TableHead>
+                    <TableHead>{t('table.filename')}</TableHead>
+                    <TableHead>{t('table.size')}</TableHead>
+                    <TableHead>{t('table.rows')}</TableHead>
+                    <TableHead>{t('table.uploadedAt')}</TableHead>
+                    <TableHead>{t('table.email')}</TableHead>
+                    <TableHead>{t('table.actions')}</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
@@ -135,14 +140,14 @@ export default function AdminCsvRatesPage() {
                       </TableCell>
                       <TableCell>
                         {file.rowCount ? (
-                          <span className="font-semibold">{file.rowCount} lignes</span>
+                          <span className="font-semibold">{t('table.rowCount', { count: file.rowCount })}</span>
                         ) : (
                           <span className="text-muted-foreground">-</span>
                         )}
                       </TableCell>
                       <TableCell>
                         <div className="text-xs text-muted-foreground">
-                          {new Date(file.uploadedAt).toLocaleDateString('fr-FR')}
+                          {new Date(file.uploadedAt).toLocaleDateString(dateLocale)}
                         </div>
                       </TableCell>
                       <TableCell>
@@ -171,23 +176,20 @@ export default function AdminCsvRatesPage() {
       {/* Info Card */}
       <Card>
         <CardHeader>
-          <CardTitle>Informations</CardTitle>
+          <CardTitle>{t('infoTitle')}</CardTitle>
         </CardHeader>
         <CardContent className="space-y-2 text-sm">
           <p>
-            <strong>Format CSV requis :</strong> Consultez la documentation pour la liste complète
-            des colonnes obligatoires.
+            <strong>{t('info.formatLabel')}</strong> {t('info.formatBody')}
           </p>
           <p>
-            <strong>Taille maximale :</strong> 10 MB par fichier
+            <strong>{t('info.sizeLabel')}</strong> {t('info.sizeBody')}
           </p>
           <p>
-            <strong>Mise à jour :</strong> Uploader un nouveau fichier pour une compagnie existante
-            écrasera l'ancien fichier.
+            <strong>{t('info.updateLabel')}</strong> {t('info.updateBody')}
           </p>
           <p>
-            <strong>Validation :</strong> Le système valide automatiquement la structure du CSV lors
-            de l'upload.
+            <strong>{t('info.validationLabel')}</strong> {t('info.validationBody')}
           </p>
         </CardContent>
       </Card>
diff --git a/apps/frontend/app/dashboard/admin/documents/page.tsx b/apps/frontend/app/[locale]/dashboard/admin/documents/page.tsx
similarity index 86%
rename from apps/frontend/app/dashboard/admin/documents/page.tsx
rename to apps/frontend/app/[locale]/dashboard/admin/documents/page.tsx
index 3bbeb15..6a7ab0b 100644
--- a/apps/frontend/app/dashboard/admin/documents/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/admin/documents/page.tsx
@@ -1,666 +1,632 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { getAllBookings, getAllUsers, deleteAdminDocument } from '@/lib/api/admin';
-import { FileText, Image as ImageIcon, FileEdit, FileSpreadsheet, Paperclip } from 'lucide-react';
-import type { ReactNode } from 'react';
-import { PageHeader } from '@/components/ui/PageHeader';
-
-interface Document {
-  id: string;
-  fileName: string;
-  filePath: string;
-  type: string;
-  mimeType: string;
-  size: number;
-  uploadedAt?: Date;
-  // Legacy fields for compatibility
-  name?: string;
-  url?: string;
-}
-
-interface Booking {
-  id: string;
-  bookingNumber?: string;
-  bookingId?: string;
-  type?: string;
-  userId?: string;
-  organizationId?: string;
-  origin?: string;
-  destination?: string;
-  carrierName?: string;
-  documents?: Document[];
-  requestedAt?: string;
-  status: string;
-}
-
-interface DocumentWithBooking extends Document {
-  bookingId: string;
-  quoteNumber: string;
-  userId: string;
-  userName?: string;
-  organizationId: string;
-  route: string;
-  status: string;
-  fileType?: string;
-}
-
-export default function AdminDocumentsPage() {
-  const [bookings, setBookings] = useState<Booking[]>([]);
-  const [documents, setDocuments] = useState<DocumentWithBooking[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [filterUserId, setFilterUserId] = useState('all');
-  const [filterQuoteNumber, setFilterQuoteNumber] = useState('');
-  const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useState(10);
-  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
-  const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null);
-  const [deletingId, setDeletingId] = useState<string | null>(null);
-
-  // Helper function to get formatted quote number
-  const getQuoteNumber = (booking: Booking): string => {
-    if (booking.type === 'csv') {
-      return `#${booking.bookingId || booking.id.slice(0, 8).toUpperCase()}`;
-    }
-    return booking.bookingNumber || `#${booking.id.slice(0, 8).toUpperCase()}`;
-  };
-
-  // Extract filename from MinIO URL
-  const extractFileName = (url: string): string => {
-    try {
-      const urlObj = new URL(url);
-      const pathname = urlObj.pathname;
-      const parts = pathname.split('/');
-      const fileName = parts[parts.length - 1];
-      return decodeURIComponent(fileName);
-    } catch {
-      return 'document';
-    }
-  };
-
-  // Get file extension and type
-  const getFileType = (fileName: string): string => {
-    const ext = fileName.split('.').pop()?.toLowerCase() || '';
-    const typeMap: Record<string, string> = {
-      pdf: 'PDF',
-      doc: 'Word',
-      docx: 'Word',
-      xls: 'Excel',
-      xlsx: 'Excel',
-      jpg: 'Image',
-      jpeg: 'Image',
-      png: 'Image',
-      gif: 'Image',
-      txt: 'Text',
-      csv: 'CSV',
-    };
-    return typeMap[ext] || ext.toUpperCase();
-  };
-
-  const fetchBookingsAndDocuments = useCallback(async () => {
-    try {
-      setLoading(true);
-      const response = await getAllBookings();
-      const allBookings = response.bookings || [];
-      setBookings(allBookings);
-
-      // Extract all documents from all bookings
-      const allDocuments: DocumentWithBooking[] = [];
-      const userIds = new Set<string>();
-
-      allBookings.forEach((booking: Booking) => {
-        userIds.add(booking.userId);
-        if (booking.documents && booking.documents.length > 0) {
-          booking.documents.forEach((doc: Document) => {
-            // Debug: Log document structure
-            console.log('Document structure:', doc);
-
-            // Use the correct field names from the backend
-            const actualFileName = doc.fileName || doc.name || 'document';
-            const actualFilePath = doc.filePath || doc.url || '';
-            const actualMimeType = doc.mimeType || doc.type || '';
-
-            console.log('Extracted:', {
-              fileName: actualFileName,
-              filePath: actualFilePath,
-              mimeType: actualMimeType,
-            });
-
-            // Extract clean file type from mimeType or fileName
-            let fileType = '';
-            if (actualMimeType.includes('/')) {
-              // It's a MIME type like "application/pdf"
-              const parts = actualMimeType.split('/');
-              fileType = getFileType(parts[1]);
-            } else {
-              // It's already a type or we extract from filename
-              fileType = getFileType(actualFileName);
-            }
-
-            allDocuments.push({
-              ...doc,
-              bookingId: booking.id,
-              quoteNumber: getQuoteNumber(booking),
-              userId: booking.userId,
-              organizationId: booking.organizationId,
-              route: `${booking.origin || 'N/A'} → ${booking.destination || 'N/A'}`,
-              status: booking.status,
-              fileName: actualFileName,
-              filePath: actualFilePath,
-              fileType: fileType,
-            });
-          });
-        }
-      });
-
-      // Fetch user names using the API client
-      try {
-        const usersData = await getAllUsers();
-        console.log('Users data:', usersData);
-
-        if (usersData && usersData.users) {
-          const usersMap = new Map(
-            usersData.users.map((u: any) => {
-              const fullName = `${u.firstName || ''} ${u.lastName || ''}`.trim();
-              return [u.id, fullName || u.email || u.id.substring(0, 8)];
-            })
-          );
-
-          console.log('Users map:', usersMap);
-
-          // Enrich documents with user names
-          allDocuments.forEach(doc => {
-            const userName = usersMap.get(doc.userId);
-            doc.userName = userName || doc.userId.substring(0, 8) + '...';
-            console.log(`User ${doc.userId} mapped to: ${doc.userName}`);
-          });
-        }
-      } catch (userError) {
-        console.error('Failed to fetch user names:', userError);
-        // If user fetch fails, keep the userId as fallback
-        allDocuments.forEach(doc => {
-          doc.userName = doc.userId.substring(0, 8) + '...';
-        });
-      }
-
-      setDocuments(allDocuments);
-      setError(null);
-    } catch (err: any) {
-      setError(err.message || 'Failed to load documents');
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchBookingsAndDocuments();
-  }, [fetchBookingsAndDocuments]);
-
-  // Get unique users for filter (with names)
-  const uniqueUsers = Array.from(
-    new Map(
-      documents.map(doc => [doc.userId, { id: doc.userId, name: doc.userName || doc.userId.substring(0, 8) + '...' }])
-    ).values()
-  );
-
-  // Filter documents
-  const filteredDocuments = documents.filter(doc => {
-    const matchesSearch = searchTerm === '' ||
-      (doc.fileName && doc.fileName.toLowerCase().includes(searchTerm.toLowerCase())) ||
-      (doc.name && doc.name.toLowerCase().includes(searchTerm.toLowerCase())) ||
-      (doc.type && doc.type.toLowerCase().includes(searchTerm.toLowerCase())) ||
-      doc.route.toLowerCase().includes(searchTerm.toLowerCase());
-
-    const matchesUser = filterUserId === 'all' || doc.userId === filterUserId;
-
-    const matchesQuote = filterQuoteNumber === '' ||
-      doc.quoteNumber.toLowerCase().includes(filterQuoteNumber.toLowerCase());
-
-    return matchesSearch && matchesUser && matchesQuote;
-  });
-
-  // Pagination
-  const totalPages = Math.ceil(filteredDocuments.length / itemsPerPage);
-  const startIndex = (currentPage - 1) * itemsPerPage;
-  const endIndex = startIndex + itemsPerPage;
-  const paginatedDocuments = filteredDocuments.slice(startIndex, endIndex);
-
-  // Reset to page 1 when filters change
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [searchTerm, filterUserId, filterQuoteNumber]);
-
-  const getDocumentIcon = (type: string): ReactNode => {
-    const typeLower = type.toLowerCase();
-    const cls = "h-6 w-6";
-    const iconMap: Record<string, ReactNode> = {
-      'application/pdf': <FileText className={`${cls} text-red-500`} />,
-      'image/jpeg': <ImageIcon className={`${cls} text-green-500`} />,
-      'image/png': <ImageIcon className={`${cls} text-green-500`} />,
-      'image/jpg': <ImageIcon className={`${cls} text-green-500`} />,
-      pdf: <FileText className={`${cls} text-red-500`} />,
-      jpeg: <ImageIcon className={`${cls} text-green-500`} />,
-      jpg: <ImageIcon className={`${cls} text-green-500`} />,
-      png: <ImageIcon className={`${cls} text-green-500`} />,
-      gif: <ImageIcon className={`${cls} text-green-500`} />,
-      image: <ImageIcon className={`${cls} text-green-500`} />,
-      word: <FileEdit className={`${cls} text-blue-500`} />,
-      doc: <FileEdit className={`${cls} text-blue-500`} />,
-      docx: <FileEdit className={`${cls} text-blue-500`} />,
-      excel: <FileSpreadsheet className={`${cls} text-green-600`} />,
-      xls: <FileSpreadsheet className={`${cls} text-green-600`} />,
-      xlsx: <FileSpreadsheet className={`${cls} text-green-600`} />,
-      csv: <FileSpreadsheet className={`${cls} text-green-600`} />,
-      text: <FileText className={`${cls} text-gray-500`} />,
-      txt: <FileText className={`${cls} text-gray-500`} />,
-    };
-    return iconMap[typeLower] || <Paperclip className={`${cls} text-gray-400`} />;
-  };
-
-  const getStatusColor = (status: string) => {
-    const colors: Record<string, string> = {
-      pending: 'bg-yellow-100 text-yellow-800',
-      accepted: 'bg-green-100 text-green-800',
-      rejected: 'bg-red-100 text-red-800',
-      cancelled: 'bg-gray-100 text-gray-800',
-    };
-    return colors[status.toLowerCase()] || 'bg-gray-100 text-gray-800';
-  };
-
-  const handleDeleteDocument = async (bookingId: string, documentId: string) => {
-    if (!window.confirm('Supprimer définitivement ce document ?')) return;
-    setDeletingId(documentId);
-    try {
-      await deleteAdminDocument(bookingId, documentId);
-      setDocuments(prev => prev.filter(d => d.id !== documentId));
-    } catch (err: any) {
-      setError(err.message || 'Erreur lors de la suppression');
-    } finally {
-      setDeletingId(null);
-    }
-  };
-
-  const handleDownload = async (url: string, fileName: string) => {
-    try {
-      // Try direct download first
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = fileName;
-      link.target = '_blank';
-      link.setAttribute('download', fileName);
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-
-      // If direct download doesn't work, try fetch with blob
-      setTimeout(async () => {
-        try {
-          const response = await fetch(url, {
-            mode: 'cors',
-            credentials: 'include',
-          });
-
-          if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-          }
-
-          const blob = await response.blob();
-          const blobUrl = window.URL.createObjectURL(blob);
-          const link2 = document.createElement('a');
-          link2.href = blobUrl;
-          link2.download = fileName;
-          document.body.appendChild(link2);
-          link2.click();
-          document.body.removeChild(link2);
-          window.URL.revokeObjectURL(blobUrl);
-        } catch (fetchError) {
-          console.error('Fetch download failed:', fetchError);
-        }
-      }, 100);
-    } catch (error) {
-      console.error('Error downloading file:', error);
-      alert(`Erreur lors du téléchargement du document: ${error instanceof Error ? error.message : 'Erreur inconnue'}`);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-96">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
-          <p className="mt-4 text-gray-600">Chargement des documents...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <PageHeader
-        title="Gestion des Documents"
-        description="Liste de tous les documents des devis CSV"
-      />
-
-      {/* Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-          <div className="text-sm text-gray-500">Total Documents</div>
-          <div className="text-2xl font-bold text-gray-900">{documents.length}</div>
-        </div>
-        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-          <div className="text-sm text-gray-500">Devis avec Documents</div>
-          <div className="text-2xl font-bold text-blue-600">
-            {bookings.filter(b => b.documents && b.documents.length > 0).length}
-          </div>
-        </div>
-        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-          <div className="text-sm text-gray-500">Documents Filtrés</div>
-          <div className="text-2xl font-bold text-green-600">{filteredDocuments.length}</div>
-        </div>
-      </div>
-
-      {/* Filters */}
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Recherche
-            </label>
-            <input
-              type="text"
-              placeholder="Nom, type, route..."
-              value={searchTerm}
-              onChange={e => setSearchTerm(e.target.value)}
-              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Numéro de Devis
-            </label>
-            <input
-              type="text"
-              placeholder="Ex: #F2CAD5E1"
-              value={filterQuoteNumber}
-              onChange={e => setFilterQuoteNumber(e.target.value)}
-              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Utilisateur
-            </label>
-            <select
-              value={filterUserId}
-              onChange={e => setFilterUserId(e.target.value)}
-              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-            >
-              <option value="all">Tous les utilisateurs</option>
-              {uniqueUsers.map(user => (
-                <option key={user.id} value={user.id}>
-                  {user.name}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-      </div>
-
-      {/* Error Message */}
-      {error && (
-        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
-          {error}
-        </div>
-      )}
-
-      {/* Documents Table */}
-      <div className="bg-white rounded-lg shadow overflow-hidden">
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
-            <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Nom du Document
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Type
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Numéro de Devis
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Route
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Statut
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Utilisateur
-              </th>
-              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
-            {paginatedDocuments.length === 0 ? (
-              <tr>
-                <td colSpan={7} className="px-6 py-12 text-center text-gray-500">
-                  Aucun document trouvé
-                </td>
-              </tr>
-            ) : (
-              paginatedDocuments.map((doc, index) => (
-                <tr key={`${doc.bookingId}-${index}`} className="hover:bg-gray-50">
-                  <td className="px-6 py-4">
-                    <div className="text-sm font-medium text-gray-900">
-                      {doc.fileName || doc.name}
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <div className="flex items-center">
-                      <span className="mr-2">{getDocumentIcon(doc.fileType || doc.type)}</span>
-                      <div className="text-xs text-gray-500">{doc.fileType || doc.type}</div>
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <div className="text-sm font-medium text-gray-900">{doc.quoteNumber}</div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <div className="text-sm text-gray-900">{doc.route}</div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(doc.status)}`}>
-                      {doc.status}
-                    </span>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <div className="text-sm text-gray-900">
-                      {doc.userName || doc.userId.substring(0, 8) + '...'}
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-right">
-                    <button
-                      onClick={(e) => {
-                        const menuKey = `${doc.bookingId}::${doc.id}`;
-                        if (openMenuId === menuKey) {
-                          setOpenMenuId(null);
-                          setMenuPosition(null);
-                        } else {
-                          const rect = e.currentTarget.getBoundingClientRect();
-                          setMenuPosition({ top: rect.bottom + 5, left: rect.left - 180 });
-                          setOpenMenuId(menuKey);
-                        }
-                      }}
-                      className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-                    >
-                      <svg className="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
-                        <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              ))
-            )}
-          </tbody>
-        </table>
-
-        {/* Pagination Controls */}
-        {filteredDocuments.length > 0 && (
-          <div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
-            <div className="flex-1 flex justify-between sm:hidden">
-              <button
-                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-                disabled={currentPage === 1}
-                className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Précédent
-              </button>
-              <button
-                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
-                disabled={currentPage === totalPages}
-                className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Suivant
-              </button>
-            </div>
-            <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-              <div>
-                <p className="text-sm text-gray-700">
-                  Affichage de <span className="font-medium">{startIndex + 1}</span> à{' '}
-                  <span className="font-medium">{Math.min(endIndex, filteredDocuments.length)}</span> sur{' '}
-                  <span className="font-medium">{filteredDocuments.length}</span> résultats
-                </p>
-              </div>
-              <div className="flex items-center gap-4">
-                <div className="flex items-center gap-2">
-                  <label className="text-sm text-gray-700">Par page:</label>
-                  <select
-                    value={itemsPerPage}
-                    onChange={(e) => {
-                      setItemsPerPage(Number(e.target.value));
-                      setCurrentPage(1);
-                    }}
-                    className="border border-gray-300 rounded-md px-2 py-1 text-sm"
-                  >
-                    <option value={5}>5</option>
-                    <option value={10}>10</option>
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                    <option value={100}>100</option>
-                  </select>
-                </div>
-                <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
-                  <button
-                    onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-                    disabled={currentPage === 1}
-                    className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    <span className="sr-only">Précédent</span>
-                    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-                      <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
-                    </svg>
-                  </button>
-
-                  {/* Page numbers */}
-                  {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
-                    let pageNum;
-                    if (totalPages <= 5) {
-                      pageNum = i + 1;
-                    } else if (currentPage <= 3) {
-                      pageNum = i + 1;
-                    } else if (currentPage >= totalPages - 2) {
-                      pageNum = totalPages - 4 + i;
-                    } else {
-                      pageNum = currentPage - 2 + i;
-                    }
-
-                    return (
-                      <button
-                        key={pageNum}
-                        onClick={() => setCurrentPage(pageNum)}
-                        className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
-                          currentPage === pageNum
-                            ? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
-                            : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
-                        }`}
-                      >
-                        {pageNum}
-                      </button>
-                    );
-                  })}
-
-                  <button
-                    onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
-                    disabled={currentPage === totalPages}
-                    className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    <span className="sr-only">Suivant</span>
-                    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-                      <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
-                    </svg>
-                  </button>
-                </nav>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-      {/* Actions Dropdown Menu */}
-      {openMenuId && menuPosition && (
-        <>
-          <div
-            className="fixed inset-0 z-[998]"
-            onClick={() => { setOpenMenuId(null); setMenuPosition(null); }}
-          />
-          <div
-            className="fixed w-56 bg-white border-2 border-gray-300 rounded-lg shadow-2xl z-[999]"
-            style={{ top: `${menuPosition.top}px`, left: `${menuPosition.left}px` }}
-          >
-            <div className="py-2">
-              {(() => {
-                const [bookingId, documentId] = openMenuId.split('::');
-                const doc = documents.find(d => d.bookingId === bookingId && d.id === documentId);
-                if (!doc) return null;
-                return (
-                  <>
-                    <button
-                      onClick={() => {
-                        setOpenMenuId(null);
-                        setMenuPosition(null);
-                        handleDownload(doc.filePath || doc.url || '', doc.fileName || doc.name || 'document');
-                      }}
-                      className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3 border-b border-gray-200"
-                    >
-                      <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                      </svg>
-                      <span className="text-sm font-medium text-gray-700">Télécharger</span>
-                    </button>
-                    <button
-                      onClick={() => {
-                        const bId = doc.bookingId;
-                        const dId = doc.id;
-                        setOpenMenuId(null);
-                        setMenuPosition(null);
-                        handleDeleteDocument(bId, dId);
-                      }}
-                      disabled={deletingId === doc.id}
-                      className="w-full px-4 py-3 text-left hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-3"
-                    >
-                      <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                      </svg>
-                      <span className="text-sm font-medium text-red-600">Supprimer</span>
-                    </button>
-                  </>
-                );
-              })()}
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
+import { getAllBookings, getAllUsers, deleteAdminDocument } from '@/lib/api/admin';
+import { FileText, Image as ImageIcon, FileEdit, FileSpreadsheet, Paperclip } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { PageHeader } from '@/components/ui/PageHeader';
+
+interface Document {
+  id: string;
+  fileName: string;
+  filePath: string;
+  type: string;
+  mimeType: string;
+  size: number;
+  uploadedAt?: Date;
+  // Legacy fields for compatibility
+  name?: string;
+  url?: string;
+}
+
+interface Booking {
+  id: string;
+  bookingNumber?: string;
+  bookingId?: string;
+  type?: string;
+  userId?: string;
+  organizationId?: string;
+  origin?: string;
+  destination?: string;
+  carrierName?: string;
+  documents?: Document[];
+  requestedAt?: string;
+  status: string;
+}
+
+interface DocumentWithBooking extends Document {
+  bookingId: string;
+  quoteNumber: string;
+  userId: string;
+  userName?: string;
+  organizationId: string;
+  route: string;
+  status: string;
+  fileType?: string;
+}
+
+export default function AdminDocumentsPage() {
+  const t = useTranslations('dashboard.admin.documents');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
+
+  const [bookings, setBookings] = useState<Booking[]>([]);
+  const [documents, setDocuments] = useState<DocumentWithBooking[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterUserId, setFilterUserId] = useState('all');
+  const [filterQuoteNumber, setFilterQuoteNumber] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
+  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
+  const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  // Helper function to get formatted quote number
+  const getQuoteNumber = (booking: Booking): string => {
+    if (booking.type === 'csv') {
+      return `#${booking.bookingId || booking.id.slice(0, 8).toUpperCase()}`;
+    }
+    return booking.bookingNumber || `#${booking.id.slice(0, 8).toUpperCase()}`;
+  };
+
+  // Get file extension and type
+  const getFileType = (fileName: string): string => {
+    const ext = fileName.split('.').pop()?.toLowerCase() || '';
+    const typeMap: Record<string, string> = {
+      pdf: 'PDF',
+      doc: 'Word',
+      docx: 'Word',
+      xls: 'Excel',
+      xlsx: 'Excel',
+      jpg: 'Image',
+      jpeg: 'Image',
+      png: 'Image',
+      gif: 'Image',
+      txt: 'Text',
+      csv: 'CSV',
+    };
+    return typeMap[ext] || ext.toUpperCase();
+  };
+
+  const fetchBookingsAndDocuments = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await getAllBookings();
+      const allBookings = response.bookings || [];
+      setBookings(allBookings);
+
+      const allDocuments: DocumentWithBooking[] = [];
+      const userIds = new Set<string>();
+
+      allBookings.forEach((booking: Booking) => {
+        userIds.add(booking.userId);
+        if (booking.documents && booking.documents.length > 0) {
+          booking.documents.forEach((doc: Document) => {
+            const actualFileName = doc.fileName || doc.name || 'document';
+            const actualFilePath = doc.filePath || doc.url || '';
+            const actualMimeType = doc.mimeType || doc.type || '';
+
+            let fileType = '';
+            if (actualMimeType.includes('/')) {
+              const parts = actualMimeType.split('/');
+              fileType = getFileType(parts[1]);
+            } else {
+              fileType = getFileType(actualFileName);
+            }
+
+            allDocuments.push({
+              ...doc,
+              bookingId: booking.id,
+              quoteNumber: getQuoteNumber(booking),
+              userId: booking.userId,
+              organizationId: booking.organizationId,
+              route: `${booking.origin || 'N/A'} → ${booking.destination || 'N/A'}`,
+              status: booking.status,
+              fileName: actualFileName,
+              filePath: actualFilePath,
+              fileType: fileType,
+            });
+          });
+        }
+      });
+
+      try {
+        const usersData = await getAllUsers();
+
+        if (usersData && usersData.users) {
+          const usersMap = new Map(
+            usersData.users.map((u: any) => {
+              const fullName = `${u.firstName || ''} ${u.lastName || ''}`.trim();
+              return [u.id, fullName || u.email || u.id.substring(0, 8)];
+            })
+          );
+
+          allDocuments.forEach(doc => {
+            const userName = usersMap.get(doc.userId);
+            doc.userName = userName || doc.userId.substring(0, 8) + '...';
+          });
+        }
+      } catch (userError) {
+        console.error('Failed to fetch user names:', userError);
+        allDocuments.forEach(doc => {
+          doc.userName = doc.userId.substring(0, 8) + '...';
+        });
+      }
+
+      setDocuments(allDocuments);
+      setError(null);
+    } catch (err: any) {
+      setError(err.message || t('loadError'));
+    } finally {
+      setLoading(false);
+    }
+  }, [t]);
+
+  useEffect(() => {
+    fetchBookingsAndDocuments();
+  }, [fetchBookingsAndDocuments]);
+
+  const uniqueUsers = Array.from(
+    new Map(
+      documents.map(doc => [doc.userId, { id: doc.userId, name: doc.userName || doc.userId.substring(0, 8) + '...' }])
+    ).values()
+  );
+
+  const filteredDocuments = documents.filter(doc => {
+    const matchesSearch = searchTerm === '' ||
+      (doc.fileName && doc.fileName.toLowerCase().includes(searchTerm.toLowerCase())) ||
+      (doc.name && doc.name.toLowerCase().includes(searchTerm.toLowerCase())) ||
+      (doc.type && doc.type.toLowerCase().includes(searchTerm.toLowerCase())) ||
+      doc.route.toLowerCase().includes(searchTerm.toLowerCase());
+
+    const matchesUser = filterUserId === 'all' || doc.userId === filterUserId;
+
+    const matchesQuote = filterQuoteNumber === '' ||
+      doc.quoteNumber.toLowerCase().includes(filterQuoteNumber.toLowerCase());
+
+    return matchesSearch && matchesUser && matchesQuote;
+  });
+
+  const totalPages = Math.ceil(filteredDocuments.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const paginatedDocuments = filteredDocuments.slice(startIndex, endIndex);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchTerm, filterUserId, filterQuoteNumber]);
+
+  const getDocumentIcon = (type: string): ReactNode => {
+    const typeLower = type.toLowerCase();
+    const cls = "h-6 w-6";
+    const iconMap: Record<string, ReactNode> = {
+      'application/pdf': <FileText className={`${cls} text-red-500`} />,
+      'image/jpeg': <ImageIcon className={`${cls} text-green-500`} />,
+      'image/png': <ImageIcon className={`${cls} text-green-500`} />,
+      'image/jpg': <ImageIcon className={`${cls} text-green-500`} />,
+      pdf: <FileText className={`${cls} text-red-500`} />,
+      jpeg: <ImageIcon className={`${cls} text-green-500`} />,
+      jpg: <ImageIcon className={`${cls} text-green-500`} />,
+      png: <ImageIcon className={`${cls} text-green-500`} />,
+      gif: <ImageIcon className={`${cls} text-green-500`} />,
+      image: <ImageIcon className={`${cls} text-green-500`} />,
+      word: <FileEdit className={`${cls} text-blue-500`} />,
+      doc: <FileEdit className={`${cls} text-blue-500`} />,
+      docx: <FileEdit className={`${cls} text-blue-500`} />,
+      excel: <FileSpreadsheet className={`${cls} text-green-600`} />,
+      xls: <FileSpreadsheet className={`${cls} text-green-600`} />,
+      xlsx: <FileSpreadsheet className={`${cls} text-green-600`} />,
+      csv: <FileSpreadsheet className={`${cls} text-green-600`} />,
+      text: <FileText className={`${cls} text-gray-500`} />,
+      txt: <FileText className={`${cls} text-gray-500`} />,
+    };
+    return iconMap[typeLower] || <Paperclip className={`${cls} text-gray-400`} />;
+  };
+
+  const getStatusColor = (status: string) => {
+    const colors: Record<string, string> = {
+      pending: 'bg-yellow-100 text-yellow-800',
+      accepted: 'bg-green-100 text-green-800',
+      rejected: 'bg-red-100 text-red-800',
+      cancelled: 'bg-gray-100 text-gray-800',
+    };
+    return colors[status.toLowerCase()] || 'bg-gray-100 text-gray-800';
+  };
+
+  const handleDeleteDocument = async (bookingId: string, documentId: string) => {
+    if (!window.confirm(t('confirmDelete'))) return;
+    setDeletingId(documentId);
+    try {
+      await deleteAdminDocument(bookingId, documentId);
+      setDocuments(prev => prev.filter(d => d.id !== documentId));
+    } catch (err: any) {
+      setError(err.message || t('deleteError'));
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  const handleDownload = async (url: string, fileName: string) => {
+    try {
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = fileName;
+      link.target = '_blank';
+      link.setAttribute('download', fileName);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      setTimeout(async () => {
+        try {
+          const response = await fetch(url, {
+            mode: 'cors',
+            credentials: 'include',
+          });
+
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+
+          const blob = await response.blob();
+          const blobUrl = window.URL.createObjectURL(blob);
+          const link2 = document.createElement('a');
+          link2.href = blobUrl;
+          link2.download = fileName;
+          document.body.appendChild(link2);
+          link2.click();
+          document.body.removeChild(link2);
+          window.URL.revokeObjectURL(blobUrl);
+        } catch (fetchError) {
+          console.error('Fetch download failed:', fetchError);
+        }
+      }, 100);
+    } catch (error) {
+      console.error('Error downloading file:', error);
+      const message = error instanceof Error ? error.message : t('unknownError');
+      alert(t('downloadError', { message }));
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">{t('loading')}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={t('title')}
+        description={t('subtitle')}
+      />
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+          <div className="text-sm text-gray-500">{t('stats.totalDocs')}</div>
+          <div className="text-2xl font-bold text-gray-900">{documents.length}</div>
+        </div>
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+          <div className="text-sm text-gray-500">{t('stats.bookingsWithDocs')}</div>
+          <div className="text-2xl font-bold text-blue-600">
+            {bookings.filter(b => b.documents && b.documents.length > 0).length}
+          </div>
+        </div>
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+          <div className="text-sm text-gray-500">{t('stats.filtered')}</div>
+          <div className="text-2xl font-bold text-green-600">{filteredDocuments.length}</div>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              {t('filters.search')}
+            </label>
+            <input
+              type="text"
+              placeholder={t('filters.searchPlaceholder')}
+              value={searchTerm}
+              onChange={e => setSearchTerm(e.target.value)}
+              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              {t('filters.quoteNumber')}
+            </label>
+            <input
+              type="text"
+              placeholder={t('filters.quoteNumberPlaceholder')}
+              value={filterQuoteNumber}
+              onChange={e => setFilterQuoteNumber(e.target.value)}
+              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              {t('filters.user')}
+            </label>
+            <select
+              value={filterUserId}
+              onChange={e => setFilterUserId(e.target.value)}
+              className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+            >
+              <option value="all">{t('filters.allUsers')}</option>
+              {uniqueUsers.map(user => (
+                <option key={user.id} value={user.id}>
+                  {user.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
+          {error}
+        </div>
+      )}
+
+      {/* Documents Table */}
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.name')}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.type')}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.quoteNumber')}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.route')}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.status')}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.user')}
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.actions')}
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {paginatedDocuments.length === 0 ? (
+              <tr>
+                <td colSpan={7} className="px-6 py-12 text-center text-gray-500">
+                  {t('table.empty')}
+                </td>
+              </tr>
+            ) : (
+              paginatedDocuments.map((doc, index) => (
+                <tr key={`${doc.bookingId}-${index}`} className="hover:bg-gray-50">
+                  <td className="px-6 py-4">
+                    <div className="text-sm font-medium text-gray-900">
+                      {doc.fileName || doc.name}
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="flex items-center">
+                      <span className="mr-2">{getDocumentIcon(doc.fileType || doc.type)}</span>
+                      <div className="text-xs text-gray-500">{doc.fileType || doc.type}</div>
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="text-sm font-medium text-gray-900">{doc.quoteNumber}</div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="text-sm text-gray-900">{doc.route}</div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(doc.status)}`}>
+                      {doc.status}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="text-sm text-gray-900">
+                      {doc.userName || doc.userId.substring(0, 8) + '...'}
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-right">
+                    <button
+                      onClick={(e) => {
+                        const menuKey = `${doc.bookingId}::${doc.id}`;
+                        if (openMenuId === menuKey) {
+                          setOpenMenuId(null);
+                          setMenuPosition(null);
+                        } else {
+                          const rect = e.currentTarget.getBoundingClientRect();
+                          setMenuPosition({ top: rect.bottom + 5, left: rect.left - 180 });
+                          setOpenMenuId(menuKey);
+                        }
+                      }}
+                      className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                    >
+                      <svg className="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+                      </svg>
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+
+        {/* Pagination Controls */}
+        {filteredDocuments.length > 0 && (
+          <div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+            <div className="flex-1 flex justify-between sm:hidden">
+              <button
+                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+                disabled={currentPage === 1}
+                className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {t('pagination.previous')}
+              </button>
+              <button
+                onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+                disabled={currentPage === totalPages}
+                className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {t('pagination.next')}
+              </button>
+            </div>
+            <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+              <div>
+                <p className="text-sm text-gray-700">
+                  {t('pagination.showing')} <span className="font-medium">{startIndex + 1}</span> {t('pagination.to')}{' '}
+                  <span className="font-medium">{Math.min(endIndex, filteredDocuments.length)}</span> {t('pagination.on')}{' '}
+                  <span className="font-medium">{filteredDocuments.length}</span> {t('pagination.results')}
+                </p>
+              </div>
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <label className="text-sm text-gray-700">{t('pagination.perPage')}</label>
+                  <select
+                    value={itemsPerPage}
+                    onChange={(e) => {
+                      setItemsPerPage(Number(e.target.value));
+                      setCurrentPage(1);
+                    }}
+                    className="border border-gray-300 rounded-md px-2 py-1 text-sm"
+                  >
+                    <option value={5}>5</option>
+                    <option value={10}>10</option>
+                    <option value={25}>25</option>
+                    <option value={50}>50</option>
+                    <option value={100}>100</option>
+                  </select>
+                </div>
+                <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+                  <button
+                    onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+                    disabled={currentPage === 1}
+                    className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <span className="sr-only">{t('pagination.previous')}</span>
+                    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                  </button>
+
+                  {/* Page numbers */}
+                  {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                    let pageNum;
+                    if (totalPages <= 5) {
+                      pageNum = i + 1;
+                    } else if (currentPage <= 3) {
+                      pageNum = i + 1;
+                    } else if (currentPage >= totalPages - 2) {
+                      pageNum = totalPages - 4 + i;
+                    } else {
+                      pageNum = currentPage - 2 + i;
+                    }
+
+                    return (
+                      <button
+                        key={pageNum}
+                        onClick={() => setCurrentPage(pageNum)}
+                        className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
+                          currentPage === pageNum
+                            ? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
+                            : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
+                        }`}
+                      >
+                        {pageNum}
+                      </button>
+                    );
+                  })}
+
+                  <button
+                    onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+                    disabled={currentPage === totalPages}
+                    className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <span className="sr-only">{t('pagination.next')}</span>
+                    <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+                    </svg>
+                  </button>
+                </nav>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+      {/* Actions Dropdown Menu */}
+      {openMenuId && menuPosition && (
+        <>
+          <div
+            className="fixed inset-0 z-[998]"
+            onClick={() => { setOpenMenuId(null); setMenuPosition(null); }}
+          />
+          <div
+            className="fixed w-56 bg-white border-2 border-gray-300 rounded-lg shadow-2xl z-[999]"
+            style={{ top: `${menuPosition.top}px`, left: `${menuPosition.left}px` }}
+          >
+            <div className="py-2">
+              {(() => {
+                const [bookingId, documentId] = openMenuId.split('::');
+                const doc = documents.find(d => d.bookingId === bookingId && d.id === documentId);
+                if (!doc) return null;
+                return (
+                  <>
+                    <button
+                      onClick={() => {
+                        setOpenMenuId(null);
+                        setMenuPosition(null);
+                        handleDownload(doc.filePath || doc.url || '', doc.fileName || doc.name || 'document');
+                      }}
+                      className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3 border-b border-gray-200"
+                    >
+                      <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                      </svg>
+                      <span className="text-sm font-medium text-gray-700">{t('menu.download')}</span>
+                    </button>
+                    <button
+                      onClick={() => {
+                        const bId = doc.bookingId;
+                        const dId = doc.id;
+                        setOpenMenuId(null);
+                        setMenuPosition(null);
+                        handleDeleteDocument(bId, dId);
+                      }}
+                      disabled={deletingId === doc.id}
+                      className="w-full px-4 py-3 text-left hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-3"
+                    >
+                      <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                      <span className="text-sm font-medium text-red-600">{t('menu.delete')}</span>
+                    </button>
+                  </>
+                );
+              })()}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/frontend/app/dashboard/admin/logs/page.tsx b/apps/frontend/app/[locale]/dashboard/admin/logs/page.tsx
similarity index 91%
rename from apps/frontend/app/dashboard/admin/logs/page.tsx
rename to apps/frontend/app/[locale]/dashboard/admin/logs/page.tsx
index 2b5c458..81c889e 100644
--- a/apps/frontend/app/dashboard/admin/logs/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/admin/logs/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
 import {
   Download,
   RefreshCw,
@@ -104,6 +105,10 @@ function StatCard({
 // ─── Page ─────────────────────────────────────────────────────────────────────
 
 export default function AdminLogsPage() {
+  const t = useTranslations('dashboard.admin.logs');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
+
   const [logs, setLogs] = useState<LogEntry[]>([]);
   const [services, setServices] = useState<string[]>([]);
   const [loading, setLoading] = useState(false);
@@ -191,8 +196,8 @@ export default function AdminLogsPage() {
   return (
     <div className="space-y-6">
       <PageHeader
-        title="Logs système"
-        description="Visualisation et export des logs applicatifs en temps réel"
+        title={t('title')}
+        description={t('subtitle')}
         actions={
           <div className="flex items-center gap-2">
             <button
@@ -201,7 +206,7 @@ export default function AdminLogsPage() {
               className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
             >
               <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
-              <span className="hidden sm:inline">Actualiser</span>
+              <span className="hidden sm:inline">{t('refresh')}</span>
             </button>
             <div className="relative group">
               <button
@@ -209,20 +214,20 @@ export default function AdminLogsPage() {
                 className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-white bg-[#10183A] rounded-lg hover:bg-[#1a2550] transition-colors disabled:opacity-50"
               >
                 <Download className="h-4 w-4" />
-                <span className="hidden sm:inline">{exportLoading ? 'Export...' : 'Exporter'}</span>
+                <span className="hidden sm:inline">{exportLoading ? t('exporting') : t('export')}</span>
               </button>
               <div className="absolute right-0 mt-1 w-36 bg-white rounded-lg shadow-lg border border-gray-200 z-10 hidden group-hover:block">
                 <button
                   onClick={() => handleExport('csv')}
                   className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                 >
-                  Télécharger CSV
+                  {t('downloadCsv')}
                 </button>
                 <button
                   onClick={() => handleExport('json')}
                   className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                 >
-                  Télécharger JSON
+                  {t('downloadJson')}
                 </button>
               </div>
             </div>
@@ -233,25 +238,25 @@ export default function AdminLogsPage() {
       {/* Stats */}
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
         <StatCard
-          label="Total logs"
+          label={t('stats.total')}
           value={total}
           icon={Activity}
           color="bg-blue-100 text-blue-600"
         />
         <StatCard
-          label="Erreurs"
+          label={t('stats.errors')}
           value={countByLevel('error') + countByLevel('fatal')}
           icon={AlertTriangle}
           color="bg-red-100 text-red-600"
         />
         <StatCard
-          label="Warnings"
+          label={t('stats.warnings')}
           value={countByLevel('warn')}
           icon={AlertTriangle}
           color="bg-yellow-100 text-yellow-600"
         />
         <StatCard
-          label="Info"
+          label={t('stats.info')}
           value={countByLevel('info')}
           icon={Info}
           color="bg-green-100 text-green-600"
@@ -262,18 +267,18 @@ export default function AdminLogsPage() {
       <div className="bg-white rounded-lg border p-4">
         <div className="flex items-center gap-2 mb-4">
           <Filter className="h-4 w-4 text-gray-500" />
-          <h2 className="text-sm font-semibold text-gray-700">Filtres</h2>
+          <h2 className="text-sm font-semibold text-gray-700">{t('filters.title')}</h2>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-3">
           {/* Service */}
           <div>
-            <label className="block text-xs font-medium text-gray-500 mb-1">Service</label>
+            <label className="block text-xs font-medium text-gray-500 mb-1">{t('filters.service')}</label>
             <select
               value={filters.service}
               onChange={e => setFilter('service', e.target.value)}
               className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#34CCCD] focus:border-[#34CCCD] focus:outline-none"
             >
-              <option value="all">Tous</option>
+              <option value="all">{t('filters.all')}</option>
               {services.map(s => (
                 <option key={s} value={s}>
                   {s}
@@ -284,13 +289,13 @@ export default function AdminLogsPage() {
 
           {/* Level */}
           <div>
-            <label className="block text-xs font-medium text-gray-500 mb-1">Niveau</label>
+            <label className="block text-xs font-medium text-gray-500 mb-1">{t('filters.level')}</label>
             <select
               value={filters.level}
               onChange={e => setFilter('level', e.target.value)}
               className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#34CCCD] focus:border-[#34CCCD] focus:outline-none"
             >
-              <option value="all">Tous</option>
+              <option value="all">{t('filters.all')}</option>
               <option value="error">Error</option>
               <option value="fatal">Fatal</option>
               <option value="warn">Warn</option>
@@ -301,10 +306,10 @@ export default function AdminLogsPage() {
 
           {/* Search */}
           <div>
-            <label className="block text-xs font-medium text-gray-500 mb-1">Recherche</label>
+            <label className="block text-xs font-medium text-gray-500 mb-1">{t('filters.search')}</label>
             <input
               type="text"
-              placeholder="Texte libre..."
+              placeholder={t('filters.searchPlaceholder')}
               value={filters.search}
               onChange={e => setFilter('search', e.target.value)}
               onKeyDown={e => e.key === 'Enter' && fetchLogs()}
@@ -314,7 +319,7 @@ export default function AdminLogsPage() {
 
           {/* Start */}
           <div>
-            <label className="block text-xs font-medium text-gray-500 mb-1">Début</label>
+            <label className="block text-xs font-medium text-gray-500 mb-1">{t('filters.start')}</label>
             <input
               type="datetime-local"
               value={filters.startDate}
@@ -325,7 +330,7 @@ export default function AdminLogsPage() {
 
           {/* End */}
           <div>
-            <label className="block text-xs font-medium text-gray-500 mb-1">Fin</label>
+            <label className="block text-xs font-medium text-gray-500 mb-1">{t('filters.end')}</label>
             <input
               type="datetime-local"
               value={filters.endDate}
@@ -336,7 +341,7 @@ export default function AdminLogsPage() {
 
           {/* Limit + Apply */}
           <div className="flex flex-col justify-end gap-2">
-            <label className="block text-xs font-medium text-gray-500">Limite</label>
+            <label className="block text-xs font-medium text-gray-500">{t('filters.limit')}</label>
             <div className="flex gap-2">
               <select
                 value={filters.limit}
@@ -353,7 +358,7 @@ export default function AdminLogsPage() {
                 disabled={loading}
                 className="px-3 py-2 text-sm font-medium text-white bg-[#34CCCD] rounded-lg hover:bg-[#2bb8b9] transition-colors disabled:opacity-50 whitespace-nowrap"
               >
-                Filtrer
+                {t('filters.apply')}
               </button>
             </div>
           </div>
@@ -365,10 +370,10 @@ export default function AdminLogsPage() {
         <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center gap-2">
           <AlertTriangle className="h-4 w-4 flex-shrink-0" />
           <span className="text-sm">
-            Impossible de contacter le log-exporter : <strong>{error}</strong>
+            {t('errorBanner')} <strong>{error}</strong>
             <br />
             <span className="text-xs text-red-500">
-              Vérifiez que le backend et le log-exporter sont démarrés.
+              {t('errorHint')}
             </span>
           </span>
         </div>
@@ -380,12 +385,12 @@ export default function AdminLogsPage() {
           <div className="flex items-center gap-2">
             <Server className="h-4 w-4 text-gray-500" />
             <span className="text-sm font-medium text-gray-700">
-              {loading ? 'Chargement...' : `${total} entrée${total !== 1 ? 's' : ''}`}
+              {loading ? t('loading') : t('entries', { count: total })}
             </span>
           </div>
           {!loading && logs.length > 0 && (
             <span className="text-xs text-gray-400">
-              Cliquer sur une ligne pour les détails
+              {t('clickHint')}
             </span>
           )}
         </div>
@@ -397,7 +402,7 @@ export default function AdminLogsPage() {
         ) : logs.length === 0 && !error ? (
           <div className="flex flex-col items-center justify-center h-40 text-gray-400 gap-2">
             <Bug className="h-8 w-8" />
-            <p className="text-sm">Aucun log trouvé pour ces filtres</p>
+            <p className="text-sm">{t('empty')}</p>
           </div>
         ) : (
           <div className="overflow-x-auto">
@@ -405,22 +410,22 @@ export default function AdminLogsPage() {
               <thead className="bg-gray-50 border-b">
                 <tr>
                   <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">
-                    Timestamp
+                    {t('table.timestamp')}
                   </th>
                   <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
-                    Service
+                    {t('table.service')}
                   </th>
                   <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
-                    Niveau
+                    {t('table.level')}
                   </th>
                   <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
-                    Contexte
+                    {t('table.context')}
                   </th>
                   <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
-                    Message
+                    {t('table.message')}
                   </th>
                   <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase whitespace-nowrap">
-                    Req / Status
+                    {t('table.req')}
                   </th>
                 </tr>
               </thead>
@@ -433,7 +438,7 @@ export default function AdminLogsPage() {
                       className={`cursor-pointer hover:bg-gray-50 transition-colors ${LEVEL_ROW_BG[log.level] || ''}`}
                     >
                       <td className="px-4 py-2 font-mono text-xs text-gray-500 whitespace-nowrap">
-                        {new Date(log.timestamp).toLocaleString('fr-FR', {
+                        {new Date(log.timestamp).toLocaleString(dateLocale, {
                           day: '2-digit',
                           month: '2-digit',
                           hour: '2-digit',
@@ -490,25 +495,25 @@ export default function AdminLogsPage() {
                         <td colSpan={6} className="px-4 py-3">
                           <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
                             <div>
-                              <span className="font-semibold text-gray-600">Timestamp</span>
+                              <span className="font-semibold text-gray-600">{t('detail.timestamp')}</span>
                               <p className="font-mono text-gray-800 mt-0.5">{log.timestamp}</p>
                             </div>
                             {log.reqId && (
                               <div>
-                                <span className="font-semibold text-gray-600">Request ID</span>
+                                <span className="font-semibold text-gray-600">{t('detail.requestId')}</span>
                                 <p className="font-mono text-gray-800 mt-0.5 truncate">{log.reqId}</p>
                               </div>
                             )}
                             {log.response_time_ms && (
                               <div>
-                                <span className="font-semibold text-gray-600">Durée</span>
+                                <span className="font-semibold text-gray-600">{t('detail.duration')}</span>
                                 <p className="font-mono text-gray-800 mt-0.5">
                                   {log.response_time_ms} ms
                                 </p>
                               </div>
                             )}
                             <div className="col-span-2 md:col-span-4">
-                              <span className="font-semibold text-gray-600">Message complet</span>
+                              <span className="font-semibold text-gray-600">{t('detail.fullMessage')}</span>
                               <pre className="mt-0.5 p-2 bg-white rounded border font-mono text-gray-800 overflow-x-auto whitespace-pre-wrap break-all">
                                 {log.error
                                   ? `[ERROR] ${log.error}\n\n${log.message}`
diff --git a/apps/frontend/app/dashboard/admin/organizations/page.tsx b/apps/frontend/app/[locale]/dashboard/admin/organizations/page.tsx
similarity index 84%
rename from apps/frontend/app/dashboard/admin/organizations/page.tsx
rename to apps/frontend/app/[locale]/dashboard/admin/organizations/page.tsx
index 1f37e93..cb82ff5 100644
--- a/apps/frontend/app/dashboard/admin/organizations/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/admin/organizations/page.tsx
@@ -1,563 +1,573 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { getAllOrganizations, verifySiret, approveSiret, rejectSiret } from '@/lib/api/admin';
-import { createOrganization, updateOrganization } from '@/lib/api/organizations';
-import { PageHeader } from '@/components/ui/PageHeader';
-
-interface Organization {
-  id: string;
-  name: string;
-  type: string;
-  scac?: string;
-  siren?: string;
-  siret?: string;
-  siretVerified?: boolean;
-  statusBadge?: string;
-  eori?: string;
-  contact_phone?: string;
-  contact_email?: string;
-  address: {
-    street: string;
-    city: string;
-    state?: string;
-    postalCode: string;
-    country: string;
-  };
-  logoUrl?: string;
-  isActive: boolean;
-  createdAt: string;
-}
-
-export default function AdminOrganizationsPage() {
-  const [organizations, setOrganizations] = useState<Organization[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [verifyingId, setVerifyingId] = useState<string | null>(null);
-
-  // Form state
-  const [formData, setFormData] = useState<{
-    name: string;
-    type: string;
-    scac: string;
-    siren: string;
-    siret: string;
-    eori: string;
-    contact_phone: string;
-    contact_email: string;
-    address: {
-      street: string;
-      city: string;
-      state?: string;
-      postalCode: string;
-      country: string;
-    };
-    logoUrl: string;
-  }>({
-    name: '',
-    type: 'FREIGHT_FORWARDER',
-    scac: '',
-    siren: '',
-    siret: '',
-    eori: '',
-    contact_phone: '',
-    contact_email: '',
-    address: {
-      street: '',
-      city: '',
-      state: '',
-      postalCode: '',
-      country: 'FR',
-    },
-    logoUrl: '',
-  });
-
-  useEffect(() => {
-    fetchOrganizations();
-  }, []);
-
-  const fetchOrganizations = async () => {
-    try {
-      setLoading(true);
-      const response = await getAllOrganizations();
-      setOrganizations(response.organizations || []);
-      setError(null);
-    } catch (err: any) {
-      setError(err.message || 'Failed to load organizations');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCreate = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      // Transform formData to match API expected format
-      const apiData = {
-        name: formData.name,
-        type: formData.type as any, // OrganizationType
-        address_street: formData.address.street,
-        address_city: formData.address.city,
-        address_postal_code: formData.address.postalCode,
-        address_country: formData.address.country,
-        contact_email: formData.contact_email || undefined,
-        contact_phone: formData.contact_phone || undefined,
-        logo_url: formData.logoUrl || undefined,
-      };
-      await createOrganization(apiData);
-      await fetchOrganizations();
-      setShowCreateModal(false);
-      resetForm();
-    } catch (err: any) {
-      alert(err.message || 'Failed to create organization');
-    }
-  };
-
-  const handleUpdate = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!selectedOrg) return;
-
-    try {
-      await updateOrganization(selectedOrg.id, formData);
-      await fetchOrganizations();
-      setShowEditModal(false);
-      setSelectedOrg(null);
-      resetForm();
-    } catch (err: any) {
-      alert(err.message || 'Failed to update organization');
-    }
-  };
-
-  const resetForm = () => {
-    setFormData({
-      name: '',
-      type: 'FREIGHT_FORWARDER',
-      scac: '',
-      siren: '',
-      siret: '',
-      eori: '',
-      contact_phone: '',
-      contact_email: '',
-      address: {
-        street: '',
-        city: '',
-        state: '',
-        postalCode: '',
-        country: 'FR',
-      },
-      logoUrl: '',
-    });
-  };
-
-  const handleVerifySiret = async (orgId: string) => {
-    try {
-      setVerifyingId(orgId);
-      const result = await verifySiret(orgId);
-      if (result.verified) {
-        alert(`SIRET verifie avec succes !\nEntreprise: ${result.companyName || 'N/A'}\nAdresse: ${result.address || 'N/A'}`);
-        await fetchOrganizations();
-      } else {
-        alert(result.message || 'SIRET invalide ou introuvable.');
-      }
-    } catch (err: any) {
-      alert(err.message || 'Erreur lors de la verification du SIRET');
-    } finally {
-      setVerifyingId(null);
-    }
-  };
-
-  const handleApproveSiret = async (orgId: string) => {
-    if (!confirm('Confirmer l\'approbation manuelle du SIRET/SIREN de cette organisation ?')) return;
-    try {
-      setVerifyingId(orgId);
-      const result = await approveSiret(orgId);
-      alert(result.message);
-      await fetchOrganizations();
-    } catch (err: any) {
-      alert(err.message || 'Erreur lors de l\'approbation');
-    } finally {
-      setVerifyingId(null);
-    }
-  };
-
-  const handleRejectSiret = async (orgId: string) => {
-    if (!confirm('Confirmer le refus du SIRET/SIREN ? L\'organisation ne pourra plus effectuer d\'achats.')) return;
-    try {
-      setVerifyingId(orgId);
-      const result = await rejectSiret(orgId);
-      alert(result.message);
-      await fetchOrganizations();
-    } catch (err: any) {
-      alert(err.message || 'Erreur lors du refus');
-    } finally {
-      setVerifyingId(null);
-    }
-  };
-
-  const openEditModal = (org: Organization) => {
-    setSelectedOrg(org);
-    setFormData({
-      name: org.name,
-      type: org.type,
-      scac: org.scac || '',
-      siren: org.siren || '',
-      siret: org.siret || '',
-      eori: org.eori || '',
-      contact_phone: org.contact_phone || '',
-      contact_email: org.contact_email || '',
-      address: org.address,
-      logoUrl: org.logoUrl || '',
-    });
-    setShowEditModal(true);
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-96">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
-          <p className="mt-4 text-gray-600">Loading organizations...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <PageHeader
-        title="Organization Management"
-        description="Manage all organizations in the system"
-        actions={
-          <button
-            onClick={() => setShowCreateModal(true)}
-            className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
-          >
-            + Create Organization
-          </button>
-        }
-      />
-
-      {/* Error Message */}
-      {error && (
-        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
-          {error}
-        </div>
-      )}
-
-      {/* Organizations Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {organizations.map(org => (
-          <div key={org.id} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-            <div className="flex items-start justify-between mb-4">
-              <div className="flex-1">
-                <h3 className="text-lg font-semibold text-gray-900">{org.name}</h3>
-                <span className={`inline-block mt-2 px-2 py-1 text-xs font-semibold rounded-full ${
-                  org.type === 'FREIGHT_FORWARDER' ? 'bg-blue-100 text-blue-800' :
-                  org.type === 'CARRIER' ? 'bg-green-100 text-green-800' :
-                  'bg-purple-100 text-purple-800'
-                }`}>
-                  {org.type.replace('_', ' ')}
-                </span>
-              </div>
-              <span className={`px-2 py-1 text-xs font-semibold rounded-full ${
-                org.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
-              }`}>
-                {org.isActive ? 'Active' : 'Inactive'}
-              </span>
-            </div>
-
-            <div className="space-y-2 text-sm text-gray-600 mb-4">
-              {org.scac && (
-                <div>
-                  <span className="font-medium">SCAC:</span> {org.scac}
-                </div>
-              )}
-              {org.siren && (
-                <div>
-                  <span className="font-medium">SIREN:</span> {org.siren}
-                </div>
-              )}
-              <div className="flex items-center gap-2">
-                <span className="font-medium">SIRET:</span>
-                {org.siret ? (
-                  <>
-                    <span>{org.siret}</span>
-                    {org.siretVerified ? (
-                      <span className="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800">
-                        Verifie
-                      </span>
-                    ) : (
-                      <span className="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
-                        Non verifie
-                      </span>
-                    )}
-                  </>
-                ) : (
-                  <span className="text-gray-400">Non renseigne</span>
-                )}
-              </div>
-              {org.contact_email && (
-                <div>
-                  <span className="font-medium">Email:</span> {org.contact_email}
-                </div>
-              )}
-              <div>
-                <span className="font-medium">Location:</span> {org.address.city}, {org.address.country}
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <div className="flex space-x-2">
-                <button
-                  onClick={() => openEditModal(org)}
-                  className="flex-1 px-3 py-2 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 transition-colors text-sm font-medium"
-                >
-                  Edit
-                </button>
-                {org.siret && !org.siretVerified && (
-                  <button
-                    onClick={() => handleVerifySiret(org.id)}
-                    disabled={verifyingId === org.id}
-                    className="flex-1 px-3 py-2 bg-purple-50 text-purple-700 rounded-md hover:bg-purple-100 transition-colors text-sm font-medium disabled:opacity-50"
-                  >
-                    {verifyingId === org.id ? '...' : 'Verifier API'}
-                  </button>
-                )}
-              </div>
-              {(org.siret || org.siren) && (
-                <div className="flex space-x-2">
-                  {!org.siretVerified ? (
-                    <button
-                      onClick={() => handleApproveSiret(org.id)}
-                      disabled={verifyingId === org.id}
-                      className="flex-1 px-3 py-2 bg-green-50 text-green-700 rounded-md hover:bg-green-100 transition-colors text-sm font-medium disabled:opacity-50"
-                    >
-                      Approuver SIRET
-                    </button>
-                  ) : (
-                    <button
-                      onClick={() => handleRejectSiret(org.id)}
-                      disabled={verifyingId === org.id}
-                      className="flex-1 px-3 py-2 bg-red-50 text-red-700 rounded-md hover:bg-red-100 transition-colors text-sm font-medium disabled:opacity-50"
-                    >
-                      Rejeter SIRET
-                    </button>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Create/Edit Modal */}
-      {(showCreateModal || showEditModal) && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto">
-          <div className="bg-white rounded-lg p-6 max-w-2xl w-full m-4 max-h-[90vh] overflow-y-auto">
-            <h2 className="text-xl font-bold mb-4">
-              {showCreateModal ? 'Create New Organization' : 'Edit Organization'}
-            </h2>
-            <form onSubmit={showCreateModal ? handleCreate : handleUpdate} className="space-y-4">
-              <div className="grid grid-cols-2 gap-4">
-                <div className="col-span-2">
-                  <label className="block text-sm font-medium text-gray-700">Organization Name *</label>
-                  <input
-                    type="text"
-                    required
-                    value={formData.name}
-                    onChange={e => setFormData({ ...formData, name: e.target.value })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">Type *</label>
-                  <select
-                    value={formData.type}
-                    onChange={e => setFormData({ ...formData, type: e.target.value })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                  >
-                    <option value="FREIGHT_FORWARDER">Freight Forwarder</option>
-                    <option value="CARRIER">Carrier</option>
-                    <option value="SHIPPER">Shipper</option>
-                  </select>
-                </div>
-
-                {formData.type === 'CARRIER' && (
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700">SCAC Code *</label>
-                    <input
-                      type="text"
-                      required={formData.type === 'CARRIER'}
-                      maxLength={4}
-                      value={formData.scac}
-                      onChange={e => setFormData({ ...formData, scac: e.target.value.toUpperCase() })}
-                      className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                    />
-                  </div>
-                )}
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">SIREN</label>
-                  <input
-                    type="text"
-                    maxLength={9}
-                    value={formData.siren}
-                    onChange={e => setFormData({ ...formData, siren: e.target.value })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">SIRET (14 chiffres)</label>
-                  <input
-                    type="text"
-                    maxLength={14}
-                    value={formData.siret}
-                    onChange={e => setFormData({ ...formData, siret: e.target.value.replace(/\D/g, '') })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                    placeholder="12345678901234"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">EORI</label>
-                  <input
-                    type="text"
-                    value={formData.eori}
-                    onChange={e => setFormData({ ...formData, eori: e.target.value })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">Contact Phone</label>
-                  <input
-                    type="tel"
-                    value={formData.contact_phone}
-                    onChange={e => setFormData({ ...formData, contact_phone: e.target.value })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">Contact Email</label>
-                  <input
-                    type="email"
-                    value={formData.contact_email}
-                    onChange={e => setFormData({ ...formData, contact_email: e.target.value })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-
-                <div className="col-span-2">
-                  <label className="block text-sm font-medium text-gray-700">Street Address *</label>
-                  <input
-                    type="text"
-                    required
-                    value={formData.address.street}
-                    onChange={e => setFormData({
-                      ...formData,
-                      address: { ...formData.address, street: e.target.value }
-                    })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">City *</label>
-                  <input
-                    type="text"
-                    required
-                    value={formData.address.city}
-                    onChange={e => setFormData({
-                      ...formData,
-                      address: { ...formData.address, city: e.target.value }
-                    })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">Postal Code *</label>
-                  <input
-                    type="text"
-                    required
-                    value={formData.address.postalCode}
-                    onChange={e => setFormData({
-                      ...formData,
-                      address: { ...formData.address, postalCode: e.target.value }
-                    })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">State/Region</label>
-                  <input
-                    type="text"
-                    value={formData.address.state}
-                    onChange={e => setFormData({
-                      ...formData,
-                      address: { ...formData.address, state: e.target.value }
-                    })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">Country *</label>
-                  <input
-                    type="text"
-                    required
-                    maxLength={2}
-                    value={formData.address.country}
-                    onChange={e => setFormData({
-                      ...formData,
-                      address: { ...formData.address, country: e.target.value.toUpperCase() }
-                    })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-
-                <div className="col-span-2">
-                  <label className="block text-sm font-medium text-gray-700">Logo URL</label>
-                  <input
-                    type="url"
-                    value={formData.logoUrl}
-                    onChange={e => setFormData({ ...formData, logoUrl: e.target.value })}
-                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                  />
-                </div>
-              </div>
-
-              <div className="flex justify-end space-x-2 pt-4">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowCreateModal(false);
-                    setShowEditModal(false);
-                    setSelectedOrg(null);
-                    resetForm();
-                  }}
-                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-                >
-                  {showCreateModal ? 'Create' : 'Update'}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { getAllOrganizations, verifySiret, approveSiret, rejectSiret } from '@/lib/api/admin';
+import { createOrganization, updateOrganization } from '@/lib/api/organizations';
+import { PageHeader } from '@/components/ui/PageHeader';
+
+interface Organization {
+  id: string;
+  name: string;
+  type: string;
+  scac?: string;
+  siren?: string;
+  siret?: string;
+  siretVerified?: boolean;
+  statusBadge?: string;
+  eori?: string;
+  contact_phone?: string;
+  contact_email?: string;
+  address: {
+    street: string;
+    city: string;
+    state?: string;
+    postalCode: string;
+    country: string;
+  };
+  logoUrl?: string;
+  isActive: boolean;
+  createdAt: string;
+}
+
+export default function AdminOrganizationsPage() {
+  const t = useTranslations('dashboard.admin.organizations');
+
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [verifyingId, setVerifyingId] = useState<string | null>(null);
+
+  // Form state
+  const [formData, setFormData] = useState<{
+    name: string;
+    type: string;
+    scac: string;
+    siren: string;
+    siret: string;
+    eori: string;
+    contact_phone: string;
+    contact_email: string;
+    address: {
+      street: string;
+      city: string;
+      state?: string;
+      postalCode: string;
+      country: string;
+    };
+    logoUrl: string;
+  }>({
+    name: '',
+    type: 'FREIGHT_FORWARDER',
+    scac: '',
+    siren: '',
+    siret: '',
+    eori: '',
+    contact_phone: '',
+    contact_email: '',
+    address: {
+      street: '',
+      city: '',
+      state: '',
+      postalCode: '',
+      country: 'FR',
+    },
+    logoUrl: '',
+  });
+
+  useEffect(() => {
+    fetchOrganizations();
+  }, []);
+
+  const fetchOrganizations = async () => {
+    try {
+      setLoading(true);
+      const response = await getAllOrganizations();
+      setOrganizations(response.organizations || []);
+      setError(null);
+    } catch (err: any) {
+      setError(err.message || t('loadError'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const apiData = {
+        name: formData.name,
+        type: formData.type as any,
+        address_street: formData.address.street,
+        address_city: formData.address.city,
+        address_postal_code: formData.address.postalCode,
+        address_country: formData.address.country,
+        contact_email: formData.contact_email || undefined,
+        contact_phone: formData.contact_phone || undefined,
+        logo_url: formData.logoUrl || undefined,
+      };
+      await createOrganization(apiData);
+      await fetchOrganizations();
+      setShowCreateModal(false);
+      resetForm();
+    } catch (err: any) {
+      alert(err.message || t('createError'));
+    }
+  };
+
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedOrg) return;
+
+    try {
+      await updateOrganization(selectedOrg.id, formData);
+      await fetchOrganizations();
+      setShowEditModal(false);
+      setSelectedOrg(null);
+      resetForm();
+    } catch (err: any) {
+      alert(err.message || t('updateError'));
+    }
+  };
+
+  const resetForm = () => {
+    setFormData({
+      name: '',
+      type: 'FREIGHT_FORWARDER',
+      scac: '',
+      siren: '',
+      siret: '',
+      eori: '',
+      contact_phone: '',
+      contact_email: '',
+      address: {
+        street: '',
+        city: '',
+        state: '',
+        postalCode: '',
+        country: 'FR',
+      },
+      logoUrl: '',
+    });
+  };
+
+  const handleVerifySiret = async (orgId: string) => {
+    try {
+      setVerifyingId(orgId);
+      const result = await verifySiret(orgId);
+      if (result.verified) {
+        alert(t('siretVerified', { companyName: result.companyName || 'N/A', address: result.address || 'N/A' }));
+        await fetchOrganizations();
+      } else {
+        alert(result.message || t('siretInvalid'));
+      }
+    } catch (err: any) {
+      alert(err.message || t('siretError'));
+    } finally {
+      setVerifyingId(null);
+    }
+  };
+
+  const handleApproveSiret = async (orgId: string) => {
+    if (!confirm(t('confirmApprove'))) return;
+    try {
+      setVerifyingId(orgId);
+      const result = await approveSiret(orgId);
+      alert(result.message);
+      await fetchOrganizations();
+    } catch (err: any) {
+      alert(err.message || t('siretApproveError'));
+    } finally {
+      setVerifyingId(null);
+    }
+  };
+
+  const handleRejectSiret = async (orgId: string) => {
+    if (!confirm(t('confirmReject'))) return;
+    try {
+      setVerifyingId(orgId);
+      const result = await rejectSiret(orgId);
+      alert(result.message);
+      await fetchOrganizations();
+    } catch (err: any) {
+      alert(err.message || t('siretRejectError'));
+    } finally {
+      setVerifyingId(null);
+    }
+  };
+
+  const openEditModal = (org: Organization) => {
+    setSelectedOrg(org);
+    setFormData({
+      name: org.name,
+      type: org.type,
+      scac: org.scac || '',
+      siren: org.siren || '',
+      siret: org.siret || '',
+      eori: org.eori || '',
+      contact_phone: org.contact_phone || '',
+      contact_email: org.contact_email || '',
+      address: org.address,
+      logoUrl: org.logoUrl || '',
+    });
+    setShowEditModal(true);
+  };
+
+  const getTypeLabel = (type: string) => {
+    const allowed = ['FREIGHT_FORWARDER', 'CARRIER', 'SHIPPER'];
+    if (allowed.includes(type)) {
+      return t(`types.${type}` as any);
+    }
+    return type.replace('_', ' ');
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">{t('loading')}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={t('title')}
+        description={t('subtitle')}
+        actions={
+          <button
+            onClick={() => setShowCreateModal(true)}
+            className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            {t('create')}
+          </button>
+        }
+      />
+
+      {/* Error Message */}
+      {error && (
+        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
+          {error}
+        </div>
+      )}
+
+      {/* Organizations Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {organizations.map(org => (
+          <div key={org.id} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <div className="flex items-start justify-between mb-4">
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-gray-900">{org.name}</h3>
+                <span className={`inline-block mt-2 px-2 py-1 text-xs font-semibold rounded-full ${
+                  org.type === 'FREIGHT_FORWARDER' ? 'bg-blue-100 text-blue-800' :
+                  org.type === 'CARRIER' ? 'bg-green-100 text-green-800' :
+                  'bg-purple-100 text-purple-800'
+                }`}>
+                  {getTypeLabel(org.type)}
+                </span>
+              </div>
+              <span className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                org.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+              }`}>
+                {org.isActive ? t('active') : t('inactive')}
+              </span>
+            </div>
+
+            <div className="space-y-2 text-sm text-gray-600 mb-4">
+              {org.scac && (
+                <div>
+                  <span className="font-medium">{t('scac')}:</span> {org.scac}
+                </div>
+              )}
+              {org.siren && (
+                <div>
+                  <span className="font-medium">{t('siren')}:</span> {org.siren}
+                </div>
+              )}
+              <div className="flex items-center gap-2">
+                <span className="font-medium">{t('siret')}:</span>
+                {org.siret ? (
+                  <>
+                    <span>{org.siret}</span>
+                    {org.siretVerified ? (
+                      <span className="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800">
+                        {t('verified')}
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
+                        {t('notVerified')}
+                      </span>
+                    )}
+                  </>
+                ) : (
+                  <span className="text-gray-400">{t('notProvided')}</span>
+                )}
+              </div>
+              {org.contact_email && (
+                <div>
+                  <span className="font-medium">{t('email')}:</span> {org.contact_email}
+                </div>
+              )}
+              <div>
+                <span className="font-medium">{t('location')}:</span> {org.address.city}, {org.address.country}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex space-x-2">
+                <button
+                  onClick={() => openEditModal(org)}
+                  className="flex-1 px-3 py-2 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 transition-colors text-sm font-medium"
+                >
+                  {t('edit')}
+                </button>
+                {org.siret && !org.siretVerified && (
+                  <button
+                    onClick={() => handleVerifySiret(org.id)}
+                    disabled={verifyingId === org.id}
+                    className="flex-1 px-3 py-2 bg-purple-50 text-purple-700 rounded-md hover:bg-purple-100 transition-colors text-sm font-medium disabled:opacity-50"
+                  >
+                    {verifyingId === org.id ? t('verifying') : t('verifyApi')}
+                  </button>
+                )}
+              </div>
+              {(org.siret || org.siren) && (
+                <div className="flex space-x-2">
+                  {!org.siretVerified ? (
+                    <button
+                      onClick={() => handleApproveSiret(org.id)}
+                      disabled={verifyingId === org.id}
+                      className="flex-1 px-3 py-2 bg-green-50 text-green-700 rounded-md hover:bg-green-100 transition-colors text-sm font-medium disabled:opacity-50"
+                    >
+                      {t('approveSiret')}
+                    </button>
+                  ) : (
+                    <button
+                      onClick={() => handleRejectSiret(org.id)}
+                      disabled={verifyingId === org.id}
+                      className="flex-1 px-3 py-2 bg-red-50 text-red-700 rounded-md hover:bg-red-100 transition-colors text-sm font-medium disabled:opacity-50"
+                    >
+                      {t('rejectSiret')}
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Create/Edit Modal */}
+      {(showCreateModal || showEditModal) && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto">
+          <div className="bg-white rounded-lg p-6 max-w-2xl w-full m-4 max-h-[90vh] overflow-y-auto">
+            <h2 className="text-xl font-bold mb-4">
+              {showCreateModal ? t('modal.createTitle') : t('modal.editTitle')}
+            </h2>
+            <form onSubmit={showCreateModal ? handleCreate : handleUpdate} className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="col-span-2">
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.name')}</label>
+                  <input
+                    type="text"
+                    required
+                    value={formData.name}
+                    onChange={e => setFormData({ ...formData, name: e.target.value })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.type')}</label>
+                  <select
+                    value={formData.type}
+                    onChange={e => setFormData({ ...formData, type: e.target.value })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  >
+                    <option value="FREIGHT_FORWARDER">{t('types.FREIGHT_FORWARDER')}</option>
+                    <option value="CARRIER">{t('types.CARRIER')}</option>
+                    <option value="SHIPPER">{t('types.SHIPPER')}</option>
+                  </select>
+                </div>
+
+                {formData.type === 'CARRIER' && (
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">{t('modal.scacLabel')}</label>
+                    <input
+                      type="text"
+                      required={formData.type === 'CARRIER'}
+                      maxLength={4}
+                      value={formData.scac}
+                      onChange={e => setFormData({ ...formData, scac: e.target.value.toUpperCase() })}
+                      className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                    />
+                  </div>
+                )}
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.sirenLabel')}</label>
+                  <input
+                    type="text"
+                    maxLength={9}
+                    value={formData.siren}
+                    onChange={e => setFormData({ ...formData, siren: e.target.value })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.siretLabel')}</label>
+                  <input
+                    type="text"
+                    maxLength={14}
+                    value={formData.siret}
+                    onChange={e => setFormData({ ...formData, siret: e.target.value.replace(/\D/g, '') })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                    placeholder={t('modal.siretPlaceholder')}
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.eoriLabel')}</label>
+                  <input
+                    type="text"
+                    value={formData.eori}
+                    onChange={e => setFormData({ ...formData, eori: e.target.value })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.contactPhone')}</label>
+                  <input
+                    type="tel"
+                    value={formData.contact_phone}
+                    onChange={e => setFormData({ ...formData, contact_phone: e.target.value })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.contactEmail')}</label>
+                  <input
+                    type="email"
+                    value={formData.contact_email}
+                    onChange={e => setFormData({ ...formData, contact_email: e.target.value })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  />
+                </div>
+
+                <div className="col-span-2">
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.street')}</label>
+                  <input
+                    type="text"
+                    required
+                    value={formData.address.street}
+                    onChange={e => setFormData({
+                      ...formData,
+                      address: { ...formData.address, street: e.target.value }
+                    })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.city')}</label>
+                  <input
+                    type="text"
+                    required
+                    value={formData.address.city}
+                    onChange={e => setFormData({
+                      ...formData,
+                      address: { ...formData.address, city: e.target.value }
+                    })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.postalCode')}</label>
+                  <input
+                    type="text"
+                    required
+                    value={formData.address.postalCode}
+                    onChange={e => setFormData({
+                      ...formData,
+                      address: { ...formData.address, postalCode: e.target.value }
+                    })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.state')}</label>
+                  <input
+                    type="text"
+                    value={formData.address.state}
+                    onChange={e => setFormData({
+                      ...formData,
+                      address: { ...formData.address, state: e.target.value }
+                    })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.country')}</label>
+                  <input
+                    type="text"
+                    required
+                    maxLength={2}
+                    value={formData.address.country}
+                    onChange={e => setFormData({
+                      ...formData,
+                      address: { ...formData.address, country: e.target.value.toUpperCase() }
+                    })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  />
+                </div>
+
+                <div className="col-span-2">
+                  <label className="block text-sm font-medium text-gray-700">{t('modal.logoUrl')}</label>
+                  <input
+                    type="url"
+                    value={formData.logoUrl}
+                    onChange={e => setFormData({ ...formData, logoUrl: e.target.value })}
+                    className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                  />
+                </div>
+              </div>
+
+              <div className="flex justify-end space-x-2 pt-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowCreateModal(false);
+                    setShowEditModal(false);
+                    setSelectedOrg(null);
+                    resetForm();
+                  }}
+                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
+                >
+                  {t('modal.cancel')}
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+                >
+                  {showCreateModal ? t('modal.create') : t('modal.update')}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/frontend/app/dashboard/admin/users/page.tsx b/apps/frontend/app/[locale]/dashboard/admin/users/page.tsx
similarity index 85%
rename from apps/frontend/app/dashboard/admin/users/page.tsx
rename to apps/frontend/app/[locale]/dashboard/admin/users/page.tsx
index 3569e26..ce268e3 100644
--- a/apps/frontend/app/dashboard/admin/users/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/admin/users/page.tsx
@@ -1,461 +1,470 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { getAllUsers, updateAdminUser, deleteAdminUser } from '@/lib/api/admin';
-import { createUser } from '@/lib/api/users';
-import { getAllOrganizations } from '@/lib/api/admin';
-import type { UserRole } from '@/types/api';
-import { PageHeader } from '@/components/ui/PageHeader';
-
-interface User {
-  id: string;
-  email: string;
-  firstName: string;
-  lastName: string;
-  role: UserRole;
-  organizationId: string;
-  organizationName?: string;
-  isActive: boolean;
-  createdAt: string;
-}
-
-interface Organization {
-  id: string;
-  name: string;
-}
-
-export default function AdminUsersPage() {
-  const [users, setUsers] = useState<User[]>([]);
-  const [organizations, setOrganizations] = useState<Organization[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [selectedUser, setSelectedUser] = useState<User | null>(null);
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-
-  // Form state
-  const [formData, setFormData] = useState<{
-    email: string;
-    firstName: string;
-    lastName: string;
-    role: UserRole;
-    organizationId: string;
-    password: string;
-  }>({
-    email: '',
-    firstName: '',
-    lastName: '',
-    role: 'USER',
-    organizationId: '',
-    password: '',
-  });
-
-  // Fetch users and organizations
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    try {
-      setLoading(true);
-      const [usersResponse, orgsResponse] = await Promise.all([
-        getAllUsers(),
-        getAllOrganizations(),
-      ]);
-
-      setUsers(usersResponse.users || []);
-      setOrganizations(orgsResponse.organizations || []);
-      setError(null);
-    } catch (err: any) {
-      setError(err.message || 'Failed to load data');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCreate = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      await createUser(formData);
-      await fetchData();
-      setShowCreateModal(false);
-      resetForm();
-    } catch (err: any) {
-      alert(err.message || 'Failed to create user');
-    }
-  };
-
-  const handleUpdate = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!selectedUser) return;
-
-    try {
-      await updateAdminUser(selectedUser.id, {
-        firstName: formData.firstName,
-        lastName: formData.lastName,
-        role: formData.role,
-        isActive: selectedUser.isActive,
-      });
-      await fetchData();
-      setShowEditModal(false);
-      setSelectedUser(null);
-      resetForm();
-    } catch (err: any) {
-      alert(err.message || 'Failed to update user');
-    }
-  };
-
-  const handleDelete = async () => {
-    if (!selectedUser) return;
-
-    try {
-      await deleteAdminUser(selectedUser.id);
-      await fetchData();
-      setShowDeleteConfirm(false);
-      setSelectedUser(null);
-    } catch (err: any) {
-      alert(err.message || 'Failed to delete user');
-    }
-  };
-
-  const resetForm = () => {
-    setFormData({
-      email: '',
-      firstName: '',
-      lastName: '',
-      role: 'USER',
-      organizationId: '',
-      password: '',
-    });
-  };
-
-  const openEditModal = (user: User) => {
-    setSelectedUser(user);
-    setFormData({
-      email: user.email,
-      firstName: user.firstName,
-      lastName: user.lastName,
-      role: user.role,
-      organizationId: user.organizationId,
-      password: '',
-    });
-    setShowEditModal(true);
-  };
-
-  const openDeleteConfirm = (user: User) => {
-    setSelectedUser(user);
-    setShowDeleteConfirm(true);
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-96">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
-          <p className="mt-4 text-gray-600">Loading users...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <PageHeader
-        title="User Management"
-        description="Manage all users in the system"
-        actions={
-          <button
-            onClick={() => setShowCreateModal(true)}
-            className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
-          >
-            + Create User
-          </button>
-        }
-      />
-
-      {/* Error Message */}
-      {error && (
-        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
-          {error}
-        </div>
-      )}
-
-      {/* Users Table */}
-      <div className="bg-white rounded-lg shadow overflow-hidden">
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
-            <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                User
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Email
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Role
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Organization
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Status
-              </th>
-              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
-            {users.map(user => (
-              <tr key={user.id} className="hover:bg-gray-50">
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="text-sm font-medium text-gray-900">
-                    {user.firstName} {user.lastName}
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="text-sm text-gray-500">{user.email}</div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
-                    user.role === 'ADMIN' ? 'bg-purple-100 text-purple-800' :
-                    user.role === 'MANAGER' ? 'bg-blue-100 text-blue-800' :
-                    'bg-gray-100 text-gray-800'
-                  }`}>
-                    {user.role}
-                  </span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  {user.organizationName || user.organizationId}
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
-                    user.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
-                  }`}>
-                    {user.isActive ? 'Active' : 'Inactive'}
-                  </span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
-                  <button
-                    onClick={() => openEditModal(user)}
-                    className="text-blue-600 hover:text-blue-900"
-                  >
-                    Edit
-                  </button>
-                  <button
-                    onClick={() => openDeleteConfirm(user)}
-                    className="text-red-600 hover:text-red-900"
-                  >
-                    Delete
-                  </button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-
-      {/* Create Modal */}
-      {showCreateModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="bg-white rounded-lg p-6 max-w-md w-full">
-            <h2 className="text-xl font-bold mb-4">Create New User</h2>
-            <form onSubmit={handleCreate} className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Email</label>
-                <input
-                  type="email"
-                  required
-                  value={formData.email}
-                  onChange={e => setFormData({ ...formData, email: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700">First Name</label>
-                <input
-                  type="text"
-                  required
-                  value={formData.firstName}
-                  onChange={e => setFormData({ ...formData, firstName: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Last Name</label>
-                <input
-                  type="text"
-                  required
-                  value={formData.lastName}
-                  onChange={e => setFormData({ ...formData, lastName: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Role</label>
-                <select
-                  value={formData.role}
-                  onChange={e => setFormData({ ...formData, role: e.target.value as UserRole })}
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                >
-                  <option value="USER">User</option>
-                  <option value="MANAGER">Manager</option>
-                  <option value="ADMIN">Admin</option>
-                  <option value="VIEWER">Viewer</option>
-                </select>
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Organization</label>
-                <select
-                  required
-                  value={formData.organizationId}
-                  onChange={e => setFormData({ ...formData, organizationId: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                >
-                  <option value="">Select Organization</option>
-                  {organizations.map(org => (
-                    <option key={org.id} value={org.id}>
-                      {org.name}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700">
-                  Password (leave empty for auto-generated)
-                </label>
-                <input
-                  type="password"
-                  value={formData.password}
-                  onChange={e => setFormData({ ...formData, password: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-              <div className="flex justify-end space-x-2 pt-4">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowCreateModal(false);
-                    resetForm();
-                  }}
-                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-                >
-                  Create
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-
-      {/* Edit Modal */}
-      {showEditModal && selectedUser && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="bg-white rounded-lg p-6 max-w-md w-full">
-            <h2 className="text-xl font-bold mb-4">Edit User</h2>
-            <form onSubmit={handleUpdate} className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Email (read-only)</label>
-                <input
-                  type="email"
-                  disabled
-                  value={formData.email}
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700">First Name</label>
-                <input
-                  type="text"
-                  required
-                  value={formData.firstName}
-                  onChange={e => setFormData({ ...formData, firstName: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Last Name</label>
-                <input
-                  type="text"
-                  required
-                  value={formData.lastName}
-                  onChange={e => setFormData({ ...formData, lastName: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Role</label>
-                <select
-                  value={formData.role}
-                  onChange={e => setFormData({ ...formData, role: e.target.value as UserRole })}
-                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
-                >
-                  <option value="USER">User</option>
-                  <option value="MANAGER">Manager</option>
-                  <option value="ADMIN">Admin</option>
-                  <option value="VIEWER">Viewer</option>
-                </select>
-              </div>
-              <div className="flex justify-end space-x-2 pt-4">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowEditModal(false);
-                    setSelectedUser(null);
-                    resetForm();
-                  }}
-                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-                >
-                  Update
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-
-      {/* Delete Confirmation */}
-      {showDeleteConfirm && selectedUser && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div className="bg-white rounded-lg p-6 max-w-md w-full">
-            <h2 className="text-xl font-bold mb-4 text-red-600">Confirm Delete</h2>
-            <p className="text-gray-700 mb-6">
-              Are you sure you want to delete user <strong>{selectedUser.firstName} {selectedUser.lastName}</strong>?
-              This action cannot be undone.
-            </p>
-            <div className="flex justify-end space-x-2">
-              <button
-                onClick={() => {
-                  setShowDeleteConfirm(false);
-                  setSelectedUser(null);
-                }}
-                className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleDelete}
-                className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { getAllUsers, updateAdminUser, deleteAdminUser } from '@/lib/api/admin';
+import { createUser } from '@/lib/api/users';
+import { getAllOrganizations } from '@/lib/api/admin';
+import type { UserRole } from '@/types/api';
+import { PageHeader } from '@/components/ui/PageHeader';
+
+interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: UserRole;
+  organizationId: string;
+  organizationName?: string;
+  isActive: boolean;
+  createdAt: string;
+}
+
+interface Organization {
+  id: string;
+  name: string;
+}
+
+export default function AdminUsersPage() {
+  const t = useTranslations('dashboard.admin.users');
+
+  const [users, setUsers] = useState<User[]>([]);
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  // Form state
+  const [formData, setFormData] = useState<{
+    email: string;
+    firstName: string;
+    lastName: string;
+    role: UserRole;
+    organizationId: string;
+    password: string;
+  }>({
+    email: '',
+    firstName: '',
+    lastName: '',
+    role: 'USER',
+    organizationId: '',
+    password: '',
+  });
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const [usersResponse, orgsResponse] = await Promise.all([
+        getAllUsers(),
+        getAllOrganizations(),
+      ]);
+
+      setUsers(usersResponse.users || []);
+      setOrganizations(orgsResponse.organizations || []);
+      setError(null);
+    } catch (err: any) {
+      setError(err.message || t('loadError'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await createUser(formData);
+      await fetchData();
+      setShowCreateModal(false);
+      resetForm();
+    } catch (err: any) {
+      alert(err.message || t('createError'));
+    }
+  };
+
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedUser) return;
+
+    try {
+      await updateAdminUser(selectedUser.id, {
+        firstName: formData.firstName,
+        lastName: formData.lastName,
+        role: formData.role,
+        isActive: selectedUser.isActive,
+      });
+      await fetchData();
+      setShowEditModal(false);
+      setSelectedUser(null);
+      resetForm();
+    } catch (err: any) {
+      alert(err.message || t('updateError'));
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!selectedUser) return;
+
+    try {
+      await deleteAdminUser(selectedUser.id);
+      await fetchData();
+      setShowDeleteConfirm(false);
+      setSelectedUser(null);
+    } catch (err: any) {
+      alert(err.message || t('deleteError'));
+    }
+  };
+
+  const resetForm = () => {
+    setFormData({
+      email: '',
+      firstName: '',
+      lastName: '',
+      role: 'USER',
+      organizationId: '',
+      password: '',
+    });
+  };
+
+  const openEditModal = (user: User) => {
+    setSelectedUser(user);
+    setFormData({
+      email: user.email,
+      firstName: user.firstName,
+      lastName: user.lastName,
+      role: user.role,
+      organizationId: user.organizationId,
+      password: '',
+    });
+    setShowEditModal(true);
+  };
+
+  const openDeleteConfirm = (user: User) => {
+    setSelectedUser(user);
+    setShowDeleteConfirm(true);
+  };
+
+  const getRoleLabel = (role: string) => {
+    const allowed = ['USER', 'MANAGER', 'ADMIN', 'VIEWER'];
+    if (allowed.includes(role)) {
+      return t(`roles.${role}` as any);
+    }
+    return role;
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">{t('loading')}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={t('title')}
+        description={t('subtitle')}
+        actions={
+          <button
+            onClick={() => setShowCreateModal(true)}
+            className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            {t('create')}
+          </button>
+        }
+      />
+
+      {/* Error Message */}
+      {error && (
+        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
+          {error}
+        </div>
+      )}
+
+      {/* Users Table */}
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <table className="min-w-full divide-y divide-gray-200">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.user')}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.email')}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.role')}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.organization')}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.status')}
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                {t('table.actions')}
+              </th>
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200">
+            {users.map(user => (
+              <tr key={user.id} className="hover:bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm font-medium text-gray-900">
+                    {user.firstName} {user.lastName}
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="text-sm text-gray-500">{user.email}</div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                    user.role === 'ADMIN' ? 'bg-purple-100 text-purple-800' :
+                    user.role === 'MANAGER' ? 'bg-blue-100 text-blue-800' :
+                    'bg-gray-100 text-gray-800'
+                  }`}>
+                    {getRoleLabel(user.role)}
+                  </span>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  {user.organizationName || user.organizationId}
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                    user.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                  }`}>
+                    {user.isActive ? t('active') : t('inactive')}
+                  </span>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
+                  <button
+                    onClick={() => openEditModal(user)}
+                    className="text-blue-600 hover:text-blue-900"
+                  >
+                    {t('edit')}
+                  </button>
+                  <button
+                    onClick={() => openDeleteConfirm(user)}
+                    className="text-red-600 hover:text-red-900"
+                  >
+                    {t('delete')}
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Create Modal */}
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full">
+            <h2 className="text-xl font-bold mb-4">{t('modal.createTitle')}</h2>
+            <form onSubmit={handleCreate} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700">{t('modal.email')}</label>
+                <input
+                  type="email"
+                  required
+                  value={formData.email}
+                  onChange={e => setFormData({ ...formData, email: e.target.value })}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">{t('modal.firstName')}</label>
+                <input
+                  type="text"
+                  required
+                  value={formData.firstName}
+                  onChange={e => setFormData({ ...formData, firstName: e.target.value })}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">{t('modal.lastName')}</label>
+                <input
+                  type="text"
+                  required
+                  value={formData.lastName}
+                  onChange={e => setFormData({ ...formData, lastName: e.target.value })}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">{t('modal.role')}</label>
+                <select
+                  value={formData.role}
+                  onChange={e => setFormData({ ...formData, role: e.target.value as UserRole })}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                >
+                  <option value="USER">{t('roles.USER')}</option>
+                  <option value="MANAGER">{t('roles.MANAGER')}</option>
+                  <option value="ADMIN">{t('roles.ADMIN')}</option>
+                  <option value="VIEWER">{t('roles.VIEWER')}</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">{t('modal.organization')}</label>
+                <select
+                  required
+                  value={formData.organizationId}
+                  onChange={e => setFormData({ ...formData, organizationId: e.target.value })}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                >
+                  <option value="">{t('modal.selectOrganization')}</option>
+                  {organizations.map(org => (
+                    <option key={org.id} value={org.id}>
+                      {org.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">
+                  {t('modal.password')}
+                </label>
+                <input
+                  type="password"
+                  value={formData.password}
+                  onChange={e => setFormData({ ...formData, password: e.target.value })}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                />
+              </div>
+              <div className="flex justify-end space-x-2 pt-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowCreateModal(false);
+                    resetForm();
+                  }}
+                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
+                >
+                  {t('modal.cancel')}
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+                >
+                  {t('modal.create')}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Edit Modal */}
+      {showEditModal && selectedUser && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full">
+            <h2 className="text-xl font-bold mb-4">{t('modal.editTitle')}</h2>
+            <form onSubmit={handleUpdate} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700">{t('modal.emailReadOnly')}</label>
+                <input
+                  type="email"
+                  disabled
+                  value={formData.email}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 bg-gray-100 rounded-md shadow-sm"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">{t('modal.firstName')}</label>
+                <input
+                  type="text"
+                  required
+                  value={formData.firstName}
+                  onChange={e => setFormData({ ...formData, firstName: e.target.value })}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">{t('modal.lastName')}</label>
+                <input
+                  type="text"
+                  required
+                  value={formData.lastName}
+                  onChange={e => setFormData({ ...formData, lastName: e.target.value })}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700">{t('modal.role')}</label>
+                <select
+                  value={formData.role}
+                  onChange={e => setFormData({ ...formData, role: e.target.value as UserRole })}
+                  className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+                >
+                  <option value="USER">{t('roles.USER')}</option>
+                  <option value="MANAGER">{t('roles.MANAGER')}</option>
+                  <option value="ADMIN">{t('roles.ADMIN')}</option>
+                  <option value="VIEWER">{t('roles.VIEWER')}</option>
+                </select>
+              </div>
+              <div className="flex justify-end space-x-2 pt-4">
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowEditModal(false);
+                    setSelectedUser(null);
+                    resetForm();
+                  }}
+                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
+                >
+                  {t('modal.cancel')}
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+                >
+                  {t('modal.update')}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Confirmation */}
+      {showDeleteConfirm && selectedUser && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full">
+            <h2 className="text-xl font-bold mb-4 text-red-600">{t('deleteConfirm.title')}</h2>
+            <p className="text-gray-700 mb-6">
+              {t('deleteConfirm.message', { firstName: selectedUser.firstName, lastName: selectedUser.lastName })}
+            </p>
+            <div className="flex justify-end space-x-2">
+              <button
+                onClick={() => {
+                  setShowDeleteConfirm(false);
+                  setSelectedUser(null);
+                }}
+                className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
+              >
+                {t('deleteConfirm.cancel')}
+              </button>
+              <button
+                onClick={handleDelete}
+                className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
+              >
+                {t('deleteConfirm.confirm')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/frontend/app/dashboard/booking/[id]/pay/page.tsx b/apps/frontend/app/[locale]/dashboard/booking/[id]/pay/page.tsx
similarity index 100%
rename from apps/frontend/app/dashboard/booking/[id]/pay/page.tsx
rename to apps/frontend/app/[locale]/dashboard/booking/[id]/pay/page.tsx
diff --git a/apps/frontend/app/dashboard/booking/[id]/payment-success/page.tsx b/apps/frontend/app/[locale]/dashboard/booking/[id]/payment-success/page.tsx
similarity index 100%
rename from apps/frontend/app/dashboard/booking/[id]/payment-success/page.tsx
rename to apps/frontend/app/[locale]/dashboard/booking/[id]/payment-success/page.tsx
diff --git a/apps/frontend/app/dashboard/booking/new/page.tsx b/apps/frontend/app/[locale]/dashboard/booking/new/page.tsx
similarity index 100%
rename from apps/frontend/app/dashboard/booking/new/page.tsx
rename to apps/frontend/app/[locale]/dashboard/booking/new/page.tsx
diff --git a/apps/frontend/app/dashboard/bookings/[id]/page.tsx b/apps/frontend/app/[locale]/dashboard/bookings/[id]/page.tsx
similarity index 85%
rename from apps/frontend/app/dashboard/bookings/[id]/page.tsx
rename to apps/frontend/app/[locale]/dashboard/bookings/[id]/page.tsx
index 0ca0a91..bfdc696 100644
--- a/apps/frontend/app/dashboard/bookings/[id]/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/bookings/[id]/page.tsx
@@ -1,17 +1,15 @@
-/**
- * Booking Detail Page
- *
- * Display full booking information
- */
-
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
 import { getBooking } from '@/lib/api';
-import Link from 'next/link';
+import { Link } from '@/i18n/navigation';
 import { useParams } from 'next/navigation';
+import { useTranslations, useLocale } from 'next-intl';
 
 export default function BookingDetailPage() {
+  const t = useTranslations('dashboard.bookingDetail');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
   const params = useParams();
   const bookingId = params.id as string;
 
@@ -33,10 +31,18 @@ export default function BookingDetailPage() {
     return colors[status] || 'bg-gray-100 text-gray-800';
   };
 
+  const getStatusLabel = (status: string) => {
+    const key = `status.${status}`;
+    try {
+      return t(key as any);
+    } catch {
+      return status;
+    }
+  };
+
   const downloadPDF = async () => {
     try {
-      // TODO: Implement PDF download functionality
-      alert('PDF download functionality is not yet implemented');
+      alert(t('pdfNotImplemented'));
       console.log('Download PDF for booking:', bookingId);
     } catch (error) {
       console.error('Failed to download PDF:', error);
@@ -54,12 +60,12 @@ export default function BookingDetailPage() {
   if (!booking) {
     return (
       <div className="text-center py-12">
-        <h2 className="text-2xl font-semibold text-gray-900">Booking not found</h2>
+        <h2 className="text-2xl font-semibold text-gray-900">{t('notFound')}</h2>
         <Link
           href="/dashboard/bookings"
           className="mt-4 inline-block text-blue-600 hover:text-blue-700"
         >
-          ← Back to bookings
+          {t('back')}
         </Link>
       </div>
     );
@@ -67,14 +73,13 @@ export default function BookingDetailPage() {
 
   return (
     <div className="space-y-6">
-      {/* Header */}
       <div className="flex items-center justify-between">
         <div>
           <Link
             href="/dashboard/bookings"
             className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-block"
           >
-            ← Back to bookings
+            {t('back')}
           </Link>
           <div className="flex items-center space-x-4">
             <h1 className="text-2xl font-bold text-gray-900">{booking.bookingNumber}</h1>
@@ -83,11 +88,11 @@ export default function BookingDetailPage() {
                 booking.status
               )}`}
             >
-              {booking.status}
+              {getStatusLabel(booking.status)}
             </span>
           </div>
           <p className="text-sm text-gray-500 mt-1">
-            Created on {new Date(booking.createdAt).toLocaleDateString()}
+            {t('createdOn', { date: new Date(booking.createdAt).toLocaleDateString(dateLocale) })}
           </p>
         </div>
         <div className="flex space-x-3">
@@ -103,59 +108,56 @@ export default function BookingDetailPage() {
                 d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
               />
             </svg>
-            Download PDF
+            {t('downloadPdf')}
           </button>
         </div>
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Main Content */}
         <div className="lg:col-span-2 space-y-6">
-          {/* Cargo Details */}
           <div className="bg-white rounded-lg shadow p-6">
-            <h2 className="text-lg font-semibold text-gray-900 mb-4">Cargo Details</h2>
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('cargo.title')}</h2>
             <dl className="grid grid-cols-1 gap-4">
               <div>
-                <dt className="text-sm font-medium text-gray-500">Description</dt>
+                <dt className="text-sm font-medium text-gray-500">{t('cargo.description')}</dt>
                 <dd className="mt-1 text-sm text-gray-900">{booking.cargoDescription}</dd>
               </div>
               {booking.specialInstructions && (
                 <div>
-                  <dt className="text-sm font-medium text-gray-500">Special Instructions</dt>
+                  <dt className="text-sm font-medium text-gray-500">{t('cargo.specialInstructions')}</dt>
                   <dd className="mt-1 text-sm text-gray-900">{booking.specialInstructions}</dd>
                 </div>
               )}
             </dl>
           </div>
 
-          {/* Containers */}
           <div className="bg-white rounded-lg shadow p-6">
             <h2 className="text-lg font-semibold text-gray-900 mb-4">
-              Containers ({booking.containers?.length || 0})
+              {t('containers.title', { count: booking.containers?.length || 0 })}
             </h2>
             <div className="space-y-3">
               {booking.containers?.map((container, index) => (
                 <div key={container.id || index} className="border rounded-lg p-4">
                   <div className="grid grid-cols-2 gap-4">
                     <div>
-                      <p className="text-sm font-medium text-gray-500">Type</p>
+                      <p className="text-sm font-medium text-gray-500">{t('containers.type')}</p>
                       <p className="text-sm text-gray-900">{container.type}</p>
                     </div>
                     {container.containerNumber && (
                       <div>
-                        <p className="text-sm font-medium text-gray-500">Container Number</p>
+                        <p className="text-sm font-medium text-gray-500">{t('containers.number')}</p>
                         <p className="text-sm text-gray-900">{container.containerNumber}</p>
                       </div>
                     )}
                     {container.sealNumber && (
                       <div>
-                        <p className="text-sm font-medium text-gray-500">Seal Number</p>
+                        <p className="text-sm font-medium text-gray-500">{t('containers.seal')}</p>
                         <p className="text-sm text-gray-900">{container.sealNumber}</p>
                       </div>
                     )}
                     {container.vgm && (
                       <div>
-                        <p className="text-sm font-medium text-gray-500">VGM (kg)</p>
+                        <p className="text-sm font-medium text-gray-500">{t('containers.vgm')}</p>
                         <p className="text-sm text-gray-900">{container.vgm}</p>
                       </div>
                     )}
@@ -165,47 +167,46 @@ export default function BookingDetailPage() {
             </div>
           </div>
 
-          {/* Shipper & Consignee */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="bg-white rounded-lg shadow p-6">
-              <h2 className="text-lg font-semibold text-gray-900 mb-4">Shipper</h2>
+              <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('shipper.title')}</h2>
               <dl className="space-y-2">
                 <div>
-                  <dt className="text-sm font-medium text-gray-500">Name</dt>
+                  <dt className="text-sm font-medium text-gray-500">{t('shipper.name')}</dt>
                   <dd className="text-sm text-gray-900">{booking.shipper.name}</dd>
                 </div>
                 <div>
-                  <dt className="text-sm font-medium text-gray-500">Contact</dt>
+                  <dt className="text-sm font-medium text-gray-500">{t('shipper.contact')}</dt>
                   <dd className="text-sm text-gray-900">{booking.shipper.contactName}</dd>
                 </div>
                 <div>
-                  <dt className="text-sm font-medium text-gray-500">Email</dt>
+                  <dt className="text-sm font-medium text-gray-500">{t('shipper.email')}</dt>
                   <dd className="text-sm text-gray-900">{booking.shipper.contactEmail}</dd>
                 </div>
                 <div>
-                  <dt className="text-sm font-medium text-gray-500">Phone</dt>
+                  <dt className="text-sm font-medium text-gray-500">{t('shipper.phone')}</dt>
                   <dd className="text-sm text-gray-900">{booking.shipper.contactPhone}</dd>
                 </div>
               </dl>
             </div>
 
             <div className="bg-white rounded-lg shadow p-6">
-              <h2 className="text-lg font-semibold text-gray-900 mb-4">Consignee</h2>
+              <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('consignee.title')}</h2>
               <dl className="space-y-2">
                 <div>
-                  <dt className="text-sm font-medium text-gray-500">Name</dt>
+                  <dt className="text-sm font-medium text-gray-500">{t('consignee.name')}</dt>
                   <dd className="text-sm text-gray-900">{booking.consignee.name}</dd>
                 </div>
                 <div>
-                  <dt className="text-sm font-medium text-gray-500">Contact</dt>
+                  <dt className="text-sm font-medium text-gray-500">{t('consignee.contact')}</dt>
                   <dd className="text-sm text-gray-900">{booking.consignee.contactName}</dd>
                 </div>
                 <div>
-                  <dt className="text-sm font-medium text-gray-500">Email</dt>
+                  <dt className="text-sm font-medium text-gray-500">{t('consignee.email')}</dt>
                   <dd className="text-sm text-gray-900">{booking.consignee.contactEmail}</dd>
                 </div>
                 <div>
-                  <dt className="text-sm font-medium text-gray-500">Phone</dt>
+                  <dt className="text-sm font-medium text-gray-500">{t('consignee.phone')}</dt>
                   <dd className="text-sm text-gray-900">{booking.consignee.contactPhone}</dd>
                 </div>
               </dl>
@@ -213,11 +214,9 @@ export default function BookingDetailPage() {
           </div>
         </div>
 
-        {/* Sidebar */}
         <div className="space-y-6">
-          {/* Timeline */}
           <div className="bg-white rounded-lg shadow p-6">
-            <h2 className="text-lg font-semibold text-gray-900 mb-4">Timeline</h2>
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('timeline.title')}</h2>
             <div className="flow-root">
               <ul className="-mb-8">
                 <li>
@@ -244,9 +243,9 @@ export default function BookingDetailPage() {
                       </div>
                       <div className="min-w-0 flex-1 pt-1.5">
                         <div>
-                          <p className="text-sm text-gray-900 font-medium">Booking Created</p>
+                          <p className="text-sm text-gray-900 font-medium">{t('timeline.created')}</p>
                           <p className="text-sm text-gray-500">
-                            {new Date(booking.createdAt).toLocaleString()}
+                            {new Date(booking.createdAt).toLocaleString(dateLocale)}
                           </p>
                         </div>
                       </div>
@@ -257,18 +256,17 @@ export default function BookingDetailPage() {
             </div>
           </div>
 
-          {/* Quick Info */}
           <div className="bg-white rounded-lg shadow p-6">
-            <h2 className="text-lg font-semibold text-gray-900 mb-4">Information</h2>
+            <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('info.title')}</h2>
             <dl className="space-y-3">
               <div>
-                <dt className="text-sm font-medium text-gray-500">Booking ID</dt>
+                <dt className="text-sm font-medium text-gray-500">{t('info.bookingId')}</dt>
                 <dd className="mt-1 text-sm text-gray-900">{booking.id}</dd>
               </div>
               <div>
-                <dt className="text-sm font-medium text-gray-500">Last Updated</dt>
+                <dt className="text-sm font-medium text-gray-500">{t('info.lastUpdated')}</dt>
                 <dd className="mt-1 text-sm text-gray-900">
-                  {new Date(booking.updatedAt).toLocaleString()}
+                  {new Date(booking.updatedAt).toLocaleString(dateLocale)}
                 </dd>
               </div>
             </dl>
diff --git a/apps/frontend/app/dashboard/bookings/new/page.tsx b/apps/frontend/app/[locale]/dashboard/bookings/new/page.tsx
similarity index 100%
rename from apps/frontend/app/dashboard/bookings/new/page.tsx
rename to apps/frontend/app/[locale]/dashboard/bookings/new/page.tsx
diff --git a/apps/frontend/app/dashboard/bookings/page.tsx b/apps/frontend/app/[locale]/dashboard/bookings/page.tsx
similarity index 78%
rename from apps/frontend/app/dashboard/bookings/page.tsx
rename to apps/frontend/app/[locale]/dashboard/bookings/page.tsx
index ee5a801..8696cd8 100644
--- a/apps/frontend/app/dashboard/bookings/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/bookings/page.tsx
@@ -1,23 +1,21 @@
-/**
- * Bookings List Page
- *
- * Display all bookings (standard + CSV) with filters and search
- */
-
 'use client';
 
 import { useState, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { listBookings, listCsvBookings } from '@/lib/api';
-import Link from 'next/link';
+import { listCsvBookings } from '@/lib/api';
+import { Link } from '@/i18n/navigation';
 import { Plus, Clock } from 'lucide-react';
 import ExportButton from '@/components/ExportButton';
 import { useSearchParams } from 'next/navigation';
 import { PageHeader } from '@/components/ui/PageHeader';
+import { useTranslations, useLocale } from 'next-intl';
 
 type SearchType = 'pallets' | 'weight' | 'route' | 'status' | 'date' | 'quote';
 
 export default function BookingsListPage() {
+  const t = useTranslations('dashboard.bookingsList');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
   const searchParams = useSearchParams();
   const [searchTerm, setSearchTerm] = useState('');
   const [searchType, setSearchType] = useState<SearchType>('route');
@@ -32,29 +30,24 @@ export default function BookingsListPage() {
     }
   }, [searchParams]);
 
-  // Fetch CSV bookings (fetch all for client-side filtering and pagination)
   const { data: csvData, isLoading, error: csvError } = useQuery({
     queryKey: ['csv-bookings'],
     queryFn: () =>
       listCsvBookings({
         page: 1,
-        limit: 1000, // Fetch all bookings for client-side filtering
+        limit: 1000,
       }),
   });
 
-  // Log errors for debugging
   if (csvError) console.error('CSV bookings error:', csvError);
 
-  // Filter bookings based on search term, search type, and status
   const filterBookings = (bookings: any[]) => {
     let filtered = bookings;
 
-    // Filter by status first (if status filter is active)
     if (statusFilter) {
       filtered = filtered.filter((booking: any) => booking.status === statusFilter);
     }
 
-    // Then filter by search term if provided
     if (searchTerm.trim()) {
       const term = searchTerm.toLowerCase();
 
@@ -71,7 +64,7 @@ export default function BookingsListPage() {
           case 'status':
             return booking.status?.toLowerCase().includes(term);
           case 'date':
-            const date = new Date(booking.requestedPickupDate || booking.requestedAt).toLocaleDateString('fr-FR');
+            const date = new Date(booking.requestedPickupDate || booking.requestedAt).toLocaleDateString(dateLocale);
             return date.includes(term);
           case 'quote':
             return booking.id?.toLowerCase().includes(term) || booking.quoteNumber?.toLowerCase().includes(term);
@@ -84,52 +77,42 @@ export default function BookingsListPage() {
     return filtered;
   };
 
-  // Get all filtered bookings
   const filteredBookings = filterBookings((csvData?.bookings || []).map(b => ({ ...b, type: 'csv' as const })));
 
-  // Calculate pagination
   const totalBookings = filteredBookings.length;
   const totalPages = Math.ceil(totalBookings / ITEMS_PER_PAGE);
   const startIndex = (page - 1) * ITEMS_PER_PAGE;
   const endIndex = startIndex + ITEMS_PER_PAGE;
   const paginatedBookings = filteredBookings.slice(startIndex, endIndex);
 
-  // Reset page to 1 when filters change
   const resetPage = () => setPage(1);
 
   const statusOptions = [
-    { value: '', label: 'Tous les statuts' },
-    { value: 'PENDING', label: 'En attente' },
-    { value: 'ACCEPTED', label: 'Accepté' },
-    { value: 'REJECTED', label: 'Refusé' },
+    { value: '', label: t('statusFilter.all') },
+    { value: 'PENDING', label: t('status.pending') },
+    { value: 'ACCEPTED', label: t('status.accepted') },
+    { value: 'REJECTED', label: t('status.rejected') },
   ];
 
-  const searchTypeOptions = [
-    { value: 'route', label: 'Route (Origine/Destination)' },
-    { value: 'pallets', label: 'Palettes/Colis' },
-    { value: 'weight', label: 'Poids (kg)' },
-    { value: 'status', label: 'Statut' },
-    { value: 'date', label: 'Date' },
-    { value: 'quote', label: 'N° Devis' },
+  const searchTypeOptions: { value: SearchType; label: string }[] = [
+    { value: 'route', label: t('searchType.route') },
+    { value: 'pallets', label: t('searchType.pallets') },
+    { value: 'weight', label: t('searchType.weight') },
+    { value: 'status', label: t('searchType.status') },
+    { value: 'date', label: t('searchType.date') },
+    { value: 'quote', label: t('searchType.quote') },
   ];
 
   const getPlaceholder = () => {
-    switch (searchType) {
-      case 'pallets':
-        return 'Rechercher par nombre de palettes...';
-      case 'weight':
-        return 'Rechercher par poids en kg...';
-      case 'route':
-        return 'Rechercher par ville (origine ou destination)...';
-      case 'status':
-        return 'Rechercher par statut...';
-      case 'date':
-        return 'Rechercher par date (JJ/MM/AAAA)...';
-      case 'quote':
-        return 'Rechercher par numéro de devis...';
-      default:
-        return 'Rechercher...';
-    }
+    const keyMap: Record<SearchType, string> = {
+      route: 'searchPlaceholder.route',
+      pallets: 'searchPlaceholder.pallets',
+      weight: 'searchPlaceholder.weight',
+      status: 'searchPlaceholder.status',
+      date: 'searchPlaceholder.date',
+      quote: 'searchPlaceholder.quote',
+    };
+    return t(keyMap[searchType] as any);
   };
 
   const getStatusColor = (status: string) => {
@@ -142,25 +125,24 @@ export default function BookingsListPage() {
   };
 
   const getStatusLabel = (status: string) => {
-    const labels: Record<string, string> = {
-      PENDING: 'En attente',
-      ACCEPTED: 'Accepté',
-      REJECTED: 'Refusé',
+    const map: Record<string, string> = {
+      PENDING: t('status.pending'),
+      ACCEPTED: t('status.accepted'),
+      REJECTED: t('status.rejected'),
     };
-    return labels[status] || status;
+    return map[status] || status;
   };
 
   return (
     <div className="space-y-6">
-      {/* Bank transfer declared banner */}
       {showTransferBanner && (
         <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 flex items-start justify-between">
           <div className="flex items-start space-x-3">
             <Clock className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
             <div>
-              <p className="font-medium text-amber-800">Virement déclaré</p>
+              <p className="font-medium text-amber-800">{t('transferBanner.title')}</p>
               <p className="text-sm text-amber-700 mt-0.5">
-                Votre virement a été enregistré. Un administrateur va vérifier la réception et activer votre booking. Vous serez notifié dès la validation.
+                {t('transferBanner.message')}
               </p>
             </div>
           </div>
@@ -168,30 +150,23 @@ export default function BookingsListPage() {
         </div>
       )}
       <PageHeader
-        title="Réservations"
-        description="Gérez et suivez vos envois"
+        title={t('title')}
+        description={t('description')}
         actions={
           <>
             <ExportButton
               data={filteredBookings}
-              filename="reservations"
+              filename={t('exportFilename')}
               columns={[
-                { key: 'id', label: 'ID' },
-                { key: 'palletCount', label: 'Palettes', format: (v) => `${v || 0}` },
-                { key: 'weightKG', label: 'Poids (kg)', format: (v) => `${v || 0}` },
-                { key: 'volumeCBM', label: 'Volume (CBM)', format: (v) => `${v || 0}` },
-                { key: 'origin', label: 'Origine' },
-                { key: 'destination', label: 'Destination' },
-                { key: 'carrierName', label: 'Transporteur' },
-                { key: 'status', label: 'Statut', format: (v) => {
-                  const labels: Record<string, string> = {
-                    PENDING: 'En attente',
-                    ACCEPTED: 'Accepté',
-                    REJECTED: 'Refusé',
-                  };
-                  return labels[v] || v;
-                }},
-                { key: 'createdAt', label: 'Date de création', format: (v) => v ? new Date(v).toLocaleDateString('fr-FR') : '' },
+                { key: 'id', label: t('export.id') },
+                { key: 'palletCount', label: t('export.pallets'), format: (v) => `${v || 0}` },
+                { key: 'weightKG', label: t('export.weight'), format: (v) => `${v || 0}` },
+                { key: 'volumeCBM', label: t('export.volume'), format: (v) => `${v || 0}` },
+                { key: 'origin', label: t('export.origin') },
+                { key: 'destination', label: t('export.destination') },
+                { key: 'carrierName', label: t('export.carrier') },
+                { key: 'status', label: t('export.status'), format: (v) => getStatusLabel(v) },
+                { key: 'createdAt', label: t('export.createdAt'), format: (v) => v ? new Date(v).toLocaleDateString(dateLocale) : '' },
               ]}
             />
             <Link
@@ -199,18 +174,17 @@ export default function BookingsListPage() {
               className="inline-flex items-center px-3 sm:px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
             >
               <Plus className="h-4 w-4 sm:mr-2" />
-              <span className="hidden sm:inline">Nouvelle Réservation</span>
+              <span className="hidden sm:inline">{t('new')}</span>
             </Link>
           </>
         }
       />
 
-      {/* Filters */}
       <div className="bg-white rounded-lg shadow p-4">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
           <div>
             <label htmlFor="searchType" className="sr-only">
-              Type de recherche
+              {t('searchType.label')}
             </label>
             <select
               id="searchType"
@@ -230,7 +204,7 @@ export default function BookingsListPage() {
           </div>
           <div className="md:col-span-2">
             <label htmlFor="search" className="sr-only">
-              Rechercher
+              {t('search')}
             </label>
             <div className="relative">
               <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -263,7 +237,7 @@ export default function BookingsListPage() {
           </div>
           <div>
             <label htmlFor="status" className="sr-only">
-              Statut
+              {t('statusFilter.label')}
             </label>
             <select
               id="status"
@@ -284,16 +258,14 @@ export default function BookingsListPage() {
         </div>
       </div>
 
-      {/* Bookings List */}
       <div className="bg-white rounded-lg shadow overflow-hidden">
         {isLoading ? (
           <div className="px-6 py-12 text-center text-gray-500">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-            Chargement des réservations...
+            {t('loading')}
           </div>
         ) : paginatedBookings && paginatedBookings.length > 0 ? (
           <>
-            {/* Mobile cards */}
             <div className="md:hidden divide-y divide-gray-200">
               {paginatedBookings.map((booking: any) => (
                 <div key={`${booking.type}-${booking.id}`} className="p-4 space-y-3">
@@ -314,64 +286,63 @@ export default function BookingsListPage() {
                   </div>
                   <div className="grid grid-cols-3 gap-2 text-xs">
                     <div>
-                      <div className="text-gray-400 uppercase tracking-wide">Palettes</div>
+                      <div className="text-gray-400 uppercase tracking-wide">{t('mobile.pallets')}</div>
                       <div className="font-medium text-gray-900 mt-0.5">
                         {booking.type === 'csv'
-                          ? `${booking.palletCount} pal.`
-                          : `${booking.containers?.length || 0} cont.`}
+                          ? t('units.palletsShort', { count: booking.palletCount })
+                          : t('units.containersShort', { count: booking.containers?.length || 0 })}
                       </div>
                     </div>
                     <div>
-                      <div className="text-gray-400 uppercase tracking-wide">Poids</div>
+                      <div className="text-gray-400 uppercase tracking-wide">{t('mobile.weight')}</div>
                       <div className="font-medium text-gray-900 mt-0.5">
                         {booking.type === 'csv'
-                          ? `${booking.weightKG} kg`
-                          : booking.totalWeight ? `${booking.totalWeight} kg` : 'N/A'}
+                          ? t('units.kg', { value: booking.weightKG })
+                          : booking.totalWeight ? t('units.kg', { value: booking.totalWeight }) : 'N/A'}
                       </div>
                     </div>
                     <div>
-                      <div className="text-gray-400 uppercase tracking-wide">Date</div>
+                      <div className="text-gray-400 uppercase tracking-wide">{t('mobile.date')}</div>
                       <div className="font-medium text-gray-900 mt-0.5">
                         {(booking.createdAt || booking.requestedAt)
-                          ? new Date(booking.createdAt || booking.requestedAt).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: '2-digit' })
+                          ? new Date(booking.createdAt || booking.requestedAt).toLocaleDateString(dateLocale, { day: '2-digit', month: '2-digit', year: '2-digit' })
                           : 'N/A'}
                       </div>
                     </div>
                   </div>
                   <div className="text-xs text-gray-400">
                     {booking.type === 'csv'
-                      ? `Réf: #${booking.bookingId || booking.id.slice(0, 8).toUpperCase()}`
-                      : `Booking: ${booking.bookingNumber || '-'}`}
+                      ? t('mobile.ref', { id: booking.bookingId || booking.id.slice(0, 8).toUpperCase() })
+                      : t('mobile.booking', { number: booking.bookingNumber || '-' })}
                   </div>
                 </div>
               ))}
             </div>
 
-            {/* Desktop table */}
             <div className="hidden md:block overflow-x-auto">
               <table className="min-w-full divide-y divide-gray-200">
                 <thead className="bg-gray-50">
                   <tr>
                     <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Palettes/Colis
+                      {t('columns.palletsPackages')}
                     </th>
                     <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Poids
+                      {t('columns.weight')}
                     </th>
                     <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Route
+                      {t('columns.route')}
                     </th>
                     <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Statut
+                      {t('columns.status')}
                     </th>
                     <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Date
+                      {t('columns.date')}
                     </th>
                     <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      N° Devis
+                      {t('columns.quoteNumber')}
                     </th>
                     <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      N° Booking
+                      {t('columns.bookingNumber')}
                     </th>
                   </tr>
                 </thead>
@@ -381,8 +352,8 @@ export default function BookingsListPage() {
                       <td className="px-6 py-4 whitespace-nowrap">
                         <div className="text-sm font-medium text-gray-900">
                           {booking.type === 'csv'
-                            ? `${booking.palletCount} palette${booking.palletCount > 1 ? 's' : ''}`
-                            : `${booking.containers?.length || 0} conteneur${booking.containers?.length > 1 ? 's' : ''}`}
+                            ? t('units.palletsCount', { count: booking.palletCount })
+                            : t('units.containersCount', { count: booking.containers?.length || 0 })}
                         </div>
                         <div className="text-xs text-gray-500">
                           {booking.type === 'csv' ? 'LCL' : booking.containerType || 'FCL'}
@@ -391,16 +362,16 @@ export default function BookingsListPage() {
                       <td className="px-6 py-4 whitespace-nowrap">
                         <div className="text-sm font-medium text-gray-900">
                           {booking.type === 'csv'
-                            ? `${booking.weightKG} kg`
+                            ? t('units.kg', { value: booking.weightKG })
                             : booking.totalWeight
-                            ? `${booking.totalWeight} kg`
+                            ? t('units.kg', { value: booking.totalWeight })
                             : 'N/A'}
                         </div>
                         <div className="text-xs text-gray-500">
                           {booking.type === 'csv'
-                            ? `${booking.volumeCBM} CBM`
+                            ? t('units.cbm', { value: booking.volumeCBM })
                             : booking.totalVolume
-                            ? `${booking.totalVolume} CBM`
+                            ? t('units.cbm', { value: booking.totalVolume })
                             : ''}
                         </div>
                       </td>
@@ -427,7 +398,7 @@ export default function BookingsListPage() {
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                         {(booking.createdAt || booking.requestedAt)
-                          ? new Date(booking.createdAt || booking.requestedAt).toLocaleDateString('fr-FR', {
+                          ? new Date(booking.createdAt || booking.requestedAt).toLocaleDateString(dateLocale, {
                               day: '2-digit',
                               month: '2-digit',
                               year: 'numeric',
@@ -448,7 +419,6 @@ export default function BookingsListPage() {
               </table>
             </div>
 
-            {/* Pagination */}
             {totalPages > 1 && (
               <div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                 <div className="flex-1 flex justify-between sm:hidden">
@@ -457,22 +427,25 @@ export default function BookingsListPage() {
                     disabled={page === 1}
                     className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
                   >
-                    Précédent
+                    {t('pagination.previous')}
                   </button>
                   <button
                     onClick={() => setPage(page + 1)}
                     disabled={page >= totalPages}
                     className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
                   >
-                    Suivant
+                    {t('pagination.next')}
                   </button>
                 </div>
                 <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                   <div>
                     <p className="text-sm text-gray-700">
-                      Affichage de <span className="font-medium">{startIndex + 1}</span> à{' '}
-                      <span className="font-medium">{Math.min(endIndex, totalBookings)}</span> sur{' '}
-                      <span className="font-medium">{totalBookings}</span> résultat{totalBookings > 1 ? 's' : ''}
+                      {t.rich('pagination.showing', {
+                        start: startIndex + 1,
+                        end: Math.min(endIndex, totalBookings),
+                        total: totalBookings,
+                        b: (chunks) => <span className="font-medium">{chunks}</span>,
+                      })}
                     </p>
                   </div>
                   <div>
@@ -482,16 +455,14 @@ export default function BookingsListPage() {
                         disabled={page === 1}
                         className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
                       >
-                        <span className="sr-only">Précédent</span>
+                        <span className="sr-only">{t('pagination.previous')}</span>
                         <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                           <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
                         </svg>
                       </button>
 
-                      {/* Page numbers */}
                       {[...Array(totalPages)].map((_, idx) => {
                         const pageNum = idx + 1;
-                        // Show first page, last page, current page, and pages around current
                         const showPage = pageNum === 1 ||
                                         pageNum === totalPages ||
                                         (pageNum >= page - 1 && pageNum <= page + 1);
@@ -524,7 +495,7 @@ export default function BookingsListPage() {
                         disabled={page >= totalPages}
                         className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed"
                       >
-                        <span className="sr-only">Suivant</span>
+                        <span className="sr-only">{t('pagination.next')}</span>
                         <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                           <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
                         </svg>
@@ -550,11 +521,11 @@ export default function BookingsListPage() {
                 d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
               />
             </svg>
-            <h3 className="mt-2 text-sm font-medium text-gray-900">Aucune réservation trouvée</h3>
+            <h3 className="mt-2 text-sm font-medium text-gray-900">{t('empty.title')}</h3>
             <p className="mt-1 text-sm text-gray-500">
               {searchTerm || statusFilter
-                ? 'Essayez d\'ajuster vos filtres'
-                : 'Commencez par créer votre première réservation'}
+                ? t('empty.hasFilters')
+                : t('empty.noBookings')}
             </p>
             <div className="mt-6">
               <Link
@@ -562,7 +533,7 @@ export default function BookingsListPage() {
                 className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
               >
                 <Plus className="mr-2 h-4 w-4" />
-                Nouvelle Réservation
+                {t('new')}
               </Link>
             </div>
           </div>
diff --git a/apps/frontend/app/dashboard/docs/page.tsx b/apps/frontend/app/[locale]/dashboard/docs/page.tsx
similarity index 100%
rename from apps/frontend/app/dashboard/docs/page.tsx
rename to apps/frontend/app/[locale]/dashboard/docs/page.tsx
diff --git a/apps/frontend/app/dashboard/documents/page.tsx b/apps/frontend/app/[locale]/dashboard/documents/page.tsx
similarity index 68%
rename from apps/frontend/app/dashboard/documents/page.tsx
rename to apps/frontend/app/[locale]/dashboard/documents/page.tsx
index e7a5268..eec1fa3 100644
--- a/apps/frontend/app/dashboard/documents/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/documents/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, useRef } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
 import { listCsvBookings, CsvBookingResponse } from '@/lib/api/bookings';
 import { FileText, Image as ImageIcon, FileEdit, FileSpreadsheet, Paperclip } from 'lucide-react';
 import type { ReactNode } from 'react';
@@ -15,7 +16,6 @@ interface Document {
   mimeType: string;
   size: number;
   uploadedAt?: Date;
-  // Legacy fields for compatibility
   name?: string;
   url?: string;
 }
@@ -30,6 +30,8 @@ interface DocumentWithBooking extends Document {
 }
 
 export default function UserDocumentsPage() {
+  const t = useTranslations('dashboard.userDocuments');
+  const locale = useLocale();
   const [bookings, setBookings] = useState<CsvBookingResponse[]>([]);
   const [documents, setDocuments] = useState<DocumentWithBooking[]>([]);
   const [loading, setLoading] = useState(true);
@@ -40,41 +42,27 @@ export default function UserDocumentsPage() {
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(10);
 
-  // Modal state for adding documents
   const [showAddModal, setShowAddModal] = useState(false);
   const [selectedBookingId, setSelectedBookingId] = useState<string | null>(null);
   const [uploadingFiles, setUploadingFiles] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // Modal state for replacing documents
   const [showReplaceModal, setShowReplaceModal] = useState(false);
   const [documentToReplace, setDocumentToReplace] = useState<DocumentWithBooking | null>(null);
   const [replacingFile, setReplacingFile] = useState(false);
   const replaceFileInputRef = useRef<HTMLInputElement>(null);
 
-  // Dropdown menu state
   const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
 
-  // Helper function to get formatted quote number
   const getQuoteNumber = (booking: CsvBookingResponse): string => {
     return `#${booking.bookingId || booking.id.slice(0, 8).toUpperCase()}`;
   };
 
-  // Get file extension and type
   const getFileType = (fileName: string): string => {
     const ext = fileName.split('.').pop()?.toLowerCase() || '';
     const typeMap: Record<string, string> = {
-      pdf: 'PDF',
-      doc: 'Word',
-      docx: 'Word',
-      xls: 'Excel',
-      xlsx: 'Excel',
-      jpg: 'Image',
-      jpeg: 'Image',
-      png: 'Image',
-      gif: 'Image',
-      txt: 'Text',
-      csv: 'CSV',
+      pdf: 'PDF', doc: 'Word', docx: 'Word', xls: 'Excel', xlsx: 'Excel',
+      jpg: 'Image', jpeg: 'Image', png: 'Image', gif: 'Image', txt: 'Text', csv: 'CSV',
     };
     return typeMap[ext] || ext.toUpperCase();
   };
@@ -82,23 +70,19 @@ export default function UserDocumentsPage() {
   const fetchBookingsAndDocuments = useCallback(async () => {
     try {
       setLoading(true);
-      // Fetch all user's bookings (paginated, get all pages)
       const response = await listCsvBookings({ page: 1, limit: 1000 });
       const allBookings = response.bookings || [];
       setBookings(allBookings);
 
-      // Extract all documents from all bookings
       const allDocuments: DocumentWithBooking[] = [];
 
       allBookings.forEach((booking: CsvBookingResponse) => {
         if (booking.documents && booking.documents.length > 0) {
           booking.documents.forEach((doc: any, index: number) => {
-            // Use the correct field names from the backend
             const actualFileName = doc.fileName || doc.name || 'document';
             const actualFilePath = doc.filePath || doc.url || '';
             const actualMimeType = doc.mimeType || doc.type || '';
 
-            // Extract clean file type from mimeType or fileName
             let fileType = '';
             if (actualMimeType.includes('/')) {
               const parts = actualMimeType.split('/');
@@ -129,17 +113,16 @@ export default function UserDocumentsPage() {
       setDocuments(allDocuments);
       setError(null);
     } catch (err: any) {
-      setError(err.message || 'Erreur lors du chargement des documents');
+      setError(err.message || t('error'));
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [t]);
 
   useEffect(() => {
     fetchBookingsAndDocuments();
   }, [fetchBookingsAndDocuments]);
 
-  // Filter documents
   const filteredDocuments = documents.filter(doc => {
     const matchesSearch =
       searchTerm === '' ||
@@ -157,13 +140,11 @@ export default function UserDocumentsPage() {
     return matchesSearch && matchesStatus && matchesQuote;
   });
 
-  // Pagination
   const totalPages = Math.ceil(filteredDocuments.length / itemsPerPage);
   const startIndex = (currentPage - 1) * itemsPerPage;
   const endIndex = startIndex + itemsPerPage;
   const paginatedDocuments = filteredDocuments.slice(startIndex, endIndex);
 
-  // Reset to page 1 when filters change
   useEffect(() => {
     setCurrentPage(1);
   }, [searchTerm, filterStatus, filterQuoteNumber]);
@@ -206,18 +187,12 @@ export default function UserDocumentsPage() {
   };
 
   const getStatusLabel = (status: string) => {
-    const labels: Record<string, string> = {
-      PENDING: 'En attente',
-      ACCEPTED: 'Accepté',
-      REJECTED: 'Refusé',
-      CANCELLED: 'Annulé',
-    };
-    return labels[status] || status;
+    const key = status as 'PENDING' | 'ACCEPTED' | 'REJECTED' | 'CANCELLED';
+    return t(`statuses.${key}` as any) || status;
   };
 
   const handleDownload = async (url: string, fileName: string) => {
     try {
-      // Try direct download first
       const link = document.createElement('a');
       link.href = url;
       link.download = fileName;
@@ -227,18 +202,10 @@ export default function UserDocumentsPage() {
       link.click();
       document.body.removeChild(link);
 
-      // If direct download doesn't work, try fetch with blob
       setTimeout(async () => {
         try {
-          const response = await fetch(url, {
-            mode: 'cors',
-            credentials: 'include',
-          });
-
-          if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-          }
-
+          const response = await fetch(url, { mode: 'cors', credentials: 'include' });
+          if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
           const blob = await response.blob();
           const blobUrl = window.URL.createObjectURL(blob);
           const link2 = document.createElement('a');
@@ -252,15 +219,12 @@ export default function UserDocumentsPage() {
           console.error('Fetch download failed:', fetchError);
         }
       }, 100);
-    } catch (error) {
-      console.error('Error downloading file:', error);
-      alert(
-        `Erreur lors du téléchargement du document: ${error instanceof Error ? error.message : 'Erreur inconnue'}`
-      );
+    } catch (err) {
+      console.error('Error downloading file:', err);
+      alert(`${t('downloadError')}: ${err instanceof Error ? err.message : ''}`);
     }
   };
 
-  // Get bookings available for adding documents (PENDING or ACCEPTED)
   const bookingsAvailableForDocuments = bookings.filter(
     b => b.status === 'PENDING' || b.status === 'ACCEPTED'
   );
@@ -272,14 +236,12 @@ export default function UserDocumentsPage() {
   const handleCloseModal = () => {
     setShowAddModal(false);
     setSelectedBookingId(null);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
+    if (fileInputRef.current) fileInputRef.current.value = '';
   };
 
   const handleFileUpload = async () => {
     if (!selectedBookingId || !fileInputRef.current?.files?.length) {
-      alert('Veuillez sélectionner une réservation et au moins un fichier');
+      alert(t('addDocument.noBookingError'));
       return;
     }
 
@@ -294,50 +256,34 @@ export default function UserDocumentsPage() {
       const token = localStorage.getItem('access_token');
       const response = await fetch(
         `${process.env.NEXT_PUBLIC_API_URL}/api/v1/csv-bookings/${selectedBookingId}/documents`,
-        {
-          method: 'POST',
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-          body: formData,
-        }
+        { method: 'POST', headers: { Authorization: `Bearer ${token}` }, body: formData }
       );
 
-      if (!response.ok) {
-        throw new Error('Erreur lors de l\'ajout des documents');
-      }
+      if (!response.ok) throw new Error(t('addDocument.errorMessage'));
 
-      alert('Documents ajoutés avec succès!');
+      alert(t('addDocument.successMessage'));
       handleCloseModal();
-      fetchBookingsAndDocuments(); // Refresh the list
-    } catch (error) {
-      console.error('Error uploading documents:', error);
-      alert(
-        `Erreur lors de l'ajout des documents: ${error instanceof Error ? error.message : 'Erreur inconnue'}`
-      );
+      fetchBookingsAndDocuments();
+    } catch (err) {
+      console.error('Error uploading documents:', err);
+      alert(`${t('addDocument.errorMessage')}: ${err instanceof Error ? err.message : ''}`);
     } finally {
       setUploadingFiles(false);
     }
   };
 
-  // Toggle dropdown menu
   const toggleDropdown = (docId: string) => {
     setOpenDropdownId(openDropdownId === docId ? null : docId);
   };
 
-  // Close dropdown when clicking outside
   useEffect(() => {
-    const handleClickOutside = () => {
-      setOpenDropdownId(null);
-    };
-
+    const handleClickOutside = () => setOpenDropdownId(null);
     if (openDropdownId) {
       document.addEventListener('click', handleClickOutside);
       return () => document.removeEventListener('click', handleClickOutside);
     }
   }, [openDropdownId]);
 
-  // Replace document handlers
   const handleReplaceClick = (doc: DocumentWithBooking) => {
     setOpenDropdownId(null);
     setDocumentToReplace(doc);
@@ -347,14 +293,12 @@ export default function UserDocumentsPage() {
   const handleCloseReplaceModal = () => {
     setShowReplaceModal(false);
     setDocumentToReplace(null);
-    if (replaceFileInputRef.current) {
-      replaceFileInputRef.current.value = '';
-    }
+    if (replaceFileInputRef.current) replaceFileInputRef.current.value = '';
   };
 
   const handleReplaceDocument = async () => {
     if (!documentToReplace || !replaceFileInputRef.current?.files?.length) {
-      alert('Veuillez sélectionner un fichier de remplacement');
+      alert(t('replaceDocument.noFileError'));
       return;
     }
 
@@ -366,28 +310,20 @@ export default function UserDocumentsPage() {
       const token = localStorage.getItem('access_token');
       const response = await fetch(
         `${process.env.NEXT_PUBLIC_API_URL}/api/v1/csv-bookings/${documentToReplace.bookingId}/documents/${documentToReplace.id}`,
-        {
-          method: 'PATCH',
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-          body: formData,
-        }
+        { method: 'PATCH', headers: { Authorization: `Bearer ${token}` }, body: formData }
       );
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.message || 'Erreur lors du remplacement du document');
+        throw new Error(errorData.message || t('replaceDocument.errorMessage'));
       }
 
-      alert('Document remplacé avec succès!');
+      alert(t('replaceDocument.successMessage'));
       handleCloseReplaceModal();
-      fetchBookingsAndDocuments(); // Refresh the list
-    } catch (error) {
-      console.error('Error replacing document:', error);
-      alert(
-        `Erreur lors du remplacement: ${error instanceof Error ? error.message : 'Erreur inconnue'}`
-      );
+      fetchBookingsAndDocuments();
+    } catch (err) {
+      console.error('Error replacing document:', err);
+      alert(`${t('replaceDocument.errorMessage')}: ${err instanceof Error ? err.message : ''}`);
     } finally {
       setReplacingFile(false);
     }
@@ -398,7 +334,7 @@ export default function UserDocumentsPage() {
       <div className="flex items-center justify-center h-96">
         <div className="text-center">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
-          <p className="mt-4 text-gray-600">Chargement des documents...</p>
+          <p className="mt-4 text-gray-600">{t('loading')}</p>
         </div>
       </div>
     );
@@ -407,29 +343,21 @@ export default function UserDocumentsPage() {
   return (
     <div className="space-y-6">
       <PageHeader
-        title="Mes Documents"
-        description="Gérez tous les documents de vos réservations"
+        title={t('title')}
+        description={t('description')}
         actions={
           <>
             <ExportButton
               data={filteredDocuments}
               filename="documents"
               columns={[
-                { key: 'fileName', label: 'Nom du fichier' },
-                { key: 'fileType', label: 'Type' },
-                { key: 'quoteNumber', label: 'N° de Devis' },
-                { key: 'route', label: 'Route' },
-                { key: 'carrierName', label: 'Transporteur' },
-                { key: 'status', label: 'Statut', format: (v) => {
-                  const labels: Record<string, string> = {
-                    PENDING: 'En attente',
-                    ACCEPTED: 'Accepté',
-                    REJECTED: 'Refusé',
-                    CANCELLED: 'Annulé',
-                  };
-                  return labels[v] || v;
-                }},
-                { key: 'uploadedAt', label: 'Date d\'ajout', format: (v) => v ? new Date(v).toLocaleDateString('fr-FR') : '' },
+                { key: 'fileName', label: t('export.fileName') },
+                { key: 'fileType', label: t('export.type') },
+                { key: 'quoteNumber', label: t('export.quoteNumber') },
+                { key: 'route', label: t('export.route') },
+                { key: 'carrierName', label: t('export.carrier') },
+                { key: 'status', label: t('export.status'), format: (v) => getStatusLabel(v) },
+                { key: 'uploadedAt', label: t('export.uploadedAt'), format: (v) => v ? new Date(v).toLocaleDateString(locale) : '' },
               ]}
             />
             <button
@@ -440,7 +368,7 @@ export default function UserDocumentsPage() {
               <svg className="w-4 h-4 sm:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
               </svg>
-              <span className="hidden sm:inline">Ajouter un document</span>
+              <span className="hidden sm:inline">{t('addDocument.buttonLabel')}</span>
             </button>
           </>
         }
@@ -449,17 +377,17 @@ export default function UserDocumentsPage() {
       {/* Stats */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-          <div className="text-sm text-gray-500">Total Documents</div>
+          <div className="text-sm text-gray-500">{t('stats.total')}</div>
           <div className="text-2xl font-bold text-gray-900">{documents.length}</div>
         </div>
         <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-          <div className="text-sm text-gray-500">Réservations avec Documents</div>
+          <div className="text-sm text-gray-500">{t('stats.withDocuments')}</div>
           <div className="text-2xl font-bold text-blue-600">
             {bookings.filter(b => b.documents && b.documents.length > 0).length}
           </div>
         </div>
         <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-          <div className="text-sm text-gray-500">Documents Filtrés</div>
+          <div className="text-sm text-gray-500">{t('stats.filtered')}</div>
           <div className="text-2xl font-bold text-green-600">{filteredDocuments.length}</div>
         </div>
       </div>
@@ -468,17 +396,17 @@ export default function UserDocumentsPage() {
       <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Recherche</label>
+            <label className="block text-sm font-medium text-gray-700 mb-2">{t('filters.search')}</label>
             <input
               type="text"
-              placeholder="Nom, type, route, transporteur..."
+              placeholder={t('filters.searchPlaceholder')}
               value={searchTerm}
               onChange={e => setSearchTerm(e.target.value)}
               className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Numéro de Devis</label>
+            <label className="block text-sm font-medium text-gray-700 mb-2">{t('filters.quoteNumber')}</label>
             <input
               type="text"
               placeholder="Ex: #F2CAD5E1"
@@ -488,16 +416,16 @@ export default function UserDocumentsPage() {
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Statut</label>
+            <label className="block text-sm font-medium text-gray-700 mb-2">{t('filters.status')}</label>
             <select
               value={filterStatus}
               onChange={e => setFilterStatus(e.target.value)}
               className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
             >
-              <option value="all">Tous les statuts</option>
-              <option value="PENDING">En attente</option>
-              <option value="ACCEPTED">Accepté</option>
-              <option value="REJECTED">Refusé</option>
+              <option value="all">{t('filters.allStatuses')}</option>
+              <option value="PENDING">{t('statuses.PENDING')}</option>
+              <option value="ACCEPTED">{t('statuses.ACCEPTED')}</option>
+              <option value="REJECTED">{t('statuses.REJECTED')}</option>
             </select>
           </div>
         </div>
@@ -515,36 +443,20 @@ export default function UserDocumentsPage() {
         <table className="min-w-full divide-y divide-gray-200">
           <thead className="bg-gray-50">
             <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Nom du Document
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Type
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                N° de Devis
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Route
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Transporteur
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Statut
-              </th>
-              <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Actions
-              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.documentName')}</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.type')}</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.quoteNumber')}</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.route')}</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.carrier')}</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.status')}</th>
+              <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('table.actions')}</th>
             </tr>
           </thead>
           <tbody className="bg-white divide-y divide-gray-200">
             {paginatedDocuments.length === 0 ? (
               <tr>
                 <td colSpan={7} className="px-6 py-12 text-center text-gray-500">
-                  {documents.length === 0
-                    ? 'Aucun document trouvé. Ajoutez des documents à vos réservations.'
-                    : 'Aucun document ne correspond aux filtres sélectionnés.'}
+                  {documents.length === 0 ? t('empty.noDocuments') : t('empty.noMatch')}
                 </td>
               </tr>
             ) : (
@@ -555,9 +467,7 @@ export default function UserDocumentsPage() {
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap">
                     <div className="flex items-center">
-                      <span className="mr-2">
-                        {getDocumentIcon(doc.fileType || doc.type)}
-                      </span>
+                      <span className="mr-2">{getDocumentIcon(doc.fileType || doc.type)}</span>
                       <div className="text-xs text-gray-500">{doc.fileType || doc.type}</div>
                     </div>
                   </td>
@@ -571,9 +481,7 @@ export default function UserDocumentsPage() {
                     <div className="text-sm text-gray-900">{doc.carrierName}</div>
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap">
-                    <span
-                      className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(doc.status)}`}
-                    >
+                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(doc.status)}`}>
                       {getStatusLabel(doc.status)}
                     </span>
                   </td>
@@ -585,20 +493,15 @@ export default function UserDocumentsPage() {
                           toggleDropdown(`${doc.bookingId}-${doc.id}`);
                         }}
                         className="inline-flex items-center justify-center w-8 h-8 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
-                        title="Actions"
+                        title={t('table.actions')}
                       >
-                        <svg
-                          className="w-5 h-5"
-                          fill="currentColor"
-                          viewBox="0 0 24 24"
-                        >
+                        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                           <circle cx="12" cy="5" r="2" />
                           <circle cx="12" cy="12" r="2" />
                           <circle cx="12" cy="19" r="2" />
                         </svg>
                       </button>
 
-                      {/* Dropdown Menu */}
                       {openDropdownId === `${doc.bookingId}-${doc.id}` && (
                         <div
                           className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50"
@@ -612,39 +515,19 @@ export default function UserDocumentsPage() {
                               }}
                               className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                             >
-                              <svg
-                                className="w-4 h-4 mr-3 text-green-600"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                              >
-                                <path
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  strokeWidth={2}
-                                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                                />
+                              <svg className="w-4 h-4 mr-3 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                               </svg>
-                              Télécharger
+                              {t('actions.download')}
                             </button>
                             <button
                               onClick={() => handleReplaceClick(doc)}
                               className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                             >
-                              <svg
-                                className="w-4 h-4 mr-3 text-blue-600"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                              >
-                                <path
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  strokeWidth={2}
-                                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                                />
+                              <svg className="w-4 h-4 mr-3 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                               </svg>
-                              Remplacer
+                              {t('actions.replace')}
                             </button>
                           </div>
                         </div>
@@ -666,29 +549,29 @@ export default function UserDocumentsPage() {
                 disabled={currentPage === 1}
                 className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                Précédent
+                {t('pagination.previous')}
               </button>
               <button
                 onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                 disabled={currentPage === totalPages}
                 className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                Suivant
+                {t('pagination.next')}
               </button>
             </div>
             <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
               <div>
                 <p className="text-sm text-gray-700">
-                  Affichage de <span className="font-medium">{startIndex + 1}</span> à{' '}
-                  <span className="font-medium">
-                    {Math.min(endIndex, filteredDocuments.length)}
-                  </span>{' '}
-                  sur <span className="font-medium">{filteredDocuments.length}</span> résultats
+                  {t('pagination.showing', {
+                    from: startIndex + 1,
+                    to: Math.min(endIndex, filteredDocuments.length),
+                    total: filteredDocuments.length,
+                  })}
                 </p>
               </div>
               <div className="flex items-center gap-4">
                 <div className="flex items-center gap-2">
-                  <label className="text-sm text-gray-700">Par page:</label>
+                  <label className="text-sm text-gray-700">{t('pagination.perPage')}</label>
                   <select
                     value={itemsPerPage}
                     onChange={e => {
@@ -704,26 +587,18 @@ export default function UserDocumentsPage() {
                     <option value={100}>100</option>
                   </select>
                 </div>
-                <nav
-                  className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
-                  aria-label="Pagination"
-                >
+                <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                   <button
                     onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                     disabled={currentPage === 1}
                     className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                   >
-                    <span className="sr-only">Précédent</span>
+                    <span className="sr-only">{t('pagination.previous')}</span>
                     <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-                      <path
-                        fillRule="evenodd"
-                        d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                        clipRule="evenodd"
-                      />
+                      <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
                     </svg>
                   </button>
 
-                  {/* Page numbers */}
                   {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                     let pageNum;
                     if (totalPages <= 5) {
@@ -756,13 +631,9 @@ export default function UserDocumentsPage() {
                     disabled={currentPage === totalPages}
                     className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                   >
-                    <span className="sr-only">Suivant</span>
+                    <span className="sr-only">{t('pagination.next')}</span>
                     <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-                      <path
-                        fillRule="evenodd"
-                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                        clipRule="evenodd"
-                      />
+                      <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
                     </svg>
                   </button>
                 </nav>
@@ -776,57 +647,35 @@ export default function UserDocumentsPage() {
       {showAddModal && (
         <div className="fixed inset-0 z-50 overflow-y-auto">
           <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            {/* Background overlay */}
-            <div
-              className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-              onClick={handleCloseModal}
-            />
-
-            {/* Modal panel */}
+            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={handleCloseModal} />
             <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
               <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div className="sm:flex sm:items-start">
                   <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <svg
-                      className="h-6 w-6 text-blue-600"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M12 4v16m8-8H4"
-                      />
+                    <svg className="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                     </svg>
                   </div>
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
-                    <h3 className="text-lg leading-6 font-medium text-gray-900">
-                      Ajouter un document
-                    </h3>
+                    <h3 className="text-lg leading-6 font-medium text-gray-900">{t('addDocument.modalTitle')}</h3>
                     <div className="mt-4 space-y-4">
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Sélectionner une réservation
-                        </label>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">{t('addDocument.selectBooking')}</label>
                         <select
                           value={selectedBookingId || ''}
                           onChange={e => setSelectedBookingId(e.target.value)}
                           className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
                         >
-                          <option value="">-- Choisir une réservation --</option>
+                          <option value="">{t('addDocument.selectBookingPlaceholder')}</option>
                           {bookingsAvailableForDocuments.map(booking => (
                             <option key={booking.id} value={booking.id}>
-                              {getQuoteNumber(booking)} - {booking.origin} → {booking.destination} ({booking.status === 'PENDING' ? 'En attente' : 'Accepté'})
+                              {getQuoteNumber(booking)} - {booking.origin} → {booking.destination} ({booking.status === 'PENDING' ? t('statuses.PENDING') : t('statuses.ACCEPTED')})
                             </option>
                           ))}
                         </select>
                       </div>
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Fichiers à ajouter
-                        </label>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">{t('addDocument.filesToAdd')}</label>
                         <input
                           ref={fileInputRef}
                           type="file"
@@ -834,9 +683,7 @@ export default function UserDocumentsPage() {
                           accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
                           className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
                         />
-                        <p className="mt-1 text-xs text-gray-500">
-                          Formats acceptés: PDF, Word, Excel, Images (max 10 fichiers)
-                        </p>
+                        <p className="mt-1 text-xs text-gray-500">{t('addDocument.acceptedFormats')}</p>
                       </div>
                     </div>
                   </div>
@@ -851,37 +698,20 @@ export default function UserDocumentsPage() {
                 >
                   {uploadingFiles ? (
                     <>
-                      <svg
-                        className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          className="opacity-25"
-                          cx="12"
-                          cy="12"
-                          r="10"
-                          stroke="currentColor"
-                          strokeWidth="4"
-                        />
-                        <path
-                          className="opacity-75"
-                          fill="currentColor"
-                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                        />
+                      <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                       </svg>
-                      Envoi en cours...
+                      {t('addDocument.uploading')}
                     </>
-                  ) : (
-                    'Ajouter'
-                  )}
+                  ) : t('addDocument.add')}
                 </button>
                 <button
                   type="button"
                   onClick={handleCloseModal}
                   className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                 >
-                  Annuler
+                  {t('addDocument.cancel')}
                 </button>
               </div>
             </div>
@@ -893,60 +723,34 @@ export default function UserDocumentsPage() {
       {showReplaceModal && documentToReplace && (
         <div className="fixed inset-0 z-50 overflow-y-auto">
           <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            {/* Background overlay */}
-            <div
-              className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-              onClick={handleCloseReplaceModal}
-            />
-
-            {/* Modal panel */}
+            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={handleCloseReplaceModal} />
             <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
               <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div className="sm:flex sm:items-start">
                   <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <svg
-                      className="h-6 w-6 text-blue-600"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                      />
+                    <svg className="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                     </svg>
                   </div>
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
-                    <h3 className="text-lg leading-6 font-medium text-gray-900">
-                      Remplacer le document
-                    </h3>
+                    <h3 className="text-lg leading-6 font-medium text-gray-900">{t('replaceDocument.modalTitle')}</h3>
                     <div className="mt-4 space-y-4">
-                      {/* Current document info */}
                       <div className="bg-gray-50 rounded-lg p-3">
-                        <p className="text-sm text-gray-500">Document actuel:</p>
-                        <p className="text-sm font-medium text-gray-900 mt-1">
-                          {documentToReplace.fileName}
-                        </p>
+                        <p className="text-sm text-gray-500">{t('replaceDocument.currentDocument')}</p>
+                        <p className="text-sm font-medium text-gray-900 mt-1">{documentToReplace.fileName}</p>
                         <p className="text-xs text-gray-500 mt-1">
-                          Réservation: {documentToReplace.quoteNumber} - {documentToReplace.route}
+                          {t('replaceDocument.booking')}: {documentToReplace.quoteNumber} - {documentToReplace.route}
                         </p>
                       </div>
-
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Nouveau fichier
-                        </label>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">{t('replaceDocument.newFile')}</label>
                         <input
                           ref={replaceFileInputRef}
                           type="file"
                           accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
                           className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
                         />
-                        <p className="mt-1 text-xs text-gray-500">
-                          Formats acceptés: PDF, Word, Excel, Images
-                        </p>
+                        <p className="mt-1 text-xs text-gray-500">{t('replaceDocument.acceptedFormats')}</p>
                       </div>
                     </div>
                   </div>
@@ -961,37 +765,20 @@ export default function UserDocumentsPage() {
                 >
                   {replacingFile ? (
                     <>
-                      <svg
-                        className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          className="opacity-25"
-                          cx="12"
-                          cy="12"
-                          r="10"
-                          stroke="currentColor"
-                          strokeWidth="4"
-                        />
-                        <path
-                          className="opacity-75"
-                          fill="currentColor"
-                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                        />
+                      <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                       </svg>
-                      Remplacement en cours...
+                      {t('replaceDocument.replacing')}
                     </>
-                  ) : (
-                    'Remplacer'
-                  )}
+                  ) : t('replaceDocument.replace')}
                 </button>
                 <button
                   type="button"
                   onClick={handleCloseReplaceModal}
                   className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                 >
-                  Annuler
+                  {t('replaceDocument.cancel')}
                 </button>
               </div>
             </div>
diff --git a/apps/frontend/app/dashboard/layout.tsx b/apps/frontend/app/[locale]/dashboard/layout.tsx
similarity index 83%
rename from apps/frontend/app/dashboard/layout.tsx
rename to apps/frontend/app/[locale]/dashboard/layout.tsx
index a2f0a28..775cca1 100644
--- a/apps/frontend/app/dashboard/layout.tsx
+++ b/apps/frontend/app/[locale]/dashboard/layout.tsx
@@ -1,16 +1,11 @@
-/**
- * Dashboard Layout
- *
- * Layout with sidebar navigation for dashboard pages
- */
-
 'use client';
 
 import { useAuth } from '@/lib/context/auth-context';
-import Link from 'next/link';
-import { usePathname, useRouter } from 'next/navigation';
+import { Link, usePathname, useRouter } from '@/i18n/navigation';
 import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
 import NotificationDropdown from '@/components/NotificationDropdown';
+import LanguageSwitcher from '@/components/LanguageSwitcher';
 import AdminPanelDropdown from '@/components/admin/AdminPanelDropdown';
 import Image from 'next/image';
 import {
@@ -36,6 +31,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   const { hasFeature, subscription } = useSubscription();
   const pathname = usePathname();
   const router = useRouter();
+  const t = useTranslations('dashboard');
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   useEffect(() => {
@@ -57,16 +53,15 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   }
 
   const navigation: Array<{ name: string; href: string; icon: any; requiredFeature?: PlanFeature }> = [
-    { name: 'Tableau de bord', href: '/dashboard', icon: BarChart3, requiredFeature: 'dashboard' },
-    { name: 'Réservations', href: '/dashboard/bookings', icon: Package },
-    { name: 'Documents', href: '/dashboard/documents', icon: FileText },
-    { name: 'Suivi', href: '/dashboard/track-trace', icon: Search, requiredFeature: 'dashboard' },
-    { name: 'Wiki Maritime', href: '/dashboard/wiki', icon: BookOpen, requiredFeature: 'wiki' },
-    { name: 'Organisation', href: '/dashboard/settings/organization', icon: Building2 },
-    { name: 'Clés API', href: '/dashboard/settings/api-keys', icon: Key, requiredFeature: 'api_access' as PlanFeature },
-    // ADMIN and MANAGER only navigation items
+    { name: t('nav.dashboard'), href: '/dashboard', icon: BarChart3, requiredFeature: 'dashboard' },
+    { name: t('nav.bookings'), href: '/dashboard/bookings', icon: Package },
+    { name: t('nav.documents'), href: '/dashboard/documents', icon: FileText },
+    { name: t('nav.tracking'), href: '/dashboard/track-trace', icon: Search, requiredFeature: 'dashboard' },
+    { name: t('nav.wiki'), href: '/dashboard/wiki', icon: BookOpen, requiredFeature: 'wiki' },
+    { name: t('nav.organization'), href: '/dashboard/settings/organization', icon: Building2 },
+    { name: t('nav.apiKeys'), href: '/dashboard/settings/api-keys', icon: Key, requiredFeature: 'api_access' as PlanFeature },
     ...(user?.role === 'ADMIN' || user?.role === 'MANAGER' ? [
-      { name: 'Utilisateurs', href: '/dashboard/settings/users', icon: Users, requiredFeature: 'user_management' as PlanFeature },
+      { name: t('nav.users'), href: '/dashboard/settings/users', icon: Users, requiredFeature: 'user_management' as PlanFeature },
     ] : []),
   ];
 
@@ -79,7 +74,6 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 
   return (
     <div className="min-h-screen bg-gray-50">
-      {/* Mobile sidebar backdrop */}
       {sidebarOpen && (
         <div
           className="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
@@ -87,14 +81,12 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
         />
       )}
 
-      {/* Sidebar */}
       <div
         className={`fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 ${
           sidebarOpen ? 'translate-x-0' : '-translate-x-full'
         }`}
       >
         <div className="flex flex-col h-full">
-          {/* Logo */}
           <div className="flex items-center justify-between h-16 px-6 border-b">
             <Link href="/dashboard" className="text-2xl font-bold text-blue-600">
                <Image
@@ -121,7 +113,6 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
             </button>
           </div>
 
-          {/* Navigation */}
           <nav className="flex-1 px-4 py-6 space-y-2 overflow-y-auto">
             {navigation.map(item => {
               const locked = item.requiredFeature && !hasFeature(item.requiredFeature);
@@ -144,7 +135,6 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
               );
             })}
 
-            {/* Admin Panel - ADMIN role only */}
             {user?.role === 'ADMIN' && (
               <div className="pt-4 mt-4 border-t">
                 <AdminPanelDropdown />
@@ -152,7 +142,6 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
             )}
           </nav>
 
-          {/* User section */}
           <div className="border-t p-4">
             <div className="flex items-center space-x-3 mb-4">
               <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-semibold">
@@ -176,15 +165,13 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
               className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-lg hover:bg-red-100 transition-colors"
             >
               <LogOut className="w-4 h-4 mr-2" />
-              Déconnexion
+              {t('logout')}
             </button>
           </div>
         </div>
       </div>
 
-      {/* Main content */}
       <div className="lg:pl-64">
-        {/* Top bar */}
         <div className="sticky top-0 z-10 flex items-center justify-between h-14 lg:h-16 px-4 lg:px-6 bg-white border-b">
           <button
             className="lg:hidden text-gray-500 hover:text-gray-700 p-1"
@@ -201,33 +188,30 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
           </button>
           <div className="flex-1 lg:flex-none">
             <h1 className="text-base lg:text-xl font-semibold text-gray-900 ml-3 lg:ml-0">
-              {navigation.find(item => isActive(item.href))?.name || 'Tableau de bord'}
+              {navigation.find(item => isActive(item.href))?.name || t('topbar.defaultTitle')}
             </h1>
           </div>
           <div className="flex items-center space-x-3 lg:space-x-4">
-            {/* Notifications */}
+            <LanguageSwitcher variant="light" />
             <NotificationDropdown />
 
-            {/* User Initials */}
             <Link href="/dashboard/profile" className="w-8 h-8 lg:w-9 lg:h-9 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm font-semibold hover:bg-blue-700 transition-colors">
               {user?.firstName?.[0]}{user?.lastName?.[0]}
             </Link>
           </div>
         </div>
 
-        {/* Page content — extra bottom padding on mobile for bottom nav */}
         <main className="p-4 lg:p-6 pb-24 lg:pb-6">{children}</main>
       </div>
 
-      {/* Mobile bottom navigation bar */}
       <nav className="fixed bottom-0 left-0 right-0 z-30 bg-white border-t border-gray-200 lg:hidden">
         <div className="grid grid-cols-5 h-16">
           {[
-            { href: '/dashboard', icon: Home, label: 'Accueil' },
-            { href: '/dashboard/bookings', icon: Package, label: 'Réservations' },
-            { href: '/dashboard/documents', icon: FileText, label: 'Documents' },
-            { href: '/dashboard/track-trace', icon: Search, label: 'Suivi' },
-            { href: '/dashboard/profile', icon: User, label: 'Profil' },
+            { href: '/dashboard', icon: Home, label: t('bottomNav.home') },
+            { href: '/dashboard/bookings', icon: Package, label: t('bottomNav.bookings') },
+            { href: '/dashboard/documents', icon: FileText, label: t('bottomNav.documents') },
+            { href: '/dashboard/track-trace', icon: Search, label: t('bottomNav.tracking') },
+            { href: '/dashboard/profile', icon: User, label: t('bottomNav.profile') },
           ].map((item) => {
             const active = item.href === '/dashboard' ? pathname === item.href : pathname.startsWith(item.href);
             return (
diff --git a/apps/frontend/app/dashboard/notifications/page.tsx b/apps/frontend/app/[locale]/dashboard/notifications/page.tsx
similarity index 86%
rename from apps/frontend/app/dashboard/notifications/page.tsx
rename to apps/frontend/app/[locale]/dashboard/notifications/page.tsx
index f63a5e4..a15e303 100644
--- a/apps/frontend/app/dashboard/notifications/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/notifications/page.tsx
@@ -1,392 +1,387 @@
-/**
- * Notifications Page
- *
- * Full page view for managing all user notifications
- */
-
-'use client';
-
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import {
-  listNotifications,
-  markNotificationAsRead,
-  markAllNotificationsAsRead,
-  deleteNotification,
-} from '@/lib/api';
-import type { NotificationResponse } from '@/types/api';
-import { Trash2, CheckCheck, Filter, Bell, ChevronLeft, ChevronRight, Package, RefreshCw, XCircle, CheckCircle, Mail, Clock, FileText, Megaphone, User, Building2 } from 'lucide-react';
-import type { ReactNode } from 'react';
-
-export default function NotificationsPage() {
-  const [selectedFilter, setSelectedFilter] = useState<'all' | 'unread' | 'read'>('all');
-  const [currentPage, setCurrentPage] = useState(1);
-  const queryClient = useQueryClient();
-  const router = useRouter();
-
-  // Fetch notifications with pagination
-  const { data, isLoading } = useQuery({
-    queryKey: ['notifications', 'page', selectedFilter, currentPage],
-    queryFn: () =>
-      listNotifications({
-        page: currentPage,
-        limit: 20,
-        isRead: selectedFilter === 'all' ? undefined : selectedFilter === 'read',
-      }),
-  });
-
-  const notifications = data?.notifications || [];
-  const total = data?.total || 0;
-  const totalPages = Math.ceil(total / 20);
-  const unreadCount = notifications.filter((n: NotificationResponse) => !n.read).length;
-
-  // Mark single notification as read
-  const markAsReadMutation = useMutation({
-    mutationFn: markNotificationAsRead,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['notifications'] });
-    },
-  });
-
-  // Mark all as read
-  const markAllAsReadMutation = useMutation({
-    mutationFn: markAllNotificationsAsRead,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['notifications'] });
-    },
-  });
-
-  // Delete notification
-  const deleteNotificationMutation = useMutation({
-    mutationFn: deleteNotification,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['notifications'] });
-    },
-  });
-
-  const handleNotificationClick = (notification: NotificationResponse) => {
-    if (!notification.read) {
-      markAsReadMutation.mutate(notification.id);
-    }
-
-    // Navigate to actionUrl if available
-    if (notification.actionUrl) {
-      router.push(notification.actionUrl);
-    }
-  };
-
-  const handleDelete = (e: React.MouseEvent, notificationId: string) => {
-    e.stopPropagation();
-    if (confirm('Êtes-vous sûr de vouloir supprimer cette notification ?')) {
-      deleteNotificationMutation.mutate(notificationId);
-    }
-  };
-
-  const getPriorityColor = (priority: string) => {
-    const colors = {
-      urgent: 'border-l-4 border-red-500 bg-red-50 hover:bg-red-100',
-      high: 'border-l-4 border-orange-500 bg-orange-50 hover:bg-orange-100',
-      medium: 'border-l-4 border-yellow-500 bg-yellow-50 hover:bg-yellow-100',
-      low: 'border-l-4 border-blue-500 bg-blue-50 hover:bg-blue-100',
-    };
-    return colors[priority as keyof typeof colors] || 'border-l-4 border-gray-300 hover:bg-gray-100';
-  };
-
-  const getNotificationIcon = (type: string): ReactNode => {
-    const iconClass = "h-8 w-8";
-    const icons: Record<string, ReactNode> = {
-      booking_created: <Package className={`${iconClass} text-blue-600`} />,
-      booking_updated: <RefreshCw className={`${iconClass} text-orange-500`} />,
-      booking_cancelled: <XCircle className={`${iconClass} text-red-500`} />,
-      booking_confirmed: <CheckCircle className={`${iconClass} text-green-500`} />,
-      csv_booking_accepted: <CheckCircle className={`${iconClass} text-green-500`} />,
-      csv_booking_rejected: <XCircle className={`${iconClass} text-red-500`} />,
-      csv_booking_request_sent: <Mail className={`${iconClass} text-blue-500`} />,
-      rate_quote_expiring: <Clock className={`${iconClass} text-yellow-500`} />,
-      document_uploaded: <FileText className={`${iconClass} text-gray-600`} />,
-      system_announcement: <Megaphone className={`${iconClass} text-purple-500`} />,
-      user_invited: <User className={`${iconClass} text-teal-500`} />,
-      organization_update: <Building2 className={`${iconClass} text-indigo-500`} />,
-    };
-    return icons[type.toLowerCase()] || <Bell className={`${iconClass} text-gray-500`} />;
-  };
-
-  const formatTime = (dateString: string) => {
-    const date = new Date(dateString);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-
-    if (diffMins < 1) return 'A l\'instant';
-    if (diffMins < 60) return `Il y a ${diffMins}min`;
-    if (diffHours < 24) return `Il y a ${diffHours}h`;
-    if (diffDays < 7) return `Il y a ${diffDays}j`;
-    return date.toLocaleDateString('fr-FR', {
-      month: 'long',
-      day: 'numeric',
-      year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <div className="bg-white border-b shadow-sm">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-4">
-              <div className="p-3 bg-blue-100 rounded-lg">
-                <Bell className="w-8 h-8 text-blue-600" />
-              </div>
-              <div>
-                <h1 className="text-3xl font-bold text-gray-900">Notifications</h1>
-                <p className="text-sm text-gray-600 mt-1">
-                  {total} notification{total !== 1 ? 's' : ''} au total
-                  {unreadCount > 0 && ` • ${unreadCount} non lue${unreadCount > 1 ? 's' : ''}`}
-                </p>
-              </div>
-            </div>
-            {unreadCount > 0 && (
-              <button
-                onClick={() => markAllAsReadMutation.mutate()}
-                disabled={markAllAsReadMutation.isPending}
-                className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
-              >
-                <CheckCheck className="w-5 h-5" />
-                <span>Tout marquer comme lu</span>
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {/* Filter Bar */}
-        <div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
-          <div className="flex items-center space-x-3">
-            <Filter className="w-5 h-5 text-gray-500" />
-            <span className="text-sm font-medium text-gray-700">Filtrer :</span>
-            <div className="flex space-x-2">
-              {(['all', 'unread', 'read'] as const).map((filter) => (
-                <button
-                  key={filter}
-                  onClick={() => {
-                    setSelectedFilter(filter);
-                    setCurrentPage(1);
-                  }}
-                  className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
-                    selectedFilter === filter
-                      ? 'bg-blue-600 text-white shadow-sm'
-                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                  }`}
-                >
-                  {filter === 'all' ? 'Toutes' : filter === 'unread' ? 'Non lues' : 'Lues'}
-                  {filter === 'unread' && unreadCount > 0 && (
-                    <span className="ml-2 px-2 py-0.5 bg-white/20 rounded-full text-xs">
-                      {unreadCount}
-                    </span>
-                  )}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Notifications List */}
-        <div className="bg-white rounded-lg shadow-sm border">
-          {isLoading ? (
-            <div className="flex items-center justify-center py-20">
-              <div className="text-center">
-                <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600 mx-auto mb-4" />
-                <p className="text-gray-500">Chargement des notifications...</p>
-              </div>
-            </div>
-          ) : notifications.length === 0 ? (
-            <div className="flex items-center justify-center py-20">
-              <div className="text-center">
-                <div className="mb-4 flex justify-center"><Bell className="h-16 w-16 text-gray-300" /></div>
-                <h3 className="text-xl font-semibold text-gray-900 mb-2">Aucune notification</h3>
-                <p className="text-gray-500">
-                  {selectedFilter === 'unread'
-                    ? 'Vous êtes à jour !'
-                    : 'Aucune notification à afficher'}
-                </p>
-              </div>
-            </div>
-          ) : (
-            <div className="divide-y">
-              {notifications.map((notification: NotificationResponse) => (
-                <div
-                  key={notification.id}
-                  onClick={() => handleNotificationClick(notification)}
-                  className={`p-6 transition-all cursor-pointer group ${
-                    !notification.read ? 'bg-blue-50/50' : ''
-                  } ${getPriorityColor(notification.priority || 'low')}`}
-                >
-                  <div className="flex items-start space-x-4">
-                    {/* Icon */}
-                    <div className="flex-shrink-0 flex items-center justify-center w-12 h-12">
-                      {getNotificationIcon(notification.type)}
-                    </div>
-
-                    {/* Content */}
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-start justify-between mb-2">
-                        <div className="flex items-center space-x-3">
-                          <h3 className="text-lg font-semibold text-gray-900">
-                            {notification.title}
-                          </h3>
-                          {!notification.read && (
-                            <span className="flex items-center space-x-1 px-2 py-1 bg-blue-600 text-white text-xs font-medium rounded-full">
-                              <span className="w-2 h-2 bg-white rounded-full animate-pulse" />
-                              <span>NOUVEAU</span>
-                            </span>
-                          )}
-                        </div>
-                        <button
-                          onClick={(e) => handleDelete(e, notification.id)}
-                          className="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-red-100 rounded-lg"
-                          title="Supprimer la notification"
-                        >
-                          <Trash2 className="w-5 h-5 text-red-600" />
-                        </button>
-                      </div>
-
-                      <p className="text-base text-gray-700 mb-4 leading-relaxed">
-                        {notification.message}
-                      </p>
-
-                      {/* Metadata */}
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center flex-wrap gap-3 text-xs">
-                          <span className="flex items-center space-x-1 text-gray-600">
-                            <svg
-                              className="w-4 h-4"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                              />
-                            </svg>
-                            <span className="font-medium">{formatTime(notification.createdAt)}</span>
-                          </span>
-                          <span className="px-3 py-1 bg-gray-100 rounded-full text-gray-700 font-medium">
-                            {notification.type.replace(/_/g, ' ').toUpperCase()}
-                          </span>
-                          {notification.priority && (
-                            <span
-                              className={`px-3 py-1 rounded-full font-medium ${
-                                notification.priority === 'urgent'
-                                  ? 'bg-red-100 text-red-700'
-                                  : notification.priority === 'high'
-                                  ? 'bg-orange-100 text-orange-700'
-                                  : notification.priority === 'medium'
-                                  ? 'bg-yellow-100 text-yellow-700'
-                                  : 'bg-blue-100 text-blue-700'
-                              }`}
-                            >
-                              {notification.priority.toUpperCase()}
-                            </span>
-                          )}
-                        </div>
-                        {notification.actionUrl && (
-                          <span className="text-sm text-blue-600 font-medium group-hover:underline flex items-center space-x-1">
-                            <span>Voir les détails</span>
-                            <svg
-                              className="w-4 h-4"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M9 5l7 7-7 7"
-                              />
-                            </svg>
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* Pagination */}
-        {totalPages > 1 && (
-          <div className="mt-6 bg-white rounded-lg shadow-sm border p-4">
-            <div className="flex items-center justify-between">
-              <div className="text-sm text-gray-600">
-                Page <span className="font-semibold">{currentPage}</span> sur{' '}
-                <span className="font-semibold">{totalPages}</span>
-                {' • '}
-                <span className="font-semibold">{total}</span> notification{total !== 1 ? 's' : ''} au total
-              </div>
-              <div className="flex items-center space-x-2">
-                <button
-                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                  disabled={currentPage === 1}
-                  className="flex items-center space-x-1 px-4 py-2 text-sm font-medium bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                >
-                  <ChevronLeft className="w-4 h-4" />
-                  <span>Précédent</span>
-                </button>
-                <div className="flex items-center space-x-1">
-                  {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
-                    let pageNum;
-                    if (totalPages <= 5) {
-                      pageNum = i + 1;
-                    } else if (currentPage <= 3) {
-                      pageNum = i + 1;
-                    } else if (currentPage >= totalPages - 2) {
-                      pageNum = totalPages - 4 + i;
-                    } else {
-                      pageNum = currentPage - 2 + i;
-                    }
-
-                    return (
-                      <button
-                        key={pageNum}
-                        onClick={() => setCurrentPage(pageNum)}
-                        className={`w-10 h-10 text-sm font-medium rounded-lg transition-colors ${
-                          currentPage === pageNum
-                            ? 'bg-blue-600 text-white'
-                            : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
-                        }`}
-                      >
-                        {pageNum}
-                      </button>
-                    );
-                  })}
-                </div>
-                <button
-                  onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
-                  disabled={currentPage === totalPages}
-                  className="flex items-center space-x-1 px-4 py-2 text-sm font-medium bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                >
-                  <span>Suivant</span>
-                  <ChevronRight className="w-4 h-4" />
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useTranslations, useLocale } from 'next-intl';
+import {
+  listNotifications,
+  markNotificationAsRead,
+  markAllNotificationsAsRead,
+  deleteNotification,
+} from '@/lib/api';
+import type { NotificationResponse } from '@/types/api';
+import { Trash2, CheckCheck, Filter, Bell, ChevronLeft, ChevronRight, Package, RefreshCw, XCircle, CheckCircle, Mail, Clock, FileText, Megaphone, User, Building2 } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+export default function NotificationsPage() {
+  const t = useTranslations('dashboard.notificationsPage');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
+  const [selectedFilter, setSelectedFilter] = useState<'all' | 'unread' | 'read'>('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const queryClient = useQueryClient();
+  const router = useRouter();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['notifications', 'page', selectedFilter, currentPage],
+    queryFn: () =>
+      listNotifications({
+        page: currentPage,
+        limit: 20,
+        isRead: selectedFilter === 'all' ? undefined : selectedFilter === 'read',
+      }),
+  });
+
+  const notifications = data?.notifications || [];
+  const total = data?.total || 0;
+  const totalPages = Math.ceil(total / 20);
+  const unreadCount = notifications.filter((n: NotificationResponse) => !n.read).length;
+
+  const markAsReadMutation = useMutation({
+    mutationFn: markNotificationAsRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    },
+  });
+
+  const markAllAsReadMutation = useMutation({
+    mutationFn: markAllNotificationsAsRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    },
+  });
+
+  const deleteNotificationMutation = useMutation({
+    mutationFn: deleteNotification,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    },
+  });
+
+  const handleNotificationClick = (notification: NotificationResponse) => {
+    if (!notification.read) {
+      markAsReadMutation.mutate(notification.id);
+    }
+
+    if (notification.actionUrl) {
+      router.push(notification.actionUrl);
+    }
+  };
+
+  const handleDelete = (e: React.MouseEvent, notificationId: string) => {
+    e.stopPropagation();
+    if (confirm(t('deleteConfirm'))) {
+      deleteNotificationMutation.mutate(notificationId);
+    }
+  };
+
+  const getPriorityColor = (priority: string) => {
+    const colors = {
+      urgent: 'border-l-4 border-red-500 bg-red-50 hover:bg-red-100',
+      high: 'border-l-4 border-orange-500 bg-orange-50 hover:bg-orange-100',
+      medium: 'border-l-4 border-yellow-500 bg-yellow-50 hover:bg-yellow-100',
+      low: 'border-l-4 border-blue-500 bg-blue-50 hover:bg-blue-100',
+    };
+    return colors[priority as keyof typeof colors] || 'border-l-4 border-gray-300 hover:bg-gray-100';
+  };
+
+  const getPriorityLabel = (priority: string) => {
+    const map: Record<string, string> = {
+      urgent: t('priority.urgent'),
+      high: t('priority.high'),
+      medium: t('priority.medium'),
+      low: t('priority.low'),
+    };
+    return map[priority] || priority.toUpperCase();
+  };
+
+  const getNotificationIcon = (type: string): ReactNode => {
+    const iconClass = "h-8 w-8";
+    const icons: Record<string, ReactNode> = {
+      booking_created: <Package className={`${iconClass} text-blue-600`} />,
+      booking_updated: <RefreshCw className={`${iconClass} text-orange-500`} />,
+      booking_cancelled: <XCircle className={`${iconClass} text-red-500`} />,
+      booking_confirmed: <CheckCircle className={`${iconClass} text-green-500`} />,
+      csv_booking_accepted: <CheckCircle className={`${iconClass} text-green-500`} />,
+      csv_booking_rejected: <XCircle className={`${iconClass} text-red-500`} />,
+      csv_booking_request_sent: <Mail className={`${iconClass} text-blue-500`} />,
+      rate_quote_expiring: <Clock className={`${iconClass} text-yellow-500`} />,
+      document_uploaded: <FileText className={`${iconClass} text-gray-600`} />,
+      system_announcement: <Megaphone className={`${iconClass} text-purple-500`} />,
+      user_invited: <User className={`${iconClass} text-teal-500`} />,
+      organization_update: <Building2 className={`${iconClass} text-indigo-500`} />,
+    };
+    return icons[type.toLowerCase()] || <Bell className={`${iconClass} text-gray-500`} />;
+  };
+
+  const formatTime = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return t('time.now');
+    if (diffMins < 60) return t('time.minutes', { count: diffMins });
+    if (diffHours < 24) return t('time.hours', { count: diffHours });
+    if (diffDays < 7) return t('time.days', { count: diffDays });
+    return date.toLocaleDateString(dateLocale, {
+      month: 'long',
+      day: 'numeric',
+      year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="bg-white border-b shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <div className="p-3 bg-blue-100 rounded-lg">
+                <Bell className="w-8 h-8 text-blue-600" />
+              </div>
+              <div>
+                <h1 className="text-3xl font-bold text-gray-900">{t('title')}</h1>
+                <p className="text-sm text-gray-600 mt-1">
+                  {t('totalLabel', { count: total })}
+                  {unreadCount > 0 && t('unreadSuffix', { count: unreadCount })}
+                </p>
+              </div>
+            </div>
+            {unreadCount > 0 && (
+              <button
+                onClick={() => markAllAsReadMutation.mutate()}
+                disabled={markAllAsReadMutation.isPending}
+                className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+              >
+                <CheckCheck className="w-5 h-5" />
+                <span>{t('markAllRead')}</span>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
+          <div className="flex items-center space-x-3">
+            <Filter className="w-5 h-5 text-gray-500" />
+            <span className="text-sm font-medium text-gray-700">{t('filter.label')}</span>
+            <div className="flex space-x-2">
+              {(['all', 'unread', 'read'] as const).map((filter) => (
+                <button
+                  key={filter}
+                  onClick={() => {
+                    setSelectedFilter(filter);
+                    setCurrentPage(1);
+                  }}
+                  className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
+                    selectedFilter === filter
+                      ? 'bg-blue-600 text-white shadow-sm'
+                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  }`}
+                >
+                  {t(`filter.${filter}` as any)}
+                  {filter === 'unread' && unreadCount > 0 && (
+                    <span className="ml-2 px-2 py-0.5 bg-white/20 rounded-full text-xs">
+                      {unreadCount}
+                    </span>
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-sm border">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-20">
+              <div className="text-center">
+                <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600 mx-auto mb-4" />
+                <p className="text-gray-500">{t('loading')}</p>
+              </div>
+            </div>
+          ) : notifications.length === 0 ? (
+            <div className="flex items-center justify-center py-20">
+              <div className="text-center">
+                <div className="mb-4 flex justify-center"><Bell className="h-16 w-16 text-gray-300" /></div>
+                <h3 className="text-xl font-semibold text-gray-900 mb-2">{t('empty.title')}</h3>
+                <p className="text-gray-500">
+                  {selectedFilter === 'unread' ? t('empty.upToDate') : t('empty.none')}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="divide-y">
+              {notifications.map((notification: NotificationResponse) => (
+                <div
+                  key={notification.id}
+                  onClick={() => handleNotificationClick(notification)}
+                  className={`p-6 transition-all cursor-pointer group ${
+                    !notification.read ? 'bg-blue-50/50' : ''
+                  } ${getPriorityColor(notification.priority || 'low')}`}
+                >
+                  <div className="flex items-start space-x-4">
+                    <div className="flex-shrink-0 flex items-center justify-center w-12 h-12">
+                      {getNotificationIcon(notification.type)}
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-start justify-between mb-2">
+                        <div className="flex items-center space-x-3">
+                          <h3 className="text-lg font-semibold text-gray-900">
+                            {notification.title}
+                          </h3>
+                          {!notification.read && (
+                            <span className="flex items-center space-x-1 px-2 py-1 bg-blue-600 text-white text-xs font-medium rounded-full">
+                              <span className="w-2 h-2 bg-white rounded-full animate-pulse" />
+                              <span>{t('new')}</span>
+                            </span>
+                          )}
+                        </div>
+                        <button
+                          onClick={(e) => handleDelete(e, notification.id)}
+                          className="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-red-100 rounded-lg"
+                          title={t('deleteTitle')}
+                        >
+                          <Trash2 className="w-5 h-5 text-red-600" />
+                        </button>
+                      </div>
+
+                      <p className="text-base text-gray-700 mb-4 leading-relaxed">
+                        {notification.message}
+                      </p>
+
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center flex-wrap gap-3 text-xs">
+                          <span className="flex items-center space-x-1 text-gray-600">
+                            <svg
+                              className="w-4 h-4"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                              />
+                            </svg>
+                            <span className="font-medium">{formatTime(notification.createdAt)}</span>
+                          </span>
+                          <span className="px-3 py-1 bg-gray-100 rounded-full text-gray-700 font-medium">
+                            {notification.type.replace(/_/g, ' ').toUpperCase()}
+                          </span>
+                          {notification.priority && (
+                            <span
+                              className={`px-3 py-1 rounded-full font-medium ${
+                                notification.priority === 'urgent'
+                                  ? 'bg-red-100 text-red-700'
+                                  : notification.priority === 'high'
+                                  ? 'bg-orange-100 text-orange-700'
+                                  : notification.priority === 'medium'
+                                  ? 'bg-yellow-100 text-yellow-700'
+                                  : 'bg-blue-100 text-blue-700'
+                              }`}
+                            >
+                              {getPriorityLabel(notification.priority)}
+                            </span>
+                          )}
+                        </div>
+                        {notification.actionUrl && (
+                          <span className="text-sm text-blue-600 font-medium group-hover:underline flex items-center space-x-1">
+                            <span>{t('viewDetails')}</span>
+                            <svg
+                              className="w-4 h-4"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M9 5l7 7-7 7"
+                              />
+                            </svg>
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {totalPages > 1 && (
+          <div className="mt-6 bg-white rounded-lg shadow-sm border p-4">
+            <div className="flex items-center justify-between">
+              <div className="text-sm text-gray-600">
+                {t.rich('pagination.info', {
+                  current: currentPage,
+                  total: totalPages,
+                  items: total,
+                  b: (chunks) => <span className="font-semibold">{chunks}</span>,
+                })}
+              </div>
+              <div className="flex items-center space-x-2">
+                <button
+                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                  disabled={currentPage === 1}
+                  className="flex items-center space-x-1 px-4 py-2 text-sm font-medium bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                  <span>{t('pagination.previous')}</span>
+                </button>
+                <div className="flex items-center space-x-1">
+                  {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                    let pageNum;
+                    if (totalPages <= 5) {
+                      pageNum = i + 1;
+                    } else if (currentPage <= 3) {
+                      pageNum = i + 1;
+                    } else if (currentPage >= totalPages - 2) {
+                      pageNum = totalPages - 4 + i;
+                    } else {
+                      pageNum = currentPage - 2 + i;
+                    }
+
+                    return (
+                      <button
+                        key={pageNum}
+                        onClick={() => setCurrentPage(pageNum)}
+                        className={`w-10 h-10 text-sm font-medium rounded-lg transition-colors ${
+                          currentPage === pageNum
+                            ? 'bg-blue-600 text-white'
+                            : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
+                        }`}
+                      >
+                        {pageNum}
+                      </button>
+                    );
+                  })}
+                </div>
+                <button
+                  onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                  disabled={currentPage === totalPages}
+                  className="flex items-center space-x-1 px-4 py-2 text-sm font-medium bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  <span>{t('pagination.next')}</span>
+                  <ChevronRight className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/dashboard/page.tsx b/apps/frontend/app/[locale]/dashboard/page.tsx
similarity index 83%
rename from apps/frontend/app/dashboard/page.tsx
rename to apps/frontend/app/[locale]/dashboard/page.tsx
index 71a5b77..44b014e 100644
--- a/apps/frontend/app/dashboard/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/page.tsx
@@ -1,18 +1,13 @@
-/**
- * Dashboard Home Page - Clean & Colorful with Charts
- * Professional design with data visualization
- */
-
 'use client';
 
 import { useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { dashboardApi } from '@/lib/api';
-import Link from 'next/link';
+import { Link, useRouter } from '@/i18n/navigation';
+import { useTranslations, useLocale } from 'next-intl';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { useRouter } from 'next/navigation';
 import {
   Package,
   PackageCheck,
@@ -36,96 +31,92 @@ import {
   CartesianGrid,
   Tooltip,
   ResponsiveContainer,
-  LineChart,
-  Line,
-  Legend,
 } from 'recharts';
 
 export default function DashboardPage() {
   const router = useRouter();
   const { hasFeature, loading: subLoading } = useSubscription();
+  const t = useTranslations('dashboard.home');
+  const locale = useLocale();
 
-  // Redirect Bronze users (no dashboard feature) to bookings
   useEffect(() => {
     if (!subLoading && !hasFeature('dashboard')) {
       router.replace('/dashboard/bookings');
     }
   }, [subLoading, hasFeature, router]);
 
-  // Fetch CSV booking KPIs
   const { data: csvKpis, isLoading: csvKpisLoading } = useQuery({
     queryKey: ['dashboard', 'csv-booking-kpis'],
     queryFn: () => dashboardApi.getCsvBookingKPIs(),
   });
 
-  // Fetch top carriers
   const { data: topCarriers, isLoading: carriersLoading } = useQuery({
     queryKey: ['dashboard', 'top-carriers'],
     queryFn: () => dashboardApi.getTopCarriers(),
   });
 
-  // Prepare data for charts
+  const numberFormat = new Intl.NumberFormat(locale === 'fr' ? 'fr-FR' : 'en-US');
+
   const statusDistribution = csvKpis
     ? [
-        { name: 'Acceptés', value: csvKpis.totalAccepted, color: '#10b981' },
-        { name: 'Refusés', value: csvKpis.totalRejected, color: '#ef4444' },
-        { name: 'En Attente', value: csvKpis.totalPending, color: '#f59e0b' },
+        { name: t('charts.distribution.accepted'), value: csvKpis.totalAccepted, color: '#10b981' },
+        { name: t('charts.distribution.rejected'), value: csvKpis.totalRejected, color: '#ef4444' },
+        { name: t('charts.distribution.pending'), value: csvKpis.totalPending, color: '#f59e0b' },
       ]
     : [];
 
   const carrierWeightData = topCarriers
     ? topCarriers.slice(0, 5).map(c => ({
         name: c.carrierName.length > 15 ? c.carrierName.substring(0, 15) + '...' : c.carrierName,
-        poids: Math.round(c.totalWeightKG),
+        [t('charts.weightByCarrier.weight')]: Math.round(c.totalWeightKG),
       }))
     : [];
 
+  const weightDataKey = t('charts.weightByCarrier.weight');
+
   return (
     <div className="min-h-screen bg-gray-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 sm:py-8 space-y-4 sm:space-y-6">
-        {/* Header - Compact */}
         <div className="flex items-center justify-between pb-3 sm:pb-4 border-b border-gray-200">
           <div>
-            <h1 className="text-xl sm:text-3xl font-semibold text-gray-900">Tableau de Bord</h1>
+            <h1 className="text-xl sm:text-3xl font-semibold text-gray-900">{t('title')}</h1>
             <p className="text-gray-600 mt-0.5 sm:mt-1 text-xs sm:text-sm">
-              Vue d'ensemble de vos réservations et performances
+              {t('subtitle')}
             </p>
           </div>
 
           <div className="flex items-center space-x-2 sm:space-x-3">
             <ExportButton
               data={topCarriers || []}
-              filename="tableau-de-bord-transporteurs"
+              filename={t('exportFilename')}
               columns={[
-                { key: 'carrierName', label: 'Transporteur' },
-                { key: 'totalBookings', label: 'Total Réservations' },
-                { key: 'acceptedBookings', label: 'Acceptées' },
-                { key: 'rejectedBookings', label: 'Refusées' },
-                { key: 'totalWeightKG', label: 'Poids Total (KG)', format: (v) => v?.toLocaleString('fr-FR') || '0' },
-                { key: 'totalVolumeCBM', label: 'Volume Total (CBM)', format: (v) => v?.toFixed(2) || '0' },
-                { key: 'acceptanceRate', label: 'Taux d\'acceptation (%)', format: (v) => v?.toFixed(1) || '0' },
-                { key: 'avgPriceUSD', label: 'Prix moyen ($)', format: (v) => v?.toFixed(2) || '0' },
+                { key: 'carrierName', label: t('export.carrier') },
+                { key: 'totalBookings', label: t('export.totalBookings') },
+                { key: 'acceptedBookings', label: t('export.accepted') },
+                { key: 'rejectedBookings', label: t('export.rejected') },
+                { key: 'totalWeightKG', label: t('export.totalWeight'), format: (v) => v?.toLocaleString(locale === 'fr' ? 'fr-FR' : 'en-US') || '0' },
+                { key: 'totalVolumeCBM', label: t('export.totalVolume'), format: (v) => v?.toFixed(2) || '0' },
+                { key: 'acceptanceRate', label: t('export.acceptanceRate'), format: (v) => v?.toFixed(1) || '0' },
+                { key: 'avgPriceUSD', label: t('export.avgPrice'), format: (v) => v?.toFixed(2) || '0' },
               ]}
             />
             <Link href="/dashboard/search-advanced">
               <Button className="bg-blue-600 hover:bg-blue-700 text-white gap-2 shadow-lg font-semibold px-3 sm:px-6 py-2 sm:py-5 text-sm sm:text-base">
                 <Plus className="h-4 w-4 sm:h-5 sm:w-5 flex-shrink-0" />
-                <span className="hidden sm:inline">Nouvelle Réservation</span>
+                <span className="hidden sm:inline">{t('newBooking')}</span>
               </Button>
             </Link>
           </div>
         </div>
 
-        {/* KPI Cards - Compact with Color */}
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-          {/* Bookings Acceptés */}
           <Card className="border border-gray-200 shadow-sm hover:shadow-md transition-shadow bg-white">
             <CardContent className="p-4">
               <div className="flex flex-col items-center text-center">
                 <div className="h-10 w-10 rounded-lg bg-green-100 flex items-center justify-center mb-2">
                   <PackageCheck className="h-5 w-5 text-green-600" />
                 </div>
-                <p className="text-xs font-medium text-gray-600 mb-1">Acceptés</p>
+                <p className="text-xs font-medium text-gray-600 mb-1">{t('kpi.accepted')}</p>
                 {csvKpisLoading ? (
                   <div className="h-8 w-16 bg-gray-100 animate-pulse rounded" />
                 ) : (
@@ -134,7 +125,7 @@ export default function DashboardPage() {
                       {csvKpis?.totalAccepted || 0}
                     </p>
                     <p className="text-xs text-gray-500 mt-1">
-                      +{csvKpis?.acceptedThisMonth || 0} ce mois
+                      {t('kpi.thisMonth', { count: csvKpis?.acceptedThisMonth || 0 })}
                     </p>
                   </>
                 )}
@@ -142,14 +133,13 @@ export default function DashboardPage() {
             </CardContent>
           </Card>
 
-          {/* Bookings Refusés */}
           <Card className="border border-gray-200 shadow-sm hover:shadow-md transition-shadow bg-white">
             <CardContent className="p-4">
               <div className="flex flex-col items-center text-center">
                 <div className="h-10 w-10 rounded-lg bg-red-100 flex items-center justify-center mb-2">
                   <PackageX className="h-5 w-5 text-red-600" />
                 </div>
-                <p className="text-xs font-medium text-gray-600 mb-1">Refusés</p>
+                <p className="text-xs font-medium text-gray-600 mb-1">{t('kpi.rejected')}</p>
                 {csvKpisLoading ? (
                   <div className="h-8 w-16 bg-gray-100 animate-pulse rounded" />
                 ) : (
@@ -158,7 +148,7 @@ export default function DashboardPage() {
                       {csvKpis?.totalRejected || 0}
                     </p>
                     <p className="text-xs text-gray-500 mt-1">
-                      +{csvKpis?.rejectedThisMonth || 0} ce mois
+                      {t('kpi.thisMonth', { count: csvKpis?.rejectedThisMonth || 0 })}
                     </p>
                   </>
                 )}
@@ -166,14 +156,13 @@ export default function DashboardPage() {
             </CardContent>
           </Card>
 
-          {/* Bookings En Attente */}
           <Card className="border border-gray-200 shadow-sm hover:shadow-md transition-shadow bg-white">
             <CardContent className="p-4">
               <div className="flex flex-col items-center text-center">
                 <div className="h-10 w-10 rounded-lg bg-amber-100 flex items-center justify-center mb-2">
                   <Clock className="h-5 w-5 text-amber-600" />
                 </div>
-                <p className="text-xs font-medium text-gray-600 mb-1">En Attente</p>
+                <p className="text-xs font-medium text-gray-600 mb-1">{t('kpi.pending')}</p>
                 {csvKpisLoading ? (
                   <div className="h-8 w-16 bg-gray-100 animate-pulse rounded" />
                 ) : (
@@ -182,7 +171,7 @@ export default function DashboardPage() {
                       {csvKpis?.totalPending || 0}
                     </p>
                     <p className="text-xs text-gray-500 mt-1">
-                      {csvKpis?.acceptanceRate.toFixed(1)}% acceptés
+                      {t('kpi.acceptanceRate', { rate: (csvKpis?.acceptanceRate ?? 0).toFixed(1) })}
                     </p>
                   </>
                 )}
@@ -190,20 +179,19 @@ export default function DashboardPage() {
             </CardContent>
           </Card>
 
-          {/* Poids Total */}
           <Card className="border border-gray-200 shadow-sm hover:shadow-md transition-shadow bg-white">
             <CardContent className="p-4">
               <div className="flex flex-col items-center text-center">
                 <div className="h-10 w-10 rounded-lg bg-blue-100 flex items-center justify-center mb-2">
                   <Weight className="h-5 w-5 text-blue-600" />
                 </div>
-                <p className="text-xs font-medium text-gray-600 mb-1">Poids Total</p>
+                <p className="text-xs font-medium text-gray-600 mb-1">{t('kpi.totalWeight')}</p>
                 {csvKpisLoading ? (
                   <div className="h-8 w-16 bg-gray-100 animate-pulse rounded" />
                 ) : (
                   <>
                     <p className="text-2xl font-bold text-gray-900">
-                      {(csvKpis?.totalWeightAcceptedKG || 0).toLocaleString()}
+                      {numberFormat.format(csvKpis?.totalWeightAcceptedKG || 0)}
                     </p>
                     <p className="text-xs text-gray-500 mt-1">
                       KG • {(csvKpis?.totalVolumeAcceptedCBM || 0).toFixed(1)} CBM
@@ -215,16 +203,14 @@ export default function DashboardPage() {
           </Card>
         </div>
 
-        {/* Charts Section */}
         <div className="grid gap-4 md:grid-cols-2">
-          {/* Distribution des Statuts - Pie Chart */}
           <Card className="border border-gray-200 shadow-sm bg-white">
             <CardHeader className="pb-4 border-b border-gray-100">
               <CardTitle className="text-base font-semibold text-gray-900">
-                Distribution des Réservations
+                {t('charts.distribution.title')}
               </CardTitle>
               <CardDescription className="text-xs text-gray-600">
-                Répartition par statut
+                {t('charts.distribution.description')}
               </CardDescription>
             </CardHeader>
             <CardContent className="pt-4">
@@ -256,14 +242,13 @@ export default function DashboardPage() {
             </CardContent>
           </Card>
 
-          {/* Poids par Transporteur - Bar Chart */}
           <Card className="border border-gray-200 shadow-sm bg-white">
             <CardHeader className="pb-4 border-b border-gray-100">
               <CardTitle className="text-base font-semibold text-gray-900">
-                Poids par Transporteur
+                {t('charts.weightByCarrier.title')}
               </CardTitle>
               <CardDescription className="text-xs text-gray-600">
-                Top 5 transporteurs par poids (KG)
+                {t('charts.weightByCarrier.description')}
               </CardDescription>
             </CardHeader>
             <CardContent className="pt-4">
@@ -282,7 +267,7 @@ export default function DashboardPage() {
                     />
                     <YAxis tick={{ fontSize: 11 }} />
                     <Tooltip />
-                    <Bar dataKey="poids" fill="#3b82f6" radius={[4, 4, 0, 0]} />
+                    <Bar dataKey={weightDataKey} fill="#3b82f6" radius={[4, 4, 0, 0]} />
                   </BarChart>
                 </ResponsiveContainer>
               )}
@@ -290,7 +275,6 @@ export default function DashboardPage() {
           </Card>
         </div>
 
-        {/* Performance Overview - Compact */}
         <div className="grid gap-4 md:grid-cols-3">
           <Card className="border border-gray-200 shadow-sm bg-white">
             <CardContent className="p-4">
@@ -298,9 +282,9 @@ export default function DashboardPage() {
                 <div className="h-10 w-10 rounded-lg bg-green-100 flex items-center justify-center mb-2">
                   <TrendingUp className="h-5 w-5 text-green-600" />
                 </div>
-                <p className="text-xs font-medium text-gray-600 mb-1">Taux d'Acceptation</p>
+                <p className="text-xs font-medium text-gray-600 mb-1">{t('performance.acceptanceRate')}</p>
                 <p className="text-2xl font-bold text-gray-900">
-                  {csvKpisLoading ? '--' : `${csvKpis?.acceptanceRate.toFixed(1)}%`}
+                  {csvKpisLoading ? '--' : `${(csvKpis?.acceptanceRate ?? 0).toFixed(1)}%`}
                 </p>
               </div>
             </CardContent>
@@ -312,7 +296,7 @@ export default function DashboardPage() {
                 <div className="h-10 w-10 rounded-lg bg-blue-100 flex items-center justify-center mb-2">
                   <Package className="h-5 w-5 text-blue-600" />
                 </div>
-                <p className="text-xs font-medium text-gray-600 mb-1">Total Réservations</p>
+                <p className="text-xs font-medium text-gray-600 mb-1">{t('performance.totalBookings')}</p>
                 <p className="text-2xl font-bold text-gray-900">
                   {csvKpisLoading
                     ? '--'
@@ -330,7 +314,7 @@ export default function DashboardPage() {
                 <div className="h-10 w-10 rounded-lg bg-purple-100 flex items-center justify-center mb-2">
                   <Weight className="h-5 w-5 text-purple-600" />
                 </div>
-                <p className="text-xs font-medium text-gray-600 mb-1">Volume Total</p>
+                <p className="text-xs font-medium text-gray-600 mb-1">{t('performance.totalVolume')}</p>
                 <p className="text-2xl font-bold text-gray-900">
                   {csvKpisLoading ? '--' : `${(csvKpis?.totalVolumeAcceptedCBM || 0).toFixed(1)}`}
                   <span className="text-sm font-normal text-gray-500 ml-1">CBM</span>
@@ -340,16 +324,15 @@ export default function DashboardPage() {
           </Card>
         </div>
 
-        {/* Top Carriers - Compact Table */}
         <Card className="border border-gray-200 shadow-sm bg-white">
           <CardHeader className="pb-3 border-b border-gray-100">
             <div className="flex items-center justify-between">
               <div>
                 <CardTitle className="text-base font-semibold text-gray-900">
-                  Top Transporteurs
+                  {t('topCarriers.title')}
                 </CardTitle>
                 <CardDescription className="text-xs text-gray-600 mt-1">
-                  Classement des meilleures compagnies
+                  {t('topCarriers.description')}
                 </CardDescription>
               </div>
               <Link href="/dashboard/bookings">
@@ -358,7 +341,7 @@ export default function DashboardPage() {
                   size="sm"
                   className="gap-2 text-gray-600 hover:text-gray-900 text-xs"
                 >
-                  Voir tout
+                  {t('topCarriers.viewAll')}
                   <ArrowRight className="h-3 w-3" />
                 </Button>
               </Link>
@@ -390,9 +373,9 @@ export default function DashboardPage() {
                             {carrier.carrierName}
                           </h3>
                           <div className="flex items-center gap-3 text-xs text-gray-500 mt-0.5">
-                            <span>{carrier.totalBookings} réservations</span>
+                            <span>{t('topCarriers.bookingsCount', { count: carrier.totalBookings })}</span>
                             <span>•</span>
-                            <span>{carrier.totalWeightKG.toLocaleString()} KG</span>
+                            <span>{numberFormat.format(carrier.totalWeightKG)} KG</span>
                           </div>
                         </div>
                       </div>
@@ -430,15 +413,15 @@ export default function DashboardPage() {
                   <Package className="h-6 w-6 text-gray-400" />
                 </div>
                 <h3 className="text-sm font-semibold text-gray-900 mb-1">
-                  Aucune réservation
+                  {t('topCarriers.empty.title')}
                 </h3>
                 <p className="text-xs text-gray-500 mb-4 max-w-sm mx-auto">
-                  Créez votre première réservation pour voir vos statistiques
+                  {t('topCarriers.empty.description')}
                 </p>
                 <Link href="/dashboard/bookings">
                   <Button size="sm" className="bg-blue-600 hover:bg-blue-700">
                     <Plus className="mr-1.5 h-3 w-3" />
-                    Créer une réservation
+                    {t('topCarriers.empty.cta')}
                   </Button>
                 </Link>
               </div>
diff --git a/apps/frontend/app/dashboard/profile/page.tsx b/apps/frontend/app/[locale]/dashboard/profile/page.tsx
similarity index 74%
rename from apps/frontend/app/dashboard/profile/page.tsx
rename to apps/frontend/app/[locale]/dashboard/profile/page.tsx
index 416e319..db8a38d 100644
--- a/apps/frontend/app/dashboard/profile/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/profile/page.tsx
@@ -1,9 +1,3 @@
-/**
- * User Profile Page
- *
- * Allows users to view and update their profile information
- */
-
 'use client';
 
 import { useState, useEffect } from 'react';
@@ -12,45 +6,44 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
+import { useTranslations } from 'next-intl';
 import { updateUser, changePassword } from '@/lib/api';
 
-// Password update schema
-const passwordSchema = z
-  .object({
-    currentPassword: z.string().min(1, 'Le mot de passe actuel est requis'),
-    newPassword: z
-      .string()
-      .min(12, 'Le mot de passe doit contenir au moins 12 caractères')
-      .regex(
-        /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/,
-        'Le mot de passe doit contenir une majuscule, une minuscule, un chiffre et un caractère spécial'
-      ),
-    confirmPassword: z.string().min(1, 'Veuillez confirmer votre mot de passe'),
-  })
-  .refine(data => data.newPassword === data.confirmPassword, {
-    message: 'Les mots de passe ne correspondent pas',
-    path: ['confirmPassword'],
-  });
-
-type PasswordFormData = z.infer<typeof passwordSchema>;
-
-// Profile update schema
-const profileSchema = z.object({
-  firstName: z.string().min(2, 'Le prénom doit contenir au moins 2 caractères'),
-  lastName: z.string().min(2, 'Le nom doit contenir au moins 2 caractères'),
-  email: z.string().email('Adresse email invalide'),
-});
-
-type ProfileFormData = z.infer<typeof profileSchema>;
-
 export default function ProfilePage() {
+  const t = useTranslations('dashboard.profile');
   const { user, refreshUser, loading } = useAuth();
   const queryClient = useQueryClient();
   const [activeTab, setActiveTab] = useState<'profile' | 'password'>('profile');
   const [successMessage, setSuccessMessage] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
 
-  // Profile form
+  const passwordSchema = z
+    .object({
+      currentPassword: z.string().min(1, t('passwordForm.errors.currentRequired')),
+      newPassword: z
+        .string()
+        .min(12, t('passwordForm.errors.newMin'))
+        .regex(
+          /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/,
+          t('passwordForm.errors.newComplexity')
+        ),
+      confirmPassword: z.string().min(1, t('passwordForm.errors.confirmRequired')),
+    })
+    .refine(data => data.newPassword === data.confirmPassword, {
+      message: t('passwordForm.errors.mismatch'),
+      path: ['confirmPassword'],
+    });
+
+  type PasswordFormData = z.infer<typeof passwordSchema>;
+
+  const profileSchema = z.object({
+    firstName: z.string().min(2, t('passwordForm.fieldErrors.firstNameMin')),
+    lastName: z.string().min(2, t('passwordForm.fieldErrors.lastNameMin')),
+    email: z.string().email(t('passwordForm.fieldErrors.emailInvalid')),
+  });
+
+  type ProfileFormData = z.infer<typeof profileSchema>;
+
   const profileForm = useForm<ProfileFormData>({
     resolver: zodResolver(profileSchema),
     defaultValues: {
@@ -60,7 +53,6 @@ export default function ProfilePage() {
     },
   });
 
-  // Password form
   const passwordForm = useForm<PasswordFormData>({
     resolver: zodResolver(passwordSchema),
     defaultValues: {
@@ -70,7 +62,6 @@ export default function ProfilePage() {
     },
   });
 
-  // Update form values when user data loads
   useEffect(() => {
     if (user) {
       profileForm.reset({
@@ -82,7 +73,6 @@ export default function ProfilePage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user]);
 
-  // Reset password form when switching to password tab
   useEffect(() => {
     if (activeTab === 'password') {
       passwordForm.reset({
@@ -94,26 +84,24 @@ export default function ProfilePage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeTab]);
 
-  // Update profile mutation
   const updateProfileMutation = useMutation({
     mutationFn: (data: ProfileFormData) => {
       if (!user?.id) throw new Error('User ID not found');
       return updateUser(user.id, data);
     },
     onSuccess: () => {
-      setSuccessMessage('Profil mis à jour avec succès !');
+      setSuccessMessage(t('profileForm.successUpdate'));
       setErrorMessage('');
       refreshUser();
       queryClient.invalidateQueries({ queryKey: ['user'] });
       setTimeout(() => setSuccessMessage(''), 3000);
     },
     onError: (error: any) => {
-      setErrorMessage(error.message || 'Échec de la mise à jour du profil');
+      setErrorMessage(error.message || t('profileForm.errorUpdate'));
       setSuccessMessage('');
     },
   });
 
-  // Update password mutation
   const updatePasswordMutation = useMutation({
     mutationFn: async (data: PasswordFormData) => {
       return changePassword({
@@ -122,7 +110,7 @@ export default function ProfilePage() {
       });
     },
     onSuccess: () => {
-      setSuccessMessage('Mot de passe mis à jour avec succès !');
+      setSuccessMessage(t('passwordForm.successUpdate'));
       setErrorMessage('');
       passwordForm.reset({
         currentPassword: '',
@@ -132,7 +120,7 @@ export default function ProfilePage() {
       setTimeout(() => setSuccessMessage(''), 3000);
     },
     onError: (error: any) => {
-      setErrorMessage(error.message || 'Échec de la mise à jour du mot de passe');
+      setErrorMessage(error.message || t('passwordForm.errorUpdate'));
       setSuccessMessage('');
     },
   });
@@ -145,29 +133,27 @@ export default function ProfilePage() {
     updatePasswordMutation.mutate(data);
   };
 
-  // Show loading state while user data is being fetched
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-          <p className="text-gray-600">Chargement du profil...</p>
+          <p className="text-gray-600">{t('loading')}</p>
         </div>
       </div>
     );
   }
 
-  // Show error if user is not found after loading
   if (!loading && !user) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
-          <p className="text-red-600 mb-4">Impossible de charger le profil</p>
+          <p className="text-red-600 mb-4">{t('loadError')}</p>
           <button
             onClick={() => window.location.reload()}
             className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
           >
-            Réessayer
+            {t('retry')}
           </button>
         </div>
       </div>
@@ -176,13 +162,11 @@ export default function ProfilePage() {
 
   return (
     <div className="max-w-4xl mx-auto space-y-6">
-      {/* Header */}
       <div className="bg-gradient-to-r from-blue-600 to-blue-700 rounded-lg shadow-lg p-6 text-white">
-        <h1 className="text-3xl font-bold mb-2">Mon Profil</h1>
-        <p className="text-blue-100">Gérez vos paramètres de compte et préférences</p>
+        <h1 className="text-3xl font-bold mb-2">{t('header.title')}</h1>
+        <p className="text-blue-100">{t('header.subtitle')}</p>
       </div>
 
-      {/* Success/Error Messages */}
       {successMessage && (
         <div className="bg-green-50 border border-green-200 rounded-lg p-4">
           <div className="flex items-center">
@@ -213,7 +197,6 @@ export default function ProfilePage() {
         </div>
       )}
 
-      {/* User Info Card */}
       <div className="bg-white rounded-lg shadow p-6">
         <div className="flex items-center space-x-4">
           <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl font-bold">
@@ -230,14 +213,13 @@ export default function ProfilePage() {
                 {user?.role}
               </span>
               <span className="px-3 py-1 text-xs font-medium text-green-800 bg-green-100 rounded-full">
-                Actif
+                {t('active')}
               </span>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Tabs */}
       <div className="bg-white rounded-lg shadow">
         <div className="border-b">
           <nav className="flex space-x-8 px-6" aria-label="Tabs">
@@ -249,7 +231,7 @@ export default function ProfilePage() {
                   : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
               }`}
             >
-              Informations personnelles
+              {t('tabs.profile')}
             </button>
             <button
               onClick={() => setActiveTab('password')}
@@ -259,7 +241,7 @@ export default function ProfilePage() {
                   : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
               }`}
             >
-              Modifier le mot de passe
+              {t('tabs.password')}
             </button>
           </nav>
         </div>
@@ -268,13 +250,9 @@ export default function ProfilePage() {
           {activeTab === 'profile' ? (
             <form onSubmit={profileForm.handleSubmit(handleProfileSubmit)} className="space-y-6">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {/* First Name */}
                 <div>
-                  <label
-                    htmlFor="firstName"
-                    className="block text-sm font-medium text-gray-700 mb-2"
-                  >
-                    Prénom
+                  <label htmlFor="firstName" className="block text-sm font-medium text-gray-700 mb-2">
+                    {t('profileForm.firstName')}
                   </label>
                   <input
                     {...profileForm.register('firstName')}
@@ -289,13 +267,9 @@ export default function ProfilePage() {
                   )}
                 </div>
 
-                {/* Last Name */}
                 <div>
-                  <label
-                    htmlFor="lastName"
-                    className="block text-sm font-medium text-gray-700 mb-2"
-                  >
-                    Nom
+                  <label htmlFor="lastName" className="block text-sm font-medium text-gray-700 mb-2">
+                    {t('profileForm.lastName')}
                   </label>
                   <input
                     {...profileForm.register('lastName')}
@@ -311,10 +285,9 @@ export default function ProfilePage() {
                 </div>
               </div>
 
-              {/* Email */}
               <div>
                 <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
-                  Adresse email
+                  {t('profileForm.email')}
                 </label>
                 <input
                   {...profileForm.register('email')}
@@ -323,29 +296,24 @@ export default function ProfilePage() {
                   disabled
                   className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50 text-gray-500 cursor-not-allowed"
                 />
-                <p className="mt-1 text-xs text-gray-500">L&apos;adresse email ne peut pas être modifiée</p>
+                <p className="mt-1 text-xs text-gray-500">{t('profileForm.emailHelp')}</p>
               </div>
 
-              {/* Submit Button */}
               <div className="flex justify-end">
                 <button
                   type="submit"
                   disabled={updateProfileMutation.isPending}
                   className="px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
-                  {updateProfileMutation.isPending ? 'Enregistrement...' : 'Enregistrer'}
+                  {updateProfileMutation.isPending ? t('profileForm.saving') : t('profileForm.save')}
                 </button>
               </div>
             </form>
           ) : (
             <form onSubmit={passwordForm.handleSubmit(handlePasswordSubmit)} className="space-y-6">
-              {/* Current Password */}
               <div>
-                <label
-                  htmlFor="currentPassword"
-                  className="block text-sm font-medium text-gray-700 mb-2"
-                >
-                  Mot de passe actuel
+                <label htmlFor="currentPassword" className="block text-sm font-medium text-gray-700 mb-2">
+                  {t('passwordForm.current')}
                 </label>
                 <input
                   {...passwordForm.register('currentPassword')}
@@ -361,13 +329,9 @@ export default function ProfilePage() {
                 )}
               </div>
 
-              {/* New Password */}
               <div>
-                <label
-                  htmlFor="newPassword"
-                  className="block text-sm font-medium text-gray-700 mb-2"
-                >
-                  Nouveau mot de passe
+                <label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-2">
+                  {t('passwordForm.new')}
                 </label>
                 <input
                   {...passwordForm.register('newPassword')}
@@ -381,18 +345,12 @@ export default function ProfilePage() {
                     {passwordForm.formState.errors.newPassword.message}
                   </p>
                 )}
-                <p className="mt-1 text-xs text-gray-500">
-                  Au moins 12 caractères avec majuscule, minuscule, chiffre et caractère spécial
-                </p>
+                <p className="mt-1 text-xs text-gray-500">{t('passwordForm.newHint')}</p>
               </div>
 
-              {/* Confirm Password */}
               <div>
-                <label
-                  htmlFor="confirmPassword"
-                  className="block text-sm font-medium text-gray-700 mb-2"
-                >
-                  Confirmer le nouveau mot de passe
+                <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-2">
+                  {t('passwordForm.confirm')}
                 </label>
                 <input
                   {...passwordForm.register('confirmPassword')}
@@ -408,14 +366,13 @@ export default function ProfilePage() {
                 )}
               </div>
 
-              {/* Submit Button */}
               <div className="flex justify-end">
                 <button
                   type="submit"
                   disabled={updatePasswordMutation.isPending}
                   className="px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
-                  {updatePasswordMutation.isPending ? 'Mise à jour...' : 'Mettre à jour'}
+                  {updatePasswordMutation.isPending ? t('passwordForm.submitting') : t('passwordForm.submit')}
                 </button>
               </div>
             </form>
diff --git a/apps/frontend/app/dashboard/search-advanced/page.tsx b/apps/frontend/app/[locale]/dashboard/search-advanced/page.tsx
similarity index 70%
rename from apps/frontend/app/dashboard/search-advanced/page.tsx
rename to apps/frontend/app/[locale]/dashboard/search-advanced/page.tsx
index e6cb1f4..a454c52 100644
--- a/apps/frontend/app/dashboard/search-advanced/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/search-advanced/page.tsx
@@ -1,16 +1,10 @@
-/**
- * Advanced Rate Search Page
- *
- * Complete search form with all filters and best options display
- * Uses only ports available in CSV rates for origin/destination selection
- */
-
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from '@/i18n/navigation';
 import { Search, Loader2 } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 import {
   getAvailableOrigins,
   getAvailableDestinations,
@@ -18,10 +12,14 @@ import {
 } from '@/lib/api/rates';
 import dynamic from 'next/dynamic';
 
-// Import dynamique pour éviter les erreurs SSR avec Leaflet
+const PortRouteMapLoader = () => {
+  const t = useTranslations('dashboard.rateSearch');
+  return <div className="h-80 bg-gray-100 rounded-lg flex items-center justify-center">{t('mapLoading')}</div>;
+};
+
 const PortRouteMap = dynamic(() => import('@/components/PortRouteMap'), {
   ssr: false,
-  loading: () => <div className="h-80 bg-gray-100 rounded-lg flex items-center justify-center">Chargement de la carte...</div>,
+  loading: PortRouteMapLoader,
 });
 
 interface Package {
@@ -35,28 +33,17 @@ interface Package {
 }
 
 interface SearchForm {
-  // General
   origin: string;
   destination: string;
-
-  // Conditionnement
   packages: Package[];
-
-  // Douane
   eurDocument: boolean;
   customsStop: boolean;
   exportAssistance: boolean;
-
-  // Marchandise
   dangerousGoods: boolean;
   specialHandling: boolean;
-
-  // Manutention
   tailgate: boolean;
   straps: boolean;
   thermalCover: boolean;
-
-  // Autres
   regulatedProducts: boolean;
   appointment: boolean;
   insurance: boolean;
@@ -64,6 +51,7 @@ interface SearchForm {
 }
 
 export default function AdvancedSearchPage() {
+  const t = useTranslations('dashboard.rateSearch');
   const router = useRouter();
   const [searchForm, setSearchForm] = useState<SearchForm>({
     origin: '',
@@ -101,20 +89,17 @@ export default function AdvancedSearchPage() {
   const [selectedOriginPort, setSelectedOriginPort] = useState<RoutePortInfo | null>(null);
   const [selectedDestinationPort, setSelectedDestinationPort] = useState<RoutePortInfo | null>(null);
 
-  // Fetch available origins from CSV rates
   const { data: originsData, isLoading: isLoadingOrigins } = useQuery({
     queryKey: ['available-origins'],
     queryFn: getAvailableOrigins,
   });
 
-  // Fetch available destinations based on selected origin
   const { data: destinationsData, isLoading: isLoadingDestinations } = useQuery({
     queryKey: ['available-destinations', searchForm.origin],
     queryFn: () => getAvailableDestinations(searchForm.origin),
     enabled: !!searchForm.origin,
   });
 
-  // Filter origins based on search input
   const filteredOrigins = (originsData?.origins || []).filter(port => {
     if (!originSearch || originSearch.length < 1) return true;
     const searchLower = originSearch.toLowerCase();
@@ -126,7 +111,6 @@ export default function AdvancedSearchPage() {
     );
   });
 
-  // Filter destinations based on search input
   const filteredDestinations = (destinationsData?.destinations || []).filter(port => {
     if (!destinationSearch || destinationSearch.length < 1) return true;
     const searchLower = destinationSearch.toLowerCase();
@@ -138,10 +122,8 @@ export default function AdvancedSearchPage() {
     );
   });
 
-  // Reset destination when origin changes
   useEffect(() => {
     if (searchForm.origin && selectedDestinationPort) {
-      // Check if current destination is still valid for new origin
       const isValidDestination = destinationsData?.destinations?.some(
         d => d.code === searchForm.destination
       );
@@ -153,7 +135,6 @@ export default function AdvancedSearchPage() {
     }
   }, [searchForm.origin, destinationsData]);
 
-  // Calculate total volume and weight
   const calculateTotals = () => {
     let totalVolumeCBM = 0;
     let totalWeightKG = 0;
@@ -174,7 +155,6 @@ export default function AdvancedSearchPage() {
   const handleSearch = () => {
     const { totalVolumeCBM, totalWeightKG, totalPallets } = calculateTotals();
 
-    // Build query parameters
     const params = new URLSearchParams({
       origin: searchForm.origin,
       destination: searchForm.destination,
@@ -190,7 +170,6 @@ export default function AdvancedSearchPage() {
       requiresAppointment: searchForm.appointment.toString(),
     });
 
-    // Redirect to results page
     router.push(`/dashboard/search-advanced/results?${params.toString()}`);
   };
 
@@ -227,13 +206,12 @@ export default function AdvancedSearchPage() {
 
   const renderStep1 = () => (
     <div className="space-y-6">
-      <h2 className="text-xl font-semibold text-gray-900">1. Informations Générales</h2>
+      <h2 className="text-xl font-semibold text-gray-900">{t('step1.title')}</h2>
 
       <div className="grid grid-cols-2 gap-4">
-        {/* Origin Port with Autocomplete - Limited to CSV routes */}
         <div className="relative">
           <label className="block text-sm font-medium text-gray-700 mb-2">
-            Port d'origine * {searchForm.origin && <span className="text-green-600 text-xs">✓ Sélectionné</span>}
+            {t('step1.originLabel')} {searchForm.origin && <span className="text-green-600 text-xs">{t('step1.selected')}</span>}
           </label>
           <div className="relative">
             <input
@@ -242,7 +220,6 @@ export default function AdvancedSearchPage() {
               onChange={e => {
                 setOriginSearch(e.target.value);
                 setShowOriginDropdown(true);
-                // Clear selection if user modifies the input
                 if (selectedOriginPort && e.target.value !== selectedOriginPort.displayName) {
                   setSearchForm({ ...searchForm, origin: '', destination: '' });
                   setSelectedOriginPort(null);
@@ -252,7 +229,7 @@ export default function AdvancedSearchPage() {
               }}
               onFocus={() => setShowOriginDropdown(true)}
               onBlur={() => setTimeout(() => setShowOriginDropdown(false), 200)}
-              placeholder="Rechercher un port d'origine..."
+              placeholder={t('step1.originPlaceholder')}
               className={`w-full px-3 py-2 border rounded-md focus:ring-blue-500 focus:border-blue-500 ${
                 searchForm.origin ? 'border-green-500 bg-green-50' : 'border-gray-300'
               }`}
@@ -287,22 +264,21 @@ export default function AdvancedSearchPage() {
               ))}
               {filteredOrigins.length > 15 && (
                 <div className="px-4 py-2 text-xs text-gray-500 bg-gray-50">
-                  +{filteredOrigins.length - 15} autres résultats. Affinez votre recherche.
+                  {t('step1.moreResults', { count: filteredOrigins.length - 15 })}
                 </div>
               )}
             </div>
           )}
           {showOriginDropdown && filteredOrigins.length === 0 && !isLoadingOrigins && originsData && (
             <div className="absolute left-0 right-0 mt-2 bg-white border border-gray-200 rounded-md shadow-lg p-4 z-50">
-              <p className="text-sm text-gray-500">Aucun port d'origine trouvé pour "{originSearch}"</p>
+              <p className="text-sm text-gray-500">{t('step1.noOrigin', { query: originSearch })}</p>
             </div>
           )}
         </div>
 
-        {/* Destination Port with Autocomplete - Limited to routes from selected origin */}
         <div className="relative">
           <label className="block text-sm font-medium text-gray-700 mb-2">
-            Port de destination * {searchForm.destination && <span className="text-green-600 text-xs">✓ Sélectionné</span>}
+            {t('step1.destinationLabel')} {searchForm.destination && <span className="text-green-600 text-xs">{t('step1.selected')}</span>}
           </label>
           <div className="relative">
             <input
@@ -311,7 +287,6 @@ export default function AdvancedSearchPage() {
               onChange={e => {
                 setDestinationSearch(e.target.value);
                 setShowDestinationDropdown(true);
-                // Clear selection if user modifies the input
                 if (selectedDestinationPort && e.target.value !== selectedDestinationPort.displayName) {
                   setSearchForm({ ...searchForm, destination: '' });
                   setSelectedDestinationPort(null);
@@ -320,7 +295,7 @@ export default function AdvancedSearchPage() {
               onFocus={() => setShowDestinationDropdown(true)}
               onBlur={() => setTimeout(() => setShowDestinationDropdown(false), 200)}
               disabled={!searchForm.origin}
-              placeholder={searchForm.origin ? 'Rechercher une destination...' : 'Sélectionnez d\'abord un port d\'origine'}
+              placeholder={searchForm.origin ? t('step1.destinationPlaceholder') : t('step1.destinationDisabled')}
               className={`w-full px-3 py-2 border rounded-md focus:ring-blue-500 focus:border-blue-500 ${
                 searchForm.destination ? 'border-green-500 bg-green-50' : 'border-gray-300'
               } ${!searchForm.origin ? 'bg-gray-100 cursor-not-allowed' : ''}`}
@@ -333,7 +308,7 @@ export default function AdvancedSearchPage() {
           </div>
           {searchForm.origin && destinationsData?.total !== undefined && (
             <p className="text-xs text-gray-500 mt-1">
-              {destinationsData.total} destination{destinationsData.total > 1 ? 's' : ''} disponible{destinationsData.total > 1 ? 's' : ''} depuis {selectedOriginPort?.name || searchForm.origin}
+              {t('step1.availableDestinations', { count: destinationsData.total, port: selectedOriginPort?.name || searchForm.origin })}
             </p>
           )}
           {showDestinationDropdown && filteredDestinations.length > 0 && (
@@ -358,28 +333,27 @@ export default function AdvancedSearchPage() {
               ))}
               {filteredDestinations.length > 15 && (
                 <div className="px-4 py-2 text-xs text-gray-500 bg-gray-50">
-                  +{filteredDestinations.length - 15} autres résultats. Affinez votre recherche.
+                  {t('step1.moreResults', { count: filteredDestinations.length - 15 })}
                 </div>
               )}
             </div>
           )}
           {showDestinationDropdown && filteredDestinations.length === 0 && !isLoadingDestinations && searchForm.origin && destinationsData && (
             <div className="absolute left-0 right-0 mt-2 bg-white border border-gray-200 rounded-md shadow-lg p-4 z-50">
-              <p className="text-sm text-gray-500">Aucune destination trouvée pour "{destinationSearch}"</p>
+              <p className="text-sm text-gray-500">{t('step1.noDestination', { query: destinationSearch })}</p>
             </div>
           )}
         </div>
       </div>
 
-      {/* Carte interactive de la route maritime */}
       {selectedOriginPort && selectedDestinationPort && selectedOriginPort.latitude && selectedDestinationPort.latitude && (
         <div className="mt-6 border border-gray-200 rounded-lg overflow-hidden">
           <div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
             <h3 className="text-sm font-semibold text-gray-900">
-              Route maritime : {selectedOriginPort.name} → {selectedDestinationPort.name}
+              {t('step1.routeTitle', { origin: selectedOriginPort.name, destination: selectedDestinationPort.name })}
             </h3>
             <p className="text-xs text-gray-500 mt-1">
-              Distance approximative et visualisation de la route
+              {t('step1.routeDescription')}
             </p>
           </div>
           <PortRouteMap
@@ -398,137 +372,140 @@ export default function AdvancedSearchPage() {
     </div>
   );
 
-  const renderStep2 = () => (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h2 className="text-xl font-semibold text-gray-900">2. Conditionnement</h2>
-        <button
-          type="button"
-          onClick={addPackage}
-          className="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100"
-        >
-          + Ajouter un colis
-        </button>
-      </div>
+  const renderStep2 = () => {
+    const totals = calculateTotals();
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-semibold text-gray-900">{t('step2.title')}</h2>
+          <button
+            type="button"
+            onClick={addPackage}
+            className="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100"
+          >
+            {t('step2.addPackage')}
+          </button>
+        </div>
 
-      {searchForm.packages.map((pkg, index) => (
-        <div key={index} className="border border-gray-200 rounded-lg p-4 space-y-4">
-          <div className="flex items-center justify-between">
-            <h3 className="font-medium text-gray-900">Colis #{index + 1}</h3>
-            {searchForm.packages.length > 1 && (
-              <button
-                type="button"
-                onClick={() => removePackage(index)}
-                className="text-sm text-red-600 hover:text-red-700"
-              >
-                Supprimer
-              </button>
-            )}
-          </div>
-
-          <div className="grid grid-cols-5 gap-3">
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">Type</label>
-              <select
-                value={pkg.type}
-                onChange={e => updatePackage(index, 'type', e.target.value)}
-                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
-              >
-                <option value="caisse">Caisse</option>
-                <option value="colis">Colis</option>
-                <option value="palette">Palette</option>
-                <option value="autre">Autre</option>
-              </select>
+        {searchForm.packages.map((pkg, index) => (
+          <div key={index} className="border border-gray-200 rounded-lg p-4 space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="font-medium text-gray-900">{t('step2.packageNumber', { number: index + 1 })}</h3>
+              {searchForm.packages.length > 1 && (
+                <button
+                  type="button"
+                  onClick={() => removePackage(index)}
+                  className="text-sm text-red-600 hover:text-red-700"
+                >
+                  {t('step2.remove')}
+                </button>
+              )}
             </div>
 
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">Quantité</label>
-              <input
-                type="number"
-                min="1"
-                value={pkg.quantity}
-                onChange={e => updatePackage(index, 'quantity', parseInt(e.target.value) || 1)}
-                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
-              />
+            <div className="grid grid-cols-5 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">{t('step2.type')}</label>
+                <select
+                  value={pkg.type}
+                  onChange={e => updatePackage(index, 'type', e.target.value)}
+                  className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
+                >
+                  <option value="caisse">{t('step2.packageTypes.caisse')}</option>
+                  <option value="colis">{t('step2.packageTypes.colis')}</option>
+                  <option value="palette">{t('step2.packageTypes.palette')}</option>
+                  <option value="autre">{t('step2.packageTypes.autre')}</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">{t('step2.quantity')}</label>
+                <input
+                  type="number"
+                  min="1"
+                  value={pkg.quantity}
+                  onChange={e => updatePackage(index, 'quantity', parseInt(e.target.value) || 1)}
+                  className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">{t('step2.length')}</label>
+                <input
+                  type="number"
+                  min="1"
+                  value={pkg.length}
+                  onChange={e => updatePackage(index, 'length', parseInt(e.target.value) || 0)}
+                  className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">{t('step2.width')}</label>
+                <input
+                  type="number"
+                  min="1"
+                  value={pkg.width}
+                  onChange={e => updatePackage(index, 'width', parseInt(e.target.value) || 0)}
+                  className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">{t('step2.height')}</label>
+                <input
+                  type="number"
+                  min="1"
+                  value={pkg.height}
+                  onChange={e => updatePackage(index, 'height', parseInt(e.target.value) || 0)}
+                  className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
+                />
+              </div>
             </div>
 
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">L (cm)</label>
-              <input
-                type="number"
-                min="1"
-                value={pkg.length}
-                onChange={e => updatePackage(index, 'length', parseInt(e.target.value) || 0)}
-                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
-              />
-            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">{t('step2.weight')}</label>
+                <input
+                  type="number"
+                  min="1"
+                  value={pkg.weight}
+                  onChange={e => updatePackage(index, 'weight', parseInt(e.target.value) || 0)}
+                  className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
+                />
+              </div>
 
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">l (cm)</label>
-              <input
-                type="number"
-                min="1"
-                value={pkg.width}
-                onChange={e => updatePackage(index, 'width', parseInt(e.target.value) || 0)}
-                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
-              />
-            </div>
-
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">H (cm)</label>
-              <input
-                type="number"
-                min="1"
-                value={pkg.height}
-                onChange={e => updatePackage(index, 'height', parseInt(e.target.value) || 0)}
-                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
-              />
+              <div className="flex items-center pt-6">
+                <input
+                  type="checkbox"
+                  checked={pkg.stackable}
+                  onChange={e => updatePackage(index, 'stackable', e.target.checked)}
+                  className="h-4 w-4 text-blue-600 border-gray-300 rounded"
+                />
+                <label className="ml-2 text-sm text-gray-700">{t('step2.stackable')}</label>
+              </div>
             </div>
           </div>
+        ))}
 
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">Poids (kg)</label>
-              <input
-                type="number"
-                min="1"
-                value={pkg.weight}
-                onChange={e => updatePackage(index, 'weight', parseInt(e.target.value) || 0)}
-                className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-md"
-              />
-            </div>
-
-            <div className="flex items-center pt-6">
-              <input
-                type="checkbox"
-                checked={pkg.stackable}
-                onChange={e => updatePackage(index, 'stackable', e.target.checked)}
-                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
-              />
-              <label className="ml-2 text-sm text-gray-700">Gerbable</label>
-            </div>
+        <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
+          <h3 className="text-sm font-medium text-blue-900 mb-2">{t('step2.summary.title')}</h3>
+          <div className="text-sm text-blue-800 space-y-1">
+            <div>{t('step2.summary.volume', { value: totals.totalVolumeCBM.toFixed(2) })}</div>
+            <div>{t('step2.summary.weight', { value: totals.totalWeightKG })}</div>
+            <div>{t('step2.summary.pallets', { value: totals.totalPallets })}</div>
           </div>
         </div>
-      ))}
-
-      <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
-        <h3 className="text-sm font-medium text-blue-900 mb-2">Récapitulatif</h3>
-        <div className="text-sm text-blue-800 space-y-1">
-          <div>Volume total: {calculateTotals().totalVolumeCBM.toFixed(2)} m³</div>
-          <div>Poids total: {calculateTotals().totalWeightKG} kg</div>
-          <div>Palettes: {calculateTotals().totalPallets}</div>
-        </div>
       </div>
-    </div>
-  );
+    );
+  };
 
   const renderStep3 = () => (
     <div className="space-y-6">
-      <h2 className="text-xl font-semibold text-gray-900">3. Options & Services</h2>
+      <h2 className="text-xl font-semibold text-gray-900">{t('step3.title')}</h2>
 
       <div className="space-y-4">
         <div className="border-b pb-4">
-          <h3 className="text-sm font-semibold text-gray-900 mb-3">Douane Import / Export</h3>
+          <h3 className="text-sm font-semibold text-gray-900 mb-3">{t('step3.customs.title')}</h3>
           <div className="space-y-2">
             <label className="flex items-center">
               <input
@@ -537,7 +514,7 @@ export default function AdvancedSearchPage() {
                 onChange={e => setSearchForm({ ...searchForm, eurDocument: e.target.checked })}
                 className="h-4 w-4 text-blue-600 border-gray-300 rounded"
               />
-              <span className="ml-2 text-sm text-gray-700">EUR 1</span>
+              <span className="ml-2 text-sm text-gray-700">{t('step3.customs.eurDocument')}</span>
             </label>
             <label className="flex items-center">
               <input
@@ -546,7 +523,7 @@ export default function AdvancedSearchPage() {
                 onChange={e => setSearchForm({ ...searchForm, t1Document: e.target.checked })}
                 className="h-4 w-4 text-blue-600 border-gray-300 rounded"
               />
-              <span className="ml-2 text-sm text-gray-700">T1</span>
+              <span className="ml-2 text-sm text-gray-700">{t('step3.customs.t1Document')}</span>
             </label>
             <label className="flex items-center">
               <input
@@ -555,7 +532,7 @@ export default function AdvancedSearchPage() {
                 onChange={e => setSearchForm({ ...searchForm, customsStop: e.target.checked })}
                 className="h-4 w-4 text-blue-600 border-gray-300 rounded"
               />
-              <span className="ml-2 text-sm text-gray-700">Stop douane</span>
+              <span className="ml-2 text-sm text-gray-700">{t('step3.customs.customsStop')}</span>
             </label>
             <label className="flex items-center">
               <input
@@ -566,13 +543,13 @@ export default function AdvancedSearchPage() {
                 }
                 className="h-4 w-4 text-blue-600 border-gray-300 rounded"
               />
-              <span className="ml-2 text-sm text-gray-700">Assistance export</span>
+              <span className="ml-2 text-sm text-gray-700">{t('step3.customs.exportAssistance')}</span>
             </label>
           </div>
         </div>
 
         <div className="border-b pb-4">
-          <h3 className="text-sm font-semibold text-gray-900 mb-3">Marchandise</h3>
+          <h3 className="text-sm font-semibold text-gray-900 mb-3">{t('step3.goods.title')}</h3>
           <div className="space-y-2">
             <label className="flex items-center">
               <input
@@ -581,7 +558,7 @@ export default function AdvancedSearchPage() {
                 onChange={e => setSearchForm({ ...searchForm, dangerousGoods: e.target.checked })}
                 className="h-4 w-4 text-blue-600 border-gray-300 rounded"
               />
-              <span className="ml-2 text-sm text-gray-700">Marchandise Dangereuse</span>
+              <span className="ml-2 text-sm text-gray-700">{t('step3.goods.dangerous')}</span>
             </label>
             <label className="flex items-center">
               <input
@@ -592,13 +569,13 @@ export default function AdvancedSearchPage() {
                 }
                 className="h-4 w-4 text-blue-600 border-gray-300 rounded"
               />
-              <span className="ml-2 text-sm text-gray-700">Produits règlementés</span>
+              <span className="ml-2 text-sm text-gray-700">{t('step3.goods.regulated')}</span>
             </label>
           </div>
         </div>
 
         <div className="border-b pb-4">
-          <h3 className="text-sm font-semibold text-gray-900 mb-3">Manutention particulière</h3>
+          <h3 className="text-sm font-semibold text-gray-900 mb-3">{t('step3.handling.title')}</h3>
           <div className="space-y-2">
             <label className="flex items-center">
               <input
@@ -609,7 +586,7 @@ export default function AdvancedSearchPage() {
                 }
                 className="h-4 w-4 text-blue-600 border-gray-300 rounded"
               />
-              <span className="ml-2 text-sm text-gray-700">Manutention spéciale</span>
+              <span className="ml-2 text-sm text-gray-700">{t('step3.handling.special')}</span>
             </label>
             <label className="flex items-center">
               <input
@@ -618,7 +595,7 @@ export default function AdvancedSearchPage() {
                 onChange={e => setSearchForm({ ...searchForm, tailgate: e.target.checked })}
                 className="h-4 w-4 text-blue-600 border-gray-300 rounded"
               />
-              <span className="ml-2 text-sm text-gray-700">Hayon</span>
+              <span className="ml-2 text-sm text-gray-700">{t('step3.handling.tailgate')}</span>
             </label>
             <label className="flex items-center">
               <input
@@ -627,7 +604,7 @@ export default function AdvancedSearchPage() {
                 onChange={e => setSearchForm({ ...searchForm, straps: e.target.checked })}
                 className="h-4 w-4 text-blue-600 border-gray-300 rounded"
               />
-              <span className="ml-2 text-sm text-gray-700">Sangles</span>
+              <span className="ml-2 text-sm text-gray-700">{t('step3.handling.straps')}</span>
             </label>
             <label className="flex items-center">
               <input
@@ -636,13 +613,13 @@ export default function AdvancedSearchPage() {
                 onChange={e => setSearchForm({ ...searchForm, thermalCover: e.target.checked })}
                 className="h-4 w-4 text-blue-600 border-gray-300 rounded"
               />
-              <span className="ml-2 text-sm text-gray-700">Couverture thermique</span>
+              <span className="ml-2 text-sm text-gray-700">{t('step3.handling.thermalCover')}</span>
             </label>
           </div>
         </div>
 
         <div>
-          <h3 className="text-sm font-semibold text-gray-900 mb-3">Autres options</h3>
+          <h3 className="text-sm font-semibold text-gray-900 mb-3">{t('step3.other.title')}</h3>
           <div className="space-y-2">
             <label className="flex items-center">
               <input
@@ -651,7 +628,7 @@ export default function AdvancedSearchPage() {
                 onChange={e => setSearchForm({ ...searchForm, appointment: e.target.checked })}
                 className="h-4 w-4 text-blue-600 border-gray-300 rounded"
               />
-              <span className="ml-2 text-sm text-gray-700">Rendez-vous livraison</span>
+              <span className="ml-2 text-sm text-gray-700">{t('step3.other.appointment')}</span>
             </label>
             <label className="flex items-center">
               <input
@@ -660,7 +637,7 @@ export default function AdvancedSearchPage() {
                 onChange={e => setSearchForm({ ...searchForm, insurance: e.target.checked })}
                 className="h-4 w-4 text-blue-600 border-gray-300 rounded"
               />
-              <span className="ml-2 text-sm text-gray-700">Assurance</span>
+              <span className="ml-2 text-sm text-gray-700">{t('step3.other.insurance')}</span>
             </label>
           </div>
         </div>
@@ -670,15 +647,13 @@ export default function AdvancedSearchPage() {
 
   return (
     <div className="max-w-7xl mx-auto space-y-6">
-      {/* Header */}
       <div>
-        <h1 className="text-3xl font-bold text-gray-900">Recherche Avancée de Tarifs</h1>
+        <h1 className="text-3xl font-bold text-gray-900">{t('title')}</h1>
         <p className="text-sm text-gray-500 mt-1">
-          Formulaire complet avec toutes les options de transport
+          {t('subtitle')}
         </p>
       </div>
 
-      {/* Progress Steps */}
       <div className="flex items-center justify-center space-x-4">
         {[1, 2, 3].map(step => (
           <div key={step} className="flex items-center">
@@ -700,13 +675,11 @@ export default function AdvancedSearchPage() {
         ))}
       </div>
 
-      {/* Form */}
       <div className="bg-white rounded-lg shadow p-8">
         {currentStep === 1 && renderStep1()}
         {currentStep === 2 && renderStep2()}
         {currentStep === 3 && renderStep3()}
 
-        {/* Navigation */}
         <div className="mt-8 flex items-center justify-between pt-6 border-t">
           <button
             type="button"
@@ -714,7 +687,7 @@ export default function AdvancedSearchPage() {
             disabled={currentStep === 1}
             className="px-6 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
           >
-            Précédent
+            {t('navigation.previous')}
           </button>
 
           {currentStep < 3 ? (
@@ -724,7 +697,7 @@ export default function AdvancedSearchPage() {
               disabled={!searchForm.origin || !searchForm.destination}
               className="px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              Suivant
+              {t('navigation.next')}
             </button>
           ) : (
             <button
@@ -733,7 +706,7 @@ export default function AdvancedSearchPage() {
               disabled={!searchForm.origin || !searchForm.destination}
               className="px-6 py-3 text-base font-medium text-white bg-green-600 rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
             >
-              <Search className="h-5 w-5 mr-2" /> Rechercher les tarifs
+              <Search className="h-5 w-5 mr-2" /> {t('navigation.search')}
             </button>
           )}
         </div>
diff --git a/apps/frontend/app/dashboard/search-advanced/results/page.tsx b/apps/frontend/app/[locale]/dashboard/search-advanced/results/page.tsx
similarity index 80%
rename from apps/frontend/app/dashboard/search-advanced/results/page.tsx
rename to apps/frontend/app/[locale]/dashboard/search-advanced/results/page.tsx
index 44a1b1c..4d0e56c 100644
--- a/apps/frontend/app/dashboard/search-advanced/results/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/search-advanced/results/page.tsx
@@ -1,7 +1,9 @@
 'use client';
 
 import { useEffect, useState, useCallback } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
+import { useRouter } from '@/i18n/navigation';
+import { useTranslations, useLocale } from 'next-intl';
 import { searchCsvRatesWithOffers } from '@/lib/api/rates';
 import type { CsvRateSearchResult } from '@/types/rates';
 import { Search, Lightbulb, DollarSign, Scale, Zap, Trophy, XCircle, AlertTriangle } from 'lucide-react';
@@ -13,13 +15,15 @@ interface BestOptions {
 }
 
 export default function SearchResultsPage() {
+  const t = useTranslations('dashboard.rateSearch.results');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
   const router = useRouter();
   const searchParams = useSearchParams();
   const [results, setResults] = useState<CsvRateSearchResult[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // Parse search parameters from URL
   const origin = searchParams.get('origin') || '';
   const destination = searchParams.get('destination') || '';
   const volumeCBM = parseFloat(searchParams.get('volumeCBM') || '0');
@@ -49,11 +53,11 @@ export default function SearchResultsPage() {
       setResults(response.results);
     } catch (err) {
       console.error('Search error:', err);
-      setError(err instanceof Error ? err.message : 'Une erreur est survenue lors de la recherche');
+      setError(err instanceof Error ? err.message : t('errorGeneric'));
     } finally {
       setIsLoading(false);
     }
-  }, [origin, destination, volumeCBM, weightKG, palletCount, searchParams]);
+  }, [origin, destination, volumeCBM, weightKG, palletCount, searchParams, t]);
 
   useEffect(() => {
     if (!origin || !destination || !volumeCBM || !weightKG) {
@@ -67,12 +71,10 @@ export default function SearchResultsPage() {
   const getBestOptions = (): BestOptions | null => {
     if (results.length === 0) return null;
 
-    // Filter results by serviceLevel (backend generates 3 offers per rate)
     const economic = results.find(r => r.serviceLevel === 'ECONOMIC');
     const standard = results.find(r => r.serviceLevel === 'STANDARD');
     const rapid = results.find(r => r.serviceLevel === 'RAPID');
 
-    // If we have all 3 service levels, return them
     if (economic && standard && rapid) {
       return {
         eco: economic,
@@ -81,7 +83,6 @@ export default function SearchResultsPage() {
       };
     }
 
-    // Fallback: if serviceLevel is not present (old endpoint), use sorting
     const sorted = [...results].sort((a, b) => a.priceEUR - b.priceEUR);
     const fastest = [...results].sort((a, b) => a.transitDays - b.transitDays);
 
@@ -95,7 +96,7 @@ export default function SearchResultsPage() {
   const bestOptions = getBestOptions();
 
   const formatPrice = (price: number) => {
-    return new Intl.NumberFormat('fr-FR', {
+    return new Intl.NumberFormat(dateLocale, {
       style: 'currency',
       currency: 'EUR',
     }).format(price);
@@ -107,7 +108,7 @@ export default function SearchResultsPage() {
         <div className="max-w-7xl mx-auto">
           <div className="text-center">
             <div className="inline-block animate-spin rounded-full h-16 w-16 border-b-4 border-blue-600 mb-4"></div>
-            <p className="text-xl text-gray-700 font-medium">Recherche des meilleurs tarifs en cours...</p>
+            <p className="text-xl text-gray-700 font-medium">{t('loadingTitle')}</p>
             <p className="text-gray-500 mt-2">
               {origin} → {destination}
             </p>
@@ -123,13 +124,13 @@ export default function SearchResultsPage() {
         <div className="max-w-7xl mx-auto">
           <div className="bg-red-50 border-2 border-red-200 rounded-lg p-8 text-center">
             <div className="mb-4 flex justify-center"><XCircle className="h-16 w-16 text-red-500" /></div>
-            <h3 className="text-xl font-bold text-red-900 mb-2">Erreur</h3>
+            <h3 className="text-xl font-bold text-red-900 mb-2">{t('errorTitle')}</h3>
             <p className="text-red-700 mb-4">{error}</p>
             <button
               onClick={() => router.push('/dashboard/search-advanced')}
               className="px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
             >
-              Retour à la recherche
+              {t('backToSearch')}
             </button>
           </div>
         </div>
@@ -145,35 +146,30 @@ export default function SearchResultsPage() {
             onClick={() => router.back()}
             className="mb-6 flex items-center text-blue-600 hover:text-blue-800 font-medium"
           >
-            ← Retour à la recherche
+            {t('backToSearch')}
           </button>
 
           <div className="bg-yellow-50 border-2 border-yellow-200 rounded-lg p-8 text-center">
             <div className="mb-4 flex justify-center"><Search className="h-16 w-16 text-yellow-500" /></div>
-            <h3 className="text-xl font-bold text-gray-900 mb-2">Aucun résultat trouvé</h3>
+            <h3 className="text-xl font-bold text-gray-900 mb-2">{t('noResultsTitle')}</h3>
             <p className="text-gray-600 mb-4">
-              Aucun tarif ne correspond à votre recherche pour le trajet {origin} → {destination}
+              {t('noResultsMessage', { origin, destination })}
             </p>
             <div className="bg-white border border-yellow-300 rounded-lg p-4 text-left max-w-2xl mx-auto mb-6">
-              <h4 className="font-semibold text-gray-900 mb-2 flex items-center"><Lightbulb className="h-5 w-5 mr-2 text-yellow-500" /> Suggestions :</h4>
+              <h4 className="font-semibold text-gray-900 mb-2 flex items-center">
+                <Lightbulb className="h-5 w-5 mr-2 text-yellow-500" /> {t('suggestions')}
+              </h4>
               <ul className="text-sm text-gray-700 space-y-2">
-                <li>
-                  • <strong>Ports disponibles :</strong> NLRTM, DEHAM, FRLEH, BEGNE (origine) → USNYC, USLAX,
-                  CNSHG, SGSIN (destination)
-                </li>
-                <li>
-                  • <strong>Volume :</strong> Essayez entre 1 et 200 CBM
-                </li>
-                <li>
-                  • <strong>Poids :</strong> Essayez entre 100 et 30000 kg
-                </li>
+                <li>{t('suggestionPorts')}</li>
+                <li>{t('suggestionVolume')}</li>
+                <li>{t('suggestionWeight')}</li>
               </ul>
             </div>
             <button
               onClick={() => router.back()}
               className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
             >
-              Modifier la recherche
+              {t('modifySearch')}
             </button>
           </div>
         </div>
@@ -183,7 +179,7 @@ export default function SearchResultsPage() {
 
   const optionCards = [
     {
-      type: 'Économique',
+      type: t('options.economic'),
       option: bestOptions?.eco,
       colors: {
         border: 'border-green-200',
@@ -192,10 +188,10 @@ export default function SearchResultsPage() {
         button: 'bg-green-600 hover:bg-green-700',
       },
       icon: <DollarSign className="h-10 w-10 text-green-600" />,
-      badge: 'Le moins cher',
+      badge: t('options.badgeCheapest'),
     },
     {
-      type: 'Standard',
+      type: t('options.standard'),
       option: bestOptions?.standard,
       colors: {
         border: 'border-blue-200',
@@ -204,10 +200,10 @@ export default function SearchResultsPage() {
         button: 'bg-blue-600 hover:bg-blue-700',
       },
       icon: <Scale className="h-10 w-10 text-blue-600" />,
-      badge: 'Équilibré',
+      badge: t('options.badgeBalanced'),
     },
     {
-      type: 'Rapide',
+      type: t('options.fast'),
       option: bestOptions?.fast,
       colors: {
         border: 'border-purple-200',
@@ -216,7 +212,7 @@ export default function SearchResultsPage() {
         button: 'bg-purple-600 hover:bg-purple-700',
       },
       icon: <Zap className="h-10 w-10 text-purple-600" />,
-      badge: 'Le plus rapide',
+      badge: t('options.badgeFastest'),
     },
   ];
 
@@ -229,21 +225,23 @@ export default function SearchResultsPage() {
             onClick={() => router.back()}
             className="mb-4 flex items-center text-blue-600 hover:text-blue-800 font-medium"
           >
-            ← Retour à la recherche
+            {t('backToSearch')}
           </button>
 
           <div className="bg-white rounded-lg shadow-md p-6">
             <div className="flex items-center justify-between">
               <div>
-                <h1 className="text-3xl font-bold text-gray-900 mb-2">Résultats de recherche</h1>
+                <h1 className="text-3xl font-bold text-gray-900 mb-2">{t('resultsTitle')}</h1>
                 <p className="text-gray-600">
                   <span className="font-semibold">{origin}</span> → <span className="font-semibold">{destination}</span>{' '}
-                  • {volumeCBM} CBM • {weightKG} kg
-                  {palletCount > 0 && ` • ${palletCount} palette${palletCount > 1 ? 's' : ''}`}
+                  •{' '}
+                  {palletCount > 0
+                    ? t('summaryWithPallets', { volume: volumeCBM, weight: weightKG, count: palletCount })
+                    : t('summary', { volume: volumeCBM, weight: weightKG })}
                 </p>
               </div>
               <div className="text-right">
-                <p className="text-sm text-gray-500">Tarifs trouvés</p>
+                <p className="text-sm text-gray-500">{t('ratesFound')}</p>
                 <p className="text-3xl font-bold text-blue-600">{results.length}</p>
               </div>
             </div>
@@ -255,7 +253,7 @@ export default function SearchResultsPage() {
           <div className="mb-12">
             <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center">
               <Trophy className="h-8 w-8 mr-3 text-yellow-500" />
-              Meilleurs choix pour votre recherche
+              {t('bestChoices')}
             </h2>
 
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
@@ -282,21 +280,23 @@ export default function SearchResultsPage() {
 
                       <div className="bg-white rounded-lg p-4 mb-4">
                         <div className="text-center mb-3">
-                          <p className="text-sm text-gray-600 mb-1">Prix total</p>
+                          <p className="text-sm text-gray-600 mb-1">{t('totalPrice')}</p>
                           <p className="text-3xl font-bold text-gray-900">{formatPrice(card.option.priceEUR)}</p>
                         </div>
 
                         <div className="border-t border-gray-200 pt-3 space-y-2 text-sm">
                           <div className="flex justify-between">
-                            <span className="text-gray-600">Transporteur :</span>
+                            <span className="text-gray-600">{t('carrier')}</span>
                             <span className="font-semibold text-gray-900">{card.option.companyName}</span>
                           </div>
                           <div className="flex justify-between">
-                            <span className="text-gray-600">Transit :</span>
-                            <span className="font-semibold text-gray-900">{card.option.transitDays} jours</span>
+                            <span className="text-gray-600">{t('transit')}</span>
+                            <span className="font-semibold text-gray-900">
+                              {t('transitDays', { days: card.option.transitDays })}
+                            </span>
                           </div>
                           <div className="flex justify-between">
-                            <span className="text-gray-600">Type :</span>
+                            <span className="text-gray-600">{t('type')}</span>
                             <span className="font-semibold text-gray-900">{card.option.containerType}</span>
                           </div>
                         </div>
@@ -309,7 +309,7 @@ export default function SearchResultsPage() {
                         }}
                         className={`w-full py-3 ${card.colors.button} text-white rounded-lg font-semibold transition-colors`}
                       >
-                        Sélectionner cette option
+                        {t('select')}
                       </button>
                     </div>
                   </div>
@@ -321,7 +321,7 @@ export default function SearchResultsPage() {
 
         {/* All Results */}
         <div>
-          <h2 className="text-2xl font-bold text-gray-900 mb-6">Tous les tarifs disponibles ({results.length})</h2>
+          <h2 className="text-2xl font-bold text-gray-900 mb-6">{t('allResults', { count: results.length })}</h2>
 
           <div className="space-y-4">
             {results.map((result, index) => (
@@ -335,39 +335,45 @@ export default function SearchResultsPage() {
                   </div>
                   <div className="text-right">
                     <p className="text-3xl font-bold text-blue-600">{formatPrice(result.priceEUR)}</p>
-                    <p className="text-sm text-gray-500">Prix total</p>
+                    <p className="text-sm text-gray-500">{t('totalPrice')}</p>
                   </div>
                 </div>
 
                 <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                   <div className="bg-gray-50 rounded-lg p-3">
-                    <p className="text-xs text-gray-600 mb-1">Prix de base</p>
+                    <p className="text-xs text-gray-600 mb-1">{t('priceBreakdown.base')}</p>
                     <p className="font-semibold text-gray-900">
                       {formatPrice(result.priceBreakdown.basePrice)}
                     </p>
                   </div>
                   <div className="bg-gray-50 rounded-lg p-3">
-                    <p className="text-xs text-gray-600 mb-1">Frais volume</p>
+                    <p className="text-xs text-gray-600 mb-1">{t('priceBreakdown.volume')}</p>
                     <p className="font-semibold text-gray-900">
                       {formatPrice(result.priceBreakdown.volumeCharge)}
                     </p>
                   </div>
                   <div className="bg-gray-50 rounded-lg p-3">
-                    <p className="text-xs text-gray-600 mb-1">Frais poids</p>
+                    <p className="text-xs text-gray-600 mb-1">{t('priceBreakdown.weight')}</p>
                     <p className="font-semibold text-gray-900">
                       {formatPrice(result.priceBreakdown.weightCharge)}
                     </p>
                   </div>
                   <div className="bg-gray-50 rounded-lg p-3">
-                    <p className="text-xs text-gray-600 mb-1">Délai transit</p>
-                    <p className="font-semibold text-gray-900">{result.transitDays} jours</p>
+                    <p className="text-xs text-gray-600 mb-1">{t('priceBreakdown.transit')}</p>
+                    <p className="font-semibold text-gray-900">
+                      {t('transitDays', { days: result.transitDays })}
+                    </p>
                   </div>
                 </div>
 
                 <div className="flex items-center justify-between">
                   <div className="flex items-center space-x-4 text-sm text-gray-600">
-                    <span>✓ Valide jusqu'au {new Date(result.validUntil).toLocaleDateString('fr-FR')}</span>
-                    {result.hasSurcharges && <span className="text-orange-600 flex items-center"><AlertTriangle className="h-4 w-4 mr-1" /> Surcharges applicables</span>}
+                    <span>{t('validUntil', { date: new Date(result.validUntil).toLocaleDateString(dateLocale) })}</span>
+                    {result.hasSurcharges && (
+                      <span className="text-orange-600 flex items-center">
+                        <AlertTriangle className="h-4 w-4 mr-1" /> {t('surcharges')}
+                      </span>
+                    )}
                   </div>
                   <button
                     onClick={() => {
@@ -376,7 +382,7 @@ export default function SearchResultsPage() {
                     }}
                     className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                   >
-                    Sélectionner
+                    {t('selectShort')}
                   </button>
                 </div>
               </div>
diff --git a/apps/frontend/app/dashboard/search/page.tsx b/apps/frontend/app/[locale]/dashboard/search/page.tsx
similarity index 100%
rename from apps/frontend/app/dashboard/search/page.tsx
rename to apps/frontend/app/[locale]/dashboard/search/page.tsx
diff --git a/apps/frontend/app/dashboard/settings/api-keys/page.tsx b/apps/frontend/app/[locale]/dashboard/settings/api-keys/page.tsx
similarity index 71%
rename from apps/frontend/app/dashboard/settings/api-keys/page.tsx
rename to apps/frontend/app/[locale]/dashboard/settings/api-keys/page.tsx
index 3855294..5a33030 100644
--- a/apps/frontend/app/dashboard/settings/api-keys/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/settings/api-keys/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslations, useLocale } from 'next-intl';
 import { listApiKeys, createApiKey, revokeApiKey } from '@/lib/api/api-keys';
 import type { ApiKeyDto, CreateApiKeyResultDto } from '@/lib/api/api-keys';
 import { useSubscription } from '@/lib/context/subscription-context';
@@ -19,39 +20,8 @@ import {
 } from 'lucide-react';
 import { PageHeader } from '@/components/ui/PageHeader';
 
-// ─── Helpers ────────────────────────────────────────────────────────────────
-
-function formatDate(iso: string | null): string {
-  if (!iso) return '—';
-  return new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium' }).format(new Date(iso));
-}
-
-function keyStatusBadge(key: ApiKeyDto) {
-  if (!key.isActive) {
-    return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
-        Révoquée
-      </span>
-    );
-  }
-  if (key.expiresAt && new Date(key.expiresAt) < new Date()) {
-    return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
-        <Clock className="w-3 h-3" />
-        Expirée
-      </span>
-    );
-  }
-  return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
-      Active
-    </span>
-  );
-}
-
-// ─── Copy button ─────────────────────────────────────────────────────────────
-
 function CopyButton({ text }: { text: string }) {
+  const t = useTranslations('dashboard.apiKeys.copy');
   const [copied, setCopied] = useState(false);
   const handleCopy = async () => {
     await navigator.clipboard.writeText(text);
@@ -66,20 +36,18 @@ function CopyButton({ text }: { text: string }) {
       {copied ? (
         <>
           <Check className="w-3.5 h-3.5 text-green-500" />
-          <span className="text-green-600">Copié</span>
+          <span className="text-green-600">{t('copied')}</span>
         </>
       ) : (
         <>
           <Copy className="w-3.5 h-3.5 text-gray-400" />
-          <span className="text-gray-600">Copier</span>
+          <span className="text-gray-600">{t('copy')}</span>
         </>
       )}
     </button>
   );
 }
 
-// ─── Creation success modal ──────────────────────────────────────────────────
-
 function CreatedKeyModal({
   result,
   onClose,
@@ -87,17 +55,17 @@ function CreatedKeyModal({
   result: CreateApiKeyResultDto;
   onClose: () => void;
 }) {
+  const t = useTranslations('dashboard.apiKeys.createdModal');
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
       <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg">
-        {/* Header */}
         <div className="flex items-center justify-between p-6 border-b">
           <div className="flex items-center gap-3">
             <div className="w-10 h-10 rounded-xl bg-green-100 flex items-center justify-center">
               <ShieldCheck className="w-5 h-5 text-green-600" />
             </div>
             <div>
-              <h2 className="text-lg font-semibold text-gray-900">Clé API créée</h2>
+              <h2 className="text-lg font-semibold text-gray-900">{t('title')}</h2>
               <p className="text-sm text-gray-500">{result.name}</p>
             </div>
           </div>
@@ -106,19 +74,16 @@ function CreatedKeyModal({
           </button>
         </div>
 
-        {/* Warning */}
         <div className="mx-6 mt-6 p-4 bg-amber-50 border border-amber-200 rounded-xl flex gap-3">
           <AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
           <p className="text-sm text-amber-800">
-            <strong>Copiez cette clé maintenant.</strong> Elle ne sera plus jamais affichée après
-            la fermeture de cette fenêtre.
+            <strong>{t('warning')}</strong> {t('warningRest')}
           </p>
         </div>
 
-        {/* Key */}
         <div className="p-6">
           <label className="block text-xs font-medium text-gray-500 mb-2 uppercase tracking-wide">
-            Clé API complète
+            {t('fullKey')}
           </label>
           <div className="flex items-center gap-2 p-3 bg-gray-950 rounded-xl border border-gray-800">
             <code className="flex-1 text-xs font-mono text-green-400 break-all">
@@ -126,18 +91,15 @@ function CreatedKeyModal({
             </code>
             <CopyButton text={result.fullKey} />
           </div>
-          <p className="mt-3 text-xs text-gray-500">
-            Stockez-la dans vos variables d&apos;environnement ou un gestionnaire de secrets.
-          </p>
+          <p className="mt-3 text-xs text-gray-500">{t('storeHint')}</p>
         </div>
 
-        {/* Footer */}
         <div className="p-6 pt-0">
           <button
             onClick={onClose}
             className="w-full py-2.5 bg-[#10183A] hover:bg-[#1a2550] text-white text-sm font-medium rounded-xl transition-colors"
           >
-            J&apos;ai copié ma clé, fermer
+            {t('close')}
           </button>
         </div>
       </div>
@@ -145,8 +107,6 @@ function CreatedKeyModal({
   );
 }
 
-// ─── Create key form modal ───────────────────────────────────────────────────
-
 function CreateKeyModal({
   onSuccess,
   onClose,
@@ -154,6 +114,7 @@ function CreateKeyModal({
   onSuccess: (result: CreateApiKeyResultDto) => void;
   onClose: () => void;
 }) {
+  const t = useTranslations('dashboard.apiKeys.createModal');
   const [name, setName] = useState('');
   const [expiresAt, setExpiresAt] = useState('');
   const queryClient = useQueryClient();
@@ -177,13 +138,12 @@ function CreateKeyModal({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
       <div className="bg-white rounded-2xl shadow-xl w-full max-w-md">
-        {/* Header */}
         <div className="flex items-center justify-between p-6 border-b">
           <div className="flex items-center gap-3">
             <div className="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center">
               <Key className="w-5 h-5 text-blue-600" />
             </div>
-            <h2 className="text-lg font-semibold text-gray-900">Nouvelle clé API</h2>
+            <h2 className="text-lg font-semibold text-gray-900">{t('title')}</h2>
           </div>
           <button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
             <X className="w-5 h-5" />
@@ -191,28 +151,26 @@ function CreateKeyModal({
         </div>
 
         <form onSubmit={handleSubmit} className="p-6 space-y-5">
-          {/* Name */}
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1.5">
-              Nom de la clé <span className="text-red-500">*</span>
+              {t('name')} <span className="text-red-500">*</span>
             </label>
             <input
               type="text"
               value={name}
               onChange={e => setName(e.target.value)}
-              placeholder="ex: Intégration ERP Production"
+              placeholder={t('namePlaceholder')}
               maxLength={100}
               required
               className="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#34CCCD] focus:border-transparent"
             />
-            <p className="mt-1 text-xs text-gray-400">{name.length}/100 caractères</p>
+            <p className="mt-1 text-xs text-gray-400">{t('nameCount', { count: name.length })}</p>
           </div>
 
-          {/* Expiry */}
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1.5">
-              Date d&apos;expiration{' '}
-              <span className="text-gray-400 font-normal">(optionnel)</span>
+              {t('expiry')}{' '}
+              <span className="text-gray-400 font-normal">{t('optional')}</span>
             </label>
             <input
               type="date"
@@ -221,34 +179,30 @@ function CreateKeyModal({
               min={new Date().toISOString().split('T')[0]}
               className="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#34CCCD] focus:border-transparent"
             />
-            <p className="mt-1 text-xs text-gray-400">
-              Si vide, la clé n&apos;expire jamais.
-            </p>
+            <p className="mt-1 text-xs text-gray-400">{t('expiryHint')}</p>
           </div>
 
-          {/* Error */}
           {mutation.isError && (
             <div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">
               <AlertTriangle className="w-4 h-4 flex-shrink-0" />
-              Une erreur est survenue. Veuillez réessayer.
+              {t('errorGeneric')}
             </div>
           )}
 
-          {/* Actions */}
           <div className="flex gap-3 pt-2">
             <button
               type="button"
               onClick={onClose}
               className="flex-1 py-2.5 border border-gray-200 text-gray-700 text-sm font-medium rounded-xl hover:bg-gray-50 transition-colors"
             >
-              Annuler
+              {t('cancel')}
             </button>
             <button
               type="submit"
               disabled={!name.trim() || mutation.isPending}
               className="flex-1 py-2.5 bg-[#10183A] hover:bg-[#1a2550] disabled:opacity-50 text-white text-sm font-medium rounded-xl transition-colors"
             >
-              {mutation.isPending ? 'Création...' : 'Créer la clé'}
+              {mutation.isPending ? t('creating') : t('create')}
             </button>
           </div>
         </form>
@@ -257,8 +211,6 @@ function CreateKeyModal({
   );
 }
 
-// ─── Revoke confirm modal ────────────────────────────────────────────────────
-
 function RevokeConfirmModal({
   apiKey,
   onConfirm,
@@ -268,6 +220,7 @@ function RevokeConfirmModal({
   onConfirm: () => void;
   onClose: () => void;
 }) {
+  const t = useTranslations('dashboard.apiKeys.revokeModal');
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
       <div className="bg-white rounded-2xl shadow-xl w-full max-w-md">
@@ -275,15 +228,13 @@ function RevokeConfirmModal({
           <div className="w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center mx-auto mb-4">
             <Trash2 className="w-6 h-6 text-red-600" />
           </div>
-          <h2 className="text-lg font-semibold text-gray-900 text-center mb-2">
-            Révoquer cette clé ?
-          </h2>
+          <h2 className="text-lg font-semibold text-gray-900 text-center mb-2">{t('title')}</h2>
           <p className="text-sm text-gray-600 text-center mb-1">
             <strong className="text-gray-900">{apiKey.name}</strong>
           </p>
           <p className="text-sm text-gray-500 text-center">
-            Cette action est <strong>immédiate et irréversible</strong>. Toute requête utilisant
-            cette clé sera refusée.
+            {t('description')} <strong>{t('descriptionEmphasis')}</strong>
+            {t('descriptionRest')}
           </p>
         </div>
         <div className="px-6 pb-6 flex gap-3">
@@ -291,13 +242,13 @@ function RevokeConfirmModal({
             onClick={onClose}
             className="flex-1 py-2.5 border border-gray-200 text-gray-700 text-sm font-medium rounded-xl hover:bg-gray-50 transition-colors"
           >
-            Annuler
+            {t('cancel')}
           </button>
           <button
             onClick={onConfirm}
             className="flex-1 py-2.5 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-xl transition-colors"
           >
-            Révoquer
+            {t('confirm')}
           </button>
         </div>
       </div>
@@ -305,9 +256,10 @@ function RevokeConfirmModal({
   );
 }
 
-// ─── Main page ────────────────────────────────────────────────────────────────
-
 export default function ApiKeysPage() {
+  const t = useTranslations('dashboard.apiKeys');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
   const { hasFeature } = useSubscription();
   const queryClient = useQueryClient();
   const hasApiAccess = hasFeature('api_access');
@@ -330,23 +282,52 @@ export default function ApiKeysPage() {
     },
   });
 
-  // Plan upsell screen
+  const formatDate = (iso: string | null): string => {
+    if (!iso) return '—';
+    return new Intl.DateTimeFormat(dateLocale, { dateStyle: 'medium' }).format(new Date(iso));
+  };
+
+  const keyStatusBadge = (key: ApiKeyDto) => {
+    if (!key.isActive) {
+      return (
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
+          {t('status.revoked')}
+        </span>
+      );
+    }
+    if (key.expiresAt && new Date(key.expiresAt) < new Date()) {
+      return (
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
+          <Clock className="w-3 h-3" />
+          {t('status.expired')}
+        </span>
+      );
+    }
+    return (
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
+        {t('status.active')}
+      </span>
+    );
+  };
+
   if (!hasApiAccess) {
     return (
       <div className="max-w-lg mx-auto mt-16 text-center">
         <div className="w-16 h-16 rounded-2xl bg-gray-100 flex items-center justify-center mx-auto mb-6">
           <Lock className="w-8 h-8 text-gray-400" />
         </div>
-        <h1 className="text-2xl font-bold text-gray-900 mb-3">Accès API</h1>
+        <h1 className="text-2xl font-bold text-gray-900 mb-3">{t('noAccess.title')}</h1>
         <p className="text-gray-600 mb-8">
-          L&apos;accès programmatique à l&apos;API Xpeditis est disponible sur les plans{' '}
-          <strong>Gold</strong> et <strong>Platinium</strong> uniquement.
+          {t.rich('noAccess.description', {
+            gold: () => <strong>{t('noAccess.gold')}</strong>,
+            platinium: () => <strong>{t('noAccess.platinium')}</strong>,
+          })}
         </p>
         <a
           href="/pricing"
           className="inline-flex items-center gap-2 px-6 py-3 bg-[#10183A] hover:bg-[#1a2550] text-white text-sm font-medium rounded-xl transition-colors"
         >
-          Voir les plans
+          {t('noAccess.viewPlans')}
         </a>
       </div>
     );
@@ -356,7 +337,6 @@ export default function ApiKeysPage() {
 
   return (
     <>
-      {/* Modals */}
       {showCreateModal && (
         <CreateKeyModal
           onSuccess={result => {
@@ -378,8 +358,8 @@ export default function ApiKeysPage() {
       )}
 
       <PageHeader
-        title="Clés API"
-        description="Gérez les clés d'accès programmatique à l'API Xpeditis."
+        title={t('title')}
+        description={t('description')}
         actions={
           <button
             onClick={() => setShowCreateModal(true)}
@@ -387,33 +367,35 @@ export default function ApiKeysPage() {
             className="flex items-center gap-2 px-4 py-2.5 bg-[#10183A] hover:bg-[#1a2550] disabled:opacity-50 text-white text-sm font-medium rounded-xl transition-colors"
           >
             <Plus className="w-4 h-4" />
-            Nouvelle clé
+            {t('newKey')}
           </button>
         }
       />
 
-      {/* Info banner */}
       <div className="mb-6 p-4 bg-blue-50 border border-blue-100 rounded-xl flex gap-3">
         <ShieldCheck className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
         <div className="text-sm text-blue-800">
-          <p className="font-medium mb-0.5">Comment utiliser vos clés API</p>
+          <p className="font-medium mb-0.5">{t('infoTitle')}</p>
           <p>
-            Ajoutez l&apos;en-tête{' '}
-            <code className="px-1.5 py-0.5 bg-blue-100 rounded text-blue-900 font-mono text-xs">
-              X-API-Key: xped_live_...
-            </code>{' '}
-            à chaque requête HTTP.{' '}
-            <a
-              href="/dashboard/docs?section=authentication"
-              className="font-medium underline underline-offset-2"
-            >
-              Voir la documentation
-            </a>
+            {t.rich('infoBody', {
+              code: () => (
+                <code className="px-1.5 py-0.5 bg-blue-100 rounded text-blue-900 font-mono text-xs">
+                  X-API-Key: xped_live_...
+                </code>
+              ),
+              link: () => (
+                <a
+                  href="/dashboard/docs?section=authentication"
+                  className="font-medium underline underline-offset-2"
+                >
+                  {t('viewDocs')}
+                </a>
+              ),
+            })}
           </p>
         </div>
       </div>
 
-      {/* Keys list */}
       <div className="bg-white border border-gray-200 rounded-2xl overflow-hidden">
         {isLoading ? (
           <div className="flex items-center justify-center py-16">
@@ -422,22 +404,21 @@ export default function ApiKeysPage() {
         ) : !apiKeys || apiKeys.length === 0 ? (
           <div className="py-16 text-center">
             <Key className="w-10 h-10 text-gray-300 mx-auto mb-3" />
-            <p className="text-gray-500 text-sm">Aucune clé API pour le moment.</p>
+            <p className="text-gray-500 text-sm">{t('noKeys')}</p>
             <button
               onClick={() => setShowCreateModal(true)}
               className="mt-4 text-sm font-medium text-[#10183A] hover:underline"
             >
-              Créer votre première clé
+              {t('createFirst')}
             </button>
           </div>
         ) : (
           <div className="divide-y divide-gray-100">
-            {/* Table header */}
             <div className="grid grid-cols-[2fr_1.5fr_1fr_1fr_auto] gap-4 px-6 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wide">
-              <span>Nom / Préfixe</span>
-              <span>Dernière utilisation</span>
-              <span>Expiration</span>
-              <span>Statut</span>
+              <span>{t('table.name')}</span>
+              <span>{t('table.lastUsed')}</span>
+              <span>{t('table.expiry')}</span>
+              <span>{t('table.status')}</span>
               <span />
             </div>
 
@@ -446,26 +427,19 @@ export default function ApiKeysPage() {
                 key={key.id}
                 className="grid grid-cols-[2fr_1.5fr_1fr_1fr_auto] gap-4 items-center px-6 py-4"
               >
-                {/* Name + prefix */}
                 <div>
                   <p className="text-sm font-medium text-gray-900">{key.name}</p>
                   <code className="text-xs font-mono text-gray-400">{key.keyPrefix}…</code>
                 </div>
 
-                {/* Last used */}
                 <span className="text-sm text-gray-600">{formatDate(key.lastUsedAt)}</span>
-
-                {/* Expiry */}
                 <span className="text-sm text-gray-600">{formatDate(key.expiresAt)}</span>
-
-                {/* Status */}
                 <div>{keyStatusBadge(key)}</div>
 
-                {/* Actions */}
                 <button
                   onClick={() => setRevokeTarget(key)}
                   disabled={!key.isActive || revokeMutation.isPending}
-                  title="Révoquer cette clé"
+                  title={t('revoke')}
                   className="p-2 text-gray-400 hover:text-red-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors rounded-lg hover:bg-red-50"
                 >
                   <Trash2 className="w-4 h-4" />
@@ -476,10 +450,9 @@ export default function ApiKeysPage() {
         )}
       </div>
 
-      {/* Quota */}
       {apiKeys && apiKeys.length > 0 && (
         <p className="mt-4 text-xs text-gray-400 text-right">
-          {activeKeys.length} / 20 clés actives utilisées
+          {t('quota', { active: activeKeys.length, max: 20 })}
         </p>
       )}
     </>
diff --git a/apps/frontend/app/dashboard/settings/organization/page.tsx b/apps/frontend/app/[locale]/dashboard/settings/organization/page.tsx
similarity index 83%
rename from apps/frontend/app/dashboard/settings/organization/page.tsx
rename to apps/frontend/app/[locale]/dashboard/settings/organization/page.tsx
index 7a3d8aa..4d5711b 100644
--- a/apps/frontend/app/dashboard/settings/organization/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/settings/organization/page.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState, useCallback } from 'react';
 import { useSearchParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
 import { useAuth } from '@/lib/context/auth-context';
 import { getOrganization, updateOrganization } from '@/lib/api/organizations';
 import type { OrganizationResponse } from '@/types/api';
@@ -23,11 +24,11 @@ interface OrganizationForm {
 type TabType = 'information' | 'address' | 'subscription' | 'licenses';
 
 export default function OrganizationSettingsPage() {
+  const t = useTranslations('dashboard.organizationSettings');
   const { user } = useAuth();
   const searchParams = useSearchParams();
   const [activeTab, setActiveTab] = useState<TabType>('information');
 
-  // Auto-switch to subscription tab if coming back from Stripe (only for ADMIN/MANAGER)
   useEffect(() => {
     const isSuccess = searchParams.get('success') === 'true';
     const isCanceled = searchParams.get('canceled') === 'true';
@@ -53,7 +54,6 @@ export default function OrganizationSettingsPage() {
   const [error, setError] = useState<string | null>(null);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
 
-  // Check if user can edit organization (only ADMIN and MANAGER)
   const canEdit = user?.role === 'ADMIN' || user?.role === 'MANAGER';
 
   const loadOrganization = useCallback(async () => {
@@ -77,11 +77,11 @@ export default function OrganizationSettingsPage() {
       });
     } catch (err) {
       console.error('Failed to load organization:', err);
-      setError(err instanceof Error ? err.message : 'Erreur lors du chargement');
+      setError(err instanceof Error ? err.message : t('loadFailed'));
     } finally {
       setIsLoading(false);
     }
-  }, [user]);
+  }, [user, t]);
 
   useEffect(() => {
     if (user?.organizationId) {
@@ -135,10 +135,10 @@ export default function OrganizationSettingsPage() {
       });
 
       setOrganization(updatedOrg);
-      setSuccessMessage('Informations sauvegardées avec succès');
+      setSuccessMessage(t('saveSuccess'));
     } catch (err) {
       console.error('Failed to update organization:', err);
-      setError(err instanceof Error ? err.message : 'Erreur lors de la sauvegarde');
+      setError(err instanceof Error ? err.message : t('saveFailed'));
     } finally {
       setIsSaving(false);
     }
@@ -149,7 +149,7 @@ export default function OrganizationSettingsPage() {
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
           <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-4 border-blue-600 mb-4"></div>
-          <p className="text-gray-600">Chargement...</p>
+          <p className="text-gray-600">{t('loading')}</p>
         </div>
       </div>
     );
@@ -159,20 +159,19 @@ export default function OrganizationSettingsPage() {
     return (
       <div className="max-w-4xl mx-auto">
         <div className="bg-red-50 border border-red-200 rounded-lg p-6">
-          <h3 className="text-lg font-semibold text-red-900 mb-2">Erreur</h3>
-          <p className="text-red-700">{error || "Impossible de charger l'organisation"}</p>
+          <h3 className="text-lg font-semibold text-red-900 mb-2">{t('errorTitle')}</h3>
+          <p className="text-red-700">{error || t('loadError')}</p>
         </div>
       </div>
     );
   }
 
-  // Check if user can view subscription and licenses (only ADMIN and MANAGER)
   const canViewBilling = user?.role === 'ADMIN' || user?.role === 'MANAGER';
 
   const tabs = [
     {
       id: 'information' as TabType,
-      label: 'Informations',
+      label: t('tabs.information'),
       icon: (
         <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -181,7 +180,7 @@ export default function OrganizationSettingsPage() {
     },
     {
       id: 'address' as TabType,
-      label: 'Adresse',
+      label: t('tabs.address'),
       icon: (
         <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
@@ -189,11 +188,10 @@ export default function OrganizationSettingsPage() {
         </svg>
       ),
     },
-    // Only show subscription and licenses tabs for ADMIN and MANAGER roles
     ...(canViewBilling ? [
       {
         id: 'subscription' as TabType,
-        label: 'Abonnement',
+        label: t('tabs.subscription'),
         icon: (
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
@@ -202,7 +200,7 @@ export default function OrganizationSettingsPage() {
       },
       {
         id: 'licenses' as TabType,
-        label: 'Licences',
+        label: t('tabs.licenses'),
         icon: (
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
@@ -214,13 +212,11 @@ export default function OrganizationSettingsPage() {
 
   return (
     <div className="max-w-4xl mx-auto">
-      {/* Header */}
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-gray-900">Paramètres de l&apos;organisation</h1>
-        <p className="text-gray-600 mt-2">Gérez les informations de votre organisation</p>
+        <h1 className="text-3xl font-bold text-gray-900">{t('header.title')}</h1>
+        <p className="text-gray-600 mt-2">{t('header.subtitle')}</p>
       </div>
 
-      {/* Success Message */}
       {successMessage && (activeTab === 'information' || activeTab === 'address') && (
         <div className="mb-6 bg-green-50 border border-green-200 rounded-lg p-4">
           <div className="flex items-center">
@@ -232,7 +228,6 @@ export default function OrganizationSettingsPage() {
         </div>
       )}
 
-      {/* Error Message */}
       {error && (activeTab === 'information' || activeTab === 'address') && (
         <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
           <div className="flex items-center">
@@ -244,19 +239,17 @@ export default function OrganizationSettingsPage() {
         </div>
       )}
 
-      {/* Read-only warning for USER role */}
       {!canEdit && (activeTab === 'information' || activeTab === 'address') && (
         <div className="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
           <div className="flex items-center">
             <svg className="w-5 h-5 text-blue-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
-            <p className="text-blue-800 font-medium">Mode lecture seule - Seuls les administrateurs et managers peuvent modifier l&apos;organisation</p>
+            <p className="text-blue-800 font-medium">{t('readOnlyWarning')}</p>
           </div>
         </div>
       )}
 
-      {/* Tabs */}
       <div className="bg-white rounded-lg shadow-md">
         <div className="border-b border-gray-200">
           <nav className="flex -mb-px overflow-x-auto">
@@ -279,14 +272,12 @@ export default function OrganizationSettingsPage() {
           </nav>
         </div>
 
-        {/* Tab Content */}
         <div className="p-8">
           {activeTab === 'information' && (
             <div className="space-y-6">
-              {/* Nom de la société */}
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Nom de la société <span className="text-red-500">*</span>
+                  {t('information.name')} <span className="text-red-500">*</span>
                 </label>
                 <input
                   type="text"
@@ -294,16 +285,15 @@ export default function OrganizationSettingsPage() {
                   onChange={e => handleChange('name', e.target.value)}
                   disabled={!canEdit}
                   className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-                  placeholder="Xpeditis"
+                  placeholder={t('information.namePlaceholder')}
                   required
                 />
               </div>
 
-              {/* SIREN */}
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">
-                  SIREN
-                  <span className="ml-2 text-xs text-gray-500">(Système d&apos;Identification du Répertoire des Entreprises)</span>
+                  {t('information.siren')}
+                  <span className="ml-2 text-xs text-gray-500">({t('information.sirenHint')})</span>
                 </label>
                 <input
                   type="text"
@@ -311,17 +301,16 @@ export default function OrganizationSettingsPage() {
                   onChange={e => handleChange('siren', e.target.value.replace(/\D/g, '').slice(0, 9))}
                   disabled={!canEdit}
                   className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-                  placeholder="123 456 789"
+                  placeholder={t('information.sirenPlaceholder')}
                   maxLength={9}
                 />
-                <p className="mt-1 text-xs text-gray-500">9 chiffres</p>
+                <p className="mt-1 text-xs text-gray-500">{t('information.sirenDigits')}</p>
               </div>
 
-              {/* Numéro EORI */}
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Numéro EORI
-                  <span className="ml-2 text-xs text-gray-500">(Economic Operators Registration and Identification)</span>
+                  {t('information.eori')}
+                  <span className="ml-2 text-xs text-gray-500">({t('information.eoriHint')})</span>
                 </label>
                 <input
                   type="text"
@@ -329,35 +318,33 @@ export default function OrganizationSettingsPage() {
                   onChange={e => handleChange('eori', e.target.value.toUpperCase())}
                   disabled={!canEdit}
                   className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-                  placeholder="FR123456789"
+                  placeholder={t('information.eoriPlaceholder')}
                   maxLength={17}
                 />
-                <p className="mt-1 text-xs text-gray-500">Code pays (2 lettres) + numéro unique (max 15 caractères)</p>
+                <p className="mt-1 text-xs text-gray-500">{t('information.eoriHelp')}</p>
               </div>
 
-              {/* Téléphone */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">Téléphone</label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">{t('information.phone')}</label>
                 <input
                   type="tel"
                   value={formData.contact_phone}
                   onChange={e => handleChange('contact_phone', e.target.value)}
                   disabled={!canEdit}
                   className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-                  placeholder="+33 6 80 18 28 12"
+                  placeholder={t('information.phonePlaceholder')}
                 />
               </div>
 
-              {/* Email */}
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">Email</label>
+                <label className="block text-sm font-medium text-gray-700 mb-2">{t('information.email')}</label>
                 <input
                   type="email"
                   value={formData.contact_email}
                   onChange={e => handleChange('contact_email', e.target.value)}
                   disabled={!canEdit}
                   className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-                  placeholder="contact@xpeditis.com"
+                  placeholder={t('information.emailPlaceholder')}
                 />
               </div>
             </div>
@@ -365,10 +352,9 @@ export default function OrganizationSettingsPage() {
 
           {activeTab === 'address' && (
             <div className="space-y-6">
-              {/* Rue */}
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Rue <span className="text-red-500">*</span>
+                  {t('address.street')} <span className="text-red-500">*</span>
                 </label>
                 <input
                   type="text"
@@ -376,16 +362,15 @@ export default function OrganizationSettingsPage() {
                   onChange={e => handleChange('address_street', e.target.value)}
                   disabled={!canEdit}
                   className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-                  placeholder="123 Rue de la Paix"
+                  placeholder={t('address.streetPlaceholder')}
                   required
                 />
               </div>
 
-              {/* Ville et Code postal */}
               <div className="grid grid-cols-2 gap-4">
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Code postal <span className="text-red-500">*</span>
+                    {t('address.postalCode')} <span className="text-red-500">*</span>
                   </label>
                   <input
                     type="text"
@@ -393,13 +378,13 @@ export default function OrganizationSettingsPage() {
                     onChange={e => handleChange('address_postal_code', e.target.value)}
                     disabled={!canEdit}
                     className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-                    placeholder="75001"
+                    placeholder={t('address.postalCodePlaceholder')}
                     required
                   />
                 </div>
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Ville <span className="text-red-500">*</span>
+                    {t('address.city')} <span className="text-red-500">*</span>
                   </label>
                   <input
                     type="text"
@@ -407,16 +392,15 @@ export default function OrganizationSettingsPage() {
                     onChange={e => handleChange('address_city', e.target.value)}
                     disabled={!canEdit}
                     className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
-                    placeholder="Paris"
+                    placeholder={t('address.cityPlaceholder')}
                     required
                   />
                 </div>
               </div>
 
-              {/* Pays */}
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Pays <span className="text-red-500">*</span>
+                  {t('address.country')} <span className="text-red-500">*</span>
                 </label>
                 <select
                   value={formData.address_country}
@@ -425,15 +409,15 @@ export default function OrganizationSettingsPage() {
                   className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
                   required
                 >
-                  <option value="FR">France</option>
-                  <option value="BE">Belgique</option>
-                  <option value="DE">Allemagne</option>
-                  <option value="ES">Espagne</option>
-                  <option value="IT">Italie</option>
-                  <option value="NL">Pays-Bas</option>
-                  <option value="GB">Royaume-Uni</option>
-                  <option value="US">États-Unis</option>
-                  <option value="CN">Chine</option>
+                  <option value="FR">{t('address.countries.FR')}</option>
+                  <option value="BE">{t('address.countries.BE')}</option>
+                  <option value="DE">{t('address.countries.DE')}</option>
+                  <option value="ES">{t('address.countries.ES')}</option>
+                  <option value="IT">{t('address.countries.IT')}</option>
+                  <option value="NL">{t('address.countries.NL')}</option>
+                  <option value="GB">{t('address.countries.GB')}</option>
+                  <option value="US">{t('address.countries.US')}</option>
+                  <option value="CN">{t('address.countries.CN')}</option>
                 </select>
               </div>
             </div>
@@ -444,7 +428,6 @@ export default function OrganizationSettingsPage() {
           {activeTab === 'licenses' && canViewBilling && <LicensesTab />}
         </div>
 
-        {/* Actions (only for information and address tabs) */}
         {canEdit && (activeTab === 'information' || activeTab === 'address') && (
           <div className="bg-gray-50 px-8 py-4 border-t border-gray-200 flex items-center justify-end space-x-4">
             <button
@@ -453,7 +436,7 @@ export default function OrganizationSettingsPage() {
               disabled={isSaving}
               className="px-6 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
-              Annuler
+              {t('actions.cancel')}
             </button>
             <button
               type="button"
@@ -464,10 +447,10 @@ export default function OrganizationSettingsPage() {
               {isSaving ? (
                 <>
                   <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-                  Enregistrement...
+                  {t('actions.saving')}
                 </>
               ) : (
-                'Enregistrer'
+                t('actions.save')
               )}
             </button>
           </div>
diff --git a/apps/frontend/app/dashboard/settings/subscription/page.tsx b/apps/frontend/app/[locale]/dashboard/settings/subscription/page.tsx
similarity index 68%
rename from apps/frontend/app/dashboard/settings/subscription/page.tsx
rename to apps/frontend/app/[locale]/dashboard/settings/subscription/page.tsx
index b8f0c1f..69c58d6 100644
--- a/apps/frontend/app/dashboard/settings/subscription/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/settings/subscription/page.tsx
@@ -1,20 +1,16 @@
-/**
- * Subscription Management Page
- *
- * Redirects to Organization settings with Subscription tab
- */
-
 'use client';
 
 import { useEffect } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
+import { useRouter } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
 
 export default function SubscriptionPage() {
+  const t = useTranslations('dashboard.subscriptionRedirect');
   const router = useRouter();
   const searchParams = useSearchParams();
 
   useEffect(() => {
-    // Preserve any query parameters (success, canceled) from Stripe redirects
     const params = searchParams.toString();
     const redirectUrl = `/dashboard/settings/organization${params ? `?${params}` : ''}`;
     router.replace(redirectUrl);
@@ -24,7 +20,7 @@ export default function SubscriptionPage() {
     <div className="flex items-center justify-center min-h-screen">
       <div className="text-center">
         <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-4 border-blue-600 mb-4"></div>
-        <p className="text-gray-600">Redirection...</p>
+        <p className="text-gray-600">{t('loading')}</p>
       </div>
     </div>
   );
diff --git a/apps/frontend/app/dashboard/settings/users/page.tsx b/apps/frontend/app/[locale]/dashboard/settings/users/page.tsx
similarity index 82%
rename from apps/frontend/app/dashboard/settings/users/page.tsx
rename to apps/frontend/app/[locale]/dashboard/settings/users/page.tsx
index a7ab6fb..ff8d4cc 100644
--- a/apps/frontend/app/dashboard/settings/users/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/settings/users/page.tsx
@@ -1,18 +1,12 @@
-/**
- * User Management Page
- *
- * Manage organization users, roles, and invitations
- */
-
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslations, useLocale } from 'next-intl';
 import { listUsers, updateUser, deleteUser, canInviteUser } from '@/lib/api';
 import { createInvitation, listInvitations, cancelInvitation } from '@/lib/api/invitations';
 import { useAuth } from '@/lib/context/auth-context';
-import Link from 'next/link';
+import { Link, useRouter } from '@/i18n/navigation';
 import ExportButton from '@/components/ExportButton';
 import { PageHeader } from '@/components/ui/PageHeader';
 
@@ -27,13 +21,18 @@ function Pagination({
   total: number;
   onPage: (p: number) => void;
 }) {
+  const t = useTranslations('dashboard.usersManagement.pagination');
   const totalPages = Math.ceil(total / PAGE_SIZE);
   if (totalPages <= 1) return null;
 
   return (
     <div className="px-6 py-3 flex items-center justify-between border-t border-gray-200">
       <p className="text-sm text-gray-500">
-        {Math.min((page - 1) * PAGE_SIZE + 1, total)}–{Math.min(page * PAGE_SIZE, total)} sur {total}
+        {t('info', {
+          from: Math.min((page - 1) * PAGE_SIZE + 1, total),
+          to: Math.min(page * PAGE_SIZE, total),
+          total,
+        })}
       </p>
       <div className="flex items-center gap-1">
         <button
@@ -69,6 +68,9 @@ function Pagination({
 }
 
 export default function UsersManagementPage() {
+  const t = useTranslations('dashboard.usersManagement');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
   const router = useRouter();
   const queryClient = useQueryClient();
   const { user: currentUser } = useAuth();
@@ -107,14 +109,14 @@ export default function UsersManagementPage() {
       queryClient.invalidateQueries({ queryKey: ['users'] });
       queryClient.invalidateQueries({ queryKey: ['canInvite'] });
       queryClient.invalidateQueries({ queryKey: ['invitations'] });
-      setSuccess("Invitation envoyée avec succès ! L'utilisateur recevra un email avec un lien d'inscription.");
+      setSuccess(t('messages.inviteSuccess'));
       setShowInviteModal(false);
       setInviteForm({ email: '', firstName: '', lastName: '', role: 'USER' });
       setInvitationsPage(1);
       setTimeout(() => setSuccess(''), 5000);
     },
     onError: (err: any) => {
-      setError(err.response?.data?.message || "Échec de l'envoi de l'invitation");
+      setError(err.response?.data?.message || t('messages.inviteError'));
       setTimeout(() => setError(''), 5000);
     },
   });
@@ -124,11 +126,11 @@ export default function UsersManagementPage() {
       updateUser(id, { role }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['users'] });
-      setSuccess('Rôle mis à jour avec succès');
+      setSuccess(t('messages.roleSuccess'));
       setTimeout(() => setSuccess(''), 3000);
     },
     onError: (err: any) => {
-      setError(err.response?.data?.message || 'Échec de la mise à jour du rôle');
+      setError(err.response?.data?.message || t('messages.roleError'));
       setTimeout(() => setError(''), 5000);
     },
   });
@@ -139,11 +141,11 @@ export default function UsersManagementPage() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['users'] });
       queryClient.invalidateQueries({ queryKey: ['canInvite'] });
-      setSuccess("Statut de l'utilisateur mis à jour avec succès");
+      setSuccess(t('messages.statusSuccess'));
       setTimeout(() => setSuccess(''), 3000);
     },
     onError: (err: any) => {
-      setError(err.response?.data?.message || 'Échec de la mise à jour du statut');
+      setError(err.response?.data?.message || t('messages.statusError'));
       setTimeout(() => setError(''), 5000);
     },
   });
@@ -153,11 +155,11 @@ export default function UsersManagementPage() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['users'] });
       queryClient.invalidateQueries({ queryKey: ['canInvite'] });
-      setSuccess('Utilisateur supprimé avec succès');
+      setSuccess(t('messages.deleteSuccess'));
       setTimeout(() => setSuccess(''), 3000);
     },
     onError: (err: any) => {
-      setError(err.response?.data?.message || "Échec de la suppression de l'utilisateur");
+      setError(err.response?.data?.message || t('messages.deleteError'));
       setTimeout(() => setError(''), 5000);
     },
   });
@@ -167,11 +169,11 @@ export default function UsersManagementPage() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['invitations'] });
       queryClient.invalidateQueries({ queryKey: ['canInvite'] });
-      setSuccess('Invitation annulée avec succès');
+      setSuccess(t('messages.cancelInviteSuccess'));
       setTimeout(() => setSuccess(''), 3000);
     },
     onError: (err: any) => {
-      setError(err.response?.data?.message || "Échec de l'annulation de l'invitation");
+      setError(err.response?.data?.message || t('messages.cancelInviteError'));
       setTimeout(() => setError(''), 5000);
     },
   });
@@ -201,19 +203,20 @@ export default function UsersManagementPage() {
   };
 
   const handleToggleActive = (userId: string, isActive: boolean) => {
-    if (window.confirm(`Êtes-vous sûr de vouloir ${isActive ? 'désactiver' : 'activer'} cet utilisateur ?`)) {
+    const action = isActive ? t('confirms.toggleDeactivate') : t('confirms.toggleActivate');
+    if (window.confirm(t('confirms.toggleActive', { action }))) {
       toggleActiveMutation.mutate({ id: userId, isActive });
     }
   };
 
   const handleDelete = (userId: string) => {
-    if (window.confirm('Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible.')) {
+    if (window.confirm(t('confirms.delete'))) {
       deleteMutation.mutate(userId);
     }
   };
 
   const handleCancelInvitation = (invId: string, name: string) => {
-    if (window.confirm(`Annuler l'invitation envoyée à ${name} ?`)) {
+    if (window.confirm(t('confirms.cancelInvite', { name }))) {
       cancelInvitationMutation.mutate(invId);
     }
   };
@@ -236,7 +239,6 @@ export default function UsersManagementPage() {
 
   return (
     <div className="space-y-6">
-      {/* License Warning */}
       {licenseStatus && !licenseStatus.canInvite && (
         <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
           <div className="flex items-start">
@@ -246,14 +248,13 @@ export default function UsersManagementPage() {
               </svg>
             </div>
             <div className="ml-3 flex-1">
-              <h3 className="text-sm font-medium text-amber-800">Limite de licences atteinte</h3>
+              <h3 className="text-sm font-medium text-amber-800">{t('license.limitTitle')}</h3>
               <p className="mt-1 text-sm text-amber-700">
-                Votre organisation a utilisé toutes les licences disponibles ({licenseStatus.usedLicenses}/{licenseStatus.maxLicenses}).
-                Mettez à niveau votre abonnement pour inviter plus d'utilisateurs.
+                {t('license.limitMessage', { used: licenseStatus.usedLicenses, max: licenseStatus.maxLicenses })}
               </p>
               <div className="mt-3">
                 <Link href="/dashboard/settings/subscription" className="text-sm font-medium text-amber-800 hover:text-amber-900 underline">
-                  Mettre à niveau l'abonnement
+                  {t('license.upgradeLink')}
                 </Link>
               </div>
             </div>
@@ -261,7 +262,6 @@ export default function UsersManagementPage() {
         </div>
       )}
 
-      {/* License Usage Info */}
       {licenseStatus && licenseStatus.canInvite && licenseStatus.availableLicenses <= 2 && licenseStatus.maxLicenses !== -1 && (
         <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
           <div className="flex items-center justify-between">
@@ -270,31 +270,35 @@ export default function UsersManagementPage() {
                 <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
               </svg>
               <span className="text-sm text-blue-800">
-                {licenseStatus.availableLicenses} licence{licenseStatus.availableLicenses !== 1 ? 's' : ''} restante{licenseStatus.availableLicenses !== 1 ? 's' : ''} ({licenseStatus.usedLicenses}/{licenseStatus.maxLicenses} utilisées)
+                {t('license.remaining', {
+                  count: licenseStatus.availableLicenses,
+                  used: licenseStatus.usedLicenses,
+                  max: licenseStatus.maxLicenses,
+                })}
               </span>
             </div>
             <Link href="/dashboard/settings/subscription" className="text-sm font-medium text-blue-600 hover:text-blue-800">
-              Gérer l'abonnement
+              {t('license.manageLink')}
             </Link>
           </div>
         </div>
       )}
 
       <PageHeader
-        title="Gestion des Utilisateurs"
-        description="Gérez les membres de l'équipe et leurs permissions"
+        title={t('header.title')}
+        description={t('header.subtitle')}
         actions={
           <>
             <ExportButton
               data={allUsers}
-              filename="utilisateurs"
+              filename={t('exportFilename')}
               columns={[
-                { key: 'firstName', label: 'Prénom' },
-                { key: 'lastName', label: 'Nom' },
-                { key: 'email', label: 'Email' },
-                { key: 'role', label: 'Rôle', format: (v) => ({ ADMIN: 'Administrateur', MANAGER: 'Manager', USER: 'Utilisateur', VIEWER: 'Lecteur' }[v] || v) },
-                { key: 'isActive', label: 'Statut', format: (v) => v ? 'Actif' : 'Inactif' },
-                { key: 'createdAt', label: 'Date de création', format: (v) => v ? new Date(v).toLocaleDateString('fr-FR') : '' },
+                { key: 'firstName', label: t('export.firstName') },
+                { key: 'lastName', label: t('export.lastName') },
+                { key: 'email', label: t('export.email') },
+                { key: 'role', label: t('export.role'), format: (v) => t(`modal.rolesExport.${v}` as any) || v },
+                { key: 'isActive', label: t('export.status'), format: (v) => v ? t('users.active') : t('users.inactive') },
+                { key: 'createdAt', label: t('export.createdAt'), format: (v) => v ? new Date(v).toLocaleDateString(dateLocale) : '' },
               ]}
             />
             {licenseStatus?.canInvite ? (
@@ -303,8 +307,8 @@ export default function UsersManagementPage() {
                 className="inline-flex items-center px-3 sm:px-4 py-2 text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
               >
                 <span className="mr-1.5">+</span>
-                <span className="hidden sm:inline">Inviter un utilisateur</span>
-                <span className="sm:hidden">Inviter</span>
+                <span className="hidden sm:inline">{t('actions.invite')}</span>
+                <span className="sm:hidden">{t('actions.inviteShort')}</span>
               </button>
             ) : (
               <Link
@@ -312,8 +316,8 @@ export default function UsersManagementPage() {
                 className="inline-flex items-center px-3 sm:px-4 py-2 text-sm font-medium rounded-md text-white bg-amber-600 hover:bg-amber-700"
               >
                 <span className="mr-1.5">+</span>
-                <span className="hidden sm:inline">Mettre à niveau</span>
-                <span className="sm:hidden">Upgrade</span>
+                <span className="hidden sm:inline">{t('actions.upgrade')}</span>
+                <span className="sm:hidden">{t('actions.upgradeShort')}</span>
               </Link>
             )}
           </>
@@ -332,18 +336,17 @@ export default function UsersManagementPage() {
         </div>
       )}
 
-      {/* Users Table */}
       <div className="bg-white rounded-lg shadow">
         <div className="px-6 py-4 border-b border-gray-200">
-          <h2 className="text-lg font-medium text-gray-900">Utilisateurs</h2>
+          <h2 className="text-lg font-medium text-gray-900">{t('users.title')}</h2>
           {allUsers.length > 0 && (
-            <p className="text-sm text-gray-500 mt-1">{allUsers.length} membre{allUsers.length !== 1 ? 's' : ''}</p>
+            <p className="text-sm text-gray-500 mt-1">{t('users.membersCount', { count: allUsers.length })}</p>
           )}
         </div>
         {isLoading ? (
           <div className="px-6 py-12 text-center text-gray-500">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-            Chargement des utilisateurs...
+            {t('loading')}
           </div>
         ) : pagedUsers.length > 0 ? (
           <>
@@ -351,12 +354,12 @@ export default function UsersManagementPage() {
               <table className="min-w-full divide-y divide-gray-200">
                 <thead className="bg-gray-50">
                   <tr>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Utilisateur</th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rôle</th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date de création</th>
-                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('users.table.user')}</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('users.table.email')}</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('users.table.role')}</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('users.table.status')}</th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('users.table.createdAt')}</th>
+                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{t('users.table.actions')}</th>
                   </tr>
                 </thead>
                 <tbody className="bg-white divide-y divide-gray-200">
@@ -387,19 +390,19 @@ export default function UsersManagementPage() {
                             user.id === currentUser?.id
                           }
                         >
-                          {currentUser?.role === 'ADMIN' && <option value="ADMIN">Admin</option>}
-                          <option value="MANAGER">Manager</option>
-                          <option value="USER">User</option>
-                          <option value="VIEWER">Viewer</option>
+                          {currentUser?.role === 'ADMIN' && <option value="ADMIN">{t('modal.roles.ADMIN')}</option>}
+                          <option value="MANAGER">{t('modal.roles.MANAGER')}</option>
+                          <option value="USER">{t('modal.roles.USER')}</option>
+                          <option value="VIEWER">{t('modal.roles.VIEWER')}</option>
                         </select>
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap">
                         <span className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${user.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
-                          {user.isActive ? 'Actif' : 'Inactif'}
+                          {user.isActive ? t('users.active') : t('users.inactive')}
                         </span>
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                        {new Date(user.createdAt).toLocaleDateString('fr-FR')}
+                        {new Date(user.createdAt).toLocaleDateString(dateLocale)}
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                         <button
@@ -432,18 +435,18 @@ export default function UsersManagementPage() {
             <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
             </svg>
-            <h3 className="mt-2 text-sm font-medium text-gray-900">Aucun utilisateur</h3>
-            <p className="mt-1 text-sm text-gray-500">Commencez par inviter un membre de l'équipe</p>
+            <h3 className="mt-2 text-sm font-medium text-gray-900">{t('users.empty.title')}</h3>
+            <p className="mt-1 text-sm text-gray-500">{t('users.empty.description')}</p>
             <div className="mt-6">
               {licenseStatus?.canInvite ? (
                 <button onClick={() => setShowInviteModal(true)} className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                   <span className="mr-2">+</span>
-                  Inviter un utilisateur
+                  {t('actions.invite')}
                 </button>
               ) : (
                 <Link href="/dashboard/settings/subscription" className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-amber-600 hover:bg-amber-700">
                   <span className="mr-2">+</span>
-                  Mettre à niveau
+                  {t('actions.upgrade')}
                 </Link>
               )}
             </div>
@@ -451,25 +454,24 @@ export default function UsersManagementPage() {
         )}
       </div>
 
-      {/* Pending Invitations */}
       {allPending.length > 0 && (
         <div className="bg-white rounded-lg shadow">
           <div className="px-6 py-4 border-b border-gray-200">
-            <h2 className="text-lg font-medium text-gray-900">Invitations en attente</h2>
+            <h2 className="text-lg font-medium text-gray-900">{t('invitations.title')}</h2>
             <p className="text-sm text-gray-500 mt-1">
-              Utilisateurs invités mais n'ayant pas encore créé leur compte — {allPending.length} invitation{allPending.length !== 1 ? 's' : ''}
+              {t('invitations.subtitle', { count: allPending.length })}
             </p>
           </div>
           <div className="overflow-x-auto">
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
                 <tr>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Utilisateur</th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rôle</th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expire le</th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
-                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('invitations.table.user')}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('invitations.table.email')}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('invitations.table.role')}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('invitations.table.expires')}</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('invitations.table.status')}</th>
+                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{t('invitations.table.actions')}</th>
                 </tr>
               </thead>
               <tbody className="bg-white divide-y divide-gray-200">
@@ -494,11 +496,11 @@ export default function UsersManagementPage() {
                         </span>
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                        {new Date(inv.expiresAt).toLocaleDateString('fr-FR')}
+                        {new Date(inv.expiresAt).toLocaleDateString(dateLocale)}
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap">
                         <span className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${isExpired ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'}`}>
-                          {isExpired ? 'Expirée' : 'En attente'}
+                          {isExpired ? t('invitations.expired') : t('invitations.pending')}
                         </span>
                       </td>
                       <td className="px-6 py-4 whitespace-nowrap text-right">
@@ -510,7 +512,7 @@ export default function UsersManagementPage() {
                           <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                           </svg>
-                          Annuler
+                          {t('invitations.cancel')}
                         </button>
                       </td>
                     </tr>
@@ -523,7 +525,6 @@ export default function UsersManagementPage() {
         </div>
       )}
 
-      {/* Actions Menu Modal */}
       {openMenuId && menuPosition && (
         <>
           <div
@@ -550,14 +551,14 @@ export default function UsersManagementPage() {
                     <svg className="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                     </svg>
-                    <span className="text-sm font-medium text-gray-700">Désactiver</span>
+                    <span className="text-sm font-medium text-gray-700">{t('users.actions.deactivate')}</span>
                   </>
                 ) : (
                   <>
                     <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
-                    <span className="text-sm font-medium text-gray-700">Activer</span>
+                    <span className="text-sm font-medium text-gray-700">{t('users.actions.activate')}</span>
                   </>
                 )}
               </button>
@@ -573,14 +574,13 @@ export default function UsersManagementPage() {
                 <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                 </svg>
-                <span className="text-sm font-medium text-red-600">Supprimer</span>
+                <span className="text-sm font-medium text-red-600">{t('users.actions.delete')}</span>
               </button>
             </div>
           </div>
         </>
       )}
 
-      {/* Invite Modal */}
       {showInviteModal && (
         <div className="fixed inset-0 z-50 overflow-y-auto">
           <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
@@ -588,7 +588,7 @@ export default function UsersManagementPage() {
             <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
               <div>
                 <div className="flex items-center justify-between mb-4">
-                  <h3 className="text-lg font-medium text-gray-900">Inviter un utilisateur</h3>
+                  <h3 className="text-lg font-medium text-gray-900">{t('modal.title')}</h3>
                   <button onClick={() => setShowInviteModal(false)} className="text-gray-400 hover:text-gray-500">
                     <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -598,7 +598,7 @@ export default function UsersManagementPage() {
                 <form onSubmit={handleInvite} className="space-y-4">
                   <div className="grid grid-cols-2 gap-4">
                     <div>
-                      <label className="block text-sm font-medium text-gray-700">Prénom *</label>
+                      <label className="block text-sm font-medium text-gray-700">{t('modal.firstName')} *</label>
                       <input
                         type="text"
                         required
@@ -608,7 +608,7 @@ export default function UsersManagementPage() {
                       />
                     </div>
                     <div>
-                      <label className="block text-sm font-medium text-gray-700">Nom *</label>
+                      <label className="block text-sm font-medium text-gray-700">{t('modal.lastName')} *</label>
                       <input
                         type="text"
                         required
@@ -619,7 +619,7 @@ export default function UsersManagementPage() {
                     </div>
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700">Adresse email *</label>
+                    <label className="block text-sm font-medium text-gray-700">{t('modal.email')} *</label>
                     <input
                       type="email"
                       required
@@ -629,15 +629,15 @@ export default function UsersManagementPage() {
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700">Rôle *</label>
+                    <label className="block text-sm font-medium text-gray-700">{t('modal.role')} *</label>
                     <select
                       value={inviteForm.role}
                       onChange={e => setInviteForm({ ...inviteForm, role: e.target.value as any })}
                       className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-3 py-2 border"
                     >
-                      <option value="USER">Utilisateur</option>
-                      <option value="MANAGER">Manager</option>
-                      <option value="VIEWER">Lecteur</option>
+                      <option value="USER">{t('modal.roles.USER')}</option>
+                      <option value="MANAGER">{t('modal.roles.MANAGER')}</option>
+                      <option value="VIEWER">{t('modal.roles.VIEWER')}</option>
                     </select>
                   </div>
                   <div className="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
@@ -646,14 +646,14 @@ export default function UsersManagementPage() {
                       disabled={inviteMutation.isPending}
                       className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 sm:col-start-2 sm:text-sm disabled:bg-gray-400"
                     >
-                      {inviteMutation.isPending ? 'Envoi en cours...' : "Envoyer l'invitation"}
+                      {inviteMutation.isPending ? t('modal.submitting') : t('modal.submit')}
                     </button>
                     <button
                       type="button"
                       onClick={() => setShowInviteModal(false)}
                       className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:col-start-1 sm:text-sm"
                     >
-                      Annuler
+                      {t('modal.cancel')}
                     </button>
                   </div>
                 </form>
diff --git a/apps/frontend/app/dashboard/track-trace/page.tsx b/apps/frontend/app/[locale]/dashboard/track-trace/page.tsx
similarity index 69%
rename from apps/frontend/app/dashboard/track-trace/page.tsx
rename to apps/frontend/app/[locale]/dashboard/track-trace/page.tsx
index 4e22cd9..4b88f24 100644
--- a/apps/frontend/app/dashboard/track-trace/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/track-trace/page.tsx
@@ -1,13 +1,7 @@
-/**
- * Track & Trace Page
- *
- * Allows users to track their shipments by entering tracking numbers
- * and selecting the carrier. Includes search history and vessel position map.
- */
-
 'use client';
 
 import { useState, useEffect } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
@@ -18,7 +12,6 @@ import {
   ClipboardList,
   Lightbulb,
   History,
-  MapPin,
   X,
   Clock,
   Ship,
@@ -29,7 +22,6 @@ import {
   Anchor,
 } from 'lucide-react';
 
-// Search history item type
 interface SearchHistoryItem {
   id: string;
   trackingNumber: string;
@@ -38,114 +30,26 @@ interface SearchHistoryItem {
   timestamp: Date;
 }
 
-// Carrier tracking URLs with official brand colors
+type CarrierDescKey = 'containerOrBl' | 'containerBlOrBooking' | 'containerOnly';
+
 const carriers = [
-  {
-    id: 'maersk',
-    name: 'Maersk',
-    color: '#00243D', // Maersk dark blue
-    textColor: 'text-white',
-    trackingUrl: 'https://www.maersk.com/tracking/',
-    placeholder: 'Ex: MSKU1234567',
-    description: 'N° conteneur ou B/L',
-    logo: '/assets/logos/carriers/maersk.svg',
-  },
-  {
-    id: 'msc',
-    name: 'MSC',
-    color: '#002B5C', // MSC blue
-    textColor: 'text-white',
-    trackingUrl: 'https://www.msc.com/track-a-shipment?query=',
-    placeholder: 'Ex: MSCU1234567',
-    description: 'N° conteneur, B/L ou réservation',
-    logo: '/assets/logos/carriers/msc.svg',
-  },
-  {
-    id: 'cma-cgm',
-    name: 'CMA CGM',
-    color: '#E30613', // CMA CGM red
-    textColor: 'text-white',
-    trackingUrl: 'https://www.cma-cgm.com/ebusiness/tracking/search?SearchBy=Container&Reference=',
-    placeholder: 'Ex: CMAU1234567',
-    description: 'N° conteneur ou B/L',
-    logo: '/assets/logos/carriers/cmacgm.svg',
-  },
-  {
-    id: 'hapag-lloyd',
-    name: 'Hapag-Lloyd',
-    color: '#FF6600', // Hapag orange
-    textColor: 'text-white',
-    trackingUrl: 'https://www.hapag-lloyd.com/en/online-business/track/track-by-container-solution.html?container=',
-    placeholder: 'Ex: HLCU1234567',
-    description: 'N° conteneur',
-    logo: '/assets/logos/carriers/hapag.svg',
-  },
-  {
-    id: 'cosco',
-    name: 'COSCO',
-    color: '#003A70', // COSCO blue
-    textColor: 'text-white',
-    trackingUrl: 'https://elines.coscoshipping.com/ebusiness/cargoTracking?trackingNumber=',
-    placeholder: 'Ex: COSU1234567',
-    description: 'N° conteneur ou B/L',
-    logo: '/assets/logos/carriers/cosco.svg',
-  },
-  {
-    id: 'one',
-    name: 'ONE',
-    color: '#FF00FF', // ONE magenta
-    textColor: 'text-white',
-    trackingUrl: 'https://ecomm.one-line.com/one-ecom/manage-shipment/cargo-tracking?trkNoParam=',
-    placeholder: 'Ex: ONEU1234567',
-    description: 'N° conteneur ou B/L',
-    logo: '/assets/logos/carriers/one.svg',
-  },
-  {
-    id: 'evergreen',
-    name: 'Evergreen',
-    color: '#006633', // Evergreen green
-    textColor: 'text-white',
-    trackingUrl: 'https://www.shipmentlink.com/servlet/TDB1_CargoTracking.do?BL=',
-    placeholder: 'Ex: EGHU1234567',
-    description: 'N° conteneur ou B/L',
-    logo: '/assets/logos/carriers/evergreen.svg',
-  },
-  {
-    id: 'yangming',
-    name: 'Yang Ming',
-    color: '#FFD700', // Yang Ming yellow
-    textColor: 'text-gray-900',
-    trackingUrl: 'https://www.yangming.com/e-service/Track_Trace/track_trace_cargo_tracking.aspx?rdolType=CT&str=',
-    placeholder: 'Ex: YMLU1234567',
-    description: 'N° conteneur',
-    logo: '/assets/logos/carriers/yangming.svg',
-  },
-  {
-    id: 'zim',
-    name: 'ZIM',
-    color: '#1E3A8A', // ZIM blue
-    textColor: 'text-white',
-    trackingUrl: 'https://www.zim.com/tools/track-a-shipment?consnumber=',
-    placeholder: 'Ex: ZIMU1234567',
-    description: 'N° conteneur ou B/L',
-    logo: '/assets/logos/carriers/zim.svg',
-  },
-  {
-    id: 'hmm',
-    name: 'HMM',
-    color: '#E65100', // HMM orange
-    textColor: 'text-white',
-    trackingUrl: 'https://www.hmm21.com/cms/business/ebiz/trackTrace/trackTrace/index.jsp?type=1&number=',
-    placeholder: 'Ex: HDMU1234567',
-    description: 'N° conteneur ou B/L',
-    logo: '/assets/logos/carriers/hmm.svg',
-  },
+  { id: 'maersk', name: 'Maersk', color: '#00243D', textColor: 'text-white', trackingUrl: 'https://www.maersk.com/tracking/', placeholder: 'Ex: MSKU1234567', descKey: 'containerOrBl' as CarrierDescKey },
+  { id: 'msc', name: 'MSC', color: '#002B5C', textColor: 'text-white', trackingUrl: 'https://www.msc.com/track-a-shipment?query=', placeholder: 'Ex: MSCU1234567', descKey: 'containerBlOrBooking' as CarrierDescKey },
+  { id: 'cma-cgm', name: 'CMA CGM', color: '#E30613', textColor: 'text-white', trackingUrl: 'https://www.cma-cgm.com/ebusiness/tracking/search?SearchBy=Container&Reference=', placeholder: 'Ex: CMAU1234567', descKey: 'containerOrBl' as CarrierDescKey },
+  { id: 'hapag-lloyd', name: 'Hapag-Lloyd', color: '#FF6600', textColor: 'text-white', trackingUrl: 'https://www.hapag-lloyd.com/en/online-business/track/track-by-container-solution.html?container=', placeholder: 'Ex: HLCU1234567', descKey: 'containerOnly' as CarrierDescKey },
+  { id: 'cosco', name: 'COSCO', color: '#003A70', textColor: 'text-white', trackingUrl: 'https://elines.coscoshipping.com/ebusiness/cargoTracking?trackingNumber=', placeholder: 'Ex: COSU1234567', descKey: 'containerOrBl' as CarrierDescKey },
+  { id: 'one', name: 'ONE', color: '#FF00FF', textColor: 'text-white', trackingUrl: 'https://ecomm.one-line.com/one-ecom/manage-shipment/cargo-tracking?trkNoParam=', placeholder: 'Ex: ONEU1234567', descKey: 'containerOrBl' as CarrierDescKey },
+  { id: 'evergreen', name: 'Evergreen', color: '#006633', textColor: 'text-white', trackingUrl: 'https://www.shipmentlink.com/servlet/TDB1_CargoTracking.do?BL=', placeholder: 'Ex: EGHU1234567', descKey: 'containerOrBl' as CarrierDescKey },
+  { id: 'yangming', name: 'Yang Ming', color: '#FFD700', textColor: 'text-gray-900', trackingUrl: 'https://www.yangming.com/e-service/Track_Trace/track_trace_cargo_tracking.aspx?rdolType=CT&str=', placeholder: 'Ex: YMLU1234567', descKey: 'containerOnly' as CarrierDescKey },
+  { id: 'zim', name: 'ZIM', color: '#1E3A8A', textColor: 'text-white', trackingUrl: 'https://www.zim.com/tools/track-a-shipment?consnumber=', placeholder: 'Ex: ZIMU1234567', descKey: 'containerOrBl' as CarrierDescKey },
+  { id: 'hmm', name: 'HMM', color: '#E65100', textColor: 'text-white', trackingUrl: 'https://www.hmm21.com/cms/business/ebiz/trackTrace/trackTrace/index.jsp?type=1&number=', placeholder: 'Ex: HDMU1234567', descKey: 'containerOrBl' as CarrierDescKey },
 ];
 
-// Local storage keys
 const HISTORY_KEY = 'xpeditis_track_history';
 
 export default function TrackTracePage() {
+  const t = useTranslations('dashboard.trackTrace');
+  const locale = useLocale();
   const [trackingNumber, setTrackingNumber] = useState('');
   const [selectedCarrier, setSelectedCarrier] = useState('');
   const [error, setError] = useState('');
@@ -154,7 +58,6 @@ export default function TrackTracePage() {
   const [isMapFullscreen, setIsMapFullscreen] = useState(false);
   const [isMapLoading, setIsMapLoading] = useState(true);
 
-  // Load history from localStorage on mount
   useEffect(() => {
     const savedHistory = localStorage.getItem(HISTORY_KEY);
     if (savedHistory) {
@@ -170,7 +73,6 @@ export default function TrackTracePage() {
     }
   }, []);
 
-  // Save to localStorage
   const saveHistory = (history: SearchHistoryItem[]) => {
     localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
     setSearchHistory(history);
@@ -178,11 +80,11 @@ export default function TrackTracePage() {
 
   const handleTrack = () => {
     if (!trackingNumber.trim()) {
-      setError('Veuillez entrer un numéro de tracking');
+      setError(t('errors.noTrackingNumber'));
       return;
     }
     if (!selectedCarrier) {
-      setError('Veuillez sélectionner un transporteur');
+      setError(t('errors.noCarrier'));
       return;
     }
 
@@ -190,7 +92,6 @@ export default function TrackTracePage() {
 
     const carrier = carriers.find(c => c.id === selectedCarrier);
     if (carrier) {
-      // Add to history
       const newHistoryItem: SearchHistoryItem = {
         id: Date.now().toString(),
         trackingNumber: trackingNumber.trim(),
@@ -199,7 +100,6 @@ export default function TrackTracePage() {
         timestamp: new Date(),
       };
 
-      // Keep only last 10 unique searches
       const updatedHistory = [newHistoryItem, ...searchHistory.filter(
         h => !(h.trackingNumber === newHistoryItem.trackingNumber && h.carrierId === newHistoryItem.carrierId)
       )].slice(0, 10);
@@ -240,21 +140,19 @@ export default function TrackTracePage() {
     const diffHours = Math.floor(diffMs / 3600000);
     const diffDays = Math.floor(diffMs / 86400000);
 
-    if (diffMins < 1) return 'À l\'instant';
-    if (diffMins < 60) return `Il y a ${diffMins}min`;
-    if (diffHours < 24) return `Il y a ${diffHours}h`;
-    if (diffDays < 7) return `Il y a ${diffDays}j`;
-    return date.toLocaleDateString('fr-FR');
+    if (diffMins < 1) return t('timeAgo.justNow');
+    if (diffMins < 60) return t('timeAgo.minutesAgo', { count: diffMins });
+    if (diffHours < 24) return t('timeAgo.hoursAgo', { count: diffHours });
+    if (diffDays < 7) return t('timeAgo.daysAgo', { count: diffDays });
+    return date.toLocaleDateString(locale);
   };
 
   return (
     <div className="space-y-6">
       {/* Header */}
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-gray-900">Suivi des expéditions</h1>
-        <p className="mt-2 text-gray-600">
-          Suivez vos expéditions en temps réel. Entrez votre numéro de tracking et sélectionnez le transporteur.
-        </p>
+        <h1 className="text-3xl font-bold text-gray-900">{t('title')}</h1>
+        <p className="mt-2 text-gray-600">{t('description')}</p>
       </div>
 
       {/* Search Form */}
@@ -262,17 +160,15 @@ export default function TrackTracePage() {
         <CardHeader>
           <CardTitle className="text-xl flex items-center gap-2">
             <Search className="h-5 w-5 text-blue-600" />
-            Rechercher une expédition
+            {t('searchCard.title')}
           </CardTitle>
-          <CardDescription>
-            Entrez votre numéro de conteneur, connaissement (B/L) ou référence de réservation
-          </CardDescription>
+          <CardDescription>{t('searchCard.description')}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
-          {/* Carrier Selection - US 5.1: Professional carrier cards with brand colors */}
+          {/* Carrier Selection */}
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-3">
-              Sélectionnez le transporteur
+              {t('searchCard.selectCarrier')}
             </label>
             <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
               {carriers.map(carrier => (
@@ -289,7 +185,6 @@ export default function TrackTracePage() {
                       : 'border-gray-200 hover:border-gray-300 hover:shadow-md'
                   }`}
                 >
-                  {/* Carrier logo/badge with brand color */}
                   <div
                     className={`w-12 h-12 rounded-lg flex items-center justify-center text-sm font-bold mb-2 shadow-sm ${carrier.textColor}`}
                     style={{ backgroundColor: carrier.color }}
@@ -305,7 +200,7 @@ export default function TrackTracePage() {
           {/* Tracking Number Input */}
           <div>
             <label htmlFor="tracking-number" className="block text-sm font-medium text-gray-700 mb-2">
-              Numéro de tracking
+              {t('searchCard.trackingNumber')}
             </label>
             <div className="flex gap-3">
               <div className="flex-1">
@@ -322,22 +217,23 @@ export default function TrackTracePage() {
                   className="text-lg font-mono border-gray-300 focus:border-blue-500 h-12"
                 />
                 {selectedCarrierData && (
-                  <p className="mt-1 text-xs text-gray-500">{selectedCarrierData.description}</p>
+                  <p className="mt-1 text-xs text-gray-500">
+                    {t(`carriers.${selectedCarrierData.descKey}` as any)}
+                  </p>
                 )}
               </div>
-              {/* US 5.2: Harmonized button color */}
               <Button
                 onClick={handleTrack}
                 size="lg"
                 className="bg-blue-600 hover:bg-blue-700 text-white px-8 h-12 font-semibold shadow-md"
               >
                 <Search className="mr-2 h-5 w-5" />
-                Rechercher
+                {t('searchCard.searchButton')}
               </Button>
             </div>
           </div>
 
-          {/* Action Button - Map */}
+          {/* Map Toggle */}
           <div className="flex flex-wrap gap-3 pt-2">
             <Button
               variant={showMap ? "default" : "outline"}
@@ -351,7 +247,7 @@ export default function TrackTracePage() {
               }
             >
               <Globe className="mr-2 h-4 w-4" />
-              {showMap ? 'Masquer la carte maritime' : 'Afficher la carte maritime'}
+              {showMap ? t('searchCard.hideMap') : t('searchCard.showMap')}
             </Button>
           </div>
 
@@ -364,7 +260,7 @@ export default function TrackTracePage() {
         </CardContent>
       </Card>
 
-      {/* Vessel Position Map - Large immersive display */}
+      {/* Vessel Position Map */}
       {showMap && (
         <div className={`${isMapFullscreen ? 'fixed inset-0 z-50 bg-gray-900' : ''}`}>
           <Card className={`bg-white shadow-xl overflow-hidden ${isMapFullscreen ? 'h-full rounded-none' : ''}`}>
@@ -375,12 +271,11 @@ export default function TrackTracePage() {
                   <Globe className="h-6 w-6" />
                 </div>
                 <div>
-                  <h3 className="text-lg font-semibold">Carte Maritime Mondiale</h3>
-                  <p className="text-blue-100 text-sm">Position des navires en temps réel</p>
+                  <h3 className="text-lg font-semibold">{t('map.title')}</h3>
+                  <p className="text-blue-100 text-sm">{t('map.subtitle')}</p>
                 </div>
               </div>
               <div className="flex items-center gap-2">
-                {/* Fullscreen Toggle */}
                 <Button
                   variant="ghost"
                   size="sm"
@@ -390,16 +285,15 @@ export default function TrackTracePage() {
                   {isMapFullscreen ? (
                     <>
                       <Minimize2 className="h-4 w-4 mr-2" />
-                      Réduire
+                      {t('map.minimize')}
                     </>
                   ) : (
                     <>
                       <Maximize2 className="h-4 w-4 mr-2" />
-                      Plein écran
+                      {t('map.fullscreen')}
                     </>
                   )}
                 </Button>
-                {/* Close Button */}
                 <Button
                   variant="ghost"
                   size="sm"
@@ -416,7 +310,6 @@ export default function TrackTracePage() {
 
             {/* Map Container */}
             <div className={`relative w-full ${isMapFullscreen ? 'h-[calc(100vh-80px)]' : 'h-[70vh] min-h-[500px] max-h-[800px]'}`}>
-              {/* Loading State */}
               {isMapLoading && (
                 <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center z-10">
                   <div className="text-center">
@@ -430,17 +323,16 @@ export default function TrackTracePage() {
                         </div>
                       </div>
                     </div>
-                    <p className="mt-4 text-blue-700 font-medium">Chargement de la carte...</p>
-                    <p className="text-blue-500 text-sm">Connexion à MarineTraffic</p>
+                    <p className="mt-4 text-blue-700 font-medium">{t('map.loading')}</p>
+                    <p className="text-blue-500 text-sm">{t('map.connecting')}</p>
                   </div>
                 </div>
               )}
 
-              {/* MarineTraffic Map */}
               <iframe
                 src="https://www.marinetraffic.com/en/ais/embed/zoom:3/centery:25/centerx:0/maptype:4/shownames:true/mmsi:0/shipid:0/fleet:/fleet_id:/vtypes:/showmenu:true/remember:false"
                 className="w-full h-full border-0"
-                title="Carte maritime en temps réel"
+                title={t('map.iframeTitle')}
                 loading="lazy"
                 onLoad={() => setIsMapLoading(false)}
               />
@@ -449,20 +341,20 @@ export default function TrackTracePage() {
               <div className={`absolute bottom-4 left-4 bg-white/95 backdrop-blur-sm rounded-xl shadow-lg p-4 ${isMapFullscreen ? 'max-w-xs' : 'max-w-[280px]'}`}>
                 <h4 className="font-semibold text-gray-800 text-sm mb-3 flex items-center gap-2">
                   <Anchor className="h-4 w-4 text-blue-600" />
-                  Légende
+                  {t('map.legend')}
                 </h4>
                 <div className="space-y-2 text-xs">
                   <div className="flex items-center gap-2">
                     <div className="w-3 h-3 rounded-full bg-green-500" />
-                    <span className="text-gray-600">Cargos</span>
+                    <span className="text-gray-600">{t('map.cargo')}</span>
                   </div>
                   <div className="flex items-center gap-2">
                     <div className="w-3 h-3 rounded-full bg-red-500" />
-                    <span className="text-gray-600">Tankers</span>
+                    <span className="text-gray-600">{t('map.tankers')}</span>
                   </div>
                   <div className="flex items-center gap-2">
                     <div className="w-3 h-3 rounded-full bg-blue-500" />
-                    <span className="text-gray-600">Passagers</span>
+                    <span className="text-gray-600">{t('map.passengers')}</span>
                   </div>
                   <div className="flex items-center gap-2">
                     <div className="w-3 h-3 rounded-full bg-yellow-500" />
@@ -476,12 +368,12 @@ export default function TrackTracePage() {
                 <div className="flex items-center gap-4 text-sm">
                   <div className="text-center">
                     <p className="text-2xl font-bold text-blue-600">90K+</p>
-                    <p className="text-gray-500 text-xs">Navires actifs</p>
+                    <p className="text-gray-500 text-xs">{t('map.activeVessels')}</p>
                   </div>
                   <div className="w-px h-10 bg-gray-200" />
                   <div className="text-center">
                     <p className="text-2xl font-bold text-green-600">3,500+</p>
-                    <p className="text-gray-500 text-xs">Ports mondiaux</p>
+                    <p className="text-gray-500 text-xs">{t('map.worldPorts')}</p>
                   </div>
                 </div>
               </div>
@@ -491,7 +383,7 @@ export default function TrackTracePage() {
             <div className="px-6 py-3 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
               <p className="text-xs text-gray-500 flex items-center gap-1">
                 <ExternalLink className="h-3 w-3" />
-                Données fournies par MarineTraffic - Mise à jour en temps réel
+                {t('map.dataSource')}
               </p>
               <a
                 href="https://www.marinetraffic.com"
@@ -499,7 +391,7 @@ export default function TrackTracePage() {
                 rel="noopener noreferrer"
                 className="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center gap-1"
               >
-                Ouvrir sur MarineTraffic
+                {t('map.openOnSite')}
                 <ExternalLink className="h-3 w-3" />
               </a>
             </div>
@@ -513,7 +405,7 @@ export default function TrackTracePage() {
           <div className="flex items-center justify-between">
             <CardTitle className="text-lg flex items-center gap-2">
               <History className="h-5 w-5 text-gray-600" />
-              Historique des recherches
+              {t('history.title')}
             </CardTitle>
             {searchHistory.length > 0 && (
               <Button
@@ -522,7 +414,7 @@ export default function TrackTracePage() {
                 onClick={handleClearHistory}
                 className="text-gray-500 hover:text-red-600 text-xs"
               >
-                Effacer tout
+                {t('history.clearAll')}
               </Button>
             )}
           </div>
@@ -531,8 +423,8 @@ export default function TrackTracePage() {
           {searchHistory.length === 0 ? (
             <div className="text-center py-8 text-gray-500">
               <Clock className="h-10 w-10 mx-auto mb-3 text-gray-300" />
-              <p className="text-sm">Aucune recherche récente</p>
-              <p className="text-xs text-gray-400 mt-1">Vos recherches apparaîtront ici</p>
+              <p className="text-sm">{t('history.empty')}</p>
+              <p className="text-xs text-gray-400 mt-1">{t('history.emptyHint')}</p>
             </div>
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
@@ -579,14 +471,11 @@ export default function TrackTracePage() {
           <CardHeader>
             <CardTitle className="text-lg flex items-center gap-2">
               <Package className="h-5 w-5 text-blue-600" />
-              Numéro de conteneur
+              {t('help.containerNumber.title')}
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-gray-600">
-              Format standard: 4 lettres + 7 chiffres (ex: MSKU1234567).
-              Le préfixe indique généralement le propriétaire du conteneur.
-            </p>
+            <p className="text-sm text-gray-600">{t('help.containerNumber.description')}</p>
           </CardContent>
         </Card>
 
@@ -594,14 +483,11 @@ export default function TrackTracePage() {
           <CardHeader>
             <CardTitle className="text-lg flex items-center gap-2">
               <FileText className="h-5 w-5 text-blue-600" />
-              Connaissement (B/L)
+              {t('help.billOfLading.title')}
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-gray-600">
-              Le numéro de connaissement (Bill of Lading) est fourni par le transporteur lors de la confirmation de réservation.
-              Le format varie selon le transporteur.
-            </p>
+            <p className="text-sm text-gray-600">{t('help.billOfLading.description')}</p>
           </CardContent>
         </Card>
 
@@ -609,13 +495,11 @@ export default function TrackTracePage() {
           <CardHeader>
             <CardTitle className="text-lg flex items-center gap-2">
               <ClipboardList className="h-5 w-5 text-blue-600" />
-              Référence de réservation
+              {t('help.bookingRef.title')}
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-gray-600">
-              Numéro de réservation attribué par le transporteur lors de la réservation initiale de l&apos;espace sur le navire.
-            </p>
+            <p className="text-sm text-gray-600">{t('help.bookingRef.description')}</p>
           </CardContent>
         </Card>
       </div>
@@ -625,11 +509,8 @@ export default function TrackTracePage() {
         <div className="flex items-start gap-3">
           <Lightbulb className="h-5 w-5 text-blue-600 flex-shrink-0" />
           <div>
-            <p className="text-sm font-medium text-blue-800">Comment fonctionne le suivi ?</p>
-            <p className="text-sm text-blue-700 mt-1">
-              Cette fonctionnalité vous redirige vers le site officiel du transporteur pour obtenir les informations
-              de suivi les plus récentes. Les données affichées proviennent directement du système du transporteur.
-            </p>
+            <p className="text-sm font-medium text-blue-800">{t('infoBox.title')}</p>
+            <p className="text-sm text-blue-700 mt-1">{t('infoBox.description')}</p>
           </div>
         </div>
       </div>
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/assurance/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/assurance/page.tsx
new file mode 100644
index 0000000..717b4a0
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/assurance/page.tsx
@@ -0,0 +1,107 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardContent } from '@/components/ui/card';
+import { Shield } from 'lucide-react';
+
+export default async function AssurancePage() {
+  const t = await getTranslations('dashboard.wikiPages');
+
+  const clauses = t.raw('assurance.clauses') as Array<{
+    name: string; level: string; includes: string[]; excludes: string[];
+  }>;
+  const extensions = t.raw('assurance.extensions') as Array<{ name: string; description: string }>;
+  const processSteps = t.raw('assurance.processSteps') as string[];
+
+  const clauseColors = ['border-green-500 bg-green-50', 'border-yellow-500 bg-yellow-50', 'border-red-500 bg-red-50'];
+  const clauseBadges = ['bg-green-600', 'bg-yellow-600', 'bg-red-600'];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/dashboard/wiki" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
+          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t('backToWiki')}
+        </Link>
+      </div>
+
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <Shield className="w-10 h-10 text-blue-600" />
+          <h1 className="text-3xl font-bold text-gray-900">{t('assurance.title')}</h1>
+        </div>
+        <p className="mt-3 text-gray-600 max-w-3xl">{t('assurance.description')}</p>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('assurance.iccTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {clauses.map((clause, i) => (
+            <Card key={clause.name} className={`border-2 ${clauseColors[i]}`}>
+              <CardContent className="pt-4">
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-xl font-bold">{clause.name}</h3>
+                  <span className={`px-2 py-1 rounded text-white text-sm ${clauseBadges[i]}`}>{clause.level}</span>
+                </div>
+                <div className="mb-3">
+                  <h4 className="text-sm font-semibold text-green-700 mb-1">{t('includesLabel')}</h4>
+                  <ul className="text-sm space-y-1">
+                    {clause.includes.map((item, j) => (
+                      <li key={j} className="flex items-start gap-1 text-gray-700">
+                        <span className="text-green-500 mt-0.5">✓</span> {item}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div>
+                  <h4 className="text-sm font-semibold text-red-700 mb-1">{t('excludesLabel')}</h4>
+                  <ul className="text-sm space-y-1">
+                    {clause.excludes.map((item, j) => (
+                      <li key={j} className="flex items-start gap-1 text-gray-700">
+                        <span className="text-red-500 mt-0.5">✗</span> {item}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('assurance.extensionsTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {extensions.map((ext) => (
+            <Card key={ext.name} className="bg-white">
+              <CardContent className="pt-4">
+                <h4 className="font-semibold text-gray-900">{ext.name}</h4>
+                <p className="text-sm text-gray-600 mt-1">{ext.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <Card className="mt-8 bg-gray-50">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-gray-900 mb-3">{t('assurance.processTitle')}</h3>
+          <ol className="list-decimal list-inside space-y-2 text-gray-700">
+            {processSteps.map((step, i) => (
+              <li key={i}>{step}</li>
+            ))}
+          </ol>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-4 bg-blue-50 border-blue-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-blue-900 mb-2">{t('assurance.valueTitle')}</h3>
+          <p className="font-mono text-blue-800 bg-white p-3 rounded border text-sm">{t('assurance.valueFormula')}</p>
+          <p className="text-sm text-blue-700 mt-2">{t('assurance.valueNote')}</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/calcul-fret/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/calcul-fret/page.tsx
new file mode 100644
index 0000000..dfc7b94
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/calcul-fret/page.tsx
@@ -0,0 +1,100 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardContent } from '@/components/ui/card';
+import { Calculator } from 'lucide-react';
+
+export default async function CalculFretPage() {
+  const t = await getTranslations('dashboard.wikiPages');
+
+  const surcharges = t.raw('calculFret.surcharges') as Array<{
+    code: string; name: string; description: string; variation: string;
+  }>;
+  const additionalCosts = t.raw('calculFret.additionalCosts') as Array<{
+    name: string; description: string; typical: string;
+  }>;
+  const exampleItems = t.raw('calculFret.exampleItems') as Array<{ item: string; amount: string }>;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/dashboard/wiki" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
+          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t('backToWiki')}
+        </Link>
+      </div>
+
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <Calculator className="w-10 h-10 text-blue-600" />
+          <h1 className="text-3xl font-bold text-gray-900">{t('calculFret.title')}</h1>
+        </div>
+        <p className="mt-3 text-gray-600 max-w-3xl">{t('calculFret.description')}</p>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('calculFret.surchargesTitle')}</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm bg-white rounded-lg border">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="text-left p-3 font-medium">{t('calculFret.colCode')}</th>
+                <th className="text-left p-3 font-medium">{t('calculFret.colName')}</th>
+                <th className="text-left p-3 font-medium">{t('calculFret.colDescription')}</th>
+                <th className="text-left p-3 font-medium">{t('calculFret.colVariation')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {surcharges.map((s) => (
+                <tr key={s.code} className="border-t hover:bg-gray-50">
+                  <td className="p-3 font-mono font-bold text-blue-600">{s.code}</td>
+                  <td className="p-3 font-medium">{s.name}</td>
+                  <td className="p-3 text-gray-600">{s.description}</td>
+                  <td className="p-3 text-gray-500 text-xs">{s.variation}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('calculFret.additionalCostsTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {additionalCosts.map((cost) => (
+            <Card key={cost.name} className="bg-white">
+              <CardContent className="pt-4">
+                <h4 className="font-semibold text-gray-900">{cost.name}</h4>
+                <p className="text-sm text-gray-600 mt-1">{cost.description}</p>
+                <p className="text-xs text-gray-400 mt-2">{t('calculFret.colCost')}: {cost.typical}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <Card className="mt-8 bg-gray-50">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-gray-900 mb-4">{t('calculFret.exampleTitle')}</h3>
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b">
+                <th className="text-left py-2 font-medium">{t('calculFret.colItem')}</th>
+                <th className="text-right py-2 font-medium">{t('calculFret.colAmount')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {exampleItems.map((item, i) => (
+                <tr key={i} className={`border-b last:border-0 ${i === exampleItems.length - 1 ? 'font-bold text-blue-700' : ''}`}>
+                  <td className="py-2">{item.item}</td>
+                  <td className="py-2 text-right font-mono">{item.amount}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/conteneurs/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/conteneurs/page.tsx
new file mode 100644
index 0000000..5769482
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/conteneurs/page.tsx
@@ -0,0 +1,102 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardContent } from '@/components/ui/card';
+import { Package } from 'lucide-react';
+
+export default async function ConteneursPage() {
+  const t = await getTranslations('dashboard.wikiPages');
+
+  const containers = t.raw('conteneurs.containers') as Array<{
+    type: string; description: string; internal: string; door: string; volume: string; payload: string;
+  }>;
+  const specialEquipment = t.raw('conteneurs.specialEquipment') as Array<{ name: string; description: string }>;
+  const selectionGuide = t.raw('conteneurs.selectionGuide') as Array<{ condition: string; recommendation: string }>;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/dashboard/wiki" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
+          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t('backToWiki')}
+        </Link>
+      </div>
+
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <Package className="w-10 h-10 text-blue-600" />
+          <h1 className="text-3xl font-bold text-gray-900">{t('conteneurs.title')}</h1>
+        </div>
+        <p className="mt-3 text-gray-600 max-w-3xl">{t('conteneurs.description')}</p>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('conteneurs.standardTitle')}</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm bg-white rounded-lg border">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="text-left p-3 font-medium">{t('conteneurs.colDimensions')}</th>
+                <th className="text-left p-3 font-medium">{t('conteneurs.colInternal')}</th>
+                <th className="text-left p-3 font-medium">{t('conteneurs.colDoor')}</th>
+                <th className="text-left p-3 font-medium">{t('conteneurs.colVolume')}</th>
+                <th className="text-left p-3 font-medium">{t('conteneurs.colPayload')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {containers.map((c) => (
+                <tr key={c.type} className="border-t hover:bg-gray-50">
+                  <td className="p-3">
+                    <div className="font-semibold text-gray-900">{c.type}</div>
+                    <div className="text-xs text-gray-500">{c.description}</div>
+                  </td>
+                  <td className="p-3 font-mono text-xs">{c.internal}</td>
+                  <td className="p-3 font-mono text-xs">{c.door}</td>
+                  <td className="p-3 font-mono text-xs text-blue-600">{c.volume}</td>
+                  <td className="p-3 font-mono text-xs">{c.payload}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('conteneurs.specialEquipmentTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {specialEquipment.map((eq) => (
+            <Card key={eq.name} className="bg-white">
+              <CardContent className="pt-4">
+                <h4 className="font-semibold text-gray-900">{eq.name}</h4>
+                <p className="text-sm text-gray-600 mt-1">{eq.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <Card className="mt-8 bg-blue-50 border-blue-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-blue-900 mb-4">{t('conteneurs.selectionTitle')}</h3>
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-blue-200">
+                <th className="text-left py-2 font-medium text-blue-800">{t('conteneurs.colCondition')}</th>
+                <th className="text-left py-2 font-medium text-blue-800">{t('conteneurs.colRecommendation')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {selectionGuide.map((row, i) => (
+                <tr key={i} className="border-b border-blue-100 last:border-0">
+                  <td className="py-2 text-blue-700">{row.condition}</td>
+                  <td className="py-2 font-medium text-blue-900">{row.recommendation}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/documents-transport/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/documents-transport/page.tsx
new file mode 100644
index 0000000..bfab369
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/documents-transport/page.tsx
@@ -0,0 +1,89 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardContent } from '@/components/ui/card';
+import { ClipboardList } from 'lucide-react';
+
+export default async function DocumentsTransportPage() {
+  const t = await getTranslations('dashboard.wikiPages');
+
+  const documents = t.raw('documentsTransport.documents') as Array<{
+    name: string; type: string; description: string; types: string[];
+  }>;
+  const additionalDocs = t.raw('documentsTransport.additionalDocs') as Array<{ name: string; description: string }>;
+  const blFunctions = t.raw('documentsTransport.blFunctions') as Array<{ title: string; description: string }>;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/dashboard/wiki" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
+          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t('backToWiki')}
+        </Link>
+      </div>
+
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <ClipboardList className="w-10 h-10 text-blue-600" />
+          <h1 className="text-3xl font-bold text-gray-900">{t('documentsTransport.title')}</h1>
+        </div>
+        <p className="mt-3 text-gray-600 max-w-3xl">{t('documentsTransport.description')}</p>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('documentsTransport.mainDocumentsTitle')}</h2>
+        <div className="space-y-4">
+          {documents.map((doc) => (
+            <Card key={doc.name} className="bg-white">
+              <CardContent className="pt-4">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2 mb-1">
+                      <h4 className="font-semibold text-gray-900">{doc.name}</h4>
+                      <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded">{doc.type}</span>
+                    </div>
+                    <p className="text-sm text-gray-600 mb-2">{doc.description}</p>
+                    <div className="flex flex-wrap gap-1">
+                      {doc.types.map((type, j) => (
+                        <span key={j} className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">{type}</span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('documentsTransport.additionalDocsTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {additionalDocs.map((doc) => (
+            <Card key={doc.name} className="bg-white">
+              <CardContent className="pt-4">
+                <h4 className="font-semibold text-gray-900">{doc.name}</h4>
+                <p className="text-sm text-gray-600 mt-1">{doc.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <Card className="mt-8 bg-blue-50 border-blue-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-blue-900 mb-4">{t('documentsTransport.blFocusTitle')}</h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {blFunctions.map((fn) => (
+              <div key={fn.title} className="bg-white p-4 rounded-lg border border-blue-200">
+                <h4 className="font-medium text-blue-800 mb-1">{fn.title}</h4>
+                <p className="text-sm text-gray-600">{fn.description}</p>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/douanes/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/douanes/page.tsx
new file mode 100644
index 0000000..527d208
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/douanes/page.tsx
@@ -0,0 +1,94 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardContent } from '@/components/ui/card';
+import { ShieldCheck } from 'lucide-react';
+
+export default async function DouanesPage() {
+  const t = await getTranslations('dashboard.wikiPages');
+
+  const regimes = t.raw('douanes.regimes') as Array<{ code: string; name: string; description: string }>;
+  const documents = t.raw('douanes.documents') as Array<{
+    name: string; mandatory: boolean; description: string;
+  }>;
+  const duties = t.raw('douanes.duties') as Array<{ type: string; description: string }>;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/dashboard/wiki" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
+          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t('backToWiki')}
+        </Link>
+      </div>
+
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <ShieldCheck className="w-10 h-10 text-blue-600" />
+          <h1 className="text-3xl font-bold text-gray-900">{t('douanes.title')}</h1>
+        </div>
+        <p className="mt-3 text-gray-600 max-w-3xl">{t('douanes.description')}</p>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('douanes.regimesTitle')}</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm bg-white rounded-lg border">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="text-left p-3 font-medium">{t('douanes.colCode')}</th>
+                <th className="text-left p-3 font-medium">{t('douanes.colName')}</th>
+                <th className="text-left p-3 font-medium">{t('douanes.colDescription')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {regimes.map((r) => (
+                <tr key={r.code} className="border-t hover:bg-gray-50">
+                  <td className="p-3 font-mono font-bold text-blue-600">{r.code}</td>
+                  <td className="p-3 font-medium">{r.name}</td>
+                  <td className="p-3 text-gray-600">{r.description}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('douanes.documentsTitle')}</h2>
+        <div className="space-y-3">
+          {documents.map((doc) => (
+            <Card key={doc.name} className="bg-white">
+              <CardContent className="py-3">
+                <div className="flex items-center gap-3">
+                  <span className={`px-2 py-0.5 text-xs rounded font-medium ${doc.mandatory ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-600'}`}>
+                    {doc.mandatory ? t('mandatoryLabel') : t('optionalLabel')}
+                  </span>
+                  <div>
+                    <span className="font-medium text-gray-900">{doc.name}</span>
+                    <span className="text-sm text-gray-500 ml-2">— {doc.description}</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('douanes.dutiesTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {duties.map((d) => (
+            <Card key={d.type} className="bg-white">
+              <CardContent className="pt-4">
+                <h4 className="font-semibold text-gray-900 mb-2">{d.type}</h4>
+                <p className="text-sm text-gray-600">{d.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/imdg/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/imdg/page.tsx
new file mode 100644
index 0000000..cf45b99
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/imdg/page.tsx
@@ -0,0 +1,107 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardContent } from '@/components/ui/card';
+import { AlertTriangle } from 'lucide-react';
+
+export default async function ImdgPage() {
+  const t = await getTranslations('dashboard.wikiPages');
+
+  const classes = t.raw('imdg.classes') as Array<{
+    class: string; name: string; description: string; subdivisions?: string[];
+  }>;
+  const documents = t.raw('imdg.documents') as Array<{ name: string; description: string }>;
+  const packagingGroups = t.raw('imdg.packagingGroups') as Array<{ group: string; description: string }>;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/dashboard/wiki" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
+          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t('backToWiki')}
+        </Link>
+      </div>
+
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <AlertTriangle className="w-10 h-10 text-orange-500" />
+          <h1 className="text-3xl font-bold text-gray-900">{t('imdg.title')}</h1>
+        </div>
+        <p className="mt-3 text-gray-600 max-w-3xl">{t('imdg.description')}</p>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('imdg.classesTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {classes.map((cls) => (
+            <Card key={cls.class} className="bg-white border-orange-200">
+              <CardContent className="pt-4">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="px-2 py-0.5 bg-orange-100 text-orange-800 text-xs font-bold rounded">{cls.class}</span>
+                  <h4 className="font-semibold text-gray-900">{cls.name}</h4>
+                </div>
+                <p className="text-sm text-gray-600">{cls.description}</p>
+                {cls.subdivisions && (
+                  <div className="mt-2">
+                    <p className="text-xs font-medium text-gray-500 mb-1">{t('imdg.subdivisionsLabel')}</p>
+                    <ul className="text-xs text-gray-600 space-y-0.5">
+                      {cls.subdivisions.map((sub, j) => (
+                        <li key={j}>• {sub}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('imdg.documentsTitle')}</h2>
+        <div className="space-y-3">
+          {documents.map((doc) => (
+            <Card key={doc.name} className="bg-white">
+              <CardContent className="py-3">
+                <h4 className="font-semibold text-gray-900">{doc.name}</h4>
+                <p className="text-sm text-gray-600 mt-1">{doc.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('imdg.packagingGroupsTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {packagingGroups.map((pg, i) => {
+            const colors = ['bg-red-50 border-red-200', 'bg-yellow-50 border-yellow-200', 'bg-green-50 border-green-200'];
+            return (
+              <Card key={pg.group} className={`border ${colors[i]}`}>
+                <CardContent className="pt-4">
+                  <h4 className="font-semibold text-gray-900">{pg.group}</h4>
+                  <p className="text-sm text-gray-600 mt-1">{pg.description}</p>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+
+      <Card className="mt-8 bg-blue-50 border-blue-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-blue-900 mb-2">{t('imdg.labelingTitle')}</h3>
+          <p className="text-sm text-blue-800">{t('imdg.labelingContent')}</p>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-4 bg-gray-50">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-gray-900 mb-2">{t('imdg.segregationTitle')}</h3>
+          <p className="text-sm text-gray-700">{t('imdg.segregationContent')}</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/incoterms/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/incoterms/page.tsx
new file mode 100644
index 0000000..a60b78b
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/incoterms/page.tsx
@@ -0,0 +1,112 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardContent } from '@/components/ui/card';
+import { ScrollText } from 'lucide-react';
+
+export default async function IncotermsPage() {
+  const t = await getTranslations('dashboard.wikiPages');
+
+  const list = t.raw('incoterms.list') as Array<{
+    code: string; name: string; description: string; risk: string; transport: string;
+  }>;
+  const categorySections = t.raw('incoterms.categorySections') as Array<{
+    name: string; description: string; terms: string[];
+  }>;
+  const keyPoints = t.raw('incoterms.keyPoints') as string[];
+  const tips = t.raw('incoterms.tips') as string[];
+
+  const categoryColors = ['bg-green-100 text-green-800', 'bg-red-100 text-red-800', 'bg-blue-100 text-blue-800'];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/dashboard/wiki" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
+          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t('backToWiki')}
+        </Link>
+      </div>
+
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <ScrollText className="w-10 h-10 text-blue-600" />
+          <h1 className="text-3xl font-bold text-gray-900">{t('incoterms.title')}</h1>
+        </div>
+        <p className="mt-3 text-gray-600 max-w-3xl">{t('incoterms.description')}</p>
+      </div>
+
+      <Card className="bg-blue-50 border-blue-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-blue-900 mb-3">{t('incoterms.keyPointsTitle')}</h3>
+          <ul className="space-y-2">
+            {keyPoints.map((point, i) => (
+              <li key={i} className="flex items-start gap-2 text-blue-800">
+                <span className="mt-1 w-2 h-2 bg-blue-600 rounded-full flex-shrink-0" />
+                <span className="text-sm">{point}</span>
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+      </Card>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('incoterms.categoriesTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {categorySections.map((cat, i) => (
+            <Card key={i} className="bg-white">
+              <CardContent className="pt-4">
+                <h3 className="font-semibold text-gray-900">{cat.name}</h3>
+                <p className="text-sm text-gray-600 mt-1">{cat.description}</p>
+                <div className="flex flex-wrap gap-1 mt-3">
+                  {cat.terms.map((term) => (
+                    <span key={term} className={`px-2 py-0.5 rounded text-xs font-mono font-bold ${categoryColors[i]}`}>{term}</span>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('incoterms.tableTitle')}</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm bg-white rounded-lg border">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="text-left p-3 font-medium">{t('incoterms.colCode')}</th>
+                <th className="text-left p-3 font-medium">{t('incoterms.colName')}</th>
+                <th className="text-left p-3 font-medium">{t('incoterms.colDescription')}</th>
+                <th className="text-left p-3 font-medium">{t('incoterms.colRisk')}</th>
+                <th className="text-left p-3 font-medium">{t('incoterms.colTransport')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {list.map((item) => (
+                <tr key={item.code} className="border-t hover:bg-gray-50">
+                  <td className="p-3 font-mono font-bold text-blue-600">{item.code}</td>
+                  <td className="p-3 font-medium">{item.name}</td>
+                  <td className="p-3 text-gray-600">{item.description}</td>
+                  <td className="p-3 text-gray-500">{item.risk}</td>
+                  <td className="p-3 text-gray-500">{item.transport}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <Card className="mt-8 bg-amber-50 border-amber-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-amber-900 mb-3">{t('incoterms.tipsTitle')}</h3>
+          <ul className="list-disc list-inside space-y-2 text-amber-800">
+            {tips.map((tip, i) => (
+              <li key={i}>{tip}</li>
+            ))}
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/lcl-vs-fcl/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/lcl-vs-fcl/page.tsx
new file mode 100644
index 0000000..de1635b
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/lcl-vs-fcl/page.tsx
@@ -0,0 +1,117 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardContent } from '@/components/ui/card';
+import { Scale } from 'lucide-react';
+
+export default async function LclVsFclPage() {
+  const t = await getTranslations('dashboard.wikiPages');
+
+  const criteria = t.raw('lclVsFcl.criteria') as Array<{ criterion: string; lcl: string; fcl: string }>;
+  const lclProcess = t.raw('lclVsFcl.lclProcess') as Array<{ step: string; title: string; description: string }>;
+  const chooseLcl = t.raw('lclVsFcl.chooseLcl') as string[];
+  const chooseFcl = t.raw('lclVsFcl.chooseFcl') as string[];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/dashboard/wiki" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
+          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t('backToWiki')}
+        </Link>
+      </div>
+
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <Scale className="w-10 h-10 text-blue-600" />
+          <h1 className="text-3xl font-bold text-gray-900">{t('lclVsFcl.title')}</h1>
+        </div>
+        <p className="mt-3 text-gray-600 max-w-3xl">{t('lclVsFcl.description')}</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Card className="bg-blue-50 border-blue-200">
+          <CardContent className="pt-6">
+            <h3 className="text-lg font-bold text-blue-900 mb-2">{t('lclVsFcl.lclTitle')}</h3>
+            <p className="text-sm text-blue-800">{t('lclVsFcl.lclDescription')}</p>
+          </CardContent>
+        </Card>
+        <Card className="bg-green-50 border-green-200">
+          <CardContent className="pt-6">
+            <h3 className="text-lg font-bold text-green-900 mb-2">{t('lclVsFcl.fclTitle')}</h3>
+            <p className="text-sm text-green-800">{t('lclVsFcl.fclDescription')}</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('lclVsFcl.comparisonTitle')}</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm bg-white rounded-lg border">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="text-left p-3 font-medium">{t('lclVsFcl.colCriterion')}</th>
+                <th className="text-left p-3 font-medium text-blue-600">{t('lclVsFcl.colLcl')}</th>
+                <th className="text-left p-3 font-medium text-green-600">{t('lclVsFcl.colFcl')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {criteria.map((row) => (
+                <tr key={row.criterion} className="border-t hover:bg-gray-50">
+                  <td className="p-3 font-medium text-gray-900">{row.criterion}</td>
+                  <td className="p-3 text-gray-600">{row.lcl}</td>
+                  <td className="p-3 text-gray-600">{row.fcl}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('lclVsFcl.lclProcessTitle')}</h2>
+        <div className="space-y-3">
+          {lclProcess.map((step) => (
+            <div key={step.step} className="flex items-start gap-4 bg-white p-4 rounded-lg border">
+              <div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-sm">
+                {step.step}
+              </div>
+              <div>
+                <h4 className="font-medium text-gray-900">{step.title}</h4>
+                <p className="text-sm text-gray-600">{step.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+        <Card className="bg-blue-50 border-blue-200">
+          <CardContent className="pt-6">
+            <h3 className="font-semibold text-blue-900 mb-3">{t('lclVsFcl.chooseLclTitle')}</h3>
+            <ul className="space-y-2">
+              {chooseLcl.map((item, i) => (
+                <li key={i} className="flex items-start gap-2 text-sm text-blue-800">
+                  <span className="text-blue-500 mt-0.5">✓</span> {item}
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+        <Card className="bg-green-50 border-green-200">
+          <CardContent className="pt-6">
+            <h3 className="font-semibold text-green-900 mb-3">{t('lclVsFcl.chooseFclTitle')}</h3>
+            <ul className="space-y-2">
+              {chooseFcl.map((item, i) => (
+                <li key={i} className="flex items-start gap-2 text-sm text-green-800">
+                  <span className="text-green-500 mt-0.5">✓</span> {item}
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/lettre-credit/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/lettre-credit/page.tsx
new file mode 100644
index 0000000..852cc62
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/lettre-credit/page.tsx
@@ -0,0 +1,136 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardContent } from '@/components/ui/card';
+import { CreditCard } from 'lucide-react';
+
+export default async function LettreCreditPage() {
+  const t = await getTranslations('dashboard.wikiPages');
+
+  const types = t.raw('lettreCredit.types') as Array<{ name: string; description: string }>;
+  const parties = t.raw('lettreCredit.parties') as Array<{ role: string; description: string }>;
+  const documents = t.raw('lettreCredit.documents') as Array<{ name: string; description: string }>;
+  const errors = t.raw('lettreCredit.errors') as string[];
+  const datesItems = t.raw('lettreCredit.datesItems') as Array<{ label: string; description: string }>;
+  const costsItems = t.raw('lettreCredit.costsItems') as Array<{ label: string; description: string }>;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/dashboard/wiki" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
+          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t('backToWiki')}
+        </Link>
+      </div>
+
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <CreditCard className="w-10 h-10 text-blue-600" />
+          <h1 className="text-3xl font-bold text-gray-900">{t('lettreCredit.title')}</h1>
+        </div>
+        <p className="mt-3 text-gray-600 max-w-3xl">{t('lettreCredit.description')}</p>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('lettreCredit.typesTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {types.map((type) => (
+            <Card key={type.name} className="bg-white">
+              <CardContent className="pt-4">
+                <h4 className="font-semibold text-gray-900">{type.name}</h4>
+                <p className="text-sm text-gray-600 mt-1">{type.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('lettreCredit.partiesTitle')}</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm bg-white rounded-lg border">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="text-left p-3 font-medium">{t('lettreCredit.colRole')}</th>
+                <th className="text-left p-3 font-medium">Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              {parties.map((p) => (
+                <tr key={p.role} className="border-t hover:bg-gray-50">
+                  <td className="p-3 font-medium text-blue-700">{p.role}</td>
+                  <td className="p-3 text-gray-600">{p.description}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('lettreCredit.documentsTitle')}</h2>
+        <div className="space-y-3">
+          {documents.map((doc) => (
+            <div key={doc.name} className="flex items-start gap-3 bg-white p-4 rounded-lg border">
+              <span className="text-green-500 mt-0.5 flex-shrink-0">✓</span>
+              <div>
+                <span className="font-medium text-gray-900">{doc.name}</span>
+                <span className="text-sm text-gray-500 ml-2">— {doc.description}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <Card className="mt-8 bg-red-50 border-red-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-red-900 mb-3">{t('lettreCredit.errorsTitle')}</h3>
+          <ul className="space-y-2">
+            {errors.map((err, i) => (
+              <li key={i} className="flex items-start gap-2 text-sm text-red-800">
+                <span className="text-red-500 mt-0.5 flex-shrink-0">⚠</span> {err}
+              </li>
+            ))}
+          </ul>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-4 bg-blue-50 border-blue-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-blue-900 mb-2">{t('lettreCredit.ucp600Title')}</h3>
+          <p className="text-sm text-blue-800">{t('lettreCredit.ucp600Content')}</p>
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+        <Card className="bg-white">
+          <CardContent className="pt-6">
+            <h3 className="font-semibold text-gray-900 mb-3">{t('lettreCredit.datesTitle')}</h3>
+            <div className="space-y-3">
+              {datesItems.map((item) => (
+                <div key={item.label}>
+                  <span className="font-medium text-gray-800 text-sm">{item.label}</span>
+                  <p className="text-xs text-gray-600 mt-0.5">{item.description}</p>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-white">
+          <CardContent className="pt-6">
+            <h3 className="font-semibold text-gray-900 mb-3">{t('lettreCredit.costsTitle')}</h3>
+            <div className="space-y-3">
+              {costsItems.map((item) => (
+                <div key={item.label}>
+                  <span className="font-medium text-gray-800 text-sm">{item.label}</span>
+                  <p className="text-xs text-gray-600 mt-0.5">{item.description}</p>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/page.tsx
new file mode 100644
index 0000000..14cfdfc
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/page.tsx
@@ -0,0 +1,102 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
+import {
+  ScrollText,
+  ClipboardList,
+  Package,
+  Scale,
+  ShieldCheck,
+  Shield,
+  Calculator,
+  Globe,
+  Anchor,
+  AlertTriangle,
+  CreditCard,
+  Timer,
+  type LucideIcon,
+} from 'lucide-react';
+
+type TopicKey = 'incoterms' | 'documents' | 'containers' | 'lclFcl' | 'customs' | 'insurance' | 'freight' | 'ports' | 'vgm' | 'imdg' | 'letterOfCredit' | 'transitTime';
+
+interface WikiTopic {
+  key: TopicKey;
+  icon: LucideIcon;
+  href: string;
+  tags: string[];
+}
+
+const wikiTopics: WikiTopic[] = [
+  { key: 'incoterms', icon: ScrollText, href: '/dashboard/wiki/incoterms', tags: ['FOB', 'CIF', 'EXW', 'DDP'] },
+  { key: 'documents', icon: ClipboardList, href: '/dashboard/wiki/documents-transport', tags: ['B/L', 'Sea Waybill', 'Manifest'] },
+  { key: 'containers', icon: Package, href: '/dashboard/wiki/conteneurs', tags: ["20'", "40'", 'Reefer', 'Open Top'] },
+  { key: 'lclFcl', icon: Scale, href: '/dashboard/wiki/lcl-vs-fcl', tags: ['LCL', 'FCL'] },
+  { key: 'customs', icon: ShieldCheck, href: '/dashboard/wiki/douanes', tags: ['HS Code', 'EUR.1', 'AEO'] },
+  { key: 'insurance', icon: Shield, href: '/dashboard/wiki/assurance', tags: ['ICC A', 'ICC B', 'ICC C'] },
+  { key: 'freight', icon: Calculator, href: '/dashboard/wiki/calcul-fret', tags: ['CBM', 'THC', 'BAF', 'CAF'] },
+  { key: 'ports', icon: Globe, href: '/dashboard/wiki/ports-routes', tags: ['Hub', 'Suez', 'Panama'] },
+  { key: 'vgm', icon: Anchor, href: '/dashboard/wiki/vgm', tags: ['SOLAS', 'VGM'] },
+  { key: 'imdg', icon: AlertTriangle, href: '/dashboard/wiki/imdg', tags: ['IMDG', 'MSDS', 'DG'] },
+  { key: 'letterOfCredit', icon: CreditCard, href: '/dashboard/wiki/lettre-credit', tags: ['L/C', 'SWIFT', 'UCP 600'] },
+  { key: 'transitTime', icon: Timer, href: '/dashboard/wiki/transit-time', tags: ['Cut-off', 'Free time', 'Demurrage'] },
+];
+
+export default async function WikiPage() {
+  const t = await getTranslations('dashboard.wiki');
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900">{t('title')}</h1>
+        <p className="mt-2 text-gray-600">{t('description')}</p>
+      </div>
+
+      {/* Cards Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {wikiTopics.map((topic) => {
+          const IconComponent = topic.icon;
+          return (
+            <Link key={topic.href} href={topic.href} className="block group">
+              <Card className="h-full transition-all duration-200 hover:shadow-lg hover:border-blue-300 bg-white">
+                <CardHeader>
+                  <div className="flex items-start justify-between">
+                    <div className="h-10 w-10 rounded-lg bg-blue-50 flex items-center justify-center">
+                      <IconComponent className="h-5 w-5 text-blue-600" />
+                    </div>
+                  </div>
+                  <CardTitle className="text-xl mt-3 group-hover:text-blue-600 transition-colors">
+                    {t(`topics.${topic.key}.title` as any)}
+                  </CardTitle>
+                  <CardDescription className="text-gray-600">
+                    {t(`topics.${topic.key}.description` as any)}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex flex-wrap gap-2">
+                    {topic.tags.map((tag) => (
+                      <span
+                        key={tag}
+                        className="px-2 py-1 text-xs font-medium bg-blue-50 text-blue-700 rounded-full"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            </Link>
+          );
+        })}
+      </div>
+
+      {/* Footer info */}
+      <div className="mt-8 p-4 bg-blue-50 rounded-lg">
+        <p className="text-sm text-blue-800">
+          <span className="font-semibold">{t('needHelp')} </span>
+          {t('helpText')}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/ports-routes/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/ports-routes/page.tsx
new file mode 100644
index 0000000..3123514
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/ports-routes/page.tsx
@@ -0,0 +1,123 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardContent } from '@/components/ui/card';
+import { Globe } from 'lucide-react';
+
+export default async function PortsRoutesPage() {
+  const t = await getTranslations('dashboard.wikiPages');
+
+  const routes = t.raw('portsRoutes.routes') as Array<{
+    name: string; description: string; via: string; transitTime: string; majorPorts: string[];
+  }>;
+  const passages = t.raw('portsRoutes.passages') as Array<{
+    name: string; location: string; length: string; description: string; keyStat: string;
+  }>;
+  const ports = t.raw('portsRoutes.ports') as Array<{
+    rank: number; port: string; country: string; teu: string;
+  }>;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/dashboard/wiki" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
+          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t('backToWiki')}
+        </Link>
+      </div>
+
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <Globe className="w-10 h-10 text-blue-600" />
+          <h1 className="text-3xl font-bold text-gray-900">{t('portsRoutes.title')}</h1>
+        </div>
+        <p className="mt-3 text-gray-600 max-w-3xl">{t('portsRoutes.description')}</p>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('portsRoutes.majorRoutesTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {routes.map((route) => (
+            <Card key={route.name} className="bg-white">
+              <CardContent className="pt-4">
+                <h4 className="font-semibold text-gray-900 mb-1">{route.name}</h4>
+                <p className="text-sm text-gray-600 mb-3">{route.description}</p>
+                <div className="flex items-center gap-4 text-sm">
+                  <span className="text-gray-500">{t('portsRoutes.colVia')}: <strong className="text-gray-800">{route.via}</strong></span>
+                  <span className="text-gray-500">{t('portsRoutes.colTransit')}: <strong className="text-blue-600">{route.transitTime}</strong></span>
+                </div>
+                <div className="flex flex-wrap gap-1 mt-2">
+                  {route.majorPorts.map((port) => (
+                    <span key={port} className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded">{port}</span>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('portsRoutes.passagesTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {passages.map((p) => (
+            <Card key={p.name} className="bg-white border-blue-200">
+              <CardContent className="pt-4">
+                <div className="flex items-start justify-between mb-2">
+                  <div>
+                    <h4 className="font-semibold text-gray-900">{p.name}</h4>
+                    <p className="text-sm text-gray-500">{p.location} — {t('portsRoutes.colLength')}: {p.length}</p>
+                  </div>
+                  <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded font-medium whitespace-nowrap">{p.keyStat}</span>
+                </div>
+                <p className="text-sm text-gray-600">{p.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('portsRoutes.portsTitle')}</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm bg-white rounded-lg border">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="text-left p-3 font-medium">{t('portsRoutes.colRank')}</th>
+                <th className="text-left p-3 font-medium">{t('portsRoutes.colPort')}</th>
+                <th className="text-left p-3 font-medium">{t('portsRoutes.colCountry')}</th>
+                <th className="text-right p-3 font-medium">{t('portsRoutes.colTeu')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {ports.map((port) => (
+                <tr key={port.rank} className="border-t hover:bg-gray-50">
+                  <td className="p-3 font-bold text-gray-400">#{port.rank}</td>
+                  <td className="p-3 font-medium text-gray-900">{port.port}</td>
+                  <td className="p-3 text-gray-600">{port.country}</td>
+                  <td className="p-3 text-right font-mono text-blue-600">{port.teu}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+        <Card className="bg-blue-50 border-blue-200">
+          <CardContent className="pt-6">
+            <h3 className="font-semibold text-blue-900 mb-2">{t('portsRoutes.hubTitle')}</h3>
+            <p className="text-sm text-blue-800">{t('portsRoutes.hubDescription')}</p>
+          </CardContent>
+        </Card>
+        <Card className="bg-green-50 border-green-200">
+          <CardContent className="pt-6">
+            <h3 className="font-semibold text-green-900 mb-2">{t('portsRoutes.gatewayTitle')}</h3>
+            <p className="text-sm text-green-800">{t('portsRoutes.gatewayDescription')}</p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/transit-time/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/transit-time/page.tsx
new file mode 100644
index 0000000..0fa4881
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/transit-time/page.tsx
@@ -0,0 +1,203 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardContent } from '@/components/ui/card';
+import { Clock } from 'lucide-react';
+
+export default async function TransitTimePage() {
+  const t = await getTranslations('dashboard.wikiPages');
+
+  const timeline = t.raw('transitTime.timeline') as Array<{
+    step: string; description: string; delay: string; responsible: string;
+  }>;
+  const transitTimes = t.raw('transitTime.transitTimes') as Array<{ route: string; time: string; via: string }>;
+  const lateFees = t.raw('transitTime.lateFees') as Array<{
+    name: string; definition: string; rate: string; location: string;
+  }>;
+  const potentialDelays = t.raw('transitTime.potentialDelays') as string[];
+  const seasonalVariations = t.raw('transitTime.seasonalVariations') as string[];
+  const rolloverCauses = t.raw('transitTime.rolloverCauses') as string[];
+  const tips = t.raw('transitTime.tips') as string[];
+
+  const keyTerms = [
+    { key: 'ETD', def: t('transitTime.etd') },
+    { key: 'ETA', def: t('transitTime.eta') },
+    { key: 'Cut-off', def: t('transitTime.cutoff') },
+    { key: 'Free time', def: t('transitTime.freeTime') },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/dashboard/wiki" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
+          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t('backToWiki')}
+        </Link>
+      </div>
+
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <Clock className="w-10 h-10 text-blue-600" />
+          <h1 className="text-3xl font-bold text-gray-900">{t('transitTime.title')}</h1>
+        </div>
+        <p className="mt-3 text-gray-600 max-w-3xl">{t('transitTime.description')}</p>
+      </div>
+
+      <Card className="bg-blue-50 border-blue-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-blue-900 mb-3">{t('transitTime.keyTermsTitle')}</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {keyTerms.map((term) => (
+              <div key={term.key}>
+                <h4 className="font-medium text-blue-800">{term.key}</h4>
+                <p className="text-sm text-blue-700">{term.def}</p>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('transitTime.timelineTitle')}</h2>
+        <div className="space-y-3">
+          {timeline.map((item, index) => (
+            <Card key={index} className={`bg-white ${index === 5 || index === 7 ? 'border-blue-300 border-2' : ''}`}>
+              <CardContent className="py-4">
+                <div className="flex items-start gap-4">
+                  <div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-sm">
+                    {index + 1}
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex flex-wrap items-center gap-2 mb-1">
+                      <h4 className="font-medium text-gray-900">{item.step}</h4>
+                      <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{item.delay}</span>
+                    </div>
+                    <p className="text-sm text-gray-600">{item.description}</p>
+                    <p className="text-xs text-gray-400 mt-1">{t('transitTime.responsibleLabel')} : {item.responsible}</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('transitTime.transitTimesTitle')}</h2>
+        <Card className="bg-white">
+          <CardContent className="pt-6">
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b">
+                    <th className="text-left py-2 font-medium">{t('transitTime.colRoute')}</th>
+                    <th className="text-center py-2 font-medium">{t('transitTime.colTime')}</th>
+                    <th className="text-right py-2 font-medium">{t('transitTime.colVia')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {transitTimes.map((tt) => (
+                    <tr key={tt.route} className="border-b last:border-0 hover:bg-gray-50">
+                      <td className="py-3 text-gray-900">{tt.route}</td>
+                      <td className="py-3 text-center font-mono text-blue-600">{tt.time}</td>
+                      <td className="py-3 text-right text-gray-500">{tt.via}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <p className="text-xs text-gray-500 mt-3">{t('transitTime.transitNote')}</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card className="mt-8 bg-gray-50">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-gray-900 mb-3">{t('transitTime.freeTimeTitle')}</h3>
+          <p className="text-gray-600 mb-4">{t('transitTime.freeTimeDescription')}</p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="bg-white p-4 rounded-lg border">
+              <h4 className="font-medium text-gray-900">{t('transitTime.freeTimeStandard')}</h4>
+              <p className="text-2xl font-bold text-blue-600">{t('transitTime.freeTimeValue')}</p>
+              <p className="text-xs text-gray-500">{t('transitTime.freeTimeNote')}</p>
+            </div>
+            <div className="bg-white p-4 rounded-lg border">
+              <h4 className="font-medium text-gray-900">{t('transitTime.demurrageStart')}</h4>
+              <p className="text-sm text-gray-600">{t('transitTime.demurrageStartDesc')}</p>
+            </div>
+            <div className="bg-white p-4 rounded-lg border">
+              <h4 className="font-medium text-gray-900">{t('transitTime.detentionStart')}</h4>
+              <p className="text-sm text-gray-600">{t('transitTime.detentionStartDesc')}</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('transitTime.lateFeesTitle')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {lateFees.map((fee) => (
+            <Card key={fee.name} className="bg-white border-red-200">
+              <CardContent className="pt-4">
+                <h4 className="text-lg font-semibold text-red-700 mb-1">{fee.name}</h4>
+                <p className="text-gray-600 text-sm mb-2">{fee.definition}</p>
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-500">{t('transitTime.colRate')} :</span>
+                  <span className="font-mono text-red-600">{fee.rate}</span>
+                </div>
+                <div className="flex justify-between text-sm mt-1">
+                  <span className="text-gray-500">{t('transitTime.colLocation')} :</span>
+                  <span className="text-gray-700">{fee.location}</span>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <Card className="mt-8 bg-orange-50 border-orange-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-orange-900 mb-3">{t('transitTime.delayFactorsTitle')}</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <h4 className="font-medium text-orange-800">{t('transitTime.potentialDelaysTitle')}</h4>
+              <ul className="text-sm text-orange-700 mt-2 space-y-1">
+                {potentialDelays.map((d, i) => <li key={i}>• {d}</li>)}
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-medium text-orange-800">{t('transitTime.seasonalVariationsTitle')}</h4>
+              <ul className="text-sm text-orange-700 mt-2 space-y-1">
+                {seasonalVariations.map((v, i) => <li key={i}>• {v}</li>)}
+              </ul>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-4 bg-gray-50">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-gray-900 mb-3">{t('transitTime.rolloverTitle')}</h3>
+          <p className="text-gray-600 mb-3">{t('transitTime.rolloverDescription')}</p>
+          <div className="bg-white p-4 rounded-lg border">
+            <h4 className="font-medium text-gray-900">{t('transitTime.rolloverCausesTitle')}</h4>
+            <ul className="text-sm text-gray-600 mt-2 space-y-1">
+              {rolloverCauses.map((cause, i) => <li key={i}>• {cause}</li>)}
+            </ul>
+            <p className="text-xs text-gray-500 mt-3">{t('transitTime.rolloverImpact')}</p>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-8 bg-amber-50 border-amber-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-amber-900 mb-3">{t('transitTime.tipsTitle')}</h3>
+          <ul className="list-disc list-inside space-y-2 text-amber-800">
+            {tips.map((tip, i) => <li key={i}>{tip}</li>)}
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/vgm/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/vgm/page.tsx
new file mode 100644
index 0000000..f87e155
--- /dev/null
+++ b/apps/frontend/app/[locale]/dashboard/wiki/vgm/page.tsx
@@ -0,0 +1,179 @@
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Anchor } from 'lucide-react';
+
+export default async function VGMPage() {
+  const t = await getTranslations('dashboard.wikiPages');
+
+  const why = t.raw('vgm.why') as Array<{ title: string; description: string }>;
+  const elements = t.raw('vgm.elements') as Array<{ element: string; description: string; example: string }>;
+  const methods = t.raw('vgm.methods') as Array<{
+    method: string; name: string; description: string;
+    process: string[]; advantages: string[]; disadvantages: string[];
+  }>;
+  const responsibilities = t.raw('vgm.responsibilities') as Array<{ role: string; description: string }>;
+  const sanctions = t.raw('vgm.sanctions') as Array<{ region: string; sanction: string }>;
+  const tips = t.raw('vgm.tips') as string[];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4 mb-6">
+        <Link href="/dashboard/wiki" className="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
+          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          {t('backToWiki')}
+        </Link>
+      </div>
+
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <Anchor className="w-10 h-10 text-blue-600" />
+          <h1 className="text-3xl font-bold text-gray-900">{t('vgm.title')}</h1>
+        </div>
+        <p className="mt-3 text-gray-600 max-w-3xl">{t('vgm.description')}</p>
+      </div>
+
+      <Card className="bg-blue-50 border-blue-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-blue-900 mb-3">{t('vgm.whyTitle')}</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-blue-800">
+            {why.map((item) => (
+              <div key={item.title}>
+                <h4 className="font-medium">{item.title}</h4>
+                <p className="text-sm mt-0.5">{item.description}</p>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('vgm.componentsTitle')}</h2>
+        <Card className="bg-white">
+          <CardContent className="pt-6">
+            <div className="bg-gray-50 p-4 rounded-lg border mb-4 text-center font-mono text-lg">
+              <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded">{t('vgm.formula')}</span>
+            </div>
+            <div className="space-y-3">
+              {elements.map((item) => (
+                <div key={item.element} className="flex items-center justify-between py-3 border-b last:border-0">
+                  <div>
+                    <h4 className="font-medium text-gray-900">{item.element}</h4>
+                    <p className="text-sm text-gray-600">{item.description}</p>
+                  </div>
+                  <span className="text-sm font-mono bg-gray-100 px-3 py-1 rounded ml-4 flex-shrink-0">{item.example}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('vgm.methodsTitle')}</h2>
+        <div className="space-y-4">
+          {methods.map((method) => (
+            <Card key={method.method} className="bg-white">
+              <CardHeader className="pb-2">
+                <CardTitle className="flex items-center gap-3">
+                  <span className="px-3 py-1 bg-green-600 text-white rounded-md text-sm">{method.method}</span>
+                  <span className="text-lg">{method.name}</span>
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-gray-600 mb-4">{method.description}</p>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div>
+                    <h4 className="font-medium text-gray-700 mb-2">{t('vgm.processLabel')}</h4>
+                    <ol className="list-decimal list-inside text-sm text-gray-600 space-y-1">
+                      {method.process.map((step, i) => <li key={i}>{step}</li>)}
+                    </ol>
+                  </div>
+                  <div>
+                    <h4 className="font-medium text-green-700 mb-2">✓ {t('vgm.advantagesLabel')}</h4>
+                    <ul className="text-sm text-gray-600 space-y-1">
+                      {method.advantages.map((adv) => (
+                        <li key={adv} className="flex items-center gap-2">
+                          <span className="w-1.5 h-1.5 bg-green-500 rounded-full flex-shrink-0" />{adv}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                  <div>
+                    <h4 className="font-medium text-red-700 mb-2">✗ {t('vgm.disadvantagesLabel')}</h4>
+                    <ul className="text-sm text-gray-600 space-y-1">
+                      {method.disadvantages.map((dis) => (
+                        <li key={dis} className="flex items-center gap-2">
+                          <span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0" />{dis}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <Card className="mt-8 bg-gray-50">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-gray-900 mb-3">{t('vgm.responsibilityTitle')}</h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {responsibilities.map((r) => (
+              <div key={r.role} className="bg-white p-4 rounded-lg border">
+                <h4 className="font-medium text-gray-900">{r.role}</h4>
+                <p className="text-sm text-gray-600 mt-1">{r.description}</p>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-4 bg-gray-50">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-gray-900 mb-3">{t('vgm.tolerancesTitle')}</h3>
+          <div className="bg-white p-4 rounded-lg border">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+              <div>
+                <span className="font-medium">{t('vgm.toleranceLabel')} :</span>
+                <p className="text-gray-600">{t('vgm.toleranceValue')}</p>
+              </div>
+              <div>
+                <span className="font-medium">{t('vgm.consequenceLabel')} :</span>
+                <p className="text-gray-600">{t('vgm.consequenceValue')}</p>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="mt-8">
+        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('vgm.sanctionsTitle')}</h2>
+        <Card className="bg-white">
+          <CardContent className="pt-6">
+            <div className="space-y-3">
+              {sanctions.map((s) => (
+                <div key={s.region} className="flex items-center justify-between py-3 border-b last:border-0">
+                  <span className="font-medium text-gray-900">{s.region}</span>
+                  <span className="text-sm text-red-600">{s.sanction}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card className="mt-8 bg-amber-50 border-amber-200">
+        <CardContent className="pt-6">
+          <h3 className="font-semibold text-amber-900 mb-3">{t('vgm.tipsTitle')}</h3>
+          <ul className="list-disc list-inside space-y-2 text-amber-800">
+            {tips.map((tip, i) => <li key={i}>{tip}</li>)}
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/demo-carte/page.tsx b/apps/frontend/app/[locale]/demo-carte/page.tsx
similarity index 100%
rename from apps/frontend/app/demo-carte/page.tsx
rename to apps/frontend/app/[locale]/demo-carte/page.tsx
diff --git a/apps/frontend/app/docs/api/page.tsx b/apps/frontend/app/[locale]/docs/api/page.tsx
similarity index 100%
rename from apps/frontend/app/docs/api/page.tsx
rename to apps/frontend/app/[locale]/docs/api/page.tsx
diff --git a/apps/frontend/app/[locale]/docs/layout.tsx b/apps/frontend/app/[locale]/docs/layout.tsx
new file mode 100644
index 0000000..89cf5ef
--- /dev/null
+++ b/apps/frontend/app/[locale]/docs/layout.tsx
@@ -0,0 +1,24 @@
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import { LandingHeader } from '@/components/layout/LandingHeader';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<Metadata> {
+  const t = await getTranslations({ locale: params.locale, namespace: 'marketing.docs' });
+  return {
+    title: t('metadataTitle'),
+    description: t('metadataDescription'),
+  };
+}
+
+export default function DocsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <LandingHeader />
+      <main className="pt-20">{children}</main>
+    </>
+  );
+}
diff --git a/apps/frontend/app/forgot-password/page.tsx b/apps/frontend/app/[locale]/forgot-password/page.tsx
similarity index 77%
rename from apps/frontend/app/forgot-password/page.tsx
rename to apps/frontend/app/[locale]/forgot-password/page.tsx
index 0830aac..5e10528 100644
--- a/apps/frontend/app/forgot-password/page.tsx
+++ b/apps/frontend/app/[locale]/forgot-password/page.tsx
@@ -1,11 +1,14 @@
 'use client';
 
 import { useState } from 'react';
-import Link from 'next/link';
+import { Link } from '@/i18n/navigation';
 import Image from 'next/image';
+import { useTranslations } from 'next-intl';
 import { forgotPassword } from '@/lib/api/auth';
 
 export default function ForgotPasswordPage() {
+  const t = useTranslations('auth.forgotPassword');
+  const tFooter = useTranslations('auth.footerLinks');
   const [email, setEmail] = useState('');
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState('');
@@ -20,7 +23,7 @@ export default function ForgotPasswordPage() {
       await forgotPassword(email);
       setSuccess(true);
     } catch (err: any) {
-      setError(err.message || 'Une erreur est survenue. Veuillez réessayer.');
+      setError(err.message || t('error'));
     } finally {
       setLoading(false);
     }
@@ -28,10 +31,8 @@ export default function ForgotPasswordPage() {
 
   return (
     <div className="min-h-screen flex">
-      {/* Left Side - Form */}
       <div className="w-full lg:w-1/2 flex flex-col justify-center px-8 sm:px-12 lg:px-16 xl:px-24 bg-white">
         <div className="max-w-md w-full mx-auto">
-          {/* Logo */}
           <div className="mb-10">
             <Link href="/">
               <Image
@@ -53,30 +54,30 @@ export default function ForgotPasswordPage() {
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                   </svg>
                 </div>
-                <h1 className="text-h1 text-brand-navy mb-2">Email envoyé</h1>
-                <p className="text-body text-neutral-600">
-                  Si un compte est associé à <strong>{email}</strong>, vous recevrez un email avec
-                  les instructions pour réinitialiser votre mot de passe.
-                </p>
+                <h1 className="text-h1 text-brand-navy mb-2">{t('successTitle')}</h1>
+                <p
+                  className="text-body text-neutral-600"
+                  dangerouslySetInnerHTML={{
+                    __html: t('successMessage', { email }),
+                  }}
+                />
                 <p className="text-body-sm text-neutral-500 mt-3">
-                  Pensez à vérifier vos spams si vous ne recevez rien d'ici quelques minutes.
+                  {t('successHint')}
                 </p>
               </div>
               <Link href="/login" className="btn-primary w-full text-center block text-lg">
-                Retour à la connexion
+                {t('backToLogin')}
               </Link>
             </>
           ) : (
             <>
-              {/* Header */}
               <div className="mb-8">
-                <h1 className="text-h1 text-brand-navy mb-2">Mot de passe oublié ?</h1>
+                <h1 className="text-h1 text-brand-navy mb-2">{t('title')}</h1>
                 <p className="text-body text-neutral-600">
-                  Entrez votre adresse email et nous vous enverrons un lien pour réinitialiser votre mot de passe.
+                  {t('subtitle')}
                 </p>
               </div>
 
-              {/* Error Message */}
               {error && (
                 <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3">
                   <svg className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -86,11 +87,10 @@ export default function ForgotPasswordPage() {
                 </div>
               )}
 
-              {/* Form */}
               <form onSubmit={handleSubmit} className="space-y-6">
                 <div>
                   <label htmlFor="email" className="label">
-                    Adresse email
+                    {t('emailLabel')}
                   </label>
                   <input
                     id="email"
@@ -99,7 +99,7 @@ export default function ForgotPasswordPage() {
                     value={email}
                     onChange={e => setEmail(e.target.value)}
                     className="input w-full"
-                    placeholder="votre.email@entreprise.com"
+                    placeholder={t('emailPlaceholder')}
                     autoComplete="email"
                     disabled={loading}
                   />
@@ -110,7 +110,7 @@ export default function ForgotPasswordPage() {
                   disabled={loading}
                   className="btn-primary w-full text-lg disabled:opacity-50 disabled:cursor-not-allowed"
                 >
-                  {loading ? 'Envoi en cours...' : 'Envoyer le lien de réinitialisation'}
+                  {loading ? t('submitting') : t('submit')}
                 </button>
               </form>
 
@@ -119,37 +119,35 @@ export default function ForgotPasswordPage() {
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                   </svg>
-                  Retour à la connexion
+                  {t('backToLogin')}
                 </Link>
               </div>
             </>
           )}
 
-          {/* Footer Links */}
           <div className="mt-8 pt-8 border-t border-neutral-200">
             <div className="flex flex-wrap justify-center gap-6 text-body-sm text-neutral-500">
               <Link href="/contact" className="hover:text-accent transition-colors">
-                Contactez-nous
+                {tFooter('contact')}
               </Link>
               <Link href="/privacy" className="hover:text-accent transition-colors">
-                Confidentialité
+                {tFooter('privacy')}
               </Link>
               <Link href="/terms" className="hover:text-accent transition-colors">
-                Conditions
+                {tFooter('terms')}
               </Link>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Right Side - Brand */}
       <div className="hidden lg:block lg:w-1/2 relative bg-brand-navy">
         <div className="absolute inset-0 bg-gradient-to-br from-brand-navy to-neutral-800 opacity-95"></div>
         <div className="absolute inset-0 flex flex-col justify-center px-16 xl:px-24 text-white">
           <div className="max-w-xl">
-            <h2 className="text-display-sm mb-6 text-white">Sécurité avant tout</h2>
+            <h2 className="text-display-sm mb-6 text-white">{t('sidePanel.title')}</h2>
             <p className="text-body-lg text-neutral-200 mb-12">
-              La protection de votre compte est notre priorité. Réinitialisez votre mot de passe en toute sécurité.
+              {t('sidePanel.description')}
             </p>
             <div className="space-y-6">
               <div className="flex items-start">
@@ -159,8 +157,8 @@ export default function ForgotPasswordPage() {
                   </svg>
                 </div>
                 <div className="ml-4">
-                  <h3 className="text-h5 mb-1 text-white">Lien sécurisé</h3>
-                  <p className="text-body-sm text-neutral-300">Le lien expire après 1 heure pour votre sécurité</p>
+                  <h3 className="text-h5 mb-1 text-white">{t('sidePanel.features.secure.title')}</h3>
+                  <p className="text-body-sm text-neutral-300">{t('sidePanel.features.secure.description')}</p>
                 </div>
               </div>
               <div className="flex items-start">
@@ -170,8 +168,8 @@ export default function ForgotPasswordPage() {
                   </svg>
                 </div>
                 <div className="ml-4">
-                  <h3 className="text-h5 mb-1 text-white">Email de confirmation</h3>
-                  <p className="text-body-sm text-neutral-300">Vérifiez votre boîte de réception et vos spams</p>
+                  <h3 className="text-h5 mb-1 text-white">{t('sidePanel.features.email.title')}</h3>
+                  <p className="text-body-sm text-neutral-300">{t('sidePanel.features.email.description')}</p>
                 </div>
               </div>
             </div>
diff --git a/apps/frontend/app/[locale]/layout.tsx b/apps/frontend/app/[locale]/layout.tsx
new file mode 100644
index 0000000..d3758e1
--- /dev/null
+++ b/apps/frontend/app/[locale]/layout.tsx
@@ -0,0 +1,92 @@
+import type { Metadata } from 'next';
+import { NextIntlClientProvider, hasLocale } from 'next-intl';
+import { getMessages, getTranslations, setRequestLocale } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import '../globals.css';
+import { manrope, montserrat } from '@/lib/fonts';
+import { Providers } from '@/components/providers';
+import { routing } from '@/i18n/routing';
+
+type Params = { locale: string };
+
+export function generateStaticParams() {
+  return routing.locales.map(locale => ({ locale }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<Params>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'metadata.home' });
+
+  return {
+    metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL || 'https://xpeditis.com'),
+    title: {
+      default: t('title'),
+      template: `%s | ${t('title').split(' — ')[0] ?? 'Xpeditis'}`,
+    },
+    description: t('description'),
+    icons: {
+      icon: '/assets/logos/logo-black.svg',
+      shortcut: '/assets/logos/logo-black.svg',
+      apple: '/assets/logos/logo-black.svg',
+    },
+    manifest: '/manifest.json',
+    openGraph: {
+      type: 'website',
+      locale: locale === 'fr' ? 'fr_FR' : 'en_US',
+      url: 'https://xpeditis.com',
+      siteName: 'Xpeditis',
+      title: t('title'),
+      description: t('description'),
+      images: [
+        {
+          url: '/assets/logos/logo-black.svg',
+          width: 1875,
+          height: 1699,
+          alt: 'Xpeditis Logo',
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: t('title'),
+      description: t('description'),
+      images: ['/assets/logos/logo-black.svg'],
+    },
+    alternates: {
+      languages: {
+        fr: '/fr',
+        en: '/en',
+      },
+    },
+  };
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<Params>;
+}) {
+  const { locale } = await params;
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  setRequestLocale(locale);
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale} className={`${manrope.variable} ${montserrat.variable}`}>
+      <body className="font-body">
+        <NextIntlClientProvider locale={locale} messages={messages}>
+          <Providers>{children}</Providers>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/frontend/app/login/README.md b/apps/frontend/app/[locale]/login/README.md
similarity index 100%
rename from apps/frontend/app/login/README.md
rename to apps/frontend/app/[locale]/login/README.md
diff --git a/apps/frontend/app/login/page.tsx b/apps/frontend/app/[locale]/login/page.tsx
similarity index 77%
rename from apps/frontend/app/login/page.tsx
rename to apps/frontend/app/[locale]/login/page.tsx
index 11dc16d..d2571d7 100644
--- a/apps/frontend/app/login/page.tsx
+++ b/apps/frontend/app/[locale]/login/page.tsx
@@ -1,17 +1,10 @@
-/**
- * Login Page - Xpeditis
- *
- * Modern split-screen login page with:
- * - Left side: Login form with social authentication
- * - Right side: Brand features and visual elements
- */
-
 'use client';
 
 import { useState, Suspense } from 'react';
-import Link from 'next/link';
+import { Link } from '@/i18n/navigation';
 import Image from 'next/image';
 import { useSearchParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
 import { useAuth } from '@/lib/context/auth-context';
 
 interface FieldErrors {
@@ -19,65 +12,48 @@ interface FieldErrors {
   password?: string;
 }
 
-// Map backend error messages to French user-friendly messages
-function getErrorMessage(error: any): { message: string; field?: 'email' | 'password' | 'general' } {
+type ErrorField = 'email' | 'password' | 'general';
+
+function mapLoginError(
+  error: any,
+  t: (key: string) => string
+): { message: string; field: ErrorField } {
   const errorMessage = error?.message || error?.response?.message || '';
 
-  // Network or server errors
   if (error?.name === 'TypeError' || errorMessage.includes('fetch')) {
-    return {
-      message: 'Impossible de se connecter au serveur. Vérifiez votre connexion internet.',
-      field: 'general'
-    };
+    return { message: t('errors.network'), field: 'general' };
   }
 
-  // Backend error messages
   if (errorMessage.includes('Invalid credentials') || errorMessage.includes('Identifiants')) {
-    return {
-      message: 'Email ou mot de passe incorrect',
-      field: 'general'
-    };
+    return { message: t('errors.invalidCredentials'), field: 'general' };
   }
 
   if (errorMessage.includes('inactive') || errorMessage.includes('désactivé')) {
-    return {
-      message: 'Votre compte a été désactivé. Contactez le support pour plus d\'informations.',
-      field: 'general'
-    };
+    return { message: t('errors.inactive'), field: 'general' };
   }
 
   if (errorMessage.includes('not found') || errorMessage.includes('introuvable')) {
-    return {
-      message: 'Aucun compte trouvé avec cet email',
-      field: 'email'
-    };
+    return { message: t('errors.notFound'), field: 'email' };
   }
 
   if (errorMessage.includes('password') || errorMessage.includes('mot de passe')) {
-    return {
-      message: 'Mot de passe incorrect',
-      field: 'password'
-    };
+    return { message: t('errors.incorrectPassword'), field: 'password' };
   }
 
   if (errorMessage.includes('Too many') || errorMessage.includes('rate limit')) {
-    return {
-      message: 'Trop de tentatives de connexion. Veuillez réessayer dans quelques minutes.',
-      field: 'general'
-    };
+    return { message: t('errors.rateLimit'), field: 'general' };
   }
 
-  // Default error
-  return {
-    message: errorMessage || 'Une erreur est survenue. Veuillez réessayer.',
-    field: 'general'
-  };
+  return { message: errorMessage || t('errors.generic'), field: 'general' };
 }
 
 function LoginPageContent() {
   const { login } = useAuth();
   const searchParams = useSearchParams();
   const redirectTo = searchParams.get('redirect') || '/dashboard';
+  const tLogin = useTranslations('auth.login');
+  const tPanel = useTranslations('auth.sidePanel');
+  const tFooter = useTranslations('auth.footerLinks');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [rememberMe, setRememberMe] = useState(false);
@@ -85,29 +61,25 @@ function LoginPageContent() {
   const [error, setError] = useState('');
   const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
 
-  // Validate form fields
   const validateForm = (): boolean => {
     const errors: FieldErrors = {};
 
-    // Email validation
     if (!email.trim()) {
-      errors.email = 'L\'adresse email est requise';
+      errors.email = tLogin('fieldErrors.emailRequired');
     } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      errors.email = 'L\'adresse email n\'est pas valide';
+      errors.email = tLogin('fieldErrors.emailInvalid');
     }
 
-    // Password validation
     if (!password) {
-      errors.password = 'Le mot de passe est requis';
+      errors.password = tLogin('fieldErrors.passwordRequired');
     } else if (password.length < 6) {
-      errors.password = 'Le mot de passe doit contenir au moins 6 caractères';
+      errors.password = tLogin('fieldErrors.passwordMin');
     }
 
     setFieldErrors(errors);
     return Object.keys(errors).length === 0;
   };
 
-  // Handle input changes - keep errors visible until successful login
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value);
   };
@@ -121,7 +93,6 @@ function LoginPageContent() {
     setError('');
     setFieldErrors({});
 
-    // Validate form before submission
     if (!validateForm()) {
       return;
     }
@@ -130,9 +101,8 @@ function LoginPageContent() {
 
     try {
       await login(email, password, redirectTo, rememberMe);
-      // Navigation is handled by the login function in auth context
     } catch (err: any) {
-      const { message, field } = getErrorMessage(err);
+      const { message, field } = mapLoginError(err, tLogin);
 
       if (field === 'email') {
         setFieldErrors({ email: message });
@@ -148,10 +118,8 @@ function LoginPageContent() {
 
   return (
     <div className="min-h-screen flex">
-      {/* Left Side - Form */}
       <div className="w-full lg:w-1/2 flex flex-col justify-center px-8 sm:px-12 lg:px-16 xl:px-24 bg-white">
         <div className="max-w-md w-full mx-auto">
-          {/* Logo */}
           <div className="mb-10">
             <Link href="/">
               <Image
@@ -165,15 +133,13 @@ function LoginPageContent() {
             </Link>
           </div>
 
-          {/* Header */}
           <div className="mb-8">
-            <h1 className="text-h1 text-brand-navy mb-2">Connexion</h1>
+            <h1 className="text-h1 text-brand-navy mb-2">{tLogin('title')}</h1>
             <p className="text-body text-neutral-600">
-              Bienvenue ! Connectez-vous pour accéder à votre compte
+              {tLogin('subtitle')}
             </p>
           </div>
 
-          {/* Error Message */}
           {error && (
             <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3">
               <svg
@@ -193,12 +159,10 @@ function LoginPageContent() {
             </div>
           )}
 
-          {/* Form */}
           <form onSubmit={handleSubmit} className="space-y-6">
-            {/* Email */}
             <div>
               <label htmlFor="email" className={`label ${fieldErrors.email ? 'text-red-600' : ''}`}>
-                Adresse email
+                {tLogin('emailLabel')}
               </label>
               <input
                 id="email"
@@ -210,7 +174,7 @@ function LoginPageContent() {
                     ? 'border-red-500 focus:border-red-500 focus:ring-red-500 bg-red-50'
                     : ''
                 }`}
-                placeholder="votre.email@entreprise.com"
+                placeholder={tLogin('emailPlaceholder')}
                 autoComplete="email"
                 disabled={isLoading}
                 aria-invalid={!!fieldErrors.email}
@@ -231,10 +195,9 @@ function LoginPageContent() {
               )}
             </div>
 
-            {/* Password */}
             <div>
               <label htmlFor="password" className={`label ${fieldErrors.password ? 'text-red-600' : ''}`}>
-                Mot de passe
+                {tLogin('passwordLabel')}
               </label>
               <input
                 id="password"
@@ -246,7 +209,7 @@ function LoginPageContent() {
                     ? 'border-red-500 focus:border-red-500 focus:ring-red-500 bg-red-50'
                     : ''
                 }`}
-                placeholder="••••••••••"
+                placeholder={tLogin('passwordPlaceholder')}
                 autoComplete="current-password"
                 disabled={isLoading}
                 aria-invalid={!!fieldErrors.password}
@@ -267,7 +230,6 @@ function LoginPageContent() {
               )}
             </div>
 
-            {/* Remember Me & Forgot Password */}
             <div className="flex items-center justify-between">
               <label className="flex items-center cursor-pointer">
                 <input
@@ -277,66 +239,58 @@ function LoginPageContent() {
                   className="w-4 h-4 text-accent border-neutral-300 rounded focus:ring-accent focus:ring-2"
                   disabled={isLoading}
                 />
-                <span className="ml-2 text-body-sm text-neutral-700">Se souvenir de moi</span>
+                <span className="ml-2 text-body-sm text-neutral-700">{tLogin('rememberMe')}</span>
               </label>
 
               <Link href="/forgot-password" className="text-body-sm link">
-                Mot de passe oublié ?
+                {tLogin('forgotPassword')}
               </Link>
             </div>
 
-            {/* Submit Button */}
             <button
               type="submit"
               disabled={isLoading}
               className="btn-primary w-full text-lg disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              {isLoading ? 'Connexion en cours...' : 'Se connecter'}
+              {isLoading ? tLogin('submitting') : tLogin('submit')}
             </button>
           </form>
 
-          {/* Sign Up Link */}
           <div className="mt-8 text-center">
             <p className="text-body text-neutral-600">
-              Vous n'avez pas de compte ?{' '}
+              {tLogin('noAccount')}{' '}
               <Link href="/register" className="link font-semibold">
-                Créer un compte
+                {tLogin('createAccount')}
               </Link>
             </p>
           </div>
 
-          {/* Footer Links */}
           <div className="mt-8 pt-8 border-t border-neutral-200">
             <div className="flex flex-wrap justify-center gap-6 text-body-sm text-neutral-500">
               <Link href="/contact" className="hover:text-accent transition-colors">
-                Contactez-nous
+                {tFooter('contact')}
               </Link>
               <Link href="/privacy" className="hover:text-accent transition-colors">
-                Confidentialité
+                {tFooter('privacy')}
               </Link>
               <Link href="/terms" className="hover:text-accent transition-colors">
-                Conditions
+                {tFooter('terms')}
               </Link>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Right Side - Brand Features */}
       <div className="hidden lg:block lg:w-1/2 relative bg-brand-navy">
-        {/* Background Gradient */}
         <div className="absolute inset-0 bg-gradient-to-br from-brand-navy to-neutral-800 opacity-95"></div>
 
-        {/* Content */}
         <div className="absolute inset-0 flex flex-col justify-center px-16 xl:px-24 text-white">
           <div className="max-w-xl">
-            <h2 className="text-display-sm mb-6 text-white">Simplifiez votre fret maritime</h2>
+            <h2 className="text-display-sm mb-6 text-white">{tPanel('title')}</h2>
             <p className="text-body-lg text-neutral-200 mb-12">
-              Accédez à des tarifs en temps réel de plus de 50 compagnies maritimes. Réservez,
-              suivez et gérez vos expéditions LCL en quelques clics.
+              {tPanel('description')}
             </p>
 
-            {/* Features */}
             <div className="space-y-6">
               <div className="flex items-start">
                 <div className="flex-shrink-0 w-12 h-12 bg-brand-turquoise rounded-lg flex items-center justify-center">
@@ -355,9 +309,9 @@ function LoginPageContent() {
                   </svg>
                 </div>
                 <div className="ml-4">
-                  <h3 className="text-h5 mb-1 text-white">Tarifs instantanés</h3>
+                  <h3 className="text-h5 mb-1 text-white">{tPanel('features.instantRates.title')}</h3>
                   <p className="text-body-sm text-neutral-300">
-                    Comparez les prix de toutes les compagnies en temps réel
+                    {tPanel('features.instantRates.description')}
                   </p>
                 </div>
               </div>
@@ -379,9 +333,9 @@ function LoginPageContent() {
                   </svg>
                 </div>
                 <div className="ml-4">
-                  <h3 className="text-h5 mb-1 text-white">Réservation simplifiée</h3>
+                  <h3 className="text-h5 mb-1 text-white">{tPanel('features.booking.title')}</h3>
                   <p className="text-body-sm text-neutral-300">
-                    Réservez vos conteneurs en moins de 5 minutes
+                    {tPanel('features.booking.description')}
                   </p>
                 </div>
               </div>
@@ -403,33 +357,31 @@ function LoginPageContent() {
                   </svg>
                 </div>
                 <div className="ml-4">
-                  <h3 className="text-h5 mb-1. text-white">Suivi en temps réel</h3>
+                  <h3 className="text-h5 mb-1 text-white">{tPanel('features.tracking.title')}</h3>
                   <p className="text-body-sm text-neutral-300">
-                    Suivez vos expéditions à chaque étape du voyage
+                    {tPanel('features.tracking.description')}
                   </p>
                 </div>
               </div>
             </div>
 
-            {/* Stats */}
             <div className="grid grid-cols-3 gap-8 mt-12 pt-12 border-t border-neutral-700">
               <div>
                 <div className="text-display-sm text-brand-turquoise">50+</div>
-                <div className="text-body-sm text-neutral-300 mt-1">Compagnies</div>
+                <div className="text-body-sm text-neutral-300 mt-1">{tPanel('stats.carriers')}</div>
               </div>
               <div>
                 <div className="text-display-sm text-brand-turquoise">10k+</div>
-                <div className="text-body-sm text-neutral-300 mt-1">Expéditions</div>
+                <div className="text-body-sm text-neutral-300 mt-1">{tPanel('stats.shipments')}</div>
               </div>
               <div>
                 <div className="text-display-sm text-brand-turquoise">99.5%</div>
-                <div className="text-body-sm text-neutral-300 mt-1">Satisfaction</div>
+                <div className="text-body-sm text-neutral-300 mt-1">{tPanel('stats.satisfaction')}</div>
               </div>
             </div>
           </div>
         </div>
 
-        {/* Decorative Elements */}
         <div className="absolute bottom-0 right-0 opacity-10">
           <svg width="400" height="400" viewBox="0 0 400 400" fill="none">
             <circle
diff --git a/apps/frontend/app/not-found.tsx b/apps/frontend/app/[locale]/not-found.tsx
similarity index 100%
rename from apps/frontend/app/not-found.tsx
rename to apps/frontend/app/[locale]/not-found.tsx
diff --git a/apps/frontend/app/page.tsx b/apps/frontend/app/[locale]/page.tsx
similarity index 66%
rename from apps/frontend/app/page.tsx
rename to apps/frontend/app/[locale]/page.tsx
index f57c77d..f395686 100644
--- a/apps/frontend/app/page.tsx
+++ b/apps/frontend/app/[locale]/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useRef, useState, useEffect } from 'react';
-import Link from 'next/link';
+import { Link } from '@/i18n/navigation';
 import Image from 'next/image';
 import { motion, useInView, useScroll, useTransform } from 'framer-motion';
 import {
@@ -24,6 +24,7 @@ import {
   Check,
   X,
 } from 'lucide-react';
+import { useTranslations, useLocale } from 'next-intl';
 import { useAuth } from '@/lib/context/auth-context';
 import { LandingHeader, LandingFooter } from '@/components/layout';
 
@@ -65,6 +66,9 @@ function AnimatedCounter({
 }
 
 export default function LandingPage() {
+  const t = useTranslations('landing');
+  const tCommon = useTranslations('common');
+  const locale = useLocale();
   const { user, isAuthenticated } = useAuth();
 
   const heroRef = useRef(null);
@@ -93,47 +97,43 @@ export default function LandingPage() {
   const features = [
     {
       icon: BarChart3,
-      title: 'Tableau de bord',
-      description:
-        'Suivez tous vos KPIs en temps réel : bookings, volumes, revenus et alertes personnalisées.',
+      title: t('features.dashboard.title'),
+      description: t('features.dashboard.description'),
       color: 'from-blue-500 to-cyan-500',
       link: '/dashboard',
     },
     {
       icon: Package,
-      title: 'Gestion des Réservations',
-      description: 'Créez, gérez et suivez vos réservations maritimes LCL/FCL avec un historique complet.',
+      title: t('features.bookings.title'),
+      description: t('features.bookings.description'),
       color: 'from-purple-500 to-pink-500',
       link: '/dashboard/bookings',
     },
     {
       icon: FileText,
-      title: 'Documents Maritimes',
-      description: 'Centralisez tous vos documents : B/L, factures, certificats et documents douaniers.',
+      title: t('features.documents.title'),
+      description: t('features.documents.description'),
       color: 'from-orange-500 to-red-500',
       link: '/dashboard/documents',
     },
     {
       icon: Search,
-      title: 'Suivi des expéditions',
-      description:
-        'Suivez vos conteneurs en temps réel auprès de 10+ transporteurs majeurs (Maersk, MSC, CMA CGM...).',
+      title: t('features.tracking.title'),
+      description: t('features.tracking.description'),
       color: 'from-green-500 to-emerald-500',
       link: '/dashboard/track-trace',
     },
     {
       icon: BookOpen,
-      title: 'Wiki Maritime',
-      description:
-        'Base de connaissances complète : Incoterms, documents, procédures douanières et plus encore.',
+      title: t('features.wiki.title'),
+      description: t('features.wiki.description'),
       color: 'from-yellow-500 to-orange-500',
       link: '/dashboard/wiki',
     },
     {
       icon: Bell,
-      title: 'Notifications Temps Réel',
-      description:
-        'Restez informé avec des alertes instantanées sur vos bookings, documents et mises à jour.',
+      title: t('features.notifications.title'),
+      description: t('features.notifications.description'),
       color: 'from-indigo-500 to-purple-500',
       link: '/dashboard',
     },
@@ -141,36 +141,63 @@ export default function LandingPage() {
 
 
   const stats = [
-    { end: 50, prefix: '', suffix: '+', decimals: 0, label: 'Compagnies Maritimes', icon: Ship },
-    { end: 10, prefix: '', suffix: 'K+', decimals: 0, label: 'Ports Mondiaux', icon: Anchor },
-    { end: 2, prefix: '<', suffix: 's', decimals: 0, label: 'Temps de Réponse', icon: Zap },
-    { end: 99.5, prefix: '', suffix: '%', decimals: 1, label: 'Disponibilité', icon: CheckCircle2 },
+    { end: 50, prefix: '', suffix: '+', decimals: 0, label: t('stats.carriers'), icon: Ship },
+    { end: 10, prefix: '', suffix: 'K+', decimals: 0, label: t('stats.ports'), icon: Anchor },
+    { end: 2, prefix: '<', suffix: 's', decimals: 0, label: t('stats.responseTime'), icon: Zap },
+    { end: 99.5, prefix: '', suffix: '%', decimals: 1, label: t('stats.availability'), icon: CheckCircle2 },
   ];
 
+  const planFeaturesByKey: Record<string, Array<{ key: string; included: boolean }>> = {
+    bronze: [
+      { key: 'lclBooking', included: true },
+      { key: 'tracking', included: true },
+      { key: 'dashboard', included: false },
+      { key: 'wiki', included: false },
+      { key: 'userManagement', included: false },
+      { key: 'csvExport', included: false },
+      { key: 'apiAccess', included: false },
+      { key: 'kam', included: false },
+    ],
+    silver: [
+      { key: 'lclBooking', included: true },
+      { key: 'tracking', included: true },
+      { key: 'dashboardAdvanced', included: true },
+      { key: 'wikiFull', included: true },
+      { key: 'userManagement', included: true },
+      { key: 'csvExport', included: true },
+      { key: 'apiAccess', included: false },
+      { key: 'kam', included: false },
+    ],
+    gold: [
+      { key: 'lclBooking', included: true },
+      { key: 'tracking', included: true },
+      { key: 'dashboardAdvanced', included: true },
+      { key: 'wikiFull', included: true },
+      { key: 'userManagement', included: true },
+      { key: 'csvExport', included: true },
+      { key: 'apiFull', included: true },
+      { key: 'kam', included: false },
+    ],
+    platinium: [
+      { key: 'lclBooking', included: true },
+      { key: 'tracking', included: true },
+      { key: 'dashboardAdvanced', included: true },
+      { key: 'wikiFull', included: true },
+      { key: 'userManagement', included: true },
+      { key: 'csvExport', included: true },
+      { key: 'apiFull', included: true },
+      { key: 'kamCustom', included: true },
+    ],
+  };
+
   const pricingPlans = [
     {
       key: 'bronze',
-      name: 'Bronze',
       badge: null,
       monthlyPrice: 0,
       yearlyPrice: 0,
       yearlyMonthly: 0,
-      description: 'Pour découvrir la plateforme',
-      users: '1 utilisateur',
-      shipments: '12 expéditions / an',
       commission: '5%',
-      support: 'Aucun support',
-      features: [
-        { text: 'Réservations maritimes LCL', included: true },
-        { text: 'Track & Trace conteneurs', included: true },
-        { text: 'Tableau de bord', included: false },
-        { text: 'Wiki maritime', included: false },
-        { text: 'Gestion des utilisateurs', included: false },
-        { text: 'Export CSV', included: false },
-        { text: 'Accès API', included: false },
-        { text: 'KAM dédié', included: false },
-      ],
-      cta: 'Commencer gratuitement',
       ctaLink: '/register',
       highlighted: false,
       accentColor: 'from-amber-600 to-yellow-500',
@@ -179,27 +206,11 @@ export default function LandingPage() {
     },
     {
       key: 'silver',
-      name: 'Silver',
-      badge: 'Populaire',
+      badge: 'popular',
       monthlyPrice: 249,
       yearlyPrice: 2739,
       yearlyMonthly: 228,
-      description: 'Pour les transitaires en croissance',
-      users: 'Jusqu\'à 5 utilisateurs',
-      shipments: 'Expéditions illimitées',
       commission: '3%',
-      support: 'Support par email',
-      features: [
-        { text: 'Réservations maritimes LCL', included: true },
-        { text: 'Track & Trace conteneurs', included: true },
-        { text: 'Tableau de bord avancé', included: true },
-        { text: 'Wiki maritime complet', included: true },
-        { text: 'Gestion des utilisateurs', included: true },
-        { text: 'Export CSV', included: true },
-        { text: 'Accès API', included: false },
-        { text: 'KAM dédié', included: false },
-      ],
-      cta: 'Commencer',
       ctaLink: '/register',
       highlighted: true,
       accentColor: 'from-slate-400 to-slate-500',
@@ -208,27 +219,11 @@ export default function LandingPage() {
     },
     {
       key: 'gold',
-      name: 'Gold',
       badge: null,
       monthlyPrice: 899,
       yearlyPrice: 9889,
       yearlyMonthly: 824,
-      description: 'Pour les équipes exigeantes',
-      users: 'Jusqu\'à 20 utilisateurs',
-      shipments: 'Expéditions illimitées',
       commission: '2%',
-      support: 'Assistance commerciale directe',
-      features: [
-        { text: 'Réservations maritimes LCL', included: true },
-        { text: 'Track & Trace conteneurs', included: true },
-        { text: 'Tableau de bord avancé', included: true },
-        { text: 'Wiki maritime complet', included: true },
-        { text: 'Gestion des utilisateurs', included: true },
-        { text: 'Export CSV', included: true },
-        { text: 'Accès API complet', included: true },
-        { text: 'KAM dédié', included: false },
-      ],
-      cta: 'Commencer',
       ctaLink: '/register',
       highlighted: false,
       accentColor: 'from-yellow-400 to-amber-400',
@@ -237,58 +232,25 @@ export default function LandingPage() {
     },
     {
       key: 'platinium',
-      name: 'Platinium',
-      badge: 'Sur mesure',
+      badge: 'custom',
       monthlyPrice: null,
       yearlyPrice: null,
       yearlyMonthly: null,
-      description: 'Pour les grandes entreprises',
-      users: 'Utilisateurs illimités',
-      shipments: 'Expéditions illimitées',
       commission: '1%',
-      support: 'Key Account Manager dédié',
-      features: [
-        { text: 'Réservations maritimes LCL', included: true },
-        { text: 'Track & Trace conteneurs', included: true },
-        { text: 'Tableau de bord avancé', included: true },
-        { text: 'Wiki maritime complet', included: true },
-        { text: 'Gestion des utilisateurs', included: true },
-        { text: 'Export CSV', included: true },
-        { text: 'Accès API complet', included: true },
-        { text: 'KAM dédié + Interface personnalisée', included: true },
-      ],
-      cta: 'Nous contacter',
       ctaLink: '/contact',
       highlighted: false,
       accentColor: 'from-brand-navy to-brand-turquoise',
       textAccent: 'text-brand-turquoise',
       badgeBg: 'bg-brand-navy/10 text-brand-navy',
     },
-  ];
+  ] as const;
 
-  const testimonials = [
-    {
-      quote:
-        'Xpeditis a révolutionné notre façon de gérer le fret maritime. Les tarifs sont compétitifs et la plateforme est intuitive.',
-      author: 'Marie Dubois',
-      role: 'Directrice Logistique',
-      company: 'LogiFrance',
-    },
-    {
-      quote:
-        'Le gain de temps est considérable. Ce qui nous prenait des heures se fait maintenant en quelques minutes.',
-      author: 'Thomas Martin',
-      role: 'Responsable Transport',
-      company: 'EuroShipping',
-    },
-    {
-      quote:
-        "L'interface est claire, les données sont précises et le support client est réactif. Un vrai partenaire de confiance.",
-      author: 'Sophie Bernard',
-      role: 'CEO',
-      company: 'MariTime Solutions',
-    },
-  ];
+  const testimonials = (t.raw('testimonials.items') as Array<{
+    quote: string;
+    author: string;
+    role: string;
+    company: string;
+  }>) ?? [];
 
   const containerVariants = {
     hidden: { opacity: 0, y: 50 },
@@ -311,13 +273,14 @@ export default function LandingPage() {
     },
   };
 
+  const numberFormat = new Intl.NumberFormat(locale === 'fr' ? 'fr-FR' : 'en-US');
+
   return (
     <div className="min-h-screen bg-white">
       <LandingHeader transparentOnTop={true} />
 
       {/* Hero Section */}
       <section ref={heroRef} className="relative min-h-screen flex items-center overflow-hidden">
-        {/* Background Video */}
         <motion.div style={{ y: backgroundY }} className="absolute inset-0 z-0">
           <video
             autoPlay
@@ -330,7 +293,6 @@ export default function LandingPage() {
               src="https://assets.mixkit.co/videos/36264/36264-720.mp4"
               type="video/mp4"
             />
-            {/* Fallback image if video fails to load */}
             <div
               className="absolute inset-0"
               style={{
@@ -340,9 +302,7 @@ export default function LandingPage() {
               }}
             />
           </video>
-          {/* Dark overlay for text readability */}
           <div className="absolute inset-0 bg-brand-navy/65" />
-          {/* Gradient overlay */}
           <div className="absolute inset-0 bg-gradient-to-br from-brand-navy/70 via-brand-navy/50 to-brand-turquoise/20" />
         </motion.div>
 
@@ -361,7 +321,7 @@ export default function LandingPage() {
             >
               <Ship className="w-4 h-4 sm:w-5 sm:h-5 text-brand-turquoise flex-shrink-0" />
               <span className="text-white/90 text-xs sm:text-sm font-medium">
-                Plateforme B2B de Fret Maritime #1 en Europe
+                {t('hero.badge')}
               </span>
             </motion.div>
 
@@ -371,10 +331,10 @@ export default function LandingPage() {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="text-3xl sm:text-5xl lg:text-7xl font-bold text-white mb-4 sm:mb-6 leading-tight"
             >
-              Réservez votre fret
+              {t('hero.titleLine1')}
               <br />
               <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
-                en quelques clics
+                {t('hero.titleLine2')}
               </span>
             </motion.h1>
 
@@ -384,8 +344,7 @@ export default function LandingPage() {
               transition={{ duration: 0.8, delay: 0.4 }}
               className="text-base sm:text-xl lg:text-2xl text-white/80 mb-8 sm:mb-12 max-w-3xl mx-auto leading-relaxed px-2"
             >
-              Comparez les tarifs de 50+ compagnies maritimes, réservez en ligne et suivez vos
-              envois en temps réel.
+              {t('hero.subtitle')}
             </motion.p>
 
             <motion.div
@@ -401,7 +360,7 @@ export default function LandingPage() {
                   rel="noopener noreferrer"
                   className="group px-6 sm:px-8 py-3 sm:py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-base sm:text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
                 >
-                  <span>Accéder au tableau de bord</span>
+                  <span>{t('hero.ctaAuthenticated')}</span>
                   <LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                 </Link>
               ) : (
@@ -412,7 +371,7 @@ export default function LandingPage() {
                     rel="noopener noreferrer"
                     className="group px-6 sm:px-8 py-3 sm:py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-base sm:text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
                   >
-                    <span>Créer un compte gratuit</span>
+                    <span>{t('hero.ctaRegister')}</span>
                     <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                   </Link>
                   <Link
@@ -421,7 +380,7 @@ export default function LandingPage() {
                     rel="noopener noreferrer"
                     className="px-6 sm:px-8 py-3 sm:py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-50 transition-all hover:shadow-xl font-semibold text-base sm:text-lg w-full sm:w-auto text-center"
                   >
-                    Voir la démo
+                    {t('hero.ctaDemo')}
                   </Link>
                 </>
               )}
@@ -429,7 +388,6 @@ export default function LandingPage() {
           </motion.div>
         </div>
 
-        {/* Animated Waves */}
         <div className="absolute bottom-0 left-0 right-0">
           <svg className="w-full h-24 lg:h-32" viewBox="0 0 1440 120" preserveAspectRatio="none">
             <motion.path
@@ -506,10 +464,10 @@ export default function LandingPage() {
             className="text-center mb-10 sm:mb-16"
           >
             <h2 className="text-2xl sm:text-4xl lg:text-5xl font-bold text-brand-navy mb-3 sm:mb-4">
-              Pourquoi choisir Xpeditis ?
+              {t('features.title')}
             </h2>
             <p className="text-base sm:text-xl text-gray-600 max-w-2xl mx-auto">
-              Une plateforme complète pour gérer tous vos besoins en fret maritime
+              {t('features.subtitle')}
             </p>
           </motion.div>
 
@@ -534,7 +492,6 @@ export default function LandingPage() {
                     rel="noopener noreferrer"
                     className="group flex flex-col h-full bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all border border-gray-100 hover:border-brand-turquoise/30 relative overflow-hidden"
                   >
-                    {/* Gradient accent bar on top — always visible, intensifies on hover */}
                     <div
                       className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${feature.color} opacity-40 group-hover:opacity-100 transition-opacity duration-300`}
                     />
@@ -547,9 +504,10 @@ export default function LandingPage() {
                       {feature.title}
                     </h3>
                     <p className="text-gray-600 leading-relaxed flex-1">{feature.description}</p>
-                    {/* CTA always visible */}
                     <div className="mt-5 pt-4 border-t border-gray-100 flex items-center justify-between">
-                      <span className="text-brand-turquoise font-semibold text-sm">Découvrir</span>
+                      <span className="text-brand-turquoise font-semibold text-sm">
+                        {tCommon('discover')}
+                      </span>
                       <div className="w-8 h-8 rounded-full bg-brand-turquoise/10 group-hover:bg-brand-turquoise/20 flex items-center justify-center transition-colors">
                         <ArrowRight className="w-4 h-4 text-brand-turquoise group-hover:translate-x-0.5 transition-transform" />
                       </div>
@@ -574,9 +532,9 @@ export default function LandingPage() {
             className="text-center mb-12"
           >
             <h3 className="text-2xl font-bold text-brand-navy mb-2">
-              En partenariat avec les plus grandes compagnies maritimes
+              {t('partners.title')}
             </h3>
-            <p className="text-gray-600">Accédez aux tarifs de 50+ transporteurs mondiaux</p>
+            <p className="text-gray-600">{t('partners.subtitle')}</p>
           </motion.div>
 
           <motion.div
@@ -623,7 +581,6 @@ export default function LandingPage() {
         className="py-12 sm:py-20 lg:py-32 bg-gradient-to-b from-white to-gray-50"
       >
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          {/* Header */}
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             animate={isPricingInView ? { opacity: 1, y: 0 } : {}}
@@ -631,17 +588,16 @@ export default function LandingPage() {
             className="text-center mb-8 sm:mb-12"
           >
             <span className="inline-block bg-brand-turquoise/10 text-brand-turquoise text-sm font-semibold px-4 py-1.5 rounded-full mb-4 uppercase tracking-wide">
-              Tarifs
+              {t('pricing.badge')}
             </span>
             <h2 className="text-2xl sm:text-4xl lg:text-5xl font-bold text-brand-navy mb-3 sm:mb-4">
-              Des plans adaptés à votre activité
+              {t('pricing.title')}
             </h2>
             <p className="text-base sm:text-xl text-gray-600 max-w-2xl mx-auto">
-              De l'accès découverte au partenariat sur mesure — évoluez à tout moment.
+              {t('pricing.subtitle')}
             </p>
           </motion.div>
 
-          {/* Billing Toggle */}
           <motion.div
             initial={{ opacity: 0, y: 10 }}
             animate={isPricingInView ? { opacity: 1, y: 0 } : {}}
@@ -649,7 +605,7 @@ export default function LandingPage() {
             className="flex items-center justify-center gap-4 mb-12"
           >
             <span className={`text-sm font-medium ${!billingYearly ? 'text-brand-navy' : 'text-gray-400'}`}>
-              Mensuel
+              {t('pricing.monthly')}
             </span>
             <button
               onClick={() => setBillingYearly(v => !v)}
@@ -664,164 +620,166 @@ export default function LandingPage() {
               />
             </button>
             <span className={`text-sm font-medium ${billingYearly ? 'text-brand-navy' : 'text-gray-400'}`}>
-              Annuel
+              {t('pricing.yearly')}
             </span>
             {billingYearly && (
               <span className="bg-brand-green/10 text-brand-green text-xs font-bold px-2.5 py-1 rounded-full">
-                1 mois offert
+                {t('pricing.yearlySaving')}
               </span>
             )}
           </motion.div>
 
-          {/* Plans Grid */}
           <motion.div
             variants={containerVariants}
             initial="hidden"
             animate={isPricingInView ? 'visible' : 'hidden'}
             className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 items-stretch"
           >
-            {pricingPlans.map((plan, index) => (
-              <motion.div
-                key={plan.key}
-                variants={itemVariants}
-                whileHover={{ y: -6 }}
-                className={`relative flex flex-col rounded-2xl transition-all overflow-hidden ${
-                  plan.highlighted
-                    ? 'bg-brand-navy shadow-2xl ring-2 ring-brand-turquoise'
-                    : 'bg-white shadow-lg border border-gray-100 hover:shadow-xl hover:border-brand-turquoise/30'
-                }`}
-              >
-                {/* Top gradient bar */}
-                <div className={`h-1.5 w-full bg-gradient-to-r ${plan.accentColor}`} />
+            {pricingPlans.map((plan) => {
+              const planName = t(`pricing.plans.${plan.key}.name` as any);
+              const planDescription = t(`pricing.plans.${plan.key}.description` as any);
+              const planUsers = t(`pricing.plans.${plan.key}.users` as any);
+              const planShipments = t(`pricing.plans.${plan.key}.shipments` as any);
+              const planCta = t(`pricing.plans.${plan.key}.cta` as any);
+              const planFeatures = planFeaturesByKey[plan.key] ?? [];
 
-                {/* Popular badge */}
-                {plan.badge && plan.key === 'silver' && (
-                  <div className="absolute top-4 right-4">
-                    <span className="bg-brand-turquoise text-white text-xs font-bold px-2.5 py-1 rounded-full">
-                      {plan.badge}
-                    </span>
-                  </div>
-                )}
-                {plan.badge && plan.key === 'platinium' && (
-                  <div className="absolute top-4 right-4">
-                    <span className="bg-gradient-to-r from-brand-navy to-brand-turquoise text-white text-xs font-bold px-2.5 py-1 rounded-full">
-                      {plan.badge}
-                    </span>
-                  </div>
-                )}
+              return (
+                <motion.div
+                  key={plan.key}
+                  variants={itemVariants}
+                  whileHover={{ y: -6 }}
+                  className={`relative flex flex-col rounded-2xl transition-all overflow-hidden ${
+                    plan.highlighted
+                      ? 'bg-brand-navy shadow-2xl ring-2 ring-brand-turquoise'
+                      : 'bg-white shadow-lg border border-gray-100 hover:shadow-xl hover:border-brand-turquoise/30'
+                  }`}
+                >
+                  <div className={`h-1.5 w-full bg-gradient-to-r ${plan.accentColor}`} />
 
-                <div className="flex flex-col flex-1 p-6">
-                  {/* Plan name */}
-                  <div className="mb-4">
-                    <div className={`inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider px-2.5 py-1 rounded-full mb-3 ${plan.highlighted ? 'bg-white/10 text-white/70' : plan.badgeBg}`}>
-                      <div className={`w-1.5 h-1.5 rounded-full bg-gradient-to-r ${plan.accentColor}`} />
-                      {plan.name}
-                    </div>
-                    <h3 className={`text-xl font-bold mb-1 ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
-                      {plan.description}
-                    </h3>
-                  </div>
-
-                  {/* Price */}
-                  <div className="mb-6">
-                    {plan.monthlyPrice === null ? (
-                      <div>
-                        <span className={`text-3xl font-bold ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
-                          Sur mesure
-                        </span>
-                        <p className={`text-sm mt-1 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
-                          Tarification personnalisée
-                        </p>
-                      </div>
-                    ) : plan.monthlyPrice === 0 ? (
-                      <div>
-                        <span className={`text-4xl font-bold ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
-                          Gratuit
-                        </span>
-                        <p className={`text-sm mt-1 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
-                          Pour toujours
-                        </p>
-                      </div>
-                    ) : (
-                      <div>
-                        <div className="flex items-end gap-1">
-                          <span className={`text-4xl font-bold ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
-                            {billingYearly ? plan.yearlyMonthly : plan.monthlyPrice}€
-                          </span>
-                          <span className={`text-sm pb-1.5 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
-                            /mois
-                          </span>
-                        </div>
-                        {billingYearly ? (
-                          <p className={`text-xs mt-1 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
-                            Facturé {plan.yearlyPrice?.toLocaleString('fr-FR')}€/an
-                          </p>
-                        ) : (
-                          <p className={`text-xs mt-1 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-turquoise'}`}>
-                            Économisez 1 mois avec l'annuel
-                          </p>
-                        )}
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Key stats */}
-                  <div className={`rounded-xl p-3 mb-5 space-y-2 ${plan.highlighted ? 'bg-white/10' : 'bg-gray-50'}`}>
-                    <div className="flex items-center gap-2">
-                      <Users className={`w-3.5 h-3.5 flex-shrink-0 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-turquoise'}`} />
-                      <span className={`text-xs font-medium ${plan.highlighted ? 'text-white/80' : 'text-gray-700'}`}>{plan.users}</span>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <Ship className={`w-3.5 h-3.5 flex-shrink-0 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-turquoise'}`} />
-                      <span className={`text-xs font-medium ${plan.highlighted ? 'text-white/80' : 'text-gray-700'}`}>{plan.shipments}</span>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <BarChart3 className={`w-3.5 h-3.5 flex-shrink-0 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-turquoise'}`} />
-                      <span className={`text-xs font-medium ${plan.highlighted ? 'text-white/80' : 'text-gray-700'}`}>
-                        Commission {plan.commission}
+                  {plan.badge === 'popular' && (
+                    <div className="absolute top-4 right-4">
+                      <span className="bg-brand-turquoise text-white text-xs font-bold px-2.5 py-1 rounded-full">
+                        {t('pricing.popularBadge')}
                       </span>
                     </div>
-                  </div>
+                  )}
+                  {plan.badge === 'custom' && (
+                    <div className="absolute top-4 right-4">
+                      <span className="bg-gradient-to-r from-brand-navy to-brand-turquoise text-white text-xs font-bold px-2.5 py-1 rounded-full">
+                        {t('pricing.customBadge')}
+                      </span>
+                    </div>
+                  )}
 
-                  {/* Features */}
-                  <ul className="space-y-2.5 mb-6 flex-1">
-                    {plan.features.map((feature, featureIndex) => (
-                      <li key={featureIndex} className="flex items-start gap-2.5">
-                        {feature.included ? (
-                          <Check className={`w-4 h-4 flex-shrink-0 mt-0.5 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-green'}`} />
-                        ) : (
-                          <X className={`w-4 h-4 flex-shrink-0 mt-0.5 ${plan.highlighted ? 'text-white/20' : 'text-gray-300'}`} />
-                        )}
-                        <span className={`text-sm ${
-                          feature.included
-                            ? plan.highlighted ? 'text-white/90' : 'text-gray-700'
-                            : plan.highlighted ? 'text-white/30' : 'text-gray-400'
-                        }`}>
-                          {feature.text}
+                  <div className="flex flex-col flex-1 p-6">
+                    <div className="mb-4">
+                      <div className={`inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider px-2.5 py-1 rounded-full mb-3 ${plan.highlighted ? 'bg-white/10 text-white/70' : plan.badgeBg}`}>
+                        <div className={`w-1.5 h-1.5 rounded-full bg-gradient-to-r ${plan.accentColor}`} />
+                        {planName}
+                      </div>
+                      <h3 className={`text-xl font-bold mb-1 ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
+                        {planDescription}
+                      </h3>
+                    </div>
+
+                    <div className="mb-6">
+                      {plan.monthlyPrice === null ? (
+                        <div>
+                          <span className={`text-3xl font-bold ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
+                            {t('pricing.custom')}
+                          </span>
+                          <p className={`text-sm mt-1 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
+                            {t('pricing.customSubtitle')}
+                          </p>
+                        </div>
+                      ) : plan.monthlyPrice === 0 ? (
+                        <div>
+                          <span className={`text-4xl font-bold ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
+                            {t('pricing.free')}
+                          </span>
+                          <p className={`text-sm mt-1 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
+                            {t('pricing.freeSubtitle')}
+                          </p>
+                        </div>
+                      ) : (
+                        <div>
+                          <div className="flex items-end gap-1">
+                            <span className={`text-4xl font-bold ${plan.highlighted ? 'text-white' : 'text-brand-navy'}`}>
+                              {billingYearly ? plan.yearlyMonthly : plan.monthlyPrice}€
+                            </span>
+                            <span className={`text-sm pb-1.5 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
+                              {t('pricing.perMonth')}
+                            </span>
+                          </div>
+                          {billingYearly ? (
+                            <p className={`text-xs mt-1 ${plan.highlighted ? 'text-white/60' : 'text-gray-500'}`}>
+                              {t('pricing.billedYearly', {
+                                price: numberFormat.format(plan.yearlyPrice ?? 0),
+                              })}
+                            </p>
+                          ) : (
+                            <p className="text-xs mt-1 text-brand-turquoise">
+                              {t('pricing.saveWithYearly')}
+                            </p>
+                          )}
+                        </div>
+                      )}
+                    </div>
+
+                    <div className={`rounded-xl p-3 mb-5 space-y-2 ${plan.highlighted ? 'bg-white/10' : 'bg-gray-50'}`}>
+                      <div className="flex items-center gap-2">
+                        <Users className="w-3.5 h-3.5 flex-shrink-0 text-brand-turquoise" />
+                        <span className={`text-xs font-medium ${plan.highlighted ? 'text-white/80' : 'text-gray-700'}`}>{planUsers}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Ship className="w-3.5 h-3.5 flex-shrink-0 text-brand-turquoise" />
+                        <span className={`text-xs font-medium ${plan.highlighted ? 'text-white/80' : 'text-gray-700'}`}>{planShipments}</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <BarChart3 className="w-3.5 h-3.5 flex-shrink-0 text-brand-turquoise" />
+                        <span className={`text-xs font-medium ${plan.highlighted ? 'text-white/80' : 'text-gray-700'}`}>
+                          {t('pricing.commission', { rate: plan.commission })}
                         </span>
-                      </li>
-                    ))}
-                  </ul>
+                      </div>
+                    </div>
 
-                  {/* CTA */}
-                  <Link
-                    href={plan.ctaLink}
-                    className={`block w-full text-center py-3 px-6 rounded-xl font-semibold text-sm transition-all ${
-                      plan.highlighted
-                        ? 'bg-brand-turquoise text-white hover:bg-brand-turquoise/90 shadow-lg shadow-brand-turquoise/30 hover:shadow-xl'
-                        : plan.key === 'bronze'
-                        ? 'bg-gray-100 text-brand-navy hover:bg-gray-200'
-                        : 'bg-brand-navy text-white hover:bg-brand-navy/90 shadow-md hover:shadow-lg'
-                    }`}
-                  >
-                    {plan.cta}
-                  </Link>
-                </div>
-              </motion.div>
-            ))}
+                    <ul className="space-y-2.5 mb-6 flex-1">
+                      {planFeatures.map((feature, featureIndex) => (
+                        <li key={featureIndex} className="flex items-start gap-2.5">
+                          {feature.included ? (
+                            <Check className={`w-4 h-4 flex-shrink-0 mt-0.5 ${plan.highlighted ? 'text-brand-turquoise' : 'text-brand-green'}`} />
+                          ) : (
+                            <X className={`w-4 h-4 flex-shrink-0 mt-0.5 ${plan.highlighted ? 'text-white/20' : 'text-gray-300'}`} />
+                          )}
+                          <span className={`text-sm ${
+                            feature.included
+                              ? plan.highlighted ? 'text-white/90' : 'text-gray-700'
+                              : plan.highlighted ? 'text-white/30' : 'text-gray-400'
+                          }`}>
+                            {t(`pricing.features.${feature.key}` as any)}
+                          </span>
+                        </li>
+                      ))}
+                    </ul>
+
+                    <Link
+                      href={plan.ctaLink}
+                      className={`block w-full text-center py-3 px-6 rounded-xl font-semibold text-sm transition-all ${
+                        plan.highlighted
+                          ? 'bg-brand-turquoise text-white hover:bg-brand-turquoise/90 shadow-lg shadow-brand-turquoise/30 hover:shadow-xl'
+                          : plan.key === 'bronze'
+                          ? 'bg-gray-100 text-brand-navy hover:bg-gray-200'
+                          : 'bg-brand-navy text-white hover:bg-brand-navy/90 shadow-md hover:shadow-lg'
+                      }`}
+                    >
+                      {planCta}
+                    </Link>
+                  </div>
+                </motion.div>
+              );
+            })}
           </motion.div>
 
-          {/* Bottom note */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={isPricingInView ? { opacity: 1, y: 0 } : {}}
@@ -829,12 +787,12 @@ export default function LandingPage() {
             className="mt-12 text-center space-y-2"
           >
             <p className="text-gray-600 text-sm">
-              Sans engagement · Résiliable à tout moment
+              {t('pricing.noCommitment')}
             </p>
             <p className="text-sm text-gray-500">
-              Des questions ?{' '}
+              {t('pricing.questions')}{' '}
               <Link href="/contact" className="text-brand-turquoise font-medium hover:underline">
-                Contactez notre équipe commerciale
+                {t('pricing.contactSales')}
               </Link>
             </p>
           </motion.div>
@@ -858,15 +816,13 @@ export default function LandingPage() {
             transition={{ duration: 0.8 }}
             className="text-center mb-16"
           >
-            <h2 className="text-4xl lg:text-5xl font-bold text-white mb-4">Comment ça marche ?</h2>
+            <h2 className="text-4xl lg:text-5xl font-bold text-white mb-4">{t('howItWorks.title')}</h2>
             <p className="text-xl text-white/80 max-w-2xl mx-auto">
-              Réservez votre fret maritime en 4 étapes simples
+              {t('howItWorks.subtitle')}
             </p>
           </motion.div>
 
-          {/* Steps grid with animated connecting line */}
           <div className="relative">
-            {/* Animated progress line — desktop only */}
             <div className="hidden lg:block absolute top-10 left-[12.5%] right-[12.5%] h-px bg-white/15">
               <motion.div
                 initial={{ scaleX: 0 }}
@@ -879,30 +835,10 @@ export default function LandingPage() {
 
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
               {[
-                {
-                  step: '01',
-                  title: 'Recherchez',
-                  description: "Entrez vos ports de départ et d'arrivée",
-                  icon: Search,
-                },
-                {
-                  step: '02',
-                  title: 'Comparez',
-                  description: 'Analysez les tarifs de 50+ compagnies',
-                  icon: BarChart3,
-                },
-                {
-                  step: '03',
-                  title: 'Réservez',
-                  description: 'Confirmez votre réservation en un clic',
-                  icon: CheckCircle2,
-                },
-                {
-                  step: '04',
-                  title: 'Suivez',
-                  description: 'Suivez votre envoi en temps réel',
-                  icon: Container,
-                },
+                { stepKey: 'step1', step: '01', icon: Search },
+                { stepKey: 'step2', step: '02', icon: BarChart3 },
+                { stepKey: 'step3', step: '03', icon: CheckCircle2 },
+                { stepKey: 'step4', step: '04', icon: Container },
               ].map((step, index) => {
                 const IconComponent = step.icon;
                 return (
@@ -913,27 +849,28 @@ export default function LandingPage() {
                     transition={{ duration: 0.6, delay: 0.3 + index * 0.15 }}
                     className="text-center relative z-10"
                   >
-                    {/* Clean number circle — no icon overlay */}
                     <div className="mb-5">
                       <div className="w-20 h-20 bg-brand-turquoise rounded-full flex items-center justify-center text-3xl font-bold text-white mx-auto shadow-xl ring-4 ring-brand-turquoise/20">
                         {step.step}
                       </div>
                     </div>
-                    {/* Icon badge — separate from the number */}
                     <div className="flex justify-center mb-3">
                       <div className="p-2 bg-white/10 rounded-lg">
                         <IconComponent className="w-5 h-5 text-brand-turquoise" />
                       </div>
                     </div>
-                    <h3 className="text-xl font-bold text-white mb-2">{step.title}</h3>
-                    <p className="text-white/70 text-sm leading-relaxed">{step.description}</p>
+                    <h3 className="text-xl font-bold text-white mb-2">
+                      {t(`howItWorks.${step.stepKey}.title` as any)}
+                    </h3>
+                    <p className="text-white/70 text-sm leading-relaxed">
+                      {t(`howItWorks.${step.stepKey}.description` as any)}
+                    </p>
                   </motion.div>
                 );
               })}
             </div>
           </div>
 
-          {/* CTA after last step */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={isHowInView ? { opacity: 1, y: 0 } : {}}
@@ -946,11 +883,11 @@ export default function LandingPage() {
               rel="noopener noreferrer"
               className="inline-flex items-center space-x-2 px-8 py-4 bg-brand-turquoise text-white rounded-xl font-semibold text-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 group"
             >
-              <span>Essayer maintenant</span>
+              <span>{tCommon('tryNow')}</span>
               <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
             </Link>
             <p className="mt-3 text-white/50 text-sm">
-              Inscription gratuite · Aucune carte bancaire requise
+              {t('howItWorks.ctaHint')}
             </p>
           </motion.div>
         </div>
@@ -969,10 +906,10 @@ export default function LandingPage() {
             className="text-center mb-10 sm:mb-16"
           >
             <h2 className="text-2xl sm:text-4xl lg:text-5xl font-bold text-brand-navy mb-3 sm:mb-4">
-              Ils nous font confiance
+              {t('testimonials.title')}
             </h2>
             <p className="text-base sm:text-xl text-gray-600 max-w-2xl mx-auto">
-              Découvrez les témoignages de nos clients satisfaits
+              {t('testimonials.subtitle')}
             </p>
           </motion.div>
 
@@ -1023,11 +960,10 @@ export default function LandingPage() {
         >
           <motion.div variants={itemVariants}>
             <h2 className="text-2xl sm:text-4xl lg:text-5xl font-bold text-brand-navy mb-4 sm:mb-6">
-              Prêt à simplifier votre fret maritime ?
+              {t('cta.title')}
             </h2>
             <p className="text-base sm:text-xl text-gray-600 mb-8 sm:mb-10">
-              Rejoignez des centaines de transitaires qui font confiance à Xpeditis pour leurs
-              expéditions maritimes.
+              {t('cta.subtitle')}
             </p>
           </motion.div>
 
@@ -1042,7 +978,7 @@ export default function LandingPage() {
                 rel="noopener noreferrer"
                 className="group px-6 sm:px-8 py-3 sm:py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-base sm:text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
               >
-                <span>Accéder au tableau de bord</span>
+                <span>{t('cta.ctaAuthenticated')}</span>
                 <LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
               </Link>
             ) : (
@@ -1053,7 +989,7 @@ export default function LandingPage() {
                   rel="noopener noreferrer"
                   className="group px-6 sm:px-8 py-3 sm:py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl hover:scale-105 font-semibold text-base sm:text-lg w-full sm:w-auto flex items-center justify-center space-x-2"
                 >
-                  <span>Créer un compte gratuit</span>
+                  <span>{t('cta.ctaRegister')}</span>
                   <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                 </Link>
                 <Link
@@ -1062,7 +998,7 @@ export default function LandingPage() {
                   rel="noopener noreferrer"
                   className="px-6 sm:px-8 py-3 sm:py-4 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-all hover:shadow-xl font-semibold text-base sm:text-lg w-full sm:w-auto text-center"
                 >
-                  Se connecter
+                  {t('cta.ctaLogin')}
                 </Link>
               </>
             )}
@@ -1074,15 +1010,15 @@ export default function LandingPage() {
           >
             <div className="flex items-center space-x-2">
               <CheckCircle2 className="w-4 h-4 text-brand-green" />
-              <span>Sans carte bancaire</span>
+              <span>{t('cta.features.noCard')}</span>
             </div>
             <div className="flex items-center space-x-2">
               <Clock className="w-4 h-4 text-brand-green" />
-              <span>Configuration en 2 min</span>
+              <span>{t('cta.features.quickSetup')}</span>
             </div>
             <div className="flex items-center space-x-2">
               <Shield className="w-4 h-4 text-brand-green" />
-              <span>Données sécurisées</span>
+              <span>{t('cta.features.secure')}</span>
             </div>
           </motion.div>
         </motion.div>
diff --git a/apps/frontend/app/press/page.tsx b/apps/frontend/app/[locale]/press/page.tsx
similarity index 70%
rename from apps/frontend/app/press/page.tsx
rename to apps/frontend/app/[locale]/press/page.tsx
index f52d5bd..2a4c8a5 100644
--- a/apps/frontend/app/press/page.tsx
+++ b/apps/frontend/app/[locale]/press/page.tsx
@@ -1,578 +1,505 @@
-'use client';
-
-import { useRef } from 'react';
-import { motion, useInView } from 'framer-motion';
-import {
-  Newspaper,
-  Download,
-  ExternalLink,
-  Calendar,
-  Mail,
-  Phone,
-  FileText,
-  Image as ImageIcon,
-  Video,
-  Award,
-  TrendingUp,
-  Users,
-  Globe,
-  ArrowRight,
-  Quote,
-} from 'lucide-react';
-import { LandingHeader, LandingFooter } from '@/components/layout';
-
-export default function PressPage() {
-  const heroRef = useRef(null);
-  const newsRef = useRef(null);
-  const resourcesRef = useRef(null);
-  const contactRef = useRef(null);
-  const milestonesRef = useRef(null);
-
-  const isHeroInView = useInView(heroRef, { once: true });
-  const isNewsInView = useInView(newsRef, { once: true });
-  const isResourcesInView = useInView(resourcesRef, { once: true });
-  const isContactInView = useInView(contactRef, { once: true });
-  const isMilestonesInView = useInView(milestonesRef, { once: true });
-
-  const pressReleases = [
-    {
-      id: 1,
-      title: 'Xpeditis lève 15 millions d\'euros pour accélérer son expansion européenne',
-      date: '15 janvier 2025',
-      excerpt:
-        'La startup française de fret maritime digital annonce une levée de fonds Série A menée par Partech et Eurazeo.',
-      category: 'Financement',
-      pdfUrl: '#',
-    },
-    {
-      id: 2,
-      title: 'Xpeditis franchit le cap des 500 clients actifs',
-      date: '8 janvier 2025',
-      excerpt:
-        'La plateforme B2B de fret maritime confirme sa position de leader en Europe avec une croissance de 200% en 2024.',
-      category: 'Croissance',
-      pdfUrl: '#',
-    },
-    {
-      id: 3,
-      title: 'Partenariat stratégique avec CMA CGM',
-      date: '15 décembre 2024',
-      excerpt:
-        'Xpeditis intègre l\'offre complète du groupe CMA CGM, offrant encore plus de choix à ses utilisateurs.',
-      category: 'Partenariat',
-      pdfUrl: '#',
-    },
-    {
-      id: 4,
-      title: 'Lancement de nouvelles fonctionnalités de tracking en temps réel',
-      date: '1er décembre 2024',
-      excerpt:
-        'La plateforme enrichit son offre avec un système de suivi des conteneurs amélioré et des notifications proactives.',
-      category: 'Produit',
-      pdfUrl: '#',
-    },
-    {
-      id: 5,
-      title: 'Ouverture du bureau de Rotterdam',
-      date: '15 novembre 2024',
-      excerpt:
-        'Xpeditis poursuit son expansion avec l\'ouverture d\'un nouveau bureau aux Pays-Bas pour servir le marché Benelux.',
-      category: 'Expansion',
-      pdfUrl: '#',
-    },
-  ];
-
-  const mediaCoverage = [
-    {
-      outlet: 'Les Echos',
-      title: 'Xpeditis, la startup qui digitalise le fret maritime',
-      date: '12 janvier 2025',
-      url: '#',
-      logo: '/assets/logos/media/les-echos.png',
-    },
-    {
-      outlet: 'BFM Business',
-      title: 'Comment l\'IA révolutionne la logistique maritime',
-      date: '10 janvier 2025',
-      url: '#',
-      logo: '/assets/logos/media/bfm.png',
-    },
-    {
-      outlet: 'Journal de la Marine Marchande',
-      title: 'Les plateformes digitales au service des transitaires',
-      date: '5 janvier 2025',
-      url: '#',
-      logo: '/assets/logos/media/jmm.png',
-    },
-    {
-      outlet: 'Tech.eu',
-      title: 'French logistics startup Xpeditis raises €15M',
-      date: '15 janvier 2025',
-      url: '#',
-      logo: '/assets/logos/media/tech-eu.png',
-    },
-  ];
-
-  const pressKitItems = [
-    {
-      icon: ImageIcon,
-      title: 'Logos & Visuels',
-      description: 'Logos en haute résolution (PNG, SVG) et visuels de la plateforme',
-      downloadUrl: '#',
-      format: 'ZIP - 12 MB',
-    },
-    {
-      icon: FileText,
-      title: 'Dossier de presse',
-      description: 'Présentation complète de Xpeditis, chiffres clés et biographies des fondateurs',
-      downloadUrl: '#',
-      format: 'PDF - 4 MB',
-    },
-    {
-      icon: Video,
-      title: 'Vidéos & B-Roll',
-      description: 'Vidéos de présentation et séquences B-Roll pour vos reportages',
-      downloadUrl: '#',
-      format: 'MP4 - 250 MB',
-    },
-  ];
-
-  const milestones = [
-    { year: '2021', event: 'Création de Xpeditis', icon: Award },
-    { year: '2022', event: 'Première version lancée', icon: TrendingUp },
-    { year: '2023', event: 'Levée Seed de 3M€', icon: TrendingUp },
-    { year: '2024', event: '500 clients actifs', icon: Users },
-    { year: '2025', event: 'Série A - 15M€', icon: Globe },
-  ];
-
-  const containerVariants = {
-    hidden: { opacity: 0, y: 50 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.6,
-        staggerChildren: 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: 0.5 },
-    },
-  };
-
-  return (
-    <div className="min-h-screen bg-white">
-      <LandingHeader activePage="press" />
-
-      {/* Hero Section */}
-      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
-          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center"
-          >
-            <motion.div
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
-            >
-              <Newspaper className="w-5 h-5 text-brand-turquoise" />
-              <span className="text-white/90 text-sm font-medium">Espace Presse</span>
-            </motion.div>
-
-            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
-              Espace Presse
-              <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
-                Xpeditis
-              </span>
-            </h1>
-
-            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
-              Retrouvez tous nos communiqués de presse, ressources médias et informations
-              pour les journalistes. Notre équipe communication est à votre disposition.
-            </p>
-
-            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
-              <a
-                href="#resources"
-                className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl font-semibold text-lg flex items-center space-x-2"
-              >
-                <Download className="w-5 h-5" />
-                <span>Kit Presse</span>
-              </a>
-              <a
-                href="#contact"
-                className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-all font-semibold text-lg"
-              >
-                Contact Presse
-              </a>
-            </div>
-          </motion.div>
-        </div>
-
-        {/* Wave */}
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
-            <path
-              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
-              fill="white"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* Key Stats */}
-      <section className="py-16 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
-            {[
-              { value: '15M€', label: 'Levée de fonds' },
-              { value: '500+', label: 'Clients actifs' },
-              { value: '50+', label: 'Compagnies maritimes' },
-              { value: '15', label: 'Pays couverts' },
-            ].map((stat, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
-                className="text-center"
-              >
-                <div className="text-5xl font-bold text-brand-turquoise mb-2">{stat.value}</div>
-                <div className="text-gray-600 font-medium">{stat.label}</div>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Press Releases */}
-      <section ref={newsRef} className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isNewsInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
-              Communiqués de Presse
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Les dernières actualités officielles de Xpeditis
-            </p>
-          </motion.div>
-
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isNewsInView ? 'visible' : 'hidden'}
-            className="space-y-6"
-          >
-            {pressReleases.map((release) => (
-              <motion.div
-                key={release.id}
-                variants={itemVariants}
-                className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all group"
-              >
-                <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-                  <div className="flex-1">
-                    <div className="flex items-center space-x-3 mb-2">
-                      <span className="px-3 py-1 bg-brand-turquoise/10 text-brand-turquoise text-sm font-medium rounded-full">
-                        {release.category}
-                      </span>
-                      <span className="flex items-center space-x-1 text-gray-500 text-sm">
-                        <Calendar className="w-4 h-4" />
-                        <span>{release.date}</span>
-                      </span>
-                    </div>
-                    <h3 className="text-xl font-bold text-brand-navy mb-2 group-hover:text-brand-turquoise transition-colors">
-                      {release.title}
-                    </h3>
-                    <p className="text-gray-600">{release.excerpt}</p>
-                  </div>
-                  <div className="flex items-center space-x-3">
-                    <a
-                      href={release.pdfUrl}
-                      className="flex items-center space-x-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
-                    >
-                      <Download className="w-4 h-4" />
-                      <span>PDF</span>
-                    </a>
-                    <a
-                      href={`/press/${release.id}`}
-                      className="flex items-center space-x-2 px-4 py-2 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors"
-                    >
-                      <span>Lire</span>
-                      <ArrowRight className="w-4 h-4" />
-                    </a>
-                  </div>
-                </div>
-              </motion.div>
-            ))}
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Media Coverage */}
-      <section className="py-20 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
-              Ils parlent de nous
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Retrouvez les articles de presse mentionnant Xpeditis
-            </p>
-          </motion.div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {mediaCoverage.map((article, index) => (
-              <motion.a
-                key={index}
-                href={article.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
-                whileHover={{ y: -5 }}
-                className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
-              >
-                <div className="flex items-start space-x-4">
-                  <div className="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center flex-shrink-0">
-                    <Newspaper className="w-8 h-8 text-gray-400" />
-                  </div>
-                  <div className="flex-1">
-                    <div className="flex items-center justify-between mb-2">
-                      <span className="font-bold text-brand-turquoise">{article.outlet}</span>
-                      <ExternalLink className="w-4 h-4 text-gray-400 group-hover:text-brand-turquoise transition-colors" />
-                    </div>
-                    <h3 className="text-lg font-bold text-brand-navy mb-2 group-hover:text-brand-turquoise transition-colors">
-                      {article.title}
-                    </h3>
-                    <span className="text-gray-500 text-sm">{article.date}</span>
-                  </div>
-                </div>
-              </motion.a>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Press Kit Resources */}
-      <section ref={resourcesRef} id="resources" className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isResourcesInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
-              Kit Presse
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Téléchargez tous les éléments dont vous avez besoin pour vos articles
-            </p>
-          </motion.div>
-
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isResourcesInView ? 'visible' : 'hidden'}
-            className="grid grid-cols-1 md:grid-cols-3 gap-8"
-          >
-            {pressKitItems.map((item, index) => {
-              const IconComponent = item.icon;
-              return (
-                <motion.div
-                  key={index}
-                  variants={itemVariants}
-                  whileHover={{ y: -10 }}
-                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
-                >
-                  <div className="w-16 h-16 bg-brand-turquoise/10 rounded-2xl flex items-center justify-center mb-6">
-                    <IconComponent className="w-8 h-8 text-brand-turquoise" />
-                  </div>
-                  <h3 className="text-xl font-bold text-brand-navy mb-2">{item.title}</h3>
-                  <p className="text-gray-600 mb-4">{item.description}</p>
-                  <div className="flex items-center justify-between">
-                    <span className="text-sm text-gray-500">{item.format}</span>
-                    <a
-                      href={item.downloadUrl}
-                      className="flex items-center space-x-2 text-brand-turquoise font-medium hover:underline"
-                    >
-                      <Download className="w-4 h-4" />
-                      <span>Télécharger</span>
-                    </a>
-                  </div>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Milestones */}
-      <section ref={milestonesRef} className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isMilestonesInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-4xl lg:text-5xl font-bold text-white mb-4">
-              Notre Parcours
-            </h2>
-            <p className="text-xl text-white/80 max-w-2xl mx-auto">
-              Les grandes étapes de l'histoire de Xpeditis
-            </p>
-          </motion.div>
-
-          <div className="flex flex-wrap justify-center gap-8">
-            {milestones.map((milestone, index) => {
-              const IconComponent = milestone.icon;
-              return (
-                <motion.div
-                  key={index}
-                  initial={{ opacity: 0, scale: 0.8 }}
-                  animate={isMilestonesInView ? { opacity: 1, scale: 1 } : {}}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
-                  className="text-center"
-                >
-                  <div className="w-20 h-20 bg-brand-turquoise rounded-full flex items-center justify-center mx-auto mb-4">
-                    <IconComponent className="w-10 h-10 text-white" />
-                  </div>
-                  <div className="text-2xl font-bold text-brand-turquoise mb-1">{milestone.year}</div>
-                  <div className="text-white/80 max-w-[150px]">{milestone.event}</div>
-                </motion.div>
-              );
-            })}
-          </div>
-        </div>
-      </section>
-
-      {/* Press Contact */}
-      <section ref={contactRef} id="contact" className="py-20">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isContactInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-12"
-          >
-            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
-              Contact Presse
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Notre équipe communication est à votre disposition pour toute demande d'interview,
-              d'information ou de partenariat média.
-            </p>
-          </motion.div>
-
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={isContactInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.6, delay: 0.2 }}
-            className="bg-white rounded-3xl shadow-xl border border-gray-100 p-8 lg:p-12"
-          >
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-              <div>
-                <h3 className="text-2xl font-bold text-brand-navy mb-6">Relations Presse</h3>
-                <div className="space-y-4">
-                  <div className="flex items-center space-x-4">
-                    <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
-                      <Mail className="w-6 h-6 text-brand-turquoise" />
-                    </div>
-                    <div>
-                      <div className="text-sm text-gray-500">Email</div>
-                      <a
-                        href="mailto:presse@xpeditis.com"
-                        className="text-lg font-medium text-brand-navy hover:text-brand-turquoise transition-colors"
-                      >
-                        presse@xpeditis.com
-                      </a>
-                    </div>
-                  </div>
-                  <div className="flex items-center space-x-4">
-                    <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
-                      <Phone className="w-6 h-6 text-brand-turquoise" />
-                    </div>
-                    <div>
-                      <div className="text-sm text-gray-500">Téléphone</div>
-                      <a
-                        href="tel:+33123456790"
-                        className="text-lg font-medium text-brand-navy hover:text-brand-turquoise transition-colors"
-                      >
-                        +33 1 23 45 67 90
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div>
-                <h3 className="text-2xl font-bold text-brand-navy mb-6">Responsable Communication</h3>
-                <div className="flex items-start space-x-4">
-                  <div className="w-16 h-16 bg-brand-turquoise/10 rounded-full flex items-center justify-center flex-shrink-0">
-                    <Users className="w-8 h-8 text-brand-turquoise" />
-                  </div>
-                  <div>
-                    <div className="text-lg font-bold text-brand-navy">Camille Dumont</div>
-                    <div className="text-brand-turquoise font-medium mb-2">Directrice Communication</div>
-                    <p className="text-gray-600 text-sm">
-                      Disponible pour les interviews, demandes d'information et partenariats médias.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="mt-8 pt-8 border-t border-gray-100">
-              <div className="flex items-start space-x-4 bg-gray-50 p-6 rounded-xl">
-                <Quote className="w-8 h-8 text-brand-turquoise flex-shrink-0" />
-                <div>
-                  <p className="text-gray-600 italic mb-4">
-                    "Nous sommes toujours ravis d'échanger avec les journalistes sur notre mission de
-                    révolutionner le fret maritime. N'hésitez pas à nous contacter pour toute demande."
-                  </p>
-                  <div className="text-sm">
-                    <span className="font-bold text-brand-navy">Jean-Pierre Durand</span>
-                    <span className="text-gray-500"> - CEO & Co-fondateur</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </motion.div>
-        </div>
-      </section>
-
-      <LandingFooter />
-    </div>
-  );
-}
+'use client';
+
+import { useRef } from 'react';
+import { useTranslations } from 'next-intl';
+import { motion, useInView } from 'framer-motion';
+import {
+  Newspaper,
+  Download,
+  ExternalLink,
+  Calendar,
+  Mail,
+  Phone,
+  FileText,
+  Image as ImageIcon,
+  Video,
+  Award,
+  TrendingUp,
+  Users,
+  Globe,
+  ArrowRight,
+  Quote,
+  type LucideIcon,
+} from 'lucide-react';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+
+type StatKey = 'funding' | 'clients' | 'carriers' | 'countries';
+type ReleaseKey = 'seriesA' | 'clients500' | 'cmaCgm' | 'tracking' | 'rotterdam';
+type CoverageKey = 'lesEchos' | 'bfm' | 'jmm' | 'techEu';
+type KitItemKey = 'visuals' | 'dossier' | 'videos';
+type MilestoneKey = '2021' | '2022' | '2023' | '2024' | '2025';
+
+const STATS: { key: StatKey; value: string }[] = [
+  { key: 'funding', value: '15M€' },
+  { key: 'clients', value: '500+' },
+  { key: 'carriers', value: '50+' },
+  { key: 'countries', value: '15' },
+];
+
+const RELEASES: { id: number; key: ReleaseKey }[] = [
+  { id: 1, key: 'seriesA' },
+  { id: 2, key: 'clients500' },
+  { id: 3, key: 'cmaCgm' },
+  { id: 4, key: 'tracking' },
+  { id: 5, key: 'rotterdam' },
+];
+
+const COVERAGE: { key: CoverageKey; outlet: string; url: string }[] = [
+  { key: 'lesEchos', outlet: 'Les Echos', url: '#' },
+  { key: 'bfm', outlet: 'BFM Business', url: '#' },
+  { key: 'jmm', outlet: 'Journal de la Marine Marchande', url: '#' },
+  { key: 'techEu', outlet: 'Tech.eu', url: '#' },
+];
+
+const KIT_ITEMS: { key: KitItemKey; icon: LucideIcon }[] = [
+  { key: 'visuals', icon: ImageIcon },
+  { key: 'dossier', icon: FileText },
+  { key: 'videos', icon: Video },
+];
+
+const MILESTONES: { key: MilestoneKey; icon: LucideIcon }[] = [
+  { key: '2021', icon: Award },
+  { key: '2022', icon: TrendingUp },
+  { key: '2023', icon: TrendingUp },
+  { key: '2024', icon: Users },
+  { key: '2025', icon: Globe },
+];
+
+export default function PressPage() {
+  const t = useTranslations('marketing.press');
+
+  const heroRef = useRef(null);
+  const newsRef = useRef(null);
+  const resourcesRef = useRef(null);
+  const contactRef = useRef(null);
+  const milestonesRef = useRef(null);
+
+  const isHeroInView = useInView(heroRef, { once: true });
+  const isNewsInView = useInView(newsRef, { once: true });
+  const isResourcesInView = useInView(resourcesRef, { once: true });
+  const isContactInView = useInView(contactRef, { once: true });
+  const isMilestonesInView = useInView(milestonesRef, { once: true });
+
+  const containerVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader activePage="press" />
+
+      {/* Hero Section */}
+      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
+          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
+        </div>
+
+        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center"
+          >
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
+            >
+              <Newspaper className="w-5 h-5 text-brand-turquoise" />
+              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
+            </motion.div>
+
+            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+              {t('title1')}
+              <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
+                {t('title2')}
+              </span>
+            </h1>
+
+            <p className="text-xl text-white/80 mb-10 max-w-3xl mx-auto leading-relaxed">
+              {t('intro')}
+            </p>
+
+            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
+              <a
+                href="#resources"
+                className="group px-8 py-4 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-2xl font-semibold text-lg flex items-center space-x-2"
+              >
+                <Download className="w-5 h-5" />
+                <span>{t('pressKit')}</span>
+              </a>
+              <a
+                href="#contact"
+                className="px-8 py-4 bg-white text-brand-navy rounded-lg hover:bg-gray-100 transition-all font-semibold text-lg"
+              >
+                {t('pressContact')}
+              </a>
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Wave */}
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
+            <path
+              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </section>
+
+      {/* Key Stats */}
+      <section className="py-16 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+            {STATS.map((stat, index) => (
+              <motion.div
+                key={stat.key}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="text-center"
+              >
+                <div className="text-5xl font-bold text-brand-turquoise mb-2">{stat.value}</div>
+                <div className="text-gray-600 font-medium">{t(`stats.${stat.key}`)}</div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Press Releases */}
+      <section ref={newsRef} className="py-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isNewsInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
+              {t('releasesTitle')}
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('releasesSubtitle')}
+            </p>
+          </motion.div>
+
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={isNewsInView ? 'visible' : 'hidden'}
+            className="space-y-6"
+          >
+            {RELEASES.map((release) => (
+              <motion.div
+                key={release.id}
+                variants={itemVariants}
+                className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all group"
+              >
+                <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+                  <div className="flex-1">
+                    <div className="flex items-center space-x-3 mb-2">
+                      <span className="px-3 py-1 bg-brand-turquoise/10 text-brand-turquoise text-sm font-medium rounded-full">
+                        {t(`releases.${release.key}.category`)}
+                      </span>
+                      <span className="flex items-center space-x-1 text-gray-500 text-sm">
+                        <Calendar className="w-4 h-4" />
+                        <span>{t(`releases.${release.key}.date`)}</span>
+                      </span>
+                    </div>
+                    <h3 className="text-xl font-bold text-brand-navy mb-2 group-hover:text-brand-turquoise transition-colors">
+                      {t(`releases.${release.key}.title`)}
+                    </h3>
+                    <p className="text-gray-600">{t(`releases.${release.key}.excerpt`)}</p>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <a
+                      href="#"
+                      className="flex items-center space-x-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
+                    >
+                      <Download className="w-4 h-4" />
+                      <span>PDF</span>
+                    </a>
+                    <a
+                      href={`/press/${release.id}`}
+                      className="flex items-center space-x-2 px-4 py-2 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors"
+                    >
+                      <span>{t('read')}</span>
+                      <ArrowRight className="w-4 h-4" />
+                    </a>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Media Coverage */}
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
+              {t('coverageTitle')}
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('coverageSubtitle')}
+            </p>
+          </motion.div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {COVERAGE.map((article, index) => (
+              <motion.a
+                key={article.key}
+                href={article.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                whileHover={{ y: -5 }}
+                className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all group"
+              >
+                <div className="flex items-start space-x-4">
+                  <div className="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center flex-shrink-0">
+                    <Newspaper className="w-8 h-8 text-gray-400" />
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="font-bold text-brand-turquoise">{article.outlet}</span>
+                      <ExternalLink className="w-4 h-4 text-gray-400 group-hover:text-brand-turquoise transition-colors" />
+                    </div>
+                    <h3 className="text-lg font-bold text-brand-navy mb-2 group-hover:text-brand-turquoise transition-colors">
+                      {t(`coverage.${article.key}.title`)}
+                    </h3>
+                    <span className="text-gray-500 text-sm">{t(`coverage.${article.key}.date`)}</span>
+                  </div>
+                </div>
+              </motion.a>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Press Kit Resources */}
+      <section ref={resourcesRef} id="resources" className="py-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isResourcesInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
+              {t('kitTitle')}
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('kitSubtitle')}
+            </p>
+          </motion.div>
+
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={isResourcesInView ? 'visible' : 'hidden'}
+            className="grid grid-cols-1 md:grid-cols-3 gap-8"
+          >
+            {KIT_ITEMS.map((item) => {
+              const IconComponent = item.icon;
+              return (
+                <motion.div
+                  key={item.key}
+                  variants={itemVariants}
+                  whileHover={{ y: -10 }}
+                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
+                >
+                  <div className="w-16 h-16 bg-brand-turquoise/10 rounded-2xl flex items-center justify-center mb-6">
+                    <IconComponent className="w-8 h-8 text-brand-turquoise" />
+                  </div>
+                  <h3 className="text-xl font-bold text-brand-navy mb-2">{t(`kit.${item.key}.title`)}</h3>
+                  <p className="text-gray-600 mb-4">{t(`kit.${item.key}.description`)}</p>
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-gray-500">{t(`kit.${item.key}.format`)}</span>
+                    <a
+                      href="#"
+                      className="flex items-center space-x-2 text-brand-turquoise font-medium hover:underline"
+                    >
+                      <Download className="w-4 h-4" />
+                      <span>{t('kit.download')}</span>
+                    </a>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Milestones */}
+      <section ref={milestonesRef} className="py-20 bg-gradient-to-br from-brand-navy to-brand-navy/95">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isMilestonesInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-4xl lg:text-5xl font-bold text-white mb-4">
+              {t('milestonesTitle')}
+            </h2>
+            <p className="text-xl text-white/80 max-w-2xl mx-auto">
+              {t('milestonesSubtitle')}
+            </p>
+          </motion.div>
+
+          <div className="flex flex-wrap justify-center gap-8">
+            {MILESTONES.map((milestone, index) => {
+              const IconComponent = milestone.icon;
+              return (
+                <motion.div
+                  key={milestone.key}
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  animate={isMilestonesInView ? { opacity: 1, scale: 1 } : {}}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                  className="text-center"
+                >
+                  <div className="w-20 h-20 bg-brand-turquoise rounded-full flex items-center justify-center mx-auto mb-4">
+                    <IconComponent className="w-10 h-10 text-white" />
+                  </div>
+                  <div className="text-2xl font-bold text-brand-turquoise mb-1">{milestone.key}</div>
+                  <div className="text-white/80 max-w-[150px]">{t(`milestones.${milestone.key}` as any)}</div>
+                </motion.div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Press Contact */}
+      <section ref={contactRef} id="contact" className="py-20">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isContactInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-12"
+          >
+            <h2 className="text-4xl lg:text-5xl font-bold text-brand-navy mb-4">
+              {t('contact.title')}
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('contact.body')}
+            </p>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isContactInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="bg-white rounded-3xl shadow-xl border border-gray-100 p-8 lg:p-12"
+          >
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              <div>
+                <h3 className="text-2xl font-bold text-brand-navy mb-6">{t('contact.relationsTitle')}</h3>
+                <div className="space-y-4">
+                  <div className="flex items-center space-x-4">
+                    <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
+                      <Mail className="w-6 h-6 text-brand-turquoise" />
+                    </div>
+                    <div>
+                      <div className="text-sm text-gray-500">{t('contact.emailLabel')}</div>
+                      <a
+                        href="mailto:presse@xpeditis.com"
+                        className="text-lg font-medium text-brand-navy hover:text-brand-turquoise transition-colors"
+                      >
+                        presse@xpeditis.com
+                      </a>
+                    </div>
+                  </div>
+                  <div className="flex items-center space-x-4">
+                    <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center">
+                      <Phone className="w-6 h-6 text-brand-turquoise" />
+                    </div>
+                    <div>
+                      <div className="text-sm text-gray-500">{t('contact.phoneLabel')}</div>
+                      <a
+                        href="tel:+33123456790"
+                        className="text-lg font-medium text-brand-navy hover:text-brand-turquoise transition-colors"
+                      >
+                        +33 1 23 45 67 90
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-2xl font-bold text-brand-navy mb-6">{t('contact.responsibleTitle')}</h3>
+                <div className="flex items-start space-x-4">
+                  <div className="w-16 h-16 bg-brand-turquoise/10 rounded-full flex items-center justify-center flex-shrink-0">
+                    <Users className="w-8 h-8 text-brand-turquoise" />
+                  </div>
+                  <div>
+                    <div className="text-lg font-bold text-brand-navy">Camille Dumont</div>
+                    <div className="text-brand-turquoise font-medium mb-2">{t('contact.responsibleRole')}</div>
+                    <p className="text-gray-600 text-sm">
+                      {t('contact.responsibleBio')}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-8 pt-8 border-t border-gray-100">
+              <div className="flex items-start space-x-4 bg-gray-50 p-6 rounded-xl">
+                <Quote className="w-8 h-8 text-brand-turquoise flex-shrink-0" />
+                <div>
+                  <p className="text-gray-600 italic mb-4">
+                    &ldquo;{t('contact.quote')}&rdquo;
+                  </p>
+                  <div className="text-sm">
+                    <span className="font-bold text-brand-navy">Jean-Pierre Durand</span>
+                    <span className="text-gray-500">{t('contact.quoteRole')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </section>
+
+      <LandingFooter />
+    </div>
+  );
+}
diff --git a/apps/frontend/app/pricing/page.tsx b/apps/frontend/app/[locale]/pricing/page.tsx
similarity index 59%
rename from apps/frontend/app/pricing/page.tsx
rename to apps/frontend/app/[locale]/pricing/page.tsx
index beef733..109173c 100644
--- a/apps/frontend/app/pricing/page.tsx
+++ b/apps/frontend/app/[locale]/pricing/page.tsx
@@ -1,131 +1,147 @@
 'use client';
 
 import React, { useState } from 'react';
-import Link from 'next/link';
 import Image from 'next/image';
+import { Link } from '@/i18n/navigation';
+import { useTranslations, useLocale } from 'next-intl';
 import { Check, X, ArrowRight, Shield } from 'lucide-react';
 
 type BillingInterval = 'monthly' | 'yearly';
 
-const PLANS = [
+type PlanKey = 'bronze' | 'silver' | 'gold' | 'platinium';
+
+interface FeatureRow {
+  key: string;
+  included: boolean;
+}
+
+interface PlanConfig {
+  key: PlanKey;
+  monthlyPrice: number;
+  yearlyPrice: number;
+  maxUsersKey: 'unlimited' | null;
+  maxUsers?: number;
+  shipmentsKey: 'shipmentsPerYear' | 'shipmentsUnlimited';
+  commission: string;
+  supportKey: 'supportNone' | 'supportEmail' | 'supportDirect' | 'supportKam';
+  badge: 'silver' | 'gold' | 'platinium' | null;
+  ctaStyle: string;
+  popular: boolean;
+  features: FeatureRow[];
+}
+
+const PLANS: PlanConfig[] = [
   {
-    name: 'Bronze',
-    key: 'BRONZE' as const,
+    key: 'bronze',
     monthlyPrice: 0,
     yearlyPrice: 0,
-    description: 'Pour démarrer et tester la plateforme',
     maxUsers: 1,
-    maxShipments: '12/an',
+    maxUsersKey: null,
+    shipmentsKey: 'shipmentsPerYear',
     commission: '5%',
-    support: 'Aucun',
+    supportKey: 'supportNone',
     badge: null,
-    features: [
-      { name: 'Recherche de tarifs', included: true },
-      { name: 'Réservations', included: true },
-      { name: 'Tableau de bord', included: false },
-      { name: 'Wiki Maritime', included: false },
-      { name: 'Gestion des utilisateurs', included: false },
-      { name: 'Import CSV', included: false },
-      { name: 'Accès API', included: false },
-      { name: 'Interface personnalisée', included: false },
-      { name: 'KAM dédié', included: false },
-    ],
-    cta: 'Commencer gratuitement',
     ctaStyle: 'bg-gray-900 text-white hover:bg-gray-800',
     popular: false,
+    features: [
+      { key: 'rates', included: true },
+      { key: 'bookings', included: true },
+      { key: 'dashboard', included: false },
+      { key: 'wiki', included: false },
+      { key: 'userManagement', included: false },
+      { key: 'csvImport', included: false },
+      { key: 'apiAccess', included: false },
+      { key: 'customUI', included: false },
+      { key: 'dedicatedKam', included: false },
+    ],
   },
   {
-    name: 'Silver',
-    key: 'SILVER' as const,
+    key: 'silver',
     monthlyPrice: 249,
     yearlyPrice: 2739,
-    description: 'Pour les équipes en croissance',
     maxUsers: 5,
-    maxShipments: 'Illimitées',
+    maxUsersKey: null,
+    shipmentsKey: 'shipmentsUnlimited',
     commission: '3%',
-    support: 'Email',
-    badge: 'silver' as const,
-    features: [
-      { name: 'Recherche de tarifs', included: true },
-      { name: 'Réservations', included: true },
-      { name: 'Tableau de bord', included: true },
-      { name: 'Wiki Maritime', included: true },
-      { name: 'Gestion des utilisateurs', included: true },
-      { name: 'Import CSV', included: true },
-      { name: 'Accès API', included: false },
-      { name: 'Interface personnalisée', included: false },
-      { name: 'KAM dédié', included: false },
-    ],
-    cta: 'Choisir Silver',
+    supportKey: 'supportEmail',
+    badge: 'silver',
     ctaStyle: 'bg-brand-turquoise text-white hover:opacity-90',
     popular: true,
+    features: [
+      { key: 'rates', included: true },
+      { key: 'bookings', included: true },
+      { key: 'dashboard', included: true },
+      { key: 'wiki', included: true },
+      { key: 'userManagement', included: true },
+      { key: 'csvImport', included: true },
+      { key: 'apiAccess', included: false },
+      { key: 'customUI', included: false },
+      { key: 'dedicatedKam', included: false },
+    ],
   },
   {
-    name: 'Gold',
-    key: 'GOLD' as const,
+    key: 'gold',
     monthlyPrice: 899,
     yearlyPrice: 9889,
-    description: 'Pour les entreprises établies',
     maxUsers: 20,
-    maxShipments: 'Illimitées',
+    maxUsersKey: null,
+    shipmentsKey: 'shipmentsUnlimited',
     commission: '2%',
-    support: 'Direct',
-    badge: 'gold' as const,
-    features: [
-      { name: 'Recherche de tarifs', included: true },
-      { name: 'Réservations', included: true },
-      { name: 'Tableau de bord', included: true },
-      { name: 'Wiki Maritime', included: true },
-      { name: 'Gestion des utilisateurs', included: true },
-      { name: 'Import CSV', included: true },
-      { name: 'Accès API', included: true },
-      { name: 'Interface personnalisée', included: false },
-      { name: 'KAM dédié', included: false },
-    ],
-    cta: 'Choisir Gold',
+    supportKey: 'supportDirect',
+    badge: 'gold',
     ctaStyle: 'bg-yellow-500 text-white hover:bg-yellow-600',
     popular: false,
+    features: [
+      { key: 'rates', included: true },
+      { key: 'bookings', included: true },
+      { key: 'dashboard', included: true },
+      { key: 'wiki', included: true },
+      { key: 'userManagement', included: true },
+      { key: 'csvImport', included: true },
+      { key: 'apiAccess', included: true },
+      { key: 'customUI', included: false },
+      { key: 'dedicatedKam', included: false },
+    ],
   },
   {
-    name: 'Platinium',
-    key: 'PLATINIUM' as const,
+    key: 'platinium',
     monthlyPrice: -1,
     yearlyPrice: -1,
-    description: 'Solutions sur mesure',
-    maxUsers: 'Illimité',
-    maxShipments: 'Illimitées',
+    maxUsersKey: 'unlimited',
+    shipmentsKey: 'shipmentsUnlimited',
     commission: '1%',
-    support: 'KAM dédié',
-    badge: 'platinium' as const,
-    features: [
-      { name: 'Recherche de tarifs', included: true },
-      { name: 'Réservations', included: true },
-      { name: 'Tableau de bord', included: true },
-      { name: 'Wiki Maritime', included: true },
-      { name: 'Gestion des utilisateurs', included: true },
-      { name: 'Import CSV', included: true },
-      { name: 'Accès API', included: true },
-      { name: 'Interface personnalisée', included: true },
-      { name: 'KAM dédié', included: true },
-    ],
-    cta: 'Nous contacter',
+    supportKey: 'supportKam',
+    badge: 'platinium',
     ctaStyle: 'bg-purple-600 text-white hover:bg-purple-700',
     popular: false,
+    features: [
+      { key: 'rates', included: true },
+      { key: 'bookings', included: true },
+      { key: 'dashboard', included: true },
+      { key: 'wiki', included: true },
+      { key: 'userManagement', included: true },
+      { key: 'csvImport', included: true },
+      { key: 'apiAccess', included: true },
+      { key: 'customUI', included: true },
+      { key: 'dedicatedKam', included: true },
+    ],
   },
 ];
 
-function formatPrice(amount: number): string {
-  return new Intl.NumberFormat('fr-FR', {
-    style: 'currency',
-    currency: 'EUR',
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0,
-  }).format(amount);
-}
-
 export default function PricingPage() {
+  const t = useTranslations('marketing.pricing');
+  const locale = useLocale();
+  const numberLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
   const [billing, setBilling] = useState<BillingInterval>('monthly');
 
+  const formatPrice = (amount: number): string =>
+    new Intl.NumberFormat(numberLocale, {
+      style: 'currency',
+      currency: 'EUR',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(amount);
+
   return (
     <div className="min-h-screen bg-white">
       {/* Header */}
@@ -142,13 +158,13 @@ export default function PricingPage() {
           </Link>
           <div className="flex items-center gap-4">
             <Link href="/login" className="text-sm text-gray-600 hover:text-gray-900">
-              Connexion
+              {t('header.login')}
             </Link>
             <Link
               href="/register"
               className="text-sm bg-brand-turquoise text-white px-4 py-2 rounded-lg hover:opacity-90"
             >
-              Inscription
+              {t('header.register')}
             </Link>
           </div>
         </div>
@@ -156,18 +172,13 @@ export default function PricingPage() {
 
       {/* Hero */}
       <section className="py-16 text-center">
-        <h1 className="text-4xl font-bold text-gray-900 mb-4">
-          Des tarifs simples et transparents
-        </h1>
-        <p className="text-lg text-gray-600 max-w-2xl mx-auto mb-8">
-          Choisissez la formule adaptée à votre activité de transport maritime.
-          Commencez gratuitement, évoluez selon vos besoins.
-        </p>
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">{t('hero.title')}</h1>
+        <p className="text-lg text-gray-600 max-w-2xl mx-auto mb-8">{t('hero.subtitle')}</p>
 
         {/* Billing toggle */}
         <div className="flex items-center justify-center gap-4 mb-12">
           <span className={`text-sm font-medium ${billing === 'monthly' ? 'text-gray-900' : 'text-gray-500'}`}>
-            Mensuel
+            {t('hero.monthly')}
           </span>
           <button
             onClick={() => setBilling(billing === 'monthly' ? 'yearly' : 'monthly')}
@@ -182,11 +193,11 @@ export default function PricingPage() {
             />
           </button>
           <span className={`text-sm font-medium ${billing === 'yearly' ? 'text-gray-900' : 'text-gray-500'}`}>
-            Annuel
+            {t('hero.yearly')}
           </span>
           {billing === 'yearly' && (
             <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full font-medium">
-              -1 mois offert
+              {t('hero.yearlyBadge')}
             </span>
           )}
         </div>
@@ -207,14 +218,14 @@ export default function PricingPage() {
               {plan.popular && (
                 <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                   <span className="bg-brand-turquoise text-white text-xs font-semibold px-3 py-1 rounded-full">
-                    Populaire
+                    {t('popular')}
                   </span>
                 </div>
               )}
 
               {/* Plan name & badge */}
               <div className="flex items-center gap-2 mb-2">
-                <h3 className="text-xl font-bold text-gray-900">{plan.name}</h3>
+                <h3 className="text-xl font-bold text-gray-900">{t(`plans.${plan.key}.name`)}</h3>
                 {plan.badge && (
                   <Shield className={`w-5 h-5 ${
                     plan.badge === 'silver' ? 'text-slate-500' :
@@ -224,25 +235,25 @@ export default function PricingPage() {
                 )}
               </div>
 
-              <p className="text-sm text-gray-500 mb-4">{plan.description}</p>
+              <p className="text-sm text-gray-500 mb-4">{t(`plans.${plan.key}.description`)}</p>
 
               {/* Price */}
               <div className="mb-6">
                 {plan.monthlyPrice === -1 ? (
-                  <p className="text-3xl font-bold text-gray-900">Sur devis</p>
+                  <p className="text-3xl font-bold text-gray-900">{t('currency.onQuote')}</p>
                 ) : plan.monthlyPrice === 0 ? (
-                  <p className="text-3xl font-bold text-gray-900">Gratuit</p>
+                  <p className="text-3xl font-bold text-gray-900">{t('currency.free')}</p>
                 ) : (
                   <>
                     <p className="text-3xl font-bold text-gray-900">
                       {billing === 'monthly'
                         ? formatPrice(plan.monthlyPrice)
                         : formatPrice(Math.round(plan.yearlyPrice / 12))}
-                      <span className="text-base font-normal text-gray-500">/mois</span>
+                      <span className="text-base font-normal text-gray-500">{t('currency.perMonth')}</span>
                     </p>
                     {billing === 'yearly' && (
                       <p className="text-sm text-gray-500 mt-1">
-                        {formatPrice(plan.yearlyPrice)}/an (11 mois)
+                        {t('currency.yearlyPrice', { price: formatPrice(plan.yearlyPrice) })}
                       </p>
                     )}
                   </>
@@ -252,34 +263,36 @@ export default function PricingPage() {
               {/* Quick stats */}
               <div className="space-y-2 mb-6 text-sm">
                 <div className="flex justify-between">
-                  <span className="text-gray-500">Utilisateurs</span>
-                  <span className="font-medium">{plan.maxUsers}</span>
+                  <span className="text-gray-500">{t('stats.users')}</span>
+                  <span className="font-medium">
+                    {plan.maxUsersKey ? t(`values.${plan.maxUsersKey}`) : plan.maxUsers}
+                  </span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-gray-500">Expéditions</span>
-                  <span className="font-medium">{plan.maxShipments}</span>
+                  <span className="text-gray-500">{t('stats.shipments')}</span>
+                  <span className="font-medium">{t(`values.${plan.shipmentsKey}`)}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-gray-500">Commission</span>
+                  <span className="text-gray-500">{t('stats.commission')}</span>
                   <span className="font-medium">{plan.commission}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-gray-500">Support</span>
-                  <span className="font-medium">{plan.support}</span>
+                  <span className="text-gray-500">{t('stats.support')}</span>
+                  <span className="font-medium">{t(`values.${plan.supportKey}`)}</span>
                 </div>
               </div>
 
               {/* Features */}
               <div className="flex-1 space-y-2 mb-6">
                 {plan.features.map((feature) => (
-                  <div key={feature.name} className="flex items-center gap-2 text-sm">
+                  <div key={feature.key} className="flex items-center gap-2 text-sm">
                     {feature.included ? (
                       <Check className="w-4 h-4 text-green-500 flex-shrink-0" />
                     ) : (
                       <X className="w-4 h-4 text-gray-300 flex-shrink-0" />
                     )}
                     <span className={feature.included ? 'text-gray-700' : 'text-gray-400'}>
-                      {feature.name}
+                      {t(`features.${feature.key}` as any)}
                     </span>
                   </div>
                 ))}
@@ -287,10 +300,10 @@ export default function PricingPage() {
 
               {/* CTA */}
               <Link
-                href={plan.key === 'PLATINIUM' ? '/contact' : '/register'}
+                href={plan.key === 'platinium' ? '/contact' : '/register'}
                 className={`block text-center py-3 px-4 rounded-lg text-sm font-semibold transition-all ${plan.ctaStyle}`}
               >
-                {plan.cta}
+                {t(`plans.${plan.key}.cta`)}
                 <ArrowRight className="inline-block w-4 h-4 ml-1" />
               </Link>
             </div>
@@ -300,7 +313,7 @@ export default function PricingPage() {
 
       {/* Footer */}
       <footer className="border-t py-8 text-center text-sm text-gray-500">
-        <p>Tous les prix sont en euros HT. Facturation annuelle = 11 mois.</p>
+        <p>{t('footer')}</p>
       </footer>
     </div>
   );
diff --git a/apps/frontend/app/privacy/page.tsx b/apps/frontend/app/[locale]/privacy/page.tsx
similarity index 52%
rename from apps/frontend/app/privacy/page.tsx
rename to apps/frontend/app/[locale]/privacy/page.tsx
index 7ca7f3b..279be2a 100644
--- a/apps/frontend/app/privacy/page.tsx
+++ b/apps/frontend/app/[locale]/privacy/page.tsx
@@ -1,229 +1,169 @@
-'use client';
-
-import { useRef } from 'react';
-import { motion, useInView } from 'framer-motion';
-import { Shield, Eye, Lock, UserCheck, Database, Globe, Mail, Calendar } from 'lucide-react';
-import { LandingHeader, LandingFooter } from '@/components/layout';
-
-export default function PrivacyPage() {
-  const heroRef = useRef(null);
-  const contentRef = useRef(null);
-
-  const isHeroInView = useInView(heroRef, { once: true });
-  const isContentInView = useInView(contentRef, { once: true });
-
-  const sections = [
-    {
-      icon: Database,
-      title: '1. Données collectées',
-      content: `Nous collectons les données suivantes :
-
-• **Données d'identification** : nom, prénom, adresse email professionnelle, numéro de téléphone
-• **Données professionnelles** : nom de l'entreprise, fonction, numéro SIRET
-• **Données de connexion** : adresse IP, logs de connexion, données de navigation
-• **Données de transaction** : historique des réservations, devis, factures
-• **Données de communication** : échanges avec notre service client`,
-    },
-    {
-      icon: Eye,
-      title: '2. Utilisation des données',
-      content: `Vos données sont utilisées pour :
-
-• Fournir et améliorer nos services de réservation de fret maritime
-• Gérer votre compte et vos préférences
-• Traiter vos demandes de devis et réservations
-• Vous envoyer des communications commerciales (avec votre consentement)
-• Assurer la sécurité de notre plateforme
-• Respecter nos obligations légales et réglementaires`,
-    },
-    {
-      icon: Lock,
-      title: '3. Protection des données',
-      content: `Nous mettons en œuvre des mesures de sécurité robustes :
-
-• Chiffrement SSL/TLS pour toutes les communications
-• Chiffrement des données sensibles au repos (AES-256)
-• Authentification à deux facteurs disponible
-• Audits de sécurité réguliers
-• Formation continue de nos équipes
-• Hébergement sur des serveurs certifiés ISO 27001`,
-    },
-    {
-      icon: UserCheck,
-      title: '4. Vos droits',
-      content: `Conformément au RGPD, vous disposez des droits suivants :
-
-• **Droit d'accès** : obtenir une copie de vos données personnelles
-• **Droit de rectification** : corriger vos données inexactes
-• **Droit à l'effacement** : demander la suppression de vos données
-• **Droit à la portabilité** : recevoir vos données dans un format structuré
-• **Droit d'opposition** : vous opposer au traitement de vos données
-• **Droit de limitation** : limiter le traitement de vos données
-
-Pour exercer ces droits, contactez-nous à : privacy@xpeditis.com`,
-    },
-    {
-      icon: Globe,
-      title: '5. Transferts internationaux',
-      content: `Vos données peuvent être transférées vers des pays hors UE dans le cadre de nos services de fret maritime international. Ces transferts sont encadrés par :
-
-• Des clauses contractuelles types approuvées par la Commission européenne
-• Des certifications adéquates (ex: Privacy Shield pour certains prestataires)
-• Le consentement explicite pour certains transferts spécifiques`,
-    },
-    {
-      icon: Calendar,
-      title: '6. Conservation des données',
-      content: `Nous conservons vos données selon les durées suivantes :
-
-• **Données de compte** : durée de la relation commerciale + 3 ans
-• **Données de transaction** : 10 ans (obligations comptables)
-• **Données de connexion** : 1 an
-• **Données marketing** : 3 ans après le dernier contact
-
-À l'expiration de ces délais, vos données sont supprimées ou anonymisées.`,
-    },
-  ];
-
-  const containerVariants = {
-    hidden: { opacity: 0, y: 50 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.6,
-        staggerChildren: 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: 0.5 },
-    },
-  };
-
-  return (
-    <div className="min-h-screen bg-white">
-      <LandingHeader />
-
-      {/* Hero Section */}
-      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
-          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center"
-          >
-            <motion.div
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
-            >
-              <Shield className="w-5 h-5 text-brand-turquoise" />
-              <span className="text-white/90 text-sm font-medium">Protection des données</span>
-            </motion.div>
-
-            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
-              Politique de
-              <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
-                Confidentialité
-              </span>
-            </h1>
-
-            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
-              Chez Xpeditis, la protection de vos données personnelles est une priorité absolue.
-              Cette politique explique comment nous collectons, utilisons et protégeons vos informations.
-            </p>
-
-            <p className="text-white/60 text-sm">
-              Dernière mise à jour : Janvier 2025
-            </p>
-          </motion.div>
-        </div>
-
-        {/* Wave */}
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
-            <path
-              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
-              fill="white"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* Content Section */}
-      <section ref={contentRef} className="py-20">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8">
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isContentInView ? 'visible' : 'hidden'}
-            className="space-y-12"
-          >
-            {sections.map((section, index) => {
-              const IconComponent = section.icon;
-              return (
-                <motion.div
-                  key={index}
-                  variants={itemVariants}
-                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
-                >
-                  <div className="flex items-start space-x-4">
-                    <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center flex-shrink-0">
-                      <IconComponent className="w-6 h-6 text-brand-turquoise" />
-                    </div>
-                    <div>
-                      <h2 className="text-2xl font-bold text-brand-navy mb-4">{section.title}</h2>
-                      <div className="text-gray-600 leading-relaxed whitespace-pre-line prose prose-sm max-w-none">
-                        {section.content.split('**').map((part, i) =>
-                          i % 2 === 1 ? <strong key={i}>{part}</strong> : part
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-
-          {/* Contact Section */}
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8, delay: 0.6 }}
-            className="mt-16 bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
-          >
-            <Mail className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
-            <h3 className="text-2xl font-bold text-white mb-4">Des questions ?</h3>
-            <p className="text-white/80 mb-6">
-              Pour toute question concernant notre politique de confidentialité ou vos données personnelles,
-              contactez notre Délégué à la Protection des Données.
-            </p>
-            <a
-              href="mailto:privacy@xpeditis.com"
-              className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
-            >
-              <Mail className="w-5 h-5" />
-              <span>privacy@xpeditis.com</span>
-            </a>
-          </motion.div>
-        </div>
-      </section>
-
-      <LandingFooter />
-    </div>
-  );
-}
+'use client';
+
+import { useRef } from 'react';
+import { motion, useInView } from 'framer-motion';
+import { useTranslations } from 'next-intl';
+import { Shield, Eye, Lock, UserCheck, Database, Globe, Mail, Calendar, type LucideIcon } from 'lucide-react';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+
+const SECTION_KEYS = ['data', 'use', 'protection', 'rights', 'transfers', 'retention'] as const;
+
+const ICONS: Record<typeof SECTION_KEYS[number], LucideIcon> = {
+  data: Database,
+  use: Eye,
+  protection: Lock,
+  rights: UserCheck,
+  transfers: Globe,
+  retention: Calendar,
+};
+
+function renderInlineBold(content: string) {
+  return content.split('**').map((part, i) =>
+    i % 2 === 1 ? <strong key={i}>{part}</strong> : part
+  );
+}
+
+export default function PrivacyPage() {
+  const t = useTranslations('marketing.privacy');
+  const tCommon = useTranslations('marketing.common');
+  const heroRef = useRef(null);
+  const contentRef = useRef(null);
+
+  const isHeroInView = useInView(heroRef, { once: true });
+  const isContentInView = useInView(contentRef, { once: true });
+
+  const containerVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader />
+
+      {/* Hero Section */}
+      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
+          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
+        </div>
+
+        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center"
+          >
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
+            >
+              <Shield className="w-5 h-5 text-brand-turquoise" />
+              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
+            </motion.div>
+
+            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+              {t('title1')}
+              <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
+                {t('title2')}
+              </span>
+            </h1>
+
+            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
+              {t('intro')}
+            </p>
+
+            <p className="text-white/60 text-sm">{tCommon('lastUpdated')}</p>
+          </motion.div>
+        </div>
+
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
+            <path
+              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </section>
+
+      {/* Content Section */}
+      <section ref={contentRef} className="py-20">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8">
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={isContentInView ? 'visible' : 'hidden'}
+            className="space-y-12"
+          >
+            {SECTION_KEYS.map((key) => {
+              const IconComponent = ICONS[key];
+              return (
+                <motion.div
+                  key={key}
+                  variants={itemVariants}
+                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
+                >
+                  <div className="flex items-start space-x-4">
+                    <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center flex-shrink-0">
+                      <IconComponent className="w-6 h-6 text-brand-turquoise" />
+                    </div>
+                    <div>
+                      <h2 className="text-2xl font-bold text-brand-navy mb-4">
+                        {t(`sections.${key}.title`)}
+                      </h2>
+                      <div className="text-gray-600 leading-relaxed whitespace-pre-line prose prose-sm max-w-none">
+                        {renderInlineBold(t(`sections.${key}.content`))}
+                      </div>
+                    </div>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </motion.div>
+
+          {/* Contact Section */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.6 }}
+            className="mt-16 bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
+          >
+            <Mail className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
+            <h3 className="text-2xl font-bold text-white mb-4">{t('contact.title')}</h3>
+            <p className="text-white/80 mb-6">{t('contact.body')}</p>
+            <a
+              href="mailto:privacy@xpeditis.com"
+              className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
+            >
+              <Mail className="w-5 h-5" />
+              <span>privacy@xpeditis.com</span>
+            </a>
+          </motion.div>
+        </div>
+      </section>
+
+      <LandingFooter />
+    </div>
+  );
+}
diff --git a/apps/frontend/app/register/page.tsx b/apps/frontend/app/[locale]/register/page.tsx
similarity index 75%
rename from apps/frontend/app/register/page.tsx
rename to apps/frontend/app/[locale]/register/page.tsx
index e00eebd..f0f56b0 100644
--- a/apps/frontend/app/register/page.tsx
+++ b/apps/frontend/app/[locale]/register/page.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import { useState, useEffect, Suspense } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { Link, useRouter } from '@/i18n/navigation';
 import Image from 'next/image';
+import { useTranslations } from 'next-intl';
 import { register } from '@/lib/api';
 import { verifyInvitation, type InvitationResponse } from '@/lib/api/invitations';
 import type { OrganizationType } from '@/types/api';
@@ -11,18 +12,17 @@ import type { OrganizationType } from '@/types/api';
 function RegisterPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const t = useTranslations('auth.register');
+  const tFooter = useTranslations('auth.footerLinks');
 
-  // Step management
   const [step, setStep] = useState<1 | 2>(1);
 
-  // Step 1 — Personal info
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
 
-  // Step 2 — Organization
   const [organizationName, setOrganizationName] = useState('');
   const [organizationType, setOrganizationType] = useState<OrganizationType>('FREIGHT_FORWARDER');
   const [siren, setSiren] = useState('');
@@ -36,7 +36,6 @@ function RegisterPageContent() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
 
-  // Invitation state
   const [invitationToken, setInvitationToken] = useState<string | null>(null);
   const [invitation, setInvitation] = useState<InvitationResponse | null>(null);
   const [isVerifyingInvitation, setIsVerifyingInvitation] = useState(false);
@@ -54,21 +53,20 @@ function RegisterPageContent() {
           setLastName(invitationData.lastName);
         })
         .catch(() => {
-          setError("Le lien d'invitation est invalide ou expiré.");
+          setError(t('invitationInvalid'));
         })
         .finally(() => {
           setIsVerifyingInvitation(false);
         });
     }
-  }, [searchParams]);
+  }, [searchParams, t]);
 
-  // ---- Step 1 validation ----
   const validateStep1 = (): string | null => {
-    if (!firstName.trim() || firstName.trim().length < 2) return 'Le prénom doit contenir au moins 2 caractères';
-    if (!lastName.trim() || lastName.trim().length < 2) return 'Le nom doit contenir au moins 2 caractères';
-    if (!email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return "L'adresse email n'est pas valide";
-    if (password.length < 12) return 'Le mot de passe doit contenir au moins 12 caractères';
-    if (password !== confirmPassword) return 'Les mots de passe ne correspondent pas';
+    if (!firstName.trim() || firstName.trim().length < 2) return t('fieldErrors.firstNameMin');
+    if (!lastName.trim() || lastName.trim().length < 2) return t('fieldErrors.lastNameMin');
+    if (!email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return t('fieldErrors.emailInvalid');
+    if (password.length < 12) return t('fieldErrors.passwordMin');
+    if (password !== confirmPassword) return t('fieldErrors.passwordsMismatch');
     return null;
   };
 
@@ -80,7 +78,6 @@ function RegisterPageContent() {
       setError(err);
       return;
     }
-    // If invitation — submit directly (no org step)
     if (invitationToken) {
       handleFinalSubmit();
     } else {
@@ -88,13 +85,12 @@ function RegisterPageContent() {
     }
   };
 
-  // ---- Step 2 validation ----
   const validateStep2 = (): string | null => {
-    if (!organizationName.trim()) return "Le nom de l'organisation est requis";
-    if (!/^[0-9]{9}$/.test(siren)) return 'Le numéro SIREN est requis (9 chiffres)';
-    if (siret && !/^[0-9]{14}$/.test(siret)) return 'Le numéro SIRET doit contenir 14 chiffres';
+    if (!organizationName.trim()) return t('fieldErrors.orgNameRequired');
+    if (!/^[0-9]{9}$/.test(siren)) return t('fieldErrors.sirenRequired');
+    if (siret && !/^[0-9]{14}$/.test(siret)) return t('fieldErrors.siretInvalid');
     if (!street.trim() || !city.trim() || !postalCode.trim() || !country.trim()) {
-      return "Tous les champs d'adresse sont requis";
+      return t('fieldErrors.addressRequired');
     }
     return null;
   };
@@ -110,7 +106,6 @@ function RegisterPageContent() {
     handleFinalSubmit();
   };
 
-  // ---- Final submit ----
   const handleFinalSubmit = async () => {
     setIsLoading(true);
     setError('');
@@ -139,24 +134,22 @@ function RegisterPageContent() {
       });
       router.push('/dashboard');
     } catch (err: any) {
-      setError(err.message || 'Erreur lors de la création du compte');
-      // On error at step 2, stay on step 2; at invitation (step 1), stay on step 1
+      setError(err.message || t('errors.generic'));
     } finally {
       setIsLoading(false);
     }
   };
 
-  // ---- Right panel content ----
   const rightPanel = (
     <div className="hidden lg:block lg:w-1/2 relative bg-brand-navy">
       <div className="absolute inset-0 bg-gradient-to-br from-brand-navy to-neutral-800 opacity-95"></div>
       <div className="absolute inset-0 flex flex-col justify-center px-16 xl:px-24 text-white">
         <div className="max-w-xl">
           <h2 className="text-display-sm mb-6 text-white">
-            {invitation ? 'Rejoignez votre équipe' : 'Rejoignez des milliers d\'entreprises'}
+            {invitation ? t('sidePanel.titleInvitation') : t('sidePanel.titleDefault')}
           </h2>
           <p className="text-body-lg text-neutral-200 mb-12">
-            Simplifiez votre logistique maritime et gagnez du temps sur chaque expédition.
+            {t('sidePanel.description')}
           </p>
           <div className="space-y-6">
             <div className="flex items-start">
@@ -166,8 +159,8 @@ function RegisterPageContent() {
                 </svg>
               </div>
               <div className="ml-4">
-                <h3 className="text-h5 mb-1 text-white">Essai gratuit de 30 jours</h3>
-                <p className="text-body-sm text-neutral-300">Testez toutes les fonctionnalités sans engagement</p>
+                <h3 className="text-h5 mb-1 text-white">{t('sidePanel.features.trial.title')}</h3>
+                <p className="text-body-sm text-neutral-300">{t('sidePanel.features.trial.description')}</p>
               </div>
             </div>
             <div className="flex items-start">
@@ -177,8 +170,8 @@ function RegisterPageContent() {
                 </svg>
               </div>
               <div className="ml-4">
-                <h3 className="text-h5 mb-1 text-white">Sécurité maximale</h3>
-                <p className="text-body-sm text-neutral-300">Vos données sont protégées et chiffrées</p>
+                <h3 className="text-h5 mb-1 text-white">{t('sidePanel.features.security.title')}</h3>
+                <p className="text-body-sm text-neutral-300">{t('sidePanel.features.security.description')}</p>
               </div>
             </div>
             <div className="flex items-start">
@@ -188,23 +181,23 @@ function RegisterPageContent() {
                 </svg>
               </div>
               <div className="ml-4">
-                <h3 className="text-h5 mb-1 text-white">Support 24/7</h3>
-                <p className="text-body-sm text-neutral-300">Notre équipe est là pour vous accompagner</p>
+                <h3 className="text-h5 mb-1 text-white">{t('sidePanel.features.support.title')}</h3>
+                <p className="text-body-sm text-neutral-300">{t('sidePanel.features.support.description')}</p>
               </div>
             </div>
           </div>
           <div className="grid grid-cols-3 gap-8 mt-12 pt-12 border-t border-neutral-700">
             <div>
               <div className="text-display-sm text-brand-turquoise">2k+</div>
-              <div className="text-body-sm text-neutral-300 mt-1">Entreprises</div>
+              <div className="text-body-sm text-neutral-300 mt-1">{t('sidePanel.stats.companies')}</div>
             </div>
             <div>
               <div className="text-display-sm text-brand-turquoise">150+</div>
-              <div className="text-body-sm text-neutral-300 mt-1">Pays couverts</div>
+              <div className="text-body-sm text-neutral-300 mt-1">{t('sidePanel.stats.countries')}</div>
             </div>
             <div>
               <div className="text-display-sm text-brand-turquoise">24/7</div>
-              <div className="text-body-sm text-neutral-300 mt-1">Support</div>
+              <div className="text-body-sm text-neutral-300 mt-1">{t('sidePanel.stats.support')}</div>
             </div>
           </div>
         </div>
@@ -221,10 +214,8 @@ function RegisterPageContent() {
 
   return (
     <div className="min-h-screen flex">
-      {/* Left Side - Form */}
       <div className="w-full lg:w-1/2 flex flex-col justify-center px-8 sm:px-12 lg:px-16 xl:px-24 bg-white">
         <div className="max-w-md w-full mx-auto">
-          {/* Logo */}
           <div className="mb-8">
             <Link href="/">
               <Image
@@ -238,7 +229,6 @@ function RegisterPageContent() {
             </Link>
           </div>
 
-          {/* Progress indicator (only for self-registration, 2 steps) */}
           {!invitation && (
             <div className="mb-8">
               <div className="flex items-center gap-3">
@@ -253,7 +243,7 @@ function RegisterPageContent() {
                     ) : '1'}
                   </div>
                   <span className={`text-body-sm font-medium ${step >= 1 ? 'text-brand-navy' : 'text-neutral-400'}`}>
-                    Votre compte
+                    {t('stepAccount')}
                   </span>
                 </div>
                 <div className={`flex-1 h-0.5 transition-colors ${step >= 2 ? 'bg-brand-navy' : 'bg-neutral-200'}`} />
@@ -264,40 +254,38 @@ function RegisterPageContent() {
                     2
                   </div>
                   <span className={`text-body-sm font-medium ${step >= 2 ? 'text-brand-navy' : 'text-neutral-400'}`}>
-                    Votre organisation
+                    {t('stepOrganization')}
                   </span>
                 </div>
               </div>
             </div>
           )}
 
-          {/* Header */}
           <div className="mb-6">
             {isVerifyingInvitation ? (
-              <p className="text-body text-neutral-600">Vérification de l'invitation...</p>
+              <p className="text-body text-neutral-600">{t('invitationVerifying')}</p>
             ) : invitation ? (
               <>
-                <h1 className="text-h1 text-brand-navy mb-2">Accepter l'invitation</h1>
+                <h1 className="text-h1 text-brand-navy mb-2">{t('invitationTitle')}</h1>
                 <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
                   <p className="text-body-sm text-green-800">
-                    Invitation valide — créez votre mot de passe pour rejoindre l'organisation.
+                    {t('invitationValid')}
                   </p>
                 </div>
               </>
             ) : step === 1 ? (
               <>
-                <h1 className="text-h1 text-brand-navy mb-2">Créer un compte</h1>
-                <p className="text-body text-neutral-600">Commencez votre essai gratuit dès aujourd'hui</p>
+                <h1 className="text-h1 text-brand-navy mb-2">{t('title')}</h1>
+                <p className="text-body text-neutral-600">{t('subtitle')}</p>
               </>
             ) : (
               <>
-                <h1 className="text-h1 text-brand-navy mb-2">Votre organisation</h1>
-                <p className="text-body text-neutral-600">Renseignez les informations de votre entreprise</p>
+                <h1 className="text-h1 text-brand-navy mb-2">{t('orgStepTitle')}</h1>
+                <p className="text-body text-neutral-600">{t('orgStepSubtitle')}</p>
               </>
             )}
           </div>
 
-          {/* Error Message */}
           {error && (
             <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3">
               <svg className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -307,12 +295,11 @@ function RegisterPageContent() {
             </div>
           )}
 
-          {/* ---- STEP 1: Personal info ---- */}
           {(step === 1 || invitation) && !isVerifyingInvitation && (
             <form onSubmit={handleStep1} className="space-y-5">
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label htmlFor="firstName" className="label">Prénom</label>
+                  <label htmlFor="firstName" className="label">{t('firstNameLabel')}</label>
                   <input
                     id="firstName"
                     type="text"
@@ -320,12 +307,12 @@ function RegisterPageContent() {
                     value={firstName}
                     onChange={e => setFirstName(e.target.value)}
                     className="input w-full"
-                    placeholder="Jean"
+                    placeholder={t('firstNamePlaceholder')}
                     disabled={isLoading || !!invitation}
                   />
                 </div>
                 <div>
-                  <label htmlFor="lastName" className="label">Nom</label>
+                  <label htmlFor="lastName" className="label">{t('lastNameLabel')}</label>
                   <input
                     id="lastName"
                     type="text"
@@ -333,14 +320,14 @@ function RegisterPageContent() {
                     value={lastName}
                     onChange={e => setLastName(e.target.value)}
                     className="input w-full"
-                    placeholder="Dupont"
+                    placeholder={t('lastNamePlaceholder')}
                     disabled={isLoading || !!invitation}
                   />
                 </div>
               </div>
 
               <div>
-                <label htmlFor="email" className="label">Adresse email</label>
+                <label htmlFor="email" className="label">{t('emailLabel')}</label>
                 <input
                   id="email"
                   type="email"
@@ -348,14 +335,14 @@ function RegisterPageContent() {
                   value={email}
                   onChange={e => setEmail(e.target.value)}
                   className="input w-full"
-                  placeholder="jean.dupont@entreprise.com"
+                  placeholder={t('emailPlaceholder')}
                   autoComplete="email"
                   disabled={isLoading || !!invitation}
                 />
               </div>
 
               <div>
-                <label htmlFor="password" className="label">Mot de passe</label>
+                <label htmlFor="password" className="label">{t('passwordLabel')}</label>
                 <input
                   id="password"
                   type="password"
@@ -363,15 +350,15 @@ function RegisterPageContent() {
                   value={password}
                   onChange={e => setPassword(e.target.value)}
                   className="input w-full"
-                  placeholder="••••••••••••"
+                  placeholder={t('passwordPlaceholder')}
                   autoComplete="new-password"
                   disabled={isLoading}
                 />
-                <p className="mt-1.5 text-body-xs text-neutral-500">Au moins 12 caractères</p>
+                <p className="mt-1.5 text-body-xs text-neutral-500">{t('passwordHint')}</p>
               </div>
 
               <div>
-                <label htmlFor="confirmPassword" className="label">Confirmer le mot de passe</label>
+                <label htmlFor="confirmPassword" className="label">{t('confirmPasswordLabel')}</label>
                 <input
                   id="confirmPassword"
                   type="password"
@@ -379,7 +366,7 @@ function RegisterPageContent() {
                   value={confirmPassword}
                   onChange={e => setConfirmPassword(e.target.value)}
                   className="input w-full"
-                  placeholder="••••••••••••"
+                  placeholder={t('passwordPlaceholder')}
                   autoComplete="new-password"
                   disabled={isLoading}
                 />
@@ -391,26 +378,25 @@ function RegisterPageContent() {
                 className="btn-primary w-full text-lg disabled:opacity-50 disabled:cursor-not-allowed mt-2"
               >
                 {isLoading
-                  ? 'Création du compte...'
+                  ? t('submitting')
                   : invitation
-                  ? 'Créer mon compte'
-                  : 'Continuer'}
+                  ? t('submit')
+                  : t('continue')}
               </button>
 
               <p className="text-body-xs text-center text-neutral-500">
-                En créant un compte, vous acceptez nos{' '}
-                <Link href="/terms" className="link">Conditions d'utilisation</Link>{' '}
-                et notre{' '}
-                <Link href="/privacy" className="link">Politique de confidentialité</Link>
+                {t('termsAccept')}{' '}
+                <Link href="/terms" className="link">{t('termsLink')}</Link>{' '}
+                {t('termsAnd')}{' '}
+                <Link href="/privacy" className="link">{t('privacyLink')}</Link>
               </p>
             </form>
           )}
 
-          {/* ---- STEP 2: Organization info ---- */}
           {step === 2 && !invitation && (
             <form onSubmit={handleStep2} className="space-y-5">
               <div>
-                <label htmlFor="organizationName" className="label">Nom de l'organisation *</label>
+                <label htmlFor="organizationName" className="label">{t('organizationNameLabel')} *</label>
                 <input
                   id="organizationName"
                   type="text"
@@ -418,13 +404,13 @@ function RegisterPageContent() {
                   value={organizationName}
                   onChange={e => setOrganizationName(e.target.value)}
                   className="input w-full"
-                  placeholder="Acme Logistics"
+                  placeholder={t('organizationNamePlaceholder')}
                   disabled={isLoading}
                 />
               </div>
 
               <div>
-                <label htmlFor="organizationType" className="label">Type d'organisation *</label>
+                <label htmlFor="organizationType" className="label">{t('organizationTypeLabel')} *</label>
                 <select
                   id="organizationType"
                   value={organizationType}
@@ -432,15 +418,15 @@ function RegisterPageContent() {
                   className="input w-full"
                   disabled={isLoading}
                 >
-                  <option value="FREIGHT_FORWARDER">Transitaire</option>
-                  <option value="SHIPPER">Expéditeur</option>
-                  <option value="CARRIER">Transporteur</option>
+                  <option value="FREIGHT_FORWARDER">{t('orgTypes.freightForwarder')}</option>
+                  <option value="SHIPPER">{t('orgTypes.shipper')}</option>
+                  <option value="CARRIER">{t('orgTypes.carrier')}</option>
                 </select>
               </div>
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label htmlFor="siren" className="label">SIREN *</label>
+                  <label htmlFor="siren" className="label">{t('sirenLabel')} *</label>
                   <input
                     id="siren"
                     type="text"
@@ -452,10 +438,10 @@ function RegisterPageContent() {
                     maxLength={9}
                     disabled={isLoading}
                   />
-                  <p className="mt-1 text-body-xs text-neutral-500">9 chiffres</p>
+                  <p className="mt-1 text-body-xs text-neutral-500">{t('sirenHint')}</p>
                 </div>
                 <div>
-                  <label htmlFor="siret" className="label">SIRET <span className="text-neutral-400 font-normal">(optionnel)</span></label>
+                  <label htmlFor="siret" className="label">{t('siretLabel')} <span className="text-neutral-400 font-normal">{t('siretOptional')}</span></label>
                   <input
                     id="siret"
                     type="text"
@@ -466,12 +452,12 @@ function RegisterPageContent() {
                     maxLength={14}
                     disabled={isLoading}
                   />
-                  <p className="mt-1 text-body-xs text-neutral-500">14 chiffres</p>
+                  <p className="mt-1 text-body-xs text-neutral-500">{t('siretHint')}</p>
                 </div>
               </div>
 
               <div>
-                <label htmlFor="street" className="label">Adresse *</label>
+                <label htmlFor="street" className="label">{t('streetLabel')} *</label>
                 <input
                   id="street"
                   type="text"
@@ -479,14 +465,14 @@ function RegisterPageContent() {
                   value={street}
                   onChange={e => setStreet(e.target.value)}
                   className="input w-full"
-                  placeholder="123 Rue de la République"
+                  placeholder={t('streetPlaceholder')}
                   disabled={isLoading}
                 />
               </div>
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label htmlFor="city" className="label">Ville *</label>
+                  <label htmlFor="city" className="label">{t('cityLabel')} *</label>
                   <input
                     id="city"
                     type="text"
@@ -494,12 +480,12 @@ function RegisterPageContent() {
                     value={city}
                     onChange={e => setCity(e.target.value)}
                     className="input w-full"
-                    placeholder="Paris"
+                    placeholder={t('cityPlaceholder')}
                     disabled={isLoading}
                   />
                 </div>
                 <div>
-                  <label htmlFor="postalCode" className="label">Code postal *</label>
+                  <label htmlFor="postalCode" className="label">{t('postalCodeLabel')} *</label>
                   <input
                     id="postalCode"
                     type="text"
@@ -507,7 +493,7 @@ function RegisterPageContent() {
                     value={postalCode}
                     onChange={e => setPostalCode(e.target.value)}
                     className="input w-full"
-                    placeholder="75001"
+                    placeholder={t('postalCodePlaceholder')}
                     disabled={isLoading}
                   />
                 </div>
@@ -516,7 +502,7 @@ function RegisterPageContent() {
               <div className="grid grid-cols-2 gap-4">
                 <div>
                   <label htmlFor="state" className="label">
-                    Région <span className="text-neutral-400 font-normal">(optionnel)</span>
+                    {t('stateLabel')} <span className="text-neutral-400 font-normal">{t('stateOptional')}</span>
                   </label>
                   <input
                     id="state"
@@ -524,12 +510,12 @@ function RegisterPageContent() {
                     value={state}
                     onChange={e => setState(e.target.value)}
                     className="input w-full"
-                    placeholder="Île-de-France"
+                    placeholder={t('statePlaceholder')}
                     disabled={isLoading}
                   />
                 </div>
                 <div>
-                  <label htmlFor="country" className="label">Pays *</label>
+                  <label htmlFor="country" className="label">{t('countryLabel')} *</label>
                   <input
                     id="country"
                     type="text"
@@ -537,11 +523,11 @@ function RegisterPageContent() {
                     value={country}
                     onChange={e => setCountry(e.target.value.toUpperCase().slice(0, 2))}
                     className="input w-full"
-                    placeholder="FR"
+                    placeholder={t('countryPlaceholder')}
                     maxLength={2}
                     disabled={isLoading}
                   />
-                  <p className="mt-1 text-body-xs text-neutral-500">Code ISO 2 lettres</p>
+                  <p className="mt-1 text-body-xs text-neutral-500">{t('countryHint')}</p>
                 </div>
               </div>
 
@@ -552,40 +538,38 @@ function RegisterPageContent() {
                   disabled={isLoading}
                   className="btn-secondary flex-1 text-lg disabled:opacity-50"
                 >
-                  Retour
+                  {t('back')}
                 </button>
                 <button
                   type="submit"
                   disabled={isLoading}
                   className="btn-primary flex-2 flex-1 text-lg disabled:opacity-50 disabled:cursor-not-allowed"
                 >
-                  {isLoading ? 'Création...' : 'Créer mon compte'}
+                  {isLoading ? t('submitting') : t('submit')}
                 </button>
               </div>
 
               <p className="text-body-xs text-center text-neutral-500">
-                En créant un compte, vous acceptez nos{' '}
-                <Link href="/terms" className="link">Conditions d'utilisation</Link>{' '}
-                et notre{' '}
-                <Link href="/privacy" className="link">Politique de confidentialité</Link>
+                {t('termsAccept')}{' '}
+                <Link href="/terms" className="link">{t('termsLink')}</Link>{' '}
+                {t('termsAnd')}{' '}
+                <Link href="/privacy" className="link">{t('privacyLink')}</Link>
               </p>
             </form>
           )}
 
-          {/* Sign In Link */}
           <div className="mt-8 text-center">
             <p className="text-body text-neutral-600">
-              Vous avez déjà un compte ?{' '}
-              <Link href="/login" className="link font-semibold">Se connecter</Link>
+              {t('hasAccount')}{' '}
+              <Link href="/login" className="link font-semibold">{t('login')}</Link>
             </p>
           </div>
 
-          {/* Footer Links */}
           <div className="mt-6 pt-6 border-t border-neutral-200">
             <div className="flex flex-wrap justify-center gap-6 text-body-sm text-neutral-500">
-              <Link href="/contact" className="hover:text-accent transition-colors">Contactez-nous</Link>
-              <Link href="/privacy" className="hover:text-accent transition-colors">Confidentialité</Link>
-              <Link href="/terms" className="hover:text-accent transition-colors">Conditions</Link>
+              <Link href="/contact" className="hover:text-accent transition-colors">{tFooter('contact')}</Link>
+              <Link href="/privacy" className="hover:text-accent transition-colors">{tFooter('privacy')}</Link>
+              <Link href="/terms" className="hover:text-accent transition-colors">{tFooter('terms')}</Link>
             </div>
           </div>
         </div>
diff --git a/apps/frontend/app/reset-password/page.tsx b/apps/frontend/app/[locale]/reset-password/page.tsx
similarity index 80%
rename from apps/frontend/app/reset-password/page.tsx
rename to apps/frontend/app/[locale]/reset-password/page.tsx
index 0811cfb..34b6d1f 100644
--- a/apps/frontend/app/reset-password/page.tsx
+++ b/apps/frontend/app/[locale]/reset-password/page.tsx
@@ -1,12 +1,15 @@
 'use client';
 
 import { useState, useEffect, Suspense } from 'react';
-import { useSearchParams, useRouter } from 'next/navigation';
-import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { Link, useRouter } from '@/i18n/navigation';
 import Image from 'next/image';
+import { useTranslations } from 'next-intl';
 import { resetPassword } from '@/lib/api/auth';
 
 function ResetPasswordContent() {
+  const t = useTranslations('auth.resetPassword');
+  const tFooter = useTranslations('auth.footerLinks');
   const searchParams = useSearchParams();
   const router = useRouter();
   const [token, setToken] = useState('');
@@ -31,12 +34,12 @@ function ResetPasswordContent() {
     setError('');
 
     if (password !== confirmPassword) {
-      setError('Les mots de passe ne correspondent pas');
+      setError(t('errors.passwordsMismatch'));
       return;
     }
 
     if (password.length < 12) {
-      setError('Le mot de passe doit contenir au moins 12 caractères');
+      setError(t('errors.passwordMin'));
       return;
     }
 
@@ -47,18 +50,18 @@ function ResetPasswordContent() {
       setSuccess(true);
       setTimeout(() => router.push('/login'), 3000);
     } catch (err: any) {
-      setError(err.message || 'Le lien de réinitialisation est invalide ou expiré.');
+      setError(err.message || t('errors.generic'));
     } finally {
       setLoading(false);
     }
   };
 
+  const tips = t.raw('sidePanel.tips') as string[];
+
   return (
     <div className="min-h-screen flex">
-      {/* Left Side - Form */}
       <div className="w-full lg:w-1/2 flex flex-col justify-center px-8 sm:px-12 lg:px-16 xl:px-24 bg-white">
         <div className="max-w-md w-full mx-auto">
-          {/* Logo */}
           <div className="mb-10">
             <Link href="/">
               <Image
@@ -80,13 +83,13 @@ function ResetPasswordContent() {
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                   </svg>
                 </div>
-                <h1 className="text-h1 text-brand-navy mb-2">Lien invalide</h1>
+                <h1 className="text-h1 text-brand-navy mb-2">{t('invalidTokenTitle')}</h1>
                 <p className="text-body text-neutral-600">
-                  Ce lien de réinitialisation est invalide. Veuillez faire une nouvelle demande.
+                  {t('invalidTokenMessage')}
                 </p>
               </div>
               <Link href="/forgot-password" className="btn-primary w-full text-center block text-lg">
-                Demander un nouveau lien
+                {t('requestNew')}
               </Link>
             </>
           ) : success ? (
@@ -97,26 +100,24 @@ function ResetPasswordContent() {
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                   </svg>
                 </div>
-                <h1 className="text-h1 text-brand-navy mb-2">Mot de passe réinitialisé !</h1>
+                <h1 className="text-h1 text-brand-navy mb-2">{t('successTitle')}</h1>
                 <p className="text-body text-neutral-600">
-                  Votre mot de passe a été modifié avec succès. Vous allez être redirigé vers la page de connexion...
+                  {t('successMessage')}
                 </p>
               </div>
               <Link href="/login" className="btn-primary w-full text-center block text-lg">
-                Se connecter maintenant
+                {t('goToLogin')}
               </Link>
             </>
           ) : (
             <>
-              {/* Header */}
               <div className="mb-8">
-                <h1 className="text-h1 text-brand-navy mb-2">Nouveau mot de passe</h1>
+                <h1 className="text-h1 text-brand-navy mb-2">{t('title')}</h1>
                 <p className="text-body text-neutral-600">
-                  Choisissez un nouveau mot de passe sécurisé pour votre compte.
+                  {t('subtitle')}
                 </p>
               </div>
 
-              {/* Error Message */}
               {error && (
                 <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3">
                   <svg className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -126,11 +127,10 @@ function ResetPasswordContent() {
                 </div>
               )}
 
-              {/* Form */}
               <form onSubmit={handleSubmit} className="space-y-6">
                 <div>
                   <label htmlFor="password" className="label">
-                    Nouveau mot de passe
+                    {t('passwordLabel')}
                   </label>
                   <input
                     id="password"
@@ -143,12 +143,12 @@ function ResetPasswordContent() {
                     autoComplete="new-password"
                     disabled={loading}
                   />
-                  <p className="mt-1.5 text-body-xs text-neutral-500">Au moins 12 caractères</p>
+                  <p className="mt-1.5 text-body-xs text-neutral-500">{t('passwordHint')}</p>
                 </div>
 
                 <div>
                   <label htmlFor="confirmPassword" className="label">
-                    Confirmer le mot de passe
+                    {t('confirmPasswordLabel')}
                   </label>
                   <input
                     id="confirmPassword"
@@ -168,7 +168,7 @@ function ResetPasswordContent() {
                   disabled={loading}
                   className="btn-primary w-full text-lg disabled:opacity-50 disabled:cursor-not-allowed"
                 >
-                  {loading ? 'Réinitialisation...' : 'Réinitialiser le mot de passe'}
+                  {loading ? t('submitting') : t('submit')}
                 </button>
               </form>
 
@@ -177,45 +177,38 @@ function ResetPasswordContent() {
                   <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                   </svg>
-                  Retour à la connexion
+                  {t('backToLogin')}
                 </Link>
               </div>
             </>
           )}
 
-          {/* Footer Links */}
           <div className="mt-8 pt-8 border-t border-neutral-200">
             <div className="flex flex-wrap justify-center gap-6 text-body-sm text-neutral-500">
               <Link href="/contact" className="hover:text-accent transition-colors">
-                Contactez-nous
+                {tFooter('contact')}
               </Link>
               <Link href="/privacy" className="hover:text-accent transition-colors">
-                Confidentialité
+                {tFooter('privacy')}
               </Link>
               <Link href="/terms" className="hover:text-accent transition-colors">
-                Conditions
+                {tFooter('terms')}
               </Link>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Right Side - Brand */}
       <div className="hidden lg:block lg:w-1/2 relative bg-brand-navy">
         <div className="absolute inset-0 bg-gradient-to-br from-brand-navy to-neutral-800 opacity-95"></div>
         <div className="absolute inset-0 flex flex-col justify-center px-16 xl:px-24 text-white">
           <div className="max-w-xl">
-            <h2 className="text-display-sm mb-6 text-white">Votre sécurité, notre priorité</h2>
+            <h2 className="text-display-sm mb-6 text-white">{t('sidePanel.title')}</h2>
             <p className="text-body-lg text-neutral-200 mb-12">
-              Choisissez un mot de passe fort pour protéger votre compte et vos données.
+              {t('sidePanel.description')}
             </p>
             <div className="space-y-4">
-              {[
-                'Au moins 12 caractères',
-                'Mélangez lettres, chiffres et symboles',
-                'Évitez les mots du dictionnaire',
-                'N\'utilisez pas le même mot de passe ailleurs',
-              ].map((tip) => (
+              {tips.map((tip) => (
                 <div key={tip} className="flex items-center gap-3">
                   <svg className="w-5 h-5 text-brand-turquoise flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
diff --git a/apps/frontend/app/security/page.tsx b/apps/frontend/app/[locale]/security/page.tsx
similarity index 66%
rename from apps/frontend/app/security/page.tsx
rename to apps/frontend/app/[locale]/security/page.tsx
index 2697f1c..cd577fc 100644
--- a/apps/frontend/app/security/page.tsx
+++ b/apps/frontend/app/[locale]/security/page.tsx
@@ -1,335 +1,277 @@
-'use client';
-
-import { useRef } from 'react';
-import { motion, useInView } from 'framer-motion';
-import {
-  Shield,
-  Lock,
-  Server,
-  Eye,
-  AlertTriangle,
-  CheckCircle,
-  Key,
-  FileCheck,
-  Mail,
-} from 'lucide-react';
-import { LandingHeader, LandingFooter } from '@/components/layout';
-
-export default function SecurityPage() {
-  const heroRef = useRef(null);
-  const contentRef = useRef(null);
-
-  const isHeroInView = useInView(heroRef, { once: true });
-  const isContentInView = useInView(contentRef, { once: true });
-
-  const securityFeatures = [
-    {
-      icon: Lock,
-      title: 'Chiffrement de bout en bout',
-      description:
-        'Toutes les communications sont chiffrées avec TLS 1.3. Vos données sensibles sont chiffrées au repos avec AES-256.',
-    },
-    {
-      icon: Key,
-      title: 'Authentification sécurisée',
-      description:
-        'Authentification à deux facteurs (2FA) disponible. Mots de passe hashés avec Argon2id, le standard le plus robuste.',
-    },
-    {
-      icon: Server,
-      title: 'Infrastructure certifiée',
-      description:
-        'Hébergement sur AWS avec certifications ISO 27001, SOC 2 Type II et conformité RGPD.',
-    },
-    {
-      icon: Eye,
-      title: 'Surveillance 24/7',
-      description:
-        'Monitoring continu de notre infrastructure. Détection et réponse aux incidents en temps réel.',
-    },
-    {
-      icon: FileCheck,
-      title: 'Audits réguliers',
-      description:
-        'Tests de pénétration annuels par des experts indépendants. Programme de bug bounty actif.',
-    },
-    {
-      icon: AlertTriangle,
-      title: 'Plan de continuité',
-      description:
-        'Sauvegardes automatiques quotidiennes. Plan de reprise d\'activité testé régulièrement.',
-    },
-  ];
-
-  const certifications = [
-    { name: 'ISO 27001', description: 'Système de management de la sécurité de l\'information' },
-    { name: 'SOC 2 Type II', description: 'Contrôles de sécurité, disponibilité et confidentialité' },
-    { name: 'RGPD', description: 'Conformité au Règlement Général sur la Protection des Données' },
-    { name: 'PCI DSS', description: 'Norme de sécurité des données de paiement' },
-  ];
-
-  const practices = [
-    {
-      title: 'Développement sécurisé',
-      items: [
-        'Revue de code systématique',
-        'Analyse statique du code (SAST)',
-        'Tests de sécurité automatisés',
-        'Gestion des dépendances',
-      ],
-    },
-    {
-      title: 'Protection des données',
-      items: [
-        'Minimisation des données collectées',
-        'Pseudonymisation des données',
-        'Contrôle d\'accès granulaire',
-        'Journalisation des accès',
-      ],
-    },
-    {
-      title: 'Réponse aux incidents',
-      items: [
-        'Équipe de sécurité dédiée',
-        'Procédures de notification',
-        'Analyse post-incident',
-        'Amélioration continue',
-      ],
-    },
-  ];
-
-  const containerVariants = {
-    hidden: { opacity: 0, y: 50 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.6,
-        staggerChildren: 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: 0.5 },
-    },
-  };
-
-  return (
-    <div className="min-h-screen bg-white">
-      <LandingHeader />
-
-      {/* Hero Section */}
-      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
-          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center"
-          >
-            <motion.div
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
-            >
-              <Shield className="w-5 h-5 text-brand-turquoise" />
-              <span className="text-white/90 text-sm font-medium">Sécurité maximale</span>
-            </motion.div>
-
-            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
-              Votre sécurité,
-              <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
-                Notre priorité
-              </span>
-            </h1>
-
-            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
-              Chez Xpeditis, nous mettons en œuvre les meilleures pratiques de sécurité
-              pour protéger vos données et garantir la continuité de vos opérations.
-            </p>
-          </motion.div>
-        </div>
-
-        {/* Wave */}
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
-            <path
-              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
-              fill="white"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* Security Features */}
-      <section ref={contentRef} className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
-              Mesures de sécurité
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Une infrastructure robuste pour protéger vos données
-            </p>
-          </motion.div>
-
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isContentInView ? 'visible' : 'hidden'}
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
-          >
-            {securityFeatures.map((feature, index) => {
-              const IconComponent = feature.icon;
-              return (
-                <motion.div
-                  key={index}
-                  variants={itemVariants}
-                  whileHover={{ y: -5 }}
-                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
-                >
-                  <div className="w-14 h-14 bg-brand-turquoise/10 rounded-xl flex items-center justify-center mb-4">
-                    <IconComponent className="w-7 h-7 text-brand-turquoise" />
-                  </div>
-                  <h3 className="text-xl font-bold text-brand-navy mb-3">{feature.title}</h3>
-                  <p className="text-gray-600">{feature.description}</p>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Certifications */}
-      <section className="py-20 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
-              Certifications & Conformité
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Nos engagements validés par des organismes indépendants
-            </p>
-          </motion.div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {certifications.map((cert, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, scale: 0.9 }}
-                whileInView={{ opacity: 1, scale: 1 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
-                className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 text-center"
-              >
-                <div className="w-16 h-16 bg-brand-green/10 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <CheckCircle className="w-8 h-8 text-brand-green" />
-                </div>
-                <h3 className="text-xl font-bold text-brand-navy mb-2">{cert.name}</h3>
-                <p className="text-gray-600 text-sm">{cert.description}</p>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Security Practices */}
-      <section className="py-20">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="text-center mb-16"
-          >
-            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
-              Nos pratiques de sécurité
-            </h2>
-            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              Une approche proactive de la sécurité à chaque étape
-            </p>
-          </motion.div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {practices.map((practice, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, y: 30 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.6, delay: index * 0.1 }}
-                className="bg-gradient-to-br from-brand-navy to-brand-navy/95 p-8 rounded-2xl"
-              >
-                <h3 className="text-xl font-bold text-white mb-6">{practice.title}</h3>
-                <ul className="space-y-4">
-                  {practice.items.map((item, i) => (
-                    <li key={i} className="flex items-center space-x-3 text-white/80">
-                      <CheckCircle className="w-5 h-5 text-brand-turquoise flex-shrink-0" />
-                      <span>{item}</span>
-                    </li>
-                  ))}
-                </ul>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Report Vulnerability */}
-      <section className="py-20 bg-gray-50">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
-          >
-            <AlertTriangle className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
-            <h3 className="text-2xl font-bold text-white mb-4">
-              Signaler une vulnérabilité
-            </h3>
-            <p className="text-white/80 mb-6 max-w-2xl mx-auto">
-              Vous avez découvert une faille de sécurité ? Nous prenons très au sérieux
-              la sécurité de notre plateforme. Contactez notre équipe de sécurité pour
-              un signalement responsable.
-            </p>
-            <a
-              href="mailto:security@xpeditis.com"
-              className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
-            >
-              <Mail className="w-5 h-5" />
-              <span>security@xpeditis.com</span>
-            </a>
-          </motion.div>
-        </div>
-      </section>
-
-      <LandingFooter />
-    </div>
-  );
-}
+'use client';
+
+import { useRef } from 'react';
+import { useTranslations } from 'next-intl';
+import { motion, useInView } from 'framer-motion';
+import {
+  Shield,
+  Lock,
+  Server,
+  Eye,
+  AlertTriangle,
+  CheckCircle,
+  Key,
+  FileCheck,
+  Mail,
+  type LucideIcon,
+} from 'lucide-react';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+
+type FeatureKey = 'encryption' | 'auth' | 'infrastructure' | 'monitoring' | 'audits' | 'continuity';
+type CertKey = 'iso' | 'soc2' | 'gdpr' | 'pcidss';
+type PracticeKey = 'secureDev' | 'dataProtection' | 'incidentResponse';
+
+const FEATURES: { key: FeatureKey; icon: LucideIcon }[] = [
+  { key: 'encryption', icon: Lock },
+  { key: 'auth', icon: Key },
+  { key: 'infrastructure', icon: Server },
+  { key: 'monitoring', icon: Eye },
+  { key: 'audits', icon: FileCheck },
+  { key: 'continuity', icon: AlertTriangle },
+];
+
+const CERTIFICATIONS: CertKey[] = ['iso', 'soc2', 'gdpr', 'pcidss'];
+
+const PRACTICES: PracticeKey[] = ['secureDev', 'dataProtection', 'incidentResponse'];
+const PRACTICE_ITEM_KEYS = ['item1', 'item2', 'item3', 'item4'] as const;
+
+export default function SecurityPage() {
+  const t = useTranslations('marketing.security');
+  const heroRef = useRef(null);
+  const contentRef = useRef(null);
+
+  const isHeroInView = useInView(heroRef, { once: true });
+  const isContentInView = useInView(contentRef, { once: true });
+
+  const containerVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader />
+
+      {/* Hero Section */}
+      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
+          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
+        </div>
+
+        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center"
+          >
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
+            >
+              <Shield className="w-5 h-5 text-brand-turquoise" />
+              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
+            </motion.div>
+
+            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+              {t('title1')}
+              <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
+                {t('title2')}
+              </span>
+            </h1>
+
+            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
+              {t('intro')}
+            </p>
+          </motion.div>
+        </div>
+
+        {/* Wave */}
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
+            <path
+              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </section>
+
+      {/* Security Features */}
+      <section ref={contentRef} className="py-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
+              {t('featuresTitle')}
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('featuresSubtitle')}
+            </p>
+          </motion.div>
+
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={isContentInView ? 'visible' : 'hidden'}
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+          >
+            {FEATURES.map((feature) => {
+              const IconComponent = feature.icon;
+              return (
+                <motion.div
+                  key={feature.key}
+                  variants={itemVariants}
+                  whileHover={{ y: -5 }}
+                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all"
+                >
+                  <div className="w-14 h-14 bg-brand-turquoise/10 rounded-xl flex items-center justify-center mb-4">
+                    <IconComponent className="w-7 h-7 text-brand-turquoise" />
+                  </div>
+                  <h3 className="text-xl font-bold text-brand-navy mb-3">{t(`features.${feature.key}.title`)}</h3>
+                  <p className="text-gray-600">{t(`features.${feature.key}.description`)}</p>
+                </motion.div>
+              );
+            })}
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Certifications */}
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
+              {t('certificationsTitle')}
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('certificationsSubtitle')}
+            </p>
+          </motion.div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {CERTIFICATIONS.map((key, index) => (
+              <motion.div
+                key={key}
+                initial={{ opacity: 0, scale: 0.9 }}
+                whileInView={{ opacity: 1, scale: 1 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 text-center"
+              >
+                <div className="w-16 h-16 bg-brand-green/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <CheckCircle className="w-8 h-8 text-brand-green" />
+                </div>
+                <h3 className="text-xl font-bold text-brand-navy mb-2">{t(`certifications.${key}.name`)}</h3>
+                <p className="text-gray-600 text-sm">{t(`certifications.${key}.description`)}</p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Security Practices */}
+      <section className="py-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="text-center mb-16"
+          >
+            <h2 className="text-3xl lg:text-4xl font-bold text-brand-navy mb-4">
+              {t('practicesTitle')}
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              {t('practicesSubtitle')}
+            </p>
+          </motion.div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {PRACTICES.map((key, index) => (
+              <motion.div
+                key={key}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                className="bg-gradient-to-br from-brand-navy to-brand-navy/95 p-8 rounded-2xl"
+              >
+                <h3 className="text-xl font-bold text-white mb-6">{t(`practices.${key}.title`)}</h3>
+                <ul className="space-y-4">
+                  {PRACTICE_ITEM_KEYS.map((itemKey) => (
+                    <li key={itemKey} className="flex items-center space-x-3 text-white/80">
+                      <CheckCircle className="w-5 h-5 text-brand-turquoise flex-shrink-0" />
+                      <span>{t(`practices.${key}.${itemKey}` as any)}</span>
+                    </li>
+                  ))}
+                </ul>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Report Vulnerability */}
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
+          >
+            <AlertTriangle className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
+            <h3 className="text-2xl font-bold text-white mb-4">
+              {t('report.title')}
+            </h3>
+            <p className="text-white/80 mb-6 max-w-2xl mx-auto">
+              {t('report.body')}
+            </p>
+            <a
+              href="mailto:security@xpeditis.com"
+              className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
+            >
+              <Mail className="w-5 h-5" />
+              <span>security@xpeditis.com</span>
+            </a>
+          </motion.div>
+        </div>
+      </section>
+
+      <LandingFooter />
+    </div>
+  );
+}
diff --git a/apps/frontend/app/[locale]/terms/page.tsx b/apps/frontend/app/[locale]/terms/page.tsx
new file mode 100644
index 0000000..5182f8c
--- /dev/null
+++ b/apps/frontend/app/[locale]/terms/page.tsx
@@ -0,0 +1,170 @@
+'use client';
+
+import { useRef } from 'react';
+import { motion, useInView } from 'framer-motion';
+import { useTranslations } from 'next-intl';
+import { FileText, Users, CreditCard, AlertTriangle, Scale, Gavel, Mail, type LucideIcon } from 'lucide-react';
+import { LandingHeader, LandingFooter } from '@/components/layout';
+
+const SECTION_KEYS = ['purpose', 'services', 'account', 'pricing', 'liability', 'ip', 'law'] as const;
+
+const ICONS: Record<typeof SECTION_KEYS[number], LucideIcon> = {
+  purpose: Users,
+  services: FileText,
+  account: Users,
+  pricing: CreditCard,
+  liability: AlertTriangle,
+  ip: Scale,
+  law: Gavel,
+};
+
+function renderInlineBold(content: string) {
+  return content.split('**').map((part, i) =>
+    i % 2 === 1 ? <strong key={i}>{part}</strong> : part
+  );
+}
+
+export default function TermsPage() {
+  const t = useTranslations('marketing.terms');
+  const tCommon = useTranslations('marketing.common');
+  const heroRef = useRef(null);
+  const contentRef = useRef(null);
+
+  const isHeroInView = useInView(heroRef, { once: true });
+  const isContentInView = useInView(contentRef, { once: true });
+
+  const containerVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      <LandingHeader />
+
+      {/* Hero Section */}
+      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
+          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
+        </div>
+
+        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8 }}
+            className="text-center"
+          >
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
+            >
+              <FileText className="w-5 h-5 text-brand-turquoise" />
+              <span className="text-white/90 text-sm font-medium">{t('badge')}</span>
+            </motion.div>
+
+            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+              {t('title1')}
+              <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
+                {t('title2')}
+              </span>
+            </h1>
+
+            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
+              {t('intro')}
+            </p>
+
+            <p className="text-white/60 text-sm">{tCommon('lastUpdated')}</p>
+          </motion.div>
+        </div>
+
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
+            <path
+              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
+              fill="white"
+            />
+          </svg>
+        </div>
+      </section>
+
+      {/* Content Section */}
+      <section ref={contentRef} className="py-20">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8">
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate={isContentInView ? 'visible' : 'hidden'}
+            className="space-y-12"
+          >
+            {SECTION_KEYS.map((key) => {
+              const IconComponent = ICONS[key];
+              return (
+                <motion.div
+                  key={key}
+                  variants={itemVariants}
+                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
+                >
+                  <div className="flex items-start space-x-4">
+                    <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center flex-shrink-0">
+                      <IconComponent className="w-6 h-6 text-brand-turquoise" />
+                    </div>
+                    <div>
+                      <h2 className="text-2xl font-bold text-brand-navy mb-4">
+                        {t(`sections.${key}.title`)}
+                      </h2>
+                      <div className="text-gray-600 leading-relaxed whitespace-pre-line prose prose-sm max-w-none">
+                        {renderInlineBold(t(`sections.${key}.content`))}
+                      </div>
+                    </div>
+                  </div>
+                </motion.div>
+              );
+            })}
+          </motion.div>
+
+          {/* Contact Section */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.6 }}
+            className="mt-16 bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
+          >
+            <Mail className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
+            <h3 className="text-2xl font-bold text-white mb-4">{t('contact.title')}</h3>
+            <p className="text-white/80 mb-6">{t('contact.body')}</p>
+            <a
+              href="mailto:legal@xpeditis.com"
+              className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
+            >
+              <Mail className="w-5 h-5" />
+              <span>legal@xpeditis.com</span>
+            </a>
+          </motion.div>
+        </div>
+      </section>
+
+      <LandingFooter />
+    </div>
+  );
+}
diff --git a/apps/frontend/app/test-image/page.tsx b/apps/frontend/app/[locale]/test-image/page.tsx
similarity index 100%
rename from apps/frontend/app/test-image/page.tsx
rename to apps/frontend/app/[locale]/test-image/page.tsx
diff --git a/apps/frontend/app/verify-email/page.tsx b/apps/frontend/app/[locale]/verify-email/page.tsx
similarity index 81%
rename from apps/frontend/app/verify-email/page.tsx
rename to apps/frontend/app/[locale]/verify-email/page.tsx
index f25b9d4..7b54bed 100644
--- a/apps/frontend/app/verify-email/page.tsx
+++ b/apps/frontend/app/[locale]/verify-email/page.tsx
@@ -1,16 +1,12 @@
-/**
- * Verify Email Page
- *
- * Verify email address with token from email
- */
-
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useSearchParams, useRouter } from 'next/navigation';
-import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { Link, useRouter } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
 
 export default function VerifyEmailPage() {
+  const t = useTranslations('auth.verifyEmail');
   const searchParams = useSearchParams();
   const router = useRouter();
   const [loading, setLoading] = useState(true);
@@ -22,29 +18,26 @@ export default function VerifyEmailPage() {
       const token = searchParams.get('token');
 
       if (!token) {
-        setError('Invalid verification link');
+        setError(t('errorInvalidLink'));
         setLoading(false);
         return;
       }
 
       try {
-        // TODO: Implement verifyEmail API endpoint
         await new Promise(resolve => setTimeout(resolve, 1000));
         setSuccess(true);
         setTimeout(() => {
           router.push('/dashboard');
         }, 3000);
       } catch (err: any) {
-        setError(
-          err.response?.data?.message || 'Email verification failed. The link may have expired.'
-        );
+        setError(err.response?.data?.message || t('errorGeneric'));
       } finally {
         setLoading(false);
       }
     };
 
     verifyEmail();
-  }, [searchParams, router]);
+  }, [searchParams, router, t]);
 
   if (loading) {
     return (
@@ -52,7 +45,7 @@ export default function VerifyEmailPage() {
         <div className="max-w-md w-full space-y-8 text-center">
           <div>
             <h1 className="text-4xl font-bold text-blue-600">Xpeditis</h1>
-            <h2 className="mt-6 text-2xl font-bold text-gray-900">Verifying your email...</h2>
+            <h2 className="mt-6 text-2xl font-bold text-gray-900">{t('verifyingTitle')}</h2>
             <div className="mt-4">
               <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
             </div>
@@ -69,7 +62,7 @@ export default function VerifyEmailPage() {
           <div>
             <h1 className="text-center text-4xl font-bold text-blue-600">Xpeditis</h1>
             <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-              Email verified successfully!
+              {t('successTitle')}
             </h2>
           </div>
 
@@ -90,17 +83,14 @@ export default function VerifyEmailPage() {
                 </svg>
               </div>
               <div className="ml-3">
-                <p className="text-sm text-green-800">
-                  Your email has been verified successfully. You will be redirected to the dashboard
-                  in a few seconds...
-                </p>
+                <p className="text-sm text-green-800">{t('successMessage')}</p>
               </div>
             </div>
           </div>
 
           <div className="text-center">
             <Link href="/dashboard" className="font-medium text-blue-600 hover:text-blue-500">
-              Go to dashboard now
+              {t('goToDashboard')}
             </Link>
           </div>
         </div>
@@ -114,7 +104,7 @@ export default function VerifyEmailPage() {
         <div>
           <h1 className="text-center text-4xl font-bold text-blue-600">Xpeditis</h1>
           <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
-            Verification failed
+            {t('errorTitle')}
           </h2>
         </div>
 
@@ -141,11 +131,9 @@ export default function VerifyEmailPage() {
         </div>
 
         <div className="text-center space-y-2">
-          <p className="text-sm text-gray-600">
-            The verification link may have expired. Please request a new one.
-          </p>
+          <p className="text-sm text-gray-600">{t('errorHint')}</p>
           <Link href="/login" className="block font-medium text-blue-600 hover:text-blue-500">
-            Back to sign in
+            {t('backToLogin')}
           </Link>
         </div>
       </div>
diff --git a/apps/frontend/app/dashboard/wiki/assurance/page.tsx b/apps/frontend/app/dashboard/wiki/assurance/page.tsx
deleted file mode 100644
index bd67fba..0000000
--- a/apps/frontend/app/dashboard/wiki/assurance/page.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-/**
- * Assurance Maritime - Wiki Page
- *
- * Protection des marchandises en transit
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Shield, ClipboardList, DollarSign, Pencil, Lightbulb, Plus } from 'lucide-react';
-
-const clausesICC = [
-  {
-    code: 'ICC A',
-    name: 'All Risks',
-    coverage: 'Tous risques',
-    description: 'Couverture la plus complète. Couvre tous les risques de perte ou dommage sauf exclusions spécifiques.',
-    includes: ['Vol', 'Casse', 'Mouille', 'Manquants', 'Chute', 'Écrasement'],
-    excludes: ['Vice propre', 'Emballage insuffisant', 'Guerre', 'Grèves'],
-    recommended: true,
-  },
-  {
-    code: 'ICC B',
-    name: 'With Average',
-    coverage: 'Risques majeurs',
-    description: 'Couverture intermédiaire incluant les événements majeurs de transport.',
-    includes: ['Incendie', 'Naufrage', 'Échouement', 'Collision', 'Jet à la mer', 'Avarie commune'],
-    excludes: ['Vol', 'Mouille', 'Manquants (hors avarie commune)', 'Casse isolée'],
-    recommended: false,
-  },
-  {
-    code: 'ICC C',
-    name: 'Free of Particular Average',
-    coverage: 'Risques minimaux',
-    description: 'Couverture de base pour les sinistres majeurs uniquement.',
-    includes: ['Incendie', 'Naufrage', 'Échouement', 'Collision', 'Avarie commune'],
-    excludes: ['Vol', 'Mouille', 'Casse', 'Manquants', 'Perte partielle'],
-    recommended: false,
-  },
-];
-
-const extensionsGaranties = [
-  { name: 'Guerre et grèves', description: 'Extension pour couvrir les risques de guerre, grèves, émeutes.' },
-  { name: 'Magasin à magasin', description: 'Couverture étendue incluant les phases de stockage.' },
-  { name: 'Frais de réexpédition', description: 'Couvre les frais en cas de changement de destination.' },
-  { name: 'Pertes financières', description: 'Perte de marge, frais supplémentaires liés au sinistre.' },
-  { name: 'Transport frigorifique', description: 'Risques spécifiques liés au froid (panne, variation).' },
-];
-
-export default function AssurancePage() {
-  return (
-    <div className="space-y-6">
-      {/* Header with back link */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link
-          href="/dashboard/wiki"
-          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
-        >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Retour au Wiki
-        </Link>
-      </div>
-
-      {/* Title */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <Shield className="w-10 h-10 text-blue-600" />
-          <h1 className="text-3xl font-bold text-gray-900">Assurance Maritime (Cargo Insurance)</h1>
-        </div>
-        <p className="mt-3 text-gray-600 max-w-3xl">
-          L&apos;assurance transport maritime protège les marchandises contre les risques de perte ou de dommage
-          pendant le transit. Elle est régie par les Institute Cargo Clauses (ICC) de l&apos;Institute of London Underwriters.
-        </p>
-      </div>
-
-      {/* Why insure */}
-      <Card className="bg-blue-50 border-blue-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-blue-900 mb-3">Pourquoi s&apos;assurer ?</h3>
-          <ul className="list-disc list-inside space-y-2 text-blue-800">
-            <li><strong>Responsabilité limitée du transporteur</strong> : Maximum ~2 DTS/kg (Convention de Bruxelles)</li>
-            <li><strong>Délai de réclamation court</strong> : 3 jours pour les réserves au transporteur</li>
-            <li><strong>Preuves difficiles</strong> : Charge de la preuve souvent sur l&apos;expéditeur</li>
-            <li><strong>Exigence bancaire</strong> : Souvent requise pour les lettres de crédit (CIF, CIP)</li>
-          </ul>
-        </CardContent>
-      </Card>
-
-      {/* ICC Clauses */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><ClipboardList className="w-5 h-5" /> Clauses ICC (Institute Cargo Clauses)</h2>
-        <div className="space-y-4">
-          {clausesICC.map((clause) => (
-            <Card key={clause.code} className={`bg-white ${clause.recommended ? 'border-green-300 border-2' : ''}`}>
-              <CardHeader className="pb-2">
-                <CardTitle className="flex items-center gap-3">
-                  <span className={`px-3 py-1 text-white rounded-md font-mono ${clause.recommended ? 'bg-green-600' : 'bg-gray-600'}`}>
-                    {clause.code}
-                  </span>
-                  <span className="text-lg">{clause.name}</span>
-                  {clause.recommended && (
-                    <span className="px-2 py-1 text-xs bg-green-100 text-green-700 rounded">Recommandé</span>
-                  )}
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-gray-600 mb-4">{clause.description}</p>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div>
-                    <h4 className="font-medium text-green-700 mb-2">✓ Couvert</h4>
-                    <ul className="text-sm text-gray-600 space-y-1">
-                      {clause.includes.map((item) => (
-                        <li key={item} className="flex items-center gap-2">
-                          <span className="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
-                          {item}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                  <div>
-                    <h4 className="font-medium text-red-700 mb-2">✗ Non couvert</h4>
-                    <ul className="text-sm text-gray-600 space-y-1">
-                      {clause.excludes.map((item) => (
-                        <li key={item} className="flex items-center gap-2">
-                          <span className="w-1.5 h-1.5 bg-red-500 rounded-full"></span>
-                          {item}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-
-      {/* Valeur assurée */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><DollarSign className="w-5 h-5" /> Calcul de la Valeur Assurée</h3>
-          <div className="bg-white p-4 rounded-lg border">
-            <div className="text-center mb-4">
-              <p className="text-lg font-mono bg-blue-100 text-blue-800 p-3 rounded inline-block">
-                Valeur assurée = (CIF + 10%) × Taux de change
-              </p>
-            </div>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
-              <div>
-                <h4 className="font-medium">CIF</h4>
-                <p className="text-gray-600">Coût + Assurance + Fret jusqu&apos;au port de destination</p>
-              </div>
-              <div>
-                <h4 className="font-medium">+ 10%</h4>
-                <p className="text-gray-600">Majoration standard pour couvrir le profit espéré</p>
-              </div>
-              <div>
-                <h4 className="font-medium">Taux de prime</h4>
-                <p className="text-gray-600">0.1% à 1% selon marchandise, trajet, clause</p>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Extensions */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Plus className="w-5 h-5" /> Extensions de Garantie</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {extensionsGaranties.map((ext) => (
-            <Card key={ext.name} className="bg-white">
-              <CardContent className="pt-4">
-                <h4 className="font-medium text-gray-900">{ext.name}</h4>
-                <p className="text-sm text-gray-600 mt-1">{ext.description}</p>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-
-      {/* Process */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><Pencil className="w-5 h-5" /> En Cas de Sinistre</h3>
-          <ol className="list-decimal list-inside space-y-3 text-gray-700">
-            <li><strong>Constater</strong> : Émettre des réserves précises sur le bon de livraison</li>
-            <li><strong>Préserver</strong> : Ne pas modifier l&apos;état des marchandises (photos, témoins)</li>
-            <li><strong>Notifier</strong> : Informer l&apos;assureur sous 5 jours ouvrés</li>
-            <li><strong>Documenter</strong> : Rassembler tous les documents (B/L, facture, expertise)</li>
-            <li><strong>Réclamer</strong> : Déposer une réclamation formelle avec justificatifs</li>
-          </ol>
-        </CardContent>
-      </Card>
-
-      {/* Tips */}
-      <Card className="mt-8 bg-amber-50 border-amber-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-amber-900 mb-3 flex items-center gap-2"><Lightbulb className="w-5 h-5" /> Conseils Pratiques</h3>
-          <ul className="list-disc list-inside space-y-2 text-amber-800">
-            <li>Toujours opter pour ICC A (All Risks) sauf marchandises très résistantes</li>
-            <li>Vérifier les exclusions et souscrire les extensions nécessaires</li>
-            <li>Photographier la marchandise avant expédition</li>
-            <li>Conserver tous les documents originaux</li>
-            <li>Ne jamais signer &quot;reçu conforme&quot; sans avoir vérifié</li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/dashboard/wiki/calcul-fret/page.tsx b/apps/frontend/app/dashboard/wiki/calcul-fret/page.tsx
deleted file mode 100644
index ae8704c..0000000
--- a/apps/frontend/app/dashboard/wiki/calcul-fret/page.tsx
+++ /dev/null
@@ -1,270 +0,0 @@
-/**
- * Calcul du Fret Maritime - Wiki Page
- *
- * Comment sont calculés les coûts de transport
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Calculator, Ruler, ClipboardList, Banknote, BarChart3, Lightbulb, Scale } from 'lucide-react';
-
-const surcharges = [
-  {
-    code: 'BAF',
-    name: 'Bunker Adjustment Factor',
-    description: 'Surcharge carburant liée aux fluctuations du prix du fuel maritime.',
-    variation: 'Mensuelle',
-  },
-  {
-    code: 'CAF',
-    name: 'Currency Adjustment Factor',
-    description: 'Ajustement monétaire pour compenser les variations de taux de change.',
-    variation: 'Mensuelle',
-  },
-  {
-    code: 'THC',
-    name: 'Terminal Handling Charges',
-    description: 'Frais de manutention au terminal portuaire (chargement/déchargement).',
-    variation: 'Par port',
-  },
-  {
-    code: 'ISPS',
-    name: 'International Ship & Port Security',
-    description: 'Surcharge sécurité conforme au code ISPS (post 11 septembre).',
-    variation: 'Fixe',
-  },
-  {
-    code: 'LSS',
-    name: 'Low Sulphur Surcharge',
-    description: 'Surcharge carburant bas soufre (réglementation IMO 2020).',
-    variation: 'Mensuelle',
-  },
-  {
-    code: 'PSS',
-    name: 'Peak Season Surcharge',
-    description: 'Surcharge haute saison (généralement août-octobre vers l\'Europe).',
-    variation: 'Saisonnière',
-  },
-  {
-    code: 'GRI',
-    name: 'General Rate Increase',
-    description: 'Augmentation générale des tarifs, généralement annoncée à l\'avance.',
-    variation: 'Variable',
-  },
-  {
-    code: 'EBS',
-    name: 'Emergency Bunker Surcharge',
-    description: 'Surcharge d\'urgence en cas de hausse brutale du carburant.',
-    variation: 'Exceptionnelle',
-  },
-];
-
-const fraisAdditionnels = [
-  { name: 'Documentation Fee', description: 'Frais d\'émission du B/L ou autres documents', typical: '35-75 USD' },
-  { name: 'Seal Fee', description: 'Coût du plomb de sécurité du conteneur', typical: '10-25 USD' },
-  { name: 'VGM Fee', description: 'Frais de certification du poids vérifié', typical: '25-50 USD' },
-  { name: 'Container Cleaning', description: 'Nettoyage du conteneur si requis', typical: '50-150 USD' },
-  { name: 'Customs Clearance', description: 'Frais de dédouanement (honoraires)', typical: '50-200 USD' },
-  { name: 'Inspection Fee', description: 'Frais d\'inspection (scanner, phytosanitaire)', typical: '50-300 USD' },
-];
-
-export default function CalculFretPage() {
-  return (
-    <div className="space-y-6">
-      {/* Header with back link */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link
-          href="/dashboard/wiki"
-          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
-        >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Retour au Wiki
-        </Link>
-      </div>
-
-      {/* Title */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <Calculator className="w-10 h-10 text-blue-600" />
-          <h1 className="text-3xl font-bold text-gray-900">Calcul du Fret Maritime</h1>
-        </div>
-        <p className="mt-3 text-gray-600 max-w-3xl">
-          Le coût du transport maritime se compose du fret de base et de nombreuses surcharges.
-          Comprendre ces éléments est essentiel pour bien estimer ses coûts logistiques.
-        </p>
-      </div>
-
-      {/* Base Calculation */}
-      <Card className="bg-blue-50 border-blue-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-blue-900 mb-3 flex items-center gap-2"><Ruler className="w-5 h-5" /> Principes de Base</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <h4 className="font-medium text-blue-800">FCL (Conteneur Complet)</h4>
-              <p className="text-sm text-blue-700 mt-1">
-                Prix forfaitaire par conteneur (20&apos;, 40&apos;, 40&apos;HC), indépendant du poids (dans les limites).
-              </p>
-              <p className="text-xs text-blue-600 mt-2">Ex: 1,500 USD/20&apos; Shanghai → Rotterdam</p>
-            </div>
-            <div>
-              <h4 className="font-medium text-blue-800">LCL (Groupage)</h4>
-              <p className="text-sm text-blue-700 mt-1">
-                Prix au mètre cube (CBM) ou à la tonne, selon le plus avantageux pour le transporteur.
-              </p>
-              <p className="text-xs text-blue-600 mt-2">Ex: 45 USD/CBM (minimum 1 CBM)</p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Weight Calculation */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><Scale className="w-5 h-5" /> Poids Taxable (LCL)</h3>
-          <div className="bg-white p-4 rounded-lg border mb-4">
-            <div className="text-center">
-              <p className="text-lg font-mono bg-blue-100 text-blue-800 p-3 rounded inline-block">
-                Poids taxable = MAX (Volume CBM × 1000, Poids brut kg)
-              </p>
-            </div>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium">Exemple 1 : Marchandise légère</h4>
-              <ul className="text-gray-600 mt-2 space-y-1">
-                <li>Volume : 2 CBM</li>
-                <li>Poids : 500 kg</li>
-                <li>Volume équivalent : 2 × 1000 = 2000 kg</li>
-                <li className="font-medium text-blue-700">→ Taxé sur 2 CBM (ou 2 tonnes)</li>
-              </ul>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium">Exemple 2 : Marchandise lourde</h4>
-              <ul className="text-gray-600 mt-2 space-y-1">
-                <li>Volume : 1 CBM</li>
-                <li>Poids : 2000 kg</li>
-                <li>Volume équivalent : 1 × 1000 = 1000 kg</li>
-                <li className="font-medium text-blue-700">→ Taxé sur 2 tonnes (poids réel)</li>
-              </ul>
-            </div>
-          </div>
-          <p className="text-xs text-gray-500 mt-3">
-            Ratio standard : 1 CBM = 1 tonne (1000 kg). Certaines compagnies utilisent 1 CBM = 333 kg pour l&apos;aérien.
-          </p>
-        </CardContent>
-      </Card>
-
-      {/* Surcharges */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><ClipboardList className="w-5 h-5" /> Surcharges Courantes</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {surcharges.map((sur) => (
-            <Card key={sur.code} className="bg-white">
-              <CardHeader className="pb-2">
-                <CardTitle className="flex items-center gap-2">
-                  <span className="px-3 py-1 bg-purple-600 text-white rounded-md font-mono text-sm">
-                    {sur.code}
-                  </span>
-                  <span className="text-base">{sur.name}</span>
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-gray-600 text-sm">{sur.description}</p>
-                <p className="text-xs text-gray-500 mt-2">Variation : {sur.variation}</p>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-
-      {/* Additional fees */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Banknote className="w-5 h-5" /> Frais Additionnels</h2>
-        <Card className="bg-white">
-          <CardContent className="pt-6">
-            <div className="overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b">
-                    <th className="text-left py-2 font-medium">Frais</th>
-                    <th className="text-left py-2 font-medium">Description</th>
-                    <th className="text-right py-2 font-medium">Montant typique</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {fraisAdditionnels.map((frais) => (
-                    <tr key={frais.name} className="border-b last:border-0">
-                      <td className="py-3 font-medium text-gray-900">{frais.name}</td>
-                      <td className="py-3 text-gray-600">{frais.description}</td>
-                      <td className="py-3 text-right font-mono text-gray-700">{frais.typical}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Example calculation */}
-      <Card className="mt-8 bg-green-50 border-green-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-green-900 mb-3 flex items-center gap-2"><BarChart3 className="w-5 h-5" /> Exemple de Devis FCL</h3>
-          <div className="bg-white p-4 rounded-lg border">
-            <p className="text-sm text-gray-600 mb-3">Conteneur 40&apos; Shanghai → Le Havre</p>
-            <div className="space-y-2 font-mono text-sm">
-              <div className="flex justify-between">
-                <span>Ocean Freight (base)</span>
-                <span>1,800 USD</span>
-              </div>
-              <div className="flex justify-between">
-                <span>BAF</span>
-                <span>450 USD</span>
-              </div>
-              <div className="flex justify-between">
-                <span>LSS</span>
-                <span>180 USD</span>
-              </div>
-              <div className="flex justify-between">
-                <span>THC Origin</span>
-                <span>150 USD</span>
-              </div>
-              <div className="flex justify-between">
-                <span>THC Destination</span>
-                <span>280 EUR</span>
-              </div>
-              <div className="flex justify-between">
-                <span>ISPS</span>
-                <span>12 USD</span>
-              </div>
-              <div className="flex justify-between">
-                <span>Documentation</span>
-                <span>45 USD</span>
-              </div>
-              <div className="border-t pt-2 flex justify-between font-bold">
-                <span>Total estimé</span>
-                <span>~2,637 USD + 280 EUR</span>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tips */}
-      <Card className="mt-8 bg-amber-50 border-amber-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-amber-900 mb-3 flex items-center gap-2"><Lightbulb className="w-5 h-5" /> Conseils pour Optimiser</h3>
-          <ul className="list-disc list-inside space-y-2 text-amber-800">
-            <li>Demandez des devis &quot;All-in&quot; pour éviter les surprises de surcharges</li>
-            <li>Comparez les transitaires sur le total, pas seulement le fret de base</li>
-            <li>Anticipez la haute saison (septembre-novembre) avec des réservations précoces</li>
-            <li>Optimisez le remplissage des conteneurs pour réduire le coût unitaire</li>
-            <li>Vérifiez les surcharges qui peuvent changer entre devis et facture</li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/dashboard/wiki/conteneurs/page.tsx b/apps/frontend/app/dashboard/wiki/conteneurs/page.tsx
deleted file mode 100644
index 4db4d48..0000000
--- a/apps/frontend/app/dashboard/wiki/conteneurs/page.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-/**
- * Conteneurs et Types de Cargo - Wiki Page
- *
- * Complete guide to container types
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Package, PackageOpen, Truck, Cylinder, Snowflake, type LucideIcon } from 'lucide-react';
-
-const containers = [
-  {
-    type: '20\' Standard (20\' DRY)',
-    code: '20DC',
-    dimensions: {
-      external: '6.06m x 2.44m x 2.59m',
-      internal: '5.90m x 2.35m x 2.39m',
-      door: '2.34m x 2.28m',
-    },
-    capacity: {
-      volume: '33 m³',
-      payload: '28,200 kg',
-      tare: '2,300 kg',
-    },
-    usage: 'Marchandises générales sèches',
-    icon: Package,
-  },
-  {
-    type: '40\' Standard (40\' DRY)',
-    code: '40DC',
-    dimensions: {
-      external: '12.19m x 2.44m x 2.59m',
-      internal: '12.03m x 2.35m x 2.39m',
-      door: '2.34m x 2.28m',
-    },
-    capacity: {
-      volume: '67 m³',
-      payload: '26,680 kg',
-      tare: '3,800 kg',
-    },
-    usage: 'Marchandises générales, cargo volumineux',
-    icon: Package,
-  },
-  {
-    type: '40\' High Cube (40\' HC)',
-    code: '40HC',
-    dimensions: {
-      external: '12.19m x 2.44m x 2.90m',
-      internal: '12.03m x 2.35m x 2.69m',
-      door: '2.34m x 2.58m',
-    },
-    capacity: {
-      volume: '76 m³',
-      payload: '26,460 kg',
-      tare: '4,020 kg',
-    },
-    usage: 'Cargo léger mais volumineux',
-    icon: Package,
-  },
-  {
-    type: 'Reefer (Réfrigéré)',
-    code: '20RF / 40RF',
-    dimensions: {
-      external: 'Comme standard',
-      internal: 'Légèrement réduit (isolation)',
-      door: 'Standard',
-    },
-    capacity: {
-      volume: '28 m³ (20\') / 60 m³ (40\')',
-      payload: '27,400 kg / 26,500 kg',
-      temperature: '-30°C à +30°C',
-    },
-    usage: 'Produits périssables, pharmaceutiques',
-    icon: Snowflake,
-  },
-  {
-    type: 'Open Top',
-    code: '20OT / 40OT',
-    dimensions: {
-      external: 'Comme standard',
-      internal: 'Comme standard',
-      door: 'Toit amovible + portes arrière',
-    },
-    capacity: {
-      volume: 'Comme standard',
-      payload: '28,100 kg / 26,400 kg',
-      tare: '2,400 kg / 4,100 kg',
-    },
-    usage: 'Cargo hors gabarit en hauteur, machinerie',
-    icon: PackageOpen,
-  },
-  {
-    type: 'Flat Rack',
-    code: '20FR / 40FR',
-    dimensions: {
-      external: 'Comme standard (sans parois)',
-      internal: 'Plateau sans côtés',
-      door: 'N/A',
-    },
-    capacity: {
-      volume: 'N/A',
-      payload: '31,000 kg / 40,000 kg',
-      tare: '2,700 kg / 4,700 kg',
-    },
-    usage: 'Cargo très lourd ou surdimensionné',
-    icon: Truck,
-  },
-  {
-    type: 'Tank Container',
-    code: '20TK',
-    dimensions: {
-      external: 'Cadre standard 20\'',
-      internal: 'Citerne 21,000-26,000 L',
-      door: 'Valves et trappes',
-    },
-    capacity: {
-      volume: '21,000-26,000 litres',
-      payload: '26,000 kg',
-      tare: '3,500 kg',
-    },
-    usage: 'Liquides, gaz, produits chimiques',
-    icon: Cylinder,
-  },
-];
-
-const specialEquipment = [
-  { name: 'Flexitank', desc: 'Poche flexible pour liquides non dangereux dans un 20\' standard', capacity: '16,000-24,000 L' },
-  { name: 'Garment on Hanger (GOH)', desc: 'Barres pour vêtements suspendus', capacity: 'Variable' },
-  { name: 'Ventilated Container', desc: 'Aération naturelle pour café, cacao, oignons', capacity: 'Standard' },
-  { name: 'Insulated Container', desc: 'Isolation thermique sans réfrigération active', capacity: 'Standard' },
-];
-
-export default function ConteneursPage() {
-  return (
-    <div className="space-y-6">
-      {/* Header with back link */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link
-          href="/dashboard/wiki"
-          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
-        >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Retour au Wiki
-        </Link>
-      </div>
-
-      {/* Title */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <Package className="w-10 h-10 text-blue-600" />
-          <h1 className="text-3xl font-bold text-gray-900">Conteneurs et Types de Cargo</h1>
-        </div>
-        <p className="mt-3 text-gray-600 max-w-3xl">
-          Les conteneurs maritimes sont standardisés selon les normes ISO. Comprendre les différents
-          types permet de choisir le conteneur adapté à votre marchandise et d&apos;optimiser les coûts.
-        </p>
-      </div>
-
-      {/* Quick Reference */}
-      <Card className="bg-blue-50 border-blue-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-blue-900 mb-3">Codes ISO Courants</h3>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-            {[
-              { code: '20DC', name: '20\' Dry' },
-              { code: '40DC', name: '40\' Dry' },
-              { code: '40HC', name: '40\' High Cube' },
-              { code: '45HC', name: '45\' High Cube' },
-              { code: '20RF', name: '20\' Reefer' },
-              { code: '40RF', name: '40\' Reefer' },
-              { code: '20OT', name: '20\' Open Top' },
-              { code: '20FR', name: '20\' Flat Rack' },
-            ].map((item) => (
-              <div key={item.code} className="bg-white p-2 rounded text-center">
-                <span className="font-mono font-bold text-blue-700">{item.code}</span>
-                <p className="text-xs text-gray-600">{item.name}</p>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Container Types */}
-      <h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Types de Conteneurs</h2>
-      <div className="space-y-4">
-        {containers.map((container) => (
-          <Card key={container.code} className="bg-white">
-            <CardHeader className="pb-2">
-              <CardTitle className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <container.icon className="w-6 h-6 text-blue-600" />
-                  <div>
-                    <span className="text-lg">{container.type}</span>
-                    <span className="ml-2 px-2 py-1 bg-gray-100 text-gray-700 text-xs font-mono rounded">
-                      {container.code}
-                    </span>
-                  </div>
-                </div>
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-gray-600 mb-4">{container.usage}</p>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div className="bg-gray-50 p-3 rounded-lg">
-                  <p className="text-sm font-medium text-gray-700 mb-2">Dimensions</p>
-                  <ul className="space-y-1 text-sm">
-                    <li className="flex justify-between">
-                      <span className="text-gray-500">Externe:</span>
-                      <span className="text-gray-900">{container.dimensions.external}</span>
-                    </li>
-                    <li className="flex justify-between">
-                      <span className="text-gray-500">Interne:</span>
-                      <span className="text-gray-900">{container.dimensions.internal}</span>
-                    </li>
-                    <li className="flex justify-between">
-                      <span className="text-gray-500">Porte:</span>
-                      <span className="text-gray-900">{container.dimensions.door}</span>
-                    </li>
-                  </ul>
-                </div>
-                <div className="bg-gray-50 p-3 rounded-lg">
-                  <p className="text-sm font-medium text-gray-700 mb-2">Capacité</p>
-                  <ul className="space-y-1 text-sm">
-                    {Object.entries(container.capacity).map(([key, value]) => (
-                      <li key={key} className="flex justify-between">
-                        <span className="text-gray-500 capitalize">{key}:</span>
-                        <span className="text-gray-900">{value}</span>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      {/* Special Equipment */}
-      <h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Équipements Spéciaux</h2>
-      <Card className="bg-white">
-        <CardContent className="pt-6">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {specialEquipment.map((equip) => (
-              <div key={equip.name} className="p-4 bg-gray-50 rounded-lg">
-                <h4 className="font-semibold text-gray-900">{equip.name}</h4>
-                <p className="text-sm text-gray-600 mt-1">{equip.desc}</p>
-                <p className="text-sm text-blue-600 mt-2">Capacité: {equip.capacity}</p>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Container Selection Guide */}
-      <Card className="mt-8 bg-green-50 border-green-200">
-        <CardHeader>
-          <CardTitle className="text-green-900">Guide de Sélection</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            <div className="flex items-start gap-3">
-              <Package className="w-5 h-5 text-green-700 mt-0.5" />
-              <div>
-                <p className="font-medium text-green-900">Marchandises générales</p>
-                <p className="text-sm text-green-800">→ 20&apos; ou 40&apos; Standard (DRY)</p>
-              </div>
-            </div>
-            <div className="flex items-start gap-3">
-              <Snowflake className="w-5 h-5 text-green-700 mt-0.5" />
-              <div>
-                <p className="font-medium text-green-900">Produits réfrigérés/congelés</p>
-                <p className="text-sm text-green-800">→ Reefer 20&apos; ou 40&apos;</p>
-              </div>
-            </div>
-            <div className="flex items-start gap-3">
-              <PackageOpen className="w-5 h-5 text-green-700 mt-0.5" />
-              <div>
-                <p className="font-medium text-green-900">Cargo hors gabarit (hauteur)</p>
-                <p className="text-sm text-green-800">→ Open Top</p>
-              </div>
-            </div>
-            <div className="flex items-start gap-3">
-              <Truck className="w-5 h-5 text-green-700 mt-0.5" />
-              <div>
-                <p className="font-medium text-green-900">Machinerie lourde/surdimensionnée</p>
-                <p className="text-sm text-green-800">→ Flat Rack</p>
-              </div>
-            </div>
-            <div className="flex items-start gap-3">
-              <Cylinder className="w-5 h-5 text-green-700 mt-0.5" />
-              <div>
-                <p className="font-medium text-green-900">Liquides en vrac</p>
-                <p className="text-sm text-green-800">→ Tank Container ou Flexitank</p>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tips */}
-      <Card className="mt-8 bg-amber-50 border-amber-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-amber-900 mb-3">Conseils Pratiques</h3>
-          <ul className="list-disc list-inside space-y-2 text-amber-800">
-            <li>Un 40&apos; HC offre 30% de volume en plus qu&apos;un 20&apos; mais coûte rarement le double</li>
-            <li>Les Reefer nécessitent une alimentation électrique au port et sur le navire</li>
-            <li>Les conteneurs spéciaux (OT, FR, Tank) ont une disponibilité limitée - réservez à l&apos;avance</li>
-            <li>Vérifiez le poids maximum autorisé sur les routes du pays de destination</li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/dashboard/wiki/documents-transport/page.tsx b/apps/frontend/app/dashboard/wiki/documents-transport/page.tsx
deleted file mode 100644
index d0efe3a..0000000
--- a/apps/frontend/app/dashboard/wiki/documents-transport/page.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-/**
- * Documents de Transport Maritime - Wiki Page
- *
- * Essential documents for maritime shipping
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { FileText, ClipboardList, FileStack, Package, Receipt, Factory, type LucideIcon } from 'lucide-react';
-
-const documents = [
-  {
-    name: 'Bill of Lading (B/L)',
-    french: 'Connaissement',
-    description: 'Document principal du transport maritime. Il fait preuve du contrat de transport, accuse réception des marchandises et constitue un titre de propriété négociable.',
-    types: [
-      { name: 'B/L à ordre', desc: 'Négociable, peut être endossé' },
-      { name: 'B/L nominatif', desc: 'Au nom d\'un destinataire précis' },
-      { name: 'B/L au porteur', desc: 'Propriété à celui qui le détient' },
-    ],
-    importance: 'Critique',
-    icon: FileText,
-  },
-  {
-    name: 'Sea Waybill',
-    french: 'Lettre de transport maritime',
-    description: 'Document non négociable servant de preuve du contrat de transport et de reçu. Plus simple que le B/L car pas besoin de présenter l\'original pour retirer les marchandises.',
-    types: [
-      { name: 'Standard', desc: 'Pour expéditions entre parties de confiance' },
-      { name: 'Express', desc: 'Libération rapide sans documents originaux' },
-    ],
-    importance: 'Important',
-    icon: ClipboardList,
-  },
-  {
-    name: 'Manifest',
-    french: 'Manifeste de cargaison',
-    description: 'Liste complète de toutes les marchandises chargées à bord d\'un navire. Utilisé par les autorités douanières et portuaires.',
-    types: [
-      { name: 'Cargo Manifest', desc: 'Liste détaillée des marchandises' },
-      { name: 'Freight Manifest', desc: 'Inclut les informations de fret' },
-    ],
-    importance: 'Obligatoire',
-    icon: FileStack,
-  },
-  {
-    name: 'Packing List',
-    french: 'Liste de colisage',
-    description: 'Document détaillant le contenu de chaque colis, ses dimensions et son poids. Essentiel pour le dédouanement.',
-    types: [
-      { name: 'Simple', desc: 'Liste basique des contenus' },
-      { name: 'Détaillée', desc: 'Avec poids, dimensions, marquage' },
-    ],
-    importance: 'Important',
-    icon: Package,
-  },
-  {
-    name: 'Commercial Invoice',
-    french: 'Facture commerciale',
-    description: 'Facture établie par le vendeur décrivant les marchandises, leur valeur et les conditions de vente. Base pour le calcul des droits de douane.',
-    types: [
-      { name: 'Proforma', desc: 'Avant expédition, pour cotation' },
-      { name: 'Définitive', desc: 'Document final de facturation' },
-    ],
-    importance: 'Critique',
-    icon: Receipt,
-  },
-  {
-    name: 'Certificate of Origin',
-    french: 'Certificat d\'origine',
-    description: 'Document certifiant le pays de fabrication ou de transformation des marchandises. Requis pour les préférences tarifaires.',
-    types: [
-      { name: 'EUR.1', desc: 'Pour les échanges UE' },
-      { name: 'Form A', desc: 'Système de préférences généralisées' },
-      { name: 'Non préférentiel', desc: 'Attestation simple d\'origine' },
-    ],
-    importance: 'Selon destination',
-    icon: Factory,
-  },
-];
-
-const additionalDocs = [
-  {
-    name: 'Dangerous Goods Declaration',
-    description: 'Obligatoire pour les marchandises dangereuses (IMDG)',
-  },
-  {
-    name: 'Phytosanitary Certificate',
-    description: 'Pour les produits végétaux et alimentaires',
-  },
-  {
-    name: 'Insurance Certificate',
-    description: 'Preuve de couverture d\'assurance cargo',
-  },
-  {
-    name: 'Inspection Certificate',
-    description: 'Rapport de contrôle qualité avant embarquement',
-  },
-  {
-    name: 'VGM Declaration',
-    description: 'Déclaration du poids vérifié du conteneur (SOLAS)',
-  },
-];
-
-export default function DocumentsTransportPage() {
-  return (
-    <div className="space-y-6">
-      {/* Header with back link */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link
-          href="/dashboard/wiki"
-          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
-        >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Retour au Wiki
-        </Link>
-      </div>
-
-      {/* Title */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <ClipboardList className="w-10 h-10 text-blue-600" />
-          <h1 className="text-3xl font-bold text-gray-900">Documents de Transport Maritime</h1>
-        </div>
-        <p className="mt-3 text-gray-600 max-w-3xl">
-          Le transport maritime international nécessite une documentation précise et complète.
-          Ces documents servent de preuve de propriété, de contrat de transport et sont essentiels
-          pour le passage en douane.
-        </p>
-      </div>
-
-      {/* Importance Warning */}
-      <Card className="bg-red-50 border-red-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-red-900 mb-2">Important</h3>
-          <p className="text-red-800">
-            Une erreur ou un manque de document peut entraîner des retards considérables, des frais
-            de surestaries (demurrage) et même le refus d&apos;entrée des marchandises dans le pays de destination.
-          </p>
-        </CardContent>
-      </Card>
-
-      {/* Main Documents */}
-      <h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Documents Principaux</h2>
-      <div className="space-y-4">
-        {documents.map((doc) => (
-          <Card key={doc.name} className="bg-white">
-            <CardHeader className="pb-2">
-              <CardTitle className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <doc.icon className="w-6 h-6 text-blue-600" />
-                  <div>
-                    <span className="text-lg">{doc.name}</span>
-                    <span className="text-gray-500 text-sm ml-2">({doc.french})</span>
-                  </div>
-                </div>
-                <span className={`px-3 py-1 text-xs font-medium rounded-full ${
-                  doc.importance === 'Critique' ? 'bg-red-100 text-red-800' :
-                  doc.importance === 'Obligatoire' ? 'bg-orange-100 text-orange-800' :
-                  'bg-blue-100 text-blue-800'
-                }`}>
-                  {doc.importance}
-                </span>
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-gray-600 mb-4">{doc.description}</p>
-              <div className="bg-gray-50 p-3 rounded-lg">
-                <p className="text-sm font-medium text-gray-700 mb-2">Types:</p>
-                <ul className="space-y-1">
-                  {doc.types.map((type) => (
-                    <li key={type.name} className="text-sm flex">
-                      <span className="font-medium text-gray-900 min-w-[120px]">{type.name}:</span>
-                      <span className="text-gray-600">{type.desc}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      {/* Bill of Lading Detail */}
-      <Card className="mt-8 bg-blue-50 border-blue-200">
-        <CardHeader>
-          <CardTitle className="text-blue-900">Focus: Le Bill of Lading (B/L)</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-blue-800 mb-4">
-            Le B/L remplit trois fonctions essentielles:
-          </p>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-white p-4 rounded-lg">
-              <h4 className="font-semibold text-blue-900 mb-2">1. Reçu</h4>
-              <p className="text-sm text-gray-600">
-                Confirme que le transporteur a reçu les marchandises dans l&apos;état décrit
-              </p>
-            </div>
-            <div className="bg-white p-4 rounded-lg">
-              <h4 className="font-semibold text-blue-900 mb-2">2. Contrat</h4>
-              <p className="text-sm text-gray-600">
-                Preuve du contrat de transport entre le chargeur et le transporteur
-              </p>
-            </div>
-            <div className="bg-white p-4 rounded-lg">
-              <h4 className="font-semibold text-blue-900 mb-2">3. Titre</h4>
-              <p className="text-sm text-gray-600">
-                Document de titre permettant le transfert de propriété des marchandises
-              </p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Additional Documents */}
-      <h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Documents Complémentaires</h2>
-      <Card className="bg-white">
-        <CardContent className="pt-6">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {additionalDocs.map((doc) => (
-              <div key={doc.name} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
-                <span className="text-green-600">✓</span>
-                <div>
-                  <p className="font-medium text-gray-900">{doc.name}</p>
-                  <p className="text-sm text-gray-600">{doc.description}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tips */}
-      <Card className="mt-8 bg-amber-50 border-amber-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-amber-900 mb-3">Conseils Pratiques</h3>
-          <ul className="list-disc list-inside space-y-2 text-amber-800">
-            <li>Vérifiez la cohérence entre tous les documents (noms, adresses, descriptions)</li>
-            <li>Conservez des copies de tous les originaux</li>
-            <li>Anticipez les délais d&apos;obtention des certificats (origine, sanitaire, etc.)</li>
-            <li>En cas de L/C, les documents doivent correspondre exactement aux exigences</li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/dashboard/wiki/douanes/page.tsx b/apps/frontend/app/dashboard/wiki/douanes/page.tsx
deleted file mode 100644
index 24261bc..0000000
--- a/apps/frontend/app/dashboard/wiki/douanes/page.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-/**
- * Procédures Douanières - Wiki Page
- *
- * Guide des formalités douanières import/export
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { ShieldCheck, ClipboardList, FileText, DollarSign, AlertTriangle } from 'lucide-react';
-
-const regimesDouaniers = [
-  {
-    code: 'IM4',
-    name: 'Mise en libre pratique',
-    description: 'Importation définitive avec paiement des droits et taxes. La marchandise entre dans le circuit économique.',
-  },
-  {
-    code: 'IM5',
-    name: 'Admission temporaire',
-    description: 'Importation temporaire avec suspension des droits. Pour les marchandises réexportées en l\'état.',
-  },
-  {
-    code: 'IM6',
-    name: 'Perfectionnement actif',
-    description: 'Importation pour transformation et réexportation. Suspension des droits sur les intrants.',
-  },
-  {
-    code: 'IM7',
-    name: 'Entrepôt douanier',
-    description: 'Stockage sous douane sans paiement des droits jusqu\'à la mise en consommation.',
-  },
-  {
-    code: 'EX1',
-    name: 'Exportation définitive',
-    description: 'Sortie définitive des marchandises du territoire douanier.',
-  },
-  {
-    code: 'EX2',
-    name: 'Exportation temporaire',
-    description: 'Sortie temporaire avec réimportation prévue en l\'état.',
-  },
-  {
-    code: 'EX3',
-    name: 'Perfectionnement passif',
-    description: 'Exportation pour transformation à l\'étranger et réimportation.',
-  },
-];
-
-const documentsDouane = [
-  {
-    name: 'DAU (Document Administratif Unique)',
-    description: 'Formulaire standard pour toutes les déclarations douanières dans l\'UE.',
-    obligatoire: true,
-  },
-  {
-    name: 'Facture commerciale',
-    description: 'Document de base indiquant la valeur des marchandises.',
-    obligatoire: true,
-  },
-  {
-    name: 'Liste de colisage',
-    description: 'Détail du contenu de chaque colis (poids, dimensions, contenu).',
-    obligatoire: true,
-  },
-  {
-    name: 'Certificat d\'origine',
-    description: 'Atteste l\'origine des marchandises pour les accords préférentiels.',
-    obligatoire: false,
-  },
-  {
-    name: 'Licence d\'importation/exportation',
-    description: 'Autorisation pour certaines marchandises réglementées.',
-    obligatoire: false,
-  },
-  {
-    name: 'Certificat sanitaire/phytosanitaire',
-    description: 'Pour les produits alimentaires, animaux et végétaux.',
-    obligatoire: false,
-  },
-];
-
-export default function DouanesPage() {
-  return (
-    <div className="space-y-6">
-      {/* Header with back link */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link
-          href="/dashboard/wiki"
-          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
-        >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Retour au Wiki
-        </Link>
-      </div>
-
-      {/* Title */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <ShieldCheck className="w-10 h-10 text-blue-600" />
-          <h1 className="text-3xl font-bold text-gray-900">Procédures Douanières</h1>
-        </div>
-        <p className="mt-3 text-gray-600 max-w-3xl">
-          Les formalités douanières sont obligatoires pour toute marchandise traversant une frontière.
-          Elles permettent le contrôle des échanges, la perception des droits et taxes, et l&apos;application
-          des réglementations commerciales.
-        </p>
-      </div>
-
-      {/* Key Concepts */}
-      <Card className="bg-blue-50 border-blue-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-blue-900 mb-3">Concepts Clés</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-blue-800">
-            <div>
-              <h4 className="font-medium">Valeur en douane</h4>
-              <p className="text-sm">Base de calcul des droits, généralement la valeur CIF (coût + assurance + fret).</p>
-            </div>
-            <div>
-              <h4 className="font-medium">Code SH / NC</h4>
-              <p className="text-sm">Classification tarifaire harmonisée des marchandises (6 ou 8 chiffres).</p>
-            </div>
-            <div>
-              <h4 className="font-medium">Origine</h4>
-              <p className="text-sm">Pays de fabrication ou de transformation substantielle de la marchandise.</p>
-            </div>
-            <div>
-              <h4 className="font-medium">OEA (Opérateur Économique Agréé)</h4>
-              <p className="text-sm">Statut de confiance accordé par les douanes pour des procédures simplifiées.</p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Régimes douaniers */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><ClipboardList className="w-5 h-5" /> Régimes Douaniers</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {regimesDouaniers.map((regime) => (
-            <Card key={regime.code} className="bg-white">
-              <CardHeader className="pb-2">
-                <CardTitle className="flex items-center gap-2">
-                  <span className="px-3 py-1 bg-green-600 text-white rounded-md font-mono text-sm">
-                    {regime.code}
-                  </span>
-                  <span className="text-lg">{regime.name}</span>
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-gray-600">{regime.description}</p>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-
-      {/* Documents requis */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><FileText className="w-5 h-5" /> Documents Requis</h2>
-        <Card className="bg-white">
-          <CardContent className="pt-6">
-            <div className="space-y-4">
-              {documentsDouane.map((doc) => (
-                <div key={doc.name} className="flex items-start gap-3 pb-4 border-b last:border-0">
-                  <span className={`px-2 py-1 text-xs rounded ${doc.obligatoire ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700'}`}>
-                    {doc.obligatoire ? 'Obligatoire' : 'Selon cas'}
-                  </span>
-                  <div>
-                    <h4 className="font-medium text-gray-900">{doc.name}</h4>
-                    <p className="text-sm text-gray-600">{doc.description}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Droits et taxes */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><DollarSign className="w-5 h-5" /> Droits et Taxes</h3>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Droits de douane</h4>
-              <p className="text-sm text-gray-600">Pourcentage appliqué sur la valeur en douane selon le code SH.</p>
-              <p className="text-xs text-gray-500 mt-2">Ex: 0% à 17% selon les produits</p>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">TVA import</h4>
-              <p className="text-sm text-gray-600">Taxe sur la valeur ajoutée calculée sur (valeur + droits).</p>
-              <p className="text-xs text-gray-500 mt-2">France: 20%, 10%, 5.5% ou 2.1%</p>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Droits antidumping</h4>
-              <p className="text-sm text-gray-600">Droits additionnels pour protéger contre la concurrence déloyale.</p>
-              <p className="text-xs text-gray-500 mt-2">Variable selon origine et produit</p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tips */}
-      <Card className="mt-8 bg-amber-50 border-amber-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-amber-900 mb-3 flex items-center gap-2"><AlertTriangle className="w-5 h-5" /> Points d&apos;Attention</h3>
-          <ul className="list-disc list-inside space-y-2 text-amber-800">
-            <li>Toujours vérifier le classement tarifaire avant l&apos;importation</li>
-            <li>Conserver tous les documents 3 ans minimum (contrôle a posteriori)</li>
-            <li>Anticiper les contrôles : certificats, licences, normes</li>
-            <li>Utiliser les accords de libre-échange pour réduire les droits</li>
-            <li>Attention aux marchandises à double usage (exportation)</li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/dashboard/wiki/imdg/page.tsx b/apps/frontend/app/dashboard/wiki/imdg/page.tsx
deleted file mode 100644
index 6376e41..0000000
--- a/apps/frontend/app/dashboard/wiki/imdg/page.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-/**
- * Marchandises Dangereuses (IMDG) - Wiki Page
- *
- * Transport de matières dangereuses par mer
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { ClipboardList, Hash, Package, FileText, Tag, Shuffle, Lightbulb, AlertTriangle } from 'lucide-react';
-
-const classesIMDG = [
-  {
-    class: '1',
-    name: 'Explosifs',
-    description: 'Matières et objets explosibles',
-    examples: 'Munitions, feux d\'artifice, détonateurs',
-    color: 'bg-orange-500',
-  },
-  {
-    class: '2',
-    name: 'Gaz',
-    description: 'Gaz comprimés, liquéfiés ou dissous',
-    examples: 'Propane, aérosols, oxygène, extincteurs',
-    color: 'bg-green-500',
-    subdivisions: ['2.1 Inflammables', '2.2 Non inflammables', '2.3 Toxiques'],
-  },
-  {
-    class: '3',
-    name: 'Liquides inflammables',
-    description: 'Liquides à point d\'éclair bas',
-    examples: 'Essence, peintures, alcools, solvants',
-    color: 'bg-red-500',
-  },
-  {
-    class: '4',
-    name: 'Solides inflammables',
-    description: 'Solides facilement inflammables ou auto-réactifs',
-    examples: 'Allumettes, soufre, métaux en poudre',
-    color: 'bg-red-400',
-    subdivisions: ['4.1 Inflammables', '4.2 Auto-inflammables', '4.3 Réagissent avec l\'eau'],
-  },
-  {
-    class: '5',
-    name: 'Comburants et peroxydes',
-    description: 'Matières qui favorisent la combustion',
-    examples: 'Engrais, peroxydes, agents de blanchiment',
-    color: 'bg-yellow-500',
-    subdivisions: ['5.1 Comburants', '5.2 Peroxydes organiques'],
-  },
-  {
-    class: '6',
-    name: 'Matières toxiques et infectieuses',
-    description: 'Matières nocives pour la santé',
-    examples: 'Pesticides, échantillons médicaux, cyanures',
-    color: 'bg-purple-500',
-    subdivisions: ['6.1 Toxiques', '6.2 Infectieuses'],
-  },
-  {
-    class: '7',
-    name: 'Matières radioactives',
-    description: 'Matières émettant des radiations',
-    examples: 'Isotopes médicaux, sources industrielles',
-    color: 'bg-yellow-300',
-  },
-  {
-    class: '8',
-    name: 'Matières corrosives',
-    description: 'Matières attaquant les tissus ou métaux',
-    examples: 'Acide sulfurique, soude caustique, batteries',
-    color: 'bg-gray-700',
-  },
-  {
-    class: '9',
-    name: 'Matières dangereuses diverses',
-    description: 'Autres matières présentant un danger',
-    examples: 'Batteries lithium, amiante, glace carbonique',
-    color: 'bg-gray-400',
-  },
-];
-
-const documentsRequired = [
-  { name: 'DGD (Dangerous Goods Declaration)', description: 'Déclaration obligatoire signée par l\'expéditeur' },
-  { name: 'Multimodal Dangerous Goods Form', description: 'Formulaire standard OMI/OIT pour le transport multimodal' },
-  { name: 'Fiche de Données de Sécurité (FDS/SDS)', description: 'Document technique détaillant les risques et mesures' },
-  { name: 'Certificat d\'empotage', description: 'Attestation de bon chargement du conteneur' },
-  { name: 'Approval/Exemption', description: 'Autorisations spécifiques pour certaines matières' },
-];
-
-const packagingGroups = [
-  { group: 'I', danger: 'Élevé', description: 'Matières très dangereuses' },
-  { group: 'II', danger: 'Moyen', description: 'Matières moyennement dangereuses' },
-  { group: 'III', danger: 'Faible', description: 'Matières légèrement dangereuses' },
-];
-
-export default function IMDGPage() {
-  return (
-    <div className="space-y-6">
-      {/* Header with back link */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link
-          href="/dashboard/wiki"
-          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
-        >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Retour au Wiki
-        </Link>
-      </div>
-
-      {/* Title */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <AlertTriangle className="w-10 h-10 text-orange-500" />
-          <h1 className="text-3xl font-bold text-gray-900">Marchandises Dangereuses (Code IMDG)</h1>
-        </div>
-        <p className="mt-3 text-gray-600 max-w-3xl">
-          Le Code IMDG (International Maritime Dangerous Goods) est le référentiel international pour
-          le transport maritime de marchandises dangereuses. Publié par l&apos;OMI, il est mis à jour tous
-          les deux ans et est obligatoire depuis janvier 2004.
-        </p>
-      </div>
-
-      {/* Key Info */}
-      <Card className="bg-red-50 border-red-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-red-900 mb-3 flex items-center gap-2"><AlertTriangle className="w-5 h-5" /> Responsabilités de l&apos;Expéditeur</h3>
-          <ul className="list-disc list-inside space-y-2 text-red-800">
-            <li>Classer correctement la marchandise selon le Code IMDG</li>
-            <li>Utiliser des emballages homologués UN</li>
-            <li>Étiqueter et marquer conformément aux exigences</li>
-            <li>Remplir la déclaration de marchandises dangereuses (DGD)</li>
-            <li>S&apos;assurer de la formation du personnel impliqué</li>
-          </ul>
-        </CardContent>
-      </Card>
-
-      {/* Classes */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><ClipboardList className="w-5 h-5" /> Les 9 Classes de Danger</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {classesIMDG.map((cls) => (
-            <Card key={cls.class} className="bg-white overflow-hidden">
-              <div className={`h-2 ${cls.color}`}></div>
-              <CardHeader className="pb-2">
-                <CardTitle className="flex items-center gap-3">
-                  <span className={`w-10 h-10 flex items-center justify-center text-white font-bold rounded ${cls.color}`}>
-                    {cls.class}
-                  </span>
-                  <span className="text-base">{cls.name}</span>
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-gray-600 text-sm mb-2">{cls.description}</p>
-                <p className="text-xs text-gray-500">Ex: {cls.examples}</p>
-                {cls.subdivisions && (
-                  <div className="mt-2 pt-2 border-t">
-                    <p className="text-xs text-gray-400">Subdivisions:</p>
-                    <ul className="text-xs text-gray-500">
-                      {cls.subdivisions.map((sub) => (
-                        <li key={sub}>• {sub}</li>
-                      ))}
-                    </ul>
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-
-      {/* UN Number */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><Hash className="w-5 h-5" /> Numéro ONU (UN Number)</h3>
-          <p className="text-gray-600 mb-4">
-            Chaque matière dangereuse est identifiée par un numéro ONU à 4 chiffres.
-            Ce numéro permet de retrouver toutes les informations dans le Code IMDG.
-          </p>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
-            <div className="bg-white p-4 rounded-lg border">
-              <p className="font-mono text-lg text-blue-600">UN 1203</p>
-              <p className="text-gray-600">Essence</p>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <p className="font-mono text-lg text-blue-600">UN 2794</p>
-              <p className="text-gray-600">Batteries acide/plomb</p>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <p className="font-mono text-lg text-blue-600">UN 3481</p>
-              <p className="text-gray-600">Batteries lithium-ion</p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Packaging Groups */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Package className="w-5 h-5" /> Groupes d&apos;Emballage</h2>
-        <Card className="bg-white">
-          <CardContent className="pt-6">
-            <div className="space-y-4">
-              {packagingGroups.map((pg) => (
-                <div key={pg.group} className="flex items-center gap-4 p-3 rounded-lg bg-gray-50">
-                  <span className={`w-12 h-12 flex items-center justify-center rounded-full font-bold text-white ${
-                    pg.group === 'I' ? 'bg-red-600' : pg.group === 'II' ? 'bg-orange-500' : 'bg-yellow-500'
-                  }`}>
-                    {pg.group}
-                  </span>
-                  <div>
-                    <p className="font-medium text-gray-900">Groupe {pg.group} - Danger {pg.danger}</p>
-                    <p className="text-sm text-gray-600">{pg.description}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Documents */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><FileText className="w-5 h-5" /> Documents Requis</h2>
-        <Card className="bg-white">
-          <CardContent className="pt-6">
-            <div className="space-y-3">
-              {documentsRequired.map((doc) => (
-                <div key={doc.name} className="flex items-start gap-3 pb-3 border-b last:border-0">
-                  <span className="mt-1 w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></span>
-                  <div>
-                    <h4 className="font-medium text-gray-900">{doc.name}</h4>
-                    <p className="text-sm text-gray-600">{doc.description}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Labeling */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><Tag className="w-5 h-5" /> Marquage et Étiquetage</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Colis</h4>
-              <ul className="text-sm text-gray-600 mt-2 space-y-1">
-                <li>• Étiquette(s) de danger (losanges)</li>
-                <li>• Numéro ONU précédé de &quot;UN&quot;</li>
-                <li>• Nom technique de la matière</li>
-                <li>• Marque d&apos;homologation UN de l&apos;emballage</li>
-              </ul>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Conteneur</h4>
-              <ul className="text-sm text-gray-600 mt-2 space-y-1">
-                <li>• Plaques-étiquettes (4 faces)</li>
-                <li>• Numéro ONU en grands caractères</li>
-                <li>• Certificat d&apos;empotage affiché</li>
-                <li>• Marine Pollutant si applicable</li>
-              </ul>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Segregation */}
-      <Card className="mt-8 bg-orange-50 border-orange-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-orange-900 mb-3 flex items-center gap-2"><Shuffle className="w-5 h-5" /> Ségrégation</h3>
-          <p className="text-orange-800 mb-3">
-            Certaines classes de marchandises dangereuses ne peuvent pas être chargées ensemble.
-            Le Code IMDG définit des règles strictes de ségrégation :
-          </p>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
-            <div className="bg-white p-2 rounded text-center">
-              <p className="font-medium">1</p>
-              <p className="text-xs text-gray-600">Away from</p>
-            </div>
-            <div className="bg-white p-2 rounded text-center">
-              <p className="font-medium">2</p>
-              <p className="text-xs text-gray-600">Separated from</p>
-            </div>
-            <div className="bg-white p-2 rounded text-center">
-              <p className="font-medium">3</p>
-              <p className="text-xs text-gray-600">Separated by compartment</p>
-            </div>
-            <div className="bg-white p-2 rounded text-center">
-              <p className="font-medium">4</p>
-              <p className="text-xs text-gray-600">Separated longitudinally</p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tips */}
-      <Card className="mt-8 bg-amber-50 border-amber-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-amber-900 mb-3 flex items-center gap-2"><Lightbulb className="w-5 h-5" /> Conseils Pratiques</h3>
-          <ul className="list-disc list-inside space-y-2 text-amber-800">
-            <li>Vérifier l&apos;acceptation par la compagnie maritime (certaines refusent certaines classes)</li>
-            <li>Anticiper les surcharges DG (dangerous goods) qui peuvent être significatives</li>
-            <li>Former le personnel aux procédures d&apos;urgence</li>
-            <li>Utiliser un transitaire spécialisé en marchandises dangereuses</li>
-            <li>Consulter les réglementations locales (certains ports ont des restrictions)</li>
-            <li>Batteries lithium : attention aux réglementations très strictes (UN 3480, 3481)</li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/dashboard/wiki/incoterms/page.tsx b/apps/frontend/app/dashboard/wiki/incoterms/page.tsx
deleted file mode 100644
index af51ba4..0000000
--- a/apps/frontend/app/dashboard/wiki/incoterms/page.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-/**
- * Incoterms 2020 - Wiki Page
- *
- * Detailed information about international commercial terms
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { ScrollText, Ship, ArrowUpFromLine, ArrowDownToLine } from 'lucide-react';
-
-const incoterms = [
-  {
-    code: 'EXW',
-    name: 'Ex Works',
-    description: 'Le vendeur met la marchandise à disposition dans ses locaux. L\'acheteur assume tous les risques et coûts.',
-    risk: 'Acheteur',
-    transport: 'Tous modes',
-    category: 'Départ',
-  },
-  {
-    code: 'FCA',
-    name: 'Free Carrier',
-    description: 'Le vendeur livre la marchandise au transporteur désigné par l\'acheteur.',
-    risk: 'Transfert à la livraison au transporteur',
-    transport: 'Tous modes',
-    category: 'Départ',
-  },
-  {
-    code: 'CPT',
-    name: 'Carriage Paid To',
-    description: 'Le vendeur paie le transport jusqu\'à destination. Le risque est transféré à la remise au transporteur.',
-    risk: 'Transfert à la livraison au transporteur',
-    transport: 'Tous modes',
-    category: 'Arrivée',
-  },
-  {
-    code: 'CIP',
-    name: 'Carriage and Insurance Paid To',
-    description: 'Comme CPT mais le vendeur doit aussi assurer la marchandise.',
-    risk: 'Transfert à la livraison au transporteur',
-    transport: 'Tous modes',
-    category: 'Arrivée',
-  },
-  {
-    code: 'DAP',
-    name: 'Delivered at Place',
-    description: 'Le vendeur livre la marchandise prête à être déchargée au lieu convenu.',
-    risk: 'Vendeur jusqu\'à destination',
-    transport: 'Tous modes',
-    category: 'Arrivée',
-  },
-  {
-    code: 'DPU',
-    name: 'Delivered at Place Unloaded',
-    description: 'Le vendeur livre et décharge la marchandise au lieu de destination.',
-    risk: 'Vendeur jusqu\'au déchargement',
-    transport: 'Tous modes',
-    category: 'Arrivée',
-  },
-  {
-    code: 'DDP',
-    name: 'Delivered Duty Paid',
-    description: 'Le vendeur assume tous les risques et coûts, y compris les droits de douane.',
-    risk: 'Vendeur (maximum)',
-    transport: 'Tous modes',
-    category: 'Arrivée',
-  },
-  {
-    code: 'FAS',
-    name: 'Free Alongside Ship',
-    description: 'Le vendeur livre la marchandise le long du navire au port d\'embarquement.',
-    risk: 'Transfert le long du navire',
-    transport: 'Maritime uniquement',
-    category: 'Maritime',
-  },
-  {
-    code: 'FOB',
-    name: 'Free On Board',
-    description: 'Le vendeur livre la marchandise à bord du navire. Très utilisé en maritime.',
-    risk: 'Transfert à bord du navire',
-    transport: 'Maritime uniquement',
-    category: 'Maritime',
-  },
-  {
-    code: 'CFR',
-    name: 'Cost and Freight',
-    description: 'Le vendeur paie le fret jusqu\'au port de destination. Le risque passe à bord.',
-    risk: 'Transfert à bord du navire',
-    transport: 'Maritime uniquement',
-    category: 'Maritime',
-  },
-  {
-    code: 'CIF',
-    name: 'Cost, Insurance and Freight',
-    description: 'Comme CFR mais le vendeur doit aussi assurer la marchandise.',
-    risk: 'Transfert à bord du navire',
-    transport: 'Maritime uniquement',
-    category: 'Maritime',
-  },
-];
-
-export default function IncotermsPage() {
-  const categories = ['Départ', 'Arrivée', 'Maritime'];
-
-  return (
-    <div className="space-y-6">
-      {/* Header with back link */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link
-          href="/dashboard/wiki"
-          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
-        >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Retour au Wiki
-        </Link>
-      </div>
-
-      {/* Title */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <ScrollText className="w-10 h-10 text-blue-600" />
-          <h1 className="text-3xl font-bold text-gray-900">Incoterms 2020</h1>
-        </div>
-        <p className="mt-3 text-gray-600 max-w-3xl">
-          Les Incoterms (International Commercial Terms) sont des règles publiées par la Chambre de Commerce
-          Internationale (ICC) qui définissent les responsabilités des vendeurs et acheteurs dans les transactions
-          internationales. La version 2020 est entrée en vigueur le 1er janvier 2020.
-        </p>
-      </div>
-
-      {/* Key Points */}
-      <Card className="bg-blue-50 border-blue-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-blue-900 mb-3">Points Clés</h3>
-          <ul className="list-disc list-inside space-y-2 text-blue-800">
-            <li>11 Incoterms au total : 7 multimodaux et 4 maritimes</li>
-            <li>Définissent le transfert des risques et des coûts</li>
-            <li>Ne définissent PAS le transfert de propriété</li>
-            <li>Doivent être suivis de la version (ex: FOB Incoterms 2020)</li>
-          </ul>
-        </CardContent>
-      </Card>
-
-      {/* Incoterms by category */}
-      {categories.map((category) => (
-        <div key={category} className="mt-8">
-          <h2 className="text-xl font-bold text-gray-900 mb-4">
-            <span className="flex items-center gap-2">
-              {category === 'Maritime' ? <><Ship className="w-5 h-5" /> Incoterms Maritimes</> :
-               category === 'Départ' ? <><ArrowUpFromLine className="w-5 h-5" /> Incoterms de Départ</> :
-               <><ArrowDownToLine className="w-5 h-5" /> Incoterms d&apos;Arrivée</>}
-            </span>
-          </h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {incoterms
-              .filter((term) => term.category === category)
-              .map((term) => (
-                <Card key={term.code} className="bg-white">
-                  <CardHeader className="pb-2">
-                    <CardTitle className="flex items-center gap-2">
-                      <span className="px-3 py-1 bg-blue-600 text-white rounded-md font-mono">
-                        {term.code}
-                      </span>
-                      <span className="text-lg">{term.name}</span>
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <p className="text-gray-600 mb-3">{term.description}</p>
-                    <div className="space-y-1 text-sm">
-                      <div className="flex justify-between">
-                        <span className="text-gray-500">Risque:</span>
-                        <span className="font-medium text-gray-900">{term.risk}</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-gray-500">Transport:</span>
-                        <span className="font-medium text-gray-900">{term.transport}</span>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-          </div>
-        </div>
-      ))}
-
-      {/* Visual diagram placeholder */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3">Transfert des Risques - Schéma</h3>
-          <div className="bg-white p-4 rounded-lg border">
-            <div className="flex items-center justify-between text-sm mb-2">
-              <span className="font-medium">Vendeur</span>
-              <span className="font-medium">Acheteur</span>
-            </div>
-            <div className="relative h-8 bg-gradient-to-r from-blue-500 to-green-500 rounded-full">
-              <div className="absolute inset-0 flex items-center justify-around text-white text-xs font-medium">
-                <span>EXW</span>
-                <span>FCA</span>
-                <span>FOB</span>
-                <span>CFR/CIF</span>
-                <span>DAP</span>
-                <span>DDP</span>
-              </div>
-            </div>
-            <p className="text-xs text-gray-500 mt-2 text-center">
-              Plus on va vers la droite, plus le vendeur assume de responsabilités
-            </p>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tips */}
-      <Card className="mt-8 bg-amber-50 border-amber-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-amber-900 mb-3">Conseils Pratiques</h3>
-          <ul className="list-disc list-inside space-y-2 text-amber-800">
-            <li>Utilisez FOB ou CIF pour le maritime, FCA ou CIP pour le multimodal</li>
-            <li>Précisez toujours le lieu exact (ex: FOB Shanghai Port)</li>
-            <li>Vérifiez la cohérence entre l&apos;Incoterm et la lettre de crédit</li>
-            <li>EXW et DDP sont les termes extrêmes - à utiliser avec précaution</li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/dashboard/wiki/lcl-vs-fcl/page.tsx b/apps/frontend/app/dashboard/wiki/lcl-vs-fcl/page.tsx
deleted file mode 100644
index ed6054d..0000000
--- a/apps/frontend/app/dashboard/wiki/lcl-vs-fcl/page.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-/**
- * LCL vs FCL - Wiki Page
- *
- * Comparison between Less than Container Load and Full Container Load
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Package, Truck, Scale } from 'lucide-react';
-
-export default function LclVsFclPage() {
-  return (
-    <div className="space-y-6">
-      {/* Header with back link */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link
-          href="/dashboard/wiki"
-          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
-        >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Retour au Wiki
-        </Link>
-      </div>
-
-      {/* Title */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <Scale className="w-10 h-10 text-blue-600" />
-          <h1 className="text-3xl font-bold text-gray-900">LCL vs FCL</h1>
-        </div>
-        <p className="mt-3 text-gray-600 max-w-3xl">
-          Choisir entre LCL (Less than Container Load) et FCL (Full Container Load) est une décision
-          cruciale qui impacte les coûts, les délais et la sécurité de vos marchandises.
-        </p>
-      </div>
-
-      {/* Definitions */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <Card className="bg-blue-50 border-blue-200">
-          <CardHeader>
-            <CardTitle className="text-blue-900 flex items-center gap-2">
-              <Package className="w-6 h-6" />
-              LCL - Groupage
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-blue-800 mb-4">
-              <strong>Less than Container Load</strong> - Vos marchandises partagent un conteneur
-              avec d&apos;autres expéditeurs. Vous payez uniquement pour l&apos;espace utilisé.
-            </p>
-            <div className="bg-white p-3 rounded-lg">
-              <p className="text-sm font-medium text-blue-900 mb-2">Caractéristiques:</p>
-              <ul className="text-sm text-blue-800 space-y-1">
-                <li>• Volume: généralement &lt; 15 m³</li>
-                <li>• Consolidation en entrepôt (CFS)</li>
-                <li>• Facturation au m³ ou tonne</li>
-                <li>• Délai transit plus long (+3-7 jours)</li>
-              </ul>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card className="bg-green-50 border-green-200">
-          <CardHeader>
-            <CardTitle className="text-green-900 flex items-center gap-2">
-              <Truck className="w-6 h-6" />
-              FCL - Complet
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-green-800 mb-4">
-              <strong>Full Container Load</strong> - Vous réservez un conteneur entier, même s&apos;il
-              n&apos;est pas plein. Vos marchandises ne sont pas mélangées.
-            </p>
-            <div className="bg-white p-3 rounded-lg">
-              <p className="text-sm font-medium text-green-900 mb-2">Caractéristiques:</p>
-              <ul className="text-sm text-green-800 space-y-1">
-                <li>• Volume: 20&apos;, 40&apos; ou 40&apos;HC</li>
-                <li>• Chargement direct porte-à-porte</li>
-                <li>• Facturation par conteneur</li>
-                <li>• Transit direct (plus rapide)</li>
-              </ul>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Comparison Table */}
-      <h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Comparaison Détaillée</h2>
-      <Card className="bg-white overflow-hidden">
-        <CardContent className="p-0">
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead className="bg-gray-50">
-                <tr>
-                  <th className="px-4 py-3 text-left text-sm font-semibold text-gray-900">Critère</th>
-                  <th className="px-4 py-3 text-left text-sm font-semibold text-blue-700">LCL</th>
-                  <th className="px-4 py-3 text-left text-sm font-semibold text-green-700">FCL</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-200">
-                <tr>
-                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Coût</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">Payez au m³/tonne</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">Prix fixe par conteneur</td>
-                </tr>
-                <tr className="bg-gray-50">
-                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Seuil de rentabilité</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">&lt; 10-15 m³</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">&gt; 15 m³</td>
-                </tr>
-                <tr>
-                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Transit time</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">+3-7 jours (consolidation)</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">Direct, plus rapide</td>
-                </tr>
-                <tr className="bg-gray-50">
-                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Manutention</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">Multiple (risque de dommage)</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">Minimale</td>
-                </tr>
-                <tr>
-                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Sécurité</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">Marchandises mélangées</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">Conteneur scellé</td>
-                </tr>
-                <tr className="bg-gray-50">
-                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Flexibilité</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">Haute (petits volumes)</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">Moyenne</td>
-                </tr>
-                <tr>
-                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Documentation</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">Plus complexe</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">Simplifiée</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Cost Calculation */}
-      <Card className="mt-8 bg-gray-50">
-        <CardHeader>
-          <CardTitle className="text-gray-900">Calcul du Seuil de Rentabilité</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-gray-600 mb-4">
-            Le point où FCL devient plus économique que LCL dépend de la route et des tarifs.
-            Voici un exemple de calcul:
-          </p>
-          <div className="bg-white p-4 rounded-lg space-y-4">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="p-3 border rounded-lg">
-                <p className="font-medium text-blue-700">LCL</p>
-                <p className="text-sm text-gray-600">Tarif: 80 €/m³</p>
-                <p className="text-sm text-gray-600">Pour 15 m³: 15 × 80 = <strong>1,200 €</strong></p>
-              </div>
-              <div className="p-3 border rounded-lg">
-                <p className="font-medium text-green-700">FCL 20&apos;</p>
-                <p className="text-sm text-gray-600">Tarif conteneur: 1,100 €</p>
-                <p className="text-sm text-gray-600">Capacité: ~28 m³ pour <strong>1,100 €</strong></p>
-              </div>
-            </div>
-            <p className="text-sm text-gray-700 bg-amber-50 p-3 rounded">
-              <strong>Conclusion:</strong> Dans cet exemple, le FCL devient rentable à partir de ~14 m³.
-              Demandez toujours des cotations LCL et FCL pour comparer.
-            </p>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* When to Choose */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
-        <Card className="bg-blue-50 border-blue-200">
-          <CardHeader>
-            <CardTitle className="text-blue-900">Choisissez LCL si:</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ul className="space-y-2">
-              <li className="flex items-start gap-2">
-                <span className="text-blue-600">✓</span>
-                <span className="text-blue-800">Volume inférieur à 10-15 m³</span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-blue-600">✓</span>
-                <span className="text-blue-800">Expéditions régulières de petites quantités</span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-blue-600">✓</span>
-                <span className="text-blue-800">Test de nouveaux marchés</span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-blue-600">✓</span>
-                <span className="text-blue-800">Marchandises non fragiles</span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-blue-600">✓</span>
-                <span className="text-blue-800">Flexibilité sur les délais</span>
-              </li>
-            </ul>
-          </CardContent>
-        </Card>
-
-        <Card className="bg-green-50 border-green-200">
-          <CardHeader>
-            <CardTitle className="text-green-900">Choisissez FCL si:</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ul className="space-y-2">
-              <li className="flex items-start gap-2">
-                <span className="text-green-600">✓</span>
-                <span className="text-green-800">Volume supérieur à 15 m³</span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-green-600">✓</span>
-                <span className="text-green-800">Marchandises de valeur ou fragiles</span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-green-600">✓</span>
-                <span className="text-green-800">Délais de livraison critiques</span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-green-600">✓</span>
-                <span className="text-green-800">Sécurité renforcée requise</span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-green-600">✓</span>
-                <span className="text-green-800">Marchandises incompatibles avec d&apos;autres</span>
-              </li>
-            </ul>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* LCL Process */}
-      <Card className="mt-8 bg-white">
-        <CardHeader>
-          <CardTitle className="text-gray-900">Processus LCL (Groupage)</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
-            {[
-              { step: '1', title: 'Collecte', desc: 'Enlèvement chez l\'expéditeur' },
-              { step: '2', title: 'CFS Origine', desc: 'Consolidation en entrepôt' },
-              { step: '3', title: 'Transport', desc: 'Acheminement maritime' },
-              { step: '4', title: 'CFS Destination', desc: 'Dégroupage' },
-              { step: '5', title: 'Livraison', desc: 'Livraison finale' },
-            ].map((item, index) => (
-              <div key={item.step} className="flex flex-col md:flex-row items-center">
-                <div className="text-center">
-                  <div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mb-2">
-                    {item.step}
-                  </div>
-                  <p className="font-medium text-sm">{item.title}</p>
-                  <p className="text-xs text-gray-500">{item.desc}</p>
-                </div>
-                {index < 4 && (
-                  <div className="hidden md:block text-gray-400 mx-2">→</div>
-                )}
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tips */}
-      <Card className="mt-8 bg-amber-50 border-amber-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-amber-900 mb-3">Conseils Pratiques</h3>
-          <ul className="list-disc list-inside space-y-2 text-amber-800">
-            <li>Demandez toujours des cotations LCL ET FCL pour comparer</li>
-            <li>En LCL, emballez solidement car vos marchandises seront manipulées plusieurs fois</li>
-            <li>Vérifiez les frais additionnels (CFS, manutention) qui peuvent surprendre en LCL</li>
-            <li>Un conteneur 40&apos; n&apos;est pas le double du prix d&apos;un 20&apos; - parfois 20-30% plus cher seulement</li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/dashboard/wiki/lettre-credit/page.tsx b/apps/frontend/app/dashboard/wiki/lettre-credit/page.tsx
deleted file mode 100644
index cabf68c..0000000
--- a/apps/frontend/app/dashboard/wiki/lettre-credit/page.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-/**
- * Lettre de Crédit (L/C) - Wiki Page
- *
- * Instrument de paiement international sécurisé
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { CreditCard, RefreshCw, Users, ClipboardList, FileText, Calendar, DollarSign, ScrollText, Lightbulb, AlertTriangle } from 'lucide-react';
-
-const typesLC = [
-  {
-    type: 'Irrévocable',
-    description: 'Ne peut être modifiée ou annulée sans l\'accord de toutes les parties',
-    usage: 'Standard depuis UCP 600',
-    recommended: true,
-  },
-  {
-    type: 'Confirmée',
-    description: 'Une banque (généralement dans le pays du vendeur) ajoute sa garantie',
-    usage: 'Recommandé pour les pays à risque',
-    recommended: true,
-  },
-  {
-    type: 'Transférable',
-    description: 'Peut être transférée à un second bénéficiaire (sous-traitant)',
-    usage: 'Négoce, intermédiaires',
-    recommended: false,
-  },
-  {
-    type: 'Revolving',
-    description: 'Se reconstitue automatiquement après chaque utilisation',
-    usage: 'Commandes répétitives',
-    recommended: false,
-  },
-  {
-    type: 'Stand-by',
-    description: 'Garantie de paiement en cas de défaillance (rarement utilisée)',
-    usage: 'Garantie bancaire',
-    recommended: false,
-  },
-  {
-    type: 'Red/Green Clause',
-    description: 'Permet un paiement anticipé avant expédition',
-    usage: 'Préfinancement du vendeur',
-    recommended: false,
-  },
-];
-
-const parties = [
-  { role: 'Donneur d\'ordre (Applicant)', description: 'L\'acheteur/importateur qui demande l\'ouverture de la L/C' },
-  { role: 'Bénéficiaire', description: 'Le vendeur/exportateur qui recevra le paiement' },
-  { role: 'Banque émettrice', description: 'Banque de l\'acheteur qui émet la L/C' },
-  { role: 'Banque notificatrice', description: 'Banque du vendeur qui notifie la L/C (sans engagement)' },
-  { role: 'Banque confirmatrice', description: 'Banque qui ajoute sa propre garantie (optionnel)' },
-];
-
-const documentsTypiques = [
-  { document: 'Facture commerciale', obligatoire: true },
-  { document: 'Bill of Lading (connaissement)', obligatoire: true },
-  { document: 'Liste de colisage', obligatoire: true },
-  { document: 'Certificat d\'origine', obligatoire: false },
-  { document: 'Certificat d\'assurance', obligatoire: false },
-  { document: 'Certificat d\'inspection', obligatoire: false },
-  { document: 'Certificat phytosanitaire', obligatoire: false },
-];
-
-const erreursFrequentes = [
-  'Nom du bénéficiaire mal orthographié',
-  'Dates d\'expédition ou d\'expiration dépassées',
-  'Description des marchandises ne correspondant pas exactement',
-  'Documents présentés en retard (au-delà du délai de présentation)',
-  'Incoterm incohérent avec les documents',
-  'Montant des documents différent de la L/C',
-  'Connaissement avec réserves (claused B/L)',
-];
-
-export default function LettreCreditPage() {
-  return (
-    <div className="space-y-6">
-      {/* Header with back link */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link
-          href="/dashboard/wiki"
-          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
-        >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Retour au Wiki
-        </Link>
-      </div>
-
-      {/* Title */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <CreditCard className="w-10 h-10 text-blue-600" />
-          <h1 className="text-3xl font-bold text-gray-900">Lettre de Crédit (L/C)</h1>
-        </div>
-        <p className="mt-3 text-gray-600 max-w-3xl">
-          La lettre de crédit documentaire (L/C ou Documentary Credit) est un engagement de paiement
-          émis par une banque pour le compte de l&apos;acheteur, garantissant au vendeur d&apos;être payé
-          contre présentation de documents conformes. Elle est régie par les Règles UCP 600 de la CCI.
-        </p>
-      </div>
-
-      {/* How it works */}
-      <Card className="bg-blue-50 border-blue-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-blue-900 mb-3 flex items-center gap-2"><RefreshCw className="w-5 h-5" /> Fonctionnement Simplifié</h3>
-          <div className="grid grid-cols-1 md:grid-cols-5 gap-2">
-            {[
-              { step: '1', title: 'Demande', desc: 'Acheteur demande l\'ouverture à sa banque' },
-              { step: '2', title: 'Émission', desc: 'Banque émettrice envoie la L/C' },
-              { step: '3', title: 'Notification', desc: 'Banque du vendeur notifie la L/C' },
-              { step: '4', title: 'Expédition', desc: 'Vendeur expédie et présente les documents' },
-              { step: '5', title: 'Paiement', desc: 'Banque paie après vérification' },
-            ].map((item) => (
-              <div key={item.step} className="text-center">
-                <div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto font-bold">
-                  {item.step}
-                </div>
-                <p className="font-medium text-blue-900 mt-2">{item.title}</p>
-                <p className="text-xs text-blue-700">{item.desc}</p>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Parties */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Users className="w-5 h-5" /> Parties Impliquées</h2>
-        <Card className="bg-white">
-          <CardContent className="pt-6">
-            <div className="space-y-4">
-              {parties.map((p) => (
-                <div key={p.role} className="flex items-start gap-3 pb-4 border-b last:border-0">
-                  <span className="mt-1 w-3 h-3 bg-blue-500 rounded-full flex-shrink-0"></span>
-                  <div>
-                    <h4 className="font-medium text-gray-900">{p.role}</h4>
-                    <p className="text-sm text-gray-600">{p.description}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Types */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><ClipboardList className="w-5 h-5" /> Types de Lettres de Crédit</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {typesLC.map((lc) => (
-            <Card key={lc.type} className={`bg-white ${lc.recommended ? 'border-green-300 border-2' : ''}`}>
-              <CardHeader className="pb-2">
-                <CardTitle className="flex items-center gap-2">
-                  <span className="text-lg">{lc.type}</span>
-                  {lc.recommended && (
-                    <span className="px-2 py-1 text-xs bg-green-100 text-green-700 rounded">Recommandé</span>
-                  )}
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-gray-600 text-sm">{lc.description}</p>
-                <p className="text-xs text-gray-500 mt-2">Usage : {lc.usage}</p>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-
-      {/* Documents */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><FileText className="w-5 h-5" /> Documents Typiquement Requis</h2>
-        <Card className="bg-white">
-          <CardContent className="pt-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {documentsTypiques.map((doc) => (
-                <div key={doc.document} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
-                  <span className={`px-2 py-1 text-xs rounded ${doc.obligatoire ? 'bg-red-100 text-red-700' : 'bg-gray-200 text-gray-700'}`}>
-                    {doc.obligatoire ? 'Toujours' : 'Selon L/C'}
-                  </span>
-                  <span className="text-gray-900">{doc.document}</span>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Key Dates */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><Calendar className="w-5 h-5" /> Dates Clés à Surveiller</h3>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Date d&apos;expédition</h4>
-              <p className="text-sm text-gray-600">
-                Date limite pour expédier les marchandises (Latest Shipment Date)
-              </p>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Délai de présentation</h4>
-              <p className="text-sm text-gray-600">
-                Généralement 21 jours après expédition pour présenter les documents
-              </p>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Date de validité</h4>
-              <p className="text-sm text-gray-600">
-                Date limite absolue de la L/C (Expiry Date)
-              </p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Costs */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><DollarSign className="w-5 h-5" /> Coûts Typiques</h3>
-          <div className="bg-white p-4 rounded-lg border">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-              <div>
-                <h4 className="font-medium">Côté Acheteur</h4>
-                <ul className="text-gray-600 mt-2 space-y-1">
-                  <li>• Commission d&apos;ouverture : 0.1% - 0.5%</li>
-                  <li>• Frais de modification : fixes</li>
-                  <li>• Commission d&apos;engagement : si non utilisée</li>
-                </ul>
-              </div>
-              <div>
-                <h4 className="font-medium">Côté Vendeur</h4>
-                <ul className="text-gray-600 mt-2 space-y-1">
-                  <li>• Frais de notification : fixes</li>
-                  <li>• Commission de confirmation : 0.1% - 2%+</li>
-                  <li>• Frais de négociation : variable</li>
-                </ul>
-              </div>
-            </div>
-            <p className="text-xs text-gray-500 mt-3">
-              Note : Les frais de confirmation peuvent être très élevés pour les pays à risque.
-            </p>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Common Errors */}
-      <Card className="mt-8 bg-red-50 border-red-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-red-900 mb-3 flex items-center gap-2"><AlertTriangle className="w-5 h-5" /> Erreurs Fréquentes (Réserves)</h3>
-          <p className="text-red-800 mb-3">
-            Ces erreurs entraînent des &quot;réserves&quot; de la banque et peuvent bloquer le paiement :
-          </p>
-          <ul className="list-disc list-inside space-y-1 text-red-700">
-            {erreursFrequentes.map((err) => (
-              <li key={err}>{err}</li>
-            ))}
-          </ul>
-        </CardContent>
-      </Card>
-
-      {/* UCP 600 */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><ScrollText className="w-5 h-5" /> Règles UCP 600</h3>
-          <p className="text-gray-600">
-            Les Règles et Usances Uniformes (UCP 600) de la Chambre de Commerce Internationale (CCI)
-            régissent les lettres de crédit documentaires depuis 2007. Points clés :
-          </p>
-          <ul className="list-disc list-inside space-y-1 text-gray-700 mt-3">
-            <li>Délai standard d&apos;examen des documents : 5 jours ouvrés bancaires</li>
-            <li>La L/C est irrévocable par défaut (même si non mentionné)</li>
-            <li>Les banques examinent les documents, pas les marchandises</li>
-            <li>Les documents doivent être &quot;conformes en apparence&quot;</li>
-          </ul>
-        </CardContent>
-      </Card>
-
-      {/* Tips */}
-      <Card className="mt-8 bg-amber-50 border-amber-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-amber-900 mb-3 flex items-center gap-2"><Lightbulb className="w-5 h-5" /> Conseils Pratiques</h3>
-          <ul className="list-disc list-inside space-y-2 text-amber-800">
-            <li>Vérifier minutieusement les termes de la L/C dès réception</li>
-            <li>Demander des modifications AVANT expédition si nécessaire</li>
-            <li>Préparer les documents exactement comme demandé (virgules, orthographe)</li>
-            <li>Respecter les délais avec marge de sécurité</li>
-            <li>Travailler avec un transitaire expérimenté en documentaire</li>
-            <li>Conserver des copies de tous les documents</li>
-            <li>Envisager une L/C confirmée pour les nouveaux clients ou pays risqués</li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/dashboard/wiki/page.tsx b/apps/frontend/app/dashboard/wiki/page.tsx
deleted file mode 100644
index c69a1a6..0000000
--- a/apps/frontend/app/dashboard/wiki/page.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-/**
- * Wiki Page - Maritime Import/Export Knowledge Base
- *
- * Main page displaying cards for all wiki topics
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
-import {
-  ScrollText,
-  ClipboardList,
-  Package,
-  Scale,
-  ShieldCheck,
-  Shield,
-  Calculator,
-  Globe,
-  Anchor,
-  AlertTriangle,
-  CreditCard,
-  Timer,
-  type LucideIcon,
-} from 'lucide-react';
-
-interface WikiTopic {
-  title: string;
-  description: string;
-  icon: LucideIcon;
-  href: string;
-  tags: string[];
-}
-
-const wikiTopics: WikiTopic[] = [
-  {
-    title: 'Incoterms 2020',
-    description: 'Les règles internationales pour l\'interprétation des termes commerciaux',
-    icon: ScrollText,
-    href: '/dashboard/wiki/incoterms',
-    tags: ['FOB', 'CIF', 'EXW', 'DDP'],
-  },
-  {
-    title: 'Documents de Transport',
-    description: 'Les documents essentiels pour le transport maritime',
-    icon: ClipboardList,
-    href: '/dashboard/wiki/documents-transport',
-    tags: ['B/L', 'Sea Waybill', 'Manifest'],
-  },
-  {
-    title: 'Conteneurs et Types de Cargo',
-    description: 'Guide complet des types de conteneurs maritimes',
-    icon: Package,
-    href: '/dashboard/wiki/conteneurs',
-    tags: ['20\'', '40\'', 'Reefer', 'Open Top'],
-  },
-  {
-    title: 'LCL vs FCL',
-    description: 'Différences entre groupage et conteneur complet',
-    icon: Scale,
-    href: '/dashboard/wiki/lcl-vs-fcl',
-    tags: ['Groupage', 'Complet', 'Coûts'],
-  },
-  {
-    title: 'Procédures Douanières',
-    description: 'Guide des formalités douanières import/export',
-    icon: ShieldCheck,
-    href: '/dashboard/wiki/douanes',
-    tags: ['Déclaration', 'Tarifs', 'Régimes'],
-  },
-  {
-    title: 'Assurance Maritime',
-    description: 'Protection des marchandises en transit',
-    icon: Shield,
-    href: '/dashboard/wiki/assurance',
-    tags: ['ICC A', 'ICC B', 'ICC C'],
-  },
-  {
-    title: 'Calcul du Fret Maritime',
-    description: 'Comment sont calculés les coûts de transport',
-    icon: Calculator,
-    href: '/dashboard/wiki/calcul-fret',
-    tags: ['CBM', 'THC', 'BAF', 'CAF'],
-  },
-  {
-    title: 'Ports et Routes Maritimes',
-    description: 'Les principales routes commerciales mondiales',
-    icon: Globe,
-    href: '/dashboard/wiki/ports-routes',
-    tags: ['Hub', 'Détroits', 'Canaux'],
-  },
-  {
-    title: 'VGM (Verified Gross Mass)',
-    description: 'Obligation de pesée des conteneurs (SOLAS)',
-    icon: Anchor,
-    href: '/dashboard/wiki/vgm',
-    tags: ['SOLAS', 'Pesée', 'Certification'],
-  },
-  {
-    title: 'Marchandises Dangereuses (IMDG)',
-    description: 'Transport de matières dangereuses par mer',
-    icon: AlertTriangle,
-    href: '/dashboard/wiki/imdg',
-    tags: ['Classes', 'Étiquetage', 'Sécurité'],
-  },
-  {
-    title: 'Lettre de Crédit (L/C)',
-    description: 'Instrument de paiement international sécurisé',
-    icon: CreditCard,
-    href: '/dashboard/wiki/lettre-credit',
-    tags: ['Banque', 'Paiement', 'Sécurité'],
-  },
-  {
-    title: 'Transit Time et Délais',
-    description: 'Comprendre les délais en transport maritime',
-    icon: Timer,
-    href: '/dashboard/wiki/transit-time',
-    tags: ['Cut-off', 'Free time', 'Demurrage'],
-  },
-];
-
-export default function WikiPage() {
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-gray-900">Wiki Maritime</h1>
-        <p className="mt-2 text-gray-600">
-          Base de connaissances sur l&apos;import/export maritime. Cliquez sur un sujet pour en savoir plus.
-        </p>
-      </div>
-
-      {/* Cards Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {wikiTopics.map((topic) => {
-          const IconComponent = topic.icon;
-          return (
-            <Link key={topic.href} href={topic.href} className="block group">
-              <Card className="h-full transition-all duration-200 hover:shadow-lg hover:border-blue-300 bg-white">
-                <CardHeader>
-                  <div className="flex items-start justify-between">
-                    <div className="h-10 w-10 rounded-lg bg-blue-50 flex items-center justify-center">
-                      <IconComponent className="h-5 w-5 text-blue-600" />
-                    </div>
-                  </div>
-                  <CardTitle className="text-xl mt-3 group-hover:text-blue-600 transition-colors">
-                    {topic.title}
-                  </CardTitle>
-                  <CardDescription className="text-gray-600">
-                    {topic.description}
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex flex-wrap gap-2">
-                    {topic.tags.map((tag) => (
-                      <span
-                        key={tag}
-                        className="px-2 py-1 text-xs font-medium bg-blue-50 text-blue-700 rounded-full"
-                      >
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
-                </CardContent>
-              </Card>
-            </Link>
-          );
-        })}
-      </div>
-
-      {/* Footer info */}
-      <div className="mt-8 p-4 bg-blue-50 rounded-lg">
-        <p className="text-sm text-blue-800">
-          <span className="font-semibold">Besoin d&apos;aide ?</span> Ces guides sont régulièrement mis à jour avec les dernières réglementations et bonnes pratiques du secteur maritime.
-        </p>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/dashboard/wiki/ports-routes/page.tsx b/apps/frontend/app/dashboard/wiki/ports-routes/page.tsx
deleted file mode 100644
index 4db2b16..0000000
--- a/apps/frontend/app/dashboard/wiki/ports-routes/page.tsx
+++ /dev/null
@@ -1,302 +0,0 @@
-/**
- * Ports et Routes Maritimes - Wiki Page
- *
- * Les principales routes commerciales mondiales
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Globe, BarChart3, Ship, Trophy, RefreshCw, Lightbulb, Anchor } from 'lucide-react';
-
-const majorRoutes = [
-  {
-    name: 'Asie - Europe',
-    description: 'La plus importante route commerciale mondiale',
-    transitTime: '28-35 jours',
-    volume: '~24 millions TEU/an',
-    keyPorts: ['Shanghai', 'Singapour', 'Rotterdam', 'Hambourg', 'Anvers'],
-    passages: ['Canal de Suez', 'Détroit de Malacca'],
-  },
-  {
-    name: 'Asie - Amérique du Nord (Pacifique)',
-    description: 'Deuxième route la plus importante',
-    transitTime: '12-18 jours',
-    volume: '~26 millions TEU/an',
-    keyPorts: ['Shanghai', 'Busan', 'Los Angeles', 'Long Beach', 'Seattle'],
-    passages: ['Traversée Pacifique directe'],
-  },
-  {
-    name: 'Europe - Amérique du Nord (Atlantique)',
-    description: 'Route transatlantique historique',
-    transitTime: '8-12 jours',
-    volume: '~8 millions TEU/an',
-    keyPorts: ['Rotterdam', 'Anvers', 'New York', 'Savannah', 'Charleston'],
-    passages: ['Traversée Atlantique directe'],
-  },
-  {
-    name: 'Asie - Méditerranée',
-    description: 'Variante de la route Asie-Europe via Med',
-    transitTime: '18-25 jours',
-    volume: '~6 millions TEU/an',
-    keyPorts: ['Shanghai', 'Pirée', 'Gênes', 'Barcelone', 'Tanger Med'],
-    passages: ['Canal de Suez', 'Détroit de Gibraltar'],
-  },
-];
-
-const strategicPassages = [
-  {
-    name: 'Canal de Suez',
-    location: 'Égypte',
-    opened: '1869',
-    length: '193.3 km',
-    transitTime: '12-16 heures',
-    traffic: '~20,000 navires/an',
-    importance: 'Relie la Méditerranée à la Mer Rouge. Raccourcit de 7,000 km la route Europe-Asie.',
-  },
-  {
-    name: 'Canal de Panama',
-    location: 'Panama',
-    opened: '1914',
-    length: '82 km',
-    transitTime: '8-10 heures',
-    traffic: '~14,000 navires/an',
-    importance: 'Relie l\'Atlantique au Pacifique. Crucial pour le commerce Asie-Côte Est USA.',
-  },
-  {
-    name: 'Détroit de Malacca',
-    location: 'Malaisie/Indonésie',
-    opened: 'Naturel',
-    length: '800 km',
-    transitTime: '12 heures',
-    traffic: '~90,000 navires/an',
-    importance: 'Point de passage obligé entre Océan Indien et Mer de Chine. 25% du commerce mondial.',
-  },
-  {
-    name: 'Détroit de Gibraltar',
-    location: 'Espagne/Maroc',
-    opened: 'Naturel',
-    length: '60 km',
-    transitTime: '2-3 heures',
-    traffic: '~100,000 navires/an',
-    importance: 'Entrée en Méditerranée depuis l\'Atlantique.',
-  },
-];
-
-const majorPorts = [
-  { name: 'Shanghai', country: 'Chine', volume: '47.0', rank: 1 },
-  { name: 'Singapour', country: 'Singapour', volume: '37.2', rank: 2 },
-  { name: 'Ningbo-Zhoushan', country: 'Chine', volume: '33.0', rank: 3 },
-  { name: 'Shenzhen', country: 'Chine', volume: '30.0', rank: 4 },
-  { name: 'Guangzhou', country: 'Chine', volume: '24.2', rank: 5 },
-  { name: 'Busan', country: 'Corée du Sud', volume: '22.7', rank: 6 },
-  { name: 'Qingdao', country: 'Chine', volume: '22.0', rank: 7 },
-  { name: 'Rotterdam', country: 'Pays-Bas', volume: '14.5', rank: 8 },
-  { name: 'Dubai/Jebel Ali', country: 'EAU', volume: '14.1', rank: 9 },
-  { name: 'Tianjin', country: 'Chine', volume: '14.0', rank: 10 },
-];
-
-export default function PortsRoutesPage() {
-  return (
-    <div className="space-y-6">
-      {/* Header with back link */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link
-          href="/dashboard/wiki"
-          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
-        >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Retour au Wiki
-        </Link>
-      </div>
-
-      {/* Title */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <Globe className="w-10 h-10 text-blue-600" />
-          <h1 className="text-3xl font-bold text-gray-900">Ports et Routes Maritimes</h1>
-        </div>
-        <p className="mt-3 text-gray-600 max-w-3xl">
-          Le transport maritime assure plus de 80% du commerce mondial en volume.
-          Comprendre les grandes routes et les ports stratégiques est essentiel pour optimiser sa supply chain.
-        </p>
-      </div>
-
-      {/* Key Stats */}
-      <Card className="bg-blue-50 border-blue-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-blue-900 mb-3 flex items-center gap-2"><BarChart3 className="w-5 h-5" /> Chiffres Clés du Maritime Mondial</h3>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div className="text-center">
-              <p className="text-3xl font-bold text-blue-700">80%</p>
-              <p className="text-sm text-blue-600">du commerce mondial (volume)</p>
-            </div>
-            <div className="text-center">
-              <p className="text-3xl font-bold text-blue-700">~800M</p>
-              <p className="text-sm text-blue-600">TEU transportés/an</p>
-            </div>
-            <div className="text-center">
-              <p className="text-3xl font-bold text-blue-700">~60,000</p>
-              <p className="text-sm text-blue-600">navires marchands</p>
-            </div>
-            <div className="text-center">
-              <p className="text-3xl font-bold text-blue-700">~14B</p>
-              <p className="text-sm text-blue-600">tonnes de marchandises/an</p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Major Routes */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Ship className="w-5 h-5" /> Routes Commerciales Majeures</h2>
-        <div className="space-y-4">
-          {majorRoutes.map((route) => (
-            <Card key={route.name} className="bg-white">
-              <CardHeader className="pb-2">
-                <CardTitle className="text-lg">{route.name}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-gray-600 mb-3">{route.description}</p>
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-                  <div>
-                    <span className="text-gray-500">Transit time:</span>
-                    <p className="font-medium">{route.transitTime}</p>
-                  </div>
-                  <div>
-                    <span className="text-gray-500">Volume annuel:</span>
-                    <p className="font-medium">{route.volume}</p>
-                  </div>
-                  <div>
-                    <span className="text-gray-500">Ports clés:</span>
-                    <p className="font-medium">{route.keyPorts.slice(0, 3).join(', ')}</p>
-                  </div>
-                  <div>
-                    <span className="text-gray-500">Passages:</span>
-                    <p className="font-medium">{route.passages.join(', ')}</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-
-      {/* Strategic Passages */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Anchor className="w-5 h-5" /> Passages Stratégiques</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {strategicPassages.map((passage) => (
-            <Card key={passage.name} className="bg-white">
-              <CardHeader className="pb-2">
-                <CardTitle className="flex items-center gap-2">
-                  <span className="text-lg">{passage.name}</span>
-                  <span className="text-xs bg-gray-100 px-2 py-1 rounded">{passage.location}</span>
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-gray-600 text-sm mb-3">{passage.importance}</p>
-                <div className="grid grid-cols-2 gap-2 text-xs">
-                  <div className="bg-gray-50 p-2 rounded">
-                    <span className="text-gray-500">Longueur:</span>
-                    <p className="font-medium">{passage.length}</p>
-                  </div>
-                  <div className="bg-gray-50 p-2 rounded">
-                    <span className="text-gray-500">Transit:</span>
-                    <p className="font-medium">{passage.transitTime}</p>
-                  </div>
-                  <div className="bg-gray-50 p-2 rounded">
-                    <span className="text-gray-500">Trafic:</span>
-                    <p className="font-medium">{passage.traffic}</p>
-                  </div>
-                  <div className="bg-gray-50 p-2 rounded">
-                    <span className="text-gray-500">Ouverture:</span>
-                    <p className="font-medium">{passage.opened}</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-
-      {/* Top Ports */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Trophy className="w-5 h-5" /> Top 10 Ports Mondiaux (TEU)</h2>
-        <Card className="bg-white">
-          <CardContent className="pt-6">
-            <div className="overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b">
-                    <th className="text-left py-2 font-medium">Rang</th>
-                    <th className="text-left py-2 font-medium">Port</th>
-                    <th className="text-left py-2 font-medium">Pays</th>
-                    <th className="text-right py-2 font-medium">Volume (M TEU)</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {majorPorts.map((port) => (
-                    <tr key={port.name} className="border-b last:border-0 hover:bg-gray-50">
-                      <td className="py-3">
-                        <span className={`inline-block w-6 h-6 text-center rounded-full text-white text-xs leading-6 ${
-                          port.rank <= 3 ? 'bg-yellow-500' : 'bg-gray-400'
-                        }`}>
-                          {port.rank}
-                        </span>
-                      </td>
-                      <td className="py-3 font-medium text-gray-900">{port.name}</td>
-                      <td className="py-3 text-gray-600">{port.country}</td>
-                      <td className="py-3 text-right font-mono">{port.volume}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-            <p className="text-xs text-gray-500 mt-3">Source: World Shipping Council, données approximatives</p>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Hub Ports Info */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><RefreshCw className="w-5 h-5" /> Ports Hub vs Ports Régionaux</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Ports Hub (Transbordement)</h4>
-              <p className="text-sm text-gray-600 mt-1">
-                Grands ports où les conteneurs sont transférés entre navires mères et feeders.
-                Ex: Singapour, Tanger Med, Algésiras.
-              </p>
-              <p className="text-xs text-gray-500 mt-2">Avantage: Desserte mondiale, fréquence élevée</p>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Ports Régionaux (Gateway)</h4>
-              <p className="text-sm text-gray-600 mt-1">
-                Ports desservant directement un hinterland économique.
-                Ex: Le Havre, Marseille, Hambourg.
-              </p>
-              <p className="text-xs text-gray-500 mt-2">Avantage: Proximité du marché final, moins de manutention</p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tips */}
-      <Card className="mt-8 bg-amber-50 border-amber-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-amber-900 mb-3 flex items-center gap-2"><Lightbulb className="w-5 h-5" /> Conseils Pratiques</h3>
-          <ul className="list-disc list-inside space-y-2 text-amber-800">
-            <li>Privilégiez les routes directes pour réduire les délais et risques</li>
-            <li>Anticipez les congestions portuaires (Los Angeles, Rotterdam en haute saison)</li>
-            <li>Surveillez les perturbations géopolitiques (Canal de Suez, Détroit d&apos;Ormuz)</li>
-            <li>Comparez les transbordements vs les services directs selon vos priorités (coût vs délai)</li>
-            <li>Vérifiez les connexions ferroviaires/fluviales depuis les ports</li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/dashboard/wiki/transit-time/page.tsx b/apps/frontend/app/dashboard/wiki/transit-time/page.tsx
deleted file mode 100644
index b9b5ce7..0000000
--- a/apps/frontend/app/dashboard/wiki/transit-time/page.tsx
+++ /dev/null
@@ -1,355 +0,0 @@
-/**
- * Transit Time et Délais - Wiki Page
- *
- * Comprendre les délais en transport maritime
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { BookOpen, Calendar, Ship, DollarSign, RefreshCw, Lightbulb, Clock, AlertTriangle } from 'lucide-react';
-
-const etapesTimeline = [
-  {
-    etape: 'Booking',
-    description: 'Réservation de l\'espace sur le navire',
-    delai: '1-7 jours avant cut-off',
-    responsable: 'Transitaire/Exportateur',
-  },
-  {
-    etape: 'Container pickup',
-    description: 'Enlèvement du conteneur vide au dépôt',
-    delai: '2-5 jours avant cut-off',
-    responsable: 'Transporteur terrestre',
-  },
-  {
-    etape: 'Empotage (Stuffing)',
-    description: 'Chargement des marchandises dans le conteneur',
-    delai: '1-3 jours avant cut-off',
-    responsable: 'Exportateur',
-  },
-  {
-    etape: 'Documentation cut-off',
-    description: 'Date limite pour soumettre les documents (B/L, VGM)',
-    delai: '24-48h avant ETD',
-    responsable: 'Transitaire',
-  },
-  {
-    etape: 'Cargo cut-off',
-    description: 'Date limite de dépôt du conteneur au terminal',
-    delai: '24-48h avant ETD',
-    responsable: 'Transporteur terrestre',
-  },
-  {
-    etape: 'ETD (Estimated Time of Departure)',
-    description: 'Départ estimé du navire du port d\'origine',
-    delai: 'Jour J',
-    responsable: 'Compagnie maritime',
-  },
-  {
-    etape: 'Transit maritime',
-    description: 'Traversée maritime (variable selon route)',
-    delai: '10-45 jours',
-    responsable: 'Compagnie maritime',
-  },
-  {
-    etape: 'ETA (Estimated Time of Arrival)',
-    description: 'Arrivée estimée au port de destination',
-    delai: 'Jour J + transit',
-    responsable: 'Compagnie maritime',
-  },
-  {
-    etape: 'Déchargement',
-    description: 'Déchargement du navire et mise à quai',
-    delai: '1-3 jours après ETA',
-    responsable: 'Terminal portuaire',
-  },
-  {
-    etape: 'Dédouanement',
-    description: 'Formalités douanières à destination',
-    delai: '1-5 jours',
-    responsable: 'Commissionnaire en douane',
-  },
-  {
-    etape: 'Livraison',
-    description: 'Acheminement final au destinataire',
-    delai: '1-5 jours',
-    responsable: 'Transporteur terrestre',
-  },
-];
-
-const fraisRetard = [
-  {
-    nom: 'Demurrage',
-    definition: 'Frais pour le conteneur resté au terminal au-delà du free time',
-    taux: '50-150 USD/jour/conteneur',
-    lieu: 'Terminal portuaire',
-  },
-  {
-    nom: 'Detention',
-    definition: 'Frais pour le conteneur gardé hors terminal au-delà du free time',
-    taux: '30-100 USD/jour/conteneur',
-    lieu: 'Chez l\'importateur',
-  },
-  {
-    nom: 'Storage',
-    definition: 'Frais de stockage au terminal (séparés du demurrage)',
-    taux: 'Variable selon port',
-    lieu: 'Terminal portuaire',
-  },
-  {
-    nom: 'Per Diem',
-    definition: 'Frais journaliers combinés (parfois utilisé pour demurrage+detention)',
-    taux: '50-200 USD/jour',
-    lieu: 'Variable',
-  },
-];
-
-const transitTimes = [
-  { route: 'Shanghai → Rotterdam', temps: '28-32 jours', via: 'Suez' },
-  { route: 'Shanghai → Le Havre', temps: '30-35 jours', via: 'Suez' },
-  { route: 'Shanghai → Los Angeles', temps: '12-15 jours', via: 'Direct Pacifique' },
-  { route: 'Shanghai → New York', temps: '35-40 jours', via: 'Suez ou Panama' },
-  { route: 'Rotterdam → New York', temps: '10-14 jours', via: 'Direct Atlantique' },
-  { route: 'Mumbai → Rotterdam', temps: '18-22 jours', via: 'Suez' },
-  { route: 'Santos → Rotterdam', temps: '18-22 jours', via: 'Direct Atlantique' },
-];
-
-export default function TransitTimePage() {
-  return (
-    <div className="space-y-6">
-      {/* Header with back link */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link
-          href="/dashboard/wiki"
-          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
-        >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Retour au Wiki
-        </Link>
-      </div>
-
-      {/* Title */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <Clock className="w-10 h-10 text-blue-600" />
-          <h1 className="text-3xl font-bold text-gray-900">Transit Time et Délais</h1>
-        </div>
-        <p className="mt-3 text-gray-600 max-w-3xl">
-          La gestion des délais est cruciale en transport maritime. Comprendre les différentes étapes,
-          les cut-off dates et les frais de retard permet d&apos;optimiser sa supply chain et d&apos;éviter
-          les coûts supplémentaires.
-        </p>
-      </div>
-
-      {/* Key Terms */}
-      <Card className="bg-blue-50 border-blue-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-blue-900 mb-3 flex items-center gap-2"><BookOpen className="w-5 h-5" /> Termes Clés</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            <div>
-              <h4 className="font-medium text-blue-800">ETD</h4>
-              <p className="text-sm text-blue-700">Estimated Time of Departure - Départ estimé</p>
-            </div>
-            <div>
-              <h4 className="font-medium text-blue-800">ETA</h4>
-              <p className="text-sm text-blue-700">Estimated Time of Arrival - Arrivée estimée</p>
-            </div>
-            <div>
-              <h4 className="font-medium text-blue-800">Cut-off</h4>
-              <p className="text-sm text-blue-700">Date/heure limite de dépôt</p>
-            </div>
-            <div>
-              <h4 className="font-medium text-blue-800">Free time</h4>
-              <p className="text-sm text-blue-700">Jours gratuits avant frais de retard</p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Timeline */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Calendar className="w-5 h-5" /> Timeline d&apos;une Expédition FCL</h2>
-        <div className="space-y-3">
-          {etapesTimeline.map((item, index) => (
-            <Card key={item.etape} className={`bg-white ${index === 5 || index === 7 ? 'border-blue-300 border-2' : ''}`}>
-              <CardContent className="py-4">
-                <div className="flex items-start gap-4">
-                  <div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-sm">
-                    {index + 1}
-                  </div>
-                  <div className="flex-1">
-                    <div className="flex flex-wrap items-center gap-2 mb-1">
-                      <h4 className="font-medium text-gray-900">{item.etape}</h4>
-                      <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{item.delai}</span>
-                    </div>
-                    <p className="text-sm text-gray-600">{item.description}</p>
-                    <p className="text-xs text-gray-400 mt-1">Responsable : {item.responsable}</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-
-      {/* Transit Times */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Ship className="w-5 h-5" /> Transit Times Indicatifs</h2>
-        <Card className="bg-white">
-          <CardContent className="pt-6">
-            <div className="overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b">
-                    <th className="text-left py-2 font-medium">Route</th>
-                    <th className="text-center py-2 font-medium">Transit Time</th>
-                    <th className="text-right py-2 font-medium">Via</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {transitTimes.map((tt) => (
-                    <tr key={tt.route} className="border-b last:border-0 hover:bg-gray-50">
-                      <td className="py-3 text-gray-900">{tt.route}</td>
-                      <td className="py-3 text-center font-mono text-blue-600">{tt.temps}</td>
-                      <td className="py-3 text-right text-gray-500">{tt.via}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-            <p className="text-xs text-gray-500 mt-3">
-              Note : Ces temps sont indicatifs et varient selon les rotations, transbordements et conditions.
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Free Time */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><Clock className="w-5 h-5" /> Free Time (Jours Gratuits)</h3>
-          <p className="text-gray-600 mb-4">
-            Période pendant laquelle le conteneur peut rester au terminal ou chez l&apos;importateur
-            sans frais supplémentaires.
-          </p>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Free time standard</h4>
-              <p className="text-2xl font-bold text-blue-600">7-14 jours</p>
-              <p className="text-xs text-gray-500">Selon compagnie et port</p>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Demurrage start</h4>
-              <p className="text-sm text-gray-600">
-                Commence après le free time au terminal
-              </p>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Detention start</h4>
-              <p className="text-sm text-gray-600">
-                Commence à la sortie du terminal (gate-out)
-              </p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Late Fees */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><DollarSign className="w-5 h-5" /> Frais de Retard</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {fraisRetard.map((frais) => (
-            <Card key={frais.nom} className="bg-white border-red-200">
-              <CardHeader className="pb-2">
-                <CardTitle className="text-lg text-red-700">{frais.nom}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-gray-600 text-sm mb-2">{frais.definition}</p>
-                <div className="flex justify-between text-sm">
-                  <span className="text-gray-500">Taux indicatif :</span>
-                  <span className="font-mono text-red-600">{frais.taux}</span>
-                </div>
-                <div className="flex justify-between text-sm mt-1">
-                  <span className="text-gray-500">Lieu :</span>
-                  <span className="text-gray-700">{frais.lieu}</span>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-
-      {/* Factors affecting transit */}
-      <Card className="mt-8 bg-orange-50 border-orange-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-orange-900 mb-3 flex items-center gap-2"><AlertTriangle className="w-5 h-5" /> Facteurs Impactant les Délais</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <h4 className="font-medium text-orange-800">Retards potentiels</h4>
-              <ul className="text-sm text-orange-700 mt-2 space-y-1">
-                <li>• Congestion portuaire (Los Angeles, Rotterdam)</li>
-                <li>• Conditions météorologiques (typhons, tempêtes)</li>
-                <li>• Fermeture de canaux (Suez, Panama)</li>
-                <li>• Inspection douanière (scanner, contrôle)</li>
-                <li>• Blank sailings (annulation de rotation)</li>
-                <li>• Grèves (dockers, transporteurs)</li>
-              </ul>
-            </div>
-            <div>
-              <h4 className="font-medium text-orange-800">Variations saisonnières</h4>
-              <ul className="text-sm text-orange-700 mt-2 space-y-1">
-                <li>• Nouvel An Chinois (février) : +2-3 semaines</li>
-                <li>• Golden Week (octobre) : congestion Asie</li>
-                <li>• Peak Season (août-octobre) : surcharges, retards</li>
-                <li>• Fêtes de fin d&apos;année : rush avant Christmas</li>
-              </ul>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Roll-over */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><RefreshCw className="w-5 h-5" /> Roll-over (Report)</h3>
-          <p className="text-gray-600 mb-3">
-            Situation où un conteneur n&apos;est pas chargé sur le navire prévu et est reporté
-            sur le prochain départ.
-          </p>
-          <div className="bg-white p-4 rounded-lg border">
-            <h4 className="font-medium text-gray-900">Causes fréquentes :</h4>
-            <ul className="text-sm text-gray-600 mt-2 space-y-1">
-              <li>• Navire plein (overbooking)</li>
-              <li>• Conteneur arrivé après le cargo cut-off</li>
-              <li>• Documents manquants ou incorrects</li>
-              <li>• VGM non transmis à temps</li>
-              <li>• Problème avec la marchandise (DG, inspection)</li>
-            </ul>
-            <p className="text-xs text-gray-500 mt-3">
-              Impact : Généralement +7 jours de délai (service hebdomadaire)
-            </p>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tips */}
-      <Card className="mt-8 bg-amber-50 border-amber-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-amber-900 mb-3 flex items-center gap-2"><Lightbulb className="w-5 h-5" /> Conseils pour Optimiser les Délais</h3>
-          <ul className="list-disc list-inside space-y-2 text-amber-800">
-            <li>Réserver tôt, surtout en haute saison (2-3 semaines d&apos;avance)</li>
-            <li>Respecter les cut-off avec une marge de sécurité (24h minimum)</li>
-            <li>Préparer les documents en parallèle de l&apos;empotage</li>
-            <li>Négocier du free time supplémentaire pour les volumes importants</li>
-            <li>Tracker activement les navires (AIS, portails compagnies)</li>
-            <li>Anticiper le dédouanement (pré-clearing si possible)</li>
-            <li>Avoir un plan B en cas de roll-over (service alternatif)</li>
-            <li>Éviter les expéditions critiques pendant les périodes à risque</li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/dashboard/wiki/vgm/page.tsx b/apps/frontend/app/dashboard/wiki/vgm/page.tsx
deleted file mode 100644
index 346c58c..0000000
--- a/apps/frontend/app/dashboard/wiki/vgm/page.tsx
+++ /dev/null
@@ -1,269 +0,0 @@
-/**
- * VGM (Verified Gross Mass) - Wiki Page
- *
- * Obligation de pesée des conteneurs (SOLAS)
- */
-
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Shield, Construction, Truck, ClipboardList, Microscope, User, Ruler, Lightbulb, Anchor, Scale, AlertTriangle } from 'lucide-react';
-
-const methodesPesee = [
-  {
-    method: 'Méthode 1',
-    name: 'Pesée du conteneur complet',
-    description: 'Pesée du conteneur chargé et scellé sur une balance étalonnée.',
-    process: [
-      'Empotage du conteneur',
-      'Scellage du conteneur',
-      'Pesée sur pont-bascule certifié',
-      'Transmission du VGM',
-    ],
-    advantages: ['Plus précis', 'Moins de calculs'],
-    disadvantages: ['Nécessite un pont-bascule', 'Conteneur déjà scellé'],
-  },
-  {
-    method: 'Méthode 2',
-    name: 'Calcul par addition',
-    description: 'Addition de la tare du conteneur et du poids de tous les éléments chargés.',
-    process: [
-      'Pesée de chaque colis individuellement',
-      'Addition de tous les poids',
-      'Ajout des matériaux d\'arrimage',
-      'Addition de la tare conteneur',
-    ],
-    advantages: ['Pas besoin de pont-bascule', 'Peut être fait progressivement'],
-    disadvantages: ['Plus complexe', 'Risque d\'erreur cumulative'],
-  },
-];
-
-const sanctions = [
-  { region: 'France', sanction: 'Amende jusqu\'à 7,500€ et refus d\'embarquement' },
-  { region: 'USA', sanction: 'Refus d\'embarquement, amende par la garde côtière' },
-  { region: 'Chine', sanction: 'Refus d\'embarquement, pénalités portuaires' },
-  { region: 'Union Européenne', sanction: 'Application variable selon pays membre' },
-];
-
-const elementsVGM = [
-  { element: 'Tare conteneur', description: 'Poids à vide du conteneur (inscrit sur la porte)', example: '2,200 kg (20\')' },
-  { element: 'Marchandises', description: 'Poids brut de toutes les marchandises', example: 'Variable' },
-  { element: 'Emballages', description: 'Palettes, cartons, film plastique...', example: '200-500 kg' },
-  { element: 'Matériaux d\'arrimage', description: 'Bois de calage, sangles, airbags...', example: '50-200 kg' },
-];
-
-export default function VGMPage() {
-  return (
-    <div className="space-y-6">
-      {/* Header with back link */}
-      <div className="flex items-center gap-4 mb-6">
-        <Link
-          href="/dashboard/wiki"
-          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
-        >
-          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Retour au Wiki
-        </Link>
-      </div>
-
-      {/* Title */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3">
-          <Anchor className="w-10 h-10 text-blue-600" />
-          <h1 className="text-3xl font-bold text-gray-900">VGM (Verified Gross Mass)</h1>
-        </div>
-        <p className="mt-3 text-gray-600 max-w-3xl">
-          Depuis le 1er juillet 2016, la Convention SOLAS (Safety of Life at Sea) exige que le poids
-          vérifié de tout conteneur soit transmis avant embarquement. Cette obligation vise à prévenir
-          les accidents liés aux conteneurs mal déclarés.
-        </p>
-      </div>
-
-      {/* Why VGM */}
-      <Card className="bg-blue-50 border-blue-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-blue-900 mb-3">Pourquoi le VGM ?</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-blue-800">
-            <div>
-              <h4 className="font-medium flex items-center gap-1"><Shield className="w-4 h-4" /> Sécurité</h4>
-              <p className="text-sm">Les conteneurs mal déclarés causent des accidents graves (chute de conteneurs, navires instables).</p>
-            </div>
-            <div>
-              <h4 className="font-medium flex items-center gap-1"><Scale className="w-4 h-4" /> Stabilité du navire</h4>
-              <p className="text-sm">Le capitaine doit connaître le poids exact pour calculer le plan de chargement.</p>
-            </div>
-            <div>
-              <h4 className="font-medium flex items-center gap-1"><Construction className="w-4 h-4" /> Équipements portuaires</h4>
-              <p className="text-sm">Les grues et portiques sont dimensionnés pour des charges maximales.</p>
-            </div>
-            <div>
-              <h4 className="font-medium flex items-center gap-1"><Truck className="w-4 h-4" /> Transport terrestre</h4>
-              <p className="text-sm">Évite les surcharges sur les camions et wagons de pré/post-acheminement.</p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* VGM Components */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><ClipboardList className="w-5 h-5" /> Composants du VGM</h2>
-        <Card className="bg-white">
-          <CardContent className="pt-6">
-            <div className="bg-gray-50 p-4 rounded-lg border mb-4">
-              <p className="text-center font-mono text-lg">
-                <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded">VGM</span> = Tare + Marchandises + Emballages + Arrimage
-              </p>
-            </div>
-            <div className="space-y-3">
-              {elementsVGM.map((item) => (
-                <div key={item.element} className="flex items-center justify-between py-3 border-b last:border-0">
-                  <div>
-                    <h4 className="font-medium text-gray-900">{item.element}</h4>
-                    <p className="text-sm text-gray-600">{item.description}</p>
-                  </div>
-                  <span className="text-sm font-mono bg-gray-100 px-3 py-1 rounded">{item.example}</span>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Methods */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><Microscope className="w-5 h-5" /> Méthodes de Détermination</h2>
-        <div className="space-y-4">
-          {methodesPesee.map((method) => (
-            <Card key={method.method} className="bg-white">
-              <CardHeader className="pb-2">
-                <CardTitle className="flex items-center gap-3">
-                  <span className="px-3 py-1 bg-green-600 text-white rounded-md">
-                    {method.method}
-                  </span>
-                  <span className="text-lg">{method.name}</span>
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-gray-600 mb-4">{method.description}</p>
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                  <div>
-                    <h4 className="font-medium text-gray-700 mb-2">Processus</h4>
-                    <ol className="list-decimal list-inside text-sm text-gray-600 space-y-1">
-                      {method.process.map((step, idx) => (
-                        <li key={idx}>{step}</li>
-                      ))}
-                    </ol>
-                  </div>
-                  <div>
-                    <h4 className="font-medium text-green-700 mb-2">✓ Avantages</h4>
-                    <ul className="text-sm text-gray-600 space-y-1">
-                      {method.advantages.map((adv) => (
-                        <li key={adv} className="flex items-center gap-2">
-                          <span className="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
-                          {adv}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                  <div>
-                    <h4 className="font-medium text-red-700 mb-2">✗ Inconvénients</h4>
-                    <ul className="text-sm text-gray-600 space-y-1">
-                      {method.disadvantages.map((dis) => (
-                        <li key={dis} className="flex items-center gap-2">
-                          <span className="w-1.5 h-1.5 bg-red-500 rounded-full"></span>
-                          {dis}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-
-      {/* Responsibility */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><User className="w-5 h-5" /> Responsabilités</h3>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Expéditeur (Shipper)</h4>
-              <p className="text-sm text-gray-600 mt-1">
-                Responsable légal du VGM. Doit obtenir, certifier et transmettre le poids vérifié.
-              </p>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Transitaire</h4>
-              <p className="text-sm text-gray-600 mt-1">
-                Peut transmettre le VGM pour le compte de l&apos;expéditeur. Reste un intermédiaire.
-              </p>
-            </div>
-            <div className="bg-white p-4 rounded-lg border">
-              <h4 className="font-medium text-gray-900">Compagnie maritime</h4>
-              <p className="text-sm text-gray-600 mt-1">
-                Ne peut embarquer un conteneur sans VGM. Peut refuser un VGM manifestement erroné.
-              </p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tolerances */}
-      <Card className="mt-8 bg-gray-50">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2"><Ruler className="w-5 h-5" /> Tolérances</h3>
-          <div className="bg-white p-4 rounded-lg border">
-            <p className="text-gray-600 mb-3">
-              Les tolérances varient selon les compagnies maritimes et les ports, mais généralement :
-            </p>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-              <div>
-                <span className="font-medium">Tolérance typique :</span>
-                <p className="text-gray-600">± 5% du poids déclaré ou ± 500 kg (le plus petit des deux)</p>
-              </div>
-              <div>
-                <span className="font-medium">Conséquence si dépassement :</span>
-                <p className="text-gray-600">Nouvelle pesée à la charge de l&apos;expéditeur, retard possible</p>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Sanctions */}
-      <div className="mt-8">
-        <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2"><AlertTriangle className="w-5 h-5" /> Sanctions par Région</h2>
-        <Card className="bg-white">
-          <CardContent className="pt-6">
-            <div className="space-y-3">
-              {sanctions.map((s) => (
-                <div key={s.region} className="flex items-center justify-between py-3 border-b last:border-0">
-                  <span className="font-medium text-gray-900">{s.region}</span>
-                  <span className="text-sm text-red-600">{s.sanction}</span>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Tips */}
-      <Card className="mt-8 bg-amber-50 border-amber-200">
-        <CardContent className="pt-6">
-          <h3 className="font-semibold text-amber-900 mb-3 flex items-center gap-2"><Lightbulb className="w-5 h-5" /> Bonnes Pratiques</h3>
-          <ul className="list-disc list-inside space-y-2 text-amber-800">
-            <li>Transmettre le VGM au moins 24-48h avant le cut-off</li>
-            <li>Utiliser des balances étalonnées et certifiées</li>
-            <li>Conserver les preuves de pesée pendant 3 ans minimum</li>
-            <li>Vérifier les exigences spécifiques de chaque compagnie maritime</li>
-            <li>Former le personnel aux procédures VGM</li>
-            <li>Ne jamais sous-estimer le poids intentionnellement</li>
-          </ul>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/docs/layout.tsx b/apps/frontend/app/docs/layout.tsx
deleted file mode 100644
index 8c61ae4..0000000
--- a/apps/frontend/app/docs/layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { LandingHeader } from '@/components/layout/LandingHeader';
-import { LandingFooter } from '@/components/layout/LandingFooter';
-
-export const metadata = {
-  title: 'Documentation API — Xpeditis',
-  description: 'Documentation de l\'API Xpeditis pour intégrer le fret maritime dans vos applications.',
-};
-
-export default function DocsLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <LandingHeader />
-      <main className="pt-20">{children}</main>
-    </>
-  );
-}
diff --git a/apps/frontend/app/layout.tsx b/apps/frontend/app/layout.tsx
deleted file mode 100644
index 5a19952..0000000
--- a/apps/frontend/app/layout.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { Metadata } from 'next';
-import './globals.css';
-import { manrope, montserrat } from '@/lib/fonts';
-import { Providers } from '@/components/providers';
-
-export const metadata: Metadata = {
-  metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL || 'https://xpeditis.com'),
-  title: {
-    default: 'Xpeditis - Maritime Freight Booking Platform',
-    template: '%s | Xpeditis',
-  },
-  description: 'Search, compare, and book maritime freight in real-time. Get instant LCL shipping quotes and manage your shipments with Xpeditis.',
-  icons: {
-    icon: '/assets/logos/logo-black.svg',
-    shortcut: '/assets/logos/logo-black.svg',
-    apple: '/assets/logos/logo-black.svg',
-  },
-  manifest: '/manifest.json',
-  openGraph: {
-    type: 'website',
-    locale: 'fr_FR',
-    url: 'https://xpeditis.com',
-    siteName: 'Xpeditis',
-    title: 'Xpeditis - Maritime Freight Booking Platform',
-    description: 'Search, compare, and book maritime freight in real-time',
-    images: [
-      {
-        url: '/assets/logos/logo-black.svg',
-        width: 1875,
-        height: 1699,
-        alt: 'Xpeditis Logo',
-      },
-    ],
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: 'Xpeditis - Maritime Freight Booking Platform',
-    description: 'Search, compare, and book maritime freight in real-time',
-    images: ['/assets/logos/logo-black.svg'],
-  },
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="fr" className={`${manrope.variable} ${montserrat.variable}`}>
-      <body className="font-body">
-        <Providers>{children}</Providers>
-      </body>
-    </html>
-  );
-}
diff --git a/apps/frontend/app/terms/page.tsx b/apps/frontend/app/terms/page.tsx
deleted file mode 100644
index bfab99e..0000000
--- a/apps/frontend/app/terms/page.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-'use client';
-
-import { useRef } from 'react';
-import { motion, useInView } from 'framer-motion';
-import { FileText, Users, CreditCard, AlertTriangle, Scale, Gavel, Mail } from 'lucide-react';
-import { LandingHeader, LandingFooter } from '@/components/layout';
-
-export default function TermsPage() {
-  const heroRef = useRef(null);
-  const contentRef = useRef(null);
-
-  const isHeroInView = useInView(heroRef, { once: true });
-  const isContentInView = useInView(contentRef, { once: true });
-
-  const sections = [
-    {
-      icon: Users,
-      title: '1. Objet et acceptation',
-      content: `Les présentes Conditions Générales d'Utilisation (CGU) régissent l'utilisation de la plateforme Xpeditis, accessible à l'adresse www.xpeditis.com.
-
-En accédant à notre plateforme et en utilisant nos services, vous acceptez sans réserve les présentes CGU. Si vous n'acceptez pas ces conditions, vous ne devez pas utiliser nos services.
-
-Xpeditis se réserve le droit de modifier ces CGU à tout moment. Les utilisateurs seront informés de toute modification par email et/ou notification sur la plateforme.`,
-    },
-    {
-      icon: FileText,
-      title: '2. Description des services',
-      content: `Xpeditis propose une plateforme B2B de réservation de fret maritime permettant :
-
-• La recherche et comparaison de tarifs de transport maritime
-• La réservation de conteneurs auprès de compagnies maritimes partenaires
-• Le suivi en temps réel des expéditions
-• La gestion documentaire (Bill of Lading, certificats, etc.)
-• L'accès à un tableau de bord analytique
-
-Xpeditis agit en qualité d'intermédiaire technologique et ne se substitue pas aux transporteurs maritimes dans l'exécution des prestations de transport.`,
-    },
-    {
-      icon: Users,
-      title: '3. Inscription et compte utilisateur',
-      content: `**Conditions d'inscription**
-L'inscription est réservée aux professionnels du transport et de la logistique (transitaires, commissionnaires, etc.). L'utilisateur doit fournir des informations exactes et complètes.
-
-**Responsabilité du compte**
-L'utilisateur est responsable de la confidentialité de ses identifiants et de toutes les activités effectuées sous son compte. Il s'engage à notifier immédiatement Xpeditis en cas d'utilisation non autorisée.
-
-**Suspension et résiliation**
-Xpeditis peut suspendre ou résilier un compte en cas de violation des CGU, d'activité frauduleuse ou de non-paiement.`,
-    },
-    {
-      icon: CreditCard,
-      title: '4. Tarification et paiement',
-      content: `**Tarifs affichés**
-Les tarifs affichés sur la plateforme sont indicatifs et peuvent varier selon la disponibilité et les conditions du marché. Le tarif définitif est confirmé lors de la validation de la réservation.
-
-**Modalités de paiement**
-Les paiements s'effectuent par virement bancaire ou carte bancaire. Les factures sont payables selon les conditions convenues (généralement 30 jours).
-
-**Frais supplémentaires**
-Des frais additionnels peuvent s'appliquer (surcharges carburant, frais portuaires, etc.). Ces frais sont clairement indiqués avant validation.`,
-    },
-    {
-      icon: AlertTriangle,
-      title: '5. Responsabilité',
-      content: `**Limitation de responsabilité**
-Xpeditis agit en tant qu'intermédiaire technologique. La responsabilité du transport incombe aux compagnies maritimes selon leurs conditions générales et les conventions internationales applicables.
-
-**Force majeure**
-Xpeditis ne peut être tenue responsable des retards ou annulations dus à des cas de force majeure (intempéries, grèves, pandémies, etc.).
-
-**Disponibilité de la plateforme**
-Xpeditis s'efforce de maintenir la plateforme disponible 24h/24. Cependant, des interruptions peuvent survenir pour maintenance ou raisons techniques.`,
-    },
-    {
-      icon: Scale,
-      title: '6. Propriété intellectuelle',
-      content: `Tous les éléments de la plateforme Xpeditis (logo, design, textes, logiciels, bases de données) sont protégés par les droits de propriété intellectuelle.
-
-L'utilisateur s'engage à :
-• Ne pas reproduire, modifier ou distribuer le contenu de la plateforme
-• Ne pas utiliser les données à des fins concurrentielles
-• Ne pas tenter de désassembler ou décompiler le logiciel
-• Respecter les marques et logos de Xpeditis et de ses partenaires`,
-    },
-    {
-      icon: Gavel,
-      title: '7. Droit applicable et litiges',
-      content: `**Droit applicable**
-Les présentes CGU sont régies par le droit français.
-
-**Résolution des litiges**
-En cas de litige, les parties s'engagent à rechercher une solution amiable. À défaut, les tribunaux de Paris seront seuls compétents.
-
-**Médiation**
-Conformément aux dispositions du Code de la consommation, l'utilisateur peut recourir gratuitement au service de médiation auquel Xpeditis est adhérent.`,
-    },
-  ];
-
-  const containerVariants = {
-    hidden: { opacity: 0, y: 50 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.6,
-        staggerChildren: 0.1,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: 0.5 },
-    },
-  };
-
-  return (
-    <div className="min-h-screen bg-white">
-      <LandingHeader />
-
-      {/* Hero Section */}
-      <section ref={heroRef} className="relative pt-32 pb-20 bg-gradient-to-br from-brand-navy to-brand-navy/95 overflow-hidden">
-        <div className="absolute inset-0 opacity-10">
-          <div className="absolute top-20 left-20 w-96 h-96 bg-brand-turquoise rounded-full blur-3xl" />
-          <div className="absolute bottom-20 right-20 w-96 h-96 bg-brand-green rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center"
-          >
-            <motion.div
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={isHeroInView ? { scale: 1, opacity: 1 } : {}}
-              transition={{ duration: 0.6, delay: 0.2 }}
-              className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8 border border-white/20"
-            >
-              <FileText className="w-5 h-5 text-brand-turquoise" />
-              <span className="text-white/90 text-sm font-medium">Cadre juridique</span>
-            </motion.div>
-
-            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
-              Conditions Générales
-              <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
-                d'Utilisation
-              </span>
-            </h1>
-
-            <p className="text-xl text-white/80 mb-6 max-w-3xl mx-auto leading-relaxed">
-              Ces conditions régissent votre utilisation de la plateforme Xpeditis.
-              Veuillez les lire attentivement avant d'utiliser nos services.
-            </p>
-
-            <p className="text-white/60 text-sm">
-              Dernière mise à jour : Janvier 2025
-            </p>
-          </motion.div>
-        </div>
-
-        {/* Wave */}
-        <div className="absolute bottom-0 left-0 right-0">
-          <svg className="w-full h-16" viewBox="0 0 1440 60" preserveAspectRatio="none">
-            <path
-              d="M0,30 C240,50 480,10 720,30 C960,50 1200,10 1440,30 L1440,60 L0,60 Z"
-              fill="white"
-            />
-          </svg>
-        </div>
-      </section>
-
-      {/* Content Section */}
-      <section ref={contentRef} className="py-20">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8">
-          <motion.div
-            variants={containerVariants}
-            initial="hidden"
-            animate={isContentInView ? 'visible' : 'hidden'}
-            className="space-y-12"
-          >
-            {sections.map((section, index) => {
-              const IconComponent = section.icon;
-              return (
-                <motion.div
-                  key={index}
-                  variants={itemVariants}
-                  className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
-                >
-                  <div className="flex items-start space-x-4">
-                    <div className="w-12 h-12 bg-brand-turquoise/10 rounded-xl flex items-center justify-center flex-shrink-0">
-                      <IconComponent className="w-6 h-6 text-brand-turquoise" />
-                    </div>
-                    <div>
-                      <h2 className="text-2xl font-bold text-brand-navy mb-4">{section.title}</h2>
-                      <div className="text-gray-600 leading-relaxed whitespace-pre-line prose prose-sm max-w-none">
-                        {section.content.split('**').map((part, i) =>
-                          i % 2 === 1 ? <strong key={i}>{part}</strong> : part
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-
-          {/* Contact Section */}
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8, delay: 0.6 }}
-            className="mt-16 bg-gradient-to-br from-brand-navy to-brand-navy/95 p-10 rounded-3xl text-center"
-          >
-            <Mail className="w-12 h-12 text-brand-turquoise mx-auto mb-4" />
-            <h3 className="text-2xl font-bold text-white mb-4">Besoin de précisions ?</h3>
-            <p className="text-white/80 mb-6">
-              Pour toute question concernant nos conditions générales d'utilisation,
-              notre équipe juridique est à votre disposition.
-            </p>
-            <a
-              href="mailto:legal@xpeditis.com"
-              className="inline-flex items-center space-x-2 px-6 py-3 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium"
-            >
-              <Mail className="w-5 h-5" />
-              <span>legal@xpeditis.com</span>
-            </a>
-          </motion.div>
-        </div>
-      </section>
-
-      <LandingFooter />
-    </div>
-  );
-}
diff --git a/apps/frontend/i18n/navigation.ts b/apps/frontend/i18n/navigation.ts
new file mode 100644
index 0000000..398bfad
--- /dev/null
+++ b/apps/frontend/i18n/navigation.ts
@@ -0,0 +1,7 @@
+import { createNavigation } from 'next-intl/navigation';
+import { routing } from './routing';
+
+// Locale-aware navigation helpers — use these instead of next/link and
+// next/navigation so internal URLs automatically keep the locale prefix.
+export const { Link, redirect, usePathname, useRouter, getPathname } =
+  createNavigation(routing);
diff --git a/apps/frontend/i18n/request.ts b/apps/frontend/i18n/request.ts
new file mode 100644
index 0000000..e7515fb
--- /dev/null
+++ b/apps/frontend/i18n/request.ts
@@ -0,0 +1,15 @@
+import { getRequestConfig } from 'next-intl/server';
+import { hasLocale } from 'next-intl';
+import { routing } from './routing';
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  const requested = await requestLocale;
+  const locale = hasLocale(routing.locales, requested)
+    ? requested
+    : routing.defaultLocale;
+
+  return {
+    locale,
+    messages: (await import(`../messages/${locale}.json`)).default,
+  };
+});
diff --git a/apps/frontend/i18n/routing.ts b/apps/frontend/i18n/routing.ts
new file mode 100644
index 0000000..f493c35
--- /dev/null
+++ b/apps/frontend/i18n/routing.ts
@@ -0,0 +1,10 @@
+import { defineRouting } from 'next-intl/routing';
+
+export const routing = defineRouting({
+  locales: ['fr', 'en'],
+  defaultLocale: 'fr',
+  // Every URL is prefixed by the locale (/fr/..., /en/...) per user decision.
+  localePrefix: 'always',
+});
+
+export type AppLocale = (typeof routing.locales)[number];
diff --git a/apps/frontend/messages/en.json b/apps/frontend/messages/en.json
new file mode 100644
index 0000000..2230e16
--- /dev/null
+++ b/apps/frontend/messages/en.json
@@ -0,0 +1,3626 @@
+{
+  "common": {
+    "brand": "Xpeditis",
+    "save": "Save",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "close": "Close",
+    "delete": "Delete",
+    "edit": "Edit",
+    "create": "Create",
+    "search": "Search",
+    "filter": "Filter",
+    "loading": "Loading…",
+    "submitting": "Submitting…",
+    "next": "Next",
+    "previous": "Previous",
+    "back": "Back",
+    "yes": "Yes",
+    "no": "No",
+    "optional": "(optional)",
+    "required": "*",
+    "view": "View",
+    "viewAll": "View all",
+    "seeMore": "See more",
+    "discover": "Discover",
+    "tryNow": "Try now",
+    "continue": "Continue",
+    "submit": "Submit"
+  },
+  "language": {
+    "label": "Language",
+    "fr": "Français",
+    "en": "English",
+    "switchTo": "Switch to {lang}"
+  },
+  "metadata": {
+    "home": {
+      "title": "Xpeditis — Maritime Freight Booking",
+      "description": "Search, compare and book maritime freight in real time."
+    }
+  },
+  "navigation": {
+    "home": "Home",
+    "dashboard": "Dashboard",
+    "bookings": "Bookings",
+    "rates": "Rates",
+    "settings": "Settings",
+    "login": "Log in",
+    "register": "Sign up",
+    "logout": "Log out",
+    "about": "About",
+    "pricing": "Pricing",
+    "contact": "Contact",
+    "features": "Features",
+    "blog": "Blog",
+    "company": "Company",
+    "docsApi": "API Docs"
+  },
+  "validation": {
+    "required": "This field is required",
+    "email": "Invalid email address",
+    "minLength": "Must be at least {min} characters",
+    "maxLength": "Must be at most {max} characters",
+    "pattern": "Invalid format",
+    "passwordComplexity": "Password must contain uppercase, lowercase, number and special character",
+    "passwordsDoNotMatch": "Passwords do not match",
+    "siren": "SIREN must be 9 digits",
+    "siret": "SIRET must be 14 digits"
+  },
+  "errors": {
+    "generic": "An error occurred. Please try again.",
+    "network": "Connection issue. Check your network.",
+    "unauthorized": "You must be logged in to access this page.",
+    "forbidden": "You do not have the required permissions.",
+    "notFound": "Page not found.",
+    "serverError": "Server error. Our team has been notified."
+  },
+  "header": {
+    "mobileMenu": {
+      "open": "Open menu",
+      "close": "Close menu"
+    },
+    "company": {
+      "aboutDescription": "Our story and mission",
+      "blogDescription": "News and insights"
+    },
+    "cta": {
+      "signIn": "Sign in",
+      "startFree": "Start Free",
+      "dashboard": "Dashboard"
+    }
+  },
+  "footer": {
+    "tagline": "Xpeditis is the leading B2B platform for maritime freight in Europe. We connect freight forwarders with the world's largest shipping lines.",
+    "products": {
+      "title": "Products",
+      "features": "Features",
+      "tools": "Tools & Calculators",
+      "pricing": "Pricing"
+    },
+    "company": {
+      "title": "Company",
+      "about": "About",
+      "contact": "Contact",
+      "blog": "Blog"
+    },
+    "legal": {
+      "title": "Legal",
+      "privacy": "Privacy Policy",
+      "terms": "Terms & Conditions",
+      "cookies": "Cookie Policy",
+      "compliance": "GDPR Compliance"
+    },
+    "copyright": "© {year} Xpeditis SAS. All rights reserved.",
+    "location": "Paris, France",
+    "countries": "50+ Countries",
+    "social": {
+      "linkedin": "LinkedIn",
+      "twitter": "Twitter"
+    }
+  },
+  "landing": {
+    "hero": {
+      "badge": "#1 B2B Maritime Freight Platform in Europe",
+      "titleLine1": "Book your freight",
+      "titleLine2": "in a few clicks",
+      "subtitle": "Compare rates from 50+ shipping lines, book online and track your shipments in real time.",
+      "ctaAuthenticated": "Go to dashboard",
+      "ctaRegister": "Create a free account",
+      "ctaDemo": "See the demo"
+    },
+    "stats": {
+      "carriers": "Shipping Lines",
+      "ports": "Global Ports",
+      "responseTime": "Response Time",
+      "availability": "Uptime"
+    },
+    "features": {
+      "title": "Why choose Xpeditis?",
+      "subtitle": "A complete platform to manage all your maritime freight needs",
+      "dashboard": {
+        "title": "Dashboard",
+        "description": "Track all your KPIs in real time: bookings, volumes, revenue and custom alerts."
+      },
+      "bookings": {
+        "title": "Booking Management",
+        "description": "Create, manage and track your LCL/FCL maritime bookings with a full history."
+      },
+      "documents": {
+        "title": "Maritime Documents",
+        "description": "Centralize all your documents: B/L, invoices, certificates and customs documents."
+      },
+      "tracking": {
+        "title": "Shipment Tracking",
+        "description": "Track your containers in real time across 10+ major carriers (Maersk, MSC, CMA CGM...)."
+      },
+      "wiki": {
+        "title": "Maritime Wiki",
+        "description": "Comprehensive knowledge base: Incoterms, documents, customs procedures and more."
+      },
+      "notifications": {
+        "title": "Real-time Notifications",
+        "description": "Stay informed with instant alerts on your bookings, documents and updates."
+      }
+    },
+    "partners": {
+      "title": "Partnered with the largest shipping lines",
+      "subtitle": "Access rates from 50+ global carriers"
+    },
+    "pricing": {
+      "badge": "Pricing",
+      "title": "Plans tailored to your business",
+      "subtitle": "From discovery access to custom partnership — scale at any time.",
+      "monthly": "Monthly",
+      "yearly": "Yearly",
+      "yearlySaving": "1 month free",
+      "custom": "Custom",
+      "customSubtitle": "Tailored pricing",
+      "free": "Free",
+      "freeSubtitle": "Forever",
+      "perMonth": "/month",
+      "billedYearly": "Billed {price}€/year",
+      "saveWithYearly": "Save 1 month with yearly",
+      "commission": "Commission {rate}",
+      "noCommitment": "No commitment · Cancel at any time",
+      "questions": "Questions?",
+      "contactSales": "Contact our sales team",
+      "popularBadge": "Popular",
+      "customBadge": "Custom",
+      "plans": {
+        "bronze": {
+          "name": "Bronze",
+          "description": "To discover the platform",
+          "users": "1 user",
+          "shipments": "12 shipments / year",
+          "support": "No support",
+          "cta": "Start for free"
+        },
+        "silver": {
+          "name": "Silver",
+          "description": "For growing freight forwarders",
+          "users": "Up to 5 users",
+          "shipments": "Unlimited shipments",
+          "support": "Email support",
+          "cta": "Get started"
+        },
+        "gold": {
+          "name": "Gold",
+          "description": "For demanding teams",
+          "users": "Up to 20 users",
+          "shipments": "Unlimited shipments",
+          "support": "Direct sales support",
+          "cta": "Get started"
+        },
+        "platinium": {
+          "name": "Platinium",
+          "description": "For large enterprises",
+          "users": "Unlimited users",
+          "shipments": "Unlimited shipments",
+          "support": "Dedicated Key Account Manager",
+          "cta": "Contact us"
+        }
+      },
+      "features": {
+        "lclBooking": "LCL maritime bookings",
+        "tracking": "Container track & trace",
+        "dashboard": "Dashboard",
+        "dashboardAdvanced": "Advanced dashboard",
+        "wiki": "Maritime wiki",
+        "wikiFull": "Full maritime wiki",
+        "userManagement": "User management",
+        "csvExport": "CSV export",
+        "apiAccess": "API access",
+        "apiFull": "Full API access",
+        "kam": "Dedicated KAM",
+        "kamCustom": "Dedicated KAM + Custom interface"
+      }
+    },
+    "howItWorks": {
+      "title": "How does it work?",
+      "subtitle": "Book your maritime freight in 4 simple steps",
+      "step1": {
+        "title": "Search",
+        "description": "Enter your origin and destination ports"
+      },
+      "step2": {
+        "title": "Compare",
+        "description": "Analyze rates from 50+ lines"
+      },
+      "step3": {
+        "title": "Book",
+        "description": "Confirm your booking in one click"
+      },
+      "step4": {
+        "title": "Track",
+        "description": "Track your shipment in real time"
+      },
+      "ctaHint": "Free signup · No credit card required"
+    },
+    "testimonials": {
+      "title": "They trust us",
+      "subtitle": "Discover what our happy customers have to say",
+      "items": [
+        {
+          "quote": "Xpeditis has transformed how we manage maritime freight. Rates are competitive and the platform is intuitive.",
+          "author": "Marie Dubois",
+          "role": "Logistics Director",
+          "company": "LogiFrance"
+        },
+        {
+          "quote": "The time saved is substantial. What used to take hours is now done in minutes.",
+          "author": "Thomas Martin",
+          "role": "Transport Manager",
+          "company": "EuroShipping"
+        },
+        {
+          "quote": "The interface is clear, data is precise and customer support is responsive. A truly trusted partner.",
+          "author": "Sophie Bernard",
+          "role": "CEO",
+          "company": "MariTime Solutions"
+        }
+      ]
+    },
+    "cta": {
+      "title": "Ready to simplify your maritime freight?",
+      "subtitle": "Join hundreds of freight forwarders who trust Xpeditis for their maritime shipments.",
+      "ctaAuthenticated": "Go to dashboard",
+      "ctaRegister": "Create a free account",
+      "ctaLogin": "Sign in",
+      "features": {
+        "noCard": "No credit card",
+        "quickSetup": "Setup in 2 min",
+        "secure": "Secure data"
+      }
+    }
+  },
+  "dashboard": {
+    "nav": {
+      "dashboard": "Dashboard",
+      "bookings": "Bookings",
+      "documents": "Documents",
+      "tracking": "Tracking",
+      "wiki": "Maritime Wiki",
+      "organization": "Organization",
+      "apiKeys": "API Keys",
+      "users": "Users"
+    },
+    "topbar": {
+      "defaultTitle": "Dashboard"
+    },
+    "logout": "Log out",
+    "bottomNav": {
+      "home": "Home",
+      "bookings": "Bookings",
+      "documents": "Documents",
+      "tracking": "Tracking",
+      "profile": "Profile"
+    },
+    "home": {
+      "title": "Dashboard",
+      "subtitle": "Overview of your bookings and performance",
+      "newBooking": "New Booking",
+      "exportFilename": "dashboard-carriers",
+      "kpi": {
+        "accepted": "Accepted",
+        "rejected": "Rejected",
+        "pending": "Pending",
+        "totalWeight": "Total Weight",
+        "thisMonth": "+{count} this month",
+        "acceptanceRate": "{rate}% accepted"
+      },
+      "charts": {
+        "distribution": {
+          "title": "Booking Distribution",
+          "description": "Breakdown by status",
+          "accepted": "Accepted",
+          "rejected": "Rejected",
+          "pending": "Pending"
+        },
+        "weightByCarrier": {
+          "title": "Weight by Carrier",
+          "description": "Top 5 carriers by weight (KG)",
+          "weight": "Weight"
+        }
+      },
+      "performance": {
+        "acceptanceRate": "Acceptance Rate",
+        "totalBookings": "Total Bookings",
+        "totalVolume": "Total Volume"
+      },
+      "topCarriers": {
+        "title": "Top Carriers",
+        "description": "Ranking of the best shipping lines",
+        "viewAll": "View all",
+        "bookingsCount": "{count} bookings",
+        "empty": {
+          "title": "No bookings",
+          "description": "Create your first booking to see your stats",
+          "cta": "Create a booking"
+        }
+      },
+      "export": {
+        "carrier": "Carrier",
+        "totalBookings": "Total Bookings",
+        "accepted": "Accepted",
+        "rejected": "Rejected",
+        "totalWeight": "Total Weight (KG)",
+        "totalVolume": "Total Volume (CBM)",
+        "acceptanceRate": "Acceptance rate (%)",
+        "avgPrice": "Average price ($)"
+      }
+    },
+    "bookingsList": {
+      "title": "Bookings",
+      "description": "Manage and track your shipments",
+      "new": "New Booking",
+      "transferBanner": {
+        "title": "Transfer declared",
+        "message": "Your transfer has been recorded. An administrator will verify receipt and activate your booking. You will be notified once validated."
+      },
+      "exportFilename": "bookings",
+      "export": {
+        "id": "ID",
+        "pallets": "Pallets",
+        "weight": "Weight (kg)",
+        "volume": "Volume (CBM)",
+        "origin": "Origin",
+        "destination": "Destination",
+        "carrier": "Carrier",
+        "status": "Status",
+        "createdAt": "Created at"
+      },
+      "searchType": {
+        "label": "Search type",
+        "route": "Route (Origin/Destination)",
+        "pallets": "Pallets/Packages",
+        "weight": "Weight (kg)",
+        "status": "Status",
+        "date": "Date",
+        "quote": "Quote No."
+      },
+      "searchPlaceholder": {
+        "route": "Search by city (origin or destination)...",
+        "pallets": "Search by pallet count...",
+        "weight": "Search by weight in kg...",
+        "status": "Search by status...",
+        "date": "Search by date (DD/MM/YYYY)...",
+        "quote": "Search by quote number...",
+        "default": "Search..."
+      },
+      "statusFilter": {
+        "label": "Status",
+        "all": "All statuses"
+      },
+      "status": {
+        "pending": "Pending",
+        "accepted": "Accepted",
+        "rejected": "Rejected"
+      },
+      "loading": "Loading bookings...",
+      "search": "Search",
+      "columns": {
+        "palletsPackages": "Pallets/Packages",
+        "weight": "Weight",
+        "route": "Route",
+        "status": "Status",
+        "date": "Date",
+        "quoteNumber": "Quote No.",
+        "bookingNumber": "Booking No."
+      },
+      "mobile": {
+        "pallets": "Pallets",
+        "weight": "Weight",
+        "date": "Date",
+        "ref": "Ref: #{id}",
+        "booking": "Booking: {number}"
+      },
+      "units": {
+        "palletsCount": "{count, plural, one {# pallet} other {# pallets}}",
+        "containersCount": "{count, plural, one {# container} other {# containers}}",
+        "palletsShort": "{count} pal.",
+        "containersShort": "{count} cont.",
+        "kg": "{value} kg",
+        "cbm": "{value} CBM"
+      },
+      "empty": {
+        "title": "No bookings found",
+        "hasFilters": "Try adjusting your filters",
+        "noBookings": "Start by creating your first booking"
+      },
+      "pagination": {
+        "previous": "Previous",
+        "next": "Next",
+        "showing": "Showing <b>{start}</b> to <b>{end}</b> of <b>{total}</b> {total, plural, one {result} other {results}}"
+      }
+    },
+    "rateSearch": {
+      "title": "Advanced Rate Search",
+      "subtitle": "Complete form with all transport options",
+      "mapLoading": "Loading map...",
+      "step1": {
+        "title": "1. General Information",
+        "originLabel": "Origin port *",
+        "destinationLabel": "Destination port *",
+        "selected": "✓ Selected",
+        "originPlaceholder": "Search for an origin port...",
+        "destinationPlaceholder": "Search for a destination...",
+        "destinationDisabled": "Select an origin port first",
+        "availableDestinations": "{count, plural, one {# destination available} other {# destinations available}} from {port}",
+        "moreResults": "+{count} more results. Refine your search.",
+        "noOrigin": "No origin port found for \"{query}\"",
+        "noDestination": "No destination found for \"{query}\"",
+        "routeTitle": "Maritime route: {origin} → {destination}",
+        "routeDescription": "Approximate distance and route visualization"
+      },
+      "step2": {
+        "title": "2. Packaging",
+        "addPackage": "+ Add a package",
+        "packageNumber": "Package #{number}",
+        "remove": "Remove",
+        "type": "Type",
+        "quantity": "Quantity",
+        "length": "L (cm)",
+        "width": "W (cm)",
+        "height": "H (cm)",
+        "weight": "Weight (kg)",
+        "stackable": "Stackable",
+        "packageTypes": {
+          "caisse": "Crate",
+          "colis": "Parcel",
+          "palette": "Pallet",
+          "autre": "Other"
+        },
+        "summary": {
+          "title": "Summary",
+          "volume": "Total volume: {value} m³",
+          "weight": "Total weight: {value} kg",
+          "pallets": "Pallets: {value}"
+        }
+      },
+      "step3": {
+        "title": "3. Options & Services",
+        "customs": {
+          "title": "Customs Import / Export",
+          "eurDocument": "EUR 1",
+          "t1Document": "T1",
+          "customsStop": "Customs stop",
+          "exportAssistance": "Export assistance"
+        },
+        "goods": {
+          "title": "Goods",
+          "dangerous": "Dangerous Goods",
+          "regulated": "Regulated products"
+        },
+        "handling": {
+          "title": "Special handling",
+          "special": "Special handling",
+          "tailgate": "Tailgate",
+          "straps": "Straps",
+          "thermalCover": "Thermal cover"
+        },
+        "other": {
+          "title": "Other options",
+          "appointment": "Delivery appointment",
+          "insurance": "Insurance"
+        }
+      },
+      "navigation": {
+        "previous": "Previous",
+        "next": "Next",
+        "search": "Search rates"
+      },
+      "results": {
+        "loadingTitle": "Searching for the best rates...",
+        "backToSearch": "← Back to search",
+        "errorTitle": "Error",
+        "errorGeneric": "An error occurred while searching",
+        "noResultsTitle": "No results found",
+        "noResultsMessage": "No rates match your search for the route {origin} → {destination}",
+        "suggestions": "Suggestions:",
+        "suggestionPorts": "• Available ports: NLRTM, DEHAM, FRLEH, BEGNE (origin) → USNYC, USLAX, CNSHG, SGSIN (destination)",
+        "suggestionVolume": "• Volume: Try between 1 and 200 CBM",
+        "suggestionWeight": "• Weight: Try between 100 and 30000 kg",
+        "modifySearch": "Modify search",
+        "resultsTitle": "Search results",
+        "summary": "{volume} CBM • {weight} kg",
+        "summaryWithPallets": "{volume} CBM • {weight} kg • {count, plural, one {# pallet} other {# pallets}}",
+        "ratesFound": "Rates found",
+        "bestChoices": "Best choices for your search",
+        "options": {
+          "economic": "Economy",
+          "standard": "Standard",
+          "fast": "Fast",
+          "badgeCheapest": "Cheapest",
+          "badgeBalanced": "Balanced",
+          "badgeFastest": "Fastest"
+        },
+        "totalPrice": "Total price",
+        "carrier": "Carrier:",
+        "transit": "Transit:",
+        "transitDays": "{days} days",
+        "type": "Type:",
+        "select": "Select this option",
+        "allResults": "All available rates ({count})",
+        "priceBreakdown": {
+          "base": "Base price",
+          "volume": "Volume charge",
+          "weight": "Weight charge",
+          "transit": "Transit time"
+        },
+        "validUntil": "✓ Valid until {date}",
+        "surcharges": "Applicable surcharges",
+        "selectShort": "Select"
+      }
+    },
+    "notificationsPage": {
+      "title": "Notifications",
+      "totalLabel": "{count, plural, one {# notification total} other {# notifications total}}",
+      "unreadSuffix": " • {count, plural, one {# unread} other {# unread}}",
+      "markAllRead": "Mark all as read",
+      "filter": {
+        "label": "Filter:",
+        "all": "All",
+        "unread": "Unread",
+        "read": "Read"
+      },
+      "loading": "Loading notifications...",
+      "empty": {
+        "title": "No notifications",
+        "upToDate": "You're all caught up!",
+        "none": "No notifications to display"
+      },
+      "new": "NEW",
+      "deleteTitle": "Delete notification",
+      "deleteConfirm": "Are you sure you want to delete this notification?",
+      "viewDetails": "View details",
+      "priority": {
+        "urgent": "URGENT",
+        "high": "HIGH",
+        "medium": "MEDIUM",
+        "low": "LOW"
+      },
+      "time": {
+        "now": "Just now",
+        "minutes": "{count}m ago",
+        "hours": "{count}h ago",
+        "days": "{count}d ago"
+      },
+      "pagination": {
+        "info": "Page <b>{current}</b> of <b>{total}</b> • <b>{items}</b> {items, plural, one {notification} other {notifications}} total",
+        "previous": "Previous",
+        "next": "Next"
+      }
+    },
+    "bookingDetail": {
+      "back": "← Back to bookings",
+      "notFound": "Booking not found",
+      "createdOn": "Created on {date}",
+      "downloadPdf": "Download PDF",
+      "pdfNotImplemented": "PDF download functionality is not yet implemented",
+      "status": {
+        "draft": "Draft",
+        "pending": "Pending",
+        "confirmed": "Confirmed",
+        "in_transit": "In transit",
+        "delivered": "Delivered",
+        "cancelled": "Cancelled"
+      },
+      "cargo": {
+        "title": "Cargo Details",
+        "description": "Description",
+        "specialInstructions": "Special Instructions"
+      },
+      "containers": {
+        "title": "Containers ({count})",
+        "type": "Type",
+        "number": "Container Number",
+        "seal": "Seal Number",
+        "vgm": "VGM (kg)"
+      },
+      "shipper": {
+        "title": "Shipper",
+        "name": "Name",
+        "contact": "Contact",
+        "email": "Email",
+        "phone": "Phone"
+      },
+      "consignee": {
+        "title": "Consignee",
+        "name": "Name",
+        "contact": "Contact",
+        "email": "Email",
+        "phone": "Phone"
+      },
+      "timeline": {
+        "title": "Timeline",
+        "created": "Booking Created"
+      },
+      "info": {
+        "title": "Information",
+        "bookingId": "Booking ID",
+        "lastUpdated": "Last Updated"
+      }
+    },
+    "profile": {
+      "loading": "Loading profile...",
+      "loadError": "Unable to load profile",
+      "retry": "Retry",
+      "header": {
+        "title": "My Profile",
+        "subtitle": "Manage your account settings and preferences"
+      },
+      "active": "Active",
+      "tabs": {
+        "profile": "Personal information",
+        "password": "Change password"
+      },
+      "profileForm": {
+        "firstName": "First name",
+        "lastName": "Last name",
+        "email": "Email address",
+        "emailHelp": "Email address cannot be changed",
+        "save": "Save",
+        "saving": "Saving...",
+        "successUpdate": "Profile updated successfully!",
+        "errorUpdate": "Failed to update profile"
+      },
+      "passwordForm": {
+        "current": "Current password",
+        "new": "New password",
+        "confirm": "Confirm new password",
+        "newHint": "At least 12 characters with uppercase, lowercase, number and special character",
+        "submit": "Update",
+        "submitting": "Updating...",
+        "successUpdate": "Password updated successfully!",
+        "errorUpdate": "Failed to update password",
+        "errors": {
+          "currentRequired": "Current password is required",
+          "newMin": "Password must be at least 12 characters",
+          "newComplexity": "Password must contain uppercase, lowercase, number and special character",
+          "confirmRequired": "Please confirm your password",
+          "mismatch": "Passwords do not match"
+        },
+        "fieldErrors": {
+          "firstNameMin": "First name must be at least 2 characters",
+          "lastNameMin": "Last name must be at least 2 characters",
+          "emailInvalid": "Invalid email address"
+        }
+      }
+    },
+    "organizationSettings": {
+      "loading": "Loading...",
+      "loadError": "Unable to load organization",
+      "errorTitle": "Error",
+      "header": {
+        "title": "Organization settings",
+        "subtitle": "Manage your organization information"
+      },
+      "saveSuccess": "Information saved successfully",
+      "loadFailed": "Loading error",
+      "saveFailed": "Save error",
+      "readOnlyWarning": "Read-only mode - Only administrators and managers can edit the organization",
+      "tabs": {
+        "information": "Information",
+        "address": "Address",
+        "subscription": "Subscription",
+        "licenses": "Licenses"
+      },
+      "information": {
+        "name": "Company name",
+        "namePlaceholder": "Xpeditis",
+        "siren": "SIREN",
+        "sirenHint": "French Business Registration System",
+        "sirenDigits": "9 digits",
+        "sirenPlaceholder": "123 456 789",
+        "eori": "EORI Number",
+        "eoriHint": "Economic Operators Registration and Identification",
+        "eoriHelp": "Country code (2 letters) + unique number (max 15 characters)",
+        "eoriPlaceholder": "FR123456789",
+        "phone": "Phone",
+        "phonePlaceholder": "+33 6 80 18 28 12",
+        "email": "Email",
+        "emailPlaceholder": "contact@xpeditis.com"
+      },
+      "address": {
+        "street": "Street",
+        "streetPlaceholder": "123 Main Street",
+        "postalCode": "Postal code",
+        "postalCodePlaceholder": "75001",
+        "city": "City",
+        "cityPlaceholder": "Paris",
+        "country": "Country",
+        "countries": {
+          "FR": "France",
+          "BE": "Belgium",
+          "DE": "Germany",
+          "ES": "Spain",
+          "IT": "Italy",
+          "NL": "Netherlands",
+          "GB": "United Kingdom",
+          "US": "United States",
+          "CN": "China"
+        }
+      },
+      "actions": {
+        "cancel": "Cancel",
+        "save": "Save",
+        "saving": "Saving..."
+      }
+    },
+    "apiKeys": {
+      "title": "API Keys",
+      "description": "Manage programmatic access keys to the Xpeditis API.",
+      "newKey": "New key",
+      "infoTitle": "How to use your API keys",
+      "infoBody": "Add the {code} header to every HTTP request. {link}",
+      "viewDocs": "View documentation",
+      "loading": "Loading...",
+      "noKeys": "No API keys yet.",
+      "createFirst": "Create your first key",
+      "table": {
+        "name": "Name / Prefix",
+        "lastUsed": "Last used",
+        "expiry": "Expires",
+        "status": "Status"
+      },
+      "status": {
+        "revoked": "Revoked",
+        "expired": "Expired",
+        "active": "Active"
+      },
+      "revoke": "Revoke this key",
+      "quota": "{active} / {max} active keys used",
+      "copy": {
+        "copied": "Copied",
+        "copy": "Copy"
+      },
+      "createModal": {
+        "title": "New API key",
+        "name": "Key name",
+        "namePlaceholder": "e.g.: ERP Production integration",
+        "nameCount": "{count}/100 characters",
+        "expiry": "Expiry date",
+        "optional": "(optional)",
+        "expiryHint": "If empty, the key never expires.",
+        "errorGeneric": "An error occurred. Please try again.",
+        "cancel": "Cancel",
+        "create": "Create key",
+        "creating": "Creating..."
+      },
+      "createdModal": {
+        "title": "API key created",
+        "warning": "Copy this key now.",
+        "warningRest": "It will never be shown again after closing this window.",
+        "fullKey": "Full API key",
+        "storeHint": "Store it in your environment variables or a secrets manager.",
+        "close": "I've copied my key, close"
+      },
+      "revokeModal": {
+        "title": "Revoke this key?",
+        "description": "This action is",
+        "descriptionEmphasis": "immediate and irreversible",
+        "descriptionRest": ". Any request using this key will be rejected.",
+        "cancel": "Cancel",
+        "confirm": "Revoke"
+      },
+      "noAccess": {
+        "title": "API Access",
+        "description": "Programmatic access to the Xpeditis API is available only on {gold} and {platinium} plans.",
+        "gold": "Gold",
+        "platinium": "Platinium",
+        "viewPlans": "View plans"
+      }
+    },
+    "usersManagement": {
+      "loading": "Loading users...",
+      "header": {
+        "title": "User Management",
+        "subtitle": "Manage team members and their permissions"
+      },
+      "license": {
+        "limitTitle": "License limit reached",
+        "limitMessage": "Your organization has used all available licenses ({used}/{max}). Upgrade your subscription to invite more users.",
+        "upgradeLink": "Upgrade subscription",
+        "remaining": "{count, plural, one {# license remaining} other {# licenses remaining}} ({used}/{max} used)",
+        "manageLink": "Manage subscription"
+      },
+      "actions": {
+        "invite": "Invite a user",
+        "inviteShort": "Invite",
+        "upgrade": "Upgrade",
+        "upgradeShort": "Upgrade"
+      },
+      "exportFilename": "users",
+      "export": {
+        "firstName": "First name",
+        "lastName": "Last name",
+        "email": "Email",
+        "role": "Role",
+        "status": "Status",
+        "createdAt": "Created at"
+      },
+      "messages": {
+        "inviteSuccess": "Invitation sent successfully! The user will receive an email with a sign-up link.",
+        "inviteError": "Failed to send invitation",
+        "roleSuccess": "Role updated successfully",
+        "roleError": "Failed to update role",
+        "statusSuccess": "User status updated successfully",
+        "statusError": "Failed to update status",
+        "deleteSuccess": "User deleted successfully",
+        "deleteError": "Failed to delete user",
+        "cancelInviteSuccess": "Invitation cancelled successfully",
+        "cancelInviteError": "Failed to cancel invitation"
+      },
+      "confirms": {
+        "toggleActive": "Are you sure you want to {action} this user?",
+        "toggleActivate": "activate",
+        "toggleDeactivate": "deactivate",
+        "delete": "Are you sure you want to delete this user? This action is irreversible.",
+        "cancelInvite": "Cancel the invitation sent to {name}?"
+      },
+      "users": {
+        "title": "Users",
+        "membersCount": "{count, plural, one {# member} other {# members}}",
+        "table": {
+          "user": "User",
+          "email": "Email",
+          "role": "Role",
+          "status": "Status",
+          "createdAt": "Created at",
+          "actions": "Actions"
+        },
+        "active": "Active",
+        "inactive": "Inactive",
+        "empty": {
+          "title": "No users",
+          "description": "Start by inviting a team member"
+        },
+        "actions": {
+          "activate": "Activate",
+          "deactivate": "Deactivate",
+          "delete": "Delete"
+        }
+      },
+      "invitations": {
+        "title": "Pending invitations",
+        "subtitle": "Users invited but not yet signed up — {count, plural, one {# invitation} other {# invitations}}",
+        "table": {
+          "user": "User",
+          "email": "Email",
+          "role": "Role",
+          "expires": "Expires on",
+          "status": "Status",
+          "actions": "Actions"
+        },
+        "expired": "Expired",
+        "pending": "Pending",
+        "cancel": "Cancel"
+      },
+      "modal": {
+        "title": "Invite a user",
+        "firstName": "First name",
+        "lastName": "Last name",
+        "email": "Email address",
+        "role": "Role",
+        "roles": {
+          "USER": "User",
+          "MANAGER": "Manager",
+          "VIEWER": "Viewer",
+          "ADMIN": "Admin"
+        },
+        "rolesExport": {
+          "ADMIN": "Administrator",
+          "MANAGER": "Manager",
+          "USER": "User",
+          "VIEWER": "Viewer"
+        },
+        "submit": "Send invitation",
+        "submitting": "Sending...",
+        "cancel": "Cancel"
+      },
+      "pagination": {
+        "info": "{from}–{to} of {total}"
+      }
+    },
+    "subscriptionRedirect": {
+      "loading": "Redirecting..."
+    },
+    "admin": {
+      "bookings": {
+        "loading": "Loading bookings...",
+        "loadError": "Unable to load bookings",
+        "deleteError": "Error while deleting",
+        "validateError": "Error while validating bank transfer",
+        "confirmDelete": "Permanently delete this booking?",
+        "confirmValidate": "Confirm receipt of bank transfer and activate this booking?",
+        "title": "Booking management",
+        "subtitle": "All platform bookings",
+        "stats": {
+          "total": "Total",
+          "pendingBankTransfer": "Transfers to validate",
+          "pendingCarrier": "Awaiting carrier",
+          "accepted": "Accepted",
+          "rejected": "Rejected"
+        },
+        "search": {
+          "label": "Search",
+          "placeholder": "Booking #, carrier, route, pallets, weight, CBM..."
+        },
+        "filter": {
+          "label": "Status",
+          "all": "All statuses"
+        },
+        "status": {
+          "PENDING_PAYMENT": "Payment pending",
+          "PENDING_BANK_TRANSFER": "Transfer to validate",
+          "PENDING": "Awaiting carrier",
+          "ACCEPTED": "Accepted",
+          "REJECTED": "Rejected",
+          "CANCELLED": "Cancelled"
+        },
+        "table": {
+          "bookingNumber": "Booking #",
+          "route": "Route",
+          "cargo": "Cargo",
+          "carrier": "Carrier",
+          "status": "Status",
+          "date": "Date",
+          "actions": "Actions",
+          "empty": "No booking found",
+          "pallets": "pal."
+        },
+        "menu": {
+          "viewDetails": "View details",
+          "validateTransfer": "Validate transfer",
+          "delete": "Delete"
+        },
+        "modal": {
+          "title": "Booking details",
+          "bookingNumber": "Booking #",
+          "status": "Status",
+          "routeSection": "Route",
+          "origin": "Origin",
+          "destination": "Destination",
+          "cargoSection": "Cargo & Carrier",
+          "carrier": "Carrier",
+          "containerType": "Container type",
+          "pallets": "Pallets",
+          "weight": "Weight",
+          "volume": "Volume",
+          "priceSection": "Price",
+          "datesSection": "Dates",
+          "createdAt": "Created on",
+          "updatedAt": "Updated",
+          "validateButton": "✓ Validate transfer",
+          "validating": "Validating...",
+          "close": "Close",
+          "none": "—"
+        }
+      },
+      "csvRates": {
+        "title": "CSV rates management",
+        "subtitle": "Admin interface to manage maritime rate CSV files",
+        "adminBadge": "ADMIN ONLY",
+        "cardTitle": "Active CSV configurations",
+        "cardDescription": "List of all companies with configured CSV files",
+        "loadError": "Error while loading files",
+        "confirmDelete": "Are you sure you want to delete the file {filename}?",
+        "deleteSuccess": "File deleted: {filename}",
+        "deleteError": "Error: {message}",
+        "deleteFailedFallback": "Unable to delete the file",
+        "empty": "No file found. Upload a CSV file to get started.",
+        "table": {
+          "filename": "File",
+          "size": "Size",
+          "rows": "Rows",
+          "uploadedAt": "Upload date",
+          "email": "Email",
+          "actions": "Actions",
+          "rowCount": "{count} rows"
+        },
+        "infoTitle": "Information",
+        "info": {
+          "formatLabel": "Required CSV format:",
+          "formatBody": "Refer to the documentation for the complete list of required columns.",
+          "sizeLabel": "Maximum size:",
+          "sizeBody": "10 MB per file",
+          "updateLabel": "Update:",
+          "updateBody": "Uploading a new file for an existing company will overwrite the previous one.",
+          "validationLabel": "Validation:",
+          "validationBody": "The system automatically validates the CSV structure on upload."
+        }
+      },
+      "documents": {
+        "title": "Document management",
+        "subtitle": "List of all CSV quote documents",
+        "loading": "Loading documents...",
+        "loadError": "Unable to load documents",
+        "deleteError": "Error while deleting",
+        "confirmDelete": "Permanently delete this document?",
+        "downloadError": "Error while downloading the document: {message}",
+        "unknownError": "Unknown error",
+        "stats": {
+          "totalDocs": "Total Documents",
+          "bookingsWithDocs": "Quotes with Documents",
+          "filtered": "Filtered Documents"
+        },
+        "filters": {
+          "search": "Search",
+          "searchPlaceholder": "Name, type, route...",
+          "quoteNumber": "Quote Number",
+          "quoteNumberPlaceholder": "Ex: #F2CAD5E1",
+          "user": "User",
+          "allUsers": "All users"
+        },
+        "table": {
+          "name": "Document Name",
+          "type": "Type",
+          "quoteNumber": "Quote Number",
+          "route": "Route",
+          "status": "Status",
+          "user": "User",
+          "actions": "Actions",
+          "empty": "No document found"
+        },
+        "menu": {
+          "download": "Download",
+          "delete": "Delete"
+        },
+        "pagination": {
+          "previous": "Previous",
+          "next": "Next",
+          "showing": "Showing",
+          "to": "to",
+          "on": "of",
+          "results": "results",
+          "perPage": "Per page:"
+        }
+      },
+      "logs": {
+        "title": "System logs",
+        "subtitle": "Real-time visualisation and export of application logs",
+        "refresh": "Refresh",
+        "export": "Export",
+        "exporting": "Exporting...",
+        "downloadCsv": "Download CSV",
+        "downloadJson": "Download JSON",
+        "stats": {
+          "total": "Total logs",
+          "errors": "Errors",
+          "warnings": "Warnings",
+          "info": "Info"
+        },
+        "filters": {
+          "title": "Filters",
+          "service": "Service",
+          "level": "Level",
+          "search": "Search",
+          "searchPlaceholder": "Free text...",
+          "start": "Start",
+          "end": "End",
+          "limit": "Limit",
+          "apply": "Filter",
+          "all": "All"
+        },
+        "errorBanner": "Unable to reach the log-exporter:",
+        "errorHint": "Make sure the backend and the log-exporter are running.",
+        "loading": "Loading...",
+        "entries": "{count, plural, one {# entry} other {# entries}}",
+        "clickHint": "Click on a row for details",
+        "empty": "No log found for these filters",
+        "table": {
+          "timestamp": "Timestamp",
+          "service": "Service",
+          "level": "Level",
+          "context": "Context",
+          "message": "Message",
+          "req": "Req / Status"
+        },
+        "detail": {
+          "timestamp": "Timestamp",
+          "requestId": "Request ID",
+          "duration": "Duration",
+          "fullMessage": "Full message"
+        }
+      },
+      "organizations": {
+        "loading": "Loading organizations...",
+        "loadError": "Unable to load organizations",
+        "createError": "Failed to create organization",
+        "updateError": "Failed to update organization",
+        "siretError": "Error while verifying the SIRET",
+        "siretApproveError": "Error while approving",
+        "siretRejectError": "Error while rejecting",
+        "siretInvalid": "Invalid or unknown SIRET.",
+        "siretVerified": "SIRET successfully verified!\nCompany: {companyName}\nAddress: {address}",
+        "confirmApprove": "Confirm manual approval of this organization's SIRET/SIREN?",
+        "confirmReject": "Confirm rejection of the SIRET/SIREN? The organization will no longer be able to make purchases.",
+        "title": "Organization Management",
+        "subtitle": "Manage all organizations in the system",
+        "create": "+ Create Organization",
+        "types": {
+          "FREIGHT_FORWARDER": "Freight Forwarder",
+          "CARRIER": "Carrier",
+          "SHIPPER": "Shipper"
+        },
+        "active": "Active",
+        "inactive": "Inactive",
+        "scac": "SCAC",
+        "siren": "SIREN",
+        "siret": "SIRET",
+        "verified": "Verified",
+        "notVerified": "Not verified",
+        "notProvided": "Not provided",
+        "email": "Email",
+        "location": "Location",
+        "edit": "Edit",
+        "verifying": "...",
+        "verifyApi": "Verify via API",
+        "approveSiret": "Approve SIRET",
+        "rejectSiret": "Reject SIRET",
+        "modal": {
+          "createTitle": "Create New Organization",
+          "editTitle": "Edit Organization",
+          "name": "Organization Name *",
+          "type": "Type *",
+          "scacLabel": "SCAC Code *",
+          "sirenLabel": "SIREN",
+          "siretLabel": "SIRET (14 digits)",
+          "siretPlaceholder": "12345678901234",
+          "eoriLabel": "EORI",
+          "contactPhone": "Contact Phone",
+          "contactEmail": "Contact Email",
+          "street": "Street Address *",
+          "city": "City *",
+          "postalCode": "Postal Code *",
+          "state": "State / Region",
+          "country": "Country *",
+          "logoUrl": "Logo URL",
+          "cancel": "Cancel",
+          "create": "Create",
+          "update": "Update"
+        }
+      },
+      "users": {
+        "loading": "Loading users...",
+        "loadError": "Failed to load data",
+        "createError": "Failed to create user",
+        "updateError": "Failed to update user",
+        "deleteError": "Failed to delete user",
+        "title": "User Management",
+        "subtitle": "Manage all users in the system",
+        "create": "+ Create User",
+        "table": {
+          "user": "User",
+          "email": "Email",
+          "role": "Role",
+          "organization": "Organization",
+          "status": "Status",
+          "actions": "Actions"
+        },
+        "active": "Active",
+        "inactive": "Inactive",
+        "edit": "Edit",
+        "delete": "Delete",
+        "roles": {
+          "USER": "User",
+          "MANAGER": "Manager",
+          "ADMIN": "Admin",
+          "VIEWER": "Viewer"
+        },
+        "modal": {
+          "createTitle": "Create New User",
+          "editTitle": "Edit User",
+          "email": "Email",
+          "emailReadOnly": "Email (read-only)",
+          "firstName": "First Name",
+          "lastName": "Last Name",
+          "role": "Role",
+          "organization": "Organization",
+          "selectOrganization": "Select Organization",
+          "password": "Password (leave empty for auto-generated)",
+          "cancel": "Cancel",
+          "create": "Create",
+          "update": "Update"
+        },
+        "deleteConfirm": {
+          "title": "Confirm Delete",
+          "message": "Are you sure you want to delete user {firstName} {lastName}? This action cannot be undone.",
+          "cancel": "Cancel",
+          "confirm": "Delete"
+        }
+      }
+    },
+    "subscription": {
+      "currentPlan": "Current plan",
+      "refresh": "Refresh",
+      "refreshing": "Refreshing...",
+      "statusActive": "Active",
+      "cancelAtPeriodEnd": "Cancellation scheduled",
+      "manageBilling": "Manage billing",
+      "manageBillingLoading": "Loading...",
+      "licenseUsage": "License usage",
+      "unlimited": "Unlimited",
+      "currentPeriod": "Current period: until",
+      "availablePlans": "Available plans",
+      "billingMonthly": "Monthly",
+      "billingYearly": "Yearly",
+      "yearlySaving": "-1 month",
+      "perYear": "/year",
+      "perMonth": "/month",
+      "customQuote": "Custom quote",
+      "maxUsers": "Up to {count} users",
+      "unlimitedUsers": "Unlimited users",
+      "currentPlanButton": "Current plan",
+      "contactUs": "Contact us",
+      "upgradeButton": "Upgrade",
+      "upgradeLoading": "Loading...",
+      "downgrade": "Downgrade via Billing",
+      "successMessage": "Your subscription has been successfully updated!",
+      "updatingMessage": "Updating...",
+      "canceledMessage": "Payment was canceled. Your subscription has not been modified.",
+      "checkoutError": "Error creating payment session",
+      "portalError": "Error opening billing portal",
+      "noLicenses": "No licenses available. Upgrade to a higher plan to add users.",
+      "licensesRemaining": "{count} license(s) remaining."
+    },
+    "wiki": {
+      "title": "Maritime Wiki",
+      "description": "Knowledge base on maritime import/export. Click on a topic to learn more.",
+      "helpText": "These guides are regularly updated with the latest regulations and best practices in the maritime sector.",
+      "needHelp": "Need help?",
+      "topics": {
+        "incoterms": {
+          "title": "Incoterms 2020",
+          "description": "International rules for interpreting commercial terms"
+        },
+        "documents": {
+          "title": "Transport Documents",
+          "description": "Essential documents for maritime transport"
+        },
+        "containers": {
+          "title": "Containers and Cargo Types",
+          "description": "Complete guide to maritime container types"
+        },
+        "lclFcl": {
+          "title": "LCL vs FCL",
+          "description": "Differences between groupage and full container"
+        },
+        "customs": {
+          "title": "Customs Procedures",
+          "description": "Guide to import/export customs formalities"
+        },
+        "insurance": {
+          "title": "Marine Insurance",
+          "description": "Protection of goods in transit"
+        },
+        "freight": {
+          "title": "Maritime Freight Calculation",
+          "description": "How transport costs are calculated"
+        },
+        "ports": {
+          "title": "Ports and Maritime Routes",
+          "description": "The main global trade routes"
+        },
+        "vgm": {
+          "title": "VGM (Verified Gross Mass)",
+          "description": "Container weighing obligation (SOLAS)"
+        },
+        "imdg": {
+          "title": "Dangerous Goods (IMDG)",
+          "description": "Transport of dangerous goods by sea"
+        },
+        "letterOfCredit": {
+          "title": "Letter of Credit (L/C)",
+          "description": "Secure international payment instrument"
+        },
+        "transitTime": {
+          "title": "Transit Time and Delays",
+          "description": "Understanding delays in maritime transport"
+        }
+      }
+    },
+    "trackTrace": {
+      "title": "Shipment Tracking",
+      "description": "Track your shipments in real time. Enter your tracking number and select the carrier.",
+      "searchCard": {
+        "title": "Search a shipment",
+        "description": "Enter your container number, Bill of Lading (B/L) or booking reference",
+        "selectCarrier": "Select the carrier",
+        "trackingNumber": "Tracking number",
+        "searchButton": "Search",
+        "showMap": "Show maritime map",
+        "hideMap": "Hide maritime map"
+      },
+      "errors": {
+        "noTrackingNumber": "Please enter a tracking number",
+        "noCarrier": "Please select a carrier"
+      },
+      "map": {
+        "title": "World Maritime Map",
+        "subtitle": "Real-time vessel positions",
+        "minimize": "Minimize",
+        "fullscreen": "Full screen",
+        "loading": "Loading map...",
+        "connecting": "Connecting to MarineTraffic",
+        "legend": "Legend",
+        "cargo": "Cargo",
+        "tankers": "Tankers",
+        "passengers": "Passengers",
+        "activeVessels": "Active vessels",
+        "worldPorts": "World ports",
+        "dataSource": "Data provided by MarineTraffic - Real-time updates",
+        "openOnSite": "Open on MarineTraffic",
+        "iframeTitle": "Real-time maritime map"
+      },
+      "history": {
+        "title": "Search history",
+        "clearAll": "Clear all",
+        "empty": "No recent searches",
+        "emptyHint": "Your searches will appear here"
+      },
+      "help": {
+        "containerNumber": {
+          "title": "Container number",
+          "description": "Standard format: 4 letters + 7 digits (e.g. MSKU1234567). The prefix usually indicates the container owner."
+        },
+        "billOfLading": {
+          "title": "Bill of Lading (B/L)",
+          "description": "The Bill of Lading number is provided by the carrier upon booking confirmation. The format varies by carrier."
+        },
+        "bookingRef": {
+          "title": "Booking reference",
+          "description": "Booking number assigned by the carrier when the space on the vessel was initially booked."
+        }
+      },
+      "infoBox": {
+        "title": "How does tracking work?",
+        "description": "This feature redirects you to the carrier's official website to get the most up-to-date tracking information. The displayed data comes directly from the carrier's system."
+      },
+      "timeAgo": {
+        "justNow": "Just now",
+        "minutesAgo": "{count}min ago",
+        "hoursAgo": "{count}h ago",
+        "daysAgo": "{count}d ago"
+      },
+      "carriers": {
+        "containerOrBl": "Container no. or B/L",
+        "containerBlOrBooking": "Container no., B/L or booking",
+        "containerOnly": "Container no."
+      }
+    },
+    "userDocuments": {
+      "title": "My Documents",
+      "description": "Manage all documents from your bookings",
+      "loading": "Loading documents...",
+      "error": "Error loading documents",
+      "stats": {
+        "total": "Total Documents",
+        "withDocuments": "Bookings with Documents",
+        "filtered": "Filtered Documents"
+      },
+      "filters": {
+        "search": "Search",
+        "searchPlaceholder": "Name, type, route, carrier...",
+        "quoteNumber": "Quote Number",
+        "status": "Status",
+        "allStatuses": "All statuses"
+      },
+      "table": {
+        "documentName": "Document Name",
+        "type": "Type",
+        "quoteNumber": "Quote No.",
+        "route": "Route",
+        "carrier": "Carrier",
+        "status": "Status",
+        "actions": "Actions"
+      },
+      "statuses": {
+        "PENDING": "Pending",
+        "ACCEPTED": "Accepted",
+        "REJECTED": "Rejected",
+        "CANCELLED": "Cancelled"
+      },
+      "empty": {
+        "noDocuments": "No documents found. Add documents to your bookings.",
+        "noMatch": "No documents match the selected filters."
+      },
+      "pagination": {
+        "previous": "Previous",
+        "next": "Next",
+        "perPage": "Per page:",
+        "showing": "Showing {from} to {to} of {total} results"
+      },
+      "actions": {
+        "download": "Download",
+        "replace": "Replace"
+      },
+      "export": {
+        "fileName": "File name",
+        "type": "Type",
+        "quoteNumber": "Quote No.",
+        "route": "Route",
+        "carrier": "Carrier",
+        "status": "Status",
+        "uploadedAt": "Date added"
+      },
+      "addDocument": {
+        "buttonLabel": "Add a document",
+        "modalTitle": "Add a document",
+        "selectBooking": "Select a booking",
+        "selectBookingPlaceholder": "-- Choose a booking --",
+        "filesToAdd": "Files to add",
+        "acceptedFormats": "Accepted formats: PDF, Word, Excel, Images (max 10 files)",
+        "uploading": "Uploading...",
+        "add": "Add",
+        "cancel": "Cancel",
+        "successMessage": "Documents added successfully!",
+        "errorMessage": "Error adding documents",
+        "noBookingError": "Please select a booking and at least one file"
+      },
+      "replaceDocument": {
+        "modalTitle": "Replace document",
+        "currentDocument": "Current document:",
+        "booking": "Booking",
+        "newFile": "New file",
+        "acceptedFormats": "Accepted formats: PDF, Word, Excel, Images",
+        "replacing": "Replacing...",
+        "replace": "Replace",
+        "cancel": "Cancel",
+        "successMessage": "Document replaced successfully!",
+        "errorMessage": "Error replacing document",
+        "noFileError": "Please select a replacement file"
+      },
+      "downloadError": "Error downloading document"
+    },
+    "wikiPages": {
+      "backToWiki": "Back to Wiki",
+      "responsibleLabel": "Responsible",
+      "includesLabel": "Covered",
+      "excludesLabel": "Excluded",
+      "mandatoryLabel": "Mandatory",
+      "optionalLabel": "Conditional",
+      "incoterms": {
+        "title": "Incoterms 2020",
+        "description": "Incoterms (International Commercial Terms) are rules published by the International Chamber of Commerce (ICC) that define the responsibilities of sellers and buyers in international transactions. The 2020 version came into effect on January 1, 2020.",
+        "keyPointsTitle": "Key Points",
+        "keyPoints": [
+          "11 incoterms in the 2020 version",
+          "Applicable to all modes of transport (7 rules) or maritime only (4 rules)",
+          "Define risk transfer, costs, and documentation obligations",
+          "Do not determine ownership transfer or payment conditions",
+          "Compulsory inclusion in the sales contract"
+        ],
+        "categoriesTitle": "Categories",
+        "categorySections": [
+          { "name": "Departure", "description": "Minimum obligations for the seller", "terms": ["EXW"] },
+          { "name": "Arrival", "description": "Maximum obligations for the seller", "terms": ["DDP"] },
+          { "name": "Maritime only", "description": "For sea and inland waterway transport", "terms": ["FAS", "FOB", "CFR", "CIF"] }
+        ],
+        "tableTitle": "Incoterms 2020 — Summary",
+        "colCode": "Code",
+        "colName": "Name",
+        "colDescription": "Description",
+        "colRisk": "Risk Transfer",
+        "colTransport": "Transport",
+        "list": [
+          { "code": "EXW", "name": "Ex Works", "description": "The seller makes goods available at their premises. Minimum obligations for the seller.", "risk": "At seller's premises", "transport": "All modes" },
+          { "code": "FCA", "name": "Free Carrier", "description": "The seller delivers goods to a named carrier or another person nominated by the buyer.", "risk": "On delivery to carrier", "transport": "All modes" },
+          { "code": "CPT", "name": "Carriage Paid To", "description": "The seller pays freight to the named destination, but risk transfers at the first carrier.", "risk": "At first carrier", "transport": "All modes" },
+          { "code": "CIP", "name": "Carriage and Insurance Paid To", "description": "Same as CPT but with insurance. Requires ICC-A coverage (upgraded vs. 2010).", "risk": "At first carrier", "transport": "All modes" },
+          { "code": "DAP", "name": "Delivered at Place", "description": "The seller delivers when goods are placed at the buyer's disposal at the named destination.", "risk": "At destination", "transport": "All modes" },
+          { "code": "DPU", "name": "Delivered at Place Unloaded", "description": "New in 2020: replaces DAT. The seller unloads at the named place.", "risk": "After unloading", "transport": "All modes" },
+          { "code": "DDP", "name": "Delivered Duty Paid", "description": "Maximum obligation for the seller: delivered, duties paid. Risk until final destination.", "risk": "At final destination", "transport": "All modes" },
+          { "code": "FAS", "name": "Free Alongside Ship", "description": "The seller delivers goods alongside the named vessel. Maritime only.", "risk": "Alongside ship", "transport": "Maritime only" },
+          { "code": "FOB", "name": "Free on Board", "description": "The seller delivers goods on board the vessel. Most common for bulk cargo.", "risk": "On board ship", "transport": "Maritime only" },
+          { "code": "CFR", "name": "Cost and Freight", "description": "The seller pays freight to the destination port, but risk transfers on board at origin.", "risk": "On board at origin", "transport": "Maritime only" },
+          { "code": "CIF", "name": "Cost Insurance and Freight", "description": "Same as CFR but with minimum insurance (ICC-C). Common in international trade.", "risk": "On board at origin", "transport": "Maritime only" }
+        ],
+        "diagramTitle": "Risk Transfer Diagram",
+        "sellerResponsibility": "Seller's responsibility",
+        "buyerResponsibility": "Buyer's responsibility",
+        "tipsTitle": "Practical Tips",
+        "tips": [
+          "For FCL maritime shipments, prefer FCA or FOB rather than EXW",
+          "For airfreight, avoid FOB — use FCA instead",
+          "DDP requires the seller to manage customs in the buyer's country — complex",
+          "CIP now requires ICC-A coverage (vs. ICC-C for CIF)",
+          "Always specify the exact named place after the incoterm code"
+        ]
+      },
+      "assurance": {
+        "title": "Maritime Insurance",
+        "description": "Maritime insurance protects goods during international transport. It is essential for international trade and is often required by banks for letters of credit.",
+        "iccTitle": "ICC Clauses (Institute Cargo Clauses)",
+        "clauses": [
+          {
+            "name": "ICC A",
+            "level": "All risks",
+            "includes": ["All accidental causes", "Natural calamities", "General Average", "Jettison", "Theft", "Contamination"],
+            "excludes": ["Willful misconduct", "Normal wear", "Delay", "War (needs extension)", "Strikes (needs extension)"]
+          },
+          {
+            "name": "ICC B",
+            "level": "Intermediate",
+            "includes": ["Fire / explosion", "Stranding / grounding", "Collision / capsizing", "General Average", "Earthquake / tidal wave"],
+            "excludes": ["Theft", "Contamination", "Moisture", "War (needs extension)"]
+          },
+          {
+            "name": "ICC C",
+            "level": "Basic",
+            "includes": ["Fire / explosion", "Vessel stranding / sinking", "Collision", "General Average"],
+            "excludes": ["Theft", "Damage", "Moisture", "Contamination", "War (needs extension)"]
+          }
+        ],
+        "extensionsTitle": "Coverage Extensions",
+        "extensions": [
+          { "name": "War clause", "description": "Covers losses due to war, terrorism, piracy" },
+          { "name": "Strikes clause", "description": "Covers losses due to strikes, riots, civil commotion" },
+          { "name": "Reefer clause", "description": "Specific coverage for temperature-controlled goods" },
+          { "name": "On-deck clause", "description": "Coverage for goods stowed on deck (often excluded)" },
+          { "name": "Groupage clause", "description": "Specific to LCL shipments (shared containers)" }
+        ],
+        "processTitle": "Insurance Process",
+        "processSteps": [
+          "Request quote from insurer or broker",
+          "Check the goods and required coverage",
+          "Issue of the insurance certificate",
+          "Declare the shipment (if open policy)",
+          "In case of claim: immediate notification + damage report"
+        ],
+        "valueTitle": "Insured Value",
+        "valueFormula": "Insured value = (Invoice value + freight + 10% profit) × 1.1",
+        "valueNote": "The 10% covers profit and generally accepted commercial markup"
+      },
+      "calculFret": {
+        "title": "Freight Calculation",
+        "description": "Understanding freight pricing is essential to anticipate all costs. Maritime freight is made up of a basic rate plus numerous surcharges that can significantly increase the final cost.",
+        "surchargesTitle": "Main Surcharges",
+        "colCode": "Code",
+        "colName": "Name",
+        "colDescription": "Description",
+        "colVariation": "Variation",
+        "surcharges": [
+          { "code": "BAF", "name": "Bunker Adjustment Factor", "description": "Fuel cost adjustment", "variation": "Monthly, based on oil price" },
+          { "code": "CAF", "name": "Currency Adjustment Factor", "description": "Exchange rate fluctuation compensation", "variation": "Per currency and route" },
+          { "code": "PSS", "name": "Peak Season Surcharge", "description": "Added during peak season (Aug–Oct)", "variation": "Seasonal" },
+          { "code": "GRI", "name": "General Rate Increase", "description": "General annual rate increase", "variation": "Announced quarterly" },
+          { "code": "THC", "name": "Terminal Handling Charge", "description": "Port terminal handling costs", "variation": "Fixed per port" },
+          { "code": "EBS", "name": "Emergency Bunker Surcharge", "description": "Temporary surcharge for fuel price spikes", "variation": "As needed" },
+          { "code": "ISPS", "name": "International Ship & Port Security", "description": "Port security compliance cost", "variation": "Fixed" },
+          { "code": "B/L Fee", "name": "Bill of Lading Fee", "description": "Document issuance fee", "variation": "Fixed per B/L" }
+        ],
+        "additionalCostsTitle": "Additional Costs",
+        "colCost": "Typical cost",
+        "additionalCosts": [
+          { "name": "Pre-carriage", "description": "Road transport from warehouse to origin port", "typical": "Varies by distance" },
+          { "name": "Origin charges", "description": "THC, documentation, customs at origin", "typical": "150–400 USD" },
+          { "name": "Ocean freight", "description": "Base freight rate + surcharges", "typical": "Main item" },
+          { "name": "Destination charges", "description": "THC, handling, document fees at destination", "typical": "200–500 USD" },
+          { "name": "Customs duties", "description": "Import duties based on HS code", "typical": "0–25% of value" },
+          { "name": "On-carriage", "description": "Road transport from destination port to warehouse", "typical": "Varies by distance" }
+        ],
+        "exampleTitle": "FCL Quote Example (40' HC)",
+        "colItem": "Item",
+        "colAmount": "Amount",
+        "exampleItems": [
+          { "item": "Base ocean freight", "amount": "1,200 USD" },
+          { "item": "BAF (Bunker)", "amount": "350 USD" },
+          { "item": "CAF (Currency)", "amount": "50 USD" },
+          { "item": "THC Origin", "amount": "180 USD" },
+          { "item": "THC Destination", "amount": "220 USD" },
+          { "item": "B/L Fee", "amount": "55 USD" },
+          { "item": "ISPS", "amount": "30 USD" },
+          { "item": "Pre-carriage", "amount": "250 USD" },
+          { "item": "Total", "amount": "2,335 USD" }
+        ]
+      },
+      "conteneurs": {
+        "title": "Containers",
+        "description": "Containers are the foundation of maritime transport. Knowing the different types and their dimensions is essential for planning your shipments.",
+        "standardTitle": "Standard Container Types",
+        "colDimensions": "Dimensions (L×W×H)",
+        "colInternal": "Internal",
+        "colDoor": "Door opening",
+        "colVolume": "Volume",
+        "colPayload": "Max payload",
+        "containers": [
+          { "type": "20' Dry", "description": "Standard container for general cargo", "internal": "5.90m × 2.35m × 2.39m", "door": "2.34m × 2.28m", "volume": "33.2 m³", "payload": "21,727 kg" },
+          { "type": "40' Dry", "description": "Standard container, double the length of a 20'", "internal": "12.03m × 2.35m × 2.39m", "door": "2.34m × 2.28m", "volume": "67.7 m³", "payload": "26,500 kg" },
+          { "type": "40' High Cube", "description": "High cube — 30cm taller than standard", "internal": "12.03m × 2.35m × 2.69m", "door": "2.34m × 2.58m", "volume": "76.3 m³", "payload": "26,460 kg" },
+          { "type": "20' Reefer", "description": "Refrigerated container (-25°C to +25°C)", "internal": "5.50m × 2.29m × 2.25m", "door": "2.28m × 2.20m", "volume": "28.4 m³", "payload": "21,000 kg" },
+          { "type": "40' Reefer", "description": "40-foot refrigerated container for large refrigerated loads", "internal": "11.56m × 2.29m × 2.25m", "door": "2.28m × 2.20m", "volume": "59.8 m³", "payload": "22,000 kg" },
+          { "type": "20' Open Top", "description": "Open top container for over-height cargo", "internal": "5.90m × 2.35m × 2.35m", "door": "2.34m × 2.28m", "volume": "32.6 m³", "payload": "20,000 kg" },
+          { "type": "20' Flat Rack", "description": "Flat rack for over-dimensional or heavy cargo", "internal": "5.62m × 2.24m × 2.03m", "door": "N/A", "volume": "N/A", "payload": "45,000 kg" }
+        ],
+        "specialEquipmentTitle": "Special Equipment",
+        "specialEquipment": [
+          { "name": "ISO Tank", "description": "For liquids, chemicals, food products in bulk" },
+          { "name": "Bulk Container", "description": "For dry bulk (grains, minerals) — top hatch" },
+          { "name": "Platform (Bolster)", "description": "For oversized cargo without lateral walls" },
+          { "name": "Ventilated Container", "description": "Natural ventilation for agricultural products (coffee, cocoa)" }
+        ],
+        "selectionTitle": "Container Selection Guide",
+        "colCondition": "Condition",
+        "colRecommendation": "Recommendation",
+        "selectionGuide": [
+          { "condition": "Standard general cargo", "recommendation": "20' or 40' Dry depending on volume" },
+          { "condition": "Temperature-sensitive goods", "recommendation": "Reefer 20' or 40'" },
+          { "condition": "Over-height cargo (> 2.2m)", "recommendation": "Open Top or Flat Rack" },
+          { "condition": "Over-length/weight cargo", "recommendation": "Flat Rack or Platform" },
+          { "condition": "Bulk liquids", "recommendation": "ISO Tank" },
+          { "condition": "Volume < 15 m³", "recommendation": "Consider LCL" }
+        ]
+      },
+      "documentsTransport": {
+        "title": "Transport Documents",
+        "description": "Maritime transport documents are essential for the physical and commercial movement of goods. Each document plays a specific role in the logistics chain.",
+        "mainDocumentsTitle": "Main Documents",
+        "colType": "Type",
+        "colVariants": "Variants",
+        "documents": [
+          {
+            "name": "Bill of Lading (B/L)",
+            "type": "Maritime",
+            "description": "The key maritime transport document. It has three functions: transport contract, receipt of goods, and title document.",
+            "types": ["Original B/L (negotiable)", "Sea Waybill (non-negotiable)", "Telex Release (electronic release)", "Express B/L"]
+          },
+          {
+            "name": "Commercial Invoice",
+            "type": "Commercial",
+            "description": "Document issued by the seller describing the goods and the sale price. Basis for customs clearance.",
+            "types": ["Pro-forma invoice", "Commercial invoice", "Consular invoice (some countries)"]
+          },
+          {
+            "name": "Packing List",
+            "type": "Commercial",
+            "description": "Detailed description of packing, quantities, weights and dimensions of each package.",
+            "types": ["Neutral packing list", "Detailed packing list"]
+          },
+          {
+            "name": "Certificate of Origin",
+            "type": "Customs",
+            "description": "Certifies the country of origin of the goods for customs clearance and preferential duties.",
+            "types": ["EUR.1 (EU preferences)", "Form A (GSP)", "CO issued by chamber of commerce", "REX (Registered Exporter)"]
+          },
+          {
+            "name": "Insurance Certificate",
+            "type": "Insurance",
+            "description": "Proof of insurance covering the goods during transport. Often required by banks for L/C.",
+            "types": ["Open policy", "Individual certificate", "Insurance declaration"]
+          },
+          {
+            "name": "Customs Declaration",
+            "type": "Customs",
+            "description": "Mandatory for export (EX) and import (IM) customs clearance. Filed electronically.",
+            "types": ["Export declaration (EX1)", "Import declaration (IM4)", "Transit (T1, T2)"]
+          }
+        ],
+        "additionalDocsTitle": "Other Important Documents",
+        "additionalDocs": [
+          { "name": "EUR.1 / EUR-MED", "description": "Proof of origin for preferential duties in EU agreements" },
+          { "name": "Sanitary / Phytosanitary Certificate", "description": "Required for food products, plants, animals" },
+          { "name": "Free Sale Certificate", "description": "Certifies the product is legally marketed in the exporting country" },
+          { "name": "Dangerous Goods Certificate", "description": "IMDG/MSDS declaration for hazardous goods" },
+          { "name": "Fumigation Certificate", "description": "Confirms wooden packaging has been treated" }
+        ],
+        "blFocusTitle": "B/L — The Essential Document",
+        "blFunctions": [
+          { "title": "Transport Contract", "description": "Proves the contract between the shipper and the carrier" },
+          { "title": "Receipt of Goods", "description": "The carrier acknowledges having received the goods in stated condition" },
+          { "title": "Title Document", "description": "The holder of the original B/L can claim the goods at destination" }
+        ]
+      },
+      "douanes": {
+        "title": "Customs Procedures",
+        "description": "Customs is a mandatory step for international trade. Understanding customs regimes, required documents and duties helps you plan your operations effectively.",
+        "regimesTitle": "Customs Regimes",
+        "colCode": "Code",
+        "colName": "Name",
+        "colDescription": "Description",
+        "regimes": [
+          { "code": "40 00", "name": "Release for Free Circulation", "description": "Standard import — goods are cleared for the domestic market" },
+          { "code": "10 00", "name": "Permanent Export", "description": "Standard export — goods leave the customs territory definitively" },
+          { "code": "42 00", "name": "Release with VAT Suspension", "description": "Release followed by intra-EU supply — VAT deferred" },
+          { "code": "21 00", "name": "Re-export", "description": "Exit of non-EU goods previously placed under customs procedure" },
+          { "code": "51 00", "name": "Inward Processing", "description": "Import of goods to be processed and re-exported — duties suspended" },
+          { "code": "61 00", "name": "Outward Processing", "description": "Export of goods for processing abroad and reimport" },
+          { "code": "71 00", "name": "Customs Warehouse", "description": "Storage under customs supervision — duties suspended until release" }
+        ],
+        "documentsTitle": "Required Documents",
+        "documents": [
+          { "name": "Commercial Invoice", "mandatory": true, "description": "With price, quantities, incoterm, origin" },
+          { "name": "Packing List", "mandatory": true, "description": "Detailed description of packages" },
+          { "name": "Transport Document", "mandatory": true, "description": "B/L, Air Waybill, CMR depending on mode" },
+          { "name": "Certificate of Origin", "mandatory": false, "description": "Required for preferential rates or restricted origins" },
+          { "name": "Import License", "mandatory": false, "description": "For regulated or restricted goods" },
+          { "name": "Health/Phyto Certificate", "mandatory": false, "description": "For food, plants, animals" }
+        ],
+        "dutiesTitle": "Customs Duties",
+        "colType": "Type",
+        "duties": [
+          { "type": "Import Duties", "description": "Applied on the customs value (CIF at border). Rate based on HS code (0–25% in EU)." },
+          { "type": "VAT", "description": "Applied on (customs value + import duties + transport). 20% standard rate." },
+          { "type": "Excise Duties", "description": "Specific to alcohol, tobacco, hydrocarbons." }
+        ]
+      },
+      "imdg": {
+        "title": "IMDG Code — Dangerous Goods",
+        "description": "The IMDG Code (International Maritime Dangerous Goods) defines the rules for transporting dangerous goods by sea. Compliance is mandatory for safety and to avoid customs and maritime sanctions.",
+        "classesTitle": "IMDG Dangerous Goods Classes",
+        "subdivisionsLabel": "Subdivisions",
+        "classes": [
+          { "class": "Class 1", "name": "Explosives", "description": "Explosives and articles", "subdivisions": ["1.1 Mass explosion", "1.2 Projection hazard", "1.3 Fire hazard", "1.4 No significant hazard", "1.5 Very insensitive", "1.6 Extremely insensitive"] },
+          { "class": "Class 2", "name": "Gases", "description": "Compressed, liquefied, dissolved gases", "subdivisions": ["2.1 Flammable gases", "2.2 Non-flammable, non-toxic gases", "2.3 Toxic gases"] },
+          { "class": "Class 3", "name": "Flammable Liquids", "description": "Liquids with flash point ≤ 60°C" },
+          { "class": "Class 4", "name": "Flammable Solids", "description": "Solids and self-reactive substances", "subdivisions": ["4.1 Flammable solids", "4.2 Spontaneously combustible", "4.3 Dangerous when wet"] },
+          { "class": "Class 5", "name": "Oxidizers", "description": "Oxidizing substances and organic peroxides", "subdivisions": ["5.1 Oxidizing substances", "5.2 Organic peroxides"] },
+          { "class": "Class 6", "name": "Toxic / Infectious", "description": "Toxic and infectious substances", "subdivisions": ["6.1 Toxic substances", "6.2 Infectious substances"] },
+          { "class": "Class 7", "name": "Radioactive", "description": "Radioactive materials" },
+          { "class": "Class 8", "name": "Corrosive", "description": "Corrosive substances" },
+          { "class": "Class 9", "name": "Miscellaneous", "description": "Miscellaneous dangerous substances and articles (e.g. lithium batteries)" }
+        ],
+        "documentsTitle": "Required Documents",
+        "documents": [
+          { "name": "DGD (Dangerous Goods Declaration)", "description": "Mandatory shipper's declaration: UN number, proper shipping name, class, packing group, quantity, emergency contact" },
+          { "name": "MSDS (Material Safety Data Sheet)", "description": "Technical data sheet: composition, hazards, first aid, handling, storage" },
+          { "name": "Container Packing Certificate", "description": "Certifies goods have been properly packed per IMDG rules" },
+          { "name": "Emergency Response Information", "description": "Emergency contact available 24/7 (CHEMTREC, company)" },
+          { "name": "Transport Labels", "description": "Hazard labels affixed to packages and the container" }
+        ],
+        "packagingGroupsTitle": "Packaging Groups",
+        "packagingGroups": [
+          { "group": "Group I (X)", "description": "High danger — most stringent packaging requirements" },
+          { "group": "Group II (Y)", "description": "Medium danger — standard packaging" },
+          { "group": "Group III (Z)", "description": "Low danger — less stringent requirements" }
+        ],
+        "labelingTitle": "Labeling and Placarding",
+        "labelingContent": "Each package must display: UN number, proper shipping name, hazard labels and class. Containers must display 250mm × 250mm placards matching the IMDG class. Mixed loads require labels for each dangerous good.",
+        "segregationTitle": "Segregation",
+        "segregationContent": "Some dangerous goods cannot be loaded in the same container or must be stowed away from others. The IMDG segregation table defines compatible/incompatible classes."
+      },
+      "lclVsFcl": {
+        "title": "LCL vs FCL",
+        "description": "Choosing between LCL (Less than Container Load) and FCL (Full Container Load) is a key decision in maritime freight planning. Each mode has specific advantages and constraints.",
+        "lclTitle": "LCL — Less than Container Load",
+        "lclDescription": "Your goods share a container with other shippers' cargo. The freight forwarder consolidates multiple LCL shipments into a single FCL.",
+        "fclTitle": "FCL — Full Container Load",
+        "fclDescription": "You have exclusive use of an entire container (20', 40' or 40'HC). More economical from a certain volume.",
+        "comparisonTitle": "Detailed Comparison",
+        "colCriterion": "Criterion",
+        "colLcl": "LCL",
+        "colFcl": "FCL",
+        "criteria": [
+          { "criterion": "Volume", "lcl": "< 15 m³ or < 10 tonnes", "fcl": "> 15 m³ or full container" },
+          { "criterion": "Price", "lcl": "Per CBM (m³) or tonne", "fcl": "Fixed per container" },
+          { "criterion": "Security", "lcl": "Moderate (shared with others)", "fcl": "Better (dedicated container)" },
+          { "criterion": "Transit time", "lcl": "+3–7 days (groupage operations)", "fcl": "Faster (direct service possible)" },
+          { "criterion": "Damage risk", "lcl": "Higher (more handling)", "fcl": "Lower (single loading)" },
+          { "criterion": "Flexibility", "lcl": "Higher (departure even with small volumes)", "fcl": "Lower (must fill the container)" },
+          { "criterion": "Hazardous goods", "lcl": "Restricted (segregation required)", "fcl": "Easier (dedicated container)" }
+        ],
+        "lclProcessTitle": "LCL Process",
+        "lclProcess": [
+          { "step": "1", "title": "Delivery to CFS", "description": "Bring goods to the Container Freight Station for consolidation" },
+          { "step": "2", "title": "Consolidation", "description": "Freight forwarder consolidates multiple LCL shipments" },
+          { "step": "3", "title": "FCL departure", "description": "Consolidated container departs as FCL" },
+          { "step": "4", "title": "Deconsolidation", "description": "At destination CFS: container unpacking" },
+          { "step": "5", "title": "Delivery", "description": "Individual delivery of each LCL shipment to its consignee" }
+        ],
+        "chooseLclTitle": "Choose LCL if:",
+        "chooseLcl": [
+          "Volume < 15 m³",
+          "Irregular or trial shipment",
+          "Non-urgent goods",
+          "Budget-conscious with small volume",
+          "Need regular small shipments"
+        ],
+        "chooseFclTitle": "Choose FCL if:",
+        "chooseFcl": [
+          "Volume > 15 m³",
+          "Fragile or high-value goods",
+          "Hazardous goods (IMDG)",
+          "Temperature-sensitive goods (reefer)",
+          "Goods requiring confidentiality"
+        ]
+      },
+      "lettreCredit": {
+        "title": "Letter of Credit",
+        "description": "The Letter of Credit (L/C) is a bank payment guarantee used in international trade. It protects both the exporter (guaranteed payment on document compliance) and the importer (payment only on compliant delivery).",
+        "typesTitle": "Types of Letters of Credit",
+        "types": [
+          { "name": "Irrevocable L/C", "description": "Cannot be modified or cancelled without agreement of all parties. Standard under UCP 600." },
+          { "name": "Confirmed L/C", "description": "The beneficiary's bank adds its own payment guarantee. Protection against issuing bank risk." },
+          { "name": "Sight L/C", "description": "Payment upon presentation of compliant documents. Immediate payment." },
+          { "name": "Deferred L/C", "description": "Payment at a future date (30, 60, 90 days). Credit granted to the buyer." },
+          { "name": "Transferable L/C", "description": "Can be transferred to a secondary beneficiary (useful for intermediaries)." },
+          { "name": "Standby L/C", "description": "Bank guarantee, activated only in case of buyer default. Simpler than documentary credit." }
+        ],
+        "partiesTitle": "Parties Involved",
+        "colRole": "Role",
+        "parties": [
+          { "role": "Applicant (Importer)", "description": "The buyer who requests the L/C at their bank" },
+          { "role": "Issuing Bank", "description": "The importer's bank that issues the L/C" },
+          { "role": "Beneficiary (Exporter)", "description": "The seller who benefits from the L/C" },
+          { "role": "Advising Bank", "description": "The exporter's bank that advises the L/C (without guarantee)" },
+          { "role": "Confirming Bank", "description": "The exporter's bank that adds its guarantee (confirmed L/C)" }
+        ],
+        "documentsTitle": "Required Documents",
+        "documents": [
+          { "name": "Bill of Lading", "description": "Original B/L 'clean on board', marked 'freight prepaid' (or 'collect' depending on incoterm)" },
+          { "name": "Commercial Invoice", "description": "In exact conformity with the L/C — amounts, currencies, description" },
+          { "name": "Packing List", "description": "Consistent with invoice and B/L" },
+          { "name": "Insurance Certificate", "description": "Required if CIF or CIP — amounts and coverage per L/C" },
+          { "name": "Certificate of Origin", "description": "If required by the L/C — form EUR.1, Form A, or chamber of commerce" },
+          { "name": "Inspection Certificate", "description": "SGS or other if required by the buyer" },
+          { "name": "Phytosanitary Certificate", "description": "For plants, wood, agricultural products" }
+        ],
+        "errorsTitle": "Common Errors (Discrepancies)",
+        "errors": [
+          "Description of goods not identical to L/C",
+          "Invoice amount exceeds the L/C amount",
+          "Shipping documents presented after deadline",
+          "Port of loading or destination different from L/C",
+          "Missing document or incomplete set",
+          "B/L not marked 'clean on board'",
+          "Missing or incorrect insurance amount"
+        ],
+        "ucp600Title": "UCP 600 — Governing Rules",
+        "ucp600Content": "The Uniform Customs and Practice for Documentary Credits, published by the ICC (2007 revision). Defines standards for examination of documents (5 banking days), the concept of strict compliance, and the roles of banks.",
+        "datesTitle": "Key Dates",
+        "datesItems": [
+          { "label": "Shipment deadline", "description": "Latest date for shipment (on board date on B/L)" },
+          { "label": "Presentation deadline", "description": "Number of days after shipment to present documents (typically 21 days)" },
+          { "label": "L/C expiry", "description": "Final deadline for all document presentation" }
+        ],
+        "costsTitle": "Costs",
+        "costsItems": [
+          { "label": "Issuance commission", "description": "0.1–0.3% of L/C amount (importer's bank)" },
+          { "label": "Confirmation commission", "description": "0.2–0.5% per quarter (confirming bank)" },
+          { "label": "Amendment fee", "description": "Fixed fee per amendment" },
+          { "label": "Discrepancy fee", "description": "Fixed fee in case of document discrepancy" }
+        ]
+      },
+      "portsRoutes": {
+        "title": "Ports and Maritime Routes",
+        "description": "Maritime trade is organized around major global routes connecting production zones and consumption markets. Understanding these routes and strategic passages is essential for optimizing shipping costs and transit times.",
+        "majorRoutesTitle": "Major Maritime Routes",
+        "colVia": "Via",
+        "colTransit": "Transit time",
+        "colPorts": "Key ports",
+        "routes": [
+          { "name": "Asia — Europe", "description": "World's busiest route in terms of volume", "via": "Suez Canal", "transitTime": "20–35 days", "majorPorts": ["Shanghai", "Singapore", "Rotterdam", "Hamburg", "Le Havre"] },
+          { "name": "Asia — North America (West)", "description": "Trans-Pacific — growth driven by US-China trade", "via": "Direct Pacific", "transitTime": "12–18 days", "majorPorts": ["Shanghai", "Ningbo", "Los Angeles", "Long Beach", "Seattle"] },
+          { "name": "Asia — North America (East)", "description": "Via Panama or Suez Canal for large vessels", "via": "Suez or Panama", "transitTime": "28–45 days", "majorPorts": ["Shanghai", "Singapore", "New York", "Savannah", "Houston"] },
+          { "name": "Europe — North America", "description": "Trans-Atlantic — major trade route", "via": "Direct Atlantic", "transitTime": "10–16 days", "majorPorts": ["Rotterdam", "Antwerp", "Hamburg", "New York", "Baltimore"] }
+        ],
+        "passagesTitle": "Strategic Passages",
+        "colLength": "Length",
+        "colTraffic": "Traffic",
+        "passages": [
+          { "name": "Suez Canal", "location": "Egypt", "length": "193 km", "description": "Key passage between Mediterranean and Red Sea. Closure causes 15–20 extra days via Cape of Good Hope.", "keyStat": "~12% of world trade" },
+          { "name": "Panama Canal", "location": "Panama", "length": "82 km", "description": "Connects Atlantic and Pacific. New locks (2016) allow Neopanamax vessels (366m).", "keyStat": "~5% of world trade" },
+          { "name": "Strait of Malacca", "location": "Malaysia / Indonesia", "length": "900 km", "description": "World's busiest strait. 80% of Asian energy supply passes through it.", "keyStat": "~25% of world trade" },
+          { "name": "Strait of Hormuz", "location": "Iran / Oman", "length": "54 km", "description": "Gateway for 20% of world oil trade. Strategic geopolitical importance.", "keyStat": "20% of oil" }
+        ],
+        "portsTitle": "Major World Ports (TEU)",
+        "colRank": "Rank",
+        "colPort": "Port",
+        "colCountry": "Country",
+        "colTeu": "TEU / year",
+        "ports": [
+          { "rank": 1, "port": "Shanghai", "country": "China", "teu": "47M" },
+          { "rank": 2, "port": "Singapore", "country": "Singapore", "teu": "37M" },
+          { "rank": 3, "port": "Ningbo-Zhoushan", "country": "China", "teu": "33M" },
+          { "rank": 4, "port": "Shenzhen", "country": "China", "teu": "29M" },
+          { "rank": 5, "port": "Guangzhou", "country": "China", "teu": "24M" },
+          { "rank": 6, "port": "Qingdao", "country": "China", "teu": "24M" },
+          { "rank": 7, "port": "Busan", "country": "South Korea", "teu": "22M" },
+          { "rank": 8, "port": "Tianjin", "country": "China", "teu": "21M" },
+          { "rank": 9, "port": "Dubai (Jebel Ali)", "country": "UAE", "teu": "15M" },
+          { "rank": 10, "port": "Rotterdam", "country": "Netherlands", "teu": "15M" }
+        ],
+        "hubGatewayTitle": "Hub vs Gateway",
+        "hubTitle": "Hub Port",
+        "hubDescription": "Transshipment port — large vessels call here and goods are redistributed to smaller vessels (feeder). Examples: Singapore, Dubai, Algeciras.",
+        "gatewayTitle": "Gateway Port",
+        "gatewayDescription": "Port serving a domestic hinterland — direct port for import/export of a country or region. Examples: Le Havre (France), Rotterdam (North Europe)."
+      },
+      "vgm": {
+        "title": "VGM (Verified Gross Mass)",
+        "description": "Since July 1, 2016, the SOLAS Convention (Safety of Life at Sea) requires that the verified weight of every container be transmitted before loading. This obligation aims to prevent accidents caused by misdeclared containers.",
+        "whyTitle": "Why VGM?",
+        "why": [
+          { "title": "Safety", "description": "Misdeclared containers cause serious accidents (falling containers, unstable ships)." },
+          { "title": "Ship stability", "description": "The captain must know the exact weight to calculate the stowage plan." },
+          { "title": "Port equipment", "description": "Cranes and gantries are rated for maximum loads." },
+          { "title": "Land transport", "description": "Prevents overloads on trucks and wagons for pre/post-carriage." }
+        ],
+        "componentsTitle": "VGM Components",
+        "formula": "VGM = Tare + Cargo + Packaging + Securing material",
+        "elements": [
+          { "element": "Container tare", "description": "Empty weight of the container (shown on the door)", "example": "2,200 kg (20')" },
+          { "element": "Cargo", "description": "Gross weight of all goods", "example": "Variable" },
+          { "element": "Packaging", "description": "Pallets, cartons, plastic film...", "example": "200–500 kg" },
+          { "element": "Securing material", "description": "Dunnage, strapping, airbags...", "example": "50–200 kg" }
+        ],
+        "methodsTitle": "Determination Methods",
+        "processLabel": "Process",
+        "advantagesLabel": "Advantages",
+        "disadvantagesLabel": "Disadvantages",
+        "methods": [
+          {
+            "method": "Method 1",
+            "name": "Weighing the complete container",
+            "description": "Weighing of the loaded and sealed container on a certified scale.",
+            "process": ["Loading the container", "Sealing the container", "Weighing on a certified weighbridge", "Transmitting the VGM"],
+            "advantages": ["More accurate", "Fewer calculations"],
+            "disadvantages": ["Requires a weighbridge", "Container already sealed"]
+          },
+          {
+            "method": "Method 2",
+            "name": "Calculation by addition",
+            "description": "Addition of container tare and the weight of all loaded items.",
+            "process": ["Weighing each package individually", "Adding all weights", "Adding securing material", "Adding container tare"],
+            "advantages": ["No weighbridge needed", "Can be done progressively"],
+            "disadvantages": ["More complex", "Risk of cumulative error"]
+          }
+        ],
+        "responsibilityTitle": "Responsibilities",
+        "responsibilities": [
+          { "role": "Shipper", "description": "Legal owner of the VGM. Must obtain, certify and transmit the verified weight." },
+          { "role": "Freight Forwarder", "description": "Can transmit the VGM on behalf of the shipper. Remains an intermediary." },
+          { "role": "Shipping Line", "description": "Cannot load a container without a VGM. Can reject a clearly erroneous VGM." }
+        ],
+        "tolerancesTitle": "Tolerances",
+        "toleranceLabel": "Typical tolerance",
+        "toleranceValue": "± 5% of declared weight or ± 500 kg (the lesser)",
+        "consequenceLabel": "Consequence if exceeded",
+        "consequenceValue": "Re-weighing at shipper's expense, possible delay",
+        "sanctionsTitle": "Sanctions by Region",
+        "sanctions": [
+          { "region": "France", "sanction": "Fine up to €7,500 and refusal to load" },
+          { "region": "USA", "sanction": "Refusal to load, fine from coast guard" },
+          { "region": "China", "sanction": "Refusal to load, port penalties" },
+          { "region": "European Union", "sanction": "Variable application by member state" }
+        ],
+        "tipsTitle": "Best Practices",
+        "tips": [
+          "Submit VGM at least 24–48h before cut-off",
+          "Use calibrated and certified scales",
+          "Keep weighing records for at least 3 years",
+          "Check specific requirements of each shipping line",
+          "Train staff in VGM procedures",
+          "Never deliberately understate the weight"
+        ]
+      },
+      "transitTime": {
+        "title": "Transit Time and Delays",
+        "description": "Delay management is crucial in maritime transport. Understanding the different stages, cut-off dates and late fees helps optimize the supply chain and avoid extra costs.",
+        "keyTermsTitle": "Key Terms",
+        "etd": "Estimated Time of Departure — estimated departure",
+        "eta": "Estimated Time of Arrival — estimated arrival",
+        "cutoff": "Deadline for cargo/documents drop-off",
+        "freeTime": "Free days before late charges apply",
+        "timelineTitle": "FCL Shipment Timeline",
+        "responsibleLabel": "Responsible",
+        "timeline": [
+          { "step": "Booking", "description": "Reserving space on the vessel", "delay": "1–7 days before cut-off", "responsible": "Freight forwarder / Exporter" },
+          { "step": "Container pickup", "description": "Collecting the empty container from the depot", "delay": "2–5 days before cut-off", "responsible": "Land carrier" },
+          { "step": "Stuffing", "description": "Loading goods into the container", "delay": "1–3 days before cut-off", "responsible": "Exporter" },
+          { "step": "Documentation cut-off", "description": "Deadline to submit documents (B/L, VGM)", "delay": "24–48h before ETD", "responsible": "Freight forwarder" },
+          { "step": "Cargo cut-off", "description": "Deadline to deliver container to terminal", "delay": "24–48h before ETD", "responsible": "Land carrier" },
+          { "step": "ETD (Estimated Time of Departure)", "description": "Estimated vessel departure from origin port", "delay": "Day 0", "responsible": "Shipping line" },
+          { "step": "Sea transit", "description": "Sea crossing (varies by route)", "delay": "10–45 days", "responsible": "Shipping line" },
+          { "step": "ETA (Estimated Time of Arrival)", "description": "Estimated arrival at destination port", "delay": "Day 0 + transit", "responsible": "Shipping line" },
+          { "step": "Unloading", "description": "Vessel unloading and quayside placement", "delay": "1–3 days after ETA", "responsible": "Port terminal" },
+          { "step": "Customs clearance", "description": "Customs formalities at destination", "delay": "1–5 days", "responsible": "Customs broker" },
+          { "step": "Delivery", "description": "Final delivery to consignee", "delay": "1–5 days", "responsible": "Land carrier" }
+        ],
+        "transitTimesTitle": "Indicative Transit Times",
+        "colRoute": "Route",
+        "colTime": "Transit Time",
+        "colVia": "Via",
+        "transitTimes": [
+          { "route": "Shanghai → Rotterdam", "time": "28–32 days", "via": "Suez" },
+          { "route": "Shanghai → Le Havre", "time": "30–35 days", "via": "Suez" },
+          { "route": "Shanghai → Los Angeles", "time": "12–15 days", "via": "Direct Pacific" },
+          { "route": "Shanghai → New York", "time": "35–40 days", "via": "Suez or Panama" },
+          { "route": "Rotterdam → New York", "time": "10–14 days", "via": "Direct Atlantic" },
+          { "route": "Mumbai → Rotterdam", "time": "18–22 days", "via": "Suez" },
+          { "route": "Santos → Rotterdam", "time": "18–22 days", "via": "Direct Atlantic" }
+        ],
+        "transitNote": "Note: These times are indicative and vary depending on rotations, transshipments and conditions.",
+        "freeTimeTitle": "Free Time (Free Days)",
+        "freeTimeDescription": "Period during which the container can remain at the terminal or at the importer's without additional charges.",
+        "freeTimeStandard": "Standard free time",
+        "freeTimeValue": "7–14 days",
+        "freeTimeNote": "Depending on carrier and port",
+        "demurrageStart": "Demurrage start",
+        "demurrageStartDesc": "Begins after free time at the terminal",
+        "detentionStart": "Detention start",
+        "detentionStartDesc": "Begins when the container leaves the terminal (gate-out)",
+        "lateFeesTitle": "Late Fees",
+        "colRate": "Indicative rate",
+        "colLocation": "Location",
+        "lateFees": [
+          { "name": "Demurrage", "definition": "Charges for container remaining at terminal beyond free time", "rate": "50–150 USD/day/container", "location": "Port terminal" },
+          { "name": "Detention", "definition": "Charges for container kept outside terminal beyond free time", "rate": "30–100 USD/day/container", "location": "At importer's" },
+          { "name": "Storage", "definition": "Terminal storage charges (separate from demurrage)", "rate": "Variable by port", "location": "Port terminal" },
+          { "name": "Per Diem", "definition": "Combined daily charges (sometimes used for demurrage+detention)", "rate": "50–200 USD/day", "location": "Variable" }
+        ],
+        "delayFactorsTitle": "Factors Affecting Delays",
+        "potentialDelaysTitle": "Potential delays",
+        "potentialDelays": [
+          "Port congestion (Los Angeles, Rotterdam)",
+          "Weather conditions (typhoons, storms)",
+          "Canal closures (Suez, Panama)",
+          "Customs inspection (scanner, checks)",
+          "Blank sailings (cancelled rotations)",
+          "Strikes (dockers, carriers)"
+        ],
+        "seasonalVariationsTitle": "Seasonal variations",
+        "seasonalVariations": [
+          "Chinese New Year (February): +2–3 weeks",
+          "Golden Week (October): Asia congestion",
+          "Peak Season (August–October): surcharges, delays",
+          "Year-end holidays: Christmas rush"
+        ],
+        "rolloverTitle": "Roll-over",
+        "rolloverDescription": "Situation where a container is not loaded on the scheduled vessel and is rolled over to the next departure.",
+        "rolloverCausesTitle": "Common causes:",
+        "rolloverCauses": [
+          "Full vessel (overbooking)",
+          "Container arrived after cargo cut-off",
+          "Missing or incorrect documents",
+          "VGM not transmitted on time",
+          "Issue with goods (DG, inspection)"
+        ],
+        "rolloverImpact": "Impact: Generally +7 days delay (weekly service)",
+        "tipsTitle": "Tips to Optimize Delays",
+        "tips": [
+          "Book early, especially in peak season (2–3 weeks ahead)",
+          "Respect cut-offs with a safety buffer (minimum 24h)",
+          "Prepare documents in parallel with stuffing",
+          "Negotiate extra free time for large volumes",
+          "Actively track vessels (AIS, carrier portals)",
+          "Prepare customs clearance in advance (pre-clearance if possible)",
+          "Have a backup plan in case of roll-over (alternative service)",
+          "Avoid critical shipments during high-risk periods"
+        ]
+      }
+    }
+  },
+  "components": {
+    "notificationDropdown": {
+      "ariaLabel": "Notifications",
+      "header": "Notifications",
+      "markAllRead": "Mark all as read",
+      "loading": "Loading notifications…",
+      "empty": "No new notifications",
+      "viewAll": "View all notifications",
+      "time": {
+        "now": "Just now",
+        "minutes": "{minutes} min ago",
+        "hours": "{hours} h ago",
+        "days": "{days} d ago"
+      }
+    },
+    "notificationPanel": {
+      "title": "Notifications",
+      "totalCount": "{count, plural, one {# notification total} other {# notifications total}}",
+      "closeAria": "Close panel",
+      "filters": {
+        "all": "All",
+        "unread": "Unread",
+        "read": "Read"
+      },
+      "markAllRead": "Mark all as read",
+      "loading": "Loading notifications…",
+      "emptyTitle": "No notifications",
+      "emptyUnread": "You're all caught up!",
+      "emptyAll": "Nothing to show",
+      "deleteConfirm": "Are you sure you want to delete this notification?",
+      "deleteTitle": "Delete notification",
+      "viewDetails": "View details →",
+      "pagination": {
+        "page": "Page {current} of {total}",
+        "previous": "Previous",
+        "next": "Next"
+      }
+    },
+    "exportButton": {
+      "label": "Export",
+      "exporting": "Exporting…",
+      "lockedTooltip": "Upgrade to the Silver plan to export your data",
+      "csvTitle": "Export CSV",
+      "csvSubtitle": "Compatible with Excel, Google Sheets",
+      "excelTitle": "Export Excel",
+      "excelSubtitle": "Native .xls format",
+      "rowsToExport": "{count, plural, one {# row to export} other {# rows to export}}",
+      "errorCsv": "CSV export failed",
+      "errorExcel": "Excel export failed",
+      "boolean": {
+        "true": "Yes",
+        "false": "No"
+      }
+    },
+    "adminPanelDropdown": {
+      "trigger": "Administration",
+      "items": {
+        "users": "Users",
+        "usersDesc": "Manage users and permissions",
+        "organizations": "Organizations",
+        "organizationsDesc": "Manage organizations and companies",
+        "bookings": "Bookings",
+        "bookingsDesc": "View and manage all bookings",
+        "documents": "Documents",
+        "documentsDesc": "Manage organization documents",
+        "csvRates": "CSV rates",
+        "csvRatesDesc": "Import and manage CSV rates",
+        "logs": "System logs",
+        "logsDesc": "View and download application logs"
+      }
+    },
+    "csvUpload": {
+      "title": "Upload CSV rates",
+      "description": "Upload a CSV file containing maritime shipping rates for a company. Maximum size: 10 MB. Required format: .csv",
+      "fileTypeError": "Only CSV (.csv) files are accepted",
+      "fileSizeError": "The file must not exceed 10 MB",
+      "fillAllFields": "Please fill in every field",
+      "successMessage": "✅ Success! {count} rates uploaded for {companyName}",
+      "uploadError": "CSV upload failed",
+      "form": {
+        "companyName": "Company name",
+        "companyNamePlaceholder": "Ex: SSC Consolidation",
+        "companyNameHint": "Exact name of the maritime company (must match the CSV data)",
+        "companyEmail": "Company email",
+        "companyEmailPlaceholder": "Ex: bookings@sscconsolidation.com",
+        "companyEmailHint": "Email used for booking requests sent to this company",
+        "fileLabel": "CSV file",
+        "fileSelected": "Selected file:",
+        "formatTitle": "Required CSV format",
+        "formatIntro": "The CSV file must contain the following columns:",
+        "errorTitle": "Error",
+        "successTitle": "Success",
+        "submit": "Upload CSV",
+        "submitting": "Uploading…",
+        "reset": "Reset"
+      }
+    },
+    "cookieConsent": {
+      "openAria": "Open cookie settings",
+      "banner": {
+        "title": "We use cookies",
+        "body": "We use cookies to improve your experience, analyze site traffic, and personalize content. By clicking \"Accept all\", you agree to our use of cookies.",
+        "learnMore": "Learn more",
+        "customize": "Customize",
+        "essentialOnly": "Essential only",
+        "acceptAll": "Accept all"
+      },
+      "settings": {
+        "title": "Cookie preferences",
+        "closeAria": "Close settings",
+        "save": "Save my preferences",
+        "acceptAll": "Accept all",
+        "footer": "You can change your preferences any time in your account settings or by clicking the cookie icon at the bottom left.",
+        "policyLink": "Cookie policy",
+        "essential": {
+          "title": "Essential cookies",
+          "alwaysOn": "Always on",
+          "body": "Required for the site to work. They cannot be disabled."
+        },
+        "functional": {
+          "title": "Functional cookies",
+          "body": "Allow the site to remember your preferences and settings (language, region)."
+        },
+        "analytics": {
+          "title": "Analytics cookies",
+          "body": "Help us understand how visitors interact with the site (Google Analytics, Sentry)."
+        },
+        "marketing": {
+          "title": "Marketing cookies",
+          "body": "Used to display personalized ads and measure campaign effectiveness."
+        }
+      }
+    },
+    "bookingsTable": {
+      "headers": {
+        "bookingNumber": "Booking #",
+        "status": "Status",
+        "carrier": "Carrier",
+        "origin": "Origin",
+        "destination": "Destination",
+        "shipper": "Shipper",
+        "consignee": "Consignee",
+        "etd": "ETD",
+        "eta": "ETA",
+        "containers": "Containers",
+        "created": "Created"
+      }
+    },
+    "bookingFilters": {
+      "title": "Filters",
+      "showMore": "Show more",
+      "showLess": "Show less",
+      "reset": "Reset all",
+      "search": "Search",
+      "searchPlaceholder": "Booking number, shipper, consignee…",
+      "carrier": "Carrier",
+      "carrierPlaceholder": "Carrier name or SCAC",
+      "originPort": "Origin port",
+      "destinationPort": "Destination port",
+      "portCodePlaceholder": "Port code",
+      "shipper": "Shipper",
+      "shipperPlaceholder": "Shipper name",
+      "consignee": "Consignee",
+      "consigneePlaceholder": "Consignee name",
+      "createdFrom": "Created from",
+      "createdTo": "Created to",
+      "etdFrom": "ETD from",
+      "etdTo": "ETD to",
+      "status": "Status",
+      "sortBy": "Sort by",
+      "sortOptions": {
+        "createdAt": "Created date",
+        "bookingNumber": "Booking number",
+        "status": "Status",
+        "etd": "ETD",
+        "eta": "ETA"
+      },
+      "activeCount": "{count, plural, one {# active filter} other {# active filters}}"
+    },
+    "bulkActions": {
+      "selectedCount": "{count, plural, one {# booking selected} other {# bookings selected}}",
+      "clearSelection": "Clear selection",
+      "exportSelected": "Export selected",
+      "exporting": "Exporting…",
+      "exportCsv": "Export as CSV",
+      "exportExcel": "Export as Excel",
+      "exportJson": "Export as JSON",
+      "exportFailed": "Export failed: {message}",
+      "bulkUpdate": "Bulk update",
+      "bulkUpdateSoon": "Bulk update is coming soon!"
+    }
+  },
+  "carrierPortal": {
+    "common": {
+      "tokenMissing": "Missing token",
+      "bookingNotFound": "Booking not found. The link may have expired.",
+      "bookingAlreadyAccepted": "This booking has already been accepted.",
+      "bookingAlreadyRejected": "This booking has already been rejected.",
+      "errorTitle": "Error",
+      "backHome": "Back to home",
+      "redirecting": "Redirecting to the homepage in {countdown, plural, one {# second} other {# seconds}}…"
+    },
+    "accept": {
+      "loadingTitle": "Processing…",
+      "loadingMessage": "We are processing your acceptance.",
+      "errorFallback": "Error while accepting the booking",
+      "errorGeneric": "Error during acceptance",
+      "thanksTitle": "Thank you!",
+      "successHeadline": "✅ Your acceptance has been recorded",
+      "successBody": "Thank you for accepting this transport request."
+    },
+    "reject": {
+      "loadingTitle": "Processing…",
+      "loadingMessage": "We are processing your rejection.",
+      "errorFallback": "Error while rejecting the booking",
+      "errorGeneric": "Error during rejection",
+      "thanksTitle": "Thank you for your response",
+      "successHeadline": "✓ Your rejection has been recorded",
+      "successBody": "We have noted your decision regarding this transport request."
+    },
+    "documents": {
+      "loading": "Loading…",
+      "loadingHint": "Please wait",
+      "errorTitle": "Error",
+      "retry": "Retry",
+      "linkInvalid": "Invalid link",
+      "loadError": "Error while loading",
+      "loadDocsError": "Error while loading the documents",
+      "bookingNotFound": "Booking not found. Please check that the link is correct.",
+      "notAcceptedYet": "This booking has not been accepted yet. Documents will be available after acceptance.",
+      "verifyError": "Error while verifying",
+      "passwordIncorrect": "Incorrect password. Check your email to find the password.",
+      "passwordMissing": "Please enter the password",
+      "downloadError": "Error during download. Please try again.",
+      "password": {
+        "title": "Secure access",
+        "intro": "This page is protected. Enter the password received by email to access the documents.",
+        "bookingLabel": "Booking:",
+        "passwordLabel": "Password",
+        "passwordPlaceholder": "Ex: A3B7K9",
+        "submit": "Access documents",
+        "verifying": "Verifying…",
+        "helpTitle": "Where to find the password?",
+        "helpBody": "The password was sent to you in the booking confirmation email. It corresponds to the last 6 characters of the quote number."
+      },
+      "header": {
+        "refresh": "Refresh"
+      },
+      "summary": {
+        "bookingNumberPrefix": "No.",
+        "volume": "Volume",
+        "weight": "Weight",
+        "transit": "Transit",
+        "transitDays": "{count, plural, one {# day} other {# days}}",
+        "type": "Type",
+        "carrierLabel": "Carrier:",
+        "refLabel": "Ref:"
+      },
+      "list": {
+        "heading": "Documents ({count})",
+        "empty": "No documents available at the moment.",
+        "emptyHint": "Documents will appear here once added.",
+        "download": "Download"
+      },
+      "footerNote": "This page always shows the most recent documents for the booking.",
+      "footer": "© {year} Xpeditis - Maritime freight platform",
+      "documentTypes": {
+        "BILL_OF_LADING": "Bill of Lading",
+        "PACKING_LIST": "Packing List",
+        "COMMERCIAL_INVOICE": "Commercial Invoice",
+        "CERTIFICATE_OF_ORIGIN": "Certificate of Origin",
+        "OTHER": "Other document"
+      }
+    }
+  },
+  "bookingPortal": {
+    "common": {
+      "supportPrompt": "For any question, contact us at",
+      "contactSupport": "Contact support"
+    },
+    "confirm": {
+      "loading": "Confirmation in progress…",
+      "errorTitle": "Confirmation error",
+      "errorGeneric": "An error occurred while accepting the request",
+      "tokenInvalid": "Invalid confirmation token",
+      "errorReasonsTitle": "Possible reasons:",
+      "errorReason1": "The link has expired",
+      "errorReason2": "The request has already been accepted or rejected",
+      "errorReason3": "The confirmation token is invalid",
+      "errorContact": "If you believe this is a mistake, please contact the customer directly.",
+      "successTitle": "Request accepted!",
+      "successHeadline": "Thank you for accepting this transport request.",
+      "successBody": "The customer has been notified by email.",
+      "summaryTitle": "Booking summary",
+      "labels": {
+        "bookingId": "Booking ID",
+        "route": "Route",
+        "volume": "Volume",
+        "weight": "Weight",
+        "pallets": "Pallets",
+        "containerType": "Container type",
+        "transitDays": "Transit time",
+        "price": "Price",
+        "notes": "Notes:",
+        "documents": "Provided documents",
+        "download": "Download"
+      },
+      "transitDaysValue": "{count, plural, one {# day} other {# days}}",
+      "nextStepsTitle": "Next steps",
+      "nextStep1": "The customer will finalise the container details",
+      "nextStep2": "You will receive an email with the required documents",
+      "nextStep3": "Payment will be processed under your usual terms"
+    },
+    "reject": {
+      "loading": "Loading…",
+      "errorTitle": "Rejection error",
+      "errorGeneric": "An error occurred while rejecting the request",
+      "tokenInvalid": "Invalid rejection token",
+      "errorReasonsTitle": "Possible reasons:",
+      "errorReason1": "The link has expired",
+      "errorReason2": "The request has already been accepted or rejected",
+      "errorReason3": "The token is invalid",
+      "errorContact": "If you believe this is a mistake, please contact the customer directly.",
+      "rejectedTitle": "Request rejected",
+      "rejectedHeadline": "You have rejected this transport request.",
+      "rejectedBody": "The customer has been notified by email.",
+      "summaryTitle": "Rejected request summary",
+      "labels": {
+        "bookingId": "Booking ID",
+        "route": "Route",
+        "volume": "Volume",
+        "weight": "Weight",
+        "proposedPrice": "Proposed price",
+        "rejectionReason": "Rejection reason:"
+      },
+      "infoTitle": "Information",
+      "infoBody": "The customer can submit a new request with different conditions if needed.",
+      "formTitle": "Reject this request",
+      "formIntro": "You are about to reject this transport request.",
+      "addReason": "Add a reason (optional)",
+      "reasonLabel": "Rejection reason (optional)",
+      "reasonPlaceholder": "E.g. Price too high, deadlines too short, route unavailable…",
+      "reasonHint": "This information will be shared with the customer",
+      "warningTitle": "Warning:",
+      "warningBody": "This action is irreversible. The customer will be immediately notified by email of your rejection.",
+      "submitting": "Rejection in progress…",
+      "submit": "Confirm rejection",
+      "helpText": "If you have questions before rejecting, contact us by email."
+    }
+  },
+  "marketing": {
+    "pricing": {
+      "header": {
+        "login": "Sign in",
+        "register": "Sign up"
+      },
+      "hero": {
+        "title": "Simple, transparent pricing",
+        "subtitle": "Pick the plan that fits your maritime transport activity. Start free, scale as you grow.",
+        "monthly": "Monthly",
+        "yearly": "Yearly",
+        "yearlyBadge": "1 month free"
+      },
+      "popular": "Popular",
+      "currency": {
+        "onQuote": "Custom quote",
+        "free": "Free",
+        "perMonth": "/month",
+        "yearlyPrice": "{price}/year (11 months)"
+      },
+      "stats": {
+        "users": "Users",
+        "shipments": "Shipments",
+        "commission": "Commission",
+        "support": "Support"
+      },
+      "features": {
+        "rates": "Rate search",
+        "bookings": "Bookings",
+        "dashboard": "Dashboard",
+        "wiki": "Maritime Wiki",
+        "userManagement": "User management",
+        "csvImport": "CSV import",
+        "apiAccess": "API access",
+        "customUI": "Custom interface",
+        "dedicatedKam": "Dedicated KAM"
+      },
+      "values": {
+        "unlimited": "Unlimited",
+        "shipmentsPerYear": "12/year",
+        "shipmentsUnlimited": "Unlimited",
+        "supportNone": "None",
+        "supportEmail": "Email",
+        "supportDirect": "Direct",
+        "supportKam": "Dedicated KAM"
+      },
+      "plans": {
+        "bronze": {
+          "name": "Bronze",
+          "description": "To get started and try the platform",
+          "cta": "Start free"
+        },
+        "silver": {
+          "name": "Silver",
+          "description": "For growing teams",
+          "cta": "Choose Silver"
+        },
+        "gold": {
+          "name": "Gold",
+          "description": "For established companies",
+          "cta": "Choose Gold"
+        },
+        "platinium": {
+          "name": "Platinium",
+          "description": "Tailored solutions",
+          "cta": "Contact us"
+        }
+      },
+      "footer": "All prices are in euros excl. tax. Yearly billing = 11 months."
+    },
+    "common": {
+      "lastUpdated": "Last updated: January 2025"
+    },
+    "privacy": {
+      "badge": "Data protection",
+      "title1": "Privacy",
+      "title2": "Policy",
+      "intro": "At Xpeditis, protecting your personal data is a top priority. This policy explains how we collect, use, and protect your information.",
+      "sections": {
+        "data": {
+          "title": "1. Data we collect",
+          "content": "We collect the following data:\n\n• **Identification data**: first name, last name, business email address, phone number\n• **Business data**: company name, role, business registration number\n• **Connection data**: IP address, login records, browsing data\n• **Transaction data**: booking history, quotes, invoices\n• **Communication data**: exchanges with our customer service"
+        },
+        "use": {
+          "title": "2. Use of data",
+          "content": "Your data is used to:\n\n• Provide and improve our maritime freight booking services\n• Manage your account and preferences\n• Process your quote requests and bookings\n• Send you commercial communications (with your consent)\n• Ensure the security of our platform\n• Meet our legal and regulatory obligations"
+        },
+        "protection": {
+          "title": "3. Data protection",
+          "content": "We implement robust security measures:\n\n• SSL/TLS encryption for all communications\n• Encryption of sensitive data at rest (AES-256)\n• Two-factor authentication available\n• Regular security audits\n• Continuous training of our teams\n• Hosting on ISO 27001-certified servers"
+        },
+        "rights": {
+          "title": "4. Your rights",
+          "content": "Under the GDPR, you have the following rights:\n\n• **Right of access**: get a copy of your personal data\n• **Right of rectification**: correct your inaccurate data\n• **Right of erasure**: request deletion of your data\n• **Right of portability**: receive your data in a structured format\n• **Right to object**: object to the processing of your data\n• **Right to restriction**: limit the processing of your data\n\nTo exercise these rights, contact us at: privacy@xpeditis.com"
+        },
+        "transfers": {
+          "title": "5. International transfers",
+          "content": "Your data may be transferred to non-EU countries as part of our international maritime freight services. These transfers are governed by:\n\n• Standard contractual clauses approved by the European Commission\n• Appropriate certifications (e.g. Privacy Shield for some providers)\n• Explicit consent for certain specific transfers"
+        },
+        "retention": {
+          "title": "6. Data retention",
+          "content": "We retain your data for the following durations:\n\n• **Account data**: duration of the business relationship + 3 years\n• **Transaction data**: 10 years (accounting obligations)\n• **Connection data**: 1 year\n• **Marketing data**: 3 years after the last contact\n\nAfter these periods, your data is deleted or anonymised."
+        }
+      },
+      "contact": {
+        "title": "Any questions?",
+        "body": "For any question regarding our privacy policy or your personal data, contact our Data Protection Officer."
+      }
+    },
+    "terms": {
+      "badge": "Legal framework",
+      "title1": "Terms of",
+      "title2": "Service",
+      "intro": "These terms govern your use of the Xpeditis platform. Please read them carefully before using our services.",
+      "sections": {
+        "purpose": {
+          "title": "1. Purpose and acceptance",
+          "content": "These Terms of Service (ToS) govern the use of the Xpeditis platform, accessible at www.xpeditis.com.\n\nBy accessing our platform and using our services, you accept these ToS without reservation. If you do not accept these terms, you must not use our services.\n\nXpeditis reserves the right to modify these ToS at any time. Users will be notified of any changes by email and/or notification on the platform."
+        },
+        "services": {
+          "title": "2. Description of services",
+          "content": "Xpeditis offers a B2B maritime freight booking platform that allows:\n\n• Search and comparison of maritime transport rates\n• Container booking with partner shipping companies\n• Real-time shipment tracking\n• Document management (Bill of Lading, certificates, etc.)\n• Access to an analytics dashboard\n\nXpeditis acts as a technological intermediary and does not replace maritime carriers in the performance of transport services."
+        },
+        "account": {
+          "title": "3. Registration and user account",
+          "content": "**Registration conditions**\nRegistration is reserved for transport and logistics professionals (freight forwarders, brokers, etc.). The user must provide accurate and complete information.\n\n**Account responsibility**\nThe user is responsible for the confidentiality of their credentials and all activities carried out under their account. They undertake to immediately notify Xpeditis in case of unauthorised use.\n\n**Suspension and termination**\nXpeditis may suspend or terminate an account in case of breach of the ToS, fraudulent activity, or non-payment."
+        },
+        "pricing": {
+          "title": "4. Pricing and payment",
+          "content": "**Displayed rates**\nThe rates displayed on the platform are indicative and may vary depending on availability and market conditions. The final rate is confirmed when the booking is validated.\n\n**Payment terms**\nPayments are made by bank transfer or credit card. Invoices are payable under the agreed conditions (usually 30 days).\n\n**Additional fees**\nAdditional fees may apply (fuel surcharges, port fees, etc.). These fees are clearly indicated before validation."
+        },
+        "liability": {
+          "title": "5. Liability",
+          "content": "**Limitation of liability**\nXpeditis acts as a technological intermediary. Liability for transport rests with the maritime companies under their general terms and applicable international conventions.\n\n**Force majeure**\nXpeditis cannot be held responsible for delays or cancellations due to force majeure (weather, strikes, pandemics, etc.).\n\n**Platform availability**\nXpeditis strives to keep the platform available 24/7. However, interruptions may occur for maintenance or technical reasons."
+        },
+        "ip": {
+          "title": "6. Intellectual property",
+          "content": "All elements of the Xpeditis platform (logo, design, texts, software, databases) are protected by intellectual property rights.\n\nThe user undertakes to:\n• Not reproduce, modify, or distribute the platform's content\n• Not use the data for competitive purposes\n• Not attempt to disassemble or decompile the software\n• Respect the trademarks and logos of Xpeditis and its partners"
+        },
+        "law": {
+          "title": "7. Applicable law and disputes",
+          "content": "**Applicable law**\nThese ToS are governed by French law.\n\n**Dispute resolution**\nIn case of dispute, the parties undertake to seek an amicable solution. Failing this, the courts of Paris shall have exclusive jurisdiction.\n\n**Mediation**\nIn accordance with the provisions of the French Consumer Code, the user may use, free of charge, the mediation service to which Xpeditis is a member."
+        }
+      },
+      "contact": {
+        "title": "Need clarification?",
+        "body": "For any question regarding our terms of service, our legal team is at your disposal."
+      }
+    },
+    "cookies": {
+      "badge": "Transparency",
+      "title1": "Cookies",
+      "title2": "Policy",
+      "intro": "Discover how we use cookies to improve your experience on Xpeditis and how you can manage your preferences.",
+      "introBoxTitle": "What is a cookie?",
+      "introBoxBody1": "A cookie is a small text file stored on your device (computer, tablet, smartphone) when you visit a website. Cookies allow the site to remember your actions and preferences over a period of time.",
+      "introBoxBody2": "Cookies do not contain personally identifiable information and cannot access data stored on your device.",
+      "typesTitle": "Types of cookies used",
+      "typesSubtitle": "We use different types of cookies on our platform",
+      "required": "Required",
+      "optional": "Optional",
+      "tableHeaders": {
+        "name": "Name",
+        "purpose": "Purpose",
+        "duration": "Duration"
+      },
+      "types": {
+        "essential": {
+          "title": "Essential cookies",
+          "description": "Required for the site to function"
+        },
+        "analytics": {
+          "title": "Analytics cookies",
+          "description": "Help us improve our platform"
+        },
+        "marketing": {
+          "title": "Marketing cookies",
+          "description": "Allow us to personalise advertising"
+        },
+        "functional": {
+          "title": "Functional cookies",
+          "description": "Improve your user experience"
+        }
+      },
+      "purposes": {
+        "session_id": "Maintains your login session",
+        "csrf_token": "Protects against CSRF attacks",
+        "cookie_consent": "Stores your cookie preferences",
+        "_ga": "Google Analytics — visitor identification",
+        "_gid": "Google Analytics — session identification",
+        "_gat": "Google Analytics — request rate limiting",
+        "_fbp": "Facebook Pixel — conversion tracking",
+        "li_fat_id": "LinkedIn Insight — marketing attribution",
+        "hubspotutk": "HubSpot — visitor identification",
+        "language": "Stores your preferred language",
+        "theme": "Stores the theme (light/dark)",
+        "recent_searches": "History of your recent searches"
+      },
+      "durations": {
+        "session": "Session",
+        "year1": "1 year",
+        "years2": "2 years",
+        "hours24": "24 hours",
+        "minute1": "1 minute",
+        "months3": "3 months",
+        "days30": "30 days",
+        "months13": "13 months"
+      },
+      "manageTitle": "How to manage your cookies?",
+      "manageIntro": "You can change your cookie preferences at any time:",
+      "manageBullet1": "Via our consent banner accessible at the bottom of each page",
+      "manageBullet2": "In your browser settings (Chrome, Firefox, Safari, Edge)",
+      "manageBullet3": "Using third-party cookie management tools",
+      "manageNote": "Note: disabling some cookies may affect your experience on our platform.",
+      "contact": {
+        "title": "Questions about cookies?",
+        "body": "Our team is available to answer all your questions regarding the use of cookies on our platform."
+      }
+    },
+    "about": {
+      "badge": "Our story",
+      "title1": "Revolutionizing maritime freight,",
+      "title2": "one booking at a time",
+      "intro": "Founded in 2021, Xpeditis was born from a simple vision: make maritime freight as simple as booking a flight. We connect freight forwarders around the world with the largest shipping lines.",
+      "mission": {
+        "title": "Our Mission",
+        "body": "Democratize access to maritime freight by offering a cutting-edge technology platform that simplifies searching, comparing and booking maritime transport for every logistics professional."
+      },
+      "vision": {
+        "title": "Our Vision",
+        "body": "Become the global benchmark for digital maritime freight by connecting every freight forwarder to every shipping line, everywhere in the world, with the transparency and efficiency international trade deserves."
+      },
+      "stats": {
+        "clients": "Active clients",
+        "carriers": "Shipping lines",
+        "countries": "Countries covered",
+        "bookings": "Bookings/year"
+      },
+      "valuesTitle": "Our Values",
+      "valuesSubtitle": "The principles that guide every decision we make",
+      "values": {
+        "excellence": {
+          "title": "Excellence",
+          "description": "We strive for excellence in every aspect of our platform, delivering a best-in-class user experience."
+        },
+        "transparency": {
+          "title": "Transparency",
+          "description": "We believe in open, honest communication with our clients, partners and employees."
+        },
+        "collaboration": {
+          "title": "Collaboration",
+          "description": "Success is built together. We work hand in hand with our clients to reach their goals."
+        },
+        "innovation": {
+          "title": "Innovation",
+          "description": "We constantly push the boundaries of technology to revolutionize maritime freight."
+        }
+      },
+      "timelineTitle": "Our Journey",
+      "timelineSubtitle": "From startup to Europe's leader in digital maritime freight",
+      "timeline": {
+        "2021": {
+          "title": "Founding",
+          "description": "Xpeditis is founded with a clear vision: simplify maritime freight for everyone."
+        },
+        "2022": {
+          "title": "First version",
+          "description": "Beta platform launch with 10 shipping line partners."
+        },
+        "2023": {
+          "title": "Series A",
+          "description": "€15M funding round to accelerate our European expansion."
+        },
+        "2024": {
+          "title": "Expansion",
+          "description": "50+ shipping lines, presence in 15 European countries."
+        },
+        "2025": {
+          "title": "European leader",
+          "description": "#1 B2B maritime freight platform in Europe with 500+ active clients."
+        }
+      },
+      "teamTitle": "Our Team",
+      "teamSubtitle": "Experts passionate about maritime and technology",
+      "team": {
+        "ceo": {
+          "role": "CEO & Co-founder",
+          "bio": "Former director at Maersk, 20 years of shipping experience"
+        },
+        "cto": {
+          "role": "CTO & Co-founder",
+          "bio": "Former Google, expert in B2B platforms and distributed systems"
+        },
+        "coo": {
+          "role": "COO",
+          "bio": "Former CMA CGM, specialist in international maritime operations"
+        },
+        "vpSales": {
+          "role": "VP Sales",
+          "bio": "15 years of sales experience in the logistics sector"
+        },
+        "vpEng": {
+          "role": "VP Engineering",
+          "bio": "Former Uber Freight, expert in real-time booking systems"
+        },
+        "vpProduct": {
+          "role": "VP Product",
+          "bio": "Former Flexport, passionate about UX and product innovation"
+        }
+      },
+      "cta": {
+        "title": "Join the Xpeditis adventure",
+        "body": "Whether you're a freight forwarder looking for a modern solution or a talent wanting to join a passionate team, we look forward to meeting you.",
+        "createAccount": "Create an account",
+        "viewCareers": "View open positions"
+      }
+    },
+    "contact": {
+      "badge": "Contact us",
+      "title1": "Have a question?",
+      "title2": "We're here to help",
+      "intro": "Our team is available to answer all your questions about our platform, our services and our pricing. Don't hesitate to get in touch!",
+      "methods": {
+        "email": {
+          "title": "Email",
+          "description": "Send us an email",
+          "value": "contact@xpeditis.com"
+        },
+        "phone": {
+          "title": "Phone",
+          "description": "Give us a call",
+          "value": "+33 1 23 45 67 89"
+        },
+        "chat": {
+          "title": "Live chat",
+          "description": "Chat with our team",
+          "value": "Available 24/7"
+        },
+        "support": {
+          "title": "Support",
+          "description": "Customer support",
+          "value": "support@xpeditis.com"
+        }
+      },
+      "form": {
+        "title": "Send us a message",
+        "description": "Fill out the form below and we'll get back to you as soon as possible.",
+        "firstName": "First name",
+        "firstNamePlaceholder": "John",
+        "lastName": "Last name",
+        "lastNamePlaceholder": "Doe",
+        "email": "Email",
+        "emailPlaceholder": "john.doe@example.com",
+        "phone": "Phone",
+        "phonePlaceholder": "+33 6 12 34 56 78",
+        "company": "Company",
+        "companyPlaceholder": "Your company",
+        "subject": "Subject",
+        "message": "Message",
+        "messagePlaceholder": "How can we help?",
+        "submit": "Send message",
+        "submitting": "Sending…",
+        "successTitle": "Message sent!",
+        "successBody": "Thanks for reaching out. Our team will reply within 24 hours.",
+        "sendAnother": "Send another message",
+        "genericError": "An error occurred while sending. Please try again."
+      },
+      "subjects": {
+        "placeholder": "Select a subject",
+        "demo": "Demo request",
+        "pricing": "Pricing questions",
+        "partnership": "Partnership",
+        "support": "Technical support",
+        "press": "Press relations",
+        "careers": "Recruitment",
+        "other": "Other"
+      },
+      "office": {
+        "title": "Our office",
+        "subtitle": "Find us in Paris or reach us by email.",
+        "hqBadge": "Headquarters",
+        "city": "Paris",
+        "address": "123 Avenue des Champs-Élysées",
+        "postalCode": "75008 Paris, France",
+        "phone": "+33 1 23 45 67 89",
+        "email": "paris@xpeditis.com"
+      },
+      "hours": {
+        "title": "Opening hours",
+        "weekdays": "Monday - Friday",
+        "weekdaysHours": "9:00 AM - 6:00 PM",
+        "saturday": "Saturday",
+        "saturdayHours": "10:00 AM - 2:00 PM",
+        "sunday": "Sunday",
+        "closed": "Closed",
+        "supportNote": "* Technical support available 24/7 for Enterprise clients"
+      },
+      "afterSubmit": {
+        "badge": "After you send",
+        "title": "What happens after you send your message?",
+        "commitmentTitle": "Our commitment",
+        "commitmentBody1": "As soon as we receive your request, one of our logistics experts reviews your profile and needs. You'll get a personalised response or a platform demo invitation ",
+        "commitmentHighlight": "within 48 business hours.",
+        "securityTitle": "Security",
+        "securityBody1": "Your information is protected and processed in accordance with our ",
+        "securityBody2": ". No data is shared with third parties without your consent.",
+        "privacyLink": "privacy policy"
+      },
+      "quickAccess": {
+        "badge": "Quick access",
+        "title": "Need an immediate answer?",
+        "pricingTitle": "Instant pricing",
+        "pricingBody1": "Don't wait for our reply to get prices. Use our ",
+        "pricingBody2": " engine to get a maritime freight quote in under 60 seconds.",
+        "pricingHighlight": "Click&Ship",
+        "pricingCta": "Go to Dashboard",
+        "wikiTitle": "Quick help",
+        "wikiBody1": "A question about Incoterms or export documentation? Our ",
+        "wikiBody2": " already has answers to the most common questions.",
+        "wikiHighlight": "Maritime Wiki",
+        "wikiCta": "Browse the Wiki"
+      }
+    },
+    "security": {
+      "badge": "Maximum security",
+      "title1": "Your security,",
+      "title2": "our priority",
+      "intro": "At Xpeditis, we implement the best security practices to protect your data and ensure the continuity of your operations.",
+      "featuresTitle": "Security measures",
+      "featuresSubtitle": "A robust infrastructure to protect your data",
+      "features": {
+        "encryption": {
+          "title": "End-to-end encryption",
+          "description": "All communications are encrypted with TLS 1.3. Your sensitive data is encrypted at rest with AES-256."
+        },
+        "auth": {
+          "title": "Secure authentication",
+          "description": "Two-factor authentication (2FA) available. Passwords hashed with Argon2id, the most robust standard."
+        },
+        "infrastructure": {
+          "title": "Certified infrastructure",
+          "description": "Hosted on AWS with ISO 27001, SOC 2 Type II certifications and GDPR compliance."
+        },
+        "monitoring": {
+          "title": "24/7 monitoring",
+          "description": "Continuous monitoring of our infrastructure. Real-time incident detection and response."
+        },
+        "audits": {
+          "title": "Regular audits",
+          "description": "Annual penetration tests by independent experts. Active bug bounty programme."
+        },
+        "continuity": {
+          "title": "Continuity plan",
+          "description": "Automatic daily backups. Regularly tested disaster recovery plan."
+        }
+      },
+      "certificationsTitle": "Certifications & Compliance",
+      "certificationsSubtitle": "Our commitments validated by independent organisations",
+      "certifications": {
+        "iso": {
+          "name": "ISO 27001",
+          "description": "Information security management system"
+        },
+        "soc2": {
+          "name": "SOC 2 Type II",
+          "description": "Security, availability and confidentiality controls"
+        },
+        "gdpr": {
+          "name": "GDPR",
+          "description": "Compliant with the General Data Protection Regulation"
+        },
+        "pcidss": {
+          "name": "PCI DSS",
+          "description": "Payment card data security standard"
+        }
+      },
+      "practicesTitle": "Our security practices",
+      "practicesSubtitle": "A proactive approach to security at every stage",
+      "practices": {
+        "secureDev": {
+          "title": "Secure development",
+          "item1": "Systematic code review",
+          "item2": "Static code analysis (SAST)",
+          "item3": "Automated security testing",
+          "item4": "Dependency management"
+        },
+        "dataProtection": {
+          "title": "Data protection",
+          "item1": "Minimisation of collected data",
+          "item2": "Data pseudonymisation",
+          "item3": "Granular access control",
+          "item4": "Access logging"
+        },
+        "incidentResponse": {
+          "title": "Incident response",
+          "item1": "Dedicated security team",
+          "item2": "Notification procedures",
+          "item3": "Post-incident analysis",
+          "item4": "Continuous improvement"
+        }
+      },
+      "report": {
+        "title": "Report a vulnerability",
+        "body": "Have you discovered a security flaw? We take platform security very seriously. Contact our security team for responsible disclosure."
+      }
+    },
+    "compliance": {
+      "badge": "European compliance",
+      "title1": "GDPR",
+      "title2": "Compliance",
+      "intro": "Xpeditis is committed to complying with the General Data Protection Regulation (GDPR) and guaranteeing your rights regarding personal data protection.",
+      "badges": {
+        "compliant": "GDPR compliant",
+        "dpo": "DPO appointed"
+      },
+      "rightsTitle": "Your GDPR rights",
+      "rightsSubtitle": "GDPR grants you enhanced rights over your personal data",
+      "rights": {
+        "access": {
+          "title": "Right of access",
+          "description": "Obtain a copy of all personal data we hold about you."
+        },
+        "rectification": {
+          "title": "Right to rectification",
+          "description": "Have your personal data corrected if it is inaccurate or incomplete."
+        },
+        "erasure": {
+          "title": "Right to erasure",
+          "description": "Request the deletion of your personal data (\"right to be forgotten\")."
+        },
+        "portability": {
+          "title": "Right to portability",
+          "description": "Receive your data in a structured, machine-readable format."
+        }
+      },
+      "rightsCta": {
+        "text": "To exercise your rights, log into your account or contact our DPO.",
+        "login": "Access my account",
+        "dpo": "Contact the DPO"
+      },
+      "principlesTitle": "Our data protection principles",
+      "principlesSubtitle": "Fundamental principles that guide our data processing",
+      "principles": {
+        "minimization": {
+          "title": "Data minimisation",
+          "description": "We only collect data strictly necessary for our services."
+        },
+        "retention": {
+          "title": "Retention limitation",
+          "description": "Your data is retained only for the time needed."
+        },
+        "integrity": {
+          "title": "Integrity & confidentiality",
+          "description": "Your data is protected against any unauthorised access."
+        },
+        "transparency": {
+          "title": "Transparency",
+          "description": "We clearly inform you about the use of your data."
+        }
+      },
+      "measuresTitle": "Protection measures",
+      "measuresSubtitle": "Technical and organisational measures to ensure the security of your data",
+      "measures": {
+        "technical": {
+          "title": "Technical measures",
+          "item1": "Data encryption at rest and in transit",
+          "item2": "Multi-factor authentication",
+          "item3": "Data access logging",
+          "item4": "Regular encrypted backups",
+          "item5": "Pseudonymisation of sensitive data"
+        },
+        "organizational": {
+          "title": "Organisational measures",
+          "item1": "Designated Data Protection Officer (DPO)",
+          "item2": "Regular staff training",
+          "item3": "Documented security policies",
+          "item4": "Incident management process",
+          "item5": "Regular compliance audits"
+        }
+      },
+      "register": {
+        "title": "Processing register",
+        "body": "In accordance with Article 30 of the GDPR, we maintain a register of personal data processing activities. This register documents:",
+        "item1": "The purposes of each processing",
+        "item2": "The categories of data processed",
+        "item3": "The recipients of the data",
+        "item4": "The retention periods",
+        "item5": "The security measures applied"
+      },
+      "dpo": {
+        "title": "Contact our DPO",
+        "body": "Our Data Protection Officer is available for any questions related to the processing of your personal data or the exercise of your rights.",
+        "privacyLink": "Privacy policy"
+      }
+    },
+    "blog": {
+      "badge": "Xpeditis Blog",
+      "title1": "News & Insights",
+      "title2": "on maritime freight",
+      "intro": "Keep up with the latest trends in maritime transport, explore our practical guides and follow Xpeditis news.",
+      "searchPlaceholder": "Search for an article…",
+      "categories": {
+        "all": "All articles",
+        "industry": "Maritime industry",
+        "technology": "Technology",
+        "guides": "Practical guides",
+        "news": "News"
+      },
+      "allTitle": "All articles",
+      "articlesCount": "{count} articles",
+      "featuredBadge": "Featured",
+      "readArticle": "Read article",
+      "noResults": {
+        "title": "No articles found",
+        "body": "Try adjusting your filters or search query"
+      },
+      "loadMore": "Load more articles",
+      "featured": {
+        "title": "The future of maritime freight: how AI is transforming logistics",
+        "excerpt": "Discover how artificial intelligence is reshaping maritime shipment management and optimizing global supply chains.",
+        "author": "Marie Lefebvre",
+        "date": "January 15, 2025",
+        "readTime": "8 min"
+      },
+      "articles": {
+        "incoterms": {
+          "title": "A complete guide to Incoterms 2020 for maritime transport",
+          "excerpt": "Everything you need to know about Incoterms rules and how they apply to international maritime freight.",
+          "author": "Thomas Martin",
+          "date": "January 10, 2025",
+          "readTime": "12 min"
+        },
+        "costs": {
+          "title": "How to optimize your maritime transport costs in 2025",
+          "excerpt": "Practical strategies and tips to reduce your logistics spend without compromising service quality.",
+          "author": "Sophie Bernard",
+          "date": "January 8, 2025",
+          "readTime": "6 min"
+        },
+        "ports": {
+          "title": "The largest European ports: 2025 ranking",
+          "excerpt": "An analysis of the performance of major European ports and container traffic trends.",
+          "author": "Jean-Pierre Durand",
+          "date": "January 5, 2025",
+          "readTime": "10 min"
+        },
+        "funding": {
+          "title": "Xpeditis raises €15M to accelerate its expansion",
+          "excerpt": "Our Series A allows us to strengthen our team and extend our presence across Europe.",
+          "author": "Jean-Pierre Durand",
+          "date": "January 3, 2025",
+          "readTime": "4 min"
+        },
+        "green": {
+          "title": "Decarbonizing maritime transport: where do we stand?",
+          "excerpt": "A status report on environmental initiatives in the maritime sector and outlook for 2030.",
+          "author": "Claire Moreau",
+          "date": "December 28, 2024",
+          "readTime": "9 min"
+        },
+        "api": {
+          "title": "APIs and integrations: how to connect your TMS to Xpeditis",
+          "excerpt": "A technical guide to integrating our platform with your existing management systems.",
+          "author": "Alexandre Petit",
+          "date": "December 22, 2024",
+          "readTime": "15 min"
+        },
+        "documents": {
+          "title": "Essential documents for maritime exports",
+          "excerpt": "A complete checklist of documents required for your international maritime shipments.",
+          "author": "Thomas Martin",
+          "date": "December 18, 2024",
+          "readTime": "7 min"
+        }
+      },
+      "newsletter": {
+        "title": "Stay informed",
+        "body": "Subscribe to our newsletter to receive the latest articles and maritime freight news directly in your inbox.",
+        "emailPlaceholder": "your@email.com",
+        "subscribe": "Subscribe",
+        "disclaimer": "By subscribing, you agree to our privacy policy. You can unsubscribe at any time."
+      }
+    },
+    "careers": {
+      "badge": "Join us",
+      "title1": "Let's build together",
+      "title2": "the future of maritime",
+      "intro": "Join a passionate team revolutionizing maritime freight. Stimulating challenges, a caring culture, and unique growth opportunities await you.",
+      "viewJobs": "View openings",
+      "learnMore": "Learn more",
+      "stats": {
+        "employees": "Employees",
+        "nationalities": "Nationalities",
+        "offices": "Offices in Europe",
+        "womenTech": "Women in tech"
+      },
+      "benefitsTitle": "Why join us?",
+      "benefitsSubtitle": "We invest in the well-being and growth of our teams",
+      "benefits": {
+        "health": {
+          "title": "Premium health insurance",
+          "description": "Full health coverage for you and your family"
+        },
+        "remote": {
+          "title": "Flexible remote work",
+          "description": "Work from anywhere, up to 3 days a week"
+        },
+        "wellbeing": {
+          "title": "Workplace wellness",
+          "description": "Gym access, fresh fruit and team events"
+        },
+        "learning": {
+          "title": "Continuous learning",
+          "description": "€2,000/year budget for training and conferences"
+        },
+        "international": {
+          "title": "International team",
+          "description": "Work with talents from 15 nationalities"
+        },
+        "stockOptions": {
+          "title": "Stock Options",
+          "description": "Share in the company's growth"
+        }
+      },
+      "cultureTitle": "Our culture",
+      "cultureBody": "At Xpeditis, we believe the best ideas come from diverse and inclusive teams. We value autonomy, creativity and constructive feedback.",
+      "culture": {
+        "item1": "Full transparency on decisions and results",
+        "item2": "Continuous feedback and culture of improvement",
+        "item3": "Work-life balance respected",
+        "item4": "Celebration of collective successes"
+      },
+      "jobsTitle": "Open positions",
+      "jobsSubtitle": "Find the role that matches your ambitions",
+      "filters": {
+        "allDepartments": "All departments",
+        "allLocations": "All locations"
+      },
+      "departments": {
+        "Engineering": "Engineering",
+        "Product": "Product",
+        "Sales": "Sales",
+        "Customer Success": "Customer Success",
+        "Data": "Data"
+      },
+      "locations": {
+        "Paris": "Paris",
+        "Rotterdam": "Rotterdam",
+        "Hambourg": "Hamburg"
+      },
+      "jobs": {
+        "frontend": {
+          "title": "Senior Frontend Engineer",
+          "description": "Join our frontend team to build the next generation of our platform.",
+          "req1": "5+ years of frontend development experience",
+          "req2": "Proficient with React, TypeScript and Next.js",
+          "req3": "Experience with design systems",
+          "req4": "Ability to mentor junior developers"
+        },
+        "backend": {
+          "title": "Backend Engineer (Node.js)",
+          "description": "Build scalable APIs connecting freight forwarders with shipping lines.",
+          "req1": "3+ years of Node.js/NestJS experience",
+          "req2": "Proficient with PostgreSQL and Redis",
+          "req3": "Familiar with microservices architectures",
+          "req4": "Experience with Docker and Kubernetes a plus"
+        },
+        "pm": {
+          "title": "Product Manager",
+          "description": "Shape the product vision and prioritize features with our team.",
+          "req1": "4+ years in B2B product management",
+          "req2": "Experience in logistics or shipping a plus",
+          "req3": "Ability to analyze data and define KPIs",
+          "req4": "Excellent communication skills"
+        },
+        "ae": {
+          "title": "Account Executive",
+          "description": "Grow our client portfolio in the Netherlands and Belgium.",
+          "req1": "3+ years of B2B sales experience",
+          "req2": "Knowledge of the maritime/logistics sector",
+          "req3": "Fluent in Dutch and English",
+          "req4": "Ability to manage long sales cycles"
+        },
+        "csm": {
+          "title": "Customer Success Manager",
+          "description": "Support our clients with the platform and maximize their satisfaction.",
+          "req1": "2+ years in customer success",
+          "req2": "Experience with CRM tools (HubSpot, Salesforce)",
+          "req3": "Excellent relational and service-minded",
+          "req4": "Ability to train and support users"
+        },
+        "data": {
+          "title": "Data Analyst",
+          "description": "Analyze shipping data to optimize our platform and processes.",
+          "req1": "3+ years in data analysis",
+          "req2": "Proficient with SQL, Python and BI tools",
+          "req3": "Experience with shipping/logistics a plus",
+          "req4": "Ability to communicate insights to teams"
+        }
+      },
+      "jobCard": {
+        "remote": "Remote OK",
+        "profile": "Profile sought:",
+        "apply": "Apply",
+        "learnMore": "Learn more"
+      },
+      "noJobs": {
+        "title": "No openings found",
+        "body": "Try adjusting your filters"
+      },
+      "cta": {
+        "title": "No matching role?",
+        "body": "Send us a spontaneous application! We are always looking for passionate talents to join our journey.",
+        "spontaneous": "Spontaneous application"
+      }
+    },
+    "press": {
+      "badge": "Press Room",
+      "title1": "Press Room",
+      "title2": "Xpeditis",
+      "intro": "Find all our press releases, media resources and information for journalists. Our communications team is at your service.",
+      "pressKit": "Press Kit",
+      "pressContact": "Press Contact",
+      "stats": {
+        "funding": "Funding raised",
+        "clients": "Active clients",
+        "carriers": "Shipping lines",
+        "countries": "Countries covered"
+      },
+      "releasesTitle": "Press Releases",
+      "releasesSubtitle": "The latest official news from Xpeditis",
+      "releases": {
+        "seriesA": {
+          "title": "Xpeditis raises €15M to accelerate European expansion",
+          "date": "January 15, 2025",
+          "excerpt": "The French maritime freight startup announces a Series A round led by Partech and Eurazeo.",
+          "category": "Funding"
+        },
+        "clients500": {
+          "title": "Xpeditis crosses the 500 active clients milestone",
+          "date": "January 8, 2025",
+          "excerpt": "The B2B maritime freight platform confirms its leadership in Europe with 200% growth in 2024.",
+          "category": "Growth"
+        },
+        "cmaCgm": {
+          "title": "Strategic partnership with CMA CGM",
+          "date": "December 15, 2024",
+          "excerpt": "Xpeditis integrates the full CMA CGM group offering, giving users even more choice.",
+          "category": "Partnership"
+        },
+        "tracking": {
+          "title": "New real-time tracking features launched",
+          "date": "December 1, 2024",
+          "excerpt": "The platform expands its offering with an improved container tracking system and proactive notifications.",
+          "category": "Product"
+        },
+        "rotterdam": {
+          "title": "Rotterdam office opening",
+          "date": "November 15, 2024",
+          "excerpt": "Xpeditis continues its expansion with a new office in the Netherlands to serve the Benelux market.",
+          "category": "Expansion"
+        }
+      },
+      "read": "Read",
+      "coverageTitle": "In the news",
+      "coverageSubtitle": "Read press articles mentioning Xpeditis",
+      "coverage": {
+        "lesEchos": {
+          "title": "Xpeditis, the startup digitizing maritime freight",
+          "date": "January 12, 2025"
+        },
+        "bfm": {
+          "title": "How AI is revolutionizing maritime logistics",
+          "date": "January 10, 2025"
+        },
+        "jmm": {
+          "title": "Digital platforms at the service of freight forwarders",
+          "date": "January 5, 2025"
+        },
+        "techEu": {
+          "title": "French logistics startup Xpeditis raises €15M",
+          "date": "January 15, 2025"
+        }
+      },
+      "kitTitle": "Press Kit",
+      "kitSubtitle": "Download everything you need for your articles",
+      "kit": {
+        "visuals": {
+          "title": "Logos & Visuals",
+          "description": "High-resolution logos (PNG, SVG) and platform visuals",
+          "format": "ZIP — 12 MB"
+        },
+        "dossier": {
+          "title": "Press Kit",
+          "description": "Complete presentation of Xpeditis, key figures and founder biographies",
+          "format": "PDF — 4 MB"
+        },
+        "videos": {
+          "title": "Videos & B-Roll",
+          "description": "Presentation videos and B-Roll footage for your reports",
+          "format": "MP4 — 250 MB"
+        },
+        "download": "Download"
+      },
+      "milestonesTitle": "Our Journey",
+      "milestonesSubtitle": "The major milestones in Xpeditis's history",
+      "milestones": {
+        "2021": "Creation of Xpeditis",
+        "2022": "First version launched",
+        "2023": "Seed round of €3M",
+        "2024": "500 active clients",
+        "2025": "Series A — €15M"
+      },
+      "contact": {
+        "title": "Press Contact",
+        "body": "Our communications team is available for any interview request, information or media partnership.",
+        "relationsTitle": "Press Relations",
+        "emailLabel": "Email",
+        "phoneLabel": "Phone",
+        "responsibleTitle": "Head of Communications",
+        "responsibleRole": "Communications Director",
+        "responsibleBio": "Available for interviews, information requests and media partnerships.",
+        "quote": "We are always pleased to speak with journalists about our mission to revolutionize maritime freight. Feel free to contact us with any request.",
+        "quoteRole": " — CEO & Co-founder"
+      }
+    },
+    "docs": {
+      "metadataTitle": "API Documentation — Xpeditis",
+      "metadataDescription": "Xpeditis API documentation to integrate maritime freight into your applications."
+    }
+  },
+  "auth": {
+    "login": {
+      "title": "Sign in",
+      "subtitle": "Welcome back! Sign in to access your account",
+      "emailLabel": "Email address",
+      "emailPlaceholder": "your.email@company.com",
+      "passwordLabel": "Password",
+      "passwordPlaceholder": "••••••••••",
+      "rememberMe": "Remember me",
+      "forgotPassword": "Forgot password?",
+      "submit": "Sign in",
+      "submitting": "Signing in…",
+      "noAccount": "Don't have an account?",
+      "createAccount": "Create an account",
+      "register": "Sign up",
+      "orContinue": "Or continue with",
+      "continueWithGoogle": "Continue with Google",
+      "continueWithMicrosoft": "Continue with Microsoft",
+      "fieldErrors": {
+        "emailRequired": "Email address is required",
+        "emailInvalid": "Email address is not valid",
+        "passwordRequired": "Password is required",
+        "passwordMin": "Password must be at least 6 characters"
+      },
+      "errors": {
+        "network": "Unable to reach the server. Please check your internet connection.",
+        "invalidCredentials": "Invalid email or password",
+        "inactive": "Your account has been disabled. Contact support for more information.",
+        "notFound": "No account found with that email",
+        "incorrectPassword": "Incorrect password",
+        "rateLimit": "Too many login attempts. Please try again in a few minutes.",
+        "generic": "An error occurred. Please try again."
+      }
+    },
+    "register": {
+      "title": "Create an account",
+      "subtitle": "Start your free trial today",
+      "stepAccount": "Your account",
+      "stepOrganization": "Your organization",
+      "orgStepTitle": "Your organization",
+      "orgStepSubtitle": "Fill in your company information",
+      "invitationTitle": "Accept invitation",
+      "invitationValid": "Valid invitation — create your password to join the organization.",
+      "invitationInvalid": "The invitation link is invalid or expired.",
+      "invitationVerifying": "Verifying invitation…",
+      "firstNameLabel": "First name",
+      "firstNamePlaceholder": "John",
+      "lastNameLabel": "Last name",
+      "lastNamePlaceholder": "Smith",
+      "emailLabel": "Email address",
+      "emailPlaceholder": "john.smith@company.com",
+      "passwordLabel": "Password",
+      "passwordPlaceholder": "••••••••••••",
+      "passwordHint": "At least 12 characters",
+      "confirmPasswordLabel": "Confirm password",
+      "organizationNameLabel": "Organization name",
+      "organizationNamePlaceholder": "Acme Logistics",
+      "organizationTypeLabel": "Organization type",
+      "orgTypes": {
+        "freightForwarder": "Freight forwarder",
+        "shipper": "Shipper",
+        "carrier": "Carrier"
+      },
+      "sirenLabel": "SIREN",
+      "sirenHint": "9 digits",
+      "siretLabel": "SIRET",
+      "siretOptional": "(optional)",
+      "siretHint": "14 digits",
+      "streetLabel": "Address",
+      "streetPlaceholder": "123 Main Street",
+      "cityLabel": "City",
+      "cityPlaceholder": "Paris",
+      "postalCodeLabel": "Postal code",
+      "postalCodePlaceholder": "75001",
+      "stateLabel": "State/Region",
+      "stateOptional": "(optional)",
+      "statePlaceholder": "Île-de-France",
+      "countryLabel": "Country",
+      "countryPlaceholder": "FR",
+      "countryHint": "2-letter ISO code",
+      "back": "Back",
+      "continue": "Continue",
+      "submit": "Create my account",
+      "submitting": "Creating account…",
+      "termsAccept": "By creating an account, you agree to our",
+      "termsLink": "Terms of Service",
+      "termsAnd": "and our",
+      "privacyLink": "Privacy Policy",
+      "hasAccount": "Already have an account?",
+      "login": "Sign in",
+      "fieldErrors": {
+        "firstNameMin": "First name must be at least 2 characters",
+        "lastNameMin": "Last name must be at least 2 characters",
+        "emailInvalid": "Email address is not valid",
+        "passwordMin": "Password must be at least 12 characters",
+        "passwordsMismatch": "Passwords do not match",
+        "orgNameRequired": "Organization name is required",
+        "sirenRequired": "SIREN number is required (9 digits)",
+        "siretInvalid": "SIRET number must be 14 digits",
+        "addressRequired": "All address fields are required"
+      },
+      "errors": {
+        "emailTaken": "This email address is already in use",
+        "generic": "Error while creating the account"
+      },
+      "sidePanel": {
+        "titleInvitation": "Join your team",
+        "titleDefault": "Join thousands of companies",
+        "description": "Simplify your maritime logistics and save time on every shipment.",
+        "features": {
+          "trial": {
+            "title": "30-day free trial",
+            "description": "Test all features with no commitment"
+          },
+          "security": {
+            "title": "Maximum security",
+            "description": "Your data is protected and encrypted"
+          },
+          "support": {
+            "title": "24/7 support",
+            "description": "Our team is here to help you"
+          }
+        },
+        "stats": {
+          "companies": "Companies",
+          "countries": "Countries covered",
+          "support": "Support"
+        }
+      }
+    },
+    "sidePanel": {
+      "title": "Simplify your maritime freight",
+      "description": "Access real-time rates from 50+ shipping carriers. Book, track and manage your LCL shipments in just a few clicks.",
+      "features": {
+        "instantRates": {
+          "title": "Instant rates",
+          "description": "Compare prices from all carriers in real time"
+        },
+        "booking": {
+          "title": "Streamlined booking",
+          "description": "Book your containers in under 5 minutes"
+        },
+        "tracking": {
+          "title": "Real-time tracking",
+          "description": "Track your shipments at every stage of the journey"
+        }
+      },
+      "stats": {
+        "carriers": "Carriers",
+        "shipments": "Shipments",
+        "satisfaction": "Satisfaction"
+      }
+    },
+    "footerLinks": {
+      "contact": "Contact us",
+      "privacy": "Privacy",
+      "terms": "Terms"
+    },
+    "forgotPassword": {
+      "title": "Forgot password?",
+      "subtitle": "Enter your email address and we'll send you a link to reset your password.",
+      "emailLabel": "Email address",
+      "emailPlaceholder": "your.email@company.com",
+      "submit": "Send reset link",
+      "submitting": "Sending…",
+      "backToLogin": "Back to sign in",
+      "successTitle": "Email sent",
+      "successMessage": "If an account is associated with <strong>{email}</strong>, you will receive an email with instructions to reset your password.",
+      "successHint": "Remember to check your spam folder if you don't see anything within a few minutes.",
+      "error": "An error occurred. Please try again.",
+      "sidePanel": {
+        "title": "Security first",
+        "description": "Protecting your account is our priority. Reset your password safely.",
+        "features": {
+          "secure": {
+            "title": "Secure link",
+            "description": "The link expires after 1 hour for your security"
+          },
+          "email": {
+            "title": "Confirmation email",
+            "description": "Check your inbox and spam folder"
+          }
+        }
+      }
+    },
+    "resetPassword": {
+      "title": "New password",
+      "subtitle": "Choose a new secure password for your account.",
+      "invalidTokenTitle": "Invalid link",
+      "invalidTokenMessage": "This reset link is invalid. Please request a new one.",
+      "passwordLabel": "New password",
+      "passwordHint": "At least 12 characters",
+      "confirmPasswordLabel": "Confirm password",
+      "submit": "Reset password",
+      "submitting": "Resetting…",
+      "successTitle": "Password reset!",
+      "successMessage": "Your password has been changed successfully. You will be redirected to the sign-in page…",
+      "goToLogin": "Sign in now",
+      "backToLogin": "Back to sign in",
+      "requestNew": "Request a new link",
+      "errors": {
+        "passwordMin": "Password must be at least 12 characters",
+        "passwordsMismatch": "Passwords do not match",
+        "generic": "The reset link is invalid or expired."
+      },
+      "sidePanel": {
+        "title": "Your security, our priority",
+        "description": "Choose a strong password to protect your account and your data.",
+        "tips": [
+          "At least 12 characters",
+          "Mix letters, numbers and symbols",
+          "Avoid dictionary words",
+          "Don't reuse passwords from other accounts"
+        ]
+      }
+    },
+    "verifyEmail": {
+      "verifyingTitle": "Verifying your email…",
+      "verifyingSubtitle": "One moment, we're validating your email address.",
+      "successTitle": "Email verified successfully!",
+      "successMessage": "Your email has been verified successfully. You will be redirected to the dashboard in a few seconds…",
+      "goToDashboard": "Go to dashboard now",
+      "errorTitle": "Verification failed",
+      "errorInvalidLink": "Invalid verification link",
+      "errorGeneric": "Email verification failed. The link may have expired.",
+      "errorHint": "The verification link may have expired. Please request a new one.",
+      "backToLogin": "Back to sign in",
+      "resend": "Resend verification email"
+    }
+  }
+}
diff --git a/apps/frontend/messages/fr.json b/apps/frontend/messages/fr.json
new file mode 100644
index 0000000..fa359f4
--- /dev/null
+++ b/apps/frontend/messages/fr.json
@@ -0,0 +1,3626 @@
+{
+  "common": {
+    "brand": "Xpeditis",
+    "save": "Enregistrer",
+    "cancel": "Annuler",
+    "confirm": "Confirmer",
+    "close": "Fermer",
+    "delete": "Supprimer",
+    "edit": "Modifier",
+    "create": "Créer",
+    "search": "Rechercher",
+    "filter": "Filtrer",
+    "loading": "Chargement…",
+    "submitting": "Envoi…",
+    "next": "Suivant",
+    "previous": "Précédent",
+    "back": "Retour",
+    "yes": "Oui",
+    "no": "Non",
+    "optional": "(optionnel)",
+    "required": "*",
+    "view": "Voir",
+    "viewAll": "Voir tout",
+    "seeMore": "Voir plus",
+    "discover": "Découvrir",
+    "tryNow": "Essayer maintenant",
+    "continue": "Continuer",
+    "submit": "Envoyer"
+  },
+  "language": {
+    "label": "Langue",
+    "fr": "Français",
+    "en": "English",
+    "switchTo": "Passer en {lang}"
+  },
+  "metadata": {
+    "home": {
+      "title": "Xpeditis — Réservation de fret maritime",
+      "description": "Recherchez, comparez et réservez votre fret maritime en temps réel."
+    }
+  },
+  "navigation": {
+    "home": "Accueil",
+    "dashboard": "Tableau de bord",
+    "bookings": "Réservations",
+    "rates": "Tarifs",
+    "settings": "Paramètres",
+    "login": "Connexion",
+    "register": "S'inscrire",
+    "logout": "Déconnexion",
+    "about": "À propos",
+    "pricing": "Tarifs",
+    "contact": "Contact",
+    "features": "Fonctionnalités",
+    "blog": "Blog",
+    "company": "Entreprise",
+    "docsApi": "Docs API"
+  },
+  "validation": {
+    "required": "Ce champ est obligatoire",
+    "email": "Adresse email invalide",
+    "minLength": "Doit contenir au moins {min} caractères",
+    "maxLength": "Doit contenir au plus {max} caractères",
+    "pattern": "Format invalide",
+    "passwordComplexity": "Le mot de passe doit contenir majuscule, minuscule, chiffre et caractère spécial",
+    "passwordsDoNotMatch": "Les mots de passe ne correspondent pas",
+    "siren": "Le SIREN doit contenir 9 chiffres",
+    "siret": "Le SIRET doit contenir 14 chiffres"
+  },
+  "errors": {
+    "generic": "Une erreur s'est produite. Veuillez réessayer.",
+    "network": "Problème de connexion. Vérifiez votre réseau.",
+    "unauthorized": "Vous devez être connecté pour accéder à cette page.",
+    "forbidden": "Vous n'avez pas les permissions requises.",
+    "notFound": "Page non trouvée.",
+    "serverError": "Erreur serveur. Notre équipe a été notifiée."
+  },
+  "header": {
+    "mobileMenu": {
+      "open": "Ouvrir le menu",
+      "close": "Fermer le menu"
+    },
+    "company": {
+      "aboutDescription": "Notre histoire et mission",
+      "blogDescription": "Actualités et insights"
+    },
+    "cta": {
+      "signIn": "Connexion",
+      "startFree": "Commencer Gratuitement",
+      "dashboard": "Tableau de bord"
+    }
+  },
+  "footer": {
+    "tagline": "Xpeditis est la plateforme B2B leader pour le fret maritime en Europe. Nous connectons les transitaires avec les plus grandes compagnies maritimes mondiales.",
+    "products": {
+      "title": "Produits",
+      "features": "Fonctionnalités",
+      "tools": "Outils & Calculateurs",
+      "pricing": "Tarifs"
+    },
+    "company": {
+      "title": "Entreprise",
+      "about": "À propos",
+      "contact": "Contact",
+      "blog": "Blog"
+    },
+    "legal": {
+      "title": "Légal",
+      "privacy": "Politique de confidentialité",
+      "terms": "Conditions générales",
+      "cookies": "Politique de cookies",
+      "compliance": "Conformité RGPD"
+    },
+    "copyright": "© {year} Xpeditis SAS. Tous droits réservés.",
+    "location": "Paris, France",
+    "countries": "50+ Pays",
+    "social": {
+      "linkedin": "LinkedIn",
+      "twitter": "Twitter"
+    }
+  },
+  "landing": {
+    "hero": {
+      "badge": "Plateforme B2B de Fret Maritime #1 en Europe",
+      "titleLine1": "Réservez votre fret",
+      "titleLine2": "en quelques clics",
+      "subtitle": "Comparez les tarifs de 50+ compagnies maritimes, réservez en ligne et suivez vos envois en temps réel.",
+      "ctaAuthenticated": "Accéder au tableau de bord",
+      "ctaRegister": "Créer un compte gratuit",
+      "ctaDemo": "Voir la démo"
+    },
+    "stats": {
+      "carriers": "Compagnies Maritimes",
+      "ports": "Ports Mondiaux",
+      "responseTime": "Temps de Réponse",
+      "availability": "Disponibilité"
+    },
+    "features": {
+      "title": "Pourquoi choisir Xpeditis ?",
+      "subtitle": "Une plateforme complète pour gérer tous vos besoins en fret maritime",
+      "dashboard": {
+        "title": "Tableau de bord",
+        "description": "Suivez tous vos KPIs en temps réel : bookings, volumes, revenus et alertes personnalisées."
+      },
+      "bookings": {
+        "title": "Gestion des Réservations",
+        "description": "Créez, gérez et suivez vos réservations maritimes LCL/FCL avec un historique complet."
+      },
+      "documents": {
+        "title": "Documents Maritimes",
+        "description": "Centralisez tous vos documents : B/L, factures, certificats et documents douaniers."
+      },
+      "tracking": {
+        "title": "Suivi des expéditions",
+        "description": "Suivez vos conteneurs en temps réel auprès de 10+ transporteurs majeurs (Maersk, MSC, CMA CGM...)."
+      },
+      "wiki": {
+        "title": "Wiki Maritime",
+        "description": "Base de connaissances complète : Incoterms, documents, procédures douanières et plus encore."
+      },
+      "notifications": {
+        "title": "Notifications Temps Réel",
+        "description": "Restez informé avec des alertes instantanées sur vos bookings, documents et mises à jour."
+      }
+    },
+    "partners": {
+      "title": "En partenariat avec les plus grandes compagnies maritimes",
+      "subtitle": "Accédez aux tarifs de 50+ transporteurs mondiaux"
+    },
+    "pricing": {
+      "badge": "Tarifs",
+      "title": "Des plans adaptés à votre activité",
+      "subtitle": "De l'accès découverte au partenariat sur mesure — évoluez à tout moment.",
+      "monthly": "Mensuel",
+      "yearly": "Annuel",
+      "yearlySaving": "1 mois offert",
+      "custom": "Sur mesure",
+      "customSubtitle": "Tarification personnalisée",
+      "free": "Gratuit",
+      "freeSubtitle": "Pour toujours",
+      "perMonth": "/mois",
+      "billedYearly": "Facturé {price}€/an",
+      "saveWithYearly": "Économisez 1 mois avec l'annuel",
+      "commission": "Commission {rate}",
+      "noCommitment": "Sans engagement · Résiliable à tout moment",
+      "questions": "Des questions ?",
+      "contactSales": "Contactez notre équipe commerciale",
+      "popularBadge": "Populaire",
+      "customBadge": "Sur mesure",
+      "plans": {
+        "bronze": {
+          "name": "Bronze",
+          "description": "Pour découvrir la plateforme",
+          "users": "1 utilisateur",
+          "shipments": "12 expéditions / an",
+          "support": "Aucun support",
+          "cta": "Commencer gratuitement"
+        },
+        "silver": {
+          "name": "Silver",
+          "description": "Pour les transitaires en croissance",
+          "users": "Jusqu'à 5 utilisateurs",
+          "shipments": "Expéditions illimitées",
+          "support": "Support par email",
+          "cta": "Commencer"
+        },
+        "gold": {
+          "name": "Gold",
+          "description": "Pour les équipes exigeantes",
+          "users": "Jusqu'à 20 utilisateurs",
+          "shipments": "Expéditions illimitées",
+          "support": "Assistance commerciale directe",
+          "cta": "Commencer"
+        },
+        "platinium": {
+          "name": "Platinium",
+          "description": "Pour les grandes entreprises",
+          "users": "Utilisateurs illimités",
+          "shipments": "Expéditions illimitées",
+          "support": "Key Account Manager dédié",
+          "cta": "Nous contacter"
+        }
+      },
+      "features": {
+        "lclBooking": "Réservations maritimes LCL",
+        "tracking": "Track & Trace conteneurs",
+        "dashboard": "Tableau de bord",
+        "dashboardAdvanced": "Tableau de bord avancé",
+        "wiki": "Wiki maritime",
+        "wikiFull": "Wiki maritime complet",
+        "userManagement": "Gestion des utilisateurs",
+        "csvExport": "Export CSV",
+        "apiAccess": "Accès API",
+        "apiFull": "Accès API complet",
+        "kam": "KAM dédié",
+        "kamCustom": "KAM dédié + Interface personnalisée"
+      }
+    },
+    "howItWorks": {
+      "title": "Comment ça marche ?",
+      "subtitle": "Réservez votre fret maritime en 4 étapes simples",
+      "step1": {
+        "title": "Recherchez",
+        "description": "Entrez vos ports de départ et d'arrivée"
+      },
+      "step2": {
+        "title": "Comparez",
+        "description": "Analysez les tarifs de 50+ compagnies"
+      },
+      "step3": {
+        "title": "Réservez",
+        "description": "Confirmez votre réservation en un clic"
+      },
+      "step4": {
+        "title": "Suivez",
+        "description": "Suivez votre envoi en temps réel"
+      },
+      "ctaHint": "Inscription gratuite · Aucune carte bancaire requise"
+    },
+    "testimonials": {
+      "title": "Ils nous font confiance",
+      "subtitle": "Découvrez les témoignages de nos clients satisfaits",
+      "items": [
+        {
+          "quote": "Xpeditis a révolutionné notre façon de gérer le fret maritime. Les tarifs sont compétitifs et la plateforme est intuitive.",
+          "author": "Marie Dubois",
+          "role": "Directrice Logistique",
+          "company": "LogiFrance"
+        },
+        {
+          "quote": "Le gain de temps est considérable. Ce qui nous prenait des heures se fait maintenant en quelques minutes.",
+          "author": "Thomas Martin",
+          "role": "Responsable Transport",
+          "company": "EuroShipping"
+        },
+        {
+          "quote": "L'interface est claire, les données sont précises et le support client est réactif. Un vrai partenaire de confiance.",
+          "author": "Sophie Bernard",
+          "role": "CEO",
+          "company": "MariTime Solutions"
+        }
+      ]
+    },
+    "cta": {
+      "title": "Prêt à simplifier votre fret maritime ?",
+      "subtitle": "Rejoignez des centaines de transitaires qui font confiance à Xpeditis pour leurs expéditions maritimes.",
+      "ctaAuthenticated": "Accéder au tableau de bord",
+      "ctaRegister": "Créer un compte gratuit",
+      "ctaLogin": "Se connecter",
+      "features": {
+        "noCard": "Sans carte bancaire",
+        "quickSetup": "Configuration en 2 min",
+        "secure": "Données sécurisées"
+      }
+    }
+  },
+  "dashboard": {
+    "nav": {
+      "dashboard": "Tableau de bord",
+      "bookings": "Réservations",
+      "documents": "Documents",
+      "tracking": "Suivi",
+      "wiki": "Wiki Maritime",
+      "organization": "Organisation",
+      "apiKeys": "Clés API",
+      "users": "Utilisateurs"
+    },
+    "topbar": {
+      "defaultTitle": "Tableau de bord"
+    },
+    "logout": "Déconnexion",
+    "bottomNav": {
+      "home": "Accueil",
+      "bookings": "Réservations",
+      "documents": "Documents",
+      "tracking": "Suivi",
+      "profile": "Profil"
+    },
+    "home": {
+      "title": "Tableau de Bord",
+      "subtitle": "Vue d'ensemble de vos réservations et performances",
+      "newBooking": "Nouvelle Réservation",
+      "exportFilename": "tableau-de-bord-transporteurs",
+      "kpi": {
+        "accepted": "Acceptés",
+        "rejected": "Refusés",
+        "pending": "En Attente",
+        "totalWeight": "Poids Total",
+        "thisMonth": "+{count} ce mois",
+        "acceptanceRate": "{rate}% acceptés"
+      },
+      "charts": {
+        "distribution": {
+          "title": "Distribution des Réservations",
+          "description": "Répartition par statut",
+          "accepted": "Acceptés",
+          "rejected": "Refusés",
+          "pending": "En Attente"
+        },
+        "weightByCarrier": {
+          "title": "Poids par Transporteur",
+          "description": "Top 5 transporteurs par poids (KG)",
+          "weight": "Poids"
+        }
+      },
+      "performance": {
+        "acceptanceRate": "Taux d'Acceptation",
+        "totalBookings": "Total Réservations",
+        "totalVolume": "Volume Total"
+      },
+      "topCarriers": {
+        "title": "Top Transporteurs",
+        "description": "Classement des meilleures compagnies",
+        "viewAll": "Voir tout",
+        "bookingsCount": "{count} réservations",
+        "empty": {
+          "title": "Aucune réservation",
+          "description": "Créez votre première réservation pour voir vos statistiques",
+          "cta": "Créer une réservation"
+        }
+      },
+      "export": {
+        "carrier": "Transporteur",
+        "totalBookings": "Total Réservations",
+        "accepted": "Acceptées",
+        "rejected": "Refusées",
+        "totalWeight": "Poids Total (KG)",
+        "totalVolume": "Volume Total (CBM)",
+        "acceptanceRate": "Taux d'acceptation (%)",
+        "avgPrice": "Prix moyen ($)"
+      }
+    },
+    "bookingsList": {
+      "title": "Réservations",
+      "description": "Gérez et suivez vos envois",
+      "new": "Nouvelle Réservation",
+      "transferBanner": {
+        "title": "Virement déclaré",
+        "message": "Votre virement a été enregistré. Un administrateur va vérifier la réception et activer votre booking. Vous serez notifié dès la validation."
+      },
+      "exportFilename": "reservations",
+      "export": {
+        "id": "ID",
+        "pallets": "Palettes",
+        "weight": "Poids (kg)",
+        "volume": "Volume (CBM)",
+        "origin": "Origine",
+        "destination": "Destination",
+        "carrier": "Transporteur",
+        "status": "Statut",
+        "createdAt": "Date de création"
+      },
+      "searchType": {
+        "label": "Type de recherche",
+        "route": "Route (Origine/Destination)",
+        "pallets": "Palettes/Colis",
+        "weight": "Poids (kg)",
+        "status": "Statut",
+        "date": "Date",
+        "quote": "N° Devis"
+      },
+      "searchPlaceholder": {
+        "route": "Rechercher par ville (origine ou destination)...",
+        "pallets": "Rechercher par nombre de palettes...",
+        "weight": "Rechercher par poids en kg...",
+        "status": "Rechercher par statut...",
+        "date": "Rechercher par date (JJ/MM/AAAA)...",
+        "quote": "Rechercher par numéro de devis...",
+        "default": "Rechercher..."
+      },
+      "statusFilter": {
+        "label": "Statut",
+        "all": "Tous les statuts"
+      },
+      "status": {
+        "pending": "En attente",
+        "accepted": "Accepté",
+        "rejected": "Refusé"
+      },
+      "loading": "Chargement des réservations...",
+      "search": "Rechercher",
+      "columns": {
+        "palletsPackages": "Palettes/Colis",
+        "weight": "Poids",
+        "route": "Route",
+        "status": "Statut",
+        "date": "Date",
+        "quoteNumber": "N° Devis",
+        "bookingNumber": "N° Booking"
+      },
+      "mobile": {
+        "pallets": "Palettes",
+        "weight": "Poids",
+        "date": "Date",
+        "ref": "Réf: #{id}",
+        "booking": "Booking: {number}"
+      },
+      "units": {
+        "palletsCount": "{count, plural, one {# palette} other {# palettes}}",
+        "containersCount": "{count, plural, one {# conteneur} other {# conteneurs}}",
+        "palletsShort": "{count} pal.",
+        "containersShort": "{count} cont.",
+        "kg": "{value} kg",
+        "cbm": "{value} CBM"
+      },
+      "empty": {
+        "title": "Aucune réservation trouvée",
+        "hasFilters": "Essayez d'ajuster vos filtres",
+        "noBookings": "Commencez par créer votre première réservation"
+      },
+      "pagination": {
+        "previous": "Précédent",
+        "next": "Suivant",
+        "showing": "Affichage de <b>{start}</b> à <b>{end}</b> sur <b>{total}</b> {total, plural, one {résultat} other {résultats}}"
+      }
+    },
+    "rateSearch": {
+      "title": "Recherche Avancée de Tarifs",
+      "subtitle": "Formulaire complet avec toutes les options de transport",
+      "mapLoading": "Chargement de la carte...",
+      "step1": {
+        "title": "1. Informations Générales",
+        "originLabel": "Port d'origine *",
+        "destinationLabel": "Port de destination *",
+        "selected": "✓ Sélectionné",
+        "originPlaceholder": "Rechercher un port d'origine...",
+        "destinationPlaceholder": "Rechercher une destination...",
+        "destinationDisabled": "Sélectionnez d'abord un port d'origine",
+        "availableDestinations": "{count, plural, one {# destination disponible} other {# destinations disponibles}} depuis {port}",
+        "moreResults": "+{count} autres résultats. Affinez votre recherche.",
+        "noOrigin": "Aucun port d'origine trouvé pour « {query} »",
+        "noDestination": "Aucune destination trouvée pour « {query} »",
+        "routeTitle": "Route maritime : {origin} → {destination}",
+        "routeDescription": "Distance approximative et visualisation de la route"
+      },
+      "step2": {
+        "title": "2. Conditionnement",
+        "addPackage": "+ Ajouter un colis",
+        "packageNumber": "Colis #{number}",
+        "remove": "Supprimer",
+        "type": "Type",
+        "quantity": "Quantité",
+        "length": "L (cm)",
+        "width": "l (cm)",
+        "height": "H (cm)",
+        "weight": "Poids (kg)",
+        "stackable": "Gerbable",
+        "packageTypes": {
+          "caisse": "Caisse",
+          "colis": "Colis",
+          "palette": "Palette",
+          "autre": "Autre"
+        },
+        "summary": {
+          "title": "Récapitulatif",
+          "volume": "Volume total : {value} m³",
+          "weight": "Poids total : {value} kg",
+          "pallets": "Palettes : {value}"
+        }
+      },
+      "step3": {
+        "title": "3. Options & Services",
+        "customs": {
+          "title": "Douane Import / Export",
+          "eurDocument": "EUR 1",
+          "t1Document": "T1",
+          "customsStop": "Stop douane",
+          "exportAssistance": "Assistance export"
+        },
+        "goods": {
+          "title": "Marchandise",
+          "dangerous": "Marchandise Dangereuse",
+          "regulated": "Produits règlementés"
+        },
+        "handling": {
+          "title": "Manutention particulière",
+          "special": "Manutention spéciale",
+          "tailgate": "Hayon",
+          "straps": "Sangles",
+          "thermalCover": "Couverture thermique"
+        },
+        "other": {
+          "title": "Autres options",
+          "appointment": "Rendez-vous livraison",
+          "insurance": "Assurance"
+        }
+      },
+      "navigation": {
+        "previous": "Précédent",
+        "next": "Suivant",
+        "search": "Rechercher les tarifs"
+      },
+      "results": {
+        "loadingTitle": "Recherche des meilleurs tarifs en cours...",
+        "backToSearch": "← Retour à la recherche",
+        "errorTitle": "Erreur",
+        "errorGeneric": "Une erreur est survenue lors de la recherche",
+        "noResultsTitle": "Aucun résultat trouvé",
+        "noResultsMessage": "Aucun tarif ne correspond à votre recherche pour le trajet {origin} → {destination}",
+        "suggestions": "Suggestions :",
+        "suggestionPorts": "• Ports disponibles : NLRTM, DEHAM, FRLEH, BEGNE (origine) → USNYC, USLAX, CNSHG, SGSIN (destination)",
+        "suggestionVolume": "• Volume : Essayez entre 1 et 200 CBM",
+        "suggestionWeight": "• Poids : Essayez entre 100 et 30000 kg",
+        "modifySearch": "Modifier la recherche",
+        "resultsTitle": "Résultats de recherche",
+        "summary": "{volume} CBM • {weight} kg",
+        "summaryWithPallets": "{volume} CBM • {weight} kg • {count, plural, one {# palette} other {# palettes}}",
+        "ratesFound": "Tarifs trouvés",
+        "bestChoices": "Meilleurs choix pour votre recherche",
+        "options": {
+          "economic": "Économique",
+          "standard": "Standard",
+          "fast": "Rapide",
+          "badgeCheapest": "Le moins cher",
+          "badgeBalanced": "Équilibré",
+          "badgeFastest": "Le plus rapide"
+        },
+        "totalPrice": "Prix total",
+        "carrier": "Transporteur :",
+        "transit": "Transit :",
+        "transitDays": "{days} jours",
+        "type": "Type :",
+        "select": "Sélectionner cette option",
+        "allResults": "Tous les tarifs disponibles ({count})",
+        "priceBreakdown": {
+          "base": "Prix de base",
+          "volume": "Frais volume",
+          "weight": "Frais poids",
+          "transit": "Délai transit"
+        },
+        "validUntil": "✓ Valide jusqu'au {date}",
+        "surcharges": "Surcharges applicables",
+        "selectShort": "Sélectionner"
+      }
+    },
+    "notificationsPage": {
+      "title": "Notifications",
+      "totalLabel": "{count, plural, one {# notification au total} other {# notifications au total}}",
+      "unreadSuffix": " • {count, plural, one {# non lue} other {# non lues}}",
+      "markAllRead": "Tout marquer comme lu",
+      "filter": {
+        "label": "Filtrer :",
+        "all": "Toutes",
+        "unread": "Non lues",
+        "read": "Lues"
+      },
+      "loading": "Chargement des notifications...",
+      "empty": {
+        "title": "Aucune notification",
+        "upToDate": "Vous êtes à jour !",
+        "none": "Aucune notification à afficher"
+      },
+      "new": "NOUVEAU",
+      "deleteTitle": "Supprimer la notification",
+      "deleteConfirm": "Êtes-vous sûr de vouloir supprimer cette notification ?",
+      "viewDetails": "Voir les détails",
+      "priority": {
+        "urgent": "URGENT",
+        "high": "ÉLEVÉE",
+        "medium": "MOYENNE",
+        "low": "FAIBLE"
+      },
+      "time": {
+        "now": "À l'instant",
+        "minutes": "Il y a {count}min",
+        "hours": "Il y a {count}h",
+        "days": "Il y a {count}j"
+      },
+      "pagination": {
+        "info": "Page <b>{current}</b> sur <b>{total}</b> • <b>{items}</b> {items, plural, one {notification} other {notifications}} au total",
+        "previous": "Précédent",
+        "next": "Suivant"
+      }
+    },
+    "bookingDetail": {
+      "back": "← Retour aux réservations",
+      "notFound": "Réservation introuvable",
+      "createdOn": "Créée le {date}",
+      "downloadPdf": "Télécharger le PDF",
+      "pdfNotImplemented": "Le téléchargement PDF n'est pas encore disponible",
+      "status": {
+        "draft": "Brouillon",
+        "pending": "En attente",
+        "confirmed": "Confirmée",
+        "in_transit": "En transit",
+        "delivered": "Livrée",
+        "cancelled": "Annulée"
+      },
+      "cargo": {
+        "title": "Détails de la cargaison",
+        "description": "Description",
+        "specialInstructions": "Instructions spéciales"
+      },
+      "containers": {
+        "title": "Conteneurs ({count})",
+        "type": "Type",
+        "number": "Numéro du conteneur",
+        "seal": "Numéro de plomb",
+        "vgm": "VGM (kg)"
+      },
+      "shipper": {
+        "title": "Expéditeur",
+        "name": "Nom",
+        "contact": "Contact",
+        "email": "Email",
+        "phone": "Téléphone"
+      },
+      "consignee": {
+        "title": "Destinataire",
+        "name": "Nom",
+        "contact": "Contact",
+        "email": "Email",
+        "phone": "Téléphone"
+      },
+      "timeline": {
+        "title": "Chronologie",
+        "created": "Réservation créée"
+      },
+      "info": {
+        "title": "Informations",
+        "bookingId": "ID de réservation",
+        "lastUpdated": "Dernière mise à jour"
+      }
+    },
+    "profile": {
+      "loading": "Chargement du profil...",
+      "loadError": "Impossible de charger le profil",
+      "retry": "Réessayer",
+      "header": {
+        "title": "Mon Profil",
+        "subtitle": "Gérez vos paramètres de compte et préférences"
+      },
+      "active": "Actif",
+      "tabs": {
+        "profile": "Informations personnelles",
+        "password": "Modifier le mot de passe"
+      },
+      "profileForm": {
+        "firstName": "Prénom",
+        "lastName": "Nom",
+        "email": "Adresse email",
+        "emailHelp": "L'adresse email ne peut pas être modifiée",
+        "save": "Enregistrer",
+        "saving": "Enregistrement...",
+        "successUpdate": "Profil mis à jour avec succès !",
+        "errorUpdate": "Échec de la mise à jour du profil"
+      },
+      "passwordForm": {
+        "current": "Mot de passe actuel",
+        "new": "Nouveau mot de passe",
+        "confirm": "Confirmer le nouveau mot de passe",
+        "newHint": "Au moins 12 caractères avec majuscule, minuscule, chiffre et caractère spécial",
+        "submit": "Mettre à jour",
+        "submitting": "Mise à jour...",
+        "successUpdate": "Mot de passe mis à jour avec succès !",
+        "errorUpdate": "Échec de la mise à jour du mot de passe",
+        "errors": {
+          "currentRequired": "Le mot de passe actuel est requis",
+          "newMin": "Le mot de passe doit contenir au moins 12 caractères",
+          "newComplexity": "Le mot de passe doit contenir une majuscule, une minuscule, un chiffre et un caractère spécial",
+          "confirmRequired": "Veuillez confirmer votre mot de passe",
+          "mismatch": "Les mots de passe ne correspondent pas"
+        },
+        "fieldErrors": {
+          "firstNameMin": "Le prénom doit contenir au moins 2 caractères",
+          "lastNameMin": "Le nom doit contenir au moins 2 caractères",
+          "emailInvalid": "Adresse email invalide"
+        }
+      }
+    },
+    "organizationSettings": {
+      "loading": "Chargement...",
+      "loadError": "Impossible de charger l'organisation",
+      "errorTitle": "Erreur",
+      "header": {
+        "title": "Paramètres de l'organisation",
+        "subtitle": "Gérez les informations de votre organisation"
+      },
+      "saveSuccess": "Informations sauvegardées avec succès",
+      "loadFailed": "Erreur lors du chargement",
+      "saveFailed": "Erreur lors de la sauvegarde",
+      "readOnlyWarning": "Mode lecture seule - Seuls les administrateurs et managers peuvent modifier l'organisation",
+      "tabs": {
+        "information": "Informations",
+        "address": "Adresse",
+        "subscription": "Abonnement",
+        "licenses": "Licences"
+      },
+      "information": {
+        "name": "Nom de la société",
+        "namePlaceholder": "Xpeditis",
+        "siren": "SIREN",
+        "sirenHint": "Système d'Identification du Répertoire des Entreprises",
+        "sirenDigits": "9 chiffres",
+        "sirenPlaceholder": "123 456 789",
+        "eori": "Numéro EORI",
+        "eoriHint": "Economic Operators Registration and Identification",
+        "eoriHelp": "Code pays (2 lettres) + numéro unique (max 15 caractères)",
+        "eoriPlaceholder": "FR123456789",
+        "phone": "Téléphone",
+        "phonePlaceholder": "+33 6 80 18 28 12",
+        "email": "Email",
+        "emailPlaceholder": "contact@xpeditis.com"
+      },
+      "address": {
+        "street": "Rue",
+        "streetPlaceholder": "123 Rue de la Paix",
+        "postalCode": "Code postal",
+        "postalCodePlaceholder": "75001",
+        "city": "Ville",
+        "cityPlaceholder": "Paris",
+        "country": "Pays",
+        "countries": {
+          "FR": "France",
+          "BE": "Belgique",
+          "DE": "Allemagne",
+          "ES": "Espagne",
+          "IT": "Italie",
+          "NL": "Pays-Bas",
+          "GB": "Royaume-Uni",
+          "US": "États-Unis",
+          "CN": "Chine"
+        }
+      },
+      "actions": {
+        "cancel": "Annuler",
+        "save": "Enregistrer",
+        "saving": "Enregistrement..."
+      }
+    },
+    "apiKeys": {
+      "title": "Clés API",
+      "description": "Gérez les clés d'accès programmatique à l'API Xpeditis.",
+      "newKey": "Nouvelle clé",
+      "infoTitle": "Comment utiliser vos clés API",
+      "infoBody": "Ajoutez l'en-tête {code} à chaque requête HTTP. {link}",
+      "viewDocs": "Voir la documentation",
+      "loading": "Chargement...",
+      "noKeys": "Aucune clé API pour le moment.",
+      "createFirst": "Créer votre première clé",
+      "table": {
+        "name": "Nom / Préfixe",
+        "lastUsed": "Dernière utilisation",
+        "expiry": "Expiration",
+        "status": "Statut"
+      },
+      "status": {
+        "revoked": "Révoquée",
+        "expired": "Expirée",
+        "active": "Active"
+      },
+      "revoke": "Révoquer cette clé",
+      "quota": "{active} / {max} clés actives utilisées",
+      "copy": {
+        "copied": "Copié",
+        "copy": "Copier"
+      },
+      "createModal": {
+        "title": "Nouvelle clé API",
+        "name": "Nom de la clé",
+        "namePlaceholder": "ex: Intégration ERP Production",
+        "nameCount": "{count}/100 caractères",
+        "expiry": "Date d'expiration",
+        "optional": "(optionnel)",
+        "expiryHint": "Si vide, la clé n'expire jamais.",
+        "errorGeneric": "Une erreur est survenue. Veuillez réessayer.",
+        "cancel": "Annuler",
+        "create": "Créer la clé",
+        "creating": "Création..."
+      },
+      "createdModal": {
+        "title": "Clé API créée",
+        "warning": "Copiez cette clé maintenant.",
+        "warningRest": "Elle ne sera plus jamais affichée après la fermeture de cette fenêtre.",
+        "fullKey": "Clé API complète",
+        "storeHint": "Stockez-la dans vos variables d'environnement ou un gestionnaire de secrets.",
+        "close": "J'ai copié ma clé, fermer"
+      },
+      "revokeModal": {
+        "title": "Révoquer cette clé ?",
+        "description": "Cette action est",
+        "descriptionEmphasis": "immédiate et irréversible",
+        "descriptionRest": ". Toute requête utilisant cette clé sera refusée.",
+        "cancel": "Annuler",
+        "confirm": "Révoquer"
+      },
+      "noAccess": {
+        "title": "Accès API",
+        "description": "L'accès programmatique à l'API Xpeditis est disponible sur les plans {gold} et {platinium} uniquement.",
+        "gold": "Gold",
+        "platinium": "Platinium",
+        "viewPlans": "Voir les plans"
+      }
+    },
+    "usersManagement": {
+      "loading": "Chargement des utilisateurs...",
+      "header": {
+        "title": "Gestion des Utilisateurs",
+        "subtitle": "Gérez les membres de l'équipe et leurs permissions"
+      },
+      "license": {
+        "limitTitle": "Limite de licences atteinte",
+        "limitMessage": "Votre organisation a utilisé toutes les licences disponibles ({used}/{max}). Mettez à niveau votre abonnement pour inviter plus d'utilisateurs.",
+        "upgradeLink": "Mettre à niveau l'abonnement",
+        "remaining": "{count, plural, one {# licence restante} other {# licences restantes}} ({used}/{max} utilisées)",
+        "manageLink": "Gérer l'abonnement"
+      },
+      "actions": {
+        "invite": "Inviter un utilisateur",
+        "inviteShort": "Inviter",
+        "upgrade": "Mettre à niveau",
+        "upgradeShort": "Upgrade"
+      },
+      "exportFilename": "utilisateurs",
+      "export": {
+        "firstName": "Prénom",
+        "lastName": "Nom",
+        "email": "Email",
+        "role": "Rôle",
+        "status": "Statut",
+        "createdAt": "Date de création"
+      },
+      "messages": {
+        "inviteSuccess": "Invitation envoyée avec succès ! L'utilisateur recevra un email avec un lien d'inscription.",
+        "inviteError": "Échec de l'envoi de l'invitation",
+        "roleSuccess": "Rôle mis à jour avec succès",
+        "roleError": "Échec de la mise à jour du rôle",
+        "statusSuccess": "Statut de l'utilisateur mis à jour avec succès",
+        "statusError": "Échec de la mise à jour du statut",
+        "deleteSuccess": "Utilisateur supprimé avec succès",
+        "deleteError": "Échec de la suppression de l'utilisateur",
+        "cancelInviteSuccess": "Invitation annulée avec succès",
+        "cancelInviteError": "Échec de l'annulation de l'invitation"
+      },
+      "confirms": {
+        "toggleActive": "Êtes-vous sûr de vouloir {action} cet utilisateur ?",
+        "toggleActivate": "activer",
+        "toggleDeactivate": "désactiver",
+        "delete": "Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible.",
+        "cancelInvite": "Annuler l'invitation envoyée à {name} ?"
+      },
+      "users": {
+        "title": "Utilisateurs",
+        "membersCount": "{count, plural, one {# membre} other {# membres}}",
+        "table": {
+          "user": "Utilisateur",
+          "email": "Email",
+          "role": "Rôle",
+          "status": "Statut",
+          "createdAt": "Date de création",
+          "actions": "Actions"
+        },
+        "active": "Actif",
+        "inactive": "Inactif",
+        "empty": {
+          "title": "Aucun utilisateur",
+          "description": "Commencez par inviter un membre de l'équipe"
+        },
+        "actions": {
+          "activate": "Activer",
+          "deactivate": "Désactiver",
+          "delete": "Supprimer"
+        }
+      },
+      "invitations": {
+        "title": "Invitations en attente",
+        "subtitle": "Utilisateurs invités mais n'ayant pas encore créé leur compte — {count, plural, one {# invitation} other {# invitations}}",
+        "table": {
+          "user": "Utilisateur",
+          "email": "Email",
+          "role": "Rôle",
+          "expires": "Expire le",
+          "status": "Statut",
+          "actions": "Actions"
+        },
+        "expired": "Expirée",
+        "pending": "En attente",
+        "cancel": "Annuler"
+      },
+      "modal": {
+        "title": "Inviter un utilisateur",
+        "firstName": "Prénom",
+        "lastName": "Nom",
+        "email": "Adresse email",
+        "role": "Rôle",
+        "roles": {
+          "USER": "Utilisateur",
+          "MANAGER": "Manager",
+          "VIEWER": "Lecteur",
+          "ADMIN": "Admin"
+        },
+        "rolesExport": {
+          "ADMIN": "Administrateur",
+          "MANAGER": "Manager",
+          "USER": "Utilisateur",
+          "VIEWER": "Lecteur"
+        },
+        "submit": "Envoyer l'invitation",
+        "submitting": "Envoi en cours...",
+        "cancel": "Annuler"
+      },
+      "pagination": {
+        "info": "{from}–{to} sur {total}"
+      }
+    },
+    "subscriptionRedirect": {
+      "loading": "Redirection..."
+    },
+    "admin": {
+      "bookings": {
+        "loading": "Chargement des réservations...",
+        "loadError": "Impossible de charger les réservations",
+        "deleteError": "Erreur lors de la suppression",
+        "validateError": "Erreur lors de la validation du virement",
+        "confirmDelete": "Supprimer définitivement cette réservation ?",
+        "confirmValidate": "Confirmer la réception du virement et activer ce booking ?",
+        "title": "Gestion des réservations",
+        "subtitle": "Toutes les réservations de la plateforme",
+        "stats": {
+          "total": "Total",
+          "pendingBankTransfer": "Virements à valider",
+          "pendingCarrier": "En attente transporteur",
+          "accepted": "Acceptées",
+          "rejected": "Rejetées"
+        },
+        "search": {
+          "label": "Recherche",
+          "placeholder": "N° booking, transporteur, route, palettes, poids, CBM..."
+        },
+        "filter": {
+          "label": "Statut",
+          "all": "Tous les statuts"
+        },
+        "status": {
+          "PENDING_PAYMENT": "Paiement en attente",
+          "PENDING_BANK_TRANSFER": "Virement à valider",
+          "PENDING": "En attente transporteur",
+          "ACCEPTED": "Accepté",
+          "REJECTED": "Rejeté",
+          "CANCELLED": "Annulé"
+        },
+        "table": {
+          "bookingNumber": "N° Booking",
+          "route": "Route",
+          "cargo": "Cargo",
+          "carrier": "Transporteur",
+          "status": "Statut",
+          "date": "Date",
+          "actions": "Actions",
+          "empty": "Aucune réservation trouvée",
+          "pallets": "pal."
+        },
+        "menu": {
+          "viewDetails": "Voir les détails",
+          "validateTransfer": "Valider virement",
+          "delete": "Supprimer"
+        },
+        "modal": {
+          "title": "Détails de la réservation",
+          "bookingNumber": "N° Booking",
+          "status": "Statut",
+          "routeSection": "Route",
+          "origin": "Origine",
+          "destination": "Destination",
+          "cargoSection": "Cargo & Transporteur",
+          "carrier": "Transporteur",
+          "containerType": "Type conteneur",
+          "pallets": "Palettes",
+          "weight": "Poids",
+          "volume": "Volume",
+          "priceSection": "Prix",
+          "datesSection": "Dates",
+          "createdAt": "Créée le",
+          "updatedAt": "Mise à jour",
+          "validateButton": "✓ Valider le virement",
+          "validating": "Validation...",
+          "close": "Fermer",
+          "none": "—"
+        }
+      },
+      "csvRates": {
+        "title": "Gestion des tarifs CSV",
+        "subtitle": "Interface d'administration pour gérer les fichiers CSV de tarifs maritimes",
+        "adminBadge": "ADMIN SEULEMENT",
+        "cardTitle": "Configurations CSV actives",
+        "cardDescription": "Liste de toutes les compagnies avec fichiers CSV configurés",
+        "loadError": "Erreur lors du chargement des fichiers",
+        "confirmDelete": "Êtes-vous sûr de vouloir supprimer le fichier {filename} ?",
+        "deleteSuccess": "Fichier supprimé: {filename}",
+        "deleteError": "Erreur: {message}",
+        "deleteFailedFallback": "Impossible de supprimer le fichier",
+        "empty": "Aucun fichier trouvé. Uploadez un fichier CSV pour commencer.",
+        "table": {
+          "filename": "Fichier",
+          "size": "Taille",
+          "rows": "Lignes",
+          "uploadedAt": "Date d'upload",
+          "email": "Email",
+          "actions": "Actions",
+          "rowCount": "{count} lignes"
+        },
+        "infoTitle": "Informations",
+        "info": {
+          "formatLabel": "Format CSV requis :",
+          "formatBody": "Consultez la documentation pour la liste complète des colonnes obligatoires.",
+          "sizeLabel": "Taille maximale :",
+          "sizeBody": "10 MB par fichier",
+          "updateLabel": "Mise à jour :",
+          "updateBody": "Uploader un nouveau fichier pour une compagnie existante écrasera l'ancien fichier.",
+          "validationLabel": "Validation :",
+          "validationBody": "Le système valide automatiquement la structure du CSV lors de l'upload."
+        }
+      },
+      "documents": {
+        "title": "Gestion des Documents",
+        "subtitle": "Liste de tous les documents des devis CSV",
+        "loading": "Chargement des documents...",
+        "loadError": "Impossible de charger les documents",
+        "deleteError": "Erreur lors de la suppression",
+        "confirmDelete": "Supprimer définitivement ce document ?",
+        "downloadError": "Erreur lors du téléchargement du document: {message}",
+        "unknownError": "Erreur inconnue",
+        "stats": {
+          "totalDocs": "Total Documents",
+          "bookingsWithDocs": "Devis avec Documents",
+          "filtered": "Documents Filtrés"
+        },
+        "filters": {
+          "search": "Recherche",
+          "searchPlaceholder": "Nom, type, route...",
+          "quoteNumber": "Numéro de Devis",
+          "quoteNumberPlaceholder": "Ex: #F2CAD5E1",
+          "user": "Utilisateur",
+          "allUsers": "Tous les utilisateurs"
+        },
+        "table": {
+          "name": "Nom du Document",
+          "type": "Type",
+          "quoteNumber": "Numéro de Devis",
+          "route": "Route",
+          "status": "Statut",
+          "user": "Utilisateur",
+          "actions": "Actions",
+          "empty": "Aucun document trouvé"
+        },
+        "menu": {
+          "download": "Télécharger",
+          "delete": "Supprimer"
+        },
+        "pagination": {
+          "previous": "Précédent",
+          "next": "Suivant",
+          "showing": "Affichage de",
+          "to": "à",
+          "on": "sur",
+          "results": "résultats",
+          "perPage": "Par page:"
+        }
+      },
+      "logs": {
+        "title": "Logs système",
+        "subtitle": "Visualisation et export des logs applicatifs en temps réel",
+        "refresh": "Actualiser",
+        "export": "Exporter",
+        "exporting": "Export...",
+        "downloadCsv": "Télécharger CSV",
+        "downloadJson": "Télécharger JSON",
+        "stats": {
+          "total": "Total logs",
+          "errors": "Erreurs",
+          "warnings": "Warnings",
+          "info": "Info"
+        },
+        "filters": {
+          "title": "Filtres",
+          "service": "Service",
+          "level": "Niveau",
+          "search": "Recherche",
+          "searchPlaceholder": "Texte libre...",
+          "start": "Début",
+          "end": "Fin",
+          "limit": "Limite",
+          "apply": "Filtrer",
+          "all": "Tous"
+        },
+        "errorBanner": "Impossible de contacter le log-exporter :",
+        "errorHint": "Vérifiez que le backend et le log-exporter sont démarrés.",
+        "loading": "Chargement...",
+        "entries": "{count, plural, one {# entrée} other {# entrées}}",
+        "clickHint": "Cliquer sur une ligne pour les détails",
+        "empty": "Aucun log trouvé pour ces filtres",
+        "table": {
+          "timestamp": "Timestamp",
+          "service": "Service",
+          "level": "Niveau",
+          "context": "Contexte",
+          "message": "Message",
+          "req": "Req / Status"
+        },
+        "detail": {
+          "timestamp": "Timestamp",
+          "requestId": "Request ID",
+          "duration": "Durée",
+          "fullMessage": "Message complet"
+        }
+      },
+      "organizations": {
+        "loading": "Chargement des organisations...",
+        "loadError": "Impossible de charger les organisations",
+        "createError": "Échec de la création de l'organisation",
+        "updateError": "Échec de la mise à jour de l'organisation",
+        "siretError": "Erreur lors de la vérification du SIRET",
+        "siretApproveError": "Erreur lors de l'approbation",
+        "siretRejectError": "Erreur lors du refus",
+        "siretInvalid": "SIRET invalide ou introuvable.",
+        "siretVerified": "SIRET vérifié avec succès !\nEntreprise: {companyName}\nAdresse: {address}",
+        "confirmApprove": "Confirmer l'approbation manuelle du SIRET/SIREN de cette organisation ?",
+        "confirmReject": "Confirmer le refus du SIRET/SIREN ? L'organisation ne pourra plus effectuer d'achats.",
+        "title": "Gestion des organisations",
+        "subtitle": "Gérer toutes les organisations du système",
+        "create": "+ Créer une organisation",
+        "types": {
+          "FREIGHT_FORWARDER": "Commissionnaire de transport",
+          "CARRIER": "Transporteur",
+          "SHIPPER": "Chargeur"
+        },
+        "active": "Active",
+        "inactive": "Inactive",
+        "scac": "SCAC",
+        "siren": "SIREN",
+        "siret": "SIRET",
+        "verified": "Vérifié",
+        "notVerified": "Non vérifié",
+        "notProvided": "Non renseigné",
+        "email": "Email",
+        "location": "Localisation",
+        "edit": "Modifier",
+        "verifying": "...",
+        "verifyApi": "Vérifier API",
+        "approveSiret": "Approuver SIRET",
+        "rejectSiret": "Rejeter SIRET",
+        "modal": {
+          "createTitle": "Créer une nouvelle organisation",
+          "editTitle": "Modifier l'organisation",
+          "name": "Nom de l'organisation *",
+          "type": "Type *",
+          "scacLabel": "Code SCAC *",
+          "sirenLabel": "SIREN",
+          "siretLabel": "SIRET (14 chiffres)",
+          "siretPlaceholder": "12345678901234",
+          "eoriLabel": "EORI",
+          "contactPhone": "Téléphone de contact",
+          "contactEmail": "Email de contact",
+          "street": "Rue *",
+          "city": "Ville *",
+          "postalCode": "Code postal *",
+          "state": "État / Région",
+          "country": "Pays *",
+          "logoUrl": "URL du logo",
+          "cancel": "Annuler",
+          "create": "Créer",
+          "update": "Mettre à jour"
+        }
+      },
+      "users": {
+        "loading": "Chargement des utilisateurs...",
+        "loadError": "Impossible de charger les données",
+        "createError": "Échec de la création de l'utilisateur",
+        "updateError": "Échec de la mise à jour de l'utilisateur",
+        "deleteError": "Échec de la suppression de l'utilisateur",
+        "title": "Gestion des utilisateurs",
+        "subtitle": "Gérer tous les utilisateurs du système",
+        "create": "+ Créer un utilisateur",
+        "table": {
+          "user": "Utilisateur",
+          "email": "Email",
+          "role": "Rôle",
+          "organization": "Organisation",
+          "status": "Statut",
+          "actions": "Actions"
+        },
+        "active": "Actif",
+        "inactive": "Inactif",
+        "edit": "Modifier",
+        "delete": "Supprimer",
+        "roles": {
+          "USER": "Utilisateur",
+          "MANAGER": "Manager",
+          "ADMIN": "Admin",
+          "VIEWER": "Lecteur"
+        },
+        "modal": {
+          "createTitle": "Créer un nouvel utilisateur",
+          "editTitle": "Modifier l'utilisateur",
+          "email": "Email",
+          "emailReadOnly": "Email (lecture seule)",
+          "firstName": "Prénom",
+          "lastName": "Nom",
+          "role": "Rôle",
+          "organization": "Organisation",
+          "selectOrganization": "Sélectionner une organisation",
+          "password": "Mot de passe (laisser vide pour génération automatique)",
+          "cancel": "Annuler",
+          "create": "Créer",
+          "update": "Mettre à jour"
+        },
+        "deleteConfirm": {
+          "title": "Confirmer la suppression",
+          "message": "Êtes-vous sûr de vouloir supprimer l'utilisateur {firstName} {lastName} ? Cette action est irréversible.",
+          "cancel": "Annuler",
+          "confirm": "Supprimer"
+        }
+      }
+    },
+    "subscription": {
+      "currentPlan": "Plan actuel",
+      "refresh": "Actualiser",
+      "refreshing": "Actualisation...",
+      "statusActive": "Actif",
+      "cancelAtPeriodEnd": "Annulation prévue",
+      "manageBilling": "Gérer la facturation",
+      "manageBillingLoading": "Chargement...",
+      "licenseUsage": "Utilisation des licences",
+      "unlimited": "Illimité",
+      "currentPeriod": "Période actuelle : jusqu'au",
+      "availablePlans": "Plans disponibles",
+      "billingMonthly": "Mensuel",
+      "billingYearly": "Annuel",
+      "yearlySaving": "-1 mois",
+      "perYear": "/an",
+      "perMonth": "/mois",
+      "customQuote": "Sur devis",
+      "maxUsers": "Jusqu'à {count} utilisateurs",
+      "unlimitedUsers": "Utilisateurs illimités",
+      "currentPlanButton": "Plan actuel",
+      "contactUs": "Nous contacter",
+      "upgradeButton": "Passer à ce plan",
+      "upgradeLoading": "Chargement...",
+      "downgrade": "Rétrograder via Facturation",
+      "successMessage": "Votre abonnement a été mis à jour avec succès !",
+      "updatingMessage": "Mise à jour...",
+      "canceledMessage": "Le paiement a été annulé. Votre abonnement n'a pas été modifié.",
+      "checkoutError": "Erreur lors de la création de la session de paiement",
+      "portalError": "Erreur lors de l'ouverture du portail de facturation",
+      "noLicenses": "Aucune licence disponible. Passez à un plan supérieur pour ajouter des utilisateurs.",
+      "licensesRemaining": "Plus que {count} licence(s) disponible(s)."
+    },
+    "wiki": {
+      "title": "Wiki Maritime",
+      "description": "Base de connaissances sur l'import/export maritime. Cliquez sur un sujet pour en savoir plus.",
+      "helpText": "Ces guides sont régulièrement mis à jour avec les dernières réglementations et bonnes pratiques du secteur maritime.",
+      "needHelp": "Besoin d'aide ?",
+      "topics": {
+        "incoterms": {
+          "title": "Incoterms 2020",
+          "description": "Les règles internationales pour l'interprétation des termes commerciaux"
+        },
+        "documents": {
+          "title": "Documents de Transport",
+          "description": "Les documents essentiels pour le transport maritime"
+        },
+        "containers": {
+          "title": "Conteneurs et Types de Cargo",
+          "description": "Guide complet des types de conteneurs maritimes"
+        },
+        "lclFcl": {
+          "title": "LCL vs FCL",
+          "description": "Différences entre groupage et conteneur complet"
+        },
+        "customs": {
+          "title": "Procédures Douanières",
+          "description": "Guide des formalités douanières import/export"
+        },
+        "insurance": {
+          "title": "Assurance Maritime",
+          "description": "Protection des marchandises en transit"
+        },
+        "freight": {
+          "title": "Calcul du Fret Maritime",
+          "description": "Comment sont calculés les coûts de transport"
+        },
+        "ports": {
+          "title": "Ports et Routes Maritimes",
+          "description": "Les principales routes commerciales mondiales"
+        },
+        "vgm": {
+          "title": "VGM (Verified Gross Mass)",
+          "description": "Obligation de pesée des conteneurs (SOLAS)"
+        },
+        "imdg": {
+          "title": "Marchandises Dangereuses (IMDG)",
+          "description": "Transport de matières dangereuses par mer"
+        },
+        "letterOfCredit": {
+          "title": "Lettre de Crédit (L/C)",
+          "description": "Instrument de paiement international sécurisé"
+        },
+        "transitTime": {
+          "title": "Transit Time et Délais",
+          "description": "Comprendre les délais en transport maritime"
+        }
+      }
+    },
+    "trackTrace": {
+      "title": "Suivi des expéditions",
+      "description": "Suivez vos expéditions en temps réel. Entrez votre numéro de tracking et sélectionnez le transporteur.",
+      "searchCard": {
+        "title": "Rechercher une expédition",
+        "description": "Entrez votre numéro de conteneur, connaissement (B/L) ou référence de réservation",
+        "selectCarrier": "Sélectionnez le transporteur",
+        "trackingNumber": "Numéro de tracking",
+        "searchButton": "Rechercher",
+        "showMap": "Afficher la carte maritime",
+        "hideMap": "Masquer la carte maritime"
+      },
+      "errors": {
+        "noTrackingNumber": "Veuillez entrer un numéro de tracking",
+        "noCarrier": "Veuillez sélectionner un transporteur"
+      },
+      "map": {
+        "title": "Carte Maritime Mondiale",
+        "subtitle": "Position des navires en temps réel",
+        "minimize": "Réduire",
+        "fullscreen": "Plein écran",
+        "loading": "Chargement de la carte...",
+        "connecting": "Connexion à MarineTraffic",
+        "legend": "Légende",
+        "cargo": "Cargos",
+        "tankers": "Tankers",
+        "passengers": "Passagers",
+        "activeVessels": "Navires actifs",
+        "worldPorts": "Ports mondiaux",
+        "dataSource": "Données fournies par MarineTraffic - Mise à jour en temps réel",
+        "openOnSite": "Ouvrir sur MarineTraffic",
+        "iframeTitle": "Carte maritime en temps réel"
+      },
+      "history": {
+        "title": "Historique des recherches",
+        "clearAll": "Effacer tout",
+        "empty": "Aucune recherche récente",
+        "emptyHint": "Vos recherches apparaîtront ici"
+      },
+      "help": {
+        "containerNumber": {
+          "title": "Numéro de conteneur",
+          "description": "Format standard: 4 lettres + 7 chiffres (ex: MSKU1234567). Le préfixe indique généralement le propriétaire du conteneur."
+        },
+        "billOfLading": {
+          "title": "Connaissement (B/L)",
+          "description": "Le numéro de connaissement (Bill of Lading) est fourni par le transporteur lors de la confirmation de réservation. Le format varie selon le transporteur."
+        },
+        "bookingRef": {
+          "title": "Référence de réservation",
+          "description": "Numéro de réservation attribué par le transporteur lors de la réservation initiale de l'espace sur le navire."
+        }
+      },
+      "infoBox": {
+        "title": "Comment fonctionne le suivi ?",
+        "description": "Cette fonctionnalité vous redirige vers le site officiel du transporteur pour obtenir les informations de suivi les plus récentes. Les données affichées proviennent directement du système du transporteur."
+      },
+      "timeAgo": {
+        "justNow": "À l'instant",
+        "minutesAgo": "Il y a {count}min",
+        "hoursAgo": "Il y a {count}h",
+        "daysAgo": "Il y a {count}j"
+      },
+      "carriers": {
+        "containerOrBl": "N° conteneur ou B/L",
+        "containerBlOrBooking": "N° conteneur, B/L ou réservation",
+        "containerOnly": "N° conteneur"
+      }
+    },
+    "userDocuments": {
+      "title": "Mes Documents",
+      "description": "Gérez tous les documents de vos réservations",
+      "loading": "Chargement des documents...",
+      "error": "Erreur lors du chargement des documents",
+      "stats": {
+        "total": "Total Documents",
+        "withDocuments": "Réservations avec Documents",
+        "filtered": "Documents Filtrés"
+      },
+      "filters": {
+        "search": "Recherche",
+        "searchPlaceholder": "Nom, type, route, transporteur...",
+        "quoteNumber": "Numéro de Devis",
+        "status": "Statut",
+        "allStatuses": "Tous les statuts"
+      },
+      "table": {
+        "documentName": "Nom du Document",
+        "type": "Type",
+        "quoteNumber": "N° de Devis",
+        "route": "Route",
+        "carrier": "Transporteur",
+        "status": "Statut",
+        "actions": "Actions"
+      },
+      "statuses": {
+        "PENDING": "En attente",
+        "ACCEPTED": "Accepté",
+        "REJECTED": "Refusé",
+        "CANCELLED": "Annulé"
+      },
+      "empty": {
+        "noDocuments": "Aucun document trouvé. Ajoutez des documents à vos réservations.",
+        "noMatch": "Aucun document ne correspond aux filtres sélectionnés."
+      },
+      "pagination": {
+        "previous": "Précédent",
+        "next": "Suivant",
+        "perPage": "Par page :",
+        "showing": "Affichage de {from} à {to} sur {total} résultats"
+      },
+      "actions": {
+        "download": "Télécharger",
+        "replace": "Remplacer"
+      },
+      "export": {
+        "fileName": "Nom du fichier",
+        "type": "Type",
+        "quoteNumber": "N° de Devis",
+        "route": "Route",
+        "carrier": "Transporteur",
+        "status": "Statut",
+        "uploadedAt": "Date d'ajout"
+      },
+      "addDocument": {
+        "buttonLabel": "Ajouter un document",
+        "modalTitle": "Ajouter un document",
+        "selectBooking": "Sélectionner une réservation",
+        "selectBookingPlaceholder": "-- Choisir une réservation --",
+        "filesToAdd": "Fichiers à ajouter",
+        "acceptedFormats": "Formats acceptés: PDF, Word, Excel, Images (max 10 fichiers)",
+        "uploading": "Envoi en cours...",
+        "add": "Ajouter",
+        "cancel": "Annuler",
+        "successMessage": "Documents ajoutés avec succès!",
+        "errorMessage": "Erreur lors de l'ajout des documents",
+        "noBookingError": "Veuillez sélectionner une réservation et au moins un fichier"
+      },
+      "replaceDocument": {
+        "modalTitle": "Remplacer le document",
+        "currentDocument": "Document actuel :",
+        "booking": "Réservation",
+        "newFile": "Nouveau fichier",
+        "acceptedFormats": "Formats acceptés: PDF, Word, Excel, Images",
+        "replacing": "Remplacement en cours...",
+        "replace": "Remplacer",
+        "cancel": "Annuler",
+        "successMessage": "Document remplacé avec succès!",
+        "errorMessage": "Erreur lors du remplacement du document",
+        "noFileError": "Veuillez sélectionner un fichier de remplacement"
+      },
+      "downloadError": "Erreur lors du téléchargement du document"
+    },
+    "wikiPages": {
+      "backToWiki": "Retour au Wiki",
+      "responsibleLabel": "Responsable",
+      "includesLabel": "Couvert",
+      "excludesLabel": "Exclu",
+      "mandatoryLabel": "Obligatoire",
+      "optionalLabel": "Conditionnel",
+      "incoterms": {
+        "title": "Incoterms 2020",
+        "description": "Les Incoterms (International Commercial Terms) sont des règles publiées par la Chambre de Commerce Internationale (ICC) qui définissent les responsabilités des vendeurs et acheteurs dans les transactions internationales. La version 2020 est entrée en vigueur le 1er janvier 2020.",
+        "keyPointsTitle": "Points Clés",
+        "keyPoints": [
+          "11 incoterms dans la version 2020",
+          "Applicables à tous les modes de transport (7 règles) ou maritime uniquement (4 règles)",
+          "Définissent le transfert de risque, les coûts, et les obligations documentaires",
+          "Ne déterminent pas le transfert de propriété ni les conditions de paiement",
+          "Inclusion obligatoire dans le contrat de vente"
+        ],
+        "categoriesTitle": "Catégories",
+        "categorySections": [
+          { "name": "Départ", "description": "Obligations minimales pour le vendeur", "terms": ["EXW"] },
+          { "name": "Arrivée", "description": "Obligations maximales pour le vendeur", "terms": ["DDP"] },
+          { "name": "Maritime uniquement", "description": "Pour le transport maritime et voies navigables intérieures", "terms": ["FAS", "FOB", "CFR", "CIF"] }
+        ],
+        "tableTitle": "Incoterms 2020 — Récapitulatif",
+        "colCode": "Code",
+        "colName": "Nom",
+        "colDescription": "Description",
+        "colRisk": "Transfert de risque",
+        "colTransport": "Transport",
+        "list": [
+          { "code": "EXW", "name": "Ex Works", "description": "Le vendeur met les marchandises à disposition dans ses locaux. Obligations minimales pour le vendeur.", "risk": "Locaux du vendeur", "transport": "Tous modes" },
+          { "code": "FCA", "name": "Free Carrier", "description": "Le vendeur livre les marchandises à un transporteur désigné ou à une autre personne nommée par l'acheteur.", "risk": "Remise au transporteur", "transport": "Tous modes" },
+          { "code": "CPT", "name": "Carriage Paid To", "description": "Le vendeur paie le fret jusqu'à la destination, mais le risque se transfère au premier transporteur.", "risk": "Premier transporteur", "transport": "Tous modes" },
+          { "code": "CIP", "name": "Carriage and Insurance Paid To", "description": "Identique à CPT avec assurance. Exige une couverture ICC-A (améliorée par rapport à 2010).", "risk": "Premier transporteur", "transport": "Tous modes" },
+          { "code": "DAP", "name": "Delivered at Place", "description": "Le vendeur livre lorsque les marchandises sont mises à disposition de l'acheteur à la destination nommée.", "risk": "À destination", "transport": "Tous modes" },
+          { "code": "DPU", "name": "Delivered at Place Unloaded", "description": "Nouveau en 2020 : remplace DAT. Le vendeur décharge à l'endroit nommé.", "risk": "Après déchargement", "transport": "Tous modes" },
+          { "code": "DDP", "name": "Delivered Duty Paid", "description": "Obligation maximale pour le vendeur : livré, droits payés. Risque jusqu'à destination finale.", "risk": "Destination finale", "transport": "Tous modes" },
+          { "code": "FAS", "name": "Free Alongside Ship", "description": "Le vendeur livre les marchandises le long du navire nommé. Maritime uniquement.", "risk": "Le long du navire", "transport": "Maritime uniquement" },
+          { "code": "FOB", "name": "Free on Board", "description": "Le vendeur livre les marchandises à bord du navire. Le plus courant pour les vracs.", "risk": "À bord du navire", "transport": "Maritime uniquement" },
+          { "code": "CFR", "name": "Cost and Freight", "description": "Le vendeur paie le fret jusqu'au port de destination, mais le risque se transfère à bord à l'origine.", "risk": "À bord à l'origine", "transport": "Maritime uniquement" },
+          { "code": "CIF", "name": "Cost Insurance and Freight", "description": "Identique à CFR mais avec assurance minimale (ICC-C). Courant dans le commerce international.", "risk": "À bord à l'origine", "transport": "Maritime uniquement" }
+        ],
+        "diagramTitle": "Diagramme de Transfert de Risque",
+        "sellerResponsibility": "Responsabilité du vendeur",
+        "buyerResponsibility": "Responsabilité de l'acheteur",
+        "tipsTitle": "Conseils Pratiques",
+        "tips": [
+          "Pour les expéditions FCL maritimes, préférer FCA ou FOB plutôt que EXW",
+          "Pour le fret aérien, éviter FOB — utiliser FCA à la place",
+          "DDP oblige le vendeur à gérer les douanes dans le pays de l'acheteur — complexe",
+          "CIP exige désormais une couverture ICC-A (vs. ICC-C pour CIF)",
+          "Toujours préciser le lieu nommé exact après le code incoterm"
+        ]
+      },
+      "assurance": {
+        "title": "Assurance Maritime",
+        "description": "L'assurance maritime protège les marchandises pendant le transport international. Elle est indispensable pour le commerce international et souvent exigée par les banques pour les lettres de crédit.",
+        "iccTitle": "Clauses ICC (Institute Cargo Clauses)",
+        "clauses": [
+          {
+            "name": "ICC A",
+            "level": "Tous risques",
+            "includes": ["Toutes causes accidentelles", "Calamités naturelles", "Avarie commune", "Jet à la mer", "Vol", "Contamination"],
+            "excludes": ["Faute intentionnelle", "Usure normale", "Retard", "Guerre (extension nécessaire)", "Grèves (extension nécessaire)"]
+          },
+          {
+            "name": "ICC B",
+            "level": "Intermédiaire",
+            "includes": ["Incendie / explosion", "Échouement / naufrage", "Collision / chavirement", "Avarie commune", "Séisme / raz-de-marée"],
+            "excludes": ["Vol", "Contamination", "Humidité", "Guerre (extension nécessaire)"]
+          },
+          {
+            "name": "ICC C",
+            "level": "Basique",
+            "includes": ["Incendie / explosion", "Échouement / naufrage du navire", "Collision", "Avarie commune"],
+            "excludes": ["Vol", "Avaries particulières", "Humidité", "Contamination", "Guerre (extension nécessaire)"]
+          }
+        ],
+        "extensionsTitle": "Extensions de Garantie",
+        "extensions": [
+          { "name": "Clause guerre", "description": "Couvre les pertes dues à la guerre, terrorisme, piraterie" },
+          { "name": "Clause grèves", "description": "Couvre les pertes dues aux grèves, émeutes, troubles civils" },
+          { "name": "Clause reefer", "description": "Couverture spécifique pour les marchandises sous température contrôlée" },
+          { "name": "Clause pont", "description": "Couverture pour marchandises arrimées sur le pont (souvent exclues)" },
+          { "name": "Clause groupage", "description": "Spécifique aux expéditions LCL (conteneurs partagés)" }
+        ],
+        "processTitle": "Processus d'Assurance",
+        "processSteps": [
+          "Demande de devis auprès de l'assureur ou courtier",
+          "Vérification de la marchandise et des garanties requises",
+          "Émission du certificat d'assurance",
+          "Déclaration de l'expédition (si police flottante)",
+          "En cas de sinistre : notification immédiate + constat d'avaries"
+        ],
+        "valueTitle": "Valeur Assurée",
+        "valueFormula": "Valeur assurée = (Valeur facture + fret + 10% bénéfice) × 1,1",
+        "valueNote": "Les 10% couvrent le bénéfice espéré et la majoration commerciale généralement acceptée"
+      },
+      "calculFret": {
+        "title": "Calcul du Fret",
+        "description": "Comprendre la tarification du fret est essentiel pour anticiper tous les coûts. Le fret maritime est composé d'un taux de base plus de nombreuses surcharges qui peuvent significativement augmenter le coût final.",
+        "surchargesTitle": "Principales Surcharges",
+        "colCode": "Code",
+        "colName": "Nom",
+        "colDescription": "Description",
+        "colVariation": "Variation",
+        "surcharges": [
+          { "code": "BAF", "name": "Bunker Adjustment Factor", "description": "Ajustement du coût du carburant", "variation": "Mensuel, basé sur le prix du pétrole" },
+          { "code": "CAF", "name": "Currency Adjustment Factor", "description": "Compensation des fluctuations de change", "variation": "Par devise et par route" },
+          { "code": "PSS", "name": "Peak Season Surcharge", "description": "Ajoutée en haute saison (août–oct)", "variation": "Saisonnière" },
+          { "code": "GRI", "name": "General Rate Increase", "description": "Augmentation générale annuelle des taux", "variation": "Annoncée trimestriellement" },
+          { "code": "THC", "name": "Terminal Handling Charge", "description": "Coûts de manutention au terminal portuaire", "variation": "Fixe par port" },
+          { "code": "EBS", "name": "Emergency Bunker Surcharge", "description": "Surcharge temporaire pour hausse du carburant", "variation": "Ponctuelle" },
+          { "code": "ISPS", "name": "International Ship & Port Security", "description": "Coût de conformité sécurité portuaire", "variation": "Fixe" },
+          { "code": "B/L Fee", "name": "Frais de Connaissement", "description": "Frais d'émission du document B/L", "variation": "Fixe par B/L" }
+        ],
+        "additionalCostsTitle": "Coûts Annexes",
+        "colCost": "Coût typique",
+        "additionalCosts": [
+          { "name": "Pré-acheminement", "description": "Transport routier de l'entrepôt au port d'origine", "typical": "Variable selon distance" },
+          { "name": "Frais origine", "description": "THC, documentation, douane à l'origine", "typical": "150–400 USD" },
+          { "name": "Fret maritime", "description": "Taux de base + surcharges", "typical": "Poste principal" },
+          { "name": "Frais destination", "description": "THC, manutention, frais documents à destination", "typical": "200–500 USD" },
+          { "name": "Droits de douane", "description": "Droits à l'importation selon code HS", "typical": "0–25% de la valeur" },
+          { "name": "Post-acheminement", "description": "Transport routier du port de destination à l'entrepôt", "typical": "Variable selon distance" }
+        ],
+        "exampleTitle": "Exemple de Cotation FCL (40' HC)",
+        "colItem": "Poste",
+        "colAmount": "Montant",
+        "exampleItems": [
+          { "item": "Fret maritime de base", "amount": "1 200 USD" },
+          { "item": "BAF (Bunker)", "amount": "350 USD" },
+          { "item": "CAF (Devise)", "amount": "50 USD" },
+          { "item": "THC Origine", "amount": "180 USD" },
+          { "item": "THC Destination", "amount": "220 USD" },
+          { "item": "Frais B/L", "amount": "55 USD" },
+          { "item": "ISPS", "amount": "30 USD" },
+          { "item": "Pré-acheminement", "amount": "250 USD" },
+          { "item": "Total", "amount": "2 335 USD" }
+        ]
+      },
+      "conteneurs": {
+        "title": "Conteneurs",
+        "description": "Les conteneurs sont la base du transport maritime. Connaître les différents types et leurs dimensions est essentiel pour planifier vos expéditions.",
+        "standardTitle": "Types de Conteneurs Standard",
+        "colDimensions": "Dimensions (L×l×H)",
+        "colInternal": "Intérieur",
+        "colDoor": "Ouverture portes",
+        "colVolume": "Volume",
+        "colPayload": "Charge max",
+        "containers": [
+          { "type": "20' Dry", "description": "Conteneur standard pour marchandises générales", "internal": "5,90m × 2,35m × 2,39m", "door": "2,34m × 2,28m", "volume": "33,2 m³", "payload": "21 727 kg" },
+          { "type": "40' Dry", "description": "Conteneur standard, double longueur du 20'", "internal": "12,03m × 2,35m × 2,39m", "door": "2,34m × 2,28m", "volume": "67,7 m³", "payload": "26 500 kg" },
+          { "type": "40' High Cube", "description": "Conteneur surélevé — 30cm de plus que le standard", "internal": "12,03m × 2,35m × 2,69m", "door": "2,34m × 2,58m", "volume": "76,3 m³", "payload": "26 460 kg" },
+          { "type": "20' Reefer", "description": "Conteneur frigorifique (-25°C à +25°C)", "internal": "5,50m × 2,29m × 2,25m", "door": "2,28m × 2,20m", "volume": "28,4 m³", "payload": "21 000 kg" },
+          { "type": "40' Reefer", "description": "Conteneur frigorifique 40 pieds pour grosses cargaisons réfrigérées", "internal": "11,56m × 2,29m × 2,25m", "door": "2,28m × 2,20m", "volume": "59,8 m³", "payload": "22 000 kg" },
+          { "type": "20' Open Top", "description": "Conteneur toit ouvert pour marchandises dépassant en hauteur", "internal": "5,90m × 2,35m × 2,35m", "door": "2,34m × 2,28m", "volume": "32,6 m³", "payload": "20 000 kg" },
+          { "type": "20' Flat Rack", "description": "Plateau pour marchandises hors-gabarit ou très lourdes", "internal": "5,62m × 2,24m × 2,03m", "door": "N/A", "volume": "N/A", "payload": "45 000 kg" }
+        ],
+        "specialEquipmentTitle": "Équipements Spéciaux",
+        "specialEquipment": [
+          { "name": "ISO Tank", "description": "Pour liquides, produits chimiques, denrées alimentaires en vrac" },
+          { "name": "Bulk Container", "description": "Pour vracs secs (céréales, minéraux) — trappe sur le dessus" },
+          { "name": "Plateforme (Bolster)", "description": "Pour marchandises hors-gabarit sans parois latérales" },
+          { "name": "Conteneur Ventilé", "description": "Ventilation naturelle pour produits agricoles (café, cacao)" }
+        ],
+        "selectionTitle": "Guide de Sélection du Conteneur",
+        "colCondition": "Situation",
+        "colRecommendation": "Recommandation",
+        "selectionGuide": [
+          { "condition": "Marchandises générales standard", "recommendation": "20' ou 40' Dry selon le volume" },
+          { "condition": "Marchandises sensibles à la température", "recommendation": "Reefer 20' ou 40'" },
+          { "condition": "Marchandises dépassant en hauteur (> 2,2m)", "recommendation": "Open Top ou Flat Rack" },
+          { "condition": "Marchandises hors-gabarit / très lourdes", "recommendation": "Flat Rack ou Plateforme" },
+          { "condition": "Liquides en vrac", "recommendation": "ISO Tank" },
+          { "condition": "Volume < 15 m³", "recommendation": "Envisager le LCL" }
+        ]
+      },
+      "documentsTransport": {
+        "title": "Documents de Transport",
+        "description": "Les documents de transport maritime sont indispensables pour la circulation physique et commerciale des marchandises. Chaque document joue un rôle spécifique dans la chaîne logistique.",
+        "mainDocumentsTitle": "Principaux Documents",
+        "colType": "Type",
+        "colVariants": "Variantes",
+        "documents": [
+          {
+            "name": "Connaissement (B/L)",
+            "type": "Maritime",
+            "description": "Le document clé du transport maritime. Il a trois fonctions : contrat de transport, reçu de marchandises, et titre représentatif.",
+            "types": ["B/L Original (négociable)", "Sea Waybill (non-négociable)", "Telex Release (libération électronique)", "Express B/L"]
+          },
+          {
+            "name": "Facture Commerciale",
+            "type": "Commercial",
+            "description": "Document émis par le vendeur décrivant les marchandises et le prix de vente. Base pour le dédouanement.",
+            "types": ["Facture pro-forma", "Facture commerciale", "Facture consulaire (certains pays)"]
+          },
+          {
+            "name": "Liste de Colisage",
+            "type": "Commercial",
+            "description": "Description détaillée du conditionnement, des quantités, poids et dimensions de chaque colis.",
+            "types": ["Liste neutre", "Liste détaillée"]
+          },
+          {
+            "name": "Certificat d'Origine",
+            "type": "Douanier",
+            "description": "Certifie le pays d'origine des marchandises pour le dédouanement et les droits préférentiels.",
+            "types": ["EUR.1 (préférences UE)", "Form A (SGP)", "CO chambre de commerce", "REX (Exportateur Enregistré)"]
+          },
+          {
+            "name": "Certificat d'Assurance",
+            "type": "Assurance",
+            "description": "Preuve d'assurance couvrant les marchandises pendant le transport. Souvent exigée par les banques pour L/C.",
+            "types": ["Police flottante", "Certificat individuel", "Déclaration d'assurance"]
+          },
+          {
+            "name": "Déclaration en Douane",
+            "type": "Douanier",
+            "description": "Obligatoire pour le dédouanement export (EX) et import (IM). Déposée électroniquement (DELTA en France).",
+            "types": ["Déclaration export (EX1)", "Déclaration import (IM4)", "Transit (T1, T2)"]
+          }
+        ],
+        "additionalDocsTitle": "Autres Documents Importants",
+        "additionalDocs": [
+          { "name": "EUR.1 / EUR-MED", "description": "Preuve d'origine pour droits préférentiels dans les accords UE" },
+          { "name": "Certificat Sanitaire / Phytosanitaire", "description": "Requis pour produits alimentaires, plantes, animaux" },
+          { "name": "Certificat de Libre Vente", "description": "Certifie que le produit est légalement commercialisé dans le pays exportateur" },
+          { "name": "Certificat Marchandises Dangereuses", "description": "Déclaration IMDG/MSDS pour marchandises dangereuses" },
+          { "name": "Certificat de Fumigation", "description": "Confirme le traitement des emballages en bois" }
+        ],
+        "blFocusTitle": "Le B/L — Document Essentiel",
+        "blFunctions": [
+          { "title": "Contrat de Transport", "description": "Prouve le contrat entre l'expéditeur et le transporteur" },
+          { "title": "Reçu de Marchandises", "description": "Le transporteur reconnaît avoir reçu les marchandises dans l'état déclaré" },
+          { "title": "Titre Représentatif", "description": "Le détenteur de l'original B/L peut réclamer les marchandises à destination" }
+        ]
+      },
+      "douanes": {
+        "title": "Procédures Douanières",
+        "description": "La douane est une étape incontournable du commerce international. Comprendre les régimes douaniers, les documents requis et les droits permet de planifier efficacement ses opérations.",
+        "regimesTitle": "Régimes Douaniers",
+        "colCode": "Code",
+        "colName": "Nom",
+        "colDescription": "Description",
+        "regimes": [
+          { "code": "40 00", "name": "Mise en Libre Pratique", "description": "Import standard — les marchandises sont dédouanées pour le marché intérieur" },
+          { "code": "10 00", "name": "Exportation Définitive", "description": "Export standard — les marchandises quittent définitivement le territoire douanier" },
+          { "code": "42 00", "name": "Mise en LP avec Exonération TVA", "description": "MLP suivie d'une livraison intracommunautaire — TVA différée" },
+          { "code": "21 00", "name": "Réexportation", "description": "Sortie de marchandises non-UE précédemment placées sous procédure douanière" },
+          { "code": "51 00", "name": "Perfectionnement Actif", "description": "Import de marchandises à transformer et réexporter — droits suspendus" },
+          { "code": "61 00", "name": "Perfectionnement Passif", "description": "Export de marchandises pour transformation à l'étranger et réimportation" },
+          { "code": "71 00", "name": "Entrepôt Douanier", "description": "Stockage sous contrôle douanier — droits suspendus jusqu'à la mise à la consommation" }
+        ],
+        "documentsTitle": "Documents Requis",
+        "documents": [
+          { "name": "Facture Commerciale", "mandatory": true, "description": "Avec prix, quantités, incoterm, origine" },
+          { "name": "Liste de Colisage", "mandatory": true, "description": "Description détaillée des colis" },
+          { "name": "Document de Transport", "mandatory": true, "description": "B/L, LTA, CMR selon mode" },
+          { "name": "Certificat d'Origine", "mandatory": false, "description": "Requis pour taux préférentiels ou origines réglementées" },
+          { "name": "Licence d'Importation", "mandatory": false, "description": "Pour marchandises réglementées ou contingentées" },
+          { "name": "Certificat Sanitaire/Phyto", "mandatory": false, "description": "Pour aliments, plantes, animaux" }
+        ],
+        "dutiesTitle": "Droits et Taxes",
+        "colType": "Type",
+        "duties": [
+          { "type": "Droits de Douane", "description": "Appliqués sur la valeur en douane (CIF à la frontière). Taux selon code SH (0–25% en UE)." },
+          { "type": "TVA", "description": "Appliquée sur (valeur douane + droits + transport). 20% taux normal en France." },
+          { "type": "Droits d'Accise", "description": "Spécifiques à l'alcool, tabac, hydrocarbures." }
+        ]
+      },
+      "imdg": {
+        "title": "Code IMDG — Marchandises Dangereuses",
+        "description": "Le Code IMDG (International Maritime Dangerous Goods) définit les règles de transport des marchandises dangereuses par voie maritime. Son respect est obligatoire pour la sécurité et éviter les sanctions douanières et maritimes.",
+        "classesTitle": "Classes IMDG de Marchandises Dangereuses",
+        "subdivisionsLabel": "Subdivisions",
+        "classes": [
+          { "class": "Classe 1", "name": "Explosifs", "description": "Matières et objets explosifs", "subdivisions": ["1.1 Explosion de masse", "1.2 Risque de projection", "1.3 Risque d'incendie", "1.4 Risque négligeable", "1.5 Très peu sensibles", "1.6 Extrêmement peu sensibles"] },
+          { "class": "Classe 2", "name": "Gaz", "description": "Gaz comprimés, liquéfiés, dissous", "subdivisions": ["2.1 Gaz inflammables", "2.2 Gaz non inflammables et non toxiques", "2.3 Gaz toxiques"] },
+          { "class": "Classe 3", "name": "Liquides Inflammables", "description": "Liquides avec point éclair ≤ 60°C" },
+          { "class": "Classe 4", "name": "Solides Inflammables", "description": "Solides et matières autoréactives", "subdivisions": ["4.1 Solides inflammables", "4.2 Matières spontanément inflammables", "4.3 Matières dégageant des gaz inflammables au contact de l'eau"] },
+          { "class": "Classe 5", "name": "Comburants", "description": "Matières comburantes et peroxydes organiques", "subdivisions": ["5.1 Matières comburantes", "5.2 Peroxydes organiques"] },
+          { "class": "Classe 6", "name": "Toxiques / Infectieux", "description": "Matières toxiques et infectieuses", "subdivisions": ["6.1 Matières toxiques", "6.2 Matières infectieuses"] },
+          { "class": "Classe 7", "name": "Radioactifs", "description": "Matières radioactives" },
+          { "class": "Classe 8", "name": "Corrosifs", "description": "Matières corrosives" },
+          { "class": "Classe 9", "name": "Divers", "description": "Matières et objets dangereux divers (ex: batteries lithium)" }
+        ],
+        "documentsTitle": "Documents Requis",
+        "documents": [
+          { "name": "DGD (Dangerous Goods Declaration)", "description": "Déclaration obligatoire de l'expéditeur contenant : numéro ONU, désignation officielle, classe, groupe d'emballage, quantité, contact d'urgence" },
+          { "name": "MSDS (Fiche de Données de Sécurité)", "description": "Fiche technique : composition, dangers, premiers secours, manipulation, stockage" },
+          { "name": "Certificat d'Empotage du Conteneur", "description": "Certifie que la marchandise a été correctement arrimée selon les règles IMDG" },
+          { "name": "Information d'Urgence", "description": "Contact d'urgence disponible 24h/24 (CHEMTREC, entreprise)" },
+          { "name": "Étiquetage Transport", "description": "Étiquettes de danger apposées sur les colis et le conteneur" }
+        ],
+        "packagingGroupsTitle": "Groupes d'Emballage",
+        "packagingGroups": [
+          { "group": "Groupe I (X)", "description": "Grand danger — exigences d'emballage les plus strictes" },
+          { "group": "Groupe II (Y)", "description": "Danger moyen — emballage standard" },
+          { "group": "Groupe III (Z)", "description": "Faible danger — exigences moins strictes" }
+        ],
+        "labelingTitle": "Étiquetage et Placardage",
+        "labelingContent": "Chaque colis doit afficher : numéro ONU, désignation officielle de transport, étiquettes de danger et classe. Les conteneurs doivent afficher des plaques-étiquettes de 250mm × 250mm correspondant à la classe IMDG. Les chargements mixtes requièrent des étiquettes pour chaque marchandise dangereuse.",
+        "segregationTitle": "Ségrégation",
+        "segregationContent": "Certaines marchandises dangereuses ne peuvent pas être chargées dans le même conteneur ou doivent être arrimées séparément. Le tableau de ségrégation IMDG définit les classes compatibles/incompatibles."
+      },
+      "lclVsFcl": {
+        "title": "LCL vs FCL",
+        "description": "Le choix entre LCL (Less than Container Load) et FCL (Full Container Load) est une décision clé dans la planification du fret maritime. Chaque mode présente des avantages et des contraintes spécifiques.",
+        "lclTitle": "LCL — Groupage Maritime",
+        "lclDescription": "Vos marchandises partagent un conteneur avec d'autres expéditeurs. Le transitaire consolide plusieurs expéditions LCL dans un seul FCL.",
+        "fclTitle": "FCL — Conteneur Complet",
+        "fclDescription": "Vous disposez de l'exclusivité d'un conteneur entier (20', 40' ou 40'HC). Plus économique à partir d'un certain volume.",
+        "comparisonTitle": "Comparaison Détaillée",
+        "colCriterion": "Critère",
+        "colLcl": "LCL",
+        "colFcl": "FCL",
+        "criteria": [
+          { "criterion": "Volume", "lcl": "< 15 m³ ou < 10 tonnes", "fcl": "> 15 m³ ou conteneur plein" },
+          { "criterion": "Prix", "lcl": "Au CBM (m³) ou à la tonne", "fcl": "Forfait par conteneur" },
+          { "criterion": "Sécurité", "lcl": "Modérée (partagé avec d'autres)", "fcl": "Meilleure (conteneur dédié)" },
+          { "criterion": "Délai de transit", "lcl": "+3–7 jours (opérations de groupage)", "fcl": "Plus rapide (service direct possible)" },
+          { "criterion": "Risque d'avarie", "lcl": "Plus élevé (plus de manutentions)", "fcl": "Plus faible (chargement unique)" },
+          { "criterion": "Flexibilité", "lcl": "Élevée (départ même avec petits volumes)", "fcl": "Moindre (doit remplir le conteneur)" },
+          { "criterion": "Marchandises dangereuses", "lcl": "Limitées (ségrégation requise)", "fcl": "Plus facile (conteneur dédié)" }
+        ],
+        "lclProcessTitle": "Processus LCL",
+        "lclProcess": [
+          { "step": "1", "title": "Livraison au CFS", "description": "Apporter les marchandises au Container Freight Station pour consolidation" },
+          { "step": "2", "title": "Consolidation", "description": "Le transitaire consolide plusieurs expéditions LCL" },
+          { "step": "3", "title": "Départ FCL", "description": "Le conteneur consolidé part en FCL" },
+          { "step": "4", "title": "Déconsolidation", "description": "Au CFS de destination : déchargement du conteneur" },
+          { "step": "5", "title": "Livraison", "description": "Livraison individuelle de chaque expédition LCL à son destinataire" }
+        ],
+        "chooseLclTitle": "Choisir le LCL si :",
+        "chooseLcl": [
+          "Volume < 15 m³",
+          "Expédition irrégulière ou test de marché",
+          "Marchandises non urgentes",
+          "Budget limité avec petit volume",
+          "Besoin de petites expéditions régulières"
+        ],
+        "chooseFclTitle": "Choisir le FCL si :",
+        "chooseFcl": [
+          "Volume > 15 m³",
+          "Marchandises fragiles ou haute valeur",
+          "Marchandises dangereuses (IMDG)",
+          "Marchandises sous température contrôlée (reefer)",
+          "Marchandises nécessitant confidentialité"
+        ]
+      },
+      "lettreCredit": {
+        "title": "Lettre de Crédit",
+        "description": "La Lettre de Crédit (L/C) est une garantie bancaire de paiement utilisée dans le commerce international. Elle protège à la fois l'exportateur (paiement garanti sur conformité documentaire) et l'importateur (paiement uniquement sur livraison conforme).",
+        "typesTitle": "Types de Lettres de Crédit",
+        "types": [
+          { "name": "L/C Irrévocable", "description": "Ne peut être modifiée ou annulée sans accord de toutes les parties. Standard selon UCP 600." },
+          { "name": "L/C Confirmée", "description": "La banque du bénéficiaire ajoute sa propre garantie de paiement. Protection contre le risque de la banque émettrice." },
+          { "name": "L/C à Vue", "description": "Paiement à la présentation des documents conformes. Paiement immédiat." },
+          { "name": "L/C Différée", "description": "Paiement à une date future (30, 60, 90 jours). Crédit accordé à l'acheteur." },
+          { "name": "L/C Transférable", "description": "Peut être transférée à un bénéficiaire secondaire (utile pour les intermédiaires)." },
+          { "name": "L/C Stand-by", "description": "Garantie bancaire, activée uniquement en cas de défaillance de l'acheteur. Plus simple que le crédit documentaire." }
+        ],
+        "partiesTitle": "Parties Impliquées",
+        "colRole": "Rôle",
+        "parties": [
+          { "role": "Donneur d'Ordre (Importateur)", "description": "L'acheteur qui demande l'ouverture de la L/C auprès de sa banque" },
+          { "role": "Banque Émettrice", "description": "La banque de l'importateur qui émet la L/C" },
+          { "role": "Bénéficiaire (Exportateur)", "description": "Le vendeur qui bénéficie de la L/C" },
+          { "role": "Banque Notificatrice", "description": "La banque de l'exportateur qui notifie la L/C (sans garantie)" },
+          { "role": "Banque Confirmatrice", "description": "La banque de l'exportateur qui ajoute sa garantie (L/C confirmée)" }
+        ],
+        "documentsTitle": "Documents Requis",
+        "documents": [
+          { "name": "Connaissement (B/L)", "description": "B/L original 'clean on board', mention 'freight prepaid' (ou 'collect' selon incoterm)" },
+          { "name": "Facture Commerciale", "description": "En exacte conformité avec la L/C — montants, devises, description" },
+          { "name": "Liste de Colisage", "description": "Cohérente avec la facture et le B/L" },
+          { "name": "Certificat d'Assurance", "description": "Requis si CIF ou CIP — montants et couverture selon L/C" },
+          { "name": "Certificat d'Origine", "description": "Si requis par la L/C — formulaire EUR.1, Form A ou chambre de commerce" },
+          { "name": "Certificat d'Inspection", "description": "SGS ou autre si requis par l'acheteur" },
+          { "name": "Certificat Phytosanitaire", "description": "Pour plantes, bois, produits agricoles" }
+        ],
+        "errorsTitle": "Erreurs Fréquentes (Réserves)",
+        "errors": [
+          "Description des marchandises non identique à la L/C",
+          "Montant de la facture dépassant le montant de la L/C",
+          "Documents de transport présentés après délai",
+          "Port d'embarquement ou destination différent de la L/C",
+          "Document manquant ou jeu incomplet",
+          "B/L non mentionné 'clean on board'",
+          "Montant d'assurance manquant ou incorrect"
+        ],
+        "ucp600Title": "UCP 600 — Règles Applicables",
+        "ucp600Content": "Les Règles et Usances Uniformes relatives aux Crédits Documentaires, publiées par la CCI (révision 2007). Définissent les normes d'examen des documents (5 jours bancaires), le concept de stricte conformité, et les rôles des banques.",
+        "datesTitle": "Dates Clés",
+        "datesItems": [
+          { "label": "Date limite d'expédition", "description": "Date limite pour l'expédition (date d'embarquement sur le B/L)" },
+          { "label": "Délai de présentation", "description": "Nombre de jours après l'expédition pour présenter les documents (généralement 21 jours)" },
+          { "label": "Date d'expiration L/C", "description": "Date limite absolue pour toute présentation de documents" }
+        ],
+        "costsTitle": "Coûts",
+        "costsItems": [
+          { "label": "Commission d'ouverture", "description": "0,1–0,3% du montant L/C (banque de l'importateur)" },
+          { "label": "Commission de confirmation", "description": "0,2–0,5% par trimestre (banque confirmatrice)" },
+          { "label": "Frais d'amendement", "description": "Frais fixes par amendement" },
+          { "label": "Frais de réserve", "description": "Frais fixes en cas de réserve sur les documents" }
+        ]
+      },
+      "portsRoutes": {
+        "title": "Ports et Routes Maritimes",
+        "description": "Le commerce maritime s'organise autour de grandes routes mondiales reliant les zones de production et les marchés de consommation. Comprendre ces routes et les passages stratégiques est essentiel pour optimiser les coûts et les délais d'expédition.",
+        "majorRoutesTitle": "Principales Routes Maritimes",
+        "colVia": "Via",
+        "colTransit": "Transit time",
+        "colPorts": "Ports clés",
+        "routes": [
+          { "name": "Asie — Europe", "description": "Route la plus chargée au monde en volume", "via": "Canal de Suez", "transitTime": "20–35 jours", "majorPorts": ["Shanghai", "Singapore", "Rotterdam", "Hambourg", "Le Havre"] },
+          { "name": "Asie — Amérique du Nord (Ouest)", "description": "Trans-Pacifique — croissance tirée par les échanges USA-Chine", "via": "Pacifique direct", "transitTime": "12–18 jours", "majorPorts": ["Shanghai", "Ningbo", "Los Angeles", "Long Beach", "Seattle"] },
+          { "name": "Asie — Amérique du Nord (Est)", "description": "Via canal de Panama ou Suez pour les grands navires", "via": "Suez ou Panama", "transitTime": "28–45 jours", "majorPorts": ["Shanghai", "Singapore", "New York", "Savannah", "Houston"] },
+          { "name": "Europe — Amérique du Nord", "description": "Trans-Atlantique — grande route commerciale", "via": "Atlantique direct", "transitTime": "10–16 jours", "majorPorts": ["Rotterdam", "Anvers", "Hambourg", "New York", "Baltimore"] }
+        ],
+        "passagesTitle": "Passages Stratégiques",
+        "colLength": "Longueur",
+        "colTraffic": "Trafic",
+        "passages": [
+          { "name": "Canal de Suez", "location": "Égypte", "length": "193 km", "description": "Passage clé entre Méditerranée et mer Rouge. Sa fermeture entraîne 15–20 jours supplémentaires via le Cap de Bonne Espérance.", "keyStat": "~12% du commerce mondial" },
+          { "name": "Canal de Panama", "location": "Panama", "length": "82 km", "description": "Relie Atlantique et Pacifique. Les nouvelles écluses (2016) permettent les navires Neopanamax (366m).", "keyStat": "~5% du commerce mondial" },
+          { "name": "Détroit de Malacca", "location": "Malaisie / Indonésie", "length": "900 km", "description": "Détroit le plus fréquenté au monde. 80% de l'approvisionnement énergétique asiatique y transite.", "keyStat": "~25% du commerce mondial" },
+          { "name": "Détroit d'Ormuz", "location": "Iran / Oman", "length": "54 km", "description": "Passage de 20% du commerce mondial de pétrole. Importance géopolitique stratégique.", "keyStat": "20% du pétrole" }
+        ],
+        "portsTitle": "Principaux Ports Mondiaux (TEU)",
+        "colRank": "Rang",
+        "colPort": "Port",
+        "colCountry": "Pays",
+        "colTeu": "TEU / an",
+        "ports": [
+          { "rank": 1, "port": "Shanghai", "country": "Chine", "teu": "47M" },
+          { "rank": 2, "port": "Singapour", "country": "Singapour", "teu": "37M" },
+          { "rank": 3, "port": "Ningbo-Zhoushan", "country": "Chine", "teu": "33M" },
+          { "rank": 4, "port": "Shenzhen", "country": "Chine", "teu": "29M" },
+          { "rank": 5, "port": "Guangzhou", "country": "Chine", "teu": "24M" },
+          { "rank": 6, "port": "Qingdao", "country": "Chine", "teu": "24M" },
+          { "rank": 7, "port": "Busan", "country": "Corée du Sud", "teu": "22M" },
+          { "rank": 8, "port": "Tianjin", "country": "Chine", "teu": "21M" },
+          { "rank": 9, "port": "Dubaï (Jebel Ali)", "country": "EAU", "teu": "15M" },
+          { "rank": 10, "port": "Rotterdam", "country": "Pays-Bas", "teu": "15M" }
+        ],
+        "hubGatewayTitle": "Hub vs Gateway",
+        "hubTitle": "Port Hub",
+        "hubDescription": "Port de transbordement — les grands navires y font escale et les marchandises sont redistribuées vers des navires plus petits (feeders). Ex : Singapour, Dubaï, Algésiras.",
+        "gatewayTitle": "Port Gateway",
+        "gatewayDescription": "Port desservant un arrière-pays national — port d'entrée/sortie direct d'un pays ou d'une région. Ex : Le Havre pour la France, Rotterdam pour l'Europe du Nord."
+      },
+      "vgm": {
+        "title": "VGM (Verified Gross Mass)",
+        "description": "Depuis le 1er juillet 2016, la Convention SOLAS (Safety of Life at Sea) exige que le poids vérifié de tout conteneur soit transmis avant embarquement. Cette obligation vise à prévenir les accidents liés aux conteneurs mal déclarés.",
+        "whyTitle": "Pourquoi le VGM ?",
+        "why": [
+          { "title": "Sécurité", "description": "Les conteneurs mal déclarés causent des accidents graves (chute de conteneurs, navires instables)." },
+          { "title": "Stabilité du navire", "description": "Le capitaine doit connaître le poids exact pour calculer le plan de chargement." },
+          { "title": "Équipements portuaires", "description": "Les grues et portiques sont dimensionnés pour des charges maximales." },
+          { "title": "Transport terrestre", "description": "Évite les surcharges sur les camions et wagons de pré/post-acheminement." }
+        ],
+        "componentsTitle": "Composants du VGM",
+        "formula": "VGM = Tare + Marchandises + Emballages + Arrimage",
+        "elements": [
+          { "element": "Tare conteneur", "description": "Poids à vide du conteneur (inscrit sur la porte)", "example": "2 200 kg (20')" },
+          { "element": "Marchandises", "description": "Poids brut de toutes les marchandises", "example": "Variable" },
+          { "element": "Emballages", "description": "Palettes, cartons, film plastique...", "example": "200–500 kg" },
+          { "element": "Matériaux d'arrimage", "description": "Bois de calage, sangles, airbags...", "example": "50–200 kg" }
+        ],
+        "methodsTitle": "Méthodes de Détermination",
+        "processLabel": "Processus",
+        "advantagesLabel": "Avantages",
+        "disadvantagesLabel": "Inconvénients",
+        "methods": [
+          {
+            "method": "Méthode 1",
+            "name": "Pesée du conteneur complet",
+            "description": "Pesée du conteneur chargé et scellé sur une balance étalonnée.",
+            "process": ["Empotage du conteneur", "Scellage du conteneur", "Pesée sur pont-bascule certifié", "Transmission du VGM"],
+            "advantages": ["Plus précis", "Moins de calculs"],
+            "disadvantages": ["Nécessite un pont-bascule", "Conteneur déjà scellé"]
+          },
+          {
+            "method": "Méthode 2",
+            "name": "Calcul par addition",
+            "description": "Addition de la tare du conteneur et du poids de tous les éléments chargés.",
+            "process": ["Pesée de chaque colis individuellement", "Addition de tous les poids", "Ajout des matériaux d'arrimage", "Addition de la tare conteneur"],
+            "advantages": ["Pas besoin de pont-bascule", "Peut être fait progressivement"],
+            "disadvantages": ["Plus complexe", "Risque d'erreur cumulative"]
+          }
+        ],
+        "responsibilityTitle": "Responsabilités",
+        "responsibilities": [
+          { "role": "Expéditeur (Shipper)", "description": "Responsable légal du VGM. Doit obtenir, certifier et transmettre le poids vérifié." },
+          { "role": "Transitaire", "description": "Peut transmettre le VGM pour le compte de l'expéditeur. Reste un intermédiaire." },
+          { "role": "Compagnie Maritime", "description": "Ne peut embarquer un conteneur sans VGM. Peut refuser un VGM manifestement erroné." }
+        ],
+        "tolerancesTitle": "Tolérances",
+        "toleranceLabel": "Tolérance typique",
+        "toleranceValue": "± 5% du poids déclaré ou ± 500 kg (le plus petit des deux)",
+        "consequenceLabel": "Conséquence si dépassement",
+        "consequenceValue": "Nouvelle pesée à la charge de l'expéditeur, retard possible",
+        "sanctionsTitle": "Sanctions par Région",
+        "sanctions": [
+          { "region": "France", "sanction": "Amende jusqu'à 7 500€ et refus d'embarquement" },
+          { "region": "USA", "sanction": "Refus d'embarquement, amende par la garde côtière" },
+          { "region": "Chine", "sanction": "Refus d'embarquement, pénalités portuaires" },
+          { "region": "Union Européenne", "sanction": "Application variable selon pays membre" }
+        ],
+        "tipsTitle": "Bonnes Pratiques",
+        "tips": [
+          "Transmettre le VGM au moins 24–48h avant le cut-off",
+          "Utiliser des balances étalonnées et certifiées",
+          "Conserver les preuves de pesée pendant 3 ans minimum",
+          "Vérifier les exigences spécifiques de chaque compagnie maritime",
+          "Former le personnel aux procédures VGM",
+          "Ne jamais sous-estimer le poids intentionnellement"
+        ]
+      },
+      "transitTime": {
+        "title": "Transit Time et Délais",
+        "description": "La gestion des délais est cruciale en transport maritime. Comprendre les différentes étapes, les cut-off dates et les frais de retard permet d'optimiser sa supply chain et d'éviter les coûts supplémentaires.",
+        "keyTermsTitle": "Termes Clés",
+        "etd": "Estimated Time of Departure - Départ estimé",
+        "eta": "Estimated Time of Arrival - Arrivée estimée",
+        "cutoff": "Date/heure limite de dépôt",
+        "freeTime": "Jours gratuits avant frais de retard",
+        "timelineTitle": "Timeline d'une Expédition FCL",
+        "responsibleLabel": "Responsable",
+        "timeline": [
+          { "step": "Booking", "description": "Réservation de l'espace sur le navire", "delay": "1–7 jours avant cut-off", "responsible": "Transitaire / Exportateur" },
+          { "step": "Container pickup", "description": "Enlèvement du conteneur vide au dépôt", "delay": "2–5 jours avant cut-off", "responsible": "Transporteur terrestre" },
+          { "step": "Empotage (Stuffing)", "description": "Chargement des marchandises dans le conteneur", "delay": "1–3 jours avant cut-off", "responsible": "Exportateur" },
+          { "step": "Documentation cut-off", "description": "Date limite pour soumettre les documents (B/L, VGM)", "delay": "24–48h avant ETD", "responsible": "Transitaire" },
+          { "step": "Cargo cut-off", "description": "Date limite de dépôt du conteneur au terminal", "delay": "24–48h avant ETD", "responsible": "Transporteur terrestre" },
+          { "step": "ETD (Estimated Time of Departure)", "description": "Départ estimé du navire du port d'origine", "delay": "Jour J", "responsible": "Compagnie maritime" },
+          { "step": "Transit maritime", "description": "Traversée maritime (variable selon route)", "delay": "10–45 jours", "responsible": "Compagnie maritime" },
+          { "step": "ETA (Estimated Time of Arrival)", "description": "Arrivée estimée au port de destination", "delay": "Jour J + transit", "responsible": "Compagnie maritime" },
+          { "step": "Déchargement", "description": "Déchargement du navire et mise à quai", "delay": "1–3 jours après ETA", "responsible": "Terminal portuaire" },
+          { "step": "Dédouanement", "description": "Formalités douanières à destination", "delay": "1–5 jours", "responsible": "Commissionnaire en douane" },
+          { "step": "Livraison", "description": "Acheminement final au destinataire", "delay": "1–5 jours", "responsible": "Transporteur terrestre" }
+        ],
+        "transitTimesTitle": "Transit Times Indicatifs",
+        "colRoute": "Route",
+        "colTime": "Transit Time",
+        "colVia": "Via",
+        "transitTimes": [
+          { "route": "Shanghai → Rotterdam", "time": "28–32 jours", "via": "Suez" },
+          { "route": "Shanghai → Le Havre", "time": "30–35 jours", "via": "Suez" },
+          { "route": "Shanghai → Los Angeles", "time": "12–15 jours", "via": "Pacifique direct" },
+          { "route": "Shanghai → New York", "time": "35–40 jours", "via": "Suez ou Panama" },
+          { "route": "Rotterdam → New York", "time": "10–14 jours", "via": "Atlantique direct" },
+          { "route": "Mumbai → Rotterdam", "time": "18–22 jours", "via": "Suez" },
+          { "route": "Santos → Rotterdam", "time": "18–22 jours", "via": "Atlantique direct" }
+        ],
+        "transitNote": "Note : Ces temps sont indicatifs et varient selon les rotations, transbordements et conditions.",
+        "freeTimeTitle": "Free Time (Jours Gratuits)",
+        "freeTimeDescription": "Période pendant laquelle le conteneur peut rester au terminal ou chez l'importateur sans frais supplémentaires.",
+        "freeTimeStandard": "Free time standard",
+        "freeTimeValue": "7–14 jours",
+        "freeTimeNote": "Selon compagnie et port",
+        "demurrageStart": "Demurrage start",
+        "demurrageStartDesc": "Commence après le free time au terminal",
+        "detentionStart": "Detention start",
+        "detentionStartDesc": "Commence à la sortie du terminal (gate-out)",
+        "lateFeesTitle": "Frais de Retard",
+        "colRate": "Taux indicatif",
+        "colLocation": "Lieu",
+        "lateFees": [
+          { "name": "Demurrage", "definition": "Frais pour le conteneur resté au terminal au-delà du free time", "rate": "50–150 USD/jour/conteneur", "location": "Terminal portuaire" },
+          { "name": "Detention", "definition": "Frais pour le conteneur gardé hors terminal au-delà du free time", "rate": "30–100 USD/jour/conteneur", "location": "Chez l'importateur" },
+          { "name": "Storage", "definition": "Frais de stockage au terminal (séparés du demurrage)", "rate": "Variable selon port", "location": "Terminal portuaire" },
+          { "name": "Per Diem", "definition": "Frais journaliers combinés (parfois utilisé pour demurrage+detention)", "rate": "50–200 USD/jour", "location": "Variable" }
+        ],
+        "delayFactorsTitle": "Facteurs Impactant les Délais",
+        "potentialDelaysTitle": "Retards potentiels",
+        "potentialDelays": [
+          "Congestion portuaire (Los Angeles, Rotterdam)",
+          "Conditions météorologiques (typhons, tempêtes)",
+          "Fermeture de canaux (Suez, Panama)",
+          "Inspection douanière (scanner, contrôle)",
+          "Blank sailings (annulation de rotation)",
+          "Grèves (dockers, transporteurs)"
+        ],
+        "seasonalVariationsTitle": "Variations saisonnières",
+        "seasonalVariations": [
+          "Nouvel An Chinois (février) : +2–3 semaines",
+          "Golden Week (octobre) : congestion Asie",
+          "Peak Season (août-octobre) : surcharges, retards",
+          "Fêtes de fin d'année : rush avant Christmas"
+        ],
+        "rolloverTitle": "Roll-over (Report)",
+        "rolloverDescription": "Situation où un conteneur n'est pas chargé sur le navire prévu et est reporté sur le prochain départ.",
+        "rolloverCausesTitle": "Causes fréquentes :",
+        "rolloverCauses": [
+          "Navire plein (overbooking)",
+          "Conteneur arrivé après le cargo cut-off",
+          "Documents manquants ou incorrects",
+          "VGM non transmis à temps",
+          "Problème avec la marchandise (DG, inspection)"
+        ],
+        "rolloverImpact": "Impact : Généralement +7 jours de délai (service hebdomadaire)",
+        "tipsTitle": "Conseils pour Optimiser les Délais",
+        "tips": [
+          "Réserver tôt, surtout en haute saison (2–3 semaines d'avance)",
+          "Respecter les cut-off avec une marge de sécurité (24h minimum)",
+          "Préparer les documents en parallèle de l'empotage",
+          "Négocier du free time supplémentaire pour les volumes importants",
+          "Tracker activement les navires (AIS, portails compagnies)",
+          "Anticiper le dédouanement (pré-clearing si possible)",
+          "Avoir un plan B en cas de roll-over (service alternatif)",
+          "Éviter les expéditions critiques pendant les périodes à risque"
+        ]
+      }
+    }
+  },
+  "components": {
+    "notificationDropdown": {
+      "ariaLabel": "Notifications",
+      "header": "Notifications",
+      "markAllRead": "Tout marquer comme lu",
+      "loading": "Chargement des notifications…",
+      "empty": "Aucune nouvelle notification",
+      "viewAll": "Voir toutes les notifications",
+      "time": {
+        "now": "À l'instant",
+        "minutes": "Il y a {minutes} min",
+        "hours": "Il y a {hours} h",
+        "days": "Il y a {days} j"
+      }
+    },
+    "notificationPanel": {
+      "title": "Notifications",
+      "totalCount": "{count, plural, one {# notification au total} other {# notifications au total}}",
+      "closeAria": "Fermer le panneau",
+      "filters": {
+        "all": "Toutes",
+        "unread": "Non lues",
+        "read": "Lues"
+      },
+      "markAllRead": "Tout marquer comme lu",
+      "loading": "Chargement des notifications…",
+      "emptyTitle": "Aucune notification",
+      "emptyUnread": "Vous êtes à jour !",
+      "emptyAll": "Aucune notification à afficher",
+      "deleteConfirm": "Voulez-vous vraiment supprimer cette notification ?",
+      "deleteTitle": "Supprimer la notification",
+      "viewDetails": "Voir les détails →",
+      "pagination": {
+        "page": "Page {current} sur {total}",
+        "previous": "Précédent",
+        "next": "Suivant"
+      }
+    },
+    "exportButton": {
+      "label": "Exporter",
+      "exporting": "Export en cours…",
+      "lockedTooltip": "Passez au plan Silver pour exporter vos données",
+      "csvTitle": "Export CSV",
+      "csvSubtitle": "Compatible Excel, Google Sheets",
+      "excelTitle": "Export Excel",
+      "excelSubtitle": "Format .xls natif",
+      "rowsToExport": "{count, plural, one {# ligne à exporter} other {# lignes à exporter}}",
+      "errorCsv": "Erreur lors de l'export CSV",
+      "errorExcel": "Erreur lors de l'export Excel",
+      "boolean": {
+        "true": "Oui",
+        "false": "Non"
+      }
+    },
+    "adminPanelDropdown": {
+      "trigger": "Administration",
+      "items": {
+        "users": "Utilisateurs",
+        "usersDesc": "Gérer les utilisateurs et les permissions",
+        "organizations": "Organisations",
+        "organizationsDesc": "Gérer les organisations et entreprises",
+        "bookings": "Réservations",
+        "bookingsDesc": "Consulter et gérer toutes les réservations",
+        "documents": "Documents",
+        "documentsDesc": "Gérer les documents des organisations",
+        "csvRates": "Tarifs CSV",
+        "csvRatesDesc": "Importer et gérer les tarifs CSV",
+        "logs": "Logs système",
+        "logsDesc": "Visualiser et télécharger les logs applicatifs"
+      }
+    },
+    "csvUpload": {
+      "title": "Upload tarifs CSV",
+      "description": "Uploadez un fichier CSV contenant les tarifs de transport maritime pour une compagnie. Taille maximale : 10 MB. Format requis : .csv",
+      "fileTypeError": "Seuls les fichiers CSV (.csv) sont acceptés",
+      "fileSizeError": "Le fichier ne doit pas dépasser 10 MB",
+      "fillAllFields": "Veuillez remplir tous les champs",
+      "successMessage": "✅ Succès ! {count} tarifs uploadés pour {companyName}",
+      "uploadError": "Erreur lors de l'upload du fichier CSV",
+      "form": {
+        "companyName": "Nom de la compagnie",
+        "companyNamePlaceholder": "Ex: SSC Consolidation",
+        "companyNameHint": "Nom exact de la compagnie maritime (doit correspondre aux données CSV)",
+        "companyEmail": "Email de la compagnie",
+        "companyEmailPlaceholder": "Ex: bookings@sscconsolidation.com",
+        "companyEmailHint": "Email pour les demandes de réservation auprès de cette compagnie",
+        "fileLabel": "Fichier CSV",
+        "fileSelected": "Fichier sélectionné :",
+        "formatTitle": "Format CSV requis",
+        "formatIntro": "Le fichier CSV doit contenir les colonnes suivantes :",
+        "errorTitle": "Erreur",
+        "successTitle": "Succès",
+        "submit": "Upload CSV",
+        "submitting": "Upload en cours…",
+        "reset": "Réinitialiser"
+      }
+    },
+    "cookieConsent": {
+      "openAria": "Ouvrir les paramètres de cookies",
+      "banner": {
+        "title": "Nous utilisons des cookies",
+        "body": "Nous utilisons des cookies pour améliorer votre expérience, analyser le trafic du site et personnaliser le contenu. En cliquant sur « Tout accepter », vous consentez à notre utilisation des cookies.",
+        "learnMore": "En savoir plus",
+        "customize": "Personnaliser",
+        "essentialOnly": "Essentiel uniquement",
+        "acceptAll": "Tout accepter"
+      },
+      "settings": {
+        "title": "Préférences de cookies",
+        "closeAria": "Fermer les paramètres",
+        "save": "Enregistrer mes préférences",
+        "acceptAll": "Tout accepter",
+        "footer": "Vous pouvez modifier vos préférences à tout moment dans les paramètres de votre compte ou en cliquant sur l'icône cookie en bas à gauche.",
+        "policyLink": "Politique de cookies",
+        "essential": {
+          "title": "Cookies essentiels",
+          "alwaysOn": "Toujours actif",
+          "body": "Nécessaires au fonctionnement du site. Ne peuvent pas être désactivés."
+        },
+        "functional": {
+          "title": "Cookies fonctionnels",
+          "body": "Permettent de mémoriser vos préférences et paramètres (langue, région)."
+        },
+        "analytics": {
+          "title": "Cookies analytiques",
+          "body": "Nous aident à comprendre comment les visiteurs interagissent avec notre site (Google Analytics, Sentry)."
+        },
+        "marketing": {
+          "title": "Cookies marketing",
+          "body": "Utilisés pour afficher des publicités personnalisées et mesurer l'efficacité des campagnes."
+        }
+      }
+    },
+    "bookingsTable": {
+      "headers": {
+        "bookingNumber": "N° de réservation",
+        "status": "Statut",
+        "carrier": "Transporteur",
+        "origin": "Origine",
+        "destination": "Destination",
+        "shipper": "Expéditeur",
+        "consignee": "Destinataire",
+        "etd": "ETD",
+        "eta": "ETA",
+        "containers": "Conteneurs",
+        "created": "Créé le"
+      }
+    },
+    "bookingFilters": {
+      "title": "Filtres",
+      "showMore": "Afficher plus",
+      "showLess": "Afficher moins",
+      "reset": "Tout réinitialiser",
+      "search": "Rechercher",
+      "searchPlaceholder": "N° de réservation, expéditeur, destinataire…",
+      "carrier": "Transporteur",
+      "carrierPlaceholder": "Nom du transporteur ou SCAC",
+      "originPort": "Port d'origine",
+      "destinationPort": "Port de destination",
+      "portCodePlaceholder": "Code du port",
+      "shipper": "Expéditeur",
+      "shipperPlaceholder": "Nom de l'expéditeur",
+      "consignee": "Destinataire",
+      "consigneePlaceholder": "Nom du destinataire",
+      "createdFrom": "Créé à partir du",
+      "createdTo": "Créé jusqu'au",
+      "etdFrom": "ETD à partir du",
+      "etdTo": "ETD jusqu'au",
+      "status": "Statut",
+      "sortBy": "Trier par",
+      "sortOptions": {
+        "createdAt": "Date de création",
+        "bookingNumber": "N° de réservation",
+        "status": "Statut",
+        "etd": "ETD",
+        "eta": "ETA"
+      },
+      "activeCount": "{count, plural, one {# filtre actif} other {# filtres actifs}}"
+    },
+    "bulkActions": {
+      "selectedCount": "{count, plural, one {# réservation sélectionnée} other {# réservations sélectionnées}}",
+      "clearSelection": "Effacer la sélection",
+      "exportSelected": "Exporter la sélection",
+      "exporting": "Export en cours…",
+      "exportCsv": "Exporter en CSV",
+      "exportExcel": "Exporter en Excel",
+      "exportJson": "Exporter en JSON",
+      "exportFailed": "Échec de l'export : {message}",
+      "bulkUpdate": "Mise à jour groupée",
+      "bulkUpdateSoon": "La mise à jour groupée arrive bientôt !"
+    }
+  },
+  "carrierPortal": {
+    "common": {
+      "tokenMissing": "Token manquant",
+      "bookingNotFound": "Booking introuvable. Le lien peut avoir expiré.",
+      "bookingAlreadyAccepted": "Ce booking a déjà été accepté.",
+      "bookingAlreadyRejected": "Ce booking a déjà été refusé.",
+      "errorTitle": "Erreur",
+      "backHome": "Retour à l'accueil",
+      "redirecting": "Redirection vers la page d'accueil dans {countdown, plural, one {# seconde} other {# secondes}}…"
+    },
+    "accept": {
+      "loadingTitle": "Traitement en cours…",
+      "loadingMessage": "Nous traitons votre acceptation.",
+      "errorFallback": "Erreur lors de l'acceptation du booking",
+      "errorGeneric": "Erreur lors de l'acceptation",
+      "thanksTitle": "Merci !",
+      "successHeadline": "✅ Votre acceptation a bien été prise en compte",
+      "successBody": "Nous vous remercions d'avoir accepté cette demande de transport."
+    },
+    "reject": {
+      "loadingTitle": "Traitement en cours…",
+      "loadingMessage": "Nous traitons votre refus.",
+      "errorFallback": "Erreur lors du refus du booking",
+      "errorGeneric": "Erreur lors du refus",
+      "thanksTitle": "Merci de votre réponse",
+      "successHeadline": "✓ Votre refus a bien été pris en compte",
+      "successBody": "Nous avons bien enregistré votre décision concernant cette demande de transport."
+    },
+    "documents": {
+      "loading": "Chargement…",
+      "loadingHint": "Veuillez patienter",
+      "errorTitle": "Erreur",
+      "retry": "Réessayer",
+      "linkInvalid": "Lien invalide",
+      "loadError": "Erreur lors du chargement",
+      "loadDocsError": "Erreur lors du chargement des documents",
+      "bookingNotFound": "Réservation introuvable. Vérifiez que le lien est correct.",
+      "notAcceptedYet": "Cette réservation n'a pas encore été acceptée. Les documents seront disponibles après l'acceptation.",
+      "verifyError": "Erreur lors de la vérification",
+      "passwordIncorrect": "Mot de passe incorrect. Vérifiez votre email pour retrouver le mot de passe.",
+      "passwordMissing": "Veuillez entrer le mot de passe",
+      "downloadError": "Erreur lors du téléchargement. Veuillez réessayer.",
+      "password": {
+        "title": "Accès sécurisé",
+        "intro": "Cette page est protégée. Entrez le mot de passe reçu par email pour accéder aux documents.",
+        "bookingLabel": "Réservation:",
+        "passwordLabel": "Mot de passe",
+        "passwordPlaceholder": "Ex: A3B7K9",
+        "submit": "Accéder aux documents",
+        "verifying": "Vérification…",
+        "helpTitle": "Où trouver le mot de passe ?",
+        "helpBody": "Le mot de passe vous a été envoyé dans l'email de confirmation de la réservation. Il correspond aux 6 derniers caractères du numéro de devis."
+      },
+      "header": {
+        "refresh": "Actualiser"
+      },
+      "summary": {
+        "bookingNumberPrefix": "N°",
+        "volume": "Volume",
+        "weight": "Poids",
+        "transit": "Transit",
+        "transitDays": "{count, plural, one {# jour} other {# jours}}",
+        "type": "Type",
+        "carrierLabel": "Transporteur:",
+        "refLabel": "Ref:"
+      },
+      "list": {
+        "heading": "Documents ({count})",
+        "empty": "Aucun document disponible pour le moment.",
+        "emptyHint": "Les documents apparaîtront ici une fois ajoutés.",
+        "download": "Télécharger"
+      },
+      "footerNote": "Cette page affiche toujours les documents les plus récents de la réservation.",
+      "footer": "© {year} Xpeditis - Plateforme de fret maritime",
+      "documentTypes": {
+        "BILL_OF_LADING": "Connaissement",
+        "PACKING_LIST": "Liste de colisage",
+        "COMMERCIAL_INVOICE": "Facture commerciale",
+        "CERTIFICATE_OF_ORIGIN": "Certificat d'origine",
+        "OTHER": "Autre document"
+      }
+    }
+  },
+  "bookingPortal": {
+    "common": {
+      "supportPrompt": "Pour toute question, contactez-nous à",
+      "contactSupport": "Contacter le support"
+    },
+    "confirm": {
+      "loading": "Confirmation en cours…",
+      "errorTitle": "Erreur de confirmation",
+      "errorGeneric": "Une erreur est survenue lors de l'acceptation",
+      "tokenInvalid": "Token de confirmation invalide",
+      "errorReasonsTitle": "Raisons possibles :",
+      "errorReason1": "Le lien a expiré",
+      "errorReason2": "La demande a déjà été acceptée ou refusée",
+      "errorReason3": "Le token de confirmation est invalide",
+      "errorContact": "Si vous pensez qu'il s'agit d'une erreur, veuillez contacter le client directement.",
+      "successTitle": "Demande acceptée !",
+      "successHeadline": "Merci d'avoir accepté cette demande de transport.",
+      "successBody": "Le client a été notifié par email.",
+      "summaryTitle": "Récapitulatif de la réservation",
+      "labels": {
+        "bookingId": "ID Réservation",
+        "route": "Trajet",
+        "volume": "Volume",
+        "weight": "Poids",
+        "pallets": "Palettes",
+        "containerType": "Type de conteneur",
+        "transitDays": "Temps de transit",
+        "price": "Prix",
+        "notes": "Notes :",
+        "documents": "Documents fournis",
+        "download": "Télécharger"
+      },
+      "transitDaysValue": "{count, plural, one {# jour} other {# jours}}",
+      "nextStepsTitle": "Prochaines étapes",
+      "nextStep1": "Le client va finaliser les détails du conteneur",
+      "nextStep2": "Vous recevrez un email avec les documents nécessaires",
+      "nextStep3": "Le paiement sera traité selon vos conditions habituelles"
+    },
+    "reject": {
+      "loading": "Chargement…",
+      "errorTitle": "Erreur de refus",
+      "errorGeneric": "Une erreur est survenue lors du refus",
+      "tokenInvalid": "Token de refus invalide",
+      "errorReasonsTitle": "Raisons possibles :",
+      "errorReason1": "Le lien a expiré",
+      "errorReason2": "La demande a déjà été acceptée ou refusée",
+      "errorReason3": "Le token est invalide",
+      "errorContact": "Si vous pensez qu'il s'agit d'une erreur, veuillez contacter le client directement.",
+      "rejectedTitle": "Demande refusée",
+      "rejectedHeadline": "Vous avez refusé cette demande de transport.",
+      "rejectedBody": "Le client a été notifié par email.",
+      "summaryTitle": "Récapitulatif de la demande refusée",
+      "labels": {
+        "bookingId": "ID Réservation",
+        "route": "Trajet",
+        "volume": "Volume",
+        "weight": "Poids",
+        "proposedPrice": "Prix proposé",
+        "rejectionReason": "Raison du refus :"
+      },
+      "infoTitle": "Information",
+      "infoBody": "Le client pourra soumettre une nouvelle demande avec des conditions différentes si nécessaire.",
+      "formTitle": "Refuser cette demande",
+      "formIntro": "Vous êtes sur le point de refuser cette demande de transport.",
+      "addReason": "Ajouter une raison (optionnel)",
+      "reasonLabel": "Raison du refus (optionnel)",
+      "reasonPlaceholder": "Ex : Prix trop élevé, délais trop courts, itinéraire non disponible…",
+      "reasonHint": "Cette information sera communiquée au client",
+      "warningTitle": "Attention :",
+      "warningBody": "Cette action est irréversible. Le client sera immédiatement notifié par email de votre refus.",
+      "submitting": "Refus en cours…",
+      "submit": "Confirmer le refus",
+      "helpText": "Si vous avez des questions avant de refuser, contactez-nous par email."
+    }
+  },
+  "marketing": {
+    "pricing": {
+      "header": {
+        "login": "Connexion",
+        "register": "Inscription"
+      },
+      "hero": {
+        "title": "Des tarifs simples et transparents",
+        "subtitle": "Choisissez la formule adaptée à votre activité de transport maritime. Commencez gratuitement, évoluez selon vos besoins.",
+        "monthly": "Mensuel",
+        "yearly": "Annuel",
+        "yearlyBadge": "-1 mois offert"
+      },
+      "popular": "Populaire",
+      "currency": {
+        "onQuote": "Sur devis",
+        "free": "Gratuit",
+        "perMonth": "/mois",
+        "yearlyPrice": "{price}/an (11 mois)"
+      },
+      "stats": {
+        "users": "Utilisateurs",
+        "shipments": "Expéditions",
+        "commission": "Commission",
+        "support": "Support"
+      },
+      "features": {
+        "rates": "Recherche de tarifs",
+        "bookings": "Réservations",
+        "dashboard": "Tableau de bord",
+        "wiki": "Wiki Maritime",
+        "userManagement": "Gestion des utilisateurs",
+        "csvImport": "Import CSV",
+        "apiAccess": "Accès API",
+        "customUI": "Interface personnalisée",
+        "dedicatedKam": "KAM dédié"
+      },
+      "values": {
+        "unlimited": "Illimité",
+        "shipmentsPerYear": "12/an",
+        "shipmentsUnlimited": "Illimitées",
+        "supportNone": "Aucun",
+        "supportEmail": "Email",
+        "supportDirect": "Direct",
+        "supportKam": "KAM dédié"
+      },
+      "plans": {
+        "bronze": {
+          "name": "Bronze",
+          "description": "Pour démarrer et tester la plateforme",
+          "cta": "Commencer gratuitement"
+        },
+        "silver": {
+          "name": "Silver",
+          "description": "Pour les équipes en croissance",
+          "cta": "Choisir Silver"
+        },
+        "gold": {
+          "name": "Gold",
+          "description": "Pour les entreprises établies",
+          "cta": "Choisir Gold"
+        },
+        "platinium": {
+          "name": "Platinium",
+          "description": "Solutions sur mesure",
+          "cta": "Nous contacter"
+        }
+      },
+      "footer": "Tous les prix sont en euros HT. Facturation annuelle = 11 mois."
+    },
+    "common": {
+      "lastUpdated": "Dernière mise à jour : Janvier 2025"
+    },
+    "privacy": {
+      "badge": "Protection des données",
+      "title1": "Politique de",
+      "title2": "Confidentialité",
+      "intro": "Chez Xpeditis, la protection de vos données personnelles est une priorité absolue. Cette politique explique comment nous collectons, utilisons et protégeons vos informations.",
+      "sections": {
+        "data": {
+          "title": "1. Données collectées",
+          "content": "Nous collectons les données suivantes :\n\n• **Données d'identification** : nom, prénom, adresse email professionnelle, numéro de téléphone\n• **Données professionnelles** : nom de l'entreprise, fonction, numéro SIRET\n• **Données de connexion** : adresse IP, logs de connexion, données de navigation\n• **Données de transaction** : historique des réservations, devis, factures\n• **Données de communication** : échanges avec notre service client"
+        },
+        "use": {
+          "title": "2. Utilisation des données",
+          "content": "Vos données sont utilisées pour :\n\n• Fournir et améliorer nos services de réservation de fret maritime\n• Gérer votre compte et vos préférences\n• Traiter vos demandes de devis et réservations\n• Vous envoyer des communications commerciales (avec votre consentement)\n• Assurer la sécurité de notre plateforme\n• Respecter nos obligations légales et réglementaires"
+        },
+        "protection": {
+          "title": "3. Protection des données",
+          "content": "Nous mettons en œuvre des mesures de sécurité robustes :\n\n• Chiffrement SSL/TLS pour toutes les communications\n• Chiffrement des données sensibles au repos (AES-256)\n• Authentification à deux facteurs disponible\n• Audits de sécurité réguliers\n• Formation continue de nos équipes\n• Hébergement sur des serveurs certifiés ISO 27001"
+        },
+        "rights": {
+          "title": "4. Vos droits",
+          "content": "Conformément au RGPD, vous disposez des droits suivants :\n\n• **Droit d'accès** : obtenir une copie de vos données personnelles\n• **Droit de rectification** : corriger vos données inexactes\n• **Droit à l'effacement** : demander la suppression de vos données\n• **Droit à la portabilité** : recevoir vos données dans un format structuré\n• **Droit d'opposition** : vous opposer au traitement de vos données\n• **Droit de limitation** : limiter le traitement de vos données\n\nPour exercer ces droits, contactez-nous à : privacy@xpeditis.com"
+        },
+        "transfers": {
+          "title": "5. Transferts internationaux",
+          "content": "Vos données peuvent être transférées vers des pays hors UE dans le cadre de nos services de fret maritime international. Ces transferts sont encadrés par :\n\n• Des clauses contractuelles types approuvées par la Commission européenne\n• Des certifications adéquates (ex: Privacy Shield pour certains prestataires)\n• Le consentement explicite pour certains transferts spécifiques"
+        },
+        "retention": {
+          "title": "6. Conservation des données",
+          "content": "Nous conservons vos données selon les durées suivantes :\n\n• **Données de compte** : durée de la relation commerciale + 3 ans\n• **Données de transaction** : 10 ans (obligations comptables)\n• **Données de connexion** : 1 an\n• **Données marketing** : 3 ans après le dernier contact\n\nÀ l'expiration de ces délais, vos données sont supprimées ou anonymisées."
+        }
+      },
+      "contact": {
+        "title": "Des questions ?",
+        "body": "Pour toute question concernant notre politique de confidentialité ou vos données personnelles, contactez notre Délégué à la Protection des Données."
+      }
+    },
+    "terms": {
+      "badge": "Cadre juridique",
+      "title1": "Conditions Générales",
+      "title2": "d'Utilisation",
+      "intro": "Ces conditions régissent votre utilisation de la plateforme Xpeditis. Veuillez les lire attentivement avant d'utiliser nos services.",
+      "sections": {
+        "purpose": {
+          "title": "1. Objet et acceptation",
+          "content": "Les présentes Conditions Générales d'Utilisation (CGU) régissent l'utilisation de la plateforme Xpeditis, accessible à l'adresse www.xpeditis.com.\n\nEn accédant à notre plateforme et en utilisant nos services, vous acceptez sans réserve les présentes CGU. Si vous n'acceptez pas ces conditions, vous ne devez pas utiliser nos services.\n\nXpeditis se réserve le droit de modifier ces CGU à tout moment. Les utilisateurs seront informés de toute modification par email et/ou notification sur la plateforme."
+        },
+        "services": {
+          "title": "2. Description des services",
+          "content": "Xpeditis propose une plateforme B2B de réservation de fret maritime permettant :\n\n• La recherche et comparaison de tarifs de transport maritime\n• La réservation de conteneurs auprès de compagnies maritimes partenaires\n• Le suivi en temps réel des expéditions\n• La gestion documentaire (Bill of Lading, certificats, etc.)\n• L'accès à un tableau de bord analytique\n\nXpeditis agit en qualité d'intermédiaire technologique et ne se substitue pas aux transporteurs maritimes dans l'exécution des prestations de transport."
+        },
+        "account": {
+          "title": "3. Inscription et compte utilisateur",
+          "content": "**Conditions d'inscription**\nL'inscription est réservée aux professionnels du transport et de la logistique (transitaires, commissionnaires, etc.). L'utilisateur doit fournir des informations exactes et complètes.\n\n**Responsabilité du compte**\nL'utilisateur est responsable de la confidentialité de ses identifiants et de toutes les activités effectuées sous son compte. Il s'engage à notifier immédiatement Xpeditis en cas d'utilisation non autorisée.\n\n**Suspension et résiliation**\nXpeditis peut suspendre ou résilier un compte en cas de violation des CGU, d'activité frauduleuse ou de non-paiement."
+        },
+        "pricing": {
+          "title": "4. Tarification et paiement",
+          "content": "**Tarifs affichés**\nLes tarifs affichés sur la plateforme sont indicatifs et peuvent varier selon la disponibilité et les conditions du marché. Le tarif définitif est confirmé lors de la validation de la réservation.\n\n**Modalités de paiement**\nLes paiements s'effectuent par virement bancaire ou carte bancaire. Les factures sont payables selon les conditions convenues (généralement 30 jours).\n\n**Frais supplémentaires**\nDes frais additionnels peuvent s'appliquer (surcharges carburant, frais portuaires, etc.). Ces frais sont clairement indiqués avant validation."
+        },
+        "liability": {
+          "title": "5. Responsabilité",
+          "content": "**Limitation de responsabilité**\nXpeditis agit en tant qu'intermédiaire technologique. La responsabilité du transport incombe aux compagnies maritimes selon leurs conditions générales et les conventions internationales applicables.\n\n**Force majeure**\nXpeditis ne peut être tenue responsable des retards ou annulations dus à des cas de force majeure (intempéries, grèves, pandémies, etc.).\n\n**Disponibilité de la plateforme**\nXpeditis s'efforce de maintenir la plateforme disponible 24h/24. Cependant, des interruptions peuvent survenir pour maintenance ou raisons techniques."
+        },
+        "ip": {
+          "title": "6. Propriété intellectuelle",
+          "content": "Tous les éléments de la plateforme Xpeditis (logo, design, textes, logiciels, bases de données) sont protégés par les droits de propriété intellectuelle.\n\nL'utilisateur s'engage à :\n• Ne pas reproduire, modifier ou distribuer le contenu de la plateforme\n• Ne pas utiliser les données à des fins concurrentielles\n• Ne pas tenter de désassembler ou décompiler le logiciel\n• Respecter les marques et logos de Xpeditis et de ses partenaires"
+        },
+        "law": {
+          "title": "7. Droit applicable et litiges",
+          "content": "**Droit applicable**\nLes présentes CGU sont régies par le droit français.\n\n**Résolution des litiges**\nEn cas de litige, les parties s'engagent à rechercher une solution amiable. À défaut, les tribunaux de Paris seront seuls compétents.\n\n**Médiation**\nConformément aux dispositions du Code de la consommation, l'utilisateur peut recourir gratuitement au service de médiation auquel Xpeditis est adhérent."
+        }
+      },
+      "contact": {
+        "title": "Besoin de précisions ?",
+        "body": "Pour toute question concernant nos conditions générales d'utilisation, notre équipe juridique est à votre disposition."
+      }
+    },
+    "cookies": {
+      "badge": "Transparence",
+      "title1": "Politique de",
+      "title2": "Cookies",
+      "intro": "Découvrez comment nous utilisons les cookies pour améliorer votre expérience sur Xpeditis et comment vous pouvez gérer vos préférences.",
+      "introBoxTitle": "Qu'est-ce qu'un cookie ?",
+      "introBoxBody1": "Un cookie est un petit fichier texte stocké sur votre appareil (ordinateur, tablette, smartphone) lorsque vous visitez un site web. Les cookies permettent au site de mémoriser vos actions et préférences sur une période donnée.",
+      "introBoxBody2": "Les cookies ne contiennent pas d'informations personnellement identifiables et ne peuvent pas accéder aux données stockées sur votre appareil.",
+      "typesTitle": "Types de cookies utilisés",
+      "typesSubtitle": "Nous utilisons différents types de cookies sur notre plateforme",
+      "required": "Requis",
+      "optional": "Optionnel",
+      "tableHeaders": {
+        "name": "Nom",
+        "purpose": "Finalité",
+        "duration": "Durée"
+      },
+      "types": {
+        "essential": {
+          "title": "Cookies essentiels",
+          "description": "Nécessaires au fonctionnement du site"
+        },
+        "analytics": {
+          "title": "Cookies analytiques",
+          "description": "Nous aident à améliorer notre plateforme"
+        },
+        "marketing": {
+          "title": "Cookies marketing",
+          "description": "Permettent de personnaliser les publicités"
+        },
+        "functional": {
+          "title": "Cookies fonctionnels",
+          "description": "Améliorent votre expérience utilisateur"
+        }
+      },
+      "purposes": {
+        "session_id": "Maintien de votre session de connexion",
+        "csrf_token": "Protection contre les attaques CSRF",
+        "cookie_consent": "Mémorisation de vos préférences cookies",
+        "_ga": "Google Analytics - Identification des visiteurs",
+        "_gid": "Google Analytics - Identification des sessions",
+        "_gat": "Google Analytics - Limitation du taux de requêtes",
+        "_fbp": "Facebook Pixel - Suivi des conversions",
+        "li_fat_id": "LinkedIn Insight - Attribution marketing",
+        "hubspotutk": "HubSpot - Identification des visiteurs",
+        "language": "Mémorisation de votre langue préférée",
+        "theme": "Mémorisation du thème (clair/sombre)",
+        "recent_searches": "Historique de vos recherches récentes"
+      },
+      "durations": {
+        "session": "Session",
+        "year1": "1 an",
+        "years2": "2 ans",
+        "hours24": "24 heures",
+        "minute1": "1 minute",
+        "months3": "3 mois",
+        "days30": "30 jours",
+        "months13": "13 mois"
+      },
+      "manageTitle": "Comment gérer vos cookies ?",
+      "manageIntro": "Vous pouvez à tout moment modifier vos préférences en matière de cookies :",
+      "manageBullet1": "Via notre bandeau de consentement accessible en bas de chaque page",
+      "manageBullet2": "Dans les paramètres de votre navigateur (Chrome, Firefox, Safari, Edge)",
+      "manageBullet3": "En utilisant des outils tiers de gestion des cookies",
+      "manageNote": "Note : La désactivation de certains cookies peut affecter votre expérience sur notre plateforme.",
+      "contact": {
+        "title": "Des questions sur les cookies ?",
+        "body": "Notre équipe est disponible pour répondre à toutes vos questions concernant l'utilisation des cookies sur notre plateforme."
+      }
+    },
+    "about": {
+      "badge": "Notre histoire",
+      "title1": "Révolutionner le fret maritime,",
+      "title2": "une réservation à la fois",
+      "intro": "Fondée en 2021, Xpeditis est née d'une vision simple : rendre le fret maritime aussi simple qu'une réservation de vol. Nous connectons les transitaires du monde entier avec les plus grandes compagnies maritimes.",
+      "mission": {
+        "title": "Notre Mission",
+        "body": "Démocratiser l'accès au fret maritime en offrant une plateforme technologique de pointe qui simplifie la recherche, la comparaison et la réservation de transport maritime pour tous les professionnels de la logistique."
+      },
+      "vision": {
+        "title": "Notre Vision",
+        "body": "Devenir la référence mondiale du fret maritime digital, en connectant chaque transitaire à chaque compagnie maritime, partout dans le monde, avec la transparence et l'efficacité que mérite le commerce international."
+      },
+      "stats": {
+        "clients": "Clients actifs",
+        "carriers": "Compagnies maritimes",
+        "countries": "Pays couverts",
+        "bookings": "Réservations/an"
+      },
+      "valuesTitle": "Nos Valeurs",
+      "valuesSubtitle": "Les principes qui guident chacune de nos décisions",
+      "values": {
+        "excellence": {
+          "title": "Excellence",
+          "description": "Nous visons l'excellence dans chaque aspect de notre plateforme, en offrant une expérience utilisateur de premier ordre."
+        },
+        "transparency": {
+          "title": "Transparence",
+          "description": "Nous croyons en une communication ouverte et honnête avec nos clients, partenaires et employés."
+        },
+        "collaboration": {
+          "title": "Collaboration",
+          "description": "Le succès se construit ensemble. Nous travaillons main dans la main avec nos clients pour atteindre leurs objectifs."
+        },
+        "innovation": {
+          "title": "Innovation",
+          "description": "Nous repoussons constamment les limites de la technologie pour révolutionner le fret maritime."
+        }
+      },
+      "timelineTitle": "Notre Parcours",
+      "timelineSubtitle": "De la startup au leader européen du fret maritime digital",
+      "timeline": {
+        "2021": {
+          "title": "Fondation",
+          "description": "Création de Xpeditis avec une vision claire : simplifier le fret maritime pour tous."
+        },
+        "2022": {
+          "title": "Première version",
+          "description": "Lancement de la plateforme beta avec 10 compagnies maritimes partenaires."
+        },
+        "2023": {
+          "title": "Série A",
+          "description": "Levée de fonds de 15M€ pour accélérer notre expansion européenne."
+        },
+        "2024": {
+          "title": "Expansion",
+          "description": "50+ compagnies maritimes, présence dans 15 pays européens."
+        },
+        "2025": {
+          "title": "Leader européen",
+          "description": "Plateforme #1 du fret maritime B2B en Europe avec 500+ clients actifs."
+        }
+      },
+      "teamTitle": "Notre Équipe",
+      "teamSubtitle": "Des experts passionnés par le maritime et la technologie",
+      "team": {
+        "ceo": {
+          "role": "CEO & Co-fondateur",
+          "bio": "Ex-directeur chez Maersk, 20 ans d'expérience dans le shipping"
+        },
+        "cto": {
+          "role": "CTO & Co-fondatrice",
+          "bio": "Ex-Google, experte en plateformes B2B et systèmes distribués"
+        },
+        "coo": {
+          "role": "COO",
+          "bio": "Ex-CMA CGM, spécialiste des opérations maritimes internationales"
+        },
+        "vpSales": {
+          "role": "VP Sales",
+          "bio": "15 ans d'expérience commerciale dans le secteur logistique"
+        },
+        "vpEng": {
+          "role": "VP Engineering",
+          "bio": "Ex-Uber Freight, expert en systèmes de réservation temps réel"
+        },
+        "vpProduct": {
+          "role": "VP Product",
+          "bio": "Ex-Flexport, passionnée par l'UX et l'innovation produit"
+        }
+      },
+      "cta": {
+        "title": "Rejoignez l'aventure Xpeditis",
+        "body": "Que vous soyez transitaire à la recherche d'une solution moderne ou talent souhaitant rejoindre une équipe passionnée, nous avons hâte de vous rencontrer.",
+        "createAccount": "Créer un compte",
+        "viewCareers": "Voir les offres d'emploi"
+      }
+    },
+    "contact": {
+      "badge": "Nous contacter",
+      "title1": "Une question ?",
+      "title2": "Nous sommes là pour vous",
+      "intro": "Notre équipe est disponible pour répondre à toutes vos questions sur notre plateforme, nos services et nos tarifs. N'hésitez pas à nous contacter !",
+      "methods": {
+        "email": {
+          "title": "Email",
+          "description": "Envoyez-nous un email",
+          "value": "contact@xpeditis.com"
+        },
+        "phone": {
+          "title": "Téléphone",
+          "description": "Appelez-nous",
+          "value": "+33 1 23 45 67 89"
+        },
+        "chat": {
+          "title": "Chat en direct",
+          "description": "Discutez avec notre équipe",
+          "value": "Disponible 24/7"
+        },
+        "support": {
+          "title": "Support",
+          "description": "Support client",
+          "value": "support@xpeditis.com"
+        }
+      },
+      "form": {
+        "title": "Envoyez-nous un message",
+        "description": "Remplissez le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais.",
+        "firstName": "Prénom",
+        "firstNamePlaceholder": "Jean",
+        "lastName": "Nom",
+        "lastNamePlaceholder": "Dupont",
+        "email": "Email",
+        "emailPlaceholder": "jean.dupont@exemple.com",
+        "phone": "Téléphone",
+        "phonePlaceholder": "+33 6 12 34 56 78",
+        "company": "Entreprise",
+        "companyPlaceholder": "Votre entreprise",
+        "subject": "Sujet",
+        "message": "Message",
+        "messagePlaceholder": "Comment pouvons-nous vous aider ?",
+        "submit": "Envoyer le message",
+        "submitting": "Envoi en cours...",
+        "successTitle": "Message envoyé !",
+        "successBody": "Merci pour votre message. Notre équipe vous répondra dans les 24 heures.",
+        "sendAnother": "Envoyer un autre message",
+        "genericError": "Une erreur est survenue lors de l'envoi. Veuillez réessayer."
+      },
+      "subjects": {
+        "placeholder": "Sélectionnez un sujet",
+        "demo": "Demande de démonstration",
+        "pricing": "Questions sur les tarifs",
+        "partnership": "Partenariat",
+        "support": "Support technique",
+        "press": "Relations presse",
+        "careers": "Recrutement",
+        "other": "Autre"
+      },
+      "office": {
+        "title": "Notre bureau",
+        "subtitle": "Retrouvez-nous à Paris ou contactez-nous par email.",
+        "hqBadge": "Siège social",
+        "city": "Paris",
+        "address": "123 Avenue des Champs-Élysées",
+        "postalCode": "75008 Paris, France",
+        "phone": "+33 1 23 45 67 89",
+        "email": "paris@xpeditis.com"
+      },
+      "hours": {
+        "title": "Horaires d'ouverture",
+        "weekdays": "Lundi - Vendredi",
+        "weekdaysHours": "9h00 - 18h00",
+        "saturday": "Samedi",
+        "saturdayHours": "10h00 - 14h00",
+        "sunday": "Dimanche",
+        "closed": "Fermé",
+        "supportNote": "* Support technique disponible 24/7 pour les clients Enterprise"
+      },
+      "afterSubmit": {
+        "badge": "Après votre envoi",
+        "title": "Que se passe-t-il après l'envoi de votre message ?",
+        "commitmentTitle": "Notre engagement",
+        "commitmentBody1": "Dès réception de votre demande, un de nos experts logistiques analyse votre profil et vos besoins. Vous recevrez une réponse personnalisée ou une invitation pour une démonstration de la plateforme ",
+        "commitmentHighlight": "sous 48 heures ouvrées.",
+        "securityTitle": "Sécurité",
+        "securityBody1": "Vos informations sont protégées et traitées conformément à notre ",
+        "securityBody2": ". Aucune donnée n'est partagée avec des tiers sans votre accord.",
+        "privacyLink": "politique de confidentialité"
+      },
+      "quickAccess": {
+        "badge": "Accès rapide",
+        "title": "Besoin d'une réponse immédiate ?",
+        "pricingTitle": "Tarification instantanée",
+        "pricingBody1": "N'attendez pas notre retour pour vos prix. Utilisez notre moteur ",
+        "pricingBody2": " pour obtenir une cotation de fret maritime en moins de 60 secondes.",
+        "pricingHighlight": "Click&Ship",
+        "pricingCta": "Accéder au Dashboard",
+        "wikiTitle": "Aide rapide",
+        "wikiBody1": "Une question sur les Incoterms ou la documentation export ? Notre ",
+        "wikiBody2": " contient déjà les réponses aux questions les plus fréquentes.",
+        "wikiHighlight": "Wiki Maritime",
+        "wikiCta": "Consulter le Wiki"
+      }
+    },
+    "security": {
+      "badge": "Sécurité maximale",
+      "title1": "Votre sécurité,",
+      "title2": "notre priorité",
+      "intro": "Chez Xpeditis, nous mettons en œuvre les meilleures pratiques de sécurité pour protéger vos données et garantir la continuité de vos opérations.",
+      "featuresTitle": "Mesures de sécurité",
+      "featuresSubtitle": "Une infrastructure robuste pour protéger vos données",
+      "features": {
+        "encryption": {
+          "title": "Chiffrement de bout en bout",
+          "description": "Toutes les communications sont chiffrées avec TLS 1.3. Vos données sensibles sont chiffrées au repos avec AES-256."
+        },
+        "auth": {
+          "title": "Authentification sécurisée",
+          "description": "Authentification à deux facteurs (2FA) disponible. Mots de passe hashés avec Argon2id, le standard le plus robuste."
+        },
+        "infrastructure": {
+          "title": "Infrastructure certifiée",
+          "description": "Hébergement sur AWS avec certifications ISO 27001, SOC 2 Type II et conformité RGPD."
+        },
+        "monitoring": {
+          "title": "Surveillance 24/7",
+          "description": "Monitoring continu de notre infrastructure. Détection et réponse aux incidents en temps réel."
+        },
+        "audits": {
+          "title": "Audits réguliers",
+          "description": "Tests de pénétration annuels par des experts indépendants. Programme de bug bounty actif."
+        },
+        "continuity": {
+          "title": "Plan de continuité",
+          "description": "Sauvegardes automatiques quotidiennes. Plan de reprise d'activité testé régulièrement."
+        }
+      },
+      "certificationsTitle": "Certifications & Conformité",
+      "certificationsSubtitle": "Nos engagements validés par des organismes indépendants",
+      "certifications": {
+        "iso": {
+          "name": "ISO 27001",
+          "description": "Système de management de la sécurité de l'information"
+        },
+        "soc2": {
+          "name": "SOC 2 Type II",
+          "description": "Contrôles de sécurité, disponibilité et confidentialité"
+        },
+        "gdpr": {
+          "name": "RGPD",
+          "description": "Conformité au Règlement Général sur la Protection des Données"
+        },
+        "pcidss": {
+          "name": "PCI DSS",
+          "description": "Norme de sécurité des données de paiement"
+        }
+      },
+      "practicesTitle": "Nos pratiques de sécurité",
+      "practicesSubtitle": "Une approche proactive de la sécurité à chaque étape",
+      "practices": {
+        "secureDev": {
+          "title": "Développement sécurisé",
+          "item1": "Revue de code systématique",
+          "item2": "Analyse statique du code (SAST)",
+          "item3": "Tests de sécurité automatisés",
+          "item4": "Gestion des dépendances"
+        },
+        "dataProtection": {
+          "title": "Protection des données",
+          "item1": "Minimisation des données collectées",
+          "item2": "Pseudonymisation des données",
+          "item3": "Contrôle d'accès granulaire",
+          "item4": "Journalisation des accès"
+        },
+        "incidentResponse": {
+          "title": "Réponse aux incidents",
+          "item1": "Équipe de sécurité dédiée",
+          "item2": "Procédures de notification",
+          "item3": "Analyse post-incident",
+          "item4": "Amélioration continue"
+        }
+      },
+      "report": {
+        "title": "Signaler une vulnérabilité",
+        "body": "Vous avez découvert une faille de sécurité ? Nous prenons très au sérieux la sécurité de notre plateforme. Contactez notre équipe de sécurité pour un signalement responsable."
+      }
+    },
+    "compliance": {
+      "badge": "Conformité européenne",
+      "title1": "Conformité",
+      "title2": "RGPD",
+      "intro": "Xpeditis s'engage à respecter le Règlement Général sur la Protection des Données (RGPD) et à garantir vos droits en matière de protection des données personnelles.",
+      "badges": {
+        "compliant": "Conforme RGPD",
+        "dpo": "DPO désigné"
+      },
+      "rightsTitle": "Vos droits RGPD",
+      "rightsSubtitle": "Le RGPD vous confère des droits renforcés sur vos données personnelles",
+      "rights": {
+        "access": {
+          "title": "Droit d'accès",
+          "description": "Obtenez une copie de toutes les données personnelles que nous détenons sur vous."
+        },
+        "rectification": {
+          "title": "Droit de rectification",
+          "description": "Faites corriger vos données personnelles si elles sont inexactes ou incomplètes."
+        },
+        "erasure": {
+          "title": "Droit à l'effacement",
+          "description": "Demandez la suppression de vos données personnelles (« droit à l'oubli »)."
+        },
+        "portability": {
+          "title": "Droit à la portabilité",
+          "description": "Recevez vos données dans un format structuré, lisible par machine."
+        }
+      },
+      "rightsCta": {
+        "text": "Pour exercer vos droits, connectez-vous à votre compte ou contactez notre DPO.",
+        "login": "Accéder à mon compte",
+        "dpo": "Contacter le DPO"
+      },
+      "principlesTitle": "Nos principes de protection des données",
+      "principlesSubtitle": "Des principes fondamentaux qui guident notre traitement des données",
+      "principles": {
+        "minimization": {
+          "title": "Minimisation des données",
+          "description": "Nous ne collectons que les données strictement nécessaires à nos services."
+        },
+        "retention": {
+          "title": "Limitation de conservation",
+          "description": "Vos données sont conservées uniquement le temps nécessaire."
+        },
+        "integrity": {
+          "title": "Intégrité et confidentialité",
+          "description": "Vos données sont protégées contre tout accès non autorisé."
+        },
+        "transparency": {
+          "title": "Transparence",
+          "description": "Nous vous informons clairement sur l'utilisation de vos données."
+        }
+      },
+      "measuresTitle": "Mesures de protection",
+      "measuresSubtitle": "Des mesures techniques et organisationnelles pour assurer la sécurité de vos données",
+      "measures": {
+        "technical": {
+          "title": "Mesures techniques",
+          "item1": "Chiffrement des données au repos et en transit",
+          "item2": "Authentification multi-facteurs",
+          "item3": "Journalisation des accès aux données",
+          "item4": "Sauvegardes chiffrées régulières",
+          "item5": "Pseudonymisation des données sensibles"
+        },
+        "organizational": {
+          "title": "Mesures organisationnelles",
+          "item1": "Délégué à la Protection des Données (DPO) désigné",
+          "item2": "Formation régulière des employés",
+          "item3": "Politiques de sécurité documentées",
+          "item4": "Processus de gestion des incidents",
+          "item5": "Audits de conformité réguliers"
+        }
+      },
+      "register": {
+        "title": "Registre des traitements",
+        "body": "Conformément à l'article 30 du RGPD, nous tenons un registre des activités de traitement des données personnelles. Ce registre documente :",
+        "item1": "Les finalités de chaque traitement",
+        "item2": "Les catégories de données traitées",
+        "item3": "Les destinataires des données",
+        "item4": "Les durées de conservation",
+        "item5": "Les mesures de sécurité appliquées"
+      },
+      "dpo": {
+        "title": "Contacter notre DPO",
+        "body": "Notre Délégué à la Protection des Données est à votre disposition pour toute question relative au traitement de vos données personnelles ou à l'exercice de vos droits.",
+        "privacyLink": "Politique de confidentialité"
+      }
+    },
+    "blog": {
+      "badge": "Blog Xpeditis",
+      "title1": "Actualités & Insights",
+      "title2": "du fret maritime",
+      "intro": "Restez informé des dernières tendances du transport maritime, découvrez nos guides pratiques et suivez l'actualité de Xpeditis.",
+      "searchPlaceholder": "Rechercher un article…",
+      "categories": {
+        "all": "Tous les articles",
+        "industry": "Industrie maritime",
+        "technology": "Technologie",
+        "guides": "Guides pratiques",
+        "news": "Actualités"
+      },
+      "allTitle": "Tous les articles",
+      "articlesCount": "{count} articles",
+      "featuredBadge": "À la une",
+      "readArticle": "Lire l'article",
+      "noResults": {
+        "title": "Aucun article trouvé",
+        "body": "Essayez de modifier vos filtres ou votre recherche"
+      },
+      "loadMore": "Charger plus d'articles",
+      "featured": {
+        "title": "L'avenir du fret maritime : comment l'IA transforme la logistique",
+        "excerpt": "Découvrez comment l'intelligence artificielle révolutionne la gestion des expéditions maritimes et optimise les chaînes d'approvisionnement mondiales.",
+        "author": "Marie Lefebvre",
+        "date": "15 janvier 2025",
+        "readTime": "8 min"
+      },
+      "articles": {
+        "incoterms": {
+          "title": "Guide complet des Incoterms 2020 pour le transport maritime",
+          "excerpt": "Tout ce que vous devez savoir sur les règles Incoterms et leur application dans le fret maritime international.",
+          "author": "Thomas Martin",
+          "date": "10 janvier 2025",
+          "readTime": "12 min"
+        },
+        "costs": {
+          "title": "Comment optimiser vos coûts de transport maritime en 2025",
+          "excerpt": "Stratégies et conseils pratiques pour réduire vos dépenses logistiques sans compromettre la qualité de service.",
+          "author": "Sophie Bernard",
+          "date": "8 janvier 2025",
+          "readTime": "6 min"
+        },
+        "ports": {
+          "title": "Les plus grands ports européens : classement 2025",
+          "excerpt": "Analyse des performances des principaux ports européens et tendances du trafic conteneurisé.",
+          "author": "Jean-Pierre Durand",
+          "date": "5 janvier 2025",
+          "readTime": "10 min"
+        },
+        "funding": {
+          "title": "Xpeditis lève 15M€ pour accélérer son expansion",
+          "excerpt": "Notre série A nous permet de renforcer notre équipe et d'étendre notre présence en Europe.",
+          "author": "Jean-Pierre Durand",
+          "date": "3 janvier 2025",
+          "readTime": "4 min"
+        },
+        "green": {
+          "title": "Décarbonation du transport maritime : où en sommes-nous ?",
+          "excerpt": "État des lieux des initiatives environnementales dans le secteur maritime et perspectives pour 2030.",
+          "author": "Claire Moreau",
+          "date": "28 décembre 2024",
+          "readTime": "9 min"
+        },
+        "api": {
+          "title": "APIs et intégrations : comment connecter votre TMS à Xpeditis",
+          "excerpt": "Guide technique pour intégrer notre plateforme avec vos systèmes de gestion existants.",
+          "author": "Alexandre Petit",
+          "date": "22 décembre 2024",
+          "readTime": "15 min"
+        },
+        "documents": {
+          "title": "Les documents essentiels pour l'export maritime",
+          "excerpt": "Check-list complète des documents requis pour vos expéditions maritimes internationales.",
+          "author": "Thomas Martin",
+          "date": "18 décembre 2024",
+          "readTime": "7 min"
+        }
+      },
+      "newsletter": {
+        "title": "Restez informé",
+        "body": "Abonnez-vous à notre newsletter pour recevoir les derniers articles et actualités du fret maritime directement dans votre boîte mail.",
+        "emailPlaceholder": "votre@email.com",
+        "subscribe": "S'abonner",
+        "disclaimer": "En vous inscrivant, vous acceptez notre politique de confidentialité. Désabonnement possible à tout moment."
+      }
+    },
+    "careers": {
+      "badge": "Rejoignez-nous",
+      "title1": "Construisons ensemble",
+      "title2": "le futur du maritime",
+      "intro": "Rejoignez une équipe passionnée qui révolutionne le fret maritime. Des défis stimulants, une culture bienveillante et des opportunités de croissance uniques vous attendent.",
+      "viewJobs": "Voir les offres",
+      "learnMore": "En savoir plus",
+      "stats": {
+        "employees": "Employés",
+        "nationalities": "Nationalités",
+        "offices": "Bureaux en Europe",
+        "womenTech": "Femmes dans la tech"
+      },
+      "benefitsTitle": "Pourquoi nous rejoindre ?",
+      "benefitsSubtitle": "Nous investissons dans le bien-être et le développement de nos équipes",
+      "benefits": {
+        "health": {
+          "title": "Mutuelle Premium",
+          "description": "Couverture santé complète pour vous et votre famille"
+        },
+        "remote": {
+          "title": "Télétravail Flexible",
+          "description": "Travaillez d'où vous voulez, jusqu'à 3 jours par semaine"
+        },
+        "wellbeing": {
+          "title": "Bien-être au Travail",
+          "description": "Salle de sport, fruits frais, et événements d'équipe"
+        },
+        "learning": {
+          "title": "Formation Continue",
+          "description": "2 000€/an de budget formation et conférences"
+        },
+        "international": {
+          "title": "Équipe Internationale",
+          "description": "Travaillez avec des talents de 15 nationalités"
+        },
+        "stockOptions": {
+          "title": "Stock Options",
+          "description": "Participez à la croissance de l'entreprise"
+        }
+      },
+      "cultureTitle": "Notre culture",
+      "cultureBody": "Chez Xpeditis, nous croyons que les meilleures idées viennent d'équipes diverses et inclusives. Nous valorisons l'autonomie, la créativité et le feedback constructif.",
+      "culture": {
+        "item1": "Transparence totale sur les décisions et les résultats",
+        "item2": "Feedback continu et culture de l'amélioration",
+        "item3": "Équilibre vie pro/perso respecté",
+        "item4": "Célébration des succès collectifs"
+      },
+      "jobsTitle": "Nos offres d'emploi",
+      "jobsSubtitle": "Trouvez le poste qui correspond à vos ambitions",
+      "filters": {
+        "allDepartments": "Tous les départements",
+        "allLocations": "Toutes les villes"
+      },
+      "departments": {
+        "Engineering": "Engineering",
+        "Product": "Produit",
+        "Sales": "Commercial",
+        "Customer Success": "Customer Success",
+        "Data": "Data"
+      },
+      "locations": {
+        "Paris": "Paris",
+        "Rotterdam": "Rotterdam",
+        "Hambourg": "Hambourg"
+      },
+      "jobs": {
+        "frontend": {
+          "title": "Senior Frontend Engineer",
+          "description": "Rejoignez notre équipe frontend pour développer la prochaine génération de notre plateforme.",
+          "req1": "5+ ans d'expérience en développement frontend",
+          "req2": "Maîtrise de React, TypeScript et Next.js",
+          "req3": "Expérience avec les design systems",
+          "req4": "Capacité à mentorer des développeurs juniors"
+        },
+        "backend": {
+          "title": "Backend Engineer (Node.js)",
+          "description": "Construisez des APIs scalables pour connecter les transitaires aux compagnies maritimes.",
+          "req1": "3+ ans d'expérience en Node.js/NestJS",
+          "req2": "Maîtrise de PostgreSQL et Redis",
+          "req3": "Connaissance des architectures microservices",
+          "req4": "Expérience avec Docker et Kubernetes appréciée"
+        },
+        "pm": {
+          "title": "Product Manager",
+          "description": "Définissez la vision produit et priorisez les fonctionnalités avec notre équipe.",
+          "req1": "4+ ans d'expérience en product management B2B",
+          "req2": "Expérience dans la logistique ou le shipping appréciée",
+          "req3": "Capacité à analyser les données et définir les KPIs",
+          "req4": "Excellentes compétences en communication"
+        },
+        "ae": {
+          "title": "Account Executive",
+          "description": "Développez notre portefeuille clients aux Pays-Bas et en Belgique.",
+          "req1": "3+ ans d'expérience en vente B2B",
+          "req2": "Connaissance du secteur maritime/logistique",
+          "req3": "Maîtrise du néerlandais et de l'anglais",
+          "req4": "Capacité à gérer des cycles de vente longs"
+        },
+        "csm": {
+          "title": "Customer Success Manager",
+          "description": "Accompagnez nos clients dans l'utilisation de la plateforme et maximisez leur satisfaction.",
+          "req1": "2+ ans d'expérience en customer success",
+          "req2": "Expérience avec les outils CRM (HubSpot, Salesforce)",
+          "req3": "Excellent relationnel et sens du service",
+          "req4": "Capacité à former et accompagner les utilisateurs"
+        },
+        "data": {
+          "title": "Data Analyst",
+          "description": "Analysez les données de shipping pour optimiser notre plateforme et nos processus.",
+          "req1": "3+ ans d'expérience en data analysis",
+          "req2": "Maîtrise de SQL, Python et des outils BI",
+          "req3": "Expérience avec le shipping/logistics appréciée",
+          "req4": "Capacité à communiquer les insights aux équipes"
+        }
+      },
+      "jobCard": {
+        "remote": "Remote OK",
+        "profile": "Profil recherché :",
+        "apply": "Postuler",
+        "learnMore": "En savoir plus"
+      },
+      "noJobs": {
+        "title": "Aucune offre trouvée",
+        "body": "Essayez de modifier vos filtres"
+      },
+      "cta": {
+        "title": "Pas de poste correspondant ?",
+        "body": "Envoyez-nous une candidature spontanée ! Nous sommes toujours à la recherche de talents passionnés pour rejoindre notre aventure.",
+        "spontaneous": "Candidature spontanée"
+      }
+    },
+    "press": {
+      "badge": "Espace Presse",
+      "title1": "Espace Presse",
+      "title2": "Xpeditis",
+      "intro": "Retrouvez tous nos communiqués de presse, ressources médias et informations pour les journalistes. Notre équipe communication est à votre disposition.",
+      "pressKit": "Kit Presse",
+      "pressContact": "Contact Presse",
+      "stats": {
+        "funding": "Levée de fonds",
+        "clients": "Clients actifs",
+        "carriers": "Compagnies maritimes",
+        "countries": "Pays couverts"
+      },
+      "releasesTitle": "Communiqués de Presse",
+      "releasesSubtitle": "Les dernières actualités officielles de Xpeditis",
+      "releases": {
+        "seriesA": {
+          "title": "Xpeditis lève 15 millions d'euros pour accélérer son expansion européenne",
+          "date": "15 janvier 2025",
+          "excerpt": "La startup française de fret maritime digital annonce une levée de fonds Série A menée par Partech et Eurazeo.",
+          "category": "Financement"
+        },
+        "clients500": {
+          "title": "Xpeditis franchit le cap des 500 clients actifs",
+          "date": "8 janvier 2025",
+          "excerpt": "La plateforme B2B de fret maritime confirme sa position de leader en Europe avec une croissance de 200% en 2024.",
+          "category": "Croissance"
+        },
+        "cmaCgm": {
+          "title": "Partenariat stratégique avec CMA CGM",
+          "date": "15 décembre 2024",
+          "excerpt": "Xpeditis intègre l'offre complète du groupe CMA CGM, offrant encore plus de choix à ses utilisateurs.",
+          "category": "Partenariat"
+        },
+        "tracking": {
+          "title": "Lancement de nouvelles fonctionnalités de tracking en temps réel",
+          "date": "1er décembre 2024",
+          "excerpt": "La plateforme enrichit son offre avec un système de suivi des conteneurs amélioré et des notifications proactives.",
+          "category": "Produit"
+        },
+        "rotterdam": {
+          "title": "Ouverture du bureau de Rotterdam",
+          "date": "15 novembre 2024",
+          "excerpt": "Xpeditis poursuit son expansion avec l'ouverture d'un nouveau bureau aux Pays-Bas pour servir le marché Benelux.",
+          "category": "Expansion"
+        }
+      },
+      "read": "Lire",
+      "coverageTitle": "Ils parlent de nous",
+      "coverageSubtitle": "Retrouvez les articles de presse mentionnant Xpeditis",
+      "coverage": {
+        "lesEchos": {
+          "title": "Xpeditis, la startup qui digitalise le fret maritime",
+          "date": "12 janvier 2025"
+        },
+        "bfm": {
+          "title": "Comment l'IA révolutionne la logistique maritime",
+          "date": "10 janvier 2025"
+        },
+        "jmm": {
+          "title": "Les plateformes digitales au service des transitaires",
+          "date": "5 janvier 2025"
+        },
+        "techEu": {
+          "title": "French logistics startup Xpeditis raises €15M",
+          "date": "15 janvier 2025"
+        }
+      },
+      "kitTitle": "Kit Presse",
+      "kitSubtitle": "Téléchargez tous les éléments dont vous avez besoin pour vos articles",
+      "kit": {
+        "visuals": {
+          "title": "Logos & Visuels",
+          "description": "Logos en haute résolution (PNG, SVG) et visuels de la plateforme",
+          "format": "ZIP — 12 Mo"
+        },
+        "dossier": {
+          "title": "Dossier de presse",
+          "description": "Présentation complète de Xpeditis, chiffres clés et biographies des fondateurs",
+          "format": "PDF — 4 Mo"
+        },
+        "videos": {
+          "title": "Vidéos & B-Roll",
+          "description": "Vidéos de présentation et séquences B-Roll pour vos reportages",
+          "format": "MP4 — 250 Mo"
+        },
+        "download": "Télécharger"
+      },
+      "milestonesTitle": "Notre Parcours",
+      "milestonesSubtitle": "Les grandes étapes de l'histoire de Xpeditis",
+      "milestones": {
+        "2021": "Création de Xpeditis",
+        "2022": "Première version lancée",
+        "2023": "Levée Seed de 3M€",
+        "2024": "500 clients actifs",
+        "2025": "Série A — 15M€"
+      },
+      "contact": {
+        "title": "Contact Presse",
+        "body": "Notre équipe communication est à votre disposition pour toute demande d'interview, d'information ou de partenariat média.",
+        "relationsTitle": "Relations Presse",
+        "emailLabel": "Email",
+        "phoneLabel": "Téléphone",
+        "responsibleTitle": "Responsable Communication",
+        "responsibleRole": "Directrice Communication",
+        "responsibleBio": "Disponible pour les interviews, demandes d'information et partenariats médias.",
+        "quote": "Nous sommes toujours ravis d'échanger avec les journalistes sur notre mission de révolutionner le fret maritime. N'hésitez pas à nous contacter pour toute demande.",
+        "quoteRole": " — CEO & Co-fondateur"
+      }
+    },
+    "docs": {
+      "metadataTitle": "Documentation API — Xpeditis",
+      "metadataDescription": "Documentation de l'API Xpeditis pour intégrer le fret maritime dans vos applications."
+    }
+  },
+  "auth": {
+    "login": {
+      "title": "Connexion",
+      "subtitle": "Bienvenue ! Connectez-vous pour accéder à votre compte",
+      "emailLabel": "Adresse email",
+      "emailPlaceholder": "votre.email@entreprise.com",
+      "passwordLabel": "Mot de passe",
+      "passwordPlaceholder": "••••••••••",
+      "rememberMe": "Se souvenir de moi",
+      "forgotPassword": "Mot de passe oublié ?",
+      "submit": "Se connecter",
+      "submitting": "Connexion en cours…",
+      "noAccount": "Vous n'avez pas de compte ?",
+      "createAccount": "Créer un compte",
+      "register": "S'inscrire",
+      "orContinue": "Ou continuez avec",
+      "continueWithGoogle": "Continuer avec Google",
+      "continueWithMicrosoft": "Continuer avec Microsoft",
+      "fieldErrors": {
+        "emailRequired": "L'adresse email est requise",
+        "emailInvalid": "L'adresse email n'est pas valide",
+        "passwordRequired": "Le mot de passe est requis",
+        "passwordMin": "Le mot de passe doit contenir au moins 6 caractères"
+      },
+      "errors": {
+        "network": "Impossible de se connecter au serveur. Vérifiez votre connexion internet.",
+        "invalidCredentials": "Email ou mot de passe incorrect",
+        "inactive": "Votre compte a été désactivé. Contactez le support pour plus d'informations.",
+        "notFound": "Aucun compte trouvé avec cet email",
+        "incorrectPassword": "Mot de passe incorrect",
+        "rateLimit": "Trop de tentatives de connexion. Veuillez réessayer dans quelques minutes.",
+        "generic": "Une erreur est survenue. Veuillez réessayer."
+      }
+    },
+    "register": {
+      "title": "Créer un compte",
+      "subtitle": "Commencez votre essai gratuit dès aujourd'hui",
+      "stepAccount": "Votre compte",
+      "stepOrganization": "Votre organisation",
+      "orgStepTitle": "Votre organisation",
+      "orgStepSubtitle": "Renseignez les informations de votre entreprise",
+      "invitationTitle": "Accepter l'invitation",
+      "invitationValid": "Invitation valide — créez votre mot de passe pour rejoindre l'organisation.",
+      "invitationInvalid": "Le lien d'invitation est invalide ou expiré.",
+      "invitationVerifying": "Vérification de l'invitation…",
+      "firstNameLabel": "Prénom",
+      "firstNamePlaceholder": "Jean",
+      "lastNameLabel": "Nom",
+      "lastNamePlaceholder": "Dupont",
+      "emailLabel": "Adresse email",
+      "emailPlaceholder": "jean.dupont@entreprise.com",
+      "passwordLabel": "Mot de passe",
+      "passwordPlaceholder": "••••••••••••",
+      "passwordHint": "Au moins 12 caractères",
+      "confirmPasswordLabel": "Confirmer le mot de passe",
+      "organizationNameLabel": "Nom de l'organisation",
+      "organizationNamePlaceholder": "Acme Logistics",
+      "organizationTypeLabel": "Type d'organisation",
+      "orgTypes": {
+        "freightForwarder": "Transitaire",
+        "shipper": "Expéditeur",
+        "carrier": "Transporteur"
+      },
+      "sirenLabel": "SIREN",
+      "sirenHint": "9 chiffres",
+      "siretLabel": "SIRET",
+      "siretOptional": "(optionnel)",
+      "siretHint": "14 chiffres",
+      "streetLabel": "Adresse",
+      "streetPlaceholder": "123 Rue de la République",
+      "cityLabel": "Ville",
+      "cityPlaceholder": "Paris",
+      "postalCodeLabel": "Code postal",
+      "postalCodePlaceholder": "75001",
+      "stateLabel": "Région",
+      "stateOptional": "(optionnel)",
+      "statePlaceholder": "Île-de-France",
+      "countryLabel": "Pays",
+      "countryPlaceholder": "FR",
+      "countryHint": "Code ISO 2 lettres",
+      "back": "Retour",
+      "continue": "Continuer",
+      "submit": "Créer mon compte",
+      "submitting": "Création du compte…",
+      "termsAccept": "En créant un compte, vous acceptez nos",
+      "termsLink": "Conditions d'utilisation",
+      "termsAnd": "et notre",
+      "privacyLink": "Politique de confidentialité",
+      "hasAccount": "Vous avez déjà un compte ?",
+      "login": "Se connecter",
+      "fieldErrors": {
+        "firstNameMin": "Le prénom doit contenir au moins 2 caractères",
+        "lastNameMin": "Le nom doit contenir au moins 2 caractères",
+        "emailInvalid": "L'adresse email n'est pas valide",
+        "passwordMin": "Le mot de passe doit contenir au moins 12 caractères",
+        "passwordsMismatch": "Les mots de passe ne correspondent pas",
+        "orgNameRequired": "Le nom de l'organisation est requis",
+        "sirenRequired": "Le numéro SIREN est requis (9 chiffres)",
+        "siretInvalid": "Le numéro SIRET doit contenir 14 chiffres",
+        "addressRequired": "Tous les champs d'adresse sont requis"
+      },
+      "errors": {
+        "emailTaken": "Cette adresse email est déjà utilisée",
+        "generic": "Erreur lors de la création du compte"
+      },
+      "sidePanel": {
+        "titleInvitation": "Rejoignez votre équipe",
+        "titleDefault": "Rejoignez des milliers d'entreprises",
+        "description": "Simplifiez votre logistique maritime et gagnez du temps sur chaque expédition.",
+        "features": {
+          "trial": {
+            "title": "Essai gratuit de 30 jours",
+            "description": "Testez toutes les fonctionnalités sans engagement"
+          },
+          "security": {
+            "title": "Sécurité maximale",
+            "description": "Vos données sont protégées et chiffrées"
+          },
+          "support": {
+            "title": "Support 24/7",
+            "description": "Notre équipe est là pour vous accompagner"
+          }
+        },
+        "stats": {
+          "companies": "Entreprises",
+          "countries": "Pays couverts",
+          "support": "Support"
+        }
+      }
+    },
+    "sidePanel": {
+      "title": "Simplifiez votre fret maritime",
+      "description": "Accédez à des tarifs en temps réel de plus de 50 compagnies maritimes. Réservez, suivez et gérez vos expéditions LCL en quelques clics.",
+      "features": {
+        "instantRates": {
+          "title": "Tarifs instantanés",
+          "description": "Comparez les prix de toutes les compagnies en temps réel"
+        },
+        "booking": {
+          "title": "Réservation simplifiée",
+          "description": "Réservez vos conteneurs en moins de 5 minutes"
+        },
+        "tracking": {
+          "title": "Suivi en temps réel",
+          "description": "Suivez vos expéditions à chaque étape du voyage"
+        }
+      },
+      "stats": {
+        "carriers": "Compagnies",
+        "shipments": "Expéditions",
+        "satisfaction": "Satisfaction"
+      }
+    },
+    "footerLinks": {
+      "contact": "Contactez-nous",
+      "privacy": "Confidentialité",
+      "terms": "Conditions"
+    },
+    "forgotPassword": {
+      "title": "Mot de passe oublié ?",
+      "subtitle": "Entrez votre adresse email et nous vous enverrons un lien pour réinitialiser votre mot de passe.",
+      "emailLabel": "Adresse email",
+      "emailPlaceholder": "votre.email@entreprise.com",
+      "submit": "Envoyer le lien de réinitialisation",
+      "submitting": "Envoi en cours…",
+      "backToLogin": "Retour à la connexion",
+      "successTitle": "Email envoyé",
+      "successMessage": "Si un compte est associé à <strong>{email}</strong>, vous recevrez un email avec les instructions pour réinitialiser votre mot de passe.",
+      "successHint": "Pensez à vérifier vos spams si vous ne recevez rien d'ici quelques minutes.",
+      "error": "Une erreur est survenue. Veuillez réessayer.",
+      "sidePanel": {
+        "title": "Sécurité avant tout",
+        "description": "La protection de votre compte est notre priorité. Réinitialisez votre mot de passe en toute sécurité.",
+        "features": {
+          "secure": {
+            "title": "Lien sécurisé",
+            "description": "Le lien expire après 1 heure pour votre sécurité"
+          },
+          "email": {
+            "title": "Email de confirmation",
+            "description": "Vérifiez votre boîte de réception et vos spams"
+          }
+        }
+      }
+    },
+    "resetPassword": {
+      "title": "Nouveau mot de passe",
+      "subtitle": "Choisissez un nouveau mot de passe sécurisé pour votre compte.",
+      "invalidTokenTitle": "Lien invalide",
+      "invalidTokenMessage": "Ce lien de réinitialisation est invalide. Veuillez faire une nouvelle demande.",
+      "passwordLabel": "Nouveau mot de passe",
+      "passwordHint": "Au moins 12 caractères",
+      "confirmPasswordLabel": "Confirmer le mot de passe",
+      "submit": "Réinitialiser le mot de passe",
+      "submitting": "Réinitialisation…",
+      "successTitle": "Mot de passe réinitialisé !",
+      "successMessage": "Votre mot de passe a été modifié avec succès. Vous allez être redirigé vers la page de connexion…",
+      "goToLogin": "Se connecter maintenant",
+      "backToLogin": "Retour à la connexion",
+      "requestNew": "Demander un nouveau lien",
+      "errors": {
+        "passwordMin": "Le mot de passe doit contenir au moins 12 caractères",
+        "passwordsMismatch": "Les mots de passe ne correspondent pas",
+        "generic": "Le lien de réinitialisation est invalide ou expiré."
+      },
+      "sidePanel": {
+        "title": "Votre sécurité, notre priorité",
+        "description": "Choisissez un mot de passe fort pour protéger votre compte et vos données.",
+        "tips": [
+          "Au moins 12 caractères",
+          "Mélangez lettres, chiffres et symboles",
+          "Évitez les mots du dictionnaire",
+          "N'utilisez pas le même mot de passe ailleurs"
+        ]
+      }
+    },
+    "verifyEmail": {
+      "verifyingTitle": "Vérification de votre email…",
+      "verifyingSubtitle": "Un instant, nous validons votre adresse email.",
+      "successTitle": "Email vérifié avec succès !",
+      "successMessage": "Votre email a été vérifié avec succès. Vous allez être redirigé vers le tableau de bord dans quelques secondes…",
+      "goToDashboard": "Aller au tableau de bord",
+      "errorTitle": "Vérification échouée",
+      "errorInvalidLink": "Lien de vérification invalide",
+      "errorGeneric": "La vérification de l'email a échoué. Le lien a peut-être expiré.",
+      "errorHint": "Le lien de vérification a peut-être expiré. Veuillez en demander un nouveau.",
+      "backToLogin": "Retour à la connexion",
+      "resend": "Renvoyer un email de vérification"
+    }
+  }
+}
diff --git a/apps/frontend/middleware.ts b/apps/frontend/middleware.ts
index 5a7fba3..764c9d7 100644
--- a/apps/frontend/middleware.ts
+++ b/apps/frontend/middleware.ts
@@ -1,16 +1,22 @@
 /**
  * Middleware
  *
- * Protects routes that require authentication
+ * Composes:
+ *   1. next-intl locale detection & prefix enforcement (/fr/..., /en/...)
+ *   2. Auth protection — redirects unauthenticated users to /{locale}/login
+ *
+ * All URLs are locale-prefixed (localePrefix: 'always' in routing.ts).
  */
 
+import createMiddleware from 'next-intl/middleware';
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
+import { routing } from './i18n/routing';
 
-// Exact-match public paths (no sub-path matching)
+const intlMiddleware = createMiddleware(routing);
+
+// Paths that do not require authentication (matched AFTER locale stripping)
 const exactPublicPaths = ['/'];
-
-// Prefix-match public paths (plus their sub-paths)
 const prefixPublicPaths = [
   '/login',
   '/register',
@@ -27,28 +33,52 @@ const prefixPublicPaths = [
   '/docs',
 ];
 
-export function middleware(request: NextRequest) {
+function stripLocale(pathname: string): { locale: string | null; pathWithoutLocale: string } {
+  for (const locale of routing.locales) {
+    if (pathname === `/${locale}`) return { locale, pathWithoutLocale: '/' };
+    if (pathname.startsWith(`/${locale}/`)) {
+      return { locale, pathWithoutLocale: pathname.slice(`/${locale}`.length) };
+    }
+  }
+  return { locale: null, pathWithoutLocale: pathname };
+}
+
+export default function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
-  // Check if path is public
-  const isPublicPath =
-    exactPublicPaths.includes(pathname) ||
-    prefixPublicPaths.some(path => pathname === path || pathname.startsWith(path + '/'));
+  // Step 1: let next-intl handle locale redirection (e.g. `/dashboard` → `/fr/dashboard`)
+  const intlResponse = intlMiddleware(request);
+
+  // If next-intl already issued a redirect, honor it (user will land on the
+  // locale-prefixed URL and the middleware will run again with auth intact).
+  if (intlResponse.status >= 300 && intlResponse.status < 400) {
+    return intlResponse;
+  }
+
+  // Step 2: auth protection
+  const { locale, pathWithoutLocale } = stripLocale(pathname);
+  const resolvedLocale = locale || routing.defaultLocale;
+
+  const isPublicPath =
+    exactPublicPaths.includes(pathWithoutLocale) ||
+    prefixPublicPaths.some(
+      p => pathWithoutLocale === p || pathWithoutLocale.startsWith(p + '/')
+    );
 
-  // Get token from cookie (synced by client.ts setAuthTokens)
   const token = request.cookies.get('accessToken')?.value;
 
-  // Redirect to login if accessing protected route without token
   if (!isPublicPath && !token) {
-    const loginUrl = new URL('/login', request.url);
+    const loginUrl = new URL(`/${resolvedLocale}/login`, request.url);
     loginUrl.searchParams.set('redirect', pathname);
     return NextResponse.redirect(loginUrl);
   }
 
-  return NextResponse.next();
+  return intlResponse;
 }
 
 export const config = {
-  // Exclude Next.js internals, API routes, and all public static assets
-  matcher: ['/((?!_next/static|_next/image|api|assets|favicon\\.ico|manifest\\.json|.*\\.(?:png|jpg|jpeg|gif|webp|svg|ico|mp4|mp3|pdf|txt|xml|csv|json)$).*)'],
+  // Exclude Next.js internals, API routes, and static assets
+  matcher: [
+    '/((?!_next/static|_next/image|api|assets|favicon\\.ico|manifest\\.json|.*\\.(?:png|jpg|jpeg|gif|webp|svg|ico|mp4|mp3|pdf|txt|xml|csv|json)$).*)',
+  ],
 };
diff --git a/apps/frontend/next.config.js b/apps/frontend/next.config.js
index 5e6be96..61b1efe 100644
--- a/apps/frontend/next.config.js
+++ b/apps/frontend/next.config.js
@@ -1,3 +1,7 @@
+const createNextIntlPlugin = require('next-intl/plugin');
+
+const withNextIntl = createNextIntlPlugin('./i18n/request.ts');
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -27,4 +31,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withNextIntl(nextConfig);
diff --git a/apps/frontend/package-lock.json b/apps/frontend/package-lock.json
index d70090c..84e08b8 100644
--- a/apps/frontend/package-lock.json
+++ b/apps/frontend/package-lock.json
@@ -28,6 +28,7 @@
         "leaflet": "^1.9.4",
         "lucide-react": "^0.294.0",
         "next": "14.0.4",
+        "next-intl": "^4.9.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.64.0",
@@ -738,6 +739,36 @@
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
       "license": "MIT"
     },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-3.1.2.tgz",
+      "integrity": "sha512-vPnriihkfK0lzoQGaXq+qXH23VsYyansRTkTgo2aTG0k1NjLFyZimFVdfj4C9JkSE5dm7CEngcQ5TTc1yAyBfQ==",
+      "license": "MIT"
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.4.tgz",
+      "integrity": "sha512-JVY39ROgLt+pIYngo6piyj4OVfZmXs/2FkC4wLS+ql1Eig/sGJKB7YwDO/5bkJFkfwaFAeIpgEiJc8hiYxNalw==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/icu-skeleton-parser": "2.1.4"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-2.1.4.tgz",
+      "integrity": "sha512-8bSFZbrlvGX11ywMZxtgkPBt5Q8/etyts7j7j+GWpOVK1g43zwMIH3LZxk43HAtEP7L/jtZ+OZaMiFTOiBj9CA==",
+      "license": "MIT"
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.8.3.tgz",
+      "integrity": "sha512-pHUjWb9NuhnMs8+PxQdzBtZRFJHlGhrURGAbm6Ltwl82BFajeuiIR3jblSa7ia3r62rXe/0YtVpUG3xWr5bFCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "3.1.2"
+      }
+    },
     "node_modules/@hookform/resolvers": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
@@ -1586,6 +1617,313 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.6",
+        "@parcel/watcher-darwin-arm64": "2.5.6",
+        "@parcel/watcher-darwin-x64": "2.5.6",
+        "@parcel/watcher-freebsd-x64": "2.5.6",
+        "@parcel/watcher-linux-arm-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm-musl": "2.5.6",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm64-musl": "2.5.6",
+        "@parcel/watcher-linux-x64-glibc": "2.5.6",
+        "@parcel/watcher-linux-x64-musl": "2.5.6",
+        "@parcel/watcher-win32-arm64": "2.5.6",
+        "@parcel/watcher-win32-ia32": "2.5.6",
+        "@parcel/watcher-win32-x64": "2.5.6"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -2372,6 +2710,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@schummar/icu-type-parser": {
+      "version": "1.21.5",
+      "resolved": "https://registry.npmjs.org/@schummar/icu-type-parser/-/icu-type-parser-1.21.5.tgz",
+      "integrity": "sha512-bXHSaW5jRTmke9Vd0h5P7BtWZG9Znqb8gSDxZnxaGSJnGwPLDPfS+3g0BKzeWqzgZPsIVZkM7m2tbo18cm5HBw==",
+      "license": "MIT"
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -2411,6 +2755,204 @@
       "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
       "license": "MIT"
     },
+    "node_modules/@swc/core-darwin-arm64": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.26.tgz",
+      "integrity": "sha512-OmcP96CFsNOwa65tamQayRcfqhNlcQ3YCWOq+0Wb+CAM4uB7kOMrXY41Gj4atthxrGhLQ9pg7Vk26iApb88idA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-darwin-x64": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.26.tgz",
+      "integrity": "sha512-liTTTpKSv89ivIxcZ+iU1cRige9Y7JkOjVnJ2Ystzl+DsWNHqt7wLTTgm/u7gEqmmAS2JKryODLQn3q1UtFNPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm-gnueabihf": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.26.tgz",
+      "integrity": "sha512-Y/g+m3I8CeBof5A3kWWOS6QA2HOIUytF5EeTgfwcAK+GKT/tGe7Xqo5svBtaqflU5od2zzbMTWqkinPXgRWGgA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-gnu": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.26.tgz",
+      "integrity": "sha512-19IvwyPfBN/rz9s7qXhOTQmW0922+pjpRUUvIebu+CMM75nX6YuDzHsGx8hSmn5dS89SNaMCh1lgUuXqm++6jg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-musl": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.26.tgz",
+      "integrity": "sha512-iNlbvTIo425rkKzDLLWFJGnFXr3myETUdIDHcjuiPNZE8b0ogmcAuilC4yEJX7FSHGbnlsoJcCT2xf4b3VJmmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-ppc64-gnu": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-ppc64-gnu/-/core-linux-ppc64-gnu-1.15.26.tgz",
+      "integrity": "sha512-AuuEOtG+YXKIjIUup4RsxYNklx6XVB3WKWfhxG6hnfPrn7vp89RNOLbbyyprgj6Sk7k9ulwGVTJElEvmBNPSCA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-s390x-gnu": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-s390x-gnu/-/core-linux-s390x-gnu-1.15.26.tgz",
+      "integrity": "sha512-JcMDWQvW1BchUyRg8E0jHiTx7CQYpUr5uDEL1dnPDECrEjBEGG2ynmJ3XX70sWXql0JagqR1t3VpANYFWdUnqA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.26.tgz",
+      "integrity": "sha512-FW7V7Mbpq4+PA7BiAq76LJs8MdNuUSylyuRVfQRkhIyeWadFroZ+KOPgjku8Z/fXzngxBRvsk+PGGB0t8mGcjA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.26.tgz",
+      "integrity": "sha512-w8erqMHsVcdGwUfJxF6LaiTuPoKnyLOcUbhLcxiXrlLt5MLjtlgcIeUY/NWK/oPoyqkgH+/i8pOJnMTxvl83ZQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-arm64-msvc": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.26.tgz",
+      "integrity": "sha512-uDCWCNpUiqkbvPmsuPUTn/P7ag9SqNXD2JT/W3dUu7yZ2krzN+nmmoQ2xRX63/J6RYiHI7aT4jo7Z++lsljlPA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-ia32-msvc": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.26.tgz",
+      "integrity": "sha512-2k1ax1QmmqLEnpC0uRCw7OXhBfyvdPqERBXupDasjYbChT6ZSO/uha28Bp38cw0viKIG79L27aTDkbkABsMW3w==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-x64-msvc": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.26.tgz",
+      "integrity": "sha512-aUuYecSEGa4SUSdyCWaI/vk8jdseifYnsF1GZQx2+piL8GIuT/5QrVcFfmes4Iwy7FIVXxtzD063z/FfpZ7K7w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
@@ -2420,6 +2962,15 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@swc/types": {
+      "version": "0.1.26",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.26.tgz",
+      "integrity": "sha512-lyMwd7WGgG79RS7EERZV3T8wMdmPq3xwyg+1nmAM64kIhx5yl+juO2PYIHb7vTiPgPCj8LYjsNV2T5wiQHUEaw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.90.2",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.2.tgz",
@@ -4813,6 +5364,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -6474,6 +7034,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/icu-minify": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/icu-minify/-/icu-minify-4.9.1.tgz",
+      "integrity": "sha512-6NkfF9GHHFouqnz+wuiLjCWQiyxoEyJ5liUv4Jxxo/8wyhV7MY0L0iTEGDAVEa4aAD58WqTxFMa20S5nyMjwNw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/amannn"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/icu-messageformat-parser": "^3.4.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -6594,6 +7169,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/intl-messageformat": {
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-11.2.1.tgz",
+      "integrity": "sha512-1gAVEUt3wEPvTqML4Fsw9klZV5j0vszQxayP/fi6gUroAc8AUHiNaisBKLWxybL1AdWq1mP07YV1q8v4N92ilQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@formatjs/fast-memoize": "3.1.2",
+        "@formatjs/icu-messageformat-parser": "3.5.4"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
@@ -8627,6 +9212,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/next": {
       "version": "14.0.4",
       "resolved": "https://registry.npmjs.org/next/-/next-14.0.4.tgz",
@@ -8674,6 +9268,83 @@
         }
       }
     },
+    "node_modules/next-intl": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-4.9.1.tgz",
+      "integrity": "sha512-N7ga0CjtYcdxNvaKNIi6eJ2mmatlHK5hp8rt0YO2Omoc1m0gean242/Ukdj6+gJNiReBVcYIjK0HZeNx7CV1ug==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/amannn"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "^0.8.1",
+        "@parcel/watcher": "^2.4.1",
+        "@swc/core": "^1.15.2",
+        "icu-minify": "^4.9.1",
+        "negotiator": "^1.0.0",
+        "next-intl-swc-plugin-extractor": "^4.9.1",
+        "po-parser": "^2.1.1",
+        "use-intl": "^4.9.1"
+      },
+      "peerDependencies": {
+        "next": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next-intl-swc-plugin-extractor": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/next-intl-swc-plugin-extractor/-/next-intl-swc-plugin-extractor-4.9.1.tgz",
+      "integrity": "sha512-8whJJ6oxJz8JqkHarggmmuEDyXgC7nEnaPhZD91CJwEWW4xp0AST3Mw17YxvHyP2vAF3taWfFbs1maD+WWtz3w==",
+      "license": "MIT"
+    },
+    "node_modules/next-intl/node_modules/@swc/core": {
+      "version": "1.15.26",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.26.tgz",
+      "integrity": "sha512-tglZGyx8N5PC+x1Nd/JrZxqpqlcZoSuG9gTDKO6AuFToFiVB3uS8HvbKFuO7g3lJzvFf9riAb94xs9HU2UhAHQ==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "@swc/types": "^0.1.26"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/swc"
+      },
+      "optionalDependencies": {
+        "@swc/core-darwin-arm64": "1.15.26",
+        "@swc/core-darwin-x64": "1.15.26",
+        "@swc/core-linux-arm-gnueabihf": "1.15.26",
+        "@swc/core-linux-arm64-gnu": "1.15.26",
+        "@swc/core-linux-arm64-musl": "1.15.26",
+        "@swc/core-linux-ppc64-gnu": "1.15.26",
+        "@swc/core-linux-s390x-gnu": "1.15.26",
+        "@swc/core-linux-x64-gnu": "1.15.26",
+        "@swc/core-linux-x64-musl": "1.15.26",
+        "@swc/core-win32-arm64-msvc": "1.15.26",
+        "@swc/core-win32-ia32-msvc": "1.15.26",
+        "@swc/core-win32-x64-msvc": "1.15.26"
+      },
+      "peerDependencies": {
+        "@swc/helpers": ">=0.5.17"
+      },
+      "peerDependenciesMeta": {
+        "@swc/helpers": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -8702,6 +9373,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT"
+    },
     "node_modules/node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -9277,6 +9954,12 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/po-parser": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/po-parser/-/po-parser-2.1.1.tgz",
+      "integrity": "sha512-ECF4zHLbUItpUgE3OTtLKlPjeBN+fKEczj2zYjDfCGOzicNs0GK3Vg2IoAYwx7LH/XYw43fZQP6xnZ4TkNxSLQ==",
+      "license": "MIT"
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -11269,6 +11952,27 @@
         }
       }
     },
+    "node_modules/use-intl": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-4.9.1.tgz",
+      "integrity": "sha512-iGVV/xFYlhe3btafRlL8RPLD2Jsuet4yqn9DR6LWWbMhULsJnXgLonDkzDmsAIBIwFtk02oJuX/Ox2vwHKF+UQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/amannn"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "^3.1.0",
+        "@schummar/icu-type-parser": "1.21.5",
+        "icu-minify": "^4.9.1",
+        "intl-messageformat": "^11.1.0"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index e34a647..d4e049b 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -34,6 +34,7 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.294.0",
     "next": "14.0.4",
+    "next-intl": "^4.9.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.64.0",
@@ -49,8 +50,8 @@
     "@playwright/test": "^1.56.0",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.12",
     "@types/file-saver": "^2.0.7",
+    "@types/jest": "^29.5.12",
     "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
diff --git a/apps/frontend/src/components/CookieConsent.tsx b/apps/frontend/src/components/CookieConsent.tsx
index 76af003..eb99916 100644
--- a/apps/frontend/src/components/CookieConsent.tsx
+++ b/apps/frontend/src/components/CookieConsent.tsx
@@ -1,19 +1,20 @@
 /**
  * Cookie Consent Banner
- * GDPR Compliant - French version
+ * GDPR Compliant
  */
 
 'use client';
 
 import React, { useState } from 'react';
-import Link from 'next/link';
+import { Link, usePathname } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Cookie, X, Settings, Check, Shield } from 'lucide-react';
 import { useCookieConsent } from '@/lib/context/cookie-context';
 import type { CookiePreferences } from '@/lib/api/gdpr';
-import { usePathname } from 'next/navigation';
 
 export default function CookieConsent() {
+  const t = useTranslations('components.cookieConsent');
   const {
     preferences,
     showBanner,
@@ -29,13 +30,10 @@ export default function CookieConsent() {
 
   const [localPrefs, setLocalPrefs] = useState<CookiePreferences>(preferences);
   const pathname = usePathname();
-  // On dashboard pages, mobile has a bottom nav bar (h-16 = 64px). Offset to avoid overlap.
   const isDashboard = pathname?.startsWith('/dashboard');
-  // Classes to apply only on mobile when on the dashboard
   const mobileOffset = isDashboard ? 'bottom-16 lg:bottom-0' : 'bottom-0';
   const mobileButtonOffset = isDashboard ? 'bottom-20 lg:bottom-4' : 'bottom-4';
 
-  // Sync local prefs when context changes
   React.useEffect(() => {
     setLocalPrefs(preferences);
   }, [preferences]);
@@ -44,7 +42,6 @@ export default function CookieConsent() {
     await savePreferences(localPrefs);
   };
 
-  // Don't render anything while loading
   if (isLoading) {
     return null;
   }
@@ -61,7 +58,7 @@ export default function CookieConsent() {
             transition={{ type: 'spring', stiffness: 260, damping: 20 }}
             onClick={openPreferences}
             className={`fixed left-4 z-40 p-3 bg-brand-navy text-white rounded-full shadow-lg hover:bg-brand-navy/90 focus:outline-none focus:ring-2 focus:ring-brand-turquoise focus:ring-offset-2 transition-colors ${mobileButtonOffset}`}
-            aria-label="Ouvrir les paramètres de cookies"
+            aria-label={t('openAria')}
           >
             <Cookie className="w-5 h-5" />
           </motion.button>
@@ -93,18 +90,16 @@ export default function CookieConsent() {
                       <div className="flex items-center gap-2 mb-2">
                         <Cookie className="w-5 h-5 text-brand-navy" />
                         <h3 className="text-lg font-semibold text-brand-navy">
-                          Nous utilisons des cookies
+                          {t('banner.title')}
                         </h3>
                       </div>
                       <p className="text-sm text-gray-600 max-w-2xl">
-                        Nous utilisons des cookies pour améliorer votre expérience, analyser le
-                        trafic du site et personnaliser le contenu. En cliquant sur « Tout
-                        accepter », vous consentez à notre utilisation des cookies.{' '}
+                        {t('banner.body')}{' '}
                         <Link
                           href="/cookies"
                           className="text-brand-turquoise hover:text-brand-turquoise/80 underline"
                         >
-                          En savoir plus
+                          {t('banner.learnMore')}
                         </Link>
                       </p>
                     </div>
@@ -115,20 +110,20 @@ export default function CookieConsent() {
                         className="flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-turquoise transition-colors"
                       >
                         <Settings className="w-4 h-4" />
-                        Personnaliser
+                        {t('banner.customize')}
                       </button>
                       <button
                         onClick={acceptEssentialOnly}
                         className="px-4 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-turquoise transition-colors"
                       >
-                        Essentiel uniquement
+                        {t('banner.essentialOnly')}
                       </button>
                       <button
                         onClick={acceptAll}
                         className="flex items-center justify-center gap-2 px-6 py-2.5 text-sm font-medium text-white bg-brand-navy rounded-lg hover:bg-brand-navy/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-turquoise transition-colors"
                       >
                         <Check className="w-4 h-4" />
-                        Tout accepter
+                        {t('banner.acceptAll')}
                       </button>
                     </div>
                   </motion.div>
@@ -144,13 +139,13 @@ export default function CookieConsent() {
                       <div className="flex items-center gap-2">
                         <Shield className="w-5 h-5 text-brand-navy" />
                         <h3 className="text-lg font-semibold text-brand-navy">
-                          Préférences de cookies
+                          {t('settings.title')}
                         </h3>
                       </div>
                       <button
                         onClick={() => setShowSettings(false)}
                         className="p-1 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100 transition-colors"
-                        aria-label="Fermer les paramètres"
+                        aria-label={t('settings.closeAria')}
                       >
                         <X className="w-5 h-5" />
                       </button>
@@ -162,14 +157,14 @@ export default function CookieConsent() {
                         <div className="flex-1">
                           <div className="flex items-center gap-2">
                             <h4 className="text-sm font-semibold text-gray-900">
-                              Cookies essentiels
+                              {t('settings.essential.title')}
                             </h4>
                             <span className="px-2 py-0.5 text-xs font-medium text-brand-navy bg-brand-navy/10 rounded-full">
-                              Toujours actif
+                              {t('settings.essential.alwaysOn')}
                             </span>
                           </div>
                           <p className="mt-1 text-sm text-gray-600">
-                            Nécessaires au fonctionnement du site. Ne peuvent pas être désactivés.
+                            {t('settings.essential.body')}
                           </p>
                         </div>
                         <div className="ml-4 flex items-center">
@@ -186,10 +181,10 @@ export default function CookieConsent() {
                       <div className="flex items-start justify-between p-4 bg-gray-50 rounded-lg border border-gray-100">
                         <div className="flex-1">
                           <h4 className="text-sm font-semibold text-gray-900">
-                            Cookies fonctionnels
+                            {t('settings.functional.title')}
                           </h4>
                           <p className="mt-1 text-sm text-gray-600">
-                            Permettent de mémoriser vos préférences et paramètres (langue, région).
+                            {t('settings.functional.body')}
                           </p>
                         </div>
                         <div className="ml-4 flex items-center">
@@ -208,11 +203,10 @@ export default function CookieConsent() {
                       <div className="flex items-start justify-between p-4 bg-gray-50 rounded-lg border border-gray-100">
                         <div className="flex-1">
                           <h4 className="text-sm font-semibold text-gray-900">
-                            Cookies analytiques
+                            {t('settings.analytics.title')}
                           </h4>
                           <p className="mt-1 text-sm text-gray-600">
-                            Nous aident à comprendre comment les visiteurs interagissent avec notre
-                            site (Google Analytics, Sentry).
+                            {t('settings.analytics.body')}
                           </p>
                         </div>
                         <div className="ml-4 flex items-center">
@@ -231,11 +225,10 @@ export default function CookieConsent() {
                       <div className="flex items-start justify-between p-4 bg-gray-50 rounded-lg border border-gray-100">
                         <div className="flex-1">
                           <h4 className="text-sm font-semibold text-gray-900">
-                            Cookies marketing
+                            {t('settings.marketing.title')}
                           </h4>
                           <p className="mt-1 text-sm text-gray-600">
-                            Utilisés pour afficher des publicités personnalisées et mesurer
-                            l'efficacité des campagnes.
+                            {t('settings.marketing.body')}
                           </p>
                         </div>
                         <div className="ml-4 flex items-center">
@@ -257,21 +250,20 @@ export default function CookieConsent() {
                         className="flex-1 flex items-center justify-center gap-2 px-6 py-2.5 text-sm font-medium text-white bg-brand-navy rounded-lg hover:bg-brand-navy/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-turquoise transition-colors"
                       >
                         <Check className="w-4 h-4" />
-                        Enregistrer mes préférences
+                        {t('settings.save')}
                       </button>
                       <button
                         onClick={acceptAll}
                         className="flex-1 px-6 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-turquoise transition-colors"
                       >
-                        Tout accepter
+                        {t('settings.acceptAll')}
                       </button>
                     </div>
 
                     <p className="mt-4 text-xs text-gray-500 text-center">
-                      Vous pouvez modifier vos préférences à tout moment dans les paramètres de
-                      votre compte ou en cliquant sur l'icône cookie en bas à gauche.{' '}
+                      {t('settings.footer')}{' '}
                       <Link href="/cookies" className="text-brand-turquoise hover:underline">
-                        Politique de cookies
+                        {t('settings.policyLink')}
                       </Link>
                     </p>
                   </motion.div>
diff --git a/apps/frontend/src/components/ExportButton.tsx b/apps/frontend/src/components/ExportButton.tsx
index e2e7f5d..0a0c9c8 100644
--- a/apps/frontend/src/components/ExportButton.tsx
+++ b/apps/frontend/src/components/ExportButton.tsx
@@ -7,6 +7,7 @@
 'use client';
 
 import { useState, useRef, useEffect } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
 import { Download, FileSpreadsheet, FileText, ChevronDown, Lock } from 'lucide-react';
 import { useSubscription } from '@/lib/context/subscription-context';
 
@@ -27,13 +28,15 @@ export default function ExportButton<T extends Record<string, any>>({
   columns,
   disabled = false,
 }: ExportButtonProps<T>) {
+  const t = useTranslations('components.exportButton');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
   const { hasFeature } = useSubscription();
   const canExport = hasFeature('csv_export');
   const [isOpen, setIsOpen] = useState(false);
   const [isExporting, setIsExporting] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
@@ -47,8 +50,8 @@ export default function ExportButton<T extends Record<string, any>>({
 
   const formatValue = (value: any): string => {
     if (value === null || value === undefined) return '';
-    if (typeof value === 'boolean') return value ? 'Oui' : 'Non';
-    if (value instanceof Date) return value.toLocaleDateString('fr-FR');
+    if (typeof value === 'boolean') return value ? t('boolean.true') : t('boolean.false');
+    if (value instanceof Date) return value.toLocaleDateString(dateLocale);
     if (typeof value === 'object') return JSON.stringify(value);
     return String(value);
   };
@@ -58,16 +61,13 @@ export default function ExportButton<T extends Record<string, any>>({
   };
 
   const generateCSV = (): string => {
-    // Headers
     const headers = columns.map(col => `"${col.label.replace(/"/g, '""')}"`).join(';');
 
-    // Rows
     const rows = data.map(row => {
       return columns
         .map(col => {
           const value = getNestedValue(row, col.key as string);
           const formattedValue = col.format ? col.format(value, row) : formatValue(value);
-          // Escape quotes and wrap in quotes
           return `"${formattedValue.replace(/"/g, '""')}"`;
         })
         .join(';');
@@ -77,7 +77,7 @@ export default function ExportButton<T extends Record<string, any>>({
   };
 
   const downloadFile = (content: string, mimeType: string, extension: string) => {
-    const BOM = '\uFEFF'; // UTF-8 BOM for Excel compatibility
+    const BOM = '\uFEFF';
     const blob = new Blob([BOM + content], { type: `${mimeType};charset=utf-8` });
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
@@ -96,7 +96,7 @@ export default function ExportButton<T extends Record<string, any>>({
       downloadFile(csv, 'text/csv', 'csv');
     } catch (error) {
       console.error('Export CSV error:', error);
-      alert('Erreur lors de l\'export CSV');
+      alert(t('errorCsv'));
     } finally {
       setIsExporting(false);
       setIsOpen(false);
@@ -106,7 +106,6 @@ export default function ExportButton<T extends Record<string, any>>({
   const handleExportExcel = async () => {
     setIsExporting(true);
     try {
-      // Generate Excel-compatible XML (SpreadsheetML)
       const xmlHeader = `<?xml version="1.0" encoding="UTF-8"?>
 <?mso-application progid="Excel.Sheet"?>
 <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
@@ -124,15 +123,12 @@ export default function ExportButton<T extends Record<string, any>>({
   <Worksheet ss:Name="Export">
     <Table>`;
 
-      // Column widths
       const columnWidths = columns.map(() => '<Column ss:AutoFitWidth="1" ss:Width="120"/>').join('');
 
-      // Header row
       const headerRow = `<Row ss:StyleID="Header">
         ${columns.map(col => `<Cell><Data ss:Type="String">${escapeXml(col.label)}</Data></Cell>`).join('')}
       </Row>`;
 
-      // Data rows
       const dataRows = data
         .map(row => {
           const cells = columns
@@ -155,7 +151,7 @@ export default function ExportButton<T extends Record<string, any>>({
       downloadFile(xmlContent, 'application/vnd.ms-excel', 'xls');
     } catch (error) {
       console.error('Export Excel error:', error);
-      alert('Erreur lors de l\'export Excel');
+      alert(t('errorExcel'));
     } finally {
       setIsExporting(false);
       setIsOpen(false);
@@ -176,7 +172,7 @@ export default function ExportButton<T extends Record<string, any>>({
       <button
         onClick={() => canExport ? setIsOpen(!isOpen) : window.location.href = '/pricing'}
         disabled={disabled || data.length === 0 || isExporting}
-        title={!canExport ? 'Passez au plan Silver pour exporter vos données' : undefined}
+        title={!canExport ? t('lockedTooltip') : undefined}
         className={`inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${
           canExport ? 'text-gray-700 hover:bg-gray-50' : 'text-gray-400 hover:bg-gray-50'
         }`}
@@ -202,7 +198,7 @@ export default function ExportButton<T extends Record<string, any>>({
                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
               />
             </svg>
-            Export en cours...
+            {t('exporting')}
           </>
         ) : (
           <>
@@ -211,7 +207,7 @@ export default function ExportButton<T extends Record<string, any>>({
             ) : (
               <Lock className="mr-2 h-4 w-4" />
             )}
-            Exporter
+            {t('label')}
             {canExport && <ChevronDown className="ml-2 h-4 w-4" />}
           </>
         )}
@@ -227,8 +223,8 @@ export default function ExportButton<T extends Record<string, any>>({
             >
               <FileText className="mr-3 h-4 w-4 text-green-600" />
               <div className="text-left">
-                <div className="font-medium">Export CSV</div>
-                <div className="text-xs text-gray-500">Compatible Excel, Google Sheets</div>
+                <div className="font-medium">{t('csvTitle')}</div>
+                <div className="text-xs text-gray-500">{t('csvSubtitle')}</div>
               </div>
             </button>
             <button
@@ -237,14 +233,14 @@ export default function ExportButton<T extends Record<string, any>>({
             >
               <FileSpreadsheet className="mr-3 h-4 w-4 text-blue-600" />
               <div className="text-left">
-                <div className="font-medium">Export Excel</div>
-                <div className="text-xs text-gray-500">Format .xls natif</div>
+                <div className="font-medium">{t('excelTitle')}</div>
+                <div className="text-xs text-gray-500">{t('excelSubtitle')}</div>
               </div>
             </button>
           </div>
           <div className="border-t border-gray-100 px-4 py-2">
             <p className="text-xs text-gray-500">
-              {data.length} ligne{data.length > 1 ? 's' : ''} à exporter
+              {t('rowsToExport', { count: data.length })}
             </p>
           </div>
         </div>
diff --git a/apps/frontend/src/components/LanguageSwitcher.tsx b/apps/frontend/src/components/LanguageSwitcher.tsx
new file mode 100644
index 0000000..1890efe
--- /dev/null
+++ b/apps/frontend/src/components/LanguageSwitcher.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import { useLocale, useTranslations } from 'next-intl';
+import { useTransition, useState, useRef, useEffect } from 'react';
+import { usePathname, useRouter } from '@/i18n/navigation';
+import { useParams } from 'next/navigation';
+import { Globe, ChevronDown } from 'lucide-react';
+import { routing } from '@/i18n/routing';
+
+type Variant = 'dark' | 'light';
+
+interface LanguageSwitcherProps {
+  variant?: Variant;
+  className?: string;
+}
+
+const LANGUAGE_LABELS: Record<string, string> = {
+  fr: 'Français',
+  en: 'English',
+};
+
+const LANGUAGE_FLAGS: Record<string, string> = {
+  fr: '🇫🇷',
+  en: '🇬🇧',
+};
+
+export function LanguageSwitcher({ variant = 'dark', className = '' }: LanguageSwitcherProps) {
+  const t = useTranslations('language');
+  const locale = useLocale();
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useParams();
+  const [isPending, startTransition] = useTransition();
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen]);
+
+  const handleSelect = (nextLocale: string) => {
+    if (nextLocale === locale) {
+      setIsOpen(false);
+      return;
+    }
+
+    // Persist the choice in a cookie so the server-side resolver can use it on next load
+    document.cookie = `NEXT_LOCALE=${nextLocale}; path=/; max-age=${60 * 60 * 24 * 365}; samesite=lax`;
+
+    setIsOpen(false);
+    startTransition(() => {
+      router.replace(
+        // @ts-expect-error — params passthrough for dynamic routes
+        { pathname, params },
+        { locale: nextLocale }
+      );
+    });
+  };
+
+  const isDark = variant === 'dark';
+  const buttonClasses = isDark
+    ? 'text-white hover:text-brand-turquoise'
+    : 'text-gray-700 hover:text-brand-navy';
+
+  return (
+    <div ref={containerRef} className={`relative ${className}`}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(v => !v)}
+        disabled={isPending}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-label={t('label')}
+        className={`flex items-center gap-1.5 font-medium transition-colors ${buttonClasses} ${
+          isPending ? 'opacity-60 cursor-wait' : ''
+        }`}
+      >
+        <Globe className="w-4 h-4" />
+        <span className="text-sm uppercase">{locale}</span>
+        <ChevronDown className={`w-3.5 h-3.5 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {isOpen && (
+        <ul
+          role="listbox"
+          className="absolute right-0 top-full mt-2 min-w-[160px] bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden z-50"
+        >
+          {routing.locales.map(loc => {
+            const active = loc === locale;
+            return (
+              <li key={loc}>
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={active}
+                  onClick={() => handleSelect(loc)}
+                  className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm text-left transition-colors ${
+                    active
+                      ? 'bg-brand-turquoise/10 text-brand-navy font-semibold'
+                      : 'text-gray-700 hover:bg-gray-50'
+                  }`}
+                >
+                  <span aria-hidden="true">{LANGUAGE_FLAGS[loc] ?? ''}</span>
+                  <span>{LANGUAGE_LABELS[loc] ?? loc}</span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default LanguageSwitcher;
diff --git a/apps/frontend/src/components/NotificationDropdown.tsx b/apps/frontend/src/components/NotificationDropdown.tsx
index ed66946..f002a78 100644
--- a/apps/frontend/src/components/NotificationDropdown.tsx
+++ b/apps/frontend/src/components/NotificationDropdown.tsx
@@ -8,6 +8,7 @@
 
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState, useRef, useEffect } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
 import { listNotifications, markNotificationAsRead, markAllNotificationsAsRead } from '@/lib/api';
 import type { NotificationResponse } from '@/types/api';
 import NotificationPanel from './NotificationPanel';
@@ -25,6 +26,9 @@ import {
 } from 'lucide-react';
 
 export default function NotificationDropdown() {
+  const t = useTranslations('components.notificationDropdown');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
   const [isOpen, setIsOpen] = useState(false);
   const [isPanelOpen, setIsPanelOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -79,22 +83,11 @@ export default function NotificationDropdown() {
     }
     setIsOpen(false);
 
-    // Navigate to actionUrl if available
     if (notification.actionUrl) {
       window.location.href = notification.actionUrl;
     }
   };
 
-  const getPriorityColor = (priority: string) => {
-    const colors = {
-      critical: 'text-red-600 bg-red-100',
-      high: 'text-orange-600 bg-orange-100',
-      medium: 'text-yellow-600 bg-yellow-100',
-      low: 'text-blue-600 bg-blue-100',
-    };
-    return colors[priority as keyof typeof colors] || colors.low;
-  };
-
   const getNotificationIcon = (type: string): LucideIcon => {
     const icons: Record<string, LucideIcon> = {
       BOOKING_CONFIRMED: CheckCircle,
@@ -116,11 +109,11 @@ export default function NotificationDropdown() {
     const diffHours = Math.floor(diffMs / 3600000);
     const diffDays = Math.floor(diffMs / 86400000);
 
-    if (diffMins < 1) return 'À l\'instant';
-    if (diffMins < 60) return `Il y a ${diffMins}min`;
-    if (diffHours < 24) return `Il y a ${diffHours}h`;
-    if (diffDays < 7) return `Il y a ${diffDays}j`;
-    return date.toLocaleDateString();
+    if (diffMins < 1) return t('time.now');
+    if (diffMins < 60) return t('time.minutes', { minutes: diffMins });
+    if (diffHours < 24) return t('time.hours', { hours: diffHours });
+    if (diffDays < 7) return t('time.days', { days: diffDays });
+    return date.toLocaleDateString(dateLocale);
   };
 
   return (
@@ -129,7 +122,7 @@ export default function NotificationDropdown() {
       <button
         onClick={() => setIsOpen(!isOpen)}
         className="relative p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
-        aria-label="Notifications"
+        aria-label={t('ariaLabel')}
       >
         <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
@@ -151,14 +144,14 @@ export default function NotificationDropdown() {
         <div className="absolute right-0 mt-2 w-96 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
           {/* Header */}
           <div className="flex items-center justify-between px-4 py-3 border-b">
-            <h3 className="text-sm font-semibold text-gray-900">Notifications</h3>
+            <h3 className="text-sm font-semibold text-gray-900">{t('header')}</h3>
             {unreadCount > 0 && (
               <button
                 onClick={() => markAllAsReadMutation.mutate()}
                 disabled={markAllAsReadMutation.isPending}
                 className="text-xs text-blue-600 hover:text-blue-800 font-medium disabled:opacity-50"
               >
-                Tout marquer comme lu
+                {t('markAllRead')}
               </button>
             )}
           </div>
@@ -166,11 +159,11 @@ export default function NotificationDropdown() {
           {/* Notifications List */}
           <div className="max-h-96 overflow-y-auto">
             {isLoading ? (
-              <div className="p-4 text-center text-sm text-gray-500">Chargement des notifications...</div>
+              <div className="p-4 text-center text-sm text-gray-500">{t('loading')}</div>
             ) : notifications.length === 0 ? (
               <div className="p-8 text-center">
                 <Bell className="h-10 w-10 text-gray-300 mx-auto mb-2" />
-                <p className="text-sm text-gray-500">Aucune nouvelle notification</p>
+                <p className="text-sm text-gray-500">{t('empty')}</p>
               </div>
             ) : (
               <div className="divide-y">
@@ -222,7 +215,7 @@ export default function NotificationDropdown() {
               }}
               className="w-full text-center text-sm text-blue-600 hover:text-blue-800 font-medium py-2 hover:bg-blue-50 rounded transition-colors"
             >
-              Voir toutes les notifications
+              {t('viewAll')}
             </button>
           </div>
         </div>
diff --git a/apps/frontend/src/components/NotificationPanel.tsx b/apps/frontend/src/components/NotificationPanel.tsx
index f268ed3..3c7a1e9 100644
--- a/apps/frontend/src/components/NotificationPanel.tsx
+++ b/apps/frontend/src/components/NotificationPanel.tsx
@@ -1,344 +1,342 @@
-/**
- * Notification Panel Component
- *
- * Sidebar panel that displays all notifications with detailed view
- */
-
-'use client';
-
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import {
-  listNotifications,
-  markNotificationAsRead,
-  markAllNotificationsAsRead,
-  deleteNotification
-} from '@/lib/api';
-import type { NotificationResponse } from '@/types/api';
-import { X, Trash2, CheckCheck, Filter, Bell, Package, RefreshCw, XCircle, CheckCircle, Mail, Timer, FileText, Megaphone, User, Building2 } from 'lucide-react';
-
-interface NotificationPanelProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export default function NotificationPanel({ isOpen, onClose }: NotificationPanelProps) {
-  const [selectedFilter, setSelectedFilter] = useState<'all' | 'unread' | 'read'>('all');
-  const [currentPage, setCurrentPage] = useState(1);
-  const queryClient = useQueryClient();
-  const router = useRouter();
-
-  // Fetch notifications with pagination
-  const { data, isLoading } = useQuery({
-    queryKey: ['notifications', 'panel', selectedFilter, currentPage],
-    queryFn: () =>
-      listNotifications({
-        page: currentPage,
-        limit: 20,
-        isRead: selectedFilter === 'all' ? undefined : selectedFilter === 'read',
-      }),
-    enabled: isOpen,
-  });
-
-  const notifications = data?.notifications || [];
-  const total = data?.total || 0;
-  const totalPages = Math.ceil(total / 20);
-
-  // Mark single notification as read
-  const markAsReadMutation = useMutation({
-    mutationFn: markNotificationAsRead,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['notifications'] });
-    },
-  });
-
-  // Mark all as read
-  const markAllAsReadMutation = useMutation({
-    mutationFn: markAllNotificationsAsRead,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['notifications'] });
-    },
-  });
-
-  // Delete notification
-  const deleteNotificationMutation = useMutation({
-    mutationFn: deleteNotification,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['notifications'] });
-    },
-  });
-
-  const handleNotificationClick = (notification: NotificationResponse) => {
-    if (!notification.read) {
-      markAsReadMutation.mutate(notification.id);
-    }
-
-    // Navigate to actionUrl if available
-    if (notification.actionUrl) {
-      onClose();
-      router.push(notification.actionUrl);
-    }
-  };
-
-  const handleDelete = (e: React.MouseEvent, notificationId: string) => {
-    e.stopPropagation();
-    if (confirm('Voulez-vous vraiment supprimer cette notification ?')) {
-      deleteNotificationMutation.mutate(notificationId);
-    }
-  };
-
-  const getPriorityColor = (priority: string) => {
-    const colors = {
-      urgent: 'border-l-4 border-red-500 bg-red-50',
-      high: 'border-l-4 border-orange-500 bg-orange-50',
-      medium: 'border-l-4 border-yellow-500 bg-yellow-50',
-      low: 'border-l-4 border-blue-500 bg-blue-50',
-    };
-    return colors[priority as keyof typeof colors] || 'border-l-4 border-gray-300';
-  };
-
-  const getNotificationIconComponent = (type: string) => {
-    const icons: Record<string, typeof Bell> = {
-      booking_created: Package,
-      booking_updated: RefreshCw,
-      booking_cancelled: XCircle,
-      booking_confirmed: CheckCircle,
-      csv_booking_accepted: CheckCircle,
-      csv_booking_rejected: XCircle,
-      csv_booking_request_sent: Mail,
-      rate_quote_expiring: Timer,
-      document_uploaded: FileText,
-      system_announcement: Megaphone,
-      user_invited: User,
-      organization_update: Building2,
-    };
-    return icons[type.toLowerCase()] || Bell;
-  };
-
-  const formatTime = (dateString: string) => {
-    const date = new Date(dateString);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-
-    if (diffMins < 1) return 'À l\'instant';
-    if (diffMins < 60) return `Il y a ${diffMins}min`;
-    if (diffHours < 24) return `Il y a ${diffHours}h`;
-    if (diffDays < 7) return `Il y a ${diffDays}j`;
-    return date.toLocaleDateString('fr-FR', {
-      day: 'numeric',
-      month: 'short',
-      year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
-    });
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <>
-      {/* Backdrop */}
-      <div
-        className="fixed inset-0 bg-black/30 z-40 transition-opacity"
-        onClick={onClose}
-      />
-
-      {/* Panel */}
-      <div className="fixed right-0 top-0 bottom-0 w-full max-w-2xl bg-white shadow-2xl z-50 flex flex-col animate-slide-in-right">
-        {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b bg-white">
-          <div>
-            <h2 className="text-xl font-bold text-gray-900">Notifications</h2>
-            <p className="text-sm text-gray-600 mt-1">
-              {total} notification{total !== 1 ? 's' : ''} total
-            </p>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-600"
-            aria-label="Fermer le panneau"
-          >
-            <X className="w-6 h-6" />
-          </button>
-        </div>
-
-        {/* Filter Bar */}
-        <div className="flex items-center justify-between px-6 py-3 border-b bg-gray-50">
-          <div className="flex items-center space-x-2">
-            <Filter className="w-4 h-4 text-gray-500" />
-            <div className="flex space-x-1">
-              {(['all', 'unread', 'read'] as const).map((filter) => (
-                <button
-                  key={filter}
-                  onClick={() => {
-                    setSelectedFilter(filter);
-                    setCurrentPage(1);
-                  }}
-                  className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
-                    selectedFilter === filter
-                      ? 'bg-blue-600 text-white'
-                      : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
-                  }`}
-                >
-                  {filter === 'all' ? 'Toutes' : filter === 'unread' ? 'Non lues' : 'Lues'}
-                </button>
-              ))}
-            </div>
-          </div>
-          {selectedFilter === 'unread' && notifications.length > 0 && (
-            <button
-              onClick={() => markAllAsReadMutation.mutate()}
-              disabled={markAllAsReadMutation.isPending}
-              className="flex items-center space-x-1 text-sm text-blue-600 hover:text-blue-800 font-medium disabled:opacity-50"
-            >
-              <CheckCheck className="w-4 h-4" />
-              <span>Tout marquer comme lu</span>
-            </button>
-          )}
-        </div>
-
-        {/* Notifications List */}
-        <div className="flex-1 overflow-y-auto">
-          {isLoading ? (
-            <div className="flex items-center justify-center h-64">
-              <div className="text-center">
-                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4" />
-                <p className="text-sm text-gray-500">Chargement des notifications...</p>
-              </div>
-            </div>
-          ) : notifications.length === 0 ? (
-            <div className="flex items-center justify-center h-64">
-              <div className="text-center">
-                <Bell className="h-16 w-16 text-gray-300 mx-auto mb-4" />
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">Aucune notification</h3>
-                <p className="text-sm text-gray-500">
-                  {selectedFilter === 'unread'
-                    ? 'Vous êtes à jour !'
-                    : 'Aucune notification à afficher'}
-                </p>
-              </div>
-            </div>
-          ) : (
-            <div className="divide-y">
-              {notifications.map((notification: NotificationResponse) => (
-                <div
-                  key={notification.id}
-                  onClick={() => handleNotificationClick(notification)}
-                  className={`p-6 hover:bg-gray-50 transition-all cursor-pointer group ${
-                    !notification.read ? 'bg-blue-50/50' : ''
-                  } ${getPriorityColor(notification.priority || 'low')}`}
-                >
-                  <div className="flex items-start space-x-4">
-                    {/* Icon */}
-                    <div className="flex-shrink-0">
-                      {(() => { const Icon = getNotificationIconComponent(notification.type); return <Icon className="h-6 w-6 text-gray-500" />; })()}
-                    </div>
-
-                    {/* Content */}
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-start justify-between mb-2">
-                        <div className="flex items-center space-x-2">
-                          <h3 className="text-base font-semibold text-gray-900">
-                            {notification.title}
-                          </h3>
-                          {!notification.read && (
-                            <span className="w-2.5 h-2.5 bg-blue-600 rounded-full" />
-                          )}
-                        </div>
-                        <button
-                          onClick={(e) => handleDelete(e, notification.id)}
-                          className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-red-100 rounded"
-                          title="Supprimer la notification"
-                        >
-                          <Trash2 className="w-4 h-4 text-red-600" />
-                        </button>
-                      </div>
-
-                      <p className="text-sm text-gray-700 mb-3 leading-relaxed">
-                        {notification.message}
-                      </p>
-
-                      {/* Metadata */}
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center space-x-4 text-xs text-gray-500">
-                          <span className="font-medium">
-                            {formatTime(notification.createdAt)}
-                          </span>
-                          <span className="px-2 py-0.5 bg-gray-200 rounded-full text-gray-700 font-medium">
-                            {notification.type.replace(/_/g, ' ').toUpperCase()}
-                          </span>
-                          {notification.priority && (
-                            <span
-                              className={`px-2 py-0.5 rounded-full font-medium ${
-                                notification.priority === 'urgent'
-                                  ? 'bg-red-100 text-red-700'
-                                  : notification.priority === 'high'
-                                  ? 'bg-orange-100 text-orange-700'
-                                  : notification.priority === 'medium'
-                                  ? 'bg-yellow-100 text-yellow-700'
-                                  : 'bg-blue-100 text-blue-700'
-                              }`}
-                            >
-                              {notification.priority.toUpperCase()}
-                            </span>
-                          )}
-                        </div>
-                        {notification.actionUrl && (
-                          <span className="text-xs text-blue-600 font-medium group-hover:underline">
-                            Voir les détails →
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* Pagination */}
-        {totalPages > 1 && (
-          <div className="flex items-center justify-between px-6 py-4 border-t bg-gray-50">
-            <div className="text-sm text-gray-600">
-              Page {currentPage} sur {totalPages}
-            </div>
-            <div className="flex space-x-2">
-              <button
-                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                disabled={currentPage === 1}
-                className="px-3 py-1.5 text-sm font-medium bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Précédent
-              </button>
-              <button
-                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
-                disabled={currentPage === totalPages}
-                className="px-3 py-1.5 text-sm font-medium bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Suivant
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-
-      <style jsx>{`
-        @keyframes slide-in-right {
-          from {
-            transform: translateX(100%);
-          }
-          to {
-            transform: translateX(0);
-          }
-        }
-
-        .animate-slide-in-right {
-          animation: slide-in-right 0.3s ease-out;
-        }
-      `}</style>
-    </>
-  );
-}
+/**
+ * Notification Panel Component
+ *
+ * Sidebar panel that displays all notifications with detailed view
+ */
+
+'use client';
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import {
+  listNotifications,
+  markNotificationAsRead,
+  markAllNotificationsAsRead,
+  deleteNotification
+} from '@/lib/api';
+import type { NotificationResponse } from '@/types/api';
+import { X, Trash2, CheckCheck, Filter, Bell, Package, RefreshCw, XCircle, CheckCircle, Mail, Timer, FileText, Megaphone, User, Building2 } from 'lucide-react';
+
+interface NotificationPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function NotificationPanel({ isOpen, onClose }: NotificationPanelProps) {
+  const t = useTranslations('components.notificationPanel');
+  const tTime = useTranslations('components.notificationDropdown.time');
+  const locale = useLocale();
+  const dateLocale = locale === 'fr' ? 'fr-FR' : 'en-US';
+  const [selectedFilter, setSelectedFilter] = useState<'all' | 'unread' | 'read'>('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const queryClient = useQueryClient();
+  const router = useRouter();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['notifications', 'panel', selectedFilter, currentPage],
+    queryFn: () =>
+      listNotifications({
+        page: currentPage,
+        limit: 20,
+        isRead: selectedFilter === 'all' ? undefined : selectedFilter === 'read',
+      }),
+    enabled: isOpen,
+  });
+
+  const notifications = data?.notifications || [];
+  const total = data?.total || 0;
+  const totalPages = Math.ceil(total / 20);
+
+  const markAsReadMutation = useMutation({
+    mutationFn: markNotificationAsRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    },
+  });
+
+  const markAllAsReadMutation = useMutation({
+    mutationFn: markAllNotificationsAsRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    },
+  });
+
+  const deleteNotificationMutation = useMutation({
+    mutationFn: deleteNotification,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    },
+  });
+
+  const handleNotificationClick = (notification: NotificationResponse) => {
+    if (!notification.read) {
+      markAsReadMutation.mutate(notification.id);
+    }
+
+    if (notification.actionUrl) {
+      onClose();
+      router.push(notification.actionUrl);
+    }
+  };
+
+  const handleDelete = (e: React.MouseEvent, notificationId: string) => {
+    e.stopPropagation();
+    if (confirm(t('deleteConfirm'))) {
+      deleteNotificationMutation.mutate(notificationId);
+    }
+  };
+
+  const getPriorityColor = (priority: string) => {
+    const colors = {
+      urgent: 'border-l-4 border-red-500 bg-red-50',
+      high: 'border-l-4 border-orange-500 bg-orange-50',
+      medium: 'border-l-4 border-yellow-500 bg-yellow-50',
+      low: 'border-l-4 border-blue-500 bg-blue-50',
+    };
+    return colors[priority as keyof typeof colors] || 'border-l-4 border-gray-300';
+  };
+
+  const getNotificationIconComponent = (type: string) => {
+    const icons: Record<string, typeof Bell> = {
+      booking_created: Package,
+      booking_updated: RefreshCw,
+      booking_cancelled: XCircle,
+      booking_confirmed: CheckCircle,
+      csv_booking_accepted: CheckCircle,
+      csv_booking_rejected: XCircle,
+      csv_booking_request_sent: Mail,
+      rate_quote_expiring: Timer,
+      document_uploaded: FileText,
+      system_announcement: Megaphone,
+      user_invited: User,
+      organization_update: Building2,
+    };
+    return icons[type.toLowerCase()] || Bell;
+  };
+
+  const formatTime = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return tTime('now');
+    if (diffMins < 60) return tTime('minutes', { minutes: diffMins });
+    if (diffHours < 24) return tTime('hours', { hours: diffHours });
+    if (diffDays < 7) return tTime('days', { days: diffDays });
+    return date.toLocaleDateString(dateLocale, {
+      day: 'numeric',
+      month: 'short',
+      year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
+    });
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/30 z-40 transition-opacity"
+        onClick={onClose}
+      />
+
+      {/* Panel */}
+      <div className="fixed right-0 top-0 bottom-0 w-full max-w-2xl bg-white shadow-2xl z-50 flex flex-col animate-slide-in-right">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b bg-white">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">{t('title')}</h2>
+            <p className="text-sm text-gray-600 mt-1">
+              {t('totalCount', { count: total })}
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-600"
+            aria-label={t('closeAria')}
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Filter Bar */}
+        <div className="flex items-center justify-between px-6 py-3 border-b bg-gray-50">
+          <div className="flex items-center space-x-2">
+            <Filter className="w-4 h-4 text-gray-500" />
+            <div className="flex space-x-1">
+              {(['all', 'unread', 'read'] as const).map((filter) => (
+                <button
+                  key={filter}
+                  onClick={() => {
+                    setSelectedFilter(filter);
+                    setCurrentPage(1);
+                  }}
+                  className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                    selectedFilter === filter
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
+                  }`}
+                >
+                  {t(`filters.${filter}` as any)}
+                </button>
+              ))}
+            </div>
+          </div>
+          {selectedFilter === 'unread' && notifications.length > 0 && (
+            <button
+              onClick={() => markAllAsReadMutation.mutate()}
+              disabled={markAllAsReadMutation.isPending}
+              className="flex items-center space-x-1 text-sm text-blue-600 hover:text-blue-800 font-medium disabled:opacity-50"
+            >
+              <CheckCheck className="w-4 h-4" />
+              <span>{t('markAllRead')}</span>
+            </button>
+          )}
+        </div>
+
+        {/* Notifications List */}
+        <div className="flex-1 overflow-y-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="text-center">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4" />
+                <p className="text-sm text-gray-500">{t('loading')}</p>
+              </div>
+            </div>
+          ) : notifications.length === 0 ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="text-center">
+                <Bell className="h-16 w-16 text-gray-300 mx-auto mb-4" />
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">{t('emptyTitle')}</h3>
+                <p className="text-sm text-gray-500">
+                  {selectedFilter === 'unread' ? t('emptyUnread') : t('emptyAll')}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="divide-y">
+              {notifications.map((notification: NotificationResponse) => (
+                <div
+                  key={notification.id}
+                  onClick={() => handleNotificationClick(notification)}
+                  className={`p-6 hover:bg-gray-50 transition-all cursor-pointer group ${
+                    !notification.read ? 'bg-blue-50/50' : ''
+                  } ${getPriorityColor(notification.priority || 'low')}`}
+                >
+                  <div className="flex items-start space-x-4">
+                    {/* Icon */}
+                    <div className="flex-shrink-0">
+                      {(() => { const Icon = getNotificationIconComponent(notification.type); return <Icon className="h-6 w-6 text-gray-500" />; })()}
+                    </div>
+
+                    {/* Content */}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-start justify-between mb-2">
+                        <div className="flex items-center space-x-2">
+                          <h3 className="text-base font-semibold text-gray-900">
+                            {notification.title}
+                          </h3>
+                          {!notification.read && (
+                            <span className="w-2.5 h-2.5 bg-blue-600 rounded-full" />
+                          )}
+                        </div>
+                        <button
+                          onClick={(e) => handleDelete(e, notification.id)}
+                          className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-red-100 rounded"
+                          title={t('deleteTitle')}
+                        >
+                          <Trash2 className="w-4 h-4 text-red-600" />
+                        </button>
+                      </div>
+
+                      <p className="text-sm text-gray-700 mb-3 leading-relaxed">
+                        {notification.message}
+                      </p>
+
+                      {/* Metadata */}
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-4 text-xs text-gray-500">
+                          <span className="font-medium">
+                            {formatTime(notification.createdAt)}
+                          </span>
+                          <span className="px-2 py-0.5 bg-gray-200 rounded-full text-gray-700 font-medium">
+                            {notification.type.replace(/_/g, ' ').toUpperCase()}
+                          </span>
+                          {notification.priority && (
+                            <span
+                              className={`px-2 py-0.5 rounded-full font-medium ${
+                                notification.priority === 'urgent'
+                                  ? 'bg-red-100 text-red-700'
+                                  : notification.priority === 'high'
+                                  ? 'bg-orange-100 text-orange-700'
+                                  : notification.priority === 'medium'
+                                  ? 'bg-yellow-100 text-yellow-700'
+                                  : 'bg-blue-100 text-blue-700'
+                              }`}
+                            >
+                              {notification.priority.toUpperCase()}
+                            </span>
+                          )}
+                        </div>
+                        {notification.actionUrl && (
+                          <span className="text-xs text-blue-600 font-medium group-hover:underline">
+                            {t('viewDetails')}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between px-6 py-4 border-t bg-gray-50">
+            <div className="text-sm text-gray-600">
+              {t('pagination.page', { current: currentPage, total: totalPages })}
+            </div>
+            <div className="flex space-x-2">
+              <button
+                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+                className="px-3 py-1.5 text-sm font-medium bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {t('pagination.previous')}
+              </button>
+              <button
+                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+                className="px-3 py-1.5 text-sm font-medium bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {t('pagination.next')}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <style jsx>{`
+        @keyframes slide-in-right {
+          from {
+            transform: translateX(100%);
+          }
+          to {
+            transform: translateX(0);
+          }
+        }
+
+        .animate-slide-in-right {
+          animation: slide-in-right 0.3s ease-out;
+        }
+      `}</style>
+    </>
+  );
+}
diff --git a/apps/frontend/src/components/admin/AdminPanelDropdown.tsx b/apps/frontend/src/components/admin/AdminPanelDropdown.tsx
index 6f26987..60a09c4 100644
--- a/apps/frontend/src/components/admin/AdminPanelDropdown.tsx
+++ b/apps/frontend/src/components/admin/AdminPanelDropdown.tsx
@@ -1,143 +1,113 @@
-'use client';
-
-import { useState, useRef, useEffect } from 'react';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { Users, Building2, Package, FileText, BarChart3, Settings, ScrollText, type LucideIcon } from 'lucide-react';
-
-interface AdminMenuItem {
-  name: string;
-  href: string;
-  icon: LucideIcon;
-  description: string;
-}
-
-const adminMenuItems: AdminMenuItem[] = [
-  {
-    name: 'Utilisateurs',
-    href: '/dashboard/admin/users',
-    icon: Users,
-    description: 'Gérer les utilisateurs et les permissions',
-  },
-  {
-    name: 'Organisations',
-    href: '/dashboard/admin/organizations',
-    icon: Building2,
-    description: 'Gérer les organisations et entreprises',
-  },
-  {
-    name: 'Réservations',
-    href: '/dashboard/admin/bookings',
-    icon: Package,
-    description: 'Consulter et gérer toutes les réservations',
-  },
-  {
-    name: 'Documents',
-    href: '/dashboard/admin/documents',
-    icon: FileText,
-    description: 'Gérer les documents des organisations',
-  },
-  {
-    name: 'Tarifs CSV',
-    href: '/dashboard/admin/csv-rates',
-    icon: BarChart3,
-    description: 'Importer et gérer les tarifs CSV',
-  },
-  {
-    name: 'Logs système',
-    href: '/dashboard/admin/logs',
-    icon: ScrollText,
-    description: 'Visualiser et télécharger les logs applicatifs',
-  },
-];
-
-export default function AdminPanelDropdown() {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const pathname = usePathname();
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    }
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  // Close dropdown when route changes
-  useEffect(() => {
-    setIsOpen(false);
-  }, [pathname]);
-
-  const isActiveRoute = adminMenuItems.some(item => pathname.startsWith(item.href));
-
-  return (
-    <div className="relative" ref={dropdownRef}>
-      {/* Trigger Button */}
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className={`flex items-center w-full px-4 py-3 text-sm font-medium rounded-lg transition-colors ${
-          isActiveRoute
-            ? 'bg-blue-50 text-blue-700'
-            : 'text-gray-700 hover:bg-gray-100'
-        }`}
-      >
-        <Settings className="mr-3 h-5 w-5" />
-        <span className="flex-1 text-left">Administration</span>
-        <svg
-          className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </button>
-
-      {/* Dropdown Menu */}
-      {isOpen && (
-        <div className="absolute left-0 right-0 mt-2 bg-white rounded-lg shadow-lg border border-gray-200 z-50 overflow-hidden">
-          <div className="py-2">
-            {adminMenuItems.map(item => {
-              const isActive = pathname.startsWith(item.href);
-              const IconComponent = item.icon;
-              return (
-                <Link
-                  key={item.name}
-                  href={item.href}
-                  className={`flex items-start px-4 py-3 hover:bg-gray-50 transition-colors ${
-                    isActive ? 'bg-blue-50' : ''
-                  }`}
-                >
-                  <IconComponent className="h-5 w-5 mr-3 mt-0.5 text-gray-500" />
-                  <div className="flex-1">
-                    <div className={`text-sm font-medium ${isActive ? 'text-blue-700' : 'text-gray-900'}`}>
-                      {item.name}
-                    </div>
-                    <div className="text-xs text-gray-500 mt-0.5">
-                      {item.description}
-                    </div>
-                  </div>
-                </Link>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { Link, usePathname } from '@/i18n/navigation';
+import { Users, Building2, Package, FileText, BarChart3, Settings, ScrollText, type LucideIcon } from 'lucide-react';
+
+interface AdminMenuItem {
+  key: string;
+  href: string;
+  icon: LucideIcon;
+}
+
+const adminMenuItems: AdminMenuItem[] = [
+  { key: 'users', href: '/dashboard/admin/users', icon: Users },
+  { key: 'organizations', href: '/dashboard/admin/organizations', icon: Building2 },
+  { key: 'bookings', href: '/dashboard/admin/bookings', icon: Package },
+  { key: 'documents', href: '/dashboard/admin/documents', icon: FileText },
+  { key: 'csvRates', href: '/dashboard/admin/csv-rates', icon: BarChart3 },
+  { key: 'logs', href: '/dashboard/admin/logs', icon: ScrollText },
+];
+
+export default function AdminPanelDropdown() {
+  const t = useTranslations('components.adminPanelDropdown');
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
+  const isActiveRoute = adminMenuItems.some(item => pathname.startsWith(item.href));
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Trigger Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`flex items-center w-full px-4 py-3 text-sm font-medium rounded-lg transition-colors ${
+          isActiveRoute
+            ? 'bg-blue-50 text-blue-700'
+            : 'text-gray-700 hover:bg-gray-100'
+        }`}
+      >
+        <Settings className="mr-3 h-5 w-5" />
+        <span className="flex-1 text-left">{t('trigger')}</span>
+        <svg
+          className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div className="absolute left-0 right-0 mt-2 bg-white rounded-lg shadow-lg border border-gray-200 z-50 overflow-hidden">
+          <div className="py-2">
+            {adminMenuItems.map(item => {
+              const isActive = pathname.startsWith(item.href);
+              const IconComponent = item.icon;
+              const name = t(`items.${item.key}` as any);
+              const description = t(`items.${item.key}Desc` as any);
+              return (
+                <Link
+                  key={item.key}
+                  href={item.href}
+                  className={`flex items-start px-4 py-3 hover:bg-gray-50 transition-colors ${
+                    isActive ? 'bg-blue-50' : ''
+                  }`}
+                >
+                  <IconComponent className="h-5 w-5 mr-3 mt-0.5 text-gray-500" />
+                  <div className="flex-1">
+                    <div className={`text-sm font-medium ${isActive ? 'text-blue-700' : 'text-gray-900'}`}>
+                      {name}
+                    </div>
+                    <div className="text-xs text-gray-500 mt-0.5">
+                      {description}
+                    </div>
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/admin/CsvUpload.tsx b/apps/frontend/src/components/admin/CsvUpload.tsx
index 6ef5c74..ce5003e 100644
--- a/apps/frontend/src/components/admin/CsvUpload.tsx
+++ b/apps/frontend/src/components/admin/CsvUpload.tsx
@@ -9,6 +9,7 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { useTranslations } from 'next-intl';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
@@ -18,6 +19,7 @@ import { Upload, CheckCircle, XCircle, Loader2 } from 'lucide-react';
 import { uploadCsvRates } from '@/lib/api/admin/csv-rates';
 
 export function CsvUpload() {
+  const t = useTranslations('components.csvUpload');
   const router = useRouter();
   const [companyName, setCompanyName] = useState('');
   const [companyEmail, setCompanyEmail] = useState('');
@@ -32,15 +34,13 @@ export function CsvUpload() {
     setError(null);
     setSuccess(null);
 
-    // Validate file type
     if (selectedFile && !selectedFile.name.endsWith('.csv')) {
-      setError('Seuls les fichiers CSV (.csv) sont acceptés');
+      setError(t('fileTypeError'));
       setFile(null);
     }
 
-    // Validate file size (10MB max)
     if (selectedFile && selectedFile.size > 10 * 1024 * 1024) {
-      setError('Le fichier ne doit pas dépasser 10 MB');
+      setError(t('fileSizeError'));
       setFile(null);
     }
   };
@@ -49,7 +49,7 @@ export function CsvUpload() {
     e.preventDefault();
 
     if (!file || !companyName || !companyEmail) {
-      setError('Veuillez remplir tous les champs');
+      setError(t('fillAllFields'));
       return;
     }
 
@@ -65,23 +65,21 @@ export function CsvUpload() {
 
       const result = await uploadCsvRates(formData);
 
-      setSuccess(`✅ Succès ! ${result.rowCount} tarifs uploadés pour ${result.companyName}`);
+      setSuccess(t('successMessage', { count: result.rowCount, companyName: result.companyName }));
       setCompanyName('');
       setCompanyEmail('');
       setFile(null);
 
-      // Reset file input
       const fileInput = document.getElementById('file-input') as HTMLInputElement;
       if (fileInput) {
         fileInput.value = '';
       }
 
-      // Refresh page after 2 seconds
       setTimeout(() => {
         router.refresh();
       }, 2000);
     } catch (err: any) {
-      setError(err?.message || "Erreur lors de l'upload du fichier CSV");
+      setError(err?.message || t('uploadError'));
     } finally {
       setLoading(false);
     }
@@ -105,11 +103,10 @@ export function CsvUpload() {
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <Upload className="h-5 w-5" />
-          Upload tarifs CSV
+          {t('title')}
         </CardTitle>
         <CardDescription>
-          Uploadez un fichier CSV contenant les tarifs de transport maritime pour une compagnie.
-          Taille maximale : 10 MB. Format requis : .csv
+          {t('description')}
         </CardDescription>
       </CardHeader>
 
@@ -118,44 +115,44 @@ export function CsvUpload() {
           {/* Company Name */}
           <div className="space-y-2">
             <Label htmlFor="company-name">
-              Nom de la compagnie <span className="text-red-500">*</span>
+              {t('form.companyName')} <span className="text-red-500">*</span>
             </Label>
             <Input
               id="company-name"
               value={companyName}
               onChange={e => setCompanyName(e.target.value)}
-              placeholder="Ex: SSC Consolidation"
+              placeholder={t('form.companyNamePlaceholder')}
               required
               disabled={loading}
             />
             <p className="text-xs text-muted-foreground">
-              Nom exact de la compagnie maritime (doit correspondre aux données CSV)
+              {t('form.companyNameHint')}
             </p>
           </div>
 
           {/* Company Email */}
           <div className="space-y-2">
             <Label htmlFor="company-email">
-              Email de la compagnie <span className="text-red-500">*</span>
+              {t('form.companyEmail')} <span className="text-red-500">*</span>
             </Label>
             <Input
               id="company-email"
               type="email"
               value={companyEmail}
               onChange={e => setCompanyEmail(e.target.value)}
-              placeholder="Ex: bookings@sscconsolidation.com"
+              placeholder={t('form.companyEmailPlaceholder')}
               required
               disabled={loading}
             />
             <p className="text-xs text-muted-foreground">
-              Email pour les demandes de réservation auprès de cette compagnie
+              {t('form.companyEmailHint')}
             </p>
           </div>
 
           {/* File Input */}
           <div className="space-y-2">
             <Label htmlFor="file-input">
-              Fichier CSV <span className="text-red-500">*</span>
+              {t('form.fileLabel')} <span className="text-red-500">*</span>
             </Label>
             <Input
               id="file-input"
@@ -167,7 +164,7 @@ export function CsvUpload() {
             />
             {file && (
               <p className="text-sm text-muted-foreground">
-                Fichier sélectionné: <strong>{file.name}</strong> ({(file.size / 1024).toFixed(2)}{' '}
+                {t('form.fileSelected')} <strong>{file.name}</strong> ({(file.size / 1024).toFixed(2)}{' '}
                 KB)
               </p>
             )}
@@ -175,9 +172,9 @@ export function CsvUpload() {
 
           {/* CSV Format Info */}
           <Alert>
-            <AlertTitle>Format CSV requis</AlertTitle>
+            <AlertTitle>{t('form.formatTitle')}</AlertTitle>
             <AlertDescription className="text-xs space-y-1">
-              <p>Le fichier CSV doit contenir les colonnes suivantes :</p>
+              <p>{t('form.formatIntro')}</p>
               <ul className="list-disc list-inside mt-2">
                 <li>companyName, origin, destination, containerType</li>
                 <li>minVolumeCBM, maxVolumeCBM, minWeightKG, maxWeightKG</li>
@@ -193,7 +190,7 @@ export function CsvUpload() {
           {error && (
             <Alert variant="destructive">
               <XCircle className="h-4 w-4" />
-              <AlertTitle>Erreur</AlertTitle>
+              <AlertTitle>{t('form.errorTitle')}</AlertTitle>
               <AlertDescription>{error}</AlertDescription>
             </Alert>
           )}
@@ -202,7 +199,7 @@ export function CsvUpload() {
           {success && (
             <Alert className="border-green-500 text-green-600">
               <CheckCircle className="h-4 w-4" />
-              <AlertTitle>Succès</AlertTitle>
+              <AlertTitle>{t('form.successTitle')}</AlertTitle>
               <AlertDescription>{success}</AlertDescription>
             </Alert>
           )}
@@ -213,17 +210,17 @@ export function CsvUpload() {
               {loading ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Upload en cours...
+                  {t('form.submitting')}
                 </>
               ) : (
                 <>
                   <Upload className="mr-2 h-4 w-4" />
-                  Upload CSV
+                  {t('form.submit')}
                 </>
               )}
             </Button>
             <Button type="button" variant="outline" onClick={handleReset} disabled={loading}>
-              Réinitialiser
+              {t('form.reset')}
             </Button>
           </div>
         </form>
diff --git a/apps/frontend/src/components/bookings/BookingFilters.tsx b/apps/frontend/src/components/bookings/BookingFilters.tsx
index ccca8a9..0f7d763 100644
--- a/apps/frontend/src/components/bookings/BookingFilters.tsx
+++ b/apps/frontend/src/components/bookings/BookingFilters.tsx
@@ -2,7 +2,10 @@
  * Advanced Booking Filters Component
  */
 
+'use client';
+
 import React, { useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { BookingFilters as IBookingFilters, BookingStatus } from '@/types/booking';
 
 interface BookingFiltersProps {
@@ -16,6 +19,7 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
   onFiltersChange,
   onReset,
 }) => {
+  const t = useTranslations('components.bookingFilters');
   const [isExpanded, setIsExpanded] = useState(false);
 
   const handleStatusChange = (status: BookingStatus) => {
@@ -27,19 +31,24 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
     onFiltersChange({ status: newStatuses });
   };
 
+  const activeCount = Object.keys(filters).filter(key => {
+    const value = filters[key as keyof IBookingFilters];
+    return Array.isArray(value) ? value.length > 0 : Boolean(value);
+  }).length;
+
   return (
     <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
       <div className="flex items-center justify-between mb-4">
-        <h3 className="text-lg font-semibold text-gray-900">Filters</h3>
+        <h3 className="text-lg font-semibold text-gray-900">{t('title')}</h3>
         <div className="flex gap-2">
           <button
             onClick={() => setIsExpanded(!isExpanded)}
             className="text-sm text-blue-600 hover:text-blue-700"
           >
-            {isExpanded ? 'Show Less' : 'Show More'}
+            {isExpanded ? t('showLess') : t('showMore')}
           </button>
           <button onClick={onReset} className="text-sm text-gray-600 hover:text-gray-700">
-            Reset All
+            {t('reset')}
           </button>
         </div>
       </div>
@@ -48,10 +57,10 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
         {/* Search */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Search</label>
+          <label className="block text-sm font-medium text-gray-700 mb-1">{t('search')}</label>
           <input
             type="text"
-            placeholder="Booking number, shipper, consignee..."
+            placeholder={t('searchPlaceholder')}
             value={filters.search || ''}
             onChange={e => onFiltersChange({ search: e.target.value })}
             className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -60,10 +69,10 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
 
         {/* Carrier */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Carrier</label>
+          <label className="block text-sm font-medium text-gray-700 mb-1">{t('carrier')}</label>
           <input
             type="text"
-            placeholder="Carrier name or SCAC"
+            placeholder={t('carrierPlaceholder')}
             value={filters.carrier || ''}
             onChange={e => onFiltersChange({ carrier: e.target.value })}
             className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -72,10 +81,10 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
 
         {/* Origin Port */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Origin Port</label>
+          <label className="block text-sm font-medium text-gray-700 mb-1">{t('originPort')}</label>
           <input
             type="text"
-            placeholder="Port code"
+            placeholder={t('portCodePlaceholder')}
             value={filters.originPort || ''}
             onChange={e => onFiltersChange({ originPort: e.target.value })}
             className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -85,7 +94,7 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
 
       {/* Status filters */}
       <div className="mb-4">
-        <label className="block text-sm font-medium text-gray-700 mb-2">Status</label>
+        <label className="block text-sm font-medium text-gray-700 mb-2">{t('status')}</label>
         <div className="flex flex-wrap gap-2">
           {Object.values(BookingStatus).map((status: BookingStatus) => (
             <button
@@ -108,10 +117,10 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 pt-4 border-t border-gray-200">
           {/* Destination Port */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Destination Port</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">{t('destinationPort')}</label>
             <input
               type="text"
-              placeholder="Port code"
+              placeholder={t('portCodePlaceholder')}
               value={filters.destinationPort || ''}
               onChange={e => onFiltersChange({ destinationPort: e.target.value })}
               className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -120,10 +129,10 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
 
           {/* Shipper */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Shipper</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">{t('shipper')}</label>
             <input
               type="text"
-              placeholder="Shipper name"
+              placeholder={t('shipperPlaceholder')}
               value={filters.shipper || ''}
               onChange={e => onFiltersChange({ shipper: e.target.value })}
               className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -132,10 +141,10 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
 
           {/* Consignee */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Consignee</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">{t('consignee')}</label>
             <input
               type="text"
-              placeholder="Consignee name"
+              placeholder={t('consigneePlaceholder')}
               value={filters.consignee || ''}
               onChange={e => onFiltersChange({ consignee: e.target.value })}
               className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
@@ -144,7 +153,7 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
 
           {/* Created From */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Created From</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">{t('createdFrom')}</label>
             <input
               type="date"
               value={filters.createdFrom || ''}
@@ -155,7 +164,7 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
 
           {/* Created To */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Created To</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">{t('createdTo')}</label>
             <input
               type="date"
               value={filters.createdTo || ''}
@@ -166,7 +175,7 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
 
           {/* ETD From */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">ETD From</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">{t('etdFrom')}</label>
             <input
               type="date"
               value={filters.etdFrom || ''}
@@ -177,7 +186,7 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
 
           {/* ETD To */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">ETD To</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">{t('etdTo')}</label>
             <input
               type="date"
               value={filters.etdTo || ''}
@@ -188,32 +197,26 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
 
           {/* Sort By */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1">{t('sortBy')}</label>
             <select
               value={filters.sortBy || 'createdAt'}
               onChange={e => onFiltersChange({ sortBy: e.target.value })}
               className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
             >
-              <option value="createdAt">Created Date</option>
-              <option value="bookingNumber">Booking Number</option>
-              <option value="status">Status</option>
-              <option value="etd">ETD</option>
-              <option value="eta">ETA</option>
+              <option value="createdAt">{t('sortOptions.createdAt')}</option>
+              <option value="bookingNumber">{t('sortOptions.bookingNumber')}</option>
+              <option value="status">{t('sortOptions.status')}</option>
+              <option value="etd">{t('sortOptions.etd')}</option>
+              <option value="eta">{t('sortOptions.eta')}</option>
             </select>
           </div>
         </div>
       )}
 
       {/* Active filters count */}
-      {Object.keys(filters).length > 0 && (
+      {activeCount > 0 && (
         <div className="mt-4 text-sm text-gray-600">
-          {
-            Object.keys(filters).filter(key => {
-              const value = filters[key as keyof IBookingFilters];
-              return Array.isArray(value) ? value.length > 0 : Boolean(value);
-            }).length
-          }{' '}
-          active filter(s)
+          {t('activeCount', { count: activeCount })}
         </div>
       )}
     </div>
diff --git a/apps/frontend/src/components/bookings/BookingsTable.tsx b/apps/frontend/src/components/bookings/BookingsTable.tsx
index b47c296..9e4cbef 100644
--- a/apps/frontend/src/components/bookings/BookingsTable.tsx
+++ b/apps/frontend/src/components/bookings/BookingsTable.tsx
@@ -2,6 +2,8 @@
  * Advanced Bookings Table with TanStack Table and Virtual Scrolling
  */
 
+'use client';
+
 import React, { useMemo, useRef } from 'react';
 import {
   useReactTable,
@@ -12,8 +14,10 @@ import {
   SortingState,
 } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { useTranslations, useLocale } from 'next-intl';
 import { Booking, BookingStatus } from '@/types/booking';
 import { format } from 'date-fns';
+import { fr, enUS } from 'date-fns/locale';
 
 interface BookingsTableProps {
   bookings: Booking[];
@@ -30,6 +34,10 @@ export const BookingsTable: React.FC<BookingsTableProps> = ({
   onToggleAll,
   onRowClick,
 }) => {
+  const t = useTranslations('components.bookingsTable');
+  const locale = useLocale();
+  const dateFnsLocale = locale === 'fr' ? fr : enUS;
+  const dateFormat = locale === 'fr' ? 'dd MMM yyyy' : 'MMM dd, yyyy';
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const [sorting, setSorting] = React.useState<SortingState>([]);
 
@@ -37,7 +45,7 @@ export const BookingsTable: React.FC<BookingsTableProps> = ({
     () => [
       {
         id: 'select',
-        header: ({ table }) => (
+        header: () => (
           <input
             type="checkbox"
             checked={selectedBookings.size === bookings.length && bookings.length > 0}
@@ -58,7 +66,7 @@ export const BookingsTable: React.FC<BookingsTableProps> = ({
       },
       {
         accessorKey: 'bookingNumber',
-        header: 'Booking #',
+        header: t('headers.bookingNumber'),
         cell: info => (
           <span className="font-medium text-blue-600">{info.getValue() as string}</span>
         ),
@@ -66,7 +74,7 @@ export const BookingsTable: React.FC<BookingsTableProps> = ({
       },
       {
         accessorKey: 'status',
-        header: 'Status',
+        header: t('headers.status'),
         cell: info => {
           const status = info.getValue() as BookingStatus;
           return (
@@ -81,55 +89,55 @@ export const BookingsTable: React.FC<BookingsTableProps> = ({
       },
       {
         accessorKey: 'rateQuote.carrierName',
-        header: 'Carrier',
+        header: t('headers.carrier'),
         cell: info => info.getValue() as string,
         size: 150,
       },
       {
         accessorKey: 'rateQuote.origin',
-        header: 'Origin',
+        header: t('headers.origin'),
         cell: info => info.getValue() as string,
         size: 120,
       },
       {
         accessorKey: 'rateQuote.destination',
-        header: 'Destination',
+        header: t('headers.destination'),
         cell: info => info.getValue() as string,
         size: 120,
       },
       {
         accessorKey: 'shipper.name',
-        header: 'Shipper',
+        header: t('headers.shipper'),
         cell: info => info.getValue() as string,
         size: 150,
       },
       {
         accessorKey: 'consignee.name',
-        header: 'Consignee',
+        header: t('headers.consignee'),
         cell: info => info.getValue() as string,
         size: 150,
       },
       {
         accessorKey: 'rateQuote.etd',
-        header: 'ETD',
+        header: t('headers.etd'),
         cell: info => {
           const value = info.getValue();
-          return value ? format(new Date(value as string), 'MMM dd, yyyy') : '-';
+          return value ? format(new Date(value as string), dateFormat, { locale: dateFnsLocale }) : '-';
         },
         size: 120,
       },
       {
         accessorKey: 'rateQuote.eta',
-        header: 'ETA',
+        header: t('headers.eta'),
         cell: info => {
           const value = info.getValue();
-          return value ? format(new Date(value as string), 'MMM dd, yyyy') : '-';
+          return value ? format(new Date(value as string), dateFormat, { locale: dateFnsLocale }) : '-';
         },
         size: 120,
       },
       {
         accessorKey: 'containers',
-        header: 'Containers',
+        header: t('headers.containers'),
         cell: info => {
           const containers = info.getValue() as any[];
           return <span>{containers.length}</span>;
@@ -138,12 +146,12 @@ export const BookingsTable: React.FC<BookingsTableProps> = ({
       },
       {
         accessorKey: 'createdAt',
-        header: 'Created',
-        cell: info => format(new Date(info.getValue() as string), 'MMM dd, yyyy'),
+        header: t('headers.created'),
+        cell: info => format(new Date(info.getValue() as string), dateFormat, { locale: dateFnsLocale }),
         size: 120,
       },
     ],
-    [bookings.length, selectedBookings, onToggleAll, onToggleSelection]
+    [bookings.length, selectedBookings, onToggleAll, onToggleSelection, t, dateFnsLocale, dateFormat]
   );
 
   const table = useReactTable({
diff --git a/apps/frontend/src/components/bookings/BulkActions.tsx b/apps/frontend/src/components/bookings/BulkActions.tsx
index baeb245..88c4140 100644
--- a/apps/frontend/src/components/bookings/BulkActions.tsx
+++ b/apps/frontend/src/components/bookings/BulkActions.tsx
@@ -2,7 +2,10 @@
  * Bulk Actions Component for Bookings
  */
 
+'use client';
+
 import React, { useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { ExportFormat, ExportOptions } from '@/types/booking';
 
 interface BulkActionsProps {
@@ -16,6 +19,7 @@ export const BulkActions: React.FC<BulkActionsProps> = ({
   onExport,
   onClearSelection,
 }) => {
+  const t = useTranslations('components.bulkActions');
   const [showExportMenu, setShowExportMenu] = useState(false);
   const [exporting, setExporting] = useState(false);
 
@@ -25,7 +29,7 @@ export const BulkActions: React.FC<BulkActionsProps> = ({
       await onExport({ format });
       setShowExportMenu(false);
     } catch (error: any) {
-      alert(`Export failed: ${error.message}`);
+      alert(t('exportFailed', { message: error.message }));
     } finally {
       setExporting(false);
     }
@@ -38,13 +42,13 @@ export const BulkActions: React.FC<BulkActionsProps> = ({
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
           <span className="text-sm font-medium text-blue-900">
-            {selectedCount} booking{selectedCount !== 1 ? 's' : ''} selected
+            {t('selectedCount', { count: selectedCount })}
           </span>
           <button
             onClick={onClearSelection}
             className="text-sm text-blue-600 hover:text-blue-700 underline"
           >
-            Clear selection
+            {t('clearSelection')}
           </button>
         </div>
 
@@ -56,7 +60,7 @@ export const BulkActions: React.FC<BulkActionsProps> = ({
               disabled={exporting}
               className="px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
             >
-              {exporting ? 'Exporting...' : 'Export Selected'}
+              {exporting ? t('exporting') : t('exportSelected')}
             </button>
 
             {showExportMenu && !exporting && (
@@ -66,19 +70,19 @@ export const BulkActions: React.FC<BulkActionsProps> = ({
                     onClick={() => handleExport(ExportFormat.CSV)}
                     className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                   >
-                    Export as CSV
+                    {t('exportCsv')}
                   </button>
                   <button
                     onClick={() => handleExport(ExportFormat.EXCEL)}
                     className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                   >
-                    Export as Excel
+                    {t('exportExcel')}
                   </button>
                   <button
                     onClick={() => handleExport(ExportFormat.JSON)}
                     className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                   >
-                    Export as JSON
+                    {t('exportJson')}
                   </button>
                 </div>
               </div>
@@ -89,11 +93,10 @@ export const BulkActions: React.FC<BulkActionsProps> = ({
           <button
             className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
             onClick={() => {
-              // TODO: Implement bulk update modal
-              alert('Bulk update functionality coming soon!');
+              alert(t('bulkUpdateSoon'));
             }}
           >
-            Bulk Update
+            {t('bulkUpdate')}
           </button>
         </div>
       </div>
diff --git a/apps/frontend/src/components/layout/LandingFooter.tsx b/apps/frontend/src/components/layout/LandingFooter.tsx
index c4a038d..8a85cda 100644
--- a/apps/frontend/src/components/layout/LandingFooter.tsx
+++ b/apps/frontend/src/components/layout/LandingFooter.tsx
@@ -1,140 +1,141 @@
-'use client';
-
-import Link from 'next/link';
-import Image from 'next/image';
-import { MapPin, Globe } from 'lucide-react';
-
-export function LandingFooter() {
-  return (
-    <footer className="bg-brand-navy text-white py-16">
-      <div className="max-w-7xl mx-auto px-6 lg:px-8">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-12">
-          {/* Company Info */}
-          <div className="lg:col-span-2">
-            <Image
-              src="/assets/logos/logo-white.png"
-              alt="Xpeditis"
-              width={160}
-              height={55}
-              className="h-auto mb-6"
-            />
-            <p className="text-white/70 text-sm mb-6 leading-relaxed">
-              Xpeditis est la plateforme B2B leader pour le fret maritime en Europe. Nous
-              connectons les transitaires avec les plus grandes compagnies maritimes mondiales.
-            </p>
-            <div className="flex space-x-4">
-              <a
-                href="#"
-                className="w-10 h-10 bg-white/10 hover:bg-brand-turquoise rounded-full flex items-center justify-center transition-colors"
-              >
-                <span className="sr-only">LinkedIn</span>
-                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
-                </svg>
-              </a>
-              <a
-                href="#"
-                className="w-10 h-10 bg-white/10 hover:bg-brand-turquoise rounded-full flex items-center justify-center transition-colors"
-              >
-                <span className="sr-only">Twitter</span>
-                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
-                </svg>
-              </a>
-            </div>
-          </div>
-
-          {/* Products */}
-          <div>
-            <h4 className="font-bold text-lg mb-4 text-white">Produits</h4>
-            <ul className="space-y-3 text-white/70 text-sm">
-              <li>
-                <Link href="/#features" className="hover:text-brand-turquoise transition-colors">
-                  Fonctionnalités
-                </Link>
-              </li>
-              <li>
-                <Link href="/#tools" className="hover:text-brand-turquoise transition-colors">
-                  Outils & Calculateurs
-                </Link>
-              </li>
-              <li>
-                <Link href="/#pricing" className="hover:text-brand-turquoise transition-colors">
-                  Tarifs
-                </Link>
-              </li>
-            </ul>
-          </div>
-
-          {/* Company */}
-          <div>
-            <h4 className="font-bold text-lg mb-4 text-white">Entreprise</h4>
-            <ul className="space-y-3 text-white/70 text-sm">
-              <li>
-                <Link href="/about" className="hover:text-brand-turquoise transition-colors">
-                  À propos
-                </Link>
-              </li>
-              <li>
-                <Link href="/contact" className="hover:text-brand-turquoise transition-colors">
-                  Contact
-                </Link>
-              </li>
-              <li>
-                <Link href="/blog" className="hover:text-brand-turquoise transition-colors">
-                  Blog
-                </Link>
-              </li>
-            </ul>
-          </div>
-
-          {/* Legal */}
-          <div>
-            <h4 className="font-bold text-lg mb-4 text-white">Légal</h4>
-            <ul className="space-y-3 text-white/70 text-sm">
-              <li>
-                <Link href="/privacy" className="hover:text-brand-turquoise transition-colors">
-                  Politique de confidentialité
-                </Link>
-              </li>
-              <li>
-                <Link href="/terms" className="hover:text-brand-turquoise transition-colors">
-                  Conditions générales
-                </Link>
-              </li>
-              <li>
-                <Link href="/cookies" className="hover:text-brand-turquoise transition-colors">
-                  Politique de cookies
-                </Link>
-              </li>
-              <li>
-                <Link href="/compliance" className="hover:text-brand-turquoise transition-colors">
-                  Conformité RGPD
-                </Link>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        {/* Bottom Footer */}
-        <div className="border-t border-white/10 pt-8">
-          <div className="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
-            <div className="text-white/50 text-sm">
-              © 2025 Xpeditis SAS. Tous droits réservés.
-            </div>
-            <div className="flex items-center space-x-6 text-sm text-white/50">
-              <span className="flex items-center space-x-2">
-                <MapPin className="w-4 h-4" />
-                <span>Paris, France</span>
-              </span>
-              <span className="flex items-center space-x-2">
-                <Globe className="w-4 h-4" />
-                <span>50+ Pays</span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}
+'use client';
+
+import { Link } from '@/i18n/navigation';
+import Image from 'next/image';
+import { MapPin, Globe } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+export function LandingFooter() {
+  const t = useTranslations('footer');
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="bg-brand-navy text-white py-16">
+      <div className="max-w-7xl mx-auto px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-12">
+          {/* Company Info */}
+          <div className="lg:col-span-2">
+            <Image
+              src="/assets/logos/logo-white.png"
+              alt="Xpeditis"
+              width={160}
+              height={55}
+              className="h-auto mb-6"
+            />
+            <p className="text-white/70 text-sm mb-6 leading-relaxed">{t('tagline')}</p>
+            <div className="flex space-x-4">
+              <a
+                href="#"
+                className="w-10 h-10 bg-white/10 hover:bg-brand-turquoise rounded-full flex items-center justify-center transition-colors"
+              >
+                <span className="sr-only">{t('social.linkedin')}</span>
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
+                </svg>
+              </a>
+              <a
+                href="#"
+                className="w-10 h-10 bg-white/10 hover:bg-brand-turquoise rounded-full flex items-center justify-center transition-colors"
+              >
+                <span className="sr-only">{t('social.twitter')}</span>
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          {/* Products */}
+          <div>
+            <h4 className="font-bold text-lg mb-4 text-white">{t('products.title')}</h4>
+            <ul className="space-y-3 text-white/70 text-sm">
+              <li>
+                <Link href="/#features" className="hover:text-brand-turquoise transition-colors">
+                  {t('products.features')}
+                </Link>
+              </li>
+              <li>
+                <Link href="/#tools" className="hover:text-brand-turquoise transition-colors">
+                  {t('products.tools')}
+                </Link>
+              </li>
+              <li>
+                <Link href="/#pricing" className="hover:text-brand-turquoise transition-colors">
+                  {t('products.pricing')}
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Company */}
+          <div>
+            <h4 className="font-bold text-lg mb-4 text-white">{t('company.title')}</h4>
+            <ul className="space-y-3 text-white/70 text-sm">
+              <li>
+                <Link href="/about" className="hover:text-brand-turquoise transition-colors">
+                  {t('company.about')}
+                </Link>
+              </li>
+              <li>
+                <Link href="/contact" className="hover:text-brand-turquoise transition-colors">
+                  {t('company.contact')}
+                </Link>
+              </li>
+              <li>
+                <Link href="/blog" className="hover:text-brand-turquoise transition-colors">
+                  {t('company.blog')}
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Legal */}
+          <div>
+            <h4 className="font-bold text-lg mb-4 text-white">{t('legal.title')}</h4>
+            <ul className="space-y-3 text-white/70 text-sm">
+              <li>
+                <Link href="/privacy" className="hover:text-brand-turquoise transition-colors">
+                  {t('legal.privacy')}
+                </Link>
+              </li>
+              <li>
+                <Link href="/terms" className="hover:text-brand-turquoise transition-colors">
+                  {t('legal.terms')}
+                </Link>
+              </li>
+              <li>
+                <Link href="/cookies" className="hover:text-brand-turquoise transition-colors">
+                  {t('legal.cookies')}
+                </Link>
+              </li>
+              <li>
+                <Link href="/compliance" className="hover:text-brand-turquoise transition-colors">
+                  {t('legal.compliance')}
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom Footer */}
+        <div className="border-t border-white/10 pt-8">
+          <div className="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
+            <div className="text-white/50 text-sm">
+              {t('copyright', { year: currentYear })}
+            </div>
+            <div className="flex items-center space-x-6 text-sm text-white/50">
+              <span className="flex items-center space-x-2">
+                <MapPin className="w-4 h-4" />
+                <span>{t('location')}</span>
+              </span>
+              <span className="flex items-center space-x-2">
+                <Globe className="w-4 h-4" />
+                <span>{t('countries')}</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/apps/frontend/src/components/layout/LandingHeader.tsx b/apps/frontend/src/components/layout/LandingHeader.tsx
index 4e9ca88..b6c8fe3 100644
--- a/apps/frontend/src/components/layout/LandingHeader.tsx
+++ b/apps/frontend/src/components/layout/LandingHeader.tsx
@@ -1,384 +1,396 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import Link from 'next/link';
-import Image from 'next/image';
-import { motion, AnimatePresence } from 'framer-motion';
-import {
-  ChevronDown,
-  Info,
-  BookOpen,
-  LayoutDashboard,
-  Code2,
-  Menu,
-  X,
-} from 'lucide-react';
-import { useAuth } from '@/lib/context/auth-context';
-import { usePathname } from 'next/navigation';
-
-interface LandingHeaderProps {
-  transparentOnTop?: boolean;
-  activePage?: 'about' | 'contact' | 'careers' | 'blog' | 'press' | 'docs';
-}
-
-export function LandingHeader({ transparentOnTop = false, activePage }: LandingHeaderProps) {
-  const [isScrolled, setIsScrolled] = useState(false);
-  const [isCompanyMenuOpen, setIsCompanyMenuOpen] = useState(false);
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const { user, isAuthenticated, loading } = useAuth();
-  const pathname = usePathname();
-
-  // Close mobile menu on route change
-  useEffect(() => {
-    setIsMobileMenuOpen(false);
-  }, [pathname]);
-
-  const companyMenuItems = [
-    { href: '/about', label: 'À propos', icon: Info, description: 'Notre histoire et mission' },
-    { href: '/blog', label: 'Blog', icon: BookOpen, description: 'Actualités et insights' },
-  ];
-
-  // "Entreprise" dropdown is active only for its own sub-pages (not contact)
-  const isCompanyMenuActive =
-    activePage !== undefined && ['about', 'blog'].includes(activePage);
-
-  const getUserInitials = () => {
-    if (!user) return '';
-    const firstInitial = user.firstName?.charAt(0)?.toUpperCase() || '';
-    const lastInitial = user.lastName?.charAt(0)?.toUpperCase() || '';
-    return firstInitial + lastInitial || user.email?.charAt(0)?.toUpperCase() || '?';
-  };
-
-  const getFullName = () => {
-    if (!user) return '';
-    if (user.firstName && user.lastName) {
-      return `${user.firstName} ${user.lastName}`;
-    }
-    return user.email || '';
-  };
-
-  useEffect(() => {
-    if (!transparentOnTop) {
-      setIsScrolled(true);
-      return;
-    }
-
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 50);
-    };
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [transparentOnTop]);
-
-  const isActiveLink = (href: string) => {
-    if (!activePage) return false;
-    return href === `/${activePage}`;
-  };
-
-  return (
-    <>
-    <motion.nav
-      initial={{ y: -100 }}
-      animate={{ y: 0 }}
-      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
-        isScrolled ? 'bg-brand-navy/95 backdrop-blur-md shadow-lg' : 'bg-transparent'
-      }`}
-    >
-      <div className="max-w-7xl mx-auto px-4 lg:px-8">
-        <div className="flex items-center justify-between h-16 md:h-20">
-          <Link href="/" className="flex items-center space-x-2">
-            <Image
-              src="/assets/logos/logo-white.png"
-              alt="Xpeditis"
-              width={60}
-              height={70}
-              priority
-              className="h-auto"
-            />
-          </Link>
-
-          {/* Mobile hamburger button */}
-          <button
-            className="md:hidden p-2 text-white hover:text-brand-turquoise transition-colors"
-            onClick={() => setIsMobileMenuOpen(true)}
-            aria-label="Ouvrir le menu"
-          >
-            <Menu className="w-6 h-6" />
-          </button>
-
-          <div className="hidden md:flex items-center space-x-8">
-            <Link
-              href="/#features"
-              className="text-white hover:text-brand-turquoise transition-colors font-medium"
-            >
-              Fonctionnalités
-            </Link>
-            <Link
-              href="/#pricing"
-              className="text-white hover:text-brand-turquoise transition-colors font-medium"
-            >
-              Tarifs
-            </Link>
-
-            {/* Menu Entreprise */}
-            <div
-              className="relative"
-              onMouseEnter={() => setIsCompanyMenuOpen(true)}
-              onMouseLeave={() => setIsCompanyMenuOpen(false)}
-            >
-              <button
-                className={`flex items-center space-x-1 transition-colors font-medium ${
-                  isCompanyMenuActive ? 'text-brand-turquoise' : 'text-white hover:text-brand-turquoise'
-                }`}
-              >
-                <span>Entreprise</span>
-                <ChevronDown
-                  className={`w-4 h-4 transition-transform ${isCompanyMenuOpen ? 'rotate-180' : ''}`}
-                />
-              </button>
-
-              <AnimatePresence>
-                {isCompanyMenuOpen && (
-                  <motion.div
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: 10 }}
-                    transition={{ duration: 0.2 }}
-                    className="absolute top-full left-1/2 -translate-x-1/2 pt-4 z-50"
-                  >
-                    <div className="bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden min-w-[280px]">
-                      <div className="p-2">
-                        {companyMenuItems.map((item) => {
-                          const IconComponent = item.icon;
-                          const isActive = isActiveLink(item.href);
-                          return (
-                            <Link
-                              key={item.href}
-                              href={item.href}
-                              className={`flex items-center space-x-3 px-4 py-3 rounded-xl transition-colors group ${
-                                isActive ? 'bg-brand-turquoise/10' : 'hover:bg-gray-50'
-                              }`}
-                            >
-                              <div className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
-                                isActive
-                                  ? 'bg-brand-turquoise/20'
-                                  : 'bg-brand-turquoise/10 group-hover:bg-brand-turquoise/20'
-                              }`}>
-                                <IconComponent className="w-5 h-5 text-brand-turquoise" />
-                              </div>
-                              <div>
-                                <div className={`font-medium transition-colors ${
-                                  isActive
-                                    ? 'text-brand-turquoise'
-                                    : 'text-brand-navy group-hover:text-brand-turquoise'
-                                }`}>
-                                  {item.label}
-                                </div>
-                                <div className="text-sm text-gray-500">
-                                  {item.description}
-                                </div>
-                              </div>
-                            </Link>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-
-            <Link
-              href="/contact"
-              className={`transition-colors font-medium ${
-                activePage === 'contact'
-                  ? 'text-brand-turquoise'
-                  : 'text-white hover:text-brand-turquoise'
-              }`}
-            >
-              Contact
-            </Link>
-
-            <Link
-              href="/docs/api"
-              className={`flex items-center gap-1.5 transition-colors font-medium ${
-                activePage === 'docs'
-                  ? 'text-brand-turquoise'
-                  : 'text-white hover:text-brand-turquoise'
-              }`}
-            >
-              <Code2 className="w-4 h-4" />
-              Docs API
-            </Link>
-
-            {/* Affichage conditionnel: connecté vs non connecté */}
-            {loading ? (
-              <div className="w-8 h-8 rounded-full bg-white/20 animate-pulse" />
-            ) : isAuthenticated && user ? (
-              <Link
-                href="/dashboard"
-                className="flex items-center space-x-3 group"
-              >
-                <div className="w-10 h-10 rounded-full bg-brand-turquoise flex items-center justify-center text-white font-semibold text-sm border-2 border-white/30 group-hover:border-white transition-colors">
-                  {getUserInitials()}
-                </div>
-                <span className="text-white font-medium group-hover:text-brand-turquoise transition-colors max-w-[150px] truncate">
-                  {getFullName()}
-                </span>
-                <LayoutDashboard className="w-5 h-5 text-white/70 group-hover:text-brand-turquoise transition-colors" />
-              </Link>
-            ) : (
-              <>
-                <Link
-                  href="/login"
-                  className="text-white hover:text-brand-turquoise transition-colors font-medium"
-                >
-                  Connexion
-                </Link>
-                <Link
-                  href="/register"
-                  className="px-6 py-2.5 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-lg font-medium"
-                >
-                  Commencer Gratuitement
-                </Link>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    </motion.nav>
-
-      {/* Mobile menu drawer */}
-      <AnimatePresence>
-        {isMobileMenuOpen && (
-          <>
-            {/* Backdrop */}
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              className="fixed inset-0 z-50 bg-black/60 md:hidden"
-              onClick={() => setIsMobileMenuOpen(false)}
-            />
-            {/* Drawer */}
-            <motion.div
-              initial={{ x: '100%' }}
-              animate={{ x: 0 }}
-              exit={{ x: '100%' }}
-              transition={{ type: 'tween', duration: 0.25 }}
-              className="fixed top-0 right-0 bottom-0 z-50 w-[280px] bg-brand-navy flex flex-col md:hidden shadow-2xl"
-            >
-              {/* Drawer header */}
-              <div className="flex items-center justify-between px-5 h-16 border-b border-white/10">
-                <Image
-                  src="/assets/logos/logo-white.png"
-                  alt="Xpeditis"
-                  width={50}
-                  height={60}
-                  className="h-auto"
-                />
-                <button
-                  onClick={() => setIsMobileMenuOpen(false)}
-                  className="p-2 text-white/70 hover:text-white transition-colors"
-                  aria-label="Fermer le menu"
-                >
-                  <X className="w-5 h-5" />
-                </button>
-              </div>
-
-              {/* Nav links */}
-              <nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
-                <Link
-                  href="/#features"
-                  className="flex items-center px-4 py-3 text-white/80 hover:text-white hover:bg-white/10 rounded-xl transition-colors font-medium"
-                >
-                  Fonctionnalités
-                </Link>
-                <Link
-                  href="/#pricing"
-                  className="flex items-center px-4 py-3 text-white/80 hover:text-white hover:bg-white/10 rounded-xl transition-colors font-medium"
-                >
-                  Tarifs
-                </Link>
-
-                {/* Company submenu items (flat on mobile) */}
-                <div className="pt-2 pb-1 px-4 text-xs text-white/40 uppercase tracking-widest font-medium">
-                  Entreprise
-                </div>
-                {companyMenuItems.map((item) => {
-                  const IconComponent = item.icon;
-                  return (
-                    <Link
-                      key={item.href}
-                      href={item.href}
-                      className="flex items-center space-x-3 px-4 py-3 text-white/80 hover:text-white hover:bg-white/10 rounded-xl transition-colors"
-                    >
-                      <IconComponent className="w-4 h-4 text-brand-turquoise" />
-                      <span className="font-medium">{item.label}</span>
-                    </Link>
-                  );
-                })}
-
-                <Link
-                  href="/contact"
-                  className={`flex items-center px-4 py-3 rounded-xl transition-colors font-medium ${
-                    activePage === 'contact'
-                      ? 'text-brand-turquoise bg-white/10'
-                      : 'text-white/80 hover:text-white hover:bg-white/10'
-                  }`}
-                >
-                  Contact
-                </Link>
-
-                <Link
-                  href="/docs/api"
-                  className={`flex items-center space-x-2 px-4 py-3 rounded-xl transition-colors font-medium ${
-                    activePage === 'docs'
-                      ? 'text-brand-turquoise bg-white/10'
-                      : 'text-white/80 hover:text-white hover:bg-white/10'
-                  }`}
-                >
-                  <Code2 className="w-4 h-4" />
-                  <span>Docs API</span>
-                </Link>
-              </nav>
-
-              {/* Auth section */}
-              <div className="border-t border-white/10 p-4 space-y-3">
-                {loading ? (
-                  <div className="h-10 rounded-xl bg-white/10 animate-pulse" />
-                ) : isAuthenticated && user ? (
-                  <Link
-                    href="/dashboard"
-                    className="flex items-center space-x-3 px-4 py-3 bg-brand-turquoise rounded-xl text-white font-medium"
-                  >
-                    <div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center text-sm font-semibold flex-shrink-0">
-                      {getUserInitials()}
-                    </div>
-                    <span className="flex-1 truncate">{getFullName()}</span>
-                    <LayoutDashboard className="w-4 h-4 flex-shrink-0" />
-                  </Link>
-                ) : (
-                  <>
-                    <Link
-                      href="/login"
-                      className="flex items-center justify-center w-full px-4 py-3 border border-white/30 text-white rounded-xl hover:bg-white/10 transition-colors font-medium"
-                    >
-                      Connexion
-                    </Link>
-                    <Link
-                      href="/register"
-                      className="flex items-center justify-center w-full px-4 py-3 bg-brand-turquoise text-white rounded-xl hover:bg-brand-turquoise/90 transition-colors font-medium"
-                    >
-                      Commencer Gratuitement
-                    </Link>
-                  </>
-                )}
-              </div>
-            </motion.div>
-          </>
-        )}
-      </AnimatePresence>
-    </>
-  );
-}
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Link } from '@/i18n/navigation';
+import Image from 'next/image';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  ChevronDown,
+  Info,
+  BookOpen,
+  LayoutDashboard,
+  Code2,
+  Menu,
+  X,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useAuth } from '@/lib/context/auth-context';
+import { usePathname } from '@/i18n/navigation';
+import { LanguageSwitcher } from '@/components/LanguageSwitcher';
+
+interface LandingHeaderProps {
+  transparentOnTop?: boolean;
+  activePage?: 'about' | 'contact' | 'careers' | 'blog' | 'press' | 'docs';
+}
+
+export function LandingHeader({ transparentOnTop = false, activePage }: LandingHeaderProps) {
+  const t = useTranslations();
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [isCompanyMenuOpen, setIsCompanyMenuOpen] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const { user, isAuthenticated, loading } = useAuth();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setIsMobileMenuOpen(false);
+  }, [pathname]);
+
+  const companyMenuItems = [
+    {
+      href: '/about',
+      label: t('navigation.about'),
+      icon: Info,
+      description: t('header.company.aboutDescription'),
+    },
+    {
+      href: '/blog',
+      label: t('navigation.blog'),
+      icon: BookOpen,
+      description: t('header.company.blogDescription'),
+    },
+  ];
+
+  const isCompanyMenuActive =
+    activePage !== undefined && ['about', 'blog'].includes(activePage);
+
+  const getUserInitials = () => {
+    if (!user) return '';
+    const firstInitial = user.firstName?.charAt(0)?.toUpperCase() || '';
+    const lastInitial = user.lastName?.charAt(0)?.toUpperCase() || '';
+    return firstInitial + lastInitial || user.email?.charAt(0)?.toUpperCase() || '?';
+  };
+
+  const getFullName = () => {
+    if (!user) return '';
+    if (user.firstName && user.lastName) {
+      return `${user.firstName} ${user.lastName}`;
+    }
+    return user.email || '';
+  };
+
+  useEffect(() => {
+    if (!transparentOnTop) {
+      setIsScrolled(true);
+      return;
+    }
+
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 50);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [transparentOnTop]);
+
+  const isActiveLink = (href: string) => {
+    if (!activePage) return false;
+    return href === `/${activePage}`;
+  };
+
+  return (
+    <>
+    <motion.nav
+      initial={{ y: -100 }}
+      animate={{ y: 0 }}
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        isScrolled ? 'bg-brand-navy/95 backdrop-blur-md shadow-lg' : 'bg-transparent'
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 lg:px-8">
+        <div className="flex items-center justify-between h-16 md:h-20">
+          <Link href="/" className="flex items-center space-x-2">
+            <Image
+              src="/assets/logos/logo-white.png"
+              alt="Xpeditis"
+              width={60}
+              height={70}
+              priority
+              className="h-auto"
+            />
+          </Link>
+
+          {/* Mobile hamburger button */}
+          <button
+            className="md:hidden p-2 text-white hover:text-brand-turquoise transition-colors"
+            onClick={() => setIsMobileMenuOpen(true)}
+            aria-label={t('header.mobileMenu.open')}
+          >
+            <Menu className="w-6 h-6" />
+          </button>
+
+          <div className="hidden md:flex items-center space-x-8">
+            <Link
+              href="/#features"
+              className="text-white hover:text-brand-turquoise transition-colors font-medium"
+            >
+              {t('navigation.features')}
+            </Link>
+            <Link
+              href="/#pricing"
+              className="text-white hover:text-brand-turquoise transition-colors font-medium"
+            >
+              {t('navigation.pricing')}
+            </Link>
+
+            {/* Menu Entreprise */}
+            <div
+              className="relative"
+              onMouseEnter={() => setIsCompanyMenuOpen(true)}
+              onMouseLeave={() => setIsCompanyMenuOpen(false)}
+            >
+              <button
+                className={`flex items-center space-x-1 transition-colors font-medium ${
+                  isCompanyMenuActive ? 'text-brand-turquoise' : 'text-white hover:text-brand-turquoise'
+                }`}
+              >
+                <span>{t('navigation.company')}</span>
+                <ChevronDown
+                  className={`w-4 h-4 transition-transform ${isCompanyMenuOpen ? 'rotate-180' : ''}`}
+                />
+              </button>
+
+              <AnimatePresence>
+                {isCompanyMenuOpen && (
+                  <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: 10 }}
+                    transition={{ duration: 0.2 }}
+                    className="absolute top-full left-1/2 -translate-x-1/2 pt-4 z-50"
+                  >
+                    <div className="bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden min-w-[280px]">
+                      <div className="p-2">
+                        {companyMenuItems.map((item) => {
+                          const IconComponent = item.icon;
+                          const isActive = isActiveLink(item.href);
+                          return (
+                            <Link
+                              key={item.href}
+                              href={item.href}
+                              className={`flex items-center space-x-3 px-4 py-3 rounded-xl transition-colors group ${
+                                isActive ? 'bg-brand-turquoise/10' : 'hover:bg-gray-50'
+                              }`}
+                            >
+                              <div className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
+                                isActive
+                                  ? 'bg-brand-turquoise/20'
+                                  : 'bg-brand-turquoise/10 group-hover:bg-brand-turquoise/20'
+                              }`}>
+                                <IconComponent className="w-5 h-5 text-brand-turquoise" />
+                              </div>
+                              <div>
+                                <div className={`font-medium transition-colors ${
+                                  isActive
+                                    ? 'text-brand-turquoise'
+                                    : 'text-brand-navy group-hover:text-brand-turquoise'
+                                }`}>
+                                  {item.label}
+                                </div>
+                                <div className="text-sm text-gray-500">
+                                  {item.description}
+                                </div>
+                              </div>
+                            </Link>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+
+            <Link
+              href="/contact"
+              className={`transition-colors font-medium ${
+                activePage === 'contact'
+                  ? 'text-brand-turquoise'
+                  : 'text-white hover:text-brand-turquoise'
+              }`}
+            >
+              {t('navigation.contact')}
+            </Link>
+
+            <Link
+              href="/docs/api"
+              className={`flex items-center gap-1.5 transition-colors font-medium ${
+                activePage === 'docs'
+                  ? 'text-brand-turquoise'
+                  : 'text-white hover:text-brand-turquoise'
+              }`}
+            >
+              <Code2 className="w-4 h-4" />
+              {t('navigation.docsApi')}
+            </Link>
+
+            {/* Language switcher */}
+            <LanguageSwitcher variant="dark" />
+
+            {/* Affichage conditionnel: connecté vs non connecté */}
+            {loading ? (
+              <div className="w-8 h-8 rounded-full bg-white/20 animate-pulse" />
+            ) : isAuthenticated && user ? (
+              <Link
+                href="/dashboard"
+                className="flex items-center space-x-3 group"
+              >
+                <div className="w-10 h-10 rounded-full bg-brand-turquoise flex items-center justify-center text-white font-semibold text-sm border-2 border-white/30 group-hover:border-white transition-colors">
+                  {getUserInitials()}
+                </div>
+                <span className="text-white font-medium group-hover:text-brand-turquoise transition-colors max-w-[150px] truncate">
+                  {getFullName()}
+                </span>
+                <LayoutDashboard className="w-5 h-5 text-white/70 group-hover:text-brand-turquoise transition-colors" />
+              </Link>
+            ) : (
+              <>
+                <Link
+                  href="/login"
+                  className="text-white hover:text-brand-turquoise transition-colors font-medium"
+                >
+                  {t('header.cta.signIn')}
+                </Link>
+                <Link
+                  href="/register"
+                  className="px-6 py-2.5 bg-brand-turquoise text-white rounded-lg hover:bg-brand-turquoise/90 transition-all hover:shadow-lg font-medium"
+                >
+                  {t('header.cta.startFree')}
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </motion.nav>
+
+      {/* Mobile menu drawer */}
+      <AnimatePresence>
+        {isMobileMenuOpen && (
+          <>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="fixed inset-0 z-50 bg-black/60 md:hidden"
+              onClick={() => setIsMobileMenuOpen(false)}
+            />
+            <motion.div
+              initial={{ x: '100%' }}
+              animate={{ x: 0 }}
+              exit={{ x: '100%' }}
+              transition={{ type: 'tween', duration: 0.25 }}
+              className="fixed top-0 right-0 bottom-0 z-50 w-[280px] bg-brand-navy flex flex-col md:hidden shadow-2xl"
+            >
+              <div className="flex items-center justify-between px-5 h-16 border-b border-white/10">
+                <Image
+                  src="/assets/logos/logo-white.png"
+                  alt="Xpeditis"
+                  width={50}
+                  height={60}
+                  className="h-auto"
+                />
+                <button
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="p-2 text-white/70 hover:text-white transition-colors"
+                  aria-label={t('header.mobileMenu.close')}
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+
+              <nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
+                <Link
+                  href="/#features"
+                  className="flex items-center px-4 py-3 text-white/80 hover:text-white hover:bg-white/10 rounded-xl transition-colors font-medium"
+                >
+                  {t('navigation.features')}
+                </Link>
+                <Link
+                  href="/#pricing"
+                  className="flex items-center px-4 py-3 text-white/80 hover:text-white hover:bg-white/10 rounded-xl transition-colors font-medium"
+                >
+                  {t('navigation.pricing')}
+                </Link>
+
+                <div className="pt-2 pb-1 px-4 text-xs text-white/40 uppercase tracking-widest font-medium">
+                  {t('navigation.company')}
+                </div>
+                {companyMenuItems.map((item) => {
+                  const IconComponent = item.icon;
+                  return (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      className="flex items-center space-x-3 px-4 py-3 text-white/80 hover:text-white hover:bg-white/10 rounded-xl transition-colors"
+                    >
+                      <IconComponent className="w-4 h-4 text-brand-turquoise" />
+                      <span className="font-medium">{item.label}</span>
+                    </Link>
+                  );
+                })}
+
+                <Link
+                  href="/contact"
+                  className={`flex items-center px-4 py-3 rounded-xl transition-colors font-medium ${
+                    activePage === 'contact'
+                      ? 'text-brand-turquoise bg-white/10'
+                      : 'text-white/80 hover:text-white hover:bg-white/10'
+                  }`}
+                >
+                  {t('navigation.contact')}
+                </Link>
+
+                <Link
+                  href="/docs/api"
+                  className={`flex items-center space-x-2 px-4 py-3 rounded-xl transition-colors font-medium ${
+                    activePage === 'docs'
+                      ? 'text-brand-turquoise bg-white/10'
+                      : 'text-white/80 hover:text-white hover:bg-white/10'
+                  }`}
+                >
+                  <Code2 className="w-4 h-4" />
+                  <span>{t('navigation.docsApi')}</span>
+                </Link>
+
+                <div className="pt-4 px-4">
+                  <LanguageSwitcher variant="dark" />
+                </div>
+              </nav>
+
+              <div className="border-t border-white/10 p-4 space-y-3">
+                {loading ? (
+                  <div className="h-10 rounded-xl bg-white/10 animate-pulse" />
+                ) : isAuthenticated && user ? (
+                  <Link
+                    href="/dashboard"
+                    className="flex items-center space-x-3 px-4 py-3 bg-brand-turquoise rounded-xl text-white font-medium"
+                  >
+                    <div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center text-sm font-semibold flex-shrink-0">
+                      {getUserInitials()}
+                    </div>
+                    <span className="flex-1 truncate">{getFullName()}</span>
+                    <LayoutDashboard className="w-4 h-4 flex-shrink-0" />
+                  </Link>
+                ) : (
+                  <>
+                    <Link
+                      href="/login"
+                      className="flex items-center justify-center w-full px-4 py-3 border border-white/30 text-white rounded-xl hover:bg-white/10 transition-colors font-medium"
+                    >
+                      {t('header.cta.signIn')}
+                    </Link>
+                    <Link
+                      href="/register"
+                      className="flex items-center justify-center w-full px-4 py-3 bg-brand-turquoise text-white rounded-xl hover:bg-brand-turquoise/90 transition-colors font-medium"
+                    >
+                      {t('header.cta.startFree')}
+                    </Link>
+                  </>
+                )}
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}
diff --git a/apps/frontend/src/components/organization/SubscriptionTab.tsx b/apps/frontend/src/components/organization/SubscriptionTab.tsx
index 10df2a8..8508317 100644
--- a/apps/frontend/src/components/organization/SubscriptionTab.tsx
+++ b/apps/frontend/src/components/organization/SubscriptionTab.tsx
@@ -1,14 +1,9 @@
-/**
- * Subscription Tab Component
- *
- * Manages subscription plan, billing, and upgrade flows
- */
-
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslations, useLocale } from 'next-intl';
 import {
   getSubscriptionOverview,
   getAllPlans,
@@ -23,6 +18,8 @@ import {
 } from '@/lib/api/subscriptions';
 
 export default function SubscriptionTab() {
+  const t = useTranslations('dashboard.subscription');
+  const locale = useLocale();
   const searchParams = useSearchParams();
   const router = useRouter();
   const queryClient = useQueryClient();
@@ -35,7 +32,6 @@ export default function SubscriptionTab() {
   const { data: subscription, isLoading: loadingSubscription, refetch: refetchSubscription } = useQuery({
     queryKey: ['subscription'],
     queryFn: getSubscriptionOverview,
-    // Refetch more frequently when we're waiting for webhook
     refetchInterval: isRefreshing ? 2000 : false,
   });
 
@@ -44,50 +40,39 @@ export default function SubscriptionTab() {
     queryFn: getAllPlans,
   });
 
-  // Handle success/cancel from Stripe redirect
   const handleStripeRedirect = useCallback(async () => {
     const isSuccess = searchParams.get('success') === 'true';
     const isCanceled = searchParams.get('canceled') === 'true';
     const sessionId = searchParams.get('session_id') || undefined;
 
     if (isSuccess) {
-      setSuccess('Votre abonnement a été mis à jour avec succès !');
+      setSuccess(t('successMessage'));
       setIsRefreshing(true);
 
       try {
-        // Sync from Stripe using the session ID (works even without webhooks)
-        // The session ID allows us to retrieve the subscription from the checkout session
         console.log('Syncing subscription with sessionId:', sessionId);
         await syncSubscriptionFromStripe(sessionId);
-
-        // Then invalidate and refetch to get fresh data
         await queryClient.invalidateQueries({ queryKey: ['subscription'] });
         await queryClient.invalidateQueries({ queryKey: ['canInvite'] });
         await refetchSubscription();
-
-        // Wait a bit and refetch again to ensure data is up to date
         await new Promise(resolve => setTimeout(resolve, 1500));
         await syncSubscriptionFromStripe(sessionId);
         await queryClient.invalidateQueries({ queryKey: ['subscription'] });
         await refetchSubscription();
       } catch (err) {
         console.error('Error syncing subscription:', err);
-        // Fallback: just refetch
         await refetchSubscription();
       }
 
       setIsRefreshing(false);
-
-      // Clear the URL params after processing
       router.replace('/dashboard/settings/organization', { scroll: false });
-
       setTimeout(() => setSuccess(''), 5000);
     } else if (isCanceled) {
-      setError('Le paiement a été annulé. Votre abonnement n\'a pas été modifié.');
+      setError(t('canceledMessage'));
       router.replace('/dashboard/settings/organization', { scroll: false });
       setTimeout(() => setError(''), 5000);
     }
-  }, [searchParams, queryClient, refetchSubscription, router]);
+  }, [searchParams, queryClient, refetchSubscription, router, t]);
 
   useEffect(() => {
     handleStripeRedirect();
@@ -100,7 +85,7 @@ export default function SubscriptionTab() {
       window.location.href = data.sessionUrl;
     },
     onError: (err: Error) => {
-      setError(err.message || 'Erreur lors de la création de la session de paiement');
+      setError(err.message || t('checkoutError'));
       setTimeout(() => setError(''), 5000);
     },
   });
@@ -111,7 +96,7 @@ export default function SubscriptionTab() {
       window.location.href = data.sessionUrl;
     },
     onError: (err: Error) => {
-      setError(err.message || 'Erreur lors de l\'ouverture du portail de facturation');
+      setError(err.message || t('portalError'));
       setTimeout(() => setError(''), 5000);
     },
   });
@@ -129,15 +114,12 @@ export default function SubscriptionTab() {
   const handleRefresh = async () => {
     setIsRefreshing(true);
     try {
-      // Sync from Stripe first
       await syncSubscriptionFromStripe();
-      // Then invalidate and refetch
       await queryClient.invalidateQueries({ queryKey: ['subscription'] });
       await queryClient.invalidateQueries({ queryKey: ['canInvite'] });
       await refetchSubscription();
     } catch (err) {
       console.error('Error syncing subscription:', err);
-      // Fallback: just refetch
       await refetchSubscription();
     }
     setIsRefreshing(false);
@@ -190,7 +172,7 @@ export default function SubscriptionTab() {
                 <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                 <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
               </svg>
-              Mise à jour...
+              {t('updatingMessage')}
             </span>
           )}
         </div>
@@ -200,7 +182,7 @@ export default function SubscriptionTab() {
       {subscription && (
         <div className="bg-gray-50 rounded-lg p-6">
           <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-medium text-gray-900">Plan actuel</h3>
+            <h3 className="text-lg font-medium text-gray-900">{t('currentPlan')}</h3>
             <button
               onClick={handleRefresh}
               disabled={isRefreshing}
@@ -209,7 +191,7 @@ export default function SubscriptionTab() {
               <svg className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
               </svg>
-              {isRefreshing ? 'Actualisation...' : 'Actualiser'}
+              {isRefreshing ? t('refreshing') : t('refresh')}
             </button>
           </div>
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
@@ -222,11 +204,11 @@ export default function SubscriptionTab() {
               <span
                 className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusBadgeColor(subscription.status)}`}
               >
-                {subscription.status === 'ACTIVE' ? 'Actif' : subscription.status}
+                {subscription.status === 'ACTIVE' ? t('statusActive') : subscription.status}
               </span>
               {subscription.cancelAtPeriodEnd && (
                 <span className="px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
-                  Annulation prévue
+                  {t('cancelAtPeriodEnd')}
                 </span>
               )}
             </div>
@@ -236,7 +218,7 @@ export default function SubscriptionTab() {
                 disabled={portalMutation.isPending}
                 className="px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg disabled:opacity-50 transition-colors"
               >
-                {portalMutation.isPending ? 'Chargement...' : 'Gérer la facturation'}
+                {portalMutation.isPending ? t('manageBillingLoading') : t('manageBilling')}
               </button>
             )}
           </div>
@@ -244,10 +226,10 @@ export default function SubscriptionTab() {
           {/* License Usage */}
           <div className="mt-6">
             <div className="flex items-center justify-between mb-2">
-              <span className="text-sm font-medium text-gray-700">Utilisation des licences</span>
+              <span className="text-sm font-medium text-gray-700">{t('licenseUsage')}</span>
               <span className="text-sm text-gray-500">
                 {subscription.usedLicenses} /{' '}
-                {subscription.maxLicenses === -1 ? 'Illimité' : subscription.maxLicenses}
+                {subscription.maxLicenses === -1 ? t('unlimited') : subscription.maxLicenses}
               </span>
             </div>
             <div className="w-full bg-gray-200 rounded-full h-2.5">
@@ -270,8 +252,8 @@ export default function SubscriptionTab() {
             {subscription.availableLicenses !== -1 && subscription.availableLicenses <= 2 && (
               <p className="mt-2 text-sm text-amber-600">
                 {subscription.availableLicenses === 0
-                  ? 'Aucune licence disponible. Passez à un plan supérieur pour ajouter des utilisateurs.'
-                  : `Plus que ${subscription.availableLicenses} licence${subscription.availableLicenses === 1 ? '' : 's'} disponible${subscription.availableLicenses === 1 ? '' : 's'}.`}
+                  ? t('noLicenses')
+                  : t('licensesRemaining', { count: subscription.availableLicenses })}
               </p>
             )}
           </div>
@@ -279,8 +261,8 @@ export default function SubscriptionTab() {
           {/* Billing Period */}
           {subscription.currentPeriodEnd && (
             <div className="mt-4 text-sm text-gray-500">
-              Période actuelle : jusqu&apos;au{' '}
-              {new Date(subscription.currentPeriodEnd).toLocaleDateString('fr-FR', {
+              {t('currentPeriod')}{' '}
+              {new Date(subscription.currentPeriodEnd).toLocaleDateString(locale, {
                 day: 'numeric',
                 month: 'long',
                 year: 'numeric',
@@ -293,7 +275,7 @@ export default function SubscriptionTab() {
       {/* Plans Grid */}
       <div className="space-y-4">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-          <h3 className="text-lg font-medium text-gray-900">Plans disponibles</h3>
+          <h3 className="text-lg font-medium text-gray-900">{t('availablePlans')}</h3>
           <div className="flex items-center gap-2 bg-gray-100 p-1 rounded-lg">
             <button
               onClick={() => setBillingInterval('monthly')}
@@ -303,7 +285,7 @@ export default function SubscriptionTab() {
                   : 'text-gray-500 hover:text-gray-700'
               }`}
             >
-              Mensuel
+              {t('billingMonthly')}
             </button>
             <button
               onClick={() => setBillingInterval('yearly')}
@@ -313,8 +295,8 @@ export default function SubscriptionTab() {
                   : 'text-gray-500 hover:text-gray-700'
               }`}
             >
-              Annuel
-              <span className="ml-1 text-xs text-green-600">-1 mois</span>
+              {t('billingYearly')}
+              <span className="ml-1 text-xs text-green-600">{t('yearlySaving')}</span>
             </button>
           </div>
         </div>
@@ -334,7 +316,7 @@ export default function SubscriptionTab() {
                 <div className="mt-3">
                   <span className="text-2xl font-bold text-gray-900">
                     {plan.plan === 'PLATINIUM'
-                      ? 'Sur devis'
+                      ? t('customQuote')
                       : formatPrice(
                           billingInterval === 'yearly'
                             ? plan.yearlyPriceEur
@@ -343,14 +325,14 @@ export default function SubscriptionTab() {
                   </span>
                   {plan.plan !== 'PLATINIUM' && plan.plan !== 'BRONZE' && (
                     <span className="text-gray-500 text-sm">
-                      /{billingInterval === 'yearly' ? 'an' : 'mois'}
+                      {billingInterval === 'yearly' ? t('perYear') : t('perMonth')}
                     </span>
                   )}
                 </div>
                 <p className="mt-2 text-sm text-gray-500">
                   {plan.maxLicenses === -1
-                    ? 'Utilisateurs illimités'
-                    : `Jusqu'à ${plan.maxLicenses} utilisateurs`}
+                    ? t('unlimitedUsers')
+                    : t('maxUsers', { count: plan.maxLicenses })}
                 </p>
               </div>
 
@@ -379,14 +361,14 @@ export default function SubscriptionTab() {
                     disabled
                     className="w-full px-4 py-2 text-sm font-medium text-gray-500 bg-gray-100 rounded-lg cursor-not-allowed"
                   >
-                    Plan actuel
+                    {t('currentPlanButton')}
                   </button>
                 ) : plan.plan === 'PLATINIUM' ? (
                   <a
                     href="mailto:sales@xpeditis.com?subject=Demande Enterprise"
                     className="block w-full px-4 py-2 text-sm font-medium text-center text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 transition"
                   >
-                    Nous contacter
+                    {t('contactUs')}
                   </a>
                 ) : canUpgrade(plan.plan) ? (
                   <button
@@ -397,15 +379,15 @@ export default function SubscriptionTab() {
                     className="w-full px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
                   >
                     {checkoutMutation.isPending && selectedPlan === plan.plan
-                      ? 'Chargement...'
-                      : 'Passer à ce plan'}
+                      ? t('upgradeLoading')
+                      : t('upgradeButton')}
                   </button>
                 ) : (
                   <button
                     disabled
                     className="w-full px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 rounded-lg cursor-not-allowed"
                   >
-                    Rétrograder via Facturation
+                    {t('downgrade')}
                   </button>
                 )}
               </div>
diff --git a/apps/frontend/tsconfig.json b/apps/frontend/tsconfig.json
index 7aae428..b5726d1 100644
--- a/apps/frontend/tsconfig.json
+++ b/apps/frontend/tsconfig.json
@@ -27,7 +27,8 @@
       "@/types/*": ["./src/types/*"],
       "@/hooks/*": ["./src/hooks/*"],
       "@/utils/*": ["./src/utils/*"],
-      "@/pages/*": ["./src/pages/*"]
+      "@/pages/*": ["./src/pages/*"],
+      "@/i18n/*": ["./i18n/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],