AsterionWP2026/BRIEF-Claude-Code.md

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 :

# 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 :

: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 :

.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

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