commit f9192631ff95355152b87b4c87b0829a78c12839 Author: j.foucher Date: Sat May 9 11:39:42 2026 +0200 chore: initial repo setup with project brief, design specs and base docs - 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) diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..92d2eb3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,74 @@ +# ============================================================================= +# Asterion VR — Refonte 2026 — .gitignore +# ============================================================================= + +# --- OS --- +.DS_Store +Thumbs.db +desktop.ini +ehthumbs.db + +# --- Editors / IDE --- +.vscode/ +.idea/ +*.swp +*.swo +*~ +.history/ + +# --- Claude Code local config (per-developer) --- +.claude/settings.local.json + +# --- Environment / secrets --- +.env +.env.local +.env.*.local +*.pem +*.key + +# --- WordPress sensitive files --- +wp-config.php +wp-config-local.php +*.sql +*.sql.gz +debug.log +error_log + +# --- Build artifacts / dependencies --- +node_modules/ +vendor/ +*.log +dist/ +build/ +.cache/ + +# --- Backups --- +*.bak +*.backup +*.orig + +# --- Third-party plugin ZIPs --- +# Bricks Builder + WPML are commercial licensed plugins — each developer +# must deposit their own purchased ZIPs in ThirdParty/ after cloning. +# See README.md for instructions. +/ThirdParty/ + +# --- PDF text extracts --- +# Auto-regenerated from the source PDFs via `pdftotext -layout`. +/design-handoff.txt +/strategie-et-contenu.txt + +# --- WordPress runtime (not part of the child theme) --- +# The repo only contains the child theme `wp-content/themes/asterion-bricks/`. +# Anything else under wp-content/ is LocalWP runtime, not versioned. +/wp-content/uploads/ +/wp-content/cache/ +/wp-content/upgrade/ +/wp-content/plugins/ +/wp-content/index.php +/wp-content/themes/twenty*/ +/wp-content/themes/index.php +/wp-content/themes/bricks/ + +# --- macOS resource forks (occasional Windows leak) --- +._* diff --git a/Asterion-VR_Refonte-2026_Design-Handoff-Specification.pdf b/Asterion-VR_Refonte-2026_Design-Handoff-Specification.pdf new file mode 100644 index 0000000..c0c37b4 Binary files /dev/null and b/Asterion-VR_Refonte-2026_Design-Handoff-Specification.pdf differ diff --git a/Asterion-VR_Refonte-2026_Strategie-et-Contenu.pdf b/Asterion-VR_Refonte-2026_Strategie-et-Contenu.pdf new file mode 100644 index 0000000..aa32130 Binary files /dev/null and b/Asterion-VR_Refonte-2026_Strategie-et-Contenu.pdf differ diff --git a/BRIEF-Claude-Code.md b/BRIEF-Claude-Code.md new file mode 100644 index 0000000..1d1bcc7 --- /dev/null +++ b/BRIEF-Claude-Code.md @@ -0,0 +1,465 @@ +# 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.** diff --git a/MISSING-ASSETS.md b/MISSING-ASSETS.md new file mode 100644 index 0000000..2593a5c --- /dev/null +++ b/MISSING-ASSETS.md @@ -0,0 +1,79 @@ +# Missing assets — à produire / fournir avant livraison + +Liste vivante des médias et contenus manquants pour le site. Mise à jour à chaque nouvelle découverte. Quand un asset est livré, le déplacer dans la section « ✅ Livré » avec la date. + +> **Convention placeholder** : pendant l'attente, utiliser des fichiers nommés `placeholder-.` avec un fond uni navy (#0B1F3A) + texte blanc « PLACEHOLDER ». **Jamais de stock photo générique.** + +--- + +## 🚨 Bloquant — nécessaire pour livrer la home + +### Vidéo hero +- **Spec** : 25-35 sec en boucle silencieuse, 1920×1080 minimum, MP4 H.264 + WebM VP9, max 2 Mo, format cinematic. +- **Brief** (PDF Stratégie D.1) : « officer entering CQB house at night, weapon raised, AAR overlay flashing on the right edge as the scene cuts to instructor cockpit view. Looped silently. Subtle dust + lens motion blur. End frame: black with gold tagline. » +- **Statut** : ❌ pas livrée. Placeholder à utiliser : MP4 noir 30 sec généré par FFmpeg. +- **Action** : confirmer avec Jérôme s'il existe un master cinematic, sinon planifier production. + +### Photographies d'usage +- Photo **instructeur en formation** (Police / Special Forces / Military / Firefighters — 1 par segment idéalement). +- Photo **stagiaire avec headset** en action. +- Photo **mallette ouverte** (PROSERVE Trainee Pack) avec hardware visible. +- **Statut** : ❌ aucune photo terrain disponible à ce stade. +- **Action** : organiser shoot photo, ou récupérer photos existantes des déploiements clients (sous accord NDA). + +### Logos clients pour Trust Bar +- **Brief** : 5-7 logos clients en barre horizontale, ou « sector-trust marks » si NDA bloque (ex. French Tech, French defense cluster, Police XR Working Group). +- **Statut** : ❌ liste à confirmer avec Jérôme. Quels clients peuvent être nommés publiquement ? +- **Placeholder** : 5-6 carrés gris numérotés. + +--- + +## 🟡 Important — pour les pages secondaires + +### Logos Asterion VR (système complet) +- Logo principal SVG (couleurs : navy + gold). +- Logo monochrome white (pour fond sombre). +- Logo monochrome navy (pour fond clair). +- Favicon multi-tailles (16, 32, 192, 512). +- Apple touch icon (180×180). +- **Statut** : à fournir / récupérer auprès de l'équipe brand Asterion. + +### Visuels produit PROSERVE +- Render 3D ou photo de chaque tier : MY PROSERVE, PROSERVE FLEX, PROSERVE ACADEMY, PROSERVE+. +- Visuel **exploded view** mallette (pour template SOLUTION, section « Inside the case »). +- **Statut** : à confirmer. + +### Captures in-engine +- Screenshots Unreal Engine 5 des scénarios (CQB, vehicle stop, riot, etc.). +- Screenshots Instructor Cockpit (UI logiciel instructeur). +- Screenshots AAR (After-Action Review timeline). +- **Statut** : à demander à l'équipe technique Asterion. + +### Vidéos demo (pages Technology) +- Loop 30 sec UWeD (recoil weapon). +- Loop 30 sec Instructor Cockpit. +- Loop 30 sec AAR (replay tactical view). +- Loop 30 sec sample scenario. +- **Statut** : à produire. + +--- + +## 🟢 Nice-to-have — phase post-launch + +### Contenu éditorial blog +- 12 articles Insights (calendrier 12 mois — voir PDF Stratégie partie B.4). +- **Statut** : hors scope phase 1. Linguiste interne du client + Jérôme. + +### Études de cas +- 3 à 6 case studies en année 1 (PDF Stratégie partie A.2 et D.20). +- **Statut** : à constituer après go-live. + +### Témoignages instructeurs +- 3 quotes pour le slider home (PDF Stratégie D.1 section 5). +- **Statut** : 3 quotes anonymisés rédigés dans le PDF — confirmer authenticité ou récupérer vraies citations sourcées. + +--- + +## ✅ Livré + +*(à compléter au fur et à mesure)* diff --git a/README.md b/README.md new file mode 100644 index 0000000..5979e6c --- /dev/null +++ b/README.md @@ -0,0 +1,114 @@ +# Asterion VR — Refonte du site web 2026 + +Repo de la refonte d'**asterionvr.com** : nouveau site institutionnel B2B/B2G de la plateforme XR PROSERVE pour les forces de sécurité européennes (police, special forces, military, firefighters). + +> **Stack** : WordPress 6.x + Bricks Builder (parent) + child theme custom `asterion-bricks` + WPML. +> **Cible** : Lighthouse 90+, WCAG 2.1 AA, mobile-first, RGPD-natif, hébergement français. + +--- + +## Documents de référence + +À lire dans cet ordre **avant tout travail technique** : + +1. `BRIEF-Claude-Code.md` — brief de démarrage projet (13 sections, contraintes, conventions). +2. `Asterion-VR_Refonte-2026_Strategie-et-Contenu.pdf` — livrable 1 (84 p) : diagnostic, stratégie, sitemap, copy EN prête de toutes les pages. +3. `Asterion-VR_Refonte-2026_Design-Handoff-Specification.pdf` — livrable 2 (31 p) : tokens, composants UI, wireframes des 7 templates, motion, a11y. + +Les `.txt` extraits des PDF sont gitignorés. Pour les régénérer : + +```bash +pdftotext -layout "Asterion-VR_Refonte-2026_Design-Handoff-Specification.pdf" "design-handoff.txt" +pdftotext -layout "Asterion-VR_Refonte-2026_Strategie-et-Contenu.pdf" "strategie-et-contenu.txt" +``` + +(`pdftotext` est inclus dans Git for Windows : `C:\Program Files\Git\mingw64\bin\pdftotext.exe`.) + +--- + +## Setup local (LocalWP + symlink Git) + +### 1. Pré-requis + +- **LocalWP** (https://localwp.com) configuré en mode `localhost` (Preferences → Advanced → Router Mode = `localhost`) pour cohabiter avec d'autres stacks locales (XAMPP, etc.). +- Site LocalWP créé : nom **Asterion 2026**, dossier `C:\Users\j_foucher\Local Sites\asterion-2026\`. +- ZIP des plugins commerciaux (chacun doit fournir les siens, depuis son propre compte) : + - `bricks.X.Y.Z.zip` — depuis https://bricksbuilder.io + - `sitepress-multilingual-cms.X.Y.Z.zip` — depuis https://wpml.org + - À déposer dans `ThirdParty/` (gitignored). + +### 2. Installer Bricks parent + +1. Décompresser `ThirdParty/bricks.X.Y.Z.zip` dans `/app/public/wp-content/themes/`. +2. Activer Bricks dans WP Admin → Apparence → Thèmes. +3. Renseigner la license dans Bricks → License (depuis ton compte bricksbuilder.io). + +### 3. Installer WPML + +1. Dans WP Admin → Extensions → Ajouter → Téléverser, charger `ThirdParty/sitepress-multilingual-cms.X.Y.Z.zip`. +2. Activer le plugin et entrer la clé de license depuis ton compte wpml.org. + +### 4. Symlink le child theme depuis ce repo vers LocalWP + +Depuis une **PowerShell admin** : + +```powershell +New-Item -ItemType SymbolicLink ` + -Path "C:\Users\j_foucher\Local Sites\asterion-2026\app\public\wp-content\themes\asterion-bricks" ` + -Target "C:\ASTERION\GIT\WP2026\wp-content\themes\asterion-bricks" +``` + +Puis dans WP Admin → Apparence → Thèmes, activer **Asterion Bricks** (le child theme). + +--- + +## Structure du repo + +``` +WP2026/ +├── BRIEF-Claude-Code.md # brief projet (lecture obligatoire) +├── README.md # ce fichier +├── MISSING-ASSETS.md # tracking des visuels/medias manquants +├── *.pdf # 2 livrables stratégie + design (sources de vérité) +├── ThirdParty/ # gitignored — ZIP plugins commerciaux à déposer manuellement +│ ├── bricks.*.zip +│ └── sitepress-multilingual-cms.*.zip +└── wp-content/ + └── themes/ + └── asterion-bricks/ # le child theme — coeur du travail + ├── style.css # en-tête WP + import tokens + ├── functions.php # hooks, registers, queries + ├── theme.json # tokens globaux (Gutenberg + Bricks) + ├── assets/ + │ ├── css/ # tokens.css, components.css, utilities.css + │ ├── js/ # vanilla JS, defer + │ ├── fonts/ # Inter + Inter Display self-hosted (RGPD) + │ └── img/ + ├── templates/ # exports Bricks JSON (versionnés) + ├── inc/ # CPT, ACF field groups, SEO schema + └── README.md +``` + +--- + +## Conventions + +- **CSS** : préfixe `av-` (asterion-vr), nommage BEM-light, zéro hardcode (tout via tokens). +- **JS** : vanilla, defer, modules ES6 si nécessaire. +- **Images** : AVIF + WebP + JPG fallback, lazy-loading natif sauf hero. +- **Vidéos** : MP4 H.264 + WebM VP9, autoplay muted plays-inline loop, poster image. +- **Commits** : Conventional Commits (`feat:`, `fix:`, `chore:`, `style:`, `refactor:`, `test:`, `docs:`). +- **Branches** : `main` = stable, `feat/` = work in progress, merge après validation. + +--- + +## Hors scope phase actuelle + +Production (OVH/O2switch + Cloudflare), migration depuis Avada, plan 301, traduction FR (linguiste interne), création articles blog éditoriaux (post-launch). + +--- + +## Contact + +- **Client** : Jérôme Foucher — Asterion VR — jerome.foucher@asterionvr.com +- **Repo** : git.polymorph.fr (privé)