# 🚀 Plan d'Action 3H - Layouts Dynamiques & AI Contextuelle

**Date:** 17 novembre 2025  
**Objectif:** Rendre les layouts vraiment UTILES selon l'appareil et le contexte, avec recommandations AI intelligentes

---

## 🎯 Vision

> **"Les layouts changent pas juste la taille de la carte - ils changent l'EXPÉRIENCE complète"**

### Mobile = Navigation + Signalement + Planification rapide
### Web = Plateforme complète (Réservations, Routes, Infos, Recommandations AI)

---

## ⏱️ Planning 3H (180 min)

| Phase | Durée | Tâches | Priority |
|-------|-------|--------|----------|
| **Phase 1: Analyse** | 30 min | Audit layouts actuels + AI existante | P0 |
| **Phase 2: Layouts Mobile** | 45 min | 3 nouveaux layouts mobile intelligents | P0 |
| **Phase 3: Layouts Web** | 60 min | 4 layouts web avec contexte riche | P1 |
| **Phase 4: AI Contextuelle** | 30 min | Système recommandations dynamiques | P1 |
| **Phase 5: Tests** | 15 min | Validation + Build | P0 |

---

## 📋 Phase 1: Analyse Profonde (30 min)

### ✅ Tâche 1.1 - Audit des Layouts Actuels (10 min)

**Objectif:** Comprendre ce qui existe et identifier les faiblesses

```bash
# Analyser la structure actuelle
rg "layout:" apps/web/src/config/mapPresets.config.ts -A 10
rtd analyze-module map

# Identifier tous les presets
rg "MapPreset" packages/types/src/ -A 5

# Voir les panels disponibles
ls apps/web/src/modules/map/components/panels/
```

**Questions à répondre:**
- [ ] Combien de presets existent ?
- [ ] Quels layouts sont vraiment différents ?
- [ ] Quels panels sont sous-utilisés ?
- [ ] Y a-t-il des duplications ?

**Livrables:**
- Liste des 7 presets actuels + leurs layouts
- Identification des "faux" layouts (juste taille différente)
- Map mentale: panels → presets → device

---

### ✅ Tâche 1.2 - Audit AI Features (10 min)

**Objectif:** Voir ce qui existe en AI et ce qui manque

```bash
# Trouver les features AI actuelles
rg "aiFeatures" apps/web/src/config/mapPresets.config.ts -A 20
rg "AIRecommendations" apps/web/src/modules/map/

# Voir le composable AI
cat apps/web/src/modules/map/composables/useMapAI.ts 2>/dev/null || echo "N'existe pas"

# Services AI
ls apps/api/src/modules/ai/
```

**Questions:**
- [ ] Quelles AI features sont définies ?
- [ ] Sont-elles vraiment implémentées ?
- [ ] Comment sont les triggers ?
- [ ] Y a-t-il un système de recommandations ?

**Livrables:**
- Liste des 10+ AI features existantes
- Status: implémenté / partiellement / manquant
- Architecture actuelle des suggestions AI

---

### ✅ Tâche 1.3 - Cartographie Contextes (10 min)

**Objectif:** Identifier tous les contextes utilisateur possibles

```typescript
// Créer la matrice de contextes
interface UserContext {
  device: 'mobile' | 'web'
  phase: 'avant' | 'pendant' | 'après'
  activity: 'planifier' | 'naviguer' | 'explorer' | 'réserver' | 'signaler' | 'partager'
  need: string // Ce que l'user veut faire
}
```

**Contextes à mapper:**

| Device | Phase | Activity | Need | Layout Optimal |
|--------|-------|----------|------|----------------|
| Mobile | Pendant | Naviguer | Voir route + signaler | Navigation HUD |
| Mobile | Pendant | Pause | Trouver essence/resto | POI Quick Access |
| Mobile | Avant | Planifier | Ajouter étapes rapides | Timeline Simple |
| Web | Avant | Planifier | Créer voyage complet | Planning Studio |
| Web | Avant | Réserver | Booking hébergements | Booking Dashboard |
| Web | Avant | Explorer | Découvrir POI | Discovery Mode |
| Web | Pendant | Live | Voir amis + signaux | Collaboration Live |
| Web | Après | Analyser | Stats + photos | Analytics View |

**Livrables:**
- Matrice complète 2×3×6 = 36 contextes
- Top 10 contextes prioritaires
- Identification des gaps actuels

---

## 🎨 Phase 2: Layouts Mobile Intelligents (45 min)

### 🔥 Tâche 2.1 - Layout "Drive Mode" (15 min)

**Concept:** Full-screen navigation avec HUD minimaliste

