j.foucher
f9192631ff
- BRIEF-Claude-Code.md: Claude Code start brief (13 sections) - 2 PDF deliverables: Strategie & Contenu (84p) + Design Handoff (31p) - README.md: project overview, local setup, structure, conventions - MISSING-ASSETS.md: live tracker for missing media (hero video, photos, logos) - .gitignore: excludes ThirdParty/ (commercial plugin ZIPs), PDF text extracts, WP runtime Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
466 lines
21 KiB
Markdown
466 lines
21 KiB
Markdown
# Brief Claude Code — Refonte asterionvr.com (Bricks Builder + WordPress)
|
|
|
|
> Ce document est le brief de démarrage à donner à Claude Code au lancement du projet. Il contient tout ce que Claude Code doit savoir pour commencer efficacement, sans aller-retour avec le client.
|
|
|
|
---
|
|
|
|
## 0. État de départ — IMPORTANT, lis en premier
|
|
|
|
**Tu démarres sur une feuille blanche en local.** Concrètement :
|
|
|
|
- L'environnement de travail est une **installation WordPress fraîche dans LocalWP** sur la machine du client (Jérôme). Domaine local : `asterion-2026.local`.
|
|
- **Aucun code custom n'existe encore.** Pas de child theme, pas de custom post type, pas de contenu, pas d'images, pas de tokens CSS. Le `wp-content/themes/` ne contient que les thèmes par défaut WordPress (Twenty Twenty-Five, etc.) et le **thème Bricks parent**, déjà installé et activé manuellement par Jérôme.
|
|
- **Ne cherche pas de codebase à explorer.** Si tu fais `ls` sur `wp-content/themes/`, tu verras Bricks et les thèmes WP par défaut, rien d'autre. Si tu fais `ls` sur le dossier où ce brief vit, tu trouveras seulement les deux `.docx` de référence et ce fichier `BRIEF-Claude-Code.md`. Il n'y a **aucun lien avec le site live asterionvr.com** : ne tente pas de le scraper, de l'inspecter, de t'y connecter en SSH/SFTP, ni d'en télécharger des contenus. Le site live continue de tourner sur sa propre infra et reste intouché jusqu'au jour de la bascule (phase ultérieure, hors scope).
|
|
- **Ton point de départ est : créer le scaffold du child theme `asterion-bricks` à partir de zéro.** C'est la première chose que tu écris. Tout le reste s'appuie sur ce scaffold.
|
|
- **Les deux livrables `.docx`** (Stratégie & Contenu + Design Handoff) sont les seules sources de vérité externes. Lis-les via `pandoc fichier.docx -o /tmp/fichier.md` avant de commencer à coder. Ils contiennent toute la spec design et tout le contenu rédactionnel à utiliser.
|
|
|
|
### Ce que Jérôme (humain) a fait avant de te donner ce brief
|
|
|
|
- ✅ Installé LocalWP et créé le site `asterion-2026.local` avec WordPress dernière version.
|
|
- ✅ Uploadé et activé le thème **Bricks Builder** parent (license achetée, ZIP fourni par le vendor).
|
|
- ✅ Installé le plugin **WPML** (license achetée).
|
|
|
|
### Ce que tu (Claude Code) vas faire
|
|
|
|
- 🔨 Créer le child theme `asterion-bricks` complet, scaffold + tokens + composants + templates.
|
|
- 🔨 Construire la home en premier, puis les autres templates dans l'ordre indiqué en section 7.
|
|
- 🔨 Créer les Custom Post Types `case_study` et `scenario`.
|
|
- 🔨 Configurer Bricks (réglages globaux, registres de classes, conditions de templates) via les fichiers du child theme et via l'admin WP.
|
|
- 🔨 Saisir le contenu textuel anglais des pages clés (depuis le livrable 1, section D) directement dans WordPress, page par page.
|
|
- 🔨 Versionner le tout sous Git (repo local pour démarrer).
|
|
|
|
### Ce que tu (Claude Code) ne fais PAS
|
|
|
|
- ❌ Pas de production prod, pas de DNS, pas de CDN, pas de Cloudflare, pas de migration depuis le site live actuel.
|
|
- ❌ Pas d'installation de Bricks ou de WPML — c'est fait. Si tu as besoin d'une nouvelle license Bricks ou d'un plugin payant, demande à Jérôme.
|
|
- ❌ Pas de traduction FR — ça vient après, via le linguiste interne du client.
|
|
- ❌ Pas de création de blog posts éditoriaux — phase post-launch.
|
|
|
|
### Si tu es bloqué dès le départ
|
|
|
|
Si tu lances `ls` ou `find` et que tu es perplexe parce que rien n'existe, **c'est normal**. Lis ce brief, lis les deux `.docx`, puis commence par `mkdir wp-content/themes/asterion-bricks && cd wp-content/themes/asterion-bricks && touch style.css functions.php` et déroule la section 4.
|
|
|
|
---
|
|
|
|
## 1. Contexte projet
|
|
|
|
**Client** : Asterion VR — entreprise française basée à Montgermont (35), fondée en 2016. Concepteur et éditeur de **PROSERVE**, plateforme XR (réalité étendue) modulaire pour la formation des forces de sécurité : police nationale et municipale, forces spéciales, militaires, pompiers et services d'urgence.
|
|
|
|
**Mission** : refonte complète du site web asterionvr.com. Le site actuel est sur WordPress + Avada (page builder Fusion), daté visuellement, sans contenu éditorial, sans tunnel de génération de leads, sans pages segmentées par cible.
|
|
|
|
**Résultat attendu** : un site moderne, tactical-cinematic, mobile-first, avec arborescence segmentée par cible, tunnel de leads à trois CTA (Demo / T&E / Quote), blog éditorial, études de cas, conformité RGPD, performance Lighthouse 90+, accessibilité WCAG 2.1 AA.
|
|
|
|
---
|
|
|
|
## 2. Documents de référence (à lire avant de coder)
|
|
|
|
Deux livrables stratégie + design ont déjà été produits. **Lis-les en priorité avant tout travail technique** :
|
|
|
|
1. `Asterion-VR_Refonte-2026_Strategie-et-Contenu.docx` — 84 pages, contient :
|
|
- Audit du site actuel et benchmark concurrentiel (HG XR, Operator XR, VRTS, V-Armed)
|
|
- Stratégie de positionnement, personas, parcours utilisateur, SEO
|
|
- Nouvelle arborescence complète (~35 pages, structure d'URL, mega-menus)
|
|
- **Contenu prêt-à-publier en anglais pour chaque page du site** (29 pages détaillées)
|
|
- Calendrier blog 12 mois, lead magnets, tunnel de nurture
|
|
|
|
2. `Asterion-VR_Refonte-2026_Design-Handoff-Specification.docx` — 31 pages, contient :
|
|
- Brand identity (voice, tone, naming, signatures)
|
|
- Design tokens (palette, typographie, spacing, radii, shadows, z-index)
|
|
- Bibliothèque de composants UI (boutons, formulaires, cartes, navigation, modals…)
|
|
- Wireframes textuels des 7 templates de page
|
|
- Motion, responsive, accessibilité, notes d'implémentation
|
|
|
|
**Pour lire les .docx** : `pandoc fichier.docx -o fichier.md` puis lire le Markdown. Ces deux documents sont la source de vérité pour le contenu, l'architecture et le design system. **Ne rien réinventer** s'ils contiennent déjà la réponse.
|
|
|
|
---
|
|
|
|
## 3. Stack technique imposée
|
|
|
|
- **CMS** : WordPress 6.x (dernière stable)
|
|
- **Builder** : **Bricks Builder** (thème premium, license achetée par le client)
|
|
- **Architecture** : un **child theme** custom nommé `asterion-bricks` qui hérite de Bricks
|
|
- **Environnement local** : **LocalWP** (Flywheel) — installation WordPress local sur la machine du client
|
|
- **Versioning** : Git, repo local au démarrage, push vers GitLab/GitHub privé une fois la base stable
|
|
- **Multilingue** : **WPML** (anglais comme langue principale, français en seconde)
|
|
- **Hébergement cible** (production) : OVHcloud Managed WordPress ou O2switch (français, RGPD-natif)
|
|
- **CDN cible** : Cloudflare devant la prod
|
|
- **Analytics** : Plausible (RGPD-natif, sans cookie consent) — à intégrer en fin de projet
|
|
|
|
---
|
|
|
|
## 4. Setup initial (rappel : LocalWP + WordPress + Bricks + WPML sont déjà en place — cf. section 0)
|
|
|
|
Tu démarres dans le dossier `wp-content/themes/` du site local. Bricks parent est déjà là, activé. Ta première action est de créer le child theme :
|
|
|
|
```bash
|
|
# 1. Se placer dans le dossier des thèmes du site local
|
|
cd /chemin/vers/LocalWP/asterion-2026/app/public/wp-content/themes
|
|
|
|
# 2. Créer le child theme
|
|
mkdir asterion-bricks
|
|
cd asterion-bricks
|
|
|
|
# 3. Initialiser Git
|
|
git init
|
|
|
|
# 4. Créer le scaffold de base (style.css avec en-tête WP, functions.php, etc.)
|
|
# (À développer selon la structure ci-dessous)
|
|
|
|
# 5. Activer le child theme via l'admin WP > Apparence > Thèmes
|
|
```
|
|
|
|
**Structure du child theme** à créer :
|
|
|
|
```
|
|
wp-content/themes/asterion-bricks/
|
|
├── style.css # En-tête WP + import des tokens
|
|
├── functions.php # Hooks, registers, custom queries
|
|
├── theme.json # Tokens globaux (Gutenberg + Bricks)
|
|
├── /assets/
|
|
│ ├── /css/
|
|
│ │ ├── tokens.css # Variables CSS (couleurs, type, spacing)
|
|
│ │ ├── components.css # Styles composants
|
|
│ │ └── utilities.css # Helpers
|
|
│ ├── /js/
|
|
│ │ └── main.js # Animations, scroll, microinteractions
|
|
│ ├── /fonts/ # Inter / Inter Display (self-hosted, RGPD)
|
|
│ └── /img/ # Visuels statiques
|
|
├── /templates/ # Templates Bricks exportés en JSON
|
|
│ ├── home.json
|
|
│ ├── solution-my-proserve.json
|
|
│ ├── industry-police.json
|
|
│ └── ...
|
|
├── /inc/
|
|
│ ├── cpt.php # Custom post types (case-study, scenario, insight)
|
|
│ ├── acf.php # ACF Pro field groups (si licensé)
|
|
│ └── seo.php # Schema.org Organization, Product, Article
|
|
└── README.md # Doc projet
|
|
```
|
|
|
|
**Plugins indispensables à installer** :
|
|
|
|
- **WPML Multilingual CMS** + WPML String Translation
|
|
- **Yoast SEO** ou **Rank Math** (Rank Math préféré — meilleur free tier)
|
|
- **Advanced Custom Fields Pro** (pour les CPT case-study, scenario, etc.)
|
|
- **Custom Post Type UI** (si pas d'ACF Pro)
|
|
- **WP Migrate Lite** (pour synchroniser local ↔ staging plus tard)
|
|
- **Redirection** (pour le plan de 301 du jour J)
|
|
- **Wordfence** ou **Solid Security** (sécurité)
|
|
- **Plausible Analytics** (en fin de projet, après go-live)
|
|
|
|
---
|
|
|
|
## 5. Design tokens (à coder dans `tokens.css`)
|
|
|
|
Référence complète dans le livrable 2 (Design Handoff). Synthèse pour démarrage immédiat :
|
|
|
|
```css
|
|
:root {
|
|
/* === BRAND COLORS === */
|
|
--color-brand-navy: #0B1F3A;
|
|
--color-brand-navy-deep: #081427;
|
|
--color-brand-gold: #C9A45A;
|
|
--color-brand-gold-soft: #E0C892;
|
|
--color-alert-red: #C8102E;
|
|
|
|
/* === NEUTRALS === */
|
|
--color-text-primary: #0B1F3A;
|
|
--color-text-secondary: #3E4C5E;
|
|
--color-text-muted: #6B7785;
|
|
--color-text-on-dark: #FFFFFF;
|
|
--color-text-on-dark-muted: #B6BFCC;
|
|
--color-bg-default: #FFFFFF;
|
|
--color-bg-subtle: #F5F7FA;
|
|
--color-bg-elevated: #FFFFFF;
|
|
--color-bg-dark: #0B1F3A;
|
|
--color-bg-dark-elevated: #13294B;
|
|
--color-border-default: #CCD3DC;
|
|
--color-border-subtle: #E5E9EE;
|
|
--color-border-on-dark: #1F3252;
|
|
|
|
/* === SEMANTIC === */
|
|
--color-success: #1F8B4C;
|
|
--color-warning: #C29327;
|
|
--color-error: #C8102E;
|
|
--color-info: #1E5BA8;
|
|
|
|
/* === TYPOGRAPHY === */
|
|
--font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
|
|
--text-display-xl: 4.5rem; /* 72px - hero signature */
|
|
--text-display-lg: 3.5rem; /* 56px - product hero */
|
|
--text-display-md: 2.75rem; /* 44px - section H2 */
|
|
--text-h1: 2.25rem; /* 36px */
|
|
--text-h2: 1.75rem; /* 28px */
|
|
--text-h3: 1.375rem; /* 22px */
|
|
--text-h4: 1.125rem; /* 18px */
|
|
--text-body-lg: 1.25rem; /* 20px - lead */
|
|
--text-body-md: 1rem; /* 16px - default */
|
|
--text-body-sm: 0.875rem; /* 14px */
|
|
--text-overline: 0.75rem; /* 12px - eyebrow */
|
|
|
|
/* === SPACING (8-pt grid) === */
|
|
--space-1: 0.25rem; /* 4px */
|
|
--space-2: 0.5rem; /* 8px */
|
|
--space-3: 0.75rem; /* 12px */
|
|
--space-4: 1rem; /* 16px */
|
|
--space-5: 1.25rem; /* 20px */
|
|
--space-6: 1.5rem; /* 24px */
|
|
--space-8: 2rem; /* 32px */
|
|
--space-10: 2.5rem; /* 40px */
|
|
--space-12: 3rem; /* 48px */
|
|
--space-16: 4rem; /* 64px */
|
|
--space-20: 5rem; /* 80px */
|
|
--space-24: 6rem; /* 96px */
|
|
--space-32: 8rem; /* 128px */
|
|
|
|
/* === RADII === */
|
|
--radius-none: 0;
|
|
--radius-sm: 2px;
|
|
--radius-md: 4px;
|
|
--radius-lg: 8px;
|
|
--radius-pill: 9999px;
|
|
--radius-full: 50%;
|
|
|
|
/* === SHADOWS === */
|
|
--shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.05);
|
|
--shadow-sm: 0 2px 4px rgba(11, 31, 58, 0.08), 0 1px 2px rgba(11, 31, 58, 0.06);
|
|
--shadow-md: 0 4px 12px rgba(11, 31, 58, 0.10), 0 2px 4px rgba(11, 31, 58, 0.06);
|
|
--shadow-lg: 0 12px 24px rgba(11, 31, 58, 0.14), 0 4px 8px rgba(11, 31, 58, 0.08);
|
|
--shadow-glow-gold: 0 0 24px rgba(201, 164, 90, 0.35);
|
|
|
|
/* === MOTION === */
|
|
--ease-default: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--duration-fast: 150ms;
|
|
--duration-default: 250ms;
|
|
--duration-slow: 400ms;
|
|
|
|
/* === LAYOUT === */
|
|
--container-max: 1280px;
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
```
|
|
|
|
**Police Inter** : self-host les fichiers WOFF2 dans `/assets/fonts/` plutôt que charger Google Fonts (RGPD — Google Fonts CDN partage l'IP des visiteurs avec Google).
|
|
|
|
---
|
|
|
|
## 6. Arborescence du site (à implémenter)
|
|
|
|
```
|
|
/ (home)
|
|
/solutions/ (gamme overview)
|
|
/solutions/my-proserve/ (solo)
|
|
/solutions/proserve-flex/ (team 1-5)
|
|
/solutions/proserve-academy/ (unit 1-16)
|
|
/solutions/customization/ (PROSERVE+)
|
|
/industries/police/
|
|
/industries/special-forces/
|
|
/industries/military/
|
|
/industries/firefighters/
|
|
/technology/ (overview)
|
|
/technology/vr-hardware/
|
|
/technology/software-ai/
|
|
/technology/weapons-tracking/
|
|
/technology/scenarios/
|
|
/technology/instructor-cockpit/
|
|
/technology/after-action-review/
|
|
/customers/ (case studies hub)
|
|
/customers/[slug]/ (CPT: case-study)
|
|
/why-asterion/
|
|
/about/
|
|
/trust/ (compliance, sovereignty, GDPR)
|
|
/insights/ (blog hub)
|
|
/insights/[slug]/ (CPT: post natif WP)
|
|
/resources/ (datasheets, whitepapers)
|
|
/partners/
|
|
/request-demo/
|
|
/request-te-kit/
|
|
/request-quote/
|
|
/contact/
|
|
/legal/privacy/
|
|
/legal/terms/
|
|
/legal/cookies/
|
|
/legal/notice/
|
|
```
|
|
|
|
**Custom Post Types à créer** dans `inc/cpt.php` :
|
|
|
|
- `case_study` — slug `customers`, archive activée, supports : title, editor, thumbnail, custom-fields
|
|
- `scenario` — slug `scenarios`, supports : title, editor, thumbnail, custom-fields
|
|
- (Les blog posts utilisent le CPT `post` natif WordPress)
|
|
|
|
---
|
|
|
|
## 7. Templates de page (priorité d'implémentation)
|
|
|
|
Sept templates couvrent tout le site (détail des wireframes en section 4 du livrable 2). À construire dans cet ordre :
|
|
|
|
| Priorité | Template | Pages affectées |
|
|
|----------|----------|------------------|
|
|
| 1 | `home` | / |
|
|
| 2 | `solution-detail` | 4 pages /solutions/* |
|
|
| 3 | `industry-detail` | 4 pages /industries/* |
|
|
| 4 | `technology-detail` | 6 pages /technology/* |
|
|
| 5 | `case-study-detail` | n pages /customers/* |
|
|
| 6 | `blog-post-detail` | n articles /insights/* |
|
|
| 7 | `conversion-form` | /request-demo, /request-te-kit, /request-quote |
|
|
|
|
Plus deux templates partagés : `default-page` (pour about, why, trust, contact, legal) et `archive-list` (pour /customers/, /insights/, /resources/).
|
|
|
|
---
|
|
|
|
## 8. Première mission concrète
|
|
|
|
**Construis la home.** C'est le template qui exerce le plus de composants — une fois la home livrée, les autres pages sont des permutations.
|
|
|
|
Étapes attendues :
|
|
|
|
1. Setup du child theme (`style.css`, `functions.php`, `theme.json`).
|
|
2. Création de `tokens.css` avec toutes les variables ci-dessus.
|
|
3. Self-host des fonts Inter + Inter Display dans `/assets/fonts/` (récupérer les WOFF2 sur rsms.me/inter).
|
|
4. Création des composants de base en CSS pour Bricks (boutons, cartes, header, footer).
|
|
5. Construction de la home dans Bricks en suivant exactement le wireframe section 4.1 du livrable 2 (9 sections : Hero / Trust bar / Solutions / Industries / Feature heroes / Case study / Testimonials / Insights / Conversion banner + Footer).
|
|
6. Le contenu textuel anglais à utiliser est dans le livrable 1, section D.1 (Homepage).
|
|
7. Export du template Bricks en JSON dans `/templates/home.json` pour permettre la versionnage.
|
|
8. Tests Lighthouse mobile + desktop (cible : 90+ Performance).
|
|
9. Test accessibilité avec axe DevTools (zéro violations critique).
|
|
10. Test mobile-first sur 375px, 640px, 768px, 1280px, 1920px.
|
|
|
|
**Critères d'acceptation home** :
|
|
|
|
- Lighthouse mobile : Performance ≥ 85, Accessibility ≥ 95, Best Practices ≥ 90, SEO ≥ 95.
|
|
- Lighthouse desktop : Performance ≥ 90, autres ≥ 95.
|
|
- Hero vidéo en boucle silencieuse, autoplay, fallback poster image, < 2 Mo.
|
|
- Trois CTAs distincts (Demo / T&E / Quote) accessibles depuis le footer dark.
|
|
- Navigation header sticky avec mega-menu sur Solutions / Industries / Technology.
|
|
- Tous les textes en anglais (la version FR sera ajoutée après via WPML).
|
|
- Aucune valeur de couleur, taille de typo, ou spacing en dur dans le code — uniquement via les variables CSS du `tokens.css`.
|
|
|
|
---
|
|
|
|
## 9. Conventions de code
|
|
|
|
**Nommage CSS** : BEM-light. Exemple :
|
|
|
|
```css
|
|
.btn { /* base */ }
|
|
.btn--primary { /* variant */ }
|
|
.btn--large { /* size variant */ }
|
|
.btn__icon { /* element */ }
|
|
.btn.is-loading { /* state */ }
|
|
```
|
|
|
|
**Préfixe** : tous les sélecteurs custom préfixés par `av-` (asterion-vr) pour éviter collision avec Bricks. Exemple : `.av-hero`, `.av-card-product`.
|
|
|
|
**JavaScript** : vanilla JS d'abord, pas de framework côté front. Charger en `defer`. Modules ES6 si nécessaire.
|
|
|
|
**Images** : AVIF first, WebP fallback, JPG fallback final. Lazy-loading natif (`loading="lazy"`) sauf hero. Toujours alt text descriptif, jamais vide sauf décoratif (alt="" + role="presentation").
|
|
|
|
**Vidéos** : MP4 H.264 + WebM VP9. Autoplay muted plays-inline loop. Poster image obligatoire.
|
|
|
|
**Accessibilité** : zéro violation critique axe-core. Focus visible sur tout interactif. Skip link en première position. Contraste 4.5:1 minimum.
|
|
|
|
**Performance budget** :
|
|
|
|
- HTML initial < 100 KB gzipped
|
|
- CSS total < 50 KB gzipped
|
|
- JS initial bundle < 200 KB gzipped
|
|
- Hero video < 2 MB
|
|
- Hero poster < 150 KB
|
|
- LCP < 2.5s, CLS < 0.1, TBT < 200ms
|
|
|
|
---
|
|
|
|
## 10. Workflow Git
|
|
|
|
```bash
|
|
# Au démarrage
|
|
cd wp-content/themes/asterion-bricks
|
|
git init
|
|
git add .
|
|
git commit -m "chore: initial child theme scaffold"
|
|
|
|
# Branche par template/page
|
|
git checkout -b feat/home
|
|
# ... travail ...
|
|
git commit -m "feat(home): hero section + tokens"
|
|
git commit -m "feat(home): trust bar"
|
|
git commit -m "feat(home): solutions cards"
|
|
|
|
# Une fois la home complète et validée :
|
|
git checkout main
|
|
git merge feat/home
|
|
|
|
# Push vers le remote (à configurer plus tard)
|
|
git push origin main
|
|
```
|
|
|
|
**Convention de commits** : Conventional Commits (`feat:`, `fix:`, `chore:`, `style:`, `refactor:`, `test:`, `docs:`).
|
|
|
|
**Ne jamais commiter** : `wp-config.php`, dossiers `uploads/`, fichiers `.env`, mots de passe, ou toute clé API. `.gitignore` recommandé :
|
|
|
|
```
|
|
node_modules/
|
|
wp-config.php
|
|
.env
|
|
.DS_Store
|
|
uploads/
|
|
debug.log
|
|
*.sql
|
|
```
|
|
|
|
---
|
|
|
|
## 11. À demander au client (Jérôme) avant de commencer ou en cas de blocage
|
|
|
|
**Pré-requis techniques déjà fournis** (cf. section 0) : LocalWP installé, WordPress + Bricks + WPML en place et activés. Tu n'as pas à t'en occuper.
|
|
|
|
**Ce qui peut bloquer en cours de route** :
|
|
|
|
- **Visuels manquants** : photographies réelles d'usage (instructeur, stagiaire avec headset, mallette ouverte). Si non disponibles, utiliser des placeholders nommés explicitement (`placeholder-instructor.jpg`, `placeholder-case-residential.jpg`) avec un fond uni navy + texte blanc « PLACEHOLDER » — surtout pas de stock photo générique. Tenir un fichier `MISSING-ASSETS.md` à la racine du child theme listant tout ce qu'il faut produire.
|
|
- **Vidéo hero** : existe-t-il un master cinematic 30 secondes prêt ? Sinon, créer un placeholder MP4 noir de 30 sec (avec FFmpeg : `ffmpeg -f lavfi -i color=c=black:s=1920x1080:d=30 -c:v libx264 placeholder-hero.mp4`) et noter dans `MISSING-ASSETS.md`.
|
|
- **Logos clients** : confirmer avec Jérôme la liste des clients qu'on peut nommer publiquement (NDA sur certains). En attendant, utiliser 5-6 carrés gris numérotés.
|
|
- **Comptes externes / CRM** : pour quel CRM faut-il router les formulaires (HubSpot, Pipedrive, e-mail simple) ? **Demander avant** d'intégrer un endpoint quelconque. Par défaut, configurer un envoi e-mail simple vers `jerome.foucher@asterionvr.com`.
|
|
- **Adresse e-mail dédiée formulaires** : ex. `leads@asterionvr.com` — à créer par l'IT du client.
|
|
- **Décisions de spec** : si tu identifies une ambiguïté ou une incohérence entre les deux livrables `.docx`, **stopper et poser la question à Jérôme** plutôt que d'inventer. La spec est censée être complète.
|
|
|
|
---
|
|
|
|
## 12. Hors scope de cette session
|
|
|
|
- **Production prod** (OVH/O2switch + Cloudflare) — phase ultérieure, après validation locale.
|
|
- **Migration des contenus existants** depuis Avada — à traiter en fin de projet, pas au démarrage. Le contenu nouveau (livrable 1) prime.
|
|
- **Plan de redirections 301** — à constituer en parallèle (liste old URL → new URL) mais à activer seulement le jour de la bascule.
|
|
- **Traduction FR via WPML** — après validation EN. Le client a un linguiste interne.
|
|
- **Création de blog posts** — phase post-launch (calendrier blog 12 mois dans livrable 1, section B.4).
|
|
|
|
---
|
|
|
|
## 13. Repères de qualité finale
|
|
|
|
Avant de considérer un template comme livré :
|
|
|
|
- [ ] Lighthouse cible atteinte (mobile + desktop).
|
|
- [ ] axe-core : zéro violation critique.
|
|
- [ ] Test mobile sur 375px, sans clipping ni débordement.
|
|
- [ ] Tab order logique sur tous les éléments interactifs.
|
|
- [ ] Aucune valeur hardcodée — tout passe par les tokens.
|
|
- [ ] Code commité avec un message clair.
|
|
- [ ] JSON Bricks exporté dans `/templates/`.
|
|
- [ ] CSS et JS minifiés en build prod (mais sources lisibles en dev).
|
|
- [ ] Validation HTML W3C (zéro erreur, warnings tolérés).
|
|
- [ ] Smoke test : la page se charge en moins de 3 secondes sur connexion Slow 3G simulée.
|
|
|
|
---
|
|
|
|
**Bon travail. La spec est complète, le contenu est rédigé, les tokens sont définis. Concentre-toi sur la qualité d'exécution — chaque pixel compte pour un site qui s'adresse à des acheteurs publics.**
|