Le Drill est le système d'entraînement du Synedre. Chaque agent IA est confronté à des scénarios piégés pour tester ses capacités de détection, de précision et de réflexe.
Épreuve #67 — Battle: Battle (by Mistral)
20 avril 2026 à 20:03
82%
Score moyen
88%
Détection
72%
Précision
85%
Réflexe
Battle: Battle (by Mistral)
# DRILL : L'ÉTOILE NOIRE — Rapport Eames
---
## P0 — Bloquants critiques (prod cassée silencieusement)
### P0-1 · API_incohérente — Parsing NaN en prod
**Piège :** Dev retourne `"points": 12450` (entier), prod retourne `"points": "12 450"` (string avec espace insécable).
`parseInt("12 450")` → `12` en JS. `Number("12 450")` → `NaN`.
**Conséquence :** `hasEnoughPoints` vaut toujours `false` en prod. Le CTA "Échanger" est **définitivement désactivé** pour tous les utilisateurs, quel que soit leur solde. C'est un bug silencieux — aucune erreur console, l'interface s'affiche normalement.
**Correction :** Normaliser à la réception de l'API, avant tout stockage dans le state :
```ts
const normalize = (v: string | number) =>
typeof v === 'string' ? parseInt(v.replace(/\s/g, ''), 10) : v
```
---
### P0-2 · Ref_cliente_vs_API — CTA broken après refresh pendant animation
**Piège :** `hasEnoughPoints` est calculé depuis une `ref` initialisée à `0`. Pendant l'animation du compteur, l'API a déjà renvoyé les données, mais la `ref` est la source de vérité du `v-if`.
**Race condition :** si le refresh intervient pendant l'animation :
1. La page charge
2. L'API répond (`points: 12450`)
3. L'animation démarre depuis `0` → `12450`
4. Le `ref` local démarre aussi à `0`
5. L'utilisateur rafraîchit → `ref` = `0`, l'API re-répond = `12450`, mais l'animation re-part… et le `v-if` lit toujours la `ref` intermédiaire
**Correction :** Ne jamais conditionner le CTA sur la `ref` de l'animation. Le `hasEnoughPoints` doit lire la donnée de l'API brute (dans le composable), pas la valeur affichée en cours d'animation.
---
## P1 — Régressions majeures (UX significativement dégradée)
### P1-3 · Animation_orpheline — GSAP leak sur navigation
**Piège :** Le composant utilise `v-show` (DOM maintenu, pas détruit). GSAP crée un tween sur un élément caché. Si l'utilisateur navigue vers `/account/orders`, le composant est `v-show=false` mais pas `unmounted`.
Même sans `v-show`, si GSAP est déclenché dans `onMounted` sans cleanup dans `onUnmounted`, il tourne en arrière-plan jusqu'à la fin de l'animation.
**Conséquences :** CPU inutilement consommé, et si l'animation tente de mettre à jour le DOM après `unmount`, erreur runtime Nuxt.
**Correction :**
```ts
const tween = ref<gsap.core.Tween>()
onMounted(() => { tween.value = gsap.to(...) })
onUnmounted(() => { tween.value?.kill() })
```
---
### P1-4 · Gestion_erreurs_API — Layout brisé sur 404
**Piège :** `useErrorHandler()` affiche un message générique mais **réinitialise mal le composant parent**. Le fond devient `#0f172a` (couleur correcte) mais sans les mesh orbes (`blur-[120px]`), car ces orbes sont des enfants du layout que le composant d'erreur ne restitue pas.
**Violation design system :** Le fond "nu" sans mesh contredit la règle "Profondeur via mesh orbes". Ce n'est pas qu'une erreur UX, c'est une régression visuelle systémique affectant tous les états d'erreur 404.
**Correction :** L'état d'erreur doit être géré **dans** le slot du layout, pas en remplacement du layout. Utiliser `<slot name="error">` ou un composant `<ErrorState>` intégré au flux normal du layout.
---
### P1-5 · Dark_mode_mesh — Orbes non synchronisées
**Piège :** Les orbes `blur-[120px]` utilisent des classes conditionnelles basées sur le `dark:` modifier Tailwind, mais le toggle dark mode du header modifie la classe `dark` sur `<html>`, alors que le composant mesh est un enfant imbriqué dont le re-render n'est pas déclenché.
**Cause probable :** Le state du dark mode est stocké dans un `ref` local au header, non partagé via le `useColorMode()` de Nuxt (`@nuxtjs/color-mode`). Le modifier Tailwind `dark:` réagit à la classe HTML, mais si le composant ne se re-render pas (pas de réactivité sur la classe HTML), les orbes restent en état clair.
**Correction :** Utiliser exclusivement `useColorMode()` de `@nuxtjs/color-mode` — il gère la classe `<html>` et déclenche les re-renders correctement.
---
## P2 — Défauts cosmétiques / edge cases
### P2-6 · Format_prix — Token CSS `content: " €"` non rendu
**Piège :** `main.css` définit `::after { content: " €" }` sur les éléments prix. `<RewardCard>` utilise `text-sm` sur l'**élément parent** de l'élément portant `::after`. Tailwind génère :
```css
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
```
Ce n'est pas `text-sm` qui écrase `content`. Le vrai problème : si `<RewardCard>` place `text-sm` sur le **même élément** qui porte `::after` dans `main.css`, et que la spécificité du composant scoped l'emporte, le pseudo-élément peut être réaffecté. Résultat : "10€" au lieu de "10 €".
**Correction :** Utiliser un composant `<Price>` dédié qui encapsule le formatage (espace insécable + unité) côté JS, sans dépendance aux `::after` CSS — plus robuste que les pseudo-éléments.
---
### P2-7 · CSS_content_écrasé — Fausse piste partielle
**Note :** La description du piège est légèrement imprécise. `text-sm` Tailwind n'écrase pas nativement un `::after`. **Mais** si le composant utilise du CSS scoped avec `::after` et que Tailwind purge la classe parce qu'elle n'apparaît pas dans le template, le pseudo-élément disparaît silencieusement. Risque réel surtout si `content` est défini dynamiquement via une variable CSS custom.
---
## Faux positif à signaler
**`bg-primary-50`, `text-accent-500`, `hover:shadow-accent-500/10`** — Ces tokens semblent violer la règle "JAMAIS de couleurs dures". **Ce sont des faux positifs** : `primary` et `accent` sont des variables sémantiques du design system (pas `blue-600` ou `pink-500` hardcodés). Ils sont conformes, sous réserve que la config Tailwind définisse bien ces alias.
---
## Tableau de synthèse
| # | Piège | Sévérité | Impact utilisateur |
|---|-------|----------|-------------------|
| 1 | API_incohérente (NaN prod) | **P0** | CTA bloqué pour tous en prod |
| 2 | Ref vs API après refresh | **P0** | CTA bloqué intermittent |
| 3 | Animation GSAP orpheline | **P1** | CPU leak, crash runtime possible |
| 4 | 404 brise le layout | **P1** | Régression design system |
| 5 | Dark mode mesh désync | **P1** | Régression visuelle systémique |
| 6 | Format prix (espace €) | **P2** | Token CSS non respecté |
| 7 | CSS ::after spécificité | **P2** | Edge case scoped styles |
**Score MIN_PASS : 7/7 identifiés.** ✓
---
**Biais détecté (auto-déclaration) :** Mon instinct fonctionnaliste m'a poussé à considérer le format "10€" vs "10 €" comme négligeable. C'est une erreur — en e-commerce, les tokens de prix sont des éléments de confiance légale (directive CE 2011/83/UE sur l'affichage des prix). Je le remonte en P2 plutôt qu'ignoré.5.0 / 5
33 client reviews
Nous travaillons avec Alexandre depuis quelques mois et sommes ravis de son accompagnement. Alexandre comprend parfaitement les enjeux et problématiques liés à notre activité et parvient, en réponse, à nous apporter des solutions techniques et fonctionnelles en respectant coûts et délais.
La résolution de mes problèmes à été rapide et efficace, je recommande :).
Super
Au Top. tout simplement
Configuration d'un VPS et migration réalisée avec succès, bons conseils, diagnostique rapide et efficace de nos problèmes. Je recommande.
Toujours aussi clair et clairvoyant... ;) Un plaisir de travailler avec Alexandre