# Vulcan' Affûtage — Suivi du Rework v2

> Source de vérité unique du chantier. Format : `[ ]` à faire · `[~]` en cours · `[x]` fait.
> Plan complet : `C:\Users\kikit\.claude\plans\objectif-retravailler-en-snazzy-lerdorf.md`
> Dernière maj : 2026-07-02

## DA 2.0 — décisions
- Rebrand complet, **vert `#2D9446` en accent uniquement**, personnalité originale (pas d'IA slop).
- Direction retenue : **« Forge & acier volcanique »** — Vulcain (dieu du feu/forge) + volcans d'Auvergne.
  Neutres basalte/acier dominants, vert en ponctuation, ember (braise) en accent tertiaire rare.
- Typo : **Fraunces** (display, caractère) + **Inter** (corps/UI) + **IBM Plex Mono** (prix/specs/eyebrows).
- Hero prêt-vidéo (placeholder maintenant), signature = logo qui migre + ligne « fil de lame » animée.

---

## Pilier 0 — Fondations Git & branches
- [ ] `git init` + vérif `.gitignore`
- [ ] Commit baseline
- [ ] Modèle branches `main` / `develop` / `feat/*`
- [ ] Repo GitHub privé + push
- [ ] (0-bis) Pipeline deploy OVH FTP — **après hardening Pilier 8**

## Pilier 1 — Homepage v2 + Design System 2.0  ← EN ATTENTE DE VALIDATION
- [x] Design system 2.0 en tokens (`public/styles/ds-v2.css`)
- [x] Route `/newhomepage` (`AccueilController::indexV2`, name `app_accueil_v2`)
- [x] Bloc `{% block stylesheets %}` opt-in ajouté au `<head>` de `base.html.twig`
- [x] Template `newhomepage.html.twig` (hero + 6 sections vente)
- [x] Hero prêt-vidéo (placeholder + fallback) + animation logo/ligne « fil de lame »
- [x] Logo hero recoloré (`logo-va-green.svg` : noir→vert, gris→vert foncé)
- [x] Partial carte-produit réutilisable (`_product_card_v2.html.twig`)
- [x] JS page (`newhomepage.js`) : séquence hero, scroll-reveal, header sur hero, carrousel
- [x] Vérif desktop + mobile (Chrome DevTools) : 0 overflow, 0 erreur JS, `/` d'origine intacte
- [ ] **STOP — validation DA 2.0 par le proprio**  ← ON EST ICI

### Retours proprio — Round 2 (14 points, tous appliqués + vérifiés)
- [x] P1 Nom « Vulcan'Affûtage » lisible (clair) au-dessus du hero sombre
- [x] P2 Header mobile retravaillé : padding cohérent, burger arrondi/encadré, bordures calées
      sur le grand format sombre, fermeture des sous-menus + verrou de scroll à l'ouverture
- [x] P3 Hero : titres/sous-titre réduits, bouton « L'atelier » retiré, logo en blanc cassé fondu
      (`logo-va-cream.svg`, opacity 0.88)
- [x] P4 Copie hero franchement à droite + réduite (PC)
- [x] P5 Indicateur « Défiler » masqué sur mobile (ne chevauche plus les CTA)
- [x] P6 Cartes produit : titres 2 lignes max (+ tooltip), hauteurs égales (prix/bouton alignés)
- [x] P7 Icône ajout panier = panier + petit plus
- [x] P8 Titre forge → « Un atelier né de passion, de lame et de tranchant »
- [x] P9 Avis : carrousel témoignages 5★ + badge Google (placeholders — voir note ci-dessous)
- [x] P10 Contact : titre aligné à gauche, « Boutique & Atelier »
- [x] P11 Adresse cliquable (itinéraire Maps) + survol vert ; ligne téléphone cliquable ajoutée
- [x] P12 Horaires : Mardi–Vendredi / 9h–12h / 14h–19h (samedi retiré, filler retiré)
- [x] P13 Icône horaires = horloge (contour), plus le rond plein
- [x] P14 Bouton « Nous contacter » déplacé sous la carte

### Retours proprio — Round 3 (appliqués + vérifiés)
- [x] Burger mobile : plus de cadre, 3 barres blanches aux bouts arrondis (SVG rx)
- [x] Police « Vulcan'Affûtage » en Fraunces (header PC + menu mobile)
- [x] Hero PC : titre ~48px, sous-titre 0.88rem ; mobile : eyebrow 10px, titre ~34px, sous-titre 0.80rem
- [x] Hero PC : copie franchement à droite (padding droit réduit)
- [x] Hero mobile : padding-bottom ~25px
- [x] Icône ajout panier retravaillée (sac + plus centré, propre)
- [x] Survol adresse/tél : seule la valeur passe en vert (titre reste sombre)
- [x] Tabulation devant les horaires (9h / 14h)
- [x] Forge : « passion / lame / tranchant » en vert italique (comme « tranchant » du hero)

### Retours proprio — Round 4 (appliqués + vérifiés)
- [x] Menu mobile enfin défilable (override `.ovf-h` → overflow-y auto)
- [x] Bouton cookie passe sous le menu ouvert (remontée du contexte `.header-small`)
- [x] Croix de fermeture stylisée (pastille arrondie translucide + rotation au survol)
- [x] Logo hero : vert de retour (montage/bordure vert primaire + foncé), blancs lames/banderole en cassé
- [x] Ligne verte raccourcie + bord gauche arrondi ; ne pousse plus « Défiler »
- [x] Logo + ligne réduits (logo ~88px) pour matcher les composants de droite
- [x] Icône ajout panier = caddie simplifié + petit plus en haut à droite
- [x] Habillage des fonds : washes vert/braise + grain de métal (sections claires), halo derrière la box affûtage
- [x] Fix débordement horizontal (halo décoratif clippé via `overflow:hidden` sections)

### Retours proprio — Round 5 (appliqués + vérifiés)
- [x] Croix du menu mobile : plus de cadre — « X » aux bouts arrondis (barres pseudo, SVG masqué)
- [x] Icône ajout panier retravaillée : vrai caddie simplifié (panier + roues + anse) + petit « + » en haut à droite
- [x] Fonds plus présents (mais discrets) UNIQUEMENT sur « Pièces disponibles » (courbes de niveau
      haut-droite) et derrière la box « Service d'affûtage » (courbes + halo vert côté droit)
- [x] Bouton « retour en haut » recentré techniquement (bug iPhone) : grid place-items + reset apparence (icône dx/dy = 0)
- [x] Ligne verte du hero AGRANDIE + « Défiler » déplacé en bas-droite → plus de collision, 0 débordement

### Retours proprio — Round 6 (appliqués + vérifiés)
- [x] Ligne verte du hero rallongée encore (→ 560px) — signature franche, bord gauche arrondi, 0 débordement
- [x] Ronds retirés (courbes/halo « pas raccord ») → remplacés par un motif **arête de lame diagonale**
      coloré et moderne (vert de marque + liseré net, braise discrète sur affûtage), cohérent avec la
      ligne du hero et le « fil de lame » des cartes — sur « Pièces disponibles » et « Service d'affûtage »

### Retours proprio — Round 7 (appliqués + vérifiés)
- [x] Ligne hero encore rallongée (jusqu'à 760px sur large) + garde-fou `max-width: calc(100vw - 730px)`
      → ne rentre JAMAIS dans la copie/le bouton (gap mesuré 39px @1280, 437px @1920)
- [x] Bug d'ombre corrigé : `box-shadow` (suivait la boîte, bavait sur la partie transparente)
      remplacé par `filter: drop-shadow` (suit l'alpha du dégradé → la lueur s'éteint avec la ligne)
- [x] « Pièces disponibles » : trait retiré, nouveau style calme = nappe verte douce (coin haut-droite),
      sans trait ni rond, DIFFÉRENT de l'affûtage
- [x] « Service d'affûtage » : conservé + affiné (liseré « arête de lame » feutré, bicolore vert/braise)

### Retours proprio — Round 8 (appliqués + vérifiés)
- [x] « Défiler » recentré en bas du hero (la ligne vit plus haut → pas de collision même centré)
- [x] « Pièces disponibles » : traitement plus FRANC (champ vert marqué + large bande verte douce),
      plus timide, toujours sans trait ni rond, distinct de l'affûtage
- [x] « Service d'affûtage » : ligne retirée → MOTIF signature « gerbe d'étincelles » (rappel du geste
      d'affûtage) — fines traînées vert/braise + pointes lumineuses jaillissant de la meule (photo)

### Retours proprio — Round 9 (appliqués + vérifiés)
- [x] Bug « Défiler poussé » RÉGLÉ à la racine : le cap R7 ne visait que la copie ; nouveau garde-fou
      `max-width: min(calc(50vw - 226px), calc(100vw - 730px))` → la ligne s'arrête à gauche du Défiler
      CENTRÉ (81px d'écart @1280) ET de la copie. Prouvé : Défiler ne bouge pas pendant l'animation.
- [x] « Pièces disponibles » : « pustule » vert retiré → nappe verte LÉGÈRE unique (sobre)
- [x] « Service d'affûtage » : étincelles retirées → ligne « fil de la lame » remise sur la GAUCHE
      (trait vert, cap gauche arrondi, fond vers la droite — signature cohérente avec le hero)
- [x] Espacements vides réduits (`.nhp-section` padding 64-130 → 44-92 ; en-têtes 32-56 → 24-40)
      pour combler les grands blancs

### Retours proprio — Round 10 (appliqués + vérifiés)
- [x] Écart ligne/Défiler ÉLARGI (~120-140px mesuré) : cap `min(calc(50vw - 285px), calc(100vw - 745px))`
      + glow réduit (5→4px). Défiler prouvé immobile (position:absolute) — c'était la queue lumineuse
      qui le frôlait ; maintenant nette séparation.
- [x] « Service d'affûtage » : ligne horizontale remplacée par un trait vert DIAGONAL traversant le
      coin supérieur gauche seulement (masque radial ancré 0% 0%) — simple et efficace, comme avant

### À planifier (issu du round 2)
- **Avis Google en direct** : les avis affichés sont des PLACEHOLDERS. Intégration live via API
  Google Places (Place Details → reviews, 5★) = clé API + facturation → Pilier 3 (Avis Google).
- Images produits en 404 en local (normal : `/assets/product/{id}-1.jpg` absents en dev, fallback OK).

## Pilier 2 — Généraliser la DA 2.0
- [ ] Décliner tokens : listing, page produit, panier, compte, légal, admin
- [ ] Page produit : cases à taille dynamique (supprimer blancs latéraux)
- [ ] Listing produits : cartes fluides
- [ ] Compatibilité mobile + multi-navigateurs
- [ ] Consolider un seul partial carte-produit partout

## Pilier 3 — Modernisation fonctionnelle front
- [ ] Cookies modernisés + GA conditionné au consentement
- [ ] Carrousels modernisés (supprimer `carrousel_home.js` mort)
- [ ] Affichage produits dynamique (home + page produit)
- [ ] Derniers articles consultés + préférences (session storage)
- [ ] Avis Google revus

## Pilier 4 — Parcours d'achat + panier moyen
- [ ] Checkout invité / création de compte différée
- [ ] Modal upsell à l'ajout au panier
- [ ] Système compatibilité accessoires (`annexe_[type]`, compatible/incompatible, variantes couleur)

## Pilier 5 — Rework Admin (UX/UI + fonctionnel)
- [ ] Fix « Voir détails commande » (route/template admin dédiés)
- [ ] Modal de confirmation réutilisable (remplace `confirm()`/`alert()`)
- [ ] Suivi colis : transporteur La Poste + API maj auto ; clic n° = copie, edit = modifier
- [ ] Photo produit admin → visionneuse modale (carrousel + actions image)
- [ ] Header admin : icône compte → espace admin
- [ ] Footer admin dédié
- [ ] UX gestion produits/commandes

## Pilier 6 — Stats / analytics
- [ ] Séparation bot vs humain fiable
- [ ] Moderniser système visites + dashboard

## Pilier 7 — SEO automatique
- [ ] Sitemap dynamique
- [ ] JSON-LD par produit
- [ ] robots.txt Disallow privé/debug + téléphone schema

## Pilier 8 — Correctifs critiques prod & sécurité  ⚠️ GATE avant 1er deploy prod
- [ ] PayPal return_url/cancel_url depuis config/env
- [ ] Supprimer/gater routes debug (`/phpInfo`, `/info`, `/test-*`, `/capture-payment`, `/check-order`, `phpinfo.php`)
- [ ] `APP_ENV=prod` + rotation secrets + `PAYPAL_*` prod + `default_uri`
- [ ] Guards auth routes sous-protégées + durée session + GA consentement
- [ ] Pipeline deploy OVH FTP + stratégie migrations mutualisé

## Pilier 9 — Ateliers (DERNIER, dev-only, hors `main`)
- [ ] BDD Atelier / Créneau / Réservation (places max, anti-bot, suivi user)
- [ ] Système achat + gestion créneaux