# Guide Responsive Design - MyRoadTrip V2

**Date:** 23 novembre 2025  
**Version:** 2.0  
**Couverture:** 70/70 composants fonctionnels (100%)  

---

## 🎯 Standards Obligatoires

### Breakpoints

```scss
/* Mobile (smartphones portrait) */
@media (max-width: 599px) {
  // Layouts vertical
  // Touch targets 44-48px
  // Typography compact
}

/* Tablet portrait */
@media (min-width: 600px) and (max-width: 1024px) {
  // Layouts intermédiaires
}

/* Desktop */
@media (min-width: 1025px) {
  // Layouts horizontal complets
}
```

**Règle :** Utiliser **599px** pour mobile (pas 480px, 576px ou autres).

---

## 🎨 Pattern Mobile-First

### Principe

```scss
// 1. Styles de base (mobile par défaut)
.component {
  flex-direction: column;
  padding: 8px;
  font-size: 0.9rem;
}

// 2. Breakpoint desktop (augmente progressivement)
@media (min-width: 1025px) {
  .component {
    flex-direction: row;
    padding: 16px;
    font-size: 1rem;
  }
}
```

**Éviter :** Écrire desktop d'abord puis `@media (max-width)` pour casser.

---

## 📏 Touch Targets (WCAG AAA)

### Règles

| Élément | Taille minimale | Standard |
|---------|-----------------|----------|
| Boutons | 44x44px | WCAG 2.1 Level AAA |
| Icons cliquables | 44x44px | Même |
| Touch zones | 48x48px | Recommandé |
| Liens texte | 44px height | En ligne acceptable |

### Implémentation

```scss
@media (max-width: 599px) {
  .q-btn {
    min-width: 44px;
    min-height: 44px;
  }

  // Actions touch-friendly
  .action-button {
    min-width: 100%;
    min-height: 48px;
    padding: 12px 16px;
  }

  // Icons standalone
  .icon-button {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
}
```

---

## 📱 Layouts Mobile

### 1. Vertical Stacking

```scss
@media (max-width: 599px) {
  .container {
    flex-direction: column;
    gap: 8px; // Compact spacing
  }

  .item {
    width: 100%;
    max-width: 100%;
  }
}
```

### 2. Full-Width Buttons

```scss
@media (max-width: 599px) {
  .actions {
    flex-direction: column;
    gap: 8px;

    .q-btn {
      width: 100%;
      min-width: 100%;
      justify-content: center;
    }
  }
}
```

### 3. Horizontal Scroll

```scss
@media (max-width: 599px) {
  .scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    &::-webkit-scrollbar {
      display: none; // Masquer scrollbar
    }
  }

  .scroll-item {
    flex-shrink: 0;
    scroll-snap-align: start;
    min-width: 280px; // Minimum readable
  }
}
```

### 4. Cards Compact

```scss
@media (max-width: 599px) {
  .card {
    border-radius: 12px; // vs 16px desktop
    padding: 12px; // vs 16-20px desktop
  }

  .card__header {
    padding: 12px;
    font-size: 1rem; // vs 1.25rem desktop
  }

  .card__content {
    padding: 12px;
    gap: 8px;
  }
}
```

---

## 🔤 Typography Mobile

### Échelle

| Élément | Mobile | Desktop | Ratio |
|---------|--------|---------|-------|
| H1 | 1.75rem (28px) | 2.5rem (40px) | 0.7 |
| H2 | 1.5rem (24px) | 2rem (32px) | 0.75 |
| H3 | 1.25rem (20px) | 1.5rem (24px) | 0.83 |
| Body | 0.9rem (14.4px) | 1rem (16px) | 0.9 |
| Small | 0.75rem (12px) | 0.875rem (14px) | 0.86 |

### Implémentation

```scss
.title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;

  @media (min-width: 1025px) {
    font-size: 2.5rem;
  }
}

.body-text {
  font-size: 0.9rem;
  line-height: 1.5;

  @media (min-width: 1025px) {
    font-size: 1rem;
  }
}
```

---

## 🎛️ Spacing Mobile

### Règle du 8px

| Contexte | Mobile | Desktop |
|----------|--------|---------|
| Padding interne | 8-12px | 16-24px |
| Gap entre éléments | 8px | 12-16px |
| Margin sections | 16px | 24-32px |
| Padding page | 12px | 20-24px |

### Implémentation

```scss
@media (max-width: 599px) {
  .page {
    padding: 12px;
  }

  .section {
    margin-bottom: 16px;
    padding: 12px;
    gap: 8px;
  }

  .item-group {
    gap: 8px;
  }
}
```

---

## 🛠️ Composants Spécifiques

### Navigation HUD

```scss
@media (max-width: 599px) {
  .navigation-hud {
    max-width: 100%;
  }

  .nav-actions {
    flex-direction: column;
    gap: 8px;

    .q-btn {
      min-width: 100%;
      min-height: 44px;
    }
  }

  .distance-badge {
    min-width: 80px;
    padding: 8px 12px;
  }
}
```

