# Mobile Design System

## 🎯 Vue d'ensemble

Le système de design mobile **étend** notre design system existant au lieu d'en créer un nouveau.

### Architecture

```
design-tokens.css (1571 lignes)
  ↓ Variables CSS (couleurs, espacement, ombres, glass)
  
shared-components.css
  ↓ Classes réutilisables (.glass-soft, .app-section, etc.)
  ↓ + Classes mobile-specific (.mobile-hero, .mobile-cta, etc.)
  
buttons.css
  ↓ Système de boutons (.btn--primary, .btn--secondary, variants)
  
base.scss
  ↓ Reset CSS + styles globaux
```

**Tous les fichiers sont importés globalement dans `main.ts` - pas besoin d'import dans les composants.**

---

## 📦 Classes Disponibles

### 1. Classes Existantes (Réutiliser en priorité)

#### Design Tokens (CSS Variables)

```css
/* Couleurs */
--primary: #7C3AED          /* Violet principal */
--accent: #EC4899           /* Rose accent */
--bg-canvas, --bg-primary, --bg-secondary, --bg-elevated
--text-primary, --text-secondary, --text-tertiary

/* Espacement */
--space-xs: 0.25rem   (4px)
--space-sm: 0.5rem    (8px)
--space-md: 1rem      (16px)
--space-lg: 1.5rem    (24px)
--space-xl: 2rem      (32px)
--space-2xl: 3rem     (48px)

/* Border Radius */
--radius-sm: 8px
--radius-md: 12px
--radius-lg: 16px
--radius-xl: 20px
--radius-2xl: 24px

/* Ombres */
--shadow-sm, --shadow-md, --shadow-lg, --shadow-xl, --shadow-2xl

/* Glass Morphism */
--glass-bg, --glass-border, --blur, --shimmer-highlight
```

#### Shared Components

```css
.glass-soft              /* Surface glassy pour cards/menus */
.app-page                /* Wrapper de page avec padding responsive */
.app-page__container     /* Container max-width 1240px */
.app-section             /* Section avec gradient, border, shadow */
.app-section__header     /* Header de section */
.app-section__title      /* Titre de section */
.gamification-highlight  /* CTA avec glow effect */
.badge-glow              /* Badge notification avec glow */
```

#### Buttons

```css
.btn                /* Base button avec transitions */
.btn--primary       /* Gradient avec accent colors */
.btn--secondary     /* Subtle accent background */
.btn--sm            /* Petit (0.5rem padding) */
.btn--md            /* Moyen (0.75rem padding) */
.btn--lg            /* Grand (1rem padding) */
```

### 2. Classes Mobile-Specific (Dans shared-components.css)

#### Structure de Page

```css
.mobile-page            /* Base page avec gradient background */
.mobile-content         /* Content wrapper avec max-width + gaps */
```

#### Hero Section

```vue
<section class="mobile-hero">
  <div class="mobile-hero__top">
    <p class="mobile-hero__eyebrow">SECTION NAME</p>
    <h1 class="mobile-hero__title">Page Title</h1>
    <p class="mobile-hero__subtitle">Subtitle</p>
  </div>
  
  <div class="mobile-hero__metrics">
    <q-chip>Metric 1</q-chip>
  </div>
  
  <div class="mobile-hero__status">
    <div class="mobile-hero__status-item">
      <q-icon name="check_circle" />
      <span>Status</span>
    </div>
  </div>
</section>
```

#### CTAs & Navigation

```vue
<!-- CTA Buttons Row -->
<div class="mobile-cta-row">
  <q-btn class="mobile-cta" label="Action 1" />
  <q-btn class="mobile-cta" label="Action 2" />
</div>

<!-- Navigation Tabs -->
<q-btn-toggle
  v-model="activeTab"
  class="mobile-nav-toggle"
  :options="tabs"
/>
```

#### Section Headers

```vue
<div class="mobile-section-header">
  <div class="mobile-section-header__title">
    <q-icon name="timeline" />
    <h3>Section Title</h3>
  </div>
</div>
```