**Features:**
- ✅ ModernNavigationHUD en overlay (déjà fait)
- 🆕 Quick Actions Swipe (essence, resto, hôtel)
- 🆕 Voice Commands toujours actifs
- 🆕 Auto-switch entre jour/nuit
- 🆕 Gestures rapides (double-tap = recenter, long-press = signaler)

**Layout:**
```typescript
drive: {
  id: 'drive',
  name: 'Conduite',
  description: 'Navigation en temps réel avec guidage vocal',
  icon: 'directions_car',
  device: 'mobile',
  layout: {
    type: 'fullscreen',
    mapSize: 100,
    hudPosition: 'top',
    quickActionsPosition: 'bottom-floating',
    gestures: {
      doubleTap: 'recenter',
      longPress: 'report_incident',
      swipeUp: 'show_next_stage',
      swipeDown: 'show_route_overview'
    },
    autoAdjust: {
      theme: 'time-based', // dark after 20h
      zoom: 'speed-based', // zoom out at high speed
      pitch: 'adaptive' // 3D view in city, 2D on highway
    }
  },
  panels: [
    {
      id: 'modern_nav_hud',
      component: 'ModernNavigationHUD',
      position: 'top-overlay',
      size: 'auto',
      zIndex: 1000
    },
    {
      id: 'quick_actions',
      component: 'QuickActionBar',
      position: 'bottom-floating',
      collapsible: true,
      defaultCollapsed: true,
      swipeable: true
    }
  ],
  aiFeatures: [
    {
      id: 'gas_low_suggestion',
      name: 'Alerte Essence',
      type: 'proactive',
      trigger: {
        conditions: [
          { key: 'battery_or_fuel', operator: '<', value: 20 },
          { key: 'distance_to_station', operator: '>', value: 5000 }
        ]
      },
      action: 'suggest_gas_station',
      template: '⛽ Station essence recommandée dans 2km'
    },
    {
      id: 'food_break_suggestion',
      name: 'Pause Repas',
      type: 'proactive',
      trigger: {
        conditions: [
          { key: 'driving_time', operator: '>', value: 7200000 }, // 2h
          { key: 'time_of_day', operator: 'between', value: [12, 14] }
        ]
      },
      action: 'suggest_restaurants',
      template: '🍽️ Pause déjeuner ? 3 restos à proximité'
    }
  ]
}
```

**Action:**
- Créer le preset dans `mapPresets.config.ts`
- Créer `QuickActionBar.vue` dans `components/mobile/`
- Implémenter gesture handlers dans `MapPage.mobile.vue`

---

### 🔥 Tâche 2.2 - Layout "Scout Mode" (15 min)

**Concept:** Exploration POI avec filtres rapides et signalement

**Features:**
- 🆕 Bottom Sheet POI avec filtres visuels
- 🆕 Carte interactive avec clusters
- 🆕 Mode "Around Me" (rayon 1-5-10km)
- 🆕 Quick Report bouton flottant
- 🆕 Liste/Map toggle rapide

**Layout:**
```typescript
scout: {
  id: 'scout',
  name: 'Exploration',
  description: 'Découvrir et signaler des points d\'intérêt',
  icon: 'explore',
  device: 'mobile',
  layout: {
    type: 'map-with-bottom-sheet',
    mapSize: 65,
    sheetSize: 35,
    sheetMode: 'peek', // peek | half | full
    mapStyle: 'streets',
    clustering: true,
    interactiveMarkers: true
  },
  panels: [
    {
      id: 'poi_explorer',
      component: 'POIBottomSheet',
      position: 'bottom-sheet',
      size: 35,
      swipeable: true,
      modes: ['peek', 'half', 'full']
    },
    {
      id: 'filters_bar',
      component: 'FilterChipsBar',
      position: 'top-floating',
      size: 'auto'
    },
    {
      id: 'report_fab',
      component: 'ReportFAB',
      position: 'bottom-right',
      zIndex: 500
    }
  ],
  aiFeatures: [
    {
      id: 'hidden_gems',
      name: 'Pépites Cachées',
      type: 'discovery',
      trigger: {
        conditions: [{ key: 'user_location', operator: 'in_bounds', value: 'current_view' }]
      },
      action: 'suggest_hidden_gems',
      template: '💎 {count} pépites locales découvertes'
    },
    {
      id: 'photo_spots',
      name: 'Spots Photo',
      type: 'creative',
      trigger: {
        conditions: [
          { key: 'weather', operator: '==', value: 'sunny' },
          { key: 'time_of_day', operator: 'between', value: [16, 19] }
        ]
      },
      action: 'suggest_photo_spots',
      template: '📸 Golden hour ! 5 spots photo à proximité'
    }
  ]
}
```

