# SPEC CLAUDE CODE — SALAM salam-gp.com
## Document de référence technique — Lire intégralement avant de coder

---

## 1. CONTEXTE DU PROJET

Refonte complète du site salam-gp.com.
Agence web indépendante en Guadeloupe, fondée en 2005.

**Identité légale**
- Nom : SALAM (jamais "Salam.com.unity", jamais ".com.unity")
- Propriétaire : Maxime Goeusse — Entrepreneur individuel
- SIRET : 494 112 543 00017
- Adresse : 21P Lotissement Saint-Sauveur La Montagne, 97115 Sainte-Rose, Guadeloupe
- Téléphone : +590 690 65 38 47 (ce numéro uniquement, partout)
- Email : maxime@salam-gp.com
- Site actuel : https://salam-gp.com

**Chiffres réels à utiliser**
- 258 projets livrés
- 14 secteurs accompagnés
- Depuis 2005

---

## 2. RÈGLES ABSOLUES DE RÉDACTION (non négociables)

Ces règles s'appliquent à TOUT le contenu du site :
- Vouvoiement systématique sur toutes les pages
- Jamais "équipe", "nos experts", "chef de projet" (Maxime travaille seul)
- Jamais de chiffres de gain non mesurés ("doublez votre CA", "10x plus de clients")
- Pages IA/chatbot/automatisation : jamais de nom de modèle, d'outil ou de marque (pas Claude, pas GPT, pas n8n)
- Jamais d'emoji dans le contenu (uniquement dans les indicateurs techniques)
- Téléphone : +590 690 65 38 47 — ce numéro uniquement, jamais d'autre

---

## 3. STACK TECHNIQUE

```
Backend      : Symfony 7 (PHP 8.3)
Templating   : Twig
CSS/JS       : Webpack Encore (npm)
Base données : MySQL (OVH mutualisé) — PAS PostgreSQL
Cache        : Filesystem (dev) / Redis si dispo OVH (prod)
Email        : Brevo SMTP
Médias       : OVH Object Storage (S3-compatible)
Workflows    : n8n (VPS séparé)
Dev local    : Docker (php-fpm, nginx, mysql, redis)
Qualité      : PHPStan niveau 6, PHP-CS-Fixer rules Symfony
Tests        : PHPUnit
```

**Important — MySQL vs PostgreSQL**
Le projet était prévu en PostgreSQL mais l'hébergement OVH mutualisé tourne sur MySQL 8.
Adapter toute la configuration Doctrine en conséquence :
- `DATABASE_URL=mysql://user:password@host:3306/dbname`
- `doctrine.yaml` : driver `pdo_mysql`, server_version `8.0`
- Pas de types PostgreSQL spécifiques (JSON → TEXT ou JSON MySQL)

---

## 4. PALETTE GRAPHIQUE (non négociable)

```css
--color-bg:        #111410;  /* fond principal */
--color-card:      #1C4F1C;  /* cartes, blocs */
--color-relief:    #276327;  /* relief, hover */
--color-border:    #327632;  /* filets, bordures */
--color-text:      #F0F2EA;  /* texte principal */
--color-muted:     #A9B4A2;  /* texte secondaire */
--color-accent:    #D7DA45;  /* citron — CTA, accents */
--color-green:     #79B63B;  /* vert intermédiaire */
--color-teal:      #1BA09A;  /* teal */

/* Dégradé accent */
background: linear-gradient(135deg, #D7DA45, #79B63B, #1BA09A);
```

**Typographie**
```css
font-family-title: 'Instrument Serif', Georgia, serif;
font-family-body:  'Manrope', system-ui, sans-serif;
font-family-code:  'JetBrains Mono', monospace;
```

---

## 5. RÈGLE PIXEL-PERFECT (priorité absolue)

Pour chaque page, Claude Code doit :
1. Lire le fichier `.dc.html` correspondant fourni dans le ZIP
2. Reproduire EXACTEMENT le design — couleurs, espacements, typographie, animations
3. Ne jamais interpréter ou "améliorer" le design
4. Tester sur **1440px desktop** ET **390px mobile**
5. Le fichier `.dc.html` fait foi sur tout le reste

---

