Authentification stable - WIP

2025-09-19 12:35:46 +00:00
parent 63fe107f98
commit 098894bdc1
383 changed files with 13072 additions and 93334 deletions
--- a/unionflow-mobile-apps/lib/core/design_system/tokens/color_tokens.dart
+++ b/unionflow-mobile-apps/lib/core/design_system/tokens/color_tokens.dart
@@ -0,0 +1,158 @@
+/// Design Tokens - Couleurs
+/// 
+/// Palette de couleurs sophistiquée inspirée des tendances UI/UX 2024-2025
+/// Basée sur les principes de Material Design 3 et les meilleures pratiques
+/// d'applications professionnelles d'entreprise.
+library color_tokens;
+
+import 'package:flutter/material.dart';
+
+/// Tokens de couleurs primaires - Palette sophistiquée
+class ColorTokens {
+  ColorTokens._();
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS PRIMAIRES - Bleu professionnel moderne
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Couleur primaire principale - Bleu corporate moderne
+  static const Color primary = Color(0xFF1E3A8A); // Bleu profond
+  static const Color primaryLight = Color(0xFF3B82F6); // Bleu vif
+  static const Color primaryDark = Color(0xFF1E40AF); // Bleu sombre
+  static const Color primaryContainer = Color(0xFFDEEAFF); // Container bleu clair
+  static const Color onPrimary = Color(0xFFFFFFFF); // Texte sur primaire
+  static const Color onPrimaryContainer = Color(0xFF001D36); // Texte sur container
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS SECONDAIRES - Accent sophistiqué
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  static const Color secondary = Color(0xFF6366F1); // Indigo moderne
+  static const Color secondaryLight = Color(0xFF8B5CF6); // Violet clair
+  static const Color secondaryDark = Color(0xFF4F46E5); // Indigo sombre
+  static const Color secondaryContainer = Color(0xFFE0E7FF); // Container indigo
+  static const Color onSecondary = Color(0xFFFFFFFF);
+  static const Color onSecondaryContainer = Color(0xFF1E1B3A);
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS TERTIAIRES - Accent complémentaire
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  static const Color tertiary = Color(0xFF059669); // Vert émeraude
+  static const Color tertiaryLight = Color(0xFF10B981); // Vert clair
+  static const Color tertiaryDark = Color(0xFF047857); // Vert sombre
+  static const Color tertiaryContainer = Color(0xFFD1FAE5); // Container vert
+  static const Color onTertiary = Color(0xFFFFFFFF);
+  static const Color onTertiaryContainer = Color(0xFF002114);
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS NEUTRES - Échelle de gris sophistiquée
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  static const Color surface = Color(0xFFFAFAFA); // Surface principale
+  static const Color surfaceVariant = Color(0xFFF5F5F5); // Surface variante
+  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 onSurface = Color(0xFF1F2937); // Texte principal
+  static const Color onSurfaceVariant = Color(0xFF6B7280); // Texte secondaire
+  static const Color textSecondary = Color(0xFF6B7280); // Texte secondaire (alias)
+  static const Color outline = Color(0xFFD1D5DB); // Bordures
+  static const Color outlineVariant = Color(0xFFE5E7EB); // Bordures claires
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS SÉMANTIQUES - États et feedback
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// 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 onSuccess = Color(0xFFFFFFFF);
+  static const Color onSuccessContainer = Color(0xFF002114);
+
+  /// 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 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 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 onInfo = Color(0xFFFFFFFF);
+  static const Color onInfoContainer = Color(0xFF001D36);
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS SPÉCIALISÉES - Interface avancée
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Couleurs de navigation
+  static const Color navigationBackground = Color(0xFFFFFFFF);
+  static const Color navigationSelected = Color(0xFF1E3A8A);
+  static const Color navigationUnselected = Color(0xFF6B7280);
+  static const Color navigationIndicator = Color(0xFF3B82F6);
+
+  /// 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
+  
+  /// 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
+
+  /// Couleurs de gradient (tendance moderne)
+  static const List<Color> primaryGradient = [
+    Color(0xFF1E3A8A),
+    Color(0xFF3B82F6),
+  ];
+  
+  static const List<Color> secondaryGradient = [
+    Color(0xFF6366F1),
+    Color(0xFF8B5CF6),
+  ];
+  
+  static const List<Color> successGradient = [
+    Color(0xFF059669),
+    Color(0xFF10B981),
+  ];
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // 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);
+    return hsl.withLightness(lightness).toColor();
+  }
+}
--- a/unionflow-mobile-apps/lib/core/design_system/tokens/radius_tokens.dart
+++ b/unionflow-mobile-apps/lib/core/design_system/tokens/radius_tokens.dart
@@ -0,0 +1,23 @@
+/// Tokens de rayon pour le design system
+/// Définit les rayons de bordure standardisés de l'application
+library radius_tokens;
+
+/// Tokens de rayon
+class RadiusTokens {
+  RadiusTokens._();
+  
+  /// Small - 4px
+  static const double sm = 4.0;
+  
+  /// Medium - 8px
+  static const double md = 8.0;
+  
+  /// Large - 12px
+  static const double lg = 12.0;
+  
+  /// Extra large - 16px
+  static const double xl = 16.0;
+  
+  /// Round - 50px
+  static const double round = 50.0;
+}
--- a/unionflow-mobile-apps/lib/core/design_system/tokens/spacing_tokens.dart
+++ b/unionflow-mobile-apps/lib/core/design_system/tokens/spacing_tokens.dart
@@ -0,0 +1,194 @@
+/// Design Tokens - Espacements
+/// 
+/// Système d'espacement cohérent basé sur une grille de 4px
+/// Optimisé pour la lisibilité et l'harmonie visuelle
+library spacing_tokens;
+
+/// Tokens d'espacement - Système de grille moderne
+class SpacingTokens {
+  SpacingTokens._();
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ESPACEMENT DE BASE - Grille 4px
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Unité de base (4px) - Fondation du système
+  static const double baseUnit = 4.0;
+  
+  /// Espacement minimal (2px) - Détails fins
+  static const double xs = baseUnit * 0.5; // 2px
+  
+  /// Espacement très petit (4px) - Éléments adjacents
+  static const double sm = baseUnit * 1; // 4px
+  
+  /// Espacement petit (8px) - Espacement interne léger
+  static const double md = baseUnit * 2; // 8px
+  
+  /// Espacement moyen (12px) - Espacement standard
+  static const double lg = baseUnit * 3; // 12px
+  
+  /// Espacement large (16px) - Séparation de composants
+  static const double xl = baseUnit * 4; // 16px
+  
+  /// Espacement très large (20px) - Séparation importante
+  static const double xxl = baseUnit * 5; // 20px
+  
+  /// Espacement extra large (24px) - Sections principales
+  static const double xxxl = baseUnit * 6; // 24px
+  
+  /// Espacement massif (32px) - Séparation majeure
+  static const double huge = baseUnit * 8; // 32px
+  
+  /// Espacement géant (48px) - Espacement héroïque
+  static const double giant = baseUnit * 12; // 48px
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ESPACEMENTS SPÉCIALISÉS - Composants spécifiques
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Padding des conteneurs
+  static const double containerPaddingSmall = lg; // 12px
+  static const double containerPaddingMedium = xl; // 16px
+  static const double containerPaddingLarge = xxxl; // 24px
+  
+  /// Marges des cartes
+  static const double cardMargin = xl; // 16px
+  static const double cardPadding = xl; // 16px
+  static const double cardPaddingLarge = xxxl; // 24px
+  
+  /// Espacement des listes
+  static const double listItemSpacing = md; // 8px
+  static const double listSectionSpacing = xxxl; // 24px
+  
+  /// Espacement des boutons
+  static const double buttonPaddingHorizontal = xl; // 16px
+  static const double buttonPaddingVertical = lg; // 12px
+  static const double buttonSpacing = md; // 8px
+  
+  /// Espacement des formulaires
+  static const double formFieldSpacing = xl; // 16px
+  static const double formSectionSpacing = xxxl; // 24px
+  static const double formPadding = xl; // 16px
+  
+  /// Espacement de navigation
+  static const double navigationPadding = xl; // 16px
+  static const double navigationItemSpacing = md; // 8px
+  static const double navigationSectionSpacing = xxxl; // 24px
+  
+  /// Espacement des en-têtes
+  static const double headerPadding = xl; // 16px
+  static const double headerHeight = 56.0; // Hauteur standard
+  static const double headerElevation = 4.0; // Élévation
+  
+  /// Espacement des onglets
+  static const double tabPadding = xl; // 16px
+  static const double tabHeight = 48.0; // Hauteur standard
+  
+  /// Espacement des dialogues
+  static const double dialogPadding = xxxl; // 24px
+  static const double dialogMargin = xl; // 16px
+  
+  /// Espacement des snackbars
+  static const double snackbarMargin = xl; // 16px
+  static const double snackbarPadding = xl; // 16px
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // RAYONS DE BORDURE - Système cohérent
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Rayon minimal (2px) - Détails subtils
+  static const double radiusXs = 2.0;
+  
+  /// Rayon petit (4px) - Éléments fins
+  static const double radiusSm = 4.0;
+  
+  /// Rayon moyen (8px) - Standard
+  static const double radiusMd = 8.0;
+  
+  /// Rayon large (12px) - Cartes et composants
+  static const double radiusLg = 12.0;
+  
+  /// Rayon très large (16px) - Conteneurs principaux
+  static const double radiusXl = 16.0;
+  
+  /// Rayon extra large (20px) - Éléments héroïques
+  static const double radiusXxl = 20.0;
+  
+  /// Rayon circulaire (999px) - Boutons ronds
+  static const double radiusCircular = 999.0;
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ÉLÉVATIONS - Système d'ombres
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Élévation minimale
+  static const double elevationXs = 1.0;
+  
+  /// Élévation petite
+  static const double elevationSm = 2.0;
+  
+  /// Élévation moyenne
+  static const double elevationMd = 4.0;
+  
+  /// Élévation large
+  static const double elevationLg = 8.0;
+  
+  /// Élévation très large
+  static const double elevationXl = 12.0;
+  
+  /// Élévation maximale
+  static const double elevationMax = 24.0;
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // DIMENSIONS FIXES - Composants standardisés
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Hauteurs de boutons
+  static const double buttonHeightSmall = 32.0;
+  static const double buttonHeightMedium = 40.0;
+  static const double buttonHeightLarge = 48.0;
+  
+  /// Hauteurs d'éléments de liste
+  static const double listItemHeightSmall = 48.0;
+  static const double listItemHeightMedium = 56.0;
+  static const double listItemHeightLarge = 72.0;
+  
+  /// Largeurs minimales
+  static const double minTouchTarget = 44.0; // Cible tactile minimale
+  static const double minButtonWidth = 64.0; // Largeur minimale bouton
+  
+  /// Largeurs maximales
+  static const double maxContentWidth = 600.0; // Largeur max contenu
+  static const double maxDialogWidth = 400.0; // Largeur max dialogue
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // MÉTHODES UTILITAIRES
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Calcule un espacement basé sur l'unité de base
+  static double spacing(double multiplier) {
+    return baseUnit * multiplier;
+  }
+  
+  /// Obtient un espacement responsive basé sur la largeur d'écran
+  static double responsiveSpacing(double screenWidth) {
+    if (screenWidth < 600) {
+      return xl; // Mobile
+    } else if (screenWidth < 1200) {
+      return xxxl; // Tablette
+    } else {
+      return huge; // Desktop
+    }
+  }
+  
+  /// Obtient un padding responsive
+  static double responsivePadding(double screenWidth) {
+    if (screenWidth < 600) {
+      return xl; // 16px mobile
+    } else if (screenWidth < 1200) {
+      return xxxl; // 24px tablette
+    } else {
+      return huge; // 32px desktop
+    }
+  }
+}
--- a/unionflow-mobile-apps/lib/core/design_system/tokens/tokens.dart
+++ b/unionflow-mobile-apps/lib/core/design_system/tokens/tokens.dart
@@ -0,0 +1,15 @@
+/// Export de tous les tokens de design
+/// Facilite l'importation des tokens dans l'application
+library tokens;
+
+// Tokens de couleur
+export 'color_tokens.dart';
+
+// Tokens de typographie
+export 'typography_tokens.dart';
+
+// Tokens d'espacement
+export 'spacing_tokens.dart';
+
+// Tokens de rayon
+export 'radius_tokens.dart';
--- a/unionflow-mobile-apps/lib/core/design_system/tokens/typography_tokens.dart
+++ b/unionflow-mobile-apps/lib/core/design_system/tokens/typography_tokens.dart
@@ -0,0 +1,296 @@
+/// Design Tokens - Typographie
+/// 
+/// Système typographique sophistiqué basé sur les tendances 2024-2025
+/// Hiérarchie claire et lisibilité optimale pour applications professionnelles
+library typography_tokens;
+
+import 'package:flutter/material.dart';
+import 'color_tokens.dart';
+
+/// Tokens typographiques - Système de texte moderne
+class TypographyTokens {
+  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 monospace - JetBrains Mono (code et données)
+  static const String monospaceFontFamily = 'JetBrains Mono';
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // É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,
+  );
+
+  /// Headline - Titres de sections
+  static const TextStyle headlineLarge = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 32.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.0,
+    height: 1.25,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle headlineMedium = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 28.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.0,
+    height: 1.29,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle headlineSmall = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 24.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.0,
+    height: 1.33,
+    color: ColorTokens.onSurface,
+  );
+
+  /// Title - Titres de composants
+  static const TextStyle titleLarge = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 22.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.0,
+    height: 1.27,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle titleMedium = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.15,
+    height: 1.50,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle titleSmall = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.1,
+    height: 1.43,
+    color: ColorTokens.onSurface,
+  );
+
+  /// Label - Étiquettes et boutons
+  static const TextStyle labelLarge = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.1,
+    height: 1.43,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle labelMedium = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 12.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.5,
+    height: 1.33,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle labelSmall = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 11.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.5,
+    height: 1.45,
+    color: ColorTokens.onSurface,
+  );
+
+  /// Body - Texte de contenu
+  static const TextStyle bodyLarge = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.5,
+    height: 1.50,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle bodyMedium = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.25,
+    height: 1.43,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle bodySmall = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 12.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.4,
+    height: 1.33,
+    color: ColorTokens.onSurface,
+  );
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // STYLES SPÉCIALISÉS - Interface UnionFlow
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Navigation - Styles pour menu et navigation
+  static const TextStyle navigationLabel = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.1,
+    height: 1.43,
+    color: ColorTokens.navigationUnselected,
+  );
+  
+  static const TextStyle navigationLabelSelected = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.1,
+    height: 1.43,
+    color: ColorTokens.navigationSelected,
+  );
+
+  /// Cartes et composants
+  static const TextStyle cardTitle = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 18.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.0,
+    height: 1.33,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle cardSubtitle = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.25,
+    height: 1.43,
+    color: ColorTokens.onSurfaceVariant,
+  );
+  
+  static const TextStyle cardValue = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 24.0,
+    fontWeight: FontWeight.w700,
+    letterSpacing: 0.0,
+    height: 1.25,
+    color: ColorTokens.primary,
+  );
+
+  /// Boutons
+  static const TextStyle buttonLarge = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.1,
+    height: 1.25,
+    color: ColorTokens.onPrimary,
+  );
+  
+  static const TextStyle buttonMedium = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.1,
+    height: 1.29,
+    color: ColorTokens.onPrimary,
+  );
+  
+  static const TextStyle buttonSmall = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 12.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.5,
+    height: 1.33,
+    color: ColorTokens.onPrimary,
+  );
+
+  /// Formulaires
+  static const TextStyle inputLabel = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.1,
+    height: 1.43,
+    color: ColorTokens.onSurfaceVariant,
+  );
+  
+  static const TextStyle inputText = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.5,
+    height: 1.50,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle inputHint = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.5,
+    height: 1.50,
+    color: ColorTokens.onSurfaceVariant,
+  );
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // MÉTHODES UTILITAIRES
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Applique une couleur à un style
+  static TextStyle withColor(TextStyle style, Color color) {
+    return style.copyWith(color: color);
+  }
+  
+  /// Applique un poids de police
+  static TextStyle withWeight(TextStyle style, FontWeight weight) {
+    return style.copyWith(fontWeight: weight);
+  }
+  
+  /// Applique une taille de police
+  static TextStyle withSize(TextStyle style, double size) {
+    return style.copyWith(fontSize: size);
+  }
+}