**Action:**
- Créer le preset
- Créer `FilterChipsBar.vue` (chips Quasar avec icons)
- Créer `ReportFAB.vue` (floating action button)
- Ajouter clustering dans MapView

---

### 🔥 Tâche 2.3 - Layout "Quick Plan" (15 min)

**Concept:** Planification rapide avec drag & drop sur carte

**Features:**
- 🆕 Timeline vertical compact
- 🆕 Drag markers directement sur carte
- 🆕 Swipe pour réordonner étapes
- 🆕 Quick Add POI (tap + hold)
- 🆕 Distance/temps en temps réel

**Layout:**
```typescript
quickplan: {
  id: 'quickplan',
  name: 'Planning Rapide',
  description: 'Créer un voyage en quelques taps',
  icon: 'add_location_alt',
  device: 'mobile',
  layout: {
    type: 'overlay-timeline',
    mapSize: 100,
    timelinePosition: 'left-overlay',
    timelineWidth: 25,
    dragAndDrop: true,
    instantRouting: true
  },
  panels: [
    {
      id: 'compact_timeline',
      component: 'CompactTimeline',
      position: 'left-overlay',
      size: 25,
      translucent: true,
      swipeable: false
    },
    {
      id: 'stage_quick_edit',
      component: 'StageQuickEditDialog',
      position: 'center-dialog',
      trigger: 'marker-tap'
    }
  ],
  aiFeatures: [
    {
      id: 'route_improvement',
      name: 'Optimisation Auto',
      type: 'optimization',
      trigger: {
        conditions: [{ key: 'stages_count', operator: '>=', value: 3 }]
      },
      action: 'suggest_reorder',
      template: '🎯 Réorganisez pour économiser {time}'
    },
    {
      id: 'missing_stages',
      name: 'Étapes Manquantes',
      type: 'completion',
      trigger: {
        conditions: [
          { key: 'gap_distance', operator: '>', value: 200000 }, // 200km
          { key: 'gap_contains_city', operator: '==', value: true }
        ]
      },
      action: 'suggest_intermediate_stops',
      template: '🛑 Ajoutez une pause à {city_name} ?'
    }
  ]
}
```

**Action:**
- Créer le preset
- Créer `CompactTimeline.vue` (version simplifiée)
- Créer `StageQuickEditDialog.vue` (edit rapide)
- Implémenter drag markers dans MapView

---

## 🖥️ Phase 3: Layouts Web Riches (60 min)

### 🎨 Tâche 3.1 - Layout "Studio Planning" (15 min)

**Concept:** Workspace complet multi-panneaux avec AI assistant

**Features:**
- 🆕 Split 3-panneaux (Timeline | Map | Assistant AI)
- 🆕 Tabs dans chaque panneau
- 🆕 Drag & drop entre panneaux
- 🆕 Command palette (Cmd+K)
- 🆕 Bookmarks & saved views

**Layout:**
```typescript
studio: {
  id: 'studio',
  name: 'Studio Pro',
  description: 'Workspace complet pour créer le voyage parfait',
  icon: 'dashboard_customize',
  device: 'web',
  layout: {
    type: 'tri-panel',
    panels: {
      left: { size: 25, minSize: 20, maxSize: 35 },
      center: { size: 50, minSize: 40 },
      right: { size: 25, minSize: 20, maxSize: 35 }
    },
    orientation: 'horizontal',
    resizable: true,
    savable: true, // save layout preferences
    tabs: {
      enabled: true,
      position: 'top',
      closeable: true
    }
  },
  panels: [
    // LEFT - Planning Tools
    {
      id: 'timeline_studio',
      component: 'TimelinePanel',
      position: 'left',
      tabs: [
        { id: 'timeline', label: 'Timeline', icon: 'timeline' },
        { id: 'stages', label: 'Étapes', icon: 'location_on' },
        { id: 'budget', label: 'Budget', icon: 'payments' }
      ],
      defaultTab: 'timeline'
    },
    // CENTER - Map
    {
      id: 'map_canvas',
      component: 'MapView',
      position: 'center',
      toolbar: {
        enabled: true,
        tools: ['draw', 'measure', 'layers', 'styles']
      }
    },
    // RIGHT - Intelligence
    {
      id: 'ai_assistant',
      component: 'AIAssistantPanel',
      position: 'right',
      tabs: [
        { id: 'suggestions', label: 'Suggestions', icon: 'lightbulb' },
        { id: 'discovery', label: 'Découverte', icon: 'explore' },
        { id: 'analytics', label: 'Stats', icon: 'analytics' }
      ],
      defaultTab: 'suggestions'
    }
  ],
  aiFeatures: [
    {
      id: 'smart_route',
      name: 'Route Intelligente',
      type: 'generation',
      trigger: { manual: true },
      action: 'generate_optimal_route',
      template: '🧠 Route optimale générée : {stages} étapes, {duration}, {cost}€'
    },
    {
      id: 'poi_enrichment',
      name: 'Enrichissement POI',
      type: 'enhancement',
      trigger: {
        conditions: [{ key: 'stage_added', operator: '==', value: true }]
      },
      action: 'enrich_stage_with_pois',
      template: '✨ {count} activités découvertes près de {stage_name}'
    }
  ]
}
```

