# 🎨 Map Presets - Visual Preview

## Mode: Navigation (défaut)
```
┌──────────────────────────────────────────────────────────┐
│ ╔════════════════════════════════════════════════════╗   │
│ ║ [🧭][🗺️][🏔️][📖] MyTrip  12 étapes  458km  6h  ║   │ ← MapFloatingControls (z-index: 2500)
│ ╚════════════════════════════════════════════════════╝   │
│                                                            │
│                                                            │
│            ╔══════════════════════════════════╗           │
│            ║                                  ║           │
│            ║     MAP FULLSCREEN 3D 45°        ║           │
│            ║                                  ║           │
│            ║      (Mapbox Navigation)         ║           │
│            ║                                  ║           │
│            ║         🚗 Traffic ON            ║           │
│            ║                                  ║           │
│            ║                                  ║           │
│            ╚══════════════════════════════════╝           │
│                                                            │
│                                         [🎯] [−] [+] [📍] │ ← Zoom controls
└──────────────────────────────────────────────────────────┘

🎯 Mode: Fullscreen, pas de panel
📍 Style: navigation-day-v1
🎬 Pitch: 45° (vue 3D)
🚦 Trafic: Activé
```

---

## Mode: Exploration
```
┌──────────────────────────────────────────────────────────┐
│ ╔════════════════════════════════════════════════════╗   │
│ ║ [🧭][🗺️][🏔️][📖] MyTrip  12 étapes  458km  6h  ║   │
│ ╚════════════════════════════════════════════════════╝   │
│                                                            │
│ ┌──────────────────┐                                      │
│ │ 🧭 Exploration [−]│   ╔═══════════════════════════╗    │
│ ├──────────────────┤   ║                           ║    │
│ │ 🔍 Rechercher... │   ║                           ║    │
│ │ ┌──────────────┐ │   ║    MAP FLAT (POIs)        ║    │
│ │ │ Catégorie:   │ │   ║                           ║    │
│ │ │ 🍽️ Restaurants│ │   ║   (Mapbox Outdoors)       ║    │
│ │ └──────────────┘ │   ║                           ║    │
│ │ 📍 Rayon: 10km   │   ║      📍 POI markers        ║    │
│ │ ▬▬▬▬▬▬▬▬▬▬▬▬▬   │   ║                           ║    │
│ │ Résultats:       │   ║                           ║    │
│ │ ┌──────────────┐ │   ║                           ║    │
│ │ │🌲 Lac montagne│ │   ╚═══════════════════════════╝    │
│ │ │2.3km • nature│ │                                      │
│ │ └──────────────┘ │                                      │
│ │ ┌──────────────┐ │                                      │
│ │ │🍽️ Restaurant │ │                                      │
│ │ │5.1km • food  │ │                      [🎯] [−] [+] [📍]
│ │ └──────────────┘ │                                      │
│ └──────────────────┘                                      │
└──────────────────────────────────────────────────────────┘

🎯 Panel: ExplorationPanel (gauche, 360px)
📍 Style: outdoors-v12
🎬 Pitch: 0° (vue flat)
🔍 Features: Recherche POI + Filtres
```

---

## Mode: Discovery
```
┌──────────────────────────────────────────────────────────┐
│ ╔════════════════════════════════════════════════════╗   │
│ ║ [🧭][🗺️][🏔️][📖] MyTrip  12 étapes  458km  6h  ║   │
│ ╚════════════════════════════════════════════════════╝   │
│                                                            │
│ ┌─────────────────┐                                       │
│ │ ⛰️ Calques     [−]│   ╔═══════════════════════════╗    │
│ ├─────────────────┤   ║                           ║    │
│ │ 🔄 Relief 3D [●]│   ║                           ║    │
│ │ 🛰️ Satellite [●]│   ║   MAP 3D IMMERSIVE 60°    ║    │
│ │ 🏔️ Ombrage  [○]│   ║                           ║    │
│ │ 📊 Courbes  [○]│   ║  (Mapbox Satellite)       ║    │
│ ├─────────────────┤   ║                           ║    │
│ │ 🎨 Légende:     │   ║    🏔️ Scenic mode         ║    │
│ │ ▮ Plaines       │   ║                           ║    │
│ │ ▮ Collines      │   ║                           ║    │
│ │ ▮ Montagnes     │   ║                           ║    │
│ │ ▮ Hautes mont.  │   ║                           ║    │
│ │ ▮ Sommets       │   ╚═══════════════════════════╝    │
│ └─────────────────┘                                       │
│                                            [🎯] [−] [+] [📍]
└──────────────────────────────────────────────────────────┘

🎯 Panel: DiscoveryPanel (gauche, 320px)
📍 Style: satellite-streets-v12
🎬 Pitch: 60° (vue immersive)
🏔️ Features: Calques + Légende altitude
```

---