## 6. ARCHITECTURE SYMFONY

### Routing (toutes les URLs)
```
/                                          → HomeController
/creation-site-internet-guadeloupe/        → ServiceController
/hebergement-et-nom-de-domaine-guadeloupe/ → ServiceController
/infographie-en-guadeloupe/               → ServiceController
/referencement-seo-guadeloupe/            → ServiceController
/referencement-google-adwords-guadeloupe/ → ServiceController
/referencement-local-guadeloupe/          → ServiceController
/creation-chatbot-ia-guadeloupe/          → ServiceController
/automatisation-ia-guadeloupe/            → ServiceController
/creation-application-mobile-guadeloupe/ → ServiceController
/photographe-professionnel-guadeloupe/    → ServiceController
/nos-realisations/                        → RealisationController
/blog/                                    → BlogController
/blog/{slug}/                             → BlogController
/demande-de-devis/                        → DevisController
/votre-budget/                            → BudgetController
/financement-numerique-guadeloupe/        → CticController
/mentions-legales/                        → LegalController
/politique-de-confidentialite/            → LegalController
/cookies/                                 → LegalController
/audit-seo                                → AuditSeoController (proxy POST → n8n)
/api/cheque-tic                           → CticApiController (proxy POST → n8n)
/sitemap.xml                              → SitemapController
/robots.txt                               → RobotsController
/llms.txt                                 → LlmsController
/admin/                                   → Admin\DashboardController
/admin/login                              → Admin\SecurityController
```

**Redirections 301 obligatoires**
```
/community-manager-guadeloupe/ → /automatisation-ia-guadeloupe/
```

**Forcer HTTPS + non-www**
```
https://salam-gp.com (sans www)
```

### Services à créer
```
SeoService          → meta title, description, og:image, canonical par page
JsonLdService       → tous les schemas (voir section GEO)
MediaService        → upload, redimensionnement, WebP, OVH Object Storage
BraidService        → emails transactionnels via Brevo SMTP
SitemapService      → sitemap.xml dynamique
ReCaptchaService    → vérification token v3 côté serveur (score > 0.5)
```

### Entités Doctrine
```
Page        → slug, title, h1, meta_title, meta_description, og_image, is_active
Article     → title, slug, excerpt, content, reading_time, featured_image,
              status (draft/published), published_at, category, tags, author
Category    → name, slug, description, color
Tag         → name, slug
Media       → filename, original_name, mime_type, size, alt, width, height,
              path (OVH), webp_path
Realisation → title, slug, description, category, url, screenshot,
              technologies (array), order_index, is_active
Formulaire  → type (devis/cheque_tic/audit_seo), data (JSON), ip_address,
              status (nouveau/vu/traité), notes
User        → email, password (hashé), roles, first_name, last_name
Parametre   → key (unique), value, group, label
```

### Security
```yaml
# Deux firewalls
admin:  pattern: ^/admin/, form_login, remember_me, ROLE_ADMIN
front:  pattern: ^/, anonymous
```

### Rate Limiting
```
5 soumissions / 10 minutes / IP sur tous les formulaires
```

---

## 7. VARIABLES D'ENVIRONNEMENT

Créer `.env.example` avec toutes ces variables (sans valeurs) :

```bash
APP_ENV=prod
APP_SECRET=
DATABASE_URL=mysql://user:password@host:3306/salam_prod

# Brevo SMTP
MAILER_DSN=smtp://apikey:BREVO_API_KEY@smtp-relay.brevo.com:587
BREVO_API_KEY=

# reCAPTCHA v3
RECAPTCHA_SITE_KEY=
RECAPTCHA_SECRET_KEY=

# APIs Google
PAGESPEED_API_KEY=
GOOGLE_ANALYTICS_ID=
GOOGLE_TAG_MANAGER_ID=

# Anthropic (workflow Chèque TIC)
ANTHROPIC_API_KEY=

# n8n webhooks (masqués derrière proxy Symfony)
N8N_WEBHOOK_AUDIT=
N8N_WEBHOOK_CTIC=

# OVH Object Storage
OVH_STORAGE_URL=
OVH_CONTAINER=
OVH_TOKEN=

# Google Agenda / RDV
CALENDLY_URL=

# WhatsApp
WHATSAPP_URL=https://wa.me/590690653847
```