**Action:**
- Créer le preset avec tri-panel layout
- Créer `AIAssistantPanel.vue` (chat-style)
- Implémenter tab system dans panels
- Ajouter command palette (Cmd+K)

---

### 🎨 Tâche 3.2 - Layout "Booking Hub" (15 min)

**Concept:** Dashboard réservations avec filtres avancés

**Features:**
- 🆕 Carte interactive + liste résultats
- 🆕 Filtres dynamiques (prix, notation, type)
- 🆕 Comparateur 3 hébergements
- 🆕 Calendar view avec prix
- 🆕 Intégration Booking.com API

**Layout:**
```typescript
bookinghub: {
  id: 'bookinghub',
  name: 'Centre Réservations',
  description: 'Trouver et réserver hébergements & activités',
  icon: 'hotel',
  device: 'web',
  layout: {
    type: 'split-with-overlay',
    mapSize: 60,
    listSize: 40,
    orientation: 'horizontal',
    compareMode: {
      enabled: true,
      maxItems: 3,
      position: 'bottom-overlay'
    }
  },
  panels: [
    {
      id: 'booking_search',
      component: 'BookingPanel',
      position: 'left',
      size: 40,
      sections: [
        'filters',
        'results_list',
        'price_graph'
      ]
    },
    {
      id: 'booking_map',
      component: 'MapView',
      position: 'right',
      size: 60,
      markers: 'booking_results',
      clustering: true
    },
    {
      id: 'compare_overlay',
      component: 'ComparePanel',
      position: 'bottom-overlay',
      size: 30,
      collapsible: true,
      maxItems: 3
    }
  ],
  aiFeatures: [
    {
      id: 'best_value',
      name: 'Meilleur Rapport Qualité/Prix',
      type: 'recommendation',
      trigger: {
        conditions: [{ key: 'search_results', operator: '>', value: 5 }]
      },
      action: 'rank_by_value',
      template: '🏆 Top 3 : {names} ({savings}€ économisés)'
    },
    {
      id: 'price_alert',
      name: 'Alerte Prix',
      type: 'monitoring',
      trigger: {
        conditions: [{ key: 'price_drop', operator: '>', value: 10 }]
      },
      action: 'notify_price_drop',
      template: '💰 Prix baissé de {percent}% sur {hotel_name}'
    }
  ]
}
```

**Action:**
- Créer le preset
- Créer `ComparePanel.vue` (side-by-side comparison)
- Implémenter filters dans BookingPanel
- Ajouter price graph

---

### 🎨 Tâche 3.3 - Layout "Discovery Canvas" (15 min)

**Concept:** Mode exploration visuelle avec heatmaps & layers

**Features:**
- 🆕 Heatmaps multiples (photos, rating, traffic)
- 🆕 Layer switcher avancé
- 🆕 AR Preview mode
- 🆕 3D buildings
- 🆕 Time travel (voir zone à différentes heures)

**Layout:**
```typescript
discovery: {
  id: 'discovery',
  name: 'Canvas Découverte',
  description: 'Explorer visuellement avec heatmaps et layers 3D',
  icon: 'layers',
  device: 'web',
  layout: {
    type: 'fullscreen-with-toolbars',
    mapSize: 100,
    toolbars: {
      top: { enabled: true, tools: ['layers', 'time', '3d'] },
      left: { enabled: true, tools: ['filters', 'search'] },
      right: { enabled: true, tools: ['analytics', 'export'] }
    },
    map3D: true,
    terrainEnabled: true
  },
  panels: [
    {
      id: 'layer_control',
      component: 'AdvancedLayerControl',
      position: 'left-sidebar',
      size: 20,
      layers: [
        { id: 'photos_heatmap', name: 'Photos', icon: 'photo_camera' },
        { id: 'ratings_heatmap', name: 'Notes', icon: 'star' },
        { id: 'traffic_heatmap', name: 'Trafic', icon: 'traffic' },
        { id: 'prices_heatmap', name: 'Prix', icon: 'attach_money' },
        { id: 'weather_layer', name: 'Météo', icon: 'wb_sunny' }
      ]
    },
    {
      id: 'time_slider',
      component: 'TimeSlider',
      position: 'top-toolbar',
      range: { start: 0, end: 24 },
      step: 1
    },
    {
      id: 'discovery_insights',
      component: 'DiscoveryPanel',
      position: 'right-sidebar',
      size: 25,
      insights: [
        'popular_times',
        'trending_spots',
        'hidden_gems'
      ]
    }
  ],
  aiFeatures: [
    {
      id: 'crowd_prediction',
      name: 'Prédiction Affluence',
      type: 'prediction',
      trigger: { manual: true },
      action: 'predict_crowd_levels',
      template: '📊 {location} sera {level} à {time}'
    },
    {
      id: 'photo_spots_ai',
      name: 'Spots Photo IA',
      type: 'creative',
      trigger: {
        conditions: [{ key: 'photos_layer', operator: '==', value: 'active' }]
      },
      action: 'suggest_photo_locations',
      template: '📸 {count} spots Instagram découverts'
    }
  ]
}
```

