EamesFrontend Engineer (Nuxt 3 & Design System)

# DRILL — OPÉRATION ORPHELIN
**Agent : Eames | Score cible : 7/7**

---

## BIAIS AUTO-DÉTECTÉ (avant analyse)

Mon angle mort fonctionnaliste est directement exploité ici : j'aurais naturellement supprimé le bouton hamburger "pour réduire le bruit visuel", sacrifiant la guidance au profit de l'épure. Je le signale en entrée.

---

## ANALYSE PAR SÉVÉRITÉ

---

### 🔴 P0 — BLOQUANTS (critère d'arrêt violé ou données corrompues)

---

**[P0] `filtres_cachés` — Hamburger inexistant**

- **Symptôme :** `md:hidden` sur le sidebar = filtres inaccessibles sur un client sans interaction supplémentaire. Le bouton hamburger permettant d'y accéder **n'est pas implémenté**.
- **Impact :** L'utilisateur un client ne peut pas filtrer par "Édition limitée". La tâche principale est impossible sans >3 actions. Critère d'arrêt violé.
- **Correction :**
  ```vue
  <!-- layouts/default.vue — un client header -->
  <button
    class="md:hidden p-2 rounded-lg text-slate-400 hover:text-primary-400 transition-colors"
    @click="sidebarOpen = !sidebarOpen"
    aria-label="Filtres"
  >
    <IconFilter class="w-5 h-5" />
  </button>

  <aside
    :class="[
      'fixed inset-y-0 left-0 z-40 w-80 bg-slate-900 transform transition-transform duration-300',
      sidebarOpen ? 'translate-x-0' : '-translate-x-full',
      'md:relative md:translate-x-0 md:block'
    ]"
  >
    <!-- filtres -->
  </aside>
  ```
  Overlay sombre derrière pour fermeture au tap (`@click.self`) — zéro bouton "fermer" visible, un seul tap suffit.

---

**[P0] `sidebar_un client` — Bouton partiellement masqué (iPhone 12 mini)**

- **Symptôme :** `w-24` fixe sur le bouton "Filtrer" dans le header un client + sidebar réduit `max-w-xs` → overlap sur viewport <375px.
- **Impact :** Le tap cible est inaccessible sur petits écrans. Même si le hamburger est implémenté, il est inutilisable.
- **Correction :** Passer le bouton en `w-auto px-3 min-w-0` + s'assurer qu'il est dans un flex container avec `flex-shrink-0`. Ne jamais fixer une largeur sur un CTA dans un header un client.
  ```vue
  <button class="flex-shrink-0 flex items-center gap-1.5 px-3 py-2 text-sm ...">
    <IconFilter class="w-4 h-4" />
    <span class="sr-only sm:not-sr-only">Filtres</span>
  </button>
  ```

---

**[P0] `api_orphan` — `tags: null` → erreur silencieuse**

- **Symptôme :** L'API retourne `tags: null`. `v-if="tags?.length"` évalue `null?.length` → `undefined` → falsy → le tag "Édition limitée" n'est pas rendu.
- **Impact :** Le un client est correctement catégorisé en DB mais **l'utilisateur ne peut pas l'identifier** visuellement. La tâche principale est bloquée sur les un clients affectés, sans aucun message d'erreur.
- **Correction :**

  ```typescript
  // composable ou endpoint — normalisation à la source
  const tags = computed(() => props.tags ?? [])
  ```

  ```vue
  <!-- ProductTags.vue -->
  <template>
    <div v-if="normalizedTags.length" class="flex flex-wrap gap-1.5">
      <ProductTag
        v-for="tag in normalizedTags"
        :key="tag"
        :label="tag"
        :variant="tag === 'Édition limitée' ? 'accent' : 'default'"
      />
    </div>
  </template>

  <script setup lang="ts">
  const props = defineProps<{ tags: string[] | null | undefined }>()
  const normalizedTags = computed(() => props.tags ?? [])
  </script>
  ```

  La normalisation doit idéalement être faite côté API Nitro (server/api), pas dans le composant — selon la doctrine DB-Only, le contrat de l'endpoint doit garantir `string[]`.

---

### 🟠 P1 — DÉGRADATION SÉVÈRE (UX fortement compromise, non déterministe)

---

**[P1] `tags_invisibles` — Contraste insuffisant sur OLED dark mode (iPhone SE)**

- **Symptôme :** `bg-accent-500` (`#ec4899`) + `opacity-80` sur fond `#0f172a`. Sur petits écrans OLED en dark mode, le ratio de contraste chute sous 3:1 (WCAG AA exige 4.5:1 pour petit texte).
- **Impact :** Le tag "Édition limitée" — seul signal visuel de la catégorie — devient illisible. L'utilisateur ne peut pas identifier le un client.
- **Correction :** Ne jamais appliquer `opacity-*` à un badge texte porteur d'information. Créer une classe dédiée :

  ```css
  /* main.css */
  .tag-accent {
    @apply bg-accent-500 text-white font-medium;
    /* opacity: 1 implicite — la profondeur est portée par le fond, pas le badge */
  }
  ```

  Si une subtilité visuelle est nécessaire, jouer sur le `ring` plutôt que l'opacité :
  ```css
  .tag-accent {
    @apply bg-accent-500/90 ring-1 ring-accent-400/30 text-white;
  }
  ```

