# Pages 2.0 Vulcan'Affûtage — Spec de conception

Date : 2026-07-03
Statut : approuvé (owner "Go")
DA de référence : « Forge & acier volcanique » (DA 2.0), déjà validée sur `/newhomepage`.

## Objectif

Décliner la DA 2.0 sur toutes les pages du site, en **pages neuves parallèles** (`newX`),
sans toucher au front/back des pages standard. Ces pages sont des candidates de remplacement :
si le client valide, elles remplaceront les pages actuelles ; sinon on garde l'existant.
Tout doit être **complet et fonctionnel** (backend réel), pas des maquettes mortes.

## Principe non-destructif

- **Nouvelles routes** ajoutées aux contrôleurs existants (modèle `AccueilController::indexV2`).
  Aucune route/route-name existante modifiée.
- **Nouveaux templates** miroir de `accueil/newhomepage.html.twig`, chacun `extends base.html.twig`.
- **Header / footer / burger / cookie / back-to-top** hérités de `base.html.twig`, déjà restylés
  par `ds-v2.css` → cohérence DA 2.0 gratuite sur toutes les pages neuves.
- **Assets neufs** : `public/styles/ds-v2-pages.css` + `public/scripts/ds-v2-app.js`,
  chargés uniquement sur les pages neuves (blocs `stylesheets` / `other_javascripts`).
  `ds-v2.css` d'origine **non modifié** (protège la home validée). Réutilise les atomes `nhp-`
  (btn, eyebrow, section, wrap, h2, reveal). Nouvelles classes préfixées par section
  (`aff-`, `prd-`, `pnr-`, `chk-`, `acc-`, `pres-`).

## Seule édition sur du partagé : le header

Sur demande owner : ajouter une entrée nav **« Affûtage »** entre *Présentation* et *Nos Produits*,
dans `base.html.twig` (nav desktop `header-big` **et** nav mobile `header-small`).
Cible : route neuve `app_affutage_v2` (`/newaffutage`) — seule page d'affûtage existante.
Lien direct **temporaire** (préviewer la V2). Bloc `{% block headerAffutage %}` pour l'état actif.
Les autres entrées nav restent vers les routes standard.

## Routes & fichiers

| Page | Route | Route name | Template |
|---|---|---|---|
| Présentation | `/newpresentation` | `app_presentation_v2` | `presentation/newpresentation.html.twig` |
| Affûtage (neuve) | `/newaffutage` | `app_affutage_v2` | `affutage/newaffutage.html.twig` |
| Produits (liste) | `/newproduit/{filtre?}/{typeCouteau?}/{detailProduit?}` | `app_produits_v2` | `produits/newproduits.html.twig` |
| Produit (détail) | `/newproduit-detail/{id}` | `app_produit_v2` | `produits/newproduit.html.twig` |
| Compte (hub) | `/newcompte` | `app_compte_v2` | `compte/newindex.html.twig` |
| Compte (infos) | `/newcompte-informations` | `app_information_compte_v2` | `compte/newinformations.html.twig` |
| Compte (commandes) | `/newcompte-commandes` | `app_commande_v2` | `compte/newcommande.html.twig` |
| Panier | `/newpanier` | `app_panier_v2` | `panier/newindex.html.twig` |
| Paiement / checkout | `/newpaiement` | `app_paiement_v2` | `panier/newpaiement.html.twig` |

Le contrôleur AffutageController est neuf (`src/Controller/AffutageController.php`).
Les autres routes s'ajoutent aux contrôleurs existants.

## Contenu par page

### newpresentation
Reskin fidèle : hero (eyebrow + h1 « Présentation & histoire »), À propos + photo boutique,
Notre histoire (1981 Renard → reprise Prudent 2024), presse « Le Petit Gourmet ».
Sections `nhp-section` alternées, `em` accentués, reveal au scroll.

### newaffutage (neuve) — 6 blocs
1. **Hero** — eyebrow « Service d'affûtage · Depuis 1981 », h1 « Redonnez vie à vos lames. »,
   sous-titre, CTA « Demander un affûtage » (→ contact standard) + « Voir les tarifs » (ancre).
2. **Méthode & machine** — méthode traditionnelle + machine spéciale qui *fixe* l'affûtage,
   secret d'atelier faisant la renommée de Vulcan (on n'en dévoile pas le fonctionnement).
   Texte + visuel, élément « secret » stylisé.