**Action:**
- Créer le preset
- Créer `AdvancedLayerControl.vue` (multi-select layers)
- Créer `TimeSlider.vue` (scrubber 0-24h)
- Implémenter heatmaps dans MapView

---

### 🎨 Tâche 3.4 - Layout "Analytics Dashboard" (15 min)

**Concept:** Vue complète statistiques avec graphs interactifs

**Features:**
- 🆕 Dashboard style BI avec KPIs
- 🆕 Charts interactifs (Chart.js)
- 🆕 Heatmap temporelle
- 🆕 Export PDF/Excel
- 🆕 Comparaisons multi-voyages

**Layout:**
```typescript
analytics: {
  id: 'analytics',
  name: 'Dashboard Analytique',
  description: 'Statistiques complètes et insights voyage',
  icon: 'analytics',
  device: 'web',
  layout: {
    type: 'grid-dashboard',
    columns: 12,
    rows: 'auto',
    gap: 16,
    widgets: [
      { id: 'kpi_cards', cols: 12, rows: 1 },
      { id: 'distance_chart', cols: 6, rows: 2 },
      { id: 'budget_chart', cols: 6, rows: 2 },
      { id: 'timeline_heatmap', cols: 12, rows: 2 },
      { id: 'map_overview', cols: 8, rows: 3 },
      { id: 'top_categories', cols: 4, rows: 3 }
    ]
  },
  panels: [
    {
      id: 'kpis',
      component: 'KPICardsPanel',
      position: 'grid',
      metrics: [
        'total_distance',
        'total_duration',
        'total_cost',
        'stages_count',
        'avg_stage_distance',
        'carbon_footprint'
      ]
    },
    {
      id: 'charts_container',
      component: 'ChartsPanel',
      position: 'grid',
      charts: [
        { type: 'line', data: 'distance_per_day' },
        { type: 'doughnut', data: 'budget_by_category' },
        { type: 'bar', data: 'stages_by_type' }
      ]
    },
    {
      id: 'map_viz',
      component: 'MapView',
      position: 'grid',
      mode: 'overview',
      interactive: false,
      showRoute: true,
      showMarkers: true
    }
  ],
  aiFeatures: [
    {
      id: 'insights_generation',
      name: 'Génération Insights',
      type: 'analysis',
      trigger: { manual: true },
      action: 'generate_insights',
      template: '💡 {count} insights découverts : {summary}'
    },
    {
      id: 'comparison_analysis',
      name: 'Analyse Comparative',
      type: 'comparison',
      trigger: {
        conditions: [{ key: 'selected_trips', operator: '>=', value: 2 }]
      },
      action: 'compare_trips',
      template: '📊 Voyage 2 est {percent}% plus économique'
    }
  ]
}
```

**Action:**
- Créer le preset
- Améliorer `KPICardsPanel.vue` et `ChartsPanel.vue`
- Ajouter grid layout system
- Implémenter export PDF

---

## 🤖 Phase 4: AI Contextuelle Intelligente (30 min)

### 🧠 Tâche 4.1 - Système de Contexte Dynamique (10 min)

**Objectif:** Créer un composable qui détecte le contexte utilisateur

**Fichier:** `apps/web/src/modules/map/composables/useContextDetection.ts`