### Liste Virtualisée (StageList)

```scss
@media (max-width: 599px) {
  .stage-list-header {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  .stage-entry {
    margin-bottom: 12px;
  }

  .swipe-actions {
    .swipe-action {
      min-width: 80px;
      font-size: 0.75rem;
    }
  }

  .timeline-dot {
    width: 32px;
    height: 32px;
  }

  .stage-list-footer {
    flex-direction: column;
    .footer-btn {
      width: 100%;
      min-height: 44px;
    }
  }
}
```

### Forms Mobile

```scss
@media (max-width: 599px) {
  .form-group {
    flex-direction: column;
    gap: 12px;
  }

  .q-input,
  .q-select {
    width: 100%;
  }

  .form-actions {
    flex-direction: column;
    gap: 8px;

    .q-btn {
      width: 100%;
      order: 1; // Primary first

      &.secondary {
        order: 2;
      }
    }
  }
}
```

### Dialogs Mobile

```scss
@media (max-width: 599px) {
  .q-dialog__inner {
    width: 96vw !important;
    max-width: 96vw;
  }

  .dialog-content {
    padding: 16px;
    max-height: 80vh;
    overflow-y: auto;
  }

  .dialog-actions {
    flex-direction: column;
    gap: 8px;
    padding: 12px;

    .q-btn {
      width: 100%;
    }
  }
}
```

---

## ✅ Checklist Composant

Avant de commiter un composant, vérifier :

- [ ] `@media (max-width: 599px)` présent
- [ ] Touch targets ≥ 44px
- [ ] Layouts vertical (flex-direction: column)
- [ ] Buttons full-width mobile
- [ ] Typography compact (0.8-0.9rem)
- [ ] Spacing compact (8-12px)
- [ ] Horizontal scroll si nécessaire
- [ ] Tested sur iPhone/Android DevTools
- [ ] Quasar deep selectors (`:deep()`) si override
- [ ] Build passe sans warning

---

## 🔍 Debugging

### DevTools Chrome

```
1. F12 → Device Toolbar (Ctrl+Shift+M)
2. Preset: iPhone 12 Pro (390x844)
3. Throttling: Fast 3G
4. Zoom: 100%
5. Touch simulation: ON
```

### Commandes utiles

```bash
# Compter composants responsive
rg -l "@media.*max-width.*599px" apps/web/src | wc -l

# Vérifier touch targets
rg "min-(width|height).*4[4-8]px" apps/web/src

# Trouver layouts non-responsive
rg "flex-direction: row" apps/web/src --no-filename | wc -l
```

---

## 🚫 Anti-Patterns

### ❌ Ne PAS faire

```scss
// Breakpoint incohérent
@media (max-width: 480px) { } // NON: Utiliser 599px

// Touch targets trop petits
.btn { min-height: 32px; } // NON: Minimum 44px

// Desktop-first
.component { flex-direction: row; }
@media (max-width: 599px) {
  .component { flex-direction: column; }
}

// Fixed width mobile
.card { width: 320px; } // NON: Utiliser 100% ou max-width

// Oublier deep selectors Quasar
.q-btn { padding: 4px; } // Ne marche pas, utiliser :deep()
```

### ✅ Faire plutôt

```scss
// Breakpoint cohérent
@media (max-width: 599px) { }

// Touch targets conformes
.btn { 
  min-width: 44px;
  min-height: 44px;
}

// Mobile-first
.component { flex-direction: column; }
@media (min-width: 1025px) {
  .component { flex-direction: row; }
}

// Responsive width
.card { 
  width: 100%;
  max-width: 480px;
}

// Deep selectors Quasar
:deep(.q-btn) { padding: 4px; }
```

---

## 📚 Références

- **WCAG 2.1 Level AAA:** https://www.w3.org/WAI/WCAG21/quickref/#target-size
- **Quasar Breakpoints:** https://quasar.dev/style/breakpoints
- **Material Design Touch Targets:** https://m3.material.io/foundations/accessible-design/accessibility-basics#28032e45-c598-450c-b355-f9fe737b1cd8

---

## 🎯 Exemples Réels (MyRoadTrip)

| Composant | Fichier | Pattern utilisé |
|-----------|---------|------------------|
| Navigation GPS | `NavigationHUD.vue` | Vertical layout, full-width buttons, 44px targets |
| Liste étapes | `StageList.vue` | Horizontal scroll, swipe actions 80px, compact timeline |
| Formulaire plan | `PlanForm.vue` | Vertical form, full-width inputs, 48px submit |
| Carte POI | `POICard.vue` | Compact padding 12px, typography 0.9rem |
| Dashboard stats | `DashboardCard.vue` | Flex wrap, min-width 280px, gap 8px |

Tous les composants suivent ce guide = **cohérence garantie**.

---

**Dernière mise à jour :** 23 novembre 2025  
**Mainteneur :** Agent Codex  
**Status :** Production-ready ✅