---

## 8. FICHIERS FOURNIS (dans le ZIP de départ)

### Pages Claude Design (.dc.html)
```
accueil.dc.html
creation-site-internet.dc.html
automatisation-ia.dc.html
chatbot-ia.dc.html
referencement-seo.dc.html
google-ads.dc.html
referencement-local.dc.html
application-mobile.dc.html
hebergement.dc.html
infographie.dc.html
photographe.dc.html
realisations.dc.html
blog-listing.dc.html
blog-article.dc.html
demande-de-devis.dc.html
budget-tarifs.dc.html
cheque-tic.dc.html
mentions-legales.dc.html
politique-confidentialite.dc.html
cookies.dc.html
```

### Animations SVG
```
salam-animation-ads.html
salam-animation-seo.html
salam-animation-local.html
salam-animation-chatbot.html
salam-animation-app.html
salam-animation-photo.html
salam-animation-devis.html
salam-animation-tic.html
salam-animation-automatisation-ia.html
salam-animation-infographie.html
```

### Carte Guadeloupe (page Accueil uniquement)
```
carte-guadeloupe_svg.html   ← SVG interactif avec communes animées au hover
carte-guadeloupe.css        ← styles associés
```
Intégrer en composant Twig `components/carte-guadeloupe.html.twig`.
Utilisé UNIQUEMENT sur la page d'accueil dans le hero.

### Assets
```
bloc-vert.css
bloc-vert.js
carte-guadeloupe_svg.html
carte-guadeloupe.css
logo-salam.png (et .svg si disponible)
logo-deborah.png
symboleretenu.png
maxime-goeusse-photo.png
images-realisations/ (dossier ZIP)
```

---

## 9. ACCÈS SERVEUR

```
OVH mutualisé : Claude Code a les accès SSH
MySQL OVH     : Claude Code a les accès BDD
VPS n8n       : https://n8n-gc5t.srv1713011.hstgr.cloud (accès disponibles)
```

---

## 10. SEO & GEO (priorité critique)

### JSON-LD à injecter via JsonLdService

**Organization + LocalBusiness** (toutes les pages)
```json
{
  "@type": ["Organization", "LocalBusiness", "ProfessionalService"],
  "name": "SALAM",
  "url": "https://salam-gp.com",
  "foundingDate": "2005",
  "telephone": "+590690653847",
  "email": "maxime@salam-gp.com",
  "address": {
    "streetAddress": "21P Lotissement Saint-Sauveur La Montagne",
    "addressLocality": "Sainte-Rose",
    "postalCode": "97115",
    "addressCountry": "GP"
  },
  "areaServed": "Guadeloupe",
  "priceRange": "€€"
}
```

**Person** (accueil + articles blog)
```json
{
  "@type": "Person",
  "name": "Maxime Goeusse",
  "jobTitle": "Développeur web & consultant digital",
  "image": "https://salam-gp.com/images/maxime-goeusse.jpg"
}
```

**FAQPage** → généré dynamiquement depuis faq-accordion sur chaque page
**BlogPosting** → injecté sur chaque fiche article
**Service** → un schema par page de service avec fourchette tarifaire
**BreadcrumbList** → toutes les pages hors accueil

### llms.txt
Fichier statique à la racine décrivant SALAM, ses services et ses URLs principales.

### Passages citables GEO
Chaque page service doit contenir un paragraphe court, factuel, citable par les IA :

**Accueil :**
> "SALAM est une agence web basée à Sainte-Rose, Guadeloupe, active depuis 2005. Elle crée des sites internet, déploie des automatisations IA, développe des chatbots et gère le référencement de PME guadeloupéennes."

**Création de site :**
> "SALAM conçoit des sites vitrines et e-commerce pour les entreprises de Guadeloupe, avec intégration SEO, hébergement OVH et maintenance. Tarifs dès 990 €."

**Chatbot + Automatisation :**
> "SALAM conçoit et déploie des chatbots IA et des automatisations pour les PME guadeloupéennes. Setup à partir de 490 €."

---

## 11. GRILLE TARIFAIRE (à afficher sur le site)