```typescript
import { computed, ref } from 'vue'
import { useGeolocation } from '@vueuse/core'
import { useLocationTrackingStore } from '@/stores/locationTracking'

export interface UserContext {
  device: 'mobile' | 'web'
  phase: 'before' | 'during' | 'after'
  activity: 'planning' | 'navigating' | 'exploring' | 'booking' | 'reporting' | 'analyzing'
  location: {
    isMoving: boolean
    speed: number // km/h
    isOnRoute: boolean
    distanceToNextStage: number
  }
  time: {
    hour: number
    isDay: boolean
    isWeekend: boolean
  }
  trip: {
    hasActiveTrip: boolean
    stagesCount: number
    completionPercent: number
    drivingTime: number // ms
  }
  needs: string[] // Besoins détectés
}

export function useContextDetection() {
  const locationStore = useLocationTrackingStore()
  const { coords } = useGeolocation()
  
  const context = computed<UserContext>(() => {
    const now = new Date()
    const hour = now.getHours()
    const isMoving = locationStore.speed > 5 // 5 km/h
    
    // Detect phase
    let phase: UserContext['phase'] = 'before'
    if (locationStore.isTracking && isMoving) {
      phase = 'during'
    } else if (/* trip completed logic */) {
      phase = 'after'
    }
    
    // Detect activity
    let activity: UserContext['activity'] = 'planning'
    if (isMoving && locationStore.isOnRoute) {
      activity = 'navigating'
    } else if (/* viewing POIs */) {
      activity = 'exploring'
    }
    
    // Detect needs
    const needs: string[] = []
    if (locationStore.speed > 100 && locationStore.drivingTime > 7200000) {
      needs.push('rest_stop')
    }
    if (hour >= 12 && hour <= 14 && !locationStore.isMoving) {
      needs.push('food')
    }
    if (hour >= 20 || hour <= 6) {
      needs.push('accommodation')
    }
    
    return {
      device: /* detect from screen size */,
      phase,
      activity,
      location: {
        isMoving,
        speed: locationStore.speed,
        isOnRoute: locationStore.isOnRoute,
        distanceToNextStage: /* calculate */
      },
      time: {
        hour,
        isDay: hour >= 6 && hour <= 20,
        isWeekend: now.getDay() === 0 || now.getDay() === 6
      },
      trip: {
        hasActiveTrip: /* check store */,
        stagesCount: /* get from store */,
        completionPercent: /* calculate */,
        drivingTime: locationStore.totalDrivingTime
      },
      needs
    }
  })
  
  return {
    context
  }
}
```

**Action:**
- Créer le composable
- Intégrer avec stores existants
- Tester détection contexte

---

### 🧠 Tâche 4.2 - Moteur Recommandations AI (10 min)

**Objectif:** Système qui génère suggestions intelligentes selon contexte

**Fichier:** `apps/web/src/modules/map/composables/useSmartSuggestions.ts`

