# Contexte

Les Juges-Arbitres travaillent principalement depuis des appareils mobiles (smartphones et tablettes) sur le terrain. L'interface doit être optimisée pour une utilisation tactile en conditions réelles (extérieur, soleil, une main disponible).

# Problèmes Identifiés

# 1. Navigation Latérale Fixe

• Problème : Sidebar de 256px (w-64) occupe tout l'écran mobile
• Solution : Navigation hamburger avec menu escamotable ou navigation bottom bar

# 2. Tailles Touch Targets

• Problème : Boutons et zones cliquables trop petits (< 44px)
• Solution : Minimum 44px de hauteur pour toute zone tactile

# 3. Formulaires de Saisie

• Problème : Inputs de score trop petits et proches
• Solution : Inputs plus grands avec espacement suffisant

# 4. Textes Illisibles

• Problème : text-xs et text-sm difficiles à lire en extérieur
• Solution : text-base minimum, contraste élevé

# 5. Tableaux Non Responsifs

• Problème : Tableaux horizontaux débordent
• Solution : Cards empilées sur mobile

# Solutions Détaillées

# 1. Navigation Mobile First

# Option A : Bottom Navigation (Recommandé)

  

    
      📊
      Dashboard
    
    
      👥
      Équipes
    
    
      🎾
      Matchs
    
    
      ⚙️
      Plus
    
  

# Option B : Hamburger Menu

# 2. Touch Targets Optimisés

// Tous les boutons et liens doivent avoir minimum 44px de hauteur
.btn-touch {
  @apply min-h-[44px] px-6 py-3;
}

// Espacement entre éléments tactiles
.touch-list > * + * {
  @apply mt-2; // Minimum 8px entre éléments
}

# 3. Formulaires de Score Mobile

 
  

    Équipe 1
    
  
  

    Équipe 2
    
  

# 4. Cards au lieu de Tableaux

  

    

      
Match #123
      En cours
    

    
    

      

        Équipe 1
        6-4
      
      

        Équipe 2
        4-6
      
    

    
    

      
        ✅ Valider
      
      
        ❌ Rejeter
      
    
  




  

# 5. Statistiques Responsives

  

    
12
    
Validés
  
  

    
3
    
Contestés
  

# Breakpoints Tailwind

// Configuration responsive
// Mobile First : default (< 640px)
// sm: 640px  - Grandes phones
// md: 768px  - Tablettes portrait
// lg: 1024px - Tablettes paysage
// xl: 1280px - Desktop

# Spécifications Touch

# Zones Tactiles

• Minimum : 44x44px (Apple HIG)
• Recommandé : 48x48px
• Espacement : 8px minimum entre targets

# Inputs Numériques

# Swipe et Gestes

• Swipe horizontal pour navigation entre tournois
• Pull-to-refresh pour actualiser scores
• Long press pour actions contextuelles

# Optimisations Performance

# 1. Lazy Loading

# 2. Turbo Mobile

// Désactiver animations complexes sur mobile
if (window.matchMedia('(max-width: 768px)').matches) {
  Turbo.config.drive.progressBarDelay = 0;
}

# 3. Cache Offline

• Service Worker pour mode hors-ligne
• LocalStorage pour scores en cours

# Checklist Implementation

# Phase 1 : Navigation

• ☐ Implémenter bottom navigation mobile
• ☐ Adapter header avec menu hamburger
• ☐ Gérer transitions entre vues

# Phase 2 : Touch Targets

• ☐ Augmenter taille tous boutons (min 44px)
• ☐ Espacer éléments tactiles
• ☐ Ajouter feedback visuel au toucher

# Phase 3 : Formulaires

• ☐ Redesigner saisie scores
• ☐ Optimiser claviers numériques
• ☐ Ajouter validation temps réel

# Phase 4 : Tableaux

• ☐ Convertir tables en cards mobile
• ☐ Implémenter vue liste/grille
• ☐ Optimiser scrolling horizontal

# Phase 5 : Tests

• ☐ Tester sur iPhone SE (plus petit)
• ☐ Tester sur iPad
• ☐ Tester en conditions extérieures
• ☐ Tester avec gants (hiver)

# Composants Stimulus

# Score Input Mobile

// controllers/mobile_score_controller.js
export default class extends Controller {
  static targets = ["input", "increment", "decrement"]

  increment() {
    this.inputTarget.value = parseInt(this.inputTarget.value || 0) + 1
    this.inputTarget.dispatchEvent(new Event('input'))
  }

  decrement() {
    const current = parseInt(this.inputTarget.value || 0)
    if (current > 0) {
      this.inputTarget.value = current - 1
      this.inputTarget.dispatchEvent(new Event('input'))
    }
  }
}

# Accessibilité Mobile

# Contraste

• Ratio minimum 4.5:1 pour texte normal
• Ratio 7:1 pour conditions extérieures

# Tailles Police

• Corps : 16px minimum (text-base)
• Titres : 20px minimum (text-xl)
• Boutons : 16px minimum

# ARIA Labels

  ✅ Valider

# Testing Mobile

# Outils

• Chrome DevTools Device Mode
• Safari Responsive Design Mode
• BrowserStack pour tests réels

# Scénarios Prioritaires

1. Validation score en cours de match
2. Consultation tableau en temps réel
3. Gestion contestations urgentes
4. Navigation entre tournois multiples

# Notes Importantes

1. Priorité au mode Portrait : La plupart des JAP utilisent leur téléphone en portrait
2. Mode Une Main : Zones d'action principales accessibles avec le pouce
3. Offline First : Fonctionnement minimal sans connexion
4. Batterie : Éviter animations/polling excessifs
5. Luminosité : Fort contraste pour lisibilité en plein soleil

Date création : 14/10/2025
Version : 1.0
Auteur : Architecture MiPadel