3. **Tarifs** — cards forge (icône lame + libellé + prix FR). Données fournies, en dur :
   - Couteaux de poche — **3,50 €**
   - Couteaux (autres) — **5,00 €**
   - Ciseaux — **7,00 €**
   - Ciseaux de coiffure — **15,00 €**
   - Gravure sur lame — **10,00 €**
4. **Timeline atelier** — « Comment ça se passe » : Étape 1 / 2 / 3, numéros, connecteurs,
   accent volcanique. Copie **placeholder**, données adaptées plus tard (client).
5. **Avant / Après** — comparateur 2 images même format, poignée centrale draggable.
   Images placeholder jusqu'aux vraies photos.
6. **Bande CTA** — « Confiez-nous vos lames » → contact.

### newproduits (liste)
Reskin de `produits/index`. **Tous les filtres conservés** (type produit, type couteau,
variantes, toggle dispo). Grille via `_product_card_v2`. Cartes → `newproduit-detail/{id}`.
Nouvelle méthode contrôleur réutilisant la même query.

### newproduit (détail)
Reskin de `produits/produit`. Galerie multi-images (range comme l'original),
fiche (libellé, description, prix, état/dispo), bouton **ajouter au panier** (route réelle),
specs. Lien retour → newproduits.

### newcompte ×3
- **Hub** : salutation horaire, états connecté / déconnecté, menu (commandes / infos / déco
  ou connexion / inscription — routes standard pour l'auth).
- **Infos** : identité + email + « modifier mot de passe » (route standard).
- **Commandes** : liste réelle (logique `CompteController::commande`).
Nav interne compte → routes neuves compte ; auth (login/register/logout/reset) → standard.

### newpanier
Reskin cart : lignes (image, libellé, prix, suppression via route réelle), total,
modes de livraison, suggestions (`otherProduct`), CTA « Paiement » → newpaiement,
« Continuer mes achats » → newproduits.

### newpaiement (= « achat dans panier »)
Reskin de l'étape paiement : récap commande, choix livraison, PayPal
(réutilise `PaymentController`). Respecte le flux existant (inscription/activation avant paiement).

## Câblage des liens

- **Nav header/footer partagés** → routes **standard** (+ nouvelle entrée Affûtage → newaffutage).
- **CTA du funnel V2** → **pages neuves** entre elles
  (newproduits → newproduit/{id} → newpanier → newpaiement) : parcours 2.0 testable de bout en bout.
- **Actions backend** (ajout/suppression panier, paiement, auth) → routes réelles existantes.

## Composants JS (`ds-v2-app.js`)

- **reveal-on-scroll** (IntersectionObserver, réutilise le motif `.nhp-reveal`).
- **comparateur avant/après** : drag pointer + flèches clavier, aria, pas de librairie externe.
- **galerie produit** : sélection image active (thumbnails → image principale).
- Init idempotente, chargé `defer` seulement sur pages neuves.

## Base de données

Aucune migration prévue : tarifs/timeline en dur (données adaptées ultérieurement),
le reste réutilise `Produit` / `Commande` / `Livraison` / panier session.
Si un manque apparaît (surtout au checkout), **prévenir l'owner avant** toute modif de schéma.

## Périmètre exclu

Pas de version neuve de : login, register, edit-password, legal (CGU/CGV/ML), contact, admin, factures.
(Reconfirmé avec l'owner.)

## Contrôles (definition of done, par page)

Via Chrome DevTools MCP, mobile ~390px **et** desktop 1280/1920 :
- zéro overflow horizontal ;
- zéro erreur console ;
- DA 2.0 cohérente (header/footer restylés, typo, couleurs, motifs) ;
- liens du funnel V2 corrects, actions backend fonctionnelles.
Rapport page par page, puis feu vert owner pour test manuel.

## Séquence de build

1. Assets socle : `ds-v2-pages.css` + `ds-v2-app.js` (squelette).
2. Header partagé : entrée nav « Affûtage » (desktop + mobile) + bloc actif.
3. newpresentation (le plus simple, valide le pattern).
4. newproduits + newproduit (détail) — funnel amont.
5. newpanier + newpaiement — funnel aval.
6. newcompte ×3.
7. newaffutage (composants riches : tarifs, timeline, comparateur).
8. Contrôles Chrome DevTools page par page + rapport.