```typescript
import { computed, ref, watch } from 'vue'
import { useContextDetection } from './useContextDetection'
import type { UserContext } from './useContextDetection'

export interface AISuggestion {
  id: string
  type: 'proactive' | 'reactive' | 'predictive'
  priority: 'low' | 'medium' | 'high' | 'urgent'
  category: 'safety' | 'comfort' | 'optimization' | 'discovery' | 'cost'
  title: string
  description: string
  action: string
  actionLabel: string
  icon: string
  color: string
  dismissible: boolean
  expiry?: number // timestamp
  metadata?: Record<string, any>
}

export function useSmartSuggestions() {
  const { context } = useContextDetection()
  const suggestions = ref<AISuggestion[]>([])
  const dismissed = ref<Set<string>>(new Set())
  
  // Règles de suggestions
  const rules = {
    // Sécurité
    fatigue_warning: (ctx: UserContext) => {
      if (ctx.location.isMoving && ctx.trip.drivingTime > 7200000) {
        return {
          id: 'fatigue_warning',
          type: 'proactive',
          priority: 'urgent',
          category: 'safety',
          title: 'Pause recommandée',
          description: 'Vous conduisez depuis 2h, prenez une pause de 15 min',
          action: 'find_rest_area',
          actionLabel: 'Trouver aire de repos',
          icon: 'local_cafe',
          color: 'warning',
          dismissible: false
        } as AISuggestion
      }
    },
    
    // Confort
    meal_time: (ctx: UserContext) => {
      if (ctx.time.hour >= 12 && ctx.time.hour <= 14 && !ctx.location.isMoving) {
        return {
          id: 'meal_suggestion',
          type: 'proactive',
          priority: 'medium',
          category: 'comfort',
          title: 'C\'est l\'heure du déjeuner !',
          description: '5 restaurants bien notés à proximité',
          action: 'show_restaurants',
          actionLabel: 'Voir les restaurants',
          icon: 'restaurant',
          color: 'positive',
          dismissible: true
        } as AISuggestion
      }
    },
    
    // Optimisation
    route_optimization: (ctx: UserContext) => {
      if (ctx.trip.stagesCount >= 3 && ctx.phase === 'before') {
        return {
          id: 'route_optimization',
          type: 'reactive',
          priority: 'medium',
          category: 'optimization',
          title: 'Optimisez votre trajet',
          description: 'Économisez 45 min et 15 km en réorganisant',
          action: 'optimize_route',
          actionLabel: 'Optimiser',
          icon: 'route',
          color: 'info',
          dismissible: true
        } as AISuggestion
      }
    },
    
    // Découverte
    hidden_gems: (ctx: UserContext) => {
      if (ctx.activity === 'exploring' && ctx.phase === 'during') {
        return {
          id: 'hidden_gems',
          type: 'predictive',
          priority: 'low',
          category: 'discovery',
          title: 'Pépites locales',
          description: '3 lieux secrets recommandés par les locaux',
          action: 'show_hidden_gems',
          actionLabel: 'Découvrir',
          icon: 'explore',
          color: 'purple',
          dismissible: true
        } as AISuggestion
      }
    },
    
    // Coût
    price_alert: (ctx: UserContext) => {
      // Check budget logic
      return {
        id: 'price_alert',
        type: 'reactive',
        priority: 'high',
        category: 'cost',
        title: 'Alerte budget',
        description: 'Vous avez dépensé 80% de votre budget',
        action: 'view_budget',
        actionLabel: 'Voir budget',
        icon: 'account_balance_wallet',
        color: 'negative',
        dismissible: false
      } as AISuggestion
    }
  }
  
  // Évaluer toutes les règles
  watch(context, (ctx) => {
    const newSuggestions: AISuggestion[] = []
    
    for (const [key, rule] of Object.entries(rules)) {
      if (!dismissed.value.has(key)) {
        const suggestion = rule(ctx)
        if (suggestion) {
          newSuggestions.push(suggestion)
        }
      }
    }
    
    // Trier par priorité
    newSuggestions.sort((a, b) => {
      const priorities = { urgent: 4, high: 3, medium: 2, low: 1 }
      return priorities[b.priority] - priorities[a.priority]
    })
    
    suggestions.value = newSuggestions
  }, { immediate: true })
  
  const dismissSuggestion = (id: string) => {
    dismissed.value.add(id)
    suggestions.value = suggestions.value.filter(s => s.id !== id)
  }
  
  const clearDismissed = () => {
    dismissed.value.clear()
  }
  
  return {
    suggestions: computed(() => suggestions.value),
    dismissSuggestion,
    clearDismissed
  }
}
```

**Action:**
- Créer le composable
- Définir 10+ règles de suggestions
- Tester avec différents contextes

---

### 🧠 Tâche 4.3 - Composant Suggestions UI (10 min)

**Objectif:** Interface élégante pour afficher suggestions

**Fichier:** `apps/web/src/modules/map/components/SmartSuggestionsBar.vue`

```vue
<template>
  <transition-group 
    name="suggestion-slide"
    tag="div"
    class="smart-suggestions-bar"
  >
    <div
      v-for="suggestion in visibleSuggestions"
      :key="suggestion.id"
      class="suggestion-card"
      :class="[
        `suggestion-${suggestion.priority}`,
        `suggestion-${suggestion.category}`
      ]"
    >
      <div class="suggestion-icon">
        <q-icon :name="suggestion.icon" size="28px" />
      </div>
      
      <div class="suggestion-content">
        <div class="suggestion-title">{{ suggestion.title }}</div>
        <div class="suggestion-description">{{ suggestion.description }}</div>
      </div>
      
      <div class="suggestion-actions">
        <q-btn
          flat
          dense
          :label="suggestion.actionLabel"
          :color="suggestion.color"
          @click="handleAction(suggestion)"
        />
        <q-btn
          v-if="suggestion.dismissible"
          flat
          dense
          round
          icon="close"
          size="sm"
          @click="dismiss(suggestion.id)"
        />
      </div>
    </div>
  </transition-group>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useSmartSuggestions } from '../composables/useSmartSuggestions'

const { suggestions, dismissSuggestion } = useSmartSuggestions()

const visibleSuggestions = computed(() => {
  return suggestions.value.slice(0, 3) // Max 3 suggestions
})

const emit = defineEmits<{
  action: [suggestion: any]
}>()

const handleAction = (suggestion: any) => {
  emit('action', suggestion)
}

const dismiss = (id: string) => {
  dismissSuggestion(id)
}
</script>

<style scoped lang="scss">
.smart-suggestions-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 500;
  max-width: 600px;
  width: 90%;
}

.suggestion-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(10, 15, 30, 0.95);
  backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.7);
  }
  
  &.suggestion-urgent {
    border-color: rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(10, 15, 30, 0.95));
  }
  
  &.suggestion-high {
    border-color: rgba(251, 191, 36, 0.5);
  }
}

.suggestion-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  flex-shrink: 0;
}

.suggestion-content {
  flex: 1;
}

.suggestion-title {
  font-size: 16px;
  font-weight: 700;
  color: #f4f7ff;
  margin-bottom: 4px;
}

.suggestion-description {
  font-size: 14px;
  color: rgba(244, 247, 255, 0.7);
}

.suggestion-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

// Animations
.suggestion-slide-enter-active,
.suggestion-slide-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.suggestion-slide-enter-from {
  opacity: 0;
  transform: translateY(100px);
}

.suggestion-slide-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}
</style>
```

