# 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.**