#### Cards & Lists

```vue
<!-- Card (basic) -->
<div class="mobile-card">
  Content
</div>

<!-- Card (interactive) -->
<div class="mobile-card mobile-card--interactive" @click="handleClick">
  Content
</div>

<!-- Card (active state) -->
<div class="mobile-card mobile-card--active">
  Active content
</div>

<!-- List -->
<div class="mobile-list">
  <div class="mobile-list-item">Item 1</div>
  <div class="mobile-list-item">Item 2</div>
</div>
```

#### Empty & Error States

```vue
<!-- Empty State -->
<div class="mobile-empty-state">
  <q-icon name="inbox" size="64px" />
  <h3>No Items</h3>
  <p>Description text</p>
</div>

<!-- Error State -->
<div class="mobile-error-state">
  <h3>Error Title</h3>
  <p>Error message</p>
</div>
```

---

## 🎨 Stratégie d'Utilisation

### ✅ FAIRE (Priorité)

1. **Utiliser les classes existantes** quand possible:
   ```vue
   <div class="glass-soft">...</div>
   <section class="app-section">...</section>
   <q-btn class="btn btn--primary">Action</q-btn>
   ```

2. **Utiliser les classes mobile-specific** pour patterns mobiles:
   ```vue
   <section class="mobile-hero">...</section>
   <div class="mobile-cta-row">...</div>
   ```

3. **Styles personnalisés** avec design tokens:
   ```vue
   <style lang="scss" scoped>
   .custom-element {
     padding: var(--space-lg);
     border-radius: var(--radius-xl);
     background: color-mix(in srgb, var(--primary) 15%, transparent);
     box-shadow: var(--shadow-lg);
   }
   </style>
   ```

### ❌ ÉVITER

- ❌ Couleurs hardcodées (`#7C3AED` → utiliser `var(--primary)`)
- ❌ Espacement hardcodé (`16px` → utiliser `var(--space-md)`)
- ❌ Ombres hardcodées (utiliser `var(--shadow-lg)`)
- ❌ Créer des classes redondantes quand `.glass-soft` ou `.app-section` suffisent
- ❌ Dupliquer les styles boutons (utiliser `.btn--primary`)

---

## 📝 Template de Page Mobile Standard

```vue
<template>
  <q-page class="mobile-page">
    <div class="mobile-content">
      
      <!-- Hero avec CTAs -->
      <section class="mobile-hero">
        <div class="mobile-hero__top">
          <p class="mobile-hero__eyebrow">MY SECTION</p>
          <h1 class="mobile-hero__title">{{ pageTitle }}</h1>
          <p class="mobile-hero__subtitle">{{ subtitle }}</p>
        </div>
        
        <div class="mobile-hero__metrics">
          <q-chip>{{ metric1 }}</q-chip>
          <q-chip>{{ metric2 }}</q-chip>
        </div>
        
        <div class="mobile-cta-row">
          <q-btn class="mobile-cta" label="Action 1" @click="action1" />
          <q-btn class="mobile-cta" label="Action 2" @click="action2" />
        </div>
      </section>

      <!-- Navigation (optionnel) -->
      <q-btn-toggle
        v-model="activeView"
        class="mobile-nav-toggle"
        :options="viewOptions"
      />

      <!-- Section avec header -->
      <div class="mobile-section-header">
        <div class="mobile-section-header__title">
          <q-icon name="list" />
          <h3>Section Title</h3>
        </div>
      </div>

      <!-- Liste de cards -->
      <div class="mobile-list">
        <div
          v-for="item in items"
          :key="item.id"
          class="mobile-card mobile-card--interactive"
          @click="handleItemClick(item)"
        >
          <h4>{{ item.name }}</h4>
          <p>{{ item.description }}</p>
        </div>
      </div>

      <!-- Empty state (si pas d'items) -->
      <div v-if="!items.length" class="mobile-empty-state">
        <q-icon name="inbox" size="64px" />
        <h3>No Items Yet</h3>
        <p>Add your first item to get started</p>
      </div>

    </div>
  </q-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const pageTitle = ref('My Page')
const subtitle = ref('Description')
const activeView = ref('view1')
const items = ref([])

const viewOptions = [
  { label: 'View 1', value: 'view1' },
  { label: 'View 2', value: 'view2' },
]

function action1() { /* ... */ }
function action2() { /* ... */ }
function handleItemClick(item: any) { /* ... */ }
</script>

<style lang="scss" scoped>
/* Custom page-specific styles with design tokens */
.custom-element {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
</style>
```