## Mode: Booking
```
┌──────────────────────────────────────────────────────────┐
│ ╔════════════════════════════════════════════════════╗   │
│ ║ [🧭][🗺️][🏔️][📖] MyTrip  12 étapes  458km  6h  ║   │
│ ╚════════════════════════════════════════════════════╝   │
│                                                            │
│ ┌──────────────────────┐                                  │
│ │ 📖 Réservations    [−]│ ╔═══════════════════════════╗  │
│ ├──────────────────────┤ ║                           ║  │
│ │[🏨][🍽️ Restos][🎯 Act]│ ║                           ║  │
│ ├──────────────────────┤ ║    MAP FLAT (Venues)      ║  │
│ │ ┌──────────────────┐ │ ║                           ║  │
│ │ │Hôtel des Alpes   │ │ ║   (Mapbox Streets)        ║  │
│ │ │⭐ 4.5 • 2.3km    │ │ ║                           ║  │
│ │ │         120€/nuit│ │ ║    🏨 🍽️ 🎯 markers       ║  │
│ │ └──────────────────┘ │ ║                           ║  │
│ │ ┌──────────────────┐ │ ║                           ║  │
│ │ │Auberge du Mont   │ │ ║                           ║  │
│ │ │⭐ 4.2 • 5.1km    │ │ ╚═══════════════════════════╝  │
│ │ │          85€/nuit│ │                                  │
│ │ └──────────────────┘ │                                  │
│ │ ┌──────────────────┐ │                 [🎯] [−] [+] [📍]
│ │ │Grand Hôtel       │ │                                  │
│ │ │⭐ 4.8 • 8.7km    │ │                                  │
│ │ │         180€/nuit│ │                                  │
│ │ └──────────────────┘ │                                  │
│ ├──────────────────────┤                                  │
│ │ [🔧 Filtrer]         │                                  │
│ └──────────────────────┘                                  │
└──────────────────────────────────────────────────────────┘

🎯 Panel: BookingPanel (gauche, 380px)
📍 Style: streets-v12
🎬 Pitch: 0° (vue flat)
🏨 Features: Hôtels/Restos/Activités + Tabs
```

---

## Architecture des layers (z-index)

```
Z-index: 2500  ┌────────────────────────────────┐
               │  MapFloatingControls           │
               │  (Mode buttons, Plan info)     │
               └────────────────────────────────┘

Z-index: 2000  ┌────────────────────────────────┐
               │  Quasar Navbar (global)        │
               └────────────────────────────────┘

Z-index: 1000  ┌────────────────────────────────┐
               │  ExplorationPanel              │
               │  DiscoveryPanel                │  ← Mode-specific panels
               │  BookingPanel                  │
               └────────────────────────────────┘

Z-index: 100   ┌────────────────────────────────┐
               │  MapRadialMenu (context menu)  │
               └────────────────────────────────┘

Z-index: 1     ┌────────────────────────────────┐
               │  MapPresetLayout               │
               │    └─ MapView (Mapbox)         │  ← Base map
               └────────────────────────────────┘
```

---

## Position chain (CRITICAL - DO NOT BREAK)

```
.map-immersive-page
  position: fixed
  top: var(--q-layout-offset-top)  ← Évite navbar overlap
  height: calc(100vh - var(--q-layout-offset-top))
  inset: 0
  
  └─ .map-immersive-page__canvas
      position: absolute
      inset: 0
      
      └─ MapPresetLayout
          position: absolute
          inset: 0
          
          └─ .map-preset-layout__map
              position: absolute
              inset: 0
              
              └─ .map-stage-shell
                  position: absolute
                  inset: 0
                  
                  └─ MapView .map-container
                      position: absolute
                      inset: 0
                      
                      └─ .mapboxgl-map
                          position: absolute
                          inset: 0
```

**Rules:**
- NO padding, gap, border-radius, margin in the chain
- Use `:deep()` for Mapbox classes
- All layers: `position: absolute` + `inset: 0`

---

## Glass-panel design system

**Code :**
```scss
.glass-panel {
  background: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
```

**Visual render :**
```
┌─────────────────────────────────┐
│ 🧭 Panel Title          [−]     │ ← Header (collapsible)
├─────────────────────────────────┤
│                                 │
│   Content area                  │ ← Scrollable if overflow
│   (transparent black +          │
│    blur background)             │
│                                 │
├─────────────────────────────────┤
│   [Action button]               │ ← Footer (optional)
└─────────────────────────────────┘

Background: rgba(30, 30, 30, 0.85)
Backdrop-filter: blur(20px)
Border: 1px solid rgba(255, 255, 255, 0.1)
Border-radius: 16px
```

---

## Interactions

### Clic sur mode button
```
User clicks: [🗺️ Exploration]
  ↓
handleModeClick('exploration')
  ↓
switchPreset('exploration')
  ↓
applyPresetVisuals() → Map style changes
  ↓
currentPresetId.value = 'exploration'
  ↓
v-if="currentPresetId === 'exploration'" → ExplorationPanel shows
```

### Collapse panel
```
User clicks: [−] button
  ↓
toggleCollapse()
  ↓
collapsed.value = !collapsed.value
  ↓
:class="{ 'panel-collapsed': collapsed }"
  ↓
max-height: 56px (header only)
transition: all 0.3s ease
```

### Select POI (ExplorationPanel)
```
User clicks: POI card
  ↓
selectPOI(poi)
  ↓
$q.notify('POI sélectionné')
  ↓
TODO: Center map on POI
```

### Toggle layer (DiscoveryPanel)
```
User toggles: [●] Relief 3D
  ↓
on3DChange(false)
  ↓
emit('toggle3D', false)
  ↓
TODO: Update Mapbox terrain layer
```

---

## Performance

**Bundle size impact:**
```
Before panels: 81.23 kB (gzip: 25.12 kB)
After panels:  83.37 kB (gzip: 25.80 kB)

Delta: +2.14 kB (+0.68 kB gzipped)
```

**Render strategy:**
- Conditional rendering with `v-if` (no overhead when hidden)
- No lazy load needed (panels are lightweight)
- Glass-panel uses GPU-accelerated `backdrop-filter`

---

## Mobile responsive (TODO)

**Current:** Panels designed for web (360-380px width)

**Mobile strategy:**
- Panels should be full-width bottom sheets
- Slide up animation instead of left position
- Collapsible by default on mobile
- Swipe to dismiss gesture

**Implementation:**
```vue
<ExplorationPanel
  v-if="currentPresetId === 'exploration'"
  :is-mobile="$q.platform.is.mobile"
/>
```

---

**Date:** 2025-01-20  
**Status:** ✅ Visual preview complete