### One-shot
| Prestation | Fourchette |
|---|---|
| Landing page / One Page | 390 – 590 € |
| Site vitrine standard | 990 – 1 490 € |
| Site vitrine premium | 1 800 – 2 500 € |
| Site e-commerce standard | 2 200 – 3 900 € |
| Site e-commerce sur mesure | 4 500 – 8 000 € |
| PWA | 2 000 – 3 000 € |
| Application cross-platform | 4 500 – 8 000 € |
| Application native | Sur devis |

### Abonnement site
| | |
|---|---|
| Frais de mise en service | 290 € |
| Phase 1 (36 mois) | 89 €/mois |
| Phase 2 (sans engagement) | 49 €/mois |

### Services récurrents
| Prestation | Tarif |
|---|---|
| Maintenance seule | 49 €/mois |
| Maintenance + SEO local basique | 99 €/mois |
| SEO complet | 290 – 490 €/mois |
| Référencement local GBP | 149 – 249 €/mois |
| Google Ads setup | 290 € one-shot |
| Google Ads suivi | 99 – 190 €/mois |
| Chatbot IA setup | 490 – 1 490 € |
| Chatbot IA mensuel | 49 – 149 €/mois |
| Automatisation IA | Sur devis (min 490 € setup) |

---

## 12. FORMULAIRES

### Demande de devis — 3 étapes
- Étape 1 : pills multi-sélection services (au moins 1 obligatoire)
- Étape 2 : questions contextuelles selon sélection + bloc Chèque TIC (oui/non)
- Étape 3 : coordonnées + confirmation email + upload optionnel + reCAPTCHA v3

**Action :** POST vers `/demande-de-devis` → validation Symfony → BraidService (email client + email Maxime) → Formulaire en BDD → confirmation in-page (pas de redirection)

### Chèque TIC — 2 étapes
- Étape 1 : structure (type entreprise/association, SIRET, représentant légal)
- Étape 2 : projet numérique + uploads (Kbis, pièce identité, 2 relevés bancaires, statuts si asso)
- Détection automatique branche entreprise/association
- Suppression fichiers après envoi ZIP

**Action :** POST vers `/api/cheque-tic` → proxy Symfony → webhook n8n → ZIP généré → Brevo → suppression fichiers

### Audit SEO
- Champ URL + email
- reCAPTCHA v3

**Action :** POST vers `/audit-seo` → proxy Symfony → webhook n8n → rapport HTML par email

---

## 13. BACK-OFFICE

URL de base : `/admin/`

### Sections
```
/admin/dashboard              → stats + derniers formulaires
/admin/login                  → authentification
/admin/pages/                 → liste + édition pages (TipTap WYSIWYG)
/admin/blog/articles/         → CRUD articles
/admin/blog/categories/       → CRUD catégories
/admin/blog/tags/             → CRUD tags
/admin/medias/                → bibliothèque + upload FilePond
/admin/realisations/          → CRUD réalisations
/admin/formulaires/devis/     → tableau formulaires devis reçus
/admin/formulaires/cheque-tic/ → tableau dossiers Chèque TIC
/admin/parametres/            → paramètres globaux
```

### TipTap WYSIWYG
Toolbar : gras, italique, H2, H3, liste ul/ol, lien, image (depuis médiathèque via modale), blockquote, code inline.

### FilePond
Upload drag & drop multi-fichiers. Conversion WebP auto. Redimensionnement 800/400/200px. Stockage OVH Object Storage.

---

## 14. WORKFLOWS N8N

URL n8n : `https://n8n-gc5t.srv1713011.hstgr.cloud`

Nommer TOUS les workflows avec le préfixe `SALAM — ` et appliquer le tag `SALAM`.

### Workflow 1 : `SALAM — Audit SEO automatique`
Webhook POST → PageSpeed API (mobile + desktop) → parser 25+ critères → score /100 → template HTML rapport → Brevo → alerte si échec

### Workflow 2 : `SALAM — Chèque TIC dossier automatique`
Webhook POST → extraction données → Claude API → 4 PDFs (lettre, note projet, attestation, guide dépôt) → branche association (contrat engagement républicain) → ZIP → Brevo (avec lien RDV Google Agenda) → email interne Maxime → suppression fichiers