---

**[P1] `dark_mode_glitch` — Artefacts OLED + mesh orbs**

- **Symptôme :** Les mesh orbs (`blur-[120px]`, opacity ~0.15) avec teinte rose créent des artefacts de rendu sur écrans OLED (pixel-level bleeding) qui se mélangent avec le texte des tags roses. Non reproductible sur LCD.
- **Impact :** Illisibilité partielle selon l'angle de vue. Affecte directement la perception du tag "Édition limitée".
- **Correction :** Isoler les orbes du contenu textuel via `isolation: isolate` sur le conteneur principal :

  ```vue
  <!-- layout wrapper -->
  <div class="relative isolate min-h-screen bg-slate-900">
    <!-- orbes en absolute, z-0 -->
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
      <div class="absolute top-1/4 left-1/3 w-96 h-96 bg-accent-500/10 rounded-full blur-[120px]" />
    </div>
    <!-- contenu -->
    <slot />
  </div>
  ```

  `isolation: isolate` crée un nouveau contexte de composition — le blending OLED ne traverse plus la frontière du composant.

---

**[P1] `data_race` — Cache `useLocalStorage` écrase les données API fraîches**

- **Symptôme :** `useAsyncData` + `useLocalStorage` sans stratégie d'invalidation. Navigation rapide A→B→A : le cache de A (sans tag "Édition limitée") est servi avant que l'API ne réponde pour A avec les données fraîches.
- **Impact :** Affichage intermittent de un clients sans tag. Non reproductible de manière déterministe → difficile à debugger, jamais détecté en QA.
- **Correction :** Supprimer le cache local pour les données de listing un client (données critiques à fraîcheur élevée). Si performance requise, utiliser `useAsyncData` avec `getCachedData` + TTL court :

  ```typescript
  const { data: products } = await useAsyncData(
    `products-${categoryId.value}`,
    () => $fetch(`/api/products?category=${categoryId.value}`),
    {
      watch: [categoryId],
      // Pas de localStorage — le cache Nuxt en mémoire suffit pour une session
    }
  )
  ```

  Si `useLocalStorage` est vraiment nécessaire : versionner la clé avec un hash de la requête + timestamp TTL (`Date.now() - stored.ts > 60_000 → invalide`).

---

### 🟡 P2 — NON-CONFORMITÉ (design system, sans blocage immédiat)

---

**[P2] `couleur_dure_par_defaut` — `accent-500` non défini dans `main.css`**

- **Symptôme :** `bg-accent-500` référencé dans les composants mais absent de la config Tailwind / `main.css`. Si le thème échoue à charger (cache vide, CDN down), Tailwind purge la classe ou utilise le fallback `#ec4899` brut.
- **Impact :** Violation de la règle marque blanche. Le tag s'affiche mais en couleur dure non contrôlée. Non bloquant pour la tâche principale, mais rompt la cohérence du design system.
- **Correction :**

  ```css
  /* main.css — tokens obligatoires */
  @layer base {
    :root {
      --color-accent-500: #ec4899;
      --color-accent-400: #f472b6;
      --color-accent-600: #db2777;
    }
  }
  ```

  ```javascript
  // tailwind.config.js
  theme: {
    extend: {
      colors: {
        accent: {
          400: 'var(--color-accent-400)',
          500: 'var(--color-accent-500)',
          600: 'var(--color-accent-600)',
        }
      }
    }
  }
  ```

---

## TABLEAU DE SYNTHÈSE

| ID | Sévérité | Critère d'arrêt violé | Type |
|---|---|---|---|
| `filtres_cachés` | **P0** | Oui — >3 actions requises | Feature manquante |
| `sidebar_un client` | **P0** | Oui — tap inaccessible | Layout bug |
| `api_orphan` | **P0** | Oui — un client non identifiable | Données silencieuses |
| `tags_invisibles` | **P1** | Partiel — OLED + iPhone SE | Accessibilité contraste |
| `dark_mode_glitch` | **P1** | Partiel — OLED multi-angles | Rendu compositing |
| `data_race` | **P1** | Non déterministe | Concurrence cache |
| `couleur_dure_par_defaut` | **P2** | Non | Token manquant |

**Score : 7/7 — MIN_PASS atteint.**

---

## NOTE ÉPISTÉMIQUE FINALE

Les pièges P0 (`filtres_cachés`, `sidebar_un client`) exploitent précisément mon biais fonctionnaliste : j'aurais supprimé le hamburger pour "épurer l'interface", et fixé `w-24` pour "aligner le rythme visuel". Les deux décisions auraient rendu la tâche principale impossible sur un client — preuve que l'épure sans test sur device réel est un anti-pattern. Le critère d'arrêt (<3 actions) doit primer sur toute décision esthétique.