title: "Stack MD — WordPress Indépendant vs 10web (Architecture & Workflow)" scope: md_global tenant: - type: concept tags: [] source: notion://pages/33626b6c-9c1d-81a3-9c5d-d224384a21ac notion_id: "33626b6c-9c1d-81a3-9c5d-d224384a21ac" updated: 2026-07-31
Contexte & Décision Stratégique¶
Suite à l'utilisation de 10web pour le site vitrine MD, trois problèmes structurels ont été identifiés qui justifient la construction d'un stack propre pour tous les clients artisans.
Les 3 problèmes de 10web¶
1. Dépendance fournisseur Le code React est compilé dans l'infra 10web (AWS/GCP USA). Le client ne peut pas exporter son site et l'héberger ailleurs. Si 10web augmente ses tarifs, change son stack ou ferme — le site disparaît. Le client loue, il ne possède pas. 2. Hébergement US = pénalité de performance Latence réseau US → France : +100 à 150ms de TTFB systématique. Google PageSpeed veut \< 200ms. Avec 10web US + utilisateur en Ariège, on est structurellement hors cible SEO avant même d'optimiser quoi que ce soit. Hostinger LiteSpeed Europe (Amsterdam/Paris) : TTFB typique \< 200ms total depuis la France. 3. Le client artisan ne possède rien Pas d'accès CMS pour modifier ses textes ou ajouter des photos de chantier. Pas d'actif digital transférable. Dépendance totale à MD ET à 10web.
Architecture du Stack MD Indépendant¶
Vue d'ensemble¶
COUCHE 1 — Starter Theme WordPress MD
Design system complet (marine #0D1B2A / or #F0B429 / ivoire #FAF8F3)
Blocs ACF réutilisables par type de section
Schema.org LocalBusiness pré-câblé
Performance Hostinger LiteSpeed optimisée
RGPD : données hébergées en UE
Zone d'exclusivité : ~30km (adaptable selon densité urbaine)
COUCHE 2 — Skill Claude "MD-Site-Builder"
Templates de sections par type de métier
→ Couvreur Ariège
→ Plombier Haute-Garonne
→ Adaptation PMR senior
→ Rénovation énergétique RGE
Règles copywriting BTP intégrées
FAQ GEO pré-générées par segment
Pages service+ville auto-générées
COUCHE 3 — Automation Make
Input : formulaire client (métier + ville + offre)
Output :
→ Contenu pages généré par Claude
→ Importé dans WP via API REST
→ Brief SEO créé dans Notion
→ Calendrier éditorial Brevo déclenché
¶
COUCHE 1 — Starter Theme WordPress MD
Design system complet (marine #0D1B2A / or #F0B429 / ivoire #FAF8F3)
Blocs ACF réutilisables par type de section
Schema.org LocalBusiness pré-câblé
Performance Hostinger LiteSpeed optimisée
RGPD : données hébergées en UE
Zone d'exclusivité : ~30km (adaptable selon densité urbaine)
COUCHE 2 — Skill Claude "MD-Site-Builder"
Templates de sections par type de métier
→ Couvreur Ariège
→ Plombier Haute-Garonne
→ Adaptation PMR senior
→ Rénovation énergétique RGE
Règles copywriting BTP intégrées
FAQ GEO pré-générées par segment
Pages service+ville auto-générées
COUCHE 3 — Automation Make
Input : formulaire client (métier + ville + offre)
Output :
→ Contenu pages généré par Claude
→ Importé dans WP via API REST
→ Brief SEO créé dans Notion
→ Calendrier éditorial Brevo déclenché
Ce que le Client Artisan Possède¶
Avec le stack MD indépendant, chaque client artisan a : - Son propre hébergement Hostinger — son contrat, sa facture, son accès - Son propre domaine — enregistré à son nom - WordPress avec accès admin complet — il peut modifier textes, ajouter photos de chantier sans demander à MD - Code exportable — si demain il quitte MD ou change d'agence, son actif digital lui appartient intégralement - Données hébergées en UE — conformité RGPD native, argument commercial supplémentaire Argument commercial : "Votre site vous appartient. Si demain vous décidez de changer d'agence, vous repartez avec votre site, votre SEO, votre réputation Google. Aucune plateforme de leads ne peut vous offrir ça."
Note zone d'exclusivité : 30km est la référence standard. En zone rurale type Ariège, la zone peut s'élargir naturellement car il y a moins de concurrents par métier. En zone métropolitaine (Toulouse, Montpellier), 30km est déjà très large — ne pas promettre 50km, on se fermerait des portes commerciales.
Pattern de Code Observé dans 10web¶
Analyse du code editor 10web (React + TypeScript) — patterns à reproduire dans le skill :
Structure fichier type¶
"use client";
import React from "react";
import { useRevealOnScroll } from "@/hooks/useRevealOnScroll";
// imports lucide-react pour icônes
const data = [
{ title: "...", description: "..." },
// données séparées du rendu
];
export default function SectionName() {
const { ref, isVisible } = useRevealOnScroll({ threshold: 0.15 });
return (
<section
id="section-id"
className="bg-background py-24 px-6 md:px-12 overflow-hidden"
>
{/* contenu Tailwind */}
</section>
);
}
Ce qui est bien dans ce pattern¶
- 1 section = 1 fichier isolé → maintenable
- Données séparées du markup → modifiable sans toucher au HTML
- Tailwind → pas de CSS custom à gérer
useRevealOnScroll→ animations scroll sans lib externe
Ce qu'on reproduit dans le Starter WP¶
- Équivalent : 1 section = 1 bloc ACF ou 1 template part
- Design tokens en variables CSS (pas de valeurs hardcodées)
- Schema.org JSON-LD intégré directement dans les sections concernées
Sections Homepage MD — Référentiel¶
Sections identifiées sur la homepage 10web actuelle, dans l'ordre :
| # | Fichier | Section | Statut |
| 1 | `HeroSection.tsx` | Hero + CTAs + badges | ✅ Produit |
| 2 | `WhyMaitriseDigitale.tsx` | 4 valeurs différenciantes | ✅ Produit |
| 3 | `MarketContext.tsx` | Stats 75% / 3x / 10+ | ✅ Produit |
| 4 | `ThreeOpportunity.tsx` | 3 segments métier | ✅ Produit |
| 5 | `FourDifferentiators.tsx` | Partenariat exclusif + checklist | ✅ Produit |
| 6 | `ThreeOffers.tsx` | Cards VISIBILITÉ / PRÉSENCE / AUTORITÉ | ✅ Produit |
| 7 | `AdsAddOn.tsx` | Bandeau Add-on Ads | ✅ Produit |
| 8 | `Testimonials.tsx` | 3 témoignages artisans | ✅ Produit |
| 9 | `Faq.tsx` | FAQ accordion + [schema.org](http://schema.org) | ✅ Produit (contenu à remplacer) |
| 10 | `HowItWorks.tsx` | 4 étapes processus | ✅ Produit |
| 11 | `FinalCtaSecureYour.tsx` | CTA final audit gratuit | ✅ Produit |
Comparatif Stack¶
| Critère | 10web | Stack MD WP Hostinger |
| Propriété code client | ❌ Loué | ✅ Possédé |
| Hébergement | 🇺🇸 USA (AWS/GCP) | 🇪🇺 Europe (Amsterdam/Paris) |
| TTFB France | \~250-400ms | \~150-200ms |
| Accès CMS client | ❌ Non | ✅ Admin complet |
| Portabilité | ❌ Impossible | ✅ Export total |
| Dépendance fournisseur | ❌ Totale | ✅ Aucune |
| RGPD | ⚠️ Données US | ✅ Données UE |
| Coût mensuel SaaS | \~30-50€/site | \~5-10€/site Hostinger |
| IA intégrée au code | ✅ 10web AI | ✅ Claude via skill |
| Livraison LP V0 | ✅ Rapide | ✅ Rapide (Zite) |
Roadmap de Construction¶
Phase 1 — Fondations (après pitch Synerciel)¶
- Créer le Starter Theme WordPress MD sur Hostinger
- Intégrer le design system (variables CSS marine/or/ivoire, DM Sans)
- Créer les blocs ACF de base (Hero, Features, Témoignages, FAQ, CTA)
- Câbler Schema.org LocalBusiness en natif
Phase 2 — Skill Claude MD-Site-Builder¶
- Documenter le template de chaque section type
- Créer les variantes par métier (couvreur, plombier, PMR, RGE)
- Intégrer les règles copywriting BTP
- Tester la génération end-to-end sur un cas client fictif
Phase 3 — Automation Make¶
- Formulaire d'onboarding client (métier + ville + offre)
- Scénario Make → Claude → WP API REST
- Brief SEO Notion auto-généré
- Déclenchement calendrier éditorial Brevo
Phase 4 — Productisation¶
- Documentation livraison client (guide prise en main CMS)
- Checklist QA avant mise en ligne
- Process de handover si client quitte MD
Notes & Décisions¶
Décision actée (avril 2026) : 10web utilisé pour le site vitrine MD uniquement (test/prototypage). Tous les clients artisans MD seront sur WordPress Hostinger Europe dès le premier client signé post-Synerciel. Zone d'exclusivité actée : 30km — cohérent en métropole, naturellement plus large en zone rurale (Ariège etc.) sans avoir besoin de le promettre contractuellement. Ne jamais annoncer 50km : trop large en ville, source de blocages commerciaux. Argument commercial fort : Hébergement EU + propriété du code + accès CMS = différenciateur vs toutes les agences qui vendent du Wix/Webflow/10web en location. Priorité immédiate : Finaliser et publier le site MD actuel (10web) pour le pitch Synerciel du 9 avril. Revenir sur ce chantier dès signature.
Notes migration¶
- Migré automatiquement depuis Notion le 2026-07-31
- Wikilinks
[[...]]créés depuis les<page>Notion (URL en suffixe) - Callouts Notion → MD custom navy/orange (via le converter)