diff --git a/apps/backend/src/application/services/analytics.service.ts b/apps/backend/src/application/services/analytics.service.ts
index 2d75127..a863d53 100644
--- a/apps/backend/src/application/services/analytics.service.ts
+++ b/apps/backend/src/application/services/analytics.service.ts
@@ -4,27 +4,26 @@
  * Calculates KPIs and analytics data for dashboard
  */
 
-import { Injectable, Inject } from '@nestjs/common';
-import { BOOKING_REPOSITORY } from '@domain/ports/out/booking.repository';
-import { BookingRepository } from '@domain/ports/out/booking.repository';
-import { RATE_QUOTE_REPOSITORY } from '@domain/ports/out/rate-quote.repository';
-import { RateQuoteRepository } from '@domain/ports/out/rate-quote.repository';
+import { Injectable } from '@nestjs/common';
 import { TypeOrmCsvBookingRepository } from '../../infrastructure/persistence/typeorm/repositories/csv-booking.repository';
 import { CsvBooking, CsvBookingStatus } from '@domain/entities/csv-booking.entity';
 
 export interface DashboardKPIs {
   bookingsThisMonth: number;
-  totalTEUs: number;
+  /** Volume LCL du mois, en CBM. */
+  volumeCBM: number;
+  /** Commission Xpeditis encaissee sur les reservations acceptees, en EUR. */
   estimatedRevenue: number;
   pendingConfirmations: number;
   bookingsThisMonthChange: number; // % change from last month
-  totalTEUsChange: number;
+  volumeCBMChange: number;
   estimatedRevenueChange: number;
   pendingConfirmationsChange: number;
 }
 
 export interface BookingsChartData {
-  labels: string[]; // Month names
+  /** Cles de mois ISO `YYYY-MM` ; la mise en forme revient au client. */
+  labels: string[];
   data: number[]; // Booking counts
 }
 
@@ -33,7 +32,7 @@ export interface TopTradeLane {
   originPort: string;
   destinationPort: string;
   bookingCount: number;
-  totalTEUs: number;
+  totalVolumeCBM: number;
   avgPrice: number;
 }
 