---

## 🔍 Référence Complète des Tokens

### Couleurs

| Token | Valeur | Usage |
|-------|--------|-------|
| `--primary` | `#7C3AED` | Violet principal |
| `--accent` | `#EC4899` | Rose accent |
| `--success` | `#10B981` | Succès |
| `--error` | `#EF4444` | Erreur |
| `--info` | `#3B82F6` | Info |
| `--warning` | `#F59E0B` | Warning |
| `--bg-canvas` | `#0a0e1a` | Canvas background |
| `--bg-primary` | `#111827` | Primary background |
| `--bg-secondary` | `#1e293b` | Secondary background |
| `--bg-elevated` | `#1e293b` | Elevated surfaces |
| `--text-primary` | `#e2e8f0` | Primary text |
| `--text-secondary` | `#94a3b8` | Secondary text |
| `--text-tertiary` | `#64748b` | Tertiary text |

### Espacement

| Token | Valeur | Pixels |
|-------|--------|--------|
| `--space-xs` | `0.25rem` | 4px |
| `--space-sm` | `0.5rem` | 8px |
| `--space-md` | `1rem` | 16px |
| `--space-lg` | `1.5rem` | 24px |
| `--space-xl` | `2rem` | 32px |
| `--space-2xl` | `3rem` | 48px |

### Border Radius

| Token | Valeur | Pixels |
|-------|--------|--------|
| `--radius-sm` | `0.5rem` | 8px |
| `--radius-md` | `0.75rem` | 12px |
| `--radius-lg` | `1rem` | 16px |
| `--radius-xl` | `1.25rem` | 20px |
| `--radius-2xl` | `1.5rem` | 24px |
| `--radius-full` | `9999px` | Full rounded |

### Ombres

| Token | Usage |
|-------|-------|
| `--shadow-sm` | Subtle depth |
| `--shadow-md` | Medium depth |
| `--shadow-lg` | Large depth |
| `--shadow-xl` | Extra large depth |
| `--shadow-2xl` | Maximum depth |

---

## 🚀 Migration d'une Page Existante

### Avant (styles spécifiques)

```vue
<style lang="scss" scoped>
.hero {
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(...);
  /* 50+ lignes de styles... */
}
</style>
```

### Après (classes communes)

```vue
<template>
  <section class="mobile-hero">
    <!-- Pas de styles personnalisés nécessaires -->
  </section>
</template>

<style lang="scss" scoped>
/* Seulement les styles vraiment spécifiques à cette page */
</style>
```

---

## 📚 Ressources

- **design-tokens.css**: Tous les tokens CSS disponibles (1571 lignes)
- **shared-components.css**: Toutes les classes communes + mobile
- **buttons.css**: Système de boutons complet
- **PlannerPage.mobile.vue**: Exemple d'implémentation complète

---

## ✅ Checklist Migration Page Mobile

- [ ] Utiliser `.mobile-hero` au lieu de hero custom
- [ ] Utiliser `.mobile-cta-row` + `.mobile-cta` pour CTAs
- [ ] Utiliser `.mobile-nav-toggle` pour navigation tabs
- [ ] Utiliser `.mobile-section-header` pour headers de section
- [ ] Utiliser `.mobile-card` au lieu de cards custom
- [ ] Utiliser `.glass-soft` quand approprié
- [ ] Utiliser design tokens (`var(--...)`) pour styles custom
- [ ] Supprimer styles redondants du `<style scoped>`
- [ ] Vérifier que le build passe (`pnpm build`)
- [ ] Tester visuellement sur mobile