**Action:**
- Créer le composant
- Intégrer dans MapPage.web et MapPage.mobile
- Tester animations

---

## ✅ Phase 5: Tests & Validation (15 min)

### 🧪 Tâche 5.1 - Tests Fonctionnels (10 min)

**Checklist:**

```bash
# 1. Type-check
pnpm type-check --filter=@my-roadtrip/web

# 2. Lint
pnpm lint --filter=@my-roadtrip/web

# 3. Build
pnpm build --filter=@my-roadtrip/web

# 4. Tests manuels
pnpm dev --filter=@my-roadtrip/web
```

**Scénarios à tester:**

- [ ] Switch entre layouts mobile (Drive → Scout → QuickPlan)
- [ ] Switch entre layouts web (Studio → Booking → Discovery → Analytics)
- [ ] Suggestions AI apparaissent au bon moment
- [ ] Dismissal des suggestions fonctionne
- [ ] Gestures mobile fonctionnent
- [ ] Drag & drop dans layouts fonctionne
- [ ] Responsive design OK
- [ ] Performance acceptable (FPS > 30)

---

### 🧪 Tâche 5.2 - Documentation & Commit (5 min)

**Créer:** `LAYOUTS_AI_SYSTEM_V2.md`

**Contenu:**
- Architecture des 7 nouveaux layouts
- Système AI contextuelle
- Guide d'utilisation
- Screenshots/GIFs
- Roadmap features futures

**Commit:**
```bash
git add .
git commit -m "feat: Layouts dynamiques intelligents + AI contextuelle

- 3 layouts mobile: Drive, Scout, QuickPlan
- 4 layouts web: Studio, BookingHub, Discovery, Analytics
- Système détection contexte utilisateur
- Moteur recommandations AI (10+ règles)
- UI suggestions avec animations
- Tests complets OK

BREAKING CHANGE: Nouveaux presets dans mapPresets.config.ts
"
```

---

## 📊 Résumé du Plan

| Phase | Durée | Livrables | Impact |
|-------|-------|-----------|--------|
| **1. Analyse** | 30 min | Audit complet + cartographie contextes | Comprendre l'existant |
| **2. Mobile** | 45 min | 3 layouts intelligents (Drive, Scout, QuickPlan) | UX mobile 10x meilleure |
| **3. Web** | 60 min | 4 layouts riches (Studio, Booking, Discovery, Analytics) | Plateforme complète |
| **4. AI** | 30 min | Système suggestions contextuelles | Intelligence proactive |
| **5. Tests** | 15 min | Validation + documentation | Production-ready |

**Total:** 180 minutes (3h)

---

## 🎯 Résultats Attendus

### Avant (Actuel)
❌ Layouts = juste taille carte différente  
❌ Pas d'adaptation contexte utilisateur  
❌ AI suggestions statiques dans config  
❌ Même expérience mobile/web

### Après (Dans 3h)
✅ **7 layouts vraiment différents** avec UX dédiée  
✅ **Détection contexte dynamique** (device, phase, activity, needs)  
✅ **10+ règles AI intelligentes** qui s'adaptent en temps réel  
✅ **Expérience distincte mobile/web** adaptée aux usages

---

## 🚀 Prochaines Évolutions (Post-3h)

1. **Backend AI** - API suggestions avec OpenAI GPT-4
2. **Machine Learning** - Apprentissage préférences utilisateur
3. **Predictive Analytics** - Prédire besoins avant qu'ils surviennent
4. **Voice Assistant** - Interaction vocale complète
5. **AR Mode** - Réalité augmentée pour navigation
6. **Social Features** - Suggestions basées sur amis
7. **Offline Intelligence** - AI qui fonctionne hors ligne
8. **Gamification** - Challenges basés sur layouts et AI

---

**Prêt à commencer ?** 🚀

GO ! 🔥