@@ -41,8 +40,10 @@ export interface DashboardAlert {
   id: string;
   type: 'delay' | 'confirmation' | 'document' | 'payment' | 'info';
   severity: 'low' | 'medium' | 'high' | 'critical';
-  title: string;
-  message: string;
+  /** Cle de traduction, resolue par le client. */
+  titleKey: string;
+  messageKey: string;
+  messageParams?: Record<string, string | number>;
   bookingId?: string;
   bookingNumber?: string;
   createdAt: Date;
@@ -73,125 +74,94 @@ export interface TopCarrier {
 
 @Injectable()
 export class AnalyticsService {
-  constructor(
-    @Inject(BOOKING_REPOSITORY)
-    private readonly bookingRepository: BookingRepository,
-    @Inject(RATE_QUOTE_REPOSITORY)
-    private readonly rateQuoteRepository: RateQuoteRepository,
-    private readonly csvBookingRepository: TypeOrmCsvBookingRepository
-  ) {}
+  constructor(private readonly csvBookingRepository: TypeOrmCsvBookingRepository) {}
 
   /**
    * Calculate dashboard KPIs
-   * Cached for 1 hour
+   *
+   * Source : `csv_bookings`. Les quatre methodes de ce bloc lisaient
+   * auparavant `bookingRepository.findByOrganization()`, c'est-a-dire la table
+   * `bookings` — absente du schema (aucune migration ne la cree). Les quatre
+   * endpoints repondaient donc 500 en permanence. Les reservations reelles du
+   * produit sont des reservations LCL portees par `csv_bookings`.
    */
   async calculateKPIs(organizationId: string): Promise<DashboardKPIs> {
+    const bookings = await this.csvBookingRepository.findByOrganizationId(organizationId);
+
     const now = new Date();
     const thisMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
     const lastMonthStart = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-    const lastMonthEnd = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59);
 
-    // Get all bookings for organization
-    const allBookings = await this.bookingRepository.findByOrganization(organizationId);
-
-    // This month bookings
-    const thisMonthBookings = allBookings.filter(b => b.createdAt >= thisMonthStart);
-
-    // Last month bookings
-    const lastMonthBookings = allBookings.filter(
-      b => b.createdAt >= lastMonthStart && b.createdAt <= lastMonthEnd
+    const thisMonth = bookings.filter((b: CsvBooking) => b.requestedAt >= thisMonthStart);
+    const lastMonth = bookings.filter(
+      (b: CsvBooking) => b.requestedAt >= lastMonthStart && b.requestedAt < thisMonthStart
     );
 
-    // Calculate total TEUs (20' = 1 TEU, 40' = 2 TEU)
-    // Each container is an individual entity, so we count them
-    const calculateTEUs = (bookings: typeof allBookings): number => {
-      return bookings.reduce((total, booking) => {
-        return (
-          total +
-          booking.containers.reduce((containerTotal, container) => {
-            const teu = container.type.startsWith('20') ? 1 : 2;
-            return containerTotal + teu; // Each container counts as 1 or 2 TEU
-          }, 0)
-        );
-      }, 0);
-    };
+    // LCL : le volume se mesure en CBM. Le TEU, unite du conteneur complet, ne
+    // veut rien dire ici — c'est ce que l'ancienne version calculait.
+    const volumeOf = (list: CsvBooking[]): number =>
+      list.reduce((sum, b) => sum + (Number(b.volumeCBM) || 0), 0);
 
-    const totalTEUsThisMonth = calculateTEUs(thisMonthBookings);
-    const totalTEUsLastMonth = calculateTEUs(lastMonthBookings);
+    // Le chiffre d'affaires est celui d'Xpeditis : la commission percue, pas le
+    // montant du fret qui revient au transporteur. Seules les reservations
+    // acceptees comptent.
+    const revenueOf = (list: CsvBooking[]): number =>
+      list
+        .filter(b => b.status === CsvBookingStatus.ACCEPTED)
+        .reduce((sum, b) => sum + (Number(b.commissionAmountEur) || 0), 0);
 
-    // Calculate estimated revenue (from rate quotes)
-    const calculateRevenue = async (bookings: typeof allBookings): Promise<number> => {
-      let total = 0;
-      for (const booking of bookings) {
-        try {
-          const rateQuote = await this.rateQuoteRepository.findById(booking.rateQuoteId);
-          if (rateQuote) {
-            total += rateQuote.pricing.totalAmount;
-          }
-        } catch (error) {
-          // Skip if rate quote not found
-          continue;
-        }
-      }
-      return total;
-    };
+    const pendingOf = (list: CsvBooking[]): number =>
+      list.filter(b => b.status === CsvBookingStatus.PENDING).length;
 
-    const estimatedRevenueThisMonth = await calculateRevenue(thisMonthBookings);
-    const estimatedRevenueLastMonth = await calculateRevenue(lastMonthBookings);
+    const volumeThisMonth = volumeOf(thisMonth);
+    const volumeLastMonth = volumeOf(lastMonth);
+    const revenueThisMonth = revenueOf(thisMonth);
+    const revenueLastMonth = revenueOf(lastMonth);
+    const pendingThisMonth = pendingOf(thisMonth);
+    const pendingLastMonth = pendingOf(lastMonth);
 
-    // Pending confirmations (status = pending_confirmation)
-    const pendingThisMonth = thisMonthBookings.filter(
-      b => b.status.value === 'pending_confirmation'
-    ).length;
-    const pendingLastMonth = lastMonthBookings.filter(
-      b => b.status.value === 'pending_confirmation'
-    ).length;
-
-    // Calculate percentage changes
-    const calculateChange = (current: number, previous: number): number => {
+    const change = (current: number, previous: number): number => {
       if (previous === 0) return current > 0 ? 100 : 0;
       return ((current - previous) / previous) * 100;
     };
 
     return {
-      bookingsThisMonth: thisMonthBookings.length,
-      totalTEUs: totalTEUsThisMonth,
-      estimatedRevenue: estimatedRevenueThisMonth,
+      bookingsThisMonth: thisMonth.length,
+      volumeCBM: volumeThisMonth,
+      estimatedRevenue: revenueThisMonth,
       pendingConfirmations: pendingThisMonth,
-      bookingsThisMonthChange: calculateChange(thisMonthBookings.length, lastMonthBookings.length),
-      totalTEUsChange: calculateChange(totalTEUsThisMonth, totalTEUsLastMonth),
-      estimatedRevenueChange: calculateChange(estimatedRevenueThisMonth, estimatedRevenueLastMonth),
-      pendingConfirmationsChange: calculateChange(pendingThisMonth, pendingLastMonth),
+      bookingsThisMonthChange: change(thisMonth.length, lastMonth.length),
+      volumeCBMChange: change(volumeThisMonth, volumeLastMonth),
+      estimatedRevenueChange: change(revenueThisMonth, revenueLastMonth),
+      pendingConfirmationsChange: change(pendingThisMonth, pendingLastMonth),
     };
   }
 
   /**
    * Get bookings chart data for last 6 months
+   *
+   * Les etiquettes sont des cles ISO `YYYY-MM` : le service ignore la langue de
+   * l'utilisateur, la mise en forme du mois revient au client.
    */
   async getBookingsChartData(organizationId: string): Promise<BookingsChartData> {
+    const bookings = await this.csvBookingRepository.findByOrganizationId(organizationId);
+
     const now = new Date();
     const labels: string[] = [];
     const data: number[] = [];
 
-    // Get bookings for last 6 months
-    const allBookings = await this.bookingRepository.findByOrganization(organizationId);
-
     for (let i = 5; i >= 0; i--) {
-      const monthDate = new Date(now.getFullYear(), now.getMonth() - i, 1);
-      const monthEnd = new Date(now.getFullYear(), now.getMonth() - i + 1, 0, 23, 59, 59);
+      const monthStart = new Date(now.getFullYear(), now.getMonth() - i, 1);
+      const nextMonthStart = new Date(now.getFullYear(), now.getMonth() - i + 1, 1);
 
-      // Month label (e.g., "Jan 2025")
-      const monthLabel = monthDate.toLocaleDateString('en-US', {
-        month: 'short',
-        year: 'numeric',
-      });
-      labels.push(monthLabel);
-
-      // Count bookings in this month
-      const count = allBookings.filter(
-        b => b.createdAt >= monthDate && b.createdAt <= monthEnd
-      ).length;
-      data.push(count);
+      labels.push(
+        `${monthStart.getFullYear()}-${String(monthStart.getMonth() + 1).padStart(2, '0')}`
+      );
+      data.push(
+        bookings.filter(
+          (b: CsvBooking) => b.requestedAt >= monthStart && b.requestedAt < nextMonthStart
+        ).length
+      );
     }
 
     return { labels, data };
@@ -201,136 +171,133 @@ export class AnalyticsService {
    * Get top 5 trade lanes
    */
   async getTopTradeLanes(organizationId: string): Promise<TopTradeLane[]> {
-    const allBookings = await this.bookingRepository.findByOrganization(organizationId);
+    const bookings = await this.csvBookingRepository.findByOrganizationId(organizationId);
 
-    // Group by route (origin-destination)
     const routeMap = new Map<
       string,
       {
         originPort: string;
         destinationPort: string;
         bookingCount: number;
-        totalTEUs: number;
+        totalVolumeCBM: number;
         totalPrice: number;
       }
     >();
 
-    for (const booking of allBookings) {
-      try {
-        const rateQuote = await this.rateQuoteRepository.findById(booking.rateQuoteId);
-        if (!rateQuote) continue;
+    for (const booking of bookings) {
+      const originPort = booking.origin.getValue();
+      const destinationPort = booking.destination.getValue();
+      const routeKey = `${originPort} → ${destinationPort}`;
 
-        // Get first and last ports from route
-        const originPort = rateQuote.route[0]?.portCode || 'UNKNOWN';
-        const destinationPort = rateQuote.route[rateQuote.route.length - 1]?.portCode || 'UNKNOWN';
-        const routeKey = `${originPort}-${destinationPort}`;
+      const entry = routeMap.get(routeKey) ?? {
+        originPort,
+        destinationPort,
+        bookingCount: 0,
+        totalVolumeCBM: 0,
+        totalPrice: 0,
+      };
 
-        if (!routeMap.has(routeKey)) {
-          routeMap.set(routeKey, {
-            originPort,
-            destinationPort,
-            bookingCount: 0,
-            totalTEUs: 0,
-            totalPrice: 0,
-          });
-        }
-
-        const route = routeMap.get(routeKey)!;
-        route.bookingCount++;
-        route.totalPrice += rateQuote.pricing.totalAmount;
-
-        // Calculate TEUs
-        const teus = booking.containers.reduce((total, container) => {
-          const teu = container.type.startsWith('20') ? 1 : 2;
-          return total + teu;
-        }, 0);
-        route.totalTEUs += teus;
-      } catch (error) {
-        continue;
-      }
+      entry.bookingCount++;
+      entry.totalVolumeCBM += Number(booking.volumeCBM) || 0;
+      entry.totalPrice += Number(booking.priceEUR) || 0;
+      routeMap.set(routeKey, entry);
     }
 
-    // Convert to array and sort by booking count
-    const tradeLanes: TopTradeLane[] = Array.from(routeMap.entries()).map(([route, data]) => ({
-      route,
-      originPort: data.originPort,
-      destinationPort: data.destinationPort,
-      bookingCount: data.bookingCount,
-      totalTEUs: data.totalTEUs,
-      avgPrice: data.totalPrice / data.bookingCount,
-    }));
-
-    // Sort by booking count and return top 5
-    return tradeLanes.sort((a, b) => b.bookingCount - a.bookingCount).slice(0, 5);
+    return Array.from(routeMap.entries())
+      .map(([route, entry]) => ({
+        route,
+        originPort: entry.originPort,
+        destinationPort: entry.destinationPort,
+        bookingCount: entry.bookingCount,
+        totalVolumeCBM: entry.totalVolumeCBM,
+        avgPrice: entry.bookingCount > 0 ? entry.totalPrice / entry.bookingCount : 0,
+      }))
+      .sort((a, b) => b.bookingCount - a.bookingCount)
+      .slice(0, 5);
   }
 
   /**
    * Get dashboard alerts
+   *
+   * Uniquement ce sur quoi l'utilisateur peut agir. Les libelles sont des cles
+   * de traduction resolues cote client : le service ne connait pas la langue.
    */
   async getAlerts(organizationId: string): Promise<DashboardAlert[]> {
+    const bookings = await this.csvBookingRepository.findByOrganizationId(organizationId);
     const alerts: DashboardAlert[] = [];
-    const allBookings = await this.bookingRepository.findByOrganization(organizationId);
 
-    // Check for pending confirmations (older than 24h)
-    const oneDayAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
-    const oldPendingBookings = allBookings.filter(
-      b => b.status.value === 'pending_confirmation' && b.createdAt < oneDayAgo
-    );
+    const now = Date.now();
+    const oneDay = 24 * 60 * 60 * 1000;
 
-    for (const booking of oldPendingBookings) {
-      alerts.push({
-        id: `pending-${booking.id}`,
-        type: 'confirmation',
-        severity: 'medium',
-        title: 'Pending Confirmation',
-        message: `Booking ${booking.bookingNumber.value} is awaiting carrier confirmation for over 24 hours`,
-        bookingId: booking.id,
-        bookingNumber: booking.bookingNumber.value,
-        createdAt: booking.createdAt,
-        isRead: false,
-      });
-    }
+    for (const booking of bookings) {
+      const waitedMs = now - booking.requestedAt.getTime();
+      const waitedDays = Math.floor(waitedMs / oneDay);
 
-    // Check for bookings departing soon (within 7 days) with pending status
-    const sevenDaysFromNow = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
-    for (const booking of allBookings) {
-      try {
-        const rateQuote = await this.rateQuoteRepository.findById(booking.rateQuoteId);
-        if (rateQuote && rateQuote.route.length > 0) {
-          const etd = rateQuote.route[0].departure;
-          if (etd) {
-            const etdDate = new Date(etd);
-            if (
-              etdDate <= sevenDaysFromNow &&
-              etdDate >= new Date() &&
-              booking.status.value === 'pending_confirmation'
-            ) {
-              alerts.push({
-                id: `departure-${booking.id}`,
-                type: 'delay',
-                severity: 'high',
-                title: 'Departure Soon - Not Confirmed',
-                message: `Booking ${booking.bookingNumber.value} departs in ${Math.ceil(
-                  (etdDate.getTime() - Date.now()) / (24 * 60 * 60 * 1000)
-                )} days but is not confirmed yet`,
-                bookingId: booking.id,
-                bookingNumber: booking.bookingNumber.value,
-                createdAt: booking.createdAt,
-                isRead: false,
-              });
-            }
-          }
-        }
-      } catch (error) {
+      // Sans reponse du transporteur au-dela de 48 h, la demande decroche.
+      if (booking.status === CsvBookingStatus.PENDING && waitedMs > 2 * oneDay) {
+        alerts.push({
+          id: `pending-${booking.id}`,
+          type: 'confirmation',
+          severity: waitedDays >= 5 ? 'high' : 'medium',
+          titleKey: 'awaitingCarrier',
+          messageKey: 'awaitingCarrierSince',
+          messageParams: { days: waitedDays, carrier: booking.carrierName },
+          bookingId: booking.id,
+          bookingNumber: booking.bookingNumber,
+          createdAt: booking.requestedAt,
+          isRead: false,
+        });
         continue;
       }
+
+      // Reservation bloquee avant paiement : rien ne part tant qu'elle y reste.
+      if (
+        (booking.status === CsvBookingStatus.PENDING_PAYMENT ||
+          booking.status === CsvBookingStatus.PENDING_BANK_TRANSFER) &&
+        waitedMs > oneDay
+      ) {
+        alerts.push({
+          id: `payment-${booking.id}`,
+          type: 'payment',
+          severity: 'critical',
+          titleKey: 'awaitingPayment',
+          messageKey: 'awaitingPaymentSince',
+          messageParams: { days: waitedDays },
+          bookingId: booking.id,
+          bookingNumber: booking.bookingNumber,
+          createdAt: booking.requestedAt,
+          isRead: false,
+        });
+        continue;
+      }
+
+      // Refus recent : il faut replacer la marchandise.
+      if (
+        booking.status === CsvBookingStatus.REJECTED &&
+        booking.respondedAt &&
+        now - booking.respondedAt.getTime() < 7 * oneDay
+      ) {
+        alerts.push({
+          id: `rejected-${booking.id}`,
+          type: 'info',
+          severity: 'medium',
+          titleKey: 'rejected',
+          messageKey: 'rejectedBy',
+          messageParams: { carrier: booking.carrierName },
+          bookingId: booking.id,
+          bookingNumber: booking.bookingNumber,
+          createdAt: booking.respondedAt,
+          isRead: false,
+        });
+      }
     }
 
-    // Sort by severity (critical > high > medium > low)
     const severityOrder = { critical: 0, high: 1, medium: 2, low: 3 };
-    alerts.sort((a, b) => severityOrder[a.severity] - severityOrder[b.severity]);
-
-    return alerts;
+    return alerts.sort(
+      (a, b) =>
+        severityOrder[a.severity] - severityOrder[b.severity] ||
+        b.createdAt.getTime() - a.createdAt.getTime()
+    );
   }
 
   /**
diff --git a/apps/frontend/app/[locale]/admin/blog/page.tsx b/apps/frontend/app/[locale]/admin/blog/page.tsx
index 912eeb0..eece09e 100644
--- a/apps/frontend/app/[locale]/admin/blog/page.tsx
+++ b/apps/frontend/app/[locale]/admin/blog/page.tsx
@@ -68,7 +68,7 @@ const STATUS_LABELS: Record<BlogPostStatus, string> = {
 
 const STATUS_COLORS: Record<BlogPostStatus, string> = {
   draft: 'bg-yellow-100 text-yellow-800',
-  scheduled: 'bg-brand-turquoise/10 text-brand-navy',
+  scheduled: 'bg-brand-blue/10 text-brand-navy',
   published: 'bg-green-100 text-green-800',
   archived: 'bg-neutral-100 text-neutral-600',
 };
@@ -526,7 +526,7 @@ export default function AdminBlogPage() {
         actions={
           <button
             onClick={openCreate}
-            className="flex items-center space-x-2 px-4 py-2 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium text-sm"
+            className="flex items-center space-x-2 px-4 py-2 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-colors font-medium text-sm"
           >
             <Plus className="w-4 h-4" />
             <span>Nouvel article</span>
@@ -556,7 +556,7 @@ export default function AdminBlogPage() {
             onClick={() => setViewFilter(tab.value)}
             className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
               viewFilter === tab.value
-                ? 'bg-brand-turquoise text-brand-navy'
+                ? 'bg-brand-navy text-white'
                 : 'bg-white text-neutral-600 border border-border hover:bg-neutral-50'
             }`}
           >
@@ -814,7 +814,7 @@ export default function AdminBlogPage() {
                   required
                   value={formData.title}
                   onChange={e => handleTitleChange(e.target.value)}
-                  className="w-full text-3xl font-bold text-brand-navy border-0 border-b-2 border-border focus:border-brand-turquoise focus:outline-none pb-2 placeholder-neutral-300 bg-transparent"
+                  className="w-full text-3xl font-bold text-brand-navy border-0 border-b-2 border-border focus:border-brand-blue focus:outline-none pb-2 placeholder-neutral-300 bg-transparent"
                   placeholder="Titre de l'article..."
                 />
               </div>
@@ -1011,7 +1011,7 @@ export default function AdminBlogPage() {
                         <button
                           type="button"
                           onClick={addFaqItem}
-                          className="inline-flex items-center gap-1 text-xs font-medium text-brand-navy hover:text-brand-turquoise"
+                          className="inline-flex items-center gap-1 text-xs font-medium text-brand-navy hover:text-brand-blue"
                         >
                           <Plus className="w-3.5 h-3.5" />
                           Ajouter
@@ -1142,7 +1142,7 @@ export default function AdminBlogPage() {
                     <button
                       type="submit"
                       disabled={saving}
-                      className="w-full py-2.5 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
+                      className="w-full py-2.5 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
                     >
                       {saving && <Loader2 className="w-4 h-4 animate-spin" />}
                       {isScheduleMode ? 'Planifier' : 'Enregistrer brouillon'}
@@ -1152,7 +1152,7 @@ export default function AdminBlogPage() {
                   <button
                     type="submit"
                     disabled={saving}
-                    className="w-full py-2.5 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
+                    className="w-full py-2.5 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-colors font-medium disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
                   >
                     {saving && <Loader2 className="w-4 h-4 animate-spin" />}
                     {saving ? 'Enregistrement...' : 'Enregistrer'}
@@ -1191,8 +1191,8 @@ export default function AdminBlogPage() {
                     onDrop={handleCoverDrop}
                     className={`w-full h-32 border-2 border-dashed rounded-lg flex flex-col items-center justify-center gap-2 transition-colors disabled:opacity-50 ${
                       isDraggingCover
-                        ? 'border-brand-turquoise bg-brand-turquoise/5 text-brand-navy'
-                        : 'border-neutral-300 text-neutral-400 hover:border-brand-turquoise hover:text-brand-navy'
+                        ? 'border-brand-blue bg-brand-blue/5 text-brand-navy'
+                        : 'border-neutral-300 text-neutral-400 hover:border-brand-blue hover:text-brand-navy'
                     }`}
                   >
                     {uploadingCover ? (
diff --git a/apps/frontend/app/[locale]/admin/bookings/page.tsx b/apps/frontend/app/[locale]/admin/bookings/page.tsx
index a778255..d47c8c9 100644
--- a/apps/frontend/app/[locale]/admin/bookings/page.tsx
+++ b/apps/frontend/app/[locale]/admin/bookings/page.tsx
@@ -148,7 +148,7 @@ export default function AdminBookingsPage() {
     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-brand-turquoise mx-auto"></div>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-blue mx-auto"></div>
           <p className="mt-4 text-neutral-600">{t('loading')}</p>
         </div>
       </div>
@@ -211,7 +211,7 @@ export default function AdminBookingsPage() {
               placeholder={t('search.placeholder')}
               value={searchTerm}
               onChange={e => setSearchTerm(e.target.value)}
-              className="block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none text-sm"
+              className="block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none text-sm"
             />
           </div>
           <div>
@@ -221,7 +221,7 @@ export default function AdminBookingsPage() {
             <select
               value={filterStatus}
               onChange={e => setFilterStatus(e.target.value)}
-              className="block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none text-sm"
+              className="block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none text-sm"
             >
               <option value="all">{t('filter.all')}</option>
               <option value="pending_bank_transfer">{t('status.PENDING_BANK_TRANSFER')}</option>
diff --git a/apps/frontend/app/[locale]/admin/csv-rates/page.tsx b/apps/frontend/app/[locale]/admin/csv-rates/page.tsx
index 61c37bb..a24768c 100644
--- a/apps/frontend/app/[locale]/admin/csv-rates/page.tsx
+++ b/apps/frontend/app/[locale]/admin/csv-rates/page.tsx
@@ -30,7 +30,7 @@ import { useToast } from '@/components/ui/toast';
 import { useConfirm } from '@/components/ui/use-confirm';
 
 const DIRECTION_COLORS: Record<'EXPORT' | 'IMPORT', string> = {
-  EXPORT: 'bg-brand-turquoise/10 text-brand-navy',
+  EXPORT: 'bg-brand-blue/10 text-brand-navy',
   IMPORT: 'bg-purple-100 text-purple-800',
 };
 
diff --git a/apps/frontend/app/[locale]/admin/documents/page.tsx b/apps/frontend/app/[locale]/admin/documents/page.tsx
index 0960afe..afd6716 100644
--- a/apps/frontend/app/[locale]/admin/documents/page.tsx
+++ b/apps/frontend/app/[locale]/admin/documents/page.tsx
@@ -222,9 +222,9 @@ export default function AdminDocumentsPage() {
       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-brand-turquoise`} />,
-      doc: <FileEdit className={`${cls} text-brand-turquoise`} />,
-      docx: <FileEdit className={`${cls} text-brand-turquoise`} />,
+      word: <FileEdit className={`${cls} text-brand-blue`} />,
+      doc: <FileEdit className={`${cls} text-brand-blue`} />,
+      docx: <FileEdit className={`${cls} text-brand-blue`} />,
       excel: <FileSpreadsheet className={`${cls} text-green-600`} />,
       xls: <FileSpreadsheet className={`${cls} text-green-600`} />,
       xlsx: <FileSpreadsheet className={`${cls} text-green-600`} />,
@@ -304,7 +304,7 @@ export default function AdminDocumentsPage() {
     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-brand-turquoise mx-auto"></div>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-blue mx-auto"></div>
           <p className="mt-4 text-neutral-600">{t('loading')}</p>
         </div>
       </div>
@@ -345,7 +345,7 @@ export default function AdminDocumentsPage() {
               placeholder={t('filters.searchPlaceholder')}
               value={searchTerm}
               onChange={e => setSearchTerm(e.target.value)}
-              className="block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none"
+              className="block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none"
             />
           </div>
           <div>
@@ -357,7 +357,7 @@ export default function AdminDocumentsPage() {
               placeholder={t('filters.quoteNumberPlaceholder')}
               value={filterQuoteNumber}
               onChange={e => setFilterQuoteNumber(e.target.value)}
-              className="block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none"
+              className="block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none"
             />
           </div>
           <div>
@@ -367,7 +367,7 @@ export default function AdminDocumentsPage() {
             <select
               value={filterUserId}
               onChange={e => setFilterUserId(e.target.value)}
-              className="block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none"
+              className="block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none"
             >
               <option value="all">{t('filters.allUsers')}</option>
               {uniqueUsers.map(user => (
@@ -572,7 +572,7 @@ export default function AdminDocumentsPage() {
                         onClick={() => setCurrentPage(pageNum)}
                         className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
                           currentPage === pageNum
-                            ? 'z-10 bg-brand-turquoise/5 border-brand-turquoise text-brand-navy'
+                            ? 'z-10 bg-brand-blue/5 border-brand-blue text-brand-navy'
                             : 'bg-white border-neutral-300 text-neutral-500 hover:bg-neutral-50'
                         }`}
                       >
diff --git a/apps/frontend/app/[locale]/admin/login/page.tsx b/apps/frontend/app/[locale]/admin/login/page.tsx
index 9392a3e..737ef8b 100644
--- a/apps/frontend/app/[locale]/admin/login/page.tsx
+++ b/apps/frontend/app/[locale]/admin/login/page.tsx
@@ -60,7 +60,7 @@ export default function AdminLoginPage() {
               priority
               className="h-auto mb-4"
             />
-            <div className="flex items-center gap-2 text-brand-turquoise">
+            <div className="flex items-center gap-2 text-brand-blue">
               <ShieldCheck className="w-5 h-5" />
               <span className="text-xs font-semibold uppercase tracking-wider">{t('badge')}</span>
             </div>
diff --git a/apps/frontend/app/[locale]/admin/logs/page.tsx b/apps/frontend/app/[locale]/admin/logs/page.tsx
index a44c751..40c3f7c 100644
--- a/apps/frontend/app/[locale]/admin/logs/page.tsx
+++ b/apps/frontend/app/[locale]/admin/logs/page.tsx
@@ -55,7 +55,7 @@ const LEVEL_STYLES: Record<string, string> = {
   error: 'bg-red-100 text-red-700 border border-red-200',
   fatal: 'bg-red-200 text-red-900 border border-red-300',
   warn: 'bg-yellow-100 text-yellow-700 border border-yellow-200',
-  info: 'bg-brand-turquoise/10 text-brand-navy border border-brand-turquoise/30',
+  info: 'bg-brand-blue/10 text-brand-navy border border-brand-blue/30',
   debug: 'bg-neutral-100 text-neutral-600 border border-border',
   trace: 'bg-purple-100 text-purple-700 border border-purple-200',
 };
@@ -239,7 +239,7 @@ export default function AdminLogsPage() {
           label={t('stats.total')}
           value={total}
           icon={Activity}
-          color="bg-brand-turquoise/10 text-brand-navy"
+          color="bg-brand-blue/10 text-brand-navy"
         />
         <StatCard
           label={t('stats.errors')}
@@ -364,7 +364,7 @@ export default function AdminLogsPage() {
               <button
                 onClick={fetchLogs}
                 disabled={loading}
-                className="px-3 py-2 text-sm font-medium text-white bg-brand-turquoise rounded-lg hover:bg-brand-turquoise/90 transition-colors disabled:opacity-50 whitespace-nowrap"
+                className="px-3 py-2 text-sm font-medium text-white bg-brand-navy rounded-lg hover:bg-brand-navy/90 transition-colors disabled:opacity-50 whitespace-nowrap"
               >
                 {t('filters.apply')}
               </button>
diff --git a/apps/frontend/app/[locale]/admin/organizations/page.tsx b/apps/frontend/app/[locale]/admin/organizations/page.tsx
index f8a9a5c..b5251b2 100644
--- a/apps/frontend/app/[locale]/admin/organizations/page.tsx
+++ b/apps/frontend/app/[locale]/admin/organizations/page.tsx
@@ -318,14 +318,14 @@ export default function AdminOrganizationsPage() {
     `mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none text-sm ${
       hasError
         ? 'border-red-400 focus:border-red-500 focus:ring-red-500'
-        : 'border-neutral-300 focus:border-brand-turquoise focus:ring-ring'
+        : 'border-neutral-300 focus:border-brand-blue focus:ring-ring'
     }`;
 
   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-brand-turquoise mx-auto"></div>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-blue mx-auto"></div>
           <p className="mt-4 text-neutral-600">{t('loading')}</p>
         </div>
       </div>
@@ -340,7 +340,7 @@ export default function AdminOrganizationsPage() {
         actions={
           <button
             onClick={() => setShowCreateModal(true)}
-            className="px-4 py-2 bg-brand-turquoise text-brand-navy text-sm font-medium rounded-lg hover:bg-brand-turquoise/90 transition-colors"
+            className="px-4 py-2 bg-brand-navy text-white text-sm font-medium rounded-lg hover:bg-brand-navy/90 transition-colors"
           >
             {t('create')}
           </button>
@@ -363,7 +363,7 @@ export default function AdminOrganizationsPage() {
                 <span
                   className={`inline-block mt-2 px-2 py-1 text-xs font-semibold rounded-full ${
                     org.type === 'FREIGHT_FORWARDER'
-                      ? 'bg-brand-turquoise/10 text-brand-navy'
+                      ? 'bg-brand-blue/10 text-brand-navy'
                       : org.type === 'CARRIER'
                         ? 'bg-green-100 text-green-800'
                         : 'bg-purple-100 text-purple-800'
@@ -426,7 +426,7 @@ export default function AdminOrganizationsPage() {
               <div className="flex space-x-2">
                 <button
                   onClick={() => openEditModal(org)}
-                  className="flex-1 px-3 py-2 bg-brand-turquoise/5 text-brand-navy rounded-md hover:bg-brand-turquoise/10 transition-colors text-sm font-medium"
+                  className="flex-1 px-3 py-2 bg-brand-blue/5 text-brand-navy rounded-md hover:bg-brand-blue/10 transition-colors text-sm font-medium"
                 >
                   {t('edit')}
                 </button>
@@ -523,7 +523,7 @@ export default function AdminOrganizationsPage() {
                         <span
                           className={`px-2 py-1 text-xs font-semibold rounded-full ${
                             formData.type === 'FREIGHT_FORWARDER'
-                              ? 'bg-brand-turquoise/10 text-brand-navy'
+                              ? 'bg-brand-blue/10 text-brand-navy'
                               : formData.type === 'CARRIER'
                                 ? 'bg-green-100 text-green-800'
                                 : 'bg-purple-100 text-purple-800'
@@ -818,7 +818,7 @@ export default function AdminOrganizationsPage() {
                 <button
                   type="submit"
                   disabled={submitting}
-                  className="px-4 py-2 bg-brand-turquoise text-brand-navy rounded-md text-sm font-medium hover:bg-brand-turquoise/90 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+                  className="px-4 py-2 bg-brand-navy text-white rounded-md text-sm font-medium hover:bg-brand-navy/90 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
                 >
                   {submitting
                     ? t('modal.saving')
diff --git a/apps/frontend/app/[locale]/admin/users/page.tsx b/apps/frontend/app/[locale]/admin/users/page.tsx
index 3167022..2451c4e 100644
--- a/apps/frontend/app/[locale]/admin/users/page.tsx
+++ b/apps/frontend/app/[locale]/admin/users/page.tsx
@@ -167,7 +167,7 @@ export default function AdminUsersPage() {
     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-brand-turquoise mx-auto"></div>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-blue mx-auto"></div>
           <p className="mt-4 text-neutral-600">{t('loading')}</p>
         </div>
       </div>
@@ -182,7 +182,7 @@ export default function AdminUsersPage() {
         actions={
           <button
             onClick={() => setShowCreateModal(true)}
-            className="px-4 py-2 bg-brand-turquoise text-brand-navy text-sm font-medium rounded-lg hover:bg-brand-turquoise/90 transition-colors"
+            className="px-4 py-2 bg-brand-navy text-white text-sm font-medium rounded-lg hover:bg-brand-navy/90 transition-colors"
           >
             {t('create')}
           </button>
@@ -238,7 +238,7 @@ export default function AdminUsersPage() {
                       user.role === 'ADMIN'
                         ? 'bg-purple-100 text-purple-800'
                         : user.role === 'MANAGER'
-                          ? 'bg-brand-turquoise/10 text-brand-navy'
+                          ? 'bg-brand-blue/10 text-brand-navy'
                           : 'bg-neutral-100 text-neutral-800'
                     }`}
                   >
@@ -260,7 +260,7 @@ export default function AdminUsersPage() {
                 <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
                   <button
                     onClick={() => openEditModal(user)}
-                    className="text-brand-navy hover:text-brand-turquoise"
+                    className="text-brand-navy hover:text-brand-blue"
                   >
                     {t('edit')}
                   </button>
@@ -292,7 +292,7 @@ export default function AdminUsersPage() {
                   required
                   value={formData.email}
                   onChange={e => setFormData({ ...formData, email: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none"
+                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none"
                 />
               </div>
               <div>
@@ -304,7 +304,7 @@ export default function AdminUsersPage() {
                   required
                   value={formData.firstName}
                   onChange={e => setFormData({ ...formData, firstName: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none"
+                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none"
                 />
               </div>
               <div>
@@ -316,7 +316,7 @@ export default function AdminUsersPage() {
                   required
                   value={formData.lastName}
                   onChange={e => setFormData({ ...formData, lastName: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none"
+                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none"
                 />
               </div>
               <div>
@@ -324,7 +324,7 @@ export default function AdminUsersPage() {
                 <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-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none"
+                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none"
                 >
                   <option value="USER">{t('roles.USER')}</option>
                   <option value="MANAGER">{t('roles.MANAGER')}</option>
@@ -340,7 +340,7 @@ export default function AdminUsersPage() {
                   required
                   value={formData.organizationId}
                   onChange={e => setFormData({ ...formData, organizationId: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none"
+                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none"
                 >
                   <option value="">{t('modal.selectOrganization')}</option>
                   {organizations.map(org => (
@@ -359,7 +359,7 @@ export default function AdminUsersPage() {
                     type={showPassword ? 'text' : 'password'}
                     value={formData.password}
                     onChange={e => setFormData({ ...formData, password: e.target.value })}
-                    className="block w-full px-3 py-2 pr-10 border border-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none"
+                    className="block w-full px-3 py-2 pr-10 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none"
                   />
                   <button
                     type="button"
@@ -385,7 +385,7 @@ export default function AdminUsersPage() {
                 </button>
                 <button
                   type="submit"
-                  className="px-4 py-2 bg-brand-turquoise text-brand-navy rounded-md hover:bg-brand-turquoise/90"
+                  className="px-4 py-2 bg-brand-navy text-white rounded-md hover:bg-brand-navy/90"
                 >
                   {t('modal.create')}
                 </button>
@@ -421,7 +421,7 @@ export default function AdminUsersPage() {
                   required
                   value={formData.firstName}
                   onChange={e => setFormData({ ...formData, firstName: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none"
+                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none"
                 />
               </div>
               <div>
@@ -433,7 +433,7 @@ export default function AdminUsersPage() {
                   required
                   value={formData.lastName}
                   onChange={e => setFormData({ ...formData, lastName: e.target.value })}
-                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none"
+                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none"
                 />
               </div>
               <div>
@@ -441,7 +441,7 @@ export default function AdminUsersPage() {
                 <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-neutral-300 rounded-md shadow-sm focus:border-brand-turquoise focus:ring-ring focus:outline-none"
+                  className="mt-1 block w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:border-brand-blue focus:ring-ring focus:outline-none"
                 >
                   <option value="USER">{t('roles.USER')}</option>
                   <option value="MANAGER">{t('roles.MANAGER')}</option>
@@ -463,7 +463,7 @@ export default function AdminUsersPage() {
                 </button>
                 <button
                   type="submit"
-                  className="px-4 py-2 bg-brand-turquoise text-brand-navy rounded-md hover:bg-brand-turquoise/90"
+                  className="px-4 py-2 bg-brand-navy text-white rounded-md hover:bg-brand-navy/90"
                 >
                   {t('modal.update')}
                 </button>
diff --git a/apps/frontend/app/[locale]/booking/confirm/[token]/page.tsx b/apps/frontend/app/[locale]/booking/confirm/[token]/page.tsx
index 13af220..658a075 100644
--- a/apps/frontend/app/[locale]/booking/confirm/[token]/page.tsx
+++ b/apps/frontend/app/[locale]/booking/confirm/[token]/page.tsx
@@ -54,7 +54,7 @@ export default function BookingConfirmPage() {
     return (
       <div className="min-h-[60vh] 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-brand-turquoise mx-auto mb-4"></div>
+          <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-brand-blue mx-auto mb-4"></div>
           <p className="text-neutral-600">{t('loading')}</p>
         </div>
       </div>
@@ -205,7 +205,7 @@ export default function BookingConfirmPage() {
         </div>
 
         {/* Next Steps */}
-        <div className="bg-brand-turquoise/5 border border-brand-turquoise/30 rounded-lg p-4 mb-6">
+        <div className="bg-brand-blue/5 border border-brand-blue/30 rounded-lg p-4 mb-6">
           <h3 className="font-semibold text-brand-navy mb-2 flex items-center">
             <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -257,7 +257,7 @@ export default function BookingConfirmPage() {
                     href={doc.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-brand-navy hover:text-brand-turquoise text-sm font-medium"
+                    className="text-brand-navy hover:text-brand-blue text-sm font-medium"
                   >
                     {t('labels.download')}
                   </a>
diff --git a/apps/frontend/app/[locale]/booking/reject/[token]/page.tsx b/apps/frontend/app/[locale]/booking/reject/[token]/page.tsx
index 00dcd19..6292b0c 100644
--- a/apps/frontend/app/[locale]/booking/reject/[token]/page.tsx
+++ b/apps/frontend/app/[locale]/booking/reject/[token]/page.tsx
@@ -184,7 +184,7 @@ export default function BookingRejectPage() {
             )}
           </div>
 
-          <div className="bg-brand-turquoise/5 border border-brand-turquoise/30 rounded-lg p-4 mb-6">
+          <div className="bg-brand-blue/5 border border-brand-blue/30 rounded-lg p-4 mb-6">
             <h3 className="font-semibold text-brand-navy mb-2 flex items-center">
               <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
diff --git a/apps/frontend/app/[locale]/carrier/accept/[token]/page.tsx b/apps/frontend/app/[locale]/carrier/accept/[token]/page.tsx
index 0c2e99b..56102fe 100644
--- a/apps/frontend/app/[locale]/carrier/accept/[token]/page.tsx
+++ b/apps/frontend/app/[locale]/carrier/accept/[token]/page.tsx
@@ -110,7 +110,7 @@ export default function CarrierAcceptPage() {
           <p className="text-neutral-600 mb-6">{error}</p>
           <button
             onClick={() => router.push('/')}
-            className="w-full px-4 py-2 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90"
+            className="w-full px-4 py-2 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90"
           >
             {t('common.backHome')}
           </button>
diff --git a/apps/frontend/app/[locale]/carrier/documents/[token]/page.tsx b/apps/frontend/app/[locale]/carrier/documents/[token]/page.tsx
index 416bab2..3077acf 100644
--- a/apps/frontend/app/[locale]/carrier/documents/[token]/page.tsx
+++ b/apps/frontend/app/[locale]/carrier/documents/[token]/page.tsx
@@ -327,7 +327,7 @@ export default function CarrierDocumentsPage() {
     return (
       <div className="min-h-[60vh] 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" />
+          <Loader2 className="w-16 h-16 text-brand-blue mx-auto mb-4 animate-spin" />
           <h1 className="text-2xl font-bold text-brand-navy mb-2">{t('loading')}</h1>
           <p className="text-neutral-600">{t('loadingHint')}</p>
         </div>
@@ -360,8 +360,8 @@ export default function CarrierDocumentsPage() {
       <div className="min-h-[60vh] 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 className="mx-auto w-16 h-16 bg-brand-blue/10 rounded-full flex items-center justify-center mb-4">
+              <Lock className="w-8 h-8 text-brand-blue" />
             </div>
             <h1 className="text-2xl font-bold text-brand-navy mb-2">{t('password.title')}</h1>
             <p className="text-neutral-600">{t('password.intro')}</p>
@@ -385,7 +385,7 @@ export default function CarrierDocumentsPage() {
                   value={password}
                   onChange={e => setPassword(e.target.value.toUpperCase())}
                   placeholder={t('password.passwordPlaceholder')}
-                  className="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-brand-turquoise focus:border-brand-turquoise text-center text-xl tracking-widest font-mono uppercase"
+                  className="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-brand-blue text-center text-xl tracking-widest font-mono uppercase"
                   autoComplete="off"
                   autoFocus
                 />
@@ -456,7 +456,7 @@ export default function CarrierDocumentsPage() {
           </div>
           <button
             onClick={handleRefresh}
-            className="text-sm text-brand-turquoise hover:text-brand-navy font-medium"
+            className="text-sm text-brand-blue hover:text-brand-navy font-medium"
           >
             {t('header.refresh')}
           </button>
@@ -524,7 +524,7 @@ export default function CarrierDocumentsPage() {
         <div className="bg-white rounded-xl shadow-md overflow-hidden">
           <div className="px-6 py-4 border-b border-border">
             <h2 className="text-lg font-semibold text-brand-navy flex items-center gap-2">
-              <FileText className="w-5 h-5 text-brand-turquoise" />
+              <FileText className="w-5 h-5 text-brand-blue" />
               {t('list.heading', { count: documents.length })}
             </h2>
           </div>
@@ -547,7 +547,7 @@ export default function CarrierDocumentsPage() {
                     <div>
                       <p className="font-medium text-brand-navy">{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">
+                        <span className="text-xs px-2 py-0.5 bg-brand-blue/10 text-brand-navy rounded-full">
                           {getDocumentTypeLabel(doc.type)}
                         </span>
                         <span className="text-xs text-neutral-500">{formatFileSize(doc.size)}</span>
diff --git a/apps/frontend/app/[locale]/carrier/reject/[token]/page.tsx b/apps/frontend/app/[locale]/carrier/reject/[token]/page.tsx
index fe8d2f6..0171dab 100644
--- a/apps/frontend/app/[locale]/carrier/reject/[token]/page.tsx
+++ b/apps/frontend/app/[locale]/carrier/reject/[token]/page.tsx
@@ -110,7 +110,7 @@ export default function CarrierRejectPage() {
           <p className="text-neutral-600 mb-6">{error}</p>
           <button
             onClick={() => router.push('/')}
-            className="w-full px-4 py-2 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90"
+            className="w-full px-4 py-2 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90"
           >
             {t('common.backHome')}
           </button>
diff --git a/apps/frontend/app/[locale]/dashboard/booking/[id]/pay/page.tsx b/apps/frontend/app/[locale]/dashboard/booking/[id]/pay/page.tsx
index 863ad55..baf6fc6 100644
--- a/apps/frontend/app/[locale]/dashboard/booking/[id]/pay/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/booking/[id]/pay/page.tsx
@@ -164,7 +164,7 @@ export default function PayCommissionPage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-brand-turquoise/5">
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-brand-blue/5">
         <div className="flex items-center space-x-3">
           <Loader2 className="h-6 w-6 animate-spin text-brand-navy" />
           <span className="text-neutral-600">Chargement...</span>
@@ -175,13 +175,13 @@ export default function PayCommissionPage() {
 
   if (error && !booking) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-brand-turquoise/5">
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-brand-blue/5">
         <div className="bg-white rounded-xl shadow-md p-8 max-w-md">
           <AlertTriangle className="h-12 w-12 text-red-500 mx-auto mb-4" />
           <p className="text-center text-neutral-700">{error}</p>
           <button
             onClick={() => router.push('/dashboard/bookings')}
-            className="mt-4 w-full px-4 py-2 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90"
+            className="mt-4 w-full px-4 py-2 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90"
           >
             Retour aux bookings
           </button>
@@ -210,13 +210,13 @@ export default function PayCommissionPage() {
     : (booking.priceUSD || 0) + (booking.priceEUR || 0);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-brand-turquoise/5 py-10 px-4">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-brand-blue/5 py-10 px-4">
       <div className="max-w-5xl mx-auto">
         {/* Back button — returns to the previous context (list or booking detail)
             instead of always jumping to the global list. */}
         <button
           onClick={() => router.back()}
-          className="mb-6 flex items-center text-brand-navy hover:text-brand-turquoise font-medium"
+          className="mb-6 flex items-center text-brand-navy hover:text-brand-blue font-medium"
         >
           <ArrowLeft className="h-4 w-4 mr-2" />
           Retour
@@ -244,7 +244,7 @@ export default function PayCommissionPage() {
             if (enabledOptions) params.set('options', enabledOptions);
             router.push(`/dashboard/search-advanced?${params.toString()}`);
           }}
-          className="mb-8 inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-brand-navy bg-brand-turquoise/5 hover:bg-brand-turquoise/10 rounded-lg transition-colors"
+          className="mb-8 inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-brand-navy bg-brand-blue/5 hover:bg-brand-blue/10 rounded-lg transition-colors"
         >
           <ArrowLeft className="h-4 w-4" />
           Modifier la réservation avant de payer
@@ -323,7 +323,7 @@ export default function PayCommissionPage() {
               onClick={() => setSelectedMethod('card')}
               className={`w-full text-left rounded-xl border-2 p-5 transition-all ${
                 selectedMethod === 'card'
-                  ? 'border-brand-turquoise bg-brand-turquoise/5'
+                  ? 'border-brand-blue bg-brand-blue/5'
                   : 'border-border bg-white hover:border-neutral-300'
               }`}
             >
@@ -331,7 +331,7 @@ export default function PayCommissionPage() {
                 <div className="flex items-center space-x-3">
                   <div
                     className={`w-10 h-10 rounded-full flex items-center justify-center ${
-                      selectedMethod === 'card' ? 'bg-brand-turquoise/10' : 'bg-neutral-100'
+                      selectedMethod === 'card' ? 'bg-brand-blue/10' : 'bg-neutral-100'
                     }`}
                   >
                     <CreditCard
@@ -347,7 +347,7 @@ export default function PayCommissionPage() {
                 </div>
                 <div
                   className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
-                    selectedMethod === 'card' ? 'border-brand-turquoise bg-brand-turquoise' : 'border-neutral-300'
+                    selectedMethod === 'card' ? 'border-brand-blue bg-brand-blue' : 'border-neutral-300'
                   }`}
                 >
                   {selectedMethod === 'card' && <div className="w-2 h-2 rounded-full bg-white" />}
@@ -360,7 +360,7 @@ export default function PayCommissionPage() {
               onClick={() => setSelectedMethod('transfer')}
               className={`w-full text-left rounded-xl border-2 p-5 transition-all ${
                 selectedMethod === 'transfer'
-                  ? 'border-brand-turquoise bg-brand-turquoise/5'
+                  ? 'border-brand-blue bg-brand-blue/5'
                   : 'border-border bg-white hover:border-neutral-300'
               }`}
             >
@@ -368,7 +368,7 @@ export default function PayCommissionPage() {
                 <div className="flex items-center space-x-3">
                   <div
                     className={`w-10 h-10 rounded-full flex items-center justify-center ${
-                      selectedMethod === 'transfer' ? 'bg-brand-turquoise/10' : 'bg-neutral-100'
+                      selectedMethod === 'transfer' ? 'bg-brand-blue/10' : 'bg-neutral-100'
                     }`}
                   >
                     <Building2
@@ -385,7 +385,7 @@ export default function PayCommissionPage() {
                 <div
                   className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                     selectedMethod === 'transfer'
-                      ? 'border-brand-turquoise bg-brand-turquoise'
+                      ? 'border-brand-blue bg-brand-blue'
                       : 'border-neutral-300'
                   }`}
                 >
@@ -405,7 +405,7 @@ export default function PayCommissionPage() {
                 <button
                   onClick={handlePayByCard}
                   disabled={paying}
-                  className="w-full py-3 bg-brand-turquoise text-brand-navy rounded-lg font-semibold hover:bg-brand-turquoise/90 disabled:bg-neutral-300 disabled:cursor-not-allowed flex items-center justify-center space-x-2 transition-colors"
+                  className="w-full py-3 bg-brand-navy text-white rounded-lg font-semibold hover:bg-brand-navy/90 disabled:bg-neutral-300 disabled:cursor-not-allowed flex items-center justify-center space-x-2 transition-colors"
                 >
                   {paying ? (
                     <>
@@ -575,7 +575,7 @@ export default function PayCommissionPage() {
             </div>
 
             {/* Booking fee box */}
-            <div className="bg-brand-turquoise rounded-xl p-5 text-white">
+            <div className="bg-brand-navy rounded-xl p-5 text-white">
               <p className="text-sm text-white/70 mb-1">Forfait par booking — à régler maintenant</p>
               <p className="text-3xl font-bold">{formatPrice(bookingFeeAmount, 'EUR')}</p>
               <p className="text-xs text-white/70 mt-1">
diff --git a/apps/frontend/app/[locale]/dashboard/booking/[id]/payment-success/page.tsx b/apps/frontend/app/[locale]/dashboard/booking/[id]/payment-success/page.tsx
index 9ac39ff..9f51c30 100644
--- a/apps/frontend/app/[locale]/dashboard/booking/[id]/payment-success/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/booking/[id]/payment-success/page.tsx
@@ -42,14 +42,14 @@ export default function PaymentSuccessPage() {
 
   if (!sessionId) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-brand-turquoise/5 to-indigo-100">
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-brand-blue/5 to-indigo-100">
         <div className="bg-white rounded-lg shadow-md p-8 max-w-md text-center">
           <AlertTriangle className="h-12 w-12 text-red-500 mx-auto mb-4" />
           <h2 className="text-xl font-bold text-brand-navy mb-2">Session invalide</h2>
           <p className="text-neutral-600 mb-4">Aucune session de paiement trouvee.</p>
           <button
             onClick={() => router.push('/dashboard/bookings')}
-            className="px-6 py-2 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90"
+            className="px-6 py-2 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90"
           >
             Retour aux bookings
           </button>
@@ -59,7 +59,7 @@ export default function PaymentSuccessPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-brand-turquoise/5 to-indigo-100 px-4">
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-brand-blue/5 to-indigo-100 px-4">
       <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full text-center">
         {status === 'confirming' && (
           <>
@@ -85,7 +85,7 @@ export default function PaymentSuccessPage() {
               avec votre demande de booking.
             </p>
 
-            <div className="bg-brand-turquoise/5 border border-brand-turquoise/30 rounded-lg p-4 mb-6">
+            <div className="bg-brand-blue/5 border border-brand-blue/30 rounded-lg p-4 mb-6">
               <div className="flex items-center justify-center space-x-2 text-brand-navy">
                 <Mail className="h-5 w-5" />
                 <span className="text-sm font-medium">Email envoye au transporteur</span>
@@ -97,7 +97,7 @@ export default function PaymentSuccessPage() {
 
             <button
               onClick={() => router.push('/dashboard/bookings')}
-              className="w-full px-6 py-3 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90 font-semibold flex items-center justify-center"
+              className="w-full px-6 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 font-semibold flex items-center justify-center"
             >
               Voir mes bookings
               <ArrowRight className="h-4 w-4 ml-2" />
@@ -127,7 +127,7 @@ export default function PaymentSuccessPage() {
                       setStatus('error');
                     });
                 }}
-                className="w-full px-6 py-2 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90"
+                className="w-full px-6 py-2 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90"
               >
                 Reessayer
               </button>
diff --git a/apps/frontend/app/[locale]/dashboard/booking/new/page.tsx b/apps/frontend/app/[locale]/dashboard/booking/new/page.tsx
index b5362e1..7c3aec3 100644
--- a/apps/frontend/app/[locale]/dashboard/booking/new/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/booking/new/page.tsx
@@ -234,13 +234,13 @@ function NewBookingPageContent() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-brand-turquoise/5 to-indigo-100 py-12 px-4">
+    <div className="min-h-screen bg-gradient-to-br from-brand-blue/5 to-indigo-100 py-12 px-4">
       <div className="max-w-4xl mx-auto">
         {/* Header */}
         <div className="mb-8">
           <button
             onClick={() => router.back()}
-            className="mb-4 flex items-center text-brand-navy hover:text-brand-turquoise font-medium"
+            className="mb-4 flex items-center text-brand-navy hover:text-brand-blue font-medium"
           >
             ← Retour aux résultats
           </button>
@@ -263,7 +263,7 @@ function NewBookingPageContent() {
                 <div className="flex items-center">
                   <div
                     className={`w-10 h-10 rounded-full flex items-center justify-center font-semibold ${
-                      currentStep >= step ? 'bg-brand-turquoise text-brand-navy' : 'bg-neutral-200 text-neutral-600'
+                      currentStep >= step ? 'bg-brand-navy text-white' : 'bg-neutral-200 text-neutral-600'
                     }`}
                   >
                     {step}
@@ -283,7 +283,7 @@ function NewBookingPageContent() {
                 {step < 3 && (
                   <div
                     className={`flex-1 h-1 mx-4 ${
-                      currentStep > step ? 'bg-brand-turquoise' : 'bg-neutral-200'
+                      currentStep > step ? 'bg-brand-blue' : 'bg-neutral-200'
                     }`}
                   />
                 )}
@@ -314,7 +314,7 @@ function NewBookingPageContent() {
 
               <div className="space-y-6">
                 {/* Carrier Info */}
-                <div className="bg-brand-turquoise/5 border-2 border-brand-turquoise/30 rounded-lg p-6">
+                <div className="bg-brand-blue/5 border-2 border-brand-blue/30 rounded-lg p-6">
                   <h3 className="text-lg font-semibold text-brand-navy mb-4">Transporteur</h3>
                   <div className="grid grid-cols-2 gap-4">
                     <div>
@@ -409,7 +409,7 @@ function NewBookingPageContent() {
                 <button
                   onClick={() => setCurrentStep(2)}
                   disabled={!canProceedToStep2}
-                  className="px-8 py-3 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90 disabled:bg-neutral-300 disabled:cursor-not-allowed font-semibold"
+                  className="px-8 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 disabled:bg-neutral-300 disabled:cursor-not-allowed font-semibold"
                 >
                   Continuer →
                 </button>
@@ -440,8 +440,8 @@ function NewBookingPageContent() {
                 <div
                   className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer ${
                     isDragging
-                      ? 'border-brand-turquoise bg-brand-turquoise/5'
-                      : 'border-neutral-300 hover:border-brand-turquoise hover:bg-neutral-50'
+                      ? 'border-brand-blue bg-brand-blue/5'
+                      : 'border-neutral-300 hover:border-brand-blue hover:bg-neutral-50'
                   }`}
                   onDragOver={e => {
                     e.preventDefault();
@@ -470,7 +470,7 @@ function NewBookingPageContent() {
                   />
                   <div className="flex flex-col items-center">
                     <svg
-                      className={`w-16 h-16 mb-4 transition-colors ${isDragging ? 'text-brand-turquoise' : 'text-neutral-400'}`}
+                      className={`w-16 h-16 mb-4 transition-colors ${isDragging ? 'text-brand-blue' : 'text-neutral-400'}`}
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
@@ -556,7 +556,7 @@ function NewBookingPageContent() {
                   value={formData.notes || ''}
                   onChange={e => setFormData(prev => ({ ...prev, notes: e.target.value }))}
                   rows={4}
-                  className="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-ring focus:border-brand-turquoise"
+                  className="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-ring focus:border-brand-blue"
                   placeholder="Ajoutez des instructions spéciales pour le transporteur..."
                 />
               </div>
@@ -571,7 +571,7 @@ function NewBookingPageContent() {
                 <button
                   onClick={() => setCurrentStep(3)}
                   disabled={!canProceedToStep3}
-                  className="px-8 py-3 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90 disabled:bg-neutral-300 disabled:cursor-not-allowed font-semibold"
+                  className="px-8 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 disabled:bg-neutral-300 disabled:cursor-not-allowed font-semibold"
                 >
                   Continuer →
                 </button>
@@ -586,7 +586,7 @@ function NewBookingPageContent() {
 
               <div className="space-y-6 mb-8">
                 {/* Summary */}
-                <div className="bg-brand-turquoise/5 border-2 border-brand-turquoise/30 rounded-lg p-6">
+                <div className="bg-brand-blue/5 border-2 border-brand-blue/30 rounded-lg p-6">
                   <h3 className="text-lg font-semibold text-brand-navy mb-4">Récapitulatif</h3>
                   <div className="space-y-3">
                     <div className="flex justify-between">
diff --git a/apps/frontend/app/[locale]/dashboard/bookings/[id]/page.tsx b/apps/frontend/app/[locale]/dashboard/bookings/[id]/page.tsx
index 6055b94..8b94282 100644
--- a/apps/frontend/app/[locale]/dashboard/bookings/[id]/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/bookings/[id]/page.tsx
@@ -198,9 +198,9 @@ export default function BookingDetailPage() {
                 <li className="flex gap-3">
                   <span
                     aria-hidden="true"
-                    className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-brand-turquoise/10"
+                    className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-brand-blue/10"
                   >
-                    <FileText className="size-3 text-brand-turquoise" />
+                    <FileText className="size-3 text-brand-blue" />
                   </span>
                   <div className="min-w-0">
                     <p className="text-body-sm font-medium text-brand-navy">
diff --git a/apps/frontend/app/[locale]/dashboard/notifications/page.tsx b/apps/frontend/app/[locale]/dashboard/notifications/page.tsx
index 596caa7..94a7242 100644
--- a/apps/frontend/app/[locale]/dashboard/notifications/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/notifications/page.tsx
@@ -100,7 +100,7 @@ export default function NotificationsPage() {
       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-brand-turquoise bg-brand-turquoise/5 hover:bg-brand-turquoise/10',
+      low: 'border-l-4 border-brand-blue bg-brand-blue/5 hover:bg-brand-blue/10',
     };
     return (
       colors[priority as keyof typeof colors] || 'border-l-4 border-neutral-300 hover:bg-neutral-100'
@@ -126,7 +126,7 @@ export default function NotificationsPage() {
       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-brand-turquoise`} />,
+      csv_booking_request_sent: <Mail className={`${iconClass} text-brand-blue`} />,
       rate_quote_expiring: <Clock className={`${iconClass} text-yellow-500`} />,
       document_uploaded: <FileText className={`${iconClass} text-neutral-600`} />,
       system_announcement: <Megaphone className={`${iconClass} text-purple-500`} />,
@@ -163,7 +163,7 @@ export default function NotificationsPage() {
         <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-brand-turquoise/10 rounded-lg">
+              <div className="p-3 bg-brand-blue/10 rounded-lg">
                 <Bell className="w-8 h-8 text-brand-navy" />
               </div>
               <div>
@@ -178,7 +178,7 @@ export default function NotificationsPage() {
               <button
                 onClick={() => markAllAsReadMutation.mutate()}
                 disabled={markAllAsReadMutation.isPending}
-                className="flex items-center space-x-2 px-4 py-2 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90 disabled:opacity-50 transition-colors"
+                className="flex items-center space-x-2 px-4 py-2 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 disabled:opacity-50 transition-colors"
               >
                 <CheckCheck className="w-5 h-5" />
                 <span>{t('markAllRead')}</span>
@@ -203,7 +203,7 @@ export default function NotificationsPage() {
                   }}
                   className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
                     selectedFilter === filter
-                      ? 'bg-brand-turquoise text-brand-navy shadow-sm'
+                      ? 'bg-brand-navy text-white shadow-sm'
                       : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
                   }`}
                 >
@@ -223,7 +223,7 @@ export default function NotificationsPage() {
           {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-brand-turquoise mx-auto mb-4" />
+                <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-brand-blue mx-auto mb-4" />
                 <p className="text-neutral-500">{t('loading')}</p>
               </div>
             </div>
@@ -246,7 +246,7 @@ export default function NotificationsPage() {
                   key={notification.id}
                   onClick={() => handleNotificationClick(notification)}
                   className={`p-6 transition-all cursor-pointer group ${
-                    !notification.read ? 'bg-brand-turquoise/5/50' : ''
+                    !notification.read ? 'bg-brand-blue/5/50' : ''
                   } ${getPriorityColor(notification.priority || 'low')}`}
                 >
                   <div className="flex items-start space-x-4">
@@ -261,7 +261,7 @@ export default function NotificationsPage() {
                             {notification.title}
                           </h3>
                           {!notification.read && (
-                            <span className="flex items-center space-x-1 px-2 py-1 bg-brand-turquoise text-brand-navy text-xs font-medium rounded-full">
+                            <span className="flex items-center space-x-1 px-2 py-1 bg-brand-navy 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>
@@ -312,7 +312,7 @@ export default function NotificationsPage() {
                                     ? 'bg-orange-100 text-orange-700'
                                     : notification.priority === 'medium'
                                       ? 'bg-yellow-100 text-yellow-700'
-                                      : 'bg-brand-turquoise/10 text-brand-navy'
+                                      : 'bg-brand-blue/10 text-brand-navy'
                               }`}
                             >
                               {getPriorityLabel(notification.priority)}
@@ -361,7 +361,7 @@ export default function NotificationsPage() {
                 <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-neutral-300 rounded-lg hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  className="flex items-center space-x-1 px-4 py-2 text-sm font-medium text-brand-navy bg-white border border-border rounded-lg hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                 >
                   <ChevronLeft className="w-4 h-4" />
                   <span>{t('pagination.previous')}</span>
@@ -385,7 +385,7 @@ export default function NotificationsPage() {
                         onClick={() => setCurrentPage(pageNum)}
                         className={`w-10 h-10 text-sm font-medium rounded-lg transition-colors ${
                           currentPage === pageNum
-                            ? 'bg-brand-turquoise text-brand-navy'
+                            ? 'bg-brand-navy text-white'
                             : 'bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-300'
                         }`}
                       >
@@ -397,7 +397,7 @@ export default function NotificationsPage() {
                 <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-neutral-300 rounded-lg hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  className="flex items-center space-x-1 px-4 py-2 text-sm font-medium text-brand-navy bg-white border border-border rounded-lg hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                 >
                   <span>{t('pagination.next')}</span>
                   <ChevronRight className="w-4 h-4" />
diff --git a/apps/frontend/app/[locale]/dashboard/page.tsx b/apps/frontend/app/[locale]/dashboard/page.tsx
index c66e9b2..3874ab4 100644
--- a/apps/frontend/app/[locale]/dashboard/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/page.tsx
@@ -6,22 +6,23 @@ import { dashboardApi } from '@/lib/api';
 import { Link, useRouter } from '@/i18n/navigation';
 import { useTranslations, useLocale } from 'next-intl';
 import {
+  AlertTriangle,
   ArrowRight,
   Clock,
+  Container as ContainerIcon,
+  Euro,
   Package,
-  PackageCheck,
-  PackageX,
   Plus,
+  Ship,
   TrendingUp,
   Weight,
 } from 'lucide-react';
 import {
+  Area,
+  AreaChart,
   Bar,
   BarChart,
   CartesianGrid,
-  Cell,
-  Pie,
-  PieChart,
   ResponsiveContainer,
   Tooltip,
   XAxis,
@@ -36,7 +37,14 @@ import { EmptyState, Skeleton } from '@/components/ui/states';
 import { StatCard } from '@/components/data/stat-card';
 import { useSubscription } from '@/lib/context/subscription-context';
 import ExportButton from '@/components/ExportButton';
-import { CHART_COLORS, CHART_UI, chartAxisProps, chartTooltipStyle } from '@/lib/chart-colors';
+import {
+  CHART_UI,
+  MARK,
+  SERIES,
+  STATUS,
+  chartAxisProps,
+  chartTooltipStyle,
+} from '@/lib/chart-colors';
 
 export default function DashboardPage() {
   const router = useRouter();
@@ -50,6 +58,28 @@ export default function DashboardPage() {
     }
   }, [subLoading, hasFeature, router]);
 
+  // Indicateurs de tete : ils portent une variation mensuelle, donc une
+  // tendance. Cet endpoint existait deja cote backend sans etre consomme.
+  const { data: kpis, isLoading: kpisLoading } = useQuery({
+    queryKey: ['dashboard', 'kpis'],
+    queryFn: () => dashboardApi.getKPIs(),
+  });
+
+  const { data: volume, isLoading: volumeLoading } = useQuery({
+    queryKey: ['dashboard', 'bookings-chart'],
+    queryFn: () => dashboardApi.getBookingsChart(),
+  });
+
+  const { data: lanes, isLoading: lanesLoading } = useQuery({
+    queryKey: ['dashboard', 'top-trade-lanes'],
+    queryFn: () => dashboardApi.getTopTradeLanes(),
+  });
+
+  const { data: alerts } = useQuery({
+    queryKey: ['dashboard', 'alerts'],
+    queryFn: () => dashboardApi.getAlerts(),
+  });
+
   const { data: csvKpis, isLoading: csvKpisLoading } = useQuery({
     queryKey: ['dashboard', 'csv-booking-kpis'],
     queryFn: () => dashboardApi.getCsvBookingKPIs(),
@@ -60,39 +90,61 @@ export default function DashboardPage() {
     queryFn: () => dashboardApi.getTopCarriers(),
   });
 
-  const numberFormat = new Intl.NumberFormat(locale === 'fr' ? 'fr-FR' : 'en-US');
+  const intl = locale === 'fr' ? 'fr-FR' : 'en-US';
+  const numberFormat = new Intl.NumberFormat(intl);
+  const currencyFormat = new Intl.NumberFormat(intl, {
+    style: 'currency',
+    currency: 'EUR',
+    maximumFractionDigits: 0,
+  });
+  const cbmFormat = new Intl.NumberFormat(intl, { maximumFractionDigits: 1 });
 
-  const totalBookings =
-    (csvKpis?.totalAccepted ?? 0) + (csvKpis?.totalRejected ?? 0) + (csvKpis?.totalPending ?? 0);
+  /**
+   * N'affiche une variation que lorsqu'elle compare quelque chose : deux
+   * periodes vides donnent 0 %, un badge vert qui ne veut rien dire.
+   */
+  const trendOf = (value: number | undefined, change: number | undefined, positiveIsGood = true) =>
+    kpis && ((value ?? 0) !== 0 || (change ?? 0) !== 0)
+      ? { value: change ?? 0, label: t('kpi.vsLastMonth'), positiveIsGood }
+      : undefined;
 
-  const statusDistribution = csvKpis
-    ? [
-        {
-          name: t('charts.distribution.accepted'),
-          value: csvKpis.totalAccepted,
-          color: CHART_COLORS.success,
-        },
-        {
-          name: t('charts.distribution.rejected'),
-          value: csvKpis.totalRejected,
-          color: CHART_COLORS.danger,
-        },
-        {
-          name: t('charts.distribution.pending'),
-          value: csvKpis.totalPending,
-          color: CHART_COLORS.warning,
-        },
-      ]
-    : [];
+  // Le backend renvoie des cles ISO `YYYY-MM` : le nom du mois se compose ici,
+  // dans la langue de l'utilisateur.
+  const monthFormat = new Intl.DateTimeFormat(intl, { month: 'short' });
+  const formatMonth = (iso: string) => {
+    const [year, month] = iso.split('-').map(Number);
+    if (!year || !month) return iso;
+    return monthFormat.format(new Date(year, month - 1, 1));
+  };
 
-  const weightDataKey = t('charts.weightByCarrier.weight');
+  const volumeSeries = t('charts.volume.series');
+  const volumeData = (volume?.labels ?? []).map((label, i) => ({
+    label: formatMonth(label),
+    [volumeSeries]: volume?.data?.[i] ?? 0,
+  }));
+  const hasVolume = volumeData.some(d => (d[volumeSeries] as number) > 0);
 
-  const carrierWeightData = topCarriers
-    ? topCarriers.slice(0, 5).map(c => ({
-        name: c.carrierName.length > 15 ? c.carrierName.slice(0, 15) + '…' : c.carrierName,
-        [weightDataKey]: Math.round(c.totalWeightKG),
-      }))
-    : [];
+  const laneSeries = t('charts.lanes.series');
+  const laneData = (lanes ?? []).slice(0, 5).map(lane => ({
+    route: lane.route,
+    [laneSeries]: lane.bookingCount,
+  }));
+
+  // Etats des demandes : trois parts d'un tout, avec le taux d'acceptation en
+  // chiffre de tete. Un anneau obligeait a comparer des angles ; une barre
+  // empilee legendee se lit d'un coup.
+  const accepted = csvKpis?.totalAccepted ?? 0;
+  const rejected = csvKpis?.totalRejected ?? 0;
+  const pending = csvKpis?.totalPending ?? 0;
+  const totalRequests = accepted + rejected + pending;
+
+  const statusParts = [
+    { key: 'accepted', label: t('charts.distribution.accepted'), value: accepted, color: STATUS.good },
+    { key: 'pending', label: t('charts.distribution.pending'), value: pending, color: STATUS.warning },
+    { key: 'rejected', label: t('charts.distribution.rejected'), value: rejected, color: STATUS.critical },
+  ];
+
+  const openAlerts = alerts ?? [];
 
   return (
     <>
@@ -112,7 +164,7 @@ export default function DashboardPage() {
                 {
                   key: 'totalWeightKG',
                   label: t('export.totalWeight'),
-                  format: v => v?.toLocaleString(locale === 'fr' ? 'fr-FR' : 'en-US') || '0',
+                  format: v => v?.toLocaleString(intl) || '0',
                 },
                 {
                   key: 'totalVolumeCBM',
@@ -142,40 +194,158 @@ export default function DashboardPage() {
       />
 
       <div className="flex flex-col gap-6">
-        {/* Indicateurs primaires : les quatre chiffres qui repondent a « ou en
-            sommes-nous ». Alignes a gauche pour se comparer en colonne. */}
+        {/* Ce qui demande une action passe avant ce qui informe. */}
+        {openAlerts.length > 0 && <AlertsStrip alerts={openAlerts} />}
+
+        {/* Indicateurs de tete : chacun porte sa variation mensuelle. */}
         <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
           <StatCard
-            label={t('performance.totalBookings')}
-            value={numberFormat.format(totalBookings)}
+            label={t('kpi.bookingsThisMonth')}
+            value={numberFormat.format(kpis?.bookingsThisMonth ?? 0)}
+            trend={trendOf(kpis?.bookingsThisMonth, kpis?.bookingsThisMonthChange)}
+            hint={t('kpi.vsLastMonth')}
             icon={Package}
-            loading={csvKpisLoading}
+            loading={kpisLoading}
           />
           <StatCard
-            label={t('kpi.accepted')}
-            value={numberFormat.format(csvKpis?.totalAccepted ?? 0)}
-            hint={t('kpi.thisMonth', { count: csvKpis?.acceptedThisMonth ?? 0 })}
-            icon={PackageCheck}
-            loading={csvKpisLoading}
+            label={t('kpi.volume')}
+            value={`${cbmFormat.format(kpis?.volumeCBM ?? 0)} CBM`}
+            trend={trendOf(kpis?.volumeCBM, kpis?.volumeCBMChange)}
+            hint={t('kpi.vsLastMonth')}
+            icon={ContainerIcon}
+            loading={kpisLoading}
           />
           <StatCard
-            label={t('kpi.rejected')}
-            value={numberFormat.format(csvKpis?.totalRejected ?? 0)}
-            hint={t('kpi.thisMonth', { count: csvKpis?.rejectedThisMonth ?? 0 })}
-            icon={PackageX}
-            loading={csvKpisLoading}
+            label={t('kpi.revenue')}
+            value={currencyFormat.format(kpis?.estimatedRevenue ?? 0)}
+            trend={trendOf(kpis?.estimatedRevenue, kpis?.estimatedRevenueChange)}
+            hint={t('kpi.vsLastMonth')}
+            icon={Euro}
+            loading={kpisLoading}
           />
           <StatCard
-            label={t('kpi.pending')}
-            value={numberFormat.format(csvKpis?.totalPending ?? 0)}
-            hint={t('kpi.acceptanceRate', { rate: (csvKpis?.acceptanceRate ?? 0).toFixed(1) })}
+            label={t('kpi.pendingConfirmations')}
+            value={numberFormat.format(kpis?.pendingConfirmations ?? 0)}
+            // Une hausse des dossiers en attente n'est pas une bonne nouvelle :
+            // la couleur de la variation doit s'inverser.
+            trend={trendOf(kpis?.pendingConfirmations, kpis?.pendingConfirmationsChange, false)}
+            hint={t('kpi.vsLastMonth')}
             icon={Clock}
-            loading={csvKpisLoading}
+            loading={kpisLoading}
           />
         </section>
 
-        {/* Indicateurs secondaires : volumetrie et performance, en bandeau
-            compact pour ne pas concurrencer la rangee primaire. */}
+        {/* Evolution a gauche (la question « ou va-t-on »), etat des demandes a
+            droite (la question « ou en est-on »). */}
+        <section className="grid gap-4 lg:grid-cols-3">
+          <Card className="lg:col-span-2">
+            <CardHeader className="pb-2">
+              <CardTitle>{t('charts.volume.title')}</CardTitle>
+              <CardDescription>{t('charts.volume.description')}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {volumeLoading ? (
+                <Skeleton className="h-56 w-full" />
+              ) : !hasVolume ? (
+                <EmptyState size="sm" icon={TrendingUp} title={t('charts.volume.empty')} />
+              ) : (
+                <ResponsiveContainer width="100%" height={224}>
+                  <AreaChart data={volumeData} margin={{ top: 8, right: 8, bottom: 0, left: 0 }}>
+                    <defs>
+                      <linearGradient id="volumeFill" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stopColor={SERIES.primary} stopOpacity={0.18} />
+                        <stop offset="100%" stopColor={SERIES.primary} stopOpacity={0} />
+                      </linearGradient>
+                    </defs>
+                    {/* Seules les horizontales aident a lire une hauteur. */}
+                    <CartesianGrid strokeDasharray="3 3" stroke={CHART_UI.grid} vertical={false} />
+                    <XAxis dataKey="label" {...chartAxisProps} />
+                    <YAxis width={40} allowDecimals={false} {...chartAxisProps} />
+                    <Tooltip
+                      {...chartTooltipStyle}
+                      cursor={{ stroke: CHART_UI.border, strokeWidth: 1 }}
+                    />
+                    <Area
+                      type="monotone"
+                      dataKey={volumeSeries}
+                      stroke={SERIES.primary}
+                      strokeWidth={MARK.strokeWidth}
+                      fill="url(#volumeFill)"
+                      dot={false}
+                      activeDot={{
+                        r: MARK.activeDotRadius,
+                        fill: SERIES.primary,
+                        stroke: CHART_UI.surface,
+                        strokeWidth: 2,
+                      }}
+                    />
+                  </AreaChart>
+                </ResponsiveContainer>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle>{t('charts.status.title')}</CardTitle>
+              <CardDescription>{t('charts.status.description')}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {csvKpisLoading ? (
+                <Skeleton className="h-56 w-full" />
+              ) : totalRequests === 0 ? (
+                <EmptyState size="sm" icon={Package} title={t('topCarriers.empty.title')} />
+              ) : (
+                <div className="flex h-56 flex-col justify-center">
+                  <p className="text-label uppercase text-neutral-500">
+                    {t('charts.status.rateLabel')}
+                  </p>
+                  <p className="mt-1 font-heading text-4xl font-extrabold tabular-nums text-brand-navy">
+                    {(csvKpis?.acceptanceRate ?? 0).toFixed(1)}&nbsp;%
+                  </p>
+
+                  {/* Barre empilee. L'ecart de 2 px entre segments evite que
+                      deux etats se touchent et paraissent continus. */}
+                  <div className="mt-5 flex h-2.5 gap-0.5 overflow-hidden rounded-full">
+                    {statusParts
+                      .filter(p => p.value > 0)
+                      .map(part => (
+                        <div
+                          key={part.key}
+                          className="h-full first:rounded-l-full last:rounded-r-full"
+                          style={{
+                            width: `${(part.value / totalRequests) * 100}%`,
+                            backgroundColor: part.color,
+                          }}
+                        />
+                      ))}
+                  </div>
+
+                  {/* Legende chiffree : la couleur ne porte jamais seule
+                      l'information. */}
+                  <ul className="mt-5 space-y-2.5">
+                    {statusParts.map(part => (
+                      <li key={part.key} className="flex items-center gap-2.5">
+                        <span
+                          aria-hidden="true"
+                          className="size-2.5 shrink-0 rounded-sm"
+                          style={{ backgroundColor: part.color }}
+                        />
+                        <span className="flex-1 text-body-sm text-neutral-600">{part.label}</span>
+                        <span className="font-heading text-body-sm font-semibold tabular-nums text-brand-navy">
+                          {numberFormat.format(part.value)}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </section>
+
+        {/* Volumetrie, en bandeau compact : utile mais sans tendance, donc sans
+            le poids visuel d'une tuile. */}
         <section className="grid gap-px overflow-hidden rounded-lg border border-border bg-border sm:grid-cols-3">
           <SecondaryStat
             label={t('performance.acceptanceRate')}
@@ -185,7 +355,9 @@ export default function DashboardPage() {
           <SecondaryStat
             label={t('kpi.totalWeight')}
             value={
-              csvKpisLoading ? null : `${numberFormat.format(csvKpis?.totalWeightAcceptedKG ?? 0)} kg`
+              csvKpisLoading
+                ? null
+                : `${numberFormat.format(csvKpis?.totalWeightAcceptedKG ?? 0)} kg`
             }
             icon={Weight}
           />
@@ -200,152 +372,201 @@ export default function DashboardPage() {
 
         <section className="grid gap-4 lg:grid-cols-2">
           <Card>
-            <CardHeader className="pb-3">
-              <CardTitle>{t('charts.distribution.title')}</CardTitle>
-              <CardDescription>{t('charts.distribution.description')}</CardDescription>
+            <CardHeader className="pb-2">
+              <CardTitle>{t('charts.lanes.title')}</CardTitle>
+              <CardDescription>{t('charts.lanes.description')}</CardDescription>
             </CardHeader>
             <CardContent>
-              {csvKpisLoading ? (
-                <Skeleton className="h-52 w-full" />
-              ) : totalBookings === 0 ? (
-                <EmptyState size="sm" icon={Package} title={t('topCarriers.empty.title')} />
+              {lanesLoading ? (
+                <Skeleton className="h-56 w-full" />
+              ) : laneData.length === 0 ? (
+                <EmptyState size="sm" icon={Ship} title={t('charts.lanes.empty')} />
               ) : (
-                <ResponsiveContainer width="100%" height={208}>
-                  <PieChart>
-                    <Pie
-                      data={statusDistribution}
-                      cx="50%"
-                      cy="50%"
-                      labelLine={false}
-                      label={({ name, percent }: any) =>
-                        `${name} ${((percent || 0) * 100).toFixed(0)}%`
-                      }
-                      outerRadius={72}
-                      innerRadius={44}
-                      paddingAngle={2}
-                      dataKey="value"
-                    >
-                      {statusDistribution.map(entry => (
-                        <Cell key={entry.name} fill={entry.color} stroke={CHART_UI.surface} />
-                      ))}
-                    </Pie>
-                    <Tooltip {...chartTooltipStyle} />
-                  </PieChart>
+                // Barres horizontales : les libelles de route sont longs et se
+                // lisent a plat, sans rotation ni troncature.
+                <ResponsiveContainer width="100%" height={224}>
+                  <BarChart
+                    data={laneData}
+                    layout="vertical"
+                    margin={{ top: 4, right: 16, bottom: 0, left: 0 }}
+                    barCategoryGap="28%"
+                  >
+                    <CartesianGrid strokeDasharray="3 3" stroke={CHART_UI.grid} horizontal={false} />
+                    <XAxis type="number" allowDecimals={false} {...chartAxisProps} />
+                    <YAxis
+                      type="category"
+                      dataKey="route"
+                      width={110}
+                      {...chartAxisProps}
+                      tick={{ fontSize: 11, fill: CHART_UI.axis }}
+                    />
+                    <Tooltip {...chartTooltipStyle} cursor={{ fill: CHART_UI.grid }} />
+                    <Bar
+                      dataKey={laneSeries}
+                      fill={SERIES.primary}
+                      radius={[0, MARK.barRadius, MARK.barRadius, 0]}
+                      maxBarSize={18}
+                    />
+                  </BarChart>
                 </ResponsiveContainer>
               )}
             </CardContent>
           </Card>
 
           <Card>
-            <CardHeader className="pb-3">
-              <CardTitle>{t('charts.weightByCarrier.title')}</CardTitle>
-              <CardDescription>{t('charts.weightByCarrier.description')}</CardDescription>
+            <CardHeader className="flex-row items-start justify-between gap-3 pb-2">
+              <div className="min-w-0">
+                <CardTitle>{t('topCarriers.title')}</CardTitle>
+                <CardDescription>{t('topCarriers.description')}</CardDescription>
+              </div>
+              <Button asChild variant="ghost" size="sm" className="shrink-0">
+                <Link href="/dashboard/bookings">
+                  {t('topCarriers.viewAll')}
+                  <ArrowRight />
+                </Link>
+              </Button>
             </CardHeader>
-            <CardContent>
+
+            <CardContent className="p-0">
               {carriersLoading ? (
-                <Skeleton className="h-52 w-full" />
-              ) : carrierWeightData.length === 0 ? (
-                <EmptyState size="sm" icon={Weight} title={t('topCarriers.empty.title')} />
+                <div className="divide-y divide-border">
+                  {Array.from({ length: 3 }).map((_, i) => (
+                    <div key={i} className="px-5 py-3">
+                      <Skeleton className="h-10 w-full" />
+                    </div>
+                  ))}
+                </div>
+              ) : topCarriers && topCarriers.length > 0 ? (
+                <ul className="divide-y divide-border">
+                  {topCarriers.slice(0, 5).map((carrier, index) => (
+                    <li
+                      key={carrier.carrierName}
+                      className="flex items-center gap-3 px-5 py-3 transition-colors hover:bg-neutral-50"
+                    >
+                      <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-body-xs font-semibold text-neutral-600">
+                        {index + 1}
+                      </span>
+
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate text-body-sm font-medium text-brand-navy">
+                          {carrier.carrierName}
+                        </p>
+                        <p className="mt-0.5 truncate text-body-xs text-neutral-500">
+                          {t('topCarriers.bookingsCount', { count: carrier.totalBookings })}
+                          {' · '}
+                          {numberFormat.format(carrier.totalWeightKG)} kg
+                        </p>
+                      </div>
+
+                      <div className="flex shrink-0 items-center gap-1.5">
+                        <Badge variant="success">{carrier.acceptedBookings}</Badge>
+                        {carrier.rejectedBookings > 0 && (
+                          <Badge variant="danger">{carrier.rejectedBookings}</Badge>
+                        )}
+                      </div>
+
+                      <div className="hidden w-24 shrink-0 text-right sm:block">
+                        <p className="text-body-sm font-medium text-brand-navy">
+                          {carrier.acceptanceRate.toFixed(0)} %
+                        </p>
+                        <p className="text-body-xs text-neutral-500">
+                          ${carrier.avgPriceUSD.toFixed(0)}
+                        </p>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
               ) : (
-                <ResponsiveContainer width="100%" height={208}>
-                  <BarChart data={carrierWeightData} margin={{ top: 4, right: 4, bottom: 0, left: 0 }}>
-                    <CartesianGrid strokeDasharray="3 3" stroke={CHART_UI.grid} vertical={false} />
-                    <XAxis dataKey="name" interval={0} height={44} {...chartAxisProps} />
-                    <YAxis width={48} {...chartAxisProps} />
-                    <Tooltip {...chartTooltipStyle} cursor={{ fill: CHART_UI.grid }} />
-                    <Bar dataKey={weightDataKey} fill={CHART_COLORS.primary} radius={[4, 4, 0, 0]} />
-                  </BarChart>
-                </ResponsiveContainer>
+                <EmptyState
+                  icon={Package}
+                  title={t('topCarriers.empty.title')}
+                  description={t('topCarriers.empty.description')}
+                  action={
+                    <Button asChild size="sm">
+                      <Link href="/dashboard/search-advanced">
+                        <Plus />
+                        {t('topCarriers.empty.cta')}
+                      </Link>
+                    </Button>
+                  }
+                />
               )}
             </CardContent>
           </Card>
         </section>
-
-        <Card>
-          <CardHeader className="flex-row items-start justify-between gap-3 pb-3">
-            <div className="min-w-0">
-              <CardTitle>{t('topCarriers.title')}</CardTitle>
-              <CardDescription>{t('topCarriers.description')}</CardDescription>
-            </div>
-            <Button asChild variant="ghost" size="sm" className="shrink-0">
-              <Link href="/dashboard/bookings">
-                {t('topCarriers.viewAll')}
-                <ArrowRight />
-              </Link>
-            </Button>
-          </CardHeader>
-
-          <CardContent className="p-0">
-            {carriersLoading ? (
-              <div className="divide-y divide-border">
-                {Array.from({ length: 3 }).map((_, i) => (
-                  <div key={i} className="px-5 py-3">
-                    <Skeleton className="h-10 w-full" />
-                  </div>
-                ))}
-              </div>
-            ) : topCarriers && topCarriers.length > 0 ? (
-              <ul className="divide-y divide-border">
-                {topCarriers.slice(0, 5).map((carrier, index) => (
-                  <li
-                    key={carrier.carrierName}
-                    className="flex items-center gap-3 px-5 py-3 transition-colors hover:bg-neutral-50"
-                  >
-                    <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-body-xs font-semibold text-neutral-600">
-                      {index + 1}
-                    </span>
-
-                    <div className="min-w-0 flex-1">
-                      <p className="truncate text-body-sm font-medium text-brand-navy">
-                        {carrier.carrierName}
-                      </p>
-                      <p className="mt-0.5 truncate text-body-xs text-neutral-500">
-                        {t('topCarriers.bookingsCount', { count: carrier.totalBookings })}
-                        {' · '}
-                        {numberFormat.format(carrier.totalWeightKG)} kg
-                      </p>
-                    </div>
-
-                    <div className="flex shrink-0 items-center gap-1.5">
-                      <Badge variant="success">{carrier.acceptedBookings}</Badge>
-                      {carrier.rejectedBookings > 0 && (
-                        <Badge variant="danger">{carrier.rejectedBookings}</Badge>
-                      )}
-                    </div>
-
-                    <div className="hidden w-24 shrink-0 text-right sm:block">
-                      <p className="text-body-sm font-medium text-brand-navy">
-                        {carrier.acceptanceRate.toFixed(0)} %
-                      </p>
-                      <p className="text-body-xs text-neutral-500">
-                        ${carrier.avgPriceUSD.toFixed(0)}
-                      </p>
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <EmptyState
-                icon={Package}
-                title={t('topCarriers.empty.title')}
-                description={t('topCarriers.empty.description')}
-                action={
-                  <Button asChild size="sm">
-                    <Link href="/dashboard/search-advanced">
-                      <Plus />
-                      {t('topCarriers.empty.cta')}
-                    </Link>
-                  </Button>
-                }
-              />
-            )}
-          </CardContent>
-        </Card>
       </div>
     </>
   );
 }
 
+/** Bandeau des points a traiter, en tete de tableau de bord. */
+function AlertsStrip({
+  alerts,
+}: {
+  alerts: Array<{
+    id: string;
+    severity: 'critical' | 'high' | 'medium' | 'low';
+    titleKey: string;
+    messageKey: string;
+    messageParams?: Record<string, string | number>;
+    bookingId?: string;
+    bookingNumber?: string;
+  }>;
+}) {
+  const t = useTranslations('dashboard.home.alerts');
+
+  // Le plus urgent d'abord : trois alertes suffisent en tete de page, le reste
+  // se consulte dans les listes concernees.
+  const order = { critical: 0, high: 1, medium: 2, low: 3 } as const;
+  const sorted = [...alerts].sort((a, b) => order[a.severity] - order[b.severity]).slice(0, 3);
+
+  const tone: Record<string, string> = {
+    critical: 'text-destructive',
+    high: 'text-destructive',
+    medium: 'text-amber-600',
+    low: 'text-neutral-500',
+  };
+
+  return (
+    <section className="overflow-hidden rounded-lg border border-border bg-white">
+      <div className="flex items-center gap-2 border-b border-border px-5 py-3">
+        <AlertTriangle className="size-4 shrink-0 text-amber-500" aria-hidden="true" />
+        <p className="text-body-sm font-semibold text-brand-navy">{t('title')}</p>
+        <p className="truncate text-body-xs text-neutral-500">
+          {t('description', { count: alerts.length })}
+        </p>
+      </div>
+      <ul className="divide-y divide-border">
+        {sorted.map(alert => (
+          <li key={alert.id} className="flex items-center gap-3 px-5 py-3">
+            {/* Severite : jamais la couleur seule — un libelle l'accompagne. */}
+            <span
+              className={`w-16 shrink-0 text-label uppercase ${tone[alert.severity] ?? 'text-neutral-500'}`}
+            >
+              {t(`severity.${alert.severity}` as any)}
+            </span>
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-body-sm font-medium text-brand-navy">
+                {t(`items.${alert.titleKey}` as any)}
+              </p>
+              <p className="truncate text-body-xs text-neutral-500">
+                {t(`items.${alert.messageKey}` as any, alert.messageParams ?? {})}
+              </p>
+            </div>
+            {alert.bookingId && (
+              <Button asChild variant="outline" size="sm" className="shrink-0">
+                <Link href={`/dashboard/bookings/${alert.bookingId}`}>
+                  {alert.bookingNumber ?? <ArrowRight />}
+                </Link>
+              </Button>
+            )}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
 /** Indicateur secondaire, en bandeau, sans le poids visuel d'une carte. */
 function SecondaryStat({
   label,
diff --git a/apps/frontend/app/[locale]/dashboard/profile/page.tsx b/apps/frontend/app/[locale]/dashboard/profile/page.tsx
index 60dc319..22b4536 100644
--- a/apps/frontend/app/[locale]/dashboard/profile/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/profile/page.tsx
@@ -142,7 +142,7 @@ export default function ProfilePage() {
     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-brand-turquoise mx-auto mb-4"></div>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-blue mx-auto mb-4"></div>
           <p className="text-neutral-600">{t('loading')}</p>
         </div>
       </div>
@@ -156,7 +156,7 @@ export default function ProfilePage() {
           <p className="text-red-600 mb-4">{t('loadError')}</p>
           <button
             onClick={() => window.location.reload()}
-            className="px-4 py-2 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90"
+            className="px-4 py-2 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90"
           >
             {t('retry')}
           </button>
@@ -204,7 +204,7 @@ export default function ProfilePage() {
 
       <div className="bg-white rounded-lg shadow p-6">
         <div className="flex items-center space-x-4">
-          <div className="w-16 h-16 bg-brand-turquoise rounded-full flex items-center justify-center text-white text-2xl font-bold">
+          <div className="w-16 h-16 bg-brand-blue rounded-full flex items-center justify-center text-white text-2xl font-bold">
             {user?.firstName?.[0]}
             {user?.lastName?.[0]}
           </div>
@@ -214,7 +214,7 @@ export default function ProfilePage() {
             </h2>
             <p className="text-neutral-600">{user?.email}</p>
             <div className="flex items-center space-x-2 mt-2">
-              <span className="px-3 py-1 text-xs font-medium text-brand-navy bg-brand-turquoise/10 rounded-full">
+              <span className="px-3 py-1 text-xs font-medium text-brand-navy bg-brand-blue/10 rounded-full">
                 {user?.role}
               </span>
               <span className="px-3 py-1 text-xs font-medium text-green-800 bg-green-100 rounded-full">
@@ -232,7 +232,7 @@ export default function ProfilePage() {
               onClick={() => setActiveTab('profile')}
               className={`py-4 px-1 border-b-2 font-medium text-sm ${
                 activeTab === 'profile'
-                  ? 'border-brand-turquoise text-brand-navy'
+                  ? 'border-brand-blue text-brand-navy'
                   : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300'
               }`}
             >
@@ -242,7 +242,7 @@ export default function ProfilePage() {
               onClick={() => setActiveTab('password')}
               className={`py-4 px-1 border-b-2 font-medium text-sm ${
                 activeTab === 'password'
-                  ? 'border-brand-turquoise text-brand-navy'
+                  ? 'border-brand-blue text-brand-navy'
                   : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300'
               }`}
             >
@@ -314,7 +314,7 @@ export default function ProfilePage() {
                 <button
                   type="submit"
                   disabled={updateProfileMutation.isPending}
-                  className="px-6 py-2 bg-brand-turquoise text-brand-navy font-medium rounded-lg hover:bg-brand-turquoise/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-6 py-2 bg-brand-navy text-white font-medium rounded-lg hover:bg-brand-navy/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   {updateProfileMutation.isPending
                     ? t('profileForm.saving')
@@ -437,7 +437,7 @@ export default function ProfilePage() {
                 <button
                   type="submit"
                   disabled={updatePasswordMutation.isPending}
-                  className="px-6 py-2 bg-brand-turquoise text-brand-navy font-medium rounded-lg hover:bg-brand-turquoise/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-6 py-2 bg-brand-navy text-white font-medium rounded-lg hover:bg-brand-navy/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   {updatePasswordMutation.isPending
                     ? t('passwordForm.submitting')
diff --git a/apps/frontend/app/[locale]/dashboard/search-advanced/page.tsx b/apps/frontend/app/[locale]/dashboard/search-advanced/page.tsx
index 92b29af..b81037a 100644
--- a/apps/frontend/app/[locale]/dashboard/search-advanced/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/search-advanced/page.tsx
@@ -430,13 +430,13 @@ export default function AdvancedSearchPage() {
               onClick={() => selectDirection(value)}
               className={`text-left p-6 rounded-xl border-2 transition-colors ${
                 isSelected
-                  ? 'border-brand-turquoise bg-brand-turquoise/5'
-                  : 'border-border hover:border-brand-turquoise hover:bg-neutral-50'
+                  ? 'border-brand-blue bg-brand-blue/5'
+                  : 'border-border hover:border-brand-blue hover:bg-neutral-50'
               }`}
             >
               <div
                 className={`w-12 h-12 rounded-full flex items-center justify-center mb-4 ${
-                  isSelected ? 'bg-brand-turquoise text-brand-navy' : 'bg-neutral-100 text-neutral-600'
+                  isSelected ? 'bg-brand-navy text-white' : 'bg-neutral-100 text-neutral-600'
                 }`}
               >
                 <Icon className="h-6 w-6" />
@@ -461,7 +461,7 @@ export default function AdvancedSearchPage() {
           <button
             type="button"
             onClick={() => setCurrentStep(0)}
-            className="text-xs font-medium px-3 py-1 rounded-full bg-brand-turquoise/10 text-brand-navy hover:bg-brand-turquoise/20"
+            className="text-xs font-medium px-3 py-1 rounded-full bg-brand-blue/10 text-brand-navy hover:bg-brand-blue/20"
           >
             {t(`step0.${direction.toLowerCase() as 'export' | 'import'}.title`)} · {t('step0.change')}
           </button>
@@ -493,7 +493,7 @@ export default function AdvancedSearchPage() {
               onFocus={() => setShowOriginDropdown(true)}
               onBlur={() => setTimeout(() => setShowOriginDropdown(false), 200)}
               placeholder={t('step1.originPlaceholder')}
-              className={`w-full px-3 py-2 border rounded-md focus:ring-ring focus:border-brand-turquoise ${
+              className={`w-full px-3 py-2 border rounded-md focus:ring-ring focus:border-brand-blue ${
                 searchForm.origin ? 'border-green-500 bg-green-50' : 'border-neutral-300'
               }`}
             />
@@ -517,7 +517,7 @@ export default function AdvancedSearchPage() {
                     setDestinationSearch('');
                     setShowOriginDropdown(false);
                   }}
-                  className="w-full text-left px-4 py-3 hover:bg-brand-turquoise/5 border-b border-border last:border-b-0"
+                  className="w-full text-left px-4 py-3 hover:bg-brand-blue/5 border-b border-border last:border-b-0"
                 >
                   <div className="font-medium text-brand-navy">{port.name}</div>
                   <div className="text-neutral-500 text-xs mt-1">
@@ -574,7 +574,7 @@ export default function AdvancedSearchPage() {
                   ? t('step1.destinationPlaceholder')
                   : t('step1.destinationDisabled')
               }
-              className={`w-full px-3 py-2 border rounded-md focus:ring-ring focus:border-brand-turquoise ${
+              className={`w-full px-3 py-2 border rounded-md focus:ring-ring focus:border-brand-blue ${
                 searchForm.destination ? 'border-green-500 bg-green-50' : 'border-neutral-300'
               } ${!searchForm.origin ? 'bg-neutral-100 cursor-not-allowed' : ''}`}
             />
@@ -604,7 +604,7 @@ export default function AdvancedSearchPage() {
                     setSelectedDestinationPort(port);
                     setShowDestinationDropdown(false);
                   }}
-                  className="w-full text-left px-4 py-3 hover:bg-brand-turquoise/5 border-b border-border last:border-b-0"
+                  className="w-full text-left px-4 py-3 hover:bg-brand-blue/5 border-b border-border last:border-b-0"
                 >
                   <div className="font-medium text-brand-navy">{port.name}</div>
                   <div className="text-neutral-500 text-xs mt-1">
@@ -674,7 +674,7 @@ export default function AdvancedSearchPage() {
           <button
             type="button"
             onClick={addPackage}
-            className="px-4 py-2 text-sm font-medium text-brand-navy bg-brand-turquoise/5 rounded-md hover:bg-brand-turquoise/10"
+            className="px-6 py-2 text-sm font-medium text-brand-navy bg-white border border-border rounded-lg hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
             {t('step2.addPackage')}
           </button>
@@ -794,7 +794,7 @@ export default function AdvancedSearchPage() {
           </div>
         ))}
 
-        <div className="bg-brand-turquoise/5 border border-brand-turquoise/30 rounded-md p-4">
+        <div className="bg-brand-blue/5 border border-brand-blue/30 rounded-md p-4">
           <h3 className="text-sm font-medium text-brand-navy mb-2">{t('step2.summary.title')}</h3>
           <div className="text-sm text-brand-navy space-y-1">
             <div>{t('step2.summary.volume', { value: totals.totalVolumeCBM.toFixed(2) })}</div>
@@ -1007,14 +1007,14 @@ export default function AdvancedSearchPage() {
           <div key={step} className="flex items-center">
             <div
               className={`flex items-center justify-center w-10 h-10 rounded-full ${
-                currentStep >= step ? 'bg-brand-turquoise text-brand-navy' : 'bg-neutral-200 text-neutral-600'
+                currentStep >= step ? 'bg-brand-navy text-white' : 'bg-neutral-200 text-neutral-600'
               }`}
             >
               {index + 1}
             </div>
             {index < wizardSteps.length - 1 && (
               <div
-                className={`w-20 h-1 mx-2 ${currentStep > step ? 'bg-brand-turquoise' : 'bg-neutral-200'}`}
+                className={`w-20 h-1 mx-2 ${currentStep > step ? 'bg-brand-blue' : 'bg-neutral-200'}`}
               />
             )}
           </div>
@@ -1046,7 +1046,7 @@ export default function AdvancedSearchPage() {
                   ? !direction
                   : !searchForm.origin || !searchForm.destination
               }
-              className="px-6 py-2 text-sm font-medium text-white bg-brand-turquoise rounded-md hover:bg-brand-turquoise/90 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="px-6 py-2 text-sm font-medium text-white bg-brand-navy rounded-md hover:bg-brand-navy/90 disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {t('navigation.next')}
             </button>
diff --git a/apps/frontend/app/[locale]/dashboard/search-advanced/results/page.tsx b/apps/frontend/app/[locale]/dashboard/search-advanced/results/page.tsx
index 9c53de7..642f119 100644
--- a/apps/frontend/app/[locale]/dashboard/search-advanced/results/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/search-advanced/results/page.tsx
@@ -178,10 +178,10 @@ export default function SearchResultsPage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-brand-turquoise/5 to-indigo-100 py-12 px-4">
+      <div className="min-h-screen bg-gradient-to-br from-brand-blue/5 to-indigo-100 py-12 px-4">
         <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-brand-turquoise mb-4"></div>
+            <div className="inline-block animate-spin rounded-full h-16 w-16 border-b-4 border-brand-blue mb-4"></div>
             <p className="text-xl text-neutral-700 font-medium">{t('loadingTitle')}</p>
             <p className="text-neutral-500 mt-2">
               {origin} → {destination}
@@ -194,7 +194,7 @@ export default function SearchResultsPage() {
 
   if (error) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-brand-turquoise/5 to-indigo-100 py-12 px-4">
+      <div className="min-h-screen bg-gradient-to-br from-brand-blue/5 to-indigo-100 py-12 px-4">
         <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">
@@ -220,11 +220,11 @@ export default function SearchResultsPage() {
 
   if (results.length === 0) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-brand-turquoise/5 to-indigo-100 py-12 px-4">
+      <div className="min-h-screen bg-gradient-to-br from-brand-blue/5 to-indigo-100 py-12 px-4">
         <div className="max-w-7xl mx-auto">
           <button
             onClick={() => router.back()}
-            className="mb-6 flex items-center text-brand-navy hover:text-brand-turquoise font-medium"
+            className="mb-6 flex items-center text-brand-navy hover:text-brand-blue font-medium"
           >
             {t('backToSearch')}
           </button>
@@ -247,7 +247,7 @@ export default function SearchResultsPage() {
             </div>
             <button
               onClick={() => router.back()}
-              className="px-6 py-3 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90 transition-colors"
+              className="px-6 py-3 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-colors"
             >
               {t('modifySearch')}
             </button>
@@ -274,10 +274,10 @@ export default function SearchResultsPage() {
       type: t('options.standard'),
       option: bestOptions?.standard,
       colors: {
-        border: 'border-brand-turquoise/30',
-        bg: 'bg-brand-turquoise/5',
+        border: 'border-brand-blue/30',
+        bg: 'bg-brand-blue/5',
         text: 'text-brand-navy',
-        button: 'bg-brand-turquoise hover:bg-brand-turquoise/90',
+        button: 'bg-brand-navy hover:bg-brand-navy/90',
       },
       icon: <Scale className="h-10 w-10 text-brand-navy" />,
       badge: t('options.badgeBalanced'),
@@ -297,13 +297,13 @@ export default function SearchResultsPage() {
   ];
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-brand-turquoise/5 to-indigo-100 py-12 px-4">
+    <div className="min-h-screen bg-gradient-to-br from-brand-blue/5 to-indigo-100 py-12 px-4">
       <div className="max-w-7xl mx-auto">
         {/* Header */}
         <div className="mb-8">
           <button
             onClick={() => router.back()}
-            className="mb-4 flex items-center text-brand-navy hover:text-brand-turquoise font-medium"
+            className="mb-4 flex items-center text-brand-navy hover:text-brand-blue font-medium"
           >
             {t('backToSearch')}
           </button>
@@ -333,7 +333,7 @@ export default function SearchResultsPage() {
         </div>
 
         {editBookingId && (
-          <div className="mb-6 rounded-lg border border-brand-turquoise/30 bg-brand-turquoise/5 px-4 py-3 text-sm text-brand-navy">
+          <div className="mb-6 rounded-lg border border-brand-blue/30 bg-brand-blue/5 px-4 py-3 text-sm text-brand-navy">
             {t('editMode')}
           </div>
         )}
@@ -501,7 +501,7 @@ export default function SearchResultsPage() {
                   <button
                     onClick={() => handleSelect(result, `all-${index}`)}
                     disabled={submittingId === `all-${index}`}
-                    className="px-6 py-2 bg-brand-turquoise text-brand-navy rounded-lg hover:bg-brand-turquoise/90 transition-colors disabled:opacity-60"
+                    className="px-6 py-2 bg-brand-navy text-white rounded-lg hover:bg-brand-navy/90 transition-colors disabled:opacity-60"
                   >
                     {submittingId === `all-${index}`
                       ? '...'
diff --git a/apps/frontend/app/[locale]/dashboard/settings/api-keys/page.tsx b/apps/frontend/app/[locale]/dashboard/settings/api-keys/page.tsx
index ab80ab2..95e9a2e 100644
--- a/apps/frontend/app/[locale]/dashboard/settings/api-keys/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/settings/api-keys/page.tsx
@@ -32,7 +32,7 @@ function CopyButton({ text }: { text: string }) {
   return (
     <button
       onClick={handleCopy}
-      className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border hover:bg-neutral-50 transition-colors"
+      className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-brand-navy rounded-lg border border-border hover:bg-neutral-50 transition-colors"
     >
       {copied ? (
         <>
@@ -141,7 +141,7 @@ function CreateKeyModal({
       <div className="bg-white rounded-2xl shadow-xl w-full max-w-md">
         <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-brand-turquoise/10 flex items-center justify-center">
+            <div className="w-10 h-10 rounded-xl bg-brand-blue/10 flex items-center justify-center">
               <Key className="w-5 h-5 text-brand-navy" />
             </div>
             <h2 className="text-lg font-semibold text-brand-navy">{t('title')}</h2>
@@ -193,7 +193,7 @@ function CreateKeyModal({
             <button
               type="button"
               onClick={onClose}
-              className="flex-1 py-2.5 border border-border text-neutral-700 text-sm font-medium rounded-xl hover:bg-neutral-50 transition-colors"
+              className="flex-1 py-2.5 border border-border text-brand-navy text-sm font-medium rounded-lg hover:bg-neutral-50 transition-colors"
             >
               {t('cancel')}
             </button>
@@ -240,7 +240,7 @@ function RevokeConfirmModal({
         <div className="px-6 pb-6 flex gap-3">
           <button
             onClick={onClose}
-            className="flex-1 py-2.5 border border-border text-neutral-700 text-sm font-medium rounded-xl hover:bg-neutral-50 transition-colors"
+            className="flex-1 py-2.5 border border-border text-brand-navy text-sm font-medium rounded-lg hover:bg-neutral-50 transition-colors"
           >
             {t('cancel')}
           </button>
@@ -371,14 +371,14 @@ export default function ApiKeysPage() {
         }
       />
 
-      <div className="mb-6 p-4 bg-brand-turquoise/5 border border-brand-turquoise/20 rounded-xl flex gap-3">
+      <div className="mb-6 p-4 bg-brand-blue/5 border border-brand-blue/20 rounded-xl flex gap-3">
         <ShieldCheck className="w-5 h-5 text-brand-navy flex-shrink-0 mt-0.5" />
         <div className="text-sm text-brand-navy">
           <p className="font-medium mb-0.5">{t('infoTitle')}</p>
           <p>
             {t.rich('infoBody', {
               code: () => (
-                <code className="px-1.5 py-0.5 bg-brand-turquoise/10 rounded text-brand-navy font-mono text-xs">
+                <code className="px-1.5 py-0.5 bg-brand-blue/10 rounded text-brand-navy font-mono text-xs">
                   X-API-Key: xped_live_...
                 </code>
               ),
diff --git a/apps/frontend/app/[locale]/dashboard/settings/organization/page.tsx b/apps/frontend/app/[locale]/dashboard/settings/organization/page.tsx
index f0c7509..bbdadff 100644
--- a/apps/frontend/app/[locale]/dashboard/settings/organization/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/settings/organization/page.tsx
@@ -149,7 +149,7 @@ export default function OrganizationSettingsPage() {
     return (
       <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-brand-turquoise mb-4"></div>
+          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-4 border-brand-blue mb-4"></div>
           <p className="text-neutral-600">{t('loading')}</p>
         </div>
       </div>
@@ -288,7 +288,7 @@ export default function OrganizationSettingsPage() {
       )}
 
       {!canEdit && (activeTab === 'information' || activeTab === 'address') && (
-        <div className="mb-6 bg-brand-turquoise/5 border border-brand-turquoise/30 rounded-lg p-4">
+        <div className="mb-6 bg-brand-blue/5 border border-brand-blue/30 rounded-lg p-4">
           <div className="flex items-center">
             <svg
               className="w-5 h-5 text-brand-navy mr-3"
@@ -317,7 +317,7 @@ export default function OrganizationSettingsPage() {
                 onClick={() => setActiveTab(tab.id)}
                 className={`flex-shrink-0 px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
                   activeTab === tab.id
-                    ? 'border-brand-turquoise text-brand-navy'
+                    ? 'border-brand-blue text-brand-navy'
                     : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300'
                 }`}
               >
@@ -498,7 +498,7 @@ export default function OrganizationSettingsPage() {
               type="button"
               onClick={handleCancel}
               disabled={isSaving}
-              className="px-6 py-2 text-sm font-medium text-neutral-700 bg-white border border-neutral-300 rounded-lg hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="px-6 py-2 text-sm font-medium text-brand-navy bg-white border border-border rounded-lg hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               {t('actions.cancel')}
             </button>
@@ -506,7 +506,7 @@ export default function OrganizationSettingsPage() {
               type="button"
               onClick={handleSave}
               disabled={isSaving || !formData.name || !formData.address_street}
-              className="px-6 py-2 text-sm font-medium text-white bg-brand-turquoise rounded-lg hover:bg-brand-turquoise/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center"
+              className="px-6 py-2 text-sm font-medium text-white bg-brand-navy rounded-lg hover:bg-brand-navy/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center"
             >
               {isSaving ? (
                 <>
diff --git a/apps/frontend/app/[locale]/dashboard/settings/subscription/page.tsx b/apps/frontend/app/[locale]/dashboard/settings/subscription/page.tsx
index df4604c..82eb33f 100644
--- a/apps/frontend/app/[locale]/dashboard/settings/subscription/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/settings/subscription/page.tsx
@@ -19,7 +19,7 @@ export default function SubscriptionPage() {
   return (
     <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-brand-turquoise mb-4"></div>
+        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-4 border-brand-blue mb-4"></div>
         <p className="text-neutral-600">{t('loading')}</p>
       </div>
     </div>
diff --git a/apps/frontend/app/[locale]/dashboard/settings/users/page.tsx b/apps/frontend/app/[locale]/dashboard/settings/users/page.tsx
index ee88418..eba1048 100644
--- a/apps/frontend/app/[locale]/dashboard/settings/users/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/settings/users/page.tsx
@@ -50,7 +50,7 @@ function Pagination({
             onClick={() => onPage(p)}
             className={`px-3 py-1 rounded text-sm border ${
               p === page
-                ? 'bg-brand-turquoise text-brand-navy border-brand-turquoise'
+                ? 'bg-brand-navy text-white border-brand-blue'
                 : 'border-neutral-300 hover:bg-neutral-50'
             }`}
           >
@@ -199,7 +199,7 @@ export default function UsersManagementPage() {
   if (!currentUser || (currentUser.role !== 'ADMIN' && currentUser.role !== 'MANAGER')) {
     return (
       <div className="flex items-center justify-center min-h-screen">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-turquoise"></div>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-blue"></div>
       </div>
     );
   }
@@ -249,7 +249,7 @@ export default function UsersManagementPage() {
   const getRoleBadgeColor = (role: string) => {
     const colors: Record<string, string> = {
       ADMIN: 'bg-red-100 text-red-800',
-      MANAGER: 'bg-brand-turquoise/10 text-brand-navy',
+      MANAGER: 'bg-brand-blue/10 text-brand-navy',
       USER: 'bg-green-100 text-green-800',
       VIEWER: 'bg-neutral-100 text-neutral-800',
     };
@@ -304,10 +304,10 @@ export default function UsersManagementPage() {
         licenseStatus.canInvite &&
         licenseStatus.availableLicenses <= 2 &&
         licenseStatus.maxLicenses !== -1 && (
-          <div className="bg-brand-turquoise/5 border border-brand-turquoise/30 rounded-lg p-4">
+          <div className="bg-brand-blue/5 border border-brand-blue/30 rounded-lg p-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center">
-                <svg className="h-5 w-5 text-brand-turquoise mr-2" fill="currentColor" viewBox="0 0 20 20">
+                <svg className="h-5 w-5 text-brand-blue mr-2" fill="currentColor" viewBox="0 0 20 20">
                   <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"
@@ -324,7 +324,7 @@ export default function UsersManagementPage() {
               </div>
               <Link
                 href="/dashboard/settings/subscription"
-                className="text-sm font-medium text-brand-navy hover:text-brand-turquoise"
+                className="text-sm font-medium text-brand-navy hover:text-brand-blue"
               >
                 {t('license.manageLink')}
               </Link>
@@ -365,7 +365,7 @@ export default function UsersManagementPage() {
             {licenseStatus?.canInvite ? (
               <button
                 onClick={() => setShowInviteModal(true)}
-                className="inline-flex items-center px-3 sm:px-4 py-2 text-sm font-medium rounded-md text-white bg-brand-turquoise hover:bg-brand-turquoise/90"
+                className="inline-flex items-center px-3 sm:px-4 py-2 text-sm font-medium rounded-md text-white bg-brand-navy hover:bg-brand-navy/90"
               >
                 <span className="mr-1.5">+</span>
                 <span className="hidden sm:inline">{t('actions.invite')}</span>
@@ -408,7 +408,7 @@ export default function UsersManagementPage() {
         </div>
         {isLoading ? (
           <div className="px-6 py-12 text-center text-neutral-500">
-            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-turquoise mx-auto mb-4"></div>
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-blue mx-auto mb-4"></div>
             {t('loading')}
           </div>
         ) : pagedUsers.length > 0 ? (
@@ -442,7 +442,7 @@ export default function UsersManagementPage() {
                     <tr key={user.id} className="hover:bg-neutral-50">
                       <td className="px-6 py-4 whitespace-nowrap">
                         <div className="flex items-center">
-                          <div className="flex-shrink-0 h-10 w-10 bg-brand-turquoise rounded-full flex items-center justify-center text-white font-semibold">
+                          <div className="flex-shrink-0 h-10 w-10 bg-brand-blue rounded-full flex items-center justify-center text-white font-semibold">
                             {user.firstName[0]}
                             {user.lastName[0]}
                           </div>
@@ -544,7 +544,7 @@ export default function UsersManagementPage() {
               {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-brand-turquoise hover:bg-brand-turquoise/90"
+                  className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-brand-navy hover:bg-brand-navy/90"
                 >
                   <span className="mr-2">+</span>
                   {t('actions.invite')}
@@ -693,7 +693,7 @@ export default function UsersManagementPage() {
                   setMenuPosition(null);
                 }}
                 disabled={toggleActiveMutation.isPending}
-                className="w-full px-4 py-3 text-left hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-3 border-b border-border"
+                className="w-full px-4 py-3 text-left text-brand-navy hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-3 border-b border-border"
               >
                 {users?.users.find(u => u.id === openMenuId)?.isActive ? (
                   <>
@@ -802,7 +802,7 @@ export default function UsersManagementPage() {
                         required
                         value={inviteForm.firstName}
                         onChange={e => setInviteForm({ ...inviteForm, firstName: e.target.value })}
-                        className="mt-1 block w-full rounded-md border-neutral-300 shadow-sm focus:border-brand-turquoise focus:ring-ring sm:text-sm px-3 py-2 border"
+                        className="mt-1 block w-full rounded-md border-neutral-300 shadow-sm focus:border-brand-blue focus:ring-ring sm:text-sm px-3 py-2 border"
                       />
                     </div>
                     <div>
@@ -814,7 +814,7 @@ export default function UsersManagementPage() {
                         required
                         value={inviteForm.lastName}
                         onChange={e => setInviteForm({ ...inviteForm, lastName: e.target.value })}
-                        className="mt-1 block w-full rounded-md border-neutral-300 shadow-sm focus:border-brand-turquoise focus:ring-ring sm:text-sm px-3 py-2 border"
+                        className="mt-1 block w-full rounded-md border-neutral-300 shadow-sm focus:border-brand-blue focus:ring-ring sm:text-sm px-3 py-2 border"
                       />
                     </div>
                   </div>
@@ -827,7 +827,7 @@ export default function UsersManagementPage() {
                       required
                       value={inviteForm.email}
                       onChange={e => setInviteForm({ ...inviteForm, email: e.target.value })}
-                      className="mt-1 block w-full rounded-md border-neutral-300 shadow-sm focus:border-brand-turquoise focus:ring-ring sm:text-sm px-3 py-2 border"
+                      className="mt-1 block w-full rounded-md border-neutral-300 shadow-sm focus:border-brand-blue focus:ring-ring sm:text-sm px-3 py-2 border"
                     />
                   </div>
                   <div>
@@ -837,7 +837,7 @@ export default function UsersManagementPage() {
                     <select
                       value={inviteForm.role}
                       onChange={e => setInviteForm({ ...inviteForm, role: e.target.value as any })}
-                      className="mt-1 block w-full rounded-md border-neutral-300 shadow-sm focus:border-brand-turquoise focus:ring-ring sm:text-sm px-3 py-2 border"
+                      className="mt-1 block w-full rounded-md border-neutral-300 shadow-sm focus:border-brand-blue focus:ring-ring sm:text-sm px-3 py-2 border"
                     >
                       <option value="USER">{t('modal.roles.USER')}</option>
                       <option value="MANAGER">{t('modal.roles.MANAGER')}</option>
@@ -848,7 +848,7 @@ export default function UsersManagementPage() {
                     <button
                       type="submit"
                       disabled={inviteMutation.isPending}
-                      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-brand-turquoise text-base font-medium text-white hover:bg-brand-turquoise/90 sm:col-start-2 sm:text-sm disabled:bg-neutral-300"
+                      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-brand-navy text-base font-medium text-white hover:bg-brand-navy/90 sm:col-start-2 sm:text-sm disabled:bg-neutral-300"
                     >
                       {inviteMutation.isPending ? t('modal.submitting') : t('modal.submit')}
                     </button>
diff --git a/apps/frontend/app/[locale]/dashboard/track-trace/page.tsx b/apps/frontend/app/[locale]/dashboard/track-trace/page.tsx
index 3f407d7..aa8702a 100644
--- a/apps/frontend/app/[locale]/dashboard/track-trace/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/track-trace/page.tsx
@@ -263,7 +263,7 @@ export default function TrackTracePage() {
                         'flex min-h-[44px] items-center gap-2 rounded-md border p-2 text-left transition-colors',
                         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
                         active
-                          ? 'border-brand-turquoise bg-brand-turquoise/5'
+                          ? 'border-brand-blue bg-brand-blue/5'
                           : 'border-border hover:bg-neutral-50'
                       )}
                     >
@@ -340,7 +340,7 @@ export default function TrackTracePage() {
             <Card className={cn('overflow-hidden', isMapFullscreen && 'h-full rounded-none')}>
               <div className="flex items-center justify-between gap-3 bg-brand-navy px-4 py-3 text-white">
                 <div className="flex min-w-0 items-center gap-2">
-                  <Anchor className="size-4 shrink-0 text-brand-turquoise" aria-hidden="true" />
+                  <Anchor className="size-4 shrink-0 text-brand-blue" aria-hidden="true" />
                   <div className="min-w-0">
                     <p className="truncate font-heading text-body-sm font-semibold">
                       {t('map.title')}
@@ -387,7 +387,7 @@ export default function TrackTracePage() {
                     role="status"
                     className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-neutral-50"
                   >
-                    <Ship className="size-8 animate-pulse text-brand-turquoise" aria-hidden="true" />
+                    <Ship className="size-8 animate-pulse text-brand-blue" aria-hidden="true" />
                     <p className="text-body-sm font-medium text-brand-navy">{t('map.loading')}</p>
                     <p className="text-body-xs text-neutral-500">{t('map.connecting')}</p>
                   </div>
@@ -432,7 +432,7 @@ export default function TrackTracePage() {
                   href="https://www.marinetraffic.com"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex shrink-0 items-center gap-1 rounded-md text-body-xs font-medium text-brand-turquoise underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  className="flex shrink-0 items-center gap-1 rounded-md text-body-xs font-medium text-brand-blue underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 >
                   {t('map.openOnSite')}
                   <ExternalLink className="size-3" aria-hidden="true" />
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/assurance/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/assurance/page.tsx
index 9fb9d32..87218b6 100644
--- a/apps/frontend/app/[locale]/dashboard/wiki/assurance/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/wiki/assurance/page.tsx
@@ -99,7 +99,7 @@ export default async function AssurancePage() {
         </CardContent>
       </Card>
 
-      <Card className="mt-4 bg-brand-turquoise/5 border-brand-turquoise/30">
+      <Card className="mt-4 bg-brand-blue/5 border-brand-blue/30">
         <CardContent className="pt-6">
           <h3 className="font-semibold text-brand-navy mb-2">{t('assurance.valueTitle')}</h3>
           <p className="font-mono text-brand-navy bg-white p-3 rounded border text-sm">
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/conteneurs/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/conteneurs/page.tsx
index ad89c08..f7093c4 100644
--- a/apps/frontend/app/[locale]/dashboard/wiki/conteneurs/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/wiki/conteneurs/page.tsx
@@ -82,12 +82,12 @@ export default async function ConteneursPage() {
         </div>
       </div>
 
-      <Card className="mt-8 bg-brand-turquoise/5 border-brand-turquoise/30">
+      <Card className="mt-8 bg-brand-blue/5 border-brand-blue/30">
         <CardContent className="pt-6">
           <h3 className="font-semibold text-brand-navy mb-4">{t('conteneurs.selectionTitle')}</h3>
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-brand-turquoise/30">
+              <tr className="border-b border-brand-blue/30">
                 <th className="text-left py-2 font-medium text-brand-navy">
                   {t('conteneurs.colCondition')}
                 </th>
@@ -98,7 +98,7 @@ export default async function ConteneursPage() {
             </thead>
             <tbody>
               {selectionGuide.map((row, i) => (
-                <tr key={i} className="border-b border-brand-turquoise/20 last:border-0">
+                <tr key={i} className="border-b border-brand-blue/20 last:border-0">
                   <td className="py-2 text-brand-navy">{row.condition}</td>
                   <td className="py-2 font-medium text-brand-navy">{row.recommendation}</td>
                 </tr>
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/documents-transport/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/documents-transport/page.tsx
index 9cd4e69..1a980f0 100644
--- a/apps/frontend/app/[locale]/dashboard/wiki/documents-transport/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/wiki/documents-transport/page.tsx
@@ -45,7 +45,7 @@ export default async function DocumentsTransportPage() {
                   <div className="flex-1">
                     <div className="flex items-center gap-2 mb-1">
                       <h4 className="font-semibold text-brand-navy">{doc.name}</h4>
-                      <span className="px-2 py-0.5 text-xs bg-brand-turquoise/10 text-brand-navy rounded">
+                      <span className="px-2 py-0.5 text-xs bg-brand-blue/10 text-brand-navy rounded">
                         {doc.type}
                       </span>
                     </div>
@@ -84,14 +84,14 @@ export default async function DocumentsTransportPage() {
         </div>
       </div>
 
-      <Card className="mt-8 bg-brand-turquoise/5 border-brand-turquoise/30">
+      <Card className="mt-8 bg-brand-blue/5 border-brand-blue/30">
         <CardContent className="pt-6">
           <h3 className="font-semibold text-brand-navy 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-brand-turquoise/30">
+              <div key={fn.title} className="bg-white p-4 rounded-lg border border-brand-blue/30">
                 <h4 className="font-medium text-brand-navy mb-1">{fn.title}</h4>
                 <p className="text-sm text-neutral-600">{fn.description}</p>
               </div>
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/imdg/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/imdg/page.tsx
index 867b1e9..9efc39a 100644
--- a/apps/frontend/app/[locale]/dashboard/wiki/imdg/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/wiki/imdg/page.tsx
@@ -96,7 +96,7 @@ export default async function ImdgPage() {
         </div>
       </div>
 
-      <Card className="mt-8 bg-brand-turquoise/5 border-brand-turquoise/30">
+      <Card className="mt-8 bg-brand-blue/5 border-brand-blue/30">
         <CardContent className="pt-6">
           <h3 className="font-semibold text-brand-navy mb-2">{t('imdg.labelingTitle')}</h3>
           <p className="text-sm text-brand-navy">{t('imdg.labelingContent')}</p>
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/incoterms/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/incoterms/page.tsx
index 5de0d1d..e6f4aee 100644
--- a/apps/frontend/app/[locale]/dashboard/wiki/incoterms/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/wiki/incoterms/page.tsx
@@ -24,7 +24,7 @@ export default async function IncotermsPage() {
   const categoryColors = [
     'bg-green-100 text-green-800',
     'bg-red-100 text-red-800',
-    'bg-brand-turquoise/10 text-brand-navy',
+    'bg-brand-blue/10 text-brand-navy',
   ];
 
   return (
@@ -39,13 +39,13 @@ export default async function IncotermsPage() {
         <p className="mt-3 text-neutral-600 max-w-3xl">{t('incoterms.description')}</p>
       </div>
 
-      <Card className="bg-brand-turquoise/5 border-brand-turquoise/30">
+      <Card className="bg-brand-blue/5 border-brand-blue/30">
         <CardContent className="pt-6">
           <h3 className="font-semibold text-brand-navy 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-brand-navy">
-                <span className="mt-1 w-2 h-2 bg-brand-turquoise rounded-full flex-shrink-0" />
+                <span className="mt-1 w-2 h-2 bg-brand-blue rounded-full flex-shrink-0" />
                 <span className="text-sm">{point}</span>
               </li>
             ))}
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
index 0b7bd1f..f0f1d5a 100644
--- a/apps/frontend/app/[locale]/dashboard/wiki/lcl-vs-fcl/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/wiki/lcl-vs-fcl/page.tsx
@@ -32,7 +32,7 @@ export default async function LclVsFclPage() {
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <Card className="bg-brand-turquoise/5 border-brand-turquoise/30">
+        <Card className="bg-brand-blue/5 border-brand-blue/30">
           <CardContent className="pt-6">
             <h3 className="text-lg font-bold text-brand-navy mb-2">{t('lclVsFcl.lclTitle')}</h3>
             <p className="text-sm text-brand-navy">{t('lclVsFcl.lclDescription')}</p>
@@ -75,7 +75,7 @@ export default async function LclVsFclPage() {
         <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-brand-turquoise/10 rounded-full flex items-center justify-center text-brand-navy font-bold text-sm">
+              <div className="flex-shrink-0 w-8 h-8 bg-brand-blue/10 rounded-full flex items-center justify-center text-brand-navy font-bold text-sm">
                 {step.step}
               </div>
               <div>
@@ -88,13 +88,13 @@ export default async function LclVsFclPage() {
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
-        <Card className="bg-brand-turquoise/5 border-brand-turquoise/30">
+        <Card className="bg-brand-blue/5 border-brand-blue/30">
           <CardContent className="pt-6">
             <h3 className="font-semibold text-brand-navy 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-brand-navy">
-                  <span className="text-brand-turquoise mt-0.5">✓</span> {item}
+                  <span className="text-brand-blue mt-0.5">✓</span> {item}
                 </li>
               ))}
             </ul>
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/lettre-credit/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/lettre-credit/page.tsx
index 85b36eb..141624b 100644
--- a/apps/frontend/app/[locale]/dashboard/wiki/lettre-credit/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/wiki/lettre-credit/page.tsx
@@ -95,7 +95,7 @@ export default async function LettreCreditPage() {
         </CardContent>
       </Card>
 
-      <Card className="mt-4 bg-brand-turquoise/5 border-brand-turquoise/30">
+      <Card className="mt-4 bg-brand-blue/5 border-brand-blue/30">
         <CardContent className="pt-6">
           <h3 className="font-semibold text-brand-navy mb-2">{t('lettreCredit.ucp600Title')}</h3>
           <p className="text-sm text-brand-navy">{t('lettreCredit.ucp600Content')}</p>
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/page.tsx
index 1d92183..272422c 100644
--- a/apps/frontend/app/[locale]/dashboard/wiki/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/wiki/page.tsx
@@ -115,14 +115,14 @@ export default async function WikiPage() {
           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-brand-turquoise bg-white">
+              <Card className="h-full transition-all duration-200 hover:shadow-lg hover:border-brand-blue bg-white">
                 <CardHeader>
                   <div className="flex items-start justify-between">
-                    <div className="h-10 w-10 rounded-lg bg-brand-turquoise/5 flex items-center justify-center">
+                    <div className="h-10 w-10 rounded-lg bg-brand-blue/5 flex items-center justify-center">
                       <IconComponent className="h-5 w-5 text-brand-navy" />
                     </div>
                   </div>
-                  <CardTitle className="mt-3 transition-colors group-hover:text-brand-turquoise">
+                  <CardTitle className="mt-3 transition-colors group-hover:text-brand-blue">
                     {t(`topics.${topic.key}.title` as any)}
                   </CardTitle>
                   <CardDescription className="text-neutral-600">
@@ -134,7 +134,7 @@ export default async function WikiPage() {
                     {topic.tags.map(tag => (
                       <span
                         key={tag}
-                        className="px-2 py-1 text-xs font-medium bg-brand-turquoise/5 text-brand-navy rounded-full"
+                        className="px-2 py-1 text-xs font-medium bg-brand-blue/5 text-brand-navy rounded-full"
                       >
                         {tag}
                       </span>
@@ -148,7 +148,7 @@ export default async function WikiPage() {
       </div>
 
       {/* Footer info */}
-      <div className="mt-8 p-4 bg-brand-turquoise/5 rounded-lg">
+      <div className="mt-8 p-4 bg-brand-blue/5 rounded-lg">
         <p className="text-sm text-brand-navy">
           <span className="font-semibold">{t('needHelp')} </span>
           {t('helpText')}
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/ports-routes/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/ports-routes/page.tsx
index fd0101a..aa6a646 100644
--- a/apps/frontend/app/[locale]/dashboard/wiki/ports-routes/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/wiki/ports-routes/page.tsx
@@ -63,7 +63,7 @@ export default async function PortsRoutesPage() {
                   {route.majorPorts.map(port => (
                     <span
                       key={port}
-                      className="px-2 py-0.5 bg-brand-turquoise/5 text-brand-navy text-xs rounded"
+                      className="px-2 py-0.5 bg-brand-blue/5 text-brand-navy text-xs rounded"
                     >
                       {port}
                     </span>
@@ -79,7 +79,7 @@ export default async function PortsRoutesPage() {
         <h2 className="text-xl font-bold text-brand-navy 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-brand-turquoise/30">
+            <Card key={p.name} className="bg-white border-brand-blue/30">
               <CardContent className="pt-4">
                 <div className="flex items-start justify-between mb-2">
                   <div>
@@ -88,7 +88,7 @@ export default async function PortsRoutesPage() {
                       {p.location} — {t('portsRoutes.colLength')}: {p.length}
                     </p>
                   </div>
-                  <span className="px-2 py-1 bg-brand-turquoise/10 text-brand-navy text-xs rounded font-medium whitespace-nowrap">
+                  <span className="px-2 py-1 bg-brand-blue/10 text-brand-navy text-xs rounded font-medium whitespace-nowrap">
                     {p.keyStat}
                   </span>
                 </div>
@@ -126,7 +126,7 @@ export default async function PortsRoutesPage() {
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
-        <Card className="bg-brand-turquoise/5 border-brand-turquoise/30">
+        <Card className="bg-brand-blue/5 border-brand-blue/30">
           <CardContent className="pt-6">
             <h3 className="font-semibold text-brand-navy mb-2">{t('portsRoutes.hubTitle')}</h3>
             <p className="text-sm text-brand-navy">{t('portsRoutes.hubDescription')}</p>
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/transit-time/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/transit-time/page.tsx
index d92ceb1..e3f7b8a 100644
--- a/apps/frontend/app/[locale]/dashboard/wiki/transit-time/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/wiki/transit-time/page.tsx
@@ -47,7 +47,7 @@ export default async function TransitTimePage() {
         <p className="mt-3 text-neutral-600 max-w-3xl">{t('transitTime.description')}</p>
       </div>
 
-      <Card className="bg-brand-turquoise/5 border-brand-turquoise/30">
+      <Card className="bg-brand-blue/5 border-brand-blue/30">
         <CardContent className="pt-6">
           <h3 className="font-semibold text-brand-navy mb-3">{t('transitTime.keyTermsTitle')}</h3>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
@@ -67,11 +67,11 @@ export default async function TransitTimePage() {
           {timeline.map((item, index) => (
             <Card
               key={index}
-              className={`bg-white ${index === 5 || index === 7 ? 'border-brand-turquoise' : ''}`}
+              className={`bg-white ${index === 5 || index === 7 ? 'border-brand-blue' : ''}`}
             >
               <CardContent className="py-4">
                 <div className="flex items-start gap-4">
-                  <div className="flex-shrink-0 w-8 h-8 bg-brand-turquoise/10 rounded-full flex items-center justify-center text-brand-navy font-bold text-sm">
+                  <div className="flex-shrink-0 w-8 h-8 bg-brand-blue/10 rounded-full flex items-center justify-center text-brand-navy font-bold text-sm">
                     {index + 1}
                   </div>
                   <div className="flex-1">
diff --git a/apps/frontend/app/[locale]/dashboard/wiki/vgm/page.tsx b/apps/frontend/app/[locale]/dashboard/wiki/vgm/page.tsx
index d96d947..d19fc92 100644
--- a/apps/frontend/app/[locale]/dashboard/wiki/vgm/page.tsx
+++ b/apps/frontend/app/[locale]/dashboard/wiki/vgm/page.tsx
@@ -39,7 +39,7 @@ export default async function VGMPage() {
         <p className="mt-3 text-neutral-600 max-w-3xl">{t('vgm.description')}</p>
       </div>
 
-      <Card className="bg-brand-turquoise/5 border-brand-turquoise/30">
+      <Card className="bg-brand-blue/5 border-brand-blue/30">
         <CardContent className="pt-6">
           <h3 className="font-semibold text-brand-navy mb-3">{t('vgm.whyTitle')}</h3>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-brand-navy">
@@ -58,7 +58,7 @@ export default async function VGMPage() {
         <Card className="bg-white">
           <CardContent className="pt-6">
             <div className="bg-neutral-50 p-4 rounded-lg border mb-4 text-center font-mono text-lg">
-              <span className="bg-brand-turquoise/10 text-brand-navy px-2 py-1 rounded">
+              <span className="bg-brand-blue/10 text-brand-navy px-2 py-1 rounded">
                 {t('vgm.formula')}
               </span>
             </div>
diff --git a/apps/frontend/app/[locale]/forgot-password/page.tsx b/apps/frontend/app/[locale]/forgot-password/page.tsx
index 3c5c82d..1599453 100644
--- a/apps/frontend/app/[locale]/forgot-password/page.tsx
+++ b/apps/frontend/app/[locale]/forgot-password/page.tsx
@@ -180,7 +180,7 @@ export default function ForgotPasswordPage() {
             <p className="text-body-lg text-neutral-200 mb-12">{t('sidePanel.description')}</p>
             <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">
+                <div className="flex-shrink-0 w-12 h-12 bg-brand-blue rounded-lg flex items-center justify-center">
                   <svg
                     className="w-6 h-6 text-white"
                     fill="none"
@@ -205,7 +205,7 @@ export default function ForgotPasswordPage() {
                 </div>
               </div>
               <div className="flex items-start">
-                <div className="flex-shrink-0 w-12 h-12 bg-brand-turquoise rounded-lg flex items-center justify-center">
+                <div className="flex-shrink-0 w-12 h-12 bg-brand-blue rounded-lg flex items-center justify-center">
                   <svg
                     className="w-6 h-6 text-white"
                     fill="none"
diff --git a/apps/frontend/app/[locale]/login/page.tsx b/apps/frontend/app/[locale]/login/page.tsx
index 106ed1c..475a009 100644
--- a/apps/frontend/app/[locale]/login/page.tsx
+++ b/apps/frontend/app/[locale]/login/page.tsx
@@ -377,7 +377,7 @@ function LoginPageContent() {
 
             <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">
+                <div className="flex-shrink-0 w-12 h-12 bg-brand-blue rounded-lg flex items-center justify-center">
                   <svg
                     className="w-6 h-6 text-white"
                     fill="none"
@@ -403,7 +403,7 @@ function LoginPageContent() {
               </div>
 
               <div className="flex items-start">
-                <div className="flex-shrink-0 w-12 h-12 bg-brand-turquoise rounded-lg flex items-center justify-center">
+                <div className="flex-shrink-0 w-12 h-12 bg-brand-blue rounded-lg flex items-center justify-center">
                   <svg
                     className="w-6 h-6 text-white"
                     fill="none"
@@ -427,7 +427,7 @@ function LoginPageContent() {
               </div>
 
               <div className="flex items-start">
-                <div className="flex-shrink-0 w-12 h-12 bg-brand-turquoise rounded-lg flex items-center justify-center">
+                <div className="flex-shrink-0 w-12 h-12 bg-brand-blue rounded-lg flex items-center justify-center">
                   <svg
                     className="w-6 h-6 text-white"
                     fill="none"
@@ -456,13 +456,13 @@ function LoginPageContent() {
               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">
+                <div className="text-display-sm text-brand-blue">
                   <AnimatedCounter end={50} suffix="+" isActive={statsActive} />
                 </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">
+                <div className="text-display-sm text-brand-blue">
                   <AnimatedCounter end={10} suffix="k+" isActive={statsActive} />
                 </div>
                 <div className="text-body-sm text-neutral-300 mt-1">
@@ -470,7 +470,7 @@ function LoginPageContent() {
                 </div>
               </div>
               <div>
-                <div className="text-display-sm text-brand-turquoise">
+                <div className="text-display-sm text-brand-blue">
                   <AnimatedCounter end={99.5} decimals={1} suffix="%" isActive={statsActive} />
                 </div>
                 <div className="text-body-sm text-neutral-300 mt-1">
diff --git a/apps/frontend/app/[locale]/page.tsx b/apps/frontend/app/[locale]/page.tsx
index 776dacc..46f44d7 100644
--- a/apps/frontend/app/[locale]/page.tsx
+++ b/apps/frontend/app/[locale]/page.tsx
@@ -3,7 +3,7 @@
 import { useRef, useState, useEffect } from 'react';
 import { Link } from '@/i18n/navigation';
 import Image from 'next/image';
-import { motion, useInView, useScroll, useTransform } from 'framer-motion';
+import { motion, useInView, useReducedMotion, useScroll, useTransform } from 'framer-motion';
 import {
   Ship,
   Shield,
@@ -28,6 +28,83 @@ import { useTranslations, useLocale } from 'next-intl';
 import { useAuth } from '@/lib/context/auth-context';
 import { LandingHeader, LandingFooter } from '@/components/layout';
 import { DemoVideoModal } from '@/components/DemoVideoModal';
+import { RateSearchDemo } from '@/components/landing/RateSearchDemo';
+import { EASE, reveal, revealGroup } from '@/components/landing/motion';
+
+/**
+ * Rythme vertical de la page : une seule echelle pour toutes les sections,
+ * afin que la lecture avance a pas constant plutot que par a-coups.
+ */
+const SECTION_PADDING = 'py-16 sm:py-24 lg:py-32';
+const SECTION_PADDING_TIGHT = 'py-12 sm:py-16';
+const CONTAINER = 'mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8';
+
+/** Anneau de focus commun aux elements interactifs de la page. */
+const FOCUS_RING =
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-turquoise focus-visible:ring-offset-2';
+
+/**
+ * En-tete de section : surtitre, titre, sous-titre.
+ *
+ * Les sections repetaient jusqu'ici le meme bloc avec des tailles et des
+ * marges legerement differentes. Le centraliser garantit que tous les titres
+ * de la page partagent la meme hierarchie.
+ */
+function SectionHeading({
+  eyebrow,
+  title,
+  subtitle,
+  id,
+  tone = 'light',
+  animate = true,
+  inView = true,
+}: {
+  eyebrow?: string;
+  title: string;
+  subtitle?: string;
+  id?: string;
+  tone?: 'light' | 'dark';
+  animate?: boolean;
+  inView?: boolean;
+}) {
+  const dark = tone === 'dark';
+
+  return (
+    <motion.div
+      initial={animate ? { opacity: 0, y: 16 } : false}
+      animate={animate ? (inView ? { opacity: 1, y: 0 } : {}) : undefined}
+      transition={{ duration: 0.6, ease: EASE }}
+      className="mx-auto mb-12 max-w-3xl text-center sm:mb-16"
+    >
+      {eyebrow && (
+        <span
+          className={`mb-4 inline-block rounded-full px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.12em] ${
+            dark ? 'bg-white/10 text-white/80' : 'bg-brand-turquoise/10 text-brand-navy'
+          }`}
+        >
+          {eyebrow}
+        </span>
+      )}
+      <h2
+        id={id}
+        className={`text-balance text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl ${
+          dark ? 'text-white' : 'text-brand-navy'
+        }`}
+      >
+        {title}
+      </h2>
+      {subtitle && (
+        <p
+          className={`mx-auto mt-4 max-w-2xl text-pretty text-base leading-relaxed sm:text-lg ${
+            dark ? 'text-white/70' : 'text-neutral-600'
+          }`}
+        >
+          {subtitle}
+        </p>
+      )}
+    </motion.div>
+  );
+}
 
 function AnimatedCounter({
   end,
@@ -45,22 +122,34 @@ function AnimatedCounter({
   duration?: number;
 }) {
   const [count, setCount] = useState(0);
+  const prefersReducedMotion = useReducedMotion();
 
   useEffect(() => {
     if (!isActive) return;
+
+    // Mouvement reduit : on affiche directement la valeur finale.
+    if (prefersReducedMotion) {
+      setCount(end);
+      return;
+    }
+
     let startTime: number | undefined;
+    let frame = 0;
 
     const animate = (timestamp: number) => {
       if (!startTime) startTime = timestamp;
       const progress = Math.min((timestamp - startTime) / (duration * 1000), 1);
       const eased = 1 - Math.pow(1 - progress, 3);
       setCount(eased * end);
-      if (progress < 1) requestAnimationFrame(animate);
+      if (progress < 1) frame = requestAnimationFrame(animate);
       else setCount(end);
     };
 
-    requestAnimationFrame(animate);
-  }, [end, duration, isActive]);
+    frame = requestAnimationFrame(animate);
+    // Sans annulation, la boucle survivait au demontage et continuait de
+    // declencher setCount sur un composant disparu.
+    return () => cancelAnimationFrame(frame);
+  }, [end, duration, isActive, prefersReducedMotion]);
 
   const display = decimals > 0 ? count.toFixed(decimals) : Math.floor(count).toString();
   return (
@@ -99,50 +188,54 @@ export default function LandingPage() {
   const [billingYearly, setBillingYearly] = useState(false);
   const [isDemoOpen, setIsDemoOpen] = useState(false);
 
-  const { scrollYProgress } = useScroll();
-  const backgroundY = useTransform(scrollYProgress, [0, 1], ['0%', '50%']);
+  const prefersReducedMotion = useReducedMotion();
 
+  const { scrollYProgress } = useScroll();
+  // Parallaxe neutralisee si l'utilisateur a demande moins de mouvement.
+  const backgroundY = useTransform(
+    scrollYProgress,
+    [0, 1],
+    prefersReducedMotion ? ['0%', '0%'] : ['0%', '50%']
+  );
+
+  // Six modules, un seul traitement. Les degrades arc-en-ciel qui les
+  // distinguaient (violet, orange, indigo...) n'encodaient rien : ils
+  // n'existaient que pour colorer. L'icone suffit a identifier le module.
   const features = [
     {
       icon: BarChart3,
       title: t('features.dashboard.title'),
       description: t('features.dashboard.description'),
-      color: 'from-brand-turquoise to-cyan-500',
       link: '/dashboard',
     },
     {
       icon: Package,
       title: t('features.bookings.title'),
       description: t('features.bookings.description'),
-      color: 'from-purple-500 to-pink-500',
       link: '/dashboard/bookings',
     },
     {
       icon: FileText,
       title: t('features.documents.title'),
       description: t('features.documents.description'),
-      color: 'from-orange-500 to-red-500',
       link: '/dashboard/documents',
     },
     {
       icon: Search,
       title: t('features.tracking.title'),
       description: t('features.tracking.description'),
-      color: 'from-green-500 to-emerald-500',
       link: '/dashboard/track-trace',
     },
     {
       icon: BookOpen,
       title: t('features.wiki.title'),
       description: t('features.wiki.description'),
-      color: 'from-yellow-500 to-orange-500',
       link: '/dashboard/wiki',
     },
     {
       icon: Bell,
       title: t('features.notifications.title'),
       description: t('features.notifications.description'),
-      color: 'from-indigo-500 to-purple-500',
       link: '/dashboard',
     },
   ];
@@ -267,26 +360,9 @@ export default function LandingPage() {
       company: string;
     }>) ?? [];
 
-  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 },
-    },
-  };
+  // Grammaire commune : meme courbe, meme distance, meme cascade partout.
+  const containerVariants = revealGroup;
+  const itemVariants = reveal;
 
   const numberFormat = new Intl.NumberFormat(locale === 'fr' ? 'fr-FR' : 'en-US');
 
@@ -295,122 +371,166 @@ export default function LandingPage() {
       <LandingHeader transparentOnTop={true} />
 
       {/* Hero Section */}
-      <section ref={heroRef} className="relative min-h-screen flex items-center overflow-hidden">
-        <motion.div style={{ y: backgroundY }} className="absolute inset-0 z-0">
+      <section
+        ref={heroRef}
+        aria-labelledby="hero-title"
+        // 100svh plutot que 100vh : sur mobile, la barre d'URL ne rogne plus
+        // le bas du hero et les CTA restent visibles sans defilement.
+        className="relative flex min-h-[100svh] items-center overflow-hidden"
+      >
+        <motion.div
+          aria-hidden="true"
+          // L'image est portee par le conteneur, pas par le contenu de <video> :
+          // elle s'affiche donc pendant le chargement de la video et sert de
+          // repli reel si celle-ci echoue.
+          className="absolute inset-0 z-0 bg-brand-navy bg-cover bg-center"
+          style={{
+            y: backgroundY,
+            backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
+          }}
+        >
           <video
             autoPlay
             loop
             muted
             playsInline
-            className="absolute inset-0 w-full h-full object-cover"
+            preload="metadata"
+            className="absolute inset-0 h-full w-full object-cover"
           >
             <source src="https://assets.mixkit.co/videos/36264/36264-720.mp4" type="video/mp4" />
-            <div
-              className="absolute inset-0"
-              style={{
-                backgroundImage: 'url(/assets/images/background-section-1-landingpage.png)',
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-              }}
-            />
           </video>
           <div className="absolute inset-0 bg-brand-navy/65" />
           <div className="absolute inset-0 bg-gradient-to-br from-brand-navy/70 via-brand-navy/50 to-brand-turquoise/20" />
         </motion.div>
 
-        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            className="text-center"
-          >
+        <div className={`relative z-10 pt-28 pb-20 sm:pt-32 ${CONTAINER}`}>
+          {/* Deux colonnes a partir de lg : l'argument a gauche, sa preuve a
+              droite. En dessous, la preuve passe sous l'argument. */}
+          <div className="grid items-center gap-12 lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-16">
             <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-3 py-1.5 sm:px-4 sm:py-2 rounded-full mb-6 sm:mb-8 border border-white/20"
-            >
-              <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">
-                {t('hero.badge')}
-              </span>
-            </motion.div>
-
-            <motion.h1
-              initial={{ opacity: 0, y: 20 }}
+              initial={{ opacity: 0, y: 30 }}
               animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-              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"
+              transition={{ duration: 0.8, ease: EASE }}
+              className="text-center lg:text-left"
             >
-              {t('hero.titleLine1')}
-              <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-turquoise to-brand-green">
-                {t('hero.titleLine2')}
-              </span>
-            </motion.h1>
+              <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.6, delay: 0.15, ease: EASE }}
+                className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-2 backdrop-blur-sm sm:mb-8"
+              >
+                <Ship className="size-4 flex-shrink-0 text-brand-turquoise" aria-hidden="true" />
+                <span className="text-xs font-medium text-white/90 sm:text-sm">
+                  {t('hero.badge')}
+                </span>
+              </motion.div>
 
-            <motion.p
-              initial={{ opacity: 0, y: 20 }}
-              animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-              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"
-            >
-              {t('hero.subtitle')}
-            </motion.p>
+              <motion.h1
+                id="hero-title"
+                initial={{ opacity: 0, y: 20 }}
+                animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.8, delay: 0.25, ease: EASE }}
+                className="mb-5 text-balance text-4xl font-bold leading-[1.06] tracking-tight text-white sm:mb-6 sm:text-6xl"
+              >
+                {t('hero.titleLine1')}{' '}
+                {/* Bloc plutot que <br /> : la coupure ne s'impose qu'a partir
+                    de sm, ou la ligne a la largeur pour la porter. */}
+                <span className="bg-gradient-to-r from-brand-turquoise to-brand-green bg-clip-text text-transparent sm:block">
+                  {t('hero.titleLine2')}
+                </span>
+              </motion.h1>
 
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
-              transition={{ duration: 0.8, delay: 0.5 }}
-              className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-6 mb-12 px-4 sm:px-0"
-            >
+              <motion.p
+                initial={{ opacity: 0, y: 20 }}
+                animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.8, delay: 0.35, ease: EASE }}
+                className="mx-auto mb-8 max-w-xl text-pretty text-base leading-relaxed text-white/80 sm:mb-10 sm:text-xl lg:mx-0"
+              >
+                {t('hero.subtitle')}
+              </motion.p>
+
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+                transition={{ duration: 0.8, delay: 0.45, ease: EASE }}
+                className="mx-auto flex w-full max-w-md flex-col items-stretch gap-3 sm:max-w-none sm:flex-row sm:items-center sm:justify-center sm:gap-4 lg:justify-start"
+              >
               {isAuthenticated && user ? (
                 <Link
                   href="/dashboard"
                   target="_blank"
                   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"
+                  className={`group inline-flex h-14 w-full items-center justify-center gap-2 rounded-lg bg-brand-turquoise px-8 text-base font-semibold text-white shadow-lg shadow-brand-navy/20 transition-all hover:bg-brand-turquoise/90 hover:shadow-2xl sm:w-auto sm:text-lg ${FOCUS_RING} focus-visible:ring-offset-brand-navy`}
                 >
                   <span>{t('hero.ctaAuthenticated')}</span>
-                  <LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                  <LayoutDashboard className="h-5 w-5 transition-transform group-hover:translate-x-1" />
                 </Link>
               ) : (
                 <Link
                   href="/register"
                   target="_blank"
                   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"
+                  className={`group inline-flex h-14 w-full items-center justify-center gap-2 rounded-lg bg-brand-turquoise px-8 text-base font-semibold text-white shadow-lg shadow-brand-navy/20 transition-all hover:bg-brand-turquoise/90 hover:shadow-2xl sm:w-auto sm:text-lg ${FOCUS_RING} focus-visible:ring-offset-brand-navy`}
                 >
                   <span>{t('hero.ctaRegister')}</span>
-                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                  <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
                 </Link>
               )}
               <button
                 type="button"
                 onClick={() => setIsDemoOpen(true)}
-                className="px-6 sm:px-8 py-3 sm:py-4 bg-white text-brand-navy rounded-lg hover:bg-neutral-50 transition-all hover:shadow-xl font-semibold text-base sm:text-lg w-full sm:w-auto text-center"
+                // Action secondaire : contour sur le fond plutot qu'un second
+                // aplat, pour que le CTA principal reste seul a porter l'oeil.
+                className={`inline-flex h-14 w-full items-center justify-center rounded-lg border border-white/40 bg-white/10 px-8 text-base font-semibold text-white backdrop-blur-sm transition-all hover:bg-white/20 sm:w-auto sm:text-lg ${FOCUS_RING} focus-visible:ring-offset-brand-navy`}
               >
                 {t('hero.ctaDemo')}
               </button>
             </motion.div>
-          </motion.div>
+
+              {/* Reassurance sous les CTA : les trois memes garanties qu'en bas
+                  de page, remontees la ou la decision se prend. */}
+              <motion.ul
+                initial={{ opacity: 0 }}
+                animate={isHeroInView ? { opacity: 1 } : {}}
+                transition={{ duration: 0.8, delay: 0.65, ease: EASE }}
+                className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-white/70 lg:justify-start"
+              >
+                {[
+                  t('cta.features.noCard'),
+                  t('cta.features.quickSetup'),
+                  t('cta.features.secure'),
+                ].map(item => (
+                  <li key={item} className="flex items-center gap-2">
+                    <CheckCircle2
+                      className="size-4 flex-shrink-0 text-brand-turquoise"
+                      aria-hidden="true"
+                    />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </motion.ul>
+            </motion.div>
+
+            {/* Signature de la page : la recherche de tarif se joue seule. */}
+            <motion.div
+              initial={{ opacity: 0, y: 28 }}
+              animate={isHeroInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.9, delay: 0.5, ease: EASE }}
+              className="flex justify-center lg:justify-end"
+            >
+              <RateSearchDemo />
+            </motion.div>
+          </div>
         </div>
 
-        <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
-              initial={{ pathLength: 0 }}
-              animate={{ pathLength: 1 }}
-              transition={{ duration: 2, ease: 'easeInOut' }}
+        <div className="pointer-events-none absolute bottom-0 left-0 right-0" aria-hidden="true">
+          <svg className="h-20 w-full lg:h-28" viewBox="0 0 1440 120" preserveAspectRatio="none">
+            <path
               d="M0,60 C240,90 480,30 720,60 C960,90 1200,30 1440,60 L1440,120 L0,120 Z"
               fill="white"
               opacity="0.8"
             />
-            <motion.path
-              initial={{ pathLength: 0 }}
-              animate={{ pathLength: 1 }}
-              transition={{ duration: 2.5, ease: 'easeInOut' }}
+            <path
               d="M0,80 C240,50 480,110 720,80 C960,50 1200,110 1440,80 L1440,120 L0,120 Z"
               fill="white"
             />
@@ -419,72 +539,73 @@ export default function LandingPage() {
       </section>
 
       {/* Stats Section */}
-      <section ref={statsRef} className="py-10 sm:py-16 bg-neutral-50">
+      <section ref={statsRef} className={`bg-neutral-50 ${SECTION_PADDING_TIGHT}`}>
         <motion.div
           variants={containerVariants}
           initial="hidden"
           animate={isStatsInView ? 'visible' : 'hidden'}
-          className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+          className={CONTAINER}
         >
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+          {/* Separateurs plutot que grands ecarts : les quatre chiffres se
+              lisent comme un seul bandeau et non comme quatre blocs isoles. */}
+          <dl className="grid grid-cols-2 gap-y-10 sm:gap-y-12 lg:grid-cols-4 lg:divide-x lg:divide-border lg:gap-y-0">
             {stats.map((stat, index) => {
               const IconComponent = stat.icon;
               return (
                 <motion.div
                   key={index}
                   variants={itemVariants}
-                  className="text-center group cursor-pointer"
+                  className="group px-4 text-center lg:px-8"
                 >
-                  <div className="flex justify-center mb-3">
-                    <div className="p-3 bg-brand-turquoise/10 rounded-full group-hover:bg-brand-turquoise/20 transition-colors">
-                      <IconComponent className="w-8 h-8 text-brand-turquoise" />
+                  <div className="mb-3 flex justify-center">
+                    <div className="rounded-full bg-brand-turquoise/10 p-3 transition-colors group-hover:bg-brand-turquoise/20">
+                      <IconComponent className="h-7 w-7 text-brand-turquoise" aria-hidden="true" />
                     </div>
                   </div>
-                  <motion.div
-                    initial={{ scale: 0 }}
-                    animate={isStatsInView ? { scale: 1 } : {}}
-                    transition={{ duration: 0.5, delay: index * 0.1 }}
-                    className="text-3xl sm:text-5xl lg:text-6xl font-bold text-brand-navy mb-2 tabular-nums"
-                  >
-                    <AnimatedCounter
-                      end={stat.end}
-                      prefix={stat.prefix}
-                      suffix={stat.suffix}
-                      decimals={stat.decimals}
-                      isActive={isStatsInView}
-                      duration={2.2}
-                    />
-                  </motion.div>
-                  <div className="text-neutral-600 font-medium">{stat.label}</div>
+                  {/* `dt` precede `dd` dans le source (contrainte de <dl>) ;
+                      l'inversion visuelle est faite par flex-col-reverse. */}
+                  <div className="flex flex-col-reverse">
+                    <dt className="mt-1 text-sm font-medium text-neutral-600 sm:text-base">
+                      {stat.label}
+                    </dt>
+                    <dd className="text-4xl font-bold tabular-nums tracking-tight text-brand-navy sm:text-5xl">
+                      <AnimatedCounter
+                        end={stat.end}
+                        prefix={stat.prefix}
+                        suffix={stat.suffix}
+                        decimals={stat.decimals}
+                        isActive={isStatsInView}
+                        duration={2.2}
+                      />
+                    </dd>
+                  </div>
                 </motion.div>
               );
             })}
-          </div>
+          </dl>
         </motion.div>
       </section>
 
       {/* Features Section */}
-      <section ref={featuresRef} id="features" className="py-12 sm:py-20 lg:py-32">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isFeaturesInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            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">
-              {t('features.title')}
-            </h2>
-            <p className="text-base sm:text-xl text-neutral-600 max-w-2xl mx-auto">
-              {t('features.subtitle')}
-            </p>
-          </motion.div>
+      <section
+        ref={featuresRef}
+        id="features"
+        aria-labelledby="features-title"
+        className={SECTION_PADDING}
+      >
+        <div className={CONTAINER}>
+          <SectionHeading
+            id="features-title"
+            title={t('features.title')}
+            subtitle={t('features.subtitle')}
+            inView={isFeaturesInView}
+          />
 
           <motion.div
             variants={containerVariants}
             initial="hidden"
             animate={isFeaturesInView ? 'visible' : 'hidden'}
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+            className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"
           >
             {features.map((feature, index) => {
               const IconComponent = feature.icon;
@@ -492,34 +613,35 @@ export default function LandingPage() {
                 <motion.div
                   key={index}
                   variants={itemVariants}
-                  whileHover={{ y: -8 }}
+                  whileHover={{ y: -4 }}
                   className="h-full"
                 >
                   <Link
                     href={feature.link}
                     target="_blank"
                     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-border hover:border-brand-turquoise/30 relative overflow-hidden"
+                    // Ombre allegee : douze cartes en `shadow-lg` saturaient la
+                    // page. Le relief n'apparait plus qu'au survol.
+                    className={`group relative flex h-full flex-col overflow-hidden rounded-2xl border border-border bg-white p-6 shadow-sm transition-all hover:border-brand-turquoise/40 hover:shadow-xl sm:p-7 ${FOCUS_RING}`}
                   >
                     <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`}
-                    />
-                    <div
-                      className={`w-14 h-14 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-5 group-hover:scale-110 transition-transform flex-shrink-0`}
+                      aria-hidden="true"
+                      className="mb-5 flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-brand-navy transition-colors group-hover:bg-brand-turquoise"
                     >
-                      <IconComponent className="w-7 h-7 text-white" />
+                      <IconComponent className="size-6 text-brand-turquoise transition-colors group-hover:text-brand-navy" />
                     </div>
-                    <h3 className="text-xl font-bold text-brand-navy mb-3 group-hover:text-brand-turquoise transition-colors">
+                    <h3 className="mb-2 text-lg font-bold text-brand-navy transition-colors group-hover:text-brand-turquoise">
                       {feature.title}
                     </h3>
-                    <p className="text-neutral-600 leading-relaxed flex-1">{feature.description}</p>
-                    <div className="mt-5 pt-4 border-t border-border flex items-center justify-between">
-                      <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>
+                    <p className="flex-1 text-sm leading-relaxed text-neutral-600">
+                      {feature.description}
+                    </p>
+                    <div className="mt-5 flex items-center gap-2 text-sm font-semibold text-brand-navy">
+                      <span>{tCommon('discover')}</span>
+                      <ArrowRight
+                        className="h-4 w-4 text-brand-turquoise transition-transform group-hover:translate-x-1"
+                        aria-hidden="true"
+                      />
                     </div>
                   </Link>
                 </motion.div>
@@ -530,17 +652,27 @@ export default function LandingPage() {
       </section>
 
       {/* Partner Logos Section */}
-      <section className="py-16 bg-white">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+      <section
+        aria-labelledby="partners-title"
+        className={`border-y border-border bg-white ${SECTION_PADDING_TIGHT}`}
+      >
+        <div className={CONTAINER}>
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.6 }}
-            className="text-center mb-12"
+            className="mb-10 text-center"
           >
-            <h3 className="text-2xl font-bold text-brand-navy mb-2">{t('partners.title')}</h3>
-            <p className="text-neutral-600">{t('partners.subtitle')}</p>
+            {/* Bandeau de preuve, pas un chapitre : titre discret pour ne pas
+                concurrencer les vrais titres de section. */}
+            <h2
+              id="partners-title"
+              className="text-sm font-semibold uppercase tracking-[0.12em] text-neutral-500"
+            >
+              {t('partners.title')}
+            </h2>
+            <p className="mt-2 text-neutral-600">{t('partners.subtitle')}</p>
           </motion.div>
 
           <motion.div
@@ -548,7 +680,7 @@ export default function LandingPage() {
             whileInView={{ opacity: 1 }}
             viewport={{ once: true }}
             transition={{ duration: 0.8, delay: 0.2 }}
-            className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center"
+            className="grid grid-cols-2 items-center gap-x-8 gap-y-6 md:grid-cols-4 lg:grid-cols-6"
           >
             {[
               'ECU Line 2.png',
@@ -564,15 +696,15 @@ export default function LandingPage() {
                 whileInView={{ opacity: 1, scale: 1 }}
                 viewport={{ once: true }}
                 transition={{ duration: 0.5, delay: index * 0.1 }}
-                whileHover={{ scale: 1.1 }}
-                className="flex items-center justify-center p-4 grayscale hover:grayscale-0 transition-all cursor-pointer"
+                whileHover={{ scale: 1.04 }}
+                className="flex items-center justify-center p-2 opacity-70 grayscale transition-all hover:opacity-100 hover:grayscale-0"
               >
                 <Image
                   src={`/assets/logos/partner/${logo}`}
                   alt={`Partner ${index + 1}`}
                   width={120}
                   height={60}
-                  className="object-contain h-12 w-auto"
+                  className="h-10 w-auto object-contain sm:h-12"
                 />
               </motion.div>
             ))}
@@ -584,31 +716,23 @@ export default function LandingPage() {
       <section
         ref={pricingRef}
         id="pricing"
-        className="py-12 sm:py-20 lg:py-32 bg-gradient-to-b from-white to-neutral-50"
+        aria-labelledby="pricing-title"
+        className={`bg-gradient-to-b from-white to-neutral-50 ${SECTION_PADDING}`}
       >
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isPricingInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            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">
-              {t('pricing.badge')}
-            </span>
-            <h2 className="text-2xl sm:text-4xl lg:text-5xl font-bold text-brand-navy mb-3 sm:mb-4">
-              {t('pricing.title')}
-            </h2>
-            <p className="text-base sm:text-xl text-neutral-600 max-w-2xl mx-auto">
-              {t('pricing.subtitle')}
-            </p>
-          </motion.div>
+        <div className={CONTAINER}>
+          <SectionHeading
+            id="pricing-title"
+            eyebrow={t('pricing.badge')}
+            title={t('pricing.title')}
+            subtitle={t('pricing.subtitle')}
+            inView={isPricingInView}
+          />
 
           <motion.div
             initial={{ opacity: 0, y: 10 }}
             animate={isPricingInView ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.6, delay: 0.2 }}
-            className="flex items-center justify-center gap-4 mb-12"
+            className="mb-12 flex flex-wrap items-center justify-center gap-x-4 gap-y-3"
           >
             <span
               className={`text-sm font-medium ${!billingYearly ? 'text-brand-navy' : 'text-neutral-400'}`}
@@ -616,12 +740,17 @@ export default function LandingPage() {
               {t('pricing.monthly')}
             </span>
             <button
+              type="button"
+              role="switch"
+              aria-checked={billingYearly}
+              aria-label={t('pricing.yearly')}
               onClick={() => setBillingYearly(v => !v)}
-              className={`relative inline-flex h-7 w-14 items-center rounded-full transition-colors focus:outline-none ${
+              className={`relative inline-flex h-7 w-14 flex-shrink-0 items-center rounded-full transition-colors ${FOCUS_RING} ${
                 billingYearly ? 'bg-brand-turquoise' : 'bg-neutral-300'
               }`}
             >
               <span
+                aria-hidden="true"
                 className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform ${
                   billingYearly ? 'translate-x-8' : 'translate-x-1'
                 }`}
@@ -632,18 +761,23 @@ export default function LandingPage() {
             >
               {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">
-                {t('pricing.yearlySaving')}
-              </span>
-            )}
+            {/* Place reservee en permanence : sans cela, l'apparition du badge
+                decalait toute la ligne au moment du basculement. */}
+            <span
+              aria-hidden={!billingYearly}
+              className={`rounded-full bg-brand-green/10 px-2.5 py-1 text-xs font-bold text-brand-green transition-opacity ${
+                billingYearly ? 'opacity-100' : 'invisible opacity-0'
+              }`}
+            >
+              {t('pricing.yearlySaving')}
+            </span>
           </motion.div>
 
           <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"
+            className="grid grid-cols-1 items-stretch gap-6 md:grid-cols-2 lg:grid-cols-4 lg:gap-5"
           >
             {pricingPlans.map(plan => {
               const planName = t(`pricing.plans.${plan.key}.name` as any);
@@ -661,25 +795,31 @@ export default function LandingPage() {
                 <motion.div
                   key={plan.key}
                   variants={itemVariants}
-                  whileHover={{ y: -6 }}
-                  className={`relative flex flex-col rounded-2xl transition-all overflow-hidden ${
+                  whileHover={{ y: -4 }}
+                  // L'offre mise en avant est surelevee a partir de lg : sur une
+                  // rangee de quatre cartes, l'aplat navy seul ne suffisait pas
+                  // a la designer au premier coup d'oeil.
+                  className={`relative flex flex-col overflow-hidden rounded-2xl transition-all ${
                     plan.highlighted
-                      ? 'bg-brand-navy shadow-2xl ring-2 ring-brand-turquoise'
-                      : 'bg-white shadow-lg border border-border hover:shadow-xl hover:border-brand-turquoise/30'
+                      ? 'bg-brand-navy shadow-2xl ring-2 ring-brand-turquoise lg:-mt-4 lg:mb-4'
+                      : 'border border-border bg-white shadow-sm hover:border-brand-turquoise/30 hover:shadow-xl'
                   }`}
                 >
-                  <div className={`h-1.5 w-full bg-gradient-to-r ${plan.accentColor}`} />
+                  <div
+                    aria-hidden="true"
+                    className={`h-1.5 w-full bg-gradient-to-r ${plan.accentColor}`}
+                  />
 
                   {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">
+                    <div className="absolute right-4 top-5">
+                      <span className="rounded-full bg-brand-turquoise px-2.5 py-1 text-xs font-bold text-white">
                         {t('pricing.popularBadge')}
                       </span>
                     </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">
+                    <div className="absolute right-4 top-5">
+                      <span className="rounded-full bg-gradient-to-r from-brand-navy to-brand-turquoise px-2.5 py-1 text-xs font-bold text-white">
                         {t('pricing.customBadge')}
                       </span>
                     </div>
@@ -820,12 +960,12 @@ export default function LandingPage() {
 
                     <Link
                       href={plan.ctaLink}
-                      className={`block w-full text-center py-3 px-6 rounded-xl font-semibold text-sm transition-all ${
+                      className={`inline-flex h-11 w-full items-center justify-center rounded-lg px-6 text-sm font-semibold transition-all ${FOCUS_RING} ${
                         plan.highlighted
-                          ? 'bg-brand-turquoise text-white hover:bg-brand-turquoise/90 shadow-lg shadow-brand-turquoise/30 hover:shadow-xl'
+                          ? 'bg-brand-turquoise text-white shadow-lg shadow-brand-turquoise/30 hover:bg-brand-turquoise/90 hover:shadow-xl focus-visible:ring-offset-brand-navy'
                           : plan.key === 'bronze'
                             ? 'bg-neutral-100 text-brand-navy hover:bg-neutral-200'
-                            : 'bg-brand-navy text-white hover:bg-brand-navy/90 shadow-md hover:shadow-lg'
+                            : 'bg-brand-navy text-white shadow-sm hover:bg-brand-navy/90 hover:shadow-md'
                       }`}
                     >
                       {planCta}
@@ -856,38 +996,40 @@ export default function LandingPage() {
       {/* How It Works Section */}
       <section
         ref={howRef}
-        className="py-20 lg:py-32 bg-gradient-to-br from-brand-navy to-brand-navy/95 relative overflow-hidden"
+        aria-labelledby="how-title"
+        className={`relative overflow-hidden bg-gradient-to-br from-brand-navy to-brand-navy/95 ${SECTION_PADDING}`}
       >
-        <div className="absolute inset-0 opacity-10 pointer-events-none">
-          <div className="absolute top-10 left-10 w-72 h-72 bg-brand-turquoise rounded-full blur-3xl" />
-          <div className="absolute bottom-10 right-10 w-72 h-72 bg-brand-green rounded-full blur-3xl" />
+        <div className="pointer-events-none absolute inset-0 opacity-10" aria-hidden="true">
+          <div className="absolute left-10 top-10 h-72 w-72 rounded-full bg-brand-turquoise blur-3xl" />
+          <div className="absolute bottom-10 right-10 h-72 w-72 rounded-full bg-brand-green blur-3xl" />
         </div>
 
-        <div className="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isHowInView ? { 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('howItWorks.title')}
-            </h2>
-            <p className="text-xl text-white/80 max-w-2xl mx-auto">{t('howItWorks.subtitle')}</p>
-          </motion.div>
+        <div className={`relative z-10 ${CONTAINER}`}>
+          <SectionHeading
+            id="how-title"
+            title={t('howItWorks.title')}
+            subtitle={t('howItWorks.subtitle')}
+            tone="dark"
+            inView={isHowInView}
+          />
 
           <div className="relative">
-            <div className="hidden lg:block absolute top-10 left-[12.5%] right-[12.5%] h-px bg-white/15">
+            <div
+              aria-hidden="true"
+              className="absolute left-[12.5%] right-[12.5%] top-10 hidden h-px bg-white/15 lg:block"
+            >
+              {/* Le trait se remplit dans le sens de la lecture : c'est la
+                  traversee, du depart a l'arrivee. */}
               <motion.div
                 initial={{ scaleX: 0 }}
                 animate={isHowInView ? { scaleX: 1 } : {}}
-                transition={{ duration: 1.6, delay: 0.5, ease: 'easeInOut' }}
+                transition={{ duration: 1.4, delay: 0.4, ease: EASE }}
                 style={{ transformOrigin: 'left' }}
                 className="absolute inset-0 bg-brand-turquoise"
               />
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4 lg:gap-8">
               {[
                 { stepKey: 'step1', step: '01', icon: Search },
                 { stepKey: 'step2', step: '02', icon: BarChart3 },
@@ -898,25 +1040,29 @@ export default function LandingPage() {
                 return (
                   <motion.div
                     key={index}
-                    initial={{ opacity: 0, y: 30 }}
+                    initial={{ opacity: 0, y: 16 }}
                     animate={isHowInView ? { opacity: 1, y: 0 } : {}}
-                    transition={{ duration: 0.6, delay: 0.3 + index * 0.15 }}
-                    className="text-center relative z-10"
+                    transition={{ duration: 0.55, delay: 0.3 + index * 0.12, ease: EASE }}
+                    className="relative z-10 text-center"
                   >
-                    <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}
+                    {/* Escale sur la ligne : disque navy cercle de turquoise,
+                        l'icone du module a l'interieur. Le numero, lui, est
+                        une legende — la sequence est reelle, il la porte. */}
+                    <div className="mb-4 flex justify-center">
+                      <div className="flex size-20 items-center justify-center rounded-full border border-brand-turquoise/40 bg-brand-navy shadow-xl">
+                        <IconComponent
+                          className="size-7 text-brand-turquoise"
+                          aria-hidden="true"
+                        />
                       </div>
                     </div>
-                    <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">
+                    <p className="mb-2 font-heading text-xs font-bold tracking-[0.2em] tabular-nums text-brand-turquoise">
+                      {step.step}
+                    </p>
+                    <h3 className="mb-2 text-lg font-bold text-white">
                       {t(`howItWorks.${step.stepKey}.title` as any)}
                     </h3>
-                    <p className="text-white/70 text-sm leading-relaxed">
+                    <p className="mx-auto max-w-xs text-pretty text-sm leading-relaxed text-white/70">
                       {t(`howItWorks.${step.stepKey}.description` as any)}
                     </p>
                   </motion.div>
@@ -926,19 +1072,22 @@ export default function LandingPage() {
           </div>
 
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 16 }}
             animate={isHowInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.6, delay: 1.4 }}
+            transition={{ duration: 0.6, delay: 1, ease: EASE }}
             className="mt-16 text-center"
           >
             <Link
               href="/register"
               target="_blank"
               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"
+              className={`group inline-flex h-14 items-center justify-center gap-2 rounded-lg bg-brand-turquoise px-8 text-lg font-semibold text-white transition-all hover:bg-brand-turquoise/90 hover:shadow-2xl ${FOCUS_RING} focus-visible:ring-offset-brand-navy`}
             >
               <span>{tCommon('tryNow')}</span>
-              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+              <ArrowRight
+                className="h-5 w-5 transition-transform group-hover:translate-x-1"
+                aria-hidden="true"
+              />
             </Link>
             <p className="mt-3 text-white/50 text-sm">{t('howItWorks.ctaHint')}</p>
           </motion.div>
@@ -948,130 +1097,135 @@ export default function LandingPage() {
       {/* Testimonials Section */}
       <section
         ref={testimonialsRef}
-        className="py-12 sm:py-20 lg:py-32 bg-gradient-to-br from-neutral-50 to-white"
+        aria-labelledby="testimonials-title"
+        className={`bg-gradient-to-br from-neutral-50 to-white ${SECTION_PADDING}`}
       >
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={isTestimonialsInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.8 }}
-            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">
-              {t('testimonials.title')}
-            </h2>
-            <p className="text-base sm:text-xl text-neutral-600 max-w-2xl mx-auto">
-              {t('testimonials.subtitle')}
-            </p>
-          </motion.div>
+        <div className={CONTAINER}>
+          <SectionHeading
+            id="testimonials-title"
+            title={t('testimonials.title')}
+            subtitle={t('testimonials.subtitle')}
+            inView={isTestimonialsInView}
+          />
 
           <motion.div
             variants={containerVariants}
             initial="hidden"
             animate={isTestimonialsInView ? 'visible' : 'hidden'}
-            className="grid grid-cols-1 md:grid-cols-3 gap-8"
+            className="grid grid-cols-1 gap-6 md:grid-cols-3"
           >
             {testimonials.map((testimonial, index) => (
-              <motion.div
+              <motion.figure
                 key={index}
                 variants={itemVariants}
-                whileHover={{ y: -10 }}
-                className="bg-white p-8 rounded-2xl shadow-lg border border-border"
+                whileHover={{ y: -4 }}
+                className="flex h-full flex-col rounded-2xl border border-border bg-white p-6 shadow-sm transition-shadow hover:shadow-xl sm:p-7"
               >
-                <div className="flex mb-4">
+                <div className="mb-4 flex" role="img" aria-label="5/5">
                   {[...Array(5)].map((_, i) => (
                     <svg
                       key={i}
-                      className="w-5 h-5 text-yellow-400 fill-current"
+                      aria-hidden="true"
+                      className="h-4 w-4 fill-current text-yellow-400"
                       viewBox="0 0 20 20"
                     >
                       <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                     </svg>
                   ))}
                 </div>
-                <p className="text-neutral-700 mb-6 leading-relaxed italic">"{testimonial.quote}"</p>
-                <div className="border-t pt-4">
+                <blockquote className="flex-1 text-pretty leading-relaxed text-neutral-700">
+                  &ldquo;{testimonial.quote}&rdquo;
+                </blockquote>
+                <figcaption className="mt-6 border-t border-border pt-4">
                   <div className="font-bold text-brand-navy">{testimonial.author}</div>
                   <div className="text-sm text-neutral-600">
-                    {testimonial.role} - {testimonial.company}
+                    {testimonial.role} — {testimonial.company}
                   </div>
-                </div>
-              </motion.div>
+                </figcaption>
+              </motion.figure>
             ))}
           </motion.div>
         </div>
       </section>
 
       {/* CTA Section */}
-      <section ref={ctaRef} className="py-12 sm:py-20 lg:py-32">
-        <motion.div
-          variants={containerVariants}
-          initial="hidden"
-          animate={isCtaInView ? 'visible' : 'hidden'}
-          className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
-        >
-          <motion.div variants={itemVariants}>
-            <h2 className="text-2xl sm:text-4xl lg:text-5xl font-bold text-brand-navy mb-4 sm:mb-6">
-              {t('cta.title')}
-            </h2>
-            <p className="text-base sm:text-xl text-neutral-600 mb-8 sm:mb-10">{t('cta.subtitle')}</p>
-          </motion.div>
-
+      <section ref={ctaRef} aria-labelledby="cta-title" className={SECTION_PADDING}>
+        <div className={CONTAINER}>
           <motion.div
-            variants={itemVariants}
-            className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-6 px-2 sm:px-0"
+            variants={containerVariants}
+            initial="hidden"
+            animate={isCtaInView ? 'visible' : 'hidden'}
+            // Panneau delimite : la derniere section flottait sur le meme blanc
+            // que la precedente et se lisait comme sa suite plutot que comme
+            // une adresse directe au lecteur.
+            className="mx-auto max-w-4xl rounded-3xl border border-border bg-neutral-50 px-6 py-12 text-center sm:px-12 sm:py-16"
           >
-            {isAuthenticated && user ? (
-              <Link
-                href="/dashboard"
-                target="_blank"
-                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"
+            <motion.div variants={itemVariants}>
+              <h2
+                id="cta-title"
+                className="text-balance text-3xl font-bold tracking-tight text-brand-navy sm:text-4xl lg:text-5xl"
               >
-                <span>{t('cta.ctaAuthenticated')}</span>
-                <LayoutDashboard className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
-              </Link>
-            ) : (
-              <>
-                <Link
-                  href="/register"
-                  target="_blank"
-                  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>{t('cta.ctaRegister')}</span>
-                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
-                </Link>
-                <Link
-                  href="/login"
-                  target="_blank"
-                  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"
-                >
-                  {t('cta.ctaLogin')}
-                </Link>
-              </>
-            )}
-          </motion.div>
+                {t('cta.title')}
+              </h2>
+              <p className="mx-auto mt-4 max-w-2xl text-pretty text-base text-neutral-600 sm:text-lg">
+                {t('cta.subtitle')}
+              </p>
+            </motion.div>
 
-          <motion.div
-            variants={itemVariants}
-            className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 mt-8 text-sm text-neutral-500"
-          >
-            <div className="flex items-center space-x-2">
-              <CheckCircle2 className="w-4 h-4 text-brand-green" />
-              <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>{t('cta.features.quickSetup')}</span>
-            </div>
-            <div className="flex items-center space-x-2">
-              <Shield className="w-4 h-4 text-brand-green" />
-              <span>{t('cta.features.secure')}</span>
-            </div>
+            <motion.div
+              variants={itemVariants}
+              className="mx-auto mt-8 flex w-full max-w-md flex-col items-stretch justify-center gap-3 sm:max-w-none sm:flex-row sm:items-center sm:gap-4"
+            >
+              {isAuthenticated && user ? (
+                <Link
+                  href="/dashboard"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`group inline-flex h-14 w-full items-center justify-center gap-2 rounded-lg bg-brand-turquoise px-8 text-base font-semibold text-white transition-all hover:bg-brand-turquoise/90 hover:shadow-xl sm:w-auto sm:text-lg ${FOCUS_RING}`}
+                >
+                  <span>{t('cta.ctaAuthenticated')}</span>
+                  <LayoutDashboard className="h-5 w-5 transition-transform group-hover:translate-x-1" />
+                </Link>
+              ) : (
+                <>
+                  <Link
+                    href="/register"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={`group inline-flex h-14 w-full items-center justify-center gap-2 rounded-lg bg-brand-turquoise px-8 text-base font-semibold text-white transition-all hover:bg-brand-turquoise/90 hover:shadow-xl sm:w-auto sm:text-lg ${FOCUS_RING}`}
+                  >
+                    <span>{t('cta.ctaRegister')}</span>
+                    <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
+                  </Link>
+                  <Link
+                    href="/login"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={`inline-flex h-14 w-full items-center justify-center rounded-lg border border-brand-navy/15 bg-white px-8 text-base font-semibold text-brand-navy transition-all hover:bg-white hover:shadow-md sm:w-auto sm:text-lg ${FOCUS_RING}`}
+                  >
+                    {t('cta.ctaLogin')}
+                  </Link>
+                </>
+              )}
+            </motion.div>
+
+            <motion.ul
+              variants={itemVariants}
+              className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-3 text-sm text-neutral-500"
+            >
+              {[
+                { icon: CheckCircle2, label: t('cta.features.noCard') },
+                { icon: Clock, label: t('cta.features.quickSetup') },
+                { icon: Shield, label: t('cta.features.secure') },
+              ].map(({ icon: Icon, label }) => (
+                <li key={label} className="flex items-center gap-2">
+                  <Icon className="h-4 w-4 flex-shrink-0 text-brand-green" aria-hidden="true" />
+                  <span>{label}</span>
+                </li>
+              ))}
+            </motion.ul>
           </motion.div>
-        </motion.div>
+        </div>
       </section>
 
       <LandingFooter />
diff --git a/apps/frontend/app/[locale]/register/page.tsx b/apps/frontend/app/[locale]/register/page.tsx
index 7338d14..1797076 100644
--- a/apps/frontend/app/[locale]/register/page.tsx
+++ b/apps/frontend/app/[locale]/register/page.tsx
@@ -215,7 +215,7 @@ function RegisterPageContent() {
           <p className="text-body-lg text-neutral-200 mb-12">{t('sidePanel.description')}</p>
           <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">
+              <div className="flex-shrink-0 w-12 h-12 bg-brand-blue rounded-lg flex items-center justify-center">
                 <svg
                   className="w-6 h-6 text-white"
                   fill="none"
@@ -238,7 +238,7 @@ function RegisterPageContent() {
               </div>
             </div>
             <div className="flex items-start">
-              <div className="flex-shrink-0 w-12 h-12 bg-brand-turquoise rounded-lg flex items-center justify-center">
+              <div className="flex-shrink-0 w-12 h-12 bg-brand-blue rounded-lg flex items-center justify-center">
                 <svg
                   className="w-6 h-6 text-white"
                   fill="none"
@@ -263,7 +263,7 @@ function RegisterPageContent() {
               </div>
             </div>
             <div className="flex items-start">
-              <div className="flex-shrink-0 w-12 h-12 bg-brand-turquoise rounded-lg flex items-center justify-center">
+              <div className="flex-shrink-0 w-12 h-12 bg-brand-blue rounded-lg flex items-center justify-center">
                 <svg
                   className="w-6 h-6 text-white"
                   fill="none"
@@ -291,7 +291,7 @@ function RegisterPageContent() {
             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">
+              <div className="text-display-sm text-brand-blue">
                 <AnimatedCounter end={2} suffix="k+" isActive={statsActive} />
               </div>
               <div className="text-body-sm text-neutral-300 mt-1">
@@ -299,7 +299,7 @@ function RegisterPageContent() {
               </div>
             </div>
             <div>
-              <div className="text-display-sm text-brand-turquoise">
+              <div className="text-display-sm text-brand-blue">
                 <AnimatedCounter end={150} suffix="+" isActive={statsActive} />
               </div>
               <div className="text-body-sm text-neutral-300 mt-1">
@@ -307,7 +307,7 @@ function RegisterPageContent() {
               </div>
             </div>
             <div>
-              <div className="text-display-sm text-brand-turquoise">
+              <div className="text-display-sm text-brand-blue">
                 <AnimatedCounter end={24} suffix="/7" isActive={statsActive} />
               </div>
               <div className="text-body-sm text-neutral-300 mt-1">
diff --git a/apps/frontend/app/[locale]/reset-password/page.tsx b/apps/frontend/app/[locale]/reset-password/page.tsx
index aef1817..9547277 100644
--- a/apps/frontend/app/[locale]/reset-password/page.tsx
+++ b/apps/frontend/app/[locale]/reset-password/page.tsx
@@ -276,7 +276,7 @@ function ResetPasswordContent() {
               {tips.map(tip => (
                 <div key={tip} className="flex items-center gap-3">
                   <svg
-                    className="w-5 h-5 text-brand-turquoise flex-shrink-0"
+                    className="w-5 h-5 text-brand-blue flex-shrink-0"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
diff --git a/apps/frontend/app/[locale]/verify-email/page.tsx b/apps/frontend/app/[locale]/verify-email/page.tsx
index e7ed275..c422ebf 100644
--- a/apps/frontend/app/[locale]/verify-email/page.tsx
+++ b/apps/frontend/app/[locale]/verify-email/page.tsx
@@ -47,7 +47,7 @@ function VerifyEmailContent() {
             <h1 className="text-4xl font-bold text-brand-navy">Xpeditis</h1>
             <h2 className="mt-6 text-2xl font-bold text-brand-navy">{t('verifyingTitle')}</h2>
             <div className="mt-4">
-              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-turquoise mx-auto"></div>
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-blue mx-auto"></div>
             </div>
           </div>
         </div>
@@ -89,7 +89,7 @@ function VerifyEmailContent() {
           </div>
 
           <div className="text-center">
-            <Link href="/dashboard" className="font-medium text-brand-navy hover:text-brand-turquoise">
+            <Link href="/dashboard" className="font-medium text-brand-navy hover:text-brand-blue">
               {t('goToDashboard')}
             </Link>
           </div>
@@ -132,7 +132,7 @@ function VerifyEmailContent() {
 
         <div className="text-center space-y-2">
           <p className="text-sm text-neutral-600">{t('errorHint')}</p>
-          <Link href="/login" className="block font-medium text-brand-navy hover:text-brand-turquoise">
+          <Link href="/login" className="block font-medium text-brand-navy hover:text-brand-blue">
             {t('backToLogin')}
           </Link>
         </div>
diff --git a/apps/frontend/app/globals.css b/apps/frontend/app/globals.css
index b068c8b..ef22ce8 100644
--- a/apps/frontend/app/globals.css
+++ b/apps/frontend/app/globals.css
@@ -22,11 +22,12 @@
     --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    /* Anneau de focus = turquoise de marque #34CCCD.
-       Restauration de la charte : la valeur precedente etait le bleu shadcn
-       par defaut (221.2 83.2% 53.3%), qui n'appartient pas au design system
-       Xpeditis. Voir docs/design-system-audit.md §1.3. */
-    --ring: 180 60.5% 50.4%;
+    /* Anneau de focus = accent applicatif #2563EB.
+       Le turquoise #34CCCD reste l'accent du site vitrine, mais a l'interieur
+       du produit l'action est portee par le bleu : c'est la couleur d'origine
+       du dashboard, et elle tient le contraste que le turquoise n'atteint pas
+       sur fond clair (4,55:1 contre 2,05:1). */
+    --ring: 221.2 83.2% 53.3%;
     --radius: 0.5rem;
   }
 }
@@ -72,14 +73,13 @@
      Elles seront retirees quand ces pages passeront aux primitives de
      src/components/ui. Ne pas les supprimer avant : voir docs/ui-audit.md §D6. */
 
-  /* Texte navy sur turquoise : 8,49:1 (AAA). Le blanc sur turquoise ne donne
-     que 2,05:1 et echoue AA. Voir docs/ui-architecture.md §17. */
+  /* Bouton d'action : navy plein, texte blanc (14,2:1, AAA). */
   .btn-primary {
-    @apply bg-accent text-brand-navy font-heading font-semibold px-6 py-3 rounded-lg hover:bg-accent/90 transition-colors shadow-sm hover:shadow;
+    @apply bg-brand-navy text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-brand-navy/90 transition-colors shadow-sm hover:shadow;
   }
 
   .btn-secondary {
-    @apply bg-primary text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-neutral-800 transition-colors shadow-sm hover:shadow;
+    @apply bg-brand-navy text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-brand-navy/90 transition-colors shadow-sm hover:shadow;
   }
 
   .btn-success {
@@ -108,10 +108,8 @@
     @apply badge bg-success/10 text-success;
   }
 
-  /* Le turquoise en texte sur fond clair echoue AA : le libelle passe en navy,
-     le turquoise reste sur le fond. */
   .badge-info {
-    @apply badge bg-accent/10 text-brand-navy;
+    @apply badge bg-brand-blue-soft text-brand-blue-dark;
   }
 
   .badge-warning {
@@ -127,12 +125,12 @@
     /* Souligne en permanence : un lien identifie par la seule couleur echoue au
        critere WCAG 1.4.1. Le navy assure par ailleurs le contraste que le
        turquoise ne tient pas sur fond clair. */
-    @apply text-brand-navy underline underline-offset-2 transition-colors hover:text-accent;
+    @apply text-brand-blue underline underline-offset-2 transition-colors hover:text-brand-blue-dark;
   }
 
   /* Form elements */
   .input {
-    @apply border border-neutral-300 rounded-lg px-4 py-2.5 font-body text-body focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-colors;
+    @apply border border-neutral-300 rounded-lg px-4 py-2.5 font-body text-body focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-colors;
   }
 
   .label {
diff --git a/apps/frontend/messages/en.json b/apps/frontend/messages/en.json
index a5765c1..10dae5c 100644
--- a/apps/frontend/messages/en.json
+++ b/apps/frontend/messages/en.json
@@ -157,7 +157,20 @@
       "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"
+      "ctaDemo": "See the demo",
+      "demo": {
+        "ariaLabel": "Demo: ocean rate search from {origin} to {destination}, three offers compared",
+        "label": "Rate search",
+        "live": "Live",
+        "origin": "Origin",
+        "destination": "Destination",
+        "load": "LCL · 2.4 CBM · 850 kg · 1 pallet",
+        "transit": "{days} days transit",
+        "best": "Best price",
+        "searching": "Querying carriers...",
+        "resultCount": "{count} comparable offers",
+        "elapsed": "1.8 s"
+      }
     },
     "stats": {
       "carriers": "Shipping Lines",
@@ -359,7 +372,12 @@
         "pending": "Pending",
         "totalWeight": "Total Weight",
         "thisMonth": "+{count} this month",
-        "acceptanceRate": "{rate}% accepted"
+        "acceptanceRate": "{rate}% accepted",
+        "bookingsThisMonth": "Bookings this month",
+        "revenue": "Commission earned",
+        "pendingConfirmations": "Awaiting confirmation",
+        "vsLastMonth": "vs last month",
+        "volume": "Volume shipped"
       },
       "charts": {
         "distribution": {
@@ -373,6 +391,23 @@
           "title": "Weight by Carrier",
           "description": "Top 5 carriers by weight (KG)",
           "weight": "Weight"
+        },
+        "volume": {
+          "title": "Booking volume",
+          "description": "Last six months",
+          "series": "Bookings",
+          "empty": "Not enough history yet"
+        },
+        "status": {
+          "title": "Request tracking",
+          "description": "Carrier responses",
+          "rateLabel": "Acceptance rate"
+        },
+        "lanes": {
+          "title": "Busiest trade lanes",
+          "description": "Top 5 by booking count",
+          "series": "Bookings",
+          "empty": "No trade lane recorded"
         }
       },
       "performance": {
@@ -400,6 +435,25 @@
         "totalVolume": "Total Volume (CBM)",
         "acceptanceRate": "Acceptance rate (%)",
         "avgPrice": "Average price ($)"
+      },
+      "alerts": {
+        "title": "Needs attention",
+        "description": "{count, plural, =1 {# item needs your attention} other {# items need your attention}}",
+        "severity": {
+          "critical": "Critical",
+          "high": "High",
+          "medium": "Medium",
+          "low": "Low"
+        },
+        "empty": "Nothing to report",
+        "items": {
+          "awaitingCarrier": "No carrier response",
+          "awaitingCarrierSince": "Waiting {days} days on {carrier}",
+          "awaitingPayment": "Payment pending",
+          "awaitingPaymentSince": "Blocked for {days} days awaiting payment",
+          "rejected": "Rejected by carrier",
+          "rejectedBy": "{carrier} declined the request — needs rebooking"
+        }
       }
     },
     "bookingsList": {
diff --git a/apps/frontend/messages/fr.json b/apps/frontend/messages/fr.json
index f2a3786..6cbef55 100644
--- a/apps/frontend/messages/fr.json
+++ b/apps/frontend/messages/fr.json
@@ -157,7 +157,20 @@
       "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"
+      "ctaDemo": "Voir la démo",
+      "demo": {
+        "ariaLabel": "Démonstration : recherche de tarif maritime de {origin} vers {destination}, trois offres comparées",
+        "label": "Recherche de tarif",
+        "live": "En direct",
+        "origin": "Départ",
+        "destination": "Arrivée",
+        "load": "LCL · 2,4 CBM · 850 kg · 1 palette",
+        "transit": "{days} jours de transit",
+        "best": "Meilleur prix",
+        "searching": "Interrogation des compagnies...",
+        "resultCount": "{count} offres comparables",
+        "elapsed": "1,8 s"
+      }
     },
     "stats": {
       "carriers": "Compagnies Maritimes",
@@ -359,7 +372,12 @@
         "pending": "En Attente",
         "totalWeight": "Poids Total",
         "thisMonth": "+{count} ce mois",
-        "acceptanceRate": "{rate}% acceptés"
+        "acceptanceRate": "{rate}% acceptés",
+        "bookingsThisMonth": "Réservations ce mois",
+        "revenue": "Commissions encaissées",
+        "pendingConfirmations": "En attente de confirmation",
+        "vsLastMonth": "vs mois dernier",
+        "volume": "Volume expédié"
       },
       "charts": {
         "distribution": {
@@ -373,6 +391,23 @@
           "title": "Poids par Transporteur",
           "description": "Top 5 transporteurs par poids (KG)",
           "weight": "Poids"
+        },
+        "volume": {
+          "title": "Volume de réservations",
+          "description": "Six derniers mois",
+          "series": "Réservations",
+          "empty": "Pas encore assez d’historique"
+        },
+        "status": {
+          "title": "Suivi des demandes",
+          "description": "Réponses des transporteurs",
+          "rateLabel": "Taux d’acceptation"
+        },
+        "lanes": {
+          "title": "Routes les plus utilisées",
+          "description": "Top 5 par nombre de réservations",
+          "series": "Réservations",
+          "empty": "Aucune route enregistrée"
         }
       },
       "performance": {
@@ -400,6 +435,25 @@
         "totalVolume": "Volume Total (CBM)",
         "acceptanceRate": "Taux d'acceptation (%)",
         "avgPrice": "Prix moyen ($)"
+      },
+      "alerts": {
+        "title": "À traiter",
+        "description": "{count, plural, =1 {# point demande votre attention} other {# points demandent votre attention}}",
+        "severity": {
+          "critical": "Critique",
+          "high": "Élevé",
+          "medium": "Moyen",
+          "low": "Faible"
+        },
+        "empty": "Rien à signaler",
+        "items": {
+          "awaitingCarrier": "Sans réponse du transporteur",
+          "awaitingCarrierSince": "En attente depuis {days} jours chez {carrier}",
+          "awaitingPayment": "Paiement en attente",
+          "awaitingPaymentSince": "Bloquée depuis {days} jours faute de règlement",
+          "rejected": "Refusée par le transporteur",
+          "rejectedBy": "{carrier} a refusé la demande — à replacer"
+        }
       }
     },
     "bookingsList": {
diff --git a/apps/frontend/src/components/CookieConsent.tsx b/apps/frontend/src/components/CookieConsent.tsx
index 4d0aff4..91e5d7e 100644
--- a/apps/frontend/src/components/CookieConsent.tsx
+++ b/apps/frontend/src/components/CookieConsent.tsx
@@ -57,7 +57,7 @@ export default function CookieConsent() {
             exit={{ scale: 0, opacity: 0 }}
             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}`}
+            className={`fixed right-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={t('openAria')}
           >
             <Cookie className="w-5 h-5" />
diff --git a/apps/frontend/src/components/DebugUser.tsx b/apps/frontend/src/components/DebugUser.tsx
index 182830b..1c22f21 100644
--- a/apps/frontend/src/components/DebugUser.tsx
+++ b/apps/frontend/src/components/DebugUser.tsx
@@ -41,7 +41,7 @@ export default function DebugUser() {
         </div>
         <div>
           <span className="text-yellow-400">localStorage user:</span>
-          <pre className="mt-1 text-brand-turquoise whitespace-pre-wrap break-words">
+          <pre className="mt-1 text-brand-blue whitespace-pre-wrap break-words">
             {storageData.user}
           </pre>
         </div>
diff --git a/apps/frontend/src/components/ExportButton.tsx b/apps/frontend/src/components/ExportButton.tsx
index 557089f..43d184d 100644
--- a/apps/frontend/src/components/ExportButton.tsx
+++ b/apps/frontend/src/components/ExportButton.tsx
@@ -177,8 +177,10 @@ export default function ExportButton<T extends Record<string, any>>({
         onClick={() => (canExport ? setIsOpen(!isOpen) : (window.location.href = '/pricing'))}
         disabled={disabled || data.length === 0 || isExporting}
         title={!canExport ? t('lockedTooltip') : undefined}
-        className={`inline-flex items-center px-4 py-2 border border-neutral-300 text-sm font-medium rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${
-          canExport ? 'text-neutral-700 hover:bg-neutral-50' : 'text-neutral-400 hover:bg-neutral-50'
+        // Action secondaire : meme gabarit que la variante `outline` de Button,
+        // avec laquelle il se cotoie dans les en-tetes de page.
+        className={`inline-flex h-10 items-center rounded-lg border border-border bg-white px-6 text-body-sm font-medium transition-colors hover:bg-neutral-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${
+          canExport ? 'text-brand-navy' : 'text-neutral-400'
         }`}
       >
         {isExporting ? (
diff --git a/apps/frontend/src/components/NotificationDropdown.tsx b/apps/frontend/src/components/NotificationDropdown.tsx
index 149ee2a..7b8a214 100644
--- a/apps/frontend/src/components/NotificationDropdown.tsx
+++ b/apps/frontend/src/components/NotificationDropdown.tsx
@@ -149,7 +149,7 @@ export default function NotificationDropdown() {
               <button
                 onClick={() => markAllAsReadMutation.mutate()}
                 disabled={markAllAsReadMutation.isPending}
-                className="text-xs text-brand-navy hover:text-brand-turquoise font-medium disabled:opacity-50"
+                className="text-xs text-brand-navy hover:text-brand-blue font-medium disabled:opacity-50"
               >
                 {t('markAllRead')}
               </button>
@@ -173,7 +173,7 @@ export default function NotificationDropdown() {
                       key={notification.id}
                       onClick={() => handleNotificationClick(notification)}
                       className={`block px-4 py-3 hover:bg-neutral-50 transition-colors cursor-pointer ${
-                        !notification.read ? 'bg-brand-turquoise/5' : ''
+                        !notification.read ? 'bg-brand-blue/5' : ''
                       }`}
                     >
                       <div className="flex items-start space-x-3">
@@ -189,7 +189,7 @@ export default function NotificationDropdown() {
                               {notification.title}
                             </p>
                             {!notification.read && (
-                              <span className="w-2 h-2 bg-brand-turquoise rounded-full"></span>
+                              <span className="w-2 h-2 bg-brand-blue rounded-full"></span>
                             )}
                           </div>
                           <p className="text-sm text-neutral-600 line-clamp-2">
@@ -216,7 +216,7 @@ export default function NotificationDropdown() {
                 setIsOpen(false);
                 setIsPanelOpen(true);
               }}
-              className="w-full text-center text-sm text-brand-navy hover:text-brand-turquoise font-medium py-2 hover:bg-brand-turquoise/5 rounded transition-colors"
+              className="w-full text-center text-sm text-brand-navy hover:text-brand-blue font-medium py-2 hover:bg-brand-blue/5 rounded transition-colors"
             >
               {t('viewAll')}
             </button>
diff --git a/apps/frontend/src/components/NotificationPanel.tsx b/apps/frontend/src/components/NotificationPanel.tsx
index 5ef880b..81df55d 100644
--- a/apps/frontend/src/components/NotificationPanel.tsx
+++ b/apps/frontend/src/components/NotificationPanel.tsx
@@ -111,7 +111,7 @@ export default function NotificationPanel({ isOpen, onClose }: NotificationPanel
       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-brand-turquoise bg-brand-turquoise/5',
+      low: 'border-l-4 border-brand-blue bg-brand-blue/5',
     };
     return colors[priority as keyof typeof colors] || 'border-l-4 border-neutral-300';
   };
@@ -191,7 +191,7 @@ export default function NotificationPanel({ isOpen, onClose }: NotificationPanel
                   }}
                   className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
                     selectedFilter === filter
-                      ? 'bg-brand-turquoise text-brand-navy'
+                      ? 'bg-brand-navy text-white'
                       : 'bg-white text-neutral-700 hover:bg-neutral-100 border border-neutral-300'
                   }`}
                 >
@@ -204,7 +204,7 @@ export default function NotificationPanel({ isOpen, onClose }: NotificationPanel
             <button
               onClick={() => markAllAsReadMutation.mutate()}
               disabled={markAllAsReadMutation.isPending}
-              className="flex items-center space-x-1 text-sm text-brand-navy hover:text-brand-turquoise font-medium disabled:opacity-50"
+              className="flex items-center space-x-1 text-sm text-brand-navy hover:text-brand-blue font-medium disabled:opacity-50"
             >
               <CheckCheck className="w-4 h-4" />
               <span>{t('markAllRead')}</span>
@@ -217,7 +217,7 @@ export default function NotificationPanel({ isOpen, onClose }: NotificationPanel
           {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-brand-turquoise mx-auto mb-4" />
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-blue mx-auto mb-4" />
                 <p className="text-sm text-neutral-500">{t('loading')}</p>
               </div>
             </div>
@@ -238,7 +238,7 @@ export default function NotificationPanel({ isOpen, onClose }: NotificationPanel
                   key={notification.id}
                   onClick={() => handleNotificationClick(notification)}
                   className={`p-6 hover:bg-neutral-50 transition-all cursor-pointer group ${
-                    !notification.read ? 'bg-brand-turquoise/5/50' : ''
+                    !notification.read ? 'bg-brand-blue/5/50' : ''
                   } ${getPriorityColor(notification.priority || 'low')}`}
                 >
                   <div className="flex items-start space-x-4">
@@ -258,7 +258,7 @@ export default function NotificationPanel({ isOpen, onClose }: NotificationPanel
                             {notification.title}
                           </h3>
                           {!notification.read && (
-                            <span className="w-2.5 h-2.5 bg-brand-turquoise rounded-full" />
+                            <span className="w-2.5 h-2.5 bg-brand-blue rounded-full" />
                           )}
                         </div>
                         <button
@@ -290,7 +290,7 @@ export default function NotificationPanel({ isOpen, onClose }: NotificationPanel
                                     ? 'bg-orange-100 text-orange-700'
                                     : notification.priority === 'medium'
                                       ? 'bg-yellow-100 text-yellow-700'
-                                      : 'bg-brand-turquoise/10 text-brand-navy'
+                                      : 'bg-brand-blue/10 text-brand-navy'
                               }`}
                             >
                               {notification.priority.toUpperCase()}
diff --git a/apps/frontend/src/components/admin/CarrierForm.tsx b/apps/frontend/src/components/admin/CarrierForm.tsx
index 667aa4c..285e798 100644
--- a/apps/frontend/src/components/admin/CarrierForm.tsx
+++ b/apps/frontend/src/components/admin/CarrierForm.tsx
@@ -192,7 +192,7 @@ export const CarrierForm: React.FC<CarrierFormProps> = ({ carrier, onSubmit, onC
         <button
           type="submit"
           disabled={submitting}
-          className="px-4 py-2 bg-brand-turquoise text-brand-navy rounded-md text-sm font-medium hover:bg-brand-turquoise/90 disabled:opacity-50"
+          className="px-4 py-2 bg-brand-navy text-white rounded-md text-sm font-medium hover:bg-brand-navy/90 disabled:opacity-50"
         >
           {submitting ? 'Saving...' : carrier ? 'Update Carrier' : 'Create Carrier'}
         </button>
diff --git a/apps/frontend/src/components/admin/CsvUpload.tsx b/apps/frontend/src/components/admin/CsvUpload.tsx
index 810dfe6..72e0f43 100644
--- a/apps/frontend/src/components/admin/CsvUpload.tsx
+++ b/apps/frontend/src/components/admin/CsvUpload.tsx
@@ -168,7 +168,7 @@ export function CsvUpload() {
                   disabled={loading}
                   className={`px-4 py-2 text-sm rounded-md border transition-colors disabled:opacity-50 ${
                     direction === option.value
-                      ? 'border-brand-turquoise bg-brand-turquoise/5 text-brand-navy font-medium'
+                      ? 'border-brand-blue bg-brand-blue/5 text-brand-navy font-medium'
                       : 'border-neutral-300 hover:bg-neutral-50'
                   }`}
                 >
diff --git a/apps/frontend/src/components/blog/RichTextEditor.tsx b/apps/frontend/src/components/blog/RichTextEditor.tsx
index 82227c5..6e0a2ab 100644
--- a/apps/frontend/src/components/blog/RichTextEditor.tsx
+++ b/apps/frontend/src/components/blog/RichTextEditor.tsx
@@ -307,7 +307,7 @@ export function RichTextEditor({
       Image.configure({ inline: false, allowBase64: false }),
       Link.configure({
         openOnClick: false,
-        HTMLAttributes: { class: 'text-brand-turquoise underline' },
+        HTMLAttributes: { class: 'text-brand-blue underline' },
       }),
       Placeholder.configure({ placeholder }),
       Underline,
diff --git a/apps/frontend/src/components/bookings/BookingFilters.tsx b/apps/frontend/src/components/bookings/BookingFilters.tsx
index 360f7ea..a141331 100644
--- a/apps/frontend/src/components/bookings/BookingFilters.tsx
+++ b/apps/frontend/src/components/bookings/BookingFilters.tsx
@@ -43,7 +43,7 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
         <div className="flex gap-2">
           <button
             onClick={() => setIsExpanded(!isExpanded)}
-            className="text-sm text-brand-navy hover:text-brand-turquoise"
+            className="text-sm text-brand-navy hover:text-brand-blue"
           >
             {isExpanded ? t('showLess') : t('showMore')}
           </button>
@@ -102,7 +102,7 @@ export const BookingFilters: React.FC<BookingFiltersProps> = ({
               onClick={() => handleStatusChange(status)}
               className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
                 filters.status?.includes(status)
-                  ? 'bg-brand-turquoise text-brand-navy'
+                  ? 'bg-brand-navy text-white'
                   : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
               }`}
             >
diff --git a/apps/frontend/src/components/bookings/BookingsTable.tsx b/apps/frontend/src/components/bookings/BookingsTable.tsx
index 7591f26..40237fa 100644
--- a/apps/frontend/src/components/bookings/BookingsTable.tsx
+++ b/apps/frontend/src/components/bookings/BookingsTable.tsx
@@ -232,7 +232,7 @@ export const BookingsTable: React.FC<BookingsTableProps> = ({
                   key={row.id}
                   onClick={() => onRowClick?.(row.original)}
                   className={`hover:bg-neutral-50 cursor-pointer ${
-                    selectedBookings.has(row.original.id) ? 'bg-brand-turquoise/5' : ''
+                    selectedBookings.has(row.original.id) ? 'bg-brand-blue/5' : ''
                   }`}
                   style={{ height: `${virtualRow.size}px` }}
                 >
@@ -265,7 +265,7 @@ function getStatusColor(status: BookingStatus): string {
     case BookingStatus.DRAFT:
       return 'bg-neutral-100 text-neutral-800';
     case BookingStatus.CONFIRMED:
-      return 'bg-brand-turquoise/10 text-brand-navy';
+      return 'bg-brand-blue/10 text-brand-navy';
     case BookingStatus.IN_PROGRESS:
       return 'bg-yellow-100 text-yellow-800';
     case BookingStatus.COMPLETED:
diff --git a/apps/frontend/src/components/bookings/BulkActions.tsx b/apps/frontend/src/components/bookings/BulkActions.tsx
index ae31126..49801e0 100644
--- a/apps/frontend/src/components/bookings/BulkActions.tsx
+++ b/apps/frontend/src/components/bookings/BulkActions.tsx
@@ -40,7 +40,7 @@ export const BulkActions: React.FC<BulkActionsProps> = ({
   if (selectedCount === 0) return null;
 
   return (
-    <div className="bg-brand-turquoise/5 border border-brand-turquoise/30 rounded-lg p-4 mb-6">
+    <div className="bg-brand-blue/5 border border-brand-blue/30 rounded-lg p-4 mb-6">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
           <span className="text-sm font-medium text-brand-navy">
@@ -48,7 +48,7 @@ export const BulkActions: React.FC<BulkActionsProps> = ({
           </span>
           <button
             onClick={onClearSelection}
-            className="text-sm text-brand-navy hover:text-brand-turquoise underline"
+            className="text-sm text-brand-navy hover:text-brand-blue underline"
           >
             {t('clearSelection')}
           </button>
@@ -60,7 +60,7 @@ export const BulkActions: React.FC<BulkActionsProps> = ({
             <button
               onClick={() => setShowExportMenu(!showExportMenu)}
               disabled={exporting}
-              className="px-4 py-2 bg-white border border-neutral-300 rounded-md text-sm font-medium text-neutral-700 hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="px-6 py-2 bg-white border border-border rounded-lg text-sm font-medium text-brand-navy hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               {exporting ? t('exporting') : t('exportSelected')}
             </button>
@@ -93,7 +93,7 @@ export const BulkActions: React.FC<BulkActionsProps> = ({
 
           {/* Bulk update button */}
           <button
-            className="px-4 py-2 bg-brand-turquoise text-brand-navy rounded-md text-sm font-medium hover:bg-brand-turquoise/90"
+            className="px-4 py-2 bg-brand-navy text-white rounded-md text-sm font-medium hover:bg-brand-navy/90"
             onClick={() => {
               toast.error(t('bulkUpdateSoon'));
             }}
diff --git a/apps/frontend/src/components/data/data-table.tsx b/apps/frontend/src/components/data/data-table.tsx
index 8a82ddd..91465e2 100644
--- a/apps/frontend/src/components/data/data-table.tsx
+++ b/apps/frontend/src/components/data/data-table.tsx
@@ -182,9 +182,9 @@ export function DataTable<TData>({
                         >
                           {flexRender(header.column.columnDef.header, header.getContext())}
                           {sorted === 'asc' ? (
-                            <ArrowUp className="size-3 text-brand-turquoise" />
+                            <ArrowUp className="size-3 text-brand-blue" />
                           ) : sorted === 'desc' ? (
-                            <ArrowDown className="size-3 text-brand-turquoise" />
+                            <ArrowDown className="size-3 text-brand-blue" />
                           ) : (
                             <ChevronsUpDown className="size-3 text-neutral-300" />
                           )}
diff --git a/apps/frontend/src/components/data/filter-bar.tsx b/apps/frontend/src/components/data/filter-bar.tsx
index ff0a8ab..80b90bc 100644
--- a/apps/frontend/src/components/data/filter-bar.tsx
+++ b/apps/frontend/src/components/data/filter-bar.tsx
@@ -65,7 +65,7 @@ export function FilterBar({
               <SlidersHorizontal />
               {labels.filters}
               {active.length > 0 && (
-                <span className="ml-1 inline-flex size-4 items-center justify-center rounded-full bg-brand-turquoise text-[10px] font-semibold text-white">
+                <span className="ml-1 inline-flex size-4 items-center justify-center rounded-full bg-brand-blue text-[10px] font-semibold text-white">
                   {active.length}
                 </span>
               )}
diff --git a/apps/frontend/src/components/examples/DesignSystemShowcase.tsx b/apps/frontend/src/components/examples/DesignSystemShowcase.tsx
index f790dc9..585aec2 100644
--- a/apps/frontend/src/components/examples/DesignSystemShowcase.tsx
+++ b/apps/frontend/src/components/examples/DesignSystemShowcase.tsx
@@ -23,7 +23,7 @@ export function DesignSystemShowcase() {
 
           {/* Turquoise */}
           <div>
-            <div className="bg-brand-turquoise h-32 rounded-lg shadow-lg mb-3"></div>
+            <div className="bg-brand-blue h-32 rounded-lg shadow-lg mb-3"></div>
             <h4 className="mb-1">Turquoise</h4>
             <p className="text-body-sm text-neutral-600">#34CCCD</p>
             <p className="text-body-xs text-neutral-500">Accent color for CTAs, links</p>
@@ -150,7 +150,7 @@ export function DesignSystemShowcase() {
           <div className="mt-8 p-6 bg-brand-navy rounded-lg">
             <h4 className="text-white mb-4">On Dark Background</h4>
             <div className="flex flex-wrap gap-4">
-              <button className="bg-brand-turquoise text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-brand-turquoise/90 transition-colors">
+              <button className="bg-brand-navy text-white font-heading font-semibold px-6 py-3 rounded-lg hover:bg-brand-navy/90 transition-colors">
                 Primary on Dark
               </button>
               <button className="bg-white text-brand-navy font-heading font-semibold px-6 py-3 rounded-lg hover:bg-neutral-100 transition-colors">
@@ -196,7 +196,7 @@ export function DesignSystemShowcase() {
               </div>
               <div>
                 <span className="label">TOTAL PRICE</span>
-                <p className="text-h3 text-brand-turquoise mt-1">$1,245 USD</p>
+                <p className="text-h3 text-brand-blue mt-1">$1,245 USD</p>
               </div>
               <div>
                 <span className="badge-info">Best Rate</span>
@@ -275,7 +275,7 @@ export function DesignSystemShowcase() {
             needs.
           </p>
           <div className="flex gap-4 justify-center">
-            <button className="bg-brand-turquoise text-white font-heading font-semibold px-8 py-4 rounded-lg hover:bg-brand-turquoise/90 transition-colors text-lg">
+            <button className="bg-brand-navy text-white font-heading font-semibold px-8 py-4 rounded-lg hover:bg-brand-navy/90 transition-colors text-lg">
               Start Free Trial
             </button>
             <button className="bg-white text-brand-navy font-heading font-semibold px-8 py-4 rounded-lg hover:bg-neutral-100 transition-colors text-lg">
diff --git a/apps/frontend/src/components/forms/file-dropzone.tsx b/apps/frontend/src/components/forms/file-dropzone.tsx
index 238070a..f21cead 100644
--- a/apps/frontend/src/components/forms/file-dropzone.tsx
+++ b/apps/frontend/src/components/forms/file-dropzone.tsx
@@ -73,13 +73,13 @@ export function FileDropzone({
           'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed px-4 py-8 text-center transition-colors',
           'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
           dragging
-            ? 'border-brand-turquoise bg-brand-turquoise/5'
-            : 'border-neutral-300 hover:border-brand-turquoise hover:bg-neutral-50',
+            ? 'border-brand-blue bg-brand-blue/5'
+            : 'border-neutral-300 hover:border-brand-blue hover:bg-neutral-50',
           disabled && 'pointer-events-none opacity-50'
         )}
       >
         <Upload
-          className={cn('size-5', dragging ? 'text-brand-turquoise' : 'text-neutral-400')}
+          className={cn('size-5', dragging ? 'text-brand-blue' : 'text-neutral-400')}
           aria-hidden="true"
         />
         <span className="text-body-sm text-neutral-700">
diff --git a/apps/frontend/src/components/landing/RateSearchDemo.tsx b/apps/frontend/src/components/landing/RateSearchDemo.tsx
new file mode 100644
index 0000000..2f74240
--- /dev/null
+++ b/apps/frontend/src/components/landing/RateSearchDemo.tsx
@@ -0,0 +1,280 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { ArrowRight, Check, Ship } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+import { EASE } from './motion';
+
+/**
+ * Demonstration jouee en boucle de la recherche de tarif.
+ *
+ * C'est la promesse d'Xpeditis montree plutot que decrite : deux ports, une
+ * recherche, des offres comparables en moins de deux secondes — la ou le
+ * transitaire attend aujourd'hui plusieurs jours et cinq formats de devis
+ * differents. Aucune donnee reelle n'est appelee : la sequence est scriptee.
+ */
+
+const ORIGIN = { code: 'FRLEH', city: 'Le Havre' };
+const DESTINATION = { code: 'CNSHA', city: 'Shanghai' };
+
+/** Transporteurs repris du bandeau partenaires, tarifs indicatifs. */
+const OFFERS = [
+  { carrier: 'ICL', days: 26, price: 1390 },
+  { carrier: 'ECU Line', days: 28, price: 1240 },
+  { carrier: 'Vanguard', days: 31, price: 1180, best: true },
+];
+
+/**
+ * Duree de chaque etape de la sequence, en millisecondes.
+ * 0 remise a zero · 1 depart saisi · 2 arrivee saisie · 3 recherche ·
+ * 4 resultats. L'etape 0 est breve mais necessaire : sans elle, la reprise de
+ * boucle effacait l'arrivee au milieu de la sortie des resultats.
+ */
+const STEPS = [450, 900, 1000, 1100, 5000];
+
+export function RateSearchDemo() {
+  const t = useTranslations('landing.hero.demo');
+  const prefersReducedMotion = useReducedMotion();
+  const [step, setStep] = useState(0);
+
+  useEffect(() => {
+    // Mouvement reduit : on affiche l'etat final, sans boucle.
+    if (prefersReducedMotion) {
+      setStep(4);
+      return;
+    }
+    const id = setTimeout(() => setStep(s => (s + 1) % STEPS.length), STEPS[step]);
+    return () => clearTimeout(id);
+  }, [step, prefersReducedMotion]);
+
+  const hasOrigin = step >= 1;
+  const hasDestination = step >= 2;
+  const isSearching = step === 3;
+  const hasResults = step === 4;
+
+  return (
+    <div
+      // La carte est un decor : le lecteur d'ecran recoit une phrase, pas la
+      // sequence entiere qui se rejoue toutes les huit secondes.
+      role="img"
+      aria-label={t('ariaLabel', { origin: ORIGIN.city, destination: DESTINATION.city })}
+      className="w-full max-w-md overflow-hidden rounded-2xl border border-white/15 bg-white/95 shadow-2xl shadow-brand-navy/40 backdrop-blur-sm"
+    >
+      {/* Barre de recherche */}
+      <div className="border-b border-border p-5">
+        <div className="mb-4 flex items-center justify-between">
+          <span className="text-[11px] font-semibold uppercase tracking-[0.14em] text-neutral-400">
+            {t('label')}
+          </span>
+          <span className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-brand-navy">
+            <span className="relative flex size-1.5">
+              <span className="absolute inline-flex size-full animate-ping rounded-full bg-brand-turquoise opacity-75" />
+              <span className="relative inline-flex size-1.5 rounded-full bg-brand-turquoise" />
+            </span>
+            {t('live')}
+          </span>
+        </div>
+
+        {/* Ligne de route : deux escales et le trait qui les joint. */}
+        <div className="flex items-start gap-3">
+          <PortField
+            label={t('origin')}
+            code={ORIGIN.code}
+            city={ORIGIN.city}
+            filled={hasOrigin}
+            align="left"
+          />
+
+          <div className="relative flex h-10 flex-1 items-center" aria-hidden="true">
+            <div className="h-px w-full bg-border" />
+            <motion.div
+              className="absolute left-0 h-px w-full origin-left bg-brand-turquoise"
+              initial={{ scaleX: 0 }}
+              animate={{ scaleX: hasDestination ? 1 : 0 }}
+              transition={{ duration: 0.6, ease: EASE }}
+            />
+            <motion.div
+              className="absolute left-1/2 -translate-x-1/2 rounded-full bg-white px-1"
+              initial={{ opacity: 0, scale: 0.6 }}
+              animate={{
+                opacity: hasDestination ? 1 : 0,
+                scale: hasDestination ? 1 : 0.6,
+              }}
+              transition={{ duration: 0.4, ease: EASE, delay: 0.3 }}
+            >
+              <Ship className="size-3.5 text-brand-turquoise" />
+            </motion.div>
+          </div>
+
+          <PortField
+            label={t('destination')}
+            code={DESTINATION.code}
+            city={DESTINATION.city}
+            filled={hasDestination}
+            align="right"
+          />
+        </div>
+
+        <p className="mt-4 text-[11px] font-medium tabular-nums text-neutral-500">{t('load')}</p>
+      </div>
+
+      {/* Resultats */}
+      <div className="min-h-[188px] bg-neutral-50 p-4">
+        <AnimatePresence mode="wait">
+          {hasResults ? (
+            <motion.ul
+              key="results"
+              initial="hidden"
+              animate="visible"
+              exit={{ opacity: 0, transition: { duration: 0.2 } }}
+              variants={{ visible: { transition: { staggerChildren: 0.08 } } }}
+              className="space-y-2"
+            >
+              {OFFERS.map(offer => (
+                <motion.li
+                  key={offer.carrier}
+                  variants={{
+                    hidden: { opacity: 0, y: 10 },
+                    visible: { opacity: 1, y: 0, transition: { duration: 0.45, ease: EASE } },
+                  }}
+                  className={`flex items-center gap-3 rounded-xl border bg-white px-3.5 py-2.5 ${
+                    offer.best ? 'border-brand-turquoise/50 ring-1 ring-brand-turquoise/30' : 'border-border'
+                  }`}
+                >
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-semibold text-brand-navy">{offer.carrier}</p>
+                    <p className="text-[11px] tabular-nums text-neutral-500">
+                      {t('transit', { days: offer.days })}
+                    </p>
+                  </div>
+                  {offer.best && (
+                    <span className="flex items-center gap-1 rounded-full bg-brand-green/10 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-brand-green">
+                      <Check className="size-3" />
+                      {t('best')}
+                    </span>
+                  )}
+                  <p className="font-heading text-base font-extrabold tabular-nums text-brand-navy">
+                    {offer.price.toLocaleString('fr-FR')}&nbsp;€
+                  </p>
+                </motion.li>
+              ))}
+            </motion.ul>
+          ) : (
+            <motion.div
+              key="pending"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0, transition: { duration: 0.2 } }}
+              className="space-y-2"
+            >
+              {[0, 1, 2].map(i => (
+                <div
+                  key={i}
+                  className="flex items-center gap-3 rounded-xl border border-border bg-white px-3.5 py-2.5"
+                >
+                  <div className="min-w-0 flex-1 space-y-1.5">
+                    <ShimmerBar
+                      className="h-3 w-24"
+                      active={isSearching}
+                      delay={i * 0.12}
+                      reduced={!!prefersReducedMotion}
+                    />
+                    <ShimmerBar
+                      className="h-2 w-14"
+                      active={isSearching}
+                      delay={i * 0.12 + 0.06}
+                      reduced={!!prefersReducedMotion}
+                    />
+                  </div>
+                  <ShimmerBar
+                    className="h-4 w-16"
+                    active={isSearching}
+                    delay={i * 0.12}
+                    reduced={!!prefersReducedMotion}
+                  />
+                </div>
+              ))}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      {/* Pied : le chiffre qui porte l'argument. */}
+      <div className="flex items-center justify-between border-t border-border bg-white px-5 py-3">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-neutral-400">
+          {hasResults ? t('resultCount', { count: OFFERS.length }) : t('searching')}
+        </p>
+        <p className="flex items-center gap-1.5 font-heading text-sm font-bold tabular-nums text-brand-navy">
+          {t('elapsed')}
+          <ArrowRight className="size-3.5 text-brand-turquoise" aria-hidden="true" />
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function PortField({
+  label,
+  code,
+  city,
+  filled,
+  align,
+}: {
+  label: string;
+  code: string;
+  city: string;
+  filled: boolean;
+  align: 'left' | 'right';
+}) {
+  return (
+    <div className={`w-[104px] ${align === 'right' ? 'text-right' : ''}`}>
+      <p className="text-[10px] font-semibold uppercase tracking-[0.14em] text-neutral-400">
+        {label}
+      </p>
+      <motion.p
+        // Le code port est la donnee, pas le nom de ville : chiffres tabulaires
+        // et interlettrage large, comme sur un connaissement.
+        className="font-heading text-lg font-extrabold tracking-[0.06em] text-brand-navy"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: filled ? 1 : 0.15 }}
+        transition={{ duration: 0.4, ease: EASE }}
+      >
+        {filled ? code : '·····'}
+      </motion.p>
+      <motion.p
+        className="truncate text-[11px] text-neutral-500"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: filled ? 1 : 0 }}
+        transition={{ duration: 0.4, ease: EASE, delay: 0.1 }}
+      >
+        {city}
+      </motion.p>
+    </div>
+  );
+}
+
+function ShimmerBar({
+  className,
+  active,
+  delay,
+  reduced,
+}: {
+  className: string;
+  active: boolean;
+  delay: number;
+  reduced: boolean;
+}) {
+  return (
+    <motion.div
+      className={`rounded-full bg-neutral-200 ${className}`}
+      animate={active && !reduced ? { opacity: [0.4, 1, 0.4] } : { opacity: 0.4 }}
+      transition={
+        active && !reduced
+          ? { duration: 1.1, repeat: Infinity, ease: 'easeInOut', delay }
+          : { duration: 0.2 }
+      }
+    />
+  );
+}
diff --git a/apps/frontend/src/components/landing/motion.ts b/apps/frontend/src/components/landing/motion.ts
new file mode 100644
index 0000000..2571366
--- /dev/null
+++ b/apps/frontend/src/components/landing/motion.ts
@@ -0,0 +1,28 @@
+/**
+ * Grammaire de mouvement de la page d'accueil.
+ *
+ * Une seule courbe, une seule distance, un seul decalage : les animations de
+ * la page doivent se ressembler entre elles. Les valeurs sont volontairement
+ * courtes — le mouvement accompagne la lecture, il ne la retarde pas.
+ */
+
+/** Expo-out. Depart franc, arrivee amortie. */
+export const EASE = [0.16, 1, 0.3, 1] as const;
+
+/** Distance de reveal. Au-dela, le contenu semble « tomber » dans la page. */
+export const RISE = 14;
+
+/** Reveal standard, a utiliser avec `whileInView`. */
+export const reveal = {
+  hidden: { opacity: 0, y: RISE },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.55, ease: EASE } },
+};
+
+/** Conteneur d'une serie revelee en cascade. */
+export const revealGroup = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.07, delayChildren: 0.05 } },
+};
+
+/** Fenetre commune : le reveal se declenche un peu avant l'entree a l'ecran. */
+export const VIEWPORT = { once: true, margin: '-80px' } as const;
diff --git a/apps/frontend/src/components/organization/LicensesTab.tsx b/apps/frontend/src/components/organization/LicensesTab.tsx
index a723585..eb4b5d7 100644
--- a/apps/frontend/src/components/organization/LicensesTab.tsx
+++ b/apps/frontend/src/components/organization/LicensesTab.tsx
@@ -94,7 +94,7 @@ export default function LicensesTab() {
                     ? 'bg-red-600'
                     : usagePercentage >= 70
                       ? 'bg-yellow-500'
-                      : 'bg-brand-turquoise'
+                      : 'bg-brand-blue'
                 }`}
                 style={{ width: `${Math.min(usagePercentage, 100)}%` }}
               ></div>
@@ -111,7 +111,7 @@ export default function LicensesTab() {
           </h3>
           <Link
             href="/dashboard/settings/users"
-            className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-brand-turquoise rounded-lg hover:bg-brand-turquoise/90 transition-colors"
+            className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-brand-navy rounded-lg hover:bg-brand-navy/90 transition-colors"
           >
             <UserPlus className="w-4 h-4 mr-2" />
             Inviter un utilisateur
@@ -309,10 +309,10 @@ export default function LicensesTab() {
       )}
 
       {/* Info Box */}
-      <div className="bg-brand-turquoise/5 border border-brand-turquoise/30 rounded-lg p-4">
+      <div className="bg-brand-blue/5 border border-brand-blue/30 rounded-lg p-4">
         <div className="flex">
           <div className="flex-shrink-0">
-            <svg className="h-5 w-5 text-brand-turquoise" viewBox="0 0 20 20" fill="currentColor">
+            <svg className="h-5 w-5 text-brand-blue" viewBox="0 0 20 20" fill="currentColor">
               <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"
diff --git a/apps/frontend/src/components/organization/SubscriptionTab.tsx b/apps/frontend/src/components/organization/SubscriptionTab.tsx
index ac7a8e2..b463c06 100644
--- a/apps/frontend/src/components/organization/SubscriptionTab.tsx
+++ b/apps/frontend/src/components/organization/SubscriptionTab.tsx
@@ -201,7 +201,7 @@ export default function SubscriptionTab() {
             <button
               onClick={handleRefresh}
               disabled={isRefreshing}
-              className="text-sm text-brand-navy hover:text-brand-turquoise disabled:opacity-50 flex items-center gap-1"
+              className="text-sm text-brand-navy hover:text-brand-blue disabled:opacity-50 flex items-center gap-1"
             >
               <svg
                 className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`}
@@ -241,7 +241,7 @@ export default function SubscriptionTab() {
               <button
                 onClick={handleManageBilling}
                 disabled={portalMutation.isPending}
-                className="px-4 py-2 text-sm font-medium text-brand-navy hover:text-brand-turquoise hover:bg-brand-turquoise/5 rounded-lg disabled:opacity-50 transition-colors"
+                className="px-4 py-2 text-sm font-medium text-brand-navy hover:bg-neutral-100 rounded-lg transition-colors disabled:opacity-50 transition-colors"
               >
                 {portalMutation.isPending ? t('manageBillingLoading') : t('manageBilling')}
               </button>
@@ -264,7 +264,7 @@ export default function SubscriptionTab() {
                     ? 'bg-red-600'
                     : usagePercentage >= 70
                       ? 'bg-yellow-500'
-                      : 'bg-brand-turquoise'
+                      : 'bg-brand-blue'
                 }`}
                 style={{
                   width:
@@ -330,7 +330,7 @@ export default function SubscriptionTab() {
               key={plan.plan}
               className={`bg-white rounded-lg border-2 p-5 ${
                 isCurrentPlan(plan.plan)
-                  ? 'border-brand-turquoise shadow-md'
+                  ? 'border-brand-blue shadow-md'
                   : 'border-border hover:border-neutral-300 hover:shadow transition'
               }`}
             >
@@ -387,7 +387,7 @@ export default function SubscriptionTab() {
                 ) : 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-brand-navy bg-brand-turquoise/5 rounded-lg hover:bg-brand-turquoise/10 transition"
+                    className="block w-full px-4 py-2 text-sm font-medium text-center text-brand-navy bg-brand-blue/5 rounded-lg hover:bg-brand-blue/10 transition"
                   >
                     {t('contactUs')}
                   </a>
@@ -395,7 +395,7 @@ export default function SubscriptionTab() {
                   <button
                     onClick={() => handleUpgrade(plan.plan)}
                     disabled={checkoutMutation.isPending && selectedPlan === plan.plan}
-                    className="w-full px-4 py-2 text-sm font-medium text-white bg-brand-turquoise rounded-lg hover:bg-brand-turquoise/90 transition disabled:opacity-50"
+                    className="w-full px-4 py-2 text-sm font-medium text-white bg-brand-navy rounded-lg hover:bg-brand-navy/90 transition disabled:opacity-50"
                   >
                     {checkoutMutation.isPending && selectedPlan === plan.plan
                       ? t('upgradeLoading')
diff --git a/apps/frontend/src/components/rate-search/RateResultsTable.tsx b/apps/frontend/src/components/rate-search/RateResultsTable.tsx
index b64ab54..6398543 100644
--- a/apps/frontend/src/components/rate-search/RateResultsTable.tsx
+++ b/apps/frontend/src/components/rate-search/RateResultsTable.tsx
@@ -32,7 +32,7 @@ type SortOrder = 'asc' | 'desc';
 
 const SERVICE_LEVEL_LABELS: Record<ServiceLevel, { label: string; color: string }> = {
   ECONOMIC: { label: 'Éco', color: 'bg-green-100 text-green-800 border-green-200' },
-  STANDARD: { label: 'Standard', color: 'bg-brand-turquoise/10 text-brand-navy border-brand-turquoise/30' },
+  STANDARD: { label: 'Standard', color: 'bg-brand-blue/10 text-brand-navy border-brand-blue/30' },
   RAPID: { label: 'Rapide', color: 'bg-orange-100 text-orange-800 border-orange-200' },
 };
 
diff --git a/apps/frontend/src/components/rate-search/VolumeWeightInput.tsx b/apps/frontend/src/components/rate-search/VolumeWeightInput.tsx
index fed0773..89eb769 100644
--- a/apps/frontend/src/components/rate-search/VolumeWeightInput.tsx
+++ b/apps/frontend/src/components/rate-search/VolumeWeightInput.tsx
@@ -90,7 +90,7 @@ export function VolumeWeightInput({
       </div>
 
       {/* Info message */}
-      <div className="flex items-start gap-2 p-3 bg-brand-turquoise/5 rounded-md border border-brand-turquoise/30">
+      <div className="flex items-start gap-2 p-3 bg-brand-blue/5 rounded-md border border-brand-blue/30">
         <svg
           className="w-5 h-5 text-brand-navy flex-shrink-0 mt-0.5"
           fill="currentColor"
diff --git a/apps/frontend/src/components/shell/bottom-nav.tsx b/apps/frontend/src/components/shell/bottom-nav.tsx
index bc98569..04d840f 100644
--- a/apps/frontend/src/components/shell/bottom-nav.tsx
+++ b/apps/frontend/src/components/shell/bottom-nav.tsx
@@ -62,7 +62,7 @@ export function BottomNav({ pathname, labels, onMore }: BottomNavProps) {
                 {active && (
                   <span
                     aria-hidden="true"
-                    className="absolute -top-1.5 left-1/2 h-0.5 w-4 -translate-x-1/2 rounded-full bg-brand-turquoise"
+                    className="absolute -top-1.5 left-1/2 h-0.5 w-4 -translate-x-1/2 rounded-full bg-brand-blue"
                   />
                 )}
               </span>
diff --git a/apps/frontend/src/components/shell/command-menu.tsx b/apps/frontend/src/components/shell/command-menu.tsx
index e004868..d0b0142 100644
--- a/apps/frontend/src/components/shell/command-menu.tsx
+++ b/apps/frontend/src/components/shell/command-menu.tsx
@@ -171,7 +171,7 @@ export function CommandMenu({
                       {item.groupLabel}
                     </span>
                     {active && (
-                      <span className="size-1.5 shrink-0 rounded-full bg-brand-turquoise" />
+                      <span className="size-1.5 shrink-0 rounded-full bg-brand-blue" />
                     )}
                   </button>
                 );
diff --git a/apps/frontend/src/components/shell/settings-nav.tsx b/apps/frontend/src/components/shell/settings-nav.tsx
index afc1724..7cf0875 100644
--- a/apps/frontend/src/components/shell/settings-nav.tsx
+++ b/apps/frontend/src/components/shell/settings-nav.tsx
@@ -41,7 +41,7 @@ export function SettingsNav({ hide = [] }: { hide?: string[] }) {
                   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
                   'after:absolute after:inset-x-2 after:-bottom-px after:h-0.5 after:rounded-full',
                   active
-                    ? 'text-brand-navy after:bg-brand-turquoise'
+                    ? 'text-brand-navy after:bg-brand-blue'
                     : 'text-neutral-500 after:bg-transparent hover:text-brand-navy'
                 )}
               >
diff --git a/apps/frontend/src/components/shell/sidebar-nav.tsx b/apps/frontend/src/components/shell/sidebar-nav.tsx
index 97ef28e..358a78e 100644
--- a/apps/frontend/src/components/shell/sidebar-nav.tsx
+++ b/apps/frontend/src/components/shell/sidebar-nav.tsx
@@ -73,12 +73,12 @@ export function SidebarNav({
                         : 'text-neutral-700 hover:bg-neutral-100 hover:text-brand-navy'
                 )}
               >
-                {/* Filet d'accent turquoise : marque l'item actif sans aplat colore. */}
+                {/* Filet d'accent bleu : marque l'item actif sans aplat colore. */}
                 {active && (
                   <span
                     aria-hidden="true"
                     className={cn(
-                      'absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-brand-turquoise',
+                      'absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-brand-blue',
                       collapsed && '-left-1'
                     )}
                   />
diff --git a/apps/frontend/src/components/ui/FeatureGate.tsx b/apps/frontend/src/components/ui/FeatureGate.tsx
index 5bb9ac1..f04e27f 100644
--- a/apps/frontend/src/components/ui/FeatureGate.tsx
+++ b/apps/frontend/src/components/ui/FeatureGate.tsx
@@ -53,7 +53,7 @@ export default function FeatureGate({ feature, children, fallback }: FeatureGate
           </p>
           <Link
             href="/pricing"
-            className="inline-flex items-center px-4 py-2 bg-brand-turquoise text-white text-sm font-medium rounded-lg hover:opacity-90 transition-opacity"
+            className="inline-flex items-center px-4 py-2 bg-brand-navy text-white text-sm font-medium rounded-lg hover:opacity-90 transition-opacity"
           >
             Voir les plans
           </Link>
diff --git a/apps/frontend/src/components/ui/badge.tsx b/apps/frontend/src/components/ui/badge.tsx
index f01b95a..dd1fe2c 100644
--- a/apps/frontend/src/components/ui/badge.tsx
+++ b/apps/frontend/src/components/ui/badge.tsx
@@ -18,7 +18,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         neutral: 'border-transparent bg-neutral-100 text-neutral-700',
-        info: 'border-transparent bg-brand-turquoise/10 text-brand-navy',
+        info: 'border-transparent bg-brand-blue/10 text-brand-blue-dark',
         success: 'border-transparent bg-success/10 text-success',
         warning: 'border-transparent bg-amber-100 text-amber-800',
         danger: 'border-transparent bg-destructive/10 text-destructive',
diff --git a/apps/frontend/src/components/ui/button.tsx b/apps/frontend/src/components/ui/button.tsx
index a6dfeef..b1a7f48 100644
--- a/apps/frontend/src/components/ui/button.tsx
+++ b/apps/frontend/src/components/ui/button.tsx
@@ -9,17 +9,23 @@ import { cn } from '@/lib/utils';
 /**
  * Bouton Xpeditis.
  *
- * Charte : le turquoise porte l'action, le navy porte la structure.
- * - `primary`   : action principale de l'ecran (une seule par vue)
- * - `secondary` : action structurante
- * - `outline`   : action secondaire
- * - `ghost`     : actions de table, boutons-icone
+ * L'action est portee par le navy plein a texte blanc. Les actions de second
+ * rang restent claires : peindre chaque bouton en navy noyait l'action
+ * principale au milieu d'aplats sombres, notamment dans les tableaux.
+ *
+ * - `primary` / `secondary` : action pleine, navy, texte blanc
+ * - `outline`               : action secondaire, fond blanc, bordure, texte navy
+ * - `ghost`                 : actions de table, boutons-icone
+ * - `destructive`           : suppression, rouge a texte blanc
  *
  * `default` est conserve comme alias de `primary` pour compatibilite.
  */
+const NAVY_BUTTON =
+  'bg-brand-navy text-white hover:bg-brand-navy/90 active:bg-brand-navy/95 disabled:cursor-not-allowed';
+
 const buttonVariants = cva(
   [
-    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md',
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg',
     'font-body font-medium',
     'transition-colors duration-150 ease-out',
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
@@ -29,28 +35,25 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        // Texte navy sur turquoise : 8,49:1 (AAA). Le blanc sur turquoise ne
-        // donne que 2,05:1 et echoue AA. Ce couple est deja celui employe par
-        // la sidebar d'administration d'origine.
-        primary:
-          'bg-brand-turquoise text-brand-navy hover:bg-brand-turquoise/90 active:bg-brand-turquoise/95',
-        default:
-          'bg-brand-turquoise text-brand-navy hover:bg-brand-turquoise/90 active:bg-brand-turquoise/95',
-        secondary: 'bg-brand-navy text-white hover:bg-brand-navy/90 active:bg-brand-navy/95',
-        outline: 'border border-border bg-white text-brand-navy hover:bg-neutral-50 active:bg-neutral-100',
+        primary: NAVY_BUTTON,
+        default: NAVY_BUTTON,
+        secondary: NAVY_BUTTON,
+        outline:
+          'border border-border bg-white text-brand-navy hover:bg-neutral-50 active:bg-neutral-100',
         ghost: 'text-neutral-700 hover:bg-neutral-100 hover:text-brand-navy active:bg-neutral-200',
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/95',
+          'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/95 disabled:cursor-not-allowed',
         // Souligne en permanence : identifier un lien par la seule couleur
         // echoue au critere WCAG 1.4.1.
-        link: 'text-brand-navy underline underline-offset-4 hover:text-brand-turquoise',
+        link: 'text-brand-navy underline underline-offset-4 hover:text-brand-blue',
       },
       size: {
         sm: 'h-8 px-3 text-body-xs [&_svg]:size-3.5',
-        md: 'h-9 px-4 text-body-sm [&_svg]:size-4',
-        lg: 'h-10 px-6 text-body-sm [&_svg]:size-4',
-        icon: 'h-9 w-9 [&_svg]:size-4',
-        'icon-sm': 'h-8 w-8 [&_svg]:size-3.5',
+        /** Gabarit de reference du dashboard : 40 px de haut, texte 14 px. */
+        md: 'h-10 px-6 text-body-sm [&_svg]:size-4',
+        lg: 'h-11 px-8 text-body-sm [&_svg]:size-4',
+        icon: 'size-10 [&_svg]:size-4',
+        'icon-sm': 'size-8 [&_svg]:size-3.5',
       },
     },
     defaultVariants: {
diff --git a/apps/frontend/src/components/ui/callout.tsx b/apps/frontend/src/components/ui/callout.tsx
index ae7f329..f277fb4 100644
--- a/apps/frontend/src/components/ui/callout.tsx
+++ b/apps/frontend/src/components/ui/callout.tsx
@@ -13,8 +13,8 @@ export type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';
 const config: Record<CalloutVariant, { icon: LucideIcon; wrapper: string; icon_: string }> = {
   info: {
     icon: Info,
-    wrapper: 'border-brand-turquoise/30 bg-brand-turquoise/5',
-    icon_: 'text-brand-turquoise',
+    wrapper: 'border-brand-blue/30 bg-brand-blue/5',
+    icon_: 'text-brand-blue',
   },
   success: { icon: CheckCircle2, wrapper: 'border-success/30 bg-success/5', icon_: 'text-success' },
   warning: { icon: AlertTriangle, wrapper: 'border-amber-300 bg-amber-50', icon_: 'text-amber-600' },
@@ -48,7 +48,7 @@ export function Callout({
         )}
         <div
           className={cn(
-            'text-body-sm text-neutral-700 [&_a]:text-brand-turquoise [&_a]:underline-offset-4 hover:[&_a]:underline',
+            'text-body-sm text-neutral-700 [&_a]:text-brand-blue [&_a]:underline-offset-4 hover:[&_a]:underline',
             title && 'mt-1'
           )}
         >
diff --git a/apps/frontend/src/components/ui/checkbox.tsx b/apps/frontend/src/components/ui/checkbox.tsx
index bfae456..0498031 100644
--- a/apps/frontend/src/components/ui/checkbox.tsx
+++ b/apps/frontend/src/components/ui/checkbox.tsx
@@ -16,8 +16,8 @@ const Checkbox = React.forwardRef<
       'transition-colors duration-150 ease-out',
       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
       'disabled:cursor-not-allowed disabled:opacity-50',
-      'data-[state=checked]:border-brand-turquoise data-[state=checked]:bg-brand-turquoise',
-      'data-[state=indeterminate]:border-brand-turquoise data-[state=indeterminate]:bg-brand-turquoise',
+      'data-[state=checked]:border-brand-blue data-[state=checked]:bg-brand-blue',
+      'data-[state=indeterminate]:border-brand-blue data-[state=indeterminate]:bg-brand-blue',
       className
     )}
     {...props}
diff --git a/apps/frontend/src/components/ui/dropdown-menu.tsx b/apps/frontend/src/components/ui/dropdown-menu.tsx
index 138e693..3a8ead1 100644
--- a/apps/frontend/src/components/ui/dropdown-menu.tsx
+++ b/apps/frontend/src/components/ui/dropdown-menu.tsx
@@ -107,7 +107,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-4 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="size-4 text-brand-turquoise" />
+        <Check className="size-4 text-brand-blue" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -122,7 +122,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem ref={ref} className={cn(itemBase, 'pl-8', className)} {...props}>
     <span className="absolute left-2 flex size-4 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="size-2 fill-brand-turquoise text-brand-turquoise" />
+        <Circle className="size-2 fill-brand-blue text-brand-blue" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/apps/frontend/src/components/ui/select.tsx b/apps/frontend/src/components/ui/select.tsx
index a74aa74..f5af1b0 100644
--- a/apps/frontend/src/components/ui/select.tsx
+++ b/apps/frontend/src/components/ui/select.tsx
@@ -127,7 +127,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     <span className="absolute right-2 flex size-4 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="size-4 text-brand-turquoise" />
+        <Check className="size-4 text-brand-blue" />
       </SelectPrimitive.ItemIndicator>
     </span>
   </SelectPrimitive.Item>
diff --git a/apps/frontend/src/components/ui/states.tsx b/apps/frontend/src/components/ui/states.tsx
index 6a50d7a..3e3405a 100644
--- a/apps/frontend/src/components/ui/states.tsx
+++ b/apps/frontend/src/components/ui/states.tsx
@@ -30,7 +30,7 @@ export function Spinner({
   return (
     <>
       <Loader2
-        className={cn('animate-spin text-brand-turquoise', spinnerSizes[size], className)}
+        className={cn('animate-spin text-brand-blue', spinnerSizes[size], className)}
         aria-hidden="true"
       />
       <span className="sr-only">{label}</span>
diff --git a/apps/frontend/src/components/ui/tabs.tsx b/apps/frontend/src/components/ui/tabs.tsx
index b87090b..e413a25 100644
--- a/apps/frontend/src/components/ui/tabs.tsx
+++ b/apps/frontend/src/components/ui/tabs.tsx
@@ -36,10 +36,10 @@ const TabsTrigger = React.forwardRef<
       'transition-colors hover:text-brand-navy',
       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
       'disabled:pointer-events-none disabled:opacity-50',
-      // Filet turquoise sous l'onglet actif, plutot qu'un aplat colore.
+      // Filet bleu sous l'onglet actif, plutot qu'un aplat colore.
       'data-[state=active]:text-brand-navy',
       'after:absolute after:inset-x-2 after:-bottom-px after:h-0.5 after:rounded-full after:bg-transparent',
-      'data-[state=active]:after:bg-brand-turquoise',
+      'data-[state=active]:after:bg-brand-blue',
       className
     )}
     {...props}
diff --git a/apps/frontend/src/components/ui/toast.tsx b/apps/frontend/src/components/ui/toast.tsx
index 2601c7c..1405693 100644
--- a/apps/frontend/src/components/ui/toast.tsx
+++ b/apps/frontend/src/components/ui/toast.tsx
@@ -132,7 +132,7 @@ const variantConfig: Record<
   success: { icon: CheckCircle2, iconClass: 'text-success', role: 'status' },
   error: { icon: XCircle, iconClass: 'text-destructive', role: 'alert' },
   warning: { icon: AlertTriangle, iconClass: 'text-amber-500', role: 'alert' },
-  info: { icon: Info, iconClass: 'text-brand-turquoise', role: 'status' },
+  info: { icon: Info, iconClass: 'text-brand-blue', role: 'status' },
 };
 
 function Toaster() {
@@ -146,8 +146,9 @@ function Toaster() {
       aria-atomic="false"
       className={cn(
         'pointer-events-none fixed z-[100] flex flex-col gap-2',
-        // Mobile : en haut, pleine largeur. Desktop : en bas a droite.
-        'inset-x-4 top-4 sm:inset-x-auto sm:bottom-4 sm:right-4 sm:top-auto sm:w-96'
+        // Mobile : en haut, pleine largeur. Desktop : en bas a droite, au-dessus
+        // du bouton cookies qui occupe le coin (44 px + 16 px de marge).
+        'inset-x-4 top-4 sm:inset-x-auto sm:bottom-20 sm:right-4 sm:top-auto sm:w-96'
       )}
     >
       {toasts.map(t => {
@@ -174,7 +175,7 @@ function Toaster() {
                     t.action?.onClick();
                     dismiss(t.id);
                   }}
-                  className="mt-2 rounded-md text-body-xs font-medium text-brand-turquoise underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  className="mt-2 rounded-md text-body-xs font-medium text-brand-blue underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 >
                   {t.action.label}
                 </button>
diff --git a/apps/frontend/src/lib/api/dashboard.ts b/apps/frontend/src/lib/api/dashboard.ts
index de517eb..67c96d0 100644
--- a/apps/frontend/src/lib/api/dashboard.ts
+++ b/apps/frontend/src/lib/api/dashboard.ts
@@ -12,8 +12,10 @@ import { get } from './client';
 export interface DashboardKPIs {
   bookingsThisMonth: number;
   bookingsThisMonthChange: number;
-  totalTEUs: number;
-  totalTEUsChange: number;
+  /** Volume LCL du mois, en CBM. */
+  volumeCBM: number;
+  volumeCBMChange: number;
+  /** Commission Xpeditis sur les reservations acceptees, en EUR. */
   estimatedRevenue: number;
   estimatedRevenueChange: number;
   pendingConfirmations: number;
@@ -24,6 +26,7 @@ export interface DashboardKPIs {
  * Bookings Chart Data
  */
 export interface BookingsChartData {
+  /** Cles de mois ISO `YYYY-MM` ; mises en forme cote client. */
   labels: string[];
   data: number[];
 }
@@ -34,8 +37,10 @@ export interface BookingsChartData {
 export interface TradeLane {
   route: string;
   bookingCount: number;
-  origin: string;
-  destination: string;
+  originPort: string;
+  destinationPort: string;
+  totalVolumeCBM: number;
+  avgPrice: number;
 }
 
 /**
@@ -44,8 +49,10 @@ export interface TradeLane {
 export interface DashboardAlert {
   id: string;
   severity: 'critical' | 'high' | 'medium' | 'low';
-  title: string;
-  message: string;
+  /** Cles de traduction resolues par le client. */
+  titleKey: string;
+  messageKey: string;
+  messageParams?: Record<string, string | number>;
   bookingId?: string;
   bookingNumber?: string;
   createdAt: string;
diff --git a/apps/frontend/src/lib/chart-colors.ts b/apps/frontend/src/lib/chart-colors.ts
index 888ce5e..b5d251e 100644
--- a/apps/frontend/src/lib/chart-colors.ts
+++ b/apps/frontend/src/lib/chart-colors.ts
@@ -1,27 +1,43 @@
 /**
- * Palette des graphiques.
+ * Palette et specifications des graphiques.
  *
- * Recharts n'accepte que des couleurs litterales : ces constantes reprennent
- * exactement les valeurs de la charte (voir docs/design-system-audit.md §1) et
- * remplacent les couleurs qui avaient ete ecrites en dur dans les pages —
- * dont `#8884d8`, le violet par defaut de Recharts reste par oubli.
+ * Recharts n'accepte que des couleurs litterales : ces constantes centralisent
+ * les valeurs et evitent que chaque page reinvente les siennes.
  *
- * Aucune valeur de ce fichier n'est inventee.
+ * Deux familles, deux roles distincts — elles ne se melangent jamais :
+ *
+ * - `SERIES` : une grandeur qui se compare a elle-meme (volume dans le temps,
+ *   classement). Une seule teinte, le bleu applicatif.
+ * - `STATUS` : un etat (accepte / en attente / refuse). Ces trois couleurs sont
+ *   reservees a cet usage et ne servent jamais de « serie 4 ». Elles sont
+ *   toujours accompagnees d'un libelle : la couleur seule n'est pas porteuse.
+ *
+ * Palette de statut verifiee (validate_palette, mode clair) : bande de clarte,
+ * plancher de chroma, separation daltonisme (pire paire rouge/ambre : ΔE 13,9
+ * deutan) et plancher vision normale (ΔE 19,8) — tous PASS. L'ambre passe sous
+ * 3:1 vis-a-vis du fond, d'ou l'obligation de libelles visibles, respectee par
+ * la legende et les etiquettes directes.
  */
-export const CHART_COLORS = {
-  /** brand-turquoise — serie principale */
-  primary: '#34CCCD',
-  /** brand-navy — serie de contraste */
+
+/** Serie unique : magnitude, evolution, classement. */
+export const SERIES = {
+  /** brand-blue — accent applicatif */
+  primary: '#2563EB',
+  /** brand-navy — seconde serie de contraste si necessaire */
   navy: '#10183A',
-  /** success / brand-green */
-  success: '#067224',
-  /** --destructive */
-  danger: '#EF4444',
-  /** amber-500 — avertissement / en attente */
-  warning: '#F59E0B',
 } as const;
 
-/** Habillage : grilles, axes, infobulles. */
+/** Etats. Reserves : jamais employes comme couleurs de serie. */
+export const STATUS = {
+  /** brand-green — accepte */
+  good: '#067224',
+  /** amber-500 — en attente */
+  warning: '#F59E0B',
+  /** red-500 — refuse */
+  critical: '#EF4444',
+} as const;
+
+/** Habillage : grilles, axes, infobulles. Volontairement recessif. */
 export const CHART_UI = {
   /** neutral-100 */
   grid: '#EDEEF5',
@@ -32,6 +48,17 @@ export const CHART_UI = {
   surface: '#FFFFFF',
 } as const;
 
+/** Specifications de marque communes a tous les graphiques. */
+export const MARK = {
+  /** Epaisseur des courbes. */
+  strokeWidth: 2,
+  /** Extremite de barre arrondie, cote oppose a la ligne de base. */
+  barRadius: 4,
+  /** Diametre minimal d'un point survolable. */
+  dotRadius: 4,
+  activeDotRadius: 5,
+} as const;
+
 /** Style d'infobulle commun, aux polices et couleurs de la charte. */
 export const chartTooltipStyle = {
   contentStyle: {
@@ -40,15 +67,17 @@ export const chartTooltipStyle = {
     borderRadius: '0.5rem',
     fontSize: '0.75rem',
     fontFamily: 'var(--font-montserrat), sans-serif',
-    color: CHART_COLORS.navy,
-    boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    color: SERIES.navy,
+    boxShadow: '0 4px 12px -2px rgb(16 24 58 / 0.12)',
+    padding: '0.5rem 0.75rem',
   },
-  labelStyle: { color: CHART_COLORS.navy, fontWeight: 600 },
+  labelStyle: { color: SERIES.navy, fontWeight: 600, marginBottom: '0.125rem' },
+  itemStyle: { padding: 0 },
 } as const;
 
-/** Style d'axe commun. */
+/** Style d'axe commun : le trait recule, la donnee avance. */
 export const chartAxisProps = {
   tick: { fontSize: 11, fill: CHART_UI.axis },
   tickLine: false,
-  axisLine: { stroke: CHART_UI.border },
+  axisLine: false,
 } as const;
diff --git a/apps/frontend/tailwind.config.ts b/apps/frontend/tailwind.config.ts
index c61a941..c62d795 100644
--- a/apps/frontend/tailwind.config.ts
+++ b/apps/frontend/tailwind.config.ts
@@ -24,6 +24,17 @@ const config: Config = {
         'brand-green': '#067224',
         'brand-gray': '#F2F2F2',
 
+        // Accent applicatif (dashboard, admin, portails).
+        // Le turquoise reste l'accent du site vitrine ; a l'interieur du
+        // produit l'action est portee par le bleu historique (ancien
+        // `blue-600` de Tailwind, deja la couleur du dashboard d'origine).
+        'brand-blue': {
+          DEFAULT: '#2563EB',
+          light: '#3B82F6',
+          dark: '#1D4ED8',
+          soft: '#EFF6FF',
+        },
+
         // Shadcn UI colors (keep for components compatibility)
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',