### Workflow 3 : `SALAM — Chatbot Gîte Balisier`
Webhook temps réel → Claude API (base de connaissances Gîte Balisier) → réponse < 3s → widget page /creation-chatbot-ia-guadeloupe/

---

## 15. GIT & SÉCURITÉ

**PREMIÈRE ACTION OBLIGATOIRE avant tout commit :**
Vérifier que le `.gitignore` Symfony contient bien ces lignes.
Si elles sont absentes, les ajouter immédiatement AVANT de faire
le moindre `git add` ou `git commit` :

```gitignore
# Fichiers secrets — jamais dans Git
.env.local
.env.*.local
.env.prod
.env.prod.local
```

Committer uniquement :
- `.env` (vide, sans aucune valeur réelle)
- `.env.example` (toutes les variables listées, sans valeurs)

Jamais dans Git :
- Clés API (reCAPTCHA, PageSpeed, Anthropic, Brevo...)
- Mots de passe BDD
- Tokens serveur OVH
- URLs webhooks n8n

---

## 16. DÉPLOIEMENT

### Dev local
```bash
docker-compose up -d
composer install
npm install && npm run dev
php bin/console doctrine:migrations:migrate
php bin/console doctrine:fixtures:load
```

### Production OVH
```bash
# Script Deployer
dep deploy prod

# Étapes :
# 1. git pull
# 2. composer install --no-dev --optimize-autoloader
# 3. npm run build
# 4. doctrine:migrations:migrate --no-interaction
# 5. cache:clear && cache:warmup
# 6. Rollback automatique si erreur
```

### Chemin de déploiement OVH
```
Développement / staging : /www/salam/salam2026/
Mise en ligne officielle : /www/salam/
```

⚠️ IMPORTANT — Au moment de la mise en ligne officielle :
1. Sauvegarder /www/salam/salam2026/
2. Déplacer le contenu vers /www/salam/
3. Mettre à jour le document root OVH si nécessaire
4. Vérifier que toutes les URLs et chemins absolus pointent vers le bon répertoire
5. Tester HTTPS + redirections 301 après déplacement

### Monitoring
- UptimeRobot sur https://salam-gp.com (alertes SMS + email)
- Logs n8n : 100 dernières exécutions minimum
- Alerte email si workflow n8n échoue

---

## 17. ORDRE D'EXÉCUTION

Suivre **strictement** les phases du Pipeline Dev Notion dans l'ordre :

```
Phase 0  → Init (Docker, env, Webpack, dépendances, routing, security)
Phase 1  → Entités (Doctrine, migrations, fixtures, repositories)
Phase 2  → Services & API (SeoService, JsonLdService, MediaService, proxies)
Phase 3  → Layout & Composants (base.html.twig, header, footer, composants)
Phase 4  → Animations SVG (intégration des 10 animations en composants Twig)
Phase 5  → Pages publiques (20 pages — pixel-perfect depuis .dc.html)
Phase 6  → Formulaires (devis, Chèque TIC, audit SEO, validation, emails)
Phase 7  → SEO & GEO (JSON-LD, llms.txt, passages citables, sitemap, robots)
Phase 8  → Back-office (layout, dashboard, CRUD, TipTap, FilePond, médias)
Phase 9  → RGPD & Analytics (bannière cookies, GA4, GTM)
Phase 10 → Perf & Sécurité (headers, cache, lazy loading, OPcache, Lighthouse)
Phase 11 → Tests & QA (PHPUnit, fonctionnels, Lighthouse > 90, iOS Safari)
Phase 12 → Déploiement (Docker prod, Deployer, sauvegardes, UptimeRobot)
```

Les phases 13 (Workflows n8n) et 14 (Post-lancement) sont faites après la mise en ligne.

---

## 18. PIPELINE DEV NOTION

Base de données de référence pour toutes les tâches :
https://app.notion.com/p/d620fe3ef1274ddf85fc008a3e926d9d

Marquer chaque tâche **"En cours"** au début et **"Terminé"** avec le numéro de commit dans le champ `Commit`.

---

*SPEC rédigé le 1er septembre 2026 — Maxime Goeusse + Claude*