refactoring

2026-03-31 09:14:47 +00:00
parent 9bfffeeebe
commit 5383df6dcb
200 changed files with 11192 additions and 7063 deletions
--- a/lib/shared/design_system/tokens/app_colors.dart
+++ b/lib/shared/design_system/tokens/app_colors.dart
@@ -1,34 +1,35 @@
 import 'package:flutter/material.dart';

-/// UnionFlow Mobile App - Couleurs Globales (Strict DRY)
-/// Palette principale: Vert, Blanc (Jour), Noir (Nuit).
+/// UnionFlow Mobile App - Couleurs Globales (DRY)
+/// Palette : Vert Forêt (Jour) / Vert Ardoise (Nuit)
 class AppColors {
  // --- Branding ---
-  static const Color primaryGreen = Color(0xFF17BF63); // Vert vibrant style social (Fb/Tw) - Corrigé.
-  static const Color brandGreen = Color(0xFF2E7D32); // Vert professionnel et lisible
+  static const Color primaryGreen = Color(0xFF2E7D32);   // Vert forêt professionnel
+  static const Color brandGreen = Color(0xFF1B5E20);     // Vert foncé / gradient top
  static const Color brandGreenLight = Color(0xFF4CAF50); // Vert d'accentuation
-  
+  static const Color brandMint = Color(0xFFA5D6A7);      // Vert menthe / secondaire
+
  // --- Mode Jour (Light) ---
-  static const Color lightBackground = Color(0xFFFFFFFF); // Blanc pur
-  static const Color lightSurface = Color(0xFFF5F8FA); // Gris extrêmement léger pour séparer les cards
-  static const Color lightBorder = Color(0xFFE1E8ED); // Bordures style Twitter
-  
-  // --- Mode Nuit (Dark OLED) ---
-  static const Color darkBackground = Color(0xFF000000); // Noir pur pour OLED
-  static const Color darkSurface = Color(0xFF15202B); // Gris sombre typique Twitter/Fb Dark
-  static const Color darkBorder = Color(0xFF38444D); // Bordure discrète sombre
+  static const Color lightBackground = Color(0xFFF1F8E9); // Teinte verte très légère
+  static const Color lightSurface = Color(0xFFFFFFFF);    // Blanc pur pour les cartes
+  static const Color lightBorder = Color(0xFFC8E6C9);     // Bordure vert pâle
+
+  // --- Mode Nuit (Dark) ---
+  static const Color darkBackground = Color(0xFF0F1A0F);  // Vert noir profond
+  static const Color darkSurface = Color(0xFF1A2E1A);     // Vert ardoise
+  static const Color darkBorder = Color(0xFF3A5E3A);      // Bordure sombre

  // --- Texte ---
-  static const Color textPrimaryLight = Color(0xFF14171A); // Presque noir
-  static const Color textSecondaryLight = Color(0xFF657786); // Gris texte
-  static const Color textPrimaryDark = Color(0xFFE1E8ED); // Presque blanc
-  static const Color textSecondaryDark = Color(0xFF8899A6); // Gris clair nuit
+  static const Color textPrimaryLight = Color(0xFF1C2B1C); // Vert très foncé / quasi noir
+  static const Color textSecondaryLight = Color(0xFF4E6B4E); // Vert gris moyen
+  static const Color textPrimaryDark = Color(0xFFE0F2E0);  // Blanc verdâtre
+  static const Color textSecondaryDark = Color(0xFF90B890); // Vert gris clair

-  // --- Sémantique (Succès, Erreur, Info) ---
-  static const Color error = Color(0xFFE0245E); // Rouge vif
-  static const Color success = Color(0xFF17BF63); // Vert validation
-  static const Color warning = Color(0xFFFFAD1F); // Orange
-  static const Color info = Color(0xFF1DA1F2); // Bleu info
+  // --- Sémantique ---
+  static const Color error = Color(0xFFDC2626);
+  static const Color success = Color(0xFF2E7D32);
+  static const Color warning = Color(0xFFF59E0B);
+  static const Color info = Color(0xFF0288D1);

  // --- Utilitaires ---
  static const Color transparent = Colors.transparent;
--- a/lib/shared/design_system/tokens/app_typography.dart
+++ b/lib/shared/design_system/tokens/app_typography.dart
@@ -1,47 +1,162 @@
 import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';

-
-/// UnionFlow Mobile App - Typographie Globale (Ultra Minimaliste)
-/// RÈGLE : AUCUN gros titre. Tailles limitées entre 10px et 14px pour maximiser l'information.
+/// UnionFlow Mobile App - Typographie Globale
+/// Roboto (Google Fonts) — cohérence cross-platform
 class AppTypography {
-  static const String _fontFamily = 'Roboto'; // Peut être changé pour 'Inter' si ajouté au pubspec.yaml
+  static const String _fontFamily = 'Roboto';

-  // --- Titres (Max 14px) ---
-  static const TextStyle headerSmall = TextStyle(
+  // --- Display / Titres principaux (Roboto via GoogleFonts) ---
+
+  static TextStyle get displayLarge => GoogleFonts.roboto(
+        fontSize: 32.0,
+        fontWeight: FontWeight.w700,
+        letterSpacing: -0.5,
+        height: 1.2,
+      );
+
+  static TextStyle get displayMedium => GoogleFonts.roboto(
+        fontSize: 28.0,
+        fontWeight: FontWeight.w700,
+        letterSpacing: -0.25,
+        height: 1.25,
+      );
+
+  static TextStyle get displaySmall => GoogleFonts.roboto(
+        fontSize: 24.0,
+        fontWeight: FontWeight.w600,
+        letterSpacing: 0,
+        height: 1.3,
+      );
+
+  // --- Titres de sections (Inter SemiBold) ---
+
+  static const TextStyle headerLarge = TextStyle(
    fontFamily: _fontFamily,
-    fontSize: 14.0,
-    fontWeight: FontWeight.w700, // Bold
+    fontSize: 22.0,
+    fontWeight: FontWeight.w700,
    letterSpacing: -0.2,
+    height: 1.27,
  );

-  // --- Corps de texte (Max 12px) ---
+  /// Alias historique — conservé pour compatibilité
+  static const TextStyle headerSmall = TextStyle(
+    fontFamily: _fontFamily,
+    fontSize: 18.0,
+    fontWeight: FontWeight.w700,
+    letterSpacing: -0.2,
+    height: 1.3,
+  );
+
+  static const TextStyle titleMedium = TextStyle(
+    fontFamily: _fontFamily,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.1,
+    height: 1.5,
+  );
+
+  static const TextStyle titleSmall = TextStyle(
+    fontFamily: _fontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.1,
+    height: 1.43,
+  );
+
+  // --- Corps de texte ---
+
+  static const TextStyle bodyLarge = TextStyle(
+    fontFamily: _fontFamily,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.3,
+    height: 1.5,
+  );
+
+  static const TextStyle bodyMedium = TextStyle(
+    fontFamily: _fontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.25,
+    height: 1.43,
+  );
+
+  /// Alias historique — conservé pour compatibilité
  static const TextStyle bodyTextSmall = TextStyle(
    fontFamily: _fontFamily,
-    fontSize: 12.0,
-    fontWeight: FontWeight.w400, // Regular
+    fontSize: 13.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.2,
    height: 1.4,
  );

-  // --- Boutons et Actions (Max 13px) ---
+  // --- Actions et boutons ---
+
  static const TextStyle actionText = TextStyle(
    fontFamily: _fontFamily,
-    fontSize: 13.0,
-    fontWeight: FontWeight.w600, // SemiBold
+    fontSize: 15.0,
+    fontWeight: FontWeight.w600,
    letterSpacing: 0.1,
  );

-  // --- Sous-titres, dates, labels (Max 11px) ---
-  static const TextStyle subtitleSmall = TextStyle(
+  static const TextStyle buttonLabel = TextStyle(
    fontFamily: _fontFamily,
-    fontSize: 11.0,
-    fontWeight: FontWeight.w300, // Light
-    letterSpacing: 0.2,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w700,
+    letterSpacing: 0.1,
  );

-  // --- Badges, Piles, Métriques très denses (Max 10px) ---
+  // --- Sous-titres et labels ---
+
+  /// Alias historique — conservé pour compatibilité
+  static const TextStyle subtitleSmall = TextStyle(
+    fontFamily: _fontFamily,
+    fontSize: 12.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.2,
+    height: 1.4,
+  );
+
+  static const TextStyle labelMedium = TextStyle(
+    fontFamily: _fontFamily,
+    fontSize: 12.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.4,
+    height: 1.33,
+  );
+
+  // --- Badges, métriques denses ---
+
+  /// Alias historique — conservé pour compatibilité
  static const TextStyle badgeText = TextStyle(
    fontFamily: _fontFamily,
-    fontSize: 10.0,
-    fontWeight: FontWeight.w500, // Medium
+    fontSize: 11.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.3,
+  );
+
+  static const TextStyle caption = TextStyle(
+    fontFamily: _fontFamily,
+    fontSize: 11.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.4,
+    height: 1.45,
+  );
+
+  // --- Navigation ---
+
+  static const TextStyle navLabel = TextStyle(
+    fontFamily: _fontFamily,
+    fontSize: 11.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.3,
+  );
+
+  static const TextStyle navLabelSelected = TextStyle(
+    fontFamily: _fontFamily,
+    fontSize: 11.0,
+    fontWeight: FontWeight.w700,
+    letterSpacing: 0.3,
  );
 }
--- a/lib/shared/design_system/tokens/color_tokens.dart
+++ b/lib/shared/design_system/tokens/color_tokens.dart
@@ -1,11 +1,8 @@
 /// Design Tokens - Couleurs UnionFlow
 ///
-/// Palette de couleurs Bleu Roi + Bleu Pétrole
-/// Inspirée des tendances UI/UX 2024-2025
-/// Basée sur les principes de Material Design 3
-///
-/// MODE JOUR: Bleu Roi (#4169E1) - Royal Blue
-/// MODE NUIT: Bleu Pétrole (#2C5F6F) - Petroleum Blue
+/// Palette Vert Zen / Santé — Professionnelle et apaisante
+/// MODE JOUR : Vert Forêt (#2E7D32) — Forest Green
+/// MODE NUIT : Vert Ardoise (#1A2E1A) — Slate Green
 library color_tokens;

 import 'package:flutter/material.dart';
@@ -15,180 +12,176 @@ class ColorTokens {
  ColorTokens._();

  // ═══════════════════════════════════════════════════════════════════════════
-  // COULEURS PRIMAIRES - MODE JOUR (Bleu Roi)
+  // COULEURS PRIMAIRES - MODE JOUR (Vert Forêt)
  // ═══════════════════════════════════════════════════════════════════════════

-  /// Couleur primaire principale - Bleu Roi (Royal Blue)
-  static const Color primary = Color(0xFF4169E1); // Bleu roi
-  static const Color primaryLight = Color(0xFF6B8EF5); // Bleu roi clair
-  static const Color primaryDark = Color(0xFF2952C8); // Bleu roi sombre
-  static const Color primaryContainer = Color(0xFFE3ECFF); // Container bleu roi
-  static const Color onPrimary = Color(0xFFFFFFFF); // Texte sur primaire (blanc)
-  static const Color onPrimaryContainer = Color(0xFF001A41); // Texte sur container
+  /// Couleur primaire principale - Vert Forêt
+  static const Color primary = Color(0xFF2E7D32);
+  static const Color primaryLight = Color(0xFF4CAF50);
+  static const Color primaryDark = Color(0xFF1B5E20);
+  static const Color primaryContainer = Color(0xFFE8F5E9);
+  static const Color onPrimary = Color(0xFFFFFFFF);
+  static const Color onPrimaryContainer = Color(0xFF003908);

  // ═══════════════════════════════════════════════════════════════════════════
-  // COULEURS PRIMAIRES - MODE NUIT (Bleu Pétrole)
+  // COULEURS PRIMAIRES - MODE NUIT (Vert Ardoise)
  // ═══════════════════════════════════════════════════════════════════════════

-  /// Couleur primaire mode nuit - Bleu Pétrole
-  static const Color primaryDarkMode = Color(0xFF2C5F6F); // Bleu pétrole
-  static const Color primaryLightDarkMode = Color(0xFF3D7A8C); // Bleu pétrole clair
-  static const Color primaryDarkDarkMode = Color(0xFF1B4D5C); // Bleu pétrole sombre
-  static const Color primaryContainerDarkMode = Color(0xFF1E3A44); // Container mode nuit
-  static const Color onPrimaryDarkMode = Color(0xFFE5E7EB); // Texte sur primaire (gris clair)
+  static const Color primaryDarkMode = Color(0xFF1A2E1A);
+  static const Color primaryLightDarkMode = Color(0xFF2E4D2E);
+  static const Color primaryDarkDarkMode = Color(0xFF0F1A0F);
+  static const Color primaryContainerDarkMode = Color(0xFF1E3A1E);
+  static const Color onPrimaryDarkMode = Color(0xFFE0F2E0);

  // ═══════════════════════════════════════════════════════════════════════════
-  // COULEURS SECONDAIRES - Indigo Moderne
+  // COULEURS SECONDAIRES - Vert Menthe / Sauge
  // ═══════════════════════════════════════════════════════════════════════════

-  static const Color secondary = Color(0xFF6366F1); // Indigo moderne
-  static const Color secondaryLight = Color(0xFF8B8FF6); // Indigo clair
-  static const Color secondaryDark = Color(0xFF4F46E5); // Indigo sombre
-  static const Color secondaryContainer = Color(0xFFE0E7FF); // Container indigo
+  static const Color secondary = Color(0xFF66BB6A);
+  static const Color secondaryLight = Color(0xFFA5D6A7);
+  static const Color secondaryDark = Color(0xFF388E3C);
+  static const Color secondaryContainer = Color(0xFFC8E6C9);
  static const Color onSecondary = Color(0xFFFFFFFF);
-  static const Color onSecondaryContainer = Color(0xFF1E1B3A);
+  static const Color onSecondaryContainer = Color(0xFF002106);

  // ═══════════════════════════════════════════════════════════════════════════
-  // COULEURS TERTIAIRES - Vert Émeraude
+  // COULEURS TERTIAIRES - Vert Lime / Accent
  // ═══════════════════════════════════════════════════════════════════════════

-  static const Color tertiary = Color(0xFF10B981); // Vert émeraude
-  static const Color tertiaryLight = Color(0xFF34D399); // Vert clair
-  static const Color tertiaryDark = Color(0xFF059669); // Vert sombre
-  static const Color tertiaryContainer = Color(0xFFD1FAE5); // Container vert
+  static const Color tertiary = Color(0xFF8BC34A);
+  static const Color tertiaryLight = Color(0xFFAED581);
+  static const Color tertiaryDark = Color(0xFF558B2F);
+  static const Color tertiaryContainer = Color(0xFFDCEDC8);
  static const Color onTertiary = Color(0xFFFFFFFF);
-  static const Color onTertiaryContainer = Color(0xFF002114);
+  static const Color onTertiaryContainer = Color(0xFF1B3A00);

  // ═══════════════════════════════════════════════════════════════════════════
  // COULEURS NEUTRES - MODE JOUR
  // ═══════════════════════════════════════════════════════════════════════════

-  static const Color surface = Color(0xFFFFFFFF); // Surface principale (blanc)
-  static const Color surfaceVariant = Color(0xFFF8F9FA); // Surface variante (gris très clair)
-  static const Color surfaceContainer = Color(0xFFFFFFFF); // Container surface
-  static const Color surfaceContainerHigh = Color(0xFFF8F9FA); // Container élevé
-  static const Color surfaceContainerHighest = Color(0xFFE5E7EB); // Container max
-  static const Color background = Color(0xFFF8F9FA); // Background général
+  static const Color surface = Color(0xFFFFFFFF);
+  static const Color surfaceVariant = Color(0xFFF1F8E9);
+  static const Color surfaceContainer = Color(0xFFFFFFFF);
+  static const Color surfaceContainerHigh = Color(0xFFF1F8E9);
+  static const Color surfaceContainerHighest = Color(0xFFDCEDC8);
+  static const Color background = Color(0xFFF1F8E9);

-  static const Color onSurface = Color(0xFF1F2937); // Texte principal (gris très foncé)
-  static const Color onSurfaceVariant = Color(0xFF6B7280); // Texte secondaire (gris moyen)
-  static const Color textSecondary = Color(0xFF6B7280); // Texte secondaire (alias)
-  static const Color outline = Color(0xFFD1D5DB); // Bordures
-  static const Color outlineVariant = Color(0xFFE5E7EB); // Bordures claires
+  static const Color onSurface = Color(0xFF1C2B1C);
+  static const Color onSurfaceVariant = Color(0xFF4E6B4E);
+  static const Color textSecondary = Color(0xFF4E6B4E);
+  static const Color outline = Color(0xFFC8E6C9);
+  static const Color outlineVariant = Color(0xFFDCEDC8);

  // ═══════════════════════════════════════════════════════════════════════════
  // COULEURS NEUTRES - MODE NUIT
  // ═══════════════════════════════════════════════════════════════════════════

-  static const Color surfaceDarkMode = Color(0xFF1E1E1E); // Surface principale (gris très sombre)
-  static const Color surfaceVariantDarkMode = Color(0xFF2C2C2C); // Surface variante
-  static const Color backgroundDarkMode = Color(0xFF121212); // Background général (noir profond)
+  static const Color surfaceDarkMode = Color(0xFF1A2E1A);
+  static const Color surfaceVariantDarkMode = Color(0xFF243824);
+  static const Color backgroundDarkMode = Color(0xFF0F1A0F);

-  static const Color onSurfaceDarkMode = Color(0xFFE5E7EB); // Texte principal (gris très clair)
-  static const Color onSurfaceVariantDarkMode = Color(0xFF9CA3AF); // Texte secondaire (gris moyen)
-  static const Color outlineDarkMode = Color(0xFF4B5563); // Bordures mode nuit
+  static const Color onSurfaceDarkMode = Color(0xFFE0F2E0);
+  static const Color onSurfaceVariantDarkMode = Color(0xFF90B890);
+  static const Color outlineDarkMode = Color(0xFF3A5E3A);

  // ═══════════════════════════════════════════════════════════════════════════
-  // COULEURS SÉMANTIQUES - États et feedback
+  // COULEURS SÉMANTIQUES
  // ═══════════════════════════════════════════════════════════════════════════
-  
-  /// Couleurs de succès
-  static const Color success = Color(0xFF10B981); // Vert succès
-  static const Color successLight = Color(0xFF34D399); // Vert clair
-  static const Color successDark = Color(0xFF059669); // Vert sombre
-  static const Color successContainer = Color(0xFFECFDF5); // Container succès
+
+  static const Color success = Color(0xFF2E7D32);
+  static const Color successLight = Color(0xFF4CAF50);
+  static const Color successDark = Color(0xFF1B5E20);
+  static const Color successContainer = Color(0xFFE8F5E9);
  static const Color onSuccess = Color(0xFFFFFFFF);
-  static const Color onSuccessContainer = Color(0xFF002114);
+  static const Color onSuccessContainer = Color(0xFF003908);

-  /// Couleurs d'erreur
-  static const Color error = Color(0xFFDC2626); // Rouge erreur
-  static const Color errorLight = Color(0xFFEF4444); // Rouge clair
-  static const Color errorDark = Color(0xFFB91C1C); // Rouge sombre
-  static const Color errorContainer = Color(0xFFFEF2F2); // Container erreur
+  static const Color error = Color(0xFFDC2626);
+  static const Color errorLight = Color(0xFFEF4444);
+  static const Color errorDark = Color(0xFFB91C1C);
+  static const Color errorContainer = Color(0xFFFEF2F2);
  static const Color onError = Color(0xFFFFFFFF);
  static const Color onErrorContainer = Color(0xFF410002);

-  /// Couleurs d'avertissement
-  static const Color warning = Color(0xFFF59E0B); // Orange avertissement
-  static const Color warningLight = Color(0xFFFBBF24); // Orange clair
-  static const Color warningDark = Color(0xFFD97706); // Orange sombre
-  static const Color warningContainer = Color(0xFFFEF3C7); // Container avertissement
+  static const Color warning = Color(0xFFF59E0B);
+  static const Color warningLight = Color(0xFFFBBF24);
+  static const Color warningDark = Color(0xFFD97706);
+  static const Color warningContainer = Color(0xFFFEF3C7);
  static const Color onWarning = Color(0xFFFFFFFF);
  static const Color onWarningContainer = Color(0xFF2D1B00);

-  /// Couleurs d'information
-  static const Color info = Color(0xFF0EA5E9); // Bleu info
-  static const Color infoLight = Color(0xFF38BDF8); // Bleu clair
-  static const Color infoDark = Color(0xFF0284C7); // Bleu sombre
-  static const Color infoContainer = Color(0xFFE0F2FE); // Container info
+  static const Color info = Color(0xFF0288D1);
+  static const Color infoLight = Color(0xFF29B6F6);
+  static const Color infoDark = Color(0xFF01579B);
+  static const Color infoContainer = Color(0xFFE1F5FE);
  static const Color onInfo = Color(0xFFFFFFFF);
  static const Color onInfoContainer = Color(0xFF001D36);

  // ═══════════════════════════════════════════════════════════════════════════
-  // COULEURS SPÉCIALISÉES - Interface avancée
+  // COULEURS DE NAVIGATION
  // ═══════════════════════════════════════════════════════════════════════════
-  
-  /// Couleurs de navigation - Mode Jour
+
  static const Color navigationBackground = Color(0xFFFFFFFF);
-  static const Color navigationSelected = Color(0xFF4169E1); // Bleu roi
-  static const Color navigationUnselected = Color(0xFF6B7280);
-  static const Color navigationIndicator = Color(0xFF4169E1); // Bleu roi
+  static const Color navigationSelected = Color(0xFF2E7D32);
+  static const Color navigationUnselected = Color(0xFF4E6B4E);
+  static const Color navigationIndicator = Color(0xFFE8F5E9);

-  /// Couleurs de navigation - Mode Nuit
-  static const Color navigationBackgroundDarkMode = Color(0xFF1E1E1E);
-  static const Color navigationSelectedDarkMode = Color(0xFF2C5F6F); // Bleu pétrole
-  static const Color navigationUnselectedDarkMode = Color(0xFF9CA3AF);
-  static const Color navigationIndicatorDarkMode = Color(0xFF2C5F6F); // Bleu pétrole
+  static const Color navigationBackgroundDarkMode = Color(0xFF1A2E1A);
+  static const Color navigationSelectedDarkMode = Color(0xFFA5D6A7);
+  static const Color navigationUnselectedDarkMode = Color(0xFF90B890);
+  static const Color navigationIndicatorDarkMode = Color(0xFF2E4D2E);

-  /// Couleurs d'élévation et ombres
-  static const Color shadow = Color(0x1A000000); // Ombre légère
-  static const Color shadowMedium = Color(0x33000000); // Ombre moyenne
-  static const Color shadowHigh = Color(0x4D000000); // Ombre forte
+  // ═══════════════════════════════════════════════════════════════════════════
+  // OMBRES ET EFFETS
+  // ═══════════════════════════════════════════════════════════════════════════

-  /// Couleurs de glassmorphism (tendance 2024-2025)
-  static const Color glassBackground = Color(0x80FFFFFF); // Fond verre
-  static const Color glassBorder = Color(0x33FFFFFF); // Bordure verre
-  static const Color glassOverlay = Color(0x0DFFFFFF); // Overlay verre
+  static const Color shadow = Color(0x1A1C2B1C);
+  static const Color shadowMedium = Color(0x331C2B1C);
+  static const Color shadowHigh = Color(0x4D1C2B1C);
+
+  static const Color glassBackground = Color(0x80FFFFFF);
+  static const Color glassBorder = Color(0x33FFFFFF);
+  static const Color glassOverlay = Color(0x0DFFFFFF);
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // GRADIENTS
+  // ═══════════════════════════════════════════════════════════════════════════

-  /// Couleurs de gradient - Mode Jour (Bleu Roi)
  static const List<Color> primaryGradient = [
-    Color(0xFF4169E1), // Bleu roi
-    Color(0xFF6B8EF5), // Bleu roi clair
+    Color(0xFF1B5E20),
+    Color(0xFF2E7D32),
+    Color(0xFF388E3C),
  ];

-  /// Couleurs de gradient - Mode Nuit (Bleu Pétrole)
  static const List<Color> primaryGradientDarkMode = [
-    Color(0xFF2C5F6F), // Bleu pétrole
-    Color(0xFF3D7A8C), // Bleu pétrole clair
+    Color(0xFF0F1A0F),
+    Color(0xFF1A2E1A),
+    Color(0xFF243824),
  ];

  static const List<Color> secondaryGradient = [
-    Color(0xFF6366F1), // Indigo
-    Color(0xFF8B8FF6), // Indigo clair
+    Color(0xFF388E3C),
+    Color(0xFF66BB6A),
  ];

  static const List<Color> successGradient = [
-    Color(0xFF10B981), // Vert émeraude
-    Color(0xFF34D399), // Vert clair
+    Color(0xFF2E7D32),
+    Color(0xFF4CAF50),
  ];

  // ═══════════════════════════════════════════════════════════════════════════
  // MÉTHODES UTILITAIRES
  // ═══════════════════════════════════════════════════════════════════════════
-  
-  /// Obtient une couleur avec opacité
+
  static Color withOpacity(Color color, double opacity) {
    return color.withOpacity(opacity);
  }
-  
-  /// Obtient une couleur plus claire
+
  static Color lighten(Color color, [double amount = 0.1]) {
    final hsl = HSLColor.fromColor(color);
    final lightness = (hsl.lightness + amount).clamp(0.0, 1.0);
    return hsl.withLightness(lightness).toColor();
  }
-  
-  /// Obtient une couleur plus sombre
+
  static Color darken(Color color, [double amount = 0.1]) {
    final hsl = HSLColor.fromColor(color);
    final lightness = (hsl.lightness - amount).clamp(0.0, 1.0);
--- a/lib/shared/design_system/tokens/typography_tokens.dart
+++ b/lib/shared/design_system/tokens/typography_tokens.dart
@@ -5,6 +5,7 @@
 library typography_tokens;

 import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'color_tokens.dart';

 /// Tokens typographiques - Système de texte moderne
@@ -15,12 +16,12 @@ class TypographyTokens {
  // FAMILLES DE POLICES
  // ═══════════════════════════════════════════════════════════════════════════
  
-  /// Police principale - Inter (moderne et lisible)
-  static const String primaryFontFamily = 'Inter';
-  
-  /// Police secondaire - SF Pro Display (élégante)
-  static const String secondaryFontFamily = 'SF Pro Display';
-  
+  /// Police principale - Roboto (Google Fonts, cross-platform)
+  static const String primaryFontFamily = 'Roboto';
+
+  /// Police display - Roboto (Google Fonts, titres)
+  static const String displayFontFamily = 'Roboto';
+
  /// Police monospace - JetBrains Mono (code et données)
  static const String monospaceFontFamily = 'JetBrains Mono';

@@ -28,33 +29,30 @@ class TypographyTokens {
  // ÉCHELLE TYPOGRAPHIQUE - Basée sur Material Design 3
  // ═══════════════════════════════════════════════════════════════════════════
  
-  /// Display - Titres principaux et héros
-  static const TextStyle displayLarge = TextStyle(
-    fontFamily: primaryFontFamily,
-    fontSize: 57.0,
-    fontWeight: FontWeight.w400,
-    letterSpacing: -0.25,
-    height: 1.12,
-    color: ColorTokens.onSurface,
-  );
-  
-  static const TextStyle displayMedium = TextStyle(
-    fontFamily: primaryFontFamily,
-    fontSize: 45.0,
-    fontWeight: FontWeight.w400,
-    letterSpacing: 0.0,
-    height: 1.16,
-    color: ColorTokens.onSurface,
-  );
-  
-  static const TextStyle displaySmall = TextStyle(
-    fontFamily: primaryFontFamily,
-    fontSize: 36.0,
-    fontWeight: FontWeight.w400,
-    letterSpacing: 0.0,
-    height: 1.22,
-    color: ColorTokens.onSurface,
-  );
+  /// Display — Titres principaux (Roboto via GoogleFonts)
+  static TextStyle get displayLarge => GoogleFonts.roboto(
+        fontSize: 32.0,
+        fontWeight: FontWeight.w700,
+        letterSpacing: -0.5,
+        height: 1.2,
+        color: ColorTokens.onSurface,
+      );
+
+  static TextStyle get displayMedium => GoogleFonts.roboto(
+        fontSize: 28.0,
+        fontWeight: FontWeight.w700,
+        letterSpacing: -0.25,
+        height: 1.25,
+        color: ColorTokens.onSurface,
+      );
+
+  static TextStyle get displaySmall => GoogleFonts.roboto(
+        fontSize: 24.0,
+        fontWeight: FontWeight.w600,
+        letterSpacing: 0.0,
+        height: 1.3,
+        color: ColorTokens.onSurface,
+      );

  /// Headline - Titres de sections
  static const TextStyle headlineLarge = TextStyle(