# 🎯 Dashboard Layout Exceptionnel - Planner

## Concept

Layout **immersif** qui maximise la carte comme élément principal, avec des overlays glassmorphism et une barre d'étapes horizontale scrollable.

## Structure

```
┌─────────────────────────────────────────┐
│ HERO (compact inline)                   │ ← 1 ligne, 60px
│ Badge | Titre | Metadata       Actions  │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│                                         │
│         CARTE PLEIN ÉCRAN               │
│                                         │ ← 60% hauteur viewport
│  [Metrics]                              │   avec overlays flottants
│   Top Right                             │
│                                         │
│              [Insights Bottom Left]     │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ STAGES BAR (horizontal scroll)          │ ← 180px max
│ ◄ Étape 1 | Étape 2 | Étape 3 | ...  ► │
└─────────────────────────────────────────┘
```

## Dimensions

| Élément | Hauteur | Remarque |
|---------|---------|----------|
| Page | `calc(100vh - 32px)` | Pleine hauteur moins padding |
| Hero | `~60px` | Ultra compact, inline |
| Carte | `flex: 1` | Occupe tout l'espace restant |
| Stages Bar | `180px max` | Scrollable horizontal |
| **Total** | **NON SCROLLABLE** | Tout tient dans viewport |

## Overlays sur Carte

### Metrics Overlay (Top Right)
- Pills verticaux glassmorphism
- 4 métriques principales
- Hover: translateX(-4px)
- Background: `rgba(11, 18, 32, 0.9)` + blur(20px)

### Insights Overlay (Bottom Left)
- Pills horizontaux compacts
- Copilotes, Distance, Durée
- Hover: translateY(-2px)
- Background: `rgba(11, 18, 32, 0.9)` + blur(20px)

## Stages Bar

### Features
- Scroll horizontal smooth
- Custom scrollbar (6px height)
- Cards 280px min-width
- Gap: 12px
- Click pour highlight sur carte

### Stage Card
```scss
min-width: 280px;
padding: 12px;
background: glassmorphism;
border-radius: 12px;
cursor: pointer;

&.is-highlighted {
  background: accent 15%;
  border-color: accent;
}
```

## Breakpoints

| Résolution | Comportement |
|------------|--------------|
| > 1440px | Layout optimal, carte maximale |
| 1024-1440px | Layout normal, carte réduite |
| < 1024px | **À implémenter**: Stack vertical |

## Animations

- **fadeInUp**: Hero (0.6s) + Stages Bar (0.6s delay 0.1s)
- **Hover Pills**: transform animations (0.2s ease)
- **Stage Cards**: translateY(-2px) on hover
- **Scrollbar**: smooth-scroll behavior

## Avantages

✅ **Carte maximale**: 60% de la hauteur = immersion totale  
✅ **Pas de scroll**: Tout dans viewport = UX fluide  
✅ **Overlays contextuels**: Info sans cacher carte  
✅ **Navigation rapide**: Stages horizontal = access instantané  
✅ **Modern UI**: Glassmorphism + gradients + animations  

## Code Locations

| Fichier | Lignes | Contenu |
|---------|--------|---------|
| `DashboardPage.web.vue` | 1-250 | Template + logic |
| `DashboardPage.web.vue` | 268-686 | Styles SCSS |

## Performance

- **0 requêtes supplémentaires**: Tout en local
- **Animations GPU**: transform + opacity only
- **Lazy render**: Map component déjà optimisé
- **Scrollbar natif**: Custom styling only

## Next Steps

1. ✅ **DONE**: Layout exceptionnel implémenté
2. ⏳ **TODO**: Responsive mobile (< 1024px)
3. ⏳ **TODO**: Keyboard navigation stages bar
4. ⏳ **TODO**: Tooltips sur metrics pills
5. ⏳ **TODO**: Animations stage selection sync with map

## Demo Flow

1. User lands → Hero + Carte + Stages in viewport
2. Hover metrics → Pills highlight
3. Click stage → Highlight card + zoom map
4. Scroll stages → Smooth horizontal
5. No scroll page → Everything accessible

---

**Layout Status**: ✅ **PRODUCTION READY**
**Build**: ✅ **PASSING**
**Type-check**: ✅ **PASSING**
