# Logo vectoriel Livrets — Plan d'implémentation

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Créer le maître vectoriel `docs/branding/logo.svg` (concept « Tuiles quiz », fond navy) exactement conforme à la spec.

**Architecture:** Un unique fichier SVG autonome (rect, circle, path, stroke) — aucune police, aucune référence externe, palette limitée aux 5 couleurs de l'app.

**Tech Stack:** SVG 1.1, xmllint pour la validation.

## Global Constraints

- Livrable unique : `docs/branding/logo.svg` (spec : `docs/superpowers/specs/2026-08-31-logo-design.md`)
- ViewBox `0 0 128 128` ; aucun élément `<text>` ; aucune référence externe
- Couleurs autorisées (uniquement) : `#1D3557` `#457B9D` `#A8DADC` `#E63946` `#F1FAEE`
- Géométrie verbatim de la spec §3 (carte rx 28 ; tuiles 42×42 rx 12 à (18,18)/(68,18)/(18,68)/(68,68) ; glyphes aux coordonnées indiquées)

---

### Task 1: Créer et valider `docs/branding/logo.svg`

**Files:**
- Create: `docs/branding/logo.svg`

**Interfaces:**
- Consumes: rien (actif autonome)
- Produces: `docs/branding/logo.svg`, maître vectoriel réutilisable pour les futurs exports icônes

- [ ] **Step 1: Créer le fichier SVG**

Contenu complet (conforme spec §3) :

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 128 128" role="img" aria-labelledby="title">
  <title id="title">Livrets — entraînement aux tables de multiplication</title>
  <rect x="4" y="4" width="120" height="120" rx="28" fill="#1D3557"/>
  <rect x="18" y="18" width="42" height="42" rx="12" fill="#A8DADC"/>
  <rect x="68" y="18" width="42" height="42" rx="12" fill="#E63946"/>
  <rect x="18" y="68" width="42" height="42" rx="12" fill="#F1FAEE"/>
  <rect x="68" y="68" width="42" height="42" rx="12" fill="#457B9D"/>
  <path d="M29,28 L49,28 L36,50" fill="none" stroke="#1D3557" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M81,31 L97,47 M97,31 L81,47" fill="none" stroke="#F1FAEE" stroke-width="6.5" stroke-linecap="round"/>
  <circle cx="39" cy="82.75" r="5.5" fill="#1D3557"/>
  <circle cx="39" cy="93.25" r="7.5" fill="#1D3557"/>
  <path d="M81,81 C81,73 97,73 97,81 C97,86.5 89,86.5 89,93 L89,95.5" fill="none" stroke="#F1FAEE" stroke-width="6" stroke-linecap="round"/>
  <circle cx="89" cy="102.5" r="3.4" fill="#F1FAEE"/>
</svg>
```

- [ ] **Step 2: Valider le XML et les contraintes**

```bash
xmllint --noout docs/branding/logo.svg        # attendu : aucune sortie (bien formé)
grep -c "<text" docs/branding/logo.svg        # attendu : 0
grep -oE "#[0-9A-Fa-f]{6}" docs/branding/logo.svg | sort -u
# attendu exactement : #1D3557 #457B9D #A8DADC #E63946 #F1FAEE
grep -cE "http" docs/branding/logo.svg        # attendu : 1 (namespace xmlns uniquement)
```

- [ ] **Step 3: Contrôle visuel**

Pousser l'écran companion (`logo-final.html`) : rendu à 512, 150 et 44 px + URL du fichier. Vérifier la conformité avec la maquette B2 validée (tuiles, glyphes, couleurs).

- [ ] **Step 4: Commit**

```bash
git add docs/branding/logo.svg
git commit -m "feat: logo vectoriel tuiles quiz fond navy"
```